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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@axel669/zephyr",
-  "version": "0.2.0-beta.2",
+  "version": "0.3.4-beta.0",
   "description": "",
   "main": "src/index.mjs",
   "type": "module",
@@ -12,7 +12,7 @@
   "author": "",
   "license": "MIT",
   "dependencies": {
-    "@axel669/windstorm": "0.2.3"
+    "@axel669/windstorm": "0.3.4"
   },
   "devDependencies": {
     "@axel669/ipsen": "0.4.0-beta.7",

package/readme.md

@@ -8,14 +8,14 @@ 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@0.2.0-beta.1
+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 function as a prop, using the same rules
-as the `wsx` action.
+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
@@ -43,7 +43,7 @@ Windstorm theme is usable, including custom ones.
 </script>
 
 <!-- the wsx action can be used to setup the ws-x needed for the body -->
-<svelte:body use:wsx={{"$theme": theme, "$app": true}} />
+<svelte:body use:wsx={{"@theme": theme, "@app": true}} />
 
 <Button on:click={handler}>
     I'm a button!

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

@@ -4,7 +4,6 @@
 
     export let handler = null
     export let disabled
-    export let inactiveProps = null
 
     let running = false
     const asyncHandler = async (evt) => {
@@ -13,16 +12,15 @@
         running = false
     }
 
-    $: inactive = (typeof disabled === "boolean") ? disabled : running
+    $: inactive = 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]">
+    <div ws-x="[h 20px] [m.r:not(:empty) 4px]">
         {#if running === true}
             <Spinner size="20px" />
         {/if}

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,17 +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>Loading</span>
+            <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,3 +1,5 @@
+<svelte:options immutable />
+
 <script context="module">
     const sortIcons = {
         "asc": "arrow-narrow-up",
@@ -30,7 +32,6 @@
         p: "0px",
         sel: "none"
     }
-    $: console.log($context.sorting)
     $: sortIcon =
         ($context.sorting.base === sort)
         ? sortIcons[$context.sorting.direction]
@@ -40,7 +41,7 @@
 <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]">
+            <div ws-x="[flex] [fl.cross center] [fl.main center]">
                 <slot />
             </div>
         {:else}
