vxe-pc-ui 4.3.61 → 4.3.62

package/lib/button/src/button.min.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=void 0;var _vue=require("vue"),_xeUtils=_interopRequireDefault(require("xe-utils")),_ui=require("../../ui"),_dom=require("../../ui/src/dom"),_utils=require("../../ui/src/utils"),_log=require("../../ui/src/log"),_tooltip=_interopRequireDefault(require("../../tooltip/src/tooltip"));function _interopRequireDefault(e){return e&&e.__esModule?e:{default:e}}var _default=exports.default=(0,_vue.defineComponent)({name:"VxeButton",props:{type:String,mode:String,className:[String,Function],popupClassName:[String,Function],size:{type:String,default:()=>(0,_ui.getConfig)().button.size||(0,_ui.getConfig)().size},name:[String,Number],routerLink:Object,permissionCode:[String,Number],content:String,placement:String,status:String,title:String,icon:String,round:Boolean,circle:Boolean,disabled:Boolean,loading:Boolean,trigger:{type:String,default:()=>(0,_ui.getConfig)().button.trigger},align:String,prefixTooltip:Object,suffixTooltip:Object,destroyOnClose:{type:Boolean,default:()=>(0,_ui.getConfig)().button.destroyOnClose},transfer:{type:Boolean,default:null}},emits:["click","mouseenter","mouseleave","dropdown-click"],setup(N,e){const{slots:k,emit:n}=e,i=(0,_vue.inject)("$xeModal",null),o=(0,_vue.inject)("$xeDrawer",null),u=(0,_vue.inject)("$xeTable",null),l=(0,_vue.inject)("$xeForm",null),a=(0,_vue.inject)("$xeButtonGroup",null);var t=_xeUtils.default.uniqueId();const P=(0,_ui.useSize)(N)["computeSize"],C=(0,_ui.usePermission)(N)["computePermissionInfo"],w=(0,_vue.reactive)({initialized:!1,visiblePanel:!1,isAniVisible:!1,isActivated:!1,panelIndex:0,panelStyle:{},panelPlacement:""}),s={showTime:void 0,tooltipTimeout:void 0},S=(0,_vue.ref)(),I=(0,_vue.ref)(),j=(0,_vue.ref)(),r={refElem:S},z={xID:t,props:N,context:e,reactData:w,internalData:s,getRefMaps:()=>r};const M=(0,_vue.computed)(()=>{var e=N["transfer"];if(null===e){var t=(0,_ui.getConfig)().button.transfer;if(_xeUtils.default.isBoolean(t))return t;if(u||i||o||l)return!0}return e}),$=(0,_vue.computed)(()=>{var e=N["disabled"],t=C.value;return e||t.disabled}),E=(0,_vue.computed)(()=>{var e=N["type"];return!!e&&-1<["submit","reset","button"].indexOf(e)}),U=(0,_vue.computed)(()=>{var{type:e,mode:t}=N;return"text"===t||"text"===e||a&&"text"===a.props.mode?"text":"button"}),A=(0,_vue.computed)(()=>{var e=N["status"];return e||(a?a.props.status:"")}),B=(0,_vue.computed)(()=>{var e=N["round"];return e||!!a&&a.props.round}),R=(0,_vue.computed)(()=>{var e=N["circle"];return e||!!a&&a.props.circle}),b=(0,_vue.computed)(()=>Object.assign({},N.prefixTooltip)),g=(0,_vue.computed)(()=>Object.assign({},N.suffixTooltip)),m=()=>{w.panelIndex<(0,_utils.getLastZIndex)()&&(w.panelIndex=(0,_utils.nextZIndex)())},v=()=>(0,_vue.nextTick)().then(()=>{var n=N["placement"],o=w["panelIndex"],u=I.value,l=j.value,e=M.value;if(l&&u){var a=u.offsetHeight,s=u.offsetWidth,r=l.offsetHeight,l=l.offsetWidth,o={zIndex:o},{top:u,left:v,boundingTop:d,visibleHeight:c,visibleWidth:p}=(0,_dom.getAbsolutePos)(u);let i="bottom";if(e){let e=v+s-l,t=u+a;"top"===n?(i="top",t=u-r):n||(c<d+a+r+5&&(i="top",t=u-r),t<5&&(i="bottom",t=u+a)),e+l+5>p&&(e-=e+l+5-p),e<5&&(e=5),Object.assign(o,{left:e+"px",right:"auto",top:t+"px",minWidth:s+"px"})}else"top"===n?(i="top",o.bottom=a+"px"):n||c<d+a+r&&5<d-a-r&&(i="top",o.bottom=a+"px");return w.panelStyle=o,w.panelPlacement=i,(0,_vue.nextTick)()}}),D=e=>{a?a.handleClick({name:N.name},e):_("click",{$event:e},e)},W=e=>{0===e.button&&e.stopPropagation()},H=e=>{var t=e.currentTarget;const i=j.value;var{flag:t,targetElem:n}=(0,_dom.getEventTargetNode)(e,t,"vxe-button");t&&(i&&(i.dataset.active="N"),w.visiblePanel=!1,setTimeout(()=>{i&&"Y"===i.dataset.active||(w.isAniVisible=!1)},350),_("dropdown-click",{name:n.getAttribute("name"),$event:e},e))},V=()=>{const e=j.value;e&&(e.dataset.active="Y",w.isAniVisible=!0,setTimeout(()=>{"Y"===e.dataset.active&&(w.visiblePanel=!0,m(),v(),setTimeout(()=>{w.visiblePanel&&v()},50))},20))},G=e=>{var t=N["loading"];$.value||t||(d(),q(e))},Z=e=>{c(),F(e)},q=e=>{_("mouseenter",{},e)},F=e=>{_("mouseleave",{},e)},L=e=>{var{loading:t,trigger:i}=N;$.value||t||("click"===i&&(w.visiblePanel?c:d)(),D(e))},d=()=>{var e=N["trigger"];const t=j.value;return t&&(t.dataset.active="Y",w.initialized||(w.initialized=!0),s.showTime=setTimeout(()=>{"Y"===t.dataset.active?V():w.isAniVisible=!1},"click"===e?50:250)),(0,_vue.nextTick)()},c=()=>{const e=j.value;return clearTimeout(s.showTime),e?(e.dataset.active="N",setTimeout(()=>{"Y"!==e.dataset.active&&(w.visiblePanel=!1,setTimeout(()=>{"Y"!==e.dataset.active&&(w.isAniVisible=!1)},350))},100)):(w.isAniVisible=!1,w.visiblePanel=!1),(0,_vue.nextTick)()},J=()=>{c()},p=(e,t)=>(0,_vue.h)(_tooltip.default,{useHTML:e.useHTML,content:e.content,enterable:e.enterable,theme:e.theme},{default(){return(0,_vue.h)("i",{class:[`vxe-button--tooltip-${t}-icon`,e.icon||(0,_ui.getIcon)().BUTTON_TOOLTIP_ICON]})}}),Y=()=>{var{content:e,icon:t,loading:i,prefixTooltip:n,suffixTooltip:o}=N,u=b.value,l=g.value,a=k.icon,s=k.default,r=[];return n&&r.push(p(u,"prefix")),i?r.push((0,_vue.h)("i",{class:["vxe-button--loading-icon",(0,_ui.getIcon)().BUTTON_LOADING]})):a?r.push((0,_vue.h)("span",{class:"vxe-button--custom-icon"},a({}))):t&&r.push((0,_vue.h)("i",{class:["vxe-button--icon",t]})),s?r.push((0,_vue.h)("span",{class:"vxe-button--content"},s({}))):e&&r.push((0,_vue.h)("span",{class:"vxe-button--content"},(0,_utils.getFuncText)(e))),o&&r.push(p(l,"suffix")),r},_=(e,t,i)=>{n(e,(0,_ui.createEvent)(i,{$button:z},t))},f=(t={dispatchEvent:_,openPanel:d,closePanel:c,focus(){var e=I.value;return e&&e.focus(),(0,_vue.nextTick)()},blur(){var e=I.value;return e&&e.blur(),(0,_vue.nextTick)()}},e=>{var t=j.value;w.visiblePanel&&!(0,_dom.getEventTargetNode)(e,t).flag&&c()}),x=e=>{var t,i=$.value,n=w["visiblePanel"];i||(i=S.value,t=j.value,w.isActivated=(0,_dom.getEventTargetNode)(e,i).flag||(0,_dom.getEventTargetNode)(e,t).flag,n&&!w.isActivated&&c())};Object.assign(z,t);return z.renderVN=()=>{var e,{className:t,popupClassName:i,align:n,trigger:o,title:u,routerLink:l,type:a,destroyOnClose:s,name:r,loading:v}=N,{initialized:d,isAniVisible:c,visiblePanel:p}=w,_=E.value,b=U.value,g=A.value,m=B.value,f=R.value,x=M.value,h=$.value,T=C.value,O=P.value,y=k.dropdowns;return T.visible?y?(T={},e={},"hover"===o&&(T.onMouseenter=G,T.onMouseleave=Z,e.onMouseenter=V,e.onMouseleave=J),(0,_vue.h)("div",{ref:S,class:["vxe-button--dropdown",t?_xeUtils.default.isFunction(t)?t({$button:z}):t:"",{["size--"+O]:O,"is--active":p}]},[l?(0,_vue.h)((0,_vue.resolveComponent)("router-link"),Object.assign({ref:I,class:["vxe-button","vxe-button--link","type--"+b,n?"align--"+n:"",t?_xeUtils.default.isFunction(t)?t({$button:z}):t:"",{["size--"+O]:O,["theme--"+g]:g,"is--round":m,"is--circle":f,"is--disabled":h||v,"is--loading":v}],title:u,name:r,type:_?a:"button",disabled:h||v,to:l,onClick:L},T),{default(){return Y().concat([(0,_vue.h)("i",{class:"vxe-button--dropdown-arrow "+(0,_ui.getIcon)().BUTTON_DROPDOWN})])}}):(0,_vue.h)("button",Object.assign({ref:I,class:["vxe-button","type--"+b,n?"align--"+n:"",t?_xeUtils.default.isFunction(t)?t({$button:z}):t:"",{["size--"+O]:O,["theme--"+g]:g,"is--round":m,"is--circle":f,"is--disabled":h||v,"is--loading":v}],title:u,name:r,type:_?a:"button",disabled:h||v,onClick:L},T),Y().concat([(0,_vue.h)("i",{class:"vxe-button--dropdown-arrow "+(0,_ui.getIcon)().BUTTON_DROPDOWN})])),(0,_vue.h)(_vue.Teleport,{to:"body",disabled:!x||!d},[(0,_vue.h)("div",Object.assign({ref:j,class:["vxe-button--dropdown-panel",i?_xeUtils.default.isFunction(i)?i({$button:z}):i:"",{["size--"+O]:O,"ani--leave":c,"ani--enter":p}],placement:w.panelPlacement,style:w.panelStyle},e),d&&(p||c)?[(0,_vue.h)("div",{class:"vxe-button--dropdown-wrapper",onMousedown:W,onClick:H},s&&!p?[]:y({}))]:[])])])):l?(0,_vue.h)((0,_vue.resolveComponent)("router-link"),{ref:I,class:["vxe-button","vxe-button--link","type--"+b,n?"align--"+n:"",t?_xeUtils.default.isFunction(t)?t({$button:z}):t:"",{["size--"+O]:O,["theme--"+g]:g,"is--round":m,"is--circle":f,"is--disabled":h||v,"is--loading":v}],title:u,name:r,type:_?a:"button",disabled:h||v,to:l,onClick:D,onMouseenter:q,onMouseleave:F},{default(){return Y()}}):(0,_vue.h)("button",{ref:I,class:["vxe-button","type--"+b,n?"align--"+n:"",t?_xeUtils.default.isFunction(t)?t({$button:z}):t:"",{["size--"+O]:O,["theme--"+g]:g,"is--round":m,"is--circle":f,"is--disabled":h||v,"is--loading":v}],title:u,name:r,type:_?a:"button",disabled:h||v,onClick:D,onMouseenter:q,onMouseleave:F},Y()):(0,_vue.createCommentVNode)()},(0,_vue.onMounted)(()=>{"development"===process.env.NODE_ENV&&"text"===N.type&&(0,_log.warnLog)("vxe.error.delProp",["type=text","mode=text"]),_ui.globalEvents.on(z,"mousewheel",f),_ui.globalEvents.on(z,"mousedown",x)}),(0,_vue.onUnmounted)(()=>{_ui.globalEvents.off(z,"mousewheel"),_ui.globalEvents.off(z,"mousedown")}),z},render(){return this.renderVN()}});
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=void 0;var _vue=require("vue"),_xeUtils=_interopRequireDefault(require("xe-utils")),_ui=require("../../ui"),_dom=require("../../ui/src/dom"),_utils=require("../../ui/src/utils"),_log=require("../../ui/src/log"),_tooltip=_interopRequireDefault(require("../../tooltip/src/tooltip"));function _interopRequireDefault(e){return e&&e.__esModule?e:{default:e}}var _default=exports.default=(0,_vue.defineComponent)({name:"VxeButton",props:{type:String,mode:String,className:[String,Function],popupClassName:[String,Function],size:{type:String,default:()=>(0,_ui.getConfig)().button.size||(0,_ui.getConfig)().size},name:[String,Number],routerLink:Object,permissionCode:[String,Number],content:String,placement:String,status:String,title:String,icon:String,round:Boolean,circle:Boolean,disabled:Boolean,loading:Boolean,trigger:{type:String,default:()=>(0,_ui.getConfig)().button.trigger},align:String,prefixTooltip:Object,suffixTooltip:Object,destroyOnClose:{type:Boolean,default:()=>(0,_ui.getConfig)().button.destroyOnClose},transfer:{type:Boolean,default:null}},emits:["click","mouseenter","mouseleave","dropdown-click"],setup(N,e){const{slots:k,emit:n}=e,i=(0,_vue.inject)("$xeModal",null),o=(0,_vue.inject)("$xeDrawer",null),u=(0,_vue.inject)("$xeTable",null),l=(0,_vue.inject)("$xeForm",null),a=(0,_vue.inject)("$xeButtonGroup",null);var t=_xeUtils.default.uniqueId();const P=(0,_ui.useSize)(N)["computeSize"],C=(0,_ui.usePermission)(N)["computePermissionInfo"],w=(0,_vue.reactive)({initialized:!1,visiblePanel:!1,isAniVisible:!1,isActivated:!1,panelIndex:0,panelStyle:{},panelPlacement:""}),s={showTime:void 0,tooltipTimeout:void 0},S=(0,_vue.ref)(),I=(0,_vue.ref)(),j=(0,_vue.ref)(),r={refElem:S},z={xID:t,props:N,context:e,reactData:w,internalData:s,getRefMaps:()=>r};const M=(0,_vue.computed)(()=>{var e=N["transfer"];if(null===e){var t=(0,_ui.getConfig)().button.transfer;if(_xeUtils.default.isBoolean(t))return t;if(u||i||o||l)return!0}return e}),$=(0,_vue.computed)(()=>{var e=N["disabled"],t=C.value;return e||t.disabled}),E=(0,_vue.computed)(()=>{var e=N["type"];return!!e&&-1<["submit","reset","button"].indexOf(e)}),U=(0,_vue.computed)(()=>{var{type:e,mode:t}=N;return"text"===t||"text"===e||a&&"text"===a.props.mode?"text":"button"}),A=(0,_vue.computed)(()=>{var e=N["status"];return e||(a?a.props.status:"")}),B=(0,_vue.computed)(()=>{var e=N["round"];return e||!!a&&a.props.round}),R=(0,_vue.computed)(()=>{var e=N["circle"];return e||!!a&&a.props.circle}),b=(0,_vue.computed)(()=>Object.assign({},N.prefixTooltip)),g=(0,_vue.computed)(()=>Object.assign({},N.suffixTooltip)),m=()=>{w.panelIndex<(0,_utils.getLastZIndex)()&&(w.panelIndex=(0,_utils.nextZIndex)())},v=()=>(0,_vue.nextTick)().then(()=>{var n=N["placement"],o=w["panelIndex"],u=I.value,l=j.value,e=M.value;if(l&&u){var a=u.offsetHeight,s=u.offsetWidth,r=l.offsetHeight,l=l.offsetWidth,o={zIndex:o},{top:u,left:v,boundingTop:d,visibleHeight:c,visibleWidth:p}=(0,_dom.getAbsolutePos)(u);let i="bottom";if(e){let e=v+s-l,t=u+a;"top"===n?(i="top",t=u-r):n||(c<d+a+r+5&&(i="top",t=u-r),t<5&&(i="bottom",t=u+a)),e+l+5>p&&(e-=e+l+5-p),e<5&&(e=5),Object.assign(o,{left:e+"px",right:"auto",top:t+"px",minWidth:s+"px"})}else"top"===n?(i="top",o.bottom=a+"px"):n||c<d+a+r&&5<d-a-r&&(i="top",o.bottom=a+"px");return w.panelStyle=o,w.panelPlacement=i,(0,_vue.nextTick)()}}),D=e=>{a&&a.handleClick({name:N.name},e),_("click",{$event:e},e)},W=e=>{0===e.button&&e.stopPropagation()},H=e=>{var t=e.currentTarget;const i=j.value;var{flag:t,targetElem:n}=(0,_dom.getEventTargetNode)(e,t,"vxe-button");t&&(i&&(i.dataset.active="N"),w.visiblePanel=!1,setTimeout(()=>{i&&"Y"===i.dataset.active||(w.isAniVisible=!1)},350),_("dropdown-click",{name:n.getAttribute("name"),$event:e},e))},V=()=>{const e=j.value;e&&(e.dataset.active="Y",w.isAniVisible=!0,setTimeout(()=>{"Y"===e.dataset.active&&(w.visiblePanel=!0,m(),v(),setTimeout(()=>{w.visiblePanel&&v()},50))},20))},G=e=>{var t=N["loading"];$.value||t||(d(),q(e))},Z=e=>{c(),F(e)},q=e=>{_("mouseenter",{},e)},F=e=>{_("mouseleave",{},e)},L=e=>{var{loading:t,trigger:i}=N;$.value||t||("click"===i&&(w.visiblePanel?c:d)(),D(e))},d=()=>{var e=N["trigger"];const t=j.value;return t&&(t.dataset.active="Y",w.initialized||(w.initialized=!0),s.showTime=setTimeout(()=>{"Y"===t.dataset.active?V():w.isAniVisible=!1},"click"===e?50:250)),(0,_vue.nextTick)()},c=()=>{const e=j.value;return clearTimeout(s.showTime),e?(e.dataset.active="N",setTimeout(()=>{"Y"!==e.dataset.active&&(w.visiblePanel=!1,setTimeout(()=>{"Y"!==e.dataset.active&&(w.isAniVisible=!1)},350))},100)):(w.isAniVisible=!1,w.visiblePanel=!1),(0,_vue.nextTick)()},J=()=>{c()},p=(e,t)=>(0,_vue.h)(_tooltip.default,{useHTML:e.useHTML,content:e.content,enterable:e.enterable,theme:e.theme},{default(){return(0,_vue.h)("i",{class:[`vxe-button--tooltip-${t}-icon`,e.icon||(0,_ui.getIcon)().BUTTON_TOOLTIP_ICON]})}}),Y=()=>{var{content:e,icon:t,loading:i,prefixTooltip:n,suffixTooltip:o}=N,u=b.value,l=g.value,a=k.icon,s=k.default,r=[];return n&&r.push(p(u,"prefix")),i?r.push((0,_vue.h)("i",{class:["vxe-button--loading-icon",(0,_ui.getIcon)().BUTTON_LOADING]})):a?r.push((0,_vue.h)("span",{class:"vxe-button--custom-icon"},a({}))):t&&r.push((0,_vue.h)("i",{class:["vxe-button--icon",t]})),s?r.push((0,_vue.h)("span",{class:"vxe-button--content"},s({}))):e&&r.push((0,_vue.h)("span",{class:"vxe-button--content"},(0,_utils.getFuncText)(e))),o&&r.push(p(l,"suffix")),r},_=(e,t,i)=>{n(e,(0,_ui.createEvent)(i,{$button:z},t))},f=(t={dispatchEvent:_,openPanel:d,closePanel:c,focus(){var e=I.value;return e&&e.focus(),(0,_vue.nextTick)()},blur(){var e=I.value;return e&&e.blur(),(0,_vue.nextTick)()}},e=>{var t=j.value;w.visiblePanel&&!(0,_dom.getEventTargetNode)(e,t).flag&&c()}),x=e=>{var t,i=$.value,n=w["visiblePanel"];i||(i=S.value,t=j.value,w.isActivated=(0,_dom.getEventTargetNode)(e,i).flag||(0,_dom.getEventTargetNode)(e,t).flag,n&&!w.isActivated&&c())};Object.assign(z,t);return z.renderVN=()=>{var e,{className:t,popupClassName:i,align:n,trigger:o,title:u,routerLink:l,type:a,destroyOnClose:s,name:r,loading:v}=N,{initialized:d,isAniVisible:c,visiblePanel:p}=w,_=E.value,b=U.value,g=A.value,m=B.value,f=R.value,x=M.value,h=$.value,T=C.value,O=P.value,y=k.dropdowns;return T.visible?y?(T={},e={},"hover"===o&&(T.onMouseenter=G,T.onMouseleave=Z,e.onMouseenter=V,e.onMouseleave=J),(0,_vue.h)("div",{ref:S,class:["vxe-button--dropdown",t?_xeUtils.default.isFunction(t)?t({$button:z}):t:"",{["size--"+O]:O,"is--active":p}]},[l?(0,_vue.h)((0,_vue.resolveComponent)("router-link"),Object.assign({ref:I,class:["vxe-button","vxe-button--link","type--"+b,n?"align--"+n:"",t?_xeUtils.default.isFunction(t)?t({$button:z}):t:"",{["size--"+O]:O,["theme--"+g]:g,"is--round":m,"is--circle":f,"is--disabled":h||v,"is--loading":v}],title:u,name:r,type:_?a:"button",disabled:h||v,to:l,onClick:L},T),{default(){return Y().concat([(0,_vue.h)("i",{class:"vxe-button--dropdown-arrow "+(0,_ui.getIcon)().BUTTON_DROPDOWN})])}}):(0,_vue.h)("button",Object.assign({ref:I,class:["vxe-button","type--"+b,n?"align--"+n:"",t?_xeUtils.default.isFunction(t)?t({$button:z}):t:"",{["size--"+O]:O,["theme--"+g]:g,"is--round":m,"is--circle":f,"is--disabled":h||v,"is--loading":v}],title:u,name:r,type:_?a:"button",disabled:h||v,onClick:L},T),Y().concat([(0,_vue.h)("i",{class:"vxe-button--dropdown-arrow "+(0,_ui.getIcon)().BUTTON_DROPDOWN})])),(0,_vue.h)(_vue.Teleport,{to:"body",disabled:!x||!d},[(0,_vue.h)("div",Object.assign({ref:j,class:["vxe-button--dropdown-panel",i?_xeUtils.default.isFunction(i)?i({$button:z}):i:"",{["size--"+O]:O,"ani--leave":c,"ani--enter":p}],placement:w.panelPlacement,style:w.panelStyle},e),d&&(p||c)?[(0,_vue.h)("div",{class:"vxe-button--dropdown-wrapper",onMousedown:W,onClick:H},s&&!p?[]:y({}))]:[])])])):l?(0,_vue.h)((0,_vue.resolveComponent)("router-link"),{ref:I,class:["vxe-button","vxe-button--link","type--"+b,n?"align--"+n:"",t?_xeUtils.default.isFunction(t)?t({$button:z}):t:"",{["size--"+O]:O,["theme--"+g]:g,"is--round":m,"is--circle":f,"is--disabled":h||v,"is--loading":v}],title:u,name:r,type:_?a:"button",disabled:h||v,to:l,onClick:D,onMouseenter:q,onMouseleave:F},{default(){return Y()}}):(0,_vue.h)("button",{ref:I,class:["vxe-button","type--"+b,n?"align--"+n:"",t?_xeUtils.default.isFunction(t)?t({$button:z}):t:"",{["size--"+O]:O,["theme--"+g]:g,"is--round":m,"is--circle":f,"is--disabled":h||v,"is--loading":v}],title:u,name:r,type:_?a:"button",disabled:h||v,onClick:D,onMouseenter:q,onMouseleave:F},Y()):(0,_vue.createCommentVNode)()},(0,_vue.onMounted)(()=>{"development"===process.env.NODE_ENV&&"text"===N.type&&(0,_log.warnLog)("vxe.error.delProp",["type=text","mode=text"]),_ui.globalEvents.on(z,"mousewheel",f),_ui.globalEvents.on(z,"mousedown",x)}),(0,_vue.onUnmounted)(()=>{_ui.globalEvents.off(z,"mousewheel"),_ui.globalEvents.off(z,"mousedown")}),z},render(){return this.renderVN()}});

