@axel669/zephyr 0.2.0-beta.3 → 0.3.6

package/src/control/input.svelte

@@ -1,109 +1,109 @@
-<svelte:options immutable />
-
-<script context="module">
-    const parseNumeric = (value) => {
-        if (value === "") {
-            return null
-        }
-        return parseFloat(value)
-    }
-
-    const diff = (type, value, internal) => {
-        if ((type !== "number" && type !== "range") || typeof value === "string") {
-            return value !== internal
-        }
-        return parseFloat(internal) !== value
-    }
-</script>
-
-<script>
-    import wsx from "../wsx.mjs"
-
-    export let type = "text"
-
-    export let flat = false
-    export let label
-    export let color = "default"
-    export let error = null
-    export let hint = null
-    export let disabled
-
-    export let value = ""
-    export let autocompleteOptions = null
-
-    export let transform = i => i
-    export let tvalue
-    export let validate = () => true
-    export let valid
-
-    let input = null
-    let internalValue = value
-    export const focus = () => input.focus()
-
-    const id =
-        (autocompleteOptions === null)
-        ? null
-        : `${Math.random().toString(16)}_${Date.now()}`
-
-    $: isNumeric = (type === "number" || type === "range")
-    $: if (diff(type, value, internalValue) === true) {
-        internalValue = value
-    }
-
-    const update = (evt) => {
-        internalValue = evt.target.value
-        value = (isNumeric === true) ? parseNumeric(internalValue) : internalValue
-        tvalue = transform(value)
-        valid = validate(tvalue)
-    }
-
-    $: restKeys = Object.keys($$restProps)
-    $: props = restKeys.reduce(
-        (props, key) => {
-            const [target, name] =
-                (key.startsWith("i-") === true)
-                ? [props.input, key.slice(2)]
-                : [props.wind, key]
-            target[name] = $$restProps[key]
-            return props
-        },
-        {wind: {}, input: {}}
-    )
-
-    $: wind = {
-        "$flat": flat,
-        "$control": true,
-        "$color": color,
-        ...props.wind,
-    }
-
-    $: tag = (type === "area") ? "textarea" : "input"
-</script>
-
-<label use:wsx={wind} ws-error={error}>
-    {#if label}
-        <span ws-x="$text" ws-hint={hint}>{label}</span>
-    {/if}
-    <svelte:element
-        this={tag}
-        {...props.input}
-        {disabled}
-        {type}
-        value={internalValue}
-        list={id}
-        on:focus
-        on:blur
-        on:input={update}
-        bind:this={input}
-    />
-
-    <slot name="start" />
-    <slot name="end" />
-    {#if autocompleteOptions !== null}
-        <datalist {id}>
-            {#each autocompleteOptions as value}
-                <option {value} />
-            {/each}
-        </datalist>
-    {/if}
-</label>
+<svelte:options immutable />
+
+<script context="module">
+    const parseNumeric = (value) => {
+        if (value === "") {
+            return null
+        }
+        return parseFloat(value)
+    }
+
+    const diff = (type, value, internal) => {
+        if ((type !== "number" && type !== "range") || typeof value === "string") {
+            return value !== internal
+        }
+        return parseFloat(internal) !== value
+    }
+</script>
+
+<script>
+    import wsx from "../wsx.mjs"
+
+    export let type = "text"
+
+    export let flat = false
+    export let label
+    export let color = "@default"
+    export let error = null
+    export let hint = null
+    export let disabled
+
+    export let value = ""
+    export let autocompleteOptions = null
+
+    export let transform = i => i
+    export let tvalue
+    export let validate = () => true
+    export let valid
+
+    let input = null
+    let internalValue = value
+    export const focus = () => input.focus()
+
+    const id =
+        (autocompleteOptions === null)
+        ? null
+        : `${Math.random().toString(16)}_${Date.now()}`
+
+    $: isNumeric = (type === "number" || type === "range")
+    $: if (diff(type, value, internalValue) === true) {
+        internalValue = value
+    }
+
+    const update = (evt) => {
+        internalValue = evt.target.value
+        value = (isNumeric === true) ? parseNumeric(internalValue) : internalValue
+        tvalue = transform(value)
+        valid = validate(tvalue)
+    }
+
+    $: restKeys = Object.keys($$restProps)
+    $: props = restKeys.reduce(
+        (props, key) => {
+            const [target, name] =
+                (key.startsWith("i-") === true)
+                ? [props.input, key.slice(2)]
+                : [props.wind, key]
+            target[name] = $$restProps[key]
+            return props
+        },
+        {wind: {}, input: {}}
+    )
+
+    $: wind = {
+        "$flat": flat,
+        "@control": true,
+        "$color": color,
+        ...props.wind,
+    }
+
+    $: tag = (type === "area") ? "textarea" : "input"
+</script>
+
+<label use:wsx={wind} ws-error={error}>
+    {#if label}
+        <span use:wsx={{ slot: "label-text" }} ws-hint={hint}>{label}</span>
+    {/if}
+    <svelte:element
+        this={tag}
+        {...props.input}
+        {disabled}
+        {type}
+        value={internalValue}
+        list={id}
+        on:focus
+        on:blur
+        on:input={update}
+        bind:this={input}
+    />
+
+    <slot name="start" />
+    <slot name="end" />
+    {#if autocompleteOptions !== null}
+        <datalist {id}>
+            {#each autocompleteOptions as value}
+                <option {value} />
+            {/each}
+        </datalist>
+    {/if}
+</label>

package/src/control/label.md

@@ -1,49 +1,48 @@
-# Label
-
-The label component is a wrapper around a `<label>` element.
-
-## Props
-
-### button
-`bool`
-
-If true, the label will have the button appearance.
-
-### color
-`string`
-
-Sets `$color`
-
-### compact
-`bool`
-
-If true, will make the label button be more compact. No effect is `button` is
-`false`.
-
-### disabled
-`bool`
-
-Disables the label.
-
-### fill / outline / flat
-`bool`
-
-Sets the button variant of the label when `button` is `true`.
-
-### for
-`string`
-
-[Label for attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label#for)
-
-## Example
-
-```svelte
-<script>
-    import { Label } from "@axel669/zephyr"
-</script>
-
-<Label for="checkbox">Toggle Checkbox</Label>
-<Label for="checkbox" button color="primary" fill>
-    Open Menu
-</Label>
-```
+# Label
+The label component is a wrapper around a `<label>` element.
+
+## Props
+
+### button
+`bool`
+
+If true, the label will have the button appearance.
+
+### color
+`string`
+
+Sets `$color`
+
+### compact
+`bool`
+
+If true, will make the label button be more compact. No effect is `button` is
+`false`.
+
+### disabled
+`bool`
+
+Disables the label.
+
+### fill / outline / flat
+`bool`
+
+Sets the button variant of the label when `button` is `true`.
+
+### for
+`string`
+
+[Label for attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label#for)
+
+## Example
+
+```svelte
+<script>
+    import { Label } from "@axel669/zephyr"
+</script>
+
+<Label for="checkbox">Toggle Checkbox</Label>
+<Label for="checkbox" button color="primary" fill>
+    Open Menu
+</Label>
+```

package/src/control/label.svelte

@@ -1,38 +1,38 @@
-<svelte:options immutable />
-
-<script>
-    import wsx from "../wsx.mjs"
-    import variant from "../variant.mjs"
-
-    export let color = false
-    export let compact = false
-    export let disabled
-
-    export let fill = false
-    export let outline = false
-    export let flat = false
-
-    let _for = ""
-    export { _for as for }
-    export let button = false
-
-    $: type = variant({ fill, outline, flat })
-    $: baseStyles =
-        (button === true)
-        ? {
-            $button: true,
-            [type]: true,
-            "$color": color,
-            $compact: compact,
-        }
-        : {}
-
-    $: wind = {
-        ...baseStyles,
-        ...$$restProps
-    }
-</script>
-
-<label use:wsx={wind} {disabled} for={_for}>
-    <slot />
-</label>
+<svelte:options immutable />
+
+<script>
+    import wsx from "../wsx.mjs"
+    import variant from "../variant.mjs"
+
+    export let color = false
+    export let compact = false
+    export let disabled
+
+    export let fill = false
+    export let outline = false
+    export let flat = false
+
+    let _for = ""
+    export { _for as for }
+    export let button = false
+
+    $: type = variant({ fill, outline, flat })
+    $: baseStyles =
+        (button === true)
+        ? {
+            "@button": true,
+            [type]: true,
+            "$color": color,
+            $compact: compact,
+        }
+        : {}
+
+    $: wind = {
+        ...baseStyles,
+        ...$$restProps
+    }
+</script>
+
+<label use:wsx={wind} {disabled} for={_for}>
+    <slot />
+</label>

package/src/control/link.md

@@ -1,50 +1,50 @@
-# Link
-
-Themed and customizale `<a>` tag component.
-
-## Props
-
-### button `string`
-
-If true, the link will be styled like a button
-
-### color
-`string`
-
-Sets the color of the button. Applies to both regular links and button
-style links.
-
-### href
-`string`
-
-Sets the href attribute.
-
-### rel
-`string`
-
-Sets the rel attribute.
-
-### target
-`string`
-
-Sets the target attribute.
-
-### fill / outline / flat
-`bool`
-
-Sets the link-button type to `$fill` if fill is true, `$outline` if outline
-is true, or `$flat` if neither is true.
-
-## Example
-```svelte
-<script>
-    import { Link } from "@axel669/zephyr"
-</script>
-
-<Link color="primary" href="test" target="_blank">
-    Test
-</Link>
-<Link color="primary" href="logout" button outline>
-    Logout
-</Link>
-```
+# Link
+
+Themed and customizale `<a>` tag component.
+
+## Props
+
+### button `string`
+
+If true, the link will be styled like a button
+
+### color
+`string`
+
+Sets the color of the button. Applies to both regular links and button
+style links.
+
+### href
+`string`
+
+Sets the href attribute.
+
+### rel
+`string`
+
+Sets the rel attribute.
+
+### target
+`string`
+
+Sets the target attribute.
+
+### fill / outline / flat
+`bool`
+
+Sets the link-button type to `$fill` if fill is true, `$outline` if outline
+is true, or `$flat` if neither is true.
+
+## Example
+```svelte
+<script>
+    import { Link } from "@axel669/zephyr"
+</script>
+
+<Link color="primary" href="test" target="_blank">
+    Test
+</Link>
+<Link color="primary" href="logout" button outline>
+    Logout
+</Link>
+```

package/src/control/link.svelte

@@ -1,30 +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
-
-    $: type = variant({ fill, outline, flat })
-
-    $: wind = {
-        "$button": button,
-        [type]: true,
-        "$color": color,
-        ...$$restProps
-    }
-</script>
-
-<a {href} {target} {rel} use:wsx={wind}>
-    <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" />
+```