@finema/core 2.12.2 → 2.13.0

package/dist/runtime/components/Form/InputUploadDropzoneAuto/useUploadState.js

@@ -0,0 +1,187 @@
+import { useDropZone, useFileDialog } from "@vueuse/core";
+import PreviewModal from "./PreviewModal.vue";
+import { computed, ref, useOverlay, watch } from "#imports";
+import { useUploadLoader } from "#core/composables/useUpload";
+import { useFileAllocate, useFileProgress } from "#core/helpers/componentHelper";
+import { StringHelper } from "#core/utils/StringHelper";
+import { _get } from "#core/utils/lodash";
+const overlay = useOverlay();
+const previewModal = overlay.create(PreviewModal);
+export var UploadState = /* @__PURE__ */ ((UploadState2) => {
+  UploadState2["EMPTY"] = "empty";
+  UploadState2["UPLOADING"] = "uploading";
+  UploadState2["SUCCESS"] = "success";
+  UploadState2["ERROR"] = "error";
+  return UploadState2;
+})(UploadState || {});
+export const useUploadState = (props, emits, onChange, setErrors, value, acceptedFileTypes, wrapperProps, dropzoneRef) => {
+  const selectedFile = ref();
+  const fileAllocate = useFileAllocate(selectedFile, props);
+  const {
+    percent,
+    onDownloadProgress,
+    onUploadProgress
+  } = useFileProgress();
+  const request = {
+    requestOptions: {
+      ...props.requestOptions,
+      onDownloadProgress,
+      onUploadProgress
+    },
+    pathURL: props.uploadPathURL
+  };
+  const upload = useUploadLoader(request);
+  const validateFile = (file) => {
+    const acceptedTypes = fileAllocate.acceptFile.value;
+    if (acceptedTypes) {
+      const acceptedTypesList = acceptedTypes.split(",").map((type) => type.trim());
+      const fileExtension = file.name.toLowerCase().split(".").pop();
+      const isValidFileType = acceptedTypesList.some((acceptedType) => {
+        if (acceptedType.startsWith(".")) {
+          const extension = acceptedType.slice(1).toLowerCase();
+          return fileExtension === extension;
+        } else if (!acceptedType.includes("/") && !acceptedType.includes("*")) {
+          return fileExtension === acceptedType.toLowerCase();
+        }
+        if (acceptedType.endsWith("/*")) {
+          const baseType = acceptedType.slice(0, -2);
+          return file.type.startsWith(baseType + "/");
+        }
+        return file.type === acceptedType;
+      });
+      if (!isValidFileType) {
+        setErrors("\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(", ") + ")");
+        return false;
+      }
+    }
+    const maxSizeBytes = (fileAllocate.acceptFileSizeKb.value || 0) * 1024;
+    if (file.size > maxSizeBytes) {
+      if (fileAllocate.isAcceptFileUseMb.value) {
+        setErrors(`\u0E02\u0E19\u0E32\u0E14\u0E44\u0E1F\u0E25\u0E4C\u0E15\u0E49\u0E2D\u0E07\u0E44\u0E21\u0E48\u0E40\u0E01\u0E34\u0E19 ${fileAllocate.acceptFileSizeMb.value} MB`);
+      } else {
+        setErrors(`\u0E02\u0E19\u0E32\u0E14\u0E44\u0E1F\u0E25\u0E4C\u0E15\u0E49\u0E2D\u0E07\u0E44\u0E21\u0E48\u0E40\u0E01\u0E34\u0E19 ${fileAllocate.acceptFileSizeKb.value} KB`);
+      }
+      return false;
+    }
+    setErrors("");
+    return true;
+  };
+  const processFile = (file) => {
+    if (!validateFile(file)) return;
+    selectedFile.value = file;
+    emits("change", file);
+    const formData = new FormData();
+    formData.append(props.bodyKey || "file", file);
+    upload.run({
+      data: formData
+    });
+  };
+  const handleFileDrop = (files) => {
+    if (wrapperProps.value.disabled || wrapperProps.value.readonly || !files?.length || !isEmpty.value) return;
+    const file = files[0];
+    if (file) {
+      processFile(file);
+    }
+  };
+  const fileDialog = useFileDialog({
+    accept: acceptedFileTypes.value || "",
+    directory: false,
+    multiple: false
+  });
+  const dropzone = useDropZone(dropzoneRef, {
+    onDrop: handleFileDrop,
+    // dataTypes: typeof props.accept === 'string' ? [props.accept] : props.accept,
+    multiple: false,
+    preventDefaultForUnhandled: false
+  });
+  const currentState = computed(() => {
+    if (value.value) return "success" /* SUCCESS */;
+    if (selectedFile.value && upload.status.value.isLoading) return "uploading" /* UPLOADING */;
+    if (selectedFile.value && upload.status.value.isError) return "error" /* ERROR */;
+    return "empty" /* EMPTY */;
+  });
+  const isEmpty = computed(() => currentState.value === "empty" /* EMPTY */);
+  const isUploading = computed(() => currentState.value === "uploading" /* UPLOADING */);
+  const isSuccess = computed(() => currentState.value === "success" /* SUCCESS */);
+  const isError = computed(() => currentState.value === "error" /* ERROR */);
+  const handleInputChange = (event) => {
+    if (wrapperProps.value.disabled || wrapperProps.value.readonly) return;
+    const file = event.target.files?.[0];
+    if (file) {
+      processFile(file);
+    }
+  };
+  const handleOpenFile = () => {
+    if (wrapperProps.value.disabled || wrapperProps.value.readonly) return;
+    fileDialog.open();
+  };
+  const handleDeleteFile = () => {
+    fileDialog.reset();
+    upload.clear();
+    selectedFile.value = void 0;
+    onChange(void 0);
+    emits("delete");
+  };
+  const handleRetryUpload = () => {
+    if (selectedFile.value) {
+      const formData = new FormData();
+      formData.append(props.bodyKey || "file", selectedFile.value);
+      upload.run(formData);
+    }
+  };
+  const handlePreview = () => {
+    previewModal.open({
+      value: value.value
+    });
+  };
+  watch(
+    () => fileDialog.files.value,
+    (files) => {
+      if (files?.length) {
+        processFile(files[0]);
+      }
+    }
+  );
+  watch(
+    () => upload.status.value.isSuccess,
+    (isSuccess2) => {
+      if (isSuccess2 && upload.data.value) {
+        const fileValue = {
+          url: _get(upload.data.value, props.responseURL),
+          path: _get(upload.data.value, props.responsePath),
+          name: _get(upload.data.value, props.responseName) || selectedFile.value?.name,
+          size: Number(_get(upload.data.value, props.responseSize) || selectedFile.value?.size)
+        };
+        value.value = fileValue;
+        emits("success", fileValue);
+      }
+    }
+  );
+  watch(
+    () => upload.status.value.isError,
+    (isError2) => {
+      if (isError2) {
+        setErrors(StringHelper.getError(upload.status.value.errorData));
+      }
+    }
+  );
+  return {
+    // State
+    currentState,
+    isEmpty,
+    isUploading,
+    isSuccess,
+    isError,
+    selectedFile,
+    // Upload utilities
+    upload,
+    dropzone,
+    percent,
+    // Handlers
+    handleInputChange,
+    handleOpenFile,
+    handleDeleteFile,
+    handleRetryUpload,
+    handlePreview
+  };
+};

