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

package/dropdown/style.css

@@ -1 +1 @@
-@keyframes d-overlay-fade{0%{opacity:0}to{opacity:1}}.devui-overlay-fade-enter{opacity:0}.devui-overlay-fade-enter-active{animation-name:d-overlay-fade;animation-duration:.3s}.devui-overlay-fade-leave{opacity:1}.devui-overlay-fade-leave-active{animation-name:d-overlay-fade;animation-duration:.3s;animation-direction:reverse}.devui-overlay-background{position:fixed;top:0;left:0;height:100vh;width:100vw;display:flex}.devui-overlay-background__color{background:rgba(0,0,0,.4)}.devui-overlay-background .devui-overlay{position:relative;z-index:1000;pointer-events:auto}.devui-overlay-background__disabled{pointer-events:none}.devui-flexible-overlay{position:fixed;border-radius:var(--devui-border-radius, 2px);background-color:var(--devui-connected-overlay-bg, #ffffff);box-shadow:var(--devui-shadow-connected-overlay, 0 2px 8px 0) var(--devui-shadow, rgba(37, 43, 58, .2));z-index:1000}.devui-flexible-overlay-arrow{position:absolute;width:8px;height:8px;transform:rotate(45deg);background-color:inherit}.devui-dropdown-toggle{display:inline-block}.devui-dropdown span.icon-chevron-down,.devui-dropdown span.icon-select-arrow{display:inline-block;vertical-align:text-top}.devui-dropdown-menu-wrap .devui-dropdown-menu{width:100%}.devui-dropdown-animation span.icon-chevron-down,.devui-dropdown-animation span.icon-select-arrow{transition:transform var(--devui-animation-duration-slow, .3s) var(--devui-animation-ease-in-out-smooth, cubic-bezier(.645, .045, .355, 1))}.devui-dropdown.open span.icon-chevron-down,.devui-dropdown.open span.icon-select-arrow{transform:rotate(180deg)}.fade-in-top{animation:fadeInTop .2s cubic-bezier(.16,.75,.5,1)}.fade-in-bottom{animation:fadeInBottom .2s cubic-bezier(.16,.75,.5,1)}@keyframes fadeInTop{0%{opacity:.8;transform:scaleY(.8) translateY(4px)}to{opacity:1;transform:scaleY(.9999) translateY(0)}}@keyframes fadeInBottom{0%{opacity:.8;transform:scaleY(.8) translateY(-4px)}to{opacity:1;transform:scaleY(.9999) translateY(0)}}.devui-dropdown-fade-bottom-enter-from,.devui-dropdown-fade-bottom-leave-to{opacity:.8;transform:scaleY(.8) translateY(-4px)}.devui-dropdown-fade-bottom-enter-to,.devui-dropdown-fade-bottom-leave-from{opacity:1;transform:scaleY(.9999) translateY(0)}.devui-dropdown-fade-bottom-enter-active{transition:transform .2s cubic-bezier(.16,.75,.5,1),opacity .2s cubic-bezier(.16,.75,.5,1)}.devui-dropdown-fade-bottom-leave-active{transition:transform .2s cubic-bezier(.5,0,.84,.25),opacity .2s cubic-bezier(.5,0,.84,.25)}.devui-dropdown-fade-top-enter-from,.devui-dropdown-fade-top-leave-to{opacity:.8;transform:scaleY(.8) translateY(4px)}.devui-dropdown-fade-top-enter-to,.devui-dropdown-fade-top-leave-from{opacity:1;transform:scaleY(.9999) translateY(0)}.devui-dropdown-fade-top-enter-active{transition:transform .2s cubic-bezier(.16,.75,.5,1),opacity .2s cubic-bezier(.16,.75,.5,1)}.devui-dropdown-fade-top-leave-active{transition:transform .2s cubic-bezier(.5,0,.84,.25),opacity .2s cubic-bezier(.5,0,.84,.25)}
+@keyframes d-overlay-fade{0%{opacity:0}to{opacity:1}}.devui-overlay__fade-enter{opacity:0}.devui-overlay__fade-enter-active{animation-name:d-overlay-fade;animation-duration:.3s}.devui-overlay__fade-leave{opacity:1}.devui-overlay__fade-leave-active{animation-name:d-overlay-fade;animation-duration:.3s;animation-direction:reverse}.devui-overlay__background{position:fixed;top:0;left:0;height:100vh;width:100vw;display:flex}.devui-overlay__background--color{background:rgba(0,0,0,.4)}.devui-overlay__background .devui-overlay{position:relative;z-index:1000;pointer-events:auto}.devui-overlay__background--disabled{pointer-events:none}.devui-flexible-overlay{position:fixed;border-radius:var(--devui-border-radius, 2px);background-color:var(--devui-connected-overlay-bg, #ffffff);box-shadow:var(--devui-shadow-connected-overlay, 0 2px 8px 0) var(--devui-shadow, rgba(37, 43, 58, .2));z-index:1000}.devui-flexible-overlay__arrow{position:absolute;width:8px;height:8px;transform:rotate(45deg);background-color:inherit}.devui-dropdown__toggle{display:inline-block}.devui-dropdown span.icon-chevron-down,.devui-dropdown span.icon-select-arrow{display:inline-block;vertical-align:text-top}.devui-dropdown__menu-wrap .devui-dropdown-menu{width:100%}.devui-dropdown-animation span.icon-chevron-down,.devui-dropdown-animation span.icon-select-arrow{transition:transform var(--devui-animation-duration-slow, .3s) var(--devui-animation-ease-in-out-smooth, cubic-bezier(.645, .045, .355, 1))}.devui-dropdown.open span.icon-chevron-down,.devui-dropdown.open span.icon-select-arrow{transform:rotate(180deg)}.fade-in-top{animation:fadeInTop .2s cubic-bezier(.16,.75,.5,1)}.fade-in-bottom{animation:fadeInBottom .2s cubic-bezier(.16,.75,.5,1)}@keyframes fadeInTop{0%{opacity:.8;transform:scaleY(.8) translateY(4px)}to{opacity:1;transform:scaleY(.9999) translateY(0)}}@keyframes fadeInBottom{0%{opacity:.8;transform:scaleY(.8) translateY(-4px)}to{opacity:1;transform:scaleY(.9999) translateY(0)}}.devui-dropdown-fade-bottom-enter-from,.devui-dropdown-fade-bottom-leave-to{opacity:.8;transform:scaleY(.8) translateY(-4px)}.devui-dropdown-fade-bottom-enter-to,.devui-dropdown-fade-bottom-leave-from{opacity:1;transform:scaleY(.9999) translateY(0)}.devui-dropdown-fade-bottom-enter-active{transition:transform .2s cubic-bezier(.16,.75,.5,1),opacity .2s cubic-bezier(.16,.75,.5,1)}.devui-dropdown-fade-bottom-leave-active{transition:transform .2s cubic-bezier(.5,0,.84,.25),opacity .2s cubic-bezier(.5,0,.84,.25)}.devui-dropdown-fade-top-enter-from,.devui-dropdown-fade-top-leave-to{opacity:.8;transform:scaleY(.8) translateY(4px)}.devui-dropdown-fade-top-enter-to,.devui-dropdown-fade-top-leave-from{opacity:1;transform:scaleY(.9999) translateY(0)}.devui-dropdown-fade-top-enter-active{transition:transform .2s cubic-bezier(.16,.75,.5,1),opacity .2s cubic-bezier(.16,.75,.5,1)}.devui-dropdown-fade-top-leave-active{transition:transform .2s cubic-bezier(.5,0,.84,.25),opacity .2s cubic-bezier(.5,0,.84,.25)}

package/form/index.es.js

@@ -29,7 +29,7 @@ var __objRest = (source, exclude) => {
     }
   return target;
 };
-import { defineComponent, provide, reactive, toRefs, createVNode, Teleport, Transition, renderSlot, isVNode, computed, onMounted, watch, onUnmounted, ref, unref, nextTick, mergeProps, Fragment, inject, onBeforeUnmount } from "vue";
+import { defineComponent, watch, provide, reactive, toRefs, createVNode, Teleport, Transition, renderSlot, isVNode, computed, onMounted, onUnmounted, ref, unref, nextTick, mergeProps, Fragment, inject, onBeforeUnmount } from "vue";
 import { offset, autoPlacement, arrow, shift, computePosition } from "@floating-ui/dom";
 const formProps = {
   data: {
@@ -58,6 +58,14 @@ const formProps = {
   popPosition: {
     type: Array,
     default: ["right", "bottom"]
+  },
+  validateOnRuleChange: {
+    type: Boolean,
+    default: false
+  },
+  showFeedback: {
+    type: Boolean,
+    default: false
   }
 };
 const FORM_TOKEN = Symbol("dForm");
@@ -5550,13 +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: ["validate"],
   setup(props, ctx) {
-    const ns = useNamespace("form");
+    const ns2 = useNamespace("form");
     const {
       itemContexts,
       addItemContext,
@@ -5564,24 +5579,36 @@ var Form = defineComponent({
     } = useFieldCollection();
     const {
       validate,
-      validateFields
+      validateFields,
+      resetFields,
+      clearValidate
     } = useFormValidation(itemContexts);
     const onSubmit = (e) => {
       e.preventDefault();
     };
+    watch(() => props.rules, () => {
+      if (props.validateOnRuleChange) {
+        validate();
+      }
+    }, {
+      deep: true
+    });
     provide(FORM_TOKEN, reactive(__spreadProps(__spreadValues({}, toRefs(props)), {
+      emit: ctx.emit,
       addItemContext,
       removeItemContext
     })));
     ctx.expose({
       validate,
-      validateFields
+      validateFields,
+      resetFields,
+      clearValidate
     });
     return () => {
       var _a, _b;
       return createVNode("form", {
         "onSubmit": onSubmit,
-        "class": ns.b()
+        "class": ns2.b()
       }, [(_b = (_a = ctx.slots).default) == null ? void 0 : _b.call(_a)]);
     };
   }
@@ -5598,13 +5625,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]
         })]
@@ -5647,15 +5675,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;
@@ -5865,6 +5890,7 @@ const FlexibleOverlay = defineComponent({
     emit,
     expose
   }) {
+    const ns2 = useNamespace("flexible-overlay");
     const {
       arrowRef,
       overlayRef,
@@ -5877,10 +5903,10 @@ 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)]);
     };
   }
