@axel669/zephyr 0.1.17 → 0.2.0-beta.0

package/src/data-display/table.md

@@ -0,0 +1,29 @@
+# Table
+
+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.
+
+## Base
+[Windstorm Table](https://axel669.github.io/lib.windstorm/#components-table)
+
+## Props
+All [windstorm functions](https://axel669.github.io/lib.windstorm/#css-shorthands)
+are supported.
+
+- ### color `string`
+    Sets `$color`
+- ### cols `Array`
+    The columns that should be displayed. Should be in the format of
+    `{ label, width? }`
+- ### data `Array[Array]`
+    The data to display. The data should be an array where each item is a
+    row, and each item in the row is the value for a column.
+- ### cellWSX `function`
+    If given, this function will be called for each cell, and should return
+    an object that will be passed to the `wsx` action for each <td>
+    generated. The function is passed `(cellValue, rowNum, colNum)`.
+- ### rowWSX `function`
+    If given, this function will be called for each row, and should return
+    an object that will be passed to the `wsx` action for each <tr>
+    generated. The function is passed `(rowValue, rowNum)`.

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.
+
+## 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>
+```

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.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.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"
 

package/src/functions.md

@@ -0,0 +1,77 @@
+# Library Functions/Actions
+
+Zephyr has a few functions to make some tasks easier for working with the
+library.
+
+## handler$
+
+Wraps a function for currying as an event handler. The curried function does
+not pass the event into final function call.
+
+### Usage
+```svelte
+<script>
+    const clicked = handler$(
+        (buttonName) => console.log(buttonName)
+    )
+</script>
+
+<!-- logs "first" when clicked -->
+<Button on:click={clicked("first")}>
+    First
+</Button>
+<!-- logs "second" when clicked -->
+<Button on:click={clicked("second")}>
+    Second
+</Button>
+```
+
+## eventHandler$
+
+Wraps a function for currying as an event handler. Unlike the `handler$`
+function, the event is passed to the curried function.
+
+### Usage
+
+```svelte
+<script>
+    const clicked = eventHandler$(
+        (event, buttonName) => console.log(event, buttonName)
+    )
+</script>
+
+<!-- logs the event and "first" when clicked -->
+<Button on:click={clicked("first")}>
+    First
+</Button>
+<!-- logs the event and "second" when clicked -->
+<Button on:click={clicked("second")}>
+    Second
+</Button>
+```
+
+## 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
+```svelte
+<script>
+    // will generate ws-x="grid gr-col[1fr 1fr]"
+    const wsxProps = {
+        grid: true,
+        "gr.cols": "1fr 1fr",
+        bg: null
+    }
+</script>
+
+<div use:wsx={wsxProps}>
+    <span>Content</span>
+</div>
+```

package/src/handler$.mjs

@@ -1,68 +1,20 @@
-/*md
-[@] Event Handlers
-
-# Event Handlers
-
-Zephyr provides a couple of functions to help make event handlers look
-nicer and bind arguments easier.
-*/
-
-
-/*md
-## handler$
-
-Wraps a function for currying as an event handler. The curried function does
-not pass the event into final function call.
-
-### Usage
-```js
-const clicked = handler$(
-    (buttonName) => console.log(buttonName)
-)
-```
-```svelte
-<!-- logs "first" when clicked -->
-<Button on:click={clicked("first")}>
-    First
-</Button>
-<!-- logs "second" when clicked -->
-<Button on:click={clicked("second")}>
-    Second
-</Button>
-```
-*/
-const handler$ = (func) =>
-    (...args) =>
-        (_, ...extra) => func(...args, ...extra)
-
-/*md
-## eventHandler$
-
-Wraps a function for currying as an event handler. Unlike the `handler$`
-function, the event is passed to the curried function.
-
-### Usage
-In the following example, "first" is logged each time the first button is
-clicked, and "second" is logged when the second button is clicked. In both
-cases the click event is also logged.
-```js
-const clicked = eventHandler$(
-    (event, buttonName) => console.log(event, buttonName)
-)
-```
-```svelte
-<!-- logs the event and "first" when clicked -->
-<Button on:click={clicked("first")}>
-    First
-</Button>
-<!-- logs the event and "second" when clicked -->
-<Button on:click={clicked("second")}>
-    Second
-</Button>
-```
-*/
-const eventHandler$ = (func) =>
-    (...args) =>
-        (...extra) => func(...extra, ...args)
-
-export { handler$, eventHandler$ }
+/**
+Wraps a handler function for easy reuse.
+
+@param {Function} func The handler function to wrap
+*/
+const handler$ = (func) =>
+    (...args) =>
+        (_, ...extra) => func(...args, ...extra)
+
+/**
+Wraps a handler function for easy reuse, and doesn't throw away the event arg
+passed by events firing.
+
+@param {Function} func The handler function to wrap
+*/
+const eventHandler$ = (func) =>
+    (...args) =>
+        (...extra) => func(...extra, ...args)
+
+export { handler$, eventHandler$ }

package/src/index.mjs

@@ -1,92 +1,55 @@
-/*md
-[@] Home
-
-# Zephyr
-Zephyr is a svelte binding for the
-[Windstorm](https://www.npmjs.com/package/@axel669/windstorm)
-library.
-
-[Docs Here](https://svelte-wind.axel669.net)
-
-## Installation
-Zephyr can be installed through npm (or the variants like yarn, pnpm, etc).
-
-```bash
-npm install @axel669/svelte-wind
-```
-
-## Usage
-Components can be imported individually from the library for tree-shaking, or
-the entire lib can imported at once, but I dunno how big that bundle will be.
-
-```svelte
-<script>
-    //  individual import for tree shaking
-    import { Button } from "@axel69/svelte-wind"
-
-    //  bring the whole thing to keep it simple
-    import * as Wind from "@axel69/svelte-wind"
-</script>
-
-<!-- the wsx action can be used to setup the ws-x needed for the body -->
-<svelte:body use:wsx={{theme, "@app": true}} />
-
-<Button on:click={stuff}>
-    I'm a button!
-</Button>
-
-<Wind.Button on:click={stuff}>
-    I'm also button!
-</Wind.Button>
-```
-
-### Svelte Config
-No special configuration of svelte is required, nor is there a separate plugin
-that needs to be added. Just have svelte and you're good to go.
-*/
-
-export { default as Avatar } from "./avatar.svelte"
-export { default as Badge } from "./badge.svelte"
-export { default as Button } from "./button.svelte"
-export { default as Chip } from "./chip.svelte"
-export { default as Details } from "./details.svelte"
-export { default as Dialog } from "./dialog.svelte"
-export { default as Drawer } from "./drawer.svelte"
-export { default as Flex } from "./flex.svelte"
-export { default as Grid } from "./grid.svelte"
-export { default as Icon } from "./icon.svelte"
-export { default as InlineDialog } from "./inline-dialog.svelte"
-export { default as Link } from "./link.svelte"
-export { default as Modal } from "./modal.svelte"
-export { default as Notification } from "./notification.svelte"
-export { default as Paper } from "./paper.svelte"
-export { default as Popover } from "./popover.svelte"
-export { default as Progress } from "./progress.svelte"
-export { default as Radio } from "./radio.svelte"
-export { default as Screen } from "./screen.svelte"
-export { default as Select } from "./select.svelte"
-export { default as Table } from "./table.svelte"
-export { default as Tabs } from "./tabs.svelte"
-export { default as Text } from "./text.svelte"
-export { default as Titlebar } from "./titlebar.svelte"
-export { default as Toaster } from "./toaster.svelte"
-export { default as Toggle } from "./toggle.svelte"
-export { default as Tooltip } from "./tooltip.svelte"
-
-export { default as CircleSpinner } from "./circle-spinner.svelte"
-export { default as HexagonSpinner } from "./hexagon-spinner.svelte"
-
-export { default as Alert } from "./dialogs/alert.svelte"
-export { default as Confirm } from "./dialogs/confirm.svelte"
-
-export { default as DataTable } from "./composed/data-table.svelte"
-export { default as EntryButton } from "./composed/entry-button.svelte"
-export { default as Toast } from "./composed/toast.svelte"
-
-export { default as wsx } from "./wsx.mjs"
-
-export * as Input from "./input/elems.mjs"
-
-export * from "./handler$.mjs"
-
-export { default as TheLastAirbender } from "./avatar.svelte"
+export { default as Button } from "./control/button.svelte"
+export { default as Input } from "./control/input.svelte"
+export { default as Link } from "./control/link.svelte"
+export { default as Radio } from "./control/radio.svelte"
+export { default as Select } from "./control/select.svelte"
+export { default as Tabs } from "./control/tabs.svelte"
+export { default as Toggle } from "./control/toggle.svelte"
+
+export { default as Avatar } from "./data-display/avatar.svelte"
+export { default as TheLastAirbender } from "./data-display/avatar.svelte"
+export { default as Badge } from "./data-display/badge.svelte"
+export { default as Chip } from "./data-display/chip.svelte"
+export { default as Details } from "./data-display/details.svelte"
+export { default as Popover } from "./data-display/popover.svelte"
+export { default as Progress } from "./data-display/progress.svelte"
+export { default as Table } from "./data-display/table.svelte"
+export { default as Tooltip } from "./data-display/tooltip.svelte"
+
+export { default as Icon } from "./info/icon.svelte"
+export { default as Notification } from "./info/notification.svelte"
+export { default as Titlebar } from "./info/titlebar.svelte"
+export { default as Toaster } from "./info/toaster.svelte"
+
+export { default as Dialog } from "./layout/dialog.svelte"
+export { default as Drawer } from "./layout/drawer.svelte"
+export { default as Flex } from "./layout/flex.svelte"
+export { default as Grid } from "./layout/grid.svelte"
+export { default as Modal } from "./layout/modal.svelte"
+export { default as Paper } from "./layout/paper.svelte"
+export { default as Screen } from "./layout/screen.svelte"
+
+// export { default as InlineDialog } from "./inline-dialog.svelte"
+export { default as Text } from "./text.svelte"
+
+export { default as CircleSpinner } from "./spinner/circle-spinner.svelte"
+export { default as HexagonSpinner } from "./spinner/hexagon-spinner.svelte"
+
+export { default as Alert } from "./dialogs/alert.svelte"
+export { default as Confirm } from "./dialogs/confirm.svelte"
+
+export { default as EntryButton } from "./composed/entry-button.svelte"
+export { default as Toast } from "./composed/toast.svelte"
+
+import DataTable from "./composed/data-table.svelte"
+import th from "./composed/data-table/th.svelte"
+DataTable.th = th
+
+export { DataTable, th }
+// export { default as DataTable } from "./composed/data-table.svelte"
+
+export { default as wsx } from "./wsx.mjs"
+
+
+export * from "./handler$.mjs"
+export * from "./composed/table-functions.js"

package/src/info/icon.md

@@ -0,0 +1,20 @@
+# Icon
+
+Displays a [Tabler Icon](https://tabler-icons.io/) and some optional text.
+The icon will appear at the beginning of the text.
+
+## Base
+[Windstorm Icon](https://axel669.github.io/lib.windstorm/#components-icon)
+
+## Props
+All [windstorm functions](https://axel669.github.io/lib.windstorm/#css-shorthands)
+are supported.
+
+- ### name `string`
+    The name of the icon. Use the tabler icon class name without the "ti-".
+
+## Usage
+```svelte
+<Icon name="hexagon" />
+<Icon name="hexagons">Are the bestagons</Icon>
+```

package/src/info/icon.svelte

@@ -0,0 +1,9 @@
+<script>
+    import wsx from "../wsx.mjs"
+
+    export let name
+</script>
+
+<ws-icon class="ti-{name}" use:wsx={$$restProps}>
+    <slot />
+</ws-icon>

package/src/info/notification.md

@@ -0,0 +1,37 @@
+# Notification
+
+Displays a piece of content that stands out from the surrounding content and
+can also be used for toast messages. Optionally has some interactable
+elements embedded.
+
+Expects 1-2 child nodes and will display them on the sides of the
+notification with space between them. This means that reversing the order
+of the child nodes will flip which sides they appear on.
+
+## Base
+[Windstorm Notification](https://axel669.github.io/lib.windstorm/#components-notification)
+
+## Props
+All [windstorm functions](https://axel669.github.io/lib.windstorm/#css-shorthands)
+are supported.
+
+- ### color
+    Sets `$color` and uses the fill style for coloration.
+
+## Usage
+```svelte
+<Notification>
+    <Icon name="info-hexagon">
+        Some kind of information
+    </Icon>
+</Notification>
+<Notification color="danger">
+    <Icon name="alert-hexagon">
+        Something broke
+    </Icon>
+
+    <Button>
+        Cancel
+    </Button>
+</Notification>
+```

package/src/info/notification.svelte

@@ -0,0 +1,16 @@
+<script>
+    import wsx from "../wsx.mjs"
+
+    export let color = false
+
+    $: wind = {
+        "$color": color,
+        ...$$restProps,
+    }
+</script>
+
+<!-- svelte-ignore a11y-click-events-have-key-events -->
+<!-- svelte-ignore a11y-interactive-supports-focus -->
+<ws-notification use:wsx={wind} on:click role="button">
+    <slot />
+</ws-notification>

package/src/info/titlebar.md

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

package/src/info/titlebar.svelte

@@ -0,0 +1,18 @@
+<script>
+    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/info/toaster.md

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

package/src/info/toaster.svelte

@@ -0,0 +1,14 @@
+<script>
+    import wsx from "../wsx.mjs"
+
+    export let position = "tc"
+
+    $: wind = {
+        [`$${position}`]: true,
+        ...$$restProps,
+    }
+</script>
+
+<ws-toaster use:wsx={wind}>
+    <slot />
+</ws-toaster>