@axel669/zephyr 0.1.16 → 0.2.0-beta.0

package/LICENSE

@@ -1,21 +1,21 @@
-MIT License
-
-Copyright (c) 2023 Chris Morgan
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.
+MIT License
+
+Copyright (c) 2023 Chris Morgan
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/package.json

@@ -1,30 +1,34 @@
-{
-  "name": "@axel669/zephyr",
-  "version": "0.1.16",
-  "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.1.16",
-    "@labyrinthos/asuid": "^0.2.0",
-    "svelte": "^3.58.0"
-  },
-  "devDependencies": {
-    "@axel669/ipsen": "^0.3.1",
-    "@axel669/rollup-html-input": "^0.1.2",
-    "@rollup/plugin-node-resolve": "^15.0.2",
-    "@rollup/plugin-terser": "^0.4.0",
-    "rollup": "^3.20.2",
-    "rollup-plugin-svelte": "^7.1.4"
-  },
-  "files": [
-    "src/"
-  ]
-}
+{
+  "name": "@axel669/zephyr",
+  "version": "0.2.0-beta.0",
+  "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",
+    "@labyrinthos/asuid": "^0.2.0"
+  },
+  "devDependencies": {
+    "@axel669/ipsen": "0.4.0-beta.3",
+    "@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,44 +1,55 @@
-
-
-# Zephyr
-Zephyr is a svelte binding for the
-[Windstorm](https://www.npmjs.com/package/@axel669/windstorm)
-library.
-
-[Docs Here](https://svelte-wind.axel669.net)
-
-## Installation
-Zephyr can be installed through npm (or the variants like yarn, pnpm, etc).
-
-```bash
-npm install @axel669/svelte-wind
-```
-
-## Usage
-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.
-
-```svelte
-<script>
-    //  individual import for tree shaking
-    import { Button } from "@axel69/svelte-wind"
-
-    //  bring the whole thing to keep it simple
-    import * as Wind from "@axel69/svelte-wind"
-</script>
-
-<!-- the wsx action can be used to setup the ws-x needed for the body -->
-<svelte:body use:wsx={{theme, "@app": true}} />
-
-<Button on:click={stuff}>
-    I'm a button!
-</Button>
-
-<Wind.Button on:click={stuff}>
-    I'm also button!
-</Wind.Button>
-```
-
-### Svelte Config
-No special configuration of svelte is required, nor is there a separate plugin
-that needs to be added. Just have svelte and you're good to go.
+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.
+
+[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
+```
+
+## Usage
+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.
+
+```svelte
+<script>
+    //  individual import for tree shaking
+    import { Button } from "@axel669/zephyr"
+
+    //  bring the whole thing to keep it simple
+    import * as Wind from "@axel669/zephyr"
+</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}>
+    I'm a button!
+</Button>
+
+<Wind.Button on:click={stuff}>
+    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.
+[Details](https://svelte.dev/docs/v4-migration-guide#browser-conditions-for-bundlers)

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

@@ -0,0 +1,60 @@
+<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"
+    }
+    $: console.log($context.sorting)
+    $: 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>

package/src/composed/data-table.md

@@ -0,0 +1,71 @@
+# 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 />
+```

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>