@@ -5995,11 +6021,12 @@ function usePopoverEvent(props, visible, origin) {
       origin.value.addEventListener("mouseleave", onMouseleave);
     }
   });
-  return { placement, handlePositionChange };
+  return { placement, handlePositionChange, onMouseenter, onMouseleave };
 }
-function SuccessIcon() {
+const ns = useNamespace("popover");
+function SuccessIcon$1() {
   return createVNode("svg", {
-    "class": "devui-icon devui-icon-success",
+    "class": [ns.e("icon"), ns.em("icon", "success")],
     "viewBox": "0 0 16 16",
     "version": "1.1",
     "xmlns": "http://www.w3.org/2000/svg"
@@ -6023,7 +6050,7 @@ function SuccessIcon() {
 }
 function WarningIcon() {
   return createVNode("svg", {
-    "class": "devui-icon devui-icon-warning",
+    "class": [ns.e("icon"), ns.em("icon", "warning")],
     "viewBox": "0 0 16 16",
     "version": "1.1",
     "xmlns": "http://www.w3.org/2000/svg"
@@ -6033,14 +6060,14 @@ function WarningIcon() {
     "fill": "none",
     "fill-rule": "evenodd"
   }, [createVNode("polygon", {
-    "points": "7.5 1.74501946 1.39184847 13.5954649 7.08947368 14.2207621 13.9973698 13.5954649 10.9383683 5.61273879 8.40084114 1.27624313"
+    "points": "7.5 1.74501946 1.39184847 13.5954649 7.08947368         14.2207621 13.9973698 13.5954649 10.9383683 5.61273879 8.40084114 1.27624313"
   }, null), createVNode("path", {
-    "d": "M8.51325441,0.127397589 C8.70423071,0.228333932 8.8605922,0.383286648 8.96244623,0.57254229 L15.8714442,13.4101975 C16.1549662,13.9370117 15.9538562,14.5918482 15.4222523,14.8728158 C15.2642579,14.9563203 15.0879506,15 14.9088903,15 L1.09089441,15 C0.488410063,15 0,14.5159904 0,13.9189343 C0,13.7414873 0.0440768395,13.5667684 0.128340519,13.4101975 L7.03733844,0.57254229 C7.32086049,0.0457280838 7.98165058,-0.153569987 8.51325441,0.127397589 Z M8.87894737,11.2105263 L7.08947368,11.2105263 L7.08947368,13 L8.87894737,13 L8.87894737,11.2105263 Z M8.96842105,4.5 L7,4.5 L7.08947368,9.86842105 L8.87894737,9.86842105 L8.96842105,4.5 Z"
+    "d": "M8.51325441,0.127397589 C8.70423071,0.228333932         8.8605922,0.383286648 8.96244623,0.57254229 L15.8714442,13.4101975         C16.1549662,13.9370117 15.9538562,14.5918482 15.4222523,14.8728158         C15.2642579,14.9563203 15.0879506,15 14.9088903,15 L1.09089441,15         C0.488410063,15 0,14.5159904 0,13.9189343 C0,13.7414873 0.0440768395,13.5667684         0.128340519,13.4101975 L7.03733844,0.57254229 C7.32086049,0.0457280838 7.98165058,-0.153569987         8.51325441,0.127397589 Z M8.87894737,11.2105263 L7.08947368,11.2105263 L7.08947368,13         L8.87894737,13 L8.87894737,11.2105263 Z M8.96842105,4.5 L7,4.5 L7.08947368,9.86842105         L8.87894737,9.86842105 L8.96842105,4.5 Z"
   }, null)])]);
 }
 function InfoIcon() {
   return createVNode("svg", {
-    "class": "devui-icon devui-icon-info",
+    "class": [ns.e("icon"), ns.em("icon", "info")],
     "viewBox": "0 0 16 16",
     "version": "1.1",
     "xmlns": "http://www.w3.org/2000/svg"
@@ -6056,12 +6083,12 @@ function InfoIcon() {
   }, null), createVNode("g", {
     "stroke-width": "1"
   }, [createVNode("path", {
-    "d": "M8,0 C3.6,0 0,3.6 0,8 C0,12.4 3.6,16 8,16 C12.4,16 16,12.4 16,8 C16,3.6 12.4,0 8,0 Z M9,5 L7,5 L7,3 L9,3 L9,5 Z M9,12.6 L7,12.6 L7,6.6 L9,6.6 L9,12.6 Z"
+    "d": "M8,0 C3.6,0 0,3.6 0,8 C0,12.4 3.6,16 8,16           C12.4,16 16,12.4 16,8 C16,3.6 12.4,0 8,0 Z M9,5 L7,5 L7,3 L9,3 L9,5 Z M9,12.6 L7,12.6 L7,6.6 L9,6.6 L9,12.6 Z"
   }, null)])])]);
 }
