@esportsplus/ui 0.38.1 → 0.39.0

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

@@ -0,0 +1,22 @@
+import { Response } from '@esportsplus/action';
+import { Attributes, Renderable } from '@esportsplus/template';
+import './scss/index.scss';
+declare function deactivate(): void;
+declare const _default: {
+    content: (attributes: Attributes & {
+        close?: Attributes;
+        message?: Attributes;
+    }, { check, close, error }: {
+        check: string;
+        close: string;
+        error: string;
+    }) => Node;
+    deactivate: typeof deactivate;
+    error: {
+        (messages: Renderable<any>, seconds?: number): void;
+        response(response: Response<any>): void;
+    };
+    info: (messages: Renderable<any>, seconds?: number) => void;
+    success: (messages: Renderable<any>, seconds?: number) => void;
+};
+export default _default;

package/build/components/alert/index.js

@@ -0,0 +1,120 @@
+import { reactive } from '@esportsplus/reactivity';
+import { html, svg } from '@esportsplus/template';
+import { omit } from '@esportsplus/utilities';
+import { icon } from '@esportsplus/ui';
+import './scss/index.scss';
+const OMIT = ['close', 'message'];
+let modifiers = {
+    error: 'red',
+    info: 'black',
+    success: 'green'
+}, state = reactive({
+    active: false,
+    messages: new Set,
+    type: ''
+}), timeout = 250;
+function activate(key, messages, seconds = 0) {
+    if (!Array.isArray(messages)) {
+        messages = [messages];
+    }
+    if (!messages.length) {
+        return;
+    }
+    if (state.type !== key) {
+        state.messages.clear();
+    }
+    else {
+        state.type = '';
+    }
+    for (let message of messages) {
+        state.messages.add(message);
+    }
+    if (state.active) {
+        state.active = false;
+        setTimeout(() => {
+            state.active = true;
+            state.type = key;
+            if (seconds) {
+                setTimeout(deactivate, 500 * seconds);
+            }
+        }, timeout);
+    }
+    else {
+        setTimeout(() => {
+            state.active = true;
+            state.type = key;
+            if (seconds) {
+                setTimeout(deactivate, 500 * seconds);
+            }
+        }, timeout);
+    }
+}
+function deactivate() {
+    state.active = false;
+    setTimeout(() => {
+        state.messages.clear();
+    }, timeout);
+}
+const error = (messages, seconds = 0) => activate('error', messages, seconds);
+error.response = (response) => {
+    if (response.ok) {
+        return;
+    }
+    error(response.errors.map(({ message, path }) => {
+        if (!path) {
+            return message;
+        }
+        return `${String(path).split('.').join(' ')} ${message}`;
+    }), 5);
+};
+const info = (messages, seconds = 0) => activate('info', messages, seconds);
+const success = (messages, seconds = 0) => activate('success', messages, seconds);
+const content = (attributes, { check, close, error }) => {
+    return html `
+        <div
+            class='alert anchor anchor--n card --flex-fill --flex-row --flex-vertical ${() => state.active && '--active'}'
+            style='--max-width: 640px;'
+            ${omit(attributes, OMIT)}
+        >
+            ${() => {
+        let type = state.type;
+        return html `
+                    <div class='--flex-vertical' style='${`--color: var(--color-${modifiers[type]}-400);`}'>
+                        ${icon({ class: '--margin-right --margin-600 --size-500' }, type === 'error' ? error : check)}
+                    </div>
+                `;
+    }}
+
+            <div class='--flex-fill --flex-column --gap-100 --padding-right --padding-800'>
+                ${() => {
+        let message = attributes.message;
+        return state.type && [...state.messages].map((content, i) => {
+            if (typeof content === 'string') {
+                return html `
+                                <p class='${i === 0 && '--text-crop-top'}' ${message}>
+                                    ${content}
+                                </p>
+                            `;
+            }
+            return html `
+                            <div class='--flex-start'>
+                                ${content}
+                            </div>
+                        `;
+        });
+    }}
+            </div>
+
+            <div
+                class='alert-close button --padding-300'
+                onclick='${deactivate}'
+                ${attributes.close}
+            >
+                <div class="icon" style='--size: 14px;'>
+                    ${svg.sprite(close)}
+                </div>
+            </div>
+        </div>
+    `;
+};
+export default { content, deactivate, error, info, success };

package/build/components/alert/scss/index.scss

