vue-devui 1.0.0-beta.14 → 1.0.0-beta.15

package/vue-devui.es.js

@@ -3212,7 +3212,7 @@ var Carousel = defineComponent$1({
     }, null))]) : null]);
   }
 });
-var CarouseItem = defineComponent$1({
+var CarouselItem = defineComponent$1({
   name: "DCarouselItem",
   render() {
     var _a;
@@ -3228,8 +3228,8 @@ var CarouseItem = defineComponent$1({
 Carousel.install = function(app) {
   app.component(Carousel.name, Carousel);
 };
-CarouseItem.install = function(app) {
-  app.component(CarouseItem.name, CarouseItem);
+CarouselItem.install = function(app) {
+  app.component(CarouselItem.name, CarouselItem);
 };
 var CarouselInstall = {
   title: "Carousel \u8D70\u9A6C\u706F",
@@ -3237,7 +3237,7 @@ var CarouselInstall = {
   status: "80%",
   install(app) {
     app.use(Carousel);
-    app.use(CarouseItem);
+    app.use(CarouselItem);
   }
 };
 var freeGlobal = typeof global == "object" && global && global.Object === Object && global;
@@ -8458,7 +8458,8 @@ var Comment = defineComponent$1({
           return null;
         }
         const actionList = actions2.map((action, index2) => createVNode("li", {
-          "key": `devui-comment-action-${index2}`
+          "key": `devui-comment-action-${index2}`,
+          "class": `devui-comment-action-${index2}`
         }, [action]));
         return actionList;
       };
@@ -8498,7 +8499,7 @@ Comment.install = function(app) {
 var CommentInstall = {
   title: "Comment \u8BC4\u8BBA",
   category: "\u6570\u636E\u5C55\u793A",
-  status: "70%",
+  status: "100%",
   install(app) {
     app.use(Comment);
   }
@@ -10048,8 +10049,18 @@ const drawerProps = {
     type: Boolean,
     default: true
   },
+  destroyOnHide: {
+    type: Boolean,
+    default: false
+  },
   beforeHidden: {
     type: [Promise, Function]
+  },
+  content: {
+    type: [Object, Function]
+  },
+  header: {
+    type: [Object, Function]
   }
 };
 var drawerHeader = "";
@@ -10059,6 +10070,7 @@ var DrawerHeader = defineComponent$1({
   setup(props, ctx2) {
     const isFullScreen = ref(false);
     const visible = inject("visible");
+    const destroyOnHide = inject("destroyOnHide");
     const fullScreenClassName = computed(() => isFullScreen.value ? "icon icon-minimize" : "icon icon-maxmize");
     const handleFullScreen = (e) => {
       e.stopPropagation();
@@ -10072,7 +10084,8 @@ var DrawerHeader = defineComponent$1({
       fullScreenClassName,
       visible,
       handleFullScreen,
-      handleDrawerClose
+      handleDrawerClose,
+      destroyOnHide
     };
   },
   render() {
@@ -10080,12 +10093,18 @@ var DrawerHeader = defineComponent$1({
       handleFullScreen,
       handleDrawerClose,
       visible,
-      fullScreenClassName
+      fullScreenClassName,
+      destroyOnHide
     } = this;
-    if (!visible)
+    if (destroyOnHide.value && !visible) {
       return null;
+    }
+    const visibleVal = visible ? "visible" : "hidden";
     return createVNode("div", {
-      "class": "devui-drawer-header"
+      "class": "devui-drawer-header",
+      "style": {
+        visibility: visibleVal
+      }
     }, [createVNode("div", {
       "class": "devui-drawer-header-item"
     }, [createVNode("span", {
@@ -10107,17 +10126,26 @@ var DrawerContainer = defineComponent$1({
   name: "DrawerContainer",
   setup() {
     const visible = inject("visible");
+    const destroyOnHide = inject("destroyOnHide");
     return {
-      visible
+      visible,
+      destroyOnHide
     };
   },
   render() {
     const {
-      visible
+      visible,
+      destroyOnHide
     } = this;
-    if (!visible)
+    if (destroyOnHide.value && !visible) {
       return null;
-    return createVNode("div", null, [createTextVNode("\u5185\u5BB9\u533A\u57DF")]);
+    }
+    const visibleVal = this.visible ? "visible" : "hidden";
+    return createVNode("div", {
+      "style": {
+        visibility: visibleVal
+      }
+    }, [createTextVNode("\u5185\u5BB9\u533A\u57DF")]);
   }
 });
 var drawerBody = "";
@@ -10134,6 +10162,7 @@ var DrawerBody = defineComponent$1({
     const width = inject("width");
     const visible = inject("visible");
     const backdropCloseable = inject("backdropCloseable");
+    const destroyOnHide = inject("destroyOnHide");
     const navRight = computed(() => position.value === "right" ? {
       "right": 0
     } : {
@@ -10156,7 +10185,8 @@ var DrawerBody = defineComponent$1({
       navWidth,
       visible,
       clickContent,
-      handleDrawerClose
+      handleDrawerClose,
+      destroyOnHide
     };
   },
   render() {
@@ -10167,14 +10197,18 @@ var DrawerBody = defineComponent$1({
       navRight,
       navWidth,
       visible,
-      handleDrawerClose
+      handleDrawerClose,
+      destroyOnHide
     } = this;
-    if (!visible)
+    if (destroyOnHide.value && !visible) {
       return null;
+    }
+    const visibleVal = visible ? "visible" : "hidden";
     return createVNode("div", {
       "class": "devui-drawer",
       "style": {
-        zIndex: zindex
+        zIndex: zindex,
+        visibility: visibleVal
       },
       "onClick": handleDrawerClose
     }, [isCover ? createVNode("div", {
@@ -10192,33 +10226,7 @@ var DrawerBody = defineComponent$1({
     }, [slots.default ? slots.default() : null])])])]);
   }
 });
-function createDrawerApp(props) {
-  return createApp(Drawer, __spreadValues({}, props));
-}
-class DrawerService {
-  static show(props) {
-    this.$div = document.createElement("div");
-    this.$body.appendChild(this.$div);
-    this.drawer = createDrawerApp(props);
-    this.drawer.mount(this.$div);
-  }
-  static hide() {
-    var _a;
-    (_a = this.drawer) == null ? void 0 : _a.unmount();
-    this.drawer = null;
-    if (this.$div) {
-      this.$body.removeChild(this.$div);
-    }
-    this.$div = null;
-  }
-}
-__publicField(DrawerService, "$body");
-__publicField(DrawerService, "$div", null);
-__publicField(DrawerService, "drawer", null);
-if (inBrowser) {
-  DrawerService.$body = document.body;
-}
-var Drawer = defineComponent$1({
+var Drawer$1 = defineComponent$1({
   name: "DDrawer",
   props: drawerProps,
   emits: ["close", "update:visible", "afterOpened"],
@@ -10233,15 +10241,15 @@ var Drawer = defineComponent$1({
       isCover,
       escKeyCloseable,
       position,
-      backdropCloseable
+      backdropCloseable,
+      destroyOnHide
     } = toRefs(props);
     const isFullScreen = ref(false);
-    const fullScreenEvent = () => {
+    const fullscreen2 = () => {
       isFullScreen.value = !isFullScreen.value;
     };
     const closeDrawer = async () => {
       var _a;
-      DrawerService.hide();
       const beforeHidden = props.beforeHidden;
       let result2 = (_a = typeof beforeHidden === "function" ? beforeHidden() : beforeHidden) != null ? _a : false;
       if (result2 instanceof Promise) {
@@ -10260,7 +10268,9 @@ var Drawer = defineComponent$1({
     watch(visible, (val) => {
       if (val) {
         emit("afterOpened");
-        isFullScreen.value = false;
+        if (destroyOnHide.value) {
+          isFullScreen.value = false;
+        }
       }
       if (escKeyCloseable && val) {
         document.addEventListener("keyup", escCloseDrawer);
@@ -10276,6 +10286,7 @@ var Drawer = defineComponent$1({
     provide("visible", visible);
     provide("isFullScreen", isFullScreen);
     provide("backdropCloseable", backdropCloseable);
+    provide("destroyOnHide", destroyOnHide);
     onUnmounted(() => {
       document.removeEventListener("keyup", escCloseDrawer);
     });
@@ -10283,36 +10294,106 @@ var Drawer = defineComponent$1({
       isFullScreen,
       visible,
       slots,
-      fullScreenEvent,
+      fullscreen: fullscreen2,
       closeDrawer
     };
   },
   render() {
-    const fullScreenEvent = this.fullScreenEvent;
-    const closeDrawer = this.closeDrawer;
-    if (!this.visible)
+    const {
+      fullscreen: fullscreen2,
+      closeDrawer,
+      visible,
+      destroyOnHide
+    } = this;
+    if (destroyOnHide.value && !visible) {
       return null;
+    }
+    const visibleVal = visible ? "visible" : "hidden";
     return createVNode(Teleport, {
       "to": "body"
     }, {
-      default: () => [createVNode(DrawerBody, null, {
-        default: () => [this.slots.header ? this.slots.header() : createVNode(DrawerHeader, {
-          "onToggleFullScreen": fullScreenEvent,
+      default: () => [createVNode(DrawerBody, {
+        "style": {
+          visibility: visibleVal
+        }
+      }, {
+        default: () => [this.slots.header ? this.slots.header({
+          fullscreen: fullscreen2,
+          closeDrawer
+        }) : createVNode(DrawerHeader, {
+          "onToggleFullScreen": fullscreen2,
           "onClose": closeDrawer
-        }, null), this.slots.default ? this.slots.default() : createVNode(DrawerContainer, null, null)]
+        }, null), this.slots.content ? this.slots.content() : createVNode(DrawerContainer, null, null)]
       })]
     });
   }
 });
-Drawer.install = function(app) {
-  app.component(Drawer.name, Drawer);
+function createDrawerApp(props, drawer, el) {
+  if (drawer) {
+    return drawer;
+  }
+  const res = createApp(createVNode(Drawer$1, {
+    "visible": props.visible,
+    "onUpdate:visible": ($event) => props.visible = $event
+  }, {
+    header: props.header,
+    content: props.content
+  }));
+  res.mount(el);
+  return res;
+}
+class DrawerService {
+  static create(props, drawer) {
+    if (!drawer) {
+      drawer = new Drawer(props);
+    }
+    return drawer;
+  }
+}
+class Drawer {
+  constructor(props) {
+    __publicField(this, "drawer", null);
+    __publicField(this, "div", null);
+    __publicField(this, "props", null);
+    __publicField(this, "hide", async () => {
+      var _a;
+      const beforeHidden = this.props.beforeHidden;
+      let result2 = (_a = typeof beforeHidden === "function" ? beforeHidden() : beforeHidden) != null ? _a : false;
+      if (result2 instanceof Promise) {
+        result2 = await result2;
+      }
+      if (!result2)
+        this.hideDirectly();
+    });
+    __publicField(this, "hideDirectly", () => {
+      this.drawer._instance.props.visible = false;
+    });
+    __publicField(this, "destroy", () => {
+      if (this.drawer) {
+        this.drawer.unmount();
+        this.drawer = null;
+        this.div.remove();
+      }
+    });
+    this.props = props;
+  }
+  show() {
+    if (!this.drawer) {
+      this.div = document.createElement("div");
+      this.drawer = createDrawerApp(this.props, this.drawer, this.div);
+    }
+    this.drawer._instance.props.visible = true;
+  }
+}
+Drawer$1.install = function(app) {
+  app.component(Drawer$1.name, Drawer$1);
 };
 var DrawerInstall = {
   title: "Drawer \u62BD\u5C49\u677F",
   category: "\u53CD\u9988",
-  status: "60%",
+  status: "75%",
   install(app) {
-    app.use(Drawer);
+    app.use(Drawer$1);
     app.config.globalProperties.$drawerService = DrawerService;
   }
 };
@@ -23380,140 +23461,94 @@ const tooltipProps = {
     default: "100"
   }
 };
-const EventListener = {
-  listen: function(target, eventType, callback) {
-    if (target.addEventListener) {
-      target.addEventListener(eventType, callback, false);
-      return {
-        remove() {
-          target.removeEventListener(target, callback, false);
-        }
-      };
-    } else {
-      target.attchEvent(eventType, callback);
-      return {
-        remove() {
-          target.detachEvent(eventType, callback);
-        }
-      };
-    }
-  }
-};
 var tooltip = "";
 var DTooltip = defineComponent$1({
   name: "DTooltip",
   props: tooltipProps,
-  setup(props, ctx2) {
+  setup(props) {
     const position = reactive({
       left: 0,
       top: 0
     });
-    const show = ref(false);
-    const slotElement = ref(null);
-    const tooltip2 = ref(null);
-    const arrow = ref(null);
-    const tooltipcontent = ref(null);
-    let enterEvent;
-    let leaveEvent;
     const arrowStyle = (attr, value) => {
-      arrow.value.style[attr] = value;
-    };
-    const delayShowTrue = function(fn, delay = props.mouseEnterDelay) {
-      let start;
-      if (parseInt(delay) >= 0) {
-        return function() {
-          if (start) {
-            clearTimeout(start);
-          }
-          start = setTimeout(fn, parseInt(delay));
-        };
-      } else {
-        console.error("the value of delay is bigger than 0 and the type of delay must be string!");
-        return;
-      }
+      document.getElementById("devui-arrow").style[attr] = value;
     };
+    const slotElement = ref(null);
     onMounted(() => {
-      if (!show.value) {
-        tooltip2.value.style.opacity = "0";
-      }
-      enterEvent = EventListener.listen(slotElement.value.children[0], "mouseenter", delayShowTrue(function() {
-        show.value = true;
-      }, props.mouseEnterDelay));
-      leaveEvent = EventListener.listen(slotElement.value.children[0], "mouseleave", function() {
-        if (show.value) {
-          setTimeout(function() {
-            show.value = false;
-          }, props.mouseLeaveDelay);
-        }
-      });
-    });
-    watch(show, function(newValue, oldValue) {
-      if (newValue) {
-        tooltip2.value.style.opacity = "1";
-        tooltip2.value.style.zIndex = "999";
-        arrow.value.style.border = "5px solid transparent";
-        switch (props.position) {
-          case "top":
-            position.left = slotElement.value.children[0].offsetLeft - tooltip2.value.offsetWidth / 2 + slotElement.value.children[0].offsetWidth / 2 - 5;
-            position.top = slotElement.value.children[0].offsetTop - 10 - tooltipcontent.value.offsetHeight;
-            arrowStyle("borderTop", "5px solid rgb(70, 77, 110)");
-            arrow.value.style.top = `${tooltipcontent.value.offsetHeight}px`;
-            arrow.value.style.left = `${tooltipcontent.value.offsetWidth / 2 + 5}px`;
-            break;
-          case "right":
-            position.left = slotElement.value.children[0].offsetLeft + slotElement.value.children[0].offsetWidth;
-            position.top = slotElement.value.children[0].offsetTop + slotElement.value.children[0].offsetHeight / 2 - tooltipcontent.value.offsetHeight / 2;
-            arrowStyle("borderRight", "5px solid rgb(70, 77, 110)");
-            arrow.value.style.top = `${tooltipcontent.value.offsetHeight / 2 - 5}px`;
-            arrow.value.style.left = "-0px";
-            break;
-          case "bottom":
-            position.top = slotElement.value.children[0].offsetHeight + slotElement.value.children[0].offsetTop + 10;
-            position.left = slotElement.value.children[0].offsetLeft + slotElement.value.children[0].offsetWidth / 2 - tooltipcontent.value.offsetWidth / 2 - 5;
-            arrowStyle("borderBottom", "5px solid rgb(70, 77, 110)");
-            arrow.value.style.top = "-10px";
-            arrow.value.style.left = `${tooltipcontent.value.offsetWidth / 2 + 5}px`;
-            break;
-          case "left":
-            position.top = slotElement.value.children[0].offsetTop + slotElement.value.children[0].offsetHeight / 2 - tooltipcontent.value.offsetHeight / 2;
-            position.left = slotElement.value.children[0].offsetLeft - 20 - tooltipcontent.value.offsetWidth;
-            arrowStyle("borderLeft", "5px solid rgb(70, 77, 110)");
-            arrow.value.style.left = `${tooltipcontent.value.offsetWidth + 10}px`;
-            arrow.value.style.top = `${tooltipcontent.value.offsetHeight / 2 - 5}px`;
-            break;
-          default:
-            console.error("The attribute position value is wrong, the value is one of top\u3001right\u3001left\u3001bottom");
-            break;
-        }
-        tooltip2.value.style.top = position.top + "px";
-        tooltip2.value.style.left = position.left + "px";
-      } else {
-        position.top = 0;
-        position.left = 0;
-        tooltip2.value.style.opacity = "0";
-      }
+      slotElement.value.children[0].onmouseenter = function() {
+        const tooltip2 = document.createElement("div");
+        const arrow = document.createElement("div");
+        const tooltipcontent = document.createElement("div");
+        tooltip2.classList.add("tooltip");
+        arrow.classList.add("arrow");
+        tooltipcontent.classList.add("tooltipcontent");
+        arrow.id = "devui-arrow";
+        tooltip2.id = "devui-tooltip1";
+        setTimeout(() => {
+          document.getElementById("devui-tooltip").appendChild(tooltip2);
+          tooltip2.appendChild(arrow);
+          tooltip2.appendChild(tooltipcontent);
+          tooltipcontent.innerHTML = props.content;
+          tooltip2.style.opacity = "1";
+          tooltip2.style.zIndex = "999";
+          arrow.style.border = "5px solid transparent";
+          switch (props.position) {
+            case "top":
+              position.left = slotElement.value.children[0].offsetLeft - tooltip2.offsetWidth / 2 + slotElement.value.children[0].offsetWidth / 2 - 5;
+              position.top = slotElement.value.children[0].offsetTop - 10 - tooltipcontent.offsetHeight;
+              arrow.style.top = `${tooltipcontent.offsetHeight}px`;
+              arrow.style.left = `${tooltipcontent.offsetWidth / 2 + 5}px`;
+              arrow.style.borderTop = "5px solid rgb(70, 77, 110)";
+              break;
+            case "bottom":
+              position.top = slotElement.value.children[0].offsetHeight + slotElement.value.children[0].offsetTop + 10;
+              position.left = slotElement.value.children[0].offsetLeft + slotElement.value.children[0].offsetWidth / 2 - tooltipcontent.offsetWidth / 2 - 5;
+              arrowStyle("borderBottom", "5px solid rgb(70, 77, 110)");
+              arrow.style.top = "-10px";
+              arrow.style.left = `${tooltipcontent.offsetWidth / 2 + 5}px`;
+              arrow.style.borderBottom = "5px solid rgb(70, 77, 110)";
+              break;
+            case "left":
+              position.top = slotElement.value.children[0].offsetTop + slotElement.value.children[0].offsetHeight / 2 - tooltipcontent.offsetHeight / 2;
+              position.left = slotElement.value.children[0].offsetLeft - 20 - tooltipcontent.offsetWidth;
+              arrowStyle("borderLeft", "5px solid rgb(70, 77, 110)");
+              arrow.style.left = `${tooltipcontent.offsetWidth + 10}px`;
+              arrow.style.top = `${tooltipcontent.offsetHeight / 2 - 5}px`;
+              arrow.style.borderLeft = "5px solid rgb(70, 77, 110)";
+              break;
+            case "right":
+              position.left = slotElement.value.children[0].offsetLeft + slotElement.value.children[0].offsetWidth;
+              position.top = slotElement.value.children[0].offsetTop + slotElement.value.children[0].offsetHeight / 2 - tooltipcontent.offsetHeight / 2;
+              arrowStyle("borderRight", "5px solid rgb(70, 77, 110)");
+              arrow.style.top = `${tooltipcontent.offsetHeight / 2 - 5}px`;
+              arrow.style.left = "-0px";
+              arrow.style.borderRight = "5px solid rgb(70, 77, 110)";
+              break;
+          }
+          tooltip2.style.top = position.top + 5 + "px";
+          tooltip2.style.left = position.left + "px";
+        }, props.mouseEnterDelay);
+      };
+      slotElement.value.children[0].onmouseleave = function() {
+        setTimeout(() => {
+          document.getElementById("devui-tooltip1").removeChild(document.getElementById("devui-arrow"));
+          document.getElementById("devui-tooltip").removeChild(document.getElementById("devui-tooltip1"));
+        }, props.mouseLeaveDelay);
+      };
     });
     onBeforeUnmount(() => {
-      enterEvent.remove();
-      leaveEvent.remove();
+      slotElement.value.children[0].onmouseenter = null;
+      slotElement.value.children[0].onmouseleave = null;
     });
     return () => {
       const defaultSlot = renderSlot(useSlots(), "default");
       return createVNode("div", {
-        "class": "devui-tooltip"
+        "class": "devui-tooltip",
+        "id": "devui-tooltip"
       }, [createVNode("div", {
         "class": "slotElement",
         "ref": slotElement
-      }, [defaultSlot]), createVNode("div", {
-        "class": "tooltip",
-        "ref": tooltip2
-      }, [createVNode("div", {
-        "class": "arrow",
-        "ref": arrow
-      }, null), createVNode("div", {
-        "class": "tooltipcontent",
-        "ref": tooltipcontent
-      }, [props.content])])]);
+      }, [defaultSlot])]);
     };
   }
 });
@@ -25773,8 +25808,8 @@ const tagProps = {
 };
 function useClass(props) {
   return computed(() => {
-    const { type: type4, color: color2 } = props;
-    return `devui-tag devui-tag-${type4 || (color2 ? "colorful" : "") || "default"}`;
+    const { type: type4, color: color2, deletable } = props;
+    return `devui-tag devui-tag-${type4 || (color2 ? "colorful" : "") || "default"} ${deletable ? "devui-tag-deletable" : ""}`;
   });
 }
 function useColor(props) {
@@ -30349,4 +30384,4 @@ var vueDevui = {
     installs.forEach((p) => app.use(p));
   }
 };
-export { Accordion, Alert, Anchor, Aside, AutoComplete, Avatar, BackTop, Badge, Breadcrumb, DButton as Button, Card, Carousel, Cascader, Checkbox, Col, ColorPicker, Column, Comment, Content, Countdown, DatePicker, DraggableDirective, Drawer, DrawerService, Dropdown, DroppableDirective, EditableSelect, FixedOverlay, FlexibleOverlay, Footer, Form, FormControl, FormItem, FormLabel, FormOperation, Fullscreen, Gantt, Header, Icon, ImagePreviewDirective, ImagePreviewService, DInput as Input, InputIcon, InputNumber, Layout, loadingDirective as Loading, loading as LoadingService, Modal, NavSprite, Pagination, Panel, Popover, Progress, QuadrantDiagram, Radio, RadioGroup, Rate, ReadTip, Result, RippleDirective, Row, DSearch as Search, Select, Skeleton, SkeletonItem, Slider, SortableDirective, Splitter, Statistic, Status, StepsGuide, StickSlider, Sticky, Switch, Table, Tabs, Tag, TagInput, Textarea, TimeAxis, TimeAxisItem, TimePicker, Toast, ToastService, DTooltip as Tooltip, Transfer, Tree, TreeSelect, Upload, vueDevui as default };
+export { Accordion, Alert, Anchor, Aside, AutoComplete, Avatar, BackTop, Badge, Breadcrumb, DButton as Button, Card, Carousel, CarouselItem, Cascader, Checkbox, Col, ColorPicker, Column, Comment, Content, Countdown, DatePicker, DraggableDirective, Drawer$1 as Drawer, DrawerService, Dropdown, DroppableDirective, EditableSelect, FixedOverlay, FlexibleOverlay, Footer, Form, FormControl, FormItem, FormLabel, FormOperation, Fullscreen, Gantt, Header, Icon, ImagePreviewDirective, ImagePreviewService, DInput as Input, InputIcon, InputNumber, Layout, loadingDirective as Loading, loading as LoadingService, Modal, NavSprite, Pagination, Panel, Popover, Progress, QuadrantDiagram, Radio, RadioGroup, Rate, ReadTip, Result, RippleDirective, Row, DSearch as Search, Select, Skeleton, SkeletonItem, Slider, SortableDirective, Splitter, Statistic, Status, StepsGuide, StickSlider, Sticky, Switch, Table, Tabs, Tag, TagInput, Textarea, TimeAxis, TimeAxisItem, TimePicker, Toast, ToastService, DTooltip as Tooltip, Transfer, Tree, TreeSelect, Upload, vueDevui as default };