@axel669/zephyr 0.1.1

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2023 Chris Morgan
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/package.json

@@ -0,0 +1,32 @@
+{
+  "name": "@axel669/zephyr",
+  "version": "0.1.1",
+  "description": "",
+  "main": "src/index.mjs",
+  "type": "module",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "demo": "rollup -c test/rollup.config.mjs"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "MIT",
+  "dependencies": {
+    "@axel669/windstorm": "^0.1.10",
+    "@labyrinthos/asuid": "^0.2.0"
+  },
+  "peerDependencies": {
+    "svelte": "^3.58.0"
+  },
+  "devDependencies": {
+    "@axel669/ipsen": "^0.3.1",
+    "@axel669/rollup-html-input": "^0.1.2",
+    "@rollup/plugin-node-resolve": "^15.0.2",
+    "@rollup/plugin-terser": "^0.4.0",
+    "rollup": "^3.20.2",
+    "rollup-plugin-svelte": "^7.1.4"
+  },
+  "files": [
+    "src/"
+  ]
+}

package/readme.md

@@ -0,0 +1,44 @@
+
+
+# Zephyr
+Zephyr is a svelte binding for the
+[Windstorm](https://www.npmjs.com/package/@axel669/windstorm)
+library.
+
+[Docs Here](https://svelte-wind.axel669.net)
+
+## Installation
+Zephyr can be installed through npm (or the variants like yarn, pnpm, etc).
+
+```bash
+npm install @axel669/svelte-wind
+```
+
+## Usage
+Components can be imported individually from the library for tree-shaking, or
+the entire lib can imported at once, but I dunno how big that bundle will be.
+
+```svelte
+<script>
+    //  individual import for tree shaking
+    import { Button } from "@axel69/svelte-wind"
+
+    //  bring the whole thing to keep it simple
+    import * as Wind from "@axel69/svelte-wind"
+</script>
+
+<!-- the wsx action can be used to setup the ws-x needed for the body -->
+<svelte:body use:wsx={{theme, "@app": true}} />
+
+<Button on:click={stuff}>
+    I'm a button!
+</Button>
+
+<Wind.Button on:click={stuff}>
+    I'm also button!
+</Wind.Button>
+```
+
+### Svelte Config
+No special configuration of svelte is required, nor is there a separate plugin
+that needs to be added. Just have svelte and you're good to go.

package/src/avatar.svelte

@@ -0,0 +1,54 @@
+<script>
+    /*md
+    [@] Components/Data Display/Avatar
+
+    # Avatar
+
+    Displays an image or text in a circular container.
+
+    ## Base
+    [Windstorm Avatar](https://axel669.github.io/lib.windstorm/#components-avatar)
+
+    ## Props
+    All [windstorm functions](https://axel669.github.io/lib.windstorm/#css-shorthands)
+    are supported.
+
+    - ### alt `string`
+        Alt text for the image. Has no effect if image prop is not used.
+    - ### color `string`
+        Sets `$color`
+    - ### image `string`
+        An image url. If no url is provided the text property is displayed.
+    - ### text `string`
+        Text to show in the avatar area if image is not used.
+
+    ## Example
+    ```svelte
+    <Avatar image="url" />
+    <Avatar image="url" alt="text" />
+    <Avatar text="Hi" color="primary" />
+    ```
+    */
+
+    import wsx from "./wsx.mjs"
+
+    export let alt = ""
+    export let image = null
+
+    export let text = ""
+
+    export let color = false
+
+    $: wind = {
+        $color: color,
+        ...$$restProps
+    }
+</script>
+
+<ws-avatar use:wsx={wind}>
+    {#if image !== null}
+        <img src={image} {alt} />
+    {:else}
+        {text}
+    {/if}
+</ws-avatar>

package/src/badge.svelte

@@ -0,0 +1,40 @@
+<script>
+    /*md
+    [@] Components/Data Display/Badge
+
+    # Badge
+    Adds a small badge over the upper-right corner of some content.
+
+    ## Base
+    [Windstorm Badge](https://axel669.github.io/lib.windstorm/#components-badge)
+
+    ## Props
+    All [windstorm functions](https://axel669.github.io/lib.windstorm/#css-shorthands)
+    are supported.
+
+    - ### color `string`
+        Sets `$color`
+    - ### text `string`
+        The badge text.
+
+    ## Example
+    ```svelte
+    <Badge text="100">
+        Unread Messages
+    </Badge>
+    <Badge text="1k+" color="warning">
+        <button>Clickable Content</button>
+    </Badge>
+    ```
+    */
+    import wsx from "./wsx.mjs"
+
+    export let color = "default"
+    export let text = ""
+
+    $: wind = { $color: color, ...$$restProps }
+</script>
+
+<ws-badge ws-text={text} use:wsx={wind}>
+    <slot />
+</ws-badge>

package/src/button.svelte

@@ -0,0 +1,80 @@
+<script>
+    /*md
+    [@] Components/Button
+
+    # Button
+
+    Basic clickable component for handling user interaction.
+
+    ## Base
+    [Windstorm Button](https://axel669.github.io/lib.windstorm/#components-button)
+
+    ## Props
+    All [windstorm functions](https://axel669.github.io/lib.windstorm/#css-shorthands)
+    are supported.
+
+    - ### color `string`
+        Sets `$color`
+    - ### compact `bool`
+        Sets `$compact`
+    - ### for `string`
+        The ID of a dom element that the button is tied to. Only works with
+        label buttons.
+    - ### label `string`
+        If true, the button will be displayed in the DOM using a `<label>`
+        element instead of a `<button>`.
+    - ### variant `string`
+        Sets the button type to `@<variant>` (ex: "flat" -> `@flat`). Default
+        variant is "flat". Currently supports "flat", "fill", "outline".
+
+    ## Events
+    - click
+
+    ## Example
+    ```svelte
+    <Button on:click={action}>
+        Flat Button
+    </Button>
+    <Button on:click={action} variant="outline">
+        Outlined Button
+    </Button>
+    <Button on:click={action} variant="fill" color="danger">
+        Filled Button
+    </Button>
+
+    <Button label for="thing">
+        Toggle
+    </Button>
+    <input type="checkbox" id="toggle" />
+    ```
+    */
+
+    import wsx from "./wsx.mjs"
+
+    export let color = "default"
+    export let compact = false
+    export let variant = "flat"
+
+    let _for = ""
+    export { _for as for }
+    export let label = false
+
+    $: wind = {
+        [`@${variant}`]: true,
+        $color: color,
+        $compact: compact,
+        "@button": label,
+        ...$$restProps
+    }
+</script>
+
+{#if label === true}
+    <!-- svelte-ignore a11y-click-events-have-key-events -->
+    <label use:wsx={wind} for={_for} on:click|stopPropagation>
+        <slot />
+    </label>
+{:else}
+    <button use:wsx={wind} on:click|stopPropagation>
+        <slot />
+    </button>
+{/if}

package/src/chip.svelte

@@ -0,0 +1,53 @@
+<script>
+    /*md
+    [@] Components/Data Display/Chip
+
+    # Chip
+    Shows a small piece of information that is separate from the surrounding
+    info and optionally allows interaction.
+
+    ## Base
+    [Windstorm Chip](https://axel669.github.io/lib.windstorm/#components-chip)
+
+    ## Props
+    All [windstorm functions](https://axel669.github.io/lib.windstorm/#css-shorthands)
+    are supported.
+
+    - ### color `string`
+        Sets `$color`
+    - ### clickable `bool`
+        If true, the chip will have the button ripple effect when clicked.
+    - ### variant `string`
+        Sets the chip type to `@<variant>` (ex: "fill" -> `@fill`). Default
+        variant is "outline". Currently supports "fill", "outline".
+
+    ## Events
+    - click
+
+    ## Example
+    ```svelte
+    Emails:
+    <Chip clickable>admin@site.com</Chip>
+    <Chip clickable color="warning">weirdge@site.com</Chip>
+    <Chip color="primary">required@site.io</Chip>
+    ```
+    */
+
+    import wsx from "./wsx.mjs"
+
+    export let color = "default"
+    export let clickable = false
+    export let variant = "outline"
+
+    $: wind = {
+        [`@${variant}`]: true,
+        $color: color,
+        $click: clickable,
+        ...$$restProps
+    }
+</script>
+
+<!-- svelte-ignore a11y-click-events-have-key-events -->
+<ws-chip use:wsx={wind} on:click>
+    <slot />
+</ws-chip>

package/src/composed/data-table.svelte

@@ -0,0 +1,150 @@
+<script>
+    /*md
+    [@] Components/Data Display/DataTable
+
+    # DataTable
+
+    The DataTable is a more advanced way to show data on screen. Underneath is
+    a table element like the Table component, but the DataTable supports
+    more fine-grained control over how data is passed, how rows are displayed,
+    and pagination.
+
+    > If pagination is not needed, the DataTable may not be necessary as it will
+    > only be shortcutting data formatting at that point.
+
+    ## Props
+    All [windstorm functions](https://axel669.github.io/lib.windstorm/#css-shorthands)
+    are supported.
+
+    - ### color
+        Sets `$color`
+    - ### cols `Array`
+        The columns that should be displayed. Should be in the format of
+        `{ label, width?, format?, prop? }`. If a format function is provided,
+        it is called on each cell to determine a cells value as
+        `format(rowItem)`, otherwise the property defined in prop will be used
+        as the cell value.
+    - ### data `Array`
+        The data to display. Each item in the array can be in either the same
+        format as the Table, or any kind of object if column format functions
+        are used.
+    - ### 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 `(rowvalue, rowNum, col)`.
+    - ### 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)`.
+    - ### page
+        The current page of data being viewed. Can be bound, or set to control
+        which page is displayed
+    - ### pageSize
+        The number of items to show on each page. Default is 10
+    - ### rowHeight
+        The height of each row. Can be set individually through rowWSX, but
+        that may lead to a degraded user experience if the rows change size
+        while paging through the data
+
+    ## Usage
+    ```js
+    let page
+    const cols = [
+        { label: "N", prop: "a" },
+        { label: "Squared", prop: "b" },
+        { label: "Cubed", format: row => `^3 = ${row.c}` },
+    ]
+    const data = [
+        { a: 1, b: 1 ** 2, c: 1 ** 3 },
+        { a: 2, b: 2 ** 2, c: 2 ** 3 },
+        { a: 3, b: 3 ** 2, c: 3 ** 3 },
+        { a: 4, b: 4 ** 2, c: 4 ** 3 },
+        { a: 5, b: 5 ** 2, c: 5 ** 3 },
+        { a: 6, b: 6 ** 2, c: 6 ** 3 },
+        { a: 7, b: 7 ** 2, c: 7 ** 3 },
+        { a: 8, b: 8 ** 2, c: 8 ** 3 },
+        { a: 9, b: 9 ** 2, c: 9 ** 3 },
+        { a: 10, b: 10 ** 2, c: 10 ** 3 },
+        { a: 11, b: 11 ** 2, c: 11 ** 3 },
+        { a: 12, b: 12 ** 2, c: 12 ** 3 },
+        { a: 13, b: 13 ** 2, c: 13 ** 3 },
+    ]
+    ```
+    ```svelte
+    <DataTable {cols} {data} color="warning" pageSize={3} bind:page />
+    ```
+    */
+
+    import Button from "../button.svelte"
+    import Icon from "../icon.svelte"
+    import Paper from "../paper.svelte"
+    import Text from "../text.svelte"
+
+    import Grid from "../grid.svelte"
+
+    import wsx from "../wsx.mjs"
+
+    export let color = false
+    export let data = []
+    export let cols = []
+    export let rowWSX = null
+    export let cellWSX = null
+    export let pageSize = 10
+    export let page = 0
+    export let rowHeight = "40px"
+
+    $: wind = {
+        $color: color,
+        ...$$restProps,
+    }
+
+    $: rows = Array.from(
+        { length: pageSize },
+        (_, i) => data[page * pageSize + i]
+    )
+    $: pageCount = Math.ceil(data.length / pageSize)
+
+    const prev = () => page = Math.max(0, page - 1)
+    const next = () => page = Math.min(pageCount - 1, page + 1)
+</script>
+
+<Paper card {color} lprops={{ "fl-cr-a": "stretch", p: "0px" }}>
+    <table use:wsx={wind}>
+        <thead>
+            <tr>
+                {#each cols as col}
+                    <th use:wsx={{ w: col.width, h: rowHeight }}>{col.label}</th>
+                {/each}
+            </tr>
+        </thead>
+        <tbody>
+            {#each rows as row, rowNum}
+                {#if row === undefined}
+                    <tr use:wsx={{ h: rowHeight }}></tr>
+                {:else}
+                    <tr use:wsx={{ h: rowHeight, ...rowWSX?.(row, rowNum) }}>
+                        {#each cols as col, colNum}
+                            <td use:wsx={cellWSX?.(row, rowNum, col)}>
+                                {(col.format !== undefined)
+                                    ? col.format?.(row)
+                                    : row[col.prop]
+                                }
+                            </td>
+                        {/each}
+                    </tr>
+                {/if}
+            {/each}
+        </tbody>
+    </table>
+    <Grid slot="footer" gr-col="min-content min-content min-content 1fr">
+        <Button on:click={prev}>
+            <Icon name="arrow-big-left" />
+        </Button>
+        <Button on:click={next}>
+            <Icon name="arrow-big-right" />
+        </Button>
+        <Text adorn t-ws="nowrap">
+            Page {page + 1} / {pageCount}
+        </Text>
+    </Grid>
+</Paper>

package/src/composed/entry-button.svelte

@@ -0,0 +1,66 @@
+<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
+    - ### 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 result = await element.show(props)
+            send("entry", result)
+        }
+    )
+</script>
+
+<Button {...$$restProps} on:click={open(props)}>
+    <slot />
+</Button>
+
+<svelte:component this={wrapper} {component} bind:this={element} />

package/src/composed/toast/message.svelte

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

package/src/composed/toast.svelte

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