@axel669/zephyr 0.2.0-beta.3 → 0.3.6

package/src/layout/paper.md

@@ -1,94 +1,94 @@
-# 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
-<script>
-    import { Paper, Tabs, Text, Titlebar } from "@axel669/zephyr"
-</script>
-
-<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>
-```
+# 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
+<script>
+    import { Paper, Tabs, Text, Titlebar } from "@axel669/zephyr"
+</script>
+
+<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

@@ -1,47 +1,47 @@
-<svelte:options immutable />
-
-<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>
+<svelte:options immutable />
+
+<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

@@ -1,33 +1,33 @@
-# 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
-```svelte
-<script>
-    import { Scren, Button, Paper } from "@axel669/zephyr"
-
-    export let close
-</script>
-
-<Screen width="70%">
-    <Paper>
-        This screen is pretty cool I swear
-        <Button on:click={() => close("hi")}>
-            Close
-        </Button>
-    </Paper>
-</Screen>
-```
+# 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
+```svelte
+<script>
+    import { Scren, Button, Paper } from "@axel669/zephyr"
+
+    export let close
+</script>
+
+<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

@@ -1,34 +1,34 @@
-<svelte:options immutable />
-
-<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>
+<svelte:options immutable />
+
+<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/spinner/circle-spinner.svelte

@@ -1,15 +1,15 @@
-<svelte:options immutable />
-
-<script>
-    import wsx from "../wsx.mjs"
-
-    export let size = "100px"
-    export let color = "primary"
-
-    $: wind = {
-        "&size": size,
-        "$color": color,
-    }
-</script>
-
-<ws-circle-spinner use:wsx={wind} />
+<svelte:options immutable />
+
+<script>
+    import wsx from "../wsx.mjs"
+
+    export let size = "100px"
+    export let color = "@primary"
+
+    $: wind = {
+        "@size": size,
+        "$color": color,
+    }
+</script>
+
+<ws-circle-spinner use:wsx={wind} />

package/src/spinner/hexagon-spinner.svelte

@@ -1,15 +1,15 @@
-<svelte:options immutable />
-
-<script>
-    import wsx from "../wsx.mjs"
-
-    export let size = "100px"
-    export let color = "primary"
-
-    $: wind = {
-        "&size": size,
-        "$color": color,
-    }
-</script>
-
-<ws-hexagon-spinner use:wsx={wind} />
+<svelte:options immutable />
+
+<script>
+    import wsx from "../wsx.mjs"
+
+    export let size = "100px"
+    export let color = "@primary"
+
+    $: wind = {
+        "@size": size,
+        "$color": color,
+    }
+</script>
+
+<ws-hexagon-spinner use:wsx={wind} />

package/src/spinner/spinners.md

@@ -1,3 +1,22 @@
-# Spinners
-
-Under construction.
+# Spinners
+Zephyr exports the CircleSpinner and HexagonSpinner components as wrappers for
+windstorms spinners of the same name. Both spinners are svgs with a bit of code
+setup as web components.
+
+## Props
+
+### color
+Sets the $color macro.
+
+### size
+The size of the spinner (width and height). Uses css units.
+
+## Example
+```svelte
+<script>
+    import { HexagonSpinner } from "@axel669/zephyr"
+</script>
+
+<HexagonSpinner size="50px" />
+<HexagonSpinner size="500px" color="@secondary" />
+```

package/src/text.md

@@ -1,34 +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>
-```
+# 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,22 +1,22 @@
-<svelte:options immutable />
-
-<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>
+<svelte:options immutable />
+
+<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
+}