@stachelock/ui 0.2.14 → 0.3.1

package/dist/DynamicForm.vue_vue_type_script_setup_true_lang-DRDP86Yc.js

@@ -0,0 +1,253 @@
+import { defineComponent as X, ref as Y, reactive as Z, watch as w, computed as b, createElementBlock as o, openBlock as r, withModifiers as ee, normalizeClass as f, unref as y, createCommentVNode as l, toDisplayString as i, Fragment as S, renderList as _, createElementVNode as c, createBlock as j, createVNode as N, withCtx as T, createTextVNode as x } from "vue";
+import { useForm as te } from "vee-validate";
+import O from "./components/Button.js";
+import { _ as se } from "./DynamicFormField.vue_vue_type_script_setup_true_lang-Ct8b80dM.js";
+import { r as ae } from "./ExclamationCircleIcon-DjxYk45_.js";
+const re = {
+  key: 0,
+  class: "sl-mb-6"
+}, oe = {
+  key: 0,
+  class: "sl-text-lg sl-font-semibold sl-text-gray-900 sl-mb-2"
+}, le = {
+  key: 1,
+  class: "sl-text-sm sl-text-gray-600"
+}, ne = {
+  key: 0,
+  class: "sl-mb-4"
+}, ie = {
+  key: 0,
+  class: "sl-text-md sl-font-medium sl-text-gray-900 sl-mb-1"
+}, ce = {
+  key: 1,
+  class: "sl-text-sm sl-text-gray-600"
+}, de = {
+  key: 2,
+  class: "sl-mt-4"
+}, ue = { class: "sl-bg-red-50 sl-border sl-border-red-200 sl-rounded-md sl-p-4" }, me = { class: "sl-flex" }, he = { class: "sl-ml-3" }, fe = { class: "sl-mt-2 sl-text-sm sl-text-red-700" }, je = /* @__PURE__ */ X({
+  __name: "DynamicForm",
+  props: {
+    schema: {},
+    modelValue: {},
+    loading: { type: Boolean },
+    showActions: { type: Boolean, default: !0 },
+    showCancelButton: { type: Boolean, default: !1 },
+    submitButtonText: {},
+    cancelButtonText: {},
+    submitButtonVariant: { default: "primary" },
+    actionsAlignment: { default: "right" },
+    formError: {}
+  },
+  emits: ["update:modelValue", "submit", "cancel", "field-change"],
+  setup(D, { expose: A, emit: M }) {
+    const n = D, m = M, F = Y(), a = Z({}), { handleSubmit: R, setErrors: h, errors: p, meta: d, validate: v, resetForm: U, setFieldTouched: V } = te({
+      keepValuesOnUnmount: !0
+    }), W = (e) => {
+      switch (e) {
+        case "checkbox":
+        case "switch":
+          return !1;
+        case "select":
+          return null;
+        case "number":
+          return 0;
+        default:
+          return "";
+      }
+    }, k = () => {
+      const e = { ...n.modelValue };
+      n.schema.sections.forEach((t) => {
+        t.fields.forEach((s) => {
+          s.name in e || (e[s.name] = s.defaultValue ?? W(s.type));
+        });
+      }), Object.assign(a, e);
+    };
+    w(
+      () => n.modelValue,
+      (e) => {
+        e && Object.assign(a, e);
+      },
+      { deep: !0 }
+    ), w(
+      a,
+      (e) => {
+        m("update:modelValue", { ...e });
+      },
+      { deep: !0 }
+    ), k();
+    const $ = b(() => n.schema.sections.filter(
+      (e) => e.condition ? e.condition(a) : !0
+    )), z = b(() => {
+      const e = ["sl-space-y-6"];
+      return n.schema.className && e.push(n.schema.className), e.join(" ");
+    }), P = (e) => {
+      const t = [
+        "sl-grid",
+        "sl-gap-4"
+      ], s = e.columns || 1;
+      return t.push("sl-grid-cols-1"), s > 1 && t.push(`md:sl-grid-cols-${Math.min(s, 3)}`), e.className && t.push(e.className), t.join(" ");
+    }, H = (e) => {
+      const t = [];
+      return e.colSpan && e.colSpan > 1 && t.push(`sl-col-span-${Math.min(e.colSpan, 3)}`), e.className && t.push(e.className), t.join(" ");
+    }, L = (e) => e.condition ? e.condition(a, e) : !0, q = b(() => d.value.valid), g = R((e) => {
+      m("submit", e, { setErrors: h });
+    }), G = () => {
+      m("cancel");
+    }, I = (e, t) => {
+      m("field-change", e, t, a), e.onFieldChange && e.onFieldChange(t, e, a);
+    }, J = async () => {
+      await g();
+    }, C = () => {
+      U(), Object.keys(a).forEach((e) => {
+        delete a[e];
+      }), k();
+    }, E = () => {
+      const e = {};
+      for (const [t, s] of Object.entries(p.value))
+        s !== void 0 && (e[t] = s);
+      return {
+        valid: d.value.valid,
+        errors: e,
+        values: { ...a }
+      };
+    }, B = async () => (await v(), E());
+    return A({
+      // DynamicFormRef interface methods
+      submitForm: J,
+      resetForm: C,
+      validateForm: B,
+      validateWithChildren: async () => (await v(), E()),
+      handlePseudoSubmit: async () => {
+        await v();
+      },
+      getFormMeta: () => ({
+        valid: d.value.valid,
+        dirty: d.value.dirty,
+        touched: d.value.touched,
+        pending: d.value.pending
+      }),
+      setTouched: (e) => {
+        n.schema.sections.forEach((t) => {
+          t.fields.forEach((s) => {
+            V(s.name, e);
+          });
+        });
+      },
+      highlightFieldWithError: (e, t) => {
+        t && h({ [e]: t }), V(e, !0);
+      },
+      clearFieldErrors: (e) => {
+        if (e)
+          h({ [e]: "" });
+        else {
+          const t = {};
+          Object.keys(p.value).forEach((s) => {
+            t[s] = "";
+          }), h(t);
+        }
+      },
+      getCurrentErrors: () => {
+        const e = {};
+        for (const [t, s] of Object.entries(p.value))
+          s !== void 0 && (e[t] = s);
+        return e;
+      },
+      // Legacy/additional methods
+      validate: B,
+      reset: C,
+      setFieldValue: (e, t) => {
+        a[e] = t;
+      },
+      getFieldValue: (e) => a[e],
+      formData: a,
+      formRef: F
+    }), (e, t) => (r(), o("form", {
+      ref_key: "formRef",
+      ref: F,
+      class: f(z.value),
+      onSubmit: t[0] || (t[0] = ee(
+        //@ts-ignore
+        (...s) => y(g) && y(g)(...s),
+        ["prevent"]
+      ))
+    }, [
+      e.schema.title || e.schema.description ? (r(), o("div", re, [
+        e.schema.title ? (r(), o("h2", oe, i(e.schema.title), 1)) : l("", !0),
+        e.schema.description ? (r(), o("p", le, i(e.schema.description), 1)) : l("", !0)
+      ])) : l("", !0),
+      (r(!0), o(S, null, _($.value, (s, K) => (r(), o("div", {
+        key: s.id || K
+      }, [
+        s.title || s.description ? (r(), o("div", ne, [
+          s.title ? (r(), o("h3", ie, i(s.title), 1)) : l("", !0),
+          s.description ? (r(), o("p", ce, i(s.description), 1)) : l("", !0)
+        ])) : l("", !0),
+        c("div", {
+          class: f(P(s))
+        }, [
+          (r(!0), o(S, null, _(s.fields, (u) => (r(), o("div", {
+            key: u.name,
+            class: f(H(u))
+          }, [
+            L(u) ? (r(), j(se, {
+              key: 0,
+              field: u,
+              modelValue: a[u.name],
+              "onUpdate:modelValue": (Q) => a[u.name] = Q,
+              "form-data": a,
+              onFieldChange: I
+            }, null, 8, ["field", "modelValue", "onUpdate:modelValue", "form-data"])) : l("", !0)
+          ], 2))), 128))
+        ], 2)
+      ]))), 128)),
+      e.showActions ? (r(), o("div", {
+        key: 1,
+        class: f([
+          "sl-flex sl-gap-3",
+          e.actionsAlignment === "center" ? "sl-justify-center" : e.actionsAlignment === "right" ? "sl-justify-end" : "sl-justify-start"
+        ])
+      }, [
+        e.showCancelButton ? (r(), j(O, {
+          key: 0,
+          variant: "outline",
+          disabled: e.loading,
+          type: "button",
+          onClick: G
+        }, {
+          default: T(() => [
+            x(i(e.cancelButtonText || "Cancel"), 1)
+          ]),
+          _: 1
+        }, 8, ["disabled"])) : l("", !0),
+        N(O, {
+          variant: e.submitButtonVariant,
+          loading: e.loading,
+          disabled: !q.value || e.loading,
+          type: "submit"
+        }, {
+          default: T(() => [
+            x(i(e.submitButtonText || "Submit"), 1)
+          ]),
+          _: 1
+        }, 8, ["variant", "loading", "disabled"])
+      ], 2)) : l("", !0),
+      e.formError ? (r(), o("div", de, [
+        c("div", ue, [
+          c("div", me, [
+            N(y(ae), { class: "sl-h-5 sl-w-5 sl-text-red-400" }),
+            c("div", he, [
+              t[1] || (t[1] = c("h3", { class: "sl-text-sm sl-font-medium sl-text-red-800" }, " Form Error ", -1)),
+              c("div", fe, [
+                c("p", null, i(e.formError), 1)
+              ])
+            ])
+          ])
+        ])
+      ])) : l("", !0)
+    ], 34));
+  }
+});
+export {
+  je as _
+};
+//# sourceMappingURL=DynamicForm.vue_vue_type_script_setup_true_lang-DRDP86Yc.js.map

