vue-devui 1.0.0-rc.8 → 1.0.1

package/form/index.es.js

@@ -29,7 +29,7 @@ var __objRest = (source, exclude) => {
     }
   return target;
 };
-import { defineComponent, watch, provide, reactive, toRefs, createVNode, Teleport, Transition, renderSlot, isVNode, computed, onMounted, onUnmounted, ref, unref, nextTick, mergeProps, Fragment, inject, onBeforeUnmount } from "vue";
+import { defineComponent, watch, provide, reactive, toRefs, createVNode, onUnmounted, Transition, mergeProps, ref, unref, nextTick, withModifiers, Comment, Text, h, Fragment, inject, withDirectives, cloneVNode, computed, onMounted, Teleport, createTextVNode, onBeforeUnmount } from "vue";
 import { offset, autoPlacement, arrow, shift, computePosition } from "@floating-ui/dom";
 const formProps = {
   data: {
@@ -66,6 +66,13 @@ const formProps = {
   showFeedback: {
     type: Boolean,
     default: false
+  },
+  disabled: {
+    type: Boolean,
+    default: false
+  },
+  size: {
+    type: String
   }
 };
 const FORM_TOKEN = Symbol("dForm");
@@ -79,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) : "";
@@ -844,7 +851,7 @@ var lodash = { exports: {} };
         function object4() {
         }
         return function(proto) {
-          if (!isObject(proto)) {
+          if (!isObject2(proto)) {
             return {};
           }
           if (objectCreate) {
@@ -1206,7 +1213,7 @@ var lodash = { exports: {} };
         if (result2 !== undefined$1) {
           return result2;
         }
-        if (!isObject(value)) {
+        if (!isObject2(value)) {
           return value;
         }
         var isArr = isArray(value);
@@ -1553,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;
@@ -1593,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 = [];
@@ -1638,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;
@@ -1678,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 {
@@ -1817,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);
@@ -1831,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);
@@ -2281,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) {
@@ -2595,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);
@@ -2943,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;
@@ -2986,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) {
@@ -3868,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;
@@ -4038,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;
         }
@@ -4146,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);
@@ -4158,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");
       }
@@ -4265,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;
@@ -4488,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 = {};
@@ -4770,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;
@@ -4900,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;
@@ -5252,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;
@@ -5613,136 +5620,131 @@ var Form = defineComponent({
     };
   }
 });
-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) {
-    const ns2 = useNamespace("overlay");
-    return () => {
-      let _slot;
-      return createVNode(Teleport, {
-        "to": "#d-overlay-anchor"
-      }, {
-        default: () => [createVNode(Transition, {
-          "name": ns2.e("fade")
-        }, _isSlot(_slot = renderSlot(ctx.slots, "default")) ? _slot : {
-          default: () => [_slot]
-        })]
-      });
-    };
-  }
-});
-const overlayProps = {
-  visible: {
-    type: Boolean
   },
-  backgroundBlock: {
+  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 ns2 = useNamespace("overlay");
-  const backgroundClass = computed(() => {
-    return [ns2.e("background"), props.backgroundClass, !props.hasBackdrop ? ns2.em("background", "disabled") : ns2.em("background", "color")];
-  });
-  const overlayClass = computed(() => {
-    return ns2.b();
-  });
-  const handleBackdropClick = (event) => {
-    var _a;
+  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)])];
+      }
     });
   }
 });
