@esportsplus/ui 0.17.6 → 0.18.0

package/src/components/tooltip/index.ts

@@ -1,7 +1,8 @@
 import { reactive } from '@esportsplus/reactivity';
-import { html } from '@esportsplus/template';
-import { isArray, omit } from '@esportsplus/utilities';
+import { html, type Attributes } from '@esportsplus/template';
+import { omit, toArray } from '@esportsplus/utilities';
 import { root } from '@esportsplus/ui';
+import template from '~/components/template';
 import './scss/index.scss';
 
 
@@ -38,92 +39,121 @@ function frame() {
 }
 
 
-const onclick = (
-    data: Record<string, unknown> & { toggle?: boolean }, content: unknown,
-    state: { active: boolean } = reactive({ active: false })
-) => {
-    if (!isArray(data.class)) {
-        data.class = data.class ? [data.class] : [];
+const menu = template.factory<
+    Attributes & {
+        options: (Attributes & { content: unknown })[],
+        option?: Attributes,
+        state?: { active: boolean },
+        toggle?: boolean,
+        'tooltip-content': Attributes & { direction?: string }
     }
-
-    (data.class as unknown[]).push(() => {
-        return state.active && '--active';
-    });
-
-    return html`
-        <div
-            class='tooltip'
-            onclick='${function(this: HTMLElement, e: Event) {
-                let active = true,
-                    node = e.target as Node | null;
-
-                if (this === node || (data.toggle && this.contains(node))) {
-                    active = !state.active;
-                }
-
-                if (parent !== this && !parent?.contains(this)) {
-                    parent = this.parentElement?.closest('.tooltip');
-                }
-
-                frame();
-
-                if (parent === this) {
-                    parent = null;
-                    return;
-                }
-
-                state.active = active;
-
-                if (active) {
-                    queue.push({
-                        fn: () => state.active = false,
-                        tooltip: this
-                    });
-                }
-
-                if (!scheduled) {
-                    root.onclick.push(() => {
-                        frame();
-                        scheduled = false;
-                    });
-                    scheduled = true;
-                }
-            }}}'
-            ${omit(data, ['active', 'toggle'])}
-        >
+>(
+    (attributes, content) => onclick(
+        omit(attributes, ['options', 'option', 'tooltip-content']),
+        html`
             ${content}
-        </div>
-    `;
-};
-
-const onhover = (
-    data: Record<string, unknown>,
-    content: unknown,
-    state: { active: boolean } = reactive({ active: false })
-) => {
-    if (!isArray(data.class)) {
-        data.class = data.class ? [data.class] : [];
-    }
 
-    (data.class as unknown[]).push(() => {
-        return state.active && '--active';
-    });
-
-    return html`
-        <div
-            class='tooltip'
-            onmouseover='${() => {
-                state.active = true;
-            }}}'
-            onmouseout='${() => {
-                state.active = false;
-            }}'
-            ${omit(data, ['active', 'toggle'])}
-        >
-            ${content}
-        </div>
-    `;
-};
+            <div
+                class='tooltip-content ${`tooltip-content--${attributes['tooltip-content']?.direction || 'nw'}`}'
+                ${omit(attributes['tooltip-content'], ['direction'])}
+            >
+                ${attributes.options.map((option) => html`
+                    <div
+                        class='link --width-full'
+                        ${omit(option, ['content'])}
+                        ${attributes.option}
+                    >
+                        ${option.content}
+                    </div>
+                `)}
+            </div>
+        `
+    )
+);
+
+const onclick = template.factory<Attributes & { state?: { active: boolean }, toggle?: boolean }>(
+    (attributes, content) => {
+        let state = attributes.state || reactive({ active: false });
+
+        attributes.class = toArray(attributes.class);
+        attributes.class.push(() => {
+            return state.active && '--active';
+        });
+
+        attributes.onclick = function(this: HTMLElement, e) {
+            let active = true,
+                node = e.target as Node | null;
+
+            if (this === node || (attributes.toggle && this.contains(node))) {
+                active = !state.active;
+            }
+
+            if (parent !== this && !parent?.contains(this)) {
+                parent = this.parentElement?.closest('.tooltip');
+            }
+
+            frame();
+
+            if (parent === this) {
+                parent = null;
+                return;
+            }
+
+            state.active = active;
+
+            if (active) {
+                queue.push({
+                    fn: () => state.active = false,
+                    tooltip: this
+                });
+            }
+
+            if (!scheduled) {
+                root.onclick.push(() => {
+                    frame();
+                    scheduled = false;
+                });
+                scheduled = true;
+            }
+        };
+
+        return html`
+            <div
+                class='tooltip'
+                ${omit(attributes, ['state', 'toggle'])}
+            >
+                ${content}
+            </div>
+        `;
+    }
+);
+
+const onhover = template.factory<Attributes & { state?: { active: boolean } }>(
+    (attributes, content) => {
+        let state = attributes.state || reactive({ active: false });
+
+        attributes.class = toArray(attributes.class);
+        attributes.class.push(() => {
+            return state.active && '--active';
+        });
+
+        attributes.onmouseover = () => {
+            state.active = true;
+        };
+        attributes.onmouseout = () => {
+            state.active = false;
+        };
+
+        return html`
+            <div
+                class='tooltip'
+                ${omit(attributes, ['active', 'state', 'toggle'])}
+            >
+                ${content}
+            </div>
+        `;
+    }
+);
 
 
-export default { onclick, onhover };
+export default { menu, onclick, onhover };