@@ -53,7 +54,7 @@
         {#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 />
+                <input type="text" ws-x="[w.min 20px] [outline:focus none]" bind:value />
             </Grid>
         {/if}
     </Grid>

package/src/composed/data-table.md

@@ -1,85 +1,86 @@
-NOTE: include Th as its own component
-
 # DataTable
 
 The DataTable is a more advanced way to show data on screen. Underneath is
-a table element like the Table component, but the DataTable supports
-more fine-grained control over how data is passed, how rows are displayed,
-and pagination.
+a [Table](../data-display/table.md) component, but with additional functionality
+for pagination, sorting, and fitering.
 
 > If pagination is not needed, the DataTable may not be necessary as it will
 > only be shortcutting data formatting at that point.
 
 ## Props
-All [windstorm functions](https://axel669.github.io/lib.windstorm/#css-shorthands)
-are supported.
 
-- ### color
-    Sets `$color`
+### color
+Sets `$color`
 
-### cols
+### data
 `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.
+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.
 
-### data
-`Array`
+### page
+`Number`
+
+The current page of data being viewed. Can be bound, or set to control
+which page is displayed
+
+### pageSize
+`Number`
+
+The number of items to show on each page. Default is 10.
 
-    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`
-
-    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`
-
-    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)`.
-- ### page
-    The current page of data being viewed. Can be bound, or set to control
-    which page is displayed
-- ### pageSize
-    The number of items to show on each page. Default is 10
-- ### rowHeight
-    The height of each row. Can be set individually through rowWSX, but
-    that may lead to a degraded user experience if the rows change size
-    while paging through the data
+### rowHeight
+The height of each row. The component uses this to make empty rows the same
+height as rows with data so that the pagination doesnt randomly resize the
+visual area of the table.
+
+## Slots
+
+### header
+A fragment that should contain the header cells for the table header. A standard
+`th` can be used, but the [TH](./data-table/th.md) element from zephyr has
+additional configuration to handle more complex header-related actions.
+
+### row
+A fragment that should use regular `td` elements to define how a row should be
+layed out. The fragment will need `let:row` to access each row's data for
+displaying it.
 
 ## Example
-```js
-let page
-const cols = [
-    { label: "N", prop: "a" },
-    { label: "Squared", prop: "b" },
-    { label: "Cubed", format: row => `^3 = ${row.c}` },
-]
-const data = [
-    { a: 1, b: 1 ** 2, c: 1 ** 3 },
-    { a: 2, b: 2 ** 2, c: 2 ** 3 },
-    { a: 3, b: 3 ** 2, c: 3 ** 3 },
-    { a: 4, b: 4 ** 2, c: 4 ** 3 },
-    { a: 5, b: 5 ** 2, c: 5 ** 3 },
-    { a: 6, b: 6 ** 2, c: 6 ** 3 },
-    { a: 7, b: 7 ** 2, c: 7 ** 3 },
-    { a: 8, b: 8 ** 2, c: 8 ** 3 },
-    { a: 9, b: 9 ** 2, c: 9 ** 3 },
-    { a: 10, b: 10 ** 2, c: 10 ** 3 },
-    { a: 11, b: 11 ** 2, c: 11 ** 3 },
-    { a: 12, b: 12 ** 2, c: 12 ** 3 },
-    { a: 13, b: 13 ** 2, c: 13 ** 3 },
-]
-```
 ```svelte
-<DataTable {cols} {data} color="warning" pageSize={3} bind:page />
+<script>
+    import { DataTable, TH, sorts } from "@axel669/zephyr"
+
+    let page
+    const data = [
+        { a: 1, b: 1 ** 2, c: 1 ** 3 },
+        { a: 2, b: 2 ** 2, c: 2 ** 3 },
+        { a: 3, b: 3 ** 2, c: 3 ** 3 },
+        { a: 4, b: 4 ** 2, c: 4 ** 3 },
+        { a: 5, b: 5 ** 2, c: 5 ** 3 },
+        { a: 6, b: 6 ** 2, c: 6 ** 3 },
+        { a: 7, b: 7 ** 2, c: 7 ** 3 },
+        { a: 8, b: 8 ** 2, c: 8 ** 3 },
+        { a: 9, b: 9 ** 2, c: 9 ** 3 },
+        { a: 10, b: 10 ** 2, c: 10 ** 3 },
+        { a: 11, b: 11 ** 2, c: 11 ** 3 },
+        { a: 12, b: 12 ** 2, c: 12 ** 3 },
+        { a: 13, b: 13 ** 2, c: 13 ** 3 },
+    ]
+</script>
+
+<DataTable {cols} {data} color="warning" pageSize={3} bind:page>
+    <svelte:fragment slot="header">
+        <TH sort={sorts.natural}>N</TH>
+        <th>Squared</th>
+        <th>Cubed</th>
+    </svelte:fragment>
+
+    <svelte:fragment slot="row" let:row>
+        <td>{row.a}</td>
+        <td>{row.b}</td>
+        <td>^3 = {row.c}</td>
+    </svelte:fragment>
+</DataTable>
 ```

package/src/composed/data-table.svelte

@@ -2,16 +2,31 @@
 
 <script context="module">
     // find the first filter in the list that returns false
-    const applyFilters = (data, filters) => data.filter(
-        (row) => {
-            for (const [filter, value] of filters) {
-                if (filter(row, value) === false) {
-                    return false
+    const applyFilters = (data, filters) => {
+        if (Array.isArray(data) === false) {
+            return null
+        }
+        return data.filter(
+            (row) => {
+                for (const [filter, value] of filters) {
+                    if (filter(row, value) === false) {
+                        return false
+                    }
                 }
+                return true
             }
-            return true
+        )
+    }
+    const sliceData = (data, page, pageSize, sortFunc) => {
+        if (data === null) {
+            return []
         }
-    )
+        const sorted = data.sort(sortFunc)
+        return Array.from(
+            { length: pageSize },
+            (_, i) => sorted[page * pageSize + i]
+        )
+    }
     const noSort = {
         direction: null,
         func: (a, b) => 0,
@@ -38,26 +53,28 @@
 
     export let color = false
     export let fillHeader = true
-    export let data = []
+    export let data
     export let pageSize = 10
     export let page = 0
     export let rowHeight = "40px"
-
-    $: rows = Array.from(
-        { length: pageSize },
-        (_, i) => filteredData[page * pageSize + i]
-    )
-    $: rowCount = filteredData.length
-    $: pageCount = Math.ceil(rowCount / pageSize)
-    $: maxPage = Math.max(pageCount - 1, 0)
+    export let scrollable = false
+    export let height = null
 
     let sorting = noSort
     let filters = new Map()
     let filterFunctions = []
+    let jumpTarget = "1"
+
+    $: filteredData = applyFilters(data, filterFunctions)
+    $: rows = sliceData(filteredData, page, pageSize, sorting.func)
+    $: rowCount = filteredData?.length ?? 0
+    $: pageCount = Math.ceil(rowCount / pageSize)
+    $: maxPage = Math.max(pageCount - 1, 0)
+    $: jumpTarget = (page + 1).toString()
 
-    $: filteredData =
-        applyFilters(data, filterFunctions)
-        .sort(sorting.func)
+    $: if (filteredData === null) {
+        console.warn("DataTable: data is not an array")
+    }
 
     const prev = () => page = Math.max(0, page - 1)
     const next = () => page = Math.min(maxPage, page + 1)
@@ -104,23 +121,59 @@
     const pass = handler$(
         (row) => fire("row-click", row)
     )
+
+    let scroller = null
+    $: if (scroller !== null && isNaN(page) === false) {
+        scroller.scrollTop = 0
+    }
+    const jump = (evt) => {
+        if (evt.type === "keypress" && evt.key !== "Enter") {
+            return
+        }
+        const target = parseInt(evt.target.value)
+        if (isNaN(target) === true) {
+            jumpTarget = (page + 1).toString()
+            return
+        }
+        page = Math.max(
+            Math.min(jumpTarget - 1, maxPage),
+            0
+        )
+        jumpTarget = (page + 1).toString()
+    }
+
+    $: content = {
+        "fl.cross": "stretch",
+        p: "0px",
+        gap: "0px",
+        over: (scrollable === true) ? "auto" : null,
+    }
+    $: header = {
+        "h.min": rowHeight,
+        y: "0px",
+        z: "+10",
+        pos: (scrollable === true) ? "sticky" : null,
+    }
 </script>
 
-<Paper card {color} l-fl.cross="stretch" l-p="0px">
-    <Table data={rows} {color} {fillHeader} {...$$restProps}>
-        <tr ws-x="h.min[{rowHeight}]" slot="header">
-            <slot name="header">
-                <th>No Header Defined</th>
-            </slot>
-        </tr>
-        <tr ws-x="h[{rowHeight}]" slot="row" let:row>
-            <slot name="row" {row}>
-                <th>No Row Defined</th>
-            </slot>
-        </tr>
-        <tr ws-x="h[{rowHeight}]" slot="empty-row" />
-    </Table>
-    <Grid slot="footer" gr.cols="min-content min-content min-content 1fr">
+<Paper {color} h={height}>
+    <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">
+                <slot name="header">
+                    <th>No Header Defined</th>
+                </slot>
+            </tr>
+            <tr ws-x="[h {rowHeight}]" slot="row" let:row>
+                <slot name="row" {row}>
+                    <th>No Row Defined</th>
+                </slot>
+            </tr>
+            <tr ws-x="[h {rowHeight}]" slot="empty-row" />
+        </Table>
+    </ws-flex>
+    <Grid slot="footer" gr.cols="min-content min-content min-content 1fr"
+    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" />
@@ -129,8 +182,18 @@
                 <Icon name="arrow-big-right" />
             </Button>
             <Text adorn t.ws="nowrap">
-                Page {page + 1} / {pageCount}
+                Page
+                <input ws-x="[b 1px solid @text-color-normal] [w 36px] [r 4px]
+                [h 24px] [bg.c transaprent] [t.a center] [m.l 4px] [m.r 4px]"
+                type="text" bind:value={jumpTarget}
+                on:keypress={jump} on:blur={jump} />
+                / {pageCount}
             </Text>
+        {:else}
+            <div ws-x="[col span 3] [p.l 4px]">
+                No data to show
+            </div>
         {/if}
+        <slot name="action" />
     </Grid>
 </Paper>

package/src/composed/entry-button.md

@@ -6,29 +6,39 @@ addition to the buttons that show them.
 
 ## Props
 
-- ### component
-    The component to show when clicked
-- ### props
-    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
+### component
+The component to show when clicked
+
+### props
+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](../layout/modal.md) but any
+component that has the same interface as Modal will work.
 
 ## Events
-- ### entry
-    When the component is close the entry event is fired. The detail
-    property of the event will have the value from closing it
+
+### entry
+When the component is closed the entry event is fired. The detail
+property of the event will have the value from closing it.
 
 ## Example
 ```svelte
+<script>
+    const propsFunc = () => ({
+        now: Date.now(),
+        rand: Math.random(),
+    })
+</script>
+
 <EntryButton component={Subscreen} on:entry={console.log}>
     Open Subscreen
 </EntryButton>
-<EntryButton component={CoolDialog} on:entry={console.log}>
+<EntryButton component={CoolDialog} props={{ thing: true }} on:entry={console.log}>
     Open Subscreen
 </EntryButton>
-<EntryButton this={CoolModal} component={CustomThing} on:entry={console.log}>
+<EntryButton this={CoolModal} component={CustomThing} on:entry={console.log} props={propsFunc}>
     Open Subscreen
 </EntryButton>
 ```

package/src/composed/entry-button.svelte

@@ -1,3 +1,5 @@
+<svelte:options immutable />
+
 <script>
     import { createEventDispatcher } from "svelte"