@esportsplus/ui 0.24.4 → 0.25.0

package/build/components/textarea/index.js

@@ -0,0 +1,37 @@
+import { reactive } from '@esportsplus/reactivity';
+import { html } from '@esportsplus/template';
+import { omit } from '@esportsplus/utilities';
+import form from '../../components/form/index.js';
+import template from '../../components/template/index.js';
+import './scss/index.scss';
+const OMIT = ['textarea-tag'];
+export default template.factory(function (attributes, content) {
+    let a = attributes['textarea-tag'], state = attributes.state || reactive({
+        active: false,
+        error: ''
+    });
+    return html `
+            <label
+                class='textarea'
+                ${{
+        class: () => state.active && '--active',
+        onfocusin: () => {
+            state.active = true;
+        },
+        onfocusout: () => {
+            state.active = false;
+        }
+    }}
+                ${a ? omit(attributes, OMIT) : attributes}
+            >
+                <textarea
+                    class='textarea-tag'
+                    onrender=${form.input.onrender(state)}
+                    ${a}
+                >
+                    ${a?.value}
+                </textarea>
+                ${content}
+            </label>
+        `;
+});

package/build/components/textarea/scss/index.scss

@@ -0,0 +1,2 @@
+@layer components {.textarea{background:var(--background);border:var(--border-width)var(--border-style)var(--border-color);border-radius:var(--border-radius);cursor:text;font-size:var(--font-size);line-height:var(--line-height);flex-wrap:wrap;align-items:center;width:100%;display:flex;position:relative}.textarea:invalid,.textarea:required{box-shadow:none}.textarea-tag{color:var(--color);padding:var(--padding-vertical)var(--padding-horizontal);white-space:normal;flex:auto;min-width:0}}
+/*$vite$:1*/

package/build/normalize/scss/index.scss

@@ -1,2 +1,2 @@
 @layer normalize {/*! modern-normalize v3.0.1 | MIT License | https://github.com/sindresorhus/modern-normalize */}
-*,:before,:after{box-sizing:border-box}html{-webkit-text-size-adjust:100%;tab-size:4;font-family:system-ui,Segoe UI,Roboto,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji;line-height:1.15}body{margin:0}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:ui-monospace,SFMono-Regular,Consolas,Liberation Mono,Menlo,monospace;font-size:1em}small{font-size:80%}sub,sup{vertical-align:baseline;font-size:75%;line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}table{border-color:currentColor}button,input,optgroup,select,textarea{margin:0;font-family:inherit;font-size:100%;line-height:1.15}button,[type=button],[type=reset],[type=submit]{-webkit-appearance:button}legend{padding:0}progress{vertical-align:baseline}::-webkit-inner-spin-button{height:auto}::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}
+*,:before,:after{box-sizing:border-box}html{-webkit-text-size-adjust:100%;tab-size:4;font-family:system-ui,Segoe UI,Roboto,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji;line-height:1.15}body{margin:0}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:ui-monospace,SFMono-Regular,Consolas,Liberation Mono,Menlo,monospace;font-size:1em}small{font-size:80%}sub,sup{vertical-align:baseline;font-size:75%;line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}table{border-color:currentColor}button,input,optgroup,select,textarea{margin:0;font-family:inherit;font-size:100%;line-height:1.15}button,[type=button],[type=reset],[type=submit]{-webkit-appearance:button}legend{padding:0}progress{vertical-align:baseline}::-webkit-inner-spin-button{height:auto}::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}button,input,select,textarea{font-family:inherit;font-size:inherit;line-height:inherit;background:0 0;border:0;border-radius:0;margin:0;padding:0}button,button:active,button:focus,button:hover,input,input:active,input:focus,input:hover,select,select:active,select:focus,select:hover,textarea,textarea:active,textarea:focus,textarea:hover{outline:none}button:invalid,input:invalid,select:invalid,textarea:invalid{box-shadow:none}form{width:100%;margin:0;padding:0}label{cursor:pointer}

