@axel669/zephyr 0.3.4-beta.0 → 0.3.6

package/src/control/tabs.svelte

@@ -1,43 +1,43 @@
-<svelte:options immutable />
-
-<script>
-    import wsx from "../wsx.mjs"
-    import { handler$ } from "../handler$.mjs"
-
-    export let color = "@primary"
-    export let options = []
-    export let vertical = false
-    export let solid = false
-    export let value
-
-    $: index = options.findIndex(item => item.value === value)
-
-    const set = handler$(
-        (next) => {
-            if (value === next) {
-                return
-            }
-            value = next
-        }
-    )
-
-    $: wind = {
-        "$solid": solid,
-        "$color": color,
-        $vert: vertical,
-        ...$$restProps,
-    }
-</script>
-
-<!-- svelte-ignore a11y-click-events-have-key-events -->
-<ws-tabs use:wsx={wind} role="tablist">
-    {#each options as tab, i}
-        <!-- svelte-ignore a11y-interactive-supports-focus -->
-        <ws-tab use:wsx={{"$tab-selected": index === i}}
-        on:click={set(tab.value)} role="tab">
-            <slot {tab} selected={index === i}>
-                {tab.label}
-            </slot>
-        </ws-tab>
-    {/each}
-</ws-tabs>
+<svelte:options immutable />
+
+<script>
+    import wsx from "../wsx.mjs"
+    import { handler$ } from "../handler$.mjs"
+
+    export let color = "@primary"
+    export let options = []
+    export let vertical = false
+    export let solid = false
+    export let value
+
+    $: index = options.findIndex(item => item.value === value)
+
+    const set = handler$(
+        (next) => {
+            if (value === next) {
+                return
+            }
+            value = next
+        }
+    )
+
+    $: wind = {
+        "$solid": solid,
+        "$color": color,
+        $vert: vertical,
+        ...$$restProps,
+    }
+</script>
+
+<!-- svelte-ignore a11y-click-events-have-key-events -->
+<ws-tabs use:wsx={wind} role="tablist">
+    {#each options as tab, i}
+        <!-- svelte-ignore a11y-interactive-supports-focus -->
+        <ws-tab use:wsx={{"$tab-selected": index === i}}
+        on:click={set(tab.value)} role="tab">
+            <slot {tab} selected={index === i}>
+                {tab.label}
+            </slot>
+        </ws-tab>
+    {/each}
+</ws-tabs>

package/src/control/toggle.md

@@ -1,61 +1,61 @@
-# Toggle
-
-The Toggle component is used to display checkboxes and switches.
-
-## Props
-
-### color
-`string`
-
-Sets `$color`
-
-### checkbox
-`bool`
-
-If true, the toggle is displayed as a checkbox. Default is false
-(shown as a switch)
-
-### checked
-`bool`
-
-Controls if the toggle is checked or not. Can be bound.
-
-### group
-Used for binding, see the
-[Svelte bind:group](https://svelte.dev/docs/element-directives#bind-group)
-for details.
-
-### label
-`string`
-
-The text to use for the label
-
-### flat
-`bool`
-
-Sets `$flat`
-
-### reverse
-`bool`
-
-If true, the input being toggled will be on the left instead of the
-right. Default is false (label is on the left)
-
-### value
-`any`
-
-Only used in conjunction with bind:group, see Svelte docs
-
-## Example
-```svelte
-<script>
-    import { Toggle } from "@axel669/zephyr"
-
-    let checked = false
-</script>
-
-<Toggle label="Active" bind:checked />
-<Toggle label="Active" checkbox bind:checked />
-<Toggle label="Active" checkbox reverse bind:checked />
-<Toggle label="Active" checkbox flat color="danger" bind:checked />
-```
+# Toggle
+
+The Toggle component is used to display checkboxes and switches.
+
+## Props
+
+### color
+`string`
+
+Sets `$color`
+
+### checkbox
+`bool`
+
+If true, the toggle is displayed as a checkbox. Default is false
+(shown as a switch)
+
+### checked
+`bool`
+
+Controls if the toggle is checked or not. Can be bound.
+
+### group
+Used for binding, see the
+[Svelte bind:group](https://svelte.dev/docs/element-directives#bind-group)
+for details.
+
+### label
+`string`
+
+The text to use for the label
+
+### flat
+`bool`
+
+Sets `$flat`
+
+### reverse
+`bool`
+
+If true, the input being toggled will be on the left instead of the
+right. Default is false (label is on the left)
+
+### value
+`any`
+
+Only used in conjunction with bind:group, see Svelte docs
+
+## Example
+```svelte
+<script>
+    import { Toggle } from "@axel669/zephyr"
+
+    let checked = false
+</script>
+
+<Toggle label="Active" bind:checked />
+<Toggle label="Active" checkbox bind:checked />
+<Toggle label="Active" checkbox reverse bind:checked />
+<Toggle label="Active" checkbox flat color="danger" bind:checked />
+```

package/src/control/toggle.svelte

@@ -1,49 +1,49 @@
-<svelte:options immutable />
-
-<script>
-    import wsx from "../wsx.mjs"
-
-    export let label = ""
-    export let color = "@default"
-    export let checked = false
-    export let flat = false
-    export let value
-    export let group = []
-    export let checkbox = false
-    export let reverse = false
-
-    $: container = {
-        "@toggle": true,
-        "$flat": flat,
-        "$color": color,
-        "fl.dir": reverse ? "row-reverse" : false,
-        ...$$restProps,
-    }
-    $: input = {
-        "@switch": checkbox === false
-    }
-
-    const updateGroup = (checked) => {
-        if (checked === true) {
-            if (group.includes(value) === true) {
-                return
-            }
-            group = [...group, value]
-            return
-        }
-        if (group.includes(value) === false) {
-            return
-        }
-        group = group.filter(item => item !== value)
-    }
-    $: updateGroup(checked)
-</script>
-
-<label use:wsx={container}>
-    <div>
-        <slot>
-            {label}
-        </slot>
-    </div>
-    <input type="checkbox" bind:checked use:wsx={input} />
-</label>
+<svelte:options immutable />
+
+<script>
+    import wsx from "../wsx.mjs"
+
+    export let label = ""
+    export let color = "@default"
+    export let checked = false
+    export let flat = false
+    export let value
+    export let group = []
+    export let checkbox = false
+    export let reverse = false
+
+    $: container = {
+        "@toggle": true,
+        "$flat": flat,
+        "$color": color,
+        "fl.dir": reverse ? "row-reverse" : false,
+        ...$$restProps,
+    }
+    $: input = {
+        "@switch": checkbox === false
+    }
+
+    const updateGroup = (checked) => {
+        if (checked === true) {
+            if (group.includes(value) === true) {
+                return
+            }
+            group = [...group, value]
+            return
+        }
+        if (group.includes(value) === false) {
+            return
+        }
+        group = group.filter(item => item !== value)
+    }
+    $: updateGroup(checked)
+</script>
+
+<label use:wsx={container}>
+    <div>
+        <slot>
+            {label}
+        </slot>
+    </div>
+    <input type="checkbox" bind:checked use:wsx={input} />
+</label>

package/src/data-display/avatar.md

@@ -1,36 +1,36 @@
-# Avatar
-
-Displays an image or text in a circular container.
-
-## Props
-
-### alt
-`string`
-
-Alt text for the image. Has no effect if image prop is not used.
-
-### color
-`string`
-
-Sets `$color`
-
-### image
-`string`
-
-An image url. If no url is provided the text property is displayed.
-
-### text
-`string`
-
-Text to show in the avatar area if image is not used.
-
-## Example
-```svelte
-<script>
-    import { Avatar } from "@axel669/zephyr"
-</script>
-
-<Avatar image="url" />
-<Avatar image="url" alt="text" />
-<Avatar text="Hi" color="primary" />
-```
+# Avatar
+
+Displays an image or text in a circular container.
+
+## Props
+
+### alt
+`string`
+
+Alt text for the image. Has no effect if image prop is not used.
+
+### color
+`string`
+
+Sets `$color`
+
+### image
+`string`
+
+An image url. If no url is provided the text property is displayed.
+
+### text
+`string`
+
+Text to show in the avatar area if image is not used.
+
+## Example
+```svelte
+<script>
+    import { Avatar } from "@axel669/zephyr"
+</script>
+
+<Avatar image="url" />
+<Avatar image="url" alt="text" />
+<Avatar text="Hi" color="primary" />
+```

package/src/data-display/avatar.svelte

@@ -1,25 +1,25 @@
-<svelte:options immutable />
-
-<script>
-    import wsx from "../wsx.mjs"
-
-    export let alt = ""
-    export let image = null
-
-    export let text = ""
-
-    export let color = false
-
-    $: wind = {
-        "$color": color,
-        ...$$restProps
-    }
-</script>
-
-<ws-avatar use:wsx={wind}>
-    {#if image !== null}
-        <img src={image} {alt} />
-    {:else}
-        {text}
-    {/if}
-</ws-avatar>
+<svelte:options immutable />
+
+<script>
+    import wsx from "../wsx.mjs"
+
+    export let alt = ""
+    export let image = null
+
+    export let text = ""
+
+    export let color = false
+
+    $: wind = {
+        "$color": color,
+        ...$$restProps
+    }
+</script>
+
+<ws-avatar use:wsx={wind}>
+    {#if image !== null}
+        <img src={image} {alt} />
+    {:else}
+        {text}
+    {/if}
+</ws-avatar>

package/src/data-display/badge.md

@@ -1,30 +1,30 @@
-# Badge
-Adds a small badge over the upper-right corner of some content.
-
-## Props
-
-### color
-`string`
-
-Sets `$color`
-
-### text
-`string`
-
-The badge text.
-
-## Example
-```svelte
-<script>
-    import { Badge } from "@axel669/zephyr"
-
-    let count = 10
-</script>
-
-<Badge text={count}>
-    Unread Messages
-</Badge>
-<Badge text="1k+" color="warning">
-    <button on:click={() => count += 1}>Clickable Content</button>
-</Badge>
-```
+# Badge
+Adds a small badge over the upper-right corner of some content.
+
+## Props
+
+### color
+`string`
+
+Sets `$color`
+
+### text
+`string`
+
+The badge text.
+
+## Example
+```svelte
+<script>
+    import { Badge } from "@axel669/zephyr"
+
+    let count = 10
+</script>
+
+<Badge text={count}>
+    Unread Messages
+</Badge>
+<Badge text="1k+" color="warning">
+    <button on:click={() => count += 1}>Clickable Content</button>
+</Badge>
+```

package/src/data-display/badge.svelte

@@ -1,14 +1,14 @@
-<svelte:options immutable />
-
-<script>
-    import wsx from "../wsx.mjs"
-
-    export let color = "@default"
-    export let text = ""
-
-    $: wind = { "$color": color, ...$$restProps }
-</script>
-
-<ws-badge ws-text={text} use:wsx={wind}>
-    <slot />
-</ws-badge>
+<svelte:options immutable />
+
+<script>
+    import wsx from "../wsx.mjs"
+
+    export let color = "@default"
+    export let text = ""
+
+    $: wind = { "$color": color, ...$$restProps }
+</script>
+
+<ws-badge ws-text={text} use:wsx={wind}>
+    <slot />
+</ws-badge>

package/src/data-display/chip.md

@@ -1,36 +1,36 @@
-# Chip
-
-Shows a small piece of information that is separate from the surrounding
-info and optionally allows interaction.
-
-## Props
-
-### color
-`string`
-
-Sets `$color`
-
-### clickable
-`bool`
-
-If true, the chip will have the button ripple effect when clicked.
-
-### fill
-`bool`
-
-If true, sets $fill on the chip. If false $outline is set instead.
-
-## Events
-- click
-
-## Example
-```svelte
-<script>
-    import { Chip } from "@axel669/zephyr"
-</script>
-
-Emails:
-<Chip clickable>admin@site.com</Chip>
-<Chip clickable color="warning">weirdge@site.com</Chip>
-<Chip color="primary" fill>required@site.io</Chip>
-```
+# Chip
+
+Shows a small piece of information that is separate from the surrounding
+info and optionally allows interaction.
+
+## Props
+
+### color
+`string`
+
+Sets `$color`
+
+### clickable
+`bool`
+
+If true, the chip will have the button ripple effect when clicked.
+
+### fill
+`bool`
+
+If true, sets $fill on the chip. If false $outline is set instead.
+
+## Events
+- click
+
+## Example
+```svelte
+<script>
+    import { Chip } from "@axel669/zephyr"
+</script>
+
+Emails:
+<Chip clickable>admin@site.com</Chip>
+<Chip clickable color="warning">weirdge@site.com</Chip>
+<Chip color="primary" fill>required@site.io</Chip>
+```

package/src/data-display/chip.svelte

@@ -1,28 +1,28 @@
-<svelte:options immutable />
-
-<script>
-    import wsx from "../wsx.mjs"
-    import variant from "../variant.mjs"
-
-    export let color = "@default"
-    export let clickable = false
-
-    export let fill = false
-    export let outline = false
-    export let flat = false
-
-    $: type = variant({ fill, flat, outline }, "$outline")
-
-    $: wind = {
-        [type]: true,
-        "$color": color,
-        $click: clickable,
-        ...$$restProps
-    }
-</script>
-
-<!-- svelte-ignore a11y-click-events-have-key-events -->
-<!-- svelte-ignore a11y-interactive-supports-focus -->
-<ws-chip use:wsx={wind} on:click role="button">
-    <slot />
-</ws-chip>
+<svelte:options immutable />
+
+<script>
+    import wsx from "../wsx.mjs"
+    import variant from "../variant.mjs"
+
+    export let color = "@default"
+    export let clickable = false
+
+    export let fill = false
+    export let outline = false
+    export let flat = false
+
+    $: type = variant({ fill, flat, outline }, "$outline")
+
+    $: wind = {
+        [type]: true,
+        "$color": color,
+        $click: clickable,
+        ...$$restProps
+    }
+</script>
+
+<!-- svelte-ignore a11y-click-events-have-key-events -->
+<!-- svelte-ignore a11y-interactive-supports-focus -->
+<ws-chip use:wsx={wind} on:click role="button">
+    <slot />
+</ws-chip>