@esportsplus/ui 0.8.4 → 0.9.0

package/src/components/field/select.ts

@@ -0,0 +1,182 @@
+import { reactive } from '@esportsplus/reactivity';
+import { html } from '@esportsplus/template';
+import { omit } from '@esportsplus/utilities';
+import form from '../form';
+import scrollbar from '../scrollbar';
+import root from '../root';
+import description from './description';
+import error from './error';
+import title from './title';
+
+
+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>;
+
+
+const FIELD_OMIT: (keyof Data<any>)[] = [
+    'content',
+    'description',
+    'effect',
+    'mask',
+    'name',
+    'options', 'option',
+    'required',
+    'selected', 'scrollbar',
+    'tag', 'text', 'title', 'tooltip'
+];
+
+const TOOLTIP_OMIT: (keyof NonNullable<Data<any>['tooltip']>)[] = ['direction'];
+
+
+function parse(keys: (number | string)[], selected: number | string) {
+    let options: Record<string, boolean> = {};
+
+    for (let key of keys) {
+        options[key] = false;
+    }
+
+    options[selected] = true;
+
+    return {
+        options,
+        selected: selected || keys[0]
+    };
+}
+
+function template<T extends Record<number | string, number | string>>(data: Data<T>, state: { active: boolean, options: Record<number | string, boolean>, selected: number | string }) {
+    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: Event) => {
+                    let key = (e?.target as HTMLElement)?.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: number | string) => 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 <T extends Record<number | string, number | string>>(data: Data<T>) => {
+    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 = () => { /* Prevent double click events from firing */ };
+    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/src/components/field/switch.ts

@@ -0,0 +1,9 @@
+import checkbox from './checkbox';
+
+
+export default (data: Parameters<typeof checkbox>[0]) => {
+    data.mask = data.mask || {};
+    data.mask.class = `field-mask--switch ${data.mask?.class || ''}`;
+
+    return checkbox(data);
+};

package/src/components/field/text.ts

@@ -0,0 +1,92 @@
+import { reactive } from '@esportsplus/reactivity';
+import { html } from '@esportsplus/template';
+import { omit, pick } from '@esportsplus/utilities';
+import form from '../form';
+import description from './description';
+import error from './error';
+import title from './title';
+
+
+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>;
+
+
+const FIELD_OMIT: (keyof Data)[] = [
+    'content',
+    'description',
+    'mask',
+    'name',
+    'placeholder',
+    'required',
+    'tag', 'textarea', 'title', 'type',
+    'value'
+];
+
+const INPUT_PICK: (keyof Data)[] = ['name', 'placeholder', 'required', 'type', 'value'];
+
+const TEXTAREA_PICK: (keyof Data)[] = ['name', 'placeholder'];
+
+
+export default (data: 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/src/components/field/textarea.ts

@@ -0,0 +1,8 @@
+import text from './text';
+
+
+export default (data: Parameters<typeof text>[0]) => {
+    data.textarea = true;
+
+    return text(data);
+};

package/src/components/field/title.ts

@@ -0,0 +1,24 @@
+import { html } from '@esportsplus/template';
+import tooltip from '../tooltip';
+
+
+export default (data: { required?: boolean, title?: unknown }) => {
+    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/src/components/footer/index.ts

@@ -1,79 +1,84 @@
-import { html, svg } from '@esportsplus/template';
-
-
-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 }[]
-    };
-};
-
-
-function copy({ attributes, brand }: Data['copyright']) {
-    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 }: Data) => {
-    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>
-    `;
+import { html, svg } from '@esportsplus/template';
+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 }[]
+    };
+};
+
+
+function copy({ attributes, brand }: Data['copyright']) {
+    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 }: Data) => {
+    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/src/components/footer/scss/index.scss

@@ -1,26 +1,26 @@
-.footer {
-    &,
-    &-break {
-        width: 100%;
-    }
-
-    &-copyright {
-        &:first-child {
-            @media (max-width: 640px) {
-                --width: 100%;
-            }
-
-            @media (min-width: 640px) {
-                margin-right: auto;
-            }
-
-            + .footer-break {
-                display: none;
-            }
-        }
-
-        &:last-child {
-            --width: 100%;
-        }
-    }
+.footer {
+    &,
+    &-break {
+        width: 100%;
+    }
+
+    &-copyright {
+        &:first-child {
+            @media (max-width: 640px) {
+                --width: 100%;
+            }
+
+            @media (min-width: 640px) {
+                margin-right: auto;
+            }
+
+            + .footer-break {
+                display: none;
+            }
+        }
+
+        &:last-child {
+            --width: 100%;
+        }
+    }
 }