@esportsplus/ui 0.55.0 → 0.56.3

package/build/components/tag-input/scss/index.scss

@@ -0,0 +1,2 @@
+@layer components {.tag-input{--box-background:var(--color-grey-400);--box-border-radius:14px;--box-padding:6px;--box-shadow:var(--box-shadow-200);--chip-background:var(--color-white-300);--chip-background-active:var(--color-text-500);--chip-border-radius:var(--border-radius-400);--chip-color:var(--color-text-500);--chip-color-active:var(--color-white-300);--chip-height:32px;--chip-remove-color:var(--color-text-300);--chip-remove-color-hover:var(--color-text-500);--chip-remove-hover-background:oklch(from var(--color-text-500) l c h / .06);--chip-shadow:var(--box-shadow-100);--color:var(--color-text-500);--entry-min-width:120px;--font-size:var(--font-size-300);--gap:6px;--hint-color:var(--color-text-300);--hint-font-size:var(--font-size-200);--label-font-size:var(--font-size-300);--label-font-weight:var(--font-weight-500);--outline-color:var(--color-text-500);--placeholder-color:var(--color-text-300);--text-inset:10px;--width:min(440px, 100%);color:var(--color);width:var(--width);flex-direction:column;gap:8px;display:flex}.tag-input-box{background:var(--box-background);border-radius:var(--box-border-radius);box-shadow:var(--box-shadow);cursor:text;outline-offset:2px;padding:var(--box-padding)}.tag-input-box:has(.tag-input-field:focus-visible){outline:var(--border-width-500) solid var(--outline-color)}.tag-input-chip{color:var(--chip-color);font-size:var(--font-size);height:var(--chip-height);max-width:100%;padding-inline:var(--text-inset) 4px;transition:color var(--transition-duration) var(--transition-timing-function);align-items:center;gap:2px;display:flex;position:relative}.tag-input-chip.--active{color:var(--chip-color-active)}.tag-input-chip-body{background:var(--chip-background);border-radius:var(--chip-border-radius);box-shadow:var(--chip-shadow);transition:background-color var(--transition-duration) var(--transition-timing-function), box-shadow var(--transition-duration) var(--transition-timing-function);position:absolute;inset:0}.tag-input-chip.--active>.tag-input-chip-body{background:var(--chip-background-active);box-shadow:none}.tag-input-chip-button{border-radius:var(--border-radius-300);color:var(--chip-remove-color);cursor:pointer;height:24px;transition:background-color var(--transition-duration) var(--transition-timing-function), color var(--transition-duration) var(--transition-timing-function), scale var(--transition-duration) var(--transition-timing-function);background:0 0;border:0;outline:none;flex-shrink:0;justify-content:center;align-items:center;width:24px;padding:0;display:flex;position:relative}.tag-input-chip-button:after{content:"";position:absolute;inset:-4px}.tag-input-chip-button:hover{background:var(--chip-remove-hover-background);color:var(--chip-remove-color-hover)}.tag-input-chip-button:active{scale:.96}.tag-input-chip-button:focus-visible{outline:var(--border-width-500) solid var(--outline-color)}.tag-input-chip-button svg{width:14px;height:14px}.tag-input-chip.--active .tag-input-chip-button{color:oklch(from var(--chip-color-active) l c h/.7)}.tag-input-chip.--active .tag-input-chip-button:hover{color:var(--chip-color-active);background:0 0}.tag-input-chip-remove{display:flex;position:relative}.tag-input-chip-text{text-overflow:ellipsis;white-space:nowrap;position:relative;overflow:hidden}.tag-input-entry{font-size:var(--font-size);min-width:var(--entry-min-width);flex:1;display:flex}.tag-input-entry>.tag-input-field{--color-default:currentColor;font-size:inherit;height:var(--chip-height);min-width:0;min-height:0;padding:0 8px 0 var(--text-inset);outline:none}.tag-input-entry>.tag-input-field::placeholder{color:var(--placeholder-color)}.tag-input-ghost{pointer-events:none;position:absolute}.tag-input-hint{color:var(--hint-color);font-size:var(--hint-font-size);margin:0}.tag-input-label{font-size:var(--label-font-size);font-weight:var(--label-font-weight)}.tag-input-list{gap:var(--gap);flex-wrap:wrap;margin:0;padding:0;list-style:none;display:flex;position:relative}.tag-input-live{clip-path:inset(50%);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}@media (prefers-reduced-motion:reduce){.tag-input-chip-button:active{scale:1}}}
+/*$vite$:1*/

