@axel669/zephyr 0.1.16 → 0.2.0-beta.0

package/src/composed/entry-button.md

@@ -0,0 +1,34 @@
+# EntryButton
+
+The EntryButton is a convenient way to display modals and screens over
+content without needing to bind variables have lots of Modal elements in
+addition to the buttons that show them.
+
+## Props
+
+- ### component
+    The component to show when clicked
+- ### props
+    The props to pass to the component when it is shown, or a function that
+    generates the props when called
+- ### this
+    The wrapper for the component. Default is Modal but any component that
+    has the same interface as Modal will work
+
+## Events
+- ### entry
+    When the component is close the entry event is fired. The detail
+    property of the event will have the value from closing it
+
+## Usage
+```svelte
+<EntryButton component={Subscreen} on:entry={console.log}>
+    Open Subscreen
+</EntryButton>
+<EntryButton component={CoolDialog} on:entry={console.log}>
+    Open Subscreen
+</EntryButton>
+<EntryButton this={CoolModal} component={CustomThing} on:entry={console.log}>
+    Open Subscreen
+</EntryButton>
+```

package/src/composed/entry-button.svelte

@@ -1,68 +1,29 @@
-<script>
-    /*md
-    [@] Components/EntryButton
-
-    # EntryButton
-
-    The EntryButton is a convenient way to display modals and screens over
-    content without needing to bind variables have lots of Modal elements in
-    addition to the buttons that show them.
-
-    ## Props
-
-    - ### component
-        The component to show when clicked
-    - ### props
-        The props to pass to the component when it is shown, or a function that
-        generates the props when called
-    - ### this
-        The wrapper for the component. Default is Modal but any component that
-        has the same interface as Modal will work
-
-    ## Events
-    - ### entry
-        When the component is close the entry event is fired. The detail
-        property of the event will have the value from closing it
-
-    ## Usage
-    ```svelte
-    <EntryButton component={Subscreen} on:entry={console.log}>
-        Open Subscreen
-    </EntryButton>
-    <EntryButton component={CoolDialog} on:entry={console.log}>
-        Open Subscreen
-    </EntryButton>
-    <EntryButton this={CoolModal} component={CustomThing} on:entry={console.log}>
-        Open Subscreen
-    </EntryButton>
-    ```
-    */
-
-    import { createEventDispatcher } from "svelte"
-
-    import Button from "../button.svelte"
-    import Modal from "../modal.svelte"
-    import { handler$ } from "../handler$.mjs"
-
-    export let component
-    export let props
-    let wrapper = Modal
-    export { wrapper as this }
-
-    const send = createEventDispatcher()
-
-    let element = null
-    const open = handler$(
-        async (props) => {
-            const elemProps = (typeof props === "function") ? props() : props
-            const result = await element.show(elemProps)
-            send("entry", result)
-        }
-    )
-</script>
-
-<Button {...$$restProps} on:click={open(props)}>
-    <slot />
-</Button>
-
-<svelte:component this={wrapper} {component} bind:this={element} />
+<script>
+    import { createEventDispatcher } from "svelte"
+
+    import Button from "../control/button.svelte"
+    import Modal from "../layout/modal.svelte"
+    import { handler$ } from "../handler$.mjs"
+
+    export let component
+    export let props
+    let wrapper = Modal
+    export { wrapper as this }
+
+    const send = createEventDispatcher()
+
+    let element = null
+    const open = handler$(
+        async (props) => {
+            const elemProps = (typeof props === "function") ? props() : props
+            const result = await element.show(elemProps)
+            send("entry", result)
+        }
+    )
+</script>
+
+<Button {...$$restProps} on:click={open(props)}>
+    <slot />
+</Button>
+
+<svelte:component this={wrapper} {component} bind:this={element} />

package/src/composed/table-functions.js

@@ -0,0 +1,13 @@
+export const filters = {
+    text: (propName) =>
+        (row, text) =>
+            row[propName]
+                .toLowerCase()
+                .includes(text.toLowerCase())
+}
+export const sorts = {
+    natural: (propName) => {
+        const comparitor = new Intl.Collator(undefined, { numeric: true })
+        return (a, b) => comparitor.compare(a[propName], b[propName])
+    }
+}

package/src/composed/toast/message.svelte

@@ -1,44 +1,44 @@
-<script>
-    /*md
-    [@] Components/ToastMessage
-
-    # ToastMessage
-
-    The default component for Toast to show messages with
-
-    ## Props
-    - ### actionText `string`
-        If given, the message will have a button that can be clicked and will
-        use this text for the button text
-    - ### color `string`
-        Sets `$color`
-    - ### icon `string`
-        An icon to show with the message
-    - ### message `string`
-        The message to show
-    */
-
-    import { createEventDispatcher } from "svelte"
-
-    import Button from "../../button.svelte"
-    import Icon from "../../icon.svelte"
-    import Notification from "../../notification.svelte"
-
-    export let message = ""
-    export let icon = ""
-    export let color = false
-    export let actionText = null
-
-    const dispatch = createEventDispatcher()
-    const dismiss = () => dispatch("action", null)
-    const respond = () => dispatch("action", true)
-</script>
-
-<Notification {color} on:click={dismiss}>
-    <Icon name={icon}>{message}</Icon>
-    {#if actionText}
-        <Button {color} variant="fill" on:click={respond}>
-            {actionText}
-        </Button>
-    {/if}
-</Notification>
+<script>
+    /*md
+    [@] Components/ToastMessage
+
+    # ToastMessage
+
+    The default component for Toast to show messages with
+
+    ## Props
+    - ### actionText `string`
+        If given, the message will have a button that can be clicked and will
+        use this text for the button text
+    - ### color `string`
+        Sets `$color`
+    - ### icon `string`
+        An icon to show with the message
+    - ### message `string`
+        The message to show
+    */
+
+    import { createEventDispatcher } from "svelte"
+
+    import Button from "../../control/button.svelte"
+    import Icon from "../../info/icon.svelte"
+    import Notification from "../../info/notification.svelte"
+
+    export let message = ""
+    export let icon = ""
+    export let color = false
+    export let actionText = null
+
+    const dispatch = createEventDispatcher()
+    const dismiss = () => dispatch("action", null)
+    const respond = () => dispatch("action", true)
+</script>
+
+<Notification {color} on:click={dismiss}>
+    <Icon name={icon}>{message}</Icon>
+    {#if actionText}
+        <Button {color} variant="fill" on:click={respond}>
+            {actionText}
+        </Button>
+    {/if}
+</Notification>

package/src/composed/toast.md

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

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.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>