@axel669/zephyr 0.5.5 → 1.0.0-beta.1

package/src/ws.js

@@ -0,0 +1,10 @@
+import * as ws from "@axel669/windstorm"
+
+export { ws }
+export const wsAttr = (node, value) => {
+    const update = (value) => {
+        node.setAttribute("data-ws", value)
+    }
+    update(value)
+    return { update }
+}

package/src/async/button.svelte

@@ -1,41 +0,0 @@
-<script>
-    import Button from "../control/button.svelte"
-    import Spinner from "../spinner/circle-spinner.svelte"
-    import { splitProps } from "../props.js"
-
-    const {
-        handler = null,
-        disabled,
-        ...rest
-    } = $props()
-
-    let running = $state(false)
-    const onclick = async (evt) => {
-        running = true
-        await handler(evt)
-        running = false
-    }
-
-    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 {...buttonProps} {onclick} />
-    {#if running === true}
-        <Spinner
-            size="unset"
-            pos="absolute"
-            x="50%" y="0px"
-            tf="translateX(-50%)"
-            h="100%"
-            {...prop["sp!"]}
-        />
-    {/if}
-</async-button>

package/src/changed.js

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

@@ -1,61 +0,0 @@
-<svelte:options immutable />
-
-<script context="module">
-    const sortIcons = {
-        "asc": "arrow-up",
-        "desc": "arrow-down",
-    }
-</script>
-
-<script>
-    import { getContext } from "svelte"
-
-    import Button from "../../control/button.svelte"
-    import Grid from "../../layout/grid.svelte"
-    import Icon from "../../info/icon.svelte"
-
-    import wsx from "../../wsx.js"
-    import { dtContext } from "../data-table.svelte"
-
-    export let sort = null
-    export let filter = null
-
-    const context = getContext(dtContext)
-
-    const setSort = () => $context.updateSort(sort)
-
-    let value = ""
-    $: $context.updateFilter(filter, value)
-
-    $: wind = {
-        ...$$restProps,
-        p: "0px",
-        sel: "none"
-    }
-    $: sortIcon =
-        ($context.sorting.base === sort)
-        ? sortIcons[$context.sorting.direction]
-        : "arrow-down-up"
-</script>
-
-<th use:wsx={wind} style="vertical-align: top;">
-    <Grid rows="40px min-content" p="0px" gap="0px">
-        {#if sort === null}
-            <div ws-x="[flex] [fl.cross center] [fl.main center]">
-                <slot />
-            </div>
-        {:else}
-            <Button compact r="0px" fill={$context.fillHeader}
-            t.wt="inherit" on:click={setSort} color={$context.color} ground>
-                <slot />
-                <Icon name={sortIcon} m.l="4px" t.sz="16px" />
-            </Button>
-        {/if}
-        {#if filter !== null}
-            <Grid gap="0px" p="0px" cols="min-content 1fr">
-                <Icon name="filter" />
-                <input type="text" ws-x="[w.min 20px] [outln:focus none]" bind:value />
-            </Grid>
-        {/if}
-    </Grid>
-</th>

package/src/composed/data-table.svelte

@@ -1,174 +0,0 @@
-<script module>
-    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 { on } from "svelte/events"
-
-    import Grid from "../layout/grid.svelte"
-
-    import wsx from "../wsx.js"
-
-    const {
-        data,
-        rowSize = 40,
-        headerSize = rowSize,
-        cols = "1fr",
-        gap = 2,
-        colGap = gap,
-        rowGap = gap,
-        header,
-        row,
-        color,
-        fillHeader = false,
-        ...rest
-    } = $props()
-
-    const rowPx = rowSize + rowGap
-    const height = $derived(
-        rowPx * data.length - rowGap
-    )
-    const tableHeight = $derived(height + rowPx)
-
-    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: 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
-            }
-        )
-        observer.observe(container)
-        return () => observer.unobserve(container)
-    })
-
-    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>
-
-<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,29 +0,0 @@
-<script>
-    import Button from "../control/button.svelte"
-    import Modal from "../layout/modal.svelte"
-    import { handler$ } from "../handler$.js"
-    import { splitProps } from "../props.js"
-
-    const {
-        children,
-        modal,
-        onentry,
-        onopen,
-        ...rest
-    } = $props()
-
-    const prop = splitProps(rest, "m!")
-
-    let element = null
-    const open = async (props) => {
-        onopen?.()
-        const result = await element.show()
-        onentry?.(result)
-    }
-</script>
-
-<Button {...prop.rest} onclick={open} {children} />
-
-<Modal bind:this={element} {...prop["m!"]}>
-    {@render modal()}
-</Modal>

