@synopackageland/ui 0.25.21 → 0.25.22

package/dist/modules/components/composite/data-view/DataView.vue.js

@@ -0,0 +1,243 @@
+import { defineComponent as te, useTemplateRef as R, ref as K, computed as re, onMounted as ne, watch as le, openBlock as A, createElementBlock as V, normalizeClass as T, unref as c, createVNode as ae, mergeProps as oe, withCtx as se, renderSlot as p, createElementVNode as ue, Fragment as ie, renderList as ce } from "vue";
+import { usePageWindow as fe } from "../../../composables/pageWindow.js";
+import { scrollIntoViewWithinScroller as de } from "../../../lib/scroll.js";
+import me from "../../primitives/scrollbar/Scrollbar.vue.js";
+import { cn as $ } from "../../../lib/cn.js";
+import { useInsertedKeys as pe } from "../../../lib/motion.js";
+const ve = ["data-ui-natural-height"], ge = ["data-ui-row-new", "data-data-view-item", "data-selected", "data-disabled", "data-selectable", "onClick", "onContextmenu"], Ie = /* @__PURE__ */ te({
+  __name: "DataView",
+  props: {
+    items: { default: () => [] },
+    idProperty: { default: "id" },
+    singleSelect: { type: Boolean, default: !0 },
+    scrollbar: { default: () => ({}) },
+    defaultSelected: { type: [Boolean, Array], default: !1 },
+    focusInner: { type: Boolean, default: !0 }
+  },
+  emits: ["contextmenu", "selectionchange", "selected-change", "rowclear"],
+  setup(N, { expose: L, emit: O }) {
+    const n = N, v = O, B = R("scrollbarRef"), a = K([]), u = K(null), f = K(!1), d = /* @__PURE__ */ new Map();
+    let w = !1;
+    function H(e, t) {
+      t instanceof HTMLElement ? d.set(e, t) : d.delete(e);
+    }
+    function b(e) {
+      return e ?? {};
+    }
+    function s(e) {
+      return !!b(e).disabled;
+    }
+    function S(e, t) {
+      const r = b(e)[n.idProperty];
+      return typeof r == "string" || typeof r == "number" ? r : t;
+    }
+    function D(e, t) {
+      return S(e, t);
+    }
+    const W = pe(() => n.items.flatMap((e) => {
+      const t = b(e)[n.idProperty];
+      return typeof t == "string" || typeof t == "number" ? [String(t)] : [];
+    }));
+    function k(e) {
+      return a.value.includes(e);
+    }
+    const q = re(() => a.value.map((e) => S(n.items[e], e)));
+    function I() {
+      v("selected-change", [...q.value]), v("selectionchange", n.singleSelect ? a.value[0] ?? -1 : [...a.value]);
+    }
+    function m(e) {
+      const t = n.singleSelect ? e.slice(0, 1) : Array.from(new Set(e)).sort((r, l) => r - l);
+      a.value = t, I();
+    }
+    function _() {
+      a.value.length !== 0 && (a.value = [], u.value = null, I());
+    }
+    function z() {
+      a.value = [], u.value = null, f.value = !1, I(), v("rowclear");
+    }
+    function F() {
+      w = !0;
+      const e = n.items.length;
+      n.defaultSelected === !0 ? a.value = n.items.map((t, r) => r).filter((t) => !s(n.items[t])) : Array.isArray(n.defaultSelected) ? a.value = n.defaultSelected.filter(
+        (t) => Number.isInteger(t) && t >= 0 && t < e && !s(n.items[t])
+      ) : a.value = [], a.value = n.singleSelect ? a.value.slice(0, 1) : a.value;
+    }
+    function M(e, t, r) {
+      if (s(r)) return;
+      if (n.singleSelect) {
+        m([t]), u.value = t;
+        return;
+      }
+      const l = e.metaKey || e.ctrlKey;
+      if (e.shiftKey && u.value !== null) {
+        E(u.value, t, { keepSelection: l });
+        return;
+      }
+      if (l) {
+        const o = a.value.includes(t) ? a.value.filter((i) => i !== t) : [...a.value, t];
+        m(o);
+      } else
+        m([t]);
+      u.value = t;
+    }
+    function E(e, t, r) {
+      const l = n.items.length, o = Math.max(0, Math.min(e, t)), i = Math.min(l - 1, Math.max(e, t));
+      if (l === 0 || o > i) return !1;
+      const C = [];
+      for (let y = o; y <= i; y += 1)
+        s(n.items[y]) || C.push(y);
+      if (C.length === 0) return !1;
+      const ee = r?.keepSelection ? a.value : [];
+      return m([...ee, ...C]), f.value = !0, !0;
+    }
+    function U(e, t) {
+      const r = n.items.length;
+      let l = e + t;
+      for (; l >= 0 && l < r; ) {
+        if (!s(n.items[l])) return l;
+        l += t;
+      }
+      return null;
+    }
+    function j(e) {
+      const t = e.querySelectorAll(
+        'a[href], button:not([disabled]), input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])'
+      );
+      return t.length > 0 ? t[0] : null;
+    }
+    function g(e) {
+      d.get(e)?.focus();
+    }
+    function G(e) {
+      const t = n.items.findIndex((r, l) => S(r, l) === e);
+      return t < 0 ? !1 : (g(t), !0);
+    }
+    const P = R("root"), h = fe(P);
+    function J(e) {
+      const t = n.items.indexOf(e), r = t >= 0 ? d.get(t) : void 0;
+      return r ? (h.natural.value ? de(r) : B.value?.ensureVisible(r), !0) : !1;
+    }
+    function Q(e) {
+      const t = e.target;
+      return t instanceof HTMLElement ? t.closest("[data-data-view-item]") : null;
+    }
+    function X(e) {
+      const t = Q(e);
+      if (!t) return;
+      const r = Number(t.dataset.dataViewItem);
+      if (!Number.isInteger(r)) return;
+      const l = e.key === "ArrowDown" ? 1 : e.key === "ArrowUp" ? -1 : 0;
+      if (l !== 0) {
+        e.preventDefault();
+        const o = U(r, l);
+        if (o === null) return;
+        if (!n.singleSelect && e.shiftKey) {
+          const i = u.value ?? r;
+          E(i, o, { keepSelection: e.metaKey || e.ctrlKey }) && (u.value = i, g(o));
+          return;
+        }
+        f.value = !1, g(o);
+        return;
+      }
+      if (e.key === "Enter" || e.key === " ") {
+        if (e.target !== t) return;
+        e.preventDefault(), M(e, r, n.items[r]);
+        return;
+      }
+      if (e.key === "Escape") {
+        _(), g(r);
+        return;
+      }
+      e.key === "Tab" && f.value && (_(), f.value = !1);
+    }
+    function Y(e) {
+      if (!n.focusInner) return;
+      const t = e.currentTarget;
+      if (!(t instanceof HTMLElement)) return;
+      const r = j(t);
+      r && r !== e.target && r.focus();
+    }
+    function Z(e, t, r) {
+      e.defaultPrevented || M(e, t, r);
+    }
+    function x(e, t, r) {
+      v("contextmenu", r, t, e);
+    }
+    return ne(() => {
+      !w && n.items.length > 0 && F();
+    }), le(
+      () => n.items,
+      () => {
+        d.clear(), !w && n.items.length > 0 && F();
+        const e = a.value.filter((t) => t < n.items.length && !s(n.items[t]));
+        e.length !== a.value.length && m(e);
+      }
+    ), L({
+      clearSelectedRows: z,
+      ensureItemVisible: J,
+      clickItem: M,
+      focusItem: G,
+      selectRange: E,
+      clearSelection: _
+    }), (e, t) => (A(), V("div", {
+      ref_key: "root",
+      ref: P,
+      "data-syno-pkg-land-ui": "",
+      "data-data-view": "",
+      "data-ui-natural-height": c(h).natural.value ? "" : void 0,
+      class: T(c($)(c(h).natural.value ? "w-full" : "h-full w-full"))
+    }, [
+      ae(me, oe({
+        ref_key: "scrollbarRef",
+        ref: B
+      }, n.scrollbar, {
+        "view-class": c(h).natural.value ? void 0 : "h-full"
+      }), {
+        default: se(() => [
+          p(e.$slots, "outer-spin"),
+          p(e.$slots, "before"),
+          ue("div", {
+            "data-data-view-list": "",
+            onKeydown: X
+          }, [
+            (A(!0), V(ie, null, ce(n.items, (r, l) => (A(), V("div", {
+              key: D(r, l),
+              "data-ui-row-new": c(W).has(String(D(r, l))) ? "" : void 0,
+              ref_for: !0,
+              ref: (o) => H(l, o),
+              "data-data-view-item": l,
+              "data-selected": k(l) ? "true" : "false",
+              "data-disabled": s(r) ? "true" : void 0,
+              "data-selectable": s(r) ? "false" : "true",
+              tabindex: "-1",
+              class: T([
+                "outline-none transition-colors duration-[var(--ui-motion-fast)] ease-[var(--ui-motion-ease)]",
+                c($)(
+                  s(r) ? "cursor-default opacity-60" : "cursor-pointer hover:bg-[var(--ui-surface-hover)]",
+                  k(l) && "bg-[var(--ui-surface-selected)]",
+                  "focus-visible:shadow-[var(--ui-shadow-focus-inset)]"
+                )
+              ]),
+              onClick: (o) => Z(o, l, r),
+              onContextmenu: (o) => x(o, l, r),
+              onFocus: Y
+            }, [
+              p(e.$slots, "item", {
+                item: r,
+                index: l,
+                disabled: s(r),
+                selected: k(l)
+              })
+            ], 42, ge))), 128))
+          ], 32),
+          p(e.$slots, "after"),
+          p(e.$slots, "inner-spin")
+        ]),
+        _: 3
+      }, 16, ["view-class"])
+    ], 10, ve));
+  }
+});
+export {
+  Ie as default
+};

