@axel669/zephyr 0.5.5 → 1.0.0-beta.0

package/src/component/dialog-element.svelte

@@ -0,0 +1,35 @@
+<script>
+    import { onMount } from "svelte"
+    import Modal from "./modal.svelte"
+
+    const {
+        options,
+        dialog,
+    } = $props()
+
+    let open = $state(false)
+
+    onMount(() => open = true)
+
+    const {
+        tIn,
+        tOut,
+        close,
+        ws = "",
+        persistent,
+        ...opts
+    } = options
+    const dialogClose = (value) => {
+        open = false
+        setTimeout(
+            () => close(value),
+            tOut.duration
+        )
+    }
+</script>
+
+<Modal bind:open inTime={0} outTime={tOut.duration} onclose={() => dialogClose(null)} {persistent}>
+    <ws-dialog in:tIn.func={tIn} out:tOut.func={tOut} data-ws={ws} tabindex="-1">
+        {@render dialog({ ...opts, close: dialogClose })}
+    </ws-dialog>
+</Modal>

package/src/component/dialog.svelte

@@ -0,0 +1,43 @@
+<script module>
+    import { fade } from "svelte/transition"
+
+    import DialogElement from "./dialog-element.svelte"
+    let stack = $state([])
+
+    const defTf = {
+        duration: 250,
+        func: fade
+    }
+
+    export const showDialog = (options) => new Promise(
+        (resolve) => {
+            const {
+                dialog = null,
+                transition = defTf,
+                transitionIn = transition,
+                transitionOut = transition,
+                ...opts
+            } = options
+            if (dialog === null) {
+                return false
+            }
+
+            const id = `${Math.random()}:${Date.now()}`
+            const close = (value) => {
+                stack = stack.filter(
+                    (dia) => dia[2] !== id
+                )
+                resolve(value)
+            }
+            stack.push([
+                dialog,
+                { ...opts, tIn: transitionIn, tOut: transitionOut, close },
+                id
+            ])
+        }
+    )
+</script>
+
+{#each stack as [dialog, options, id] (id)}
+    <DialogElement {options} {dialog} />
+{/each}

package/src/component/drawer.svelte

@@ -0,0 +1,20 @@
+<script>
+    import { fly } from "svelte/transition"
+    import Modal from "./modal.svelte"
+
+    let {
+        open = $bindable(false),
+        ws = "",
+        children,
+        onclose,
+        animTime = 250,
+        tr = fly,
+        trArgs = { x: "-100%" }
+    } = $props()
+</script>
+
+<Modal bind:open {onclose} {animTime}>
+    <ws-drawer transition:tr={{ ...trArgs, duration: animTime }} data-ws={ws}>
+        {@render children?.()}
+    </ws-drawer>
+</Modal>

package/src/component/flex.svelte

@@ -0,0 +1,7 @@
+<script>
+    const { ws, children, ...rest } = $props()
+</script>
+
+<ws-flex data-ws={ws} {...rest}>
+    {@render children?.()}
+</ws-flex>

package/src/component/grid.svelte

@@ -0,0 +1,7 @@
+<script>
+    const { ws, children, ...rest } = $props()
+</script>
+
+<ws-grid data-ws={ws} {...rest}>
+    {@render children?.()}
+</ws-grid>

package/src/component/hexagon-spinner.svelte

@@ -0,0 +1,6 @@
+<script>
+    const { ws, ...rest } = $props()
+</script>
+
+<!-- svelte-ignore element_invalid_self_closing_tag -->
+<ws-hexagon-spinner data-ws={ws} {...rest} />

package/src/component/icon.svelte

@@ -0,0 +1,7 @@
+<script>
+    const { ws, name, children, ...rest } = $props()
+</script>
+
+<ws-icon data-icon={name} data-ws={ws} {...rest}>
+    {@render children?.()}
+</ws-icon>

package/src/component/link.svelte

@@ -0,0 +1,11 @@
+<script>
+    const {
+        children,
+        ws = "",
+        ...rest
+    } = $props()
+</script>
+
+<a data-ws="{ws}" {...rest}>
+    {@render children?.()}
+</a>

package/src/component/modal.svelte

@@ -0,0 +1,32 @@
+<script>
+    let {
+        open = $bindable(false),
+        children,
+        ws = "",
+        onclose,
+        animTime,
+        inTime = animTime,
+        outTime = animTime,
+        persistent = false,
+    } = $props()
+
+    const vis = (node, opts) => {
+        const { duration } = opts
+        return {
+            duration,
+            css: (t, u) => "visibility: visible;"
+        }
+    }
+
+    const close = (evt) => {
+        open = false
+        onclose?.(evt)
+    }
+</script>
+
+{#if open === true}
+    <ws-modal open data-ws={ws} onclose={close} {persistent}
+    in:vis={{ duration: inTime }} out:vis={{ duration: outTime }}>
+        {@render children?.()}
+    </ws-modal>
+{/if}

package/src/component/paper.svelte

@@ -0,0 +1,33 @@
+<script>
+    import Flex from "./flex.svelte"
+
+    const {
+        ws,
+        children,
+        content,
+        header,
+        footer,
+        layoutWS = "",
+        ...rest
+    } = $props()
+</script>
+
+<ws-paper data-ws={ws} {...rest}>
+    {#if header}
+        <ze-header data-ws="grid; p: 0px; area: header;">
+            {@render header()}
+        </ze-header>
+    {/if}
+    {#if content}
+        {@render content()}
+    {:else}
+        <Flex ws={layoutWS}>
+            {@render children?.()}
+        </Flex>
+    {/if}
+    {#if footer}
+        <ze-footer data-ws="grid; p: 0px; area: footer;">
+            {@render footer()}
+        </ze-footer>
+    {/if}
+</ws-paper>

package/src/component/popover.svelte

@@ -0,0 +1,19 @@
+<script>
+    const {
+        content,
+        overlay,
+        ws = "",
+        ...rest
+    } = $props()
+
+    let popover = null
+    const show = () => popover.show()
+    const hide = () => popover.hide()
+</script>
+
+<ws-popover data-ws={ws} {...rest} bind:this={popover}>
+    {@render content(show)}
+    <ze-popover-overlay slot="popover">
+        {@render overlay(hide)}
+    </ze-popover-overlay>
+</ws-popover>

package/src/component/progress.svelte

@@ -0,0 +1,6 @@
+<script>
+    const { ws, ...rest } = $props()
+</script>
+
+<!-- svelte-ignore element_invalid_self_closing_tag -->
+<ws-progress data-ws={ws} {...rest} />

package/src/component/prompt.svelte

@@ -0,0 +1,58 @@
+<script>
+    import { onMount } from "svelte"
+
+    import Button from "./button.svelte"
+    import Grid from "./grid.svelte"
+    import Paper from "./paper.svelte"
+    import Text from "./text.svelte"
+    import Titlebar from "./titlebar.svelte"
+    import ControlLabel from "./control-label.svelte"
+
+    const {
+        message,
+        close,
+        color = "@primary",
+        okText = "OK",
+        cancelText = "Cancel",
+        title = "Prompt",
+    } = $props()
+
+    let value = $state("")
+    let input = $state(null)
+    onMount(() => input.focus())
+    const done = (e) => {
+        e.preventDefault()
+        close(value)
+    }
+</script>
+
+<Paper ws="@color: {color}; variant.outline;">
+    {#snippet header()}
+        <Titlebar ws="@color: {color};">
+            <Text header>
+                {title}
+            </Text>
+        </Titlebar>
+    {/snippet}
+
+    <Text ws="p: 8px;">
+        {message}
+    </Text>
+
+    <form onsubmit={done} data-ws="grid;">
+        <ControlLabel ws="@color: {color};">
+            <input type="text" bind:value bind:this={input} />
+        </ControlLabel>
+    </form>
+
+    {#snippet footer()}
+        <Grid ws="gr.cols: 1fr 1fr; p: 0px;">
+            <Button ws="@color: @error;" onclick={() => close(false)}>
+                {cancelText}
+            </Button>
+            <Button ws="@color: @success;" onclick={() => close(value)}>
+                {okText}
+            </Button>
+        </Grid>
+    {/snippet}
+</Paper>

package/src/{routing → component}/routing.svelte.js

@@ -22,16 +22,14 @@ export const ctx = {
     layout: Symbol("Layout Context"),
 }
 export const resolve = (base, part) => {
-    if (part === "" || part === "/") {
+    const prt = `/${part}`.replace(/^\/\//, "/")
+    if (prt === "/") {
         return base
     }
     if (base === "/" || base === undefined) {
-        return `/${part}`
+        return prt
     }
-    if (part.startsWith("/") === true) {
-        return `${base}${part}`
-    }
-    return `${base}/${part}`
+    return `${base}${prt}`
 }
 export const relpath = (path) => {
     const base = getContext(ctx.parent)

package/src/component/screen.svelte

@@ -0,0 +1,30 @@
+<script>
+    import Paper from "./paper.svelte"
+
+    const {
+        ws,
+        children,
+        header,
+        footer,
+        content,
+        screenContent,
+        paperWS = "",
+        layoutWS = "",
+        ...rest
+    } = $props()
+</script>
+
+<ws-screen data-ws={ws} {...rest}>
+    {#if screenContent}
+        {@render screenContent()}
+    {:else}
+        <Paper
+            {header}
+            {footer}
+            {children}
+            {content}
+            {layoutWS}
+            ws={paperWS}
+        />
+    {/if}
+</ws-screen>

package/src/component/select.svelte

@@ -0,0 +1,40 @@
+<svelte:options runes />
+<script>
+    let {
+        value = $bindable(null),
+        ws,
+        options,
+        children,
+        selected,
+        ...rest
+    } = $props()
+
+    const update = (evt) => {
+        value = evt.target.value
+    }
+</script>
+
+{#snippet optionList(options)}
+    {#each options as opt (opt)}
+        {#if opt.group !== undefined}
+            <ws-optgroup label={opt.group}>
+                {@render optionList(opt.items)}
+            </ws-optgroup>
+        {:else}
+            <ws-option value={opt.value}>{opt.label}</ws-option>
+        {/if}
+    {/each}
+{/snippet}
+
+<ws-select data-ws={ws} onchange={update} {...rest} {value}>
+    {#if selected}
+        <div slot="selected">
+            {@render selected()}
+        </div>
+    {/if}
+    {#if Array.isArray(options) === true}
+        {@render optionList(options)}
+    {:else}
+        {@render children?.()}
+    {/if}
+</ws-select>

package/src/{async → component}/suspend.svelte

@@ -1,8 +1,10 @@
 <script>
-    import CircleSpinner from "../spinner/circle-spinner.svelte"
+    import HexagonSpinner from "./hexagon-spinner.svelte"
+    import Flex from "./flex.svelte"
 
     const {
-        "!component": Component,
+        component: Component,
+        snippet,
         loading,
         error,
         ...rest
@@ -20,19 +22,23 @@
     {#if loading}
         {@render loading()}
     {:else}
-        <div ws-x="[flex] [fl-center] [p 4px]">
-            <CircleSpinner size="56px" />
+        <Flex ws="fl.cn;">
+            <HexagonSpinner ws="@size: 48px;" />
             <span>Loading</span>
-        </div>
+        </Flex>
     {/if}
 {:then entries}
-    <Component {...Object.fromEntries(entries)} />
+    {#if Component}
+        <Component {...Object.fromEntries(entries)} />
+    {:else}
+        {@render snippet(Object.fromEntries(entries))}
+    {/if}
 {:catch loadError}
     {#if error}
         {@render error(loadError)}
     {:else}
-        <div ws-x="[b 1px solid red] [p 8px]">
+        <Flex ws="b: 1px solid red; fl.cn; p: 8px;">
             {loadError}
-        </div>
+        </Flex>
     {/if}
 {/await}

package/src/component/table.svelte

@@ -0,0 +1,49 @@
+<script>
+    const {
+        data,
+        row = Row,
+        header = Header,
+        ws = "",
+        sticky = false
+    } = $props()
+
+    const keys = $derived(
+        Object.keys(data?.[0] ?? {})
+    )
+</script>
+
+{#snippet Header(keys)}
+    <tr>
+        {#each keys as key}
+            <th>{key}</th>
+        {/each}
+    </tr>
+{/snippet}
+{#snippet Row(item, keys)}
+    <tr>
+        {#each keys as key}
+            <td>{item[key]}</td>
+        {/each}
+    </tr>
+{/snippet}
+
+<table data-ws={ws} sticky-header={sticky || null}>
+    <thead>
+        {#if data?.length > 0}
+            {@render header(keys)}
+        {:else}
+            <tr>
+                <th>N/A</th>
+            </tr>
+        {/if}
+    </thead>
+    <tbody>
+        {#each data as item, rowNum}
+            {@render row(item, keys, rowNum)}
+        {:else}
+            <tr>
+                <td>No Items</td>
+            </tr>
+        {/each}
+    </tbody>
+</table>

package/src/component/tabs.svelte

@@ -0,0 +1,2 @@
+<script>
+</script>

package/src/component/text.svelte

@@ -0,0 +1,26 @@
+<script>
+    const sizes = {
+        title: "title",
+        info: "info",
+        header: "header",
+        subtitle: "subtitle",
+    }
+    const {
+        ws,
+        children,
+        size,
+        notif,
+        ...rest
+    } = $props()
+    const sizeProp = $derived(
+        sizes[size]
+    )
+    const processed = $derived({
+        [sizeProp]: "",
+        "notif-text": (notif === true) ? "" : undefined,
+    })
+</script>
+
+<ws-text data-ws={ws} {...rest} {...processed}>
+    {@render children?.()}
+</ws-text>

package/src/component/titlebar.svelte

@@ -0,0 +1,23 @@
+<script>
+    const {
+        ws,
+        children,
+        menu,
+        action,
+        ...rest
+    } = $props()
+</script>
+
+<ws-titlebar data-ws={ws} {...rest}>
+    {#if menu}
+        <ze-menu data-ws="grid; p: 0px; area: menu;">
+            {@render menu()}
+        </ze-menu>
+    {/if}
+    {@render children?.()}
+    {#if action}
+        <ze-action data-ws="grid; p: 0px; area: action;">
+            {@render action()}
+        </ze-action>
+    {/if}
+</ws-titlebar>

package/src/component/toast.svelte

@@ -0,0 +1,7 @@
+<script>
+    const { ws, children } = $props()
+</script>
+
+<ws-toast data-ws={ws}>
+    {@render children?.()}
+</ws-toast>

package/src/component/toaster.svelte

@@ -0,0 +1,60 @@
+<script module>
+    const stacks = $state({
+        "top-left": [],
+        "top-center": [],
+        "top-right": [],
+        "center-right": [],
+        "center-left": [],
+        "bottom-left": [],
+        "bottom-center": [],
+        "bottom-right": [],
+    })
+    const notifs = $derived(
+        Object.entries(stacks)
+    )
+
+    export const showToast = (options) => {
+        const {
+            snippet = info,
+            pos = "top-center",
+            ...opts
+        } = options
+        const id = `${Math.random()}:${Date.now()}`
+        const hide = () => {
+            stacks[pos] = stacks[pos].filter(
+                (notif) => notif[2] !== id
+            )
+        }
+        stacks[pos].unshift([
+            snippet,
+            { ...opts, hide },
+            id
+        ])
+        setTimeout(hide, opts.time ?? 5000)
+    }
+</script>
+
+<script>
+    import { fade } from "svelte/transition"
+
+    import Icon from "./icon.svelte"
+    import Text from "./text.svelte"
+    import Toast from "./toast.svelte"
+</script>
+
+{#snippet info(options)}
+    <div transition:fade>
+        <Toast ws="@color: {options.color ?? "@info"}; {options.ws ?? ""}">
+            <Icon name={options.icon ?? "info-hexagon"} />
+            <Text notif>{options.message}</Text>
+        </Toast>
+    </div>
+{/snippet}
+
+{#each notifs as [pos, stack] (pos)}
+    <ws-toaster {pos}>
+        {#each stack as [notif, options, id] (id)}
+            {@render notif(options)}
+        {/each}
+    </ws-toaster>
+{/each}

package/src/component/toggle-label.svelte

@@ -0,0 +1,11 @@
+<script>
+    const {
+        ws = "",
+        children,
+        ...rest
+    } = $props()
+</script>
+
+<label toggle data-ws={ws} {...rest}>
+    {@render children?.()}
+</label>

package/src/component/tooltip.svelte

@@ -0,0 +1,11 @@
+<script>
+    const {
+        ws,
+        children,
+        ...rest
+    } = $props()
+</script>
+
+<ws-tooltip data-ws={ws} {...rest}>
+    {@render children?.()}
+</ws-tooltip>

package/src/custom-macros.js

@@ -1,9 +1,11 @@
-const head = document.head
-const macros = document.createElement("style")
-macros.setAttribute("ws-root", "")
-macros.innerHTML = `
-.ws-style {
-    --con: "contain: {$}";
-}
-`
-head.append(macros)
+import { ws } from "./ws.js"
+
+// const head = document.head
+// const macros = document.createElement("style")
+// macros.setAttribute("ws-root", "")
+// macros.innerHTML = `
+// .ws-style {
+//     --con: "contain: {$}";
+// }
+// `
+// head.append(macros)