@wssto2/vue-core 0.4.3 → 0.4.5

package/dist/CollectionPage.vue_vue_type_script_setup_true_lang-BuAdhiy_.js

@@ -0,0 +1,1514 @@
+import { hasInjectionContext as Ge, inject as Ye, shallowRef as ge, computed as _, watch as Se, toValue as we, ref as te, getCurrentScope as Ze, onScopeDispose as et, defineComponent as ie, openBlock as u, createElementBlock as h, createVNode as C, unref as o, createElementVNode as i, toDisplayString as b, Fragment as X, renderList as J, createCommentVNode as P, createBlock as I, mergeProps as re, withCtx as q, createTextVNode as H, normalizeClass as le, useTemplateRef as se, withModifiers as Me, withDirectives as je, vModelText as ze, nextTick as tt, onBeforeUnmount as lt, onMounted as ot, renderSlot as ue, useSlots as Ce, createSlots as Be, normalizeProps as Ie, guardReactiveProps as De } from "vue";
+import { routerKey as nt } from "vue-router";
+import { i as Ve, a as st } from "./error-CD7x0Jrz.js";
+import { d as Pe, o as at, L as Le, e as ke, w as rt, b as it } from "./http-CNcDHSOj.js";
+import { a as ct } from "./AdaptivePageShell.vue_vue_type_script_setup_true_lang-B7qSUiee.js";
+import { useI18n as de } from "vue-i18n";
+import { _ as ne, u as Fe } from "./Button.vue_vue_type_script_setup_true_lang-CL9Qh5yq.js";
+import { _ as He } from "./Tabs.vue_vue_type_script_setup_true_lang-CcMcE38r.js";
+import { u as Oe } from "./format-B8mJm946.js";
+import { _ as E } from "./Icon.vue_vue_type_script_lang-D7oC-d-S.js";
+import { _ as qe } from "./Banner.vue_vue_type_script_setup_true_lang-DSStj_5z.js";
+import { _ as ut } from "./EmptyState.vue_vue_type_script_setup_true_lang-50p-Mp8I.js";
+import { u as dt, _ as ft } from "./rowLayout-BkQWulan.js";
+import { _ as Ke } from "./Menu.vue_vue_type_script_setup_true_lang-uPmxWvds.js";
+import { _ as We } from "./Popover.vue_vue_type_script_setup_true_lang-Dx-tDhNE.js";
+import { _ as ye } from "./ToneDot.vue_vue_type_script_setup_true_lang-99rNn-L5.js";
+import { _ as pt } from "./NumberField.vue_vue_type_script_setup_true_lang-C7N5nq0P.js";
+import { _ as vt } from "./SelectField.vue_vue_type_script_setup_true_lang-BJoAkBo2.js";
+import { a as mt } from "./mediaQuery-CygcXmFW.js";
+import { _ as bt } from "./Sheet.vue_vue_type_script_setup_true_lang-DgOFV4fa.js";
+import { t as he } from "./toast-CqSDTWRX.js";
+const oe = (r) => r == null || r === "";
+function Qe(r) {
+  if (!r) return [null, null];
+  const [n = "", a = ""] = String(r).split(",");
+  return [n.trim() || null, a.trim() || null];
+}
+function gt(r, n) {
+  const a = oe(r) ? "" : String(r), v = oe(n) ? "" : String(n);
+  return a === "" && v === "" ? null : `${a},${v}`;
+}
+function ht(r, n) {
+  const a = oe(n) ? null : new Set(String(n).split(",")), v = (r.options ?? []).filter(
+    (c) => !r.dependsOn || !a || c.parentValue !== void 0 && a.has(String(c.parentValue))
+  ), s = /* @__PURE__ */ new Map();
+  for (const c of v) {
+    const p = s.get(c.label) ?? { values: [], dot: c.dot }, f = String(c.value);
+    p.values.includes(f) || p.values.push(f), s.set(c.label, p);
+  }
+  return [...s.entries()].map(([c, { values: p, dot: f }]) => ({ label: c, value: p.join(","), ...f ? { dot: f } : {} }));
+}
+function yt(r, n, a) {
+  if (oe(n)) return null;
+  if (r.type === "range") {
+    const [s, c] = Qe(String(n)), p = r.unit ? ` ${r.unit}` : "", f = (g) => `${r.unit ? a.formatNumber(Number(g)) : g}${p}`;
+    return s !== null && c !== null ? `${f(s)} – ${f(c)}` : s !== null ? `${a.from.toLowerCase()} ${f(s)}` : c !== null ? `${a.until.toLowerCase()} ${f(c)}` : null;
+  }
+  const v = new Set(String(n).split(","));
+  return (r.options ?? []).find((s) => v.has(String(s.value)))?.label ?? String(n);
+}
+function Xe(r, n, a) {
+  const v = new Set(r.map((p) => p.key)), s = (p) => r.find((f) => f.dependsOn === p), c = [];
+  for (const p of r.filter((f) => !f.dependsOn || !v.has(f.dependsOn))) {
+    const f = [];
+    for (let m = p; m && !f.includes(m); m = s(m.key)) f.push(m);
+    const g = f.map((m) => ({ filter: m, value: yt(m, n[m.key], a) })).filter((m) => m.value !== null);
+    g.length !== 0 && c.push({
+      key: p.key,
+      label: g.length === 1 ? g[0].filter.label : null,
+      values: g.map((m) => m.value),
+      clears: f.map((m) => m.key)
+    });
+  }
+  return c;
+}
+function _t(r, n) {
+  return r.filter((a) => !oe(n[a.key])).length;
+}
+const Re = /* @__PURE__ */ new WeakMap();
+function xt(r, n, a, v) {
+  let s = Re.get(r);
+  s || Re.set(r, s = /* @__PURE__ */ new Map());
+  const c = `${a}\0${v}`, p = s.get(c);
+  if (p && p.id !== n)
+    throw new Error(
+      `useCollection("${n}"): the URL state key "${v}" is already used by the list "${p.id}" on this page. Two lists on one page each need their own \`state: { kind: "url", key }\`, or they overwrite each other's state.`
+    );
+  const f = p ?? { id: n, count: 0 };
+  return f.count++, s.set(c, f), () => {
+    --f.count <= 0 && s.delete(c);
+  };
+}
+const $e = (r) => r.status === "loaded" || r.status === "refreshing" || r.status === "stale", Te = (r) => r instanceof Error && r.message !== "" ? r.message : String(r);
+function Ro(r, n) {
+  const a = `useCollection("${r.id}")`, v = n.state;
+  let s = null, c = "", p = "", f = () => {
+  };
+  if (v.kind === "url") {
+    if (s = Ge() ? Ye(nt, null) : null, !s) throw new Error(`${a}: a URL state needs the application's router. Call it while a component is being set up, with the router installed, or use \`state: { kind: "memory" }\`.`);
+    if (!v.key) throw new Error(`${a}: \`state.key\` must not be empty.`);
+    p = v.key, c = s.currentRoute.value.path, f = xt(s, r.id, c, p);
+  }
+  const g = (() => {
+    if (!s) return r.defaults;
+    const e = s.currentRoute.value.query[p];
+    return Pe(r, Array.isArray(e) ? e[0] : e) ?? r.defaults;
+  })(), m = ge(g), L = ge({ status: "loading" }), O = ge(null), D = ge(null), x = _(() => $e(L.value) ? L.value.value : D.value);
+  let j = !1, k = null, U = 0, M = !1;
+  const R = [];
+  s && n.linked && K(s.currentRoute.value.query, n.linked);
+  function K(e, l) {
+    let t = m.value;
+    const d = (z) => {
+      const V = e[z], Z = Array.isArray(V) ? V[0] : V;
+      return typeof Z == "string" && Z !== "" ? Z : null;
+    };
+    if (l.view) {
+      const z = d(l.view), V = z !== null && (r.contract.views ? r.contract.views.includes(z) : !0);
+      z !== null && V && (t = { ...t, view: z, page: 1 }, R.push(l.view));
+    }
+    for (const [z, V] of Object.entries(l.params ?? {})) {
+      const Z = d(z);
+      if (Z === null) continue;
+      const T = typeof V == "string" ? V : V.filter, A = typeof V == "string" ? Z : V.value(Z), Q = { ...t.filters };
+      A === null || A === "any" || A === "" ? delete Q[T] : Q[T] = String(A), t = { ...t, filters: Q, page: 1 }, R.push(z);
+    }
+    if (R.length > 0) {
+      for (const z of l.consume ?? []) z in e && R.push(z);
+      m.value = t;
+    }
+  }
+  async function B(e) {
+    if (j) return;
+    k?.abort();
+    const l = ++U, t = k = new AbortController(), d = L.value, z = m.value;
+    L.value = e && $e(d) ? { status: "refreshing", value: d.value } : { status: "loading" };
+    try {
+      const V = await r.load(z, { signal: t.signal });
+      if (l !== U) return;
+      if (V.lastPage >= 1 && z.page > V.lastPage) {
+        m.value = { ...z, page: V.lastPage }, F(), B(!1);
+        return;
+      }
+      O.value = null, D.value = V, L.value = { status: "loaded", value: V };
+    } catch (V) {
+      if (l !== U || t.signal.aborted || Ve(V)) return;
+      O.value = V, L.value = e && $e(d) ? { status: "stale", value: d.value, error: Te(V) } : { status: "failed", error: Te(V) };
+    }
+  }
+  function W() {
+    F(), !(M || j) && (M = !0, queueMicrotask(() => {
+      M && (M = !1, B(!1));
+    }));
+  }
+  function ee() {
+    return M = !1, B(!0);
+  }
+  let G = !1, w = !1, N = !1;
+  function F() {
+    !s || G || j || (G = !0, queueMicrotask(() => {
+      G = !1, y();
+    }));
+  }
+  async function y() {
+    if (s) {
+      if (w) {
+        N = !0;
+        return;
+      }
+      w = !0;
+      try {
+        do {
+          N = !1;
+          const e = s.currentRoute.value;
+          if (j || e.path !== c) return;
+          const l = ke(r, m.value), t = { ...e.query };
+          for (const d of R.splice(0)) delete t[d];
+          e.query[p] === l && Object.keys(t).length === Object.keys(e.query).length || await s.replace({ query: { ...t, [p]: l }, hash: e.hash });
+        } while (N);
+      } catch {
+      } finally {
+        w = !1;
+      }
+    }
+  }
+  const S = s ? Se(
+    () => s.currentRoute.value.query[p],
+    (e) => {
+      const l = s.currentRoute.value;
+      if (j || w || l.path !== c) return;
+      const t = Array.isArray(e) ? e[0] : e, d = Pe(r, t) ?? r.defaults;
+      JSON.stringify(d) !== JSON.stringify(m.value) ? (m.value = d, W()) : F();
+    }
+  ) : () => {
+  }, $ = (e, l = !1) => {
+    m.value = { ...m.value, ...e, ...l ? { page: 1 } : {} }, W();
+  }, Y = (e) => {
+    const l = { ...m.value.filters };
+    for (const [t, d] of Object.entries(e))
+      d == null || oe(d) ? delete l[t] : l[t] = String(d);
+    return l;
+  }, ae = _(() => m.value.search !== "" || Object.values(m.value.filters).some((e) => !oe(e))), fe = _(() => x.value?.rows ?? []), ve = _(() => {
+    const e = L.value;
+    return e.status === "loading" ? "loading" : e.status === "failed" ? "failed" : e.value.rows.length > 0 ? "rows" : ae.value ? "no-matches" : "empty";
+  }), pe = _(() => {
+    const e = new Map((x.value?.views ?? []).map((l) => [l.key, l.count]));
+    return (we(n.views) ?? []).map((l) => e.has(l.key) ? { ...l, count: e.get(l.key) } : l);
+  });
+  let ce = () => {
+  };
+  const me = n.savedViews ? _e(n.savedViews) : null;
+  function be(e) {
+    const l = { v: e.state.version, f: e.state.filters, s: e.state.search, w: e.state.view ?? void 0 };
+    return it(r, l);
+  }
+  function _e(e) {
+    const l = te([]), t = te("idle");
+    let d = null;
+    const z = (T, A) => T.name.localeCompare(A.name), V = _(() => l.value.filter((T) => be(T) !== null));
+    ce = () => {
+      d?.abort(), l.value = [], t.value = "idle";
+    };
+    const Z = () => ({
+      version: r.stateVersion,
+      filters: Object.fromEntries(Object.entries(m.value.filters).filter(([T, A]) => A !== void 0 && !r.contract.sensitive.includes(T))),
+      search: m.value.search,
+      view: m.value.view
+    });
+    return {
+      items: V,
+      status: t,
+      async load() {
+        d?.abort();
+        const T = d = new AbortController();
+        t.value = "loading";
+        try {
+          const A = await e.list(r.id, { signal: T.signal });
+          if (T.signal.aborted) return;
+          l.value = [...A].sort(z), t.value = "ready";
+        } catch (A) {
+          if (T.signal.aborted || Ve(A)) return;
+          t.value = "failed";
+        }
+      },
+      current: Z,
+      async save(T, A) {
+        const Q = await e.save(r.id, T, { ...Z(), ...A });
+        return l.value = [...l.value.filter((Je) => Je.id !== Q.id), Q].sort(z), Q;
+      },
+      apply(T) {
+        const A = be(T);
+        A && $({ filters: A.filters, search: A.search, view: T.state.view ? A.view : m.value.view }, !0);
+      },
+      stageRemoval(T) {
+        const A = l.value.find((Q) => Q.id === T) ?? null;
+        return l.value = l.value.filter((Q) => Q.id !== T), {
+          revert() {
+            A && !l.value.some((Q) => Q.id === T) && (l.value = [...l.value, A].sort(z));
+          },
+          // Saved again under the same name while the toast was up: the server replaced that very row, it must not be deleted now.
+          async commit() {
+            l.value.some((Q) => Q.id === T) || await e.remove(r.id, T);
+          }
+        };
+      }
+    };
+  }
+  function xe() {
+    j || (j = !0, k?.abort(), U++, S(), f());
+  }
+  return Ze() && et(xe), at((e) => {
+    k?.abort(), U++, L.value = { status: "loading" }, D.value = null, O.value = null, ce(), e !== null && W();
+  }), W(), {
+    id: r.id,
+    pageSizes: r.contract.pageSizes,
+    searchable: r.contract.search,
+    rowKey: (e) => r.key(e),
+    state: L,
+    query: m,
+    page: x,
+    rows: fe,
+    total: _(() => x.value?.total ?? 0),
+    display: ve,
+    isFiltered: ae,
+    error: O,
+    columns: _(() => {
+      const e = we(n.columns) ?? [], l = r.contract.sorts;
+      if (l) {
+        for (const t of e) if (t.sort !== void 0 && !l.includes(t.sort)) throw new Error(`${a}: column "${t.key}" sorts by "${t.sort}", which is not in the query contract's sorts (${l.join(", ")}).`);
+      }
+      return e;
+    }),
+    filters: _(() => we(n.filters) ?? []),
+    views: pe,
+    savedViews: me,
+    refresh: ee,
+    goToPage: (e) => {
+      Number.isInteger(e) && e >= 1 && e !== m.value.page && $({ page: e });
+    },
+    nextPage: () => {
+      const e = x.value?.lastPage ?? 0;
+      m.value.page < e && $({ page: m.value.page + 1 });
+    },
+    previousPage: () => {
+      m.value.page > 1 && $({ page: m.value.page - 1 });
+    },
+    setPageSize: (e) => {
+      r.contract.pageSizes.includes(e) && e !== m.value.pageSize && $({ pageSize: e }, !0);
+    },
+    sortBy: (e, l = "asc") => {
+      if (r.contract.sorts && !r.contract.sorts.includes(e)) throw new Error(`${a}: "${e}" is not in the query contract's sorts.`);
+      $({ sort: e, direction: l });
+    },
+    toggleSort: (e) => {
+      const l = m.value;
+      $({ sort: e, direction: l.sort === e && l.direction === "asc" ? "desc" : "asc" });
+    },
+    search: (e) => $({ search: e }, !0),
+    setFilter: (e, l) => $({ filters: Y({ [e]: l }) }, !0),
+    setFilters: (e) => $({ filters: Y(e) }, !0),
+    clearFilters: () => $({ filters: {}, search: "" }, !0),
+    setView: (e) => $({ view: e }, !0),
+    reset: () => {
+      m.value = r.defaults, W();
+    },
+    recordLocation: (e) => {
+      const l = n.recordRoute?.(e);
+      return l ? s ? rt(l, { [Le]: ke(r, m.value) }) : l : null;
+    },
+    linkContext: () => s ? { [Le]: ke(r, m.value) } : {}
+  };
+}
+const wt = {
+  class: "mx-auto max-w-xl py-8 text-center",
+  "data-test": "collection-empty-filtered"
+}, kt = { class: "mt-3 mb-1 text-headline font-semibold text-content-strong" }, $t = { class: "text-sm text-content-muted" }, Ct = { class: "mt-4 flex flex-wrap justify-center gap-2" }, St = {
+  key: 0,
+  class: "shrink-0 text-content-muted"
+}, jt = ["title"], zt = ["aria-label", "onClick"], Ot = { class: "mt-5 flex flex-wrap justify-center gap-2" }, Vt = /* @__PURE__ */ ie({
+  __name: "CollectionEmptyResult",
+  props: {
+    chips: {},
+    lastChip: {}
+  },
+  emits: ["remove", "clearAll"],
+  setup(r, { emit: n }) {
+    const a = r, v = n, { t: s } = de();
+    return (c, p) => (u(), h("div", wt, [
+      C(o(E), {
+        name: "filter3",
+        size: 32,
+        class: "mx-auto text-content-disabled"
+      }),
+      i("h3", kt, b(o(s)("core.collection.empty.title")), 1),
+      i("p", $t, b(o(s)("core.collection.empty.description")), 1),
+      i("ul", Ct, [
+        (u(!0), h(X, null, J(a.chips, (f) => (u(), h("li", {
+          key: f.key,
+          class: "inline-flex h-7 max-w-full min-w-0 items-center gap-1.5 rounded-control bg-surface-cell pr-0.5 pl-2.5 text-sm shadow-group ring-1 ring-inset ring-border-separator"
+        }, [
+          f.label ? (u(), h("span", St, b(f.label), 1)) : P("", !0),
+          i("span", {
+            class: "min-w-0 truncate font-medium text-content-strong",
+            title: f.values.join(" › ")
+          }, b(f.values.join(" › ")), 9, jt),
+          i("button", {
+            type: "button",
+            class: "shrink-0 cursor-pointer rounded p-1 text-content-disabled hover:bg-fill hover:text-content-strong",
+            "aria-label": `${o(s)("core.collection.clear")}: ${f.label ?? f.values.join(" › ")}`,
+            onClick: (g) => v("remove", f)
+          }, [
+            C(o(E), {
+              name: "close",
+              size: 12
+            })
+          ], 8, zt)
+        ]))), 128))
+      ]),
+      i("div", Ot, [
+        a.lastChip ? (u(), I(ne, re({ key: 0 }, { "data-test": "collection-empty-remove-last" }, {
+          prominence: "secondary",
+          size: "sm",
+          onClick: p[0] || (p[0] = (f) => v("remove", a.lastChip))
+        }), {
+          default: q(() => [
+            H(b(o(s)("core.collection.empty.remove_last", { filter: a.lastChip.values.join(" › ") })), 1)
+          ]),
+          _: 1
+        }, 16)) : P("", !0),
+        C(ne, re({ "data-test": "collection-empty-clear-all" }, {
+          size: "sm",
+          onClick: p[1] || (p[1] = (f) => v("clearAll"))
+        }), {
+          default: q(() => [
+            H(b(o(s)("core.collection.empty.clear_all")), 1)
+          ]),
+          _: 1
+        }, 16)
+      ])
+    ]));
+  }
+}), Pt = ["aria-label"], Lt = ["disabled"], Ft = { class: "sr-only" }, qt = {
+  class: "text-subheadline tabular-nums text-content-muted",
+  "aria-live": "polite"
+}, Rt = ["disabled"], Tt = { class: "sr-only" }, Nt = {
+  key: 1,
+  class: "flex select-none flex-col items-center justify-between gap-3 border-t border-border-separator px-4 py-2.5 md:flex-row"
+}, At = { class: "flex flex-col items-center gap-x-4 text-footnote tabular-nums text-content-muted md:flex-row" }, Et = {
+  key: 0,
+  "aria-live": "polite"
+}, Ut = { class: "flex items-center" }, Mt = { class: "mr-2" }, Bt = ["value"], It = ["value"], Dt = ["aria-label"], Ht = ["disabled"], Kt = { class: "sr-only" }, Wt = {
+  key: 0,
+  class: "px-1.5 text-content-disabled"
+}, Qt = ["aria-current", "onClick"], Xt = ["disabled"], Jt = { class: "sr-only" }, Gt = /* @__PURE__ */ ie({
+  __name: "CollectionPager",
+  props: {
+    collection: {},
+    compact: { type: Boolean },
+    flat: { type: Boolean }
+  },
+  emits: ["turned"],
+  setup(r, { emit: n }) {
+    const a = r, v = n, { t: s } = de(), c = Oe(), p = _(() => a.collection.query.value.page), f = _(() => a.collection.page.value?.lastPage ?? 0), g = _(() => a.collection.page.value), m = _(() => {
+      if (f.value <= 1) return f.value === 1 ? [1] : [];
+      const x = [1], j = Math.max(2, p.value - 2), k = Math.min(f.value - 1, p.value + 2);
+      j > 2 && x.push(null);
+      for (let U = j; U <= k; U++) x.push(U);
+      return k < f.value - 1 && x.push(null), x.push(f.value), x;
+    });
+    function L(x) {
+      x === 1 ? a.collection.nextPage() : a.collection.previousPage(), v("turned");
+    }
+    const O = (x) => [
+      "hit-target inline-flex h-7 min-w-7 cursor-pointer items-center justify-center rounded-button px-2 transition-colors duration-motion-fast disabled:cursor-not-allowed disabled:opacity-40",
+      x ? "bg-tint font-semibold text-content-on-tint" : "text-content-strong hover:bg-fill disabled:hover:bg-transparent"
+    ].join(" ");
+    function D(x) {
+      a.collection.setPageSize(Number(x.target.value));
+    }
+    return (x, j) => a.compact && f.value > 1 ? (u(), h("nav", {
+      key: 0,
+      "aria-label": o(s)("core.collection.page.label"),
+      class: le(["flex select-none items-center justify-between gap-3 px-1 py-2", a.flat ? "mt-1" : "border-t border-border-separator"]),
+      "data-test": "collection-pager-compact"
+    }, [
+      i("button", {
+        type: "button",
+        class: "inline-flex size-11 cursor-pointer items-center justify-center rounded-full text-content-link active:bg-fill disabled:cursor-not-allowed disabled:text-content-disabled",
+        disabled: p.value <= 1,
+        onClick: j[0] || (j[0] = (k) => L(-1))
+      }, [
+        C(o(E), {
+          name: "arrowLeftSLine",
+          size: 20
+        }),
+        i("span", Ft, b(o(s)("core.collection.page.previous")), 1)
+      ], 8, Lt),
+      i("span", qt, b(o(s)("core.collection.page.page_of", { current: o(c).number(p.value), total: o(c).number(f.value) })), 1),
+      i("button", {
+        type: "button",
+        class: "inline-flex size-11 cursor-pointer items-center justify-center rounded-full text-content-link active:bg-fill disabled:cursor-not-allowed disabled:text-content-disabled",
+        disabled: p.value >= f.value,
+        onClick: j[1] || (j[1] = (k) => L(1))
+      }, [
+        C(o(E), {
+          name: "arrowRightSLine",
+          size: 20
+        }),
+        i("span", Tt, b(o(s)("core.collection.page.next")), 1)
+      ], 8, Rt)
+    ], 10, Pt)) : a.compact ? P("", !0) : (u(), h("div", Nt, [
+      i("div", At, [
+        g.value ? (u(), h("span", Et, b(o(s)("core.collection.page.total", { from: o(c).number(g.value.from), to: o(c).number(g.value.to), total: o(c).number(g.value.total) })), 1)) : P("", !0),
+        i("label", Ut, [
+          i("span", Mt, b(o(s)("core.collection.page.per_page")) + ":", 1),
+          i("select", {
+            value: a.collection.query.value.pageSize,
+            class: "cursor-pointer rounded-control bg-transparent py-0.5 pr-1 font-semibold text-content-strong hover:bg-fill",
+            onChange: D
+          }, [
+            (u(!0), h(X, null, J(a.collection.pageSizes, (k) => (u(), h("option", {
+              key: k,
+              value: k
+            }, b(k), 9, It))), 128))
+          ], 40, Bt)
+        ])
+      ]),
+      i("nav", {
+        "aria-label": o(s)("core.collection.page.label"),
+        class: "flex items-center gap-0.5 text-subheadline tabular-nums"
+      }, [
+        i("button", {
+          type: "button",
+          class: le(O(!1)),
+          disabled: p.value <= 1,
+          onClick: j[2] || (j[2] = (k) => L(-1))
+        }, [
+          C(o(E), {
+            name: "arrowLeftSLine",
+            size: 16
+          }),
+          i("span", Kt, b(o(s)("core.collection.page.previous")), 1)
+        ], 10, Ht),
+        (u(!0), h(X, null, J(m.value, (k, U) => (u(), h(X, { key: U }, [
+          k === null ? (u(), h("span", Wt, "…")) : (u(), h("button", {
+            key: 1,
+            type: "button",
+            class: le(O(k === p.value)),
+            "aria-current": k === p.value ? "page" : void 0,
+            onClick: (M) => a.collection.goToPage(k)
+          }, b(o(c).number(k)), 11, Qt))
+        ], 64))), 128)),
+        i("button", {
+          type: "button",
+          class: le(O(!1)),
+          disabled: p.value >= f.value,
+          onClick: j[3] || (j[3] = (k) => L(1))
+        }, [
+          C(o(E), {
+            name: "arrowRightSLine",
+            size: 16
+          }),
+          i("span", Jt, b(o(s)("core.collection.page.next")), 1)
+        ], 10, Xt)
+      ], 8, Dt)
+    ]));
+  }
+}), Yt = ["onClick"], Zt = { class: "max-w-56 truncate" }, el = { class: "flex flex-col gap-1.5 text-footnote font-medium text-content-muted" }, tl = ["placeholder"], ll = { class: "flex items-center justify-between gap-2" }, ol = {
+  type: "submit",
+  class: "cursor-pointer rounded-control bg-tint px-3 py-1.5 text-footnote font-semibold text-content-on-tint"
+}, nl = ["onClick"], sl = { class: "max-w-56 truncate" }, Ne = "inline-flex shrink-0 cursor-pointer items-center gap-x-2 rounded-button px-3 py-1.5 text-subheadline transition-colors duration-motion-fast focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-border-focus", al = /* @__PURE__ */ ie({
+  __name: "CollectionFilterMenu",
+  props: {
+    filter: {},
+    value: {}
+  },
+  emits: ["update"],
+  setup(r, { emit: n }) {
+    const a = r, v = n, { t: s } = de(), c = _(() => oe(a.value) ? null : String(a.value)), p = _(() => a.filter.options?.find((M) => String(M.value) === c.value) ?? null), f = _(() => [
+      ...a.filter.withoutDefaultOption ? [] : [{ id: "__all", label: a.filter.defaultOptionTitle ?? s("core.collection.filters.show_all"), checked: c.value === null, onSelect: () => v("update", null) }],
+      ...(a.filter.options ?? []).map((R) => ({
+        id: `option-${String(R.value)}`,
+        label: R.label,
+        icon: R.icon,
+        dot: R.dot,
+        checked: c.value === String(R.value),
+        onSelect: () => v("update", String(R.value))
+      }))
+    ]), g = _(() => a.filter.type === "text" && c.value ? `${a.filter.label}: ${c.value}` : p.value?.label ?? a.filter.label), m = _(() => c.value !== null), L = _(
+      () => m.value ? "bg-tint-soft font-semibold text-content-link" : "bg-surface-cell font-medium text-content-strong ring-1 ring-inset ring-border-separator hover:bg-fill"
+    ), O = te(""), D = se("popover");
+    Se(c, (M) => O.value = M ?? "", { immediate: !0 });
+    function x() {
+      const M = O.value.trim();
+      v("update", M === "" ? null : M), D.value?.dismiss();
+    }
+    function j() {
+      O.value = "", v("update", null), D.value?.dismiss();
+    }
+    const k = se("field");
+    async function U() {
+      await tt(), k.value?.focus();
+    }
+    return (M, R) => a.filter.type === "text" ? (u(), I(o(We), {
+      key: 0,
+      ref_key: "popover",
+      ref: D,
+      label: a.filter.label,
+      width: "md",
+      placement: "bottom-start",
+      onPresented: U
+    }, {
+      trigger: q(({ toggle: K, attrs: B }) => [
+        i("button", re(B, {
+          type: "button",
+          class: [Ne, L.value],
+          onClick: K
+        }), [
+          a.filter.icon ? (u(), I(o(E), {
+            key: 0,
+            name: a.filter.icon,
+            size: 16
+          }, null, 8, ["name"])) : P("", !0),
+          i("span", Zt, b(g.value), 1),
+          C(o(E), {
+            name: "arrowDownSLine",
+            size: 16,
+            class: "text-content-muted"
+          })
+        ], 16, Yt)
+      ]),
+      default: q(() => [
+        i("form", {
+          class: "flex flex-col gap-3",
+          onSubmit: Me(x, ["prevent"])
+        }, [
+          i("label", el, [
+            H(b(a.filter.label) + " ", 1),
+            je(i("input", {
+              ref_key: "field",
+              ref: k,
+              "onUpdate:modelValue": R[0] || (R[0] = (K) => O.value = K),
+              type: "text",
+              autocomplete: "off",
+              placeholder: o(s)("core.collection.filters.type_to_filter"),
+              class: "rounded-control bg-fill px-2.5 py-1.5 text-body text-content-strong outline-none placeholder:text-content-disabled focus:bg-surface-cell focus:ring-[1.5px] focus:ring-inset focus:ring-border-focus"
+            }, null, 8, tl), [
+              [ze, O.value]
+            ])
+          ]),
+          i("div", ll, [
+            i("button", {
+              type: "button",
+              class: "cursor-pointer rounded-control px-2 py-1 text-footnote text-content-muted hover:text-content-strong",
+              onClick: j
+            }, b(o(s)("core.collection.filters.clear")), 1),
+            i("button", ol, b(o(s)("core.collection.filters.apply")), 1)
+          ])
+        ], 32)
+      ]),
+      _: 1
+    }, 8, ["label"])) : (u(), I(o(Ke), {
+      key: 1,
+      items: f.value,
+      label: a.filter.label,
+      placement: "bottom-start"
+    }, {
+      trigger: q(({ toggle: K, attrs: B }) => [
+        i("button", re(B, {
+          type: "button",
+          class: [Ne, L.value],
+          onClick: K
+        }), [
+          a.filter.icon ? (u(), I(o(E), {
+            key: 0,
+            name: a.filter.icon,
+            size: 16
+          }, null, 8, ["name"])) : P("", !0),
+          p.value?.dot ? (u(), I(ye, {
+            key: 1,
+            tone: p.value.dot
+          }, null, 8, ["tone"])) : P("", !0),
+          i("span", sl, b(g.value), 1),
+          C(o(E), {
+            name: "arrowDownSLine",
+            size: 16,
+            class: "text-content-muted"
+          })
+        ], 16, nl)
+      ]),
+      _: 1
+    }, 8, ["items", "label"]));
+  }
+}), rl = {
+  key: 0,
+  "data-test": "filter-drilldown"
+}, il = { class: "mb-3 text-headline font-semibold" }, cl = ["aria-label"], ul = ["aria-selected", "onClick"], dl = { class: "flex min-w-0 items-center gap-2" }, fl = { class: "min-w-0 truncate" }, pl = {
+  key: 0,
+  class: "mb-5 border-b border-border-separator pb-5",
+  "data-test": "saved-filters"
+}, vl = { class: "mb-2 text-footnote font-medium text-content-muted" }, ml = { class: "flex flex-wrap gap-2" }, bl = ["onClick"], gl = ["aria-label", "title", "onClick"], hl = { class: "space-y-5" }, yl = { key: 0 }, _l = { class: "mb-1.5 text-footnote font-medium text-content-muted" }, xl = ["aria-label"], wl = { class: "mb-1.5 text-footnote font-medium text-content-muted" }, kl = {
+  key: 0,
+  class: "grid grid-cols-2 gap-3"
+}, $l = ["aria-label"], Cl = { class: "mb-2 text-footnote font-medium text-content-muted" }, Sl = { class: "flex flex-wrap gap-2" }, jl = ["aria-pressed", "onClick"], zl = { class: "inline-flex items-center gap-2" }, Ol = ["disabled", "onClick"], Vl = { class: "shrink-0 text-subheadline font-medium" }, Pl = { class: "truncate" }, Ll = { class: "flex items-center justify-between gap-2" }, Fl = { class: "flex items-center gap-2" }, ql = ["title"], Rl = { class: "sm:hidden" }, Tl = { class: "hidden sm:inline" }, Nl = { class: "flex flex-col gap-1.5 text-footnote font-medium text-content-muted" }, Al = ["placeholder"], El = {
+  key: 0,
+  class: "text-footnote text-status-warning-content",
+  "data-test": "saved-filter-replace-hint"
+}, Ul = { class: "flex justify-end gap-2" }, Ml = 8, Bl = 18, Ae = 6e3, Il = /* @__PURE__ */ ie({
+  __name: "CollectionFilterPanel",
+  props: {
+    collection: {},
+    filters: {}
+  },
+  emits: ["touched"],
+  setup(r, { expose: n, emit: a }) {
+    const v = r, s = a, { t: c } = de(), p = se("sheet"), f = mt("(max-width: 1023px), (pointer: coarse)"), g = te({}), m = te({}), L = te(null), O = _(() => v.filters.find((e) => e.key === L.value) ?? null);
+    function D() {
+      const e = {}, l = {};
+      for (const t of v.filters) {
+        const d = v.collection.query.value.filters[t.key];
+        if (e[t.key] = oe(d) ? null : String(d), t.type === "range") {
+          const [z, V] = Qe(e[t.key]);
+          l[t.key] = { min: z ?? "", max: V ?? "" };
+        }
+      }
+      g.value = e, m.value = l, L.value = null, p.value?.present();
+    }
+    function x(e, l) {
+      const t = oe(l) ? null : String(l);
+      if (g.value[e] !== t) {
+        g.value = { ...g.value, [e]: t };
+        for (const d of v.filters.filter((z) => z.dependsOn === e)) x(d.key, null);
+      }
+    }
+    function j() {
+      for (const e of v.filters)
+        g.value[e.key] = null, e.type === "range" && (m.value[e.key] = { min: "", max: "" });
+    }
+    const k = (e) => e.replace(/[^\d.,-]/g, "").replace(",", "."), U = (e, l) => {
+      const t = m.value[e]?.[l] ?? "", d = t === "" ? Number.NaN : Number(k(t));
+      return Number.isNaN(d) ? null : d;
+    };
+    function M(e, l, t) {
+      const d = m.value[e];
+      d && (d[l] = t === null ? "" : String(t));
+    }
+    function R() {
+      const e = {};
+      for (const l of v.filters) {
+        const t = m.value[l.key];
+        e[l.key] = l.type === "range" ? gt(t ? k(t.min) : null, t ? k(t.max) : null) : g.value[l.key] ?? null;
+      }
+      return e;
+    }
+    function K() {
+      const e = R(), l = Object.keys(e).filter((t) => (v.collection.query.value.filters[t] ?? null) !== e[t]);
+      s("touched", l), v.collection.setFilters(e), p.value?.dismiss();
+    }
+    const B = (e) => ht(e, e.dependsOn ? g.value[e.dependsOn] : null), W = (e) => e.defaultOptionTitle ?? c("core.collection.filters.show_all");
+    function ee(e) {
+      const l = g.value[e.key];
+      return l == null ? W(e) : B(e).find((t) => t.value === l)?.label ?? l;
+    }
+    const G = (e) => [{ value: null, label: W(e) }, ...B(e)], w = (e) => {
+      const l = g.value[e.key];
+      return l == null ? void 0 : B(e).find((t) => t.value === l)?.dot;
+    }, N = (e) => [
+      { value: "", label: W(e) },
+      ...B(e).map((l) => ({ value: String(l.value), label: l.label, dot: l.dot }))
+    ], F = (e) => [
+      { value: "", label: W(e) },
+      ...(e.options ?? []).map((l) => ({ value: String(l.value), label: l.label }))
+    ];
+    function y(e) {
+      const l = B(e);
+      return !e.dependsOn && l.length > 0 && l.length <= Ml && l.every((t) => t.label.length <= Bl);
+    }
+    const S = _(() => f.value && O.value !== null), $ = _(() => v.collection.savedViews), Y = te(""), ae = te(!1), fe = se("savePopover");
+    function ve() {
+      const e = new Set(v.filters.map((t) => t.key)), l = {};
+      for (const [t, d] of Object.entries(v.collection.query.value.filters))
+        !e.has(t) && d !== void 0 && d !== "" && (l[t] = String(d));
+      for (const [t, d] of Object.entries(R())) d !== null && (l[t] = d);
+      return { filters: l, search: v.collection.query.value.search };
+    }
+    const pe = _(() => {
+      const e = ve();
+      return Object.keys(e.filters).length > 0 || e.search.trim() !== "";
+    }), ce = _(() => {
+      const e = Y.value.trim();
+      return e ? $.value?.items.value.find((l) => l.name === e) ?? null : null;
+    }), me = (e, l) => st(e) && e.message ? e.message : l;
+    async function be() {
+      const e = Y.value.trim(), l = $.value;
+      if (!(!l || !e || ae.value || !pe.value)) {
+        ae.value = !0;
+        try {
+          const t = await l.save(e, ve());
+          Y.value = "", fe.value?.dismiss(), he.success(c("core.collection.saved.saved_toast", { name: t.name })), l.apply(t), s("touched", []), p.value?.dismiss();
+        } catch (t) {
+          he.error(me(t, c("core.collection.saved.save_failed")));
+        } finally {
+          ae.value = !1;
+        }
+      }
+    }
+    function _e(e) {
+      $.value?.apply(e), s("touched", []), p.value?.dismiss();
+    }
+    function xe(e) {
+      const l = $.value;
+      if (!l) return;
+      const { revert: t, commit: d } = l.stageRemoval(e.id), z = setTimeout(() => {
+        d().catch((V) => {
+          t(), he.error(me(V, c("core.collection.saved.delete_failed")));
+        });
+      }, Ae);
+      he.success(c("core.collection.saved.deleted_toast", { name: e.name }), {
+        duration: Ae,
+        action: {
+          label: c("core.collection.saved.undo"),
+          onClick: () => {
+            clearTimeout(z), t();
+          }
+        }
+      });
+    }
+    return n({ present: D }), (e, l) => (u(), I(o(bt), {
+      ref_key: "sheet",
+      ref: p,
+      title: o(c)("core.collection.filters.panel_title"),
+      grouped: S.value
+    }, {
+      footer: q(() => [
+        i("div", Ll, [
+          C(ne, {
+            prominence: "standard",
+            class: "whitespace-nowrap",
+            onClick: j
+          }, {
+            default: q(() => [
+              H(b(o(c)("core.collection.filters.reset_all")), 1)
+            ]),
+            _: 1
+          }),
+          i("div", Fl, [
+            $.value ? (u(), I(o(We), {
+              key: 0,
+              ref_key: "savePopover",
+              ref: fe,
+              placement: "top-end",
+              label: o(c)("core.collection.saved.save_button")
+            }, {
+              trigger: q(({ toggle: t, attrs: d }) => [
+                i("span", {
+                  title: pe.value ? void 0 : o(c)("core.collection.saved.nothing_to_save")
+                }, [
+                  C(ne, re({ ...d, "data-test": "saved-filter-open" }, {
+                    prominence: "standard",
+                    icon: "save",
+                    class: "whitespace-nowrap",
+                    disabled: !pe.value,
+                    onClick: t
+                  }), {
+                    default: q(() => [
+                      i("span", Rl, b(o(c)("core.collection.saved.save")), 1),
+                      i("span", Tl, b(o(c)("core.collection.saved.save_button")), 1)
+                    ]),
+                    _: 1
+                  }, 16, ["disabled", "onClick"])
+                ], 8, ql)
+              ]),
+              default: q(() => [
+                i("form", {
+                  class: "flex flex-col gap-3",
+                  "data-test": "saved-filter-form",
+                  onSubmit: Me(be, ["prevent"])
+                }, [
+                  i("label", Nl, [
+                    H(b(o(c)("core.collection.saved.name_label")) + " ", 1),
+                    je(i("input", {
+                      "onUpdate:modelValue": l[1] || (l[1] = (t) => Y.value = t),
+                      type: "text",
+                      maxlength: "60",
+                      autocomplete: "off",
+                      placeholder: o(c)("core.collection.saved.name_placeholder"),
+                      class: "rounded-control bg-fill px-2.5 py-1.5 text-body text-content-strong outline-none placeholder:text-content-disabled focus:bg-surface-cell focus:ring-[1.5px] focus:ring-inset focus:ring-border-focus"
+                    }, null, 8, Al), [
+                      [ze, Y.value]
+                    ])
+                  ]),
+                  ce.value ? (u(), h("p", El, b(o(c)("core.collection.saved.replace_hint", { name: ce.value.name })), 1)) : P("", !0),
+                  i("div", Ul, [
+                    C(ne, {
+                      size: "sm",
+                      onClick: l[2] || (l[2] = (t) => fe.value?.dismiss())
+                    }, {
+                      default: q(() => [
+                        H(b(o(c)("core.actions.cancel")), 1)
+                      ]),
+                      _: 1
+                    }),
+                    C(ne, re({ "data-test": "saved-filter-save" }, {
+                      type: "submit",
+                      prominence: "primary",
+                      size: "sm",
+                      processing: ae.value,
+                      disabled: !Y.value.trim()
+                    }), {
+                      default: q(() => [
+                        H(b(ce.value ? o(c)("core.collection.saved.replace") : o(c)("core.collection.saved.save")), 1)
+                      ]),
+                      _: 1
+                    }, 16, ["processing", "disabled"])
+                  ])
+                ], 32)
+              ]),
+              _: 1
+            }, 8, ["label"])) : P("", !0),
+            C(ne, {
+              prominence: "primary",
+              icon: "filter3",
+              class: "whitespace-nowrap",
+              onClick: K
+            }, {
+              default: q(() => [
+                H(b(o(c)("core.collection.filters.apply")), 1)
+              ]),
+              _: 1
+            })
+          ])
+        ])
+      ]),
+      default: q(() => [
+        o(f) && O.value ? (u(), h("div", rl, [
+          i("button", {
+            type: "button",
+            "data-test": "filter-drilldown-back",
+            class: "-mx-2 -mt-2 mb-1 inline-flex h-10 cursor-pointer items-center gap-0.5 rounded-control px-2 text-body font-medium text-content-link active:bg-tint-soft",
+            onClick: l[0] || (l[0] = (t) => L.value = null)
+          }, [
+            C(o(E), {
+              name: "arrowLeftSLine",
+              size: 20
+            }),
+            H(" " + b(o(c)("core.collection.filters.panel_title")), 1)
+          ]),
+          i("p", il, b(O.value.label), 1),
+          i("ul", {
+            class: "overflow-hidden rounded-group bg-surface-cell shadow-group",
+            role: "listbox",
+            "aria-label": O.value.label
+          }, [
+            (u(!0), h(X, null, J(G(O.value), (t) => (u(), h("li", {
+              key: String(t.value),
+              role: "presentation"
+            }, [
+              i("button", {
+                type: "button",
+                role: "option",
+                "aria-selected": (g.value[O.value.key] ?? null) === t.value,
+                class: "flex min-h-11 w-full cursor-pointer items-center justify-between gap-3 px-row-inset text-left text-body active:bg-fill",
+                onClick: (d) => {
+                  x(O.value.key, t.value), L.value = null;
+                }
+              }, [
+                i("span", dl, [
+                  t.dot ? (u(), I(ye, {
+                    key: 0,
+                    tone: t.dot
+                  }, null, 8, ["tone"])) : P("", !0),
+                  i("span", fl, b(t.label), 1)
+                ]),
+                (g.value[O.value.key] ?? null) === t.value ? (u(), I(o(E), {
+                  key: 0,
+                  name: "checkboxCircleFill",
+                  size: 18,
+                  class: "shrink-0 text-content-link"
+                })) : P("", !0)
+              ], 8, ul)
+            ]))), 128))
+          ], 8, cl)
+        ])) : (u(), h(X, { key: 1 }, [
+          $.value && $.value.items.value.length > 0 ? (u(), h("section", pl, [
+            i("p", vl, b(o(c)("core.collection.saved.title")), 1),
+            i("div", ml, [
+              (u(!0), h(X, null, J($.value.items.value, (t) => (u(), h("span", {
+                key: t.id,
+                class: "inline-flex h-8 items-center rounded-control bg-surface-cell text-subheadline shadow-group ring-1 ring-inset ring-border-separator"
+              }, [
+                i("button", {
+                  type: "button",
+                  "data-test": "saved-filter-apply",
+                  class: "inline-flex h-full cursor-pointer items-center gap-1.5 rounded-l-control pr-1.5 pl-2.5 font-medium text-content-strong hover:bg-fill",
+                  onClick: (d) => _e(t)
+                }, [
+                  C(o(E), {
+                    name: "starFill",
+                    size: 12,
+                    class: "text-status-warning-content"
+                  }),
+                  H(" " + b(t.name), 1)
+                ], 8, bl),
+                i("button", {
+                  type: "button",
+                  "data-test": "saved-filter-delete",
+                  "aria-label": o(c)("core.collection.saved.delete", { name: t.name }),
+                  title: o(c)("core.collection.saved.delete", { name: t.name }),
+                  class: "h-full cursor-pointer rounded-r-control px-1.5 text-content-muted hover:bg-fill hover:text-content-destructive",
+                  onClick: (d) => xe(t)
+                }, [
+                  C(o(E), {
+                    name: "close",
+                    size: 12
+                  })
+                ], 8, gl)
+              ]))), 128))
+            ])
+          ])) : P("", !0),
+          i("div", hl, [
+            (u(!0), h(X, null, J(v.filters, (t) => (u(), h(X, {
+              key: t.key
+            }, [
+              t.type === "segmented" ? (u(), h("div", yl, [
+                i("p", _l, b(t.label), 1),
+                C(o(He), {
+                  "model-value": g.value[t.key] ?? "",
+                  tabs: F(t),
+                  label: t.label,
+                  stretch: "",
+                  "onUpdate:modelValue": (d) => x(t.key, d === null ? null : String(d))
+                }, null, 8, ["model-value", "tabs", "label", "onUpdate:modelValue"])
+              ])) : t.type === "range" ? (u(), h("div", {
+                key: 1,
+                role: "group",
+                "aria-label": t.label
+              }, [
+                i("p", wl, b(t.label), 1),
+                m.value[t.key] ? (u(), h("div", kl, [
+                  (u(), h(X, null, J(["min", "max"], (d) => C(pt, {
+                    key: d,
+                    "model-value": U(t.key, d),
+                    name: `${t.key}_${d}`,
+                    width: "full",
+                    decimals: t.decimals ?? 0,
+                    suffix: t.unit,
+                    label: o(c)(d === "min" ? "core.collection.filters.range_from" : "core.collection.filters.range_until"),
+                    "onUpdate:modelValue": (z) => M(t.key, d, z)
+                  }, null, 8, ["model-value", "name", "decimals", "suffix", "label", "onUpdate:modelValue"])), 64))
+                ])) : P("", !0)
+              ], 8, xl)) : o(f) && y(t) ? (u(), h("div", {
+                key: 2,
+                role: "group",
+                "aria-label": t.label,
+                "data-test": "filter-chips"
+              }, [
+                i("p", Cl, b(t.label), 1),
+                i("div", Sl, [
+                  (u(!0), h(X, null, J(G(t), (d) => (u(), h("button", {
+                    key: String(d.value),
+                    type: "button",
+                    "aria-pressed": (g.value[t.key] ?? null) === d.value,
+                    class: le(["min-h-9 cursor-pointer rounded-full px-3.5 text-subheadline ring-1 ring-inset transition-colors", (g.value[t.key] ?? null) === d.value ? "bg-tint-soft font-semibold text-content-link ring-border-selected" : "bg-surface-cell text-content ring-border-separator active:bg-fill"]),
+                    onClick: (z) => x(t.key, d.value)
+                  }, [
+                    i("span", zl, [
+                      d.dot ? (u(), I(ye, {
+                        key: 0,
+                        tone: d.dot
+                      }, null, 8, ["tone"])) : P("", !0),
+                      H(b(d.label), 1)
+                    ])
+                  ], 10, jl))), 128))
+                ])
+              ], 8, $l)) : o(f) ? (u(), h("button", {
+                key: 3,
+                type: "button",
+                "data-test": "filter-row",
+                disabled: !!t.dependsOn && B(t).length === 0,
+                class: "flex min-h-12 w-full cursor-pointer items-center gap-3 rounded-group bg-surface-cell px-3 text-left ring-1 ring-inset ring-border-separator active:bg-fill disabled:cursor-not-allowed disabled:opacity-50",
+                onClick: (d) => L.value = t.key
+              }, [
+                i("span", Vl, b(t.label), 1),
+                i("span", {
+                  class: le(["flex min-w-0 flex-1 items-center justify-end gap-2 text-subheadline", g.value[t.key] == null ? "text-content-disabled" : "font-medium text-content-link"])
+                }, [
+                  w(t) ? (u(), I(ye, {
+                    key: 0,
+                    tone: w(t)
+                  }, null, 8, ["tone"])) : P("", !0),
+                  i("span", Pl, b(ee(t)), 1)
+                ], 2),
+                C(o(E), {
+                  name: "arrowRightSLine",
+                  size: 18,
+                  class: "shrink-0 text-content-muted"
+                })
+              ], 8, Ol)) : (u(), I(vt, {
+                key: 4,
+                "model-value": g.value[t.key] ?? "",
+                label: t.label,
+                options: N(t),
+                disabled: !!t.dependsOn && B(t).length === 0,
+                "onUpdate:modelValue": (d) => x(t.key, d === "" ? null : d)
+              }, null, 8, ["model-value", "label", "options", "disabled", "onUpdate:modelValue"]))
+            ], 64))), 128))
+          ])
+        ], 64))
+      ]),
+      _: 1
+    }, 8, ["title", "grouped"]));
+  }
+}), Dl = { class: "flex flex-col items-start gap-2 lg:flex-row" }, Hl = {
+  key: 0,
+  class: "flex h-9 w-full items-center rounded-control bg-fill px-2.5 text-content-muted transition-colors duration-motion-fast focus-within:outline-2 focus-within:outline-offset-1 focus-within:outline-border-focus lg:w-72 compact:h-10"
+}, Kl = ["placeholder", "aria-label"], Wl = ["aria-label"], Ql = ["title"], Xl = {
+  key: 0,
+  class: "min-w-4.5 rounded-full bg-tint px-1 text-center text-caption font-semibold leading-4.5 text-content-on-tint"
+}, Jl = ["onClick"], Gl = {
+  key: 0,
+  class: "mt-2.5 flex flex-wrap items-center gap-2",
+  "data-test": "collection-filter-chips"
+}, Yl = {
+  key: 0,
+  class: "shrink-0 opacity-80"
+}, Zl = { class: "flex min-w-0 flex-wrap items-center gap-1 font-semibold" }, eo = { class: "break-words" }, to = ["aria-label", "onClick"], Ee = "__search", lo = 3, oo = 300, no = /* @__PURE__ */ ie({
+  __name: "CollectionToolbar",
+  props: {
+    collection: {},
+    narrow: { type: Boolean },
+    flat: { type: Boolean }
+  },
+  emits: ["touched"],
+  setup(r, { emit: n }) {
+    const a = r, v = n, { t: s } = de(), c = Oe(), p = te(a.collection.query.value.search), f = se("field");
+    let g = null;
+    Se(() => a.collection.query.value.search, (w) => {
+      w !== p.value.trim() && (p.value = w);
+    });
+    function m() {
+      g && clearTimeout(g);
+      const w = p.value;
+      w.length > 0 && w.length < lo || (g = setTimeout(() => {
+        g = null, w !== a.collection.query.value.search && (v("touched", [Ee]), a.collection.search(w));
+      }, oo));
+    }
+    function L() {
+      g && clearTimeout(g), p.value = "", v("touched", [Ee]), a.collection.search(""), f.value?.focus();
+    }
+    lt(() => g && clearTimeout(g));
+    const O = (w) => w.placement === "panel" || a.narrow && w.type !== "text", D = _(() => a.collection.filters.value.filter((w) => !O(w))), x = _(() => a.collection.filters.value.filter(O)), j = _(() => a.collection.query.value.filters), k = _(
+      () => Xe(x.value, j.value, {
+        formatNumber: (w) => c.number(w),
+        from: s("core.collection.filters.range_from"),
+        until: s("core.collection.filters.range_until")
+      })
+    ), U = _(() => _t(x.value, j.value));
+    function M(w, N) {
+      v("touched", [w]), a.collection.setFilter(w, N);
+    }
+    function R(w) {
+      a.collection.setFilters(Object.fromEntries(w.map((N) => [N, null])));
+    }
+    const K = se("panel"), B = se("panelButton"), W = (w) => !!w && (typeof w.checkVisibility != "function" || w.checkVisibility());
+    Fe({ key: "/", group: "list", label: () => s("core.shortcuts.focus_search") }, () => {
+      if (!W(f.value)) return !1;
+      f.value?.focus(), f.value?.select();
+    }), Fe({ key: "f", group: "list", label: () => x.value.length > 0 ? s("core.shortcuts.open_filters") : "" }, () => {
+      if (x.value.length === 0 || !W(B.value)) return !1;
+      K.value?.present();
+    });
+    const ee = _(() => a.collection.savedViews);
+    ot(() => void ee.value?.load());
+    const G = _(
+      () => (ee.value?.items.value ?? []).map((w) => ({
+        id: `saved-${w.id}`,
+        label: w.name,
+        icon: "starFill",
+        onSelect: () => {
+          v("touched", []), ee.value?.apply(w);
+        }
+      }))
+    );
+    return (w, N) => (u(), h("div", {
+      class: le([a.flat ? "pb-3" : "border-b border-border-separator px-3 py-2.5", "select-none"]),
+      "data-test": "collection-toolbar"
+    }, [
+      i("div", Dl, [
+        a.collection.searchable ? (u(), h("div", Hl, [
+          C(o(E), {
+            name: "search",
+            size: 16
+          }),
+          je(i("input", {
+            ref_key: "field",
+            ref: f,
+            "onUpdate:modelValue": N[0] || (N[0] = (F) => p.value = F),
+            type: "text",
+            name: "collection-search",
+            autocomplete: "off",
+            placeholder: o(s)("core.collection.search.placeholder"),
+            "aria-label": o(s)("core.collection.search.label"),
+            class: "peer block min-w-0 flex-1 bg-transparent px-2 py-1.5 text-body text-content-strong outline-0 placeholder:text-content-disabled",
+            onInput: m
+          }, null, 40, Kl), [
+            [ze, p.value]
+          ]),
+          N[4] || (N[4] = i("kbd", {
+            "aria-hidden": "true",
+            class: "rounded border border-border-separator px-1.5 font-mono text-2xs leading-5 text-content-disabled peer-focus:hidden peer-[:not(:placeholder-shown)]:hidden [@media(pointer:coarse)]:hidden"
+          }, "/", -1)),
+          p.value !== "" ? (u(), h("button", {
+            key: 0,
+            type: "button",
+            "aria-label": o(s)("core.collection.clear"),
+            class: "cursor-pointer rounded-full text-content-disabled hover:text-content-muted",
+            onClick: L
+          }, [
+            C(o(E), {
+              name: "close",
+              size: 16
+            })
+          ], 8, Wl)) : P("", !0)
+        ])) : P("", !0),
+        i("div", {
+          class: le(["flex min-w-0 flex-1 items-center gap-2", a.narrow ? "w-full flex-nowrap overflow-x-auto [scrollbar-width:none]" : "flex-wrap"])
+        }, [
+          x.value.length > 0 ? (u(), h("button", {
+            key: 0,
+            ref_key: "panelButton",
+            ref: B,
+            type: "button",
+            "data-test": "collection-filter-panel-button",
+            title: `${o(s)("core.collection.filters.panel_button")} (F)`,
+            class: le(["hit-target inline-flex h-8 shrink-0 cursor-pointer items-center gap-x-1.5 rounded-button px-3 text-subheadline font-semibold transition-colors duration-motion-fast compact:h-9", U.value > 0 ? "bg-tint-soft text-content-link" : "bg-surface-cell text-content-strong shadow-group ring-1 ring-inset ring-border-separator hover:bg-fill"]),
+            onClick: N[1] || (N[1] = (F) => K.value?.present())
+          }, [
+            C(o(E), {
+              name: "filter3",
+              size: 16
+            }),
+            H(" " + b(o(s)("core.collection.filters.panel_button")) + " ", 1),
+            U.value > 0 ? (u(), h("span", Xl, b(U.value), 1)) : P("", !0)
+          ], 10, Ql)) : P("", !0),
+          G.value.length > 0 ? (u(), I(o(Ke), {
+            key: 1,
+            items: G.value,
+            label: o(s)("core.collection.saved.menu"),
+            placement: "bottom-start"
+          }, {
+            trigger: q(({ toggle: F, attrs: y }) => [
+              i("button", re(y, {
+                type: "button",
+                "data-test": "saved-filters-menu",
+                class: "inline-flex shrink-0 cursor-pointer items-center gap-1.5 rounded-button bg-surface-cell px-3 py-1.5 text-subheadline font-semibold text-content-strong shadow-group ring-1 ring-inset ring-border-separator transition-colors hover:bg-fill",
+                onClick: F
+              }), [
+                C(o(E), {
+                  name: "starFill",
+                  size: 14,
+                  class: "text-status-warning-content"
+                }),
+                H(" " + b(o(s)("core.collection.saved.menu")), 1)
+              ], 16, Jl)
+            ]),
+            _: 1
+          }, 8, ["items", "label"])) : P("", !0),
+          (u(!0), h(X, null, J(D.value, (F) => (u(), I(al, {
+            key: F.key,
+            filter: F,
+            value: j.value[F.key],
+            onUpdate: (y) => M(F.key, y)
+          }, null, 8, ["filter", "value", "onUpdate"]))), 128))
+        ], 2),
+        ue(w.$slots, "default")
+      ]),
+      k.value.length > 0 ? (u(), h("div", Gl, [
+        (u(!0), h(X, null, J(k.value, (F) => (u(), h("span", {
+          key: F.key,
+          class: "inline-flex min-h-7 max-w-full items-center gap-1.5 rounded-control bg-tint-soft py-0.5 pr-0.5 pl-2.5 text-subheadline text-content-link"
+        }, [
+          F.label ? (u(), h("span", Yl, b(F.label), 1)) : P("", !0),
+          i("span", Zl, [
+            (u(!0), h(X, null, J(F.values, (y, S) => (u(), h(X, { key: S }, [
+              S > 0 ? (u(), I(o(E), {
+                key: 0,
+                name: "arrowRightSLine",
+                size: 12,
+                class: "opacity-60"
+              })) : P("", !0),
+              i("span", eo, b(y), 1)
+            ], 64))), 128))
+          ]),
+          i("button", {
+            type: "button",
+            class: "hit-target flex size-5 shrink-0 cursor-pointer items-center justify-center rounded-full hover:bg-tint/15",
+            "aria-label": o(s)("core.collection.clear"),
+            onClick: (y) => R(F.clears)
+          }, [
+            C(o(E), {
+              name: "close",
+              size: 12
+            })
+          ], 8, to)
+        ]))), 128)),
+        k.value.length > 1 ? (u(), h("button", {
+          key: 0,
+          type: "button",
+          class: "cursor-pointer px-2 text-subheadline text-content-muted hover:text-content-strong hover:underline",
+          onClick: N[2] || (N[2] = (F) => R(x.value.map((y) => y.key)))
+        }, b(o(s)("core.collection.filters.reset_all")), 1)) : P("", !0)
+      ])) : P("", !0),
+      x.value.length > 0 ? (u(), I(Il, {
+        key: 1,
+        ref_key: "panel",
+        ref: K,
+        collection: a.collection,
+        filters: x.value,
+        onTouched: N[3] || (N[3] = (F) => v("touched", F))
+      }, null, 8, ["collection", "filters"])) : P("", !0)
+    ], 2));
+  }
+}), so = ["aria-busy"], ao = {
+  key: 0,
+  class: "mb-3 select-none"
+}, ro = {
+  key: 0,
+  role: "status",
+  "data-test": "collection-refreshing",
+  class: "m-2 flex w-fit max-w-full items-center gap-2 rounded-group bg-fill py-1 pr-3 pl-3 text-footnote text-content-muted"
+}, io = {
+  key: 1,
+  class: "m-2",
+  "data-test": "collection-stale"
+}, co = { class: "flex flex-wrap items-center justify-between gap-3" }, uo = { class: "flex flex-wrap items-center justify-between gap-3" }, fo = { class: "font-semibold" }, Ue = "__search", po = /* @__PURE__ */ ie({
+  __name: "CollectionTable",
+  props: {
+    collection: {},
+    rowActions: { type: Function, default: void 0 },
+    rowLabel: { type: Function, default: void 0 },
+    rowHeight: { default: void 0 },
+    density: { default: "regular" },
+    viewsPresentation: { default: "segmented" },
+    actionsVisible: { type: Boolean, default: !1 }
+  },
+  setup(r) {
+    const n = r, a = Ce(), { t: v } = de(), s = Oe(), c = _(() => Object.keys(Ce()).filter((y) => y !== "toolbar" && y !== "empty")), p = _(() => n.collection.columns.value), { narrow: f, phone: g } = dt(() => p.value), m = _(() => n.collection.rows.value), L = (y) => n.collection.recordLocation(y), O = _(() => n.collection.query.value.search), D = _(() => n.collection.views.value.map((y) => ({ value: y.key, label: y.label, icon: y.icon, badge: y.count }))), x = te([]), j = (y) => x.value = [...x.value.filter((S) => !y.includes(S)), ...y], k = _(() => {
+      const y = Xe(n.collection.filters.value, n.collection.query.value.filters, {
+        formatNumber: ($) => s.number($),
+        from: v("core.collection.filters.range_from"),
+        until: v("core.collection.filters.range_until")
+      }), S = n.collection.query.value.search;
+      return S && y.push({ key: Ue, label: v("core.collection.empty.search"), values: [S], clears: [] }), y;
+    }), U = _(() => {
+      for (const y of [...x.value].reverse()) {
+        const S = k.value.find(($) => $.key === y || $.clears.includes(y));
+        if (S) return S;
+      }
+      return k.value[k.value.length - 1] ?? null;
+    });
+    function M(y) {
+      x.value = x.value.filter((S) => S !== y.key && !y.clears.includes(S)), y.key === Ue ? n.collection.search("") : n.collection.setFilters(Object.fromEntries(y.clears.map((S) => [S, null])));
+    }
+    function R() {
+      x.value = [], n.collection.clearFilters();
+    }
+    const K = _(() => {
+      const { sort: y, direction: S } = n.collection.query.value;
+      return y === null ? null : { key: y, direction: S };
+    }), B = se("card"), W = () => B.value?.scrollIntoView?.({ block: "start", behavior: "smooth" }), ee = _(() => n.collection.display.value === "loading"), G = _(() => n.collection.query.value.pageSize), w = _(() => n.collection.state.value.status === "refreshing"), N = _(() => n.collection.state.value.status === "stale"), F = _(() => {
+      const y = n.collection.state.value;
+      return y.status === "failed" || y.status === "stale" ? y.error ?? "" : "";
+    });
+    return (y, S) => (u(), h("div", {
+      class: "collection",
+      "aria-busy": ee.value || w.value || void 0,
+      "data-test": "collection"
+    }, [
+      D.value.length > 0 ? (u(), h("div", ao, [
+        C(o(He), {
+          "model-value": n.collection.query.value.view,
+          tabs: D.value,
+          presentation: n.viewsPresentation,
+          label: o(v)("core.collection.views_label"),
+          "onUpdate:modelValue": S[0] || (S[0] = ($) => n.collection.setView($ === null ? null : String($)))
+        }, null, 8, ["model-value", "tabs", "presentation", "label"])
+      ])) : P("", !0),
+      i("div", {
+        ref_key: "card",
+        ref: B,
+        class: le(["scroll-mt-16", o(g) ? "" : "rounded-group bg-surface-cell shadow-group"])
+      }, [
+        C(no, {
+          collection: n.collection,
+          narrow: o(f),
+          flat: o(g),
+          onTouched: j
+        }, {
+          default: q(() => [
+            ue(y.$slots, "toolbar")
+          ]),
+          _: 3
+        }, 8, ["collection", "narrow", "flat"]),
+        w.value ? (u(), h("div", ro, [
+          C(o(E), {
+            name: "loader4Line",
+            size: 14,
+            class: "animate-spin motion-reduce:animate-none"
+          }),
+          H(" " + b(o(v)("core.state.refreshing")), 1)
+        ])) : P("", !0),
+        N.value ? (u(), h("div", io, [
+          C(o(qe), {
+            tone: "warning",
+            role: "alert"
+          }, {
+            default: q(() => [
+              i("div", co, [
+                i("div", null, [
+                  i("p", null, b(F.value), 1),
+                  i("p", null, b(o(v)("core.state.stale")), 1)
+                ]),
+                C(ne, {
+                  prominence: "secondary",
+                  size: "sm",
+                  onClick: S[1] || (S[1] = ($) => n.collection.refresh())
+                }, {
+                  default: q(() => [
+                    H(b(o(v)("core.actions.retry")), 1)
+                  ]),
+                  _: 1
+                })
+              ])
+            ]),
+            _: 1
+          })
+        ])) : P("", !0),
+        C(ft, {
+          columns: p.value,
+          rows: m.value,
+          "row-key": n.collection.rowKey,
+          display: n.collection.display.value,
+          phone: o(g),
+          link: L,
+          search: O.value,
+          sorted: K.value,
+          "row-actions": n.rowActions,
+          "row-label": n.rowLabel,
+          "row-height": n.rowHeight,
+          density: n.density,
+          "actions-visible": n.actionsVisible,
+          "skeleton-rows": G.value,
+          "reserve-rows": ee.value ? G.value : void 0,
+          onSort: S[3] || (S[3] = ($) => n.collection.toggleSort($))
+        }, Be({
+          failed: q(() => [
+            C(o(qe), {
+              tone: "warning",
+              role: "alert"
+            }, {
+              default: q(() => [
+                i("div", uo, [
+                  i("div", null, [
+                    i("p", fo, b(o(v)("core.collection.failed.title")), 1),
+                    i("p", null, b(F.value), 1)
+                  ]),
+                  C(ne, {
+                    prominence: "secondary",
+                    size: "sm",
+                    onClick: S[2] || (S[2] = ($) => n.collection.refresh())
+                  }, {
+                    default: q(() => [
+                      H(b(o(v)("core.actions.retry")), 1)
+                    ]),
+                    _: 1
+                  })
+                ])
+              ]),
+              _: 1
+            })
+          ]),
+          empty: q(() => [
+            n.collection.display.value === "empty" && a.empty ? ue(y.$slots, "empty", {}, void 0, void 0, 0) : k.value.length > 0 ? (u(), I(Vt, {
+              key: 1,
+              chips: k.value,
+              "last-chip": U.value,
+              onRemove: M,
+              onClearAll: R
+            }, null, 8, ["chips", "last-chip"])) : (u(), I(o(ut), {
+              key: 2,
+              title: o(v)("core.collection.no_data"),
+              description: o(v)("core.collection.no_results")
+            }, null, 8, ["title", "description"]))
+          ]),
+          _: 2
+        }, [
+          J(c.value, ($) => ({
+            name: $,
+            fn: q((Y) => [
+              ue(y.$slots, $, Ie(De(Y ?? {})))
+            ])
+          }))
+        ]), 1032, ["columns", "rows", "row-key", "display", "phone", "search", "sorted", "row-actions", "row-label", "row-height", "density", "actions-visible", "skeleton-rows", "reserve-rows"]),
+        C(Gt, {
+          collection: n.collection,
+          compact: o(f),
+          flat: o(g),
+          onTurned: W
+        }, null, 8, ["collection", "compact", "flat"])
+      ], 2)
+    ], 8, so));
+  }
+}), To = /* @__PURE__ */ ie({
+  __name: "CollectionPage",
+  props: {
+    collection: {},
+    title: {},
+    description: { default: void 0 },
+    icon: { default: void 0 },
+    actions: { default: () => [] },
+    rowActions: { type: Function, default: void 0 },
+    rowLabel: { type: Function, default: void 0 },
+    rowHeight: { default: void 0 },
+    density: { default: "regular" },
+    viewsPresentation: { default: "segmented" },
+    actionsVisible: { type: Boolean, default: !1 }
+  },
+  setup(r) {
+    const n = r, a = _(() => Object.keys(Ce()).filter((s) => s !== "default")), v = _(() => n.collection.total.value || null);
+    return (s, c) => (u(), I(o(ct), {
+      title: n.title,
+      description: n.description,
+      icon: n.icon,
+      count: v.value,
+      actions: n.actions
+    }, {
+      default: q(() => [
+        C(po, {
+          collection: n.collection,
+          "row-actions": n.rowActions,
+          "row-label": n.rowLabel,
+          "row-height": n.rowHeight,
+          density: n.density,
+          "views-presentation": n.viewsPresentation,
+          "actions-visible": n.actionsVisible
+        }, Be({ _: 2 }, [
+          J(a.value, (p) => ({
+            name: p,
+            fn: q((f) => [
+              ue(s.$slots, p, Ie(De(f ?? {})))
+            ])
+          }))
+        ]), 1032, ["collection", "row-actions", "row-label", "row-height", "density", "views-presentation", "actions-visible"]),
+        ue(s.$slots, "default")
+      ]),
+      _: 3
+    }, 8, ["title", "description", "icon", "count", "actions"]));
+  }
+});
+export {
+  To as _,
+  po as a,
+  Ro as u
+};