@wssto2/vue-core 0.2.0 → 0.4.0

package/dist/SectionNavigator.vue_vue_type_script_setup_true_lang-DSMXEaCs.js

@@ -0,0 +1,314 @@
+import { defineComponent as Y, computed as x, inject as Z, watch as M, onBeforeUnmount as P, useTemplateRef as ee, ref as te, onMounted as ae, openBlock as t, createElementBlock as a, createBlock as F, resolveDynamicComponent as se, unref as l, createElementVNode as s, renderSlot as $, Fragment as y, renderList as w, normalizeClass as d, toDisplayString as i, createCommentVNode as c, createVNode as v, withCtx as C, nextTick as oe } from "vue";
+import { useI18n as ne } from "vue-i18n";
+import { RouterLink as z } from "vue-router";
+import { _ as W } from "./IconTile.vue_vue_type_script_setup_true_lang-BpIjgu5E.js";
+import { _ as q } from "./Icon.vue_vue_type_script_lang-D7oC-d-S.js";
+import { a as le } from "./mediaQuery-CygcXmFW.js";
+import { u as re } from "./access-DdRFrVV1.js";
+import { u as ie, a as ce } from "./sections-CntvUTxn.js";
+import { p as ue } from "./AdaptivePageShell.vue_vue_type_script_setup_true_lang-BoinCY93.js";
+import { p as de } from "./sectionIndex-BS0ic5W7.js";
+import { _ as G, a as me } from "./SectionList.vue_vue_type_script_setup_true_lang-BFYls8fR.js";
+const pe = {
+  key: 0,
+  "data-test": "section-navigator",
+  "data-variant": "none"
+}, fe = {
+  key: 1,
+  "data-test": "section-navigator",
+  "data-variant": "sidebar",
+  class: "grid min-w-0 grid-cols-[minmax(0,15rem)_minmax(0,1fr)] items-start gap-8"
+}, ve = { class: "sticky top-[calc(var(--app-bar-height)+1rem+var(--shell-banner-h,0px))] flex min-w-0 flex-col gap-4 self-start" }, be = ["aria-label"], he = { class: "flex flex-col gap-0.5" }, ge = ["href", "aria-current", "data-test", "onClick"], xe = { class: "min-w-0 flex-1 truncate" }, _e = {
+  key: 0,
+  class: "text-subheadline tabular-nums text-content-muted"
+}, ke = { class: "min-w-0" }, ye = ["data-variant"], we = {
+  key: 0,
+  "data-test": "section-summary"
+}, Le = ["aria-label"], Se = { class: "flex gap-2.5 compact:gap-1.5" }, $e = ["href", "aria-current", "data-test", "data-done", "onClick"], Ce = {
+  key: 0,
+  class: "flex size-6.5 shrink-0 items-center justify-center rounded-full bg-control-on text-white"
+}, ze = { class: "flex min-w-0 flex-col" }, Re = { class: "compact:hidden" }, Ae = { class: "hidden compact:inline" }, Be = {
+  key: 0,
+  class: "hidden compact:inline"
+}, Ne = {
+  key: 1,
+  class: "sr-only"
+}, je = ["aria-label"], Ee = { class: "flex gap-0.5" }, Fe = ["href", "aria-current", "data-test", "onClick"], Oe = ["title"], Te = ["aria-label"], Ve = {
+  key: 0,
+  class: "px-row-inset pb-2 text-subheadline font-semibold text-content-strong compact:text-footnote compact:font-normal compact:uppercase compact:tracking-wide compact:text-content-muted"
+}, De = { class: "overflow-hidden rounded-group bg-surface-cell shadow-group" }, Ie = { class: "flex shrink-0 items-center" }, Me = { class: "row-body flex min-h-row min-w-0 flex-1 items-center gap-2 border-t border-border-separator py-2 pr-row-inset" }, Pe = { class: "min-w-0 flex-1 break-words text-body text-content-strong" }, We = {
+  key: 0,
+  class: "text-body tabular-nums text-content-muted"
+}, qe = ["data-test"], Ge = {
+  key: 0,
+  class: "sticky top-[calc(var(--app-bar-height)+1rem+var(--shell-banner-h,0px))] min-w-0 self-start"
+}, st = /* @__PURE__ */ Y({
+  __name: "SectionNavigator",
+  props: {
+    label: {},
+    desktop: { default: "segments" },
+    compact: { default: "segmented" },
+    backLabel: { default: void 0 },
+    counts: { default: () => ({}) },
+    steps: { default: void 0 }
+  },
+  setup(K) {
+    const n = K, { t: Q } = ne(), R = ie();
+    ce(R);
+    const { sections: f, active: b, first: h, subPage: O } = R, T = de(), U = re(), A = le("(min-width: 64rem)"), u = x(() => n.steps ? "steps" : A.value ? n.desktop : n.compact === "auto" ? f.value.length > 5 ? "rows" : "segmented" : n.compact), g = x(() => f.value.length > 1), H = x(() => R.declared.value > 0 && f.value.length === 0), B = x(() => !!b.value && b.value.name === h.value?.name && !O.value), V = x(() => T.sections.value.length > 1), L = x(() => u.value === "steps" && A.value && V.value), m = (o) => n.steps?.[o] ?? { done: !1 }, J = { positive: "text-status-success-content", warning: "text-status-warning-content", critical: "text-status-danger-content" }, S = Z(ue, null);
+    M(
+      () => {
+        if (O.value && b.value && h.value) {
+          const o = { label: n.backLabel || h.value.label, to: h.value.to }, p = b.value.name === h.value.name && !n.backLabel;
+          return { label: b.value.shortLabel, to: b.value.to, path: p ? [o] : [o, { label: b.value.label, to: b.value.to }] };
+        }
+        return u.value === "rows" && g.value && !B.value && h.value ? { label: n.backLabel || h.value.label, to: h.value.to } : null;
+      },
+      (o) => {
+        S && (S.value = o);
+      },
+      { immediate: !0 }
+    ), P(() => {
+      S && (S.value = null);
+    });
+    const X = x(() => {
+      const o = [];
+      for (const p of f.value.slice(1)) {
+        const e = o[o.length - 1];
+        e && e.header === p.group ? e.sections.push(p) : o.push({ key: p.name, header: p.group, sections: [p] });
+      }
+      return o;
+    }), _ = ee("segments"), N = te(!1);
+    async function D() {
+      if (u.value !== "segments" || !_.value) return;
+      N.value = !1, await oe();
+      const o = _.value?.querySelectorAll("[data-segment-label]") ?? [];
+      N.value = [...o].some((p) => p.scrollWidth > p.clientWidth + 1);
+    }
+    let j = null;
+    ae(() => {
+      typeof ResizeObserver > "u" || !_.value || (j = new ResizeObserver(() => void D()), j.observe(_.value));
+    }), P(() => j?.disconnect()), M([u, f], () => void D(), { flush: "post" });
+    const I = (o) => u.value === "segments" && !N.value ? o.label : o.shortLabel;
+    return (o, p) => H.value ? (t(), a("div", pe, [
+      (t(), F(se(l(U).noAccess)))
+    ])) : g.value && u.value === "sidebar" ? (t(), a("div", fe, [
+      s("aside", ve, [
+        $(o.$slots, "summary"),
+        s("nav", {
+          "aria-label": n.label
+        }, [
+          s("ul", he, [
+            (t(!0), a(y, null, w(l(f), (e, r) => (t(), a("li", {
+              key: e.name
+            }, [
+              e.group && e.group !== l(f)[r - 1]?.group ? (t(), a("div", {
+                key: 0,
+                "data-test": "section-group",
+                class: d(["px-2.5 pb-1.5 text-caption font-semibold tracking-wide text-content-muted uppercase", r > 0 ? "pt-4" : "pt-1"])
+              }, i(e.group), 3)) : c("", !0),
+              v(l(z), {
+                to: e.to,
+                custom: ""
+              }, {
+                default: C(({ href: k, navigate: E }) => [
+                  s("a", {
+                    href: k,
+                    "aria-current": e.active ? "page" : void 0,
+                    "data-test": `section-${e.name}`,
+                    class: d(["flex min-h-[2.125rem] items-center gap-2.5 rounded-control py-1 pr-2.5 pl-1.5 text-body text-content-strong transition-colors duration-motion-fast focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-border-focus", e.active ? "bg-tint-soft font-semibold" : "hover:bg-fill"]),
+                    onClick: E
+                  }, [
+                    v(l(W), {
+                      tone: e.active ? "brand" : "anchor",
+                      icon: e.icon
+                    }, null, 8, ["tone", "icon"]),
+                    s("span", xe, i(e.label), 1),
+                    n.counts[e.name] !== void 0 ? (t(), a("span", _e, i(n.counts[e.name]), 1)) : c("", !0)
+                  ], 10, ge)
+                ]),
+                _: 2
+              }, 1032, ["to"]),
+              e.active && V.value ? (t(), F(G, { key: 1 })) : c("", !0)
+            ]))), 128))
+          ])
+        ], 8, be)
+      ]),
+      s("div", ke, [
+        $(o.$slots, "default")
+      ])
+    ])) : (t(), a("div", {
+      key: 2,
+      "data-test": "section-navigator",
+      "data-variant": g.value ? u.value : "none",
+      class: "flex min-w-0 flex-col gap-section-gap"
+    }, [
+      o.$slots.summary && (u.value !== "rows" || B.value || !g.value) ? (t(), a("div", we, [
+        $(o.$slots, "summary")
+      ])) : c("", !0),
+      g.value && u.value === "steps" ? (t(), a("nav", {
+        key: 1,
+        "aria-label": n.label,
+        "data-test": "section-steps"
+      }, [
+        s("ol", Se, [
+          (t(!0), a(y, null, w(l(f), (e, r) => (t(), a("li", {
+            key: e.name,
+            class: "flex min-w-0 flex-1"
+          }, [
+            v(l(z), {
+              to: e.to,
+              custom: ""
+            }, {
+              default: C(({ href: k, navigate: E }) => [
+                s("a", {
+                  href: k,
+                  "aria-current": e.active ? "step" : void 0,
+                  "data-test": `section-${e.name}`,
+                  "data-done": m(e.name).done ? "true" : void 0,
+                  class: d(["flex min-w-0 flex-1 items-center gap-3 rounded-group px-4 py-3 transition-colors duration-motion-fast focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-border-focus compact:flex-col compact:items-start compact:gap-1.5 compact:p-2", e.active ? "bg-tint-soft ring-2 ring-tint ring-inset" : "bg-surface-cell shadow-group hover:bg-fill"]),
+                  onClick: E
+                }, [
+                  m(e.name).done ? (t(), a("span", Ce, [
+                    v(l(q), {
+                      name: "checkCustom",
+                      size: 14
+                    })
+                  ])) : (t(), a("span", {
+                    key: 1,
+                    class: d(["flex size-6.5 shrink-0 items-center justify-center rounded-full text-footnote font-semibold", e.active ? "bg-tint text-content-on-tint" : "text-content-muted ring-2 ring-fill-strong ring-inset"])
+                  }, i(r + 1), 3)),
+                  s("span", ze, [
+                    s("span", {
+                      class: d(["truncate text-headline compact:text-footnote", e.active || m(e.name).done ? "font-semibold text-content-strong" : "font-medium text-content-muted"])
+                    }, [
+                      s("span", Re, i(e.label), 1),
+                      s("span", Ae, i(e.shortLabel), 1)
+                    ], 2),
+                    m(e.name).sub ? (t(), a("span", {
+                      key: 0,
+                      "data-test": "section-step-sub",
+                      class: d(["truncate text-footnote compact:text-caption", m(e.name).tone ? J[m(e.name).tone] : "text-content-muted"])
+                    }, [
+                      s("span", {
+                        class: d(m(e.name).shortSub ? "compact:hidden" : "")
+                      }, i(m(e.name).sub), 3),
+                      m(e.name).shortSub ? (t(), a("span", Be, i(m(e.name).shortSub), 1)) : c("", !0)
+                    ], 2)) : c("", !0),
+                    m(e.name).done ? (t(), a("span", Ne, i(l(Q)("core.steps.done")), 1)) : c("", !0)
+                  ])
+                ], 10, $e)
+              ]),
+              _: 2
+            }, 1032, ["to"])
+          ]))), 128))
+        ])
+      ], 8, Le)) : c("", !0),
+      g.value && (u.value === "segments" || u.value === "segmented") ? (t(), a("div", {
+        key: 2,
+        class: d(u.value === "segmented" ? "z-20 -mx-screen-padding bg-surface-page/90 px-screen-padding py-2 backdrop-blur-xl max-md:sticky max-md:top-[calc(max(0.25rem,env(safe-area-inset-top))+var(--app-bar-height)+0.25rem+1px+var(--shell-banner-h,0px))]" : "")
+      }, [
+        s("nav", {
+          ref_key: "segments",
+          ref: _,
+          "aria-label": n.label,
+          class: "max-w-full overflow-x-auto rounded-control bg-fill p-0.5 scrollbar-hide"
+        }, [
+          s("ul", Ee, [
+            (t(!0), a(y, null, w(l(f), (e) => (t(), a("li", {
+              key: e.name,
+              class: "flex min-w-0 flex-1"
+            }, [
+              v(l(z), {
+                to: e.to,
+                custom: ""
+              }, {
+                default: C(({ href: r, navigate: k }) => [
+                  s("a", {
+                    href: r,
+                    "aria-current": e.active ? "page" : void 0,
+                    "data-test": `section-${e.name}`,
+                    class: d(["flex min-h-8 min-w-0 flex-1 items-center justify-center gap-1.5 rounded-control px-3 py-1 text-subheadline whitespace-nowrap transition-colors duration-motion-fast focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:outline-border-focus compact:min-h-[2.125rem] compact:px-1.5", e.active ? "bg-segment-selected font-semibold text-content-strong shadow-sm" : "font-medium text-content hover:text-content-strong"]),
+                    onClick: k
+                  }, [
+                    s("span", {
+                      class: "truncate",
+                      "data-segment-label": "",
+                      title: I(e) !== e.label ? e.label : void 0
+                    }, i(I(e)), 9, Oe),
+                    n.counts[e.name] !== void 0 ? (t(), a("span", {
+                      key: 0,
+                      "data-test": "section-count",
+                      class: d(["min-w-[1.125rem] rounded-full px-1.5 text-center text-caption font-semibold tabular-nums", e.active ? "bg-tint-soft text-content-link" : "bg-surface-cell text-content-muted"])
+                    }, i(n.counts[e.name]), 3)) : c("", !0)
+                  ], 10, Fe)
+                ]),
+                _: 2
+              }, 1032, ["to"])
+            ]))), 128))
+          ])
+        ], 8, je)
+      ], 2)) : g.value && u.value === "rows" && B.value ? (t(), a("nav", {
+        key: 3,
+        "aria-label": n.label,
+        "data-test": "section-rows",
+        class: "flex flex-col gap-group-gap"
+      }, [
+        (t(!0), a(y, null, w(X.value, (e) => (t(), a("section", {
+          key: e.key,
+          class: "flex min-w-0 flex-col"
+        }, [
+          e.header ? (t(), a("h3", Ve, i(e.header), 1)) : c("", !0),
+          s("ul", De, [
+            (t(!0), a(y, null, w(e.sections, (r) => (t(), a("li", {
+              key: r.name,
+              class: "[&:first-child_.row-body]:border-t-0"
+            }, [
+              v(l(z), {
+                to: r.to,
+                "data-test": `section-${r.name}`,
+                class: "flex min-w-0 items-stretch gap-3 pl-row-inset transition-colors duration-motion-fast hover:bg-fill focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-border-focus"
+              }, {
+                default: C(() => [
+                  s("span", Ie, [
+                    v(l(W), {
+                      tone: "anchor",
+                      icon: r.icon
+                    }, null, 8, ["icon"])
+                  ]),
+                  s("span", Me, [
+                    s("span", Pe, i(r.label), 1),
+                    n.counts[r.name] !== void 0 ? (t(), a("span", We, i(n.counts[r.name]), 1)) : c("", !0),
+                    v(l(q), {
+                      name: "arrowRightSLine",
+                      size: 18,
+                      class: "shrink-0 text-content-disabled"
+                    })
+                  ])
+                ]),
+                _: 2
+              }, 1032, ["to", "data-test"])
+            ]))), 128))
+          ])
+        ]))), 128))
+      ], 8, Te)) : c("", !0),
+      s("div", {
+        class: d(L.value ? "grid min-w-0 grid-cols-[minmax(0,1fr)_minmax(0,14rem)] items-start gap-7" : "contents"),
+        "data-test": L.value ? "section-steps-form" : void 0
+      }, [
+        s("div", {
+          class: d(L.value ? "min-w-0" : "contents")
+        }, [
+          $(o.$slots, "default")
+        ], 2),
+        L.value ? (t(), a("aside", Ge, [
+          v(G, { standalone: "" })
+        ])) : c("", !0)
+      ], 10, qe),
+      !l(A) && l(T).sections.value.length > 2 ? (t(), F(me, { key: 4 })) : c("", !0)
+    ], 8, ye));
+  }
+});
+export {
+  st as _
+};