package/src/composed/form.svelte

@@ -1,60 +0,0 @@
-<script context="module">
-    const identity = i => i
-    const alwaysGood = () => true
-</script>
-
-<script>
-    import Input from "../control/input.svelte"
-
-    export let fields
-    export let values
-    export let valid = {}
-
-    const refs = fields.reduce(
-        (refs, field) => {
-            refs[field.name] = {
-                vt: field.value.transform ?? identity,
-                t: field.value.out ?? identity,
-                v: field.value.validate ?? alwaysGood,
-                e: (value) => {
-                    if (valid[field.name] !== false) {
-                        return null
-                    }
-                    return field.value.error?.(value) ?? null
-                }
-            }
-            return refs
-        },
-        {}
-    )
-    let internal = fields.reduce(
-        (initial, field) => {
-            initial[field.name] = field.value.initial ?? ""
-            return initial
-        },
-        {}
-    )
-    let value = new Proxy(
-        {},
-        {
-            get(_, name) {
-                return internal[name]
-            },
-            set(_, name, value) {
-                const ref = refs[name]
-                internal[name] = ref.vt(value)
-                values = { ...values, [name]: ref.t(internal[name]) }
-                valid = { ...valid, [name]: ref.v(values[name]) }
-                return true
-            }
-        }
-    )
-</script>
-
-{#each fields as field}
-    <Input
-        {...field.props}
-        bind:value={value[field.name]}
-        error={refs[field.name].e(value[field.name])}
-    />
-{/each}

package/src/composed/table-functions.js

@@ -1,15 +0,0 @@
-export const filters = {
-    text: (propName) =>
-        (row, text) =>
-            row[propName]
-                .toLowerCase()
-                .includes(text.toLowerCase())
-}
-export const sorts = {
-    natural: (propName) => {
-        const comparitor = new Intl.Collator(undefined, { numeric: true })
-        return (a, b) => comparitor.compare(a[propName], b[propName])
-    },
-    number: (propName) =>
-        (a, b) => a[propName] - b[propName]
-}

package/src/control/button.svelte

@@ -1,39 +0,0 @@
-<script>
-    import wsx from "../wsx.js"
-    import variant from "../variant.js"
-
-    const {
-        color = false,
-        compact = false,
-        ground = false,
-        disabled,
-
-        fill = false,
-        outline = false,
-        flat = false,
-        children,
-        onclick,
-        ...rest
-    } = $props()
-
-    const type = $derived(
-        variant(
-            "$flat",
-            { fill },
-            { outline },
-            { flat }
-        )
-    )
-
-    const wind = $derived({
-        [type]: true,
-        "$color": color,
-        $compact: compact,
-        $ground: ground,
-        ...rest
-    })
-</script>
-
-<button use:wsx={wind} {disabled} {onclick}>
-    {@render children?.()}
-</button>

package/src/control/input.svelte

@@ -1,103 +0,0 @@
-<script>
-    import wsx, { none } from "../wsx.js"
-    import variant from "../variant.js"
-    import { splitProps } from "../props.js"
-
-    let {
-        type = "text",
-
-        flat = false,
-        lined = false,
-        linedFill = false,
-        outline = false,
-        label,
-        color = "@default",
-        disabled,
-
-        value = $bindable(""),
-        autocompleteOptions = null,
-
-        start,
-        end,
-        extra,
-
-        oninput,
-        ...rest
-    } = $props()
-
-    let input = $state(null)
-    export const focus = () => input.focus()
-
-    const id =
-        (autocompleteOptions === null)
-        ? null
-        : `${Math.random().toString(16)}_${Date.now()}`
-
-    const prop = splitProps(rest, "i!")
-
-    const variantStyle = $derived(
-        variant(
-            none,
-            { outline },
-            { linedFill },
-            { lined },
-            { flat }
-        )
-    )
-
-    const wind = $derived({
-        [variantStyle]: true,
-        "@@control": true,
-        "$color": color,
-        ...prop.rest,
-    })
-
-    const tag = $derived(
-        (type === "area") ? "textarea" : "input"
-    )
-
-    const update = (evt) => {
-        value = evt.target.value
-        oninput?.(evt)
-    }
-</script>
-
-<label use:wsx={wind}>
-    {#if label}
-        <span use:wsx={{ "$label": true }}>{label}</span>
-    {/if}
-    <svelte:element
-        this={tag}
-        {...prop.input}
-        {disabled}
-        {type}
-        {value}
-        oninput={update}
-        list={id}
-        bind:this={input}
-    />
-
-    {#if start}
-        <span use:wsx={{ "$start": true }}>
-            {@render start()}
-        </span>
-    {/if}
-    {#if end}
-        <span use:wsx={{ "$end": true }}>
-            {@render end()}
-        </span>
-    {/if}
-    {#if extra}
-        <span use:wsx={{ "$extra": true }}>
-            {@render extra()}
-        </span>
-    {/if}
-
-    {#if autocompleteOptions !== null}
-        <datalist {id}>
-            {#each autocompleteOptions as value}
-                <option {value}>{value}</option>
-            {/each}
-        </datalist>
-    {/if}
-</label>

package/src/control/label.svelte

@@ -1,49 +0,0 @@
-<script>
-    import wsx from "../wsx.js"
-    import variant from "../variant.js"
-
-    const {
-        color = false,
-        compact = false,
-        ground = false,
-        disabled,
-
-        button = false,
-        fill = false,
-        outline = false,
-        flat = false,
-        for:_for = "",
-
-        children,
-        ...rest
-    } = $props()
-
-    const type = $derived(
-        variant(
-            "$flat",
-            { fill },
-            { outline },
-            { flat }
-        )
-    )
-    const baseStyles = $derived(
-        (button === true)
-        ? {
-            "@@button": true,
-            [type]: true,
-            "$color": color,
-            $compact: compact,
-            $ground: ground,
-        }
-        : {}
-    )
-
-    const wind = $derived({
-        ...baseStyles,
-        ...rest
-    })
-</script>
-
-<label use:wsx={wind} {disabled} for={_for}>
-    {@render children?.()}
-</label>

package/src/control/link.svelte

@@ -1,47 +0,0 @@
-<script>
-    import wsx from "../wsx.js"
-    import variant from "../variant.js"
-
-    const {
-        button = false,
-        color = false,
-        compact = false,
-        ground = false,
-
-        href = "",
-        rel = "noreferrer",
-        target = null,
-
-        fill = false,
-        outline = false,
-        flat = false,
-
-        disabled = null,
-
-        onclick,
-        children,
-        ...rest
-    } = $props()
-
-    const type = $derived(
-        variant(
-            "$flat",
-            { fill },
-            { outline },
-            { flat }
-        )
-    )
-
-    const wind = $derived({
-        "@@button": button,
-        [type]: true,
-        "$color": color,
-        $compact: compact,
-        $ground: ground,
-        ...rest
-    })
-</script>
-
-<a {href} {target} {rel} disabled={disabled || null} use:wsx={wind} {onclick}>
-    {@render children?.()}
-</a>

package/src/control/radio-group.svelte

@@ -1,24 +0,0 @@
-<script>
-    import wsx from "../wsx.js"
-    import { handler$ } from "../handler$.js"
-
-    import Flex from "../layout/flex.svelte"
-
-    let {
-        layout = Flex,
-        options = [],
-        value = $bindable(),
-        ...rest
-    } = $props()
-
-    const Layout = $derived(layout)
-</script>
-
-<Layout {...rest}>
-    {#each options as {value: itemValue, label, disabled, ...wind}, index (itemValue)}
-        <label use:wsx={{"@@toggle": true, ...wind}} {disabled}>
-            <span>{label}</span>
-            <input type="radio" value={itemValue} bind:group={value} />
-        </label>
-    {/each}
-</Layout>