@axel669/zephyr 0.2.0-beta.3 → 0.3.6

package/src/control/toggle.svelte

@@ -1,49 +1,49 @@
-<svelte:options immutable />
-
-<script>
-    import wsx from "../wsx.mjs"
-
-    export let label = ""
-    export let color = "default"
-    export let checked = false
-    export let flat = false
-    export let value
-    export let group = []
-    export let checkbox = false
-    export let reverse = false
-
-    $: container = {
-        "$toggle": true,
-        "$flat": flat,
-        "$color": color,
-        "fl.dir": reverse ? "row-reverse" : false,
-        ...$$restProps,
-    }
-    $: input = {
-        "$switch": checkbox === false
-    }
-
-    const updateGroup = (checked) => {
-        if (checked === true) {
-            if (group.includes(value) === true) {
-                return
-            }
-            group = [...group, value]
-            return
-        }
-        if (group.includes(value) === false) {
-            return
-        }
-        group = group.filter(item => item !== value)
-    }
-    $: updateGroup(checked)
-</script>
-
-<label use:wsx={container}>
-    <div>
-        <slot>
-            {label}
-        </slot>
-    </div>
-    <input type="checkbox" bind:checked use:wsx={input} />
-</label>
+<svelte:options immutable />
+
+<script>
+    import wsx from "../wsx.mjs"
+
+    export let label = ""
+    export let color = "@default"
+    export let checked = false
+    export let flat = false
+    export let value
+    export let group = []
+    export let checkbox = false
+    export let reverse = false
+
+    $: container = {
+        "@toggle": true,
+        "$flat": flat,
+        "$color": color,
+        "fl.dir": reverse ? "row-reverse" : false,
+        ...$$restProps,
+    }
+    $: input = {
+        "@switch": checkbox === false
+    }
+
+    const updateGroup = (checked) => {
+        if (checked === true) {
+            if (group.includes(value) === true) {
+                return
+            }
+            group = [...group, value]
+            return
+        }
+        if (group.includes(value) === false) {
+            return
+        }
+        group = group.filter(item => item !== value)
+    }
+    $: updateGroup(checked)
+</script>
+
+<label use:wsx={container}>
+    <div>
+        <slot>
+            {label}
+        </slot>
+    </div>
+    <input type="checkbox" bind:checked use:wsx={input} />
+</label>

package/src/data-display/avatar.md

@@ -1,36 +1,36 @@
-# Avatar
-
-Displays an image or text in a circular container.
-
-## Props
-
-### 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
-<script>
-    import { Avatar } from "@axel669/zephyr"
-</script>
-
-<Avatar image="url" />
-<Avatar image="url" alt="text" />
-<Avatar text="Hi" color="primary" />
-```
+# Avatar
+
+Displays an image or text in a circular container.
+
+## Props
+
+### 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
+<script>
+    import { Avatar } from "@axel669/zephyr"
+</script>
+
+<Avatar image="url" />
+<Avatar image="url" alt="text" />
+<Avatar text="Hi" color="primary" />
+```

package/src/data-display/avatar.svelte

@@ -1,25 +1,25 @@
-<svelte:options immutable />
-
-<script>
-    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>
+<svelte:options immutable />
+
+<script>
+    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/data-display/badge.md

@@ -1,30 +1,30 @@
-# Badge
-Adds a small badge over the upper-right corner of some content.
-
-## Props
-
-### color
-`string`
-
-Sets `$color`
-
-### text
-`string`
-
-The badge text.
-
-## Example
-```svelte
-<script>
-    import { Badge } from "@axel669/zephyr"
-
-    let count = 10
-</script>
-
-<Badge text={count}>
-    Unread Messages
-</Badge>
-<Badge text="1k+" color="warning">
-    <button on:click={() => count += 1}>Clickable Content</button>
-</Badge>
-```
+# Badge
+Adds a small badge over the upper-right corner of some content.
+
+## Props
+
+### color
+`string`
+
+Sets `$color`
+
+### text
+`string`
+
+The badge text.
+
+## Example
+```svelte
+<script>
+    import { Badge } from "@axel669/zephyr"
+
+    let count = 10
+</script>
+
+<Badge text={count}>
+    Unread Messages
+</Badge>
+<Badge text="1k+" color="warning">
+    <button on:click={() => count += 1}>Clickable Content</button>
+</Badge>
+```

