@esportsplus/ui 0.9.0 → 0.9.2

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

@@ -0,0 +1,22 @@
+type Data<T extends Record<number | string, number | string>> = {
+    class?: string;
+    content?: unknown;
+    description?: unknown;
+    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?: unknown;
+    tooltip?: {
+        direction?: unknown;
+    } & Record<string, unknown>;
+} & Record<string, unknown>;
+declare const _default: <T extends Record<number | string, number | string>>(data: Data<T>) => import("@esportsplus/template/build/types").RenderableTemplate;
+export default _default;

package/build/components/field/select.js

@@ -0,0 +1,135 @@
+import { reactive } from '@esportsplus/reactivity';
+import { html } from '@esportsplus/template';
+import { omit } from '@esportsplus/utilities';
+import form from '../../components/form/index.js';
+import scrollbar from '../../components/scrollbar/index.js';
+import root from '../../components/root/index.js';
+import description from './description.js';
+import error from './error.js';
+import title from './title.js';
+const FIELD_OMIT = [
+    'content',
+    'description',
+    'effect',
+    'mask',
+    'name',
+    'options', 'option',
+    'required',
+    'selected', 'scrollbar',
+    'tag', 'text', 'title', 'tooltip'
+];
+const TOOLTIP_OMIT = ['direction'];
+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 = data.scrollbar.style || '--background-default: var(--color-black-400);';
+    data.tooltip ??= {};
+    data.tooltip.class = `tooltip-content--${data.tooltip?.direction || 's'} ${data.tooltip?.class || ''}`;
+    data.tooltip.direction ??= 's';
+    let { html: h, parent: { attributes: a } } = scrollbar({
+        attributes: data.scrollbar,
+        fixed: true
+    });
+    return html `
+        <div
+            class='tooltip-content --flex-column --width-full'
+            ${omit(data.tooltip, TOOLTIP_OMIT)}
+        >
+            <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);
+        }
+    }}'
+                ${a}
+            >
+                ${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>
+
+            ${h}
+        </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;
+        state.active = !state.active;
+        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}
+            >
+                <input class='field-tag field-tag--hidden' ${data.tag}>
+
+                <div class='field-text' style='pointer-events: none' ${data.text}>
+                    ${() => data.options[state.selected] || '-'}
+                </div>
+
+                <div class='field-mask-arrow'></div>
+
+                ${() => state.render && template(data, state)}
+            </label>
+
+            ${description(data)}
+            ${error(state)}
+        </div>
+    `;
+};

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

@@ -0,0 +1,3 @@
+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

@@ -0,0 +1,6 @@
+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

