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

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

@@ -50,13 +50,7 @@ export default {
     "fileWrapper": "flex flex-col min-w-0",
     "fileName": "text-default truncate",
     "fileSize": "text-muted truncate",
-    "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": ""
+    "fileTrailingButton": ""
   },
   "variants": {
     "color": {
@@ -110,15 +104,12 @@ 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",
-        "fileActions": "ms-auto"
+        "fileTrailingButton": "ms-auto"
       },
       "grid": {
         "fileWrapper": "hidden",
         "fileLeadingAvatar": "size-full rounded-lg",
-        "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"
+        "fileTrailingButton": "absolute -top-1.5 -end-1.5 p-0 rounded-full border-2 border-bg"
       }
     },
     "position": {
@@ -139,9 +130,6 @@ export default {
     },
     "disabled": {
       "true": "cursor-not-allowed opacity-75"
-    },
-    "showProgress": {
-      "true": ""
     }
   },
   "compoundVariants": [
@@ -212,35 +200,35 @@ export default {
       "size": "xs" as typeof size[number],
       "layout": "list" as typeof layout[number],
       "class": {
-        "fileActions": "-me-1"
+        "fileTrailingButton": "-me-1"
       }
     },
     {
       "size": "sm" as typeof size[number],
       "layout": "list" as typeof layout[number],
       "class": {
-        "fileActions": "-me-1.5"
+        "fileTrailingButton": "-me-1.5"
       }
     },
     {
       "size": "md" as typeof size[number],
       "layout": "list" as typeof layout[number],
       "class": {
-        "fileActions": "-me-1.5"
+        "fileTrailingButton": "-me-1.5"
       }
     },
     {
       "size": "lg" as typeof size[number],
       "layout": "list" as typeof layout[number],
       "class": {
-        "fileActions": "-me-2"
+        "fileTrailingButton": "-me-2"
       }
     },
     {
       "size": "xl" as typeof size[number],
       "layout": "list" as typeof layout[number],
       "class": {
-        "fileActions": "-me-2"
+        "fileTrailingButton": "-me-2"
       }
     },
     {
@@ -297,23 +285,6 @@ 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.2",
+  "version": "3.3.2-beta.3",
   "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.DdcmBFzX.mjs';
+import { d as defaultOptions, r as resolveColors, a as getDefaultUiConfig, b as addTemplates } from './shared/ui.CgUuvRXi.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.2";
+const version = "3.3.2-beta.3";
 
 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, ref, nextTick, readonly } from "vue";
+import { computed, watch } from "vue";
 import { Primitive } from "reka-ui";
 import { createReusableTemplate } from "@vueuse/core";
 import { useAppConfig } from "#imports";
@@ -13,7 +13,6 @@ 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 },
@@ -38,28 +37,20 @@ 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", "upload:start", "upload:progress", "upload:success", "upload:error", "upload:cancel", "upload:complete"]);
+const emits = defineEmits(["update:modelValue", "change"]);
 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: onFileUpdate
+  onUpdate
 });
 const { emitFormInput, emitFormChange, id, name, disabled, ariaAttrs } = useFormField(props);
 const variant = computed(() => props.multiple ? "area" : props.variant);
@@ -73,9 +64,6 @@ 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,
@@ -86,8 +74,7 @@ const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.fileUpload ||
   position: position.value,
   multiple: props.multiple,
   highlight: props.highlight,
-  disabled: props.disabled,
-  showProgress: shouldShowProgress.value
+  disabled: props.disabled
 }));
 function createObjectUrl(file) {
   return URL.createObjectURL(file);
@@ -103,265 +90,77 @@ function formatFileSize(bytes) {
   const formattedSize = i === 0 ? size.toString() : size.toFixed(0);
   return `${formattedSize}${sizes[i]}`;
 }
-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);
+function onUpdate(files, reset = false) {
   if (props.multiple) {
     if (reset) {
-      modelValue.value = fileUploads;
+      modelValue.value = files;
     } else {
       const existingFiles = modelValue.value || [];
-      modelValue.value = [...existingFiles, ...fileUploads];
+      modelValue.value = [...existingFiles, ...files || []];
     }
   } else {
-    modelValue.value = fileUploads?.[0];
+    modelValue.value = files?.[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) {
-    const singleFile = modelValue.value;
-    if (singleFile.abortController) {
-      singleFile.abortController.abort();
-    }
-    onFileUpdate([], true);
+    onUpdate([], 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);
-  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);
+  onUpdate(files, true);
 }
 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,
-  uploadFile,
-  cancelUpload,
-  activeUploads: readonly(activeUploads),
-  uploadQueue: readonly(uploadQueue)
+  dropzoneRef
 });
 </script>
 
 <template>
   <DefineFilesTemplate>
     <template v-if="modelValue && (Array.isArray(modelValue) ? modelValue.length : true)">