package/dist/modules/components/composite/data-view/DataView2.vue.js

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

package/dist/modules/components/composite/detail-list/DetailList.vue.js

@@ -0,0 +1,111 @@
+import { defineComponent as f, useSlots as $, computed as d, openBlock as l, createElementBlock as i, createElementVNode as c, normalizeStyle as x, Fragment as S, renderList as b, renderSlot as n, createCommentVNode as o, createVNode as N, createTextVNode as V, toDisplayString as L } from "vue";
+import T from "../table-cell/CellText.vue.js";
+import { useUiText as W } from "../../../i18n/text.js";
+const B = {
+  class: "ui-detail-list",
+  "data-syno-pkg-land-ui": ""
+}, C = ["aria-label", "data-leading"], D = ["data-key"], E = {
+  key: 0,
+  class: "ui-detail-list-leading",
+  "data-detail-leading": ""
+}, w = {
+  class: "ui-detail-list-text",
+  "data-detail-text": ""
+}, z = {
+  key: 1,
+  class: "ui-detail-list-trailing",
+  "data-detail-trailing": ""
+}, F = {
+  key: 0,
+  class: "ui-detail-list-line",
+  "data-detail-summary": ""
+}, I = {
+  key: 0,
+  class: "ui-detail-list-leading",
+  "data-detail-leading": ""
+}, M = {
+  class: "ui-detail-list-text ui-detail-list-summary",
+  "data-detail-text": ""
+}, U = {
+  key: 1,
+  class: "ui-detail-list-trailing",
+  "data-detail-trailing": ""
+}, H = /* @__PURE__ */ f({
+  __name: "DetailList",
+  props: {
+    items: {},
+    max: {},
+    summary: {},
+    label: {},
+    leadingWidth: {}
+  },
+  setup(g) {
+    const t = g, u = $(), v = W(), _ = d(() => t.max !== void 0 && t.max >= 0 ? Math.floor(t.max) : 1 / 0), y = d(() => t.items.slice(0, _.value)), e = d(() => t.items.slice(y.value.length)), h = d(() => t.summary ?? (e.value.length ? v("{count} more", { count: e.value.length }) : "")), k = d(() => !!(h.value || u.summary || u["summary-trailing"])), r = d(() => !!(u.leading || u["summary-leading"])), p = d(() => t.leadingWidth ? { "--ui-detail-list-leading": t.leadingWidth } : void 0);
+    return (a, j) => (l(), i("div", B, [
+      c("ul", {
+        class: "ui-detail-list-lines",
+        role: "list",
+        "aria-label": g.label,
+        "data-leading": r.value ? "" : void 0,
+        style: x(p.value)
+      }, [
+        (l(!0), i(S, null, b(y.value, (s, m) => (l(), i("li", {
+          key: s.key,
+          class: "ui-detail-list-line",
+          "data-detail-item": "",
+          "data-key": s.key
+        }, [
+          r.value ? (l(), i("div", E, [
+            n(a.$slots, "leading", {
+              item: s,
+              index: m
+            })
+          ])) : o("", !0),
+          c("div", w, [
+            n(a.$slots, "default", {
+              item: s,
+              index: m
+            }, () => [
+              N(T, {
+                text: s.text,
+                secondary: s.secondary,
+                layout: "inline"
+              }, null, 8, ["text", "secondary"])
+            ])
+          ]),
+          a.$slots.trailing ? (l(), i("div", z, [
+            n(a.$slots, "trailing", {
+              item: s,
+              index: m
+            })
+          ])) : o("", !0)
+        ], 8, D))), 128)),
+        k.value ? (l(), i("li", F, [
+          r.value ? (l(), i("div", I, [
+            n(a.$slots, "summary-leading", {
+              hidden: e.value,
+              count: e.value.length
+            })
+          ])) : o("", !0),
+          c("div", M, [
+            n(a.$slots, "summary", {
+              hidden: e.value,
+              count: e.value.length
+            }, () => [
+              V(L(h.value), 1)
+            ])
+          ]),
+          a.$slots["summary-trailing"] ? (l(), i("div", U, [
+            n(a.$slots, "summary-trailing", {
+              hidden: e.value,
+              count: e.value.length
+            })
+          ])) : o("", !0)
+        ])) : o("", !0)
+      ], 12, C)
+    ]));
+  }
+});
+export {
+  H as default
+};

