@axel669/zephyr 0.3.6 → 0.4.4-beta.0

package/package.json

@@ -1,26 +1,32 @@
 {
   "name": "@axel669/zephyr",
-  "version": "0.3.6",
+  "version": "0.4.4-beta.0",
   "description": "",
   "main": "src/index.mjs",
   "type": "module",
   "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1",
-    "demo": "rollup -c test/rollup.config.mjs"
+    "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/windstorm": "0.3.6"
+    "@axel669/windstorm": "0.4.4"
   },
   "devDependencies": {
+    "@axel669/asuid": "^0.2.1",
     "@axel669/ipsen": "0.4.0-beta.7",
+    "@axel669/rollup-copy-static": "^0.1.2",
     "@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"
   },
@@ -28,6 +34,7 @@
     "src/"
   ],
   "imports": {
-    "#lib": "./src/index.mjs"
+    "#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

@@ -2,8 +2,8 @@
 
 <script context="module">
     const sortIcons = {
-        "asc": "arrow-narrow-up",
-        "desc": "arrow-narrow-down",
+        "asc": "arrow-up",
+        "desc": "arrow-down",
     }
 </script>
 
@@ -35,7 +35,7 @@
     $: sortIcon =
         ($context.sorting.base === sort)
         ? sortIcons[$context.sorting.direction]
-        : "arrows-up-down"
+        : "arrow-down-up"
 </script>
 
 <th use:wsx={wind} style="vertical-align: top;">
@@ -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">
@@ -176,10 +177,10 @@
     rows="32px" b="1px solid @color" b.b.w="4px">
         {#if pageCount > 0}
             <Button on:click={prev} disabled={page === 0}>
-                <Icon name="arrow-big-left" />
+                <Icon name="caret-left" />
             </Button>
             <Button on:click={next} disabled={page === maxPage}>
-                <Icon name="arrow-big-right" />
+                <Icon name="caret-right" />
             </Button>
             <Text adorn t.ws="nowrap">
                 Page

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/button.svelte

@@ -4,7 +4,7 @@
     import wsx from "../wsx.mjs"
     import variant from "../variant.mjs"
 
-    export let color = false
+    export let color = "@default"
     export let compact = false
     export let disabled
 

package/src/control/input.svelte

@@ -1,109 +1,89 @@
-<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"
-
-    export let type = "text"
-
-    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 =
-        (autocompleteOptions === null)
-        ? 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)
-    }
-
-    $: 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: {}}
-    )
-
-    $: wind = {
-        "$flat": flat,
-        "@control": true,
-        "$color": color,
-        ...props.wind,
-    }
-
-    $: tag = (type === "area") ? "textarea" : "input"
-</script>
-
-<label use:wsx={wind} ws-error={error}>
-    {#if label}
-        <span use:wsx={{ slot: "label-text" }} ws-hint={hint}>{label}</span>
-    {/if}
-    <svelte:element
-        this={tag}
-        {...props.input}
-        {disabled}
-        {type}
-        value={internalValue}
-        list={id}
-        on:focus
-        on:blur
-        on:input={update}
-        bind:this={input}
-    />
-
-    <slot name="start" />
-    <slot name="end" />
-    {#if autocompleteOptions !== null}
-        <datalist {id}>
-            {#each autocompleteOptions as value}
-                <option {value} />
-            {/each}
-        </datalist>
-    {/if}
-</label>
+<svelte:options immutable />
+
+<script>
+    import wsx from "../wsx.mjs"
+
+    export let type = "text"
+
+    export let flat = false
+    export let label
+    export let color = "@default"
+    export let disabled
+
+    export let value = ""
+    export let autocompleteOptions = null
+
+    let input = null
+    export const focus = () => input.focus()
+
+    const id =
+        (autocompleteOptions === null)
+        ? 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: {}}
+    )
+
+    $: wind = {
+        "$flat": flat,
+        "@@control": true,
+        "$color": color,
+        ...props.wind,
+    }
+
+    $: tag = (type === "area") ? "textarea" : "input"
+</script>
+
+<label use:wsx={wind}>
+    {#if label}
+        <span use:wsx={{ "$label": true }}>{label}</span>
+    {/if}
+    <svelte:element
+        this={tag}
+        {...props.input}
+        {disabled}
+        {type}
+        {value}
+        list={id}
+        on:focus
+        on:blur
+        on:input={update}
+        bind:this={input}
+    />
+
+    {#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}
+                <option {value} />
+            {/each}
+        </datalist>
+    {/if}
+</label>

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

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

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}