@axel669/zephyr 0.1.16 → 0.2.0-beta.0

package/src/control/link.md

@@ -0,0 +1,37 @@
+# Link
+
+Themed and customizale `<a>` tag component.
+
+## Props
+
+### button `string`
+
+If true, the link will be styled like a button
+
+### color `string`
+
+Sets the color of the button. Applies to both regular links and button
+style links.
+
+- ### href `string`
+    Sets the href attribute.
+
+- ### rel `string`
+    Sets the rel attribute.
+
+- ### target `string`
+    Sets the target attribute.
+
+- ### fill / outline `bool`
+    Sets the link-button type to $fill if fill is true, $outline if outline
+    is true, or $flat if neither is true.
+
+## Usage
+```svelte
+<Link color="primary" href="test" target="_blank">
+    Test
+</Link>
+<Link color="primary" href="logout" button outline>
+    Logout
+</Link>
+```

package/src/control/link.svelte

@@ -0,0 +1,28 @@
+<script>
+    import wsx from "../wsx.mjs"
+    import variant from "../variant.mjs"
+
+    export let button = false
+    export let color = false
+
+    export let href = ""
+    export let rel = "noreferrer"
+    export let target = null
+
+    export let fill = false
+    export let outline = false
+    export let flat = false
+
+    $: type = variant({ fill, outline, flat })
+
+    $: wind = {
+        "@button": button,
+        [type]: true,
+        "$color": color,
+        ...$$restProps
+    }
+</script>
+
+<a {href} {target} {rel} use:wsx={wind}>
+    <slot />
+</a>

package/src/control/radio.md

