vxe-pc-ui
Version:
A vue based PC component library
1 lines • 16 kB
JavaScript
;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"),_util=require("../../date-panel/src/util"),_vn=require("../../ui/src/vn"),_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:"VxeDateRangePicker",props:{modelValue:[String,Number,Date,Array],startValue:[String,Number,Date],endValue:[String,Number,Date],immediate:{type:Boolean,default:!0},name:String,type:{type:String,default:"date"},clearable:{type:Boolean,default:()=>(0,_ui.getConfig)().dateRangePicker.clearable},readonly:{type:Boolean,default:null},disabled:{type:Boolean,default:null},placeholder:String,autoComplete:{type:String,default:"off"},form:String,className:String,size:{type:String,default:()=>(0,_ui.getConfig)().dateRangePicker.size||(0,_ui.getConfig)().size},minDate:[String,Number,Date],maxDate:[String,Number,Date],defaultDate:[String,Number,Date],startDay:{type:[String,Number],default:()=>(0,_ui.getConfig)().dateRangePicker.startDay},labelFormat:String,valueFormat:String,timeFormat:String,editable:{type:Boolean,default:!0},festivalMethod:{type:Function,default:()=>(0,_ui.getConfig)().dateRangePicker.festivalMethod},disabledMethod:{type:Function,default:()=>(0,_ui.getConfig)().dateRangePicker.disabledMethod},separator:{type:[String,Number],default:()=>(0,_ui.getConfig)().dateRangePicker.separator},selectDay:{type:[String,Number],default:()=>(0,_ui.getConfig)().dateRangePicker.selectDay},showClearButton:{type:Boolean,default:()=>(0,_ui.getConfig)().dateRangePicker.showClearButton},showConfirmButton:{type:Boolean,default:()=>(0,_ui.getConfig)().dateRangePicker.showConfirmButton},autoClose:{type:Boolean,default:()=>(0,_ui.getConfig)().dateRangePicker.autoClose},prefixIcon:String,suffixIcon:String,placement:String,transfer:{type:Boolean,default:null},shortcutConfig:Object},emits:["update:modelValue","update:startValue","update:endValue","input","change","keydown","keyup","click","focus","blur","clear","prefix-click","suffix-click","date-prev","date-today","date-next","shortcut-click"],setup(E,e){const{slots:P,emit:r}=e,c=(0,_vue.inject)("$xeModal",null),p=(0,_vue.inject)("$xeDrawer",null),D=(0,_vue.inject)("$xeTable",null),i=(0,_vue.inject)("$xeForm",null),n=(0,_vue.inject)("xeFormItemInfo",null);var t=_xeUtils.default.uniqueId();const S=(0,_ui.useSize)(E)["computeSize"],w=(0,_vue.reactive)({initialized:!1,panelIndex:0,visiblePanel:!1,isAniVisible:!1,panelStyle:{},panelPlacement:"",isActivated:!1,startValue:"",endValue:""}),o={},m=(0,_vue.ref)(),g=(0,_vue.ref)(),F=(0,_vue.ref)(),R=(0,_vue.ref)(),A=(0,_vue.ref)(),T=(0,_vue.ref)(),C={refElem:m,refInput:g},M={xID:t,props:E,context:e,reactData:w,internalData:o,getRefMaps:()=>C};const I=(0,_vue.computed)(()=>{var e=E["transfer"];if(null===e){var t=(0,_ui.getConfig)().dateRangePicker.transfer;if(_xeUtils.default.isBoolean(t))return t;if(D||c||p||i)return!0}return e}),f=(0,_vue.computed)(()=>{var e=E["readonly"];return null===e?!!i&&i.props.readonly:e}),b=(0,_vue.computed)(()=>{var e=E["disabled"];return null===e?!!i&&i.props.disabled:e});t=(0,_vue.computed)(()=>{var{startValue:e,endValue:t}=E;return""+(e||"")+(t||"")});const j=(0,_vue.computed)(()=>{var e=E["type"];return"time"===e||"datetime"===e}),s=(0,_vue.computed)(()=>-1<["date","week","month","quarter","year"].indexOf(E.type)),N=(0,_vue.computed)(()=>E.clearable),U=(0,_vue.computed)(()=>{var e=E["placeholder"];return(e=e||(0,_ui.getConfig)().dateRangePicker.placeholder)?(0,_utils.getFuncText)(e):(0,_ui.getI18n)("vxe.dateRangePicker.pleaseRange")}),l=(0,_vue.computed)(()=>{var e=E["immediate"];return e}),B=(0,_vue.computed)(()=>Object.assign({},(0,_ui.getConfig)().dateRangePicker.shortcutConfig,E.shortcutConfig)),q=(0,_vue.computed)(()=>{var e=B.value["options"];return e?e.map((e,t)=>Object.assign({name:""+(e.name||e.code||t)},e)):[]}),L=(0,_vue.computed)(()=>{var e=E["labelFormat"];return e||(0,_ui.getI18n)("vxe.input.date.labelFormat."+E.type)}),_=(0,_vue.computed)(()=>{var{type:e,valueFormat:t}=E;return(0,_util.handleValueFormat)(e,t)}),h=(0,_vue.computed)(()=>{var e=E["startDay"];return _xeUtils.default.toNumber(e)}),O=(0,_vue.computed)(()=>{var{startValue:e,endValue:t}=w,e=e||t?[e||"",t||""]:[];return K(e)}),$=(0,_vue.computed)(()=>{return O.value.label}),K=e=>{var{type:t,separator:a}=E,l=L.value,u=_.value,r=h.value,i=e[0]?(0,_util.parseDateObj)(e[0],t,{valueFormat:u,labelFormat:l,firstDay:r}):null,e=e[1]?(0,_util.parseDateObj)(e[1],t,{valueFormat:u,labelFormat:l,firstDay:r}):null,t=i?i.label:"",u=e?e.label:"";return{label:(t||u?[t,u]:[]).join(""+(a||" ~ ")),startLabel:t,endLabel:u}},y=(e,t)=>{var a=E["modelValue"],a=_xeUtils.default.isArray(a);return e||t?(e=[e||"",t||""],a?e:e.join(",")):a?[]:""},G=()=>{var e,{type:t,modelValue:a}=E,l=_.value;let u="",r="";return _xeUtils.default.isArray(a)?(e=(0,_util.parseDateString)(a[0],t,{valueFormat:l}),t=(0,_util.parseDateString)(a[1],t,{valueFormat:l}),(e||t)&&(u=e||"",r=t||"")):_xeUtils.default.isString(a)&&((l=a.split(","))[0]||l[1])&&(u=l[0]||"",r=l[1]||""),{sValue:u,eValue:r}},Y=()=>{var{type:e,startValue:t,endValue:a}=E,l=_.value;return{sValue:(0,_util.parseDateString)(t,e,{valueFormat:l}),eValue:(0,_util.parseDateString)(a,e,{valueFormat:l})}},a=e=>{var{modelValue:t,startValue:a,endValue:l}=E;let u={sValue:"",eValue:""};u=(e?t?G:Y:a||l?Y:G)(),w.startValue=u.sValue,w.endValue=u.eValue},u=e=>{var{startValue:t,endValue:a}=w,l=y(t,a);k(e.type,{value:l,startValue:t,endValue:a},e)},x=(e,t,a)=>{var l=E["modelValue"],u=(w.startValue=e,w.endValue=t,y(e,t));r("update:modelValue",u),r("update:startValue",e||""),r("update:endValue",t||""),_xeUtils.default.toValueString(l)!==u&&(k("change",{value:u},a),i)&&n&&i.triggerItemEvent(a,n.itemConfig.field,u)},Z=e=>{l.value||u(e)},H=e=>{w.isActivated=!0,ce(e),u(e)},J=e=>{var t,a,l;b.value||({startValue:t,endValue:a}=w,l=y(t,a),k("prefix-click",{value:l,startValue:t,endValue:a},e))},V=()=>new Promise(e=>{w.visiblePanel=!1,o.hpTimeout=setTimeout(()=>{w.isAniVisible=!1,e()},350)}),Q=(e,t)=>{s.value&&V(),x("","",e),k("clear",{value:t},e)},v=()=>{var e=A.value,t=T.value;e&&t&&(e=e.getModelValue(),t=t.getModelValue(),e&&t||x("","",{type:"check"}))},W=()=>{var e=E["autoClose"],{startValue:t,endValue:a}=w,l=o["selectStatus"],u=s.value;e?l&&u&&t&&a&&V():t&&a&&(o.selectStatus=!1)},X=e=>{var t,a,l;b.value||({startValue:t,endValue:a}=w,l=y(t,a),k("suffix-click",{value:l,startValue:t,endValue:a},e))},ee=e=>{var{startValue:t,endValue:a}=w;l.value||x(t,a,e),w.visiblePanel||(w.isActivated=!1),k("blur",{value:"",startValue:t,endValue:a},e),i&&n&&i.triggerItemEvent(e,n.itemConfig.field,"")},te=e=>{u(e)},ae=e=>{u(e)},le=e=>{var t,a,l=A.value,u=T.value;l&&u&&(t=l.getModelValue(),a=u.getModelValue(),t&&!a||!t&&a?x("","",e):(l.confirmByEvent(e),u.confirmByEvent(e))),V()},ue=e=>{var t=o["selectStatus"],{value:e,$event:a}=e;const l=t?w.endValue:"";x(e,l,a),W(),t||(o.selectStatus=!0),(0,_vue.nextTick)(()=>{var e=A.value,t=T.value;e&&t&&(e=e.getModelValue(),!l)&&e&&t.setPanelDate(_xeUtils.default.toStringDate(e))})},re=e=>{var t=o["selectStatus"],{value:e,$event:a}=e;const l=t?w.startValue:"";x(l,e,a),W(),t||(o.selectStatus=!0),(0,_vue.nextTick)(()=>{var e=A.value,t=T.value;e&&t&&(t=t.getModelValue(),!l)&&t&&e.setPanelDate(_xeUtils.default.toStringDate(t))})},ie=e=>{var{visiblePanel:t,isActivated:a}=w,l=m.value,u=R.value;!b.value&&a&&(w.isActivated=(0,_dom.getEventTargetNode)(e,l).flag||(0,_dom.getEventTargetNode)(e,u).flag,w.isActivated||t&&(v(),V()))},ne=e=>{var t,a=w["visiblePanel"];b.value||(t=_ui.globalEvents.hasKey(e,_ui.GLOBAL_EVENT_KEYS.TAB),e=_ui.globalEvents.hasKey(e,_ui.GLOBAL_EVENT_KEYS.ESCAPE),t&&(w.isActivated=!1),a&&(e||t)&&V())},oe=e=>{var t=w["visiblePanel"];b.value||t&&(t=R.value,((0,_dom.getEventTargetNode)(e,t).flag?d:V)())},se=()=>{var{visiblePanel:e,isActivated:t}=w;e&&V(),t&&(w.isActivated=!1),(e||t)&&(e=g.value)&&e.blur()},ve=()=>{var e=w["visiblePanel"];e&&d()},d=()=>{const a=E["placement"],l=w["panelIndex"],u=g.value,r=F.value,i=I.value;var e=()=>{var e=(0,_dom.updatePanelPlacement)(u,r,{placement:a,teleportTo:i}),t=Object.assign(e.style,{zIndex:l});w.panelStyle=t,w.panelPlacement=e.placement};return e(),(0,_vue.nextTick)().then(e)},de=()=>{var e=w["visiblePanel"];return(b.value||e?(0,_vue.nextTick):(w.initialized||(w.initialized=!0),o.hpTimeout&&(clearTimeout(o.hpTimeout),o.hpTimeout=void 0),o.selectStatus=!1,w.isActivated=!0,w.isAniVisible=!0,setTimeout(()=>{w.visiblePanel=!0},10),w.panelIndex<(0,_utils.getLastZIndex)()&&(w.panelIndex=(0,_utils.nextZIndex)()),d))()},ce=e=>{f.value||(e.preventDefault(),de())},pe=e=>{u(e)},_e=({option:e,$event:t})=>{var a=E["type"],l=B.value,u=l["autoClose"],{code:r,clickMethod:i}=e,n=w.startValue,o=w.endValue,s=y(n,o),v={$dateRangePicker:M,option:e,value:s,startValue:n,endValue:o,code:r};if(!i&&r){e=_ui.commands.get(r),e=e?e.dateRangePickerCommandMethod:null;if(e)e(v);else{var d=_.value,c=h.value;switch(r){case"last1":case"last3":case"last7":case"last30":case"last60":case"last90":case"last180":var p=(0,_util.getRangeDateByCode)(r,s,a,{valueFormat:d,firstDay:c}),n=p.startValue,o=p.endValue,s=y(n,o);v.value=s,v.startValue=n,v.endValue=o,x(n,o,t);break;default:(0,_log.errLog)("vxe.error.notCommands",[r])}}}else{e=i||l.clickMethod;e&&e(v)}u&&V(),k("shortcut-click",v,t)},k=(e,t,a)=>{r(e,(0,_ui.createEvent)(a,{$dateRangePicker:M},t))},z=(e={dispatchEvent:k,setModelValue(e,t){w.startValue=e||"",w.endValue=t||"";e=y(e,t);r("update:modelValue",e)},setModelValueByEvent(e,t,a){x(t||"",a||"",e)},focus(){var e=g.value;return w.isActivated=!0,e.focus(),(0,_vue.nextTick)()},blur(){return g.value.blur(),(w.isActivated=!1,_vue.nextTick)()},select(){return g.value.select(),(w.isActivated=!1,_vue.nextTick)()},showPanel:de,hidePanel:V,updatePlacement:d},Object.assign(M,e),(e,t)=>{var a=B.value,{position:l,align:u,mode:r}=a,i=q.value;return(0,_utils.isEnableConf)(a)&&i.length&&(l||"left")===e?(0,_vue.h)("div",{class:`vxe-date-range-picker--layout-${e}-wrapper`},[(0,_vue.h)(_buttonGroup.default,{options:i,mode:r,align:u,vertical:t,onClick:_e})]):(0,_ui.renderEmptyElement)(M)}),me=()=>(0,_vue.h)("div",{class:"vxe-date-range-picker--control-icon",onClick:ce},[(0,_vue.h)("i",{class:["vxe-date-range-picker--date-picker-icon",(0,_ui.getIcon)().DATE_PICKER_DATE]})]);return(0,_vue.watch)(()=>E.modelValue,()=>{a(!0)}),(0,_vue.watch)(t,()=>{a(!1)}),a(!0),(0,_vue.nextTick)(()=>{_ui.globalEvents.on(M,"mousewheel",oe),_ui.globalEvents.on(M,"mousedown",ie),_ui.globalEvents.on(M,"keydown",ne),_ui.globalEvents.on(M,"blur",se),_ui.globalEvents.on(M,"resize",ve)}),(0,_vue.onDeactivated)(()=>{v()}),(0,_vue.onUnmounted)(()=>{_ui.globalEvents.off(M,"mousewheel"),_ui.globalEvents.off(M,"mousedown"),_ui.globalEvents.off(M,"blur"),_ui.globalEvents.off(M,"resize")}),(0,_vue.onBeforeUnmount)(()=>{v()}),(0,_vue.provide)("$xeDateRangePicker",M),M.renderVN=()=>{var e,t,a,{className:l,type:u,name:r,autoComplete:i}=E,{startValue:n,endValue:o,visiblePanel:s,isActivated:v}=w,d=S.value,c=b.value,p=f.value,_=$.value;return p?(0,_vue.h)("div",{ref:m,class:["vxe-date-range-picker--readonly","type--"+u,l]},_):(p=U.value,e=N.value,a=E.prefixIcon,t=(t=P.prefix)||a?(0,_vue.h)("div",{class:"vxe-date-range-picker--prefix",onClick:J},[(0,_vue.h)("div",{class:"vxe-date-range-picker--prefix-icon"},t?(0,_vn.getSlotVNs)(t({})):[(0,_vue.h)("i",{class:a})])]):null,a=(()=>{var e=E["suffixIcon"],{startValue:t,endValue:a}=w,l=P.suffix,u=b.value,r=N.value;return(0,_vue.h)("div",{class:["vxe-date-range-picker--suffix",{"is--clear":r&&!u&&(t||a)}]},[r?(0,_vue.h)("div",{class:"vxe-date-range-picker--clear-icon",onClick:Q},[(0,_vue.h)("i",{class:(0,_ui.getIcon)().INPUT_CLEAR})]):(0,_ui.renderEmptyElement)(M),me(),l||e?(0,_vue.h)("div",{class:"vxe-date-range-picker--suffix-icon",onClick:X},l?(0,_vn.getSlotVNs)(l({})):[(0,_vue.h)("i",{class:e})]):(0,_ui.renderEmptyElement)(M)])})(),(0,_vue.h)("div",{ref:m,class:["vxe-date-range-picker","type--"+u,l,{["size--"+d]:d,"is--prefix":!!t,"is--suffix":!!a,"is--visible":s,"is--disabled":c,"is--active":v,"show--clear":e&&!c&&(n||o)}],spellcheck:!1},[t||(0,_ui.renderEmptyElement)(M),(0,_vue.h)("div",{class:"vxe-date-range-picker--wrapper"},[(0,_vue.h)("input",{ref:g,class:"vxe-date-range-picker--inner",value:_,name:r,type:"text",placeholder:p,readonly:!0,disabled:c,autocomplete:i,onKeydown:te,onKeyup:ae,onClick:pe,onChange:Z,onFocus:H,onBlur:ee})]),a||(0,_ui.renderEmptyElement)(M),(()=>{var{type:e,separator:t,autoClose:a,showConfirmButton:l,showClearButton:u}=E,{initialized:r,isAniVisible:i,visiblePanel:n,panelPlacement:o,panelStyle:s,startValue:v,endValue:d}=w,c=S.value,p=I.value,_=B.value,m=N.value,g=O.value,f=q.value,b=j.value,{startLabel:g,endLabel:h}=g,_=_["position"],y=P.header,x=P.footer,V=P.top,k=P.bottom,D=P.left,C=P.right,f=0<f.length,b=null===l?b||!a:l,a=null===u?m:u;return(0,_vue.h)(_vue.Teleport,{to:"body",disabled:!p||!r},[(0,_vue.h)("div",{ref:F,class:["vxe-table--ignore-clear vxe-date-range-picker--panel","type--"+e,{["size--"+c]:c,"is--transfer":p,"ani--leave":i,"ani--enter":n,"show--top":!!(V||y||f&&("top"===_||"header"===_)),"show--bottom":!!(k||x||f&&("bottom"===_||"footer"===_)),"show--left":!!(D||f&&"left"===_),"show--right":!!(C||f&&"right"===_)}],placement:o,style:s},r&&(n||i)?[(0,_vue.h)("div",{ref:R,class:["vxe-date-range-picker--layout-all-wrapper","type--"+e,{["size--"+c]:c}]},[V?(0,_vue.h)("div",{class:"vxe-date-range-picker--layout-top-wrapper"},V({})):z("top"),(0,_vue.h)("div",{class:"vxe-date-range-picker--layout-body-layout-wrapper"},[D?(0,_vue.h)("div",{class:"vxe-date-range-picker--layout-left-wrapper"},D({})):z("left",!0),(0,_vue.h)("div",{class:"vxe-date-range-picker--layout-body-content-wrapper"},[y?(0,_vue.h)("div",{class:"vxe-date-range-picker--layout-header-wrapper"},y({})):z("header"),(0,_vue.h)("div",{class:"vxe-date-range-picker--layout-body-wrapper"},[(0,_vue.h)(_datePanel.default,{ref:A,modelValue:v,type:E.type,className:E.className,minDate:E.minDate,maxDate:E.maxDate,endDate:d,startDay:E.startDay,labelFormat:E.labelFormat,valueFormat:E.valueFormat,timeFormat:E.timeFormat,festivalMethod:E.festivalMethod,disabledMethod:E.disabledMethod,selectDay:E.selectDay,onChange:ue}),(0,_vue.h)(_datePanel.default,{ref:T,modelValue:d,type:E.type,className:E.className,minDate:E.minDate,maxDate:E.maxDate,startDate:v,startDay:E.startDay,labelFormat:E.labelFormat,valueFormat:E.valueFormat,timeFormat:E.timeFormat,festivalMethod:E.festivalMethod,disabledMethod:E.disabledMethod,selectDay:E.selectDay,onChange:re})]),(0,_vue.h)("div",{class:"vxe-date-range-picker--layout-footer-wrapper"},[(0,_vue.h)("div",{class:"vxe-date-range-picker--layout-footer-label"},g||h?[(0,_vue.h)("span",g),(0,_vue.h)("span",""+(t||"")),(0,_vue.h)("span",h)]:[]),(0,_vue.h)("div",{class:"vxe-date-range-picker--layout-footer-custom"},x?x({}):[z("footer")]),(0,_vue.h)("div",{class:"vxe-date-range-picker--layout-footer-btns"},[a?(0,_vue.h)(_button.default,{size:"mini",disabled:!(v||d),content:(0,_ui.getI18n)("vxe.button.clear"),onClick:Q}):(0,_ui.renderEmptyElement)(M),b?(0,_vue.h)(_button.default,{size:"mini",status:"primary",content:(0,_ui.getI18n)("vxe.button.confirm"),onClick:le}):(0,_ui.renderEmptyElement)(M)])])]),C?(0,_vue.h)("div",{class:"vxe-date-range-picker--layout-right-wrapper"},C({})):z("right",!0)]),k?(0,_vue.h)("div",{class:"vxe-date-range-picker--layout-bottom-wrapper"},k({})):z("bottom")])]:[])])})()]))},M},render(){return this.renderVN()}});