@esportsplus/ui 0.8.4 → 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

@@ -1,3 +1,4 @@
+import './scss/index.scss';
 type Data = {
     copyright: {
         attributes?: Record<string, unknown>;

package/build/components/footer/index.js

@@ -1,55 +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>
+    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'>
-
+    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>
+        ? 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>
+        : 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

@@ -1,5 +1,7 @@
 import { Action } from './types.js';
-export default function (action: Action): {
+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

@@ -22,7 +22,7 @@ function parse(input) {
     return data;
 }
 ;
-export default function (action) {
+export default function (action, s) {
     return {
         onclick: function (event) {
             let trigger = event.target;
@@ -34,20 +34,23 @@ export default function (action) {
         },
         onsubmit: async function (event) {
             event.preventDefault();
-            event?.submitter?.classList.add('button--processing');
+            if (s) {
+                s.processing = true;
+            }
             let { errors } = await action({
-                alert: null,
                 input: parse(new FormData(this).entries()),
                 response
             });
             for (let i = 0, n = errors.length; i < n; i++) {
-                let { message, path } = errors[i], state = input.get(this[path]);
-                if (!state) {
+                let { message, path } = errors[i], reactive = input.get(this[path]);
+                if (!reactive) {
                     continue;
                 }
-                state.error = `${message[0].toUpperCase()}${message.substring(1)}`;
+                reactive.error = `${message[0].toUpperCase()}${message.substring(1)}`;
+            }
+            if (s) {
+                s.processing = false;
             }
-            event?.submitter?.classList.remove('button--processing');
         }
     };
 }

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

@@ -2,22 +2,10 @@ import action from './action.js';
 declare const _default: {
     action: typeof action;
     input: {
-        attributes: (reactive: {
+        get: (element?: HTMLInputElement | HTMLSelectElement) => any;
+        onrender: (reactive: {
             error: string;
         }) => (element: HTMLInputElement | HTMLSelectElement) => void;
-        get: (element?: HTMLInputElement | HTMLSelectElement) => {
-            error: string;
-        } | undefined;
     };
-    layout: (data: {
-        action?: any;
-        button?: {
-            class?: string;
-            content?: any;
-            style?: string;
-        };
-        class?: string;
-        content?: any;
-    }) => import("@esportsplus/template/build/types").RenderableTemplate;
 };
 export default _default;

package/build/components/form/index.js

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

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

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

package/build/components/form/input.js

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

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

@@ -4,7 +4,6 @@ type Errors = {
     errors: Response<unknown>['errors'];
 };
 type Payload = {
-    alert: typeof alert;
     input: Record<string, any>;
     response: typeof response;
 };

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

@@ -1,3 +1,4 @@
+import './scss/index.scss';
 declare const _default: (background: string) => {
     attributes: {
         class: string;

package/build/components/highlight/index.js

@@ -1,4 +1,5 @@
 import { reactive } from '@esportsplus/reactivity';
+import './scss/index.scss';
 let key = Symbol(), observer = null;
 export default (background) => {
     if (observer === null) {
@@ -30,7 +31,10 @@ export default (background) => {
                 element[key] = state;
                 observer.observe(element);
             },
-            style: [`--background: ${background}`, () => `--highlight: ${state.highlight}`]
+            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*/