@synopackageland/ui 0.25.20 → 0.25.22

package/dist/modules/_virtual/_plugin-vue_export-helper.js

@@ -0,0 +1,9 @@
+const s = (t, e) => {
+  const o = t.__vccOpts || t;
+  for (const [r, c] of e)
+    o[r] = c;
+  return o;
+};
+export {
+  s as default
+};

package/dist/modules/components/advanced-panel/AdvancePanelColumns.vue.js

@@ -0,0 +1,26 @@
+import { defineComponent as l, computed as m, openBlock as a, createElementBlock as t, Fragment as c, renderList as u, normalizeClass as i, unref as d, renderSlot as p } from "vue";
+import { cn as f } from "../../lib/cn.js";
+const _ = {
+  class: "grid gap-[var(--ui-space-4)] [grid-template-columns:repeat(auto-fit,minmax(220px,1fr))]",
+  "data-syno-pkg-land-ui": ""
+}, g = ["data-column"], x = /* @__PURE__ */ l({
+  __name: "AdvancePanelColumns",
+  props: {
+    columns: { default: () => [] }
+  },
+  setup(o) {
+    const r = o, s = m(() => r.columns.filter((e) => !!e?.name));
+    return (e, v) => (a(), t("div", _, [
+      (a(!0), t(c, null, u(s.value, (n) => (a(), t("div", {
+        key: n.name,
+        class: i(d(f)("min-w-0")),
+        "data-column": n.name
+      }, [
+        p(e.$slots, n.name)
+      ], 10, g))), 128))
+    ]));
+  }
+});
+export {
+  x as default
+};

package/dist/modules/components/advanced-panel/AdvancePanelColumns2.vue.js

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

package/dist/modules/components/advanced-panel/AdvancePanelForm.vue.js

@@ -0,0 +1,35 @@
+import { defineComponent as u, computed as d, openBlock as n, createElementBlock as a, Fragment as x, renderList as f, normalizeClass as r, unref as i, createElementVNode as l, renderSlot as o } from "vue";
+import { cn as s } from "../../lib/cn.js";
+const g = {
+  class: "@container m-0 flex flex-col gap-[var(--ui-space-2)]",
+  "data-syno-pkg-land-ui": ""
+}, v = ["data-field"], y = /* @__PURE__ */ u({
+  __name: "AdvancePanelForm",
+  props: {
+    fields: { default: () => [] }
+  },
+  setup(m) {
+    const p = m, c = d(() => p.fields.filter((t) => !!t?.name));
+    return (t, _) => (n(), a("dl", g, [
+      (n(!0), a(x, null, f(c.value, (e) => (n(), a("div", {
+        key: e.name,
+        class: r(i(s)("grid gap-x-[var(--ui-space-4)] gap-y-[var(--ui-space-1)] @min-[360px]:grid-cols-[minmax(120px,168px)_minmax(0,1fr)]", !e.multipleLine && "@min-[360px]:items-center")),
+        "data-field": e.name
+      }, [
+        l("dt", {
+          class: r(["text-[length:var(--ui-font-size)] text-[var(--ui-text-secondary)] @min-[360px]:text-right", i(s)(e.multipleLine && "@min-[360px]:pt-0.5")])
+        }, [
+          o(t.$slots, `${e.name}-label`)
+        ], 2),
+        l("dd", {
+          class: r(["m-0 min-w-0 text-[length:var(--ui-font-size)] leading-5 text-[var(--ui-text)]", i(s)(!e.multipleLine && "@min-[360px]:truncate")])
+        }, [
+          o(t.$slots, `${e.name}-value`)
+        ], 2)
+      ], 10, v))), 128))
+    ]));
+  }
+});
+export {
+  y as default
+};

package/dist/modules/components/advanced-panel/AdvancePanelForm2.vue.js

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

package/dist/modules/components/advanced-panel/AdvancePanelGrid.vue.js

