@axel669/zephyr 0.5.4 → 1.0.0-beta.0

package/src/info/element-toaster.svelte

@@ -1,110 +0,0 @@
-<script module>
-    const genID = () => `${Date.now()}:${Math.random().toString(16)}`
-
-    const delays = {}
-    const delay = ({time, action, id}) => {
-        const trigger = () => {
-            const info = delays[id]
-            clearTimeout(info.id)
-            action()
-            delete delays[id]
-        }
-        const timeoutID = setTimeout(trigger, time)
-        delays[id] = { trigger, id: timeoutID }
-    }
-    delay.trigger = (id) => delays[id].trigger()
-
-    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 { fade } from "svelte/transition"
-
-    import { eventHandler$ } from "../handler$.js"
-    import wsx from "../wsx.js"
-
-    import ToastMessage from "./toaster/message.svelte"
-
-    const {
-        component = ToastMessage,
-        position = "top",
-        content,
-        onaction,
-        ...rest
-    } = $props()
-
-    let items = $state([])
-
-    const act = eventHandler$(
-        (evt, id, props) => {
-            delay.trigger(id)
-            evt.props = props
-            onaction?.(evt)
-            // dispatch(
-            //     "action",
-            //     { value: evt.detail, props }
-            // )
-        }
-    )
-
-    export const show = (duration, props) => {
-        const id = genID()
-        items = [...items, { id, props }]
-        delay({
-            action: () => items = items.filter(
-                item => item.id !== id
-            ),
-            time: duration,
-            id,
-        })
-    }
-    export const clear = () => items = []
-
-    const wind = $derived({
-        gap: "8px",
-        pos: "absolute",
-        z: "50",
-        ...macros[position],
-        ...rest,
-    })
-    const Message = $derived(component)
-</script>
-
-<zephyr-element-toaster ws-x="[disp inline-grid] [pos relative]">
-    {@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}}>
-                <Message
-                {...props}
-                onaction={act(id, props)}
-                />
-            </zephyr-toast-wrapper>
-        {/each}
-    </zephyr-element-toast-messages>
-</zephyr-element-toaster>

package/src/info/icon.svelte

@@ -1,9 +0,0 @@
-<script>
-    import wsx from "../wsx.js"
-
-    const { name, children, ...rest } = $props()
-</script>
-
-<ws-icon data-icon={name} use:wsx={rest}>
-    {@render children?.()}
-</ws-icon>

package/src/info/titlebar.svelte

