@tnthung/svelte-component

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>