@esportsplus/ui 0.54.0 → 0.55.0

package/src/components/tooltip/menu.ts

@@ -1,55 +1,44 @@
 import { component, html, type Attributes, type Renderable } from '@esportsplus/template';
 import { reactive } from '@esportsplus/reactivity';
-import { omit } from '@esportsplus/utilities';
+import { MENU_OPTION, MENU_TOOLTIP_CONTENT } from './constants';
 import onclick from './onclick';
 
 
 type A = Attributes & {
+    [MENU_OPTION]?: Attributes,
+    [MENU_TOOLTIP_CONTENT]?: Attributes & { direction?: string },
     options: (Attributes & { content: Renderable<unknown> })[],
-    option?: Attributes,
     state?: { active: boolean },
-    toggle?: boolean,
-    'tooltip-content': Attributes & { direction?: string }
+    toggle?: boolean
 };
 
 
-const OMIT = ['options', 'option', 'tooltip-content'];
-
-const OMIT_OPTION = ['content'];
-
-const OMIT_TOOLTIP_CONTENT = ['direction'];
-
-
-export default component<A>(
-    (attributes, content) => {
-        let options = attributes.options,
-            option = attributes.option,
-            state = attributes.state || reactive({ active: false }),
-            tooltipContent = attributes?.['tooltip-content'],
-            tooltipContentDirection = tooltipContent?.direction || 'nw';
+export default Object.assign(component<A>(
+    ({ options, state = reactive({ active: false }), ...attributes }, content) => {
+        let { direction = 'nw', ...tooltipContent } = attributes[MENU_TOOLTIP_CONTENT] ?? {};
 
         return onclick(
-            { ...omit(attributes, OMIT), state },
+            { ...attributes, state },
             html`
                 ${content}
 
                 <div
-                    class='tooltip-content ${`tooltip-content--${tooltipContentDirection}`}'
-                    ${tooltipContent && omit(tooltipContent, OMIT_TOOLTIP_CONTENT)}
+                    class='tooltip-content ${`tooltip-content--${direction}`}'
+                    ${tooltipContent}
                     ${{
                         inert: () => !state.active
                     }}
                 >
-                    ${options.map((o) => {
+                    ${options.map(({ content, ...o }) => {
                         if (o.href) {
                             return html`
                                 <a
                                     class='link --width-full'
                                     target='_blank'
-                                    ${omit(o, OMIT_OPTION)}
-                                    ${option}
+                                    ${o}
+                                    ${attributes[MENU_OPTION]}
                                 >
-                                    ${o.content}
+                                    ${content}
                                 </a>
                             `;
                         }
@@ -57,10 +46,10 @@ export default component<A>(
                         return html`
                             <div
                                 class='link --width-full'
-                                ${omit(o, OMIT_OPTION)}
-                                ${option}
+                                ${o}
+                                ${attributes[MENU_OPTION]}
                             >
-                                ${o.content}
+                                ${content}
                             </div>
                         `;
                     })}
@@ -68,4 +57,4 @@ export default component<A>(
             `
         );
     }
-);
+), { option: MENU_OPTION, tooltipContent: MENU_TOOLTIP_CONTENT } as const);

package/src/components/tooltip/onclick.ts

@@ -1,40 +1,29 @@
 import { component, html, type Attributes } from '@esportsplus/template';
 import { reactive } from '@esportsplus/reactivity';
-import { omit } from '@esportsplus/utilities';
-
-
-const OMIT = ['state', 'toggle'];
 
 
 export default component<Attributes & { state?: { active: boolean }, toggle?: boolean }>(
-    (attributes, content) => {
-        let ref: HTMLElement,
-            state = attributes.state || reactive({ active: false }),
-            toggle = attributes.toggle || false;
-
-        return html`
-            <div
-                class='tooltip'
-                ${omit(attributes, OMIT)}
-                ${{
-                    class: () => state.active && '--active',
-                    ondocumentclick: (event) => {
-                        if (!state.active || !ref?.isConnected) {
-                            return;
-                        }
+    ({ state = reactive({ active: false }), toggle = false, ...attributes }, content) => html`
+        <div
+            class='tooltip'
+            ${attributes}
+            ${{
+                class: () => state.active && '--active',
+                onclick: function(e) {
+                    state.active = this === e.target || toggle ? !state.active : true;
+                },
+                ondocumentclick: function(this, event) {
+                    if (!this?.isConnected || !state.active) {
+                        return;
+                    }
 
-                        if (!ref.contains(event.target as Node | null)) {
-                            state.active = false;
-                        }
-                    },
-                    onclick: function(e) {
-                        state.active = this === e.target || toggle ? !state.active : true;
-                    },
-                    onrender: (element) => ref = element
-                }}
-            >
-                ${content}
-            </div>
-        `;
-    }
+                    if (!this.contains(event.target as Node | null)) {
+                        state.active = false;
+                    }
+                }
+            }}
+        >
+            ${content}
+        </div>
+    `
 );

package/src/components/tooltip/onhover.ts

@@ -1,34 +1,23 @@
 import { component, html, Attributes } from '@esportsplus/template';
 import { reactive } from '@esportsplus/reactivity';
-import { omit } from '@esportsplus/utilities';
 
 
-type A = Attributes & { state?: { active: boolean } };
-
-
-const OMIT = ['state'];
-
-
-export default component(
-    (attributes: A, content) => {
-        let state = attributes.state || reactive({ active: false });
-
-        return html`
-            <div
-                class='tooltip'
-                ${omit(attributes, OMIT)}
-                ${{
-                    class: () => state.active && '--active',
-                    onmouseover: () => {
-                        state.active = true;
-                    },
-                    onmouseout: () => {
-                        state.active = false;
-                    }
-                }}
-            >
-                ${content}
-            </div>
-        `;
-    }
+export default component<Attributes & { state?: { active: boolean } }>(
+    ({ state = reactive({ active: false }), ...attributes }, content) => html`
+        <div
+            class='tooltip'
+            ${attributes}
+            ${{
+                class: () => state.active && '--active',
+                onmouseover: () => {
+                    state.active = true;
+                },
+                onmouseout: () => {
+                    state.active = false;
+                }
+            }}
+        >
+            ${content}
+        </div>
+    `
 );

package/src/themes/dark/select.ts

@@ -1,16 +1,16 @@
 import select from '~/components/select';
 
 
-export default select.bind({
+const themed: typeof select = Object.assign(select.bind({
     attributes: {
         class: '--background-black --border-black --color-white',
-        option: {
+        [select.option]: {
             class: '--background-black --color-white',
             style: '--color-default: var(--color-grey-500); --padding-horizontal: var(--size-500); white-space: nowrap; width: 100%;'
         },
         style: '--border-color-default: var(--color-black-300); --border-width: var(--border-width-400); border: var(--border-width) solid var(--border-color);',
 
-        'tooltip-content': {
+        [select.tooltipContent]: {
             direction: 'sw',
             style: `
                 --background: var(--color-black-400);
@@ -21,4 +21,7 @@ export default select.bind({
             `
         }
     }
-});
+}), { arrow: select.arrow, option: select.option, tooltipContent: select.tooltipContent } as const);
+
+
+export default themed;