@axel669/zephyr 0.2.0-beta.3 → 0.3.6

package/package.json

@@ -1,33 +1,33 @@
-{
-  "name": "@axel669/zephyr",
-  "version": "0.2.0-beta.3",
-  "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.2.3"
-  },
-  "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.3.6",
+  "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.6"
+  },
+  "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"
+  }
+}

package/readme.md

@@ -1,63 +1,63 @@
-# 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.
-
-[Docs Here](https://zephyr.axel669.net)
-
-## Installation
-Zephyr can be installed through npm (or the variants like yarn, pnpm, etc).
-
-```bash
-npm install @axel669/zephyr@0.2.0-beta.1
-```
-
-## 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.
-
-### 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,
-        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={handler}>
-    I'm a button!
-</Button>
-
-<Wind.Button on:click={handler}>
-    I'm also button!
-</Wind.Button>
-```
-
-## 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.
-[Svelte Docs](https://svelte.dev/docs/v4-migration-guide#browser-conditions-for-bundlers)
-about the setting.
+# 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.
+
+[Docs Here](https://zephyr.axel669.net)
+
+## Installation
+Zephyr can be installed through npm (or the variants like yarn, pnpm, etc).
+
+```bash
+npm install @axel669/zephyr
+```
+
+## 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 macro as a prop, including custom macros,
+using the same rules as the `wsx` covered in [Functions](./src/functions.md).
+
+### 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,
+        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={handler}>
+    I'm a button!
+</Button>
+
+<Wind.Button on:click={handler}>
+    I'm also button!
+</Wind.Button>
+```
+
+## 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.
+[Svelte Docs](https://svelte.dev/docs/v4-migration-guide#browser-conditions-for-bundlers)
+about the setting.

package/src/async/button.md

@@ -0,0 +1,27 @@
+# AsyncButton
+A button that makes it simpler to fire off async functions in response to button
+clicks. In addition to calling the function, the button will disable itself
+during the function duration and show a load spinner inside the button.
+
+## Props
+The AsyncButton supports all of the [Button](../control/button.md) props.
+
+### handler
+The async function to call when the button is clicked.
+
+## Example
+
+```svelte
+<script>
+    import { AsyncButton } from "@axel669/zephyr"
+
+    const load = async () => {
+        const res = await fetch(someURL)
+        console.log(await res.text())
+    }
+</script>
+
+<AsyncButton handler={load} color="@primary">
+    Load Things
+</AsyncButton>
+```

package/src/async/button.svelte

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

@@ -0,0 +1,42 @@
+# LoadZone
+A component for putting content that is behind an async function.
+
+## Props
+
+### message
+The text to show while the promise is pending.
+
+### source
+`Promise`
+
+The promise that will resolve into some kind of content-related information.
+
+## Slots
+
+### default
+The default slot will be shown when the promise resolves.
+
+### loading
+The content to show while the promise is pending. Overrides the default of a
+load spinner with some text.
+
+### error
+The content to show when the promise rejects. Use `let:error` to get the error
+that was thrown.
+
+## Example
+
+```svelte
+<LoadZone source={asyncThing} let:result>
+    <div>
+        content
+    </div>
+    <div>
+        {JSON.stringify(result)}
+    </div>
+
+    <div slot="error">
+        :(
+    </div>
+</LoadZone>
+```

package/src/async/load-zone.svelte

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

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

@@ -0,0 +1,21 @@
+# TH
+
+The TH component has no use outside fo the DataTable, but is used to support
+the filter and sorting functionality for that component.
+
+## Props
+
+### sort
+`Function`
+
+The sorting function to use for the column defined. Should return values that
+match the expected values for `Array.sort`.
+
+### filter
+`Function`
+
+The function to use for filtering based on the column. The function is given
+2 arguments: a row of data and the text from the filter input field. The
+function should return `true` if the item should be shown. A filter function on
+a specific column does not need to only look at the specified column, but not
+doing could cause confusion for users without proper context.

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

@@ -1,61 +1,61 @@
-<svelte:options immutable />
-
-<script context="module">
-    const sortIcons = {
-        "asc": "arrow-narrow-up",
-        "desc": "arrow-narrow-down",
-    }
-</script>
-
-<script>
-    import { getContext } from "svelte"
-
-    import Button from "../../control/button.svelte"
-    import Grid from "../../layout/grid.svelte"
-    import Icon from "../../info/icon.svelte"
-
-    import wsx from "../../wsx.mjs"
-    import { dtContext } from "../data-table.svelte"
-
-    export let sort = null
-    export let filter = null
-
-    const context = getContext(dtContext)
-
-    const setSort = () => $context.updateSort(sort)
-
-    let value = ""
-    $: $context.updateFilter(filter, value)
-
-    $: wind = {
-        ...$$restProps,
-        p: "0px",
-        sel: "none"
-    }
-    $: sortIcon =
-        ($context.sorting.base === sort)
-        ? sortIcons[$context.sorting.direction]
-        : "arrows-up-down"
-</script>
-
-<th use:wsx={wind} style="vertical-align: top;">
-    <Grid rows="40px min-content" p="0px" gap="0px">
-        {#if sort === null}
-            <div ws-x="flex fl.cross[center] fl.main[center]">
-                <slot />
-            </div>
-        {:else}
-            <Button compact r="0px" color="primary" fill={$context.fillHeader}
-            t.wt="inherit" on:click={setSort}>
-                <slot />
-                <Icon name={sortIcon} m.l="4px" t.sz="16px" />
-            </Button>
-        {/if}
-        {#if filter !== null}
-            <Grid gap="0px" p="0px" cols="min-content 1fr">
-                <Icon name="filter" />
-                <input type="text" ws-x="w.min[20px] outline:focus[none]" bind:value />
-            </Grid>
-        {/if}
-    </Grid>
-</th>
+<svelte:options immutable />
+
+<script context="module">
+    const sortIcons = {
+        "asc": "arrow-narrow-up",
+        "desc": "arrow-narrow-down",
+    }
+</script>
+
+<script>
+    import { getContext } from "svelte"
+
+    import Button from "../../control/button.svelte"
+    import Grid from "../../layout/grid.svelte"
+    import Icon from "../../info/icon.svelte"
+
+    import wsx from "../../wsx.mjs"
+    import { dtContext } from "../data-table.svelte"
+
+    export let sort = null
+    export let filter = null
+
+    const context = getContext(dtContext)
+
+    const setSort = () => $context.updateSort(sort)
+
+    let value = ""
+    $: $context.updateFilter(filter, value)
+
+    $: wind = {
+        ...$$restProps,
+        p: "0px",
+        sel: "none"
+    }
+    $: sortIcon =
+        ($context.sorting.base === sort)
+        ? sortIcons[$context.sorting.direction]
+        : "arrows-up-down"
+</script>
+
+<th use:wsx={wind} style="vertical-align: top;">
+    <Grid rows="40px min-content" p="0px" gap="0px">
+        {#if sort === null}
+            <div ws-x="[flex] [fl.cross center] [fl.main center]">
+                <slot />
+            </div>
+        {:else}
+            <Button compact r="0px" color="primary" fill={$context.fillHeader}
+            t.wt="inherit" on:click={setSort}>
+                <slot />
+                <Icon name={sortIcon} m.l="4px" t.sz="16px" />
+            </Button>
+        {/if}
+        {#if filter !== null}
+            <Grid gap="0px" p="0px" cols="min-content 1fr">
+                <Icon name="filter" />
+                <input type="text" ws-x="[w.min 20px] [outln:focus none]" bind:value />
+            </Grid>
+        {/if}
+    </Grid>
+</th>