@axel669/zephyr 0.3.4-beta.0 → 0.3.8

package/src/layout/grid.svelte

@@ -1,30 +1,30 @@
-<svelte:options immutable />
-
-<script>
-    import wsx from "../wsx.mjs"
-
-    export let direction = false
-    export let pad = false
-    export let gap = false
-    export let cols = null
-    export let rows = null
-    export let autoCol = false
-    export let autoRow = false
-    export let scrollable = false
-
-    $: wind = {
-        "gr.flow": direction,
-        "gr.cols": cols?.join?.(" ") ?? cols ?? false,
-        "gr.rows": rows?.join?.(" ") ?? rows ?? false,
-        "gr.cols.a": autoCol,
-        "gr.rows.a": autoRow,
-        p: pad,
-        gap: gap,
-        over: (scrollable === true) ? "auto" : null,
-        ...$$restProps
-    }
-</script>
-
-<ws-grid use:wsx={wind}>
-    <slot />
-</ws-grid>
+<svelte:options immutable />
+
+<script>
+    import wsx from "../wsx.mjs"
+
+    export let direction = false
+    export let pad = false
+    export let gap = false
+    export let cols = null
+    export let rows = null
+    export let autoCol = false
+    export let autoRow = false
+    export let scrollable = false
+
+    $: wind = {
+        "gr.flow": direction,
+        "gr.cols": cols?.join?.(" ") ?? cols ?? false,
+        "gr.rows": rows?.join?.(" ") ?? rows ?? false,
+        "gr.cols.a": autoCol,
+        "gr.rows.a": autoRow,
+        p: pad,
+        gap: gap,
+        over: (scrollable === true) ? "auto" : null,
+        ...$$restProps
+    }
+</script>
+
+<ws-grid use:wsx={wind}>
+    <slot />
+</ws-grid>

package/src/layout/modal.md

@@ -1,50 +1,50 @@
-# Modal
-
-The Modal component is used to control when content should be shown that
-sits over the current content and prevents interaction with the content it
-covers. It is primarily used to show drawers, dialogs, and sub screens.
-
-The `show` function will display the component specified inside a ws-modal
-element, and can be awaited for an optional return value. The component
-displayed will be passed any props supplied to `show` and a `close` function
-that can be called to hide the component again. `close` can also be given
-an argument that will be used as the promise value from `show`.
-
-If a component that a modal displays exports a `cancel` function, then
-clicking the modal area outside the displayed component will call that
-`cancel` function, allowing any modal component to decide when/if it is
-closes in response to that event.
-
-## Props
-Because the Modal does not render content of its own, it does not support
-any wind functions.
-
-
-### component
-`Component`
-
-The component to display when `show` is called
-
-## Functions
-
-### `show(props?) -> Promise`
-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 })
-        console.log(value)
-    }
-</script>
-
-<Modal component={CoolDialog} bind:this={dialog} />
-<Button on:click={dialogThing}>
-    Open Dialog
-</Button>
-```
+# Modal
+
+The Modal component is used to control when content should be shown that
+sits over the current content and prevents interaction with the content it
+covers. It is primarily used to show drawers, dialogs, and sub screens.
+
+The `show` function will display the component specified inside a ws-modal
+element, and can be awaited for an optional return value. The component
+displayed will be passed any props supplied to `show` and a `close` function
+that can be called to hide the component again. `close` can also be given
+an argument that will be used as the promise value from `show`.
+
+If a component that a modal displays exports a `cancel` function, then
+clicking the modal area outside the displayed component will call that
+`cancel` function, allowing any modal component to decide when/if it is
+closes in response to that event.
+
+## Props
+Because the Modal does not render content of its own, it does not support
+any wind functions.
+
+
+### component
+`Component`
+
+The component to display when `show` is called
+
+## Functions
+
+### `show(props?) -> Promise`
+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 })
+        console.log(value)
+    }
+</script>
+
+<Modal component={CoolDialog} bind:this={dialog} />
+<Button on:click={dialogThing}>
+    Open Dialog
+</Button>
+```

package/src/layout/modal.svelte

