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

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

@@ -23,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
@@ -72,7 +72,7 @@
 
     $: wind = {
         "$flat": flat,
-        "$control": true,
+        "@control": true,
         "$color": color,
         ...props.wind,
     }
@@ -82,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

@@ -20,7 +20,7 @@
     $: baseStyles =
         (button === true)
         ? {
-            $button: true,
+            "@button": true,
             [type]: true,
             "$color": color,
             $compact: compact,

package/src/control/link.svelte

@@ -15,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

@@ -20,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

@@ -33,7 +33,7 @@
     $: grouped = groupOptions(options)
 
     $: wind = {
-        "$control": true,
+        "@control": true,
         "$outline": outline,
         "$color": color,
         ...$$restProps,
@@ -42,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

@@ -4,7 +4,7 @@
     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
@@ -35,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

@@ -4,7 +4,7 @@
     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
@@ -13,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/badge.svelte

@@ -3,7 +3,7 @@
 <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

@@ -4,7 +4,7 @@
     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

@@ -5,7 +5,7 @@
 
     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

@@ -18,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

@@ -11,7 +11,7 @@
     export let label = null
 
     $: wind = {
-        "$progress": true,
+        "@progress": true,
         "$outline": outline,
         "$color": color,
         $row: row,
@@ -21,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/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

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

package/src/dialogs/confirm.svelte

@@ -16,7 +16,7 @@
     export let message
     export let okText = "OK"
     export let cancelText = "Cancel"
-    export let color = "primary"
+    export let color = "@primary"
 
     const cls = handler$(close)
 </script>

package/src/functions.md

@@ -81,3 +81,28 @@ directly.
     <span>Content</span>
 </div>
 ```
+
+## hash store
+A svelte store that has the current value of the browser page hash. It uses
+polling to check the value several times a second (it's a cheap check) so the
+weird browser issues around hash change events don't affect it. Can also be used
+to set the browser hash.
+
+### Example
+```svelte
+<script>
+    import { hash } from "@axel669/zephyr"
+</script>
+
+<div>
+    Browser hash: {$hash}
+</div>
+```
+
+## sorts
+A collection fo sorting functions for use with the DataTable. Currently only
+has natural sort as `sorts.natural(colProp)`.
+
+## filters
+A collection of filter functions for use with the DataTable. Currently only has
+a text filter function as `filter.text(colProp)`.

package/src/hash.js

@@ -0,0 +1,14 @@
+import { readable } from "svelte/store"
+
+export const hash = readable(
+    location.hash.slice(1),
+    (set) => {
+        setInterval(
+            () => set(location.hash.slice(1)),
+            50
+        )
+    }
+)
+hash.set = (value) => {
+    location.hash = value
+}

package/src/index.mjs

@@ -38,7 +38,7 @@ 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 TH } from "./composed/data-table/th.svelte"
 export { default as EntryButton } from "./composed/entry-button.svelte"
 export { default as Toast } from "./composed/toast.svelte"
 
@@ -47,6 +47,7 @@ export { default as LoadZone } from "./async/load-zone.svelte"
 
 export { default as wsx } from "./wsx.mjs"
 
+export { hash } from "./hash.js"
 
 export * from "./handler$.mjs"
 export * from "./composed/table-functions.js"

package/src/inline-dialog.svelte

@@ -13,7 +13,7 @@
 </script>
 
 <slot name="toggle" {id} />
-<input type="checkbox" ws-x="hide" {id} />
+<input type="checkbox" ws-x="[hide]" {id} />
 <ws-modal>
     <ws-paper use:wsx={paper}>
         <slot name="header" {id} />

package/src/layout/dialog.svelte

@@ -16,7 +16,7 @@
 
 <!-- svelte-ignore a11y-click-events-have-key-events -->
 <!-- svelte-ignore a11y-no-noninteractive-element-interactions -->
-<wind-wrapper transition:trick ws-x="$dialog grid" on:click|stopPropagation
+<wind-wrapper transition:trick ws-x="@dialog [grid]" on:click|stopPropagation
 role="dialog">
     <Paper {...$$props}>
         <slot name="header" slot="header" />

package/src/layout/drawer.svelte

@@ -3,16 +3,16 @@
 <script context="module">
     const defs = {
         select: {
-            "$select": true,
+            "@select": true,
             "w.min": "35vw",
             grid: true,
             over: "hidden"
         },
         menu: {
-            "$menu": true,
+            "@menu": true,
         },
         action: {
-            "$action": true,
+            "@action": true,
         }
     }
 </script>

package/src/layout/flex.svelte

@@ -8,6 +8,7 @@
     export let gap = false
     export let cross = "stretch"
     export let main = "start"
+    export let scrollable = false
 
     $: wind = {
         "fl.dir": direction,
@@ -15,6 +16,7 @@
         "fl.main": main,
         p: pad,
         gap: gap,
+        over: (scrollable === true) ? "auto" : null,
         ...$$restProps
     }
 </script>

package/src/layout/grid.svelte

@@ -10,6 +10,7 @@
     export let rows = null
     export let autoCol = false
     export let autoRow = false
+    export let scrollable = false
 
     $: wind = {
         "gr.flow": direction,
@@ -19,6 +20,7 @@
         "gr.rows.a": autoRow,
         p: pad,
         gap: gap,
+        over: (scrollable === true) ? "auto" : null,
         ...$$restProps
     }
 </script>

package/src/layout/modal.svelte

@@ -44,7 +44,7 @@
     let visible = null
 </script>
 
-<input type="checkbox" bind:this={visible} ws-x="disp[none]" />
+<input type="checkbox" bind:this={visible} ws-x="[disp none]" />
 {#if resolver !== null}
     <!-- svelte-ignore a11y-click-events-have-key-events -->
     <!-- svelte-ignore a11y-no-noninteractive-element-interactions -->

package/src/layout/screen.svelte

@@ -22,8 +22,8 @@
     setContext(ctxStack, stack + 1)
 
     $: wind = {
-        "&stack": stack.toString(),
-        "&screen-width": width,
+        "@stack": stack.toString(),
+        "@screen-width": width,
         "bg.c": "transparent",
         ...$$restProps
     }