@axel669/zephyr 0.2.0-beta.3 → 0.3.6

package/src/control/radio.svelte

@@ -1,28 +1,28 @@
-<svelte:options immutable />
-
-<script>
-    import wsx from "../wsx.mjs"
-    import { handler$ } from "../handler$.mjs"
-
-    import Flex from "../layout/flex.svelte"
-
-    export let options = []
-    export let layout = Flex
-    export let value
-
-    $: valueIndex = options.findIndex(item => item.value === value)
-    const set = handler$(
-        (newValue) => value = newValue
-    )
-
-    const name = `${Math.random().toString(16)}-${Date.now()}`
-</script>
-
-<svelte:component this={layout} {...$$restProps}>
-    {#each options as {value, label, disabled, ...wind}, index (value)}
-        <label use:wsx={{"$toggle": true, ...wind}} {disabled}>
-            <span>{label}</span>
-            <input type="radio" on:input={set(value)} {name} checked={index === valueIndex} />
-        </label>
-    {/each}
-</svelte:component>
+<svelte:options immutable />
+
+<script>
+    import wsx from "../wsx.mjs"
+    import { handler$ } from "../handler$.mjs"
+
+    import Flex from "../layout/flex.svelte"
+
+    export let options = []
+    export let layout = Flex
+    export let value
+
+    $: valueIndex = options.findIndex(item => item.value === value)
+    const set = handler$(
+        (newValue) => value = newValue
+    )
+
+    const name = `${Math.random().toString(16)}-${Date.now()}`
+</script>
+
+<svelte:component this={layout} {...$$restProps}>
+    {#each options as {value, label, disabled, ...wind}, index (value)}
+        <label use:wsx={{"@toggle": true, ...wind}} {disabled}>
+            <span>{label}</span>
+            <input type="radio" on:input={set(value)} {name} checked={index === valueIndex} />
+        </label>
+    {/each}
+</svelte:component>

package/src/control/select.md

@@ -1,70 +1,70 @@
-# Select
-
-A wrapper for select elements to make them look nicer.
-
-## Base
-[Windstorm Labeled Control](https://axel669.github.io/lib.windstorm/#components-labeled control)
-using a `<select>`
-
-## Props
-All [windstorm functions](https://axel669.github.io/lib.windstorm/#css-shorthands)
-are supported.
-
-### color
-`string`
-
-Sets `$color`
-
-### label
-`string`
-
-The text to display as the label
-
-### options
-`Array[Object]`
-
-An array of options and groups to show in the select. Details below
-
-### outline `bool`
-
-Sets `$outline`
-### value
-`any`
-
-The value currently selected. Can be bound to react to selections or
-change the current selection.
-
-## Options
-Each object in the options provided should be in one of 2 forms:
-- `{ label, value }`
-- `{ group }`
-
-Items with a label and value are displayed as <option> tags in the select.
-Items with a group defined are used to denote <optgroup> tags. Each option
-after a `{ group }` item until another group item is seen (or the end of the
-array) is put into the optgroup defined by the group item.
-
-Labels and group names should be strings, but values can be any type.
-
-## Example
-```svelte
-<script>
-    import { Select } from "@axel669/zephyr"
-
-    // Results in:
-    // <option>first</option>
-    // <optgroup label="Not Numbers">
-    //     <option>second</option>
-    //     <option>third</option>
-    // </optgroup>
-    const options = [
-        { label: "first", value: 1 },
-        { group: "Not numbers" },
-        { label: "second", value: "two" },
-        { label: "third", value: [3] },
-    ]
-</script>
-
-<Select {options} bind:value label="Blep" />
-<Select {options} bind:value color="warning" label="Why" />
-```
+# Select
+
+A wrapper for select elements to make them look nicer.
+
+## Base
+[Windstorm Labeled Control](https://axel669.github.io/lib.windstorm/#components-labeled control)
+using a `<select>`
+
+## Props
+All [windstorm functions](https://axel669.github.io/lib.windstorm/#css-shorthands)
+are supported.
+
+### color
+`string`
+
+Sets `$color`
+
+### label
+`string`
+
+The text to display as the label
+
+### options
+`Array[Object]`
+
+An array of options and groups to show in the select. Details below
+
+### outline `bool`
+
+Sets `$outline`
+### value
+`any`
+
+The value currently selected. Can be bound to react to selections or
+change the current selection.
+
+## Options
+Each object in the options provided should be in one of 2 forms:
+- `{ label, value }`
+- `{ group }`
+
+Items with a label and value are displayed as <option> tags in the select.
+Items with a group defined are used to denote <optgroup> tags. Each option
+after a `{ group }` item until another group item is seen (or the end of the
+array) is put into the optgroup defined by the group item.
+
+Labels and group names should be strings, but values can be any type.
+
+## Example
+```svelte
+<script>
+    import { Select } from "@axel669/zephyr"
+
+    // Results in:
+    // <option>first</option>
+    // <optgroup label="Not Numbers">
+    //     <option>second</option>
+    //     <option>third</option>
+    // </optgroup>
+    const options = [
+        { label: "first", value: 1 },
+        { group: "Not numbers" },
+        { label: "second", value: "two" },
+        { label: "third", value: [3] },
+    ]
+</script>
+
+<Select {options} bind:value label="Blep" />
+<Select {options} bind:value color="warning" label="Why" />
+```

package/src/control/select.svelte

@@ -1,64 +1,64 @@
-<svelte:options immutable />
-
-<script context="module">
-    const groupOptions = (options) => options.reduce(
-        ({grouped, target = grouped}, item, pos) => {
-            const opt = { ... item, pos }
-            if (item.group === undefined) {
-                target.push(opt)
-                return { grouped, target }
-            }
-            const next = [opt]
-            grouped.push(next)
-            return { grouped, target: next }
-        },
-        { grouped: [] }
-    ).grouped
-</script>
-
-<script>
-    import wsx from "../wsx.mjs"
-
-    export let options = []
-    export let value
-    export let color = "default"
-    export let outline = false
-    export let label = null
-    export let disabled = false
-
-    const update = (evt) => value = options[evt.target.value].value
-
-    $: indexValue = options.findIndex(item => item.value === value)
-
-    $: grouped = groupOptions(options)
-
-    $: wind = {
-        "$control": true,
-        "$outline": outline,
-        "$color": color,
-        ...$$restProps,
-    }
-</script>
-
-<label use:wsx={wind}>
-    {#if label}
-        <span ws-x="$text">{label}</span>
-    {/if}
-    <select value={indexValue} on:input={update} {disabled}>
-        {#each grouped as item, index}
-            {#if Array.isArray(item) === false}
-                <option value={item.pos}>
-                    {item.label}
-                </option>
-            {:else}
-                <optgroup label={item[0].group}>
-                    {#each item.slice(1) as subitem, subindex}
-                        <option value={subitem.pos}>
-                            {subitem.label}
-                        </option>
-                    {/each}
-                </optgroup>
-            {/if}
-        {/each}
-    </select>
-</label>
+<svelte:options immutable />
+
+<script context="module">
+    const groupOptions = (options) => options.reduce(
+        ({grouped, target = grouped}, item, pos) => {
+            const opt = { ... item, pos }
+            if (item.group === undefined) {
+                target.push(opt)
+                return { grouped, target }
+            }
+            const next = [opt]
+            grouped.push(next)
+            return { grouped, target: next }
+        },
+        { grouped: [] }
+    ).grouped
+</script>
+
+<script>
+    import wsx from "../wsx.mjs"
+
+    export let options = []
+    export let value
+    export let color = "default"
+    export let outline = false
+    export let label = null
+    export let disabled = false
+
+    const update = (evt) => value = options[evt.target.value].value
+
+    $: indexValue = options.findIndex(item => item.value === value)
+
+    $: grouped = groupOptions(options)
+
+    $: wind = {
+        "@control": true,
+        "$outline": outline,
+        "$color": color,
+        ...$$restProps,
+    }
+</script>
+
+<label use:wsx={wind}>
+    {#if label}
+        <span ws-x="[$label-text]">{label}</span>
+    {/if}
+    <select value={indexValue} on:input={update} {disabled}>
+        {#each grouped as item, index}
+            {#if Array.isArray(item) === false}
+                <option value={item.pos}>
+                    {item.label}
+                </option>
+            {:else}
+                <optgroup label={item[0].group}>
+                    {#each item.slice(1) as subitem, subindex}
+                        <option value={subitem.pos}>
+                            {subitem.label}
+                        </option>
+                    {/each}
+                </optgroup>
+            {/if}
+        {/each}
+    </select>
+</label>

package/src/control/tabs.md

@@ -1,47 +1,47 @@
-# Tabs
-
-It's tabs, everyone knows what tabs are at this point.
-
-## Props
-
-### color
-`string`
-
-Sets `$color`
-
-### options
-`Array[Object]`
-
-An array of options where each item is `{ label, value }`. `label`
-should be a string, `value` can be of any type.
-
-### vertical
-`bool`
-
-Sets `$vert`
-
-### solid
-`bool`
-
-Sets `$solid`
-
-### value
-`any`
-
-The value of the currently selected tab. Can be bound to react to
-changes and set to control which tab is selected.
-
-## Example
-```svelte
-<script>
-    import { Tabs } from "@axel669/zephyr"
-
-    const options = [
-        { label: "Left", value: "left" },
-        { label: "Right", value: 2 },
-    ]
-</script>
-
-<Tab {options} bind:value color="primary" />
-<Tab {options} bind:value color="secondary" solid vertical />
-```
+# Tabs
+
+It's tabs, everyone knows what tabs are at this point.
+
+## Props
+
+### color
+`string`
+
+Sets `$color`
+
+### options
+`Array[Object]`
+
+An array of options where each item is `{ label, value }`. `label`
+should be a string, `value` can be of any type.
+
+### vertical
+`bool`
+
+Sets `$vert`
+
+### solid
+`bool`
+
+Sets `$solid`
+
+### value
+`any`
+
+The value of the currently selected tab. Can be bound to react to
+changes and set to control which tab is selected.
+
+## Example
+```svelte
+<script>
+    import { Tabs } from "@axel669/zephyr"
+
+    const options = [
+        { label: "Left", value: "left" },
+        { label: "Right", value: 2 },
+    ]
+</script>
+
+<Tab {options} bind:value color="primary" />
+<Tab {options} bind:value color="secondary" solid vertical />
+```

package/src/control/tabs.svelte

@@ -1,41 +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">
-            {tab.label}
-        </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 />
+```