@synopackageland/ui 0.25.21 → 0.25.22

package/dist/modules/components/composite/tree-view/treeUtils.js

@@ -0,0 +1,71 @@
+function s(n) {
+  return n.map((r) => ({ ...r, children: r.children ? s(r.children) : r.children }));
+}
+function o(n, r) {
+  for (const t of n) {
+    if (t.id === r) return t;
+    const i = t.children ? o(t.children, r) : void 0;
+    if (i) return i;
+  }
+}
+function p(n) {
+  return n.flatMap((r) => [r, ...p(r.children ?? [])]);
+}
+function h(n, r) {
+  return n.id === r || (n.children ?? []).some((t) => h(t, r));
+}
+function a(n) {
+  return n.disabled ? [] : n.children?.length ? n.children.flatMap(a) : [n.id];
+}
+function u(n, r) {
+  for (const t of n) {
+    if (t.id === r) return n;
+    const i = t.children && u(t.children, r);
+    if (i) return i;
+  }
+}
+function m(n, r) {
+  const t = u(n, r);
+  if (!t) return;
+  const i = t.findIndex((e) => e.id === r);
+  i >= 0 && t.splice(i, 1);
+}
+function x(n, r, t, i) {
+  const e = u(n, r);
+  if (!e) return;
+  const f = e.findIndex((c) => c.id === r);
+  f < 0 || e.splice(t === "top" ? f : f + 1, 0, i);
+}
+function v(n, r, t, i) {
+  const e = o(n, r), f = o(n, t);
+  if (!e || !f || r === t || h(e, t)) return n;
+  const c = s(n);
+  m(c, r);
+  const d = o(c, r) ?? e;
+  if (i === "inner") {
+    const l = o(c, t);
+    return l ? (l.children = [...l.children ?? [], d], c) : n;
+  }
+  return x(c, t, i, d), c;
+}
+function b(n, r, t) {
+  const i = u(n, r);
+  if (!i) return n;
+  const e = i.findIndex((c) => c.id === r), f = e + t;
+  return e < 0 || f < 0 || f >= i.length ? n : v(n, r, i[f].id, t < 0 ? "top" : "bottom");
+}
+function N(n, r, t) {
+  const i = s(n), e = o(i, r);
+  return e && (e.children = t), i;
+}
+export {
+  s as cloneTree,
+  h as containsId,
+  a as enabledLeafIds,
+  o as findNode,
+  p as flattenNodes,
+  v as moveNode,
+  b as moveSibling,
+  u as parentList,
+  N as setChildren
+};

package/dist/modules/components/composite/upload-queue/UploadQueue.vue.js

