vxe-pc-ui/lib/date-picker/src/date-picker.min.js

A vue based PC component library

Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=void 0;var _vue=require("vue"),_comp=require("../../ui/src/comp"),_xeUtils=_interopRequireDefault(require("xe-utils")),_ui=require("../../ui"),_utils=require("../../ui/src/utils"),_dom=require("../../ui/src/dom"),_vn=require("../../ui/src/vn"),_util=require("../../date-panel/src/util"),_log=require("../../ui/src/log"),_datePanel=_interopRequireDefault(require("../../date-panel/src/date-panel")),_button=_interopRequireDefault(require("../../button/src/button")),_buttonGroup=_interopRequireDefault(require("../../button/src/button-group"));function _interopRequireDefault(e){return e&&e.__esModule?e:{default:e}}var _default=exports.default=(0,_comp.defineVxeComponent)({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,autoComplete:{type:String,default:"off"},form:String,className:String,zIndex:Number,size:{type:String,default:()=>(0,_ui.getConfig)().datePicker.size||(0,_ui.getConfig)().size},multiple:Boolean,limitCount:{type:[String,Number],default:()=>(0,_ui.getConfig)().datePicker.limitCount},startDate:{type:[String,Number,Date],default:()=>(0,_ui.getConfig)().datePicker.startDate},endDate:{type:[String,Number,Date],default:()=>(0,_ui.getConfig)().datePicker.endDate},defaultDate:[String,Number,Date],defaultTime:[String,Number,Date],minDate:[String,Number,Date],maxDate:[String,Number,Date],startDay:{type:[String,Number],default:()=>(0,_ui.getConfig)().datePicker.startDay},labelFormat:String,valueFormat:String,timeFormat: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},showClearButton:{type:Boolean,default:()=>(0,_ui.getConfig)().datePicker.showClearButton},showConfirmButton:{type:Boolean,default:()=>(0,_ui.getConfig)().datePicker.showConfirmButton},autoClose:{type:Boolean,default:()=>(0,_ui.getConfig)().datePicker.autoClose},prefixIcon:String,suffixIcon:String,placement:String,transfer:{type:Boolean,default:null},timeConfig:Object,popupConfig:Object,shortcutConfig:Object,startWeek:Number},emits:["update:modelValue","input","change","keydown","keyup","click","focus","blur","clear","confirm","prefix-click","suffix-click","date-prev","date-today","date-next","shortcut-click"],setup(D,e){let{slots:E,emit:n}=e,d=(0,_vue.inject)("$xeModal",null),g=(0,_vue.inject)("$xeDrawer",null),b=(0,_vue.inject)("$xeTable",null),o=(0,_vue.inject)("$xeForm",null),v=(0,_vue.inject)("xeFormItemInfo",null);var t=_xeUtils.default.uniqueId();let P=(0,_ui.useSize)(D).computeSize,V=(0,_vue.reactive)({initialized:!1,panelIndex:0,visiblePanel:!1,isAniVisible:!1,panelStyle:{},panelPlacement:"",isActivated:!1,inputValue:"",inputLabel:""}),a={hpTimeout:void 0},h=(0,_vue.ref)(),y=(0,_vue.ref)(),w=(0,_vue.ref)(),S=(0,_vue.ref)(),T=(0,_vue.ref)(),M={refElem:h,refInput:y},I={xID:t,props:D,context:e,reactData:V,internalData:a,getRefMaps:()=>M},N=(0,_vue.computed)(()=>{var e=D.transfer,t=B.value;if(_xeUtils.default.isBoolean(t.transfer))return t.transfer;if(null===e){t=(0,_ui.getConfig)().datePicker.transfer;if(_xeUtils.default.isBoolean(t))return t;if(b||d||g||o)return!0}return e}),x=(0,_vue.computed)(()=>{var e=D.readonly;return null===e?!!o&&o.props.readonly:e}),k=(0,_vue.computed)(()=>{var e=D.disabled;return null===e?!!o&&o.props.disabled:e}),F=(0,_vue.computed)(()=>{var e=D.type;return"time"===e||"datetime"===e}),l=(0,_vue.computed)(()=>F.value||-1<["date","week","month","quarter","year"].indexOf(D.type)),A=(0,_vue.computed)(()=>D.clearable),U=(0,_vue.computed)(()=>{var{type:e,editable:t,multiple:a}=D;return x.value||a||!t||"week"===e||"quarter"===e}),L=(0,_vue.computed)(()=>{var e=D.placeholder;return(e=e||(0,_ui.getConfig)().datePicker.placeholder)?(0,_utils.getFuncText)(e):(0,_ui.getI18n)("vxe.base.pleaseSelect")}),i=(0,_vue.computed)(()=>{var e=D.immediate;return e}),O=(0,_vue.computed)(()=>Object.assign({},(0,_ui.getConfig)().datePicker.timeConfig,D.timeConfig)),B=(0,_vue.computed)(()=>Object.assign({},(0,_ui.getConfig)().datePicker.popupConfig,D.popupConfig)),q=(0,_vue.computed)(()=>Object.assign({},(0,_ui.getConfig)().datePicker.shortcutConfig,D.shortcutConfig)),z=(0,_vue.computed)(()=>{var e=q.value.options;return e?e.map((e,t)=>Object.assign({name:""+(e.name||e.code||t)},e)):[]}),$=(0,_vue.computed)(()=>{var e=D.labelFormat;return e||(0,_ui.getI18n)("vxe.input.date.labelFormat."+D.type)}),c=(0,_vue.computed)(()=>{var{type:e,valueFormat:t}=D;return(0,_util.handleValueFormat)(e,t)}),p=(0,_vue.computed)(()=>{var e=D.startDay;return _xeUtils.default.toNumber(e)}),C=(0,_vue.computed)(()=>{let{type:t,multiple:e}=D;var a=V.inputValue;let l=$.value,i=c.value,u=p.value;return(a?e?a.split(","):[a]:[]).map(e=>(0,_util.parseDateObj)(e,t,{valueFormat:i,labelFormat:l,firstDay:u}).label).join(", ")}),u=()=>{var e=D.modelValue;let t="";e&&(t=_xeUtils.default.isNumber(e)&&/^[0-9]{11,15}$/.test(""+e)?new Date(e):e),V.inputValue=t},r=e=>{var t=V.inputValue;_(e.type,{value:t},e)},m=(e,t)=>{var a,{type:l,modelValue:i,valueFormat:u}=D,r=c.value;V.inputValue=e,(0,_util.hasTimestampValueType)(u)?(a=(a=(0,_util.parseDateValue)(e,l,{valueFormat:r}))?a.getTime():null,n("update:modelValue",a),i!==a&&(_("change",{value:a},t),o)&&v&&o.triggerItemEvent(t,v.itemConfig.field,a)):(0,_util.hasDateValueType)(u)?(a=(0,_util.parseDateValue)(e,l,{valueFormat:r}),n("update:modelValue",a),(i&&a?_xeUtils.default.toStringDate(i).getTime()!==a.getTime():i!==a)&&(_("change",{value:a},t),o)&&v&&o.triggerItemEvent(t,v.itemConfig.field,a)):(n("update:modelValue",e),_xeUtils.default.toValueString(i)!==e&&(_("change",{value:e},t),o)&&v&&o.triggerItemEvent(t,v.itemConfig.field,e))},R=e=>{var t=e.target.value;V.inputLabel=t,_("input",{value:t},e)},K=e=>{i.value||r(e)},G=e=>{V.isActivated=!0,l.value&&ve(e),r(e)},Y=e=>{var t;k.value||(t=V.inputValue,_("prefix-click",{value:t},e))},f=()=>new Promise(e=>{V.visiblePanel=!1,a.hpTimeout=setTimeout(()=>{V.isAniVisible=!1,e()},350)}),Z=(e,t)=>{l.value&&f(),m("",e),_("clear",{value:t},e)},W=e=>{var t;k.value||(t=V.inputValue,_("suffix-click",{value:t},e))},H=e=>{var t=T.value,a=V.inputValue;i.value||m(a,e),V.visiblePanel||(V.isActivated=!1,t&&t.checkValue(V.inputLabel)),_("blur",{value:a},e),o&&v&&o.triggerItemEvent(e,v.itemConfig.field,a)},J=e=>{r(e)},Q=e=>{r(e)},X=e=>{var t=T.value;t&&t.confirmByEvent(e),f()},ee=e=>{var{multiple:t,autoClose:a}=D,{value:e,$event:l}=e,i=F.value;m(e,l),t||i||a&&f()},te=e=>{_("confirm",e,e.$event)},ae=e=>{var t=T.value,{visiblePanel:a,isActivated:l}=V,i=h.value,u=S.value;!k.value&&l&&(V.isActivated=(0,_dom.getEventTargetNode)(e,i).flag||(0,_dom.getEventTargetNode)(e,u).flag,V.isActivated||a&&(f(),t)&&t.checkValue(V.inputLabel))},le=e=>{var t,a=V.visiblePanel;k.value||(t=_ui.globalEvents.hasKey(e,_ui.GLOBAL_EVENT_KEYS.TAB),e=_ui.globalEvents.hasKey(e,_ui.GLOBAL_EVENT_KEYS.ESCAPE),t&&(V.isActivated=!1),a&&(e||t)&&f())},ie=e=>{var t=V.visiblePanel;k.value||t&&(t=S.value,((0,_dom.getEventTargetNode)(e,t).flag?s:f)())},ue=()=>{var e=T.value,{isActivated:t,visiblePanel:a}=V;a&&f(),t&&(V.isActivated=!1),(a||t)&&(e&&e.checkValue(V.inputLabel),a=y.value)&&a.blur()},re=()=>{var e=V.visiblePanel;e&&s()},ne=()=>{var e=B.value.zIndex||D.zIndex;e?V.panelIndex=_xeUtils.default.toNumber(e):V.panelIndex<(0,_utils.getLastZIndex)()&&(V.panelIndex=(0,_utils.nextZIndex)())},s=()=>{let a=D.placement,l=V.panelIndex,i=y.value,u=w.value,r=N.value,n=B.value;var e=()=>{var e=(0,_dom.updatePanelPlacement)(i,u,{placement:n.placement||a,defaultPlacement:n.defaultPlacement,teleportTo:r}),t=Object.assign(e.style,{zIndex:l});V.panelStyle=t,V.panelPlacement=e.placement};return e(),(0,_vue.nextTick)().then(e)},oe=()=>{var e=V.visiblePanel;return(k.value||e?(0,_vue.nextTick):(V.initialized||(V.initialized=!0),a.hpTimeout&&(clearTimeout(a.hpTimeout),a.hpTimeout=void 0),V.isActivated=!0,V.isAniVisible=!0,setTimeout(()=>{V.visiblePanel=!0,s()},10),ne(),s))()},ve=e=>{x.value||(e.preventDefault(),oe())},se=e=>{r(e)},de=({option:e,$event:t})=>{var a=D.type,l=V.inputValue,i=q.value,u=i.autoClose,{code:r,clickMethod:n}=e,o=l,v={$datePicker:I,option:e,value:o,code:r};if(!n&&r){l=_ui.commands.get(r),e=l?l.datePickerCommandMethod:null;if(e)e(v);else{var s=c.value,d=p.value;switch(r){case"now":case"prev":case"next":case"minus":case"plus":o=(0,_util.getDateByCode)(r,o,a,{valueFormat:s,firstDay:d}).value;v.value=o,m(o,t);break;default:(0,_log.errLog)("vxe.error.notCommands",["[date-picker] "+r])}}}else{l=n||i.clickMethod;l&&l(v)}u&&f(),_("shortcut-click",v,t)},_=(e,t,a)=>{n(e,(0,_ui.createEvent)(a,{$datePicker:I},t))};t={dispatchEvent:_,setModelValue(e){V.inputValue=e,n("update:modelValue",e)},setModelValueByEvent(e,t){m(t||"",e)},focus(){var e=y.value;return V.isActivated=!0,e.focus(),(0,_vue.nextTick)()},blur(){return y.value.blur(),(V.isActivated=!1,_vue.nextTick)()},select(){return y.value.select(),(V.isActivated=!1,_vue.nextTick)()},showPanel:oe,hidePanel:f,updatePlacement:s};Object.assign(I,t);let j=(e,t)=>{var a=q.value,{position:l,align:i,mode:u}=a,r=z.value;return(0,_utils.isEnableConf)(a)&&r.length&&(l||"left")===e?(0,_vue.h)("div",{class:`vxe-date-picker--layout-${e}-wrapper`},[(0,_vue.h)(_buttonGroup.default,{options:r,mode:u,align:i,vertical:t,onClick:de})]):(0,_ui.renderEmptyElement)(I)},ce=()=>(0,_vue.h)("div",{class:"vxe-date-picker--control-icon",onClick:ve},[(0,_vue.h)("i",{class:["vxe-date-picker--date-picker-icon",(0,_ui.getIcon)().DATE_PICKER_DATE]})]);return(0,_vue.watch)(C,e=>{V.inputLabel=e}),(0,_vue.watch)(()=>D.modelValue,()=>{u()}),(0,_vue.nextTick)(()=>{_ui.globalEvents.on(I,"mousewheel",ie),_ui.globalEvents.on(I,"mousedown",ae),_ui.globalEvents.on(I,"keydown",le),_ui.globalEvents.on(I,"blur",ue),_ui.globalEvents.on(I,"resize",re)}),(0,_vue.onUnmounted)(()=>{_ui.globalEvents.off(I,"mousewheel"),_ui.globalEvents.off(I,"mousedown"),_ui.globalEvents.off(I,"blur"),_ui.globalEvents.off(I,"resize")}),u(),(0,_vue.provide)("$xeDatePicker",I),I.renderVN=()=>{var e,t,a,l,i,u,r,{className:n,type:o,name:v,autoComplete:s}=D,{inputValue:d,inputLabel:c,visiblePanel:p,isActivated:m}=V,f=P.value,_=k.value,g=x.value,b=C.value;return g?(0,_vue.h)("div",{ref:h,class:["vxe-date-picker--readonly","type--"+o,n]},b):(g=U.value,b=L.value,e=A.value,a=D.prefixIcon,t=(t=E.prefix)||a?(0,_vue.h)("div",{class:"vxe-date-picker--prefix",onClick:Y},[(0,_vue.h)("div",{class:"vxe-date-picker--prefix-icon"},t?(0,_vn.getSlotVNs)(t({})):[(0,_vue.h)("i",{class:a})])]):null,a=D.suffixIcon,l=V.inputValue,i=E.suffix,u=k.value,r=A.value,u=(0,_vue.h)("div",{class:["vxe-date-picker--suffix",{"is--clear":r&&!u&&!(""===l||_xeUtils.default.eqNull(l))}]},[r?(0,_vue.h)("div",{class:"vxe-date-picker--clear-icon",onClick:Z},[(0,_vue.h)("i",{class:(0,_ui.getIcon)().INPUT_CLEAR})]):(0,_ui.renderEmptyElement)(I),ce(),i||a?(0,_vue.h)("div",{class:"vxe-date-picker--suffix-icon",onClick:W},i?(0,_vn.getSlotVNs)(i({})):[(0,_vue.h)("i",{class:a})]):(0,_ui.renderEmptyElement)(I)]),(0,_vue.h)("div",{ref:h,class:["vxe-date-picker","type--"+o,n,{["size--"+f]:f,"is--prefix":!!t,"is--suffix":!!u,"is--visible":p,"is--disabled":_,"is--active":m,"show--clear":e&&!_&&!(""===d||_xeUtils.default.eqNull(d))}],spellcheck:!1},[t||(0,_ui.renderEmptyElement)(I),(0,_vue.h)("div",{class:"vxe-date-picker--wrapper"},[(0,_vue.h)("input",{ref:y,class:"vxe-date-picker--inner",value:c,name:v,type:"text",placeholder:b,readonly:g,disabled:_,autocomplete:s,onKeydown:J,onKeyup:Q,onClick:se,onInput:R,onChange:K,onFocus:G,onBlur:H})]),u||(0,_ui.renderEmptyElement)(I),(()=>{var{type:e,multiple:t,showClearButton:a,showConfirmButton:l}=D,{initialized:i,isAniVisible:u,visiblePanel:r,panelPlacement:n,panelStyle:o,inputValue:v}=V,s=P.value,d=N.value,c=q.value,p=A.value,m=F.value,f=z.value,_=O.value,g=B.value,c=c.position,b=E.header,h=E.footer,y=E.top,x=E.bottom,k=E.left,C=E.right,g=g.className,f=0<f.length,m=null===l?m||t:l,t=null===a?p&&m&&"time"!==e:a;return(0,_vue.h)(_vue.Teleport,{to:"body",disabled:!d||!i},[(0,_vue.h)("div",{ref:w,class:["vxe-table--ignore-clear vxe-date-picker--panel","type--"+e,g?_xeUtils.default.isFunction(g)?g({$datePicker:I}):g:"",{["size--"+s]:s,"is--transfer":d,"ani--leave":u,"ani--enter":r,"show--top":!!(y||b||f&&("top"===c||"header"===c)),"show--bottom":!!(x||h||f&&("bottom"===c||"footer"===c)),"show--left":!!(k||f&&"left"===c),"show--right":!!(C||f&&"right"===c)}],placement:n,style:o},i&&(r||u)?[(0,_vue.h)("div",{ref:S,class:["vxe-date-picker--layout-all-wrapper","type--"+e,{["size--"+s]:s}]},[y?(0,_vue.h)("div",{class:"vxe-date-picker--layout-top-wrapper"},y({})):j("top"),(0,_vue.h)("div",{class:"vxe-date-picker--layout-body-layout-wrapper"},[k?(0,_vue.h)("div",{class:"vxe-date-picker--layout-left-wrapper"},k({})):j("left",!0),(0,_vue.h)("div",{class:"vxe-date-picker--layout-body-content-wrapper"},[b?(0,_vue.h)("div",{class:"vxe-date-picker--layout-header-wrapper"},b({})):j("header"),(0,_vue.h)("div",{class:"vxe-date-picker--layout-body-wrapper"},[(0,_vue.h)(_datePanel.default,{ref:T,modelValue:V.inputValue,type:D.type,className:D.className,multiple:D.multiple,limitCount:D.limitCount,startDate:D.startDate,endDate:D.endDate,defaultDate:D.defaultDate,defaultTime:D.defaultTime,minDate:D.minDate,maxDate:D.maxDate,startDay:D.startDay,labelFormat:D.labelFormat,valueFormat:D.valueFormat,timeFormat:D.timeFormat,timeConfig:_,festivalMethod:D.festivalMethod,disabledMethod:D.disabledMethod,selectDay:D.selectDay,onChange:ee,onConfirm:te})]),(0,_vue.h)("div",{class:"vxe-date-picker--layout-footer-wrapper"},[(0,_vue.h)("div",{class:"vxe-date-picker--layout-footer-custom"},h?h({}):[j("footer")]),t||m?(0,_vue.h)("div",{class:"vxe-date-picker--layout-footer-btns"},[t?(0,_vue.h)(_button.default,{size:"mini",disabled:""===v||_xeUtils.default.eqNull(v),content:(0,_ui.getI18n)("vxe.button.clear"),onClick:Z}):(0,_ui.renderEmptyElement)(I),m?(0,_vue.h)(_button.default,{size:"mini",status:"primary",content:(0,_ui.getI18n)("vxe.button.confirm"),onClick:X}):(0,_ui.renderEmptyElement)(I)]):(0,_ui.renderEmptyElement)(I)])]),C?(0,_vue.h)("div",{class:"vxe-date-picker--layout-right-wrapper"},C({})):j("right",!0)]),x?(0,_vue.h)("div",{class:"vxe-date-picker--layout-bottom-wrapper"},x({})):j("bottom")])]:[])])})()]))},I},render(){return this.renderVN()}});