@eslamdevui/ui 3.3.2-beta.1 → 3.3.2-beta.2

package/.nuxt/ui/file-upload.ts

@@ -50,7 +50,13 @@ export default {
     "fileWrapper": "flex flex-col min-w-0",
     "fileName": "text-default truncate",
     "fileSize": "text-muted truncate",
-    "fileTrailingButton": ""
+    "fileProgress": "flex items-center gap-2 mt-1",
+    "fileProgressText": "text-xs text-muted whitespace-nowrap",
+    "fileError": "text-xs text-red-500 mt-1",
+    "fileActions": "flex items-center gap-1",
+    "fileTrailingButton": "",
+    "fileUploadButton": "",
+    "fileCancelButton": ""
   },
   "variants": {
     "color": {
@@ -104,12 +110,15 @@ export default {
         "root": "gap-2 items-start",
         "files": "flex flex-col w-full gap-2",
         "file": "min-w-0 flex items-center border border-default rounded-md w-full",
-        "fileTrailingButton": "ms-auto"
+        "fileActions": "ms-auto"
       },
       "grid": {
         "fileWrapper": "hidden",
         "fileLeadingAvatar": "size-full rounded-lg",
-        "fileTrailingButton": "absolute -top-1.5 -end-1.5 p-0 rounded-full border-2 border-bg"
+        "fileActions": "absolute -top-1.5 -end-1.5",
+        "fileTrailingButton": "p-0 rounded-full border-2 border-bg",
+        "fileUploadButton": "p-0 rounded-full border-2 border-bg",
+        "fileCancelButton": "p-0 rounded-full border-2 border-bg"
       }
     },
     "position": {
@@ -130,6 +139,9 @@ export default {
     },
     "disabled": {
       "true": "cursor-not-allowed opacity-75"
+    },
+    "showProgress": {
+      "true": ""
     }
   },
   "compoundVariants": [
@@ -200,35 +212,35 @@ export default {
       "size": "xs" as typeof size[number],
       "layout": "list" as typeof layout[number],
       "class": {
-        "fileTrailingButton": "-me-1"
+        "fileActions": "-me-1"
       }
     },
     {
       "size": "sm" as typeof size[number],
       "layout": "list" as typeof layout[number],
       "class": {
-        "fileTrailingButton": "-me-1.5"
+        "fileActions": "-me-1.5"
       }
     },
     {
       "size": "md" as typeof size[number],
       "layout": "list" as typeof layout[number],
       "class": {
-        "fileTrailingButton": "-me-1.5"
+        "fileActions": "-me-1.5"
       }
     },
     {
       "size": "lg" as typeof size[number],
       "layout": "list" as typeof layout[number],
       "class": {
-        "fileTrailingButton": "-me-2"
+        "fileActions": "-me-2"
       }
     },
     {
       "size": "xl" as typeof size[number],
       "layout": "list" as typeof layout[number],
       "class": {
-        "fileTrailingButton": "-me-2"
+        "fileActions": "-me-2"
       }
     },
     {
@@ -285,6 +297,23 @@ export default {
       "interactive": true,
       "disabled": false,
       "class": "hover:bg-elevated/25"
+    },
+    {
+      "showProgress": true,
+      "layout": "list" as typeof layout[number],
+      "class": {
+        "fileWrapper": "flex-col",
+        "fileProgress": "w-full"
+      }
+    },
+    {
+      "showProgress": true,
+      "layout": "grid" as typeof layout[number],
+      "class": {
+        "fileWrapper": "absolute inset-0 bg-black/50 flex flex-col items-center justify-center rounded-lg",
+        "fileProgress": "w-3/4",
+        "fileProgressText": "text-white font-medium"
+      }
     }
   ],
   "defaultVariants": {

package/dist/module.json

@@ -1,6 +1,6 @@
 {
   "name": "@eslamdevui/ui",
-  "version": "3.3.2-beta.1",
+  "version": "3.3.2-beta.2",
   "docs": "https://ui.nuxt.com/getting-started/installation/nuxt",
   "configKey": "ui",
   "compatibility": {

package/dist/module.mjs

@@ -1,6 +1,6 @@
 import { defineNuxtModule, createResolver, addVitePlugin, addPlugin, hasNuxtModule, addComponentsDir, addImportsDir, installModule } from '@nuxt/kit';
 import { defu } from 'defu';
-import { d as defaultOptions, r as resolveColors, a as getDefaultUiConfig, b as addTemplates } from './shared/ui.CgUuvRXi.mjs';
+import { d as defaultOptions, r as resolveColors, a as getDefaultUiConfig, b as addTemplates } from './shared/ui.DdcmBFzX.mjs';
 import '../dist/runtime/utils/index.js';
 import 'node:url';
 import 'scule';
@@ -8,7 +8,7 @@ import 'tailwindcss/colors';
 import 'knitwork';
 
 const name = "@eslamdevui/ui";
-const version = "3.3.2-beta.1";
+const version = "3.3.2-beta.2";
 
 function generateProseComponentMap(components) {
   return components.reduce((map, component) => {

package/dist/runtime/components/FileUpload.vue

@@ -3,7 +3,7 @@ import theme from "#build/ui/file-upload";
 </script>
 
 <script setup>
-import { computed, watch } from "vue";
+import { computed, watch, ref, nextTick, readonly } from "vue";
 import { Primitive } from "reka-ui";
 import { createReusableTemplate } from "@vueuse/core";
 import { useAppConfig } from "#imports";
@@ -13,6 +13,7 @@ import { tv } from "../utils/tv";
 import UAvatar from "./Avatar.vue";
 import UButton from "./Button.vue";
 import UIcon from "./Icon.vue";
+import UProgress from "./Progress.vue";
 defineOptions({ inheritAttrs: false });
 const props = defineProps({
   as: { type: null, required: false },
@@ -37,20 +38,28 @@ const props = defineProps({
   fileIcon: { type: String, required: false },
   fileDelete: { type: [Boolean, Object], required: false },
   fileDeleteIcon: { type: String, required: false },
+  showProgress: { type: Boolean, required: false, default: false },
+  allowCancel: { type: Boolean, required: false, default: true },
+  uploadFn: { type: Function, required: false },
+  autoUpload: { type: Boolean, required: false, default: false },
+  uploadTimeout: { type: Number, required: false, default: 3e4 },
+  maxConcurrentUploads: { type: Number, required: false, default: 3 },
   class: { type: null, required: false },
   ui: { type: null, required: false }
 });
-const emits = defineEmits(["update:modelValue", "change"]);
+const emits = defineEmits(["update:modelValue", "change", "upload:start", "upload:progress", "upload:success", "upload:error", "upload:cancel", "upload:complete"]);
 const slots = defineSlots();
 const modelValue = defineModel({ type: null });
 const appConfig = useAppConfig();
+const activeUploads = ref(0);
+const uploadQueue = ref([]);
 const [DefineFilesTemplate, ReuseFilesTemplate] = createReusableTemplate();
 const { isDragging, open, inputRef, dropzoneRef } = useFileUpload({
   accept: props.accept,
   reset: props.reset,
   multiple: props.multiple,
   dropzone: props.dropzone,
-  onUpdate
+  onUpdate: onFileUpdate
 });
 const { emitFormInput, emitFormChange, id, name, disabled, ariaAttrs } = useFormField(props);
 const variant = computed(() => props.multiple ? "area" : props.variant);
@@ -64,6 +73,9 @@ const position = computed(() => {
   }
   return props.position;
 });
+const shouldShowProgress = computed(() => {
+  return props.showProgress || props.autoUpload;
+});
 const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.fileUpload || {} })({
   dropzone: props.dropzone,
   interactive: props.interactive,
@@ -74,7 +86,8 @@ const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.fileUpload ||
   position: position.value,
   multiple: props.multiple,
   highlight: props.highlight,
-  disabled: props.disabled
+  disabled: props.disabled,
+  showProgress: shouldShowProgress.value
 }));
 function createObjectUrl(file) {
   return URL.createObjectURL(file);
@@ -90,77 +103,265 @@ function formatFileSize(bytes) {
   const formattedSize = i === 0 ? size.toString() : size.toFixed(0);
   return `${formattedSize}${sizes[i]}`;
 }
-function onUpdate(files, reset = false) {
+function createFileUploadObject(file) {
+  return {
+    file,
+    progress: 0,
+    uploading: false,
+    error: void 0,
+    abortController: void 0
+  };
+}
+async function onFileUpdate(files, reset = false) {
+  const fileUploads = files.map(createFileUploadObject);
   if (props.multiple) {
     if (reset) {
-      modelValue.value = files;
+      modelValue.value = fileUploads;
     } else {
       const existingFiles = modelValue.value || [];
-      modelValue.value = [...existingFiles, ...files || []];
+      modelValue.value = [...existingFiles, ...fileUploads];
     }
   } else {
-    modelValue.value = files?.[0];
+    modelValue.value = fileUploads?.[0];
   }
   const event = new Event("change", { target: { value: modelValue.value } });
   emits("change", event);
   emitFormChange();
   emitFormInput();
+  if (props.autoUpload && props.uploadFn) {
+    await nextTick();
+    const newFiles = props.multiple ? fileUploads : fileUploads[0] ? [fileUploads[0]] : [];
+    for (let i = 0; i < newFiles.length; i++) {
+      const actualIndex = props.multiple && !reset ? (modelValue.value?.length || 0) - newFiles.length + i : i;
+      if (props.multiple) {
+        if (newFiles[i]) {
+          queueUpload(actualIndex, newFiles[i]);
+        }
+      } else {
+        uploadFile(actualIndex);
+      }
+    }
+  }
+}
+function queueUpload(index, fileUpload) {
+  if (!props.multiple) {
+    uploadFile(index);
+    return;
+  }
+  if (activeUploads.value < props.maxConcurrentUploads) {
+    uploadFile(index);
+  } else {
+    uploadQueue.value.push({ index, fileUpload });
+  }
+}
+function processUploadQueue() {
+  while (uploadQueue.value.length > 0 && activeUploads.value < props.maxConcurrentUploads) {
+    const queueItem = uploadQueue.value.shift();
+    if (queueItem) {
+      uploadFile(queueItem.index);
+    }
+  }
 }
 function removeFile(index) {
   if (!modelValue.value) {
     return;
   }
   if (!props.multiple || index === void 0) {
-    onUpdate([], true);
+    const singleFile = modelValue.value;
+    if (singleFile.abortController) {
+      singleFile.abortController.abort();
+    }
+    onFileUpdate([], true);
     return;
   }
   const files = [...modelValue.value];
+  const file = files[index];
+  if (file?.abortController) {
+    file.abortController.abort();
+  }
+  uploadQueue.value = uploadQueue.value.filter((item) => item.index !== index);
   files.splice(index, 1);
-  onUpdate(files, true);
+  onFileUpdate(files.map((f) => f.file), true);
+}
+async function uploadFile(index) {
+  if (!props.uploadFn || !modelValue.value) return;
+  const files = props.multiple ? modelValue.value : [modelValue.value];
+  const fileUpload = files[index];
+  if (!fileUpload || fileUpload.uploading) return;
+  activeUploads.value++;
+  const abortController = new AbortController();
+  fileUpload.abortController = abortController;
+  fileUpload.uploading = true;
+  fileUpload.progress = 0;
+  fileUpload.error = void 0;
+  emits("upload:start", fileUpload, index);
+  const timeoutId = setTimeout(() => {
+    if (!abortController.signal.aborted) {
+      abortController.abort();
+    }
+  }, props.uploadTimeout);
+  try {
+    const result = await props.uploadFn(
+      fileUpload.file,
+      (progress) => {
+        fileUpload.progress = Math.min(100, Math.max(0, progress));
+        emits("upload:progress", fileUpload, fileUpload.progress, index);
+      },
+      abortController.signal
+    );
+    clearTimeout(timeoutId);
+    fileUpload.uploading = false;
+    fileUpload.progress = 100;
+    emits("upload:success", fileUpload, result, index);
+  } catch (error) {
+    clearTimeout(timeoutId);
+    fileUpload.uploading = false;
+    if (abortController.signal.aborted) {
+      emits("upload:cancel", fileUpload, index);
+    } else {
+      fileUpload.error = error instanceof Error ? error.message : "Upload failed";
+      emits("upload:error", fileUpload, fileUpload.error, index);
+    }
+  } finally {
+    fileUpload.abortController = void 0;
+    activeUploads.value--;
+    if (props.multiple) {
+      processUploadQueue();
+    }
+    if (props.multiple && activeUploads.value === 0 && uploadQueue.value.length === 0) {
+      emits("upload:complete", files);
+    }
+  }
+}
+function cancelUpload(index) {
+  if (!modelValue.value) return;
+  const files = props.multiple ? modelValue.value : [modelValue.value];
+  const fileUpload = files[index];
+  if (fileUpload?.abortController) {
+    fileUpload.abortController.abort();
+  }
+  uploadQueue.value = uploadQueue.value.filter((item) => item.index !== index);
+}
+function shouldShowFileProgress(fileUpload) {
+  return shouldShowProgress.value && (fileUpload.uploading || (fileUpload.progress ?? 0) > 0 || !!fileUpload.error);
 }
 watch(modelValue, (newValue) => {
   const hasModelReset = !Array.isArray(newValue) || !newValue.length;
   if (hasModelReset && inputRef.value) {
     inputRef.value.value = "";
+    uploadQueue.value = [];
+    activeUploads.value = 0;
   }
 });
 defineExpose({
   inputRef,
-  dropzoneRef
+  dropzoneRef,
+  uploadFile,
+  cancelUpload,
+  activeUploads: readonly(activeUploads),
+  uploadQueue: readonly(uploadQueue)
 });
 </script>
 
 <template>
   <DefineFilesTemplate>
     <template v-if="modelValue && (Array.isArray(modelValue) ? modelValue.length : true)">
-      <slot name="files-top" :files="modelValue" :open="open" :remove-file="removeFile" />
+      <slot
+        name="files-top"
+        :files="modelValue"
+        :open="open"
+        :remove-file="removeFile"
+        :upload-file="uploadFile"
+        :cancel-upload="cancelUpload"
+      />
 
       <div :class="ui.files({ class: props.ui?.files })">
         <slot name="files" :files="modelValue">
-          <div v-for="(file, index) in Array.isArray(modelValue) ? modelValue : [modelValue]" :key="file.name" :class="ui.file({ class: props.ui?.file })">
-            <slot name="file" :file="file" :index="index">
-              <slot name="file-leading" :file="file" :index="index">
-                <UAvatar :src="createObjectUrl(file)" :icon="fileIcon || appConfig.ui.icons.file" :size="props.size" :class="ui.fileLeadingAvatar({ class: props.ui?.fileLeadingAvatar })" />
+          <div
+            v-for="(fileUpload, index) in Array.isArray(modelValue) ? modelValue : [modelValue]"
+            :key="fileUpload.file.name + index"
+            :class="ui.file({ class: props.ui?.file })"
+          >
+            <slot name="file" :file-upload="fileUpload" :index="index">
+              <slot name="file-leading" :file-upload="fileUpload" :index="index">
+                <UAvatar
+                  :src="createObjectUrl(fileUpload.file)"
+                  :icon="fileIcon || appConfig.ui.icons.file"
+                  :size="props.size"
+                  :class="ui.fileLeadingAvatar({ class: props.ui?.fileLeadingAvatar })"
+                />
               </slot>
 
               <div :class="ui.fileWrapper({ class: props.ui?.fileWrapper })">
                 <span :class="ui.fileName({ class: props.ui?.fileName })">
-                  <slot name="file-name" :file="file" :index="index">
-                    {{ file.name }}
+                  <slot name="file-name" :file-upload="fileUpload" :index="index">
+                    {{ fileUpload.file.name }}
                   </slot>
                 </span>
 
                 <span :class="ui.fileSize({ class: props.ui?.fileSize })">
-                  <slot name="file-size" :file="file" :index="index">
-                    {{ formatFileSize(file.size) }}
+                  <slot name="file-size" :file-upload="fileUpload" :index="index">
+                    {{ formatFileSize(fileUpload.file.size) }}
                   </slot>
                 </span>
+
+                <!-- Progress bar - Now shows automatically when autoUpload is true -->
+                <div
+                  v-if="shouldShowFileProgress(fileUpload)"
+                  :class="ui.fileProgress({ class: props.ui?.fileProgress })"
+                >
+                  <slot name="file-progress" :file-upload="fileUpload" :index="index">
+                    <UProgress
+                      :model-value="fileUpload.progress || 0"
+                      :color="fileUpload.error ? 'error' : color"
+                      :size="size === 'xs' ? 'xs' : 'sm'"
+                    />
+                    <span :class="ui.fileProgressText({ class: props.ui?.fileProgressText })">
+                      {{ Math.round(fileUpload.progress || 0) }}%
+                    </span>
+                  </slot>
+                </div>
+
+                <!-- Error message -->
+                <div v-if="fileUpload.error" :class="ui.fileError({ class: props.ui?.fileError })">
+                  {{ fileUpload.error }}
+                </div>
+
+                <!-- Upload status indicator -->
+                <div v-if="autoUpload && fileUpload.uploading" class="text-xs text-gray-500 mt-1">
+                  Uploading...
+                </div>
               </div>
 
-              <slot name="file-trailing" :file="file" :index="index">
-                <UButton
-                  color="neutral"
-                  v-bind="{
+              <slot name="file-trailing" :file-upload="fileUpload" :index="index">
+                <div :class="ui.fileActions({ class: props.ui?.fileActions })">
+                  <!-- Upload button (if not auto-upload and uploadFn provided) -->
+                  <UButton
+                    v-if="uploadFn && !autoUpload && !fileUpload.uploading && !(fileUpload.progress ?? 0)"
+                    color="primary"
+                    variant="ghost"
+                    :size="layout === 'grid' ? 'xs' : size"
+                    :trailing-icon="appConfig.ui.icons.upload || 'i-lucide-upload'"
+                    :class="ui.fileUploadButton({ class: props.ui?.fileUploadButton })"
+                    @click.stop.prevent="uploadFile(index)"
+                  />
+
+                  <!-- Cancel button (during upload) -->
+                  <UButton
+                    v-if="allowCancel && fileUpload.uploading"
+                    color="neutral"
+                    variant="ghost"
+                    :size="layout === 'grid' ? 'xs' : size"
+                    :trailing-icon="appConfig.ui.icons.close || 'i-lucide-x'"
+                    :class="ui.fileCancelButton({ class: props.ui?.fileCancelButton })"
+                    @click.stop.prevent="cancelUpload(index)"
+                  />
+
+                  <!-- Delete button -->
+                  <UButton
+                    v-if="!fileUpload.uploading"
+                    color="neutral"
+                    v-bind="{
   ...layout === 'grid' ? {
     variant: 'solid',
     size: 'xs'
@@ -170,22 +371,30 @@ defineExpose({
   },
   ...typeof fileDelete === 'object' ? fileDelete : void 0
 }"
-                  :trailing-icon="fileDeleteIcon || appConfig.ui.icons.close"
-                  :class="ui.fileTrailingButton({ class: props.ui?.fileTrailingButton })"
-                  @click.stop.prevent="removeFile(index)"
-                />
+                    :trailing-icon="fileDeleteIcon || appConfig.ui.icons.close"
+                    :class="ui.fileTrailingButton({ class: props.ui?.fileTrailingButton })"
+                    @click.stop.prevent="removeFile(index)"
+                  />
+                </div>
               </slot>
             </slot>
           </div>
         </slot>
       </div>
 
-      <slot name="files-bottom" :files="modelValue" :open="open" :remove-file="removeFile" />
+      <slot
+        name="files-bottom"
+        :files="modelValue"
+        :open="open"
+        :remove-file="removeFile"
+        :upload-file="uploadFile"
+        :cancel-upload="cancelUpload"
+      />
     </template>
   </DefineFilesTemplate>
 
   <Primitive :as="as" :class="ui.root({ class: [props.ui?.root, props.class] })">
-    <slot :open="open" :remove-file="removeFile">
+    <slot :open="open" :remove-file="removeFile" :upload-file="uploadFile" :cancel-upload="cancelUpload">
       <component
         :is="variant === 'button' ? 'button' : 'div'"
         ref="dropzoneRef"
@@ -197,10 +406,22 @@ defineExpose({
       >
         <ReuseFilesTemplate v-if="position === 'inside'" />
 
-        <div v-if="position === 'inside' ? multiple ? !modelValue?.length : !modelValue : true" :class="ui.wrapper({ class: props.ui?.wrapper })">
+        <div
+          v-if="position === 'inside' ? multiple ? !modelValue?.length : !modelValue : true"
+          :class="ui.wrapper({ class: props.ui?.wrapper })"
+        >
           <slot name="leading">
-            <UIcon v-if="variant === 'button'" :name="icon || appConfig.ui.icons.upload" :class="ui.icon({ class: props.ui?.icon })" />
-            <UAvatar v-else :icon="icon || appConfig.ui.icons.upload" :size="props.size" :class="ui.avatar({ class: props.ui?.avatar })" />
+            <UIcon
+              v-if="variant === 'button'"
+              :name="icon || appConfig.ui.icons.upload"
+              :class="ui.icon({ class: props.ui?.icon })"
+            />
+            <UAvatar
+              v-else
+              :icon="icon || appConfig.ui.icons.upload"
+              :size="props.size"
+              :class="ui.avatar({ class: props.ui?.avatar })"
+            />
           </slot>
 
           <template v-if="variant !== 'button'">
@@ -216,7 +437,14 @@ defineExpose({
             </div>
 
             <div v-if="!!slots.actions" :class="ui.actions({ class: props.ui?.actions })">
-              <slot name="actions" :files="modelValue" :open="open" :remove-file="removeFile" />
+              <slot
+                name="actions"
+                :files="modelValue"
+                :open="open"
+                :remove-file="removeFile"
+                :upload-file="uploadFile"
+                :cancel-upload="cancelUpload"
+              />
             </div>
           </template>
         </div>

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

@@ -4,6 +4,13 @@ import theme from '#build/ui/file-upload';
 import type { ButtonProps } from '../types';
 import type { ComponentConfig } from '../types/utils';
 type FileUpload = ComponentConfig<typeof theme, AppConfig, 'fileUpload'>;
+export interface FileUploadFile {
+    file: File;
+    progress?: number;
+    uploading?: boolean;
+    error?: string;
+    abortController?: AbortController;
+}
 export interface FileUploadProps<M extends boolean = false> {
     /**
      * The element or component this component should render as.
@@ -89,18 +96,55 @@ export interface FileUploadProps<M extends boolean = false> {
      * @IconifyIcon
      */
     fileDeleteIcon?: string;
+    /**
+     * Enable upload progress tracking
+     * @defaultValue false
+     */
+    showProgress?: boolean;
+    /**
+     * Allow cancelling uploads in progress
+     * @defaultValue true
+     */
+    allowCancel?: boolean;
+    /**
+     * Upload function that returns a promise with progress callback
+     */
+    uploadFn?: (file: File, onProgress: (progress: number) => void, signal?: AbortSignal) => Promise<any>;
+    /**
+     * Auto-start upload when files are selected
+     * @defaultValue false
+     */
+    autoUpload?: boolean;
+    /**
+     * Upload timeout in milliseconds
+     * @defaultValue 30000
+     */
+    uploadTimeout?: number;
+    /**
+     * Max concurrent uploads when multiple is true
+     * @defaultValue 3
+     */
+    maxConcurrentUploads?: number;
     class?: any;
     ui?: FileUpload['slots'];
 }
 export interface FileUploadEmits<M extends boolean = false> {
-    'update:modelValue': [payload: M extends true ? File[] : File | null];
+    'update:modelValue': [payload: M extends true ? FileUploadFile[] : FileUploadFile | null];
     'change': [event: Event];
+    'upload:start': [file: FileUploadFile, index: number];
+    'upload:progress': [file: FileUploadFile, progress: number, index: number];
+    'upload:success': [file: FileUploadFile, result: any, index: number];
+    'upload:error': [file: FileUploadFile, error: string, index: number];
+    'upload:cancel': [file: FileUploadFile, index: number];
+    'upload:complete': [files: FileUploadFile[]];
 }
-type FileUploadFiles<M> = (M extends true ? File[] : File) | null;
+type FileUploadFiles<M> = (M extends true ? FileUploadFile[] : FileUploadFile) | null;
 export interface FileUploadSlots<M extends boolean = false> {
     'default'(props: {
         open: UseFileDialogReturn['open'];
         removeFile: (index?: number) => void;
+        uploadFile: (index: number) => void;
+        cancelUpload: (index: number) => void;
     }): any;
     'leading'(props?: {}): any;
     'label'(props?: {}): any;
@@ -109,6 +153,8 @@ export interface FileUploadSlots<M extends boolean = false> {
         files?: FileUploadFiles<M>;
         open: UseFileDialogReturn['open'];
         removeFile: (index?: number) => void;
+        uploadFile: (index: number) => void;
+        cancelUpload: (index: number) => void;
     }): any;
     'files'(props: {
         files?: FileUploadFiles<M>;
@@ -117,30 +163,38 @@ export interface FileUploadSlots<M extends boolean = false> {
         files?: FileUploadFiles<M>;
         open: UseFileDialogReturn['open'];
         removeFile: (index?: number) => void;
+        uploadFile: (index: number) => void;
+        cancelUpload: (index: number) => void;
     }): any;
     'files-bottom'(props: {
         files?: FileUploadFiles<M>;
         open: UseFileDialogReturn['open'];
         removeFile: (index?: number) => void;
+        uploadFile: (index: number) => void;
+        cancelUpload: (index: number) => void;
     }): any;
     'file'(props: {
-        file: File;
+        fileUpload: FileUploadFile;
         index: number;
     }): any;
     'file-leading'(props: {
-        file: File;
+        fileUpload: FileUploadFile;
         index: number;
     }): any;
     'file-name'(props: {
-        file: File;
+        fileUpload: FileUploadFile;
         index: number;
     }): any;
     'file-size'(props: {
-        file: File;
+        fileUpload: FileUploadFile;
+        index: number;
+    }): any;
+    'file-progress'(props: {
+        fileUpload: FileUploadFile;
         index: number;
     }): any;
     'file-trailing'(props: {
-        file: File;
+        fileUpload: FileUploadFile;
         index: number;
     }): any;
 }
@@ -148,16 +202,160 @@ declare const _default: <M extends boolean = false>(__VLS_props: NonNullable<Awa
     props: __VLS_PrettifyLocal<Pick<Partial<{}> & Omit<{
         readonly onChange?: ((event: Event) => any) | undefined;
         readonly "onUpdate:modelValue"?: ((...args: unknown[]) => any) | undefined;
-    } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, never>, "onChange" | "onUpdate:modelValue"> & (FileUploadProps<M> & {
-        modelValue?: (M extends true ? File[] : File) | null;
+        readonly "onUpload:start"?: ((file: FileUploadFile, index: number) => any) | undefined;
+        readonly "onUpload:progress"?: ((file: FileUploadFile, progress: number, index: number) => any) | undefined;
+        readonly "onUpload:success"?: ((file: FileUploadFile, result: any, index: number) => any) | undefined;
+        readonly "onUpload:error"?: ((file: FileUploadFile, error: string, index: number) => any) | undefined;
+        readonly "onUpload:cancel"?: ((file: FileUploadFile, index: number) => any) | undefined;
+        readonly "onUpload:complete"?: ((files: FileUploadFile[]) => any) | undefined;
+    } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, never>, "onChange" | "onUpdate:modelValue" | "onUpload:start" | "onUpload:progress" | "onUpload:success" | "onUpload:error" | "onUpload:cancel" | "onUpload:complete"> & (FileUploadProps<M> & {
+        modelValue?: (M extends true ? FileUploadFile[] : FileUploadFile) | null;
     }) & Partial<{}>> & import("vue").PublicProps;
     expose(exposed: import("vue").ShallowUnwrapRef<{
         inputRef: import("vue").Ref<HTMLInputElement | undefined, HTMLInputElement | undefined>;
         dropzoneRef: import("vue").Ref<HTMLDivElement | undefined, HTMLDivElement | undefined>;
+        uploadFile: (index: number) => Promise<void>;
+        cancelUpload: (index: number) => void;
+        activeUploads: Readonly<import("vue").Ref<number, number>>;
+        uploadQueue: Readonly<import("vue").Ref<readonly {
+            readonly index: number;
+            readonly fileUpload: {
+                readonly file: {
+                    readonly lastModified: number;
+                    readonly name: string;
+                    readonly webkitRelativePath: string;
+                    readonly size: number;
+                    readonly type: string;
+                    readonly arrayBuffer: {
+                        (): Promise<ArrayBuffer>;
+                        (): Promise<ArrayBuffer>;
+                    };
+                    readonly bytes: {
+                        (): Promise<Uint8Array>;
+                        (): Promise<Uint8Array>;
+                    };
+                    readonly slice: {
+                        (start?: number, end?: number, contentType?: string): Blob;
+                        (start?: number, end?: number, contentType?: string): Blob;
+                    };
+                    readonly stream: {
+                        (): ReadableStream<Uint8Array>;
+                        (): ReadableStream<Uint8Array>;
+                    };
+                    readonly text: {
+                        (): Promise<string>;
+                        (): Promise<string>;
+                    };
+                };
+                readonly progress?: number | undefined;
+                readonly uploading?: boolean | undefined;
+                readonly error?: string | undefined;
+                readonly abortController?: {
+                    readonly signal: {
+                        readonly aborted: boolean;
+                        readonly onabort: ((this: AbortSignal, ev: Event) => any) | null;
+                        readonly reason: any;
+                        readonly throwIfAborted: {
+                            (): void;
+                            (): void;
+                            (): void;
+                        };
+                        readonly addEventListener: {
+                            <K extends keyof AbortSignalEventMap>(type: K, listener: (this: AbortSignal, ev: AbortSignalEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+                            (type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
+                            <K extends keyof AbortSignalEventMap>(type: K, listener: (this: AbortSignal, ev: AbortSignalEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+                            (type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
+                        };
+                        readonly removeEventListener: {
+                            <K extends keyof AbortSignalEventMap>(type: K, listener: (this: AbortSignal, ev: AbortSignalEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+                            (type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
+                            <K extends keyof AbortSignalEventMap>(type: K, listener: (this: AbortSignal, ev: AbortSignalEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+                            (type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
+                        };
+                        readonly dispatchEvent: {
+                            (event: Event): boolean;
+                            (event: Event): boolean;
+                        };
+                    };
+                    readonly abort: {
+                        (reason?: any): void;
+                        (reason?: any): void;
+                        (reason?: any): void;
+                    };
+                } | undefined;
+            };
+        }[], readonly {
+            readonly index: number;
+            readonly fileUpload: {
+                readonly file: {
+                    readonly lastModified: number;
+                    readonly name: string;
+                    readonly webkitRelativePath: string;
+                    readonly size: number;
+                    readonly type: string;
+                    readonly arrayBuffer: {
+                        (): Promise<ArrayBuffer>;
+                        (): Promise<ArrayBuffer>;
+                    };
+                    readonly bytes: {
+                        (): Promise<Uint8Array>;
+                        (): Promise<Uint8Array>;
+                    };
+                    readonly slice: {
+                        (start?: number, end?: number, contentType?: string): Blob;
+                        (start?: number, end?: number, contentType?: string): Blob;
+                    };
+                    readonly stream: {
+                        (): ReadableStream<Uint8Array>;
+                        (): ReadableStream<Uint8Array>;
+                    };
+                    readonly text: {
+                        (): Promise<string>;
+                        (): Promise<string>;
+                    };
+                };
+                readonly progress?: number | undefined;
+                readonly uploading?: boolean | undefined;
+                readonly error?: string | undefined;
+                readonly abortController?: {
+                    readonly signal: {
+                        readonly aborted: boolean;
+                        readonly onabort: ((this: AbortSignal, ev: Event) => any) | null;
+                        readonly reason: any;
+                        readonly throwIfAborted: {
+                            (): void;
+                            (): void;
+                            (): void;
+                        };
+                        readonly addEventListener: {
+                            <K extends keyof AbortSignalEventMap>(type: K, listener: (this: AbortSignal, ev: AbortSignalEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+                            (type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
+                            <K extends keyof AbortSignalEventMap>(type: K, listener: (this: AbortSignal, ev: AbortSignalEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+                            (type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
+                        };
+                        readonly removeEventListener: {
+                            <K extends keyof AbortSignalEventMap>(type: K, listener: (this: AbortSignal, ev: AbortSignalEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+                            (type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
+                            <K extends keyof AbortSignalEventMap>(type: K, listener: (this: AbortSignal, ev: AbortSignalEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+                            (type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
+                        };
+                        readonly dispatchEvent: {
+                            (event: Event): boolean;
+                            (event: Event): boolean;
+                        };
+                    };
+                    readonly abort: {
+                        (reason?: any): void;
+                        (reason?: any): void;
+                        (reason?: any): void;
+                    };
+                } | undefined;
+            };
+        }[]>>;
     }>): void;
     attrs: any;
     slots: FileUploadSlots<M>;
-    emit: (((evt: "change", event: Event) => void) & ((evt: "update:modelValue", payload: M extends true ? File[] : File | null) => void)) & ((evt: "update:modelValue", value: (M extends true ? File[] : File) | null | undefined) => void);
+    emit: (((evt: "change", event: Event) => void) & ((evt: "update:modelValue", payload: M extends true ? FileUploadFile[] : FileUploadFile | null) => void) & ((evt: "upload:start", file: FileUploadFile, index: number) => void) & ((evt: "upload:progress", file: FileUploadFile, progress: number, index: number) => void) & ((evt: "upload:success", file: FileUploadFile, result: any, index: number) => void) & ((evt: "upload:error", file: FileUploadFile, error: string, index: number) => void) & ((evt: "upload:cancel", file: FileUploadFile, index: number) => void) & ((evt: "upload:complete", files: FileUploadFile[]) => void)) & ((evt: "update:modelValue", value: (M extends true ? FileUploadFile[] : FileUploadFile) | null | undefined) => void);
 }>) => import("vue").VNode & {
     __ctx?: Awaited<typeof __VLS_setup>;
 };

package/dist/shared/{ui.CgUuvRXi.mjs → ui.DdcmBFzX.mjs}

@@ -2367,7 +2367,13 @@ const fileUpload = (options) => ({
     fileWrapper: "flex flex-col min-w-0",
     fileName: "text-default truncate",
     fileSize: "text-muted truncate",
-    fileTrailingButton: ""
+    fileProgress: "flex items-center gap-2 mt-1",
+    fileProgressText: "text-xs text-muted whitespace-nowrap",
+    fileError: "text-xs text-red-500 mt-1",
+    fileActions: "flex items-center gap-1",
+    fileTrailingButton: "",
+    fileUploadButton: "",
+    fileCancelButton: ""
   },
   variants: {
     color: {
@@ -2416,12 +2422,15 @@ const fileUpload = (options) => ({
         root: "gap-2 items-start",
         files: "flex flex-col w-full gap-2",
         file: "min-w-0 flex items-center border border-default rounded-md w-full",
-        fileTrailingButton: "ms-auto"
+        fileActions: "ms-auto"
       },
       grid: {
         fileWrapper: "hidden",
         fileLeadingAvatar: "size-full rounded-lg",
-        fileTrailingButton: "absolute -top-1.5 -end-1.5 p-0 rounded-full border-2 border-bg"
+        fileActions: "absolute -top-1.5 -end-1.5",
+        fileTrailingButton: "p-0 rounded-full border-2 border-bg",
+        fileUploadButton: "p-0 rounded-full border-2 border-bg",
+        fileCancelButton: "p-0 rounded-full border-2 border-bg"
       }
     },
     position: {
@@ -2442,6 +2451,9 @@ const fileUpload = (options) => ({
     },
     disabled: {
       true: "cursor-not-allowed opacity-75"
+    },
+    showProgress: {
+      true: ""
     }
   },
   compoundVariants: [...(options.theme.colors || []).map((color) => ({
@@ -2462,31 +2474,31 @@ const fileUpload = (options) => ({
     size: "xs",
     layout: "list",
     class: {
-      fileTrailingButton: "-me-1"
+      fileActions: "-me-1"
     }
   }, {
     size: "sm",
     layout: "list",
     class: {
-      fileTrailingButton: "-me-1.5"
+      fileActions: "-me-1.5"
     }
   }, {
     size: "md",
     layout: "list",
     class: {
-      fileTrailingButton: "-me-1.5"
+      fileActions: "-me-1.5"
     }
   }, {
     size: "lg",
     layout: "list",
     class: {
-      fileTrailingButton: "-me-2"
+      fileActions: "-me-2"
     }
   }, {
     size: "xl",
     layout: "list",
     class: {
-      fileTrailingButton: "-me-2"
+      fileActions: "-me-2"
     }
   }, {
     variant: "button",
@@ -2535,6 +2547,21 @@ const fileUpload = (options) => ({
     interactive: true,
     disabled: false,
     class: "hover:bg-elevated/25"
+  }, {
+    showProgress: true,
+    layout: "list",
+    class: {
+      fileWrapper: "flex-col",
+      fileProgress: "w-full"
+    }
+  }, {
+    showProgress: true,
+    layout: "grid",
+    class: {
+      fileWrapper: "absolute inset-0 bg-black/50 flex flex-col items-center justify-center rounded-lg",
+      fileProgress: "w-3/4",
+      fileProgressText: "text-white font-medium"
+    }
   }],
   defaultVariants: {
     color: "primary",

package/dist/unplugin.mjs

@@ -3,7 +3,7 @@ import { join, normalize } from 'pathe';
 import { createUnplugin } from 'unplugin';
 import { defu } from 'defu';
 import tailwind from '@tailwindcss/vite';
-import { g as getTemplates, d as defaultOptions, r as resolveColors, a as getDefaultUiConfig } from './shared/ui.CgUuvRXi.mjs';
+import { g as getTemplates, d as defaultOptions, r as resolveColors, a as getDefaultUiConfig } from './shared/ui.DdcmBFzX.mjs';
 import { globSync } from 'tinyglobby';
 import { genSafeVariableName } from 'knitwork';
 import MagicString from 'magic-string';

package/dist/vite.mjs

@@ -4,7 +4,7 @@ import 'pathe';
 import 'unplugin';
 import 'defu';
 import '@tailwindcss/vite';
-import './shared/ui.CgUuvRXi.mjs';
+import './shared/ui.DdcmBFzX.mjs';
 import '../dist/runtime/utils/index.js';
 import 'scule';
 import '@nuxt/kit';

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@eslamdevui/ui",
   "description": "A UI Library for Modern Web Apps, powered by Vue & Tailwind CSS.",
-  "version": "3.3.2-beta.1",
+  "version": "3.3.2-beta.2",
   "packageManager": "pnpm@10.13.1",
   "repository": {
     "type": "git",