package/dist/SegmentedField.vue_vue_type_script_setup_true_lang-BMqWlpsL.js

@@ -0,0 +1,58 @@
+import { defineComponent as x, openBlock as l, createBlock as y, mergeProps as g, unref as s, withCtx as w, createElementVNode as _, normalizeClass as o, createElementBlock as a, Fragment as V, renderList as k, createTextVNode as h, toDisplayString as r, createCommentVNode as B, mergeDefaults as C } from "vue";
+import { u as L, a as F, _ as D, f as N, b as E } from "./control-7EP4tjYy.js";
+const P = ["id", "aria-label", "aria-describedby", "aria-invalid"], R = ["disabled", "aria-pressed", "onClick"], G = /* @__PURE__ */ x({
+  __name: "SegmentedField",
+  props: /* @__PURE__ */ C({
+    label: {},
+    hint: {},
+    error: {},
+    required: { type: Boolean },
+    editable: { type: Boolean },
+    disabled: { type: Boolean },
+    lockedReason: {},
+    presentation: {},
+    name: {},
+    modelValue: {},
+    options: {},
+    rowLayout: {}
+  }, { ...E, modelValue: null, rowLayout: "setting" }),
+  emits: ["update:modelValue"],
+  setup(i, { emit: d }) {
+    const e = i, u = d, { editable: c } = L(e), m = !!F(), f = () => e.options.find((n) => n.value === e.modelValue)?.label ?? null;
+    return (n, S) => (l(), y(D, g(s(N)(e), {
+      value: f(),
+      "row-layout": e.rowLayout
+    }), {
+      default: w(({ id: b, describedby: p, invalid: v }) => [
+        _("div", {
+          id: b,
+          role: "group",
+          "aria-label": e.label,
+          "aria-describedby": p,
+          "aria-invalid": v || void 0,
+          "data-test": "segmented",
+          class: o(["max-w-full flex-wrap rounded-control bg-fill p-0.5", [m && e.rowLayout === "stacked" ? "flex w-full" : "inline-flex", e.disabled ? "opacity-45" : ""]])
+        }, [
+          (l(!0), a(V, null, k(e.options, (t) => (l(), a("button", {
+            key: t.value,
+            type: "button",
+            disabled: e.disabled || !s(c) || t.disabled,
+            "aria-pressed": t.value === e.modelValue,
+            class: o(["relative min-h-7 min-w-fit flex-1 whitespace-nowrap rounded-control px-3.5 py-1 text-sm transition-colors duration-motion-fast ease-motion-standard focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:outline-border-focus", t.value === e.modelValue ? "bg-segment-selected font-semibold text-content-strong shadow-sm" : "cursor-pointer font-medium text-content hover:text-content-strong"]),
+            onClick: ($) => u("update:modelValue", t.value)
+          }, [
+            h(r(t.label) + " ", 1),
+            t.count !== void 0 ? (l(), a("span", {
+              key: 0,
+              class: o(["ml-1.5 rounded-full px-1.5 text-caption font-semibold tabular-nums", t.value === e.modelValue ? "bg-tint-soft text-content-link" : "bg-fill-strong text-content-muted"])
+            }, r(t.count), 3)) : B("", !0)
+          ], 10, R))), 128))
+        ], 10, P)
+      ]),
+      _: 1
+    }, 16, ["value", "row-layout"]));
+  }
+});
+export {
+  G as _
+};