package/dist/runtime/components/Image.vue

@@ -20,7 +20,7 @@
           <p class="text-error-400">
             <Icon
               name="i-heroicons:exclamation-circle-solid"
-              class="size-8 text-error-400"
+              class="text-error-400 size-8"
             />
           </p>
         </div>

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

@@ -1,80 +1,80 @@
 <template>
-  <div
-    v-if="!isHideCaption || !isHideBottomPagination"
-    class="mb-4 text-gray-500"
-  >
-    <span class="font-bold">ผลลัพธ์ทั้งหมด:</span>
-    จำนวน
-    <span class="font-bold">{{ pageOptions?.totalCount || 0 }}</span>
-    รายการ
-  </div>
-  <UTable
-    :loading="status.isLoading"
-    :columns="uTableCompatibleColumns"
-    :rows="rawData"
-    v-bind="$attrs"
-  >
-    <template #loading-state>
-      <div class="flex h-60 items-center justify-center">
-        <Icon
-          name="i-svg-spinners:180-ring-with-bg"
-          class="size-8 text-primary"
-        />
-      </div>
-    </template>
-    <template #empty-state>
-      <Empty />
-    </template>
-    <template
-      v-for="column in columns"
-      #[`${column.accessorKey}-data`]="{ row }"
-      :key="column.accessorKey"
-    >
-      <component
-        :is="column.type === COLUMN_TYPES.COMPONENT ? column.component : column.type ? columnTypeComponents[column.type] : void 0"
-        v-if="column.type === COLUMN_TYPES.COMPONENT || column.type && columnTypeComponents[column.type]"
-        :value="transformValue(column, row)"
-        :column="column"
-        :row="row"
-      />
-      <ColumnText
-        v-else
-        :value="transformValue(column, row)"
-        :column="column"
-        :row="row"
-      />
-    </template>
-
-    <template
-      v-for="(_, slotName) in $slots"
-      #[slotName]="scope"
-    >
-      <slot
-        :name="slotName"
-        v-bind="scope"
-      />
-    </template>
-  </UTable>
-  <div
-    v-if="pageOptions"
-    class="mt-4 flex justify-between px-3"
-  >
-    <p class="text-sm text-gray-500">
-      ผลลัพธ์ {{ pageBetween }} ของ {{ totalCountWithComma }} รายการ
-    </p>
-    <Pagination
-      v-if="pageOptions.totalPage > 1 && !isSimplePagination && !isHideBottomPagination"
-      v-model="page"
-      :page-count="pageOptions.limit"
-      :total="pageOptions.totalCount"
-    />
-    <SimplePagination
-      v-if="pageOptions.totalPage > 1 && isSimplePagination"
-      v-model="page"
-      :page-count="pageOptions.limit"
-      :total="pageOptions.totalCount"
-    />
-  </div>
+  <div
+    v-if="!isHideCaption || !isHideBottomPagination"
+    class="mb-4 text-gray-500"
+  >
+    <span class="font-bold">ผลลัพธ์ทั้งหมด:</span>
+    จำนวน
+    <span class="font-bold">{{ pageOptions?.totalCount || 0 }}</span>
+    รายการ
+  </div>
+  <UTable
+    :loading="status.isLoading"
+    :columns="uTableCompatibleColumns"
+    :rows="rawData"
+    v-bind="$attrs"
+  >
+    <template #loading-state>
+      <div class="flex h-60 items-center justify-center">
+        <Icon
+          name="i-svg-spinners:180-ring-with-bg"
+          class="text-primary size-8"
+        />
+      </div>
+    </template>
+    <template #empty-state>
+      <Empty />
+    </template>
+    <template
+      v-for="column in columns"
+      #[`${column.accessorKey}-data`]="{ row }"
+      :key="column.accessorKey"
+    >
+      <component
+        :is="column.type === COLUMN_TYPES.COMPONENT ? column.component : column.type ? columnTypeComponents[column.type] : void 0"
+        v-if="column.type === COLUMN_TYPES.COMPONENT || column.type && columnTypeComponents[column.type]"
+        :value="transformValue(column, row)"
+        :column="column"
+        :row="row"
+      />
+      <ColumnText
+        v-else
+        :value="transformValue(column, row)"
+        :column="column"
+        :row="row"
+      />
+    </template>
+
+    <template
+      v-for="(_, slotName) in $slots"
+      #[slotName]="scope"
+    >
+      <slot
+        :name="slotName"
+        v-bind="scope"
+      />
+    </template>
+  </UTable>
+  <div
+    v-if="pageOptions"
+    class="mt-4 flex justify-between px-3"
+  >
+    <p class="text-sm text-gray-500">
+      ผลลัพธ์ {{ pageBetween }} ของ {{ totalCountWithComma }} รายการ
+    </p>
+    <Pagination
+      v-if="pageOptions.totalPage > 1 && !isSimplePagination && !isHideBottomPagination"
+      v-model="page"
+      :page-count="pageOptions.limit"
+      :total="pageOptions.totalCount"
+    />
+    <SimplePagination
+      v-if="pageOptions.totalPage > 1 && isSimplePagination"
+      v-model="page"
+      :page-count="pageOptions.limit"
+      :total="pageOptions.totalCount"
+    />
+  </div>
 </template>
 
 <script setup>
