@axel669/zephyr 1.0.0-beta.1 → 1.0.0-dev.1

package/src/component/alert.svelte

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

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

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

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

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

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

package/src/component/chip.svelte

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

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

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

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

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

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

package/src/component/dialog-element.svelte

@@ -1,36 +0,0 @@
-<script>
-    import { onMount } from "svelte"
-    import Modal from "./modal.svelte"
-
-    const {
-        options,
-        dialog,
-    } = $props()
-
-    let open = $state(false)
-
-    onMount(() => open = true)
-
-    const {
-        tIn,
-        tOut,
-        close,
-        ws = "",
-        persistent,
-        ...opts
-    } = options
-    const dialogClose = (value) => {
-        open = false
-        setTimeout(
-            () => close(value),
-            tOut.duration
-        )
-    }
-    const onClose = () => dialogClose(null)
-</script>
-
-<Modal bind:open inTime={0} outTime={tOut.duration} {onClose} {persistent}>
-    <ws-dialog in:tIn.func={tIn} out:tOut.func={tOut} data-ws={ws} tabindex="-1">
-        {@render dialog({ ...opts, close: dialogClose })}
-    </ws-dialog>
-</Modal>

package/src/component/dialog.svelte

@@ -1,43 +0,0 @@
-<script module>
-    import { fade } from "svelte/transition"
-
-    import DialogElement from "./dialog-element.svelte"
-    let stack = $state([])
-
-    const defTf = {
-        duration: 250,
-        func: fade
-    }
-
-    export const showDialog = (options) => new Promise(
-        (resolve) => {
-            const {
-                dialog = null,
-                transition = defTf,
-                transitionIn = transition,
-                transitionOut = transition,
-                ...opts
-            } = options
-            if (dialog === null) {
-                return false
-            }
-
-            const id = `${Math.random()}:${Date.now()}`
-            const close = (value) => {
-                stack = stack.filter(
-                    (dia) => dia[2] !== id
-                )
-                resolve(value)
-            }
-            stack.push([
-                dialog,
-                { ...opts, tIn: transitionIn, tOut: transitionOut, close },
-                id
-            ])
-        }
-    )
-</script>
-
-{#each stack as [dialog, options, id] (id)}
-    <DialogElement {options} {dialog} />
-{/each}

package/src/component/drawer.svelte

@@ -1,20 +0,0 @@
-<script>
-    import { fly } from "svelte/transition"
-    import Modal from "./modal.svelte"
-
-    let {
-        open = $bindable(false),
-        ws = "",
-        children,
-        onclose,
-        animTime = 250,
-        tr = fly,
-        trArgs = { x: "-100%" }
-    } = $props()
-</script>
-
-<Modal bind:open {onclose} {animTime}>
-    <ws-drawer transition:tr={{ ...trArgs, duration: animTime }} data-ws={ws}>
-        {@render children?.()}
-    </ws-drawer>
-</Modal>

package/src/component/flex.svelte

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

package/src/component/grid.svelte

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

package/src/component/hexagon-spinner.svelte

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

package/src/component/icon.svelte

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

package/src/component/link.svelte

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

package/src/component/modal.svelte

@@ -1,32 +0,0 @@
-<script>
-    let {
-        open = $bindable(false),
-        children,
-        ws = "",
-        onclose,
-        animTime,
-        inTime = animTime,
-        outTime = animTime,
-        persistent = false,
-    } = $props()
-
-    const vis = (node, opts) => {
-        const { duration } = opts
-        return {
-            duration,
-            css: (t, u) => "visibility: visible;"
-        }
-    }
-
-    const close = (evt) => {
-        open = false
-        onclose?.(evt)
-    }
-</script>
-
-{#if open === true}
-    <ws-modal open data-ws={ws} onclose={close} {persistent}
-    in:vis={{ duration: inTime }} out:vis={{ duration: outTime }}>
-        {@render children?.()}
-    </ws-modal>
-{/if}