@axel669/zephyr 0.5.0-alpha.0 → 0.5.4

package/package.json

@@ -1,41 +1,42 @@
-{
-  "name": "@axel669/zephyr",
-  "version": "0.5.0-alpha.0",
-  "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.0",
-    "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",
-    "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"
-  }
-}
+{
+  "name": "@axel669/zephyr",
+  "version": "0.5.4",
+  "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.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",
+    "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"
+  }
+}

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/changed.js

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

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.js"
-    import { handler$, eventHandler$ } from "../handler$.js"
-
-    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,
+    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 h={height} r="0px">
-    <ws-flex use:wsx={content} slot="content" bind:this={scroller}>
-        <Table data={rows} {color} {fillHeader} b.t.w="2px" {...$$restProps}>
-            <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="2px">
-        {#if pageCount > 0}
-            <Button on:click={prev} disabled={page === 0} ground>
-                <Icon name="caret-left" />
-            </Button>
-            <Button on:click={next} disabled={page === maxPage} ground>
-                <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/custom-macros.js

@@ -0,0 +1,9 @@
+const head = document.head
+const macros = document.createElement("style")
+macros.setAttribute("ws-root", "")
+macros.innerHTML = `
+.ws-style {
+    --con: "contain: {$}";
+}
+`
+head.append(macros)

package/src/data-display/table.svelte

@@ -5,6 +5,8 @@
         color = "@default",
         data = [],
         fillHeader = false,
+        stickyHeader = false,
+        cols = "1fr",
         header,
         row,
         emptyRow,
@@ -13,7 +15,9 @@
 
     const wind = $derived({
         "$color": color,
-        "$header-fill": fillHeader,
+        "$fill-header": fillHeader,
+        "$sticky-header": stickyHeader,
+        "gr.cols": cols,
         ...rest,
     })
 </script>

package/src/dialogs/alert.svelte

@@ -12,7 +12,6 @@
         message,
         okText = "OK",
         titleText = "Alert",
-        ...rest
     } = $props()
 </script>
 

package/src/index.js

@@ -39,13 +39,12 @@ export { default as HexagonSpinner } from "./spinner/hexagon-spinner.svelte"
 export { default as Alert } from "./dialogs/alert.svelte"
 export { default as Confirm } from "./dialogs/confirm.svelte"
 
-// export { default as DataTable } from "./composed/data-table.svelte"
+export { default as DataTable } from "./composed/data-table.svelte"
 // export { default as TH } from "./composed/data-table/th.svelte"
 export { default as EntryButton } from "./composed/entry-button.svelte"
 // export { default as Form } from "./composed/form.svelte"
 
 export { default as AsyncButton } from "./async/button.svelte"
-// export { default as LoadZone } from "./async/load-zone.svelte"
 export { default as Suspend } from "./async/suspend.svelte"
 
 export { default as Route } from "./routing/route.svelte"

package/src/layout/drawer.svelte

@@ -47,8 +47,6 @@
         content,
         ...rest
     } = $props()
-    // export let height
-    // export let type = "menu"
 
     const animTime = getContext(modalContext)
 

package/src/layout/modal.svelte

@@ -23,7 +23,6 @@
         resolver = null
         modalProps = null
         Component = null
-        // visible.checked = false
         if (topClose !== close) {
             return
         }
@@ -47,7 +46,6 @@
         }
     )
 
-    // let visible = null
     const animationTime = writable(animTime)
     const wind = $derived({
         "@anim-time": $animationTime,

package/src/layout/paper.svelte

@@ -16,17 +16,6 @@
         ...rest
     } = $props()
 
-    // $: props = Object.entries($$restProps).reduce(
-    //     (p, [key, value]) => {
-    //         const [target, name] =
-    //             (key.startsWith("l!") === true)
-    //             ? [ p.layout, key.slice(2) ]
-    //             : [ p.paper, key ]
-    //         target[name] = value
-    //         return p
-    //     },
-    //     { layout: {}, paper: {} }
-    // )
     const props = $derived(
         splitProps(rest, "l!")
     )

package/src/props.js

@@ -1,24 +1,24 @@
-export const filterProps = (props, filter) => Object.entries(props).reduce(
-    (p, [name, value]) => {
-        if (name.startsWith(filter) === true) {
-            p[name.slice(filter.length)] = value
-        }
-        return p
-    },
-    {}
-)
-
-export const splitProps = (props, ...splits) => Object.entries(props).reduce(
-    (groups, [name, value]) => {
-        for (const split of splits) {
-            if (name.startsWith(split) === true) {
-                groups[split] = groups[split] ?? {}
-                groups[split][name.slice(split.length)] = value
-                return groups
-            }
-        }
-        groups.rest[name] = value
-        return groups
-    },
-    { rest: {} }
-)
+export const filterProps = (props, filter) => Object.entries(props).reduce(
+    (p, [name, value]) => {
+        if (name.startsWith(filter) === true) {
+            p[name.slice(filter.length)] = value
+        }
+        return p
+    },
+    {}
+)
+
+export const splitProps = (props, ...splits) => Object.entries(props).reduce(
+    (groups, [name, value]) => {
+        for (const split of splits) {
+            if (name.startsWith(split) === true) {
+                groups[split] = groups[split] ?? {}
+                groups[split][name.slice(split.length)] = value
+                return groups
+            }
+        }
+        groups.rest[name] = value
+        return groups
+    },
+    { rest: {} }
+)

package/src/routing/route.svelte

@@ -58,8 +58,5 @@
         {:else}
             {@render (content ?? children)?.(routeInfo, props)}
         {/if}
-        <!-- <slot {routeInfo}>
-            <svelte:component this={component} {...props} {routeInfo} />
-        </slot> -->
     {/key}
 {/if}

package/src/wind.js

@@ -0,0 +1,4 @@
+import "./custom-macros.js"
+import ws from "@axel669/windstorm"
+
+export default ws

package/src/wsx.js

@@ -1,4 +1,4 @@
-import ws from "@axel669/windstorm"
+import ws from "./wind.js"
 
 export const none = Symbol("none")
 export default (node, props) => {

package/src/async/load-zone.svelte

@@ -1,22 +0,0 @@
-<svelte:options immutable />
-
-<script>
-    import Spinner from "../spinner/hexagon-spinner.svelte"
-    export let source = null
-    export let message = "Loading"
-</script>
-
-{#if source !== null}
-    {#await source}
-        <slot name="loading">
-            <ws-flex ws-x="[fl-center]">
-                <span>{message}</span>
-                <Spinner size="100px" />
-            </ws-flex>
-        </slot>
-    {:then result}
-        <slot {result} />
-    {:catch error}
-        <slot name="error" {error} />
-    {/await}
-{/if}