@ramathibodi/nuxt-commons 0.1.74 → 4.0.1

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

@@ -1,355 +1,255 @@
-<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'
-
+<script setup>
+import { compile, computed, defineComponent, inject, onMounted, ref, shallowRef, watch } 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)
-
+  inheritAttrs: false
+});
+const props = defineProps({
+  modelValue: { type: Object, required: false },
+  originalData: { type: Object, required: false },
+  template: { type: null, required: false },
+  templateScript: { type: String, required: false },
+  disabled: { type: Boolean, required: false, default: false },
+  readonly: { type: Boolean, required: false, default: false },
+  isolated: { type: Boolean, required: false, default: false },
+  decoration: { type: Object, required: false, default: () => {
+    return {};
+  } },
+  parentTemplates: { type: [String, Array], required: false, default: () => [] },
+  dirtyClass: { type: String, required: false, default: "form-data-dirty" },
+  dirtyOnCreate: { type: Boolean, required: false, default: false },
+  sanitizeDelay: { type: Number, required: false, default: 2e3 }
+});
+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
-})
-
+  disabled.value = newValue;
+});
 watch(() => props.readonly, (newValue) => {
-  readonly.value = 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 }
-
+  decoration.value = newValue;
+}, { deep: true });
+const { rules } = useRules();
+const trimmedTemplate = ref("");
+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
+  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 = /* @__PURE__ */ Symbol.for("vuetify:form");
+const formInjected = ref();
+const formData = ref({});
+function isBlankString(v) {
+  return isString(v) && v.trim().length === 0;
 }
-
-const sanitizeBlankStrings = debounce(sanitizeBlankStringsRaw, props.sanitizeDelay)
-
-function sanitizeBlankStringsRaw(val: any, original?: any): void {
+const sanitizeBlankStrings = debounce(sanitizeBlankStringsRaw, props.sanitizeDelay);
+function sanitizeBlankStringsRaw(val, original) {
   if (!original && props.originalData) {
-    sanitizeBlankStrings(val, props.originalData)
-    return
+    sanitizeBlankStrings(val, props.originalData);
+    return;
   }
-
   if (isArray(val)) {
     for (let i = val.length - 1; i >= 0; i--) {
-      const item = val[i]
+      const item = val[i];
       if (isBlankString(item)) {
-        val.splice(i, 1)
+        val.splice(i, 1);
       } else if (isPlainObject(item) || isArray(item)) {
-        sanitizeBlankStrings(item,{})
+        sanitizeBlankStrings(item, {});
       } else {
-        if (item && typeof item === 'string') val[i] = item.replace(/[ \t]+$/, '')
+        if (item && typeof item === "string") val[i] = item.replace(/[ \t]+$/, "");
       }
     }
-    return
+    return;
   }
-
   if (isPlainObject(val)) {
     for (const key of Object.keys(val)) {
-      const v = val[key]
+      const v = val[key];
       if (isBlankString(v)) {
-        if (original && !Object.keys(original).includes(key)) delete val[key]
-        else val[key] = null
+        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)
+        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]+$/, '')
+        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;
+function autoSanitizedDisplay(item, separator = ",") {
+  const isEmptyScalar = (v) => v === null || v === void 0 || typeof v === "string" && v.trim() === "" || typeof v === "number" && Number.isNaN(v);
+  const toStr = (v) => {
+    if (isEmptyScalar(v)) return void 0;
     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;
+    return void 0;
   };
-
-  // 1) empty -> undefined
-  if (isEmptyScalar(item)) return undefined;
-
-  // 2) array -> recurse + join
+  if (isEmptyScalar(item)) return void 0;
   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;
+    const parts = item.map((x) => autoSanitizedDisplay(x, separator)).filter((s) => typeof s === "string" && s.trim() !== "");
+    return parts.length ? parts.join(separator) : void 0;
   }
-
-  // simple scalars
   const scalar = toStr(item);
-  if (scalar !== undefined) return scalar;
-
-  // 3) object
+  if (scalar !== void 0) return scalar;
   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;
+      const v = autoSanitizedDisplay(item.label, separator) ?? toStr(item.label);
+      if (v !== void 0) 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;
+      const v = autoSanitizedDisplay(item.value, separator) ?? toStr(item.value);
+      if (v !== void 0) 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;
+    const entries = Object.entries(item).map(([k, v]) => {
+      const rendered = autoSanitizedDisplay(v, separator) ?? toStr(v);
+      if (rendered === void 0 || rendered.trim() === "") return void 0;
+      return `${k}:${rendered}`;
+    }).filter((x) => typeof x === "string" && x.trim() !== "");
+    return entries.length ? entries.join(separator) : void 0;
   }
-
-  // fallback
   try {
     const s = String(item);
-    return s.trim() ? s : undefined;
+    return s.trim() ? s : void 0;
   } catch {
-    return undefined;
+    return void 0;
   }
 }
