@axel669/zephyr 0.3.8 → 0.4.5

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

package/src/dialogs/confirm.md

@@ -1,56 +0,0 @@
-# Confirm Dialog
-A nicer confirm 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 dialog.
-
-### message
-The message to shwo in the confirm.
-
-### cancelText
-The text for the button that cancels the dialog.
-
-### okText
-The text for the button that confirms the dialog.
-
-### title
-The title for the dialog.
-
-## Return Values
-The Confirm component will return `true` from the `Modal.show` function if the
-OK button is clicked, and false if the Cancel button is clicked.
-
-## Example
-```svelte
-<script>
-    import { Confirm, Button, EntryButton, Modal } from "@axel669/zephyr"
-
-    let confirmModal = null
-    const confirmProps = {
-        title: "Confirm Example",
-        message: "This is an confirm!"
-    }
-    const show = async () => {
-        const result = await confirmModal.show(confirmProps)
-        if (result === true) {
-            console.log("confirmed!")
-            return
-        }
-        console.log("cancelled :(")
-    }
-</script>
-
-<Modal component={Confirm} bind:this={confirmModal} />
-<Button on:click={show}>
-    Show Confirm
-</Button>
-
-<EntryButton props={confirmProps}>
-    Show Confirm
-</EntryButton>
-```

package/src/functions.md

