@axel669/zephyr 1.0.0-beta.1 → 1.0.0-dev.1

package/src/component/paper.svelte

@@ -1,33 +0,0 @@
-<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

@@ -1,19 +0,0 @@
-<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

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

package/src/component/prompt.svelte

@@ -1,58 +0,0 @@
-<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/component/route.svelte

@@ -1,62 +0,0 @@
-<script module>
-    const urlChars = "[\\w\\-\\%\\(\\)\\.@!\\*\\^\\$]"
-    const urlPattern = (path, exact) => {
-        const regexSource = path.replace(
-            /:([\w\-]+)/g,
-            (_, name) => `\(?<${name}>${urlChars}+\)`
-        )
-        if (exact === true) {
-            return new RegExp(`(?<_path>^${regexSource})$`)
-        }
-        return new RegExp(`(?<_path>^${regexSource})(((?<=\\/)${urlChars})|\\/|$)`)
-    }
-</script>
-
-<script>
-    import { getContext, setContext } from "svelte"
-
-    import { ctx, resolve, route } from "./routing.svelte.js"
-
-    const {
-        path = "",
-        component = null,
-        props = {},
-        exact = false,
-        content,
-        children,
-    } = $props()
-
-    const parent = getContext(ctx.parent) ?? "/"
-    const fullPath = resolve(parent, path)
-
-    setContext(ctx.parent, fullPath)
-    const pattern = $derived(
-        urlPattern(fullPath, exact)
-    )
-    const match = $derived(
-        $route.match(pattern)
-    )
-    const routeParams = $derived(
-        Object.fromEntries(
-            Object.entries({ ...match?.groups }).map(
-                ([key, value]) => [key, decodeURIComponent(value)]
-            )
-        )
-    )
-    const routeInfo = $derived({
-        params: routeParams,
-        match: routeParams._path,
-        route: $route,
-    })
-    const Content = $derived(component)
-</script>
-
-{#if match !== null}
-    {#key routeParams._path}
-        {#if Content !== null}
-            <Content {...props} {routeInfo} />
-        {:else}
-            {@render (content ?? children)?.(routeInfo, props)}
-        {/if}
-    {/key}
-{/if}

package/src/component/routing.svelte.js

@@ -1,63 +0,0 @@
-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
-    }
-)
-route.set = (path) => {
-    hash.set(path)
-}
-
-export const ctx = {
-    router: Symbol("Router Context"),
-    parent: Symbol("Route Parent"),
-    layout: Symbol("Layout Context"),
-}
-export const resolve = (base, part) => {
-    const prt = `/${part}`.replace(/^\/\//, "/")
-    if (prt === "/") {
-        return base
-    }
-    if (base === "/" || base === undefined) {
-        return prt
-    }
-    return `${base}${prt}`
-}
-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/component/screen.svelte

@@ -1,30 +0,0 @@
-<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

@@ -1,40 +0,0 @@
-<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/component/suspend.svelte

@@ -1,44 +0,0 @@
-<script>
-    import HexagonSpinner from "./hexagon-spinner.svelte"
-    import Flex from "./flex.svelte"
-
-    const {
-        component: Component,
-        snippet,
-        loading,
-        error,
-        ...rest
-    } = $props()
-    const wait = $derived(
-        Promise.all(
-            Object.entries(rest).map(
-                async (pair) => [pair[0], await pair[1]]
-            )
-        )
-    )
-</script>
-
-{#await wait}
-    {#if loading}
-        {@render loading()}
-    {:else}
-        <Flex ws="fl.cn;">
-            <HexagonSpinner ws="@size: 48px;" />
-            <span>Loading</span>
-        </Flex>
-    {/if}
-{:then entries}
-    {#if Component}
-        <Component {...Object.fromEntries(entries)} />
-    {:else}
-        {@render snippet(Object.fromEntries(entries))}
-    {/if}
-{:catch loadError}
-    {#if error}
-        {@render error(loadError)}
-    {:else}
-        <Flex ws="b: 1px solid red; fl.cn; p: 8px;">
-            {loadError}
-        </Flex>
-    {/if}
-{/await}

package/src/component/table.svelte

@@ -1,49 +0,0 @@
-<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

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

package/src/component/text.svelte

@@ -1,26 +0,0 @@
-<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/title.svelte

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

package/src/component/titlebar.svelte

@@ -1,23 +0,0 @@
-<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

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

package/src/component/toaster.svelte

@@ -1,60 +0,0 @@
-<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

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

package/src/component/tooltip.svelte

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

package/src/handler$.js

@@ -1,20 +0,0 @@
-/**
-Wraps a handler function for easy reuse.
-
-@param {Function} func The handler function to wrap
-*/
-const handler$ = (func) =>
-    (...args) =>
-        (_, ...extra) => func(...args, ...extra)
-
-/**
-Wraps a handler function for easy reuse, and doesn't throw away the event arg
-passed by events firing.
-
-@param {Function} func The handler function to wrap
-*/
-const eventHandler$ = (func) =>
-    (...args) =>
-        (...extra) => func(...extra, ...args)
-
-export { handler$, eventHandler$ }

package/src/hash.js

@@ -1,14 +0,0 @@
-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
-}