@axel669/zephyr 0.1.17 → 0.2.0-beta.1

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,6 +1,6 @@
 {
   "name": "@axel669/zephyr",
-  "version": "0.1.17",
+  "version": "0.2.0-beta.1",
   "description": "",
   "main": "src/index.mjs",
   "type": "module",
@@ -12,19 +12,22 @@
   "author": "",
   "license": "MIT",
   "dependencies": {
-    "@axel669/windstorm": "0.1.17",
-    "@labyrinthos/asuid": "^0.2.0",
-    "svelte": "^3.58.0"
+    "@axel669/windstorm": "0.2.3"
   },
   "devDependencies": {
-    "@axel669/ipsen": "^0.3.1",
+    "@axel669/ipsen": "0.4.0-beta.6",
     "@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.4"
+    "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.
+# 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 } 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.
+[Svelte Docs](https://svelte.dev/docs/v4-migration-guide#browser-conditions-for-bundlers)
+about the setting.

package/src/async/button.svelte

@@ -0,0 +1,31 @@
+<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>

package/src/async/load-zone.svelte

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

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,83 @@
+# 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
+
+## 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 />
+```