ninemoon-ui 0.1.14 → 0.2.1

package/dist/js/upload/upload.js

@@ -1,4 +1,4 @@
-import { defineComponent, ref, openBlock, createElementBlock, Fragment, createElementVNode, renderSlot, renderList, toDisplayString, createVNode, createCommentVNode } from "vue";
+import { defineComponent, ref, openBlock, createElementBlock, Fragment, createElementVNode, withModifiers, renderSlot, normalizeClass, createStaticVNode, renderList, toDisplayString, createVNode, createCommentVNode } from "vue";
 import { C as CloseIcon } from "../index/index.js";
 const _hoisted_1 = ["accept", "multiple"];
 const _hoisted_2 = {
@@ -14,7 +14,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     accept: { default: "" },
     fileList: {},
     showFileList: { type: Boolean, default: true },
-    multiple: { type: Boolean, default: false }
+    multiple: { type: Boolean, default: false },
+    draggable: { type: Boolean, default: false }
   },
   emits: ["getNewFile", "delOldFile"],
   setup(__props, { expose: __expose, emit: __emit }) {
@@ -22,6 +23,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     const emit = __emit;
     const FILEINPUT = ref();
     const fileList = ref(props.fileList || []);
+    const isDragOver = ref(false);
     const fileGet = () => {
       FILEINPUT.value.click();
     };
@@ -44,30 +46,73 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         DeleteFileHandle(i);
       });
     };
+    const handleDragOver = (event) => {
+      isDragOver.value = true;
+    };
+    const handleDragEnter = (event) => {
+      isDragOver.value = true;
+    };
+    const handleDragLeave = (event) => {
+      isDragOver.value = false;
+    };
+    const handleDrop = (event) => {
+      isDragOver.value = false;
+      if (event.dataTransfer && event.dataTransfer.files.length > 0) {
+        const files = event.dataTransfer.files;
+        if (props.multiple) {
+          for (const file of files) {
+            fileList.value.push(file);
+          }
+        } else {
+          fileList.value = [files[0]];
+        }
+        emit("getNewFile", files, fileList.value);
+        event.dataTransfer.clearData();
+      }
+    };
     __expose({
       clearFiles
     });
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock(Fragment, null, [
-        createElementVNode("span", null, [
+        createElementVNode("div", null, [
           createElementVNode("input", {
             ref_key: "FILEINPUT",
             ref: FILEINPUT,
             onChange: _cache[0] || (_cache[0] = ($event) => FileHandle()),
-            accept: _ctx.accept,
-            multiple: _ctx.multiple,
+            accept: __props.accept,
+            multiple: __props.multiple,
             type: "file",
             class: "hidden"
           }, null, 40, _hoisted_1),
-          createElementVNode("button", {
-            onClick: fileGet,
-            type: "button",
-            class: "appearance-none"
+          __props.draggable ? (openBlock(), createElementBlock("div", {
+            key: 0,
+            onDragover: withModifiers(handleDragOver, ["prevent"]),
+            onDragenter: withModifiers(handleDragEnter, ["prevent"]),
+            onDragleave: withModifiers(handleDragLeave, ["prevent"]),
+            onDrop: withModifiers(handleDrop, ["prevent"]),
+            onClick: fileGet
           }, [
-            renderSlot(_ctx.$slots, "default")
-          ])
+            renderSlot(_ctx.$slots, "default", {}, () => [
+              createElementVNode("div", {
+                class: normalizeClass(["border-2 border-dashed border-gray-300 rounded-lg p-8 text-center transition-all duration-300 bg-gray-50 cursor-pointer hover:border-gray-500", { "border-blue-500 bg-blue-50": isDragOver.value }])
+              }, [..._cache[1] || (_cache[1] = [
+                createStaticVNode('<div class="flex flex-col items-center justify-center"><svg class="w-12 h-12 text-gray-400 mb-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12"></path></svg><p class="text-lg font-medium text-gray-700 mb-2">拖拽文件到此处或点击选择文件</p><p class="text-sm text-gray-500">支持多种文件格式</p></div>', 1)
+              ])], 2)
+            ])
+          ], 32)) : (openBlock(), createElementBlock("div", {
+            key: 1,
+            onClick: fileGet
+          }, [
+            renderSlot(_ctx.$slots, "default", {}, () => [
+              _cache[2] || (_cache[2] = createElementVNode("button", {
+                type: "button",
+                class: "appearance-none border border-gray-300 rounded-md px-4 py-2 text-sm font-medium text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 transition-colors duration-200 cursor-pointer"
+              }, " 点击上传 ", -1))
+            ])
+          ]))
         ]),
-        _ctx.showFileList ? (openBlock(), createElementBlock("ul", _hoisted_2, [
+        __props.showFileList ? (openBlock(), createElementBlock("ul", _hoisted_2, [
           (openBlock(true), createElementBlock(Fragment, null, renderList(fileList.value, (i, d) => {
             return openBlock(), createElementBlock("li", {
               key: d,

package/dist/utils/tool.d.ts

@@ -50,5 +50,10 @@ export declare const useResizeObserver: (callback: () => void) => {
     observe: (el: HTMLElement) => void;
     unobserve: (el: HTMLElement) => void;
 };
+export declare const zIndexManager: {
+    getNextZIndex(): number;
+    getCurrentZIndex(): number;
+    setZIndex(zIndex: number): void;
+};
 declare const _default: {};
 export default _default;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "ninemoon-ui",
   "private": false,
-  "version": "0.1.14",
+  "version": "0.2.1",
   "author": "zhuboy",
   "keywords": [
     "vue3",
@@ -33,5 +33,8 @@
     "dist"
   ],
   "type": "module",
-  "types": "dist/index.d.ts"
+  "types": "dist/index.d.ts",
+  "volta": {
+    "node": "18.12.1"
+  }
 }