@axel669/zephyr 0.2.0-beta.0 → 0.2.0-beta.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@axel669/zephyr",
-  "version": "0.2.0-beta.0",
+  "version": "0.2.0-beta.2",
   "description": "",
   "main": "src/index.mjs",
   "type": "module",
@@ -12,11 +12,10 @@
   "author": "",
   "license": "MIT",
   "dependencies": {
-    "@axel669/windstorm": "0.2.3",
-    "@labyrinthos/asuid": "^0.2.0"
+    "@axel669/windstorm": "0.2.3"
   },
   "devDependencies": {
-    "@axel669/ipsen": "0.4.0-beta.3",
+    "@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",

package/readme.md

@@ -1,7 +1,3 @@
-NOTE: add docs for dumbass svelte browser resolve bullshit
-https://svelte.dev/docs/v4-migration-guide#browser-conditions-for-bundlers
-- form controls?
-
 # Zephyr
 Zephyr is a svelte binding for the [Windstorm](https://windstorm.axel669.net)
 library, with some additional parts to make it look nice in the markup.
@@ -12,44 +8,56 @@ library, with some additional parts to make it look nice in the markup.
 Zephyr can be installed through npm (or the variants like yarn, pnpm, etc).
 
 ```bash
-npm install @axel669/zephyr
+npm install @axel669/zephyr@0.2.0-beta.1
 ```
 
-## Usage
+## Components
 Components can be imported individually from the library for tree-shaking, or
 the entire lib can imported at once, but I dunno how big that bundle will be.
 Components can also take any windstorm function as a prop, using the same rules
 as the `wsx` action.
 
-> Windstorm expects a theme to be defined on an ancestor of the html elements
-> that use it, and Zephyr does not automatically set the theme because it can
-> used anywhere in the page. This means the wsx action (or setting the ws-x
-> attribute directly) will be needed for components to look right.
+### Theming
+Windstorm expects a theme to be defined on an ancestor of the html elements
+that use it, and Zephyr does not automatically set the theme because it can
+used anywhere in the page. This means the wsx action (or setting the ws-x
+attribute directly) will be needed for components to look right. Any valid
+Windstorm theme is usable, including custom ones.
 
+### Example
 ```svelte
 <script>
     //  individual import for tree shaking
-    import { Button } from "@axel669/zephyr"
+    import {
+        Button,
+        wsx
+    } from "@axel669/zephyr"
 
     //  bring the whole thing to keep it simple
     import * as Wind from "@axel669/zephyr"
+
+    const theme = "dark"
+    const handler = () => {
+        console.log("button clicked!")
+    }
 </script>
 
 <!-- the wsx action can be used to setup the ws-x needed for the body -->
 <svelte:body use:wsx={{"$theme": theme, "$app": true}} />
 
-<Button on:click={stuff}>
+<Button on:click={handler}>
     I'm a button!
 </Button>
 
-<Wind.Button on:click={stuff}>
+<Wind.Button on:click={handler}>
     I'm also button!
 </Wind.Button>
 ```
 
-### Svelte Config
+## Svelte Config
 Zephyr does not output any css of its own, so no configuration is required to
 make it styled as expected. For people using Svelte 4+ you will need to make
 sure your bundler has the browser conditions set as some components do use
 lifecycle functions that will not be bundled without the setting.
-[Details](https://svelte.dev/docs/v4-migration-guide#browser-conditions-for-bundlers)
+[Svelte Docs](https://svelte.dev/docs/v4-migration-guide#browser-conditions-for-bundlers)
+about the setting.

package/src/async/button.svelte

@@ -0,0 +1,31 @@
+<script>
+    import Button from "../control/button.svelte"
+    import Spinner from "../spinner/circle-spinner.svelte"
+
+    export let handler = null
+    export let disabled
+    export let inactiveProps = null
+
+    let running = false
+    const asyncHandler = async (evt) => {
+        running = true
+        await handler(evt)
+        running = false
+    }
+
+    $: inactive = (typeof disabled === "boolean") ? disabled : running
+    $: props = {
+        ...$$restProps,
+        ...(running === false ? null : inactiveProps),
+        disabled: inactive,
+    }
+</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>

package/src/async/load-zone.svelte

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

package/src/composed/data-table.md

@@ -1,3 +1,5 @@
+NOTE: include Th as its own component
+
 # DataTable
 
 The DataTable is a more advanced way to show data on screen. Underneath is
@@ -14,21 +16,33 @@ are supported.
 
 - ### color
     Sets `$color`
-- ### cols `Array`
+
+### cols
+`Array`
+
     The columns that should be displayed. Should be in the format of
     `{ label, width?, format?, prop? }`. If a format function is provided,
     it is called on each cell to determine a cells value as
     `format(rowItem)`, otherwise the property defined in prop will be used
     as the cell value.
-- ### data `Array`
+
+### data
+`Array`
+
     The data to display. Each item in the array can be in either the same
     format as the Table, or any kind of object if column format functions
     are used.
-- ### cellWSX `function`
+
+### cellWSX
+`function`
+
     If given, this function will be called for each cell, and should return
     an object that will be passed to the `wsx` action for each <td>
     generated. The function is passed `(rowvalue, rowNum, col)`.
-- ### rowWSX `function`
+
+### rowWSX
+`function`
+
     If given, this function will be called for each row, and should return
     an object that will be passed to the `wsx` action for each <tr>
     generated. The function is passed `(rowValue, rowNum)`.
@@ -42,7 +56,7 @@ are supported.
     that may lead to a degraded user experience if the rows change size
     while paging through the data
 
-## Usage
+## Example
 ```js
 let page
 const cols = [

package/src/composed/entry-button.md

@@ -20,7 +20,7 @@ addition to the buttons that show them.
     When the component is close the entry event is fired. The detail
     property of the event will have the value from closing it
 
-## Usage
+## Example
 ```svelte
 <EntryButton component={Subscreen} on:entry={console.log}>
     Open Subscreen

package/src/composed/toast/message.svelte

@@ -7,14 +7,26 @@
     The default component for Toast to show messages with
 
     ## Props
-    - ### actionText `string`
+
+### 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`
+
+### color
+`string`
+
         Sets `$color`
-    - ### icon `string`
+
+### icon
+`string`
+
         An icon to show with the message
-    - ### message `string`
+
+### message
+`string`
+
         The message to show
     */
 

package/src/composed/toast.md

@@ -26,7 +26,7 @@ also controls the children being shown for convenience.
     actions to be taken against interactions in the message without having
     to bind all kinds of events or callbacks.
 
-## Usage
+## Example
 ```js
 let toast = null
 const notify = () => toast.show(5000, { message: "hi" })

package/src/control/button.md

@@ -17,14 +17,18 @@ Sets `$compact`
 ### fill / outline
 `bool`
 
-Sets the button type to $fill if fill is true, $outline if outline
-is true, or $flat if neither is true.
+Sets the button type to `$fill` if fill is true, `$outline` if outline
+is true, or `$flat` if neither is true.
 
 ## Events
 - click
 
 ## Example
 ```svelte
+<script>
+    import { Button } from "@axel669/zephyr"
+</script>
+
 <Button on:click={action}>
     Flat Button
 </Button>

package/src/control/label.md

@@ -0,0 +1,49 @@
+# Label
+
+The label component is a wrapper around a `<label>` element.
+
+## Props
+
+### button
+`bool`
+
+If true, the label will have the button appearance.
+
+### color
+`string`
+
+Sets `$color`
+
+### compact
+`bool`
+
+If true, will make the label button be more compact. No effect is `button` is
+`false`.
+
+### disabled
+`bool`
+
+Disables the label.
+
+### fill / outline / flat
+`bool`
+
+Sets the button variant of the label when `button` is `true`.
+
+### for
+`string`
+
+[Label for attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label#for)
+
+## Example
+
+```svelte
+<script>
+    import { Label } from "@axel669/zephyr"
+</script>
+
+<Label for="checkbox">Toggle Checkbox</Label>
+<Label for="checkbox" button color="primary" fill>
+    Open Menu
+</Label>
+```

package/src/control/link.md

@@ -8,26 +8,39 @@ Themed and customizale `<a>` tag component.
 
 If true, the link will be styled like a button
 
-### color `string`
+### color
+`string`
 
 Sets the color of the button. Applies to both regular links and button
 style links.
 
-- ### href `string`
-    Sets the href attribute.
+### href
+`string`
 
-- ### rel `string`
-    Sets the rel attribute.
+Sets the href attribute.
 
-- ### target `string`
-    Sets the target attribute.
+### rel
+`string`
 
-- ### fill / outline `bool`
-    Sets the link-button type to $fill if fill is true, $outline if outline
-    is true, or $flat if neither is true.
+Sets the rel attribute.
 
-## Usage
+### target
+`string`
+
+Sets the target attribute.
+
+### fill / outline / flat
+`bool`
+
+Sets the link-button type to `$fill` if fill is true, `$outline` if outline
+is true, or `$flat` if neither is true.
+
+## Example
 ```svelte
+<script>
+    import { Link } from "@axel669/zephyr"
+</script>
+
 <Link color="primary" href="test" target="_blank">
     Test
 </Link>

package/src/control/link.svelte

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

package/src/control/radio.md

@@ -7,24 +7,31 @@ are presented.
 
 ## Base
 Each radio item rendered is a
-[Windstorm Labeled Toggle](https://axel669.github.io/lib.windstorm/#components-labeled toggle)
+[Windstorm Labeled Toggle](https://windstorm.axel669.net/lib/css/component/toggle)
 that uses a radio input.
 
 ## Props
-All [windstorm functions](https://axel669.github.io/lib.windstorm/#css-shorthands)
-are supported.
 
-Unlike the Paper, the wind functions passed as props to the Radio component
-are passed directly to the layout specified because the Radio does not have
-a container element of its own.
+The wind functions passed as props to the Radio component are passed directly to
+the layout specified because the Radio does not have a container element of its
+own.
 
-- ### layout `Component`
-    The component to use for layout out the options. Default is Flex.
-- ### options `Array[Object]`
-    An array of objects that defines the options to show. Details below.
-- ### value `any`
-    The value currently selected. Can be bound to react to selections or
-    change the current selection.
+### layout
+`Component`
+
+The component to use for layout out the options. Default is
+[Flex](../layout/flex.md).
+
+### options
+`Array[Object]`
+
+An array of objects that defines the options to show. Details below.
+
+### value
+`any`
+
+The value currently selected. Can be bound to react to selections or change the
+current selection.
 
 ## Options
 Each object in the options array supplied should have a `value` and `label`
@@ -34,16 +41,18 @@ the option can be passed as additional props.
 Labels should be strings, but values can be any type as long as they are
 unique in the list.
 
-```js
-const options = [
-    { label: "first", value: 1 },
-    { label: "second", value: [] },
-    { label: "third", value: "3", "$color": "warning" }
-]
-```
-
-## Usage
+## Example
 ```svelte
+<script>
+    import { Radio, Grid } from "@axel669/zephyr"
+
+    const options = [
+        { label: "first", value: 1 },
+        { label: "second", value: [] },
+        { label: "third", value: "3", "$color": "warning" }
+    ]
+</script>
+
 <Radio {options} bind:value />
-<Radio {options} bind:value={other} layout={Grid} gr-col="1fr 1fr" />
+<Radio {options} bind:value={other} layout={Grid} gr.cols="1fr 1fr" />
 ```

package/src/control/radio.svelte

@@ -1,6 +1,4 @@
 <script>
-    import asuid from "@labyrinthos/asuid"
-
     import wsx from "../wsx.mjs"
     import { handler$ } from "../handler$.mjs"
 
@@ -15,7 +13,7 @@
         (newValue) => value = newValue
     )
 
-    const name = asuid()
+    const name = `${Math.random().toString(16)}-${Date.now()}`
 </script>
 
 <svelte:component this={layout} {...$$restProps}>

package/src/control/select.md

@@ -10,17 +10,29 @@ using a `<select>`
 All [windstorm functions](https://axel669.github.io/lib.windstorm/#css-shorthands)
 are supported.
 
-- ### color `string`
-    Sets `$color`
-- ### label `string`
-    The text to display as the label
-- ### options `Array[Object]`
-    An array of options and groups to show in the select. Details below
-- ### outline `bool`
-    Sets `$outline`
-- ### value `any`
-    The value currently selected. Can be bound to react to selections or
-    change the current selection.
+### color
+`string`
+
+Sets `$color`
+
+### label
+`string`
+
+The text to display as the label
+
+### options
+`Array[Object]`
+
+An array of options and groups to show in the select. Details below
+
+### outline `bool`
+
+Sets `$outline`
+### value
+`any`
+
+The value currently selected. Can be bound to react to selections or
+change the current selection.
 
 ## Options
 Each object in the options provided should be in one of 2 forms:
@@ -34,22 +46,25 @@ array) is put into the optgroup defined by the group item.
 
 Labels and group names should be strings, but values can be any type.
 
-## Usage
-```js
-// Results in:
-// <option>first</option>
-// <optgroup label="Not Numbers">
-//     <option>second</option>
-//     <option>third</option>
-// </optgroup>
-const options = [
-    { label: "first", value: 1 },
-    { group: "Not numbers" },
-    { label: "second", value: "two" },
-    { label: "third", value: [3] },
-]
-```
+## Example
 ```svelte
+<script>
+    import { Select } from "@axel669/zephyr"
+
+    // Results in:
+    // <option>first</option>
+    // <optgroup label="Not Numbers">
+    //     <option>second</option>
+    //     <option>third</option>
+    // </optgroup>
+    const options = [
+        { label: "first", value: 1 },
+        { group: "Not numbers" },
+        { label: "second", value: "two" },
+        { label: "third", value: [3] },
+    ]
+</script>
+
 <Select {options} bind:value label="Blep" />
 <Select {options} bind:value color="warning" label="Why" />
 ```

package/src/control/tabs.md

@@ -2,34 +2,46 @@
 
 It's tabs, everyone knows what tabs are at this point.
 
-## Base
-[Windstorm Tabs](https://axel669.github.io/lib.windstorm/#components-tabs)
-
 ## Props
-All [windstorm functions](https://axel669.github.io/lib.windstorm/#css-shorthands)
-are supported.
-
-- ### color `string`
-    Sets `$color`
-- ### options `Array[Object]`
-    An array of options where each item is `{ label, value }`. `label`
-    should be a string, `value` can be of any type.
-- ### vertical `bool`
-    Sets `$vert`
-- ### solid `bool`
-    Sets `$solid`
-- ### value `any`
-    The value of the currently selected tab. Can be bound to react to
-    changes and set to control which tab is selected.
-
-## Usage
-```js
-const options = [
-    { label: "Left", value: "left" },
-    { label: "Right", value: 2 },
-]
-```
+
+### color
+`string`
+
+Sets `$color`
+
+### options
+`Array[Object]`
+
+An array of options where each item is `{ label, value }`. `label`
+should be a string, `value` can be of any type.
+
+### vertical
+`bool`
+
+Sets `$vert`
+
+### solid
+`bool`
+
+Sets `$solid`
+
+### value
+`any`
+
+The value of the currently selected tab. Can be bound to react to
+changes and set to control which tab is selected.
+
+## Example
 ```svelte
+<script>
+    import { Tabs } from "@axel669/zephyr"
+
+    const options = [
+        { label: "Left", value: "left" },
+        { label: "Right", value: 2 },
+    ]
+</script>
+
 <Tab {options} bind:value color="primary" />
 <Tab {options} bind:value color="secondary" solid vertical />
 ```