@axel669/zephyr 0.4.7 → 0.5.4

package/src/info/toaster.svelte

@@ -1,14 +1,72 @@
+<script module>
+    const genID = () => `${Date.now()}:${Math.random().toString(16)}`
+
+    const delays = {}
+    const delay = ({time, action, id}) => {
+        const trigger = () => {
+            const info = delays[id]
+            clearTimeout(info.id)
+            action()
+            delete delays[id]
+        }
+        const timeoutID = setTimeout(trigger, time)
+        delays[id] = { trigger, id: timeoutID }
+    }
+    delay.trigger = (id) => delays[id].trigger()
+</script>
+
 <script>
-    import wsx from "../wsx.mjs"
+    import { fade } from "svelte/transition"
 
-    export let position = "tc"
+    import { eventHandler$ } from "../handler$.js"
+    import wsx from "../wsx.js"
 
-    $: wind = {
-        [`$${position}`]: true,
-        ...$$restProps,
+    import ToastMessage from "./toaster/message.svelte"
+
+    const {
+        message = ToastMessage,
+        position = "tc",
+        onaction,
+        ...rest
+    } = $props()
+
+    let items = $state([])
+
+    const act = eventHandler$(
+        (evt, id, props) => {
+            delay.trigger(id)
+            evt.props = props
+            onaction?.(evt)
+        }
+    )
+
+    export const show = (duration, props) => {
+        const id = genID()
+        items = [...items, { id, props }]
+        delay({
+            action: () => items = items.filter(
+                item => item.id !== id
+            ),
+            time: duration,
+            id,
+        })
     }
+    export const clear = () => items = []
+
+    const wind = $derived({
+        [`$${position}`]: true,
+        ...rest,
+    })
+    const Message = $derived(message)
 </script>
 
 <ws-toaster use:wsx={wind}>
-    <slot />
+    {#each items as {props, id} (id)}
+        <zephyr-toast-wrapper ws-x="[grid]" transition:fade={{duration: 200}}>
+            <Message
+            {...props}
+            onaction={act(id, {...props})}
+            />
+        </zephyr-toast-wrapper>
+    {/each}
 </ws-toaster>

package/src/layout/dialog.svelte

@@ -1,26 +1,24 @@
-<svelte:options immutable />
-
 <script>
     import { fade } from "svelte/transition"
 
-    import wsx from "../wsx.mjs"
+    import wsx from "../wsx.js"
 
     import Paper from "./paper.svelte"
 
+    const props = $props()
+
     const trick = (node, options) => ({
         delay: 0,
         duration: 250,
         css: () => "",
     })
+    const onclick = (evt) => {
+        evt.stopPropagation()
+    }
 </script>
 
-<!-- svelte-ignore a11y-click-events-have-key-events -->
-<!-- svelte-ignore a11y-no-noninteractive-element-interactions -->
-<wind-wrapper transition:trick ws-x="@@dialog [grid]" on:click|stopPropagation
-role="dialog">
-    <Paper {...$$props}>
-        <slot name="header" slot="header" />
-        <slot />
-        <slot name="footer" slot="footer" />
-    </Paper>
+<!-- svelte-ignore a11y_click_events_have_key_events -->
+<!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
+<wind-wrapper transition:trick ws-x="@@dialog [grid]" {onclick} role="dialog">
+    <Paper {...props} />
 </wind-wrapper>

package/src/layout/drawer.svelte

@@ -1,6 +1,4 @@
-<svelte:options immutable />
-
-<script context="module">
+<script module>
     const defs = {
         select: {
             "@@select": true,
@@ -15,35 +13,64 @@
             "@@action": true,
         }
     }
+    const parseTime = (timestring) => {
+        if (!timestring) {
+            return 200
+        }
+        const { base, scale } =
+            timestring.match(/(?<base>\d+)(?<scale>s|ms)/)?.groups ?? {}
+        if (base === undefined) {
+            return 200
+        }
+        const numeric = parseInt(base)
+        if (scale === "ms") {
+            return numeric
+        }
+        return numeric * 1000
+    }
 </script>
 
 <script>
-    import wsx from "../wsx.mjs"
+    import { getContext } from "svelte"
+
+    import wsx from "../wsx.js"
 
     import Paper from "./paper.svelte"
+    import { modalContext } from "./modal.svelte"
+
+    const {
+        height,
+        type = "menu",
+        children,
+        header,
+        footer,
+        content,
+        ...rest
+    } = $props()
 
-    export let height
-    export let type = "menu"
+    const animTime = getContext(modalContext)
 
+    // When Svelte removes things from the DOM they are removed immediately
+    // unless Svelte has a transition running. Adding this prevents the drawer
+    // from disappearing without first letting the built in animations run.
     const trick = (node, options) => ({
         delay: 0,
-        duration: 250,
+        duration: parseTime($animTime),
         css: () => "",
     })
 
-    $: container = {
+    const container = $derived({
         ...defs[type],
+        $show: true,
         h: (type === "select") ? height : "100%",
         grid: true,
-    }
+    })
+    const onclick = (evt) => evt.stopPropagation()
 </script>
-<!-- svelte-ignore a11y-click-events-have-key-events -->
-<!-- svelte-ignore a11y-interactive-supports-focus -->
-<wind-drawer-container use:wsx={container} on:click|stopPropagation
-role="menubar" transition:trick>
-    <Paper r="0px" {...$$restProps}>
-        <slot name="header" slot="header" />
-        <slot />
-        <slot name="footer" slot="footer" />
-    </Paper>
+
+<!-- svelte-ignore a11y_interactive_supports_focus -->
+<!-- svelte-ignore a11y_click_events_have_key_events -->
+<wind-drawer-container use:wsx={container} {onclick} role="menubar"
+transition:trick>
+    <Paper r="0px" {...rest} {header} {footer} {content} {children} />
 </wind-drawer-container>

package/src/layout/flex.svelte

@@ -1,22 +1,24 @@
-<svelte:options immutable />
-
 <script>
-    import wsx from "../wsx.mjs"
+    import wsx from "../wsx.js"
 
-    export let direction = false
-    export let cross = "stretch"
-    export let main = "start"
-    export let scrollable = false
+    const {
+        direction = false,
+        cross = "stretch",
+        main = "start",
+        scrollable = false,
+        children,
+        ...rest
+    } = $props()
 
-    $: wind = {
+    const wind = $derived({
         "fl.dir": direction,
         "fl.cross": cross,
         "fl.main": main,
         over: (scrollable === true) ? "auto" : null,
-        ...$$restProps
-    }
+        ...rest
+    })
 </script>
 
 <ws-flex use:wsx={wind}>
-    <slot />
+    {@render children?.()}
 </ws-flex>

package/src/layout/grid.svelte

@@ -1,18 +1,20 @@
-<svelte:options immutable />
-
 <script>
-    import wsx from "../wsx.mjs"
+    import wsx from "../wsx.js"
 
-    export let direction = false
-    export let cols = null
-    export let rows = null
-    export let autoCol = false
-    export let autoRow = false
-    export let colsFit = false
-    export let colsFill = false
-    export let scrollable = false
+    const {
+        direction = false,
+        cols = null,
+        rows = null,
+        autoCol = false,
+        autoRow = false,
+        colsFit = false,
+        colsFill = false,
+        scrollable = false,
+        children,
+        ...rest
+    } = $props()
 
-    $: wind = {
+    const wind = $derived({
         "gr.flow": direction,
         "gr.cols": cols?.join?.(" ") ?? cols ?? false,
         "gr.rows": rows?.join?.(" ") ?? rows ?? false,
@@ -21,10 +23,10 @@
         "gr.cols-fit": colsFit,
         "gr.cols-fill": colsFill,
         over: (scrollable === true) ? "auto" : null,
-        ...$$restProps
-    }
+        ...rest
+    })
 </script>
 
 <ws-grid use:wsx={wind}>
-    <slot />
+    {@render children?.()}
 </ws-grid>

package/src/layout/modal.svelte

@@ -1,23 +1,28 @@
-<svelte:options immutable />
-
-<script context="module">
+<script module>
     let topClose = null
+    export const modalContext = Symbol("modal context")
 </script>
 
 <script>
-    import { tick } from "svelte"
+    import { tick, setContext } from "svelte"
+    import { writable } from "svelte/store"
+
+    import wsx from "../wsx.js"
 
-    export let component
+    const {
+        component,
+        animTime = "200ms"
+    } = $props()
 
-    let modalProps = null
-    let resolver = null
-    let displayed = null
+    let modalProps = $state(null)
+    let resolver = $state(null)
+    let displayed = $state(null)
 
     const close = (value) => {
         resolver(value)
         resolver = null
         modalProps = null
-        visible.checked = false
+        Component = null
         if (topClose !== close) {
             return
         }
@@ -31,30 +36,33 @@
     export const show = (props) => new Promise(
         async (resolve) => {
             modalProps = props ?? {}
-            resolver = resolve
             topClose = topClose ?? close
+            Component = component
             await tick()
             setTimeout(
-                () => visible.checked = true,
+                () => resolver = resolve,
                 0
             )
         }
     )
 
-    let visible = null
+    const animationTime = writable(animTime)
+    const wind = $derived({
+        "@anim-time": $animationTime,
+        $show: resolver !== null,
+    })
+    let Component = $state(null)
+    setContext(modalContext, animationTime)
 </script>
 
-<input type="checkbox" bind:this={visible} ws-x="[disp none]" />
-{#if resolver !== null}
-    <!-- svelte-ignore a11y-click-events-have-key-events -->
-    <!-- svelte-ignore a11y-no-noninteractive-element-interactions -->
-    <ws-modal on:click={cancel} role="dialog">
-        <svelte:component
-        bind:this={displayed}
-        this={component}
-        {...modalProps}
-        {close}
-        {closeToTop}
-        />
-    </ws-modal>
-{/if}
+<!-- svelte-ignore a11y_click_events_have_key_events -->
+<!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
+<ws-modal onclick={cancel} role="dialog" use:wsx={wind}>
+    <Component
+    bind:this={displayed}
+    this={component}
+    {...modalProps}
+    {close}
+    {closeToTop}
+    />
+</ws-modal>

package/src/layout/paper.svelte

@@ -1,56 +1,54 @@
-<svelte:options immutable />
-
 <script>
     import Flex from "./flex.svelte"
-    import wsx from "../wsx.mjs"
+    import wsx from "../wsx.js"
+    import { splitProps } from "../props.js"
 
-    export let color
-    export let card = false
-    export let square = false
-    export let layout = Flex
-    export let scrollable = true
+    const {
+        color,
+        card = false,
+        square = false,
+        layout = Flex,
+        scrollable = true,
+        children,
+        content,
+        header,
+        footer,
+        ...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!")
     )
 
-    $: layoutProps = {
+    const layoutProps = $derived({
         over: scrollable ? "auto" : false,
         $content: true,
-        ...props.layout,
-    }
-    $: wind = {
+        ...props["l!"],
+    })
+    const wind = $derived({
         "$color": color,
         "$outline": card,
         r: square && "0px",
-        ...props.paper,
-    }
+        ...props.rest,
+    })
 </script>
 
 <ws-paper use:wsx={wind}>
-    {#if $$slots.header}
+    {#if header}
         <div ws-x="[$header] [grid] [p 0px]">
-            <slot name="header" />
+            {@render header()}
         </div>
     {/if}
-    {#if $$slots.content}
-        <slot name="content" />
+    {#if content}
+        {@render content()}
     {:else}
-        <svelte:component this={layout} {...layoutProps}>
-            <slot />
-        </svelte:component>
+        <Flex {...layoutProps}>
+            {@render children?.()}
+        </Flex>
     {/if}
-    {#if $$slots.footer}
+    {#if footer}
         <div ws-x="[$footer] [grid] [p 0px]">
-            <slot name="footer" />
+            {@render footer()}
         </div>
     {/if}
 </ws-paper>

package/src/layout/screen.svelte

@@ -1,6 +1,4 @@
-<svelte:options immutable />
-
-<script context="module">
+<script module>
     const ctxStack = Symbol("stack context")
     const ctxClose = Symbol("close context")
 </script>
@@ -9,9 +7,14 @@
     import { getContext, setContext } from "svelte"
     import { fly } from "svelte/transition"
 
-    import wsx from "../wsx.mjs"
+    import wsx from "../wsx.js"
 
-    export let width = false
+    const {
+        alignLeft = false,
+        width = false,
+        children,
+        ...rest
+    } = $props()
 
     const stack = getContext(ctxStack) ?? 0
     const animation = {
@@ -21,14 +24,15 @@
 
     setContext(ctxStack, stack + 1)
 
-    $: wind = {
+    const wind = $derived({
         "@stack": stack.toString(),
         "@screen-width": width,
         "bg.c": "transparent",
-        ...$$restProps
-    }
+        $left: alignLeft,
+        ...rest
+    })
 </script>
 
 <ws-screen use:wsx={wind} transition:fly={animation}>
-    <slot />
+    {@render children?.()}
 </ws-screen>

package/src/props.js

@@ -0,0 +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: {} }
+)

package/src/routing/route.svelte

@@ -1,4 +1,4 @@
-<script context="module">
+<script module>
     const urlChars = "[\\w\\-\\%\\(\\)\\.@!\\*\\^\\$]"
     const urlPattern = (path, exact) => {
         const regexSource = path.replace(
@@ -15,35 +15,48 @@
 <script>
     import { getContext, setContext } from "svelte"
 
-    import { ctx, resolve, route } from "./routing.js"
+    import { ctx, resolve, route } from "./routing.svelte.js"
 
-    export let path = ""
-    export let component = null
-    export let props = {}
-    export let exact = false
+    const {
+        path = "",
+        component = null,
+        props = {},
+        exact = false,
+        content,
+        children,
+    } = $props()
 
     const parent = getContext(ctx.parent) ?? "/"
     const fullPath = resolve(parent, path)
 
     setContext(ctx.parent, fullPath)
-    $: pattern = urlPattern(fullPath, exact)
-    $: match = $route.match(pattern)
-    $: routeParams = Object.fromEntries(
-        Object.entries({ ...match?.groups }).map(
-            ([key, value]) => [key, decodeURIComponent(value)]
+    const pattern = $derived(
+        urlPattern(fullPath, exact)
+    )
+    const match = $derived(
+        $route.match(pattern)
+    )
+    const routeParams = $derived(
+        Object.fromEntries(
+            Object.entries({ ...match?.groups }).map(
+                ([key, value]) => [key, decodeURIComponent(value)]
+            )
         )
     )
-    $: routeInfo = {
+    const routeInfo = $derived({
         params: routeParams,
         match: routeParams._path,
         route: $route,
-    }
+    })
+    const Content = $derived(component)
 </script>
 
 {#if match !== null}
     {#key routeParams._path}
-        <slot {routeInfo}>
-            <svelte:component this={component} {...props} {routeInfo} />
-        </slot>
+        {#if Content !== null}
+            <Content {...props} {routeInfo} />
+        {:else}
+            {@render (content ?? children)?.(routeInfo, props)}
+        {/if}
     {/key}
 {/if}

package/src/routing/{routing.js → routing.svelte.js}

@@ -1,7 +1,7 @@
 import { onMount, getContext } from "svelte"
 import { writable, derived } from "svelte/store"
 
-import { hash } from "../hash.js"
+import { hash } from "../hash.svelte.js"
 
 export const route = derived(
     hash,
@@ -12,6 +12,15 @@ export const route = derived(
         return hash
     }
 )
+route.set = (path) => {
+    hash.set(path)
+}
+// export const route = $derived(
+//     hash.startsWith("/") === false ? `/${hash}` : hash
+// )
+// $effect(
+//     () => hash = route
+// )
 
 export const ctx = {
     router: Symbol("Router Context"),

package/src/routing/title.svelte

@@ -1,9 +1,8 @@
-<script context="module">
+<script module>
     import { writable } from "svelte/store"
 
-    import { stackStore } from "./routing.js"
+    import { stackStore } from "./routing.svelte.js"
 
-    // const stack = writable([])
     const stack = stackStore()
 
     const updateTitle = (format, data) => {
@@ -17,10 +16,13 @@
 
 <script>
     import { onMount } from "svelte"
-    export let data = ""
-    export let format = null
+
+    const {
+        data = "",
+        format = null,
+    } = $props()
 
     stack.push(data)
 
-    $: updateTitle(format, $stack)
+    $effect(() => updateTitle(format, $stack))
 </script>