@esportsplus/ui 0.0.8 → 0.0.9

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

@@ -0,0 +1,15 @@
+declare function deactivate(): void;
+declare const _default: {
+    deactivate: typeof deactivate;
+    error: (messages: string | string[], seconds?: number) => void;
+    html: () => () => "" | {
+        content: string;
+        type: string;
+        values: never[];
+    };
+    info: (messages: string | string[], seconds?: number) => void;
+    processing: () => void;
+    success: (messages: string | string[], seconds?: number) => void;
+    types: readonly ["error", "info", "success"];
+};
+export default _default;

package/build/components/alert/index.js

@@ -0,0 +1,150 @@
+import { reactive } from '@esportsplus/reactivity';
+import { html } from '@esportsplus/template';
+let modifiers = {
+    error: 'red',
+    info: 'black',
+    success: 'green'
+}, state = reactive({
+    active: false,
+    messages: new Set,
+    processing: false,
+    seconds: 0,
+    state: 'activating',
+    type: ''
+}), timeout = 250;
+function activate(key, messages, seconds = 0) {
+    if (!Array.isArray(messages)) {
+        messages = [messages];
+    }
+    if (!messages.length) {
+        return;
+    }
+    state.messages.clear();
+    for (let message of messages) {
+        state.messages.add(message);
+    }
+    state.state = 'activating';
+    state.type = key;
+    if (state.active) {
+        state.active = true;
+        state.processing = false;
+        if (seconds) {
+            if (!state.seconds) {
+                state.seconds = seconds;
+            }
+            setTimeout(() => {
+                if (messages && messages.length < (state?.messages?.size || 0)) {
+                    for (let message of messages) {
+                        state.messages.delete(message);
+                    }
+                    state.messages = state.messages;
+                }
+                else {
+                    deactivate();
+                }
+            }, 400 * seconds);
+        }
+        else {
+            state.seconds = 0;
+        }
+        return;
+    }
+    setTimeout(() => {
+        state.active = true;
+        state.processing = false;
+        if (seconds) {
+            if (!state.seconds) {
+                state.seconds = seconds;
+            }
+            setTimeout(() => {
+                if (messages && messages.length < (state?.messages?.size || 0)) {
+                    for (let message of messages) {
+                        state.messages.delete(message);
+                    }
+                    state.messages = state.messages;
+                }
+                else {
+                    deactivate();
+                }
+            }, 400 * seconds);
+        }
+        else {
+            state.seconds = 0;
+        }
+    }, timeout);
+}
+function deactivate() {
+    state.state = 'deactivating';
+    setTimeout(() => {
+        state.active = false;
+        state.messages.clear();
+        state.processing = false;
+    }, timeout);
+}
+const error = (messages, seconds = 0) => activate('error', messages, seconds);
+const info = (messages, seconds = 0) => activate('info', messages, seconds);
+const processing = () => {
+    state.state = 'activating';
+    state.processing = true;
+    setTimeout(() => {
+        state.active = true;
+    }, timeout);
+};
+const success = (messages, seconds = 0) => activate('success', messages, seconds);
+const h = () => {
+    return () => state.active || state.processing ? html `
+        <div class='alert anchor anchor--ne ${() => state.active && '--active'} ${() => `alert--${state.state}`}'>
+            ${() => !state.processing ? html `
+                <div class="alert-close --flex-start --margin-right --margin-100" onclick='${deactivate}'>
+                    <div class='button --background-state ${() => `--background-${modifiers[state.type] || 'black'}`} --color-state --color-white --flex-center --padding-300'>
+                        <div class="icon --size-300">
+                            <svg width="16" height="16" viewBox="0 0 16 16">
+                                <path d="M3.527 14.948a.176.176 0 01-.248 0L1.051 12.72a.176.176 0 010-.248l11.42-11.419a.176.176 0 01.248 0l2.229 2.228a.174.174 0 010 .248L3.527 14.948z"/>
+                                <path d="M12.472 14.948c.068.068.18.068.248 0l2.229-2.229a.176.176 0 000-.248L3.528 1.052a.176.176 0 00-.248 0L1.052 3.28a.176.176 0 000 .248l11.42 11.42z"/>
+                            </svg>
+                        </div>
+                    </div>
+                </div>
+            ` : ''}
+
+            <div class="card --overflow-hidden" style='--background: var(--color-white-400)'>
+                <div class="alert-message ${() => !state.processing && '--active'} --flex-row --padding --padding-horizontal-500 --padding-vertical-400">
+                    <div class='--flex-row --flex-fill --flex-vertical'>
+                        <div class="--flex-fill --flex-column --padding-right --padding-400">
+                            <h5 class="page-title">
+                                ${() => state.type.charAt(0).toUpperCase() + state.type.slice(1)}
+                            </h5>
+                            ${() => state.type && [...state.messages].map((message) => html `
+                                <p class='--margin-top --margin-border-width-500'>${message}</p>
+                            `)}
+                        </div>
+
+                        ${() => !state.processing && state.seconds ? html `
+                            <svg class='alert-timer' style='--animation-duration: ${state.seconds}s;'>
+                                <circle class="alert-timer-bg" cx="50%" cy="50%" r="40%" style='--border-color: var(--color-grey-500);' />
+                                <circle class="alert-timer-meter" cx="50%" cy="50%" r="40%" style='--border-color: var(--color-black-300);' />
+                            </svg>
+                        ` : ''}
+                    </div>
+                </div>
+
+                <div class='alert-processing ${() => state.processing && '--active'} --flex-row --flex-vertical --padding --padding-500'>
+                    <div class="processing">
+                        <span class='processing-ring'></span>
+                    </div>
+                    <div class='text --flex-fill --margin-left --margin-300 --text-bold' style='--color: var(--color-text-500)'>
+                        Processing
+
+                        <div class='ellipsis'>
+                            <span class='ellipsis-dot --margin-left --margin-border-width'>.</span>
+                            <span class='ellipsis-dot --margin-left --margin-border-width'>.</span>
+                            <span class='ellipsis-dot --margin-left --margin-border-width'>.</span>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    ` : '';
+};
+const types = ['error', 'info', 'success'];
+export default { deactivate, error, html: h, info, processing, success, types };

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

