@axel669/zephyr 0.4.5 → 0.4.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@axel669/zephyr",
-  "version": "0.4.5",
+  "version": "0.4.6",
   "description": "",
   "main": "src/index.mjs",
   "type": "module",
@@ -14,7 +14,7 @@
   "license": "MIT",
   "dependencies": {
     "@axel669/rollup-copy-static": "^0.2.0",
-    "@axel669/windstorm": "0.4.5"
+    "@axel669/windstorm": "0.4.6"
   },
   "devDependencies": {
     "@axel669/asuid": "^0.2.1",

package/src/composed/element-toast.svelte

@@ -0,0 +1,96 @@
+<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()
+
+    const macros = {
+        top: {
+            "-y": "100%",
+            flex: "column-reverse",
+        },
+        bottom: {
+            "y": "100%",
+            flex: "column"
+        },
+    }
+</script>
+
+<script>
+    import { createEventDispatcher } from "svelte"
+    import { fade } from "svelte/transition"
+
+    import { eventHandler$ } from "../handler$.mjs"
+    import wsx from "../wsx.mjs"
+
+    import Toaster from "../info/toaster.svelte"
+
+    import ToastMessage from "./toast/message.svelte"
+
+    export let component = ToastMessage
+    export let position = "top"
+
+    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 = []
+
+
+    $: wind = {
+        gap: "8px",
+        pos: "absolute",
+        x: "50%",
+        z: "50",
+        tf: "translateX(-50%)",
+        ...macros[position],
+        ...$$restProps,
+    }
+</script>
+
+<zephyr-element-toaster ws-x="[disp inline-grid] [pos relative]">
+    <slot {show} />
+    <zephyr-element-toast-messages use:wsx={wind}>
+        {#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}
+    </zephyr-element-toast-messages>
+</zephyr-element-toaster>

package/src/control/button.svelte

@@ -6,18 +6,26 @@
 
     export let color = false
     export let compact = false
+    export let ground = false
     export let disabled
 
     export let fill = false
     export let outline = false
     export let flat = false
 
-    $: type = variant({ fill, outline, flat })
+    // $: type = variant({ fill, outline, flat })
+    $: type = variant(
+        "$flat",
+        { fill },
+        { outline },
+        { flat }
+    )
 
     $: wind = {
         [type]: true,
         "$color": color,
         $compact: compact,
+        $ground: ground,
         ...$$restProps
     }
 </script>

package/src/control/input.svelte

@@ -1,11 +1,15 @@
 <svelte:options immutable />
 
 <script>
-    import wsx from "../wsx.mjs"
+    import wsx, { none } from "../wsx.mjs"
+    import variant from "../variant.mjs"
 
     export let type = "text"
 
     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
@@ -36,8 +40,16 @@
         {wind: {}, input: {}}
     )
 
+    $: variantStyle = variant(
+        none,
+        { outline },
+        { linedFill },
+        { lined },
+        { flat }
+    )
+
     $: wind = {
-        "$flat": flat,
+        [variantStyle]: true,
         "@@control": true,
         "$color": color,
         ...props.wind,

package/src/control/label.svelte

@@ -6,6 +6,7 @@
 
     export let color = false
     export let compact = false
+    export let ground = false
     export let disabled
 
     export let fill = false
@@ -16,7 +17,12 @@
     export { _for as for }
     export let button = false
 
-    $: type = variant({ fill, outline, flat })
+    $: type = variant(
+        "$flat",
+        { fill },
+        { outline },
+        { flat }
+    )
     $: baseStyles =
         (button === true)
         ? {
@@ -24,6 +30,7 @@
             [type]: true,
             "$color": color,
             $compact: compact,
+            $ground: ground,
         }
         : {}
 

package/src/control/link.svelte

@@ -6,6 +6,8 @@
 
     export let button = false
     export let color = false
+    export let compact = false
+    export let ground = false
 
     export let href = ""
     export let rel = "noreferrer"
@@ -17,12 +19,19 @@
 
     export let disabled = null
 
-    $: type = variant({ fill, outline, flat })
+    $: type = variant(
+        "$flat",
+        { fill },
+        { outline },
+        { flat }
+    )
 
     $: wind = {
         "@@button": button,
         [type]: true,
         "$color": color,
+        $compact: compact,
+        $ground: ground,
         ...$$restProps
     }
 </script>

package/src/data-display/progress.svelte

@@ -4,24 +4,18 @@
     import wsx from "../wsx.mjs"
 
     export let value = 0
+    export let min = 0
     export let max = 1
-    export let color = "default"
-    export let outline = false
-    export let row = false
-    export let label = null
+    export let buffer = 0
+    export let busy = false
+    export let color = "@default"
 
     $: wind = {
-        "@@progress": true,
-        "$outline": outline,
         "$color": color,
-        $row: row,
         ...$$restProps,
     }
+
+    $: busyStatus = (busy === true) ? { busy: true } : {}
 </script>
 
-<label use:wsx={wind}>
-    {#if label}
-        <span ws-x="[$progress-label] [t.ws nowrap]">{label}</span>
-    {/if}
-    <progress {value} {max} />
-</label>
+<ws-progress use:wsx={wind} {...busyStatus} {min} {max} {value} {buffer} />

package/src/index.mjs

@@ -40,6 +40,7 @@ export { default as Confirm } from "./dialogs/confirm.svelte"
 
 export { default as DataTable } from "./composed/data-table.svelte"
 export { default as TH } from "./composed/data-table/th.svelte"
+export { default as ElementToast } from "./composed/element-toast.svelte"
 export { default as EntryButton } from "./composed/entry-button.svelte"
 export { default as Form } from "./composed/form.svelte"
 export { default as Toast } from "./composed/toast.svelte"

package/src/variant.mjs

@@ -1,12 +1,10 @@
-export default ({ flat, fill, outline }, def = "$flat") => {
-    if (outline === true) {
-        return "$outline"
-    }
-    if (fill === true) {
-        return "$fill"
-    }
-    if (flat === true) {
-        return "$flat"
+export default (def, ...variants) => {
+    for (const variant of variants) {
+        const [entry] = Object.entries(variant)
+        const [key, value] = entry
+        if (value === true) {
+            return `$${key.replace(/[A-Z]/g, (s) => `-${s.toLocaleLowerCase()}`)}`
+        }
     }
     return def
 }

package/src/wsx.mjs

@@ -1,5 +1,6 @@
 import ws from "@axel669/windstorm"
 
+export const none = Symbol("none")
 export default (node, props) => {
     const update = (props) => {
         const { slot = null, ...goodProps } = props ?? {}
@@ -9,7 +10,10 @@ export default (node, props) => {
         }
         const formatted = Object.entries(goodProps).reduce(
             (props, [key, value]) => {
-                const realKey = key.replaceAll("--", ":").replace(/^\-/, "$")
+                if (key === none) {
+                    return props
+                }
+                const realKey = key.replace(/^!/, "").replaceAll("_", ":")
                 props[realKey] = value
                 return props
             },