@axel669/zephyr 0.2.0-beta.3 → 0.3.6

package/src/functions.md

@@ -1,83 +1,108 @@
-# Library Functions/Actions
-
-Zephyr has a few functions to make some tasks easier for working with the
-library.
-
-## handler$
-
-Wraps a function for currying as an event handler. The curried function does
-not pass the event into final function call.
-
-### Example
-```svelte
-<script>
-    import { handler$ } from "@axel669/zephyr"
-
-    const clicked = handler$(
-        (buttonName) => console.log(buttonName)
-    )
-</script>
-
-<!-- logs "first" when clicked -->
-<Button on:click={clicked("first")}>
-    First
-</Button>
-<!-- logs "second" when clicked -->
-<Button on:click={clicked("second")}>
-    Second
-</Button>
-```
-
-## eventHandler$
-
-Wraps a function for currying as an event handler. Unlike the `handler$`
-function, the event is passed to the curried function.
-
-### Example
-
-```svelte
-<script>
-    import { eventHandler$ } from "@axel669/zephyr"
-
-    const clicked = eventHandler$(
-        (event, buttonName) => console.log(event, buttonName)
-    )
-</script>
-
-<!-- logs the event and "first" when clicked -->
-<Button on:click={clicked("first")}>
-    First
-</Button>
-<!-- logs the event and "second" when clicked -->
-<Button on:click={clicked("second")}>
-    Second
-</Button>
-```
-
-## wsx Action
-
-The wsx action can be used to set the `ws-x` attribute on a DOM element by using
-an object as the source rather than trying to do the string manipulation
-directly.
-- `null`, `undefined`, and `false` will not insert the wind function
-- `true` will insert the wind function with no args
-- any string value will insert the wind function with the arguments formatted
-    for the parser (replace spaces and underscores as needed).
-
-### Example
-```svelte
-<script>
-    import { wsx } from "@axel669/zephyr"
-
-    // will generate ws-x="grid gr-col[1fr 1fr]"
-    const wsxProps = {
-        grid: true,
-        "gr.cols": "1fr 1fr",
-        bg: null
-    }
-</script>
-
-<div use:wsx={wsxProps}>
-    <span>Content</span>
-</div>
-```
+# Library Functions/Actions
+
+Zephyr has a few functions to make some tasks easier for working with the
+library.
+
+## handler$
+
+Wraps a function for currying as an event handler. The curried function does
+not pass the event into final function call.
+
+### Example
+```svelte
+<script>
+    import { handler$ } from "@axel669/zephyr"
+
+    const clicked = handler$(
+        (buttonName) => console.log(buttonName)
+    )
+</script>
+
+<!-- logs "first" when clicked -->
+<Button on:click={clicked("first")}>
+    First
+</Button>
+<!-- logs "second" when clicked -->
+<Button on:click={clicked("second")}>
+    Second
+</Button>
+```
+
+## eventHandler$
+
+Wraps a function for currying as an event handler. Unlike the `handler$`
+function, the event is passed to the curried function.
+
+### Example
+
+```svelte
+<script>
+    import { eventHandler$ } from "@axel669/zephyr"
+
+    const clicked = eventHandler$(
+        (event, buttonName) => console.log(event, buttonName)
+    )
+</script>
+
+<!-- logs the event and "first" when clicked -->
+<Button on:click={clicked("first")}>
+    First
+</Button>
+<!-- logs the event and "second" when clicked -->
+<Button on:click={clicked("second")}>
+    Second
+</Button>
+```
+
+## wsx Action
+
+The wsx action can be used to set the `ws-x` attribute on a DOM element by using
+an object as the source rather than trying to do the string manipulation
+directly.
+- `null`, `undefined`, and `false` will not insert the wind function
+- `true` will insert the wind function with no args
+- any string value will insert the wind function with the arguments formatted
+    for the parser (replace spaces and underscores as needed).
+
+### Example
+```svelte
+<script>
+    import { wsx } from "@axel669/zephyr"
+
+    // will generate ws-x="grid gr-col[1fr 1fr]"
+    const wsxProps = {
+        grid: true,
+        "gr.cols": "1fr 1fr",
+        bg: null
+    }
+</script>
+
+<div use:wsx={wsxProps}>
+    <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/handler$.mjs

@@ -1,20 +1,20 @@
-/**
-Wraps a handler function for easy reuse.
-
-@param {Function} func The handler function to wrap
-*/
-const handler$ = (func) =>
-    (...args) =>
-        (_, ...extra) => func(...args, ...extra)
-
-/**
-Wraps a handler function for easy reuse, and doesn't throw away the event arg
-passed by events firing.
-
-@param {Function} func The handler function to wrap
-*/
-const eventHandler$ = (func) =>
-    (...args) =>
-        (...extra) => func(...extra, ...args)
-
-export { handler$, eventHandler$ }
+/**
+Wraps a handler function for easy reuse.
+
+@param {Function} func The handler function to wrap
+*/
+const handler$ = (func) =>
+    (...args) =>
+        (_, ...extra) => func(...args, ...extra)
+
+/**
+Wraps a handler function for easy reuse, and doesn't throw away the event arg
+passed by events firing.
+
+@param {Function} func The handler function to wrap
+*/
+const eventHandler$ = (func) =>
+    (...args) =>
+        (...extra) => func(...extra, ...args)
+
+export { handler$, eventHandler$ }

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

@@ -1,52 +1,53 @@
-export { default as Button } from "./control/button.svelte"
-export { default as Input } from "./control/input.svelte"
-export { default as Link } from "./control/link.svelte"
-export { default as Radio } from "./control/radio.svelte"
-export { default as Select } from "./control/select.svelte"
-export { default as Tabs } from "./control/tabs.svelte"
-export { default as Toggle } from "./control/toggle.svelte"
-
-export { default as Avatar } from "./data-display/avatar.svelte"
-export { default as TheLastAirbender } from "./data-display/avatar.svelte"
-export { default as Badge } from "./data-display/badge.svelte"
-export { default as Chip } from "./data-display/chip.svelte"
-export { default as Details } from "./data-display/details.svelte"
-export { default as Popover } from "./data-display/popover.svelte"
-export { default as Progress } from "./data-display/progress.svelte"
-export { default as Table } from "./data-display/table.svelte"
-export { default as Tooltip } from "./data-display/tooltip.svelte"
-
-export { default as Icon } from "./info/icon.svelte"
-export { default as Notification } from "./info/notification.svelte"
-export { default as Titlebar } from "./info/titlebar.svelte"
-export { default as Toaster } from "./info/toaster.svelte"
-
-export { default as Dialog } from "./layout/dialog.svelte"
-export { default as Drawer } from "./layout/drawer.svelte"
-export { default as Flex } from "./layout/flex.svelte"
-export { default as Grid } from "./layout/grid.svelte"
-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 Text } from "./text.svelte"
-
-export { default as CircleSpinner } from "./spinner/circle-spinner.svelte"
-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"
-
-export { default as wsx } from "./wsx.mjs"
-
-
-export * from "./handler$.mjs"
-export * from "./composed/table-functions.js"
+export { default as Button } from "./control/button.svelte"
+export { default as Input } from "./control/input.svelte"
+export { default as Link } from "./control/link.svelte"
+export { default as Radio } from "./control/radio.svelte"
+export { default as Select } from "./control/select.svelte"
+export { default as Tabs } from "./control/tabs.svelte"
+export { default as Toggle } from "./control/toggle.svelte"
+
+export { default as Avatar } from "./data-display/avatar.svelte"
+export { default as TheLastAirbender } from "./data-display/avatar.svelte"
+export { default as Badge } from "./data-display/badge.svelte"
+export { default as Chip } from "./data-display/chip.svelte"
+export { default as Details } from "./data-display/details.svelte"
+export { default as Popover } from "./data-display/popover.svelte"
+export { default as Progress } from "./data-display/progress.svelte"
+export { default as Table } from "./data-display/table.svelte"
+export { default as Tooltip } from "./data-display/tooltip.svelte"
+
+export { default as Icon } from "./info/icon.svelte"
+export { default as Notification } from "./info/notification.svelte"
+export { default as Titlebar } from "./info/titlebar.svelte"
+export { default as Toaster } from "./info/toaster.svelte"
+
+export { default as Dialog } from "./layout/dialog.svelte"
+export { default as Drawer } from "./layout/drawer.svelte"
+export { default as Flex } from "./layout/flex.svelte"
+export { default as Grid } from "./layout/grid.svelte"
+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 Text } from "./text.svelte"
+
+export { default as CircleSpinner } from "./spinner/circle-spinner.svelte"
+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"
+
+export { default as wsx } from "./wsx.mjs"
+
+export { hash } from "./hash.js"
+
+export * from "./handler$.mjs"
+export * from "./composed/table-functions.js"

package/src/info/icon.md

@@ -1,21 +1,21 @@
-# Icon
-
-Displays a [Tabler Icon](https://tabler-icons.io/) and some optional text.
-The icon will appear at the beginning of the text.
-
-## Props
-
-### name
-`string`
-
-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>
-```
+# Icon
+
+Displays a [Tabler Icon](https://tabler-icons.io/) and some optional text.
+The icon will appear at the beginning of the text.
+
+## Props
+
+### name
+`string`
+
+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/icon.svelte

@@ -1,9 +1,9 @@
-<script>
-    import wsx from "../wsx.mjs"
-
-    export let name
-</script>
-
-<ws-icon class="ti-{name}" use:wsx={$$restProps}>
-    <slot />
-</ws-icon>
+<script>
+    import wsx from "../wsx.mjs"
+
+    export let name
+</script>
+
+<ws-icon class="ti-{name}" use:wsx={$$restProps}>
+    <slot />
+</ws-icon>

package/src/info/notification.md

@@ -1,36 +1,36 @@
-# Notification
-
-Displays a piece of content that stands out from the surrounding content and
-can also be used for toast messages. Optionally has some interactable
-elements embedded.
-
-Expects 1-2 child nodes and will display them on the sides of the
-notification with space between them. This means that reversing the order
-of the child nodes will flip which sides they appear on.
-
-## Props
-
-### color
-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
-    </Icon>
-</Notification>
-<Notification color="danger">
-    <Icon name="alert-hexagon">
-        Something broke
-    </Icon>
-
-    <Button>
-        Cancel
-    </Button>
-</Notification>
-```
+# Notification
+
+Displays a piece of content that stands out from the surrounding content and
+can also be used for toast messages. Optionally has some interactable
+elements embedded.
+
+Expects 1-2 child nodes and will display them on the sides of the
+notification with space between them. This means that reversing the order
+of the child nodes will flip which sides they appear on.
+
+## Props
+
+### color
+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
+    </Icon>
+</Notification>
+<Notification color="danger">
+    <Icon name="alert-hexagon">
+        Something broke
+    </Icon>
+
+    <Button>
+        Cancel
+    </Button>
+</Notification>
+```

package/src/info/notification.svelte

@@ -1,16 +1,16 @@
-<script>
-    import wsx from "../wsx.mjs"
-
-    export let color = false
-
-    $: wind = {
-        "$color": color,
-        ...$$restProps,
-    }
-</script>
-
-<!-- svelte-ignore a11y-click-events-have-key-events -->
-<!-- svelte-ignore a11y-interactive-supports-focus -->
-<ws-notification use:wsx={wind} on:click role="button">
-    <slot />
-</ws-notification>
+<script>
+    import wsx from "../wsx.mjs"
+
+    export let color = false
+
+    $: wind = {
+        "$color": color,
+        ...$$restProps,
+    }
+</script>
+
+<!-- svelte-ignore a11y-click-events-have-key-events -->
+<!-- svelte-ignore a11y-interactive-supports-focus -->
+<ws-notification use:wsx={wind} on:click role="button">
+    <slot />
+</ws-notification>