package/src/data-display/badge.svelte

@@ -1,14 +1,14 @@
-<svelte:options immutable />
-
-<script>
-    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>
+<svelte:options immutable />
+
+<script>
+    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/data-display/chip.md

@@ -1,36 +1,36 @@
-# Chip
-
-Shows a small piece of information that is separate from the surrounding
-info and optionally allows interaction.
-
-## Props
-
-### 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
-<script>
-    import { Chip } from "@axel669/zephyr"
-</script>
-
-Emails:
-<Chip clickable>admin@site.com</Chip>
-<Chip clickable color="warning">weirdge@site.com</Chip>
-<Chip color="primary" fill>required@site.io</Chip>
-```
+# Chip
+
+Shows a small piece of information that is separate from the surrounding
+info and optionally allows interaction.
+
+## Props
+
+### 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
+<script>
+    import { Chip } from "@axel669/zephyr"
+</script>
+
+Emails:
+<Chip clickable>admin@site.com</Chip>
+<Chip clickable color="warning">weirdge@site.com</Chip>
+<Chip color="primary" fill>required@site.io</Chip>
+```

package/src/data-display/chip.svelte

@@ -1,28 +1,28 @@
-<svelte:options immutable />
-
-<script>
-    import wsx from "../wsx.mjs"
-    import variant from "../variant.mjs"
-
-    export let color = "default"
-    export let clickable = false
-
-    export let fill = false
-    export let outline = false
-    export let flat = false
-
-    $: type = variant({ fill, flat, outline }, "$outline")
-
-    $: wind = {
-        [type]: true,
-        "$color": color,
-        $click: clickable,
-        ...$$restProps
-    }
-</script>
-
-<!-- svelte-ignore a11y-click-events-have-key-events -->
-<!-- svelte-ignore a11y-interactive-supports-focus -->
-<ws-chip use:wsx={wind} on:click role="button">
-    <slot />
-</ws-chip>
+<svelte:options immutable />
+
+<script>
+    import wsx from "../wsx.mjs"
+    import variant from "../variant.mjs"
+
+    export let color = "@default"
+    export let clickable = false
+
+    export let fill = false
+    export let outline = false
+    export let flat = false
+
+    $: type = variant({ fill, flat, outline }, "$outline")
+
+    $: wind = {
+        [type]: true,
+        "$color": color,
+        $click: clickable,
+        ...$$restProps
+    }
+</script>
+
+<!-- svelte-ignore a11y-click-events-have-key-events -->
+<!-- svelte-ignore a11y-interactive-supports-focus -->
+<ws-chip use:wsx={wind} on:click role="button">
+    <slot />
+</ws-chip>

package/src/data-display/details.md

@@ -1,3 +1,42 @@
-# Details
-
-Still working on this one.
+# Details
+A component that has some baseline content that is shown, then expands to reveal
+more content (like the html details element).
+
+## Props
+
+### color
+Sets the $color macro.
+
+### label
+The text for the content that is always shown.
+
+### open
+Controls whether the Details is showing the extended content. Can be bound to.
+
+### outline
+If true, will put an outline around the component, including the extended
+content.
+
+## Slots
+
+### default
+The content to show when the Details is open.
+
+### label
+Can be used for more complex labels (things that need nested elements). If used,
+the label prop will be ignored.
+
+## Example
+
+```svelte
+<script>
+    import { Details } from "@axel669/zephyr"
+
+    let open = false
+</script>
+
+<div>Open: {open}</div>
+<Details label="Info" bind:open>
+    Look, more info could go here!
+</Details>
+```

package/src/data-display/details.svelte