@@ -0,0 +1,2 @@
+@layer components {.anchor{--margin-horizontal:var(--size-400);--margin-vertical:var(--size-400);max-height:calc(var(--max-height,100%) - var(--margin-vertical)*2);max-width:calc(var(--max-width,100%) - var(--margin-horizontal)*2);transition:opacity var(--transition-duration)ease-in-out,transform var(--transition-duration)ease-in-out;z-index:9;position:absolute}.anchor:not(.--active){opacity:0}.anchor:not(.--active),.anchor:not(.--active) *{pointer-events:none}.anchor--n,.anchor--s{right:50%;transform:translate(50%)}.anchor--ne,.anchor--nw{top:var(--margin-vertical)}.anchor--se,.anchor--sw{bottom:var(--margin-vertical)}.anchor--ne,.anchor--se{right:var(--margin-horizontal)}.anchor--nw,.anchor--sw{left:var(--margin-horizontal)}.anchor--n{top:var(--margin-vertical)}.anchor--s{bottom:var(--margin-vertical)}.alert{--max-width:480px;max-width:var(--max-width);width:calc(100% - var(--margin-horizontal)*2);z-index:11;position:fixed}.alert.anchor--n:not(.--active){transform:translate(50%,-100%)}.alert.anchor--ne:not(.--active){transform:translateY(-100%)}.alert-close{bottom:50%;right:var(--size-500);z-index:0;position:absolute;transform:translateY(50%)}.alert-message{opacity:0;transition:opacity var(--transition-duration)ease-in-out,transform var(--transition-duration)ease-in-out}.alert-message:not(.--active){pointer-events:none;position:absolute;top:0;left:0;transform:translate(-25%)}.alert-message.--active{opacity:1}}
+/*$vite$:1*/

package/build/components/anchor/scss/index.scss

@@ -1,2 +1,2 @@
-@layer components {.anchor{--margin-horizontal:var(--size-400);--margin-vertical:var(--size-400);max-height:calc(var(--max-height,100%) - var(--margin-vertical)*2);max-width:calc(var(--max-width,100%) - var(--margin-horizontal)*2);transition:opacity var(--transition-duration)ease-in-out,transform var(--transition-duration)ease-in-out;z-index:9;position:absolute}.anchor:not(.--active){opacity:0}.anchor:not(.--active),.anchor:not(.--active) *{pointer-events:none}.anchor--ne,.anchor--nw{top:var(--margin-vertical)}.anchor--se,.anchor--sw{bottom:var(--margin-vertical)}.anchor--ne,.anchor--se{right:var(--margin-horizontal)}.anchor--nw,.anchor--sw{left:var(--margin-horizontal)}}
+@layer components {.anchor{--margin-horizontal:var(--size-400);--margin-vertical:var(--size-400);max-height:calc(var(--max-height,100%) - var(--margin-vertical)*2);max-width:calc(var(--max-width,100%) - var(--margin-horizontal)*2);transition:opacity var(--transition-duration)ease-in-out,transform var(--transition-duration)ease-in-out;z-index:9;position:absolute}.anchor:not(.--active){opacity:0}.anchor:not(.--active),.anchor:not(.--active) *{pointer-events:none}.anchor--n,.anchor--s{right:50%;transform:translate(50%)}.anchor--ne,.anchor--nw{top:var(--margin-vertical)}.anchor--se,.anchor--sw{bottom:var(--margin-vertical)}.anchor--ne,.anchor--se{right:var(--margin-horizontal)}.anchor--nw,.anchor--sw{left:var(--margin-horizontal)}.anchor--n{top:var(--margin-vertical)}.anchor--s{bottom:var(--margin-vertical)}}
 /*$vite$:1*/

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

@@ -0,0 +1,7 @@
+import { Attributes, Renderable } from '@esportsplus/template';
+import './scss/index.scss';
+declare const _default: ({ attributes, content }: {
+    attributes?: Attributes;
+    content?: Renderable<any>;
+}) => Node;
+export default _default;

package/build/components/back/index.js

@@ -0,0 +1,9 @@
+import { html } from '@esportsplus/template';
+import './scss/index.scss';
+export default ({ attributes, content }) => {
+    return html `
+        <a class='back link --padding-0px --flex-vertical' ${attributes}>
+            ${content}
+        </a>
+    `;
+};

package/build/components/back/scss/index.scss

@@ -0,0 +1,2 @@
+@layer components {.back-arrow{transition:color var(--transition-duration)ease-in-out,transform var(--transition-duration)ease-in-out;transform:rotate(-90deg)}.back:not(.--active):hover .back-arrow{transform:rotate(-90deg)translateY(-2px)}}
+/*$vite$:1*/