package/package.json

@@ -4,7 +4,7 @@
     "@esportsplus/action": "^0.0.58",
     "@esportsplus/queue": "^0.1.0",
     "@esportsplus/reactivity": "^0.16.7",
-    "@esportsplus/template": "^0.23.0",
+    "@esportsplus/template": "^0.23.1",
     "@esportsplus/utilities": "^0.22.1",
     "modern-normalize": "^3.0.1"
   },
@@ -48,7 +48,7 @@
   "private": false,
   "sideEffects": false,
   "type": "module",
-  "version": "0.24.4",
+  "version": "0.25.0",
   "scripts": {
     "build": "run-s build:vite build:ts",
     "build:ts": "tsc && tsc-alias",

package/src/components/checkbox/index.ts

@@ -0,0 +1,45 @@
+import { reactive, root } from '@esportsplus/reactivity';
+import { html, type Attributes } from '@esportsplus/template';
+import { omit } from '@esportsplus/utilities';
+import form from '~/components/form';
+import './scss/index.scss';
+
+
+type A = Attributes & {
+    'checkbox-tag'?: Attributes,
+    state?: { active: boolean, error: string }
+};
+
+
+const OMIT = ['checkbox-tag'];
+
+
+export default function(attributes?: A) {
+    let a = attributes?.['checkbox-tag'],
+        state = attributes?.state || reactive({
+            active: false,
+            error: ''
+        });
+
+    if (a?.checked) {
+        state.active = true;
+    }
+
+    return html`
+        <div class='checkbox ${() => state.active && '--active'}' ${a ? omit(attributes!, OMIT) : attributes}>
+            <input
+                class='checkbox-tag'
+                type='checkbox'
+                ${{
+                    checked: a?.checked || root(() => state.active),
+                    onchange: (e: Event) => {
+                        state.active = (e.target as HTMLInputElement).checked;
+                    },
+                    onrender: form.input.onrender(state),
+                    value: a?.value || 1
+                }}
+                ${a}
+            >
+        </div>
+    `;
+};

package/src/components/checkbox/scss/index.scss

@@ -0,0 +1,50 @@
+@use '/lib';
+@use 'variables';
+
+.checkbox {
+    background: var(--background);
+    border-color: var(--border-color);
+    border-radius: var(--border-radius);
+    border-style: var(--border-style);
+    border-width: var(--border-width);
+    flex: 0 0 var(--width);
+    height: var(--height);
+    position: relative;
+    transition:
+        background var(--transition-duration) ease-in-out,
+        border-color var(--transition-duration) ease-in-out,
+        box-shadow var(--transition-duration) ease-in-out,
+        opacity var(--transition-duration) ease-in-out,
+        transform var(--transition-duration) ease-in-out;
+    width: var(--width);
+
+    &:invalid,
+    &:required {
+        box-shadow: none;
+    }
+
+    &::before {
+        border-bottom: var(--border-width) solid var(--accent);
+        border-right: var(--border-width) solid var(--accent);
+        bottom: 50%;
+        box-shadow: var(--box-shadow);
+        content: '';
+        height: var(--height);
+        opacity: var(--opacity);
+        position: absolute;
+        right: 92%;
+        transform: translate(var(--translateX), var(--translateY)) rotate(var(--rotate)) scale(var(--scale));
+        transform-origin: bottom center;
+        width: var(--width);
+    }
+
+    // Hide HTML Field Element
+    &-tag {
+        @include lib.position(absolute, 0 null null 0);
+        height: 0px;
+        opacity: 0;
+        pointer-events: none;
+        width: 0px;
+        z-index: 0;
+    }
+}

package/src/components/checkbox/scss/variables.scss

@@ -0,0 +1,72 @@
+@use '/lib';
+@use '/tokens';
+
+.checkbox {
+    --background: var(--background-default);
+    --background-active: var(--background-default);
+    --background-default: transparent;
+    --background-hover: var(--background-default);
+    --background-pressed: var(--background-default);
+    --border-color: var(--border-color-default);
+    --border-color-default: var(--background);
+    --border-radius: var(--border-radius-300);
+    --border-style: solid;
+    --border-width: 0px;
+    --box-shadow: var(--box-shadow-default);
+    --box-shadow-default: none;
+    --height: var(--size);
+    --margin-horizontal: calc(var(--width-switch) - var(--width));
+    --opacity: var(--opacity-default);
+    --opacity-active: var(--opacity-default);
+    --opacity-default: 1;
+    --opacity-hover: var(--opacity-default);
+    --opacity-pressed: var(--opacity-default);
+    --rotate: 45deg;
+    --scale: var(--scale-default);
+    --scale-active: 1;
+    --scale-default: 0;
+    --scale-hover: 1.08;
+    --scale-pressed: 0.98;
+    --size: var(--size-600);
+    --width: var(--height);
+    --width-switch: 40px;
+
+    &::before {
+        --border-width: 5px;
+        --box-shadow: 1px 1px 0 rgba(0, 0, 0, 0.16);
+        --height: 110%;
+        --translateX: 108%;
+        --translateY: 8%;
+        --width: 50%;
+
+        #{tokens.state(default, '.field')} & {
+            --translateY: 100%;
+        }
+    }
+
+    #{tokens.state(inactive, 'label')},
+    #{tokens.state(inactive)} {
+        @include tokens.state(hover) {
+            --background: var(--background-hover);
+            --border-color: var(--border-color-hover);
+            --box-shadow: var(--box-shadow-hover);
+            --color: var(--color-hover);
+            --opacity: var(--opacity-hover);
+            --scale: var(--scale-hover);
+        }
+
+        @include tokens.state(pressed) {
+            --background: var(--background-pressed);
+            --border-color: var(--border-color-pressed);
+            --box-shadow: var(--box-shadow-pressed);
+            --color: var(--color-pressed);
+            --opacity: var(--opacity-pressed);
+            --scale: var(--scale-pressed);
+        }
+    }
+
+    #{tokens.state(active)} {
+        --opacity: var(--opacity-active);
+        --scale: var(--scale-active);
+    }
+}

