@axel669/zephyr 0.2.0-beta.3 → 0.3.6

package/src/layout/drawer.svelte

@@ -1,49 +1,49 @@
-<svelte:options immutable />
-
-<script context="module">
-    const defs = {
-        select: {
-            "$select": true,
-            "w.min": "35vw",
-            grid: true,
-            over: "hidden"
-        },
-        menu: {
-            "$menu": true,
-        },
-        action: {
-            "$action": true,
-        }
-    }
-</script>
-
-<script>
-    import wsx from "../wsx.mjs"
-
-    import Paper from "./paper.svelte"
-
-    export let height
-    export let type = "menu"
-
-    const trick = (node, options) => ({
-        delay: 0,
-        duration: 250,
-        css: () => "",
-    })
-
-    $: container = {
-        ...defs[type],
-        h: (type === "select") ? height : "100%",
-        grid: true,
-    }
-</script>
-<!-- svelte-ignore a11y-click-events-have-key-events -->
-<!-- svelte-ignore a11y-interactive-supports-focus -->
-<wind-drawer-container use:wsx={container} on:click|stopPropagation
-role="menubar" transition:trick>
-    <Paper {...$$restProps}>
-        <slot name="header" slot="header" />
-        <slot />
-        <slot name="footer" slot="footer" />
-    </Paper>
-</wind-drawer-container>
+<svelte:options immutable />
+
+<script context="module">
+    const defs = {
+        select: {
+            "@select": true,
+            "w.min": "35vw",
+            grid: true,
+            over: "hidden"
+        },
+        menu: {
+            "@menu": true,
+        },
+        action: {
+            "@action": true,
+        }
+    }
+</script>
+
+<script>
+    import wsx from "../wsx.mjs"
+
+    import Paper from "./paper.svelte"
+
+    export let height
+    export let type = "menu"
+
+    const trick = (node, options) => ({
+        delay: 0,
+        duration: 250,
+        css: () => "",
+    })
+
+    $: container = {
+        ...defs[type],
+        h: (type === "select") ? height : "100%",
+        grid: true,
+    }
+</script>
+<!-- svelte-ignore a11y-click-events-have-key-events -->
+<!-- svelte-ignore a11y-interactive-supports-focus -->
+<wind-drawer-container use:wsx={container} on:click|stopPropagation
+role="menubar" transition:trick>
+    <Paper {...$$restProps}>
+        <slot name="header" slot="header" />
+        <slot />
+        <slot name="footer" slot="footer" />
+    </Paper>
+</wind-drawer-container>

package/src/layout/flex.md

@@ -1,43 +1,43 @@
-# Flex
-
-Container that uses flex layout by default with some nice default values.
-
-## Props
-
-### direction
-`string`
-
-Sets `fl.dir`
-
-### pad
-`string`
-
-Sets `p`
-
-### gap
-`string`
-
-Sets `gap`
-
-### cross
-`string`
-
-Sets `fl.cross`, default is `"stretch"`
-
-### main
-`string`
-
-Sets `fl.main`, default is `"start"`
-
-## Example
-```svelte
-<script>
-    import { Flex, Text } from "@axel669/zephyr"
-</script>
-
-<Flex cross="stretch">
-    <Text>Content</Text>
-    <Text>More content</Text>
-    <Text>Event more content</Text>
-<Flex>
-```
+# Flex
+
+Container that uses flex layout by default with some nice default values.
+
+## Props
+
+### direction
+`string`
+
+Sets `fl.dir`
+
+### pad
+`string`
+
+Sets `p`
+
+### gap
+`string`
+
+Sets `gap`
+
+### cross
+`string`
+
+Sets `fl.cross`, default is `"stretch"`
+
+### main
+`string`
+
+Sets `fl.main`, default is `"start"`
+
+## Example
+```svelte
+<script>
+    import { Flex, Text } from "@axel669/zephyr"
+</script>
+
+<Flex cross="stretch">
+    <Text>Content</Text>
+    <Text>More content</Text>
+    <Text>Event more content</Text>
+<Flex>
+```