package/src/components/tooltip/scss/index.scss

@@ -5,7 +5,7 @@
 @use 'north' as *;
 @use 'south' as *;
 @use 'west' as *;
-@use './variables.scss';
+@use 'variables';
 
 .tooltip {
     cursor: pointer;

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

@@ -28,14 +28,6 @@
                 --border-radius: var(--border-radius-#{$key});
             }
         }
-
-        &-circle {
-            --border-radius: 100%;
-        }
-
-        &-curved {
-            --border-radius: 240px;
-        }
     }
 
     &-default {

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

@@ -2,7 +2,7 @@
     &-center {
         align-content: center;
         display: flex;
-        flex-wrap: wrap;
+        flex-flow: row wrap;
         justify-content: center;
     }
 
@@ -13,7 +13,7 @@
 
     &-end {
         display: flex;
-        flex-wrap: wrap;
+        flex-flow: row wrap;
         justify-content: flex-end;
     }
 
@@ -30,12 +30,12 @@
 
     &-horizontal {
         display: flex;
-        flex-wrap: wrap;
+        flex-flow: row wrap;
         justify-content: center;
 
         &-space-between {
             display: flex;
-            flex-wrap: wrap;
+            flex-flow: row wrap;
             justify-content: space-between;
         }
     }
@@ -47,19 +47,19 @@
 
     &-start {
         display: flex;
-        flex-wrap: wrap;
+        flex-flow: row wrap;
         justify-content: flex-start;
     }
 
     &-vertical {
         align-items: center;
         display: flex;
-        flex-wrap: wrap;
+        flex-flow: row wrap;
 
         &-space-between {
             align-items: space-between;
             display: flex;
-            flex-wrap: wrap;
+            flex-flow: row wrap;
         }
     }
 }

package/src/tokens/scss/border-radius.scss