@@ -1,25 +1,25 @@
-<svelte:options immutable />
-
-<script>
-    import wsx from "../wsx.mjs"
-
-    export let label
-    export let outline
-    export let color = "default"
-    export let open = false
-
-    $: wind = {
-        "$color": color,
-        "$outline": outline,
-        ...$$restProps,
-    }
-</script>
-
-<details use:wsx={wind} bind:open>
-    <summary>
-        <slot name="label">
-            {label}
-        </slot>
-    </summary>
-    <slot />
-</details>
+<svelte:options immutable />
+
+<script>
+    import wsx from "../wsx.mjs"
+
+    export let label
+    export let outline
+    export let color = "@default"
+    export let open = false
+
+    $: wind = {
+        "$color": color,
+        "$outline": outline,
+        ...$$restProps,
+    }
+</script>
+
+<details use:wsx={wind} bind:open>
+    <summary>
+        <slot name="label">
+            {label}
+        </slot>
+    </summary>
+    <slot />
+</details>

package/src/data-display/popover.md

@@ -1,32 +1,32 @@
-# Popover
-
-The Popover component is for displaying content over something without it
-being modal (you can interact with things under it still).
-
-## Variables
-- show
-- hide
-The Popover exposes 2 variables for use: `show` and `hide`. These functions
-are given to the content so that it can control when to display the popover
-content without needing to bind to the parent.
-
-> Beacuse the hide function is given to a named slot, the `let:hide` declaration
-> needs to be on the slotted element.
-
-## Example
-```svelte
-<script>
-    import { Popover, Button } from "@axel669/zephyr"
-</script>
-
-<Popover let:show>
-    <Button on:click={show}>
-        Show
-    </Button>
-    <div ws-x="inset-x[0px] y[0px] h[100px] bg[teal]" slot="content" let:hide>
-        <Button on:click={hide}>
-            Hide
-        </Button>
-    </div>
-</Popover>
-```
+# Popover
+
+The Popover component is for displaying content over something without it
+being modal (you can interact with things under it still).
+
+## Variables
+- show
+- hide
+The Popover exposes 2 variables for use: `show` and `hide`. These functions
+are given to the content so that it can control when to display the popover
+content without needing to bind to the parent.
+
+> Beacuse the hide function is given to a named slot, the `let:hide` declaration
+> needs to be on the slotted element.
+
+## Example
+```svelte
+<script>
+    import { Popover, Button } from "@axel669/zephyr"
+</script>
+
+<Popover let:show>
+    <Button on:click={show}>
+        Show
+    </Button>
+    <div ws-x="inset-x[0px] y[0px] h[100px] bg[teal]" slot="content" let:hide>
+        <Button on:click={hide}>
+            Hide
+        </Button>
+    </div>
+</Popover>
+```

package/src/data-display/popover.svelte

@@ -1,25 +1,25 @@
-<svelte:options immutable />
-
-<script>
-    import { fade } from "svelte/transition"
-    import wsx from "../wsx.mjs"
-
-    let visible = false
-    const show = () => visible = true
-    const hide = () => visible = false
-    const anim = { duration: 250 }
-
-    $: wind = {
-        $show: true,
-        ...$$restProps,
-    }
-</script>
-
-<ws-popover use:wsx={wind}>
-    <slot {show} />
-    {#if visible}
-        <wind-content slot="content" ws-x="inset[0px]" transition:fade={anim}>
-            <slot name="content" {hide} />
-        </wind-content>
-    {/if}
-</ws-popover>
+<svelte:options immutable />
+
+<script>
+    import { fade } from "svelte/transition"
+    import wsx from "../wsx.mjs"
+
+    let visible = false
+    const show = () => visible = true
+    const hide = () => visible = false
+    const anim = { duration: 250 }
+
+    $: wind = {
+        $show: true,
+        ...$$restProps,
+    }
+</script>
+
+<ws-popover use:wsx={wind}>
+    <slot {show} />
+    {#if visible}
+        <wind-content slot="content" ws-x="[inset 0px]" transition:fade={anim}>
+            <slot name="content" {hide} />
+        </wind-content>
+    {/if}
+</ws-popover>