@axel669/zephyr 0.3.6 → 0.4.4-beta.0

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>
-```

package/src/data-display/popover.md

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

@@ -1,46 +0,0 @@
-# Progress
-
-Displays progress bar with an optional label.
-
-## Props
-
-### color
-`string`
-
-Sets `$color`
-
-### label
-`string`
-
-The label for the bar
-
-### max
-`number`
-
-Sets the max value for the progress bar. Default is 1
-
-### outline
-`bool`
-
-Sets `$outline`
-
-### row
-`bool`
-
-Sets `$row`
-
-### value
-`number`
-
-Sets the value of the progress bar. Combined with max to determine how
-filled the bar is.
-
-## Example
-```svelte
-<script>
-    import { Progress } from "@axel669/zephyr"
-</script>
-
-<Progress color="primary" value={0.1} />
-<Progress color="primary" value={5} max={10} />
-```

package/src/data-display/table.md

@@ -1,59 +0,0 @@
-# Table
-Wrapper for making tables in a way that is easy to maintain.
-
-## Props
-
-### color
-`string`
-
-Sets the $color macro.
-
-### data
-`Array`
-
-The data to display in the table.
-
-### fillHeader
-`bool`
-
-If true, the header row will have the background filled instead of just the
-colored border.
-
-## Slots
-
-### header
-Used to render the header for the table. Needs to include the `tr`.
-
-### row
-Used to render an item that is not `undefined`. Needs to include the `tr`. Uses
-`let:row` for the row data, and `let:rowNum` for the row number (0-based).
-
-### empty-row
-If given, will render when the item in the array is `undefined`. Uses
-`let:rowNum` for the row number (0-based).
-
-## Example
-```svelte
-<script>
-    import { Table } from "@axel669/zephyr"
-
-    const data = Array.from(
-        { length: 20 },
-        (_, i) => [i, i ** 2, i ** 3]
-    )
-</script>
-
-<Table>
-    <tr slot="header">
-        <th>N</th>
-        <th>Squared</th>
-        <th>Cubed</th>
-    </tr>
-
-    <tr slot="row" let:row>
-        <td>{row[0]}</td>
-        <td>{row[1]}</td>
-        <td>{row[2]}</td>
-    </tr>
-</Table>
-```

package/src/data-display/tooltip.md

@@ -1,29 +0,0 @@
-# Tooltip
-
-Displays a tooltip above (or below) some content when it's hovered.
-
-## Props
-
-### text
-`string`
-
-The text to display in the tooltip.
-
-### bottom
-`bool`
-
-If true, the tooltip will be shown under the content instead of over.
-
-## Example
-```svelte
-<script>
-    import { Tooltip, Button } from "@axel669/zephyr"
-</script>
-
-<Tooltip text="This is a button">
-    <Button>Do Thing</Button>
-</Tooltip>
-<Tooltip text="This shows under" bottom>
-    Just some text content
-</Tooltip>
-```

package/src/dialogs/alert.md

@@ -1,42 +0,0 @@
-# Alert Dialog
-A nicer alert dialog to use with [Modal](../layout/dialog.md).
-
-## Props
-
-### color
-Sets the $color macro.
-
-### icon
-The name of an icon to show with the title of the alert.
-
-### message
-The message to shwo in the alert.
-
-### okText
-The text for the button that closes the alert.
-
-### title
-The title for the alert.
-
-## Example
-```svelte
-<script>
-    import { Alert, Button, EntryButton, Modal } from "@axel669/zephyr"
-
-    let alertModal = null
-    const alertProps = {
-        title: "Alert Example",
-        message: "This is an alert!"
-    }
-    const show = () => alertModal.show(alertProps)
-</script>
-
-<Modal component={Alert} bind:this={alertModal} />
-<Button on:click={show}>
-    Show Alert
-</Button>
-
-<EntryButton props={alertProps}>
-    Show Alert
-</EntryButton>
-```