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

package/form/index.es.js

@@ -29,24 +29,8 @@ var __objRest = (source, exclude) => {
     }
   return target;
 };
-import { defineComponent, toRefs, provide, reactive, createVNode, Teleport, Transition, renderSlot, isVNode, computed, onMounted, watch, onUnmounted, ref, unref, nextTick, mergeProps, Fragment, inject, onBeforeUnmount } from "vue";
+import { 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";
-function mitt(n) {
-  return { all: n = n || /* @__PURE__ */ new Map(), on: function(t, e) {
-    var i = n.get(t);
-    i ? i.push(e) : n.set(t, [e]);
-  }, off: function(t, e) {
-    var i = n.get(t);
-    i && (e ? i.splice(i.indexOf(e) >>> 0, 1) : n.set(t, []));
-  }, emit: function(t, e) {
-    var i = n.get(t);
-    i && i.slice().map(function(n2) {
-      n2(e);
-    }), (i = n.get("*")) && i.slice().map(function(n2) {
-      n2(t, e);
-    });
-  } };
-}
 const formProps = {
   data: {
     type: Object,
@@ -67,27 +51,24 @@ const formProps = {
   rules: {
     type: Object
   },
-  messageShowType: {
+  messageType: {
     type: String,
     default: "popover"
+  },
+  popPosition: {
+    type: Array,
+    default: ["right", "bottom"]
+  },
+  validateOnRuleChange: {
+    type: Boolean,
+    default: false
+  },
+  showFeedback: {
+    type: Boolean,
+    default: false
   }
 };
-const dFormEvents = {
-  addField: "d.form.addField",
-  removeField: "d.form.removeField"
-};
 const FORM_TOKEN = Symbol("dForm");
-var eventBus = mitt();
-const EventBus = eventBus;
-function isObject(obj) {
-  return Object.prototype.toString.call(obj).slice(8, -1) === "Object";
-}
-function hasKey(obj, key) {
-  if (!isObject(obj)) {
-    return false;
-  }
-  return Object.prototype.hasOwnProperty.call(obj, key);
-}
 function createBem(namespace, element, modifier) {
   let cls = namespace;
   if (element) {
@@ -98,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) : "";
@@ -5577,21 +5558,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: ["submit"],
+  emits: ["validate"],
   setup(props, ctx) {
-    const formMitt = mitt();
-    const ns = useNamespace("form");
-    const {
-      data,
-      layout,
-      labelSize,
-      labelAlign
-    } = toRefs(props);
+    const ns2 = useNamespace("form");
     const {
       itemContexts,
       addItemContext,
@@ -5599,45 +5579,79 @@ var Form = defineComponent({
     } = useFieldCollection();
     const {
       validate,
-      validateFields
+      validateFields,
+      resetFields,
+      clearValidate
     } = useFormValidation(itemContexts);
-    formMitt.on(dFormEvents.addField, (field) => {
-    });
-    formMitt.on(dFormEvents.removeField, (field) => {
-      if (field.prop)
-        ;
+    const onSubmit = (e) => {
+      e.preventDefault();
+    };
+    watch(() => props.rules, () => {
+      if (props.validateOnRuleChange) {
+        validate();
+      }
+    }, {
+      deep: true
     });
-    provide(FORM_TOKEN, reactive({
-      formData: data,
-      formMitt,
-      labelData: {
-        layout,
-        labelSize,
-        labelAlign
-      },
-      rules: props.rules,
-      messageShowType: "popover",
+    provide(FORM_TOKEN, reactive(__spreadProps(__spreadValues({}, toRefs(props)), {
+      emit: ctx.emit,
       addItemContext,
       removeItemContext
-    }));
+    })));
     ctx.expose({
       validate,
-      validateFields
+      validateFields,
+      resetFields,
+      clearValidate
     });
-    const onSubmit = (e) => {
-      e.preventDefault();
-      ctx.emit("submit", e);
-      EventBus.emit(`formSubmit:${props.name}`);
-    };
     return () => {
       var _a, _b;
       return createVNode("form", {
         "onSubmit": onSubmit,
-        "class": ns.b()
+        "class": ns2.b()
       }, [(_b = (_a = ctx.slots).default) == null ? void 0 : _b.call(_a)]);
     };
   }
 });
+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,
@@ -5650,13 +5664,14 @@ function _isSlot(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": "devui-overlay-fade"
+          "name": ns2.e("fade")
         }, _isSlot(_slot = renderSlot(ctx.slots, "default")) ? _slot : {
           default: () => [_slot]
         })]
@@ -5699,15 +5714,12 @@ const fixedOverlayProps = __spreadProps(__spreadValues({}, overlayProps), {
 });
 const overlayEmits = ["update:visible", "backdropClick"];
 function useOverlayLogic(props, ctx) {
+  const ns2 = useNamespace("overlay");
   const backgroundClass = computed(() => {
-    return [
-      "devui-overlay-background",
-      props.backgroundClass,
-      !props.hasBackdrop ? "devui-overlay-background__disabled" : "devui-overlay-background__color"
-    ];
+    return [ns2.e("background"), props.backgroundClass, !props.hasBackdrop ? ns2.em("background", "disabled") : ns2.em("background", "color")];
   });
   const overlayClass = computed(() => {
-    return "devui-overlay";
+    return ns2.b();
   });
   const handleBackdropClick = (event) => {
     var _a;
@@ -5809,8 +5821,8 @@ const flexibleOverlayProps = {
 function getScrollParent(element) {
   const overflowRegex = /(auto|scroll|hidden)/;
   for (let parent = element; parent = parent.parentElement; parent.parentElement !== document.body) {
-    const style2 = window.getComputedStyle(parent);
-    if (overflowRegex.test(style2.overflow + style2.overflowX + style2.overflowY)) {
+    const style = window.getComputedStyle(parent);
+    if (overflowRegex.test(style.overflow + style.overflowX + style.overflowY)) {
       return parent;
     }
   }
@@ -5917,6 +5929,7 @@ const FlexibleOverlay = defineComponent({
     emit,
     expose
   }) {
+    const ns2 = useNamespace("flexible-overlay");
     const {
       arrowRef,
       overlayRef,
@@ -5929,14 +5942,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,
@@ -5977,6 +6046,10 @@ const popoverProps = {
   mouseLeaveDelay: {
     type: Number,
     default: 100
+  },
+  disabled: {
+    type: Boolean,
+    default: false
   }
 };
 const TransformOriginMap = {
@@ -6013,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);
@@ -6025,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();
@@ -6036,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];
   };
@@ -6047,11 +6137,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"
@@ -6075,7 +6166,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"
@@ -6085,14 +6176,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"
@@ -6108,12 +6199,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",
@@ -6129,7 +6220,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)])]);
 }
@@ -6142,9 +6233,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 = "";
@@ -6152,9 +6244,11 @@ var Popover = defineComponent({
   name: "DPopover",
   inheritAttrs: false,
   props: popoverProps,
+  emits: ["show", "hide"],
   setup(props, {
     slots,
-    attrs
+    attrs,
+    emit
   }) {
     const {
       content,
@@ -6169,47 +6263,59 @@ 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,
+          "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() {
@@ -6228,36 +6334,74 @@ function HelpTipsIcon() {
     "fill-rule": "nonzero"
   }, null)])])]);
 }