@@ -0,0 +1,313 @@
+import { defineComponent as ie, ref as v, computed as D, onMounted as se, onBeforeUnmount as le, openBlock as n, createElementBlock as i, createElementVNode as d, Fragment as M, renderList as A, withKeys as S, normalizeClass as $, unref as s, renderSlot as w, createTextVNode as Q, toDisplayString as F, createBlock as b, createCommentVNode as p, withCtx as ce, createVNode as X, nextTick as ue } from "vue";
+import { useUiText as de } from "../../i18n/text.js";
+import { ChevronUp as fe, ChevronDown as ve, ChevronsUpDown as pe, Info as Y } from "@lucide/vue";
+import { cn as K } from "../../lib/cn.js";
+import he from "../primitives/tooltip/OverflowTooltip.vue.js";
+import ye from "../primitives/tooltip/Tooltip.vue.js";
+import { isSortable as L, defaultCellComparer as we, cellText as be, cellObject as H } from "./types.js";
+const ge = ["aria-rowcount", "aria-colcount"], ke = { role: "row" }, xe = ["aria-sort", "data-cell-key", "tabindex", "onFocus", "onKeydown"], me = ["title", "data-ui-tooltip-hint"], _e = ["aria-label", "data-sort-state", "onClick"], Ce = {
+  "data-cell-action": "",
+  tabindex: "-1",
+  class: "inline-flex size-4 shrink-0 items-center justify-center text-[var(--ui-text-muted)]",
+  "data-header-tip": ""
+}, Se = ["title"], $e = {
+  key: 0,
+  role: "row"
+}, ze = ["colspan"], Te = ["data-cell-key", "tabindex", "onFocus", "onKeydown"], Ee = {
+  key: 0,
+  class: "float-end ms-1 flex items-center",
+  "data-row-hover-action": ""
+}, De = ["innerHTML"], Me = ["title", "data-ui-tooltip-hint"], je = /* @__PURE__ */ ie({
+  __name: "AdvancePanelGrid",
+  props: {
+    columns: {},
+    data: {},
+    sortLabel: { type: Function },
+    localSortFunc: { type: Function }
+  },
+  emits: ["update:sort"],
+  setup(Z, { emit: ee }) {
+    const R = de(), l = Z, te = ee, z = v(null), g = v(null), h = v({ row: -1, col: 0 }), T = v(null), O = v({}), u = v(typeof window < "u" && !!window.matchMedia?.("(pointer: coarse)").matches), k = D(() => l.columns), x = D(() => Math.max(l.columns.length - 1, 0)), y = D(() => {
+      const e = g.value;
+      if (!e) return l.data;
+      const r = l.columns[e.columnIndex];
+      if (!r || !L(r)) return l.data;
+      const t = l.localSortFunc ? l.localSortFunc(r) : (o, c) => we(o, c, r.field), a = e.order === "DESC" ? -1 : 1;
+      return [...l.data].sort((o, c) => t(o, c) * a);
+    });
+    function re(e) {
+      const r = l.columns[e];
+      if (!r || !L(r)) return;
+      const t = g.value, a = t && t.columnIndex === e ? t.order === "ASC" ? "DESC" : "ASC" : r.sort?.defaultOrder ?? "ASC";
+      g.value = { columnIndex: e, order: a }, te("update:sort", { columnIndex: e, order: a });
+    }
+    function m(e) {
+      const r = g.value;
+      return !r || r.columnIndex !== e ? "none" : r.order === "ASC" ? "ascending" : "descending";
+    }
+    function j(e, r) {
+      return h.value.row === e && h.value.col === r;
+    }
+    function ae(e) {
+      return T.value === e;
+    }
+    function N(e) {
+      T.value = e;
+    }
+    function U() {
+      T.value = null;
+    }
+    function f(e, r) {
+      const t = {
+        row: Math.max(-1, Math.min(e, y.value.length - 1)),
+        col: Math.max(0, Math.min(r, x.value))
+      };
+      h.value = t, ue(() => {
+        z.value?.querySelector(`[data-cell-key="${t.row}:${t.col}"]`)?.focus();
+      });
+    }
+    function V(e, r, t) {
+      if (e.target !== e.currentTarget) return;
+      const a = y.value.length - 1;
+      switch (e.key) {
+        case "ArrowRight":
+          e.preventDefault(), f(r, t + 1);
+          break;
+        case "ArrowLeft":
+          e.preventDefault(), f(r, t - 1);
+          break;
+        case "ArrowDown":
+          e.preventDefault(), f(r + 1, t);
+          break;
+        case "ArrowUp":
+          e.preventDefault(), f(r - 1, t);
+          break;
+        case "Home":
+          e.preventDefault(), f(e.ctrlKey || e.metaKey ? -1 : r, 0);
+          break;
+        case "End":
+          e.preventDefault(), f(e.ctrlKey || e.metaKey ? a : r, x.value);
+          break;
+      }
+    }
+    function B(e) {
+      if (e.target !== e.currentTarget) return;
+      e.currentTarget.querySelector(
+        '[data-cell-action], button, a[href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
+      )?.focus();
+    }
+    function q(e) {
+      const r = e.currentTarget;
+      e.target !== r && (e.stopPropagation(), r.focus());
+    }
+    function oe(e) {
+      return be(e);
+    }
+    function I(e) {
+      return H(e)?.slot;
+    }
+    function P(e) {
+      return H(e)?.html;
+    }
+    function W(e) {
+      return H(e)?.tooltip;
+    }
+    function G(e) {
+      const r = e.tooltip;
+      if (r !== void 0)
+        return typeof r == "string" ? r : r.overflowOnly ? O.value[e.field] ? r.content : void 0 : r.content;
+    }
+    const _ = /* @__PURE__ */ new Map();
+    let E = null;
+    function ne(e, r) {
+      const t = r instanceof HTMLElement ? r : null;
+      t ? _.set(e, t) : _.delete(e);
+    }
+    function C() {
+      const e = {};
+      for (const [r, t] of _) e[r] = t.scrollWidth > t.clientWidth + 1;
+      O.value = e;
+    }
+    return se(() => {
+      if (C(), typeof ResizeObserver < "u") {
+        E = new ResizeObserver(C);
+        for (const e of _.values()) E.observe(e);
+      }
+      window.addEventListener("resize", C);
+    }), le(() => {
+      E?.disconnect(), window.removeEventListener("resize", C);
+    }), (e, r) => (n(), i("table", {
+      ref_key: "gridEl",
+      ref: z,
+      role: "grid",
+      class: "w-full table-fixed border-collapse text-[length:var(--ui-font-size)] text-[var(--ui-text)]",
+      "aria-rowcount": y.value.length + 1,
+      "aria-colcount": k.value.length,
+      "data-syno-pkg-land-ui": ""
+    }, [
+      d("thead", null, [
+        d("tr", ke, [
+          (n(!0), i(M, null, A(k.value, (t, a) => (n(), i("th", {
+            key: t.field,
+            role: "columnheader",
+            scope: "col",
+            "aria-sort": m(a),
+            "data-cell-key": `-1:${a}`,
+            tabindex: j(-1, a) ? 0 : -1,
+            class: $(["border-b border-[var(--ui-border)] bg-[var(--ui-surface-subtle)] px-2 py-1 text-left font-normal text-[var(--ui-text)] outline-none focus-visible:shadow-[var(--ui-shadow-focus-inset)]", s(K)(t.align === "right" && "text-right", t.align === "center" && "text-center")]),
+            onFocus: (o) => h.value = { row: -1, col: a },
+            onKeydown: [
+              (o) => V(o, -1, a),
+              S(B, ["enter"]),
+              S(q, ["esc"])
+            ]
+          }, [
+            d("div", {
+              class: $(s(K)("flex min-w-0 items-center gap-1", t.align === "right" && "justify-end", t.align === "center" && "justify-center"))
+            }, [
+              d("span", {
+                ref_for: !0,
+                ref: (o) => ne(t.field, o),
+                class: "min-w-0 truncate",
+                title: u.value ? void 0 : G(t),
+                "data-ui-tooltip-hint": u.value ? G(t) : void 0
+              }, [
+                w(e.$slots, `header-${t.field}`, { column: t }, () => [
+                  Q(F(t.title), 1)
+                ])
+              ], 8, me),
+              s(L)(t) ? (n(), i("button", {
+                key: 0,
+                type: "button",
+                "data-cell-action": "",
+                tabindex: "-1",
+                class: "inline-flex size-5 shrink-0 items-center justify-center rounded-[var(--ui-radius-inner)] text-[var(--ui-text-secondary)] outline-none hover:bg-[var(--ui-surface-hover)] focus-visible:shadow-[var(--ui-shadow-focus)]",
+                "aria-label": l.sortLabel?.(t.title) ?? s(R)("Sort by {name}", { name: t.title }),
+                "data-sort-state": m(a),
+                onClick: (o) => re(a)
+              }, [
+                m(a) === "ascending" ? (n(), b(s(fe), {
+                  key: 0,
+                  class: "size-3.5",
+                  "aria-hidden": "true"
+                })) : m(a) === "descending" ? (n(), b(s(ve), {
+                  key: 1,
+                  class: "size-3.5",
+                  "aria-hidden": "true"
+                })) : (n(), b(s(pe), {
+                  key: 2,
+                  class: "size-3.5",
+                  "aria-hidden": "true"
+                }))
+              ], 8, _e)) : p("", !0),
+              t.tip && u.value ? (n(), b(ye, {
+                key: 1,
+                content: t.tip,
+                "open-on-tap": ""
+              }, {
+                default: ce(() => [
+                  d("span", Ce, [
+                    X(s(Y), {
+                      class: "size-3.5",
+                      "aria-hidden": "true"
+                    })
+                  ])
+                ]),
+                _: 1
+              }, 8, ["content"])) : t.tip ? (n(), i("span", {
+                key: 2,
+                "data-cell-action": "",
+                tabindex: "-1",
+                class: "inline-flex size-4 shrink-0 items-center justify-center text-[var(--ui-text-muted)]",
+                title: t.tip,
+                "data-header-tip": ""
+              }, [
+                X(s(Y), {
+                  class: "size-3.5",
+                  "aria-hidden": "true"
+                })
+              ], 8, Se)) : p("", !0)
+            ], 2)
+          ], 42, xe))), 128))
+        ])
+      ]),
+      d("tbody", null, [
+        y.value.length ? p("", !0) : (n(), i("tr", $e, [
+          d("td", {
+            colspan: Math.max(k.value.length, 1),
+            class: "px-2 py-2 text-center text-[length:var(--ui-font-size)] text-[var(--ui-text-secondary)]",
+            "data-grid-empty": ""
+          }, [
+            w(e.$slots, "empty-body", {}, () => [
+              Q(F(s(R)("No data")), 1)
+            ])
+          ], 8, ze)
+        ])),
+        (n(!0), i(M, null, A(y.value, (t, a) => (n(), i("tr", {
+          key: a,
+          role: "row",
+          class: "group border-b border-[var(--ui-border-subtle)] last:border-b-0 hover:bg-[var(--ui-surface-hover)]"
+        }, [
+          (n(!0), i(M, null, A(k.value, (o, c) => (n(), i("td", {
+            key: o.field,
+            role: "gridcell",
+            "data-cell-key": `${a}:${c}`,
+            tabindex: j(a, c) ? 0 : -1,
+            class: $(["relative px-2 py-1 align-middle outline-none focus-visible:shadow-[var(--ui-shadow-focus-inset)]", s(K)(o.align === "right" && "text-right", o.align === "center" && "text-center")]),
+            onFocus: (J) => h.value = { row: a, col: c },
+            onKeydown: [
+              (J) => V(J, a, c),
+              S(B, ["enter"]),
+              S(q, ["esc"])
+            ]
+          }, [
+            u.value && c === x.value && e.$slots["row-hover-action"] ? (n(), i("div", Ee, [
+              w(e.$slots, "row-hover-action", {
+                item: t,
+                column: o,
+                index: a,
+                activate: () => N(a),
+                deactivate: U
+              })
+            ])) : p("", !0),
+            I(t[o.field]) ? w(e.$slots, I(t[o.field]), {
+              cell: t[o.field],
+              item: t,
+              column: o,
+              index: a
+            }, void 0, void 0, 1) : P(t[o.field]) ? (n(), i("span", {
+              key: 2,
+              innerHTML: P(t[o.field])
+            }, null, 8, De)) : (n(), i("span", {
+              key: 3,
+              class: "block truncate",
+              title: u.value ? void 0 : W(t[o.field]),
+              "data-ui-tooltip-hint": u.value ? W(t[o.field]) : void 0
+            }, F(oe(t[o.field])), 9, Me)),
+            !u.value && c === x.value && e.$slots["row-hover-action"] ? (n(), i("div", {
+              key: 4,
+              class: $(["absolute top-1/2 right-1 -translate-y-1/2 transition-opacity duration-[var(--ui-motion-fast)] group-hover:opacity-100 group-focus-within:opacity-100", ae(a) ? "opacity-100" : "opacity-0"]),
+              "data-row-hover-action": ""
+            }, [
+              w(e.$slots, "row-hover-action", {
+                item: t,
+                column: o,
+                index: a,
+                activate: () => N(a),
+                deactivate: U
+              })
+            ], 2)) : p("", !0)
+          ], 42, Te))), 128))
+        ]))), 128))
+      ]),
+      u.value ? (n(), b(he, {
+        key: 0,
+        target: z.value,
+        "open-on-tap": ""
+      }, null, 8, ["target"])) : p("", !0)
+    ], 8, ge));
+  }
+});
+export {
+  je as default
+};

