@esportsplus/ui 0.54.0 → 0.55.0

package/build/components/accordion/index.js

@@ -1,14 +1,25 @@
+import * as reactivity_u0 from '@esportsplus/reactivity';
 import * as template_u0 from '@esportsplus/template';
 import { component } from '@esportsplus/template';
-import { omit } from '@esportsplus/utilities';
 import './scss/index.scss';
 const template_u2 = template_u0.template(`<div class='accordion' ><div class='accordion-content'>`);
-const OMIT = ['state'];
-export default component(function (attributes, content) {
-    let state = attributes.state;
+class ReactiveObject_04mlrpv0 extends reactivity_u0.ReactiveObject {
+    #active = this[reactivity_u0.SIGNAL](false);
+    constructor() {
+        super(null);
+    }
+    get active() {
+        return reactivity_u0.read(this.#active);
+    }
+    set active(_v0) {
+        reactivity_u0.write(this.#active, _v0);
+    }
+}
+export default component(function ({ state = new ReactiveObject_04mlrpv0(), ...attributes }, content) {
     return (() => {
         let root_u1 = template_u2(), element_u3 = root_u1.firstChild, element_u4 = element_u3.firstElementChild;
-        template_u0.setProperties(element_u3, omit(attributes, OMIT));
+        template_u0.setProperties(element_u3, attributes);
+        template_u0.setList(element_u3, 'class', () => state.active && '--active');
         template_u0.setProperty(element_u3, 'inert', () => !state.active);
         template_u0.slot(element_u4, content, 1);
         return root_u1;

package/build/components/accordion/scss/index.scss

@@ -1,2 +1,2 @@
-@layer components {.accordion{grid-template-rows:1fr;transition:grid-template-rows .3s;display:grid}.accordion[inert]{grid-template-rows:0fr}.accordion-content{min-height:0;overflow:hidden}}
+@layer components {.accordion{grid-template-rows:1fr;transition:grid-template-rows .3s;display:grid}.accordion:not(.--active){grid-template-rows:0fr}.accordion-content{min-height:0;overflow:hidden}}
 /*$vite$:1*/

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

@@ -0,0 +1,2 @@
+declare const CHECKBOX_INPUT: unique symbol;
+export { CHECKBOX_INPUT };

package/build/components/checkbox/constants.js

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

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

@@ -1,20 +1,26 @@
 import { type Attributes } from '@esportsplus/template';
+import { CHECKBOX_INPUT } from './constants.js';
 import './scss/index.scss';
 type A = Attributes & {
-    'aria-label'?: string;
-    checked?: boolean;
-    id?: string;
-    name?: string;
+    [CHECKBOX_INPUT]?: Attributes;
+};
+declare const factory: (type: 'checkbox' | 'radio' | 'switch') => ((this: {
+    attributes?: A;
+} | void, { state, ...attributes }?: A & {
+    state?: {
+        error: string;
+    };
+}) => DocumentFragment | Text) & {
+    readonly input: typeof CHECKBOX_INPUT;
+};
+declare const _default: ((this: {
+    attributes?: A;
+} | void, { state, ...attributes }?: A & {
     state?: {
         error: string;
     };
-    value?: number | string;
+}) => DocumentFragment | Text) & {
+    readonly input: typeof CHECKBOX_INPUT;
 };
-declare const factory: (type: 'checkbox' | 'radio' | 'switch') => (this: {
-    attributes?: Exclude<A, 'state'>;
-} | void, attributes?: A) => DocumentFragment | Text;
-declare const _default: (this: {
-    attributes?: Exclude<A, 'state'>;
-} | void, attributes?: A) => DocumentFragment | Text;
 export default _default;
 export { factory };

package/build/components/checkbox/index.js

@@ -1,13 +1,13 @@
 import * as template_u0 from '@esportsplus/template';
 import * as reactivity_u0 from '@esportsplus/reactivity';
-import { omit } from '@esportsplus/utilities';
 import form from '../form/index.js';
 import icon from '../icon/index.js';
+import { CHECKBOX_INPUT } from './constants.js';
 import check from './svg/check.svg';
 import './scss/index.scss';
-const template_u6 = template_u0.template(`<div class='checkbox ' ><input class='checkbox-tag' type=checkbox >`);
-const template_ua = template_u0.template(`<div class='checkbox ' ><input class='checkbox-tag' type=radio >`);
-const template_uh = template_u0.template(`<div class='checkbox ' ><input class='checkbox-tag' >`);
+const template_u6 = template_u0.template(`<div class='checkbox ' ><input class='checkbox-tag' value='1' type=checkbox >`);
+const template_ua = template_u0.template(`<div class='checkbox ' ><input class='checkbox-tag' value='1' type=radio >`);
+const template_uh = template_u0.template(`<div class='checkbox ' ><input class='checkbox-tag' value='1' >`);
 class ReactiveObject_0l38kpg0 extends reactivity_u0.ReactiveObject {
     #error = this[reactivity_u0.SIGNAL]('');
     constructor() {
@@ -20,66 +20,52 @@ class ReactiveObject_0l38kpg0 extends reactivity_u0.ReactiveObject {
         reactivity_u0.write(this.#error, _v0);
     }
 }
-const OMIT = ['aria-label', 'checked', 'id', 'name', 'state', 'value'];
 const factory = (type) => {
-    function template(attributes) {
-        let state = attributes?.state || new ReactiveObject_0l38kpg0();
+    function template({ state = new ReactiveObject_0l38kpg0(), ...attributes } = {}) {
         return (type === "checkbox" ? (() => {
             let root_u5 = template_u6(), element_u7 = root_u5.firstChild, element_u8 = element_u7.firstElementChild;
             template_u0.setList(element_u7, 'class', (type === 'radio' || type === 'switch') && `checkbox--${type}`);
-            template_u0.setProperties(element_u7, this?.attributes && omit(this.attributes, OMIT));
-            template_u0.setProperties(element_u7, attributes && omit(attributes, OMIT));
-            template_u0.setProperty(element_u8, 'aria-label', attributes?.['aria-label'] ?? this?.attributes?.['aria-label']);
-            template_u0.setProperty(element_u8, 'checked', attributes?.checked);
-            template_u0.setProperty(element_u8, 'id', attributes?.id ?? this?.attributes?.id);
-            template_u0.setProperty(element_u8, 'name', attributes?.name ?? this?.attributes?.name);
+            template_u0.setProperties(element_u7, this?.attributes);
+            template_u0.setProperties(element_u7, attributes);
+            template_u0.setProperties(element_u8, this?.attributes?.[CHECKBOX_INPUT]);
+            template_u0.setProperties(element_u8, attributes[CHECKBOX_INPUT]);
             template_u0.onrender(element_u8, form.input.onrender(state));
-            template_u0.setProperty(element_u8, 'value', attributes?.value ?? 1);
             template_u0.slot(element_u7, type === 'checkbox' && icon({ 'aria-hidden': true, class: 'checkbox-check' }, check), 2);
             return root_u5;
         })() : type === "radio" ? (() => {
             let root_u9 = template_ua(), element_ub = root_u9.firstChild, element_uc = element_ub.firstElementChild;
             template_u0.setList(element_ub, 'class', (type === 'radio' || type === 'switch') && `checkbox--${type}`);
-            template_u0.setProperties(element_ub, this?.attributes && omit(this.attributes, OMIT));
-            template_u0.setProperties(element_ub, attributes && omit(attributes, OMIT));
-            template_u0.setProperty(element_uc, 'aria-label', attributes?.['aria-label'] ?? this?.attributes?.['aria-label']);
-            template_u0.setProperty(element_uc, 'checked', attributes?.checked);
-            template_u0.setProperty(element_uc, 'id', attributes?.id ?? this?.attributes?.id);
-            template_u0.setProperty(element_uc, 'name', attributes?.name ?? this?.attributes?.name);
+            template_u0.setProperties(element_ub, this?.attributes);
+            template_u0.setProperties(element_ub, attributes);
+            template_u0.setProperties(element_uc, this?.attributes?.[CHECKBOX_INPUT]);
+            template_u0.setProperties(element_uc, attributes[CHECKBOX_INPUT]);
             template_u0.onrender(element_uc, form.input.onrender(state));
-            template_u0.setProperty(element_uc, 'value', attributes?.value ?? 1);
             template_u0.slot(element_ub, type === 'checkbox' && icon({ 'aria-hidden': true, class: 'checkbox-check' }, check), 2);
             return root_u9;
         })() : type === "switch" ? (() => {
             let root_ud = template_u6(), element_ue = root_ud.firstChild, element_uf = element_ue.firstElementChild;
             template_u0.setList(element_ue, 'class', (type === 'radio' || type === 'switch') && `checkbox--${type}`);
-            template_u0.setProperties(element_ue, this?.attributes && omit(this.attributes, OMIT));
-            template_u0.setProperties(element_ue, attributes && omit(attributes, OMIT));
-            template_u0.setProperty(element_uf, 'aria-label', attributes?.['aria-label'] ?? this?.attributes?.['aria-label']);
-            template_u0.setProperty(element_uf, 'checked', attributes?.checked);
-            template_u0.setProperty(element_uf, 'id', attributes?.id ?? this?.attributes?.id);
-            template_u0.setProperty(element_uf, 'name', attributes?.name ?? this?.attributes?.name);
+            template_u0.setProperties(element_ue, this?.attributes);
+            template_u0.setProperties(element_ue, attributes);
+            template_u0.setProperties(element_uf, this?.attributes?.[CHECKBOX_INPUT]);
+            template_u0.setProperties(element_uf, attributes[CHECKBOX_INPUT]);
             template_u0.onrender(element_uf, form.input.onrender(state));
-            template_u0.setProperty(element_uf, 'value', attributes?.value ?? 1);
             template_u0.slot(element_ue, type === 'checkbox' && icon({ 'aria-hidden': true, class: 'checkbox-check' }, check), 2);
             return root_ud;
         })() : (() => {
             let root_ug = template_uh(), element_ui = root_ug.firstChild, element_uj = element_ui.firstElementChild;
             template_u0.setList(element_ui, 'class', (type === 'radio' || type === 'switch') && `checkbox--${type}`);
-            template_u0.setProperties(element_ui, this?.attributes && omit(this.attributes, OMIT));
-            template_u0.setProperties(element_ui, attributes && omit(attributes, OMIT));
-            template_u0.setProperty(element_uj, 'aria-label', attributes?.['aria-label'] ?? this?.attributes?.['aria-label']);
-            template_u0.setProperty(element_uj, 'checked', attributes?.checked);
-            template_u0.setProperty(element_uj, 'id', attributes?.id ?? this?.attributes?.id);
-            template_u0.setProperty(element_uj, 'name', attributes?.name ?? this?.attributes?.name);
+            template_u0.setProperties(element_ui, this?.attributes);
+            template_u0.setProperties(element_ui, attributes);
+            template_u0.setProperties(element_uj, this?.attributes?.[CHECKBOX_INPUT]);
+            template_u0.setProperties(element_uj, attributes[CHECKBOX_INPUT]);
             template_u0.onrender(element_uj, form.input.onrender(state));
             template_u0.setProperty(element_uj, 'type', type === 'radio' ? 'radio' : 'checkbox');
-            template_u0.setProperty(element_uj, 'value', attributes?.value ?? 1);
             template_u0.slot(element_ui, type === 'checkbox' && icon({ 'aria-hidden': true, class: 'checkbox-check' }, check), 2);
             return root_ug;
         })());
     }
-    return template;
+    return Object.assign(template, { input: CHECKBOX_INPUT });
 };
 export default factory('checkbox');
 export { factory };

package/build/components/clipboard/copy.d.ts

@@ -1,11 +1,11 @@
 import * as template_u0 from '@esportsplus/template';
 import { type Attributes, type Renderable } from '@esportsplus/template';
 type A = Attributes & {
-    onerror?: () => void;
     timeout?: number;
     value: string;
 };
 declare const _default: template_u0.Factory<A, (state: {
     copied: boolean;
+    failed: boolean;
 }) => Renderable<unknown>, Renderable<any>>;
 export default _default;

package/build/components/clipboard/copy.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 { omit } from '@esportsplus/utilities';
 import write from './write.js';
 const template_ul = template_u0.template(`<button type='button' >`);
 class ReactiveObject_0irbxmo0 extends reactivity_u0.ReactiveObject {
     #copied = this[reactivity_u0.SIGNAL](false);
+    #failed = this[reactivity_u0.SIGNAL](false);
     constructor() {
         super(null);
     }
@@ -15,13 +15,18 @@ class ReactiveObject_0irbxmo0 extends reactivity_u0.ReactiveObject {
     set copied(_v0) {
         reactivity_u0.write(this.#copied, _v0);
     }
+    get failed() {
+        return reactivity_u0.read(this.#failed);
+    }
+    set failed(_v1) {
+        reactivity_u0.write(this.#failed, _v1);
+    }
 }
-const OMIT = ['onerror', 'timeout', 'value'];
-export default component((attributes, content) => {
+export default component(({ timeout = 3000, value, ...attributes }, content) => {
     let state = new ReactiveObject_0irbxmo0(), timer, connected = true;
     return (() => {
         let root_uk = template_ul(), element_um = root_uk.firstChild;
-        template_u0.setProperties(element_um, omit(attributes, OMIT));
+        template_u0.setProperties(element_um, attributes);
         template_u0.onconnect(element_um, () => { connected = true; });
         template_u0.ondisconnect(element_um, () => {
             connected = false;
@@ -31,17 +36,17 @@ export default component((attributes, content) => {
         template_u0.delegate(element_um, 'click', async (event) => {
             event.preventDefault();
             event.stopPropagation();
-            let copied = await write(attributes.value);
+            let copied = await write(value);
             if (!connected) {
                 return;
             }
             clearTimeout(timer);
             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);
         });
         new template_u0.EffectSlot(element_um, () => content(state), 1);
         return root_uk;