@axel669/zephyr 0.4.7 → 0.5.4

package/src/control/input.svelte

@@ -1,23 +1,31 @@
-<svelte:options immutable />
-
 <script>
-    import wsx, { none } from "../wsx.mjs"
-    import variant from "../variant.mjs"
+    import wsx, { none } from "../wsx.js"
+    import variant from "../variant.js"
+    import { splitProps } from "../props.js"
+
+    let {
+        type = "text",
+
+        flat = false,
+        lined = false,
+        linedFill = false,
+        outline = false,
+        label,
+        color = "@default",
+        disabled,
 
-    export let type = "text"
+        value = $bindable(""),
+        autocompleteOptions = null,
 
-    export let flat = false
-    export let lined = false
-    export let linedFill = false
-    export let outline = false
-    export let label
-    export let color = "@default"
-    export let disabled
+        start,
+        end,
+        extra,
 
-    export let value = ""
-    export let autocompleteOptions = null
+        oninput,
+        ...rest
+    } = $props()
 
-    let input = null
+    let input = $state(null)
     export const focus = () => input.focus()
 
     const id =
@@ -25,37 +33,33 @@
         ? null
         : `${Math.random().toString(16)}_${Date.now()}`
 
-    const update = (evt) => value = evt.target.value
-
-    $: restKeys = Object.keys($$restProps)
-    $: props = restKeys.reduce(
-        (props, key) => {
-            const [target, name] =
-                (key.startsWith("i-") === true)
-                ? [props.input, key.slice(2)]
-                : [props.wind, key]
-            target[name] = $$restProps[key]
-            return props
-        },
-        {wind: {}, input: {}}
-    )
+    const prop = splitProps(rest, "i!")
 
-    $: variantStyle = variant(
-        none,
-        { outline },
-        { linedFill },
-        { lined },
-        { flat }
+    const variantStyle = $derived(
+        variant(
+            none,
+            { outline },
+            { linedFill },
+            { lined },
+            { flat }
+        )
     )
 
-    $: wind = {
+    const wind = $derived({
         [variantStyle]: true,
         "@@control": true,
         "$color": color,
-        ...props.wind,
-    }
+        ...prop.rest,
+    })
+
+    const tag = $derived(
+        (type === "area") ? "textarea" : "input"
+    )
 
-    $: tag = (type === "area") ? "textarea" : "input"
+    const update = (evt) => {
+        value = evt.target.value
+        oninput?.(evt)
+    }
 </script>
 
 <label use:wsx={wind}>
@@ -64,37 +68,35 @@
     {/if}
     <svelte:element
         this={tag}
-        {...props.input}
+        {...prop.input}
         {disabled}
         {type}
         {value}
+        oninput={update}
         list={id}
-        on:focus
-        on:blur
-        on:input={update}
         bind:this={input}
     />
 
-    {#if $$slots.start}
+    {#if start}
         <span use:wsx={{ "$start": true }}>
-            <slot name="start" />
+            {@render start()}
         </span>
     {/if}
-    {#if $$slots.end}
+    {#if end}
         <span use:wsx={{ "$end": true }}>
-            <slot name="end" />
+            {@render end()}
         </span>
     {/if}
-    {#if $$slots.extra}
+    {#if extra}
         <span use:wsx={{ "$extra": true }}>
-            <slot name="extra" />
+            {@render extra()}
         </span>
     {/if}
 
     {#if autocompleteOptions !== null}
         <datalist {id}>
             {#each autocompleteOptions as value}
-                <option {value} />
+                <option {value}>{value}</option>
             {/each}
         </datalist>
     {/if}

package/src/control/label.svelte

@@ -1,29 +1,32 @@
-<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 = false
-    export let compact = false
-    export let ground = false
-    export let disabled
+    const {
+        color = false,
+        compact = false,
+        ground = false,
+        disabled,
 
-    export let fill = false
-    export let outline = false
-    export let flat = false
+        button = false,
+        fill = false,
+        outline = false,
+        flat = false,
+        for:_for = "",
 
-    let _for = ""
-    export { _for as for }
-    export let button = false
+        children,
+        ...rest
+    } = $props()
 
-    $: type = variant(
-        "$flat",
-        { fill },
-        { outline },
-        { flat }
+    const type = $derived(
+        variant(
+            "$flat",
+            { fill },
+            { outline },
+            { flat }
+        )
     )
-    $: baseStyles =
+    const baseStyles = $derived(
         (button === true)
         ? {
             "@@button": true,
@@ -33,13 +36,14 @@
             $ground: ground,
         }
         : {}
+    )
 
-    $: wind = {
+    const wind = $derived({
         ...baseStyles,
-        ...$$restProps
-    }
+        ...rest
+    })
 </script>
 
 <label use:wsx={wind} {disabled} for={_for}>
-    <slot />
+    {@render children?.()}
 </label>

package/src/control/link.svelte

@@ -1,41 +1,47 @@
-<svelte:options immutable />
-
 <script>
-    import wsx from "../wsx.mjs"
-    import variant from "../variant.mjs"
-
-    export let button = false
-    export let color = false
-    export let compact = false
-    export let ground = false
-
-    export let href = ""
-    export let rel = "noreferrer"
-    export let target = null
-
-    export let fill = false
-    export let outline = false
-    export let flat = false
-
-    export let disabled = null
-
-    $: type = variant(
-        "$flat",
-        { fill },
-        { outline },
-        { flat }
+    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 }
+        )
     )
 
-    $: wind = {
+    const wind = $derived({
         "@@button": button,
         [type]: true,
         "$color": color,
         $compact: compact,
         $ground: ground,
-        ...$$restProps
-    }
+        ...rest
+    })
 </script>
 
-<a {href} {target} {rel} disabled={disabled || null} use:wsx={wind} on:click>
-    <slot />
+<a {href} {target} {rel} disabled={disabled || null} use:wsx={wind} {onclick}>
+    {@render children?.()}
 </a>

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/custom-macros.js

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