package/dist/modules/components/advanced-panel/AdvancePanelGrid2.vue.js

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

package/dist/modules/components/advanced-panel/types.js

@@ -0,0 +1,19 @@
+function b(t) {
+  return t.sort?.disable === !1;
+}
+function s(t) {
+  return typeof t == "object" && t !== null ? t : void 0;
+}
+function i(t) {
+  return t == null ? "" : typeof t == "object" ? t.content ?? t.html ?? "" : String(t);
+}
+function m(t, f, n) {
+  const r = i(t[n]), e = i(f[n]), o = Number(r), u = Number(e);
+  return r !== "" && e !== "" && Number.isFinite(o) && Number.isFinite(u) ? o - u : r.localeCompare(e);
+}
+export {
+  s as cellObject,
+  i as cellText,
+  m as defaultCellComparer,
+  b as isSortable
+};

package/dist/modules/components/app/app-action-bar/AppActionBar.vue.js

@@ -0,0 +1,46 @@
+import { defineComponent as f, computed as b, openBlock as i, createElementBlock as a, renderSlot as p, createVNode as l, createCommentVNode as g, createElementVNode as k } from "vue";
+import u from "../../composite/footbar/FootbarButtons.vue.js";
+import { groupFootbarButtons as v } from "../../composite/footbar/types.js";
+import { provideButtonKind as B } from "../../../composables/buttonKind.js";
+const x = {
+  "data-ui-footer-bar": "",
+  class: "flex min-h-12 flex-wrap items-center gap-x-2 gap-y-2 border-t border-[var(--ui-border)] bg-[var(--ui-surface)] px-4 py-2",
+  "data-syno-pkg-land-ui": ""
+}, y = {
+  key: 0,
+  class: "flex min-w-0 items-center gap-2 [&>span]:truncate"
+}, C = { class: "ml-auto flex min-w-0 flex-wrap items-center justify-end gap-2" }, V = /* @__PURE__ */ f({
+  __name: "AppActionBar",
+  props: {
+    buttons: { default: () => [] }
+  },
+  emits: ["click-button"],
+  setup(m, { emit: c }) {
+    const d = m;
+    B("action");
+    const r = c, n = b(() => v(d.buttons));
+    return (s, t) => (i(), a("footer", x, [
+      s.$slots.leading || n.value.left.length ? (i(), a("div", y, [
+        p(s.$slots, "leading"),
+        l(u, {
+          buttons: n.value.left,
+          onClickButton: t[0] || (t[0] = (o, e) => r("click-button", o, e))
+        }, null, 8, ["buttons"])
+      ])) : g("", !0),
+      k("div", C, [
+        l(u, {
+          buttons: n.value.center,
+          onClickButton: t[1] || (t[1] = (o, e) => r("click-button", o, e))
+        }, null, 8, ["buttons"]),
+        l(u, {
+          buttons: n.value.right,
+          onClickButton: t[2] || (t[2] = (o, e) => r("click-button", o, e))
+        }, null, 8, ["buttons"]),
+        p(s.$slots, "default")
+      ])
+    ]));
+  }
+});
+export {
+  V as default
+};

