@esportsplus/ui 0.54.0 → 0.55.0

package/build/components/radio/index.js

@@ -1,2 +1,3 @@
 import { factory } from '../checkbox/index.js';
-export default factory('radio');
+const radio = factory('radio');
+export default radio;

package/build/components/select/constants.d.ts

@@ -0,0 +1,4 @@
+declare const SELECT_ARROW: unique symbol;
+declare const SELECT_OPTION: unique symbol;
+declare const SELECT_TOOLTIP_CONTENT: unique symbol;
+export { SELECT_ARROW, SELECT_OPTION, SELECT_TOOLTIP_CONTENT };

package/build/components/select/constants.js

@@ -0,0 +1,4 @@
+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/build/components/select/index.d.ts

@@ -1,20 +1,22 @@
 import * as template_u0 from '@esportsplus/template';
 import { type Attributes, type Renderable } from '@esportsplus/template';
+import { SELECT_ARROW, SELECT_OPTION, SELECT_TOOLTIP_CONTENT } from './constants.js';
 import './scss/index.scss';
 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;
@@ -25,5 +27,9 @@ type A = {
 declare const _default: template_u0.Factory<A, (state: {
     active: boolean;
     selected?: string | number;
-}) => Renderable<unknown>, Renderable<any>>;
+}) => Renderable<unknown>, Renderable<any>> & {
+    readonly arrow: typeof SELECT_ARROW;
+    readonly option: typeof SELECT_OPTION;
+    readonly tooltipContent: typeof SELECT_TOOLTIP_CONTENT;
+};
 export default _default;

package/build/components/select/index.js

@@ -1,11 +1,11 @@
 import * as template_u0 from '@esportsplus/template';
 import { component } from '@esportsplus/template';
 import * as reactivity_u0 from '@esportsplus/reactivity';
-import { EMPTY_ARRAY, omit, toArray } from '@esportsplus/utilities';
 import form from '../form/index.js';
+import { SELECT_ARROW, SELECT_OPTION, SELECT_TOOLTIP_CONTENT } from './constants.js';
 import './scss/index.scss';
 const template_u1n = template_u0.template(`<div class='link select-option ' >`);
