@axel669/zephyr 0.3.8 → 0.4.5

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

@@ -12,5 +12,17 @@
 <!-- svelte-ignore a11y-click-events-have-key-events -->
 <!-- svelte-ignore a11y-interactive-supports-focus -->
 <ws-notification use:wsx={wind} on:click role="button">
-    <slot />
+    {#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,31 @@
     export let color
     export let fill = false
 
-    $: wind = {
+    $: titleProps = {
         "$color": color,
         "$fill": fill,
-        ...$$restProps
+        $title: true,
+    }
+    $: wind = {
+        ...$$restProps,
     }
 </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

@@ -3,16 +3,16 @@
 <script context="module">
     const defs = {
         select: {
-            "@select": true,
+            "@@select": true,
             "w.min": "35vw",
             grid: true,
             over: "hidden"
         },
         menu: {
-            "@menu": true,
+            "@@menu": true,
         },
         action: {
-            "@action": true,
+            "@@action": true,
         }
     }
 </script>
@@ -41,7 +41,7 @@
 <!-- svelte-ignore a11y-interactive-supports-focus -->
 <wind-drawer-container use:wsx={container} on:click|stopPropagation
 role="menubar" transition:trick>
-    <Paper {...$$restProps}>
+    <Paper r="0px" {...$$restProps}>
         <slot name="header" slot="header" />
         <slot />
         <slot name="footer" slot="footer" />

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

@@ -24,6 +24,7 @@
 
     $: layoutProps = {
         over: scrollable ? "auto" : false,
+        $content: true,
         ...props.layout,
     }
     $: wind = {
@@ -35,13 +36,21 @@
 </script>
 
 <ws-paper use:wsx={wind}>
-    <slot name="header" />
+    {#if $$slots.header}
+        <div ws-x="[$header] [grid] [p 0px]">
+            <slot name="header" />
+        </div>
+    {/if}
     {#if $$slots.content}
-        <slot name="content" slot="content" />
+        <slot name="content" />
     {:else}
-        <svelte:component this={layout} {...layoutProps} slot="content">
+        <svelte:component this={layout} {...layoutProps}>
             <slot />
         </svelte:component>
     {/if}
-    <slot name="footer" />
+    {#if $$slots.footer}
+        <div ws-x="[$footer] [grid] [p 0px]">
+            <slot name="footer" />
+        </div>
+    {/if}
 </ws-paper>

package/src/routing/route.svelte

@@ -0,0 +1,48 @@
+<script context="module">
+    const urlPattern = (path, exact) => {
+        const regexSource = path.replace(
+            /:([\w\-]+)/g,
+            (_, name) => `\(?<${name}>[\\w\\-\\%]+\)`
+        )
+        if (exact === true) {
+            return new RegExp(`(?<_path>^${regexSource})$`)
+        }
+        return new RegExp(`(?<_path>^${regexSource})(((?<=\\/)[\\w\\-\\%])|\\/|$)`)
+    }
+</script>
+
+<script>
+    import { getContext, setContext } from "svelte"
+
+    import { ctx, resolve, route } from "./routing.js"
+
+    export let path = ""
+    export let component = null
+    export let props = {}
+    export let exact = false
+
+    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)]
+        )
+    )
+    $: routeInfo = {
+        params: routeParams,
+        match: routeParams._path,
+        route: $route,
+    }
+</script>
+
+{#if match !== null}
+    {#key routeParams._path}
+        <slot {routeInfo}>
+            <svelte:component this={component} {...props} {routeInfo} />
+        </slot>
+    {/key}
+{/if}

package/src/routing/routing.js

@@ -0,0 +1,62 @@
+import { onMount, getContext } from "svelte"
+import { writable, derived } from "svelte/store"
+
+import { hash } from "../hash.js"
+
+export const route = derived(
+    hash,
+    hash => {
+        if (hash.startsWith("/") === false) {
+            return `/${hash}`
+        }
+        return hash
+    }
+)
+
+export const ctx = {
+    router: Symbol("Router Context"),
+    parent: Symbol("Route Parent"),
+    layout: Symbol("Layout Context"),
+}
+export const resolve = (base, part) => {
+    if (part === "" || part === "/") {
+        return base
+    }
+    if (base === "/" || base === undefined) {
+        return `/${part}`
+    }
+    if (part.startsWith("/") === true) {
+        return `${base}${part}`
+    }
+    return `${base}/${part}`
+}
+export const relpath = (path) => {
+    const base = getContext(ctx.parent)
+    return `#${resolve(base, path)}`
+}
+
+const emptyStack = Symbol("empty stack")
+export const stackStore = (initial = stackStore.empty) => {
+    const stack = [writable(initial)]
+    const current = writable(initial)
+    let attachment = stack[0].subscribe(current.set)
+
+    return {
+        subscribe: current.subscribe,
+        push: (initial) => {
+            const item = writable(initial)
+            onMount(() => {
+                stack.push(item)
+                attachment()
+                attachment = item.subscribe(current.set)
+                return () => {
+                    stack.pop()
+                    attachment()
+                    attachment = stack[stack.length - 1].subscribe(current.set)
+                }
+            })
+            return item
+        }
+    }
+}
+stackStore.empty = emptyStack

package/src/routing/title.svelte

@@ -0,0 +1,26 @@
+<script context="module">
+    import { writable } from "svelte/store"
+
+    import { stackStore } from "./routing.js"
+
+    // const stack = writable([])
+    const stack = stackStore()
+
+    const updateTitle = (format, data) => {
+        if (format === null || data === stackStore.empty) {
+            return
+        }
+
+        document.title = format(data)
+    }
+</script>
+
+<script>
+    import { onMount } from "svelte"
+    export let data = ""
+    export let format = null
+
+    stack.push(data)
+
+    $: updateTitle(format, $stack)
+</script>

package/src/spinner/circle-spinner.svelte

@@ -7,9 +7,10 @@
     export let color = "@primary"
 
     $: wind = {
+        ...$$restProps,
         "@size": size,
         "$color": color,
     }
 </script>
 
-<ws-circle-spinner use:wsx={wind} />
+<ws-circle-spinner use:wsx={wind} style="aspect-ratio: 1 / 1;" />

package/src/spinner/hexagon-spinner.svelte

@@ -7,9 +7,10 @@
     export let color = "@primary"
 
     $: wind = {
+        ...$$restProps,
         "@size": size,
         "$color": color,
     }
 </script>
 
-<ws-hexagon-spinner use:wsx={wind} />
+<ws-hexagon-spinner use:wsx={wind} style="aspect-ratio: 1 / 1;" />

package/src/text.svelte

@@ -5,14 +5,12 @@
 
     export let title = false
     export let subtitle = false
-    export let block = false
     export let adorn = false
 
     $: wind = {
-        "$title": title,
-        "$subtitle": subtitle,
+        "$title-text": title,
+        "$subtitle-text": subtitle,
         "$adorn": adorn,
-        block,
         ...$$restProps
     }
 </script>

package/src/wsx.mjs

@@ -1,7 +1,5 @@
 import ws from "@axel669/windstorm"
 
-// ws.custom("outline", (o) => ws.prop("outline", o))
-
 export default (node, props) => {
     const update = (props) => {
         const { slot = null, ...goodProps } = props ?? {}
@@ -9,15 +7,18 @@ export default (node, props) => {
             node.setAttribute("ws-x", null)
             return
         }
+        const formatted = Object.entries(goodProps).reduce(
+            (props, [key, value]) => {
+                const realKey = key.replaceAll("--", ":").replace(/^\-/, "$")
+                props[realKey] = value
+                return props
+            },
+            {}
+        )
         node.setAttribute(
             "ws-x",
-            ws.x(goodProps)
+            ws.x(formatted)
         )
-        if (slot === null) {
-            node.removeAttribute("slot")
-            return
-        }
-        node.setAttribute("slot", slot)
     }
     update(props)
     return { update }

package/src/async/button.md

@@ -1,27 +0,0 @@
-# AsyncButton
-A button that makes it simpler to fire off async functions in response to button
-clicks. In addition to calling the function, the button will disable itself
-during the function duration and show a load spinner inside the button.
-
-## Props
-The AsyncButton supports all of the [Button](../control/button.md) props.
-
-### handler
-The async function to call when the button is clicked.
-
-## Example
-
-```svelte
-<script>
-    import { AsyncButton } from "@axel669/zephyr"
-
-    const load = async () => {
-        const res = await fetch(someURL)
-        console.log(await res.text())
-    }
-</script>
-
-<AsyncButton handler={load} color="@primary">
-    Load Things
-</AsyncButton>
-```

package/src/async/load-zone.md

@@ -1,42 +0,0 @@
-# LoadZone
-A component for putting content that is behind an async function.
-
-## Props
-
-### message
-The text to show while the promise is pending.
-
-### source
-`Promise`
-
-The promise that will resolve into some kind of content-related information.
-
-## Slots
-
-### default
-The default slot will be shown when the promise resolves.
-
-### loading
-The content to show while the promise is pending. Overrides the default of a
-load spinner with some text.
-
-### error
-The content to show when the promise rejects. Use `let:error` to get the error
-that was thrown.
-
-## Example
-
-```svelte
-<LoadZone source={asyncThing} let:result>
-    <div>
-        content
-    </div>
-    <div>
-        {JSON.stringify(result)}
-    </div>
-
-    <div slot="error">
-        :(
-    </div>
-</LoadZone>
-```

package/src/composed/data-table/th.md

@@ -1,21 +0,0 @@
-# TH
-
-The TH component has no use outside fo the DataTable, but is used to support
-the filter and sorting functionality for that component.
-
-## Props
-
-### sort
-`Function`
-
-The sorting function to use for the column defined. Should return values that
-match the expected values for `Array.sort`.
-
-### filter
-`Function`
-
-The function to use for filtering based on the column. The function is given
-2 arguments: a row of data and the text from the filter input field. The
-function should return `true` if the item should be shown. A filter function on
-a specific column does not need to only look at the specified column, but not
-doing could cause confusion for users without proper context.

package/src/composed/data-table.md

@@ -1,86 +0,0 @@
-# DataTable
-
-The DataTable is a more advanced way to show data on screen. Underneath is
-a [Table](../data-display/table.md) component, but with additional functionality
-for pagination, sorting, and fitering.
-
-> If pagination is not needed, the DataTable may not be necessary as it will
-> only be shortcutting data formatting at that point.
-
-## Props
-
-### color
-Sets `$color`
-
-### data
-`Array`
-
-The data to display. Each item in the array can be in either the same
-format as the Table, or any kind of object if column format functions
-are used.
-
-### page
-`Number`
-
-The current page of data being viewed. Can be bound, or set to control
-which page is displayed
-
-### pageSize
-`Number`
-
-The number of items to show on each page. Default is 10.
-
-### rowHeight
-The height of each row. The component uses this to make empty rows the same
-height as rows with data so that the pagination doesnt randomly resize the
-visual area of the table.
-
-## Slots
-
-### header
-A fragment that should contain the header cells for the table header. A standard
-`th` can be used, but the [TH](./data-table/th.md) element from zephyr has
-additional configuration to handle more complex header-related actions.
-
-### row
-A fragment that should use regular `td` elements to define how a row should be
-layed out. The fragment will need `let:row` to access each row's data for
-displaying it.
-
-## Example
-```svelte
-<script>
-    import { DataTable, TH, sorts } from "@axel669/zephyr"
-
-    let page
-    const data = [
-        { a: 1, b: 1 ** 2, c: 1 ** 3 },
-        { a: 2, b: 2 ** 2, c: 2 ** 3 },
-        { a: 3, b: 3 ** 2, c: 3 ** 3 },
-        { a: 4, b: 4 ** 2, c: 4 ** 3 },
-        { a: 5, b: 5 ** 2, c: 5 ** 3 },
-        { a: 6, b: 6 ** 2, c: 6 ** 3 },
-        { a: 7, b: 7 ** 2, c: 7 ** 3 },
-        { a: 8, b: 8 ** 2, c: 8 ** 3 },
-        { a: 9, b: 9 ** 2, c: 9 ** 3 },
-        { a: 10, b: 10 ** 2, c: 10 ** 3 },
-        { a: 11, b: 11 ** 2, c: 11 ** 3 },
-        { a: 12, b: 12 ** 2, c: 12 ** 3 },
-        { a: 13, b: 13 ** 2, c: 13 ** 3 },
-    ]
-</script>
-
-<DataTable {cols} {data} color="warning" pageSize={3} bind:page>
-    <svelte:fragment slot="header">
-        <TH sort={sorts.natural}>N</TH>
-        <th>Squared</th>
-        <th>Cubed</th>
-    </svelte:fragment>
-
-    <svelte:fragment slot="row" let:row>
-        <td>{row.a}</td>
-        <td>{row.b}</td>
-        <td>^3 = {row.c}</td>
-    </svelte:fragment>
-</DataTable>
-```

package/src/composed/entry-button.md

@@ -1,44 +0,0 @@
-# EntryButton
-
-The EntryButton is a convenient way to display modals and screens over
-content without needing to bind variables have lots of Modal elements in
-addition to the buttons that show them.
-
-## Props
-
-### component
-The component to show when clicked
-
-### props
-The props to pass to the component when it is shown, or a function that
-generates the props when called.
-
-### this
-The wrapper for the component. Default is [Modal](../layout/modal.md) but any
-component that has the same interface as Modal will work.
-
-## Events
-
-### entry
-When the component is closed the entry event is fired. The detail
-property of the event will have the value from closing it.
-
-## Example
-```svelte
-<script>
-    const propsFunc = () => ({
-        now: Date.now(),
-        rand: Math.random(),
-    })
-</script>
-
-<EntryButton component={Subscreen} on:entry={console.log}>
-    Open Subscreen
-</EntryButton>
-<EntryButton component={CoolDialog} props={{ thing: true }} on:entry={console.log}>
-    Open Subscreen
-</EntryButton>
-<EntryButton this={CoolModal} component={CustomThing} on:entry={console.log} props={propsFunc}>
-    Open Subscreen
-</EntryButton>
-```