@axel669/zephyr 0.1.17 → 0.2.0-beta.1

package/src/composed/toast.svelte

@@ -1,108 +1,68 @@
-<script context="module">
-    const genID = () => `${Date.now()}:${Math.random().toString(16)}`
-
-    const delays = {}
-    const delay = ({time, action, id}) => {
-        const trigger = () => {
-            const info = delays[id]
-            clearTimeout(info.id)
-            action()
-            delete delays[id]
-        }
-        const timeoutID = setTimeout(trigger, time)
-        delays[id] = { trigger, id: timeoutID }
-    }
-    delay.trigger = (id) => delays[id].trigger()
-</script>
-
-<script>
-    /*md
-    [@] Components/Toast
-
-    # Toast
-
-    Displays toast notifications along the edge of the screen.
-
-    ## Props
-    See the Toaster component. The Toast component is wrapper around it that
-    also controls the children being shown for convenience.
-
-    - ### component
-        The component to use as a wrapper for the messages. Defaults to the
-        ToastMessage component.
-
-    ## Functions
-    - ### show(duration, props)
-        Shows a toast notification that will disappear after the specified
-        duration (time in milliseconds). The props provided are passed to an
-        instance of the component specified in the props.
-
-    ## Events
-    - ### action(info)
-        Fired when a toast message is clicked. The info argument contains a
-        value property that is provided by the message component, and a copy
-        of the props passed to that instace.\\
-        For the default messages, the value will be `null` if no button was
-        clicked, and `true` if the action button was clicked. This allows
-        actions to be taken against interactions in the message without having
-        to bind all kinds of events or callbacks.
-
-    ## Usage
-    ```js
-    let toast = null
-    const notify = () => toast.show(5000, { message: "hi" })
-    ```
-    ```svelte
-    <Toast bind:this={toast} position="bc" />
-    ```
-    */
-    import { createEventDispatcher } from "svelte"
-    import { fade } from "svelte/transition"
-
-    import { eventHandler$ } from "../handler$.mjs"
-
-    import Toaster from "../toaster.svelte"
-
-    import ToastMessage from "./toast/message.svelte"
-
-    export let component = ToastMessage
-    export let position = "tc"
-
-    let items = []
-
-    const dispatch = createEventDispatcher()
-    const act = eventHandler$(
-        (evt, id, props) => {
-            delay.trigger(id)
-            dispatch(
-                "action",
-                { value: evt.detail, props }
-            )
-        }
-    )
-
-    export const show = (duration, props) => {
-        const id = genID()
-        items = [...items, { id, props }]
-        delay({
-            action: () => items = items.filter(
-                item => item.id !== id
-            ),
-            time: duration,
-            id,
-        })
-    }
-    export const clear = () => items = []
-</script>
-
-<Toaster {position} {...$$restProps}>
-    {#each items as {props, id} (id)}
-        <wsv-toast-wrapper ws-x="grid" transition:fade={{duration: 200}}>
-            <svelte:component
-            this={component}
-            {...props}
-            on:action={act(id, props)}
-            />
-        </wsv-toast-wrapper>
-    {/each}
-</Toaster>
+<script context="module">
+    const genID = () => `${Date.now()}:${Math.random().toString(16)}`
+
+    const delays = {}
+    const delay = ({time, action, id}) => {
+        const trigger = () => {
+            const info = delays[id]
+            clearTimeout(info.id)
+            action()
+            delete delays[id]
+        }
+        const timeoutID = setTimeout(trigger, time)
+        delays[id] = { trigger, id: timeoutID }
+    }
+    delay.trigger = (id) => delays[id].trigger()
+</script>
+
+<script>
+    import { createEventDispatcher } from "svelte"
+    import { fade } from "svelte/transition"
+
+    import { eventHandler$ } from "../handler$.mjs"
+
+    import Toaster from "../info/toaster.svelte"
+
+    import ToastMessage from "./toast/message.svelte"
+
+    export let component = ToastMessage
+    export let position = "tc"
+
+    let items = []
+
+    const dispatch = createEventDispatcher()
+    const act = eventHandler$(
+        (evt, id, props) => {
+            delay.trigger(id)
+            dispatch(
+                "action",
+                { value: evt.detail, props }
+            )
+        }
+    )
+
+    export const show = (duration, props) => {
+        const id = genID()
+        items = [...items, { id, props }]
+        delay({
+            action: () => items = items.filter(
+                item => item.id !== id
+            ),
+            time: duration,
+            id,
+        })
+    }
+    export const clear = () => items = []
+</script>
+
+<Toaster {position} {...$$restProps}>
+    {#each items as {props, id} (id)}
+        <zephyr-toast-wrapper ws-x="grid" transition:fade={{duration: 200}}>
+            <svelte:component
+            this={component}
+            {...props}
+            on:action={act(id, props)}
+            />
+        </zephyr-toast-wrapper>
+    {/each}
+</Toaster>

package/src/control/button.md

@@ -0,0 +1,37 @@
+# Button
+
+Basic clickable component for handling user interaction.
+
+## Props
+
+### color
+`string`
+
+Sets `$color`
+
+### compact
+`bool`
+
+Sets `$compact`
+
+### fill / outline
+`bool`
+
+Sets the button type to `$fill` if fill is true, `$outline` if outline
+is true, or `$flat` if neither is true.
+
+## Events
+- click
+
+## Example
+```svelte
+<Button on:click={action}>
+    Flat Button
+</Button>
+<Button on:click={action} outline>
+    Outlined Button
+</Button>
+<Button on:click={action} fill color="danger">
+    Filled Button
+</Button>
+```

package/src/control/button.svelte

@@ -0,0 +1,25 @@
+<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
+
+    $: type = variant({ fill, outline, flat })
+
+    $: wind = {
+        [type]: true,
+        "$color": color,
+        $compact: compact,
+        ...$$restProps
+    }
+</script>
+
+<button use:wsx={wind} {disabled} on:click|stopPropagation>
+    <slot />
+</button>

package/src/control/input.svelte

@@ -0,0 +1,107 @@
+<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>

package/src/control/label.md

@@ -0,0 +1,45 @@
+# 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
+<Label for="checkbox">Toggle Checkbox</Label>
+<Label for="checkbox" button color="primary" fill>
+    Open Menu
+</Label>
+```

package/src/control/label.svelte

@@ -0,0 +1,36 @@
+<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

@@ -0,0 +1,46 @@
+# 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
+<Link color="primary" href="test" target="_blank">
+    Test
+</Link>
+<Link color="primary" href="logout" button outline>
+    Logout
+</Link>
+```

package/src/control/link.svelte

@@ -0,0 +1,28 @@
+<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>

package/src/control/radio.md

@@ -0,0 +1,56 @@
+# 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>
+    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-col="1fr 1fr" />
+```

package/src/control/radio.svelte

@@ -0,0 +1,26 @@
+<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

@@ -0,0 +1,68 @@
+# 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>
+    // 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" />
+```