@synopackageland/ui 0.25.21 → 0.25.22

package/dist/modules/components/composite/overflow-toolbar/OverflowToolbar.vue.js

@@ -0,0 +1,306 @@
+import { defineComponent as ae, ref as d, computed as g, onMounted as se, onBeforeUnmount as de, watch as G, openBlock as o, createElementBlock as s, createElementVNode as M, toDisplayString as f, renderSlot as _, createCommentVNode as S, normalizeStyle as q, unref as r, Fragment as v, renderList as N, normalizeClass as k, createBlock as m, withCtx as a, createVNode as u, mergeProps as T, createTextVNode as y, nextTick as ue } from "vue";
+import { useUiText as fe } from "../../../i18n/text.js";
+import { ChevronDown as me, ChevronRight as ve } from "@lucide/vue";
+import { DropdownMenuRoot_default as ce } from "../../../vendor/reka-ui/dist/DropdownMenu/DropdownMenuRoot.js";
+import { DropdownMenuContent_default as pe } from "../../../vendor/reka-ui/dist/DropdownMenu/DropdownMenuContent.js";
+import { DropdownMenuItem_default as j } from "../../../vendor/reka-ui/dist/DropdownMenu/DropdownMenuItem.js";
+import { DropdownMenuPortal_default as Y } from "../../../vendor/reka-ui/dist/DropdownMenu/DropdownMenuPortal.js";
+import { DropdownMenuSeparator_default as Z } from "../../../vendor/reka-ui/dist/DropdownMenu/DropdownMenuSeparator.js";
+import { DropdownMenuSub_default as we } from "../../../vendor/reka-ui/dist/DropdownMenu/DropdownMenuSub.js";
+import { DropdownMenuSubContent_default as he } from "../../../vendor/reka-ui/dist/DropdownMenu/DropdownMenuSubContent.js";
+import { DropdownMenuSubTrigger_default as be } from "../../../vendor/reka-ui/dist/DropdownMenu/DropdownMenuSubTrigger.js";
+import { DropdownMenuTrigger_default as ge } from "../../../vendor/reka-ui/dist/DropdownMenu/DropdownMenuTrigger.js";
+import $ from "../../primitives/button/Button.vue.js";
+import _e from "../../primitives/dropdown-menu/DropdownMenu.vue.js";
+import { skipAutoFocusOnTouch as ke } from "../../primitives/popover/overlay.js";
+import { useFloating as ye, FLOATING_SIZE_CLASS as H } from "../../primitives/popover/floating.js";
+import { ITEM_GAP as J, computeOverflowFit as xe } from "./overflow.js";
+const Ie = {
+  key: 0,
+  class: "flex shrink-0 items-center gap-1"
+}, Me = ["data-overflow-item"], Se = ["data-overflow-item"], Te = { class: "min-w-0 flex-1" }, K = "z-[1450] min-w-[min(11rem,var(--reka-popper-available-width))] overflow-y-auto rounded-[var(--ui-radius-popover)] border border-[var(--ui-border)] bg-[var(--ui-surface-raised)] p-1 shadow-[var(--ui-shadow-menu)] outline-none", E = "flex min-h-[var(--ui-menu-row-height)] select-none items-center gap-2 rounded-[var(--ui-radius-inner)] px-2 py-1 text-[length:var(--ui-font-size)] text-[var(--ui-text)] outline-none data-[highlighted]:bg-[var(--ui-primary-soft)] data-[disabled]:opacity-40 [overflow-wrap:anywhere]", qe = /* @__PURE__ */ ae({
+  __name: "OverflowToolbar",
+  props: {
+    items: { default: () => [] },
+    minVisibleItemsNum: { default: 1 },
+    moreMenu: { default: () => ({}) },
+    getMoreButtonText: {}
+  },
+  emits: ["clickItem"],
+  setup(Q, { emit: X }) {
+    const A = fe(), i = Q, x = X, c = d(null), I = d(null), O = d(null), z = d(null), D = d(null), C = d(!1), V = ye(() => c.value ?? void 0, () => C.value), p = d(Number.POSITIVE_INFINITY), R = d(!1), F = d(0), L = d(0), U = d(0), ee = g(() => i.items.slice(0, p.value)), B = g(() => i.items.slice(p.value)), te = g(
+      () => i.getMoreButtonText ? i.getMoreButtonText({ visibleItems: ee.value, overflowItems: B.value }) : A("More")
+    ), W = g(
+      () => i.getMoreButtonText ? i.getMoreButtonText({ visibleItems: [], overflowItems: i.items }) : A("More")
+    );
+    let w = null;
+    function P(t) {
+      return t < p.value ? "shrink-0" : "shrink-0 invisible";
+    }
+    function oe() {
+      return c.value?.querySelector("[data-overflow-more]") ?? null;
+    }
+    function h() {
+      const t = I.value;
+      if (!t) return;
+      if (F.value = O.value?.getBoundingClientRect().width ?? 0, L.value = z.value?.getBoundingClientRect().width ?? 0, U.value = D.value?.getBoundingClientRect().width ?? 0, !i.items.length) {
+        p.value = 0, R.value = !1;
+        return;
+      }
+      const n = Array.from(t.querySelectorAll("[data-overflow-item]")).map(
+        (l) => l.getBoundingClientRect().width
+      ), e = xe({
+        widths: i.items.map((l, b) => n[b] ?? 0),
+        availableWidth: t.getBoundingClientRect().width,
+        moreWidth: F.value,
+        gap: J,
+        minVisibleItems: i.minVisibleItemsNum,
+        dividers: i.items.map((l) => l.type === "divider")
+      });
+      p.value = e.visibleCount, R.value = e.needsMore;
+    }
+    function re() {
+      ue().then(h);
+    }
+    se(() => {
+      window.addEventListener("resize", h), typeof ResizeObserver < "u" && (w = new ResizeObserver(h), c.value && w.observe(c.value), I.value && w.observe(I.value)), h();
+    }), de(() => {
+      window.removeEventListener("resize", h), w?.disconnect(), w = null;
+    }), G([W, () => i.items, () => i.minVisibleItemsNum, () => i.getMoreButtonText], re), G(
+      () => B.value.map((t) => t.id).join("|"),
+      () => {
+        document.activeElement?.closest("[data-overflow-item]")?.classList.contains("invisible") && oe()?.focus();
+      },
+      { flush: "post" }
+    );
+    function ie(t) {
+      return (t.menuItems ?? []).map(
+        (n) => n.type === "divider" ? { type: "separator", key: n.id } : { type: "item", key: n.id, label: n.title ?? "", disabled: n.disabled }
+      );
+    }
+    function le(t, n) {
+      const e = t.menuItems?.find((l) => l.id === n);
+      e && x("clickItem", e);
+    }
+    const ne = g(() => ({ right: `${L.value + U.value}px` }));
+    return (t, n) => (o(), s("div", {
+      ref_key: "rootRef",
+      ref: c,
+      class: "relative flex w-full min-w-0 items-center gap-1",
+      "data-overflow-toolbar": "",
+      "data-syno-pkg-land-ui": ""
+    }, [
+      M("span", {
+        ref_key: "measureRef",
+        ref: O,
+        "data-overflow-more-measure": "",
+        "aria-hidden": "true",
+        class: "invisible absolute left-0 top-0 inline-flex h-[var(--ui-control-md)] items-center whitespace-nowrap rounded-[var(--ui-radius-control)] border border-transparent px-3 text-[length:var(--ui-font-size)]"
+      }, f(W.value), 513),
+      t.$slots["overflow-start-anchor"] ? (o(), s("div", Ie, [
+        _(t.$slots, "overflow-start-anchor")
+      ])) : S("", !0),
+      M("div", {
+        ref_key: "rowRef",
+        ref: I,
+        "data-overflow-row": "",
+        class: "flex min-w-0 flex-1 items-center overflow-x-clip",
+        style: q({ columnGap: `${r(J)}px` })
+      }, [
+        (o(!0), s(v, null, N(i.items, (e, l) => (o(), s(v, {
+          key: e.id
+        }, [
+          e.type === "divider" ? (o(), s("div", {
+            key: 0,
+            "data-overflow-item": e.id,
+            class: k([P(l), "flex items-center"])
+          }, [...n[1] || (n[1] = [
+            M("span", {
+              class: "h-4 w-px bg-[var(--ui-border-subtle)]",
+              "aria-hidden": "true"
+            }, null, -1)
+          ])], 10, Me)) : (o(), s("div", {
+            key: 1,
+            "data-overflow-item": e.id,
+            class: k([P(l), "flex items-center"])
+          }, [
+            e.slot ? _(t.$slots, e.slot, { item: e }, void 0, void 0, 0) : e.menuItems?.length ? (o(), m(_e, {
+              key: 1,
+              items: ie(e),
+              onSelect: (b) => le(e, String(b))
+            }, {
+              trigger: a(() => [
+                u($, T({ variant: "ghost" }, { ref_for: !0 }, e.bind, {
+                  disabled: e.disabled,
+                  "data-overflow-submenu": e.id
+                }), {
+                  default: a(() => [
+                    y(f(e.title), 1),
+                    u(r(me), {
+                      class: "size-3.5",
+                      "aria-hidden": "true"
+                    })
+                  ]),
+                  _: 2
+                }, 1040, ["disabled", "data-overflow-submenu"])
+              ]),
+              _: 2
+            }, 1032, ["items", "onSelect"])) : (o(), m($, T({
+              key: 2,
+              variant: "ghost"
+            }, { ref_for: !0 }, e.bind, {
+              disabled: e.disabled,
+              onClick: (b) => x("clickItem", e)
+            }), {
+              default: a(() => [
+                y(f(e.title), 1)
+              ]),
+              _: 2
+            }, 1040, ["disabled", "onClick"]))
+          ], 10, Se))
+        ], 64))), 128))
+      ], 4),
+      t.$slots["overflow-end-anchor"] ? (o(), s("div", {
+        key: 1,
+        ref_key: "endAnchorRef",
+        ref: D,
+        class: "flex shrink-0 items-center gap-1"
+      }, [
+        _(t.$slots, "overflow-end-anchor")
+      ], 512)) : S("", !0),
+      t.$slots.right ? (o(), s("div", {
+        key: 2,
+        ref_key: "rightRef",
+        ref: z,
+        "data-overflow-right": "",
+        class: "flex shrink-0 items-center gap-1"
+      }, [
+        _(t.$slots, "right")
+      ], 512)) : S("", !0),
+      R.value ? (o(), s("div", {
+        key: 3,
+        "data-overflow-more-overlay": "",
+        class: "absolute inset-y-0 flex items-center",
+        style: q(ne.value)
+      }, [
+        u(r(ce), {
+          open: C.value,
+          "onUpdate:open": n[0] || (n[0] = (e) => C.value = e)
+        }, {
+          default: a(() => [
+            u(r(ge), { "as-child": "" }, {
+              default: a(() => [
+                u($, {
+                  variant: "ghost",
+                  "data-overflow-more": ""
+                }, {
+                  default: a(() => [
+                    y(f(te.value), 1)
+                  ]),
+                  _: 1
+                })
+              ]),
+              _: 1
+            }),
+            u(r(Y), null, {
+              default: a(() => [
+                u(r(pe), T({
+                  onOpenAutoFocus: r(ke),
+                  "data-ui-popup": "",
+                  align: i.moreMenu.align ?? "end",
+                  side: i.moreMenu.side ?? "bottom",
+                  "side-offset": i.moreMenu.sideOffset ?? 4
+                }, r(V), {
+                  class: [K, r(H)]
+                }), {
+                  default: a(() => [
+                    (o(!0), s(v, null, N(B.value, (e) => (o(), s(v, {
+                      key: e.id
+                    }, [
+                      e.type === "divider" ? (o(), m(r(Z), {
+                        key: 0,
+                        class: "my-1 h-px bg-[var(--ui-border-subtle)]"
+                      })) : e.menuItems?.length ? (o(), m(r(we), { key: 1 }, {
+                        default: a(() => [
+                          u(r(be), {
+                            disabled: e.disabled,
+                            class: k(E),
+                            "data-overflow-menu-item": e.id
+                          }, {
+                            default: a(() => [
+                              M("span", Te, f(e.title), 1),
+                              u(r(ve), {
+                                class: "size-3.5 shrink-0 text-[var(--ui-text-muted)]",
+                                "aria-hidden": "true"
+                              })
+                            ]),
+                            _: 2
+                          }, 1032, ["disabled", "data-overflow-menu-item"]),
+                          u(r(Y), null, {
+                            default: a(() => [
+                              u(r(he), T({
+                                "data-ui-popup": "",
+                                "side-offset": 4,
+                                "align-offset": -4
+                              }, { ref_for: !0 }, r(V), {
+                                class: [K, r(H)]
+                              }), {
+                                default: a(() => [
+                                  (o(!0), s(v, null, N(e.menuItems, (l) => (o(), s(v, {
+                                    key: l.id
+                                  }, [
+                                    l.type === "divider" ? (o(), m(r(Z), {
+                                      key: 0,
+                                      class: "my-1 h-px bg-[var(--ui-border-subtle)]"
+                                    })) : (o(), m(r(j), {
+                                      key: 1,
+                                      disabled: l.disabled,
+                                      class: k(E),
+                                      "data-overflow-menu-item": l.id,
+                                      onSelect: (b) => x("clickItem", l)
+                                    }, {
+                                      default: a(() => [
+                                        y(f(l.title), 1)
+                                      ]),
+                                      _: 2
+                                    }, 1032, ["disabled", "data-overflow-menu-item", "onSelect"]))
+                                  ], 64))), 128))
+                                ]),
+                                _: 2
+                              }, 1040, ["class"])
+                            ]),
+                            _: 2
+                          }, 1024)
+                        ]),
+                        _: 2
+                      }, 1024)) : (o(), m(r(j), {
+                        key: 2,
+                        disabled: e.disabled,
+                        class: k(E),
+                        "data-overflow-menu-item": e.id,
+                        onSelect: (l) => x("clickItem", e)
+                      }, {
+                        default: a(() => [
+                          _(t.$slots, "overflow-item", { item: e }, () => [
+                            y(f(e.title), 1)
+                          ])
+                        ]),
+                        _: 2
+                      }, 1032, ["disabled", "data-overflow-menu-item", "onSelect"]))
+                    ], 64))), 128))
+                  ]),
+                  _: 3
+                }, 16, ["onOpenAutoFocus", "align", "side", "side-offset", "class"])
+              ]),
+              _: 3
+            })
+          ]),
+          _: 3
+        }, 8, ["open"])
+      ], 4)) : S("", !0)
+    ], 512));
+  }
+});
+export {
+  qe as default
+};

