@esportsplus/ui 0.17.6 → 0.18.0

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

@@ -1,25 +1,246 @@
-import scrollbar from '../../components/scrollbar/index.js';
-import description from './description.js';
-import title from './title.js';
-type Data<T extends Record<number | string, number | string>> = {
-    class?: string;
-    content?: unknown;
-    description?: Parameters<typeof description>[0]['description'];
-    effect?: (selected: number | string) => void;
-    mask?: Record<string, unknown>;
-    name?: string;
-    options: T;
-    option?: Record<string, unknown>;
-    required?: boolean;
-    selected: T[keyof T];
-    scrollbar?: Record<string, unknown>;
-    style?: string;
-    tag?: Record<string, unknown>;
-    text?: Record<string, unknown>;
-    title?: Parameters<typeof title>[0]['title'];
-    tooltip?: {
-        content?: Record<string, unknown>;
-    } & Record<string, unknown>;
-} & Parameters<typeof scrollbar>[0] & Record<string, unknown>;
-declare const _default: <T extends Record<number | string, number | string>>(data: Data<T>) => import("@esportsplus/template/build/types").RenderableTemplate;
+import { type Attributes, type Renderable } from '@esportsplus/template';
+declare const select: {
+    (content: unknown): Renderable;
+    (attributes: {
+        class?: string | (string | (() => unknown))[];
+        style?: string | (string | (() => unknown))[];
+    } & {
+        onabort?: ((event: UIEvent) => void) | undefined;
+        onanimationcancel?: ((event: AnimationEvent) => void) | undefined;
+        onanimationend?: ((event: AnimationEvent) => void) | undefined;
+        onanimationiteration?: ((event: AnimationEvent) => void) | undefined;
+        onanimationstart?: ((event: AnimationEvent) => void) | undefined;
+        onauxclick?: ((event: MouseEvent) => void) | undefined;
+        onbeforeinput?: ((event: InputEvent) => void) | undefined;
+        onbeforetoggle?: ((event: Event) => void) | undefined;
+        onblur?: ((event: FocusEvent) => void) | undefined;
+        oncancel?: ((event: Event) => void) | undefined;
+        oncanplay?: ((event: Event) => void) | undefined;
+        oncanplaythrough?: ((event: Event) => void) | undefined;
+        onchange?: ((event: Event) => void) | undefined;
+        onclick?: ((event: MouseEvent) => void) | undefined;
+        onclose?: ((event: Event) => void) | undefined;
+        oncompositionend?: ((event: CompositionEvent) => void) | undefined;
+        oncompositionstart?: ((event: CompositionEvent) => void) | undefined;
+        oncompositionupdate?: ((event: CompositionEvent) => void) | undefined;
+        oncontextlost?: ((event: Event) => void) | undefined;
+        oncontextmenu?: ((event: MouseEvent) => void) | undefined;
+        oncontextrestored?: ((event: Event) => void) | undefined;
+        oncopy?: ((event: ClipboardEvent) => void) | undefined;
+        oncuechange?: ((event: Event) => void) | undefined;
+        oncut?: ((event: ClipboardEvent) => void) | undefined;
+        ondblclick?: ((event: MouseEvent) => void) | undefined;
+        ondrag?: ((event: DragEvent) => void) | undefined;
+        ondragend?: ((event: DragEvent) => void) | undefined;
+        ondragenter?: ((event: DragEvent) => void) | undefined;
+        ondragleave?: ((event: DragEvent) => void) | undefined;
+        ondragover?: ((event: DragEvent) => void) | undefined;
+        ondragstart?: ((event: DragEvent) => void) | undefined;
+        ondrop?: ((event: DragEvent) => void) | undefined;
+        ondurationchange?: ((event: Event) => void) | undefined;
+        onemptied?: ((event: Event) => void) | undefined;
+        onended?: ((event: Event) => void) | undefined;
+        onerror?: ((event: ErrorEvent) => void) | undefined;
+        onfocus?: ((event: FocusEvent) => void) | undefined;
+        onfocusin?: ((event: FocusEvent) => void) | undefined;
+        onfocusout?: ((event: FocusEvent) => void) | undefined;
+        onformdata?: ((event: FormDataEvent) => void) | undefined;
+        ongotpointercapture?: ((event: PointerEvent) => void) | undefined;
+        oninput?: ((event: Event) => void) | undefined;
+        oninvalid?: ((event: Event) => void) | undefined;
+        onkeydown?: ((event: KeyboardEvent) => void) | undefined;
+        onkeypress?: ((event: KeyboardEvent) => void) | undefined;
+        onkeyup?: ((event: KeyboardEvent) => void) | undefined;
+        onload?: ((event: Event) => void) | undefined;
+        onloadeddata?: ((event: Event) => void) | undefined;
+        onloadedmetadata?: ((event: Event) => void) | undefined;
+        onloadstart?: ((event: Event) => void) | undefined;
+        onlostpointercapture?: ((event: PointerEvent) => void) | undefined;
+        onmousedown?: ((event: MouseEvent) => void) | undefined;
+        onmouseenter?: ((event: MouseEvent) => void) | undefined;
+        onmouseleave?: ((event: MouseEvent) => void) | undefined;
+        onmousemove?: ((event: MouseEvent) => void) | undefined;
+        onmouseout?: ((event: MouseEvent) => void) | undefined;
+        onmouseover?: ((event: MouseEvent) => void) | undefined;
+        onmouseup?: ((event: MouseEvent) => void) | undefined;
+        onpaste?: ((event: ClipboardEvent) => void) | undefined;
+        onpause?: ((event: Event) => void) | undefined;
+        onplay?: ((event: Event) => void) | undefined;
+        onplaying?: ((event: Event) => void) | undefined;
+        onpointercancel?: ((event: PointerEvent) => void) | undefined;
+        onpointerdown?: ((event: PointerEvent) => void) | undefined;
+        onpointerenter?: ((event: PointerEvent) => void) | undefined;
+        onpointerleave?: ((event: PointerEvent) => void) | undefined;
+        onpointermove?: ((event: PointerEvent) => void) | undefined;
+        onpointerout?: ((event: PointerEvent) => void) | undefined;
+        onpointerover?: ((event: PointerEvent) => void) | undefined;
+        onpointerup?: ((event: PointerEvent) => void) | undefined;
+        onprogress?: ((event: ProgressEvent<EventTarget>) => void) | undefined;
+        onratechange?: ((event: Event) => void) | undefined;
+        onreset?: ((event: Event) => void) | undefined;
+        onresize?: ((event: UIEvent) => void) | undefined;
+        onscroll?: ((event: Event) => void) | undefined;
+        onscrollend?: ((event: Event) => void) | undefined;
+        onsecuritypolicyviolation?: ((event: SecurityPolicyViolationEvent) => void) | undefined;
+        onseeked?: ((event: Event) => void) | undefined;
+        onseeking?: ((event: Event) => void) | undefined;
+        onselect?: ((event: Event) => void) | undefined;
+        onselectionchange?: ((event: Event) => void) | undefined;
+        onselectstart?: ((event: Event) => void) | undefined;
+        onslotchange?: ((event: Event) => void) | undefined;
+        onstalled?: ((event: Event) => void) | undefined;
+        onsubmit?: ((event: SubmitEvent) => void) | undefined;
+        onsuspend?: ((event: Event) => void) | undefined;
+        ontimeupdate?: ((event: Event) => void) | undefined;
+        ontoggle?: ((event: Event) => void) | undefined;
+        ontouchcancel?: ((event: TouchEvent) => void) | undefined;
+        ontouchend?: ((event: TouchEvent) => void) | undefined;
+        ontouchmove?: ((event: TouchEvent) => void) | undefined;
+        ontouchstart?: ((event: TouchEvent) => void) | undefined;
+        ontransitioncancel?: ((event: TransitionEvent) => void) | undefined;
+        ontransitionend?: ((event: TransitionEvent) => void) | undefined;
+        ontransitionrun?: ((event: TransitionEvent) => void) | undefined;
+        ontransitionstart?: ((event: TransitionEvent) => void) | undefined;
+        onvolumechange?: ((event: Event) => void) | undefined;
+        onwaiting?: ((event: Event) => void) | undefined;
+        onwebkitanimationend?: ((event: Event) => void) | undefined;
+        onwebkitanimationiteration?: ((event: Event) => void) | undefined;
+        onwebkitanimationstart?: ((event: Event) => void) | undefined;
+        onwebkittransitionend?: ((event: Event) => void) | undefined;
+        onwheel?: ((event: WheelEvent) => void) | undefined;
+    } & Record<PropertyKey, unknown> & {
+        scrollbar?: Attributes;
+        'scrollbar-container-content'?: Attributes;
+    } & {
+        text?: Attributes;
+        'tooltip-content'?: Attributes & {
+            direction?: string;
+        };
+    }, content: unknown): Renderable;
+};
+declare const _default: {
+    (content: (mask: typeof select) => Renderable): Renderable;
+    (attributes: {
+        class?: string | (string | (() => unknown))[];
+        style?: string | (string | (() => unknown))[];
+    } & {
+        onabort?: ((event: UIEvent) => void) | undefined;
+        onanimationcancel?: ((event: AnimationEvent) => void) | undefined;
+        onanimationend?: ((event: AnimationEvent) => void) | undefined;
+        onanimationiteration?: ((event: AnimationEvent) => void) | undefined;
+        onanimationstart?: ((event: AnimationEvent) => void) | undefined;
+        onauxclick?: ((event: MouseEvent) => void) | undefined;
+        onbeforeinput?: ((event: InputEvent) => void) | undefined;
+        onbeforetoggle?: ((event: Event) => void) | undefined;
+        onblur?: ((event: FocusEvent) => void) | undefined;
+        oncancel?: ((event: Event) => void) | undefined;
+        oncanplay?: ((event: Event) => void) | undefined;
+        oncanplaythrough?: ((event: Event) => void) | undefined;
+        onchange?: ((event: Event) => void) | undefined;
+        onclick?: ((event: MouseEvent) => void) | undefined;
+        onclose?: ((event: Event) => void) | undefined;
+        oncompositionend?: ((event: CompositionEvent) => void) | undefined;
+        oncompositionstart?: ((event: CompositionEvent) => void) | undefined;
+        oncompositionupdate?: ((event: CompositionEvent) => void) | undefined;
+        oncontextlost?: ((event: Event) => void) | undefined;
+        oncontextmenu?: ((event: MouseEvent) => void) | undefined;
+        oncontextrestored?: ((event: Event) => void) | undefined;
+        oncopy?: ((event: ClipboardEvent) => void) | undefined;
+        oncuechange?: ((event: Event) => void) | undefined;
+        oncut?: ((event: ClipboardEvent) => void) | undefined;
+        ondblclick?: ((event: MouseEvent) => void) | undefined;
+        ondrag?: ((event: DragEvent) => void) | undefined;
+        ondragend?: ((event: DragEvent) => void) | undefined;
+        ondragenter?: ((event: DragEvent) => void) | undefined;
+        ondragleave?: ((event: DragEvent) => void) | undefined;
+        ondragover?: ((event: DragEvent) => void) | undefined;
+        ondragstart?: ((event: DragEvent) => void) | undefined;
+        ondrop?: ((event: DragEvent) => void) | undefined;
+        ondurationchange?: ((event: Event) => void) | undefined;
+        onemptied?: ((event: Event) => void) | undefined;
+        onended?: ((event: Event) => void) | undefined;
+        onerror?: ((event: ErrorEvent) => void) | undefined;
+        onfocus?: ((event: FocusEvent) => void) | undefined;
+        onfocusin?: ((event: FocusEvent) => void) | undefined;
+        onfocusout?: ((event: FocusEvent) => void) | undefined;
+        onformdata?: ((event: FormDataEvent) => void) | undefined;
+        ongotpointercapture?: ((event: PointerEvent) => void) | undefined;
+        oninput?: ((event: Event) => void) | undefined;
+        oninvalid?: ((event: Event) => void) | undefined;
+        onkeydown?: ((event: KeyboardEvent) => void) | undefined;
+        onkeypress?: ((event: KeyboardEvent) => void) | undefined;
+        onkeyup?: ((event: KeyboardEvent) => void) | undefined;
+        onload?: ((event: Event) => void) | undefined;
+        onloadeddata?: ((event: Event) => void) | undefined;
+        onloadedmetadata?: ((event: Event) => void) | undefined;
+        onloadstart?: ((event: Event) => void) | undefined;
+        onlostpointercapture?: ((event: PointerEvent) => void) | undefined;
+        onmousedown?: ((event: MouseEvent) => void) | undefined;
+        onmouseenter?: ((event: MouseEvent) => void) | undefined;
+        onmouseleave?: ((event: MouseEvent) => void) | undefined;
+        onmousemove?: ((event: MouseEvent) => void) | undefined;
+        onmouseout?: ((event: MouseEvent) => void) | undefined;
+        onmouseover?: ((event: MouseEvent) => void) | undefined;
+        onmouseup?: ((event: MouseEvent) => void) | undefined;
+        onpaste?: ((event: ClipboardEvent) => void) | undefined;
+        onpause?: ((event: Event) => void) | undefined;
+        onplay?: ((event: Event) => void) | undefined;
+        onplaying?: ((event: Event) => void) | undefined;
+        onpointercancel?: ((event: PointerEvent) => void) | undefined;
+        onpointerdown?: ((event: PointerEvent) => void) | undefined;
+        onpointerenter?: ((event: PointerEvent) => void) | undefined;
+        onpointerleave?: ((event: PointerEvent) => void) | undefined;
+        onpointermove?: ((event: PointerEvent) => void) | undefined;
+        onpointerout?: ((event: PointerEvent) => void) | undefined;
+        onpointerover?: ((event: PointerEvent) => void) | undefined;
+        onpointerup?: ((event: PointerEvent) => void) | undefined;
+        onprogress?: ((event: ProgressEvent<EventTarget>) => void) | undefined;
+        onratechange?: ((event: Event) => void) | undefined;
+        onreset?: ((event: Event) => void) | undefined;
+        onresize?: ((event: UIEvent) => void) | undefined;
+        onscroll?: ((event: Event) => void) | undefined;
+        onscrollend?: ((event: Event) => void) | undefined;
+        onsecuritypolicyviolation?: ((event: SecurityPolicyViolationEvent) => void) | undefined;
+        onseeked?: ((event: Event) => void) | undefined;
+        onseeking?: ((event: Event) => void) | undefined;
+        onselect?: ((event: Event) => void) | undefined;
+        onselectionchange?: ((event: Event) => void) | undefined;
+        onselectstart?: ((event: Event) => void) | undefined;
+        onslotchange?: ((event: Event) => void) | undefined;
+        onstalled?: ((event: Event) => void) | undefined;
+        onsubmit?: ((event: SubmitEvent) => void) | undefined;
+        onsuspend?: ((event: Event) => void) | undefined;
+        ontimeupdate?: ((event: Event) => void) | undefined;
+        ontoggle?: ((event: Event) => void) | undefined;
+        ontouchcancel?: ((event: TouchEvent) => void) | undefined;
+        ontouchend?: ((event: TouchEvent) => void) | undefined;
+        ontouchmove?: ((event: TouchEvent) => void) | undefined;
+        ontouchstart?: ((event: TouchEvent) => void) | undefined;
+        ontransitioncancel?: ((event: TransitionEvent) => void) | undefined;
+        ontransitionend?: ((event: TransitionEvent) => void) | undefined;
+        ontransitionrun?: ((event: TransitionEvent) => void) | undefined;
+        ontransitionstart?: ((event: TransitionEvent) => void) | undefined;
+        onvolumechange?: ((event: Event) => void) | undefined;
+        onwaiting?: ((event: Event) => void) | undefined;
+        onwebkitanimationend?: ((event: Event) => void) | undefined;
+        onwebkitanimationiteration?: ((event: Event) => void) | undefined;
+        onwebkitanimationstart?: ((event: Event) => void) | undefined;
+        onwebkittransitionend?: ((event: Event) => void) | undefined;
+        onwheel?: ((event: WheelEvent) => void) | undefined;
+    } & (Record<PropertyKey, unknown> & ({
+        options: Record<number | string, number | string | (Attributes & {
+            content: unknown;
+        })>;
+        option?: Attributes;
+    } & ({
+        selected?: number | string;
+        state?: never;
+    } | {
+        state: {
+            active: boolean;
+            error: string;
+            selected?: number | string;
+        };
+    }))), content: (mask: typeof select) => Renderable): Renderable;
+};
 export default _default;