package/src/layout/flex.svelte

@@ -1,24 +1,26 @@
-<svelte:options immutable />
-
-<script>
-    import wsx from "../wsx.mjs"
-
-    export let direction = false
-    export let pad = false
-    export let gap = false
-    export let cross = "stretch"
-    export let main = "start"
-
-    $: wind = {
-        "fl.dir": direction,
-        "fl.cross": cross,
-        "fl.main": main,
-        p: pad,
-        gap: gap,
-        ...$$restProps
-    }
-</script>
-
-<ws-flex use:wsx={wind}>
-    <slot />
-</ws-flex>
+<svelte:options immutable />
+
+<script>
+    import wsx from "../wsx.mjs"
+
+    export let direction = false
+    export let pad = false
+    export let gap = false
+    export let cross = "stretch"
+    export let main = "start"
+    export let scrollable = false
+
+    $: wind = {
+        "fl.dir": direction,
+        "fl.cross": cross,
+        "fl.main": main,
+        p: pad,
+        gap: gap,
+        over: (scrollable === true) ? "auto" : null,
+        ...$$restProps
+    }
+</script>
+
+<ws-flex use:wsx={wind}>
+    <slot />
+</ws-flex>

package/src/layout/grid.md

@@ -1,61 +1,61 @@
-# Grid
-
-Container that uses grid layout by default with some nice default values.
-
-## Base
-[Windstorm Grid](https://axel669.github.io/lib.windstorm/#components-grid)
-
-## Props
-All [windstorm functions](https://axel669.github.io/lib.windstorm/#css-shorthands)
-are supported.
-
-
-### direction
-`string`
-
-Sets `gr.flow`
-
-### pad
-`string`
-
-Sets `p`
-
-### gap
-`string`
-
-Sets `gap`
-
-### cols
-`string|Array`
-
-Sets `gr.cols`. Accepts either an array of values that are joined by " "
-or a regular string value.
-
-### rows
-`string|Array`
-
-Sets `gr.rows`. Accepts either an array of values that are joined by " "
-or a regular string value.
-
-### autoCol
-`string`
-
-Sets `gr.cols.a`
-
-### autoRow
-`string`
-
-Sets `gr.rows.a`
-
-## Example
-```svelte
-<script>
-    import { Grid, Text } from "@axel669/zephyr"
-</script>
-
-<Grid cols="1fr 1fr">
-    <Text>Content</Text>
-    <Text>More content</Text>
-    <Text>Event more content</Text>
-<Grid>
-```
+# Grid
+
+Container that uses grid layout by default with some nice default values.
+
+## Base
+[Windstorm Grid](https://axel669.github.io/lib.windstorm/#components-grid)
+
+## Props
+All [windstorm functions](https://axel669.github.io/lib.windstorm/#css-shorthands)
+are supported.
+
+
+### direction
+`string`
+
+Sets `gr.flow`
+
+### pad
+`string`
+
+Sets `p`
+
+### gap
+`string`
+
+Sets `gap`
+
+### cols
+`string|Array`
+
+Sets `gr.cols`. Accepts either an array of values that are joined by " "
+or a regular string value.
+
+### rows
+`string|Array`
+
+Sets `gr.rows`. Accepts either an array of values that are joined by " "
+or a regular string value.
+
+### autoCol
+`string`
+
+Sets `gr.cols.a`
+
+### autoRow
+`string`
+
+Sets `gr.rows.a`
+
+## Example
+```svelte
+<script>
+    import { Grid, Text } from "@axel669/zephyr"
+</script>
+
+<Grid cols="1fr 1fr">
+    <Text>Content</Text>
+    <Text>More content</Text>
+    <Text>Event more content</Text>
+<Grid>
+```

package/src/layout/grid.svelte

@@ -1,28 +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
-
-    $: 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,
-        ...$$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}