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

package/src/data-display/avatar.md

@@ -2,21 +2,27 @@
 
 Displays an image or text in a circular container.
 
-## Base
-[Windstorm Avatar](https://axel669.github.io/lib.windstorm/#components-avatar)
-
 ## Props
-All [windstorm functions](https://axel669.github.io/lib.windstorm/#css-shorthands)
-are supported.
-
-- ### 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.
+
+### 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

package/src/data-display/badge.md

@@ -1,17 +1,17 @@
 # Badge
 Adds a small badge over the upper-right corner of some content.
 
-## Base
-[Windstorm Badge](https://axel669.github.io/lib.windstorm/#components-badge)
-
 ## Props
-All [windstorm functions](https://axel669.github.io/lib.windstorm/#css-shorthands)
-are supported.
 
-- ### color `string`
-    Sets `$color`
-- ### text `string`
-    The badge text.
+### color
+`string`
+
+Sets `$color`
+
+### text
+`string`
+
+The badge text.
 
 ## Example
 ```svelte

package/src/data-display/chip.md

@@ -1,20 +1,24 @@
 # Chip
+
 Shows a small piece of information that is separate from the surrounding
 info and optionally allows interaction.
 
-## Base
-[Windstorm Chip](https://axel669.github.io/lib.windstorm/#components-chip)
-
 ## Props
-All [windstorm functions](https://axel669.github.io/lib.windstorm/#css-shorthands)
-are supported.
-
-- ### 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.
+
+### 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

package/src/data-display/details.md

@@ -0,0 +1,3 @@
+# Details
+
+Still working on this one.

package/src/data-display/popover.md

@@ -3,13 +3,6 @@
 The Popover component is for displaying content over something without it
 being modal (you can interact with things under it still).
 
-## Base
-[Windstorm Popover](https://axel669.github.io/lib.windstorm/#components-popover)
-
-## Props
-All [windstorm functions](https://axel669.github.io/lib.windstorm/#css-shorthands)
-are supported.
-
 ## Variables
 - show
 - hide
@@ -17,13 +10,16 @@ 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.
 
-## Usage
+> Beacuse the hide function is given to a named slot, the `let:hide` declaration
+> needs to be on the slotted element.
+
+## Example
 ```svelte
-<Popover let:show let:hide>
+<Popover let:show>
     <Button on:click={show}>
         Show
     </Button>
-    <div ws-x="inset-x[0px] y[0px] h[100px] bg[teal]" slot="content">
+    <div ws-x="inset-x[0px] y[0px] h[100px] bg[teal]" slot="content" let:hide>
         <Button on:click={hide}>
             Hide
         </Button>

package/src/data-display/progress.md

@@ -2,28 +2,40 @@
 
 Displays progress bar with an optional label.
 
-## Base
-[Windstorm Progress Bar](https://axel669.github.io/lib.windstorm/#components-progress-bar)
-
 ## Props
-All [windstorm functions](https://axel669.github.io/lib.windstorm/#css-shorthands)
-are supported.
-
-- ### 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.
-
-## Usage
+
+### 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
 <Progress color="primary" value={0.1} />
 <Progress color="primary" value={5} max={10} />

package/src/data-display/table.md

@@ -1,29 +1,7 @@
 # Table
 
-Displays data using html tables with some nice styling. This version of the
-table is fairly simple and intended for basic data displays. For more
-complex data displays the DataTable should be used.
-
-## Base
-[Windstorm Table](https://axel669.github.io/lib.windstorm/#components-table)
+Under construction.
 
-## Props
-All [windstorm functions](https://axel669.github.io/lib.windstorm/#css-shorthands)
-are supported.
-
-- ### color `string`
-    Sets `$color`
-- ### cols `Array`
-    The columns that should be displayed. Should be in the format of
-    `{ label, width? }`
-- ### data `Array[Array]`
-    The data to display. The data should be an array where each item is a
-    row, and each item in the row is the value for a column.
-- ### cellWSX `function`
-    If given, this function will be called for each cell, and should return
-    an object that will be passed to the `wsx` action for each <td>
-    generated. The function is passed `(cellValue, rowNum, colNum)`.
-- ### rowWSX `function`
-    If given, this function will be called for each row, and should return
-    an object that will be passed to the `wsx` action for each <tr>
-    generated. The function is passed `(rowValue, rowNum)`.
+<!-- Displays data using html tables with some nice styling. This version of the
+table is fairly simple and intended for basic data displays. For more
+complex data displays the DataTable should be used. -->

package/src/data-display/tooltip.md

@@ -2,19 +2,19 @@
 
 Displays a tooltip above (or below) some content when it's hovered.
 
-## Base
-[Windstorm Tooltip](https://axel669.github.io/lib.windstorm/#components-tooltip)
-
 ## Props
-All [windstorm functions](https://axel669.github.io/lib.windstorm/#css-shorthands)
-are supported.
 
-- ### text `string`
-    The text to display in the tooltip.
-- ### bottom `bool`
-    If true, the tooltip will be shown under the content instead of over.
+### text
+`string`
+
+The text to display in the tooltip.
+
+### bottom
+`bool`
+
+If true, the tooltip will be shown under the content instead of over.
 
-## Usage
+## Example
 ```svelte
 <Tooltip text="This is a button">
     <Button>Do Thing</Button>

package/src/dialogs/alert.md

@@ -0,0 +1,3 @@
+# Alert Dialog
+
+Under construction.

package/src/dialogs/confirm.md

@@ -0,0 +1,3 @@
+# Confirm Dialog
+
+Under construction.

package/src/functions.md

@@ -8,7 +8,7 @@ library.
 Wraps a function for currying as an event handler. The curried function does
 not pass the event into final function call.
 
-### Usage
+### Example
 ```svelte
 <script>
     const clicked = handler$(
@@ -31,7 +31,7 @@ not pass the event into final function call.
 Wraps a function for currying as an event handler. Unlike the `handler$`
 function, the event is passed to the curried function.
 
-### Usage
+### Example
 
 ```svelte
 <script>
@@ -60,7 +60,7 @@ directly.
 - any string value will insert the wind function with the arguments formatted
     for the parser (replace spaces and underscores as needed).
 
-### Usage
+### Example
 ```svelte
 <script>
     // will generate ws-x="grid gr-col[1fr 1fr]"

package/src/index.mjs

@@ -41,6 +41,9 @@ export { default as Confirm } from "./dialogs/confirm.svelte"
 export { default as EntryButton } from "./composed/entry-button.svelte"
 export { default as Toast } from "./composed/toast.svelte"
 
+export { default as AsyncButton } from "./async/button.svelte"
+export { default as LoadZone } from "./async/load-zone.svelte"
+
 import DataTable from "./composed/data-table.svelte"
 import th from "./composed/data-table/th.svelte"
 DataTable.th = th

package/src/info/icon.md

@@ -3,17 +3,14 @@
 Displays a [Tabler Icon](https://tabler-icons.io/) and some optional text.
 The icon will appear at the beginning of the text.
 
-## Base
-[Windstorm Icon](https://axel669.github.io/lib.windstorm/#components-icon)
-
 ## Props
-All [windstorm functions](https://axel669.github.io/lib.windstorm/#css-shorthands)
-are supported.
 
-- ### name `string`
-    The name of the icon. Use the tabler icon class name without the "ti-".
+### name
+`string`
+
+The name of the icon. Use the tabler icon class name without the "ti-".
 
-## Usage
+## Example
 ```svelte
 <Icon name="hexagon" />
 <Icon name="hexagons">Are the bestagons</Icon>

package/src/info/notification.md

@@ -8,17 +8,12 @@ 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.
 
-## Base
-[Windstorm Notification](https://axel669.github.io/lib.windstorm/#components-notification)
-
 ## Props
-All [windstorm functions](https://axel669.github.io/lib.windstorm/#css-shorthands)
-are supported.
 
-- ### color
-    Sets `$color` and uses the fill style for coloration.
+### color
+Sets `$color` and uses the fill style for coloration.
 
-## Usage
+## Example
 ```svelte
 <Notification>
     <Icon name="info-hexagon">

package/src/info/titlebar.md

@@ -4,27 +4,30 @@ 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.
 
-## Base
-[Windstorm Titlebar](https://axel669.github.io/lib.windstorm/#components-titlebar)
-
 ## Props
-All [windstorm functions](https://axel669.github.io/lib.windstorm/#css-shorthands)
-are supported.
 
-- ### color `string`
-    Sets `$color`
-- ### fill `bool`
-    Sets `$fill`
+### color
+`string`
+
+Sets `$color`
+
+### fill
+`bool`
+
+Sets `$fill`
 
 ## Slots
-- title\\
-    The center of the titlebar, where the text usually goes
-- menu\\
-    The area on the left of the titlebar (where drawer menus tend to open)
-- action\\
-    The area on the right of the titlebar
-
-## Usage
+
+### title
+The center of the titlebar, where the text usually goes
+
+### 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
 <Titlebar color="primary" fill>
     <Text title slot="title">

package/src/info/toaster.md

@@ -3,17 +3,15 @@
 The Toaster component is used for building popup notifications along the
 edges of the window.
 
-## Base
-[Windstorm Toaster](https://axel669.github.io/lib.windstorm/#components-toaster)
-
 ## Props
-All [windstorm functions](https://axel669.github.io/lib.windstorm/#css-shorthands)
-are supported, but probably not very meaningful for this container.
 
-- ### position
-    Sets position of the toaster. See the windstorm base for values.
+### position
+Sets position of the toaster. See the
+[windstorm base](https://windstorm.axel669.net/lib/css/component/toaster)
+for values.
 
-## Usage
+## Example
+```svelte
 <Toaster position="$tc">
     <Notification>
         <Icon name="info">
@@ -21,3 +19,4 @@ are supported, but probably not very meaningful for this container.
         </Icon>
     </Notification>
 </Toaster>
+```

package/src/layout/dialog.md

@@ -8,9 +8,10 @@ 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
 <Dialog>

package/src/layout/drawer.md

@@ -8,23 +8,37 @@ 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
 <Drawer>

package/src/layout/flex.md

@@ -2,25 +2,34 @@
 
 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
 <Flex cross="stretch">
     <Text>Content</Text>

package/src/layout/grid.md

@@ -9,24 +9,45 @@ 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">
     <Text>Content</Text>

package/src/layout/modal.md

@@ -19,17 +19,29 @@ 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>
+    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>
 ```