@@ -0,0 +1,49 @@
+# Radio
+
+The radio component displays a list of radio options and provides an
+interface to control which one is selected and react to changes in the
+selected value. It also uses a layout component to decide how the options
+are presented.
+
+## Base
+Each radio item rendered is a
+[Windstorm Labeled Toggle](https://axel669.github.io/lib.windstorm/#components-labeled toggle)
+that uses a radio input.
+
+## Props
+All [windstorm functions](https://axel669.github.io/lib.windstorm/#css-shorthands)
+are supported.
+
+Unlike the Paper, the wind functions passed as props to the Radio component
+are passed directly to the layout specified because the Radio does not have
+a container element of its own.
+
+- ### layout `Component`
+    The component to use for layout out the options. Default is Flex.
+- ### options `Array[Object]`
+    An array of objects that defines the options to show. Details below.
+- ### value `any`
+    The value currently selected. Can be bound to react to selections or
+    change the current selection.
+
+## Options
+Each object in the options array supplied should have a `value` and `label`
+prop specified. Additionally, any wind functions that should be applied to
+the option can be passed as additional props.
+
+Labels should be strings, but values can be any type as long as they are
+unique in the list.
+
+```js
+const options = [
+    { label: "first", value: 1 },
+    { label: "second", value: [] },
+    { label: "third", value: "3", "$color": "warning" }
+]
+```
+
+## Usage
+```svelte
+<Radio {options} bind:value />
+<Radio {options} bind:value={other} layout={Grid} gr-col="1fr 1fr" />
+```

package/src/control/radio.svelte

@@ -0,0 +1,28 @@
+<script>
+    import asuid from "@labyrinthos/asuid"
+
+    import wsx from "../wsx.mjs"
+    import { handler$ } from "../handler$.mjs"
+
+    import Flex from "../layout/flex.svelte"
+
+    export let options = []
+    export let layout = Flex
+    export let value
+
+    $: valueIndex = options.findIndex(item => item.value === value)
+    const set = handler$(
+        (newValue) => value = newValue
+    )
+
+    const name = asuid()
+</script>
+
+<svelte:component this={layout} {...$$restProps}>
+    {#each options as {value, label, disabled, ...wind}, index (value)}
+        <label use:wsx={{"$toggle": true, ...wind}} {disabled}>
+            <span>{label}</span>
+            <input type="radio" on:input={set(value)} {name} checked={index === valueIndex} />
+        </label>
+    {/each}
+</svelte:component>

package/src/control/select.md

@@ -0,0 +1,55 @@
+# Select
+
+A wrapper for select elements to make them look nicer.
+
+## Base
+[Windstorm Labeled Control](https://axel669.github.io/lib.windstorm/#components-labeled control)
+using a `<select>`
+
+## Props
+All [windstorm functions](https://axel669.github.io/lib.windstorm/#css-shorthands)
+are supported.
+
+- ### color `string`
+    Sets `$color`
+- ### label `string`
+    The text to display as the label
+- ### options `Array[Object]`
+    An array of options and groups to show in the select. Details below
+- ### outline `bool`
+    Sets `$outline`
+- ### value `any`
+    The value currently selected. Can be bound to react to selections or
+    change the current selection.
+
+## Options
+Each object in the options provided should be in one of 2 forms:
+- `{ label, value }`
+- `{ group }`
+
+Items with a label and value are displayed as <option> tags in the select.
+Items with a group defined are used to denote <optgroup> tags. Each option
+after a `{ group }` item until another group item is seen (or the end of the
+array) is put into the optgroup defined by the group item.
+
+Labels and group names should be strings, but values can be any type.
+
+## Usage
+```js
+// Results in:
+// <option>first</option>
+// <optgroup label="Not Numbers">
+//     <option>second</option>
+//     <option>third</option>
+// </optgroup>
+const options = [
+    { label: "first", value: 1 },
+    { group: "Not numbers" },
+    { label: "second", value: "two" },
+    { label: "third", value: [3] },
+]
+```
+```svelte
+<Select {options} bind:value label="Blep" />
+<Select {options} bind:value color="warning" label="Why" />
+```

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,35 @@
+# Tabs
+
+It's tabs, everyone knows what tabs are at this point.
+
+## Base
+[Windstorm Tabs](https://axel669.github.io/lib.windstorm/#components-tabs)
+
+## Props
+All [windstorm functions](https://axel669.github.io/lib.windstorm/#css-shorthands)
+are supported.
+
+- ### 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.
+
+## Usage
+```js
+const options = [
+    { label: "Left", value: "left" },
+    { label: "Right", value: 2 },
+]
+```
+```svelte
+<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,38 @@
+# Toggle
+
+The Toggle component is used to display checkboxes and switches.
+
+## Base
+[Windstorm Labeled Toggle](https://axel669.github.io/lib.windstorm/#components-labeled-toggle)
+using a checkbox input
+
+## Props
+All [windstorm functions](https://axel669.github.io/lib.windstorm/#css-shorthands)
+are supported.
+
+- ### 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 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
+    Only used in conjunction with bind:group, see Svelte docs
+
+## Usage
+```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,26 @@
+# Avatar
+
+Displays an image or text in a circular container.
+
+## Base
+[Windstorm Avatar](https://axel669.github.io/lib.windstorm/#components-avatar)
+
+## Props
+All [windstorm functions](https://axel669.github.io/lib.windstorm/#css-shorthands)
+are supported.
+
+- ### 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.
+
+## Base
+[Windstorm Badge](https://axel669.github.io/lib.windstorm/#components-badge)
+
+## Props
+All [windstorm functions](https://axel669.github.io/lib.windstorm/#css-shorthands)
+are supported.
+
+- ### 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,28 @@
+# Chip
+Shows a small piece of information that is separate from the surrounding
+info and optionally allows interaction.
+
+## Base
+[Windstorm Chip](https://axel669.github.io/lib.windstorm/#components-chip)
+
+## Props
+All [windstorm functions](https://axel669.github.io/lib.windstorm/#css-shorthands)
+are supported.
+
+- ### 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/{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,32 @@
+# Popover
+
+The Popover component is for displaying content over something without it
+being modal (you can interact with things under it still).
+
+## Base
+[Windstorm Popover](https://axel669.github.io/lib.windstorm/#components-popover)
+
+## Props
+All [windstorm functions](https://axel669.github.io/lib.windstorm/#css-shorthands)
+are supported.
+
+## 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.
+
+## Usage
+```svelte
+<Popover let:show let:hide>
+    <Button on:click={show}>
+        Show
+    </Button>
+    <div ws-x="inset-x[0px] y[0px] h[100px] bg[teal]" slot="content">
+        <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,30 @@
+# Progress
+
+Displays progress bar with an optional label.
+
+## Base
+[Windstorm Progress Bar](https://axel669.github.io/lib.windstorm/#components-progress-bar)
+
+## Props
+All [windstorm functions](https://axel669.github.io/lib.windstorm/#css-shorthands)
+are supported.
+
+- ### 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.
+
+## Usage
+```svelte
+<Progress color="primary" value={0.1} />
+<Progress color="primary" value={5} max={10} />
+```