@@ -0,0 +1,17 @@
+type Data = {
+    class?: string;
+    content?: unknown;
+    description?: unknown;
+    mask?: Record<string, unknown>;
+    name?: string;
+    placeholder?: string;
+    required?: boolean;
+    style?: string;
+    tag?: Record<string, unknown>;
+    textarea?: boolean;
+    title?: unknown;
+    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

@@ -0,0 +1,64 @@
+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

@@ -0,0 +1,3 @@
+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

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

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

@@ -0,0 +1,5 @@
+declare const _default: (data: {
+    required?: boolean;
+    title?: unknown;
+}) => import("@esportsplus/template/build/types").RenderableTemplate | "";
+export default _default;

package/build/components/field/title.js

@@ -0,0 +1,21 @@
+import { html } from '@esportsplus/template';
+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}
+
+            ${data?.required && html `
+                <div
+                    class='bubble --background-primary --margin-left'
+                    ${tooltip.onhover().attributes}
+                >
+                    <span class='tooltip-message tooltip-message--w'>Required</span>
+                </div>
+            `}
+        </div>
+    `;
+};

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

@@ -0,0 +1,26 @@
+import './scss/index.scss';
+type Data = {
+    copyright: {
+        attributes?: Record<string, unknown>;
+        brand: string;
+    };
+    footer?: {
+        attributes: Record<string, unknown>;
+    };
+    nav?: {
+        attributes?: Record<string, unknown>;
+        links: {
+            text: string;
+            url: string;
+        }[];
+    };
+    social?: {
+        attributes?: Record<string, unknown>;
+        links: {
+            icon: string;
+            url: string;
+        }[];
+    };
+};
+declare const _default: ({ copyright, footer, nav, social }: Data) => import("@esportsplus/template/build/types").RenderableTemplate;
+export default _default;

package/build/components/footer/index.js

@@ -0,0 +1,60 @@
+import { html, svg } from '@esportsplus/template';
+import './scss/index.scss';
+function copy({ attributes, brand }) {
+    return html `
+        <div class='footer-copyright group-item --flex-center'>
+            <div
+                class='text --padding-vertical --padding-300 --text-300'
+                style='--color-default: var(--color-grey-500);'
+                ${attributes}
+            >
+                &copy; ${`${new Date().getFullYear()} ${brand}, All rights reserved`}
+            </div>
+        </div>
+    `;
+}
+export default ({ copyright, footer, nav, social }) => {
+    return html `
+        <footer class='footer' ${footer?.attributes}>
+            <div class='container'>
+                <div class='group group--offset-top --flex-center --margin-400'>
+
+                    ${nav
+        ? nav.links.map(({ text, url }) => html `
+                            <div class='group-item'>
+                                <a
+                                    class='link --color-white --padding-vertical-300 --text-300'
+                                    href='${url}'
+                                    style='--color-default: var(--color-grey-500);'
+                                    ${nav.attributes}
+                                >
+                                    ${text}
+                                </a>
+                            </div>
+                        `)
+        : copy(copyright)}
+
+                    <div class='footer-break'></div>
+
+                    ${social?.links && social.links.map(({ icon, url }) => html `
+                        <div class='group-item'>
+                            <a
+                                class='link --color-white --padding-0px'
+                                href='${url}'
+                                style='--color-default: var(--color-grey-500);'
+                                ${social.attributes}
+                            >
+                                <div class='icon --size-500'>
+                                    ${svg.sprite(icon)}
+                                </div>
+                            </a>
+                        </div>
+                    `)}
+
+                    ${nav && copy(copyright)}
+
+                </div>
+            </div>
+        </footer>
+    `;
+};

package/build/components/footer/scss/index.scss

@@ -0,0 +1,2 @@
+.footer,.footer-break{width:100%}@media (max-width:640px){.footer-copyright:first-child{--width:100%}}@media (min-width:640px){.footer-copyright:first-child{margin-right:auto}}.footer-copyright:first-child+.footer-break{display:none}.footer-copyright:last-child{--width:100%}
+/*$vite$:1*/

package/build/components/form/action.d.ts

@@ -0,0 +1,7 @@
+import { Action } from './types.js';
+export default function (action: Action, s?: {
+    processing: boolean;
+}): {
+    onclick: (this: HTMLFormElement, event: Event) => void;
+    onsubmit: (this: HTMLFormElement, event: SubmitEvent) => Promise<void>;
+};

package/build/components/form/action.js

@@ -0,0 +1,57 @@
+import response from '@esportsplus/action';
+import input from './input.js';
+function parse(input) {
+    let data = {};
+    for (let [path, value] of input) {
+        let bucket = data, segments = path.indexOf('.') !== -1 ? path.split('.') : [path];
+        for (let i = 0; i < segments.length - 1; i++) {
+            bucket = bucket[segments[i]] = bucket[segments[i]] || {};
+        }
+        let key = segments.at(-1);
+        if (path.endsWith('[]')) {
+            if (typeof value === 'string' && value.trim() === '') {
+                continue;
+            }
+            bucket = bucket[key.substring(0, key.length - 2)] ??= [];
+            bucket.push(value);
+        }
+        else {
+            bucket[key] = value;
+        }
+    }
+    return data;
+}
+;
+export default function (action, s) {
+    return {
+        onclick: function (event) {
+            let trigger = event.target;
+            if (trigger?.type !== 'submit') {
+                return;
+            }
+            event.preventDefault();
+            this.dispatchEvent(new SubmitEvent('submit', { cancelable: true, bubbles: true, submitter: trigger }));
+        },
+        onsubmit: async function (event) {
+            event.preventDefault();
+            if (s) {
+                s.processing = true;
+            }
+            let { errors } = await action({
+                input: parse(new FormData(this).entries()),
+                response
+            });
+            for (let i = 0, n = errors.length; i < n; i++) {
+                let { message, path } = errors[i], reactive = input.get(this[path]);
+                if (!reactive) {
+                    continue;
+                }
+                reactive.error = `${message[0].toUpperCase()}${message.substring(1)}`;
+            }
+            if (s) {
+                s.processing = false;
+            }
+        }
+    };
+}
+;

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

@@ -0,0 +1,11 @@
+import action from './action.js';
+declare const _default: {
+    action: typeof action;
+    input: {
+        get: (element?: HTMLInputElement | HTMLSelectElement) => any;
+        onrender: (reactive: {
+            error: string;
+        }) => (element: HTMLInputElement | HTMLSelectElement) => void;
+    };
+};
+export default _default;

package/build/components/form/index.js

@@ -0,0 +1,3 @@
+import action from './action.js';
+import input from './input.js';
+export default { action, input };

package/build/components/form/input.d.ts

@@ -0,0 +1,7 @@
+declare const _default: {
+    get: (element?: HTMLInputElement | HTMLSelectElement) => any;
+    onrender: (reactive: {
+        error: string;
+    }) => (element: HTMLInputElement | HTMLSelectElement) => void;
+};
+export default _default;

package/build/components/form/input.js

@@ -0,0 +1,10 @@
+let key = Symbol();
+const get = (element) => {
+    return element ? element[key] : undefined;
+};
+const onrender = (reactive) => {
+    return (element) => {
+        element[key] = reactive;
+    };
+};
+export default { get, onrender };

package/build/components/form/types.d.ts

@@ -0,0 +1,10 @@
+import response, { Response } from '@esportsplus/action';
+type Action = (data: Payload) => Promise<Errors> | Errors;
+type Errors = {
+    errors: Response<unknown>['errors'];
+};
+type Payload = {
+    input: Record<string, any>;
+    response: typeof response;
+};
+export type { Action, Errors, Payload };

package/build/components/form/types.js

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1 @@
+import './scss/index.scss';

package/build/components/frame/index.js

@@ -0,0 +1 @@
+import './scss/index.scss';

package/build/components/frame/scss/index.scss

@@ -0,0 +1,2 @@
+.frame{flex-wrap:wrap;justify-content:flex-start;width:100%;display:none;position:relative}.frame.--active{display:flex}
+/*$vite$:1*/

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

@@ -0,0 +1 @@
+import './scss/index.scss';

package/build/components/grid/index.js

@@ -0,0 +1 @@
+import './scss/index.scss';

package/build/components/grid/scss/index.scss

@@ -0,0 +1,2 @@
+.grid{--margin-horizontal:var(--size-400);--margin-vertical:var(--size-400);--max-width:1fr;--min-width:200px;grid-gap:var(--margin-horizontal)var(--margin-vertical);grid-template-columns:repeat(auto-fit,minmax(var(--min-width),var(--max-width)));display:grid;position:relative}.grid .grid-item{width:100%}
+/*$vite$:1*/

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

@@ -0,0 +1 @@
+import './scss/index.scss';

package/build/components/group/index.js

@@ -0,0 +1 @@
+import './scss/index.scss';

package/build/components/group/scss/index.scss

@@ -0,0 +1,2 @@
+.group{--margin-horizontal:var(--size-400);--width:auto}.group.--flex-column .group-item{--width:100%}.group--scroller .group-item{--margin-vertical:0px}.group{margin:0 calc(var(--margin-horizontal)/-2);width:calc(100% + var(--margin-horizontal));flex-wrap:wrap;justify-content:flex-start;display:flex;position:relative}.group--offset-bottom{margin-bottom:calc(var(--margin-vertical)*-1)}.group--offset-top{margin-top:calc(var(--margin-vertical)*-1)}.group--scroller{margin-bottom:calc(var(--scrollbar-width)*-1);padding-bottom:var(--scrollbar-width);flex-flow:row;overflow-y:hidden}.group-item{margin:var(--margin-vertical)calc(var(--margin-horizontal)/2)0;width:var(--width);display:flex;position:relative}.group-item[class*=--width]{width:calc(var(--width) - var(--margin-horizontal))}
+/*$vite$:1*/

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

@@ -0,0 +1,9 @@
+import './scss/index.scss';
+declare const _default: (background: string) => {
+    attributes: {
+        class: string;
+        onrender: (element: HTMLElement & Record<PropertyKey, unknown>) => void;
+        style: (string | (() => string))[];
+    };
+};
+export default _default;

package/build/components/highlight/index.js

@@ -0,0 +1,40 @@
+import { reactive } from '@esportsplus/reactivity';
+import './scss/index.scss';
+let key = Symbol(), observer = null;
+export default (background) => {
+    if (observer === null) {
+        observer = new IntersectionObserver((entries) => {
+            let disconnected = 0, n = entries.length;
+            for (let i = 0; i < n; i++) {
+                let { isIntersecting, target } = entries[i];
+                if (target.isConnected) {
+                    target[key].highlight = +isIntersecting;
+                }
+                else {
+                    disconnected++;
+                    observer.unobserve(target);
+                }
+            }
+            if (n - disconnected === 0) {
+                observer.disconnect();
+                observer = null;
+            }
+        }, { threshold: 1 });
+    }
+    let state = reactive({
+        highlight: 0
+    });
+    return {
+        attributes: {
+            class: 'highlight',
+            onrender: function (element) {
+                element[key] = state;
+                observer.observe(element);
+            },
+            style: [
+                () => `--highlight: ${state.highlight}`,
+                `--background: ${background}`,
+            ]
+        }
+    };
+};

package/build/components/highlight/scss/index.scss

@@ -0,0 +1,2 @@
+.highlight{--background:transparent;--highlight:1;background:linear-gradient(90deg,var(--background)50%,transparent 50%)110% 0/200% 100% no-repeat;background-position:calc((1 - var(--highlight))*110%)0;transition:background-position .32s}
+/*$vite$:1*/

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

@@ -0,0 +1 @@
+import './scss/index.scss';

package/build/components/icon/index.js

@@ -0,0 +1 @@
+import './scss/index.scss';

package/build/components/icon/scss/index.scss

@@ -0,0 +1,2 @@
+.icon{--color:inherit;--height:var(--size);--margin-horizontal:var(--size-300);--size:var(--size-400);--width:var(--size);color:var(--color);flex:0 0 var(--width);height:var(--height);width:var(--width);display:flex;position:relative}.icon svg{color:currentColor;fill:currentColor;width:100%;height:100%}
+/*$vite$:1*/

package/build/components/index.d.ts

@@ -0,0 +1,38 @@
+export * as accordion from './accordion/index.js';
+export * as anchor from './anchor/index.js';
+export * as banner from './banner/index.js';
+export * as border from './border/index.js';
+export * as bubble from './bubble/index.js';
+export * as button from './button/index.js';
+export * as card from './card/index.js';
+export * as clipboard from './clipboard/index.js';
+export * as container from './container/index.js';
+export * as counter from './counter/index.js';
+export * as ellipsis from './ellipsis/index.js';
+export * as field from './field/index.js';
+export * as footer from './footer/index.js';
+export * as form from './form/index.js';
+export * as frame from './frame/index.js';
+export * as grid from './grid/index.js';
+export * as group from './group/index.js';
+export * as highlight from './highlight/index.js';
+export * as icon from './icon/index.js';
+export * as json from './json/index.js';
+export * as link from './link/index.js';
+export * as loader from './loader/index.js';
+export * as loading from './loading/index.js';
+export * as magnet from './magnet/index.js';
+export * as modal from './modal/index.js';
+export * as normalize from './normalize/index.js';
+export * as number from './number/index.js';
+export * as page from './page/index.js';
+export * as root from './root/index.js';
+export * as row from './row/index.js';
+export * as scrollbar from './scrollbar/index.js';
+export * as sidebar from './sidebar/index.js';
+export * as site from './site/index.js';
+export * as text from './text/index.js';
+export * as thumbnail from './thumbnail/index.js';
+export * as tooltip from './tooltip/index.js';
+export * as truncate from './truncate/index.js';
+export * as typewriter from './typewriter/index.js';