ninemoon-ui 0.1.20 → 0.2.1

package/dist/js/tabs/tabs.js

@@ -1,11 +1,14 @@
-import { defineComponent, computed, ref, reactive, useSlots, onMounted, onUnmounted, openBlock, createElementBlock, createVNode, createElementVNode, normalizeStyle, createCommentVNode, h, normalizeClass, withDirectives, vShow } from "vue";
+import { defineComponent, computed, ref, reactive, useSlots, onMounted, nextTick, onUnmounted, openBlock, createElementBlock, createElementVNode, createVNode, normalizeClass, withCtx, Fragment, renderList, toDisplayString, createCommentVNode, normalizeStyle, Comment, Text, h, withDirectives, vShow } from "vue";
+import { _ as _sfc_main$1 } from "../popover.vue_vue_type_script_setup_true_lang/popover.vue_vue_type_script_setup_true_lang.js";
 import { S as ShapeFlags } from "../shapeFlag/shapeFlag.js";
+import "../index/index.js";
 const _hoisted_1 = { class: "relative w-full overflow-hidden" };
-const _hoisted_2 = {
+const _hoisted_2 = ["onClick"];
+const _hoisted_3 = {
   key: 0,
   class: "relative my-2 border-t-2 border-solid border-gray-200"
 };
-const _hoisted_3 = { class: "relative w-full" };
+const _hoisted_4 = { class: "relative w-full" };
 const _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "tabs",
   props: {
@@ -40,27 +43,98 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       left: 0,
       width: 0
     });
+    const showPopver = ref(false);
+    const dropdownSelected = ref("");
+    const containerWidth = ref(0);
+    const tabsWidth = ref([]);
+    const hasOverflow = ref(false);
     const slots = useSlots();
+    const flattenSlots = (nodes) => {
+      const result = [];
+      for (const node of nodes) {
+        if (!node)
+          continue;
+        if (node.type === Comment || node.type === Text)
+          continue;
+        if (node.type === Fragment) {
+          if (node.children) {
+            result.push(...flattenSlots(
+              Array.isArray(node.children) ? node.children : [node.children]
+            ));
+          }
+          continue;
+        }
+        if (node.shapeFlag & ShapeFlags.ARRAY_CHILDREN) {
+          if (node.children) {
+            result.push(...flattenSlots(node.children));
+          }
+          continue;
+        }
+        if (node.shapeFlag & (ShapeFlags.STATEFUL_COMPONENT | ShapeFlags.FUNCTIONAL_COMPONENT | ShapeFlags.SLOTS_CHILDREN)) {
+          result.push(node);
+        }
+      }
+      return result;
+    };
     const validSlots = computed(() => {
-      return slots.default().reduce((pre, cur) => {
-        if (cur.shapeFlag & ShapeFlags.ARRAY_CHILDREN) {
-          pre = pre.concat(cur.children);
-        } else if (cur.shapeFlag & ShapeFlags.STATEFUL_COMPONENT) {
-          pre.push(cur);
+      var _a;
+      const defaultSlots = ((_a = slots.default) == null ? void 0 : _a.call(slots)) || [];
+      return flattenSlots(defaultSlots);
+    });
+    const visibleTabs = computed(() => {
+      if (!hasOverflow.value) {
+        return validSlots.value;
+      }
+      let totalWidth = 0;
+      const dropdownWidth = 64;
+      const maxWidth = containerWidth.value - dropdownWidth;
+      const visible = [];
+      for (let i = 0; i < validSlots.value.length; i++) {
+        const tabWidth = tabsWidth.value[i] || 100;
+        if (totalWidth + tabWidth <= maxWidth || i === 0 && validSlots.value.length > 1) {
+          totalWidth += tabWidth;
+          visible.push(validSlots.value[i]);
+        } else {
+          break;
         }
-        return pre;
-      }, []);
+      }
+      if (visible.length === validSlots.value.length) {
+        return validSlots.value;
+      }
+      return visible;
     });
+    const overflowTabs = computed(() => {
+      if (!hasOverflow.value) {
+        return [];
+      }
+      return validSlots.value.slice(visibleTabs.value.length);
+    });
+    const handleDropdownChange = () => {
+      const selectedIndex = validSlots.value.findIndex((tab) => tab.props.name === dropdownSelected.value);
+      if (selectedIndex !== -1) {
+        activeIndex.value = selectedIndex;
+        currentActive.value = dropdownSelected.value;
+        nextTick(() => {
+          var _a;
+          const activeElement = (_a = observerRef.value) == null ? void 0 : _a.children[selectedIndex];
+          if (activeElement) {
+            indicatorPos.width = activeElement.offsetWidth;
+            indicatorPos.left = activeElement.offsetLeft;
+          }
+        });
+      }
+    };
     const renderBar = () => {
       return h(
         "div",
         {
           class: normalizeClass([
-            "ETab",
+            "ETab flex-grow",
             [showBaseline.value ? "px-2 pt-2" : " ETab_Card"]
-          ])
+          ]),
+          ref: observerRef
         },
-        validSlots.value.map((it, index) => {
+        visibleTabs.value.map((it, index) => {
           return renderBtn(it, index);
         })
       );
@@ -109,7 +183,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
           {
             class: normalizeClass(divc)
           },
-          node.props.name
+          node.props.label || node.props.name
         )
       );
     };
@@ -127,8 +201,49 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         [[vShow, activeIndex.value === i]]
       );
     };
+    const containRef = ref();
     const observerRef = ref();
     let observer;
