@axel669/zephyr 0.1.17 → 0.2.0-beta.1

package/src/composed/data-table.svelte

@@ -1,150 +1,136 @@
-<script>
-    /*md
-    [@] Components/Data Display/DataTable
-
-    # 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.
-
-    > 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`
-    - ### 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`
-        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
-
-    ## Usage
-    ```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 />
-    ```
-    */
-
-    import Button from "../button.svelte"
-    import Icon from "../icon.svelte"
-    import Paper from "../paper.svelte"
-    import Text from "../text.svelte"
-
-    import Grid from "../grid.svelte"
-
-    import wsx from "../wsx.mjs"
-
-    export let color = false
-    export let data = []
-    export let cols = []
-    export let rowWSX = null
-    export let cellWSX = null
-    export let pageSize = 10
-    export let page = 0
-    export let rowHeight = "40px"
-
-    $: wind = {
-        $color: color,
-        ...$$restProps,
-    }
-
-    $: rows = Array.from(
-        { length: pageSize },
-        (_, i) => data[page * pageSize + i]
-    )
-    $: pageCount = Math.ceil(data.length / pageSize)
-
-    const prev = () => page = Math.max(0, page - 1)
-    const next = () => page = Math.min(pageCount - 1, page + 1)
-</script>
-
-<Paper card {color} lprops={{ "fl-cr-a": "stretch", p: "0px" }}>
-    <table use:wsx={wind}>
-        <thead>
-            <tr>
-                {#each cols as col}
-                    <th use:wsx={{ w: col.width, h: rowHeight }}>{col.label}</th>
-                {/each}
-            </tr>
-        </thead>
-        <tbody>
-            {#each rows as row, rowNum}
-                {#if row === undefined}
-                    <tr use:wsx={{ h: rowHeight }}></tr>
-                {:else}
-                    <tr use:wsx={{ h: rowHeight, ...rowWSX?.(row, rowNum) }}>
-                        {#each cols as col, colNum}
-                            <td use:wsx={cellWSX?.(row, rowNum, col)}>
-                                {(col.format !== undefined)
-                                    ? col.format?.(row)
-                                    : row[col.prop]
-                                }
-                            </td>
-                        {/each}
-                    </tr>
-                {/if}
-            {/each}
-        </tbody>
-    </table>
-    <Grid slot="footer" gr-col="min-content min-content min-content 1fr">
-        <Button on:click={prev}>
-            <Icon name="arrow-big-left" />
-        </Button>
-        <Button on:click={next}>
-            <Icon name="arrow-big-right" />
-        </Button>
-        <Text adorn t-ws="nowrap">
-            Page {page + 1} / {pageCount}
-        </Text>
-    </Grid>
-</Paper>
+<svelte:options immutable />
+
+<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
+                }
+            }
+            return true
+        }
+    )
+    const noSort = {
+        direction: null,
+        func: (a, b) => 0,
+        base: null,
+    }
+
+    export const dtContext = Symbol("table key")
+</script>
+
+<script>
+    import { createEventDispatcher, setContext } from "svelte"
+    import { writable } from "svelte/store"
+
+    import Button from "../control/button.svelte"
+    import Icon from "../info/icon.svelte"
+    import Paper from "../layout/paper.svelte"
+    import Table from "../data-display/table.svelte"
+    import Text from "../text.svelte"
+
+    import Grid from "../layout/grid.svelte"
+
+    import wsx from "../wsx.mjs"
+    import { handler$, eventHandler$ } from "../handler$.mjs"
+
+    export let color = false
+    export let fillHeader = true
+    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)
+
+    let sorting = noSort
+    let filters = new Map()
+    let filterFunctions = []
+
+    $: filteredData =
+        applyFilters(data, filterFunctions)
+        .sort(sorting.func)
+
+    const prev = () => page = Math.max(0, page - 1)
+    const next = () => page = Math.min(maxPage, page + 1)
+
+    const updateSort = (func) => {
+        if (sorting.base === func) {
+            if (sorting.direction === "desc") {
+                sorting = noSort
+                return
+            }
+            sorting = {
+                func: (a, b) => -func(a, b),
+                base: func,
+                direction: "desc"
+            }
+            return
+        }
+        sorting = {
+            func,
+            base: func,
+            direction: "asc",
+        }
+    }
+    const updateFilter = (func, value) => {
+        if (func === null) {
+            return
+        }
+        filters.set(func, value)
+        filterFunctions = [
+            ...filters.entries()
+        ]
+    }
+
+    const context = writable({})
+    $: $context = {
+        updateSort,
+        fillHeader,
+        sorting,
+        updateFilter,
+    }
+    setContext(dtContext, context)
+
+    const fire = createEventDispatcher()
+    const pass = handler$(
+        (row) => fire("row-click", row)
+    )
+</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">
+        {#if pageCount > 0}
+            <Button on:click={prev} disabled={page === 0}>
+                <Icon name="arrow-big-left" />
+            </Button>
+            <Button on:click={next} disabled={page === maxPage}>
+                <Icon name="arrow-big-right" />
+            </Button>
+            <Text adorn t.ws="nowrap">
+                Page {page + 1} / {pageCount}
+            </Text>
+        {/if}
+    </Grid>
+</Paper>

package/src/composed/entry-button.md

@@ -0,0 +1,34 @@
+# EntryButton
+
+The EntryButton is a convenient way to display modals and screens over
+content without needing to bind variables have lots of Modal elements in
+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
+
+## 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
+
+## Example
+```svelte
+<EntryButton component={Subscreen} on:entry={console.log}>
+    Open Subscreen
+</EntryButton>
+<EntryButton component={CoolDialog} on:entry={console.log}>
+    Open Subscreen
+</EntryButton>
+<EntryButton this={CoolModal} component={CustomThing} on:entry={console.log}>
+    Open Subscreen
+</EntryButton>
+```

package/src/composed/entry-button.svelte

@@ -1,68 +1,29 @@
-<script>
-    /*md
-    [@] Components/EntryButton
-
-    # EntryButton
-
-    The EntryButton is a convenient way to display modals and screens over
-    content without needing to bind variables have lots of Modal elements in
-    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
-
-    ## 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
-
-    ## Usage
-    ```svelte
-    <EntryButton component={Subscreen} on:entry={console.log}>
-        Open Subscreen
-    </EntryButton>
-    <EntryButton component={CoolDialog} on:entry={console.log}>
-        Open Subscreen
-    </EntryButton>
-    <EntryButton this={CoolModal} component={CustomThing} on:entry={console.log}>
-        Open Subscreen
-    </EntryButton>
-    ```
-    */
-
-    import { createEventDispatcher } from "svelte"
-
-    import Button from "../button.svelte"
-    import Modal from "../modal.svelte"
-    import { handler$ } from "../handler$.mjs"
-
-    export let component
-    export let props
-    let wrapper = Modal
-    export { wrapper as this }
-
-    const send = createEventDispatcher()
-
-    let element = null
-    const open = handler$(
-        async (props) => {
-            const elemProps = (typeof props === "function") ? props() : props
-            const result = await element.show(elemProps)
-            send("entry", result)
-        }
-    )
-</script>
-
-<Button {...$$restProps} on:click={open(props)}>
-    <slot />
-</Button>
-
-<svelte:component this={wrapper} {component} bind:this={element} />
+<script>
+    import { createEventDispatcher } from "svelte"
+
+    import Button from "../control/button.svelte"
+    import Modal from "../layout/modal.svelte"
+    import { handler$ } from "../handler$.mjs"
+
+    export let component
+    export let props
+    let wrapper = Modal
+    export { wrapper as this }
+
+    const send = createEventDispatcher()
+
+    let element = null
+    const open = handler$(
+        async (props) => {
+            const elemProps = (typeof props === "function") ? props() : props
+            const result = await element.show(elemProps)
+            send("entry", result)
+        }
+    )
+</script>
+
+<Button {...$$restProps} on:click={open(props)}>
+    <slot />
+</Button>
+
+<svelte:component this={wrapper} {component} bind:this={element} />

package/src/composed/table-functions.js

@@ -0,0 +1,13 @@
+export const filters = {
+    text: (propName) =>
+        (row, text) =>
+            row[propName]
+                .toLowerCase()
+                .includes(text.toLowerCase())
+}
+export const sorts = {
+    natural: (propName) => {
+        const comparitor = new Intl.Collator(undefined, { numeric: true })
+        return (a, b) => comparitor.compare(a[propName], b[propName])
+    }
+}

package/src/composed/toast/message.svelte

@@ -1,44 +1,56 @@
-<script>
-    /*md
-    [@] Components/ToastMessage
-
-    # ToastMessage
-
-    The default component for Toast to show messages with
-
-    ## Props
-    - ### 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`
-        Sets `$color`
-    - ### icon `string`
-        An icon to show with the message
-    - ### message `string`
-        The message to show
-    */
-
-    import { createEventDispatcher } from "svelte"
-
-    import Button from "../../button.svelte"
-    import Icon from "../../icon.svelte"
-    import Notification from "../../notification.svelte"
-
-    export let message = ""
-    export let icon = ""
-    export let color = false
-    export let actionText = null
-
-    const dispatch = createEventDispatcher()
-    const dismiss = () => dispatch("action", null)
-    const respond = () => dispatch("action", true)
-</script>
-
-<Notification {color} on:click={dismiss}>
-    <Icon name={icon}>{message}</Icon>
-    {#if actionText}
-        <Button {color} variant="fill" on:click={respond}>
-            {actionText}
-        </Button>
-    {/if}
-</Notification>
+<script>
+    /*md
+    [@] Components/ToastMessage
+
+    # ToastMessage
+
+    The default component for Toast to show messages with
+
+    ## Props
+
+### 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`
+
+        Sets `$color`
+
+### icon
+`string`
+
+        An icon to show with the message
+
+### message
+`string`
+
+        The message to show
+    */
+
+    import { createEventDispatcher } from "svelte"
+
+    import Button from "../../control/button.svelte"
+    import Icon from "../../info/icon.svelte"
+    import Notification from "../../info/notification.svelte"
+
+    export let message = ""
+    export let icon = ""
+    export let color = false
+    export let actionText = null
+
+    const dispatch = createEventDispatcher()
+    const dismiss = () => dispatch("action", null)
+    const respond = () => dispatch("action", true)
+</script>
+
+<Notification {color} on:click={dismiss}>
+    <Icon name={icon}>{message}</Icon>
+    {#if actionText}
+        <Button {color} variant="fill" on:click={respond}>
+            {actionText}
+        </Button>
+    {/if}
+</Notification>

package/src/composed/toast.md

@@ -0,0 +1,36 @@
+# Toast
+
+Displays toast notifications along the edge of the screen.
+
+## 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.
+
+## 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.
+
+## 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.
+
+## Example
+```js
+let toast = null
+const notify = () => toast.show(5000, { message: "hi" })
+```
+```svelte
+<Toast bind:this={toast} position="bc" />
+```