@@ -113,7 +113,7 @@ const props = defineProps({
     type: Boolean,
     default: false
   },
-  isHideBottomPagination: {
+  isHidePagination: {
     type: Boolean,
     default: false
   },

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

@@ -25,8 +25,8 @@ declare const __VLS_component: import("vue").DefineComponent<import("vue").Extra
         type: PropType<ITableOptions["isSimplePagination"]>;
         default: boolean;
     };
-    isHideBottomPagination: {
-        type: PropType<ITableOptions["isHideBottomPagination"]>;
+    isHidePagination: {
+        type: PropType<ITableOptions["isHidePagination"]>;
         default: boolean;
     };
     isHideCaption: {
@@ -56,8 +56,8 @@ declare const __VLS_component: import("vue").DefineComponent<import("vue").Extra
         type: PropType<ITableOptions["isSimplePagination"]>;
         default: boolean;
     };
-    isHideBottomPagination: {
-        type: PropType<ITableOptions["isHideBottomPagination"]>;
+    isHidePagination: {
+        type: PropType<ITableOptions["isHidePagination"]>;
         default: boolean;
     };
     isHideCaption: {
@@ -68,8 +68,8 @@ declare const __VLS_component: import("vue").DefineComponent<import("vue").Extra
     onPageChange?: ((...args: any[]) => any) | undefined;
 }>, {
     isHideCaption: boolean | undefined;
-    isHideBottomPagination: boolean | undefined;
     isSimplePagination: boolean | undefined;
+    isHidePagination: boolean | undefined;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
 export default _default;

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

@@ -1,25 +1,25 @@
 <template>
-  <Base
-    v-bind="$attrs"
-    :columns="options.columns"
-    :raw-data="itemsByPage"
-    :status="options.status"
-    :page-options="pageOptions"
-    :is-simple-pagination="isShowSimplePagination"
-    :is-hide-bottom-pagination="options.isHideBottomPagination"
-    :is-hide-caption="options.isHideCaption"
-    @page-change="onPageChange"
-  >
-    <template
-      v-for="(_, slot) of $slots"
-      #[slot]="slotProps"
-    >
-      <slot
-        :name="slot"
-        v-bind="slotProps || {}"
-      />
-    </template>
-  </Base>
+  <Base
+    v-bind="$attrs"
+    :columns="options.columns"
+    :raw-data="itemsByPage"
+    :status="options.status"
+    :page-options="pageOptions"
+    :is-simple-pagination="isShowSimplePagination"
+    :is-hide-pagination="options.isHidePagination"
+    :is-hide-caption="options.isHideCaption"
+    @page-change="onPageChange"
+  >
+    <template
+      v-for="(_, slot) of $slots"
+      #[slot]="slotProps"
+    >
+      <slot
+        :name="slot"
+        v-bind="slotProps || {}"
+      />
+    </template>
+  </Base>
 </template>
 
 <script setup>

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

@@ -13,7 +13,7 @@
       />
     </div>
     <div
-      v-if="!options.isHideCaption || !options.isHideBottomPagination"
+      v-if="!options.isHideCaption || !options.isHidePagination"
       :class="theme.captionContainer({
   class: [ui?.captionContainer]
 })"
@@ -53,7 +53,7 @@
           name="error"
         >
           <div
-            class="flex h-[200px] items-center justify-center text-2xl text-error-400"
+            class="text-error-400 flex h-[200px] items-center justify-center text-2xl"
           >
             {{ StringHelper.getError(options.status.errorData) }}
           </div>
@@ -91,6 +91,7 @@
     </UTable>
 
     <div
+      v-if="!options.isHidePagination"
       :class="theme.paginationContainer({
   class: [ui?.paginationContainer]
 })"