package/build/components/task-list/index.d.ts

@@ -0,0 +1,28 @@
+import { type Attributes, type Renderable } from '@esportsplus/template';
+import { type Progress } from '../log/index.js';
+import './scss/index.scss';
+type Chip = {
+    icon?: Renderable<unknown>;
+    label: string;
+};
+type Step = {
+    chips?: Chip[];
+    label: string;
+};
+type Task = {
+    icon?: Renderable<unknown>;
+    runningTitle?: string;
+    steps: Step[];
+    title: string;
+};
+declare const taskList: ({ collapseOnComplete, onComplete, startDelay, state, stepInterval, tasks, working: label, ...attributes }: Attributes & {
+    collapseOnComplete?: boolean | 'all';
+    onComplete?: VoidFunction;
+    startDelay?: number;
+    state?: Progress;
+    stepInterval?: number;
+    tasks: Task[];
+    working?: false | string;
+}) => DocumentFragment | Text;
+export default taskList;
+export type { Chip, Step, Task };

package/build/components/task-list/index.js

@@ -0,0 +1,107 @@
+import * as reactivity_u0 from '@esportsplus/reactivity';
+import * as template_u1 from '@esportsplus/template';
+import { chevron, guide, progress, working } from '../log/index.js';
+import './scss/index.scss';
+const template_095sm4d2 = template_u1.template(`<span class='task-list-chip'><!--$--><span class='task-list-chip-label'>`);
+const template_095sm4d6 = template_u1.template(`<span class='task-list-chip-icon' aria-hidden='true'>`);
+const template_095sm4d9 = template_u1.template(`<li class='log-row log-unit '><!--$--><div class='log-unit-content'><div class='task-list-step'><span>`);
+const template_095sm4df = template_u1.template(`<div class='task-list-task log-unit  '><div class='log-unit-content'><button class='task-list-header' type='button'><!--$--><span class='task-list-title'></span></button><div class='task-list-steps '><ul class='task-list-steps-content' aria-live='polite'>`);
+const template_095sm4dn = template_u1.template(`<span class='task-list-icon' aria-hidden='true'>`);
+const template_095sm4dq = template_u1.template(`<span class='task-list-title-text task-list-title-text--running '></span><span class='task-list-title-text task-list-title-text--final'>`);
+const template_095sm4du = template_u1.template(`<span class='task-list-title-text '>`);
+const template_095sm4dx = template_u1.template(`<div class='log task-list'><!--$-->`);
+class ReactiveObject_095sm4d0 extends reactivity_u0.ReactiveObject {
+    #open;
+    constructor(_p0) {
+        super(null);
+        this.#open = this[reactivity_u0.SIGNAL](_p0);
+    }
+    get open() {
+        return reactivity_u0.read(this.#open);
+    }
+    set open(_v0) {
+        reactivity_u0.write(this.#open, _v0);
+    }
+}
+function chip({ icon, label }) {
+    return (() => {
+        let root_095sm4d1 = template_095sm4d2(), element_095sm4d3 = root_095sm4d1.firstChild.firstChild, element_095sm4d4 = root_095sm4d1.firstChild.firstElementChild;
+        template_u1.slot(element_095sm4d3, icon && (() => {
+            let root_095sm4d5 = template_095sm4d6(), element_095sm4d7 = root_095sm4d5.firstChild;
+            template_u1.slot(element_095sm4d7, icon, 1);
+            return root_095sm4d5;
+        })());
+        template_u1.slot(element_095sm4d4, label, 1);
+        return root_095sm4d1;
+    })();
+}
+function step(context, { chips, label }, unit) {
+    return (() => {
+        let root_095sm4d8 = template_095sm4d9(), element_095sm4da = root_095sm4d8.firstChild, element_095sm4db = element_095sm4da.firstChild, element_095sm4dc = element_095sm4da.firstElementChild.firstElementChild.firstElementChild, element_095sm4dd = element_095sm4da.firstElementChild.firstElementChild;
+        template_u1.setList(element_095sm4da, 'class', () => context.revealed() > unit && '--active');
+        template_u1.setProperty(element_095sm4da, 'inert', () => context.revealed() <= unit);
+        template_u1.slot(element_095sm4db, guide());
+        template_u1.setList(element_095sm4dc, 'class', () => context.revealed() === unit + 1 && context.revealed() < context.total && 'log-shimmer');
+        template_u1.slot(element_095sm4dc, label, 1);
+        template_u1.slot(element_095sm4dd, chips?.map((value) => chip(value)), 2);
+        return root_095sm4d8;
+    })();
+}
+function task(context, { icon, runningTitle, steps, title }, head) {
+    let end = head + 1 + steps.length, state = new ReactiveObject_095sm4d0(null);
+    let done = () => context.revealed() >= end, open = () => state.open ?? !(context.collapse === 'all' ? context.revealed() >= context.total : context.collapse && done());
+    return (() => {
+        let root_095sm4de = template_095sm4df(), element_095sm4dg = root_095sm4de.firstChild, element_095sm4dh = element_095sm4dg.firstElementChild.firstElementChild, element_095sm4di = element_095sm4dh.firstChild, element_095sm4dj = element_095sm4dh.firstElementChild, element_095sm4dk = element_095sm4dh.nextElementSibling, element_095sm4dl = element_095sm4dk.firstElementChild;
+        template_u1.setList(element_095sm4dg, 'class', () => context.revealed() > head && '--active');
+        template_u1.setList(element_095sm4dg, 'class', () => done() && '--done');
+        template_u1.setProperty(element_095sm4dg, 'inert', () => context.revealed() <= head);
+        template_u1.setProperty(element_095sm4dh, 'aria-expanded', () => String(open()));
+        template_u1.delegate(element_095sm4dh, 'click', () => state.open = !open());
+        template_u1.slot(element_095sm4di, icon && (() => {
+            let root_095sm4dm = template_095sm4dn(), element_095sm4do = root_095sm4dm.firstChild;
+            template_u1.slot(element_095sm4do, icon, 1);
+            return root_095sm4dm;
+        })());
+        element_095sm4dj.appendChild(runningTitle && runningTitle !== title
+            ? (() => {
+                let root_095sm4dp = template_095sm4dq(), element_095sm4dr = root_095sm4dp.firstChild, element_095sm4ds = element_095sm4dr.nextSibling;
+                template_u1.setList(element_095sm4dr, 'class', () => !done() && 'log-shimmer');
+                template_u1.slot(element_095sm4dr, runningTitle, 1);
+                template_u1.slot(element_095sm4ds, title, 1);
+                return root_095sm4dp;
+            })()
+            : (() => {
+                let root_095sm4dt = template_095sm4du(), element_095sm4dv = root_095sm4dt.firstChild;
+                template_u1.setList(element_095sm4dv, 'class', () => !done() && 'log-shimmer');
+                template_u1.slot(element_095sm4dv, title, 1);
+                return root_095sm4dt;
+            })());
+        template_u1.slot(element_095sm4dh, chevron(), 2);
+        template_u1.setList(element_095sm4dk, 'class', () => open() && '--active');
+        template_u1.setProperty(element_095sm4dk, 'inert', () => !open());
+        template_u1.slot(element_095sm4dl, steps.map((value, i) => step(context, value, head + 1 + i)), 1);
+        return root_095sm4de;
+    })();
+}
+const taskList = ({ collapseOnComplete = false, onComplete, startDelay = 320, state, stepInterval = 850, tasks, working: label = 'Working', ...attributes }) => {
+    let heads = [], units = 0;
+    for (let i = 0, n = tasks.length; i < n; i++) {
+        heads.push(units);
+        units += 1 + tasks[i].steps.length;
+    }
+    let { revealed, start, total } = progress({
+        delay: (index) => index === 0 ? startDelay : stepInterval,
+        onComplete,
+        state,
+        units
+    }), context = { collapse: collapseOnComplete, revealed, total };
+    return (() => {
+        let root_095sm4dw = template_095sm4dx(), element_095sm4dy = root_095sm4dw.firstChild, element_095sm4dz = element_095sm4dy.firstChild;
+        template_u1.setProperties(element_095sm4dy, attributes);
+        template_u1.onconnect(element_095sm4dy, start);
+        template_u1.slot(element_095sm4dz, tasks.map((value, i) => task(context, value, heads[i])));
+        template_u1.slot(element_095sm4dy, label !== false && working(label, () => revealed() > 0 && revealed() < total), 2);
+        return root_095sm4dw;
+    })();
+};
+export default taskList;

package/build/components/task-list/scss/index.scss

@@ -0,0 +1,2 @@
+@layer components {.task-list{--chip-background:var(--color-grey-400);--chip-background-hover:var(--color-grey-500);--chip-border:color-mix(in oklab, var(--color-border-400) 50%, transparent);--chip-border-hover:var(--color-border-400);--icon-color:var(--color-text-300);--task-gap:5px;flex-direction:column;display:flex}.task-list-task+.task-list-task>.log-unit-content>:first-child,.task-list-task+.log-working>.log-unit-content>:first-child{margin-top:var(--task-gap)}.task-list-chip{background:var(--chip-background);border:1px solid var(--chip-border);vertical-align:middle;border-radius:6px;align-items:center;gap:4px;max-width:100%;margin-inline:3px 2px;padding:2px 6px;transition:background-color .15s,border-color .15s;display:inline-flex;translate:0 -1px}.task-list-chip:has(>.task-list-chip-icon){padding-inline-start:4px}.task-list-chip:hover{background:var(--chip-background-hover);border-color:var(--chip-border-hover)}.task-list-chip-icon{flex-shrink:0;justify-content:center;align-items:center;width:14px;height:14px;display:flex}.task-list-chip-icon>*{width:100%;height:100%}.task-list-chip-label{--line-height:calc(16 / 12);color:var(--text-primary);font-size:var(--font-size-small);font-weight:var(--font-weight-500);text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.task-list-header{border-radius:6px;align-items:center;gap:8px;width:100%;padding-block:2px;display:flex}.task-list-header:focus-visible{outline:2px solid var(--color-primary-400,var(--color-blue-400));outline-offset:-2px}.task-list-icon{color:var(--icon-color);flex-shrink:0;justify-content:center;align-items:center;width:16px;height:16px;display:flex}.task-list-icon>*{width:100%;height:100%}.task-list-step{padding-block:4px}.task-list-steps{opacity:0;transition:grid-template-rows .3s var(--soft), opacity .22s ease-out;grid-template-rows:0fr;display:grid}.task-list-steps.--active{opacity:1;grid-template-rows:1fr}.task-list-steps-content{min-width:0;min-height:0;margin-inline-start:8px;overflow:hidden}.task-list-steps-content:before{content:"";height:2px;display:block}.task-list-title{font-weight:var(--font-weight-500);flex:1;min-width:0;display:grid;overflow:hidden}.task-list-title-text{filter:blur();text-overflow:ellipsis;transition:filter .26s var(--soft), opacity .26s var(--soft), translate .26s var(--soft);white-space:nowrap;grid-area:1/1;overflow:hidden}.task-list-title-text--final{filter:blur(3px);opacity:0;translate:0 4px}.--done .task-list-title-text--final{filter:blur();opacity:1;translate:0}.--done .task-list-title-text--running{filter:blur(3px);opacity:0;translate:0 -4px}@media (prefers-reduced-motion:reduce){.task-list-steps,.task-list-title-text{transition:none}}}
+/*$vite$:1*/

package/build/components/tasklist/constants.d.ts

@@ -0,0 +1,2 @@
+declare const TASKLIST_CHECKBOX: unique symbol;
+export { TASKLIST_CHECKBOX };

package/build/components/tasklist/constants.js

@@ -0,0 +1,2 @@
+const TASKLIST_CHECKBOX = Symbol.for('@esportsplus/ui/tasklist.checkbox');
+export { TASKLIST_CHECKBOX };