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

package/src/composed/toast.md

@@ -1,36 +1,45 @@
 # Toast
-
-Displays toast notifications along the edge of the screen.
+Displays toast notifications along the edge of the screen. Unlike the Toaster
+component, this has functions for interacting with and generating toast
+messages, where the Toaster component has the programmer manage the content.
 
 ## Props
 See the Toaster component. The Toast component is wrapper around it that
 also controls the children being shown for convenience.
 
-- ### component
-    The component to use as a wrapper for the messages. Defaults to the
-    ToastMessage component.
+### component
+The component to use as a wrapper for the messages. Defaults to the
+ToastMessage component.
+
+### position
+The position to show modals in. Uses the same positions as the Windstorm
+toaster.
 
 ## Functions
-- ### show(duration, props)
-    Shows a toast notification that will disappear after the specified
-    duration (time in milliseconds). The props provided are passed to an
-    instance of the component specified in the props.
+
+### show(duration, props)
+Shows a toast notification that will disappear after the specified
+duration (time in milliseconds). The props provided are passed to an
+instance of the component specified in the props.
 
 ## Events
-- ### action(info)
-    Fired when a toast message is clicked. The info argument contains a
-    value property that is provided by the message component, and a copy
-    of the props passed to that instace.\\
-    For the default messages, the value will be `null` if no button was
-    clicked, and `true` if the action button was clicked. This allows
-    actions to be taken against interactions in the message without having
-    to bind all kinds of events or callbacks.
+
+### action
+Fired when a toast message is clicked. The info argument contains a
+value property that is provided by the message component, and a copy
+of the props passed to that instace.
+
+For the default messages, the value will be `null` if no button was
+clicked, and `true` if the action button was clicked. This allows
+actions to be taken against interactions in the message without having
+to bind all kinds of events or callbacks.
 
 ## Example
-```js
-let toast = null
-const notify = () => toast.show(5000, { message: "hi" })
-```
 ```svelte
+<script>
+    let toast = null
+    const notify = () => toast.show(5000, { message: "hi" })
+</script>
+
 <Toast bind:this={toast} position="bc" />
 ```

package/src/composed/toast.svelte

@@ -1,3 +1,5 @@
+<svelte:options immutable />
+
 <script context="module">
     const genID = () => `${Date.now()}:${Math.random().toString(16)}`
 
