@stachelock/ui 0.6.14 → 0.6.15

package/dist/BaseInformationInput-DmtT4C7P.js

@@ -0,0 +1,4 @@
+import { _ as f } from "./BaseInformationInput.vue_vue_type_script_setup_true_lang-B-qW4F69.js";
+export {
+  f as default
+};

package/dist/BaseInformationInput.vue_vue_type_script_setup_true_lang-B-qW4F69.js

@@ -0,0 +1,154 @@
+import { defineComponent as L, defineAsyncComponent as s, ref as q, computed as i, onMounted as $, watch as b, createElementBlock as m, openBlock as u, withModifiers as A, unref as h, createElementVNode as N, Fragment as R, renderList as G, normalizeClass as H, createBlock as J, resolveDynamicComponent as K, mergeProps as Q } from "vue";
+import { useForm as W } from "vee-validate";
+import { object as X } from "yup";
+import Y from "lodash-es/debounce";
+const Z = { class: "sl-flex sl-flex-col md:sl-flex-row sl-gap-4" }, oe = /* @__PURE__ */ L({
+  __name: "BaseInformationInput",
+  props: {
+    value: {
+      type: Object,
+      default: () => ({})
+    },
+    name: {
+      type: String,
+      required: !0
+    },
+    rules: {
+      type: [Function, Object],
+      default: () => ({})
+    },
+    schema: {
+      type: Object,
+      required: !0
+    },
+    enableVerification: {
+      type: Boolean,
+      default: !1
+    },
+    use: {
+      type: String,
+      default: "profile"
+    }
+  },
+  emits: ["update:value", "update:media", "update:validity", "clear:media"],
+  setup(y, { expose: I, emit: S }) {
+    const g = s(() => import("./inputs/TextInput.js")), x = s(() => import("./inputs/EmailInput.js")), F = s(() => import("./inputs/PhoneInput.js")), V = s(() => import("./inputs/ImageDropzoneInput.js")), a = y, r = S;
+    let l = !1, c = !0;
+    const n = q({}), U = (e) => {
+      switch (e) {
+        case "EmailInput":
+          return x;
+        case "PhoneInput":
+          return F;
+        case "ImageDropzoneInput":
+          return V;
+        case "TextInput":
+        default:
+          return g;
+      }
+    }, _ = (e) => {
+      const t = {
+        label: e.label,
+        placeholder: e.placeholder,
+        rules: e.rules,
+        tertiaryLabel: e.tertiaryLabel,
+        validateOnMount: e.validateOnMount
+      };
+      switch (e.as) {
+        case "EmailInput":
+          return {
+            ...t,
+            enableVerification: a.enableVerification || e.enableVerification
+          };
+        case "PhoneInput":
+          return {
+            ...t,
+            enableVerification: a.enableVerification || e.enableVerification
+          };
+        case "ImageDropzoneInput":
+          return {
+            ...t,
+            presetType: e.presetType,
+            acceptedFormats: e.acceptedFormats,
+            maximumFileSize: e.maximumFileSize
+          };
+        default:
+          return t;
+      }
+    }, E = i(() => [...a.schema.fields].sort((e, t) => (e.position ?? 0) - (t.position ?? 0))), p = i(() => X(
+      a.schema.fields.reduce((e, t) => (t.name && t.rules && (e[t.name] = t.rules), e), {})
+    )), { handleSubmit: C, errors: O, validate: P } = W({
+      validationSchema: p.value
+    }), d = i(() => {
+      const e = {};
+      return a.schema.fields.forEach((t) => {
+        t.name === "profile_image" ? e[t.name] = a.value && t.name in a.value ? a.value[t.name] : null : e[t.name] = a.value && t.name in a.value ? a.value[t.name] : "";
+      }), e;
+    }), j = Y(() => {
+      const e = {};
+      Object.keys(n.value).forEach((t) => {
+        e[t] = n.value[t];
+      }), r("update:value", e);
+    }, 500), z = (e) => (t) => {
+      n.value[e] !== t && (n.value[e] = t);
+    }, B = (e) => (t) => {
+      r("update:validity", { id: e, isValid: t });
+    }, M = (e) => {
+      r("update:media", e);
+    }, w = (e) => {
+      r("clear:media", e);
+    }, T = () => {
+      const e = {};
+      return Object.keys(n.value).forEach((t) => {
+        e[t] = n.value[t];
+      }), e;
+    }, k = async () => {
+      const e = await P();
+      return {
+        valid: e.valid,
+        errors: e.errors || {},
+        results: T()
+      };
+    }, v = C((e) => {
+      console.log("Base information form submitted:", e);
+    });
+    return $(() => {
+      n.value = { ...d.value }, c = !1;
+    }), b(() => d.value, (e) => {
+      !l && c && (l = !0, n.value = { ...e }, l = !1);
+    }, { deep: !0 }), b(n, () => {
+      l || j();
+    }, { deep: !0, immediate: !1 }), I({
+      validateForm: k,
+      validationSchema: p,
+      errors: O
+    }), (e, t) => (u(), m("form", {
+      onSubmit: t[0] || (t[0] = A(
+        //@ts-ignore
+        (...o) => h(v) && h(v)(...o),
+        ["prevent"]
+      )),
+      class: "sl-space-y-4"
+    }, [
+      N("div", Z, [
+        (u(!0), m(R, null, G(E.value, (o, f) => (u(), m("div", {
+          key: o.name,
+          class: H(f === 1 || f === 2 ? "md:sl-flex-1 md:sl-flex-col" : "sl-flex-1")
+        }, [
+          (u(), J(K(U(o.as ?? "TextInput")), Q({
+            name: o.name
+          }, { ref_for: !0 }, _(o), {
+            value: n.value[o.name],
+            "onUpdate:value": (D) => z(o.name),
+            "onUpdate:media": M,
+            "onClear:media": w,
+            "onUpdate:validity": (D) => B(o.name)
+          }), null, 16, ["name", "value", "onUpdate:value", "onUpdate:validity"]))
+        ], 2))), 128))
+      ])
+    ], 32));
+  }
+});
+export {
+  oe as _
+};

