@wssto2/vue-core 0.3.0 → 0.4.0

package/dist/control-7EP4tjYy.js

@@ -0,0 +1,313 @@
+import { inject as q, ref as G, computed as r, onBeforeUnmount as C, defineComponent as F, useSlots as V, openBlock as l, createBlock as L, resolveDynamicComponent as T, unref as t, normalizeClass as y, withCtx as _, createElementBlock as a, renderSlot as f, createCommentVNode as n, createElementVNode as g, createTextVNode as x, toDisplayString as u, createVNode as D, useAttrs as K, useId as P, mergeProps as A, createSlots as M, mergeDefaults as O } from "vue";
+import { useI18n as U } from "vue-i18n";
+import { _ as I } from "./Icon.vue_vue_type_script_lang-D7oC-d-S.js";
+import { RouterLink as Y } from "vue-router";
+import { c as H, a as J } from "./controlSurface-t7OEFESJ.js";
+import { u as Q } from "./mediaQuery-CygcXmFW.js";
+const W = {
+  label: void 0,
+  hint: void 0,
+  error: void 0,
+  required: !1,
+  editable: !0,
+  disabled: !1,
+  lockedReason: void 0,
+  presentation: "control",
+  name: void 0
+}, X = Symbol("vue-core.formGroup"), Z = Symbol("vue-core.formRowIndent"), ee = Symbol("vue-core.formEditable"), R = () => q(X, null), te = () => q(Z, 0);
+function oe(i) {
+  const e = R(), d = q(ee, G(!0)), c = Q(), h = r(() => !!e && !!i.disabled && (c.value || i.presentation === "value")), v = r(() => (i.editable ?? !0) && d.value && !h.value), o = r(() => !!e && !!i.disabled && v.value);
+  if (e) {
+    const m = e.registerLocked(r(() => !!i.disabled && d.value && i.presentation !== "value"));
+    C(m);
+  }
+  return { editable: v, locked: o };
+}
+const le = ["label", "hint", "error", "required", "editable", "disabled", "lockedReason", "presentation", "name"];
+function Re(i) {
+  return Object.fromEntries(le.map((e) => [e, i[e]]));
+}
+const re = {
+  key: 0,
+  class: "flex shrink-0 items-center"
+}, ae = { class: "row-body min-h-row min-w-0 flex-1 border-t border-border-separator py-2 pr-row-inset" }, se = {
+  key: 0,
+  class: "text-content-destructive",
+  "aria-hidden": "true"
+}, ne = ["id"], ie = {
+  key: 0,
+  class: "break-words text-body text-content-strong"
+}, de = ["id"], ue = /* @__PURE__ */ F({
+  __name: "FormRow",
+  props: {
+    label: { default: void 0 },
+    for: { default: void 0 },
+    sub: { default: void 0 },
+    subId: { default: void 0 },
+    required: { type: Boolean, default: !1 },
+    layout: { default: "entry" },
+    value: { default: void 0 },
+    to: { default: void 0 },
+    error: { default: void 0 },
+    errorId: { default: void 0 },
+    indent: { default: 0 },
+    labelLines: { default: void 0 },
+    labelAlign: { default: "center" }
+  },
+  setup(i) {
+    const e = i, d = V(), c = te(), h = r(() => c + e.indent), v = ["pl-row-inset", "pl-[calc(var(--app-row-inset)+1.25rem)]", "pl-[calc(var(--app-row-inset)+2.5rem)]"], o = { 1: "line-clamp-1", 2: "line-clamp-2", 3: "line-clamp-3" }, m = r(() => {
+      switch (e.layout) {
+        case "entry":
+          return "grid grid-cols-[var(--form-label-width,11rem)_minmax(0,1fr)] items-center gap-x-4 compact:grid-cols-[minmax(0,auto)_minmax(40%,1fr)]";
+        case "value":
+          return "grid grid-cols-[minmax(min-content,1fr)_minmax(0,auto)] items-center gap-x-4";
+        case "setting":
+          return "flex items-center gap-4";
+        default:
+          return "flex flex-col gap-1";
+      }
+    }), S = r(() => e.layout === "stacked" ? "text-footnote text-content-muted" : e.layout === "value" ? "text-body text-content-muted" : "text-body text-content-strong"), p = r(() => e.value !== void 0 && e.value !== null && e.value !== "");
+    return (b, w) => (l(), L(T(e.to ? t(Y) : "div"), {
+      to: e.to,
+      "data-test": "form-row",
+      "data-layout": e.layout,
+      "data-field-error": e.error ? "true" : void 0,
+      class: y(["form-row flex min-w-0 items-stretch gap-3 transition-colors duration-motion-fast first:rounded-t-group last:rounded-b-group focus-within:bg-tint-soft/50 [&:first-child>.row-body]:border-t-0", [v[Math.min(h.value, 2)], e.to ? "hover:bg-fill focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-border-focus" : ""]])
+    }, {
+      default: _(() => [
+        d.leading ? (l(), a("div", re, [
+          f(b.$slots, "leading")
+        ])) : n("", !0),
+        g("div", ae, [
+          g("div", {
+            class: y(["min-w-0", m.value])
+          }, [
+            e.label || e.sub || d.sub ? (l(), a("div", {
+              key: 0,
+              class: y([e.layout === "setting" ? "min-w-min flex-1" : "min-w-0", e.labelAlign === "top" ? "self-start pt-1" : ""])
+            }, [
+              g("div", {
+                class: y(d["label-trailing"] ? "flex items-center justify-between gap-3" : "")
+              }, [
+                (l(), L(T(e.for ? "label" : "span"), {
+                  for: e.for,
+                  class: y(["break-words", [S.value, e.labelLines ? o[e.labelLines] : "block"]])
+                }, {
+                  default: _(() => [
+                    x(u(e.label), 1),
+                    e.required ? (l(), a("span", se, " *")) : n("", !0)
+                  ]),
+                  _: 1
+                }, 8, ["for", "class"])),
+                f(b.$slots, "label-trailing")
+              ], 2),
+              e.sub || d.sub ? (l(), a("small", {
+                key: 0,
+                id: e.subId,
+                class: "mt-0.5 block text-footnote text-content-muted"
+              }, [
+                f(b.$slots, "sub", {}, () => [
+                  x(u(e.sub), 1)
+                ])
+              ], 8, ne)) : n("", !0)
+            ], 2)) : n("", !0),
+            g("div", {
+              class: y(["flex min-w-0 items-center gap-2", e.layout === "value" ? "justify-end text-right" : e.layout === "setting" ? "flex-wrap justify-end text-right" : e.layout === "entry" ? "compact:justify-end" : ""])
+            }, [
+              f(b.$slots, "default", {}, () => [
+                p.value ? (l(), a("span", ie, u(e.value), 1)) : n("", !0)
+              ]),
+              f(b.$slots, "trailing"),
+              e.to ? (l(), L(t(I), {
+                key: 0,
+                name: "arrowRightSLine",
+                size: 18,
+                class: "shrink-0 text-content-disabled"
+              })) : n("", !0)
+            ], 2)
+          ], 2),
+          e.error ? (l(), a("p", {
+            key: 0,
+            id: e.errorId,
+            class: "mt-1 flex items-start gap-1.5 text-footnote text-content-destructive",
+            role: "alert"
+          }, [
+            D(t(I), {
+              name: "alertTriangle",
+              size: 14,
+              class: "mt-px shrink-0"
+            }),
+            x(" " + u(e.error), 1)
+          ], 8, de)) : n("", !0)
+        ])
+      ]),
+      _: 3
+    }, 8, ["to", "data-layout", "data-field-error", "class"]));
+  }
+}), ce = ["title"], fe = {
+  key: 0,
+  class: "mr-1"
+}, ve = {
+  key: 1,
+  class: "ml-1 text-content-muted"
+}, me = {
+  key: 3,
+  class: "block text-body text-content-disabled"
+}, be = {
+  key: 0,
+  class: "sr-only"
+}, ye = ["data-field-error"], pe = {
+  key: 0,
+  class: "flex items-center justify-between gap-3"
+}, ge = ["for"], xe = {
+  key: 0,
+  class: "text-content-destructive",
+  "aria-hidden": "true"
+}, he = ["id"], ke = ["id"], Ee = /* @__PURE__ */ F({
+  __name: "Field",
+  props: /* @__PURE__ */ O({
+    label: {},
+    hint: {},
+    error: {},
+    required: { type: Boolean },
+    editable: { type: Boolean },
+    disabled: { type: Boolean },
+    lockedReason: {},
+    presentation: {},
+    name: {},
+    value: { type: [String, Number, Boolean, null] },
+    prefix: {},
+    suffix: {},
+    valueStyle: {},
+    rowLayout: {},
+    rowLabelAlign: {}
+  }, { ...W, value: void 0, prefix: void 0, suffix: void 0, valueStyle: void 0, rowLayout: "entry", rowLabelAlign: "center" }),
+  setup(i) {
+    const e = i, { t: d } = U(), c = V(), h = K(), v = R(), { editable: o, locked: m } = oe(e), S = P(), p = r(() => e.name ?? S), b = r(() => `${p.value}-hint`), w = r(() => `${p.value}-error`);
+    if (v?.registerField) {
+      const s = h["data-field-key"], j = v.registerField(typeof s == "string" ? s : void 0, r(() => e.disabled));
+      C(j);
+    }
+    const k = r(() => {
+      const s = e.value;
+      return s == null ? !1 : typeof s == "string" ? s.length > 0 : typeof s == "number" ? !Number.isNaN(s) : !0;
+    }), E = r(() => typeof e.value == "boolean" ? e.value ? d("core.form.yes") : d("core.form.no") : e.value), z = r(() => !!v && !o.value && v.hideEmpty.value && !k.value && !c.readonly), N = r(() => [e.hint && o.value ? b.value : null, e.error ? w.value : null].filter(Boolean).join(" ") || void 0), $ = r(() => o.value ? e.rowLayout : e.rowLayout === "stacked" ? "stacked" : "value"), B = r(
+      () => o.value && !m.value && e.required ? { "data-field-required": "true", "data-field-filled": k.value ? "true" : void 0 } : {}
+    );
+    return (s, j) => t(v) && !z.value ? (l(), L(ue, A({ key: 0 }, B.value, {
+      label: e.label,
+      for: t(o) ? p.value : void 0,
+      sub: t(o) ? e.hint : void 0,
+      "sub-id": b.value,
+      required: t(o) && !t(m) && e.required,
+      layout: $.value,
+      "label-align": $.value === "entry" ? e.rowLabelAlign : void 0,
+      error: t(o) ? e.error : void 0,
+      "error-id": w.value,
+      "data-field-locked": t(m) ? "true" : void 0
+    }), M({
+      default: _(() => [
+        g("div", {
+          class: "relative w-full min-w-0",
+          title: t(m) ? e.lockedReason : void 0
+        }, [
+          g("div", {
+            class: y(t(o) ? $.value === "setting" ? "flex min-w-0 flex-col items-end" : $.value === "stacked" ? "flex min-w-0 flex-col items-stretch" : "flex min-w-0 flex-col items-start compact:items-end" : "")
+          }, [
+            t(o) ? f(s.$slots, "default", {
+              id: p.value,
+              describedby: N.value,
+              invalid: !!e.error,
+              required: e.required,
+              disabled: e.disabled
+            }, void 0, void 0, 0) : t(c).readonly ? f(s.$slots, "readonly", {}, void 0, void 0, 1) : k.value ? (l(), a("span", {
+              key: 2,
+              class: y(["block break-words text-body text-content-strong", e.valueStyle === "mono" ? "font-mono" : e.valueStyle === "numeric" ? "tabular-nums" : ""])
+            }, [
+              e.prefix ? (l(), a("span", fe, u(e.prefix), 1)) : n("", !0),
+              x(u(E.value), 1),
+              e.suffix ? (l(), a("span", ve, u(e.suffix), 1)) : n("", !0)
+            ], 2)) : (l(), a("span", me, u(t(d)("core.state.no_value")), 1))
+          ], 2)
+        ], 8, ce),
+        t(m) && e.lockedReason ? (l(), a("span", be, u(e.lockedReason), 1)) : n("", !0)
+      ]),
+      _: 2
+    }, [
+      t(o) && t(c).trailing ? {
+        name: "trailing",
+        fn: _(() => [
+          f(s.$slots, "trailing")
+        ]),
+        key: "0"
+      } : void 0,
+      t(o) && t(c).labelTrailing ? {
+        name: "label-trailing",
+        fn: _(() => [
+          f(s.$slots, "labelTrailing")
+        ]),
+        key: "1"
+      } : void 0
+    ]), 1040, ["label", "for", "sub", "sub-id", "required", "layout", "label-align", "error", "error-id", "data-field-locked"])) : t(v) ? n("", !0) : (l(), a("div", A({ key: 1 }, B.value, {
+      "data-field-error": e.error ? "true" : void 0,
+      class: "flex min-w-0 flex-col gap-1"
+    }), [
+      e.label || t(o) && t(c).labelTrailing ? (l(), a("div", pe, [
+        e.label ? (l(), a("label", {
+          key: 0,
+          for: t(o) ? p.value : void 0,
+          class: "text-footnote font-medium text-content-muted"
+        }, [
+          x(u(e.label), 1),
+          t(o) && e.required ? (l(), a("span", xe, " *")) : n("", !0)
+        ], 8, ge)) : n("", !0),
+        t(o) ? f(s.$slots, "labelTrailing", {}, void 0, void 0, 1) : n("", !0)
+      ])) : n("", !0),
+      t(o) ? f(s.$slots, "default", {
+        id: p.value,
+        describedby: N.value,
+        invalid: !!e.error,
+        required: e.required,
+        disabled: e.disabled
+      }, void 0, void 0, 1) : t(c).readonly ? f(s.$slots, "readonly", {}, void 0, void 0, 2) : (l(), a("span", {
+        key: 3,
+        class: y(["text-body", k.value ? "text-content-strong" : "text-content-disabled"])
+      }, u(k.value ? `${e.prefix ?? ""}${E.value}${e.suffix ?? ""}` : t(d)("core.state.no_value")), 3)),
+      e.hint && t(o) ? (l(), a("p", {
+        key: 4,
+        id: b.value,
+        class: "text-footnote text-content-muted"
+      }, u(e.hint), 9, he)) : n("", !0),
+      e.error ? (l(), a("p", {
+        key: 5,
+        id: w.value,
+        role: "alert",
+        class: "flex items-start gap-1.5 text-footnote text-content-destructive"
+      }, [
+        D(t(I), {
+          name: "alertTriangle",
+          size: 14,
+          class: "mt-px shrink-0"
+        }),
+        x(" " + u(e.error), 1)
+      ], 8, ke)) : n("", !0)
+    ], 16, ye));
+  }
+}), _e = "rounded-control transition-[background-color,box-shadow,opacity] duration-motion-fast ease-motion-standard";
+function Ne(i, e) {
+  const d = !!R();
+  return r(() => d ? H({ kind: i, state: e() }) : [_e, ...J(i, e()).map(([c]) => c)].join(" "));
+}
+export {
+  Ee as _,
+  R as a,
+  W as b,
+  Ne as c,
+  ee as d,
+  ue as e,
+  Re as f,
+  X as g,
+  Z as h,
+  te as i,
+  oe as u
+};

