@ramathibodi/nuxt-commons 0.1.74 → 0.1.75

package/dist/runtime/components/form/Pad.vue

@@ -1,402 +1,402 @@
-<script lang="ts" setup>
-/**
- * FormPad is a schema-driven form field component that binds model data, renders field UI, and emits normalized updates.
- * This doc block is consumed by vue-docgen for generated API documentation.
- */
-/* eslint-disable @typescript-eslint/no-explicit-any,import/no-self-import */
-import {
-  compile,
-  computed,
-  defineComponent,
-  defineOptions,
-  inject,
-  onMounted,
-  ref,
-  shallowRef,
-  watch,
-  withDefaults
-} from 'vue'
-import {watchDebounced} from '@vueuse/core'
-import {useRules} from '../../composables/utils/validation'
-import {useDocumentTemplate} from '../../composables/document/template'
-import { isObject, isArray, isString, isPlainObject, isEqual, debounce } from 'lodash-es'
-import FormPad from './Pad.vue'
-
-defineOptions({
-  inheritAttrs: false,
-})
-
-interface Props {
-  modelValue?: object // Bound value for v-model synchronization with the parent component.
-  originalData?: object // Original baseline data used for dirty-checking and reset behavior.
-  template?: any // Template object used to render dynamic form/pad structure.
-  templateScript?: string // Optional script expression used to post-process template behavior.
-  disabled?: boolean // disables user interaction for this field
-  readonly?: boolean // renders as read-only while keeping value visible
-  isolated?: boolean // boolean flag controlling runtime behavior
-  decoration?: object // Decoration config used to style or annotate generated fields.
-  parentTemplates?: string|string[] // Parent template code(s) used for template inheritance/extension.
-  dirtyClass?: string // CSS class applied when form state differs from original data.
-  dirtyOnCreate?: boolean // Marks new forms as dirty immediately on first render.
-  sanitizeDelay?: number // Debounce delay before sanitizing emitted form values.
-}
-
-/**
- * Public props accepted by FormPad.
- * Document each prop field with intent, defaults, and side effects for clear generated docs.
- */
-const props = withDefaults(defineProps<Props>(), {
-  disabled: false,
-  readonly: false,
-  isolated: false,
-  decoration: () => { return {} },
-  parentTemplates: (): string[] => [],
-  dirtyClass: "form-data-dirty",
-  dirtyOnCreate: false,
-  sanitizeDelay: 2000,
-})
-
-/**
- * Custom events emitted by FormPad.
- * Parents can listen to these events to react to user actions and internal state changes.
- */
-const emit = defineEmits(['update:modelValue'])
-
-const disabled = ref(props.disabled)
-const readonly = ref(props.readonly)
-const decoration = ref(props.decoration)
-
-watch(() => props.disabled, (newValue) => {
-  disabled.value = newValue
-})
-
-watch(() => props.readonly, (newValue) => {
-  readonly.value = newValue
-})
-
-watch(() => props.decoration, (newValue) => {
-  decoration.value = newValue
-}, { deep: true })
-
-const { rules } = useRules()
-
-const trimmedTemplate = ref<string>('')
-
-const vueFunctions = { ref, shallowRef, computed, watch, onMounted }
-
-const templateScriptFunction = computed(() => {
-  let templateScript = props.templateScript?.trim() || 'return {}'
-  const pattern = /^\s*[{[].*[}\]]\s*$/
-  if (pattern.test(templateScript)) templateScript = 'return {}'
-  return Function('props', 'ctx', ...Object.keys(vueFunctions), templateScript)
-})
-
-const formPad = ref()
-const formInjectKey = Symbol.for('vuetify:form')
-const formInjected = ref()
-
-const formData = ref<any>({})
-
-function isBlankString(v: unknown): v is string {
-  return isString(v) && v.trim().length === 0
-}
-
-const sanitizeBlankStrings = debounce(sanitizeBlankStringsRaw, props.sanitizeDelay)
-
-function sanitizeBlankStringsRaw(val: any, original?: any): void {
-  if (!original && props.originalData) {
-    sanitizeBlankStrings(val, props.originalData)
-    return
-  }
-
-  if (isArray(val)) {
-    for (let i = val.length - 1; i >= 0; i--) {
-      const item = val[i]
-      if (isBlankString(item)) {
-        val.splice(i, 1)
-      } else if (isPlainObject(item) || isArray(item)) {
-        sanitizeBlankStrings(item,{})
-      } else {
-        if (item && typeof item === 'string') val[i] = item.replace(/[ \t]+$/, '')
-      }
-    }
-    return
-  }
-
-  if (isPlainObject(val)) {
-    for (const key of Object.keys(val)) {
-      const v = val[key]
-      if (isBlankString(v)) {
-        if (original && !Object.keys(original).includes(key)) delete val[key]
-        else val[key] = null
-      } else if (isPlainObject(v) || isArray(v)) {
-        let originalChild = (original && (isPlainObject(original[key]) || isArray(original[key]))) ? original[key] : {}
-        sanitizeBlankStrings(v, originalChild)
-      } else {
-        if (v && typeof v === 'string') val[key] = v.replace(/[ \t]+$/, '')
-      }
-    }
-  }
-}
-
-function autoSanitizedDisplay(item: any, separator: string = ","): string | undefined {
-  const isEmptyScalar = (v: any) =>
-      v === null ||
-      v === undefined ||
-      (typeof v === "string" && v.trim() === "") ||
-      (typeof v === "number" && Number.isNaN(v));
-
-  const toStr = (v: any): string | undefined => {
-    if (isEmptyScalar(v)) return undefined;
-    if (typeof v === "string") return v.trim();
-    if (typeof v === "number" || typeof v === "boolean" || typeof v === "bigint") return String(v);
-    if (typeof v === "symbol") return v.description ?? String(v);
-    if (typeof v === "function") return v.name ? `[Function ${v.name}]` : "[Function]";
-    return undefined;
-  };
-
-  // 1) empty -> undefined
-  if (isEmptyScalar(item)) return undefined;
-
-  // 2) array -> recurse + join
-  if (Array.isArray(item)) {
-    const parts = item
-        .map((x) => autoSanitizedDisplay(x, separator))
-        .filter((s): s is string => typeof s === "string" && s.trim() !== "");
-    return parts.length ? parts.join(separator) : undefined;
-  }
-
-  // simple scalars
-  const scalar = toStr(item);
-  if (scalar !== undefined) return scalar;
-
-  // 3) object
-  if (typeof item === "object") {
-    // 3.1 label
-    if ("label" in item) {
-      const v = autoSanitizedDisplay((item as any).label, separator) ?? toStr((item as any).label);
-      if (v !== undefined) return v;
-    }
-    // 3.2 value
-    if ("value" in item) {
-      const v = autoSanitizedDisplay((item as any).value, separator) ?? toStr((item as any).value);
-      if (v !== undefined) return v;
-    }
-
-    // 3.3 stringify attributes as key:value (recurse values)
-    const entries = Object.entries(item as Record<string, any>)
-        .map(([k, v]) => {
-          const rendered = autoSanitizedDisplay(v, separator) ?? toStr(v);
-          if (rendered === undefined || rendered.trim() === "") return undefined;
-          return `${k}:${rendered}`;
-        })
-        .filter((x): x is string => typeof x === "string" && x.trim() !== "");
-
-    return entries.length ? entries.join(separator) : undefined;
-  }
-
-  // fallback
-  try {
-    const s = String(item);
-    return s.trim() ? s : undefined;
-  } catch {
-    return undefined;
-  }
-}
-
-watch(formData, (newValue) => {
-  sanitizeBlankStrings(newValue)
-  emit('update:modelValue', newValue)
-}, { deep: true })
-
-watch(() => props.modelValue, (newValue) => {
-  formData.value = isObject(newValue) ? newValue : {}
-}, { deep: true, immediate: true })
-
-function diffPaths(
-    a: any,
-    b: any,
-    base: string[] = [],
-    out: string[] = []
-): string[] {
-  const keys = new Set<string>([
-    ...Object.keys(a ?? {}),
-    ...Object.keys(b ?? {}),
-  ])
-
-  for (const k of keys) {
-    const av = a?.[k]
-    const bv = b?.[k]
-    if (!av && !bv) continue // ignore when both are falsy
-
-    const path = [...base, k]
-
-    if (isPlainObject(av) && isPlainObject(bv)) {
-      diffPaths(av, bv, path, out)
-      continue
-    }
-
-    if (!isEqual(av, bv)) {
-      out.push(path.join('.'))
-    }
-  }
-
-  return out
-}
-
-const injectedClass = computed<Record<string, string>>(() => {
-  const data = (formData.value ?? {}) as Record<string, any>
-  const result: Record<string, string> = {}
-
-  if (!props.dirtyOnCreate && !props.originalData) return result
-
-  const original = (props.originalData ?? {}) as Record<string, any>
-  const cls = props.dirtyClass || 'form-data-dirty'
-
-  const paths = diffPaths(data, original)
-  for (const p of paths) result[p] = cls
-
-  return result
-})
-
-const formComponent = shallowRef()
-
-function buildFormComponent() {
-  if (!trimmedTemplate.value) return
-  const originalConsoleError = console.warn
-  console.warn = (error: any) => { throw new Error(error) } // eslint-disable-line
-  try {
-    const componentTemplate = '<form-pad ref="formPadTemplate" v-model="formComponentData" :originalData="originalData" :disabled="disabled" :readonly="readonly" :decoration="decoration" :isolated="isolated"><template v-slot="{ data,isDisabled,isReadonly,rules,formProvided,decoration,injectedClass }">' + trimmedTemplate.value + '</template></form-pad>'
-    compile(componentTemplate)
-    formComponent.value = defineComponent({
-      components: { FormPad },
-      props: {
-        modelValue: { type: Object, default: undefined },
-        originalData: { type: Object, default: undefined },
-        disabled: { type: Boolean, default: false },
-        readonly: { type: Boolean, default: false },
-        decoration: { type: Object, default: () => { return {} } },
-        isolated: { type: Boolean, default: false },
-      },
-      emits: ['update:modelValue'],
-      setup(props, ctx) {
-        const formComponentData = ref<any>({})
-        const formPadTemplate = ref<any>({})
-        watch(formComponentData, (newValue) => {
-          sanitizeBlankStrings(newValue)
-          ctx.emit('update:modelValue', newValue)
-        }, { deep: true })
-        watch(() => props.modelValue, (newValue) => {
-          formComponentData.value = isObject(newValue) ? newValue : {}
-        }, { deep: true, immediate: true })
-        const isValid = computed(() => formPadTemplate.value.isValid)
-        return {
-          formComponentData,
-          formPadTemplate,
-          reset: () => formPadTemplate.value.reset(),
-          validate: () => formPadTemplate.value.validate(),
-          resetValidate: () => formPadTemplate.value.resetValidate(),
-          isValid,
-          ...templateScriptFunction.value(props, ctx, ...Object.values(vueFunctions)),
-          autoSanitizedDisplay
-        }
-      },
-      template: componentTemplate,
-    })
-  }
-  catch (e) {
-    formComponent.value = null
-    console.error(e)
-  }
-  console.warn = originalConsoleError
-}
-
-function reset() {
-  if (!formInjected.value) formPad.value.reset()
-  else formInjected.value.items.forEach((item: any) => item.reset())
-}
-
-function validate() {
-  if (!formInjected.value) formPad.value.validate()
-  else formInjected.value.items.forEach((item: any) => item.validate())
-}
-
-function resetValidate() {
-  if (!formInjected.value) formPad.value.resetValidate()
-  else formInjected.value.items.forEach((item: any) => item.resetValidate())
-}
-
-const isValid = computed(() => {
-  validate()
-  return formInjected.value ? formInjected.value.isValid || false : formPad.value.isValid || false
-})
-
-onMounted(() => {
-  if (!props.isolated) formInjected.value = inject(formInjectKey, false)
-  buildFormComponent()
-})
-
-watchDebounced(() => props.template, (newValue) => {
-  trimmedTemplate.value = useDocumentTemplate(newValue,props.parentTemplates).trim() || ''
-  buildFormComponent()
-}, { debounce: 500, maxWait: 5000, deep: true, immediate: true })
-watchDebounced(() => props.templateScript, buildFormComponent, { debounce: 500, maxWait: 5000 })
-
-defineExpose({
-  isValid,
-  disabled,
-  readonly,
-  reset,
-  validate,
-  resetValidate,
-})
-</script>
-
-<template>
-  <v-form
-    v-if="!formInjected && !trimmedTemplate"
-    ref="formPad"
-    :disabled="disabled"
-    :readonly="readonly"
-    :class="$attrs.class"
-    autocomplete="off"
-  >
-    <template #default="formProvided">
-      <slot
-        :data="formData"
-        :form-provided="formProvided"
-        :is-disabled="disabled"
-        :is-readonly="readonly"
-        :rules="rules"
-        :decoration="decoration"
-        :injectedClass="injectedClass"
-      />
-    </template>
-  </v-form>
-  <template v-if="formInjected && !trimmedTemplate">
-    <slot
-      :data="formData"
-      :form-provided="formInjected"
-      :is-disabled="disabled"
-      :is-readonly="readonly"
-      :rules="rules"
-      :decoration="decoration"
-      :injectedClass="injectedClass"
-    />
-  </template>
-  <component
-    :is="formComponent"
-    v-if="trimmedTemplate"
-    ref="formPad"
-    v-model="formData"
-    :originalData="originalData"
-    :disabled="disabled"
-    :readonly="readonly"
-    :decoration="decoration"
-    :isolated="isolated"
-    :class="$attrs.class"
-  />
-</template>
+<script lang="ts" setup>
+/**
+ * FormPad is a schema-driven form field component that binds model data, renders field UI, and emits normalized updates.
+ * This doc block is consumed by vue-docgen for generated API documentation.
+ */
+/* eslint-disable @typescript-eslint/no-explicit-any,import/no-self-import */
+import {
+  compile,
+  computed,
+  defineComponent,
+  defineOptions,
+  inject,
+  onMounted,
+  ref,
+  shallowRef,
+  watch,
+  withDefaults
+} from 'vue'
+import {watchDebounced} from '@vueuse/core'
+import {useRules} from '../../composables/utils/validation'
+import {useDocumentTemplate} from '../../composables/document/template'
+import { isObject, isArray, isString, isPlainObject, isEqual, debounce } from 'lodash-es'
+import FormPad from './Pad.vue'
+
+defineOptions({
+  inheritAttrs: false,
+})
+
+interface Props {
+  modelValue?: object // Bound value for v-model synchronization with the parent component.
+  originalData?: object // Original baseline data used for dirty-checking and reset behavior.
+  template?: any // Template object used to render dynamic form/pad structure.
+  templateScript?: string // Optional script expression used to post-process template behavior.
+  disabled?: boolean // disables user interaction for this field
+  readonly?: boolean // renders as read-only while keeping value visible
+  isolated?: boolean // boolean flag controlling runtime behavior
+  decoration?: object // Decoration config used to style or annotate generated fields.
+  parentTemplates?: string|string[] // Parent template code(s) used for template inheritance/extension.
+  dirtyClass?: string // CSS class applied when form state differs from original data.
+  dirtyOnCreate?: boolean // Marks new forms as dirty immediately on first render.
+  sanitizeDelay?: number // Debounce delay before sanitizing emitted form values.
+}
+
+/**
+ * Public props accepted by FormPad.
+ * Document each prop field with intent, defaults, and side effects for clear generated docs.
+ */
+const props = withDefaults(defineProps<Props>(), {
+  disabled: false,
+  readonly: false,
+  isolated: false,
+  decoration: () => { return {} },
+  parentTemplates: (): string[] => [],
+  dirtyClass: "form-data-dirty",
+  dirtyOnCreate: false,
+  sanitizeDelay: 2000,
+})
+
+/**
+ * Custom events emitted by FormPad.
+ * Parents can listen to these events to react to user actions and internal state changes.
+ */
+const emit = defineEmits(['update:modelValue'])
+
+const disabled = ref(props.disabled)
+const readonly = ref(props.readonly)
+const decoration = ref(props.decoration)
+
+watch(() => props.disabled, (newValue) => {
+  disabled.value = newValue
+})
+
+watch(() => props.readonly, (newValue) => {
+  readonly.value = newValue
+})
+
+watch(() => props.decoration, (newValue) => {
+  decoration.value = newValue
+}, { deep: true })
+
+const { rules } = useRules()
+
+const trimmedTemplate = ref<string>('')
+
+const vueFunctions = { ref, shallowRef, computed, watch, onMounted }
+
+const templateScriptFunction = computed(() => {
+  let templateScript = props.templateScript?.trim() || 'return {}'
+  const pattern = /^\s*[{[].*[}\]]\s*$/
+  if (pattern.test(templateScript)) templateScript = 'return {}'
+  return Function('props', 'ctx', ...Object.keys(vueFunctions), templateScript)
+})
+
+const formPad = ref()
+const formInjectKey = Symbol.for('vuetify:form')
+const formInjected = ref()
+
+const formData = ref<any>({})
+
+function isBlankString(v: unknown): v is string {
+  return isString(v) && v.trim().length === 0
+}
+
+const sanitizeBlankStrings = debounce(sanitizeBlankStringsRaw, props.sanitizeDelay)
+
+function sanitizeBlankStringsRaw(val: any, original?: any): void {
+  if (!original && props.originalData) {
+    sanitizeBlankStrings(val, props.originalData)
+    return
+  }
+
+  if (isArray(val)) {
+    for (let i = val.length - 1; i >= 0; i--) {
+      const item = val[i]
+      if (isBlankString(item)) {
+        val.splice(i, 1)
+      } else if (isPlainObject(item) || isArray(item)) {
+        sanitizeBlankStrings(item,{})
+      } else {
+        if (item && typeof item === 'string') val[i] = item.replace(/[ \t]+$/, '')
+      }
+    }
+    return
+  }
+
+  if (isPlainObject(val)) {
+    for (const key of Object.keys(val)) {
+      const v = val[key]
+      if (isBlankString(v)) {
+        if (original && !Object.keys(original).includes(key)) delete val[key]
+        else val[key] = null
+      } else if (isPlainObject(v) || isArray(v)) {
+        let originalChild = (original && (isPlainObject(original[key]) || isArray(original[key]))) ? original[key] : {}
+        sanitizeBlankStrings(v, originalChild)
+      } else {
+        if (v && typeof v === 'string') val[key] = v.replace(/[ \t]+$/, '')
+      }
+    }
+  }
+}
+
+function autoSanitizedDisplay(item: any, separator: string = ","): string | undefined {
+  const isEmptyScalar = (v: any) =>
+      v === null ||
+      v === undefined ||
+      (typeof v === "string" && v.trim() === "") ||
+      (typeof v === "number" && Number.isNaN(v));
+
+  const toStr = (v: any): string | undefined => {
+    if (isEmptyScalar(v)) return undefined;
+    if (typeof v === "string") return v.trim();
+    if (typeof v === "number" || typeof v === "boolean" || typeof v === "bigint") return String(v);
+    if (typeof v === "symbol") return v.description ?? String(v);
+    if (typeof v === "function") return v.name ? `[Function ${v.name}]` : "[Function]";
+    return undefined;
+  };
+
+  // 1) empty -> undefined
+  if (isEmptyScalar(item)) return undefined;
+
+  // 2) array -> recurse + join
+  if (Array.isArray(item)) {
+    const parts = item
+        .map((x) => autoSanitizedDisplay(x, separator))
+        .filter((s): s is string => typeof s === "string" && s.trim() !== "");
+    return parts.length ? parts.join(separator) : undefined;
+  }
+
+  // simple scalars
+  const scalar = toStr(item);
+  if (scalar !== undefined) return scalar;
+
+  // 3) object
+  if (typeof item === "object") {
+    // 3.1 label
+    if ("label" in item) {
+      const v = autoSanitizedDisplay((item as any).label, separator) ?? toStr((item as any).label);
+      if (v !== undefined) return v;
+    }
+    // 3.2 value
+    if ("value" in item) {
+      const v = autoSanitizedDisplay((item as any).value, separator) ?? toStr((item as any).value);
+      if (v !== undefined) return v;
+    }
+
+    // 3.3 stringify attributes as key:value (recurse values)
+    const entries = Object.entries(item as Record<string, any>)
+        .map(([k, v]) => {
+          const rendered = autoSanitizedDisplay(v, separator) ?? toStr(v);
+          if (rendered === undefined || rendered.trim() === "") return undefined;
+          return `${k}:${rendered}`;
+        })
+        .filter((x): x is string => typeof x === "string" && x.trim() !== "");
+
+    return entries.length ? entries.join(separator) : undefined;
+  }
+
+  // fallback
+  try {
+    const s = String(item);
+    return s.trim() ? s : undefined;
+  } catch {
+    return undefined;
+  }
+}
+
+watch(formData, (newValue) => {
+  sanitizeBlankStrings(newValue)
+  emit('update:modelValue', newValue)
+}, { deep: true })
+
+watch(() => props.modelValue, (newValue) => {
+  formData.value = isObject(newValue) ? newValue : {}
+}, { deep: true, immediate: true })
+
+function diffPaths(
+    a: any,
+    b: any,
+    base: string[] = [],
+    out: string[] = []
+): string[] {
+  const keys = new Set<string>([
+    ...Object.keys(a ?? {}),
+    ...Object.keys(b ?? {}),
+  ])
+
+  for (const k of keys) {
+    const av = a?.[k]
+    const bv = b?.[k]
+    if (!av && !bv) continue // ignore when both are falsy
+
+    const path = [...base, k]
+
+    if (isPlainObject(av) && isPlainObject(bv)) {
+      diffPaths(av, bv, path, out)
+      continue
+    }
+
+    if (!isEqual(av, bv)) {
+      out.push(path.join('.'))
+    }
+  }
+
+  return out
+}
+
+const injectedClass = computed<Record<string, string>>(() => {
+  const data = (formData.value ?? {}) as Record<string, any>
+  const result: Record<string, string> = {}
+
+  if (!props.dirtyOnCreate && !props.originalData) return result
+
+  const original = (props.originalData ?? {}) as Record<string, any>
+  const cls = props.dirtyClass || 'form-data-dirty'
+
+  const paths = diffPaths(data, original)
+  for (const p of paths) result[p] = cls
+
+  return result
+})
+
+const formComponent = shallowRef()
+
+function buildFormComponent() {
+  if (!trimmedTemplate.value) return
+  const originalConsoleError = console.warn
+  console.warn = (error: any) => { throw new Error(error) } // eslint-disable-line
+  try {
+    const componentTemplate = '<form-pad ref="formPadTemplate" v-model="formComponentData" :originalData="originalData" :disabled="disabled" :readonly="readonly" :decoration="decoration" :isolated="isolated"><template v-slot="{ data,isDisabled,isReadonly,rules,formProvided,decoration,injectedClass }">' + trimmedTemplate.value + '</template></form-pad>'
+    compile(componentTemplate)
+    formComponent.value = defineComponent({
+      components: { FormPad },
+      props: {
+        modelValue: { type: Object, default: undefined },
+        originalData: { type: Object, default: undefined },
+        disabled: { type: Boolean, default: false },
+        readonly: { type: Boolean, default: false },
+        decoration: { type: Object, default: () => { return {} } },
+        isolated: { type: Boolean, default: false },
+      },
+      emits: ['update:modelValue'],
+      setup(props, ctx) {
+        const formComponentData = ref<any>({})
+        const formPadTemplate = ref<any>({})
+        watch(formComponentData, (newValue) => {
+          sanitizeBlankStrings(newValue)
+          ctx.emit('update:modelValue', newValue)
+        }, { deep: true })
+        watch(() => props.modelValue, (newValue) => {
+          formComponentData.value = isObject(newValue) ? newValue : {}
+        }, { deep: true, immediate: true })
+        const isValid = computed(() => formPadTemplate.value.isValid)
+        return {
+          formComponentData,
+          formPadTemplate,
+          reset: () => formPadTemplate.value.reset(),
+          validate: () => formPadTemplate.value.validate(),
+          resetValidate: () => formPadTemplate.value.resetValidate(),
+          isValid,
+          ...templateScriptFunction.value(props, ctx, ...Object.values(vueFunctions)),
+          autoSanitizedDisplay
+        }
+      },
+      template: componentTemplate,
+    })
+  }
+  catch (e) {
+    formComponent.value = null
+    console.error(e)
+  }
+  console.warn = originalConsoleError
+}
+
+function reset() {
+  if (!formInjected.value) formPad.value.reset()
+  else formInjected.value.items.forEach((item: any) => item.reset())
+}
+
+function validate() {
+  if (!formInjected.value) formPad.value.validate()
+  else formInjected.value.items.forEach((item: any) => item.validate())
+}
+
+function resetValidate() {
+  if (!formInjected.value) formPad.value.resetValidate()
+  else formInjected.value.items.forEach((item: any) => item.resetValidate())
+}
+
+const isValid = computed(() => {
+  validate()
+  return formInjected.value ? formInjected.value.isValid || false : formPad.value.isValid || false
+})
+
+onMounted(() => {
+  if (!props.isolated) formInjected.value = inject(formInjectKey, false)
+  buildFormComponent()
+})
+
+watchDebounced(() => props.template, (newValue) => {
+  trimmedTemplate.value = useDocumentTemplate(newValue,props.parentTemplates).trim() || ''
+  buildFormComponent()
+}, { debounce: 500, maxWait: 5000, deep: true, immediate: true })
+watchDebounced(() => props.templateScript, buildFormComponent, { debounce: 500, maxWait: 5000 })
+
+defineExpose({
+  isValid,
+  disabled,
+  readonly,
+  reset,
+  validate,
+  resetValidate,
+})
+</script>
+
+<template>
+  <v-form
+    v-if="!formInjected && !trimmedTemplate"
+    ref="formPad"
+    :disabled="disabled"
+    :readonly="readonly"
+    :class="$attrs.class"
+    autocomplete="off"
+  >
+    <template #default="formProvided">
+      <slot
+        :data="formData"
+        :form-provided="formProvided"
+        :is-disabled="disabled"
+        :is-readonly="readonly"
+        :rules="rules"
+        :decoration="decoration"
+        :injectedClass="injectedClass"
+      />
+    </template>
+  </v-form>
+  <template v-if="formInjected && !trimmedTemplate">
+    <slot
+      :data="formData"
+      :form-provided="formInjected"
+      :is-disabled="disabled"
+      :is-readonly="readonly"
+      :rules="rules"
+      :decoration="decoration"
+      :injectedClass="injectedClass"
+    />
+  </template>
+  <component
+    :is="formComponent"
+    v-if="trimmedTemplate"
+    ref="formPad"
+    v-model="formData"
+    :originalData="originalData"
+    :disabled="disabled"
+    :readonly="readonly"
+    :decoration="decoration"
+    :isolated="isolated"
+    :class="$attrs.class"
+  />
+</template>
 <style>
 .form-data-dirty:not(.v-input--error) :not(.v-chip):not(.v-chip *){color:color-mix(in srgb,currentColor 70%,rgb(var(--v-theme-primary)))!important;text-shadow:0 0 .02em currentColor}
 </style>