@axel669/zephyr 0.4.7 → 0.5.4

package/package.json

@@ -1,24 +1,25 @@
 {
   "name": "@axel669/zephyr",
-  "version": "0.4.7",
+  "version": "0.5.4",
   "description": "",
-  "main": "src/index.mjs",
+  "main": "src/index.js",
   "type": "module",
   "scripts": {
     "site/start": "wrangler pages dev site --port 45067",
-    "site/build": "rollup -c docsite/rollup.config.mjs",
-    "site/watch": "rollup -c docsite/rollup.config.mjs --watch"
+    "site/build": "rollup -c docsite/rollup.config.js",
+    "site/watch": "rollup -c docsite/rollup.config.js --watch"
   },
   "keywords": [],
   "author": "",
   "license": "MIT",
   "dependencies": {
-    "@axel669/rollup-copy-static": "^0.2.0",
-    "@axel669/windstorm": "0.4.6"
+    "@axel669/windstorm": "0.5.4",
+    "svelte": "^5.9.0"
   },
   "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",
@@ -27,14 +28,15 @@
     "prismjs": "^1.29.0",
     "rollup": "^3.20.2",
     "rollup-plugin-delete": "^2.0.0",
-    "rollup-plugin-svelte": "^7.1.6",
-    "svelte": "^4.2.7"
+    "rollup-plugin-svelte": "^7.2.2"
   },
   "files": [
     "src/"
   ],
   "imports": {
-    "#lib": "./src/index.mjs",
-    "#comp/*": "./docsite/comp/*.svelte"
+    "#lib": "./src/index.js",
+    "#comp/*": "./docsite/comp/*.svelte",
+    "#state/*": "./docsite/state/*.js",
+    "#README": "./readme.md"
   }
 }

package/readme.md

@@ -4,6 +4,12 @@ library, with some additional parts to make it look nice in the markup.
 
 [Docs Here](https://zephyr.axel669.net)
 
+## Todo
+These are things that I plan to do, but didn't want to hold up the 0.5.x major
+changes for svelte 5/runes/improvements.
+- Add filter/sort back into data table
+- Form element
+
 ## Installation
 Zephyr can be installed through npm (or the variants like yarn, pnpm, etc).
 
@@ -15,7 +21,8 @@ npm install @axel669/zephyr
 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](./src/functions.md).
+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

package/src/async/button.svelte

@@ -1,29 +1,33 @@
 <script>
     import Button from "../control/button.svelte"
     import Spinner from "../spinner/circle-spinner.svelte"
+    import { splitProps } from "../props.js"
 
-    export let handler = null
-    export let disabled
-    export let spincolor = "@primary"
+    const {
+        handler = null,
+        disabled,
+        ...rest
+    } = $props()
 
