@esportsplus/ui 0.45.5 → 0.47.2

package/build/components/select/index.js

@@ -1,11 +1,50 @@
-import { reactive } from '@esportsplus/reactivity';
-import { html } from '@esportsplus/template';
+import * as reactivity_a6aeaec5a75649bd8ec693d5230c50000 from '@esportsplus/reactivity';
+import * as template_a6aeaec5a75649bd8ec693d5230c50001 from '@esportsplus/template';
 import { EMPTY_ARRAY, omit, toArray } from '@esportsplus/utilities';
 import form from '../../components/form/index.js';
 import root from '../../components/root/index.js';
 import scrollbar from '../../components/scrollbar/index.js';
 import template from '../../components/template/index.js';
 import './scss/index.scss';
+const template_a6aeaec5a75649bd8ec693d5230c500032 = template_a6aeaec5a75649bd8ec693d5230c50001.template(`<div
+ class='link select-option '><!--$--></div>`);
+const template_a6aeaec5a75649bd8ec693d5230c500036 = template_a6aeaec5a75649bd8ec693d5230c50001.template(`<div
+ class='select tooltip '><!--$--><div class='select-arrow'></div><input class='select-tag'
+ /><!--$--></div>`);
+class ReactiveObject_a6aeaec5a75649bd8ec693d5230c500030 extends reactivity_a6aeaec5a75649bd8ec693d5230c50000.ReactiveObject {
+    #active = this[reactivity_a6aeaec5a75649bd8ec693d5230c50000.SIGNAL](false);
+    #error = this[reactivity_a6aeaec5a75649bd8ec693d5230c50000.SIGNAL]('');
+    #render = this[reactivity_a6aeaec5a75649bd8ec693d5230c50000.SIGNAL](false);
+    #selected;
+    constructor(_p0) {
+        super(null);
+        this.#selected = this[reactivity_a6aeaec5a75649bd8ec693d5230c50000.SIGNAL](_p0);
+    }
+    get active() {
+        return reactivity_a6aeaec5a75649bd8ec693d5230c50000.read(this.#active);
+    }
+    set active(_v0) {
+        reactivity_a6aeaec5a75649bd8ec693d5230c50000.write(this.#active, _v0);
+    }
+    get error() {
+        return reactivity_a6aeaec5a75649bd8ec693d5230c50000.read(this.#error);
+    }
+    set error(_v1) {
+        reactivity_a6aeaec5a75649bd8ec693d5230c50000.write(this.#error, _v1);
+    }
+    get render() {
+        return reactivity_a6aeaec5a75649bd8ec693d5230c50000.read(this.#render);
+    }
+    set render(_v2) {
+        reactivity_a6aeaec5a75649bd8ec693d5230c50000.write(this.#render, _v2);
+    }
+    get selected() {
+        return reactivity_a6aeaec5a75649bd8ec693d5230c50000.read(this.#selected);
+    }
+    set selected(_v3) {
+        reactivity_a6aeaec5a75649bd8ec693d5230c50000.write(this.#selected, _v3);
+    }
+}
 const OMIT = [
     'arrow',
     'options',
@@ -42,92 +81,88 @@ function set(current, value) {
     }
 }
 const select = template.factory(function (attributes, content) {
-    let { options, option } = attributes, state = attributes.state || reactive({
-        active: false,
-        error: '',
-        render: false,
-        selected: attributes.selected || Object.keys(options)[0]
-    });
-    return html `
-            <div
-                class='select tooltip ${() => state.active && '--active'}'
-                ${this?.attributes && omit(this.attributes, OMIT)}
-                ${omit(attributes, OMIT)}
-                onclick=${() => {
-        if (state.render) {
-            set(state, !state.active);
-        }
-        state.render = true;
-    }}
-            >
-                ${content ? (() => content(state)) : (() => options[state.selected] || '-')}
-
-                <div class='select-arrow' ${this?.attributes?.arrow} ${attributes.arrow}></div>
-
-                <input class='select-tag'
-                    ${{
-        name: attributes.name,
-        onclick: () => { },
-        onrender: form.input.onrender(state),
-        value: () => state.selected
-    }}
-                />
-
-                ${() => {
-        if (!state.render) {
-            return;
-        }
-        let keys = Object.keys(options), selected = reactive(Object.fromEntries(keys.map(key => [key, false])));
-        return sb({
-            ...this?.attributes?.['tooltip-content'] || EMPTY_ARRAY,
-            ...attributes['tooltip-content'],
-            class: [
-                ...toArray(attributes['tooltip-content']?.class),
-                `tooltip-content--${attributes['tooltip-content']?.direction || 's'}`
-            ],
-            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;
+    let { options, option } = attributes, state = attributes.state || new ReactiveObject_a6aeaec5a75649bd8ec693d5230c500030(attributes.selected || Object.keys(options)[0]);
+    return (() => {
+        let root_a6aeaec5a75649bd8ec693d5230c500035 = template_a6aeaec5a75649bd8ec693d5230c500036(), element_a6aeaec5a75649bd8ec693d5230c500037 = root_a6aeaec5a75649bd8ec693d5230c500035.firstChild, element_a6aeaec5a75649bd8ec693d5230c500038 = element_a6aeaec5a75649bd8ec693d5230c500037.firstChild, element_a6aeaec5a75649bd8ec693d5230c500039 = element_a6aeaec5a75649bd8ec693d5230c500037.firstElementChild, element_a6aeaec5a75649bd8ec693d5230c50003a = element_a6aeaec5a75649bd8ec693d5230c500039.nextElementSibling, element_a6aeaec5a75649bd8ec693d5230c50003b = element_a6aeaec5a75649bd8ec693d5230c500038.nextSibling.nextSibling.nextSibling;
+        template_a6aeaec5a75649bd8ec693d5230c50001.setClass(element_a6aeaec5a75649bd8ec693d5230c500037, ' ', () => state.active && '--active');
+        template_a6aeaec5a75649bd8ec693d5230c50001.setProperties(element_a6aeaec5a75649bd8ec693d5230c500037, this?.attributes && omit(this.attributes, OMIT));
+        template_a6aeaec5a75649bd8ec693d5230c50001.setProperties(element_a6aeaec5a75649bd8ec693d5230c500037, omit(attributes, OMIT));
+        template_a6aeaec5a75649bd8ec693d5230c50001.delegate(element_a6aeaec5a75649bd8ec693d5230c500037, 'click', () => {
+            if (state.render) {
+                set(state, !state.active);
+            }
+            state.render = true;
+        });
+        new template_a6aeaec5a75649bd8ec693d5230c50001.EffectSlot(element_a6aeaec5a75649bd8ec693d5230c500038, content ? (() => content(state)) : (() => {
+            let selected = options[state.selected];
+            if (!selected) {
+                return '-';
+            }
+            if (selected !== null && typeof selected === 'object' && 'content' in selected) {
+                return selected.content;
+            }
+            return selected;
+        }));
+        template_a6aeaec5a75649bd8ec693d5230c50001.setProperties(element_a6aeaec5a75649bd8ec693d5230c500039, this?.attributes?.arrow);
+        template_a6aeaec5a75649bd8ec693d5230c50001.setProperties(element_a6aeaec5a75649bd8ec693d5230c500039, attributes.arrow);
+        template_a6aeaec5a75649bd8ec693d5230c50001.setProperty(element_a6aeaec5a75649bd8ec693d5230c50003a, 'name', attributes.name);
+        template_a6aeaec5a75649bd8ec693d5230c50001.delegate(element_a6aeaec5a75649bd8ec693d5230c50003a, 'click', () => { });
+        template_a6aeaec5a75649bd8ec693d5230c50001.onrender(element_a6aeaec5a75649bd8ec693d5230c50003a, form.input.onrender(state));
+        template_a6aeaec5a75649bd8ec693d5230c50001.setProperty(element_a6aeaec5a75649bd8ec693d5230c50003a, 'value', () => state.selected);
+        new template_a6aeaec5a75649bd8ec693d5230c50001.EffectSlot(element_a6aeaec5a75649bd8ec693d5230c50003b, () => {
+            if (!state.render) {
+                return;
+            }
+            let keys = Object.keys(options), selected = reactivity_a6aeaec5a75649bd8ec693d5230c50000.signal(Object.fromEntries(keys.map(key => [key, false])));
+            return sb({
+                ...this?.attributes?.['tooltip-content'] || EMPTY_ARRAY,
+                ...attributes['tooltip-content'],
+                class: [
+                    ...toArray(attributes['tooltip-content']?.class),
+                    `tooltip-content--${attributes['tooltip-content']?.direction || 's'}`
+                ],
+                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;
+                            }
                         }
                     }
+                    if (key === undefined) {
+                        return;
+                    }
+                    let previous = state.selected;
+                    set(state, false);
+                    state.selected = key;
+                    reactivity_a6aeaec5a75649bd8ec693d5230c50000.read(selected)[key] = true;
+                    reactivity_a6aeaec5a75649bd8ec693d5230c50000.read(selected)[previous] = false;
+                },
+                onconnect: () => {
+                    set(state, true);
+                },
+                scrollbar: attributes.scrollbar,
+                'scrollbar-container-content': attributes['scrollbar-container-content']
+            }, keys.map((key) => {
+                let content = options[key];
+                if (content !== null && typeof content === 'object' && 'content' in content) {
+                    content = content.content;
                 }
-                if (key === undefined) {
-                    return;
-                }
-                let previous = state.selected;
-                set(state, false);
-                state.selected = key;
-                selected[key] = true;
-                selected[previous] = false;
-            },
-            onconnect: () => {
-                set(state, true);
-            },
-            scrollbar: attributes.scrollbar,
-            'scrollbar-container-content': attributes['scrollbar-container-content']
-        }, keys.map((key) => {
-            let content = options[key];
-            if (content !== null && typeof content === 'object' && 'content' in content) {
-                content = content.content;
-            }
-            return html `
-                                <div
-                                    class='link select-option ${() => selected[key] && '--active'}'
-                                    ${this?.attributes?.option}
-                                    ${option}
-                                    data-key='${key}'
-                                >
-                                    ${content}
-                                </div>
-                            `;
-        }));
-    }}
-            </div>
-        `;
+                return (() => {
+                    let root_a6aeaec5a75649bd8ec693d5230c500031 = template_a6aeaec5a75649bd8ec693d5230c500032(), element_a6aeaec5a75649bd8ec693d5230c500033 = root_a6aeaec5a75649bd8ec693d5230c500031.firstChild, element_a6aeaec5a75649bd8ec693d5230c500034 = element_a6aeaec5a75649bd8ec693d5230c500033.firstChild;
+                    template_a6aeaec5a75649bd8ec693d5230c50001.setClass(element_a6aeaec5a75649bd8ec693d5230c500033, ' ', () => reactivity_a6aeaec5a75649bd8ec693d5230c50000.read(selected)[key] && '--active');
+                    template_a6aeaec5a75649bd8ec693d5230c50001.setProperties(element_a6aeaec5a75649bd8ec693d5230c500033, this?.attributes?.option);
+                    template_a6aeaec5a75649bd8ec693d5230c50001.setProperties(element_a6aeaec5a75649bd8ec693d5230c500033, option);
+                    template_a6aeaec5a75649bd8ec693d5230c50001.setProperty(element_a6aeaec5a75649bd8ec693d5230c500033, 'data-key', key);
+                    template_a6aeaec5a75649bd8ec693d5230c50001.slot(element_a6aeaec5a75649bd8ec693d5230c500034, content);
+                    return root_a6aeaec5a75649bd8ec693d5230c500031;
+                })();
+            }));
+        });
+        return root_a6aeaec5a75649bd8ec693d5230c500035;
+    })();
 });
 export default select;

package/build/components/switch/index.d.ts

@@ -6,5 +6,5 @@ declare const _default: (this: {
         active: boolean;
         error: string;
     };
-}) => Node;
+}) => DocumentFragment;
 export default _default;

