@esportsplus/ui 0.18.0 → 0.19.0

package/src/components/counter/index.ts

@@ -4,10 +4,13 @@ import { omit } from '@esportsplus/utilities';
 import './scss/index.scss';
 
 
+const OMIT = ['currency', 'decimals', 'delay', 'max', 'state', 'suffix', 'value'];
+
+
 let formatters: Record<string, Intl.NumberFormat> = {};
 
 
-export default (data: Attributes & {
+export default (attributes: Attributes & {
     currency?: 'IGNORE' | 'EUR' | 'GBP' | 'USD';
     decimals?: number;
     delay?: number;
@@ -16,8 +19,8 @@ export default (data: Attributes & {
     suffix?: string;
     value: number;
 }) => {
-    let { currency, decimals, delay, max, suffix, value } = data,
-        api = data.state || reactive({ value: -1 }),
+    let { currency, decimals, delay, max, suffix, value } = attributes,
+        api = attributes.state || reactive({ value: -1 }),
         formatter = currency === 'IGNORE'
             ? undefined
             : formatters[currency || 'USD'] ??= new Intl.NumberFormat('en-US', {
@@ -76,7 +79,7 @@ export default (data: Attributes & {
     });
 
     return html`
-        <div class='counter' ${omit(data, ['currency', 'decimals', 'delay', 'max', 'state', 'suffix'])}>
+        <div class='counter' ${omit(attributes, OMIT)}>
             ${() => {
                 let n = state.length;
 
@@ -85,7 +88,7 @@ export default (data: Attributes & {
                 }
 
                 return html.reactive(state.render, function (value, i) {
-                    if (isNaN(parseInt(value as string, 10))) {
+                    if (isNaN(parseInt(value, 10))) {
                         return html`
                             <span class='counter-character counter-character--symbol'>
                                 ${value}
@@ -94,20 +97,19 @@ export default (data: Attributes & {
                     }
 
                     return html`
-                        <div
-                            class='
-                                ${i > n - 3 && 'counter-character--fraction'}
-                                counter-character
-                            '
-                        >
-                            <div class='counter-character-track' style='${() => `--value: ${this[i]}`}'>
+                        <div class=' counter-character' ${{
+                            class: i > n - 3 && 'counter-character--fraction'
+                        }}>
+                            <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/field/checkbox.ts

@@ -14,59 +14,60 @@ type A = Attributes & {
 };
 
 
-const TAG_KEYS = ['checked', 'disabled', 'name', 'required'];
+const OMIT_FIELD = ['state'];
+
+const TAG = ['checked', 'disabled', 'name', 'required'];
 
 
 function mask(attributes: A, modifier: string, state: { active: boolean }) {
     return html`
         <div
-            class='
-                ${`field-mask--${modifier}`}
-                field-mask
-            '
-            ${omit(attributes, TAG_KEYS)}
+            class='field-mask'
+            ${omit(attributes, TAG)}
+            ${{
+                class: `field-mask--${modifier}`
+            }}
         >
             <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)}
+                ${{
+                    checked: attributes.checked || attributes.value || state.active,
+                    type: modifier === 'radio' ? 'radio' : 'checkbox',
+                    value: attributes.value || 1
+                }}
+                ${pick(attributes, TAG) as Attributes}
             >
         </div>
     `;
 }
 
 
-const field = template.factory<
-    Attributes & { state?: { active: boolean } },
-    (mask: ((attributes: A) => Renderable)) => Renderable
->(
+const field = template.factory(
     function(
-        this: ((attributes: A, state: { active: boolean }) => Renderable),
-        attributes,
-        content
+        this: ((attributes: A, state: { active: boolean }) => Renderable<unknown>),
+        attributes: Attributes & { state?: { active: boolean } },
+        content: (mask: ((attributes: A) => Renderable<unknown>)) => Renderable<unknown>
     ) {
-        let state = attributes.state || reactive({
+        let state = attributes?.state || reactive({
                 active: false
             });
 
         return html`
             <label
-                class='
-                    ${() => state.active && '--active'}
-                    field
-                '
-                onchange='${(e: Event) => {
-                    if ((e.target as HTMLInputElement).type !== 'checkbox') {
-                        return;
-                    }
+                class='field'
+                ${omit(attributes, OMIT_FIELD)}
+                ${{
+                    class: () => state.active && '--active',
+                    onchange: (e) => {
+                        if ((e.target as HTMLInputElement).type !== 'checkbox') {
+                            return;
+                        }
 
-                    state.active = (e.target as HTMLInputElement)?.checked;
-                }}'
-                ${omit(attributes, ['state'])}
+                        state.active = (e.target as HTMLInputElement)?.checked;
+                    }
+                }}
             >
-                ${content((attributes: A) => this(attributes, state))}
+                ${content((attributes) => this(attributes, state))}
             </label>
         `
     }

package/src/components/field/description.ts

@@ -1,8 +1,8 @@
-import { html, type Attributes } from '@esportsplus/template';
+import { html } from '@esportsplus/template';
 import template from '~/components/template';
 
 
-export default template.factory<Attributes>(
+export default template.factory(
     (attributes, content) => html`
         <div class='field-description' ${attributes}>
             ${content}

package/src/components/field/error.ts

@@ -1,7 +1,7 @@
-import { html } from '@esportsplus/template';
+import { html, Renderable } from '@esportsplus/template';
 
 
-export default (state: { error: unknown }) => {
+export default (state: { error: Renderable<unknown> }) => {
     return () => {
         if (!state.error) {
             return '';

package/src/components/field/index.ts

@@ -1,10 +1,15 @@
 import checkbox from './checkbox';
 import description from './description';
-import select from './select';
 import input from './input';
+import select from './select';
 import title from './title';
 import './scss/index.scss';
 
 
-// export default { checkbox, description, file, select, switch: s, textarea, text, title };
-// export { checkbox, description, file, select, s as switch, textarea, text, title };
+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

@@ -6,9 +6,11 @@ import template from '~/components/template';
 import error from './error';
 
 
-const FILE_TAG_KEYS = ['accept', 'disabled', 'name', 'required', 'value'];
+const FILE_TAG = ['accept', 'disabled', 'name', 'required', 'value'];
 
-const TEXT_TAG_KEYS = [
+const OMIT = ['state'];
+
+const TEXT_TAG = [
     'autocapitalize',
     'autocomplete',
     'autocorrect',
@@ -27,14 +29,11 @@ const TEXT_TAG_KEYS = [
 ];
 
 
-const field = template.factory<
-    Attributes & { state?: { active: boolean, error: string } },
-    (mask: typeof file | typeof text | typeof textarea) =>  Renderable
->(
+const field = template.factory(
     function(
         this: typeof text | typeof textarea,
-        attributes,
-        content
+        attributes: Attributes & { state?: { active: boolean, error: string } },
+        content: (mask: typeof file | typeof text | typeof textarea) => Renderable<unknown>
     ) {
         let state = attributes.state || reactive({
                 active: false,
@@ -43,17 +42,17 @@ const field = template.factory<
 
         return html`
             <div
-                class='
-                    ${() => state.active && '--active'}
-                    field
-                '
-                onfocusin='${() => {
-                    state.active = true;
-                }}'
-                onfocusout='${() => {
-                    state.active = false;
-                }}'
-                ${omit(attributes, ['state'])}
+                class='field'
+                ${omit(attributes, OMIT)}
+                ${{
+                    class: () => state.active && '--active',
+                    onfocusin: () => {
+                        state.active = true;
+                    },
+                    onfocusout: () => {
+                        state.active = false;
+                    }
+                }}
             >
                 ${content(
                     ((...args: any[]) => (this.call as any)(state, ...args))
@@ -64,18 +63,20 @@ const field = template.factory<
     }
 );
 
-const file = template.factory<Attributes>(
+const file = template.factory(
     function(this: { active: boolean, error: string }, attributes, content) {
         return html`
             <label
                 class='field-mask field-mask--file'
-                ${omit(attributes, FILE_TAG_KEYS)}
+                ${omit(attributes, FILE_TAG)}
             >
                 <input
                     class='field-mask-tag field-mask-tag--hidden'
-                    onrender='${form.input.onrender(this)}'
                     type='file'
-                    ${pick(attributes, FILE_TAG_KEYS)}
+                    ${pick(attributes, FILE_TAG) as Attributes}
+                    ${{
+                        onrender: form.input.onrender(this)
+                    }}
                 >
 
                 ${content}
@@ -84,15 +85,17 @@ const file = template.factory<Attributes>(
     }
 );
 
-const text = template.factory<Attributes>(
+const text = template.factory(
     function(this: { active: boolean, error: string }, attributes, content) {
         return html`
-            <label class='field-mask field-mask--input' ${omit(attributes, TEXT_TAG_KEYS)}>
+            <label class='field-mask field-mask--input' ${omit(attributes, TEXT_TAG)}>
                 <input
                     class='field-mask-tag'
-                    onrender='${form.input.onrender(this)}'
-                    type='${attributes.type || 'text'}'
-                    ${pick(attributes, TEXT_TAG_KEYS)}
+                    ${pick(attributes, TEXT_TAG) as Attributes}
+                    ${{
+                        onrender: form.input.onrender(this),
+                        type: attributes.type || 'text'
+                    }}
                 >
                 ${content}
             </label>
@@ -100,14 +103,19 @@ const text = template.factory<Attributes>(
     }
 );
 
-const textarea = template.factory<Attributes>(
-    function(this: { active: boolean, error: string }, attributes, content) {
+const textarea = template.factory(
+    function(this: { active: boolean, error: string }, attributes: Attributes & { value?: string }, content) {
         return html`
-            <label class='field-mask field-mask--textarea' ${omit(attributes, TEXT_TAG_KEYS)}>
+            <label
+                class='field-mask field-mask--textarea'
+                ${omit(attributes, TEXT_TAG)}
+            >
                 <textarea
                     class='field-mask-tag'
-                    onrender='${form.input.onrender(this)}'
-                    ${pick(attributes, TEXT_TAG_KEYS)}
+                    ${pick(attributes, TEXT_TAG) as Attributes}
+                    ${{
+                        onrender: form.input.onrender(this)
+                    }}
                 >
                     ${attributes.value}
                 </textarea>

package/src/components/field/select.ts

@@ -3,12 +3,12 @@ import { html, type Attributes, type Renderable } from '@esportsplus/template';
 import { isObject, omit, pick, toArray } from '@esportsplus/utilities';
 import form from '~/components/form';
 import root from '~/components/root';
-import scrollbar from '~/components/scrollbar';
+import scrollbar, { Attributes as A } from '~/components/scrollbar';
 import template from '~/components/template';
 import error from './error';
 
 
-const TAG_KEYS = [
+const PICK_TAG = [
     'autocomplete',
     'autofocus',
     'disabled',
@@ -17,15 +17,23 @@ const TAG_KEYS = [
     'type'
 ];
 
+const OMIT_FIELD = ['options', 'state'];
 
-const select = template.factory<
-    Attributes & Parameters<typeof scrollbar>[0] & {
-        text?: Attributes;
-        'tooltip-content'?: Attributes & { direction?: string };
-    }
->(
+const OMIT_MASK = [
+    ...PICK_TAG,
+    'field-mask-arrow',
+    'field-mask-text',
+    'scrollbar',
+    'scrollbar-container-content',
+    'tooltip-content',
+];
+
+const OMIT_OPTION = ['content'];
+
+
+const select = template.factory(
     function(
-        this:  {
+        this: {
             options: Record<number | string, Attributes & { content: unknown }>;
             option?: Attributes;
             state: {
@@ -35,7 +43,11 @@ const select = template.factory<
                 selected: string | number;
             }
         },
-        data,
+        attributes: Attributes & A & {
+            'field-mask-arrow'?: Attributes;
+            'field-mask-text'?: Attributes;
+            'tooltip-content'?: Attributes & { direction?: string };
+        },
         content
     ) {
         let { option, options, state } = this;
@@ -43,82 +55,86 @@ const select = template.factory<
         return html`
             <label
                 class='field-mask field-mask--select'
-                onclick='${() => {
-                    state.active = !state.active;
-                    state.render = true;
-
-                    if (state.active) {
-                        root.onclick.push(() => state.active = false);
+                ${omit(attributes, OMIT_MASK)}
+                ${{
+                    onclick: () => {
+                        state.active = !state.active;
+                        state.render = true;
+
+                        if (state.active) {
+                            root.onclick.push(() => state.active = false);
+                        }
                     }
-                }}'
-                ${omit(data, TAG_KEYS)}
+                }}
             >
-                <input
-                    class='field-mask-tag field-mask-tag--hidden'
-                    name='${data.name}'
-                    onclick='${() => { /* Prevent double click events from firing */ }}'
-                    onrender='${form.input.onrender(state)}'
-                    value='${() => state.selected}'
-                    ${pick(data, TAG_KEYS)}
+                <input class='field-mask-tag field-mask-tag--hidden'
+                    ${{
+                        name: attributes.name,
+                        onclick: () => { /* Prevent double click events from firing */ },
+                        onrender: form.input.onrender(state),
+                        value: () => state.selected
+                    }}
+                    ${pick(attributes, PICK_TAG) as Attributes}
                 >
 
                 ${content || html`
-                    <div class='field-mask-text' ${data.text}>
-                        ${() => options[ state.selected ] || '-'}
+                    <div class='field-mask-text' ${attributes['field-mask-text']}>
+                        ${() => (options[ state.selected ] || '-') as any}
                     </div>
                 `}
 
-                <div class='field-mask-arrow'></div>
+                <div class='field-mask-arrow' ${attributes['field-mask-arrow']}></div>
 
                 ${() => {
                     if (!state.render) {
                         return;
                     }
 
-                    let attributes = {
-                            ...data['tooltip-content'],
-                            scrollbar: { ...data['scrollbar'] },
-                            'scrollbar-container-content': { ...data['scrollbar-container-content'] }
-                        },
-                        keys = Object.keys(options),
+                    let keys = Object.keys(options),
                         selected = reactive(
                             Object.fromEntries( keys.map(key => [key, false]) )
                         );
 
-                    attributes.class = toArray(attributes.class);
-                    attributes.class.push(`tooltip-content tooltip-content--${attributes.direction || 's'} --flex-column --width-full`);
-
-                    attributes.onclick = (e: Event) => {
-                        let key = (e?.target as HTMLElement)?.dataset?.key;
-
-                        if (key === undefined) {
-                            return;
-                        }
-
-                        let previous = state.selected;
-
-                        state.selected = key;
-                        state.active = false;
-
-                        selected[key] = true;
-                        selected[previous] = false;
-                    };
-
-                    return scrollbar(attributes, keys.map((key) => html`
-                        <div
-                            class='
-                                ${() => selected[key] && '--active'}
-                                link
-                            '
-                            data-key='${key}'
-                            ${omit(options[key], ['content'])}
-                            ${option}
-                        >
-                            <span class='--text-truncate'>
-                                ${options[key]}
-                            </span>
-                        </div>
-                    `));
+                    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;
+
+                                state.selected = key;
+                                state.active = false;
+
+                                selected[key] = true;
+                                selected[previous] = false;
+                            },
+                            scrollbar: attributes['scrollbar'],
+                            'scrollbar-container-content': attributes['scrollbar-container-content']
+                        },
+                        keys.map((key) => html`
+                            <div class='link'
+                                ${omit(options[key], OMIT_OPTION)}
+                                ${option}
+                                ${{
+                                    class: () => selected[key] && '--active',
+                                    'data-key': key
+                                }}
+                            >
+                                <span class='--text-truncate'>
+                                    ${options[key]}
+                                </span>
+                            </div>
+                        `)
+                    );
                 }}
             </label>
         `;
@@ -126,9 +142,12 @@ const select = template.factory<
 );
 
 
+
+
+
 export default template.factory<
     Attributes & {
-        options: Record<number | string, number | string | Attributes & { content: unknown }>;
+        options: Record<number | string, (number | string | Attributes & { content: unknown })>;
         option?: Attributes;
     } & (
         {
@@ -143,45 +162,41 @@ export default template.factory<
             }
         }
     ),
-    (mask: typeof select) => Renderable
->(
-    (data, content) => {
-        let options = data.options,
-            state = data.state || reactive({
-                active: false,
-                error: '',
-                selected: data.selected || Object.keys(options)[0]
-            });
-
-        for (let key in options) {
-            if (isObject(options[key])) {
-                continue;
-            }
-
-            options[key] = { content: options[key] };
+    (mask: typeof select) => Renderable<unknown>
+>((attributes, content) => {
+    let options = attributes.options,
+        state = attributes.state || reactive({
+            active: false,
+            error: '',
+            selected: attributes.selected || Object.keys(options)[0]
+        });
+
+    for (let key in options) {
+        if (isObject(options[key])) {
+            continue;
         }
 
-        return html`
-            <div
-                class='
-                    ${() => state.active && '--active'}
-                    field
-                    tooltip
-                '
-                ${omit(data, ['options', 'state'])}
-            >
-                ${content(
-                    (...args: any[]) => (select.call as any)(
-                        {
-                            option: data.option,
-                            options: data.options,
-                            state
-                        },
-                        ...args
-                    )
-                )}
-                ${error(state)}
-            </div>
-        `;
+        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>
+    `;
+});