@@ -1,60 +1,60 @@
-<svelte:options immutable />
-
-<script context="module">
-    let topClose = null
-</script>
-
-<script>
-    import { tick } from "svelte"
-
-    export let component
-
-    let modalProps = null
-    let resolver = null
-    let displayed = null
-
-    const close = (value) => {
-        resolver(value)
-        resolver = null
-        modalProps = null
-        visible.checked = false
-        if (topClose !== close) {
-            return
-        }
-        topClose = null
-    }
-    const closeToTop = (value) => {
-        topClose(value)
-    }
-    const cancel = () => displayed.cancel?.()
-
-    export const show = (props) => new Promise(
-        async (resolve) => {
-            modalProps = props ?? {}
-            resolver = resolve
-            topClose = topClose ?? close
-            await tick()
-            setTimeout(
-                () => visible.checked = true,
-                0
-            )
-        }
-    )
-
-    let visible = null
-</script>
-
-<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 -->
-    <ws-modal on:click={cancel} role="dialog">
-        <svelte:component
-        bind:this={displayed}
-        this={component}
-        {...modalProps}
-        {close}
-        {closeToTop}
-        />
-    </ws-modal>
-{/if}
+<svelte:options immutable />
+
+<script context="module">
+    let topClose = null
+</script>
+
+<script>
+    import { tick } from "svelte"
+
+    export let component
+
+    let modalProps = null
+    let resolver = null
+    let displayed = null
+
+    const close = (value) => {
+        resolver(value)
+        resolver = null
+        modalProps = null
+        visible.checked = false
+        if (topClose !== close) {
+            return
+        }
+        topClose = null
+    }
+    const closeToTop = (value) => {
+        topClose(value)
+    }
+    const cancel = () => displayed.cancel?.()
+
+    export const show = (props) => new Promise(
+        async (resolve) => {
+            modalProps = props ?? {}
+            resolver = resolve
+            topClose = topClose ?? close
+            await tick()
+            setTimeout(
+                () => visible.checked = true,
+                0
+            )
+        }
+    )
+
+    let visible = null
+</script>
+
+<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 -->
+    <ws-modal on:click={cancel} role="dialog">
+        <svelte:component
+        bind:this={displayed}
+        this={component}
+        {...modalProps}
+        {close}
+        {closeToTop}
+        />
+    </ws-modal>
+{/if}

package/src/layout/paper.md

@@ -1,94 +1,94 @@
-# Paper
-
-The Paper component is a container that has slots for header and footer
-content that is independant from the regular content scrolling. It also uses
-Flex as a default layout for its slotted content, but allows any container
-to be used as a layout without increasing the indentation of all the content
-needlessly.
-
-## Props
-
-### color
-`string`
-
-Sets `$color`
-
-### card
-`bool`
-
-Sets `$outline`
-
-### square
-`bool`
-
-Sets `r[0px]`
-
-### layout
-`Component`
-
-Sets the layout the card will use to display content. Default is Flex.
-
-### scrollable
-`bool`
-
-Sets `over[auto]` on the layout component
-
-### l-*
-Any prop that is prefixed with `l-` will be passed to the layout
-component, with the remaining props acting as the normal wind functions
-on the paper itself
-
-## Slots
-
-### header
-The header content for the Paper. Header content does not scroll with
-the regular content of the component (acts sticky)
-
-### footer
-The footer content for the Paper. Same scrolling properties as the
-header slot
-
-### content/default
-The default slot (unnamed) for Paper will be rendered in the layout
-component defined in the props. As an alternative, a content slot may
-be used that will be rendered directly in the content slot of the Paper
-without the layout component/props being rendered (useful when nesting
-papers for example)
-
-## Example
-```svelte
-<script>
-    import { Paper, Tabs, Text, Titlebar } from "@axel669/zephyr"
-</script>
-
-<Paper>
-    <Titlebar slot="header">
-        <Text slot="title" title>
-            Some Title
-        </Text>
-    </Titlebar>
-
-    <div>Content 1</div>
-    <div>Content 2</div>
-    <div>Content 3</div>
-</Paper>
-<Paper l-pad="0px" m="4px">
-    <Titlebar slot="header">
-        <Text slot="title" title>
-            Some Screen
-        </Text>
-    </Titlebar>
-
-    <Paper slot="content">
-        <Tabs slot="header" {options} bind:value />
-
-        <div>Content 1</div>
-        <div>Content 2</div>
-        <div>Content 3</div>
-    </Paper>
-
-    <div slot="footer">
-        Wat
-    </div>
-</Paper>
-```
+# Paper
+
+The Paper component is a container that has slots for header and footer
+content that is independant from the regular content scrolling. It also uses
+Flex as a default layout for its slotted content, but allows any container
+to be used as a layout without increasing the indentation of all the content
+needlessly.
+
+## Props
+
+### color
+`string`
+
+Sets `$color`
+
+### card
+`bool`
+
+Sets `$outline`
+
+### square
+`bool`
+
+Sets `r[0px]`
+
+### layout
+`Component`
+
+Sets the layout the card will use to display content. Default is Flex.
+
+### scrollable
+`bool`
+
+Sets `over[auto]` on the layout component
+
+### l-*
+Any prop that is prefixed with `l-` will be passed to the layout
+component, with the remaining props acting as the normal wind functions
+on the paper itself
+
+## Slots
+
+### header
+The header content for the Paper. Header content does not scroll with
+the regular content of the component (acts sticky)
+
+### footer
+The footer content for the Paper. Same scrolling properties as the
+header slot
+
+### content/default
+The default slot (unnamed) for Paper will be rendered in the layout
+component defined in the props. As an alternative, a content slot may
+be used that will be rendered directly in the content slot of the Paper
+without the layout component/props being rendered (useful when nesting
+papers for example)
+
+## Example
+```svelte
+<script>
+    import { Paper, Tabs, Text, Titlebar } from "@axel669/zephyr"
+</script>
+
+<Paper>
+    <Titlebar slot="header">
+        <Text slot="title" title>
+            Some Title
+        </Text>
+    </Titlebar>
+
+    <div>Content 1</div>
+    <div>Content 2</div>
+    <div>Content 3</div>
+</Paper>
+<Paper l-pad="0px" m="4px">
+    <Titlebar slot="header">
+        <Text slot="title" title>
+            Some Screen
+        </Text>
+    </Titlebar>
+
+    <Paper slot="content">
+        <Tabs slot="header" {options} bind:value />
+
+        <div>Content 1</div>
+        <div>Content 2</div>
+        <div>Content 3</div>
+    </Paper>
+
+    <div slot="footer">
+        Wat
+    </div>
+</Paper>
+```

