vue-devui 1.0.0-rc.6 → 1.0.0-rc.7

package/vue-devui.es.js

@@ -33,7 +33,7 @@ var __publicField = (obj, key, value) => {
   __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
   return value;
 };
-import { createVNode, defineComponent, ref, onMounted, Transition, withDirectives, vShow, nextTick, h, render, inject, createTextVNode, resolveDirective, unref, watch, onUnmounted, mergeProps, toRefs, provide, Teleport, isVNode, computed, toRef, resolveComponent, reactive, createApp, renderSlot, Fragment, withModifiers, onBeforeUnmount, useSlots, onUpdated, getCurrentInstance, onBeforeMount } from "vue";
+import { createVNode, defineComponent, ref, onMounted, Transition, withDirectives, vShow, nextTick, h, render, inject, createTextVNode, resolveDirective, unref, watch, onUnmounted, mergeProps, toRefs, provide, Teleport, isVNode, computed, toRef, resolveComponent, reactive, createApp, renderSlot, Fragment, withModifiers, onBeforeUnmount, useSlots, effect, onUpdated, getCurrentInstance, onBeforeMount } from "vue";
 import { offset, autoPlacement, arrow, shift, computePosition } from "@floating-ui/dom";
 import { onClickOutside } from "@vueuse/core";
 const AlertCloseIcon = () => createVNode("svg", {
@@ -149,7 +149,7 @@ const alertProps = {
     default: 0
   }
 };
-var alert$1 = "";
+var alert = "";
 var Alert = defineComponent({
   name: "DAlert",
   props: alertProps,
@@ -605,13 +605,13 @@ var Loading = defineComponent({
   inheritAttrs: false,
   props: loadingProps,
   setup(props) {
-    const style2 = {
+    const style = {
       top: props.view.top,
       left: props.view.left,
       zIndex: props.zIndex
     };
     if (!props.message) {
-      style2.background = "none";
+      style.background = "none";
     }
     const isShow = ref(false);
     const open = () => {
@@ -621,7 +621,7 @@ var Loading = defineComponent({
       isShow.value = false;
     };
     return {
-      style: style2,
+      style,
       isShow,
       open,
       close: close2
@@ -633,7 +633,7 @@ var Loading = defineComponent({
       isShow,
       isFull,
       backdrop,
-      style: style2,
+      style,
       message,
       $slots
     } = this;
@@ -644,7 +644,7 @@ var Loading = defineComponent({
     }, [backdrop ? createVNode("div", {
       "class": "devui-loading-mask"
     }, null) : null, createVNode("div", {
-      "style": style2,
+      "style": style,
       "class": "devui-loading-area"
     }, [createVNode("div", {
       "class": "devui-busy-default-spinner"
@@ -946,8 +946,8 @@ const flexibleOverlayProps = {
 function getScrollParent(element) {
   const overflowRegex = /(auto|scroll|hidden)/;
   for (let parent = element; parent = parent.parentElement; parent.parentElement !== document.body) {
-    const style2 = window.getComputedStyle(parent);
-    if (overflowRegex.test(style2.overflow + style2.overflowX + style2.overflowY)) {
+    const style = window.getComputedStyle(parent);
+    if (overflowRegex.test(style.overflow + style.overflowX + style.overflowY)) {
       return parent;
     }
   }
@@ -1551,7 +1551,8 @@ const badgeProps = {
   },
   status: {
     type: String,
-    validator: (val) => badgeStatusType.includes(val)
+    validator: (val) => badgeStatusType.includes(val),
+    default: "info"
   },
   position: {
     type: String,
@@ -1577,7 +1578,7 @@ var Badge = defineComponent({
       const base = "devui-badge-content";
       return [base, props.showDot ? `${base}-dot` : `${base}-count`, props.status && `${base}-${props.status}`, ctx2.slots.default && props.position && `${base}-${props.position}`, ctx2.slots.default && `${base}-fixed`].join(" ");
     });
-    const style2 = computed(() => {
+    const style = computed(() => {
       const styleMap = {
         bgColor: "background",
         textColor: "color"
@@ -1609,7 +1610,7 @@ var Badge = defineComponent({
         "class": "devui-badge"
       }, [(_b = (_a = ctx2.slots).default) == null ? void 0 : _b.call(_a), createVNode("div", {
         "class": className2.value,
-        "style": style2.value
+        "style": style.value
       }, [text.value])]);
     };
   }
@@ -1716,11 +1717,12 @@ function useButton(props, ctx2) {
     [`devui-btn-${props.variant}-${props.color || defaultColor}`]: true,
     [`devui-btn-${props.size}`]: true,
     "devui-btn-icon-wrap": props.icon,
-    "devui-btn-icon": props.icon && !hasContent.value && props.variant !== "solid"
+    "devui-btn-icon": props.icon && !hasContent.value && props.variant !== "solid",
+    "devui-btn-is-loading": props.loading
   }));
   const iconClass = computed(() => {
     if (!props.icon) {
-      return;
+      return "";
     }
     const origin = "devui-icon-fix icon";
     if (hasContent.value) {
@@ -1794,38 +1796,44 @@ var card = "";
 var Card = defineComponent({
   name: "DCard",
   props: cardProps,
-  render() {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n;
+  setup(props, {
+    slots
+  }) {
     const {
       align,
       src
-    } = this;
-    const alignCls = {
-      "d-card-actions": true,
-      "devui-card-actions": true,
-      [`devui-card-actions-align-${align}`]: align !== "start"
+    } = toRefs(props);
+    const alignClass = computed(() => {
+      return {
+        "d-card-actions": true,
+        "devui-card-actions": true,
+        [`devui-card-actions-align-${align.value}`]: align.value !== "start"
+      };
+    });
+    return () => {
+      var _a, _b, _c, _d, _e, _f, _g;
+      return createVNode("div", {
+        "class": "card-container devui-card"
+      }, [(_a = slots.default) == null ? void 0 : _a.call(slots), createVNode("div", {
+        "class": "devui-card-header"
+      }, [((_b = slots.avatar) == null ? void 0 : _b.call(slots)) ? createVNode("div", {
+        "class": "devui-card-avatar"
+      }, [(_c = slots.avatar) == null ? void 0 : _c.call(slots)]) : "", createVNode("div", {
+        "class": "devui-card-header-title-area"
+      }, [createVNode("div", {
+        "class": "devui-card-title"
+      }, [(_d = slots.title) == null ? void 0 : _d.call(slots)]), createVNode("div", {
+        "class": "devui-card-subtitle"
+      }, [(_e = slots.subtitle) == null ? void 0 : _e.call(slots)])])]), src.value !== "" ? createVNode("img", {
+        "src": src.value,
+        "alt": "",
+        "class": "devui-card-meta"
+      }, null) : "", createVNode("div", {
+        "class": "devui-card-content"
+      }, [(_f = slots.content) == null ? void 0 : _f.call(slots)]), createVNode("div", {
+        "class": alignClass.value
+      }, [slots.actions ? (_g = slots.actions) == null ? void 0 : _g.call(slots) : ""])]);
     };
-    return createVNode("div", {
-      "class": "card-container devui-card"
-    }, [(_b = (_a = this.$slots).default) == null ? void 0 : _b.call(_a), createVNode("div", {
-      "class": "devui-card-header"
-    }, [((_d = (_c = this.$slots).cardAvatar) == null ? void 0 : _d.call(_c)) ? createVNode("div", {
-      "class": "devui-card-avatar"
-    }, [(_f = (_e = this.$slots).cardAvatar) == null ? void 0 : _f.call(_e)]) : "", createVNode("div", {
-      "class": "devui-card-header-title-area"
-    }, [createVNode("div", {
-      "class": "devui-card-title"
-    }, [(_h = (_g = this.$slots).cardTitle) == null ? void 0 : _h.call(_g)]), createVNode("div", {
-      "class": "devui-card-subtitle"
-    }, [(_j = (_i = this.$slots).cardSubtitle) == null ? void 0 : _j.call(_i)])])]), src !== "" ? createVNode("img", {
-      "src": src,
-      "alt": "",
-      "class": "devui-card-meta"
-    }, null) : "", createVNode("div", {
-      "class": "devui-card-content"
-    }, [(_l = (_k = this.$slots).cardContent) == null ? void 0 : _l.call(_k)]), createVNode("div", {
-      "class": alignCls
-    }, [this.$slots.cardActions ? (_n = (_m = this.$slots).cardActions) == null ? void 0 : _n.call(_m) : ""])]);
   }
 });
 var CardInstall = {
@@ -2186,88 +2194,6 @@ var CheckboxInstall = {
     app.component(CheckboxGroup.name, CheckboxGroup);
   }
 };
-const commentProps = {
-  actions: {
-    type: Object,
-    default: null
-  },
-  author: {
-    type: Object,
-    default: null
-  },
-  avatar: {
-    type: Object,
-    default: null
-  },
-  content: {
-    type: Object,
-    default: null
-  },
-  datetime: {
-    type: Object,
-    default: null
-  }
-};
-var comment = "";
-var Comment = defineComponent({
-  name: "DComment",
-  props: commentProps,
-  emits: [],
-  slots: ["actions", "author", "avatar", "content", "datetime"],
-  setup(props, {
-    slots
-  }) {
-    return () => {
-      var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j;
-      const getAction = (actions2) => {
-        if (!actions2 || !actions2.length) {
-          return null;
-        }
-        const actionList = actions2.map((action, index2) => createVNode("li", {
-          "key": `devui-comment-action-${index2}`,
-          "class": `devui-comment-action-${index2}`
-        }, [action]));
-        return actionList;
-      };
-      const actions = (_b = props.actions) != null ? _b : (_a = slots.actions) == null ? void 0 : _a.call(slots);
-      const author = (_d = props.author) != null ? _d : (_c = slots.author) == null ? void 0 : _c.call(slots);
-      const avatar2 = (_f = props.avatar) != null ? _f : (_e = slots.avatar) == null ? void 0 : _e.call(slots);
-      const content2 = (_h = props.content) != null ? _h : (_g = slots.content) == null ? void 0 : _g.call(slots);
-      const datetime = (_j = props.datetime) != null ? _j : (_i = slots.datetime) == null ? void 0 : _i.call(slots);
-      const avatarDom = createVNode("div", {
-        "class": `devui-comment-avatar`
-      }, [typeof avatar2 === "string" ? createVNode("img", {
-        "src": avatar2,
-        "alt": "comment-avatar"
-      }, null) : avatar2]);
-      const actionsList = Array.isArray(actions) ? actions : [actions];
-      const actionDom = actions ? createVNode("ul", {
-        "class": `devui-comment-actions`
-      }, [getAction(actionsList)]) : null;
-      return createVNode("div", {
-        "class": "devui-comment"
-      }, [avatarDom, createVNode("div", {
-        "class": "devui-comment-right"
-      }, [createVNode("div", {
-        "class": "devui-comment-head"
-      }, [createVNode("div", {
-        "class": "devui-comment-author"
-      }, [author]), createVNode("div", {
-        "class": "devui-comment-datetime"
-      }, [datetime])]), createVNode("div", {
-        "class": "devui-comment-content"
-      }, [content2]), actionDom])]);
-    };
-  }
-});
-var CommentInstall = {
-  title: "Comment \u8BC4\u8BBA",
-  category: "\u6570\u636E\u5C55\u793A",
-  status: "100%",
-  install(app) {
-    app.component(Comment.name, Comment);
-  }
-};
 const countdownProps = {
   value: {
     type: Number,
@@ -2712,6 +2638,12 @@ const formItemProps = {
     type: Boolean,
     default: false
   },
+  messageType: {
+    type: String
+  },
+  popPosition: {
+    type: Array
+  },
   rules: {
     type: [Object, Array]
   }
@@ -3625,14 +3557,14 @@ var DrawerOverlay = defineComponent({
 function lockScroll() {
   if (document.documentElement.scrollHeight > document.documentElement.clientHeight) {
     const scrollTop = document.documentElement.scrollTop;
-    const style2 = document.documentElement.getAttribute("style");
+    const style = document.documentElement.getAttribute("style");
     document.documentElement.style.position = "fixed";
     document.documentElement.style.top = `-${scrollTop}px`;
     document.documentElement.style.width = document.documentElement.style.width || "100%";
     document.documentElement.style.overflowY = "scroll";
     return () => {
-      if (style2) {
-        document.documentElement.setAttribute("style", style2);
+      if (style) {
+        document.documentElement.setAttribute("style", style);
       } else {
         document.documentElement.removeAttribute("style");
       }
@@ -4347,7 +4279,8 @@ const editableSelectProps = {
     default: "Search"
   },
   modelValue: {
-    type: String
+    type: String,
+    default: ""
   },
   width: {
     type: Number
@@ -4390,6 +4323,7 @@ const useInput = (inputValue, ctx2) => {
   const handleInput = (event) => {
     const value = event.target.value;
     inputValue.value = value;
+    ctx2.emit("update:modelValue", value);
     onInputChange(value);
   };
   return {
@@ -4438,14 +4372,11 @@ const useKeyboardSelect = (dropdownRef, visible, inputValue, filteredOptions, op
   };
   const handleEnter = () => {
     const len = filteredOptions.value.length;
-    if (!visible.value) {
-      toggleMenu();
-    } else if (!len || len === 1) {
-      closeMenu();
-    } else if (len && len !== 1) {
-      handleClick(filteredOptions.value[hoverIndex.value]);
-      closeMenu();
+    if (!visible.value || !len) {
+      return toggleMenu();
     }
+    len && len === 1 ? handleClick(filteredOptions.value[0]) : handleClick(filteredOptions.value[hoverIndex.value]);
+    return closeMenu();
   };
   const handleKeyboardNavigation = (direction) => {
     const len = filteredOptions.value.length;
@@ -4483,7 +4414,6 @@ const useKeyboardSelect = (dropdownRef, visible, inputValue, filteredOptions, op
     const keyCode = event.key || event.code;
     switch (keyCode) {
       case "Escape":
-        event.preventDefault();
         handleEscape();
         break;
       case "Enter":
@@ -4505,9 +4435,9 @@ var EditableSelect = defineComponent({
   setup(props, ctx2) {
     const dropdownRef = ref();
     const origin = ref();
-    const position = ref(["bottom", "left"]);
+    const position = ref(["bottom"]);
     const visible = ref(false);
-    const inputValue = ref(props.modelValue || "");
+    const inputValue = ref(props.modelValue);
     const loading2 = ref(props.loading);
     const normalizeOptions = computed(() => {
       return props.options.map((option2) => {
@@ -4582,6 +4512,9 @@ var EditableSelect = defineComponent({
       const selectCls = className$1("devui-editable-select devui-form-group devui-has-feedback", {
         "devui-select-open": visible.value === true
       });
+      const inputCls = className$1("devui-form-control devui-dropdown-origin", {
+        "devui-dropdown-origin-open": visible.value === true
+      });
       return withDirectives(createVNode("div", {
         "class": selectCls,
         "ref": origin,
@@ -4589,7 +4522,7 @@ var EditableSelect = defineComponent({
           width: props.width + "px"
         }
       }, [createVNode("input", {
-        "class": "devui-form-control devui-dropdown-origin devui-dropdown-origin-open",
+        "class": inputCls,
         "onClick": withModifiers(toggleMenu, ["self"]),
         "onInput": handleInput,
         "onKeydown": handleKeydown,
@@ -4611,12 +4544,11 @@ var EditableSelect = defineComponent({
         "hasBackdrop": false
       }, {
         default: () => [createVNode("div", {
-          "class": "devui-editable-select-dropdown",
           "style": {
             width: props.width + "px"
           }
         }, [withDirectives(createVNode("div", {
-          "class": "devui-dropdown-menu"
+          "class": "devui-dropdown-menu "
         }, [createVNode("ul", {
           "ref": dropdownRef,
           "class": "devui-list-unstyled scroll-height",
@@ -4649,22 +4581,6 @@ var EditableSelectInstall = {
     app.component(EditableSelect.name, EditableSelect);
   }
 };
-function mitt(n) {
-  return { all: n = n || /* @__PURE__ */ new Map(), on: function(t, e) {
-    var i = n.get(t);
-    i ? i.push(e) : n.set(t, [e]);
-  }, off: function(t, e) {
-    var i = n.get(t);
-    i && (e ? i.splice(i.indexOf(e) >>> 0, 1) : n.set(t, []));
-  }, emit: function(t, e) {
-    var i = n.get(t);
-    i && i.slice().map(function(n2) {
-      n2(e);
-    }), (i = n.get("*")) && i.slice().map(function(n2) {
-      n2(t, e);
-    });
-  } };
-}
 const formProps = {
   data: {
     type: Object,
@@ -4685,27 +4601,16 @@ const formProps = {
   rules: {
     type: Object
   },
-  messageShowType: {
+  messageType: {
     type: String,
     default: "popover"
+  },
+  popPosition: {
+    type: Array,
+    default: ["right", "bottom"]
   }
 };
-const dFormEvents = {
-  addField: "d.form.addField",
-  removeField: "d.form.removeField"
-};
 const FORM_TOKEN = Symbol("dForm");
-var eventBus = mitt();
-const EventBus = eventBus;
-function isObject(obj) {
-  return Object.prototype.toString.call(obj).slice(8, -1) === "Object";
-}
-function hasKey(obj, key) {
-  if (!isObject(obj)) {
-    return false;
-  }
-  return Object.prototype.hasOwnProperty.call(obj, key);
-}
 function createBem(namespace, element, modifier) {
   let cls = namespace;
   if (element) {
@@ -5481,7 +5386,7 @@ var lodash = { exports: {} };
         function object4() {
         }
         return function(proto) {
-          if (!isObject2(proto)) {
+          if (!isObject(proto)) {
             return {};
           }
           if (objectCreate) {
@@ -5843,7 +5748,7 @@ var lodash = { exports: {} };
         if (result3 !== undefined$1) {
           return result3;
         }
-        if (!isObject2(value)) {
+        if (!isObject(value)) {
           return value;
         }
         var isArr = isArray(value);
@@ -6190,7 +6095,7 @@ var lodash = { exports: {} };
         return true;
       }
       function baseIsNative(value) {
-        if (!isObject2(value) || isMasked(value)) {
+        if (!isObject(value) || isMasked(value)) {
           return false;
         }
         var pattern4 = isFunction(value) ? reIsNative : reIsHostCtor;
@@ -6230,7 +6135,7 @@ var lodash = { exports: {} };
         return result3;
       }
       function baseKeysIn(object4) {
-        if (!isObject2(object4)) {
+        if (!isObject(object4)) {
           return nativeKeysIn(object4);
         }
         var isProto = isPrototype(object4), result3 = [];
@@ -6275,7 +6180,7 @@ var lodash = { exports: {} };
         }
         baseFor(source, function(srcValue, key) {
           stack || (stack = new Stack());
-          if (isObject2(srcValue)) {
+          if (isObject(srcValue)) {
             baseMergeDeep(object4, source, key, srcIndex, baseMerge, customizer, stack);
           } else {
             var newValue = customizer ? customizer(safeGet(object4, key), srcValue, key + "", object4, source, stack) : undefined$1;
@@ -6315,7 +6220,7 @@ var lodash = { exports: {} };
             newValue = objValue;
             if (isArguments(objValue)) {
               newValue = toPlainObject(objValue);
-            } else if (!isObject2(objValue) || isFunction(objValue)) {
+            } else if (!isObject(objValue) || isFunction(objValue)) {
               newValue = initCloneObject(srcValue);
             }
           } else {
@@ -6454,7 +6359,7 @@ var lodash = { exports: {} };
         return shuffleSelf(array4, baseClamp(n, 0, array4.length));
       }
       function baseSet(object4, path, value, customizer) {
-        if (!isObject2(object4)) {
+        if (!isObject(object4)) {
           return object4;
         }
         path = castPath(path, object4);
@@ -6468,7 +6373,7 @@ var lodash = { exports: {} };
             var objValue = nested[key];
             newValue = customizer ? customizer(objValue, key, nested) : undefined$1;
             if (newValue === undefined$1) {
-              newValue = isObject2(objValue) ? objValue : isIndex(path[index2 + 1]) ? [] : {};
+              newValue = isObject(objValue) ? objValue : isIndex(path[index2 + 1]) ? [] : {};
             }
           }
           assignValue(nested, key, newValue);
@@ -6918,7 +6823,7 @@ var lodash = { exports: {} };
               return new Ctor(args[0], args[1], args[2], args[3], args[4], args[5], args[6]);
           }
           var thisBinding = baseCreate(Ctor.prototype), result3 = Ctor.apply(thisBinding, args);
-          return isObject2(result3) ? result3 : thisBinding;
+          return isObject(result3) ? result3 : thisBinding;
         };
       }
       function createCurry(func, bitmask, arity) {
@@ -7232,7 +7137,7 @@ var lodash = { exports: {} };
         return objValue;
       }
       function customDefaultsMerge(objValue, srcValue, key, object4, source, stack) {
-        if (isObject2(objValue) && isObject2(srcValue)) {
+        if (isObject(objValue) && isObject(srcValue)) {
           stack.set(srcValue, objValue);
           baseMerge(objValue, srcValue, undefined$1, customDefaultsMerge, stack);
           stack["delete"](srcValue);
@@ -7580,7 +7485,7 @@ var lodash = { exports: {} };
         return !!length && (type4 == "number" || type4 != "symbol" && reIsUint.test(value)) && (value > -1 && value % 1 == 0 && value < length);
       }
       function isIterateeCall(value, index2, object4) {
-        if (!isObject2(object4)) {
+        if (!isObject(object4)) {
           return false;
         }
         var type4 = typeof index2;
@@ -7623,7 +7528,7 @@ var lodash = { exports: {} };
         return value === proto;
       }
       function isStrictComparable(value) {
-        return value === value && !isObject2(value);
+        return value === value && !isObject(value);
       }
       function matchesStrictComparable(key, srcValue) {
         return function(object4) {
@@ -8505,7 +8410,7 @@ var lodash = { exports: {} };
           throw new TypeError2(FUNC_ERROR_TEXT);
         }
         wait = toNumber(wait) || 0;
-        if (isObject2(options)) {
+        if (isObject(options)) {
           leading = !!options.leading;
           maxing = "maxWait" in options;
           maxWait = maxing ? nativeMax(toNumber(options.maxWait) || 0, wait) : maxWait;
@@ -8675,7 +8580,7 @@ var lodash = { exports: {} };
         if (typeof func != "function") {
           throw new TypeError2(FUNC_ERROR_TEXT);
         }
-        if (isObject2(options)) {
+        if (isObject(options)) {
           leading = "leading" in options ? !!options.leading : leading;
           trailing = "trailing" in options ? !!options.trailing : trailing;
         }
@@ -8783,7 +8688,7 @@ var lodash = { exports: {} };
         return typeof value == "number" && nativeIsFinite(value);
       }
       function isFunction(value) {
-        if (!isObject2(value)) {
+        if (!isObject(value)) {
           return false;
         }
         var tag2 = baseGetTag(value);
@@ -8795,7 +8700,7 @@ var lodash = { exports: {} };
       function isLength(value) {
         return typeof value == "number" && value > -1 && value % 1 == 0 && value <= MAX_SAFE_INTEGER;
       }
-      function isObject2(value) {
+      function isObject(value) {
         var type4 = typeof value;
         return value != null && (type4 == "object" || type4 == "function");
       }
@@ -8902,9 +8807,9 @@ var lodash = { exports: {} };
         if (isSymbol(value)) {
           return NAN;
         }
-        if (isObject2(value)) {
+        if (isObject(value)) {
           var other = typeof value.valueOf == "function" ? value.valueOf() : value;
-          value = isObject2(other) ? other + "" : other;
+          value = isObject(other) ? other + "" : other;
         }
         if (typeof value != "string") {
           return value === 0 ? value : +value;
@@ -9125,7 +9030,7 @@ var lodash = { exports: {} };
           var Ctor = object4 && object4.constructor;
           if (isArrLike) {
             accumulator = isArr ? new Ctor() : [];
-          } else if (isObject2(object4)) {
+          } else if (isObject(object4)) {
             accumulator = isFunction(Ctor) ? baseCreate(getPrototype(object4)) : {};
           } else {
             accumulator = {};
@@ -9407,7 +9312,7 @@ var lodash = { exports: {} };
       }
       function truncate(string3, options) {
         var length = DEFAULT_TRUNC_LENGTH, omission = DEFAULT_TRUNC_OMISSION;
-        if (isObject2(options)) {
+        if (isObject(options)) {
           var separator2 = "separator" in options ? options.separator : separator2;
           length = "length" in options ? toInteger(options.length) : length;
           omission = "omission" in options ? baseToString(options.omission) : omission;
@@ -9537,13 +9442,13 @@ var lodash = { exports: {} };
       });
       function mixin(object4, source, options) {
         var props = keys(source), methodNames = baseFunctions(source, props);
-        if (options == null && !(isObject2(source) && (methodNames.length || !props.length))) {
+        if (options == null && !(isObject(source) && (methodNames.length || !props.length))) {
           options = source;
           source = object4;
           object4 = this;
           methodNames = baseFunctions(source, keys(source));
         }
-        var chain2 = !(isObject2(options) && "chain" in options) || !!options.chain, isFunc = isFunction(object4);
+        var chain2 = !(isObject(options) && "chain" in options) || !!options.chain, isFunc = isFunction(object4);
         arrayEach(methodNames, function(methodName) {
           var func = source[methodName];
           object4[methodName] = func;
@@ -9889,7 +9794,7 @@ var lodash = { exports: {} };
       lodash2.isNil = isNil;
       lodash2.isNull = isNull;
       lodash2.isNumber = isNumber;
-      lodash2.isObject = isObject2;
+      lodash2.isObject = isObject;
       lodash2.isObjectLike = isObjectLike;
       lodash2.isPlainObject = isPlainObject;
       lodash2.isRegExp = isRegExp;
@@ -10200,16 +10105,8 @@ function useFormValidation(itemContexts) {
 var Form = defineComponent({
   name: "DForm",
   props: formProps,
-  emits: ["submit"],
   setup(props, ctx2) {
-    const formMitt = mitt();
     const ns = useNamespace("form");
-    const {
-      data,
-      layout: layout2,
-      labelSize,
-      labelAlign
-    } = toRefs(props);
     const {
       itemContexts,
       addItemContext,
@@ -10219,34 +10116,17 @@ var Form = defineComponent({
       validate,
       validateFields
     } = useFormValidation(itemContexts);
-    formMitt.on(dFormEvents.addField, (field) => {
-    });
-    formMitt.on(dFormEvents.removeField, (field) => {
-      if (field.prop)
-        ;
-    });
-    provide(FORM_TOKEN, reactive({
-      formData: data,
-      formMitt,
-      labelData: {
-        layout: layout2,
-        labelSize,
-        labelAlign
-      },
-      rules: props.rules,
-      messageShowType: "popover",
+    const onSubmit = (e) => {
+      e.preventDefault();
+    };
+    provide(FORM_TOKEN, reactive(__spreadProps(__spreadValues({}, toRefs(props)), {
       addItemContext,
       removeItemContext
-    }));
+    })));
     ctx2.expose({
       validate,
       validateFields
     });
-    const onSubmit = (e) => {
-      e.preventDefault();
-      ctx2.emit("submit", e);
-      EventBus.emit(`formSubmit:${props.name}`);
-    };
     return () => {
       var _a, _b;
       return createVNode("form", {
@@ -10554,17 +10434,18 @@ function HelpTipsIcon() {
   }, null)])])]);
 }
 function useFormLabel() {
-  const { labelData } = inject(FORM_TOKEN);
+  const formContext = inject(FORM_TOKEN);
   const formItemContext = inject(FORM_ITEM_TOKEN);
   const ns = useNamespace("form");
   const labelClasses = computed(() => ({
     [`${ns.e("label")}`]: true,
-    [`${ns.em("label", "vertical")}`]: labelData.layout === "vertical",
-    [`${ns.em("label", labelData.labelSize)}`]: labelData.layout === "horizontal",
-    [`${ns.em("label", labelData.labelAlign)}`]: labelData.layout === "horizontal"
+    [`${ns.em("label", "vertical")}`]: formContext.layout === "vertical",
+    [`${ns.em("label", formContext.labelSize)}`]: formContext.layout === "horizontal",
+    [`${ns.em("label", formContext.labelAlign)}`]: formContext.layout === "horizontal"
   }));
   const labelInnerClasses = computed(() => ({
-    [`${ns.em("label", "required")}`]: formItemContext.required
+    [`${ns.e("label-span")}`]: true,
+    [`${ns.em("label", "required")}`]: formItemContext.isRequired
   }));
   return { labelClasses, labelInnerClasses };
 }
@@ -11049,7 +10930,7 @@ var pattern$1 = function pattern(rule, value, source, errors, options) {
     }
   }
 };
-var rules$1 = {
+var rules = {
   required: required$1,
   whitespace,
   type: type$1,
@@ -11064,13 +10945,13 @@ var string = function string2(rule, value, callback, source, options) {
     if (isEmptyValue(value, "string") && !rule.required) {
       return callback();
     }
-    rules$1.required(rule, value, source, errors, options, "string");
+    rules.required(rule, value, source, errors, options, "string");
     if (!isEmptyValue(value, "string")) {
-      rules$1.type(rule, value, source, errors, options);
-      rules$1.range(rule, value, source, errors, options);
-      rules$1.pattern(rule, value, source, errors, options);
+      rules.type(rule, value, source, errors, options);
+      rules.range(rule, value, source, errors, options);
+      rules.pattern(rule, value, source, errors, options);
       if (rule.whitespace === true) {
-        rules$1.whitespace(rule, value, source, errors, options);
+        rules.whitespace(rule, value, source, errors, options);
       }
     }
   }
@@ -11083,9 +10964,9 @@ var method2 = function method3(rule, value, callback, source, options) {
     if (isEmptyValue(value) && !rule.required) {
       return callback();
     }
-    rules$1.required(rule, value, source, errors, options);
+    rules.required(rule, value, source, errors, options);
     if (value !== void 0) {
-      rules$1.type(rule, value, source, errors, options);
+      rules.type(rule, value, source, errors, options);
     }
   }
   callback(errors);
@@ -11100,10 +10981,10 @@ var number2 = function number3(rule, value, callback, source, options) {
     if (isEmptyValue(value) && !rule.required) {
       return callback();
     }
-    rules$1.required(rule, value, source, errors, options);
+    rules.required(rule, value, source, errors, options);
     if (value !== void 0) {
-      rules$1.type(rule, value, source, errors, options);
-      rules$1.range(rule, value, source, errors, options);
+      rules.type(rule, value, source, errors, options);
+      rules.range(rule, value, source, errors, options);
     }
   }
   callback(errors);
@@ -11115,9 +10996,9 @@ var _boolean = function _boolean2(rule, value, callback, source, options) {
     if (isEmptyValue(value) && !rule.required) {
       return callback();
     }
-    rules$1.required(rule, value, source, errors, options);
+    rules.required(rule, value, source, errors, options);
     if (value !== void 0) {
-      rules$1.type(rule, value, source, errors, options);
+      rules.type(rule, value, source, errors, options);
     }
   }
   callback(errors);
@@ -11129,9 +11010,9 @@ var regexp2 = function regexp3(rule, value, callback, source, options) {
     if (isEmptyValue(value) && !rule.required) {
       return callback();
     }
-    rules$1.required(rule, value, source, errors, options);
+    rules.required(rule, value, source, errors, options);
     if (!isEmptyValue(value)) {
-      rules$1.type(rule, value, source, errors, options);
+      rules.type(rule, value, source, errors, options);
     }
   }
   callback(errors);
@@ -11143,10 +11024,10 @@ var integer2 = function integer3(rule, value, callback, source, options) {
     if (isEmptyValue(value) && !rule.required) {
       return callback();
     }
-    rules$1.required(rule, value, source, errors, options);
+    rules.required(rule, value, source, errors, options);
     if (value !== void 0) {
-      rules$1.type(rule, value, source, errors, options);
-      rules$1.range(rule, value, source, errors, options);
+      rules.type(rule, value, source, errors, options);
+      rules.range(rule, value, source, errors, options);
     }
   }
   callback(errors);
@@ -11158,10 +11039,10 @@ var floatFn = function floatFn2(rule, value, callback, source, options) {
     if (isEmptyValue(value) && !rule.required) {
       return callback();
     }
-    rules$1.required(rule, value, source, errors, options);
+    rules.required(rule, value, source, errors, options);
     if (value !== void 0) {
-      rules$1.type(rule, value, source, errors, options);
-      rules$1.range(rule, value, source, errors, options);
+      rules.type(rule, value, source, errors, options);
+      rules.range(rule, value, source, errors, options);
     }
   }
   callback(errors);
@@ -11173,10 +11054,10 @@ var array2 = function array3(rule, value, callback, source, options) {
     if ((value === void 0 || value === null) && !rule.required) {
       return callback();
     }
-    rules$1.required(rule, value, source, errors, options, "array");
+    rules.required(rule, value, source, errors, options, "array");
     if (value !== void 0 && value !== null) {
-      rules$1.type(rule, value, source, errors, options);
-      rules$1.range(rule, value, source, errors, options);
+      rules.type(rule, value, source, errors, options);
+      rules.range(rule, value, source, errors, options);
     }
   }
   callback(errors);
@@ -11188,9 +11069,9 @@ var object2 = function object3(rule, value, callback, source, options) {
     if (isEmptyValue(value) && !rule.required) {
       return callback();
     }
-    rules$1.required(rule, value, source, errors, options);
+    rules.required(rule, value, source, errors, options);
     if (value !== void 0) {
-      rules$1.type(rule, value, source, errors, options);
+      rules.type(rule, value, source, errors, options);
     }
   }
   callback(errors);
@@ -11203,9 +11084,9 @@ var enumerable2 = function enumerable3(rule, value, callback, source, options) {
     if (isEmptyValue(value) && !rule.required) {
       return callback();
     }
-    rules$1.required(rule, value, source, errors, options);
+    rules.required(rule, value, source, errors, options);
     if (value !== void 0) {
-      rules$1[ENUM](rule, value, source, errors, options);
+      rules[ENUM](rule, value, source, errors, options);
     }
   }
   callback(errors);
@@ -11217,9 +11098,9 @@ var pattern2 = function pattern3(rule, value, callback, source, options) {
     if (isEmptyValue(value, "string") && !rule.required) {
       return callback();
     }
-    rules$1.required(rule, value, source, errors, options);
+    rules.required(rule, value, source, errors, options);
     if (!isEmptyValue(value, "string")) {
-      rules$1.pattern(rule, value, source, errors, options);
+      rules.pattern(rule, value, source, errors, options);
     }
   }
   callback(errors);
@@ -11231,7 +11112,7 @@ var date2 = function date3(rule, value, callback, source, options) {
     if (isEmptyValue(value, "date") && !rule.required) {
       return callback();
     }
-    rules$1.required(rule, value, source, errors, options);
+    rules.required(rule, value, source, errors, options);
     if (!isEmptyValue(value, "date")) {
       var dateObject;
       if (value instanceof Date) {
@@ -11239,9 +11120,9 @@ var date2 = function date3(rule, value, callback, source, options) {
       } else {
         dateObject = new Date(value);
       }
-      rules$1.type(rule, dateObject, source, errors, options);
+      rules.type(rule, dateObject, source, errors, options);
       if (dateObject) {
-        rules$1.range(rule, dateObject.getTime(), source, errors, options);
+        rules.range(rule, dateObject.getTime(), source, errors, options);
       }
     }
   }
@@ -11250,7 +11131,7 @@ var date2 = function date3(rule, value, callback, source, options) {
 var required2 = function required3(rule, value, callback, source, options) {
   var errors = [];
   var type4 = Array.isArray(value) ? "array" : typeof value;
-  rules$1.required(rule, value, source, errors, options, type4);
+  rules.required(rule, value, source, errors, options, type4);
   callback(errors);
 };
 var type2 = function type3(rule, value, callback, source, options) {
@@ -11261,9 +11142,9 @@ var type2 = function type3(rule, value, callback, source, options) {
     if (isEmptyValue(value, ruleType) && !rule.required) {
       return callback();
     }
-    rules$1.required(rule, value, source, errors, options, ruleType);
+    rules.required(rule, value, source, errors, options, ruleType);
     if (!isEmptyValue(value, ruleType)) {
-      rules$1.type(rule, value, source, errors, options);
+      rules.type(rule, value, source, errors, options);
     }
   }
   callback(errors);
@@ -11275,7 +11156,7 @@ var any = function any2(rule, value, callback, source, options) {
     if (isEmptyValue(value) && !rule.required) {
       return callback();
     }
-    rules$1.required(rule, value, source, errors, options);
+    rules.required(rule, value, source, errors, options);
   }
   callback(errors);
 };
@@ -11599,15 +11480,16 @@ Schema.register = function register(type4, validator) {
 Schema.warning = warning;
 Schema.messages = messages;
 Schema.validators = validators;
-function useFormItem() {
-  const formContext = reactive(inject(FORM_TOKEN));
-  const labelData = reactive(formContext.labelData);
+function useFormItem(messageType, _rules, validateState) {
+  const formContext = inject(FORM_TOKEN);
   const ns = useNamespace("form");
   const itemClasses = computed(() => ({
-    [`${ns.em("item", "horizontal")}`]: labelData.layout === "horizontal",
-    [`${ns.em("item", "vertical")}`]: labelData.layout === "vertical"
+    [`${ns.em("item", "horizontal")}`]: formContext.layout === "horizontal",
+    [`${ns.em("item", "vertical")}`]: formContext.layout === "vertical",
+    [`${ns.em("item", "error")}`]: messageType.value === "text" && validateState.value === "error"
   }));
-  return { itemClasses };
+  const isRequired = computed(() => _rules.value.some((rule) => Boolean(rule.required)));
+  return { itemClasses, isRequired };
 }
 function useFormItemRule(props) {
   const formContext = inject(FORM_TOKEN);
@@ -11635,7 +11517,7 @@ function useFormItemValidate(props, _rules) {
     return typeof props.field === "string" ? props.field : "";
   });
   const fieldValue = computed(() => {
-    const formData = formContext.formData;
+    const formData = formContext.data;
     if (!formData || !props.field) {
       return;
     }
@@ -11702,9 +11584,15 @@ var FormItem = defineComponent({
   props: formItemProps,
   setup(props, ctx2) {
     const formContext = inject(FORM_TOKEN);
-    const {
-      itemClasses
-    } = useFormItem();
+    const _a = toRefs(props), {
+      messageType: itemMessageType,
+      popPosition: itemPopPosition
+    } = _a, otherProps = __objRest(_a, [
+      "messageType",
+      "popPosition"
+    ]);
+    const messageType = computed(() => (itemMessageType == null ? void 0 : itemMessageType.value) || formContext.messageType);
+    const popPosition = computed(() => (itemPopPosition == null ? void 0 : itemPopPosition.value) || formContext.popPosition);
     const {
       _rules
     } = useFormItemRule(props);
@@ -11713,7 +11601,14 @@ var FormItem = defineComponent({
       validateMessage,
       validate
     } = useFormItemValidate(props, _rules);
-    const context = reactive(__spreadProps(__spreadValues({}, toRefs(props)), {
+    const {
+      itemClasses,
+      isRequired
+    } = useFormItem(messageType, _rules, validateState);
+    const context = reactive(__spreadProps(__spreadValues({}, otherProps), {
+      messageType,
+      popPosition,
+      isRequired,
       validateState,
       validateMessage,
       validate
@@ -11728,10 +11623,10 @@ var FormItem = defineComponent({
       formContext == null ? void 0 : formContext.removeItemContext(context);
     });
     return () => {
-      var _a, _b;
+      var _a2, _b;
       return createVNode("div", {
         "class": itemClasses.value
-      }, [(_b = (_a = ctx2.slots).default) == null ? void 0 : _b.call(_a)]);
+      }, [(_b = (_a2 = ctx2.slots).default) == null ? void 0 : _b.call(_a2)]);
     };
   }
 });
@@ -11744,18 +11639,25 @@ const formControlProps = {
     default: ""
   }
 };
+var PopoverInstall = {
+  title: "Popover \u60AC\u6D6E\u63D0\u793A",
+  category: "\u53CD\u9988",
+  status: "100%",
+  install(app) {
+    app.component(Popover.name, Popover);
+  }
+};
 function useFormControl(props) {
   const formContext = inject(FORM_TOKEN);
-  const labelData = reactive(formContext.labelData);
   const ns = useNamespace("form");
   const { feedbackStatus } = toRefs(props);
   const controlClasses = computed(() => ({
     [`${ns.e("control")}`]: true,
-    [`${ns.em("control", "horizontal")}`]: labelData.layout === "horizontal"
+    [`${ns.em("control", "horizontal")}`]: formContext.layout === "horizontal"
   }));
   const controlContainerClasses = computed(() => ({
     [`${ns.e("control-container")}`]: true,
-    [`${ns.em("control-container", "horizontal")}`]: labelData.layout === "horizontal",
+    [`${ns.em("control-container", "horizontal")}`]: formContext.layout === "horizontal",
     [`${ns.em("control-container", "has-feedback")}`]: Boolean(feedbackStatus.value),
     [`${ns.em("control-container", "feedback-error")}`]: Boolean(feedbackStatus.value === "error")
   }));
@@ -11763,8 +11665,11 @@ function useFormControl(props) {
 }
 function useFormControlValidate() {
   const formItemContext = inject(FORM_ITEM_TOKEN);
+  const showPopover = computed(() => formItemContext.messageType === "popover" && formItemContext.validateState === "error");
+  const showMessage = computed(() => formItemContext.messageType === "text" && formItemContext.validateState === "error");
   const errorMessage = computed(() => formItemContext.validateMessage);
-  return { errorMessage };
+  const popPosition = computed(() => formItemContext.popPosition);
+  return { showPopover, showMessage, errorMessage, popPosition };
 }
 var formControl = "";
 var FormControl = defineComponent({
@@ -11772,49 +11677,56 @@ var FormControl = defineComponent({
   props: formControlProps,
   setup(props, ctx2) {
     const formControl2 = ref();
-    const uid = lodash.exports.uniqueId("dfc-");
     const ns = useNamespace("form");
     const {
       controlClasses,
       controlContainerClasses
     } = useFormControl(props);
     const {
-      errorMessage
+      showPopover,
+      showMessage,
+      errorMessage,
+      popPosition
     } = useFormControlValidate();
-    return () => {
-      var _a, _b;
-      return createVNode("div", {
-        "class": controlClasses.value,
-        "ref": formControl2,
-        "data-uid": uid
-      }, [createVNode("div", {
-        "class": controlContainerClasses.value
-      }, [createVNode("div", {
-        "class": ns.e("control-content"),
-        "id": uid
-      }, [(_b = (_a = ctx2.slots).default) == null ? void 0 : _b.call(_a)])]), createVNode("div", {
-        "class": ns.e("control-info")
-      }, [errorMessage.value && createVNode("div", {
-        "class": "error-message"
-      }, [errorMessage.value]), props.extraInfo && createVNode("div", {
-        "class": ns.e("control-extra")
-      }, [props.extraInfo])])]);
-    };
+    return () => createVNode("div", {
+      "class": controlClasses.value,
+      "ref": formControl2
+    }, [createVNode("div", {
+      "class": controlContainerClasses.value
+    }, [createVNode(Popover, {
+      "is-open": showPopover.value,
+      "trigger": "manually",
+      "content": errorMessage.value,
+      "pop-type": "error",
+      "position": popPosition.value
+    }, {
+      reference: () => {
+        var _a, _b;
+        return createVNode("div", {
+          "class": ns.e("control-content")
+        }, [(_b = (_a = ctx2.slots).default) == null ? void 0 : _b.call(_a)]);
+      }
+    })]), createVNode("div", {
+      "class": ns.e("control-info")
+    }, [showMessage.value && createVNode("div", {
+      "class": "error-message"
+    }, [errorMessage.value]), props.extraInfo && createVNode("div", {
+      "class": ns.e("control-extra")
+    }, [props.extraInfo])])]);
   }
 });
 var formOperation = "";
 var FormOperation = defineComponent({
   name: "DFormOperation",
   setup(props, ctx2) {
-    const formContext = reactive(inject(FORM_TOKEN));
-    const labelData = reactive(formContext.labelData);
+    const formContext = inject(FORM_TOKEN);
     const LabelSizeMap = {
       sm: 80,
       md: 100,
       lg: 150
     };
     const styles = computed(() => ({
-      marginLeft: labelData.layout === "horizontal" ? `${LabelSizeMap[labelData.labelSize] + 16}px` : void 0
+      marginLeft: formContext.layout === "horizontal" ? `${LabelSizeMap[formContext.labelSize] + 16}px` : void 0
     }));
     return () => {
       var _a, _b;
@@ -11825,360 +11737,12 @@ var FormOperation = defineComponent({
     };
   }
 });
-var style = "";
-function getAvaliableRuleObj(ruleName, value) {
-  if (!ruleName) {
-    console.error("[v-d-validate] validator's key is invalid");
-    return null;
-  }
-  switch (ruleName) {
-    case "maxlength":
-      return {
-        type: "string",
-        max: value,
-        asyncValidator: (rule, val) => {
-          return new Promise((resolve, reject) => {
-            if (val.length > value) {
-              reject("\u6700\u5927\u957F\u5EA6\u4E3A" + value);
-            } else {
-              resolve("\u6821\u9A8C\u901A\u8FC7");
-            }
-          });
-        }
-      };
-    case "minlength":
-      return {
-        type: "string",
-        min: value,
-        asyncValidator: (rule, val) => {
-          return new Promise((resolve, reject) => {
-            if (val.length < value) {
-              reject("\u6700\u5C0F\u957F\u5EA6\u4E3A" + value);
-            } else {
-              resolve("\u6821\u9A8C\u901A\u8FC7");
-            }
-          });
-        }
-      };
-    case "min":
-      return {
-        type: "number",
-        asyncValidator: (rule, val) => {
-          return new Promise((resolve, reject) => {
-            if (val < value) {
-              reject("\u6700\u5C0F\u503C\u4E3A" + value);
-            } else {
-              resolve("\u6821\u9A8C\u901A\u8FC7");
-            }
-          });
-        }
-      };
-    case "max":
-      return {
-        type: "number",
-        asyncValidator: (rule, val) => {
-          return new Promise((resolve, reject) => {
-            if (val > value) {
-              reject("\u6700\u5927\u503C\u4E3A" + value);
-            } else {
-              resolve("\u6821\u9A8C\u901A\u8FC7");
-            }
-          });
-        }
-      };
-    case "required":
-      return {
-        reqiured: true,
-        asyncValidator: (rule, val) => {
-          return new Promise((resolve, reject) => {
-            if (!val) {
-              reject("\u5FC5\u586B\u9879");
-            } else {
-              resolve("\u6821\u9A8C\u901A\u8FC7");
-            }
-          });
-        }
-      };
-    case "requiredTrue":
-      return {
-        asyncValidator: (rule, val) => {
-          return new Promise((resolve, reject) => {
-            if (!val) {
-              reject("\u5FC5\u987B\u4E3Atrue\u503C");
-            } else {
-              resolve("\u6821\u9A8C\u901A\u8FC7");
-            }
-          });
-        }
-      };
-    case "email":
-      return {
-        type: "email",
-        message: "\u90AE\u7BB1\u683C\u5F0F\u4E0D\u6B63\u786E"
-      };
-    case "pattern":
-      return {
-        type: "regexp",
-        pattern: value,
-        message: "\u53EA\u80FD\u5305\u542B\u6570\u5B57\u4E0E\u5927\u5C0F\u5199\u5B57\u7B26",
-        validator: (rule, val) => value.test(val)
-      };
-    case "whitespace":
-      return {
-        message: "\u8F93\u5165\u4E0D\u80FD\u5168\u90E8\u4E3A\u7A7A\u683C\u6216\u7A7A\u5B57\u7B26",
-        validator: (rule, val) => !!val.trim()
-      };
-    default:
-      return {
-        [ruleName]: value
-      };
-  }
-}
-function getKeyValueOfObjectList(obj) {
-  const kvArr = [];
-  for (const key in obj) {
-    if (Object.prototype.hasOwnProperty.call(obj, key)) {
-      kvArr.push({
-        key,
-        value: obj[key]
-      });
-    }
-  }
-  return kvArr;
-}
-function handleErrorStrategy(el) {
-  const classList = [...el.classList];
-  classList.push("devui-validate-rules-error-pristine");
-  el.setAttribute("class", classList.join(" "));
-}
-function handleErrorStrategyPass(el) {
-  const classList = [...el.classList];
-  const index2 = classList.indexOf("devui-validate-rules-error-pristine");
-  index2 !== -1 && classList.splice(index2, 1);
-  el.setAttribute("class", classList.join(" "));
-}
-function getFormControlUID(el) {
-  if (el.tagName.toLocaleLowerCase() === "body") {
-    return "";
-  }
-  if (el.parentElement.id.startsWith("dfc-")) {
-    return el.parentElement.id;
-  } else {
-    getFormControlUID(el.parentElement);
-  }
-}
-function handleValidateError({
-  el,
-  tipEl,
-  message = "",
-  isFormTag,
-  messageShowType,
-  dfcUID,
-  popPosition = "right-bottom",
-  updateOn
-}) {
-  if (isFormTag && messageShowType === "toast") {
-    alert(message);
-    return;
-  }
-  if (!dfcUID) {
-    dfcUID = getFormControlUID(el);
-  }
-  if (messageShowType === "popover") {
-    EventBus.emit("showPopoverErrorMessage", {
-      showPopover: true,
-      message,
-      uid: dfcUID,
-      popPosition,
-      updateOn
-    });
-    return;
-  }
-  tipEl.innerText = "" + message;
-  tipEl.style.display = "inline-flex";
-  tipEl.setAttribute("class", "devui-validate-tip");
-  handleErrorStrategy(el);
-}
-function handleValidatePass(el, tipEl) {
-  tipEl.style.display = "none";
-  handleErrorStrategyPass(el);
-}
-function getRefName(binding) {
-  const _refs = binding.instance.$refs;
-  const refName = Object.keys(_refs)[0];
-  return refName;
-}
-function getFormName(binding) {
-  const _refs = binding.instance.$refs;
-  const key = Object.keys(_refs)[0];
-  return _refs[key]["name"];
-}
-function validateFn({
-  validator,
-  modelValue,
-  el,
-  tipEl,
-  isFormTag,
-  messageShowType,
-  dfcUID,
-  popPosition,
-  updateOn
-}) {
-  validator.validate({ modelName: modelValue }).then(() => {
-    handleValidatePass(el, tipEl);
-  }).catch((err) => {
-    const { errors } = err;
-    if (!errors || errors.length === 0) {
-      return;
-    }
-    let msg = "";
-    if (typeof errors[0].message === "object") {
-      msg = errors[0].message.default;
-    } else {
-      msg = errors[0].message;
-    }
-    handleValidateError({ el, tipEl, message: msg, isFormTag, messageShowType, dfcUID, popPosition, updateOn });
-  });
-}
-function checkValidPopsition(positionStr) {
-  const validPosition = [
-    "left",
-    "right",
-    "top",
-    "bottom",
-    "left-top",
-    "left-bottom",
-    "top-left",
-    "top-right",
-    "right-top",
-    "right-bottom",
-    "bottom-left",
-    "bottom-right"
-  ];
-  const isValid = validPosition.includes(positionStr);
-  !isValid && console.warn(`invalid popPosition value '${positionStr}'.`);
-  return isValid;
-}
-var dValidateRules = {
-  mounted(el, binding, vnode) {
-    var _a;
-    const isFormTag = el.tagName === "FORM";
-    const dfcUID = el.parentNode.parentNode.parentElement.dataset.uid;
-    const refName = getRefName(binding);
-    const hasOptions = isObject(binding.value) && hasKey(binding.value, "options");
-    let { rules: bindingRules, options = {}, messageShowType = "popover" } = binding.value;
-    let { errorStrategy } = binding.value;
-    if (refName) {
-      messageShowType = (_a = binding.instance[refName]["messageShowType"]) != null ? _a : "popover";
-    }
-    let {
-      updateOn = "change",
-      errorStrategy: ErrorStrategy = "dirty",
-      asyncDebounceTime = 300,
-      popPosition = ["right", "bottom"]
-    } = options;
-    if (messageShowType === "popover") {
-      if (Array.isArray(popPosition)) {
-        popPosition = popPosition.length > 1 ? popPosition.join("-") : popPosition[0];
-        if (!checkValidPopsition(popPosition)) {
-          popPosition = "right-bottom";
-        }
-      } else if (!checkValidPopsition(popPosition)) {
-        popPosition = "right-bottom";
-      }
-    }
-    if (!errorStrategy) {
-      errorStrategy = ErrorStrategy;
-    }
-    let customRule = {};
-    if (hasOptions) {
-      customRule = bindingRules != null ? bindingRules : binding.value;
-    } else {
-      customRule = binding.value;
-    }
-    const isCustomValidator = customRule && isObject(customRule) && (hasKey(customRule, "validators") || hasKey(customRule, "asyncValidators"));
-    const rules2 = Array.isArray(customRule) ? customRule : [customRule];
-    const tipEl = document.createElement("span");
-    if (messageShowType !== "none") {
-      el.parentNode.append(tipEl);
-    }
-    const descriptor = {
-      modelName: []
-    };
-    rules2.forEach((rule) => {
-      const kvObjList = !Array.isArray(rule) && getKeyValueOfObjectList(rule);
-      let ruleObj = {};
-      let avaliableRuleObj = {};
-      kvObjList.forEach((item) => {
-        avaliableRuleObj = getAvaliableRuleObj(item.key, item.value);
-        ruleObj = __spreadValues(__spreadValues({}, ruleObj), avaliableRuleObj);
-      });
-      descriptor.modelName.push(ruleObj);
-    });
-    if (isCustomValidator) {
-      const { validators: validators2, asyncValidators } = customRule;
-      validators2 && validators2.forEach((item) => {
-        const ruleObj = {
-          message: (item == null ? void 0 : item.message) || "",
-          validator: (rule, value) => item.validator(rule, value)
-        };
-        descriptor.modelName.push(ruleObj);
-      });
-      asyncValidators && asyncValidators.forEach((item) => {
-        const ruleObj = {
-          message: (item == null ? void 0 : item.message) || "",
-          asyncValidator: (rule, value) => {
-            return new Promise(lodash.exports.debounce((resolve, reject) => {
-              const res = item.asyncValidator(rule, value);
-              if (res) {
-                resolve("");
-              } else {
-                reject(rule.message);
-              }
-            }, asyncDebounceTime));
-          }
-        };
-        descriptor.modelName.push(ruleObj);
-      });
-    }
-    const validator = new Schema(descriptor);
-    const htmlEventValidateHandler = (e) => {
-      const modelValue = e.target.value;
-      if (messageShowType === "popover") {
-        EventBus.emit("showPopoverErrorMessage", {
-          showPopover: false,
-          message: "",
-          uid: dfcUID,
-          popPosition,
-          updateOn
-        });
-      }
-      validateFn({ validator, modelValue, el, tipEl, isFormTag: false, messageShowType, dfcUID, popPosition, updateOn });
-    };
-    vnode.children[0].el.addEventListener(updateOn, htmlEventValidateHandler);
-    if (messageShowType === "popover" && updateOn === "change") {
-      vnode.children[0].el.addEventListener("focus", () => {
-        EventBus.emit("showPopoverErrorMessage", { showPopover: false, uid: dfcUID, updateOn });
-      });
-    }
-    if (errorStrategy === "pristine") {
-      handleErrorStrategy(el);
-      vnode.children[0].props.value = "" + vnode.children[0].props.value;
-    }
-    const formName = getFormName(binding);
-    formName && EventBus.on(`formSubmit:${formName}`, () => {
-      const modelValue = isFormTag ? "" : vnode.children[0].el.value;
-      validateFn({ validator, modelValue, el, tipEl, isFormTag, messageShowType, updateOn: "submit" });
-    });
-  }
-};
 var FormInstall = {
   title: "Form \u8868\u5355",
   category: "\u6570\u636E\u5F55\u5165",
   status: "75%",
   install(app) {
     app.component(Form.name, Form);
-    app.directive("d-validate-rules", dValidateRules);
     app.component(FormLabel.name, FormLabel);
     app.component(FormItem.name, FormItem);
     app.component(FormControl.name, FormControl);
@@ -12306,7 +11870,7 @@ var Fullscreen = defineComponent({
   props: fullscreenProps,
   emits: ["update:modelValue"],
   setup(props, ctx2) {
-    const slotElement = ref(null);
+    const slotElement = ref();
     useFullscreen(props, slotElement, ctx2);
     useKeydown(props, ctx2);
     return () => {
@@ -14330,8 +13894,30 @@ var Pagination = defineComponent({
   props: paginationProps,
   emits: ["pageIndexChange", "pageSizeChange", "update:pageSize", "update:pageIndex"],
   setup(props, {
-    emit
+    emit,
+    slots
   }) {
+    const {
+      autoHide,
+      pageSizeOptions,
+      total,
+      canChangePageSize,
+      lite,
+      size,
+      pageSizeDirection,
+      showPageSelector,
+      canViewTotal,
+      totalItemText,
+      maxItems,
+      preLink,
+      nextLink,
+      showTruePageIndex,
+      canJumpPage,
+      goToText,
+      pageIndex,
+      showJumpButton,
+      haveConfigMenu
+    } = toRefs(props);
     const totalPages = computed(() => Math.ceil(props.total / props.pageSize));
     const litePageOptions = computed(() => liteSelectOptions(totalPages.value));
     const cursor = computed({
@@ -14372,102 +13958,64 @@ var Pagination = defineComponent({
     const litePageIndexChange = (page) => {
       changeCursorEmit(page.value);
     };
-    return {
-      cursor,
-      totalPages,
-      changeCursorEmit,
-      currentPageSize,
-      pageSizeChange,
-      litePageOptions,
-      litePageIndexChange
+    return () => {
+      return autoHide.value && Math.min(...pageSizeOptions.value) > total.value ? null : createVNode("div", {
+        "class": "devui-pagination"
+      }, [
+        canChangePageSize.value && !lite.value && createVNode("div", {
+          "class": ["devui-page-size", size.value ? "devui-page-size-" + size.value : ""]
+        }, [createVNode(resolveComponent("d-select"), {
+          "options": pageSizeOptions.value,
+          "modelValue": currentPageSize.value,
+          "onValueChange": pageSizeChange,
+          "pageSizeDirection": pageSizeDirection.value
+        }, null)]),
+        (!lite.value || lite.value && showPageSelector.value) && canViewTotal.value && createVNode("div", {
+          "class": "devui-total-size"
+        }, [totalItemText.value, createTextVNode(": "), total.value]),
+        lite.value && showPageSelector.value && createVNode("div", {
+          "class": "devui-page-size"
+        }, [createVNode(resolveComponent("d-select"), {
+          "options": litePageOptions.value,
+          "disabled": total.value === 0,
+          "modelValue": cursor.value,
+          "onValueChange": litePageIndexChange,
+          "pageSizeDirection": pageSizeDirection.value
+        }, null)]),
+        createVNode(resolveComponent("page-num-btn"), mergeProps({
+          cursor: cursor.value,
+          totalPages: totalPages.value,
+          size: size.value,
+          lite: lite.value,
+          maxItems: maxItems.value,
+          preLink: preLink.value,
+          nextLink: nextLink.value,
+          showTruePageIndex: showTruePageIndex.value
+        }, {
+          "onChangeCursorEmit": changeCursorEmit
+        }), null),
+        canJumpPage.value && !lite.value && createVNode(resolveComponent("jump-page"), mergeProps({
+          goToText: goToText.value,
+          size: size.value,
+          pageIndex: pageIndex.value,
+          totalPages: totalPages.value,
+          cursor: cursor.value,
+          showJumpButton: showJumpButton.value
+        }, {
+          "onChangeCursorEmit": changeCursorEmit
+        }), null),
+        lite.value && haveConfigMenu.value && createVNode(resolveComponent("config-menu"), {
+          currentPageSize: currentPageSize.value,
+          pageSizeChange,
+          pageSizeOptions: pageSizeOptions.value
+        }, {
+          default: () => {
+            var _a;
+            return [(_a = slots.default) == null ? void 0 : _a.call(slots)];
+          }
+        })
+      ]);
     };
-  },
-  render() {
-    const {
-      total,
-      pageIndex,
-      pageSizeOptions,
-      pageSizeDirection,
-      preLink,
-      nextLink,
-      size,
-      canJumpPage,
-      canChangePageSize,
-      canViewTotal,
-      totalItemText,
-      goToText,
-      maxItems,
-      showJumpButton,
-      showTruePageIndex,
-      lite,
-      showPageSelector,
-      haveConfigMenu,
-      autoHide,
-      $slots,
-      cursor,
-      totalPages,
-      currentPageSize,
-      pageSizeChange,
-      changeCursorEmit,
-      litePageOptions,
-      litePageIndexChange
-    } = this;
-    return autoHide && Math.min(...pageSizeOptions) > total ? null : createVNode("div", {
-      "class": "devui-pagination"
-    }, [
-      canChangePageSize && !lite && createVNode("div", {
-        "class": ["devui-page-size", size ? "devui-page-size-" + size : ""]
-      }, [createVNode(resolveComponent("d-select"), {
-        "options": pageSizeOptions,
-        "modelValue": currentPageSize,
-        "onValueChange": pageSizeChange,
-        "pageSizeDirection": pageSizeDirection
-      }, null)]),
-      (!lite || lite && showPageSelector) && canViewTotal && createVNode("div", {
-        "class": "devui-total-size"
-      }, [totalItemText, createTextVNode(": "), total]),
-      lite && showPageSelector && createVNode("div", {
-        "class": "devui-page-size"
-      }, [createVNode(resolveComponent("d-select"), {
-        "options": litePageOptions,
-        "disabled": total === 0,
-        "modelValue": cursor,
-        "onValueChange": litePageIndexChange,
-        "pageSizeDirection": pageSizeDirection
-      }, null)]),
-      createVNode(resolveComponent("page-num-btn"), mergeProps({
-        cursor,
-        totalPages,
-        size,
-        lite,
-        maxItems,
-        preLink,
-        nextLink,
-        showTruePageIndex
-      }, {
-        "onChangeCursorEmit": changeCursorEmit
-      }), null),
-      canJumpPage && !lite && createVNode(resolveComponent("jump-page"), mergeProps({
-        goToText,
-        size,
-        pageIndex,
-        totalPages,
-        cursor,
-        showJumpButton
-      }, {
-        "onChangeCursorEmit": changeCursorEmit
-      }), null),
-      lite && haveConfigMenu && createVNode(resolveComponent("config-menu"), {
-        currentPageSize,
-        pageSizeChange,
-        pageSizeOptions
-      }, {
-        default: () => {
-          var _a;
-          return [(_a = $slots.default) == null ? void 0 : _a.call($slots)];
-        }
-      })
-    ]);
   }
 });
 var PaginationInstall = {
@@ -14694,14 +14242,57 @@ var PanelInstall = {
     app.component(PanelFooter.name, PanelFooter);
   }
 };
-var PopoverInstall = {
-  title: "Popover \u60AC\u6D6E\u63D0\u793A",
-  category: "\u53CD\u9988",
-  status: "100%",
-  install(app) {
-    app.component(Popover.name, Popover);
+function hasClass(el, className2) {
+  if (el.classList) {
+    return el.classList.contains(className2);
   }
-};
+  const originClass = el.className;
+  return ` ${originClass} `.indexOf(` ${className2} `) > -1;
+}
+function addClass(el, className2) {
+  if (el.classList) {
+    el.classList.add(className2);
+  } else {
+    if (!hasClass(el, className2)) {
+      el.className = `${el.className} ${className2}`;
+    }
+  }
+}
+function removeClass(el, className2) {
+  if (el.classList) {
+    el.classList.remove(className2);
+  } else {
+    if (hasClass(el, className2)) {
+      const originClass = el.className;
+      el.className = ` ${originClass} `.replace(` ${className2} `, " ");
+    }
+  }
+}
+function randomId(n = 8) {
+  const str = "abcdefghijklmnopqrstuvwxyz0123456789";
+  let result2 = "";
+  for (let i = 0; i < n; i++) {
+    result2 += str[parseInt((Math.random() * str.length).toString())];
+  }
+  return result2;
+}
+function setStyle(element, style) {
+  const oldStyle = {};
+  const styleKeys = Object.keys(style);
+  styleKeys.forEach((key) => {
+    oldStyle[key] = element.style[key];
+  });
+  styleKeys.forEach((key) => {
+    element.style[key] = style[key];
+  });
+  return oldStyle;
+}
+function middleNum(num, min = 0, max = 100) {
+  let middle = 0;
+  middle = Math.min(num, max);
+  middle = Math.max(middle, min);
+  return middle;
+}
 const progressProps = {
   height: {
     type: String,
@@ -14730,6 +14321,14 @@ const progressProps = {
   showContent: {
     type: Boolean,
     default: true
+  },
+  percentageTextPlacement: {
+    type: String,
+    default: "inside"
+  },
+  percentageTextColor: {
+    type: String,
+    default: ""
   }
 };
 var progress = "";
@@ -14741,11 +14340,17 @@ var Progress = defineComponent({
       height,
       percentage,
       percentageText,
+      percentageTextPlacement,
+      percentageTextColor,
       barBgColor,
       isCircle,
       strokeWidth,
       showContent
     } = toRefs(props);
+    const normalPercentage = ref(0);
+    effect(() => {
+      normalPercentage.value = middleNum(percentage.value);
+    });
     const data = reactive({
       pathString: "",
       trailPath: null,
@@ -14770,25 +14375,28 @@ var Progress = defineComponent({
       };
       data.strokePath = {
         stroke: barBgColor || null,
-        strokeDasharray: `${percentage.value / 100 * len}px ${len}px`,
+        strokeDasharray: `${normalPercentage.value / 100 * len}px ${len}px`,
         strokeDashoffset: `0`,
         transition: "stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s"
       };
     };
     setCircleProgress();
-    watch([height, percentage, percentageText, barBgColor, isCircle, strokeWidth, showContent], () => {
+    watch([height, normalPercentage, percentageText, percentageTextPlacement, percentageTextColor, barBgColor, isCircle, strokeWidth, showContent], () => {
       setCircleProgress();
     });
     return {
-      data
+      data,
+      normalPercentage
     };
   },
   render() {
     var _a;
     const {
       height,
-      percentage,
+      normalPercentage,
       percentageText,
+      percentageTextPlacement,
+      percentageTextColor,
       barBgColor,
       isCircle,
       strokeWidth,
@@ -14796,28 +14404,39 @@ var Progress = defineComponent({
       data,
       $slots
     } = this;
+    const isOutside = percentageTextPlacement === "outside";
+    const isInsideBg = percentageTextPlacement === "insideBg";
+    const createPercentageText = () => {
+      return createVNode("span", {
+        "style": {
+          lineHeight: height,
+          color: percentageTextColor
+        }
+      }, [percentageText]);
+    };
     const progressLine = createVNode("div", {
+      "class": "devui-progress-content"
+    }, [createVNode("div", {
       "class": "devui-progress--line",
       "style": {
         height,
         borderRadius: height
       }
     }, [createVNode("div", {
-      "class": "devui-progress-bar",
+      "class": ["devui-progress-bar", percentageTextPlacement],
       "style": {
         height,
         borderRadius: height,
-        width: `${percentage}%`,
+        width: `${normalPercentage}%`,
         backgroundColor: barBgColor
       }
-    }, null), createVNode("span", {
+    }, [!isOutside && !isInsideBg ? createPercentageText() : null]), isInsideBg ? createPercentageText() : null]), isOutside && !!percentageText ? createPercentageText() : null]);
+    const textElement = createVNode("span", {
+      "class": "devui-progress-circle-text",
       "style": {
-        lineHeight: height
+        color: percentageTextColor
       }
-    }, [percentageText])]);
-    const textElement = createVNode("span", {
-      "class": "devui-progress-circle-text"
-    }, [percentage, createTextVNode("%")]);
+    }, [normalPercentage, createTextVNode("%")]);
     const progressCircle = createVNode("div", {
       "class": "devui-progress-circle"
     }, [createVNode("svg", {
@@ -14835,7 +14454,7 @@ var Progress = defineComponent({
       "stroke-linecap": "round",
       "fill-opacity": "0",
       "stroke": barBgColor,
-      "stroke-width": percentage ? strokeWidth : 0,
+      "stroke-width": normalPercentage ? strokeWidth : 0,
       "style": data.strokePath
     }, null)]), showContent && ((_a = $slots.default) == null ? void 0 : _a.call($slots)), showContent && !$slots.default && textElement]);
     return createVNode("div", {
@@ -15185,7 +14804,8 @@ var Rate = defineComponent({
     } = this;
     return createVNode("div", {
       "class": "devui-star-container",
-      "onMouseleave": onMouseleave
+      "onMouseleave": onMouseleave,
+      "style": `--star-color: ${color}`
     }, [totalLevelArray.map((item, index2) => createVNode("div", {
       "class": `devui-star-align devui-pointer ${read ? "devui-only-read" : ""}`,
       "key": index2,
@@ -15231,9 +14851,8 @@ var Rate = defineComponent({
         width: item.width
       }
     }, [character]), !character && !icon && createVNode("span", {
-      "class": `devui-star-color-active devui-active-star devui-star-color-${type4}`,
+      "class": ["devui-star-color-active", "devui-active-star", !color ? `devui-star-color-${type4}` : "devui-star-color-customize"],
       "style": {
-        color,
         width: item.width
       }
     }, [createVNode("svg", {
@@ -15263,249 +14882,6 @@ var RateInstall = {
     app.component(Rate.name, Rate);
   }
 };
-const readTipProps = {
-  readTipOptions: {
-    type: Object
-  },
-  defaultTemplateProps: {
-    type: Object
-  }
-};
-var readTip = "";
-var TipsTemplate = defineComponent({
-  name: "DReadTipTemplate",
-  props: readTipProps,
-  emits: [],
-  setup(props, ctx2) {
-    const {
-      defaultTemplateProps
-    } = toRefs(props);
-    let rule = defaultTemplateProps.value;
-    const query = (rule == null ? void 0 : rule.id) ? `#${rule.id}` : rule.selector;
-    const styles = reactive({});
-    if (typeof rule.dataFn === "function") {
-      const dataFn = rule.dataFn({
-        element: document.querySelector(query),
-        rule
-      });
-      rule = __spreadValues(__spreadValues({}, rule), dataFn);
-    }
-    const temp = ref(null);
-    const deviation = (x) => {
-      let deviationConstant = x > 24 ? 0 : -(x / 2) + 2;
-      if (x <= 10) {
-        deviationConstant = -10;
-      }
-      return deviationConstant;
-    };
-    onMounted(() => {
-      var _a, _b;
-      const domBounding = (_a = document.querySelector(query)) == null ? void 0 : _a.getBoundingClientRect();
-      const {
-        width,
-        height
-      } = domBounding;
-      const distance = 10;
-      let positionTop = 0;
-      const heightDeviation = deviation(height);
-      const widthDeviation = deviation(width);
-      let positionLeft = 0;
-      const targetDom = (_b = document.querySelector(".read-tip-container")) == null ? void 0 : _b.getBoundingClientRect();
-      if (rule.appendToBody) {
-        positionTop = domBounding.y + document.documentElement.scrollTop;
-        positionLeft = domBounding.x;
-      }
-      switch (rule.position) {
-        case "top":
-          styles.top = positionTop - targetDom.height - distance + "px";
-          styles.left = positionLeft + widthDeviation + "px";
-          break;
-        case "left":
-          styles.top = positionTop + heightDeviation + "px";
-          styles.left = positionLeft - targetDom.width - distance + "px";
-          break;
-        case "bottom":
-          styles.top = positionTop + domBounding.height + distance + "px";
-          styles.left = positionLeft + widthDeviation + "px";
-          break;
-        case "right":
-          styles.top = positionTop + heightDeviation + "px";
-          styles.left = positionLeft + domBounding.width + distance + "px";
-          break;
-      }
-    });
-    return () => {
-      return createVNode(Teleport, {
-        "to": rule.appendToBody ? "body" : query
-      }, {
-        default: () => {
-          var _a, _b;
-          return [createVNode("div", {
-            "ref": temp,
-            "class": ["read-tip-container", rule.position, rule.overlayClassName],
-            "style": styles
-          }, [createVNode("span", {
-            "class": "after"
-          }, null), rule.contentTemplate ? (_b = (_a = ctx2.slots) == null ? void 0 : _a.default) == null ? void 0 : _b.call(_a) : createVNode(Fragment, null, [createVNode("div", {
-            "class": "title"
-          }, [rule.title]), createVNode("div", {
-            "class": "content"
-          }, [rule.content])])])];
-        }
-      });
-    };
-  }
-});
-const rules = (ruleList) => {
-  if (ruleList === null) {
-    return [];
-  }
-  if (typeof ruleList === "object" && !Array.isArray(ruleList)) {
-    ruleList = [ruleList];
-  }
-  ruleList = [...ruleList];
-  Array.isArray(ruleList) && ruleList.map((rule) => {
-    rule.status = false;
-  });
-  return ruleList;
-};
-var ReadTip = defineComponent({
-  name: "DReadTip",
-  props: readTipProps,
-  emits: [],
-  setup(props, ctx2) {
-    const defaultOptions2 = {
-      trigger: "hover",
-      showAnimate: false,
-      mouseenterTime: 100,
-      mouseleaveTime: 100,
-      position: "top",
-      overlayClassName: "",
-      appendToBody: true,
-      rules: {
-        selector: null
-      }
-    };
-    const options = __spreadValues(__spreadValues({}, defaultOptions2), props.readTipOptions);
-    const defaultSlot = ref(null);
-    const refRules = reactive(rules(options.rules));
-    const onMouseenter = (rule) => () => {
-      setTimeout(() => {
-        if (rule.id) {
-          const a = refRules.find((u) => u.id === rule.id);
-          a.status = true;
-        }
-        rule.status = true;
-      }, rule.mouseenterTime || options.mouseenterTime);
-    };
-    const onMouseleave = (rule) => () => {
-      setTimeout(() => {
-        if (rule.id) {
-          const a = refRules.find((u) => u.id === rule.id);
-          a.status = false;
-        }
-        rule.status = false;
-      }, rule.mouseleaveTime || options.mouseleaveTime);
-    };
-    const init = (ruleList, trigger = "hover") => {
-      ruleList.map((rule) => {
-        var _a;
-        rule.status = false;
-        trigger = rule.trigger || trigger;
-        rule.overlayClassName = rule.overlayClassName || options.overlayClassName;
-        rule.position = rule.position || options.position;
-        rule.contentTemplate = !!ctx2.slots.contentTemplate;
-        if (!("appendToBody" in rule)) {
-          rule.appendToBody = options.appendToBody;
-        }
-        const doms = (_a = defaultSlot.value) == null ? void 0 : _a.querySelectorAll(rule.selector);
-        [...doms].map((dom, index2) => {
-          if (rule.appendToBody === false) {
-            dom.style.position = "relative";
-          }
-          let newRule = reactive({
-            id: null
-          });
-          const id = rule.selector.slice(rule.selector[0] === "." ? 1 : 0) + index2;
-          if (index2 > 0) {
-            newRule = __spreadValues({}, rule);
-            dom.id = id;
-            newRule.id = id;
-            ruleList.push(newRule);
-          }
-          if (trigger === "hover") {
-            dom.addEventListener("mouseenter", onMouseenter(newRule.id ? newRule : rule));
-            dom.addEventListener("mouseleave", onMouseleave(newRule.id ? newRule : rule));
-          }
-        });
-      });
-      return ruleList;
-    };
-    function show(_, rule) {
-      rule.status = true;
-    }
-    const clickFn = () => {
-      refRules.forEach((element) => {
-        element.status = false;
-      });
-    };
-    onMounted(() => {
-      init(refRules, options.trigger);
-      document.addEventListener("click", clickFn, true);
-    });
-    onUnmounted(() => {
-      document.removeEventListener("click", clickFn);
-    });
-    const onClick = (e) => {
-      var _a;
-      for (const rule of refRules) {
-        const doms = (_a = defaultSlot.value) == null ? void 0 : _a.querySelectorAll(rule.selector);
-        for (const dom of doms) {
-          if (doms.length > 1) {
-            if (dom === e.target && rule.id) {
-              show(dom, rule);
-              return;
-            } else if (dom === e.target && !rule.id && !dom.id) {
-              show(dom, rule);
-              return;
-            }
-          } else if (dom === e.target) {
-            show(dom, rule);
-            return;
-          } else {
-            rule.status = false;
-          }
-        }
-      }
-    };
-    return () => {
-      var _a, _b;
-      return createVNode("div", {
-        "class": "devui-read-tip"
-      }, [createVNode("div", {
-        "ref": defaultSlot,
-        "onClick": onClick
-      }, [(_b = (_a = ctx2.slots) == null ? void 0 : _a.default) == null ? void 0 : _b.call(_a)]), refRules.map((rule) => createVNode("div", {
-        "data-test": "todo"
-      }, [rule.status && createVNode(TipsTemplate, {
-        "defaultTemplateProps": __spreadValues({}, rule)
-      }, {
-        default: () => {
-          var _a2, _b2;
-          return [rule.contentTemplate && ((_b2 = (_a2 = ctx2.slots) == null ? void 0 : _a2.contentTemplate) == null ? void 0 : _b2.call(_a2))];
-        }
-      })]))]);
-    };
-  }
-});
-var ReadTipInstall = {
-  title: "ReadTip \u9605\u8BFB\u63D0\u793A",
-  category: "\u53CD\u9988",
-  status: "100%",
-  install(app) {
-    app.component(ReadTip.name, ReadTip);
-  }
-};
 const resultProps = {
   icon: {
     type: String,
@@ -15779,6 +15155,7 @@ const searchProps = {
 };
 const SIZE_CLASS = {
   lg: "lg",
+  md: "md",
   sm: "sm"
 };
 const ICON_POSITION = {
@@ -15869,6 +15246,7 @@ var Search = defineComponent({
         autoFocus: props.autoFocus,
         modelValue: keywords.value,
         placeholder: props.placeholder,
+        maxLength: props.maxLength,
         cssClass: props.cssClass,
         onKeydown: onInputKeydown,
         "onUpdate:modelValue": onInputUpdate
@@ -16803,43 +16181,6 @@ var Tooltip = defineComponent({
     };
   }
 });
-function setStyle(element, style2) {
-  const oldStyle = {};
-  const styleKeys = Object.keys(style2);
-  styleKeys.forEach((key) => {
-    oldStyle[key] = element.style[key];
-  });
-  styleKeys.forEach((key) => {
-    element.style[key] = style2[key];
-  });
-  return oldStyle;
-}
-function hasClass(el, className2) {
-  if (el.classList) {
-    return el.classList.contains(className2);
-  }
-  const originClass = el.className;
-  return ` ${originClass} `.indexOf(` ${className2} `) > -1;
-}
-function addClass(el, className2) {
-  if (el.classList) {
-    el.classList.add(className2);
-  } else {
-    if (!hasClass(el, className2)) {
-      el.className = `${el.className} ${className2}`;
-    }
-  }
-}
-function removeClass(el, className2) {
-  if (el.classList) {
-    el.classList.remove(className2);
-  } else {
-    if (hasClass(el, className2)) {
-      const originClass = el.className;
-      el.className = ` ${originClass} `.replace(` ${className2} `, " ");
-    }
-  }
-}
 function normalizeEvent(evt) {
   return {
     pageX: evt.pageX,
@@ -17953,13 +17294,13 @@ function useTable(props) {
     [ns.m(`${props.size}`)]: true,
     [ns.m(`${props.borderType}`)]: Boolean(props.borderType)
   }));
-  const style2 = computed(() => ({
+  const style = computed(() => ({
     maxHeight: props.maxHeight,
     maxWidth: props.maxWidth,
     height: props.tableHeight,
     width: props.tableWidth
   }));
-  return { classes, style: style2 };
+  return { classes, style };
 }
 const useFixedColumn = (column) => {
   const ns = useNamespace("table");
@@ -18815,7 +18156,7 @@ var Table = defineComponent({
     provide(TABLE_TOKEN, table2);
     const {
       classes,
-      style: style2
+      style
     } = useTable(props);
     const isEmpty2 = computed(() => props.data.length === 0);
     const ns = useNamespace("table");
@@ -18834,7 +18175,7 @@ var Table = defineComponent({
       var _a, _b;
       return withDirectives(createVNode("div", {
         "class": ns.b(),
-        "style": style2.value
+        "style": style.value
       }, [createVNode("div", {
         "ref": hiddenColumns,
         "class": "hidden-columns"
@@ -19694,21 +19035,21 @@ var Timeline = defineComponent({
       props
     });
     const timeAxis = ref();
-    const style2 = reactive({
+    const style = reactive({
       marginLeft: "0px",
       height: "auto"
     });
     const setStyle2 = () => {
-      style2.height = "auto";
-      style2.marginLeft = "0px";
+      style.height = "auto";
+      style.marginLeft = "0px";
       if (props.direction === "horizontal") {
         nextTick(() => {
           var _a;
           const element = timeAxis.value;
           if (props.center) {
-            style2.marginLeft = (((_a = element == null ? void 0 : element.firstElementChild) == null ? void 0 : _a.clientWidth) || 0) / 2 + "px";
+            style.marginLeft = (((_a = element == null ? void 0 : element.firstElementChild) == null ? void 0 : _a.clientWidth) || 0) / 2 + "px";
           }
-          style2.height = Math.max(...Array.from(element == null ? void 0 : element.querySelectorAll(".devui-timeline-item-data-top")).map((el) => el.clientHeight), ...Array.from(element == null ? void 0 : element.querySelectorAll(".devui-timeline-item-data-bottom")).map((el) => el.clientHeight)) * 2 + Math.max(...Array.from(element == null ? void 0 : element.querySelectorAll(".devui-timeline-item-axis")).map((el) => el.clientHeight)) + "px";
+          style.height = Math.max(...Array.from(element == null ? void 0 : element.querySelectorAll(".devui-timeline-item-data-top")).map((el) => el.clientHeight), ...Array.from(element == null ? void 0 : element.querySelectorAll(".devui-timeline-item-data-bottom")).map((el) => el.clientHeight)) * 2 + Math.max(...Array.from(element == null ? void 0 : element.querySelectorAll(".devui-timeline-item-axis")).map((el) => el.clientHeight)) + "px";
         });
       }
     };
@@ -19774,7 +19115,7 @@ var Timeline = defineComponent({
       return createVNode("div", {
         "class": `devui-timeline devui-timeline-${getDirection()}  ${props.center ? "devui-timeline-" + getDirection() + "-center" : ""} `,
         "ref": timeAxis,
-        "style": style2
+        "style": style
       }, [renderItem()]);
     };
   }
@@ -20081,14 +19422,6 @@ function useToggle() {
     };
   };
 }
-function randomId(n = 8) {
-  const str = "abcdefghijklmnopqrstuvwxyz0123456789";
-  let result2 = "";
-  for (let i = 0; i < n; i++) {
-    result2 += str[parseInt((Math.random() * str.length).toString())];
-  }
-  return result2;
-}
 function omit(obj, ...keys) {
   return Object.entries(obj).filter((item) => !keys.includes(item[0])).reduce((acc, item) => Object.assign({}, acc, { [item[0]]: item[1] }), {});
 }
@@ -21124,7 +20457,6 @@ const installs = [
   ButtonInstall,
   CardInstall,
   CheckboxInstall,
-  CommentInstall,
   CountdownInstall,
   DatePickerInstall,
   DrawerInstall,
@@ -21148,7 +20480,6 @@ const installs = [
   ProgressInstall,
   RadioInstall,
   RateInstall,
-  ReadTipInstall,
   ResultInstall,
   RippleInstall,
   SearchInstall,
@@ -21174,4 +20505,4 @@ var vueDevui = {
     installs.forEach((p) => app.use(p));
   }
 };
-export { Alert, Aside, AutoComplete, Avatar, Badge, Button, Card, Checkbox, Col, Column, Comment, Content, Countdown, DatePicker, Drawer, DrawerService, Dropdown, DropdownMenu, EditableSelect, FixedOverlay, FlexibleOverlay, Footer$1 as Footer, Form, FormControl, FormItem, FormLabel, FormOperation, Fullscreen, Header$1 as Header, DIcon as Icon, ImagePreviewDirective, ImagePreviewService, DInput as Input, InputNumber, Layout, loadingDirective as Loading, loading as LoadingService, Modal, Notification, NotificationService, Pagination, Panel, PanelBody, PanelFooter, PanelHeader, Popover, Progress, Radio, RadioGroup, Rate, ReadTip, Result, RippleDirective, Row, Search, Select, Skeleton, SkeletonItem, Slider, Splitter, Statistic, Status, StickSlider, Switch, Tab, Table, Tabs, Tag, Textarea, Timeline, TimelineItem, Tooltip, Tree, Upload, vueDevui as default };
+export { Alert, Aside, AutoComplete, Avatar, Badge, Button, Card, Checkbox, CheckboxGroup, Col, Column, Content, Countdown, DatePicker, Drawer, DrawerService, Dropdown, DropdownMenu, EditableSelect, FixedOverlay, FlexibleOverlay, Footer$1 as Footer, Form, FormControl, FormItem, FormLabel, FormOperation, Fullscreen, Header$1 as Header, DIcon as Icon, ImagePreviewDirective, ImagePreviewService, DInput as Input, InputNumber, Layout, loadingDirective as Loading, loading as LoadingService, Modal, Notification, NotificationService, Pagination, Panel, PanelBody, PanelFooter, PanelHeader, Popover, Progress, Radio, RadioGroup, Rate, Result, RippleDirective, Row, Search, Select, Skeleton, SkeletonItem, Slider, Splitter, Statistic, Status, StickSlider, Switch, Tab, Table, Tabs, Tag, Textarea, Timeline, TimelineItem, Tooltip, Tree, Upload, vueDevui as default };