vue-devui 1.0.0-rc.7 → 1.0.0

package/form/index.es.js

@@ -29,7 +29,7 @@ var __objRest = (source, exclude) => {
     }
   return target;
 };
-import { defineComponent, provide, reactive, toRefs, createVNode, Teleport, Transition, renderSlot, isVNode, computed, onMounted, watch, onUnmounted, ref, unref, nextTick, mergeProps, Fragment, inject, onBeforeUnmount } from "vue";
+import { defineComponent, watch, provide, reactive, toRefs, createVNode, onUnmounted, Transition, mergeProps, ref, unref, nextTick, Comment, Text, h, Fragment, inject, withDirectives, cloneVNode, computed, onMounted, Teleport, withModifiers, createTextVNode, onBeforeUnmount } from "vue";
 import { offset, autoPlacement, arrow, shift, computePosition } from "@floating-ui/dom";
 const formProps = {
   data: {
@@ -58,6 +58,21 @@ const formProps = {
   popPosition: {
     type: Array,
     default: ["right", "bottom"]
+  },
+  validateOnRuleChange: {
+    type: Boolean,
+    default: false
+  },
+  showFeedback: {
+    type: Boolean,
+    default: false
+  },
+  disabled: {
+    type: Boolean,
+    default: false
+  },
+  size: {
+    type: String
   }
 };
 const FORM_TOKEN = Symbol("dForm");
@@ -71,8 +86,8 @@ function createBem(namespace, element, modifier) {
   }
   return cls;
 }
-function useNamespace(block) {
-  const namespace = `devui-${block}`;
+function useNamespace(block, needDot = false) {
+  const namespace = needDot ? `.devui-${block}` : `devui-${block}`;
   const b = () => createBem(namespace);
   const e = (element) => element ? createBem(namespace, element) : "";
   const m = (modifier) => modifier ? createBem(namespace, "", modifier) : "";
@@ -836,7 +851,7 @@ var lodash = { exports: {} };
         function object4() {
         }
         return function(proto) {
-          if (!isObject(proto)) {
+          if (!isObject2(proto)) {
             return {};
           }
           if (objectCreate) {
@@ -1198,7 +1213,7 @@ var lodash = { exports: {} };
         if (result2 !== undefined$1) {
           return result2;
         }
-        if (!isObject(value)) {
+        if (!isObject2(value)) {
           return value;
         }
         var isArr = isArray(value);
@@ -1545,7 +1560,7 @@ var lodash = { exports: {} };
         return true;
       }
       function baseIsNative(value) {
-        if (!isObject(value) || isMasked(value)) {
+        if (!isObject2(value) || isMasked(value)) {
           return false;
         }
         var pattern4 = isFunction(value) ? reIsNative : reIsHostCtor;
@@ -1585,7 +1600,7 @@ var lodash = { exports: {} };
         return result2;
       }
       function baseKeysIn(object4) {
-        if (!isObject(object4)) {
+        if (!isObject2(object4)) {
           return nativeKeysIn(object4);
         }
         var isProto = isPrototype(object4), result2 = [];
@@ -1630,7 +1645,7 @@ var lodash = { exports: {} };
         }
         baseFor(source, function(srcValue, key) {
           stack || (stack = new Stack());
-          if (isObject(srcValue)) {
+          if (isObject2(srcValue)) {
             baseMergeDeep(object4, source, key, srcIndex, baseMerge, customizer, stack);
           } else {
             var newValue = customizer ? customizer(safeGet(object4, key), srcValue, key + "", object4, source, stack) : undefined$1;
@@ -1670,7 +1685,7 @@ var lodash = { exports: {} };
             newValue = objValue;
             if (isArguments(objValue)) {
               newValue = toPlainObject(objValue);
-            } else if (!isObject(objValue) || isFunction(objValue)) {
+            } else if (!isObject2(objValue) || isFunction(objValue)) {
               newValue = initCloneObject(srcValue);
             }
           } else {
@@ -1809,7 +1824,7 @@ var lodash = { exports: {} };
         return shuffleSelf(array4, baseClamp(n, 0, array4.length));
       }
       function baseSet(object4, path, value, customizer) {
-        if (!isObject(object4)) {
+        if (!isObject2(object4)) {
           return object4;
         }
         path = castPath(path, object4);
@@ -1823,7 +1838,7 @@ var lodash = { exports: {} };
             var objValue = nested[key];
             newValue = customizer ? customizer(objValue, key, nested) : undefined$1;
             if (newValue === undefined$1) {
-              newValue = isObject(objValue) ? objValue : isIndex(path[index2 + 1]) ? [] : {};
+              newValue = isObject2(objValue) ? objValue : isIndex(path[index2 + 1]) ? [] : {};
             }
           }
           assignValue(nested, key, newValue);
@@ -2273,7 +2288,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 isObject(result2) ? result2 : thisBinding;
+          return isObject2(result2) ? result2 : thisBinding;
         };
       }
       function createCurry(func, bitmask, arity) {
@@ -2587,7 +2602,7 @@ var lodash = { exports: {} };
         return objValue;
       }
       function customDefaultsMerge(objValue, srcValue, key, object4, source, stack) {
-        if (isObject(objValue) && isObject(srcValue)) {
+        if (isObject2(objValue) && isObject2(srcValue)) {
           stack.set(srcValue, objValue);
           baseMerge(objValue, srcValue, undefined$1, customDefaultsMerge, stack);
           stack["delete"](srcValue);
@@ -2935,7 +2950,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 (!isObject(object4)) {
+        if (!isObject2(object4)) {
           return false;
         }
         var type4 = typeof index2;
@@ -2978,7 +2993,7 @@ var lodash = { exports: {} };
         return value === proto;
       }
       function isStrictComparable(value) {
-        return value === value && !isObject(value);
+        return value === value && !isObject2(value);
       }
       function matchesStrictComparable(key, srcValue) {
         return function(object4) {
@@ -3860,7 +3875,7 @@ var lodash = { exports: {} };
           throw new TypeError2(FUNC_ERROR_TEXT);
         }
         wait = toNumber(wait) || 0;
-        if (isObject(options)) {
+        if (isObject2(options)) {
           leading = !!options.leading;
           maxing = "maxWait" in options;
           maxWait = maxing ? nativeMax(toNumber(options.maxWait) || 0, wait) : maxWait;
@@ -4030,7 +4045,7 @@ var lodash = { exports: {} };
         if (typeof func != "function") {
           throw new TypeError2(FUNC_ERROR_TEXT);
         }
-        if (isObject(options)) {
+        if (isObject2(options)) {
           leading = "leading" in options ? !!options.leading : leading;
           trailing = "trailing" in options ? !!options.trailing : trailing;
         }
@@ -4138,7 +4153,7 @@ var lodash = { exports: {} };
         return typeof value == "number" && nativeIsFinite(value);
       }
       function isFunction(value) {
-        if (!isObject(value)) {
+        if (!isObject2(value)) {
           return false;
         }
         var tag = baseGetTag(value);
@@ -4150,7 +4165,7 @@ var lodash = { exports: {} };
       function isLength(value) {
         return typeof value == "number" && value > -1 && value % 1 == 0 && value <= MAX_SAFE_INTEGER;
       }
-      function isObject(value) {
+      function isObject2(value) {
         var type4 = typeof value;
         return value != null && (type4 == "object" || type4 == "function");
       }
@@ -4257,9 +4272,9 @@ var lodash = { exports: {} };
         if (isSymbol(value)) {
           return NAN;
         }
-        if (isObject(value)) {
+        if (isObject2(value)) {
           var other = typeof value.valueOf == "function" ? value.valueOf() : value;
-          value = isObject(other) ? other + "" : other;
+          value = isObject2(other) ? other + "" : other;
         }
         if (typeof value != "string") {
           return value === 0 ? value : +value;
@@ -4480,7 +4495,7 @@ var lodash = { exports: {} };
           var Ctor = object4 && object4.constructor;
           if (isArrLike) {
             accumulator = isArr ? new Ctor() : [];
-          } else if (isObject(object4)) {
+          } else if (isObject2(object4)) {
             accumulator = isFunction(Ctor) ? baseCreate(getPrototype(object4)) : {};
           } else {
             accumulator = {};
@@ -4762,7 +4777,7 @@ var lodash = { exports: {} };
       }
       function truncate(string3, options) {
         var length = DEFAULT_TRUNC_LENGTH, omission = DEFAULT_TRUNC_OMISSION;
-        if (isObject(options)) {
+        if (isObject2(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;
@@ -4892,13 +4907,13 @@ var lodash = { exports: {} };
       });
       function mixin(object4, source, options) {
         var props = keys(source), methodNames = baseFunctions(source, props);
-        if (options == null && !(isObject(source) && (methodNames.length || !props.length))) {
+        if (options == null && !(isObject2(source) && (methodNames.length || !props.length))) {
           options = source;
           source = object4;
           object4 = this;
           methodNames = baseFunctions(source, keys(source));
         }
-        var chain2 = !(isObject(options) && "chain" in options) || !!options.chain, isFunc = isFunction(object4);
+        var chain2 = !(isObject2(options) && "chain" in options) || !!options.chain, isFunc = isFunction(object4);
         arrayEach(methodNames, function(methodName) {
           var func = source[methodName];
           object4[methodName] = func;
@@ -5244,7 +5259,7 @@ var lodash = { exports: {} };
       lodash2.isNil = isNil;
       lodash2.isNull = isNull;
       lodash2.isNumber = isNumber;
-      lodash2.isObject = isObject;
+      lodash2.isObject = isObject2;
       lodash2.isObjectLike = isObjectLike;
       lodash2.isPlainObject = isPlainObject;
       lodash2.isRegExp = isRegExp;
@@ -5550,13 +5565,20 @@ function useFormValidation(itemContexts) {
     }
   };
   const validate = async (callback) => validateFields(void 0, callback);
-  return { validate, validateFields };
+  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 ns = useNamespace("form");
+    const ns2 = useNamespace("form");
     const {
       itemContexts,
       addItemContext,
@@ -5564,160 +5586,165 @@ var Form = defineComponent({
     } = useFieldCollection();
     const {
       validate,
-      validateFields
+      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
+      validateFields,
+      resetFields,
+      clearValidate
     });
     return () => {
       var _a, _b;
       return createVNode("form", {
         "onSubmit": onSubmit,
-        "class": ns.b()
+        "class": ns2.b()
       }, [(_b = (_a = ctx.slots).default) == null ? void 0 : _b.call(_a)]);
     };
   }
 });
-const formLabelProps = {
-  helpTips: {
+const formItemProps = {
+  label: {
+    type: String
+  },
+  field: {
     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: {
+  required: {
     type: Boolean,
     default: false
   },
-  backgroundClass: {
+  messageType: {
+    type: String
+  },
+  popPosition: {
+    type: Array
+  },
+  rules: {
+    type: [Object, Array]
+  },
+  showFeedback: {
+    type: Boolean,
+    default: void 0
+  },
+  helpTips: {
     type: String,
     default: ""
   },
-  backgroundStyle: {
-    type: [String, Object]
+  feedbackStatus: {
+    type: String
   },
-  onBackdropClick: {
-    type: Function
+  extraInfo: {
+    type: String,
+    default: ""
+  }
+};
+const FORM_ITEM_TOKEN = Symbol("dFormItem");
+const LABEL_DATA = Symbol("labelData");
+const formLabelProps = {
+  helpTips: {
+    type: String,
+    default: ""
+  }
+};
+const fixedOverlayProps = {
+  modelValue: {
+    type: Boolean,
+    default: false
   },
-  backdropClose: {
+  lockScroll: {
     type: Boolean,
     default: true
   },
-  hasBackdrop: {
+  closeOnClickOverlay: {
     type: Boolean,
     default: true
   }
 };
-const fixedOverlayProps = __spreadProps(__spreadValues({}, overlayProps), {
-  overlayStyle: {
-    type: [String, Object],
-    default: void 0
+function lockScroll() {
+  if (document.documentElement.scrollHeight > document.documentElement.clientHeight) {
+    const scrollTop = document.documentElement.scrollTop;
+    const style = document.documentElement.getAttribute("style");
+    document.documentElement.style.position = "fixed";
+    document.documentElement.style.top = `-${scrollTop}px`;
+    document.documentElement.style.width = document.documentElement.style.width || "100%";
+    document.documentElement.style.overflowY = "scroll";
+    return () => {
+      if (style) {
+        document.documentElement.setAttribute("style", style);
+      } else {
+        document.documentElement.removeAttribute("style");
+      }
+      document.documentElement.scrollTop = scrollTop;
+    };
   }
-});
-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;
+  return;
+}
+function useFixedOverlay(props, ctx) {
+  let lockScrollCb;
+  const onClick = (event) => {
     event.preventDefault();
-    (_a = props.onBackdropClick) == null ? void 0 : _a.call(props);
-    if (props.backdropClose) {
-      ctx.emit("update:visible", false);
+    ctx.emit("click", event);
+    if (props.closeOnClickOverlay) {
+      ctx.emit("update:modelValue", 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
+  const removeBodyAdditions = () => {
+    lockScrollCb == null ? void 0 : lockScrollCb();
   };
+  watch(() => props.modelValue, (val) => {
+    if (val) {
+      props.lockScroll && (lockScrollCb = lockScroll());
+    } else {
+      removeBodyAdditions();
+    }
+  });
+  onUnmounted(removeBodyAdditions);
+  return { onClick };
 }
 var fixedOverlay = "";
 defineComponent({
   name: "DFixedOverlay",
+  inheritAttrs: false,
   props: fixedOverlayProps,
-  emits: overlayEmits,
+  emits: ["update:modelValue", "click"],
   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")])])]
+      modelValue
+    } = toRefs(props);
+    const ns2 = useNamespace("fixed-overlay");
+    const {
+      onClick
+    } = useFixedOverlay(props, ctx);
+    return () => createVNode(Transition, {
+      "name": ns2.m("fade")
+    }, {
+      default: () => {
+        var _a, _b;
+        return [modelValue.value && createVNode("div", mergeProps({
+          "class": ns2.b()
+        }, ctx.attrs, {
+          "onClick": onClick
+        }), [(_b = (_a = ctx.slots).default) == null ? void 0 : _b.call(_a)])];
+      }
     });
   }
 });
@@ -5865,6 +5892,7 @@ const FlexibleOverlay = defineComponent({
     emit,
     expose
   }) {
+    const ns2 = useNamespace("flexible-overlay");
     const {
       arrowRef,
       overlayRef,
@@ -5877,14 +5905,70 @@ const FlexibleOverlay = defineComponent({
       var _a;
       return props.modelValue && createVNode("div", mergeProps({
         "ref": overlayRef,
-        "class": "devui-flexible-overlay"
+        "class": ns2.b()
       }, attrs), [(_a = slots.default) == null ? void 0 : _a.call(slots), props.showArrow && createVNode("div", {
         "ref": arrowRef,
-        "class": "devui-flexible-overlay-arrow"
+        "class": ns2.e("arrow")
       }, null)]);
     };
   }
 });
+const POPPER_TRIGGER_TOKEN = Symbol("popper-trigger");
+const isObject = (val) => val !== null && typeof val === "object";
+const ns$1 = useNamespace("popper-trigger");
+function wrapContent(content) {
+  return h("span", { class: ns$1.b() }, content);
+}
+function getFirstValidChild(nodes) {
+  for (const child of nodes) {
+    if (isObject(child)) {
+      if (child.type === Comment) {
+        continue;
+      }
+      if (child.type === "svg" || child.type === Text) {
+        return wrapContent(child);
+      }
+      if (child.type === Fragment) {
+        return getFirstValidChild(child.children);
+      }
+      return child;
+    }
+    return wrapContent(child);
+  }
+  return null;
+}
+var PopperTrigger = defineComponent({
+  name: "DPopperTrigger",
+  setup(_, ctx) {
+    const {
+      slots,
+      attrs
+    } = ctx;
+    return () => {
+      var _a;
+      const defaultSlot = (_a = slots.default) == null ? void 0 : _a.call(slots, attrs);
+      const triggerRef = inject(POPPER_TRIGGER_TOKEN);
+      if (!defaultSlot) {
+        return null;
+      }
+      const firstValidChild = getFirstValidChild(defaultSlot);
+      if (!firstValidChild) {
+        return null;
+      }
+      return withDirectives(cloneVNode(firstValidChild, attrs), [[{
+        mounted(el) {
+          triggerRef.value = el;
+        },
+        updated(el) {
+          triggerRef.value = el;
+        },
+        unmounted() {
+          triggerRef.value = null;
+        }
+      }]]);
+    };
+  }
+});
 const popoverProps = {
   isOpen: {
     type: Boolean,
@@ -5925,6 +6009,10 @@ const popoverProps = {
   mouseLeaveDelay: {
     type: Number,
     default: 100
+  },
+  disabled: {
+    type: Boolean,
+    default: false
   }
 };
 const TransformOriginMap = {
@@ -5961,11 +6049,16 @@ function usePopover(props, visible, placement, origin, popoverRef) {
   return { overlayStyles };
 }
 function usePopoverEvent(props, visible, origin) {
-  const { trigger, position, mouseEnterDelay, mouseLeaveDelay } = toRefs(props);
+  const { trigger, position, mouseEnterDelay, mouseLeaveDelay, disabled } = toRefs(props);
   const isClick = computed(() => trigger.value === "click");
   const placement = ref(position.value[0].split("-")[0]);
   const isEnter = ref(false);
-  const onClick = () => isClick.value && (visible.value = !visible.value);
+  const onClick = () => {
+    if (disabled.value) {
+      return;
+    }
+    isClick.value && (visible.value = !visible.value);
+  };
   const enter = lodash.exports.debounce(() => {
     isEnter.value && (visible.value = true);
   }, mouseEnterDelay.value);
@@ -5973,6 +6066,9 @@ function usePopoverEvent(props, visible, origin) {
     !isEnter.value && (visible.value = false);
   }, mouseLeaveDelay.value);
   const onMouseenter = () => {
+    if (disabled.value) {
+      return;
+    }
     if (!isClick.value) {
       isEnter.value = true;
       enter();
@@ -5984,6 +6080,15 @@ function usePopoverEvent(props, visible, origin) {
       leave();
     }
   };
+  const quickLeave = () => {
+    isEnter.value = false;
+    visible.value = false;
+  };
+  watch(disabled, (newVal) => {
+    if (newVal && visible.value) {
+      quickLeave();
+    }
+  });
   const handlePositionChange = (pos) => {
     placement.value = pos.split("-")[0];
   };
@@ -5995,11 +6100,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"
@@ -6023,7 +6129,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"
@@ -6033,14 +6139,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"
@@ -6056,12 +6162,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",
@@ -6077,7 +6183,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)])]);
 }
@@ -6090,9 +6196,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 = "";
@@ -6100,9 +6207,11 @@ var Popover = defineComponent({
   name: "DPopover",
   inheritAttrs: false,
   props: popoverProps,
+  emits: ["show", "hide"],
   setup(props, {
     slots,
-    attrs
+    attrs,
+    emit
   }) {
     const {
       content,
@@ -6117,47 +6226,61 @@ 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);
-    return () => {
-      var _a;
-      return createVNode(Fragment, null, [createVNode("div", {
-        "ref": origin,
-        "class": "devui-popover-reference"
-      }, [(_a = slots.reference) == null ? void 0 : _a.call(slots)]), createVNode(Teleport, {
-        "to": "body"
+    const ns2 = useNamespace("popover");
+    provide(POPPER_TRIGGER_TOKEN, origin);
+    watch(visible, (newVal) => {
+      if (newVal) {
+        emit("show");
+      } else {
+        emit("hide");
+      }
+    });
+    return () => createVNode(Fragment, null, [createVNode(PopperTrigger, null, {
+      default: () => {
+        var _a;
+        return [(_a = slots.default) == null ? void 0 : _a.call(slots)];
+      }
+    }), createVNode(Teleport, {
+      "to": "body"
+    }, {
+      default: () => [createVNode(Transition, {
+        "name": showAnimation.value ? ns2.m(`fade-${placement.value}`) : ""
       }, {
-        default: () => [createVNode(Transition, {
-          "name": showAnimation.value ? `devui-popover-fade-${placement.value}` : ""
-        }, {
-          default: () => [createVNode(FlexibleOverlay, mergeProps({
-            "modelValue": visible.value,
-            "onUpdate:modelValue": ($event) => visible.value = $event,
-            "ref": popoverRef,
-            "origin": origin.value,
-            "position": position.value,
-            "align": align.value,
-            "offset": offset2.value,
-            "class": ["devui-popover-content", popType.value !== "default" ? "is-icon" : ""],
-            "show-arrow": true,
-            "is-arrow-center": false,
-            "style": overlayStyles.value
-          }, attrs, {
-            "onPositionChange": handlePositionChange
-          }), {
-            default: () => {
-              var _a2;
-              return [createVNode(PopoverIcon, {
-                "type": popType.value
-              }, null), ((_a2 = slots.content) == null ? void 0 : _a2.call(slots)) || createVNode("span", null, [content.value])];
-            }
-          })]
+        default: () => [createVNode(FlexibleOverlay, mergeProps({
+          "modelValue": visible.value,
+          "onUpdate:modelValue": ($event) => visible.value = $event,
+          "ref": popoverRef,
+          "origin": origin.value,
+          "position": position.value,
+          "align": align.value,
+          "offset": offset2.value,
+          "class": [ns2.e("content"), popType.value !== "default" ? "is-icon" : ""],
+          "show-arrow": true,
+          "is-arrow-center": false,
+          "style": overlayStyles.value
+        }, attrs, {
+          "onPositionChange": handlePositionChange,
+          "onClick": withModifiers(() => ({}), ["stop"]),
+          "onPointerup": withModifiers(() => ({}), ["stop"]),
+          "onMouseenter": onMouseenter,
+          "onMouseleave": onMouseleave
+        }), {
+          default: () => {
+            var _a;
+            return [createVNode(PopoverIcon, {
+              "type": popType.value
+            }, null), ((_a = slots.content) == null ? void 0 : _a.call(slots)) || createVNode("span", null, [content.value])];
+          }
         })]
-      })]);
-    };
+      })]
+    })]);
   }
 });
 function HelpTipsIcon() {
@@ -6176,43 +6299,74 @@ function HelpTipsIcon() {
     "fill-rule": "nonzero"
   }, null)])])]);
 }
-const formItemProps = {
-  field: {
-    type: String,
-    default: ""
-  },
-  dHasFeedback: {
-    type: Boolean,
-    default: false
-  },
-  required: {
-    type: Boolean,
-    default: false
-  },
-  messageType: {
-    type: String
-  },
-  popPosition: {
-    type: Array
-  },
-  rules: {
-    type: [Object, Array]
-  }
-};
-const FORM_ITEM_TOKEN = Symbol("dFormItem");
+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)])]);
+}
 function useFormLabel() {
-  const formContext = inject(FORM_TOKEN);
   const formItemContext = inject(FORM_ITEM_TOKEN);
-  const ns = useNamespace("form");
+  const labelData = inject(LABEL_DATA);
+  const ns2 = useNamespace("form");
   const labelClasses = computed(() => ({
-    [`${ns.e("label")}`]: true,
-    [`${ns.em("label", "vertical")}`]: formContext.layout === "vertical",
-    [`${ns.em("label", formContext.labelSize)}`]: formContext.layout === "horizontal",
-    [`${ns.em("label", formContext.labelAlign)}`]: formContext.layout === "horizontal"
+    [`${ns2.e("label")}`]: true,
+    [`${ns2.em("label", "vertical")}`]: labelData.value.layout === "vertical",
+    [`${ns2.em("label", labelData.value.labelSize)}`]: labelData.value.layout === "horizontal",
+    [`${ns2.em("label", labelData.value.labelAlign)}`]: labelData.value.layout === "horizontal"
   }));
   const labelInnerClasses = computed(() => ({
-    [`${ns.e("label-span")}`]: true,
-    [`${ns.em("label", "required")}`]: formItemContext.isRequired
+    [`${ns2.e("label-span")}`]: true,
+    [`${ns2.em("label", "required")}`]: formItemContext.isRequired
   }));
   return { labelClasses, labelInnerClasses };
 }
@@ -6221,7 +6375,7 @@ var FormLabel = defineComponent({
   name: "DFormLabel",
   props: formLabelProps,
   setup(props, ctx) {
-    const ns = useNamespace("form");
+    const ns2 = useNamespace("form");
     const {
       labelClasses,
       labelInnerClasses
@@ -6238,13 +6392,96 @@ var FormLabel = defineComponent({
         "trigger": "hover",
         "pop-type": "info"
       }, {
-        reference: () => createVNode(HelpTipsIcon, {
-          "class": ns.e("label-help")
-        }, null)
+        default: () => [createVNode(HelpTipsIcon, {
+          "class": ns2.e("label-help")
+        }, null), createTextVNode(",")]
       })]);
     };
   }
 });
+const formControlProps = {
+  feedbackStatus: {
+    type: String
+  },
+  extraInfo: {
+    type: String,
+    default: ""
+  }
+};
+function useFormControl(props) {
+  const labelData = inject(LABEL_DATA);
+  const ns2 = useNamespace("form");
+  const { feedbackStatus } = toRefs(props);
+  const controlClasses = computed(() => ({
+    [ns2.e("control")]: true,
+    [ns2.em("control", "horizontal")]: labelData.value.layout === "horizontal"
+  }));
+  const controlContainerClasses = computed(() => ({
+    [ns2.e("control-container")]: true,
+    [ns2.em("control-container", "horizontal")]: labelData.value.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",
+  props: formControlProps,
+  setup(props, ctx) {
+    const formControl2 = ref();
+    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
+    }, {
+      default: () => {
+        var _a, _b;
+        return [createVNode("div", {
+          "class": ns2.e("control-content")
+        }, [(_b = (_a = ctx.slots).default) == null ? void 0 : _b.call(_a)]), createTextVNode(",")];
+      }
+    }), 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])])]);
+  }
+});
 function _extends() {
   _extends = Object.assign || function(target) {
     for (var i = 1; i < arguments.length; i++) {
@@ -7247,13 +7484,23 @@ Schema.register = function register(type4, validator) {
 Schema.warning = warning;
 Schema.messages = messages;
 Schema.validators = validators;
+function getFieldValue(obj, path) {
+  return {
+    get value() {
+      return lodash.exports.get(obj, path);
+    },
+    set value(val) {
+      lodash.exports.set(obj, path, val);
+    }
+  };
+}
 function useFormItem(messageType, _rules, validateState) {
   const formContext = inject(FORM_TOKEN);
-  const ns = useNamespace("form");
+  const ns2 = useNamespace("form");
   const itemClasses = computed(() => ({
-    [`${ns.em("item", "horizontal")}`]: formContext.layout === "horizontal",
-    [`${ns.em("item", "vertical")}`]: formContext.layout === "vertical",
-    [`${ns.em("item", "error")}`]: messageType.value === "text" && validateState.value === "error"
+    [`${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 };
@@ -7280,6 +7527,8 @@ 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 : "";
   });
@@ -7288,7 +7537,7 @@ function useFormItemValidate(props, _rules) {
     if (!formData || !props.field) {
       return;
     }
-    return formData[props.field];
+    return getFieldValue(formData, props.field).value;
   });
   const getRuleByTrigger = (triggerVal) => {
     return _rules.value.filter((rule) => {
@@ -7301,18 +7550,20 @@ function useFormItemValidate(props, _rules) {
         return rule.trigger === triggerVal;
       }
     }).map((_a) => {
-      var _b = _a, { trigger } = _b, rule = __objRest(_b, ["trigger"]);
+      var rule = __objRest(_a, []);
       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;
@@ -7328,6 +7579,10 @@ function useFormItemValidate(props, _rules) {
     });
   };
   const validate = async (trigger, callback) => {
+    if (isResetting) {
+      isResetting = false;
+      return false;
+    }
     const rules2 = getRuleByTrigger(trigger);
     if (!rules2.length) {
       callback == null ? void 0 : callback(true);
@@ -7343,7 +7598,26 @@ function useFormItemValidate(props, _rules) {
       return lodash.exports.isFunction(callback) ? false : Promise.reject(fields);
     });
   };
-  return { validateState, validateMessage, validate };
+  const clearValidate = () => {
+    validateState.value = "";
+    validateMessage.value = "";
+  };
+  const resetField = async () => {
+    if (!formContext.data || !props.field) {
+      return;
+    }
+    const currentValue = getFieldValue(formContext.data, props.field);
+    if (!lodash.exports.isEqual(currentValue.value, initFieldValue)) {
+      isResetting = true;
+    }
+    currentValue.value = initFieldValue;
+    await nextTick();
+    clearValidate();
+  };
+  onMounted(() => {
+    initFieldValue = lodash.exports.clone(fieldValue.value);
+  });
+  return { validateState, validateMessage, validate, resetField, clearValidate };
 }
 var formItem = "";
 var FormItem = defineComponent({
@@ -7353,11 +7627,20 @@ var FormItem = defineComponent({
     const formContext = inject(FORM_TOKEN);
     const _a = toRefs(props), {
       messageType: itemMessageType,
-      popPosition: itemPopPosition
+      popPosition: itemPopPosition,
+      showFeedback: itemShowFeedback
     } = _a, otherProps = __objRest(_a, [
       "messageType",
-      "popPosition"
+      "popPosition",
+      "showFeedback"
     ]);
+    const {
+      label,
+      helpTips,
+      feedbackStatus,
+      extraInfo
+    } = toRefs(props);
+    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 {
@@ -7366,21 +7649,36 @@ var FormItem = defineComponent({
     const {
       validateState,
       validateMessage,
-      validate
+      validate,
+      resetField,
+      clearValidate
     } = useFormItemValidate(props, _rules);
     const {
       itemClasses,
       isRequired
     } = useFormItem(messageType, _rules, validateState);
+    const labelData = computed(() => ({
+      layout: formContext.layout,
+      labelSize: formContext.labelSize,
+      labelAlign: formContext.labelAlign
+    }));
+    provide(LABEL_DATA, labelData);
     const context = reactive(__spreadProps(__spreadValues({}, otherProps), {
+      showFeedback,
       messageType,
       popPosition,
       isRequired,
       validateState,
       validateMessage,
-      validate
+      validate,
+      resetField,
+      clearValidate
     }));
     provide(FORM_ITEM_TOKEN, context);
+    ctx.expose({
+      resetField,
+      clearValidate
+    });
     onMounted(() => {
       if (props.field) {
         formContext == null ? void 0 : formContext.addItemContext(context);
@@ -7389,89 +7687,21 @@ var FormItem = defineComponent({
     onBeforeUnmount(() => {
       formContext == null ? void 0 : formContext.removeItemContext(context);
     });
-    return () => {
-      var _a2, _b;
-      return createVNode("div", {
-        "class": itemClasses.value
-      }, [(_b = (_a2 = ctx.slots).default) == null ? void 0 : _b.call(_a2)]);
-    };
-  }
-});
-const formControlProps = {
-  feedbackStatus: {
-    type: String
-  },
-  extraInfo: {
-    type: String,
-    default: ""
-  }
-};
-function useFormControl(props) {
-  const formContext = inject(FORM_TOKEN);
-  const ns = useNamespace("form");
-  const { feedbackStatus } = toRefs(props);
-  const controlClasses = computed(() => ({
-    [`${ns.e("control")}`]: true,
-    [`${ns.em("control", "horizontal")}`]: formContext.layout === "horizontal"
-  }));
-  const controlContainerClasses = computed(() => ({
-    [`${ns.e("control-container")}`]: true,
-    [`${ns.em("control-container", "horizontal")}`]: formContext.layout === "horizontal",
-    [`${ns.em("control-container", "has-feedback")}`]: Boolean(feedbackStatus.value),
-    [`${ns.em("control-container", "feedback-error")}`]: Boolean(feedbackStatus.value === "error")
-  }));
-  return { controlClasses, controlContainerClasses };
-}
-function useFormControlValidate() {
-  const formItemContext = inject(FORM_ITEM_TOKEN);
-  const showPopover = computed(() => formItemContext.messageType === "popover" && formItemContext.validateState === "error");
-  const showMessage = computed(() => formItemContext.messageType === "text" && formItemContext.validateState === "error");
-  const errorMessage = computed(() => formItemContext.validateMessage);
-  const popPosition = computed(() => formItemContext.popPosition);
-  return { showPopover, showMessage, errorMessage, popPosition };
-}
-var formControl = "";
-var FormControl = defineComponent({
-  name: "DFormControl",
-  props: formControlProps,
-  setup(props, ctx) {
-    const formControl2 = ref();
-    const ns = useNamespace("form");
-    const {
-      controlClasses,
-      controlContainerClasses
-    } = useFormControl(props);
-    const {
-      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
+      "class": itemClasses.value
+    }, [createVNode(FormLabel, {
+      "help-tips": helpTips.value
     }, {
-      reference: () => {
-        var _a, _b;
-        return createVNode("div", {
-          "class": ns.e("control-content")
-        }, [(_b = (_a = ctx.slots).default) == null ? void 0 : _b.call(_a)]);
+      default: () => [label == null ? void 0 : label.value]
+    }), createVNode(FormControl, {
+      "feedback-status": feedbackStatus == null ? void 0 : feedbackStatus.value,
+      "extra-info": extraInfo.value
+    }, {
+      default: () => {
+        var _a2, _b;
+        return [(_b = (_a2 = ctx.slots).default) == null ? void 0 : _b.call(_a2)];
       }
-    })]), createVNode("div", {
-      "class": ns.e("control-info")
-    }, [showMessage.value && createVNode("div", {
-      "class": "error-message"
-    }, [errorMessage.value]), props.extraInfo && createVNode("div", {
-      "class": ns.e("control-extra")
-    }, [props.extraInfo])])]);
+    })]);
   }
 });
 var formOperation = "";
@@ -7502,10 +7732,8 @@ var index = {
   status: "75%",
   install(app) {
     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_ITEM_TOKEN, FORM_TOKEN, Form, FormControl, FormItem, FormLabel, FormOperation, index as default, formControlProps, formItemProps, formProps };
+export { FORM_ITEM_TOKEN, FORM_TOKEN, Form, FormItem, FormOperation, LABEL_DATA, index as default, formItemProps, formProps };