@@ -0,0 +1,192 @@
+import { defineComponent as F, ref as R, computed as m, openBlock as t, createElementBlock as r, unref as a, createElementVNode as o, Fragment as x, renderList as U, createTextVNode as _, toDisplayString as u, createBlock as n, withCtx as f, createCommentVNode as p, createVNode as h, normalizeClass as S, withDirectives as E, normalizeStyle as H, vShow as L } from "vue";
+import { ChevronDown as M, X as A, Check as P, CircleAlert as Q, RotateCw as W } from "@lucide/vue";
+import { useUiText as X } from "../../../i18n/text.js";
+import { formatFileSize as j } from "../../../lib/fileSize.js";
+import G from "../../primitives/icon/FileTypeIcon.vue.js";
+import g from "../../primitives/button/IconButton.vue.js";
+import B from "../../primitives/button/Button.vue.js";
+const I = ["aria-label"], J = { class: "flex min-h-[var(--ui-chrome-height)] items-center gap-1 border-b border-[var(--ui-border-subtle)] ps-3 pe-2" }, K = {
+  class: "min-w-0 flex-1 font-semibold",
+  role: "status",
+  "aria-live": "polite",
+  "data-ui-upload-summary": ""
+}, O = { class: "whitespace-nowrap" }, Y = {
+  class: "m-0 max-h-72 list-none overflow-auto p-0",
+  "data-ui-upload-list": ""
+}, Z = ["data-status", "data-ui-upload-task"], ee = { class: "flex min-w-0 flex-1 flex-col gap-1" }, ae = { class: "flex min-w-0 items-baseline gap-2" }, te = ["title"], le = { class: "shrink-0 text-[length:var(--ui-font-size-sm)] tabular-nums text-[var(--ui-text-secondary)]" }, se = ["aria-label", "aria-valuenow"], ie = ["title"], fe = /* @__PURE__ */ F({
+  __name: "UploadQueue",
+  props: {
+    tasks: {},
+    processing: { default: 0 },
+    collapsible: { type: Boolean, default: !1 },
+    closable: { type: Boolean, default: !1 }
+  },
+  emits: ["retry", "cancel", "retryAll", "cancelAll", "close"],
+  setup(b, { emit: q }) {
+    const d = b, v = q, s = X(), c = R(!1), w = (l) => d.tasks.filter((i) => i.status === l).length, N = m(() => w("done")), z = m(() => w("failed")), T = m(() => d.tasks.filter((l) => l.status === "failed" && !l.final).length), C = m(() => d.tasks.some((l) => l.status === "queued" || l.status === "uploading")), V = m(() => d.tasks.filter((l) => l.status !== "canceled").length), D = m(() => [
+      s("Uploaded {done} of {total}", { done: N.value, total: V.value }),
+      d.processing ? s("Processing {count}", { count: d.processing }) : "",
+      z.value ? s("{count} failed", { count: z.value }) : ""
+    ].filter(Boolean)), $ = (l) => l.size ? Math.round(l.loaded / l.size * 100) : 0, k = { queued: "Waiting", uploading: "Uploading", done: "Uploaded", failed: "Upload failed", canceled: "Canceled" };
+    return (l, i) => (t(), r("section", {
+      class: "flex min-w-0 flex-col overflow-hidden rounded-[var(--ui-radius-popover)] border border-[var(--ui-border)] bg-[var(--ui-surface-raised)] text-[length:var(--ui-font-size)] text-[var(--ui-text)] shadow-[var(--ui-shadow-menu)]",
+      "aria-label": a(s)("Uploads"),
+      "data-ui-upload-queue": "",
+      "data-syno-pkg-land-ui": ""
+    }, [
+      o("header", J, [
+        o("span", K, [
+          (t(!0), r(x, null, U(D.value, (e, y) => (t(), r(x, { key: y }, [
+            _(u(y ? ", " : ""), 1),
+            o("span", O, u(e), 1)
+          ], 64))), 128))
+        ]),
+        T.value > 1 ? (t(), n(B, {
+          key: 0,
+          size: "sm",
+          variant: "ghost",
+          "data-ui-upload-retry-all": "",
+          onClick: i[0] || (i[0] = (e) => v("retryAll"))
+        }, {
+          default: f(() => [
+            _(u(a(s)("Retry all")), 1)
+          ]),
+          _: 1
+        })) : p("", !0),
+        C.value ? (t(), n(B, {
+          key: 1,
+          size: "sm",
+          variant: "ghost",
+          "data-ui-upload-cancel-all": "",
+          onClick: i[1] || (i[1] = (e) => v("cancelAll"))
+        }, {
+          default: f(() => [
+            _(u(a(s)("Cancel all")), 1)
+          ]),
+          _: 1
+        })) : p("", !0),
+        b.collapsible ? (t(), n(g, {
+          key: 2,
+          size: "sm",
+          label: c.value ? a(s)("Show uploads") : a(s)("Hide uploads"),
+          "aria-expanded": !c.value,
+          "data-ui-upload-fold": "",
+          onClick: i[2] || (i[2] = (e) => c.value = !c.value)
+        }, {
+          default: f(() => [
+            h(a(M), {
+              class: S(["size-4 transition-transform duration-[var(--ui-motion-fast)]", c.value && "rotate-180"]),
+              "aria-hidden": "true"
+            }, null, 8, ["class"])
+          ]),
+          _: 1
+        }, 8, ["label", "aria-expanded"])) : p("", !0),
+        b.closable && !C.value ? (t(), n(g, {
+          key: 3,
+          size: "sm",
+          label: a(s)("Close"),
+          "data-ui-upload-close": "",
+          onClick: i[3] || (i[3] = (e) => v("close"))
+        }, {
+          default: f(() => [
+            h(a(A), {
+              class: "size-4",
+              "aria-hidden": "true"
+            })
+          ]),
+          _: 1
+        }, 8, ["label"])) : p("", !0)
+      ]),
+      E(o("ul", Y, [
+        (t(!0), r(x, null, U(b.tasks, (e) => (t(), r("li", {
+          key: e.key,
+          class: "flex min-h-12 items-center gap-3 border-b border-[var(--ui-border-subtle)] px-3 py-2 last:border-b-0",
+          "data-status": e.status,
+          "data-ui-upload-task": e.key
+        }, [
+          h(G, {
+            name: e.name,
+            class: "shrink-0"
+          }, null, 8, ["name"]),
+          o("div", ee, [
+            o("div", ae, [
+              o("span", {
+                class: "min-w-0 flex-1 truncate",
+                title: e.name
+              }, u(e.name), 9, te),
+              o("span", le, u(a(j)(e.size)), 1)
+            ]),
+            e.status === "uploading" ? (t(), r("div", {
+              key: 0,
+              class: "h-1 overflow-hidden rounded-full bg-[var(--ui-surface-subtle)]",
+              role: "progressbar",
+              "aria-label": e.name,
+              "aria-valuemin": "0",
+              "aria-valuemax": "100",
+              "aria-valuenow": $(e)
+            }, [
+              o("div", {
+                class: "h-full rounded-full bg-[var(--ui-primary)] transition-[width] duration-[var(--ui-motion-fast)]",
+                style: H({ width: `${$(e)}%` })
+              }, null, 4)
+            ], 8, se)) : (t(), r("span", {
+              key: 1,
+              class: S(["flex min-w-0 items-center gap-1 text-[length:var(--ui-font-size-sm)]", e.status === "failed" ? "text-[var(--ui-danger-text)]" : "text-[var(--ui-text-secondary)]"]),
+              "data-ui-upload-status": ""
+            }, [
+              e.status === "done" ? (t(), n(a(P), {
+                key: 0,
+                class: "size-3.5 shrink-0 text-[var(--ui-success)]",
+                "aria-hidden": "true"
+              })) : e.status === "failed" ? (t(), n(a(Q), {
+                key: 1,
+                class: "size-3.5 shrink-0",
+                "aria-hidden": "true"
+              })) : p("", !0),
+              o("span", {
+                class: "min-w-0 truncate",
+                title: e.error
+              }, u(e.status === "failed" && e.error ? `${a(s)(k.failed)}: ${e.error}` : a(s)(k[e.status])), 9, ie)
+            ], 2))
+          ]),
+          !e.final && (e.status === "failed" || e.status === "canceled") ? (t(), n(g, {
+            key: 0,
+            size: "sm",
+            class: "[@media(pointer:coarse)]:size-11",
+            label: a(s)("Retry {name}", { name: e.name }),
+            "data-ui-upload-retry": "",
+            onClick: (y) => v("retry", e.key)
+          }, {
+            default: f(() => [
+              h(a(W), {
+                class: "size-4",
+                "aria-hidden": "true"
+              })
+            ]),
+            _: 1
+          }, 8, ["label", "onClick"])) : e.status === "queued" || e.status === "uploading" ? (t(), n(g, {
+            key: 1,
+            size: "sm",
+            class: "[@media(pointer:coarse)]:size-11",
+            label: a(s)("Cancel {name}", { name: e.name }),
+            "data-ui-upload-cancel": "",
+            onClick: (y) => v("cancel", e.key)
+          }, {
+            default: f(() => [
+              h(a(A), {
+                class: "size-4",
+                "aria-hidden": "true"
+              })
+            ]),
+            _: 1
+          }, 8, ["label", "onClick"])) : p("", !0)
+        ], 8, Z))), 128))
+      ], 512), [
+        [L, !c.value]
+      ])
+    ], 8, I));
+  }
+});
+export {
+  fe as default
+};

