@esportsplus/ui 0.0.20 → 0.0.22

package/src/components/tooltip/index.ts

@@ -29,22 +29,6 @@ const onclick = ({ active, toggle }: { active?: boolean, toggle?: boolean }) =>
     });
 };
 
-const onfocus = (active: boolean = false) => {
-    let state = reactive({ active });
-
-    return html({
-        class: () => {
-            return `tooltip ${state.active ? '--active' : ''}`;
-        },
-        onfocusin: () => {
-            state.active = true;
-        },
-        onfocusout: () => {
-            state.active = false;
-        }
-    });
-};
-
 const onhover = (active: boolean = false) => {
     let state = reactive({ active });
 
@@ -62,4 +46,4 @@ const onhover = (active: boolean = false) => {
 };
 
 
-export default { onclick, onfocus, onhover, menu };
+export default { onclick, onhover, menu };

package/src/components/tooltip/menu.ts

@@ -1,3 +1,4 @@
+import { effect, reactive } from '@esportsplus/reactivity';
 import { html } from '@esportsplus/template';
 
 
@@ -16,38 +17,59 @@ type Data = {
         text: string;
         url?: string;
     }[];
+    state: { active: boolean };
     style?: string;
 };
 
 
-export default (data: Data) => html`
-    <div class="tooltip-content tooltip-content--${data?.direction || 's'} --flex-column --width-full ${data?.class || ''}" style='${data?.style || ''}'>
-        ${(data?.items || []).map(item => html`
-            ${item?.border ? html`
-                <div
-                    class="border ${item?.border?.class || ''}"
-                    style='
-                        margin-left: calc(var(--margin-horizontal) * -1);
-                        width: calc(100% + var(--margin-horizontal) * 2);
-                    '
-                ></div>
-            ` : ''}
-
-            <${item.url ? 'a' : 'div'}
-                class='link --flex-vertical ${item?.class}' ${item?.onclick ? html`onclick='${item.onclick}'` : ''}
-                style='${item?.style || ''}'
-                ${item?.url ? `href='${item.url}' target='${item.target || '_blank'}'` : ''}
-            >
-                ${item?.svg ? html`
-                    <div class="icon --margin-right --margin-300" style='margin-left: var(--size-100)'>
-                        ${item.svg}
-                    </div>
-                ` : ''}
-
-                <div class="text --color-text --flex-fill">
-                    ${item.text}
-                </div>
-            </${item.url ? 'a' : 'div'}>
-        `)}
-    </div>
-`;
+export default (data: Data) => {
+    let state = reactive({
+            render: false
+        });
+
+    effect(() => {
+        if (!data.state.active || state.render) {
+            return;
+        }
+
+        state.render = true;
+    });
+
+    return () => {
+        if (!state.render) {
+            return '';
+        }
+
+        return html`
+            <div class="tooltip-content tooltip-content--${data?.direction || 's'} --flex-column --width-full ${data?.class || ''}" style='${data?.style || ''}'>
+                ${(data?.items || []).map(item => html`
+                    ${item?.border ? html`
+                        <div
+                            class="border ${item?.border?.class || ''}"
+                            style='
+                                margin-left: calc(var(--margin-horizontal) * -1);
+                                width: calc(100% + var(--margin-horizontal) * 2);
+                            '
+                        ></div>
+                    ` : ''}
+
+                    <${item?.url ? 'a' : 'div'}
+                        class='link --flex-vertical ${item?.class}' ${item?.onclick ? html({ onclick: item.onclick }) : ''}
+                        style='${item?.style || ''}'
+                        ${item?.url ? `href='${item.url}' target='${item.target || '_blank'}'` : ''}
+                    >
+                        ${item?.svg ? html`
+                            <div class="icon --margin-right --margin-300" style='margin-left: var(--size-100)'>
+                                ${item.svg}
+                            </div>
+                        ` : ''}
+
+                        <div class="text --color-text --flex-fill">
+                            ${item.text}
+                        </div>
+                    </${item?.url ? 'a' : 'div'}>
+                `)}
+            </div>
+        `;
+    };
+};

package/src/components/root/layout.ts

@@ -1,36 +0,0 @@
-import { html } from '@esportsplus/template';
-import { scrollbar } from '~/components';
-
-
-type Data = {
-    overlay?: {
-        class?: string;
-        content?: any;
-    };
-    site?: {
-        class?: string;
-        content?: any;
-        scrollbar?: {
-            style?: string;
-        };
-    };
-};
-
-
-export default (data: Data = {}) => {
-    let s = scrollbar({
-            fixed: true,
-            style: data?.site?.scrollbar?.style || '--background-default: var(--color-black-400);'
-        });
-
-    return html`
-        <section class='site ${data?.site?.class || ''}' ${s.attributes}>
-            ${data?.site?.content || ''}
-            ${s.html}
-        </section>
-
-        <section class='overlay ${data?.overlay?.class || ''}'>
-            ${data?.overlay?.content || ''}
-        </section>
-    `;
-};

package/src/components/state/index.ts

@@ -1,22 +0,0 @@
-import { reactive } from '@esportsplus/reactivity';
-import { html } from '@esportsplus/template';
-
-
-const onfocus = (active: boolean = false) => {
-    let state = reactive({ active });
-
-    return html({
-        class: () => {
-            return state.active ? '--active' : '';
-        },
-        onfocusin: () => {
-            state.active = true;
-        },
-        onfocusout: () => {
-            state.active = false;
-        }
-    });
-};
-
-
-export default { onfocus };