@esportsplus/ui 0.51.7 → 0.54.0

package/src/components/select/scss/index.scss

@@ -10,15 +10,18 @@
     display: flex;
     flex-wrap: wrap;
     font-size: var(--font-size);
-    line-height: var(--line-height);
-    padding: var(--padding-vertical) calc((var(--padding-horizontal) * 2) + var(--arrow-size)) var(--padding-vertical) var(--padding-horizontal);
+    padding:
+        max(0px, calc(var(--padding-vertical) - var(--border-width)))
+        max(0px, calc((var(--padding-horizontal) * 2) + var(--arrow-size) - var(--border-width)))
+        max(0px, calc(var(--padding-vertical) - var(--border-width)))
+        max(0px, calc(var(--padding-horizontal) - var(--border-width)));
     position: relative;
     transition:
-        background var(--transition-duration) ease-in-out,
-        border-color var(--transition-duration) ease-in-out,
-        box-shadow var(--transition-duration) ease-in-out,
-        opacity var(--transition-duration) ease-in-out,
-        transform var(--transition-duration) ease-in-out;
+        background var(--transition-duration) var(--transition-timing-function),
+        border-color var(--transition-duration) var(--transition-timing-function),
+        box-shadow var(--transition-duration) var(--transition-timing-function),
+        opacity var(--transition-duration) var(--transition-timing-function),
+        transform var(--transition-duration) var(--transition-timing-function);
     width: 100%;
 
     @include tokens.state(active) {

package/src/components/select/scss/variables.scss

@@ -17,7 +17,6 @@
     --color-hover: var(--color-default);
     --color-pressed: var(--color-default);
     --font-size: var(--font-size-400);
-    --line-height: var(--line-height-400);
     --padding-horizontal: var(--size-400);
     --padding-vertical: var(--size-400);
 

package/src/components/sidebar/index.ts

@@ -1,9 +1,13 @@
-import scrollbar from '~/components/scrollbar';
+import { component, html } from '@esportsplus/template';
 import './scss/index.scss';
 
 
-export default scrollbar.bind({
-    attributes: {
-        class: 'sidebar'
+export default component(
+    function(this, attributes, content) {
+        return html`
+            <div class='sidebar --flex-column --scrollbar' ${this?.attributes} ${attributes}>
+                ${content}
+            </div>
+        `;
     }
-});
+);

package/src/components/sidebar/scss/index.scss

@@ -6,11 +6,10 @@
     @include lib.position(absolute, var(--margin-vertical) null var(--margin-vertical) null);
     cursor: default;
     height: calc(100% - (var(--margin-vertical) * 2));
-    overflow: hidden;
     transition:
-        max-width var(--transition-duration) ease-in-out,
-        opacity var(--transition-duration) ease-in-out,
-        transform var(--transition-duration) ease-in-out;
+        max-width var(--transition-duration) var(--transition-timing-function),
+        opacity var(--transition-duration) var(--transition-timing-function),
+        transform var(--transition-duration) var(--transition-timing-function);
     width: min(var(--width), calc(100% - (var(--margin-horizontal) * 2)));
     z-index: 9;
 

package/src/components/switch/index.ts

@@ -1,5 +1,4 @@
 import { factory } from '~/components/checkbox';
-import './scss/index.scss';
 
 
-export default factory('switch');
+export default factory('switch');

package/src/components/tabs/scss/index.scss

@@ -0,0 +1,62 @@
+@use '/tokens';
+@use 'variables';
+
+.tabs {
+    min-width: 0;
+
+    &-content {
+        cursor: default;
+        display: none;
+        flex-wrap: wrap;
+        justify-content: flex-start;
+        max-width: 100%;
+        min-width: 100%;
+        position: relative;
+        width: 100%;
+
+
+        @include tokens.state(active) {
+            display: flex;
+        }
+    }
+
+    &--slide,
+    &--scroll {
+        display: flex;
+        gap: var(--gap-vertical) var(--gap-horizontal);
+        transition: transform var(--transition-duration) var(--transition-timing-function);
+
+        > .tabs-content {
+            display: flex;
+            flex-shrink: 0;
+
+            @include tokens.state(inactive) {
+                opacity: var(--opacity);
+                pointer-events: none;
+            }
+        }
+    }
+
+    &--slide {
+        transform: translateX(calc(var(--i) * (100% + var(--gap-horizontal))));
+    }
+
+    // The track needs a definite height from its clipping parent.
+    &--scroll {
+        flex-direction: column;
+        height: 100%;
+        transform: translateY(calc(var(--i) * (100% + var(--gap-vertical))));
+
+        > .tabs-content {
+            flex-basis: 100%;
+            min-height: 100%;
+        }
+    }
+
+    @media (prefers-reduced-motion: reduce) {
+        &--slide,
+        &--scroll {
+            transition: none;
+        }
+    }
+}

package/src/components/tabs/scss/variables.scss

@@ -0,0 +1,4 @@
+.tabs {
+    --i: 0;
+    --opacity: 0.4;
+}

package/src/components/text/scss/index.scss

@@ -2,10 +2,17 @@
 
 .text {
     color: var(--color);
+    display: flex;
     font-size: var(--font-size);
     font-weight: var(--font-weight);
     line-height: var(--line-height);
+    gap: var(--gap-vertical) var(--gap-horizontal);
     position: relative;
-    transition: color var(--transition-duration) ease-in-out;
+    transition: color var(--transition-duration) var(--transition-timing-function);
     width: var(--width);
+
+
+    &.--text-truncate {
+        display: block;
+    }
 }

package/src/components/text/scss/variables.scss

@@ -1,7 +1,9 @@
 .text {
+    --border-width: 0px;
     --color: var(--color-default, inherit);
-    --font-size: var(--font-size-400);
-    --font-weight: var(--font-weight-400);
-    --line-height: var(--line-height-400);
+    --color-active: var(--color-default);
+    --color-default: var(--color-text-400);
+    --color-hover: var(--color-default);
+    --color-pressed: var(--color-default);
     --width: auto;
 }

package/src/components/textarea/index.ts

@@ -1,16 +1,48 @@
-import { html, type Attributes } from '@esportsplus/template';
+import { component, html, type Attributes } from '@esportsplus/template';
 import { reactive } from '@esportsplus/reactivity';
 import { omit } from '@esportsplus/utilities';
 import form from '~/components/form';
 import './scss/index.scss';
 
 
-const OMIT = ['state'];
+type Autoresize = { height: { max: `${number}px`, min: `${number}px` } };
 
 
-export default function(
+const OMIT = ['autoresize', 'state'];
+
+
+function autoresize({ height }: Autoresize) {
+    let attributes = {
+            class: 'textarea--autoresize',
+            style: `
+                --max-height: ${height.max};
+                --min-height: ${height.min};
+            `
+        };
+
+    if (CSS.supports('field-sizing', 'content')) {
+        return attributes;
+    }
+
+    return {
+        ...attributes,
+        class: `${attributes.class} textarea--autoresize-fallback`,
+        oninput: (e: InputEvent) => {
+            let element = e.target as HTMLTextAreaElement;
+
+            element.style.setProperty('--content-height', '0px');
+            element.style.setProperty('--content-height', `${element.scrollHeight}px`);
+        }
+    };
+}
+
+
+export default component(function(
     this: { attributes?: Attributes },
-    attributes: Attributes & { state?: { active: boolean, error: string } }
+    attributes: Attributes & {
+        autoresize?: Autoresize,
+        state?: { active: boolean, error: string }
+    }
 ) {
     let state = attributes.state || reactive({
             active: false,
@@ -22,6 +54,7 @@ export default function(
             class='textarea'
             ${this?.attributes && omit(this.attributes, OMIT)}
             ${omit(attributes, OMIT)}
+            ${attributes.autoresize && autoresize(attributes.autoresize)}
             ${{
                 class: () => state.active && '--active',
                 onfocusin: () => {
@@ -35,4 +68,4 @@ export default function(
             }}
         ></textarea>
     `;
-};
+});

package/src/components/textarea/scss/index.scss

@@ -1,32 +1,43 @@
 @use 'variables';
 
 .textarea {
-    align-items: center;
     background: var(--background);
     border: var(--border-width) var(--border-style) var(--border-color);
     border-radius: var(--border-radius);
     color: var(--color);
     cursor: text;
-    display: flex;
-    field-sizing: content;
     flex: 1 1 auto;
-    flex-wrap: wrap;
     font-size: var(--font-size);
-    line-height: var(--line-height);
     min-width: 0;
-    padding: var(--padding-vertical) var(--padding-horizontal);
+    padding:
+        max(0px, calc(var(--padding-vertical) - var(--border-width)))
+        max(0px, calc(var(--padding-horizontal) - var(--border-width)));
     position: relative;
     transition:
-        background var(--transition-duration) ease-in-out,
-        border-color var(--transition-duration) ease-in-out,
-        box-shadow var(--transition-duration) ease-in-out,
-        opacity var(--transition-duration) ease-in-out,
-        transform var(--transition-duration) ease-in-out;
-    white-space: normal;
+        background var(--transition-duration) var(--transition-timing-function),
+        border-color var(--transition-duration) var(--transition-timing-function),
+        box-shadow var(--transition-duration) var(--transition-timing-function),
+        opacity var(--transition-duration) var(--transition-timing-function),
+        transform var(--transition-duration) var(--transition-timing-function);
     width: 100%;
 
     &:invalid,
     &:required {
         box-shadow: none;
     }
-}
+
+
+    &--autoresize {
+        field-sizing: content;
+        height: auto;
+        max-height: var(--max-height);
+        min-height: var(--min-height);
+        overflow-y: auto;
+        resize: none;
+
+        &-fallback {
+            box-sizing: border-box;
+            height: calc(var(--content-height, var(--min-height)) + 2 * var(--border-width));
+        }
+    }
+}

package/src/components/textarea/scss/variables.scss

@@ -19,7 +19,6 @@
     --color-hover: var(--color-default);
     --color-pressed: var(--color-default);
     --font-size: var(--font-size-400);
-    --line-height: var(--line-height-400);
     --padding-horizontal: var(--size-400);
     --padding-vertical: var(--size-400);
     --size: var(--size-400);

package/src/components/toast/index.ts

@@ -0,0 +1,188 @@
+import { html } from '@esportsplus/template';
+import { reactive } from '@esportsplus/reactivity';
+import clipboard from '~/components/clipboard';
+import icon from '~/components/icon';
+import { buildVisibleToastLayout, remove, state, toast } from './manager';
+import { toasts } from './manager';
+import type { Toast } from './manager';
+import check from './svg/check.svg';
+import close from './svg/close.svg';
+import copy from './svg/copy.svg';
+import error from './svg/error.svg';
+import info from './svg/info.svg';
+import loading from './svg/loading.svg';
+import success from './svg/success.svg';
+import warning from './svg/warning.svg';
+import './scss/index.scss';
+
+
+type Position = 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right' | 'top-center' | 'bottom-center';
+
+
+type ToastElement = HTMLElement & { __toastObserver?: ResizeObserver };
+
+
+const ICONS = { error, info, loading, success, warning };
+
+const dismiss = toast.dismiss;
+
+
+function row(toast: Toast, position: Position) {
+    let swipe = reactive({ direction: '', x: 0, y: 0 }),
+        horizontal = position.endsWith('left') || position.endsWith('right'),
+        pointerId = -1,
+        pressed = false,
+        startX = 0,
+        startY = 0,
+        swiping = false,
+        top = position.startsWith('top');
+
+    const finish = () => {
+        pressed = false;
+
+        if (!swiping) {
+            return;
+        }
+
+        swiping = false;
+
+        if (Math.hypot(swipe.x, swipe.y) > 80) {
+            swipe.direction = Math.abs(swipe.x) > Math.abs(swipe.y)
+                ? (swipe.x < 0 ? 'left' : 'right')
+                : (swipe.y < 0 ? 'up' : 'down');
+
+            dismiss(toast.id);
+        }
+        else {
+            swipe.direction = '';
+            swipe.x = 0;
+            swipe.y = 0;
+        }
+    };
+
+    return html`
+        <div
+            class='${() => `toast toast--${toast.type}${toast.status === 'starting' ? ' toast--starting' : toast.status === 'ending' ? ' toast--ending' : ''}${swipe.x !== 0 || swipe.y !== 0 ? ' toast--swiping' : ''}`}'
+            ${{
+                style: () => {
+                    let item = buildVisibleToastLayout([...toasts]).items.find((i) => i.toast === toast),
+                        visibleIndex = item?.visibleIndex ?? 0, offsetY = item?.offsetY ?? 0;
+
+                    return `
+                        --toast-index:${visibleIndex};
+                        --toast-offset-y:${offsetY}px;
+                        --toast-height:${toast.height}px;
+                        --toast-swipe-x:${swipe.x}px;
+                        --toast-swipe-y:${swipe.y}px;`;
+                },
+                'data-swipe-direction': () => swipe.direction,
+                onconnect: (el: HTMLElement) => {
+                    // offsetHeight is the untransformed layout height; getBoundingClientRect
+                    // would include the collapsed scale() transform and report shrunken
+                    // heights, giving uneven offsets/spacing when the stack expands.
+                    let observer = new ResizeObserver(() => { toast.height = el.offsetHeight; });
+
+                    (el as ToastElement).__toastObserver = observer;
+                    observer.observe(el);
+                },
+                ondisconnect: (el: HTMLElement) => {
+                    (el as ToastElement).__toastObserver?.disconnect();
+                },
+                onpointerdown: (e: PointerEvent) => {
+                    pointerId = e.pointerId;
+                    pressed = true;
+                    startX = e.clientX;
+                    startY = e.clientY;
+                },
+                onpointermove: (e: PointerEvent) => {
+                    if (!pressed) {
+                        return;
+                    }
+
+                    let x = horizontal ? e.clientX - startX : 0,
+                        y = top ? Math.min(0, e.clientY - startY) : Math.max(0, e.clientY - startY);
+
+                    // Defer swipe + pointer capture until real movement, otherwise a
+                    // plain click's captured pointer redirects the click off the
+                    // close/action buttons and they never fire.
+                    if (!swiping) {
+                        if (Math.hypot(x, y) < 6) {
+                            return;
+                        }
+
+                        swiping = true;
+                        (e.currentTarget as HTMLElement).setPointerCapture(pointerId);
+                    }
+
+                    swipe.x = x;
+                    swipe.y = y;
+                },
+                onpointerup: finish,
+                onpointercancel: finish
+            }}
+        >
+            <div class='toast-content'>
+                ${toast.type !== 'message' ? icon({ class: 'toast-icon' }, ICONS[toast.type]) : ''}
+
+                <div class='--flex-column --flex-fill'>
+                    <div class='toast-title'>${toast.title}</div>
+                    ${toast.description && html`
+                        <div class='toast-description ${toast.type === 'error' && typeof toast.description === 'string' && toast.description.length > 180 && 'toast-description--clamp'}'>
+                            ${toast.description}
+                        </div>
+                    `}
+                </div>
+
+                ${toast.type === 'error' && typeof toast.description === 'string' && clipboard.onclick(
+                    {
+                        class: 'toast-copy button',
+                        value: String(toast.description)
+                    },
+                    (state) => icon(state.copied ? check : copy)
+                )}
+
+                ${toast.action && html`
+                    <div
+                        class='toast-action button button--primary'
+                        onclick=${() => {
+                            toast.action?.onclick();
+                            dismiss(toast.id);
+                        }}
+                    >
+                        ${toast.action?.label}
+                    </div>
+                `}
+            </div>
+
+            ${() => toast.dismissible && html`
+                <button class='toast-close' aria-label='Dismiss' onclick=${() => dismiss(toast.id)}>
+                    ${icon(close)}
+                </button>
+            `}
+        </div>
+    `;
+}
+
+
+const toaster = (options?: { position?: Position }) => {
+    let position = options?.position ?? 'top-right';
+
+    return html`
+        <div
+            class='toaster ${() => state.active ? '--active' : ''}'
+            data-position='${position}'
+            ${{
+                style: () => `--toast-frontmost-height:${buildVisibleToastLayout([...toasts]).frontmostHeight}px;`,
+                onmouseenter: () => { state.active = true; },
+                onmouseleave: () => { state.active = false; }
+            }}
+        >
+            ${html.reactive(toasts, (value: Toast) => row(value, position))}
+        </div>
+    `;
+};
+
+
+export default toaster;
+export { remove, toast };
+export type { Position };