@axel669/zephyr 0.4.7 → 0.5.0-alpha.0

package/src/control/radio-group.svelte

@@ -1,21 +1,24 @@
-<svelte:options immutable />
-
 <script>
-    import wsx from "../wsx.mjs"
-    import { handler$ } from "../handler$.mjs"
+    import wsx from "../wsx.js"
+    import { handler$ } from "../handler$.js"
 
     import Flex from "../layout/flex.svelte"
 
-    export let options = []
-    export let layout = Flex
-    export let value
+    let {
+        layout = Flex,
+        options = [],
+        value = $bindable(),
+        ...rest
+    } = $props()
+
+    const Layout = $derived(layout)
 </script>
 
-<svelte:component this={layout} {...$$restProps}>
-    {#each options as {value: itemValue, label, disabled, ...wind}, index (value)}
+<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}
-</svelte:component>
+</Layout>

package/src/control/select.svelte

@@ -1,6 +1,4 @@
-<svelte:options immutable />
-
-<script context="module">
+<script module>
     const groupOptions = (options) => options.reduce(
         ({grouped, target = grouped}, item, pos) => {
             const opt = { ... item, pos }
@@ -17,34 +15,41 @@
 </script>
 
 <script>
-    import wsx from "../wsx.mjs"
+    import wsx from "../wsx.js"
 
-    export let options = []
-    export let value
-    export let color = "@default"
-    export let flat = false
-    export let label = null
-    export let disabled = false
+    let {
+        disabled = false,
+        color = "@default",
+        flat = false,
+        label = null,
+        options = [],
+        value = $bindable(),
+        ...rest
+    } = $props()
 
     const update = (evt) => value = options[evt.target.value].value
 
-    $: indexValue = options.findIndex(item => item.value === value)
+    const indexValue = $derived(
+        options.findIndex(item => item.value === value)
+    )
 
-    $: grouped = groupOptions(options)
+    const grouped = $derived(
+        groupOptions(options)
+    )
 
-    $: wind = {
+    const wind = $derived({
         "@@control": true,
         "$flat": flat,
         "$color": color,
-        ...$$restProps,
-    }
+        ...rest,
+    })
 </script>
 
 <label use:wsx={wind}>
     {#if label}
         <span ws-x="[$label]">{label}</span>
     {/if}
-    <select value={indexValue} on:input={update} {disabled}>
+    <select value={indexValue} oninput={update} {disabled}>
         {#each grouped as item, index}
             {#if Array.isArray(item) === false}
                 <option value={item.pos}>

package/src/control/tabs.svelte

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

package/src/control/toggle.svelte

@@ -1,49 +1,60 @@
-<svelte:options immutable />
-
 <script>
-    import wsx from "../wsx.mjs"
+    import wsx from "../wsx.js"
 
-    export let label = ""
-    export let color = "@default"
-    export let checked = false
-    export let flat = false
-    export let value
-    export let group = []
-    export let checkbox = false
-    export let reverse = false
+    let {
+        color = "@default",
+        checkbox = false,
+        checked = $bindable(),
+        flat = false,
+        group = $bindable(),
+        label = "",
+        reverse = false,
+        value,
+        children,
+        ...rest
+    } = $props()
 
-    $: container = {
+    const container = $derived({
         "@@toggle": true,
         "$flat": flat,
         "$color": color,
         "fl.dir": reverse ? "row-reverse" : false,
-        ...$$restProps,
-    }
-    $: input = {
+        ...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 = [...group, value]
+            group.push(value)
             return
         }
         if (group.includes(value) === false) {
             return
         }
-        group = group.filter(item => item !== value)
+        group.splice(group.indexOf(value), 1)
+    }
+    const get = () => checked
+    const set = (next) => {
+        checked = next
+        updateGroup(next)
     }
-    $: updateGroup(checked)
 </script>
 
 <label use:wsx={container}>
     <div>
-        <slot>
+        {#if children}
+            {@render children()}
+        {:else}
             {label}
-        </slot>
+        {/if}
     </div>
-    <input type="checkbox" bind:checked use:wsx={input} />
+    <input type="checkbox" bind:checked={get,set} use:wsx={input} />
 </label>

package/src/data-display/avatar.svelte

@@ -1,24 +1,25 @@
-<svelte:options immutable />
-
 <script>
-    import wsx from "../wsx.mjs"
+    import wsx from "../wsx.js"
 
-    export let alt = ""
-    export let image = null
+    let {
+        alt = "",
+        image = null,
 
-    export let text = ""
+        text = "",
 
-    export let color = false
+        color = false,
+        ...rest
+    } = $props()
 
-    $: wind = {
+    const wind = $derived({
         "$color": color,
-        ...$$restProps
-    }
+        ...rest
+    })
 </script>
 
 <ws-avatar use:wsx={wind}>
     {#if image !== null}
-        <!-- svelte-ignore a11y-missing-attribute -->
+        <!-- svelte-ignore a11y_missing_attribute -->
         <object data={image} type="image/png">
             {alt}
         </object>

package/src/data-display/badge.svelte

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

package/src/data-display/chip.svelte

@@ -1,28 +1,38 @@
-<svelte:options immutable />
-
 <script>
-    import wsx from "../wsx.mjs"
-    import variant from "../variant.mjs"
+    import wsx from "../wsx.js"
+    import variant from "../variant.js"
 
-    export let color = "@default"
-    export let clickable = false
+    let {
+        color = "@default",
+        clickable = false,
 
-    export let fill = false
-    export let outline = false
-    export let flat = false
+        fill = false,
+        outline = false,
+        flat = false,
+        children,
+        onclick,
+        ...rest
+    } = $props()
 
-    $: type = variant({ fill, flat, outline }, "$outline")
+    const type = $derived(
+        variant(
+            "$outline",
+            { fill },
+            { outline },
+            { flat },
+        )
+    )
 
-    $: wind = {
+    const wind = $derived({
         [type]: true,
         "$color": color,
         "@@click": clickable,
-        ...$$restProps
-    }
+        ...rest
+    })
 </script>
 
-<!-- svelte-ignore a11y-click-events-have-key-events -->
-<!-- svelte-ignore a11y-interactive-supports-focus -->
-<ws-chip use:wsx={wind} on:click role="button">
-    <slot />
+<!-- 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,25 +1,33 @@
-<svelte:options immutable />
-
 <script>
-    import wsx from "../wsx.mjs"
+    import wsx from "../wsx.js"
+    import { splitProps } from "../props.js"
 
-    export let label
-    export let outline
-    export let color = "@default"
-    export let open = false
+    let {
+        label,
+        outline,
+        color = "@default",
+        open = false,
+        children,
+        ...rest
+    } = $props()
 
-    $: wind = {
+    const props = $derived(
+        splitProps(rest, "s!")
+    )
+    const wind = $derived({
         "$color": color,
         "$outline": outline,
-        ...$$restProps,
-    }
+        ...props.rest,
+    })
 </script>
 
 <details use:wsx={wind} bind:open>
-    <summary>
-        <slot name="label">
+    <summary use:wsx={props["s!"]}>
+        {#if typeof label === "string"}
             {label}
-        </slot>
+        {:else}
+            {@render label?.()}
+        {/if}
     </summary>
-    <slot />
+    {@render children?.()}
 </details>

package/src/data-display/popover.svelte

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

package/src/data-display/progress.svelte

@@ -1,21 +1,25 @@
-<svelte:options immutable />
-
 <script>
-    import wsx from "../wsx.mjs"
+    import wsx from "../wsx.js"
 
-    export let value = 0
-    export let min = 0
-    export let max = 1
-    export let buffer = 0
-    export let busy = false
-    export let color = "@default"
+    const {
+        buffer = 0,
+        busy = false,
+        color = "@default",
+        max = 1,
+        min = 0,
+        value = 0,
+        ...rest
+    } = $props()
 
-    $: wind = {
+    const wind = $derived({
         "$color": color,
-        ...$$restProps,
-    }
+        ...rest,
+    })
 
-    $: busyStatus = (busy === true) ? { busy: true } : {}
+    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,37 +1,45 @@
-<svelte:options immutable />
-
 <script>
-    import wsx from "../wsx.mjs"
+    import wsx from "../wsx.js"
 
-    export let color = "@default"
-    export let fillHeader = false
-    export let data = []
+    const {
+        color = "@default",
+        data = [],
+        fillHeader = false,
+        header,
+        row,
+        emptyRow,
+        ...rest
+    } = $props()
 
-    $: wind = {
+    const wind = $derived({
         "$color": color,
         "$header-fill": fillHeader,
-        ...$$restProps,
-    }
+        ...rest,
+    })
 </script>
 
 <table use:wsx={wind}>
     <thead>
-        <slot name="header">
+        {#if header}
+            {@render header()}
+        {:else}
             <tr>
                 <th>No Header Template</th>
             </tr>
-        </slot>
+        {/if}
     </thead>
     <tbody>
-        {#each data as row, rowNum}
-            {#if row === undefined}
-                <slot name="empty-row" {rowNum} />
+        {#each data as rowValue, rowNum}
+            {#if rowValue === undefined}
+                {@render emptyRow(rowNum)}
             {:else}
-                <slot name="row" {row} {rowNum}>
+                {#if row}
+                    {@render row(rowValue, rowNum)}
+                {:else}
                     <tr>
                         <td>No Row Template</td>
                     </tr>
-                </slot>
+                {/if}
             {/if}
         {/each}
     </tbody>

package/src/data-display/tooltip.svelte

@@ -1,17 +1,19 @@
-<svelte:options immutable />
-
 <script>
-    import wsx from "../wsx.mjs"
+    import wsx from "../wsx.js"
 
-    export let text = ""
-    export let bottom = false
+    const {
+        text = "",
+        bottom = false,
+        children,
+        ...rest
+    } = $props()
 
-    $: wind = {
+    const wind = $derived({
         $bottom: bottom,
-        ...$$restProps,
-    }
+        ...rest,
+    })
 </script>
 
 <ws-tooltip ws-text={text} use:wsx={wind}>
-    <slot />
+    {@render children?.()}
 </ws-tooltip>

package/src/dialogs/alert.svelte

@@ -1,5 +1,3 @@
-<svelte:options immutable />
-
 <script>
     import Button from "../control/button.svelte"
     import Dialog from "../layout/dialog.svelte"
@@ -7,28 +5,37 @@
     import Text from "../text.svelte"
     import Titlebar from "../info/titlebar.svelte"
 
-    export let close
-    export let title = "Alert"
-    export let icon
-    export let message
-    export let okText = "OK"
-    export let color = "@primary"
+    const {
+        close,
+        color = "@primary",
+        icon,
+        message,
+        okText = "OK",
+        titleText = "Alert",
+        ...rest
+    } = $props()
 </script>
 
 <Dialog card {color}>
-    <Titlebar slot="header" {color}>
-        <Text title slot="title">
+    {#snippet header()}
+    <Titlebar {color}>
+        {#snippet title()}
+        <Text title>
             <Icon name={icon}>
-                {title}
+                {titleText}
             </Icon>
         </Text>
+        {/snippet}
     </Titlebar>
+    {/snippet}
 
     <Text>
         {message}
     </Text>
 
-    <Button slot="footer" on:click={close} {color}>
+    {#snippet footer()}
+    <Button onclick={close} {color} ground>
         {okText}
     </Button>
+    {/snippet}
 </Dialog>