tantee-nuxt-commons 0.0.169 → 0.0.170

package/dist/module.json

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

package/dist/runtime/components/Alert.vue

@@ -45,7 +45,6 @@ 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({}, cloneDeep(props.initialData))
+    formData.value = Object.assign({}, 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({}, cloneDeep(props.initialData))
+    formData.value = Object.assign({}, 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({}, cloneDeep(props.initialData))
+    formData.value = Object.assign({}, props.initialData)
   }
 }
 

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

@@ -1,172 +1,225 @@
 <script lang="ts" setup>
-import {isEqual, uniqWith} from 'lodash-es'
-import {ref, watch} from 'vue'
-import {VTextField} from 'vuetify/components/VTextField'
-import {useAlert} from '../../composables/alert'
+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'
 
 const alert = useAlert()
+const { hydrateAssetFile, base64ToFile, fileToBase64, downloadBase64File } = useAssetFile()
 
-interface Base64String {
-  base64String?: string
-  fileName: string
-  originalFileName?: string
-  id?: number
-}
+const fileToBase64WithMaxSize = (file: File) => fileToBase64(file, props.maxSize)
 
 interface Props extends /* @vue-ignore */ InstanceType<typeof VTextField['$props']> {
   accept?: string
   multiple?: boolean
   maxSize?: number
-  modelValue?: Base64String | Base64String[]
+  modelValue?: Base64File | Base64File[] | null
   downloadable?: boolean
+  autoHydrate?: boolean
 }
 
 const props = withDefaults(defineProps<Props>(), {
   accept: '*',
   multiple: false,
   maxSize: 5,
-  downloadable: false
+  downloadable: false,
+  autoHydrate: false,
 })
 
 const emit = defineEmits<{
-  (e: 'update:modelValue', value: Base64String | Base64String[]): void
+  (e: 'update:modelValue', value: Base64File | Base64File[] | null): void
 }>()
 
-const allFiles = ref<File[]>([])
-const allAssets = ref<Base64String[]>([])
-const combinedBase64String = ref<Base64String[] | Base64String>([])
-const fileInput = ref()
+/** UI ref */
+const fileInput = ref<HTMLInputElement | null>(null)
 
-function openWindowUpload() {
-  if (props.multiple || (!allFiles.value?.length && !allAssets.value?.length)) {
-    fileInput.value?.click()
-  }
-}
+/** 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
 
-function addFiles(files: File | File[]) {
-  if (Array.isArray(files)) allFiles.value?.push(...files)
-  else allFiles.value?.push(files)
-}
+/** Cache to avoid re-reading the same File repeatedly */
+const fileCache = new WeakMap<File, Promise<Base64File>>()
 
-function removeFileByIndex(i: number | string) {
-  const index = Number(i)
-  if (index >= 0 && index < allFiles.value.length) allFiles.value.splice(index, 1)
+/** Re-entrancy guard to break the emit -> props watcher -> syncFromModel loop */
+let internalSync = false
+
+/** 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 removeAssetByIndex(i: number | string) {
-  const index = Number(i)
-  if (index >= 0 && index < allAssets.value.length) allAssets.value.splice(index, 1)
+/** 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 fileToBase64(file: File) {
-  const maxSize = props.maxSize * 1048576
+/** 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
+}
 
-  return new Promise<Base64String>((resolve, reject) => {
-    if (file.size > maxSize) reject(`File (${file.name}) size exceeds the ${props.maxSize} MB limit.`)
+/** Normalize incoming modelValue into arrays for internal use */
+async function syncFromModel() {
+  const mv = props.modelValue
+  if (!mv) {
+    assets.value = []
+    files.value = []
+    return
+  }
 
-    const reader = new FileReader()
-    reader.onload = (event) => {
-      resolve({ fileName: file.name, base64String: event.target?.result as string })
-    }
-    reader.onerror = reject
-    reader.readAsDataURL(file)
-  })
-}
+  const asArray = castArray(mv) as Base64File[]
 
-function base64ToFile(base64Data: string, filename: string, defaultContentType: string = "application/octet-stream") {
-  const matchResult = base64Data.match(/data:([^;]*);base64,(.*)/);
-  let contentType: string;
-  let base64Payload: string;
+  // 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)
 
-  if (matchResult) {
-    [contentType, base64Payload] = matchResult.slice(1)
-  } else {
-    contentType = defaultContentType
-    base64Payload = base64Data
+  // 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)
   }
 
-  try {
-    const binaryStr = atob(base64Payload)
-    const bytes = new Uint8Array(binaryStr.length)
-    for (let i = 0; i < binaryStr.length; i++) {
-      bytes[i] = binaryStr.charCodeAt(i)
+  assets.value = incomingAssets
+  files.value = inlineFiles
+
+  // 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))
     }
-    return new File([bytes], filename, { type: contentType });
-  } catch (error) {
-    console.error("Invalid base64 data", error);
-    return undefined;
   }
 }
 
