@axel669/zephyr 0.1.1

package/src/tabs.svelte

@@ -0,0 +1,77 @@
+<script>
+    /*md
+    [@] Components/Tabs
+
+    # 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 />
+    ```
+    */
+
+    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}>
+    {#each options as tab, i}
+        <ws-tab tab-selected={index === i || null} on:click={set(tab.value)}>
+            {tab.label}
+        </ws-tab>
+    {/each}
+</ws-tabs>

package/src/text.svelte

@@ -0,0 +1,49 @@
+<script>
+    /*md
+    [@] Components/Text
+
+    # Text
+
+    Simple component with some common props for types of text.
+
+    ## Props
+    All [windstorm functions](https://axel669.github.io/lib.windstorm/#css-shorthands)
+    are supported.
+
+    - ### adorn `bool`
+        Sets `$adorn`
+    - ### block `bool`
+        Sets `block`
+    - ### subtitle `bool`
+        Sets `$subtitle`
+    - ### title `bool`
+        Sets `$title`
+
+    ## Usage
+    ```svelte
+    <Text>Some text</Text>
+    <Text title>Bigger text</Text>
+    <Text subtitle>Smaller text</Text>
+    <Text block>Text on its own line</Text>
+    ```
+    */
+
+    import wsx from "./wsx.mjs"
+
+    export let title = false
+    export let subtitle = false
+    export let block = false
+    export let adorn = false
+
+    $: wind = {
+        "$title": title,
+        "$subtitle": subtitle,
+        "$adorn": adorn,
+        block,
+        ...$$restProps
+    }
+</script>
+
+<span use:wsx={wind}>
+    <slot />
+</span>

package/src/titlebar.svelte

@@ -0,0 +1,69 @@
+<script>
+    /*md
+    [@] Components/Titlebar
+
+    # Titlebar
+
+    The titlebar is used to set section titles with some style, and provides
+    slots for buttons on either side of the title text. Works well as a header
+    for Paper components.
+
+    ## Base
+    [Windstorm Titlebar](https://axel669.github.io/lib.windstorm/#components-titlebar)
+
+    ## Props
+    All [windstorm functions](https://axel669.github.io/lib.windstorm/#css-shorthands)
+    are supported.
+
+    - ### color `string`
+        Sets `$color`
+    - ### fill `bool`
+        Sets `@fill`
+
+    ## Slots
+    - title\\
+        The center of the titlebar, where the text usually goes
+    - menu\\
+        The area on the left of the titlebar (where drawer menus tend to open)
+    - action\\
+        The area on the right of the titlebar
+
+    ## Usage
+    ```svelte
+    <Titlebar color="primary" fill>
+        <Text title slot="title">
+            Some Title
+        </Text>
+
+        <Button slot="menu" color={false}>
+            <Icon name="menu" />
+        </Button>
+    </Titlebar>
+
+    <Paper>
+        <Titlebar color="secondary" slot="header">
+            <Text title slot="title">
+                Paper Title
+            </Text>
+        </Titlebar>
+    </Paper>
+    ```
+    */
+
+    import wsx from "./wsx.mjs"
+
+    export let color
+    export let fill = false
+
+    $: wind = {
+        $color: color,
+        "@fill": fill,
+        ...$$restProps
+    }
+</script>
+
+<ws-titlebar use:wsx={wind}>
+    <slot name="menu" />
+    <slot name="title" />
+    <slot name="action" />
+</ws-titlebar>

package/src/toaster.svelte

@@ -0,0 +1,42 @@
+<script>
+    /*md
+    [@] Components/Containers/Toaster
+
+    # Toaster
+
+    The Toaster component is used for building popup notifications along the
+    edges of the window.
+
+    ## Base
+    [Windstorm Toaster](https://axel669.github.io/lib.windstorm/#components-toaster)
+
+    ## Props
+    All [windstorm functions](https://axel669.github.io/lib.windstorm/#css-shorthands)
+    are supported, but probably not very meaningful for this container.
+
+    - ### position
+        Sets position of the toaster. See the windstorm base for values.
+
+    ## Usage
+    <Toaster position="$tc">
+        <Notification>
+            <Icon name="info">
+                Some kind of notification of things
+            </Icon>
+        </Notification>
+    </Toaster>
+    */
+
+    import wsx from "./wsx.mjs"
+
+    export let position = "tc"
+
+    $: wind = {
+        [`$${position}`]: true,
+        ...$$restProps,
+    }
+</script>
+
+<ws-toaster use:wsx={wind}>
+    <slot />
+</ws-toaster>

package/src/toggle.svelte

@@ -0,0 +1,90 @@
+<script>
+    /*md
+    [@] Components/Input/Toggle
+
+    # 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
+    - ### outline `bool`
+        Sets `$outline`
+    - ### 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 outline color="danger" bind:checked />
+    ```
+    */
+
+    import wsx from "./wsx.mjs"
+
+    export let label = ""
+    export let color = "default"
+    export let checked = false
+    export let outline = false
+    export let value
+    export let group = []
+    export let checkbox = false
+    export let reverse = false
+
+    $: container = {
+        "@toggle": true,
+        "@outline": outline,
+        $color: color,
+        ...$$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}>
+    {#if reverse !== true}
+        <span>{label}</span>
+    {/if}
+    <input type="checkbox" bind:checked use:wsx={input} />
+    {#if reverse === true}
+        <span>{label}</span>
+    {/if}
+</label>

package/src/tooltip.svelte

@@ -0,0 +1,45 @@
+<script>
+    /*md
+    [@] Components/Data Display/Tooltip
+
+    # Tooltip
+
+    Displays a tooltip above (or below) some content when it's hovered.
+
+    ## Base
+    [Windstorm Tooltip](https://axel669.github.io/lib.windstorm/#components-tooltip)
+
+    ## Props
+    All [windstorm functions](https://axel669.github.io/lib.windstorm/#css-shorthands)
+    are supported.
+
+    - ### text `string`
+        The text to display in the tooltip.
+    - ### bottom `bool`
+        If true, the tooltip will be shown under the content instead of over.
+
+    ## Usage
+    ```svelte
+    <Tooltip text="This is a button">
+        <Button>Do Thing</Button>
+    </Tooltip>
+    <Tooltip text="This shows under" bottom>
+        Just some text content
+    </Tooltip>
+    ```
+    */
+
+    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/vars.mjs

@@ -0,0 +1,61 @@
+/*md
+[@] Actions/vars
+
+# vars Action
+
+The vars action is used to set css variables on dom elements using a simple
+object to maintain the values instead of needing to do string interpolation and
+falsey checks manually.
+
+## Usage
+```js
+//  Sets --screen-widt to 100% and unsets --other-thing
+$: settings = {
+    "screen-width": "100%",
+    "other-thing": null,
+}
+```
+```svelte
+<ws-screen use:vars={settings}>
+</ws-screen>
+```
+*/
+
+const calcValue = value => {
+    if (Array.isArray(value) === false) {
+        return value
+    }
+    if (value[0] === null || value[0] === undefined) {
+        return null
+    }
+    return value.join("")
+}
+const udpateVars = (node, current, next) => {
+    const keys = new Set([
+        ...Object.keys(current),
+        ...Object.keys(next),
+    ])
+    for (const key of keys) {
+        const varName = `--${key}`
+        const currentValue = calcValue(current[key])
+        const nextValue = calcValue(next[key])
+        if (nextValue === undefined || nextValue === null) {
+            node.style.removeProperty(varName)
+        }
+        if (currentValue !== nextValue) {
+            node.style.setProperty(varName, nextValue)
+        }
+    }
+}
+const vars = (node, vars) => {
+    let currentVars = vars
+    udpateVars(node, {}, currentVars)
+    return {
+        update(newVars) {
+            udpateVars(node, currentVars, newVars)
+            currentVars = newVars
+        }
+    }
+}
+
+export default vars

package/src/wsx.mjs

@@ -0,0 +1,45 @@
+import wind from "@axel669/windstorm"
+const { wsx } = wind
+
+/*md
+[@] Actions/wsx
+
+# wsx Action
+
+The wsx action can be used to set the `ws-x` attribute on a DOM element by using
+an object as the source rather than trying to do the string manipulation
+directly.
+- `null`, `undefined`, and `false` will not insert the wind function
+- `true` will insert the wind function with no args
+- any string value will insert the wind function with the arguments formatted
+    for the parser (replace spaces and underscores as needed).
+
+## Usage
+```js
+// will generate ws-x="grid gr-col[1fr_1fr]"
+$: windStff = {
+    grid: true,
+    gr-col: "1fr 1fr",
+    p: false
+}
+```
+```svelte
+<div use:wsx={windStuff}>
+</div>
+```
+*/
+
+export default (node, props) => {
+    const update = (props) => {
+        if (props === null || props === undefined) {
+            node.setAttribute("ws-x", null)
+            return
+        }
+        node.setAttribute(
+            "ws-x",
+            wsx(props)
+        )
+    }
+    update(props)
+    return { update }
+}