@webdevarif/dashui 0.2.2 → 0.2.4

package/dist/index.d.mts

@@ -367,7 +367,6 @@ interface MediaPickerDialogProps {
     folders?: MediaPickerDialogFolder[];
     loading?: boolean;
     total: number;
-    uploads?: UploadItem[];
     typeFilter?: string;
     onTypeChange?: (type: string) => void;
     search?: string;
@@ -378,11 +377,12 @@ interface MediaPickerDialogProps {
     onLoadMore?: () => void;
     hasMore?: boolean;
     multiple?: boolean;
+    initialSelected?: string[];
     /** "images" = only show image type tabs; "all" = show all type tabs */
     accept?: "images" | "all";
     onSelect: (files: MediaCardFile[]) => void;
 }
-declare function MediaPickerDialog({ open, onOpenChange, title, files, folders, loading, total, uploads, typeFilter, onTypeChange, search, onSearch, activeFolderId, onFolderChange, onUpload, onLoadMore, hasMore, multiple, accept, onSelect, }: MediaPickerDialogProps): react_jsx_runtime.JSX.Element;
+declare function MediaPickerDialog({ open, onOpenChange, title, files, folders, loading, total, typeFilter, onTypeChange, search, onSearch, activeFolderId, onFolderChange, onUpload, onLoadMore, hasMore, multiple, initialSelected, accept, onSelect, }: MediaPickerDialogProps): react_jsx_runtime.JSX.Element;
 
 interface ImagePickerFieldProps {
     value?: string;

package/dist/index.d.ts

@@ -367,7 +367,6 @@ interface MediaPickerDialogProps {
     folders?: MediaPickerDialogFolder[];
     loading?: boolean;
     total: number;
-    uploads?: UploadItem[];
     typeFilter?: string;
     onTypeChange?: (type: string) => void;
     search?: string;
@@ -378,11 +377,12 @@ interface MediaPickerDialogProps {
     onLoadMore?: () => void;
     hasMore?: boolean;
     multiple?: boolean;
+    initialSelected?: string[];
     /** "images" = only show image type tabs; "all" = show all type tabs */
     accept?: "images" | "all";
     onSelect: (files: MediaCardFile[]) => void;
 }
-declare function MediaPickerDialog({ open, onOpenChange, title, files, folders, loading, total, uploads, typeFilter, onTypeChange, search, onSearch, activeFolderId, onFolderChange, onUpload, onLoadMore, hasMore, multiple, accept, onSelect, }: MediaPickerDialogProps): react_jsx_runtime.JSX.Element;
+declare function MediaPickerDialog({ open, onOpenChange, title, files, folders, loading, total, typeFilter, onTypeChange, search, onSearch, activeFolderId, onFolderChange, onUpload, onLoadMore, hasMore, multiple, initialSelected, accept, onSelect, }: MediaPickerDialogProps): react_jsx_runtime.JSX.Element;
 
 interface ImagePickerFieldProps {
     value?: string;

package/dist/index.js

@@ -2030,7 +2030,6 @@ function MediaPickerDialog({
   folders = [],
   loading = false,
   total,
-  uploads = [],
   typeFilter = "all",
   onTypeChange,
   search = "",
@@ -2041,14 +2040,56 @@ function MediaPickerDialog({
   onLoadMore,
   hasMore = false,
   multiple = false,
+  initialSelected = [],
   accept = "all",
   onSelect
 }) {
-  const [localSelected, setLocalSelected] = React20.useState(/* @__PURE__ */ new Set());
+  const [localSelected, setLocalSelected] = React20.useState(new Set(initialSelected));
+  const [isDragging, setIsDragging] = React20.useState(false);
   const fileInputRef = React20.useRef(null);
+  const dragCounterRef = React20.useRef(0);
   React20.useEffect(() => {
-    if (!open) setLocalSelected(/* @__PURE__ */ new Set());
+    if (open) {
+      setLocalSelected(new Set(initialSelected));
+    } else {
+      setLocalSelected(/* @__PURE__ */ new Set());
+      setIsDragging(false);
+      dragCounterRef.current = 0;
+    }
   }, [open]);
+  const handleDragEnter = (e) => {
+    e.preventDefault();
+    e.stopPropagation();
+    if (e.dataTransfer.types.includes("Files")) {
+      dragCounterRef.current++;
+      setIsDragging(true);
+    }
+  };
+  const handleDragLeave = (e) => {
+    e.preventDefault();
+    e.stopPropagation();
+    dragCounterRef.current--;
+    if (dragCounterRef.current <= 0) {
+      dragCounterRef.current = 0;
+      setIsDragging(false);
+    }
+  };
+  const handleDragOver = (e) => {
+    e.preventDefault();
+    e.stopPropagation();
+  };
+  const handleDrop = (e) => {
+    e.preventDefault();
+    e.stopPropagation();
+    dragCounterRef.current = 0;
+    setIsDragging(false);
+    if (!onUpload || !e.dataTransfer.files.length) return;
+    const accepted = accept === "images" ? Array.from(e.dataTransfer.files).filter((f) => f.type.startsWith("image/")) : Array.from(e.dataTransfer.files);
+    if (!accepted.length) return;
+    const dt = new DataTransfer();
+    accepted.forEach((f) => dt.items.add(f));
+    onUpload(dt.files);
+  };
   const typeOptions = ALL_TYPE_OPTIONS.filter(
     (o) => accept === "images" ? o.value === "all" || o.value === "images" : true
   );
@@ -2072,7 +2113,6 @@ function MediaPickerDialog({
       onUpload(e.target.files);
     }
   };
-  const activeUploads = uploads.filter((u) => u.status === "uploading");
   const firstSelected = files.find((f) => localSelected.has(f.id));
   return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(Dialog, { open, onOpenChange, children: /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(
     DialogContent,
@@ -2178,41 +2218,49 @@ function MediaPickerDialog({
                 )
               ] })
             ] }),
-            activeUploads.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: "border-b px-4 py-2 space-y-1.5 shrink-0", children: activeUploads.map((u, i) => /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: "flex items-center gap-2", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("span", { className: "flex-1 truncate text-xs text-muted-foreground", children: u.name }),
-              /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: "h-1.5 w-24 overflow-hidden rounded-full bg-muted", children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
-                "div",
-                {
-                  className: "h-full rounded-full bg-primary transition-all duration-200",
-                  style: { width: `${u.progress}%` }
-                }
-              ) }),
-              /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("span", { className: "text-[10px] text-muted-foreground w-6 text-right", children: [
-                u.progress,
-                "%"
-              ] })
-            ] }, i)) }),
-            /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: "flex-1 overflow-y-auto p-4", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
-                MediaGrid,
-                {
-                  files,
-                  selected: localSelected,
-                  onSelect: handleFileSelect,
-                  loading,
-                  columns: 5,
-                  onUploadClick: onUpload ? () => fileInputRef.current?.click() : void 0
-                }
-              ),
-              hasMore && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: "mt-4 flex justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
-                "button",
-                {
-                  onClick: onLoadMore,
-                  className: "rounded-lg border px-4 py-2 text-xs text-muted-foreground transition-colors hover:bg-accent",
-                  children: "Load more"
-                }
-              ) })
-            ] })
+            /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(
+              "div",
+              {
+                className: "relative flex-1 overflow-y-auto p-4",
+                onDragEnter: handleDragEnter,
+                onDragLeave: handleDragLeave,
+                onDragOver: handleDragOver,
+                onDrop: handleDrop,
+                children: [
+                  isDragging && onUpload && /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: "pointer-events-none absolute inset-0 z-10 flex flex-col items-center justify-center gap-3 rounded-lg border-2 border-dashed border-primary bg-primary/5 backdrop-blur-[1px]", children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("svg", { className: "h-10 w-10 text-primary opacity-70", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round", children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("path", { d: "M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" }),
+                      /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("polyline", { points: "17 8 12 3 7 8" }),
+                      /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("line", { x1: "12", y1: "3", x2: "12", y2: "15" })
+                    ] }),
+                    /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("p", { className: "text-sm font-medium text-primary", children: [
+                      "Drop ",
+                      accept === "images" ? "images" : "files",
+                      " to upload"
+                    ] })
+                  ] }),
+                  /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+                    MediaGrid,
+                    {
+                      files,
+                      selected: localSelected,
+                      onSelect: handleFileSelect,
+                      loading,
+                      columns: 5,
+                      onUploadClick: onUpload ? () => fileInputRef.current?.click() : void 0
+                    }
+                  ),
+                  hasMore && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: "mt-4 flex justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+                    "button",
+                    {
+                      onClick: onLoadMore,
+                      className: "rounded-lg border px-4 py-2 text-xs text-muted-foreground transition-colors hover:bg-accent",
+                      children: "Load more"
+                    }
+                  ) })
+                ]
+              }
+            )
           ] })
         ] }),
         localSelected.size > 0 && /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: "flex items-center justify-between gap-4 border-t px-5 py-3 shrink-0 bg-muted/20", children: [