@esportsplus/ui 0.24.3 → 0.24.5

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

@@ -0,0 +1,20 @@
+import './scss/index.scss';
+declare const _default: {
+    (): ReturnType<(this: {
+        attributes?: import("../../components/scrollbar/index.js").Attributes | undefined;
+        content?: import("@esportsplus/template").Renderable<any>;
+    }, attributes: Readonly<import("../../components/scrollbar/index.js").Attributes>, content: import("@esportsplus/template").Renderable<any>) => import("@esportsplus/template").Renderable<any>>;
+    <T extends import("../../components/scrollbar/index.js").Attributes>(attributes: T): ReturnType<(this: {
+        attributes?: import("../../components/scrollbar/index.js").Attributes | undefined;
+        content?: import("@esportsplus/template").Renderable<any>;
+    }, attributes: Readonly<import("../../components/scrollbar/index.js").Attributes>, content: import("@esportsplus/template").Renderable<any>) => import("@esportsplus/template").Renderable<any>>;
+    <T extends import("@esportsplus/template").Renderable<any>>(content: T): ReturnType<(this: {
+        attributes?: import("../../components/scrollbar/index.js").Attributes | undefined;
+        content?: import("@esportsplus/template").Renderable<any>;
+    }, attributes: Readonly<import("../../components/scrollbar/index.js").Attributes>, content: import("@esportsplus/template").Renderable<any>) => import("@esportsplus/template").Renderable<any>>;
+    (attributes: import("../../components/scrollbar/index.js").Attributes, content: import("@esportsplus/template").Renderable<any>): ReturnType<(this: {
+        attributes?: import("../../components/scrollbar/index.js").Attributes | undefined;
+        content?: import("@esportsplus/template").Renderable<any>;
+    }, attributes: Readonly<import("../../components/scrollbar/index.js").Attributes>, content: import("@esportsplus/template").Renderable<any>) => import("@esportsplus/template").Renderable<any>>;
+};
+export default _default;

package/build/components/overlay/index.js

@@ -0,0 +1,7 @@
+import scrollbar from '../../components/scrollbar/index.js';
+import './scss/index.scss';
+export default scrollbar.bind({
+    attributes: {
+        class: 'overlay'
+    }
+});

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

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

package/build/components/page/index.js

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

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

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

package/build/components/row/index.js

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

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

@@ -0,0 +1,20 @@
+import './scss/index.scss';
+declare const _default: {
+    (): ReturnType<(this: {
+        attributes?: import("../../components/scrollbar/index.js").Attributes | undefined;
+        content?: import("@esportsplus/template").Renderable<any>;
+    }, attributes: Readonly<import("../../components/scrollbar/index.js").Attributes>, content: import("@esportsplus/template").Renderable<any>) => import("@esportsplus/template").Renderable<any>>;
+    <T extends import("../../components/scrollbar/index.js").Attributes>(attributes: T): ReturnType<(this: {
+        attributes?: import("../../components/scrollbar/index.js").Attributes | undefined;
+        content?: import("@esportsplus/template").Renderable<any>;
+    }, attributes: Readonly<import("../../components/scrollbar/index.js").Attributes>, content: import("@esportsplus/template").Renderable<any>) => import("@esportsplus/template").Renderable<any>>;
+    <T extends import("@esportsplus/template").Renderable<any>>(content: T): ReturnType<(this: {
+        attributes?: import("../../components/scrollbar/index.js").Attributes | undefined;
+        content?: import("@esportsplus/template").Renderable<any>;
+    }, attributes: Readonly<import("../../components/scrollbar/index.js").Attributes>, content: import("@esportsplus/template").Renderable<any>) => import("@esportsplus/template").Renderable<any>>;
+    (attributes: import("../../components/scrollbar/index.js").Attributes, content: import("@esportsplus/template").Renderable<any>): ReturnType<(this: {
+        attributes?: import("../../components/scrollbar/index.js").Attributes | undefined;
+        content?: import("@esportsplus/template").Renderable<any>;
+    }, attributes: Readonly<import("../../components/scrollbar/index.js").Attributes>, content: import("@esportsplus/template").Renderable<any>) => import("@esportsplus/template").Renderable<any>>;
+};
+export default _default;

package/build/components/sidebar/index.js

@@ -0,0 +1,7 @@
+import scrollbar from '../../components/scrollbar/index.js';
+import './scss/index.scss';
+export default scrollbar.bind({
+    attributes: {
+        class: 'sidebar'
+    }
+});

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