@@ -1,108 +0,0 @@
-# Library Functions/Actions
-
-Zephyr has a few functions to make some tasks easier for working with the
-library.
-
-## handler$
-
-Wraps a function for currying as an event handler. The curried function does
-not pass the event into final function call.
-
-### Example
-```svelte
-<script>
-    import { handler$ } from "@axel669/zephyr"
-
-    const clicked = handler$(
-        (buttonName) => console.log(buttonName)
-    )
-</script>
-
-<!-- logs "first" when clicked -->
-<Button on:click={clicked("first")}>
-    First
-</Button>
-<!-- logs "second" when clicked -->
-<Button on:click={clicked("second")}>
-    Second
-</Button>
-```
-
-## eventHandler$
-
-Wraps a function for currying as an event handler. Unlike the `handler$`
-function, the event is passed to the curried function.
-
-### Example
-
-```svelte
-<script>
-    import { eventHandler$ } from "@axel669/zephyr"
-
-    const clicked = eventHandler$(
-        (event, buttonName) => console.log(event, buttonName)
-    )
-</script>
-
-<!-- logs the event and "first" when clicked -->
-<Button on:click={clicked("first")}>
-    First
-</Button>
-<!-- logs the event and "second" when clicked -->
-<Button on:click={clicked("second")}>
-    Second
-</Button>
-```
-
-## wsx Action
-
-The wsx action can be used to set the `ws-x` attribute on a DOM element by using
-an object as the source rather than trying to do the string manipulation
-directly.
-- `null`, `undefined`, and `false` will not insert the wind function
-- `true` will insert the wind function with no args
-- any string value will insert the wind function with the arguments formatted
-    for the parser (replace spaces and underscores as needed).
-
-### Example
-```svelte
-<script>
-    import { wsx } from "@axel669/zephyr"
-
-    // will generate ws-x="grid gr-col[1fr 1fr]"
-    const wsxProps = {
-        grid: true,
-        "gr.cols": "1fr 1fr",
-        bg: null
-    }
-</script>
-
-<div use:wsx={wsxProps}>
-    <span>Content</span>
-</div>
-```
-
-## hash store
-A svelte store that has the current value of the browser page hash. It uses
-polling to check the value several times a second (it's a cheap check) so the
-weird browser issues around hash change events don't affect it. Can also be used
-to set the browser hash.
-
-### Example
-```svelte
-<script>
-    import { hash } from "@axel669/zephyr"
-</script>
-
-<div>
-    Browser hash: {$hash}
-</div>
-```
-
-## sorts
-A collection fo sorting functions for use with the DataTable. Currently only
-has natural sort as `sorts.natural(colProp)`.
-
-## filters
-A collection of filter functions for use with the DataTable. Currently only has
-a text filter function as `filter.text(colProp)`.

package/src/info/icon.md

@@ -1,21 +0,0 @@
-# Icon
-
-Displays a [Tabler Icon](https://tabler-icons.io/) and some optional text.
-The icon will appear at the beginning of the text.
-
-## Props
-
-### name
-`string`
-
-The name of the icon. Use the tabler icon class name without the "ti-".
-
-## Example
-```svelte
-<script>
-    import { Icon } from "@axel669/zephyr"
-</script>
-
-<Icon name="hexagon" />
-<Icon name="hexagons">Are the bestagons</Icon>
-```

package/src/info/notification.md

@@ -1,36 +0,0 @@
-# Notification
-
-Displays a piece of content that stands out from the surrounding content and
-can also be used for toast messages. Optionally has some interactable
-elements embedded.
-
-Expects 1-2 child nodes and will display them on the sides of the
-notification with space between them. This means that reversing the order
-of the child nodes will flip which sides they appear on.
-
-## Props
-
-### color
-Sets `$color` and uses the fill style for coloration.
-
-## Example
-```svelte
-<script>
-    import { Notification, Button, Icon } from "@axel669/zephyr"
-</script>
-
-<Notification>
-    <Icon name="info-hexagon">
-        Some kind of information
-    </Icon>
-</Notification>
-<Notification color="danger">
-    <Icon name="alert-hexagon">
-        Something broke
-    </Icon>
-
-    <Button>
-        Cancel
-    </Button>
-</Notification>
-```

package/src/info/titlebar.md

@@ -1,75 +0,0 @@
-# Titlebar
-
-The titlebar is used to set section titles with some style, and provides
-slots for buttons on either side of the title text. Works well as a header
-for Paper components.
-
-## Props
-
-### color
-`string`
-
-Sets `$color`
-
-### fill
-`bool`
-
-Sets `$fill`
-
-## Slots
-
-### title
-The center of the titlebar, where the text usually goes. Elements can be nested
-in different ways within a parent element for different visual effects in this
-slot.
-
-### menu
-The area on the left of the titlebar (where drawer menus tend to open)
-
-### action
-The area on the right of the titlebar
-
-## Example
-```svelte
-<script>
-    import { Titlebar, Button, Paper, Text } from "@axel669/zephyr"
-</script>
-
-<Titlebar color="primary" fill>
-    <Text title slot="title">
-        Some Title
-    </Text>
-
-    <Button slot="menu">
-        <Icon name="menu" />
-    </Button>
-</Titlebar>
-
-<Paper>
-    <Titlebar color="secondary" slot="header">
-        <Text title slot="title">
-            Paper Title
-            <Text subtitle>
-                Indented Subtitle
-            </Text>
-        </Text>
-    </Titlebar>
-</Paper>
-
-<Paper>
-    <Titlebar color="secondary" slot="header">
-        <Flex p="0px" slot="title">
-            <Text title>
-                Paper Title
-            </Text>
-            <Text subtitle>
-                Aligned Subtitle
-            </Text>
-        </Flex>
-
-        <Button slot="action">
-            <Icon name="menu" />
-        </Button>
-    </Titlebar>
-</Paper>
-```

package/src/info/toaster.md

@@ -1,26 +0,0 @@
-# Toaster
-
-The Toaster component is used for building popup notifications along the
-edges of the window.
-
-## Props
-
-### position
-Sets position of the toaster. See the
-[windstorm base](https://windstorm.axel669.net/lib/css/component/toaster)
-for values.
-
-## Example
-```svelte
-<script>
-    import { Toaster, Notification, Icon } from "@axel669/zephyr"
-</script>
-
-<Toaster position="$tc">
-    <Notification>
-        <Icon name="info">
-            Some kind of notification of things
-        </Icon>
-    </Notification>
-</Toaster>
-```

package/src/layout/dialog.md

@@ -1,43 +0,0 @@
-# Dialog
-
-A modal container for creating dialogs. The Dialog component is a modal
-element that uses a Paper element for the layout of content. All props and
-slots for the Dialog are passed to the underlying Paper component.
-
-The Dialog component is used as a wrapper for content and is used in
-conjunction with the Modal component to be controlled on screen.
-
-## Props
-This component just wraps a [Paper](./paper.md) component with some extra parts,
-and passes the props to a `Paper`.
-
-## Example
-`cool-dialog.svelte`
-```svelte
-<script>
-    import { Dialog, Titlebar, Text } from "@axel669/zephyr"
-</script>
-
-<Dialog>
-    <Titlebar slot="header">
-        <Text slot="title" title>
-            Some Title
-        </Text>
-    </Titlebar>
-
-    <span>Content</span>
-</Dialog>
-```
-
-`app.svelte`
-```svelte
-<script>
-    import { Modal, EntryButton } from "@axel669/zephyr"
-    import CoolDialog from "./cool-dialog.svelte"
-</script>
-
-<Modal component={CoolDialog} />
-<EntryButton this={Modal} component={CoolDialog}>
-    Open Cool Dialog
-</EntryButton>
-```

package/src/layout/drawer.md

@@ -1,70 +0,0 @@
-# Drawer
-
-A modal container for creating dialogs. The Dialog component is a modal
-element that uses a Paper element for the layout of content. All extra props
-and slots for the Drawer are passed to the underlying Paper component.
-
-The Drawer component is used as a wrapper for content and is used in
-conjunction with the Modal component to be controlled on screen.
-
-## Props
-
-### close
-`function`
-
-If passed, this function will be called when the user clicks in the
-empty area outside of the drawer contents.
-
-### height
-`string`
-
-Sets the height of the select drawer, no effect for menu and action
-drawers which default to full height of the window.
-
-### type
-`string`
-
-The type of drawer. Default is "menu"
-#### "menu"
-
-Makes a drawer that slides in on the left side of the screen
-
-#### "action"
-
-Makes a drawer that slides in on the right side of the screen
-
-#### "select"
-
-Makes a drawer that is centered horizontally and slides in from
-the top of the screen
-
-## Example
-`cool-drawer.svelte`
-```svelte
-<script>
-    import { Drawer, Titlebar, Text } from "@axel669/zephyr"
-</script>
-
-<Drawer>
-    <Titlebar slot="header">
-        <Text slot="title" title>
-            Some Title
-        </Text>
-    </Titlebar>
-
-    <span>Content</span>
-</Drawer>
-```
-
-`app.svelte`
-```svelte
-<script>
-    import { Modal, EntryButton } from "@axel669/zephyr"
-    import CoolDrawer from "./cool-drawer.svelte"
-</script>
-
-<Modal component={CoolDrawer} />
-<EntryButton this={Modal} component={CoolDrawer}>
-    Open Cool Dialog
-</EntryButton>
-```

package/src/layout/flex.md

@@ -1,43 +0,0 @@
-# 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
-<script>
-    import { Flex, Text } from "@axel669/zephyr"
-</script>
-
-<Flex cross="stretch">
-    <Text>Content</Text>
-    <Text>More content</Text>
-    <Text>Event more content</Text>
-<Flex>
-```