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

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, Teleport, Transition, renderSlot, isVNode, computed, onMounted, onUnmounted, ref, unref, nextTick, mergeProps, Comment, Text, h, Fragment, inject, withDirectives, cloneVNode, createTextVNode, onBeforeUnmount } from "vue";
 import { offset, autoPlacement, arrow, shift, computePosition } from "@floating-ui/dom";
 const formProps = {
   data: {
@@ -79,8 +79,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 +844,7 @@ var lodash = { exports: {} };
         function object4() {
         }
         return function(proto) {
-          if (!isObject(proto)) {
+          if (!isObject2(proto)) {
             return {};
           }
           if (objectCreate) {
@@ -1206,7 +1206,7 @@ var lodash = { exports: {} };
         if (result2 !== undefined$1) {
           return result2;
         }
-        if (!isObject(value)) {
+        if (!isObject2(value)) {
           return value;
         }
         var isArr = isArray(value);
@@ -1553,7 +1553,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 +1593,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 +1638,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 +1678,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 +1817,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 +1831,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 +2281,7 @@ var lodash = { exports: {} };
               return new Ctor(args[0], args[1], args[2], args[3], args[4], args[5], args[6]);
           }
           var thisBinding = baseCreate(Ctor.prototype), result2 = Ctor.apply(thisBinding, args);
-          return isObject(result2) ? result2 : thisBinding;
+          return isObject2(result2) ? result2 : thisBinding;
         };
       }
       function createCurry(func, bitmask, arity) {
@@ -2595,7 +2595,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 +2943,7 @@ var lodash = { exports: {} };
         return !!length && (type4 == "number" || type4 != "symbol" && reIsUint.test(value)) && (value > -1 && value % 1 == 0 && value < length);
       }
       function isIterateeCall(value, index2, object4) {
-        if (!isObject(object4)) {
+        if (!isObject2(object4)) {
           return false;
         }
         var type4 = typeof index2;
@@ -2986,7 +2986,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 +3868,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 +4038,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 +4146,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 +4158,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 +4265,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 +4488,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 +4770,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 +4900,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 +5252,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,6 +5613,45 @@ var Form = defineComponent({
     };
   }
 });
+const formItemProps = {
+  label: {
+    type: String
+  },
+  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
+  },
+  helpTips: {
+    type: String,
+    default: ""
+  },
+  feedbackStatus: {
+    type: String
+  },
+  extraInfo: {
+    type: String,
+    default: ""
+  }
+};
+const FORM_ITEM_TOKEN = Symbol("dFormItem");
+const LABEL_DATA = Symbol("labelData");
 const formLabelProps = {
   helpTips: {
     type: String,
@@ -5911,6 +5950,62 @@ const FlexibleOverlay = defineComponent({
     };
   }
 });
+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 +6046,10 @@ const popoverProps = {
   mouseLeaveDelay: {
     type: Number,
     default: 100
+  },
+  disabled: {
+    type: Boolean,
+    default: false
   }
 };
 const TransformOriginMap = {
@@ -5987,11 +6086,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 +6103,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 +6117,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 +6244,11 @@ var Popover = defineComponent({
   name: "DPopover",
   inheritAttrs: false,
   props: popoverProps,
+  emits: ["show", "hide"],
   setup(props, {
     slots,
-    attrs
+    attrs,
+    emit
   }) {
     const {
       content,
@@ -6153,44 +6271,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 +6389,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 +6427,96 @@ 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 [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++) {
@@ -7477,6 +7661,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 +7684,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 +7714,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 +7759,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, formControlProps, formItemProps, formProps };