-function ErrorIcon() {
+function ErrorIcon$1() {
   return createVNode("svg", {
-    "class": "devui-icon devui-icon-error",
+    "class": [ns.e("icon"), ns.em("icon", "error")],
     "width": "16px",
     "height": "16px",
     "viewBox": "0 0 16 16",
@@ -6077,7 +6104,7 @@ function ErrorIcon() {
     "cy": "8",
     "r": "7"
   }, null), createVNode("path", {
-    "d": "M8,0 C3.6,0 0,3.6 0,8 C0,12.4 3.6,16 8,16 C12.4,16 16,12.4 16,8 C16,3.6 12.4,0 8,0 Z M9,12.6 L7,12.6 L7,10.6 L9,10.6 L9,12.6 Z M9,9.1 L7,9.1 L6.9,3.1 L9.1,3.1 L9,9.1 Z",
+    "d": "M8,0 C3.6,0 0,3.6 0,8 C0,12.4 3.6,16 8,16 C12.4,16 16,12.4 16,8           C16,3.6 12.4,0 8,0 Z M9,12.6 L7,12.6 L7,10.6 L9,10.6 L9,12.6 Z M9,9.1 L7,9.1 L6.9,3.1 L9.1,3.1 L9,9.1 Z",
     "fill-rule": "nonzero"
   }, null)])]);
 }
