@axel669/zephyr 0.1.16 → 0.2.0-beta.0

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,33 @@
+# 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>
+```

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,47 @@
+# 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>
+```

package/src/layout/drawer.svelte

@@ -0,0 +1,47 @@
+<script context="module">
+    const defs = {
+        select: {
+            "$select": true,
+            "w.min": "35vw",
+            grid: true,
+            over: "hidden"
+        },
+        menu: {
+            "$menu": true,
+        },
+        action: {
+            "$action": true,
+        }
+    }
+</script>
+
+<script>
+    import wsx from "../wsx.mjs"
+
+    import Paper from "./paper.svelte"
+
+    export let height
+    export let type = "menu"
+
+    const trick = (node, options) => ({
+        delay: 0,
+        duration: 250,
+        css: () => "",
+    })
+
+    $: container = {
+        ...defs[type],
+        h: (type === "select") ? height : "100%",
+        grid: true,
+    }
+</script>
+<!-- svelte-ignore a11y-click-events-have-key-events -->
+<!-- svelte-ignore a11y-interactive-supports-focus -->
+<wind-drawer-container use:wsx={container} on:click|stopPropagation
+role="menubar" transition:trick>
+    <Paper {...$$restProps}>
+        <slot name="header" slot="header" />
+        <slot />
+        <slot name="footer" slot="footer" />
+    </Paper>
+</wind-drawer-container>

package/src/layout/flex.md

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

package/src/layout/flex.svelte

@@ -0,0 +1,22 @@
+<script>
+    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.cross": cross,
+        "fl.main": main,
+        p: pad,
+        gap: gap,
+        ...$$restProps
+    }
+</script>
+
+<ws-flex use:wsx={wind}>
+    <slot />
+</ws-flex>

package/src/layout/grid.md

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

package/src/layout/grid.svelte

@@ -0,0 +1,26 @@
+<script>
+    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.flow": direction,
+        "gr.cols": cols?.join?.(" ") ?? cols ?? false,
+        "gr.rows": rows?.join?.(" ") ?? rows ?? false,
+        "gr.cols.a": autoCol,
+        "gr.rows.a": autoRow,
+        p: pad,
+        gap: gap,
+        ...$$restProps
+    }
+</script>
+
+<ws-grid use:wsx={wind}>
+    <slot />
+</ws-grid>

package/src/layout/modal.md

@@ -0,0 +1,35 @@
+# Modal
+
+The Modal component is used to control when content should be shown that
+sits over the current content and prevents interaction with the content it
+covers. It is primarily used to show drawers, dialogs, and sub screens.
+
+The `show` function will display the component specified inside a ws-modal
+element, and can be awaited for an optional return value. The component
+displayed will be passed any props supplied to `show` and a `close` function
+that can be called to hide the component again. `close` can also be given
+an argument that will be used as the promise value from `show`.
+
+If a component that a modal displays exports a `cancel` function, then
+clicking the modal area outside the displayed component will call that
+`cancel` function, allowing any modal component to decide when/if it is
+closes in response to that event.
+
+## Props
+Because the Modal does not render content of its own, it does not support
+any wind functions.
+
+- ### component `Component`
+    The component to display when `show` is called
+
+## Functions
+- ### `show(props?) -> Promise`
+    Shows the given component and passes any props provided.
+
+## Usage
+```svelte
+<Modal component={CoolDialog} bind:this={dialog} />
+<Button on:click={() => dialog.show({ a: 10, b: 12 })}>
+    Open Dialog
+</Button>
+```

package/src/layout/modal.svelte