-const formItemProps = {
-  field: {
-    type: String,
-    default: ""
-  },
-  dHasFeedback: {
-    type: Boolean,
-    default: false
-  },
-  required: {
-    type: Boolean,
-    default: false
-  },
-  rules: {
-    type: [Object, Array]
-  }
-};
-const FORM_ITEM_TOKEN = Symbol("dFormItem");
+function 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 { labelData } = 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")}`]: labelData.layout === "vertical",
-    [`${ns.em("label", labelData.labelSize)}`]: labelData.layout === "horizontal",
-    [`${ns.em("label", labelData.labelAlign)}`]: labelData.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.em("label", "required")}`]: formItemContext.required
+    [`${ns2.e("label-span")}`]: true,
+    [`${ns2.em("label", "required")}`]: formItemContext.isRequired
   }));
   return { labelClasses, labelInnerClasses };
 }
@@ -6266,7 +6410,7 @@ var FormLabel = defineComponent({
   name: "DFormLabel",
   props: formLabelProps,
   setup(props, ctx) {
-    const ns = useNamespace("form");
+    const ns2 = useNamespace("form");
     const {
       labelClasses,
       labelInnerClasses
@@ -6283,13 +6427,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++) {
@@ -7292,15 +7519,16 @@ Schema.register = function register(type4, validator) {
 Schema.warning = warning;
 Schema.messages = messages;
 Schema.validators = validators;
-function useFormItem() {
-  const formContext = reactive(inject(FORM_TOKEN));
-  const labelData = reactive(formContext.labelData);
-  const ns = useNamespace("form");
+function useFormItem(messageType, _rules, validateState) {
+  const formContext = inject(FORM_TOKEN);
+  const ns2 = useNamespace("form");
   const itemClasses = computed(() => ({
-    [`${ns.em("item", "horizontal")}`]: labelData.layout === "horizontal",
-    [`${ns.em("item", "vertical")}`]: labelData.layout === "vertical"
+    [`${ns2.em("item", "horizontal")}`]: formContext.layout === "horizontal",
+    [`${ns2.em("item", "vertical")}`]: formContext.layout === "vertical",
+    [`${ns2.em("item", "error")}`]: messageType.value === "text" && validateState.value === "error"
   }));
-  return { itemClasses };
+  const isRequired = computed(() => _rules.value.some((rule) => Boolean(rule.required)));
+  return { itemClasses, isRequired };
 }
 function useFormItemRule(props) {
   const formContext = inject(FORM_TOKEN);
@@ -7324,15 +7552,22 @@ function useFormItemValidate(props, _rules) {
   const formContext = inject(FORM_TOKEN);
   const validateState = ref("");
   const validateMessage = ref("");
+  let initFieldValue = void 0;
+  let isResetting = false;
   const computedField = computed(() => {
     return typeof props.field === "string" ? props.field : "";
   });
-  const fieldValue = computed(() => {
-    const formData = formContext.formData;
-    if (!formData || !props.field) {
-      return;
+  const fieldValue = computed({
+    get: () => {
+      const formData = formContext.data;
+      if (!formData || !props.field) {
+        return;
+      }
+      return formData[props.field];
+    },
+    set: (val) => {
+      formContext.data[props.field] = val;
     }
-    return formData[props.field];
   });
   const getRuleByTrigger = (triggerVal) => {
     return _rules.value.filter((rule) => {
@@ -7352,11 +7587,13 @@ function useFormItemValidate(props, _rules) {
   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;
@@ -7372,6 +7609,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);
@@ -7387,7 +7628,23 @@ 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;
+    }
+    isResetting = true;
+    fieldValue.value = initFieldValue;
+    await nextTick();
+    clearValidate();
+  };
+  onMounted(() => {
+    initFieldValue = lodash.exports.cloneDeep(formContext.data[props.field]);
+  });
+  return { validateState, validateMessage, validate, resetField, clearValidate };
 }
 var formItem = "";
 var FormItem = defineComponent({
@@ -7395,23 +7652,60 @@ var FormItem = defineComponent({
   props: formItemProps,
   setup(props, ctx) {
     const formContext = inject(FORM_TOKEN);
+    const _a = toRefs(props), {
+      messageType: itemMessageType,
+      popPosition: itemPopPosition,
+      showFeedback: itemShowFeedback
+    } = _a, otherProps = __objRest(_a, [
+      "messageType",
+      "popPosition",
+      "showFeedback"
+    ]);
     const {
-      itemClasses
-    } = useFormItem();
+      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 {
       _rules
     } = useFormItemRule(props);
     const {
       validateState,
       validateMessage,
-      validate
+      validate,
+      resetField,
+      clearValidate
     } = useFormItemValidate(props, _rules);
-    const context = reactive(__spreadProps(__spreadValues({}, toRefs(props)), {
+    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);
@@ -7420,94 +7714,35 @@ var FormItem = defineComponent({
     onBeforeUnmount(() => {
       formContext == null ? void 0 : formContext.removeItemContext(context);
     });
-    return () => {
-      var _a, _b;
-      return createVNode("div", {
-        "class": itemClasses.value
-      }, [(_b = (_a = ctx.slots).default) == null ? void 0 : _b.call(_a)]);
-    };
-  }
-});
-const formControlProps = {
-  feedbackStatus: {
-    type: String
-  },
-  extraInfo: {
-    type: String,
-    default: ""
-  }
-};
-function useFormControl(props) {
-  const formContext = inject(FORM_TOKEN);
-  const labelData = reactive(formContext.labelData);
-  const ns = useNamespace("form");
-  const { feedbackStatus } = toRefs(props);
-  const controlClasses = computed(() => ({
-    [`${ns.e("control")}`]: true,
-    [`${ns.em("control", "horizontal")}`]: labelData.layout === "horizontal"
-  }));
-  const controlContainerClasses = computed(() => ({
-    [`${ns.e("control-container")}`]: true,
-    [`${ns.em("control-container", "horizontal")}`]: labelData.layout === "horizontal",
-    [`${ns.em("control-container", "has-feedback")}`]: Boolean(feedbackStatus.value),
-    [`${ns.em("control-container", "feedback-error")}`]: Boolean(feedbackStatus.value === "error")
-  }));
-  return { controlClasses, controlContainerClasses };
-}
-function useFormControlValidate() {
-  const formItemContext = inject(FORM_ITEM_TOKEN);
-  const errorMessage = computed(() => formItemContext.validateMessage);
-  return { errorMessage };
-}
-var formControl = "";
-var FormControl = defineComponent({
-  name: "DFormControl",
-  props: formControlProps,
-  setup(props, ctx) {
-    const formControl2 = ref();
-    const uid = lodash.exports.uniqueId("dfc-");
-    const ns = useNamespace("form");
-    const {
-      controlClasses,
-      controlContainerClasses
-    } = useFormControl(props);
-    const {
-      errorMessage
-    } = useFormControlValidate();
-    return () => {
-      var _a, _b;
-      return createVNode("div", {
-        "class": controlClasses.value,
-        "ref": formControl2,
-        "data-uid": uid
-      }, [createVNode("div", {
-        "class": controlContainerClasses.value
-      }, [createVNode("div", {
-        "class": ns.e("control-content"),
-        "id": uid
-      }, [(_b = (_a = ctx.slots).default) == null ? void 0 : _b.call(_a)])]), createVNode("div", {
-        "class": ns.e("control-info")
-      }, [errorMessage.value && createVNode("div", {
-        "class": "error-message"
-      }, [errorMessage.value]), props.extraInfo && createVNode("div", {
-        "class": ns.e("control-extra")
-      }, [props.extraInfo])])]);
-    };
+    return () => createVNode("div", {
+      "class": itemClasses.value
+    }, [createVNode(FormLabel, {
+      "help-tips": helpTips.value
+    }, {
+      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)];
+      }
+    })]);
   }
 });
 var formOperation = "";
 var FormOperation = defineComponent({
   name: "DFormOperation",
   setup(props, ctx) {
-    const formContext = reactive(inject(FORM_TOKEN));
-    const labelData = reactive(formContext.labelData);
+    const formContext = inject(FORM_TOKEN);
     const LabelSizeMap = {
       sm: 80,
       md: 100,
       lg: 150
     };
     const styles = computed(() => ({
-      marginLeft: labelData.layout === "horizontal" ? `${LabelSizeMap[labelData.labelSize] + 16}px` : void 0
+      marginLeft: formContext.layout === "horizontal" ? `${LabelSizeMap[formContext.labelSize] + 16}px` : void 0
     }));
     return () => {
       var _a, _b;
@@ -7518,364 +7753,14 @@ var FormOperation = defineComponent({
     };
   }
 });
-var style = "";
-function getAvaliableRuleObj(ruleName, value) {
-  if (!ruleName) {
-    console.error("[v-d-validate] validator's key is invalid");
-    return null;
-  }
-  switch (ruleName) {
-    case "maxlength":
-      return {
-        type: "string",
-        max: value,
-        asyncValidator: (rule, val) => {
-          return new Promise((resolve, reject) => {
-            if (val.length > value) {
-              reject("\u6700\u5927\u957F\u5EA6\u4E3A" + value);
-            } else {
-              resolve("\u6821\u9A8C\u901A\u8FC7");
-            }
-          });
-        }
-      };
-    case "minlength":
-      return {
-        type: "string",
-        min: value,
-        asyncValidator: (rule, val) => {
-          return new Promise((resolve, reject) => {
-            if (val.length < value) {
-              reject("\u6700\u5C0F\u957F\u5EA6\u4E3A" + value);
-            } else {
-              resolve("\u6821\u9A8C\u901A\u8FC7");
-            }
-          });
-        }
-      };
-    case "min":
-      return {
-        type: "number",
-        asyncValidator: (rule, val) => {
-          return new Promise((resolve, reject) => {
-            if (val < value) {
-              reject("\u6700\u5C0F\u503C\u4E3A" + value);
-            } else {
-              resolve("\u6821\u9A8C\u901A\u8FC7");
-            }
-          });
-        }
-      };
-    case "max":
-      return {
-        type: "number",
-        asyncValidator: (rule, val) => {
-          return new Promise((resolve, reject) => {
-            if (val > value) {
-              reject("\u6700\u5927\u503C\u4E3A" + value);
-            } else {
-              resolve("\u6821\u9A8C\u901A\u8FC7");
-            }
-          });
-        }
-      };
-    case "required":
-      return {
-        reqiured: true,
-        asyncValidator: (rule, val) => {
-          return new Promise((resolve, reject) => {
-            if (!val) {
-              reject("\u5FC5\u586B\u9879");
-            } else {
-              resolve("\u6821\u9A8C\u901A\u8FC7");
-            }
-          });
-        }
-      };
-    case "requiredTrue":
-      return {
-        asyncValidator: (rule, val) => {
-          return new Promise((resolve, reject) => {
-            if (!val) {
-              reject("\u5FC5\u987B\u4E3Atrue\u503C");
-            } else {
-              resolve("\u6821\u9A8C\u901A\u8FC7");
-            }
-          });
-        }
-      };
-    case "email":
-      return {
-        type: "email",
-        message: "\u90AE\u7BB1\u683C\u5F0F\u4E0D\u6B63\u786E"
-      };
-    case "pattern":
-      return {
-        type: "regexp",
-        pattern: value,
-        message: "\u53EA\u80FD\u5305\u542B\u6570\u5B57\u4E0E\u5927\u5C0F\u5199\u5B57\u7B26",
-        validator: (rule, val) => value.test(val)
-      };
-    case "whitespace":
-      return {
-        message: "\u8F93\u5165\u4E0D\u80FD\u5168\u90E8\u4E3A\u7A7A\u683C\u6216\u7A7A\u5B57\u7B26",
-        validator: (rule, val) => !!val.trim()
-      };
-    default:
-      return {
-        [ruleName]: value
-      };
-  }
-}
-function getKeyValueOfObjectList(obj) {
-  const kvArr = [];
-  for (const key in obj) {
-    if (Object.prototype.hasOwnProperty.call(obj, key)) {
-      kvArr.push({
-        key,
-        value: obj[key]
-      });
-    }
-  }
-  return kvArr;
-}
-function handleErrorStrategy(el) {
-  const classList = [...el.classList];
-  classList.push("devui-validate-rules-error-pristine");
-  el.setAttribute("class", classList.join(" "));
-}
-function handleErrorStrategyPass(el) {
-  const classList = [...el.classList];
-  const index2 = classList.indexOf("devui-validate-rules-error-pristine");
-  index2 !== -1 && classList.splice(index2, 1);
-  el.setAttribute("class", classList.join(" "));
-}
-function getFormControlUID(el) {
-  if (el.tagName.toLocaleLowerCase() === "body") {
-    return "";
-  }
-  if (el.parentElement.id.startsWith("dfc-")) {
-    return el.parentElement.id;
-  } else {
-    getFormControlUID(el.parentElement);
-  }
-}
-function handleValidateError({
-  el,
-  tipEl,
-  message = "",
-  isFormTag,
-  messageShowType,
-  dfcUID,
-  popPosition = "right-bottom",
-  updateOn
-}) {
-  if (isFormTag && messageShowType === "toast") {
-    alert(message);
-    return;
-  }
-  if (!dfcUID) {
-    dfcUID = getFormControlUID(el);
-  }
-  if (messageShowType === "popover") {
-    EventBus.emit("showPopoverErrorMessage", {
-      showPopover: true,
-      message,
-      uid: dfcUID,
-      popPosition,
-      updateOn
-    });
-    return;
-  }
-  tipEl.innerText = "" + message;
-  tipEl.style.display = "inline-flex";
-  tipEl.setAttribute("class", "devui-validate-tip");
-  handleErrorStrategy(el);
-}
-function handleValidatePass(el, tipEl) {
-  tipEl.style.display = "none";
-  handleErrorStrategyPass(el);
-}
-function getRefName(binding) {
-  const _refs = binding.instance.$refs;
-  const refName = Object.keys(_refs)[0];
-  return refName;
-}
-function getFormName(binding) {
-  const _refs = binding.instance.$refs;
-  const key = Object.keys(_refs)[0];
-  return _refs[key]["name"];
-}
-function validateFn({
-  validator,
-  modelValue,
-  el,
-  tipEl,
-  isFormTag,
-  messageShowType,
-  dfcUID,
-  popPosition,
-  updateOn
-}) {
-  validator.validate({ modelName: modelValue }).then(() => {
-    handleValidatePass(el, tipEl);
-  }).catch((err) => {
-    const { errors } = err;
-    if (!errors || errors.length === 0) {
-      return;
-    }
-    let msg = "";
-    if (typeof errors[0].message === "object") {
-      msg = errors[0].message.default;
-    } else {
-      msg = errors[0].message;
-    }
-    handleValidateError({ el, tipEl, message: msg, isFormTag, messageShowType, dfcUID, popPosition, updateOn });
-  });
-}
-function checkValidPopsition(positionStr) {
-  const validPosition = [
-    "left",
-    "right",
-    "top",
-    "bottom",
-    "left-top",
-    "left-bottom",
-    "top-left",
-    "top-right",
-    "right-top",
-    "right-bottom",
-    "bottom-left",
-    "bottom-right"
-  ];
-  const isValid = validPosition.includes(positionStr);
-  !isValid && console.warn(`invalid popPosition value '${positionStr}'.`);
-  return isValid;
-}
-var dValidateRules = {
-  mounted(el, binding, vnode) {
-    var _a;
-    const isFormTag = el.tagName === "FORM";
-    const dfcUID = el.parentNode.parentNode.parentElement.dataset.uid;
-    const refName = getRefName(binding);
-    const hasOptions = isObject(binding.value) && hasKey(binding.value, "options");
-    let { rules: bindingRules, options = {}, messageShowType = "popover" } = binding.value;
-    let { errorStrategy } = binding.value;
-    if (refName) {
-      messageShowType = (_a = binding.instance[refName]["messageShowType"]) != null ? _a : "popover";
-    }
-    let {
-      updateOn = "change",
-      errorStrategy: ErrorStrategy = "dirty",
-      asyncDebounceTime = 300,
-      popPosition = ["right", "bottom"]
-    } = options;
-    if (messageShowType === "popover") {
-      if (Array.isArray(popPosition)) {
-        popPosition = popPosition.length > 1 ? popPosition.join("-") : popPosition[0];
-        if (!checkValidPopsition(popPosition)) {
-          popPosition = "right-bottom";
-        }
-      } else if (!checkValidPopsition(popPosition)) {
-        popPosition = "right-bottom";
-      }
-    }
-    if (!errorStrategy) {
-      errorStrategy = ErrorStrategy;
-    }
-    let customRule = {};
-    if (hasOptions) {
-      customRule = bindingRules != null ? bindingRules : binding.value;
-    } else {
-      customRule = binding.value;
-    }
-    const isCustomValidator = customRule && isObject(customRule) && (hasKey(customRule, "validators") || hasKey(customRule, "asyncValidators"));
-    const rules2 = Array.isArray(customRule) ? customRule : [customRule];
-    const tipEl = document.createElement("span");
-    if (messageShowType !== "none") {
-      el.parentNode.append(tipEl);
-    }
-    const descriptor = {
-      modelName: []
-    };
-    rules2.forEach((rule) => {
-      const kvObjList = !Array.isArray(rule) && getKeyValueOfObjectList(rule);
-      let ruleObj = {};
-      let avaliableRuleObj = {};
-      kvObjList.forEach((item) => {
-        avaliableRuleObj = getAvaliableRuleObj(item.key, item.value);
-        ruleObj = __spreadValues(__spreadValues({}, ruleObj), avaliableRuleObj);
-      });
-      descriptor.modelName.push(ruleObj);
-    });
-    if (isCustomValidator) {
-      const { validators: validators2, asyncValidators } = customRule;
-      validators2 && validators2.forEach((item) => {
-        const ruleObj = {
-          message: (item == null ? void 0 : item.message) || "",
-          validator: (rule, value) => item.validator(rule, value)
-        };
-        descriptor.modelName.push(ruleObj);
-      });
-      asyncValidators && asyncValidators.forEach((item) => {
-        const ruleObj = {
-          message: (item == null ? void 0 : item.message) || "",
-          asyncValidator: (rule, value) => {
-            return new Promise(lodash.exports.debounce((resolve, reject) => {
-              const res = item.asyncValidator(rule, value);
-              if (res) {
-                resolve("");
-              } else {
-                reject(rule.message);
-              }
-            }, asyncDebounceTime));
-          }
-        };
-        descriptor.modelName.push(ruleObj);
-      });
-    }
-    const validator = new Schema(descriptor);
-    const htmlEventValidateHandler = (e) => {
-      const modelValue = e.target.value;
-      if (messageShowType === "popover") {
-        EventBus.emit("showPopoverErrorMessage", {
-          showPopover: false,
-          message: "",
-          uid: dfcUID,
-          popPosition,
-          updateOn
-        });
-      }
-      validateFn({ validator, modelValue, el, tipEl, isFormTag: false, messageShowType, dfcUID, popPosition, updateOn });
-    };
-    vnode.children[0].el.addEventListener(updateOn, htmlEventValidateHandler);
-    if (messageShowType === "popover" && updateOn === "change") {
-      vnode.children[0].el.addEventListener("focus", () => {
-        EventBus.emit("showPopoverErrorMessage", { showPopover: false, uid: dfcUID, updateOn });
-      });
-    }
-    if (errorStrategy === "pristine") {
-      handleErrorStrategy(el);
-      vnode.children[0].props.value = "" + vnode.children[0].props.value;
-    }
-    const formName = getFormName(binding);
-    formName && EventBus.on(`formSubmit:${formName}`, () => {
-      const modelValue = isFormTag ? "" : vnode.children[0].el.value;
-      validateFn({ validator, modelValue, el, tipEl, isFormTag, messageShowType, updateOn: "submit" });
-    });
-  }
-};
 var index = {
   title: "Form \u8868\u5355",
   category: "\u6570\u636E\u5F55\u5165",
   status: "75%",
   install(app) {
     app.component(Form.name, Form);
-    app.directive("d-validate-rules", dValidateRules);
-    app.component(FormLabel.name, FormLabel);
     app.component(FormItem.name, FormItem);
-    app.component(FormControl.name, FormControl);
     app.component(FormOperation.name, FormOperation);
   }
 };
-export { Form, FormControl, FormItem, FormLabel, FormOperation, index as default };
+export { FORM_ITEM_TOKEN, FORM_TOKEN, Form, FormItem, FormOperation, LABEL_DATA, index as default, formControlProps, formItemProps, formProps };