@axel669/zephyr 0.1.16 → 0.2.0-beta.0

package/src/grid.svelte

@@ -1,66 +0,0 @@
-<script>
-    /*md
-    [@] Components/Containers/Grid
-
-    # Grid
-
-    Container that uses grid layout by default with some nice default values.
-
-    ## Base
-    [Windstorm Grid](https://axel669.github.io/lib.windstorm/#components-grid)
-
-    ## Props
-    All [windstorm functions](https://axel669.github.io/lib.windstorm/#css-shorthands)
-    are supported.
-
-    - ### direction `string`
-        Sets `gr-dir`
-    - ### pad `string`
-        Sets `p`
-    - ### gap `string`
-        Sets `gap`
-    - ### cols `string|Array`
-        Sets `gr-col`. Accepts either an array of values that are joined by " "
-        or a regular string value.
-    - ### rows `string|Array`
-        Sets `gr-row`. Accepts either an array of values that are joined by " "
-        or a regular string value.
-    - ### autoCol `string`
-        Sets `gr-acol`
-    - ### autoRow `string`
-        Sets `gr-arow`
-
-    ## Usage
-    ```svelte
-    <Grid cross="stretch">
-        <Text>Content</Text>
-        <Text>More content</Text>
-        <Text>Event more content</Text>
-    <Grid>
-    ```
-    */
-    import wsx from "./wsx.mjs"
-
-    export let direction = false
-    export let pad = false
-    export let gap = false
-    export let cols = null
-    export let rows = null
-    export let autoCol = false
-    export let autoRow = false
-
-    $: wind = {
-        "gr-dir": direction,
-        "gr-col": cols?.join?.(" ") ?? cols ?? false,
-        "gr-row": rows?.join?.(" ") ?? rows ?? false,
-        "gr-acol": autoCol,
-        "gr-arow": autoRow,
-        p: pad,
-        gap: gap,
-        ...$$restProps
-    }
-</script>
-
-<ws-grid use:wsx={wind}>
-    <slot />
-</ws-grid>

package/src/icon.svelte

@@ -1,34 +0,0 @@
-<script>
-    /*md
-    [@] Components/Icon
-
-    # Icon
-
-    Displays a [Tabler Icon](https://tabler-icons.io/) and some optional text.
-    The icon will appear at the beginning of the text.
-
-    ## Base
-    [Windstorm Icon](https://axel669.github.io/lib.windstorm/#components-icon)
-
-    ## Props
-    All [windstorm functions](https://axel669.github.io/lib.windstorm/#css-shorthands)
-    are supported.
-
-    - ### name `string`
-        The name of the icon. Use the tabler icon class name without the "ti-".
-
-    ## Usage
-    ```svelte
-    <Icon name="hexagon" />
-    <Icon name="hexagons">Are the bestagons</Icon>
-    ```
-    */
-
-    import wsx from "./wsx.mjs"
-
-    export let name
-</script>
-
-<ws-icon class="ti-{name}" use:wsx={$$restProps}>
-    <slot />
-</ws-icon>

package/src/input/area.svelte

