@esportsplus/ui 0.2.5 → 0.2.9

package/src/components/tooltip/menu.ts

@@ -1,71 +0,0 @@
-import { effect } from '@esportsplus/reactivity';
-import { html } from '@esportsplus/template';
-
-
-type Data = {
-    class?: string;
-    direction?: string;
-    items?: {
-        border?: {
-            class?: string;
-        };
-        class?: string;
-        onclick?: (...args: any[]) => void;
-        style?: string;
-        svg?: string;
-        target?: string;
-        text: string;
-        url?: string;
-    }[];
-    state?: { active?: boolean };
-    style?: string;
-};
-
-
-function template(data: Data) {
-    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>
-    `;
-}
-
-
-// TODO: There's nothing binding activate to tooltip menu ( this is never called outside initial effect run )
-export default (data: Data, state: { active?: boolean, render?: boolean }) => {
-    effect(() => {
-        if (!state.active || state.render) {
-            return;
-        }
-
-        state.render = true;
-    });
-
-    return () => state.render ? template(data) : '';
-};

package/src/css-utilities/slide/scss/index.scss

@@ -1,21 +0,0 @@
-.--slide {
-    &-in,
-    &-in-reverse {
-        animation-duration: var(--transition-duration);
-        animation-name: --slide-in;
-        animation-timing-function: ease-in-out;
-        transform-origin: top center;
-
-        @keyframes --slide-in {
-            from {
-                opacity: 0;
-                transform: translateY(var(--translateY));
-            }
-
-            to {
-                opacity: 1;
-                transform: translateY(0);
-            }
-        }
-    }
-}

package/src/css-utilities/slide/scss/variables.scss

@@ -1,10 +0,0 @@
-.--slide {
-    &-in {
-        --transition-duration: 0.48s;
-        --translateY: 32px;
-
-        &-reverse {
-            --translateY: -32px;
-        }
-    }
-}

package/src/css-utilities/transition/scss/variables.scss

@@ -1,14 +0,0 @@
-@use '/lib';
-@use '/tokens';
-
-.--transition {
-    &-duration {
-        --transition-duration: var(--transition-duration-400);
-
-        @each $key in lib.map-keys(tokens.$transition-duration) {
-            &-#{$key} {
-                --transition-duration: var(--transition-duration-#{$key});
-            }
-        }
-    }
-}