package/src/components/index.ts

@@ -5,17 +5,18 @@ export * as border from './border';
 export * as bubble from './bubble';
 export * as button from './button';
 export * as card from './card';
+export { default as checkbox } from './checkbox';
 export { default as clipboard } from './clipboard';
 export * as container from './container';
 export { default as counter } from './counter';
 export { default as ellipsis } from './ellipsis';
-export { default as field } from './field';
 export { default as form } from './form';
 export * as frame from './frame';
 export * as grid from './grid';
 export * as group from './group';
 export { default as highlight } from './highlight';
 export { default as icon } from './icon';
+export { default as input } from './input';
 export { default as json } from './json';
 export * as link from './link';
 export { default as loader } from './loader';
@@ -24,13 +25,18 @@ export * as modal from './modal';
 export { default as number } from './number';
 export { default as overlay } from './overlay';
 export * from './page';
+export { default as radio } from './radio';
+export { default as range } from './range';
 export { default as root } from './root';
 export * as row from './row';
+export { default as select } from './select';
+export { default as switch } from './switch';
 export { default as scrollbar } from './scrollbar';
 export { default as sidebar } from './sidebar';
 export { default as site } from './site';
 export { default as template } from './template';
 export * as text from './text';
+export { default as textarea } from './textarea';
 export * as thumbnail from './thumbnail';
 export { default as tooltip } from './tooltip';
 export { default as truncate } from './truncate';

package/src/components/input/index.ts

