@axel669/zephyr 0.2.0-beta.2 → 0.3.4-beta.0

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"
@@ -14,7 +16,7 @@
     export let message
     export let okText = "OK"
     export let cancelText = "Cancel"
-    export let color = "primary"
+    export let color = "@primary"
 
     const cls = handler$(close)
 </script>

package/src/functions.md

@@ -81,3 +81,28 @@ directly.
     <span>Content</span>
 </div>
 ```
+
+## hash store
+A svelte store that has the current value of the browser page hash. It uses
+polling to check the value several times a second (it's a cheap check) so the
+weird browser issues around hash change events don't affect it. Can also be used
+to set the browser hash.
+
+### Example
+```svelte
+<script>
+    import { hash } from "@axel669/zephyr"
+</script>
+
+<div>
+    Browser hash: {$hash}
+</div>
+```
+
+## sorts
+A collection fo sorting functions for use with the DataTable. Currently only
+has natural sort as `sorts.natural(colProp)`.
+
+## filters
+A collection of filter functions for use with the DataTable. Currently only has
+a text filter function as `filter.text(colProp)`.

package/src/hash.js

@@ -0,0 +1,14 @@
+import { readable } from "svelte/store"
+
+export const hash = readable(
+    location.hash.slice(1),
+    (set) => {
+        setInterval(
+            () => set(location.hash.slice(1)),
+            50
+        )
+    }
+)
+hash.set = (value) => {
+    location.hash = value
+}

package/src/index.mjs

@@ -38,7 +38,7 @@ 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 TH } from "./composed/data-table/th.svelte"
 export { default as EntryButton } from "./composed/entry-button.svelte"
 export { default as Toast } from "./composed/toast.svelte"
 
@@ -47,6 +47,7 @@ export { default as LoadZone } from "./async/load-zone.svelte"
 
 export { default as wsx } from "./wsx.mjs"
 
+export { hash } from "./hash.js"
 
 export * from "./handler$.mjs"
 export * from "./composed/table-functions.js"

package/src/inline-dialog.svelte

@@ -13,7 +13,7 @@
 </script>
 
 <slot name="toggle" {id} />
-<input type="checkbox" ws-x="hide" {id} />
+<input type="checkbox" ws-x="[hide]" {id} />
 <ws-modal>
     <ws-paper use:wsx={paper}>
         <slot name="header" {id} />

package/src/layout/dialog.svelte

@@ -1,3 +1,5 @@
+<svelte:options immutable />
+
 <script>
     import { fade } from "svelte/transition"
 
@@ -14,7 +16,7 @@
 
 <!-- svelte-ignore a11y-click-events-have-key-events -->
 <!-- svelte-ignore a11y-no-noninteractive-element-interactions -->
-<wind-wrapper transition:trick ws-x="$dialog grid" on:click|stopPropagation
+<wind-wrapper transition:trick ws-x="@dialog [grid]" on:click|stopPropagation
 role="dialog">
     <Paper {...$$props}>
         <slot name="header" slot="header" />

package/src/layout/drawer.svelte

@@ -1,16 +1,18 @@
+<svelte:options immutable />
+
 <script context="module">
     const defs = {
         select: {
-            "$select": true,
+            "@select": true,
             "w.min": "35vw",
             grid: true,
             over: "hidden"
         },
         menu: {
-            "$menu": true,
+            "@menu": true,
         },
         action: {
-            "$action": true,
+            "@action": true,
         }
     }
 </script>

package/src/layout/flex.svelte

@@ -1,3 +1,5 @@
+<svelte:options immutable />
+
 <script>
     import wsx from "../wsx.mjs"
 
@@ -6,6 +8,7 @@
     export let gap = false
     export let cross = "stretch"
     export let main = "start"
+    export let scrollable = false
 
     $: wind = {
         "fl.dir": direction,
@@ -13,6 +16,7 @@
         "fl.main": main,
         p: pad,
         gap: gap,
+        over: (scrollable === true) ? "auto" : null,
         ...$$restProps
     }
 </script>

package/src/layout/grid.svelte

@@ -1,3 +1,5 @@
+<svelte:options immutable />
+
 <script>
     import wsx from "../wsx.mjs"
 
@@ -8,6 +10,7 @@
     export let rows = null
     export let autoCol = false
     export let autoRow = false
+    export let scrollable = false
 
     $: wind = {
         "gr.flow": direction,
@@ -17,6 +20,7 @@
         "gr.rows.a": autoRow,
         p: pad,
         gap: gap,
+        over: (scrollable === true) ? "auto" : null,
         ...$$restProps
     }
 </script>

package/src/layout/modal.svelte

@@ -1,3 +1,5 @@
+<svelte:options immutable />
+
 <script context="module">
     let topClose = null
 </script>
@@ -42,7 +44,7 @@
     let visible = null
 </script>
 
-<input type="checkbox" bind:this={visible} ws-x="disp[none]" />
+<input type="checkbox" bind:this={visible} ws-x="[disp none]" />
 {#if resolver !== null}
     <!-- svelte-ignore a11y-click-events-have-key-events -->
     <!-- svelte-ignore a11y-no-noninteractive-element-interactions -->

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")
@@ -20,8 +22,8 @@
     setContext(ctxStack, stack + 1)
 
     $: wind = {
-        "&stack": stack.toString(),
-        "&screen-width": width,
+        "@stack": stack.toString(),
+        "@screen-width": width,
         "bg.c": "transparent",
         ...$$restProps
     }

package/src/spinner/circle-spinner.svelte

@@ -1,11 +1,13 @@
+<svelte:options immutable />
+
 <script>
     import wsx from "../wsx.mjs"
 
     export let size = "100px"
-    export let color = "primary"
+    export let color = "@primary"
 
     $: wind = {
-        "&size": size,
+        "@size": size,
         "$color": color,
     }
 </script>

package/src/spinner/hexagon-spinner.svelte

@@ -1,11 +1,13 @@
+<svelte:options immutable />
+
 <script>
     import wsx from "../wsx.mjs"
 
     export let size = "100px"
-    export let color = "primary"
+    export let color = "@primary"
 
     $: wind = {
-        "&size": size,
+        "@size": size,
         "$color": color,
     }
 </script>

package/src/spinner/spinners.md

@@ -1,3 +1,22 @@
 # Spinners
+Zephyr exports the CircleSpinner and HexagonSpinner components as wrappers for
+windstorms spinners of the same name. Both spinners are svgs with a bit of code
+setup as web components.
 
-Under construction.
+## Props
+
+### color
+Sets the $color macro.
+
+### size
+The size of the spinner (width and height). Uses css units.
+
+## Example
+```svelte
+<script>
+    import { HexagonSpinner } from "@axel669/zephyr"
+</script>
+
+<HexagonSpinner size="50px" />
+<HexagonSpinner size="500px" color="@secondary" />
+```

package/src/text.svelte

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

package/src/wsx.mjs

@@ -1,6 +1,6 @@
 import ws from "@axel669/windstorm"
 
-ws.custom("outline", (o) => ws.prop("outline", o))
+// ws.custom("outline", (o) => ws.prop("outline", o))
 
 export default (node, props) => {
     const update = (props) => {