@esportsplus/ui 0.24.4 → 0.25.0

package/src/components/range/scss/variables.scss

@@ -0,0 +1,8 @@
+.range {
+    --background-default: var(--color-black-300);
+    --border-width: var(--border-width-700);
+    --height: var(--size-200);
+    --thumb-background: var(--color-white-400);
+    --thumb-size: var(--size-400);
+    --width: 100%;
+}

package/src/components/select/index.ts

@@ -0,0 +1,166 @@
+import { reactive } from '@esportsplus/reactivity';
+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 './scss/index.scss';
+
+
+const OMIT = [
+    'options',
+    'select-arrow',
+    'select-tag',
+    'select-text',
+    'scrollbar',
+    'scrollbar-container-content',
+    'tooltip-content',
+];
+
+
+type A = {
+    'select-arrow'?: Attributes;
+    'select-tag'?: Attributes;
+    'select-text'?: Attributes;
+    'scrollbar'?: Attributes;
+    'scrollbar-container-content'?: Attributes;
+    'tooltip-content'?: Attributes & { direction?: string };
+    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;
+
+
+function set(state: { active: boolean }, value: boolean) {
+    state.active = value;
+
+    if (state.active) {
+        root.onclick.push(() => state.active = false);
+
+        if (field) {
+            field.active = false;
+        }
+
+        field = state;
+    }
+    else if (field === state) {
+        field = null;
+    }
+}
+
+
+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='select'
+                ${omit(attributes, OMIT)}
+                ${{
+                    onclick: () => {
+                        if (state.render) {
+                            set(state, !state.active);
+                        }
+
+                        state.render = true;
+                    }
+                }}
+            >
+                <input class='select-tag'
+                    ${{
+                        name: attributes.name,
+                        onclick: () => { /* Prevent double click events from firing */ },
+                        onrender: form.input.onrender(state),
+                        value: () => state.selected
+                    }}
+                    ${attributes['select-tag']}
+                >
+
+                ${content || html`
+                    <div class='select-text' ${attributes['select-text']}>
+                        ${() => options[ state.selected! ] || '-'}
+                    </div>
+                `}
+
+                <div class='select-arrow' ${attributes['select-arrow']}></div>
+
+                ${() => {
+                    if (!state.render) {
+                        return;
+                    }
+
+                    let keys = Object.keys(options),
+                        selected = reactive(
+                            Object.fromEntries( keys.map(key => [key, false]) )
+                        );
+
+                    return scrollbar(
+                        {
+                            ...attributes['tooltip-content'],
+                            class: [
+                                ...toArray(attributes['tooltip-content']?.class),
+                                `tooltip-content tooltip-content--${attributes['tooltip-content']?.direction || 's'} --flex-column --width-full`
+                            ],
+                            onclick: (e: Event) => {
+                                let key = (e?.target as HTMLElement)?.dataset?.key;
+
+                                if (key === undefined) {
+                                    return;
+                                }
+
+                                let previous = state.selected!;
+
+                                set(state, false);
+                                state.selected = key;
+
+                                selected[key] = true;
+                                selected[previous] = false;
+                            },
+                            onconnect: () => {
+                                set(state, true);
+                            },
+                            scrollbar: attributes['scrollbar'],
+                            'scrollbar-container-content': attributes['scrollbar-container-content']
+                        },
+                        keys.map((key) => html`
+                            <div
+                                class='link'
+                                ${option}
+                                ${{
+                                    'data-key': key,
+                                    class: () => selected[key] && '--active',
+                                }}
+                            >
+                                <span class='--text-truncate --pointer-none'>
+                                    ${options[key]}
+                                </span>
+                            </div>
+                        `)
+                    );
+                }}
+            </label>
+        `;
+    }
+);

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;
+}

package/build/components/field/checkbox.d.ts

@@ -1,73 +0,0 @@
-import { type Attributes, type Renderable } from '@esportsplus/template';
-type A = Attributes & {
-    'field-mask-tag'?: Attributes;
-};
-declare const _default: {
-    checkbox: {
-        (): ReturnType<(this: {
-            mask: (attributes: A, state: {
-                active: boolean;
-            }) => Renderable<unknown>;
-        }, attributes: Readonly<Attributes>, content: (mask: ((attributes: A) => Renderable<unknown>)) => Renderable<unknown>) => Renderable<any>>;
-        <T extends Attributes>(attributes: T): ReturnType<(this: {
-            mask: (attributes: A, state: {
-                active: boolean;
-            }) => Renderable<unknown>;
-        }, attributes: Readonly<Attributes>, content: (mask: ((attributes: A) => Renderable<unknown>)) => Renderable<unknown>) => Renderable<any>>;
-        <T extends (mask: ((attributes: A) => Renderable<unknown>)) => Renderable<unknown>>(content: T): ReturnType<(this: {
-            mask: (attributes: A, state: {
-                active: boolean;
-            }) => Renderable<unknown>;
-        }, attributes: Readonly<Attributes>, content: (mask: ((attributes: A) => Renderable<unknown>)) => Renderable<unknown>) => Renderable<any>>;
-        (attributes: Attributes, content: (mask: ((attributes: A) => Renderable<unknown>)) => Renderable<unknown>): ReturnType<(this: {
-            mask: (attributes: A, state: {
-                active: boolean;
-            }) => Renderable<unknown>;
-        }, attributes: Readonly<Attributes>, content: (mask: ((attributes: A) => Renderable<unknown>)) => Renderable<unknown>) => Renderable<any>>;
-    };
-    radio: {
-        (): ReturnType<(this: {
-            mask: (attributes: A, state: {
-                active: boolean;
-            }) => Renderable<unknown>;
-        }, attributes: Readonly<Attributes>, content: (mask: ((attributes: A) => Renderable<unknown>)) => Renderable<unknown>) => Renderable<any>>;
-        <T extends Attributes>(attributes: T): ReturnType<(this: {
-            mask: (attributes: A, state: {
-                active: boolean;
-            }) => Renderable<unknown>;
-        }, attributes: Readonly<Attributes>, content: (mask: ((attributes: A) => Renderable<unknown>)) => Renderable<unknown>) => Renderable<any>>;
-        <T extends (mask: ((attributes: A) => Renderable<unknown>)) => Renderable<unknown>>(content: T): ReturnType<(this: {
-            mask: (attributes: A, state: {
-                active: boolean;
-            }) => Renderable<unknown>;
-        }, attributes: Readonly<Attributes>, content: (mask: ((attributes: A) => Renderable<unknown>)) => Renderable<unknown>) => Renderable<any>>;
-        (attributes: Attributes, content: (mask: ((attributes: A) => Renderable<unknown>)) => Renderable<unknown>): ReturnType<(this: {
-            mask: (attributes: A, state: {
-                active: boolean;
-            }) => Renderable<unknown>;
-        }, attributes: Readonly<Attributes>, content: (mask: ((attributes: A) => Renderable<unknown>)) => Renderable<unknown>) => Renderable<any>>;
-    };
-    switch: {
-        (): ReturnType<(this: {
-            mask: (attributes: A, state: {
-                active: boolean;
-            }) => Renderable<unknown>;
-        }, attributes: Readonly<Attributes>, content: (mask: ((attributes: A) => Renderable<unknown>)) => Renderable<unknown>) => Renderable<any>>;
-        <T extends Attributes>(attributes: T): ReturnType<(this: {
-            mask: (attributes: A, state: {
-                active: boolean;
-            }) => Renderable<unknown>;
-        }, attributes: Readonly<Attributes>, content: (mask: ((attributes: A) => Renderable<unknown>)) => Renderable<unknown>) => Renderable<any>>;
-        <T extends (mask: ((attributes: A) => Renderable<unknown>)) => Renderable<unknown>>(content: T): ReturnType<(this: {
-            mask: (attributes: A, state: {
-                active: boolean;
-            }) => Renderable<unknown>;
-        }, attributes: Readonly<Attributes>, content: (mask: ((attributes: A) => Renderable<unknown>)) => Renderable<unknown>) => Renderable<any>>;
-        (attributes: Attributes, content: (mask: ((attributes: A) => Renderable<unknown>)) => Renderable<unknown>): ReturnType<(this: {
-            mask: (attributes: A, state: {
-                active: boolean;
-            }) => Renderable<unknown>;
-        }, attributes: Readonly<Attributes>, content: (mask: ((attributes: A) => Renderable<unknown>)) => Renderable<unknown>) => Renderable<any>>;
-    };
-};
-export default _default;