package/dist/DynamicForm.vue_vue_type_script_setup_true_lang-DRDP86Yc.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DynamicForm.vue_vue_type_script_setup_true_lang-DRDP86Yc.js","sources":["../src/components/forms/DynamicForm.vue"],"sourcesContent":["<!--\n  @component DynamicForm\n  @description Schema-driven form component with validation.\n  \n  Renders forms from a schema definition with sections, fields, conditional\n  visibility, and integrated validation via vee-validate.\n  \n  @props\n  - schema (DynamicFormSchema, required): Form schema with sections and fields\n  - modelValue (object, optional): Form data via v-model\n  - loading (boolean, optional): Loading state for submit button\n  - showActions (boolean, optional): Show submit/cancel buttons\n  - showCancelButton (boolean, optional): Show cancel button\n  - submitButtonText (string, optional): Submit button text\n  - cancelButtonText (string, optional): Cancel button text\n  - actionsAlignment (string, optional): Button alignment - left/center/right\n  - formError (string, optional): Form-level error message\n  \n  @emits\n  - update:modelValue: Emitted when form data changes\n  - submit: Emitted on form submit with data and error setter\n  - cancel: Emitted when cancel is clicked\n  - field-change: Emitted when any field value changes\n  \n  @exposes\n  - validate(): Promise<boolean> - Validate form and return validity\n  - reset(): void - Reset form to initial values\n  - setFieldValue(name, value): void - Set a field value\n  - getFieldValue(name): any - Get a field value\n  - formData: Record<string, any> - Current form data\n  \n  @example\n  <DynamicForm\n    :schema=\"formSchema\"\n    v-model=\"formData\"\n    @submit=\"handleSubmit\"\n    @cancel=\"handleCancel\"\n  />\n-->\n<template>\n  <form\n    ref=\"formRef\"\n    :class=\"formClasses\"\n    @submit.prevent=\"handleSubmit\"\n  >\n    <!-- Form title and description -->\n    <div v-if=\"schema.title || schema.description\" class=\"sl-mb-6\">\n      <h2 v-if=\"schema.title\" class=\"sl-text-lg sl-font-semibold sl-text-gray-900 sl-mb-2\">\n        {{ schema.title }}\n      </h2>\n      <p v-if=\"schema.description\" class=\"sl-text-sm sl-text-gray-600\">\n        {{ schema.description }}\n      </p>\n    </div>\n\n    <!-- Form sections -->\n    <div v-for=\"(section, sectionIndex) in formSections\" :key=\"section.id || sectionIndex\">\n      <!-- Section header -->\n      <div v-if=\"section.title || section.description\" class=\"sl-mb-4\">\n        <h3 v-if=\"section.title\" class=\"sl-text-md sl-font-medium sl-text-gray-900 sl-mb-1\">\n          {{ section.title }}\n        </h3>\n        <p v-if=\"section.description\" class=\"sl-text-sm sl-text-gray-600\">\n          {{ section.description }}\n        </p>\n      </div>\n\n      <!-- Section fields -->\n      <div :class=\"sectionClasses(section)\">\n        <div\n          v-for=\"field in section.fields\"\n          :key=\"field.name\"\n          :class=\"fieldClasses(field)\"\n        >\n          <!-- Conditional rendering -->\n          <SlDynamicFormField\n            v-if=\"shouldShowField(field)\"\n            :field=\"field\"\n            v-model=\"formData[field.name]\"\n            :form-data=\"formData\"\n            @field-change=\"handleFieldChange\"\n          />\n        </div>\n      </div>\n    </div>\n\n    <!-- Form actions -->\n    <div\n      v-if=\"showActions\"\n      :class=\"[\n        'sl-flex sl-gap-3',\n        actionsAlignment === 'center' ? 'sl-justify-center' :\n        actionsAlignment === 'right' ? 'sl-justify-end' :\n        'sl-justify-start'\n      ]\"\n    >\n      <SlButton\n        v-if=\"showCancelButton\"\n        variant=\"outline\"\n        :disabled=\"loading\"\n        type=\"button\"\n        @click=\"handleCancel\"\n      >\n        {{ cancelButtonText || 'Cancel' }}\n      </SlButton>\n      \n      <SlButton\n        :variant=\"submitButtonVariant\"\n        :loading=\"loading\"\n        :disabled=\"!isFormValid || loading\"\n        type=\"submit\"\n      >\n        {{ submitButtonText || 'Submit' }}\n      </SlButton>\n    </div>\n    \n    <!-- Form-level errors -->\n    <div v-if=\"formError\" class=\"sl-mt-4\">\n      <div class=\"sl-bg-red-50 sl-border sl-border-red-200 sl-rounded-md sl-p-4\">\n        <div class=\"sl-flex\">\n          <ExclamationCircleIcon class=\"sl-h-5 sl-w-5 sl-text-red-400\" />\n          <div class=\"sl-ml-3\">\n            <h3 class=\"sl-text-sm sl-font-medium sl-text-red-800\">\n              Form Error\n            </h3>\n            <div class=\"sl-mt-2 sl-text-sm sl-text-red-700\">\n              <p>{{ formError }}</p>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  </form>\n</template>\n\n<script setup lang=\"ts\">\n/**\n * DynamicForm - Schema-driven form component\n * \n * Renders forms dynamically from a schema definition. Supports sections,\n * conditional fields, validation, and form-level error handling.\n * \n * ## Features\n * - Schema-driven form generation\n * - Multi-section support with columns\n * - Conditional field visibility\n * - vee-validate integration\n * - Field change callbacks\n * - Form-level error display\n * \n * ## Schema Structure\n * ```typescript\n * {\n *   title?: string,\n *   description?: string,\n *   sections: [\n *     {\n *       title?: string,\n *       columns?: 1 | 2 | 3,\n *       fields: [\n *         { name: 'email', type: 'text', label: 'Email', rules: schema }\n *       ]\n *     }\n *   ]\n * }\n * ```\n * \n * @module components/forms/DynamicForm\n * @see {@link DynamicFormSchema} for schema interface\n * @see {@link DynamicFormField} for field configuration\n */\nimport { computed, reactive, ref, watch } from 'vue'\nimport { useForm } from 'vee-validate'\nimport { ExclamationCircleIcon } from '@heroicons/vue/24/outline'\nimport SlButton from '../UiButton.vue'\nimport SlDynamicFormField from './DynamicFormField.vue'\nimport type { \n  DynamicFormSchema, \n  DynamicFormSection,\n  DynamicFormField,\n  ButtonVariant \n} from '../../types/form'\n\ninterface Props {\n  schema: DynamicFormSchema\n  modelValue?: Record<string, any>\n  loading?: boolean\n  showActions?: boolean\n  showCancelButton?: boolean\n  submitButtonText?: string\n  cancelButtonText?: string\n  submitButtonVariant?: ButtonVariant\n  actionsAlignment?: 'left' | 'center' | 'right'\n  formError?: string\n}\n\nconst props = withDefaults(defineProps<Props>(), {\n  showActions: true,\n  showCancelButton: false,\n  submitButtonVariant: 'primary',\n  actionsAlignment: 'right'\n})\n\nconst emit = defineEmits<{\n  (e: 'update:modelValue', value: Record<string, any>): void\n  (e: 'submit', data: Record<string, any>, ctx: { setErrors: (errors: Record<string, string>) => void }): void\n  (e: 'cancel'): void\n  (e: 'field-change', field: DynamicFormField, value: any, formData: Record<string, any>): void\n}>()\n\nconst formRef = ref<HTMLFormElement>()\nconst formData = reactive<Record<string, any>>({})\n\n// Initialize form with vee-validate\nconst { handleSubmit: veeHandleSubmit, setErrors, errors, meta, validate: veeValidate, resetForm: veeResetForm, setFieldTouched } = useForm({\n  keepValuesOnUnmount: true\n})\n\n// Get default value based on field type\nconst getDefaultValue = (type: string) => {\n  switch (type) {\n    case 'checkbox':\n    case 'switch':\n      return false\n    case 'select':\n      return null\n    case 'number':\n      return 0\n    default:\n      return ''\n  }\n}\n\n// Initialize form data\nconst initializeFormData = () => {\n  const initialData = { ...props.modelValue } || {}\n  \n  // Set default values from schema\n  props.schema.sections.forEach(section => {\n    section.fields.forEach(field => {\n      if (!(field.name in initialData)) {\n        initialData[field.name] = field.defaultValue ?? getDefaultValue(field.type)\n      }\n    })\n  })\n  \n  Object.assign(formData, initialData)\n}\n\n// Watch for external changes to modelValue\nwatch(\n  () => props.modelValue,\n  (newValue) => {\n    if (newValue) {\n      Object.assign(formData, newValue)\n    }\n  },\n  { deep: true }\n)\n\n// Watch form data changes and emit updates\nwatch(\n  formData,\n  (newData) => {\n    emit('update:modelValue', { ...newData })\n  },\n  { deep: true }\n)\n\n// Initialize form data on mount\ninitializeFormData()\n\nconst formSections = computed(() => {\n  return props.schema.sections.filter(section => \n    section.condition ? section.condition(formData) : true\n  )\n})\n\nconst formClasses = computed(() => {\n  const baseClasses = ['sl-space-y-6']\n  \n  if (props.schema.className) {\n    baseClasses.push(props.schema.className)\n  }\n  \n  return baseClasses.join(' ')\n})\n\nconst sectionClasses = (section: DynamicFormSection) => {\n  const baseClasses = [\n    'sl-grid',\n    'sl-gap-4'\n  ]\n  \n  // Grid columns based on section layout\n  const columns = section.columns || 1\n  baseClasses.push(`sl-grid-cols-1`)\n  \n  if (columns > 1) {\n    baseClasses.push(`md:sl-grid-cols-${Math.min(columns, 3)}`)\n  }\n  \n  if (section.className) {\n    baseClasses.push(section.className)\n  }\n  \n  return baseClasses.join(' ')\n}\n\nconst fieldClasses = (field: DynamicFormField) => {\n  const baseClasses: string[] = []\n  \n  // Field span\n  if (field.colSpan && field.colSpan > 1) {\n    baseClasses.push(`sl-col-span-${Math.min(field.colSpan, 3)}`)\n  }\n  \n  if (field.className) {\n    baseClasses.push(field.className)\n  }\n  \n  return baseClasses.join(' ')\n}\n\nconst shouldShowField = (field: DynamicFormField): boolean => {\n  if (field.condition) {\n    return field.condition(formData, field)\n  }\n  return true\n}\n\nconst isFormValid = computed(() => {\n  return meta.value.valid\n})\n\nconst handleSubmit = veeHandleSubmit((values) => {\n  emit('submit', values, { setErrors })\n})\n\nconst handleCancel = () => {\n  emit('cancel')\n}\n\nconst handleFieldChange = (field: DynamicFormField, value: any) => {\n  emit('field-change', field, value, formData)\n  \n  // Handle field dependencies\n  if (field.onFieldChange) {\n    field.onFieldChange(value, field, formData)\n  }\n}\n\n// Expose form methods matching DynamicFormRef interface\n\n/** Submit the form */\nconst submitForm = async (): Promise<void> => {\n  await handleSubmit()\n}\n\n/** Reset form to initial values */\nconst resetForm = (): void => {\n  veeResetForm()\n  Object.keys(formData).forEach(key => {\n    delete formData[key]\n  })\n  initializeFormData()\n}\n\n/** Build FormValidationResult from current state */\nconst buildValidationResult = (): { valid: boolean; errors: Record<string, string>; values: Record<string, any> } => {\n  // Filter out undefined values from errors\n  const filteredErrors: Record<string, string> = {}\n  for (const [key, value] of Object.entries(errors.value)) {\n    if (value !== undefined) {\n      filteredErrors[key] = value\n    }\n  }\n  return {\n    valid: meta.value.valid,\n    errors: filteredErrors,\n    values: { ...formData }\n  }\n}\n\n/** Validate form and return result */\nconst validateForm = async (): Promise<{ valid: boolean; errors: Record<string, string>; values: Record<string, any> }> => {\n  await veeValidate()\n  return buildValidationResult()\n}\n\n/** Validate including nested forms */\nconst validateWithChildren = async (): Promise<{ valid: boolean; errors: Record<string, string>; values: Record<string, any> }> => {\n  // For now, same as validateForm since we don't have nested form support yet\n  await veeValidate()\n  return buildValidationResult()\n}\n\n/** Trigger pseudo-submit (validate without actual submit) */\nconst handlePseudoSubmit = async (): Promise<void> => {\n  await veeValidate()\n}\n\n/** Get current form metadata */\nconst getFormMeta = () => {\n  return {\n    valid: meta.value.valid,\n    dirty: meta.value.dirty,\n    touched: meta.value.touched,\n    pending: meta.value.pending\n  }\n}\n\n/** Set touched state for all fields */\nconst setTouched = (value: boolean): void => {\n  props.schema.sections.forEach(section => {\n    section.fields.forEach(field => {\n      setFieldTouched(field.name, value)\n    })\n  })\n}\n\n/** Highlight a field with an error */\nconst highlightFieldWithError = (fieldName: string, message?: string): void => {\n  if (message) {\n    setErrors({ [fieldName]: message })\n  }\n  setFieldTouched(fieldName, true)\n}\n\n/** Clear field errors */\nconst clearFieldErrors = (fieldName?: string): void => {\n  if (fieldName) {\n    setErrors({ [fieldName]: '' })\n  } else {\n    const clearedErrors: Record<string, string> = {}\n    Object.keys(errors.value).forEach(key => {\n      clearedErrors[key] = ''\n    })\n    setErrors(clearedErrors)\n  }\n}\n\n/** Get current validation errors */\nconst getCurrentErrors = (): Record<string, string> => {\n  // Filter out undefined values from errors\n  const filteredErrors: Record<string, string> = {}\n  for (const [key, value] of Object.entries(errors.value)) {\n    if (value !== undefined) {\n      filteredErrors[key] = value\n    }\n  }\n  return filteredErrors\n}\n\n// Legacy methods for backwards compatibility\nconst setFieldValue = (fieldName: string, value: any) => {\n  formData[fieldName] = value\n}\n\nconst getFieldValue = (fieldName: string) => {\n  return formData[fieldName]\n}\n\ndefineExpose({\n  // DynamicFormRef interface methods\n  submitForm,\n  resetForm,\n  validateForm,\n  validateWithChildren,\n  handlePseudoSubmit,\n  getFormMeta,\n  setTouched,\n  highlightFieldWithError,\n  clearFieldErrors,\n  getCurrentErrors,\n  // Legacy/additional methods\n  validate: validateForm,\n  reset: resetForm,\n  setFieldValue,\n  getFieldValue,\n  formData,\n  formRef\n})\n</script>\n"],"names":["props","__props","emit","__emit","formRef","ref","formData","reactive","veeHandleSubmit","setErrors","errors","meta","veeValidate","veeResetForm","setFieldTouched","useForm","getDefaultValue","type","initializeFormData","initialData","section","field","watch","newValue","newData","formSections","computed","formClasses","baseClasses","sectionClasses","columns","fieldClasses","shouldShowField","isFormValid","handleSubmit","values","handleCancel","handleFieldChange","value","submitForm","resetForm","key","buildValidationResult","filteredErrors","validateForm","__expose","fieldName","message","clearedErrors","_createElementBlock","_cache","_withModifiers","_unref","args","schema","_openBlock","_hoisted_1","_hoisted_2","_toDisplayString","_hoisted_3","_Fragment","_renderList","sectionIndex","_hoisted_4","_hoisted_5","_hoisted_6","_createElementVNode","_normalizeClass","_createBlock","SlDynamicFormField","$event","showActions","actionsAlignment","showCancelButton","SlButton","loading","cancelButtonText","_createVNode","submitButtonVariant","submitButtonText","formError","_hoisted_7","_hoisted_8","_hoisted_9","ExclamationCircleIcon","_hoisted_10","_hoisted_11"],"mappings":"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"}

