@axel669/zephyr 0.1.1

package/src/dialog.svelte

@@ -0,0 +1,53 @@
+<script>
+    /*md
+    [@] Components/Containers/Dialog
+
+    # 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
+    See the Paper component props.
+
+    ## Usage
+    `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>
+    ```
+    */
+
+    import { fade } from "svelte/transition"
+
+    import wsx from "./wsx.mjs"
+
+    import Paper from "./paper.svelte"
+</script>
+
+<wind-wrapper transition:fade={{ duration: 200 }} ws-x="@dialog grid">
+    <Paper {...$$props}>
+        <slot name="header" slot="header" />
+        <slot />
+        <slot name="footer" slot="footer" />
+    </Paper>
+</wind-wrapper>

package/src/drawer.svelte

@@ -0,0 +1,121 @@
+<script context="module">
+    const defs = {
+        select: {
+            "@select": true,
+            "w-min": "35vw",
+            grid: true,
+            over: "hidden"
+        },
+        menu: {
+            "@menu": true,
+            w: "15vw",
+        },
+        action: {
+            "@action": true,
+            w: "15vw",
+        }
+    }
+    const css = {
+        select: (t, u) => `
+            transform: translateY(-${u * 100}%);
+            opacity: ${t};
+        `,
+        menu: (t, u) => `
+            transform: translateX(-${u * 100}%);
+            opacity: ${t};
+        `,
+        action: (t, u) => `
+            transform: translateX(${u * 100}%);
+            opacity: ${t};
+        `
+    }
+</script>
+
+<script>
+    /*md
+    [@] Components/Containers/Drawer
+
+    # 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
+
+    ## Usage
+    `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>
+    ```
+    */
+
+    import { fly } from "svelte/transition"
+
+    import wsx from "./wsx.mjs"
+
+    import Paper from "./paper.svelte"
+
+    export let height
+    export let type = "menu"
+
+    const slide = (node, options) => ({
+        delay: 0,
+        duration: 200,
+        css: css[type],
+    })
+
+    const animation = {
+        duration: 200
+    }
+
+    $: container = {
+        ...defs[type],
+        h: (type === "select") ? height : "100%",
+        grid: true,
+    }
+</script>
+<!-- svelte-ignore a11y-click-events-have-key-events -->
+<wind-drawer-container use:wsx={container} on:click|stopPropagation>
+    <wind-transition transition:slide ws-x="grid">
+        <Paper {...$$restProps}>
+            <slot name="header" slot="header" />
+            <slot />
+            <slot name="footer" slot="footer" />
+        </Paper>
+    </wind-transition>
+</wind-drawer-container>

package/src/flex.svelte

@@ -0,0 +1,57 @@
+<script>
+    /*md
+    [@] Components/Containers/Flex
+
+    # Flex
+
+    Container that uses flex layout by default with some nice default values.
+
+    ## Base
+    [Windstorm Flex](https://axel669.github.io/lib.windstorm/#components-flex)
+
+    ## Props
+    All [windstorm functions](https://axel669.github.io/lib.windstorm/#css-shorthands)
+    are supported.
+
+    - ### direction `string`
+        Sets `fl-dir`
+    - ### pad `string`
+        Sets `p`
+    - ### gap `string`
+        Sets `gap`
+    - ### cross `string`
+        Sets `fl-cr-a`
+    - ### main `string`
+        Sets `fl-m-a`
+
+    ## Usage
+    ```svelte
+    <Flex cross="stretch">
+        <Text>Content</Text>
+        <Text>More content</Text>
+        <Text>Event more content</Text>
+    <Flex>
+    ```
+    */
+
+    import wsx from "./wsx.mjs"
+
+    export let direction = false
+    export let pad = false
+    export let gap = false
+    export let cross = "start"
+    export let main = "start"
+
+    $: wind = {
+        "fl-dir": direction,
+        "fl-cr-a": cross,
+        "fl-m-a": main,
+        p: pad,
+        gap: gap,
+        ...$$restProps
+    }
+</script>
+
+<ws-flex use:wsx={wind}>
+    <slot />
+</ws-flex>

package/src/grid.svelte

