@axel669/zephyr 0.4.7 → 0.5.4

package/src/data-display/details.svelte

@@ -1,25 +1,33 @@
-<svelte:options immutable />
-
 <script>
-    import wsx from "../wsx.mjs"
+    import wsx from "../wsx.js"
+    import { splitProps } from "../props.js"
 
-    export let label
-    export let outline
-    export let color = "@default"
-    export let open = false
+    let {
+        label,
+        outline,
+        color = "@default",
+        open = false,
+        children,
+        ...rest
+    } = $props()
 
-    $: wind = {
+    const props = $derived(
+        splitProps(rest, "s!")
+    )
+    const wind = $derived({
         "$color": color,
         "$outline": outline,
-        ...$$restProps,
-    }
+        ...props.rest,
+    })
 </script>
 
 <details use:wsx={wind} bind:open>
-    <summary>
-        <slot name="label">
+    <summary use:wsx={props["s!"]}>
+        {#if typeof label === "string"}
             {label}
-        </slot>
+        {:else}
+            {@render label?.()}
+        {/if}
     </summary>
-    <slot />
+    {@render children?.()}
 </details>

package/src/data-display/popover.svelte

@@ -1,25 +1,28 @@
-<svelte:options immutable />
-
 <script>
     import { fade } from "svelte/transition"
-    import wsx from "../wsx.mjs"
+    import wsx from "../wsx.js"
 
-    let visible = false
+    let {
+        visible = $bindable(false),
+        content,
+        popover,
+        ...rest
+    } = $props()
     const show = () => visible = true
     const hide = () => visible = false
     const anim = { duration: 250 }
 
-    $: wind = {
+    const wind = $derived({
         $show: true,
-        ...$$restProps,
-    }
+        ...rest,
+    })
 </script>
 
 <ws-popover use:wsx={wind}>
-    <slot {show} />
+    {@render content?.(show)}
     {#if visible}
         <wind-content ws-x="[$content] [inset 0px]" transition:fade={anim}>
-            <slot name="content" {hide} />
+            {@render popover?.(hide)}
         </wind-content>
     {/if}
 </ws-popover>

package/src/data-display/progress.svelte

@@ -1,21 +1,25 @@
-<svelte:options immutable />
-
 <script>
-    import wsx from "../wsx.mjs"
+    import wsx from "../wsx.js"
 
-    export let value = 0
-    export let min = 0
-    export let max = 1
-    export let buffer = 0
-    export let busy = false
-    export let color = "@default"
+    const {
+        buffer = 0,
+        busy = false,
+        color = "@default",
+        max = 1,
+        min = 0,
+        value = 0,
+        ...rest
+    } = $props()
 
-    $: wind = {
+    const wind = $derived({
         "$color": color,
-        ...$$restProps,
-    }
+        ...rest,
+    })
 
-    $: busyStatus = (busy === true) ? { busy: true } : {}
+    const busyStatus = $derived(
+        (busy === true) ? { busy: true } : {}
+    )
 </script>
 
+<!-- svelte-ignore element_invalid_self_closing_tag -->
 <ws-progress use:wsx={wind} {...busyStatus} {min} {max} {value} {buffer} />

package/src/data-display/table.svelte

@@ -1,37 +1,49 @@
-<svelte:options immutable />
-
 <script>
-    import wsx from "../wsx.mjs"
+    import wsx from "../wsx.js"
 
-    export let color = "@default"
-    export let fillHeader = false
-    export let data = []
+    const {
+        color = "@default",
+        data = [],
+        fillHeader = false,
+        stickyHeader = false,
+        cols = "1fr",
+        header,
+        row,
+        emptyRow,
+        ...rest
+    } = $props()
 
-    $: wind = {
+    const wind = $derived({
         "$color": color,
-        "$header-fill": fillHeader,
-        ...$$restProps,
-    }
+        "$fill-header": fillHeader,
+        "$sticky-header": stickyHeader,
+        "gr.cols": cols,
+        ...rest,
+    })
 </script>
 
 <table use:wsx={wind}>
     <thead>
-        <slot name="header">
+        {#if header}
+            {@render header()}
+        {:else}
             <tr>
                 <th>No Header Template</th>
             </tr>
-        </slot>
+        {/if}
     </thead>
     <tbody>
-        {#each data as row, rowNum}
-            {#if row === undefined}
-                <slot name="empty-row" {rowNum} />
+        {#each data as rowValue, rowNum}
+            {#if rowValue === undefined}
+                {@render emptyRow(rowNum)}
             {:else}
-                <slot name="row" {row} {rowNum}>
+                {#if row}
+                    {@render row(rowValue, rowNum)}
+                {:else}
                     <tr>
                         <td>No Row Template</td>
                     </tr>
-                </slot>
+                {/if}
             {/if}
         {/each}
     </tbody>

package/src/data-display/tooltip.svelte

@@ -1,17 +1,19 @@
-<svelte:options immutable />
-
 <script>
-    import wsx from "../wsx.mjs"
+    import wsx from "../wsx.js"
 
-    export let text = ""
-    export let bottom = false
+    const {
+        text = "",
+        bottom = false,
+        children,
+        ...rest
+    } = $props()
 
-    $: wind = {
+    const wind = $derived({
         $bottom: bottom,
-        ...$$restProps,
-    }
+        ...rest,
+    })
 </script>
 
 <ws-tooltip ws-text={text} use:wsx={wind}>
-    <slot />
+    {@render children?.()}
 </ws-tooltip>

package/src/dialogs/alert.svelte

@@ -1,5 +1,3 @@
-<svelte:options immutable />
-
 <script>
     import Button from "../control/button.svelte"
     import Dialog from "../layout/dialog.svelte"
@@ -7,28 +5,36 @@
     import Text from "../text.svelte"
     import Titlebar from "../info/titlebar.svelte"
 
-    export let close
-    export let title = "Alert"
-    export let icon
-    export let message
-    export let okText = "OK"
-    export let color = "@primary"
+    const {
+        close,
+        color = "@primary",
+        icon,
+        message,
+        okText = "OK",
+        titleText = "Alert",
+    } = $props()
 </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>
 
-    <Button slot="footer" on:click={close} {color}>
+    {#snippet footer()}
+    <Button onclick={close} {color} ground>
         {okText}
     </Button>
+    {/snippet}
 </Dialog>

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"
@@ -39,26 +40,25 @@ 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 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 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>