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

package/src/control/toggle.md

@@ -2,35 +2,58 @@
 
 The Toggle component is used to display checkboxes and switches.
 
-## Base
-[Windstorm Labeled Toggle](https://axel669.github.io/lib.windstorm/#components-labeled-toggle)
-using a checkbox input
-
 ## Props
-All [windstorm functions](https://axel669.github.io/lib.windstorm/#css-shorthands)
-are supported.
-
-- ### color `string`
-    Sets `$color`
-- ### checkbox `bool`
-    If true, the toggle is displayed as a checkbox. Default is false
-    (shown as a switch)
-- ### checked `bool`
-    Controls if the toggle is checked or not. Can be bound
-- ### group
-    Used for binding, see the Svelte bind:group for details
-- ### label `string`
-    The text to use for the label
-- ### flat `bool`
-    Sets `$flat`
-- ### reverse `bool`
-    If true, the input being toggled will be on the left instead of the
-    right. Default is false (label is on the left)
-- ### value
-    Only used in conjunction with bind:group, see Svelte docs
-
-## Usage
+
+### color
+`string`
+
+Sets `$color`
+
+### checkbox
+`bool`
+
+If true, the toggle is displayed as a checkbox. Default is false
+(shown as a switch)
+
+### checked
+`bool`
+
+Controls if the toggle is checked or not. Can be bound.
+
+### group
+Used for binding, see the
+[Svelte bind:group](https://svelte.dev/docs/element-directives#bind-group)
+for details.
+
+### label
+`string`
+
+The text to use for the label
+
+### flat
+`bool`
+
+Sets `$flat`
+
+### reverse
+`bool`
+
+If true, the input being toggled will be on the left instead of the
+right. Default is false (label is on the left)
+
+### value
+`any`
+
+Only used in conjunction with bind:group, see Svelte docs
+
+## Example
 ```svelte
+<script>
+    import { Toggle } from "@axel669/zephyr"
+
+    let checked = false
+</script>
+
 <Toggle label="Active" bind:checked />
 <Toggle label="Active" checkbox bind:checked />
 <Toggle label="Active" checkbox reverse bind:checked />

package/src/data-display/avatar.md

@@ -2,24 +2,34 @@
 
 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
+<script>
+    import { Avatar } from "@axel669/zephyr"
+</script>
+
 <Avatar image="url" />
 <Avatar image="url" alt="text" />
 <Avatar text="Hi" color="primary" />

package/src/data-display/badge.md

@@ -1,24 +1,30 @@
 # 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
-<Badge text="100">
+<script>
+    import { Badge } from "@axel669/zephyr"
+
+    let count = 10
+</script>
+
+<Badge text={count}>
     Unread Messages
 </Badge>
 <Badge text="1k+" color="warning">
-    <button>Clickable Content</button>
+    <button on:click={() => count += 1}>Clickable Content</button>
 </Badge>
 ```

package/src/data-display/chip.md

@@ -1,26 +1,34 @@
 # 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
 
 ## Example
 ```svelte
+<script>
+    import { Chip } from "@axel669/zephyr"
+</script>
+
 Emails:
 <Chip clickable>admin@site.com</Chip>
 <Chip clickable color="warning">weirdge@site.com</Chip>

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,20 @@ 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>
+<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">
+    <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,29 +2,45 @@
 
 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
+<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,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,20 +2,24 @@
 
 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`
 
-## Usage
+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>

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,9 +8,11 @@ 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>
+    import { handler$ } from "@axel669/zephyr"
+
     const clicked = handler$(
         (buttonName) => console.log(buttonName)
     )
@@ -31,10 +33,12 @@ 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>
+    import { eventHandler$ } from "@axel669/zephyr"
+
     const clicked = eventHandler$(
         (event, buttonName) => console.log(event, buttonName)
     )
@@ -60,9 +64,11 @@ 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>
+    import { wsx } from "@axel669/zephyr"
+
     // will generate ws-x="grid gr-col[1fr 1fr]"
     const wsxProps = {
         grid: true,

package/src/index.mjs

@@ -29,7 +29,6 @@ export { default as Modal } from "./layout/modal.svelte"
 export { default as Paper } from "./layout/paper.svelte"
 export { default as Screen } from "./layout/screen.svelte"
 
-// export { default as InlineDialog } from "./inline-dialog.svelte"
 export { default as Text } from "./text.svelte"
 
 export { default as CircleSpinner } from "./spinner/circle-spinner.svelte"
@@ -38,15 +37,13 @@ export { default as HexagonSpinner } from "./spinner/hexagon-spinner.svelte"
 export { default as Alert } from "./dialogs/alert.svelte"
 export { default as Confirm } from "./dialogs/confirm.svelte"
 
+export { default as DataTable } from "./composed/data-table.svelte"
+export { default as Th } from "./composed/data-table/th.svelte"
 export { default as EntryButton } from "./composed/entry-button.svelte"
 export { default as Toast } from "./composed/toast.svelte"
 
-import DataTable from "./composed/data-table.svelte"
-import th from "./composed/data-table/th.svelte"
-DataTable.th = th
-
-export { DataTable, th }
-// export { default as DataTable } from "./composed/data-table.svelte"
+export { default as AsyncButton } from "./async/button.svelte"
+export { default as LoadZone } from "./async/load-zone.svelte"
 
 export { default as wsx } from "./wsx.mjs"
 

package/src/info/icon.md

@@ -3,18 +3,19 @@
 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
+<script>
+    import { Icon } from "@axel669/zephyr"
+</script>
+
 <Icon name="hexagon" />
 <Icon name="hexagons">Are the bestagons</Icon>
 ```

package/src/info/notification.md

@@ -8,18 +8,17 @@ 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
+<script>
+    import { Notification, Button, Icon } from "@axel669/zephyr"
+</script>
+
 <Notification>
     <Icon name="info-hexagon">
         Some kind of information

package/src/info/titlebar.md

@@ -4,34 +4,43 @@ 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. 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" color={false}>
+    <Button slot="menu">
         <Icon name="menu" />
     </Button>
 </Titlebar>
@@ -40,7 +49,27 @@ are supported.
     <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

@@ -3,17 +3,19 @@
 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.
+
+## Example
+```svelte
+<script>
+    import { Toaster, Notification, Icon } from "@axel669/zephyr"
+</script>
 
-## Usage
 <Toaster position="$tc">
     <Notification>
         <Icon name="info">
@@ -21,3 +23,4 @@ are supported, but probably not very meaningful for this container.
         </Icon>
     </Notification>
 </Toaster>
+```