@@ -0,0 +1,20 @@
+import './scss/index.scss';
+declare const _default: {
+    (): ReturnType<(this: {
+        attributes?: import("../../components/scrollbar/index.js").Attributes | undefined;
+        content?: import("@esportsplus/template").Renderable<any>;
+    }, attributes: Readonly<import("../../components/scrollbar/index.js").Attributes>, content: import("@esportsplus/template").Renderable<any>) => import("@esportsplus/template").Renderable<any>>;
+    <T extends import("../../components/scrollbar/index.js").Attributes>(attributes: T): ReturnType<(this: {
+        attributes?: import("../../components/scrollbar/index.js").Attributes | undefined;
+        content?: import("@esportsplus/template").Renderable<any>;
+    }, attributes: Readonly<import("../../components/scrollbar/index.js").Attributes>, content: import("@esportsplus/template").Renderable<any>) => import("@esportsplus/template").Renderable<any>>;
+    <T extends import("@esportsplus/template").Renderable<any>>(content: T): ReturnType<(this: {
+        attributes?: import("../../components/scrollbar/index.js").Attributes | undefined;
+        content?: import("@esportsplus/template").Renderable<any>;
+    }, attributes: Readonly<import("../../components/scrollbar/index.js").Attributes>, content: import("@esportsplus/template").Renderable<any>) => import("@esportsplus/template").Renderable<any>>;
+    (attributes: import("../../components/scrollbar/index.js").Attributes, content: import("@esportsplus/template").Renderable<any>): ReturnType<(this: {
+        attributes?: import("../../components/scrollbar/index.js").Attributes | undefined;
+        content?: import("@esportsplus/template").Renderable<any>;
+    }, attributes: Readonly<import("../../components/scrollbar/index.js").Attributes>, content: import("@esportsplus/template").Renderable<any>) => import("@esportsplus/template").Renderable<any>>;
+};
+export default _default;

package/build/components/site/index.js

@@ -0,0 +1,9 @@
+import { onclick } from '../../components/root/index.js';
+import scrollbar from '../../components/scrollbar/index.js';
+import './scss/index.scss';
+export default scrollbar.bind({
+    attributes: {
+        class: 'site',
+        onclick
+    }
+});

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

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

package/build/components/text/index.js

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

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

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

package/build/components/thumbnail/index.js

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

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

@@ -0,0 +1,2 @@
+import { truncate } from '@esportsplus/utilities';
+export default truncate;

package/build/components/truncate/index.js

@@ -0,0 +1,2 @@
+import { truncate } from '@esportsplus/utilities';
+export default truncate;

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

@@ -0,0 +1,20 @@
+import './scss/index.scss';
+declare const _default: {
+    (): ReturnType<(this: {
+        attributes?: import("@esportsplus/template").Attributes | undefined;
+        content?: string[] | undefined;
+    }, attributes: Readonly<import("@esportsplus/template").Attributes>, content: string[]) => import("@esportsplus/template").Renderable<any>>;
+    <T extends import("@esportsplus/template").Attributes>(attributes: T): ReturnType<(this: {
+        attributes?: import("@esportsplus/template").Attributes | undefined;
+        content?: string[] | undefined;
+    }, attributes: Readonly<import("@esportsplus/template").Attributes>, content: string[]) => import("@esportsplus/template").Renderable<any>>;
+    <T extends string[]>(content: T): ReturnType<(this: {
+        attributes?: import("@esportsplus/template").Attributes | undefined;
+        content?: string[] | undefined;
+    }, attributes: Readonly<import("@esportsplus/template").Attributes>, content: string[]) => import("@esportsplus/template").Renderable<any>>;
+    (attributes: import("@esportsplus/template").Attributes, content: string[]): ReturnType<(this: {
+        attributes?: import("@esportsplus/template").Attributes | undefined;
+        content?: string[] | undefined;
+    }, attributes: Readonly<import("@esportsplus/template").Attributes>, content: string[]) => import("@esportsplus/template").Renderable<any>>;
+};
+export default _default;

package/build/components/typewriter/index.js

@@ -0,0 +1,43 @@
+import { html } from '@esportsplus/template';
+import { reactive } from '@esportsplus/reactivity';
+import template from '../../components/template/index.js';
+import './scss/index.scss';
+const EMPTY_NODE = html ` `;
+export default template.factory(function (_, content) {
+    let state = reactive({ text: '' });
+    return html `
+            <div class='typewriter' ${{
+        onconnect: () => {
+            let character = 0, i = 0, isWriting = true, write = content[i];
+            function play() {
+                setTimeout(() => {
+                    state.text = write.slice(0, character);
+                    if (isWriting) {
+                        if (character > write.length) {
+                            isWriting = false;
+                            setTimeout(play, 2000);
+                            return;
+                        }
+                        else {
+                            character++;
+                        }
+                    }
+                    else {
+                        if (character === 0) {
+                            isWriting = true;
+                            write = content[++i] || content[i = 0];
+                        }
+                        else {
+                            character--;
+                        }
+                    }
+                    play();
+                }, isWriting ? 64 : 32);
+            }
+            play();
+        }
+    }}>
+                ${() => state.text || EMPTY_NODE}
+            </div>
+        `;
+});