package/dist/modules/components/composite/detail-list/DetailList2.vue.js

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

package/dist/modules/components/composite/disclosure-row/DisclosureRow.vue.js

@@ -0,0 +1,84 @@
+import { defineComponent as v, openBlock as i, createBlock as r, resolveDynamicComponent as b, withCtx as m, createElementBlock as l, renderSlot as a, createCommentVNode as s, createElementVNode as n, createTextVNode as d, toDisplayString as o, unref as w } from "vue";
+import { ChevronRight as k } from "@lucide/vue";
+const y = {
+  key: 0,
+  class: "ui-disclosure-row-leading",
+  "aria-hidden": "true"
+}, g = { class: "ui-disclosure-row-text" }, $ = {
+  class: "ui-disclosure-row-label",
+  "data-ui-disclosure-row-label": ""
+}, C = {
+  key: 0,
+  class: "ui-disclosure-row-description"
+}, B = {
+  key: 1,
+  class: "ui-disclosure-row-value",
+  "data-ui-disclosure-row-value": ""
+}, E = /* @__PURE__ */ v({
+  __name: "DisclosureRow",
+  props: {
+    label: {},
+    value: {},
+    description: {},
+    href: {},
+    target: {},
+    disabled: { type: Boolean, default: !1 },
+    chevron: { type: Boolean, default: !0 }
+  },
+  emits: ["click"],
+  setup(e, { emit: u }) {
+    const c = e, f = u;
+    function h(t) {
+      if (c.disabled) {
+        t.preventDefault();
+        return;
+      }
+      f("click", t);
+    }
+    return (t, D) => (i(), r(b(e.href ? "a" : "button"), {
+      type: e.href ? void 0 : "button",
+      href: e.href && !e.disabled ? e.href : void 0,
+      target: e.href ? e.target : void 0,
+      disabled: e.href ? void 0 : e.disabled,
+      "aria-disabled": e.href && e.disabled ? "true" : void 0,
+      tabindex: e.href && e.disabled ? -1 : void 0,
+      class: "ui-disclosure-row",
+      "data-ui-disclosure-row": "",
+      "data-syno-pkg-land-ui": "",
+      onClick: h
+    }, {
+      default: m(() => [
+        t.$slots.leading ? (i(), l("span", y, [
+          a(t.$slots, "leading")
+        ])) : s("", !0),
+        n("span", g, [
+          n("span", $, [
+            a(t.$slots, "default", {}, () => [
+              d(o(e.label), 1)
+            ])
+          ]),
+          e.description || t.$slots.description ? (i(), l("span", C, [
+            a(t.$slots, "description", {}, () => [
+              d(o(e.description), 1)
+            ])
+          ])) : s("", !0)
+        ]),
+        e.value !== void 0 || t.$slots.value ? (i(), l("span", B, [
+          a(t.$slots, "value", {}, () => [
+            d(o(e.value), 1)
+          ])
+        ])) : s("", !0),
+        e.chevron ? (i(), r(w(k), {
+          key: 2,
+          class: "ui-disclosure-row-chevron",
+          size: 16,
+          "aria-hidden": "true"
+        })) : s("", !0)
+      ]),
+      _: 3
+    }, 8, ["type", "href", "target", "disabled", "aria-disabled", "tabindex"]));
+  }
+});
+export {
+  E as default
+};