-      <slot
-        name="files-top"
-        :files="modelValue"
-        :open="open"
-        :remove-file="removeFile"
-        :upload-file="uploadFile"
-        :cancel-upload="cancelUpload"
-      />
+      <slot name="files-top" :files="modelValue" :open="open" :remove-file="removeFile" />
 
       <div :class="ui.files({ class: props.ui?.files })">
         <slot name="files" :files="modelValue">
-          <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 })"
-                />
+          <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 })" />
               </slot>
 
               <div :class="ui.fileWrapper({ class: props.ui?.fileWrapper })">
                 <span :class="ui.fileName({ class: props.ui?.fileName })">
-                  <slot name="file-name" :file-upload="fileUpload" :index="index">
-                    {{ fileUpload.file.name }}
+                  <slot name="file-name" :file="file" :index="index">
+                    {{ file.name }}
                   </slot>
                 </span>
 
                 <span :class="ui.fileSize({ class: props.ui?.fileSize })">
-                  <slot name="file-size" :file-upload="fileUpload" :index="index">
-                    {{ formatFileSize(fileUpload.file.size) }}
+                  <slot name="file-size" :file="file" :index="index">
+                    {{ formatFileSize(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-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="{
+              <slot name="file-trailing" :file="file" :index="index">
+                <UButton
+                  color="neutral"
+                  v-bind="{
   ...layout === 'grid' ? {
     variant: 'solid',
     size: 'xs'
@@ -371,30 +170,22 @@ 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)"
-                  />
-                </div>
+                  :trailing-icon="fileDeleteIcon || appConfig.ui.icons.close"
+                  :class="ui.fileTrailingButton({ class: props.ui?.fileTrailingButton })"
+                  @click.stop.prevent="removeFile(index)"
+                />
               </slot>
             </slot>
           </div>
         </slot>
       </div>
 
-      <slot
-        name="files-bottom"
-        :files="modelValue"
-        :open="open"
-        :remove-file="removeFile"
-        :upload-file="uploadFile"
-        :cancel-upload="cancelUpload"
-      />
+      <slot name="files-bottom" :files="modelValue" :open="open" :remove-file="removeFile" />
     </template>
   </DefineFilesTemplate>
 
   <Primitive :as="as" :class="ui.root({ class: [props.ui?.root, props.class] })">
-    <slot :open="open" :remove-file="removeFile" :upload-file="uploadFile" :cancel-upload="cancelUpload">
+    <slot :open="open" :remove-file="removeFile">
       <component
         :is="variant === 'button' ? 'button' : 'div'"
         ref="dropzoneRef"
@@ -406,22 +197,10 @@ 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'">
@@ -437,14 +216,7 @@ defineExpose({
             </div>
 
             <div v-if="!!slots.actions" :class="ui.actions({ class: props.ui?.actions })">
-              <slot
-                name="actions"
-                :files="modelValue"
-                :open="open"
-                :remove-file="removeFile"
-                :upload-file="uploadFile"
-                :cancel-upload="cancelUpload"
-              />
+              <slot name="actions" :files="modelValue" :open="open" :remove-file="removeFile" />
             </div>
           </template>
         </div>

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

@@ -4,13 +4,6 @@ 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.
@@ -96,55 +89,18 @@ 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 ? FileUploadFile[] : FileUploadFile | null];
+    'update:modelValue': [payload: M extends true ? File[] : File | 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 ? FileUploadFile[] : FileUploadFile) | null;
+type FileUploadFiles<M> = (M extends true ? File[] : File) | 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;
@@ -153,8 +109,6 @@ 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>;
@@ -163,38 +117,30 @@ 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: {
-        fileUpload: FileUploadFile;
+        file: File;
         index: number;
     }): any;
     'file-leading'(props: {
-        fileUpload: FileUploadFile;
+        file: File;
         index: number;
     }): any;
     'file-name'(props: {
-        fileUpload: FileUploadFile;
+        file: File;
         index: number;
     }): any;
     'file-size'(props: {
-        fileUpload: FileUploadFile;
-        index: number;
-    }): any;
-    'file-progress'(props: {
-        fileUpload: FileUploadFile;
+        file: File;
         index: number;
     }): any;
     'file-trailing'(props: {
-        fileUpload: FileUploadFile;
+        file: File;
         index: number;
     }): any;
 }
@@ -202,160 +148,16 @@ 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;
-        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;
+    } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, never>, "onChange" | "onUpdate:modelValue"> & (FileUploadProps<M> & {
+        modelValue?: (M extends true ? File[] : File) | 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 ? 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);
+    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);
 }>) => import("vue").VNode & {
     __ctx?: Awaited<typeof __VLS_setup>;
 };

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

