vue-devui 1.0.0-beta.12 → 1.0.0-beta.16

package/drawer/index.es.js

@@ -14,7 +14,11 @@ var __spreadValues = (a, b) => {
     }
   return a;
 };
-import { defineComponent, ref, inject, computed, createVNode, createTextVNode, toRefs, watch, provide, onUnmounted, Teleport } from "vue";
+var __publicField = (obj, key, value) => {
+  __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+  return value;
+};
+import { defineComponent, ref, inject, computed, createVNode, createTextVNode, toRefs, watch, provide, onUnmounted, Teleport, createApp } from "vue";
 const drawerProps = {
   width: {
     type: String,
@@ -44,8 +48,18 @@ const drawerProps = {
     type: Boolean,
     default: true
   },
+  destroyOnHide: {
+    type: Boolean,
+    default: false
+  },
   beforeHidden: {
     type: [Promise, Function]
+  },
+  content: {
+    type: [Object, Function]
+  },
+  header: {
+    type: [Object, Function]
   }
 };
 var drawerHeader = "";
@@ -55,6 +69,7 @@ var DrawerHeader = defineComponent({
   setup(props, ctx) {
     const isFullScreen = ref(false);
     const visible = inject("visible");
+    const destroyOnHide = inject("destroyOnHide");
     const fullScreenClassName = computed(() => isFullScreen.value ? "icon icon-minimize" : "icon icon-maxmize");
     const handleFullScreen = (e) => {
       e.stopPropagation();
@@ -68,7 +83,8 @@ var DrawerHeader = defineComponent({
       fullScreenClassName,
       visible,
       handleFullScreen,
-      handleDrawerClose
+      handleDrawerClose,
+      destroyOnHide
     };
   },
   render() {
@@ -76,12 +92,18 @@ var DrawerHeader = defineComponent({
       handleFullScreen,
       handleDrawerClose,
       visible,
-      fullScreenClassName
+      fullScreenClassName,
+      destroyOnHide
     } = this;
-    if (!visible)
+    if (destroyOnHide.value && !visible) {
       return null;
+    }
+    const visibleVal = visible ? "visible" : "hidden";
     return createVNode("div", {
-      "class": "devui-drawer-header"
+      "class": "devui-drawer-header",
+      "style": {
+        visibility: visibleVal
+      }
     }, [createVNode("div", {
       "class": "devui-drawer-header-item"
     }, [createVNode("span", {
@@ -103,17 +125,26 @@ var DrawerContainer = defineComponent({
   name: "DrawerContainer",
   setup() {
     const visible = inject("visible");
+    const destroyOnHide = inject("destroyOnHide");
     return {
-      visible
+      visible,
+      destroyOnHide
     };
   },
   render() {
     const {
-      visible
+      visible,
+      destroyOnHide
     } = this;
-    if (!visible)
+    if (destroyOnHide.value && !visible) {
       return null;
-    return createVNode("div", null, [createTextVNode("\u5185\u5BB9\u533A\u57DF")]);
+    }
+    const visibleVal = this.visible ? "visible" : "hidden";
+    return createVNode("div", {
+      "style": {
+        visibility: visibleVal
+      }
+    }, [createTextVNode("\u5185\u5BB9\u533A\u57DF")]);
   }
 });
 var drawerBody = "";
@@ -130,6 +161,7 @@ var DrawerBody = defineComponent({
     const width = inject("width");
     const visible = inject("visible");
     const backdropCloseable = inject("backdropCloseable");
+    const destroyOnHide = inject("destroyOnHide");
     const navRight = computed(() => position.value === "right" ? {
       "right": 0
     } : {
@@ -152,7 +184,8 @@ var DrawerBody = defineComponent({
       navWidth,
       visible,
       clickContent,
-      handleDrawerClose
+      handleDrawerClose,
+      destroyOnHide
     };
   },
   render() {
@@ -163,14 +196,18 @@ var DrawerBody = defineComponent({
       navRight,
       navWidth,
       visible,
-      handleDrawerClose
+      handleDrawerClose,
+      destroyOnHide
     } = this;
-    if (!visible)
+    if (destroyOnHide.value && !visible) {
       return null;
+    }
+    const visibleVal = visible ? "visible" : "hidden";
     return createVNode("div", {
       "class": "devui-drawer",
       "style": {
-        zIndex: zindex
+        zIndex: zindex,
+        visibility: visibleVal
       },
       "onClick": handleDrawerClose
     }, [isCover ? createVNode("div", {
@@ -188,7 +225,7 @@ var DrawerBody = defineComponent({
     }, [slots.default ? slots.default() : null])])])]);
   }
 });
-var Drawer = defineComponent({
+var Drawer$1 = defineComponent({
   name: "DDrawer",
   props: drawerProps,
   emits: ["close", "update:visible", "afterOpened"],
@@ -203,10 +240,11 @@ var Drawer = defineComponent({
       isCover,
       escKeyCloseable,
       position,
-      backdropCloseable
+      backdropCloseable,
+      destroyOnHide
     } = toRefs(props);
     const isFullScreen = ref(false);
-    const fullScreenEvent = () => {
+    const fullscreen = () => {
       isFullScreen.value = !isFullScreen.value;
     };
     const closeDrawer = async () => {
@@ -229,7 +267,9 @@ var Drawer = defineComponent({
     watch(visible, (val) => {
       if (val) {
         emit("afterOpened");
-        isFullScreen.value = false;
+        if (destroyOnHide.value) {
+          isFullScreen.value = false;
+        }
       }
       if (escKeyCloseable && val) {
         document.addEventListener("keyup", escCloseDrawer);
@@ -245,6 +285,7 @@ var Drawer = defineComponent({
     provide("visible", visible);
     provide("isFullScreen", isFullScreen);
     provide("backdropCloseable", backdropCloseable);
+    provide("destroyOnHide", destroyOnHide);
     onUnmounted(() => {
       document.removeEventListener("keyup", escCloseDrawer);
     });
@@ -252,36 +293,107 @@ var Drawer = defineComponent({
       isFullScreen,
       visible,
       slots,
-      fullScreenEvent,
+      fullscreen,
       closeDrawer
     };
   },
   render() {
-    const fullScreenEvent = this.fullScreenEvent;
-    const closeDrawer = this.closeDrawer;
-    if (!this.visible)
+    const {
+      fullscreen,
+      closeDrawer,
+      visible,
+      destroyOnHide
+    } = this;
+    if (destroyOnHide.value && !visible) {
       return null;
+    }
+    const visibleVal = visible ? "visible" : "hidden";
     return createVNode(Teleport, {
       "to": "body"
     }, {
-      default: () => [createVNode(DrawerBody, null, {
-        default: () => [this.slots.header ? this.slots.header() : createVNode(DrawerHeader, {
-          "onToggleFullScreen": fullScreenEvent,
+      default: () => [createVNode(DrawerBody, {
+        "style": {
+          visibility: visibleVal
+        }
+      }, {
+        default: () => [this.slots.header ? this.slots.header({
+          fullscreen,
+          closeDrawer
+        }) : createVNode(DrawerHeader, {
+          "onToggleFullScreen": fullscreen,
           "onClose": closeDrawer
-        }, null), this.slots.default ? this.slots.default() : createVNode(DrawerContainer, null, null)]
+        }, null), this.slots.content ? this.slots.content() : createVNode(DrawerContainer, null, null)]
       })]
     });
   }
 });
-Drawer.install = function(app) {
-  app.component(Drawer.name, Drawer);
+function createDrawerApp(props, drawer, el) {
+  if (drawer) {
+    return drawer;
+  }
+  const res = createApp(createVNode(Drawer$1, {
+    "visible": props.visible,
+    "onUpdate:visible": ($event) => props.visible = $event
+  }, {
+    header: props.header,
+    content: props.content
+  }));
+  res.mount(el);
+  return res;
+}
+class DrawerService {
+  static create(props, drawer) {
+    if (!drawer) {
+      drawer = new Drawer(props);
+    }
+    return drawer;
+  }
+}
+class Drawer {
+  constructor(props) {
+    __publicField(this, "drawer", null);
+    __publicField(this, "div", null);
+    __publicField(this, "props", null);
+    __publicField(this, "hide", async () => {
+      var _a;
+      const beforeHidden = this.props.beforeHidden;
+      let result = (_a = typeof beforeHidden === "function" ? beforeHidden() : beforeHidden) != null ? _a : false;
+      if (result instanceof Promise) {
+        result = await result;
+      }
+      if (!result)
+        this.hideDirectly();
+    });
+    __publicField(this, "hideDirectly", () => {
+      this.drawer._instance.props.visible = false;
+    });
+    __publicField(this, "destroy", () => {
+      if (this.drawer) {
+        this.drawer.unmount();
+        this.drawer = null;
+        this.div.remove();
+      }
+    });
+    this.props = props;
+  }
+  show() {
+    if (!this.drawer) {
+      this.div = document.createElement("div");
+      this.drawer = createDrawerApp(this.props, this.drawer, this.div);
+    }
+    this.drawer._instance.props.visible = true;
+  }
+}
+Drawer$1.install = function(app) {
+  app.component(Drawer$1.name, Drawer$1);
 };
 var index = {
   title: "Drawer \u62BD\u5C49\u677F",
   category: "\u53CD\u9988",
-  status: "50%",
+  status: "75%",
   install(app) {
-    app.use(Drawer);
+    app.use(Drawer$1);
+    app.config.globalProperties.$drawerService = DrawerService;
   }
 };
-export { Drawer, index as default };
+export { Drawer$1 as Drawer, DrawerService, index as default };

package/drawer/index.umd.js

@@ -1 +1 @@
-var j=Object.defineProperty;var D=Object.getOwnPropertySymbols;var x=Object.prototype.hasOwnProperty,B=Object.prototype.propertyIsEnumerable;var N=(n,e,l)=>e in n?j(n,e,{enumerable:!0,configurable:!0,writable:!0,value:l}):n[e]=l,S=(n,e)=>{for(var l in e||(e={}))x.call(e,l)&&N(n,l,e[l]);if(D)for(var l of D(e))B.call(e,l)&&N(n,l,e[l]);return n};(function(n,e){typeof exports=="object"&&typeof module!="undefined"?e(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],e):(n=typeof globalThis!="undefined"?globalThis:n||self,e(n.index={},n.Vue))})(this,function(n,e){"use strict";const l={width:{type:String,default:"300px"},visible:{type:Boolean,default:!1},zIndex:{type:Number,default:1e3},isCover:{type:Boolean,default:!0},escKeyCloseable:{type:Boolean,default:!0},position:{type:String,default:"left"},backdropCloseable:{type:Boolean,default:!0},beforeHidden:{type:[Promise,Function]}};var z="",V=e.defineComponent({name:"DrawerHeader",emits:["toggleFullScreen","close"],setup(t,r){const o=e.ref(!1),s=e.inject("visible");return{fullScreenClassName:e.computed(()=>o.value?"icon icon-minimize":"icon icon-maxmize"),visible:s,handleFullScreen:f=>{f.stopPropagation(),o.value=!o.value,r.emit("toggleFullScreen")},handleDrawerClose:()=>{r.emit("close")}}},render(){const{handleFullScreen:t,handleDrawerClose:r,visible:o,fullScreenClassName:s}=this;return o?e.createVNode("div",{class:"devui-drawer-header"},[e.createVNode("div",{class:"devui-drawer-header-item"},[e.createVNode("span",{class:"devui-drawer-header-item icon icon-more-operate"},null)]),e.createVNode("div",{class:"devui-drawer-header-item",onClick:t},[e.createVNode("span",{class:s},null)]),e.createVNode("div",{class:"devui-drawer-header-item",onClick:r},[e.createVNode("span",{class:"icon icon-close"},null)])]):null}}),g=e.defineComponent({name:"DrawerContainer",setup(){return{visible:e.inject("visible")}},render(){const{visible:t}=this;return t?e.createVNode("div",null,[e.createTextVNode("\u5185\u5BB9\u533A\u57DF")]):null}}),E="",k=e.defineComponent({name:"DrawerBody",setup(t,{slots:r}){const o=e.inject("isFullScreen"),s=e.inject("closeDrawer"),a=e.inject("zindex"),c=e.inject("isCover"),u=e.inject("position"),f=e.inject("width"),C=e.inject("visible"),v=e.inject("backdropCloseable"),d=e.computed(()=>u.value==="right"?{right:0}:{left:0}),b=e.computed(()=>o.value?"100vw":f.value);return{zindex:a,slots:r,isCover:c,navRight:d,navWidth:b,visible:C,clickContent:i=>{i.stopPropagation()},handleDrawerClose:()=>{!v.value||s()}}},render(){const{zindex:t,slots:r,isCover:o,navRight:s,navWidth:a,visible:c,handleDrawerClose:u}=this;return c?e.createVNode("div",{class:"devui-drawer",style:{zIndex:t},onClick:u},[o?e.createVNode("div",{class:"devui-overlay-backdrop"},null):null,e.createVNode("div",{class:"devui-overlay-wrapper"},[e.createVNode("div",{class:"devui-drawer-nav",style:S({width:a},s)},[e.createVNode("div",{class:"devui-drawer-content",onClick:this.clickContent},[r.default?r.default():null])])])]):null}}),p=e.defineComponent({name:"DDrawer",props:l,emits:["close","update:visible","afterOpened"],setup(t,{emit:r,slots:o}){const{width:s,visible:a,zIndex:c,isCover:u,escKeyCloseable:f,position:C,backdropCloseable:v}=e.toRefs(t),d=e.ref(!1),b=()=>{d.value=!d.value},w=async()=>{var y;const i=t.beforeHidden;let m=(y=typeof i=="function"?i():i)!=null?y:!1;m instanceof Promise&&(m=await m),!m&&(r("update:visible",!1),r("close"))},h=i=>{i.code==="Escape"&&w()};return e.watch(a,i=>{i&&(r("afterOpened"),d.value=!1),f&&i?document.addEventListener("keyup",h):document.removeEventListener("keyup",h)}),e.provide("closeDrawer",w),e.provide("zindex",c),e.provide("isCover",u),e.provide("position",C),e.provide("width",s),e.provide("visible",a),e.provide("isFullScreen",d),e.provide("backdropCloseable",v),e.onUnmounted(()=>{document.removeEventListener("keyup",h)}),{isFullScreen:d,visible:a,slots:o,fullScreenEvent:b,closeDrawer:w}},render(){const t=this.fullScreenEvent,r=this.closeDrawer;return this.visible?e.createVNode(e.Teleport,{to:"body"},{default:()=>[e.createVNode(k,null,{default:()=>[this.slots.header?this.slots.header():e.createVNode(V,{onToggleFullScreen:t,onClose:r},null),this.slots.default?this.slots.default():e.createVNode(g,null,null)]})]}):null}});p.install=function(t){t.component(p.name,p)};var F={title:"Drawer \u62BD\u5C49\u677F",category:"\u53CD\u9988",status:"50%",install(t){t.use(p)}};n.Drawer=p,n.default=F,Object.defineProperty(n,"__esModule",{value:!0}),n[Symbol.toStringTag]="Module"});
+var z=Object.defineProperty;var S=Object.getOwnPropertySymbols;var P=Object.prototype.hasOwnProperty,T=Object.prototype.propertyIsEnumerable;var V=(r,e,o)=>e in r?z(r,e,{enumerable:!0,configurable:!0,writable:!0,value:o}):r[e]=o,g=(r,e)=>{for(var o in e||(e={}))P.call(e,o)&&V(r,o,e[o]);if(S)for(var o of S(e))T.call(e,o)&&V(r,o,e[o]);return r};var p=(r,e,o)=>(V(r,typeof e!="symbol"?e+"":e,o),o);(function(r,e){typeof exports=="object"&&typeof module!="undefined"?e(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],e):(r=typeof globalThis!="undefined"?globalThis:r||self,e(r.index={},r.Vue))})(this,function(r,e){"use strict";const o={width:{type:String,default:"300px"},visible:{type:Boolean,default:!1},zIndex:{type:Number,default:1e3},isCover:{type:Boolean,default:!0},escKeyCloseable:{type:Boolean,default:!0},position:{type:String,default:"left"},backdropCloseable:{type:Boolean,default:!0},destroyOnHide:{type:Boolean,default:!1},beforeHidden:{type:[Promise,Function]},content:{type:[Object,Function]},header:{type:[Object,Function]}};var E="",O=e.defineComponent({name:"DrawerHeader",emits:["toggleFullScreen","close"],setup(n,i){const t=e.ref(!1),s=e.inject("visible"),l=e.inject("destroyOnHide");return{fullScreenClassName:e.computed(()=>t.value?"icon icon-minimize":"icon icon-maxmize"),visible:s,handleFullScreen:c=>{c.stopPropagation(),t.value=!t.value,i.emit("toggleFullScreen")},handleDrawerClose:()=>{i.emit("close")},destroyOnHide:l}},render(){const{handleFullScreen:n,handleDrawerClose:i,visible:t,fullScreenClassName:s,destroyOnHide:l}=this;if(l.value&&!t)return null;const d=t?"visible":"hidden";return e.createVNode("div",{class:"devui-drawer-header",style:{visibility:d}},[e.createVNode("div",{class:"devui-drawer-header-item"},[e.createVNode("span",{class:"devui-drawer-header-item icon icon-more-operate"},null)]),e.createVNode("div",{class:"devui-drawer-header-item",onClick:n},[e.createVNode("span",{class:s},null)]),e.createVNode("div",{class:"devui-drawer-header-item",onClick:i},[e.createVNode("span",{class:"icon icon-close"},null)])])}}),j=e.defineComponent({name:"DrawerContainer",setup(){const n=e.inject("visible"),i=e.inject("destroyOnHide");return{visible:n,destroyOnHide:i}},render(){const{visible:n,destroyOnHide:i}=this;if(i.value&&!n)return null;const t=this.visible?"visible":"hidden";return e.createVNode("div",{style:{visibility:t}},[e.createTextVNode("\u5185\u5BB9\u533A\u57DF")])}}),_="",k=e.defineComponent({name:"DrawerBody",setup(n,{slots:i}){const t=e.inject("isFullScreen"),s=e.inject("closeDrawer"),l=e.inject("zindex"),d=e.inject("isCover"),h=e.inject("position"),v=e.inject("width"),c=e.inject("visible"),C=e.inject("backdropCloseable"),b=e.inject("destroyOnHide"),u=e.computed(()=>h.value==="right"?{right:0}:{left:0}),D=e.computed(()=>t.value?"100vw":v.value);return{zindex:l,slots:i,isCover:d,navRight:u,navWidth:D,visible:c,clickContent:a=>{a.stopPropagation()},handleDrawerClose:()=>{!C.value||s()},destroyOnHide:b}},render(){const{zindex:n,slots:i,isCover:t,navRight:s,navWidth:l,visible:d,handleDrawerClose:h,destroyOnHide:v}=this;if(v.value&&!d)return null;const c=d?"visible":"hidden";return e.createVNode("div",{class:"devui-drawer",style:{zIndex:n,visibility:c},onClick:h},[t?e.createVNode("div",{class:"devui-overlay-backdrop"},null):null,e.createVNode("div",{class:"devui-overlay-wrapper"},[e.createVNode("div",{class:"devui-drawer-nav",style:g({width:l},s)},[e.createVNode("div",{class:"devui-drawer-content",onClick:this.clickContent},[i.default?i.default():null])])])])}}),f=e.defineComponent({name:"DDrawer",props:o,emits:["close","update:visible","afterOpened"],setup(n,{emit:i,slots:t}){const{width:s,visible:l,zIndex:d,isCover:h,escKeyCloseable:v,position:c,backdropCloseable:C,destroyOnHide:b}=e.toRefs(n),u=e.ref(!1),D=()=>{u.value=!u.value},w=async()=>{var H;const a=n.beforeHidden;let m=(H=typeof a=="function"?a():a)!=null?H:!1;m instanceof Promise&&(m=await m),!m&&(i("update:visible",!1),i("close"))},y=a=>{a.code==="Escape"&&w()};return e.watch(l,a=>{a&&(i("afterOpened"),b.value&&(u.value=!1)),v&&a?document.addEventListener("keyup",y):document.removeEventListener("keyup",y)}),e.provide("closeDrawer",w),e.provide("zindex",d),e.provide("isCover",h),e.provide("position",c),e.provide("width",s),e.provide("visible",l),e.provide("isFullScreen",u),e.provide("backdropCloseable",C),e.provide("destroyOnHide",b),e.onUnmounted(()=>{document.removeEventListener("keyup",y)}),{isFullScreen:u,visible:l,slots:t,fullscreen:D,closeDrawer:w}},render(){const{fullscreen:n,closeDrawer:i,visible:t,destroyOnHide:s}=this;if(s.value&&!t)return null;const l=t?"visible":"hidden";return e.createVNode(e.Teleport,{to:"body"},{default:()=>[e.createVNode(k,{style:{visibility:l}},{default:()=>[this.slots.header?this.slots.header({fullscreen:n,closeDrawer:i}):e.createVNode(O,{onToggleFullScreen:n,onClose:i},null),this.slots.content?this.slots.content():e.createVNode(j,null,null)]})]})}});function F(n,i,t){if(i)return i;const s=e.createApp(e.createVNode(f,{visible:n.visible,"onUpdate:visible":l=>n.visible=l},{header:n.header,content:n.content}));return s.mount(t),s}class N{static create(i,t){return t||(t=new B(i)),t}}class B{constructor(i){p(this,"drawer",null);p(this,"div",null);p(this,"props",null);p(this,"hide",async()=>{var s;const i=this.props.beforeHidden;let t=(s=typeof i=="function"?i():i)!=null?s:!1;t instanceof Promise&&(t=await t),t||this.hideDirectly()});p(this,"hideDirectly",()=>{this.drawer._instance.props.visible=!1});p(this,"destroy",()=>{this.drawer&&(this.drawer.unmount(),this.drawer=null,this.div.remove())});this.props=i}show(){this.drawer||(this.div=document.createElement("div"),this.drawer=F(this.props,this.drawer,this.div)),this.drawer._instance.props.visible=!0}}f.install=function(n){n.component(f.name,f)};var x={title:"Drawer \u62BD\u5C49\u677F",category:"\u53CD\u9988",status:"75%",install(n){n.use(f),n.config.globalProperties.$drawerService=N}};r.Drawer=f,r.DrawerService=N,r.default=x,Object.defineProperty(r,"__esModule",{value:!0}),r[Symbol.toStringTag]="Module"});

package/form/index.es.js

@@ -351,6 +351,10 @@ var Popover = defineComponent({
       type: Number,
       default: 1060
     },
+    controlled: {
+      type: Boolean,
+      default: false
+    },
     popType: {
       type: String,
       default: "default"
@@ -391,7 +395,8 @@ var Popover = defineComponent({
       mouseEnterDelay,
       mouseLeaveDelay,
       showAnimation,
-      popMaxWidth
+      popMaxWidth,
+      controlled
     } = toRefs(props);
     const style2 = __spreadValues({
       zIndex: zIndex.value
@@ -405,20 +410,24 @@ var Popover = defineComponent({
       }
       visible.value = true;
     };
-    const onClick = isClick ? event : null;
+    const onClick = isClick && controlled.value ? event : null;
     const enter = debounce$1(() => {
       visible.value = true;
     }, mouseEnterDelay.value);
     const leave = debounce$1(() => {
       visible.value = false;
     }, mouseLeaveDelay.value);
-    const onMouseenter = isClick ? null : enter;
-    const onMouseleave = isClick ? null : leave;
+    const onMouseenter = !isClick && controlled.value ? enter : null;
+    const onMouseleave = !isClick && controlled.value ? leave : null;
     const hiddenContext = () => {
+      if (!controlled.value)
+        return;
       visible.value = false;
     };
     popMaxWidth.value && (style2.maxWidth = `${popMaxWidth.value}px`);
     watch(() => props.visible, (newVal) => {
+      if (controlled.value)
+        return;
       visible.value = newVal;
     });
     return () => {
@@ -1503,7 +1512,11 @@ var FormItem = defineComponent({
     const labelData = reactive(dForm.labelData);
     const rules2 = reactive(dForm.rules);
     const resetField = () => {
-      formData[props.prop] = initFormItemData;
+      if (Array.isArray(initFormItemData)) {
+        formData[props.prop] = [...initFormItemData];
+      } else {
+        formData[props.prop] = initFormItemData;
+      }
     };
     const formItem2 = reactive({
       dHasFeedback: props.dHasFeedback,
@@ -1791,6 +1804,9 @@ function uniqueId(prefix) {
 var formControl = "";
 var FormControl = defineComponent({
   name: "DFormControl",
+  directives: {
+    clickoutside: clickoutsideDirective
+  },
   props: formControlProps,
   setup(props, ctx2) {
     const formControl2 = ref();
@@ -1799,6 +1815,7 @@ var FormControl = defineComponent({
     const isHorizontal = labelData.layout === "horizontal";
     const uid = uniqueId("dfc-");
     const showPopover = ref(false);
+    const updateOn = ref("change");
     const tipMessage = ref("");
     const popPosition = ref("bottom");
     let rectInfo = {
@@ -1815,13 +1832,15 @@ var FormControl = defineComponent({
       const el = document.getElementById(uid);
       elOffset = getElOffset(el);
       EventBus.on("showPopoverErrorMessage", (data) => {
+        var _a;
         if (uid === data.uid) {
           rectInfo = el.getBoundingClientRect();
-          popoverLeftPosition = popPosition.value === "top" || popPosition.value === "bottom" ? rectInfo.right - rectInfo.width / 2 : rectInfo.right;
-          popoverTopPosition = popPosition.value === "top" ? elOffset.top + rectInfo.height / 2 - rectInfo.height : elOffset.top + rectInfo.height / 2;
           showPopover.value = data.showPopover;
           tipMessage.value = data.message;
           popPosition.value = data.popPosition;
+          popoverLeftPosition = popPosition.value === "top" || popPosition.value === "bottom" ? rectInfo.right - rectInfo.width / 2 : rectInfo.right;
+          popoverTopPosition = popPosition.value === "top" ? elOffset.top + rectInfo.height / 2 - rectInfo.height : elOffset.top + rectInfo.height / 2;
+          updateOn.value = (_a = data.updateOn) != null ? _a : "change";
         }
       });
     });
@@ -1849,17 +1868,22 @@ var FormControl = defineComponent({
           };
       }
     });
+    const handleClickOutside = () => {
+      if (updateOn.value !== "change") {
+        showPopover.value = false;
+      }
+    };
     return () => {
       var _a, _b, _c, _d, _e, _f, _g, _h;
       const {
         feedbackStatus,
         extraInfo
       } = props;
-      return createVNode("div", {
+      return withDirectives(createVNode("div", {
         "class": "form-control",
         "ref": formControl2,
         "data-uid": uid
-      }, [createVNode(Teleport, {
+      }, [showPopover.value && createVNode(Teleport, {
         "to": "body"
       }, {
         default: () => [createVNode("div", {
@@ -1871,6 +1895,7 @@ var FormControl = defineComponent({
             height: rectInfo.height + "px"
           }
         }, [createVNode(Popover, {
+          "controlled": updateOn.value !== "change",
           "visible": showPopover.value,
           "content": tipMessage.value,
           "popType": "error",
@@ -1888,7 +1913,7 @@ var FormControl = defineComponent({
         "color": iconData.value.color
       }, null)])]), extraInfo && createVNode("div", {
         "class": "devui-form-control-extra-info"
-      }, [extraInfo])]);
+      }, [extraInfo])]), [[resolveDirective("clickoutside"), handleClickOutside]]);
     };
   }
 });
@@ -2057,13 +2082,25 @@ function handleErrorStrategyPass(el) {
   index2 !== -1 && classList.splice(index2, 1);
   el.setAttribute("class", classList.join(" "));
 }
-function handleValidateError({ el, tipEl, message, isFormTag, messageShowType, dfcUID, popPosition = "right-bottom" }) {
+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 === MessageShowTypeEnum.toast) {
     alert(message);
     return;
   }
+  if (!dfcUID) {
+    dfcUID = getFormControlUID(el);
+  }
   if (MessageShowTypeEnum.popover === messageShowType) {
-    EventBus.emit("showPopoverErrorMessage", { showPopover: true, message, uid: dfcUID, popPosition });
+    EventBus.emit("showPopoverErrorMessage", { showPopover: true, message, uid: dfcUID, popPosition, updateOn });
     return;
   }
   tipEl.innerText = "" + message;
@@ -2085,7 +2122,7 @@ function getFormName(binding) {
   const key = Object.keys(_refs)[0];
   return _refs[key]["name"];
 }
-function validateFn({ validator, modelValue, el, tipEl, isFormTag, messageShowType, dfcUID, popPosition }) {
+function validateFn({ validator, modelValue, el, tipEl, isFormTag, messageShowType, dfcUID, popPosition, updateOn }) {
   validator.validate({ modelName: modelValue }).then(() => {
     handleValidatePass(el, tipEl);
   }).catch((err) => {
@@ -2098,7 +2135,7 @@ function validateFn({ validator, modelValue, el, tipEl, isFormTag, messageShowTy
     } else {
       msg = errors[0].message;
     }
-    handleValidateError({ el, tipEl, message: msg, isFormTag, messageShowType, dfcUID, popPosition });
+    handleValidateError({ el, tipEl, message: msg, isFormTag, messageShowType, dfcUID, popPosition, updateOn });
   });
 }
 function checkValidPopsition(positionStr) {
@@ -2197,11 +2234,16 @@ var dValidateRules = {
     const htmlEventValidateHandler = (e) => {
       const modelValue = e.target.value;
       if (messageShowType === MessageShowTypeEnum.popover) {
-        EventBus.emit("showPopoverErrorMessage", { showPopover: false, message: "", uid: dfcUID, popPosition });
+        EventBus.emit("showPopoverErrorMessage", { showPopover: false, message: "", uid: dfcUID, popPosition, updateOn });
       }
-      validateFn({ validator, modelValue, el, tipEl, isFormTag: false, messageShowType, dfcUID, popPosition });
+      validateFn({ validator, modelValue, el, tipEl, isFormTag: false, messageShowType, dfcUID, popPosition, updateOn });
     };
     vnode.children[0].el.addEventListener(updateOn, htmlEventValidateHandler);
+    if (messageShowType === MessageShowTypeEnum.popover && updateOn === UpdateOnEnum.change) {
+      vnode.children[0].el.addEventListener("focus", () => {
+        EventBus.emit("showPopoverErrorMessage", { showPopover: false, uid: dfcUID, updateOn });
+      });
+    }
     if (errorStrategy === ErrorStrategyEnum.pristine) {
       handleErrorStrategy(el);
       vnode.children[0].props.value = "" + vnode.children[0].props.value;
@@ -2209,7 +2251,7 @@ var dValidateRules = {
     const formName = getFormName(binding);
     formName && EventBus.on(`formSubmit:${formName}`, () => {
       const modelValue = isFormTag ? "" : vnode.children[0].el.value;
-      validateFn({ validator, modelValue, el, tipEl, isFormTag, messageShowType });
+      validateFn({ validator, modelValue, el, tipEl, isFormTag, messageShowType, updateOn: "submit" });
     });
   }
 };