package/dist/modules/components/composite/disclosure-row/DisclosureRow2.vue.js

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

package/dist/modules/components/composite/empty-state/EmptyState.vue.js

@@ -0,0 +1,39 @@
+import { defineComponent as c, openBlock as t, createElementBlock as n, createBlock as a, resolveDynamicComponent as r, createCommentVNode as i, createElementVNode as l, toDisplayString as o, renderSlot as d } from "vue";
+const m = {
+  class: "flex min-h-28 flex-1 flex-col items-center justify-center px-6 py-6 text-center",
+  "data-syno-pkg-land-ui": ""
+}, u = {
+  key: 0,
+  class: "mb-3 flex size-12 items-center justify-center rounded-full bg-[var(--ui-surface-subtle)] text-[var(--ui-text-muted)]"
+}, f = { class: "m-0 text-[length:var(--ui-font-size-lg)] font-semibold text-[var(--ui-text)]" }, x = {
+  key: 1,
+  class: "mt-1 max-w-md text-[length:var(--ui-font-size-control)] leading-5 text-[var(--ui-text-secondary)]"
+}, h = {
+  key: 2,
+  class: "mt-4 flex items-center gap-2"
+}, v = /* @__PURE__ */ c({
+  __name: "EmptyState",
+  props: {
+    title: {},
+    description: {},
+    icon: {}
+  },
+  setup(e) {
+    return (s, y) => (t(), n("div", m, [
+      e.icon ? (t(), n("div", u, [
+        (t(), a(r(e.icon), {
+          class: "size-6",
+          "aria-hidden": "true"
+        }))
+      ])) : i("", !0),
+      l("h3", f, o(e.title), 1),
+      e.description ? (t(), n("p", x, o(e.description), 1)) : i("", !0),
+      s.$slots.actions ? (t(), n("div", h, [
+        d(s.$slots, "actions")
+      ])) : i("", !0)
+    ]));
+  }
+});
+export {
+  v as default
+};

