@axel669/zephyr 0.5.5 → 1.0.0-beta.1

package/src/control/select.svelte

@@ -1,69 +0,0 @@
-<script module>
-    const groupOptions = (options) => options.reduce(
-        ({grouped, target = grouped}, item, pos) => {
-            const opt = { ... item, pos }
-            if (item.group === undefined) {
-                target.push(opt)
-                return { grouped, target }
-            }
-            const next = [opt]
-            grouped.push(next)
-            return { grouped, target: next }
-        },
-        { grouped: [] }
-    ).grouped
-</script>
-
-<script>
-    import wsx from "../wsx.js"
-
-    let {
-        disabled = false,
-        color = "@default",
-        flat = false,
-        label = null,
-        options = [],
-        value = $bindable(),
-        ...rest
-    } = $props()
-
-    const update = (evt) => value = options[evt.target.value].value
-
-    const indexValue = $derived(
-        options.findIndex(item => item.value === value)
-    )
-
-    const grouped = $derived(
-        groupOptions(options)
-    )
-
-    const wind = $derived({
-        "@@control": true,
-        "$flat": flat,
-        "$color": color,
-        ...rest,
-    })
-</script>
-
-<label use:wsx={wind}>
-    {#if label}
-        <span ws-x="[$label]">{label}</span>
-    {/if}
-    <select value={indexValue} oninput={update} {disabled}>
-        {#each grouped as item, index}
-            {#if Array.isArray(item) === false}
-                <option value={item.pos}>
-                    {item.label}
-                </option>
-            {:else}
-                <optgroup label={item[0].group}>
-                    {#each item.slice(1) as subitem, subindex}
-                        <option value={subitem.pos}>
-                            {subitem.label}
-                        </option>
-                    {/each}
-                </optgroup>
-            {/if}
-        {/each}
-    </select>
-</label>

package/src/control/tabs.svelte

@@ -1,35 +0,0 @@
-<script>
-    import { writable } from "svelte/store"
-
-    import wsx from "../wsx.js"
-    import { handler$ } from "../handler$.js"
-    import { splitProps } from "../props.js"
-
-    let {
-        color = "@default",
-        fill = false,
-        options = [],
-        value = $bindable(),
-        vertical = false,
-        ...rest
-    } = $props()
-
-    const props = $derived(
-        splitProps(rest, "t!")
-    )
-    const wind = $derived({
-        "$fill": fill,
-        "$color": color,
-        $vert: vertical,
-        ...props.rest,
-    })
-</script>
-
-<ws-tabs use:wsx={wind} role="tablist">
-    {#each options as tab, i}
-        <label>
-            <input type="radio" value={tab.value} bind:group={value} />
-            <ws-tab use:wsx={props["t!"]}>{tab.label}</ws-tab>
-        </label>
-    {/each}
-</ws-tabs>

package/src/control/toggle.svelte

@@ -1,60 +0,0 @@
-<script>
-    import wsx from "../wsx.js"
-
-    let {
-        color = "@default",
-        checkbox = false,
-        checked = $bindable(),
-        flat = false,
-        group = $bindable(),
-        label = "",
-        reverse = false,
-        value,
-        children,
-        ...rest
-    } = $props()
-
-    const container = $derived({
-        "@@toggle": true,
-        "$flat": flat,
-        "$color": color,
-        "fl.dir": reverse ? "row-reverse" : false,
-        ...rest,
-    })
-    const input = $derived({
-        "@@switch": checkbox === false
-    })
-
-    const updateGroup = (checked) => {
-        if (Array.isArray(group) === false) {
-            return
-        }
-        if (checked === true) {
-            if (group.includes(value) === true) {
-                return
-            }
-            group.push(value)
-            return
-        }
-        if (group.includes(value) === false) {
-            return
-        }
-        group.splice(group.indexOf(value), 1)
-    }
-    const get = () => checked
-    const set = (next) => {
-        checked = next
-        updateGroup(next)
-    }
-</script>
-
-<label use:wsx={container}>
-    <div>
-        {#if children}
-            {@render children()}
-        {:else}
-            {label}
-        {/if}
-    </div>
-    <input type="checkbox" bind:checked={get,set} use:wsx={input} />
-</label>

package/src/custom-macros.js

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

package/src/data-display/avatar.svelte

@@ -1,29 +0,0 @@
-<script>
-    import wsx from "../wsx.js"
-
-    let {
-        alt = "",
-        image = null,
-
-        text = "",
-
-        color = false,
-        ...rest
-    } = $props()
-
-    const wind = $derived({
-        "$color": color,
-        ...rest
-    })
-</script>
-
-<ws-avatar use:wsx={wind}>
-    {#if image !== null}
-        <!-- svelte-ignore a11y_missing_attribute -->
-        <object data={image} type="image/png">
-            {alt}
-        </object>
-    {:else}
-        {text}
-    {/if}
-</ws-avatar>

package/src/data-display/badge.svelte

@@ -1,16 +0,0 @@
-<script>
-    import wsx from "../wsx.js"
-
-    let {
-        color = null,
-        text = "",
-        children,
-        ...rest
-    } = $props()
-
-    const wind = $derived({ "$color": color, ...rest })
-</script>
-
-<ws-badge ws-text={text} use:wsx={wind}>
-    {@render children?.()}
-</ws-badge>

package/src/data-display/chip.svelte

@@ -1,38 +0,0 @@
-<script>
-    import wsx from "../wsx.js"
-    import variant from "../variant.js"
-
-    let {
-        color = "@default",
-        clickable = false,
-
-        fill = false,
-        outline = false,
-        flat = false,
-        children,
-        onclick,
-        ...rest
-    } = $props()
-
-    const type = $derived(
-        variant(
-            "$outline",
-            { fill },
-            { outline },
-            { flat },
-        )
-    )
-
-    const wind = $derived({
-        [type]: true,
-        "$color": color,
-        "@@click": clickable,
-        ...rest
-    })
-</script>
-
-<!-- svelte-ignore a11y_interactive_supports_focus -->
-<!-- svelte-ignore a11y_click_events_have_key_events -->
-<ws-chip use:wsx={wind} {onclick} role="button">
-    {@render children?.()}
-</ws-chip>

package/src/data-display/details.svelte

@@ -1,33 +0,0 @@
-<script>
-    import wsx from "../wsx.js"
-    import { splitProps } from "../props.js"
-
-    let {
-        label,
-        outline,
-        color = "@default",
-        open = false,
-        children,
-        ...rest
-    } = $props()
-
-    const props = $derived(
-        splitProps(rest, "s!")
-    )
-    const wind = $derived({
-        "$color": color,
-        "$outline": outline,
-        ...props.rest,
-    })
-</script>
-
-<details use:wsx={wind} bind:open>
-    <summary use:wsx={props["s!"]}>
-        {#if typeof label === "string"}
-            {label}
-        {:else}
-            {@render label?.()}
-        {/if}
-    </summary>
-    {@render children?.()}
-</details>

package/src/data-display/popover.svelte

@@ -1,28 +0,0 @@
-<script>
-    import { fade } from "svelte/transition"
-    import wsx from "../wsx.js"
-
-    let {
-        visible = $bindable(false),
-        content,
-        popover,
-        ...rest
-    } = $props()
-    const show = () => visible = true
-    const hide = () => visible = false
-    const anim = { duration: 250 }
-
-    const wind = $derived({
-        $show: true,
-        ...rest,
-    })
-</script>
-
-<ws-popover use:wsx={wind}>
-    {@render content?.(show)}
-    {#if visible}
-        <wind-content ws-x="[$content] [inset 0px]" transition:fade={anim}>
-            {@render popover?.(hide)}
-        </wind-content>
-    {/if}
-</ws-popover>

package/src/data-display/progress.svelte

@@ -1,25 +0,0 @@
-<script>
-    import wsx from "../wsx.js"
-
-    const {
-        buffer = 0,
-        busy = false,
-        color = "@default",
-        max = 1,
-        min = 0,
-        value = 0,
-        ...rest
-    } = $props()
-
-    const wind = $derived({
-        "$color": color,
-        ...rest,
-    })
-
-    const busyStatus = $derived(
-        (busy === true) ? { busy: true } : {}
-    )
-</script>
-
-<!-- svelte-ignore element_invalid_self_closing_tag -->
-<ws-progress use:wsx={wind} {...busyStatus} {min} {max} {value} {buffer} />

package/src/data-display/table.svelte

@@ -1,50 +0,0 @@
-<script>
-    import wsx from "../wsx.js"
-
-    const {
-        color = "@default",
-        data = [],
-        fillHeader = false,
-        stickyHeader = false,
-        cols = "1fr",
-        header,
-        row,
-        emptyRow,
-        ...rest
-    } = $props()
-
-    const wind = $derived({
-        "$color": color,
-        "$fill-header": fillHeader,
-        "$sticky-header": stickyHeader,
-        "gr.cols": cols,
-        ...rest,
-    })
-</script>
-
-<table use:wsx={wind}>
-    <thead>
-        {#if header}
-            {@render header()}
-        {:else}
-            <tr>
-                <th>No Header Template</th>
-            </tr>
-        {/if}
-    </thead>
-    <tbody>
-        {#each data as rowValue, rowNum}
-            {#if rowValue === undefined}
-                {@render emptyRow(rowNum)}
-            {:else}
-                {#if row}
-                    {@render row(rowValue, rowNum)}
-                {:else}
-                    <tr>
-                        <td>No Row Template</td>
-                    </tr>
-                {/if}
-            {/if}
-        {/each}
-    </tbody>
-</table>

package/src/data-display/tooltip.svelte

@@ -1,19 +0,0 @@
-<script>
-    import wsx from "../wsx.js"
-
-    const {
-        text = "",
-        bottom = false,
-        children,
-        ...rest
-    } = $props()
-
-    const wind = $derived({
-        $bottom: bottom,
-        ...rest,
-    })
-</script>
-
-<ws-tooltip ws-text={text} use:wsx={wind}>
-    {@render children?.()}
-</ws-tooltip>

package/src/dialogs/alert.svelte

@@ -1,41 +0,0 @@
-<script>
-    import Button from "../control/button.svelte"
-    import Dialog from "../layout/dialog.svelte"
-    import Icon from "../info/icon.svelte"
-    import Text from "../text.svelte"
-    import Titlebar from "../info/titlebar.svelte"
-    import { modalContext } from "../layout/modal.svelte"
-
-    const {
-        color = "@default",
-        icon,
-        message,
-        okText = "OK",
-        title: titleText = "Alert",
-    } = $props()
-    const { close } = modalContext()
-</script>
-
-<Dialog card {color}>
-    {#snippet header()}
-    <Titlebar {color}>
-        {#snippet title()}
-        <Text title>
-            <Icon name={icon}>
-                {titleText}
-            </Icon>
-        </Text>
-        {/snippet}
-    </Titlebar>
-    {/snippet}
-
-    <Text>
-        {message}
-    </Text>
-
-    {#snippet footer()}
-    <Button onclick={() => close(true)} {color} ground>
-        {okText}
-    </Button>
-    {/snippet}
-</Dialog>

package/src/dialogs/confirm.svelte

@@ -1,52 +0,0 @@
-<script>
-    import Button from "../control/button.svelte"
-    import Dialog from "../layout/dialog.svelte"
-    import Grid from "../layout/grid.svelte"
-    import Icon from "../info/icon.svelte"
-    import Text from "../text.svelte"
-    import Titlebar from "../info/titlebar.svelte"
-    import { modalContext } from "../layout/modal.svelte"
-
-    import { handler$ } from "../handler$.js"
-
-    const {
-        title: titleText = "Confirm",
-        icon,
-        message,
-        okText = "OK",
-        cancelText = "Cancel",
-        color = "@default",
-    } = $props()
-
-    const { close } = modalContext()
-    const cls = handler$(close)
-</script>
-
-<Dialog card {color}>
-    {#snippet header()}
-    <Titlebar {color}>
-        {#snippet title()}
-        <Text title>
-            <Icon name={icon}>
-                {titleText}
-            </Icon>
-        </Text>
-        {/snippet}
-    </Titlebar>
-    {/snippet}
-
-    <Text>
-        {message}
-    </Text>
-
-    {#snippet footer()}
-    <Grid cols="1fr 1fr" p="0px">
-        <Button onclick={cls(false)} color="@danger" ground>
-            {cancelText}
-        </Button>
-        <Button onclick={cls(true)} color="@secondary" ground>
-            {okText}
-        </Button>
-    </Grid>
-    {/snippet}
-</Dialog>

package/src/dialogs/prompt.svelte

@@ -1,67 +0,0 @@
-<script>
-    import Button from "../control/button.svelte"
-    import Dialog from "../layout/dialog.svelte"
-    import Grid from "../layout/grid.svelte"
-    import Icon from "../info/icon.svelte"
-    import Input from "../control/input.svelte"
-    import Text from "../text.svelte"
-    import Titlebar from "../info/titlebar.svelte"
-    import { modalContext } from "../layout/modal.svelte"
-
-    import { handler$ } from "../handler$.js"
-    import { frameDelay } from "../internals.js"
-
-    let {
-        title: titleText = "Confirm",
-        icon,
-        message,
-        okText = "OK",
-        cancelText = "Cancel",
-        color = "@default",
-        value = $bindable(""),
-        initial = ""
-    } = $props()
-
-    const { close } = modalContext()
-    const cls = handler$(close)
-    let input = $state(null)
-
-    const done = (evt) => {
-        evt.preventDefault()
-        evt.stopPropagation()
-        close(true)
-    }
-
-    // the first 1-2 frames it's in the DOM it's not visible, focus didn't work
-    frameDelay(3, () => input.focus())
-    value = initial
-</script>
-
-<Dialog card {color}>
-    {#snippet header()}
-    <Titlebar {color}>
-        {#snippet title()}
-        <Text title>
-            <Icon name={icon}>
-                {titleText}
-            </Icon>
-        </Text>
-        {/snippet}
-    </Titlebar>
-    {/snippet}
-
-    <form onsubmit={done} ws-x="[grid]">
-        <Input bind:value {color} bind:this={input} label={message} />
-    </form>
-
-    {#snippet footer()}
-    <Grid cols="1fr 1fr" p="0px">
-        <Button onclick={cls(false)} color="@danger" ground>
-            {cancelText}
-        </Button>
-        <Button onclick={cls(true)} color="@secondary" ground>
-            {okText}
-        </Button>
-    </Grid>
-    {/snippet}
-</Dialog>

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>