package/build/components/textarea/index.d.ts

@@ -1,4 +1,4 @@
-import { type Attributes } from '@esportsplus/template';
+import { Attributes } from '@esportsplus/template';
 import './scss/index.scss';
 export default function (this: {
     attributes?: Attributes;
@@ -7,4 +7,4 @@ export default function (this: {
         active: boolean;
         error: string;
     };
-}): Node;
+}): DocumentFragment;

package/build/components/textarea/index.js

@@ -1,31 +1,46 @@
-import { reactive } from '@esportsplus/reactivity';
-import { html } from '@esportsplus/template';
+import * as reactivity_a6aeaec5a75649bd8ec693d5230c50000 from '@esportsplus/reactivity';
+import * as template_a6aeaec5a75649bd8ec693d5230c50001 from '@esportsplus/template';
 import { omit } from '@esportsplus/utilities';
 import form from '../../components/form/index.js';
 import './scss/index.scss';
+const template_a6aeaec5a75649bd8ec693d5230c50003e = template_a6aeaec5a75649bd8ec693d5230c50001.template(`<textarea
+ class='textarea'></textarea>`);
+class ReactiveObject_a6aeaec5a75649bd8ec693d5230c50003c extends reactivity_a6aeaec5a75649bd8ec693d5230c50000.ReactiveObject {
+    #active = this[reactivity_a6aeaec5a75649bd8ec693d5230c50000.SIGNAL](false);
+    #error = this[reactivity_a6aeaec5a75649bd8ec693d5230c50000.SIGNAL]('');
+    constructor() {
+        super(null);
+    }
+    get active() {
+        return reactivity_a6aeaec5a75649bd8ec693d5230c50000.read(this.#active);
+    }
+    set active(_v0) {
+        reactivity_a6aeaec5a75649bd8ec693d5230c50000.write(this.#active, _v0);
+    }
+    get error() {
+        return reactivity_a6aeaec5a75649bd8ec693d5230c50000.read(this.#error);
+    }
+    set error(_v1) {
+        reactivity_a6aeaec5a75649bd8ec693d5230c50000.write(this.#error, _v1);
+    }
+}
 const OMIT = ['state'];
 export default function (attributes) {
-    let state = attributes.state || reactive({
-        active: false,
-        error: ''
-    });
-    return html `
-        <textarea
-            class='textarea'
-            ${this?.attributes && omit(this.attributes, OMIT)}
-            ${omit(attributes, OMIT)}
-            ${{
-        class: () => state.active && '--active',
-        onfocusin: () => {
+    let state = attributes.state || new ReactiveObject_a6aeaec5a75649bd8ec693d5230c50003c();
+    return (() => {
+        let root_a6aeaec5a75649bd8ec693d5230c50003d = template_a6aeaec5a75649bd8ec693d5230c50003e(), element_a6aeaec5a75649bd8ec693d5230c50003f = root_a6aeaec5a75649bd8ec693d5230c50003d.firstChild;
+        template_a6aeaec5a75649bd8ec693d5230c50001.setProperties(element_a6aeaec5a75649bd8ec693d5230c50003f, this?.attributes && omit(this.attributes, OMIT));
+        template_a6aeaec5a75649bd8ec693d5230c50001.setProperties(element_a6aeaec5a75649bd8ec693d5230c50003f, omit(attributes, OMIT));
+        template_a6aeaec5a75649bd8ec693d5230c50001.setClass(element_a6aeaec5a75649bd8ec693d5230c50003f, '', () => state.active && '--active');
+        template_a6aeaec5a75649bd8ec693d5230c50001.on(element_a6aeaec5a75649bd8ec693d5230c50003f, 'focusin', () => {
             state.active = true;
-        },
-        onfocusout: () => {
+        });
+        template_a6aeaec5a75649bd8ec693d5230c50001.on(element_a6aeaec5a75649bd8ec693d5230c50003f, 'focusout', () => {
             state.active = false;
-        },
-        onrender: form.input.onrender(state),
-        value: attributes?.value || ''
-    }}
-        ></textarea>
-    `;
+        });
+        template_a6aeaec5a75649bd8ec693d5230c50001.onrender(element_a6aeaec5a75649bd8ec693d5230c50003f, form.input.onrender(state));
+        template_a6aeaec5a75649bd8ec693d5230c50001.setProperty(element_a6aeaec5a75649bd8ec693d5230c50003f, 'value', attributes?.value || '');
+        return root_a6aeaec5a75649bd8ec693d5230c50003d;
+    })();
 }
 ;