@stachelock/ui 0.6.13 → 0.6.14

package/dist/{DynamicForm.vue_vue_type_script_setup_true_lang-BR8Pq7Kw.js → DynamicForm.vue_vue_type_script_setup_true_lang-DMtVUXUN.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-BCVmqg_n.js";
+import { _ as ae } from "./DynamicFormField.vue_vue_type_script_setup_true_lang-DSq31jjH.js";
 const le = {
   key: 0,
   class: "sl-mb-6"

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

@@ -1,10 +1,10 @@
-import { defineComponent as b, computed as s, defineAsyncComponent as y, createBlock as v, createElementBlock as g, openBlock as c, resolveDynamicComponent as w, mergeProps as k, toHandlers as V, createElementVNode as o, createVNode as _, unref as L, toDisplayString as P } from "vue";
-import t from "./inputs/TextInput.js";
-import { ExclamationTriangleIcon as C } from "@heroicons/vue/24/outline";
-const D = {
+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"
-}, F = { class: "sl-flex" }, M = { class: "sl-ml-3" }, T = { class: "sl-mt-2 sl-text-sm sl-text-yellow-700" }, A = /* @__PURE__ */ b({
+}, P = { class: "sl-flex" }, E = { class: "sl-ml-3" }, M = { class: "sl-mt-2 sl-text-sm sl-text-yellow-700" }, A = /* @__PURE__ */ x({
   __name: "DynamicFormField",
   props: {
     field: {},
@@ -12,30 +12,31 @@ const D = {
     formData: {}
   },
   emits: ["update:modelValue", "field-change"],
-  setup(a, { emit: m }) {
-    const e = a, d = m, u = {
-      text: () => Promise.resolve(t),
-      email: () => Promise.resolve(t),
-      password: () => Promise.resolve(t),
-      number: () => Promise.resolve(t),
-      tel: () => Promise.resolve(t),
-      url: () => Promise.resolve(t),
+  setup(r, { emit: u }) {
+    const e = r, n = u, m = {
+      text: () => Promise.resolve(i),
+      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),
       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")
-    }, r = s(() => {
-      const l = u[e.field.type];
-      return l ? y({
+    }, d = s(() => {
+      const l = m[e.field.type];
+      return l ? b({
         loader: l,
         errorComponent: () => null,
         delay: 0
       }) : null;
-    }), n = s({
+    }), a = s({
       get: () => e.modelValue ?? e.field.defaultValue ?? h(),
       set: (l) => {
-        d("update:modelValue", l), d("field-change", e.field, l);
+        n("update:modelValue", l), n("field-change", e.field, l);
       }
     }), f = s(() => {
       const l = {
@@ -50,7 +51,6 @@ const D = {
       };
       switch (e.field.type) {
         case "text":
-        case "email":
         case "password":
         case "number":
         case "tel":
@@ -66,6 +66,22 @@ const D = {
             spellcheck: e.field.spellcheck,
             autocomplete: e.field.autocomplete
           };
+        case "email":
+          return {
+            ...l,
+            colorfulValidation: e.field.colorfulValidation ?? !0,
+            showErrors: !0,
+            autocomplete: e.field.autocomplete || "email"
+          };
+        case "phone":
+          return {
+            ...l,
+            required: e.field.required,
+            colorfulValidation: e.field.colorfulValidation ?? !0,
+            showErrors: !0,
+            defaultCountry: e.field.defaultCountry,
+            autoDetectCountry: e.field.autoDetectCountry ?? !0
+          };
         case "textarea":
           return {
             ...l,
@@ -113,8 +129,8 @@ const D = {
       }
     }), p = s(() => {
       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"] = (i) => {
-        n.value = i, e.field.onChange?.(i, e.field, e.formData ?? {});
+      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 ?? {});
       }), l;
     }), h = () => {
       switch (e.field.type) {
@@ -128,19 +144,19 @@ const D = {
         default:
           return "";
       }
-    }, x = (l) => {
-      n.value = l;
+    }, y = (l) => {
+      a.value = l;
     };
-    return (l, i) => r.value ? (c(), v(w(r.value), k({ key: 0 }, f.value, V(p.value), {
-      "model-value": n.value,
-      "onUpdate:modelValue": x
-    }), null, 16, ["model-value"])) : (c(), g("div", D, [
-      o("div", F, [
-        _(L(C), { class: "sl-h-5 sl-w-5 sl-text-yellow-400" }),
-        o("div", M, [
-          i[0] || (i[0] = o("h3", { class: "sl-text-sm sl-font-medium sl-text-yellow-800" }, " Unknown field type ", -1)),
-          o("div", T, [
-            o("p", null, 'Field type "' + P(a.field.type) + '" is not supported.', 1)
+    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)
           ])
         ])
       ])

package/dist/forms/DynamicForm.js

@@ -1,4 +1,4 @@
-import { _ as f } from "../DynamicForm.vue_vue_type_script_setup_true_lang-BR8Pq7Kw.js";
+import { _ as f } from "../DynamicForm.vue_vue_type_script_setup_true_lang-DMtVUXUN.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-BCVmqg_n.js";
+import { _ as f } from "../DynamicFormField.vue_vue_type_script_setup_true_lang-DSq31jjH.js";
 export {
   f as default
 };

package/dist/index.js

@@ -41,7 +41,7 @@ import { _ as Qi } from "./SparklineChart.vue_vue_type_script_setup_true_lang-Bl
 import { _ as td } from "./StatCard.vue_vue_type_script_setup_true_lang-B5SuaSXL.js";
 import { format as ae, differenceInYears as ue, differenceInMonths as Pe, isValid as re, parseISO as de } from "date-fns";
 import { _ as ot } from "./AddDeleteButtonGroup.vue_vue_type_script_setup_true_lang-6taLcPq0.js";
-import { _ as nt } from "./DynamicForm.vue_vue_type_script_setup_true_lang-BR8Pq7Kw.js";
+import { _ as nt } from "./DynamicForm.vue_vue_type_script_setup_true_lang-DMtVUXUN.js";
 import { _ as it } from "./AlertModal.vue_vue_type_script_setup_true_lang-DzhVQdx4.js";
 import { _ as W } from "./_plugin-vue_export-helper-CHgC5LLL.js";
 import { _ as ld } from "./ComingSoon.vue_vue_type_script_setup_true_lang-CJ8FXE42.js";
@@ -50,7 +50,7 @@ import N from "dayjs";
 import Ee from "dayjs/plugin/utc";
 import Ae from "dayjs/plugin/timezone";
 import dt from "dayjs/plugin/relativeTime";
-import { _ as nd } from "./DynamicFormField.vue_vue_type_script_setup_true_lang-BCVmqg_n.js";
+import { _ as nd } from "./DynamicFormField.vue_vue_type_script_setup_true_lang-DSq31jjH.js";
 import { _ as ct } from "./CheckboxInput.vue_vue_type_script_setup_true_lang-BikR9rgi.js";
 import { _ as ut } from "./ComboboxInput.vue_vue_type_script_setup_true_lang-Cy0Pl8Ap.js";
 import { _ as dd } from "./DatepickerInput.vue_vue_type_style_index_0_lang-C_0dWHo6.js";

package/dist/src/components/inputs/DatepickerInput.d.ts

@@ -753,6 +753,7 @@ declare const _default: __VLS_WithTemplateSlots<import('vue').DefineComponent<im
     clearable: boolean;
     locale: string;
     startTime: TimeModel | TimeModel[];
+    hint: string;
     is24: boolean;
     enableTimePicker: boolean;
     multiCalendars: number | boolean | {
@@ -816,7 +817,6 @@ declare const _default: __VLS_WithTemplateSlots<import('vue').DefineComponent<im
     noDisabledRange: boolean;
     sixWeeks: boolean | "center" | "append" | "prepend" | "fair";
     quarterPicker: boolean;
-    hint: string;
     inputFlow: FlowType;
     displayFormat: string | ((date: Date | Date[]) => string);
     showNowButton: boolean;

package/dist/src/components/inputs/PhoneInput.d.ts

@@ -195,8 +195,8 @@ declare const _default: __VLS_WithTemplateSlots<import('vue').DefineComponent<im
     showErrors: boolean;
     colorfulValidation: boolean;
     disabledMessage: string;
-    hint: string;
     autoComplete: string;
+    hint: string;
     defaultCountry: CountryCode;
     autoDetectCountry: boolean;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>, {

package/dist/src/components/inputs/RichTextInput.d.ts

@@ -76,8 +76,8 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
     tertiaryLabel: string;
     showErrors: boolean;
     maxHeight: string;
-    minHeight: string;
     hint: string;
+    minHeight: string;
     showCharCount: boolean;
     minimal: boolean;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;

package/dist/src/types/form.d.ts

@@ -20,7 +20,7 @@ export interface FormValidationState {
 }
 export interface DynamicFormField {
     name: string;
-    type: 'text' | 'email' | 'password' | 'number' | 'tel' | 'url' | 'textarea' | 'select' | 'combobox' | 'checkbox' | 'switch' | 'file' | 'date' | 'datetime-local' | 'time';
+    type: 'text' | 'email' | 'phone' | 'password' | 'number' | 'tel' | 'url' | 'textarea' | 'select' | 'combobox' | 'checkbox' | 'switch' | 'file' | 'date' | 'datetime-local' | 'time';
     label?: string;
     placeholder?: string;
     description?: string;
@@ -53,6 +53,9 @@ export interface DynamicFormField {
     hideMainLabel?: boolean;
     textTrue?: string;
     textFalse?: string;
+    colorfulValidation?: boolean;
+    defaultCountry?: string;
+    autoDetectCountry?: boolean;
     tertiaryLabel?: string;
     successMessage?: string;
     condition?: (formData: FormData, field?: DynamicFormField) => boolean;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stachelock/ui",
-  "version": "0.6.13",
+  "version": "0.6.14",
   "description": "A comprehensive Vue 3 UI component library built with Tailwind CSS",
   "type": "module",
   "main": "./dist/index.js",