@@ -2367,13 +2367,7 @@ const fileUpload = (options) => ({
     fileWrapper: "flex flex-col min-w-0",
     fileName: "text-default truncate",
     fileSize: "text-muted truncate",
-    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: ""
+    fileTrailingButton: ""
   },
   variants: {
     color: {
@@ -2422,15 +2416,12 @@ 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",
-        fileActions: "ms-auto"
+        fileTrailingButton: "ms-auto"
       },
       grid: {
         fileWrapper: "hidden",
         fileLeadingAvatar: "size-full rounded-lg",
-        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"
+        fileTrailingButton: "absolute -top-1.5 -end-1.5 p-0 rounded-full border-2 border-bg"
       }
     },
     position: {
@@ -2451,9 +2442,6 @@ const fileUpload = (options) => ({
     },
     disabled: {
       true: "cursor-not-allowed opacity-75"
-    },
-    showProgress: {
-      true: ""
     }
   },
   compoundVariants: [...(options.theme.colors || []).map((color) => ({
@@ -2474,31 +2462,31 @@ const fileUpload = (options) => ({
     size: "xs",
     layout: "list",
     class: {
-      fileActions: "-me-1"
+      fileTrailingButton: "-me-1"
     }
   }, {
     size: "sm",
     layout: "list",
     class: {
-      fileActions: "-me-1.5"
+      fileTrailingButton: "-me-1.5"
     }
   }, {
     size: "md",
     layout: "list",
     class: {
-      fileActions: "-me-1.5"
+      fileTrailingButton: "-me-1.5"
     }
   }, {
     size: "lg",
     layout: "list",
     class: {
-      fileActions: "-me-2"
+      fileTrailingButton: "-me-2"
     }
   }, {
     size: "xl",
     layout: "list",
     class: {
-      fileActions: "-me-2"
+      fileTrailingButton: "-me-2"
     }
   }, {
     variant: "button",
@@ -2547,21 +2535,6 @@ 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.DdcmBFzX.mjs';
+import { g as getTemplates, d as defaultOptions, r as resolveColors, a as getDefaultUiConfig } from './shared/ui.CgUuvRXi.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.DdcmBFzX.mjs';
+import './shared/ui.CgUuvRXi.mjs';
 import '../dist/runtime/utils/index.js';
 import 'scule';
 import '@nuxt/kit';

package/package.json

@@ -1,18 +1,15 @@
 {
   "name": "@eslamdevui/ui",
   "description": "A UI Library for Modern Web Apps, powered by Vue & Tailwind CSS.",
-  "version": "3.3.2-beta.2",
+  "version": "3.3.2-beta.3",
   "packageManager": "pnpm@10.13.1",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/MohamedEslam04/ui.git"
   },
-  "homepage": "https://ui.nuxt.com",
+  "homepage": "https://ui.nuxt.com/pro",
   "type": "module",
   "license": "MIT",
-  "publishConfig": {
-    "access": "public"
-  },
   "exports": {
     ".": {
       "types": "./dist/module.d.mts",
@@ -135,7 +132,7 @@
     "colortranslator": "^5.0.0",
     "consola": "^3.4.2",
     "defu": "^6.1.4",
-    "dotenv": "^16.5.0",
+    "dotenv": "^16.6.1",
     "embla-carousel-auto-height": "^8.6.0",
     "embla-carousel-auto-scroll": "^8.6.0",
     "embla-carousel-autoplay": "^8.6.0",
@@ -145,6 +142,7 @@
     "embla-carousel-wheel-gestures": "^8.0.2",
     "fuse.js": "^7.1.0",
     "git-url-parse": "^16.1.0",
+    "motion-v": "^1.5.0",
     "hookable": "^5.5.3",
     "knitwork": "^1.2.0",
     "magic-string": "^0.30.17",
@@ -152,26 +150,27 @@
     "ofetch": "^1.4.1",
     "ohash": "^2.0.11",
     "pathe": "^2.0.3",
-    "pkg-types": "^2.1.0",
+    "pkg-types": "^2.2.0",
     "reka-ui": "2.3.2",
     "scule": "^1.3.0",
     "tailwind-variants": "^1.0.0",
     "tailwindcss": "^4.1.11",
     "tinyglobby": "^0.2.14",
     "unplugin": "^2.3.5",
-    "unplugin-auto-import": "^19.3.0",
-    "unplugin-vue-components": "^28.8.0",
+    "unplugin-auto-import": "^20.0.0",
+    "unplugin-vue-components": "^29.0.0",
     "vaul-vue": "0.4.1",
-    "vue-component-type-helpers": "^2.2.10"
+    "vue-component-type-helpers": "^3.0.5"
   },
   "devDependencies": {
+    "@nuxt/content": "^3.6.3",
     "@nuxt/eslint-config": "^1.6.0",
     "@nuxt/module-builder": "^1.0.1",
     "@nuxt/test-utils": "^3.19.2",
     "@release-it/conventional-changelog": "^10.0.1",
     "@vue/compiler-sfc": "3.5.17",
     "@vue/test-utils": "^2.4.6",
-    "better-sqlite3": "^12.0.0",
+    "better-sqlite3": "^12.2.0",
     "embla-carousel": "^8.6.0",
     "eslint": "^9.31.0",
     "happy-dom": "^18.0.1",