@@ -100,7 +101,7 @@
   class: [ui?.paginationInfo]
 })"
       >
-        ผลลัพธ์ {{ pageBetween }} ของ {{ totalCountWithComma }} รายการ
+        {{ pageBetween }} รายการ จากทั้งหมด {{ totalCountWithComma }} รายการ
       </p>
       <Pagination
         v-model:page="page"

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

@@ -6,7 +6,7 @@ type Slot = TableSlots<any> & {
 };
 type __VLS_Slots = Slot;
 type __VLS_Props = {
-    options: ITableOptions;
+    options: ITableOptions<any>;
     ui?: typeof tableTheme['slots'];
 };
 declare const __VLS_component: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {

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

@@ -19,9 +19,8 @@ export interface IBaseTableOptions<T extends Record<string, any> = Record<string
     rawData: T[];
     status: IStatus;
     columns: TableColumn<T>[];
-    isHideBottomPagination?: boolean;
+    isHidePagination?: boolean;
     isHideCaption?: boolean;
-    isHideTopPagination?: boolean;
     isSimplePagination?: boolean;
 }
 export interface ITableOptions<T extends Record<string, any> = Record<string, any>> extends IBaseTableOptions<T> {

package/dist/runtime/composables/useUpload.js

@@ -3,14 +3,12 @@ export const useUploadLoader = (request) => {
   return useObjectLoader({
     method: "post",
     url: request.pathURL || "",
-    getRequestOptions: (_data, opts) => ({
+    getRequestOptions: () => ({
       ...request.requestOptions,
       headers: {
         ...request.requestOptions.headers,
         "Content-Type": "multipart/form-data"
-      },
-      onDownloadProgress: opts.data?.onDownloadProgress,
-      onUploadProgress: opts.data?.onUploadProgress
+      }
     })
   });
 };

package/dist/runtime/helpers/componentHelper.d.ts

@@ -1,4 +1,5 @@
 import type { Ref } from 'vue';
+import type { AxiosProgressEvent } from 'axios';
 export declare const checkMaxSize: (file: File, acceptFileSize?: number) => boolean;
 export declare const checkFileType: (file: File, acceptFileType: string | string[]) => boolean;
 export declare const generateURL: (file: File) => string;
@@ -25,7 +26,7 @@ export declare const useFileSize: (size?: number) => {
 };
 export declare const useFileProgress: () => {
     percent: Ref<number, number>;
-    onUploadProgress: (progressEvent: ProgressEvent) => void;
-    onDownloadProgress: (progressEvent: ProgressEvent) => void;
+    onUploadProgress: (progressEvent: AxiosProgressEvent) => void;
+    onDownloadProgress: (progressEvent: AxiosProgressEvent) => void;
 };
 export declare const downloadFileFromURL: (url: string, filename?: string) => Promise<void>;

package/dist/runtime/helpers/componentHelper.js

@@ -86,6 +86,10 @@ export const useFileSize = (size = 0) => {
 export const useFileProgress = () => {
   const percent = ref(0);
   const onUploadProgress = (progressEvent) => {
+    if (!progressEvent.total || progressEvent.total === 0) {
+      percent.value = 100;
+      return;
+    }
     percent.value = Number.parseFloat(
       StringHelper.withFixed(
         (Math.floor(progressEvent.loaded * 100 / progressEvent.total) || 0) * 0.8
@@ -93,13 +97,13 @@ export const useFileProgress = () => {
     );
   };
   const onDownloadProgress = (progressEvent) => {
-    if (progressEvent.total === 0) {
+    if (!progressEvent.total || progressEvent.total === 0) {
       percent.value = 100;
       return;
     }
     percent.value = Number.parseFloat(
       StringHelper.withFixed(
-        (Math.floor(progressEvent.loaded * 100 / progressEvent.total) || 0) * 0.2 + 80
+        Math.floor(progressEvent.loaded * 100 / progressEvent.total) * 0.2 + 80
       )
     );
   };

package/dist/runtime/theme/uploadFileDropzone.d.ts

@@ -13,6 +13,28 @@ export declare const uploadFileDropzoneTheme: {
         failedImgIcon: string;
         loadingIcon: string;
         labelIcon: string;
+        onLoadingWrapper: string;
+        onLoadingPlaceholderWrapper: string;
+        onLoadingPlaceholderIconClass: string;
+        onLoadingTextWrapper: string;
+        onLoadingLoadingIconClass: string;
+        onPreviewWrapper: string;
+        onPreviewPreviewImgWrapper: string;
+        onPreviewPreviewImgClass: string;
+        onPreviewPreviewFileClass: string;
+        onPreviewTextWrapper: string;
+        onFailedWrapper: string;
+        onFailedFailedImgWrapper: string;
+        onFailedFailedIconClass: string;
+        onFailedTextWrapper: string;
+        actionWrapper: string;
+        actionIconClass: string;
+        actionDeleteIconClass: string;
+        actionPreviewIcon: string;
+        actionDownloadIcon: string;
+        actionDeleteIcon: string;
+        actionRetryIcon: string;
+        actionRetryBtnClass: string;
     };
     variants: {
         dragover: {
@@ -20,5 +42,15 @@ export declare const uploadFileDropzoneTheme: {
                 base: string;
             };
         };
+        disabled: {
+            true: {
+                base: string;
+            };
+        };
+        failed: {
+            true: {
+                base: string;
+            };
+        };
     };
 };

package/dist/runtime/theme/uploadFileDropzone.js

@@ -1,23 +1,59 @@
 export const uploadFileDropzoneTheme = {
   slots: {
-    base: "relative w-full p-4 transition rounded-lg flex items-center justify-center ring-1 bg-white ring-gray-300",
+    base: "relative w-full text-base p-4 transition rounded-lg flex items-center justify-center ring-1 bg-white ring-gray-300",
     wrapper: "flex flex-col items-center w-full",
     disabled: "bg-gray-100 border-none grayscale cursor-not-allowed",
-    failed: "border-danger",
+    failed: "border-error",
     placeholderWrapper: "py-4 flex flex-col items-center justify-center",
     placeholder: "text-gray-400 text-center font-light text-sm truncate",
     labelWrapper: "flex items-center space-x-2 text-gray-400 text-center",
     filePreviewIcon: "i-heroicons:document-text-solid",
-    uploadIcon: "i-ph:cloud-arrow-up",
+    uploadIcon: "ri:upload-cloud-2-line",
     placeholderImgIcon: "i-material-symbols:imagesmode-outline",
     failedImgIcon: "i-material-symbols:imagesmode-outline",
     loadingIcon: "i-svg-spinners:180-ring-with-bg",
-    labelIcon: "w-6 h-6 text-gray-400 text-center mb-4"
+    labelIcon: "size-6 text-gray-400 text-center mb-3",
+    // Loading state
+    onLoadingWrapper: "flex items-center space-x-4 w-full",
+    onLoadingPlaceholderWrapper: "flex-shrink-0",
+    onLoadingPlaceholderIconClass: "size-12 text-gray-400",
+    onLoadingTextWrapper: "flex-1 min-w-0 flex items-center justify-between",
+    onLoadingLoadingIconClass: "size-10 text-primary animate-spin",
+    // Preview state
+    onPreviewWrapper: "flex items-center space-x-4 rounded-lg w-full",
+    onPreviewPreviewImgWrapper: "flex-shrink-0 w-16 h-16 rounded-lg overflow-hidden bg-gray-100",
+    onPreviewPreviewImgClass: "w-full h-full object-cover",
+    onPreviewPreviewFileClass: "size-8 text-gray-400 m-auto mt-4",
+    onPreviewTextWrapper: "flex-1 min-w-0 flex items-center justify-between",
+    // Failed state
+    onFailedWrapper: "flex items-start space-x-4 w-full rounded-lg",
+    onFailedFailedImgWrapper: "flex-shrink-0",
+    onFailedFailedIconClass: "size-12",
+    onFailedTextWrapper: "flex-1 min-w-0 flex items-start justify-between",
+    // Actions
+    actionWrapper: "flex items-center space-x-2",
+    actionIconClass: "size-6 text-dimmed hover:text-dimmed-600 cursor-pointer transition-colors",
+    actionDeleteIconClass: "size-6 text-(--ui-color-error-500) hover:text-(--ui-color-error-600) cursor-pointer transition-colors",
+    actionPreviewIcon: "ic:outline-remove-red-eye",
+    actionDownloadIcon: "material-symbols:download",
+    actionDeleteIcon: "material-symbols:delete",
+    actionRetryIcon: "stash:arrow-retry",
+    actionRetryBtnClass: "px-0"
   },
   variants: {
     dragover: {
       true: {
-        base: "ring-primary bg-primary-50"
+        base: "ring-primary bg-(--ui-color-primary-50)"
+      }
+    },
+    disabled: {
+      true: {
+        base: "bg-gray-100 border-none grayscale cursor-not-allowed"
+      }
+    },
+    failed: {
+      true: {
+        base: "ring-(--ui-color-error-500) bg-(--ui-color-error-50)"
       }
     }
   }