@axel669/zephyr 0.2.0-beta.1 → 0.2.0-beta.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@axel669/zephyr",
-  "version": "0.2.0-beta.1",
+  "version": "0.2.0-beta.3",
   "description": "",
   "main": "src/index.mjs",
   "type": "module",
@@ -15,7 +15,7 @@
     "@axel669/windstorm": "0.2.3"
   },
   "devDependencies": {
-    "@axel669/ipsen": "0.4.0-beta.6",
+    "@axel669/ipsen": "0.4.0-beta.7",
     "@axel669/rollup-html-input": "^0.1.2",
     "@rollup/plugin-node-resolve": "^15.0.2",
     "@rollup/plugin-terser": "^0.4.0",

package/readme.md

@@ -28,20 +28,28 @@ Windstorm theme is usable, including custom ones.
 ```svelte
 <script>
     //  individual import for tree shaking
-    import { Button } from "@axel669/zephyr"
+    import {
+        Button,
+        wsx
+    } from "@axel669/zephyr"
 
     //  bring the whole thing to keep it simple
     import * as Wind from "@axel669/zephyr"
+
+    const theme = "dark"
+    const handler = () => {
+        console.log("button clicked!")
+    }
 </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}>
+<Button on:click={handler}>
     I'm a button!
 </Button>
 
-<Wind.Button on:click={stuff}>
+<Wind.Button on:click={handler}>
     I'm also button!
 </Wind.Button>
 ```

package/src/async/load-zone.svelte

@@ -1,13 +1,16 @@
+<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>
+                <span>{message}</span>
                 <Spinner size="100px" />
             </ws-flex>
         </slot>

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]

package/src/composed/data-table.md

@@ -1,3 +1,5 @@
+NOTE: include Th as its own component
+
 # DataTable
 
 The DataTable is a more advanced way to show data on screen. Underneath is

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,24 @@
 
     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)
-
     let sorting = noSort
     let filters = new Map()
     let filterFunctions = []
 
-    $: filteredData =
-        applyFilters(data, filterFunctions)
-        .sort(sorting.func)
+    $: 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)
+
+    $: 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)

package/src/composed/entry-button.svelte

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

package/src/composed/toast.svelte

@@ -1,3 +1,5 @@
+<svelte:options immutable />
+
 <script context="module">
     const genID = () => `${Date.now()}:${Math.random().toString(16)}`
 

package/src/control/button.md

@@ -25,6 +25,10 @@ is true, or `$flat` if neither is true.
 
 ## Example
 ```svelte
+<script>
+    import { Button } from "@axel669/zephyr"
+</script>
+
 <Button on:click={action}>
     Flat Button
 </Button>

package/src/control/button.svelte

@@ -1,3 +1,5 @@
+<svelte:options immutable />
+
 <script>
     import wsx from "../wsx.mjs"
     import variant from "../variant.mjs"

package/src/control/input.svelte

@@ -1,3 +1,5 @@
+<svelte:options immutable />
+
 <script context="module">
     const parseNumeric = (value) => {
         if (value === "") {

package/src/control/label.md

@@ -38,6 +38,10 @@ Sets the button variant of the label when `button` is `true`.
 ## Example
 
 ```svelte
+<script>
+    import { Label } from "@axel669/zephyr"
+</script>
+
 <Label for="checkbox">Toggle Checkbox</Label>
 <Label for="checkbox" button color="primary" fill>
     Open Menu

package/src/control/label.svelte

@@ -1,3 +1,5 @@
+<svelte:options immutable />
+
 <script>
     import wsx from "../wsx.mjs"
     import variant from "../variant.mjs"

package/src/control/link.md

@@ -37,6 +37,10 @@ is true, or `$flat` if neither is true.
 
 ## Example
 ```svelte
+<script>
+    import { Link } from "@axel669/zephyr"
+</script>
+
 <Link color="primary" href="test" target="_blank">
     Test
 </Link>

package/src/control/link.svelte

@@ -1,3 +1,5 @@
+<svelte:options immutable />
+
 <script>
     import wsx from "../wsx.mjs"
     import variant from "../variant.mjs"
@@ -16,7 +18,7 @@
     $: type = variant({ fill, outline, flat })
 
     $: wind = {
-        "@button": button,
+        "$button": button,
         [type]: true,
         "$color": color,
         ...$$restProps

package/src/control/radio.md

@@ -44,6 +44,8 @@ unique in the list.
 ## Example
 ```svelte
 <script>
