@finema/core 3.22.0 → 3.24.0

package/dist/runtime/components/Form/fileState/useUploadStateMultiple.js

@@ -1,211 +1,121 @@
-import { useDropZone, useFileDialog } from "@vueuse/core";
-import PreviewModal from "./PreviewModal.vue";
-import { ArrayHelper, computed, ref, useOverlay, watch } from "#imports";
+import { useFilePicker } from "./useFilePicker.js";
+import { toFileValue, toUploadFormData, UploadState, validateFile } from "#core/helpers/uploadCore";
+import { useCoreMessages } from "#core/composables/useMessages";
 import { useUploadLoader } from "#core/composables/useUpload";
-import { useFileAllocate, useFileProgress } from "#core/helpers/componentHelper";
+import { useFileProgress } from "#core/helpers/componentHelper";
 import { StringHelper } from "#core/utils/StringHelper";
-import { _get } from "#core/utils/lodash";
-export var UploadState = /* @__PURE__ */ ((UploadState2) => {
-  UploadState2["EMPTY"] = "empty";
-  UploadState2["UPLOADING"] = "uploading";
-  UploadState2["SUCCESS"] = "success";
-  UploadState2["ERROR"] = "error";
-  return UploadState2;
-})(UploadState || {});
-export const useUploadStateMultiple = (props, emits, onChange, setErrors, value, acceptedFileTypes, wrapperProps, dropzoneRef) => {
-  const overlay = useOverlay();
-  const previewModal = overlay.create(PreviewModal);
+import { ArrayHelper, computed, ref, watch } from "#imports";
+export { UploadState };
+export const useUploadStateMultiple = (context) => {
+  const { props, emits, onChange, setErrors, value } = context;
+  const { messages, format } = useCoreMessages();
   const fileItems = ref([]);
-  const fileAllocate = useFileAllocate(computed(() => fileItems.value[0]?.file), props);
-  const validateFile = (file) => {
-    if (props.accept && fileAllocate.acceptFile.value) {
-      const acceptedTypes = fileAllocate.acceptFile.value;
-      const acceptedTypesList = acceptedTypes.split(",").map((type) => type.trim());
-      const fileExtension = file.name.toLowerCase().split(".").pop();
-      const isValidFileType = acceptedTypesList.some((acceptedType) => {
-        if (acceptedType.startsWith(".")) {
-          return fileExtension === acceptedType.slice(1).toLowerCase();
-        }
-        if (!acceptedType.includes("/") && !acceptedType.includes("*")) {
-          return fileExtension === acceptedType.toLowerCase();
-        }
-        if (acceptedType.endsWith("/*")) {
-          return file.type.startsWith(acceptedType.slice(0, -2) + "/");
-        }
-        return file.type === acceptedType;
-      });
-      if (!isValidFileType) {
-        return {
-          valid: false,
-          error: `\u0E1B\u0E23\u0E30\u0E40\u0E20\u0E17\u0E44\u0E1F\u0E25\u0E4C\u0E44\u0E21\u0E48\u0E16\u0E39\u0E01\u0E15\u0E49\u0E2D\u0E07 (\u0E23\u0E2D\u0E07\u0E23\u0E31\u0E1A\u0E40\u0E09\u0E1E\u0E32\u0E30 ${acceptedTypesList.join(", ")})`
-        };
-      }
-    }
-    if (props.maxSize) {
-      const maxSizeBytes = (fileAllocate.acceptFileSizeKb.value || 0) * 1024;
-      if (file.size > maxSizeBytes) {
-        const sizeLabel = fileAllocate.isAcceptFileUseMb.value ? `${fileAllocate.acceptFileSizeMb.value} MB` : `${fileAllocate.acceptFileSizeKb.value} KB`;
-        return {
-          valid: false,
-          error: `\u0E02\u0E19\u0E32\u0E14\u0E44\u0E1F\u0E25\u0E4C\u0E15\u0E49\u0E2D\u0E07\u0E44\u0E21\u0E48\u0E40\u0E01\u0E34\u0E19 ${sizeLabel}`
-        };
-      }
-    }
-    return {
-      valid: true
-    };
-  };
-  const updateFileItem = (index, updates) => {
+  let nextId = 0;
+  const updateFileItem = (id, updates) => {
     fileItems.value = fileItems.value.map(
-      (item, i) => i === index ? {
+      (item) => item.id === id ? {
         ...item,
         ...updates
       } : item
     );
   };
-  const setupUpload = (fileItem, index) => {
-    const {
-      percent,
-      onDownloadProgress,
-      onUploadProgress
-    } = useFileProgress();
-    const request = {
+  const removeFileItem = (id) => {
+    fileItems.value = fileItems.value.filter((item) => item.id !== id);
+  };
+  const isFull = () => !!props.maxFiles && fileItems.value.length >= props.maxFiles;
+  const setMaxFilesError = () => {
+    setErrors(
+      format(messages.value.upload.maxFiles, {
+        max: props.maxFiles
+      })
+    );
+  };
+  const uploadFile = async (id, file) => {
+    const { percent, onDownloadProgress, onUploadProgress } = useFileProgress();
+    const uploadLoader = useUploadLoader({
       requestOptions: {
         ...props.requestOptions,
         onDownloadProgress,
         onUploadProgress
       },
       pathURL: props.uploadPathURL
-    };
-    const uploadLoader = useUploadLoader(request);
-    updateFileItem(index, {
-      uploadLoader,
-      percentRef: percent
     });
-    const stopProgressWatch = watch(percent, (newProgress) => {
-      updateFileItem(index, {
-        progress: newProgress
+    const stopProgressWatch = watch(
+      percent,
+      (progress) => updateFileItem(id, {
+        progress
+      })
+    );
+    try {
+      await uploadLoader.run({
+        data: toUploadFormData(props.bodyKey, file)
       });
-    });
-    updateFileItem(index, {
-      cleanupWatchers: [stopProgressWatch]
-    });
-    return uploadLoader;
-  };
-  const processFile = (file) => {
-    processFileAsync(file).catch((error) => {
-      console.error("Error processing file:", error);
+    } finally {
+      stopProgressWatch();
+    }
+    if (uploadLoader.status.value.isSuccess && uploadLoader.data.value) {
+      const fileValue = toFileValue(uploadLoader.data.value, props, file);
+      removeFileItem(id);
+      onChange([fileValue, ...ArrayHelper.toArray(value.value)]);
+      emits("success", fileValue);
+      return;
+    }
+    updateFileItem(id, {
+      state: UploadState.ERROR,
+      error: format(messages.value.upload.error, {
+        message: StringHelper.getError(uploadLoader.status.value.errorData, messages.value.common.somethingWentWrong)
+      })
     });
   };
-  const processFileAsync = async (file) => {
-    const validation = validateFile(file);
-    if (!validation.valid) {
-      setErrors(validation.error || "Invalid file");
+  const processFile = async (file) => {
+    const error = validateFile(file, props, messages.value.upload);
+    if (error) {
+      setErrors(error);
       return;
     }
-    if (props.maxFiles && fileItems.value.length >= props.maxFiles) {
-      setErrors(`\u0E2A\u0E32\u0E21\u0E32\u0E23\u0E16\u0E2D\u0E31\u0E1E\u0E42\u0E2B\u0E25\u0E14\u0E44\u0E14\u0E49\u0E2A\u0E39\u0E07\u0E2A\u0E38\u0E14 ${props.maxFiles} \u0E44\u0E1F\u0E25\u0E4C`);
+    if (isFull()) {
+      setMaxFilesError();
       return;
     }
     setErrors("");
-    const fileItem = {
-      file,
-      state: "uploading" /* UPLOADING */,
-      progress: 0
-    };
-    fileItems.value = [...fileItems.value, fileItem];
-    const newIndex = fileItems.value.length - 1;
-    const uploadLoader = setupUpload(fileItem, newIndex);
-    const formData = new FormData();
-    formData.append(props.bodyKey, file);
-    await new Promise((resolve, reject) => {
-      const stopSuccessWatch = watch(
-        () => uploadLoader.status.value.isSuccess,
-        (isSuccess) => {
-          if (isSuccess && uploadLoader.data.value) {
-            const fileValue = {
-              url: _get(uploadLoader.data.value, props.responseURL),
-              path: _get(uploadLoader.data.value, props.responsePath),
-              name: _get(uploadLoader.data.value, props.responseName) || fileItem.file.name,
-              size: Number(_get(uploadLoader.data.value, props.responseSize) || fileItem.file.size),
-              id: _get(uploadLoader.data.value, props.responseID)
-            };
-            fileItems.value = fileItems.value.filter((_, i) => i !== newIndex);
-            onChange([fileValue, ...ArrayHelper.toArray(value.value)]);
-            emits("success", fileValue);
-            stopSuccessWatch();
-            stopErrorWatch();
-            resolve();
-          }
-        }
-      );
-      const stopErrorWatch = watch(
-        () => uploadLoader.status.value.isError,
-        (isError) => {
-          if (isError) {
-            updateFileItem(newIndex, {
-              state: "error" /* ERROR */,
-              error: "\u0E1E\u0E1A\u0E02\u0E49\u0E2D\u0E1C\u0E34\u0E14\u0E1E\u0E25\u0E32\u0E14: " + StringHelper.getError(
-                uploadLoader.status.value.errorData
-              )
-            });
-            stopSuccessWatch();
-            stopErrorWatch();
-            reject(new Error("Upload failed"));
-          }
-        }
-      );
-      uploadLoader.run({
-        data: formData
-      });
-    });
-    emits("change", fileItems.value.map((item) => item.file));
-  };
-  const handleFileDrop = async (files) => {
-    if (wrapperProps.value.disabled || wrapperProps.value.readonly || !files?.length) return;
-    for (const file of files) {
-      await processFileAsync(file);
-    }
+    const id = nextId++;
+    fileItems.value = [
+      ...fileItems.value,
+      {
+        id,
+        file,
+        state: UploadState.UPLOADING,
+        progress: 0
+      }
+    ];
+    await uploadFile(id, file);
+    emits(
+      "change",
+      fileItems.value.map((item) => item.file)
+    );
   };
-  const fileDialog = useFileDialog({
-    accept: acceptedFileTypes.value || "",
-    directory: false,
-    multiple: true
-  });
-  const dropzone = useDropZone(dropzoneRef, {
-    onDrop: handleFileDrop,
+  const picker = useFilePicker(context, {
     multiple: true,
-    preventDefaultForUnhandled: false
+    onFiles: async (files) => {
+      for (const file of files) {
+        await processFile(file);
+      }
+    }
   });
   const isEmpty = computed(() => fileItems.value.length === 0);
-  const hasUploading = computed(
-    () => fileItems.value.some((item) => item.state === "uploading" /* UPLOADING */)
-  );
+  const hasUploading = computed(() => fileItems.value.some((item) => item.state === UploadState.UPLOADING));
   const allSuccess = computed(
-    () => fileItems.value.length > 0 && fileItems.value.every((item) => item.state === "success" /* SUCCESS */)
+    () => fileItems.value.length > 0 && fileItems.value.every((item) => item.state === UploadState.SUCCESS)
   );
-  fileDialog.onChange(async (files) => {
-    if (files?.length) {
-      for (const file of Array.from(files)) {
-        await processFileAsync(file);
-      }
-      fileDialog.reset();
-    }
-  });
   const handleOpenFile = () => {
-    if (props.maxFiles && fileItems.value.length >= props.maxFiles) {
-      setErrors(`\u0E2A\u0E32\u0E21\u0E32\u0E23\u0E16\u0E2D\u0E31\u0E1E\u0E42\u0E2B\u0E25\u0E14\u0E44\u0E14\u0E49\u0E2A\u0E39\u0E07\u0E2A\u0E38\u0E14 ${props.maxFiles} \u0E44\u0E1F\u0E25\u0E4C`);
+    if (isFull()) {
+      setMaxFilesError();
       return;
     }
-    if (wrapperProps.value.disabled || wrapperProps.value.readonly) return;
-    fileDialog.open();
+    picker.handleOpenFile();
   };
   const handleDeleteFile = (index) => {
-    const fileItem = fileItems.value[index];
-    if (fileItem?.cleanupWatchers) {
-      fileItem.cleanupWatchers.forEach((cleanup) => cleanup());
-    }
-    fileItems.value.splice(index, 1);
+    fileItems.value = fileItems.value.filter((_, itemIndex) => itemIndex !== index);
     if (fileItems.value.length === 0) {
       setErrors("");
     }
@@ -214,60 +124,12 @@ export const useUploadStateMultiple = (props, emits, onChange, setErrors, value,
   const handleRetryUpload = async (index) => {
     const fileItem = fileItems.value[index];
     if (!fileItem) return;
-    updateFileItem(index, {
-      state: "uploading" /* UPLOADING */,
+    updateFileItem(fileItem.id, {
+      state: UploadState.UPLOADING,
       error: void 0,
       progress: 0
     });
-    const uploadLoader = setupUpload(fileItem, index);
-    const formData = new FormData();
-    formData.append(props.bodyKey, fileItem.file);
-    await new Promise((resolve, reject) => {
-      const stopSuccessWatch = watch(
-        () => uploadLoader.status.value.isSuccess,
-        (isSuccess) => {
-          if (isSuccess && uploadLoader.data.value) {
-            const fileValue = {
-              url: _get(uploadLoader.data.value, props.responseURL),
-              path: _get(uploadLoader.data.value, props.responsePath),
-              name: _get(uploadLoader.data.value, props.responseName) || fileItem.file.name,
-              size: Number(_get(uploadLoader.data.value, props.responseSize) || fileItem.file.size),
-              id: _get(uploadLoader.data.value, props.responseID)
-            };
-            fileItems.value = fileItems.value.filter((_, i) => i !== index);
-            onChange([fileValue, ...ArrayHelper.toArray(value.value)]);
-            emits("success", fileValue);
-            stopSuccessWatch();
-            stopErrorWatch();
-            resolve();
-          }
-        }
-      );
-      const stopErrorWatch = watch(
-        () => uploadLoader.status.value.isError,
-        (isError) => {
-          if (isError) {
-            updateFileItem(index, {
-              state: "error" /* ERROR */,
-              error: "\u0E1E\u0E1A\u0E02\u0E49\u0E2D\u0E1C\u0E34\u0E14\u0E1E\u0E25\u0E32\u0E14: " + StringHelper.getError(
-                uploadLoader.status.value.errorData
-              )
-            });
-            stopSuccessWatch();
-            stopErrorWatch();
-            reject(new Error("Upload failed"));
-          }
-        }
-      );
-      uploadLoader.run({
-        data: formData
-      });
-    });
-  };
-  const handlePreview = (fileValue) => {
-    previewModal.open({
-      value: fileValue
-    });
+    await uploadFile(fileItem.id, fileItem.file);
   };
   return {
     // State
@@ -276,11 +138,11 @@ export const useUploadStateMultiple = (props, emits, onChange, setErrors, value,
     hasUploading,
     allSuccess,
     // Upload utilities
-    dropzone,
+    dropzone: picker.dropzone,
     // Handlers
     handleOpenFile,
     handleDeleteFile,
     handleRetryUpload,
-    handlePreview
+    handlePreview: picker.openPreview
   };
 };

package/dist/runtime/components/Form/types.d.ts

@@ -71,6 +71,8 @@ export interface IFieldProps {
     required?: boolean;
     help?: string;
     ui?: object | any;
+    /** Classes for the FormField wrapper (label, hint, error); set by FormFields from the field's `ui` */
+    containerUi?: object | any;
 }
 export interface IFormFieldBase<I extends INPUT_TYPES, P extends IFieldProps, O> {
     type: I;

package/dist/runtime/components/Image.vue

@@ -2,25 +2,19 @@
   <UseImage v-bind="$props">
     <template #loading>
       <slot name="loading">
-        <div
-          class="flex h-full w-full items-center justify-center"
-        >
-          <Loader
-            :loading="true"
-          />
+        <div class="flex h-full w-full items-center justify-center">
+          <Loader :loading="true" />
         </div>
       </slot>
     </template>
 
     <template #error>
       <slot name="error">
-        <div
-          class="flex h-full w-full items-center justify-center"
-        >
+        <div class="flex h-full w-full items-center justify-center">
           <p class="text-error-400">
             <Icon
               name="i-heroicons:exclamation-circle-solid"
-              class="text-error-400 size-8"
+              class="size-8 text-error-400"
             />
           </p>
         </div>

package/dist/runtime/components/Loader.d.vue.ts

@@ -2,11 +2,12 @@ import { loaderTheme } from '#core/theme/loader';
 type __VLS_Props = {
     loading?: boolean;
     icon?: string;
-    ui?: typeof loaderTheme['slots'];
+    ui?: (typeof loaderTheme)['slots'];
     class?: any;
 };
 type __VLS_Slots = {
     loading: () => any;
+    default: () => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
     loading: boolean;

package/dist/runtime/components/Loader.vue

@@ -4,16 +4,19 @@
     name="loading"
   >
     <div
-
-      :class="theme.base({
-  class: [ui?.base, props.class]
-})"
+      :class="
+  theme.base({
+    class: [ui?.base, props.class]
+  })
+"
     >
       <Icon
         :name="icon"
-        :class="[theme.icon({
-  class: [ui?.icon]
-})]"
+        :class="[
+  theme.icon({
+    class: [ui?.icon]
+  })
+]"
       />
     </div>
   </slot>

package/dist/runtime/components/Loader.vue.d.ts

@@ -2,11 +2,12 @@ import { loaderTheme } from '#core/theme/loader';
 type __VLS_Props = {
     loading?: boolean;
     icon?: string;
-    ui?: typeof loaderTheme['slots'];
+    ui?: (typeof loaderTheme)['slots'];
     class?: any;
 };
 type __VLS_Slots = {
     loading: () => any;
+    default: () => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
     loading: boolean;

package/dist/runtime/components/Log/LogItem.vue

@@ -1,9 +1,7 @@
 <template>
   <div class="text-xs">
     <div class="mb-2 flex items-center justify-between">
-      <p
-        class="font-semibold"
-      >
+      <p class="font-semibold">
         {{ title || "Log" }}
       </p>
       <Icon

package/dist/runtime/components/Log/index.vue

@@ -1,8 +1,6 @@
 <template>
   <DevOnly>
-    <TeleportSafe
-      to="#dev-logs"
-    >
+    <TeleportSafe to="#dev-logs">
       <LogItem
         v-if="typeof data !== 'undefined'"
         :data="data"

package/dist/runtime/components/Table/Base.d.vue.ts

@@ -7,7 +7,21 @@ type __VLS_Props = {
     target?: string | ((row: any) => string | undefined);
     preserveQuery?: boolean;
 };
-declare var __VLS_21: {}, __VLS_28: {}, __VLS_30: {}, __VLS_44: `${string}-cell`, __VLS_45: any, __VLS_64: string, __VLS_65: any;
+declare var __VLS_21: {}, __VLS_28: {}, __VLS_30: {}, __VLS_44: `${string}-cell`, __VLS_45: {
+    cell: import("@tanstack/table-core").Cell<any, unknown>;
+    column: import("@tanstack/table-core").Column<any, unknown>;
+    getValue: import("@tanstack/table-core").Getter<unknown>;
+    renderValue: import("@tanstack/table-core").Getter<unknown>;
+    row: import("@tanstack/table-core").Row<any>;
+    table: import("@tanstack/table-core").Table<any>;
+}, __VLS_64: string, __VLS_65: {
+    cell: import("@tanstack/table-core").Cell<any, unknown>;
+    column: import("@tanstack/table-core").Column<any, unknown>;
+    getValue: import("@tanstack/table-core").Getter<unknown>;
+    renderValue: import("@tanstack/table-core").Getter<unknown>;
+    row: import("@tanstack/table-core").Row<any>;
+    table: import("@tanstack/table-core").Table<any>;
+};
 type __VLS_Slots = {} & {
     [K in NonNullable<typeof __VLS_44>]?: (props: typeof __VLS_45) => any;
 } & {

package/dist/runtime/components/Table/Base.vue

@@ -38,9 +38,7 @@
           v-else-if="options.status.isError"
           name="error"
         >
-          <div
-            class="text-error-400 flex h-[200px] items-center justify-center text-2xl"
-          >
+          <div class="flex h-[200px] items-center justify-center text-2xl text-error-400">
             {{ StringHelper.getError(options.status.errorData) }}
           </div>
         </slot>
@@ -61,18 +59,12 @@
           v-if="to && column.accessorKey !== 'actions'"
           :to="resolveTo(slotProps.row.original)"
           :target="resolveTarget(slotProps.row.original)"
-          :rel="
-  resolveTarget(slotProps.row.original) === '_blank' ? 'noopener noreferrer' : void 0
-"
+          :rel="resolveTarget(slotProps.row.original) === '_blank' ? 'noopener noreferrer' : void 0"
           class="absolute inset-0"
           tabindex="-1"
           aria-hidden="true"
         />
-        <div
-          :class="
-  to && column.accessorKey !== 'actions' ? 'pointer-events-none relative z-10' : 'relative z-10'
-"
-        >
+        <div :class="to && column.accessorKey !== 'actions' ? 'pointer-events-none relative z-10' : 'relative z-10'">
           <slot
             :name="`${column.accessorKey}-cell`"
             v-bind="slotProps"
@@ -86,9 +78,7 @@
             />
             <component
               :is="columnTypeComponents[column.type]"
-              v-else-if="
-  column.type !== COLUMN_TYPES.COMPONENT && columnTypeComponents[column.type]
-"
+              v-else-if="column.type !== COLUMN_TYPES.COMPONENT && columnTypeComponents[column.type]"
               :value="transformValue(column, slotProps.row)"
               :column="column"
               :row="slotProps.row"
@@ -135,18 +125,12 @@ import {
 } from "#core/components/Table/types";
 import ColumnNumber from "#core/components/Table/ColumnNumber.vue";
 import ColumnImage from "#core/components/Table/ColumnImage.vue";
-import {
-  useAppConfig,
-  useRoute,
-  useUiConfig,
-  useWatchChange,
-  StringHelper
-} from "#imports";
+import { useAppConfig, useRoute, useUiConfig, useWatchChange, StringHelper } from "#imports";
 import ColumnDateTime from "#core/components/Table/ColumnDateTime.vue";
 import Empty from "#core/components/Empty.vue";
 import ColumnDate from "#core/components/Table/ColumnDate.vue";
 import ColumnText from "#core/components/Table/ColumnText.vue";
-import UTable from "#ui/components/Table";
+import UTable from "#ui/components/Table.vue";
 import Pagination from "./Pagination.vue";
 import { tableTheme } from "#core/theme/table";
 const emits = defineEmits(["pageChange", "search"]);
@@ -170,9 +154,7 @@ const VNodeRenderer = defineComponent({
 });
 const route = useRoute();
 const slots = useSlots();
-const forwardedSlotNames = computed(
-  () => Object.keys(slots).filter((name) => !name.endsWith("-cell"))
-);
+const forwardedSlotNames = computed(() => Object.keys(slots).filter((name) => !name.endsWith("-cell")));
 const columnTypeComponents = {
   [COLUMN_TYPES.NUMBER]: ColumnNumber,
   [COLUMN_TYPES.IMAGE]: ColumnImage,
@@ -183,9 +165,7 @@ const columnTypeComponents = {
 const theme = computed(() => useUiConfig(tableTheme, "table")());
 const config = useAppConfig();
 const page = ref(props.options.pageOptions?.currentPage || 1);
-const pageLimit = ref(
-  props.options.pageOptions?.limit || config.core.limit_per_page
-);
+const pageLimit = ref(props.options.pageOptions?.limit || config.core.limit_per_page);
 const uTableCompatibleColumns = computed(
   () => props.options.columns.map((col) => ({
     ...col,
@@ -216,7 +196,7 @@ const resolveTo = (rowOriginal) => {
     ...resolved,
     query: {
       ...route.query,
-      ...resolved.query || {}
+      ...resolved.query
     }
   };
 };

package/dist/runtime/components/Table/Base.vue.d.ts

@@ -7,7 +7,21 @@ type __VLS_Props = {
     target?: string | ((row: any) => string | undefined);
     preserveQuery?: boolean;
 };
-declare var __VLS_21: {}, __VLS_28: {}, __VLS_30: {}, __VLS_44: `${string}-cell`, __VLS_45: any, __VLS_64: string, __VLS_65: any;
+declare var __VLS_21: {}, __VLS_28: {}, __VLS_30: {}, __VLS_44: `${string}-cell`, __VLS_45: {
+    cell: import("@tanstack/table-core").Cell<any, unknown>;
+    column: import("@tanstack/table-core").Column<any, unknown>;
+    getValue: import("@tanstack/table-core").Getter<unknown>;
+    renderValue: import("@tanstack/table-core").Getter<unknown>;
+    row: import("@tanstack/table-core").Row<any>;
+    table: import("@tanstack/table-core").Table<any>;
+}, __VLS_64: string, __VLS_65: {
+    cell: import("@tanstack/table-core").Cell<any, unknown>;
+    column: import("@tanstack/table-core").Column<any, unknown>;
+    getValue: import("@tanstack/table-core").Getter<unknown>;
+    renderValue: import("@tanstack/table-core").Getter<unknown>;
+    row: import("@tanstack/table-core").Row<any>;
+    table: import("@tanstack/table-core").Table<any>;
+};
 type __VLS_Slots = {} & {
     [K in NonNullable<typeof __VLS_44>]?: (props: typeof __VLS_45) => any;
 } & {

package/dist/runtime/components/Table/ColumnText.d.vue.ts

@@ -1,13 +1,12 @@
-import { type ComponentProps } from 'vue';
 import type { TableColumn } from '@nuxt/ui';
-import NuxtLink from '#app/components/nuxt-link';
+import type { NuxtLinkProps } from '#app';
 type __VLS_Props = {
     value: any;
     row: any;
     column: TableColumn<any> & {
         meta: {
             max: number;
-            link?: ComponentProps<typeof NuxtLink>;
+            link?: NuxtLinkProps;
         };
     };
 };

package/dist/runtime/components/Table/ColumnText.vue

@@ -24,7 +24,7 @@ const getValue = computed(() => {
   const value = props.value;
   const max = props.column?.meta?.max;
   if (max) {
-    return StringHelper.truncate(value, max);
+    return StringHelper.truncate(value, max) || "-";
   }
   if (typeof value === "string") {
     return value || "-";