@@ -57,7 +59,7 @@
 
 <Toaster {position} {...$$restProps}>
     {#each items as {props, id} (id)}
-        <zephyr-toast-wrapper ws-x="grid" transition:fade={{duration: 200}}>
+        <zephyr-toast-wrapper ws-x="[grid]" transition:fade={{duration: 200}}>
             <svelte:component
             this={component}
             {...props}

package/src/control/button.svelte

@@ -1,3 +1,5 @@
+<svelte:options immutable />
+
 <script>
     import wsx from "../wsx.mjs"
     import variant from "../variant.mjs"

package/src/control/input.md

@@ -0,0 +1,87 @@
+# Input
+A component that wraps the text-based input tags. Includes optional outline,
+label, hint text, error showing, input validation, input transformation, and
+browser level autocomplete.
+
+## Props
+
+### autoCompleteOptions
+An array of options to show for auto complete. Uses the browser `datalist`
+element to create the auto complete.
+
+### color
+Sets the $color macro.
+
+### disabled
+Disables the input.
+
+### error
+If set, shows an error message under the input.
+
+### flat
+If true, the input will not have a border. Default is false (with a border).
+
+### hint
+Shows a hint under the label of the input.
+
+### type
+The type of input. Default to "text".
+
+### value
+The value of the input. Can be bound the same way a normal text input value is
+bound in Svelte.
+
+### transform
+A function to transform the value of the input automatically. Results are put
+into the tvalue prop.
+
+### tvalue
+The transformed value of the input. Binding should only be used to react to
+the value as it will be overriden while a user is typing into the input.
+
+### validate
+A function to determine if the value of the input is valid. Results are put into
+the `valid` prop. If a transform function is provided, the transformed value
+is given to the validation function.
+
+### valid
+The result of the validation function. Binding should only be used to react to
+the value.
+
+## Instance Functions
+
+### focus
+Focuses the input.
+
+## Slots
+
+### end
+Puts an element at the end of the input.
+
+### start
+Puts an element at the start of the input.
+
+## Example
+
+```svelte
+<script>
+    import { Input } from "@axel669/zephyr"
+
+    let name = ""
+    let ageText = ""
+    let age = 0
+    let ageValid = false
+
+    $: ageError = ageValid ? "Invalid Age" : null
+</script>
+
+<Input bind:value={name} label="Name" />
+<Input
+    bind:value={ageText}
+    transform={v => parseInt(v)}
+    bind:tvalue={age}
+    validate={age => age > 0}
+    bind:valid={ageValid}
+    error={ageError}
+/>
+```

package/src/control/input.svelte

@@ -1,3 +1,5 @@
+<svelte:options immutable />
+
 <script context="module">
     const parseNumeric = (value) => {
         if (value === "") {
@@ -21,7 +23,7 @@
 
     export let flat = false
     export let label
-    export let color = "default"
+    export let color = "@default"
     export let error = null
     export let hint = null
     export let disabled
@@ -70,7 +72,7 @@
 
     $: wind = {
         "$flat": flat,
-        "$control": true,
+        "@control": true,
         "$color": color,
         ...props.wind,
     }
@@ -80,7 +82,7 @@
 
 <label use:wsx={wind} ws-error={error}>
     {#if label}
-        <span ws-x="$text" ws-hint={hint}>{label}</span>
+        <span use:wsx={{ slot: "label-text" }} ws-hint={hint}>{label}</span>
     {/if}
     <svelte:element
         this={tag}

package/src/control/label.md

@@ -1,5 +1,4 @@
 # Label
-
 The label component is a wrapper around a `<label>` element.
 
 ## Props

package/src/control/label.svelte

@@ -1,3 +1,5 @@
+<svelte:options immutable />
+
 <script>
     import wsx from "../wsx.mjs"
     import variant from "../variant.mjs"
@@ -18,7 +20,7 @@
     $: baseStyles =
         (button === true)
         ? {
-            $button: true,
+            "@button": true,
             [type]: true,
             "$color": color,
             $compact: compact,

package/src/control/link.svelte

@@ -1,3 +1,5 @@
+<svelte:options immutable />
+
 <script>
     import wsx from "../wsx.mjs"
     import variant from "../variant.mjs"
@@ -13,16 +15,18 @@
     export let outline = false
     export let flat = false
 
+    export let disabled = null
+
     $: type = variant({ fill, outline, flat })
 
     $: wind = {
-        "$button": button,
+        "@button": button,
         [type]: true,
         "$color": color,
         ...$$restProps
     }
 </script>
 
-<a {href} {target} {rel} use:wsx={wind}>
+<a {href} {target} {rel} {disabled} use:wsx={wind} on:click>
     <slot />
 </a>

package/src/control/radio.svelte

@@ -1,3 +1,5 @@
+<svelte:options immutable />
+
 <script>
     import wsx from "../wsx.mjs"
     import { handler$ } from "../handler$.mjs"
@@ -18,7 +20,7 @@
 
 <svelte:component this={layout} {...$$restProps}>
     {#each options as {value, label, disabled, ...wind}, index (value)}
-        <label use:wsx={{"$toggle": true, ...wind}} {disabled}>
+        <label use:wsx={{"@toggle": true, ...wind}} {disabled}>
             <span>{label}</span>
             <input type="radio" on:input={set(value)} {name} checked={index === valueIndex} />
         </label>

package/src/control/select.svelte

@@ -1,3 +1,5 @@
+<svelte:options immutable />
+
 <script context="module">
     const groupOptions = (options) => options.reduce(
         ({grouped, target = grouped}, item, pos) => {
@@ -31,7 +33,7 @@
     $: grouped = groupOptions(options)
 
     $: wind = {
-        "$control": true,
+        "@control": true,
         "$outline": outline,
         "$color": color,
         ...$$restProps,
@@ -40,7 +42,7 @@
 
 <label use:wsx={wind}>
     {#if label}
-        <span ws-x="$text">{label}</span>
+        <span ws-x="[$label-text]">{label}</span>
     {/if}
     <select value={indexValue} on:input={update} {disabled}>
         {#each grouped as item, index}

package/src/control/tabs.svelte

@@ -1,8 +1,10 @@
+<svelte:options immutable />
+
 <script>
     import wsx from "../wsx.mjs"
     import { handler$ } from "../handler$.mjs"
 
-    export let color = "primary"
+    export let color = "@primary"
     export let options = []
     export let vertical = false
     export let solid = false
@@ -20,7 +22,7 @@
     )
 
     $: wind = {
-        "@solid": solid,
+        "$solid": solid,
         "$color": color,
         $vert: vertical,
         ...$$restProps,
@@ -33,7 +35,9 @@
         <!-- svelte-ignore a11y-interactive-supports-focus -->
         <ws-tab use:wsx={{"$tab-selected": index === i}}
         on:click={set(tab.value)} role="tab">
-            {tab.label}
+            <slot {tab} selected={index === i}>
+                {tab.label}
+            </slot>
         </ws-tab>
     {/each}
 </ws-tabs>

package/src/control/toggle.svelte

@@ -1,8 +1,10 @@
+<svelte:options immutable />
+
 <script>
     import wsx from "../wsx.mjs"
 
     export let label = ""
-    export let color = "default"
+    export let color = "@default"
     export let checked = false
     export let flat = false
     export let value
@@ -11,14 +13,14 @@
     export let reverse = false
 
     $: container = {
-        "$toggle": true,
+        "@toggle": true,
         "$flat": flat,
         "$color": color,
         "fl.dir": reverse ? "row-reverse" : false,
         ...$$restProps,
     }
     $: input = {
-        "$switch": checkbox === false
+        "@switch": checkbox === false
     }
 
     const updateGroup = (checked) => {

package/src/data-display/avatar.svelte

@@ -1,3 +1,5 @@
+<svelte:options immutable />
+
 <script>
     import wsx from "../wsx.mjs"
 

package/src/data-display/badge.svelte

@@ -1,7 +1,9 @@
+<svelte:options immutable />
+
 <script>
     import wsx from "../wsx.mjs"
 
-    export let color = "default"
+    export let color = "@default"
     export let text = ""
 
     $: wind = { "$color": color, ...$$restProps }

package/src/data-display/chip.svelte

@@ -1,8 +1,10 @@
+<svelte:options immutable />
+
 <script>
     import wsx from "../wsx.mjs"
     import variant from "../variant.mjs"
 
-    export let color = "default"
+    export let color = "@default"
     export let clickable = false
 
     export let fill = false

package/src/data-display/details.md

@@ -1,3 +1,42 @@
 # Details
+A component that has some baseline content that is shown, then expands to reveal
+more content (like the html details element).
 
-Still working on this one.
+## Props
+
+### color
+Sets the $color macro.
+
+### label
+The text for the content that is always shown.
+
+### open
+Controls whether the Details is showing the extended content. Can be bound to.
+
+### outline
+If true, will put an outline around the component, including the extended
+content.
+
+## Slots
+
+### default
+The content to show when the Details is open.
+
+### label
+Can be used for more complex labels (things that need nested elements). If used,
+the label prop will be ignored.
+
+## Example
+
+```svelte
+<script>
+    import { Details } from "@axel669/zephyr"
+
+    let open = false
+</script>
+
+<div>Open: {open}</div>
+<Details label="Info" bind:open>
+    Look, more info could go here!
+</Details>
+```

package/src/data-display/details.svelte

@@ -1,9 +1,11 @@
+<svelte:options immutable />
+
 <script>
     import wsx from "../wsx.mjs"
 
     export let label
     export let outline
-    export let color = "default"
+    export let color = "@default"
     export let open = false
 
     $: wind = {

package/src/data-display/popover.svelte

@@ -1,3 +1,5 @@
+<svelte:options immutable />
+
 <script>
     import { fade } from "svelte/transition"
     import wsx from "../wsx.mjs"
@@ -16,7 +18,7 @@
 <ws-popover use:wsx={wind}>
     <slot {show} />
     {#if visible}
-        <wind-content slot="content" ws-x="inset[0px]" transition:fade={anim}>
+        <wind-content slot="content" ws-x="[inset 0px]" transition:fade={anim}>
             <slot name="content" {hide} />
         </wind-content>
     {/if}

package/src/data-display/progress.svelte

@@ -1,3 +1,5 @@
+<svelte:options immutable />
+
 <script>
     import wsx from "../wsx.mjs"
 
@@ -19,7 +21,7 @@
 
 <label use:wsx={wind}>
     {#if label}
-        <span ws-x="$text t-ws[nowrap]">{label}</span>
+        <span ws-x="[$progress-label] [t-ws nowrap]">{label}</span>
     {/if}
     <progress {value} {max} />
 </label>

package/src/data-display/table.md

@@ -1,7 +1,59 @@
 # Table
+Wrapper for making tables in a way that is easy to maintain.
 
-Under construction.
+## Props
 
-<!-- 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. -->
+### color
+`string`
+
+Sets the $color macro.
+
+### data
+`Array`
+
+The data to display in the table.
+
+### fillHeader
+`bool`
+
+If true, the header row will have the background filled instead of just the
+colored border.
+
+## Slots
+
+### header
+Used to render the header for the table. Needs to include the `tr`.
+
+### row
+Used to render an item that is not `undefined`. Needs to include the `tr`. Uses
+`let:row` for the row data, and `let:rowNum` for the row number (0-based).
+
+### empty-row
+If given, will render when the item in the array is `undefined`. Uses
+`let:rowNum` for the row number (0-based).
+
+## Example
+```svelte
+<script>
+    import { Table } from "@axel669/zephyr"
+
+    const data = Array.from(
+        { length: 20 },
+        (_, i) => [i, i ** 2, i ** 3]
+    )
+</script>
+
+<Table>
+    <tr slot="header">
+        <th>N</th>
+        <th>Squared</th>
+        <th>Cubed</th>
+    </tr>
+
+    <tr slot="row" let:row>
+        <td>{row[0]}</td>
+        <td>{row[1]}</td>
+        <td>{row[2]}</td>
+    </tr>
+</Table>
+```

package/src/data-display/table.svelte

@@ -1,3 +1,5 @@
+<svelte:options immutable />
+
 <script>
     import wsx from "../wsx.mjs"
 

package/src/data-display/tooltip.svelte

@@ -1,3 +1,5 @@
+<svelte:options immutable />
+
 <script>
     import wsx from "../wsx.mjs"
 

package/src/dialogs/alert.md

@@ -1,3 +1,42 @@
 # Alert Dialog
+A nicer alert dialog to use with [Modal](../layout/dialog.md).
 
-Under construction.
+## Props
+
+### color
+Sets the $color macro.
+
+### icon
+The name of an icon to show with the title of the alert.
+
+### message
+The message to shwo in the alert.
+
+### okText
+The text for the button that closes the alert.
+
+### title
+The title for the alert.
+
+## Example
+```svelte
+<script>
+    import { Alert, Button, EntryButton, Modal } from "@axel669/zephyr"
+
+    let alertModal = null
+    const alertProps = {
+        title: "Alert Example",
+        message: "This is an alert!"
+    }
+    const show = () => alertModal.show(alertProps)
+</script>
+
+<Modal component={Alert} bind:this={alertModal} />
+<Button on:click={show}>
+    Show Alert
+</Button>
+
+<EntryButton props={alertProps}>
+    Show Alert
+</EntryButton>
+```

package/src/dialogs/alert.svelte

@@ -1,3 +1,5 @@
+<svelte:options immutable />
+
 <script>
     import Button from "../control/button.svelte"
     import Dialog from "../layout/dialog.svelte"
@@ -10,7 +12,7 @@
     export let icon
     export let message
     export let okText = "OK"
-    export let color = "primary"
+    export let color = "@primary"
 </script>
 
 <Dialog card {color}>

package/src/dialogs/confirm.md

@@ -1,3 +1,56 @@
 # Confirm Dialog
+A nicer confirm dialog to use with [Modal](../layout/dialog.md).
 
-Under construction.
+## Props
+
+### color
+Sets the $color macro.
+
+### icon
+The name of an icon to show with the title of the dialog.
+
+### message
+The message to shwo in the confirm.
+
+### cancelText
+The text for the button that cancels the dialog.
+
+### okText
+The text for the button that confirms the dialog.
+
+### title
+The title for the dialog.
+
+## Return Values
+The Confirm component will return `true` from the `Modal.show` function if the
+OK button is clicked, and false if the Cancel button is clicked.
+
+## Example
+```svelte
+<script>
+    import { Confirm, Button, EntryButton, Modal } from "@axel669/zephyr"
+
+    let confirmModal = null
+    const confirmProps = {
+        title: "Confirm Example",
+        message: "This is an confirm!"
+    }
+    const show = async () => {
+        const result = await confirmModal.show(confirmProps)
+        if (result === true) {
+            console.log("confirmed!")
+            return
+        }
+        console.log("cancelled :(")
+    }
+</script>
+
+<Modal component={Confirm} bind:this={confirmModal} />
+<Button on:click={show}>
+    Show Confirm
+</Button>
+
+<EntryButton props={confirmProps}>
+    Show Confirm
+</EntryButton>
+```