@@ -5777,6 +5779,10 @@ const flexibleOverlayProps = {
   isArrowCenter: {
     type: Boolean,
     default: true
+  },
+  clickEventBubble: {
+    type: Boolean,
+    default: false
   }
 };
 function getScrollParent(element) {
@@ -5891,6 +5897,9 @@ const FlexibleOverlay = defineComponent({
     expose
   }) {
     const ns2 = useNamespace("flexible-overlay");
+    const {
+      clickEventBubble
+    } = toRefs(props);
     const {
       arrowRef,
       overlayRef,
@@ -5904,13 +5913,72 @@ const FlexibleOverlay = defineComponent({
       return props.modelValue && createVNode("div", mergeProps({
         "ref": overlayRef,
         "class": ns2.b()
-      }, attrs), [(_a = slots.default) == null ? void 0 : _a.call(slots), props.showArrow && createVNode("div", {
+      }, attrs, {
+        "onClick": withModifiers(() => ({}), [clickEventBubble.value ? "" : "stop"]),
+        "onPointerup": withModifiers(() => ({}), ["stop"])
+      }), [(_a = slots.default) == null ? void 0 : _a.call(slots), props.showArrow && createVNode("div", {
         "ref": arrowRef,
         "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,
@@ -5951,6 +6019,10 @@ const popoverProps = {
   mouseLeaveDelay: {
     type: Number,
     default: 100
+  },
+  disabled: {
+    type: Boolean,
+    default: false
   }
 };
 const TransformOriginMap = {
@@ -5962,7 +6034,7 @@ const TransformOriginMap = {
 function usePopover(props, visible, placement, origin, popoverRef) {
   const { trigger, isOpen } = toRefs(props);
   const overlayStyles = computed(() => ({
-    zIndex: 1060,
+    zIndex: "var(--devui-z-index-pop-up, 1060)",
     transformOrigin: TransformOriginMap[placement.value]
   }));
   const onDocumentClick = (e) => {
@@ -5987,11 +6059,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);
@@ -5999,6 +6076,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();
@@ -6010,6 +6090,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];
   };
@@ -6128,9 +6217,11 @@ var Popover = defineComponent({
   name: "DPopover",
   inheritAttrs: false,
   props: popoverProps,
+  emits: ["show", "hide"],
   setup(props, {
     slots,
-    attrs
+    attrs,
+    emit
   }) {
     const {
       content,
@@ -6153,44 +6244,51 @@ var Popover = defineComponent({
       overlayStyles
     } = usePopover(props, visible, placement, origin, popoverRef);
     const ns2 = useNamespace("popover");
-    return () => {
-      var _a;
-      return createVNode(Fragment, null, [createVNode("div", {
-        "ref": origin,
-        "class": ns2.e("reference")
-      }, [(_a = slots.reference) == null ? void 0 : _a.call(slots)]), createVNode(Teleport, {
-        "to": "body"
+    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 ? ns2.m(`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": [ns2.e("content"), popType.value !== "default" ? "is-icon" : ""],
-            "show-arrow": true,
-            "is-arrow-center": false,
-            "style": overlayStyles.value
-          }, attrs, {
-            "onPositionChange": handlePositionChange,
-            "onMouseenter": onMouseenter,
-            "onMouseleave": onMouseleave
-          }), {
-            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,
+          "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() {
@@ -6264,39 +6362,15 @@ function PendingIcon() {
     "fill-rule": "nonzero"
   }, null)])]);
 }
-const formItemProps = {
-  field: {
-    type: String,
-    default: ""
-  },
-  required: {
-    type: Boolean,
-    default: false
-  },
-  messageType: {
-    type: String
-  },
-  popPosition: {
-    type: Array
-  },
-  rules: {
-    type: [Object, Array]
-  },
-  showFeedback: {
-    type: Boolean,
-    default: void 0
-  }
-};
-const FORM_ITEM_TOKEN = Symbol("dFormItem");
 function useFormLabel() {
-  const formContext = inject(FORM_TOKEN);
   const formItemContext = inject(FORM_ITEM_TOKEN);
+  const labelData = inject(LABEL_DATA);
   const ns2 = useNamespace("form");
   const labelClasses = computed(() => ({
     [`${ns2.e("label")}`]: true,
-    [`${ns2.em("label", "vertical")}`]: formContext.layout === "vertical",
-    [`${ns2.em("label", formContext.labelSize)}`]: formContext.layout === "horizontal",
-    [`${ns2.em("label", formContext.labelAlign)}`]: formContext.layout === "horizontal"
+    [`${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(() => ({
     [`${ns2.e("label-span")}`]: true,
@@ -6326,13 +6400,94 @@ var FormLabel = defineComponent({
         "trigger": "hover",
         "pop-type": "info"
       }, {
-        reference: () => createVNode(HelpTipsIcon, {
+        default: () => [createVNode(HelpTipsIcon, {
           "class": ns2.e("label-help")
-        }, null)
+        }, 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 [(_b = (_a = ctx.slots).default) == null ? void 0 : _b.call(_a)];
+      }
+    }), showFeedback.value && createVNode("span", {
+      "class": [ns2.e("feedback-icon"), ns2.em("feedback-icon", feedbackStatus.value)]
+    }, [feedbackStatus.value === "error" && createVNode(ErrorIcon, null, null), feedbackStatus.value === "success" && createVNode(SuccessIcon, null, null), feedbackStatus.value === "pending" && createVNode(PendingIcon, null, null)])]), createVNode("div", {
+      "class": ns2.e("control-info")
+    }, [showMessage.value && createVNode("div", {
+      "class": "error-message"
+    }, [errorMessage.value]), props.extraInfo && createVNode("div", {
+      "class": ns2.e("control-extra")
+    }, [props.extraInfo])])]);
+  }
+});
 function _extends() {
   _extends = Object.assign || function(target) {
     for (var i = 1; i < arguments.length; i++) {
@@ -7335,6 +7490,16 @@ 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 ns2 = useNamespace("form");
@@ -7373,17 +7538,12 @@ function useFormItemValidate(props, _rules) {
   const computedField = computed(() => {
     return typeof props.field === "string" ? props.field : "";
   });
-  const fieldValue = computed({
-    get: () => {
-      const formData = formContext.data;
-      if (!formData || !props.field) {
-        return;
-      }
-      return formData[props.field];
-    },
-    set: (val) => {
-      formContext.data[props.field] = val;
+  const fieldValue = computed(() => {
+    const formData = formContext.data;
+    if (!formData || !props.field) {
+      return;
     }
+    return getFieldValue(formData, props.field).value;
   });
   const getRuleByTrigger = (triggerVal) => {
     return _rules.value.filter((rule) => {
@@ -7396,7 +7556,7 @@ 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;
     });
   };
@@ -7452,13 +7612,16 @@ function useFormItemValidate(props, _rules) {
     if (!formContext.data || !props.field) {
       return;
     }
-    isResetting = true;
-    fieldValue.value = initFieldValue;
+    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.cloneDeep(formContext.data[props.field]);
+    initFieldValue = lodash.exports.clone(fieldValue.value);
   });
   return { validateState, validateMessage, validate, resetField, clearValidate };
 }
@@ -7477,6 +7640,12 @@ var FormItem = defineComponent({
       "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);
@@ -7494,6 +7663,12 @@ var FormItem = defineComponent({
       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,
@@ -7518,95 +7693,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 ns2 = useNamespace("form");
-  const { feedbackStatus } = toRefs(props);
-  const controlClasses = computed(() => ({
-    [ns2.e("control")]: true,
-    [ns2.em("control", "horizontal")]: formContext.layout === "horizontal"
-  }));
-  const controlContainerClasses = computed(() => ({
-    [ns2.e("control-container")]: true,
-    [ns2.em("control-container", "horizontal")]: formContext.layout === "horizontal",
-    [ns2.em("control-container", "has-feedback")]: Boolean(feedbackStatus == null ? void 0 : feedbackStatus.value),
-    [ns2.em("control-container", "feedback-error")]: Boolean((feedbackStatus == null ? void 0 : feedbackStatus.value) === "error")
-  }));
-  return { controlClasses, controlContainerClasses };
-}
-function useFormControlValidate() {
-  const formItemContext = inject(FORM_ITEM_TOKEN);
-  const feedbackStatus = computed(() => formItemContext.validateState);
-  const showFeedback = computed(() => formItemContext.showFeedback && Boolean(formItemContext.validateState));
-  const showPopover = computed(() => formItemContext.messageType === "popover" && formItemContext.validateState === "error");
-  const showMessage = computed(() => formItemContext.messageType === "text" && formItemContext.validateState === "error");
-  const errorMessage = computed(() => formItemContext.validateMessage);
-  const popPosition = computed(() => formItemContext.popPosition);
-  return { feedbackStatus, showFeedback, showPopover, showMessage, errorMessage, popPosition };
-}
-var formControl = "";
-var FormControl = defineComponent({
-  name: "DFormControl",
-  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
+      "class": itemClasses.value
+    }, [createVNode(FormLabel, {
+      "help-tips": helpTips.value
     }, {
-      reference: () => {
-        var _a, _b;
-        return createVNode("div", {
-          "class": ns2.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)];
       }
-    }), showFeedback.value && createVNode("span", {
-      "class": [ns2.e("feedback-icon"), ns2.em("feedback-icon", feedbackStatus.value)]
-    }, [feedbackStatus.value === "error" && createVNode(ErrorIcon, null, null), feedbackStatus.value === "success" && createVNode(SuccessIcon, null, null), feedbackStatus.value === "pending" && createVNode(PendingIcon, null, null)])]), createVNode("div", {
-      "class": ns2.e("control-info")
-    }, [showMessage.value && createVNode("div", {
-      "class": "error-message"
-    }, [errorMessage.value]), props.extraInfo && createVNode("div", {
-      "class": ns2.e("control-extra")
-    }, [props.extraInfo])])]);
+    })]);
   }
 });
 var formOperation = "";
@@ -7637,10 +7738,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 };