@axel669/zephyr 0.3.4-beta.0 → 0.3.6

package/src/data-display/tooltip.svelte

@@ -1,17 +1,17 @@
-<svelte:options immutable />
-
-<script>
-    import wsx from "../wsx.mjs"
-
-    export let text = ""
-    export let bottom = false
-
-    $: wind = {
-        $bottom: bottom,
-        ...$$restProps,
-    }
-</script>
-
-<ws-tooltip ws-text={text} use:wsx={wind}>
-    <slot />
-</ws-tooltip>
+<svelte:options immutable />
+
+<script>
+    import wsx from "../wsx.mjs"
+
+    export let text = ""
+    export let bottom = false
+
+    $: wind = {
+        $bottom: bottom,
+        ...$$restProps,
+    }
+</script>
+
+<ws-tooltip ws-text={text} use:wsx={wind}>
+    <slot />
+</ws-tooltip>

package/src/dialogs/alert.md

@@ -1,42 +1,42 @@
-# Alert Dialog
-A nicer alert dialog to use with [Modal](../layout/dialog.md).
-
-## Props
-
-### color
-Sets the $color macro.
-
-### icon
-The name of an icon to show with the title of the alert.
-
-### message
-The message to shwo in the alert.
-
-### okText
-The text for the button that closes the alert.
-
-### title
-The title for the alert.
-
-## Example
-```svelte
-<script>
-    import { Alert, Button, EntryButton, Modal } from "@axel669/zephyr"
-
-    let alertModal = null
-    const alertProps = {
-        title: "Alert Example",
-        message: "This is an alert!"
-    }
-    const show = () => alertModal.show(alertProps)
-</script>
-
-<Modal component={Alert} bind:this={alertModal} />
-<Button on:click={show}>
-    Show Alert
-</Button>
-
-<EntryButton props={alertProps}>
-    Show Alert
-</EntryButton>
-```
+# Alert Dialog
+A nicer alert dialog to use with [Modal](../layout/dialog.md).
+
+## Props
+
+### color
+Sets the $color macro.
+
+### icon
+The name of an icon to show with the title of the alert.
+
+### message
+The message to shwo in the alert.
+
+### okText
+The text for the button that closes the alert.
+
+### title
+The title for the alert.
+
+## Example
+```svelte
+<script>
+    import { Alert, Button, EntryButton, Modal } from "@axel669/zephyr"
+
+    let alertModal = null
+    const alertProps = {
+        title: "Alert Example",
+        message: "This is an alert!"
+    }
+    const show = () => alertModal.show(alertProps)
+</script>
+
+<Modal component={Alert} bind:this={alertModal} />
+<Button on:click={show}>
+    Show Alert
+</Button>
+
+<EntryButton props={alertProps}>
+    Show Alert
+</EntryButton>
+```

package/src/dialogs/alert.svelte

@@ -1,34 +1,34 @@
-<svelte:options immutable />
-
-<script>
-    import Button from "../control/button.svelte"
-    import Dialog from "../layout/dialog.svelte"
-    import Icon from "../info/icon.svelte"
-    import Text from "../text.svelte"
-    import Titlebar from "../info/titlebar.svelte"
-
-    export let close
-    export let title = "Alert"
-    export let icon
-    export let message
-    export let okText = "OK"
-    export let color = "@primary"
-</script>
-
-<Dialog card {color}>
-    <Titlebar slot="header" {color}>
-        <Text title slot="title">
-            <Icon name={icon}>
-                {title}
-            </Icon>
-        </Text>
-    </Titlebar>
-
-    <Text>
-        {message}
-    </Text>
-
-    <Button slot="footer" on:click={close} {color}>
-        {okText}
-    </Button>
-</Dialog>
+<svelte:options immutable />
+
+<script>
+    import Button from "../control/button.svelte"
+    import Dialog from "../layout/dialog.svelte"
+    import Icon from "../info/icon.svelte"
+    import Text from "../text.svelte"
+    import Titlebar from "../info/titlebar.svelte"
+
+    export let close
+    export let title = "Alert"
+    export let icon
+    export let message
+    export let okText = "OK"
+    export let color = "@primary"
+</script>
+
+<Dialog card {color}>
+    <Titlebar slot="header" {color}>
+        <Text title slot="title">
+            <Icon name={icon}>
+                {title}
+            </Icon>
+        </Text>
+    </Titlebar>
+
+    <Text>
+        {message}
+    </Text>
+
+    <Button slot="footer" on:click={close} {color}>
+        {okText}
+    </Button>
+</Dialog>

package/src/dialogs/confirm.md

