tantee-nuxt-commons 0.0.167 → 0.0.169

package/dist/module.json

@@ -4,7 +4,7 @@
   "compatibility": {
     "nuxt": "^3.0.0"
   },
-  "version": "0.0.167",
+  "version": "0.0.169",
   "builder": {
     "@nuxt/module-builder": "0.8.4",
     "unbuild": "2.0.0"

package/dist/runtime/components/Alert.vue

@@ -45,6 +45,7 @@ watch(() => alert?.hasAlert(), (hasAlert) => {
       elevation="2"
       theme="dark"
       variant="flat"
+      v-bind="currentItem.alertIcon ? { icon: currentItem.alertIcon } : {}"
       @click:close="renewAlert()"
     >
       {{ currentItem.statusCode ? currentItem.statusCode + ' ' : '' }} {{ currentItem.message }} {{ !isEmpty(currentItem.data) ? currentItem.data : '' }}

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

@@ -73,7 +73,7 @@ const loadFormData = () => {
     formData.value = cloneDeep(formDataOriginalValue.value)
   }
   else {
-    formData.value = Object.assign({}, props.initialData)
+    formData.value = Object.assign({}, cloneDeep(props.initialData))
   }
 }
 

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

@@ -85,7 +85,7 @@ const loadFormData = () => {
     formDataOriginalValue.value = cloneDeep(props.formData)
   }
   else {
-    formData.value = Object.assign({}, props.initialData)
+    formData.value = Object.assign({}, cloneDeep(props.initialData))
   }
   isSavedAndStay.value = false
 }

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

@@ -78,7 +78,7 @@ const loadFormData = () => {
     formDataOriginalValue.value = cloneDeep(props.formData)
   }
   else {
-    formData.value = Object.assign({}, props.initialData)
+    formData.value = Object.assign({}, cloneDeep(props.initialData))
   }
 }
 

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

@@ -1,225 +1,172 @@
 <script lang="ts" setup>
-import { castArray } from 'lodash-es'
-import { ref, shallowRef, watch, computed } from 'vue'
-import { VTextField } from 'vuetify/components/VTextField'
-import { useAlert } from '../../composables/alert'
-import { type Base64File } from '../../composables/assetFile'
-import { useAssetFile } from '../../composables/assetFile'
+import {isEqual, uniqWith} from 'lodash-es'
+import {ref, watch} from 'vue'
+import {VTextField} from 'vuetify/components/VTextField'
+import {useAlert} from '../../composables/alert'
 
 const alert = useAlert()
-const { hydrateAssetFile, base64ToFile, fileToBase64, downloadBase64File } = useAssetFile()
 
-const fileToBase64WithMaxSize = (file: File) => fileToBase64(file, props.maxSize)
+interface Base64String {
+  base64String?: string
+  fileName: string
+  originalFileName?: string
+  id?: number
+}
 
 interface Props extends /* @vue-ignore */ InstanceType<typeof VTextField['$props']> {
   accept?: string
   multiple?: boolean
   maxSize?: number
-  modelValue?: Base64File | Base64File[] | null
+  modelValue?: Base64String | Base64String[]
   downloadable?: boolean
-  autoHydrate?: boolean
 }
 
 const props = withDefaults(defineProps<Props>(), {
   accept: '*',
   multiple: false,
   maxSize: 5,
-  downloadable: false,
-  autoHydrate: false,
+  downloadable: false
 })
 
 const emit = defineEmits<{
-  (e: 'update:modelValue', value: Base64File | Base64File[] | null): void
+  (e: 'update:modelValue', value: Base64String | Base64String[]): void
 }>()
 
-/** UI ref */
-const fileInput = ref<HTMLInputElement | null>(null)
-
-/** Internal sources (always arrays) */
-const assets = ref<Base64File[]>([])       // items with server id (or ones we keep as “assets”)
-const files = shallowRef<File[]>([])       // native File objects picked by the user
+const allFiles = ref<File[]>([])
+const allAssets = ref<Base64String[]>([])
+const combinedBase64String = ref<Base64String[] | Base64String>([])
+const fileInput = ref()
 
-/** Cache to avoid re-reading the same File repeatedly */
-const fileCache = new WeakMap<File, Promise<Base64File>>()
-
-/** Re-entrancy guard to break the emit -> props watcher -> syncFromModel loop */
-let internalSync = false
+function openWindowUpload() {
+  if (props.multiple || (!allFiles.value?.length && !allAssets.value?.length)) {
+    fileInput.value?.click()
+  }
+}
 