@@ -0,0 +1,52 @@
+import { reactive } from '@esportsplus/reactivity';
+import { html, type Attributes } from '@esportsplus/template';
+import { omit } from '@esportsplus/utilities';
+import form from '~/components/form';
+import template from '~/components/template';
+import './scss/index.scss';
+
+
+type A = Attributes & {
+    'input-tag'?: Attributes,
+    state?: { active: boolean, error: string }
+};
+
+
+const OMIT = ['input-tag'];
+
+
+export default template.factory(
+    function(attributes: A, content) {
+        let a = attributes['input-tag'],
+            state = attributes.state || reactive({
+                active: false,
+                error: ''
+            });
+
+        return html`
+            <label
+                class='input'
+                ${{
+                    class: () => state.active && '--active',
+                    onfocusin: () => {
+                        state.active = true;
+                    },
+                    onfocusout: () => {
+                        state.active = false;
+                    }
+                }}
+                ${a ? omit(attributes, OMIT) : attributes}
+            >
+                <input
+                    class='input-tag'
+                    ${{
+                        onrender: form.input.onrender(state),
+                        type: (attributes.type || 'text') as string
+                    }}
+                    ${a}
+                >
+                ${content}
+            </label>
+        `;
+    }
+);

package/src/components/input/scss/index.scss

@@ -0,0 +1,37 @@
+@use 'variables';
+
+.input {
+    align-items: center;
+    background: var(--background);
+    border: var(--border-width) var(--border-style) var(--border-color);
+    border-radius: var(--border-radius);
+    cursor: text;
+    display: flex;
+    overflow: hidden;
+    flex-wrap: wrap;
+    font-size: var(--font-size);
+    line-height: var(--line-height);
+    // Necessary To Maintain Height Of Hidden Password Fields In Floating Modals
+    // - Password Managers Cause Problems When Fields Are Not Using 'display:hidden' On Password Fields
+    min-height: calc((var(--padding-vertical) * 2) + var(--size));
+    position: relative;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    width: 100%;
+
+    &:invalid,
+    &:required {
+        box-shadow: none;
+    }
+
+    &-tag {
+        color: var(--color);
+        flex: 1 1 auto;
+        padding: var(--padding-vertical) var(--padding-horizontal);
+        min-width: 0;
+
+        &[type='number'] {
+            appearance: textfield;
+        }
+    }
+}

package/src/components/input/scss/variables.scss

@@ -0,0 +1,50 @@
+@use '/lib';
+@use '/tokens';
+
+.input {
+    --background: var(--background-default);
+    --background-active: var(--background-default);
+    --background-default: transparent;
+    --background-hover: var(--background-default);
+    --background-pressed: var(--background-default);
+    --border-color: var(--border-color-default);
+    --border-color-default: var(--background);
+    --border-radius: var(--border-radius-400);
+    --border-style: solid;
+    --border-width: 0px;
+    --box-shadow: var(--box-shadow-default);
+    --box-shadow-default: none;
+    --color: var(--color-default);
+    --color-active: var(--color-default);
+    --color-default: var(--color-text-400);
+    --color-hover: var(--color-default);
+    --color-pressed: var(--color-default);
+    --font-size: var(--font-size-400);
+    --line-height: var(--line-height-400);
+    --padding-horizontal: var(--size-400);
+    --padding-vertical: var(--size-400);
+    --size: var(--size-400);
+
+    #{tokens.state(inactive)} {
+        @include tokens.state(hover) {
+           --background: var(--background-hover);
+            --border-color: var(--border-color-hover);
+            --box-shadow: var(--box-shadow-hover);
+            --color: var(--color-hover);
+        }
+
+        @include tokens.state(pressed) {
+            --background: var(--background-pressed);
+            --border-color: var(--border-color-pressed);
+            --box-shadow: var(--box-shadow-pressed);
+            --color: var(--color-pressed);
+        }
+    }
+
+    #{tokens.state(active)} {
+        --background: var(--background-active);
+        --border-color: var(--border-color-active);
+        --box-shadow: var(--box-shadow-active);
+        --color: var(--color-active);
+    }
+}