-    let running = false
-    const asyncHandler = async (evt) => {
+    let running = $state(false)
+    const onclick = async (evt) => {
         running = true
         await handler(evt)
         running = false
     }
 
-    $: inactive = disabled || running
-    $: props = {
-        ...$$restProps,
+    const inactive = $derived(disabled || running)
+    const prop = $derived(
+        splitProps(rest, "sp!")
+    )
+    const buttonProps = $derived({
+        ...prop.rest,
         disabled: inactive,
-    }
+    })
 </script>
 
 <async-button ws-x="[disp inline-grid] [gr.cols 1fr] [pos relative]">
-    <Button {...props} on:click={asyncHandler}>
-        <slot />
-    </Button>
+    <Button {...buttonProps} {onclick} />
     {#if running === true}
         <Spinner
             size="unset"
@@ -31,7 +35,7 @@
             x="50%" y="0px"
             tf="translateX(-50%)"
             h="100%"
-            color={spincolor}
+            {...prop["sp!"]}
         />
     {/if}
 </async-button>

package/src/async/suspend.svelte

@@ -0,0 +1,38 @@
+<script>
+    import CircleSpinner from "../spinner/circle-spinner.svelte"
+
+    const {
+        "!component": Component,
+        loading,
+        error,
+        ...rest
+    } = $props()
+    const wait = $derived(
+        Promise.all(
+            Object.entries(rest).map(
+                async (pair) => [pair[0], await pair[1]]
+            )
+        )
+    )
+</script>
+
+{#await wait}
+    {#if loading}
+        {@render loading()}
+    {:else}
+        <div ws-x="[flex] [fl-center] [p 4px]">
+            <CircleSpinner size="56px" />
+            <span>Loading</span>
+        </div>
+    {/if}
+{:then entries}
+    <Component {...Object.fromEntries(entries)} />
+{:catch loadError}
+    {#if error}
+        {@render error(loadError)}
+    {:else}
+        <div ws-x="[b 1px solid red] [p 8px]">
+            {loadError}
+        </div>
+    {/if}
+{/await}

package/src/changed.js

@@ -0,0 +1,10 @@
+export const trackChanges = (initial) => {
+    let current = initial
+    return (next) => {
+        if (next !== current) {
+            current = next
+            return true
+        }
+        return false
+    }
+}

package/src/composed/data-table/th.svelte

@@ -14,7 +14,7 @@
     import Grid from "../../layout/grid.svelte"
     import Icon from "../../info/icon.svelte"
 
-    import wsx from "../../wsx.mjs"
+    import wsx from "../../wsx.js"
     import { dtContext } from "../data-table.svelte"
 
     export let sort = null
@@ -46,7 +46,7 @@
             </div>
         {:else}
             <Button compact r="0px" fill={$context.fillHeader}
-            t.wt="inherit" on:click={setSort} color={$context.color}>
+            t.wt="inherit" on:click={setSort} color={$context.color} ground>
                 <slot />
                 <Icon name={sortIcon} m.l="4px" t.sz="16px" />
             </Button>

package/src/composed/data-table.svelte

@@ -1,200 +1,174 @@
-<svelte:options immutable />
-
-<script context="module">
-    // find the first filter in the list that returns false
-    const applyFilters = (data, filters) => {
-        if (Array.isArray(data) === false) {
-            return null
+<script module>
+    const itemRange = (info) => {
+        const {
+            scrollPos,
+            scrollMax,
+            rowSize,
+            length,
+            containerHeight,
+        } = info
+        if (scrollMax === null) {
+            return [0, 0]
         }
-        return data.filter(
-            (row) => {
-                for (const [filter, value] of filters) {
-                    if (filter(row, value) === false) {
-                        return false
-                    }
-                }
-                return true
-            }
+        const displayed = Math.ceil(containerHeight / rowSize) - 1
+        const itemPos = Math.floor(
+            (scrollPos / scrollMax) * (length - displayed)
         )
+        return [
+            itemPos - 1,
+            itemPos + displayed + 1,
+            displayed + 2,
+        ]
     }
-    const sliceData = (data, page, pageSize, sortFunc) => {
-        if (data === null) {
-            return []
-        }
-        const sorted = data.sort(sortFunc)
-        return Array.from(
-            { length: pageSize },
-            (_, i) => sorted[page * pageSize + i]
+    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
     }
-    const noSort = {
-        direction: null,
-        func: (a, b) => 0,
-        base: null,
-    }
-
-    export const dtContext = Symbol("table key")
 </script>
 
 <script>
-    import { createEventDispatcher, setContext } from "svelte"
-    import { writable } from "svelte/store"
-
-    import Button from "../control/button.svelte"
-    import Icon from "../info/icon.svelte"
-    import Paper from "../layout/paper.svelte"
-    import Table from "../data-display/table.svelte"
-    import Text from "../text.svelte"
+    import { on } from "svelte/events"
 
     import Grid from "../layout/grid.svelte"
 
-    import wsx from "../wsx.mjs"
-    import { handler$, eventHandler$ } from "../handler$.mjs"
-
-    export let color = "@primary"
-    export let fillHeader = true
-    export let data
-    export let pageSize = 10
-    export let page = 0
-    export let rowHeight = "40px"
-    export let scrollable = false
-    export let height = null
-
-    let sorting = noSort
-    let filters = new Map()
-    let filterFunctions = []
-    let jumpTarget = "1"
-
-    $: filteredData = applyFilters(data, filterFunctions, sorting.func)
-    $: rows = sliceData(filteredData, page, pageSize, sorting.func)
-    $: rowCount = filteredData?.length ?? 0
-    $: pageCount = Math.ceil(rowCount / pageSize)
-    $: maxPage = Math.max(pageCount - 1, 0)
-    $: jumpTarget = (page + 1).toString()
-
-    $: if (filteredData === null) {
-        console.warn("DataTable: data is not an array")
-    }
-
-    const prev = () => page = Math.max(0, page - 1)
-    const next = () => page = Math.min(maxPage, page + 1)
-
-    const updateSort = (func) => {
-        if (sorting.base === func) {
-            if (sorting.direction === "desc") {
-                sorting = noSort
-                return
-            }
-            sorting = {
-                func: (a, b) => -func(a, b),
-                base: func,
-                direction: "desc"
-            }
-            return
-        }
-        sorting = {
-            func,
-            base: func,
-            direction: "asc",
-        }
-    }
-    const updateFilter = (func, value) => {
-        if (func === null) {
-            return
-        }
-        filters.set(func, value)
-        filterFunctions = [
-            ...filters.entries()
-        ]
-    }
-
-    const context = writable({})
-    $: $context = {
-        updateSort,
-        fillHeader,
-        sorting,
-        updateFilter,
+    import wsx from "../wsx.js"
+
+    const {
+        data,
+        rowSize = 40,
+        headerSize = rowSize,
+        cols = "1fr",
+        gap = 2,
+        colGap = gap,
+        rowGap = gap,
+        header,
+        row,
         color,
-    }
-    setContext(dtContext, context)
+        fillHeader = false,
+        ...rest
+    } = $props()
 
-    const fire = createEventDispatcher()
-    const pass = handler$(
-        (row) => fire("row-click", row)
+    const rowPx = rowSize + rowGap
+    const height = $derived(
+        rowPx * data.length - rowGap
     )
+    const tableHeight = $derived(height + rowPx)
 
-    let scroller = null
-    $: if (scroller !== null && isNaN(page) === false) {
-        scroller.scrollTop = 0
+    let scrollPos = $state(0)
+    let scrollMax = $state(null)
+    let containerHeight = $state(null)
+    const scrollHandler = (evt) => {
+        scrollPos = container.scrollTop
     }
-    const jump = (evt) => {
-        if (evt.type === "keypress" && evt.key !== "Enter") {
-            return
-        }
-        const target = parseInt(evt.target.value)
-        if (isNaN(target) === true) {
-            jumpTarget = (page + 1).toString()
-            return
-        }
-        page = Math.max(
-            Math.min(jumpTarget - 1, maxPage),
-            0
+    const range = $derived(
+        itemRange({
+            scrollPos,
+            scrollMax,
+            containerHeight,
+            rowSize: rowSize + rowGap,
+            length: data.length,
+        })
+    )
+    let container = $state(null)
+
+    $effect(() => {
+        containerHeight = container.clientHeight
+        scrollMax = container.scrollHeight - containerHeight
+        on(container, "scroll", scrollHandler, { passive: true })
+        const observer = new ResizeObserver(
+            () => {
+                containerHeight = container.clientHeight
+                scrollMax = container.scrollHeight - containerHeight
+            }
         )
-        jumpTarget = (page + 1).toString()
-    }
+        observer.observe(container)
+        return () => observer.unobserve(container)
+    })
 
-    $: content = {
-        "fl.cross": "stretch",
-        p: "0px",
-        gap: "0px",
-        over: (scrollable === true) ? "auto" : null,
-    }
-    $: header = {
-        "h.min": rowHeight,
-        y: "0px",
-        z: "+10",
-        pos: (scrollable === true) ? "sticky" : null,
-    }
+    const displayed = $derived(range[2])
+    const displayedRows = $derived(
+        sliceData(data, range)
+    )
+    const tbodyHeight = $derived(displayRows.length * rowSize)
+
+    const tableWSX = $derived({
+        "$fill-header": fillHeader,
+        $color: color,
+        "gr.cols": cols,
+        "gap.col": `${colGap}px`,
+        "gap.row": `${rowGap}px`,
+        "@header-size": `${headerSize}px`,
+        "@row-size": `${rowSize}px`,
+        "$sticky-header": true,
+        w: "100%",
+        h: `${tableHeight}px`,
+        over: "visible",
+        con: "paint",
+    })
+    const tbodyWSX = $derived({
+        disp: "grid",
+        "gr.rows": "subgrid",
+        "gr.cols": "subgrid",
+        row: `span ${displayed}`,
+        tf: `translateY(${range[0] * rowPx}px)`,
+    })
+    const footerWSX = $derived({
+        h: "40px",
+        bg: "@background-element",
+        $color: color,
+        "b.y": "2px solid @ripple-base-color",
+        disp: "flex",
+        "fl-center": true,
+    })
+
+    const show = $derived({
+        start: Math.max(1, range[0] + 2),
+        end: Math.min(data.length, range[1] - 1),
+        total: data.length,
+    })
 </script>
 
-<Paper {color} h={height} card>
-    <ws-flex use:wsx={content} slot="content" bind:this={scroller}>
-        <Table data={rows} {color} {fillHeader} {...$$restProps} b.t.w="0px">
-            <tr use:wsx={header} slot="header">
-                <slot name="header">
-                    <th>No Header Defined</th>
-                </slot>
-            </tr>
-            <tr ws-x="[h {rowHeight}]" slot="row" let:row>
-                <slot name="row" {row}>
-                    <th>No Row Defined</th>
-                </slot>
-            </tr>
-            <tr ws-x="[h {rowHeight}]" slot="empty-row" />
-        </Table>
-    </ws-flex>
-    <Grid slot="footer" gr.cols="min-content min-content min-content 1fr"
-    rows="32px" b="1px solid @color" b.b.w="4px">
-        {#if pageCount > 0}
-            <Button on:click={prev} disabled={page === 0}>
-                <Icon name="caret-left" />
-            </Button>
-            <Button on:click={next} disabled={page === maxPage}>
-                <Icon name="caret-right" />
-            </Button>
-            <Text adorn t.ws="nowrap">
-                Page
-                <input ws-x="[b 1px solid @text-color-normal] [w 36px] [r 4px]
-                [h 24px] [bg.c transaprent] [t.a center] [m.l 4px] [m.r 4px]"
-                type="text" bind:value={jumpTarget}
-                on:keypress={jump} on:blur={jump} />
-                / {pageCount}
-            </Text>
-        {:else}
-            <div ws-x="[col span 3] [p.l 4px]">
-                No data to show
-            </div>
-        {/if}
-        <slot name="action" />
-    </Grid>
-</Paper>
+<Grid cols="1fr" rows="1fr min-content" pos="relative" {...rest} gap="0px">
+    <div ws-x="[over auto]" bind:this={container}>
+        <table use:wsx={tableWSX}>
+            <thead>
+                {@render header()}
+            </thead>
+            <tbody use:wsx={tbodyWSX}>
+                {#each displayedRows as dataRow}
+                    {#if dataRow === nullRow}
+                        <tr>
+                            <td ws-x="[col 1 / -1]"></td>
+                        </tr>
+                    {:else if dataRow === emptyRow}
+                        <tr></tr>
+                    {:else}
+                        {@render row(dataRow)}
+                    {/if}
+                {/each}
+            </tbody>
+        </table>
+    </div>
+
+    <div use:wsx={footerWSX}>
+        Showing: {show.start} - {show.end} of {show.total}
+    </div>
+</Grid>

package/src/composed/entry-button.svelte

@@ -1,31 +1,28 @@
-<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 }
+    import { handler$ } from "../handler$.js"
 
-    const send = createEventDispatcher()
+    const {
+        component,
+        props,
+        this:Wrapper = Modal,
+        "w!props":wrapperProps = {},
+        children,
+        onentry,
+        ...rest
+    } = $props()
 
     let element = null
     const open = handler$(
         async (props) => {
             const elemProps = (typeof props === "function") ? props() : props
             const result = await element.show(elemProps)
-            send("entry", result)
+            onentry?.(result)
         }
     )
 </script>
 
-<Button {...$$restProps} on:click={open(props)}>
-    <slot />
-</Button>
+<Button {...rest} onclick={open(props)} {children} />
 
-<svelte:component this={wrapper} {component} bind:this={element} />
+<Wrapper bind:this={element} {...rest} {component} />

package/src/control/button.svelte

@@ -1,35 +1,39 @@
-<svelte:options immutable />
-
 <script>
-    import wsx from "../wsx.mjs"
-    import variant from "../variant.mjs"
+    import wsx from "../wsx.js"
+    import variant from "../variant.js"
 
-    export let color = false
-    export let compact = false
-    export let ground = false
-    export let disabled
+    const {
+        color = false,
+        compact = false,
+        ground = false,
+        disabled,
 
-    export let fill = false
-    export let outline = false
-    export let flat = false
+        fill = false,
+        outline = false,
+        flat = false,
+        children,
+        onclick,
+        ...rest
+    } = $props()
 
-    // $: type = variant({ fill, outline, flat })
-    $: type = variant(
-        "$flat",
-        { fill },
-        { outline },
-        { flat }
+    const type = $derived(
+        variant(
+            "$flat",
+            { fill },
+            { outline },
+            { flat }
+        )
     )
 
-    $: wind = {
+    const wind = $derived({
         [type]: true,
         "$color": color,
         $compact: compact,
         $ground: ground,
-        ...$$restProps
-    }
+        ...rest
+    })
 </script>
 
-<button use:wsx={wind} {disabled} on:click|stopPropagation>
-    <slot />
+<button use:wsx={wind} {disabled} {onclick}>
+    {@render children?.()}
 </button>