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

package/form/index.es.js

@@ -17,572 +17,91 @@ var __spreadValues = (a, b) => {
   return a;
 };
 var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
-import { defineComponent, provide, createVNode, toRefs, Teleport, Transition, renderSlot, isVNode, computed, onMounted, watch, onUnmounted, ref, unref, nextTick, mergeProps, Fragment, reactive, inject, onBeforeUnmount, withDirectives, resolveDirective } from "vue";
-import { offset, autoPlacement, arrow, shift, computePosition } from "@floating-ui/dom";
-function mitt(n) {
-  return { all: n = n || /* @__PURE__ */ new Map(), on: function(t, e) {
-    var i = n.get(t);
-    i ? i.push(e) : n.set(t, [e]);
-  }, off: function(t, e) {
-    var i = n.get(t);
-    i && (e ? i.splice(i.indexOf(e) >>> 0, 1) : n.set(t, []));
-  }, emit: function(t, e) {
-    var i = n.get(t);
-    i && i.slice().map(function(n2) {
-      n2(e);
-    }), (i = n.get("*")) && i.slice().map(function(n2) {
-      n2(t, e);
-    });
-  } };
-}
-const formProps = {
-  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: {
-    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: ""
-  }
-};
-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"
-};
-var eventBus = mitt();
-const EventBus = eventBus;
-function isObject(obj) {
-  return Object.prototype.toString.call(obj).slice(8, -1) === "Object";
-}
-function hasKey(obj, key) {
-  if (!isObject(obj)) {
-    return false;
-  }
-  return Object.prototype.hasOwnProperty.call(obj, key);
-}
-function 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)]);
-  }
-});
-const iconProps = {
-  name: {
-    type: String,
-    default: "",
-    required: true
-  },
-  size: {
-    type: String,
-    default: "inherit"
-  },
-  color: {
-    type: String,
-    default: "inherit"
-  },
-  classPrefix: {
-    type: String,
-    default: "icon"
-  }
-};
-var Icon = defineComponent({
-  name: "DIcon",
-  props: iconProps,
-  setup(props) {
-    const {
-      name,
-      size,
-      color,
-      classPrefix
-    } = toRefs(props);
-    return () => {
-      return /^((https?):)?\/\//.test(name.value) ? createVNode("img", {
-        "src": name.value,
-        "alt": name.value.split("/")[name.value.split("/").length - 1],
-        "style": {
-          width: size.value,
-          verticalAlign: "text-bottom"
-        }
-      }, null) : createVNode("i", {
-        "class": `${classPrefix.value} ${classPrefix.value}-${name.value}`,
-        "style": {
-          fontSize: size.value,
-          color: color.value
-        }
-      }, null);
-    };
-  }
-});
-var baseOverlay = "";
-function _isSlot(s) {
-  return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !isVNode(s);
-}
-const CommonOverlay = defineComponent({
-  setup(props, ctx2) {
-    return () => {
-      let _slot;
-      return createVNode(Teleport, {
-        "to": "#d-overlay-anchor"
-      }, {
-        default: () => [createVNode(Transition, {
-          "name": "devui-overlay-fade"
-        }, _isSlot(_slot = renderSlot(ctx2.slots, "default")) ? _slot : {
-          default: () => [_slot]
-        })]
-      });
-    };
-  }
-});
-const overlayProps = {
-  visible: {
-    type: Boolean
-  },
-  backgroundBlock: {
-    type: Boolean,
-    default: false
-  },
-  backgroundClass: {
-    type: String,
-    default: ""
-  },
-  backgroundStyle: {
-    type: [String, Object]
-  },
-  onBackdropClick: {
-    type: Function
-  },
-  backdropClose: {
-    type: Boolean,
-    default: true
-  },
-  hasBackdrop: {
-    type: Boolean,
-    default: true
-  }
-};
-const fixedOverlayProps = __spreadProps(__spreadValues({}, overlayProps), {
-  overlayStyle: {
-    type: [String, Object],
-    default: void 0
-  }
-});
-const overlayEmits = ["update:visible", "backdropClick"];
-function useOverlayLogic(props, ctx2) {
-  const backgroundClass = computed(() => {
-    return [
-      "devui-overlay-background",
-      props.backgroundClass,
-      !props.hasBackdrop ? "devui-overlay-background__disabled" : "devui-overlay-background__color"
-    ];
-  });
-  const overlayClass = computed(() => {
-    return "devui-overlay";
-  });
-  const handleBackdropClick = (event) => {
-    var _a;
-    event.preventDefault();
-    (_a = props.onBackdropClick) == null ? void 0 : _a.call(props);
-    if (props.backdropClose) {
-      ctx2.emit("update:visible", false);
-    }
-  };
-  const handleOverlayBubbleCancel = (event) => event.cancelBubble = true;
-  onMounted(() => {
-    const body = document.body;
-    const originOverflow = body.style.overflow;
-    const originPosition = body.style.position;
-    watch([() => props.visible, () => props.backgroundBlock], ([visible, backgroundBlock]) => {
-      if (backgroundBlock) {
-        const top = body.getBoundingClientRect().y;
-        if (visible) {
-          body.style.overflowY = "scroll";
-          body.style.position = visible ? "fixed" : "";
-          body.style.top = `${top}px`;
-        } else {
-          body.style.overflowY = originOverflow;
-          body.style.position = originPosition;
-          body.style.top = "";
-          window.scrollTo(0, -top);
-        }
-      }
-    });
-    onUnmounted(() => {
-      document.body.style.overflow = originOverflow;
-    });
-  });
-  return {
-    backgroundClass,
-    overlayClass,
-    handleBackdropClick,
-    handleOverlayBubbleCancel
-  };
-}
-var fixedOverlay = "";
-defineComponent({
-  name: "DFixedOverlay",
-  props: fixedOverlayProps,
-  emits: overlayEmits,
-  setup(props, ctx2) {
-    const {
-      backgroundClass,
-      overlayClass,
-      handleBackdropClick,
-      handleOverlayBubbleCancel
-    } = useOverlayLogic(props, ctx2);
-    return () => createVNode(CommonOverlay, null, {
-      default: () => [props.visible && createVNode("div", {
-        "class": backgroundClass.value,
-        "style": props.backgroundStyle,
-        "onClick": handleBackdropClick
-      }, [createVNode("div", {
-        "class": overlayClass.value,
-        "style": props.overlayStyle,
-        "onClick": handleOverlayBubbleCancel
-      }, [renderSlot(ctx2.slots, "default")])])]
-    });
-  }
-});
-const flexibleOverlayProps = {
-  modelValue: {
-    type: Boolean,
-    default: false
-  },
-  origin: {
-    type: Object,
-    require: true
-  },
-  position: {
-    type: Array,
-    default: ["bottom"]
-  },
-  offset: {
-    type: [Number, Object],
-    default: 8
-  },
-  shiftOffset: {
-    type: Number
-  },
-  align: {
-    type: String,
-    default: null
-  },
-  showArrow: {
-    type: Boolean,
-    default: false
-  },
-  isArrowCenter: {
-    type: Boolean,
-    default: true
-  }
-};
-function getScrollParent(element) {
-  const overflowRegex = /(auto|scroll|hidden)/;
-  for (let parent = element; parent = parent.parentElement; parent.parentElement !== document.body) {
-    const style2 = window.getComputedStyle(parent);
-    if (overflowRegex.test(style2.overflow + style2.overflowX + style2.overflowY)) {
-      return parent;
-    }
-  }
-  return window;
-}
-function adjustArrowPosition(isArrowCenter, point, placement, originRect) {
-  let { x, y } = point;
-  if (!isArrowCenter) {
-    const { width, height } = originRect;
-    if (x && placement.includes("start")) {
-      x = 12;
-    }
-    if (x && placement.includes("end")) {
-      x = Math.round(width - 24);
-    }
-    if (y && placement.includes("start")) {
-      y = 10;
-    }
-    if (y && placement.includes("end")) {
-      y = height - 14;
-    }
-  }
-  return { x, y };
-}
-function useOverlay(props, emit) {
-  const overlayRef = ref();
-  const arrowRef = ref();
-  let originParent = null;
-  const updateArrowPosition = (arrowEl, placement, point, overlayEl) => {
-    const { x, y } = adjustArrowPosition(props.isArrowCenter, point, placement, overlayEl.getBoundingClientRect());
-    const staticSide = {
-      top: "bottom",
-      right: "left",
-      bottom: "top",
-      left: "right"
-    }[placement.split("-")[0]];
-    Object.assign(arrowEl.style, {
-      left: x ? `${x}px` : "",
-      top: y ? `${y}px` : "",
-      right: "",
-      bottom: "",
-      [staticSide]: "-4px"
-    });
-  };
-  const updatePosition = async () => {
-    const hostEl = props.origin;
-    const overlayEl = unref(overlayRef.value);
-    const arrowEl = unref(arrowRef.value);
-    const middleware = [
-      offset(props.offset),
-      autoPlacement({
-        alignment: props.align,
-        allowedPlacements: props.position
-      })
-    ];
-    props.showArrow && middleware.push(arrow({ element: arrowEl }));
-    props.shiftOffset !== void 0 && middleware.push(shift());
-    const { x, y, placement, middlewareData } = await computePosition(hostEl, overlayEl, {
-      strategy: "fixed",
-      middleware
-    });
-    let applyX = x;
-    let applyY = y;
-    if (props.shiftOffset !== void 0) {
-      const { x: shiftX, y: shiftY } = middlewareData.shift;
-      shiftX < 0 && (applyX -= props.shiftOffset);
-      shiftX > 0 && (applyX += props.shiftOffset);
-      shiftY < 0 && (applyY -= props.shiftOffset);
-      shiftY > 0 && (applyY += props.shiftOffset);
-    }
-    emit("positionChange", placement);
-    Object.assign(overlayEl.style, { top: `${applyY}px`, left: `${applyX}px` });
-    props.showArrow && updateArrowPosition(arrowEl, placement, middlewareData.arrow, overlayEl);
-  };
-  watch(() => props.modelValue, () => {
-    if (props.modelValue && props.origin) {
-      originParent = getScrollParent(props.origin);
-      nextTick(updatePosition);
-      originParent == null ? void 0 : originParent.addEventListener("scroll", updatePosition);
-      originParent !== window && window.addEventListener("scroll", updatePosition);
-      window.addEventListener("resize", updatePosition);
-    } else {
-      originParent == null ? void 0 : originParent.removeEventListener("scroll", updatePosition);
-      originParent !== window && window.removeEventListener("scroll", updatePosition);
-      window.removeEventListener("resize", updatePosition);
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
     }
-  });
-  onUnmounted(() => {
-    originParent == null ? void 0 : originParent.removeEventListener("scroll", updatePosition);
-    originParent !== window && window.removeEventListener("scroll", updatePosition);
-    window.removeEventListener("resize", updatePosition);
-  });
-  return { arrowRef, overlayRef, updatePosition };
-}
-var flexibleOverlay = "";
-const FlexibleOverlay = defineComponent({
-  name: "DFlexibleOverlay",
-  inheritAttrs: false,
-  props: flexibleOverlayProps,
-  emits: ["update:modelValue", "positionChange"],
-  setup(props, {
-    slots,
-    attrs,
-    emit,
-    expose
-  }) {
-    const {
-      arrowRef,
-      overlayRef,
-      updatePosition
-    } = useOverlay(props, emit);
-    expose({
-      updatePosition
-    });
-    return () => {
-      var _a;
-      return props.modelValue && createVNode("div", mergeProps({
-        "ref": overlayRef,
-        "class": "devui-flexible-overlay"
-      }, attrs), [(_a = slots.default) == null ? void 0 : _a.call(slots), props.showArrow && createVNode("div", {
-        "ref": arrowRef,
-        "class": "devui-flexible-overlay-arrow"
-      }, null)]);
-    };
-  }
-});
-const inBrowser = typeof window !== "undefined";
-const popoverProps = {
-  isOpen: {
-    type: Boolean,
-    default: false
-  },
-  position: {
-    type: Array,
-    default: ["bottom"]
+  return target;
+};
+import { defineComponent, watch, provide, reactive, toRefs, createVNode, Teleport, Transition, renderSlot, isVNode, computed, onMounted, onUnmounted, ref, unref, nextTick, mergeProps, Fragment, inject, onBeforeUnmount } from "vue";
+import { offset, autoPlacement, arrow, shift, computePosition } from "@floating-ui/dom";
+const formProps = {
+  data: {
+    type: Object,
+    default: () => ({})
   },
-  align: {
+  layout: {
     type: String,
-    default: null
-  },
-  offset: {
-    type: [Number, Object],
-    default: 8
+    default: "horizontal"
   },
-  content: {
+  labelSize: {
     type: String,
-    default: ""
+    default: "md"
   },
-  trigger: {
+  labelAlign: {
     type: String,
-    default: "click"
+    default: "start"
   },
-  popType: {
+  rules: {
+    type: Object
+  },
+  messageType: {
     type: String,
-    default: "default"
+    default: "popover"
   },
-  showAnimation: {
-    type: Boolean,
-    default: true
+  popPosition: {
+    type: Array,
+    default: ["right", "bottom"]
   },
-  mouseEnterDelay: {
-    type: Number,
-    default: 150
+  validateOnRuleChange: {
+    type: Boolean,
+    default: false
   },
-  mouseLeaveDelay: {
-    type: Number,
-    default: 100
+  showFeedback: {
+    type: Boolean,
+    default: false
   }
 };
+const FORM_TOKEN = Symbol("dForm");
+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 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: {} };
 /**
@@ -1325,7 +844,7 @@ var lodash = { exports: {} };
         function object4() {
         }
         return function(proto) {
-          if (!isObject2(proto)) {
+          if (!isObject(proto)) {
             return {};
           }
           if (objectCreate) {
@@ -1687,7 +1206,7 @@ var lodash = { exports: {} };
         if (result2 !== undefined$1) {
           return result2;
         }
-        if (!isObject2(value)) {
+        if (!isObject(value)) {
           return value;
         }
         var isArr = isArray(value);
@@ -2034,7 +1553,7 @@ var lodash = { exports: {} };
         return true;
       }
       function baseIsNative(value) {
-        if (!isObject2(value) || isMasked(value)) {
+        if (!isObject(value) || isMasked(value)) {
           return false;
         }
         var pattern4 = isFunction(value) ? reIsNative : reIsHostCtor;
@@ -2074,7 +1593,7 @@ var lodash = { exports: {} };
         return result2;
       }
       function baseKeysIn(object4) {
-        if (!isObject2(object4)) {
+        if (!isObject(object4)) {
           return nativeKeysIn(object4);
         }
         var isProto = isPrototype(object4), result2 = [];
@@ -2119,7 +1638,7 @@ var lodash = { exports: {} };
         }
         baseFor(source, function(srcValue, key) {
           stack || (stack = new Stack());
-          if (isObject2(srcValue)) {
+          if (isObject(srcValue)) {
             baseMergeDeep(object4, source, key, srcIndex, baseMerge, customizer, stack);
           } else {
             var newValue = customizer ? customizer(safeGet(object4, key), srcValue, key + "", object4, source, stack) : undefined$1;
@@ -2159,7 +1678,7 @@ var lodash = { exports: {} };
             newValue = objValue;
             if (isArguments(objValue)) {
               newValue = toPlainObject(objValue);
-            } else if (!isObject2(objValue) || isFunction(objValue)) {
+            } else if (!isObject(objValue) || isFunction(objValue)) {
               newValue = initCloneObject(srcValue);
             }
           } else {
@@ -2298,7 +1817,7 @@ var lodash = { exports: {} };
         return shuffleSelf(array4, baseClamp(n, 0, array4.length));
       }
       function baseSet(object4, path, value, customizer) {
-        if (!isObject2(object4)) {
+        if (!isObject(object4)) {
           return object4;
         }
         path = castPath(path, object4);
@@ -2312,7 +1831,7 @@ var lodash = { exports: {} };
             var objValue = nested[key];
             newValue = customizer ? customizer(objValue, key, nested) : undefined$1;
             if (newValue === undefined$1) {
-              newValue = isObject2(objValue) ? objValue : isIndex(path[index2 + 1]) ? [] : {};
+              newValue = isObject(objValue) ? objValue : isIndex(path[index2 + 1]) ? [] : {};
             }
           }
           assignValue(nested, key, newValue);
@@ -2762,7 +2281,7 @@ var lodash = { exports: {} };
               return new Ctor(args[0], args[1], args[2], args[3], args[4], args[5], args[6]);
           }
           var thisBinding = baseCreate(Ctor.prototype), result2 = Ctor.apply(thisBinding, args);
-          return isObject2(result2) ? result2 : thisBinding;
+          return isObject(result2) ? result2 : thisBinding;
         };
       }
       function createCurry(func, bitmask, arity) {
@@ -3076,7 +2595,7 @@ var lodash = { exports: {} };
         return objValue;
       }
       function customDefaultsMerge(objValue, srcValue, key, object4, source, stack) {
-        if (isObject2(objValue) && isObject2(srcValue)) {
+        if (isObject(objValue) && isObject(srcValue)) {
           stack.set(srcValue, objValue);
           baseMerge(objValue, srcValue, undefined$1, customDefaultsMerge, stack);
           stack["delete"](srcValue);
@@ -3424,7 +2943,7 @@ var lodash = { exports: {} };
         return !!length && (type4 == "number" || type4 != "symbol" && reIsUint.test(value)) && (value > -1 && value % 1 == 0 && value < length);
       }
       function isIterateeCall(value, index2, object4) {
-        if (!isObject2(object4)) {
+        if (!isObject(object4)) {
           return false;
         }
         var type4 = typeof index2;
@@ -3467,7 +2986,7 @@ var lodash = { exports: {} };
         return value === proto;
       }
       function isStrictComparable(value) {
-        return value === value && !isObject2(value);
+        return value === value && !isObject(value);
       }
       function matchesStrictComparable(key, srcValue) {
         return function(object4) {
@@ -4349,7 +3868,7 @@ var lodash = { exports: {} };
           throw new TypeError2(FUNC_ERROR_TEXT);
         }
         wait = toNumber(wait) || 0;
-        if (isObject2(options)) {
+        if (isObject(options)) {
           leading = !!options.leading;
           maxing = "maxWait" in options;
           maxWait = maxing ? nativeMax(toNumber(options.maxWait) || 0, wait) : maxWait;
@@ -4519,7 +4038,7 @@ var lodash = { exports: {} };
         if (typeof func != "function") {
           throw new TypeError2(FUNC_ERROR_TEXT);
         }
-        if (isObject2(options)) {
+        if (isObject(options)) {
           leading = "leading" in options ? !!options.leading : leading;
           trailing = "trailing" in options ? !!options.trailing : trailing;
         }
@@ -4627,7 +4146,7 @@ var lodash = { exports: {} };
         return typeof value == "number" && nativeIsFinite(value);
       }
       function isFunction(value) {
-        if (!isObject2(value)) {
+        if (!isObject(value)) {
           return false;
         }
         var tag = baseGetTag(value);
@@ -4639,7 +4158,7 @@ var lodash = { exports: {} };
       function isLength(value) {
         return typeof value == "number" && value > -1 && value % 1 == 0 && value <= MAX_SAFE_INTEGER;
       }
-      function isObject2(value) {
+      function isObject(value) {
         var type4 = typeof value;
         return value != null && (type4 == "object" || type4 == "function");
       }
@@ -4746,9 +4265,9 @@ var lodash = { exports: {} };
         if (isSymbol(value)) {
           return NAN;
         }
-        if (isObject2(value)) {
+        if (isObject(value)) {
           var other = typeof value.valueOf == "function" ? value.valueOf() : value;
-          value = isObject2(other) ? other + "" : other;
+          value = isObject(other) ? other + "" : other;
         }
         if (typeof value != "string") {
           return value === 0 ? value : +value;
@@ -4969,7 +4488,7 @@ var lodash = { exports: {} };
           var Ctor = object4 && object4.constructor;
           if (isArrLike) {
             accumulator = isArr ? new Ctor() : [];
-          } else if (isObject2(object4)) {
+          } else if (isObject(object4)) {
             accumulator = isFunction(Ctor) ? baseCreate(getPrototype(object4)) : {};
           } else {
             accumulator = {};
@@ -5251,7 +4770,7 @@ var lodash = { exports: {} };
       }
       function truncate(string3, options) {
         var length = DEFAULT_TRUNC_LENGTH, omission = DEFAULT_TRUNC_OMISSION;
-        if (isObject2(options)) {
+        if (isObject(options)) {
           var separator = "separator" in options ? options.separator : separator;
           length = "length" in options ? toInteger(options.length) : length;
           omission = "omission" in options ? baseToString(options.omission) : omission;
@@ -5381,13 +4900,13 @@ var lodash = { exports: {} };
       });
       function mixin(object4, source, options) {
         var props = keys(source), methodNames = baseFunctions(source, props);
-        if (options == null && !(isObject2(source) && (methodNames.length || !props.length))) {
+        if (options == null && !(isObject(source) && (methodNames.length || !props.length))) {
           options = source;
           source = object4;
           object4 = this;
           methodNames = baseFunctions(source, keys(source));
         }
-        var chain2 = !(isObject2(options) && "chain" in options) || !!options.chain, isFunc = isFunction(object4);
+        var chain2 = !(isObject(options) && "chain" in options) || !!options.chain, isFunc = isFunction(object4);
         arrayEach(methodNames, function(methodName) {
           var func = source[methodName];
           object4[methodName] = func;
@@ -5733,7 +5252,7 @@ var lodash = { exports: {} };
       lodash2.isNil = isNil;
       lodash2.isNull = isNull;
       lodash2.isNumber = isNumber;
-      lodash2.isObject = isObject2;
+      lodash2.isObject = isObject;
       lodash2.isObjectLike = isObjectLike;
       lodash2.isPlainObject = isPlainObject;
       lodash2.isRegExp = isRegExp;
@@ -5991,10 +5510,449 @@ var lodash = { exports: {} };
       (freeModule.exports = _)._ = _;
       freeExports._ = _;
     } else {
-      root._ = _;
+      root._ = _;
+    }
+  }).call(commonjsGlobal);
+})(lodash, lodash.exports);
+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;
+  };
+  const execValidateFields = async (fields = []) => {
+    const validateFields2 = getValidateFields(fields);
+    if (!validateFields2.length) {
+      return true;
+    }
+    let errors = {};
+    for (const field of validateFields2) {
+      try {
+        await field.validate("");
+      } catch (err) {
+        errors = __spreadValues(__spreadValues({}, errors), err);
+      }
+    }
+    if (!Object.keys(errors).length) {
+      return true;
+    }
+    return Promise.reject(errors);
+  };
+  const validateFields = async (fields = [], callback) => {
+    try {
+      const result = await execValidateFields(fields);
+      if (result) {
+        callback == null ? void 0 : callback(result);
+      }
+      return result;
+    } 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);
+  const clearValidate = (fields = []) => {
+    getValidateFields(fields).forEach((field) => field.clearValidate());
+  };
+  const resetFields = (fields = []) => {
+    getValidateFields(fields).forEach((field) => field.resetField());
+  };
+  return { validate, validateFields, resetFields, clearValidate };
+}
+var Form = defineComponent({
+  name: "DForm",
+  props: formProps,
+  emits: ["validate"],
+  setup(props, ctx) {
+    const ns2 = useNamespace("form");
+    const {
+      itemContexts,
+      addItemContext,
+      removeItemContext
+    } = useFieldCollection();
+    const {
+      validate,
+      validateFields,
+      resetFields,
+      clearValidate
+    } = useFormValidation(itemContexts);
+    const onSubmit = (e) => {
+      e.preventDefault();
+    };
+    watch(() => props.rules, () => {
+      if (props.validateOnRuleChange) {
+        validate();
+      }
+    }, {
+      deep: true
+    });
+    provide(FORM_TOKEN, reactive(__spreadProps(__spreadValues({}, toRefs(props)), {
+      emit: ctx.emit,
+      addItemContext,
+      removeItemContext
+    })));
+    ctx.expose({
+      validate,
+      validateFields,
+      resetFields,
+      clearValidate
+    });
+    return () => {
+      var _a, _b;
+      return createVNode("form", {
+        "onSubmit": onSubmit,
+        "class": ns2.b()
+      }, [(_b = (_a = ctx.slots).default) == null ? void 0 : _b.call(_a)]);
+    };
+  }
+});
+const formLabelProps = {
+  helpTips: {
+    type: String,
+    default: ""
+  }
+};
+var baseOverlay = "";
+function _isSlot(s) {
+  return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !isVNode(s);
+}
+const CommonOverlay = defineComponent({
+  setup(props, ctx) {
+    const ns2 = useNamespace("overlay");
+    return () => {
+      let _slot;
+      return createVNode(Teleport, {
+        "to": "#d-overlay-anchor"
+      }, {
+        default: () => [createVNode(Transition, {
+          "name": ns2.e("fade")
+        }, _isSlot(_slot = renderSlot(ctx.slots, "default")) ? _slot : {
+          default: () => [_slot]
+        })]
+      });
+    };
+  }
+});
+const overlayProps = {
+  visible: {
+    type: Boolean
+  },
+  backgroundBlock: {
+    type: Boolean,
+    default: false
+  },
+  backgroundClass: {
+    type: String,
+    default: ""
+  },
+  backgroundStyle: {
+    type: [String, Object]
+  },
+  onBackdropClick: {
+    type: Function
+  },
+  backdropClose: {
+    type: Boolean,
+    default: true
+  },
+  hasBackdrop: {
+    type: Boolean,
+    default: true
+  }
+};
+const fixedOverlayProps = __spreadProps(__spreadValues({}, overlayProps), {
+  overlayStyle: {
+    type: [String, Object],
+    default: void 0
+  }
+});
+const overlayEmits = ["update:visible", "backdropClick"];
+function useOverlayLogic(props, ctx) {
+  const ns2 = useNamespace("overlay");
+  const backgroundClass = computed(() => {
+    return [ns2.e("background"), props.backgroundClass, !props.hasBackdrop ? ns2.em("background", "disabled") : ns2.em("background", "color")];
+  });
+  const overlayClass = computed(() => {
+    return ns2.b();
+  });
+  const handleBackdropClick = (event) => {
+    var _a;
+    event.preventDefault();
+    (_a = props.onBackdropClick) == null ? void 0 : _a.call(props);
+    if (props.backdropClose) {
+      ctx.emit("update:visible", false);
+    }
+  };
+  const handleOverlayBubbleCancel = (event) => event.cancelBubble = true;
+  onMounted(() => {
+    const body = document.body;
+    const originOverflow = body.style.overflow;
+    const originPosition = body.style.position;
+    watch([() => props.visible, () => props.backgroundBlock], ([visible, backgroundBlock]) => {
+      if (backgroundBlock) {
+        const top = body.getBoundingClientRect().y;
+        if (visible) {
+          body.style.overflowY = "scroll";
+          body.style.position = visible ? "fixed" : "";
+          body.style.top = `${top}px`;
+        } else {
+          body.style.overflowY = originOverflow;
+          body.style.position = originPosition;
+          body.style.top = "";
+          window.scrollTo(0, -top);
+        }
+      }
+    });
+    onUnmounted(() => {
+      document.body.style.overflow = originOverflow;
+    });
+  });
+  return {
+    backgroundClass,
+    overlayClass,
+    handleBackdropClick,
+    handleOverlayBubbleCancel
+  };
+}
+var fixedOverlay = "";
+defineComponent({
+  name: "DFixedOverlay",
+  props: fixedOverlayProps,
+  emits: overlayEmits,
+  setup(props, ctx) {
+    const {
+      backgroundClass,
+      overlayClass,
+      handleBackdropClick,
+      handleOverlayBubbleCancel
+    } = useOverlayLogic(props, ctx);
+    return () => createVNode(CommonOverlay, null, {
+      default: () => [props.visible && createVNode("div", {
+        "class": backgroundClass.value,
+        "style": props.backgroundStyle,
+        "onClick": handleBackdropClick
+      }, [createVNode("div", {
+        "class": overlayClass.value,
+        "style": props.overlayStyle,
+        "onClick": handleOverlayBubbleCancel
+      }, [renderSlot(ctx.slots, "default")])])]
+    });
+  }
+});
+const flexibleOverlayProps = {
+  modelValue: {
+    type: Boolean,
+    default: false
+  },
+  origin: {
+    type: Object,
+    require: true
+  },
+  position: {
+    type: Array,
+    default: ["bottom"]
+  },
+  offset: {
+    type: [Number, Object],
+    default: 8
+  },
+  shiftOffset: {
+    type: Number
+  },
+  align: {
+    type: String,
+    default: null
+  },
+  showArrow: {
+    type: Boolean,
+    default: false
+  },
+  isArrowCenter: {
+    type: Boolean,
+    default: true
+  }
+};
+function getScrollParent(element) {
+  const overflowRegex = /(auto|scroll|hidden)/;
+  for (let parent = element; parent = parent.parentElement; parent.parentElement !== document.body) {
+    const style = window.getComputedStyle(parent);
+    if (overflowRegex.test(style.overflow + style.overflowX + style.overflowY)) {
+      return parent;
+    }
+  }
+  return window;
+}
+function adjustArrowPosition(isArrowCenter, point, placement, originRect) {
+  let { x, y } = point;
+  if (!isArrowCenter) {
+    const { width, height } = originRect;
+    if (x && placement.includes("start")) {
+      x = 12;
+    }
+    if (x && placement.includes("end")) {
+      x = Math.round(width - 24);
+    }
+    if (y && placement.includes("start")) {
+      y = 10;
+    }
+    if (y && placement.includes("end")) {
+      y = height - 14;
+    }
+  }
+  return { x, y };
+}
+function useOverlay(props, emit) {
+  const overlayRef = ref();
+  const arrowRef = ref();
+  let originParent = null;
+  const updateArrowPosition = (arrowEl, placement, point, overlayEl) => {
+    const { x, y } = adjustArrowPosition(props.isArrowCenter, point, placement, overlayEl.getBoundingClientRect());
+    const staticSide = {
+      top: "bottom",
+      right: "left",
+      bottom: "top",
+      left: "right"
+    }[placement.split("-")[0]];
+    Object.assign(arrowEl.style, {
+      left: x ? `${x}px` : "",
+      top: y ? `${y}px` : "",
+      right: "",
+      bottom: "",
+      [staticSide]: "-4px"
+    });
+  };
+  const updatePosition = async () => {
+    const hostEl = props.origin;
+    const overlayEl = unref(overlayRef.value);
+    const arrowEl = unref(arrowRef.value);
+    const middleware = [
+      offset(props.offset),
+      autoPlacement({
+        alignment: props.align,
+        allowedPlacements: props.position
+      })
+    ];
+    props.showArrow && middleware.push(arrow({ element: arrowEl }));
+    props.shiftOffset !== void 0 && middleware.push(shift());
+    const { x, y, placement, middlewareData } = await computePosition(hostEl, overlayEl, {
+      strategy: "fixed",
+      middleware
+    });
+    let applyX = x;
+    let applyY = y;
+    if (props.shiftOffset !== void 0) {
+      const { x: shiftX, y: shiftY } = middlewareData.shift;
+      shiftX < 0 && (applyX -= props.shiftOffset);
+      shiftX > 0 && (applyX += props.shiftOffset);
+      shiftY < 0 && (applyY -= props.shiftOffset);
+      shiftY > 0 && (applyY += props.shiftOffset);
+    }
+    emit("positionChange", placement);
+    Object.assign(overlayEl.style, { top: `${applyY}px`, left: `${applyX}px` });
+    props.showArrow && updateArrowPosition(arrowEl, placement, middlewareData.arrow, overlayEl);
+  };
+  watch(() => props.modelValue, () => {
+    if (props.modelValue && props.origin) {
+      originParent = getScrollParent(props.origin);
+      nextTick(updatePosition);
+      originParent == null ? void 0 : originParent.addEventListener("scroll", updatePosition);
+      originParent !== window && window.addEventListener("scroll", updatePosition);
+      window.addEventListener("resize", updatePosition);
+    } else {
+      originParent == null ? void 0 : originParent.removeEventListener("scroll", updatePosition);
+      originParent !== window && window.removeEventListener("scroll", updatePosition);
+      window.removeEventListener("resize", updatePosition);
     }
-  }).call(commonjsGlobal);
-})(lodash, lodash.exports);
+  });
+  onUnmounted(() => {
+    originParent == null ? void 0 : originParent.removeEventListener("scroll", updatePosition);
+    originParent !== window && window.removeEventListener("scroll", updatePosition);
+    window.removeEventListener("resize", updatePosition);
+  });
+  return { arrowRef, overlayRef, updatePosition };
+}
+var flexibleOverlay = "";
+const FlexibleOverlay = defineComponent({
+  name: "DFlexibleOverlay",
+  inheritAttrs: false,
+  props: flexibleOverlayProps,
+  emits: ["update:modelValue", "positionChange"],
+  setup(props, {
+    slots,
+    attrs,
+    emit,
+    expose
+  }) {
+    const ns2 = useNamespace("flexible-overlay");
+    const {
+      arrowRef,
+      overlayRef,
+      updatePosition
+    } = useOverlay(props, emit);
+    expose({
+      updatePosition
+    });
+    return () => {
+      var _a;
+      return props.modelValue && createVNode("div", mergeProps({
+        "ref": overlayRef,
+        "class": ns2.b()
+      }, attrs), [(_a = slots.default) == null ? void 0 : _a.call(slots), props.showArrow && createVNode("div", {
+        "ref": arrowRef,
+        "class": ns2.e("arrow")
+      }, null)]);
+    };
+  }
+});
+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 = {
   top: "50% calc(100% + 8px)",
   bottom: "50% -8px",
@@ -6063,11 +6021,12 @@ function usePopoverEvent(props, visible, origin) {
       origin.value.addEventListener("mouseleave", onMouseleave);
     }
   });
-  return { placement, handlePositionChange };
+  return { placement, handlePositionChange, onMouseenter, onMouseleave };
 }
-function SuccessIcon() {
+const ns = useNamespace("popover");
+function SuccessIcon$1() {
   return createVNode("svg", {
-    "class": "devui-icon devui-icon-success",
+    "class": [ns.e("icon"), ns.em("icon", "success")],
     "viewBox": "0 0 16 16",
     "version": "1.1",
     "xmlns": "http://www.w3.org/2000/svg"
@@ -6091,7 +6050,7 @@ function SuccessIcon() {
 }
 function WarningIcon() {
   return createVNode("svg", {
-    "class": "devui-icon devui-icon-warning",
+    "class": [ns.e("icon"), ns.em("icon", "warning")],
     "viewBox": "0 0 16 16",
     "version": "1.1",
     "xmlns": "http://www.w3.org/2000/svg"
@@ -6101,14 +6060,14 @@ function WarningIcon() {
     "fill": "none",
     "fill-rule": "evenodd"
   }, [createVNode("polygon", {
-    "points": "7.5 1.74501946 1.39184847 13.5954649 7.08947368 14.2207621 13.9973698 13.5954649 10.9383683 5.61273879 8.40084114 1.27624313"
+    "points": "7.5 1.74501946 1.39184847 13.5954649 7.08947368         14.2207621 13.9973698 13.5954649 10.9383683 5.61273879 8.40084114 1.27624313"
   }, null), createVNode("path", {
-    "d": "M8.51325441,0.127397589 C8.70423071,0.228333932 8.8605922,0.383286648 8.96244623,0.57254229 L15.8714442,13.4101975 C16.1549662,13.9370117 15.9538562,14.5918482 15.4222523,14.8728158 C15.2642579,14.9563203 15.0879506,15 14.9088903,15 L1.09089441,15 C0.488410063,15 0,14.5159904 0,13.9189343 C0,13.7414873 0.0440768395,13.5667684 0.128340519,13.4101975 L7.03733844,0.57254229 C7.32086049,0.0457280838 7.98165058,-0.153569987 8.51325441,0.127397589 Z M8.87894737,11.2105263 L7.08947368,11.2105263 L7.08947368,13 L8.87894737,13 L8.87894737,11.2105263 Z M8.96842105,4.5 L7,4.5 L7.08947368,9.86842105 L8.87894737,9.86842105 L8.96842105,4.5 Z"
+    "d": "M8.51325441,0.127397589 C8.70423071,0.228333932         8.8605922,0.383286648 8.96244623,0.57254229 L15.8714442,13.4101975         C16.1549662,13.9370117 15.9538562,14.5918482 15.4222523,14.8728158         C15.2642579,14.9563203 15.0879506,15 14.9088903,15 L1.09089441,15         C0.488410063,15 0,14.5159904 0,13.9189343 C0,13.7414873 0.0440768395,13.5667684         0.128340519,13.4101975 L7.03733844,0.57254229 C7.32086049,0.0457280838 7.98165058,-0.153569987         8.51325441,0.127397589 Z M8.87894737,11.2105263 L7.08947368,11.2105263 L7.08947368,13         L8.87894737,13 L8.87894737,11.2105263 Z M8.96842105,4.5 L7,4.5 L7.08947368,9.86842105         L8.87894737,9.86842105 L8.96842105,4.5 Z"
   }, null)])]);
 }
 function InfoIcon() {
   return createVNode("svg", {
-    "class": "devui-icon devui-icon-info",
+    "class": [ns.e("icon"), ns.em("icon", "info")],
     "viewBox": "0 0 16 16",
     "version": "1.1",
     "xmlns": "http://www.w3.org/2000/svg"
@@ -6124,12 +6083,12 @@ function InfoIcon() {
   }, null), createVNode("g", {
     "stroke-width": "1"
   }, [createVNode("path", {
-    "d": "M8,0 C3.6,0 0,3.6 0,8 C0,12.4 3.6,16 8,16 C12.4,16 16,12.4 16,8 C16,3.6 12.4,0 8,0 Z M9,5 L7,5 L7,3 L9,3 L9,5 Z M9,12.6 L7,12.6 L7,6.6 L9,6.6 L9,12.6 Z"
+    "d": "M8,0 C3.6,0 0,3.6 0,8 C0,12.4 3.6,16 8,16           C12.4,16 16,12.4 16,8 C16,3.6 12.4,0 8,0 Z M9,5 L7,5 L7,3 L9,3 L9,5 Z M9,12.6 L7,12.6 L7,6.6 L9,6.6 L9,12.6 Z"
   }, null)])])]);
 }
-function ErrorIcon() {
+function ErrorIcon$1() {
   return createVNode("svg", {
-    "class": "devui-icon devui-icon-error",
+    "class": [ns.e("icon"), ns.em("icon", "error")],
     "width": "16px",
     "height": "16px",
     "viewBox": "0 0 16 16",
@@ -6145,7 +6104,7 @@ function ErrorIcon() {
     "cy": "8",
     "r": "7"
   }, null), createVNode("path", {
-    "d": "M8,0 C3.6,0 0,3.6 0,8 C0,12.4 3.6,16 8,16 C12.4,16 16,12.4 16,8 C16,3.6 12.4,0 8,0 Z M9,12.6 L7,12.6 L7,10.6 L9,10.6 L9,12.6 Z M9,9.1 L7,9.1 L6.9,3.1 L9.1,3.1 L9,9.1 Z",
+    "d": "M8,0 C3.6,0 0,3.6 0,8 C0,12.4 3.6,16 8,16 C12.4,16 16,12.4 16,8           C16,3.6 12.4,0 8,0 Z M9,12.6 L7,12.6 L7,10.6 L9,10.6 L9,12.6 Z M9,9.1 L7,9.1 L6.9,3.1 L9.1,3.1 L9,9.1 Z",
     "fill-rule": "nonzero"
   }, null)])]);
 }
@@ -6158,9 +6117,10 @@ var PopoverIcon = defineComponent({
     }
   },
   setup(props) {
+    const ns2 = useNamespace("popover");
     return () => props.type && props.type !== "default" && createVNode("span", {
-      "class": "devui-popover-icon"
-    }, [props.type === "success" && createVNode(SuccessIcon, null, null), props.type === "warning" && createVNode(WarningIcon, null, null), props.type === "info" && createVNode(InfoIcon, null, null), props.type === "error" && createVNode(ErrorIcon, null, null)]);
+      "class": ns2.e("icon-wrap")
+    }, [props.type === "success" && createVNode(SuccessIcon$1, null, null), props.type === "warning" && createVNode(WarningIcon, null, null), props.type === "info" && createVNode(InfoIcon, null, null), props.type === "error" && createVNode(ErrorIcon$1, null, null)]);
   }
 });
 var popover = "";
@@ -6185,21 +6145,24 @@ var Popover = defineComponent({
     const visible = ref(false);
     const {
       placement,
-      handlePositionChange
+      handlePositionChange,
+      onMouseenter,
+      onMouseleave
     } = usePopoverEvent(props, visible, origin);
     const {
       overlayStyles
     } = usePopover(props, visible, placement, origin, popoverRef);
+    const ns2 = useNamespace("popover");
     return () => {
       var _a;
       return createVNode(Fragment, null, [createVNode("div", {
         "ref": origin,
-        "class": "devui-popover-reference"
+        "class": ns2.e("reference")
       }, [(_a = slots.reference) == null ? void 0 : _a.call(slots)]), createVNode(Teleport, {
         "to": "body"
       }, {
         default: () => [createVNode(Transition, {
-          "name": showAnimation.value ? `devui-popover-fade-${placement.value}` : ""
+          "name": showAnimation.value ? ns2.m(`fade-${placement.value}`) : ""
         }, {
           default: () => [createVNode(FlexibleOverlay, mergeProps({
             "modelValue": visible.value,
@@ -6209,12 +6172,14 @@ var Popover = defineComponent({
             "position": position.value,
             "align": align.value,
             "offset": offset2.value,
-            "class": ["devui-popover-content", popType.value !== "default" ? "is-icon" : ""],
+            "class": [ns2.e("content"), popType.value !== "default" ? "is-icon" : ""],
             "show-arrow": true,
             "is-arrow-center": false,
             "style": overlayStyles.value
           }, attrs, {
-            "onPositionChange": handlePositionChange
+            "onPositionChange": handlePositionChange,
+            "onMouseenter": onMouseenter,
+            "onMouseleave": onMouseleave
           }), {
             default: () => {
               var _a2;
@@ -6227,44 +6192,144 @@ 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 ErrorIcon() {
+  return createVNode("svg", {
+    "width": "14px",
+    "height": "14px",
+    "viewBox": "0 0 16 16"
+  }, [createVNode("g", {
+    "stroke": "none",
+    "stroke-width": "1",
+    "fill": "none",
+    "fill-rule": "evenodd"
+  }, [createVNode("circle", {
+    "cx": "8",
+    "cy": "8",
+    "r": "8"
+  }, null), createVNode("polygon", {
+    "points": "8.07106781 6.65685425 10.8994949 3.82842712 12.3137085         5.24264069 9.48528137 8.07106781 12.3137085 10.8994949 10.8994949 12.3137085         8.07106781 9.48528137 5.24264069 12.3137085 3.82842712 10.8994949 6.65685425         8.07106781 3.82842712 5.24264069 5.24264069 3.82842712"
+  }, null)])]);
+}
+function SuccessIcon() {
+  return createVNode("svg", {
+    "width": "14px",
+    "height": "14px",
+    "viewBox": "0 0 16 16"
+  }, [createVNode("g", {
+    "stroke": "none",
+    "stroke-width": "1",
+    "fill": "none",
+    "fill-rule": "evenodd"
+  }, [createVNode("circle", {
+    "cx": "8",
+    "cy": "8",
+    "r": "8"
+  }, null), createVNode("polygon", {
+    "points": "6.53553391 9.77817459 12.1923882 4.12132034 13.6066017 5.53553391         6.53553391 12.6066017 3 9.07106781 4.41421356 7.65685425 6.53553391 9.77817459"
+  }, null)])]);
+}
+function PendingIcon() {
+  return createVNode("svg", {
+    "width": "14px",
+    "height": "14px",
+    "viewBox": "0 0 16 16"
+  }, [createVNode("g", {
+    "id": "loading",
+    "stroke": "none",
+    "stroke-width": "1",
+    "fill": "none",
+    "fill-rule": "evenodd"
+  }, [createVNode("path", {
+    "d": "M8,0 C12.4,0 16,3.6 16,8 C16,12.4 12.4,16 8,16 C3.6,16 0,12.4 0,8 C0,3.6 3.6,0 8,0           Z M8,1 C4.15,1 1,4.15 1,8 C1,11.85 4.15,15 8,15 C11.85,15 15,11.85 15,8 C15,4.15 11.85,1 8,1 Z",
+    "fill-rule": "nonzero"
+  }, null), createVNode("path", {
+    "d": "M8,0 C12.4,0 16,3.6 16,8 L15,8 C15,4.15 11.85,1 8,1 L8,0 Z",
+    "fill-rule": "nonzero"
+  }, null)])]);
+}
+const formItemProps = {
+  field: {
+    type: String,
+    default: ""
+  },
+  required: {
+    type: Boolean,
+    default: false
+  },
+  messageType: {
+    type: String
+  },
+  popPosition: {
+    type: Array
+  },
+  rules: {
+    type: [Object, Array]
+  },
+  showFeedback: {
+    type: Boolean,
+    default: void 0
+  }
+};
+const FORM_ITEM_TOKEN = Symbol("dFormItem");
+function useFormLabel() {
+  const formContext = inject(FORM_TOKEN);
+  const formItemContext = inject(FORM_ITEM_TOKEN);
+  const ns2 = useNamespace("form");
+  const labelClasses = computed(() => ({
+    [`${ns2.e("label")}`]: true,
+    [`${ns2.em("label", "vertical")}`]: formContext.layout === "vertical",
+    [`${ns2.em("label", formContext.labelSize)}`]: formContext.layout === "horizontal",
+    [`${ns2.em("label", formContext.labelAlign)}`]: formContext.layout === "horizontal"
+  }));
+  const labelInnerClasses = computed(() => ({
+    [`${ns2.e("label-span")}`]: true,
+    [`${ns2.em("label", "required")}`]: formItemContext.isRequired
+  }));
+  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 className = `${props.required ? " devui-required" : ""}`;
-    const style2 = {
-      display: isHorizontal ? "inline" : "inline-block"
-    };
+  setup(props, ctx) {
+    const ns2 = useNamespace("form");
+    const {
+      labelClasses,
+      labelInnerClasses
+    } = useFormLabel();
     return () => {
       var _a, _b;
       return createVNode("span", {
-        "class": wrapperCls,
-        "style": style2
+        "class": labelClasses.value
       }, [createVNode("span", {
-        "class": className
-      }, [(_b = (_a = ctx2.slots).default) == null ? void 0 : _b.call(_a), props.hasHelp && props.helpTips && createVNode(Popover, {
+        "class": labelInnerClasses.value
+      }, [(_b = (_a = ctx.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(Icon, {
-          "name": "helping",
-          "color": "#252b3a"
-        }, null)])
-      })])]);
+        reference: () => createVNode(HelpTipsIcon, {
+          "class": ns2.e("label-help")
+        }, null)
+      })]);
     };
   }
 });
@@ -7270,619 +7335,312 @@ Schema.register = function register(type4, validator) {
 Schema.warning = warning;
 Schema.messages = messages;
 Schema.validators = validators;
+function useFormItem(messageType, _rules, validateState) {
+  const formContext = inject(FORM_TOKEN);
+  const ns2 = useNamespace("form");
+  const itemClasses = computed(() => ({
+    [`${ns2.em("item", "horizontal")}`]: formContext.layout === "horizontal",
+    [`${ns2.em("item", "vertical")}`]: formContext.layout === "vertical",
+    [`${ns2.em("item", "error")}`]: messageType.value === "text" && validateState.value === "error"
+  }));
+  const isRequired = computed(() => _rules.value.some((rule) => Boolean(rule.required)));
+  return { itemClasses, isRequired };
+}
+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("");
+  let initFieldValue = void 0;
+  let isResetting = false;
+  const computedField = computed(() => {
+    return typeof props.field === "string" ? props.field : "";
+  });
+  const fieldValue = computed({
+    get: () => {
+      const formData = formContext.data;
+      if (!formData || !props.field) {
+        return;
+      }
+      return formData[props.field];
+    },
+    set: (val) => {
+      formContext.data[props.field] = val;
+    }
+  });
+  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 = "";
+    formContext.emit("validate", props.field, true, "");
+  };
+  const onValidateError = ({ errors }) => {
+    var _a;
+    validateState.value = "error";
+    validateMessage.value = ((_a = errors == null ? void 0 : errors[0]) == null ? void 0 : _a.message) || "";
+    formContext.emit("validate", props.field, false, validateMessage.value);
+  };
+  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) => {
+    if (isResetting) {
+      isResetting = false;
+      return false;
+    }
+    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);
+    });
+  };
+  const clearValidate = () => {
+    validateState.value = "";
+    validateMessage.value = "";
+  };
+  const resetField = async () => {
+    if (!formContext.data || !props.field) {
+      return;
+    }
+    isResetting = true;
+    fieldValue.value = initFieldValue;
+    await nextTick();
+    clearValidate();
+  };
+  onMounted(() => {
+    initFieldValue = lodash.exports.cloneDeep(formContext.data[props.field]);
+  });
+  return { validateState, validateMessage, validate, resetField, clearValidate };
+}
 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
+  setup(props, ctx) {
+    const formContext = inject(FORM_TOKEN);
+    const _a = toRefs(props), {
+      messageType: itemMessageType,
+      popPosition: itemPopPosition,
+      showFeedback: itemShowFeedback
+    } = _a, otherProps = __objRest(_a, [
+      "messageType",
+      "popPosition",
+      "showFeedback"
+    ]);
+    const showFeedback = computed(() => (itemShowFeedback == null ? void 0 : itemShowFeedback.value) !== void 0 ? itemShowFeedback.value : formContext.showFeedback);
+    const messageType = computed(() => (itemMessageType == null ? void 0 : itemMessageType.value) || formContext.messageType);
+    const popPosition = computed(() => (itemPopPosition == null ? void 0 : itemPopPosition.value) || formContext.popPosition);
+    const {
+      _rules
+    } = useFormItemRule(props);
+    const {
+      validateState,
+      validateMessage,
+      validate,
+      resetField,
+      clearValidate
+    } = useFormItemValidate(props, _rules);
+    const {
+      itemClasses,
+      isRequired
+    } = useFormItem(messageType, _rules, validateState);
+    const context = reactive(__spreadProps(__spreadValues({}, otherProps), {
+      showFeedback,
+      messageType,
+      popPosition,
+      isRequired,
+      validateState,
+      validateMessage,
+      validate,
+      resetField,
+      clearValidate
+    }));
+    provide(FORM_ITEM_TOKEN, context);
+    ctx.expose({
+      resetField,
+      clearValidate
     });
-    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);
-        });
-      }
-    };
     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;
+      var _a2, _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 = (_a2 = ctx.slots).default) == null ? void 0 : _b.call(_a2)]);
     };
   }
 });
-function on(element, eventName, handler) {
-  if (document.addEventListener) {
-    if (element && eventName && handler) {
-      element.addEventListener(eventName, handler, false);
-    }
-  } else {
-    if (element && eventName && handler) {
-      element.attachEvent("on" + eventName, handler);
-    }
-  }
-}
-const ctx = Symbol("@@clickoutside");
-const nodeList = /* @__PURE__ */ new Map();
-let startClick;
-let nid = 0;
-let isFirst = true;
-function createDocumentHandler(el, binding, vnode) {
-  if (inBrowser && isFirst) {
-    isFirst = false;
-    on(document, "mousedown", (e) => {
-      startClick = e;
-    });
-    on(document, "mouseup", (e) => {
-      for (const [id, node] of nodeList) {
-        node[ctx].documentHandler(e, startClick);
-      }
-    });
-  }
-  return function(mouseup, mousedown) {
-    if (!vnode || !binding.instance || !mouseup.target || !mousedown.target || el.contains(mouseup.target) || el.contains(mousedown.target) || el === mouseup.target) {
-      return;
-    }
-    el[ctx].bindingFn && el[ctx].bindingFn();
-  };
-}
-const clickoutsideDirective = {
-  beforeMount: function(el, binding, vnode) {
-    nid++;
-    nodeList.set(nid, el);
-    el[ctx] = {
-      nid,
-      documentHandler: createDocumentHandler(el, binding, vnode),
-      bindingFn: binding.value
-    };
-  },
-  updated: function(el, binding, vnode) {
-    el[ctx].documentHandler = createDocumentHandler(el, binding, vnode);
-    el[ctx].bindingFn = binding.value;
+const formControlProps = {
+  feedbackStatus: {
+    type: String
   },
-  unmounted: function(el) {
-    nodeList.delete(el[ctx].nid);
-    delete el[ctx];
+  extraInfo: {
+    type: String,
+    default: ""
   }
 };
+function useFormControl(props) {
+  const formContext = inject(FORM_TOKEN);
+  const ns2 = useNamespace("form");
+  const { feedbackStatus } = toRefs(props);
+  const controlClasses = computed(() => ({
+    [ns2.e("control")]: true,
+    [ns2.em("control", "horizontal")]: formContext.layout === "horizontal"
+  }));
+  const controlContainerClasses = computed(() => ({
+    [ns2.e("control-container")]: true,
+    [ns2.em("control-container", "horizontal")]: formContext.layout === "horizontal",
+    [ns2.em("control-container", "has-feedback")]: Boolean(feedbackStatus == null ? void 0 : feedbackStatus.value),
+    [ns2.em("control-container", "feedback-error")]: Boolean((feedbackStatus == null ? void 0 : feedbackStatus.value) === "error")
+  }));
+  return { controlClasses, controlContainerClasses };
+}
+function useFormControlValidate() {
+  const formItemContext = inject(FORM_ITEM_TOKEN);
+  const feedbackStatus = computed(() => formItemContext.validateState);
+  const showFeedback = computed(() => formItemContext.showFeedback && Boolean(formItemContext.validateState));
+  const showPopover = computed(() => formItemContext.messageType === "popover" && formItemContext.validateState === "error");
+  const showMessage = computed(() => formItemContext.messageType === "text" && formItemContext.validateState === "error");
+  const errorMessage = computed(() => formItemContext.validateMessage);
+  const popPosition = computed(() => formItemContext.popPosition);
+  return { feedbackStatus, showFeedback, showPopover, showMessage, errorMessage, popPosition };
+}
 var formControl = "";
 var FormControl = defineComponent({
   name: "DFormControl",
-  directives: {
-    clickoutside: clickoutsideDirective
-  },
   props: formControlProps,
-  setup(props, ctx2) {
+  setup(props, ctx) {
     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;
-      }
-    };
-    return () => {
-      var _a, _b, _c, _d, _e, _f, _g, _h;
-      const {
-        feedbackStatus,
-        extraInfo
-      } = props;
-      return withDirectives(createVNode("div", {
-        "class": "devui-form-control",
-        "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",
-        "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(Icon, {
-        "name": iconData.value.name,
-        "color": iconData.value.color
-      }, null)])]), extraInfo && createVNode("div", {
-        "class": "devui-form-control-extra-info"
-      }, [extraInfo])]), [[resolveDirective("clickoutside"), handleClickOutside]]);
-    };
+    const ns2 = useNamespace("form");
+    const {
+      controlClasses,
+      controlContainerClasses
+    } = useFormControl(props);
+    const {
+      feedbackStatus,
+      showFeedback,
+      showPopover,
+      showMessage,
+      errorMessage,
+      popPosition
+    } = useFormControlValidate();
+    return () => createVNode("div", {
+      "class": controlClasses.value,
+      "ref": formControl2
+    }, [createVNode("div", {
+      "class": controlContainerClasses.value
+    }, [createVNode(Popover, {
+      "is-open": showPopover.value,
+      "trigger": "manually",
+      "content": errorMessage.value,
+      "pop-type": "error",
+      "position": popPosition.value
+    }, {
+      reference: () => {
+        var _a, _b;
+        return createVNode("div", {
+          "class": ns2.e("control-content")
+        }, [(_b = (_a = ctx.slots).default) == null ? void 0 : _b.call(_a)]);
+      }
+    }), showFeedback.value && createVNode("span", {
+      "class": [ns2.e("feedback-icon"), ns2.em("feedback-icon", feedbackStatus.value)]
+    }, [feedbackStatus.value === "error" && createVNode(ErrorIcon, null, null), feedbackStatus.value === "success" && createVNode(SuccessIcon, null, null), feedbackStatus.value === "pending" && createVNode(PendingIcon, null, null)])]), createVNode("div", {
+      "class": ns2.e("control-info")
+    }, [showMessage.value && createVNode("div", {
+      "class": "error-message"
+    }, [errorMessage.value]), props.extraInfo && createVNode("div", {
+      "class": ns2.e("control-extra")
+    }, [props.extraInfo])])]);
   }
 });
 var formOperation = "";
 var FormOperation = defineComponent({
   name: "DFormOperation",
-  props: {},
-  setup(props, ctx2) {
+  setup(props, ctx) {
+    const formContext = inject(FORM_TOKEN);
+    const LabelSizeMap = {
+      sm: 80,
+      md: 100,
+      lg: 150
+    };
+    const styles = computed(() => ({
+      marginLeft: formContext.layout === "horizontal" ? `${LabelSizeMap[formContext.labelSize] + 16}px` : void 0
+    }));
     return () => {
       var _a, _b;
       return createVNode("div", {
-        "class": "devui-form-operation"
-      }, [(_b = (_a = ctx2.slots).default) == null ? void 0 : _b.call(_a)]);
+        "class": "devui-form-operation",
+        "style": styles.value
+      }, [(_b = (_a = ctx.slots).default) == null ? void 0 : _b.call(_a)]);
     };
   }
 });
-var style = "";
-function getAvaliableRuleObj(ruleName, value) {
-  if (!ruleName) {
-    console.error("[v-d-validate] validator's key is invalid");
-    return null;
-  }
-  switch (ruleName) {
-    case "maxlength":
-      return {
-        type: "string",
-        max: value,
-        asyncValidator: (rule, val) => {
-          return new Promise((resolve, reject) => {
-            if (val.length > value) {
-              reject("\u6700\u5927\u957F\u5EA6\u4E3A" + value);
-            } else {
-              resolve("\u6821\u9A8C\u901A\u8FC7");
-            }
-          });
-        }
-      };
-    case "minlength":
-      return {
-        type: "string",
-        min: value,
-        asyncValidator: (rule, val) => {
-          return new Promise((resolve, reject) => {
-            if (val.length < value) {
-              reject("\u6700\u5C0F\u957F\u5EA6\u4E3A" + value);
-            } else {
-              resolve("\u6821\u9A8C\u901A\u8FC7");
-            }
-          });
-        }
-      };
-    case "min":
-      return {
-        type: "number",
-        asyncValidator: (rule, val) => {
-          return new Promise((resolve, reject) => {
-            if (val < value) {
-              reject("\u6700\u5C0F\u503C\u4E3A" + value);
-            } else {
-              resolve("\u6821\u9A8C\u901A\u8FC7");
-            }
-          });
-        }
-      };
-    case "max":
-      return {
-        type: "number",
-        asyncValidator: (rule, val) => {
-          return new Promise((resolve, reject) => {
-            if (val > value) {
-              reject("\u6700\u5927\u503C\u4E3A" + value);
-            } else {
-              resolve("\u6821\u9A8C\u901A\u8FC7");
-            }
-          });
-        }
-      };
-    case "required":
-      return {
-        reqiured: true,
-        asyncValidator: (rule, val) => {
-          return new Promise((resolve, reject) => {
-            if (!val) {
-              reject("\u5FC5\u586B\u9879");
-            } else {
-              resolve("\u6821\u9A8C\u901A\u8FC7");
-            }
-          });
-        }
-      };
-    case "requiredTrue":
-      return {
-        asyncValidator: (rule, val) => {
-          return new Promise((resolve, reject) => {
-            if (!val) {
-              reject("\u5FC5\u987B\u4E3Atrue\u503C");
-            } else {
-              resolve("\u6821\u9A8C\u901A\u8FC7");
-            }
-          });
-        }
-      };
-    case "email":
-      return {
-        type: "email",
-        message: "\u90AE\u7BB1\u683C\u5F0F\u4E0D\u6B63\u786E"
-      };
-    case "pattern":
-      return {
-        type: "regexp",
-        pattern: value,
-        message: "\u53EA\u80FD\u5305\u542B\u6570\u5B57\u4E0E\u5927\u5C0F\u5199\u5B57\u7B26",
-        validator: (rule, val) => value.test(val)
-      };
-    case "whitespace":
-      return {
-        message: "\u8F93\u5165\u4E0D\u80FD\u5168\u90E8\u4E3A\u7A7A\u683C\u6216\u7A7A\u5B57\u7B26",
-        validator: (rule, val) => !!val.trim()
-      };
-    default:
-      return {
-        [ruleName]: value
-      };
-  }
-}
-function getKeyValueOfObjectList(obj) {
-  const kvArr = [];
-  for (const key in obj) {
-    if (Object.prototype.hasOwnProperty.call(obj, key)) {
-      kvArr.push({
-        key,
-        value: obj[key]
-      });
-    }
-  }
-  return kvArr;
-}
-function handleErrorStrategy(el) {
-  const classList = [...el.classList];
-  classList.push("devui-validate-rules-error-pristine");
-  el.setAttribute("class", classList.join(" "));
-}
-function handleErrorStrategyPass(el) {
-  const classList = [...el.classList];
-  const index2 = classList.indexOf("devui-validate-rules-error-pristine");
-  index2 !== -1 && classList.splice(index2, 1);
-  el.setAttribute("class", classList.join(" "));
-}
-function getFormControlUID(el) {
-  if (el.tagName.toLocaleLowerCase() === "body") {
-    return "";
-  }
-  if (el.parentElement.id.startsWith("dfc-")) {
-    return el.parentElement.id;
-  } else {
-    getFormControlUID(el.parentElement);
-  }
-}
-function handleValidateError({ el, tipEl, message = "", isFormTag, messageShowType, dfcUID, popPosition = "right-bottom", updateOn }) {
-  if (isFormTag && messageShowType === "toast") {
-    alert(message);
-    return;
-  }
-  if (!dfcUID) {
-    dfcUID = getFormControlUID(el);
-  }
-  if (messageShowType === "popover") {
-    EventBus.emit("showPopoverErrorMessage", { showPopover: true, message, uid: dfcUID, popPosition, updateOn });
-    return;
-  }
-  tipEl.innerText = "" + message;
-  tipEl.style.display = "inline-flex";
-  tipEl.setAttribute("class", "devui-validate-tip");
-  handleErrorStrategy(el);
-}
-function handleValidatePass(el, tipEl) {
-  tipEl.style.display = "none";
-  handleErrorStrategyPass(el);
-}
-function getRefName(binding) {
-  const _refs = binding.instance.$refs;
-  const refName = Object.keys(_refs)[0];
-  return refName;
-}
-function getFormName(binding) {
-  const _refs = binding.instance.$refs;
-  const key = Object.keys(_refs)[0];
-  return _refs[key]["name"];
-}
-function validateFn({ validator, modelValue, el, tipEl, isFormTag, messageShowType, dfcUID, popPosition, updateOn }) {
-  validator.validate({ modelName: modelValue }).then(() => {
-    handleValidatePass(el, tipEl);
-  }).catch((err) => {
-    const { errors } = err;
-    if (!errors || errors.length === 0) {
-      return;
-    }
-    let msg = "";
-    if (typeof errors[0].message === "object") {
-      msg = errors[0].message.default;
-    } else {
-      msg = errors[0].message;
-    }
-    handleValidateError({ el, tipEl, message: msg, isFormTag, messageShowType, dfcUID, popPosition, updateOn });
-  });
-}
-function checkValidPopsition(positionStr) {
-  const validPosition = ["left", "right", "top", "bottom", "left-top", "left-bottom", "top-left", "top-right", "right-top", "right-bottom", "bottom-left", "bottom-right"];
-  const isValid = validPosition.includes(positionStr);
-  !isValid && console.warn(`invalid popPosition value '${positionStr}'.`);
-  return isValid;
-}
-var dValidateRules = {
-  mounted(el, binding, vnode) {
-    var _a;
-    const isFormTag = el.tagName === "FORM";
-    const dfcUID = el.parentNode.parentNode.parentElement.dataset.uid;
-    const refName = getRefName(binding);
-    const hasOptions = isObject(binding.value) && hasKey(binding.value, "options");
-    let {
-      rules: bindingRules,
-      options = {},
-      messageShowType = "popover"
-    } = binding.value;
-    let { errorStrategy } = binding.value;
-    if (refName) {
-      messageShowType = (_a = binding.instance[refName]["messageShowType"]) != null ? _a : "popover";
-    }
-    let {
-      updateOn = "change",
-      errorStrategy: ErrorStrategy = "dirty",
-      asyncDebounceTime = 300,
-      popPosition = ["right", "bottom"]
-    } = options;
-    if (messageShowType === "popover") {
-      if (Array.isArray(popPosition)) {
-        popPosition = popPosition.length > 1 ? popPosition.join("-") : popPosition[0];
-        if (!checkValidPopsition(popPosition)) {
-          popPosition = "right-bottom";
-        }
-      } else if (!checkValidPopsition(popPosition)) {
-        popPosition = "right-bottom";
-      }
-    }
-    if (!errorStrategy) {
-      errorStrategy = ErrorStrategy;
-    }
-    let customRule = {};
-    if (hasOptions) {
-      customRule = bindingRules != null ? bindingRules : binding.value;
-    } else {
-      customRule = binding.value;
-    }
-    const isCustomValidator = customRule && isObject(customRule) && (hasKey(customRule, "validators") || hasKey(customRule, "asyncValidators"));
-    const rules2 = Array.isArray(customRule) ? customRule : [customRule];
-    const tipEl = document.createElement("span");
-    if (messageShowType !== "none") {
-      el.parentNode.append(tipEl);
-    }
-    const descriptor = {
-      modelName: []
-    };
-    rules2.forEach((rule) => {
-      const kvObjList = !Array.isArray(rule) && getKeyValueOfObjectList(rule);
-      let ruleObj = {};
-      let avaliableRuleObj = {};
-      kvObjList.forEach((item) => {
-        avaliableRuleObj = getAvaliableRuleObj(item.key, item.value);
-        ruleObj = __spreadValues(__spreadValues({}, ruleObj), avaliableRuleObj);
-      });
-      descriptor.modelName.push(ruleObj);
-    });
-    if (isCustomValidator) {
-      const { validators: validators2, asyncValidators } = customRule;
-      validators2 && validators2.forEach((item) => {
-        const ruleObj = {
-          message: (item == null ? void 0 : item.message) || "",
-          validator: (rule, value) => item.validator(rule, value)
-        };
-        descriptor.modelName.push(ruleObj);
-      });
-      asyncValidators && asyncValidators.forEach((item) => {
-        const ruleObj = {
-          message: (item == null ? void 0 : item.message) || "",
-          asyncValidator: (rule, value) => {
-            return new Promise(lodash.exports.debounce((resolve, reject) => {
-              const res = item.asyncValidator(rule, value);
-              if (res) {
-                resolve("");
-              } else {
-                reject(rule.message);
-              }
-            }, asyncDebounceTime));
-          }
-        };
-        descriptor.modelName.push(ruleObj);
-      });
-    }
-    const validator = new Schema(descriptor);
-    const htmlEventValidateHandler = (e) => {
-      const modelValue = e.target.value;
-      if (messageShowType === "popover") {
-        EventBus.emit("showPopoverErrorMessage", { showPopover: false, message: "", uid: dfcUID, popPosition, updateOn });
-      }
-      validateFn({ validator, modelValue, el, tipEl, isFormTag: false, messageShowType, dfcUID, popPosition, updateOn });
-    };
-    vnode.children[0].el.addEventListener(updateOn, htmlEventValidateHandler);
-    if (messageShowType === "popover" && updateOn === "change") {
-      vnode.children[0].el.addEventListener("focus", () => {
-        EventBus.emit("showPopoverErrorMessage", { showPopover: false, uid: dfcUID, updateOn });
-      });
-    }
-    if (errorStrategy === "pristine") {
-      handleErrorStrategy(el);
-      vnode.children[0].props.value = "" + vnode.children[0].props.value;
-    }
-    const formName = getFormName(binding);
-    formName && EventBus.on(`formSubmit:${formName}`, () => {
-      const modelValue = isFormTag ? "" : vnode.children[0].el.value;
-      validateFn({ validator, modelValue, el, tipEl, isFormTag, messageShowType, updateOn: "submit" });
-    });
-  }
-};
-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 index = {
   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.component(FormLabel.name, FormLabel);
+    app.component(FormItem.name, FormItem);
+    app.component(FormControl.name, FormControl);
+    app.component(FormOperation.name, FormOperation);
   }
 };
-export { Form, FormControl, FormItem, FormLabel, FormOperation, index as default };
+export { FORM_ITEM_TOKEN, FORM_TOKEN, Form, FormControl, FormItem, FormLabel, FormOperation, index as default, formControlProps, formItemProps, formProps };