@axel669/zephyr 0.2.0-beta.3 → 0.3.6

package/src/composed/entry-button.svelte

@@ -1,31 +1,31 @@
-<svelte:options immutable />
-
-<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} />
+<svelte:options immutable />
+
+<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

@@ -1,13 +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])
-    }
-}
+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,56 +1,56 @@
-<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>
+<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

@@ -1,36 +1,45 @@
-# 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.
-
-## Example
-```js
-let toast = null
-const notify = () => toast.show(5000, { message: "hi" })
-```
-```svelte
-<Toast bind:this={toast} position="bc" />
-```
+# Toast
+Displays toast notifications along the edge of the screen. Unlike the Toaster
+component, this has functions for interacting with and generating toast
+messages, where the Toaster component has the programmer manage the content.
+
+## 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.
+
+### position
+The position to show modals in. Uses the same positions as the Windstorm
+toaster.
+
+## 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
+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.
+
+## Example
+```svelte
+<script>
+    let toast = null
+    const notify = () => toast.show(5000, { message: "hi" })
+</script>
+
+<Toast bind:this={toast} position="bc" />
+```

package/src/composed/toast.svelte

@@ -1,70 +1,70 @@
-<svelte:options immutable />
-
-<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>
+<svelte:options immutable />
+
+<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

@@ -1,41 +1,41 @@
-# 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
-<script>
-    import { Button } from "@axel669/zephyr"
-</script>
-
-<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>
-```
+# 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
+<script>
+    import { Button } from "@axel669/zephyr"
+</script>
+
+<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

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

@@ -0,0 +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}
+/>
+```