@axel669/zephyr 0.1.17 → 0.2.0-beta.1

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,39 @@
+# Flex
+
+Container that uses flex layout by default with some nice default values.
+
+## Props
+
+### direction
+`string`
+
+Sets `fl.dir`
+
+### pad
+`string`
+
+Sets `p`
+
+### gap
+`string`
+
+Sets `gap`
+
+### cross
+`string`
+
+Sets `fl.cross`, default is `"stretch"`
+
+### main
+`string`
+
+Sets `fl.main`, default is `"start"`
+
+## Example
+```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,57 @@
+# 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.flow`
+
+### pad
+`string`
+
+Sets `p`
+
+### gap
+`string`
+
+Sets `gap`
+
+### cols
+`string|Array`
+
+Sets `gr.cols`. Accepts either an array of values that are joined by " "
+or a regular string value.
+
+### rows
+`string|Array`
+
+Sets `gr.rows`. Accepts either an array of values that are joined by " "
+or a regular string value.
+
+### autoCol
+`string`
+
+Sets `gr.cols.a`
+
+### autoRow
+`string`
+
+Sets `gr.rows.a`
+
+## Example
+```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,47 @@
+# 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.
+
+## Example
+```svelte
+<script>
+    let dialog = null
+    const dialogThing = async () => {
+        const value = await dialog.show({ a: 10, b: 12 })
+        console.log(value)
+    }
+</script>
+
+<Modal component={CoolDialog} bind:this={dialog} />
+<Button on:click={dialogThing}>
+    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,90 @@
+# 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.
+
+## Props
+
+### 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)
+
+## Example
+```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,28 @@
+# 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.
+
+## Props
+
+### width
+`string`
+
+The width of the screen before stack-based padding is applied
+
+## Example
+`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/spinner/spinners.md

@@ -0,0 +1,3 @@
+# Spinners
+
+Under construction.

package/src/text.md

@@ -0,0 +1,34 @@
+# 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`
+
+## Example
+```svelte
+<Text>Some text</Text>
+<Text title>Bigger text</Text>
+<Text subtitle>Smaller text</Text>
+<Text block>Text on its own line</Text>
+```

package/src/text.svelte

@@ -1,49 +1,20 @@
-<script>
-    /*md
-    [@] Components/Text
-
-    # Text
-
-    Simple component with some common props for types of text.
-
-    ## Props
-    All [windstorm functions](https://axel669.github.io/lib.windstorm/#css-shorthands)
-    are supported.
-
-    - ### 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>
-    ```
-    */
-
-    import wsx from "./wsx.mjs"
-
-    export let title = false
-    export let subtitle = false
-    export let block = false
-    export let adorn = false
-
-    $: wind = {
-        "$title": title,
-        "$subtitle": subtitle,
-        "$adorn": adorn,
-        block,
-        ...$$restProps
-    }
-</script>
-
-<span use:wsx={wind}>
-    <slot />
-</span>
+<script>
+    import wsx from "./wsx.mjs"
+
+    export let title = false
+    export let subtitle = false
+    export let block = false
+    export let adorn = false
+
+    $: wind = {
+        "$title": title,
+        "$subtitle": subtitle,
+        "$adorn": adorn,
+        block,
+        ...$$restProps
+    }
+</script>
+
+<span use:wsx={wind}>
+    <slot />
+</span>

package/src/variant.mjs

@@ -1,12 +1,12 @@
-export default ({ flat, fill, outline }, def = "@flat") => {
-    if (outline === true) {
-        return "@outline"
-    }
-    if (fill === true) {
-        return "@fill"
-    }
-    if (flat === true) {
-        return "@flat"
-    }
-    return def
-}
+export default ({ flat, fill, outline }, def = "$flat") => {
+    if (outline === true) {
+        return "$outline"
+    }
+    if (fill === true) {
+        return "$fill"
+    }
+    if (flat === true) {
+        return "$flat"
+    }
+    return def
+}