@esportsplus/ui 0.2.3 → 0.2.9

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

@@ -0,0 +1,15 @@
+declare const _default: () => {
+    attributes: {
+        class: () => false | 0 | "--active";
+        onrender: (element: HTMLElement & Record<PropertyKey, unknown>) => void;
+        style: (element: HTMLElement) => string | false | 0;
+    };
+    state: {
+        active: boolean | number;
+        dispose: () => void;
+        nodes: {
+            active: import("@esportsplus/reactivity").Signal<number> | import("@esportsplus/reactivity").Signal<false> | import("@esportsplus/reactivity").Signal<true>;
+        };
+    };
+};
+export default _default;

package/build/components/accordion/index.js

@@ -0,0 +1,27 @@
+import { reactive } from '@esportsplus/reactivity';
+let key = Symbol();
+export default () => {
+    let state = reactive({
+        active: 0
+    });
+    return {
+        attributes: {
+            class: () => {
+                return state.active && '--active';
+            },
+            onrender: (element) => {
+                element[key] = state;
+            },
+            style: (element) => {
+                if (state.active) {
+                    let parent = element.closest('accordion');
+                    if (parent && key in parent) {
+                        parent[key].active = (+parent[key].active) + 1;
+                    }
+                }
+                return state.active && `--max-height: ${element.scrollHeight}`;
+            }
+        },
+        state
+    };
+};

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

@@ -0,0 +1,8 @@
+type Options = {
+    backgrounds: [string, string, string, string];
+    blur?: string;
+    opacity?: number;
+    scale?: number;
+};
+declare const _default: ({ backgrounds, blur, opacity, scale }: Options) => import("@esportsplus/template").Renderable;
+export default _default;

package/build/components/aurora/index.js

@@ -0,0 +1,12 @@
+import { html } from '@esportsplus/template';
+export default ({ backgrounds, blur, opacity, scale }) => html `
+    <div class="aurora" ${{
+    style: {
+        '--blur': blur || '50px',
+        '--opacity': opacity || 0.8,
+        '--scale': scale || 1
+    }
+}}>
+        ${backgrounds.map((bg) => html `<div style='${`--background-color: ${bg}`}'></div>`)}
+    </div>
+`;

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

@@ -0,0 +1,4 @@
+declare const _default: {
+    write: (value: string) => Promise<boolean>;
+};
+export default _default;

package/build/components/clipboard/index.js

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

package/build/components/clipboard/write.d.ts

@@ -0,0 +1,2 @@
+declare const _default: (value: string) => Promise<boolean>;
+export default _default;

package/build/components/clipboard/write.js

@@ -0,0 +1,9 @@
+export default async (value) => {
+    try {
+        await navigator.clipboard.writeText(value);
+        return true;
+    }
+    catch {
+        return false;
+    }
+};

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

@@ -0,0 +1,2 @@
+declare const _default: (attributes?: Record<string, string>) => import("@esportsplus/template").Renderable;
+export default _default;

package/build/components/ellipsis/index.js

@@ -0,0 +1,8 @@
+import { html } from '@esportsplus/template';
+export default (attributes) => html `
+    <div class="ellipsis" ${attributes}>
+        <span></span>
+        <span></span>
+        <span></span>
+    </div>
+`;

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

@@ -1,4 +1,4 @@
 declare const _default: (data: {
     description?: string;
-}) => "" | import("@esportsplus/template").Renderable;
+}) => import("@esportsplus/template").Renderable | "";
 export default _default;

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

@@ -1,4 +1,4 @@
 declare const _default: (data: {
     error: string;
-}) => () => "" | import("@esportsplus/template").Renderable;
+}) => () => import("@esportsplus/template").Renderable | "";
 export default _default;

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