@@ -0,0 +1,6 @@
+import { Action, Reactive } from './types';
+export default function (action: Action, reactive?: Reactive): {
+    content: string;
+    type: string;
+    values: never[];
+};

package/build/components/form/action.js

@@ -0,0 +1,56 @@
+import { response } from '@esportsplus/action';
+import { html } from '@esportsplus/template';
+import alert from '../../components/alert';
+function parse(input) {
+    let data = {};
+    for (let path in input) {
+        let bucket = data, keys = path.indexOf('.') !== -1 ? path.split('.') : [path];
+        for (let i = 0; i < keys.length - 1; i++) {
+            bucket = bucket[keys[i]] = bucket[keys[i]] || {};
+        }
+        bucket[keys[keys.length - 1]] = input[path];
+    }
+    return data;
+}
+;
+export default function (action, reactive = {}) {
+    return html({
+        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();
+            let { errors } = await action({
+                alert,
+                input: parse(Object.fromEntries(new FormData(this)?.entries())),
+                processing: {
+                    end: (deactivate = true) => {
+                        if (deactivate) {
+                            alert.deactivate();
+                        }
+                        event?.submitter?.classList.remove('button--processing');
+                    },
+                    start: () => {
+                        alert.processing();
+                        event?.submitter?.classList.add('button--processing');
+                    }
+                },
+                response
+            });
+            if (errors && 'errors' in reactive) {
+                let messages = {};
+                for (let i = 0, n = errors.length; i < n; i++) {
+                    let { message, path } = errors[i];
+                    messages[path] = `${message[0].toUpperCase()}${message.substring(1)}`;
+                }
+                reactive.errors = messages;
+            }
+        }
+    });
+}
+;

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

@@ -0,0 +1,5 @@
+import action from './action';
+declare const _default: {
+    action: typeof action;
+};
+export default _default;

package/build/components/form/index.js

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

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

@@ -0,0 +1,17 @@
+import { layout } from '../../components/page';
+type Data = {
+    action?: any;
+    button?: {
+        class?: string;
+        content?: any;
+        style?: string;
+    };
+    content?: any;
+    width?: string;
+};
+declare const _default: (data: Data & Parameters<typeof layout>[0]) => {
+    content: string;
+    type: string;
+    values: never[];
+};
+export default _default;

package/build/components/form/layout.js

@@ -0,0 +1,17 @@
+import { html } from '@esportsplus/template';
+import { layout } from '../../components/page';
+export default (data) => {
+    data.content = html `
+        <form class='--margin-top --margin-800' ${data?.action || ''}>
+            ${data?.content || ''}
+
+            ${data?.button ? html `
+                <button class="button ${data?.button?.class || ''}" style='${data?.button?.style || ''}'>
+                    ${data?.button?.content || ''}
+                </button>
+            ` : ''}
+        </form>
+    `;
+    data.width = data?.width || '480px';
+    return layout(data);
+};

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

@@ -0,0 +1,19 @@
+import { response, Response } from '@esportsplus/action';
+import alert from '../../components/alert';
+type Action = (data: Payload) => Promise<Errors> | Errors;
+type Errors = {
+    errors?: Response<unknown>['errors'];
+};
+type Payload = {
+    alert: typeof alert;
+    input: Record<string, any>;
+    response: typeof response;
+    processing: {
+        end: (deactivate: boolean) => void;
+        start: VoidFunction;
+    };
+};
+type Reactive = {
+    errors?: Record<string, string>;
+};
+export { Action, Errors, Payload, Reactive };

package/build/components/form/types.js

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

package/build/components/index.d.ts

