@axel669/zephyr 0.3.8 → 0.4.5

package/src/composed/toast.md

@@ -1,45 +0,0 @@
-# Toast
-Displays toast notifications along the edge of the screen. Unlike the Toaster
-component, this has functions for interacting with and generating toast
-messages, where the Toaster component has the programmer manage the content.
-
-## Props
-See the Toaster component. The Toast component is wrapper around it that
-also controls the children being shown for convenience.
-
-### component
-The component to use as a wrapper for the messages. Defaults to the
-ToastMessage component.
-
-### position
-The position to show modals in. Uses the same positions as the Windstorm
-toaster.
-
-## Functions
-
-### show(duration, props)
-Shows a toast notification that will disappear after the specified
-duration (time in milliseconds). The props provided are passed to an
-instance of the component specified in the props.
-
-## Events
-
-### action
-Fired when a toast message is clicked. The info argument contains a
-value property that is provided by the message component, and a copy
-of the props passed to that instace.
-
-For the default messages, the value will be `null` if no button was
-clicked, and `true` if the action button was clicked. This allows
-actions to be taken against interactions in the message without having
-to bind all kinds of events or callbacks.
-
-## Example
-```svelte
-<script>
-    let toast = null
-    const notify = () => toast.show(5000, { message: "hi" })
-</script>
-
-<Toast bind:this={toast} position="bc" />
-```

package/src/control/button.md

