@axel669/zephyr 0.3.6 → 0.4.4-beta.0

package/src/routing/route.svelte

@@ -0,0 +1,48 @@
+<script context="module">
+    const urlPattern = (path, exact) => {
+        const regexSource = path.replace(
+            /:([\w\-]+)/g,
+            (_, name) => `\(?<${name}>[\\w\\-\\%]+\)`
+        )
+        if (exact === true) {
+            return new RegExp(`(?<_path>^${regexSource})$`)
+        }
+        return new RegExp(`(?<_path>^${regexSource})(((?<=\\/)[\\w\\-\\%])|\\/|$)`)
+    }
+</script>
+
+<script>
+    import { getContext, setContext } from "svelte"
+
+    import { ctx, resolve, route } from "./routing.js"
+
+    export let path = ""
+    export let component = null
+    export let props = {}
+    export let exact = false
+
+    const parent = getContext(ctx.parent) ?? "/"
+    const fullPath = resolve(parent, path)
+
+    setContext(ctx.parent, fullPath)
+    $: pattern = urlPattern(fullPath, exact)
+    $: match = $route.match(pattern)
+    $: routeParams = Object.fromEntries(
+        Object.entries({ ...match?.groups }).map(
+            ([key, value]) => [key, decodeURIComponent(value)]
+        )
+    )
+    $: routeInfo = {
+        params: routeParams,
+        match: routeParams._path,
+        route: $route,
+    }
+</script>
+
+{#if match !== null}
+    {#key routeParams._path}
+        <slot {routeInfo}>
+            <svelte:component this={component} {...props} {routeInfo} />
+        </slot>
+    {/key}
+{/if}

package/src/routing/routing.js

@@ -0,0 +1,62 @@
+import { onMount, getContext } from "svelte"
+import { writable, derived } from "svelte/store"
+
+import { hash } from "../hash.js"
+
+export const route = derived(
+    hash,
+    hash => {
+        if (hash.startsWith("/") === false) {
+            return `/${hash}`
+        }
+        return hash
+    }
+)
+
+export const ctx = {
+    router: Symbol("Router Context"),
+    parent: Symbol("Route Parent"),
+    layout: Symbol("Layout Context"),
+}
+export const resolve = (base, part) => {
+    if (part === "" || part === "/") {
+        return base
+    }
+    if (base === "/" || base === undefined) {
+        return `/${part}`
+    }
+    if (part.startsWith("/") === true) {
+        return `${base}${part}`
+    }
+    return `${base}/${part}`
+}
+export const relpath = (path) => {
+    const base = getContext(ctx.parent)
+    return `#${resolve(base, path)}`
+}
+
+const emptyStack = Symbol("empty stack")
+export const stackStore = (initial = stackStore.empty) => {
+    const stack = [writable(initial)]
+    const current = writable(initial)
+    let attachment = stack[0].subscribe(current.set)
+
+    return {
+        subscribe: current.subscribe,
+        push: (initial) => {
+            const item = writable(initial)
+            onMount(() => {
+                stack.push(item)
+                attachment()
+                attachment = item.subscribe(current.set)
+                return () => {
+                    stack.pop()
+                    attachment()
+                    attachment = stack[stack.length - 1].subscribe(current.set)
+                }
+            })
+            return item
+        }
+    }
+}
+stackStore.empty = emptyStack

package/src/routing/title.svelte

@@ -0,0 +1,26 @@
+<script context="module">
+    import { writable } from "svelte/store"
+
+    import { stackStore } from "./routing.js"
+
+    // const stack = writable([])
+    const stack = stackStore()
+
+    const updateTitle = (format, data) => {
+        if (format === null || data === stackStore.empty) {
+            return
+        }
+
+        document.title = format(data)
+    }
+</script>
+
+<script>
+    import { onMount } from "svelte"
+    export let data = ""
+    export let format = null
+
+    stack.push(data)
+
+    $: updateTitle(format, $stack)
+</script>

package/src/spinner/circle-spinner.svelte

@@ -7,9 +7,10 @@
     export let color = "@primary"
 
     $: wind = {
+        ...$$restProps,
         "@size": size,
         "$color": color,
     }
 </script>
 
-<ws-circle-spinner use:wsx={wind} />
+<ws-circle-spinner use:wsx={wind} style="aspect-ratio: 1 / 1;" />

package/src/spinner/hexagon-spinner.svelte

@@ -7,9 +7,10 @@
     export let color = "@primary"
 
     $: wind = {
+        ...$$restProps,
         "@size": size,
         "$color": color,
     }
 </script>
 
-<ws-hexagon-spinner use:wsx={wind} />
+<ws-hexagon-spinner use:wsx={wind} style="aspect-ratio: 1 / 1;" />

package/src/text.svelte

@@ -5,14 +5,12 @@
 
     export let title = false
     export let subtitle = false
-    export let block = false
     export let adorn = false
 
     $: wind = {
-        "$title": title,
-        "$subtitle": subtitle,
+        "$title-text": title,
+        "$subtitle-text": subtitle,
         "$adorn": adorn,
-        block,
         ...$$restProps
     }
 </script>

package/src/wsx.mjs

@@ -1,24 +1,25 @@
-import ws from "@axel669/windstorm"
-
-// ws.custom("outline", (o) => ws.prop("outline", o))
-
-export default (node, props) => {
-    const update = (props) => {
-        const { slot = null, ...goodProps } = props ?? {}
-        if (goodProps === null || goodProps === undefined) {
-            node.setAttribute("ws-x", null)
-            return
-        }
-        node.setAttribute(
-            "ws-x",
-            ws.x(goodProps)
-        )
-        if (slot === null) {
-            node.removeAttribute("slot")
-            return
-        }
-        node.setAttribute("slot", slot)
-    }
-    update(props)
-    return { update }
-}
+import ws from "@axel669/windstorm"
+
+export default (node, props) => {
+    const update = (props) => {
+        const { slot = null, ...goodProps } = props ?? {}
+        if (goodProps === null || goodProps === undefined) {
+            node.setAttribute("ws-x", null)
+            return
+        }
+        const formatted = Object.entries(goodProps).reduce(
+            (props, [key, value]) => {
+                const realKey = key.replaceAll("--", ":").replace(/^\-/, "$")
+                props[realKey] = value
+                return props
+            },
+            {}
+        )
+        node.setAttribute(
+            "ws-x",
+            ws.x(formatted)
+        )
+    }
+    update(props)
+    return { update }
+}

package/src/async/button.md

@@ -1,27 +0,0 @@
-# AsyncButton
-A button that makes it simpler to fire off async functions in response to button
-clicks. In addition to calling the function, the button will disable itself
-during the function duration and show a load spinner inside the button.
-
-## Props
-The AsyncButton supports all of the [Button](../control/button.md) props.
-
-### handler
-The async function to call when the button is clicked.
-
-## Example
-
-```svelte
-<script>
-    import { AsyncButton } from "@axel669/zephyr"
-
-    const load = async () => {
-        const res = await fetch(someURL)
-        console.log(await res.text())
-    }
-</script>
-
-<AsyncButton handler={load} color="@primary">
-    Load Things
-</AsyncButton>
-```

package/src/async/load-zone.md

@@ -1,42 +0,0 @@
-# LoadZone
-A component for putting content that is behind an async function.
-
-## Props
-
-### message
-The text to show while the promise is pending.
-
-### source
-`Promise`
-
-The promise that will resolve into some kind of content-related information.
-
-## Slots
-
-### default
-The default slot will be shown when the promise resolves.
-
-### loading
-The content to show while the promise is pending. Overrides the default of a
-load spinner with some text.
-
-### error
-The content to show when the promise rejects. Use `let:error` to get the error
-that was thrown.
-
-## Example
-
-```svelte
-<LoadZone source={asyncThing} let:result>
-    <div>
-        content
-    </div>
-    <div>
-        {JSON.stringify(result)}
-    </div>
-
-    <div slot="error">
-        :(
-    </div>
-</LoadZone>
-```

package/src/composed/data-table/th.md

@@ -1,21 +0,0 @@
-# TH
-
-The TH component has no use outside fo the DataTable, but is used to support
-the filter and sorting functionality for that component.
-
-## Props
-
-### sort
-`Function`
-
-The sorting function to use for the column defined. Should return values that
-match the expected values for `Array.sort`.
-
-### filter
-`Function`
-
-The function to use for filtering based on the column. The function is given
-2 arguments: a row of data and the text from the filter input field. The
-function should return `true` if the item should be shown. A filter function on
-a specific column does not need to only look at the specified column, but not
-doing could cause confusion for users without proper context.

package/src/composed/data-table.md

@@ -1,86 +0,0 @@
-# DataTable
-
-The DataTable is a more advanced way to show data on screen. Underneath is
-a [Table](../data-display/table.md) component, but with additional functionality
-for pagination, sorting, and fitering.
-
-> If pagination is not needed, the DataTable may not be necessary as it will
-> only be shortcutting data formatting at that point.
-
-## Props
-
-### color
-Sets `$color`
-
-### data
-`Array`
-
-The data to display. Each item in the array can be in either the same
-format as the Table, or any kind of object if column format functions
-are used.
-
-### page
-`Number`
-
-The current page of data being viewed. Can be bound, or set to control
-which page is displayed
-
-### pageSize
-`Number`
-
-The number of items to show on each page. Default is 10.
-
-### rowHeight
-The height of each row. The component uses this to make empty rows the same
-height as rows with data so that the pagination doesnt randomly resize the
-visual area of the table.
-
-## Slots
-
-### header
-A fragment that should contain the header cells for the table header. A standard
-`th` can be used, but the [TH](./data-table/th.md) element from zephyr has
-additional configuration to handle more complex header-related actions.
-
-### row
-A fragment that should use regular `td` elements to define how a row should be
-layed out. The fragment will need `let:row` to access each row's data for
-displaying it.
-
-## Example
-```svelte
-<script>
-    import { DataTable, TH, sorts } from "@axel669/zephyr"
-
-    let page
-    const data = [
-        { a: 1, b: 1 ** 2, c: 1 ** 3 },
-        { a: 2, b: 2 ** 2, c: 2 ** 3 },
-        { a: 3, b: 3 ** 2, c: 3 ** 3 },
-        { a: 4, b: 4 ** 2, c: 4 ** 3 },
-        { a: 5, b: 5 ** 2, c: 5 ** 3 },
-        { a: 6, b: 6 ** 2, c: 6 ** 3 },
-        { a: 7, b: 7 ** 2, c: 7 ** 3 },
-        { a: 8, b: 8 ** 2, c: 8 ** 3 },
-        { a: 9, b: 9 ** 2, c: 9 ** 3 },
-        { a: 10, b: 10 ** 2, c: 10 ** 3 },
-        { a: 11, b: 11 ** 2, c: 11 ** 3 },
-        { a: 12, b: 12 ** 2, c: 12 ** 3 },
-        { a: 13, b: 13 ** 2, c: 13 ** 3 },
-    ]
-</script>
-
-<DataTable {cols} {data} color="warning" pageSize={3} bind:page>
-    <svelte:fragment slot="header">
-        <TH sort={sorts.natural}>N</TH>
-        <th>Squared</th>
-        <th>Cubed</th>
-    </svelte:fragment>
-
-    <svelte:fragment slot="row" let:row>
-        <td>{row.a}</td>
-        <td>{row.b}</td>
-        <td>^3 = {row.c}</td>
-    </svelte:fragment>
-</DataTable>
-```

package/src/composed/entry-button.md

@@ -1,44 +0,0 @@
-# EntryButton
-
-The EntryButton is a convenient way to display modals and screens over
-content without needing to bind variables have lots of Modal elements in
-addition to the buttons that show them.
-
-## Props
-
-### component
-The component to show when clicked
-
-### props
-The props to pass to the component when it is shown, or a function that
-generates the props when called.
-
-### this
-The wrapper for the component. Default is [Modal](../layout/modal.md) but any
-component that has the same interface as Modal will work.
-
-## Events
-
-### entry
-When the component is closed the entry event is fired. The detail
-property of the event will have the value from closing it.
-
-## Example
-```svelte
-<script>
-    const propsFunc = () => ({
-        now: Date.now(),
-        rand: Math.random(),
-    })
-</script>
-
-<EntryButton component={Subscreen} on:entry={console.log}>
-    Open Subscreen
-</EntryButton>
-<EntryButton component={CoolDialog} props={{ thing: true }} on:entry={console.log}>
-    Open Subscreen
-</EntryButton>
-<EntryButton this={CoolModal} component={CustomThing} on:entry={console.log} props={propsFunc}>
-    Open Subscreen
-</EntryButton>
-```

package/src/composed/toast.md

@@ -1,45 +0,0 @@
-# Toast
-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.
-
-### 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.
-
-## Events
-
-### 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
-```svelte
-<script>
-    let toast = null
-    const notify = () => toast.show(5000, { message: "hi" })
-</script>
-
-<Toast bind:this={toast} position="bc" />
-```

package/src/control/button.md

@@ -1,41 +0,0 @@
-# Button
-
-Basic clickable component for handling user interaction.
-
-## Props
-
-### color
-`string`
-
-Sets `$color`
-
-### compact
-`bool`
-
-Sets `$compact`
-
-### 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
-
-## Example
-```svelte
-<script>
-    import { Button } from "@axel669/zephyr"
-</script>
-
-<Button on:click={action}>
-    Flat Button
-</Button>
-<Button on:click={action} outline>
-    Outlined Button
-</Button>
-<Button on:click={action} fill color="danger">
-    Filled Button
-</Button>
-```

package/src/control/input.md

@@ -1,87 +0,0 @@
-# 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/label.md

@@ -1,48 +0,0 @@
-# Label
-The label component is a wrapper around a `<label>` element.
-
-## Props
-
-### button
-`bool`
-
-If true, the label will have the button appearance.
-
-### color
-`string`
-
-Sets `$color`
-
-### compact
-`bool`
-
-If true, will make the label button be more compact. No effect is `button` is
-`false`.
-
-### disabled
-`bool`
-
-Disables the label.
-
-### fill / outline / flat
-`bool`
-
-Sets the button variant of the label when `button` is `true`.
-
-### for
-`string`
-
-[Label for attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label#for)
-
-## Example
-
-```svelte
-<script>
-    import { Label } from "@axel669/zephyr"
-</script>
-
-<Label for="checkbox">Toggle Checkbox</Label>
-<Label for="checkbox" button color="primary" fill>
-    Open Menu
-</Label>
-```