@axel669/zephyr 0.1.17 → 0.2.0-beta.0

package/src/input/text.svelte

@@ -1,104 +0,0 @@
-<script>
-    /*md
-    [@] Components/Input/Text
-
-    # Input.Text
-
-    A multiline text input component.
-
-    ## Base
-    [Windstorm Labled Control](https://axel669.github.io/lib.windstorm/#components-labeled-control)
-    using an input with type="text"
-
-    ## Props
-    All [windstorm functions](https://axel669.github.io/lib.windstorm/#css-shorthands)
-    are supported.
-
-    - ### color `string`
-        Sets `$color`
-    - ### error `string`
-        Shows an error message under the input
-    - ### flat `bool`
-        Sets `@flat`
-    - ### hint `string`
-        Shows a hint under the label. If no label is provided, the hint will not
-        be shown either
-    - ### label `string`
-        The label for the input
-    - ### transform `function`
-        If given, it will transform the text value from the input and set the
-        `tvalue` to the result
-    - ### tvalue
-        Value that can be bound to as the output of the transform function.
-        Setting has no effect
-    - ### validate `function`
-        If given, will check the transformed output against a validation
-        criteria and store the result in `valid`
-    - ### valid `bool`
-        Value that can be bound to as the output of the validation function.
-        Setting has no effect
-    - ### value `string`
-        The value of the textarea, can be bound to
-
-    ## Functions
-    - focus()\\
-        Focuses the input
-
-    ## Usage
-    ```js
-    import { Input } from "@axel669/svelte-wind"
-    ```svelte
-    <Input.Text bind:value />
-    <Input.Text bind:value color="primary" />
-    <Input.Text bind:value label="Wat" hint="Blep"/>
-    <Input.Text bind:value bind:tvalue transform={txt => txt.toLowerCase()} />
-    <Input.Text bind:value bind:valid validate={txt => txt.indexOf("a") > 0} />
-    ```
-    */
-
-    import wsx from "../wsx.mjs"
-
-    export let flat = false
-    export let label
-    export let color = "default"
-    export let error = null
-    export let hint = null
-    export let disabled
-
-    export let value = ""
-
-    export let transform = i => i
-    export let tvalue
-    export let validate = () => true
-    export let valid
-
-    let input = null
-    export const focus = () => input.focus()
-
-    $: wind = {
-        "@flat": flat,
-        "@control": true,
-        $color: color,
-        ...$$restProps,
-    }
-
-    $: tvalue = transform(value ?? "")
-    $: valid = validate(tvalue)
-</script>
-
-<label use:wsx={wind} ws-error={error}>
-    {#if label}
-        <span ws-x="$text" ws-hint={hint}>{label}</span>
-    {/if}
-    <input {...$$restProps}
-    type="text"
-    {disabled}
-    bind:value
-    on:focus
-    on:blur
-    bind:this={input}
-    />
-
-    <slot name="start" />
-    <slot name="end" />
-</label>

package/src/link.svelte

@@ -1,67 +0,0 @@
-<script>
-    /*md
-    [@] Components/Link
-
-    # Link
-
-    Themed and customizale `<a>` tag component.
-
-    ## Base
-    [Windstorm Link](https://axel669.github.io/lib.windstorm/#components-link)
-
-    ## Props
-    All [windstorm functions](https://axel669.github.io/lib.windstorm/#css-shorthands)
-    are supported.
-
-    - ### button `string`
-        If true, the link will be styled like a button
-    - ### color `string`
-        Sets the color of the button. Applies to both regular links and button
-        style links.
-    - ### href `string`
-        Sets the href attribute.
-    - ### rel `string`
-        Sets the rel attribute.
-    - ### target `string`
-        Sets the target attribute
-    - ### 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 outline>
-        Logout
-    </Link>
-    ```
-    */
-
-    import wsx from "./wsx.mjs"
-    import variant from "./variant.mjs"
-
-    export let button = false
-    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,
-        [type]: true,
-        $color: color,
-        ...$$restProps
-    }
-</script>
-
-<a {href} {target} {rel} use:wsx={wind}>
-    <slot />
-</a>

package/src/modal.svelte

