@stachelock/ui 0.6.8 → 0.6.11

package/dist/{SelectInput.vue_vue_type_script_setup_true_lang-DFfKsmvj.js → SelectInput.vue_vue_type_script_setup_true_lang-DEaP3bhC.js}

@@ -1,19 +1,19 @@
-import { defineComponent as P, watch as M, onBeforeUnmount as Q, ref as S, computed as f, createElementBlock as d, openBlock as n, createVNode as u, unref as o, withCtx as m, createElementVNode as c, createBlock as x, normalizeClass as h, createCommentVNode as p, resolveDynamicComponent as R, toDisplayString as b, withModifiers as L, Teleport as Y, Transition as Z, normalizeStyle as _, Fragment as ee, renderList as le } from "vue";
-import { Listbox as se, ListboxButton as te, ListboxOptions as ae, ListboxOption as oe } from "@headlessui/vue";
-import { XMarkIcon as re, ChevronUpDownIcon as ne, CheckIcon as ie } from "@heroicons/vue/20/solid";
-import { useField as ue } from "vee-validate";
-import de from "./forms/FormFieldWrapper.js";
-import { g as ce } from "./id-DafBB_QF.js";
-const me = { class: "sl-w-full" }, fe = { class: "sl-relative" }, pe = { class: "sl-flex sl-items-center sl-gap-2" }, ve = {
+import { defineComponent as K, watch as L, onBeforeUnmount as Y, ref as O, computed as p, createElementBlock as d, openBlock as r, createVNode as u, unref as n, withCtx as m, createElementVNode as c, createBlock as w, normalizeClass as g, createCommentVNode as v, resolveDynamicComponent as U, toDisplayString as h, withModifiers as D, Teleport as Z, Transition as _, normalizeStyle as ee, Fragment as le, renderList as te } from "vue";
+import { Listbox as se, ListboxButton as ae, ListboxOptions as ne, ListboxOption as oe } from "@headlessui/vue";
+import { XMarkIcon as re, ChevronUpDownIcon as ie, CheckIcon as ue } from "@heroicons/vue/20/solid";
+import { useField as de } from "vee-validate";
+import ce from "./forms/FormFieldWrapper.js";
+import { g as me } from "./id-DafBB_QF.js";
+const pe = { class: "sl-w-full" }, ve = { class: "sl-relative" }, fe = { class: "sl-flex sl-items-center sl-gap-2" }, ge = {
   key: 1,
   class: "sl-block sl-truncate sl-text-left"
 }, he = {
   key: 2,
-  class: "sl-block sl-truncate sl-text-left sl-text-gray-500 dark:sl-text-slate-300"
-}, be = { class: "sl-absolute sl-inset-y-0 sl-right-0 sl-flex sl-items-center sl-pr-2 sl-gap-1" }, ge = { class: "sl-block sl-truncate sl-font-medium" }, ye = { class: "sl-flex sl-items-center sl-gap-2" }, xe = {
+  class: "sl-block sl-truncate sl-text-left sl-text-gray-400 dark:sl-text-slate-500"
+}, ye = { class: "sl-absolute sl-inset-y-0 sl-right-0 sl-flex sl-items-center sl-pr-2 sl-gap-1" }, be = { class: "sl-block sl-truncate sl-font-medium" }, xe = { class: "sl-flex sl-items-center sl-gap-2" }, ke = {
   key: 0,
   class: "sl-absolute sl-inset-y-0 sl-right-0 sl-flex sl-items-center sl-pr-4"
-}, ke = { key: 0 }, D = 224, k = 4, Se = /* @__PURE__ */ P({
+}, we = { key: 0 }, F = 224, A = 4, Le = /* @__PURE__ */ K({
   __name: "SelectInput",
   props: {
     name: {},
@@ -31,12 +31,13 @@ const me = { class: "sl-w-full" }, fe = { class: "sl-relative" }, pe = { class:
     itemKey: { default: "id" },
     itemText: { default: "name" },
     modelValue: { type: [String, Number, Boolean, null, Object, Array] },
+    value: { type: [String, Number, Boolean, null, Object, Array] },
     boxShadow: { type: Boolean, default: !1 },
     clearable: { type: Boolean, default: !1 }
   },
-  emits: ["update:modelValue"],
-  setup(a, { emit: K }) {
-    const U = P({
+  emits: ["update:modelValue", "update:value"],
+  setup(a, { emit: j }) {
+    const W = K({
       props: {
         open: { type: Boolean, required: !0 },
         updateFn: { type: Function, required: !0 }
@@ -45,75 +46,78 @@ const me = { class: "sl-w-full" }, fe = { class: "sl-relative" }, pe = { class:
         const l = () => {
           e.open && e.updateFn();
         };
-        return M(() => e.open, (r) => {
-          r ? (e.updateFn(), window.addEventListener("scroll", l, !0), window.addEventListener("resize", l)) : (window.removeEventListener("scroll", l, !0), window.removeEventListener("resize", l));
-        }, { immediate: !0 }), Q(() => {
+        return L(() => e.open, (o) => {
+          o ? (e.updateFn(), window.addEventListener("scroll", l, !0), window.addEventListener("resize", l)) : (window.removeEventListener("scroll", l, !0), window.removeEventListener("resize", l));
+        }, { immediate: !0 }), Y(() => {
           window.removeEventListener("scroll", l, !0), window.removeEventListener("resize", l);
         }), () => null;
       }
-    }), F = S(null), w = S({
+    }), I = O(null), C = O({
       top: "0px",
       left: "0px",
       width: "200px"
     });
-    function I() {
-      const e = F.value?.$el;
+    function $() {
+      const e = I.value?.$el;
       if (!e) return;
-      const l = e.getBoundingClientRect(), r = window.innerHeight, i = r - l.bottom - k, v = l.top - k;
-      i < D && v > i ? w.value = {
-        bottom: `${r - l.top + k}px`,
+      const l = e.getBoundingClientRect(), o = window.innerHeight, i = o - l.bottom - A, f = l.top - A;
+      i < F && f > i ? C.value = {
+        bottom: `${o - l.top + A}px`,
         left: `${l.left}px`,
         width: `${l.width}px`,
-        maxHeight: `${Math.min(v, D)}px`
-      } : w.value = {
-        top: `${l.bottom + k}px`,
+        maxHeight: `${Math.min(f, F)}px`
+      } : C.value = {
+        top: `${l.bottom + A}px`,
         left: `${l.left}px`,
         width: `${l.width}px`,
-        maxHeight: `${Math.min(i, D)}px`
+        maxHeight: `${Math.min(i, F)}px`
       };
     }
-    const t = a, W = K, O = ce(t.name), { value: g, errorMessage: $, handleChange: A, meta: y, setTouched: E } = ue(
-      () => t.name,
-      t.rules,
+    const s = a, y = j, E = me(s.name), b = s.modelValue ?? s.value, { value: x, errorMessage: T, handleChange: B, meta: k, setTouched: N } = de(
+      () => s.name,
+      s.rules,
       {
-        validateOnMount: t.validateOnMount,
-        initialValue: t.modelValue
+        validateOnMount: s.validateOnMount,
+        initialValue: b
       }
-    ), s = S(
-      t.multiple ? Array.isArray(t.modelValue) ? t.modelValue : [] : t.modelValue
+    ), t = O(
+      s.multiple ? Array.isArray(b) ? b : [] : b
     );
-    M(
-      () => t.modelValue,
+    L(
+      () => s.modelValue ?? s.value,
       (e) => {
-        if (t.multiple) {
+        if (s.multiple) {
           const l = Array.isArray(e) ? e : [];
-          l !== s.value && (s.value = l, g.value = l);
+          l !== t.value && (t.value = l, x.value = l);
         } else
-          e !== s.value && (s.value = e, g.value = e);
+          e !== t.value && (t.value = e, x.value = e);
       },
       { immediate: !0 }
-    ), M(
-      s,
+    ), L(
+      t,
       (e) => {
-        W("update:modelValue", e);
+        y("update:modelValue", e), y("update:value", e);
       }
     );
-    const j = f(() => {
+    const q = p(() => {
       const e = [
         "sl-relative",
         "sl-w-full",
         "sl-cursor-default",
         "sl-rounded-md",
+        "sl-shadow-sm",
+        "sl-ring-1",
+        "sl-ring-inset",
         "sl-bg-white",
-        "dark:sl-bg-slate-900",
+        "dark:sl-bg-slate-800",
         "sl-text-gray-900",
         "dark:sl-text-slate-100",
-        "sl-py-2",
-        "sl-pl-3",
+        "sl-py-1.5",
+        "sl-pl-2",
         "sl-pr-10",
         "sl-text-left",
-        "sl-border",
         "sl-text-sm",
+        "sl-leading-6",
         "sl-outline-none",
         "dark:sl-outline-none",
         "focus:sl-outline-none",
@@ -121,123 +125,117 @@ const me = { class: "sl-w-full" }, fe = { class: "sl-relative" }, pe = { class:
         "[&_*]:sl-outline-none",
         "dark:[&_*]:sl-outline-none",
         "focus:sl-ring-2",
-        "focus:sl-ring-stachelock-500",
-        "focus:sl-border-stachelock-500",
+        "focus:sl-ring-inset",
+        "focus:sl-ring-stachelock-600",
         "sl-transition-all",
         "sl-duration-200"
       ];
-      return t.disabled ? e.push(
+      return s.disabled ? e.push(
         "sl-bg-gray-50",
         "dark:sl-bg-slate-800",
         "sl-text-gray-500",
-        "dark:sl-text-slate-300",
+        "dark:sl-text-slate-400",
         "sl-cursor-not-allowed",
-        "sl-border-gray-200",
-        "dark:sl-border-slate-700"
-      ) : $.value ? e.push(
-        "sl-border-red-300",
-        "dark:sl-border-red-500",
-        "focus:sl-ring-red-500",
-        "focus:sl-border-red-500"
-      ) : y.valid && y.touched ? e.push(
-        "sl-border-green-300",
-        "dark:sl-border-green-500",
-        "focus:sl-ring-green-500",
-        "focus:sl-border-green-500"
+        "sl-ring-gray-200",
+        "dark:sl-ring-slate-700"
+      ) : T.value ? e.push(
+        "sl-ring-red-500",
+        "dark:sl-ring-red-500"
+      ) : k.valid && k.touched ? e.push(
+        "sl-ring-green-500",
+        "dark:sl-ring-green-500"
       ) : e.push(
-        "sl-border-gray-300",
-        "dark:sl-border-slate-600",
-        "hover:sl-border-gray-400",
-        "dark:hover:sl-border-slate-500"
+        "sl-ring-gray-300",
+        "dark:sl-ring-slate-600"
       ), e.join(" ");
-    }), C = (e) => e[t.itemKey], B = (e) => e[t.itemText] || e.toString(), T = f(() => s.value ? t.multiple && Array.isArray(s.value) ? s.value.length === 0 ? "" : s.value.length === 1 ? B(s.value[0]) : `${s.value.length} items selected` : B(s.value) : ""), z = f(() => s.value ? t.multiple && Array.isArray(s.value) ? s.value.length === 1 ? s.value[0].icon : null : s.value.icon : null), H = f(() => t.items.filter((e) => !e.disabled)), q = (e) => {
-      s.value = e, E(!0), A(e);
-    }, N = f(() => {
-      if (!t.multiple || !Array.isArray(s.value)) return !1;
+    }), S = (e) => e[s.itemKey], V = (e) => e[s.itemText] || e.toString(), P = p(() => t.value ? s.multiple && Array.isArray(t.value) ? t.value.length === 0 ? "" : t.value.length === 1 ? V(t.value[0]) : `${t.value.length} items selected` : V(t.value) : ""), z = p(() => t.value ? s.multiple && Array.isArray(t.value) ? t.value.length === 1 ? t.value[0].icon : null : t.value.icon : null), H = p(() => s.items.filter((e) => !e.disabled)), G = (e) => {
+      t.value = e, N(!0), B(e);
+    }, R = p(() => {
+      if (!s.multiple || !Array.isArray(t.value)) return !1;
       const e = H.value;
       if (e.length === 0) return !1;
-      const l = new Set(s.value.map((r) => C(r)));
-      return e.every((r) => l.has(C(r)));
-    }), G = () => {
-      t.multiple && (N.value ? s.value = [] : s.value = [...H.value], A(s.value));
-    }, X = f(() => {
-      if (!t.clearable) return !1;
-      const e = s.value ?? g.value;
-      return t.multiple && Array.isArray(e) ? e.length > 0 : e != null && e !== "";
-    }), J = (e) => {
+      const l = new Set(t.value.map((o) => S(o)));
+      return e.every((o) => l.has(S(o)));
+    }), X = () => {
+      s.multiple && (R.value ? t.value = [] : t.value = [...H.value], B(t.value));
+    }, J = p(() => {
+      if (!s.clearable) return !1;
+      const e = t.value ?? s.value ?? s.modelValue ?? x.value;
+      return s.multiple && Array.isArray(e) ? e.length > 0 : e != null && e !== "";
+    }), Q = (e) => {
       e.stopPropagation(), e.preventDefault();
-      const l = t.multiple ? [] : null;
-      s.value = l, g.value = l, E(!0), A(l);
+      const l = s.multiple ? [] : null;
+      t.value = l, x.value = l, N(!0), B(l), y("update:modelValue", l), y("update:value", l);
     };
-    return (e, l) => (n(), d("div", me, [
-      u(de, {
-        id: o(O),
+    return (e, l) => (r(), d("div", pe, [
+      u(ce, {
+        id: n(E),
         name: a.name,
         label: a.label,
         disabled: a.disabled,
         optional: !a.rules,
         "tertiary-label": a.tertiaryLabel,
         "box-shadow": a.boxShadow,
-        "error-message": o($),
+        "error-message": n(T),
         "success-message": a.successMessage,
-        "is-valid": o(y).valid,
-        "is-touched": o(y).touched,
+        "is-valid": n(k).valid,
+        "is-touched": n(k).touched,
         "show-valid-check": !1
       }, {
         "success-message": m(() => [
-          a.successMessage ? (n(), d("span", ke, b(a.successMessage), 1)) : p("", !0)
+          a.successMessage ? (r(), d("span", we, h(a.successMessage), 1)) : v("", !0)
         ]),
         default: m(() => [
-          u(o(se), {
-            modelValue: s.value,
+          u(n(se), {
+            modelValue: t.value,
             "onUpdate:modelValue": [
-              l[2] || (l[2] = (r) => s.value = r),
-              q
+              l[2] || (l[2] = (o) => t.value = o),
+              G
             ],
             disabled: a.disabled,
             multiple: a.multiple
           }, {
-            default: m(({ open: r }) => [
-              c("div", fe, [
-                u(o(U), {
-                  open: r,
-                  "update-fn": I
+            default: m(({ open: o }) => [
+              c("div", ve, [
+                u(n(W), {
+                  open: o,
+                  "update-fn": $
                 }, null, 8, ["open"]),
-                u(o(te), {
+                u(n(ae), {
                   ref_key: "listboxButtonRef",
-                  ref: F,
-                  id: o(O),
-                  class: h([
-                    j.value,
+                  ref: I,
+                  id: n(E),
+                  class: g([
+                    q.value,
                     a.buttonClass
                   ]),
-                  onClick: I
+                  onClick: $
                 }, {
                   default: m(() => [
-                    c("span", pe, [
-                      z.value ? (n(), x(R(z.value), {
+                    c("span", fe, [
+                      z.value ? (r(), w(U(z.value), {
                         key: 0,
                         class: "sl-h-4 sl-w-4 sl-flex-shrink-0",
                         "aria-hidden": "true"
-                      })) : p("", !0),
-                      T.value ? (n(), d("span", ve, b(T.value), 1)) : (n(), d("span", he, b(a.placeholder || "Select an option"), 1))
+                      })) : v("", !0),
+                      P.value ? (r(), d("span", ge, h(P.value), 1)) : (r(), d("span", he, h(a.placeholder || "Select an option"), 1))
                     ]),
-                    c("span", be, [
-                      X.value ? (n(), d("button", {
+                    c("span", ye, [
+                      J.value ? (r(), d("button", {
                         key: 0,
                         type: "button",
                         class: "sl-p-0.5 sl-rounded-full sl-text-gray-400 dark:sl-text-slate-400 hover:sl-text-gray-600 dark:hover:sl-text-slate-200 hover:sl-bg-gray-100 dark:hover:sl-bg-slate-700 focus:sl-outline-none",
-                        onClick: J,
-                        onMousedown: l[0] || (l[0] = L(() => {
+                        onClick: Q,
+                        onMousedown: l[0] || (l[0] = D(() => {
                         }, ["prevent"]))
                       }, [
-                        u(o(re), {
+                        u(n(re), {
                           class: "sl-h-4 sl-w-4",
                           "aria-hidden": "true"
                         }),
                         l[3] || (l[3] = c("span", { class: "sl-sr-only" }, "Clear selection", -1))
-                      ], 32)) : p("", !0),
-                      u(o(ne), {
+                      ], 32)) : v("", !0),
+                      u(n(ie), {
                         class: "sl-h-5 sl-w-5 sl-text-gray-400 dark:sl-text-slate-300 sl-pointer-events-none",
                         "aria-hidden": "true"
                       })
@@ -245,65 +243,65 @@ const me = { class: "sl-w-full" }, fe = { class: "sl-relative" }, pe = { class:
                   ]),
                   _: 1
                 }, 8, ["id", "class"]),
-                (n(), x(Y, { to: "body" }, [
-                  u(Z, {
+                (r(), w(Z, { to: "body" }, [
+                  u(_, {
                     "leave-active-class": "sl-transition sl-duration-100 sl-ease-in",
                     "leave-from-class": "sl-opacity-100",
                     "leave-to-class": "sl-opacity-0"
                   }, {
                     default: m(() => [
-                      u(o(ae), {
+                      u(n(ne), {
                         class: "sl-fixed sl-z-[9999] sl-overflow-auto sl-rounded-md sl-bg-white dark:sl-bg-slate-800 sl-py-1 sl-text-base sl-shadow-lg dark:sl-shadow-slate-900/50 sl-ring-1 sl-ring-black sl-ring-opacity-5 dark:sl-ring-slate-700 focus:sl-outline-none sm:sl-text-sm",
-                        style: _(w.value)
+                        style: ee(C.value)
                       }, {
                         default: m(() => [
-                          a.multiple && a.showAll ? (n(), d("li", {
+                          a.multiple && a.showAll ? (r(), d("li", {
                             key: 0,
                             role: "button",
                             tabindex: "0",
-                            onMousedown: l[1] || (l[1] = L(() => {
+                            onMousedown: l[1] || (l[1] = D(() => {
                             }, ["prevent"])),
-                            onClick: L(G, ["prevent", "stop"]),
-                            class: h([
+                            onClick: D(X, ["prevent", "stop"]),
+                            class: g([
                               "sl-relative sl-cursor-pointer sl-select-none sl-py-2 sl-pl-3 sl-pr-9 sl-text-gray-900 dark:sl-text-slate-200",
                               "hover:sl-bg-stachelock-600 hover:sl-text-white"
                             ])
                           }, [
-                            c("span", ge, b(N.value ? "Unselect All" : "Select All"), 1)
-                          ], 32)) : p("", !0),
-                          (n(!0), d(ee, null, le(a.items, (i) => (n(), x(o(oe), {
-                            key: C(i),
+                            c("span", be, h(R.value ? "Unselect All" : "Select All"), 1)
+                          ], 32)) : v("", !0),
+                          (r(!0), d(le, null, te(a.items, (i) => (r(), w(n(oe), {
+                            key: S(i),
                             value: i,
                             as: "template",
                             disabled: i.disabled
                           }, {
-                            default: m(({ active: v, selected: V }) => [
+                            default: m(({ active: f, selected: M }) => [
                               c("li", {
-                                class: h([
+                                class: g([
                                   "sl-relative sl-cursor-default sl-select-none sl-py-2 sl-pl-3 sl-pr-9",
-                                  v ? "sl-bg-stachelock-600 sl-text-white" : "sl-text-gray-900 dark:sl-text-slate-200",
+                                  f ? "sl-bg-stachelock-600 sl-text-white" : "sl-text-gray-900 dark:sl-text-slate-200",
                                   i.disabled ? "sl-opacity-50 sl-cursor-not-allowed" : ""
                                 ])
                               }, [
-                                c("div", ye, [
-                                  i.icon ? (n(), x(R(i.icon), {
+                                c("div", xe, [
+                                  i.icon ? (r(), w(U(i.icon), {
                                     key: 0,
-                                    class: h(["sl-h-4 sl-w-4 sl-flex-shrink-0", v ? "sl-text-white" : "sl-text-gray-400 dark:sl-text-slate-300"]),
+                                    class: g(["sl-h-4 sl-w-4 sl-flex-shrink-0", f ? "sl-text-white" : "sl-text-gray-400 dark:sl-text-slate-300"]),
                                     "aria-hidden": "true"
-                                  }, null, 8, ["class"])) : p("", !0),
+                                  }, null, 8, ["class"])) : v("", !0),
                                   c("span", {
-                                    class: h([
+                                    class: g([
                                       "sl-block sl-truncate",
-                                      V ? "sl-font-medium" : "sl-font-normal"
+                                      M ? "sl-font-medium" : "sl-font-normal"
                                     ])
-                                  }, b(B(i)), 3)
+                                  }, h(V(i)), 3)
                                 ]),
-                                V ? (n(), d("span", xe, [
-                                  u(o(ie), {
+                                M ? (r(), d("span", ke, [
+                                  u(n(ue), {
                                     class: "sl-h-5 sl-w-5",
                                     "aria-hidden": "true"
                                   })
-                                ])) : p("", !0)
+                                ])) : v("", !0)
                               ], 2)
                             ]),
                             _: 2
@@ -326,5 +324,5 @@ const me = { class: "sl-w-full" }, fe = { class: "sl-relative" }, pe = { class:
   }
 });
 export {
-  Se as _
+  Le as _
 };