@esportsplus/ui 0.24.5 → 0.25.1

package/src/components/{field/select.ts → select/index.ts}

@@ -1,33 +1,46 @@
 import { reactive } from '@esportsplus/reactivity';
-import { html, type Attributes, type Renderable } from '@esportsplus/template';
-import { isObject, omit, toArray } from '@esportsplus/utilities';
+import { html, Renderable, type Attributes } from '@esportsplus/template';
+import { omit, toArray } from '@esportsplus/utilities';
 import form from '~/components/form';
 import root from '~/components/root';
 import scrollbar, { Attributes as Attr } from '~/components/scrollbar';
 import template from '~/components/template';
-import error from './error';
+import './scss/index.scss';
 
 
-const OMIT_FIELD = ['options', 'state'];
-
-const OMIT_MASK = [
-    'field-mask-arrow',
-    'field-mask-text',
-    'field-mask-tag',
+const OMIT = [
+    'options',
+    'select-arrow',
+    'select-tag',
+    'select-text',
     'scrollbar',
     'scrollbar-container-content',
     'tooltip-content',
 ];
 
-const OMIT_OPTION = ['content'];
-
 
 type A = {
-    'field-mask-arrow'?: Attributes;
-    'field-mask-tag'?: Attributes;
-    'field-mask-text'?: Attributes;
+    'select-arrow'?: Attributes;
+    'select-tag'?: Attributes;
+    'select-text'?: Attributes;
+    'scrollbar'?: Attributes;
+    'scrollbar-container-content'?: Attributes;
     'tooltip-content'?: Attributes & { direction?: string };
-} & Attributes & Attr;
+    options: Record<number | string, Renderable<unknown>>;
+    option?: Attributes;
+} & (
+    {
+        selected?: number | string;
+        state?: never;
+    } | {
+        state: {
+            active: boolean;
+            error: string;
+            render: boolean;
+            selected?: number | string;
+        }
+    }
+) & Attributes & Attr;
 
 
 let field: { active: boolean } | null = null;
@@ -51,27 +64,20 @@ function set(state: { active: boolean }, value: boolean) {
 }
 
 
