@axel669/zephyr 0.1.2 → 0.1.16

package/package.json

@@ -1,30 +1,30 @@
-{
-  "name": "@axel669/zephyr",
-  "version": "0.1.2",
-  "description": "",
-  "main": "src/index.mjs",
-  "type": "module",
-  "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1",
-    "demo": "rollup -c test/rollup.config.mjs"
-  },
-  "keywords": [],
-  "author": "",
-  "license": "MIT",
-  "dependencies": {
-    "@axel669/windstorm": "0.1.12",
-    "@labyrinthos/asuid": "^0.2.0",
-    "svelte": "^3.58.0"
-  },
-  "devDependencies": {
-    "@axel669/ipsen": "^0.3.1",
-    "@axel669/rollup-html-input": "^0.1.2",
-    "@rollup/plugin-node-resolve": "^15.0.2",
-    "@rollup/plugin-terser": "^0.4.0",
-    "rollup": "^3.20.2",
-    "rollup-plugin-svelte": "^7.1.4"
-  },
-  "files": [
-    "src/"
-  ]
-}
+{
+  "name": "@axel669/zephyr",
+  "version": "0.1.16",
+  "description": "",
+  "main": "src/index.mjs",
+  "type": "module",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "demo": "rollup -c test/rollup.config.mjs"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "MIT",
+  "dependencies": {
+    "@axel669/windstorm": "0.1.16",
+    "@labyrinthos/asuid": "^0.2.0",
+    "svelte": "^3.58.0"
+  },
+  "devDependencies": {
+    "@axel669/ipsen": "^0.3.1",
+    "@axel669/rollup-html-input": "^0.1.2",
+    "@rollup/plugin-node-resolve": "^15.0.2",
+    "@rollup/plugin-terser": "^0.4.0",
+    "rollup": "^3.20.2",
+    "rollup-plugin-svelte": "^7.1.4"
+  },
+  "files": [
+    "src/"
+  ]
+}

package/src/button.svelte

@@ -23,9 +23,9 @@
     - ### label `string`
         If true, the button will be displayed in the DOM using a `<label>`
         element instead of a `<button>`.
-    - ### variant `string`
-        Sets the button type to `@<variant>` (ex: "flat" -> `@flat`). Default
-        variant is "flat". Currently supports "flat", "fill", "outline".
+    - ### fill / outline `bool`
+        Sets the button type to @fill if fill is true, @outline if outline
+        is true, or @flat if neither is true.
 
     ## Events
     - click
@@ -35,10 +35,10 @@
     <Button on:click={action}>
         Flat Button
     </Button>
-    <Button on:click={action} variant="outline">
+    <Button on:click={action} outline>
         Outlined Button
     </Button>
-    <Button on:click={action} variant="fill" color="danger">
+    <Button on:click={action} fill color="danger">
         Filled Button
     </Button>
 
@@ -50,18 +50,23 @@
     */
 
     import wsx from "./wsx.mjs"
+    import variant from "./variant.mjs"
 
-    export let color = "default"
+    export let color = false
     export let compact = false
-    export let variant = "flat"
     export let disabled
 
+    export let fill = false
+    export let outline = false
+
     let _for = ""
     export { _for as for }
     export let label = false
 