package/dist/{DynamicFormField.vue_vue_type_script_setup_true_lang-DvT03FIS.js → DynamicFormField.vue_vue_type_script_setup_true_lang-Ct8b80dM.js}

@@ -1,26 +1,10 @@
-import { createElementBlock as u, openBlock as d, createElementVNode as o, defineComponent as b, computed as s, defineAsyncComponent as y, createBlock as w, resolveDynamicComponent as g, mergeProps as k, toHandlers as _, createVNode as L, unref as V, toDisplayString as C } from "vue";
-import t from "./components/TextInput.js";
-function M(a, r) {
-  return d(), u("svg", {
-    xmlns: "http://www.w3.org/2000/svg",
-    fill: "none",
-    viewBox: "0 0 24 24",
-    "stroke-width": "1.5",
-    stroke: "currentColor",
-    "aria-hidden": "true",
-    "data-slot": "icon"
-  }, [
-    o("path", {
-      "stroke-linecap": "round",
-      "stroke-linejoin": "round",
-      d: "M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126ZM12 15.75h.007v.008H12v-.008Z"
-    })
-  ]);
-}
-const P = {
+import { defineComponent as b, computed as s, defineAsyncComponent as y, createBlock as v, createElementBlock as g, openBlock as r, resolveDynamicComponent as w, mergeProps as k, toHandlers as _, createElementVNode as o, createVNode as V, unref as L, toDisplayString as P } from "vue";
+import t from "./inputs/TextInput.js";
+import { r as C } from "./ExclamationTriangleIcon-BNKYmV_J.js";
+const D = {
   key: 1,
   class: "sl-p-4 sl-bg-yellow-50 sl-border sl-border-yellow-200 sl-rounded-md"
-}, D = { class: "sl-flex" }, F = { class: "sl-ml-3" }, B = { class: "sl-mt-2 sl-text-sm sl-text-yellow-700" }, H = /* @__PURE__ */ b({
+}, F = { class: "sl-flex" }, M = { class: "sl-ml-3" }, T = { class: "sl-mt-2 sl-text-sm sl-text-yellow-700" }, S = /* @__PURE__ */ b({
   __name: "DynamicFormField",
   props: {
     field: {},
@@ -28,8 +12,8 @@ const P = {
     formData: {}
   },
   emits: ["update:modelValue", "field-change"],
-  setup(a, { emit: r }) {
-    const e = a, c = r, f = {
+  setup(c, { emit: m }) {
+    const e = c, a = m, u = {
       text: () => Promise.resolve(t),
       email: () => Promise.resolve(t),
       password: () => Promise.resolve(t),
@@ -41,19 +25,19 @@ const P = {
       combobox: () => import("./inputs/ComboboxInput.js"),
       checkbox: () => import("./inputs/CheckboxInput.js"),
       switch: () => import("./inputs/SwitchInput.js")
-    }, m = s(() => {
-      const l = f[e.field.type];
+    }, d = s(() => {
+      const l = u[e.field.type];
       return l ? y({
         loader: l,
         errorComponent: () => null,
         delay: 0
       }) : null;
     }), n = s({
-      get: () => e.modelValue ?? e.field.defaultValue ?? x(),
+      get: () => e.modelValue ?? e.field.defaultValue ?? h(),
       set: (l) => {
-        c("update:modelValue", l), c("field-change", e.field, l);
+        a("update:modelValue", l), a("field-change", e.field, l);
       }
-    }), p = s(() => {
+    }), f = s(() => {
       const l = {
         name: e.field.name,
         label: e.field.label,
@@ -127,12 +111,12 @@ const P = {
         default:
           return l;
       }
-    }), h = s(() => {
+    }), 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 ?? {});
       }), l;
-    }), x = () => {
+    }), h = () => {
       switch (e.field.type) {
         case "checkbox":
         case "switch":
@@ -144,19 +128,19 @@ const P = {
         default:
           return "";
       }
-    }, v = (l) => {
+    }, x = (l) => {
       n.value = l;
     };
-    return (l, i) => m.value ? (d(), w(g(m.value), k({ key: 0 }, p.value, _(h.value), {
+    return (l, i) => d.value ? (r(), v(w(d.value), k({ key: 0 }, f.value, _(p.value), {
       "model-value": n.value,
-      "onUpdate:modelValue": v
-    }), null, 16, ["model-value"])) : (d(), u("div", P, [
-      o("div", D, [
-        L(V(M), { class: "sl-h-5 sl-w-5 sl-text-yellow-400" }),
-        o("div", F, [
+      "onUpdate:modelValue": x
+    }), null, 16, ["model-value"])) : (r(), g("div", D, [
+      o("div", F, [
+        V(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", B, [
-            o("p", null, 'Field type "' + C(l.field.type) + '" is not supported.', 1)
+          o("div", T, [
+            o("p", null, 'Field type "' + P(l.field.type) + '" is not supported.', 1)
           ])
         ])
       ])
@@ -164,6 +148,6 @@ const P = {
   }
 });
 export {
-  H as _
+  S as _
 };
-//# sourceMappingURL=DynamicFormField.vue_vue_type_script_setup_true_lang-DvT03FIS.js.map
+//# sourceMappingURL=DynamicFormField.vue_vue_type_script_setup_true_lang-Ct8b80dM.js.map

package/dist/DynamicFormField.vue_vue_type_script_setup_true_lang-Ct8b80dM.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DynamicFormField.vue_vue_type_script_setup_true_lang-Ct8b80dM.js","sources":["../src/components/forms/DynamicFormField.vue"],"sourcesContent":["<!--\n  @component DynamicFormField\n  @description Renders a single field based on field configuration.\n  \n  Used by DynamicForm to render individual fields. Maps field type to\n  appropriate input component and passes configuration props.\n  \n  @props\n  - field (DynamicFormField, required): Field configuration object\n  - modelValue (any, optional): Field value via v-model\n  - formData (object, optional): Complete form data for conditional logic\n  \n  @emits\n  - update:modelValue: Emitted when field value changes\n  - field-change: Emitted with field and value on change\n  \n  @example\n  <DynamicFormField\n    :field=\"{ name: 'email', type: 'email', label: 'Email' }\"\n    v-model=\"formData.email\"\n  />\n-->\n<template>\n  <component\n    :is=\"fieldComponent\"\n    v-if=\"fieldComponent\"\n    v-bind=\"componentProps\"\n    v-on=\"componentEvents\"\n    :model-value=\"fieldValue\"\n    @update:model-value=\"handleFieldChange\"\n  />\n  \n  <!-- Fallback for unknown field types -->\n  <div \n    v-else\n    class=\"sl-p-4 sl-bg-yellow-50 sl-border sl-border-yellow-200 sl-rounded-md\"\n  >\n    <div class=\"sl-flex\">\n      <ExclamationTriangleIcon class=\"sl-h-5 sl-w-5 sl-text-yellow-400\" />\n      <div class=\"sl-ml-3\">\n        <h3 class=\"sl-text-sm sl-font-medium sl-text-yellow-800\">\n          Unknown field type\n        </h3>\n        <div class=\"sl-mt-2 sl-text-sm sl-text-yellow-700\">\n          <p>Field type \"{{ field.type }}\" is not supported.</p>\n        </div>\n      </div>\n    </div>\n  </div>\n</template>\n\n<script setup lang=\"ts\">\n/**\n * DynamicFormField - Field renderer for DynamicForm\n * \n * Dynamically loads and renders the appropriate input component based on\n * the field type configuration. Handles prop mapping and event forwarding.\n * \n * ## Supported Field Types\n * - text, email, password, number, tel, url → UiTextInput\n * - textarea → TextAreaInput\n * - select → SelectInput\n * - combobox → ComboboxInput\n * - checkbox → CheckboxInput\n * - switch → SwitchInput\n * \n * @module components/forms/DynamicFormField\n * @see {@link DynamicFormField} for field configuration\n */\nimport { computed, defineAsyncComponent } from 'vue'\nimport UiTextInput from '../inputs/TextInput.vue'\nimport { ExclamationTriangleIcon } from '@heroicons/vue/24/outline'\nimport type { DynamicFormField } from '../../types/form'\n\ninterface Props {\n  field: DynamicFormField\n  modelValue?: any\n  formData?: Record<string, any>\n}\n\nconst props = defineProps<Props>()\n\nconst emit = defineEmits<{\n  'update:modelValue': [value: any]\n  'field-change': [field: DynamicFormField, value: any]\n}>()\n\n// Component mapping for dynamic loading\nconst componentMap: Record<string, () => Promise<any>> = {\n  text: () => Promise.resolve(UiTextInput),\n  email: () => Promise.resolve(UiTextInput), \n  password: () => Promise.resolve(UiTextInput),\n  number: () => Promise.resolve(UiTextInput),\n  tel: () => Promise.resolve(UiTextInput),\n  url: () => Promise.resolve(UiTextInput),\n  textarea: () => import('../inputs/TextAreaInput.vue'),\n  select: () => import('../inputs/SelectInput.vue'),\n  combobox: () => import('../inputs/ComboboxInput.vue'),\n  checkbox: () => import('../inputs/CheckboxInput.vue'),\n  switch: () => import('../inputs/SwitchInput.vue'),\n}\n\nconst fieldComponent = computed(() => {\n  const componentLoader = componentMap[props.field.type]\n  if (componentLoader) {\n    return defineAsyncComponent({\n      loader: componentLoader,\n      errorComponent: () => null,\n      delay: 0\n    })\n  }\n  return null\n})\n\nconst fieldValue = computed({\n  get: () => props.modelValue ?? props.field.defaultValue ?? getDefaultValue(),\n  set: (value) => {\n    emit('update:modelValue', value)\n    emit('field-change', props.field, value)\n  }\n})\n\nconst componentProps = computed(() => {\n  const baseProps: Record<string, any> = {\n    name: props.field.name,\n    label: props.field.label,\n    placeholder: props.field.placeholder,\n    disabled: props.field.disabled,\n    rules: props.field.validation,\n    validateOnMount: props.field.validateOnMount,\n    tertiaryLabel: props.field.tertiaryLabel,\n    successMessage: props.field.successMessage\n  }\n\n  // Type-specific props\n  switch (props.field.type) {\n    case 'text':\n    case 'email':\n    case 'password':\n    case 'number':\n    case 'tel':\n    case 'url':\n      return {\n        ...baseProps,\n        type: props.field.inputType || props.field.type,\n        maxlength: props.field.maxLength,\n        minlength: props.field.minLength,\n        min: props.field.min,\n        max: props.field.max,\n        step: props.field.step,\n        spellcheck: props.field.spellcheck,\n        autocomplete: props.field.autocomplete\n      }\n    \n    case 'textarea':\n      return {\n        ...baseProps,\n        rows: props.field.rows,\n        maxlength: props.field.maxLength,\n        spellcheck: props.field.spellcheck\n      }\n    \n    case 'select':\n      return {\n        ...baseProps,\n        items: props.field.options || [],\n        multiple: props.field.multiple,\n        itemKey: props.field.optionKey || 'value',\n        itemText: props.field.optionLabel || 'label',\n        showAll: props.field.showSelectAll\n      }\n    \n    case 'combobox':\n      return {\n        ...baseProps,\n        items: props.field.options || [],\n        itemKey: props.field.optionKey || 'value',\n        itemText: props.field.optionLabel || 'label',\n        customQuery: props.field.customQuery,\n        loading: props.field.loading\n      }\n    \n    case 'checkbox':\n      return {\n        ...baseProps,\n        description: props.field.description,\n        immediate: props.field.immediate ?? true,\n        isDescriptionHtml: props.field.isDescriptionHtml\n      }\n    \n    case 'switch':\n      return {\n        ...baseProps,\n        description: props.field.description,\n        immediate: props.field.immediate ?? true,\n        boxShadow: props.field.boxShadow,\n        hideMainLabel: props.field.hideMainLabel,\n        textTrue: props.field.textTrue,\n        textFalse: props.field.textFalse\n      }\n    \n    default:\n      return baseProps\n  }\n})\n\nconst componentEvents = computed(() => {\n  const baseEvents: Record<string, Function> = {}\n  \n  // Add event handlers based on field configuration\n  if (props.field.onBlur) {\n    baseEvents.blur = props.field.onBlur\n  }\n  \n  if (props.field.onFocus) {\n    baseEvents.focus = props.field.onFocus\n  }\n  \n  if (props.field.onChange) {\n    baseEvents['update:modelValue'] = (value: any) => {\n      fieldValue.value = value\n      props.field.onChange?.(value, props.field, props.formData ?? {})\n    }\n  }\n  \n  return baseEvents\n})\n\nconst getDefaultValue = () => {\n  switch (props.field.type) {\n    case 'checkbox':\n    case 'switch':\n      return false\n    case 'select':\n      return props.field.multiple ? [] : null\n    case 'number':\n      return props.field.min || 0\n    default:\n      return ''\n  }\n}\n\nconst handleFieldChange = (value: any) => {\n  fieldValue.value = value\n}\n</script>\n"],"names":["props","__props","emit","__emit","componentMap","UiTextInput","fieldComponent","computed","componentLoader","defineAsyncComponent","fieldValue","getDefaultValue","value","componentProps","baseProps","componentEvents","baseEvents","handleFieldChange","_createBlock","_resolveDynamicComponent","_mergeProps","_toHandlers","_openBlock","_createElementBlock","_hoisted_1","_createElementVNode","_hoisted_2","_createVNode","_unref","ExclamationTriangleIcon","_hoisted_3","_cache","_hoisted_4","_toDisplayString","field"],"mappings":"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"}

package/dist/EmailInput.vue_vue_type_script_setup_true_lang-Dhfgs2Jn.js

@@ -0,0 +1,122 @@
+import { defineComponent as I, ref as M, toRef as m, watch as r, nextTick as V, createElementBlock as F, openBlock as K, createVNode as q, unref as a, withCtx as c, renderSlot as L, createElementVNode as N, withKeys as O, normalizeClass as T, withModifiers as $ } from "vue";
+import { useField as z } from "vee-validate";
+import { string as H } from "yup";
+import R from "./forms/FormFieldWrapper.js";
+import { g as S } from "./id-DafBB_QF.js";
+const U = { class: "sl-w-full" }, W = ["name", "id", "value", "placeholder", "autocomplete", "disabled", "onKeydown"], P = /* @__PURE__ */ I({
+  __name: "EmailInput",
+  props: {
+    name: {},
+    value: { default: "" },
+    label: { default: "Email" },
+    placeholder: { default: "you@example.com" },
+    disabled: { type: Boolean, default: !1 },
+    disabledMessage: { default: "" },
+    rules: { default: () => H().email("Invalid email address").required("Email is required") },
+    successMessage: { default: "" },
+    tertiaryLabel: { default: "" },
+    colorfulValidation: { type: Boolean, default: !0 },
+    showValidCheck: { type: Boolean, default: !0 },
+    showErrors: { type: Boolean, default: !1 },
+    autoComplete: { default: "email" }
+  },
+  emits: ["update:value", "update:validity", "focus", "blur", "submit"],
+  setup(p, { expose: f, emit: h }) {
+    const t = p, l = h, i = S(`sl-${t.name}`), u = M(!1), {
+      value: s,
+      errorMessage: v,
+      handleBlur: g,
+      handleChange: b,
+      meta: d,
+      validate: n,
+      setTouched: y
+    } = z(m(t, "name"), m(t, "rules"), {
+      initialValue: t.value,
+      validateOnValueUpdate: !0,
+      validateOnMount: !1
+    });
+    r(
+      () => t.value,
+      (e) => {
+        e !== void 0 && e !== s.value && (s.value = e);
+      },
+      { immediate: !0 }
+    ), r(
+      () => d.valid,
+      (e) => V(() => l("update:validity", e)),
+      { immediate: !0 }
+    ), r(s, (e, o) => {
+      e !== o && l("update:value", e || "");
+    });
+    function w(e) {
+      const o = e.target.value;
+      b(o), l("update:value", o);
+    }
+    async function k(e) {
+      u.value || (u.value = !0, y(!0)), await n(), g(e), l("blur", e);
+    }
+    function B(e) {
+      l("focus", e);
+    }
+    function E() {
+      d.valid && s.value && l("submit");
+    }
+    return f({
+      focus: () => {
+        document.getElementById(i)?.focus();
+      },
+      blur: () => {
+        document.getElementById(i)?.blur();
+      },
+      validate: n
+    }), (e, o) => (K(), F("div", U, [
+      q(R, {
+        id: a(i),
+        name: e.name,
+        label: e.label,
+        "tertiary-label": e.tertiaryLabel,
+        "error-message": a(v),
+        "success-message": e.successMessage,
+        "is-valid": a(d).valid,
+        "is-touched": a(d).touched,
+        "show-errors": e.showErrors,
+        "show-valid-check": e.showValidCheck,
+        "colorful-validation": e.colorfulValidation,
+        disabled: e.disabled,
+        "disabled-message": e.disabledMessage
+      }, {
+        default: c(({ inputClasses: C }) => [
+          N("input", {
+            name: e.name,
+            id: a(i),
+            type: "email",
+            value: a(s),
+            placeholder: e.placeholder,
+            autocomplete: e.autoComplete,
+            disabled: e.disabled,
+            class: T(["sl-block sl-w-full sl-bg-transparent sl-text-gray-900 dark:sl-text-gray-100 placeholder:sl-text-gray-400 dark:placeholder:sl-text-gray-500 focus:sl-ring-0 focus:sl-outline-none sm:sl-text-sm sm:sl-leading-6", [
+              C,
+              "sl-py-1.5 sl-pl-2",
+              { "sl-text-gray-400": e.disabled },
+              { "sl-pr-10": e.showValidCheck }
+            ]]),
+            onInput: w,
+            onFocus: B,
+            onBlur: k,
+            onKeydown: O($(E, ["prevent"]), ["enter"]),
+            enterkeyhint: "go",
+            "data-testid": "email-input"
+          }, null, 42, W)
+        ]),
+        "input-right": c(() => [
+          L(e.$slots, "input-right")
+        ]),
+        _: 3
+      }, 8, ["id", "name", "label", "tertiary-label", "error-message", "success-message", "is-valid", "is-touched", "show-errors", "show-valid-check", "colorful-validation", "disabled", "disabled-message"])
+    ]));
+  }
+});
+export {
+  P as _
+};
+//# sourceMappingURL=EmailInput.vue_vue_type_script_setup_true_lang-Dhfgs2Jn.js.map

package/dist/EmailInput.vue_vue_type_script_setup_true_lang-Dhfgs2Jn.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"EmailInput.vue_vue_type_script_setup_true_lang-Dhfgs2Jn.js","sources":["../src/components/inputs/EmailInput.vue"],"sourcesContent":["<!--\n  @component EmailInput\n  @description Specialized email input with validation and optional verification.\n  \n  A text input specifically designed for email addresses with built-in\n  email validation. Extends the base text input with email-specific\n  features like type=\"email\" and email validation rules.\n  \n  @props\n  - name (string, required): Field name for form binding\n  - value (string, optional): Email value (use v-model:value)\n  - label (string, optional): Display label\n  - placeholder (string, optional): Placeholder text\n  - disabled (boolean, optional): Disabled state\n  - rules (Schema, optional): Custom validation rules\n  - colorfulValidation (boolean, optional): Color-coded validation states\n  - showValidCheck (boolean, optional): Show check icon when valid\n  - showErrors (boolean, optional): Force show errors\n  - autoComplete (string, optional): Autocomplete attribute value\n  \n  @emits\n  - update:value: Emitted when value changes\n  - update:validity: Emitted when validation state changes\n  - focus: Emitted on focus\n  - blur: Emitted on blur\n  - submit: Emitted when Enter is pressed with valid email\n  \n  @example\n  <EmailInput\n    name=\"email\"\n    label=\"Email Address\"\n    v-model:value=\"form.email\"\n    placeholder=\"you@example.com\"\n  />\n-->\n<template>\n  <div class=\"sl-w-full\">\n    <FormFieldWrapper\n      :id=\"id\"\n      :name=\"name\"\n      :label=\"label\"\n      :tertiary-label=\"tertiaryLabel\"\n      :error-message=\"errorMessage\"\n      :success-message=\"successMessage\"\n      :is-valid=\"meta.valid\"\n      :is-touched=\"meta.touched\"\n      :show-errors=\"showErrors\"\n      :show-valid-check=\"showValidCheck\"\n      :colorful-validation=\"colorfulValidation\"\n      :disabled=\"disabled\"\n      :disabled-message=\"disabledMessage\"\n    >\n      <template #default=\"{ inputClasses }\">\n        <input\n          :name=\"name\"\n          :id=\"id\"\n          type=\"email\"\n          :value=\"inputValue\"\n          :placeholder=\"placeholder\"\n          :autocomplete=\"autoComplete\"\n          :disabled=\"disabled\"\n          class=\"sl-block sl-w-full sl-bg-transparent sl-text-gray-900 dark:sl-text-gray-100 placeholder:sl-text-gray-400 dark:placeholder:sl-text-gray-500 focus:sl-ring-0 focus:sl-outline-none sm:sl-text-sm sm:sl-leading-6\"\n          :class=\"[\n            inputClasses,\n            'sl-py-1.5 sl-pl-2',\n            { 'sl-text-gray-400': disabled },\n            { 'sl-pr-10': showValidCheck },\n          ]\"\n          @input=\"handleInput\"\n          @focus=\"handleFocus\"\n          @blur=\"handleBlur\"\n          @keydown.enter.prevent=\"handleEnterKey\"\n          enterkeyhint=\"go\"\n          data-testid=\"email-input\"\n        />\n      </template>\n\n      <template #input-right>\n        <slot name=\"input-right\" />\n      </template>\n    </FormFieldWrapper>\n  </div>\n</template>\n\n<script setup lang=\"ts\">\nimport { ref, toRef, watch, nextTick } from 'vue'\nimport { useField } from 'vee-validate'\nimport { string as yupString, type AnySchema } from 'yup'\nimport FormFieldWrapper from '../forms/FormFieldWrapper.vue'\nimport { generateId } from '../../utils/id'\n\ninterface Props {\n  name: string\n  value?: string\n  label?: string\n  placeholder?: string\n  disabled?: boolean\n  disabledMessage?: string\n  rules?: AnySchema\n  successMessage?: string\n  tertiaryLabel?: string\n  colorfulValidation?: boolean\n  showValidCheck?: boolean\n  showErrors?: boolean\n  autoComplete?: string\n}\n\nconst props = withDefaults(defineProps<Props>(), {\n  value: '',\n  label: 'Email',\n  placeholder: 'you@example.com',\n  disabled: false,\n  disabledMessage: '',\n  rules: () => yupString().email('Invalid email address').required('Email is required'),\n  successMessage: '',\n  tertiaryLabel: '',\n  colorfulValidation: true,\n  showValidCheck: true,\n  showErrors: false,\n  autoComplete: 'email'\n})\n\nconst emit = defineEmits<{\n  'update:value': [value: string]\n  'update:validity': [isValid: boolean]\n  focus: [event: FocusEvent]\n  blur: [event: FocusEvent]\n  submit: []\n}>()\n\nconst id = generateId(`sl-${props.name}`)\nconst touched = ref(false)\n\nconst {\n  value: inputValue,\n  errorMessage,\n  handleBlur: veeHandleBlur,\n  handleChange,\n  meta,\n  validate,\n  setTouched\n} = useField(toRef(props, 'name'), toRef(props, 'rules'), {\n  initialValue: props.value,\n  validateOnValueUpdate: true,\n  validateOnMount: false\n})\n\n// Sync external value changes\nwatch(\n  () => props.value,\n  (newValue) => {\n    if (newValue !== undefined && newValue !== inputValue.value) {\n      inputValue.value = newValue\n    }\n  },\n  { immediate: true }\n)\n\n// Emit validity changes\nwatch(\n  () => meta.valid,\n  (v) => nextTick(() => emit('update:validity', v)),\n  { immediate: true }\n)\n\n// Emit value changes\nwatch(inputValue, (newValue, oldValue) => {\n  if (newValue !== oldValue) {\n    emit('update:value', newValue || '')\n  }\n})\n\nfunction handleInput(e: Event) {\n  const v = (e.target as HTMLInputElement).value\n  handleChange(v)\n  emit('update:value', v)\n}\n\nasync function handleBlur(e: FocusEvent) {\n  if (!touched.value) {\n    touched.value = true\n    setTouched(true)\n  }\n  await validate()\n  veeHandleBlur(e)\n  emit('blur', e)\n}\n\nfunction handleFocus(e: FocusEvent) {\n  emit('focus', e)\n}\n\nfunction handleEnterKey() {\n  if (meta.valid && inputValue.value) {\n    emit('submit')\n  }\n}\n\ndefineExpose({\n  focus: () => {\n    const el = document.getElementById(id)\n    el?.focus()\n  },\n  blur: () => {\n    const el = document.getElementById(id)\n    el?.blur()\n  },\n  validate\n})\n</script>\n\n"],"names":["props","__props","emit","__emit","id","generateId","touched","ref","inputValue","errorMessage","veeHandleBlur","handleChange","meta","validate","setTouched","useField","toRef","watch","newValue","v","nextTick","oldValue","handleInput","handleBlur","handleFocus","handleEnterKey","__expose","_openBlock","_createElementBlock","_hoisted_1","_createVNode","FormFieldWrapper","_unref","name","label","tertiaryLabel","successMessage","showErrors","showValidCheck","colorfulValidation","disabled","disabledMessage","_withCtx","inputClasses","_createElementVNode","placeholder","autoComplete","_renderSlot","_ctx"],"mappings":"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"}

package/dist/EmptyInput.vue_vue_type_script_setup_true_lang-BDxgc5Bs.js

@@ -0,0 +1,32 @@
+import { defineComponent as o, createElementBlock as t, openBlock as s, createCommentVNode as l, createElementVNode as a, toDisplayString as r, createBlock as n, resolveDynamicComponent as d } from "vue";
+const i = {
+  class: "sl-px-4 sl-py-5 sm:sl-p-6 sl-bg-gray-50 dark:sl-bg-slate-800 sl-rounded-lg sl-border sl-border-dashed sl-border-gray-300 dark:sl-border-slate-600",
+  "data-testid": "empty-input"
+}, c = {
+  key: 0,
+  class: "sl-text-base sl-font-semibold sl-leading-6 sl-text-gray-800 dark:sl-text-gray-200"
+}, p = { class: "sl-mt-2 sl-max-w-xl sl-text-sm sl-text-gray-500 dark:sl-text-gray-300 sl-flex sl-items-center" }, m = { key: 1 }, u = /* @__PURE__ */ o({
+  __name: "EmptyInput",
+  props: {
+    title: { default: "" },
+    description: { default: "" },
+    icon: {}
+  },
+  setup(y) {
+    return (e, g) => (s(), t("div", i, [
+      e.title ? (s(), t("h3", c, r(e.title), 1)) : l("", !0),
+      a("div", p, [
+        e.icon ? (s(), n(d(e.icon), {
+          key: 0,
+          class: "sl-mr-2 sl-h-6 sl-w-6 sl-text-gray-400 dark:sl-text-gray-300 sl-flex-shrink-0",
+          "aria-hidden": "true"
+        })) : l("", !0),
+        e.description ? (s(), t("p", m, r(e.description), 1)) : l("", !0)
+      ])
+    ]));
+  }
+});
+export {
+  u as _
+};
+//# sourceMappingURL=EmptyInput.vue_vue_type_script_setup_true_lang-BDxgc5Bs.js.map

package/dist/EmptyInput.vue_vue_type_script_setup_true_lang-BDxgc5Bs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"EmptyInput.vue_vue_type_script_setup_true_lang-BDxgc5Bs.js","sources":["../src/components/inputs/EmptyInput.vue"],"sourcesContent":["<!--\n  @component EmptyInput\n  @description Placeholder component for empty/unavailable form fields.\n  \n  Displays a styled placeholder with optional title, description, and icon\n  for form fields that are not yet available or have been removed.\n  Useful for showing contextual information in form layouts.\n  \n  @props\n  - title (string, optional): Main title text\n  - description (string, optional): Descriptive text\n  - icon (Component, optional): Heroicon or custom icon component\n  \n  @example\n  <EmptyInput \n    title=\"Coming Soon\" \n    description=\"This feature is not yet available.\"\n    :icon=\"ClockIcon\"\n  />\n-->\n<template>\n  <div \n    class=\"sl-px-4 sl-py-5 sm:sl-p-6 sl-bg-gray-50 dark:sl-bg-slate-800 sl-rounded-lg sl-border sl-border-dashed sl-border-gray-300 dark:sl-border-slate-600\"\n    data-testid=\"empty-input\"\n  >\n    <h3 \n      v-if=\"title\" \n      class=\"sl-text-base sl-font-semibold sl-leading-6 sl-text-gray-800 dark:sl-text-gray-200\"\n    >\n      {{ title }}\n    </h3>\n    <div class=\"sl-mt-2 sl-max-w-xl sl-text-sm sl-text-gray-500 dark:sl-text-gray-300 sl-flex sl-items-center\">\n      <component \n        v-if=\"icon\" \n        :is=\"icon\" \n        class=\"sl-mr-2 sl-h-6 sl-w-6 sl-text-gray-400 dark:sl-text-gray-300 sl-flex-shrink-0\" \n        aria-hidden=\"true\"\n      />\n      <p v-if=\"description\">{{ description }}</p>\n    </div>\n  </div>\n</template>\n\n<script setup lang=\"ts\">\nimport type { FunctionalComponent, HTMLAttributes, VNodeProps } from 'vue'\n\ninterface Props {\n  title?: string\n  description?: string\n  icon?: FunctionalComponent<HTMLAttributes & VNodeProps>\n}\n\nwithDefaults(defineProps<Props>(), {\n  title: '',\n  description: ''\n})\n</script>\n\n"],"names":["_openBlock","_createElementBlock","_hoisted_1","title","_hoisted_2","_toDisplayString","_createElementVNode","_hoisted_3","icon","_createBlock","_resolveDynamicComponent","description"],"mappings":";;;;;;;;;;;;;;;sBAqBEA,EAAA,GAAAC,EAmBM,OAnBNC,GAmBM;AAAA,MAdIC,EAAAA,cADRF,EAKK,MALLG,GAKKC,EADAF,EAAAA,KAAK,GAAA,CAAA;MAEVG,EAQM,OARNC,GAQM;AAAA,QANIC,EAAAA,QADRR,EAAA,GAAAS,EAKEC,EAHKF,EAAAA,IAAI,GAAA;AAAA;UACT,OAAM;AAAA,UACN,eAAY;AAAA,QAAA;QAELG,EAAAA,eAATX,EAAA,GAAAC,EAA2C,UAAlBU,EAAAA,WAAW,GAAA,CAAA;;;;;"}