@axel669/zephyr 0.3.8 → 0.4.4-beta.0

package/src/control/tabs.svelte

@@ -1,28 +1,19 @@
 <svelte:options immutable />
 
 <script>
+    import { writable } from "svelte/store"
+
     import wsx from "../wsx.mjs"
     import { handler$ } from "../handler$.mjs"
 
-    export let color = "@primary"
+    export let color = "@default"
     export let options = []
     export let vertical = false
-    export let solid = false
+    export let fill = false
     export let value
 
-    $: index = options.findIndex(item => item.value === value)
-
-    const set = handler$(
-        (next) => {
-            if (value === next) {
-                return
-            }
-            value = next
-        }
-    )
-
     $: wind = {
-        "$solid": solid,
+        "$fill": fill,
         "$color": color,
         $vert: vertical,
         ...$$restProps,
@@ -32,12 +23,9 @@
 <!-- svelte-ignore a11y-click-events-have-key-events -->
 <ws-tabs use:wsx={wind} role="tablist">
     {#each options as tab, i}
-        <!-- svelte-ignore a11y-interactive-supports-focus -->
-        <ws-tab use:wsx={{"$tab-selected": index === i}}
-        on:click={set(tab.value)} role="tab">
-            <slot {tab} selected={index === i}>
-                {tab.label}
-            </slot>
-        </ws-tab>
+        <label>
+            <input type="radio" value={tab.value} bind:group={value} />
+            <ws-tab>{tab.label}</ws-tab>
+        </label>
     {/each}
 </ws-tabs>

package/src/control/toggle.svelte

@@ -13,14 +13,14 @@
     export let reverse = false
 
     $: container = {
-        "@toggle": true,
+        "@@toggle": true,
         "$flat": flat,
         "$color": color,
         "fl.dir": reverse ? "row-reverse" : false,
         ...$$restProps,
     }
     $: input = {
-        "@switch": checkbox === false
+        "@@switch": checkbox === false
     }
 
     const updateGroup = (checked) => {

package/src/data-display/avatar.svelte

@@ -18,7 +18,10 @@
 
 <ws-avatar use:wsx={wind}>
     {#if image !== null}
-        <img src={image} {alt} />
+        <!-- svelte-ignore a11y-missing-attribute -->
+        <object data={image} type="image/png">
+            {alt}
+        </object>
     {:else}
         {text}
     {/if}

package/src/data-display/badge.svelte

@@ -3,7 +3,7 @@
 <script>
     import wsx from "../wsx.mjs"
 
-    export let color = "@default"
+    export let color = null
     export let text = ""
 
     $: wind = { "$color": color, ...$$restProps }

package/src/data-display/chip.svelte

@@ -16,7 +16,7 @@
     $: wind = {
         [type]: true,
         "$color": color,
-        $click: clickable,
+        "@@click": clickable,
         ...$$restProps
     }
 </script>

package/src/data-display/popover.svelte

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

package/src/data-display/progress.svelte

@@ -1,27 +1,27 @@
-<svelte:options immutable />
-
-<script>
-    import wsx from "../wsx.mjs"
-
-    export let value = 0
-    export let max = 1
-    export let color = "default"
-    export let outline = false
-    export let row = false
-    export let label = null
-
-    $: wind = {
-        "@progress": true,
-        "$outline": outline,
-        "$color": color,
-        $row: row,
-        ...$$restProps,
-    }
-</script>
-
-<label use:wsx={wind}>
-    {#if label}
-        <span ws-x="[$progress-label] [t-ws nowrap]">{label}</span>
-    {/if}
-    <progress {value} {max} />
-</label>
+<svelte:options immutable />
+
+<script>
+    import wsx from "../wsx.mjs"
+
+    export let value = 0
+    export let max = 1
+    export let color = "default"
+    export let outline = false
+    export let row = false
+    export let label = null
+
+    $: wind = {
+        "@@progress": true,
+        "$outline": outline,
+        "$color": color,
+        $row: row,
+        ...$$restProps,
+    }
+</script>
+
+<label use:wsx={wind}>
+    {#if label}
+        <span ws-x="[$progress-label] [t.ws nowrap]">{label}</span>
+    {/if}
+    <progress {value} {max} />
+</label>

package/src/data-display/table.svelte

@@ -3,7 +3,7 @@
 <script>
     import wsx from "../wsx.mjs"
 
-    export let color = false
+    export let color = "@default"
     export let fillHeader = false
     export let data = []
 

package/src/dialogs/confirm.svelte

@@ -34,11 +34,11 @@
         {message}
     </Text>
 
-    <Grid cols="1fr 1fr" slot="footer" pad="0px">
-        <Button on:click={cls(false)} color="danger">
+    <Grid cols="1fr 1fr" slot="footer" p="0px">
+        <Button on:click={cls(false)} color="@danger">
             {cancelText}
         </Button>
-        <Button on:click={cls(true)} color="secondary">
+        <Button on:click={cls(true)} color="@secondary">
             {okText}
         </Button>
     </Grid>

package/src/hash.js

@@ -1,14 +1,14 @@
-import { readable } from "svelte/store"
-
-export const hash = readable(
-    location.hash.slice(1),
-    (set) => {
-        setInterval(
-            () => set(location.hash.slice(1)),
-            50
-        )
-    }
-)
-hash.set = (value) => {
-    location.hash = value
-}
+import { readable } from "svelte/store"
+
+export const hash = readable(
+    location.hash.slice(1),
+    (set) => {
+        window.addEventListener(
+            "popstate",
+            () => set(location.hash.slice(1))
+        )
+    }
+)
+hash.set = (value) => {
+    location.hash = value
+}

package/src/index.mjs

@@ -1,7 +1,8 @@
 export { default as Button } from "./control/button.svelte"
 export { default as Input } from "./control/input.svelte"
+export { default as Label } from "./control/label.svelte"
 export { default as Link } from "./control/link.svelte"
-export { default as Radio } from "./control/radio.svelte"
+export { default as RadioGroup } from "./control/radio-group.svelte"
 export { default as Select } from "./control/select.svelte"
 export { default as Tabs } from "./control/tabs.svelte"
 export { default as Toggle } from "./control/toggle.svelte"
@@ -40,14 +41,23 @@ 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 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 AsyncButton } from "./async/button.svelte"
 export { default as LoadZone } from "./async/load-zone.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 { hash } from "./hash.js"
 
+export {
+    route,
+    stackStore,
+    relpath,
+} from "./routing/routing.js"
 export * from "./handler$.mjs"
 export * from "./composed/table-functions.js"

package/src/info/notification.svelte

@@ -1,16 +1,28 @@
-<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">
-    <slot />
-</ws-notification>
+<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>

package/src/info/titlebar.svelte

@@ -4,15 +4,32 @@
     export let color
     export let fill = false
 
-    $: wind = {
+    $: titleProps = {
         "$color": color,
         "$fill": fill,
-        ...$$restProps
+        $title: true,
+    }
+    $: wind = {
+        ...$$restProps,
+        "gr.cols": "auto 1fr auto"
     }
 </script>
 
 <ws-titlebar use:wsx={wind}>
-    <slot name="menu" />
-    <slot name="title" />
-    <slot name="action" />
+    {#if $$slots.title}
+        <div use:wsx={titleProps}>
+            <slot name="title" />
+        </div>
+    {/if}
+
+    {#if $$slots.menu}
+        <div ws-x="[$menu] [grid] [p 0px]">
+            <slot name="menu" />
+        </div>
+    {/if}
+    {#if $$slots.action}
+        <div ws-x="[$action] [grid] [p 0px]">
+            <slot name="action" />
+        </div>
+    {/if}
 </ws-titlebar>

package/src/layout/dialog.svelte

@@ -16,7 +16,7 @@
 
 <!-- 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
+<wind-wrapper transition:trick ws-x="@@dialog [grid]" on:click|stopPropagation
 role="dialog">
     <Paper {...$$props}>
         <slot name="header" slot="header" />

package/src/layout/drawer.svelte

@@ -1,49 +1,49 @@
-<svelte:options immutable />
-
-<script context="module">
-    const defs = {
-        select: {
-            "@select": true,
-            "w.min": "35vw",
-            grid: true,
-            over: "hidden"
-        },
-        menu: {
-            "@menu": true,
-        },
-        action: {
-            "@action": true,
-        }
-    }
-</script>
-
-<script>
-    import wsx from "../wsx.mjs"
-
-    import Paper from "./paper.svelte"
-
-    export let height
-    export let type = "menu"
-
-    const trick = (node, options) => ({
-        delay: 0,
-        duration: 250,
-        css: () => "",
-    })
-
-    $: container = {
-        ...defs[type],
-        h: (type === "select") ? height : "100%",
-        grid: true,
-    }
-</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 {...$$restProps}>
-        <slot name="header" slot="header" />
-        <slot />
-        <slot name="footer" slot="footer" />
-    </Paper>
-</wind-drawer-container>
+<svelte:options immutable />
+
+<script context="module">
+    const defs = {
+        select: {
+            "@@select": true,
+            "w.min": "35vw",
+            grid: true,
+            over: "hidden"
+        },
+        menu: {
+            "@@menu": true,
+        },
+        action: {
+            "@@action": true,
+        }
+    }
+</script>
+
+<script>
+    import wsx from "../wsx.mjs"
+
+    import Paper from "./paper.svelte"
+
+    export let height
+    export let type = "menu"
+
+    const trick = (node, options) => ({
+        delay: 0,
+        duration: 250,
+        css: () => "",
+    })
+
+    $: container = {
+        ...defs[type],
+        h: (type === "select") ? height : "100%",
+        grid: true,
+    }
+</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>
+</wind-drawer-container>

package/src/layout/flex.svelte

@@ -4,8 +4,6 @@
     import wsx from "../wsx.mjs"
 
     export let direction = false
-    export let pad = false
-    export let gap = false
     export let cross = "stretch"
     export let main = "start"
     export let scrollable = false
@@ -14,8 +12,6 @@
         "fl.dir": direction,
         "fl.cross": cross,
         "fl.main": main,
-        p: pad,
-        gap: gap,
         over: (scrollable === true) ? "auto" : null,
         ...$$restProps
     }

package/src/layout/grid.svelte

@@ -4,12 +4,12 @@
     import wsx from "../wsx.mjs"
 
     export let direction = false
-    export let pad = false
-    export let gap = 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
 
     $: wind = {
@@ -18,8 +18,8 @@
         "gr.rows": rows?.join?.(" ") ?? rows ?? false,
         "gr.cols.a": autoCol,
         "gr.rows.a": autoRow,
-        p: pad,
-        gap: gap,
+        "gr.cols-fit": colsFit,
+        "gr.cols-fill": colsFill,
         over: (scrollable === true) ? "auto" : null,
         ...$$restProps
     }

package/src/layout/paper.svelte

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