@axel669/zephyr 0.4.6 → 0.5.0-alpha.0

package/package.json

@@ -1,40 +1,41 @@
-{
-  "name": "@axel669/zephyr",
-  "version": "0.4.6",
-  "description": "",
-  "main": "src/index.mjs",
-  "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"
-  },
-  "keywords": [],
-  "author": "",
-  "license": "MIT",
-  "dependencies": {
-    "@axel669/rollup-copy-static": "^0.2.0",
-    "@axel669/windstorm": "0.4.6"
-  },
-  "devDependencies": {
-    "@axel669/asuid": "^0.2.1",
-    "@axel669/ipsen": "0.4.0-beta.7",
-    "@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.1.6",
-    "svelte": "^4.2.7"
-  },
-  "files": [
-    "src/"
-  ],
-  "imports": {
-    "#lib": "./src/index.mjs",
-    "#comp/*": "./docsite/comp/*.svelte"
-  }
-}
+{
+  "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"
+  }
+}

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

@@ -48,8 +48,8 @@
 
     import Grid from "../layout/grid.svelte"
 
-    import wsx from "../wsx.mjs"
-    import { handler$, eventHandler$ } from "../handler$.mjs"
+    import wsx from "../wsx.js"
+    import { handler$, eventHandler$ } from "../handler$.js"
 
     export let color = "@primary"
     export let fillHeader = true
@@ -157,9 +157,9 @@
     }
 </script>
 
-<Paper {color} h={height} card>
+<Paper h={height} r="0px">
     <ws-flex use:wsx={content} slot="content" bind:this={scroller}>
-        <Table data={rows} {color} {fillHeader} {...$$restProps} b.t.w="0px">
+        <Table data={rows} {color} {fillHeader} b.t.w="2px" {...$$restProps}>
             <tr use:wsx={header} slot="header">
                 <slot name="header">
                     <th>No Header Defined</th>
@@ -174,12 +174,12 @@
         </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">
+    rows="32px" b="1px solid {color}" b.b.w="2px">
         {#if pageCount > 0}
-            <Button on:click={prev} disabled={page === 0}>
+            <Button on:click={prev} disabled={page === 0} ground>
                 <Icon name="caret-left" />
             </Button>
-            <Button on:click={next} disabled={page === maxPage}>
+            <Button on:click={next} disabled={page === maxPage} ground>
                 <Icon name="caret-right" />
             </Button>
             <Text adorn t.ws="nowrap">

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>

package/src/control/input.svelte

@@ -1,23 +1,31 @@
-<svelte:options immutable />
-
 <script>
-    import wsx, { none } from "../wsx.mjs"
-    import variant from "../variant.mjs"
+    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,
 
-    export let type = "text"
+        value = $bindable(""),
+        autocompleteOptions = null,
 
-    export let flat = false
-    export let lined = false
-    export let linedFill = false
-    export let outline = false
-    export let label
-    export let color = "@default"
-    export let disabled
+        start,
+        end,
+        extra,
 
-    export let value = ""
-    export let autocompleteOptions = null
+        oninput,
+        ...rest
+    } = $props()
 
-    let input = null
+    let input = $state(null)
     export const focus = () => input.focus()
 
     const id =
@@ -25,37 +33,33 @@
         ? null
         : `${Math.random().toString(16)}_${Date.now()}`
 
-    const update = (evt) => value = evt.target.value
-
-    $: restKeys = Object.keys($$restProps)
-    $: props = restKeys.reduce(
-        (props, key) => {
-            const [target, name] =
-                (key.startsWith("i-") === true)
-                ? [props.input, key.slice(2)]
-                : [props.wind, key]
-            target[name] = $$restProps[key]
-            return props
-        },
-        {wind: {}, input: {}}
-    )
+    const prop = splitProps(rest, "i!")
 
