@zealsolutions/zeal-ui 1.0.0-alpha.358 → 1.0.0-alpha.360

package/dist/FormField-CrpT1GTF.js

@@ -0,0 +1,68 @@
+import { openBlock as a, createElementBlock as l, createElementVNode as t, normalizeClass as n, createTextVNode as r, toDisplayString as s, createCommentVNode as o, createVNode as d, withCtx as c, renderSlot as f } from "vue";
+import { _ as m } from "./TruncateText-BOyOYUV6.js";
+const u = { class: "flex justify-between text-style-label select-none" }, h = { class: "flex items-baseline gap-x-2 min-w-0 pr-5" }, x = ["for"], y = {
+  key: 0,
+  class: "text-app-950"
+}, p = { class: "flex mt-2.5" }, _ = {
+  __name: "FormField",
+  props: {
+    label: {
+      type: String,
+      default: ""
+    },
+    errorMessage: {
+      type: String,
+      default: ""
+    },
+    required: {
+      type: Boolean,
+      default: !1
+    },
+    disabled: {
+      type: Boolean,
+      default: !1
+    },
+    // SOP-Admin #435: optional grey helper text shown beside the label.
+    hint: {
+      type: String,
+      default: ""
+    },
+    // #435: when true the hint renders in the error colour (limit hit).
+    hintError: {
+      type: Boolean,
+      default: !1
+    }
+  },
+  setup(e) {
+    return (i, b) => (a(), l("div", null, [
+      t("div", u, [
+        t("div", h, [
+          t("label", {
+            for: e.label,
+            class: n(["whitespace-nowrap font-medium", e.disabled ? "text-steel-800" : ""])
+          }, [
+            r(s(e.label), 1),
+            e.required ? (a(), l("span", y, " *")) : o("", !0)
+          ], 10, x),
+          e.hint ? (a(), l("span", {
+            key: 0,
+            "data-testid": "field-hint",
+            class: n(["whitespace-nowrap font-medium", e.hintError ? "text-error-950" : "text-steel-800 dark:text-content-muted"])
+          }, s(e.hint), 3)) : o("", !0)
+        ]),
+        d(m, { class: "text-error-950 select-none" }, {
+          default: c(() => [
+            r(s(e.errorMessage), 1)
+          ]),
+          _: 1
+        })
+      ]),
+      t("div", p, [
+        f(i.$slots, "default")
+      ])
+    ]));
+  }
+};
+export {
+  _
+};

package/dist/InputField-D6bS7qJm.js

@@ -0,0 +1,71 @@
+import { mergeModels as a, useModel as m, computed as g, openBlock as i, createElementBlock as h, normalizeClass as s, renderSlot as x, withDirectives as b, createElementVNode as y, vModelDynamic as k, createBlock as v, createCommentVNode as w } from "vue";
+import B from "./CircleExclamationIcon-vvAjN3c9.js";
+const E = ["name", "type", "placeholder", "disabled", "maxlength"], I = {
+  __name: "InputField",
+  props: /* @__PURE__ */ a({
+    hasError: {
+      type: Boolean,
+      default: !1
+    },
+    label: {
+      type: String,
+      default: ""
+    },
+    placeholder: {
+      type: String,
+      default: ""
+    },
+    fieldType: {
+      type: String,
+      default: "text"
+    },
+    disabled: {
+      type: Boolean,
+      default: !1
+    },
+    // SOP-Admin #435: native character cap. `maxlength` blocks typing past the limit; combined with
+    // the `overflow` event below it lets a wrapper warn the user when they try to exceed it.
+    maxlength: {
+      type: Number,
+      default: null
+    }
+  }, {
+    modelValue: {},
+    modelModifiers: {}
+  }),
+  emits: /* @__PURE__ */ a(["blur", "overflow"], ["update:modelValue"]),
+  setup(e, { emit: d }) {
+    const t = e, o = d, l = m(e, "modelValue"), u = () => {
+      o("blur");
+    }, c = (r) => {
+      if (t.maxlength == null)
+        return;
+      String(r.inputType || "").startsWith("insert") && String(l.value ?? "").length >= t.maxlength && o("overflow");
+    }, p = g(() => t.hasError && !t.disabled ? "ring-error-950 focus-within:bg-error-100 focus-within:ring-error-950 text-error-950" : t.disabled ? "ring-steel-500 dark:ring-line-strong bg-steel-100 dark:bg-surface cursor-not-allowed" : "ring-steel-500 dark:ring-line-strong focus-within:bg-app-100 focus-within:ring-app-950 dark:focus-within:text-black-950 text-black-950 dark:text-content");
+    return (r, n) => (i(), h("div", {
+      class: s(["relative flex flex-1 gap-x-2 px-4 text-style-input items-center h-10 rounded-[20px] ring-1 ring-inset focus-within:ring-2 focus-within:outline-none", p.value])
+    }, [
+      x(r.$slots, "icon"),
+      b(y("input", {
+        "onUpdate:modelValue": n[0] || (n[0] = (f) => l.value = f),
+        name: e.label,
+        onBlur: u,
+        onBeforeinput: c,
+        type: e.fieldType,
+        class: s(["flex-1 border-0 bg-[transparent] pl-0 ring-0 focus:ring-0 outline-none focus:outline-none disabled:placeholder:text-steel-800 dark:disabled:placeholder:text-content-muted disabled:pointer-events-none", e.hasError ? " focus:placeholder:text-error-950 pr-6" : "placeholder:text-steel-950 dark:placeholder:text-content-muted pr-0"]),
+        placeholder: e.placeholder,
+        disabled: e.disabled,
+        maxlength: e.maxlength
+      }, null, 42, E), [
+        [k, l.value]
+      ]),
+      e.hasError ? (i(), v(B, {
+        key: 0,
+        class: "absolute top-1/2 -translate-y-1/2 right-3 scale-[0.8182] pointer-events-none text-error-950"
+      })) : w("", !0)
+    ], 2));
+  }
+};
+export {
+  I as _
+};

