@axel669/zephyr 0.1.1

package/src/modal.svelte

@@ -0,0 +1,68 @@
+<script>
+    /*md
+    [@] Components/Modal
+
+    # Modal
+
+    The Modal component is used to control when content should be shown that
+    sits over the current content and prevents interaction with the content it
+    covers. It is primarily used to show drawers, dialogs, and sub screens.
+
+    The `show` function will display the component specified inside a ws-modal
+    element, and can be awaited for an optional return value. The component
+    displayed will be passed any props supplied to `show` and a `close` function
+    that can be called to hide the component again. `close` can also be given
+    an argument that will be used as the promise value from `show`.
+
+    ## Props
+    Because the Modal does not render content of its own, it does not support
+    any wind functions.
+
+    - ### component `Component`
+        The component to display when `show` is called
+
+    ## Functions
+    - ### `show(props?) -> Promise`
+        Shows the given component and passes any props provided.
+
+    ## Usage
+    ```svelte
+    <Modal component={CoolDialog} bind:this={dialog} />
+    <Button on:click={() => dialog.show({ a: 10, b: 12 })}>
+        Open Dialog
+    </Button>
+    ```
+    */
+
+    export let component
+
+    let modalProps = null
+    let resolver = null
+    let displayed = null
+
+    const close = (value) => {
+        resolver(value)
+        resolver = null
+        modalProps = null
+    }
+    const cancel = () => displayed.cancel?.()
+
+    export const show = (props) => new Promise(
+        (resolve) => {
+            modalProps = props ?? {}
+            resolver = resolve
+        }
+    )
+</script>
+
+{#if resolver !== null}
+    <!-- svelte-ignore a11y-click-events-have-key-events -->
+    <ws-modal ws-x="$show" on:click={cancel}>
+        <svelte:component
+        bind:this={displayed}
+        this={component}
+        {...modalProps}
+        {close}
+        />
+    </ws-modal>
+{/if}

package/src/notification.svelte

@@ -0,0 +1,57 @@
+<script>
+    /*md
+    [@] Components/Notification
+
+    # Notification
+
+    Displays a piece of content that stands out from the surrounding content and
+    can also be used for toast messages. Optionally has some interactable
+    elements embedded.
+
+    Expects 1-2 child nodes and will display them on the sides of the
+    notification with space between them. This means that reversing the order
+    of the child nodes will flip which sides they appear on.
+
+    ## Base
+    [Windstorm Notification](https://axel669.github.io/lib.windstorm/#components-notification)
+
+    ## Props
+    All [windstorm functions](https://axel669.github.io/lib.windstorm/#css-shorthands)
+    are supported.
+
+    - ### color
+        Sets `$color` and uses the fill style for coloration.
+
+    ## Usage
+    ```svelte
+    <Notification>
+        <Icon name="info-hexagon">
+            Some kind of information
+        </Icon>
+    </Notification>
+    <Notification color="danger">
+        <Icon name="alert-hexagon">
+            Something broke
+        </Icon>
+
+        <Button>
+            Cancel
+        </Button>
+    </Notification>
+    ```
+    */
+
+    import wsx from "./wsx.mjs"
+
+    export let color = false
+
+    $: wind = {
+        $color: color,
+        ...$$restProps,
+    }
+</script>
+
+<!-- svelte-ignore a11y-click-events-have-key-events -->
+<ws-notification use:wsx={wind} on:click>
+    <slot />
+</ws-notification>

package/src/paper.svelte

@@ -0,0 +1,114 @@
+<script>
+    /*md
+    [@] Components/Containers/Paper
+
+    # Paper
+
+    The Paper component is a container that has slots for header and footer
+    content that is independant from the regular content scrolling. It also uses
+    Flex as a default layout for its slotted content, but allows any container
+    to be used as a layout without increasing the indentation of all the content
+    needlessly.
+
+    ## Base
+    [Windstorm Paper](https://axel669.github.io/lib.windstorm/#components-paper)
+
+    ## Props
+    All [windstorm functions](https://axel669.github.io/lib.windstorm/#css-shorthands)
+    are supported.
+
+    - ### color `string`
+        Sets `$color`
+    - ### card `bool`
+        Sets `@outline`
+    - ### square `bool`
+        Sets `r[0px]`
+    - ### layout `Component`
+        Sets the layout the card will use to display content. Default is Flex.
+    - ### scrollable `bool`
+        Sets `over[auto]` on the layout component
+    - ### lprops `Object`
+        An object with props to pass to the layout component
+
+    ## Slots
+    - ### header
+        The header content for the Paper. Header content does not scroll with
+        the regular content of the component (acts sticky)
+    - ### footer
+        The footer content for the Paper. Same scrolling properties as the
+        header slot
+    - ### content/default
+        The default slot (unnamed) for Paper will be rendered in the layout
+        component defined in the props. As an alternative, a content slot may
+        be used that will be rendered directly in the content slot of the Paper
+        without the layout component/props being rendered (useful when nesting
+        papers for example)
+
+    ## Usage
+    ```svelte
+    <Paper>
+        <Titlebar slot="header">
+            <Text slot="title" title>
+                Some Title
+            </Text>
+        </Titlebar>
+
+        <div>Content 1</div>
+        <div>Content 2</div>
+        <div>Content 3</div>
+    </Paper>
+    <Paper>
+        <Titlebar slot="header">
+            <Text slot="title" title>
+                Some Screen
+            </Text>
+        </Titlebar>
+
+        <Paper slot="content">
+            <Tabs slot="header" {options} bind:value />
+
+            <div>Content 1</div>
+            <div>Content 2</div>
+            <div>Content 3</div>
+        </Paper>
+
+        <div slot="footer">
+            Wat
+        </div>
+    </Paper>
+    ```
+    */
+
+    import Flex from "./flex.svelte"
+    import wsx from "./wsx.mjs"
+
+    export let color
+    export let card = false
+    export let square = false
+    export let layout = Flex
+    export let scrollable = false
+    export let lprops = {}
+
+    $: props = {
+        over: scrollable ? "auto" : false,
+        ...lprops,
+    }
+    $: wind = {
+        $color: color,
+        "@outline": card,
+        r: square && "0px",
+        ...$$restProps
+    }
+</script>
+
+<ws-paper use:wsx={wind}>
+    <slot name="header" />
+    {#if $$slots.content}
+        <slot name="content" slot="content" />
+    {:else}
+        <svelte:component this={layout} {...props} slot="content">
+            <slot />
+        </svelte:component>
+    {/if}
+    <slot name="footer" />
+</ws-paper>

package/src/popover.svelte

@@ -0,0 +1,60 @@
+<script>
+    /*md
+    [@] Components/Containers/Popover
+
+    # Popover
+
+    The Popover component is for displaying content over something without it
+    being modal (you can interact with things under it still).
+
+    ## Base
+    [Windstorm Popover](https://axel669.github.io/lib.windstorm/#components-popover)
+
+    ## Props
+    All [windstorm functions](https://axel669.github.io/lib.windstorm/#css-shorthands)
+    are supported.
+
+    ## Variables
+    - show
+    - hide
+    The Popover exposes 2 variables for use: `show` and `hide`. These functions
+    are given to the content so that it can control when to display the popover
+    content without needing to bind to the parent.
+
+    ## Usage
+    ```svelte
+    <Popover let:show let:hide>
+        <Button on:click={show}>
+            Show
+        </Button>
+        <div ws-x="inset-x[0px] y[0px] h[100px] bg[teal]" slot="content">
+            <Button on:click={hide}>
+                Hide
+            </Button>
+        </div>
+    </Popover>
+    ```
+    */
+
+    import { fade } from "svelte/transition"
+    import wsx from "./wsx.mjs"
+
+    let visible = false
+    const show = () => visible = true
+    const hide = () => visible = false
+    const anim = { duration: 200 }
+
+    $: wind = {
+        $show: true,
+        ...$$restProps,
+    }
+</script>
+
+<ws-popover use:wsx={wind}>
+    <slot {show} />
+    {#if visible}
+        <wind-content ws-x="slot[content] inset[0px]" transition:fade={anim}>
+            <slot name="content" {hide} />
+        </wind-content>
+    {/if}
+</ws-popover>

package/src/progress.svelte

@@ -0,0 +1,60 @@
+<script>
+    /*md
+    [@] Components/Progress
+
+    # Progress
+
+    Displays progress bar with an optional label.
+
+    ## Base
+    [Windstorm Progress Bar](https://axel669.github.io/lib.windstorm/#components-progress-bar)
+
+    ## Props
+    All [windstorm functions](https://axel669.github.io/lib.windstorm/#css-shorthands)
+    are supported.
+
+    - ### color `string`
+        Sets `$color`
+    - ### label `string`
+        The label for the bar
+    - ### max `number`
+        Sets the max value for the progress bar. Default is 1
+    - ### outline `bool`
+        Sets `@outline`
+    - ### row `bool`
+        Sets `$row`
+    - ### value `number`
+        Sets the value of the progress bar. Combined with max to determine how
+        filled the bar is.
+
+    ## Usage
+    ```svelte
+    <Progress color="primary" value={0.1} />
+    <Progress color="primary" value={5} max={10} />
+    ```
+    */
+
+    import wsx from "./wsx.mjs"
+
+    export let value = 0
+    export let max = 1
+    export let color = "default"
+    export let outline = false
+    export let row = false
+    export let label = null
+
+    $: wind = {
+        "@progress": true,
+        "@outline": outline,
+        $color: color,
+        $row: row,
+        ...$$restProps,
+    }
+</script>
+
+<label use:wsx={wind}>
+    {#if label}
+        <span ws-x="$text t-ws[nowrap]">{label}</span>
+    {/if}
+    <progress {value} {max} />
+</label>

package/src/radio.svelte

@@ -0,0 +1,82 @@
+<script>
+    /*md
+    [@] Components/Input/Radio
+
+    # 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://axel669.github.io/lib.windstorm/#components-labeled toggle)
+    that uses a radio input.
+
+    ## Props
+    All [windstorm functions](https://axel669.github.io/lib.windstorm/#css-shorthands)
+    are supported.
+
+    Unlike the Paper, 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.
+    - ### 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.
+
+    ```js
+    const options = [
+        { label: "first", value: 1 },
+        { label: "second", value: [] },
+        { label: "third", value: "3", $color: "warning" }
+    ]
+    ```
+
+    ## Usage
+    ```svelte
+    <Radio {options} bind:value />
+    <Radio {options} bind:value={other} layout={Grid} gr-col="1fr 1fr" />
+    ```
+    */
+
+    import asuid from "@labyrinthos/asuid"
+
+    import wsx from "./wsx.mjs"
+    import { handler$ } from "./handler$.mjs"
+
+    import Flex from "./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 = asuid()
+</script>
+
+<svelte:component this={layout} {...$$restProps}>
+    {#each options as {value, label, ...wind}, index (value)}
+        <label use:wsx={{"@toggle": true, ...wind}}>
+            <span>{label}</span>
+            <input type="radio" on:input={set(value)} {name} checked={index === valueIndex} />
+        </label>
+    {/each}
+</svelte:component>

package/src/screen.svelte

@@ -0,0 +1,69 @@
+<script context="module">
+    const ctxStack = Symbol("stack context")
+    const ctxClose = Symbol("close context")
+</script>
+
+<script>
+    /*md
+    [@] Components/Containers/Screen
+
+    # Screen
+
+    The screen is a container component that is used for displaying content
+    over its parent and stacks as more screens are displayed. Screens that stack
+    on top of a parent screen use the Modal to control when they are shown and
+    pass values back from child screens. The stacking effect of the Screen is
+    controlled by internally tracked svelte context, so no manual effort is
+    required to get stacking screens to have the effect.
+
+    ## Base
+    [Windstorm Screen](https://axel669.github.io/lib.windstorm/#components-screen)
+
+    ## Props
+    All [windstorm functions](https://axel669.github.io/lib.windstorm/#css-shorthands)
+    are supported, but they probably won't help much with this component.
+
+    - ### width `string`
+        The width of the screen before stack-based padding is applied
+
+    ## Usage
+    `cool-screen.svelte`
+    ```svelte
+    <Screen width="70%">
+        <Paper>
+            This screen is pretty cool I swear
+            <Button on:click={() => close("hi")}>
+                Close
+            </Button>
+        </Paper>
+    </Screen>
+    ```
+    */
+
+    import { getContext, setContext } from "svelte"
+    import { fly } from "svelte/transition"
+
+    import wsx from "./wsx.mjs"
+    import vars from "./vars.mjs"
+
+    export let width = false
+
+    const stack = getContext(ctxStack) ?? 0
+    const animation = {
+        y: window.innerHeight,
+        duration: 350
+    }
+
+    setContext(ctxStack, stack + 1)
+
+    $: wind = {
+        "&stack": stack.toString(),
+        "&screen-width": width,
+        "bg-c": "transparent",
+        ...$$restProps
+    }
+</script>
+
+<ws-screen use:wsx={wind} transition:fly={animation}>
+    <slot />
+</ws-screen>

package/src/select.svelte

@@ -0,0 +1,121 @@
+<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
+
+    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}>
+        {#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

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