package/build/components/field/select.js

@@ -1,128 +1,118 @@
 import { reactive } from '@esportsplus/reactivity';
 import { html } from '@esportsplus/template';
-import { isArray, omit } from '@esportsplus/utilities';
+import { isObject, omit, pick, 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 description from './description.js';
+import template from '../../components/template/index.js';
 import error from './error.js';
-import title from './title.js';
-const FIELD_OMIT = [
-    'content',
-    'description',
-    'effect',
-    'mask',
+const TAG_KEYS = [
+    'autocomplete',
+    'autofocus',
+    'disabled',
     'name',
-    'options', 'option',
     'required',
-    'selected', 'scrollbar',
-    'tag', 'text', 'title', 'tooltip'
+    'type'
 ];
-function parse(keys, selected) {
-    let options = {};
-    for (let key of keys) {
-        options[key] = false;
-    }
-    options[selected] = true;
-    return {
-        options,
-        selected: selected || keys[0]
-    };
-}
-function template(data, state) {
-    data.scrollbar ??= {};
-    data.scrollbar.style ??= '--background-default: var(--color-black-400);';
-    data.tooltip ??= {};
-    let content = data.tooltip.content ??= {};
-    if (isArray(content.class)) {
-        content.class.push('tooltip-content tooltip-content--s --flex-column --width-full');
-    }
-    else {
-        content.class = [content.class, 'tooltip-content tooltip-content--s --flex-column --width-full'];
-    }
-    content.scrollbar = data.scrollbar;
-    return scrollbar(content, html `
-        <div
-            class='row --flex-column'
-            onclick='${(e) => {
-        let key = e?.target?.dataset?.key;
-        if (key === undefined) {
-            return;
-        }
-        state.options[key] = true;
-        state.options[state.selected] = false;
-        state.active = false;
-        state.selected = key;
-        if (data.effect) {
-            data.effect(key);
-        }
-    }}'
-        >
-            ${Object.keys(data.options || {}).map((key) => html `
-                <div
-                    class='
-                        ${() => state.options[key] && '--active'}
-                        link
-                        --flex-vertical
-                    '
-                    data-key='${key}'
-                    ${data.option}
-                >
-                    <span class='--text-truncate'>
-                        ${data.options[key]}
-                    </span>
-                </div>
-            `)}
-        </div>
-    `);
-}
-export default (data) => {
-    let state = reactive(Object.assign({
-        active: false,
-        error: '',
-        render: false,
-    }, parse(Object.keys(data.options || {}), data.selected)));
-    data.mask ??= {};
-    data.mask.onclick = () => {
-        state.render = true;
+const select = template.factory(function (data, content) {
+    let { option, options, state } = this;
+    return html `
+            <label
+                class='field-mask field-mask--select'
+                onclick='${() => {
         state.active = !state.active;
+        state.render = true;
         if (state.active) {
             root.onclick.push(() => state.active = false);
         }
-    };
-    data.tag ??= {};
-    data.tag.name = data.name;
-    data.tag.onclick = () => { };
-    data.tag.onrender = form.input.onrender(state);
-    data.tag.value = () => state.selected;
-    return html `
-        <div class='
-                ${() => state.active ? '--active' : ''}
-                field
-                tooltip
-                --flex-column
-            '
-            ${omit(data, FIELD_OMIT)}
-        >
-            ${title(data)}
-
-            <label
-                class='field-mask field-mask--select --flex-row --padding-400'
-                ${data.mask}
+    }}'
+                ${omit(data, TAG_KEYS)}
             >
-                <input class='field-tag field-tag--hidden' ${data.tag}>
+                <input
+                    class='field-mask-tag field-mask-tag--hidden'
+                    name='${data.name}'
+                    onclick='${() => { }}'
+                    onrender='${form.input.onrender(state)}'
+                    value='${() => state.selected}'
+                    ${pick(data, TAG_KEYS)}
+                >
 
-                <div class='field-text' style='pointer-events: none' ${data.text}>
-                    ${() => data.options[state.selected] || '-'}
-                </div>
+                ${content || html `
+                    <div class='field-mask-text' ${data.text}>
+                        ${() => options[state.selected] || '-'}
+                    </div>
+                `}
 
                 <div class='field-mask-arrow'></div>
 
-                ${() => state.render && template(data, state)}
+                ${() => {
+        if (!state.render) {
+            return;
+        }
+        let attributes = {
+            ...data['tooltip-content'],
+            scrollbar: { ...data['scrollbar'] },
+            'scrollbar-container-content': { ...data['scrollbar-container-content'] }
+        }, keys = Object.keys(options), selected = reactive(Object.fromEntries(keys.map(key => [key, false])));
+        attributes.class = toArray(attributes.class);
+        attributes.class.push(`tooltip-content tooltip-content--${attributes.direction || 's'} --flex-column --width-full`);
+        attributes.onclick = (e) => {
+            let key = e?.target?.dataset?.key;
+            if (key === undefined) {
+                return;
+            }
+            let previous = state.selected;
+            state.selected = key;
+            state.active = false;
+            selected[key] = true;
+            selected[previous] = false;
+        };
+        return scrollbar(attributes, keys.map((key) => html `
+                        <div
+                            class='
+                                ${() => selected[key] && '--active'}
+                                link
+                            '
+                            data-key='${key}'
+                            ${omit(options[key], ['content'])}
+                            ${option}
+                        >
+                            <span class='--text-truncate'>
+                                ${options[key]}
+                            </span>
+                        </div>
+                    `));
+    }}
             </label>
-
-            ${description(data)}
-            ${error(state)}
-        </div>
-    `;
-};
+        `;
+});
+export default template.factory((data, content) => {
+    let options = data.options, state = data.state || reactive({
+        active: false,
+        error: '',
+        selected: data.selected || Object.keys(options)[0]
+    });
+    for (let key in options) {
+        if (isObject(options[key])) {
+            continue;
+        }
+        options[key] = { content: options[key] };
+    }
+    return html `
+            <div
+                class='
+                    ${() => state.active && '--active'}
+                    field
+                    tooltip
+                '
+                ${omit(data, ['options', 'state'])}
+            >
+                ${content((...args) => select.call({
+        option: data.option,
+        options: data.options,
+        state
+    }, ...args))}
+                ${error(state)}
+            </div>
+        `;
+});

package/build/components/field/title.d.ts

@@ -1,8 +1,114 @@
-declare const _default: (data: {
-    required?: boolean;
-    title?: {
-        attributes?: Record<string, unknown>;
-        content: unknown;
-    };
-}) => import("@esportsplus/template/build/types").RenderableTemplate | "";
+declare const _default: {
+    (content: unknown): import("@esportsplus/template").Renderable;
+    (attributes: {
+        class?: string | (string | (() => unknown))[];
+        style?: string | (string | (() => unknown))[];
+    } & {
+        onabort?: ((event: UIEvent) => void) | undefined;
+        onanimationcancel?: ((event: AnimationEvent) => void) | undefined;
+        onanimationend?: ((event: AnimationEvent) => void) | undefined;
+        onanimationiteration?: ((event: AnimationEvent) => void) | undefined;
+        onanimationstart?: ((event: AnimationEvent) => void) | undefined;
+        onauxclick?: ((event: MouseEvent) => void) | undefined;
+        onbeforeinput?: ((event: InputEvent) => void) | undefined;
+        onbeforetoggle?: ((event: Event) => void) | undefined;
+        onblur?: ((event: FocusEvent) => void) | undefined;
+        oncancel?: ((event: Event) => void) | undefined;
+        oncanplay?: ((event: Event) => void) | undefined;
+        oncanplaythrough?: ((event: Event) => void) | undefined;
+        onchange?: ((event: Event) => void) | undefined;
+        onclick?: ((event: MouseEvent) => void) | undefined;
+        onclose?: ((event: Event) => void) | undefined;
+        oncompositionend?: ((event: CompositionEvent) => void) | undefined;
+        oncompositionstart?: ((event: CompositionEvent) => void) | undefined;
+        oncompositionupdate?: ((event: CompositionEvent) => void) | undefined;
+        oncontextlost?: ((event: Event) => void) | undefined;
+        oncontextmenu?: ((event: MouseEvent) => void) | undefined;
+        oncontextrestored?: ((event: Event) => void) | undefined;
+        oncopy?: ((event: ClipboardEvent) => void) | undefined;
+        oncuechange?: ((event: Event) => void) | undefined;
+        oncut?: ((event: ClipboardEvent) => void) | undefined;
+        ondblclick?: ((event: MouseEvent) => void) | undefined;
+        ondrag?: ((event: DragEvent) => void) | undefined;
+        ondragend?: ((event: DragEvent) => void) | undefined;
+        ondragenter?: ((event: DragEvent) => void) | undefined;
+        ondragleave?: ((event: DragEvent) => void) | undefined;
+        ondragover?: ((event: DragEvent) => void) | undefined;
+        ondragstart?: ((event: DragEvent) => void) | undefined;
+        ondrop?: ((event: DragEvent) => void) | undefined;
+        ondurationchange?: ((event: Event) => void) | undefined;
+        onemptied?: ((event: Event) => void) | undefined;
+        onended?: ((event: Event) => void) | undefined;
+        onerror?: ((event: ErrorEvent) => void) | undefined;
+        onfocus?: ((event: FocusEvent) => void) | undefined;
+        onfocusin?: ((event: FocusEvent) => void) | undefined;
+        onfocusout?: ((event: FocusEvent) => void) | undefined;
+        onformdata?: ((event: FormDataEvent) => void) | undefined;
+        ongotpointercapture?: ((event: PointerEvent) => void) | undefined;
+        oninput?: ((event: Event) => void) | undefined;
+        oninvalid?: ((event: Event) => void) | undefined;
+        onkeydown?: ((event: KeyboardEvent) => void) | undefined;
+        onkeypress?: ((event: KeyboardEvent) => void) | undefined;
+        onkeyup?: ((event: KeyboardEvent) => void) | undefined;
+        onload?: ((event: Event) => void) | undefined;
+        onloadeddata?: ((event: Event) => void) | undefined;
+        onloadedmetadata?: ((event: Event) => void) | undefined;
+        onloadstart?: ((event: Event) => void) | undefined;
+        onlostpointercapture?: ((event: PointerEvent) => void) | undefined;
+        onmousedown?: ((event: MouseEvent) => void) | undefined;
+        onmouseenter?: ((event: MouseEvent) => void) | undefined;
+        onmouseleave?: ((event: MouseEvent) => void) | undefined;
+        onmousemove?: ((event: MouseEvent) => void) | undefined;
+        onmouseout?: ((event: MouseEvent) => void) | undefined;
+        onmouseover?: ((event: MouseEvent) => void) | undefined;
+        onmouseup?: ((event: MouseEvent) => void) | undefined;
+        onpaste?: ((event: ClipboardEvent) => void) | undefined;
+        onpause?: ((event: Event) => void) | undefined;
+        onplay?: ((event: Event) => void) | undefined;
+        onplaying?: ((event: Event) => void) | undefined;
+        onpointercancel?: ((event: PointerEvent) => void) | undefined;
+        onpointerdown?: ((event: PointerEvent) => void) | undefined;
+        onpointerenter?: ((event: PointerEvent) => void) | undefined;
+        onpointerleave?: ((event: PointerEvent) => void) | undefined;
+        onpointermove?: ((event: PointerEvent) => void) | undefined;
+        onpointerout?: ((event: PointerEvent) => void) | undefined;
+        onpointerover?: ((event: PointerEvent) => void) | undefined;
+        onpointerup?: ((event: PointerEvent) => void) | undefined;
+        onprogress?: ((event: ProgressEvent<EventTarget>) => void) | undefined;
+        onratechange?: ((event: Event) => void) | undefined;
+        onreset?: ((event: Event) => void) | undefined;
+        onresize?: ((event: UIEvent) => void) | undefined;
+        onscroll?: ((event: Event) => void) | undefined;
+        onscrollend?: ((event: Event) => void) | undefined;
+        onsecuritypolicyviolation?: ((event: SecurityPolicyViolationEvent) => void) | undefined;
+        onseeked?: ((event: Event) => void) | undefined;
+        onseeking?: ((event: Event) => void) | undefined;
+        onselect?: ((event: Event) => void) | undefined;
+        onselectionchange?: ((event: Event) => void) | undefined;
+        onselectstart?: ((event: Event) => void) | undefined;
+        onslotchange?: ((event: Event) => void) | undefined;
+        onstalled?: ((event: Event) => void) | undefined;
+        onsubmit?: ((event: SubmitEvent) => void) | undefined;
+        onsuspend?: ((event: Event) => void) | undefined;
+        ontimeupdate?: ((event: Event) => void) | undefined;
+        ontoggle?: ((event: Event) => void) | undefined;
+        ontouchcancel?: ((event: TouchEvent) => void) | undefined;
+        ontouchend?: ((event: TouchEvent) => void) | undefined;
+        ontouchmove?: ((event: TouchEvent) => void) | undefined;
+        ontouchstart?: ((event: TouchEvent) => void) | undefined;
+        ontransitioncancel?: ((event: TransitionEvent) => void) | undefined;
+        ontransitionend?: ((event: TransitionEvent) => void) | undefined;
+        ontransitionrun?: ((event: TransitionEvent) => void) | undefined;
+        ontransitionstart?: ((event: TransitionEvent) => void) | undefined;
+        onvolumechange?: ((event: Event) => void) | undefined;
+        onwaiting?: ((event: Event) => void) | undefined;
+        onwebkitanimationend?: ((event: Event) => void) | undefined;
+        onwebkitanimationiteration?: ((event: Event) => void) | undefined;
+        onwebkitanimationstart?: ((event: Event) => void) | undefined;
+        onwebkittransitionend?: ((event: Event) => void) | undefined;
+        onwheel?: ((event: WheelEvent) => void) | undefined;
+    } & Record<PropertyKey, unknown> & {
+        required?: boolean;
+    }, content: unknown): import("@esportsplus/template").Renderable;
+};
 export default _default;

package/build/components/field/title.js

@@ -1,16 +1,13 @@
 import { html } from '@esportsplus/template';
+import { omit } from '@esportsplus/utilities';
 import tooltip from '../../components/tooltip/index.js';
-export default (data) => {
-    if (!data?.title) {
-        return '';
-    }
-    return html `
-        <div class='field-title --flex-horizontal-space-between --flex-vertical' ${data.title.attributes}>
-            ${data.title.content}
+import template from '../../components/template/index.js';
+export default template.factory((attributes, content) => html `
+        <div class='field-title --flex-horizontal-space-between --flex-vertical' ${omit(attributes, ['required'])}>
+            ${content}
 
-            ${data?.required && tooltip.onhover({ class: 'bubble --background-primary --margin-left' }, html `
+            ${attributes.required && tooltip.onhover({ class: 'bubble --background-primary --margin-left' }, html `
                 <span class='tooltip-message tooltip-message--w'>Required</span>
             `)}
         </div>
-    `;
-};
+    `);