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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@axel669/zephyr",
-  "version": "0.2.0-beta.2",
+  "version": "0.2.0-beta.3",
   "description": "",
   "main": "src/index.mjs",
   "type": "module",

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.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.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.svelte

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

package/src/control/link.svelte

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

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.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.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.svelte

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

package/src/data-display/avatar.svelte

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

package/src/data-display/badge.svelte

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

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.svelte

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

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.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/layout/dialog.svelte

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

package/src/layout/drawer.svelte

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

package/src/layout/flex.svelte

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

package/src/layout/grid.svelte

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

package/src/layout/modal.svelte

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

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.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"