@axel669/zephyr 0.2.0-beta.0 → 0.2.0-beta.2

package/src/layout/dialog.md

@@ -8,11 +8,16 @@ 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
-See the Paper component props.
+This component just wraps a [Paper](./paper.md) component with some extra parts,
+and passes the props to a `Paper`.
 
-## Usage
+## Example
 `cool-dialog.svelte`
 ```svelte
+<script>
+    import { Dialog, Titlebar, Text } from "@axel669/zephyr"
+</script>
+
 <Dialog>
     <Titlebar slot="header">
         <Text slot="title" title>
@@ -26,6 +31,11 @@ See the Paper component props.
 
 `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

package/src/layout/drawer.md

@@ -8,25 +8,43 @@ 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
-
-## Usage
+
+### 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>
@@ -40,6 +58,11 @@ conjunction with the Modal component to be controlled on screen.
 
 `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

package/src/layout/flex.md

@@ -2,26 +2,39 @@
 
 Container that uses flex layout by default with some nice default values.
 
-## Base
-[Windstorm Flex](https://axel669.github.io/lib.windstorm/#components-flex)
-
 ## Props
-All [windstorm functions](https://axel669.github.io/lib.windstorm/#css-shorthands)
-are supported.
-
-- ### direction `string`
-    Sets `fl-dir`
-- ### pad `string`
-    Sets `p`
-- ### gap `string`
-    Sets `gap`
-- ### cross `string`
-    Sets `fl-cr-a`, default is `"stretch"`
-- ### main `string`
-    Sets `fl-m-a`, default is `"start"`
-
-## Usage
+
+### 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>

package/src/layout/grid.md

@@ -9,26 +9,51 @@ Container that uses grid layout by default with some nice default values.
 All [windstorm functions](https://axel669.github.io/lib.windstorm/#css-shorthands)
 are supported.
 
-- ### direction `string`
-    Sets `gr-dir`
-- ### pad `string`
-    Sets `p`
-- ### gap `string`
-    Sets `gap`
-- ### cols `string|Array`
-    Sets `gr-col`. Accepts either an array of values that are joined by " "
-    or a regular string value.
-- ### rows `string|Array`
-    Sets `gr-row`. Accepts either an array of values that are joined by " "
-    or a regular string value.
-- ### autoCol `string`
-    Sets `gr-acol`
-- ### autoRow `string`
-    Sets `gr-arow`
-
-## Usage
+
+### 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
-<Grid cross="stretch">
+<script>
+    import { Grid, Text } from "@axel669/zephyr"
+</script>
+
+<Grid cols="1fr 1fr">
     <Text>Content</Text>
     <Text>More content</Text>
     <Text>Event more content</Text>

package/src/layout/modal.md

@@ -19,17 +19,32 @@ closes in response to that event.
 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
+
+### component
+`Component`
+
+The component to display when `show` is called
 
 ## Functions
-- ### `show(props?) -> Promise`
-    Shows the given component and passes any props provided.
 
-## Usage
+### `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={() => dialog.show({ a: 10, b: 12 })}>
+<Button on:click={dialogThing}>
     Open Dialog
 </Button>
 ```

package/src/layout/paper.md

@@ -6,44 +6,61 @@ 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.
 
-## Base
-[Windstorm Paper](https://axel669.github.io/lib.windstorm/#components-paper)
-
 ## Props
-All [windstorm functions](https://axel669.github.io/lib.windstorm/#css-shorthands)
-are supported.
-
-- ### 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
+
+### 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)
-
-## Usage
+
+### 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>

package/src/layout/screen.md

@@ -7,19 +7,21 @@ 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.
 
-## Base
-[Windstorm Screen](https://axel669.github.io/lib.windstorm/#components-screen)
-
 ## Props
-All [windstorm functions](https://axel669.github.io/lib.windstorm/#css-shorthands)
-are supported, but they probably won't help much with this component.
 
-- ### width `string`
-    The width of the screen before stack-based padding is applied
+### width
+`string`
+
+The width of the screen before stack-based padding is applied
 
-## Usage
-`cool-screen.svelte`
+## 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

package/src/spinner/spinners.md

@@ -0,0 +1,3 @@
+# Spinners
+
+Under construction.

package/src/text.md

@@ -4,16 +4,28 @@ 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`
-
-## Usage
+
+### 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>