@axel669/zephyr 0.1.17 → 0.2.0-beta.1

package/src/wsx.mjs

@@ -1,45 +1,24 @@
-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 }
-}
+import ws from "@axel669/windstorm"
+
+ws.custom("outline", (o) => ws.prop("outline", o))
+
+export default (node, props) => {
+    const update = (props) => {
+        const { slot = null, ...goodProps } = props ?? {}
+        if (goodProps === null || goodProps === undefined) {
+            node.setAttribute("ws-x", null)
+            return
+        }
+        node.setAttribute(
+            "ws-x",
+            ws.x(goodProps)
+        )
+        if (slot === null) {
+            node.removeAttribute("slot")
+            return
+        }
+        node.setAttribute("slot", slot)
+    }
+    update(props)
+    return { update }
+}

package/src/avatar.svelte

@@ -1,54 +0,0 @@
-<script>
-    /*md
-    [@] Components/Data Display/Avatar
-
-    # 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" />
-    ```
-    */
-
-    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/badge.svelte

@@ -1,40 +0,0 @@
-<script>
-    /*md
-    [@] Components/Data Display/Badge
-
-    # 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>
-    ```
-    */
-    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/button.svelte

@@ -1,86 +0,0 @@
-<script>
-    /*md
-    [@] Components/Button
-
-    # Button
-
-    Basic clickable component for handling user interaction.
-
-    ## Base
-    [Windstorm Button](https://axel669.github.io/lib.windstorm/#components-button)
-
-    ## Props
-    All [windstorm functions](https://axel669.github.io/lib.windstorm/#css-shorthands)
-    are supported.
-
-    - ### color `string`
-        Sets `$color`
-    - ### compact `bool`
-        Sets `$compact`
-    - ### for `string`
-        The ID of a dom element that the button is tied to. Only works with
-        label buttons.
-    - ### label `string`
-        If true, the button will be displayed in the DOM using a `<label>`
-        element instead of a `<button>`.
-    - ### fill / outline `bool`
-        Sets the button type to @fill if fill is true, @outline if outline
-        is true, or @flat if neither is true.
-
-    ## Events
-    - click
-
-    ## Example
-    ```svelte
-    <Button on:click={action}>
-        Flat Button
-    </Button>
-    <Button on:click={action} outline>
-        Outlined Button
-    </Button>
-    <Button on:click={action} fill color="danger">
-        Filled Button
-    </Button>
-
-    <Button label for="thing">
-        Toggle
-    </Button>
-    <input type="checkbox" id="toggle" />
-    ```
-    */
-
-    import wsx from "./wsx.mjs"
-    import variant from "./variant.mjs"
-
-    export let color = false
-    export let compact = false
-    export let disabled
-
-    export let fill = false
-    export let outline = false
-
-    let _for = ""
-    export { _for as for }
-    export let label = false
-
-    $: type = variant({ fill, outline })
-
-    $: wind = {
-        [type]: true,
-        $color: color,
-        $compact: compact,
-        "@button": label,
-        ...$$restProps
-    }
-</script>
-
-{#if label === true}
-    <!-- svelte-ignore a11y-click-events-have-key-events -->
-    <label use:wsx={wind} {disabled} for={_for} on:click|stopPropagation>
-        <slot />
-    </label>
-{:else}
-    <button use:wsx={wind} {disabled} on:click|stopPropagation>
-        <slot />
-    </button>
-{/if}

package/src/chip.svelte

@@ -1,56 +0,0 @@
-<script>
-    /*md
-    [@] Components/Data Display/Chip
-
-    # 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>
-    ```
-    */
-
-    import wsx from "./wsx.mjs"
-    import variant from "./variant.mjs"
-
-    export let color = "default"
-    export let clickable = false
-
-    export let fill = false
-
-    $: type = variant({ fill }, "@outline")
-
-    $: wind = {
-        [type]: true,
-        $color: color,
-        $click: clickable,
-        ...$$restProps
-    }
-</script>
-
-<!-- svelte-ignore a11y-click-events-have-key-events -->
-<ws-chip use:wsx={wind} on:click>
-    <slot />
-</ws-chip>

package/src/dialog.svelte

@@ -1,54 +0,0 @@
-<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>
-
-<!-- svelte-ignore a11y-click-events-have-key-events -->
-<wind-wrapper transition:fade={{ duration: 200 }} ws-x="@dialog grid" on:click|stopPropagation>
-    <Paper {...$$props}>
-        <slot name="header" slot="header" />
-        <slot />
-        <slot name="footer" slot="footer" />
-    </Paper>
-</wind-wrapper>

package/src/drawer.svelte

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

@@ -1,57 +0,0 @@
-<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`, default is `"stretch"`
-    - ### main `string`
-        Sets `fl-m-a`, default is `"start"`
-
-    ## 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 = "stretch"
-    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

@@ -1,66 +0,0 @@
-<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/icon.svelte

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