@@ -1,98 +0,0 @@
-<script>
-    /*md
-    [@] Components/Input/Area
-
-    # Input.Area
-
-    A multiline text input component.
-
-    ## Base
-    [Windstorm Labled Control](https://axel669.github.io/lib.windstorm/#components-labeled-control)
-    using a `<textarea>`
-
-    ## 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 textarea
-
-    ## Usage
-    ```js
-    import { Input } from "@axel669/svelte-wind"
-    ```
-    ```svelte
-    <Input.Area bind:value />
-    <Input.Area bind:value color="primary" />
-    <Input.Area bind:value label="Wat" hint="Blep"/>
-    <Input.Area bind:value bind:tvalue transform={txt => txt.toLowerCase()} />
-    <Input.Area 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 area = null
-    export const focus = () => area.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}
-    <textarea {disabled} {...$$restProps} bind:value on:focus on:blur bind:this={area} />
-
-    <slot name="start" />
-    <slot name="end" />
-</label>

package/src/input/elems.mjs

@@ -1,7 +0,0 @@
-export { default as Area } from "./area.svelte"
-export { default as Email } from "./email.svelte"
-export { default as File } from "./file.svelte"
-export { default as Number } from "./number.svelte"
-export { default as Password } from "./password.svelte"
-export { default as Search } from "./search.svelte"
-export { default as Text } from "./text.svelte"

package/src/input/email.svelte

@@ -1,104 +0,0 @@
-<script>
-    /*md
-    [@] Components/Input/Email
-
-    # Input.Email
-
-    A multiline text input component.
-
-    ## Base
-    [Windstorm Labled Control](https://axel669.github.io/lib.windstorm/#components-labeled-control)
-    using an input with type="email"
-
-    ## 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.Email bind:value />
-    <Input.Email bind:value color="primary" />
-    <Input.Email bind:value label="Wat" hint="Blep"/>
-    <Input.Email bind:value bind:tvalue transform={txt => txt.toLowerCase()} />
-    <Input.Email 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="email"
-    {disabled}
-    bind:value
-    on:focus
-    on:blur
-    bind:this={input}
-    />
-
-    <slot name="start" />
-    <slot name="end" />
-</label>

package/src/input/file.svelte

@@ -1,82 +0,0 @@
-<script>
-    /*md
-    [@] Components/Input/File
-
-    # Input.File
-
-    A multiline text input component.
-
-    ## Base
-    [Windstorm Labled Control](https://axel669.github.io/lib.windstorm/#components-labeled-control)
-    using an input with type="file"
-
-    ## 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
-    - ### 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
-
-    ## Usage
-    ```js
-    import { Input } from "@axel669/svelte-wind"
-    ```svelte
-    <Input.File bind:value />
-    <Input.File bind:value color="primary" />
-    <Input.File bind:value label="Wat" hint="Blep"/>
-    <Input.File bind:value bind:valid validate={file => file[0].type !== "text"} />
-    ```
-    */
-
-    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 validate = () => true
-    export let valid
-
-    const handler = (evt) => value = [...evt.target.files]
-
-    $: wind = {
-        "@flat": flat,
-        "@control": true,
-        $color: color,
-        ...$$restProps,
-    }
-
-    $: valid = validate(value)
-</script>
-
-<label use:wsx={wind} ws-error={error}>
-    {#if label}
-        <span ws-x="$text" ws-hint={hint}>{label}</span>
-    {/if}
-    <input {disabled} {...$$restProps} type="file" on:input={handler} />
-
-    <slot name="start" />
-    <slot name="end" />
-</label>

package/src/input/number.svelte

@@ -1,104 +0,0 @@
-<script>
-    /*md
-    [@] Components/Input/Number
-
-    # Input.Number
-
-    A multiline text input component.
-
-    ## Base
-    [Windstorm Labled Control](https://axel669.github.io/lib.windstorm/#components-labeled-control)
-    using an input with type="number"
-
-    ## 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.Number bind:value />
-    <Input.Number bind:value color="primary" />
-    <Input.Number bind:value label="Wat" hint="Blep"/>
-    <Input.Number bind:value bind:tvalue transform={parseInt} />
-    <Input.Number bind:value transform={parseInt} bind:valid validate={value => value > 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="number"
-    {disabled}
-    bind:value
-    on:focus
-    on:blur
-    bind:this={input}
-    />
-
-    <slot name="start" />
-    <slot name="end" />
-</label>

package/src/input/password.svelte

@@ -1,101 +0,0 @@
-<script>
-    /*md
-    [@] Components/Input/Password
-
-    # Input.Password
-
-    A multiline text input component.
-
-    ## Base
-    [Windstorm Labled Control](https://axel669.github.io/lib.windstorm/#components-labeled-control)
-    using an input with type="password"
-
-    ## 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 textarea
-
-    ## Usage
-    ```js
-    import { Input } from "@axel669/svelte-wind"
-    ```
-    ```svelte
-    <Input.Password bind:value />
-    <Input.Password bind:value color="primary" />
-    <Input.Password bind:value label="Wat" hint="Blep"/>
-    <Input.Password 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 validate = () => true
-    export let valid
-
-    let input = null
-    export const focus = () => input.focus()
-
-    $: wind = {
-        "@flat": flat,
-        "@control": true,
-        $color: color,
-        ...$$restProps,
-    }
-
-    $: valid = validate(value)
-</script>
-
-<label use:wsx={wind} ws-error={error}>
-    {#if label}
-        <span ws-x="$text" ws-hint={hint}>{label}</span>
-    {/if}
-    <input {...$$restProps}
-    type="password"
-    {disabled}
-    bind:value
-    on:focus
-    on:blur
-    bind:this={input}
-    />
-
-    <slot name="start" />
-    <slot name="end" />
-</label>

package/src/input/search.svelte

@@ -1,104 +0,0 @@
-<script>
-    /*md
-    [@] Components/Input/Search
-
-    # Input.Search
-
-    A multiline text input component.
-
-    ## Base
-    [Windstorm Labled Control](https://axel669.github.io/lib.windstorm/#components-labeled-control)
-    using an input with type="search"
-
-    ## 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.Search bind:value />
-    <Input.Search bind:value color="primary" />
-    <Input.Search bind:value label="Wat" hint="Blep"/>
-    <Input.Search bind:value bind:tvalue transform={txt => txt.toLowerCase()} />
-    <Input.Search 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}
-    {disabled}
-    type="search"
-    bind:value
-    on:focus
-    on:blur
-    bind:this={input}
-    />
-
-    <slot name="start" />
-    <slot name="end" />
-</label>