@esportsplus/ui 0.54.0 → 0.55.0

package/package.json

@@ -3,7 +3,7 @@
   "dependencies": {
     "@esportsplus/action": "^0.1.8",
     "@esportsplus/reactivity": "^0.36.7",
-    "@esportsplus/template": "^0.49.0",
+    "@esportsplus/template": "^0.50.0",
     "@esportsplus/utilities": "^0.28.5",
     "modern-normalize": "^3.0.1"
   },
@@ -58,7 +58,7 @@
     "**/*.scss"
   ],
   "type": "module",
-  "version": "0.54.0",
+  "version": "0.55.0",
   "scripts": {
     "build": "run-s build:vite build:ts",
     "build:ts": "tsc",

package/pnpm-workspace.yaml

@@ -15,7 +15,7 @@ minimumReleaseAgeExclude:
   - '@esportsplus/action@0.1.7 || 0.1.8'
   - '@esportsplus/queue@0.4.5 || 0.4.6'
   - '@esportsplus/reactivity@0.36.4 || 0.36.6 || 0.36.7'
-  - '@esportsplus/template@0.44.4 || 0.44.6 || 0.45.0 || 0.45.1 || 0.45.3 || 0.46.1 || 0.46.2 || 0.46.3 || 0.46.4 || 0.46.5 || 0.46.6 || 0.48.1 || 0.49.0'
+  - '@esportsplus/template@0.44.4 || 0.44.6 || 0.45.0 || 0.45.1 || 0.45.3 || 0.46.1 || 0.46.2 || 0.46.3 || 0.46.4 || 0.46.5 || 0.46.6 || 0.48.1 || 0.49.0 || 0.50.0'
   - '@esportsplus/utilities@0.28.3 || 0.28.4 || 0.28.5'
   - '@esportsplus/vite@0.14.2 || 0.14.5 || 0.14.6'
   - '@esportsplus/*'

package/src/components/accordion/index.ts

@@ -1,23 +1,16 @@
-import { html, Attributes, component } from '@esportsplus/template';
-import { omit } from '@esportsplus/utilities';
+import { reactive } from '@esportsplus/reactivity';
+import { html, component, type Attributes } from '@esportsplus/template';
 import './scss/index.scss';
 
 
-type A = Attributes & { state: { active: boolean | number } };
-
-
-const OMIT = ['state'];
-
-
-export default component<A>(
-    function(attributes: A, content) {
-        let state = attributes.state;
-
+export default component<Attributes & { state?: { active: boolean | number } }>(
+    function({ state = reactive({ active: false }), ...attributes }, content) {
         return html`
             <div
                 class='accordion'
-                ${omit(attributes, OMIT)}
+                ${attributes}
                 ${{
+                    class: () => state.active && '--active',
                     inert: () => !state.active
                 }}
             >
@@ -25,4 +18,4 @@ export default component<A>(
             </div>
         `;
     }
-);
+);

package/src/components/accordion/scss/index.scss

@@ -1,9 +1,11 @@
+@use '/tokens';
+
 .accordion {
     display: grid;
     grid-template-rows: 1fr;
     transition: grid-template-rows .3s;
 
-    &[inert] {
+    @include tokens.state(inactive) {
         grid-template-rows: 0fr;
     }
 

package/src/components/checkbox/constants.ts

@@ -0,0 +1,4 @@
+const CHECKBOX_INPUT = Symbol.for('@esportsplus/ui/checkbox.input');
+
+
+export { CHECKBOX_INPUT };

package/src/components/checkbox/index.ts

@@ -1,51 +1,40 @@
 import { html, type Attributes } from '@esportsplus/template';
 import { reactive } from '@esportsplus/reactivity';
-import { omit } from '@esportsplus/utilities';
 import form from '~/components/form';
 import icon from '~/components/icon';
+import { CHECKBOX_INPUT } from './constants';
 import check from './svg/check.svg';
 import './scss/index.scss';
 
 
-type A = Attributes & {
-    'aria-label'?: string;
-    checked?: boolean;
-    id?: string;
-    name?: string;
-    state?: { error: string };
-    value?: number | string;
-};
-
-
-const OMIT = ['aria-label', 'checked', 'id', 'name', 'state', 'value'];
+type A = Attributes & { [CHECKBOX_INPUT]?: Attributes };
 
 
 const factory = (type: 'checkbox' | 'radio' | 'switch') => {
-    function template(this: { attributes?: Exclude<A, 'state'> } | void, attributes?: A) {
-        let state = attributes?.state || reactive({ error: '' });
-
+    function template(
+        this: { attributes?: A } | void,
+        { state = reactive({ error: '' }), ...attributes }: A & { state?: { error: string } } = {}
+    ) {
         return html`
             <div
                 class='checkbox ${(type === 'radio' || type === 'switch') && `checkbox--${type}`}'
-                ${this?.attributes && omit(this.attributes, OMIT)}
-                ${attributes && omit(attributes, OMIT)}
+                ${this?.attributes}
+                ${attributes}
             >
                 <input
-                    aria-label=${attributes?.['aria-label'] ?? this?.attributes?.['aria-label']}
-                    checked=${attributes?.checked}
                     class='checkbox-tag'
-                    id=${attributes?.id ?? this?.attributes?.id}
-                    name=${attributes?.name ?? this?.attributes?.name}
+                    value='1'
+                    ${this?.attributes?.[CHECKBOX_INPUT]}
+                    ${attributes[CHECKBOX_INPUT]}
                     onrender=${form.input.onrender(state)}
                     type=${type === 'radio' ? 'radio' : 'checkbox'}
-                    value=${attributes?.value ?? 1}
                 >
                 ${type === 'checkbox' && icon({ 'aria-hidden': true, class: 'checkbox-check' }, check)}
             </div>
         `;
     }
 
-    return template;
+    return Object.assign(template, { input: CHECKBOX_INPUT } as const);
 };
 
 

package/src/components/clipboard/copy.ts

@@ -1,29 +1,24 @@
 import { component, html, type Attributes, type Renderable } from '@esportsplus/template';
 import { reactive } from '@esportsplus/reactivity';
-import { omit } from '@esportsplus/utilities';
 import write from './write';
 
 
 type A = Attributes & {
-    onerror?: () => void;
     timeout?: number;
     value: string;
 };
 
 
-const OMIT = ['onerror', 'timeout', 'value'];
-
-
-export default component<A, (state: { copied: boolean }) => Renderable<unknown>>(
-    (attributes, content) => {
-        let state = reactive({ copied: false }),
+export default component<A, (state: { copied: boolean, failed: boolean }) => Renderable<unknown>>(
+    ({ timeout = 3000, value, ...attributes }, content) => {
+        let state = reactive({ copied: false, failed: false }),
             timer: ReturnType<typeof setTimeout> | undefined,
             connected = true;
 
         return html`
             <button
                 type='button'
-                ${omit(attributes, OMIT)}
+                ${attributes}
                 ${{
                     onconnect: () => { connected = true; },
                     ondisconnect: () => {
@@ -35,7 +30,7 @@ export default component<A, (state: { copied: boolean }) => Renderable<unknown>>
                         event.preventDefault();
                         event.stopPropagation();
 
-                        let copied = await write(attributes.value);
+                        let copied = await write(value);
 
                         if (!connected) {
                             return;
@@ -45,11 +40,11 @@ export default component<A, (state: { copied: boolean }) => Renderable<unknown>>
                         state.copied = copied;
 
                         if (!copied) {
-                            attributes.onerror?.();
+                            state.failed = true;
                             return;
                         }
 
-                        timer = setTimeout(() => { state.copied = false; }, attributes.timeout ?? 3000);
+                        timer = setTimeout(() => { state.copied = false; }, timeout);
                     }
                 }}
             >

package/src/components/clipboard/onclick.ts

@@ -1,30 +1,25 @@
 import { component, html, type Attributes, type Renderable } from '@esportsplus/template';
 import { reactive } from '@esportsplus/reactivity';
-import { omit } from '@esportsplus/utilities';
 import write from './write';
 
 
 type A = { timeout?: number, value: string } & Attributes;
 
 
-const OMIT = ['timeout', 'value'];
-
-
 export default component<A, (state: { copied: boolean }) => Renderable<unknown>>(
-    function(attributes, content) {
+    function({ timeout = 1000 * 2, value, ...attributes }, content) {
         let state = reactive({
                 copied: false
-            }),
-            timeout = attributes.timeout || 1000 * 2;
+            });
 
         return html`
             <div
-                ${omit(attributes, OMIT)}
+                ${attributes}
                 onclick=${(e: MouseEvent) => {
                     e.preventDefault();
                     e.stopPropagation();
 
-                    void write(attributes.value).then(() => {
+                    void write(value).then(() => {
                         state.copied = true;
 
                         setTimeout(() => {

package/src/components/counter/index.ts

@@ -1,16 +1,12 @@
 import { html, type Attributes } from '@esportsplus/template';
 import { effect, onCleanup, reactive, untrack } from '@esportsplus/reactivity';
-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 (attributes: Attributes & {
+export default ({ currency, decimals = 2, delay, max, state: api = reactive({ value: -1 }), suffix, value, ...attributes }: Attributes & {
     currency?: 'IGNORE' | 'EUR' | 'GBP' | 'USD';
     decimals?: number;
     delay?: number;
@@ -19,20 +15,15 @@ export default (attributes: Attributes & {
     suffix?: string;
     value: number;
 }) => {
-    let { currency, decimals, delay, max, suffix, value } = attributes,
-        api = attributes.state || reactive({ value: -1 }),
-        formatter = currency === 'IGNORE'
+    let formatter = currency === 'IGNORE'
             ? undefined
             : formatters[currency || 'USD'] ??= new Intl.NumberFormat('en-US', {
                 style: 'currency',
                 currency: currency || 'USD'
             }),
         animation = reactive({ started: false }),
-        render = reactive([] as { digit: boolean; value: string }[]);
-
-    decimals ??= 2;
-
-    let stop = effect(() => {
+        render = reactive([] as { digit: boolean; value: string }[]),
+        stop = effect(() => {
             let target = api.value === -1 ? value : api.value,
                 started = animation.started;
 
@@ -89,7 +80,7 @@ export default (attributes: Attributes & {
     });
 
     return html`
-        <div class='counter' ${omit(attributes, OMIT)}>
+        <div class='counter' ${attributes}>
             ${html.reactive(render, function (character) {
                     if (!character.digit) {
                         return html`

package/src/components/form/action.ts

@@ -1,15 +1,11 @@
 import response, { Response } from '@esportsplus/action';
 import { html, Attributes, Element, Renderable } from '@esportsplus/template';
-import { omit } from '@esportsplus/utilities';
 import input from './input';
 
 
 type Errors = { errors: Response<unknown>['errors'] };
 
 
-const OMIT = ['action', 'state'];
-
-
 function parse(input: ReturnType<FormData['entries']>) {
     let data: Record<string, any> = {};
 
@@ -41,18 +37,16 @@ function parse(input: ReturnType<FormData['entries']>) {
 
 
 export default <T extends Record<string, any>>(
-    attributes: {
+    { action, state, ...attributes }: {
         action: (data: { input: T, response: typeof response }) => (Promise<Errors> | Errors),
         state?: { processing: boolean }
     } & Attributes,
     content: Renderable<any>
 ) => {
-    let { action, state } = attributes;
-
     return html`
         <form
             class='form'
-            ${omit(attributes, OMIT)}
+            ${attributes}
             ${{
                 onclick: function(event) {
                     let trigger = event.target as HTMLButtonElement;

package/src/components/input/index.ts

@@ -6,12 +6,15 @@ import './scss/index.scss';
 
 export default function (
     this: { attributes?: Attributes } | void,
-    attributes: Attributes & { state?: { active: boolean, error: string } }
-) {
-    let state = attributes.state || reactive({
+    {
+        state = reactive({
             active: false,
             error: ''
-        });
+        }),
+        ...attributes
+    }: Attributes & { state?: { active: boolean, error: string } }
+) {
+    attributes.type ??= 'text';
 
     return html`
         <input
@@ -27,7 +30,6 @@ export default function (
                     state.active = false;
                 },
                 onrender: form.input.onrender(state),
-                type: (attributes.type || 'text') as string
             }}
         />
     `;

package/src/components/radio/index.ts

@@ -1,4 +1,7 @@
-import { factory } from '~/components/checkbox';
+import checkbox, { factory } from '~/components/checkbox';
 
 
-export default factory('radio');
+const radio: typeof checkbox = factory('radio');
+
+
+export default radio;

package/src/components/select/constants.ts

@@ -0,0 +1,8 @@
+const SELECT_ARROW = Symbol.for('@esportsplus/ui/select.arrow');
+
+const SELECT_OPTION = Symbol.for('@esportsplus/ui/select.option');
+
+const SELECT_TOOLTIP_CONTENT = Symbol.for('@esportsplus/ui/select.tooltip-content');
+
+
+export { SELECT_ARROW, SELECT_OPTION, SELECT_TOOLTIP_CONTENT };

package/src/components/select/index.ts

@@ -1,28 +1,21 @@
 import { component, html, type Renderable, type Attributes } from '@esportsplus/template';
 import { reactive } from '@esportsplus/reactivity';
-import { EMPTY_ARRAY, omit, toArray } from '@esportsplus/utilities';
 import form from '~/components/form';
+import { SELECT_ARROW, SELECT_OPTION, SELECT_TOOLTIP_CONTENT } from './constants';
 import './scss/index.scss';
 
 
-const OMIT = [
-    'arrow',
-    'options',
-    'option',
-    'tooltip-content',
-];
-
-
 type A = {
-    arrow?: Attributes;
+    [SELECT_ARROW]?: Attributes;
+    [SELECT_OPTION]?: Attributes;
+    [SELECT_TOOLTIP_CONTENT]?: Attributes & { direction?: string };
     options: Record<number | string, Renderable<unknown> | { content: Renderable<unknown>, selected: Renderable<unknown> }>;
-    option?: Attributes;
-    'tooltip-content'?: Attributes & { direction?: string };
 } & (
     {
         selected?: number | string;
         state?: never;
     } | {
+        selected?: never;
         state: {
             active: boolean;
             error: string;
@@ -33,38 +26,50 @@ type A = {
 ) & Attributes;
 
 
-export default component<A, (state: { active: boolean, selected?: string | number }) => Renderable<unknown>>(
-    function(this: { attributes?: Exclude<A, 'options' | 'selected' | 'state'> }, attributes: A, content) {
-        let element: HTMLElement,
-            { options, option } = attributes,
-            state = attributes.state || reactive({
+type D = Attributes & Pick<A, typeof SELECT_ARROW | typeof SELECT_OPTION | typeof SELECT_TOOLTIP_CONTENT>;
+
+
+export default Object.assign(component<A, (state: { active: boolean, selected?: string | number }) => Renderable<unknown>>(
+    function(
+        this: { attributes?: D },
+        {
+            options,
+            selected,
+            state = reactive({
                 active: false,
                 error: '',
                 render: false,
-                selected: attributes.selected || Object.keys(options)[0]
-            });
+                selected: selected || Object.keys(options)[0]
+            }),
+            ...attributes
+        }: A,
+        content
+    ) {
+        let { direction: defaultDirection, ...defaultTooltipContent } = this?.attributes?.[SELECT_TOOLTIP_CONTENT] ?? {},
+            { direction = defaultDirection || 's', ...tooltipContent } = attributes[SELECT_TOOLTIP_CONTENT] ?? {};
 
         return html`
             <div
                 class='select tooltip ${() => state.active && '--active'}'
-                ${this?.attributes && omit(this.attributes, OMIT)}
-                ${omit(attributes, OMIT)}
-                onrender=${(node: HTMLElement) => element = node}
-                ondocumentclick=${(event: MouseEvent) => {
-                    if (!state.active || !element?.isConnected) {
-                        return;
-                    }
-
-                    if (!element.contains(event.target as Node | null)) {
-                        state.active = false;
-                    }
-                }}
-                onclick=${() => {
-                    if (state.render) {
-                        state.active = !state.active;
+                ${this?.attributes}
+                ${attributes}
+                ${{
+                    onclick: () => {
+                        if (state.render) {
+                            state.active = !state.active;
+                        }
+
+                        state.render = true;
+                    },
+                    ondocumentclick: function (this, event: MouseEvent) {
+                        if (!state.active || !this?.isConnected) {
+                            return;
+                        }
+
+                        if (!this.contains(event.target as Node | null)) {
+                            state.active = false;
+                        }
                     }
-
-                    state.render = true;
                 }}
             >
                 ${content ? (() => content(state)) : (() => {
@@ -81,7 +86,7 @@ export default component<A, (state: { active: boolean, selected?: string | numbe
                     return selected;
                 })}
 
-                <div class='select-arrow' ${this?.attributes?.arrow} ${attributes.arrow}></div>
+                <div class='select-arrow' ${this?.attributes?.[SELECT_ARROW]} ${attributes[SELECT_ARROW]}></div>
 
                 <input class='select-tag'
                     ${{
@@ -104,15 +109,10 @@ export default component<A, (state: { active: boolean, selected?: string | numbe
 
                     return html`
                         <div
-                            class='tooltip-content --flex-column --scrollbar'
+                            class='tooltip-content tooltip-content--${direction} --flex-column --scrollbar'
+                            ${defaultTooltipContent}
+                            ${tooltipContent}
                             ${{
-                                ...this?.attributes?.['tooltip-content'] || EMPTY_ARRAY,
-                                ...attributes['tooltip-content'],
-                                class: [
-                                    ...toArray(this?.attributes?.['tooltip-content']?.class),
-                                    ...toArray(attributes['tooltip-content']?.class),
-                                    `tooltip-content--${attributes['tooltip-content']?.direction || 's'}`
-                                ],
                                 inert: () => !state.active,
                                 onclick: (e: Event) => {
                                     let element = e.target as HTMLElement,
@@ -144,11 +144,7 @@ export default component<A, (state: { active: boolean, selected?: string | numbe
                                 },
                                 onconnect: () => {
                                     state.active = true;
-                                },
-                                style: [
-                                    ...toArray(this?.attributes?.['tooltip-content']?.style),
-                                    ...toArray(attributes['tooltip-content']?.style)
-                                ],
+                                }
                             }}
                         >
                             ${keys.map((key) => {
@@ -161,8 +157,8 @@ export default component<A, (state: { active: boolean, selected?: string | numbe
                                 return html`
                                     <div
                                         class='link select-option ${() => selected[key] && '--active'}'
-                                        ${this?.attributes?.option}
-                                        ${option}
+                                        ${this?.attributes?.[SELECT_OPTION]}
+                                        ${attributes[SELECT_OPTION]}
                                         data-key='${key}'
                                     >
                                         ${content}
@@ -175,4 +171,4 @@ export default component<A, (state: { active: boolean, selected?: string | numbe
             </div>
         `;
     }
-);
+), { arrow: SELECT_ARROW, option: SELECT_OPTION, tooltipContent: SELECT_TOOLTIP_CONTENT } as const);

package/src/components/switch/index.ts

@@ -1,4 +1,7 @@
-import { factory } from '~/components/checkbox';
+import checkbox, { factory } from '~/components/checkbox';
 
 
-export default factory('switch');
+const switchComponent: typeof checkbox = factory('switch');
+
+
+export default switchComponent;

package/src/components/textarea/index.ts

@@ -1,6 +1,5 @@
 import { component, html, type Attributes } from '@esportsplus/template';
 import { reactive } from '@esportsplus/reactivity';
-import { omit } from '@esportsplus/utilities';
 import form from '~/components/form';
 import './scss/index.scss';
 
@@ -8,9 +7,6 @@ import './scss/index.scss';
 type Autoresize = { height: { max: `${number}px`, min: `${number}px` } };
 
 
-const OMIT = ['autoresize', 'state'];
-
-
 function autoresize({ height }: Autoresize) {
     let attributes = {
             class: 'textarea--autoresize',
@@ -39,22 +35,26 @@ function autoresize({ height }: Autoresize) {
 
 export default component(function(
     this: { attributes?: Attributes },
-    attributes: Attributes & {
+    {
+        autoresize: resize,
+        state = reactive({
+            active: false,
+            error: ''
+        }),
+        ...attributes
+    }: Attributes & {
         autoresize?: Autoresize,
         state?: { active: boolean, error: string }
     }
 ) {
-    let state = attributes.state || reactive({
-            active: false,
-            error: ''
-        });
+    attributes.value ??= '';
 
     return html`
         <textarea
             class='textarea'
-            ${this?.attributes && omit(this.attributes, OMIT)}
-            ${omit(attributes, OMIT)}
-            ${attributes.autoresize && autoresize(attributes.autoresize)}
+            ${this?.attributes}
+            ${attributes}
+            ${resize && autoresize(resize)}
             ${{
                 class: () => state.active && '--active',
                 onfocusin: () => {
@@ -63,8 +63,7 @@ export default component(function(
                 onfocusout: () => {
                     state.active = false;
                 },
-                onrender: form.input.onrender(state),
-                value: attributes?.value || ''
+                onrender: form.input.onrender(state)
             }}
         ></textarea>
     `;

package/src/components/tooltip/constants.ts

@@ -0,0 +1,6 @@
+const MENU_OPTION = Symbol.for('@esportsplus/ui/tooltip.menu.option');
+
+const MENU_TOOLTIP_CONTENT = Symbol.for('@esportsplus/ui/tooltip.menu.tooltip-content');
+
+
+export { MENU_OPTION, MENU_TOOLTIP_CONTENT };

package/src/components/tooltip/index.ts

@@ -4,4 +4,7 @@ import onhover from './onhover';
 import './scss/index.scss';
 
 
-export default { menu, onclick, onhover };
+const tooltip: { menu: typeof menu, onclick: typeof onclick, onhover: typeof onhover } = { menu, onclick, onhover };
+
+
+export default tooltip;