@@ -1,222 +1,107 @@
+import checkbox from './checkbox';
+import select from './select';
+import s from './switch';
+import text from './text';
 declare const _default: {
     checkbox: (data: {
-        class?: string | undefined;
+        class?: string;
         field?: {
             content?: any;
-        } | undefined;
+        };
         mask?: {
-            class?: string | undefined;
-            style?: string | undefined;
-        } | undefined;
-        name?: string | undefined;
-        style?: string | undefined;
+            class?: string;
+            style?: string;
+        };
+        name?: string;
+        style?: string;
         title: string;
         value?: any;
     } & {
-        description?: string | undefined;
+        description?: string;
     }) => import("@esportsplus/template").Renderable;
     file: (data: {
-        accept?: string | undefined;
-        class?: string | undefined;
+        accept?: string;
+        class?: string;
         mask?: {
-            class?: string | undefined;
+            class?: string;
             content?: any;
-            style?: string | undefined;
-        } | undefined;
-        name?: string | undefined;
-        placeholder?: string | undefined;
-        style?: string | undefined;
-        type?: string | undefined;
+            style?: string;
+        };
+        name?: string;
+        placeholder?: string;
+        style?: string;
+        type?: string;
         value?: unknown;
     } & {
-        description?: string | undefined;
+        description?: string;
     } & {
-        required?: boolean | undefined;
-        title?: string | undefined;
+        required?: boolean;
+        title?: string;
     }) => import("@esportsplus/template").Renderable;
     optional: {
-        select: (data: {
-            class?: string | undefined;
-            field?: {
-                content?: any;
-            } | undefined;
-            mask?: {
-                class?: string | undefined;
-                style?: string | undefined;
-            } | undefined;
-            name?: string | undefined;
-            style?: string | undefined;
-            title: string;
-            value?: any;
-        } & {
-            description?: string | undefined;
-        } & {
-            field: {
-                class?: string | undefined;
-                effect?: ((selected: string | number) => void) | undefined;
-                mask?: {
-                    class?: string | undefined;
-                    content?: any;
-                    style?: string | undefined;
-                } | undefined;
-                name?: string | undefined;
-                options: Record<string | number, string | number>;
-                option?: {
-                    class?: string | undefined;
-                    style?: string | undefined;
-                } | undefined;
-                selected?: any;
-                scrollbar?: {
-                    style?: string | undefined;
-                } | undefined;
-                style?: string | undefined;
-                text?: {
-                    class?: string | undefined;
-                } | undefined;
-                tooltip?: {
-                    class?: string | undefined;
-                    direction?: any;
-                    style?: string | undefined;
-                } | undefined;
-            } & {
-                description?: string | undefined;
-            } & {
-                required?: boolean | undefined;
-                title?: string | undefined;
-            };
+        select: (data: Parameters<typeof s>[0] & {
+            field: Parameters<typeof select>[0];
         }) => import("@esportsplus/template").Renderable;
-        text: (data: {
-            class?: string | undefined;
-            field?: {
-                content?: any;
-            } | undefined;
-            mask?: {
-                class?: string | undefined;
-                style?: string | undefined;
-            } | undefined;
-            name?: string | undefined;
-            style?: string | undefined;
-            title: string;
-            value?: any;
-        } & {
-            description?: string | undefined;
-        } & {
-            field: {
-                class?: string | undefined;
-                mask?: {
-                    class?: string | undefined;
-                    content?: any;
-                    style?: string | undefined;
-                } | undefined;
-                name?: string | undefined;
-                placeholder?: string | undefined;
-                style?: string | undefined;
-                tag?: {
-                    class?: string | undefined;
-                } | undefined;
-                textarea?: boolean | undefined;
-                type?: string | undefined;
-                value?: unknown;
-            } & {
-                description?: string | undefined;
-            } & {
-                required?: boolean | undefined;
-                title?: string | undefined;
-            };
+        text: (data: Parameters<typeof s>[0] & {
+            field: Parameters<typeof text>[0];
         }) => import("@esportsplus/template").Renderable;
     };
     select: (data: {
-        class?: string | undefined;
-        effect?: ((selected: string | number) => void) | undefined;
+        class?: string;
+        effect?: (selected: number | string) => void;
         mask?: {
-            class?: string | undefined;
+            class?: string;
             content?: any;
-            style?: string | undefined;
-        } | undefined;
-        name?: string | undefined;
-        options: Record<string | number, string | number>;
+            style?: string;
+        };
+        name?: string;
+        options: Record<number | string, number | string>;
         option?: {
-            class?: string | undefined;
-            style?: string | undefined;
-        } | undefined;
+            class?: string;
+            style?: string;
+        };
         selected?: any;
         scrollbar?: {
-            style?: string | undefined;
-        } | undefined;
-        style?: string | undefined;
+            style?: string;
+        };
+        style?: string;
         text?: {
-            class?: string | undefined;
-        } | undefined;
+            class?: string;
+        };
         tooltip?: {
-            class?: string | undefined;
+            class?: string;
             direction?: any;
-            style?: string | undefined;
-        } | undefined;
+            style?: string;
+        };
     } & {
-        description?: string | undefined;
+        description?: string;
     } & {
-        required?: boolean | undefined;
-        title?: string | undefined;
-    }) => import("@esportsplus/template").Renderable;
-    switch: (data: {
-        class?: string | undefined;
-        field?: {
-            content?: any;
-        } | undefined;
-        mask?: {
-            class?: string | undefined;
-            style?: string | undefined;
-        } | undefined;
-        name?: string | undefined;
-        style?: string | undefined;
-        title: string;
-        value?: any;
-    } & {
-        description?: string | undefined;
-    }) => import("@esportsplus/template").Renderable;
-    textarea: (data: {
-        class?: string | undefined;
-        mask?: {
-            class?: string | undefined;
-            content?: any;
-            style?: string | undefined;
-        } | undefined;
-        name?: string | undefined;
-        placeholder?: string | undefined;
-        style?: string | undefined;
-        tag?: {
-            class?: string | undefined;
-        } | undefined;
-        textarea?: boolean | undefined;
-        type?: string | undefined;
-        value?: unknown;
-    } & {
-        description?: string | undefined;
-    } & {
-        required?: boolean | undefined;
-        title?: string | undefined;
+        required?: boolean;
+        title?: string;
     }) => import("@esportsplus/template").Renderable;