package/build/components/index.d.ts

@@ -1,4 +1,6 @@
 export { default as accordion } from './accordion/index.js';
+export { default as alert } from './alert/index.js';
+export { default as back } from './back/index.js';
 export { default as button } from './button/index.js';
 export { default as checkbox } from './checkbox/index.js';
 export { default as clipboard } from './clipboard/index.js';

package/build/components/index.js

@@ -1,4 +1,6 @@
 export { default as accordion } from './accordion/index.js';
+export { default as alert } from './alert/index.js';
+export { default as back } from './back/index.js';
 export { default as button } from './button/index.js';
 export { default as checkbox } from './checkbox/index.js';
 export { default as clipboard } from './clipboard/index.js';

package/package.json

@@ -10,13 +10,13 @@
   },
   "devDependencies": {
     "@esportsplus/typescript": "^0.9.2",
-    "@types/node": "^24.7.0",
+    "@types/node": "^24.9.1",
     "autoprefixer": "^10.4.21",
     "glob": "^11.0.3",
     "lightningcss": "^1.30.2",
     "npm-run-all": "^4.1.5",
     "sass": "^1.93.2",
-    "vite": "^7.1.9"
+    "vite": "^7.1.12"
   },
   "exports": {
     "./css-utilities.scss": "./build/css-utilities/index.scss",
@@ -42,7 +42,7 @@
   "private": false,
   "sideEffects": false,
   "type": "module",
-  "version": "0.38.1",
+  "version": "0.39.0",
   "scripts": {
     "build": "run-s build:vite build:ts",
     "build:ts": "tsc && tsc-alias",

package/src/components/alert/index.ts

@@ -0,0 +1,163 @@
+import { Response } from '@esportsplus/action';
+import { reactive } from '@esportsplus/reactivity';
+import { html, svg, Attributes, Renderable } from '@esportsplus/template';
+import { omit } from '@esportsplus/utilities';
+import { icon } from '@esportsplus/ui';
+import './scss/index.scss';
+
+
+type Type = 'error' | 'info' | 'success';
+
+
+const OMIT = ['close', 'message'];
+
+
+let modifiers: Record<Type, string> = {
+        error: 'red',
+        info: 'black',
+        success: 'green'
+    },
+    state = reactive({
+        active: false,
+        messages: new Set as Set<Renderable<any>>,
+        type: '' as Type
+    }),
+    timeout = 250;
+
+
+function activate(key: Type, messages: Renderable<any>, seconds: number = 0) {
+    if (!Array.isArray(messages)) {
+        messages = [messages];
+    }
+
+    if (!messages.length) {
+        return;
+    }
+
+    if (state.type !== key) {
+        state.messages.clear();
+    }
+    else {
+        // @ts-ignore
+        state.type = '';
+    }
+
+    for (let message of messages) {
+        state.messages.add(message);
+    }
+
+    if (state.active) {
+        state.active = false;
+
+        // Slide in animation needs time
+        setTimeout(() => {
+            state.active = true;
+            state.type = key;
+
+            if (seconds) {
+                setTimeout(deactivate, 500 * seconds);
+            }
+        }, timeout);
+    }
+    else {
+        setTimeout(() => {
+            state.active = true;
+            state.type = key;
+
+            if (seconds) {
+                setTimeout(deactivate, 500 * seconds);
+            }
+        }, timeout);
+    }
+}
+
+function deactivate() {
+    state.active = false;
+
+    setTimeout(() => {
+        state.messages.clear();
+    }, timeout);
+}
+
+
+const error = (messages: Renderable<any>, seconds: number = 0) => activate('error', messages, seconds);
+
+error.response = (response: Response<any>) => {
+    if (response.ok) {
+        return;
+    }
+
+    error(
+        response.errors.map(({ message, path }) => {
+            if (!path) {
+                return message;
+            }
+
+            return `${String(path).split('.').join(' ')} ${message}`;
+        }),
+        5
+    );
+};
+
+const info = (messages: Renderable<any>, seconds: number = 0) => activate('info', messages, seconds);
+
+const success = (messages: Renderable<any>, seconds: number = 0) => activate('success', messages, seconds);
+
+
+const content = (
+    attributes: Attributes & { close?: Attributes, message?: Attributes },
+    { check, close, error }: { check: string, close: string, error: string }
+) => {
+    return html`
+        <div
+            class='alert anchor anchor--n card --flex-fill --flex-row --flex-vertical ${() => state.active && '--active'}'
+            style='--max-width: 640px;'
+            ${omit(attributes, OMIT)}
+        >
+            ${() => {
+                let type = state.type;
+
+                return html`
+                    <div class='--flex-vertical' style='${`--color: var(--color-${modifiers[type]}-400);`}'>
+                        ${icon({ class: '--margin-right --margin-600 --size-500' }, type === 'error' ? error : check)}
+                    </div>
+                `;
+            }}
+
+            <div class='--flex-fill --flex-column --gap-100 --padding-right --padding-800'>
+                ${() => {
+                    let message = attributes.message;
+
+                    return state.type && [...state.messages].map((content, i) => {
+                        if (typeof content === 'string') {
+                            return html`
+                                <p class='${i === 0 && '--text-crop-top'}' ${message}>
+                                    ${content}
+                                </p>
+                            `;
+                        }
+
+                        return html`
+                            <div class='--flex-start'>
+                                ${content}
+                            </div>
+                        `;
+                    });
+                }}
+            </div>
+
+            <div
+                class='alert-close button --padding-300'
+                onclick='${deactivate}'
+                ${attributes.close}
+            >
+                <div class="icon" style='--size: 14px;'>
+                    ${svg.sprite(close)}
+                </div>
+            </div>
+        </div>
+    `;
+};
+
+
+export default { content, deactivate, error, info, success };

package/src/components/alert/scss/index.scss

@@ -0,0 +1,50 @@
+@use '../../anchor/scss';
+@use '/lib';
+@use '/tokens';
+@use 'variables';
+
+.alert {
+    max-width: var(--max-width);
+    position: fixed;
+    width: calc(100% - (var(--margin-horizontal) * 2));
+    z-index: 11;
+
+
+    &.anchor--n {
+        @include tokens.state(inactive) {
+            transform: translate(50%, -100%);
+        }
+    }
+
+    &.anchor--ne {
+        @include tokens.state(inactive) {
+            transform: translateY(-100%);
+        }
+    }
+
+
+    &-close {
+        @include lib.position(absolute, vertical);
+        right: var(--size-500);
+        z-index: 0;
+    }
+
+    &-message {
+        opacity: 0;
+        transition:
+            opacity var(--transition-duration) ease-in-out,
+            transform var(--transition-duration) ease-in-out;
+
+        @include tokens.state(inactive) {
+            pointer-events: none;
+            position: absolute;
+            transform: translateX(calc(25% * -1));
+            left: 0;
+            top: 0;
+        }
+
+        @include tokens.state(active) {
+            opacity: 1;
+        }
+    }
+}

package/src/components/alert/scss/variables.scss

@@ -0,0 +1,3 @@
+.alert {
+    --max-width: 480px;
+}

package/src/components/anchor/scss/index.scss

@@ -20,6 +20,12 @@
     }
 
 
+    &--n,
+    &--s {
+        right: 50%;
+        transform: translateX(50%);
+    }
+
     &--ne,
     &--nw {
         top: var(--margin-vertical);
@@ -39,4 +45,12 @@
     &--sw {
         left: var(--margin-horizontal);
     }
+
+    &--n {
+        top: var(--margin-vertical);
+    }
+
+    &--s {
+        bottom: var(--margin-vertical);
+    }
 }

package/src/components/back/index.ts

@@ -0,0 +1,11 @@
+import { html, Attributes, Renderable } from '@esportsplus/template';
+import './scss/index.scss';
+
+
+export default ({ attributes, content }: { attributes?: Attributes, content?: Renderable<any> }) => {
+    return html`
+        <a class='back link --padding-0px --flex-vertical' ${attributes}>
+            ${content}
+        </a>
+    `;
+};

package/src/components/back/scss/index.scss

@@ -0,0 +1,17 @@
+@use '@esportsplus/ui/tokens.scss';
+
+
+.back {
+    &-arrow {
+        transform: rotate(-90deg);
+        transition:
+            color var(--transition-duration) ease-in-out,
+            transform var(--transition-duration) ease-in-out;
+    }
+
+    @include tokens.state(hover) {
+        .back-arrow {
+            transform: rotate(-90deg) translateY(-2px);
+        }
+    }
+}

package/src/components/index.ts

@@ -1,4 +1,6 @@
 export { default as accordion } from './accordion';
+export { default as alert } from './alert';
+export { default as back } from './back';
 export { default as button } from './button';
 export { default as checkbox } from './checkbox';
 export { default as clipboard } from './clipboard';