@tnthung/svelte-component v0.0.4

This library is built for the purpose of reducing code duplication in the multiple projects that I work on. The components are written as generic as possible, so that they can be used in different projects.

Action

1. clickOut

clickOut

This action is used to detect if a click event is happened outside of the element. To use this action, simply add use:clickOut={callback} to the DOM element. The callback function takes no arguments and will be called when a click event is detected outside of the element.

<script>
  import { clickOut } from 'svelte-components'
  let show = false
</script>

<button on:click={() => show = true}>Show</button>

{#if show}
  <div use:clickOut={() => show = false}>
    <p>Click outside of this element to close it</p>
  </div>
{/if}

Function

1. normalizeClass
2. normalizeStyle
3. stylable

normalizeClass

This function is used to normalize the HTML class attribute. It takes in a string and remove all extra spaces and new lines.

import { normalizeClass } from 'svelte-components'

const class = normalizeClass(`
  class1 class2
  class3
`); // class = 'class1 class2 class3'

normalizeStyle

This function is used to normalize the HTML style attribute. It takes in a string and remove all extra spaces, new lines and the comments.

import { normalizeStyle } from 'svelte-components'

const style = normalizeStyle(`
  color: red;
  /* This is a comment */
  background-color: blue;
`); // style = 'color: red; background-color: blue;'

stylable

This function is mainly be used for building the svelte component by giving them the ability to be styled externally. It takes 4 arguments, and exposes 4 props to the component. By the given name, if name is "", then

1. class
2. style
3. class-extra
4. style-extra

will be exposed to the component. If name is non-empty string, then

1. class-${name}
2. style-${name}
3. class-${name}-extra
4. style-${name}-extra

will be exposed to the component.

The props with no -extra suffix will fully replace the default classes or styles. The props with -extra suffix will be appended to the default classes or styles.

The defaultClass and defaultStyle arguments will be normalized first before being applied to the component.

Notice that, for classes to take effect, they have to be defined in the global scope (using :global or <style global>).

<!-- Defining Component.svelte -->
<script>
  import { stylable } from 'svelte-components'
</script>

<div {...stylable($$props, "", "", "")}>          <!-- Exposing `class`,      `style`,      `class-extra`,      `style-extra`      props -->
  <span {...stylable($$props, "span", "", "")}/>  <!-- Exposing `class-span`, `style-span`, `class-span-extra`, `style-span-extra` props -->
</div>

<!-- Using the component -->
<script>
  import Component from './Component.svelte'
</script>

<Component
  class="class1 class2"
  style-extra="color: red;"
  class-span-extra="class3"/>

Component

1. Divisor
2. Labeled

Divisor

This component is used to create a simple divisor line with rounded edge.

Props

<script>
  import { Divisor } from 'svelte-components'
</script>

<Divisor />

Labeled

This component added a label to the element. The label can be positioned on the top, bottom, left, or right of the element. Like regular label tag, by clicking on the label, the element will be focused.

Props

<script>
  import { Labeled } from 'svelte-components'
</script>

<Labeled label="Label">
  <input type="text" />
</Labeled>