@@ -6090,9 +6117,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 = "";
@@ -6117,21 +6145,24 @@ 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);
+    const ns2 = useNamespace("popover");
     return () => {
       var _a;
       return createVNode(Fragment, null, [createVNode("div", {
         "ref": origin,
-        "class": "devui-popover-reference"
+        "class": ns2.e("reference")
       }, [(_a = slots.reference) == null ? void 0 : _a.call(slots)]), createVNode(Teleport, {
         "to": "body"
       }, {
         default: () => [createVNode(Transition, {
-          "name": showAnimation.value ? `devui-popover-fade-${placement.value}` : ""
+          "name": showAnimation.value ? ns2.m(`fade-${placement.value}`) : ""
         }, {
           default: () => [createVNode(FlexibleOverlay, mergeProps({
             "modelValue": visible.value,
@@ -6141,12 +6172,14 @@ var Popover = defineComponent({
             "position": position.value,
             "align": align.value,
             "offset": offset2.value,
-            "class": ["devui-popover-content", popType.value !== "default" ? "is-icon" : ""],
+            "class": [ns2.e("content"), popType.value !== "default" ? "is-icon" : ""],
             "show-arrow": true,
             "is-arrow-center": false,
             "style": overlayStyles.value
           }, attrs, {
-            "onPositionChange": handlePositionChange
+            "onPositionChange": handlePositionChange,
+            "onMouseenter": onMouseenter,
+            "onMouseleave": onMouseleave
           }), {
             default: () => {
               var _a2;
@@ -6176,15 +6209,66 @@ function HelpTipsIcon() {
     "fill-rule": "nonzero"
   }, null)])])]);
 }
+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)])]);
+}
 const formItemProps = {
   field: {
     type: String,
     default: ""
   },
-  dHasFeedback: {
-    type: Boolean,
-    default: false
-  },
   required: {
     type: Boolean,
     default: false
@@ -6197,22 +6281,26 @@ const formItemProps = {
   },
   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 ns = useNamespace("form");
+  const ns2 = useNamespace("form");
   const labelClasses = computed(() => ({
-    [`${ns.e("label")}`]: true,
-    [`${ns.em("label", "vertical")}`]: formContext.layout === "vertical",
-    [`${ns.em("label", formContext.labelSize)}`]: formContext.layout === "horizontal",
-    [`${ns.em("label", formContext.labelAlign)}`]: formContext.layout === "horizontal"
+    [`${ns2.e("label")}`]: true,
+    [`${ns2.em("label", "vertical")}`]: formContext.layout === "vertical",
+    [`${ns2.em("label", formContext.labelSize)}`]: formContext.layout === "horizontal",
+    [`${ns2.em("label", formContext.labelAlign)}`]: formContext.layout === "horizontal"
   }));
   const labelInnerClasses = computed(() => ({
-    [`${ns.e("label-span")}`]: true,
-    [`${ns.em("label", "required")}`]: formItemContext.isRequired
+    [`${ns2.e("label-span")}`]: true,
+    [`${ns2.em("label", "required")}`]: formItemContext.isRequired
   }));
   return { labelClasses, labelInnerClasses };
 }
@@ -6221,7 +6309,7 @@ var FormLabel = defineComponent({
   name: "DFormLabel",
   props: formLabelProps,
   setup(props, ctx) {
-    const ns = useNamespace("form");
+    const ns2 = useNamespace("form");
     const {
       labelClasses,
       labelInnerClasses
@@ -6239,7 +6327,7 @@ var FormLabel = defineComponent({
         "pop-type": "info"
       }, {
         reference: () => createVNode(HelpTipsIcon, {
-          "class": ns.e("label-help")
+          "class": ns2.e("label-help")
         }, null)
       })]);
     };
@@ -7249,11 +7337,11 @@ Schema.messages = messages;
 Schema.validators = validators;
 function useFormItem(messageType, _rules, validateState) {
   const formContext = inject(FORM_TOKEN);
-  const ns = useNamespace("form");
+  const ns2 = useNamespace("form");
   const itemClasses = computed(() => ({
-    [`${ns.em("item", "horizontal")}`]: formContext.layout === "horizontal",
-    [`${ns.em("item", "vertical")}`]: formContext.layout === "vertical",
-    [`${ns.em("item", "error")}`]: messageType.value === "text" && validateState.value === "error"
+    [`${ns2.em("item", "horizontal")}`]: formContext.layout === "horizontal",
+    [`${ns2.em("item", "vertical")}`]: formContext.layout === "vertical",
+    [`${ns2.em("item", "error")}`]: messageType.value === "text" && validateState.value === "error"
   }));
   const isRequired = computed(() => _rules.value.some((rule) => Boolean(rule.required)));
   return { itemClasses, isRequired };
@@ -7280,15 +7368,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.data;
-    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) => {
@@ -7308,11 +7403,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;
@@ -7328,6 +7425,10 @@ function useFormItemValidate(props, _rules) {
     });
   };
   const validate = async (trigger, callback) => {
+    if (isResetting) {
+      isResetting = false;
+      return false;
+    }
     const rules2 = getRuleByTrigger(trigger);
     if (!rules2.length) {
       callback == null ? void 0 : callback(true);
@@ -7343,7 +7444,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({
@@ -7353,11 +7470,14 @@ var FormItem = defineComponent({
     const formContext = inject(FORM_TOKEN);
     const _a = toRefs(props), {
       messageType: itemMessageType,
-      popPosition: itemPopPosition
+      popPosition: itemPopPosition,
+      showFeedback: itemShowFeedback
     } = _a, otherProps = __objRest(_a, [
       "messageType",
-      "popPosition"
+      "popPosition",
+      "showFeedback"
     ]);
+    const showFeedback = computed(() => (itemShowFeedback == null ? void 0 : itemShowFeedback.value) !== void 0 ? itemShowFeedback.value : formContext.showFeedback);
     const messageType = computed(() => (itemMessageType == null ? void 0 : itemMessageType.value) || formContext.messageType);
     const popPosition = computed(() => (itemPopPosition == null ? void 0 : itemPopPosition.value) || formContext.popPosition);
     const {
@@ -7366,21 +7486,30 @@ var FormItem = defineComponent({
     const {
       validateState,
       validateMessage,
-      validate
+      validate,
+      resetField,
+      clearValidate
     } = useFormItemValidate(props, _rules);
     const {
       itemClasses,
       isRequired
     } = useFormItem(messageType, _rules, validateState);
     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);
@@ -7408,27 +7537,29 @@ const formControlProps = {
 };
 function useFormControl(props) {
   const formContext = inject(FORM_TOKEN);
-  const ns = useNamespace("form");
+  const ns2 = useNamespace("form");
   const { feedbackStatus } = toRefs(props);
   const controlClasses = computed(() => ({
-    [`${ns.e("control")}`]: true,
-    [`${ns.em("control", "horizontal")}`]: formContext.layout === "horizontal"
+    [ns2.e("control")]: true,
+    [ns2.em("control", "horizontal")]: formContext.layout === "horizontal"
   }));
   const controlContainerClasses = computed(() => ({
-    [`${ns.e("control-container")}`]: true,
-    [`${ns.em("control-container", "horizontal")}`]: formContext.layout === "horizontal",
-    [`${ns.em("control-container", "has-feedback")}`]: Boolean(feedbackStatus.value),
-    [`${ns.em("control-container", "feedback-error")}`]: Boolean(feedbackStatus.value === "error")
+    [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 { showPopover, showMessage, errorMessage, popPosition };
+  return { feedbackStatus, showFeedback, showPopover, showMessage, errorMessage, popPosition };
 }
 var formControl = "";
 var FormControl = defineComponent({
@@ -7436,12 +7567,14 @@ var FormControl = defineComponent({
   props: formControlProps,
   setup(props, ctx) {
     const formControl2 = ref();
-    const ns = useNamespace("form");
+    const ns2 = useNamespace("form");
     const {
       controlClasses,
       controlContainerClasses
     } = useFormControl(props);
     const {
+      feedbackStatus,
+      showFeedback,
       showPopover,
       showMessage,
       errorMessage,
@@ -7462,15 +7595,17 @@ var FormControl = defineComponent({
       reference: () => {
         var _a, _b;
         return createVNode("div", {
-          "class": ns.e("control-content")
+          "class": ns2.e("control-content")
         }, [(_b = (_a = ctx.slots).default) == null ? void 0 : _b.call(_a)]);
       }
-    })]), createVNode("div", {
-      "class": ns.e("control-info")
+    }), 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": ns.e("control-extra")
+      "class": ns2.e("control-extra")
     }, [props.extraInfo])])]);
   }
 });