package/dist/modules/components/composite/overflow-toolbar/OverflowToolbar2.vue.js

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

package/dist/modules/components/composite/overflow-toolbar/overflow.js

@@ -0,0 +1,19 @@
+const a = 4;
+function b({ widths: t, availableWidth: n, moreWidth: l, gap: r, minVisibleItems: c, dividers: s }) {
+  if (n <= 0) return { visibleCount: t.length, needsMore: !1 };
+  if (t.reduce((u, o, i) => u + o + (i > 0 ? r : 0), 0) <= n) return { visibleCount: t.length, needsMore: !1 };
+  const M = n - l - r;
+  let f = 0, e = 0;
+  for (const u of t) {
+    const o = f + u + (e > 0 ? r : 0);
+    if (o > M) break;
+    f = o, e += 1;
+  }
+  for (; e > 0 && s?.[e - 1] && e > c; ) e -= 1;
+  const x = Math.max(0, Math.min(c, t.length));
+  return { visibleCount: Math.max(e, x), needsMore: !0 };
+}
+export {
+  a as ITEM_GAP,
+  b as computeOverflowFit
+};

package/dist/modules/components/composite/path-display/PathDisplay.vue.js

@@ -0,0 +1,91 @@
+import { defineComponent as k, ref as g, useTemplateRef as w, computed as C, openBlock as a, createElementBlock as l, normalizeClass as h, createVNode as z, unref as e, Fragment as T, createElementVNode as n, toDisplayString as s, createBlock as u, createCommentVNode as m, renderSlot as B } from "vue";
+import F from "../../primitives/tooltip/OverflowTooltip.vue.js";
+import { inOverflowTooltipRegion as N } from "../../../lib/truncation.js";
+import { Folder as V, Check as D, Copy as E } from "@lucide/vue";
+import { useUiText as P } from "../../../i18n/text.js";
+import { writeClipboard as R } from "../../../lib/clipboard.js";
+const S = ["data-display"], $ = ["data-ui-tooltip-text", "data-ui-tooltip-hint"], j = {
+  "data-ui-path-label": "",
+  class: "sr-only"
+}, O = ["data-ui-tooltip-text"], U = { dir: "ltr" }, q = ["aria-label", "title"], M = /* @__PURE__ */ k({
+  __name: "PathDisplay",
+  props: {
+    path: {},
+    copyable: { type: Boolean, default: !0 },
+    display: { default: "path" }
+  },
+  emits: ["copied", "copyFailed"],
+  setup(t, { emit: f }) {
+    const r = t, d = f, i = P(), o = g(!1);
+    let c;
+    const y = !N(), p = w("root"), v = C(() => r.path.split("/").filter(Boolean).pop() ?? r.path);
+    async function x() {
+      if (!await R(r.path)) {
+        d("copyFailed");
+        return;
+      }
+      o.value = !0, d("copied", r.path), clearTimeout(c), c = setTimeout(() => o.value = !1, 1500);
+    }
+    return (b, A) => (a(), l("span", {
+      ref_key: "root",
+      ref: p,
+      class: h([
+        "ui-path-display min-w-0 max-w-full items-center gap-1 text-[var(--ui-text)]",
+        t.display === "name" ? "flex w-full whitespace-nowrap leading-4" : "inline-flex h-[var(--ui-control-sm)] rounded-[var(--ui-radius-control)] border border-[var(--ui-border-subtle)] bg-[var(--ui-surface-subtle)] pl-2 pr-1 text-[length:var(--ui-font-size-control)]"
+      ]),
+      "data-display": t.display,
+      "data-syno-pkg-land-ui": ""
+    }, [
+      z(e(V), {
+        class: "size-3.5 shrink-0 fill-current text-[var(--ui-file-folder)]",
+        "aria-hidden": "true"
+      }),
+      t.display === "name" ? (a(), l(T, { key: 0 }, [
+        n("span", {
+          "data-ui-path-text": "",
+          "data-ui-tooltip-text": t.path,
+          "data-ui-tooltip-hint": t.path,
+          "aria-hidden": "true",
+          class: "min-w-0 truncate"
+        }, s(v.value), 9, $),
+        n("span", j, s(e(i)("Path: {path}", { path: t.path })), 1)
+      ], 64)) : (a(), l("span", {
+        key: 1,
+        "data-ui-path-text": "",
+        dir: "rtl",
+        "data-ui-tooltip-text": t.path,
+        class: "min-w-0 flex-1 truncate text-left"
+      }, [
+        n("bdi", U, s(t.path), 1)
+      ], 8, O)),
+      t.copyable ? (a(), l("button", {
+        key: 2,
+        type: "button",
+        "data-ui-path-copy": "",
+        "data-ui-hit": "",
+        class: h([t.display === "name" ? "[--ui-hit-end-room:0px]" : "[--ui-hit-end-room:5px]", "relative flex size-5 shrink-0 items-center justify-center rounded-[var(--ui-radius-inner)] border-0 bg-transparent p-0 text-[var(--ui-text-secondary)] outline-none transition-colors duration-[var(--ui-motion-fast)] hover:bg-[var(--ui-control-bg-active)] hover:text-[var(--ui-text)] focus-visible:text-[var(--ui-text)] focus-visible:shadow-[var(--ui-shadow-focus)]"]),
+        "aria-label": o.value ? e(i)("Copied") : e(i)("Copy path"),
+        title: o.value ? e(i)("Copied") : e(i)("Copy path"),
+        onClick: x
+      }, [
+        o.value ? (a(), u(e(D), {
+          key: 0,
+          class: "size-3.5 text-[var(--ui-success)]",
+          "aria-hidden": "true"
+        })) : (a(), u(e(E), {
+          key: 1,
+          class: "size-3.5",
+          "aria-hidden": "true"
+        }))
+      ], 10, q)) : m("", !0),
+      B(b.$slots, "actions"),
+      y ? (a(), u(F, {
+        key: 3,
+        target: p.value
+      }, null, 8, ["target"])) : m("", !0)
+    ], 10, S));
+  }
+});
+export {
+  M as default
+};

package/dist/modules/components/composite/path-display/PathDisplay2.vue.js

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