@axel669/zephyr 0.2.0-beta.3 → 0.3.6

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="$text 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,7 +1,59 @@
-# Table
-
-Under construction.
-
-<!-- Displays data using html tables with some nice styling. This version of the
-table is fairly simple and intended for basic data displays. For more
-complex data displays the DataTable should be used. -->
+# 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>
+```

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,3 +1,42 @@
-# Alert Dialog
-
-Under construction.
+# 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,3 +1,56 @@
-# Confirm Dialog
-
-Under construction.
+# 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>