-const template_u1q = template_u0.template(`<div class='tooltip-content --flex-column --scrollbar' >`);
+const template_u1q = template_u0.template(`<div class='tooltip-content  --flex-column --scrollbar' >`);
 const template_u1t = template_u0.template(`<div class='select tooltip ' ><!--$--><div class='select-arrow' ></div><input class='select-tag' />`);
 class ReactiveObject_167mg1f0 extends reactivity_u0.ReactiveObject {
     #active = this[reactivity_u0.SIGNAL](false);
@@ -41,34 +41,27 @@ class ReactiveObject_167mg1f0 extends reactivity_u0.ReactiveObject {
         reactivity_u0.write(this.#selected, _v3);
     }
 }
-const OMIT = [
-    'arrow',
-    'options',
-    'option',
-    'tooltip-content',
-];
-export default component(function (attributes, content) {
-    let element, { options, option } = attributes, state = attributes.state || new ReactiveObject_167mg1f0(attributes.selected || Object.keys(options)[0]);
+export default Object.assign(component(function ({ options, selected, state = new ReactiveObject_167mg1f0(selected || Object.keys(options)[0]), ...attributes }, content) {
+    let { direction: defaultDirection, ...defaultTooltipContent } = this?.attributes?.[SELECT_TOOLTIP_CONTENT] ?? {}, { direction = defaultDirection || 's', ...tooltipContent } = attributes[SELECT_TOOLTIP_CONTENT] ?? {};
     return (() => {
         let root_u1s = template_u1t(), element_u1u = root_u1s.firstChild, element_u1v = element_u1u.firstChild, element_u1w = element_u1u.firstElementChild, element_u1x = element_u1w.nextElementSibling;
         template_u0.setList(element_u1u, 'class', () => state.active && '--active');
-        template_u0.setProperties(element_u1u, this?.attributes && omit(this.attributes, OMIT));
-        template_u0.setProperties(element_u1u, omit(attributes, OMIT));
-        template_u0.onrender(element_u1u, (node) => element = node);
-        template_u0.ondocument(element_u1u, 'click', (event) => {
-            if (!state.active || !element?.isConnected) {
-                return;
-            }
-            if (!element.contains(event.target)) {
-                state.active = false;
-            }
-        });
+        template_u0.setProperties(element_u1u, this?.attributes);
+        template_u0.setProperties(element_u1u, attributes);
         template_u0.delegate(element_u1u, 'click', () => {
             if (state.render) {
                 state.active = !state.active;
             }
             state.render = true;
         });
+        template_u0.ondocument(element_u1u, 'click', function (event) {
+            if (!state.active || !this?.isConnected) {
+                return;
+            }
+            if (!this.contains(event.target)) {
+                state.active = false;
+            }
+        });
         new template_u0.EffectSlot(element_u1v, content ? (() => content(state)) : (() => {
             let selected = options[state.selected];
             if (!selected) {
@@ -79,8 +72,8 @@ export default component(function (attributes, content) {
             }
             return selected;
         }));
-        template_u0.setProperties(element_u1w, this?.attributes?.arrow);
-        template_u0.setProperties(element_u1w, attributes.arrow);
+        template_u0.setProperties(element_u1w, this?.attributes?.[SELECT_ARROW]);
+        template_u0.setProperties(element_u1w, attributes[SELECT_ARROW]);
         template_u0.setProperty(element_u1x, 'name', attributes.name);
         template_u0.delegate(element_u1x, 'click', () => { });
         template_u0.onrender(element_u1x, form.input.onrender(state));
@@ -92,42 +85,32 @@ export default component(function (attributes, content) {
             let keys = Object.keys(options), selected = reactivity_u0.reactive(Object.fromEntries(keys.map(key => [key, false])));
             return (() => {
                 let root_u1p = template_u1q(), element_u1r = root_u1p.firstChild;
-                template_u0.setProperties(element_u1r, {
-                    ...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) => {
-                        let element = e.target, key = element.dataset?.key;
-                        if (key === undefined) {
-                            let parent;
-                            while (parent = element.parentElement) {
-                                key = parent.dataset?.key;
-                                if (key !== undefined) {
-                                    break;
-                                }
+                template_u0.setList(element_u1r, 'class', template_u0.interpolate(["tooltip-content--", (direction)]));
+                template_u0.setProperties(element_u1r, defaultTooltipContent);
+                template_u0.setProperties(element_u1r, tooltipContent);
+                template_u0.setProperty(element_u1r, 'inert', () => !state.active);
+                template_u0.delegate(element_u1r, 'click', (e) => {
+                    let element = e.target, key = element.dataset?.key;
+                    if (key === undefined) {
+                        let parent;
+                        while (parent = element.parentElement) {
+                            key = parent.dataset?.key;
+                            if (key !== undefined) {
+                                break;
                             }
                         }
-                        if (key === undefined) {
-                            return;
-                        }
-                        let previous = state.selected;
-                        state.active = false;
-                        state.selected = key;
-                        selected[key] = true;
-                        selected[previous] = false;
-                    },
-                    onconnect: () => {
-                        state.active = true;
-                    },
-                    style: [
-                        ...toArray(this?.attributes?.['tooltip-content']?.style),
-                        ...toArray(attributes['tooltip-content']?.style)
-                    ],
+                    }
+                    if (key === undefined) {
+                        return;
+                    }
+                    let previous = state.selected;
+                    state.active = false;
+                    state.selected = key;
+                    selected[key] = true;
+                    selected[previous] = false;
+                });
+                template_u0.onconnect(element_u1r, () => {
+                    state.active = true;
                 });
                 template_u0.slot(element_u1r, keys.map((key) => {
                     let content = options[key];
@@ -137,8 +120,8 @@ export default component(function (attributes, content) {
                     return (() => {
                         let root_u1m = template_u1n(), element_u1o = root_u1m.firstChild;
                         template_u0.setList(element_u1o, 'class', () => selected[key] && '--active');
-                        template_u0.setProperties(element_u1o, this?.attributes?.option);
-                        template_u0.setProperties(element_u1o, option);
+                        template_u0.setProperties(element_u1o, this?.attributes?.[SELECT_OPTION]);
+                        template_u0.setProperties(element_u1o, attributes[SELECT_OPTION]);
                         template_u0.setProperty(element_u1o, 'data-key', key);
                         template_u0.slot(element_u1o, content, 1);
                         return root_u1m;
@@ -149,4 +132,4 @@ export default component(function (attributes, content) {
         }, 2);
         return root_u1s;
     })();
-});
+}), { arrow: SELECT_ARROW, option: SELECT_OPTION, tooltipContent: SELECT_TOOLTIP_CONTENT });