@esportsplus/ui 0.17.7 → 0.18.1

package/src/components/counter/index.ts

@@ -1,24 +1,23 @@
 import { effect, reactive } from '@esportsplus/reactivity'
-import { html } from '@esportsplus/template';
+import { html, type Attributes } from '@esportsplus/template';
+import { omit } from '@esportsplus/utilities';
 import './scss/index.scss';
 
 
-type Options = {
-    attributes?: Record<string, unknown>;
+let formatters: Record<string, Intl.NumberFormat> = {};
+
+
+export default (data: Attributes & {
     currency?: 'IGNORE' | 'EUR' | 'GBP' | 'USD';
     decimals?: number;
     delay?: number;
     max?: number;
+    state?: { value: number },
     suffix?: string;
     value: number;
-};
-
-
-let formatters: Record<string, Intl.NumberFormat> = {};
-
-
-export default ({ attributes, currency, decimals, delay, max, suffix, value }: Options) => {
-    let api = reactive({ value: -1 }),
+}) => {
+    let { currency, decimals, delay, max, suffix, value } = data,
+        api = data.state || reactive({ value: -1 }),
         formatter = currency === 'IGNORE'
             ? undefined
             : formatters[currency || 'USD'] ??= new Intl.NumberFormat('en-US', {
@@ -76,43 +75,40 @@ export default ({ attributes, currency, decimals, delay, max, suffix, value }: O
         }
     });
 
-    return {
-        html: html`
-            <div class='counter' ${attributes}>
-                ${() => {
-                    let n = state.length;
-
-                    if (n === 0) {
-                        return '';
-                    }
+    return html`
+        <div class='counter' ${omit(data, ['currency', 'decimals', 'delay', 'max', 'state', 'suffix'])}>
+            ${() => {
+                let n = state.length;
 
-                    return html.reactive(state.render, function (value, i) {
-                        if (isNaN(parseInt(value as string, 10))) {
-                            return html`
-                                <span class='counter-character counter-character--symbol'>
-                                    ${value}
-                                </span>
-                            `;
-                        }
+                if (n === 0) {
+                    return '';
+                }
 
+                return html.reactive(state.render, function (value, i) {
+                    if (isNaN(parseInt(value as string, 10))) {
                         return html`
-                            <div
-                                class='
-                                    ${i > n - 3 && 'counter-character--fraction'}
-                                    counter-character
-                                '
-                            >
-                                <div class='counter-character-track' style='${() => `--value: ${this[i]}`}'>
-                                    <span>9</span>
-                                    ${[0, 1, 2, 3, 4, 5, 6, 7, 8, 9].map((value) => html`<span>${value}</span>`)}
-                                    <span>0</span>
-                                </div>
-                            </div>
+                            <span class='counter-character counter-character--symbol'>
+                                ${value}
+                            </span>
                         `;
-                    })
-                }}
-            </div>
-        `,
-        state: api
-    };
+                    }
+
+                    return html`
+                        <div
+                            class='
+                                ${i > n - 3 && 'counter-character--fraction'}
+                                counter-character
+                            '
+                        >
+                            <div class='counter-character-track' style='${() => `--value: ${this[i]}`}'>
+                                <span>9</span>
+                                ${[0, 1, 2, 3, 4, 5, 6, 7, 8, 9].map((value) => html`<span>${value}</span>`)}
+                                <span>0</span>
+                            </div>
+                        </div>
+                    `;
+                })
+            }}
+        </div>
+    `;
 };

package/src/components/counter/scss/index.scss

@@ -1,4 +1,4 @@
-@use './variables.scss';
+@use 'variables';
 
 .counter {
     display: flex;

package/src/components/ellipsis/index.ts

@@ -1,9 +1,9 @@
-import { html } from '@esportsplus/template';
+import { html, Attributes } from '@esportsplus/template';
 import './scss/index.scss';
 
 
-export default (attributes?: Record<string, string>) => html`
-    <div class="ellipsis" ${attributes}>
+export default (attributes?: Attributes) => html`
+    <div class='ellipsis' ${attributes}>
         <span></span>
         <span></span>
         <span></span>

package/src/components/ellipsis/scss/index.scss

@@ -1,4 +1,4 @@
-@use './variables.scss';
+@use 'variables';
 
 .ellipsis {
     span {

package/src/components/field/checkbox.ts

@@ -1,71 +1,86 @@
 import { reactive } from '@esportsplus/reactivity';
-import { html } from '@esportsplus/template';
-import { omit } from '@esportsplus/utilities';
-import description from './description';
+import { html, type Attributes, type Renderable } from '@esportsplus/template';
+import { omit, pick } from '@esportsplus/utilities';
+import template from '~/components/template';
 
 
-type Data = {
-    class?: string;
-    content?: unknown;
-    description?: Parameters<typeof description>[0]['description'];
-    mask?: Record<string, unknown>;
+type A = Attributes & {
+    checked?: boolean;
+    disabled?: boolean;
     name?: string;
-    style?: string;
-    tag?: Record<string, unknown>;
-    title: string;
+    required?: boolean;
+    type?: string;
     value?: unknown;
-} & Record<string, unknown>;
+};
 
 
-const FIELD_OMIT: (keyof Data)[] = ['content', 'description', 'mask', 'name', 'title', 'value'];
+const TAG_KEYS = ['checked', 'disabled', 'name', 'required'];
 
 
-export default (data: Data) => {
-    let state = reactive({
-            active: false
-        });
-
+function mask(attributes: A, modifier: string, state: { active: boolean }) {
     return html`
         <div
             class='
-                ${() => state.active && '--active'}
-                field
-                --flex-column
+                ${`field-mask--${modifier}`}
+                field-mask
             '
-            onchange='${(e: Event) => {
-                if ((e.target as HTMLInputElement).type !== 'checkbox') {
-                    return;
-                }
-
-                state.active = (e.target as HTMLInputElement)?.checked;
-            }}'
-            ${omit(data, FIELD_OMIT)}
+            ${omit(attributes, TAG_KEYS)}
         >
-            <div class='field-title --flex-horizontal-space-between --flex-vertical'>
-                ${data.title}
+            <input
+                ${attributes.checked || attributes.value || state.active && 'checked'}
+                class='field-mask-tag field-mask-tag--hidden'
+                type='${modifier === 'radio' ? 'radio' : 'checkbox'}'
+                value='${attributes.value || 1}'
+                ${pick(attributes, TAG_KEYS)}
+            >
+        </div>
+    `;
+}
 
-                <label
-                    class='
-                        ${data.mask?.class && String(data.mask.class).indexOf('field-mask--switch') !== -1 && 'field-mask--switch'}
-                        field-mask
-                        --margin-left --margin-400
-                    '
-                    ${data.mask}
-                >
-                    <input
-                        ${(data.class && data.class.indexOf('--active') !== -1) || data.value ? 'checked' : ''}
-                        ${data.name && `name='${data.name}'`}
-                        class='field-tag field-tag--hidden'
-                        type='checkbox'
-                        value='1'
-                        ${data.tag}
-                    >
-                </label>
-            </div>
 
-            ${data.content || ''}
+const field = template.factory<
+    Attributes & { state?: { active: boolean } },
+    (mask: ((attributes: A) => Renderable)) => Renderable
+>(
+    function(
+        this: ((attributes: A, state: { active: boolean }) => Renderable),
+        attributes,
+        content
+    ) {
+        let state = attributes.state || reactive({
+                active: false
+            });
 
-            ${description(data)}
-        </div>
-    `
+        return html`
+            <label
+                class='
+                    ${() => state.active && '--active'}
+                    field
+                '
+                onchange='${(e: Event) => {
+                    if ((e.target as HTMLInputElement).type !== 'checkbox') {
+                        return;
+                    }
+
+                    state.active = (e.target as HTMLInputElement)?.checked;
+                }}'
+                ${omit(attributes, ['state'])}
+            >
+                ${content((attributes: A) => this(attributes, state))}
+            </label>
+        `
+    }
+);
+
+
+export default {
+    checkbox: field.bind((attributes: A, state: { active: boolean }) => {
+        return mask(attributes, 'checkbox', state);
+    }),
+    radio: field.bind((attributes: A, state: { active: boolean }) => {
+        return mask(attributes, 'radio', state);
+    }),
+    switch: field.bind((attributes: A, state: { active: boolean }) => {
+        return mask(attributes, 'switch', state);
+    }),
 };

package/src/components/field/description.ts

@@ -1,14 +1,11 @@
-import { html } from '@esportsplus/template';
+import { html, type Attributes } from '@esportsplus/template';
+import template from '~/components/template';
 
 
-export default (data: { description?: { attributes?: Record<string, unknown>, content: unknown; } }) => {
-    if (!data?.description) {
-        return '';
-    }
-
-    return html`
-        <div class='field-description' ${data.description.attributes}>
-            ${data.description.content}
+export default template.factory<Attributes>(
+    (attributes, content) => html`
+        <div class='field-description' ${attributes}>
+            ${content}
         </div>
-    `;
-}
+    `
+);

package/src/components/field/error.ts

@@ -1,15 +1,15 @@
 import { html } from '@esportsplus/template';
 
 
-export default (data: { error: unknown }) => {
+export default (state: { error: unknown }) => {
     return () => {
-        if (!data.error) {
+        if (!state.error) {
             return '';
         }
 
         return html`
             <div class='field-error --text-bold'>
-                ${data.error}
+                ${state.error}
             </div>
         `;
     };

package/src/components/field/index.ts

@@ -1,11 +1,15 @@
 import checkbox from './checkbox';
-import file from './file';
-import optional from './optional';
+import description from './description';
+import input from './input';
 import select from './select';
-import s from './switch';
-import textarea from './textarea';
-import text from './text';
+import title from './title';
 import './scss/index.scss';
 
 
-export default { checkbox, file, optional, select, switch: s, textarea, text };
+const { checkbox: cb, radio, switch: sw } = checkbox;
+
+const { file, text, textarea } = input;
+
+
+export default { checkbox: cb, description, file, radio, select, switch: sw, textarea, text, title };
+export { cb as checkbox, description, file, radio, select, sw as switch, textarea, text, title };

package/src/components/field/input.ts

@@ -0,0 +1,125 @@
+import { reactive } from '@esportsplus/reactivity';
+import { html, type Attributes, type Renderable } from '@esportsplus/template';
+import { omit, pick } from '@esportsplus/utilities';
+import form from '~/components/form';
+import template from '~/components/template';
+import error from './error';
+
+
+const FILE_TAG_KEYS = ['accept', 'disabled', 'name', 'required', 'value'];
+
+const TEXT_TAG_KEYS = [
+    'autocapitalize',
+    'autocomplete',
+    'autocorrect',
+    'autofocus',
+    'disabled',
+    'maxlength',
+    'minlength',
+    'name',
+    'placeholder',
+    'readonly',
+    'required',
+    'spellcheck',
+    'type',
+    'value',
+    'wrap'
+];
+
+
+const field = template.factory<
+    Attributes & { state?: { active: boolean, error: string } },
+    (mask: typeof file | typeof text | typeof textarea) =>  Renderable
+>(
+    function(
+        this: typeof text | typeof textarea,
+        attributes,
+        content
+    ) {
+        let state = attributes.state || reactive({
+                active: false,
+                error: ''
+            });
+
+        return html`
+            <div
+                class='
+                    ${() => state.active && '--active'}
+                    field
+                '
+                onfocusin='${() => {
+                    state.active = true;
+                }}'
+                onfocusout='${() => {
+                    state.active = false;
+                }}'
+                ${omit(attributes, ['state'])}
+            >
+                ${content(
+                    ((...args: any[]) => (this.call as any)(state, ...args))
+                )}
+                ${error(state)}
+            </div>
+        `;
+    }
+);
+
+const file = template.factory<Attributes>(
+    function(this: { active: boolean, error: string }, attributes, content) {
+        return html`
+            <label
+                class='field-mask field-mask--file'
+                ${omit(attributes, FILE_TAG_KEYS)}
+            >
+                <input
+                    class='field-mask-tag field-mask-tag--hidden'
+                    onrender='${form.input.onrender(this)}'
+                    type='file'
+                    ${pick(attributes, FILE_TAG_KEYS)}
+                >
+
+                ${content}
+            </label>
+        `;
+    }
+);
+
+const text = template.factory<Attributes>(
+    function(this: { active: boolean, error: string }, attributes, content) {
+        return html`
+            <label class='field-mask field-mask--input' ${omit(attributes, TEXT_TAG_KEYS)}>
+                <input
+                    class='field-mask-tag'
+                    onrender='${form.input.onrender(this)}'
+                    type='${attributes.type || 'text'}'
+                    ${pick(attributes, TEXT_TAG_KEYS)}
+                >
+                ${content}
+            </label>
+        `;
+    }
+);
+
+const textarea = template.factory<Attributes>(
+    function(this: { active: boolean, error: string }, attributes, content) {
+        return html`
+            <label class='field-mask field-mask--textarea' ${omit(attributes, TEXT_TAG_KEYS)}>
+                <textarea
+                    class='field-mask-tag'
+                    onrender='${form.input.onrender(this)}'
+                    ${pick(attributes, TEXT_TAG_KEYS)}
+                >
+                    ${attributes.value}
+                </textarea>
+                ${content}
+            </label>
+        `;
+    }
+);
+
+
+export default {
+    file: field.bind(file),
+    text: field.bind(text),
+    textarea: field.bind(textarea)
+};

package/src/components/field/scss/{_check.scss → check.scss}

@@ -3,7 +3,6 @@
 
 @mixin css() {
     &-mask {
-
         &--checkbox,
         &--radio,
         &--switch {
@@ -38,7 +37,7 @@
             }
 
             // Hide HTML Field Element
-            .field-tag {
+            .field-mask-tag {
                 @include lib.position(absolute, 0 null null 0);
                 height: 0px;
                 opacity: 0;
@@ -83,7 +82,6 @@
 }
 
 @mixin variables() {
-
     label#{&},
     #{tokens.state(inactive, '.field:not(label)')} &-mask {
         @include tokens.state(hover) {
@@ -106,7 +104,6 @@
     }
 
     &-mask {
-
         &--checkbox,
         &--radio,
         &--switch {

package/src/components/field/scss/index.scss

@@ -1,14 +1,13 @@
 @use '/lib';
 @use '/tokens';
 @use 'check' as check;
-@use 'normalize' as *;
+@use 'normalize';
 @use 'text' as text;
-@use './variables.scss';
-
-@include normalize();
+@use 'variables';
 
 .field {
     display: flex;
+    flex-flow: column;
     gap: var(--margin-vertical) var(--margin-horizontal);
     position: relative;
     transition:
@@ -29,25 +28,6 @@
     }
 
 
-    &--optional {
-        max-height: var(--max-height);
-        opacity: 0;
-        pointer-events: none;
-        transition:
-            background var(--transition-duration) ease-in-out,
-            border-color var(--transition-duration) ease-in-out,
-            box-shadow var(--transition-duration) ease-in-out,
-            color var(--transition-duration) ease-in-out,
-            max-height var(--transition-duration) ease-in-out,
-            opacity var(--transition-duration) ease-in-out;
-
-        #{tokens.state(active, '.field')} & {
-            opacity: 1;
-            pointer-events: auto;
-        }
-    }
-
-
     &-description,
     &-error,
     &-title {
@@ -94,7 +74,6 @@
     }
 
     &-mask {
-
         // Pseudo Element Box Shadow
         &::after {
             @include lib.position(absolute, full);
@@ -129,6 +108,18 @@
                 z-index: 1;
             }
         }
+
+        &-tag {
+            &--hidden {
+                @include lib.position(absolute, 0 null null 0);
+                appearance: none;
+                height: 0px;
+                opacity: 0;
+                pointer-events: none;
+                width: 0px;
+                z-index: -1;
+            }
+        }
     }
 
     &-required {
@@ -138,18 +129,6 @@
         width: var(--size);
     }
 
-    &-tag {
-        &--hidden {
-            @include lib.position(absolute, 0 null null 0);
-            appearance: none;
-            height: 0px;
-            opacity: 0;
-            pointer-events: none;
-            width: 0px;
-            z-index: -1;
-        }
-    }
-
     &-title {
         font-weight: var(--font-weight);
         z-index: 1;

package/src/components/field/scss/normalize.scss

@@ -0,0 +1,34 @@
+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;
+}