@axel669/zephyr 0.3.4-beta.0 → 0.3.8

package/src/control/input.md

@@ -1,87 +1,87 @@
-# Input
-A component that wraps the text-based input tags. Includes optional outline,
-label, hint text, error showing, input validation, input transformation, and
-browser level autocomplete.
-
-## Props
-
-### autoCompleteOptions
-An array of options to show for auto complete. Uses the browser `datalist`
-element to create the auto complete.
-
-### color
-Sets the $color macro.
-
-### disabled
-Disables the input.
-
-### error
-If set, shows an error message under the input.
-
-### flat
-If true, the input will not have a border. Default is false (with a border).
-
-### hint
-Shows a hint under the label of the input.
-
-### type
-The type of input. Default to "text".
-
-### value
-The value of the input. Can be bound the same way a normal text input value is
-bound in Svelte.
-
-### transform
-A function to transform the value of the input automatically. Results are put
-into the tvalue prop.
-
-### tvalue
-The transformed value of the input. Binding should only be used to react to
-the value as it will be overriden while a user is typing into the input.
-
-### validate
-A function to determine if the value of the input is valid. Results are put into
-the `valid` prop. If a transform function is provided, the transformed value
-is given to the validation function.
-
-### valid
-The result of the validation function. Binding should only be used to react to
-the value.
-
-## Instance Functions
-
-### focus
-Focuses the input.
-
-## Slots
-
-### end
-Puts an element at the end of the input.
-
-### start
-Puts an element at the start of the input.
-
-## Example
-
-```svelte
-<script>
-    import { Input } from "@axel669/zephyr"
-
-    let name = ""
-    let ageText = ""
-    let age = 0
-    let ageValid = false
-
-    $: ageError = ageValid ? "Invalid Age" : null
-</script>
-
-<Input bind:value={name} label="Name" />
-<Input
-    bind:value={ageText}
-    transform={v => parseInt(v)}
-    bind:tvalue={age}
-    validate={age => age > 0}
-    bind:valid={ageValid}
-    error={ageError}
-/>
-```
+# Input
+A component that wraps the text-based input tags. Includes optional outline,
+label, hint text, error showing, input validation, input transformation, and
+browser level autocomplete.
+
+## Props
+
+### autoCompleteOptions
+An array of options to show for auto complete. Uses the browser `datalist`
+element to create the auto complete.
+
+### color
+Sets the $color macro.
+
+### disabled
+Disables the input.
+
+### error
+If set, shows an error message under the input.
+
+### flat
+If true, the input will not have a border. Default is false (with a border).
+
+### hint
+Shows a hint under the label of the input.
+
+### type
+The type of input. Default to "text".
+
+### value
+The value of the input. Can be bound the same way a normal text input value is
+bound in Svelte.
+
+### transform
+A function to transform the value of the input automatically. Results are put
+into the tvalue prop.
+
+### tvalue
+The transformed value of the input. Binding should only be used to react to
+the value as it will be overriden while a user is typing into the input.
+
+### validate
+A function to determine if the value of the input is valid. Results are put into
+the `valid` prop. If a transform function is provided, the transformed value
+is given to the validation function.
+
+### valid
+The result of the validation function. Binding should only be used to react to
+the value.
+
+## Instance Functions
+
+### focus
+Focuses the input.
+
+## Slots
+
+### end
+Puts an element at the end of the input.
+
+### start
+Puts an element at the start of the input.
+
+## Example
+
+```svelte
+<script>
+    import { Input } from "@axel669/zephyr"
+
+    let name = ""
+    let ageText = ""
+    let age = 0
+    let ageValid = false
+
+    $: ageError = ageValid ? "Invalid Age" : null
+</script>
+
+<Input bind:value={name} label="Name" />
+<Input
+    bind:value={ageText}
+    transform={v => parseInt(v)}
+    bind:tvalue={age}
+    validate={age => age > 0}
+    bind:valid={ageValid}
+    error={ageError}
+/>
+```

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 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>
+<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,48 +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>
+```