@axel669/zephyr 0.4.7 → 0.5.0-alpha.0

package/src/dialogs/confirm.svelte

@@ -1,5 +1,3 @@
-<svelte:options immutable />
-
 <script>
     import Button from "../control/button.svelte"
     import Dialog from "../layout/dialog.svelte"
@@ -8,38 +6,46 @@
     import Text from "../text.svelte"
     import Titlebar from "../info/titlebar.svelte"
 
-    import { handler$ } from "../handler$.mjs"
+    import { handler$ } from "../handler$.js"
 
-    export let close
-    export let title = "Confirm"
-    export let icon
-    export let message
-    export let okText = "OK"
-    export let cancelText = "Cancel"
-    export let color = "@primary"
+    const {
+        close,
+        titleText = "Confirm",
+        icon,
+        message,
+        okText = "OK",
+        cancelText = "Cancel",
+        color = "@primary",
+    } = $props()
 
     const cls = handler$(close)
 </script>
 
 <Dialog card {color}>
-    <Titlebar slot="header" {color}>
-        <Text title slot="title">
+    {#snippet header()}
+    <Titlebar {color}>
+        {#snippet title()}
+        <Text title>
             <Icon name={icon}>
-                {title}
+                {titleText}
             </Icon>
         </Text>
+        {/snippet}
     </Titlebar>
+    {/snippet}
 
     <Text>
         {message}
     </Text>
 
-    <Grid cols="1fr 1fr" slot="footer" p="0px">
-        <Button on:click={cls(false)} color="@danger">
+    {#snippet footer()}
+    <Grid cols="1fr 1fr" p="0px">
+        <Button onclick={cls(false)} color="@danger" ground>
             {cancelText}
         </Button>
-        <Button on:click={cls(true)} color="@secondary">
+        <Button onclick={cls(true)} color="@secondary" ground>
             {okText}
         </Button>
     </Grid>
+    {/snippet}
 </Dialog>

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

@@ -1,5 +1,14 @@
 import { readable } from "svelte/store"
 
+// export const hash = $state(location.hash.slice(1))
+// window.addEventListener(
+//     "popstate",
+//     () => hashValue = location.hash.slice(1)
+// )
+// $effect(
+//     () => location.hash = hash
+// )
+
 export const hash = readable(
     location.hash.slice(1),
     (set) => {

package/src/{index.mjs → index.js}

@@ -17,9 +17,10 @@ export { default as Progress } from "./data-display/progress.svelte"
 export { default as Table } from "./data-display/table.svelte"
 export { default as Tooltip } from "./data-display/tooltip.svelte"
 
+export { default as ElementToaster } from "./info/element-toaster.svelte"
 export { default as Icon } from "./info/icon.svelte"
-export { default as Notification } from "./info/notification.svelte"
 export { default as Titlebar } from "./info/titlebar.svelte"
+export { default as Toast } from "./info/toast.svelte"
 export { default as Toaster } from "./info/toaster.svelte"
 
 export { default as Dialog } from "./layout/dialog.svelte"
@@ -38,27 +39,27 @@ export { default as HexagonSpinner } from "./spinner/hexagon-spinner.svelte"
 export { default as Alert } from "./dialogs/alert.svelte"
 export { default as Confirm } from "./dialogs/confirm.svelte"
 
-export { default as DataTable } from "./composed/data-table.svelte"
-export { default as TH } from "./composed/data-table/th.svelte"
-export { default as ElementToast } from "./composed/element-toast.svelte"
+// export { default as DataTable } from "./composed/data-table.svelte"
+// export { default as TH } from "./composed/data-table/th.svelte"
 export { default as EntryButton } from "./composed/entry-button.svelte"
-export { default as Form } from "./composed/form.svelte"
-export { default as Toast } from "./composed/toast.svelte"
+// export { default as Form } from "./composed/form.svelte"
 
 export { default as AsyncButton } from "./async/button.svelte"
-export { default as LoadZone } from "./async/load-zone.svelte"
+// export { default as LoadZone } from "./async/load-zone.svelte"
+export { default as Suspend } from "./async/suspend.svelte"
 
 export { default as Route } from "./routing/route.svelte"
 export { default as Title } from "./routing/title.svelte"
 
-export { default as wsx } from "./wsx.mjs"
+export { default as wsx } from "./wsx.js"
 
-export { hash } from "./hash.js"
+export { hash } from "./hash.svelte.js"
 
 export {
     route,
     stackStore,
     relpath,
-} from "./routing/routing.js"
-export * from "./handler$.mjs"
+} from "./routing/routing.svelte.js"
+export * from "./handler$.js"
 export * from "./composed/table-functions.js"
+export * from "./changed.js"

package/src/{composed/element-toast.svelte → info/element-toaster.svelte}

@@ -1,6 +1,4 @@
-<svelte:options immutable />
-
-<script context="module">
+<script module>
     const genID = () => `${Date.now()}:${Math.random().toString(16)}`
 
     const delays = {}
@@ -18,40 +16,59 @@
 
     const macros = {
         top: {
+            x: "50%",
+            tf: "translateX(-50%)",
             "-y": "100%",
             flex: "column-reverse",
         },
         bottom: {
+            x: "50%",
+            tf: "translateX(-50%)",
             "y": "100%",
             flex: "column"
         },
+        left: {
+            y: "50%",
+            tf: "translateY(-50%)",
+            "-x": "100%",
+            flex: "row-reverse"
+        },
+        right: {
+            y: "50%",
+            tf: "translateY(-50%)",
+            "x": "100%",
+            flex: "row"
+        },
     }
 </script>
 
 <script>
-    import { createEventDispatcher } from "svelte"
     import { fade } from "svelte/transition"
 
-    import { eventHandler$ } from "../handler$.mjs"
-    import wsx from "../wsx.mjs"
+    import { eventHandler$ } from "../handler$.js"
+    import wsx from "../wsx.js"
 
-    import Toaster from "../info/toaster.svelte"
+    import ToastMessage from "./toaster/message.svelte"
 
-    import ToastMessage from "./toast/message.svelte"
+    const {
+        component = ToastMessage,
+        position = "top",
+        content,
+        onaction,
+        ...rest
+    } = $props()
 
-    export let component = ToastMessage
-    export let position = "top"
+    let items = $state([])
 
-    let items = []
-
-    const dispatch = createEventDispatcher()
     const act = eventHandler$(
         (evt, id, props) => {
             delay.trigger(id)
-            dispatch(
-                "action",
-                { value: evt.detail, props }
-            )
+            evt.props = props
+            onaction?.(evt)
+            // dispatch(
+            //     "action",
+            //     { value: evt.detail, props }
+            // )
         }
     )
 
@@ -68,27 +85,24 @@
     }
     export const clear = () => items = []
 
-
-    $: wind = {
+    const wind = $derived({
         gap: "8px",
         pos: "absolute",
-        x: "50%",
         z: "50",
-        tf: "translateX(-50%)",
         ...macros[position],
-        ...$$restProps,
-    }
+        ...rest,
+    })
+    const Message = $derived(component)
 </script>
 
 <zephyr-element-toaster ws-x="[disp inline-grid] [pos relative]">
-    <slot {show} />
+    {@render content?.(show)}
     <zephyr-element-toast-messages use:wsx={wind}>
         {#each items as {props, id} (id)}
             <zephyr-toast-wrapper ws-x="[grid]" transition:fade={{duration: 200}}>
-                <svelte:component
-                this={component}
+                <Message
                 {...props}
-                on:action={act(id, props)}
+                onaction={act(id, props)}
                 />
             </zephyr-toast-wrapper>
         {/each}

package/src/info/icon.svelte

@@ -1,9 +1,9 @@
 <script>
-    import wsx from "../wsx.mjs"
+    import wsx from "../wsx.js"
 
-    export let name
+    const { name, children, ...rest } = $props()
 </script>
 
-<ws-icon class="bi-{name}" use:wsx={$$restProps}>
-    <slot />
+<ws-icon data-icon={name} use:wsx={rest}>
+    {@render children?.()}
 </ws-icon>

package/src/info/titlebar.svelte

@@ -1,34 +1,40 @@
 <script>
-    import wsx from "../wsx.mjs"
+    import wsx from "../wsx.js"
 
-    export let color
-    export let fill = false
+    const {
+        color,
+        fill = false,
+        title,
+        menu,
+        action,
+        ...rest
+    } = $props()
 
-    $: titleProps = {
+    const titleProps = $derived({
         "$color": color,
         "$fill": fill,
         $title: true,
-    }
-    $: wind = {
-        ...$$restProps,
-    }
+    })
+    const wind = $derived({
+        ...rest,
+    })
 </script>
 
 <ws-titlebar use:wsx={wind}>
-    {#if $$slots.title}
+    {#if title}
         <div use:wsx={titleProps}>
-            <slot name="title" />
+            {@render title()}
         </div>
     {/if}
 
-    {#if $$slots.menu}
+    {#if menu}
         <div ws-x="[$menu] [grid] [p 0px]">
-            <slot name="menu" />
+            {@render menu()}
         </div>
     {/if}
-    {#if $$slots.action}
+    {#if action}
         <div ws-x="[$action] [grid] [p 0px]">
-            <slot name="action" />
+            {@render action()}
         </div>
     {/if}
 </ws-titlebar>

package/src/info/toast.svelte

@@ -0,0 +1,35 @@
+<script>
+    import wsx from "../wsx.js"
+
+    const {
+        color,
+        children,
+        start,
+        end,
+        onclick,
+        ...rest
+    } = $props()
+
+    const wind = $derived({
+        "$color": color,
+        ...rest,
+    })
+</script>
+
+<!-- svelte-ignore a11y_interactive_supports_focus -->
+<!-- svelte-ignore a11y_click_events_have_key_events -->
+<ws-toast use:wsx={wind} {onclick} role="button">
+    {#if start}
+        <div ws-x="[$start] [grid]">
+            {@render start()}
+        </div>
+    {/if}
+    <div ws-x="[$notif-text]">
+        {@render children?.()}
+    </div>
+    {#if end}
+        <div ws-x="[$end] [grid]">
+            {@render end()}
+        </div>
+    {/if}
+</ws-toast>

package/src/info/toaster/message.svelte

@@ -0,0 +1,42 @@
+<script>
+    import Button from "../../control/button.svelte"
+    import Icon from "../icon.svelte"
+    import Toast from "../toast.svelte"
+    import Text from "../../text.svelte"
+
+    const {
+        message = "",
+        icon = false,
+        color = false,
+        actionText = null,
+        onaction,
+    } = $props()
+
+    const dismiss = () => onaction({ value: null })
+    const respond = (evt) => {
+        evt.stopPropagation()
+        onaction({ value: true })
+    }
+</script>
+
+<Toast {color} onclick={dismiss}>
+    {#snippet start()}
+    <Text adorn>
+        {#if icon !== false}
+            <Icon name={icon} />
+        {/if}
+    </Text>
+    {/snippet}
+
+    <span>{message}</span>
+
+    {#snippet end()}
+    <div ws-x="[grid]">
+        {#if actionText}
+            <Button onclick={respond} r.l="0px" ground>
+                {actionText}
+            </Button>
+        {/if}
+    </div>
+    {/snippet}
+</Toast>

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,66 @@
             "@@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"
 
-    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>