+    const resizeObserver = new ResizeObserver((entries) => {
+      if (entries.length > 0) {
+        const entry = entries[0];
+        const newWidth = entry.contentRect.width;
+        if (Math.abs(newWidth - containerWidth.value) > 1) {
+          containerWidth.value = newWidth;
+          checkOverflow();
+        }
+      }
+    });
+    const checkOverflow = () => {
+      if (!observerRef.value)
+        return;
+      const tabElements = observerRef.value.children;
+      const newTabsWidth = Array.from(tabElements).map((el) => el.clientWidth);
+      const totalWidth = newTabsWidth.reduce((sum, width) => sum + width, 0);
+      const dropdownWidth = 64;
+      const wouldOverflow = totalWidth > containerWidth.value;
+      const wouldOverflowWithDropdown = totalWidth + dropdownWidth > containerWidth.value;
+      const newHasOverflow = hasOverflow.value ? wouldOverflowWithDropdown : wouldOverflow;
+      if (newHasOverflow !== hasOverflow.value) {
+        hasOverflow.value = newHasOverflow;
+      }
+      const widthChanged = newTabsWidth.length !== tabsWidth.value.length || newTabsWidth.some((width, index) => width !== tabsWidth.value[index]);
+      if (widthChanged) {
+        tabsWidth.value = newTabsWidth;
+      }
+      if (newHasOverflow && overflowTabs.value.length > 0) {
+        const isActiveInOverflow = overflowTabs.value.some((tab) => tab.props.name === currentActive.value);
+        if (isActiveInOverflow && dropdownSelected.value !== currentActive.value) {
+          dropdownSelected.value = currentActive.value || "";
+        }
+      }
+    };
+    const handleOverflowTabClick = (tab) => {
+      const name = tab.props.name;
+      dropdownSelected.value = name;
+      handleDropdownChange();
+      showPopver.value = false;
+    };
     onMounted(() => {
       observer = new IntersectionObserver((entries) => {
         entries.forEach((entry) => {
@@ -142,28 +257,94 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       if (observerRef.value) {
         observer.observe(observerRef.value);
       }
+      if (containRef.value) {
+        containerWidth.value = containRef.value.clientWidth;
+        resizeObserver.observe(containRef.value);
+      }
+      nextTick(() => {
+        checkOverflow();
+      });
     });
     onUnmounted(() => {
       if (observerRef.value) {
         observer.unobserve(observerRef.value);
       }
+      if (containRef.value) {
+        resizeObserver.unobserve(containRef.value);
+      }
     });
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", _hoisted_1, [
-        createVNode(renderBar, {
-          ref_key: "observerRef",
-          ref: observerRef
-        }, null, 512),
-        showBaseline.value ? (openBlock(), createElementBlock("div", _hoisted_2, [
+        createElementVNode("div", {
+          class: "flex items-end",
+          ref_key: "containRef",
+          ref: containRef
+        }, [
+          createVNode(renderBar, {
+            ref_key: "observerRef",
+            ref: observerRef
+          }, null, 512),
+          hasOverflow.value ? (openBlock(), createElementBlock("div", {
+            key: 0,
+            class: normalizeClass({ "ETab_Card": !showBaseline.value, "h-11": !showBaseline.value })
+          }, [
+            createVNode(_sfc_main$1, {
+              trigger: "native",
+              "insert-class": "!p-0",
+              placement: "bottomright",
+              arrowshow: false,
+              modelValue: showPopver.value,
+              "onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => showPopver.value = $event),
+              ref: "morePopoverRef"
+            }, {
+              reference: withCtx(() => [
+                createElementVNode("div", {
+                  onClick: _cache[0] || (_cache[0] = ($event) => showPopver.value = true),
+                  class: normalizeClass([
+                    "text-blue-500 cursor-pointer inline-flex items-center justify-center px-2 text-sm",
+                    showBaseline.value ? " " : "h-11 rounded-tl-lg rounded-tr-lg  font-medium focus:text-blue-brand"
+                  ])
+                }, [..._cache[2] || (_cache[2] = [
+                  createElementVNode("div", { class: "whitespace-nowrap" }, "更多", -1),
+                  createElementVNode("svg", {
+                    class: "w-4 h-4 ml-1",
+                    fill: "none",
+                    stroke: "currentColor",
+                    viewBox: "0 0 24 24",
+                    xmlns: "http://www.w3.org/2000/svg"
+                  }, [
+                    createElementVNode("path", {
+                      "stroke-linecap": "round",
+                      "stroke-linejoin": "round",
+                      "stroke-width": "2",
+                      d: "M19 9l-7 7-7-7"
+                    })
+                  ], -1)
+                ])], 2)
+              ]),
+              default: withCtx(() => [
+                (openBlock(true), createElementBlock(Fragment, null, renderList(overflowTabs.value, (tab) => {
+                  return openBlock(), createElementBlock("div", {
+                    key: tab.props.name,
+                    class: "px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 cursor-pointer whitespace-nowrap",
+                    onClick: ($event) => handleOverflowTabClick(tab)
+                  }, toDisplayString(tab.props.label || tab.props.name), 9, _hoisted_2);
+                }), 128))
+              ]),
+              _: 1
+            }, 8, ["modelValue"])
+          ], 2)) : createCommentVNode("", true)
+        ], 512),
+        showBaseline.value ? (openBlock(), createElementBlock("div", _hoisted_3, [
           createElementVNode("div", {
             class: "absolute bottom-0 border-t-2 border-solid border-blue-brand transition",
             style: normalizeStyle({
-              transform: `translateX(${indicatorPos.left}px`,
+              transform: `translateX(${indicatorPos.left}px)`,
               width: `${indicatorPos.width}px`
             })
           }, null, 4)
         ])) : createCommentVNode("", true),
-        createElementVNode("div", _hoisted_3, [
+        createElementVNode("div", _hoisted_4, [
           createVNode(renderContent)
         ])
       ]);

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.20",
+  "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"
+  }
 }