@axel669/zephyr 0.3.8 → 0.4.5

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

package/src/layout/screen.md

@@ -1,33 +0,0 @@
-# Screen
-
-The screen is a container component that is used for displaying content
-over its parent and stacks as more screens are displayed. Screens that stack
-on top of a parent screen use the Modal to control when they are shown and
-pass values back from child screens. The stacking effect of the Screen is
-controlled by internally tracked svelte context, so no manual effort is
-required to get stacking screens to have the effect.
-
-## Props
-
-### width
-`string`
-
-The width of the screen before stack-based padding is applied
-
-## Example
-```svelte
-<script>
-    import { Scren, Button, Paper } from "@axel669/zephyr"
-
-    export let close
-</script>
-
-<Screen width="70%">
-    <Paper>
-        This screen is pretty cool I swear
-        <Button on:click={() => close("hi")}>
-            Close
-        </Button>
-    </Paper>
-</Screen>
-```

package/src/spinner/spinners.md

@@ -1,22 +0,0 @@
-# Spinners
-Zephyr exports the CircleSpinner and HexagonSpinner components as wrappers for
-windstorms spinners of the same name. Both spinners are svgs with a bit of code
-setup as web components.
-
-## Props
-
-### color
-Sets the $color macro.
-
-### size
-The size of the spinner (width and height). Uses css units.
-
-## Example
-```svelte
-<script>
-    import { HexagonSpinner } from "@axel669/zephyr"
-</script>
-
-<HexagonSpinner size="50px" />
-<HexagonSpinner size="500px" color="@secondary" />
-```

package/src/text.md

@@ -1,34 +0,0 @@
-# Text
-
-Simple component with some common props for types of text.
-
-## Props
-
-
-### adorn
-`bool`
-
-Sets `$adorn`
-
-### block
-`bool`
-
-Sets `block`
-
-### subtitle
-`bool`
-
-Sets `$subtitle`
-
-### title
-`bool`
-
-Sets `$title`
-
-## Example
-```svelte
-<Text>Some text</Text>
-<Text title>Bigger text</Text>
-<Text subtitle>Smaller text</Text>
-<Text block>Text on its own line</Text>
-```