-    $: variantStyle = variant(
-        none,
-        { outline },
-        { linedFill },
-        { lined },
-        { flat }
+    const variantStyle = $derived(
+        variant(
+            none,
+            { outline },
+            { linedFill },
+            { lined },
+            { flat }
+        )
     )
 
-    $: wind = {
+    const wind = $derived({
         [variantStyle]: true,
         "@@control": true,
         "$color": color,
-        ...props.wind,
-    }
+        ...prop.rest,
+    })
+
+    const tag = $derived(
+        (type === "area") ? "textarea" : "input"
+    )
 
-    $: tag = (type === "area") ? "textarea" : "input"
+    const update = (evt) => {
+        value = evt.target.value
+        oninput?.(evt)
+    }
 </script>
 
 <label use:wsx={wind}>
@@ -64,37 +68,35 @@
     {/if}
     <svelte:element
         this={tag}
-        {...props.input}
+        {...prop.input}
         {disabled}
         {type}
         {value}
+        oninput={update}
         list={id}
-        on:focus
-        on:blur
-        on:input={update}
         bind:this={input}
     />
 
-    {#if $$slots.start}
+    {#if start}
         <span use:wsx={{ "$start": true }}>
-            <slot name="start" />
+            {@render start()}
         </span>
     {/if}
-    {#if $$slots.end}
+    {#if end}
         <span use:wsx={{ "$end": true }}>
-            <slot name="end" />
+            {@render end()}
         </span>
     {/if}
-    {#if $$slots.extra}
+    {#if extra}
         <span use:wsx={{ "$extra": true }}>
-            <slot name="extra" />
+            {@render extra()}
         </span>
     {/if}
 
     {#if autocompleteOptions !== null}
         <datalist {id}>
             {#each autocompleteOptions as value}
-                <option {value} />
+                <option {value}>{value}</option>
             {/each}
         </datalist>
     {/if}

package/src/control/label.svelte

@@ -1,29 +1,32 @@
-<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
+        button = false,
+        fill = false,
+        outline = false,
+        flat = false,
+        for:_for = "",
 
-    let _for = ""
-    export { _for as for }
-    export let button = false
+        children,
+        ...rest
+    } = $props()
 
-    $: type = variant(
-        "$flat",
-        { fill },
-        { outline },
-        { flat }
+    const type = $derived(
+        variant(
+            "$flat",
+            { fill },
+            { outline },
+            { flat }
+        )
     )
-    $: baseStyles =
+    const baseStyles = $derived(
         (button === true)
         ? {
             "@@button": true,
@@ -33,13 +36,14 @@
             $ground: ground,
         }
         : {}
+    )
 
-    $: wind = {
+    const wind = $derived({
         ...baseStyles,
-        ...$$restProps
-    }
+        ...rest
+    })
 </script>
 
 <label use:wsx={wind} {disabled} for={_for}>
-    <slot />
+    {@render children?.()}
 </label>

package/src/control/link.svelte

@@ -1,41 +1,47 @@
-<svelte:options immutable />
-
 <script>
-    import wsx from "../wsx.mjs"
-    import variant from "../variant.mjs"
-
-    export let button = false
-    export let color = false
-    export let compact = false
-    export let ground = false
-
-    export let href = ""
-    export let rel = "noreferrer"
-    export let target = null
-
-    export let fill = false
-    export let outline = false
-    export let flat = false
-
-    export let disabled = null
-
-    $: type = variant(
-        "$flat",
-        { fill },
-        { outline },
-        { flat }
+    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 }
+        )
     )
 
-    $: wind = {
+    const wind = $derived({
         "@@button": button,
         [type]: true,
         "$color": color,
         $compact: compact,
         $ground: ground,
-        ...$$restProps
-    }
+        ...rest
+    })
 </script>
 
-<a {href} {target} {rel} disabled={disabled || null} use:wsx={wind} on:click>
-    <slot />
+<a {href} {target} {rel} disabled={disabled || null} use:wsx={wind} {onclick}>
+    {@render children?.()}
 </a>