@@ -0,0 +1,58 @@
+<script context="module">
+    let topClose = null
+</script>
+
+<script>
+    import { tick } from "svelte"
+
+    export let component
+
+    let modalProps = null
+    let resolver = null
+    let displayed = null
+
+    const close = (value) => {
+        resolver(value)
+        resolver = null
+        modalProps = null
+        visible.checked = false
+        if (topClose !== close) {
+            return
+        }
+        topClose = null
+    }
+    const closeToTop = (value) => {
+        topClose(value)
+    }
+    const cancel = () => displayed.cancel?.()
+
+    export const show = (props) => new Promise(
+        async (resolve) => {
+            modalProps = props ?? {}
+            resolver = resolve
+            topClose = topClose ?? close
+            await tick()
+            setTimeout(
+                () => visible.checked = true,
+                0
+            )
+        }
+    )
+
+    let visible = null
+</script>
+
+<input type="checkbox" bind:this={visible} ws-x="disp[none]" />
+{#if resolver !== null}
+    <!-- svelte-ignore a11y-click-events-have-key-events -->
+    <!-- svelte-ignore a11y-no-noninteractive-element-interactions -->
+    <ws-modal on:click={cancel} role="dialog">
+        <svelte:component
+        bind:this={displayed}
+        this={component}
+        {...modalProps}
+        {close}
+        {closeToTop}
+        />
+    </ws-modal>
+{/if}

package/src/layout/paper.md

@@ -0,0 +1,77 @@
+# Paper
+
+The Paper component is a container that has slots for header and footer
+content that is independant from the regular content scrolling. It also uses
+Flex as a default layout for its slotted content, but allows any container
+to be used as a layout without increasing the indentation of all the content
+needlessly.
+
+## Base
+[Windstorm Paper](https://axel669.github.io/lib.windstorm/#components-paper)
+
+## Props
+All [windstorm functions](https://axel669.github.io/lib.windstorm/#css-shorthands)
+are supported.
+
+- ### color `string`
+    Sets `$color`
+- ### card `bool`
+    Sets `$outline`
+- ### square `bool`
+    Sets `r[0px]`
+- ### layout `Component`
+    Sets the layout the card will use to display content. Default is Flex.
+- ### scrollable `bool`
+    Sets `over[auto]` on the layout component
+- ### l-*
+    Any prop that is prefixed with `l-` will be passed to the layout
+    component, with the remaining props acting as the normal wind functions
+    on the paper itself
+
+## Slots
+- ### header
+    The header content for the Paper. Header content does not scroll with
+    the regular content of the component (acts sticky)
+- ### footer
+    The footer content for the Paper. Same scrolling properties as the
+    header slot
+- ### content/default
+    The default slot (unnamed) for Paper will be rendered in the layout
+    component defined in the props. As an alternative, a content slot may
+    be used that will be rendered directly in the content slot of the Paper
+    without the layout component/props being rendered (useful when nesting
+    papers for example)
+
+## Usage
+```svelte
+<Paper>
+    <Titlebar slot="header">
+        <Text slot="title" title>
+            Some Title
+        </Text>
+    </Titlebar>
+
+    <div>Content 1</div>
+    <div>Content 2</div>
+    <div>Content 3</div>
+</Paper>
+<Paper l-pad="0px" m="4px">
+    <Titlebar slot="header">
+        <Text slot="title" title>
+            Some Screen
+        </Text>
+    </Titlebar>
+
+    <Paper slot="content">
+        <Tabs slot="header" {options} bind:value />
+
+        <div>Content 1</div>
+        <div>Content 2</div>
+        <div>Content 3</div>
+    </Paper>
+
+    <div slot="footer">
+        Wat
+    </div>
+</Paper>
+```

package/src/layout/paper.svelte

@@ -0,0 +1,45 @@
+<script>
+    import Flex from "./flex.svelte"
+    import wsx from "../wsx.mjs"
+
+    export let color
+    export let card = false
+    export let square = false
+    export let layout = Flex
+    export let scrollable = true
+
+    $: props = Object.entries($$restProps).reduce(
+        (p, [key, value]) => {
+            const [target, name] =
+                (key.startsWith("l-") === true)
+                ? [ p.layout, key.slice(2) ]
+                : [ p.paper, key ]
+            target[name] = value
+            return p
+        },
+        { layout: {}, paper: {} }
+    )
+
+    $: layoutProps = {
+        over: scrollable ? "auto" : false,
+        ...props.layout,
+    }
+    $: wind = {
+        "$color": color,
+        "$outline": card,
+        r: square && "0px",
+        ...props.paper,
+    }
+</script>
+
+<ws-paper use:wsx={wind}>
+    <slot name="header" />
+    {#if $$slots.content}
+        <slot name="content" slot="content" />
+    {:else}
+        <svelte:component this={layout} {...layoutProps} slot="content">
+            <slot />
+        </svelte:component>
+    {/if}
+    <slot name="footer" />
+</ws-paper>

package/src/layout/screen.md

@@ -0,0 +1,31 @@
+# Screen
+
+The screen is a container component that is used for displaying content
+over its parent and stacks as more screens are displayed. Screens that stack
+on top of a parent screen use the Modal to control when they are shown and
+pass values back from child screens. The stacking effect of the Screen is
+controlled by internally tracked svelte context, so no manual effort is
+required to get stacking screens to have the effect.
+
+## Base
+[Windstorm Screen](https://axel669.github.io/lib.windstorm/#components-screen)
+
+## Props
+All [windstorm functions](https://axel669.github.io/lib.windstorm/#css-shorthands)
+are supported, but they probably won't help much with this component.
+
+- ### width `string`
+    The width of the screen before stack-based padding is applied
+
+## Usage
+`cool-screen.svelte`
+```svelte
+<Screen width="70%">
+    <Paper>
+        This screen is pretty cool I swear
+        <Button on:click={() => close("hi")}>
+            Close
+        </Button>
+    </Paper>
+</Screen>
+```

package/src/layout/screen.svelte

@@ -0,0 +1,32 @@
+<script context="module">
+    const ctxStack = Symbol("stack context")
+    const ctxClose = Symbol("close context")
+</script>
+
+<script>
+    import { getContext, setContext } from "svelte"
+    import { fly } from "svelte/transition"
+
+    import wsx from "../wsx.mjs"
+
+    export let width = false
+
+    const stack = getContext(ctxStack) ?? 0
+    const animation = {
+        y: window.innerHeight,
+        duration: 350
+    }
+
+    setContext(ctxStack, stack + 1)
+
+    $: wind = {
+        "&stack": stack.toString(),
+        "&screen-width": width,
+        "bg.c": "transparent",
+        ...$$restProps
+    }
+</script>
+
+<ws-screen use:wsx={wind} transition:fly={animation}>
+    <slot />
+</ws-screen>

package/src/{circle-spinner.svelte → spinner/circle-spinner.svelte}

@@ -1,12 +1,12 @@
 <script>
-    import wsx from "./wsx.mjs"
+    import wsx from "../wsx.mjs"
 
     export let size = "100px"
     export let color = "primary"
 
     $: wind = {
         "&size": size,
-        $color: color,
+        "$color": color,
     }
 </script>
 

package/src/{hexagon-spinner.svelte → spinner/hexagon-spinner.svelte}

@@ -1,12 +1,12 @@
 <script>
-    import wsx from "./wsx.mjs"
+    import wsx from "../wsx.mjs"
 
     export let size = "100px"
     export let color = "primary"
 
     $: wind = {
         "&size": size,
-        $color: color,
+        "$color": color,
     }
 </script>
 

package/src/text.md

@@ -0,0 +1,22 @@
+# Text
+
+Simple component with some common props for types of text.
+
+## Props
+
+- ### 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>
+```