@esportsplus/ui 0.19.1 → 0.19.3

package/build/components/tooltip/onhover.d.ts

@@ -1,7 +1,16 @@
 import { Attributes } from '@esportsplus/template';
 declare const _default: {
-    (): import("@esportsplus/template").Renderable<unknown>;
-    (content: import("@esportsplus/template").Renderable<unknown>): import("@esportsplus/template").Renderable<unknown>;
-    (attributes: Attributes, content: import("@esportsplus/template").Renderable<unknown>): import("@esportsplus/template").Renderable<unknown>;
+    (): ReturnType<(this: {
+        attributes?: Attributes | undefined;
+        content?: import("@esportsplus/template").Renderable<any>;
+    }, attributes: Readonly<Attributes>, content: import("@esportsplus/template").Renderable<any>) => import("@esportsplus/template").Renderable<any>>;
+    (content: import("@esportsplus/template").Renderable<any>): ReturnType<(this: {
+        attributes?: Attributes | undefined;
+        content?: import("@esportsplus/template").Renderable<any>;
+    }, attributes: Readonly<Attributes>, content: import("@esportsplus/template").Renderable<any>) => import("@esportsplus/template").Renderable<any>>;
+    (attributes: Attributes, content: import("@esportsplus/template").Renderable<any>): ReturnType<(this: {
+        attributes?: Attributes | undefined;
+        content?: import("@esportsplus/template").Renderable<any>;
+    }, attributes: Readonly<Attributes>, content: import("@esportsplus/template").Renderable<any>) => import("@esportsplus/template").Renderable<any>>;
 };
 export default _default;

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

@@ -1,7 +1,16 @@
 import './scss/index.scss';
 declare const _default: {
-    (): import("@esportsplus/template").Renderable<unknown>;
-    (content: string[]): import("@esportsplus/template").Renderable<unknown>;
-    (attributes: import("@esportsplus/template").Attributes, content: string[]): import("@esportsplus/template").Renderable<unknown>;
+    (): ReturnType<(this: {
+        attributes?: import("@esportsplus/template").Attributes | undefined;
+        content?: string[] | undefined;
+    }, attributes: Readonly<import("@esportsplus/template").Attributes>, content: string[]) => import("@esportsplus/template").Renderable<any>>;
+    (content: string[]): ReturnType<(this: {
+        attributes?: import("@esportsplus/template").Attributes | undefined;
+        content?: string[] | undefined;
+    }, attributes: Readonly<import("@esportsplus/template").Attributes>, content: string[]) => import("@esportsplus/template").Renderable<any>>;
+    (attributes: import("@esportsplus/template").Attributes, content: string[]): ReturnType<(this: {
+        attributes?: import("@esportsplus/template").Attributes | undefined;
+        content?: string[] | undefined;
+    }, attributes: Readonly<import("@esportsplus/template").Attributes>, content: string[]) => import("@esportsplus/template").Renderable<any>>;
 };
 export default _default;

package/package.json

@@ -4,7 +4,7 @@
     "@esportsplus/action": "^0.0.58",
     "@esportsplus/queue": "^0.1.0",
     "@esportsplus/reactivity": "^0.16.7",
-    "@esportsplus/template": "^0.19.5",
+    "@esportsplus/template": "^0.20.3",
     "@esportsplus/utilities": "^0.22.1",
     "modern-normalize": "^3.0.1"
   },
@@ -16,7 +16,7 @@
     "lightningcss": "^1.30.1",
     "npm-run-all": "^4.1.5",
     "sass": "^1.90.0",
