vxe-pc-ui
Version:
A vue based PC component library
1 lines • 16.7 kB
JavaScript
;Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=void 0;var _vue=require("vue"),_ui=require("../../ui"),_util=require("../../date-picker/src/util"),_dom=require("../..//ui/src/dom"),_button=_interopRequireDefault(require("../../button/src/button")),_xeUtils=_interopRequireDefault(require("xe-utils"));function _interopRequireDefault(e){return e&&e.__esModule?e:{default:e}}var _default=exports.default=(0,_vue.defineComponent)({name:"VxeCalendar",props:{modelValue:[String,Number,Date],type:{type:String,default:"date"},className:String,size:{type:String,default:()=>(0,_ui.getConfig)().calendar.size||(0,_ui.getConfig)().size},multiple:Boolean,width:[String,Number],height:[String,Number],minDate:{type:[String,Number,Date],default:()=>(0,_ui.getConfig)().calendar.minDate},maxDate:{type:[String,Number,Date],default:()=>(0,_ui.getConfig)().calendar.maxDate},startDay:{type:[String,Number],default:()=>(0,_ui.getConfig)().calendar.startDay},labelFormat:String,valueFormat:String,festivalMethod:{type:Function,default:()=>(0,_ui.getConfig)().calendar.festivalMethod},disabledMethod:{type:Function,default:()=>(0,_ui.getConfig)().calendar.disabledMethod},selectDay:{type:[String,Number],default:()=>(0,_ui.getConfig)().calendar.selectDay}},emits:["update:modelValue","change","click","date-prev","date-today","date-next","view-change"],setup(W,e){const l=e["emit"];var t=_xeUtils.default.uniqueId();const w=(0,_ui.useSize)(W)["computeSize"],F=(0,_vue.reactive)({selectValue:W.modelValue,inputValue:W.modelValue,datePanelValue:null,datePanelLabel:"",datePanelType:"day",selectMonth:null,currentDate:null}),c={yearSize:12,monthSize:20,quarterSize:8},r=(0,_vue.ref)(),S={refElem:r},i={xID:t,props:W,context:e,reactData:F,internalData:c,getRefMaps:()=>S},M=(0,_vue.computed)(()=>{var{height:e,width:t}=W,a={};return t&&(a.width=(0,_dom.toCssUnit)(t)),e&&(a.height=(0,_dom.toCssUnit)(e)),a}),P=(0,_vue.computed)(()=>!1),n=(0,_vue.computed)(()=>-1<["date","week","month","quarter","year"].indexOf(W.type)),k=(0,_vue.computed)(()=>W.minDate?_xeUtils.default.toStringDate(W.minDate):null),N=(0,_vue.computed)(()=>W.maxDate?_xeUtils.default.toStringDate(W.maxDate):null),V=(0,_vue.computed)(()=>-1<["date","week","month","quarter","year"].indexOf(W.type)),z=(0,_vue.computed)(()=>{var e=W["multiple"],t=F["selectValue"],a=n.value;const l=s.value;return e&&t&&a?_xeUtils.default.toValueString(t).split(",").map(e=>{e=f(e,l);return _xeUtils.default.isValidDate(e)?e:null}):[]}),q=(0,_vue.computed)(()=>{var e=z.value;const t=s.value;return e.map(e=>_xeUtils.default.toDateString(e,t))}),a=(0,_vue.computed)(()=>{var e=z.value;const t=o.value;return e.map(e=>_xeUtils.default.toDateString(e,t)).join(", ")}),s=(0,_vue.computed)(()=>{var e=W["valueFormat"];return e||"yyyy-MM-dd"}),E=(0,_vue.computed)(()=>{var e=F["selectValue"],t=n.value,a=s.value;let l=null;return l=e&&t&&(t=f(e,a),_xeUtils.default.isValidDate(t))?t:l}),d=(0,_vue.computed)(()=>{var e=k.value,t=F["selectMonth"];return!(!t||!e)&&t<=e}),v=(0,_vue.computed)(()=>{var e=N.value,t=F["selectMonth"];return!(!t||!e)&&e<=t}),C=(0,_vue.computed)(()=>{var e=E.value;return e?1e3*(3600*e.getHours()+60*e.getMinutes()+e.getSeconds()):0}),o=(0,_vue.computed)(()=>{var e=W["labelFormat"],t=n.value,a=s.value;return t?e||a||(0,_ui.getI18n)("vxe.input.date.labelFormat."+W.type):null}),p=(0,_vue.computed)(()=>{var{selectMonth:e,currentDate:t}=F,a=c["yearSize"],l=[];if(e&&t){var u=t.getFullYear(),t=e.getFullYear(),r=new Date(t-t%a,0,1);for(let e=-4;e<a+4;e++){var i=_xeUtils.default.getWhatYear(r,e,"first"),n=i.getFullYear();l.push({date:i,isCurrent:!0,isPrev:e<0,isNow:u===n,isNext:e>=a,year:n})}}return l}),T=(0,_vue.computed)(()=>{let a="",l="";if(n.value){var{datePanelType:u,selectMonth:r}=F,i=p.value;let e="",t;r&&(e=r.getFullYear(),t=r.getMonth()+1),"quarter"===u||"month"===u?a=""+e:"year"===u?a=i.length?i[0].year+" - "+i[i.length-1].year:"":(a=""+e,l=t?(0,_ui.getI18n)("vxe.input.date.m"+t):"-")}return{y:a,m:l}}),_=(0,_vue.computed)(()=>{var e=W["startDay"];return _xeUtils.default.toNumber(e)}),h=(0,_vue.computed)(()=>{var a=[];if(n.value){let t=_.value;a.push(t);for(let e=0;e<6;e++)6<=t?t=0:t++,a.push(t)}return a}),I=(0,_vue.computed)(()=>{return n.value?h.value.map(e=>({value:e,label:(0,_ui.getI18n)("vxe.input.date.weeks.w"+e)})):[]}),H=(0,_vue.computed)(()=>{var e;return n.value?(e=I.value,[{label:(0,_ui.getI18n)("vxe.input.date.weeks.w")}].concat(e)):[]}),O=(0,_vue.computed)(()=>{var e=p.value;return _xeUtils.default.chunk(e,4)}),m=(0,_vue.computed)(()=>{var{selectMonth:e,currentDate:t}=F,a=c["quarterSize"],l=[];if(e&&t){var u=t.getFullYear(),r=(0,_util.getDateQuarter)(t),i=_xeUtils.default.getWhatYear(e,0,"first"),n=i.getFullYear();for(let e=-2;e<a-2;e++){var s=_xeUtils.default.getWhatQuarter(i,e),d=s.getFullYear(),v=(0,_util.getDateQuarter)(s),o=d<n;l.push({date:s,isPrev:o,isCurrent:d===n,isNow:d===u&&v===r,isNext:!o&&n<d,quarter:v})}}return l}),$=(0,_vue.computed)(()=>{var e=m.value;return _xeUtils.default.chunk(e,2)}),y=(0,_vue.computed)(()=>{var{selectMonth:t,currentDate:e}=F,a=c["monthSize"],l=[];if(t&&e){var u=e.getFullYear(),r=e.getMonth(),i=_xeUtils.default.getWhatYear(t,0,"first").getFullYear();for(let e=-4;e<a-4;e++){var n=_xeUtils.default.getWhatYear(t,0,e),s=n.getFullYear(),d=n.getMonth(),v=s<i;l.push({date:n,isPrev:v,isCurrent:s===i,isNow:s===u&&d===r,isNext:!v&&i<s,month:d})}}return l}),A=(0,_vue.computed)(()=>{var e=y.value;return _xeUtils.default.chunk(e,4)}),Y=(0,_vue.computed)(()=>{var{selectMonth:t,currentDate:e}=F,a=[];if(t&&e){var l=C.value,u=h.value,r=e.getFullYear(),i=e.getMonth(),n=e.getDate(),s=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(),m=o<t;a.push({date:o,isPrev:m,isCurrent:c===s&&p===d,isNow:c===r&&p===i&&_===n,isNext:!m&&d!==p,label:_})}}return a}),j=(0,_vue.computed)(()=>{var e=Y.value;return _xeUtils.default.chunk(e,7)}),G=(0,_vue.computed)(()=>{var e=j.value;const a=_.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)})}),f=(e,t)=>_xeUtils.default.toStringDate(e,t),x=(e,t)=>{F.inputValue=e,l("update:modelValue",e),_xeUtils.default.toValueString(W.modelValue)!==e&&U("change",{value:e},t)},g=e=>{var t=W["type"],a=o.value,l=s.value,u=_.value;let r=null,i="";e&&(r=f(e,l)),_xeUtils.default.isValidDate(r)?(i=_xeUtils.default.toDateString(r,a,{firstDay:u}),a&&"week"===t&&_xeUtils.default.getWhatWeek(r,0,u,u).getFullYear()<r.getFullYear()&&-1<(e=a.indexOf("yyyy"))&&(l=Number(i.substring(e,e+4)))&&!isNaN(l)&&(i=i.replace(""+l,""+(l-1)))):r=null,F.datePanelValue=r,F.datePanelLabel=i},J=()=>{var e=n.value,t=F["inputValue"];e&&(g(t),F.inputValue=W.multiple?a.value:F.datePanelLabel)},K=()=>{n.value&&J()},b=e=>{e=_xeUtils.default.getWhatMonth(e,0,"first");_xeUtils.default.isEqual(e,F.selectMonth)||(F.selectMonth=e)},u=e=>{var t,{modelValue:a,multiple:l}=W,u=s.value,r=_.value;"week"===W.type&&(t=_xeUtils.default.toNumber(W.selectDay),e=_xeUtils.default.getWhatWeek(e,0,t,r));const i=_xeUtils.default.toDateString(e,u,{firstDay:r});b(e),F.selectValue=e,l?(t=q.value).some(e=>_xeUtils.default.isEqual(e,i))?x(t.filter(e=>!_xeUtils.default.isEqual(e,i)).join(","),{type:"update"}):x(t.concat([i]).join(","),{type:"update"}):_xeUtils.default.isEqual(a,i)||x(i,{type:"update"})},X=(e,t)=>{F.selectMonth=_xeUtils.default.getWhatMonth(e,t,"first")},Z=()=>{var e=_xeUtils.default.getWhatDay(Date.now(),0,"first");F.currentDate=e,X(e,0)},ee=()=>{F.datePanelType="year"},te=e=>{let t=F["datePanelType"];t="month"===t||"quarter"===t?"year":"month",F.datePanelType=t,D(e)},ae=e=>{var t=W["type"],{datePanelType:a,selectMonth:l}=F,u=c["yearSize"];d.value||(F.selectMonth="year"===t?_xeUtils.default.getWhatYear(l,-u,"first"):"month"===t||"quarter"===t?"year"===a?_xeUtils.default.getWhatYear(l,-u,"first"):_xeUtils.default.getWhatYear(l,-1,"first"):"year"===a?_xeUtils.default.getWhatYear(l,-u,"first"):"month"===a?_xeUtils.default.getWhatYear(l,-1,"first"):_xeUtils.default.getWhatMonth(l,-1,"first"),U("date-prev",{type:t},e),D(e))},le=e=>{Z(),W.multiple||u(F.currentDate),U("date-today",{type:W.type},e),D(e)},ue=e=>{var t=W["type"],{datePanelType:a,selectMonth:l}=F,u=c["yearSize"];v.value||(F.selectMonth="year"===t?_xeUtils.default.getWhatYear(l,u,"first"):"month"===t||"quarter"===t?"year"===a?_xeUtils.default.getWhatYear(l,u,"first"):_xeUtils.default.getWhatYear(l,1,"first"):"year"===a?_xeUtils.default.getWhatYear(l,u,"first"):"month"===a?_xeUtils.default.getWhatYear(l,1,"first"):_xeUtils.default.getWhatMonth(l,1,"first"),U("date-next",{type:t},e),D(e))},L=e=>{var t=W["disabledMethod"],a=F["datePanelType"];return t&&t({type:a,viewType:a,date:e.date,$calendar:i})},D=e=>{var t=F["datePanelType"],a=O.value,l=$.value,u=A.value,r=G.value,i=j.value;const n=[];let s=[];switch(t){case"year":s=a;break;case"quarter":s=l;break;case"month":s=u;break;case"week":s=r;break;case"day":s=i}s.forEach(e=>{e.forEach(e=>{n.push(e.date)})}),U("view-change",{viewType:t,viewDates:n},e)},R=e=>{var t,a;L(e)||(e=e.date,t=W.type,a=F.datePanelType,"month"===t?"year"===a?(F.datePanelType="month",b(e),D(null)):u(e):"year"===t?u(e):"quarter"===t?"year"===a?(F.datePanelType="quarter",b(e),D(null)):u(e):"month"===a?(F.datePanelType="week"===t?t:"day",b(e),D(null)):"year"===a?(F.datePanelType="month",b(e),D(null)):u(e))},Q=e=>{var t,a,l,u,r;L(e)||(t=F["datePanelType"],"month"===t?(r=e.date,L({date:r})||(y.value.some(e=>_xeUtils.default.isDateSame(e.date,r,"yyyyMM"))||b(r),g(r))):"quarter"===t?(u=e.date,L({date:u})||(m.value.some(e=>_xeUtils.default.isDateSame(e.date,u,"yyyyq"))||b(u),g(u))):"year"===t?(l=e.date,L({date:l})||(p.value.some(e=>_xeUtils.default.isDateSame(e.date,l,"yyyy"))||b(l),g(l))):(a=e.date,L({date:a})||(Y.value.some(e=>_xeUtils.default.isDateSame(e.date,a,"yyyyMMdd"))||b(a),g(a))))},re=()=>{},ie=()=>{var e=W["type"],t=E.value;-1<["year","quarter","month","week"].indexOf(e)?F.datePanelType=e:F.datePanelType="day",F.currentDate=_xeUtils.default.getWhatDay(Date.now(),0,"first"),t?(X(t,0),g(t)):Z()},B=(e,t)=>{var a,l=W["festivalMethod"];return l?(a=F["datePanelType"],e=(a=(l=l({type:a,viewType:a,date:e.date,$calendar: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-calendar--date-label",{"is-notice":a.notice}]},e&&e.label?[(0,_vue.h)("span",""+(t||"")),(0,_vue.h)("span",{class:["vxe-calendar--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-calendar--date-festival",a.important?"is-important":"",a.className],style:a.style},[1<e.length?(0,_vue.h)("span",{class:["vxe-calendar--date-festival--overlap","overlap--"+e.length]},e.map(e=>(0,_vue.h)("span",e.substring(0,3)))):(0,_vue.h)("span",{class:"vxe-calendar--date-festival--label"},e[0].substring(0,3))]))),l):""+(t||"")},ne=()=>{var e=F["datePanelType"];switch(e){case"week":{const r=W["multiple"],{datePanelType:i,datePanelValue:n}=F,s=E.value;var t=H.value,a=G.value;const d=z.value,v="yyyyMMdd";return[(0,_vue.h)("table",{class:`vxe-calendar--date-${i}-view`,cellspacing:0,cellpadding:0,border:0},[(0,_vue.h)("tr",t.map(e=>(0,_vue.h)("td",{class:"vxe-calendar--view-th"},e.label))),...a.map(e=>{const t=r?e.some(t=>d.some(e=>_xeUtils.default.isDateSame(e,t.date,v))):e.some(e=>_xeUtils.default.isDateSame(s,e.date,v)),a=e.some(e=>_xeUtils.default.isDateSame(n,e.date,v));return(0,_vue.h)("tr",e.map(e=>(0,_vue.h)("td",{class:["vxe-calendar--view-td",{"is--prev":e.isPrev,"is--current":e.isCurrent,"is--now":e.isNow,"is--next":e.isNext,"is--disabled":L(e),"is--selected":t,"is--hover":a}],onClick:()=>R(e),onMouseenter:()=>Q(e)},B(e,e.label))))})])];return}case"month":{const o=W["multiple"],{datePanelType:c,datePanelValue:p}=F,_=E.value;t=A.value;const m=z.value,h="yyyyMM";return[(0,_vue.h)("table",{class:`vxe-calendar--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:["vxe-calendar--view-td",{"is--prev":t.isPrev,"is--current":t.isCurrent,"is--now":t.isNow,"is--next":t.isNext,"is--disabled":L(t),"is--selected":o?m.some(e=>_xeUtils.default.isDateSame(e,t.date,h)):_xeUtils.default.isDateSame(_,t.date,h),"is--hover":_xeUtils.default.isDateSame(p,t.date,h)}],onClick:()=>R(t),onMouseenter:()=>Q(t)},B(t,(0,_ui.getI18n)("vxe.input.date.months.m"+t.month)))))))])];return}case"quarter":{const y=W["multiple"],{datePanelType:f,datePanelValue:x}=F,g=E.value;a=$.value;const b=z.value,D="yyyyq";return[(0,_vue.h)("table",{class:`vxe-calendar--date-${f}-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:["vxe-calendar--view-td",{"is--prev":t.isPrev,"is--current":t.isCurrent,"is--now":t.isNow,"is--next":t.isNext,"is--disabled":L(t),"is--selected":y?b.some(e=>_xeUtils.default.isDateSame(e,t.date,D)):_xeUtils.default.isDateSame(g,t.date,D),"is--hover":_xeUtils.default.isDateSame(x,t.date,D)}],onClick:()=>R(t),onMouseenter:()=>Q(t)},B(t,(0,_ui.getI18n)("vxe.input.date.quarters.q"+t.quarter)))))))])];return}case"year":{const U=W["multiple"],{datePanelType:w,datePanelValue:S}=F,M=E.value;var l=O.value;const P=z.value,k="yyyy";return[(0,_vue.h)("table",{class:`vxe-calendar--date-${w}-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:["vxe-calendar--view-td",{"is--prev":t.isPrev,"is--current":t.isCurrent,"is--now":t.isNow,"is--next":t.isNext,"is--disabled":L(t),"is--selected":U?P.some(e=>_xeUtils.default.isDateSame(e,t.date,k)):_xeUtils.default.isDateSame(M,t.date,k),"is--hover":_xeUtils.default.isDateSame(S,t.date,k)}],onClick:()=>R(t),onMouseenter:()=>Q(t)},B(t,t.year))))))])];return}}{const N=W["multiple"],{datePanelType:V,datePanelValue:q}=F,C=E.value;var e=I.value,u=j.value;const T=z.value,Y="yyyyMMdd";return[(0,_vue.h)("table",{class:`vxe-calendar--date-${V}-view`,cellspacing:0,cellpadding:0,border:0},[(0,_vue.h)("tr",e.map(e=>(0,_vue.h)("th",{class:"vxe-calendar--view-th"},e.label))),...u.map(e=>(0,_vue.h)("tr",e.map(t=>(0,_vue.h)("td",{class:["vxe-calendar--view-td",{"is--prev":t.isPrev,"is--current":t.isCurrent,"is--now":t.isNow,"is--next":t.isNext,"is--disabled":L(t),"is--selected":N?T.some(e=>_xeUtils.default.isDateSame(e,t.date,Y)):_xeUtils.default.isDateSame(C,t.date,Y),"is--hover":_xeUtils.default.isDateSame(q,t.date,Y)}],onClick:()=>R(t),onMouseenter:()=>Q(t)},B(t,t.label)))))])]}},U=(e,t,a)=>{l(e,(0,_ui.createEvent)(a,{$input:i},t))};t={dispatchEvent:U};Object.assign(i,t);return i.renderVN=()=>{var{className:e,type:t}=W,a=w.value,l=P.value,u=M.value;return(0,_vue.h)("div",{ref:r,class:["vxe-calendar","type--"+t,e,{["size--"+a]:a,"is--disabled":l}],style:u},[(t=W.multiple,e=F.datePanelType,a=d.value,l=v.value,u=T.value,[(0,_vue.h)("div",{class:"vxe-calendar--header"},[(0,_vue.h)("div",{class:"vxe-calendar--type-wrapper"},["year"===e?(0,_vue.h)(_button.default,{class:"vxe-calendar--date-picker-label",disabled:"year"===e,content:u.y}):(0,_vue.h)("span",{class:"vxe-calendar--date-picker-btns"},[(0,_vue.h)(_button.default,{class:"vxe-calendar--date-picker-btn",content:u.y,onClick:ee}),u.m?(0,_vue.h)(_button.default,{class:"vxe-calendar--date-picker-btn",content:u.m,onClick:te}):(0,_ui.renderEmptyElement)(i)])]),(0,_vue.h)("div",{class:"vxe-calendar--btn-wrapper"},[(0,_vue.h)(_button.default,{disabled:a,icon:"vxe-icon-caret-left",onClick:ae}),(0,_vue.h)(_button.default,{icon:"vxe-icon-dot",onClick:le}),(0,_vue.h)(_button.default,{disabled:l,icon:"vxe-icon-caret-right",onClick:ue}),t&&V.value?(0,_vue.h)("span",{class:"vxe-calendar--btn vxe-calendar--confirm-btn"},[(0,_vue.h)("button",{class:"vxe-calendar--confirm",type:"button",onClick:re},(0,_ui.getI18n)("vxe.button.confirm"))]):null])]),(0,_vue.h)("div",{class:"vxe-calendar--body"},ne())])])},(0,_vue.watch)(()=>W.modelValue,e=>{F.inputValue=e,J()}),(0,_vue.watch)(()=>W.type,()=>{Object.assign(F,{selectValue:null,inputValue:null,datePanelValue:null,datePanelLabel:"",datePanelType:"day",selectMonth:null,currentDate:null}),K(),ie()}),(0,_vue.watch)(o,()=>{n.value&&(g(F.datePanelValue),F.inputValue=W.multiple?a.value:F.datePanelLabel)}),(0,_vue.onMounted)(()=>{ie()}),K(),i},render(){return this.renderVN()}});