package/dist/controls/index.js

@@ -1,9 +1,9 @@
-import { _ as A } from "../IconTile.vue_vue_type_script_setup_true_lang-D7QgnUyN.js";
+import { _ as A } from "../IconTile.vue_vue_type_script_setup_true_lang-BpIjgu5E.js";
 import { defineComponent as p, useSlots as c, openBlock as r, createElementBlock as d, normalizeClass as u, createElementVNode as f, renderSlot as m, toDisplayString as b, createVNode as x, unref as h, useModel as v, useTemplateRef as _, withDirectives as y, mergeProps as g, vModelText as k, mergeModels as w } from "vue";
-import { _ as B } from "../Icon.vue_vue_type_script_lang-VvcV2Bzo.js";
+import { _ as B } from "../Icon.vue_vue_type_script_lang-D7oC-d-S.js";
 import { _ as N } from "../DateButton.vue_vue_type_script_setup_true_lang-EcqrfWKz.js";
-import { _ as W } from "../Tabs.vue_vue_type_script_setup_true_lang-BeGaydRr.js";
-import { _ as L } from "../SwipeActions.vue_vue_type_script_setup_true_lang-4I8m27ol.js";
+import { _ as W } from "../Tabs.vue_vue_type_script_setup_true_lang-CcMcE38r.js";
+import { _ as L } from "../SwipeActions.vue_vue_type_script_setup_true_lang-BJIA2JfI.js";
 import { c as j, a as F, b as G, d as H } from "../controlSurface-t7OEFESJ.js";
 const S = ["disabled", "aria-haspopup", "aria-expanded", "aria-invalid"], V = { class: "min-w-0 truncate" }, P = {
   key: 1,