@@ -1,41 +0,0 @@
-# Button
-
-Basic clickable component for handling user interaction.
-
-## Props
-
-### color
-`string`
-
-Sets `$color`
-
-### compact
-`bool`
-
-Sets `$compact`
-
-### 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
-<script>
-    import { Button } from "@axel669/zephyr"
-</script>
-
-<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>
-```

package/src/control/input.md

@@ -1,87 +0,0 @@
-# Input
-A component that wraps the text-based input tags. Includes optional outline,
-label, hint text, error showing, input validation, input transformation, and
-browser level autocomplete.
-
-## Props
-
-### autoCompleteOptions
-An array of options to show for auto complete. Uses the browser `datalist`
-element to create the auto complete.
-
-### color
-Sets the $color macro.
-
-### disabled
-Disables the input.
-
-### error
-If set, shows an error message under the input.
-
-### flat
-If true, the input will not have a border. Default is false (with a border).
-
-### hint
-Shows a hint under the label of the input.
-
-### type
-The type of input. Default to "text".
-
-### value
-The value of the input. Can be bound the same way a normal text input value is
-bound in Svelte.
-
-### transform
-A function to transform the value of the input automatically. Results are put
-into the tvalue prop.
-
-### tvalue
-The transformed value of the input. Binding should only be used to react to
-the value as it will be overriden while a user is typing into the input.
-
-### validate
-A function to determine if the value of the input is valid. Results are put into
-the `valid` prop. If a transform function is provided, the transformed value
-is given to the validation function.
-
-### valid
-The result of the validation function. Binding should only be used to react to
-the value.
-
-## Instance Functions
-
-### focus
-Focuses the input.
-
-## Slots
-
-### end
-Puts an element at the end of the input.
-
-### start
-Puts an element at the start of the input.
-
-## Example
-
-```svelte
-<script>
-    import { Input } from "@axel669/zephyr"
-
-    let name = ""
-    let ageText = ""
-    let age = 0
-    let ageValid = false
-
-    $: ageError = ageValid ? "Invalid Age" : null
-</script>
-
-<Input bind:value={name} label="Name" />
-<Input
-    bind:value={ageText}
-    transform={v => parseInt(v)}
-    bind:tvalue={age}
-    validate={age => age > 0}
-    bind:valid={ageValid}
-    error={ageError}
-/>
-```

package/src/control/label.md

@@ -1,48 +0,0 @@
-# Label
-The label component is a wrapper around a `<label>` element.
-
-## Props
-
-### button
-`bool`
-
-If true, the label will have the button appearance.
-
-### color
-`string`
-
-Sets `$color`
-
-### compact
-`bool`
-
-If true, will make the label button be more compact. No effect is `button` is
-`false`.
-
-### disabled
-`bool`
-
-Disables the label.
-
-### fill / outline / flat
-`bool`
-
-Sets the button variant of the label when `button` is `true`.
-
-### for
-`string`
-
-[Label for attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label#for)
-
-## Example
-
-```svelte
-<script>
-    import { Label } from "@axel669/zephyr"
-</script>
-
-<Label for="checkbox">Toggle Checkbox</Label>
-<Label for="checkbox" button color="primary" fill>
-    Open Menu
-</Label>
-```

package/src/control/link.md

@@ -1,50 +0,0 @@
-# Link
-
-Themed and customizale `<a>` tag component.
-
-## Props
-
-### button `string`
-
-If true, the link will be styled like a button
-
-### color
-`string`
-
-Sets the color of the button. Applies to both regular links and button
-style links.
-
-### href
-`string`
-
-Sets the href attribute.
-
-### rel
-`string`
-
-Sets the rel attribute.
-
-### target
-`string`
-
-Sets the target attribute.
-
-### fill / outline / flat
-`bool`
-
-Sets the link-button type to `$fill` if fill is true, `$outline` if outline
-is true, or `$flat` if neither is true.
-
-## Example
-```svelte
-<script>
-    import { Link } from "@axel669/zephyr"
-</script>
-
-<Link color="primary" href="test" target="_blank">
-    Test
-</Link>
-<Link color="primary" href="logout" button outline>
-    Logout
-</Link>
-```

package/src/control/radio.md

@@ -1,58 +0,0 @@
-# Radio
-
-The radio component displays a list of radio options and provides an
-interface to control which one is selected and react to changes in the
-selected value. It also uses a layout component to decide how the options
-are presented.
-
-## Base
-Each radio item rendered is a
-[Windstorm Labeled Toggle](https://windstorm.axel669.net/lib/css/component/toggle)
-that uses a radio input.
-
-## Props
-
-The wind functions passed as props to the Radio component are passed directly to
-the layout specified because the Radio does not have a container element of its
-own.
-
-### layout
-`Component`
-
-The component to use for layout out the options. Default is
-[Flex](../layout/flex.md).
-
-### options
-`Array[Object]`
-
-An array of objects that defines the options to show. Details below.
-
-### value
-`any`
-
-The value currently selected. Can be bound to react to selections or change the
-current selection.
-
-## Options
-Each object in the options array supplied should have a `value` and `label`
-prop specified. Additionally, any wind functions that should be applied to
-the option can be passed as additional props.
-
-Labels should be strings, but values can be any type as long as they are
-unique in the list.
-
-## Example
-```svelte
-<script>
-    import { Radio, Grid } from "@axel669/zephyr"
-
-    const options = [
-        { label: "first", value: 1 },
-        { label: "second", value: [] },
-        { label: "third", value: "3", "$color": "warning" }
-    ]
-</script>
-
-<Radio {options} bind:value />
-<Radio {options} bind:value={other} layout={Grid} gr.cols="1fr 1fr" />
-```

package/src/control/radio.svelte

@@ -1,28 +0,0 @@
-<svelte:options immutable />
-
-<script>
-    import wsx from "../wsx.mjs"
-    import { handler$ } from "../handler$.mjs"
-
-    import Flex from "../layout/flex.svelte"
-
-    export let options = []
-    export let layout = Flex
-    export let value
-
-    $: valueIndex = options.findIndex(item => item.value === value)
-    const set = handler$(
-        (newValue) => value = newValue
-    )
-
-    const name = `${Math.random().toString(16)}-${Date.now()}`
-</script>
-
-<svelte:component this={layout} {...$$restProps}>
-    {#each options as {value, label, disabled, ...wind}, index (value)}
-        <label use:wsx={{"@toggle": true, ...wind}} {disabled}>
-            <span>{label}</span>
-            <input type="radio" on:input={set(value)} {name} checked={index === valueIndex} />
-        </label>
-    {/each}
-</svelte:component>

package/src/control/select.md

@@ -1,70 +0,0 @@
-# Select
-
-A wrapper for select elements to make them look nicer.
-
-## Base
-[Windstorm Labeled Control](https://axel669.github.io/lib.windstorm/#components-labeled control)
-using a `<select>`
-
-## Props
-All [windstorm functions](https://axel669.github.io/lib.windstorm/#css-shorthands)
-are supported.
-
-### color
-`string`
-
-Sets `$color`
-
-### label
-`string`
-
-The text to display as the label
-
-### options
-`Array[Object]`
-
-An array of options and groups to show in the select. Details below
-
-### outline `bool`
-
-Sets `$outline`
-### value
-`any`
-
-The value currently selected. Can be bound to react to selections or
-change the current selection.
-
-## Options
-Each object in the options provided should be in one of 2 forms:
-- `{ label, value }`
-- `{ group }`
-
-Items with a label and value are displayed as <option> tags in the select.
-Items with a group defined are used to denote <optgroup> tags. Each option
-after a `{ group }` item until another group item is seen (or the end of the
-array) is put into the optgroup defined by the group item.
-
-Labels and group names should be strings, but values can be any type.
-
-## Example
-```svelte
-<script>
-    import { Select } from "@axel669/zephyr"
-
-    // Results in:
-    // <option>first</option>
-    // <optgroup label="Not Numbers">
-    //     <option>second</option>
-    //     <option>third</option>
-    // </optgroup>
-    const options = [
-        { label: "first", value: 1 },
-        { group: "Not numbers" },
-        { label: "second", value: "two" },
-        { label: "third", value: [3] },
-    ]
-</script>
-
-<Select {options} bind:value label="Blep" />
-<Select {options} bind:value color="warning" label="Why" />
-```

package/src/control/tabs.md

@@ -1,47 +0,0 @@
-# Tabs
-
-It's tabs, everyone knows what tabs are at this point.
-
-## Props
-
-### color
-`string`
-
-Sets `$color`
-
-### options
-`Array[Object]`
-
-An array of options where each item is `{ label, value }`. `label`
-should be a string, `value` can be of any type.
-
-### vertical
-`bool`
-
-Sets `$vert`
-
-### solid
-`bool`
-
-Sets `$solid`
-
-### value
-`any`
-
-The value of the currently selected tab. Can be bound to react to
-changes and set to control which tab is selected.
-
-## Example
-```svelte
-<script>
-    import { Tabs } from "@axel669/zephyr"
-
-    const options = [
-        { label: "Left", value: "left" },
-        { label: "Right", value: 2 },
-    ]
-</script>
-
-<Tab {options} bind:value color="primary" />
-<Tab {options} bind:value color="secondary" solid vertical />
-```

package/src/control/toggle.md

@@ -1,61 +0,0 @@
-# Toggle
-
-The Toggle component is used to display checkboxes and switches.
-
-## Props
-
-### color
-`string`
-
-Sets `$color`
-
-### checkbox
-`bool`
-
-If true, the toggle is displayed as a checkbox. Default is false
-(shown as a switch)
-
-### checked
-`bool`
-
-Controls if the toggle is checked or not. Can be bound.
-
-### group
-Used for binding, see the
-[Svelte bind:group](https://svelte.dev/docs/element-directives#bind-group)
-for details.
-
-### label
-`string`
-
-The text to use for the label
-
-### flat
-`bool`
-
-Sets `$flat`
-
-### reverse
-`bool`
-
-If true, the input being toggled will be on the left instead of the
-right. Default is false (label is on the left)
-
-### value
-`any`
-
-Only used in conjunction with bind:group, see Svelte docs
-
-## Example
-```svelte
-<script>
-    import { Toggle } from "@axel669/zephyr"
-
-    let checked = false
-</script>
-
-<Toggle label="Active" bind:checked />
-<Toggle label="Active" checkbox bind:checked />
-<Toggle label="Active" checkbox reverse bind:checked />
-<Toggle label="Active" checkbox flat color="danger" bind:checked />
-```

package/src/data-display/avatar.md

@@ -1,36 +0,0 @@
-# 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/badge.md

@@ -1,30 +0,0 @@
-# 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/chip.md

@@ -1,36 +0,0 @@
-# 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/details.md

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