@esportsplus/ui 0.17.6 → 0.18.0

package/src/components/field/scss/{_text.scss → text.scss}

@@ -2,8 +2,10 @@
 
 @mixin css() {
     &-mask {
+        &--file,
         &--input,
-        &--select {
+        &--select,
+        &--textarea {
             align-items: center;
             background: var(--background);
             border: var(--border-width) var(--border-style) var(--border-color);
@@ -21,26 +23,27 @@
             }
 
             &,
-            .field-tag {
+            .field-mask-tag {
                 color: var(--color);
             }
-        }
 
-        // Truncate Overflowing Text
-        &--input .field-tag,
-        &--select .field-text {
-            overflow: hidden;
-            text-overflow: ellipsis;
-            white-space: nowrap;
+            // Truncate Overflowing Text
+            &.field-text {
+                overflow: hidden;
+                text-overflow: ellipsis;
+                white-space: nowrap;
+            }
         }
 
-        &--input {
+        &--file,
+        &--input,
+        &--textarea {
             cursor: text;
             // 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));
 
-            .field-tag {
+            .field-mask-tag {
                 flex: 1 1 auto;
                 padding: var(--padding-vertical) var(--padding-horizontal);
                 min-width: 0;
@@ -50,11 +53,15 @@
                 }
             }
 
-            textarea.field-tag {
+            textarea.field-mask-tag {
                 white-space: normal;
             }
         }
 
+        &--file {
+            cursor: pointer;
+        }
+
         &--select {
             cursor: pointer;
             padding: var(--padding-vertical) calc((var(--padding-horizontal) / 1.5) + var(--arrow-size)) var(--padding-vertical) var(--padding-horizontal);
@@ -75,22 +82,29 @@
             transform: translateY(50%) rotate(45deg);
             width: var(--arrow-size);
         }
-    }
 
-    &-text {
-        padding-right: var(--padding-horizontal);
+        &-text {
+            padding-right: var(--padding-horizontal);
+            pointer-events: none;
+        }
     }
 }
 
 @mixin variables() {
     &-mask {
+        &--file,
         &--input,
-        &--select {
+        &--select,
+        &--textarea {
             --font-size: var(--font-size-400);
             --line-height: var(--line-height-400);
+            --padding-horizontal: var(--padding-horizontal-400);
+            --padding-vertical: var(--padding-vertical-400);
         }
 
-        &--input {
+        &--file,
+        &--input,
+        &--textarea {
             --size: var(--size-400);
         }
 

package/src/components/field/scss/variables.scss

@@ -8,16 +8,6 @@
     --width: 100%;
 
 
-    &--optional {
-        --max-height: 0;
-        --max-height-active: 0;
-
-        #{tokens.state(active, '.field')} & {
-            --max-height: var(--max-height-active);
-        }
-    }
-
-
     &-description,
     &-error {
         --font-size: var(--font-size-300);

package/src/components/field/select.ts

@@ -1,175 +1,187 @@
 import { reactive } from '@esportsplus/reactivity';
-import { html } from '@esportsplus/template';
-import { isArray, omit } from '@esportsplus/utilities';
+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 description from './description';
+import template from '~/components/template';
 import error from './error';
-import title from './title';
-
-
-type Data<T extends Record<number | string, number | string>> = {
-    class?: string;
-    content?: unknown;
-    description?: Parameters<typeof description>[0]['description'];
-    effect?: (selected: number | string) => void;
-    mask?: Record<string, unknown>;
-    name?: string;
-    options: T;
-    option?: Record<string, unknown>;
-    required?: boolean;
-    selected: T[keyof T];
-    scrollbar?: Record<string, unknown>;
-    style?: string;
-    tag?: Record<string, unknown>;
-    text?: Record<string, unknown>;
-    title?: Parameters<typeof title>[0]['title'];
-    tooltip?: {
-        content?: Record<string, unknown>;
-    } & Record<string, unknown>;
-} & Parameters<typeof scrollbar>[0] & Record<string, unknown>;
-
-
-const FIELD_OMIT: (keyof Data<any>)[] = [
-    'content',
-    'description',
-    'effect',
-    'mask',
+
+
+const TAG_KEYS = [
+    'autocomplete',
+    'autofocus',
+    'disabled',
     'name',
-    'options', 'option',
     'required',
-    'selected', 'scrollbar',
-    'tag', 'text', 'title', 'tooltip'
+    'type'
 ];
 
 
-function parse(keys: (number | string)[], selected: number | string) {
-    let options: Record<string, boolean> = {};
-
-    for (let key of keys) {
-        options[key] = false;
+const select = template.factory<
+    Attributes & Parameters<typeof scrollbar>[0] & {
+        text?: Attributes;
+        'tooltip-content'?: Attributes & { direction?: string };
     }
+>(
+    function(
+        this:  {
+            options: Record<number | string, Attributes & { content: unknown }>;
+            option?: Attributes;
+            state: {
+                active: boolean;
+                error: string;
+                render: boolean;
+                selected: string | number;
+            }
+        },
+        data,
+        content
+    ) {
+        let { option, options, state } = this;
+
+        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(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)}
+                >
 
-    options[selected] = true;
-
-    return {
-        options,
-        selected: selected || keys[0]
-    };
-}
-
-function template<T extends Record<number | string, number | string>>(data: Data<T>, state: { active: boolean, options: Record<number | string, boolean>, selected: number | string }) {
-    data.scrollbar ??= {};
-    data.scrollbar.style ??= '--background-default: var(--color-black-400);';
-    data.tooltip ??= {};
+                ${content || html`
+                    <div class='field-mask-text' ${data.text}>
+                        ${() => options[ state.selected ] || '-'}
+                    </div>
+                `}
 
-    let content = data.tooltip.content ??= {};
+                <div class='field-mask-arrow'></div>
 
-    if (isArray(content.class)) {
-        content.class.push('tooltip-content tooltip-content--s --flex-column --width-full');
-    }
-    else {
-        content.class = [content.class, 'tooltip-content tooltip-content--s --flex-column --width-full'];
+                ${() => {
+                    if (!state.render) {
+                        return;
+                    }
+
+                    let attributes = {
+                            ...data['tooltip-content'],
+                            scrollbar: { ...data['scrollbar'] },
+                            'scrollbar-container-content': { ...data['scrollbar-container-content'] }
+                        },
+                        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>
+                    `));
+                }}
+            </label>
+        `;
     }
-
-    content.scrollbar = data.scrollbar;
-
-    return scrollbar(content, html`
-        <div
-            class='row --flex-column'
-            onclick='${(e: Event) => {
-                let key = (e?.target as HTMLElement)?.dataset?.key;
-
-                if (key === undefined) {
-                    return;
-                }
-
-                state.options[key] = true;
-                state.options[state.selected] = false;
-
-                state.active = false;
-                state.selected = key;
-
-                if (data.effect) {
-                    data.effect(key);
-                }
-            }}'
-        >
-            ${Object.keys( data.options || {} ).map((key: number | string) => html`
-                <div
-                    class='
-                        ${() => state.options[key] && '--active'}
-                        link
-                        --flex-vertical
-                    '
-                    data-key='${key}'
-                    ${data.option}
-                >
-                    <span class='--text-truncate'>
-                        ${data.options[key]}
-                    </span>
-                </div>
-            `)}
-        </div>
-    `);
-}
-
-
-export default <T extends Record<number | string, number | string>>(data: Data<T>) => {
-    let state = reactive(
-            Object.assign({
+);
+
+
+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;
+                selected?: number | string;
+            }
+        }
+    ),
+    (mask: typeof select) => Renderable
+>(
+    (data, content) => {
+        let options = data.options,
+            state = data.state || reactive({
                 active: false,
                 error: '',
-                render: false,
-            },
-            parse(Object.keys( data.options || {} ), data.selected))
-    );
-
-    data.mask ??= {};
-    data.mask.onclick = () => {
-        state.render = true;
-        state.active = !state.active;
-
-        if (state.active) {
-            root.onclick.push(() => state.active = false);
-        }
-    };
-
-    data.tag ??= {};
-    data.tag.name = data.name;
-    data.tag.onclick = () => { /* Prevent double click events from firing */ };
-    data.tag.onrender = form.input.onrender(state);
-    data.tag.value = () => state.selected;
-
-    return html`
-        <div class='
-                ${() => state.active ? '--active' : ''}
-                field
-                tooltip
-                --flex-column
-            '
-            ${omit(data, FIELD_OMIT)}
-        >
-            ${title(data)}
-
-            <label
-                class='field-mask field-mask--select --flex-row --padding-400'
-                ${data.mask}
-            >
-                <input class='field-tag field-tag--hidden' ${data.tag}>
+                selected: data.selected || Object.keys(options)[0]
+            });
 
-                <div class='field-text' style='pointer-events: none' ${data.text}>
-                    ${() => data.options[ state.selected ] || '-'}
-                </div>
+        for (let key in options) {
+            if (isObject(options[key])) {
+                continue;
+            }
 
-                <div class='field-mask-arrow'></div>
-
-                ${() => state.render && template(data, state)}
-            </label>
+            options[key] = { content: options[key] };
+        }
 
-            ${description(data)}
-            ${error(state)}
-        </div>
-    `;
-};
+        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>
+        `;
+    }
+);

package/src/components/field/title.ts

@@ -1,19 +1,17 @@
-import { html } from '@esportsplus/template';
+import { html, Attributes } from '@esportsplus/template';
+import { omit } from '@esportsplus/utilities';
 import tooltip from '~/components/tooltip';
+import template from '~/components/template';
 
 
-export default (data: { required?: boolean, title?: { attributes?: Record<string, unknown>, content: unknown; } }) => {
-    if (!data?.title) {
-        return '';
-    }
+export default template.factory<Attributes & { required?: boolean }>(
+    (attributes, content) => html`
+        <div class='field-title --flex-horizontal-space-between --flex-vertical' ${omit(attributes, ['required'])}>
+            ${content}
 
-    return html`
-        <div class='field-title --flex-horizontal-space-between --flex-vertical' ${data.title.attributes}>
-            ${data.title.content}
-
-            ${data?.required && tooltip.onhover({ class: 'bubble --background-primary --margin-left' }, html`
+            ${attributes.required && tooltip.onhover({ class: 'bubble --background-primary --margin-left' }, html`
                 <span class='tooltip-message tooltip-message--w'>Required</span>
             `)}
         </div>
-    `;
-}
+    `
+);

package/src/components/footer/index.ts

@@ -1,35 +1,25 @@
-import { html, svg } from '@esportsplus/template';
+import { html, Attributes, svg } from '@esportsplus/template';
 import './scss/index.scss';
+import { omit } from '@esportsplus/utilities';
 
 
 type Data = {
-    copyright: {
-        attributes?: Record<string, unknown>;
-        brand: string;
-    };
-    footer?: {
-        attributes: Record<string, unknown>;
-    };
-    nav?: {
-        attributes?: Record<string, unknown>;
-        links: { text: string, url: string }[];
-    };
-    social?: {
-        attributes?: Record<string, unknown>;
-        links: { icon: string, url: string }[]
-    };
+    copyright: Attributes & { brand: string };
+    footer?: Attributes;
+    nav?: Attributes & { links: { text: string, url: string }[] };
+    social?: Attributes & { links: { icon: string, url: string }[] };
 };
 
 
-function copy({ attributes, brand }: Data['copyright']) {
+function copy(data: Data['copyright']) {
     return html`
         <div class='footer-copyright group-item --flex-center'>
             <div
                 class='text --padding-vertical --padding-300 --text-300'
                 style='--color-default: var(--color-grey-500);'
-                ${attributes}
+                ${omit(data, ['brand'])}
             >
-                &copy; ${`${new Date().getFullYear()} ${brand}, All rights reserved`}
+                &copy; ${`${new Date().getFullYear()} ${data.brand}, All rights reserved`}
             </div>
         </div>
     `;
@@ -38,7 +28,7 @@ function copy({ attributes, brand }: Data['copyright']) {
 
 export default ({ copyright, footer, nav, social }: Data) => {
     return html`
-        <footer class='footer' ${footer?.attributes}>
+        <footer class='footer' ${footer}>
             <div class='container'>
                 <div class='group group--offset-top --flex-center --margin-400'>
 
@@ -49,7 +39,7 @@ export default ({ copyright, footer, nav, social }: Data) => {
                                     class='link --color-white --padding-vertical-300 --text-300'
                                     href='${url}'
                                     style='--color-default: var(--color-grey-500);'
-                                    ${nav.attributes}
+                                    ${omit(nav, ['links'])}
                                 >
                                     ${text}
                                 </a>
@@ -66,7 +56,7 @@ export default ({ copyright, footer, nav, social }: Data) => {
                                 class='link --color-white --padding-0px'
                                 href='${url}'
                                 style='--color-default: var(--color-grey-500);'
-                                ${social.attributes}
+                                ${omit(social, ['links'])}
                             >
                                 <div class='icon --size-500'>
                                     ${svg.sprite(icon)}

package/src/components/form/input.ts

@@ -1,14 +1,19 @@
+import { Element } from '@esportsplus/template';
+
+
 let key = Symbol();
 
 
-const get = (element?: HTMLInputElement | HTMLSelectElement) => {
-    // @ts-ignore
-    return element ? element[key] : undefined;
+const get = (element?: Element): { error: string } | undefined => {
+    if (element) {
+        return element[key] as { error: string } | undefined;
+    }
+
+    return undefined;
 };
 
 const onrender = (reactive: { error: string }) => {
-    return (element: HTMLInputElement | HTMLSelectElement) => {
-        // @ts-ignore
+    return (element: Element) => {
         element[key] = reactive;
     };
 };

package/src/components/frame/index.ts

@@ -1 +1,14 @@
-import './scss/index.scss';
+import { toArray } from '@esportsplus/utilities';
+import scrollbar from '~/components/scrollbar';
+import template from '~/components/template';
+import './scss/index.scss';
+
+
+export default template.factory<Parameters<typeof scrollbar>[0]>(
+    (attributes, content) => {
+        attributes.class = toArray(attributes.class);
+        attributes.class.push('frame');
+
+        return scrollbar(attributes, content);
+    }
+);

package/src/components/frame/scss/index.scss

@@ -1,7 +1,9 @@
 .frame {
+    cursor: default;
     display: none;
     flex-wrap: wrap;
     justify-content: flex-start;
+    max-width: 100%;
     position: relative;
     width: 100%;
 

package/src/components/grid/scss/index.scss

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

package/src/components/group/scss/index.scss

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

package/src/components/highlight/index.ts

@@ -1,4 +1,5 @@
 import { reactive } from '@esportsplus/reactivity'
+import { Element } from '@esportsplus/template';
 import './scss/index.scss';
 
 
@@ -39,7 +40,7 @@ export default (background: string) => {
     return {
         attributes: {
             class: 'highlight',
-            onrender: function(element: HTMLElement & Record<PropertyKey, unknown>) {
+            onrender: function(element: Element) {
                 element[key] = state;
                 observer!.observe(element);
             },

package/src/components/highlight/scss/index.scss

@@ -1,4 +1,4 @@
-@use './variables.scss';
+@use 'variables';
 
 .highlight {
     background: linear-gradient(90deg, var(--background) 50%, transparent 50%) 110% 0 / 200% 100% no-repeat;