package/dist/modules/components/composite/empty-state/EmptyState2.vue.js

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

package/dist/modules/components/composite/expand-all/ExpandAllButtons.vue.js

@@ -0,0 +1,64 @@
+import { defineComponent as x, useModel as b, computed as t, openBlock as z, createElementBlock as w, createVNode as s, unref as a, withCtx as m, mergeModels as g } from "vue";
+import { ChevronsUpDown as C, ChevronsDownUp as h } from "@lucide/vue";
+import f from "../../primitives/button/IconButton.vue.js";
+import { useLocalizedDefaults as L } from "../../../i18n/text.js";
+import { expandState as k, expandAll as y, collapseAll as _ } from "./expandAll.js";
+const E = {
+  class: "inline-flex shrink-0 items-center gap-[var(--ui-space-1)]",
+  "data-ui-expand-all": "",
+  "data-syno-pkg-land-ui": ""
+}, M = /* @__PURE__ */ x({
+  __name: "ExpandAllButtons",
+  props: /* @__PURE__ */ g({
+    shown: { default: () => [] },
+    grid: { default: void 0 },
+    size: { default: "sm" },
+    expandLabel: {},
+    collapseLabel: {}
+  }, {
+    modelValue: { default: () => [] },
+    modelModifiers: {}
+  }),
+  emits: ["update:modelValue"],
+  setup(i) {
+    const e = i, p = L(e, { expandLabel: "Expand all", collapseLabel: "Collapse all" }), r = b(i, "modelValue"), o = t(() => e.grid?.visibleRowKeys ?? e.shown), d = t(() => e.grid?.expandedRowKeys ?? r.value), u = t(() => k(d.value, o.value));
+    function c(n) {
+      e.grid ? e.grid.setExpandedKeys(n) : r.value = n;
+    }
+    return (n, l) => (z(), w("span", E, [
+      s(f, {
+        label: a(p).expandLabel,
+        size: e.size,
+        disabled: !u.value.canExpand,
+        "data-action": "expand-all",
+        onClick: l[0] || (l[0] = (v) => c(a(y)(d.value, o.value)))
+      }, {
+        default: m(() => [
+          s(a(C), {
+            class: "size-4",
+            "aria-hidden": "true"
+          })
+        ]),
+        _: 1
+      }, 8, ["label", "size", "disabled"]),
+      s(f, {
+        label: a(p).collapseLabel,
+        size: e.size,
+        disabled: !u.value.canCollapse,
+        "data-action": "collapse-all",
+        onClick: l[1] || (l[1] = (v) => c(a(_)(d.value, o.value)))
+      }, {
+        default: m(() => [
+          s(a(h), {
+            class: "size-4",
+            "aria-hidden": "true"
+          })
+        ]),
+        _: 1
+      }, 8, ["label", "size", "disabled"])
+    ]));
+  }
+});
+export {
+  M as default
+};

package/dist/modules/components/composite/expand-all/ExpandAllButtons2.vue.js

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

package/dist/modules/components/composite/expand-all/expandAll.js

@@ -0,0 +1,17 @@
+function a(n, t) {
+  const o = new Set(n);
+  return [...n, ...t.filter((e) => !o.has(e))];
+}
+function l(n, t) {
+  const o = new Set(t);
+  return n.filter((e) => !o.has(e));
+}
+function s(n, t) {
+  const o = new Set(n);
+  return { canExpand: t.some((e) => !o.has(e)), canCollapse: t.some((e) => o.has(e)) };
+}
+export {
+  l as collapseAll,
+  a as expandAll,
+  s as expandState
+};