-const select = template.factory(
-    function(
-        this: {
-            options: { content: unknown } & Attributes;
-            option?: Attributes;
-            state: {
-                active: boolean;
-                error: string;
-                render: boolean;
-                selected: string | number;
-            }
-        },
-        attributes: A,
-        content: Renderable<unknown>
-    ) {
-        let { option, options, state } = this;
+export default template.factory<A>(
+    function(attributes: A, content) {
+        let { options, option } = attributes,
+            state = attributes.state || reactive({
+                active: false,
+                error: '',
+                render: false,
+                selected: attributes.selected || Object.keys(options)[0]
+            });
 
         return html`
             <label
-                class='field-mask field-mask--select'
-                ${omit(attributes, OMIT_MASK)}
+                class='select'
+                ${omit(attributes, OMIT)}
                 ${{
                     onclick: () => {
                         if (state.render) {
@@ -82,26 +88,23 @@ const select = template.factory(
                     }
                 }}
             >
-                <input class='field-mask-tag field-mask-tag--hidden'
+                <input class='select-tag'
                     ${{
                         name: attributes.name,
                         onclick: () => { /* Prevent double click events from firing */ },
                         onrender: form.input.onrender(state),
                         value: () => state.selected
                     }}
-                    ${attributes['field-mask-tag']}
+                    ${attributes['select-tag']}
                 >
 
                 ${content || html`
-                    <div class='field-mask-text' ${attributes['field-mask-text']}>
-                        ${() => {
-                            // @ts-ignore
-                            return (options[ state.selected ]?.content || '-');
-                        }}
+                    <div class='select-text' ${attributes['select-text']}>
+                        ${() => options[ state.selected! ] || '-'}
                     </div>
                 `}
 
-                <div class='field-mask-arrow' ${attributes['field-mask-arrow']}></div>
+                <div class='select-arrow' ${attributes['select-arrow']}></div>
 
                 ${() => {
                     if (!state.render) {
@@ -127,7 +130,7 @@ const select = template.factory(
                                     return;
                                 }
 
-                                let previous = state.selected;
+                                let previous = state.selected!;
 
                                 set(state, false);
                                 state.selected = key;
@@ -142,16 +145,16 @@ const select = template.factory(
                             'scrollbar-container-content': attributes['scrollbar-container-content']
                         },
                         keys.map((key) => html`
-                            <div class='link'
-                                ${omit(options[key] as Attributes, OMIT_OPTION)}
+                            <div
+                                class='link'
                                 ${option}
                                 ${{
+                                    'data-key': key,
                                     class: () => selected[key] && '--active',
-                                    'data-key': key
                                 }}
                             >
                                 <span class='--text-truncate --pointer-none'>
-                                    ${(options[key] as any).content}
+                                    ${options[key]}
                                 </span>
                             </div>
                         `)
@@ -160,63 +163,4 @@ const select = template.factory(
             </label>
         `;
     }
-);
-
-
-export default template.factory<
-    Attributes & {
-        options: Record<number | string, (number | string | Attributes & { content: unknown })>;
-        option?: Attributes;
-    } & (
-        {
-            selected?: number | string;
-            state?: never;
-        } |
-        {
-            state: {
-                active: boolean;
-                error: string;
-                render: boolean;
-                selected?: number | string;
-            }
-        }
-    ),
-    (mask: typeof select) => Renderable<unknown>
->((attributes, content) => {
-    let options = attributes.options,
-        state = attributes.state || reactive({
-            active: false,
-            error: '',
-            render: false,
-            selected: attributes.selected || Object.keys(options)[0]
-        });
-
-    for (let key in options) {
-        if (isObject(options[key])) {
-            continue;
-        }
-
-        options[key] = { content: options[key] };
-    }
-
-    return html`
-        <div class='field tooltip'
-            ${omit(attributes as any, OMIT_FIELD)}
-            ${{
-                class: () => state.active && '--active'
-            }}
-        >
-            ${content(
-                (...args: any[]) => (select.call as any)(
-                    {
-                        option: attributes.option,
-                        options: attributes.options,
-                        state
-                    },
-                    ...args
-                )
-            )}
-            ${error(state)}
-        </div>
-    `;
-});
+);

package/src/components/select/scss/index.scss

@@ -0,0 +1,36 @@
+@use '/lib';
+
+.select {
+    align-items: center;
+    background: var(--background);
+    border: var(--border-width) var(--border-style) var(--border-color);
+    border-radius: var(--border-radius);
+    cursor: pointer;
+    display: flex;
+    flex-wrap: wrap;
+    font-size: var(--font-size);
+    line-height: var(--line-height);
+    padding: var(--padding-vertical) calc((var(--padding-horizontal) / 1.5) + var(--arrow-size)) var(--padding-vertical) var(--padding-horizontal);
+    position: relative;
+    width: 100%;
+
+    &:invalid,
+    &:required {
+        box-shadow: none;
+    }
+
+    &-arrow {
+        @include lib.position(absolute, null calc(var(--padding-horizontal) + var(--arrow-spacer)) calc(50% + var(--arrow-spacer)) null);
+        border-color: var(--border-color);
+        border-style: var(--border-style);
+        border-width: 0 var(--border-width) var(--border-width) 0;
+        content: '';
+        height: var(--arrow-size);
+        transform: translateY(50%) rotate(45deg);
+        width: var(--arrow-size);
+    }
+
+    &-tag {
+        color: var(--color);
+    }
+}

package/src/components/select/scss/variables.scss

@@ -0,0 +1,12 @@
+.select {
+    --arrow-spacer: 1px;
+    --arrow-size: 6px;
+    --font-size: var(--font-size-400);
+    --line-height: var(--line-height-400);
+    --padding-horizontal: var(--size-400);
+    --padding-vertical: var(--size-400);
+
+    &-arrow {
+        --border-width: var(--border-width-500);
+    }
+}

package/src/components/switch/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 & {
+    'switch-tag'?: Attributes,
+    state?: { active: boolean, error: string }
+};
+
+
+const OMIT = ['switch-tag'];
+
+
+export default function(attributes?: A) {
+    let a = attributes?.['switch-tag'],
+        state = attributes?.state || reactive({
+            active: false,
+            error: ''
+        });
+
+    if (a?.checked) {
+        state.active = true;
+    }
+
+    return html`
+        <div class='switch' ${a ? omit(attributes!, OMIT) : attributes}>
+            <input
+                class='switch-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/switch/scss/index.scss

@@ -0,0 +1,48 @@
+@use '/lib';
+@use 'variables';
+
+.switch {
+    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 {
+        @include lib.position(absolute, var(--padding-vertical) null null var(--padding-horizontal));
+        background: var(--accent);
+        border-radius: inherit;
+        box-shadow: var(--box-shadow);
+        content: '';
+        height: var(--height);
+        opacity: var(--opacity);
+        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/switch/scss/variables.scss

@@ -0,0 +1,72 @@
+@use '/lib';
+@use '/tokens';
+
+.switch {
+    --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: 240px;
+    --border-style: solid;
+    --border-width: 0px;
+    --box-shadow: var(--box-shadow-default);
+    --box-shadow-default: none;
+    --height: var(--size);
+    --opacity: var(--opacity-default);
+    --opacity-active: var(--opacity-default);
+    --opacity-default: 1;
+    --opacity-hover: var(--opacity-default);
+    --opacity-pressed: var(--opacity-default);
+    --padding-horizontal: var(--border-width-400);
+    --padding-vertical: var(--border-width-400);
+    --rotate: 0deg;
+    --scale: var(--scale-default);
+    --scale-active: var(--scale-default);
+    --scale-default: 1;
+    --scale-hover: var(--scale-default);
+    --scale-pressed: var(--scale-default);
+    --size: var(--size-600);
+    --width: var(--width-switch);
+    --width-switch: 40px;
+
+    &::before {
+        --box-shadow: 0 1px 0 rgba(0, 0, 0, 0.16);
+        --height: calc(var(--size) - (var(--border-width) * 2) - (var(--padding-vertical) * 2));
+        --translateX: 0px;
+        --translateY: 0px;
+        --width: var(--height);
+
+        #{tokens.state(active, '.field')} & {
+            --translateX: calc(var(--width-switch) - (var(--border-width) * 2) - var(--height) - (var(--padding-horizontal) * 2));
+        }
+    }
+
+    #{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/text/scss/index.scss

@@ -8,4 +8,35 @@
     position: relative;
     transition: color var(--transition-duration) ease-in-out;
     width: var(--width);
+
+
+    &--error {
+        animation: textError 0.32s 1 linear;
+
+        @keyframes textError {
+            0% {
+                transform: translate(8px);
+            }
+
+            20% {
+                transform: translate(-8px);
+            }
+
+            40% {
+                transform: translate(4px);
+            }
+
+            60% {
+                transform: translate(-4px);
+            }
+
+            80% {
+                transform: translate(2px);
+            }
+
+            100% {
+                transform: translate(0px);
+            }
+        }
+    }
 }

package/src/components/textarea/index.ts

@@ -0,0 +1,51 @@
+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 & {
+    'textarea-tag'?: Attributes;
+    state?: { active: boolean, error: string };
+};
+
+
+const OMIT = ['textarea-tag'];
+
+
+export default template.factory(
+    function(attributes: A, 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 as string}
+                </textarea>
+                ${content}
+            </label>
+        `;
+    }
+);

package/src/components/textarea/scss/index.scss

@@ -0,0 +1,26 @@
+.textarea {
+    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;
+    flex-wrap: wrap;
+    font-size: var(--font-size);
+    line-height: var(--line-height);
+    position: relative;
+    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;
+        white-space: normal;
+    }
+}

package/src/components/textarea/scss/variables.scss

@@ -0,0 +1,49 @@
+@use '/tokens';
+
+.textarea {
+    --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/normalize/scss/index.scss

@@ -1 +1,36 @@
-@use 'modern-normalize/modern-normalize.css';
+@use 'modern-normalize/modern-normalize.css';
+
+button,
+input,
+select,
+textarea {
+    background: transparent;
+    border-radius: 0;
+    border: 0;
+    font-family: inherit;
+    font-size: inherit;
+    line-height: inherit;
+    margin: 0;
+    padding: 0;
+
+    &,
+    &:active,
+    &:focus,
+    &:hover {
+        outline: none;
+    }
+
+    &:invalid {
+        box-shadow: none;
+    }
+}
+
+form {
+    margin: 0;
+    padding: 0;
+    width: 100%;
+}
+
+label {
+    cursor: pointer;
+}