@axel669/zephyr 0.3.4-beta.0 → 0.3.6

package/src/data-display/details.md

@@ -1,42 +1,42 @@
-# Details
-A component that has some baseline content that is shown, then expands to reveal
-more content (like the html details element).
-
-## Props
-
-### color
-Sets the $color macro.
-
-### label
-The text for the content that is always shown.
-
-### open
-Controls whether the Details is showing the extended content. Can be bound to.
-
-### outline
-If true, will put an outline around the component, including the extended
-content.
-
-## Slots
-
-### default
-The content to show when the Details is open.
-
-### label
-Can be used for more complex labels (things that need nested elements). If used,
-the label prop will be ignored.
-
-## Example
-
-```svelte
-<script>
-    import { Details } from "@axel669/zephyr"
-
-    let open = false
-</script>
-
-<div>Open: {open}</div>
-<Details label="Info" bind:open>
-    Look, more info could go here!
-</Details>
-```
+# Details
+A component that has some baseline content that is shown, then expands to reveal
+more content (like the html details element).
+
+## Props
+
+### color
+Sets the $color macro.
+
+### label
+The text for the content that is always shown.
+
+### open
+Controls whether the Details is showing the extended content. Can be bound to.
+
+### outline
+If true, will put an outline around the component, including the extended
+content.
+
+## Slots
+
+### default
+The content to show when the Details is open.
+
+### label
+Can be used for more complex labels (things that need nested elements). If used,
+the label prop will be ignored.
+
+## Example
+
+```svelte
+<script>
+    import { Details } from "@axel669/zephyr"
+
+    let open = false
+</script>
+
+<div>Open: {open}</div>
+<Details label="Info" bind:open>
+    Look, more info could go here!
+</Details>
+```

package/src/data-display/details.svelte

@@ -1,25 +1,25 @@
-<svelte:options immutable />
-
-<script>
-    import wsx from "../wsx.mjs"
-
-    export let label
-    export let outline
-    export let color = "@default"
-    export let open = false
-
-    $: wind = {
-        "$color": color,
-        "$outline": outline,
-        ...$$restProps,
-    }
-</script>
-
-<details use:wsx={wind} bind:open>
-    <summary>
-        <slot name="label">
-            {label}
-        </slot>
-    </summary>
-    <slot />
-</details>
+<svelte:options immutable />
+
+<script>
+    import wsx from "../wsx.mjs"
+
+    export let label
+    export let outline
+    export let color = "@default"
+    export let open = false
+
+    $: wind = {
+        "$color": color,
+        "$outline": outline,
+        ...$$restProps,
+    }
+</script>
+
+<details use:wsx={wind} bind:open>
+    <summary>
+        <slot name="label">
+            {label}
+        </slot>
+    </summary>
+    <slot />
+</details>

package/src/data-display/popover.md

@@ -1,32 +1,32 @@
-# Popover
-
-The Popover component is for displaying content over something without it
-being modal (you can interact with things under it still).
-
-## Variables
-- show
-- hide
-The Popover exposes 2 variables for use: `show` and `hide`. These functions
-are given to the content so that it can control when to display the popover
-content without needing to bind to the parent.
-
-> Beacuse the hide function is given to a named slot, the `let:hide` declaration
-> needs to be on the slotted element.
-
-## Example
-```svelte
-<script>
-    import { Popover, Button } from "@axel669/zephyr"
-</script>
-
-<Popover let:show>
-    <Button on:click={show}>
-        Show
-    </Button>
-    <div ws-x="inset-x[0px] y[0px] h[100px] bg[teal]" slot="content" let:hide>
-        <Button on:click={hide}>
-            Hide
-        </Button>
-    </div>
-</Popover>
-```
+# Popover
+
+The Popover component is for displaying content over something without it
+being modal (you can interact with things under it still).
+
+## Variables
+- show
+- hide
+The Popover exposes 2 variables for use: `show` and `hide`. These functions
+are given to the content so that it can control when to display the popover
+content without needing to bind to the parent.
+
+> Beacuse the hide function is given to a named slot, the `let:hide` declaration
+> needs to be on the slotted element.
+
+## Example
+```svelte
+<script>
+    import { Popover, Button } from "@axel669/zephyr"
+</script>
+
+<Popover let:show>
+    <Button on:click={show}>
+        Show
+    </Button>
+    <div ws-x="inset-x[0px] y[0px] h[100px] bg[teal]" slot="content" let:hide>
+        <Button on:click={hide}>
+            Hide
+        </Button>
+    </div>
+</Popover>
+```

package/src/data-display/popover.svelte