package/dist/components/forms/index.js

@@ -1,19 +1,19 @@
-import { openBlock as n, createElementBlock as b, createElementVNode as p, renderSlot as o, mergeModels as d, useModel as y, computed as s, createBlock as h, withCtx as g, createVNode as x } from "vue";
-import { _ as B } from "../../_plugin-vue_export-helper-CHgC5LLL.js";
-import { _ as V } from "../../FormField-XR9nvyQr.js";
-import { _ as v } from "../../InputField-BrSFZ5Eu.js";
-const _ = {}, F = { class: "flex flex-col space-y-12" }, $ = { class: "flex flex-col space-y-6" };
-function q(e, l) {
-  return n(), b("div", F, [
-    p("form", $, [
-      o(e.$slots, "default")
+import { openBlock as f, createElementBlock as g, createElementVNode as p, renderSlot as u, mergeModels as i, useModel as x, computed as m, ref as y, watch as v, createBlock as B, withCtx as V, createVNode as S } from "vue";
+import { _ as $ } from "../../_plugin-vue_export-helper-CHgC5LLL.js";
+import { _ as F } from "../../FormField-CrpT1GTF.js";
+import { _ as q } from "../../InputField-D6bS7qJm.js";
+const M = {}, k = { class: "flex flex-col space-y-12" }, w = { class: "flex flex-col space-y-6" };
+function E(e, o) {
+  return f(), g("div", k, [
+    p("form", w, [
+      u(e.$slots, "default")
     ]),
-    o(e.$slots, "footer")
+    u(e.$slots, "footer")
   ]);
 }
-const I = /* @__PURE__ */ B(_, [["render", q]]), N = {
+const T = /* @__PURE__ */ $(M, [["render", E]]), A = {
   __name: "FormInput",
-  props: /* @__PURE__ */ d({
+  props: /* @__PURE__ */ i({
     required: {
       type: Boolean,
       default: !1
@@ -37,40 +37,58 @@ const I = /* @__PURE__ */ B(_, [["render", q]]), N = {
     disabled: {
       type: Boolean,
       default: !1
+    },
+    // SOP-Admin #435: native character cap passed to the input.
+    maxlength: {
+      type: Number,
+      default: null
+    },
+    // #435: grey helper text beside the label that turns red when the user tries to exceed maxlength.
+    hint: {
+      type: String,
+      default: ""
     }
   }, {
     modelValue: {},
     modelModifiers: {}
   }),
-  emits: /* @__PURE__ */ d(["blur"], ["update:modelValue"]),
-  setup(e, { emit: l }) {
-    const u = e, i = l, r = y(e, "modelValue"), c = s(() => a.value.length > 0), m = () => {
-      i("blur");
-    }, a = s(() => Array.from(u.errors).join(", "));
-    return (M, t) => (n(), h(V, {
+  emits: /* @__PURE__ */ i(["blur"], ["update:modelValue"]),
+  setup(e, { emit: o }) {
+    const t = e, c = o, r = x(e, "modelValue"), h = m(() => d.value.length > 0), a = y(!1);
+    v(r, (n) => {
+      (t.maxlength == null || String(n ?? "").length < t.maxlength) && (a.value = !1);
+    });
+    const b = () => {
+      c("blur");
+    }, d = m(() => Array.from(t.errors).join(", "));
+    return (n, l) => (f(), B(F, {
       label: e.label,
-      "error-message": a.value,
+      "error-message": d.value,
       required: e.required,
-      disabled: e.disabled
+      disabled: e.disabled,
+      hint: e.hint,
+      "hint-error": a.value
     }, {
-      default: g(() => [
-        x(v, {
+      default: V(() => [
+        S(q, {
           modelValue: r.value,
-          "onUpdate:modelValue": t[0] || (t[0] = (f) => r.value = f),
-          "has-error": c.value,
+          "onUpdate:modelValue": l[0] || (l[0] = (s) => r.value = s),
+          "has-error": h.value,
           placeholder: e.placeholder,
           "field-type": e.fieldType,
           label: e.label,
           disabled: e.disabled,
-          onBlur: m
-        }, null, 8, ["modelValue", "has-error", "placeholder", "field-type", "label", "disabled"])
+          maxlength: e.maxlength,
+          onBlur: b,
+          onOverflow: l[1] || (l[1] = (s) => a.value = !0)
+        }, null, 8, ["modelValue", "has-error", "placeholder", "field-type", "label", "disabled", "maxlength"])
       ]),
       _: 1
-    }, 8, ["label", "error-message", "required", "disabled"]));
+    }, 8, ["label", "error-message", "required", "disabled", "hint", "hint-error"]));
   }
 };
 export {
-  I as BaseForm,
-  V as FormField,
-  N as FormInput
+  T as BaseForm,
+  F as FormField,
+  A as FormInput
 };

package/dist/components/inputs/index.js

@@ -4,7 +4,7 @@ import $ from "../../CalendarIcon-DjSv5Y23.js";
 import k from "../../CircleExclamationIcon-vvAjN3c9.js";
 import E from "../../UploadIcon-DJeF8sKk.js";
 import M from "../../FilesIcon-NLAyR0HT.js";
-import { _ as se } from "../../InputField-BrSFZ5Eu.js";
+import { _ as se } from "../../InputField-D6bS7qJm.js";
 const I = ["onClick"], le = {
   __name: "DateInput",
   props: {