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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@axel669/zephyr",
-  "version": "0.2.0-beta.1",
+  "version": "0.2.0-beta.2",
   "description": "",
   "main": "src/index.mjs",
   "type": "module",
@@ -15,7 +15,7 @@
     "@axel669/windstorm": "0.2.3"
   },
   "devDependencies": {
-    "@axel669/ipsen": "0.4.0-beta.6",
+    "@axel669/ipsen": "0.4.0-beta.7",
     "@axel669/rollup-html-input": "^0.1.2",
     "@rollup/plugin-node-resolve": "^15.0.2",
     "@rollup/plugin-terser": "^0.4.0",

package/readme.md

@@ -28,20 +28,28 @@ Windstorm theme is usable, including custom ones.
 ```svelte
 <script>
     //  individual import for tree shaking
-    import { Button } from "@axel669/zephyr"
+    import {
+        Button,
+        wsx
+    } from "@axel669/zephyr"
 
     //  bring the whole thing to keep it simple
     import * as Wind from "@axel669/zephyr"
+
+    const theme = "dark"
+    const handler = () => {
+        console.log("button clicked!")
+    }
 </script>
 
 <!-- the wsx action can be used to setup the ws-x needed for the body -->
 <svelte:body use:wsx={{"$theme": theme, "$app": true}} />
 
-<Button on:click={stuff}>
+<Button on:click={handler}>
     I'm a button!
 </Button>
 
-<Wind.Button on:click={stuff}>
+<Wind.Button on:click={handler}>
     I'm also button!
 </Wind.Button>
 ```

package/src/composed/data-table.md

@@ -1,3 +1,5 @@
+NOTE: include Th as its own component
+
 # DataTable
 
 The DataTable is a more advanced way to show data on screen. Underneath is

package/src/control/button.md

@@ -25,6 +25,10 @@ is true, or `$flat` if neither is true.
 
 ## Example
 ```svelte
+<script>
+    import { Button } from "@axel669/zephyr"
+</script>
+
 <Button on:click={action}>
     Flat Button
 </Button>

package/src/control/label.md

@@ -38,6 +38,10 @@ Sets the button variant of the label when `button` is `true`.
 ## Example
 
 ```svelte
+<script>
+    import { Label } from "@axel669/zephyr"
+</script>
+
 <Label for="checkbox">Toggle Checkbox</Label>
 <Label for="checkbox" button color="primary" fill>
     Open Menu

package/src/control/link.md

@@ -37,6 +37,10 @@ is true, or `$flat` if neither is true.
 
 ## Example
 ```svelte
+<script>
+    import { Link } from "@axel669/zephyr"
+</script>
+
 <Link color="primary" href="test" target="_blank">
     Test
 </Link>

package/src/control/link.svelte

@@ -16,7 +16,7 @@
     $: type = variant({ fill, outline, flat })
 
     $: wind = {
-        "@button": button,
+        "$button": button,
         [type]: true,
         "$color": color,
         ...$$restProps

package/src/control/radio.md

@@ -44,6 +44,8 @@ unique in the list.
 ## Example
 ```svelte
 <script>
+    import { Radio, Grid } from "@axel669/zephyr"
+
     const options = [
         { label: "first", value: 1 },
         { label: "second", value: [] },
@@ -52,5 +54,5 @@ unique in the list.
 </script>
 
 <Radio {options} bind:value />
-<Radio {options} bind:value={other} layout={Grid} gr-col="1fr 1fr" />
+<Radio {options} bind:value={other} layout={Grid} gr.cols="1fr 1fr" />
 ```

package/src/control/select.md

@@ -49,6 +49,8 @@ Labels and group names should be strings, but values can be any type.
 ## Example
 ```svelte
 <script>
+    import { Select } from "@axel669/zephyr"
+
     // Results in:
     // <option>first</option>
     // <optgroup label="Not Numbers">

package/src/control/tabs.md

@@ -34,6 +34,8 @@ changes and set to control which tab is selected.
 ## Example
 ```svelte
 <script>
+    import { Tabs } from "@axel669/zephyr"
+
     const options = [
         { label: "Left", value: "left" },
         { label: "Right", value: 2 },

package/src/control/toggle.md

@@ -48,6 +48,12 @@ 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

@@ -26,6 +26,10 @@ 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

@@ -15,10 +15,16 @@ 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

@@ -25,6 +25,10 @@ If true, sets $fill on the chip. If false $outline is set instead.
 
 ## 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/popover.md

@@ -15,6 +15,10 @@ content without needing to bind to the parent.
 
 ## Example
 ```svelte
+<script>
+    import { Popover, Button } from "@axel669/zephyr"
+</script>
+
 <Popover let:show>
     <Button on:click={show}>
         Show

package/src/data-display/progress.md

@@ -37,6 +37,10 @@ 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/tooltip.md

@@ -16,6 +16,10 @@ 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/functions.md

@@ -11,6 +11,8 @@ not pass the event into final function call.
 ### Example
 ```svelte
 <script>
+    import { handler$ } from "@axel669/zephyr"
+
     const clicked = handler$(
         (buttonName) => console.log(buttonName)
     )
@@ -35,6 +37,8 @@ function, the event is passed to the curried function.
 
 ```svelte
 <script>
+    import { eventHandler$ } from "@axel669/zephyr"
+
     const clicked = eventHandler$(
         (event, buttonName) => console.log(event, buttonName)
     )
@@ -63,6 +67,8 @@ directly.
 ### 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,19 +37,14 @@ 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"
 
 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
-
-export { DataTable, th }
-// export { default as DataTable } from "./composed/data-table.svelte"
-
 export { default as wsx } from "./wsx.mjs"
 
 

package/src/info/icon.md

@@ -12,6 +12,10 @@ 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

@@ -15,6 +15,10 @@ 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

package/src/info/titlebar.md

@@ -19,7 +19,9 @@ Sets `$fill`
 ## Slots
 
 ### title
-The center of the titlebar, where the text usually goes
+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)
@@ -29,12 +31,16 @@ 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>
@@ -43,7 +49,27 @@ The area on the right of the titlebar
     <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

@@ -12,6 +12,10 @@ for values.
 
 ## Example
 ```svelte
+<script>
+    import { Toaster, Notification, Icon } from "@axel669/zephyr"
+</script>
+
 <Toaster position="$tc">
     <Notification>
         <Icon name="info">

package/src/layout/dialog.md

@@ -14,6 +14,10 @@ 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>
@@ -27,6 +31,11 @@ and passes the props to a `Paper`.
 
 `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

@@ -41,6 +41,10 @@ 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>
@@ -54,6 +58,11 @@ the top of the 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

@@ -31,6 +31,10 @@ 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

@@ -49,7 +49,11 @@ 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

@@ -33,6 +33,9 @@ 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 })

package/src/layout/paper.md

@@ -57,6 +57,10 @@ 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

@@ -15,8 +15,13 @@ required to get stacking screens to have the effect.
 The width of the screen before stack-based padding is applied
 
 ## Example
-`cool-screen.svelte`
 ```svelte
+<script>
+    import { Scren, Button, Paper } from "@axel669/zephyr"
+
+    export let close
+</script>
+
 <Screen width="70%">
     <Paper>
         This screen is pretty cool I swear