@axel669/zephyr 0.5.4 → 1.0.0-beta.0

package/src/control/label.svelte

@@ -1,49 +0,0 @@
-<script>
-    import wsx from "../wsx.js"
-    import variant from "../variant.js"
-
-    const {
-        color = false,
-        compact = false,
-        ground = false,
-        disabled,
-
-        button = false,
-        fill = false,
-        outline = false,
-        flat = false,
-        for:_for = "",
-
-        children,
-        ...rest
-    } = $props()
-
-    const type = $derived(
-        variant(
-            "$flat",
-            { fill },
-            { outline },
-            { flat }
-        )
-    )
-    const baseStyles = $derived(
-        (button === true)
-        ? {
-            "@@button": true,
-            [type]: true,
-            "$color": color,
-            $compact: compact,
-            $ground: ground,
-        }
-        : {}
-    )
-
-    const wind = $derived({
-        ...baseStyles,
-        ...rest
-    })
-</script>
-
-<label use:wsx={wind} {disabled} for={_for}>
-    {@render children?.()}
-</label>

package/src/control/link.svelte

@@ -1,47 +0,0 @@
-<script>
-    import wsx from "../wsx.js"
-    import variant from "../variant.js"
-
-    const {
-        button = false,
-        color = false,
-        compact = false,
-        ground = false,
-
-        href = "",
-        rel = "noreferrer",
-        target = null,
-
-        fill = false,
-        outline = false,
-        flat = false,
-
-        disabled = null,
-
-        onclick,
-        children,
-        ...rest
-    } = $props()
-
-    const type = $derived(
-        variant(
-            "$flat",
-            { fill },
-            { outline },
-            { flat }
-        )
-    )
-
-    const wind = $derived({
-        "@@button": button,
-        [type]: true,
-        "$color": color,
-        $compact: compact,
-        $ground: ground,
-        ...rest
-    })
-</script>
-
-<a {href} {target} {rel} disabled={disabled || null} use:wsx={wind} {onclick}>
-    {@render children?.()}
-</a>

package/src/control/radio-group.svelte

@@ -1,24 +0,0 @@
-<script>
-    import wsx from "../wsx.js"
-    import { handler$ } from "../handler$.js"
-
-    import Flex from "../layout/flex.svelte"
-
-    let {
-        layout = Flex,
-        options = [],
-        value = $bindable(),
-        ...rest
-    } = $props()
-
-    const Layout = $derived(layout)
-</script>
-
-<Layout {...rest}>
-    {#each options as {value: itemValue, label, disabled, ...wind}, index (itemValue)}
-        <label use:wsx={{"@@toggle": true, ...wind}} {disabled}>
-            <span>{label}</span>
-            <input type="radio" value={itemValue} bind:group={value} />
-        </label>
-    {/each}
-</Layout>

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/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,40 +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"
-
-    const {
-        close,
-        color = "@primary",
-        icon,
-        message,
-        okText = "OK",
-        titleText = "Alert",
-    } = $props()
-</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} {color} ground>
-        {okText}
-    </Button>
-    {/snippet}
-</Dialog>

package/src/dialogs/confirm.svelte

@@ -1,51 +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 { handler$ } from "../handler$.js"
-
-    const {
-        close,
-        titleText = "Confirm",
-        icon,
-        message,
-        okText = "OK",
-        cancelText = "Cancel",
-        color = "@primary",
-    } = $props()
-
-    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>