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

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, shallowRef, 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, onUpdated, getCurrentInstance, onBeforeMount } from "vue";
 import { offset, autoPlacement, arrow, shift, computePosition } from "@floating-ui/dom";
 import { onClickOutside } from "@vueuse/core";
 const AlertCloseIcon = () => createVNode("svg", {
@@ -392,6 +392,7 @@ function useInputHandle(ctx2, searchList, showNoResultItemTemplate, modelValue,
   const visible = ref(false);
   const inputRef = ref();
   const searchStatus = ref(false);
+  const isFocus = ref(false);
   const debounce = (cb, time) => {
     let timer;
     return (arg) => {
@@ -418,10 +419,14 @@ function useInputHandle(ctx2, searchList, showNoResultItemTemplate, modelValue,
     onInputDebounce(inp.value);
   };
   const onFocus = () => {
+    isFocus.value = true;
     handleSearch(modelValue.value);
     recentlyFocus(latestSource == null ? void 0 : latestSource.value);
     transInputFocusEmit.value && transInputFocusEmit.value();
   };
+  const onBlur = () => {
+    isFocus.value = false;
+  };
   const handleClose = () => {
     visible.value = false;
     searchStatus.value = false;
@@ -444,6 +449,8 @@ function useInputHandle(ctx2, searchList, showNoResultItemTemplate, modelValue,
     toggleMenu,
     onInput,
     onFocus,
+    onBlur,
+    isFocus,
     inputRef,
     visible,
     searchStatus
@@ -1068,7 +1075,7 @@ const FlexibleOverlay = defineComponent({
   }
 });
 var autoComplete = "";
-function _isSlot$4(s) {
+function _isSlot$5(s) {
   return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !isVNode(s);
 }
 var AutoComplete = defineComponent({
@@ -1105,7 +1112,9 @@ var AutoComplete = defineComponent({
     const {
       onInput,
       onFocus,
+      onBlur,
       inputRef,
+      isFocus,
       visible,
       searchStatus,
       handleClose,
@@ -1168,7 +1177,7 @@ var AutoComplete = defineComponent({
                       ${width.value + "px"}
                     `
                 }
-              }, [createVNode(DAutoCompleteDropdown, null, _isSlot$4(_slot = customRenderSolts()) ? _slot : {
+              }, [createVNode(DAutoCompleteDropdown, null, _isSlot$5(_slot = customRenderSolts()) ? _slot : {
                 default: () => [_slot]
               })])]
             })]
@@ -1193,7 +1202,7 @@ var AutoComplete = defineComponent({
                     ${width.value + "px"}
                   `
               }
-            }, [createVNode(DAutoCompleteDropdown, null, _isSlot$4(_slot2 = customRenderSolts()) ? _slot2 : {
+            }, [createVNode(DAutoCompleteDropdown, null, _isSlot$5(_slot2 = customRenderSolts()) ? _slot2 : {
               default: () => [_slot2]
             })])]
           })]
@@ -1211,10 +1220,11 @@ var AutoComplete = defineComponent({
         "disabled": disabled.value,
         "type": "text",
         "onClick": toggleMenu,
-        "class": ["devui-form-control", "devui-dropdown-origin", "devui-dropdown-origin-open", disabled.value && "disabled"],
+        "class": ["devui-form-control", "devui-dropdown-origin", isFocus.value && "devui-dropdown-origin-open", disabled.value && "disabled"],
         "placeholder": "Search",
         "onInput": onInput,
         "onFocus": onFocus,
+        "onBlur": onBlur,
         "value": modelValue.value,
         "ref": inputRef,
         "onKeydown": handlekeyDown
@@ -1753,7 +1763,7 @@ var Button = defineComponent({
         "onClick": onClick
       }, [icon.value && createVNode(DIcon, {
         "name": icon.value,
-        "size": "12px",
+        "size": "var(--devui-font-size, 12px)",
         "color": "",
         "class": iconClass.value
       }, null), createVNode("span", {
@@ -2689,86 +2699,25 @@ const inputProps = {
     default: void 0
   }
 };
-var input = "";
-const formProps = {
-  formData: {
-    type: Object,
-    default: {}
-  },
-  layout: {
-    type: String,
-    default: "horizontal"
-  },
-  labelSize: {
-    type: String,
-    default: ""
-  },
-  labelAlign: {
-    type: String,
-    default: "start"
-  },
-  rules: {
-    type: Object,
-    default: {}
-  },
-  columnsClass: {
-    type: String,
-    default: ""
-  },
-  name: {
+const formItemProps = {
+  field: {
     type: String,
     default: ""
   },
-  messageShowType: {
-    type: String,
-    default: "popover"
-  }
-};
-const formItemProps = {
   dHasFeedback: {
     type: Boolean,
     default: false
   },
-  prop: {
-    type: String,
-    default: ""
-  }
-};
-const formLabelProps = {
   required: {
     type: Boolean,
     default: false
   },
-  hasHelp: {
-    type: Boolean,
-    default: false
-  },
-  helpTips: {
-    type: String,
-    default: ""
-  }
-};
-const formControlProps = {
-  feedbackStatus: {
-    type: String,
-    default: ""
-  },
-  extraInfo: {
-    type: String,
-    default: ""
+  rules: {
+    type: [Object, Array]
   }
 };
-const dFormEvents = {
-  addField: "d.form.addField",
-  removeField: "d.form.removeField"
-};
-const formInjectionKey = Symbol("dForm");
-const formItemInjectionKey = Symbol("dFormItem");
-const dFormItemEvents = {
-  blur: "d.form.blur",
-  change: "d.form.change",
-  input: "d.form.input"
-};
+const FORM_ITEM_TOKEN = Symbol("dFormItem");
+var input = "";
 var DInput = defineComponent({
   name: "DInput",
   directives: {
@@ -2783,19 +2732,17 @@ var DInput = defineComponent({
   props: inputProps,
   emits: ["update:modelValue", "focus", "blur", "change", "keydown"],
   setup(props, ctx2) {
-    const formItem2 = inject(formItemInjectionKey, {});
-    const hasFormItem = Object.keys(formItem2).length > 0;
+    const formItemContext = inject(FORM_ITEM_TOKEN);
     const sizeCls = computed(() => `devui-input-${props.size}`);
     const showPwdIcon = ref(false);
     const inputType = ref("text");
-    const inputCls = computed(() => {
-      return {
-        error: props.error,
-        [props.cssClass]: true,
-        "devui-input-restore": showPwdIcon.value,
-        [sizeCls.value]: props.size !== ""
-      };
-    });
+    const isValidateError = computed(() => (formItemContext == null ? void 0 : formItemContext.validateState) === "error");
+    const inputCls = computed(() => ({
+      "devui-error": props.error || isValidateError.value,
+      [props.cssClass]: true,
+      "devui-input-restore": showPwdIcon.value,
+      [sizeCls.value]: props.size !== ""
+    }));
     const showPreviewIcon = computed(() => inputType.value === "password");
     watch(() => props.showPassword, (flg) => {
       inputType.value = flg ? "password" : "text";
@@ -2803,17 +2750,18 @@ var DInput = defineComponent({
     }, {
       immediate: true
     });
+    watch(() => props.modelValue, () => {
+      formItemContext == null ? void 0 : formItemContext.validate("change").catch((err) => console.warn(err));
+    });
     const onInput = ($event) => {
       ctx2.emit("update:modelValue", $event.target.value);
-      hasFormItem && formItem2.formItemMitt.emit(dFormItemEvents.input);
     }, onFocus = () => {
       ctx2.emit("focus");
     }, onBlur = () => {
       ctx2.emit("blur");
-      hasFormItem && formItem2.formItemMitt.emit(dFormItemEvents.blur);
+      formItemContext == null ? void 0 : formItemContext.validate("blur").catch((err) => console.warn(err));
     }, onChange = ($event) => {
       ctx2.emit("change", $event.target.value);
-      hasFormItem && formItem2.formItemMitt.emit(dFormItemEvents.change);
     }, onKeydown = ($event) => {
       ctx2.emit("keydown", $event);
     }, onChangeInputType = () => {
@@ -3772,7 +3720,7 @@ var Drawer = defineComponent({
     });
   }
 });
-function _isSlot$3(s) {
+function _isSlot$4(s) {
   return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !isVNode(s);
 }
 const defaultOptions$1 = {
@@ -3799,7 +3747,7 @@ function initInstance$1(state) {
       });
       return () => createVNode(Drawer, mergeProps(state, {
         "onUpdate:modelValue": handleVisibleChange
-      }), _isSlot$3(content2) ? content2 : {
+      }), _isSlot$4(content2) ? content2 : {
         default: () => [content2]
       });
     }
@@ -3920,7 +3868,7 @@ const useDropdownEvent = ({ id, isOpen, origin, dropdownRef, props, emit }) => {
     setTimeout(() => {
       subscriptions.push(subscribeEvent(document, "click", (e) => {
         const dropdownValues = [...dropdownMap.values()];
-        if (!isOpen.value || closeScope.value === "none" || dropdownEl.contains(e.target) && closeScope.value === "blank" || dropdownValues.some((item) => {
+        if (!isOpen.value || closeScope.value === "none" || (dropdownEl == null ? void 0 : dropdownEl.contains(e.target)) && closeScope.value === "blank" || dropdownValues.some((item) => {
           var _a;
           return (_a = item.toggleEl) == null ? void 0 : _a.contains(e.target);
         }) && dropdownValues.some((item) => {
@@ -4036,7 +3984,7 @@ function useOverlayProps(props, currentPosition, isOpen) {
   return { overlayModelValue, overlayShowValue, styles, classes, handlePositionChange };
 }
 var baseOverlay = "";
-function _isSlot$2(s) {
+function _isSlot$3(s) {
   return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !isVNode(s);
 }
 const CommonOverlay = defineComponent({
@@ -4048,7 +3996,7 @@ const CommonOverlay = defineComponent({
       }, {
         default: () => [createVNode(Transition, {
           "name": "devui-overlay-fade"
-        }, _isSlot$2(_slot = renderSlot(ctx2.slots, "default")) ? _slot : {
+        }, _isSlot$3(_slot = renderSlot(ctx2.slots, "default")) ? _slot : {
           default: () => [_slot]
         })]
       });
@@ -4201,6 +4149,7 @@ var Dropdown = defineComponent({
       align,
       offset: offset2,
       destroyOnHide,
+      shiftOffset,
       showAnimation
     } = toRefs(props);
     const origin = ref();
@@ -4254,6 +4203,7 @@ var Dropdown = defineComponent({
             "position": position.value,
             "align": align.value,
             "offset": offset2.value,
+            "shiftOffset": shiftOffset == null ? void 0 : shiftOffset.value,
             "onPositionChange": handlePositionChange,
             "class": classes.value,
             "style": styles.value
@@ -4715,6 +4665,36 @@ function mitt(n) {
     });
   } };
 }
+const formProps = {
+  data: {
+    type: Object,
+    default: () => ({})
+  },
+  layout: {
+    type: String,
+    default: "horizontal"
+  },
+  labelSize: {
+    type: String,
+    default: "md"
+  },
+  labelAlign: {
+    type: String,
+    default: "start"
+  },
+  rules: {
+    type: Object
+  },
+  messageShowType: {
+    type: String,
+    default: "popover"
+  }
+};
+const dFormEvents = {
+  addField: "d.form.addField",
+  removeField: "d.form.removeField"
+};
+const FORM_TOKEN = Symbol("dForm");
 var eventBus = mitt();
 const EventBus = eventBus;
 function isObject(obj) {
@@ -4726,123 +4706,39 @@ function hasKey(obj, key) {
   }
   return Object.prototype.hasOwnProperty.call(obj, key);
 }
-function getElOffset(curEl) {
-  let totalLeft = 0;
-  let totalTop = 0;
-  let par = curEl.offsetParent;
-  totalLeft += curEl.offsetLeft;
-  totalTop += curEl.offsetTop;
-  while (par) {
-    if (navigator.userAgent.indexOf("MSIE 8.0") === -1) {
-      totalTop += par.clientTop;
-      totalLeft += par.clientLeft;
-    }
-    totalTop += par.offsetTop;
-    totalLeft += par.offsetLeft;
-    par = par.offsetParent;
-  }
-  return { left: totalLeft, top: totalTop };
-}
-var form = "";
-var Form = defineComponent({
-  name: "DForm",
-  props: formProps,
-  emits: ["submit"],
-  setup(props, ctx2) {
-    const formMitt = mitt();
-    const fields = [];
-    const resetFormFields = () => {
-      fields.forEach((field) => {
-        field.resetField();
-      });
-    };
-    formMitt.on(dFormEvents.addField, (field) => {
-      if (field) {
-        fields.push(field);
-      }
-    });
-    formMitt.on(dFormEvents.removeField, (field) => {
-      if (field.prop) {
-        fields.splice(fields.indexOf(field), 1);
-      }
-    });
-    provide(formInjectionKey, {
-      formData: props.formData,
-      formMitt,
-      labelData: {
-        layout: props.layout,
-        labelSize: props.labelSize,
-        labelAlign: props.labelAlign
-      },
-      rules: props.rules,
-      columnsClass: props.columnsClass,
-      messageShowType: "popover"
-    });
-    const onSubmit = (e) => {
-      e.preventDefault();
-      ctx2.emit("submit", e);
-      EventBus.emit(`formSubmit:${props.name}`);
-    };
-    return {
-      fields,
-      formMitt,
-      onSubmit,
-      resetFormFields
-    };
-  },
-  render() {
-    var _a, _b;
-    const {
-      onSubmit
-    } = this;
-    return createVNode("form", {
-      "onSubmit": onSubmit,
-      "class": "devui-form"
-    }, [(_b = (_a = this.$slots).default) == null ? void 0 : _b.call(_a)]);
+function createBem(namespace, element, modifier) {
+  let cls = namespace;
+  if (element) {
+    cls += `__${element}`;
   }
-});
-const popoverProps = {
-  isOpen: {
-    type: Boolean,
-    default: false
-  },
-  position: {
-    type: Array,
-    default: ["bottom"]
-  },
-  align: {
-    type: String,
-    default: null
-  },
-  offset: {
-    type: [Number, Object],
-    default: 8
-  },
-  content: {
-    type: String,
-    default: ""
-  },
-  trigger: {
-    type: String,
-    default: "click"
-  },
-  popType: {
-    type: String,
-    default: "default"
-  },
-  showAnimation: {
-    type: Boolean,
-    default: true
-  },
-  mouseEnterDelay: {
-    type: Number,
-    default: 150
-  },
-  mouseLeaveDelay: {
-    type: Number,
-    default: 100
+  if (modifier) {
+    cls += `--${modifier}`;
   }
-};
+  return cls;
+}
+function useNamespace(block) {
+  const namespace = `devui-${block}`;
+  const b = () => createBem(namespace);
+  const e = (element) => element ? createBem(namespace, element) : "";
+  const m = (modifier) => modifier ? createBem(namespace, "", modifier) : "";
+  const em = (element, modifier) => element && modifier ? createBem(namespace, element, modifier) : "";
+  return {
+    b,
+    e,
+    m,
+    em
+  };
+}
+function useFieldCollection() {
+  const itemContexts = [];
+  const addItemContext = (field) => {
+    itemContexts.push(field);
+  };
+  const removeItemContext = (field) => {
+    itemContexts.splice(itemContexts.indexOf(field), 1);
+  };
+  return { itemContexts, addItemContext, removeItemContext };
+}
 var commonjsGlobal = typeof globalThis !== "undefined" ? globalThis : typeof window !== "undefined" ? window : typeof global !== "undefined" ? global : typeof self !== "undefined" ? self : {};
 var lodash = { exports: {} };
 /**
@@ -9157,7 +9053,7 @@ var lodash = { exports: {} };
       var mergeWith = createAssigner(function(object4, source, srcIndex, customizer) {
         baseMerge(object4, source, srcIndex, customizer);
       });
-      var omit = flatRest(function(object4, paths) {
+      var omit2 = flatRest(function(object4, paths) {
         var result3 = {};
         if (object4 == null) {
           return result3;
@@ -9845,7 +9741,7 @@ var lodash = { exports: {} };
       lodash2.mixin = mixin;
       lodash2.negate = negate;
       lodash2.nthArg = nthArg;
-      lodash2.omit = omit;
+      lodash2.omit = omit2;
       lodash2.omitBy = omitBy;
       lodash2.once = once;
       lodash2.orderBy = orderBy;
@@ -10255,64 +10151,217 @@ var lodash = { exports: {} };
     }
   }).call(commonjsGlobal);
 })(lodash, lodash.exports);
-const TransformOriginMap$1 = {
-  top: "50% calc(100% + 8px)",
-  bottom: "50% -8px",
-  left: "calc(100% + 8px)",
-  right: "-8px 50%"
-};
-function usePopover(props, visible, placement, origin, popoverRef) {
-  const { trigger, isOpen } = toRefs(props);
-  const overlayStyles = computed(() => ({
-    zIndex: 1060,
-    transformOrigin: TransformOriginMap$1[placement.value]
-  }));
-  const onDocumentClick = (e) => {
-    var _a, _b;
-    if (!((_a = origin.value) == null ? void 0 : _a.contains(e.target)) && !((_b = popoverRef.value.$el) == null ? void 0 : _b.contains(e.target))) {
-      visible.value = false;
+function useFormValidation(itemContexts) {
+  const getValidateFields = (fields) => {
+    if (!itemContexts.length) {
+      return [];
+    }
+    const normalizedFields = lodash.exports.castArray(fields);
+    const filteredFields = normalizedFields.length ? itemContexts.filter((context) => context.field && normalizedFields.includes(context.field)) : itemContexts;
+    if (!filteredFields.length) {
+      return [];
     }
+    return filteredFields;
   };
-  watch(isOpen, (isOpenVal) => {
-    visible.value = isOpenVal;
-  });
-  watch(visible, () => {
-    if (visible.value && trigger.value !== "manually") {
-      document.addEventListener("click", onDocumentClick);
-    } else {
-      document.removeEventListener("click", onDocumentClick);
+  const execValidateFields = async (fields = []) => {
+    const validateFields2 = getValidateFields(fields);
+    if (!validateFields2.length) {
+      return true;
     }
-  });
-  onUnmounted(() => {
-    document.removeEventListener("click", onDocumentClick);
-  });
-  return { overlayStyles };
-}
-function usePopoverEvent(props, visible, origin) {
-  const { trigger, position, mouseEnterDelay, mouseLeaveDelay } = toRefs(props);
-  const isClick = computed(() => trigger.value === "click");
-  const placement = ref(position.value[0].split("-")[0]);
-  const isEnter = ref(false);
-  const onClick = () => isClick.value && (visible.value = !visible.value);
-  const enter = lodash.exports.debounce(() => {
-    isEnter.value && (visible.value = true);
-  }, mouseEnterDelay.value);
-  const leave = lodash.exports.debounce(() => {
-    !isEnter.value && (visible.value = false);
-  }, mouseLeaveDelay.value);
-  const onMouseenter = () => {
-    if (!isClick.value) {
-      isEnter.value = true;
-      enter();
+    let errors = {};
+    for (const field of validateFields2) {
+      try {
+        await field.validate("");
+      } catch (err) {
+        errors = __spreadValues(__spreadValues({}, errors), err);
+      }
     }
-  };
-  const onMouseleave = () => {
-    if (!isClick.value) {
-      isEnter.value = false;
-      leave();
+    if (!Object.keys(errors).length) {
+      return true;
     }
+    return Promise.reject(errors);
   };
-  const handlePositionChange = (pos) => {
+  const validateFields = async (fields = [], callback) => {
+    try {
+      const result2 = await execValidateFields(fields);
+      if (result2) {
+        callback == null ? void 0 : callback(result2);
+      }
+      return result2;
+    } catch (err) {
+      const invalidFields = err;
+      callback == null ? void 0 : callback(false, invalidFields);
+      return !callback && Promise.reject(invalidFields);
+    }
+  };
+  const validate = async (callback) => validateFields(void 0, callback);
+  return { validate, validateFields };
+}
+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,
+      removeItemContext
+    } = useFieldCollection();
+    const {
+      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",
+      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", {
+        "onSubmit": onSubmit,
+        "class": ns.b()
+      }, [(_b = (_a = ctx2.slots).default) == null ? void 0 : _b.call(_a)]);
+    };
+  }
+});
+const formLabelProps = {
+  helpTips: {
+    type: String,
+    default: ""
+  }
+};
+const popoverProps = {
+  isOpen: {
+    type: Boolean,
+    default: false
+  },
+  position: {
+    type: Array,
+    default: ["bottom"]
+  },
+  align: {
+    type: String,
+    default: null
+  },
+  offset: {
+    type: [Number, Object],
+    default: 8
+  },
+  content: {
+    type: String,
+    default: ""
+  },
+  trigger: {
+    type: String,
+    default: "click"
+  },
+  popType: {
+    type: String,
+    default: "default"
+  },
+  showAnimation: {
+    type: Boolean,
+    default: true
+  },
+  mouseEnterDelay: {
+    type: Number,
+    default: 150
+  },
+  mouseLeaveDelay: {
+    type: Number,
+    default: 100
+  }
+};
+const TransformOriginMap$1 = {
+  top: "50% calc(100% + 8px)",
+  bottom: "50% -8px",
+  left: "calc(100% + 8px)",
+  right: "-8px 50%"
+};
+function usePopover(props, visible, placement, origin, popoverRef) {
+  const { trigger, isOpen } = toRefs(props);
+  const overlayStyles = computed(() => ({
+    zIndex: 1060,
+    transformOrigin: TransformOriginMap$1[placement.value]
+  }));
+  const onDocumentClick = (e) => {
+    var _a, _b;
+    if (!((_a = origin.value) == null ? void 0 : _a.contains(e.target)) && !((_b = popoverRef.value.$el) == null ? void 0 : _b.contains(e.target))) {
+      visible.value = false;
+    }
+  };
+  watch(isOpen, (isOpenVal) => {
+    visible.value = isOpenVal;
+  });
+  watch(visible, () => {
+    if (visible.value && trigger.value !== "manually") {
+      document.addEventListener("click", onDocumentClick);
+    } else {
+      document.removeEventListener("click", onDocumentClick);
+    }
+  });
+  onUnmounted(() => {
+    document.removeEventListener("click", onDocumentClick);
+  });
+  return { overlayStyles };
+}
+function usePopoverEvent(props, visible, origin) {
+  const { trigger, position, mouseEnterDelay, mouseLeaveDelay } = toRefs(props);
+  const isClick = computed(() => trigger.value === "click");
+  const placement = ref(position.value[0].split("-")[0]);
+  const isEnter = ref(false);
+  const onClick = () => isClick.value && (visible.value = !visible.value);
+  const enter = lodash.exports.debounce(() => {
+    isEnter.value && (visible.value = true);
+  }, mouseEnterDelay.value);
+  const leave = lodash.exports.debounce(() => {
+    !isEnter.value && (visible.value = false);
+  }, mouseLeaveDelay.value);
+  const onMouseenter = () => {
+    if (!isClick.value) {
+      isEnter.value = true;
+      enter();
+    }
+  };
+  const onMouseleave = () => {
+    if (!isClick.value) {
+      isEnter.value = false;
+      leave();
+    }
+  };
+  const handlePositionChange = (pos) => {
     placement.value = pos.split("-")[0];
   };
   onMounted(() => {
@@ -10488,43 +10537,63 @@ var Popover = defineComponent({
     };
   }
 });
+function HelpTipsIcon() {
+  return createVNode("svg", {
+    "width": "16px",
+    "height": "16px",
+    "viewBox": "0 0 16 16"
+  }, [createVNode("g", {
+    "stroke": "none",
+    "stroke-width": "1",
+    "fill": "none",
+    "fill-rule": "evenodd"
+  }, [createVNode("g", null, [createVNode("path", {
+    "d": "M8.5,8.95852078 L8.5,11 L7.5,11 L7.5,8.5 C7.5,8.22385763             7.72385763,8 8,8 C9.1045695,8 10,7.1045695 10,6 C10,4.8954305             9.1045695,4 8,4 C6.8954305,4 6,4.8954305 6,6 L5,6 C5,4.34314575             6.34314575,3 8,3 C9.65685425,3 11,4.34314575 11,6 C11,7.48649814             9.91885667,8.72048173 8.5,8.95852078 L8.5,8.95852078 Z M8,16 C3.581722,16             0,12.418278 0,8 C0,3.581722 3.581722,0 8,0 C12.418278,0 16,3.581722 16,8 C16,12.418278             12.418278,16 8,16 Z M8,15 C11.8659932,15 15,11.8659932 15,8 C15,4.13400675 11.8659932,1 8,1             C4.13400675,1 1,4.13400675 1,8 C1,11.8659932 4.13400675,15 8,15 Z M7.5,12 L8.5,12 L8.5,13 L7.5,13 L7.5,12 Z",
+    "fill": "#293040",
+    "fill-rule": "nonzero"
+  }, null)])])]);
+}
+function useFormLabel() {
+  const { labelData } = 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"
+  }));
+  const labelInnerClasses = computed(() => ({
+    [`${ns.em("label", "required")}`]: formItemContext.required
+  }));
+  return { labelClasses, labelInnerClasses };
+}
 var formLabel = "";
 var FormLabel = defineComponent({
   name: "DFormLabel",
   props: formLabelProps,
   setup(props, ctx2) {
-    const dForm = reactive(inject(formInjectionKey, {}));
-    const labelData = reactive(dForm.labelData);
-    const isHorizontal = computed(() => labelData.layout === "horizontal").value;
-    const isLg = computed(() => labelData.labelSize === "lg").value;
-    const isSm = computed(() => labelData.labelSize === "sm").value;
-    const isCenter = computed(() => labelData.labelAlign === "center").value;
-    const isEnd = computed(() => labelData.labelAlign === "end").value;
-    const wrapperCls = `devui-form-label${isHorizontal ? isSm ? " devui-form-label_sm" : isLg ? " devui-form-label_lg" : " devui-form-label_sd" : ""}${isCenter ? " devui-form-label_center" : isEnd ? " devui-form-label_end" : ""}`;
-    const className2 = `${props.required ? " devui-required" : ""}`;
-    const style2 = {
-      display: isHorizontal ? "inline" : "inline-block"
-    };
+    const ns = useNamespace("form");
+    const {
+      labelClasses,
+      labelInnerClasses
+    } = useFormLabel();
     return () => {
       var _a, _b;
       return createVNode("span", {
-        "class": wrapperCls,
-        "style": style2
+        "class": labelClasses.value
       }, [createVNode("span", {
-        "class": className2
-      }, [(_b = (_a = ctx2.slots).default) == null ? void 0 : _b.call(_a), props.hasHelp && props.helpTips && createVNode(Popover, {
+        "class": labelInnerClasses.value
+      }, [(_b = (_a = ctx2.slots).default) == null ? void 0 : _b.call(_a)]), props.helpTips && createVNode(Popover, {
         "content": props.helpTips,
-        "showAnimation": false,
-        "position": "top",
-        "trigger": "hover"
+        "position": ["top"],
+        "trigger": "hover",
+        "pop-type": "info"
       }, {
-        reference: () => createVNode("span", {
-          "class": "devui-form-label-help"
-        }, [createVNode(DIcon, {
-          "name": "helping",
-          "color": "#252b3a"
-        }, null)])
-      })])]);
+        reference: () => createVNode(HelpTipsIcon, {
+          "class": ns.e("label-help")
+        }, null)
+      })]);
     };
   }
 });
@@ -11530,228 +11599,228 @@ 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);
+  const ns = useNamespace("form");
+  const itemClasses = computed(() => ({
+    [`${ns.em("item", "horizontal")}`]: labelData.layout === "horizontal",
+    [`${ns.em("item", "vertical")}`]: labelData.layout === "vertical"
+  }));
+  return { itemClasses };
+}
+function useFormItemRule(props) {
+  const formContext = inject(FORM_TOKEN);
+  const _rules = computed(() => {
+    const rules2 = props.rules ? lodash.exports.castArray(props.rules) : [];
+    const formRules = formContext.rules;
+    if (formRules && props.field) {
+      const _itemRules = lodash.exports.get(formRules, props.field, void 0);
+      if (_itemRules) {
+        rules2.push(...lodash.exports.castArray(_itemRules));
+      }
+    }
+    if (props.required) {
+      rules2.push({ required: Boolean(props.required) });
+    }
+    return rules2;
+  });
+  return { _rules };
+}
+function useFormItemValidate(props, _rules) {
+  const formContext = inject(FORM_TOKEN);
+  const validateState = ref("");
+  const validateMessage = ref("");
+  const computedField = computed(() => {
+    return typeof props.field === "string" ? props.field : "";
+  });
+  const fieldValue = computed(() => {
+    const formData = formContext.formData;
+    if (!formData || !props.field) {
+      return;
+    }
+    return formData[props.field];
+  });
+  const getRuleByTrigger = (triggerVal) => {
+    return _rules.value.filter((rule) => {
+      if (!rule.trigger || !triggerVal) {
+        return true;
+      }
+      if (Array.isArray(rule.trigger)) {
+        return rule.trigger.includes(triggerVal);
+      } else {
+        return rule.trigger === triggerVal;
+      }
+    }).map((_a) => {
+      var _b = _a, { trigger } = _b, rule = __objRest(_b, ["trigger"]);
+      return rule;
+    });
+  };
+  const onValidateSuccess = () => {
+    validateState.value = "success";
+    validateMessage.value = "";
+  };
+  const onValidateError = ({ errors }) => {
+    var _a;
+    validateState.value = "error";
+    validateMessage.value = ((_a = errors == null ? void 0 : errors[0]) == null ? void 0 : _a.message) || "";
+  };
+  const execValidate = async (rules2) => {
+    const ruleName = computedField.value;
+    const validator = new Schema({
+      [ruleName]: rules2
+    });
+    return validator.validate({ [ruleName]: fieldValue.value }, { firstFields: true }).then(() => {
+      onValidateSuccess();
+      return true;
+    }).catch((error) => {
+      onValidateError(error);
+      return Promise.reject(error);
+    });
+  };
+  const validate = async (trigger, callback) => {
+    const rules2 = getRuleByTrigger(trigger);
+    if (!rules2.length) {
+      callback == null ? void 0 : callback(true);
+      return true;
+    }
+    validateState.value = "pending";
+    return execValidate(rules2).then(() => {
+      callback == null ? void 0 : callback(true);
+      return true;
+    }).catch((error) => {
+      const { fields } = error;
+      callback == null ? void 0 : callback(false, fields);
+      return lodash.exports.isFunction(callback) ? false : Promise.reject(fields);
+    });
+  };
+  return { validateState, validateMessage, validate };
+}
 var formItem = "";
 var FormItem = defineComponent({
   name: "DFormItem",
   props: formItemProps,
   setup(props, ctx2) {
-    const formItemMitt = mitt();
-    const dForm = reactive(inject(formInjectionKey, {}));
-    const formData = reactive(dForm.formData);
-    const columnsClass = ref(dForm.columnsClass);
-    const initFormItemData = formData[props.prop];
-    const labelData = reactive(dForm.labelData);
-    const rules2 = reactive(dForm.rules);
-    const resetField = () => {
-      if (Array.isArray(initFormItemData)) {
-        formData[props.prop] = [...initFormItemData];
-      } else {
-        formData[props.prop] = initFormItemData;
-      }
-    };
-    const formItem2 = reactive({
-      dHasFeedback: props.dHasFeedback,
-      prop: props.prop,
-      formItemMitt,
-      resetField
-    });
-    provide(formItemInjectionKey, formItem2);
-    const isHorizontal = labelData.layout === "horizontal";
-    const isVertical = labelData.layout === "vertical";
-    const isColumns = labelData.layout === "columns";
-    const showMessage = ref(false);
-    const tipMessage = ref("");
-    const validate = (trigger) => {
-      const ruleKey = props.prop;
-      const ruleItem = rules2[ruleKey];
-      const descriptor = {};
-      descriptor[ruleKey] = ruleItem;
-      const validator = new Schema(descriptor);
-      validator.validate({
-        [ruleKey]: formData[ruleKey]
-      }).then(() => {
-        showMessage.value = false;
-        tipMessage.value = "";
-      }).catch(({
-        errors
-      }) => {
-        showMessage.value = true;
-        tipMessage.value = errors[0].message;
-      });
-    };
-    const validateEvents = [];
-    const addValidateEvents = () => {
-      if (rules2 && rules2[props.prop]) {
-        const ruleItem = rules2[props.prop];
-        let eventName = ruleItem["trigger"];
-        if (Array.isArray(ruleItem)) {
-          ruleItem.forEach((item) => {
-            eventName = item["trigger"];
-            const cb = () => validate();
-            validateEvents.push({
-              eventName: cb
-            });
-            formItem2.formItemMitt.on(dFormItemEvents[eventName], cb);
-          });
-        } else {
-          const cb = () => validate();
-          validateEvents.push({
-            eventName: cb
-          });
-          ruleItem && formItem2.formItemMitt.on(dFormItemEvents[eventName], cb);
-        }
-      }
-    };
-    const removeValidateEvents = () => {
-      if (rules2 && rules2[props.prop] && validateEvents.length > 0) {
-        validateEvents.forEach((item) => {
-          formItem2.formItemMitt.off(item.eventName, item.cb);
-        });
-      }
-    };
+    const formContext = inject(FORM_TOKEN);
+    const {
+      itemClasses
+    } = useFormItem();
+    const {
+      _rules
+    } = useFormItemRule(props);
+    const {
+      validateState,
+      validateMessage,
+      validate
+    } = useFormItemValidate(props, _rules);
+    const context = reactive(__spreadProps(__spreadValues({}, toRefs(props)), {
+      validateState,
+      validateMessage,
+      validate
+    }));
+    provide(FORM_ITEM_TOKEN, context);
     onMounted(() => {
-      dForm.formMitt.emit(dFormEvents.addField, formItem2);
-      addValidateEvents();
+      if (props.field) {
+        formContext == null ? void 0 : formContext.addItemContext(context);
+      }
     });
     onBeforeUnmount(() => {
-      dForm.formMitt.emit(dFormEvents.removeField, formItem2);
-      removeValidateEvents();
+      formContext == null ? void 0 : formContext.removeItemContext(context);
     });
     return () => {
       var _a, _b;
       return createVNode("div", {
-        "class": `devui-form-item${isHorizontal ? "" : isVertical ? " devui-form-item-vertical" : " devui-form-item-columns"}${isColumns ? " devui-column-item " + columnsClass.value : ""}`
-      }, [(_b = (_a = ctx2.slots).default) == null ? void 0 : _b.call(_a), createVNode("div", {
-        "class": `devui-validate-tip${isHorizontal ? " devui-validate-tip-horizontal" : ""}`
-      }, [showMessage.value && tipMessage.value])]);
+        "class": itemClasses.value
+      }, [(_b = (_a = ctx2.slots).default) == null ? void 0 : _b.call(_a)]);
     };
   }
 });
+const formControlProps = {
+  feedbackStatus: {
+    type: String
+  },
+  extraInfo: {
+    type: String,
+    default: ""
+  }
+};
+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"
+  }));
+  const controlContainerClasses = computed(() => ({
+    [`${ns.e("control-container")}`]: true,
+    [`${ns.em("control-container", "horizontal")}`]: labelData.layout === "horizontal",
+    [`${ns.em("control-container", "has-feedback")}`]: Boolean(feedbackStatus.value),
+    [`${ns.em("control-container", "feedback-error")}`]: Boolean(feedbackStatus.value === "error")
+  }));
+  return { controlClasses, controlContainerClasses };
+}
+function useFormControlValidate() {
+  const formItemContext = inject(FORM_ITEM_TOKEN);
+  const errorMessage = computed(() => formItemContext.validateMessage);
+  return { errorMessage };
+}
 var formControl = "";
 var FormControl = defineComponent({
   name: "DFormControl",
-  directives: {
-    clickoutside: clickoutsideDirective
-  },
   props: formControlProps,
   setup(props, ctx2) {
     const formControl2 = ref();
-    const dForm = reactive(inject(formInjectionKey, {}));
-    const labelData = reactive(dForm.labelData);
-    const isHorizontal = labelData.layout === "horizontal";
     const uid = lodash.exports.uniqueId("dfc-");
-    const showPopover = ref(false);
-    const updateOn = ref("change");
-    const tipMessage = ref("");
-    const popPosition = ref("bottom");
-    let rectInfo = {
-      width: 0,
-      height: 0
-    };
-    let elOffset = {
-      left: 0,
-      top: 0
-    };
-    let popoverLeftPosition = 0;
-    let popoverTopPosition = 0;
-    onMounted(() => {
-      const el = document.getElementById(uid);
-      elOffset = getElOffset(el);
-      EventBus.on("showPopoverErrorMessage", (data) => {
-        var _a;
-        if (uid === data.uid) {
-          rectInfo = el.getBoundingClientRect();
-          showPopover.value = data.showPopover;
-          tipMessage.value = data.message;
-          popPosition.value = data.popPosition;
-          popoverLeftPosition = popPosition.value === "top" || popPosition.value === "bottom" ? rectInfo.right - rectInfo.width / 2 : rectInfo.right;
-          popoverTopPosition = popPosition.value === "top" ? elOffset.top + rectInfo.height / 2 - rectInfo.height : elOffset.top + rectInfo.height / 2;
-          updateOn.value = (_a = data.updateOn) != null ? _a : "change";
-        }
-      });
-    });
-    const iconData = computed(() => {
-      switch (props.feedbackStatus) {
-        case "pending":
-          return {
-            name: "priority",
-            color: "#e9edfa"
-          };
-        case "success":
-          return {
-            name: "right-o",
-            color: "rgb(61, 204, 166)"
-          };
-        case "error":
-          return {
-            name: "error-o",
-            color: "rgb(249, 95, 91)"
-          };
-        default:
-          return {
-            name: "",
-            color: ""
-          };
-      }
-    });
-    const handleClickOutside = () => {
-      if (updateOn.value !== "change") {
-        showPopover.value = false;
-      }
-    };
+    const ns = useNamespace("form");
+    const {
+      controlClasses,
+      controlContainerClasses
+    } = useFormControl(props);
+    const {
+      errorMessage
+    } = useFormControlValidate();
     return () => {
-      var _a, _b, _c, _d, _e, _f, _g, _h;
-      const {
-        feedbackStatus,
-        extraInfo
-      } = props;
-      return withDirectives(createVNode("div", {
-        "class": "devui-form-control",
+      var _a, _b;
+      return createVNode("div", {
+        "class": controlClasses.value,
         "ref": formControl2,
         "data-uid": uid
-      }, [showPopover.value && createVNode(Teleport, {
-        "to": "body"
-      }, {
-        default: () => [createVNode("div", {
-          "style": {
-            position: "absolute",
-            left: popoverLeftPosition + "px",
-            top: popoverTopPosition + "px",
-            width: rectInfo.width + "px",
-            height: rectInfo.height + "px"
-          }
-        }, [createVNode(Popover, {
-          "controlled": updateOn.value !== "change",
-          "visible": showPopover.value,
-          "content": tipMessage.value,
-          "popType": "error",
-          "position": popPosition.value
-        }, null)])]
-      }), createVNode("div", {
-        "class": `devui-form-control-container${isHorizontal ? " devui-form-control-container-horizontal" : ""}${feedbackStatus ? " devui-has-feedback" : ""}${feedbackStatus === "error" ? " devui-feedback-error" : ""}`
       }, [createVNode("div", {
-        "class": "devui-control-content-wrapper",
+        "class": controlContainerClasses.value
+      }, [createVNode("div", {
+        "class": ns.e("control-content"),
         "id": uid
-      }, [(_b = (_a = ctx2.slots).default) == null ? void 0 : _b.call(_a)]), (feedbackStatus || ((_d = (_c = ctx2.slots).suffixTemplate) == null ? void 0 : _d.call(_c))) && createVNode("span", {
-        "class": "devui-feedback-status"
-      }, [((_f = (_e = ctx2.slots).suffixTemplate) == null ? void 0 : _f.call(_e)) ? (_h = (_g = ctx2.slots).suffixTemplate) == null ? void 0 : _h.call(_g) : createVNode(DIcon, {
-        "name": iconData.value.name,
-        "color": iconData.value.color
-      }, null)])]), extraInfo && createVNode("div", {
-        "class": "devui-form-control-extra-info"
-      }, [extraInfo])]), [[resolveDirective("clickoutside"), handleClickOutside]]);
+      }, [(_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])])]);
     };
   }
 });
 var formOperation = "";
 var FormOperation = defineComponent({
   name: "DFormOperation",
-  props: {},
   setup(props, ctx2) {
+    const formContext = reactive(inject(FORM_TOKEN));
+    const labelData = reactive(formContext.labelData);
+    const LabelSizeMap = {
+      sm: 80,
+      md: 100,
+      lg: 150
+    };
+    const styles = computed(() => ({
+      marginLeft: labelData.layout === "horizontal" ? `${LabelSizeMap[labelData.labelSize] + 16}px` : void 0
+    }));
     return () => {
       var _a, _b;
       return createVNode("div", {
-        "class": "devui-form-operation"
+        "class": "devui-form-operation",
+        "style": styles.value
       }, [(_b = (_a = ctx2.slots).default) == null ? void 0 : _b.call(_a)]);
     };
   }
@@ -11898,7 +11967,16 @@ function getFormControlUID(el) {
     getFormControlUID(el.parentElement);
   }
 }
-function handleValidateError({ el, tipEl, message = "", isFormTag, messageShowType, dfcUID, popPosition = "right-bottom", updateOn }) {
+function handleValidateError({
+  el,
+  tipEl,
+  message = "",
+  isFormTag,
+  messageShowType,
+  dfcUID,
+  popPosition = "right-bottom",
+  updateOn
+}) {
   if (isFormTag && messageShowType === "toast") {
     alert(message);
     return;
@@ -11907,7 +11985,13 @@ function handleValidateError({ el, tipEl, message = "", isFormTag, messageShowTy
     dfcUID = getFormControlUID(el);
   }
   if (messageShowType === "popover") {
-    EventBus.emit("showPopoverErrorMessage", { showPopover: true, message, uid: dfcUID, popPosition, updateOn });
+    EventBus.emit("showPopoverErrorMessage", {
+      showPopover: true,
+      message,
+      uid: dfcUID,
+      popPosition,
+      updateOn
+    });
     return;
   }
   tipEl.innerText = "" + message;
@@ -11929,7 +12013,17 @@ function getFormName(binding) {
   const key = Object.keys(_refs)[0];
   return _refs[key]["name"];
 }
-function validateFn({ validator, modelValue, el, tipEl, isFormTag, messageShowType, dfcUID, popPosition, updateOn }) {
+function validateFn({
+  validator,
+  modelValue,
+  el,
+  tipEl,
+  isFormTag,
+  messageShowType,
+  dfcUID,
+  popPosition,
+  updateOn
+}) {
   validator.validate({ modelName: modelValue }).then(() => {
     handleValidatePass(el, tipEl);
   }).catch((err) => {
@@ -11947,7 +12041,20 @@ function validateFn({ validator, modelValue, el, tipEl, isFormTag, messageShowTy
   });
 }
 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 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;
@@ -11959,11 +12066,7 @@ var dValidateRules = {
     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 { rules: bindingRules, options = {}, messageShowType = "popover" } = binding.value;
     let { errorStrategy } = binding.value;
     if (refName) {
       messageShowType = (_a = binding.instance[refName]["messageShowType"]) != null ? _a : "popover";
@@ -12042,7 +12145,13 @@ var dValidateRules = {
     const htmlEventValidateHandler = (e) => {
       const modelValue = e.target.value;
       if (messageShowType === "popover") {
-        EventBus.emit("showPopoverErrorMessage", { showPopover: false, message: "", uid: dfcUID, popPosition, updateOn });
+        EventBus.emit("showPopoverErrorMessage", {
+          showPopover: false,
+          message: "",
+          uid: dfcUID,
+          popPosition,
+          updateOn
+        });
       }
       validateFn({ validator, modelValue, el, tipEl, isFormTag: false, messageShowType, dfcUID, popPosition, updateOn });
     };
@@ -12063,32 +12172,17 @@ var dValidateRules = {
     });
   }
 };
-Form.install = function(app) {
-  app.component(Form.name, Form);
-  app.directive("d-validate-rules", dValidateRules);
-};
-FormLabel.install = function(app) {
-  app.component(FormLabel.name, FormLabel);
-};
-FormItem.install = function(app) {
-  app.component(FormItem.name, FormItem);
-};
-FormControl.install = function(app) {
-  app.component(FormControl.name, FormControl);
-};
-FormOperation.install = function(app) {
-  app.component(FormOperation.name, FormOperation);
-};
 var FormInstall = {
   title: "Form \u8868\u5355",
   category: "\u6570\u636E\u5F55\u5165",
   status: "75%",
   install(app) {
-    app.use(Form);
-    app.use(FormLabel);
-    app.use(FormItem);
-    app.use(FormControl);
-    app.use(FormOperation);
+    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);
+    app.component(FormOperation.name, FormOperation);
   }
 };
 const fullscreenProps = {
@@ -13023,7 +13117,7 @@ var InputNumber = defineComponent({
   props: inputNumberProps,
   emits: ["update:modelValue", "change", "input", "focus", "blur", "keydown"],
   setup(props, ctx2) {
-    const inputVal = ref(props.modelValue);
+    const inputVal = ref(props.modelValue < props.min ? props.min : props.modelValue);
     const focusVal = ref("");
     const isSize = computed(() => {
       return `devui-input-number-${props.size}`;
@@ -13038,7 +13132,18 @@ var InputNumber = defineComponent({
       if (inputVal.value >= props.max) {
         return;
       }
-      inputVal.value += props.step != 0 ? props.step : 1;
+      if (props.step !== 0) {
+        const maxSpaceVal = props.max - inputVal.value;
+        if (inputVal.value < props.max && maxSpaceVal < props.step) {
+          inputVal.value += maxSpaceVal;
+        } else if (inputVal.value < props.max && maxSpaceVal > props.step) {
+          inputVal.value += props.step;
+        } else {
+          inputVal.value += props.step;
+        }
+      } else {
+        inputVal.value += 1;
+      }
       focusVal.value = "active";
       ctx2.emit("change", inputVal.value);
       ctx2.emit("update:modelValue", inputVal.value);
@@ -13050,15 +13155,26 @@ var InputNumber = defineComponent({
       if (inputVal.value <= props.min) {
         return;
       }
-      inputVal.value -= props.step != 0 ? props.step : 1;
+      if (props.step !== 0) {
+        const minSpaceVal = inputVal.value - props.min;
+        if (inputVal.value > props.min && minSpaceVal > props.step) {
+          inputVal.value -= props.step;
+        } else if (inputVal.value > props.min && minSpaceVal < props.step) {
+          inputVal.value -= minSpaceVal;
+        } else {
+          inputVal.value -= props.step;
+        }
+      } else {
+        inputVal.value -= 1;
+      }
       focusVal.value = "active";
       ctx2.emit("change", inputVal.value);
       ctx2.emit("update:modelValue", inputVal.value);
     };
     const onInput = (val) => {
       inputVal.value = parseInt(val.data);
-      ctx2.emit("input", val.data);
-      ctx2.emit("update:modelValue", val.data);
+      ctx2.emit("input", inputVal.value);
+      ctx2.emit("update:modelValue", inputVal.value);
     };
     const onFocus = ($event) => {
       focusVal.value = "active";
@@ -13731,7 +13847,7 @@ var Notification = defineComponent({
     });
   }
 });
-function _isSlot$1(s) {
+function _isSlot$2(s) {
   return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !isVNode(s);
 }
 const defaultOptions = {
@@ -13748,7 +13864,7 @@ function initInstance(props, content2) {
       });
       return () => createVNode(Notification, mergeProps(props, {
         "onDestroy": app.unmount
-      }), _isSlot$1(content2) ? content2 : {
+      }), _isSlot$2(content2) ? content2 : {
         default: () => [content2]
       });
     }
@@ -14152,9 +14268,9 @@ var PageNumBtn = defineComponent({
         "class": "devui-pagination-link"
       }, [createTextVNode("...")])]),
       (() => {
-        const list = [];
+        const list2 = [];
         for (let i = showPageNum[0]; i <= showPageNum[1]; i++) {
-          list.push(createVNode("li", {
+          list2.push(createVNode("li", {
             "onClick": changeCursor.bind(null, i),
             "key": i,
             "class": {
@@ -14165,7 +14281,7 @@ var PageNumBtn = defineComponent({
             "class": "devui-pagination-link"
           }, [i])]));
         }
-        return list;
+        return list2;
       })(),
       showPageNum[1] < totalPages - 1 && createVNode("li", {
         "onClick": nextChange.bind(null, showPageNum[1] + 1),
@@ -14878,7 +14994,7 @@ var Radio = defineComponent({
   }
 });
 var radioGroup = "";
-function _isSlot(s) {
+function _isSlot$1(s) {
   return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !isVNode(s);
 }
 var RadioGroup = defineComponent({
@@ -14914,7 +15030,7 @@ var RadioGroup = defineComponent({
           return createVNode(Radio, {
             "key": item,
             "value": item
-          }, _isSlot(item) ? item : {
+          }, _isSlot$1(item) ? item : {
             default: () => [item]
           });
         });
@@ -16399,6 +16515,10 @@ const sliderProps = {
   tipsRenderer: {
     type: String,
     default: ""
+  },
+  color: {
+    type: String,
+    default: ""
   }
 };
 var slider = "";
@@ -16433,7 +16553,8 @@ var Slider = defineComponent({
       }
     }
     function setPostion(newPosition) {
-      const sliderWidth = Math.round(sliderRunway.value.clientWidth);
+      const clientWidth = !!sliderRunway.value ? sliderRunway.value.clientWidth : 0;
+      const sliderWidth = Math.round(clientWidth);
       if (newPosition < 0) {
         newPosition = 0;
       }
@@ -16478,7 +16599,8 @@ var Slider = defineComponent({
         "class": "devui-input__out-wrap"
       }, [createVNode("input", {
         "onInput": handleOnInput,
-        "value": inputValue.value + ""
+        "value": inputValue.value + "",
+        "disabled": props.disabled
       }, null)]) : "";
     };
     if (props.modelValue > props.max) {
@@ -16489,7 +16611,7 @@ var Slider = defineComponent({
       percentDispaly.value = (props.modelValue - props.min) * 100 / (props.max - props.min) + "%";
     }
     onMounted(() => {
-      const sliderWidth = sliderRunway.value.clientWidth;
+      const sliderWidth = !!sliderRunway.value ? sliderRunway.value.clientWidth : 0;
       currentPosition.value = sliderWidth * (inputValue.value - props.min) / (props.max - props.min);
     });
     function handleButtonMousedown(event) {
@@ -16504,7 +16626,8 @@ var Slider = defineComponent({
     }
     function handleRunwayMousedown(event) {
       if (!props.disabled && isClick) {
-        startX = event.target.getBoundingClientRect().left;
+        const _e = event.target;
+        startX = _e.getBoundingClientRect().left;
         const currentX = event.clientX;
         setPostion(currentX - startX);
         handleButtonMousedown(event);
@@ -16528,6 +16651,9 @@ var Slider = defineComponent({
         "class": "devui-slider_popover-content"
       }, [inputValue.value + " " + props.tipsRenderer])]);
     };
+    const color = computed(() => {
+      return props.disabled ? "" : props.color;
+    });
     return () => createVNode("div", {
       "class": "devui-slider"
     }, [createVNode("div", {
@@ -16538,12 +16664,14 @@ var Slider = defineComponent({
     }, [createVNode("div", {
       "class": "devui-slider__bar" + disableClass.value,
       "style": {
-        width: percentDispaly.value
+        width: percentDispaly.value,
+        backgroundColor: color.value
       }
     }, null), createVNode("div", {
       "class": "devui-slider__button" + disableClass.value,
       "style": {
-        left: percentDispaly.value
+        left: percentDispaly.value,
+        borderColor: color.value
       },
       "onMousedown": handleButtonMousedown,
       "onMouseenter": () => popoverShow.value = true,
@@ -17815,29 +17943,6 @@ const TableProps = {
   }
 };
 const TABLE_TOKEN = Symbol();
-function createBem(namespace, element, modifier) {
-  let cls = namespace;
-  if (element) {
-    cls += `__${element}`;
-  }
-  if (modifier) {
-    cls += `--${modifier}`;
-  }
-  return cls;
-}
-function useNamespace(block) {
-  const namespace = `devui-${block}`;
-  const b = () => createBem(namespace);
-  const e = (element) => element ? createBem(namespace, element) : "";
-  const m = (modifier) => modifier ? createBem(namespace, "", modifier) : "";
-  const em = (element, modifier) => element && modifier ? createBem(namespace, element, modifier) : "";
-  return {
-    b,
-    e,
-    m,
-    em
-  };
-}
 function useTable(props) {
   const ns = useNamespace("table");
   const classes = computed(() => ({
@@ -17940,15 +18045,15 @@ const createSelection = (dataSource, _data) => {
   watch(dataSource, (value) => {
     _checkList.value = new Array(value.length).fill(false);
   }, { deep: true, immediate: true });
-  watch(_checkList, (list) => {
-    if (list.length === 0) {
+  watch(_checkList, (list2) => {
+    if (list2.length === 0) {
       return;
     }
     let allTrue = true;
     let allFalse = true;
-    for (let i = 0; i < list.length; i++) {
-      allTrue && (allTrue = list[i]);
-      allFalse && (allFalse = !list[i]);
+    for (let i = 0; i < list2.length; i++) {
+      allTrue && (allTrue = list2[i]);
+      allFalse && (allFalse = !list2[i]);
     }
     _checkAllRecord.value = allTrue;
     _halfChecked.value = !(allFalse || allTrue);
@@ -17976,23 +18081,6 @@ const createSorter = (dataSource, _data) => {
   const thList = [];
   return { sortData, thList };
 };
-const createFilter = (dataSource, _data) => {
-  const fieldSet = /* @__PURE__ */ new Set();
-  const filterData = (field, results2) => {
-    fieldSet.add(field);
-    const fields = [...fieldSet];
-    _data.value = dataSource.value.filter((item) => {
-      return fields.reduce((prev, fieldKey) => {
-        return prev && results2.indexOf(item[fieldKey]) !== -1;
-      }, true);
-    });
-  };
-  const resetFilterData = () => {
-    fieldSet.clear();
-    _data.value = [...dataSource.value];
-  };
-  return { filterData, resetFilterData };
-};
 const createFixedLogic = (columns) => {
   const isFixedLeft = computed(() => {
     return columns.value.reduce((prev, current) => prev || !!current.fixedLeft, false);
@@ -18007,7 +18095,6 @@ function createStore(dataSource) {
   const { _columns, flatColumns, insertColumn, removeColumn, sortColumn, updateColumns } = createColumnGenerator();
   const { _checkAll, _checkList, _halfChecked, getCheckedRows } = createSelection(dataSource, _data);
   const { sortData, thList } = createSorter(dataSource, _data);
-  const { filterData, resetFilterData } = createFilter(dataSource, _data);
   const { isFixedLeft } = createFixedLogic(_columns);
   return {
     states: {
@@ -18025,9 +18112,7 @@ function createStore(dataSource) {
     removeColumn,
     updateColumns,
     getCheckedRows,
-    sortData,
-    filterData,
-    resetFilterData
+    sortData
   };
 }
 var ColGroup = defineComponent({
@@ -18117,99 +18202,252 @@ var Sort = defineComponent({
     }, null)])])])]);
   }
 });
-var filter = "";
-const Filter = defineComponent({
+const filterProps = {
+  filterList: {
+    type: Array,
+    default: () => []
+  },
+  multiple: {
+    type: Boolean,
+    default: true
+  }
+};
+function useFilterRender(ctx2) {
+  const showMenu = ref(false);
+  const filterMenuRef = ref(null);
+  const filterIconRef = ref(null);
+  const singleVal = ref(null);
+  const multipleVal = ref(null);
+  const handleIconClick = () => {
+    showMenu.value = !showMenu.value;
+  };
+  const handleConfirm = (val) => {
+    showMenu.value = false;
+    multipleVal.value = val;
+    ctx2.emit("filter", val);
+  };
+  const handleSelect = (val) => {
+    showMenu.value = false;
+    singleVal.value = val;
+    ctx2.emit("filter", val);
+  };
+  const iconClasses = computed(() => {
+    var _a;
+    return {
+      "filter-icon": true,
+      "filter-icon-active": Boolean(singleVal.value || ((_a = multipleVal.value) == null ? void 0 : _a.length))
+    };
+  });
+  onClickOutside(filterMenuRef, () => {
+    showMenu.value = false;
+  }, {
+    ignore: [filterIconRef]
+  });
+  return { showMenu, filterMenuRef, filterIconRef, iconClasses, handleIconClick, handleConfirm, handleSelect };
+}
+function useFilterMultiple(filterList, ctx2) {
+  const _checkList = ref([]);
+  const _checkAllRecord = ref(false);
+  const _checkAll = computed({
+    get: () => _checkAllRecord.value,
+    set: (val) => {
+      _checkAllRecord.value = val;
+      for (let i = 0; i < _checkList.value.length; i++) {
+        _checkList.value[i].checked = val;
+      }
+    }
+  });
+  const _halfChecked = ref(false);
+  filterList == null ? void 0 : filterList.forEach((item) => {
+    _checkList.value.push(__spreadValues({ checked: false }, item));
+  });
+  watch(_checkList, (list2) => {
+    if (!list2.length) {
+      return;
+    }
+    let allTrue = true;
+    let allFalse = true;
+    for (let i = 0; i < list2.length; i++) {
+      allTrue && (allTrue = Boolean(list2[i].checked));
+      allFalse && (allFalse = Boolean(!list2[i].checked));
+    }
+    _checkAllRecord.value = allTrue;
+    _halfChecked.value = !(allFalse || allTrue);
+  }, { immediate: true, deep: true });
+  const getCheckedItems = () => {
+    return _checkList.value.filter((item) => item.checked);
+  };
+  const handleConfirm = () => {
+    ctx2.emit("confirm", getCheckedItems());
+  };
+  return { _checkList, _checkAll, _halfChecked, handleConfirm };
+}
+function useFilterSingle(ctx2) {
+  const selectedItem = ref(null);
+  const handleSelect = (val) => {
+    selectedItem.value = val;
+    ctx2.emit("select", val);
+  };
+  return { selectedItem, handleSelect };
+}
+var MultipleFilter = defineComponent({
   props: {
-    modelValue: {
-      type: Array,
-      default: []
-    },
-    "onUpdate:modelValue": {
-      type: Function
-    },
-    customTemplate: {
-      type: Function
-    },
     filterList: {
       type: Array,
-      required: true
-    },
-    filterMultiple: {
-      type: Boolean,
-      default: true
+      default: () => []
     }
   },
-  emits: ["update:modelValue"],
-  setup(props) {
-    const filterOrigin = ref(null);
-    const onUpdateChecked = (config, value) => {
-      const checkedList = props.modelValue;
-      const update = props["onUpdate:modelValue"];
-      const contained = !!checkedList.find((item) => item === config.value);
-      if (value && !contained) {
-        update == null ? void 0 : update([...checkedList, config.value]);
-      } else if (!value && contained) {
-        update == null ? void 0 : update(checkedList.filter((item) => config.value !== item));
-      }
-    };
-    const updateSingleChecked = (config) => {
+  emits: ["confirm"],
+  setup(props, ctx2) {
+    const {
+      _checkList,
+      _checkAll,
+      _halfChecked,
+      handleConfirm
+    } = useFilterMultiple(props.filterList, ctx2);
+    return () => createVNode(Fragment, null, [createVNode("div", {
+      "class": "filter-all-check"
+    }, [createVNode("div", {
+      "class": "filter-item"
+    }, [createVNode(Checkbox, {
+      "modelValue": _checkAll.value,
+      "onUpdate:modelValue": ($event) => _checkAll.value = $event,
+      "halfchecked": _halfChecked.value,
+      "label": "\u5168\u9009"
+    }, null)])]), createVNode("div", {
+      "class": "filter-multiple-menu"
+    }, [_checkList.value.map((item) => createVNode("div", {
+      "class": "filter-item"
+    }, [createVNode(Checkbox, {
+      "modelValue": item.checked,
+      "onUpdate:modelValue": ($event) => item.checked = $event,
+      "label": item.name
+    }, null)]))]), createVNode("div", {
+      "class": "filter-operation"
+    }, [createVNode(Button, {
+      "variant": "text",
+      "onClick": handleConfirm
+    }, {
+      default: () => [createTextVNode("\u786E\u5B9A")]
+    })])]);
+  }
+});
+var list = "";
+var List = defineComponent({
+  name: "DList",
+  setup(props, {
+    slots
+  }) {
+    return () => {
       var _a;
-      (_a = props["onUpdate:modelValue"]) == null ? void 0 : _a.call(props, [config.value]);
-    };
-    const dropdownContent = computed(() => {
-      const checkedList = props.modelValue;
-      const isContained = (config) => !!checkedList.find((item) => item === config.value);
-      return () => createVNode("ul", {
-        "class": "devui-dropdown-menu data-table-column-filter-content",
-        "style": "padding:10px"
-      }, [props.filterList.map((item, index2) => {
-        return createVNode("li", {
-          "style": index2 > 0 ? "margin-top:10px" : ""
-        }, [props.filterMultiple ? createVNode(Checkbox, {
-          "modelValue": isContained(item),
-          "onUpdate:modelValue": (value) => onUpdateChecked(item, value)
-        }, {
-          default: () => [item.name]
-        }) : createVNode("span", {
-          "onClick": () => updateSingleChecked(item)
-        }, [item.name])]);
+      return createVNode("div", {
+        "class": "devui-list"
+      }, [(_a = slots.default) == null ? void 0 : _a.call(slots)]);
+    };
+  }
+});
+var listItem = "";
+var ListItem = defineComponent({
+  name: "DListItem",
+  setup(props, {
+    slots
+  }) {
+    return () => {
+      var _a;
+      return createVNode("div", {
+        "class": "devui-list-item"
+      }, [(_a = slots.default) == null ? void 0 : _a.call(slots)]);
+    };
+  }
+});
+function _isSlot(s) {
+  return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !isVNode(s);
+}
+var SingleFilter = defineComponent({
+  props: {
+    filterList: {
+      type: Array,
+      default: () => []
+    }
+  },
+  emits: ["select"],
+  setup(props, ctx2) {
+    const {
+      selectedItem,
+      handleSelect
+    } = useFilterSingle(ctx2);
+    return () => {
+      let _slot;
+      return createVNode(Fragment, null, [createVNode(List, {
+        "class": "filter-single-menu"
+      }, _isSlot(_slot = props.filterList.map((item) => createVNode(ListItem, {
+        "class": ["filter-item", {
+          "filter-item-active": selectedItem.value === item
+        }],
+        "onClick": () => {
+          handleSelect(item);
+        }
+      }, {
+        default: () => [item.name]
+      }))) ? _slot : {
+        default: () => [_slot]
       })]);
-    });
-    return () => createVNode(Fragment, null, [createVNode("span", {
-      "ref": filterOrigin
-    }, [createVNode("i", {
-      "class": ["filter-icon", {
-        "filter-icon-active": true
-      }]
-    }, [createVNode("svg", {
-      "width": "16px",
-      "height": "16px",
-      "viewBox": "0 0 16 16",
-      "version": "1.1",
-      "xmlns": "http://www.w3.org/2000/svg",
-      "xmlns:xlink": "http://www.w3.org/1999/xlink"
-    }, [createVNode("g", {
-      "stroke": "none",
-      "stroke-width": "1",
-      "fill": "none",
-      "fill-rule": "evenodd"
-    }, [createVNode("g", null, [createVNode("polygon", {
-      "points": "10.0085775 7 10.0085775 15 6 13 6 7 2 3 2 1 14 1 14 3"
-    }, null)])])])])]), createVNode(Dropdown, {
-      "origin": filterOrigin.value,
-      "closeScope": "blank"
+    };
+  }
+});
+var filter = "";
+var Filter = defineComponent({
+  props: filterProps,
+  emits: ["filter"],
+  setup(props, ctx2) {
+    const {
+      showMenu,
+      filterMenuRef,
+      filterIconRef,
+      iconClasses,
+      handleIconClick,
+      handleConfirm,
+      handleSelect
+    } = useFilterRender(ctx2);
+    return () => createVNode(Dropdown, {
+      "visible": showMenu.value,
+      "trigger": "manually",
+      "close-scope": "none",
+      "destroy-on-hide": false,
+      "style": "padding-bottom: 4px;"
     }, {
-      default: () => {
-        var _a, _b;
-        return [(_b = (_a = props.customTemplate) == null ? void 0 : _a.call(props, {
-          value: props.modelValue,
-          onChange: props["onUpdate:modelValue"]
-        })) != null ? _b : dropdownContent.value()];
-      }
-    })]);
+      default: () => createVNode("i", {
+        "ref": filterIconRef,
+        "class": iconClasses.value,
+        "onClick": handleIconClick
+      }, [createVNode("svg", {
+        "width": "16px",
+        "height": "16px",
+        "viewBox": "0 0 16 16",
+        "version": "1.1",
+        "xmlns": "http://www.w3.org/2000/svg"
+      }, [createVNode("g", {
+        "stroke": "none",
+        "stroke-width": "1",
+        "fill": "none",
+        "fill-rule": "evenodd"
+      }, [createVNode("g", null, [createVNode("polygon", {
+        "points": "10.0085775 7 10.0085775 15 6 13 6 7 2 3 2 1 14 1 14 3"
+      }, null)])])])]),
+      menu: () => createVNode("div", {
+        "ref": filterMenuRef,
+        "class": "filter-wrapper"
+      }, [props.multiple ? createVNode(MultipleFilter, {
+        "filterList": props.filterList,
+        "onConfirm": handleConfirm
+      }, null) : createVNode(SingleFilter, {
+        "filterList": props.filterList,
+        "onSelect": handleSelect
+      }, null)])
+    });
   }
 });
-const useSort = (column) => {
+function useSort(column) {
   const table2 = inject(TABLE_TOKEN);
   const store = table2.store;
   const direction = ref(column.value.sortDirection);
@@ -18241,14 +18479,18 @@ const useSort = (column) => {
     direction.value = "";
   };
   return { direction, sortClass, handleSort, clearSortOrder };
-};
-const useFilter = (store, column) => {
-  const filteredRef = shallowRef();
-  watch(filteredRef, (results2) => {
-    store.filterData(column.value.field, results2);
-  });
-  return filteredRef;
-};
+}
+function useFilter(column) {
+  const filter2 = ref(null);
+  const filterClass = computed(() => ({
+    "filter-active": Boolean(filter2.value || Array.isArray(filter2.value) && filter2.value.length)
+  }));
+  const handleFilter = (val) => {
+    filter2.value = val;
+    column.value.ctx.emit("filter-change", val);
+  };
+  return { filterClass, handleFilter };
+}
 var TH = defineComponent({
   name: "DTableHeaderTh",
   props: {
@@ -18271,7 +18513,10 @@ var TH = defineComponent({
       handleSort,
       clearSortOrder
     } = useSort(column);
-    const filteredRef = useFilter(store, column);
+    const {
+      filterClass,
+      handleFilter
+    } = useFilter(column);
     const {
       stickyClass,
       stickyStyle
@@ -18282,15 +18527,14 @@ var TH = defineComponent({
     return () => {
       var _a, _b;
       return createVNode("th", {
-        "class": [stickyClass.value, sortClass.value],
+        "class": [stickyClass.value, sortClass.value, filterClass.value],
         "style": stickyStyle.value
       }, [createVNode("div", {
         "class": "header-container"
       }, [(_b = (_a = column.value).renderHeader) == null ? void 0 : _b.call(_a, column.value, store), column.value.filterable && createVNode(Filter, {
-        "modelValue": filteredRef.value,
-        "onUpdate:modelValue": ($event) => filteredRef.value = $event,
-        "filterList": props.column.filterList,
-        "customTemplate": props.column.customFilterTemplate
+        "filterList": column.value.filterList,
+        "multiple": column.value.filterMultiple,
+        "onFilter": handleFilter
       }, null), column.value.sortable && createVNode(Sort, {
         "sort-direction": direction.value,
         "onSort": handleSort
@@ -18650,7 +18894,7 @@ const tableColumnProps = {
   },
   filterMultiple: {
     type: Boolean,
-    default: false
+    default: true
   },
   filterList: {
     type: Array,
@@ -18803,6 +19047,7 @@ let columnIdInit = 1;
 var Column = defineComponent({
   name: "DColumn",
   props: tableColumnProps,
+  emits: ["filter-change"],
   setup(props, ctx2) {
     const instance = getCurrentInstance();
     const column = createColumn(toRefs(props), ctx2.slots);
@@ -18815,6 +19060,7 @@ var Column = defineComponent({
     } = useRender();
     const parent = columnOrTableParent.value;
     columnId = `${parent.tableId || parent.columnId}_column_${columnIdInit++}`;
+    column.ctx = ctx2;
     onBeforeMount(() => {
       isSubColumn.value = owner !== parent;
       column.id = columnId;
@@ -19543,13 +19789,672 @@ var TimelineInstall = {
   }
 };
 var TooltipInstall = {
-  title: "Tooltip\u63D0\u793A",
+  title: "Tooltip \u63D0\u793A",
   category: "\u53CD\u9988",
   status: "70%",
   install(app) {
     app.component(Tooltip.name, Tooltip);
   }
 };
+const USE_TREE_TOKEN = "use-tree-token";
+const NODE_HEIGHT = 30;
+const NODE_INDENT = 24;
+const IconClose = () => createVNode("svg", {
+  "width": "16px",
+  "height": "16px",
+  "viewBox": "0 0 16 16",
+  "version": "1.1",
+  "xmlns": "http://www.w3.org/2000/svg",
+  "class": "svg-icon"
+}, [createVNode("g", {
+  "stroke": "none",
+  "stroke-width": "1",
+  "fill": "none",
+  "fill-rule": "evenodd"
+}, [createVNode("rect", {
+  "x": "0.5",
+  "y": "0.5",
+  "width": "15",
+  "height": "15",
+  "rx": "2",
+  "stroke": "#252b3a"
+}, null), createVNode("path", {
+  "fill": "#252b3a",
+  "d": "M8.75,4 L8.75,7.25 L12,7.25 L12,8.75 L8.749,8.75 L8.75,12 L7.25,12 L7.249,8.75 L4,8.75 L4,7.25 L7.25,7.25 L7.25,4 L8.75,4 Z"
+}, null)])]);
+const IconOpen = () => createVNode("svg", {
+  "width": "16px",
+  "height": "16px",
+  "viewBox": "0 0 16 16",
+  "version": "1.1",
+  "xmlns": "http://www.w3.org/2000/svg",
+  "class": "svg-icon svg-icon-close"
+}, [createVNode("g", {
+  "stroke-width": "1",
+  "fill": "none",
+  "fill-rule": "evenodd"
+}, [createVNode("rect", {
+  "x": "0.5",
+  "y": "0.5",
+  "width": "15",
+  "height": "15",
+  "rx": "2",
+  "stroke": "#5e7ce0"
+}, null), createVNode("rect", {
+  "x": "4",
+  "y": "7",
+  "width": "8",
+  "height": "2",
+  "fill": "#5e7ce0"
+}, null)])]);
+var DTreeNodeToggle = defineComponent({
+  name: "DTreeNodeToggle",
+  props: {
+    data: {
+      type: Object,
+      default: () => ({})
+    }
+  },
+  setup(props) {
+    const {
+      data
+    } = toRefs(props);
+    const {
+      toggleNode
+    } = inject(USE_TREE_TOKEN);
+    return () => {
+      var _a;
+      return createVNode("span", {
+        "class": ["devui-tree-node__folder", ((_a = data.value) == null ? void 0 : _a.disableToggle) && "toggle-disabled"],
+        "onClick": (event) => {
+          event.stopPropagation();
+          if (toggleNode) {
+            toggleNode(data.value);
+          }
+        }
+      }, [data.value.isLeaf ? createVNode("span", {
+        "class": "devui-tree-node__indent"
+      }, null) : data.value.expanded ? createVNode(IconOpen, {
+        "class": "mr-xs"
+      }, null) : createVNode(IconClose, {
+        "class": "mr-xs"
+      }, null)]);
+    };
+  }
+});
+function useTreeNode(data) {
+  const { getChildren } = inject(USE_TREE_TOKEN);
+  const nodeClass = computed(() => {
+    var _a;
+    return [
+      "devui-tree-node",
+      ((_a = data.value) == null ? void 0 : _a.expanded) && "devui-tree-node__open"
+    ];
+  });
+  const nodeStyle = computed(() => {
+    var _a;
+    return { paddingLeft: `${NODE_INDENT * (((_a = data.value) == null ? void 0 : _a.level) - 1)}px` };
+  });
+  const nodeVLineClass = computed(() => {
+    var _a, _b;
+    return [
+      !((_a = data.value) == null ? void 0 : _a.isLeaf) && ((_b = data.value) == null ? void 0 : _b.expanded) && "devui-tree-node__vline"
+    ];
+  });
+  const nodeVLineStyle = computed(() => {
+    var _a;
+    return {
+      height: `${NODE_HEIGHT * (getChildren(data.value, { expanded: true }).length - 1) + NODE_HEIGHT / 2 + 1}px`,
+      left: `${NODE_INDENT * (((_a = data.value) == null ? void 0 : _a.level) - 1) + 9}px`,
+      top: `${NODE_HEIGHT}px`
+    };
+  });
+  const nodeHLineClass = computed(() => {
+    var _a;
+    return [
+      ((_a = data.value) == null ? void 0 : _a.level) !== 1 && "devui-tree-node__hline"
+    ];
+  });
+  const nodeContentClass = computed(() => {
+    var _a;
+    return [
+      "devui-tree-node__content",
+      ((_a = data.value) == null ? void 0 : _a.selected) && "active"
+    ];
+  });
+  const nodeTitleClass = computed(() => {
+    var _a;
+    return [
+      "devui-tree-node__title",
+      ((_a = data.value) == null ? void 0 : _a.disableSelect) && "select-disabled"
+    ];
+  });
+  return {
+    nodeClass,
+    nodeStyle,
+    nodeContentClass,
+    nodeTitleClass,
+    nodeVLineClass,
+    nodeVLineStyle,
+    nodeHLineClass
+  };
+}
+var DTreeNodeContent = defineComponent({
+  name: "DTreeNodeContent",
+  props: {
+    data: {
+      type: Object,
+      default: () => ({})
+    }
+  },
+  setup(props) {
+    const {
+      data
+    } = toRefs(props);
+    const {
+      nodeTitleClass
+    } = useTreeNode(data);
+    return () => {
+      var _a;
+      return createVNode("span", {
+        "class": nodeTitleClass.value
+      }, [(_a = data.value) == null ? void 0 : _a.label]);
+    };
+  }
+});
+var DTreeNode = defineComponent({
+  name: "DTreeNode",
+  props: {
+    data: {
+      type: Object,
+      default: () => ({})
+    },
+    check: {
+      type: Boolean,
+      default: false
+    }
+  },
+  setup(props, {
+    slots
+  }) {
+    const {
+      data,
+      check
+    } = toRefs(props);
+    const {
+      toggleSelectNode,
+      toggleCheckNode,
+      toggleNode,
+      getChildren
+    } = inject(USE_TREE_TOKEN);
+    const {
+      nodeClass,
+      nodeStyle,
+      nodeContentClass,
+      nodeVLineClass,
+      nodeVLineStyle,
+      nodeHLineClass
+    } = useTreeNode(data);
+    const halfChecked = computed(() => {
+      const children = getChildren == null ? void 0 : getChildren(data.value);
+      const checkedChildren = children == null ? void 0 : children.filter((item) => item.checked);
+      if (["upward", "both"].includes(check.value)) {
+        return checkedChildren.length > 0 && checkedChildren.length < children.length;
+      } else {
+        return false;
+      }
+    });
+    return () => {
+      var _a, _b, _c;
+      const checkboxProps2 = {
+        key: (_a = data.value) == null ? void 0 : _a.id,
+        disabled: (_b = data.value) == null ? void 0 : _b.disableCheck,
+        halfchecked: halfChecked.value,
+        modelValue: (_c = data.value) == null ? void 0 : _c.checked,
+        "onUpdate:modelValue": () => {
+          toggleCheckNode(data.value);
+        },
+        onClick: (event) => {
+          event.stopPropagation();
+        }
+      };
+      return createVNode("div", {
+        "class": nodeClass.value,
+        "style": nodeStyle.value
+      }, [createVNode("span", {
+        "class": nodeVLineClass.value,
+        "style": nodeVLineStyle.value
+      }, null), createVNode("div", {
+        "class": nodeContentClass.value,
+        "onClick": () => {
+          toggleSelectNode(data.value);
+        }
+      }, [createVNode("span", {
+        "class": nodeHLineClass.value
+      }, null), slots.icon ? renderSlot(useSlots(), "icon", {
+        nodeData: data,
+        toggleNode
+      }) : createVNode(DTreeNodeToggle, {
+        "data": data.value
+      }, null), createVNode("div", {
+        "class": "devui-tree-node__content--value-wrapper",
+        "style": {
+          height: `${NODE_HEIGHT}px`
+        }
+      }, [check.value && createVNode(Checkbox, checkboxProps2, null), slots.default ? renderSlot(useSlots(), "default", {
+        nodeData: data
+      }) : createVNode(DTreeNodeContent, {
+        "data": data
+      }, null)])])]);
+    };
+  }
+});
+function useToggle() {
+  return function useToggle2(data, core) {
+    const { getNode, setNodeValue } = core;
+    const expandNode = (node) => {
+      if (node.disableToggle) {
+        return;
+      }
+      setNodeValue(node, "expanded", true);
+    };
+    const collapseNode = (node) => {
+      if (node.disableToggle) {
+        return;
+      }
+      setNodeValue(node, "expanded", false);
+    };
+    const toggleNode = (node) => {
+      if (node.disableToggle) {
+        return;
+      }
+      if (getNode(node).expanded) {
+        setNodeValue(node, "expanded", false);
+      } else {
+        setNodeValue(node, "expanded", true);
+      }
+    };
+    return {
+      expandNode,
+      collapseNode,
+      toggleNode
+    };
+  };
+}
+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] }), {});
+}
+function generateInnerTree(tree2, key = "children", level = 0, path = []) {
+  level++;
+  return tree2.reduce((acc, item) => {
+    var _a, _b;
+    const newItem = Object.assign({}, item);
+    if (newItem.id === void 0) {
+      newItem.id = randomId();
+      newItem.idType = "random";
+    }
+    newItem.level = level;
+    if (path.length > 0 && ((_a = path[path.length - 1]) == null ? void 0 : _a.level) >= level) {
+      while (((_b = path[path.length - 1]) == null ? void 0 : _b.level) >= level) {
+        path.pop();
+      }
+    }
+    path.push(newItem);
+    const parentNode = path[path.length - 2];
+    if (parentNode) {
+      newItem.parentId = parentNode.id;
+    }
+    if (!newItem[key]) {
+      return acc.concat(__spreadProps(__spreadValues({}, newItem), { isLeaf: true }));
+    } else {
+      return acc.concat(omit(newItem, "children"), generateInnerTree(newItem[key], key, level, path));
+    }
+  }, []);
+}
+const DEFAULT_CONFIG = {
+  expanded: false,
+  recursive: true
+};
+function useCore() {
+  return function useCore2(data) {
+    const getLevel = (node) => {
+      return data.value.find((item) => item.id === node.id).level;
+    };
+    const getChildren = (node, userConfig = DEFAULT_CONFIG) => {
+      const getInnerExpendedTree = () => {
+        return computed(() => {
+          let excludeNodes = [];
+          const result22 = [];
+          for (let i = 0, len = data == null ? void 0 : data.value.length; i < len; i++) {
+            const item = data == null ? void 0 : data.value[i];
+            if (excludeNodes.map((innerNode) => innerNode.id).includes(item.id)) {
+              continue;
+            }
+            if (item.expanded !== true) {
+              excludeNodes = getChildren(item);
+            }
+            result22.push(item);
+          }
+          return result22;
+        });
+      };
+      const result2 = [];
+      const config = __spreadValues(__spreadValues({}, DEFAULT_CONFIG), userConfig);
+      const treeData = config.expanded ? getInnerExpendedTree() : data;
+      const startIndex = treeData.value.findIndex((item) => item.id === node.id);
+      for (let i = startIndex + 1; i < treeData.value.length && getLevel(node) < treeData.value[i].level; i++) {
+        if (config.recursive) {
+          result2.push(treeData.value[i]);
+        } else if (getLevel(node) === treeData.value[i].level - 1) {
+          result2.push(treeData.value[i]);
+        }
+      }
+      return result2;
+    };
+    const getParent = (node) => {
+      return data.value.find((item) => item.id === node.parentId);
+    };
+    const getExpendedTree = () => {
+      return computed(() => {
+        let excludeNodes = [];
+        const result2 = [];
+        for (let i = 0, len = data == null ? void 0 : data.value.length; i < len; i++) {
+          const item = data == null ? void 0 : data.value[i];
+          if (excludeNodes.map((node) => node.id).includes(item.id)) {
+            continue;
+          }
+          if (item.expanded !== true) {
+            excludeNodes = getChildren(item);
+          }
+          result2.push(item);
+        }
+        return result2;
+      });
+    };
+    const getIndex = (node) => {
+      return data.value.findIndex((item) => item.id === node.id);
+    };
+    const getNode = (node) => {
+      return data.value.find((item) => item.id === node.id);
+    };
+    const setNodeValue = (node, key, value) => {
+      data.value[getIndex(node)][key] = value;
+    };
+    const setTree = (newTree) => {
+      data.value = generateInnerTree(newTree);
+    };
+    return {
+      getLevel,
+      getChildren,
+      getParent,
+      getExpendedTree,
+      getIndex,
+      getNode,
+      setNodeValue,
+      setTree
+    };
+  };
+}
+const DEFAULT_TREE_PLUGINS = [useCore(), useToggle()];
+function useTree(tree2, plugins = []) {
+  const treeData = ref(generateInnerTree(tree2));
+  const core = useCore()(treeData);
+  const pluginMethods = DEFAULT_TREE_PLUGINS.concat(plugins).reduce((acc, plugin) => {
+    return __spreadValues(__spreadValues({}, acc), plugin(treeData, core));
+  }, {});
+  return __spreadValues({
+    treeData
+  }, pluginMethods);
+}
+function useCheck(options = ref({ checkStrategy: "both" })) {
+  return function useCheck2(data, core) {
+    const { setNodeValue, getNode, getChildren, getParent } = core;
+    const checkNode = (node) => {
+      setNodeValue(node, "checked", true);
+    };
+    const uncheckNode = (node) => {
+      setNodeValue(node, "checked", false);
+    };
+    const controlParentNodeChecked = (node) => {
+      const parentNode = getParent(node);
+      if (!parentNode) {
+        return;
+      }
+      const siblingNodes = getChildren(parentNode, { recursive: false });
+      const checkedSiblingNodes = siblingNodes.filter((item) => item.checked);
+      const toggleParentChecked = () => {
+        if (checkedSiblingNodes.length === 0) {
+          setNodeValue(parentNode, "checked", false);
+        } else if (checkedSiblingNodes.length === siblingNodes.length) {
+          setNodeValue(parentNode, "checked", true);
+        }
+      };
+      if (parentNode.parentId) {
+        toggleParentChecked();
+        controlParentNodeChecked(parentNode);
+      } else {
+        toggleParentChecked();
+      }
+    };
+    const toggleCheckNode = (node) => {
+      if (getNode(node).checked) {
+        setNodeValue(node, "checked", false);
+        if (["downward", "both"].includes(options.value.checkStrategy)) {
+          getChildren(node).forEach((item) => setNodeValue(item, "checked", false));
+        }
+      } else {
+        setNodeValue(node, "checked", true);
+        if (["downward", "both"].includes(options.value.checkStrategy)) {
+          getChildren(node).forEach((item) => setNodeValue(item, "checked", true));
+        }
+      }
+      if (["upward", "both"].includes(options.value.checkStrategy)) {
+        controlParentNodeChecked(node);
+      }
+    };
+    return {
+      checkNode,
+      uncheckNode,
+      toggleCheckNode
+    };
+  };
+}
+function useSelect() {
+  return function useSelect2(data, core) {
+    const { setNodeValue } = core;
+    let prevActiveNode;
+    const selectNode = (node) => {
+      if (node.disableSelect) {
+        return;
+      }
+      if (prevActiveNode) {
+        const prevActiveNodeIndex = data.value.findIndex((item) => item.id === prevActiveNode.id);
+        setNodeValue(data.value[prevActiveNodeIndex], "selected", false);
+      }
+      setNodeValue(node, "selected", true);
+      prevActiveNode = node;
+    };
+    const deselectNode = (node) => {
+      setNodeValue(node, "selected", false);
+    };
+    const toggleSelectNode = (node) => {
+      if (node.selected) {
+        deselectNode(node);
+      } else {
+        selectNode(node);
+      }
+    };
+    return {
+      selectNode,
+      deselectNode,
+      toggleSelectNode
+    };
+  };
+}
+function useOperate() {
+  return function useOperate2(data, core) {
+    const { setNodeValue, getChildren, getIndex, getLevel } = core;
+    const insertBefore = (parentNode, node, referenceNode) => {
+      const children = getChildren(parentNode);
+      const lastChild = children[children.length - 1];
+      let insertedIndex = getIndex(parentNode) + 1;
+      if (referenceNode) {
+        insertedIndex = getIndex(referenceNode);
+      } else if (lastChild) {
+        insertedIndex = getIndex(lastChild) + 1;
+      }
+      setNodeValue(parentNode, "expanded", true);
+      setNodeValue(parentNode, "isLeaf", false);
+      const currentNode = __spreadProps(__spreadValues({}, node), {
+        level: getLevel(parentNode) + 1,
+        parentId: parentNode.id,
+        isLeaf: true
+      });
+      data.value = data.value.slice(0, insertedIndex).concat(currentNode, data.value.slice(insertedIndex, data.value.length));
+    };
+    const removeNode = (node, config = { recursive: true }) => {
+      if (!config.recursive) {
+        getChildren(node).forEach((child) => {
+          setNodeValue(child, "level", getLevel(child) - 1);
+        });
+      }
+      data.value = data.value.filter((item) => {
+        if (config.recursive) {
+          return item.id !== node.id && !getChildren(node).map((nodeItem) => nodeItem.id).includes(item.id);
+        } else {
+          return item.id !== node.id;
+        }
+      });
+    };
+    const editNode = (node, label) => {
+      setNodeValue(node, "label", label);
+    };
+    return {
+      insertBefore,
+      removeNode,
+      editNode
+    };
+  };
+}
+function useMergeNodes() {
+  return function useMergeNodes2(data, core) {
+    const { setNodeValue, getChildren } = core;
+    const { removeNode } = useOperate()(data, core);
+    const mergeTreeNodes = () => {
+      const mergeToNode = (node) => {
+        var _a;
+        if (node.isLeaf) {
+          return;
+        }
+        const children = getChildren(node, { recursive: false });
+        if ((children == null ? void 0 : children.length) === 1) {
+          const subChildren = getChildren(children[0], { recursive: false });
+          if (subChildren.length !== 0) {
+            setNodeValue(node, "label", node.label + " / " + ((_a = children[0]) == null ? void 0 : _a.label));
+            removeNode(children[0], { recursive: false });
+            mergeToNode(node);
+          } else {
+            setNodeValue(children[0], "parentId", node.id);
+          }
+        } else {
+          children.forEach((item) => {
+            mergeToNode(item);
+          });
+        }
+      };
+      data.value.filter((item) => item.level === 1).forEach((item) => {
+        mergeToNode(item);
+      });
+    };
+    return {
+      mergeTreeNodes
+    };
+  };
+}
+const treeProps = {
+  data: {
+    type: Object,
+    default: []
+  },
+  check: {
+    type: [Boolean, String],
+    default: false
+  }
+};
+var tree = "";
+var Tree = defineComponent({
+  name: "DTree",
+  props: treeProps,
+  setup(props, {
+    slots,
+    expose
+  }) {
+    const {
+      data,
+      check
+    } = toRefs(props);
+    const userPlugins = [useSelect(), useOperate(), useMergeNodes()];
+    const checkOptions = ref({
+      checkStrategy: check.value || "both"
+    });
+    watch(check, (newVal) => {
+      checkOptions.value.checkStrategy = newVal;
+    });
+    if (check.value) {
+      userPlugins.push(useCheck(checkOptions));
+    }
+    const treeFactory = useTree(data.value, userPlugins);
+    const {
+      setTree,
+      getExpendedTree,
+      toggleNode
+    } = treeFactory;
+    watch(data, setTree);
+    provide(USE_TREE_TOKEN, treeFactory);
+    expose({
+      treeFactory
+    });
+    return () => {
+      return createVNode("div", {
+        "class": "devui-tree"
+      }, [getExpendedTree == null ? void 0 : getExpendedTree().value.map((treeNode) => slots.default ? renderSlot(useSlots(), "default", {
+        treeFactory,
+        nodeData: treeNode
+      }) : createVNode(DTreeNode, {
+        "data": treeNode,
+        "check": check.value
+      }, {
+        default: () => slots.content ? renderSlot(useSlots(), "content", {
+          nodeData: treeNode
+        }) : createVNode(DTreeNodeContent, {
+          "data": treeNode
+        }, null),
+        icon: () => slots.icon ? renderSlot(useSlots(), "icon", {
+          nodeData: treeNode,
+          toggleNode
+        }) : createVNode(DTreeNodeToggle, {
+          "data": treeNode
+        }, null)
+      }))]);
+    };
+  }
+});
+var TreeInstall = {
+  title: "Tree \u6811",
+  category: "\u6570\u636E\u5C55\u793A",
+  status: "20%",
+  install(app) {
+    app.component(Tree.name, Tree);
+  }
+};
 var UploadStatus = /* @__PURE__ */ ((UploadStatus2) => {
   UploadStatus2[UploadStatus2["preLoad"] = 0] = "preLoad";
   UploadStatus2[UploadStatus2["uploading"] = 1] = "uploading";
@@ -20260,6 +21165,7 @@ const installs = [
   TextareaInstall,
   TimelineInstall,
   TooltipInstall,
+  TreeInstall,
   UploadInstall
 ];
 var vueDevui = {
@@ -20268,4 +21174,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, Upload, vueDevui as default };
+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 };