package/src/components/radio/index.ts

@@ -0,0 +1,45 @@
+import { reactive, root } from '@esportsplus/reactivity';
+import { html, type Attributes } from '@esportsplus/template';
+import { omit } from '@esportsplus/utilities';
+import form from '~/components/form';
+import './scss/index.scss';
+
+
+type A = Attributes & {
+    'radio-tag'?: Attributes,
+    state?: { active: boolean, error: string }
+};
+
+
+const OMIT = ['radio-tag'];
+
+
+export default function(attributes?: A) {
+    let a = attributes?.['radio-tag'],
+        state = attributes?.state || reactive({
+            active: false,
+            error: ''
+        });
+
+    if (a?.checked) {
+        state.active = true;
+    }
+
+    return html`
+        <div class='radio ${() => state.active && '--active'}' ${a ? omit(attributes!, OMIT) : attributes}>
+            <input
+                class='radio-tag'
+                type='radio'
+                ${{
+                    checked: a?.checked || root(() => state.active),
+                    onchange: (e: Event) => {
+                        state.active = (e.target as HTMLInputElement).checked;
+                    },
+                    onrender: form.input.onrender(state),
+                    value: a?.value || 1
+                }}
+                ${a}
+            >
+        </div>
+    `;
+};

package/src/components/radio/scss/index.scss

@@ -0,0 +1,50 @@
+@use '/lib';
+@use 'variables';
+
+.radio {
+    background: var(--background);
+    border-color: var(--border-color);
+    border-radius: var(--border-radius);
+    border-style: var(--border-style);
+    border-width: var(--border-width);
+    flex: 0 0 var(--width);
+    height: var(--height);
+    position: relative;
+    transition:
+        background var(--transition-duration) ease-in-out,
+        border-color var(--transition-duration) ease-in-out,
+        box-shadow var(--transition-duration) ease-in-out,
+        opacity var(--transition-duration) ease-in-out,
+        transform var(--transition-duration) ease-in-out;
+    width: var(--width);
+
+    &:invalid,
+    &:required {
+        box-shadow: none;
+    }
+
+    &::before {
+        background: var(--accent);
+        border-radius: inherit;
+        bottom: 50%;
+        box-shadow: var(--box-shadow);
+        content: '';
+        height: var(--height);
+        opacity: var(--opacity);
+        right: 50%;
+        position: absolute;
+        transform: translate(var(--translateX), var(--translateY)) rotate(var(--rotate)) scale(var(--scale));
+        transform-origin: center;
+        width: var(--width);
+    }
+
+    // Hide HTML Field Element
+    &-tag {
+        @include lib.position(absolute, 0 null null 0);
+        height: 0px;
+        opacity: 0;
+        pointer-events: none;
+        width: 0px;
+        z-index: 0;
+    }
+}

package/src/components/radio/scss/variables.scss

