@ramathibodi/nuxt-commons 0.1.73 → 4.0.0

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

@@ -1,225 +1,163 @@
-<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'
-
-const alert = useAlert()
-const { hydrateAssetFile, base64ToFile, fileToBase64, downloadBase64File } = useAssetFile()
-
-const fileToBase64WithMaxSize = (file: File) => fileToBase64(file, props.maxSize)
-
-interface Props extends /* @vue-ignore */ InstanceType<typeof VTextField['$props']> {
-  accept?: string
-  multiple?: boolean
-  maxSize?: number
-  modelValue?: Base64File | Base64File[] | null
-  downloadable?: boolean
-  autoHydrate?: boolean
-}
-
-const props = withDefaults(defineProps<Props>(), {
-  accept: '*',
-  multiple: false,
-  maxSize: 5,
-  downloadable: false,
-  autoHydrate: false,
-})
-
-const emit = defineEmits<{
-  (e: 'update:modelValue', value: Base64File | Base64File[] | null): 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
-
-/** 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
-
-/** 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}`
+<script 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 {} from "../../composables/assetFile";
+import { useAssetFile } from "../../composables/assetFile";
+const alert = useAlert();
+const { hydrateAssetFile, base64ToFile, fileToBase64, downloadBase64File } = useAssetFile();
+const fileToBase64WithMaxSize = (file) => fileToBase64(file, props.maxSize);
+const props = defineProps({
+  accept: { type: String, required: false, default: "*" },
+  multiple: { type: Boolean, required: false, default: false },
+  maxSize: { type: Number, required: false, default: 5 },
+  modelValue: { type: [Object, Array, null], required: false },
+  downloadable: { type: Boolean, required: false, default: false },
+  autoHydrate: { type: Boolean, required: false, default: false }
+});
+const emit = defineEmits(["update:modelValue"]);
+const fileInput = ref(null);
+const assets = ref([]);
+const files = shallowRef([]);
+const fileCache = /* @__PURE__ */ new WeakMap();
+let internalSync = false;
+function base64FileKey(x) {
+  if (x.id != null) return `id:${x.id}`;
+  const name = x.fileName ?? "";
+  const len = x.base64String?.length ?? 0;
+  return `n:${name}|l:${len}`;
 }
-
-/** Dedupe by key (preserves order) */
-function uniqByKey(arr: Base64File[]): Base64File[] {
-  const seen = new Set<string>()
-  const out: Base64File[] = []
+function uniqByKey(arr) {
+  const seen = /* @__PURE__ */ new Set();
+  const out = [];
   for (const it of arr) {
-    const k = base64FileKey(it)
+    const k = base64FileKey(it);
     if (!seen.has(k)) {
-      seen.add(k)
-      out.push(it)
+      seen.add(k);
+      out.push(it);
     }
   }
-  return out
+  return out;
 }
-
-/** Shallow equal by key sequence */
-function arraysEqualByKey(a: Base64File[], b: Base64File[]): boolean {
-  if (a === b) return true
-  if (a.length !== b.length) return false
+function arraysEqualByKey(a, b) {
+  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
+    if (base64FileKey(a[i]) !== base64FileKey(b[i])) return false;
   }
-  return true
+  return true;
 }
-
-/** Normalize incoming modelValue into arrays for internal use */
 async function syncFromModel() {
-  const mv = props.modelValue
+  const mv = props.modelValue;
   if (!mv) {
-    assets.value = []
-    files.value = []
-    return
+    assets.value = [];
+    files.value = [];
+    return;
   }
-
-  const asArray = castArray(mv) as Base64File[]
-
-  // 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)
-
-  // Convert inline base64 to File for consistent UX
-  const inlineFiles: File[] = []
+  const asArray = castArray(mv);
+  const incomingAssets = asArray.filter((a) => a.id != null);
+  const inlineBase64 = asArray.filter((a) => a.id == null && a.base64String);
+  const inlineFiles = [];
   for (const item of inlineBase64) {
-    const f = base64ToFile(item.base64String as string, item.fileName)
-    if (f) inlineFiles.push(f)
+    const f = base64ToFile(item.base64String, item.fileName);
+    if (f) inlineFiles.push(f);
   }
-
-  assets.value = incomingAssets
-  files.value = inlineFiles
-
-  // Optionally hydrate assets that need it
+  assets.value = incomingAssets;
+  files.value = inlineFiles;
   if (props.autoHydrate) {
-    const needsHydration = assets.value.filter(a => a.id != null && !a.base64String)
+    const needsHydration = assets.value.filter((a) => a.id != null && !a.base64String);
     if (needsHydration.length) {
-      await Promise.allSettled(needsHydration.map(hydrateAssetFile))
+      await Promise.allSettled(needsHydration.map(hydrateAssetFile));
     }
   }
 }
-
-/** Open chooser */
 function openWindowUpload() {
-  if (props.multiple || (assets.value.length === 0 && files.value.length === 0)) {
-    fileInput.value?.click()
+  if (props.multiple || assets.value.length === 0 && files.value.length === 0) {
+    fileInput.value?.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]
+function addFiles(payload) {
+  if (Array.isArray(payload)) files.value = [...files.value, ...payload];
+  else files.value = [...files.value, payload];
 }
-
-/** Remove chips */
-function removeFileByIndex(i: number | string) {
-  const idx = Number(i)
+function removeFileByIndex(i) {
+  const idx = Number(i);
   if (idx >= 0 && idx < files.value.length) {
-    const copy = files.value.slice()
-    copy.splice(idx, 1)
-    files.value = copy
+    const copy = files.value.slice();
+    copy.splice(idx, 1);
+    files.value = copy;
   }
 }
-function removeAssetByIndex(i: number | string) {
-  const idx = Number(i)
+function removeAssetByIndex(i) {
+  const idx = Number(i);
   if (idx >= 0 && idx < assets.value.length) {
-    const copy = assets.value.slice()
-    copy.splice(idx, 1)
-    assets.value = copy
+    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)
+async function filesToBase64Files(list) {
+  const tasks = list.map((f) => {
+    let p = fileCache.get(f);
     if (!p) {
-      p = fileToBase64WithMaxSize(f)
-      fileCache.set(f, p)
+      p = fileToBase64WithMaxSize(f);
+      fileCache.set(f, p);
     }
-    return p
-  })
-  return Promise.all(tasks)
+    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) */
+const combinedArray = ref([]);
+const isDirty = computed(
+  () => props.multiple ? combinedArray.value.length > 0 : combinedArray.value[0] != null
+);
 watch(
-    () => props.modelValue,
-    () => {
-      if (internalSync) return
-      void syncFromModel()
-    },
-    { deep: true, immediate: true }
-)
-
-/** Rebuild combined and emit (guarded, deduped, only-on-change) */
+  () => props.modelValue,
+  () => {
+    if (internalSync) return;
+    void syncFromModel();
+  },
+  { deep: true, immediate: true }
+);
 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
-
+    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
+      combinedArray.value = nextCombined;
+      internalSync = true;
       try {
         if (props.multiple) {
-          emit('update:modelValue', combinedArray.value)
+          emit("update:modelValue", combinedArray.value);
         } else {
-          emit('update:modelValue', combinedArray.value[0] ?? null)
+          emit("update:modelValue", combinedArray.value[0] ?? null);
         }
       } finally {
-        // let Vue flush the emit before re-enabling the external sync
-        queueMicrotask(() => { internalSync = false })
+        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]] : [])
-
+  } catch (error) {
+    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
+      combinedArray.value = fallback;
+      internalSync = true;
       try {
-        if (props.multiple) emit('update:modelValue', combinedArray.value)
-        else emit('update:modelValue', combinedArray.value[0] ?? null)
+        if (props.multiple) emit("update:modelValue", combinedArray.value);
+        else emit("update:modelValue", combinedArray.value[0] ?? null);
       } finally {
-        queueMicrotask(() => { internalSync = false })
+        queueMicrotask(() => {
+          internalSync = false;
+        });
       }
     }
   }
-}, { deep: true, immediate: true })
+}, { deep: true, immediate: true });
 </script>
 
 <template>
