@axel669/zephyr 0.3.4-beta.0 → 0.3.8

package/src/layout/dialog.md

@@ -1,43 +1,43 @@
-# Dialog
-
-A modal container for creating dialogs. The Dialog component is a modal
-element that uses a Paper element for the layout of content. All props and
-slots for the Dialog are passed to the underlying Paper component.
-
-The Dialog component is used as a wrapper for content and is used in
-conjunction with the Modal component to be controlled on screen.
-
-## Props
-This component just wraps a [Paper](./paper.md) component with some extra parts,
-and passes the props to a `Paper`.
-
-## Example
-`cool-dialog.svelte`
-```svelte
-<script>
-    import { Dialog, Titlebar, Text } from "@axel669/zephyr"
-</script>
-
-<Dialog>
-    <Titlebar slot="header">
-        <Text slot="title" title>
-            Some Title
-        </Text>
-    </Titlebar>
-
-    <span>Content</span>
-</Dialog>
-```
-
-`app.svelte`
-```svelte
-<script>
-    import { Modal, EntryButton } from "@axel669/zephyr"
-    import CoolDialog from "./cool-dialog.svelte"
-</script>
-
-<Modal component={CoolDialog} />
-<EntryButton this={Modal} component={CoolDialog}>
-    Open Cool Dialog
-</EntryButton>
-```
+# Dialog
+
+A modal container for creating dialogs. The Dialog component is a modal
+element that uses a Paper element for the layout of content. All props and
+slots for the Dialog are passed to the underlying Paper component.
+
+The Dialog component is used as a wrapper for content and is used in
+conjunction with the Modal component to be controlled on screen.
+
+## Props
+This component just wraps a [Paper](./paper.md) component with some extra parts,
+and passes the props to a `Paper`.
+
+## Example
+`cool-dialog.svelte`
+```svelte
+<script>
+    import { Dialog, Titlebar, Text } from "@axel669/zephyr"
+</script>
+
+<Dialog>
+    <Titlebar slot="header">
+        <Text slot="title" title>
+            Some Title
+        </Text>
+    </Titlebar>
+
+    <span>Content</span>
+</Dialog>
+```
+
+`app.svelte`
+```svelte
+<script>
+    import { Modal, EntryButton } from "@axel669/zephyr"
+    import CoolDialog from "./cool-dialog.svelte"
+</script>
+
+<Modal component={CoolDialog} />
+<EntryButton this={Modal} component={CoolDialog}>
+    Open Cool Dialog
+</EntryButton>
+```

package/src/layout/dialog.svelte

@@ -1,26 +1,26 @@
-<svelte:options immutable />
-
-<script>
-    import { fade } from "svelte/transition"
-
-    import wsx from "../wsx.mjs"
-
-    import Paper from "./paper.svelte"
-
-    const trick = (node, options) => ({
-        delay: 0,
-        duration: 250,
-        css: () => "",
-    })
-</script>
-
-<!-- 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
-role="dialog">
-    <Paper {...$$props}>
-        <slot name="header" slot="header" />
-        <slot />
-        <slot name="footer" slot="footer" />
-    </Paper>
-</wind-wrapper>
+<svelte:options immutable />
+
+<script>
+    import { fade } from "svelte/transition"
+
+    import wsx from "../wsx.mjs"
+
+    import Paper from "./paper.svelte"
+
+    const trick = (node, options) => ({
+        delay: 0,
+        duration: 250,
+        css: () => "",
+    })
+</script>
+
+<!-- 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
+role="dialog">
+    <Paper {...$$props}>
+        <slot name="header" slot="header" />
+        <slot />
+        <slot name="footer" slot="footer" />
+    </Paper>
+</wind-wrapper>

package/src/layout/drawer.md

@@ -1,70 +1,70 @@
-# Drawer
-
-A modal container for creating dialogs. The Dialog component is a modal
-element that uses a Paper element for the layout of content. All extra props
-and slots for the Drawer are passed to the underlying Paper component.
-
-The Drawer component is used as a wrapper for content and is used in
-conjunction with the Modal component to be controlled on screen.
-
-## Props
-
-### close
-`function`
-
-If passed, this function will be called when the user clicks in the
-empty area outside of the drawer contents.
-
-### height
-`string`
-
-Sets the height of the select drawer, no effect for menu and action
-drawers which default to full height of the window.
-
-### type
-`string`
-
-The type of drawer. Default is "menu"
-#### "menu"
-
-Makes a drawer that slides in on the left side of the screen
-
-#### "action"
-
-Makes a drawer that slides in on the right side of the screen
-
-#### "select"
-
-Makes a drawer that is centered horizontally and slides in from
-the top of the screen
-
-## Example
-`cool-drawer.svelte`
-```svelte
-<script>
-    import { Drawer, Titlebar, Text } from "@axel669/zephyr"
-</script>
-
-<Drawer>
-    <Titlebar slot="header">
-        <Text slot="title" title>
-            Some Title
-        </Text>
-    </Titlebar>
-
-    <span>Content</span>
-</Drawer>
-```
-
-`app.svelte`
-```svelte
-<script>
-    import { Modal, EntryButton } from "@axel669/zephyr"
-    import CoolDrawer from "./cool-drawer.svelte"
-</script>
-
-<Modal component={CoolDrawer} />
-<EntryButton this={Modal} component={CoolDrawer}>
-    Open Cool Dialog
-</EntryButton>
-```
+# Drawer
+
+A modal container for creating dialogs. The Dialog component is a modal
+element that uses a Paper element for the layout of content. All extra props
+and slots for the Drawer are passed to the underlying Paper component.
+
+The Drawer component is used as a wrapper for content and is used in
+conjunction with the Modal component to be controlled on screen.
+
+## Props
+
+### close
+`function`
+
+If passed, this function will be called when the user clicks in the
+empty area outside of the drawer contents.
+
+### height
+`string`
+
+Sets the height of the select drawer, no effect for menu and action
+drawers which default to full height of the window.
+
+### type
+`string`
+
+The type of drawer. Default is "menu"
+#### "menu"
+
+Makes a drawer that slides in on the left side of the screen
+
+#### "action"
+
+Makes a drawer that slides in on the right side of the screen
+
+#### "select"
+
+Makes a drawer that is centered horizontally and slides in from
+the top of the screen
+
+## Example
+`cool-drawer.svelte`
+```svelte
+<script>
+    import { Drawer, Titlebar, Text } from "@axel669/zephyr"
+</script>
+
+<Drawer>
+    <Titlebar slot="header">
+        <Text slot="title" title>
+            Some Title
+        </Text>
+    </Titlebar>
+
+    <span>Content</span>
+</Drawer>
+```
+
+`app.svelte`
+```svelte
+<script>
+    import { Modal, EntryButton } from "@axel669/zephyr"
+    import CoolDrawer from "./cool-drawer.svelte"
+</script>
+
+<Modal component={CoolDrawer} />
+<EntryButton this={Modal} component={CoolDrawer}>
+    Open Cool Dialog
+</EntryButton>
+```

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,26 +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"
-    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>
+<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>
+```