+    import { Radio, Grid } from "@axel669/zephyr"
+
     const options = [
         { label: "first", value: 1 },
         { label: "second", value: [] },
@@ -52,5 +54,5 @@ unique in the list.
 </script>
 
 <Radio {options} bind:value />
-<Radio {options} bind:value={other} layout={Grid} gr-col="1fr 1fr" />
+<Radio {options} bind:value={other} layout={Grid} gr.cols="1fr 1fr" />
 ```

package/src/control/radio.svelte

@@ -1,3 +1,5 @@
+<svelte:options immutable />
+
 <script>
     import wsx from "../wsx.mjs"
     import { handler$ } from "../handler$.mjs"

package/src/control/select.md

@@ -49,6 +49,8 @@ Labels and group names should be strings, but values can be any type.
 ## Example
 ```svelte
 <script>
+    import { Select } from "@axel669/zephyr"
+
     // Results in:
     // <option>first</option>
     // <optgroup label="Not Numbers">

package/src/control/select.svelte

@@ -1,3 +1,5 @@
+<svelte:options immutable />
+
 <script context="module">
     const groupOptions = (options) => options.reduce(
         ({grouped, target = grouped}, item, pos) => {

package/src/control/tabs.md

@@ -34,6 +34,8 @@ changes and set to control which tab is selected.
 ## Example
 ```svelte
 <script>
+    import { Tabs } from "@axel669/zephyr"
+
     const options = [
         { label: "Left", value: "left" },
         { label: "Right", value: 2 },

package/src/control/tabs.svelte

@@ -1,3 +1,5 @@
+<svelte:options immutable />
+
 <script>
     import wsx from "../wsx.mjs"
     import { handler$ } from "../handler$.mjs"
@@ -20,7 +22,7 @@
     )
 
     $: wind = {
-        "@solid": solid,
+        "$solid": solid,
         "$color": color,
         $vert: vertical,
         ...$$restProps,

package/src/control/toggle.md

@@ -48,6 +48,12 @@ Only used in conjunction with bind:group, see Svelte docs
 
 ## Example
 ```svelte
+<script>
+    import { Toggle } from "@axel669/zephyr"
+
+    let checked = false
+</script>
+
 <Toggle label="Active" bind:checked />
 <Toggle label="Active" checkbox bind:checked />
 <Toggle label="Active" checkbox reverse bind:checked />

package/src/control/toggle.svelte

@@ -1,3 +1,5 @@
+<svelte:options immutable />
+
 <script>
     import wsx from "../wsx.mjs"
 

package/src/data-display/avatar.md

@@ -26,6 +26,10 @@ Text to show in the avatar area if image is not used.
 
 ## Example
 ```svelte
+<script>
+    import { Avatar } from "@axel669/zephyr"
+</script>
+
 <Avatar image="url" />
 <Avatar image="url" alt="text" />
 <Avatar text="Hi" color="primary" />

package/src/data-display/avatar.svelte

@@ -1,3 +1,5 @@
+<svelte:options immutable />
+
 <script>
     import wsx from "../wsx.mjs"
 

package/src/data-display/badge.md

@@ -15,10 +15,16 @@ The badge text.
 
 ## Example
 ```svelte
-<Badge text="100">
+<script>
+    import { Badge } from "@axel669/zephyr"
+
+    let count = 10
+</script>
+
+<Badge text={count}>
     Unread Messages
 </Badge>
 <Badge text="1k+" color="warning">
-    <button>Clickable Content</button>
+    <button on:click={() => count += 1}>Clickable Content</button>
 </Badge>
 ```

package/src/data-display/badge.svelte

@@ -1,3 +1,5 @@
+<svelte:options immutable />
+
 <script>
     import wsx from "../wsx.mjs"
 

package/src/data-display/chip.md

@@ -25,6 +25,10 @@ If true, sets $fill on the chip. If false $outline is set instead.
 
 ## Example
 ```svelte
+<script>
+    import { Chip } from "@axel669/zephyr"
+</script>
+
 Emails:
 <Chip clickable>admin@site.com</Chip>
 <Chip clickable color="warning">weirdge@site.com</Chip>

package/src/data-display/chip.svelte

@@ -1,3 +1,5 @@
+<svelte:options immutable />
+
 <script>
     import wsx from "../wsx.mjs"
     import variant from "../variant.mjs"

package/src/data-display/details.svelte

@@ -1,3 +1,5 @@
+<svelte:options immutable />
+
 <script>
     import wsx from "../wsx.mjs"
 

package/src/data-display/popover.md

@@ -15,6 +15,10 @@ content without needing to bind to the parent.
 
 ## Example
 ```svelte
+<script>
+    import { Popover, Button } from "@axel669/zephyr"
+</script>
+
 <Popover let:show>
     <Button on:click={show}>
         Show

package/src/data-display/popover.svelte

@@ -1,3 +1,5 @@
+<svelte:options immutable />
+
 <script>
     import { fade } from "svelte/transition"
     import wsx from "../wsx.mjs"

package/src/data-display/progress.md

@@ -37,6 +37,10 @@ filled the bar is.
 
 ## Example
 ```svelte
+<script>
+    import { Progress } from "@axel669/zephyr"
+</script>
+
 <Progress color="primary" value={0.1} />
 <Progress color="primary" value={5} max={10} />
 ```

package/src/data-display/progress.svelte

@@ -1,3 +1,5 @@
+<svelte:options immutable />
+
 <script>
     import wsx from "../wsx.mjs"
 
@@ -9,7 +11,7 @@
     export let label = null
 
     $: wind = {
-        "@progress": true,
+        "$progress": true,
         "$outline": outline,
         "$color": color,
         $row: row,

package/src/data-display/table.svelte

@@ -1,3 +1,5 @@
+<svelte:options immutable />
+
 <script>
     import wsx from "../wsx.mjs"
 

package/src/data-display/tooltip.md

@@ -16,6 +16,10 @@ If true, the tooltip will be shown under the content instead of over.
 
 ## Example
 ```svelte
+<script>
+    import { Tooltip, Button } from "@axel669/zephyr"
+</script>
+
 <Tooltip text="This is a button">
     <Button>Do Thing</Button>
 </Tooltip>

package/src/data-display/tooltip.svelte

@@ -1,3 +1,5 @@
+<svelte:options immutable />
+
 <script>
     import wsx from "../wsx.mjs"
 

package/src/dialogs/alert.svelte

@@ -1,3 +1,5 @@
+<svelte:options immutable />
+
 <script>
     import Button from "../control/button.svelte"
     import Dialog from "../layout/dialog.svelte"

package/src/dialogs/confirm.svelte

@@ -1,3 +1,5 @@
+<svelte:options immutable />
+
 <script>
     import Button from "../control/button.svelte"
     import Dialog from "../layout/dialog.svelte"

package/src/functions.md

@@ -11,6 +11,8 @@ not pass the event into final function call.
 ### Example
 ```svelte
 <script>
+    import { handler$ } from "@axel669/zephyr"
+
     const clicked = handler$(
         (buttonName) => console.log(buttonName)
     )
@@ -35,6 +37,8 @@ function, the event is passed to the curried function.
 
 ```svelte
 <script>
+    import { eventHandler$ } from "@axel669/zephyr"
+
     const clicked = eventHandler$(
         (event, buttonName) => console.log(event, buttonName)
     )
@@ -63,6 +67,8 @@ directly.
 ### Example
 ```svelte
 <script>
+    import { wsx } from "@axel669/zephyr"
+
     // will generate ws-x="grid gr-col[1fr 1fr]"
     const wsxProps = {
         grid: true,

package/src/index.mjs

@@ -29,7 +29,6 @@ export { default as Modal } from "./layout/modal.svelte"
 export { default as Paper } from "./layout/paper.svelte"
 export { default as Screen } from "./layout/screen.svelte"
 
-// export { default as InlineDialog } from "./inline-dialog.svelte"
 export { default as Text } from "./text.svelte"
 
 export { default as CircleSpinner } from "./spinner/circle-spinner.svelte"
@@ -38,19 +37,14 @@ export { default as HexagonSpinner } from "./spinner/hexagon-spinner.svelte"
 export { default as Alert } from "./dialogs/alert.svelte"
 export { default as Confirm } from "./dialogs/confirm.svelte"
 
+export { default as DataTable } from "./composed/data-table.svelte"
+export { default as Th } from "./composed/data-table/th.svelte"
 export { default as EntryButton } from "./composed/entry-button.svelte"
 export { default as Toast } from "./composed/toast.svelte"
 
 export { default as AsyncButton } from "./async/button.svelte"
 export { default as LoadZone } from "./async/load-zone.svelte"
 
-import DataTable from "./composed/data-table.svelte"
-import th from "./composed/data-table/th.svelte"
-DataTable.th = th
-
-export { DataTable, th }
-// export { default as DataTable } from "./composed/data-table.svelte"
-
 export { default as wsx } from "./wsx.mjs"
 
 

package/src/info/icon.md

@@ -12,6 +12,10 @@ The name of the icon. Use the tabler icon class name without the "ti-".
 
 ## Example
 ```svelte
+<script>
+    import { Icon } from "@axel669/zephyr"
+</script>
+
 <Icon name="hexagon" />
 <Icon name="hexagons">Are the bestagons</Icon>
 ```

package/src/info/notification.md

@@ -15,6 +15,10 @@ Sets `$color` and uses the fill style for coloration.
 
 ## Example
 ```svelte
+<script>
+    import { Notification, Button, Icon } from "@axel669/zephyr"
+</script>
+
 <Notification>
     <Icon name="info-hexagon">
         Some kind of information

package/src/info/titlebar.md

@@ -19,7 +19,9 @@ Sets `$fill`
 ## Slots
 
 ### title
-The center of the titlebar, where the text usually goes
+The center of the titlebar, where the text usually goes. Elements can be nested
+in different ways within a parent element for different visual effects in this
+slot.
 
 ### menu
 The area on the left of the titlebar (where drawer menus tend to open)
@@ -29,12 +31,16 @@ The area on the right of the titlebar
 
 ## Example
 ```svelte
+<script>
+    import { Titlebar, Button, Paper, Text } from "@axel669/zephyr"
+</script>
+
 <Titlebar color="primary" fill>
     <Text title slot="title">
         Some Title
     </Text>
 
-    <Button slot="menu" color={false}>
+    <Button slot="menu">
         <Icon name="menu" />
     </Button>
 </Titlebar>
@@ -43,7 +49,27 @@ The area on the right of the titlebar
     <Titlebar color="secondary" slot="header">
         <Text title slot="title">
             Paper Title
+            <Text subtitle>
+                Indented Subtitle
+            </Text>
         </Text>
     </Titlebar>
 </Paper>
+
+<Paper>
+    <Titlebar color="secondary" slot="header">
+        <Flex p="0px" slot="title">
+            <Text title>
+                Paper Title
+            </Text>
+            <Text subtitle>
+                Aligned Subtitle
+            </Text>
+        </Flex>
+
+        <Button slot="action">
+            <Icon name="menu" />
+        </Button>
+    </Titlebar>
+</Paper>
 ```

package/src/info/toaster.md

@@ -12,6 +12,10 @@ for values.
 
 ## Example
 ```svelte
+<script>
+    import { Toaster, Notification, Icon } from "@axel669/zephyr"
+</script>
+
 <Toaster position="$tc">
     <Notification>
         <Icon name="info">

package/src/layout/dialog.md

@@ -14,6 +14,10 @@ and passes the props to a `Paper`.
 ## Example
 `cool-dialog.svelte`
 ```svelte
+<script>
+    import { Dialog, Titlebar, Text } from "@axel669/zephyr"
+</script>
+
 <Dialog>
     <Titlebar slot="header">
         <Text slot="title" title>
@@ -27,6 +31,11 @@ and passes the props to a `Paper`.
 
 `app.svelte`
 ```svelte
+<script>
+    import { Modal, EntryButton } from "@axel669/zephyr"
+    import CoolDialog from "./cool-dialog.svelte"
+</script>
+
 <Modal component={CoolDialog} />
 <EntryButton this={Modal} component={CoolDialog}>
     Open Cool Dialog

package/src/layout/dialog.svelte

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

package/src/layout/drawer.md

@@ -41,6 +41,10 @@ the top of the screen
 ## Example
 `cool-drawer.svelte`
 ```svelte
+<script>
+    import { Drawer, Titlebar, Text } from "@axel669/zephyr"
+</script>
+
 <Drawer>
     <Titlebar slot="header">
         <Text slot="title" title>
@@ -54,6 +58,11 @@ the top of the screen
 
 `app.svelte`
 ```svelte
+<script>
+    import { Modal, EntryButton } from "@axel669/zephyr"
+    import CoolDrawer from "./cool-drawer.svelte"
+</script>
+
 <Modal component={CoolDrawer} />
 <EntryButton this={Modal} component={CoolDrawer}>
     Open Cool Dialog

package/src/layout/drawer.svelte

@@ -1,3 +1,5 @@
+<svelte:options immutable />
+
 <script context="module">
     const defs = {
         select: {

package/src/layout/flex.md

@@ -31,6 +31,10 @@ Sets `fl.main`, default is `"start"`
 
 ## Example
 ```svelte
+<script>
+    import { Flex, Text } from "@axel669/zephyr"
+</script>
+
 <Flex cross="stretch">
     <Text>Content</Text>
     <Text>More content</Text>

package/src/layout/flex.svelte

@@ -1,3 +1,5 @@
+<svelte:options immutable />
+
 <script>
     import wsx from "../wsx.mjs"
 

package/src/layout/grid.md

@@ -49,7 +49,11 @@ Sets `gr.rows.a`
 
 ## Example
 ```svelte
-<Grid cross="stretch">
+<script>
+    import { Grid, Text } from "@axel669/zephyr"
+</script>
+
+<Grid cols="1fr 1fr">
     <Text>Content</Text>
     <Text>More content</Text>
     <Text>Event more content</Text>

package/src/layout/grid.svelte

@@ -1,3 +1,5 @@
+<svelte:options immutable />
+
 <script>
     import wsx from "../wsx.mjs"
 

package/src/layout/modal.md

@@ -33,6 +33,9 @@ Shows the given component and passes any props provided.
 ## Example
 ```svelte
 <script>
+    import { Modal, Button } from "@axel669/zephyr"
+    import CoolDialog from "./cool-dialog.svelte"
+
     let dialog = null
     const dialogThing = async () => {
         const value = await dialog.show({ a: 10, b: 12 })

package/src/layout/modal.svelte

@@ -1,3 +1,5 @@
+<svelte:options immutable />
+
 <script context="module">
     let topClose = null
 </script>

package/src/layout/paper.md

@@ -57,6 +57,10 @@ papers for example)
 
 ## Example
 ```svelte
+<script>
+    import { Paper, Tabs, Text, Titlebar } from "@axel669/zephyr"
+</script>
+
 <Paper>
     <Titlebar slot="header">
         <Text slot="title" title>

package/src/layout/paper.svelte

@@ -1,3 +1,5 @@
+<svelte:options immutable />
+
 <script>
     import Flex from "./flex.svelte"
     import wsx from "../wsx.mjs"

package/src/layout/screen.md

@@ -15,8 +15,13 @@ required to get stacking screens to have the effect.
 The width of the screen before stack-based padding is applied
 
 ## Example
-`cool-screen.svelte`
 ```svelte
+<script>
+    import { Scren, Button, Paper } from "@axel669/zephyr"
+
+    export let close
+</script>
+
 <Screen width="70%">
     <Paper>
         This screen is pretty cool I swear

package/src/layout/screen.svelte

@@ -1,3 +1,5 @@
+<svelte:options immutable />
+
 <script context="module">
     const ctxStack = Symbol("stack context")
     const ctxClose = Symbol("close context")

package/src/spinner/circle-spinner.svelte

@@ -1,3 +1,5 @@
+<svelte:options immutable />
+
 <script>
     import wsx from "../wsx.mjs"
 

package/src/spinner/hexagon-spinner.svelte

@@ -1,3 +1,5 @@
+<svelte:options immutable />
+
 <script>
     import wsx from "../wsx.mjs"
 

package/src/text.svelte

@@ -1,3 +1,5 @@
+<svelte:options immutable />
+
 <script>
     import wsx from "./wsx.mjs"