-/** Build a stable dedupe key */
-function base64FileKey(x: Base64File): string {
-  if (x.id != null) return `id:${x.id}`
-  const name = x.fileName ?? ''
-  const len = x.base64String?.length ?? 0
-  return `n:${name}|l:${len}`
+function addFiles(files: File | File[]) {
+  if (Array.isArray(files)) allFiles.value?.push(...files)
+  else allFiles.value?.push(files)
 }
 
-/** Dedupe by key (preserves order) */
-function uniqByKey(arr: Base64File[]): Base64File[] {
-  const seen = new Set<string>()
-  const out: Base64File[] = []
-  for (const it of arr) {
-    const k = base64FileKey(it)
-    if (!seen.has(k)) {
-      seen.add(k)
-      out.push(it)
-    }
-  }
-  return out
+function removeFileByIndex(i: number | string) {
+  const index = Number(i)
+  if (index >= 0 && index < allFiles.value.length) allFiles.value.splice(index, 1)
 }
 
-/** Shallow equal by key sequence */
-function arraysEqualByKey(a: Base64File[], b: Base64File[]): boolean {
-  if (a === b) return true
-  if (a.length !== b.length) return false
-  for (let i = 0; i < a.length; i++) {
-    if (base64FileKey(a[i]) !== base64FileKey(b[i])) return false
-  }
-  return true
+function removeAssetByIndex(i: number | string) {
+  const index = Number(i)
+  if (index >= 0 && index < allAssets.value.length) allAssets.value.splice(index, 1)
 }
 
-/** Normalize incoming modelValue into arrays for internal use */
-async function syncFromModel() {
-  const mv = props.modelValue
-  if (!mv) {
-    assets.value = []
-    files.value = []
-    return
-  }
+function fileToBase64(file: File) {
+  const maxSize = props.maxSize * 1048576
 
-  const asArray = castArray(mv) as Base64File[]
+  return new Promise<Base64String>((resolve, reject) => {
+    if (file.size > maxSize) reject(`File (${file.name}) size exceeds the ${props.maxSize} MB limit.`)
 
-  // Split into “asset with id” vs “inline base64” (no id)
-  const incomingAssets = asArray.filter(a => a.id != null)
-  const inlineBase64 = asArray.filter(a => a.id == null && a.base64String)
+    const reader = new FileReader()
+    reader.onload = (event) => {
+      resolve({ fileName: file.name, base64String: event.target?.result as string })
+    }
+    reader.onerror = reject
+    reader.readAsDataURL(file)
+  })
+}
 
-  // Convert inline base64 to File for consistent UX
-  const inlineFiles: File[] = []
-  for (const item of inlineBase64) {
-    const f = base64ToFile(item.base64String as string, item.fileName)
-    if (f) inlineFiles.push(f)
-  }
+function base64ToFile(base64Data: string, filename: string, defaultContentType: string = "application/octet-stream") {
+  const matchResult = base64Data.match(/data:([^;]*);base64,(.*)/);
+  let contentType: string;
+  let base64Payload: string;
 
-  assets.value = incomingAssets
-  files.value = inlineFiles
+  if (matchResult) {
+    [contentType, base64Payload] = matchResult.slice(1)
+  } else {
+    contentType = defaultContentType
+    base64Payload = base64Data
+  }
 
-  // Optionally hydrate assets that need it
-  if (props.autoHydrate) {
-    const needsHydration = assets.value.filter(a => a.id != null && !a.base64String)
-    if (needsHydration.length) {
-      await Promise.allSettled(needsHydration.map(hydrateAssetFile))
+  try {
+    const binaryStr = atob(base64Payload)
+    const bytes = new Uint8Array(binaryStr.length)
+    for (let i = 0; i < binaryStr.length; i++) {
+      bytes[i] = binaryStr.charCodeAt(i)
     }
+    return new File([bytes], filename, { type: contentType });
+  } catch (error) {
+    console.error("Invalid base64 data", error);
+    return undefined;
   }
 }
 
-/** Open chooser */
-function openWindowUpload() {
-  if (props.multiple || (assets.value.length === 0 && files.value.length === 0)) {
-    fileInput.value?.click()
-  }
-}
+function downloadBase64File(base64Data: string, filename: string): void {
+  const file = base64ToFile(base64Data,filename)
 
-/** Add files from input (single or multiple) */
-function addFiles(payload: File | File[]) {
-  if (Array.isArray(payload)) files.value = [...files.value, ...payload]
-  else files.value = [...files.value, payload]
-}
+  if (file) {
+    const link = document.createElement("a");
+    link.href = URL.createObjectURL(file);
+    link.download = filename;
 
-/** Remove chips */
-function removeFileByIndex(i: number | string) {
-  const idx = Number(i)
-  if (idx >= 0 && idx < files.value.length) {
-    const copy = files.value.slice()
-    copy.splice(idx, 1)
-    files.value = copy
-  }
-}
-function removeAssetByIndex(i: number | string) {
-  const idx = Number(i)
-  if (idx >= 0 && idx < assets.value.length) {
-    const copy = assets.value.slice()
-    copy.splice(idx, 1)
-    assets.value = copy
-  }
-}
+    // Append the link to the body temporarily and trigger the download
+    document.body.appendChild(link);
+    link.click();
 
-/** Convert current files → Base64File[] (cached) */
-async function filesToBase64Files(list: File[]): Promise<Base64File[]> {
-  const tasks = list.map(f => {
-    let p = fileCache.get(f)
-    if (!p) {
-      p = fileToBase64WithMaxSize(f)
-      fileCache.set(f, p)
-    }
-    return p
-  })
-  return Promise.all(tasks)
+    // Cleanup
+    document.body.removeChild(link);
+    URL.revokeObjectURL(link.href);
+  }
 }
 
-/** Combined result (array form) */
-const combinedArray = ref<Base64File[]>([])
-
-/** Dirty flag for <v-text-field> */
-const isDirty = computed(() =>
-    props.multiple ? combinedArray.value.length > 0 : combinedArray.value[0] != null
-)
 
-/** Sync from props.modelValue (guarded) */
 watch(
     () => props.modelValue,
     () => {
-      if (internalSync) return
-      void syncFromModel()
+      if (Array.isArray(props.modelValue)) {
+        allAssets.value = props.modelValue.filter((item) => item.id !== undefined)
+        allFiles.value = props.modelValue
+            .filter((item) => item.id === undefined && item.base64String !== undefined)
+            .map((base64) => base64ToFile(base64.base64String as string, base64.fileName))
+            .filter((item) => item !== undefined) as File[]
+      } else if (props.modelValue) {
+        allAssets.value = props.modelValue.id !== undefined ? [props.modelValue] : []
+        allFiles.value =
+            props.modelValue.id === undefined && props.modelValue.base64String !== undefined
+                ? [base64ToFile(props.modelValue.base64String, props.modelValue.fileName)].filter(
+                    (item) => item !== undefined
+                ) as File[]
+                : []
+      } else {
+        allAssets.value = []
+        allFiles.value = []
+      }
     },
     { deep: true, immediate: true }
 )
 
-/** Rebuild combined and emit (guarded, deduped, only-on-change) */
-watch([assets, files], async () => {
-  try {
-    const base64FromFiles = await filesToBase64Files(files.value)
-
-    const mergedArray = props.multiple
-        ? [...assets.value, ...base64FromFiles]
-        : (assets.value[0] ?? base64FromFiles[0] ?? null)
-            ? [assets.value[0] ?? base64FromFiles[0]]
-            : []
-
-    const nextCombined = props.multiple ? uniqByKey(mergedArray) : mergedArray
-
-    if (!arraysEqualByKey(combinedArray.value, nextCombined)) {
-      combinedArray.value = nextCombined
-
-      internalSync = true
-      try {
-        if (props.multiple) {
-          emit('update:modelValue', combinedArray.value)
-        } else {
-          emit('update:modelValue', combinedArray.value[0] ?? null)
-        }
-      } finally {
-        // let Vue flush the emit before re-enabling the external sync
-        queueMicrotask(() => { internalSync = false })
-      }
-    }
-  } catch (error: any) {
-    alert?.addAlert({ message: String(error), alertType: 'error' })
-    files.value = []
-    const fallback = props.multiple
-        ? [...assets.value]
-        : (assets.value[0] ? [assets.value[0]] : [])
-
-    if (!arraysEqualByKey(combinedArray.value, fallback)) {
-      combinedArray.value = fallback
-      internalSync = true
-      try {
-        if (props.multiple) emit('update:modelValue', combinedArray.value)
-        else emit('update:modelValue', combinedArray.value[0] ?? null)
-      } finally {
-        queueMicrotask(() => { internalSync = false })
-      }
-    }
+watch([allAssets, allFiles], () => {
+  if (allFiles.value.length) {
+    const base64Promises = allFiles.value.map(fileToBase64)
+    Promise.all(base64Promises)
+        .then((base64Strings) => {
+          combinedBase64String.value = props.multiple
+              ? [...allAssets.value, ...base64Strings]
+              : base64Strings[0] || allAssets.value[0] || null
+        })
+        .catch((error) => {
+          alert?.addAlert({ message: error, alertType: 'error' })
+          allFiles.value = []
+        })
+  } else {
+    combinedBase64String.value = props.multiple
+        ? [...allAssets.value]
+        : allAssets.value[0] || null
   }
 }, { deep: true, immediate: true })
+
+watch(combinedBase64String, (newValue, oldValue) => {
+  if (!isEqual(newValue, oldValue)) {
+    emit('update:modelValue', props.multiple ? uniqWith(newValue as Base64String[], isEqual) : newValue)
+  }
+}, { deep: true })
 </script>
 
 <template>
@@ -227,36 +174,28 @@ watch([assets, files], async () => {
       v-bind="$attrs"
       label="Upload files"
       readonly
-      :dirty="isDirty"
-      v-on="isDirty && !props.multiple ? {} : { click: openWindowUpload }"
+      :dirty="Array.isArray(combinedBase64String) ? combinedBase64String.length > 0 : !!combinedBase64String"
+      v-on="Array.isArray(combinedBase64String) && combinedBase64String.length > 0 ? {} : { click: openWindowUpload }"
   >
     <template #default>
-      <!-- Server/asset items -->
       <v-chip
-          v-for="(asset, index) in assets"
-          :key="`${asset.id ?? asset.fileName}-${index}`"
+          v-for="(asset, index) in allAssets"
+          :key="asset.fileName"
           color="green"
           variant="flat"
           closable
           @click:close="removeAssetByIndex(index)"
       >
         {{ asset.originalFileName || asset.fileName }}
-        <template #append v-if="props.downloadable">
+        <template #append v-if="downloadable">
           <slot name="download" :item="asset">
-            <v-icon
-                v-if="asset.base64String"
-                @click.stop="downloadBase64File(asset.base64String, asset.originalFileName || asset.fileName)"
-            >
-              mdi mdi-download
-            </v-icon>
+            <v-icon @click="downloadBase64File(asset.base64String || '',asset.originalFileName || asset.fileName)" v-if="asset.base64String">mdi mdi-download</v-icon>
           </slot>
         </template>
       </v-chip>
-
-      <!-- Local uploaded files -->
       <v-chip
-          v-for="(file, index) in files"
-          :key="`${file.name}-${file.size}-${index}`"
+          v-for="(file, index) in allFiles"
+          :key="file.name"
           color="primary"
           variant="flat"
           closable
@@ -266,14 +205,12 @@ watch([assets, files], async () => {
       </v-chip>
     </template>
 
-    <!-- Add more button for multi mode -->
-    <template v-if="props.multiple && combinedArray.length > 0" #append-inner>
+    <template v-if="props.multiple && Array.isArray(combinedBase64String) && combinedBase64String.length > 0" #append-inner>
       <VBtn variant="text" :icon="true" @click="openWindowUpload">
         <v-icon>mdi mdi-plus</v-icon>
       </VBtn>
     </template>
   </v-text-field>
-
   <v-file-input
       ref="fileInput"
       :accept="props.accept"
@@ -281,4 +218,4 @@ watch([assets, files], async () => {
       style="display: none"
       @update:model-value="addFiles"
   />
-</template>
+</template>

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

@@ -497,8 +497,6 @@ defineExpose({
                       show-first-last-page
                       @first="footerProps.setPage(1)"
                       @last="footerProps.setPage(footerProps.pageCount)"
-                      @next="footerProps.nextPage"
-                      @prev="footerProps.prevPage"
                       @update:model-value="footerProps.setPage"
                   />
                 </v-row>

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

@@ -34,6 +34,7 @@ interface Props {
   parentTemplates?: string|string[]
   dirtyClass?: string
   dirtyOnCreate?: boolean
+  sanitizeDelay?: number
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -43,7 +44,8 @@ const props = withDefaults(defineProps<Props>(), {
   decoration: () => { return {} },
   parentTemplates: (): string[] => [],
   dirtyClass: "form-data-dirty",
-  dirtyOnCreate: false
+  dirtyOnCreate: false,
+  sanitizeDelay: 2000,
 })
 
 const emit = defineEmits(['update:modelValue'])
@@ -87,7 +89,7 @@ function isBlankString(v: unknown): v is string {
   return isString(v) && v.trim().length === 0
 }
 
-const sanitizeBlankStrings = debounce(sanitizeBlankStringsRaw, 500)
+const sanitizeBlankStrings = debounce(sanitizeBlankStringsRaw, props.sanitizeDelay)
 
 function sanitizeBlankStringsRaw(val: any, original?: any): void {
   if (!original && props.originalData) {
@@ -125,6 +127,71 @@ function sanitizeBlankStringsRaw(val: any, original?: any): void {
   }
 }
 
+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)
@@ -219,6 +286,7 @@ function buildFormComponent() {
           resetValidate: () => formPadTemplate.value.resetValidate(),
           isValid,
           ...templateScriptFunction.value(props, ctx, ...Object.values(vueFunctions)),
+          autoSanitizedDisplay
         }
       },
       template: componentTemplate,
@@ -279,6 +347,7 @@ defineExpose({
     :disabled="disabled"
     :readonly="readonly"
     :class="$attrs.class"
+    autocomplete="off"
   >
     <template #default="formProvided">
       <slot