package/build/css-utilities/index.d.ts

@@ -0,0 +1,20 @@
+import './[margin,padding]/scss/index.scss';
+import './absolute/scss/index.scss';
+import './background/scss/index.scss';
+import './border/scss/index.scss';
+import './color/scss/index.scss';
+import './disabled/scss/index.scss';
+import './flex/scss/index.scss';
+import './flicker/scss/index.scss';
+import './focus/scss/index.scss';
+import './glass/scss/index.scss';
+import './hidden/scss/index.scss';
+import './inline/scss/index.scss';
+import './line-height/scss/index.scss';
+import './not-allowed/scss/index.scss';
+import './pointer/scss/index.scss';
+import './size/scss/index.scss';
+import './squircle/scss/index.scss';
+import './text/scss/index.scss';
+import './viewport/scss/index.scss';
+import './width/scss/index.scss';

package/build/css-utilities/index.js

@@ -0,0 +1,20 @@
+import './[margin,padding]/scss/index.scss';
+import './absolute/scss/index.scss';
+import './background/scss/index.scss';
+import './border/scss/index.scss';
+import './color/scss/index.scss';
+import './disabled/scss/index.scss';
+import './flex/scss/index.scss';
+import './flicker/scss/index.scss';
+import './focus/scss/index.scss';
+import './glass/scss/index.scss';
+import './hidden/scss/index.scss';
+import './inline/scss/index.scss';
+import './line-height/scss/index.scss';
+import './not-allowed/scss/index.scss';
+import './pointer/scss/index.scss';
+import './size/scss/index.scss';
+import './squircle/scss/index.scss';
+import './text/scss/index.scss';
+import './viewport/scss/index.scss';
+import './width/scss/index.scss';

package/build/fonts/index.d.ts

@@ -0,0 +1 @@
+export * as montserrat from './montserrat/index.js';

package/build/fonts/index.js

@@ -0,0 +1 @@
+export * as montserrat from './montserrat/index.js';

package/build/fonts/montserrat/index.d.ts

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

package/build/fonts/montserrat/index.js

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

package/build/normalize/index.d.ts

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

package/build/normalize/index.js

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

package/package.json

@@ -48,7 +48,7 @@
   "private": false,
   "sideEffects": false,
   "type": "module",
