@axel669/zephyr 0.1.1

package/src/input/email.svelte

@@ -0,0 +1,102 @@
+<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 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"
+    bind:value
+    on:focus
+    on:blur
+    bind:this={input}
+    />
+
+    <slot name="start" />
+    <slot name="end" />
+</label>

package/src/input/file.svelte

@@ -0,0 +1,81 @@
+<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 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 {...$$restProps} type="file" on:input={handler} />
+
+    <slot name="start" />
+    <slot name="end" />
+</label>

package/src/input/number.svelte

@@ -0,0 +1,102 @@
+<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 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"
+    bind:value
+    on:focus
+    on:blur
+    bind:this={input}
+    />
+
+    <slot name="start" />
+    <slot name="end" />
+</label>

package/src/input/password.svelte

@@ -0,0 +1,99 @@
+<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 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"
+    bind:value
+    on:focus
+    on:blur
+    bind:this={input}
+    />
+
+    <slot name="start" />
+    <slot name="end" />
+</label>

package/src/input/search.svelte

@@ -0,0 +1,102 @@
+<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 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="search"
+    bind:value
+    on:focus
+    on:blur
+    bind:this={input}
+    />
+
+    <slot name="start" />
+    <slot name="end" />
+</label>

package/src/input/text.svelte

@@ -0,0 +1,102 @@
+<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 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"
+    bind:value
+    on:focus
+    on:blur
+    bind:this={input}
+    />
+
+    <slot name="start" />
+    <slot name="end" />
+</label>

package/src/link.svelte

@@ -0,0 +1,62 @@
+<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
+    - ### variant `string`
+        Sets the link-button type to `@<variant>` (ex: "flat" -> `@flat`).
+        Default variant is "flat". Currently supports "flat", "fill", "outline".
+
+    ## Usage
+    ```svelte
+    <Link color="primary" href="test" target="_blank">
+        Test
+    </Link>
+    <Link color="primary" href="logout" button variant="outline">
+        Logout
+    </Link>
+    ```
+    */
+
+    import wsx from "./wsx.mjs"
+
+    export let button = false
+    export let variant = "flat"
+    export let color = "default"
+
+    export let href = ""
+    export let rel = "noreferrer"
+    export let target = null
+
+    $: wind = {
+        "@button": button,
+        [`@${variant}`]: true,
+        $color: color,
+        ...$$restProps
+    }
+</script>
+
+<a {href} {target} {rel} use:wsx={wind}>
+    <slot />
+</a>