-
 watch(formData, (newValue) => {
-  sanitizeBlankStrings(newValue)
-  emit('update:modelValue', newValue)
-}, { deep: true })
-
+  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>([
+  formData.value = isObject(newValue) ? newValue : {};
+}, { deep: true, immediate: true });
+function diffPaths(a, b, base = [], out = []) {
+  const keys = /* @__PURE__ */ new Set([
     ...Object.keys(a ?? {}),
-    ...Object.keys(b ?? {}),
-  ])
-
+    ...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]
-
+    const av = a?.[k];
+    const bv = b?.[k];
+    if (!av && !bv) continue;
+    const path = [...base, k];
     if (isPlainObject(av) && isPlainObject(bv)) {
-      diffPaths(av, bv, path, out)
-      continue
+      diffPaths(av, bv, path, out);
+      continue;
     }
-
     if (!isEqual(av, bv)) {
-      out.push(path.join('.'))
+      out.push(path.join("."));
     }
   }
-
-  return out
+  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()
-
+const injectedClass = computed(() => {
+  const data = formData.value ?? {};
+  const result = {};
+  if (!props.dirtyOnCreate && !props.originalData) return result;
+  const original = props.originalData ?? {};
+  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
+  if (!trimmedTemplate.value) return;
+  const originalConsoleError = console.warn;
+  console.warn = (error) => {
+    throw new Error(error);
+  };
   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)
+    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 },
+        modelValue: { type: Object, default: void 0 },
+        originalData: { type: Object, default: void 0 },
         disabled: { type: Boolean, default: false },
         readonly: { type: Boolean, default: false },
-        decoration: { type: Object, default: () => { return {} } },
-        isolated: { 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>({})
+      emits: ["update:modelValue"],
+      setup(props2, ctx) {
+        const formComponentData = ref({});
+        const formPadTemplate = ref({});
         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)
+          sanitizeBlankStrings(newValue);
+          ctx.emit("update:modelValue", newValue);
+        }, { deep: true });
+        watch(() => props2.modelValue, (newValue) => {
+          formComponentData.value = isObject(newValue) ? newValue : {};
+        }, { deep: true, immediate: true });
+        const isValid2 = 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)),
+          isValid: isValid2,
+          ...templateScriptFunction.value(props2, ctx, ...Object.values(vueFunctions)),
           autoSanitizedDisplay
-        }
+        };
       },
-      template: componentTemplate,
-    })
+      template: componentTemplate
+    });
+  } catch (e) {
+    formComponent.value = null;
+    console.error(e);
   }
-  catch (e) {
-    formComponent.value = null
-    console.error(e)
-  }
-  console.warn = originalConsoleError
+  console.warn = originalConsoleError;
 }
-
 function reset() {
-  if (!formInjected.value) formPad.value.reset()
-  else formInjected.value.items.forEach((item: any) => item.reset())
+  if (!formInjected.value) formPad.value.reset();
+  else formInjected.value.items.forEach((item) => item.reset());
 }
-
 function validate() {
-  if (!formInjected.value) formPad.value.validate()
-  else formInjected.value.items.forEach((item: any) => item.validate())
+  if (!formInjected.value) formPad.value.validate();
+  else formInjected.value.items.forEach((item) => item.validate());
 }
-
 function resetValidate() {
-  if (!formInjected.value) formPad.value.resetValidate()
-  else formInjected.value.items.forEach((item: any) => item.resetValidate())
+  if (!formInjected.value) formPad.value.resetValidate();
+  else formInjected.value.items.forEach((item) => item.resetValidate());
 }
-
 const isValid = computed(() => {
-  validate()
-  return formInjected.value ? formInjected.value.isValid || false : formPad.value.isValid || false
-})
-
+  validate();
+  return formInjected.value ? formInjected.value.isValid || false : formPad.value.isValid || false;
+});
 onMounted(() => {
-  if (!props.isolated) formInjected.value = inject(formInjectKey, false)
-  buildFormComponent()
-})
-
+  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 })
-
+  trimmedTemplate.value = useDocumentTemplate(newValue, props.parentTemplates).trim() || "";
+  buildFormComponent();
+}, { debounce: 500, maxWait: 5e3, deep: true, immediate: true });
+watchDebounced(() => props.templateScript, buildFormComponent, { debounce: 500, maxWait: 5e3 });
 defineExpose({
   isValid,
   disabled,
   readonly,
   reset,
   validate,
-  resetValidate,
-})
+  resetValidate
+});
 </script>
 
 <template>
@@ -397,6 +297,7 @@ defineExpose({
     :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>
+</style>