@@ -1,56 +1,56 @@
-# Confirm Dialog
-A nicer confirm dialog to use with [Modal](../layout/dialog.md).
-
-## Props
-
-### color
-Sets the $color macro.
-
-### icon
-The name of an icon to show with the title of the dialog.
-
-### message
-The message to shwo in the confirm.
-
-### cancelText
-The text for the button that cancels the dialog.
-
-### okText
-The text for the button that confirms the dialog.
-
-### title
-The title for the dialog.
-
-## Return Values
-The Confirm component will return `true` from the `Modal.show` function if the
-OK button is clicked, and false if the Cancel button is clicked.
-
-## Example
-```svelte
-<script>
-    import { Confirm, Button, EntryButton, Modal } from "@axel669/zephyr"
-
-    let confirmModal = null
-    const confirmProps = {
-        title: "Confirm Example",
-        message: "This is an confirm!"
-    }
-    const show = async () => {
-        const result = await confirmModal.show(confirmProps)
-        if (result === true) {
-            console.log("confirmed!")
-            return
-        }
-        console.log("cancelled :(")
-    }
-</script>
-
-<Modal component={Confirm} bind:this={confirmModal} />
-<Button on:click={show}>
-    Show Confirm
-</Button>
-
-<EntryButton props={confirmProps}>
-    Show Confirm
-</EntryButton>
-```
+# Confirm Dialog
+A nicer confirm dialog to use with [Modal](../layout/dialog.md).
+
+## Props
+
+### color
+Sets the $color macro.
+
+### icon
+The name of an icon to show with the title of the dialog.
+
+### message
+The message to shwo in the confirm.
+
+### cancelText
+The text for the button that cancels the dialog.
+
+### okText
+The text for the button that confirms the dialog.
+
+### title
+The title for the dialog.
+
+## Return Values
+The Confirm component will return `true` from the `Modal.show` function if the
+OK button is clicked, and false if the Cancel button is clicked.
+
+## Example
+```svelte
+<script>
+    import { Confirm, Button, EntryButton, Modal } from "@axel669/zephyr"
+
+    let confirmModal = null
+    const confirmProps = {
+        title: "Confirm Example",
+        message: "This is an confirm!"
+    }
+    const show = async () => {
+        const result = await confirmModal.show(confirmProps)
+        if (result === true) {
+            console.log("confirmed!")
+            return
+        }
+        console.log("cancelled :(")
+    }
+</script>
+
+<Modal component={Confirm} bind:this={confirmModal} />
+<Button on:click={show}>
+    Show Confirm
+</Button>
+
+<EntryButton props={confirmProps}>
+    Show Confirm
+</EntryButton>
+```

package/src/dialogs/confirm.svelte

@@ -1,45 +1,45 @@
-<svelte:options immutable />
-
-<script>
-    import Button from "../control/button.svelte"
-    import Dialog from "../layout/dialog.svelte"
-    import Grid from "../layout/grid.svelte"
-    import Icon from "../info/icon.svelte"
-    import Text from "../text.svelte"
-    import Titlebar from "../info/titlebar.svelte"
-
-    import { handler$ } from "../handler$.mjs"
-
-    export let close
-    export let title = "Confirm"
-    export let icon
-    export let message
-    export let okText = "OK"
-    export let cancelText = "Cancel"
-    export let color = "@primary"
-
-    const cls = handler$(close)
-</script>
-
-<Dialog card {color}>
-    <Titlebar slot="header" {color}>
-        <Text title slot="title">
-            <Icon name={icon}>
-                {title}
-            </Icon>
-        </Text>
-    </Titlebar>
-
-    <Text>
-        {message}
-    </Text>
-
-    <Grid cols="1fr 1fr" slot="footer" pad="0px">
-        <Button on:click={cls(false)} color="danger">
-            {cancelText}
-        </Button>
-        <Button on:click={cls(true)} color="secondary">
-            {okText}
-        </Button>
-    </Grid>
-</Dialog>
+<svelte:options immutable />
+
+<script>
+    import Button from "../control/button.svelte"
+    import Dialog from "../layout/dialog.svelte"
+    import Grid from "../layout/grid.svelte"
+    import Icon from "../info/icon.svelte"
+    import Text from "../text.svelte"
+    import Titlebar from "../info/titlebar.svelte"
+
+    import { handler$ } from "../handler$.mjs"
+
+    export let close
+    export let title = "Confirm"
+    export let icon
+    export let message
+    export let okText = "OK"
+    export let cancelText = "Cancel"
+    export let color = "@primary"
+
+    const cls = handler$(close)
+</script>
+
+<Dialog card {color}>
+    <Titlebar slot="header" {color}>
+        <Text title slot="title">
+            <Icon name={icon}>
+                {title}
+            </Icon>
+        </Text>
+    </Titlebar>
+
+    <Text>
+        {message}
+    </Text>
+
+    <Grid cols="1fr 1fr" slot="footer" pad="0px">
+        <Button on:click={cls(false)} color="danger">
+            {cancelText}
+        </Button>
+        <Button on:click={cls(true)} color="secondary">
+            {okText}
+        </Button>
+    </Grid>
+</Dialog>

package/src/functions.md

@@ -1,108 +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>
-```
-
-## 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)`.
+# 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

@@ -1,14 +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
-}
+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
+}