@@ -0,0 +1,66 @@
+<script>
+    /*md
+    [@] Components/Containers/Grid
+
+    # Grid
+
+    Container that uses grid layout by default with some nice default values.
+
+    ## Base
+    [Windstorm Grid](https://axel669.github.io/lib.windstorm/#components-grid)
+
+    ## Props
+    All [windstorm functions](https://axel669.github.io/lib.windstorm/#css-shorthands)
+    are supported.
+
+    - ### direction `string`
+        Sets `gr-dir`
+    - ### pad `string`
+        Sets `p`
+    - ### gap `string`
+        Sets `gap`
+    - ### cols `string|Array`
+        Sets `gr-col`. Accepts either an array of values that are joined by " "
+        or a regular string value.
+    - ### rows `string|Array`
+        Sets `gr-row`. Accepts either an array of values that are joined by " "
+        or a regular string value.
+    - ### autoCol `string`
+        Sets `gr-acol`
+    - ### autoRow `string`
+        Sets `gr-arow`
+
+    ## Usage
+    ```svelte
+    <Grid cross="stretch">
+        <Text>Content</Text>
+        <Text>More content</Text>
+        <Text>Event more content</Text>
+    <Grid>
+    ```
+    */
+    import wsx from "./wsx.mjs"
+
+    export let direction = false
+    export let pad = false
+    export let gap = false
+    export let cols = null
+    export let rows = null
+    export let autoCol = false
+    export let autoRow = false
+
+    $: wind = {
+        "gr-dir": direction,
+        "gr-col": cols?.join?.(" ") ?? cols ?? false,
+        "gr-row": rows?.join?.(" ") ?? rows ?? false,
+        "gr-acol": autoCol,
+        "gr-arow": autoRow,
+        p: pad,
+        gap: gap,
+        ...$$restProps
+    }
+</script>
+
+<ws-grid use:wsx={wind}>
+    <slot />
+</ws-grid>

package/src/handler$.mjs

@@ -0,0 +1,68 @@
+/*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$ }

package/src/icon.svelte

@@ -0,0 +1,34 @@
+<script>
+    /*md
+    [@] Components/Icon
+
+    # 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>
+    ```
+    */
+
+    import wsx from "./wsx.mjs"
+
+    export let name
+</script>
+
+<ws-icon class="ti-{name}" use:wsx={$$restProps}>
+    <slot />
+</ws-icon>

package/src/index.mjs

@@ -0,0 +1,85 @@
+/*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 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 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"

package/src/inline-dialog.svelte

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

package/src/input/area.svelte

@@ -0,0 +1,97 @@
+<script>
+    /*md
+    [@] Components/Input/Area
+
+    # Input.Area
+
+    A multiline text input component.
+
+    ## Base
+    [Windstorm Labled Control](https://axel669.github.io/lib.windstorm/#components-labeled-control)
+    using a `<textarea>`
+
+    ## Props
+    All [windstorm functions](https://axel669.github.io/lib.windstorm/#css-shorthands)
+    are supported.
+
+    - ### color `string`
+        Sets `$color`
+    - ### error `string`
+        Shows an error message under the input
+    - ### flat `bool`
+        Sets `@flat`
+    - ### hint `string`
+        Shows a hint under the label. If no label is provided, the hint will not
+        be shown either
+    - ### label `string`
+        The label for the input
+    - ### transform `function`
+        If given, it will transform the text value from the input and set the
+        `tvalue` to the result
+    - ### tvalue
+        Value that can be bound to as the output of the transform function.
+        Setting has no effect
+    - ### validate `function`
+        If given, will check the transformed output against a validation
+        criteria and store the result in `valid`
+    - ### valid `bool`
+        Value that can be bound to as the output of the validation function.
+        Setting has no effect
+    - ### value `string`
+        The value of the textarea, can be bound to
+
+    ## Functions
+    - focus()\\
+        Focuses the textarea
+
+    ## Usage
+    ```js
+    import { Input } from "@axel669/svelte-wind"
+    ```
+    ```svelte
+    <Input.Area bind:value />
+    <Input.Area bind:value color="primary" />
+    <Input.Area bind:value label="Wat" hint="Blep"/>
+    <Input.Area bind:value bind:tvalue transform={txt => txt.toLowerCase()} />
+    <Input.Area bind:value bind:valid validate={txt => txt.indexOf("a") > 0} />
+    ```
+    */
+
+    import wsx from "../wsx.mjs"
+
+    export let flat = false
+    export let label
+    export let color = "default"
+    export let error = null
+    export let hint = null
+
+    export let value = ""
+
+    export let transform = i => i
+    export let tvalue
+    export let validate = () => true
+    export let valid
+
+    let area = null
+    export const focus = () => area.focus()
+
+    $: wind = {
+        "@flat": flat,
+        "@control": true,
+        $color: color,
+        ...$$restProps,
+    }
+
+    $: tvalue = transform(value ?? "")
+    $: valid = validate(tvalue)
+</script>
+
+<label use:wsx={wind} ws-error={error}>
+    {#if label}
+        <span ws-x="$text" ws-hint={hint}>{label}</span>
+    {/if}
+    <textarea {...$$restProps} bind:value on:focus on:blur bind:this={area} />
+
+    <slot name="start" />
+    <slot name="end" />
+</label>

package/src/input/elems.mjs

@@ -0,0 +1,7 @@
+export { default as Area } from "./area.svelte"
+export { default as Email } from "./email.svelte"
+export { default as File } from "./file.svelte"
+export { default as Number } from "./number.svelte"
+export { default as Password } from "./password.svelte"
+export { default as Search } from "./search.svelte"
+export { default as Text } from "./text.svelte"