@@ -281,4 +219,4 @@ watch([assets, files], async () => {
       style="display: none"
       @update:model-value="addFiles"
   />
-</template>
+</template>

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

@@ -0,0 +1,65 @@
+import { VTextField } from 'vuetify/components/VTextField';
+import { type Base64File } from '../../composables/assetFile.js';
+interface Props extends /* @vue-ignore */ InstanceType<typeof VTextField['$props']> {
+    accept?: string;
+    multiple?: boolean;
+    maxSize?: number;
+    modelValue?: Base64File | Base64File[] | null;
+    downloadable?: boolean;
+    autoHydrate?: boolean;
+}
+declare var __VLS_17: {
+    item: {
+        fileName: string;
+        originalFileName?: string | undefined;
+        fileType?: string | undefined;
+        id?: number | undefined;
+        base64String?: string | undefined;
+    };
+};
+type __VLS_Slots = {} & {
+    download?: (props: typeof __VLS_17) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToOption<Props>, {
+    accept: string;
+    multiple: boolean;
+    maxSize: number;
+    downloadable: boolean;
+    autoHydrate: boolean;
+}>>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    "update:modelValue": (value: Base64File | Base64File[] | null) => any;
+}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToOption<Props>, {
+    accept: string;
+    multiple: boolean;
+    maxSize: number;
+    downloadable: boolean;
+    autoHydrate: boolean;
+}>>> & Readonly<{
+    "onUpdate:modelValue"?: ((value: Base64File | Base64File[] | null) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_TypePropsToOption<T> = {
+    [K in keyof T]-?: {} extends Pick<T, K> ? {
+        type: import('vue').PropType<Required<T>[K]>;
+    } : {
+        type: import('vue').PropType<T[K]>;
+        required: true;
+    };
+};
+type __VLS_WithDefaults<P, D> = {
+    [K in keyof Pick<P, keyof P>]: K extends keyof D ? __VLS_PrettifyLocal<P[K] & {
+        default: D[K];
+    }> : P[K];
+};
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};
+type __VLS_PrettifyLocal<T> = (T extends any ? {
+    [K in keyof T]: T[K];
+} : {
+    [K in keyof T as K]: T[K];
+}) & {};

package/dist/runtime/components/form/Hidden.d.vue.ts

@@ -0,0 +1,12 @@
+interface Props {
+    itemValue?: any;
+    hook?: Function;
+    modelValue?: any;
+}
+declare const __VLS_export: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (...args: any[]) => void;
+}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{
+    "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -1,27 +1,22 @@
-<script lang="ts" setup>
-import { watch } from 'vue'
-import { cloneDeep } from 'lodash-es'
-
-interface Props {
-  itemValue?: any
-  hook?: Function
-  modelValue?: any
-}
-
-const props = defineProps<Props>()
-const emit = defineEmits(['update:modelValue'])
-
-watch(() => props.itemValue, (newValue,oldValue) => {
-  const resultValue = cloneDeep(newValue)
+<script setup>
+import { watch } from "vue";
+import { cloneDeep } from "lodash-es";
+const props = defineProps({
+  itemValue: { type: null, required: false },
+  hook: { type: Function, required: false },
+  modelValue: { type: null, required: false }
+});
+const emit = defineEmits(["update:modelValue"]);
+watch(() => props.itemValue, (newValue, oldValue) => {
+  const resultValue = cloneDeep(newValue);
   if (props.hook) {
-    Promise.resolve(props.hook(resultValue, props.modelValue,newValue,oldValue)).then((result) => {
-      emit('update:modelValue', result)
-    }).catch(e => void e)
-  }
-  else {
-    emit('update:modelValue', resultValue)
+    Promise.resolve(props.hook(resultValue, props.modelValue, newValue, oldValue)).then((result) => {
+      emit("update:modelValue", result);
+    }).catch((e) => void e);
+  } else {
+    emit("update:modelValue", resultValue);
   }
-}, { deep: true, immediate: true })
+}, { deep: true, immediate: true });
 </script>
 
 <template>

package/dist/runtime/components/form/Hidden.vue.d.ts

@@ -0,0 +1,12 @@
+interface Props {
+    itemValue?: any;
+    hook?: Function;
+    modelValue?: any;
+}
+declare const __VLS_export: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (...args: any[]) => void;
+}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{
+    "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;