@axel669/zephyr 0.1.17 → 0.2.0-beta.1

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>

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>