package/src/layout/paper.svelte

@@ -1,47 +1,47 @@
-<svelte:options immutable />
-
-<script>
-    import Flex from "./flex.svelte"
-    import wsx from "../wsx.mjs"
-
-    export let color
-    export let card = false
-    export let square = false
-    export let layout = Flex
-    export let scrollable = true
-
-    $: props = Object.entries($$restProps).reduce(
-        (p, [key, value]) => {
-            const [target, name] =
-                (key.startsWith("l-") === true)
-                ? [ p.layout, key.slice(2) ]
-                : [ p.paper, key ]
-            target[name] = value
-            return p
-        },
-        { layout: {}, paper: {} }
-    )
-
-    $: layoutProps = {
-        over: scrollable ? "auto" : false,
-        ...props.layout,
-    }
-    $: wind = {
-        "$color": color,
-        "$outline": card,
-        r: square && "0px",
-        ...props.paper,
-    }
-</script>
-
-<ws-paper use:wsx={wind}>
-    <slot name="header" />
-    {#if $$slots.content}
-        <slot name="content" slot="content" />
-    {:else}
-        <svelte:component this={layout} {...layoutProps} slot="content">
-            <slot />
-        </svelte:component>
-    {/if}
-    <slot name="footer" />
-</ws-paper>
+<svelte:options immutable />
+
+<script>
+    import Flex from "./flex.svelte"
+    import wsx from "../wsx.mjs"
+
+    export let color
+    export let card = false
+    export let square = false
+    export let layout = Flex
+    export let scrollable = true
+
+    $: props = Object.entries($$restProps).reduce(
+        (p, [key, value]) => {
+            const [target, name] =
+                (key.startsWith("l-") === true)
+                ? [ p.layout, key.slice(2) ]
+                : [ p.paper, key ]
+            target[name] = value
+            return p
+        },
+        { layout: {}, paper: {} }
+    )
+
+    $: layoutProps = {
+        over: scrollable ? "auto" : false,
+        ...props.layout,
+    }
+    $: wind = {
+        "$color": color,
+        "$outline": card,
+        r: square && "0px",
+        ...props.paper,
+    }
+</script>
+
+<ws-paper use:wsx={wind}>
+    <slot name="header" />
+    {#if $$slots.content}
+        <slot name="content" slot="content" />
+    {:else}
+        <svelte:component this={layout} {...layoutProps} slot="content">
+            <slot />
+        </svelte:component>
+    {/if}
+    <slot name="footer" />
+</ws-paper>

package/src/layout/screen.md

@@ -1,33 +1,33 @@
-# Screen
-
-The screen is a container component that is used for displaying content
-over its parent and stacks as more screens are displayed. Screens that stack
-on top of a parent screen use the Modal to control when they are shown and
-pass values back from child screens. The stacking effect of the Screen is
-controlled by internally tracked svelte context, so no manual effort is
-required to get stacking screens to have the effect.
-
-## Props
-
-### width
-`string`
-
-The width of the screen before stack-based padding is applied
-
-## Example
-```svelte
-<script>
-    import { Scren, Button, Paper } from "@axel669/zephyr"
-
-    export let close
-</script>
-
-<Screen width="70%">
-    <Paper>
-        This screen is pretty cool I swear
-        <Button on:click={() => close("hi")}>
-            Close
-        </Button>
-    </Paper>
-</Screen>
-```
+# Screen
+
+The screen is a container component that is used for displaying content
+over its parent and stacks as more screens are displayed. Screens that stack
+on top of a parent screen use the Modal to control when they are shown and
+pass values back from child screens. The stacking effect of the Screen is
+controlled by internally tracked svelte context, so no manual effort is
+required to get stacking screens to have the effect.
+
+## Props
+
+### width
+`string`
+
+The width of the screen before stack-based padding is applied
+
+## Example
+```svelte
+<script>
+    import { Scren, Button, Paper } from "@axel669/zephyr"
+
+    export let close
+</script>
+
+<Screen width="70%">
+    <Paper>
+        This screen is pretty cool I swear
+        <Button on:click={() => close("hi")}>
+            Close
+        </Button>
+    </Paper>
+</Screen>
+```