@axel669/zephyr 0.3.8 → 0.4.5

package/package.json

@@ -1,33 +1,40 @@
-{
-  "name": "@axel669/zephyr",
-  "version": "0.3.8",
-  "description": "",
-  "main": "src/index.mjs",
-  "type": "module",
-  "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1",
-    "demo": "rollup -c test/rollup.config.mjs"
-  },
-  "keywords": [],
-  "author": "",
-  "license": "MIT",
-  "dependencies": {
-    "@axel669/windstorm": "0.3.8"
-  },
-  "devDependencies": {
-    "@axel669/ipsen": "0.4.0-beta.7",
-    "@axel669/rollup-html-input": "^0.1.2",
-    "@rollup/plugin-node-resolve": "^15.0.2",
-    "@rollup/plugin-terser": "^0.4.0",
-    "prism-svelte": "^0.5.0",
-    "rollup": "^3.20.2",
-    "rollup-plugin-svelte": "^7.1.6",
-    "svelte": "^4.2.7"
-  },
-  "files": [
-    "src/"
-  ],
-  "imports": {
-    "#lib": "./src/index.mjs"
-  }
-}
+{
+  "name": "@axel669/zephyr",
+  "version": "0.4.5",
+  "description": "",
+  "main": "src/index.mjs",
+  "type": "module",
+  "scripts": {
+    "site/start": "wrangler pages dev site --port 45067",
+    "site/build": "rollup -c docsite/rollup.config.mjs",
+    "site/watch": "rollup -c docsite/rollup.config.mjs --watch"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "MIT",
+  "dependencies": {
+    "@axel669/rollup-copy-static": "^0.2.0",
+    "@axel669/windstorm": "0.4.5"
+  },
+  "devDependencies": {
+    "@axel669/asuid": "^0.2.1",
+    "@axel669/ipsen": "0.4.0-beta.7",
+    "@axel669/rollup-html-input": "^0.1.2",
+    "@rollup/plugin-node-resolve": "^15.0.2",
+    "@rollup/plugin-terser": "^0.4.0",
+    "marked": "^12.0.2",
+    "prism-svelte": "^0.5.0",
+    "prismjs": "^1.29.0",
+    "rollup": "^3.20.2",
+    "rollup-plugin-delete": "^2.0.0",
+    "rollup-plugin-svelte": "^7.1.6",
+    "svelte": "^4.2.7"
+  },
+  "files": [
+    "src/"
+  ],
+  "imports": {
+    "#lib": "./src/index.mjs",
+    "#comp/*": "./docsite/comp/*.svelte"
+  }
+}

package/src/async/button.svelte

@@ -4,6 +4,7 @@
 
     export let handler = null
     export let disabled
+    export let spincolor = "@primary"
 
     let running = false
     const asyncHandler = async (evt) => {
@@ -19,11 +20,18 @@
     }
 </script>
 
-<Button {...props} on:click={asyncHandler}>
-    <div ws-x="[h 20px] [m.r:not(:empty) 4px]">
-        {#if running === true}
-            <Spinner size="20px" />
-        {/if}
-    </div>
-    <slot />
-</Button>
+<async-button ws-x="[disp inline-grid] [gr.cols 1fr] [pos relative]">
+    <Button {...props} on:click={asyncHandler}>
+        <slot />
+    </Button>
+    {#if running === true}
+        <Spinner
+            size="unset"
+            pos="absolute"
+            x="50%" y="0px"
+            tf="translateX(-50%)"
+            h="100%"
+            color={spincolor}
+        />
+    {/if}
+</async-button>

package/src/composed/data-table/th.svelte

@@ -45,8 +45,8 @@
                 <slot />
             </div>
         {:else}
-            <Button compact r="0px" color="primary" fill={$context.fillHeader}
-            t.wt="inherit" on:click={setSort}>
+            <Button compact r="0px" fill={$context.fillHeader}
+            t.wt="inherit" on:click={setSort} color={$context.color}>
                 <slot />
                 <Icon name={sortIcon} m.l="4px" t.sz="16px" />
             </Button>

package/src/composed/data-table.svelte

@@ -51,7 +51,7 @@
     import wsx from "../wsx.mjs"
     import { handler$, eventHandler$ } from "../handler$.mjs"
 
-    export let color = false
+    export let color = "@primary"
     export let fillHeader = true
     export let data
     export let pageSize = 10
@@ -65,7 +65,7 @@
     let filterFunctions = []
     let jumpTarget = "1"
 
-    $: filteredData = applyFilters(data, filterFunctions)
+    $: filteredData = applyFilters(data, filterFunctions, sorting.func)
     $: rows = sliceData(filteredData, page, pageSize, sorting.func)
     $: rowCount = filteredData?.length ?? 0
     $: pageCount = Math.ceil(rowCount / pageSize)
@@ -114,6 +114,7 @@
         fillHeader,
         sorting,
         updateFilter,
+        color,
     }
     setContext(dtContext, context)
 
@@ -156,7 +157,7 @@
     }
 </script>
 
-<Paper {color} h={height}>
+<Paper {color} h={height} card>
     <ws-flex use:wsx={content} slot="content" bind:this={scroller}>
         <Table data={rows} {color} {fillHeader} {...$$restProps} b.t.w="0px">
             <tr use:wsx={header} slot="header">

package/src/composed/form.svelte

@@ -0,0 +1,60 @@
+<script context="module">
+    const identity = i => i
+    const alwaysGood = () => true
+</script>
+
+<script>
+    import Input from "../control/input.svelte"
+
+    export let fields
+    export let values
+    export let valid = {}
+
+    const refs = fields.reduce(
+        (refs, field) => {
+            refs[field.name] = {
+                vt: field.value.transform ?? identity,
+                t: field.value.out ?? identity,
+                v: field.value.validate ?? alwaysGood,
+                e: (value) => {
+                    if (valid[field.name] !== false) {
+                        return null
+                    }
+                    return field.value.error?.(value) ?? null
+                }
+            }
+            return refs
+        },
+        {}
+    )
+    let internal = fields.reduce(
+        (initial, field) => {
+            initial[field.name] = field.value.initial ?? ""
+            return initial
+        },
+        {}
+    )
+    let value = new Proxy(
+        {},
+        {
+            get(_, name) {
+                return internal[name]
+            },
+            set(_, name, value) {
+                const ref = refs[name]
+                internal[name] = ref.vt(value)
+                values = { ...values, [name]: ref.t(internal[name]) }
+                valid = { ...valid, [name]: ref.v(values[name]) }
+                return true
+            }
+        }
+    )
+</script>
+
+{#each fields as field}
+    <Input
+        {...field.props}
+        bind:value={value[field.name]}
+        error={refs[field.name].e(value[field.name])}
+    />
+{/each}

package/src/composed/table-functions.js

@@ -9,5 +9,7 @@ export const sorts = {
     natural: (propName) => {
         const comparitor = new Intl.Collator(undefined, { numeric: true })
         return (a, b) => comparitor.compare(a[propName], b[propName])
-    }
+    },
+    number: (propName) =>
+        (a, b) => a[propName] - b[propName]
 }

package/src/composed/toast/message.svelte

@@ -1,43 +1,13 @@
 <script>
-    /*md
-    [@] Components/ToastMessage
-
-    # ToastMessage
-
-    The default component for Toast to show messages with
-
-    ## Props
-
-### actionText
-`string`
-
-        If given, the message will have a button that can be clicked and will
-        use this text for the button text
-
-### color
-`string`
-
-        Sets `$color`
-
-### icon
-`string`
-
-        An icon to show with the message
-
-### message
-`string`
-
-        The message to show
-    */
-
     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 = ""
+    export let icon = false
     export let color = false
     export let actionText = null
 
@@ -47,10 +17,17 @@
 </script>
 
 <Notification {color} on:click={dismiss}>
-    <Icon name={icon}>{message}</Icon>
-    {#if actionText}
-        <Button {color} variant="fill" on:click={respond}>
-            {actionText}
-        </Button>
-    {/if}
+    <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/control/input.svelte

@@ -1,21 +1,5 @@
 <svelte:options immutable />
 
-<script context="module">
-    const parseNumeric = (value) => {
-        if (value === "") {
-            return null
-        }
-        return parseFloat(value)
-    }
-
-    const diff = (type, value, internal) => {
-        if ((type !== "number" && type !== "range") || typeof value === "string") {
-            return value !== internal
-        }
-        return parseFloat(internal) !== value
-    }
-</script>
-
 <script>
     import wsx from "../wsx.mjs"
 
@@ -24,20 +8,12 @@
     export let flat = false
     export let label
     export let color = "@default"
-    export let error = null
-    export let hint = null
     export let disabled
 
     export let value = ""
     export let autocompleteOptions = null
 
-    export let transform = i => i
-    export let tvalue
-    export let validate = () => true
-    export let valid
-
     let input = null
-    let internalValue = value
     export const focus = () => input.focus()
 
     const id =
@@ -45,17 +21,7 @@
         ? null
         : `${Math.random().toString(16)}_${Date.now()}`
 
-    $: isNumeric = (type === "number" || type === "range")
-    $: if (diff(type, value, internalValue) === true) {
-        internalValue = value
-    }
-
-    const update = (evt) => {
-        internalValue = evt.target.value
-        value = (isNumeric === true) ? parseNumeric(internalValue) : internalValue
-        tvalue = transform(value)
-        valid = validate(tvalue)
-    }
+    const update = (evt) => value = evt.target.value
 
     $: restKeys = Object.keys($$restProps)
     $: props = restKeys.reduce(
@@ -72,7 +38,7 @@
 
     $: wind = {
         "$flat": flat,
-        "@control": true,
+        "@@control": true,
         "$color": color,
         ...props.wind,
     }
@@ -80,16 +46,16 @@
     $: tag = (type === "area") ? "textarea" : "input"
 </script>
 
-<label use:wsx={wind} ws-error={error}>
+<label use:wsx={wind}>
     {#if label}
-        <span use:wsx={{ slot: "label-text" }} ws-hint={hint}>{label}</span>
+        <span use:wsx={{ "$label": true }}>{label}</span>
     {/if}
     <svelte:element
         this={tag}
         {...props.input}
         {disabled}
         {type}
-        value={internalValue}
+        {value}
         list={id}
         on:focus
         on:blur
@@ -97,8 +63,22 @@
         bind:this={input}
     />
 
-    <slot name="start" />
-    <slot name="end" />
+    {#if $$slots.start}
+        <span use:wsx={{ "$start": true }}>
+            <slot name="start" />
+        </span>
+    {/if}
+    {#if $$slots.end}
+        <span use:wsx={{ "$end": true }}>
+            <slot name="end" />
+        </span>
+    {/if}
+    {#if $$slots.extra}
+        <span use:wsx={{ "$extra": true }}>
+            <slot name="extra" />
+        </span>
+    {/if}
+
     {#if autocompleteOptions !== null}
         <datalist {id}>
             {#each autocompleteOptions as value}

package/src/control/label.svelte

@@ -20,7 +20,7 @@
     $: baseStyles =
         (button === true)
         ? {
-            "@button": true,
+            "@@button": true,
             [type]: true,
             "$color": color,
             $compact: compact,

package/src/control/link.svelte

@@ -20,7 +20,7 @@
     $: type = variant({ fill, outline, flat })
 
     $: wind = {
-        "@button": button,
+        "@@button": button,
         [type]: true,
         "$color": color,
         ...$$restProps

package/src/control/radio-group.svelte

@@ -0,0 +1,21 @@
+<svelte:options immutable />
+
+<script>
+    import wsx from "../wsx.mjs"
+    import { handler$ } from "../handler$.mjs"
+
+    import Flex from "../layout/flex.svelte"
+
+    export let options = []
+    export let layout = Flex
+    export let value
+</script>
+
+<svelte:component this={layout} {...$$restProps}>
+    {#each options as {value: itemValue, label, disabled, ...wind}, index (value)}
+        <label use:wsx={{"@@toggle": true, ...wind}} {disabled}>
+            <span>{label}</span>
+            <input type="radio" value={itemValue} bind:group={value} />
+        </label>
+    {/each}
+</svelte:component>

package/src/control/select.svelte

@@ -21,8 +21,8 @@
 
     export let options = []
     export let value
-    export let color = "default"
-    export let outline = false
+    export let color = "@default"
+    export let flat = false
     export let label = null
     export let disabled = false
 
@@ -33,8 +33,8 @@
     $: grouped = groupOptions(options)
 
     $: wind = {
-        "@control": true,
-        "$outline": outline,
+        "@@control": true,
+        "$flat": flat,
         "$color": color,
         ...$$restProps,
     }
@@ -42,7 +42,7 @@
 
 <label use:wsx={wind}>
     {#if label}
-        <span ws-x="[$label-text]">{label}</span>
+        <span ws-x="[$label]">{label}</span>
     {/if}
     <select value={indexValue} on:input={update} {disabled}>
         {#each grouped as item, index}

package/src/control/tabs.svelte

@@ -1,28 +1,19 @@
 <svelte:options immutable />
 
 <script>
+    import { writable } from "svelte/store"
+
     import wsx from "../wsx.mjs"
     import { handler$ } from "../handler$.mjs"
 
-    export let color = "@primary"
+    export let color = "@default"
     export let options = []
     export let vertical = false
-    export let solid = false
+    export let fill = false
     export let value
 
-    $: index = options.findIndex(item => item.value === value)
-
-    const set = handler$(
-        (next) => {
-            if (value === next) {
-                return
-            }
-            value = next
-        }
-    )
-
     $: wind = {
-        "$solid": solid,
+        "$fill": fill,
         "$color": color,
         $vert: vertical,
         ...$$restProps,
@@ -32,12 +23,9 @@
 <!-- svelte-ignore a11y-click-events-have-key-events -->
 <ws-tabs use:wsx={wind} role="tablist">
     {#each options as tab, i}
-        <!-- svelte-ignore a11y-interactive-supports-focus -->
-        <ws-tab use:wsx={{"$tab-selected": index === i}}
-        on:click={set(tab.value)} role="tab">
-            <slot {tab} selected={index === i}>
-                {tab.label}
-            </slot>
-        </ws-tab>
+        <label>
+            <input type="radio" value={tab.value} bind:group={value} />
+            <ws-tab>{tab.label}</ws-tab>
+        </label>
     {/each}
 </ws-tabs>

package/src/control/toggle.svelte

@@ -13,14 +13,14 @@
     export let reverse = false
 
     $: container = {
-        "@toggle": true,
+        "@@toggle": true,
         "$flat": flat,
         "$color": color,
         "fl.dir": reverse ? "row-reverse" : false,
         ...$$restProps,
     }
     $: input = {
-        "@switch": checkbox === false
+        "@@switch": checkbox === false
     }
 
     const updateGroup = (checked) => {

package/src/data-display/avatar.svelte

@@ -18,7 +18,10 @@
 
 <ws-avatar use:wsx={wind}>
     {#if image !== null}
-        <img src={image} {alt} />
+        <!-- svelte-ignore a11y-missing-attribute -->
+        <object data={image} type="image/png">
+            {alt}
+        </object>
     {:else}
         {text}
     {/if}

package/src/data-display/badge.svelte

@@ -3,7 +3,7 @@
 <script>
     import wsx from "../wsx.mjs"
 
-    export let color = "@default"
+    export let color = null
     export let text = ""
 
     $: wind = { "$color": color, ...$$restProps }

package/src/data-display/chip.svelte

@@ -16,7 +16,7 @@
     $: wind = {
         [type]: true,
         "$color": color,
-        $click: clickable,
+        "@@click": clickable,
         ...$$restProps
     }
 </script>

package/src/data-display/popover.svelte

@@ -18,7 +18,7 @@
 <ws-popover use:wsx={wind}>
     <slot {show} />
     {#if visible}
-        <wind-content slot="content" ws-x="[inset 0px]" transition:fade={anim}>
+        <wind-content ws-x="[$content] [inset 0px]" transition:fade={anim}>
             <slot name="content" {hide} />
         </wind-content>
     {/if}

package/src/data-display/progress.svelte

@@ -11,7 +11,7 @@
     export let label = null
 
     $: wind = {
-        "@progress": true,
+        "@@progress": true,
         "$outline": outline,
         "$color": color,
         $row: row,
@@ -21,7 +21,7 @@
 
 <label use:wsx={wind}>
     {#if label}
-        <span ws-x="[$progress-label] [t-ws nowrap]">{label}</span>
+        <span ws-x="[$progress-label] [t.ws nowrap]">{label}</span>
     {/if}
     <progress {value} {max} />
 </label>

package/src/data-display/table.svelte

@@ -3,7 +3,7 @@
 <script>
     import wsx from "../wsx.mjs"
 
-    export let color = false
+    export let color = "@default"
     export let fillHeader = false
     export let data = []
 

package/src/dialogs/confirm.svelte

@@ -34,11 +34,11 @@
         {message}
     </Text>
 
-    <Grid cols="1fr 1fr" slot="footer" pad="0px">
-        <Button on:click={cls(false)} color="danger">
+    <Grid cols="1fr 1fr" slot="footer" p="0px">
+        <Button on:click={cls(false)} color="@danger">
             {cancelText}
         </Button>
-        <Button on:click={cls(true)} color="secondary">
+        <Button on:click={cls(true)} color="@secondary">
             {okText}
         </Button>
     </Grid>

package/src/hash.js

@@ -3,9 +3,9 @@ import { readable } from "svelte/store"
 export const hash = readable(
     location.hash.slice(1),
     (set) => {
-        setInterval(
-            () => set(location.hash.slice(1)),
-            50
+        window.addEventListener(
+            "popstate",
+            () => set(location.hash.slice(1))
         )
     }
 )