-  "version": "0.24.3",
+  "version": "0.24.5",
   "scripts": {
     "build": "run-s build:vite build:ts",
     "build:ts": "tsc && tsc-alias",

package/src/components/field/select.ts

@@ -51,114 +51,116 @@ function set(state: { active: boolean }, value: boolean) {
 }
 
 
-const select = function(
-    this: {
-        options: { content: unknown } & Attributes;
-        option?: Attributes;
-        state: {
-            active: boolean;
-            error: string;
-            render: boolean;
-            selected: string | number;
-        }
-    },
-    attributes: A,
-    content: Renderable<unknown>
-) {
-    let { option, options, state } = this;
+const select = template.factory(
+    function(
+        this: {
+            options: { content: unknown } & Attributes;
+            option?: Attributes;
+            state: {
+                active: boolean;
+                error: string;
+                render: boolean;
+                selected: string | number;
+            }
+        },
+        attributes: A,
+        content: Renderable<unknown>
+    ) {
+        let { option, options, state } = this;
+
+        return html`
+            <label
+                class='field-mask field-mask--select'
+                ${omit(attributes, OMIT_MASK)}
+                ${{
+                    onclick: () => {
+                        if (state.render) {
+                            set(state, !state.active);
+                        }
 
-    return html`
-        <label
-            class='field-mask field-mask--select'
-            ${omit(attributes, OMIT_MASK)}
-            ${{
-                onclick: () => {
-                    if (state.render) {
-                        set(state, !state.active);
+                        state.render = true;
                     }
-
-                    state.render = true;
-                }
-            }}
-        >
-            <input class='field-mask-tag field-mask-tag--hidden'
-                ${{
-                    name: attributes.name,
-                    onclick: () => { /* Prevent double click events from firing */ },
-                    onrender: form.input.onrender(state),
-                    value: () => state.selected
                 }}
-                ${attributes['field-mask-tag']}
             >
-
-            ${content || html`
-                <div class='field-mask-text' ${attributes['field-mask-text']}>
-                    ${() => {
-                        // @ts-ignore
-                        return (options[ state.selected ]?.content || '-');
+                <input class='field-mask-tag field-mask-tag--hidden'
+                    ${{
+                        name: attributes.name,
+                        onclick: () => { /* Prevent double click events from firing */ },
+                        onrender: form.input.onrender(state),
+                        value: () => state.selected
                     }}
-                </div>
-            `}
-
-            <div class='field-mask-arrow' ${attributes['field-mask-arrow']}></div>
-
-            ${() => {
-                if (!state.render) {
-                    return;
-                }
-
-                let keys = Object.keys(options),
-                    selected = reactive(
-                        Object.fromEntries( keys.map(key => [key, false]) )
-                    );
-
-                return scrollbar(
-                    {
-                        ...attributes['tooltip-content'],
-                        class: [
-                            ...toArray(attributes['tooltip-content']?.class),
-                            `tooltip-content tooltip-content--${attributes['tooltip-content']?.direction || 's'} --flex-column --width-full`
-                        ],
-                        onclick: (e: Event) => {
-                            let key = (e?.target as HTMLElement)?.dataset?.key;
-
-                            if (key === undefined) {
-                                return;
-                            }
-
-                            let previous = state.selected;
-
-                            set(state, false);
-                            state.selected = key;
+                    ${attributes['field-mask-tag']}
+                >
+
+                ${content || html`
+                    <div class='field-mask-text' ${attributes['field-mask-text']}>
+                        ${() => {
+                            // @ts-ignore
+                            return (options[ state.selected ]?.content || '-');
+                        }}
+                    </div>
+                `}
+
+                <div class='field-mask-arrow' ${attributes['field-mask-arrow']}></div>
+
+                ${() => {
+                    if (!state.render) {
+                        return;
+                    }
 
-                            selected[key] = true;
-                            selected[previous] = false;
-                        },
-                        onconnect: () => {
-                            set(state, true);
+                    let keys = Object.keys(options),
+                        selected = reactive(
+                            Object.fromEntries( keys.map(key => [key, false]) )
+                        );
+
+                    return scrollbar(
+                        {
+                            ...attributes['tooltip-content'],
+                            class: [
+                                ...toArray(attributes['tooltip-content']?.class),
+                                `tooltip-content tooltip-content--${attributes['tooltip-content']?.direction || 's'} --flex-column --width-full`
+                            ],
+                            onclick: (e: Event) => {
+                                let key = (e?.target as HTMLElement)?.dataset?.key;
+
+                                if (key === undefined) {
+                                    return;
+                                }
+
+                                let previous = state.selected;
+
+                                set(state, false);
+                                state.selected = key;
+
+                                selected[key] = true;
+                                selected[previous] = false;
+                            },
+                            onconnect: () => {
+                                set(state, true);
+                            },
+                            scrollbar: attributes['scrollbar'],
+                            'scrollbar-container-content': attributes['scrollbar-container-content']
                         },
-                        scrollbar: attributes['scrollbar'],
-                        'scrollbar-container-content': attributes['scrollbar-container-content']
-                    },
-                    keys.map((key) => html`
-                        <div class='link'
-                            ${omit(options[key] as Attributes, OMIT_OPTION)}
-                            ${option}
-                            ${{
-                                class: () => selected[key] && '--active',
-                                'data-key': key
-                            }}
-                        >
-                            <span class='--text-truncate --pointer-none'>
-                                ${(options[key] as any).content}
-                            </span>
-                        </div>
-                    `)
-                );
-            }}
-        </label>
-    `;
-};
+                        keys.map((key) => html`
+                            <div class='link'
+                                ${omit(options[key] as Attributes, OMIT_OPTION)}
+                                ${option}
+                                ${{
+                                    class: () => selected[key] && '--active',
+                                    'data-key': key
+                                }}
+                            >
+                                <span class='--text-truncate --pointer-none'>
+                                    ${(options[key] as any).content}
+                                </span>
+                            </div>
+                        `)
+                    );
+                }}
+            </label>
+        `;
+    }
+);
 
 
 export default template.factory<
@@ -179,7 +181,7 @@ export default template.factory<
             }
         }
     ),
-    (mask: ReturnType<typeof template.factory<A>>) => Renderable<unknown>
+    (mask: typeof select) => Renderable<unknown>
 >((attributes, content) => {
     let options = attributes.options,
         state = attributes.state || reactive({