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

package/package.json

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

@@ -9,12 +9,14 @@
 {#if source !== null}
     {#await source}
         <slot name="loading">
-            <ws-flex ws-x="fl.cross[center] fl.main[center]">
+            <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

@@ -41,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}
@@ -54,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

@@ -57,16 +57,20 @@
     export let pageSize = 10
     export let page = 0
     export let rowHeight = "40px"
+    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()
 
     $: if (filteredData === null) {
         console.warn("DataTable: data is not an array")
@@ -117,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" />
@@ -142,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/toast.md

@@ -1,36 +1,45 @@
 # Toast
-
-Displays toast notifications along the edge of the screen.
+Displays toast notifications along the edge of the screen. Unlike the Toaster
+component, this has functions for interacting with and generating toast
+messages, where the Toaster component has the programmer manage the content.
 
 ## Props
 See the Toaster component. The Toast component is wrapper around it that
 also controls the children being shown for convenience.
 
-- ### component
-    The component to use as a wrapper for the messages. Defaults to the
-    ToastMessage component.
+### component
+The component to use as a wrapper for the messages. Defaults to the
+ToastMessage component.
+
+### position
+The position to show modals in. Uses the same positions as the Windstorm
+toaster.
 
 ## Functions
-- ### show(duration, props)
-    Shows a toast notification that will disappear after the specified
-    duration (time in milliseconds). The props provided are passed to an
-    instance of the component specified in the props.
+
+### show(duration, props)
+Shows a toast notification that will disappear after the specified
+duration (time in milliseconds). The props provided are passed to an
+instance of the component specified in the props.
 
 ## Events
-- ### action(info)
-    Fired when a toast message is clicked. The info argument contains a
-    value property that is provided by the message component, and a copy
-    of the props passed to that instace.\\
-    For the default messages, the value will be `null` if no button was
-    clicked, and `true` if the action button was clicked. This allows
-    actions to be taken against interactions in the message without having
-    to bind all kinds of events or callbacks.
+
+### action
+Fired when a toast message is clicked. The info argument contains a
+value property that is provided by the message component, and a copy
+of the props passed to that instace.
+
+For the default messages, the value will be `null` if no button was
+clicked, and `true` if the action button was clicked. This allows
+actions to be taken against interactions in the message without having
+to bind all kinds of events or callbacks.
 
 ## Example
-```js
-let toast = null
-const notify = () => toast.show(5000, { message: "hi" })
-```
 ```svelte
+<script>
+    let toast = null
+    const notify = () => toast.show(5000, { message: "hi" })
+</script>
+
 <Toast bind:this={toast} position="bc" />
 ```

package/src/composed/toast.svelte

@@ -59,7 +59,7 @@
 
 <Toaster {position} {...$$restProps}>
     {#each items as {props, id} (id)}
-        <zephyr-toast-wrapper ws-x="grid" transition:fade={{duration: 200}}>
+        <zephyr-toast-wrapper ws-x="[grid]" transition:fade={{duration: 200}}>
             <svelte:component
             this={component}
             {...props}