+    $: type = variant({ fill, outline })
+
     $: wind = {
-        [`@${variant}`]: true,
+        [type]: true,
         $color: color,
         $compact: compact,
         "@button": label,

package/src/chip.svelte

@@ -17,9 +17,8 @@
         Sets `$color`
     - ### clickable `bool`
         If true, the chip will have the button ripple effect when clicked.
-    - ### variant `string`
-        Sets the chip type to `@<variant>` (ex: "fill" -> `@fill`). Default
-        variant is "outline". Currently supports "fill", "outline".
+    - ### fill `bool`
+        If true, sets @fill on the chip. If false @outline is set instead.
 
     ## Events
     - click
@@ -29,18 +28,22 @@
     Emails:
     <Chip clickable>admin@site.com</Chip>
     <Chip clickable color="warning">weirdge@site.com</Chip>
-    <Chip color="primary">required@site.io</Chip>
+    <Chip color="primary" fill>required@site.io</Chip>
     ```
     */
 
     import wsx from "./wsx.mjs"
+    import variant from "./variant.mjs"
 
     export let color = "default"
     export let clickable = false
-    export let variant = "outline"
+
+    export let fill = false
+
+    $: type = variant({ fill }, "@outline")
 
     $: wind = {
-        [`@${variant}`]: true,
+        [type]: true,
         $color: color,
         $click: clickable,
         ...$$restProps

package/src/details.svelte

@@ -0,0 +1,23 @@
+<script>
+    import wsx from "./wsx.mjs"
+
+    export let label
+    export let outline
+    export let color = "default"
+    export let open = false
+
+    $: wind = {
+        $color: color,
+        "@outline": outline,
+        ...$$restProps,
+    }
+</script>
+
+<details use:wsx={wind} bind:open>
+    <summary>
+        <slot name="label">
+            {label}
+        </slot>
+    </summary>
+    <slot />
+</details>

package/src/dialog.svelte

@@ -44,7 +44,8 @@
     import Paper from "./paper.svelte"
 </script>
 
-<wind-wrapper transition:fade={{ duration: 200 }} ws-x="@dialog grid">
+<!-- svelte-ignore a11y-click-events-have-key-events -->
+<wind-wrapper transition:fade={{ duration: 200 }} ws-x="@dialog grid" on:click|stopPropagation>
     <Paper {...$$props}>
         <slot name="header" slot="header" />
         <slot />

package/src/flex.svelte

@@ -20,9 +20,9 @@
     - ### gap `string`
         Sets `gap`
     - ### cross `string`
-        Sets `fl-cr-a`
+        Sets `fl-cr-a`, default is `"stretch"`
     - ### main `string`
-        Sets `fl-m-a`
+        Sets `fl-m-a`, default is `"start"`
 
     ## Usage
     ```svelte
@@ -39,7 +39,7 @@
     export let direction = false
     export let pad = false
     export let gap = false
-    export let cross = "start"
+    export let cross = "stretch"
     export let main = "start"
 
     $: wind = {

package/src/index.mjs

@@ -49,6 +49,7 @@ export { default as Avatar } from "./avatar.svelte"
 export { default as Badge } from "./badge.svelte"
 export { default as Button } from "./button.svelte"
 export { default as Chip } from "./chip.svelte"
+export { default as Details } from "./details.svelte"
 export { default as Dialog } from "./dialog.svelte"
 export { default as Drawer } from "./drawer.svelte"
 export { default as Flex } from "./flex.svelte"

package/src/link.svelte

@@ -24,34 +24,39 @@
         Sets the rel attribute.
     - ### target `string`
         Sets the target attribute
-    - ### variant `string`
-        Sets the link-button type to `@<variant>` (ex: "flat" -> `@flat`).
-        Default variant is "flat". Currently supports "flat", "fill", "outline".
+    - ### fill / outline `bool`
+        Sets the link-button type to @fill if fill is true, @outline if outline
+        is true, or @flat if neither is true.
 
     ## Usage
     ```svelte
     <Link color="primary" href="test" target="_blank">
         Test
     </Link>
-    <Link color="primary" href="logout" button variant="outline">
+    <Link color="primary" href="logout" button outline>
         Logout
     </Link>
     ```
     */
 
     import wsx from "./wsx.mjs"
+    import variant from "./variant.mjs"
 
     export let button = false
-    export let variant = "flat"
-    export let color = "default"
+    export let color = false
 
     export let href = ""
     export let rel = "noreferrer"
     export let target = null
 
+    export let fill = false
+    export let outline = false
+
+    $: type = variant({ fill, outline })
+
     $: wind = {
         "@button": button,
-        [`@${variant}`]: true,
+        [type]: true,
         $color: color,
         ...$$restProps
     }

package/src/paper.svelte

@@ -27,8 +27,10 @@
         Sets the layout the card will use to display content. Default is Flex.
     - ### scrollable `bool`
         Sets `over[auto]` on the layout component
-    - ### lprops `Object`
-        An object with props to pass to 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
@@ -57,7 +59,7 @@
         <div>Content 2</div>
         <div>Content 3</div>
     </Paper>
-    <Paper>
+    <Paper l-pad="0px" m="4px">
         <Titlebar slot="header">
             <Text slot="title" title>
                 Some Screen
@@ -86,18 +88,29 @@
     export let card = false
     export let square = false
     export let layout = Flex
-    export let scrollable = false
-    export let lprops = {}
+    export let scrollable = true
+
+    $: props = Object.entries($$restProps).reduce(
+        (p, [key, value]) => {
+            const [target, name] =
+                (key.startsWith("l-") === true)
+                ? [ p.layout, key.slice(2) ]
+                : [ p.paper, key ]
+            target[name] = value
+            return p
+        },
+        { layout: {}, paper: {} }
+    )
 
-    $: props = {
+    $: layoutProps = {
         over: scrollable ? "auto" : false,
-        ...lprops,
+        ...props.layout,
     }
     $: wind = {
         $color: color,
         "@outline": card,
         r: square && "0px",
-        ...$$restProps
+        ...props.paper,
     }
 </script>
 
@@ -106,7 +119,7 @@
     {#if $$slots.content}
         <slot name="content" slot="content" />
     {:else}
-        <svelte:component this={layout} {...props} slot="content">
+        <svelte:component this={layout} {...layoutProps} slot="content">
             <slot />
         </svelte:component>
     {/if}

package/src/tabs.svelte

@@ -70,7 +70,8 @@
 <!-- svelte-ignore a11y-click-events-have-key-events -->
 <ws-tabs use:wsx={wind}>
     {#each options as tab, i}
-        <ws-tab tab-selected={index === i || null} on:click={set(tab.value)}>
+        <ws-tab use:wsx={{"$tab-selected": index === i}}
+        on:click={set(tab.value)}>
             {tab.label}
         </ws-tab>
     {/each}

package/src/toggle.svelte

@@ -25,8 +25,8 @@
         Used for binding, see the Svelte bind:group for details
     - ### label `string`
         The text to use for the label
-    - ### outline `bool`
-        Sets `$outline`
+    - ### 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)
@@ -38,7 +38,7 @@
     <Toggle label="Active" bind:checked />
     <Toggle label="Active" checkbox bind:checked />
     <Toggle label="Active" checkbox reverse bind:checked />
-    <Toggle label="Active" checkbox outline color="danger" bind:checked />
+    <Toggle label="Active" checkbox flat color="danger" bind:checked />
     ```
     */
 
@@ -47,7 +47,7 @@
     export let label = ""
     export let color = "default"
     export let checked = false
-    export let outline = false
+    export let flat = false
     export let value
     export let group = []
     export let checkbox = false
@@ -55,7 +55,7 @@
 
     $: container = {
         "@toggle": true,
-        "@outline": outline,
+        "@flat": flat,
         $color: color,
         ...$$restProps,
     }
@@ -81,7 +81,11 @@
 
 <label use:wsx={container}>
     {#if reverse !== true}
-        <span>{label}</span>
+        {#if $$slots.default}
+            <slot />
+        {:else}
+            <span>{label}</span>
+        {/if}
     {/if}
     <input type="checkbox" bind:checked use:wsx={input} />
     {#if reverse === true}

package/src/variant.mjs

@@ -0,0 +1,12 @@
+export default ({ flat, fill, outline }, def = "@flat") => {
+    if (outline === true) {
+        return "@outline"
+    }
+    if (fill === true) {
+        return "@fill"
+    }
+    if (flat === true) {
+        return "@flat"
+    }
+    return def
+}