@axel669/zephyr 0.3.8 → 0.4.4-beta.0

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

package/src/layout/grid.md

@@ -1,61 +0,0 @@
-# Grid
-
-Container that uses grid layout by default with some nice default values.
-
-## Base
-[Windstorm Grid](https://axel669.github.io/lib.windstorm/#components-grid)
-
-## Props
-All [windstorm functions](https://axel669.github.io/lib.windstorm/#css-shorthands)
-are supported.
-
-
-### direction
-`string`
-
-Sets `gr.flow`
-
-### pad
-`string`
-
-Sets `p`
-
-### gap
-`string`
-
-Sets `gap`
-
-### cols
-`string|Array`
-
-Sets `gr.cols`. Accepts either an array of values that are joined by " "
-or a regular string value.
-
-### rows
-`string|Array`
-
-Sets `gr.rows`. Accepts either an array of values that are joined by " "
-or a regular string value.
-
-### autoCol
-`string`
-
-Sets `gr.cols.a`
-
-### autoRow
-`string`
-
-Sets `gr.rows.a`
-
-## Example
-```svelte
-<script>
-    import { Grid, Text } from "@axel669/zephyr"
-</script>
-
-<Grid cols="1fr 1fr">
-    <Text>Content</Text>
-    <Text>More content</Text>
-    <Text>Event more content</Text>
-<Grid>
-```

package/src/layout/modal.md

@@ -1,50 +0,0 @@
-# Modal
-
-The Modal component is used to control when content should be shown that
-sits over the current content and prevents interaction with the content it
-covers. It is primarily used to show drawers, dialogs, and sub screens.
-
-The `show` function will display the component specified inside a ws-modal
-element, and can be awaited for an optional return value. The component
-displayed will be passed any props supplied to `show` and a `close` function
-that can be called to hide the component again. `close` can also be given
-an argument that will be used as the promise value from `show`.
-
-If a component that a modal displays exports a `cancel` function, then
-clicking the modal area outside the displayed component will call that
-`cancel` function, allowing any modal component to decide when/if it is
-closes in response to that event.
-
-## Props
-Because the Modal does not render content of its own, it does not support
-any wind functions.
-
-
-### component
-`Component`
-
-The component to display when `show` is called
-
-## Functions
-
-### `show(props?) -> Promise`
-Shows the given component and passes any props provided.
-
-## Example
-```svelte
-<script>
-    import { Modal, Button } from "@axel669/zephyr"
-    import CoolDialog from "./cool-dialog.svelte"
-
-    let dialog = null
-    const dialogThing = async () => {
-        const value = await dialog.show({ a: 10, b: 12 })
-        console.log(value)
-    }
-</script>
-
-<Modal component={CoolDialog} bind:this={dialog} />
-<Button on:click={dialogThing}>
-    Open Dialog
-</Button>
-```

package/src/layout/paper.md

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