@axel669/zephyr 0.1.1 → 0.1.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@axel669/zephyr",
-  "version": "0.1.1",
+  "version": "0.1.3",
   "description": "",
   "main": "src/index.mjs",
   "type": "module",
@@ -12,10 +12,8 @@
   "author": "",
   "license": "MIT",
   "dependencies": {
-    "@axel669/windstorm": "^0.1.10",
-    "@labyrinthos/asuid": "^0.2.0"
-  },
-  "peerDependencies": {
+    "@axel669/windstorm": "0.1.13",
+    "@labyrinthos/asuid": "^0.2.0",
     "svelte": "^3.58.0"
   },
   "devDependencies": {

package/src/button.svelte

@@ -54,6 +54,7 @@
     export let color = "default"
     export let compact = false
     export let variant = "flat"
+    export let disabled
 
     let _for = ""
     export { _for as for }
@@ -70,11 +71,11 @@
 
 {#if label === true}
     <!-- svelte-ignore a11y-click-events-have-key-events -->
-    <label use:wsx={wind} for={_for} on:click|stopPropagation>
+    <label use:wsx={wind} {disabled} for={_for} on:click|stopPropagation>
         <slot />
     </label>
 {:else}
-    <button use:wsx={wind} on:click|stopPropagation>
+    <button use:wsx={wind} {disabled} on:click|stopPropagation>
         <slot />
     </button>
 {/if}

package/src/circle-spinner.svelte

@@ -0,0 +1,13 @@
+<script>
+    import wsx from "./wsx.mjs"
+
+    export let size = "100px"
+    export let color = "primary"
+
+    $: wind = {
+        "&size": size,
+        $color: color,
+    }
+</script>
+
+<ws-circle-spinner use:wsx={wind} />

package/src/composed/entry-button.svelte

@@ -13,7 +13,8 @@
     - ### component
         The component to show when clicked
     - ### props
-        The props to pass to the component when it is shown
+        The props to pass to the component when it is shown, or a function that
+        generates the props when called
     - ### this
         The wrapper for the component. Default is Modal but any component that
         has the same interface as Modal will work
@@ -53,7 +54,8 @@
     let element = null
     const open = handler$(
         async (props) => {
-            const result = await element.show(props)
+            const elemProps = (typeof props === "function") ? props() : props
+            const result = await element.show(elemProps)
             send("entry", result)
         }
     )

package/src/dialogs/alert.svelte

@@ -0,0 +1,32 @@
+<script>
+    import Button from "../button.svelte"
+    import Dialog from "../dialog.svelte"
+    import Icon from "../icon.svelte"
+    import Text from "../text.svelte"
+    import Titlebar from "../titlebar.svelte"
+
+    export let close
+    export let title = "Alert"
+    export let icon
+    export let message
+    export let okText = "OK"
+    export let color = "primary"
+</script>
+
+<Dialog card {color}>
+    <Titlebar slot="header" {color}>
+        <Text title slot="title">
+            <Icon name={icon}>
+                {title}
+            </Icon>
+        </Text>
+    </Titlebar>
+
+    <Text>
+        {message}
+    </Text>
+
+    <Button slot="footer" on:click={close} {color}>
+        {okText}
+    </Button>
+</Dialog>

package/src/dialogs/confirm.svelte

@@ -0,0 +1,43 @@
+<script>
+    import Button from "../button.svelte"
+    import Dialog from "../dialog.svelte"
+    import Grid from "../grid.svelte"
+    import Icon from "../icon.svelte"
+    import Text from "../text.svelte"
+    import Titlebar from "../titlebar.svelte"
+
+    import { handler$ } from "../handler$.mjs"
+
+    export let close
+    export let title = "Confirm"
+    export let icon
+    export let message
+    export let okText = "OK"
+    export let cancelText = "Cancel"
+    export let color = "primary"
+
+    const cls = handler$(close)
+</script>
+
+<Dialog card {color}>
+    <Titlebar slot="header" {color}>
+        <Text title slot="title">
+            <Icon name={icon}>
+                {title}
+            </Icon>
+        </Text>
+    </Titlebar>
+
+    <Text>
+        {message}
+    </Text>
+
+    <Grid cols="1fr 1fr" slot="footer" pad="0px">
+        <Button on:click={cls(false)} color="danger">
+            {cancelText}
+        </Button>
+        <Button on:click={cls(true)} color="secondary">
+            {okText}
+        </Button>
+    </Grid>
+</Dialog>

package/src/flex.svelte

@@ -20,9 +20,9 @@
     - ### gap `string`
         Sets `gap`
     - ### cross `string`
-        Sets `fl-cr-a`
+        Sets `fl-cr-a`, default is `"stretch"`
     - ### main `string`
-        Sets `fl-m-a`
+        Sets `fl-m-a`, default is `"start"`
 
     ## Usage
     ```svelte
@@ -39,7 +39,7 @@
     export let direction = false
     export let pad = false
     export let gap = false
-    export let cross = "start"
+    export let cross = "stretch"
     export let main = "start"
 
     $: wind = {

package/src/hexagon-spinner.svelte

@@ -0,0 +1,13 @@
+<script>
+    import wsx from "./wsx.mjs"
+
+    export let size = "100px"
+    export let color = "primary"
+
+    $: wind = {
+        "&size": size,
+        $color: color,
+    }
+</script>
+
+<ws-hexagon-spinner use:wsx={wind} />

package/src/index.mjs

@@ -72,6 +72,12 @@ export { default as Toaster } from "./toaster.svelte"
 export { default as Toggle } from "./toggle.svelte"
 export { default as Tooltip } from "./tooltip.svelte"
 
+export { default as CircleSpinner } from "./circle-spinner.svelte"
+export { default as HexagonSpinner } from "./hexagon-spinner.svelte"
+
+export { default as Alert } from "./dialogs/alert.svelte"
+export { default as Confirm } from "./dialogs/confirm.svelte"
+
 export { default as DataTable } from "./composed/data-table.svelte"
 export { default as EntryButton } from "./composed/entry-button.svelte"
 export { default as Toast } from "./composed/toast.svelte"

package/src/input/area.svelte

@@ -64,6 +64,7 @@
     export let color = "default"
     export let error = null
     export let hint = null
+    export let disabled
 
     export let value = ""
 
@@ -90,7 +91,7 @@
     {#if label}
         <span ws-x="$text" ws-hint={hint}>{label}</span>
     {/if}
-    <textarea {...$$restProps} bind:value on:focus on:blur bind:this={area} />
+    <textarea {disabled} {...$$restProps} bind:value on:focus on:blur bind:this={area} />
 
     <slot name="start" />
     <slot name="end" />

package/src/input/email.svelte

@@ -63,6 +63,7 @@
     export let color = "default"
     export let error = null
     export let hint = null
+    export let disabled
 
     export let value = ""
 
@@ -91,6 +92,7 @@
     {/if}
     <input {...$$restProps}
     type="email"
+    {disabled}
     bind:value
     on:focus
     on:blur

package/src/input/file.svelte

@@ -52,6 +52,7 @@
     export let color = "default"
     export let error = null
     export let hint = null
+    export let disabled
 
     export let value
 
@@ -74,7 +75,7 @@
     {#if label}
         <span ws-x="$text" ws-hint={hint}>{label}</span>
     {/if}
-    <input {...$$restProps} type="file" on:input={handler} />
+    <input {disabled} {...$$restProps} type="file" on:input={handler} />
 
     <slot name="start" />
     <slot name="end" />

package/src/input/number.svelte

@@ -63,6 +63,7 @@
     export let color = "default"
     export let error = null
     export let hint = null
+    export let disabled
 
     export let value = ""
 
@@ -91,6 +92,7 @@
     {/if}
     <input {...$$restProps}
     type="number"
+    {disabled}
     bind:value
     on:focus
     on:blur

package/src/input/password.svelte

@@ -63,6 +63,7 @@
     export let color = "default"
     export let error = null
     export let hint = null
+    export let disabled
 
     export let value = ""
 
@@ -88,6 +89,7 @@
     {/if}
     <input {...$$restProps}
     type="password"
+    {disabled}
     bind:value
     on:focus
     on:blur

package/src/input/search.svelte

@@ -63,6 +63,7 @@
     export let color = "default"
     export let error = null
     export let hint = null
+    export let disabled
 
     export let value = ""
 
@@ -90,6 +91,7 @@
         <span ws-x="$text" ws-hint={hint}>{label}</span>
     {/if}
     <input {...$$restProps}
+    {disabled}
     type="search"
     bind:value
     on:focus

package/src/input/text.svelte

@@ -63,6 +63,7 @@
     export let color = "default"
     export let error = null
     export let hint = null
+    export let disabled
 
     export let value = ""
 
@@ -91,6 +92,7 @@
     {/if}
     <input {...$$restProps}
     type="text"
+    {disabled}
     bind:value
     on:focus
     on:blur

package/src/modal.svelte

@@ -14,6 +14,11 @@
     that can be called to hide the component again. `close` can also be given
     an argument that will be used as the promise value from `show`.
 
+    If a component that a modal displays exports a `cancel` function, then
+    clicking the modal area outside the displayed component will call that
+    `cancel` function, allowing any modal component to decide when/if it is
+    closes in response to that event.
+
     ## Props
     Because the Modal does not render content of its own, it does not support
     any wind functions.

package/src/paper.svelte

@@ -27,8 +27,10 @@
         Sets the layout the card will use to display content. Default is Flex.
     - ### scrollable `bool`
         Sets `over[auto]` on the layout component
-    - ### lprops `Object`
-        An object with props to pass to the layout component
+    - ### l-*
+        Any prop that is prefixed with `l-` will be passed to the layout
+        component, with the remaining props acting as the normal wind functions
+        on the paper itself
 
     ## Slots
     - ### header
@@ -57,7 +59,7 @@
         <div>Content 2</div>
         <div>Content 3</div>
     </Paper>
-    <Paper>
+    <Paper l-pad="0px" m="4px">
         <Titlebar slot="header">
             <Text slot="title" title>
                 Some Screen
@@ -86,18 +88,29 @@
     export let card = false
     export let square = false
     export let layout = Flex
-    export let scrollable = false
-    export let lprops = {}
+    export let scrollable = true
+
+    $: props = Object.entries($$restProps).reduce(
+        (p, [key, value]) => {
+            const [target, name] =
+                (key.startsWith("l-") === true)
+                ? [ p.layout, key.slice(2) ]
+                : [ p.paper, key ]
+            target[name] = value
+            return p
+        },
+        { layout: {}, paper: {} }
+    )
 
-    $: props = {
+    $: layoutProps = {
         over: scrollable ? "auto" : false,
-        ...lprops,
+        ...props.layout,
     }
     $: wind = {
         $color: color,
         "@outline": card,
         r: square && "0px",
-        ...$$restProps
+        ...props.paper,
     }
 </script>
 
@@ -106,7 +119,7 @@
     {#if $$slots.content}
         <slot name="content" slot="content" />
     {:else}
-        <svelte:component this={layout} {...props} slot="content">
+        <svelte:component this={layout} {...layoutProps} slot="content">
             <slot />
         </svelte:component>
     {/if}

package/src/radio.svelte

@@ -73,8 +73,8 @@
 </script>
 
 <svelte:component this={layout} {...$$restProps}>
-    {#each options as {value, label, ...wind}, index (value)}
-        <label use:wsx={{"@toggle": true, ...wind}}>
+    {#each options as {value, label, disabled, ...wind}, index (value)}
+        <label use:wsx={{"@toggle": true, ...wind}} {disabled}>
             <span>{label}</span>
             <input type="radio" on:input={set(value)} {name} checked={index === valueIndex} />
         </label>

package/src/select.svelte

@@ -82,6 +82,7 @@
     export let color = "default"
     export let outline = false
     export let label = null
+    export let disabled = false
 
     const update = (evt) => value = options[evt.target.value].value
 
@@ -101,7 +102,7 @@
     {#if label}
         <span ws-x="$text">{label}</span>
     {/if}
-    <select value={indexValue} on:input={update}>
+    <select value={indexValue} on:input={update} {disabled}>
         {#each grouped as item, index}
             {#if Array.isArray(item) === false}
                 <option value={item.pos}>