@axel669/zephyr 0.1.17 → 0.2.0-beta.1

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.
+
+### Example
+```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.
+
+### Example
+
+```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).
+
+### Example
+```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,58 @@
-/*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"
+
+export { default as AsyncButton } from "./async/button.svelte"
+export { default as LoadZone } from "./async/load-zone.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,17 @@
+# Icon
+
+Displays a [Tabler Icon](https://tabler-icons.io/) and some optional text.
+The icon will appear at the beginning of the text.
+
+## Props
+
+### name
+`string`
+
+The name of the icon. Use the tabler icon class name without the "ti-".
+
+## Example
+```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,32 @@
+# 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.
+
+## Props
+
+### color
+Sets `$color` and uses the fill style for coloration.
+
+## Example
+```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,49 @@
+# 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.
+
+## Props
+
+### 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
+
+## Example
+```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,22 @@
+# Toaster
+
+The Toaster component is used for building popup notifications along the
+edges of the window.
+
+## Props
+
+### position
+Sets position of the toaster. See the
+[windstorm base](https://windstorm.axel669.net/lib/css/component/toaster)
+for values.
+
+## Example
+```svelte
+<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>

package/src/inline-dialog.svelte

@@ -1,23 +1,23 @@
-<script>
-    import wsx from "./wsx.mjs"
-
-    import Paper from "./paper.svelte"
-
-    const id = Math.random().toString(16)
-
-    $: paper = {
-        "@dialog": true,
-        "@outline": true,
-        ...$$restProps
-    }
-</script>
-
-<slot name="toggle" {id} />
-<input type="checkbox" ws-x="hide" {id} />
-<ws-modal>
-    <ws-paper use:wsx={paper}>
-        <slot name="header" {id} />
-        <slot name="content" {id} />
-        <slot name="footer" {id} />
-    </ws-paper>
-</ws-modal>
+<script>
+    import wsx from "../wsx.mjs"
+
+    import Paper from "./paper.svelte"
+
+    const id = Math.random().toString(16)
+
+    $: paper = {
+        "@dialog": true,
+        "$outline": true,
+        ...$$restProps
+    }
+</script>
+
+<slot name="toggle" {id} />
+<input type="checkbox" ws-x="hide" {id} />
+<ws-modal>
+    <ws-paper use:wsx={paper}>
+        <slot name="header" {id} />
+        <slot name="content" {id} />
+        <slot name="footer" {id} />
+    </ws-paper>
+</ws-modal>

package/src/layout/dialog.md

@@ -0,0 +1,34 @@
+# Dialog
+
+A modal container for creating dialogs. The Dialog component is a modal
+element that uses a Paper element for the layout of content. All props and
+slots for the Dialog are passed to the underlying Paper component.
+
+The Dialog component is used as a wrapper for content and is used in
+conjunction with the Modal component to be controlled on screen.
+
+## Props
+This component just wraps a [Paper](./paper.md) component with some extra parts,
+and passes the props to a `Paper`.
+
+## Example
+`cool-dialog.svelte`
+```svelte
+<Dialog>
+    <Titlebar slot="header">
+        <Text slot="title" title>
+            Some Title
+        </Text>
+    </Titlebar>
+
+    <span>Content</span>
+</Dialog>
+```
+
+`app.svelte`
+```svelte
+<Modal component={CoolDialog} />
+<EntryButton this={Modal} component={CoolDialog}>
+    Open Cool Dialog
+</EntryButton>
+```

package/src/layout/dialog.svelte

@@ -0,0 +1,24 @@
+<script>
+    import { fade } from "svelte/transition"
+
+    import wsx from "../wsx.mjs"
+
+    import Paper from "./paper.svelte"
+
+    const trick = (node, options) => ({
+        delay: 0,
+        duration: 250,
+        css: () => "",
+    })
+</script>
+
+<!-- svelte-ignore a11y-click-events-have-key-events -->
+<!-- svelte-ignore a11y-no-noninteractive-element-interactions -->
+<wind-wrapper transition:trick ws-x="$dialog grid" on:click|stopPropagation
+role="dialog">
+    <Paper {...$$props}>
+        <slot name="header" slot="header" />
+        <slot />
+        <slot name="footer" slot="footer" />
+    </Paper>
+</wind-wrapper>

package/src/layout/drawer.md

@@ -0,0 +1,61 @@
+# Drawer
+
+A modal container for creating dialogs. The Dialog component is a modal
+element that uses a Paper element for the layout of content. All extra props
+and slots for the Drawer are passed to the underlying Paper component.
+
+The Drawer component is used as a wrapper for content and is used in
+conjunction with the Modal component to be controlled on screen.
+
+## Props
+
+### close
+`function`
+
+If passed, this function will be called when the user clicks in the
+empty area outside of the drawer contents.
+
+### height
+`string`
+
+Sets the height of the select drawer, no effect for menu and action
+drawers which default to full height of the window.
+
+### type
+`string`
+
+The type of drawer. Default is "menu"
+#### "menu"
+
+Makes a drawer that slides in on the left side of the screen
+
+#### "action"
+
+Makes a drawer that slides in on the right side of the screen
+
+#### "select"
+
+Makes a drawer that is centered horizontally and slides in from
+the top of the screen
+
+## Example
+`cool-drawer.svelte`
+```svelte
+<Drawer>
+    <Titlebar slot="header">
+        <Text slot="title" title>
+            Some Title
+        </Text>
+    </Titlebar>
+
+    <span>Content</span>
+</Drawer>
+```
+
+`app.svelte`
+```svelte
+<Modal component={CoolDrawer} />
+<EntryButton this={Modal} component={CoolDrawer}>
+    Open Cool Dialog
+</EntryButton>
+```