package/dist/modules/components/composite/upload-queue/UploadQueue2.vue.js

@@ -0,0 +1,4 @@
+import f from "./UploadQueue.vue.js";
+export {
+  f as default
+};

package/dist/modules/components/composite/virtual-list/VirtualList.vue.js

@@ -0,0 +1,192 @@
+import { defineComponent as Q, useTemplateRef as A, ref as L, reactive as X, computed as g, watch as z, onMounted as Z, onBeforeUnmount as ee, nextTick as M, openBlock as p, createElementBlock as b, normalizeClass as j, unref as w, createVNode as te, withCtx as le, createElementVNode as ie, normalizeStyle as P, Fragment as U, renderList as W, renderSlot as B, createCommentVNode as ne } from "vue";
+import oe from "../../primitives/scrollbar/Scrollbar.vue.js";
+import { cn as Y } from "../../../lib/cn.js";
+import { usePageWindow as ae } from "../../../composables/pageWindow.js";
+const re = ["data-ui-natural-height"], se = ["data-virtual-index"], ue = ["data-virtual-index"], me = /* @__PURE__ */ Q({
+  __name: "VirtualList",
+  props: {
+    items: { default: () => [] },
+    keyField: { default: "id" },
+    minSize: { default: 10 },
+    willResize: { type: Boolean, default: !0 },
+    bufferSize: { default: 0 },
+    disabled: { type: Boolean, default: !1 },
+    viewStyle: { type: [Boolean, null, String, Object, Array], default: void 0 }
+  },
+  setup(q, { expose: D }) {
+    const i = q, r = A("scrollbarRef"), O = A("root"), o = ae(O), f = L(0), d = L(0), x = X({}), u = /* @__PURE__ */ new Map();
+    function c(e) {
+      const t = e?.data, n = (t && typeof t == "object" ? t[i.keyField] : void 0) ?? e?.index;
+      return `${typeof n == "string" ? "k" : "i"}:${String(n)}`;
+    }
+    const _ = g(() => i.items.map((e) => x[c(e)] ?? i.minSize)), v = g(() => {
+      const e = new Array(i.items.length + 1);
+      e[0] = 0;
+      for (let t = 0; t < _.value.length; t += 1)
+        e[t + 1] = e[t] + _.value[t];
+      return e;
+    }), T = g(() => v.value[v.value.length - 1] ?? 0);
+    function E(e) {
+      const t = v.value, l = i.items.length;
+      let n = 0, s = l;
+      for (; n < s; ) {
+        const a = n + s >> 1;
+        t[a + 1] <= e ? n = a + 1 : s = a;
+      }
+      return Math.min(n, l);
+    }
+    const R = g(() => {
+      const e = i.items.length;
+      if (e === 0) return { start: 0, end: 0 };
+      const t = Math.max(0, i.bufferSize), l = Math.min(E(Math.max(0, f.value - t)), Math.max(0, e - 1)), n = Math.max(l + 1, E(f.value + d.value + t));
+      return { start: l, end: Math.min(n, e) };
+    }), V = g(
+      () => i.items.slice(R.value.start, R.value.end).map((e, t) => ({
+        item: e,
+        virtualIndex: R.value.start + t
+      }))
+    );
+    function G(e, t) {
+      t instanceof HTMLElement ? u.set(e, t) : u.delete(e);
+    }
+    function H() {
+      o.active.value || (d.value = r.value?.viewRect?.offsetHeight ?? 0);
+    }
+    z([o.active, o.top, o.height], ([e, t, l]) => {
+      e && (f.value = t, d.value = l);
+    });
+    function $() {
+      for (const [e, t] of u) {
+        const l = t.offsetHeight || t.getBoundingClientRect().height;
+        l > 0 && (x[c(i.items[e])] = l);
+      }
+    }
+    let m = null;
+    function I() {
+      if (!(!i.willResize || i.disabled || typeof ResizeObserver > "u")) {
+        m ??= new ResizeObserver((e) => {
+          let t = !1;
+          for (const l of e) {
+            const n = Number(l.target.dataset.virtualIndex), a = l.borderBoxSize?.[0]?.blockSize ?? l.target.offsetHeight;
+            if (!Number.isFinite(n) || !(a > 0)) continue;
+            const S = c(i.items[n]);
+            x[S] !== a && (x[S] = a, t = !0);
+          }
+          t && M(() => {
+            I(), r.value?.refresh();
+          });
+        }), m.disconnect();
+        for (const e of u.values()) m.observe(e);
+      }
+    }
+    let h = null;
+    function J() {
+      const e = r.value?.getScrollEl();
+      typeof ResizeObserver > "u" || !e || (h ??= new ResizeObserver(() => {
+        H(), $();
+      }), h.disconnect(), h.observe(e));
+    }
+    function C() {
+      o.active.value || (f.value = r.value?.getScrollTop() ?? 0);
+    }
+    function N(e) {
+      if (o.active.value) {
+        o.scrollTo(e.top ?? 0, e.behavior === "smooth" ? "smooth" : "auto");
+        return;
+      }
+      r.value?.scrollTo(e), C();
+    }
+    function F(e, t = "auto") {
+      if (e < 0 || e >= i.items.length) return !1;
+      const n = v.value[e], s = n + (_.value[e] ?? i.minSize), a = f.value, S = a + d.value;
+      let k;
+      return n < a ? k = n : s > S && (k = s - d.value), k === void 0 ? !1 : (N({ top: k, behavior: t }), !0);
+    }
+    function K(e, t = "auto") {
+      const l = i.items.findIndex((n) => c(n) === `${typeof e == "string" ? "k" : "i"}:${String(e)}`);
+      return l < 0 ? !1 : F(l, t);
+    }
+    async function y() {
+      r.value?.refresh(), await M(), H(), $(), J(), I();
+    }
+    return Z(() => {
+      y();
+    }), ee(() => {
+      m?.disconnect(), m = null, h?.disconnect(), h = null, u.clear();
+    }), z(
+      () => i.items,
+      () => {
+        u.clear(), y();
+      }
+    ), z(
+      () => V.value,
+      () => {
+        M(() => {
+          $(), I();
+        });
+      }
+    ), z(
+      () => i.disabled,
+      () => {
+        y();
+      }
+    ), D({
+      scrollTo: N,
+      ensureVisible: K,
+      ensureIndexVisible: F,
+      refresh: y,
+      getScrollEl: () => r.value?.getScrollEl() ?? null,
+      totalSize: T
+    }), (e, t) => (p(), b("div", {
+      ref_key: "root",
+      ref: O,
+      "data-syno-pkg-land-ui": "",
+      "data-virtual-list": "",
+      "data-ui-natural-height": w(o).natural.value ? "" : void 0,
+      class: j(w(Y)(w(o).natural.value ? "w-full" : "h-full w-full"))
+    }, [
+      te(oe, {
+        ref_key: "scrollbarRef",
+        ref: r,
+        "view-class": w(o).natural.value ? void 0 : "h-full",
+        "view-style": i.viewStyle,
+        onScroll: C
+      }, {
+        default: le(() => [
+          ie("div", {
+            "data-virtual-list-content": "",
+            class: j(w(Y)(i.disabled ? "" : "relative w-full")),
+            style: P(i.disabled ? void 0 : { height: `${T.value}px` })
+          }, [
+            i.disabled ? (p(!0), b(U, { key: 0 }, W(i.items, (l, n) => (p(), b("div", {
+              key: c(l),
+              "data-virtual-index": n
+            }, [
+              B(e.$slots, "default", {
+                item: l.data,
+                index: l.index
+              })
+            ], 8, se))), 128)) : (p(!0), b(U, { key: 1 }, W(V.value, (l) => (p(), b("div", {
+              key: c(l.item),
+              "data-virtual-index": l.virtualIndex,
+              class: "absolute left-0 top-0 w-full",
+              style: P({ transform: `translateY(${v.value[l.virtualIndex]}px)`, minHeight: `${i.minSize}px` }),
+              ref_for: !0,
+              ref: (n) => G(l.virtualIndex, n)
+            }, [
+              B(e.$slots, "default", {
+                item: l.item.data,
+                index: l.item.index
+              })
+            ], 12, ue))), 128))
+          ], 6),
+          i.items.length === 0 ? B(e.$slots, "empty", {}, void 0, void 0, 0) : ne("", !0)
+        ]),
+        _: 3
+      }, 8, ["view-class", "view-style"])
+    ], 10, re));
+  }
+});
+export {
+  me as default
+};

package/dist/modules/components/composite/virtual-list/VirtualList2.vue.js

@@ -0,0 +1,4 @@
+import f from "./VirtualList.vue.js";
+export {
+  f as default
+};