@axel669/zephyr 0.1.17 → 0.2.0-beta.1

package/src/control/select.svelte

@@ -0,0 +1,62 @@
+<script context="module">
+    const groupOptions = (options) => options.reduce(
+        ({grouped, target = grouped}, item, pos) => {
+            const opt = { ... item, pos }
+            if (item.group === undefined) {
+                target.push(opt)
+                return { grouped, target }
+            }
+            const next = [opt]
+            grouped.push(next)
+            return { grouped, target: next }
+        },
+        { grouped: [] }
+    ).grouped
+</script>
+
+<script>
+    import wsx from "../wsx.mjs"
+
+    export let options = []
+    export let value
+    export let color = "default"
+    export let outline = false
+    export let label = null
+    export let disabled = false
+
+    const update = (evt) => value = options[evt.target.value].value
+
+    $: indexValue = options.findIndex(item => item.value === value)
+
+    $: grouped = groupOptions(options)
+
+    $: wind = {
+        "$control": true,
+        "$outline": outline,
+        "$color": color,
+        ...$$restProps,
+    }
+</script>
+
+<label use:wsx={wind}>
+    {#if label}
+        <span ws-x="$text">{label}</span>
+    {/if}
+    <select value={indexValue} on:input={update} {disabled}>
+        {#each grouped as item, index}
+            {#if Array.isArray(item) === false}
+                <option value={item.pos}>
+                    {item.label}
+                </option>
+            {:else}
+                <optgroup label={item[0].group}>
+                    {#each item.slice(1) as subitem, subindex}
+                        <option value={subitem.pos}>
+                            {subitem.label}
+                        </option>
+                    {/each}
+                </optgroup>
+            {/if}
+        {/each}
+    </select>
+</label>

package/src/control/tabs.md

@@ -0,0 +1,45 @@
+# Tabs
+
+It's tabs, everyone knows what tabs are at this point.
+
+## Props
+
+### color
+`string`
+
+Sets `$color`
+
+### options
+`Array[Object]`
+
+An array of options where each item is `{ label, value }`. `label`
+should be a string, `value` can be of any type.
+
+### vertical
+`bool`
+
+Sets `$vert`
+
+### solid
+`bool`
+
+Sets `$solid`
+
+### value
+`any`
+
+The value of the currently selected tab. Can be bound to react to
+changes and set to control which tab is selected.
+
+## Example
+```svelte
+<script>
+    const options = [
+        { label: "Left", value: "left" },
+        { label: "Right", value: 2 },
+    ]
+</script>
+
+<Tab {options} bind:value color="primary" />
+<Tab {options} bind:value color="secondary" solid vertical />
+```

package/src/control/tabs.svelte

@@ -0,0 +1,39 @@
+<script>
+    import wsx from "../wsx.mjs"
+    import { handler$ } from "../handler$.mjs"
+
+    export let color = "primary"
+    export let options = []
+    export let vertical = false
+    export let solid = false
+    export let value
+
+    $: index = options.findIndex(item => item.value === value)
+
+    const set = handler$(
+        (next) => {
+            if (value === next) {
+                return
+            }
+            value = next
+        }
+    )
+
+    $: wind = {
+        "@solid": solid,
+        "$color": color,
+        $vert: vertical,
+        ...$$restProps,
+    }
+</script>
+
+<!-- svelte-ignore a11y-click-events-have-key-events -->
+<ws-tabs use:wsx={wind} role="tablist">
+    {#each options as tab, i}
+        <!-- svelte-ignore a11y-interactive-supports-focus -->
+        <ws-tab use:wsx={{"$tab-selected": index === i}}
+        on:click={set(tab.value)} role="tab">
+            {tab.label}
+        </ws-tab>
+    {/each}
+</ws-tabs>

package/src/control/toggle.md

@@ -0,0 +1,55 @@
+# Toggle
+
+The Toggle component is used to display checkboxes and switches.
+
+## Props
+
+### color
+`string`
+
+Sets `$color`
+
+### checkbox
+`bool`
+
+If true, the toggle is displayed as a checkbox. Default is false
+(shown as a switch)
+
+### checked
+`bool`
+
+Controls if the toggle is checked or not. Can be bound.
+
+### group
+Used for binding, see the
+[Svelte bind:group](https://svelte.dev/docs/element-directives#bind-group)
+for details.
+
+### label
+`string`
+
+The text to use for the label
+
+### flat
+`bool`
+
+Sets `$flat`
+
+### reverse
+`bool`
+
+If true, the input being toggled will be on the left instead of the
+right. Default is false (label is on the left)
+
+### value
+`any`
+
+Only used in conjunction with bind:group, see Svelte docs
+
+## Example
+```svelte
+<Toggle label="Active" bind:checked />
+<Toggle label="Active" checkbox bind:checked />
+<Toggle label="Active" checkbox reverse bind:checked />
+<Toggle label="Active" checkbox flat color="danger" bind:checked />
+```

package/src/control/toggle.svelte

@@ -0,0 +1,47 @@
+<script>
+    import wsx from "../wsx.mjs"
+
+    export let label = ""
+    export let color = "default"
+    export let checked = false
+    export let flat = false
+    export let value
+    export let group = []
+    export let checkbox = false
+    export let reverse = false
+
+    $: container = {
+        "$toggle": true,
+        "$flat": flat,
+        "$color": color,
+        "fl.dir": reverse ? "row-reverse" : false,
+        ...$$restProps,
+    }
+    $: input = {
+        "$switch": checkbox === false
+    }
+
+    const updateGroup = (checked) => {
+        if (checked === true) {
+            if (group.includes(value) === true) {
+                return
+            }
+            group = [...group, value]
+            return
+        }
+        if (group.includes(value) === false) {
+            return
+        }
+        group = group.filter(item => item !== value)
+    }
+    $: updateGroup(checked)
+</script>
+
+<label use:wsx={container}>
+    <div>
+        <slot>
+            {label}
+        </slot>
+    </div>
+    <input type="checkbox" bind:checked use:wsx={input} />
+</label>

package/src/data-display/avatar.md

@@ -0,0 +1,32 @@
+# Avatar
+
+Displays an image or text in a circular container.
+
+## Props
+
+### alt
+`string`
+
+Alt text for the image. Has no effect if image prop is not used.
+
+### color
+`string`
+
+Sets `$color`
+
+### image
+`string`
+
+An image url. If no url is provided the text property is displayed.
+
+### text
+`string`
+
+Text to show in the avatar area if image is not used.
+
+## Example
+```svelte
+<Avatar image="url" />
+<Avatar image="url" alt="text" />
+<Avatar text="Hi" color="primary" />
+```

package/src/data-display/avatar.svelte

@@ -0,0 +1,23 @@
+<script>
+    import wsx from "../wsx.mjs"
+
+    export let alt = ""
+    export let image = null
+
+    export let text = ""
+
+    export let color = false
+
+    $: wind = {
+        "$color": color,
+        ...$$restProps
+    }
+</script>
+
+<ws-avatar use:wsx={wind}>
+    {#if image !== null}
+        <img src={image} {alt} />
+    {:else}
+        {text}
+    {/if}
+</ws-avatar>

package/src/data-display/badge.md

@@ -0,0 +1,24 @@
+# Badge
+Adds a small badge over the upper-right corner of some content.
+
+## Props
+
+### color
+`string`
+
+Sets `$color`
+
+### text
+`string`
+
+The badge text.
+
+## Example
+```svelte
+<Badge text="100">
+    Unread Messages
+</Badge>
+<Badge text="1k+" color="warning">
+    <button>Clickable Content</button>
+</Badge>
+```

package/src/data-display/badge.svelte

@@ -0,0 +1,12 @@
+<script>
+    import wsx from "../wsx.mjs"
+
+    export let color = "default"
+    export let text = ""
+
+    $: wind = { "$color": color, ...$$restProps }
+</script>
+
+<ws-badge ws-text={text} use:wsx={wind}>
+    <slot />
+</ws-badge>

package/src/data-display/chip.md

@@ -0,0 +1,32 @@
+# Chip
+
+Shows a small piece of information that is separate from the surrounding
+info and optionally allows interaction.
+
+## Props
+
+### color
+`string`
+
+Sets `$color`
+
+### clickable
+`bool`
+
+If true, the chip will have the button ripple effect when clicked.
+
+### fill
+`bool`
+
+If true, sets $fill on the chip. If false $outline is set instead.
+
+## Events
+- click
+
+## Example
+```svelte
+Emails:
+<Chip clickable>admin@site.com</Chip>
+<Chip clickable color="warning">weirdge@site.com</Chip>
+<Chip color="primary" fill>required@site.io</Chip>
+```

package/src/data-display/chip.svelte

@@ -0,0 +1,26 @@
+<script>
+    import wsx from "../wsx.mjs"
+    import variant from "../variant.mjs"
+
+    export let color = "default"
+    export let clickable = false
+
+    export let fill = false
+    export let outline = false
+    export let flat = false
+
+    $: type = variant({ fill, flat, outline }, "$outline")
+
+    $: wind = {
+        [type]: true,
+        "$color": color,
+        $click: clickable,
+        ...$$restProps
+    }
+</script>
+
+<!-- svelte-ignore a11y-click-events-have-key-events -->
+<!-- svelte-ignore a11y-interactive-supports-focus -->
+<ws-chip use:wsx={wind} on:click role="button">
+    <slot />
+</ws-chip>

package/src/data-display/details.md

@@ -0,0 +1,3 @@
+# Details
+
+Still working on this one.

package/src/{details.svelte → data-display/details.svelte}

@@ -1,5 +1,5 @@
 <script>
-    import wsx from "./wsx.mjs"
+    import wsx from "../wsx.mjs"
 
     export let label
     export let outline
@@ -7,8 +7,8 @@
     export let open = false
 
     $: wind = {
-        $color: color,
-        "@outline": outline,
+        "$color": color,
+        "$outline": outline,
         ...$$restProps,
     }
 </script>

package/src/data-display/popover.md

@@ -0,0 +1,28 @@
+# 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
+<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

@@ -0,0 +1,23 @@
+<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

@@ -0,0 +1,42 @@
+# 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
+<Progress color="primary" value={0.1} />
+<Progress color="primary" value={5} max={10} />
+```

package/src/data-display/progress.svelte

@@ -0,0 +1,25 @@
+<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>

package/src/data-display/table.md

@@ -0,0 +1,7 @@
+# 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. -->

package/src/data-display/table.svelte

@@ -0,0 +1,36 @@
+<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

@@ -0,0 +1,25 @@
+# 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
+<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

@@ -0,0 +1,15 @@
+<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

@@ -0,0 +1,3 @@
+# Alert Dialog
+
+Under construction.

package/src/dialogs/alert.svelte

@@ -1,9 +1,9 @@
 <script>
-    import Button from "../button.svelte"
-    import Dialog from "../dialog.svelte"
-    import Icon from "../icon.svelte"
+    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 "../titlebar.svelte"
+    import Titlebar from "../info/titlebar.svelte"
 
     export let close
     export let title = "Alert"

package/src/dialogs/confirm.md

@@ -0,0 +1,3 @@
+# Confirm Dialog
+
+Under construction.

package/src/dialogs/confirm.svelte

@@ -1,10 +1,10 @@
 <script>
-    import Button from "../button.svelte"
-    import Dialog from "../dialog.svelte"
-    import Grid from "../grid.svelte"
-    import Icon from "../icon.svelte"
+    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 "../titlebar.svelte"
+    import Titlebar from "../info/titlebar.svelte"
 
     import { handler$ } from "../handler$.mjs"