@@ -1,40 +0,0 @@
-<script>
-    import wsx from "../wsx.js"
-
-    const {
-        color,
-        fill = false,
-        title,
-        menu,
-        action,
-        ...rest
-    } = $props()
-
-    const titleProps = $derived({
-        "$color": color,
-        "$fill": fill,
-        $title: true,
-    })
-    const wind = $derived({
-        ...rest,
-    })
-</script>
-
-<ws-titlebar use:wsx={wind}>
-    {#if title}
-        <div use:wsx={titleProps}>
-            {@render title()}
-        </div>
-    {/if}
-
-    {#if menu}
-        <div ws-x="[$menu] [grid] [p 0px]">
-            {@render menu()}
-        </div>
-    {/if}
-    {#if action}
-        <div ws-x="[$action] [grid] [p 0px]">
-            {@render action()}
-        </div>
-    {/if}
-</ws-titlebar>

package/src/info/toast.svelte

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

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

package/src/info/toaster.svelte

@@ -1,72 +0,0 @@
-<script module>
-    const genID = () => `${Date.now()}:${Math.random().toString(16)}`
-
-    const delays = {}
-    const delay = ({time, action, id}) => {
-        const trigger = () => {
-            const info = delays[id]
-            clearTimeout(info.id)
-            action()
-            delete delays[id]
-        }
-        const timeoutID = setTimeout(trigger, time)
-        delays[id] = { trigger, id: timeoutID }
-    }
-    delay.trigger = (id) => delays[id].trigger()
-</script>
-
-<script>
-    import { fade } from "svelte/transition"
-
-    import { eventHandler$ } from "../handler$.js"
-    import wsx from "../wsx.js"
-
-    import ToastMessage from "./toaster/message.svelte"
-
-    const {
-        message = ToastMessage,
-        position = "tc",
-        onaction,
-        ...rest
-    } = $props()
-
-    let items = $state([])
-
-    const act = eventHandler$(
-        (evt, id, props) => {
-            delay.trigger(id)
-            evt.props = props
-            onaction?.(evt)
-        }
-    )
-
-    export const show = (duration, props) => {
-        const id = genID()
-        items = [...items, { id, props }]
-        delay({
-            action: () => items = items.filter(
-                item => item.id !== id
-            ),
-            time: duration,
-            id,
-        })
-    }
-    export const clear = () => items = []
-
-    const wind = $derived({
-        [`$${position}`]: true,
-        ...rest,
-    })
-    const Message = $derived(message)
-</script>
-
-<ws-toaster use:wsx={wind}>
-    {#each items as {props, id} (id)}
-        <zephyr-toast-wrapper ws-x="[grid]" transition:fade={{duration: 200}}>
-            <Message
-            {...props}
-            onaction={act(id, {...props})}
-            />
-        </zephyr-toast-wrapper>
-    {/each}
-</ws-toaster>

package/src/layout/dialog.svelte

@@ -1,24 +0,0 @@
-<script>
-    import { fade } from "svelte/transition"
-
-    import wsx from "../wsx.js"
-
-    import Paper from "./paper.svelte"
-
-    const props = $props()
-
-    const trick = (node, options) => ({
-        delay: 0,
-        duration: 250,
-        css: () => "",
-    })
-    const onclick = (evt) => {
-        evt.stopPropagation()
-    }
-</script>
-
-<!-- svelte-ignore a11y_click_events_have_key_events -->
-<!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
-<wind-wrapper transition:trick ws-x="@@dialog [grid]" {onclick} role="dialog">
-    <Paper {...props} />
-</wind-wrapper>

package/src/layout/drawer.svelte

@@ -1,76 +0,0 @@
-<script module>
-    const defs = {
-        select: {
-            "@@select": true,
-            "w.min": "35vw",
-            grid: true,
-            over: "hidden"
-        },
-        menu: {
-            "@@menu": true,
-        },
-        action: {
-            "@@action": true,
-        }
-    }
-    const parseTime = (timestring) => {
-        if (!timestring) {
-            return 200
-        }
-        const { base, scale } =
-            timestring.match(/(?<base>\d+)(?<scale>s|ms)/)?.groups ?? {}
-        if (base === undefined) {
-            return 200
-        }
-        const numeric = parseInt(base)
-        if (scale === "ms") {
-            return numeric
-        }
-        return numeric * 1000
-    }
-</script>
-
-<script>
-    import { getContext } from "svelte"
-
-    import wsx from "../wsx.js"
-
-    import Paper from "./paper.svelte"
-    import { modalContext } from "./modal.svelte"
-
-    const {
-        height,
-        type = "menu",
-        children,
-        header,
-        footer,
-        content,
-        ...rest
-    } = $props()
-
-    const animTime = getContext(modalContext)
-
-    // When Svelte removes things from the DOM they are removed immediately
-    // unless Svelte has a transition running. Adding this prevents the drawer
-    // from disappearing without first letting the built in animations run.
-    const trick = (node, options) => ({
-        delay: 0,
-        duration: parseTime($animTime),
-        css: () => "",
-    })
-
-    const container = $derived({
-        ...defs[type],
-        $show: true,
-        h: (type === "select") ? height : "100%",
-        grid: true,
-    })
-    const onclick = (evt) => evt.stopPropagation()
-</script>
-
-<!-- svelte-ignore a11y_interactive_supports_focus -->
-<!-- svelte-ignore a11y_click_events_have_key_events -->
-<wind-drawer-container use:wsx={container} {onclick} role="menubar"
-transition:trick>
-    <Paper r="0px" {...rest} {header} {footer} {content} {children} />
-</wind-drawer-container>

package/src/layout/flex.svelte

@@ -1,24 +0,0 @@
-<script>
-    import wsx from "../wsx.js"
-
-    const {
-        direction = false,
-        cross = "stretch",
-        main = "start",
-        scrollable = false,
-        children,
-        ...rest
-    } = $props()
-
-    const wind = $derived({
-        "fl.dir": direction,
-        "fl.cross": cross,
-        "fl.main": main,
-        over: (scrollable === true) ? "auto" : null,
-        ...rest
-    })
-</script>
-
-<ws-flex use:wsx={wind}>
-    {@render children?.()}
-</ws-flex>

package/src/layout/grid.svelte

@@ -1,32 +0,0 @@
-<script>
-    import wsx from "../wsx.js"
-
-    const {
-        direction = false,
-        cols = null,
-        rows = null,
-        autoCol = false,
-        autoRow = false,
-        colsFit = false,
-        colsFill = false,
-        scrollable = false,
-        children,
-        ...rest
-    } = $props()
-
-    const wind = $derived({
-        "gr.flow": direction,
-        "gr.cols": cols?.join?.(" ") ?? cols ?? false,
-        "gr.rows": rows?.join?.(" ") ?? rows ?? false,
-        "gr.cols.a": autoCol,
-        "gr.rows.a": autoRow,
-        "gr.cols-fit": colsFit,
-        "gr.cols-fill": colsFill,
-        over: (scrollable === true) ? "auto" : null,
-        ...rest
-    })
-</script>
-
-<ws-grid use:wsx={wind}>
-    {@render children?.()}
-</ws-grid>

package/src/layout/modal.svelte

@@ -1,68 +0,0 @@
-<script module>
-    let topClose = null
-    export const modalContext = Symbol("modal context")
-</script>
-
-<script>
-    import { tick, setContext } from "svelte"
-    import { writable } from "svelte/store"
-
-    import wsx from "../wsx.js"
-
-    const {
-        component,
-        animTime = "200ms"
-    } = $props()
-
-    let modalProps = $state(null)
-    let resolver = $state(null)
-    let displayed = $state(null)
-
-    const close = (value) => {
-        resolver(value)
-        resolver = null
-        modalProps = null
-        Component = null
-        if (topClose !== close) {
-            return
-        }
-        topClose = null
-    }
-    const closeToTop = (value) => {
-        topClose(value)
-    }
-    const cancel = () => displayed.cancel?.()
-
-    export const show = (props) => new Promise(
-        async (resolve) => {
-            modalProps = props ?? {}
-            topClose = topClose ?? close
-            Component = component
-            await tick()
-            setTimeout(
-                () => resolver = resolve,
-                0
-            )
-        }
-    )
-
-    const animationTime = writable(animTime)
-    const wind = $derived({
-        "@anim-time": $animationTime,
-        $show: resolver !== null,
-    })
-    let Component = $state(null)
-    setContext(modalContext, animationTime)
-</script>
-
-<!-- svelte-ignore a11y_click_events_have_key_events -->
-<!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
-<ws-modal onclick={cancel} role="dialog" use:wsx={wind}>
-    <Component
-    bind:this={displayed}
-    this={component}
-    {...modalProps}
-    {close}
-    {closeToTop}
-    />
-</ws-modal>

package/src/layout/paper.svelte

@@ -1,54 +0,0 @@
-<script>
-    import Flex from "./flex.svelte"
-    import wsx from "../wsx.js"
-    import { splitProps } from "../props.js"
-
-    const {
-        color,
-        card = false,
-        square = false,
-        layout = Flex,
-        scrollable = true,
-        children,
-        content,
-        header,
-        footer,
-        ...rest
-    } = $props()
-
-    const props = $derived(
-        splitProps(rest, "l!")
-    )
-
-    const layoutProps = $derived({
-        over: scrollable ? "auto" : false,
-        $content: true,
-        ...props["l!"],
-    })
-    const wind = $derived({
-        "$color": color,
-        "$outline": card,
-        r: square && "0px",
-        ...props.rest,
-    })
-</script>
-
-<ws-paper use:wsx={wind}>
-    {#if header}
-        <div ws-x="[$header] [grid] [p 0px]">
-            {@render header()}
-        </div>
-    {/if}
-    {#if content}
-        {@render content()}
-    {:else}
-        <Flex {...layoutProps}>
-            {@render children?.()}
-        </Flex>
-    {/if}
-    {#if footer}
-        <div ws-x="[$footer] [grid] [p 0px]">
-            {@render footer()}
-        </div>
-    {/if}
-</ws-paper>

package/src/layout/screen.svelte

@@ -1,38 +0,0 @@
-<script module>
-    const ctxStack = Symbol("stack context")
-    const ctxClose = Symbol("close context")
-</script>
-
-<script>
-    import { getContext, setContext } from "svelte"
-    import { fly } from "svelte/transition"
-
-    import wsx from "../wsx.js"
-
-    const {
-        alignLeft = false,
-        width = false,
-        children,
-        ...rest
-    } = $props()
-
-    const stack = getContext(ctxStack) ?? 0
-    const animation = {
-        y: window.innerHeight,
-        duration: 350
-    }
-
-    setContext(ctxStack, stack + 1)
-
-    const wind = $derived({
-        "@stack": stack.toString(),
-        "@screen-width": width,
-        "bg.c": "transparent",
-        $left: alignLeft,
-        ...rest
-    })
-</script>
-
-<ws-screen use:wsx={wind} transition:fly={animation}>
-    {@render children?.()}
-</ws-screen>

package/src/spinner/circle-spinner.svelte

@@ -1,18 +0,0 @@
-<script>
-    import wsx from "../wsx.js"
-
-    const {
-        size = "100px",
-        color = "@primary",
-        ...rest
-    } = $props()
-
-    const wind = $derived({
-        ...rest,
-        "@size": size,
-        "$color": color,
-    })
-</script>
-
-<!-- svelte-ignore element_invalid_self_closing_tag -->
-<ws-circle-spinner use:wsx={wind} style="aspect-ratio: 1 / 1;" />

package/src/spinner/hexagon-spinner.svelte

@@ -1,18 +0,0 @@
-<script>
-    import wsx from "../wsx.js"
-
-    const {
-        size = "100px",
-        color = "@primary",
-        ...rest
-    } = $props()
-
-    const wind = $derived({
-        ...rest,
-        "@size": size,
-        "$color": color,
-    })
-</script>
-
-<!-- svelte-ignore element_invalid_self_closing_tag -->
-<ws-hexagon-spinner use:wsx={wind} style="aspect-ratio: 1 / 1;" />

package/src/text.svelte

@@ -1,16 +0,0 @@
-<script>
-    import wsx from "./wsx.js"
-
-    const { adorn, subtitle, title, children, ...rest } = $props()
-
-    const wind = $derived({
-        "$title-text": title,
-        "$subtitle-text": subtitle,
-        "$adorn": adorn,
-        ...rest
-    })
-</script>
-
-<span use:wsx={wind}>
-    {@render children?.()}
-</span>