@@ -0,0 +1,4 @@
+export { default as form } from './form';
+export { default as page } from './page';
+export { default as scrollbar } from './scrollbar';
+export { default as state } from './state';

package/build/components/index.js

@@ -0,0 +1,4 @@
+export { default as form } from './form';
+export { default as page } from './page';
+export { default as scrollbar } from './scrollbar';
+export { default as state } from './state';

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

@@ -0,0 +1,16 @@
+import layout from './layout';
+declare const _default: {
+    layout: ({ content, subtitle, suptitle, title, width }: {
+        content?: any;
+        subtitle?: string | undefined;
+        suptitle?: string | undefined;
+        title?: string | undefined;
+        width?: string | undefined;
+    }) => {
+        content: string;
+        type: string;
+        values: never[];
+    };
+};
+export default _default;
+export { layout };

package/build/components/page/index.js

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

package/build/components/page/layout.d.ts

@@ -0,0 +1,13 @@
+type Data = {
+    content?: any;
+    subtitle?: string;
+    suptitle?: string;
+    title?: string;
+    width?: string;
+};
+declare const _default: ({ content, subtitle, suptitle, title, width }: Data) => {
+    content: string;
+    type: string;
+    values: never[];
+};
+export default _default;

package/build/components/page/layout.js

@@ -0,0 +1,24 @@
+import { html } from '@esportsplus/template';
+export default ({ content, subtitle, suptitle, title, width }) => html `
+    <div class="container --slide-in --margin-vertical --margin-900" style="${width && `--max-width: ${width};`}">
+        ${suptitle ? html `
+            <span class="page-suptitle --text-bold --text-crop --text-uppercase --text-200" style="--color-default: var(--color-primary-400);letter-spacing: 0.24px;">
+                ${suptitle}
+            </span>
+        ` : ''}
+
+        ${title ? html `
+            <h1 class="page-title --line-height-200 --margin-300 ${!subtitle && '--text-crop-bottom'} ${suptitle ? '--margin-top' : '--text-crop-top'}">
+                ${title}
+            </h1>
+        ` : ''}
+
+        ${subtitle ? html `
+            <span class="page-subtitle --margin-top --margin-300 --text-crop-bottom">
+                ${subtitle}
+            </span>
+        ` : ''}
+
+        ${content || ''}
+    </div>
+`;

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

@@ -0,0 +1,16 @@
+declare const _default: ({ fixed, style }?: {
+    fixed?: boolean | undefined;
+    style?: string | undefined;
+}) => {
+    attributes: {
+        content: string;
+        type: string;
+        values: never[];
+    };
+    html: {
+        content: string;
+        type: string;
+        values: never[];
+    };
+};
+export default _default;

package/build/components/scrollbar/index.js

@@ -0,0 +1,36 @@
+import { reactive } from '@esportsplus/reactivity';
+import { html } from '@esportsplus/template';
+let root = document.body, width;
+export default ({ fixed, style } = {}) => {
+    let state = reactive({
+        height: 100,
+        translate: 0
+    });
+    return {
+        attributes: html({
+            class: () => {
+                return '--scrollbar';
+            },
+            onscroll: function () {
+                if (width === undefined) {
+                    width = this.offsetWidth - this.clientWidth;
+                    if (width && width !== 17) {
+                        root.style.setProperty('--scrollbar-width', `${width}px`);
+                    }
+                }
+                state.height = (this.clientHeight / this.scrollHeight) * 100;
+                state.translate = (this.scrollTop / this.clientHeight) * 100;
+            }
+        }),
+        html: html `
+            <div
+                class='scrollbar ${fixed ? 'scrollbar--fixed' : ''} ${() => state.height >= 100 ? 'scrollbar--hidden' : ''}'
+                style='${() => `
+                    ${style || ''}
+                    --translate: translate3d(0, ${state.translate}%, 0);
+                    --height: ${state.height}%;
+                `}'
+            ></div>
+        `
+    };
+};

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

@@ -0,0 +1,8 @@
+declare const _default: {
+    onfocus: (active?: boolean) => {
+        content: string;
+        type: string;
+        values: never[];
+    };
+};
+export default _default;

package/build/components/state/index.js

@@ -0,0 +1,17 @@
+import { reactive } from '@esportsplus/reactivity';
+import { html } from '@esportsplus/template';
+const onfocus = (active = false) => {
+    let state = reactive({ active });
+    return html({
+        class: () => {
+            return state.active ? '--active' : '';
+        },
+        onfocusin: () => {
+            state.active = true;
+        },
+        onfocusout: () => {
+            state.active = false;
+        }
+    });
+};
+export default { onfocus };

package/build/index.d.ts

@@ -0,0 +1 @@
+export * from './components';

package/build/index.js

@@ -0,0 +1 @@
+export * from './components';

package/package.json

@@ -36,5 +36,5 @@
         "prepublishOnly": "npm run build"
     },
     "types": "./build/index.d.ts",
-    "version": "0.0.8"
+    "version": "0.0.9"
 }