@@ -1,5 +1,8 @@
 $border-radius: (
     0px: 0px,
+    circle: 100%,
+    curved: 240px,
+
     100: 2px,
     200: 4px,
     300: 6px,

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

@@ -1,19 +0,0 @@
-import description from './description.js';
-import title from './title.js';
-type Data = {
-    accept?: string;
-    class?: string;
-    description?: Parameters<typeof description>[0]['description'];
-    mask?: {
-        content?: unknown;
-    } & Record<string, unknown>;
-    name?: string;
-    placeholder?: string;
-    required?: boolean;
-    style?: string;
-    tag?: Record<string, unknown>;
-    title?: Parameters<typeof title>[0]['title'];
-    value?: unknown;
-} & Record<string, unknown>;
-declare const _default: (data: Data) => import("@esportsplus/template/build/types").RenderableTemplate;
-export default _default;

package/build/components/field/file.js

@@ -1,51 +0,0 @@
-import { reactive } from '@esportsplus/reactivity';
-import { html } from '@esportsplus/template';
-import { omit, pick } from '@esportsplus/utilities';
-import form from '../../components/form/index.js';
-import description from './description.js';
-import error from './error.js';
-import title from './title.js';
-const FIELD_OMIT = ['accept', 'mask', 'name', 'placeholder', 'value'];
-const MASK_OMIT = ['content'];
-const TAG_PICK = ['accept', 'name', 'required', 'value'];
-export default (data) => {
-    let state = reactive({
-        active: false,
-        error: ''
-    });
-    data.mask ??= {};
-    data.tag ??= {};
-    data.tag.type = 'file';
-    data.tag.onrender = form.input.onrender(state);
-    return html `
-        <div
-            class='${() => state.active && '--active'} field --flex-column'
-            onfocusin='${() => {
-        state.active = true;
-    }}'
-            onfocusout='${() => {
-        state.active = false;
-    }}'
-            ${omit(data, FIELD_OMIT)}
-        >
-            ${title(data)}
-
-            <label
-                class='field-mask field-mask--input --flex-row'
-                style='cursor:pointer;'
-                ${omit(data.mask, MASK_OMIT)}
-            >
-                <input
-                    class='field-tag field-tag--hidden'
-                    ${pick(data, TAG_PICK)}
-                    ${data.tag}
-                >
-
-                ${data.mask?.content || ''}
-            </label>
-
-            ${description(data)}
-            ${error(state)}
-        </div>
-    `;
-};

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

@@ -1,12 +0,0 @@
-import s from './select.js';
-import sw from './switch.js';
-import t from './text.js';
-declare const _default: {
-    select: (data: Parameters<typeof sw>[0] & {
-        field: Parameters<typeof s>[0];
-    }) => import("@esportsplus/template/build/types").RenderableTemplate;
-    text: (data: Parameters<typeof sw>[0] & {
-        field: Parameters<typeof t>[0];
-    }) => import("@esportsplus/template/build/types").RenderableTemplate;
-};
-export default _default;

package/build/components/field/optional.js

@@ -1,16 +0,0 @@
-import s from './select.js';
-import sw from './switch.js';
-import t from './text.js';
-const select = (data) => {
-    data.field ??= {};
-    data.field.class = `field--optional ${data.field?.class || ''}`;
-    data.field.content = s(data.field);
-    return sw(data);
-};
-const text = (data) => {
-    data.field ??= {};
-    data.field.class = `field--optional ${data.field?.class || ''}`;
-    data.field.content = t(data.field);
-    return sw(data);
-};
-export default { select, text };

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

@@ -1,3 +0,0 @@
-import checkbox from './checkbox.js';
-declare const _default: (data: Parameters<typeof checkbox>[0]) => import("@esportsplus/template/build/types").RenderableTemplate;
-export default _default;

package/build/components/field/switch.js

@@ -1,6 +0,0 @@
-import checkbox from './checkbox.js';
-export default (data) => {
-    data.mask = data.mask || {};
-    data.mask.class = `field-mask--switch ${data.mask?.class || ''}`;
-    return checkbox(data);
-};

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

@@ -1,19 +0,0 @@
-import description from './description.js';
-import title from './title.js';
-type Data = {
-    class?: string;
-    content?: unknown;
-    description?: Parameters<typeof description>[0]['description'];
-    mask?: Record<string, unknown>;
-    name?: string;
-    placeholder?: string;
-    required?: boolean;
-    style?: string;
-    tag?: Record<string, unknown>;
-    textarea?: boolean;
-    title?: Parameters<typeof title>[0]['title'];
-    type?: string;
-    value?: unknown;
-} & Record<string, unknown>;
-declare const _default: (data: Data) => import("@esportsplus/template/build/types").RenderableTemplate;
-export default _default;

package/build/components/field/text.js

@@ -1,64 +0,0 @@
-import { reactive } from '@esportsplus/reactivity';
-import { html } from '@esportsplus/template';
-import { omit, pick } from '@esportsplus/utilities';
-import form from '../../components/form/index.js';
-import description from './description.js';
-import error from './error.js';
-import title from './title.js';
-const FIELD_OMIT = [
-    'content',
-    'description',
-    'mask',
-    'name',
-    'placeholder',
-    'required',
-    'tag', 'textarea', 'title', 'type',
-    'value'
-];
-const INPUT_PICK = ['name', 'placeholder', 'required', 'type', 'value'];
-const TEXTAREA_PICK = ['name', 'placeholder'];
-export default (data) => {
-    let state = reactive({
-        active: false,
-        error: ''
-    });
-    data.onfocusin = () => {
-        state.active = true;
-    };
-    data.onfocusout = () => {
-        state.active = false;
-    };
-    data.tag ??= {};
-    data.tag.class = `field-tag --padding-400 ${data.tag.class || ''}`;
-    data.tag.onrender = form.input.onrender(state);
-    data.type ??= 'string';
-    data.value ??= '';
-    return html `
-        <div
-            class='
-                ${() => state.active && '--active'}
-                field
-                --flex-column
-            '
-            ${omit(data, FIELD_OMIT)}
-        >
-            ${title(data)}
-
-            <label class='field-mask field-mask--input --flex-row' ${data.mask}>
-                ${data.textarea
-        ? html `
-                        <textarea ${data.tag} ${pick(data, TEXTAREA_PICK)}>
-                            ${data.value}
-                        </textarea>
-                    `
-        : html `
-                        <input ${data.tag} ${pick(data, INPUT_PICK)}>
-                    `}
-                ${data.content || ''}
-            </label>
-
-            ${description(data)}
-            ${error(state)}
-        </div>
-    `;
-};

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

@@ -1,3 +0,0 @@
-import text from './text.js';
-declare const _default: (data: Parameters<typeof text>[0]) => import("@esportsplus/template/build/types").RenderableTemplate;
-export default _default;

package/build/components/field/textarea.js

@@ -1,5 +0,0 @@
-import text from './text.js';
-export default (data) => {
-    data.textarea = true;
-    return text(data);
-};

package/build/components/link/hover.d.ts

@@ -1,10 +0,0 @@
-declare const _default: ({ attributes, content }: {
-    attributes?: Record<string, any>;
-    content: any;
-}) => {
-    attributes: {
-        class: string;
-    };
-    html: import("@esportsplus/template/build/types").RenderableTemplate;
-};
-export default _default;

package/build/components/link/hover.js

@@ -1,17 +0,0 @@
-import { html } from '@esportsplus/template';
-export default ({ attributes, content }) => {
-    return {
-        attributes: {
-            class: 'link--hover'
-        },
-        html: html `
-            <span class='link-hover link-hover--one' ${attributes}>
-                ${content}
-            </span>
-
-            <span class='link-hover link-hover--two' ${attributes}>
-                ${content}
-            </span>
-        `
-    };
-};

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

@@ -1,11 +0,0 @@
-import './scss/index.scss';
-declare const _default: ({ attributes, hide }: {
-    attributes?: Record<string, unknown>;
-    hide?: boolean;
-}) => {
-    html: import("@esportsplus/template/build/types").RenderableTemplate;
-    sibling: {
-        attributes: Record<string, Function>;
-    };
-};
-export default _default;

package/build/components/magnet/index.js

@@ -1,51 +0,0 @@
-import { reactive } from '@esportsplus/reactivity';
-import { html } from '@esportsplus/template';
-import './scss/index.scss';
-export default ({ attributes, hide }) => {
-    let active = false, events = {
-        onmouseover: function () {
-            let { offsetHeight, offsetLeft, offsetTop, offsetWidth } = this;
-            active = true;
-            state.height = offsetHeight;
-            state.left = offsetLeft;
-            state.opacity = 1;
-            state.top = offsetTop;
-            state.width = offsetWidth;
-        }
-    }, state = reactive({
-        height: null,
-        hide: true,
-        left: 0,
-        opacity: 0,
-        top: 0,
-        width: 0
-    });
-    if (hide === true) {
-        events.onmouseout = () => {
-            active = false;
-            setTimeout(() => {
-                if (active === true) {
-                    return;
-                }
-                state.opacity = 0;
-            }, 50);
-        };
-    }
-    return {
-        html: html `
-            <div
-                class='magnet'
-                style='${() => `
-                    height: ${state.height ? `${state.height}px` : '100%'};
-                    opacity: ${state.opacity};
-                    transform: translate(${state.left}px, ${state.top}px);
-                    width: ${state.width}px;
-                `}'
-                ${attributes}
-            ></div>
-        `,
-        sibling: {
-            attributes: events
-        }
-    };
-};

package/build/components/magnet/scss/index.scss

@@ -1,2 +0,0 @@
-@layer components {.magnet{--background:transparent;--border-radius:var(--border-radius-400);--timing-function:var(--timing-circ);background:var(--background);border-radius:var(--border-radius);opacity:0;height:0;transition:height var(--transition-duration)var(--timing-function),opacity var(--transition-duration)var(--timing-function),transform var(--transition-duration)var(--timing-function),width var(--transition-duration)var(--timing-function);z-index:-1;width:0;position:absolute;top:0;left:0}}
-/*$vite$:1*/