@@ -0,0 +1,67 @@
+@use '/lib';
+@use '/tokens';
+
+.radio {
+    --background: var(--background-default);
+    --background-active: var(--background-default);
+    --background-default: transparent;
+    --background-hover: var(--background-default);
+    --background-pressed: var(--background-default);
+    --border-color: var(--border-color-default);
+    --border-color-default: var(--background);
+    --border-radius: 100%;
+    --border-style: solid;
+    --border-width: 0px;
+    --box-shadow: var(--box-shadow-default);
+    --box-shadow-default: none;
+    --height: var(--size);
+    --margin-horizontal: calc(var(--width-switch) - var(--width));
+    --opacity: var(--opacity-default);
+    --opacity-active: 1;
+    --opacity-default: 0.4;
+    --opacity-hover: var(--opacity-default);
+    --opacity-pressed: var(--opacity-default);
+    --rotate: 0deg;
+    --scale: var(--scale-default);
+    --scale-active: 0.9;
+    --scale-default: 0;
+    --scale-hover: 0.8;
+    --scale-pressed: 0.7;
+    --size: var(--size-600);
+    --width: var(--height);
+    --width-switch: 40px;
+
+    &::before {
+        --height: calc((var(--size) / 2) - (var(--border-width) * 2));
+        --box-shadow: 0 1px 0 rgba(0, 0, 0, 0.16);
+        --translateX: 50%;
+        --translateY: 50%;
+        --width: var(--height);
+    }
+
+    #{tokens.state(inactive, 'label')},
+    #{tokens.state(inactive)} {
+        @include tokens.state(hover) {
+            --background: var(--background-hover);
+            --border-color: var(--border-color-hover);
+            --box-shadow: var(--box-shadow-hover);
+            --color: var(--color-hover);
+            --opacity: var(--opacity-hover);
+            --scale: var(--scale-hover);
+        }
+
+        @include tokens.state(pressed) {
+            --background: var(--background-pressed);
+            --border-color: var(--border-color-pressed);
+            --box-shadow: var(--box-shadow-pressed);
+            --color: var(--color-pressed);
+            --opacity: var(--opacity-pressed);
+            --scale: var(--scale-pressed);
+        }
+    }
+
+    #{tokens.state(active)} {
+        --opacity: var(--opacity-active);
+        --scale: var(--scale-active);
+    }
+}

package/src/components/range/index.ts

@@ -0,0 +1,61 @@
+import { reactive, root } from '@esportsplus/reactivity';
+import { html, type Attributes } from '@esportsplus/template';
+import { omit } from '@esportsplus/utilities';
+import form from '~/components/form';
+import template from '~/components/template';
+import './scss/index.scss';
+
+
+type A = Attributes & {
+    'range-tag'?: Attributes,
+    state?: { active: boolean, error: string, value: number }
+};
+
+
+const OMIT = ['range-tag'];
+
+
+export default template.factory(
+    function(attributes: A, content) {
+        let a = attributes['range-tag'],
+            state = attributes.state || reactive({
+                active: false,
+                error: '',
+                value: 0
+            });
+
+        if (a?.value) {
+            state.value = Number( a.value );
+        }
+
+        return html`
+            <div
+                class='range --border-state --border-black'
+                ${{
+                    class: () => state.active && '--active',
+                    onfocusin: () => {
+                        state.active = true;
+                    },
+                    onfocusout: () => {
+                        state.active = false;
+                    }
+                }}
+                ${a ? omit(attributes, OMIT) : attributes}
+            >
+                <input
+                    class='range-tag'
+                    type='range'
+                    ${{
+                        oninput: (e) => {
+                            state.value = Number((e.target as HTMLInputElement).value);
+                        },
+                        onrender: form.input.onrender(state),
+                        value: root(() => (a?.value as number) || state.value || 0)
+                    }}
+                    ${a}
+                >
+                ${content}
+            </div>
+        `;
+    }
+);

package/src/components/range/scss/index.scss

@@ -0,0 +1,31 @@
+@use 'variables';
+
+.range {
+    margin: calc((var(--height) - var(--thumb-size)) / 2) 0;
+
+    &-tag {
+        background: var(--background);
+        border-radius: 240px;
+        border: 0px;
+        height: var(--height);
+        transition: opacity .2s;
+        width: var(--width);
+
+        &::-moz-range-thumb,
+        &::-webkit-slider-thumb {
+            background: var(--thumb-background);
+            border-radius: 100%;
+            border: var(--border-width) solid var(--border-color);
+            cursor: pointer;
+            height: var(--thumb-size);
+            width: var(--thumb-size);
+        }
+
+        &,
+        &::-moz-range-thumb,
+        &::-webkit-slider-thumb {
+            appearance: none;
+            outline: none;
+        }
+    }
+}