+    switch: (data: Parameters<typeof checkbox>[0]) => import("@esportsplus/template").Renderable;
+    textarea: (data: Parameters<typeof text>[0]) => import("@esportsplus/template").Renderable;
     text: (data: {
-        class?: string | undefined;
+        class?: string;
         mask?: {
-            class?: string | undefined;
+            class?: string;
             content?: any;
-            style?: string | undefined;
-        } | undefined;
-        name?: string | undefined;
-        placeholder?: string | undefined;
-        style?: string | undefined;
+            style?: string;
+        };
+        name?: string;
+        placeholder?: string;
+        style?: string;
         tag?: {
-            class?: string | undefined;
-        } | undefined;
-        textarea?: boolean | undefined;
-        type?: string | undefined;
+            class?: string;
+        };
+        textarea?: boolean;
+        type?: string;
         value?: unknown;
     } & {
-        description?: string | undefined;
+        description?: string;
     } & {
-        required?: boolean | undefined;
-        title?: string | undefined;
+        required?: boolean;
+        title?: string;
     }) => import("@esportsplus/template").Renderable;
 };
 export default _default;

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

@@ -1,92 +1,12 @@
+import sel from './select';
+import s from './switch';
+import tex from './text';
 declare const _default: {
-    select: (data: {
-        class?: string | undefined;
-        field?: {
-            content?: any;
-        } | undefined;
-        mask?: {
-            class?: string | undefined;
-            style?: string | undefined;
-        } | undefined;
-        name?: string | undefined;
-        style?: string | undefined;
-        title: string;
-        value?: any;
-    } & {
-        description?: string | undefined;
-    } & {
-        field: {
-            class?: string | undefined;
-            effect?: ((selected: string | number) => void) | undefined;
-            mask?: {
-                class?: string | undefined;
-                content?: any;
-                style?: string | undefined;
-            } | undefined;
-            name?: string | undefined;
-            options: Record<string | number, string | number>;
-            option?: {
-                class?: string | undefined;
-                style?: string | undefined;
-            } | undefined;
-            selected?: any;
-            scrollbar?: {
-                style?: string | undefined;
-            } | undefined;
-            style?: string | undefined;
-            text?: {
-                class?: string | undefined;
-            } | undefined;
-            tooltip?: {
-                class?: string | undefined;
-                direction?: any;
-                style?: string | undefined;
-            } | undefined;
-        } & {
-            description?: string | undefined;
-        } & {
-            required?: boolean | undefined;
-            title?: string | undefined;
-        };
+    select: (data: Parameters<typeof s>[0] & {
+        field: Parameters<typeof sel>[0];
     }) => import("@esportsplus/template").Renderable;
-    text: (data: {
-        class?: string | undefined;
-        field?: {
-            content?: any;
-        } | undefined;
-        mask?: {
-            class?: string | undefined;
-            style?: string | undefined;
-        } | undefined;
-        name?: string | undefined;
-        style?: string | undefined;
-        title: string;
-        value?: any;
-    } & {
-        description?: string | undefined;
-    } & {
-        field: {
-            class?: string | undefined;
-            mask?: {
-                class?: string | undefined;
-                content?: any;
-                style?: string | undefined;
-            } | undefined;
-            name?: string | undefined;
-            placeholder?: string | undefined;
-            style?: string | undefined;
-            tag?: {
-                class?: string | undefined;
-            } | undefined;
-            textarea?: boolean | undefined;
-            type?: string | undefined;
-            value?: unknown;
-        } & {
-            description?: string | undefined;
-        } & {
-            required?: boolean | undefined;
-            title?: string | undefined;
-        };
+    text: (data: Parameters<typeof s>[0] & {
+        field: Parameters<typeof tex>[0];
     }) => import("@esportsplus/template").Renderable;
 };
 export default _default;

package/build/components/field/select.js

@@ -19,8 +19,10 @@ function parse(keys, selected) {
 }
 function template(data, state) {
     let { attributes: a, html: h } = scrollbar({
-        fixed: true,
-        style: data?.scrollbar?.style || '--background-default: var(--color-black-400);'
+        attributes: {
+            style: data?.scrollbar?.style || '--background-default: var(--color-black-400);'
+        },
+        fixed: true
     });
     return html `
         <div

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

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

package/build/components/form/action.js

@@ -1,5 +1,4 @@
 import response from '@esportsplus/action';
-import alert from '../../components/alert';
 import input from './input';
 function parse(input) {
     let data = {};
@@ -27,7 +26,7 @@ export default function (action) {
             event.preventDefault();
             event?.submitter?.classList.add('button--processing');
             let { errors } = await action({
-                alert,
+                alert: null,
                 input: parse(Object.fromEntries(new FormData(this)?.entries())),
                 response
             });

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

@@ -5,18 +5,18 @@ declare const _default: {
         attributes: (reactive: {
             error: string;
         }) => (element: HTMLInputElement | HTMLSelectElement) => void;
-        get: (element?: HTMLInputElement | HTMLSelectElement | undefined) => {
+        get: (element?: HTMLInputElement | HTMLSelectElement) => {
             error: string;
         } | undefined;
     };
     layout: (data: {
         action?: any;
         button?: {
-            class?: string | undefined;
+            class?: string;
             content?: any;
-            style?: string | undefined;
-        } | undefined;
-        class?: string | undefined;
+            style?: string;
+        };
+        class?: string;
         content?: any;
     }) => import("@esportsplus/template").Renderable;
 };

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

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

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

@@ -1,5 +1,4 @@
 import response, { Response } from '@esportsplus/action';
-import alert from '../../components/alert';
 type Action = (data: Payload) => Promise<Errors> | Errors;
 type Errors = {
     errors: Response<unknown>['errors'];

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

@@ -0,0 +1,4 @@
+declare const _default: {
+    download: (content: any[] | Record<string, any>, name: string) => void;
+};
+export default _default;

package/build/components/json/index.js

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

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

@@ -1,9 +1,9 @@
-declare const _default: ({ fixed, style }?: {
+declare const _default: ({ attributes, fixed }?: {
+    attributes?: Record<string, unknown>;
     fixed?: boolean;
-    style?: string;
 }) => {
     attributes: {
-        class: () => string;
+        class: string;
         onscroll: (this: HTMLElement) => void;
     };
     html: import("@esportsplus/template").Renderable;

package/build/components/scrollbar/index.js

@@ -1,16 +1,14 @@
 import { reactive } from '@esportsplus/reactivity';
 import { html } from '@esportsplus/template';
 let root = document.body, width;
-export default ({ fixed, style } = {}) => {
+export default ({ attributes, fixed } = {}) => {
     let state = reactive({
         height: 100,
         translate: 0
     });
     return {
         attributes: {
-            class: () => {
-                return '--scrollbar-content';
-            },
+            class: '--scrollbar-content',
             onscroll: function () {
                 if (width === undefined) {
                     width = this.offsetWidth - this.clientWidth;
@@ -26,10 +24,10 @@ export default ({ fixed, style } = {}) => {
             <div
                 class='scrollbar ${fixed ? 'scrollbar--fixed' : ''} ${() => state.height >= 100 ? 'scrollbar--hidden' : ''}'
                 style='${() => `
-                    ${style || ''}
                     --translate: translate3d(0, ${state.translate}%, 0);
                     --height: ${state.height}%;
                 `}'
+                ${attributes}
             ></div>
         `
     };

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

@@ -1,9 +1,8 @@
+import scrollbar from '../../components/scrollbar';
 type Data = {
     class?: string;
     content?: any;
-    scrollbar?: {
-        style?: string;
-    };
+    scrollbar?: Parameters<typeof scrollbar>[0];
 };
 declare const _default: (data: Data) => import("@esportsplus/template").Renderable;
 export default _default;