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

package/form/index.es.js

@@ -17,7 +17,19 @@ 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";
+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];
+    }
+  return target;
+};
+import { defineComponent, toRefs, provide, reactive, createVNode, Teleport, Transition, renderSlot, isVNode, computed, onMounted, watch, onUnmounted, ref, unref, nextTick, mergeProps, Fragment, inject, onBeforeUnmount } 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) {
@@ -36,9 +48,9 @@ function mitt(n) {
   } };
 }
 const formProps = {
-  formData: {
+  data: {
     type: Object,
-    default: {}
+    default: () => ({})
   },
   layout: {
     type: String,
@@ -46,74 +58,25 @@ const formProps = {
   },
   labelSize: {
     type: String,
-    default: ""
+    default: "md"
   },
   labelAlign: {
     type: String,
     default: "start"
   },
   rules: {
-    type: Object,
-    default: {}
-  },
-  columnsClass: {
-    type: String,
-    default: ""
-  },
-  name: {
-    type: String,
-    default: ""
+    type: Object
   },
   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"
-};
+const FORM_TOKEN = Symbol("dForm");
 var eventBus = mitt();
 const EventBus = eventBus;
 function isObject(obj) {
@@ -125,464 +88,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)]);
-  }
-});
-const iconProps = {
-  name: {
-    type: String,
-    default: "",
-    required: true
-  },
-  size: {
-    type: String,
-    default: "inherit"
-  },
-  color: {
-    type: String,
-    default: "inherit"
-  },
-  classPrefix: {
-    type: String,
-    default: "icon"
+function createBem(namespace, element, modifier) {
+  let cls = namespace;
+  if (element) {
+    cls += `__${element}`;
   }
-};
-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);
-    };
+  if (modifier) {
+    cls += `--${modifier}`;
   }
-});
-var baseOverlay = "";
-function _isSlot(s) {
-  return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !isVNode(s);
+  return cls;
 }
-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;
-    });
-  });
+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 {
-    backgroundClass,
-    overlayClass,
-    handleBackdropClick,
-    handleOverlayBubbleCancel
+    b,
+    e,
+    m,
+    em
   };
 }
-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 useFieldCollection() {
+  const itemContexts = [];
+  const addItemContext = (field) => {
+    itemContexts.push(field);
+  };
+  const removeItemContext = (field) => {
+    itemContexts.splice(itemContexts.indexOf(field), 1);
+  };
+  return { itemContexts, addItemContext, removeItemContext };
 }
-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);
-    }
-  });
-  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"]
-  },
-  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
-  }
-};
 var commonjsGlobal = typeof globalThis !== "undefined" ? globalThis : typeof window !== "undefined" ? window : typeof global !== "undefined" ? global : typeof self !== "undefined" ? self : {};
 var lodash = { exports: {} };
 /**
@@ -5991,10 +5529,456 @@ 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);
+  return { validate, validateFields };
+}
+var Form = defineComponent({
+  name: "DForm",
+  props: formProps,
+  emits: ["submit"],
+  setup(props, ctx) {
+    const formMitt = mitt();
+    const ns = useNamespace("form");
+    const {
+      data,
+      layout,
+      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,
+        labelSize,
+        labelAlign
+      },
+      rules: props.rules,
+      messageShowType: "popover",
+      addItemContext,
+      removeItemContext
+    }));
+    ctx.expose({
+      validate,
+      validateFields
+    });
+    const onSubmit = (e) => {
+      e.preventDefault();
+      ctx.emit("submit", e);
+      EventBus.emit(`formSubmit:${props.name}`);
+    };
+    return () => {
+      var _a, _b;
+      return createVNode("form", {
+        "onSubmit": onSubmit,
+        "class": ns.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) {
+    return () => {
+      let _slot;
+      return createVNode(Teleport, {
+        "to": "#d-overlay-anchor"
+      }, {
+        default: () => [createVNode(Transition, {
+          "name": "devui-overlay-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 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) {
+      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 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);
     }
-  }).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 {
+      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 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",
@@ -6228,43 +6212,81 @@ 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)])])]);
+}
+const formItemProps = {
+  field: {
+    type: String,
+    default: ""
+  },
+  dHasFeedback: {
+    type: Boolean,
+    default: false
+  },
+  required: {
+    type: Boolean,
+    default: false
+  },
+  rules: {
+    type: [Object, Array]
+  }
+};
+const FORM_ITEM_TOKEN = Symbol("dFormItem");
+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 className = `${props.required ? " devui-required" : ""}`;
-    const style2 = {
-      display: isHorizontal ? "inline" : "inline-block"
-    };
+  setup(props, ctx) {
+    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": 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": ns.e("label-help")
+        }, null)
+      })]);
     };
   }
 });
@@ -7270,283 +7292,229 @@ 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);
-        });
-      }
-    };
+  setup(props, ctx) {
+    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 = ctx.slots).default) == null ? void 0 : _b.call(_a)]);
     };
   }
 });
-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 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) {
+  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;
-      }
-    };
+    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(Icon, {
-        "name": iconData.value.name,
-        "color": iconData.value.color
-      }, null)])]), extraInfo && createVNode("div", {
-        "class": "devui-form-control-extra-info"
-      }, [extraInfo])]), [[resolveDirective("clickoutside"), handleClickOutside]]);
+      }, [(_b = (_a = ctx.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) {
+  setup(props, ctx) {
+    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"
-      }, [(_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)]);
     };
   }
 });
@@ -7692,7 +7660,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;
@@ -7701,7 +7678,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;
@@ -7723,7 +7706,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) => {
@@ -7741,7 +7734,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;
@@ -7753,11 +7759,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";
@@ -7836,7 +7838,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 });
     };
@@ -7857,32 +7865,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 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.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);
   }
 };
 export { Form, FormControl, FormItem, FormLabel, FormOperation, index as default };