@axel669/zephyr 0.4.6 → 0.5.0-alpha.0

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,29 @@
-<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
+        // visible.checked = false
         if (topClose !== close) {
             return
         }
@@ -31,30 +37,34 @@
     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
+    // 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,65 @@
-<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: {} }
+    // $: 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,48 +1,65 @@
-<script context="module">
+<script module>
+    const urlChars = "[\\w\\-\\%\\(\\)\\.@!\\*\\^\\$]"
     const urlPattern = (path, exact) => {
         const regexSource = path.replace(
             /:([\w\-]+)/g,
-            (_, name) => `\(?<${name}>[\\w\\-\\%]+\)`
+            (_, name) => `\(?<${name}>${urlChars}+\)`
         )
         if (exact === true) {
             return new RegExp(`(?<_path>^${regexSource})$`)
         }
-        return new RegExp(`(?<_path>^${regexSource})(((?<=\\/)[\\w\\-\\%])|\\/|$)`)
+        return new RegExp(`(?<_path>^${regexSource})(((?<=\\/)${urlChars})|\\/|$)`)
     }
 </script>
 
 <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}>
+        {#if Content !== null}
+            <Content {...props} {routeInfo} />
+        {:else}
+            {@render (content ?? children)?.(routeInfo, props)}
+        {/if}
+        <!-- <slot {routeInfo}>
             <svelte:component this={component} {...props} {routeInfo} />
-        </slot>
+        </slot> -->
     {/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>

package/src/spinner/circle-spinner.svelte

@@ -1,16 +1,18 @@
-<svelte:options immutable />
-
 <script>
-    import wsx from "../wsx.mjs"
+    import wsx from "../wsx.js"
 
-    export let size = "100px"
-    export let color = "@primary"
+    const {
+        size = "100px",
+        color = "@primary",
+        ...rest
+    } = $props()
 
-    $: wind = {
-        ...$$restProps,
+    const wind = $derived({
+        ...rest,
         "@size": size,
         "$color": color,
-    }
+    })
 </script>
 
+<!-- svelte-ignore element_invalid_self_closing_tag -->
 <ws-circle-spinner use:wsx={wind} style="aspect-ratio: 1 / 1;" />

package/src/spinner/hexagon-spinner.svelte

@@ -1,16 +1,18 @@
-<svelte:options immutable />
-
 <script>
-    import wsx from "../wsx.mjs"
+    import wsx from "../wsx.js"
 
-    export let size = "100px"
-    export let color = "@primary"
+    const {
+        size = "100px",
+        color = "@primary",
+        ...rest
+    } = $props()
 
-    $: wind = {
-        ...$$restProps,
+    const wind = $derived({
+        ...rest,
         "@size": size,
         "$color": color,
-    }
+    })
 </script>
 
+<!-- svelte-ignore element_invalid_self_closing_tag -->
 <ws-hexagon-spinner use:wsx={wind} style="aspect-ratio: 1 / 1;" />

package/src/text.svelte

@@ -1,20 +1,16 @@
-<svelte:options immutable />
-
 <script>
-    import wsx from "./wsx.mjs"
+    import wsx from "./wsx.js"
 
-    export let title = false
-    export let subtitle = false
-    export let adorn = false
+    const { adorn, subtitle, title, children, ...rest } = $props()
 
-    $: wind = {
+    const wind = $derived({
         "$title-text": title,
         "$subtitle-text": subtitle,
         "$adorn": adorn,
-        ...$$restProps
-    }
+        ...rest
+    })
 </script>
 
 <span use:wsx={wind}>
-    <slot />
+    {@render children?.()}
 </span>

package/src/composed/toast/message.svelte

@@ -1,33 +0,0 @@
-<script>
-    import { createEventDispatcher } from "svelte"
-
-    import Button from "../../control/button.svelte"
-    import Icon from "../../info/icon.svelte"
-    import Notification from "../../info/notification.svelte"
-    import Text from "../../text.svelte"
-
-    export let message = ""
-    export let icon = false
-    export let color = false
-    export let actionText = null
-
-    const dispatch = createEventDispatcher()
-    const dismiss = () => dispatch("action", null)
-    const respond = () => dispatch("action", true)
-</script>
-
-<Notification {color} on:click={dismiss}>
-    <Text slot="start" -adorn>
-        {#if icon !== false}
-            <Icon name={icon} />
-        {/if}
-    </Text>
-    <span>{message}</span>
-    <div slot="end" ws-x="[grid]">
-        {#if actionText}
-            <Button on:click={respond} r.l="0px">
-                {actionText}
-            </Button>
-        {/if}
-    </div>
-</Notification>

package/src/composed/toast.svelte

@@ -1,70 +0,0 @@
-<svelte:options immutable />
-
-<script context="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 { createEventDispatcher } from "svelte"
-    import { fade } from "svelte/transition"
-
-    import { eventHandler$ } from "../handler$.mjs"
-
-    import Toaster from "../info/toaster.svelte"
-
-    import ToastMessage from "./toast/message.svelte"
-
-    export let component = ToastMessage
-    export let position = "tc"
-
-    let items = []
-
-    const dispatch = createEventDispatcher()
-    const act = eventHandler$(
-        (evt, id, props) => {
-            delay.trigger(id)
-            dispatch(
-                "action",
-                { value: evt.detail, props }
-            )
-        }
-    )
-
-    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 = []
-</script>
-
-<Toaster {position} {...$$restProps}>
-    {#each items as {props, id} (id)}
-        <zephyr-toast-wrapper ws-x="[grid]" transition:fade={{duration: 200}}>
-            <svelte:component
-            this={component}
-            {...props}
-            on:action={act(id, props)}
-            />
-        </zephyr-toast-wrapper>
-    {/each}
-</Toaster>

package/src/info/notification.svelte

@@ -1,28 +0,0 @@
-<script>
-    import wsx from "../wsx.mjs"
-
-    export let color = false
-
-    $: wind = {
-        "$color": color,
-        ...$$restProps,
-    }
-</script>
-
-<!-- svelte-ignore a11y-click-events-have-key-events -->
-<!-- svelte-ignore a11y-interactive-supports-focus -->
-<ws-notification use:wsx={wind} on:click role="button">
-    {#if $$slots.start}
-        <div ws-x="[$start] [grid]">
-            <slot name="start" />
-        </div>
-    {/if}
-    <div ws-x="[$notif-text]">
-        <slot />
-    </div>
-    {#if $$slots.end}
-        <div ws-x="[$end] [grid]">
-            <slot name="end" />
-        </div>
-    {/if}
-</ws-notification>