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.

| Name | Type | Default | Description | | --- | --- | --- | --- | | classes | string | | The classes to be normalized. |

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.

| Name | Type | Default | Description | | --- | --- | --- | --- | | styles | string | | The styles to be normalized. |

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>).

| Name | Type | Default | Description | | --- | --- | --- | --- | | props | Object | | Pass the svelte $$props magic variable to this argument. | | name | string | | The name of the part to be styled. ("" for main partition) | | defaultClass | string | | The default classes to be applied to the part. | | defaultStyle | string | | The default styles to be applied to the part. |

<!-- 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

| Name | Type | Default | Description | | --- | --- | --- | --- | | gap? | number | 5 (in px) | The gap between the line and the text | | color? | string | #888 | The color of the line | | thickness? | number | 3 (in px) | The thickness of the line | | direction? | string | horizontal | The direction of the line. Can be horizontal or vertical |

<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

| Name | Type | Default | Description | | --- | --- | --- | --- | | gap? | number | 5 (in px) | The gap between the element and the label | | label? | string | '' | The text of the label | | position? | string | top | The position of the label. Can be top, bottom, left, or right |

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

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