@axel669/zephyr 0.1.17 → 0.2.0-beta.1

package/src/select.svelte

@@ -1,122 +0,0 @@
-<script context="module">
-    const groupOptions = (options) => options.reduce(
-        ({grouped, target = grouped}, item, pos) => {
-            const opt = { ... item, pos }
-            if (item.group === undefined) {
-                target.push(opt)
-                return { grouped, target }
-            }
-            const next = [opt]
-            grouped.push(next)
-            return { grouped, target: next }
-        },
-        { grouped: [] }
-    ).grouped
-</script>
-
-<script>
-    /*md
-    [@] Components/Input/Select
-
-    # 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.
-
-    ## Usage
-    ```js
-    // 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] },
-    ]
-    ```
-    ```svelte
-    <Select {options} bind:value label="Blep" />
-    <Select {options} bind:value color="warning" label="Why" />
-    ```
-    */
-
-    import wsx from "./wsx.mjs"
-
-    export let options = []
-    export let value
-    export let color = "default"
-    export let outline = false
-    export let label = null
-    export let disabled = false
-
-    const update = (evt) => value = options[evt.target.value].value
-
-    $: indexValue = options.findIndex(item => item.value === value)
-
-    $: grouped = groupOptions(options)
-
-    $: wind = {
-        "@control": true,
-        "@outline": outline,
-        $color: color,
-        ...$$restProps,
-    }
-</script>
-
-<label use:wsx={wind}>
-    {#if label}
-        <span ws-x="$text">{label}</span>
-    {/if}
-    <select value={indexValue} on:input={update} {disabled}>
-        {#each grouped as item, index}
-            {#if Array.isArray(item) === false}
-                <option value={item.pos}>
-                    {item.label}
-                </option>
-            {:else}
-                <optgroup label={item[0].group}>
-                    {#each item.slice(1) as subitem, subindex}
-                        <option value={subitem.pos}>
-                            {subitem.label}
-                        </option>
-                    {/each}
-                </optgroup>
-            {/if}
-        {/each}
-    </select>
-</label>

package/src/table.svelte

@@ -1,69 +0,0 @@
-<script>
-    /*md
-    [@] Components/Data Display/Table
-
-    # Table
-
-    Displays data using html tables with some nice styling. This version of the
-    table is fairly simple and intended for basic data displays. For more
-    complex data displays the DataTable should be used.
-
-    ## Base
-    [Windstorm Table](https://axel669.github.io/lib.windstorm/#components-table)
-
-    ## Props
-    All [windstorm functions](https://axel669.github.io/lib.windstorm/#css-shorthands)
-    are supported.
-
-    - ### color `string`
-        Sets `$color`
-    - ### cols `Array`
-        The columns that should be displayed. Should be in the format of
-        `{ label, width? }`
-    - ### data `Array[Array]`
-        The data to display. The data should be an array where each item is a
-        row, and each item in the row is the value for a column.
-    - ### cellWSX `function`
-        If given, this function will be called for each cell, and should return
-        an object that will be passed to the `wsx` action for each <td>
-        generated. The function is passed `(cellValue, rowNum, colNum)`.
-    - ### rowWSX `function`
-        If given, this function will be called for each row, and should return
-        an object that will be passed to the `wsx` action for each <tr>
-        generated. The function is passed `(rowValue, rowNum)`.
-    */
-
-    import wsx from "./wsx.mjs"
-
-    export let color = false
-    export let data = []
-    export let cols = []
-    export let rowWSX = null
-    export let cellWSX = null
-
-    $: wind = {
-        $color: color,
-        ...$$restProps,
-    }
-</script>
-
-<table use:wsx={wind}>
-    <thead>
-        <tr>
-            {#each cols as col}
-                <th use:wsx={{ w: col.width }}>{col.label}</th>
-            {/each}
-        </tr>
-    </thead>
-    <tbody>
-        {#each data as row, rowNum}
-            <tr use:wsx={rowWSX?.(row, rowNum)}>
-                {#each row as cell, colNum}
-                    <td use:wsx={cellWSX?.(cell, rowNum, colNum)}>
-                        {cell}
-                    </td>
-                {/each}
-            </tr>
-        {/each}
-    </tbody>
-</table>

package/src/tabs.svelte

@@ -1,78 +0,0 @@
-<script>
-    /*md
-    [@] Components/Tabs
-
-    # Tabs
-
-    It's tabs, everyone knows what tabs are at this point.
-
-    ## Base
-    [Windstorm Tabs](https://axel669.github.io/lib.windstorm/#components-tabs)
-
-    ## Props
-    All [windstorm functions](https://axel669.github.io/lib.windstorm/#css-shorthands)
-    are supported.
-
-    - ### color `string`
-        Sets `$color`
-    - ### options `Array[Object]`
-        An array of options where each item is `{ label, value }`. `label`
-        should be a string, `value` can be of any type.
-    - ### vertical `bool`
-        Sets `$vert`
-    - ### solid `bool`
-        Sets `$solid`
-    - ### value `any`
-        The value of the currently selected tab. Can be bound to react to
-        changes and set to control which tab is selected.
-
-    ## Usage
-    ```js
-    const options = [
-        { label: "Left", value: "left" },
-        { label: "Right", value: 2 },
-    ]
-    ```
-    ```svelte
-    <Tab {options} bind:value color="primary" />
-    <Tab {options} bind:value color="secondary" solid vertical />
-    ```
-    */
-
-    import wsx from "./wsx.mjs"
-    import { handler$ } from "./handler$.mjs"
-
-    export let color = "primary"
-    export let options = []
-    export let vertical = false
-    export let solid = false
-    export let value
-
-    $: index = options.findIndex(item => item.value === value)
-
-    const set = handler$(
-        (next) => {
-            if (value === next) {
-                return
-            }
-            value = next
-        }
-    )
-
-    $: wind = {
-        "@solid": solid,
-        $color: color,
-        $vert: vertical,
-        ...$$restProps,
-    }
-</script>
-
-<!-- svelte-ignore a11y-click-events-have-key-events -->
-<ws-tabs use:wsx={wind}>
-    {#each options as tab, i}
-        <ws-tab use:wsx={{"$tab-selected": index === i}}
-        on:click={set(tab.value)}>
-            {tab.label}
-        </ws-tab>
-    {/each}
-</ws-tabs>

package/src/titlebar.svelte

@@ -1,69 +0,0 @@
-<script>
-    /*md
-    [@] Components/Titlebar
-
-    # Titlebar
-
-    The titlebar is used to set section titles with some style, and provides
-    slots for buttons on either side of the title text. Works well as a header
-    for Paper components.
-
-    ## Base
-    [Windstorm Titlebar](https://axel669.github.io/lib.windstorm/#components-titlebar)
-
-    ## Props
-    All [windstorm functions](https://axel669.github.io/lib.windstorm/#css-shorthands)
-    are supported.
-
-    - ### color `string`
-        Sets `$color`
-    - ### fill `bool`
-        Sets `@fill`
-
-    ## Slots
-    - title\\
-        The center of the titlebar, where the text usually goes
-    - menu\\
-        The area on the left of the titlebar (where drawer menus tend to open)
-    - action\\
-        The area on the right of the titlebar
-
-    ## Usage
-    ```svelte
-    <Titlebar color="primary" fill>
-        <Text title slot="title">
-            Some Title
-        </Text>
-
-        <Button slot="menu" color={false}>
-            <Icon name="menu" />
-        </Button>
-    </Titlebar>
-
-    <Paper>
-        <Titlebar color="secondary" slot="header">
-            <Text title slot="title">
-                Paper Title
-            </Text>
-        </Titlebar>
-    </Paper>
-    ```
-    */
-
-    import wsx from "./wsx.mjs"
-
-    export let color
-    export let fill = false
-
-    $: wind = {
-        $color: color,
-        "@fill": fill,
-        ...$$restProps
-    }
-</script>
-
-<ws-titlebar use:wsx={wind}>
-    <slot name="menu" />
-    <slot name="title" />
-    <slot name="action" />
-</ws-titlebar>

package/src/toaster.svelte

@@ -1,42 +0,0 @@
-<script>
-    /*md
-    [@] Components/Containers/Toaster
-
-    # Toaster
-
-    The Toaster component is used for building popup notifications along the
-    edges of the window.
-
-    ## Base
-    [Windstorm Toaster](https://axel669.github.io/lib.windstorm/#components-toaster)
-
-    ## Props
-    All [windstorm functions](https://axel669.github.io/lib.windstorm/#css-shorthands)
-    are supported, but probably not very meaningful for this container.
-
-    - ### position
-        Sets position of the toaster. See the windstorm base for values.
-
-    ## Usage
-    <Toaster position="$tc">
-        <Notification>
-            <Icon name="info">
-                Some kind of notification of things
-            </Icon>
-        </Notification>
-    </Toaster>
-    */
-
-    import wsx from "./wsx.mjs"
-
-    export let position = "tc"
-
-    $: wind = {
-        [`$${position}`]: true,
-        ...$$restProps,
-    }
-</script>
-
-<ws-toaster use:wsx={wind}>
-    <slot />
-</ws-toaster>

package/src/toggle.svelte

@@ -1,94 +0,0 @@
-<script>
-    /*md
-    [@] Components/Input/Toggle
-
-    # Toggle
-
-    The Toggle component is used to display checkboxes and switches.
-
-    ## Base
-    [Windstorm Labeled Toggle](https://axel669.github.io/lib.windstorm/#components-labeled-toggle)
-    using a checkbox input
-
-    ## Props
-    All [windstorm functions](https://axel669.github.io/lib.windstorm/#css-shorthands)
-    are supported.
-
-    - ### color `string`
-        Sets `$color`
-    - ### checkbox `bool`
-        If true, the toggle is displayed as a checkbox. Default is false
-        (shown as a switch)
-    - ### checked `bool`
-        Controls if the toggle is checked or not. Can be bound
-    - ### group
-        Used for binding, see the Svelte bind:group for details
-    - ### label `string`
-        The text to use for the label
-    - ### flat `bool`
-        Sets `@flat`
-    - ### reverse `bool`
-        If true, the input being toggled will be on the left instead of the
-        right. Default is false (label is on the left)
-    - ### value
-        Only used in conjunction with bind:group, see Svelte docs
-
-    ## Usage
-    ```svelte
-    <Toggle label="Active" bind:checked />
-    <Toggle label="Active" checkbox bind:checked />
-    <Toggle label="Active" checkbox reverse bind:checked />
-    <Toggle label="Active" checkbox flat color="danger" bind:checked />
-    ```
-    */
-
-    import wsx from "./wsx.mjs"
-
-    export let label = ""
-    export let color = "default"
-    export let checked = false
-    export let flat = false
-    export let value
-    export let group = []
-    export let checkbox = false
-    export let reverse = false
-
-    $: container = {
-        "@toggle": true,
-        "@flat": flat,
-        $color: color,
-        ...$$restProps,
-    }
-    $: input = {
-        "$switch": checkbox === false
-    }
-
-    const updateGroup = (checked) => {
-        if (checked === true) {
-            if (group.includes(value) === true) {
-                return
-            }
-            group = [...group, value]
-            return
-        }
-        if (group.includes(value) === false) {
-            return
-        }
-        group = group.filter(item => item !== value)
-    }
-    $: updateGroup(checked)
-</script>
-
-<label use:wsx={container}>
-    {#if reverse !== true}
-        {#if $$slots.default}
-            <slot />
-        {:else}
-            <span>{label}</span>
-        {/if}
-    {/if}
-    <input type="checkbox" bind:checked use:wsx={input} />
-    {#if reverse === true}
-        <span>{label}</span>
-    {/if}
-</label>

package/src/tooltip.svelte

@@ -1,45 +0,0 @@
-<script>
-    /*md
-    [@] Components/Data Display/Tooltip
-
-    # Tooltip
-
-    Displays a tooltip above (or below) some content when it's hovered.
-
-    ## Base
-    [Windstorm Tooltip](https://axel669.github.io/lib.windstorm/#components-tooltip)
-
-    ## Props
-    All [windstorm functions](https://axel669.github.io/lib.windstorm/#css-shorthands)
-    are supported.
-
-    - ### text `string`
-        The text to display in the tooltip.
-    - ### bottom `bool`
-        If true, the tooltip will be shown under the content instead of over.
-
-    ## Usage
-    ```svelte
-    <Tooltip text="This is a button">
-        <Button>Do Thing</Button>
-    </Tooltip>
-    <Tooltip text="This shows under" bottom>
-        Just some text content
-    </Tooltip>
-    ```
-    */
-
-    import wsx from "./wsx.mjs"
-
-    export let text = ""
-    export let bottom = false
-
-    $: wind = {
-        $bottom: bottom,
-        ...$$restProps,
-    }
-</script>
-
-<ws-tooltip ws-text={text} use:wsx={wind}>
-    <slot />
-</ws-tooltip>

package/src/vars.mjs

@@ -1,61 +0,0 @@
-/*md
-[@] Actions/vars
-
-# vars Action
-
-The vars action is used to set css variables on dom elements using a simple
-object to maintain the values instead of needing to do string interpolation and
-falsey checks manually.
-
-## Usage
-```js
-//  Sets --screen-widt to 100% and unsets --other-thing
-$: settings = {
-    "screen-width": "100%",
-    "other-thing": null,
-}
-```
-```svelte
-<ws-screen use:vars={settings}>
-</ws-screen>
-```
-*/
-
-const calcValue = value => {
-    if (Array.isArray(value) === false) {
-        return value
-    }
-    if (value[0] === null || value[0] === undefined) {
-        return null
-    }
-    return value.join("")
-}
-const udpateVars = (node, current, next) => {
-    const keys = new Set([
-        ...Object.keys(current),
-        ...Object.keys(next),
-    ])
-    for (const key of keys) {
-        const varName = `--${key}`
-        const currentValue = calcValue(current[key])
-        const nextValue = calcValue(next[key])
-        if (nextValue === undefined || nextValue === null) {
-            node.style.removeProperty(varName)
-        }
-        if (currentValue !== nextValue) {
-            node.style.setProperty(varName, nextValue)
-        }
-    }
-}
-const vars = (node, vars) => {
-    let currentVars = vars
-    udpateVars(node, {}, currentVars)
-    return {
-        update(newVars) {
-            udpateVars(node, currentVars, newVars)
-            currentVars = newVars
-        }
-    }
-}
-
-export default vars