@@ -1,25 +1,25 @@
-<svelte:options immutable />
-
-<script>
-    import { fade } from "svelte/transition"
-    import wsx from "../wsx.mjs"
-
-    let visible = false
-    const show = () => visible = true
-    const hide = () => visible = false
-    const anim = { duration: 250 }
-
-    $: wind = {
-        $show: true,
-        ...$$restProps,
-    }
-</script>
-
-<ws-popover use:wsx={wind}>
-    <slot {show} />
-    {#if visible}
-        <wind-content slot="content" ws-x="[inset 0px]" transition:fade={anim}>
-            <slot name="content" {hide} />
-        </wind-content>
-    {/if}
-</ws-popover>
+<svelte:options immutable />
+
+<script>
+    import { fade } from "svelte/transition"
+    import wsx from "../wsx.mjs"
+
+    let visible = false
+    const show = () => visible = true
+    const hide = () => visible = false
+    const anim = { duration: 250 }
+
+    $: wind = {
+        $show: true,
+        ...$$restProps,
+    }
+</script>
+
+<ws-popover use:wsx={wind}>
+    <slot {show} />
+    {#if visible}
+        <wind-content slot="content" ws-x="[inset 0px]" transition:fade={anim}>
+            <slot name="content" {hide} />
+        </wind-content>
+    {/if}
+</ws-popover>

package/src/data-display/progress.md

@@ -1,46 +1,46 @@
-# Progress
-
-Displays progress bar with an optional label.
-
-## Props
-
-### color
-`string`
-
-Sets `$color`
-
-### label
-`string`
-
-The label for the bar
-
-### max
-`number`
-
-Sets the max value for the progress bar. Default is 1
-
-### outline
-`bool`
-
-Sets `$outline`
-
-### row
-`bool`
-
-Sets `$row`
-
-### value
-`number`
-
-Sets the value of the progress bar. Combined with max to determine how
-filled the bar is.
-
-## Example
-```svelte
-<script>
-    import { Progress } from "@axel669/zephyr"
-</script>
-
-<Progress color="primary" value={0.1} />
-<Progress color="primary" value={5} max={10} />
-```
+# Progress
+
+Displays progress bar with an optional label.
+
+## Props
+
+### color
+`string`
+
+Sets `$color`
+
+### label
+`string`
+
+The label for the bar
+
+### max
+`number`
+
+Sets the max value for the progress bar. Default is 1
+
+### outline
+`bool`
+
+Sets `$outline`
+
+### row
+`bool`
+
+Sets `$row`
+
+### value
+`number`
+
+Sets the value of the progress bar. Combined with max to determine how
+filled the bar is.
+
+## Example
+```svelte
+<script>
+    import { Progress } from "@axel669/zephyr"
+</script>
+
+<Progress color="primary" value={0.1} />
+<Progress color="primary" value={5} max={10} />
+```

package/src/data-display/progress.svelte

@@ -1,27 +1,27 @@
-<svelte:options immutable />
-
-<script>
-    import wsx from "../wsx.mjs"
-
-    export let value = 0
-    export let max = 1
-    export let color = "default"
-    export let outline = false
-    export let row = false
-    export let label = null
-
-    $: wind = {
-        "@progress": true,
-        "$outline": outline,
-        "$color": color,
-        $row: row,
-        ...$$restProps,
-    }
-</script>
-
-<label use:wsx={wind}>
-    {#if label}
-        <span ws-x="[$progress-label] [t-ws nowrap]">{label}</span>
-    {/if}
-    <progress {value} {max} />
-</label>
+<svelte:options immutable />
+
+<script>
+    import wsx from "../wsx.mjs"
+
+    export let value = 0
+    export let max = 1
+    export let color = "default"
+    export let outline = false
+    export let row = false
+    export let label = null
+
+    $: wind = {
+        "@progress": true,
+        "$outline": outline,
+        "$color": color,
+        $row: row,
+        ...$$restProps,
+    }
+</script>
+
+<label use:wsx={wind}>
+    {#if label}
+        <span ws-x="[$progress-label] [t-ws nowrap]">{label}</span>
+    {/if}
+    <progress {value} {max} />
+</label>

package/src/data-display/table.md

@@ -1,59 +1,59 @@
-# Table
-Wrapper for making tables in a way that is easy to maintain.
-
-## Props
-
-### color
-`string`
-
-Sets the $color macro.
-
-### data
-`Array`
-
-The data to display in the table.
-
-### fillHeader
-`bool`
-
-If true, the header row will have the background filled instead of just the
-colored border.
-
-## Slots
-
-### header
-Used to render the header for the table. Needs to include the `tr`.
-
-### row
-Used to render an item that is not `undefined`. Needs to include the `tr`. Uses
-`let:row` for the row data, and `let:rowNum` for the row number (0-based).
-
-### empty-row
-If given, will render when the item in the array is `undefined`. Uses
-`let:rowNum` for the row number (0-based).
-
-## Example
-```svelte
-<script>
-    import { Table } from "@axel669/zephyr"
-
-    const data = Array.from(
-        { length: 20 },
-        (_, i) => [i, i ** 2, i ** 3]
-    )
-</script>
-
-<Table>
-    <tr slot="header">
-        <th>N</th>
-        <th>Squared</th>
-        <th>Cubed</th>
-    </tr>
-
-    <tr slot="row" let:row>
-        <td>{row[0]}</td>
-        <td>{row[1]}</td>
-        <td>{row[2]}</td>
-    </tr>
-</Table>
-```
+# Table
+Wrapper for making tables in a way that is easy to maintain.
+
+## Props
+
+### color
+`string`
+
+Sets the $color macro.
+
+### data
+`Array`
+
+The data to display in the table.
+
+### fillHeader
+`bool`
+
+If true, the header row will have the background filled instead of just the
+colored border.
+
+## Slots
+
+### header
+Used to render the header for the table. Needs to include the `tr`.
+
+### row
+Used to render an item that is not `undefined`. Needs to include the `tr`. Uses
+`let:row` for the row data, and `let:rowNum` for the row number (0-based).
+
+### empty-row
+If given, will render when the item in the array is `undefined`. Uses
+`let:rowNum` for the row number (0-based).
+
+## Example
+```svelte
+<script>
+    import { Table } from "@axel669/zephyr"
+
+    const data = Array.from(
+        { length: 20 },
+        (_, i) => [i, i ** 2, i ** 3]
+    )
+</script>
+
+<Table>
+    <tr slot="header">
+        <th>N</th>
+        <th>Squared</th>
+        <th>Cubed</th>
+    </tr>
+
+    <tr slot="row" let:row>
+        <td>{row[0]}</td>
+        <td>{row[1]}</td>
+        <td>{row[2]}</td>
+    </tr>
+</Table>
+```

package/src/data-display/table.svelte

@@ -1,38 +1,38 @@
-<svelte:options immutable />
-
-<script>
-    import wsx from "../wsx.mjs"
-
-    export let color = false
-    export let fillHeader = false
-    export let data = []
-
-    $: wind = {
-        "$color": color,
-        "$header-fill": fillHeader,
-        ...$$restProps,
-    }
-</script>
-
-<table use:wsx={wind}>
-    <thead>
-        <slot name="header">
-            <tr>
-                <th>No Header Template</th>
-            </tr>
-        </slot>
-    </thead>
-    <tbody>
-        {#each data as row, rowNum}
-            {#if row === undefined}
-                <slot name="empty-row" {rowNum} />
-            {:else}
-                <slot name="row" {row} {rowNum}>
-                    <tr>
-                        <td>No Row Template</td>
-                    </tr>
-                </slot>
-            {/if}
-        {/each}
-    </tbody>
-</table>
+<svelte:options immutable />
+
+<script>
+    import wsx from "../wsx.mjs"
+
+    export let color = false
+    export let fillHeader = false
+    export let data = []
+
+    $: wind = {
+        "$color": color,
+        "$header-fill": fillHeader,
+        ...$$restProps,
+    }
+</script>
+
+<table use:wsx={wind}>
+    <thead>
+        <slot name="header">
+            <tr>
+                <th>No Header Template</th>
+            </tr>
+        </slot>
+    </thead>
+    <tbody>
+        {#each data as row, rowNum}
+            {#if row === undefined}
+                <slot name="empty-row" {rowNum} />
+            {:else}
+                <slot name="row" {row} {rowNum}>
+                    <tr>
+                        <td>No Row Template</td>
+                    </tr>
+                </slot>
+            {/if}
+        {/each}
+    </tbody>
+</table>

package/src/data-display/tooltip.md

@@ -1,29 +1,29 @@
-# Tooltip
-
-Displays a tooltip above (or below) some content when it's hovered.
-
-## Props
-
-### text
-`string`
-
-The text to display in the tooltip.
-
-### bottom
-`bool`
-
-If true, the tooltip will be shown under the content instead of over.
-
-## Example
-```svelte
-<script>
-    import { Tooltip, Button } from "@axel669/zephyr"
-</script>
-
-<Tooltip text="This is a button">
-    <Button>Do Thing</Button>
-</Tooltip>
-<Tooltip text="This shows under" bottom>
-    Just some text content
-</Tooltip>
-```
+# Tooltip
+
+Displays a tooltip above (or below) some content when it's hovered.
+
+## Props
+
+### text
+`string`
+
+The text to display in the tooltip.
+
+### bottom
+`bool`
+
+If true, the tooltip will be shown under the content instead of over.
+
+## Example
+```svelte
+<script>
+    import { Tooltip, Button } from "@axel669/zephyr"
+</script>
+
+<Tooltip text="This is a button">
+    <Button>Do Thing</Button>
+</Tooltip>
+<Tooltip text="This shows under" bottom>
+    Just some text content
+</Tooltip>
+```