package/lib/button-group/style/style.css

@@ -1,3 +1,9 @@
 .vxe-button-group {
   display: inline-flex;
+}
+.vxe-button-group.is--vertical {
+  flex-direction: column;
+}
+.vxe-button-group.is--vertical .vxe-button {
+  margin: 0;
 }

package/lib/button-group/style/style.min.css

@@ -1 +1 @@
-.vxe-button-group{display:inline-flex}
+.vxe-button-group{display:inline-flex}.vxe-button-group.is--vertical{flex-direction:column}.vxe-button-group.is--vertical .vxe-button{margin:0}

package/lib/date-picker/src/date-picker.js

@@ -618,6 +618,10 @@ var _default = exports.default = (0, _vue.defineComponent)({
       return immediate;
     });
     const updateModelValue = modelValue => {
+      const {
+        isActivated,
+        visiblePanel
+      } = reactData;
       let val = '';
       if (modelValue) {
         if (_xeUtils.default.isNumber(modelValue) && /^[0-9]{11,15}$/.test(`${modelValue}`)) {
@@ -627,6 +631,9 @@ var _default = exports.default = (0, _vue.defineComponent)({
         }
       }
       reactData.inputValue = val;
+      if (isActivated && visiblePanel) {
+        dateOpenPanel();
+      }
     };
     const parseDate = (value, format) => {
       const {
@@ -2052,49 +2059,75 @@ var _default = exports.default = (0, _vue.defineComponent)({
         panelStyle
       } = reactData;
       const vSize = computeSize.value;
-      const isDatePickerType = computeIsDatePickerType.value;
       const btnTransfer = computeBtnTransfer.value;
+      const headerSlot = slots.header;
+      const footerSlot = slots.footer;
+      const topSlot = slots.top;
+      const bottomSlot = slots.bottom;
+      const leftSlot = slots.left;
+      const rightSlot = slots.right;
       const renders = [];
-      if (isDatePickerType) {
-        if (type === 'datetime') {
-          renders.push((0, _vue.h)('div', {
-            key: type,
-            ref: refPanelWrapper,
-            class: 'vxe-date-picker--panel-layout-wrapper'
-          }, [(0, _vue.h)('div', {
-            class: 'vxe-date-picker--panel-left-wrapper'
-          }, renderDatePanel()), (0, _vue.h)('div', {
-            class: 'vxe-date-picker--panel-right-wrapper'
-          }, renderTimePanel())]));
-        } else if (type === 'time') {
-          renders.push((0, _vue.h)('div', {
-            key: type,
-            ref: refPanelWrapper,
-            class: 'vxe-date-picker--panel-wrapper'
-          }, renderTimePanel()));
-        } else {
-          renders.push((0, _vue.h)('div', {
-            key: type || 'default',
-            ref: refPanelWrapper,
-            class: 'vxe-date-picker--panel-wrapper'
-          }, renderDatePanel()));
-        }
-        return (0, _vue.h)(_vue.Teleport, {
-          to: 'body',
-          disabled: btnTransfer ? !initialized : true
+      if (type === 'datetime') {
+        renders.push((0, _vue.h)('div', {
+          key: type,
+          ref: refPanelWrapper,
+          class: 'vxe-date-picker--panel-datetime-layout-wrapper'
         }, [(0, _vue.h)('div', {
-          ref: refInputPanel,
-          class: ['vxe-table--ignore-clear vxe-date-picker--panel', `type--${type}`, {
-            [`size--${vSize}`]: vSize,
-            'is--transfer': btnTransfer,
-            'ani--leave': isAniVisible,
-            'ani--enter': visiblePanel
-          }],
-          placement: panelPlacement,
-          style: panelStyle
-        }, initialized && (visiblePanel || isAniVisible) ? renders : [])]);
-      }
-      return (0, _vue.createCommentVNode)();
+          class: 'vxe-date-picker--panel-datetime-left-wrapper'
+        }, renderDatePanel()), (0, _vue.h)('div', {
+          class: 'vxe-date-picker--panel-datetime-right-wrapper'
+        }, renderTimePanel())]));
+      } else if (type === 'time') {
+        renders.push((0, _vue.h)('div', {
+          key: type,
+          ref: refPanelWrapper,
+          class: 'vxe-date-picker--panel-wrapper'
+        }, renderTimePanel()));
+      } else {
+        renders.push((0, _vue.h)('div', {
+          key: type || 'default',
+          ref: refPanelWrapper,
+          class: 'vxe-date-picker--panel-wrapper'
+        }, renderDatePanel()));
+      }
+      return (0, _vue.h)(_vue.Teleport, {
+        to: 'body',
+        disabled: btnTransfer ? !initialized : true
+      }, [(0, _vue.h)('div', {
+        ref: refInputPanel,
+        class: ['vxe-table--ignore-clear vxe-date-picker--panel', `type--${type}`, {
+          [`size--${vSize}`]: vSize,
+          'is--transfer': btnTransfer,
+          'ani--leave': isAniVisible,
+          'ani--enter': visiblePanel,
+          'show--top': !!(topSlot || headerSlot),
+          'show--bottom': !!(bottomSlot || footerSlot),
+          'show--left': !!leftSlot,
+          'show--right': !!rightSlot
+        }],
+        placement: panelPlacement,
+        style: panelStyle
+      }, initialized && (visiblePanel || isAniVisible) ? [(0, _vue.h)('div', {
+        class: 'vxe-date-picker--panel-layout-wrapper'
+      }, [topSlot ? (0, _vue.h)('div', {
+        class: 'vxe-date-picker--panel-top-wrapper'
+      }, topSlot({})) : (0, _ui.renderEmptyElement)($xeDatePicker), (0, _vue.h)('div', {
+        class: 'vxe-date-picker--panel-body-layout-wrapper'
+      }, [leftSlot ? (0, _vue.h)('div', {
+        class: 'vxe-date-picker--panel-left-wrapper'
+      }, leftSlot({})) : (0, _ui.renderEmptyElement)($xeDatePicker), (0, _vue.h)('div', {
+        class: 'vxe-date-picker--panel-body-content-wrapper'
+      }, [headerSlot ? (0, _vue.h)('div', {
+        class: 'vxe-date-picker--panel-header-wrapper'
+      }, headerSlot({})) : (0, _ui.renderEmptyElement)($xeDatePicker), (0, _vue.h)('div', {
+        class: 'vxe-date-picker--panel-body-wrapper'
+      }, renders), footerSlot ? (0, _vue.h)('div', {
+        class: 'vxe-date-picker--panel-footer-wrapper'
+      }, footerSlot({})) : (0, _ui.renderEmptyElement)($xeDatePicker)]), rightSlot ? (0, _vue.h)('div', {
+        class: 'vxe-date-picker--panel-right-wrapper'
+      }, rightSlot({})) : (0, _ui.renderEmptyElement)($xeDatePicker)]), bottomSlot ? (0, _vue.h)('div', {
+        class: 'vxe-date-picker--panel-bottom-wrapper'
+      }, bottomSlot({})) : (0, _ui.renderEmptyElement)($xeDatePicker)])] : [])]);
     };
     const renderPrefixIcon = () => {
       const {

package/lib/date-picker/src/date-picker.min.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=void 0;var _vue=require("vue"),_xeUtils=_interopRequireDefault(require("xe-utils")),_ui=require("../../ui"),_utils=require("../../ui/src/utils"),_dom=require("../../ui/src/dom"),_util=require("./util"),_vn=require("../..//ui/src/vn");function _interopRequireDefault(e){return e&&e.__esModule?e:{default:e}}var _default=exports.default=(0,_vue.defineComponent)({name:"VxeDatePicker",props:{modelValue:[String,Number,Date],immediate:{type:Boolean,default:!0},name:String,type:{type:String,default:"date"},clearable:{type:Boolean,default:()=>(0,_ui.getConfig)().datePicker.clearable},readonly:{type:Boolean,default:null},disabled:{type:Boolean,default:null},placeholder:String,maxLength:[String,Number],autoComplete:{type:String,default:"off"},align:String,form:String,className:String,size:{type:String,default:()=>(0,_ui.getConfig)().datePicker.size||(0,_ui.getConfig)().size},multiple:Boolean,startDate:{type:[String,Number,Date],default:()=>(0,_ui.getConfig)().datePicker.startDate},endDate:{type:[String,Number,Date],default:()=>(0,_ui.getConfig)().datePicker.endDate},minDate:[String,Number,Date],maxDate:[String,Number,Date],startDay:{type:[String,Number],default:()=>(0,_ui.getConfig)().datePicker.startDay},labelFormat:String,valueFormat:String,editable:{type:Boolean,default:!0},festivalMethod:{type:Function,default:()=>(0,_ui.getConfig)().datePicker.festivalMethod},disabledMethod:{type:Function,default:()=>(0,_ui.getConfig)().datePicker.disabledMethod},selectDay:{type:[String,Number],default:()=>(0,_ui.getConfig)().datePicker.selectDay},prefixIcon:String,suffixIcon:String,placement:String,transfer:{type:Boolean,default:null},startWeek:Number,maxlength:[String,Number],autocomplete:String},emits:["update:modelValue","input","change","keydown","keyup","wheel","click","focus","blur","clear","prefix-click","suffix-click","date-prev","date-today","date-next"],setup(A,e){const{slots:T,emit:N}=e,W=(0,_vue.inject)("$xeModal",null),w=(0,_vue.inject)("$xeDrawer",null),M=(0,_vue.inject)("$xeTable",null),a=(0,_vue.inject)("$xeForm",null),l=(0,_vue.inject)("xeFormItemInfo",null);var C=_xeUtils.default.uniqueId();const F=(0,_ui.useSize)(A)["computeSize"],Y=(0,_vue.reactive)({initialized:!1,panelIndex:0,visiblePanel:!1,isAniVisible:!1,panelStyle:{},panelPlacement:"",isActivated:!1,inputValue:"",datetimePanelValue:null,datePanelValue:null,datePanelLabel:"",datePanelType:"day",selectMonth:null,currentDate:null}),c={yearSize:12,monthSize:20,quarterSize:8,hpTimeout:void 0},b=(0,_vue.ref)(),k=(0,_vue.ref)(),B=(0,_vue.ref)(),U=(0,_vue.ref)(),R=(0,_vue.ref)(),z={refElem:b,refInput:k},i={xID:C,props:A,context:e,reactData:Y,internalData:c,getRefMaps:()=>z};let s={};const G=(0,_vue.computed)(()=>{var e=A["transfer"];if(null===e){var t=(0,_ui.getConfig)().datePicker.transfer;if(_xeUtils.default.isBoolean(t))return t;if(M||W||w||a)return!0}return e}),D=(0,_vue.computed)(()=>{var e=A["readonly"];return null===e?!!a&&a.props.readonly:e}),P=(0,_vue.computed)(()=>{var e=A["disabled"];return null===e?!!a&&a.props.disabled:e}),v=(0,_vue.computed)(()=>{var e=A["type"];return"time"===e||"datetime"===e}),S=(0,_vue.computed)(()=>{return v.value||-1<["date","week","month","quarter","year"].indexOf(A.type)}),j=(0,_vue.computed)(()=>A.clearable),$=(0,_vue.computed)(()=>A.startDate?_xeUtils.default.toStringDate(A.startDate):null),Q=(0,_vue.computed)(()=>A.endDate?_xeUtils.default.toStringDate(A.endDate):null),Z=(0,_vue.computed)(()=>-1<["date","week","month","quarter","year"].indexOf(A.type)),L=(0,_vue.computed)(()=>{var{modelValue:e,multiple:t}=A,a=S.value;const l=o.value;return t&&e&&a?_xeUtils.default.toValueString(e).split(",").map(e=>{e=p(e,l);return _xeUtils.default.isValidDate(e),e}):[]}),J=(0,_vue.computed)(()=>{var e=L.value;const t=o.value;return e.map(e=>_xeUtils.default.toDateString(e,t))}),u=(0,_vue.computed)(()=>{var e=L.value;const t=n.value;return e.map(e=>_xeUtils.default.toDateString(e,t)).join(", ")}),o=(0,_vue.computed)(()=>{var{type:e,valueFormat:t}=A;return t||("time"===e?"HH:mm:ss":"datetime"===e?"yyyy-MM-dd HH:mm:ss":"yyyy-MM-dd")}),q=(0,_vue.computed)(()=>{var e=A["modelValue"],t=S.value,a=o.value;let l=null;return l=e&&t&&(t=p(e,a),_xeUtils.default.isValidDate(t))?t:l}),X=(0,_vue.computed)(()=>{var e=$.value,t=Y["selectMonth"];return!(!t||!e)&&t<=e}),ee=(0,_vue.computed)(()=>{var e=Q.value,t=Y["selectMonth"];return!(!t||!e)&&e<=t}),te=(0,_vue.computed)(()=>{var e=Y["datetimePanelValue"],t=xe.value;return e?_xeUtils.default.toDateString(e,t?"HH:mm:ss":"HH:mm"):""}),ae=(0,_vue.computed)(()=>{var e=q.value,t=v.value;return e&&t?1e3*(3600*e.getHours()+60*e.getMinutes()+e.getSeconds()):0}),n=(0,_vue.computed)(()=>{var e=A["labelFormat"];return S.value?e||(0,_ui.getI18n)("vxe.input.date.labelFormat."+A.type):null}),r=(0,_vue.computed)(()=>{var t=c["yearSize"],{selectMonth:e,currentDate:a}=Y,l=[];if(e&&a){var u=a.getFullYear(),a=e.getFullYear(),i=new Date(a-a%t,0,1);for(let e=-4;e<t+4;e++){var r=_xeUtils.default.getWhatYear(i,e,"first"),s=r.getFullYear();l.push({date:r,isCurrent:!0,isPrev:e<0,isNow:u===s,isNext:e>=t,year:s})}}return l}),le=(0,_vue.computed)(()=>{if(S.value){var{datePanelType:a,selectMonth:l}=Y,u=r.value;let e="",t;return l&&(e=l.getFullYear(),t=l.getMonth()+1),"quarter"===a?(0,_ui.getI18n)("vxe.input.date.quarterLabel",[e]):"month"===a?(0,_ui.getI18n)("vxe.input.date.monthLabel",[e]):"year"===a?u.length?u[0].year+" - "+u[u.length-1].year:"":(0,_ui.getI18n)("vxe.input.date.dayLabel",[e,t?(0,_ui.getI18n)("vxe.input.date.m"+t):"-"])}return""}),g=(0,_vue.computed)(()=>{var{startDay:e,startWeek:t}=A;return _xeUtils.default.toNumber(_xeUtils.default.isNumber(e)||_xeUtils.default.isString(e)?e:t)}),ue=(0,_vue.computed)(()=>{var a=[];if(S.value){let t=g.value;a.push(t);for(let e=0;e<6;e++)6<=t?t=0:t++,a.push(t)}return a}),ie=(0,_vue.computed)(()=>{return S.value?ue.value.map(e=>({value:e,label:(0,_ui.getI18n)("vxe.input.date.weeks.w"+e)})):[]}),re=(0,_vue.computed)(()=>{var e;return S.value?(e=ie.value,[{label:(0,_ui.getI18n)("vxe.input.date.weeks.w")}].concat(e)):[]}),se=(0,_vue.computed)(()=>{var e=r.value;return _xeUtils.default.chunk(e,4)}),ne=(0,_vue.computed)(()=>{var t=c["quarterSize"],{selectMonth:e,currentDate:a}=Y,l=[];if(e&&a){var u=a.getFullYear(),i=(0,_util.getDateQuarter)(a),r=_xeUtils.default.getWhatYear(e,0,"first"),s=r.getFullYear();for(let e=-2;e<t-2;e++){var n=_xeUtils.default.getWhatQuarter(r,e),d=n.getFullYear(),v=(0,_util.getDateQuarter)(n),o=d<s;l.push({date:n,isPrev:o,isCurrent:d===s,isNow:d===u&&v===i,isNext:!o&&s<d,quarter:v})}}return l}),de=(0,_vue.computed)(()=>{var e=ne.value;return _xeUtils.default.chunk(e,2)}),ve=(0,_vue.computed)(()=>{var t=c["monthSize"],{selectMonth:a,currentDate:e}=Y,l=[];if(a&&e){var u=e.getFullYear(),i=e.getMonth(),r=_xeUtils.default.getWhatYear(a,0,"first").getFullYear();for(let e=-4;e<t-4;e++){var s=_xeUtils.default.getWhatYear(a,0,e),n=s.getFullYear(),d=s.getMonth(),v=n<r;l.push({date:s,isPrev:v,isCurrent:n===r,isNow:n===u&&d===i,isNext:!v&&r<n,month:d})}}return l}),oe=(0,_vue.computed)(()=>{var e=ve.value;return _xeUtils.default.chunk(e,4)}),ce=(0,_vue.computed)(()=>{var{selectMonth:t,currentDate:e}=Y,a=[];if(t&&e){var l=ae.value,u=ue.value,i=e.getFullYear(),r=e.getMonth(),s=e.getDate(),n=t.getFullYear(),d=t.getMonth(),e=t.getDay(),u=-u.indexOf(e),v=new Date(_xeUtils.default.getWhatDay(t,u).getTime()+l);for(let e=0;e<42;e++){var o=_xeUtils.default.getWhatDay(v,e),c=o.getFullYear(),p=o.getMonth(),_=o.getDate(),f=o<t;a.push({date:o,isPrev:f,isCurrent:c===n&&p===d,isNow:c===i&&p===r&&_===s,isNext:!f&&d!==p,label:_})}}return a}),pe=(0,_vue.computed)(()=>{var e=ce.value;return _xeUtils.default.chunk(e,7)}),_e=(0,_vue.computed)(()=>{var e=pe.value;const a=g.value;return e.map(e=>{var t=e[0];return[{date:t.date,isWeekNumber:!0,isPrev:!1,isCurrent:!1,isNow:!1,isNext:!1,label:_xeUtils.default.getYearWeek(t.date,a)}].concat(e)})}),fe=(0,_vue.computed)(()=>{var t=[];if(v.value)for(let e=0;e<24;e++)t.push({value:e,label:(""+e).padStart(2,"0")});return t}),me=(0,_vue.computed)(()=>{var t=[];if(v.value)for(let e=0;e<60;e++)t.push({value:e,label:(""+e).padStart(2,"0")});return t}),he=(0,_vue.computed)(()=>{var e=o.value;return!/HH/.test(e)||/mm/.test(e)}),xe=(0,_vue.computed)(()=>{var e=o.value;return!/HH/.test(e)||/ss/.test(e)}),ge=(0,_vue.computed)(()=>{return me.value}),ye=(0,_vue.computed)(()=>{var{type:e,editable:t,multiple:a}=A;return D.value||a||!t||"week"===e||"quarter"===e}),be=(0,_vue.computed)(()=>"text"),ke=(0,_vue.computed)(()=>{var e=A["placeholder"];return(e=e||(0,_ui.getConfig)().datePicker.placeholder)?(0,_utils.getFuncText)(e):(0,_ui.getI18n)("vxe.base.pleaseSelect")}),d=(0,_vue.computed)(()=>{var e=A["immediate"];return e}),Ue=e=>{let t="";e&&(t=_xeUtils.default.isNumber(e)&&/^[0-9]{11,15}$/.test(""+e)?new Date(e):e),Y.inputValue=t},p=(e,t)=>{var a=A["type"];return"time"===a?(0,_util.toStringTimeDate)(e):_xeUtils.default.toStringDate(e,t)},t=e=>{var t=Y["inputValue"];s.dispatchEvent(e.type,{value:t},e)},_=(e,t)=>{Y.inputValue=e,N("update:modelValue",e),_xeUtils.default.toValueString(A.modelValue)!==e&&(s.dispatchEvent("change",{value:e},t),a)&&l&&a.triggerItemEvent(t,l.itemConfig.field,e)},De=e=>{var t=S.value,a=d.value,l=e.target.value;Y.inputValue=l,t||(a?_(l,e):s.dispatchEvent("input",{value:l},e))},Pe=e=>{d.value||t(e)},Se=e=>{Y.isActivated=!0,S.value&&V(e),t(e)},Ee=e=>{var t;P.value||(t=Y["inputValue"],s.dispatchEvent("prefix-click",{value:t},e))},y=()=>new Promise(e=>{Y.visiblePanel=!1,c.hpTimeout=window.setTimeout(()=>{Y.isAniVisible=!1,e()},350)}),Ve=(e,t)=>{S.value&&y(),_("",e),s.dispatchEvent("clear",{value:t},e)},Te=e=>{var t;P.value||(t=Y["inputValue"],s.dispatchEvent("suffix-click",{value:t},e))},f=e=>{var t=A["type"],a=n.value,l=o.value,u=g.value;let i=null,r="";e&&(i=p(e,l)),_xeUtils.default.isValidDate(i)?(r=_xeUtils.default.toDateString(i,a,{firstDay:u}),a&&"week"===t&&(e=_xeUtils.default.getYearWeek(i,u),(l=_xeUtils.default.getWhatWeek(i,0,1===e?(6+u)%7:u,u).getFullYear())!==i.getFullYear())&&-1<(t=a.indexOf("yyyy"))&&(e=Number(r.substring(t,t+4)))&&!isNaN(e)&&(r=r.replace(""+e,""+l))):i=null,Y.datePanelValue=i,Y.datePanelLabel=r},Ne=()=>{var e=S.value,t=Y["inputValue"];e&&(f(t),Y.inputValue=A.multiple?u.value:Y.datePanelLabel)},We=()=>{var e=S.value;Ue(A.modelValue),e&&Ne()},we=()=>{Y.inputValue=A.multiple?u.value:Y.datePanelLabel},m=e=>{var t=g.value,a=_xeUtils.default.getYearWeek(e,t),t=_xeUtils.default.getWhatWeek(e,0,t,t),a=_xeUtils.default.getWhatMonth(1===a?_xeUtils.default.getWhatDay(t,6):e,0,"first");_xeUtils.default.isEqual(a,Y.selectMonth)||(Y.selectMonth=a)},h=t=>{var{modelValue:e,multiple:a}=A;const l=Y["datetimePanelValue"];var u=v.value;const i=o.value;var r=g.value;"week"===A.type?(n=_xeUtils.default.toNumber(A.selectDay),t=_xeUtils.default.getWhatWeek(t,0,n,r)):u&&l&&(t.setHours(l.getHours()),t.setMinutes(l.getMinutes()),t.setSeconds(l.getSeconds()));const s=_xeUtils.default.toDateString(t,i,{firstDay:r});if(m(t),a){var n=J.value;if(u){r=[...L.value];const d=[];a=_xeUtils.default.findIndexOf(r,e=>_xeUtils.default.isDateSame(t,e,"yyyyMMdd"));-1===a?r.push(t):r.splice(a,1),r.forEach(e=>{e&&(l&&(e.setHours(l.getHours()),e.setMinutes(l.getMinutes()),e.setSeconds(l.getSeconds())),d.push(e))}),_(d.map(e=>_xeUtils.default.toDateString(e,i)).join(","),{type:"update"})}else n.some(e=>_xeUtils.default.isEqual(e,s))?_(n.filter(e=>!_xeUtils.default.isEqual(e,s)).join(","),{type:"update"}):_(n.concat([s]).join(","),{type:"update"})}else _xeUtils.default.isEqual(e,s)||_(s,{type:"update"})},E=()=>{var a=A["type"],{inputValue:l,datetimePanelValue:u}=Y,i=n.value;if(!ye.value)if(l){let t=p(l,i);if(_xeUtils.default.isValidDate(t))if("time"===a)l!==(t=_xeUtils.default.toDateString(t,i))&&_(t,{type:"check"}),Y.inputValue=t;else{let e=!1;var r=g.value;"datetime"===a?(a=q.value,l===_xeUtils.default.toDateString(a,i)&&l===_xeUtils.default.toDateString(t,i)||(e=!0,u&&(u.setHours(t.getHours()),u.setMinutes(t.getMinutes()),u.setSeconds(t.getSeconds())))):e=!0,Y.inputValue=_xeUtils.default.toDateString(t,i,{firstDay:r}),e&&h(t)}else we()}else _("",{type:"check"})},Me=e=>{var t=Y["inputValue"];d.value||_(t,e),E(),Y.visiblePanel||(Y.isActivated=!1),s.dispatchEvent("blur",{value:t},e),a&&l&&a.triggerItemEvent(e,l.itemConfig.field,t)},Ce=e=>{t(e)},Ae=e=>{t(e)},Ye=e=>{t(e)},Le=(e,t)=>{var a=g.value,l=_xeUtils.default.getYearWeek(e,a),a=_xeUtils.default.getWhatWeek(e,0,a,a),l=_xeUtils.default.getWhatMonth(1===l?_xeUtils.default.getWhatDay(a,6):e,t,"first");Y.selectMonth=l},qe=()=>{var e=_xeUtils.default.getWhatDay(Date.now(),0,"first");Y.currentDate=e,Le(e,0)},Ie=()=>{let e=Y["datePanelType"];e="month"===e||"quarter"===e?"year":"month",Y.datePanelType=e},Oe=t=>{var a=A["type"],{datePanelType:l,selectMonth:u,inputValue:i}=Y,r=c["yearSize"];if(!X.value){let e;e="year"===a?_xeUtils.default.getWhatYear(u,-r,"first"):"month"===a||"quarter"===a?"year"===l?_xeUtils.default.getWhatYear(u,-r,"first"):_xeUtils.default.getWhatYear(u,-1,"first"):"year"===l?_xeUtils.default.getWhatYear(u,-r,"first"):"month"===l?_xeUtils.default.getWhatYear(u,-1,"first"):_xeUtils.default.getWhatMonth(u,-1,"first"),Y.selectMonth=e,s.dispatchEvent("date-prev",{viewType:l,viewDate:e,value:i,type:a},t)}},Ke=e=>{qe(),A.multiple||(h(Y.currentDate),y()),s.dispatchEvent("date-today",{type:A.type},e)},He=t=>{var a=A["type"],{datePanelType:l,selectMonth:u,inputValue:i}=Y,r=c["yearSize"];if(!ee.value){let e;e="year"===a?_xeUtils.default.getWhatYear(u,r,"first"):"month"===a||"quarter"===a?"year"===l?_xeUtils.default.getWhatYear(u,r,"first"):_xeUtils.default.getWhatYear(u,1,"first"):"year"===l?_xeUtils.default.getWhatYear(u,r,"first"):"month"===l?_xeUtils.default.getWhatYear(u,1,"first"):_xeUtils.default.getWhatMonth(u,1,"first"),Y.selectMonth=e,s.dispatchEvent("date-next",{viewType:l,value:i,type:a},t)}},I=e=>{var t=A["disabledMethod"],a=Y["datePanelType"],l=$.value,u=Q.value,e=e["date"];return!!(l&&l.getTime()>e.getTime())||!!(u&&u.getTime()<e.getTime())||!!t&&t({type:a,viewType:a,date:e,$datePicker:i})},Fe=e=>{var{type:t,multiple:a}=A,l=Y["datePanelType"];"month"===t?"year"===l?(Y.datePanelType="month",m(e)):(h(e),a||y()):"year"===t?(h(e),a||y()):"quarter"===t?"year"===l?(Y.datePanelType="quarter",m(e)):(h(e),a||y()):"month"===l?(Y.datePanelType="week"===t?t:"day",m(e)):"year"===l?(Y.datePanelType="month",m(e)):(h(e),"datetime"===t||a||y())},O=e=>{I(e)||Fe(e.date)},Be=t=>{I({date:t})||(ce.value.some(e=>_xeUtils.default.isDateSame(e.date,t,"yyyyMMdd"))||m(t),f(t))},Re=t=>{I({date:t})||(r.value.some(e=>_xeUtils.default.isDateSame(e.date,t,"yyyy"))||m(t),f(t))},ze=t=>{I({date:t})||(ne.value.some(e=>_xeUtils.default.isDateSame(e.date,t,"yyyyq"))||m(t),f(t))},Ge=t=>{I({date:t})||(ve.value.some(e=>_xeUtils.default.isDateSame(e.date,t,"yyyyMM"))||m(t),f(t))},K=e=>{var t;I(e)||(t=Y["datePanelType"],("month"===t?Ge:"quarter"===t?ze:"year"===t?Re:Be)(e.date))},je=e=>{var t;e&&(t=e.offsetHeight,e.parentNode.scrollTop=e.offsetTop-4*t)},x=e=>{var t=Y["datetimePanelValue"];Y.datetimePanelValue=t?new Date(t.getTime()):new Date,je(e.currentTarget)},$e=()=>{var e=A["multiple"];const t=Y["datetimePanelValue"];var a=q.value,l=v.value;if(l){const u=o.value;if(e){e=J.value;if(l){l=[...L.value];const i=[];l.forEach(e=>{e&&(t&&(e.setHours(t.getHours()),e.setMinutes(t.getMinutes()),e.setSeconds(t.getSeconds())),i.push(e))}),_(i.map(e=>_xeUtils.default.toDateString(e,u)).join(","),{type:"update"})}else _(e.join(","),{type:"update"})}else h(a||Y.currentDate)}y()},Qe=()=>(0,_vue.nextTick)().then(()=>{var l=A["placement"],u=Y["panelIndex"],i=k.value,r=B.value,e=G.value;if(i&&r){var s=i.offsetHeight,n=i.offsetWidth,d=r.offsetHeight,r=r.offsetWidth,u={zIndex:u},{boundingTop:i,boundingLeft:v,visibleHeight:o,visibleWidth:c}=(0,_dom.getAbsolutePos)(i);let a="bottom";if(e){let e=v,t=i+s;"top"===l?(a="top",t=i-d):l||(t+d+5>o&&(a="top",t=i-d),t<5&&(a="bottom",t=i+s)),e+r+5>c&&(e-=e+r+5-c),e<5&&(e=5),Object.assign(u,{left:e+"px",top:t+"px",minWidth:n+"px"})}else"top"===l?(a="top",u.bottom=s+"px"):l||(u.top=s+"px",o<i+s+d&&5<i-s-d&&(a="top",u.top="",u.bottom=s+"px"));return Y.panelStyle=u,Y.panelPlacement=a,(0,_vue.nextTick)()}}),Ze=()=>{var e=Y["visiblePanel"],t=P.value,a=S.value;return(t||e?(0,_vue.nextTick):(Y.initialized||(Y.initialized=!0),c.hpTimeout&&(clearTimeout(c.hpTimeout),c.hpTimeout=void 0),Y.isActivated=!0,Y.isAniVisible=!0,a&&(t=A.type,e=v.value,a=q.value,-1<["year","quarter","month","week"].indexOf(t)?Y.datePanelType=t:Y.datePanelType="day",Y.currentDate=_xeUtils.default.getWhatDay(Date.now(),0,"first"),a?(Le(a,0),f(a)):qe(),e)&&(Y.datetimePanelValue=Y.datePanelValue||_xeUtils.default.getWhatDay(Date.now(),0,"first"),(0,_vue.nextTick)(()=>{var e=R.value;_xeUtils.default.arrayEach(e.querySelectorAll("li.is--selected"),e=>{je(e)})})),setTimeout(()=>{Y.visiblePanel=!0},10),Y.panelIndex<(0,_utils.getLastZIndex)()&&(Y.panelIndex=(0,_utils.nextZIndex)()),Qe))()},V=e=>{D.value||(e.preventDefault(),Ze())},Je=e=>{t(e)},Xe=e=>{var{visiblePanel:t,isActivated:a}=Y,l=S.value,u=b.value,i=U.value;!P.value&&a&&(Y.isActivated=(0,_dom.getEventTargetNode)(e,u).flag||(0,_dom.getEventTargetNode)(e,i).flag,Y.isActivated||(l?t&&(y(),E()):E()))},et=t=>{var a=A["clearable"],l=Y["visiblePanel"],u=S.value;if(!P.value){var i=_ui.globalEvents.hasKey(t,_ui.GLOBAL_EVENT_KEYS.TAB),r=_ui.globalEvents.hasKey(t,_ui.GLOBAL_EVENT_KEYS.DELETE),s=_ui.globalEvents.hasKey(t,_ui.GLOBAL_EVENT_KEYS.ESCAPE),n=_ui.globalEvents.hasKey(t,_ui.GLOBAL_EVENT_KEYS.ENTER),d=_ui.globalEvents.hasKey(t,_ui.GLOBAL_EVENT_KEYS.ARROW_LEFT),v=_ui.globalEvents.hasKey(t,_ui.GLOBAL_EVENT_KEYS.ARROW_UP),o=_ui.globalEvents.hasKey(t,_ui.GLOBAL_EVENT_KEYS.ARROW_RIGHT),c=_ui.globalEvents.hasKey(t,_ui.GLOBAL_EVENT_KEYS.ARROW_DOWN),p=_ui.globalEvents.hasKey(t,_ui.GLOBAL_EVENT_KEYS.PAGE_UP),_=_ui.globalEvents.hasKey(t,_ui.GLOBAL_EVENT_KEYS.PAGE_DOWN),d=d||v||o||c;let e=Y.isActivated;if(i)e&&E(),e=!1,Y.isActivated=e;else if(d){if(u&&e)if(l){var o=t,{isActivated:d,datePanelValue:f,datePanelType:m}=Y;if(d){o.preventDefault();var d=_ui.globalEvents.hasKey(o,_ui.GLOBAL_EVENT_KEYS.ARROW_LEFT),h=_ui.globalEvents.hasKey(o,_ui.GLOBAL_EVENT_KEYS.ARROW_UP),x=_ui.globalEvents.hasKey(o,_ui.GLOBAL_EVENT_KEYS.ARROW_RIGHT),o=_ui.globalEvents.hasKey(o,_ui.GLOBAL_EVENT_KEYS.ARROW_DOWN);if("year"===m){let e=_xeUtils.default.getWhatYear(f||Date.now(),0,"first");d?e=_xeUtils.default.getWhatYear(e,-1):h?e=_xeUtils.default.getWhatYear(e,-4):x?e=_xeUtils.default.getWhatYear(e,1):o&&(e=_xeUtils.default.getWhatYear(e,4)),Re(e)}else if("quarter"===m){let e=_xeUtils.default.getWhatQuarter(f||Date.now(),0,"first");d?e=_xeUtils.default.getWhatQuarter(e,-1):h?e=_xeUtils.default.getWhatQuarter(e,-2):x?e=_xeUtils.default.getWhatQuarter(e,1):o&&(e=_xeUtils.default.getWhatQuarter(e,2)),ze(e)}else if("month"===m){let e=_xeUtils.default.getWhatMonth(f||Date.now(),0,"first");d?e=_xeUtils.default.getWhatMonth(e,-1):h?e=_xeUtils.default.getWhatMonth(e,-4):x?e=_xeUtils.default.getWhatMonth(e,1):o&&(e=_xeUtils.default.getWhatMonth(e,4)),Ge(e)}else{let e=f||_xeUtils.default.getWhatDay(Date.now(),0,"first");m=g.value;d?e=_xeUtils.default.getWhatDay(e,-1):h?e=_xeUtils.default.getWhatWeek(e,-1,m):x?e=_xeUtils.default.getWhatDay(e,1):o&&(e=_xeUtils.default.getWhatWeek(e,1,m)),Be(e)}}}else(v||c)&&V(t)}else n?u&&(l?Y.datePanelValue?Fe(Y.datePanelValue):y():e&&V(t)):(p||_)&&u&&e&&(f=t,d=Y.isActivated)&&(d=_ui.globalEvents.hasKey(f,_ui.GLOBAL_EVENT_KEYS.PAGE_UP),f.preventDefault(),(d?Oe:He)(f));i||s?l&&y():r&&a&&e&&Ve(t,null)}},tt=e=>{var t=Y["visiblePanel"];P.value||t&&(t=U.value,((0,_dom.getEventTargetNode)(e,t).flag?Qe:(y(),E))())},at=()=>{var{isActivated:e,visiblePanel:t}=Y;t?(y(),E()):e&&E()};s={dispatchEvent:(e,t,a)=>{N(e,(0,_ui.createEvent)(a,{$datePicker:i},t))},focus(){var e=k.value;return Y.isActivated=!0,e.focus(),(0,_vue.nextTick)()},blur(){return k.value.blur(),(Y.isActivated=!1,_vue.nextTick)()},select(){return k.value.select(),(Y.isActivated=!1,_vue.nextTick)()},showPanel:Ze,hidePanel:y,updatePlacement:Qe},Object.assign(i,s);const H=(e,t)=>{var a,l=A["festivalMethod"];return l?(a=Y["datePanelType"],e=(a=(l=l({type:a,viewType:a,date:e.date,$datePicker:i}))?_xeUtils.default.isString(l)?{label:l}:l:{}).extra?_xeUtils.default.isString(a.extra)?{label:a.extra}:a.extra:null,l=[(0,_vue.h)("span",{class:["vxe-date-picker--date-label",{"is-notice":a.notice}]},e&&e.label?[(0,_vue.h)("span",""+t),(0,_vue.h)("span",{class:["vxe-date-picker--date-label--extra",e.important?"is-important":"",e.className],style:e.style},_xeUtils.default.toValueString(e.label))]:""+t)],(e=a.label)&&(e=_xeUtils.default.toValueString(e).split(","),l.push((0,_vue.h)("span",{class:["vxe-date-picker--date-festival",a.important?"is-important":"",a.className],style:a.style},[1<e.length?(0,_vue.h)("span",{class:["vxe-date-picker--date-festival--overlap","overlap--"+e.length]},e.map(e=>(0,_vue.h)("span",e.substring(0,3)))):(0,_vue.h)("span",{class:"vxe-date-picker--date-festival--label"},e[0].substring(0,3))]))),l):t},lt=()=>{var e=Y["datePanelType"];switch(e){case"week":{const i=A["multiple"],{datePanelType:r,datePanelValue:s}=Y,n=q.value;var t=re.value,a=_e.value;const d=L.value,v="yyyyMMdd";return[(0,_vue.h)("table",{class:`vxe-date-picker--date-${r}-view`,cellspacing:0,cellpadding:0,border:0},[(0,_vue.h)("thead",[(0,_vue.h)("tr",t.map(e=>(0,_vue.h)("th",e.label)))]),(0,_vue.h)("tbody",a.map(e=>{const t=i?e.some(t=>d.some(e=>_xeUtils.default.isDateSame(e,t.date,v))):e.some(e=>_xeUtils.default.isDateSame(n,e.date,v)),a=e.some(e=>_xeUtils.default.isDateSame(s,e.date,v));return(0,_vue.h)("tr",e.map(e=>(0,_vue.h)("td",{class:{"is--prev":e.isPrev,"is--current":e.isCurrent,"is--now":e.isNow,"is--next":e.isNext,"is--disabled":I(e),"is--selected":t,"is--hover":a},onClick:()=>O(e),onMouseenter:()=>K(e)},H(e,e.label))))}))])];return}case"month":{const o=A["multiple"],{datePanelType:c,datePanelValue:p}=Y,_=q.value;t=oe.value;const f=L.value,m="yyyyMM";return[(0,_vue.h)("table",{class:`vxe-date-picker--date-${c}-view`,cellspacing:0,cellpadding:0,border:0},[(0,_vue.h)("tbody",t.map(e=>(0,_vue.h)("tr",e.map(t=>(0,_vue.h)("td",{class:{"is--prev":t.isPrev,"is--current":t.isCurrent,"is--now":t.isNow,"is--next":t.isNext,"is--disabled":I(t),"is--selected":o?f.some(e=>_xeUtils.default.isDateSame(e,t.date,m)):_xeUtils.default.isDateSame(_,t.date,m),"is--hover":_xeUtils.default.isDateSame(p,t.date,m)},onClick:()=>O(t),onMouseenter:()=>K(t)},H(t,(0,_ui.getI18n)("vxe.input.date.months.m"+t.month)))))))])];return}case"quarter":{const h=A["multiple"],{datePanelType:x,datePanelValue:g}=Y,y=q.value;a=de.value;const b=L.value,k="yyyyq";return[(0,_vue.h)("table",{class:`vxe-date-picker--date-${x}-view`,cellspacing:0,cellpadding:0,border:0},[(0,_vue.h)("tbody",a.map(e=>(0,_vue.h)("tr",e.map(t=>(0,_vue.h)("td",{class:{"is--prev":t.isPrev,"is--current":t.isCurrent,"is--now":t.isNow,"is--next":t.isNext,"is--disabled":I(t),"is--selected":h?b.some(e=>_xeUtils.default.isDateSame(e,t.date,k)):_xeUtils.default.isDateSame(y,t.date,k),"is--hover":_xeUtils.default.isDateSame(g,t.date,k)},onClick:()=>O(t),onMouseenter:()=>K(t)},H(t,(0,_ui.getI18n)("vxe.input.date.quarters.q"+t.quarter)))))))])];return}case"year":{const U=A["multiple"],{datePanelType:D,datePanelValue:P}=Y,S=q.value;var l=se.value;const E=L.value,V="yyyy";return[(0,_vue.h)("table",{class:`vxe-date-picker--date-${D}-view`,cellspacing:0,cellpadding:0,border:0},[(0,_vue.h)("tbody",l.map(e=>(0,_vue.h)("tr",e.map(t=>(0,_vue.h)("td",{class:{"is--prev":t.isPrev,"is--current":t.isCurrent,"is--now":t.isNow,"is--next":t.isNext,"is--disabled":I(t),"is--selected":U?E.some(e=>_xeUtils.default.isDateSame(e,t.date,V)):_xeUtils.default.isDateSame(S,t.date,V),"is--hover":_xeUtils.default.isDateSame(P,t.date,V)},onClick:()=>O(t),onMouseenter:()=>K(t)},H(t,t.year))))))])];return}}{const T=A["multiple"],{datePanelType:N,datePanelValue:W}=Y,w=q.value;var e=ie.value,u=pe.value;const M=L.value,C="yyyyMMdd";return[(0,_vue.h)("table",{class:`vxe-date-picker--date-${N}-view`,cellspacing:0,cellpadding:0,border:0},[(0,_vue.h)("thead",[(0,_vue.h)("tr",e.map(e=>(0,_vue.h)("th",e.label)))]),(0,_vue.h)("tbody",u.map(e=>(0,_vue.h)("tr",e.map(t=>(0,_vue.h)("td",{class:{"is--prev":t.isPrev,"is--current":t.isCurrent,"is--now":t.isNow,"is--next":t.isNext,"is--disabled":I(t),"is--selected":T?M.some(e=>_xeUtils.default.isDateSame(e,t.date,C)):_xeUtils.default.isDateSame(w,t.date,C),"is--hover":_xeUtils.default.isDateSame(W,t.date,C)},onClick:()=>O(t),onMouseenter:()=>K(t)},H(t,t.label))))))])]}},ut=()=>{var e=A["multiple"],t=Y["datePanelType"],a=X.value,l=ee.value,u=le.value;return[(0,_vue.h)("div",{class:"vxe-date-picker--date-picker-header"},[(0,_vue.h)("div",{class:"vxe-date-picker--date-picker-type-wrapper"},["year"===t?(0,_vue.h)("span",{class:"vxe-date-picker--date-picker-label"},u):(0,_vue.h)("span",{class:"vxe-date-picker--date-picker-btn",onClick:Ie},u)]),(0,_vue.h)("div",{class:"vxe-date-picker--date-picker-btn-wrapper"},[(0,_vue.h)("span",{class:["vxe-date-picker--date-picker-btn vxe-date-picker--date-picker-prev-btn",{"is--disabled":a}],onClick:Oe},[(0,_vue.h)("i",{class:"vxe-icon-caret-left"})]),(0,_vue.h)("span",{class:"vxe-date-picker--date-picker-btn vxe-date-picker--date-picker-current-btn",onClick:Ke},[(0,_vue.h)("i",{class:"vxe-icon-dot"})]),(0,_vue.h)("span",{class:["vxe-date-picker--date-picker-btn vxe-date-picker--date-picker-next-btn",{"is--disabled":l}],onClick:He},[(0,_vue.h)("i",{class:"vxe-icon-caret-right"})]),e&&Z.value?(0,_vue.h)("span",{class:"vxe-date-picker--date-picker-btn vxe-date-picker--date-picker-confirm-btn"},[(0,_vue.h)("button",{class:"vxe-date-picker--date-picker-confirm",type:"button",onClick:$e},(0,_ui.getI18n)("vxe.button.confirm"))]):null])]),(0,_vue.h)("div",{class:"vxe-date-picker--date-picker-body"},lt())]},it=()=>{const t=Y["datetimePanelValue"];var e=te.value,a=fe.value,l=he.value,u=me.value,i=xe.value,r=ge.value;return[(0,_vue.h)("div",{class:"vxe-date-picker--time-picker-header"},[l?(0,_vue.h)("div",{class:"vxe-date-picker--time-picker-title"},e):(0,_vue.createCommentVNode)(),(0,_vue.h)("div",{class:"vxe-date-picker--time-picker-btn"},[(0,_vue.h)("button",{class:"vxe-date-picker--time-picker-confirm",type:"button",onClick:$e},(0,_ui.getI18n)("vxe.button.confirm"))])]),(0,_vue.h)("div",{ref:R,class:"vxe-date-picker--time-picker-body"},[(0,_vue.h)("ul",{class:"vxe-date-picker--time-picker-hour-list"},a.map((l,e)=>(0,_vue.h)("li",{key:e,class:{"is--selected":t&&t.getHours()===l.value},onClick:e=>{return e=e,t=l,(a=Y.datetimePanelValue)&&a.setHours(t.value),void x(e);var t,a}},l.label))),l?(0,_vue.h)("ul",{class:"vxe-date-picker--time-picker-minute-list"},u.map((l,e)=>(0,_vue.h)("li",{key:e,class:{"is--selected":t&&t.getMinutes()===l.value},onClick:e=>{return e=e,t=l,(a=Y.datetimePanelValue)&&a.setMinutes(t.value),void x(e);var t,a}},l.label))):(0,_vue.createCommentVNode)(),l&&i?(0,_vue.h)("ul",{class:"vxe-date-picker--time-picker-second-list"},r.map((l,e)=>(0,_vue.h)("li",{key:e,class:{"is--selected":t&&t.getSeconds()===l.value},onClick:e=>{return e=e,t=l,(a=Y.datetimePanelValue)&&a.setSeconds(t.value),void x(e);var t,a}},l.label))):(0,_vue.createCommentVNode)()])]},rt=()=>(0,_vue.h)("div",{class:"vxe-date-picker--control-icon",onClick:V},[(0,_vue.h)("i",{class:["vxe-date-picker--date-picker-icon",(0,_ui.getIcon)().DATE_PICKER_DATE]})]);return(0,_vue.watch)(()=>A.modelValue,e=>{Ue(e),Ne()}),(0,_vue.watch)(()=>A.type,()=>{Object.assign(Y,{inputValue:"",datetimePanelValue:null,datePanelValue:null,datePanelLabel:"",datePanelType:"day",selectMonth:null,currentDate:null}),We()}),(0,_vue.watch)(n,()=>{S.value&&(f(Y.datePanelValue),Y.inputValue=A.multiple?u.value:Y.datePanelLabel)}),(0,_vue.nextTick)(()=>{_ui.globalEvents.on(i,"mousewheel",tt),_ui.globalEvents.on(i,"mousedown",Xe),_ui.globalEvents.on(i,"keydown",et),_ui.globalEvents.on(i,"blur",at)}),(0,_vue.onUnmounted)(()=>{_ui.globalEvents.off(i,"mousewheel"),_ui.globalEvents.off(i,"mousedown"),_ui.globalEvents.off(i,"keydown"),_ui.globalEvents.off(i,"blur")}),We(),i.renderVN=()=>{var e,t,a,l,u,i,r,s,n,d,{className:v,type:o,align:c,name:p,autocomplete:_,autoComplete:f}=A,{inputValue:m,visiblePanel:h,isActivated:x}=Y,g=F.value,y=P.value;return D.value?(0,_vue.h)("div",{ref:b,class:["vxe-date-picker--readonly","type--"+o,v]},m):(e=ye.value,t=be.value,a=ke.value,l=j.value,i=A.prefixIcon,u=(u=T.prefix)||i?(0,_vue.h)("div",{class:"vxe-date-picker--prefix",onClick:Ee},[(0,_vue.h)("div",{class:"vxe-date-picker--prefix-icon"},u?(0,_vn.getSlotVNs)(u({})):[(0,_vue.h)("i",{class:i})])]):null,i=A.suffixIcon,r=Y.inputValue,s=T.suffix,n=P.value,d=j.value,n=(0,_vue.h)("div",{class:["vxe-date-picker--suffix",{"is--clear":d&&!n&&!(""===r||_xeUtils.default.eqNull(r))}]},[d?(0,_vue.h)("div",{class:"vxe-date-picker--clear-icon",onClick:Ve},[(0,_vue.h)("i",{class:(0,_ui.getIcon)().INPUT_CLEAR})]):(0,_vue.createCommentVNode)(),rt(),s||i?(0,_vue.h)("div",{class:"vxe-date-picker--suffix-icon",onClick:Te},s?(0,_vn.getSlotVNs)(s({})):[(0,_vue.h)("i",{class:i})]):(0,_vue.createCommentVNode)()]),(0,_vue.h)("div",{ref:b,class:["vxe-date-picker","type--"+o,v,{["size--"+g]:g,["is--"+c]:c,"is--prefix":!!u,"is--suffix":!!n,"is--visible":h,"is--disabled":y,"is--active":x,"show--clear":l&&!y&&!(""===m||_xeUtils.default.eqNull(m))}],spellcheck:!1},[u||(0,_vue.createCommentVNode)(),(0,_vue.h)("div",{class:"vxe-date-picker--wrapper"},[(0,_vue.h)("input",{ref:k,class:"vxe-date-picker--inner",value:m,name:p,type:t,placeholder:a,readonly:e,disabled:y,autocomplete:f||_,onKeydown:Ce,onKeyup:Ae,onWheel:Ye,onClick:Je,onInput:De,onChange:Pe,onFocus:Se,onBlur:Me})]),n||(0,_vue.createCommentVNode)(),(()=>{var e=A["type"],{initialized:t,isAniVisible:a,visiblePanel:l,panelPlacement:u,panelStyle:i}=Y,r=F.value,s=S.value,n=G.value,d=[];return s?(d.push("datetime"===e?(0,_vue.h)("div",{key:e,ref:U,class:"vxe-date-picker--panel-layout-wrapper"},[(0,_vue.h)("div",{class:"vxe-date-picker--panel-left-wrapper"},ut()),(0,_vue.h)("div",{class:"vxe-date-picker--panel-right-wrapper"},it())]):"time"===e?(0,_vue.h)("div",{key:e,ref:U,class:"vxe-date-picker--panel-wrapper"},it()):(0,_vue.h)("div",{key:e||"default",ref:U,class:"vxe-date-picker--panel-wrapper"},ut())),(0,_vue.h)(_vue.Teleport,{to:"body",disabled:!n||!t},[(0,_vue.h)("div",{ref:B,class:["vxe-table--ignore-clear vxe-date-picker--panel","type--"+e,{["size--"+r]:r,"is--transfer":n,"ani--leave":a,"ani--enter":l}],placement:u,style:i},t&&(l||a)?d:[])])):(0,_vue.createCommentVNode)()})()]))},i},render(){return this.renderVN()}});
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=void 0;var _vue=require("vue"),_xeUtils=_interopRequireDefault(require("xe-utils")),_ui=require("../../ui"),_utils=require("../../ui/src/utils"),_dom=require("../../ui/src/dom"),_util=require("./util"),_vn=require("../..//ui/src/vn");function _interopRequireDefault(e){return e&&e.__esModule?e:{default:e}}var _default=exports.default=(0,_vue.defineComponent)({name:"VxeDatePicker",props:{modelValue:[String,Number,Date],immediate:{type:Boolean,default:!0},name:String,type:{type:String,default:"date"},clearable:{type:Boolean,default:()=>(0,_ui.getConfig)().datePicker.clearable},readonly:{type:Boolean,default:null},disabled:{type:Boolean,default:null},placeholder:String,maxLength:[String,Number],autoComplete:{type:String,default:"off"},align:String,form:String,className:String,size:{type:String,default:()=>(0,_ui.getConfig)().datePicker.size||(0,_ui.getConfig)().size},multiple:Boolean,startDate:{type:[String,Number,Date],default:()=>(0,_ui.getConfig)().datePicker.startDate},endDate:{type:[String,Number,Date],default:()=>(0,_ui.getConfig)().datePicker.endDate},minDate:[String,Number,Date],maxDate:[String,Number,Date],startDay:{type:[String,Number],default:()=>(0,_ui.getConfig)().datePicker.startDay},labelFormat:String,valueFormat:String,editable:{type:Boolean,default:!0},festivalMethod:{type:Function,default:()=>(0,_ui.getConfig)().datePicker.festivalMethod},disabledMethod:{type:Function,default:()=>(0,_ui.getConfig)().datePicker.disabledMethod},selectDay:{type:[String,Number],default:()=>(0,_ui.getConfig)().datePicker.selectDay},prefixIcon:String,suffixIcon:String,placement:String,transfer:{type:Boolean,default:null},startWeek:Number,maxlength:[String,Number],autocomplete:String},emits:["update:modelValue","input","change","keydown","keyup","wheel","click","focus","blur","clear","prefix-click","suffix-click","date-prev","date-today","date-next"],setup(A,e){const{slots:b,emit:h}=e,x=(0,_vue.inject)("$xeModal",null),N=(0,_vue.inject)("$xeDrawer",null),W=(0,_vue.inject)("$xeTable",null),a=(0,_vue.inject)("$xeForm",null),l=(0,_vue.inject)("xeFormItemInfo",null);var M=_xeUtils.default.uniqueId();const C=(0,_ui.useSize)(A)["computeSize"],Y=(0,_vue.reactive)({initialized:!1,panelIndex:0,visiblePanel:!1,isAniVisible:!1,panelStyle:{},panelPlacement:"",isActivated:!1,inputValue:"",datetimePanelValue:null,datePanelValue:null,datePanelLabel:"",datePanelType:"day",selectMonth:null,currentDate:null}),p={yearSize:12,monthSize:20,quarterSize:8,hpTimeout:void 0},k=(0,_vue.ref)(),U=(0,_vue.ref)(),F=(0,_vue.ref)(),E=(0,_vue.ref)(),B=(0,_vue.ref)(),R={refElem:k,refInput:U},D={xID:M,props:A,context:e,reactData:Y,internalData:p,getRefMaps:()=>R};let s={};const z=(0,_vue.computed)(()=>{var e=A["transfer"];if(null===e){var t=(0,_ui.getConfig)().datePicker.transfer;if(_xeUtils.default.isBoolean(t))return t;if(W||x||N||a)return!0}return e}),P=(0,_vue.computed)(()=>{var e=A["readonly"];return null===e?!!a&&a.props.readonly:e}),S=(0,_vue.computed)(()=>{var e=A["disabled"];return null===e?!!a&&a.props.disabled:e}),v=(0,_vue.computed)(()=>{var e=A["type"];return"time"===e||"datetime"===e}),g=(0,_vue.computed)(()=>{return v.value||-1<["date","week","month","quarter","year"].indexOf(A.type)}),G=(0,_vue.computed)(()=>A.clearable),j=(0,_vue.computed)(()=>A.startDate?_xeUtils.default.toStringDate(A.startDate):null),$=(0,_vue.computed)(()=>A.endDate?_xeUtils.default.toStringDate(A.endDate):null),Q=(0,_vue.computed)(()=>-1<["date","week","month","quarter","year"].indexOf(A.type)),L=(0,_vue.computed)(()=>{var{modelValue:e,multiple:t}=A,a=g.value;const l=o.value;return t&&e&&a?_xeUtils.default.toValueString(e).split(",").map(e=>{e=d(e,l);return _xeUtils.default.isValidDate(e),e}):[]}),Z=(0,_vue.computed)(()=>{var e=L.value;const t=o.value;return e.map(e=>_xeUtils.default.toDateString(e,t))}),i=(0,_vue.computed)(()=>{var e=L.value;const t=n.value;return e.map(e=>_xeUtils.default.toDateString(e,t)).join(", ")}),o=(0,_vue.computed)(()=>{var{type:e,valueFormat:t}=A;return t||("time"===e?"HH:mm:ss":"datetime"===e?"yyyy-MM-dd HH:mm:ss":"yyyy-MM-dd")}),q=(0,_vue.computed)(()=>{var e=A["modelValue"],t=g.value,a=o.value;let l=null;return l=e&&t&&(t=d(e,a),_xeUtils.default.isValidDate(t))?t:l}),J=(0,_vue.computed)(()=>{var e=j.value,t=Y["selectMonth"];return!(!t||!e)&&t<=e}),X=(0,_vue.computed)(()=>{var e=$.value,t=Y["selectMonth"];return!(!t||!e)&&e<=t}),ee=(0,_vue.computed)(()=>{var e=Y["datetimePanelValue"],t=he.value;return e?_xeUtils.default.toDateString(e,t?"HH:mm:ss":"HH:mm"):""}),te=(0,_vue.computed)(()=>{var e=q.value,t=v.value;return e&&t?1e3*(3600*e.getHours()+60*e.getMinutes()+e.getSeconds()):0}),n=(0,_vue.computed)(()=>{var e=A["labelFormat"];return g.value?e||(0,_ui.getI18n)("vxe.input.date.labelFormat."+A.type):null}),u=(0,_vue.computed)(()=>{var t=p["yearSize"],{selectMonth:e,currentDate:a}=Y,l=[];if(e&&a){var i=a.getFullYear(),a=e.getFullYear(),u=new Date(a-a%t,0,1);for(let e=-4;e<t+4;e++){var r=_xeUtils.default.getWhatYear(u,e,"first"),s=r.getFullYear();l.push({date:r,isCurrent:!0,isPrev:e<0,isNow:i===s,isNext:e>=t,year:s})}}return l}),ae=(0,_vue.computed)(()=>{if(g.value){var{datePanelType:a,selectMonth:l}=Y,i=u.value;let e="",t;return l&&(e=l.getFullYear(),t=l.getMonth()+1),"quarter"===a?(0,_ui.getI18n)("vxe.input.date.quarterLabel",[e]):"month"===a?(0,_ui.getI18n)("vxe.input.date.monthLabel",[e]):"year"===a?i.length?i[0].year+" - "+i[i.length-1].year:"":(0,_ui.getI18n)("vxe.input.date.dayLabel",[e,t?(0,_ui.getI18n)("vxe.input.date.m"+t):"-"])}return""}),y=(0,_vue.computed)(()=>{var{startDay:e,startWeek:t}=A;return _xeUtils.default.toNumber(_xeUtils.default.isNumber(e)||_xeUtils.default.isString(e)?e:t)}),le=(0,_vue.computed)(()=>{var a=[];if(g.value){let t=y.value;a.push(t);for(let e=0;e<6;e++)6<=t?t=0:t++,a.push(t)}return a}),ie=(0,_vue.computed)(()=>{return g.value?le.value.map(e=>({value:e,label:(0,_ui.getI18n)("vxe.input.date.weeks.w"+e)})):[]}),ue=(0,_vue.computed)(()=>{var e;return g.value?(e=ie.value,[{label:(0,_ui.getI18n)("vxe.input.date.weeks.w")}].concat(e)):[]}),re=(0,_vue.computed)(()=>{var e=u.value;return _xeUtils.default.chunk(e,4)}),se=(0,_vue.computed)(()=>{var t=p["quarterSize"],{selectMonth:e,currentDate:a}=Y,l=[];if(e&&a){var i=a.getFullYear(),u=(0,_util.getDateQuarter)(a),r=_xeUtils.default.getWhatYear(e,0,"first"),s=r.getFullYear();for(let e=-2;e<t-2;e++){var n=_xeUtils.default.getWhatQuarter(r,e),d=n.getFullYear(),v=(0,_util.getDateQuarter)(n),o=d<s;l.push({date:n,isPrev:o,isCurrent:d===s,isNow:d===i&&v===u,isNext:!o&&s<d,quarter:v})}}return l}),ne=(0,_vue.computed)(()=>{var e=se.value;return _xeUtils.default.chunk(e,2)}),de=(0,_vue.computed)(()=>{var t=p["monthSize"],{selectMonth:a,currentDate:e}=Y,l=[];if(a&&e){var i=e.getFullYear(),u=e.getMonth(),r=_xeUtils.default.getWhatYear(a,0,"first").getFullYear();for(let e=-4;e<t-4;e++){var s=_xeUtils.default.getWhatYear(a,0,e),n=s.getFullYear(),d=s.getMonth(),v=n<r;l.push({date:s,isPrev:v,isCurrent:n===r,isNow:n===i&&d===u,isNext:!v&&r<n,month:d})}}return l}),ve=(0,_vue.computed)(()=>{var e=de.value;return _xeUtils.default.chunk(e,4)}),oe=(0,_vue.computed)(()=>{var{selectMonth:t,currentDate:e}=Y,a=[];if(t&&e){var l=te.value,i=le.value,u=e.getFullYear(),r=e.getMonth(),s=e.getDate(),n=t.getFullYear(),d=t.getMonth(),e=t.getDay(),i=-i.indexOf(e),v=new Date(_xeUtils.default.getWhatDay(t,i).getTime()+l);for(let e=0;e<42;e++){var o=_xeUtils.default.getWhatDay(v,e),p=o.getFullYear(),c=o.getMonth(),_=o.getDate(),f=o<t;a.push({date:o,isPrev:f,isCurrent:p===n&&c===d,isNow:p===u&&c===r&&_===s,isNext:!f&&d!==c,label:_})}}return a}),pe=(0,_vue.computed)(()=>{var e=oe.value;return _xeUtils.default.chunk(e,7)}),ce=(0,_vue.computed)(()=>{var e=pe.value;const a=y.value;return e.map(e=>{var t=e[0];return[{date:t.date,isWeekNumber:!0,isPrev:!1,isCurrent:!1,isNow:!1,isNext:!1,label:_xeUtils.default.getYearWeek(t.date,a)}].concat(e)})}),_e=(0,_vue.computed)(()=>{var t=[];if(v.value)for(let e=0;e<24;e++)t.push({value:e,label:(""+e).padStart(2,"0")});return t}),fe=(0,_vue.computed)(()=>{var t=[];if(v.value)for(let e=0;e<60;e++)t.push({value:e,label:(""+e).padStart(2,"0")});return t}),me=(0,_vue.computed)(()=>{var e=o.value;return!/HH/.test(e)||/mm/.test(e)}),he=(0,_vue.computed)(()=>{var e=o.value;return!/HH/.test(e)||/ss/.test(e)}),xe=(0,_vue.computed)(()=>{return fe.value}),ge=(0,_vue.computed)(()=>{var{type:e,editable:t,multiple:a}=A;return P.value||a||!t||"week"===e||"quarter"===e}),ye=(0,_vue.computed)(()=>"text"),be=(0,_vue.computed)(()=>{var e=A["placeholder"];return(e=e||(0,_ui.getConfig)().datePicker.placeholder)?(0,_utils.getFuncText)(e):(0,_ui.getI18n)("vxe.base.pleaseSelect")}),r=(0,_vue.computed)(()=>{var e=A["immediate"];return e}),ke=e=>{var{isActivated:t,visiblePanel:a}=Y;let l="";e&&(l=_xeUtils.default.isNumber(e)&&/^[0-9]{11,15}$/.test(""+e)?new Date(e):e),Y.inputValue=l,t&&a&&Qe()},d=(e,t)=>{var a=A["type"];return"time"===a?(0,_util.toStringTimeDate)(e):_xeUtils.default.toStringDate(e,t)},t=e=>{var t=Y["inputValue"];s.dispatchEvent(e.type,{value:t},e)},c=(e,t)=>{Y.inputValue=e,h("update:modelValue",e),_xeUtils.default.toValueString(A.modelValue)!==e&&(s.dispatchEvent("change",{value:e},t),a)&&l&&a.triggerItemEvent(t,l.itemConfig.field,e)},Ue=e=>{var t=g.value,a=r.value,l=e.target.value;Y.inputValue=l,t||(a?c(l,e):s.dispatchEvent("input",{value:l},e))},Ee=e=>{r.value||t(e)},De=e=>{Y.isActivated=!0,g.value&&T(e),t(e)},Pe=e=>{var t;S.value||(t=Y["inputValue"],s.dispatchEvent("prefix-click",{value:t},e))},V=()=>new Promise(e=>{Y.visiblePanel=!1,p.hpTimeout=window.setTimeout(()=>{Y.isAniVisible=!1,e()},350)}),Se=(e,t)=>{g.value&&V(),c("",e),s.dispatchEvent("clear",{value:t},e)},Ve=e=>{var t;S.value||(t=Y["inputValue"],s.dispatchEvent("suffix-click",{value:t},e))},_=e=>{var t=A["type"],a=n.value,l=o.value,i=y.value;let u=null,r="";e&&(u=d(e,l)),_xeUtils.default.isValidDate(u)?(r=_xeUtils.default.toDateString(u,a,{firstDay:i}),a&&"week"===t&&(e=_xeUtils.default.getYearWeek(u,i),(l=_xeUtils.default.getWhatWeek(u,0,1===e?(6+i)%7:i,i).getFullYear())!==u.getFullYear())&&-1<(t=a.indexOf("yyyy"))&&(e=Number(r.substring(t,t+4)))&&!isNaN(e)&&(r=r.replace(""+e,""+l))):u=null,Y.datePanelValue=u,Y.datePanelLabel=r},we=()=>{var e=g.value,t=Y["inputValue"];e&&(_(t),Y.inputValue=A.multiple?i.value:Y.datePanelLabel)},Te=()=>{var e=g.value;ke(A.modelValue),e&&we()},Ne=()=>{Y.inputValue=A.multiple?i.value:Y.datePanelLabel},f=e=>{var t=y.value,a=_xeUtils.default.getYearWeek(e,t),t=_xeUtils.default.getWhatWeek(e,0,t,t),a=_xeUtils.default.getWhatMonth(1===a?_xeUtils.default.getWhatDay(t,6):e,0,"first");_xeUtils.default.isEqual(a,Y.selectMonth)||(Y.selectMonth=a)},m=t=>{var{modelValue:e,multiple:a}=A;const l=Y["datetimePanelValue"];var i=v.value;const u=o.value;var r=y.value;"week"===A.type?(n=_xeUtils.default.toNumber(A.selectDay),t=_xeUtils.default.getWhatWeek(t,0,n,r)):i&&l&&(t.setHours(l.getHours()),t.setMinutes(l.getMinutes()),t.setSeconds(l.getSeconds()));const s=_xeUtils.default.toDateString(t,u,{firstDay:r});if(f(t),a){var n=Z.value;if(i){r=[...L.value];const d=[];a=_xeUtils.default.findIndexOf(r,e=>_xeUtils.default.isDateSame(t,e,"yyyyMMdd"));-1===a?r.push(t):r.splice(a,1),r.forEach(e=>{e&&(l&&(e.setHours(l.getHours()),e.setMinutes(l.getMinutes()),e.setSeconds(l.getSeconds())),d.push(e))}),c(d.map(e=>_xeUtils.default.toDateString(e,u)).join(","),{type:"update"})}else n.some(e=>_xeUtils.default.isEqual(e,s))?c(n.filter(e=>!_xeUtils.default.isEqual(e,s)).join(","),{type:"update"}):c(n.concat([s]).join(","),{type:"update"})}else _xeUtils.default.isEqual(e,s)||c(s,{type:"update"})},w=()=>{var a=A["type"],{inputValue:l,datetimePanelValue:i}=Y,u=n.value;if(!ge.value)if(l){let t=d(l,u);if(_xeUtils.default.isValidDate(t))if("time"===a)l!==(t=_xeUtils.default.toDateString(t,u))&&c(t,{type:"check"}),Y.inputValue=t;else{let e=!1;var r=y.value;"datetime"===a?(a=q.value,l===_xeUtils.default.toDateString(a,u)&&l===_xeUtils.default.toDateString(t,u)||(e=!0,i&&(i.setHours(t.getHours()),i.setMinutes(t.getMinutes()),i.setSeconds(t.getSeconds())))):e=!0,Y.inputValue=_xeUtils.default.toDateString(t,u,{firstDay:r}),e&&m(t)}else Ne()}else c("",{type:"check"})},We=e=>{var t=Y["inputValue"];r.value||c(t,e),w(),Y.visiblePanel||(Y.isActivated=!1),s.dispatchEvent("blur",{value:t},e),a&&l&&a.triggerItemEvent(e,l.itemConfig.field,t)},Me=e=>{t(e)},Ce=e=>{t(e)},Ae=e=>{t(e)},Ye=(e,t)=>{var a=y.value,l=_xeUtils.default.getYearWeek(e,a),a=_xeUtils.default.getWhatWeek(e,0,a,a),l=_xeUtils.default.getWhatMonth(1===l?_xeUtils.default.getWhatDay(a,6):e,t,"first");Y.selectMonth=l},Le=()=>{var e=_xeUtils.default.getWhatDay(Date.now(),0,"first");Y.currentDate=e,Ye(e,0)},qe=()=>{let e=Y["datePanelType"];e="month"===e||"quarter"===e?"year":"month",Y.datePanelType=e},Ie=t=>{var a=A["type"],{datePanelType:l,selectMonth:i,inputValue:u}=Y,r=p["yearSize"];if(!J.value){let e;e="year"===a?_xeUtils.default.getWhatYear(i,-r,"first"):"month"===a||"quarter"===a?"year"===l?_xeUtils.default.getWhatYear(i,-r,"first"):_xeUtils.default.getWhatYear(i,-1,"first"):"year"===l?_xeUtils.default.getWhatYear(i,-r,"first"):"month"===l?_xeUtils.default.getWhatYear(i,-1,"first"):_xeUtils.default.getWhatMonth(i,-1,"first"),Y.selectMonth=e,s.dispatchEvent("date-prev",{viewType:l,viewDate:e,value:u,type:a},t)}},Oe=e=>{Le(),A.multiple||(m(Y.currentDate),V()),s.dispatchEvent("date-today",{type:A.type},e)},Ke=t=>{var a=A["type"],{datePanelType:l,selectMonth:i,inputValue:u}=Y,r=p["yearSize"];if(!X.value){let e;e="year"===a?_xeUtils.default.getWhatYear(i,r,"first"):"month"===a||"quarter"===a?"year"===l?_xeUtils.default.getWhatYear(i,r,"first"):_xeUtils.default.getWhatYear(i,1,"first"):"year"===l?_xeUtils.default.getWhatYear(i,r,"first"):"month"===l?_xeUtils.default.getWhatYear(i,1,"first"):_xeUtils.default.getWhatMonth(i,1,"first"),Y.selectMonth=e,s.dispatchEvent("date-next",{viewType:l,value:u,type:a},t)}},I=e=>{var t=A["disabledMethod"],a=Y["datePanelType"],l=j.value,i=$.value,e=e["date"];return!!(l&&l.getTime()>e.getTime())||!!(i&&i.getTime()<e.getTime())||!!t&&t({type:a,viewType:a,date:e,$datePicker:D})},He=e=>{var{type:t,multiple:a}=A,l=Y["datePanelType"];"month"===t?"year"===l?(Y.datePanelType="month",f(e)):(m(e),a||V()):"year"===t?(m(e),a||V()):"quarter"===t?"year"===l?(Y.datePanelType="quarter",f(e)):(m(e),a||V()):"month"===l?(Y.datePanelType="week"===t?t:"day",f(e)):"year"===l?(Y.datePanelType="month",f(e)):(m(e),"datetime"===t||a||V())},O=e=>{I(e)||He(e.date)},Fe=t=>{I({date:t})||(oe.value.some(e=>_xeUtils.default.isDateSame(e.date,t,"yyyyMMdd"))||f(t),_(t))},Be=t=>{I({date:t})||(u.value.some(e=>_xeUtils.default.isDateSame(e.date,t,"yyyy"))||f(t),_(t))},Re=t=>{I({date:t})||(se.value.some(e=>_xeUtils.default.isDateSame(e.date,t,"yyyyq"))||f(t),_(t))},ze=t=>{I({date:t})||(de.value.some(e=>_xeUtils.default.isDateSame(e.date,t,"yyyyMM"))||f(t),_(t))},K=e=>{var t;I(e)||(t=Y["datePanelType"],("month"===t?ze:"quarter"===t?Re:"year"===t?Be:Fe)(e.date))},Ge=e=>{var t;e&&(t=e.offsetHeight,e.parentNode.scrollTop=e.offsetTop-4*t)},je=e=>{var t=Y["datetimePanelValue"];Y.datetimePanelValue=t?new Date(t.getTime()):new Date,Ge(e.currentTarget)},$e=()=>{var e=A["multiple"];const t=Y["datetimePanelValue"];var a=q.value,l=v.value;if(l){const i=o.value;if(e){e=Z.value;if(l){l=[...L.value];const u=[];l.forEach(e=>{e&&(t&&(e.setHours(t.getHours()),e.setMinutes(t.getMinutes()),e.setSeconds(t.getSeconds())),u.push(e))}),c(u.map(e=>_xeUtils.default.toDateString(e,i)).join(","),{type:"update"})}else c(e.join(","),{type:"update"})}else m(a||Y.currentDate)}V()},Qe=()=>{var e=A["type"],t=v.value,a=q.value;-1<["year","quarter","month","week"].indexOf(e)?Y.datePanelType=e:Y.datePanelType="day",Y.currentDate=_xeUtils.default.getWhatDay(Date.now(),0,"first"),a?(Ye(a,0),_(a)):Le(),t&&(Y.datetimePanelValue=Y.datePanelValue||_xeUtils.default.getWhatDay(Date.now(),0,"first"),(0,_vue.nextTick)(()=>{var e=B.value;_xeUtils.default.arrayEach(e.querySelectorAll("li.is--selected"),e=>{Ge(e)})}))},Ze=()=>(0,_vue.nextTick)().then(()=>{var l=A["placement"],i=Y["panelIndex"],u=U.value,r=F.value,e=z.value;if(u&&r){var s=u.offsetHeight,n=u.offsetWidth,d=r.offsetHeight,r=r.offsetWidth,i={zIndex:i},{boundingTop:u,boundingLeft:v,visibleHeight:o,visibleWidth:p}=(0,_dom.getAbsolutePos)(u);let a="bottom";if(e){let e=v,t=u+s;"top"===l?(a="top",t=u-d):l||(t+d+5>o&&(a="top",t=u-d),t<5&&(a="bottom",t=u+s)),e+r+5>p&&(e-=e+r+5-p),e<5&&(e=5),Object.assign(i,{left:e+"px",top:t+"px",minWidth:n+"px"})}else"top"===l?(a="top",i.bottom=s+"px"):l||(i.top=s+"px",o<u+s+d&&5<u-s-d&&(a="top",i.top="",i.bottom=s+"px"));return Y.panelStyle=i,Y.panelPlacement=a,(0,_vue.nextTick)()}}),Je=()=>{var e=Y["visiblePanel"],t=S.value,a=g.value;return(t||e?(0,_vue.nextTick):(Y.initialized||(Y.initialized=!0),p.hpTimeout&&(clearTimeout(p.hpTimeout),p.hpTimeout=void 0),Y.isActivated=!0,Y.isAniVisible=!0,a&&Qe(),setTimeout(()=>{Y.visiblePanel=!0},10),Y.panelIndex<(0,_utils.getLastZIndex)()&&(Y.panelIndex=(0,_utils.nextZIndex)()),Ze))()},T=e=>{P.value||(e.preventDefault(),Je())},Xe=e=>{t(e)},et=e=>{var{visiblePanel:t,isActivated:a}=Y,l=g.value,i=k.value,u=E.value;!S.value&&a&&(Y.isActivated=(0,_dom.getEventTargetNode)(e,i).flag||(0,_dom.getEventTargetNode)(e,u).flag,Y.isActivated||(l?t&&(V(),w()):w()))},tt=t=>{var a=A["clearable"],l=Y["visiblePanel"],i=g.value;if(!S.value){var u=_ui.globalEvents.hasKey(t,_ui.GLOBAL_EVENT_KEYS.TAB),r=_ui.globalEvents.hasKey(t,_ui.GLOBAL_EVENT_KEYS.DELETE),s=_ui.globalEvents.hasKey(t,_ui.GLOBAL_EVENT_KEYS.ESCAPE),n=_ui.globalEvents.hasKey(t,_ui.GLOBAL_EVENT_KEYS.ENTER),d=_ui.globalEvents.hasKey(t,_ui.GLOBAL_EVENT_KEYS.ARROW_LEFT),v=_ui.globalEvents.hasKey(t,_ui.GLOBAL_EVENT_KEYS.ARROW_UP),o=_ui.globalEvents.hasKey(t,_ui.GLOBAL_EVENT_KEYS.ARROW_RIGHT),p=_ui.globalEvents.hasKey(t,_ui.GLOBAL_EVENT_KEYS.ARROW_DOWN),c=_ui.globalEvents.hasKey(t,_ui.GLOBAL_EVENT_KEYS.PAGE_UP),_=_ui.globalEvents.hasKey(t,_ui.GLOBAL_EVENT_KEYS.PAGE_DOWN),d=d||v||o||p;let e=Y.isActivated;if(u)e&&w(),e=!1,Y.isActivated=e;else if(d){if(i&&e)if(l){var o=t,{isActivated:d,datePanelValue:f,datePanelType:m}=Y;if(d){o.preventDefault();var d=_ui.globalEvents.hasKey(o,_ui.GLOBAL_EVENT_KEYS.ARROW_LEFT),h=_ui.globalEvents.hasKey(o,_ui.GLOBAL_EVENT_KEYS.ARROW_UP),x=_ui.globalEvents.hasKey(o,_ui.GLOBAL_EVENT_KEYS.ARROW_RIGHT),o=_ui.globalEvents.hasKey(o,_ui.GLOBAL_EVENT_KEYS.ARROW_DOWN);if("year"===m){let e=_xeUtils.default.getWhatYear(f||Date.now(),0,"first");d?e=_xeUtils.default.getWhatYear(e,-1):h?e=_xeUtils.default.getWhatYear(e,-4):x?e=_xeUtils.default.getWhatYear(e,1):o&&(e=_xeUtils.default.getWhatYear(e,4)),Be(e)}else if("quarter"===m){let e=_xeUtils.default.getWhatQuarter(f||Date.now(),0,"first");d?e=_xeUtils.default.getWhatQuarter(e,-1):h?e=_xeUtils.default.getWhatQuarter(e,-2):x?e=_xeUtils.default.getWhatQuarter(e,1):o&&(e=_xeUtils.default.getWhatQuarter(e,2)),Re(e)}else if("month"===m){let e=_xeUtils.default.getWhatMonth(f||Date.now(),0,"first");d?e=_xeUtils.default.getWhatMonth(e,-1):h?e=_xeUtils.default.getWhatMonth(e,-4):x?e=_xeUtils.default.getWhatMonth(e,1):o&&(e=_xeUtils.default.getWhatMonth(e,4)),ze(e)}else{let e=f||_xeUtils.default.getWhatDay(Date.now(),0,"first");m=y.value;d?e=_xeUtils.default.getWhatDay(e,-1):h?e=_xeUtils.default.getWhatWeek(e,-1,m):x?e=_xeUtils.default.getWhatDay(e,1):o&&(e=_xeUtils.default.getWhatWeek(e,1,m)),Fe(e)}}}else(v||p)&&T(t)}else n?i&&(l?Y.datePanelValue?He(Y.datePanelValue):V():e&&T(t)):(c||_)&&i&&e&&(f=t,d=Y.isActivated)&&(d=_ui.globalEvents.hasKey(f,_ui.GLOBAL_EVENT_KEYS.PAGE_UP),f.preventDefault(),(d?Ie:Ke)(f));u||s?l&&V():r&&a&&e&&Se(t,null)}},at=e=>{var t=Y["visiblePanel"];S.value||t&&(t=E.value,((0,_dom.getEventTargetNode)(e,t).flag?Ze:(V(),w))())},lt=()=>{var{isActivated:e,visiblePanel:t}=Y;t?(V(),w()):e&&w()};s={dispatchEvent:(e,t,a)=>{h(e,(0,_ui.createEvent)(a,{$datePicker:D},t))},focus(){var e=U.value;return Y.isActivated=!0,e.focus(),(0,_vue.nextTick)()},blur(){return U.value.blur(),(Y.isActivated=!1,_vue.nextTick)()},select(){return U.value.select(),(Y.isActivated=!1,_vue.nextTick)()},showPanel:Je,hidePanel:V,updatePlacement:Ze},Object.assign(D,s);const H=(e,t)=>{var a,l=A["festivalMethod"];return l?(a=Y["datePanelType"],e=(a=(l=l({type:a,viewType:a,date:e.date,$datePicker:D}))?_xeUtils.default.isString(l)?{label:l}:l:{}).extra?_xeUtils.default.isString(a.extra)?{label:a.extra}:a.extra:null,l=[(0,_vue.h)("span",{class:["vxe-date-picker--date-label",{"is-notice":a.notice}]},e&&e.label?[(0,_vue.h)("span",""+t),(0,_vue.h)("span",{class:["vxe-date-picker--date-label--extra",e.important?"is-important":"",e.className],style:e.style},_xeUtils.default.toValueString(e.label))]:""+t)],(e=a.label)&&(e=_xeUtils.default.toValueString(e).split(","),l.push((0,_vue.h)("span",{class:["vxe-date-picker--date-festival",a.important?"is-important":"",a.className],style:a.style},[1<e.length?(0,_vue.h)("span",{class:["vxe-date-picker--date-festival--overlap","overlap--"+e.length]},e.map(e=>(0,_vue.h)("span",e.substring(0,3)))):(0,_vue.h)("span",{class:"vxe-date-picker--date-festival--label"},e[0].substring(0,3))]))),l):t},it=()=>{var e=Y["datePanelType"];switch(e){case"week":{const u=A["multiple"],{datePanelType:r,datePanelValue:s}=Y,n=q.value;var t=ue.value,a=ce.value;const d=L.value,v="yyyyMMdd";return[(0,_vue.h)("table",{class:`vxe-date-picker--date-${r}-view`,cellspacing:0,cellpadding:0,border:0},[(0,_vue.h)("thead",[(0,_vue.h)("tr",t.map(e=>(0,_vue.h)("th",e.label)))]),(0,_vue.h)("tbody",a.map(e=>{const t=u?e.some(t=>d.some(e=>_xeUtils.default.isDateSame(e,t.date,v))):e.some(e=>_xeUtils.default.isDateSame(n,e.date,v)),a=e.some(e=>_xeUtils.default.isDateSame(s,e.date,v));return(0,_vue.h)("tr",e.map(e=>(0,_vue.h)("td",{class:{"is--prev":e.isPrev,"is--current":e.isCurrent,"is--now":e.isNow,"is--next":e.isNext,"is--disabled":I(e),"is--selected":t,"is--hover":a},onClick:()=>O(e),onMouseenter:()=>K(e)},H(e,e.label))))}))])];return}case"month":{const o=A["multiple"],{datePanelType:p,datePanelValue:c}=Y,_=q.value;t=ve.value;const f=L.value,m="yyyyMM";return[(0,_vue.h)("table",{class:`vxe-date-picker--date-${p}-view`,cellspacing:0,cellpadding:0,border:0},[(0,_vue.h)("tbody",t.map(e=>(0,_vue.h)("tr",e.map(t=>(0,_vue.h)("td",{class:{"is--prev":t.isPrev,"is--current":t.isCurrent,"is--now":t.isNow,"is--next":t.isNext,"is--disabled":I(t),"is--selected":o?f.some(e=>_xeUtils.default.isDateSame(e,t.date,m)):_xeUtils.default.isDateSame(_,t.date,m),"is--hover":_xeUtils.default.isDateSame(c,t.date,m)},onClick:()=>O(t),onMouseenter:()=>K(t)},H(t,(0,_ui.getI18n)("vxe.input.date.months.m"+t.month)))))))])];return}case"quarter":{const h=A["multiple"],{datePanelType:x,datePanelValue:g}=Y,y=q.value;a=ne.value;const b=L.value,k="yyyyq";return[(0,_vue.h)("table",{class:`vxe-date-picker--date-${x}-view`,cellspacing:0,cellpadding:0,border:0},[(0,_vue.h)("tbody",a.map(e=>(0,_vue.h)("tr",e.map(t=>(0,_vue.h)("td",{class:{"is--prev":t.isPrev,"is--current":t.isCurrent,"is--now":t.isNow,"is--next":t.isNext,"is--disabled":I(t),"is--selected":h?b.some(e=>_xeUtils.default.isDateSame(e,t.date,k)):_xeUtils.default.isDateSame(y,t.date,k),"is--hover":_xeUtils.default.isDateSame(g,t.date,k)},onClick:()=>O(t),onMouseenter:()=>K(t)},H(t,(0,_ui.getI18n)("vxe.input.date.quarters.q"+t.quarter)))))))])];return}case"year":{const U=A["multiple"],{datePanelType:E,datePanelValue:D}=Y,P=q.value;var l=re.value;const S=L.value,V="yyyy";return[(0,_vue.h)("table",{class:`vxe-date-picker--date-${E}-view`,cellspacing:0,cellpadding:0,border:0},[(0,_vue.h)("tbody",l.map(e=>(0,_vue.h)("tr",e.map(t=>(0,_vue.h)("td",{class:{"is--prev":t.isPrev,"is--current":t.isCurrent,"is--now":t.isNow,"is--next":t.isNext,"is--disabled":I(t),"is--selected":U?S.some(e=>_xeUtils.default.isDateSame(e,t.date,V)):_xeUtils.default.isDateSame(P,t.date,V),"is--hover":_xeUtils.default.isDateSame(D,t.date,V)},onClick:()=>O(t),onMouseenter:()=>K(t)},H(t,t.year))))))])];return}}{const w=A["multiple"],{datePanelType:T,datePanelValue:N}=Y,W=q.value;var e=ie.value,i=pe.value;const M=L.value,C="yyyyMMdd";return[(0,_vue.h)("table",{class:`vxe-date-picker--date-${T}-view`,cellspacing:0,cellpadding:0,border:0},[(0,_vue.h)("thead",[(0,_vue.h)("tr",e.map(e=>(0,_vue.h)("th",e.label)))]),(0,_vue.h)("tbody",i.map(e=>(0,_vue.h)("tr",e.map(t=>(0,_vue.h)("td",{class:{"is--prev":t.isPrev,"is--current":t.isCurrent,"is--now":t.isNow,"is--next":t.isNext,"is--disabled":I(t),"is--selected":w?M.some(e=>_xeUtils.default.isDateSame(e,t.date,C)):_xeUtils.default.isDateSame(W,t.date,C),"is--hover":_xeUtils.default.isDateSame(N,t.date,C)},onClick:()=>O(t),onMouseenter:()=>K(t)},H(t,t.label))))))])]}},ut=()=>{var e=A["multiple"],t=Y["datePanelType"],a=J.value,l=X.value,i=ae.value;return[(0,_vue.h)("div",{class:"vxe-date-picker--date-picker-header"},[(0,_vue.h)("div",{class:"vxe-date-picker--date-picker-type-wrapper"},["year"===t?(0,_vue.h)("span",{class:"vxe-date-picker--date-picker-label"},i):(0,_vue.h)("span",{class:"vxe-date-picker--date-picker-btn",onClick:qe},i)]),(0,_vue.h)("div",{class:"vxe-date-picker--date-picker-btn-wrapper"},[(0,_vue.h)("span",{class:["vxe-date-picker--date-picker-btn vxe-date-picker--date-picker-prev-btn",{"is--disabled":a}],onClick:Ie},[(0,_vue.h)("i",{class:"vxe-icon-caret-left"})]),(0,_vue.h)("span",{class:"vxe-date-picker--date-picker-btn vxe-date-picker--date-picker-current-btn",onClick:Oe},[(0,_vue.h)("i",{class:"vxe-icon-dot"})]),(0,_vue.h)("span",{class:["vxe-date-picker--date-picker-btn vxe-date-picker--date-picker-next-btn",{"is--disabled":l}],onClick:Ke},[(0,_vue.h)("i",{class:"vxe-icon-caret-right"})]),e&&Q.value?(0,_vue.h)("span",{class:"vxe-date-picker--date-picker-btn vxe-date-picker--date-picker-confirm-btn"},[(0,_vue.h)("button",{class:"vxe-date-picker--date-picker-confirm",type:"button",onClick:$e},(0,_ui.getI18n)("vxe.button.confirm"))]):null])]),(0,_vue.h)("div",{class:"vxe-date-picker--date-picker-body"},it())]},rt=()=>{const t=Y["datetimePanelValue"];var e=ee.value,a=_e.value,l=me.value,i=fe.value,u=he.value,r=xe.value;return[(0,_vue.h)("div",{class:"vxe-date-picker--time-picker-header"},[l?(0,_vue.h)("div",{class:"vxe-date-picker--time-picker-title"},e):(0,_vue.createCommentVNode)(),(0,_vue.h)("div",{class:"vxe-date-picker--time-picker-btn"},[(0,_vue.h)("button",{class:"vxe-date-picker--time-picker-confirm",type:"button",onClick:$e},(0,_ui.getI18n)("vxe.button.confirm"))])]),(0,_vue.h)("div",{ref:B,class:"vxe-date-picker--time-picker-body"},[(0,_vue.h)("ul",{class:"vxe-date-picker--time-picker-hour-list"},a.map((l,e)=>(0,_vue.h)("li",{key:e,class:{"is--selected":t&&t.getHours()===l.value},onClick:e=>{return e=e,t=l,(a=Y.datetimePanelValue)&&a.setHours(t.value),void je(e);var t,a}},l.label))),l?(0,_vue.h)("ul",{class:"vxe-date-picker--time-picker-minute-list"},i.map((l,e)=>(0,_vue.h)("li",{key:e,class:{"is--selected":t&&t.getMinutes()===l.value},onClick:e=>{return e=e,t=l,(a=Y.datetimePanelValue)&&a.setMinutes(t.value),void je(e);var t,a}},l.label))):(0,_vue.createCommentVNode)(),l&&u?(0,_vue.h)("ul",{class:"vxe-date-picker--time-picker-second-list"},r.map((l,e)=>(0,_vue.h)("li",{key:e,class:{"is--selected":t&&t.getSeconds()===l.value},onClick:e=>{return e=e,t=l,(a=Y.datetimePanelValue)&&a.setSeconds(t.value),void je(e);var t,a}},l.label))):(0,_vue.createCommentVNode)()])]},st=()=>(0,_vue.h)("div",{class:"vxe-date-picker--control-icon",onClick:T},[(0,_vue.h)("i",{class:["vxe-date-picker--date-picker-icon",(0,_ui.getIcon)().DATE_PICKER_DATE]})]);return(0,_vue.watch)(()=>A.modelValue,e=>{ke(e),we()}),(0,_vue.watch)(()=>A.type,()=>{Object.assign(Y,{inputValue:"",datetimePanelValue:null,datePanelValue:null,datePanelLabel:"",datePanelType:"day",selectMonth:null,currentDate:null}),Te()}),(0,_vue.watch)(n,()=>{g.value&&(_(Y.datePanelValue),Y.inputValue=A.multiple?i.value:Y.datePanelLabel)}),(0,_vue.nextTick)(()=>{_ui.globalEvents.on(D,"mousewheel",at),_ui.globalEvents.on(D,"mousedown",et),_ui.globalEvents.on(D,"keydown",tt),_ui.globalEvents.on(D,"blur",lt)}),(0,_vue.onUnmounted)(()=>{_ui.globalEvents.off(D,"mousewheel"),_ui.globalEvents.off(D,"mousedown"),_ui.globalEvents.off(D,"keydown"),_ui.globalEvents.off(D,"blur")}),Te(),D.renderVN=()=>{var e,t,a,l,i,u,r,s,n,d,{className:v,type:o,align:p,name:c,autocomplete:_,autoComplete:f}=A,{inputValue:m,visiblePanel:h,isActivated:x}=Y,g=C.value,y=S.value;return P.value?(0,_vue.h)("div",{ref:k,class:["vxe-date-picker--readonly","type--"+o,v]},m):(e=ge.value,t=ye.value,a=be.value,l=G.value,u=A.prefixIcon,i=(i=b.prefix)||u?(0,_vue.h)("div",{class:"vxe-date-picker--prefix",onClick:Pe},[(0,_vue.h)("div",{class:"vxe-date-picker--prefix-icon"},i?(0,_vn.getSlotVNs)(i({})):[(0,_vue.h)("i",{class:u})])]):null,u=A.suffixIcon,r=Y.inputValue,s=b.suffix,n=S.value,d=G.value,n=(0,_vue.h)("div",{class:["vxe-date-picker--suffix",{"is--clear":d&&!n&&!(""===r||_xeUtils.default.eqNull(r))}]},[d?(0,_vue.h)("div",{class:"vxe-date-picker--clear-icon",onClick:Se},[(0,_vue.h)("i",{class:(0,_ui.getIcon)().INPUT_CLEAR})]):(0,_vue.createCommentVNode)(),st(),s||u?(0,_vue.h)("div",{class:"vxe-date-picker--suffix-icon",onClick:Ve},s?(0,_vn.getSlotVNs)(s({})):[(0,_vue.h)("i",{class:u})]):(0,_vue.createCommentVNode)()]),(0,_vue.h)("div",{ref:k,class:["vxe-date-picker","type--"+o,v,{["size--"+g]:g,["is--"+p]:p,"is--prefix":!!i,"is--suffix":!!n,"is--visible":h,"is--disabled":y,"is--active":x,"show--clear":l&&!y&&!(""===m||_xeUtils.default.eqNull(m))}],spellcheck:!1},[i||(0,_vue.createCommentVNode)(),(0,_vue.h)("div",{class:"vxe-date-picker--wrapper"},[(0,_vue.h)("input",{ref:U,class:"vxe-date-picker--inner",value:m,name:c,type:t,placeholder:a,readonly:e,disabled:y,autocomplete:f||_,onKeydown:Me,onKeyup:Ce,onWheel:Ae,onClick:Xe,onInput:Ue,onChange:Ee,onFocus:De,onBlur:We})]),n||(0,_vue.createCommentVNode)(),(()=>{var e=A["type"],{initialized:t,isAniVisible:a,visiblePanel:l,panelPlacement:i,panelStyle:u}=Y,r=C.value,s=z.value,n=b.header,d=b.footer,v=b.top,o=b.bottom,p=b.left,c=b.right,_=[];return _.push("datetime"===e?(0,_vue.h)("div",{key:e,ref:E,class:"vxe-date-picker--panel-datetime-layout-wrapper"},[(0,_vue.h)("div",{class:"vxe-date-picker--panel-datetime-left-wrapper"},ut()),(0,_vue.h)("div",{class:"vxe-date-picker--panel-datetime-right-wrapper"},rt())]):"time"===e?(0,_vue.h)("div",{key:e,ref:E,class:"vxe-date-picker--panel-wrapper"},rt()):(0,_vue.h)("div",{key:e||"default",ref:E,class:"vxe-date-picker--panel-wrapper"},ut())),(0,_vue.h)(_vue.Teleport,{to:"body",disabled:!s||!t},[(0,_vue.h)("div",{ref:F,class:["vxe-table--ignore-clear vxe-date-picker--panel","type--"+e,{["size--"+r]:r,"is--transfer":s,"ani--leave":a,"ani--enter":l,"show--top":!(!v&&!n),"show--bottom":!(!o&&!d),"show--left":!!p,"show--right":!!c}],placement:i,style:u},t&&(l||a)?[(0,_vue.h)("div",{class:"vxe-date-picker--panel-layout-wrapper"},[v?(0,_vue.h)("div",{class:"vxe-date-picker--panel-top-wrapper"},v({})):(0,_ui.renderEmptyElement)(D),(0,_vue.h)("div",{class:"vxe-date-picker--panel-body-layout-wrapper"},[p?(0,_vue.h)("div",{class:"vxe-date-picker--panel-left-wrapper"},p({})):(0,_ui.renderEmptyElement)(D),(0,_vue.h)("div",{class:"vxe-date-picker--panel-body-content-wrapper"},[n?(0,_vue.h)("div",{class:"vxe-date-picker--panel-header-wrapper"},n({})):(0,_ui.renderEmptyElement)(D),(0,_vue.h)("div",{class:"vxe-date-picker--panel-body-wrapper"},_),d?(0,_vue.h)("div",{class:"vxe-date-picker--panel-footer-wrapper"},d({})):(0,_ui.renderEmptyElement)(D)]),c?(0,_vue.h)("div",{class:"vxe-date-picker--panel-right-wrapper"},c({})):(0,_ui.renderEmptyElement)(D)]),o?(0,_vue.h)("div",{class:"vxe-date-picker--panel-bottom-wrapper"},o({})):(0,_ui.renderEmptyElement)(D)])]:[])])})()]))},D},render(){return this.renderVN()}});

package/lib/date-picker/style/style.css

@@ -153,12 +153,9 @@
   transform: scaleY(1);
 }
 
-.vxe-date-picker--panel {
-  pointer-events: none;
-}
-
-.vxe-date-picker--panel-wrapper,
 .vxe-date-picker--panel-layout-wrapper {
+  display: flex;
+  flex-direction: column;
   pointer-events: auto;
   background-color: var(--vxe-ui-layout-background-color);
   border: 1px solid var(--vxe-ui-base-popup-border-color);
@@ -166,12 +163,79 @@
   border-radius: var(--vxe-ui-base-border-radius);
 }
 
+.vxe-date-picker--panel-body-layout-wrapper {
+  display: flex;
+  flex-direction: row;
+  white-space: nowrap;
+}
+
+.vxe-date-picker--panel-body-content-wrapper,
+.vxe-date-picker--panel-body-layout-wrapper,
+.vxe-date-picker--panel-body-wrapper {
+  flex-grow: 1;
+}
+
+.vxe-date-picker--panel-top-wrapper,
+.vxe-date-picker--panel-bottom-wrapper,
+.vxe-date-picker--panel-left-wrapper,
+.vxe-date-picker--panel-right-wrapper,
+.vxe-date-picker--panel-header-wrapper,
+.vxe-date-picker--panel-footer-wrapper {
+  flex-shrink: 0;
+}
+
+.vxe-date-picker--panel {
+  pointer-events: none;
+}
+.vxe-date-picker--panel.show--top .vxe-date-picker--panel-wrapper,
+.vxe-date-picker--panel.show--top .vxe-date-picker--panel-datetime-layout-wrapper, .vxe-date-picker--panel.show--right .vxe-date-picker--panel-wrapper,
+.vxe-date-picker--panel.show--right .vxe-date-picker--panel-datetime-layout-wrapper {
+  border-top-right-radius: 0;
+}
+.vxe-date-picker--panel.show--right .vxe-date-picker--panel-wrapper,
+.vxe-date-picker--panel.show--right .vxe-date-picker--panel-datetime-layout-wrapper, .vxe-date-picker--panel.show--bottom .vxe-date-picker--panel-wrapper,
+.vxe-date-picker--panel.show--bottom .vxe-date-picker--panel-datetime-layout-wrapper {
+  border-bottom-right-radius: 0;
+}
+.vxe-date-picker--panel.show--bottom .vxe-date-picker--panel-wrapper,
+.vxe-date-picker--panel.show--bottom .vxe-date-picker--panel-datetime-layout-wrapper, .vxe-date-picker--panel.show--left .vxe-date-picker--panel-wrapper,
+.vxe-date-picker--panel.show--left .vxe-date-picker--panel-datetime-layout-wrapper {
+  border-bottom-left-radius: 0;
+}
+.vxe-date-picker--panel.show--top .vxe-date-picker--panel-wrapper,
+.vxe-date-picker--panel.show--top .vxe-date-picker--panel-datetime-layout-wrapper, .vxe-date-picker--panel.show--left .vxe-date-picker--panel-wrapper,
+.vxe-date-picker--panel.show--left .vxe-date-picker--panel-datetime-layout-wrapper {
+  border-top-left-radius: 0;
+}
+.vxe-date-picker--panel.show--top .vxe-date-picker--panel-wrapper,
+.vxe-date-picker--panel.show--top .vxe-date-picker--panel-datetime-layout-wrapper {
+  border-top-width: 1px;
+}
+.vxe-date-picker--panel.show--bottom .vxe-date-picker--panel-wrapper,
+.vxe-date-picker--panel.show--bottom .vxe-date-picker--panel-datetime-layout-wrapper {
+  border-bottom-width: 1px;
+}
+.vxe-date-picker--panel.show--left .vxe-date-picker--panel-wrapper,
+.vxe-date-picker--panel.show--left .vxe-date-picker--panel-datetime-layout-wrapper {
+  border-left-width: 1px;
+}
+.vxe-date-picker--panel.show--right .vxe-date-picker--panel-wrapper,
+.vxe-date-picker--panel.show--right .vxe-date-picker--panel-datetime-layout-wrapper {
+  border-right-width: 1px;
+}
+
+.vxe-date-picker--panel-wrapper,
+.vxe-date-picker--panel-datetime-layout-wrapper {
+  border: 0 solid var(--vxe-ui-base-popup-border-color);
+  border-radius: var(--vxe-ui-base-border-radius);
+}
+
 .vxe-date-picker--panel-wrapper {
   overflow-x: hidden;
   overflow-y: auto;
 }
 
-.vxe-date-picker--panel-layout-wrapper {
+.vxe-date-picker--panel-datetime-layout-wrapper {
   display: inline-flex;
   flex-direction: row;
 }
@@ -181,7 +245,7 @@
      -moz-user-select: none;
           user-select: none;
 }
-.vxe-date-picker--panel.type--datetime .vxe-date-picker--panel-right-wrapper {
+.vxe-date-picker--panel.type--datetime .vxe-date-picker--panel-datetime-right-wrapper {
   display: flex;
   flex-direction: column;
   border-left: 1px solid var(--vxe-ui-input-border-color);
@@ -550,11 +614,11 @@
   display: inline-flex;
   flex-direction: column;
 }
-.vxe-date-picker--panel.type--datetime .vxe-date-picker--panel-left-wrapper {
+.vxe-date-picker--panel.type--datetime .vxe-date-picker--panel-datetime-left-wrapper {
   width: 336px;
 }
-.vxe-date-picker--panel.type--datetime .vxe-date-picker--panel-left-wrapper,
-.vxe-date-picker--panel.type--datetime .vxe-date-picker--panel-right-wrapper {
+.vxe-date-picker--panel.type--datetime .vxe-date-picker--panel-datetime-left-wrapper,
+.vxe-date-picker--panel.type--datetime .vxe-date-picker--panel-datetime-right-wrapper {
   padding: 11px;
 }
 .vxe-date-picker--panel .vxe-date-picker--time-picker-title {
@@ -644,11 +708,11 @@
   display: inline-flex;
   flex-direction: column;
 }
-.vxe-date-picker--panel.size--medium.type--datetime .vxe-date-picker--panel-left-wrapper {
+.vxe-date-picker--panel.size--medium.type--datetime .vxe-date-picker--panel-datetime-left-wrapper {
   width: 336px;
 }
-.vxe-date-picker--panel.size--medium.type--datetime .vxe-date-picker--panel-left-wrapper,
-.vxe-date-picker--panel.size--medium.type--datetime .vxe-date-picker--panel-right-wrapper {
+.vxe-date-picker--panel.size--medium.type--datetime .vxe-date-picker--panel-datetime-left-wrapper,
+.vxe-date-picker--panel.size--medium.type--datetime .vxe-date-picker--panel-datetime-right-wrapper {
   padding: 10px;
 }
 .vxe-date-picker--panel.size--medium .vxe-date-picker--time-picker-title {
@@ -738,11 +802,11 @@
   display: inline-flex;
   flex-direction: column;
 }
-.vxe-date-picker--panel.size--small.type--datetime .vxe-date-picker--panel-left-wrapper {
+.vxe-date-picker--panel.size--small.type--datetime .vxe-date-picker--panel-datetime-left-wrapper {
   width: 312px;
 }
-.vxe-date-picker--panel.size--small.type--datetime .vxe-date-picker--panel-left-wrapper,
-.vxe-date-picker--panel.size--small.type--datetime .vxe-date-picker--panel-right-wrapper {
+.vxe-date-picker--panel.size--small.type--datetime .vxe-date-picker--panel-datetime-left-wrapper,
+.vxe-date-picker--panel.size--small.type--datetime .vxe-date-picker--panel-datetime-right-wrapper {
   padding: 9px;
 }
 .vxe-date-picker--panel.size--small .vxe-date-picker--time-picker-title {
@@ -832,11 +896,11 @@
   display: inline-flex;
   flex-direction: column;
 }
-.vxe-date-picker--panel.size--mini.type--datetime .vxe-date-picker--panel-left-wrapper {
+.vxe-date-picker--panel.size--mini.type--datetime .vxe-date-picker--panel-datetime-left-wrapper {
   width: 288px;
 }
-.vxe-date-picker--panel.size--mini.type--datetime .vxe-date-picker--panel-left-wrapper,
-.vxe-date-picker--panel.size--mini.type--datetime .vxe-date-picker--panel-right-wrapper {
+.vxe-date-picker--panel.size--mini.type--datetime .vxe-date-picker--panel-datetime-left-wrapper,
+.vxe-date-picker--panel.size--mini.type--datetime .vxe-date-picker--panel-datetime-right-wrapper {
   padding: 8px;
 }
 .vxe-date-picker--panel.size--mini .vxe-date-picker--time-picker-title {