@@ -1,73 +0,0 @@
-<script>
-    /*md
-    [@] Components/Modal
-
-    # Modal
-
-    The Modal component is used to control when content should be shown that
-    sits over the current content and prevents interaction with the content it
-    covers. It is primarily used to show drawers, dialogs, and sub screens.
-
-    The `show` function will display the component specified inside a ws-modal
-    element, and can be awaited for an optional return value. The component
-    displayed will be passed any props supplied to `show` and a `close` function
-    that can be called to hide the component again. `close` can also be given
-    an argument that will be used as the promise value from `show`.
-
-    If a component that a modal displays exports a `cancel` function, then
-    clicking the modal area outside the displayed component will call that
-    `cancel` function, allowing any modal component to decide when/if it is
-    closes in response to that event.
-
-    ## Props
-    Because the Modal does not render content of its own, it does not support
-    any wind functions.
-
-    - ### component `Component`
-        The component to display when `show` is called
-
-    ## Functions
-    - ### `show(props?) -> Promise`
-        Shows the given component and passes any props provided.
-
-    ## Usage
-    ```svelte
-    <Modal component={CoolDialog} bind:this={dialog} />
-    <Button on:click={() => dialog.show({ a: 10, b: 12 })}>
-        Open Dialog
-    </Button>
-    ```
-    */
-
-    export let component
-
-    let modalProps = null
-    let resolver = null
-    let displayed = null
-
-    const close = (value) => {
-        resolver(value)
-        resolver = null
-        modalProps = null
-    }
-    const cancel = () => displayed.cancel?.()
-
-    export const show = (props) => new Promise(
-        (resolve) => {
-            modalProps = props ?? {}
-            resolver = resolve
-        }
-    )
-</script>
-
-{#if resolver !== null}
-    <!-- svelte-ignore a11y-click-events-have-key-events -->
-    <ws-modal ws-x="$show" on:click={cancel}>
-        <svelte:component
-        bind:this={displayed}
-        this={component}
-        {...modalProps}
-        {close}
-        />
-    </ws-modal>
-{/if}

package/src/notification.svelte

@@ -1,57 +0,0 @@
-<script>
-    /*md
-    [@] Components/Notification
-
-    # Notification
-
-    Displays a piece of content that stands out from the surrounding content and
-    can also be used for toast messages. Optionally has some interactable
-    elements embedded.
-
-    Expects 1-2 child nodes and will display them on the sides of the
-    notification with space between them. This means that reversing the order
-    of the child nodes will flip which sides they appear on.
-
-    ## Base
-    [Windstorm Notification](https://axel669.github.io/lib.windstorm/#components-notification)
-
-    ## Props
-    All [windstorm functions](https://axel669.github.io/lib.windstorm/#css-shorthands)
-    are supported.
-
-    - ### color
-        Sets `$color` and uses the fill style for coloration.
-
-    ## Usage
-    ```svelte
-    <Notification>
-        <Icon name="info-hexagon">
-            Some kind of information
-        </Icon>
-    </Notification>
-    <Notification color="danger">
-        <Icon name="alert-hexagon">
-            Something broke
-        </Icon>
-
-        <Button>
-            Cancel
-        </Button>
-    </Notification>
-    ```
-    */
-
-    import wsx from "./wsx.mjs"
-
-    export let color = false
-
-    $: wind = {
-        $color: color,
-        ...$$restProps,
-    }
-</script>
-
-<!-- svelte-ignore a11y-click-events-have-key-events -->
-<ws-notification use:wsx={wind} on:click>
-    <slot />
-</ws-notification>

package/src/paper.svelte

@@ -1,127 +0,0 @@
-<script>
-    /*md
-    [@] Components/Containers/Paper
-
-    # Paper
-
-    The Paper component is a container that has slots for header and footer
-    content that is independant from the regular content scrolling. It also uses
-    Flex as a default layout for its slotted content, but allows any container
-    to be used as a layout without increasing the indentation of all the content
-    needlessly.
-
-    ## Base
-    [Windstorm Paper](https://axel669.github.io/lib.windstorm/#components-paper)
-
-    ## Props
-    All [windstorm functions](https://axel669.github.io/lib.windstorm/#css-shorthands)
-    are supported.
-
-    - ### color `string`
-        Sets `$color`
-    - ### card `bool`
-        Sets `@outline`
-    - ### square `bool`
-        Sets `r[0px]`
-    - ### layout `Component`
-        Sets the layout the card will use to display content. Default is Flex.
-    - ### scrollable `bool`
-        Sets `over[auto]` on 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
-        The header content for the Paper. Header content does not scroll with
-        the regular content of the component (acts sticky)
-    - ### footer
-        The footer content for the Paper. Same scrolling properties as the
-        header slot
-    - ### content/default
-        The default slot (unnamed) for Paper will be rendered in the layout
-        component defined in the props. As an alternative, a content slot may
-        be used that will be rendered directly in the content slot of the Paper
-        without the layout component/props being rendered (useful when nesting
-        papers for example)
-
-    ## Usage
-    ```svelte
-    <Paper>
-        <Titlebar slot="header">
-            <Text slot="title" title>
-                Some Title
-            </Text>
-        </Titlebar>
-
-        <div>Content 1</div>
-        <div>Content 2</div>
-        <div>Content 3</div>
-    </Paper>
-    <Paper l-pad="0px" m="4px">
-        <Titlebar slot="header">
-            <Text slot="title" title>
-                Some Screen
-            </Text>
-        </Titlebar>
-
-        <Paper slot="content">
-            <Tabs slot="header" {options} bind:value />
-
-            <div>Content 1</div>
-            <div>Content 2</div>
-            <div>Content 3</div>
-        </Paper>
-
-        <div slot="footer">
-            Wat
-        </div>
-    </Paper>
-    ```
-    */
-
-    import Flex from "./flex.svelte"
-    import wsx from "./wsx.mjs"
-
-    export let color
-    export let card = false
-    export let square = false
-    export let layout = Flex
-    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: {} }
-    )
-
-    $: layoutProps = {
-        over: scrollable ? "auto" : false,
-        ...props.layout,
-    }
-    $: wind = {
-        $color: color,
-        "@outline": card,
-        r: square && "0px",
-        ...props.paper,
-    }
-</script>
-
-<ws-paper use:wsx={wind}>
-    <slot name="header" />
-    {#if $$slots.content}
-        <slot name="content" slot="content" />
-    {:else}
-        <svelte:component this={layout} {...layoutProps} slot="content">
-            <slot />
-        </svelte:component>
-    {/if}
-    <slot name="footer" />
-</ws-paper>

package/src/popover.svelte

@@ -1,60 +0,0 @@
-<script>
-    /*md
-    [@] Components/Containers/Popover
-
-    # Popover
-
-    The Popover component is for displaying content over something without it
-    being modal (you can interact with things under it still).
-
-    ## Base
-    [Windstorm Popover](https://axel669.github.io/lib.windstorm/#components-popover)
-
-    ## Props
-    All [windstorm functions](https://axel669.github.io/lib.windstorm/#css-shorthands)
-    are supported.
-
-    ## Variables
-    - show
-    - hide
-    The Popover exposes 2 variables for use: `show` and `hide`. These functions
-    are given to the content so that it can control when to display the popover
-    content without needing to bind to the parent.
-
-    ## Usage
-    ```svelte
-    <Popover let:show let:hide>
-        <Button on:click={show}>
-            Show
-        </Button>
-        <div ws-x="inset-x[0px] y[0px] h[100px] bg[teal]" slot="content">
-            <Button on:click={hide}>
-                Hide
-            </Button>
-        </div>
-    </Popover>
-    ```
-    */
-
-    import { fade } from "svelte/transition"
-    import wsx from "./wsx.mjs"
-
-    let visible = false
-    const show = () => visible = true
-    const hide = () => visible = false
-    const anim = { duration: 200 }
-
-    $: wind = {
-        $show: true,
-        ...$$restProps,
-    }
-</script>
-
-<ws-popover use:wsx={wind}>
-    <slot {show} />
-    {#if visible}
-        <wind-content ws-x="slot[content] inset[0px]" transition:fade={anim}>
-            <slot name="content" {hide} />
-        </wind-content>
-    {/if}
-</ws-popover>

package/src/progress.svelte

@@ -1,60 +0,0 @@
-<script>
-    /*md
-    [@] Components/Progress
-
-    # Progress
-
-    Displays progress bar with an optional label.
-
-    ## Base
-    [Windstorm Progress Bar](https://axel669.github.io/lib.windstorm/#components-progress-bar)
-
-    ## Props
-    All [windstorm functions](https://axel669.github.io/lib.windstorm/#css-shorthands)
-    are supported.
-
-    - ### color `string`
-        Sets `$color`
-    - ### label `string`
-        The label for the bar
-    - ### max `number`
-        Sets the max value for the progress bar. Default is 1
-    - ### outline `bool`
-        Sets `@outline`
-    - ### row `bool`
-        Sets `$row`
-    - ### value `number`
-        Sets the value of the progress bar. Combined with max to determine how
-        filled the bar is.
-
-    ## Usage
-    ```svelte
-    <Progress color="primary" value={0.1} />
-    <Progress color="primary" value={5} max={10} />
-    ```
-    */
-
-    import wsx from "./wsx.mjs"
-
-    export let value = 0
-    export let max = 1
-    export let color = "default"
-    export let outline = false
-    export let row = false
-    export let label = null
-
-    $: wind = {
-        "@progress": true,
-        "@outline": outline,
-        $color: color,
-        $row: row,
-        ...$$restProps,
-    }
-</script>
-
-<label use:wsx={wind}>
-    {#if label}
-        <span ws-x="$text t-ws[nowrap]">{label}</span>
-    {/if}
-    <progress {value} {max} />
-</label>

package/src/radio.svelte

@@ -1,82 +0,0 @@
-<script>
-    /*md
-    [@] Components/Input/Radio
-
-    # Radio
-
-    The radio component displays a list of radio options and provides an
-    interface to control which one is selected and react to changes in the
-    selected value. It also uses a layout component to decide how the options
-    are presented.
-
-    ## Base
-    Each radio item rendered is a
-    [Windstorm Labeled Toggle](https://axel669.github.io/lib.windstorm/#components-labeled toggle)
-    that uses a radio input.
-
-    ## Props
-    All [windstorm functions](https://axel669.github.io/lib.windstorm/#css-shorthands)
-    are supported.
-
-    Unlike the Paper, the wind functions passed as props to the Radio component
-    are passed directly to the layout specified because the Radio does not have
-    a container element of its own.
-
-    - ### layout `Component`
-        The component to use for layout out the options. Default is Flex.
-    - ### options `Array[Object]`
-        An array of objects that defines the options to show. Details below.
-    - ### value `any`
-        The value currently selected. Can be bound to react to selections or
-        change the current selection.
-
-    ## Options
-    Each object in the options array supplied should have a `value` and `label`
-    prop specified. Additionally, any wind functions that should be applied to
-    the option can be passed as additional props.
-
-    Labels should be strings, but values can be any type as long as they are
-    unique in the list.
-
-    ```js
-    const options = [
-        { label: "first", value: 1 },
-        { label: "second", value: [] },
-        { label: "third", value: "3", $color: "warning" }
-    ]
-    ```
-
-    ## Usage
-    ```svelte
-    <Radio {options} bind:value />
-    <Radio {options} bind:value={other} layout={Grid} gr-col="1fr 1fr" />
-    ```
-    */
-
-    import asuid from "@labyrinthos/asuid"
-
-    import wsx from "./wsx.mjs"
-    import { handler$ } from "./handler$.mjs"
-
-    import Flex from "./flex.svelte"
-
-    export let options = []
-    export let layout = Flex
-    export let value
-
-    $: valueIndex = options.findIndex(item => item.value === value)
-    const set = handler$(
-        (newValue) => value = newValue
-    )
-
-    const name = asuid()
-</script>
-
-<svelte:component this={layout} {...$$restProps}>
-    {#each options as {value, label, disabled, ...wind}, index (value)}
-        <label use:wsx={{"@toggle": true, ...wind}} {disabled}>
-            <span>{label}</span>
-            <input type="radio" on:input={set(value)} {name} checked={index === valueIndex} />
-        </label>
-    {/each}
-</svelte:component>

package/src/screen.svelte

@@ -1,69 +0,0 @@
-<script context="module">
-    const ctxStack = Symbol("stack context")
-    const ctxClose = Symbol("close context")
-</script>
-
-<script>
-    /*md
-    [@] Components/Containers/Screen
-
-    # Screen
-
-    The screen is a container component that is used for displaying content
-    over its parent and stacks as more screens are displayed. Screens that stack
-    on top of a parent screen use the Modal to control when they are shown and
-    pass values back from child screens. The stacking effect of the Screen is
-    controlled by internally tracked svelte context, so no manual effort is
-    required to get stacking screens to have the effect.
-
-    ## Base
-    [Windstorm Screen](https://axel669.github.io/lib.windstorm/#components-screen)
-
-    ## Props
-    All [windstorm functions](https://axel669.github.io/lib.windstorm/#css-shorthands)
-    are supported, but they probably won't help much with this component.
-
-    - ### width `string`
-        The width of the screen before stack-based padding is applied
-
-    ## Usage
-    `cool-screen.svelte`
-    ```svelte
-    <Screen width="70%">
-        <Paper>
-            This screen is pretty cool I swear
-            <Button on:click={() => close("hi")}>
-                Close
-            </Button>
-        </Paper>
-    </Screen>
-    ```
-    */
-
-    import { getContext, setContext } from "svelte"
-    import { fly } from "svelte/transition"
-
-    import wsx from "./wsx.mjs"
-    import vars from "./vars.mjs"
-
-    export let width = false
-
-    const stack = getContext(ctxStack) ?? 0
-    const animation = {
-        y: window.innerHeight,
-        duration: 350
-    }
-
-    setContext(ctxStack, stack + 1)
-
-    $: wind = {
-        "&stack": stack.toString(),
-        "&screen-width": width,
-        "bg-c": "transparent",
-        ...$$restProps
-    }
-</script>
-
-<ws-screen use:wsx={wind} transition:fly={animation}>
-    <slot />
-</ws-screen>