@axel669/zephyr 0.3.4-beta.0 → 0.3.6

package/src/control/link.svelte

@@ -1,32 +1,32 @@
-<svelte:options immutable />
-
-<script>
-    import wsx from "../wsx.mjs"
-    import variant from "../variant.mjs"
-
-    export let button = false
-    export let color = false
-
-    export let href = ""
-    export let rel = "noreferrer"
-    export let target = null
-
-    export let fill = false
-    export let outline = false
-    export let flat = false
-
-    export let disabled = null
-
-    $: type = variant({ fill, outline, flat })
-
-    $: wind = {
-        "@button": button,
-        [type]: true,
-        "$color": color,
-        ...$$restProps
-    }
-</script>
-
-<a {href} {target} {rel} {disabled} use:wsx={wind} on:click>
-    <slot />
-</a>
+<svelte:options immutable />
+
+<script>
+    import wsx from "../wsx.mjs"
+    import variant from "../variant.mjs"
+
+    export let button = false
+    export let color = false
+
+    export let href = ""
+    export let rel = "noreferrer"
+    export let target = null
+
+    export let fill = false
+    export let outline = false
+    export let flat = false
+
+    export let disabled = null
+
+    $: type = variant({ fill, outline, flat })
+
+    $: wind = {
+        "@button": button,
+        [type]: true,
+        "$color": color,
+        ...$$restProps
+    }
+</script>
+
+<a {href} {target} {rel} disabled={disabled || null} use:wsx={wind} on:click>
+    <slot />
+</a>

package/src/control/radio.md

@@ -1,58 +1,58 @@
-# Radio
-
-The radio component displays a list of radio options and provides an
-interface to control which one is selected and react to changes in the
-selected value. It also uses a layout component to decide how the options
-are presented.
-
-## Base
-Each radio item rendered is a
-[Windstorm Labeled Toggle](https://windstorm.axel669.net/lib/css/component/toggle)
-that uses a radio input.
-
-## Props
-
-The wind functions passed as props to the Radio component are passed directly to
-the layout specified because the Radio does not have a container element of its
-own.
-
-### layout
-`Component`
-
-The component to use for layout out the options. Default is
-[Flex](../layout/flex.md).
-
-### options
-`Array[Object]`
-
-An array of objects that defines the options to show. Details below.
-
-### value
-`any`
-
-The value currently selected. Can be bound to react to selections or change the
-current selection.
-
-## Options
-Each object in the options array supplied should have a `value` and `label`
-prop specified. Additionally, any wind functions that should be applied to
-the option can be passed as additional props.
-
-Labels should be strings, but values can be any type as long as they are
-unique in the list.
-
-## Example
-```svelte
-<script>
-    import { Radio, Grid } from "@axel669/zephyr"
-
-    const options = [
-        { label: "first", value: 1 },
-        { label: "second", value: [] },
-        { label: "third", value: "3", "$color": "warning" }
-    ]
-</script>
-
-<Radio {options} bind:value />
-<Radio {options} bind:value={other} layout={Grid} gr.cols="1fr 1fr" />
-```
+# Radio
+
+The radio component displays a list of radio options and provides an
+interface to control which one is selected and react to changes in the
+selected value. It also uses a layout component to decide how the options
+are presented.
+
+## Base
+Each radio item rendered is a
+[Windstorm Labeled Toggle](https://windstorm.axel669.net/lib/css/component/toggle)
+that uses a radio input.
+
+## Props
+
+The wind functions passed as props to the Radio component are passed directly to
+the layout specified because the Radio does not have a container element of its
+own.
+
+### layout
+`Component`
+
+The component to use for layout out the options. Default is
+[Flex](../layout/flex.md).
+
+### options
+`Array[Object]`
+
+An array of objects that defines the options to show. Details below.
+
+### value
+`any`
+
+The value currently selected. Can be bound to react to selections or change the
+current selection.
+
+## Options
+Each object in the options array supplied should have a `value` and `label`
+prop specified. Additionally, any wind functions that should be applied to
+the option can be passed as additional props.
+
+Labels should be strings, but values can be any type as long as they are
+unique in the list.
+
+## Example
+```svelte
+<script>
+    import { Radio, Grid } from "@axel669/zephyr"
+
+    const options = [
+        { label: "first", value: 1 },
+        { label: "second", value: [] },
+        { label: "third", value: "3", "$color": "warning" }
+    ]
+</script>
+
+<Radio {options} bind:value />
+<Radio {options} bind:value={other} layout={Grid} gr.cols="1fr 1fr" />
+```

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="[$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>
+<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 />
+```