-function downloadBase64File(base64Data: string, filename: string): void {
-  const file = base64ToFile(base64Data,filename)
-
-  if (file) {
-    const link = document.createElement("a");
-    link.href = URL.createObjectURL(file);
-    link.download = filename;
+/** Open chooser */
+function openWindowUpload() {
+  if (props.multiple || (assets.value.length === 0 && files.value.length === 0)) {
+    fileInput.value?.click()
+  }
+}
 
-    // Append the link to the body temporarily and trigger the download
-    document.body.appendChild(link);
-    link.click();
+/** 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]
+}
 
-    // Cleanup
-    document.body.removeChild(link);
-    URL.revokeObjectURL(link.href);
+/** 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
   }
 }
 
+/** 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)
+}
 
+/** 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 (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 = []
-      }
+      if (internalSync) return
+      void syncFromModel()
     },
     { deep: true, immediate: true }
 )
 
-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 })
+/** 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]] : [])
 
-watch(combinedBase64String, (newValue, oldValue) => {
-  if (!isEqual(newValue, oldValue)) {
-    emit('update:modelValue', props.multiple ? uniqWith(newValue as Base64String[], isEqual) : newValue)
+    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 })
+      }
+    }
   }
-}, { deep: true })
+}, { deep: true, immediate: true })
 </script>
 
 <template>
@@ -174,28 +227,36 @@ watch(combinedBase64String, (newValue, oldValue) => {
       v-bind="$attrs"
       label="Upload files"
       readonly
-      :dirty="Array.isArray(combinedBase64String) ? combinedBase64String.length > 0 : !!combinedBase64String"
-      v-on="Array.isArray(combinedBase64String) && combinedBase64String.length > 0 ? {} : { click: openWindowUpload }"
+      :dirty="isDirty"
+      v-on="isDirty && !props.multiple ? {} : { click: openWindowUpload }"
   >
     <template #default>
+      <!-- Server/asset items -->
       <v-chip
-          v-for="(asset, index) in allAssets"
-          :key="asset.fileName"
+          v-for="(asset, index) in assets"
+          :key="`${asset.id ?? asset.fileName}-${index}`"
           color="green"
           variant="flat"
           closable
           @click:close="removeAssetByIndex(index)"
       >
         {{ asset.originalFileName || asset.fileName }}
-        <template #append v-if="downloadable">
+        <template #append v-if="props.downloadable">
           <slot name="download" :item="asset">
-            <v-icon @click="downloadBase64File(asset.base64String || '',asset.originalFileName || asset.fileName)" v-if="asset.base64String">mdi mdi-download</v-icon>
+            <v-icon
+                v-if="asset.base64String"
+                @click.stop="downloadBase64File(asset.base64String, asset.originalFileName || asset.fileName)"
+            >
+              mdi mdi-download
+            </v-icon>
           </slot>
         </template>
       </v-chip>
+
+      <!-- Local uploaded files -->
       <v-chip
-          v-for="(file, index) in allFiles"
-          :key="file.name"
+          v-for="(file, index) in files"
+          :key="`${file.name}-${file.size}-${index}`"
           color="primary"
           variant="flat"
           closable
@@ -205,12 +266,14 @@ watch(combinedBase64String, (newValue, oldValue) => {
       </v-chip>
     </template>
 
-    <template v-if="props.multiple && Array.isArray(combinedBase64String) && combinedBase64String.length > 0" #append-inner>
+    <!-- Add more button for multi mode -->
+    <template v-if="props.multiple && combinedArray.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"
@@ -218,4 +281,4 @@ watch(combinedBase64String, (newValue, oldValue) => {
       style="display: none"
       @update:model-value="addFiles"
   />
-</template>
+</template>

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

@@ -497,6 +497,8 @@ 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,7 +34,6 @@ interface Props {
   parentTemplates?: string|string[]
   dirtyClass?: string
   dirtyOnCreate?: boolean
-  sanitizeDelay?: number
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -44,8 +43,7 @@ const props = withDefaults(defineProps<Props>(), {
   decoration: () => { return {} },
   parentTemplates: (): string[] => [],
   dirtyClass: "form-data-dirty",
-  dirtyOnCreate: false,
-  sanitizeDelay: 2000,
+  dirtyOnCreate: false
 })
 
 const emit = defineEmits(['update:modelValue'])
@@ -89,7 +87,7 @@ function isBlankString(v: unknown): v is string {
   return isString(v) && v.trim().length === 0
 }
 
-const sanitizeBlankStrings = debounce(sanitizeBlankStringsRaw, props.sanitizeDelay)
+const sanitizeBlankStrings = debounce(sanitizeBlankStringsRaw, 500)
 
 function sanitizeBlankStringsRaw(val: any, original?: any): void {
   if (!original && props.originalData) {
@@ -127,71 +125,6 @@ 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)
@@ -286,7 +219,6 @@ function buildFormComponent() {
           resetValidate: () => formPadTemplate.value.resetValidate(),
           isValid,
           ...templateScriptFunction.value(props, ctx, ...Object.values(vueFunctions)),
-          autoSanitizedDisplay
         }
       },
       template: componentTemplate,
@@ -347,7 +279,6 @@ defineExpose({
     :disabled="disabled"
     :readonly="readonly"
     :class="$attrs.class"
-    autocomplete="off"
   >
     <template #default="formProvided">
       <slot
@@ -386,5 +317,5 @@ defineExpose({
   />
 </template>
 <style>
-.form-data-dirty,.form-data-dirty:not(.v-input--error) *{color:color-mix(in srgb,currentColor 70%,rgb(var(--v-theme-primary)))!important;text-shadow:0 0 .02em currentColor}
+.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>