package/dist/{DynamicForm.vue_vue_type_script_setup_true_lang-DMtVUXUN.js → DynamicForm.vue_vue_type_script_setup_true_lang-D8QXRuSo.js}

@@ -2,7 +2,7 @@ import { defineComponent as Y, ref as Z, reactive as _, watch as w, computed as
 import { useForm as te } from "vee-validate";
 import { ExclamationCircleIcon as se } from "@heroicons/vue/24/outline";
 import A from "./components/Button.js";
-import { _ as ae } from "./DynamicFormField.vue_vue_type_script_setup_true_lang-DSq31jjH.js";
+import { _ as ae } from "./DynamicFormField.vue_vue_type_script_setup_true_lang-DVoVGq7g.js";
 const le = {
   key: 0,
   class: "sl-mb-6"

package/dist/{DynamicFormField.vue_vue_type_script_setup_true_lang-DSq31jjH.js → DynamicFormField.vue_vue_type_script_setup_true_lang-DVoVGq7g.js}

@@ -1,10 +1,10 @@
-import { defineComponent as x, computed as s, defineAsyncComponent as b, createBlock as v, createElementBlock as g, openBlock as c, resolveDynamicComponent as w, mergeProps as V, toHandlers as k, createElementVNode as o, createVNode as C, unref as _, toDisplayString as D } from "vue";
-import i from "./inputs/TextInput.js";
-import { ExclamationTriangleIcon as L } from "@heroicons/vue/24/outline";
-const F = {
-  key: 1,
-  class: "sl-p-4 sl-bg-yellow-50 sl-border sl-border-yellow-200 sl-rounded-md"
-}, P = { class: "sl-flex" }, E = { class: "sl-ml-3" }, M = { class: "sl-mt-2 sl-text-sm sl-text-yellow-700" }, A = /* @__PURE__ */ x({
+import { defineComponent as k, computed as o, defineAsyncComponent as C, createBlock as p, createElementBlock as _, openBlock as d, resolveDynamicComponent as h, mergeProps as y, toHandlers as x, createElementVNode as i, createVNode as T, unref as E, toDisplayString as D } from "vue";
+import s from "./inputs/TextInput.js";
+import { ExclamationTriangleIcon as F } from "@heroicons/vue/24/outline";
+const L = {
+  key: 2,
+  class: "sl-p-4 sl-bg-yellow-50 dark:sl-bg-yellow-900/30 sl-border sl-border-yellow-200 dark:sl-border-yellow-800 sl-rounded-md"
+}, M = { class: "sl-flex" }, P = { class: "sl-ml-3" }, S = { class: "sl-mt-2 sl-text-sm sl-text-yellow-700 dark:sl-text-yellow-300" }, q = /* @__PURE__ */ k({
   __name: "DynamicFormField",
   props: {
     field: {},
@@ -12,33 +12,41 @@ const F = {
     formData: {}
   },
   emits: ["update:modelValue", "field-change"],
-  setup(r, { emit: u }) {
-    const e = r, n = u, m = {
-      text: () => Promise.resolve(i),
+  setup(n, { emit: b }) {
+    const e = n, u = b, v = {
+      // Simple input types
+      text: () => Promise.resolve(s),
       email: () => import("./inputs/EmailInput.js"),
       phone: () => import("./inputs/PhoneInput.js"),
-      password: () => Promise.resolve(i),
-      number: () => Promise.resolve(i),
-      tel: () => Promise.resolve(i),
-      url: () => Promise.resolve(i),
+      password: () => Promise.resolve(s),
+      number: () => Promise.resolve(s),
+      tel: () => Promise.resolve(s),
+      url: () => Promise.resolve(s),
       textarea: () => import("./inputs/TextAreaInput.js"),
       select: () => import("./inputs/SelectInput.js"),
       combobox: () => import("./inputs/ComboboxInput.js"),
       checkbox: () => import("./inputs/CheckboxInput.js"),
-      switch: () => import("./inputs/SwitchInput.js")
-    }, d = s(() => {
-      const l = m[e.field.type];
-      return l ? b({
+      switch: () => import("./inputs/SwitchInput.js"),
+      // Compound input types (for complex forms like registration)
+      names: () => import("./NamesInput-DHs3Gie7.js"),
+      baseInfo: () => import("./BaseInformationInput-DmtT4C7P.js"),
+      address: () => import("./inputs/AddressInput.js"),
+      selectText: () => import("./inputs/SelectTextInput.js")
+    }, w = ["names", "baseInfo", "selectText"], g = o(
+      () => w.includes(e.field.type)
+    ), a = o(() => {
+      const l = v[e.field.type];
+      return l ? C({
         loader: l,
         errorComponent: () => null,
         delay: 0
       }) : null;
-    }), a = s({
-      get: () => e.modelValue ?? e.field.defaultValue ?? h(),
+    }), r = o({
+      get: () => e.modelValue ?? e.field.defaultValue ?? V(),
       set: (l) => {
-        n("update:modelValue", l), n("field-change", e.field, l);
+        u("update:modelValue", l), u("field-change", e.field, l);
       }
-    }), f = s(() => {
+    }), c = o(() => {
       const l = {
         name: e.field.name,
         label: e.field.label,
@@ -124,15 +132,46 @@ const F = {
             textTrue: e.field.textTrue,
             textFalse: e.field.textFalse
           };
+        case "names":
+          return {
+            ...l,
+            schema: e.field.schema,
+            requiredFields: e.field.requiredFields || ["first_name", "last_name"]
+          };
+        case "baseInfo":
+          return {
+            ...l,
+            schema: e.field.schema,
+            use: e.field.use || "registration",
+            enableVerification: e.field.enableVerification ?? !1
+          };
+        case "address":
+          return {
+            ...l,
+            showSuggestionCount: e.field.showSuggestionCount ?? !0,
+            allowManualEntry: e.field.allowManualEntry ?? !0
+          };
+        case "selectText":
+          return {
+            ...l,
+            select: e.field.select,
+            text: e.field.text,
+            delimiter: e.field.delimiter || " ",
+            formatter: e.field.formatter,
+            showErrors: !0,
+            hasError: !1,
+            colorfulValidation: e.field.colorfulValidation ?? !0,
+            showValidCheck: e.field.showValidCheck ?? !0
+          };
         default:
           return l;
       }
-    }), p = s(() => {
+    }), m = o(() => {
       const l = {};
       return e.field.onBlur && (l.blur = e.field.onBlur), e.field.onFocus && (l.focus = e.field.onFocus), e.field.onChange && (l["update:modelValue"] = (t) => {
-        a.value = t, e.field.onChange?.(t, e.field, e.formData ?? {});
+        r.value = t, e.field.onChange?.(t, e.field, e.formData ?? {});
       }), l;
-    }), h = () => {
+    }), V = () => {
       switch (e.field.type) {
         case "checkbox":
         case "switch":
@@ -141,22 +180,31 @@ const F = {
           return e.field.multiple ? [] : null;
         case "number":
           return e.field.min || 0;
+        case "names":
+        case "baseInfo":
+        case "address":
+          return {};
+        case "selectText":
+          return { select: void 0, text: void 0, display: void 0 };
         default:
           return "";
       }
-    }, y = (l) => {
-      a.value = l;
+    }, f = (l) => {
+      r.value = l;
     };
-    return (l, t) => d.value ? (c(), v(w(d.value), V({ key: 0 }, f.value, k(p.value), {
-      "model-value": a.value,
-      "onUpdate:modelValue": y
-    }), null, 16, ["model-value"])) : (c(), g("div", F, [
-      o("div", P, [
-        C(_(L), { class: "sl-h-5 sl-w-5 sl-text-yellow-400" }),
-        o("div", E, [
-          t[0] || (t[0] = o("h3", { class: "sl-text-sm sl-font-medium sl-text-yellow-800" }, " Unknown field type ", -1)),
-          o("div", M, [
-            o("p", null, 'Field type "' + D(r.field.type) + '" is not supported.', 1)
+    return (l, t) => a.value && g.value ? (d(), p(h(a.value), y({ key: 0 }, c.value, x(m.value), {
+      value: r.value,
+      "onUpdate:value": f
+    }), null, 16, ["value"])) : a.value ? (d(), p(h(a.value), y({ key: 1 }, c.value, x(m.value), {
+      "model-value": r.value,
+      "onUpdate:modelValue": f
+    }), null, 16, ["model-value"])) : (d(), _("div", L, [
+      i("div", M, [
+        T(E(F), { class: "sl-h-5 sl-w-5 sl-text-yellow-400" }),
+        i("div", P, [
+          t[0] || (t[0] = i("h3", { class: "sl-text-sm sl-font-medium sl-text-yellow-800 dark:sl-text-yellow-200" }, " Unknown field type ", -1)),
+          i("div", S, [
+            i("p", null, 'Field type "' + D(n.field.type) + '" is not supported.', 1)
           ])
         ])
       ])
@@ -164,5 +212,5 @@ const F = {
   }
 });
 export {
-  A as _
+  q as _
 };

package/dist/NamesInput-DHs3Gie7.js

@@ -0,0 +1,4 @@
+import { _ as f } from "./NamesInput.vue_vue_type_script_setup_true_lang-BO54mB4C.js";
+export {
+  f as default
+};

package/dist/NamesInput.vue_vue_type_script_setup_true_lang-BO54mB4C.js

@@ -0,0 +1,195 @@
+import { defineComponent as se, defineAsyncComponent as T, ref as _, computed as u, onMounted as re, watch as w, createElementBlock as o, openBlock as l, withModifiers as ae, unref as i, createVNode as m, createElementVNode as p, withCtx as k, Fragment as h, renderList as q, createCommentVNode as le, createBlock as oe, resolveDynamicComponent as ne, toDisplayString as ue } from "vue";
+import { TransitionRoot as I } from "@headlessui/vue";
+import { QuestionMarkCircleIcon as ie } from "@heroicons/vue/20/solid";
+import { useField as V, useForm as ce } from "vee-validate";
+import { object as me } from "yup";
+import pe from "lodash-es/debounce";
+import M from "./inputs/TextInput.js";
+const de = { class: "sl-flex sl-flex-col sm:sl-flex-row sl-gap-4" }, ve = {
+  key: 0,
+  class: "sl-flex-1"
+}, ye = { class: "sl-flex sl-flex-col sm:sl-flex-row sl-gap-4" }, fe = { class: "sl-flex sl-items-center sl-mt-2 sl-text-sm sl-text-gray-600 dark:sl-text-gray-400 sl-space-x-2" }, E = "sl-transition sl-ease-out sl-duration-300", j = "sl-opacity-0 sl-transform sl-scale-95", O = "sl-opacity-100 sl-transform sl-scale-100", N = "sl-transition sl-ease-in sl-duration-200", U = "sl-opacity-100 sl-transform sl-scale-100", B = "sl-opacity-0 sl-transform sl-scale-95", Te = /* @__PURE__ */ se({
+  __name: "NamesInput",
+  props: {
+    value: {
+      type: Object,
+      default: () => ({})
+    },
+    name: {
+      type: String,
+      required: !0
+    },
+    label: {
+      type: String,
+      default: ""
+    },
+    rules: {
+      type: [Function, Object],
+      default: () => ({})
+    },
+    schema: {
+      type: Object,
+      required: !0
+    },
+    requiredFields: {
+      type: Array,
+      default: () => ["first_name", "last_name"]
+    }
+  },
+  emits: ["update:value"],
+  setup(R, { expose: L, emit: A }) {
+    const D = T(() => import("./inputs/ComboboxInput.js")), z = T(() => import("./inputs/SelectInput.js")), r = R, K = A;
+    let c = !1, x = !0;
+    const n = _(!1), a = _({}), d = {}, Q = (e) => {
+      switch (e) {
+        case "ComboboxInput":
+          return D;
+        case "SelectInput":
+          return z;
+        case "TextInput":
+        default:
+          return M;
+      }
+    };
+    r.schema.fields.forEach((e) => {
+      const { errorMessage: s } = V(e.name, e.rules);
+      d[e.name] = s;
+    });
+    const G = u(() => new Set(r.requiredFields)), v = (e, s) => G.value.has(e) ? !0 : !!s, H = u(() => r.schema.fields.slice(0, 2)), J = u(() => [...r.schema.fields].sort((e, s) => (e.position ?? 0) - (s.position ?? 0))), P = (e) => typeof e == "string" ? e : e === null ? null : typeof e == "object" && e !== void 0 ? e : typeof e == "number" || typeof e == "boolean" ? String(e) : "", b = (e) => {
+      const s = a.value[e];
+      return typeof s == "string" ? s : "";
+    }, W = (e) => e.as === "TextInput" ? b(e.name) : a.value[e.name], y = u(() => {
+      const e = {};
+      return r.schema.fields.forEach((s) => {
+        const t = r.value ? r.value[s.name] : void 0;
+        e[s.name] = P(t);
+      }), e;
+    }), g = u(() => me(
+      r.schema.fields.reduce((e, s) => (s.rules && (e[s.name] = s.rules), e), {})
+    )), { handleSubmit: X, validate: Y, errors: Z } = ce({
+      validationSchema: g.value,
+      initialValues: y.value
+    });
+    r.schema.fields.forEach((e) => {
+      const { errorMessage: s } = V(e.name);
+      d[e.name] = s;
+    });
+    const $ = async () => {
+      const e = await Y();
+      return {
+        valid: e.valid,
+        errors: e.errors || {},
+        results: { ...a.value }
+      };
+    }, ee = pe(() => {
+      const e = {};
+      Object.keys(a.value).forEach((s) => {
+        e[s] = a.value[s];
+      }), K("update:value", e);
+    }, 500), F = (e, s) => {
+      a.value[e] = s;
+    }, te = () => {
+      n.value = !n.value;
+    }, S = (e) => e ? "Required" : "Optional", C = X((e) => {
+      console.log("Names form submitted:", e);
+    });
+    return re(() => {
+      a.value = { ...y.value }, x = !1;
+    }), w(() => y.value, (e) => {
+      !c && x && (c = !0, a.value = { ...e }, c = !1);
+    }, { deep: !0 }), w(a, () => {
+      c || ee();
+    }, { deep: !0, immediate: !1 }), L({
+      validateForm: $,
+      validationSchema: g,
+      errors: Z
+    }), (e, s) => (l(), o("form", {
+      onSubmit: s[0] || (s[0] = ae(
+        //@ts-ignore
+        (...t) => i(C) && i(C)(...t),
+        ["prevent"]
+      )),
+      class: "sl-space-y-4"
+    }, [
+      m(i(I), {
+        enter: E,
+        "enter-from": j,
+        "enter-to": O,
+        leave: N,
+        "leave-from": U,
+        "leave-to": B,
+        show: !n.value
+      }, {
+        default: k(() => [
+          p("div", de, [
+            (l(!0), o(h, null, q(H.value, (t) => (l(), o(h, {
+              key: t.name
+            }, [
+              t.as === "TextInput" ? (l(), o("div", ve, [
+                m(M, {
+                  value: b(t.name),
+                  error: d[t.name]?.value,
+                  label: t.label,
+                  name: t.name,
+                  placeholder: t.placeholder,
+                  "validate-on-mount": t.validateOnMount,
+                  class: "sl-text-sm sl-leading-6 sl-text-gray-800 dark:sl-text-gray-200",
+                  "onUpdate:value": (f) => F(t.name, f),
+                  rules: t.rules,
+                  "tertiary-label": S(v(t.name, t.required))
+                }, null, 8, ["value", "error", "label", "name", "placeholder", "validate-on-mount", "onUpdate:value", "rules", "tertiary-label"])
+              ])) : le("", !0)
+            ], 64))), 128))
+          ])
+        ]),
+        _: 1
+      }, 8, ["show"]),
+      m(i(I), {
+        enter: E,
+        "enter-from": j,
+        "enter-to": O,
+        leave: N,
+        "leave-from": U,
+        "leave-to": B,
+        show: n.value
+      }, {
+        default: k(() => [
+          p("div", ye, [
+            (l(!0), o(h, null, q(J.value, (t) => (l(), o("div", {
+              key: t.name,
+              class: "sl-flex-1"
+            }, [
+              (l(), oe(ne(Q(t.as ?? "TextInput")), {
+                name: t.name,
+                placeholder: t.placeholder,
+                label: t.label,
+                value: W(t),
+                items: t.items,
+                "item-key": t.itemKey,
+                "item-text": t.itemText,
+                clearable: t.clearable,
+                rules: t.rules,
+                required: v(t.name, t.required),
+                "tertiary-label": S(v(t.name, t.required)),
+                class: "sl-text-sm sl-leading-6 sl-text-gray-800 dark:sl-text-gray-200",
+                "onUpdate:value": (f) => F(t.name, f)
+              }, null, 40, ["name", "placeholder", "label", "value", "items", "item-key", "item-text", "clearable", "rules", "required", "tertiary-label", "onUpdate:value"]))
+            ]))), 128))
+          ])
+        ]),
+        _: 1
+      }, 8, ["show"]),
+      p("p", fe, [
+        p("button", {
+          type: "button",
+          onClick: te,
+          class: "sl-text-xs sl-uppercase sl-py-1 hover:sl-text-primary-600 dark:hover:sl-text-primary-400 sl-transition-colors"
+        }, ue(n.value ? "Show Less" : "Show More"), 1),
+        m(i(ie), { class: "sl-h-4 sl-w-4" })
+      ])
+    ], 32));
+  }
+});
+export {
+  Te as _
+};

package/dist/forms/DynamicForm.js

@@ -1,4 +1,4 @@
-import { _ as f } from "../DynamicForm.vue_vue_type_script_setup_true_lang-DMtVUXUN.js";
+import { _ as f } from "../DynamicForm.vue_vue_type_script_setup_true_lang-D8QXRuSo.js";
 export {
   f as default
 };

package/dist/forms/DynamicFormField.js

@@ -1,4 +1,4 @@
-import { _ as f } from "../DynamicFormField.vue_vue_type_script_setup_true_lang-DSq31jjH.js";
+import { _ as f } from "../DynamicFormField.vue_vue_type_script_setup_true_lang-DVoVGq7g.js";
 export {
   f as default
 };