@axel669/zephyr 0.4.7 → 0.5.4

package/src/spinner/circle-spinner.svelte

@@ -1,16 +1,18 @@
-<svelte:options immutable />
-
 <script>
-    import wsx from "../wsx.mjs"
+    import wsx from "../wsx.js"
 
-    export let size = "100px"
-    export let color = "@primary"
+    const {
+        size = "100px",
+        color = "@primary",
+        ...rest
+    } = $props()
 
-    $: wind = {
-        ...$$restProps,
+    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,16 +1,18 @@
-<svelte:options immutable />
-
 <script>
-    import wsx from "../wsx.mjs"
+    import wsx from "../wsx.js"
 
-    export let size = "100px"
-    export let color = "@primary"
+    const {
+        size = "100px",
+        color = "@primary",
+        ...rest
+    } = $props()
 
-    $: wind = {
-        ...$$restProps,
+    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,20 +1,16 @@
-<svelte:options immutable />
-
 <script>
-    import wsx from "./wsx.mjs"
+    import wsx from "./wsx.js"
 
-    export let title = false
-    export let subtitle = false
-    export let adorn = false
+    const { adorn, subtitle, title, children, ...rest } = $props()
 
-    $: wind = {
+    const wind = $derived({
         "$title-text": title,
         "$subtitle-text": subtitle,
         "$adorn": adorn,
-        ...$$restProps
-    }
+        ...rest
+    })
 </script>
 
 <span use:wsx={wind}>
-    <slot />
+    {@render children?.()}
 </span>

package/src/wind.js

@@ -0,0 +1,4 @@
+import "./custom-macros.js"
+import ws from "@axel669/windstorm"
+
+export default ws

package/src/{wsx.mjs → wsx.js}

@@ -1,4 +1,4 @@
-import ws from "@axel669/windstorm"
+import ws from "./wind.js"
 
 export const none = Symbol("none")
 export default (node, props) => {

package/src/async/load-zone.svelte

@@ -1,22 +0,0 @@
-<svelte:options immutable />
-
-<script>
-    import Spinner from "../spinner/hexagon-spinner.svelte"
-    export let source = null
-    export let message = "Loading"
-</script>
-
-{#if source !== null}
-    {#await source}
-        <slot name="loading">
-            <ws-flex ws-x="[fl-center]">
-                <span>{message}</span>
-                <Spinner size="100px" />
-            </ws-flex>
-        </slot>
-    {:then result}
-        <slot {result} />
-    {:catch error}
-        <slot name="error" {error} />
-    {/await}
-{/if}

package/src/composed/toast/message.svelte

@@ -1,33 +0,0 @@
-<script>
-    import { createEventDispatcher } from "svelte"
-
-    import Button from "../../control/button.svelte"
-    import Icon from "../../info/icon.svelte"
-    import Notification from "../../info/notification.svelte"
-    import Text from "../../text.svelte"
-
-    export let message = ""
-    export let icon = false
-    export let color = false
-    export let actionText = null
-
-    const dispatch = createEventDispatcher()
-    const dismiss = () => dispatch("action", null)
-    const respond = () => dispatch("action", true)
-</script>
-
-<Notification {color} on:click={dismiss}>
-    <Text slot="start" -adorn>
-        {#if icon !== false}
-            <Icon name={icon} />
-        {/if}
-    </Text>
-    <span>{message}</span>
-    <div slot="end" ws-x="[grid]">
-        {#if actionText}
-            <Button on:click={respond} r.l="0px">
-                {actionText}
-            </Button>
-        {/if}
-    </div>
-</Notification>

package/src/composed/toast.svelte

@@ -1,70 +0,0 @@
-<svelte:options immutable />
-
-<script context="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 { createEventDispatcher } from "svelte"
-    import { fade } from "svelte/transition"
-
-    import { eventHandler$ } from "../handler$.mjs"
-
-    import Toaster from "../info/toaster.svelte"
-
-    import ToastMessage from "./toast/message.svelte"
-
-    export let component = ToastMessage
-    export let position = "tc"
-
-    let items = []
-
-    const dispatch = createEventDispatcher()
-    const act = eventHandler$(
-        (evt, id, props) => {
-            delay.trigger(id)
-            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 = []
-</script>
-
-<Toaster {position} {...$$restProps}>
-    {#each items as {props, id} (id)}
-        <zephyr-toast-wrapper ws-x="[grid]" transition:fade={{duration: 200}}>
-            <svelte:component
-            this={component}
-            {...props}
-            on:action={act(id, props)}
-            />
-        </zephyr-toast-wrapper>
-    {/each}
-</Toaster>

package/src/info/notification.svelte

@@ -1,28 +0,0 @@
-<script>
-    import wsx from "../wsx.mjs"
-
-    export let color = false
-
-    $: wind = {
-        "$color": color,
-        ...$$restProps,
-    }
-</script>
-
-<!-- svelte-ignore a11y-click-events-have-key-events -->
-<!-- svelte-ignore a11y-interactive-supports-focus -->
-<ws-notification use:wsx={wind} on:click role="button">
-    {#if $$slots.start}
-        <div ws-x="[$start] [grid]">
-            <slot name="start" />
-        </div>
-    {/if}
-    <div ws-x="[$notif-text]">
-        <slot />
-    </div>
-    {#if $$slots.end}
-        <div ws-x="[$end] [grid]">
-            <slot name="end" />
-        </div>
-    {/if}
-</ws-notification>

package/src/inline-dialog.svelte

@@ -1,23 +0,0 @@
-<script>
-    import wsx from "../wsx.mjs"
-
-    import Paper from "./paper.svelte"
-
-    const id = Math.random().toString(16)
-
-    $: paper = {
-        "@dialog": true,
-        "$outline": true,
-        ...$$restProps
-    }
-</script>
-
-<slot name="toggle" {id} />
-<input type="checkbox" ws-x="hide" {id} />
-<ws-modal>
-    <ws-paper use:wsx={paper}>
-        <slot name="header" {id} />
-        <slot name="content" {id} />
-        <slot name="footer" {id} />
-    </ws-paper>
-</ws-modal>