UNPKG

@progress/kendo-vue-dateinputs

Version:

TODO

www.telerik.com/kendo-vue-ui

telerik/kendo-vue

9 lines (8 loc) • 11.4 kB
1
2
3
4
5
6
7
8
9
/** * @license *------------------------------------------------------------------------------------------- * Copyright © 2025 Progress Software Corporation. All rights reserved. * Licensed under commercial license. See LICENSE.md in the package root for more information *------------------------------------------------------------------------------------------- */ "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const p=require("vue"),r=require("@progress/kendo-vue-common"),i=require("@progress/kendo-date-math"),b=require("@progress/kendo-vue-intl"),F=require("../../package-metadata.js"),M=require("./ViewList.js"),m=require("../../defaults.js"),l=require("../models/CalendarViewEnum.js"),d=require("../../utils.js"),R=require("../services/BusViewService.js"),A=require("../services/DOMService.js"),x=require("../services/NavigationService.js"),y=require("./Header.js"),n=require("../utils/main.js"),E=p.defineComponent({name:"KendoCalendar",inject:{kendoIntlService:{default:null}},model:{event:"changemodel"},props:{activeRangeEnd:{type:String,default:void 0},allowReverse:{type:Boolean,default:!1},cell:[String,Function,Object],className:String,defaultActiveView:{type:String,default:"month"},modelValue:{type:[Date,Array,Object],default:void 0},defaultValue:{type:[Date,Array,Object],default:null},disabled:{type:Boolean,default:!1},focusedDate:Date,id:{type:String,default:function(){return r.guid()}},headerTitle:[String,Function,Object],max:{type:Date,default:function(){return m.MAX_DATE}},min:{type:Date,default:function(){return m.MIN_DATE}},mode:String,navigation:{type:Boolean,default:!0},tabIndex:Number,value:[Date,Array,Object],views:{type:Number,default:1},weekNumber:Boolean,weekCell:[String,Function,Object],topView:{type:String,default:"century"},bottomView:{type:String,default:"month"},onFocus:Function,onBlur:Function,onChange:Function,onKeydown:Function},data:function(){return{valueDuringOnChange:void 0,currentFocusedDate:null,currentActiveView:null,currentValue:null,cellUID:r.guid(),isActive:!1,oldValue:null,didNavigationChange:!1,currentActiveRangeEnd:void 0}},created:function(){r.validatePackage(F.packageMetadata);const e=n.calculateValue(this.currentMin,this.currentMax,this.$props.defaultValue,this.$props.value||this.$props.modelValue),t=n.extractDateFromValue(this.currentMin,this.currentMax,e),a=n.extractMultipleFromValue(this.currentMin,this.currentMax,e),s=n.extractRangeFromValue(e),c=n.extractFocusedDate(t,a,s);this._hasMounted=!1,this.$data.currentFocusedDate=d.dateInRange(this.$props.focusedDate||c||d.getToday(),this.currentMin,this.currentMax),this.$data.currentValue=e,this.$data.currentActiveView=d.viewInRange(l.CalendarViewEnum[this.$props.defaultActiveView],l.CalendarViewEnum[this.$props.bottomView],l.CalendarViewEnum[this.$props.topView]),this.$data.currentActiveRangeEnd=n.extractActiveRange(s,t),this._dates=[],this._calculateFocusFromValue=!1,this._lastView=this.$props.activeView||this.$data.currentActiveView,this._lastViewsCount=this.$props.views,this._dom=new A.DOMService,this._bus=new R.BusViewService(this.handleViewChange),this._navigation=new x.NavigationService(this._bus),this._oldValue=e},watch:{value:function(e){this.$data.currentFocusedDate=e},focusedDate:function(e){this.$data.currentFocusedDate=e}},setup(){return{kendoIntlService:p.inject("kendoIntlService",{})}},mounted(){this.calendarViewList=this.calendarViewListRef,this._calculateFocusFromValue=!0},updated(){const e=n.extractDateFromValue(this.currentMin,this.currentMax,this.computedValue());this._calculateFocusFromValue=!!(this._selectedDate&&e&&this._selectedDate.getTime()&&e.getTime()),this._lastView=this.$props.activeView||this.$data.currentActiveView,this._lastViewsCount=this.$props.views,this._oldValue=this.computedValue(),this.calendarViewList||(this.calendarViewList=this.calendarViewListRef)},computed:{activeRange(){return this.$props.activeRangeEnd!==void 0?this.$props.activeRangeEnd:this.$data.currentActiveRangeEnd},currentMin(){return i.getDate(this.$props.min)},currentMax(){return i.getDate(this.$props.max)}},methods:{element(){return this.$el},computedValue(){return this.$data.valueDuringOnChange!==void 0?this.$data.valueDuringOnChange:this.$props.value!==void 0?this.$props.value:this.$props.modelValue!==void 0?this.$props.modelValue:this.$data.currentValue},focus(){this.calendarViewList&&this.calendarViewList.$el.firstElementChild.focus()},handleBlur(){this.$data.isActive=!1},handleFocus(){this.$data.isActive=!0},emitBlur(e){this.$emit("blur",e)},emitFocus(e){this.$emit("focus",e)},handleTodayClick(e){if(this.$props.disabled)return;this.$data.didNavigationChange=!0;const t=i.cloneDate(e.value);this.$data.currentFocusedDate=t,this.$data.currentValue=t,this.triggerChange(t,e)},handleViewChange({view:e}){this.$data.currentActiveView=e},handlePrevClick(e){const t=i.cloneDate(e.value);this.focus(),!this.$props.disabled&&(this.$data.currentFocusedDate=t)},handleTitleClick(){this.focus()},handleNextClick(e){const t=i.cloneDate(e.value);this.focus(),!this.$props.disabled&&(this.$data.currentFocusedDate=t)},handleCellEnter(e){this.$props.mode==="range"&&(this.$data.currentFocusedDate=e)},generateRange(e,t){let{end:a,start:s}=t;const c=t.start!==null&&e.getTime()<=t.start.getTime();return!this.$props.allowReverse&&c?{start:e,end:this._selectedRange.start}:this.activeRange!=="end"?{start:e,end:a}:{start:s||this._selectedDate,end:e}},clampRange(e){return{start:e,end:null}},handleWeekCellClick(e){this.$emit("weekcellclick",e)},handleWeekNameClick(e){this.$emit("weeknameclick",e)},handleDateChange(e){const t=i.cloneDate(e.value),a=this._bus.canMoveDown(this.$data.currentActiveView);if(this.$props.disabled)return;if(a)if(e.isTodayClick)this._bus.moveToBottom(this.$data.currentActiveView);else{this._bus.moveDown(this.$data.currentActiveView,e.event),this.$data.currentFocusedDate=t;return}let s,c;switch(this.$props.mode){case"single":s=i.cloneDate(e.value);break;case"multiple":if(Array.isArray(this._selectedMultiple)){let u=this._selectedMultiple.slice(),h=-1;u.forEach((g,o)=>{i.isEqualDate(g,e.value)&&(h=o)}),h!==-1?u.splice(h,1):u.push(i.cloneDate(e.value)),s=u.slice()}else this._selectedDate?s=[i.cloneDate(this._selectedDate),i.cloneDate(e.value)]:s=[i.cloneDate(e.value)];break;case"range":c=this._selectedRange.start!==null&&this._selectedRange.end!==null&&this.activeRange==="start",s=c?this.clampRange(e.value):this.generateRange(e.value,this._selectedRange),this.$data.currentActiveRangeEnd=this.activeRange!=="end"?"end":"start";break;default:s=i.cloneDate(e.value);break}this.$data.currentValue=s,this.triggerChange(s,e)},triggerChange(e,t){this.$data.valueDuringOnChange=e;const a={event:t.event,value:e,component:this,target:{name:this.$props.name,value:e,valueAsDate:e}};this.$emit("changemodel",e),this.$emit("update:modelValue",e),this.$emit("change",a),this.$data.valueDuringOnChange=void 0},handleMouseDown(e){const t=i.cloneDate(e.value);this.$props.disabled||this.$data.currentActiveView!==0||(this.$data.currentFocusedDate=t)},tableKeyDown(e){const{keyCode:t}=e;if(this.$emit("keydown",e),t===r.Keys.enter){const a={event:e,value:this._focusedDate,component:this,target:{name:this.$props.name,value:this._focusedDate,valueAsDate:this._focusedDate}};this.handleDateChange(a)}else{const a=d.dateInRange(this._navigation.move(this._focusedDate,this._navigation.action(e),this.$data.currentActiveView,this._service,e),this.currentMin,this.currentMax);if(i.isEqualDate(this._focusedDate,a))return;this._calculateFocusFromValue=!1,this.$data.currentFocusedDate=a}e.preventDefault()},isValueEqual(e,t){return e instanceof Date&&t instanceof Date?i.isEqualDate(e,t):e instanceof Object&&t instanceof Object?!!(e&&t&&i.isEqualDate(e.start,t.start)&&i.isEqualDate(e.end,t.end)):e instanceof Array&&t instanceof Array?!!(e&&t&&e.length===t.length):!1},rangeWithFocused(e,t){return{start:e.start,end:e.end===null&&e.start!==null&&this.$data.isActive?t.end:e.end}}},render(){const e=this.$props.views,t=this.computedValue(),a=this.$data.currentFocusedDate,s=t!==null&&this._oldValue!==null?!this.isValueEqual(t,this._oldValue):t!==this._oldValue;this._selectedDate=n.extractDateFromValue(this.currentMin,this.currentMax,t),this._selectedMultiple=n.extractMultipleFromValue(this.currentMin,this.currentMax,t);const c=r.templateRendering.call(this,this.$props.cell,r.getListeners.call(this)),u=r.templateRendering.call(this,this.$props.weekCell,r.getListeners.call(this)),h=r.templateRendering.call(this,this.$props.headerTitle,r.getListeners.call(this)),g=d.viewInRange(this.$data.currentActiveView,l.CalendarViewEnum[this.$props.bottomView],l.CalendarViewEnum[this.$props.topView]);this._selectedDate=n.extractDateFromValue(this.currentMin,this.currentMax,t),this._selectedMultiple=n.extractMultipleFromValue(this.currentMin,this.currentMax,t),this._selectedRange=n.extractRangeFromValue(t);const o=n.extractFocusedDate(this._selectedDate,this._selectedMultiple,this._selectedRange),f=d.dateInRange(s&&o!==null?o:a,this.currentMin,this.currentMax);f instanceof Date?this._focusedDate=i.getDate(f):o&&(this._focusedDate=o);const v=this.rangeWithFocused(this._selectedRange,a);this._intl=b.provideIntlService(this),this._bus.configure(l.CalendarViewEnum[this.$props.bottomView],l.CalendarViewEnum[this.$props.topView]),this._service=this._bus.service(g,this._intl);const D=r.classNames("k-calendar","k-calendar-md",{"k-calendar-range":e>1,"k-disabled":this.$props.disabled,"k-week-number":this.$props.weekNumber},this.$props.className),$=this._lastView!==this.$data.currentActiveView,w=this._dates&&this._service.isInArray(this._focusedDate,this._dates),V=this._lastViewsCount!==this.$props.views;(!w||$||V)&&(this._dates=this._service.datesList(this._focusedDate,e));const _=i.cloneDate(this._dates&&this._dates[0]?this._dates[0]:void 0),C=[this.$props.navigation&&p.createVNode(y.Header,{tabIndex:this.$props.disabled?void 0:this.$props.tabIndex||0,activeView:this.$data.currentActiveView,currentDate:_,focusedDate:this._focusedDate,min:this.currentMin,max:this.currentMax,rangeLength:this.$props.views,onTodayclick:this.handleTodayClick,onNextclick:this.handleNextClick,onPrevclick:this.handlePrevClick,onTitleclick:this.handleTitleClick,bus:this._bus,service:this._service,headerTitle:h},null),p.createVNode(M.ViewList,{allowReverse:this.$props.allowReverse,isActive:this.$data.isActive,tabIndex:this.$props.tabIndex||0,ref:k=>{this.calendarViewListRef=k},activeView:this.$data.currentActiveView,focusedDate:this._focusedDate,min:this.currentMin,max:this.currentMax,bus:this._bus,dates:this._dates,shouldScroll:this.$data.didNavigationChange,service:this._service,cell:c,weekCell:u,dom:this._dom,views:this.$props.views,selectionRange:v,showWeekNumbers:this.$props.weekNumber,onChange:this.handleDateChange,onWeekcellclick:this.handleWeekCellClick,onWeeknameclick:this.handleWeekNameClick,onListmousedown:this.handleMouseDown,onCellenter:this.handleCellEnter,onListkeydown:this.tableKeyDown,onListfocus:this.handleFocus,onListblur:this.handleBlur,value:this._selectedMultiple||this._selectedDate,cellUID:this.$data.cellUID},null)];return p.createVNode("div",{"aria-disabled":this.$props.disabled===!0?!0:void 0,class:D,id:this.$props.id,onFocusout:this.emitBlur,onFocusin:this.emitFocus},[C])}});exports.Calendar=E;