@axel669/zephyr 0.5.5 → 1.0.0-beta.1

package/package.json

@@ -1,42 +1,48 @@
-{
-  "name": "@axel669/zephyr",
-  "version": "0.5.5",
-  "description": "",
-  "main": "src/index.js",
-  "type": "module",
-  "scripts": {
-    "site/start": "wrangler pages dev site --port 45067",
-    "site/build": "rollup -c docsite/rollup.config.js",
-    "site/watch": "rollup -c docsite/rollup.config.js --watch"
-  },
-  "keywords": [],
-  "author": "",
-  "license": "MIT",
-  "dependencies": {
-    "@axel669/windstorm": "0.5.5",
-    "svelte": "^5.30.1"
-  },
-  "devDependencies": {
-    "@axel669/asuid": "^0.2.1",
-    "@axel669/ipsen": "0.4.0-beta.7",
-    "@axel669/rollup-copy-static": "^0.2.0",
-    "@axel669/rollup-html-input": "^0.1.2",
-    "@rollup/plugin-node-resolve": "^15.0.2",
-    "@rollup/plugin-terser": "^0.4.0",
-    "marked": "^12.0.2",
-    "prism-svelte": "^0.5.0",
-    "prismjs": "^1.29.0",
-    "rollup": "^3.20.2",
-    "rollup-plugin-delete": "^2.0.0",
-    "rollup-plugin-svelte": "^7.2.2"
-  },
-  "files": [
-    "src/"
-  ],
-  "imports": {
-    "#lib": "./src/index.js",
-    "#comp/*": "./docsite/comp/*.svelte",
-    "#state/*": "./docsite/state/*.js",
-    "#README": "./readme.md"
-  }
-}
+{
+  "name": "@axel669/zephyr",
+  "version": "1.0.0-beta.1",
+  "description": "",
+  "main": "src/main.js",
+  "type": "module",
+  "scripts": {
+    "site/start": "wrangler dev",
+    "site/build": "rollup -c docsite/rollup.config.js",
+    "site/watch": "rollup -c docsite/rollup.config.js --watch"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "MIT",
+  "dependencies": {
+    "@axel669/windstorm": "1.0.0-beta.1",
+    "svelte": "^5.30.1"
+  },
+  "devDependencies": {
+    "@axel669/asuid": "^0.2.1",
+    "@axel669/ipsen": "0.4.0-beta.7",
+    "@axel669/rollup-copy-static": "^0.2.0",
+    "@axel669/rollup-html-input": "^0.1.2",
+    "@rollup/plugin-node-resolve": "^15.0.2",
+    "@rollup/plugin-terser": "^0.4.0",
+    "fs-jetpack": "^5.1.0",
+    "markdown-it": "^14.1.1",
+    "marked": "^12.0.2",
+    "prism-svelte": "^0.5.0",
+    "prismjs": "^1.29.0",
+    "rollup": "^3.20.2",
+    "rollup-plugin-delete": "^2.0.0",
+    "rollup-plugin-svelte": "^7.2.2",
+    "yaml": "^2.8.3"
+  },
+  "files": [
+    "src/"
+  ],
+  "exports": {
+    ".": "./src/main.js"
+  },
+  "imports": {
+    "#lib": "./src/main.js",
+    "#comp/*": "./docsite/comp/*.svelte",
+    "#state/*": "./docsite/state/*.js",
+    "#README": "./readme.md"
+  }
+}

package/readme.md

@@ -17,50 +17,6 @@ Zephyr can be installed through npm (or the variants like yarn, pnpm, etc).
 npm install @axel669/zephyr
 ```
 
-## Components
-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.
-Components can also take any windstorm macro as a prop, including custom macros,
-using the same rules as the `wsx` covered in
-[Functions](./docsite/docs/functions.md).
-
-### Theming
-Windstorm expects a theme to be defined on an ancestor of the html elements
-that use it, and Zephyr does not automatically set the theme because it can
-used anywhere in the page. This means the wsx action (or setting the ws-x
-attribute directly) will be needed for components to look right. Any valid
-Windstorm theme is usable, including custom ones.
-
-### Example
-```svelte
-<script>
-    //  individual import for tree shaking
-    import {
-        Button,
-        wsx
-    } from "@axel669/zephyr"
-
-    //  bring the whole thing to keep it simple
-    import * as Wind from "@axel669/zephyr"
-
-    const theme = "dark"
-    const handler = () => {
-        console.log("button clicked!")
-    }
-</script>
-
-<!-- the wsx action can be used to setup the ws-x needed for the body -->
-<svelte:body use:wsx={{"@theme": theme, "@app": true}} />
-
-<Button on:click={handler}>
-    I'm a button!
-</Button>
-
-<Wind.Button on:click={handler}>
-    I'm also button!
-</Wind.Button>
-```
-
 ## Svelte Config
 Zephyr does not output any css of its own, so no configuration is required to
 make it styled as expected. For people using Svelte 4+ you will need to make

package/src/changed.svelte.js

@@ -0,0 +1,23 @@
+// export const trackChanges = (initial) => {
+//     let current = initial
+//     return (next) => {
+//         if (next !== current) {
+//             current = next
+//             return true
+//         }
+//         return false
+//     }
+// }
+
+export const track = (...args) => {
+    let called = false
+    const f = args[args.length - 1]
+    const params = args.slice(0, -1)
+    $effect(() => {
+        if (called === false) {
+            called = true
+            return
+        }
+        f(...params)
+    })
+}

package/src/component/adorn.svelte

@@ -0,0 +1,9 @@
+<script>
+    const {
+        children
+    } = $props()
+</script>
+
+<ze-adorn data-ws="adorn;">
+    {@render children?.()}
+</ze-adorn>

package/src/component/alert.svelte

@@ -0,0 +1,32 @@
+<script>
+    import Button from "./button.svelte"
+    import Paper from "./paper.svelte"
+    import Text from "./text.svelte"
+    import Titlebar from "./titlebar.svelte"
+
+    const {
+        message,
+        close,
+        color = "@primary",
+    } = $props()
+</script>
+
+<Paper ws="@color: {color}; variant.outline;">
+    {#snippet header()}
+        <Titlebar ws="@color: {color};">
+            <Text header>
+                Alert
+            </Text>
+        </Titlebar>
+    {/snippet}
+
+    <Text ws="p: 8px;">
+        {message}
+    </Text>
+
+    {#snippet footer()}
+        <Button ws="@color: @success;" onclick={() => close(true)}>
+            OK
+        </Button>
+    {/snippet}
+</Paper>

package/src/component/application.svelte

@@ -0,0 +1,17 @@
+<script>
+    import Dialog from "./dialog.svelte"
+    import Toaster from "./toaster.svelte"
+    import { wsAttr } from "../ws.js"
+
+    const {
+        baseline = "",
+        theme = "tron",
+        children,
+    } = $props()
+</script>
+
+<svelte:body use:wsAttr={`#theme.${theme}; ${baseline}`} />
+
+<Toaster />
+<Dialog />
+{@render children?.()}

package/src/component/async-button.svelte

@@ -0,0 +1,53 @@
+<script module>
+    import { ws } from "../ws.js"
+
+    ws.component("ze-async-button")`
+        disp: inline-grid;
+        pos.rel;
+    `
+
+    ws.macro("async.button.spinner")`
+        @size: 100%;
+        pos.abs;
+        x: 50%;
+        y: 0px;
+        tf: translateX(-50%);
+        h: 100%;
+    `
+</script>
+
+<script>
+    import Button from "./button.svelte"
+    import CircleSpinner from "./circle-spinner.svelte"
+
+    const {
+        onclick,
+        onresolve,
+        hideSpinner = false,
+        children,
+        disabled,
+        spinnerWS = "",
+        ...props
+    } = $props()
+
+    let waiting = $state(false)
+    const handler = async (e) => {
+        waiting = true
+        const value = await onclick?.(e)
+        waiting = false
+        onresolve?.(value)
+    }
+    const dis = $derived(
+        disabled === true
+        || waiting === true
+    )
+</script>
+
+<ze-async-button>
+    <Button {...props} onclick={handler} disabled={dis}>
+        {@render children?.()}
+    </Button>
+    {#if waiting === true && hideSpinner === false}
+        <CircleSpinner ws="async.button.spinner; {spinnerWS}" />
+    {/if}
+</ze-async-button>

package/src/component/avatar.svelte

@@ -0,0 +1,15 @@
+<script>
+    const { ws, image, type = "image/png", text, children, ...rest } = $props()
+</script>
+
+<ws-avatar data-ws={ws} {...rest}>
+    {#if children !== undefined}
+        {@render children()}
+    {:else if text !== undefined}
+        {text}
+    {:else}
+        <!-- svelte-ignore a11y_missing_attribute -->
+        <!-- svelte-ignore element_invalid_self_closing_tag -->
+        <object data={image} {type} />
+    {/if}
+</ws-avatar>

package/src/component/badge.svelte

@@ -0,0 +1,7 @@
+<script>
+    const { ws, text, children, ...rest } = $props()
+</script>
+
+<ws-badge ws-text={text} data-ws={ws} {...rest}>
+    {@render children()}
+</ws-badge>

package/src/component/button.svelte

@@ -0,0 +1,7 @@
+<script>
+    const { ws = "", children, ...rest } = $props()
+</script>
+
+<button data-ws={ws} {...rest}>
+    {@render children?.()}
+</button>

package/src/component/chip.svelte

@@ -0,0 +1,10 @@
+<script>
+    const { ws, clickable = false, children, ...rest } = $props()
+    const clicking = $derived(
+        (clickable === true) ? "" : undefined
+    )
+</script>
+
+<ws-chip data-ws={ws} clickable={clicking} {...rest}>
+    {@render children()}
+</ws-chip>

package/src/component/circle-spinner.svelte

@@ -0,0 +1,6 @@
+<script>
+    const { ws, ...rest } = $props()
+</script>
+
+<!-- svelte-ignore element_invalid_self_closing_tag -->
+<ws-circle-spinner data-ws={ws} {...rest} />

package/src/component/confirm.svelte

@@ -0,0 +1,40 @@
+<script>
+    import Button from "./button.svelte"
+    import Grid from "./grid.svelte"
+    import Paper from "./paper.svelte"
+    import Text from "./text.svelte"
+    import Titlebar from "./titlebar.svelte"
+
+    const {
+        message,
+        close,
+        color = "@primary",
+        okText = "OK",
+        cancelText = "Cancel",
+    } = $props()
+</script>
+
+<Paper ws="@color: {color}; variant.outline;">
+    {#snippet header()}
+        <Titlebar ws="@color: {color};">
+            <Text header>
+                Confirm
+            </Text>
+        </Titlebar>
+    {/snippet}
+
+    <Text ws="p: 8px;">
+        {message}
+    </Text>
+
+    {#snippet footer()}
+        <Grid ws="gr.cols: 1fr 1fr; p: 0px;">
+            <Button ws="@color: @error;" onclick={() => close(false)}>
+                {cancelText}
+            </Button>
+            <Button ws="@color: @success;" onclick={() => close(true)}>
+                {okText}
+            </Button>
+        </Grid>
+    {/snippet}
+</Paper>

package/src/component/control-label.svelte

@@ -0,0 +1,41 @@
+<script>
+    const {
+        ws,
+        labelWS,
+        label,
+        children,
+        start,
+        end,
+        extra,
+        ...rest
+    } = $props()
+</script>
+
+<label control data-ws={ws ?? ""} {...rest}>
+    {#if label}
+        <ws-text label-text data-ws={labelWS}>
+            {#if typeof label !== "function"}
+                {label}
+            {:else}
+                {@render label()}
+            {/if}
+        </ws-text>
+    {/if}
+    {@render children()}
+
+    {#if start}
+        <ze-input-start data-ws="area: start; grid;">
+            {@render start()}
+        </ze-input-start>
+    {/if}
+    {#if end}
+        <ze-input-end data-ws="area: end; grid;">
+            {@render end()}
+        </ze-input-end>
+    {/if}
+    {#if extra}
+        <ze-input-extra data-ws="area: extra; grid;">
+            {@render extra()}
+        </ze-input-extra>
+    {/if}
+</label>

package/src/component/data-table.svelte

@@ -0,0 +1,227 @@
+<script module>
+    import { ws as wind } from "../ws.js"
+
+    wind.component("ze-data-table")`
+        pos.rel;
+        grid;
+        gr.cols: 1fr;
+        gr.rows: 1fr min-content;
+        p: 0px;
+        h: 100%;
+        w: 100%;
+        h.max: 100%;
+        w.max: 100%;
+    `
+    wind.component("ze-data-scroller")`
+        pos.rel;
+        over: auto;
+        ! &::before {
+            *content: "";
+            pos.abs;
+            w: 1px;
+            h: @h;
+            z: -1;
+        }
+    `
+    wind.component("ze-fake-scroll")`
+        disp: block;
+        w: 100%;
+        h: @h;
+        pos.stick;
+        y: 0px;
+        over: hidden;
+    `
+    wind.component("ze-data-footer")`
+        pos: rel;
+        grid;
+    `
+
+    const itemRange = (info) => {
+        const {
+            scrollPos,
+            scrollMax,
+            rowSize,
+            length,
+            containerHeight,
+        } = info
+        if (scrollMax === null) {
+            return [0, 0]
+        }
+        const displayed = Math.ceil(containerHeight / rowSize) - 1
+        const itemPos = Math.floor(
+            (scrollPos / scrollMax) * (length - displayed)
+        )
+        return [
+            itemPos - 1,
+            itemPos + displayed + 1,
+            displayed + 2,
+        ]
+    }
+    const emptyRow = Symbol("empty row")
+    const nullRow = Symbol("null row")
+
+    const sliceData = (data, range) => {
+        const displayed = data.slice(
+            Math.max(range[0], 0),
+            range[1]
+        )
+        if (range[0] === -1) {
+            return [emptyRow, ...displayed]
+        }
+        if (displayed.length < range[2]) {
+            return [
+                ...displayed,
+                ...Array.from(
+                    { length: range[2] - displayed.length },
+                    () => nullRow
+                )
+            ]
+        }
+        return displayed
+    }
+</script>
+<script>
+    import { onMount } from "svelte"
+    import { on } from "svelte/events"
+
+    const {
+        rowSize = 30,
+        headerSize = rowSize,
+        header = Header,
+        row = Row,
+        ws = "",
+        data,
+        footer = Footer,
+    } = $props()
+
+    const keys = $derived(
+        Object.keys(data?.[0] ?? {})
+    )
+
+    const itemsHeight = $derived(
+        rowSize * data.length
+    )
+    const tableHeight = $derived(itemsHeight + headerSize)
+
+    let scrollPos = $state(0)
+    let scrollMax = $state(null)
+    let containerHeight = $state(null)
+    const scrollHandler = (evt) => {
+        scrollPos = container.scrollTop
+    }
+    const range = $derived(
+        itemRange({
+            scrollPos,
+            scrollMax,
+            containerHeight,
+            rowSize,
+            length: data.length,
+        })
+    )
+    let container = $state(null)
+
+    $inspect(scrollMax, containerHeight)
+
+    onMount(() => {
+        containerHeight = container.clientHeight
+        scrollMax = container.scrollHeight - containerHeight
+        on(container, "scroll", scrollHandler, { passive: true })
+        const observer = new ResizeObserver(
+            () => {
+                containerHeight = container.clientHeight
+                scrollMax = container.scrollHeight - containerHeight
+            }
+        )
+        observer.observe(container)
+        return () => observer.unobserve(container)
+    })
+
+    const displayed = $derived(range[2])
+    const displayedRows = $derived(
+        sliceData(data, range)
+    )
+    const show = $derived({
+        start: Math.max(1, range[0] + 2),
+        end: Math.min(data.length, range[1] - 1),
+        total: data.length,
+    })
+    const correction = $derived(
+        (data.length - displayed) * rowSize
+    )
+
+    const itemOffset = $derived(
+        range[0] * rowSize - scrollPos
+    )
+
+    const containerWS = $derived(
+        wind.x({
+            "! & :where(thead, tbody)": {
+                w: "100%",
+            },
+            "! & thead > tr": {
+                h: "@header",
+                z: "+5",
+                "pos.rel": true,
+            },
+            "! & tbody > tr": {
+                h: "@row",
+            },
+        })
+    )
+</script>
+
+{#snippet Header(keys)}
+    <tr>
+        {#each keys as key}
+            <th>{key}</th>
+        {/each}
+    </tr>
+{/snippet}
+{#snippet Row(item, keys)}
+    <tr>
+        {#each keys as key}
+            <td>{item[key]}</td>
+        {/each}
+    </tr>
+{/snippet}
+{#snippet Footer(show, displayed)}
+    <div data-ws="flex; fl.cn; h.min: 32px;">
+        <div>
+            Showing: {show.start} - {show.end} of {show.total}
+        </div>
+    </div>
+{/snippet}
+
+<ze-data-table data-ws={containerWS}>
+    <ze-data-scroller
+    bind:this={container}
+    data-ws="@h: {tableHeight}px; @header: {headerSize}px; @row: {rowSize}px;"
+    >
+        <ze-fake-scroll data-ws="@h: {containerHeight}px;">
+            <table data-ws="w: 100%; {ws}">
+                <thead>
+                    {#if data?.length > 0}
+                        {@render header(keys)}
+                    {:else}
+                        <tr>
+                            <td>N/A</td>
+                        </tr>
+                    {/if}
+                </thead>
+                <tbody data-ws="tf: translateY({itemOffset}px);">
+                    {#each displayedRows as item}
+                        {@render row(item, keys)}
+                    {:else}
+                        <tr>
+                            <td>No Items</td>
+                        </tr>
+                    {/each}
+                </tbody>
+            </table>
+        </ze-fake-scroll>
+    </ze-data-scroller>
+
+    <ze-data-footer>
+        {@render footer(show, displayedRows)}
+    </ze-data-footer>
+</ze-data-table>

package/src/component/details.svelte

@@ -0,0 +1,22 @@
+<script>
+    let {
+        open =  $bindable(false),
+        ws,
+        summaryWS,
+        children,
+        label = "",
+        summary,
+        ...rest
+    } = $props()
+</script>
+
+<details data-ws={ws ?? ""} bind:open {...rest}>
+    <summary data-ws={summaryWS}>
+        {#if summary !== undefined}
+            {@render summary()}
+        {:else}
+            {label}
+        {/if}
+    </summary>
+    {@render children()}
+</details>