package/dist/modules/components/app/app-action-bar/AppActionBar2.vue.js

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

package/dist/modules/components/app/app-layout/AppBrand.vue.js

@@ -0,0 +1,41 @@
+import { defineComponent as u, openBlock as t, createBlock as d, resolveDynamicComponent as h, normalizeProps as f, guardReactiveProps as p, unref as y, withCtx as v, createElementBlock as n, createCommentVNode as o, normalizeClass as b, toDisplayString as k } from "vue";
+import { useUiText as B } from "../../../i18n/text.js";
+const C = ["src"], w = /* @__PURE__ */ u({
+  __name: "AppBrand",
+  props: {
+    name: {},
+    icon: {},
+    collapsed: { type: Boolean },
+    interactive: { type: Boolean }
+  },
+  emits: ["activate"],
+  setup(e, { emit: i }) {
+    const c = i, r = B(), l = (m, { slots: a }) => a.default?.();
+    return (m, a) => (t(), d(h(e.interactive ? "button" : l), f(p(e.interactive ? {
+      type: "button",
+      "data-ui-brand-action": "",
+      "aria-label": y(r)("Go to home"),
+      onClick: (s) => c("activate", s)
+    } : {})), {
+      default: v(() => [
+        e.icon ? (t(), n("img", {
+          key: 0,
+          "data-ui-brand-icon": "",
+          src: e.icon,
+          alt: "",
+          width: "28",
+          height: "28"
+        }, null, 8, C)) : o("", !0),
+        e.name ? (t(), n("span", {
+          key: 1,
+          "data-ui-brand-name": "",
+          class: b(e.collapsed ? "sr-only" : "min-w-0 truncate")
+        }, k(e.name), 3)) : o("", !0)
+      ]),
+      _: 1
+    }, 16));
+  }
+});
+export {
+  w as default
+};

package/dist/modules/components/app/app-layout/AppBrand2.vue.js

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