-    "vite": "^7.1.2"
+    "vite": "^7.1.3"
   },
   "exports": {
     "./css-utilities": {
@@ -48,7 +48,7 @@
   "private": false,
   "sideEffects": false,
   "type": "module",
-  "version": "0.19.1",
+  "version": "0.19.3",
   "scripts": {
     "build": "run-s build:vite build:ts",
     "build:ts": "tsc && tsc-alias",

package/src/components/field/checkbox.ts

@@ -1,29 +1,26 @@
 import { reactive } from '@esportsplus/reactivity';
 import { html, type Attributes, type Renderable } from '@esportsplus/template';
-import { omit, pick } from '@esportsplus/utilities';
+import { omit } from '@esportsplus/utilities';
 import template from '~/components/template';
 
 
 type A = Attributes & {
-    checked?: boolean;
-    disabled?: boolean;
-    name?: string;
-    required?: boolean;
-    type?: string;
-    value?: unknown;
+    'field-mask-tag'?: Attributes
 };
 
 
 const OMIT_FIELD = ['state'];
 
-const TAG = ['checked', 'disabled', 'name', 'required'];
+const OMIT_TAG = ['field-mask-tag'];
 
 
 function mask(attributes: A, modifier: string, state: { active: boolean }) {
+    let a = attributes['field-mask-tag'] || {};
+
     return html`
         <div
             class='field-mask'
-            ${omit(attributes, TAG)}
+            ${omit(attributes, OMIT_TAG)}
             ${{
                 class: `field-mask--${modifier}`
             }}
@@ -31,11 +28,11 @@ function mask(attributes: A, modifier: string, state: { active: boolean }) {
             <input
                 class='field-mask-tag field-mask-tag--hidden'
                 ${{
-                    checked: attributes.checked || attributes.value || state.active,
+                    checked: a.checked || a.value || state.active,
                     type: modifier === 'radio' ? 'radio' : 'checkbox',
-                    value: attributes.value || 1
+                    value: a.value || 1
                 }}
-                ${pick(attributes, TAG) as Attributes}
+                ${a}
             >
         </div>
     `;
@@ -44,7 +41,7 @@ function mask(attributes: A, modifier: string, state: { active: boolean }) {
 
 const field = template.factory(
     function(
-        this: ((attributes: A, state: { active: boolean }) => Renderable<unknown>),
+        this: { mask: (attributes: A, state: { active: boolean }) => Renderable<unknown> },
         attributes: Attributes & { state?: { active: boolean } },
         content: (mask: ((attributes: A) => Renderable<unknown>)) => Renderable<unknown>
     ) {
@@ -67,7 +64,7 @@ const field = template.factory(
                     }
                 }}
             >
-                ${content((attributes) => this(attributes, state))}
+                ${content((attributes) => this.mask(attributes, state))}
             </label>
         `
     }
@@ -75,13 +72,19 @@ const field = template.factory(
 
 
 export default {
-    checkbox: field.bind((attributes: A, state: { active: boolean }) => {
-        return mask(attributes, 'checkbox', state);
+    checkbox: field.bind({
+        mask: (attributes: A, state: { active: boolean }) => {
+            return mask(attributes, 'checkbox', state);
+        }
     }),
-    radio: field.bind((attributes: A, state: { active: boolean }) => {
-        return mask(attributes, 'radio', state);
+    radio: field.bind({
+        mask: (attributes: A, state: { active: boolean }) => {
+            return mask(attributes, 'radio', state);
+        }
     }),
-    switch: field.bind((attributes: A, state: { active: boolean }) => {
-        return mask(attributes, 'switch', state);
+    switch: field.bind({
+        mask: (attributes: A, state: { active: boolean }) => {
+            return mask(attributes, 'switch', state);
+        }
     }),
 };

package/src/components/field/input.ts

@@ -1,32 +1,19 @@
 import { reactive } from '@esportsplus/reactivity';
 import { html, type Attributes, type Renderable } from '@esportsplus/template';
-import { omit, pick } from '@esportsplus/utilities';
+import { omit } from '@esportsplus/utilities';
 import form from '~/components/form';
 import template from '~/components/template';
 import error from './error';
 
 
-const FILE_TAG = ['accept', 'disabled', 'name', 'required', 'value'];
+type A = Attributes & {
+    'field-mask-tag'?: Attributes
+};
+
 
-const OMIT = ['state'];
+const OMIT_FIELD = ['state'];
 
-const TEXT_TAG = [
-    'autocapitalize',
-    'autocomplete',
-    'autocorrect',
-    'autofocus',
-    'disabled',
-    'maxlength',
-    'minlength',
-    'name',
-    'placeholder',
-    'readonly',
-    'required',
-    'spellcheck',
-    'type',
-    'value',
-    'wrap'
-];
+const OMIT_TAG = ['field-mask-tag'];
 
 
 const field = template.factory(
@@ -43,7 +30,7 @@ const field = template.factory(
         return html`
             <div
                 class='field'
-                ${omit(attributes, OMIT)}
+                ${omit(attributes, OMIT_FIELD)}
                 ${{
                     class: () => state.active && '--active',
                     onfocusin: () => {
@@ -65,16 +52,16 @@ const field = template.factory(
 );
 
 const file = template.factory(
-    function(this: { state: { active: boolean, error: string } }, attributes, content) {
+    function(this: { state: { active: boolean, error: string } }, attributes: A, content) {
         return html`
             <label
                 class='field-mask field-mask--file'
-                ${omit(attributes, FILE_TAG)}
+                ${omit(attributes, OMIT_TAG)}
             >
                 <input
                     class='field-mask-tag field-mask-tag--hidden'
                     type='file'
-                    ${pick(attributes, FILE_TAG) as Attributes}
+                    ${attributes['field-mask-tag']}
                     ${{
                         onrender: form.input.onrender(this.state)
                     }}
@@ -87,12 +74,15 @@ const file = template.factory(
 );
 
 const text = template.factory(
-    function(this: { state: { active: boolean, error: string } }, attributes, content) {
+    function(this: { state: { active: boolean, error: string } }, attributes: A, content) {
         return html`
-            <label class='field-mask field-mask--input' ${omit(attributes, TEXT_TAG)}>
+            <label
+                class='field-mask field-mask--input'
+                ${omit(attributes, OMIT_TAG)}
+            >
                 <input
                     class='field-mask-tag'
-                    ${pick(attributes, TEXT_TAG) as Attributes}
+                    ${attributes['field-mask-tag']}
                     ${{
                         onrender: form.input.onrender(this.state),
                         type: attributes.type || 'text'
@@ -105,20 +95,22 @@ const text = template.factory(
 );
 
 const textarea = template.factory(
-    function(this: { state: { active: boolean, error: string } }, attributes: Attributes & { value?: string }, content) {
+    function(this: { state: { active: boolean, error: string } }, attributes: A, content) {
+        let a = attributes['field-mask-tag'] || {};
+
         return html`
             <label
                 class='field-mask field-mask--textarea'
-                ${omit(attributes, TEXT_TAG)}
+                ${omit(attributes, OMIT_TAG)}
             >
                 <textarea
                     class='field-mask-tag'
-                    ${pick(attributes, TEXT_TAG) as Attributes}
+                    ${a}
                     ${{
                         onrender: form.input.onrender(this.state)
                     }}
                 >
-                    ${attributes.value}
+                    ${a.value as string}
                 </textarea>
                 ${content}
             </label>

package/src/components/field/select.ts

@@ -1,6 +1,6 @@
 import { reactive } from '@esportsplus/reactivity';
 import { html, type Attributes, type Renderable } from '@esportsplus/template';
-import { isObject, omit, pick, toArray } from '@esportsplus/utilities';
+import { isObject, omit, toArray } from '@esportsplus/utilities';
 import form from '~/components/form';
 import root from '~/components/root';
 import scrollbar, { Attributes as A } from '~/components/scrollbar';
@@ -8,21 +8,12 @@ import template from '~/components/template';
 import error from './error';
 
 
-const PICK_TAG = [
-    'autocomplete',
-    'autofocus',
-    'disabled',
-    'name',
-    'required',
-    'type'
-];
-
 const OMIT_FIELD = ['options', 'state'];
 
 const OMIT_MASK = [
-    ...PICK_TAG,
     'field-mask-arrow',
     'field-mask-text',
+    'field-mask-tag',
     'scrollbar',
     'scrollbar-container-content',
     'tooltip-content',
@@ -45,6 +36,7 @@ const select = template.factory(
         },
         attributes: Attributes & A & {
             'field-mask-arrow'?: Attributes;
+            'field-mask-tag'?: Attributes;
             'field-mask-text'?: Attributes;
             'tooltip-content'?: Attributes & { direction?: string };
         },
@@ -74,7 +66,7 @@ const select = template.factory(
                         onrender: form.input.onrender(state),
                         value: () => state.selected
                     }}
-                    ${pick(attributes, PICK_TAG) as Attributes}
+                    ${attributes['field-mask-tag']}
                 >
 
                 ${content || html`
@@ -142,9 +134,6 @@ const select = template.factory(
 );
 
 
-
-
-
 export default template.factory<
     Attributes & {
         options: Record<number | string, (number | string | Attributes & { content: unknown })>;

package/src/components/template/index.ts

@@ -3,15 +3,15 @@ import { Attributes, Renderable } from '@esportsplus/template';
 
 const factory = <
     A extends Attributes,
-    C = Renderable<unknown>,
+    C = Renderable<any>,
     Context = { attributes?: A, content?: C }
 >(
-    template: (this: Context, attributes: Readonly<A>, content: C) => Renderable<unknown>
+    template: (this: Context, attributes: Readonly<A>, content: C) => Renderable<any>
 ) => {
-    function factory(): Renderable<unknown>;
-    function factory(content: C): Renderable<unknown>;
-    function factory(attributes: A, content: C): Renderable<unknown>;
-    function factory(this: Context, one?: A | C, two?: C): Renderable<unknown> {
+    function factory(): ReturnType<typeof template>;
+    function factory(content: C): ReturnType<typeof template>;
+    function factory(attributes: A, content: C): ReturnType<typeof template>;
+    function factory(this: Context, one?: A | C, two?: C): ReturnType<typeof template> {
         let attributes: A = {} as A,
             content: C;