@progress/kendo-vue-dateinputs 7.1.0-develop.6 → 8.0.0-develop.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dateinput/DateInput.js +1 -1
- package/dateinput/DateInput.mjs +6 -9
- package/datepicker/DatePicker.js +1 -1
- package/datepicker/DatePicker.mjs +1 -4
- package/daterangepicker/DateRangePicker.js +1 -1
- package/daterangepicker/DateRangePicker.mjs +2 -5
- package/datetimepicker/DateTimePicker.js +1 -1
- package/datetimepicker/DateTimePicker.mjs +13 -16
- package/dist/cdn/js/kendo-vue-dateinputs.js +1 -1
- package/index.d.mts +38 -120
- package/index.d.ts +38 -120
- package/package-metadata.js +1 -1
- package/package-metadata.mjs +2 -2
- package/package.json +8 -8
- package/timepicker/TimePicker.js +1 -1
- package/timepicker/TimePicker.mjs +2 -5
package/dateinput/DateInput.js
CHANGED
|
@@ -5,4 +5,4 @@
|
|
|
5
5
|
* Licensed under commercial license. See LICENSE.md in the package root for more information
|
|
6
6
|
*-------------------------------------------------------------------------------------------
|
|
7
7
|
*/
|
|
8
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("vue"),u=require("@progress/kendo-date-math"),y=require("@progress/kendo-vue-intl"),T=require("./models/kendo-date.js"),r=require("@progress/kendo-vue-common"),S=require("@progress/kendo-vue-buttons"),B=require("../package-metadata.js"),p=require("./utils.js"),D=require("../utils.js"),l=require("../messages/main.js"),P=require("../timepicker/utils.js"),v=require("../defaults.js"),_=require("@progress/kendo-vue-labels"),b=require("@progress/kendo-svg-icons");function q(e){return typeof e=="function"||Object.prototype.toString.call(e)==="[object Object]"&&!o.isVNode(e)}const E="Please enter a valid value!",A=o.defineComponent({name:"DateInput",model:{event:"changemodel"},inject:{kendoIntlService:{default:null},kendoLocalizationService:{default:null}},emits:{change:e=>!0,changemodel:e=>!0,"update:modelValue":e=>!0,focus:e=>!0,blur:e=>!0},props:{modelValue:Date,value:Date,defaultValue:Date,format:{type:[String,Object],default:function(){return p.defaultFormat}},formatPlaceholder:{type:[String,Object],default:function(){return p.defaultFormatPlaceholder}},rounded:{type:String,default:"medium",validator:function(e){return["small","medium","large","full"].includes(e)}},fillMode:{type:String,default:"solid",validator:function(e){return["solid","flat","outline"].includes(e)}},size:{type:String,default:"medium",validator:function(e){return["small","medium","large"].includes(e)}},tabIndex:Number,title:String,steps:Object,placeholder:String,max:{type:Date,default:function(){return u.cloneDate(D.MAX_DATE)}},min:{type:Date,default:function(){return u.cloneDate(D.MIN_DATE)}},maxTime:{type:Date,default:function(){return u.cloneDate(v.MAX_TIME)}},minTime:{type:Date,default:function(){return u.cloneDate(v.MIN_TIME)}},disabled:{type:Boolean,default:!1},spinners:{type:Boolean,default:!1},name:String,dir:String,label:String,id:String,validationMessage:{type:String,default:E},required:{type:Boolean,default:!1},validityStyles:{type:Boolean,default:!0},validate:Boolean,valid:{type:Boolean,default:void 0},ariaRole:{type:String,default:"textbox"},ariaControls:String,ariaLabel:String,ariaExpanded:{type:Boolean,default:void 0},ariaHasPopup:{type:String,default:void 0},inputAttributes:Object},data(){return{kendoDate:null,currentFormat:void 0,valueDuringOnChange:void 0,hasMounted:!1,isEmpty:void 0,lastSelectedSymbol:void 0,isFocused:!1}},created(){r.validatePackage(B.packageMetadata);const{formatPlaceholder:e,format:t,value:a,defaultValue:i}=this.$props;this.kendoDate=new T.KendoDate(this.intl,e,t),this.kendoDate.setValue(null),this._emptyText=this.kendoDate.getTextAndFormat().text,this.kendoDate.setValue(a||i||null),this._element=null,this._inputId=r.guid()},computed:{computedValue(){return this.$data.valueDuringOnChange!==void 0?this.$data.valueDuringOnChange:this.kendoDate&&this.kendoDate.getDateObject()},wrapperClassNames(){const e=!this.$data.hasMounted||!this.$props.validityStyles||this.validity().valid,t=this.$props.disabled,{size:a,fillMode:i,rounded:n}=this.$props;return{"k-dateinput":!0,"k-input":!0,[`k-input-${r.kendoThemeMaps.sizeMap[a]||a}`]:a,[`k-input-${i}`]:i,[`k-rounded-${r.kendoThemeMaps.roundedMap[n]||n}`]:n,"k-disabled":t,"k-invalid":!e&&e!==void 0,"k-focus":this.isFocused,"k-rtl":this.$props.dir==="rtl"}}},methods:{selection(){let e={start:0,end:0};const t=this.element();return t!==null&&t.selectionStart!==void 0&&(e={start:t.selectionStart,end:t.selectionEnd}),e},element(){return this._element},focus(e){this._element&&this._element.focus(e)},handleFocus(e){this.$data.isFocused=!0,this.$emit("focus",{event:e})},handleBlur(e){this.$data.isFocused=!1,this.$emit("blur",{event:e})},intl(){return y.provideIntlService(this)},setValidity(){const e=this.element();e&&e.setCustomValidity&&e.setCustomValidity(this.validity().valid?"":this.$props.validationMessage)},spinnersMouseDown(e){const t=this.element();e.preventDefault(),t&&r.canUseDOM&&document.activeElement!==t&&t.focus({preventScroll:!0})},elementChange(e){const t=this.element();if(!t||!this.kendoDate)return;const{text:a,format:i}=this.kendoDate.getTextAndFormat();this.$data.currentFormat=i;const n=this.computedValue,s=p.approximateStringMatching(a,this.$data.currentFormat,t.value,this.selection().start),c=s.length===1&&s[0][1]==="_";if(!c)for(let d=0;d<s.length;d++)this.kendoDate.parsePart(s[d][0],s[d][1]);s.length&&s[0][0]!=="_"&&this.setSelection(this.selectionBySymbol(s[0][0])),c&&this.switchDateSegment(1),this.triggerChange(e,n)},elementClick(e){this.setSelection(this.selectionByIndex(this.selection().start))},wheel(e){const t=this.element();r.canUseDOM&&document.activeElement!==t||(e.deltaY<0&&(e.preventDefault(),this.increasePart(e)),e.deltaY>0&&(e.preventDefault(),this.decreasePart(e)))},increasePart(e){e.preventDefault(),this.modifyDateSegmentValue(1,e)},decreasePart(e){e.preventDefault(),this.modifyDateSegmentValue(-1,e)},elementKeyDown(e){if(!e.altKey){switch(e.keyCode){case 37:this.switchDateSegment(-1);break;case 38:this.modifyDateSegmentValue(1,e);break;case 39:this.switchDateSegment(1);break;case 40:this.modifyDateSegmentValue(-1,e);break;default:return}e.preventDefault()}},setSelection(e){const t=this.element();this.$data.lastSelectedSymbol=this.$data.currentFormat[e.start],r.canUseDOM&&window.requestAnimationFrame(()=>{t&&r.canUseDOM&&document.activeElement===t&&t.setSelectionRange(e.start,e.end)})},triggerChange(e,t){this.$data.valueDuringOnChange=this.computedValue,u.isEqual(t,this.computedValue)||(this.$emit("changemodel",this.computedValue),this.$emit("update:modelValue",this.computedValue),this.$emit("change",{event:e,value:this.computedValue,component:this,target:{name:this.$props.name,value:this.$data.valueDuringOnChange,valueAsDate:this.$data.valueDuringOnChange},validity:this.validity()})),this.$data.valueDuringOnChange=void 0},selectionBySymbol(e){let t=-1,a=0;for(let i=0;i<this.$data.currentFormat.length;i++)this.$data.currentFormat[i]===e&&(a=i+1,t===-1&&(t=i));return t<0&&(t=0),{start:t,end:a}},selectionByIndex(e){let t={start:e,end:e};for(let a=e,i=e-1;a<this.$data.currentFormat.length||i>=0;a++,i--){if(a<this.$data.currentFormat.length&&this.$data.currentFormat[a]!=="_"){t=this.selectionBySymbol(this.$data.currentFormat[a]);break}if(i>=0&&this.$data.currentFormat[i]!=="_"){t=this.selectionBySymbol(this.$data.currentFormat[i]);break}}return t},switchDateSegment(e){const{start:t,end:a}=this.selection();if(t<a&&this.$data.currentFormat[t]!==this.$data.currentFormat[a-1]){this.setSelection(this.selectionByIndex(e>0?t:a-1));return}const i=this.$data.currentFormat[t];let n=t+e;for(;n>0&&n<this.$data.currentFormat.length&&!(this.$data.currentFormat[n]!==i&&this.$data.currentFormat[n]!=="_");)n+=e;if(this.$data.currentFormat[n]==="_")return;let s=n;for(;s>=0&&s<this.$data.currentFormat.length&&this.$data.currentFormat[s]===this.$data.currentFormat[n];)s+=e;n>s&&(s+1!==t||n+1!==a)?this.setSelection({start:s+1,end:n+1}):n<s&&(n!==t||s!==a)&&this.setSelection({start:n,end:s})},modifyDateSegmentValue(e,t){if(!this.kendoDate)return;const a=this.computedValue,i=this.$data.currentFormat[this.selection().start],n=this.kendoDate.symbolMap(i),s=((this.$props.steps||{})[n]||1)*e;this.kendoDate.modifyPart(i,s),this.setSelection(this.selectionBySymbol(i)),this.triggerChange(t,a)},validity(){const e=p.isInRange(this.computedValue,this.$props.min,this.$props.max)&&P.isInTimeRange(this.computedValue,this.$props.minTime,this.$props.maxTime),t=this.$props.validationMessage!==void 0,a=(!this.$props.required||this.computedValue!==null)&&e,i=this.$props.valid!==void 0?this.$props.valid:a;return{customError:t,rangeOverflow:this.computedValue&&this.$props.max.getTime()<this.computedValue.getTime()||!1,rangeUnderflow:this.computedValue&&this.computedValue.getTime()<this.$props.min.getTime()||!1,valid:i,valueMissing:this.computedValue===null}}},mounted(){this._element=r.getRef(this,"input"),this.setValidity(),this.$data.hasMounted=!0},updated(){this.$data.lastSelectedSymbol&&this.setSelection(this.selectionBySymbol(this.$data.lastSelectedSymbol)),this.setValidity()},setup(){const e=o.ref(null),t=o.inject("kendoIntlService",{}),a=o.inject("kendoLocalizationService",{});return{inputRef:e,kendoIntlService:t,kendoLocalizationService:a}},render(){const e=r.getDefaultSlots(this),t=y.provideLocalizationService(this),{formatPlaceholder:a,format:i,value:n,modelValue:s,name:c,label:d,id:k,ariaLabel:V,ariaExpanded:F,ariaHasPopup:M,ariaRole:I,ariaControls:C,inputAttributes:x}=this.$props,m=n!==void 0?n:s;this.kendoDate.format=i,this.kendoDate.formatPlaceholder=a,this.valueDuringOnChange=this.valueDuringOnChange?this.valueDuringOnChange:void 0,m!==void 0&&this.computedValue!==m&&this.kendoDate.setValue(m);const{text:f,format:w}=this.kendoDate.getTextAndFormat();this.$data.currentFormat=w,this.$data.isEmpty=f===this._emptyText;const g=this.$props.placeholder!==void 0&&this.$data.isEmpty&&!this.$data.isFocused?null:f,$=k||this._inputId,O=!this.$props.validityStyles||this.validity().valid,h=o.createVNode("span",{class:this.wrapperClassNames,dir:this.$props.dir},[o.createVNode("input",o.mergeProps({role:I,tabindex:this.$props.tabIndex,disabled:this.$props.disabled,title:this.$props.title!==void 0?this.$props.title:f,type:"text",spellcheck:!1,autocomplete:"off",autocorrect:"off",class:"k-input-inner",id:$,placeholder:this.$props.placeholder,onWheel:this.wheel,onClick:this.elementClick,onInput:this.elementChange,onKeydown:this.elementKeyDown,onChange:r.noop,onFocusin:this.handleFocus,onFocusout:this.handleBlur,value:g,name:c,"aria-label":V,"aria-expanded":F,"aria-haspopup":M,"aria-controls":C,"aria-disabled":this.$props.disabled,ref:r.setRef(this,"input")},x),null),e,this.$props.spinners&&o.createVNode("span",{class:"k-input-spinner k-spin-button",onMousedown:this.spinnersMouseDown},[o.createVNode(S.Button,{type:"button",tabIndex:-1,icon:"caret-alt-up",svgIcon:b.caretAltUpIcon,size:this.$props.size,fillMode:this.$props.fillMode,class:"k-spinner-increase","aria-label":t.toLanguageString(l.increaseValue,l.messages[l.increaseValue]),title:t.toLanguageString(l.increaseValue,l.messages[l.increaseValue]),onClick:this.increasePart},null),o.createVNode(S.Button,{type:"button",tabIndex:-1,class:"k-spinner-decrease",icon:"caret-alt-down",svgIcon:b.caretAltDownIcon,size:this.$props.size,fillMode:this.$props.fillMode,"aria-label":t.toLanguageString(l.decreaseValue,l.messages[l.decreaseValue]),title:t.toLanguageString(l.decreaseValue,l.messages[l.decreaseValue]),onClick:this.decreasePart},null)])]);return d?o.createVNode(_.FloatingLabel,{label:d,editorId:$,editorValue:g,editorPlaceholder:this.$props.placeholder,editorValid:O,editorDisabled:this.$props.disabled},q(h)?h:{default:()=>[h]}):h}});exports.DateInput=A;
|
|
8
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("vue"),u=require("@progress/kendo-date-math"),y=require("@progress/kendo-vue-intl"),T=require("./models/kendo-date.js"),r=require("@progress/kendo-vue-common"),S=require("@progress/kendo-vue-buttons"),B=require("../package-metadata.js"),p=require("./utils.js"),D=require("../utils.js"),l=require("../messages/main.js"),P=require("../timepicker/utils.js"),v=require("../defaults.js"),_=require("@progress/kendo-vue-labels"),b=require("@progress/kendo-svg-icons");function q(e){return typeof e=="function"||Object.prototype.toString.call(e)==="[object Object]"&&!o.isVNode(e)}const E="Please enter a valid value!",A=o.defineComponent({name:"DateInput",model:{event:"changemodel"},inject:{kendoIntlService:{default:null},kendoLocalizationService:{default:null}},emits:{change:e=>!0,changemodel:e=>!0,"update:modelValue":e=>!0,focus:e=>!0,blur:e=>!0},props:{modelValue:Date,value:Date,defaultValue:Date,format:{type:[String,Object],default:function(){return p.defaultFormat}},formatPlaceholder:{type:[String,Object],default:function(){return p.defaultFormatPlaceholder}},rounded:{type:String,validator:function(e){return["none","small","medium","large","full"].includes(e)}},fillMode:{type:String,validator:function(e){return["solid","flat","outline"].includes(e)}},size:{type:String,validator:function(e){return["small","medium","large"].includes(e)}},tabIndex:Number,title:String,steps:Object,placeholder:String,max:{type:Date,default:function(){return u.cloneDate(D.MAX_DATE)}},min:{type:Date,default:function(){return u.cloneDate(D.MIN_DATE)}},maxTime:{type:Date,default:function(){return u.cloneDate(v.MAX_TIME)}},minTime:{type:Date,default:function(){return u.cloneDate(v.MIN_TIME)}},disabled:{type:Boolean,default:!1},spinners:{type:Boolean,default:!1},name:String,dir:String,label:String,id:String,validationMessage:{type:String,default:E},required:{type:Boolean,default:!1},validityStyles:{type:Boolean,default:!0},validate:Boolean,valid:{type:Boolean,default:void 0},ariaRole:{type:String,default:"textbox"},ariaControls:String,ariaLabel:String,ariaExpanded:{type:Boolean,default:void 0},ariaHasPopup:{type:String,default:void 0},inputAttributes:Object},data(){return{kendoDate:null,currentFormat:void 0,valueDuringOnChange:void 0,hasMounted:!1,isEmpty:void 0,lastSelectedSymbol:void 0,isFocused:!1}},created(){r.validatePackage(B.packageMetadata);const{formatPlaceholder:e,format:t,value:a,defaultValue:i}=this.$props;this.kendoDate=new T.KendoDate(this.intl,e,t),this.kendoDate.setValue(null),this._emptyText=this.kendoDate.getTextAndFormat().text,this.kendoDate.setValue(a||i||null),this._element=null,this._inputId=r.guid()},computed:{computedValue(){return this.$data.valueDuringOnChange!==void 0?this.$data.valueDuringOnChange:this.kendoDate&&this.kendoDate.getDateObject()},wrapperClassNames(){const e=!this.$data.hasMounted||!this.$props.validityStyles||this.validity().valid,t=this.$props.disabled,{size:a,fillMode:i,rounded:n}=this.$props;return{"k-dateinput":!0,"k-input":!0,[`k-input-${r.kendoThemeMaps.sizeMap[a]||a}`]:a,[`k-input-${i}`]:i,[`k-rounded-${r.kendoThemeMaps.roundedMap[n]||n}`]:n,"k-disabled":t,"k-invalid":!e&&e!==void 0,"k-focus":this.isFocused,"k-rtl":this.$props.dir==="rtl"}}},methods:{selection(){let e={start:0,end:0};const t=this.element();return t!==null&&t.selectionStart!==void 0&&(e={start:t.selectionStart,end:t.selectionEnd}),e},element(){return this._element},focus(e){this._element&&this._element.focus(e)},handleFocus(e){this.$data.isFocused=!0,this.$emit("focus",{event:e})},handleBlur(e){this.$data.isFocused=!1,this.$emit("blur",{event:e})},intl(){return y.provideIntlService(this)},setValidity(){const e=this.element();e&&e.setCustomValidity&&e.setCustomValidity(this.validity().valid?"":this.$props.validationMessage)},spinnersMouseDown(e){const t=this.element();e.preventDefault(),t&&r.canUseDOM&&document.activeElement!==t&&t.focus({preventScroll:!0})},elementChange(e){const t=this.element();if(!t||!this.kendoDate)return;const{text:a,format:i}=this.kendoDate.getTextAndFormat();this.$data.currentFormat=i;const n=this.computedValue,s=p.approximateStringMatching(a,this.$data.currentFormat,t.value,this.selection().start),c=s.length===1&&s[0][1]==="_";if(!c)for(let d=0;d<s.length;d++)this.kendoDate.parsePart(s[d][0],s[d][1]);s.length&&s[0][0]!=="_"&&this.setSelection(this.selectionBySymbol(s[0][0])),c&&this.switchDateSegment(1),this.triggerChange(e,n)},elementClick(e){this.setSelection(this.selectionByIndex(this.selection().start))},wheel(e){const t=this.element();r.canUseDOM&&document.activeElement!==t||(e.deltaY<0&&(e.preventDefault(),this.increasePart(e)),e.deltaY>0&&(e.preventDefault(),this.decreasePart(e)))},increasePart(e){e.preventDefault(),this.modifyDateSegmentValue(1,e)},decreasePart(e){e.preventDefault(),this.modifyDateSegmentValue(-1,e)},elementKeyDown(e){if(!e.altKey){switch(e.keyCode){case 37:this.switchDateSegment(-1);break;case 38:this.modifyDateSegmentValue(1,e);break;case 39:this.switchDateSegment(1);break;case 40:this.modifyDateSegmentValue(-1,e);break;default:return}e.preventDefault()}},setSelection(e){const t=this.element();this.$data.lastSelectedSymbol=this.$data.currentFormat[e.start],r.canUseDOM&&window.requestAnimationFrame(()=>{t&&r.canUseDOM&&document.activeElement===t&&t.setSelectionRange(e.start,e.end)})},triggerChange(e,t){this.$data.valueDuringOnChange=this.computedValue,u.isEqual(t,this.computedValue)||(this.$emit("changemodel",this.computedValue),this.$emit("update:modelValue",this.computedValue),this.$emit("change",{event:e,value:this.computedValue,component:this,target:{name:this.$props.name,value:this.$data.valueDuringOnChange,valueAsDate:this.$data.valueDuringOnChange},validity:this.validity()})),this.$data.valueDuringOnChange=void 0},selectionBySymbol(e){let t=-1,a=0;for(let i=0;i<this.$data.currentFormat.length;i++)this.$data.currentFormat[i]===e&&(a=i+1,t===-1&&(t=i));return t<0&&(t=0),{start:t,end:a}},selectionByIndex(e){let t={start:e,end:e};for(let a=e,i=e-1;a<this.$data.currentFormat.length||i>=0;a++,i--){if(a<this.$data.currentFormat.length&&this.$data.currentFormat[a]!=="_"){t=this.selectionBySymbol(this.$data.currentFormat[a]);break}if(i>=0&&this.$data.currentFormat[i]!=="_"){t=this.selectionBySymbol(this.$data.currentFormat[i]);break}}return t},switchDateSegment(e){const{start:t,end:a}=this.selection();if(t<a&&this.$data.currentFormat[t]!==this.$data.currentFormat[a-1]){this.setSelection(this.selectionByIndex(e>0?t:a-1));return}const i=this.$data.currentFormat[t];let n=t+e;for(;n>0&&n<this.$data.currentFormat.length&&!(this.$data.currentFormat[n]!==i&&this.$data.currentFormat[n]!=="_");)n+=e;if(this.$data.currentFormat[n]==="_")return;let s=n;for(;s>=0&&s<this.$data.currentFormat.length&&this.$data.currentFormat[s]===this.$data.currentFormat[n];)s+=e;n>s&&(s+1!==t||n+1!==a)?this.setSelection({start:s+1,end:n+1}):n<s&&(n!==t||s!==a)&&this.setSelection({start:n,end:s})},modifyDateSegmentValue(e,t){if(!this.kendoDate)return;const a=this.computedValue,i=this.$data.currentFormat[this.selection().start],n=this.kendoDate.symbolMap(i),s=((this.$props.steps||{})[n]||1)*e;this.kendoDate.modifyPart(i,s),this.setSelection(this.selectionBySymbol(i)),this.triggerChange(t,a)},validity(){const e=p.isInRange(this.computedValue,this.$props.min,this.$props.max)&&P.isInTimeRange(this.computedValue,this.$props.minTime,this.$props.maxTime),t=this.$props.validationMessage!==void 0,a=(!this.$props.required||this.computedValue!==null)&&e,i=this.$props.valid!==void 0?this.$props.valid:a;return{customError:t,rangeOverflow:this.computedValue&&this.$props.max.getTime()<this.computedValue.getTime()||!1,rangeUnderflow:this.computedValue&&this.computedValue.getTime()<this.$props.min.getTime()||!1,valid:i,valueMissing:this.computedValue===null}}},mounted(){this._element=r.getRef(this,"input"),this.setValidity(),this.$data.hasMounted=!0},updated(){this.$data.lastSelectedSymbol&&this.setSelection(this.selectionBySymbol(this.$data.lastSelectedSymbol)),this.setValidity()},setup(){const e=o.ref(null),t=o.inject("kendoIntlService",{}),a=o.inject("kendoLocalizationService",{});return{inputRef:e,kendoIntlService:t,kendoLocalizationService:a}},render(){const e=r.getDefaultSlots(this),t=y.provideLocalizationService(this),{formatPlaceholder:a,format:i,value:n,modelValue:s,name:c,label:d,id:k,ariaLabel:V,ariaExpanded:F,ariaHasPopup:M,ariaRole:I,ariaControls:C,inputAttributes:x}=this.$props,m=n!==void 0?n:s;this.kendoDate.format=i,this.kendoDate.formatPlaceholder=a,this.valueDuringOnChange=this.valueDuringOnChange?this.valueDuringOnChange:void 0,m!==void 0&&this.computedValue!==m&&this.kendoDate.setValue(m);const{text:f,format:w}=this.kendoDate.getTextAndFormat();this.$data.currentFormat=w,this.$data.isEmpty=f===this._emptyText;const g=this.$props.placeholder!==void 0&&this.$data.isEmpty&&!this.$data.isFocused?null:f,$=k||this._inputId,O=!this.$props.validityStyles||this.validity().valid,h=o.createVNode("span",{class:this.wrapperClassNames,dir:this.$props.dir},[o.createVNode("input",o.mergeProps({role:I,tabindex:this.$props.tabIndex,disabled:this.$props.disabled,title:this.$props.title!==void 0?this.$props.title:f,type:"text",spellcheck:!1,autocomplete:"off",autocorrect:"off",class:"k-input-inner",id:$,placeholder:this.$props.placeholder,onWheel:this.wheel,onClick:this.elementClick,onInput:this.elementChange,onKeydown:this.elementKeyDown,onChange:r.noop,onFocusin:this.handleFocus,onFocusout:this.handleBlur,value:g,name:c,"aria-label":V,"aria-expanded":F,"aria-haspopup":M,"aria-controls":C,"aria-disabled":this.$props.disabled,ref:r.setRef(this,"input")},x),null),e,this.$props.spinners&&o.createVNode("span",{class:"k-input-spinner k-spin-button",onMousedown:this.spinnersMouseDown},[o.createVNode(S.Button,{type:"button",tabIndex:-1,icon:"caret-alt-up",svgIcon:b.caretAltUpIcon,size:this.$props.size,fillMode:this.$props.fillMode,class:"k-spinner-increase","aria-label":t.toLanguageString(l.increaseValue,l.messages[l.increaseValue]),title:t.toLanguageString(l.increaseValue,l.messages[l.increaseValue]),onClick:this.increasePart},null),o.createVNode(S.Button,{type:"button",tabIndex:-1,class:"k-spinner-decrease",icon:"caret-alt-down",svgIcon:b.caretAltDownIcon,size:this.$props.size,fillMode:this.$props.fillMode,"aria-label":t.toLanguageString(l.decreaseValue,l.messages[l.decreaseValue]),title:t.toLanguageString(l.decreaseValue,l.messages[l.decreaseValue]),onClick:this.decreasePart},null)])]);return d?o.createVNode(_.FloatingLabel,{label:d,editorId:$,editorValue:g,editorPlaceholder:this.$props.placeholder,editorValid:O,editorDisabled:this.$props.disabled},q(h)?h:{default:()=>[h]}):h}});exports.DateInput=A;
|
package/dateinput/DateInput.mjs
CHANGED
|
@@ -14,7 +14,7 @@ import { Button as D } from "@progress/kendo-vue-buttons";
|
|
|
14
14
|
import { packageMetadata as H } from "../package-metadata.mjs";
|
|
15
15
|
import { isInRange as U, approximateStringMatching as X, defaultFormatPlaceholder as Y, defaultFormat as G } from "./utils.mjs";
|
|
16
16
|
import { MIN_DATE as W, MAX_DATE as J } from "../utils.mjs";
|
|
17
|
-
import { increaseValue as h, messages as
|
|
17
|
+
import { increaseValue as h, messages as p, decreaseValue as m } from "../messages/main.mjs";
|
|
18
18
|
import { isInTimeRange as Q } from "../timepicker/utils.mjs";
|
|
19
19
|
import { MIN_TIME as Z, MAX_TIME as ee } from "../defaults.mjs";
|
|
20
20
|
import { FloatingLabel as te } from "@progress/kendo-vue-labels";
|
|
@@ -60,21 +60,18 @@ const se = "Please enter a valid value!", De = /* @__PURE__ */ T({
|
|
|
60
60
|
},
|
|
61
61
|
rounded: {
|
|
62
62
|
type: String,
|
|
63
|
-
default: "medium",
|
|
64
63
|
validator: function(e) {
|
|
65
|
-
return ["small", "medium", "large", "full"].includes(e);
|
|
64
|
+
return ["none", "small", "medium", "large", "full"].includes(e);
|
|
66
65
|
}
|
|
67
66
|
},
|
|
68
67
|
fillMode: {
|
|
69
68
|
type: String,
|
|
70
|
-
default: "solid",
|
|
71
69
|
validator: function(e) {
|
|
72
70
|
return ["solid", "flat", "outline"].includes(e);
|
|
73
71
|
}
|
|
74
72
|
},
|
|
75
73
|
size: {
|
|
76
74
|
type: String,
|
|
77
|
-
default: "medium",
|
|
78
75
|
validator: function(e) {
|
|
79
76
|
return ["small", "medium", "large"].includes(e);
|
|
80
77
|
}
|
|
@@ -451,8 +448,8 @@ const se = "Please enter a valid value!", De = /* @__PURE__ */ T({
|
|
|
451
448
|
size: this.$props.size,
|
|
452
449
|
fillMode: this.$props.fillMode,
|
|
453
450
|
class: "k-spinner-increase",
|
|
454
|
-
"aria-label": t.toLanguageString(h,
|
|
455
|
-
title: t.toLanguageString(h,
|
|
451
|
+
"aria-label": t.toLanguageString(h, p[h]),
|
|
452
|
+
title: t.toLanguageString(h, p[h]),
|
|
456
453
|
onClick: this.increasePart
|
|
457
454
|
}, null), o(D, {
|
|
458
455
|
type: "button",
|
|
@@ -462,8 +459,8 @@ const se = "Please enter a valid value!", De = /* @__PURE__ */ T({
|
|
|
462
459
|
svgIcon: ie,
|
|
463
460
|
size: this.$props.size,
|
|
464
461
|
fillMode: this.$props.fillMode,
|
|
465
|
-
"aria-label": t.toLanguageString(
|
|
466
|
-
title: t.toLanguageString(
|
|
462
|
+
"aria-label": t.toLanguageString(m, p[m]),
|
|
463
|
+
title: t.toLanguageString(m, p[m]),
|
|
467
464
|
onClick: this.decreasePart
|
|
468
465
|
}, null)])]);
|
|
469
466
|
return r ? o(te, {
|
package/datepicker/DatePicker.js
CHANGED
|
@@ -5,4 +5,4 @@
|
|
|
5
5
|
* Licensed under commercial license. See LICENSE.md in the package root for more information
|
|
6
6
|
*-------------------------------------------------------------------------------------------
|
|
7
7
|
*/
|
|
8
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("vue"),w=require("@progress/kendo-svg-icons"),J=require("@progress/kendo-vue-popup"),l=require("@progress/kendo-date-math"),t=require("@progress/kendo-vue-common"),Q=require("../package-metadata.js"),W=require("../dateinput/DateInput.js"),Y=require("../calendar/components/Calendar.js"),r=require("../utils.js"),o=require("../messages/main.js"),D=require("@progress/kendo-vue-intl"),Z=require("./ToggleButton.js"),ee=require("@progress/kendo-vue-labels");function b(e){return typeof e=="function"||Object.prototype.toString.call(e)==="[object Object]"&&!n.isVNode(e)}const te=n.defineComponent({name:"DatePicker",inject:{kendoLocalizationService:{default:null}},model:{event:"changemodel"},emits:{change:e=>!0,changemodel:e=>!0,"update:modelValue":e=>!0,iconclick:e=>!0,focus:e=>!0,blur:e=>!0,keydown:e=>!0,open:e=>!0,close:e=>!0},props:{defaultShow:{type:Boolean,default:!1},modelValue:{type:Date,default:void 0},defaultValue:{type:Date,default:void 0},disabled:{type:Boolean,default:!1},dateInput:{type:[String,Object,Function],default:function(){}},calendar:{type:[String,Object,Function],default:function(){}},toggleButton:{type:[String,Object,Function],default:function(){}},label:String,placeholder:String,popup:{type:[String,Object,Function],default:function(){}},rounded:{type:String,default:"medium",validator:function(e){return["small","medium","large","full"].includes(e)}},fillMode:{type:String,default:"solid",validator:function(e){return["solid","flat","outline"].includes(e)}},size:{type:String,default:"medium",validator:function(e){return["small","medium","large"].includes(e)}},focusedDate:Date,format:{type:[Object,String],default:function(){return"d"}},formatPlaceholder:[Object,String],id:String,max:{type:Date,default:function(){return l.cloneDate(r.MAX_DATE)}},min:{type:Date,default:function(){return l.cloneDate(r.MIN_DATE)}},name:String,popupSettings:{type:Object,default:function(){return{}}},show:{type:Boolean,default:void 0},tabIndex:{type:Number,default:0},title:{type:String,default:function(){return""}},value:Date,weekNumber:Boolean,width:[Number,String],validityStyles:{type:Boolean,default:!0},validationMessage:String,required:Boolean,validate:Boolean,valid:{type:Boolean,default:void 0},ariaLabel:String,inputAttributes:Object},data:function(){return{isFocused:!1,currentValue:void 0,currentShow:void 0,valueDuringOnChange:void 0,showDuringOnChange:void 0,shouldFocusDateInput:!1}},created(){t.validatePackage(Q.packageMetadata),this._popupId=t.guid(),this._anchor=t.guid(),this._dateInput=null,this._calendar=null,this.$data.currentValue=this.$props.defaultValue,this.$data.currentShow=this.$props.defaultShow},mounted(){this._dateInput=t.getRef(this,"dateInput"),(this.$refs.calendar||this.calendarRef)&&(this._calendar=t.getRef(this,"calendar")),this.computedShow&&this.$forceUpdate()},updated(){(this.$refs.calendar||this.calendarRef)&&(this._calendar=t.getRef(this,"calendar")),this.computedShow?this._calendar&&this._calendar.$el&&!this._oldShow&&this._calendar.focus({preventScroll:!0}):this._dateInput&&this._dateInput.$el&&this.$data.shouldFocusDateInput&&this._dateInput.focus({preventScroll:!0}),this.$data.shouldFocusDateInput=!1},watch:{show:function(e,a){this._oldShow=a},currentShow:function(e,a){this._oldShow=a}},computed:{computedValue(){const e=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;return e!==null?l.cloneDate(e):null},computedShow(){return this.$data.showDuringOnChange!==void 0?this.$data.showDuringOnChange:this.$props.show!==void 0?this.$props.show:this.$data.currentShow}},methods:{focus(){this._dateInput&&this._dateInput.focus()},handleFocus(e){this._oldShow=this.computedShow,this.$data.isFocused=!0,this.$emit("focus",{event:e})},handleBlur(e){this.$data.isFocused=!1,this.createBlurTimeout(),this.$emit("blur",{event:e})},calendarBlur(e){this.$emit("blur",{event:e}),clearTimeout(this._blurTimeout),this.createBlurTimeout()},calendarFocus(e){this.$emit("focus",{event:e}),clearTimeout(this._blurTimeout)},createBlurTimeout(){this._blurTimeout=setTimeout(()=>{this._dateInput&&t.canUseDOM&&document.activeElement!==this._dateInput._element&&this.setShow(!1)},200)},validity(){const e=this.computedValue,a=r.isInDateRange(e,this.$props.min,this.$props.max),i=this.$props.validationMessage!==void 0,s=(!this.$props.required||e!==null)&&a,h=this.$props.valid!==void 0?this.$props.valid:s;return{customError:i,rangeOverflow:e&&this.$props.max.getTime()<e.getTime()||!1,rangeUnderflow:e&&e.getTime()<this.$props.min.getTime()||!1,valid:h,valueMissing:e===null}},nextValue(e,a){return e.value!==void 0?e.value:a.value},nextShow(e,a){return e.show!==void 0?e.show:a.show},setShow(e){this.computedShow!==e&&(this.$data.currentShow=e,this.$emit(e?"open":"close",{component:this}))},mergeTime(e){return this.computedValue&&e?r.setTime(e,this.computedValue):e},handleInputValueChange(e){this.handleValueChange(e.value,e)},handleCalendarValueChange(e){const a=this.mergeTime(e.value);this.handleValueChange(a,e)},getDateInputText(){return this.computedValue?!0:this._dateInput?this._dateInput._element.value:""},handleValueChange(e,a){this.$data.currentValue=l.cloneDate(e||void 0),this.$data.valueDuringOnChange=e,this.$data.showDuringOnChange=!1,this.$data.shouldFocusDateInput=!0,this.$emit("changemodel",this.computedValue),this.$emit("update:modelValue",this.computedValue),this.$emit("change",{event:a.event,value:this.computedValue,show:this.computedShow,component:this,target:{name:this.$props.name,value:this.computedValue,valueAsDate:this.computedValue},validity:this.validity()}),this.$data.valueDuringOnChange=void 0,this.$data.showDuringOnChange=void 0,this.setShow(!1)},handleIconClick(e){e.stopPropagation(),e.preventDefault(),!this.$props.disabled&&(this.$data.shouldFocusDateInput=!0,this.$emit("iconclick",e),this.setShow(!this.computedShow))},handleIconMouseDown(e){e.stopPropagation(),e.preventDefault()},handleKeyDown(e){const{altKey:a,keyCode:i}=e;if(i===t.Keys.tab&&this._dateInput&&e.target!==this._dateInput._element){e.preventDefault(),this.$data.shouldFocusDateInput=!0,this.setShow(!1);return}if(i===t.Keys.esc){this.$data.shouldFocusDateInput=!0,this.setShow(!1);return}a&&(i===t.Keys.up||i===t.Keys.down)&&(e.preventDefault(),e.stopPropagation(),this.$data.shouldFocusDateInput=i===t.Keys.up,this.setShow(i===t.Keys.down)),this.$emit("keydown",e)}},setup(){const e=n.ref(null),a=n.ref(null),i=n.inject("kendoLocalizationService",{});return{listRef:e,kendoAnchorRef:a,kendoLocalizationService:i}},render(){t.getDefaultSlots(this);const{disabled:e,tabIndex:a,title:i,id:s,format:h,formatPlaceholder:I,min:m,max:$,weekNumber:y,focusedDate:k,width:V,name:_,validationMessage:C,required:T,validityStyles:R,size:c,fillMode:v,rounded:p,ariaLabel:B,inputAttributes:F}=this.$props,{popupClass:O,animate:M,appendTo:q}=this.$props.popupSettings,f=this.computedShow,g=this.computedValue,L=g&&l.getDate(g),S=!this.$props.validityStyles||this.validity().valid,N=t.classNames("k-calendar-container k-group k-reset",O),j=this.$props.toggleButton?t.templateRendering.call(this,this.$props.toggleButton,t.getListeners.call(this)):void 0,x=n.createVNode(Z.ToggleButton,{type:"button",tabIndex:-1,icon:"calendar",svgIcon:w.calendarIcon,onMousedown:this.handleIconMouseDown,onClick:this.handleIconClick,title:D.provideLocalizationService(this).toLanguageString(o.toggleCalendar,o.messages[o.toggleCalendar]),"aria-label":D.provideLocalizationService(this).toLanguageString(o.toggleCalendar,o.messages[o.toggleCalendar]),rounded:null,class:"k-input-button"},null),P=t.getTemplate.call(this,{h:n.h,template:j,defaultRendering:x,defaultSlots:n.createVNode(t.Icon,{name:"calendar",icon:w.calendarIcon},null),additionalListeners:{click:this.handleIconClick}}),z=this.$props.dateInput?t.templateRendering.call(this,this.$props.dateInput,t.getListeners.call(this)):void 0,K=n.createVNode(W.DateInput,{ref:t.setRef(this,"dateInput"),placeholder:this.$props.placeholder,disabled:e,format:h,formatPlaceholder:I,id:s,max:$,min:m,name:_,size:null,rounded:null,fillMode:null,onChange:this.handleInputValueChange,required:T,tabIndex:f?-1:a,title:i,valid:this.validity().valid,validationMessage:C,validityStyles:R,value:g,ariaHasPopup:"grid",ariaExpanded:f,ariaRole:"combobox",ariaControls:this._popupId,ariaLabel:B,inputAttributes:F},null),A=t.getTemplate.call(this,{h:n.h,template:z,defaultRendering:K}),E=this.$props.calendar?t.templateRendering.call(this,this.$props.calendar,t.getListeners.call(this)):void 0,U=n.createVNode(Y.Calendar,{ref:t.setRef(this,"calendar"),onKeydown:this.handleKeyDown,onFocus:this.calendarFocus,onBlur:this.calendarBlur,disabled:e,value:L,min:m,max:$,weekNumber:y,focusedDate:k,onChange:this.handleCalendarValueChange},null),u=t.getTemplate.call(this,{h:n.h,template:E,defaultRendering:U}),H=this.$props.popup?t.templateRendering.call(this,this.$props.popup,t.getListeners.call(this)):void 0,X=n.createVNode(J.Popup,{show:f,anchor:this._anchor,class:N,id:this._popupId,anchorAlign:{horizontal:"left",vertical:"bottom"},popupAlign:{horizontal:"left",vertical:"top"},animate:M,appendTo:q},b(u)?u:{default:()=>[u]}),G=t.getTemplate.call(this,{h:n.h,template:H,defaultRendering:X,defaultSlots:u}),d=n.createVNode("span",{ref:t.setRef(this,"kendoAnchor"),role:"group",class:t.classNames("k-input","k-datepicker",{[`k-input-${t.kendoThemeMaps.sizeMap[c]||c}`]:c,[`k-input-${v}`]:v,[`k-rounded-${t.kendoThemeMaps.roundedMap[p]||p}`]:p,"k-invalid":!S,"k-required":this.required,"k-disabled":this.$props.disabled,"k-focus":this.$data.isFocused}),onKeydown:this.handleKeyDown,onFocusin:this.handleFocus,onFocusout:this.handleBlur},[A,P,G]);return this.$props.label?n.createVNode(ee.FloatingLabel,{label:this.$props.label,editorId:s,editorValid:S,editorValue:this.getDateInputText(),editorPlaceholder:this.$props.placeholder,editorDisabled:this.$props.disabled,style:{width:V}},b(d)?d:{default:()=>[d]}):d}});exports.DatePicker=te;
|
|
8
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("vue"),w=require("@progress/kendo-svg-icons"),J=require("@progress/kendo-vue-popup"),l=require("@progress/kendo-date-math"),t=require("@progress/kendo-vue-common"),Q=require("../package-metadata.js"),W=require("../dateinput/DateInput.js"),Y=require("../calendar/components/Calendar.js"),r=require("../utils.js"),o=require("../messages/main.js"),D=require("@progress/kendo-vue-intl"),Z=require("./ToggleButton.js"),ee=require("@progress/kendo-vue-labels");function b(e){return typeof e=="function"||Object.prototype.toString.call(e)==="[object Object]"&&!a.isVNode(e)}const te=a.defineComponent({name:"DatePicker",inject:{kendoLocalizationService:{default:null}},model:{event:"changemodel"},emits:{change:e=>!0,changemodel:e=>!0,"update:modelValue":e=>!0,iconclick:e=>!0,focus:e=>!0,blur:e=>!0,keydown:e=>!0,open:e=>!0,close:e=>!0},props:{defaultShow:{type:Boolean,default:!1},modelValue:{type:Date,default:void 0},defaultValue:{type:Date,default:void 0},disabled:{type:Boolean,default:!1},dateInput:{type:[String,Object,Function],default:function(){}},calendar:{type:[String,Object,Function],default:function(){}},toggleButton:{type:[String,Object,Function],default:function(){}},label:String,placeholder:String,popup:{type:[String,Object,Function],default:function(){}},rounded:{type:String,validator:function(e){return["none","small","medium","large","full"].includes(e)}},fillMode:{type:String,validator:function(e){return["solid","flat","outline"].includes(e)}},size:{type:String,validator:function(e){return["small","medium","large"].includes(e)}},focusedDate:Date,format:{type:[Object,String],default:function(){return"d"}},formatPlaceholder:[Object,String],id:String,max:{type:Date,default:function(){return l.cloneDate(r.MAX_DATE)}},min:{type:Date,default:function(){return l.cloneDate(r.MIN_DATE)}},name:String,popupSettings:{type:Object,default:function(){return{}}},show:{type:Boolean,default:void 0},tabIndex:{type:Number,default:0},title:{type:String,default:function(){return""}},value:Date,weekNumber:Boolean,width:[Number,String],validityStyles:{type:Boolean,default:!0},validationMessage:String,required:Boolean,validate:Boolean,valid:{type:Boolean,default:void 0},ariaLabel:String,inputAttributes:Object},data:function(){return{isFocused:!1,currentValue:void 0,currentShow:void 0,valueDuringOnChange:void 0,showDuringOnChange:void 0,shouldFocusDateInput:!1}},created(){t.validatePackage(Q.packageMetadata),this._popupId=t.guid(),this._anchor=t.guid(),this._dateInput=null,this._calendar=null,this.$data.currentValue=this.$props.defaultValue,this.$data.currentShow=this.$props.defaultShow},mounted(){this._dateInput=t.getRef(this,"dateInput"),(this.$refs.calendar||this.calendarRef)&&(this._calendar=t.getRef(this,"calendar")),this.computedShow&&this.$forceUpdate()},updated(){(this.$refs.calendar||this.calendarRef)&&(this._calendar=t.getRef(this,"calendar")),this.computedShow?this._calendar&&this._calendar.$el&&!this._oldShow&&this._calendar.focus({preventScroll:!0}):this._dateInput&&this._dateInput.$el&&this.$data.shouldFocusDateInput&&this._dateInput.focus({preventScroll:!0}),this.$data.shouldFocusDateInput=!1},watch:{show:function(e,n){this._oldShow=n},currentShow:function(e,n){this._oldShow=n}},computed:{computedValue(){const e=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;return e!==null?l.cloneDate(e):null},computedShow(){return this.$data.showDuringOnChange!==void 0?this.$data.showDuringOnChange:this.$props.show!==void 0?this.$props.show:this.$data.currentShow}},methods:{focus(){this._dateInput&&this._dateInput.focus()},handleFocus(e){this._oldShow=this.computedShow,this.$data.isFocused=!0,this.$emit("focus",{event:e})},handleBlur(e){this.$data.isFocused=!1,this.createBlurTimeout(),this.$emit("blur",{event:e})},calendarBlur(e){this.$emit("blur",{event:e}),clearTimeout(this._blurTimeout),this.createBlurTimeout()},calendarFocus(e){this.$emit("focus",{event:e}),clearTimeout(this._blurTimeout)},createBlurTimeout(){this._blurTimeout=setTimeout(()=>{this._dateInput&&t.canUseDOM&&document.activeElement!==this._dateInput._element&&this.setShow(!1)},200)},validity(){const e=this.computedValue,n=r.isInDateRange(e,this.$props.min,this.$props.max),i=this.$props.validationMessage!==void 0,s=(!this.$props.required||e!==null)&&n,h=this.$props.valid!==void 0?this.$props.valid:s;return{customError:i,rangeOverflow:e&&this.$props.max.getTime()<e.getTime()||!1,rangeUnderflow:e&&e.getTime()<this.$props.min.getTime()||!1,valid:h,valueMissing:e===null}},nextValue(e,n){return e.value!==void 0?e.value:n.value},nextShow(e,n){return e.show!==void 0?e.show:n.show},setShow(e){this.computedShow!==e&&(this.$data.currentShow=e,this.$emit(e?"open":"close",{component:this}))},mergeTime(e){return this.computedValue&&e?r.setTime(e,this.computedValue):e},handleInputValueChange(e){this.handleValueChange(e.value,e)},handleCalendarValueChange(e){const n=this.mergeTime(e.value);this.handleValueChange(n,e)},getDateInputText(){return this.computedValue?!0:this._dateInput?this._dateInput._element.value:""},handleValueChange(e,n){this.$data.currentValue=l.cloneDate(e||void 0),this.$data.valueDuringOnChange=e,this.$data.showDuringOnChange=!1,this.$data.shouldFocusDateInput=!0,this.$emit("changemodel",this.computedValue),this.$emit("update:modelValue",this.computedValue),this.$emit("change",{event:n.event,value:this.computedValue,show:this.computedShow,component:this,target:{name:this.$props.name,value:this.computedValue,valueAsDate:this.computedValue},validity:this.validity()}),this.$data.valueDuringOnChange=void 0,this.$data.showDuringOnChange=void 0,this.setShow(!1)},handleIconClick(e){e.stopPropagation(),e.preventDefault(),!this.$props.disabled&&(this.$data.shouldFocusDateInput=!0,this.$emit("iconclick",e),this.setShow(!this.computedShow))},handleIconMouseDown(e){e.stopPropagation(),e.preventDefault()},handleKeyDown(e){const{altKey:n,keyCode:i}=e;if(i===t.Keys.tab&&this._dateInput&&e.target!==this._dateInput._element){e.preventDefault(),this.$data.shouldFocusDateInput=!0,this.setShow(!1);return}if(i===t.Keys.esc){this.$data.shouldFocusDateInput=!0,this.setShow(!1);return}n&&(i===t.Keys.up||i===t.Keys.down)&&(e.preventDefault(),e.stopPropagation(),this.$data.shouldFocusDateInput=i===t.Keys.up,this.setShow(i===t.Keys.down)),this.$emit("keydown",e)}},setup(){const e=a.ref(null),n=a.ref(null),i=a.inject("kendoLocalizationService",{});return{listRef:e,kendoAnchorRef:n,kendoLocalizationService:i}},render(){t.getDefaultSlots(this);const{disabled:e,tabIndex:n,title:i,id:s,format:h,formatPlaceholder:I,min:m,max:$,weekNumber:y,focusedDate:k,width:V,name:_,validationMessage:C,required:T,validityStyles:R,size:c,fillMode:v,rounded:p,ariaLabel:B,inputAttributes:F}=this.$props,{popupClass:O,animate:M,appendTo:q}=this.$props.popupSettings,f=this.computedShow,g=this.computedValue,L=g&&l.getDate(g),S=!this.$props.validityStyles||this.validity().valid,N=t.classNames("k-calendar-container k-group k-reset",O),j=this.$props.toggleButton?t.templateRendering.call(this,this.$props.toggleButton,t.getListeners.call(this)):void 0,x=a.createVNode(Z.ToggleButton,{type:"button",tabIndex:-1,icon:"calendar",svgIcon:w.calendarIcon,onMousedown:this.handleIconMouseDown,onClick:this.handleIconClick,title:D.provideLocalizationService(this).toLanguageString(o.toggleCalendar,o.messages[o.toggleCalendar]),"aria-label":D.provideLocalizationService(this).toLanguageString(o.toggleCalendar,o.messages[o.toggleCalendar]),rounded:null,class:"k-input-button"},null),P=t.getTemplate.call(this,{h:a.h,template:j,defaultRendering:x,defaultSlots:a.createVNode(t.Icon,{name:"calendar",icon:w.calendarIcon},null),additionalListeners:{click:this.handleIconClick}}),z=this.$props.dateInput?t.templateRendering.call(this,this.$props.dateInput,t.getListeners.call(this)):void 0,K=a.createVNode(W.DateInput,{ref:t.setRef(this,"dateInput"),placeholder:this.$props.placeholder,disabled:e,format:h,formatPlaceholder:I,id:s,max:$,min:m,name:_,size:null,rounded:null,fillMode:null,onChange:this.handleInputValueChange,required:T,tabIndex:f?-1:n,title:i,valid:this.validity().valid,validationMessage:C,validityStyles:R,value:g,ariaHasPopup:"grid",ariaExpanded:f,ariaRole:"combobox",ariaControls:this._popupId,ariaLabel:B,inputAttributes:F},null),A=t.getTemplate.call(this,{h:a.h,template:z,defaultRendering:K}),E=this.$props.calendar?t.templateRendering.call(this,this.$props.calendar,t.getListeners.call(this)):void 0,U=a.createVNode(Y.Calendar,{ref:t.setRef(this,"calendar"),onKeydown:this.handleKeyDown,onFocus:this.calendarFocus,onBlur:this.calendarBlur,disabled:e,value:L,min:m,max:$,weekNumber:y,focusedDate:k,onChange:this.handleCalendarValueChange},null),u=t.getTemplate.call(this,{h:a.h,template:E,defaultRendering:U}),H=this.$props.popup?t.templateRendering.call(this,this.$props.popup,t.getListeners.call(this)):void 0,X=a.createVNode(J.Popup,{show:f,anchor:this._anchor,class:N,id:this._popupId,anchorAlign:{horizontal:"left",vertical:"bottom"},popupAlign:{horizontal:"left",vertical:"top"},animate:M,appendTo:q},b(u)?u:{default:()=>[u]}),G=t.getTemplate.call(this,{h:a.h,template:H,defaultRendering:X,defaultSlots:u}),d=a.createVNode("span",{ref:t.setRef(this,"kendoAnchor"),role:"group",class:t.classNames("k-input","k-datepicker",{[`k-input-${t.kendoThemeMaps.sizeMap[c]||c}`]:c,[`k-input-${v}`]:v,[`k-rounded-${t.kendoThemeMaps.roundedMap[p]||p}`]:p,"k-invalid":!S,"k-required":this.required,"k-disabled":this.$props.disabled,"k-focus":this.$data.isFocused}),onKeydown:this.handleKeyDown,onFocusin:this.handleFocus,onFocusout:this.handleBlur},[A,P,G]);return this.$props.label?a.createVNode(ee.FloatingLabel,{label:this.$props.label,editorId:s,editorValid:S,editorValue:this.getDateInputText(),editorPlaceholder:this.$props.placeholder,editorDisabled:this.$props.disabled,style:{width:V}},b(d)?d:{default:()=>[d]}):d}});exports.DatePicker=te;
|
|
@@ -83,21 +83,18 @@ const je = /* @__PURE__ */ oe({
|
|
|
83
83
|
},
|
|
84
84
|
rounded: {
|
|
85
85
|
type: String,
|
|
86
|
-
default: "medium",
|
|
87
86
|
validator: function(e) {
|
|
88
|
-
return ["small", "medium", "large", "full"].includes(e);
|
|
87
|
+
return ["none", "small", "medium", "large", "full"].includes(e);
|
|
89
88
|
}
|
|
90
89
|
},
|
|
91
90
|
fillMode: {
|
|
92
91
|
type: String,
|
|
93
|
-
default: "solid",
|
|
94
92
|
validator: function(e) {
|
|
95
93
|
return ["solid", "flat", "outline"].includes(e);
|
|
96
94
|
}
|
|
97
95
|
},
|
|
98
96
|
size: {
|
|
99
97
|
type: String,
|
|
100
|
-
default: "medium",
|
|
101
98
|
validator: function(e) {
|
|
102
99
|
return ["small", "medium", "large"].includes(e);
|
|
103
100
|
}
|
|
@@ -5,4 +5,4 @@
|
|
|
5
5
|
* Licensed under commercial license. See LICENSE.md in the package root for more information
|
|
6
6
|
*-------------------------------------------------------------------------------------------
|
|
7
7
|
*/
|
|
8
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const s=require("vue"),N=require("@progress/kendo-vue-popup"),c=require("@progress/kendo-date-math"),n=require("@progress/kendo-vue-common"),h=require("@progress/kendo-vue-intl"),j=require("../package-metadata.js"),m=require("../dateinput/DateInput.js"),x=require("../calendar/components/Calendar.js"),o=require("../calendar/models/SelectionRange.js"),g=require("../defaults.js"),a=require("../messages/main.js"),z=require("@progress/kendo-svg-icons"),P=s.defineComponent({name:"KendoDateRangePicker",emits:{blur:e=>!0,change:e=>!0,changemodel:e=>!0,"update:modelValue":e=>!0,focus:e=>!0,keydown:e=>!0,open:e=>!0,close:e=>!0},inject:{kendoLocalizationService:{default:null}},model:{event:"changemodel"},props:{allowReverse:{type:Boolean,default:!1},calendarSettings:Object,defaultShow:{type:Boolean,default:!1},defaultValue:{type:Object,default:function(){return o.EMPTY_SELECTIONRANGE}},modelValue:{type:Object,default:void 0},disabled:{type:Boolean,default:!1},popup:[String,Object,Function],calendar:[String,Object,Function],startDateInput:[String,Object,Function],endDateInput:[String,Object,Function],endDateInputSettings:Object,focusedDate:Date,format:{type:[String,Object],default:function(){return"d"}},id:String,ariaLabelledBy:String,ariaDescribedBy:String,max:{type:Date,default:function(){return g.MAX_DATE}},min:{type:Date,default:function(){return g.MIN_DATE}},rounded:{type:String,default:"medium",validator:function(e){return["small","medium","large","full"].includes(e)}},fillMode:{type:String,default:"solid",validator:function(e){return["solid","flat","outline"].includes(e)}},size:{type:String,default:"medium",validator:function(e){return["small","medium","large"].includes(e)}},popupSettings:{type:Object,default:function(){return{}}},show:{type:Boolean,default:void 0},startDateInputSettings:Object,swapButton:{type:Boolean,default:!1},tabIndex:Number,value:{type:Object,default:function(){}},inputAttributes:Object},created(){this._element=null,this._wrapper=null,this._calendar=null,this._startDateInput=null,this._endDateInput=null,this._popupId=n.guid(),this._anchor=n.guid(),this._startInputId=n.guid(),this._endInputId=n.guid(),this._calendarId=n.guid(),n.validatePackage(j.packageMetadata),this.currentShow=this.$props.show||this.$props.defaultShow,this.currentValue=this.$props.value||this.$props.defaultValue,this.initialAnimation=this.currentShow},mounted(){this._calendar=this.calendarRef,this._startDateInput=this.startDateInputRef,this._endDateInput=this.endDateInputRef,this.computedShow&&(this.$forceUpdate(),this.$nextTick(function(){this.initialAnimation=!1}))},updated(){this._calendar=this.calendarRef,this._startDateInput=this.startDateInputRef,this._endDateInput=this.endDateInputRef,this.shouldFocusCalendar&&this.focusCalendarElement(),this.shouldFocusDateInput&&this.focusDateInputElement(),this.shouldFocusCalendar=!1,this.shouldFocusDateInput=!1},data(){return{currentShow:!1,currentValue:null,valueDuringOnChange:void 0,shouldFocusDateInput:!1,shouldFocusCalendar:!1}},computed:{rootClassName(){return{"k-daterangepicker":!0,"k-disabled":this.$props.disabled}},computedValue(){return(this.valueDuringOnChange!==void 0?this.valueDuringOnChange:this.$props.value!==void 0?this.$props.value:this.$props.modelValue!==void 0?this.$props.modelValue:this.currentValue)||o.EMPTY_SELECTIONRANGE},computedShow(){return this.$props.show!==void 0?this.$props.show:this.currentShow},swapButtonClass(){const{size:e,rounded:t}=this.$props;return{"k-button":!0,[`k-button-${n.kendoThemeMaps.sizeMap[e]||e}`]:e,"k-button-flat":!0,"k-button-flat-base":!0,"k-icon-button":!0,[`k-rounded-${n.kendoThemeMaps.roundedMap[t]||t}`]:t}}},setup(){const e=s.ref(null),t=s.inject("kendoLocalizationService",{});return{kendoAnchorRef:e,kendoLocalizationService:t}},render(){const e=this.computedValue||o.EMPTY_SELECTIONRANGE,{size:t,fillMode:i,rounded:r}=this.$props,l=(this.$props.startDateInputSettings||{}).id||this._startInputId,f=(this.$props.endDateInputSettings||{}).id||this._endInputId,d=h.provideLocalizationService(this),I=d.toLanguageString(a.start,a.messages[a.start]),S=d.toLanguageString(a.end,a.messages[a.end]),D=d.toLanguageString(a.separator,a.messages[a.separator]),v=this.$props.startDateInput?n.templateRendering.call(this,this.$props.startDateInput,n.getListeners.call(this)):void 0,b={label:I,format:this.$props.format,min:this.min,max:this.max,id:this._startInputId,disabled:this.$props.disabled,valid:this.$props.valid,size:t,fillMode:i,rounded:r,ariaHasPopup:"grid",ariaExpanded:this.computedShow,value:e.start,ariaRole:"combobox",ariaControls:this._popupId,inputAttributes:this.$props.inputAttributes,...this.$props.startDateInputSettings},w=s.h(m.DateInput,{ref:u=>{this.startDateInputRef=u},...b,onChange:this.handleStartChange}),$=n.getTemplate.call(this,{h:s.h,template:v,defaultRendering:w,additionalListeners:{change:this.handleStartChange}}),C=this.$props.endDateInput?n.templateRendering.call(this,this.$props.endDateInput,n.getListeners.call(this)):void 0,R={label:S,format:this.$props.format,min:this.min,max:this.max,id:this._endInputId,size:t,fillMode:i,rounded:r,disabled:this.$props.disabled,valid:this.$props.valid,ariaHasPopup:"grid",ariaExpanded:this.computedShow,value:e.end,ariaRole:"combobox",ariaControls:this._popupId,inputAttributes:this.$props.inputAttributes,...this.$props.endDateInputSettings},y=s.h(m.DateInput,{ref:u=>{this.endDateInputRef=u},...R,onChange:this.handleEndChange}),E=n.getTemplate.call(this,{h:s.h,template:C,defaultRendering:y,additionalListeners:{change:this.handleEndChange}}),_=this.$props.calendar?n.templateRendering.call(this,this.$props.calendar,n.getListeners.call(this)):void 0,V={id:this._calendarId,min:this.min,max:this.max,views:2,allowReverse:this.$props.allowReverse,mode:"range",focusedDate:this.$props.focusedDate,disabled:this.$props.disabled,value:e,...this.$props.calendarSettings},k=s.h(x.Calendar,{ref:u=>{this.calendarRef=u},onKeydown:this.handleKeyDown,onFocus:this.calendarFocus,onBlur:this.calendarBlur,onChange:this.handleCalendarChange,...V}),p=n.getTemplate.call(this,{h:s.h,template:_,defaultRendering:k,additionalListeners:{change:this.handleCalendarChange,keydown:this.handleKeyDown,focus:this.calendarFocus,blur:this.calendarBlur}}),{popupClass:T,animate:B}=this.$props.popupSettings,L=this.$props.popup?n.templateRendering.call(this,this.$props.popup,n.getListeners.call(this)):void 0,O={show:this.computedShow,anchor:this._anchor,id:this._popupId,anchorAlign:{horizontal:"left",vertical:"bottom"},popupAlign:{horizontal:"left",vertical:"top"},animate:this.initialAnimation?!1:B,...this.$props.popupSettings},A=s.h(N.Popup,{class:T,...O},function(){return[p]}),M=n.getTemplate.call(this,{h:s.h,template:L,defaultRendering:A,defaultSlots:p}),F=s.createVNode("button",{class:this.swapButtonClass,role:"button",title:h.provideLocalizationService(this).toLanguageString(a.swapStartEnd,a.messages[a.swapStartEnd]),onMousedown:this.handleReverseMouseDown,onClick:this.handleReverseClick,"aria-controls":l+" "+f,"aria-label":h.provideLocalizationService(this).toLanguageString(a.swapStartEnd,a.messages[a.swapStartEnd])},[s.createVNode(n.Icon,{name:"arrows-swap",icon:z.arrowsSwapIcon,style:{transform:"rotate(90deg)"},class:"k-button-icon"},null)]);return s.createVNode("span",{class:this.rootClassName,style:this.$attrs.style,id:this.$props.id,"aria-labelledby":this.$props.ariaLabelledBy,"aria-describedby":this.$props.ariaDescribedBy,tabindex:this.$props.tabIndex,onFocusin:this.handleFocus,onFocusout:this.handleBlur,onKeydown:this.handleKeyDown,ref:u=>{this.kendoAnchorRef=u}},[$,(this.$props.allowReverse||this.$props.calendarSettings&&this.$props.calendarSettings.allowReverse)&&this.$props.swapButton?F:D,E,M])},methods:{focus(){const e=this.getStartInput();e&&e.focus()},focusCalendarElement(){const e=this.getCalendar();e&&e.focus({preventScroll:!0})},focusDateInputElement(){const e=this.getStartInput(),t=this.getEndInput();!document||!e||!t||((this.computedValue.start===null||this.computedValue.end!==null)&&document.activeElement!==t?e.focus({preventScroll:!0}):document.activeElement!==e&&t.focus({preventScroll:!0}))},calculateValue(e,t){return(e.value!==void 0?e.value:t.currentValue)||o.EMPTY_SELECTIONRANGE},calculateShow(e,t){return e.show!==void 0?e.show:t.currentShow},setShow(e){this.currentShow!==e&&(this.currentShow=e,this.$emit(e?"open":"close",{component:this}))},handleReverseClick(e){const t={start:this.computedValue.end,end:this.computedValue.start},i={event:e.event};this.handleChange(t,i)},handleReverseMouseDown(e){e.preventDefault()},handleFocus(e){this.shouldFocusDateInput||this.setShow(!0),this.$emit("focus",{event:e})},calendarBlur(){clearTimeout(this._blurTimeout),this.createBlurTimeout()},calendarFocus(){clearTimeout(this._blurTimeout)},createBlurTimeout(){this._blurTimeout=setTimeout(()=>{const e=this.getStartInput(),t=this.getEndInput();e&&t&&n.canUseDOM&&e&&document.activeElement!==t&&this.setShow(!1)},200)},getStartInput(){return this._startDateInput&&this._startDateInput.element?this._startDateInput.element():document.getElementById(this._startInputId)},getEndInput(){return this._endDateInput&&this._endDateInput.element?this._endDateInput.element():document.getElementById(this._endInputId)},getCalendar(){return this._calendar&&this._calendar.element?this._calendar:document.getElementById(this._calendarId)},handleBlur(e){this.createBlurTimeout(),this.$emit("blur",{event:e})},handleEndChange(e){const t={start:this.computedValue.start,end:c.cloneDate(e.value||void 0)};this.handleChange(t,e)},handleStartChange(e){const t={start:c.cloneDate(e.value||void 0),end:this.computedValue.end};this.handleChange(t,e)},extractRangeFromValue(e){if(!Array.isArray(e.value)&&!(e.value instanceof Date))return e.value||o.EMPTY_SELECTIONRANGE;const t=Array.isArray(e.value)?e.value[0]:e.value;return{start:this.computedValue.end!==null?t:this.computedValue.start,end:this.computedValue.start!==null?t:this.computedValue.end}},handleCalendarChange(e){const t=this.extractRangeFromValue(e);this.handleChange(t,e)},handleKeyDown(e){const{keyCode:t,altKey:i}=e,r=this.getEndInput(),l=this.getCalendar();t===n.Keys.esc?(e.preventDefault(),this.shouldFocusDateInput=!0,this.setShow(!1)):i&&t===n.Keys.down?(e.preventDefault(),this.shouldFocusCalendar=!0,this.setShow(!0)):t===n.Keys.tab&&this.computedShow&&l&&r&&document&&document.activeElement===r&&(e.preventDefault(),this.focusCalendarElement()),this.$emit("keydown",e)},handleChange(e,t){this.currentValue=e,this.valueDuringOnChange=e;const i={event:t.event,value:this.computedValue,show:this.computedShow,component:this,target:{name:this.$props.name,value:this.computedValue,show:this.computedShow}};this.$emit("changemodel",this.computedValue),this.$emit("update:modelValue",this.computedValue),this.$emit("change",i),this.valueDuringOnChange=void 0}}});exports.DateRangePicker=P;
|
|
8
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const s=require("vue"),N=require("@progress/kendo-vue-popup"),c=require("@progress/kendo-date-math"),n=require("@progress/kendo-vue-common"),h=require("@progress/kendo-vue-intl"),j=require("../package-metadata.js"),g=require("../dateinput/DateInput.js"),x=require("../calendar/components/Calendar.js"),o=require("../calendar/models/SelectionRange.js"),m=require("../defaults.js"),a=require("../messages/main.js"),z=require("@progress/kendo-svg-icons"),P=s.defineComponent({name:"KendoDateRangePicker",emits:{blur:e=>!0,change:e=>!0,changemodel:e=>!0,"update:modelValue":e=>!0,focus:e=>!0,keydown:e=>!0,open:e=>!0,close:e=>!0},inject:{kendoLocalizationService:{default:null}},model:{event:"changemodel"},props:{allowReverse:{type:Boolean,default:!1},calendarSettings:Object,defaultShow:{type:Boolean,default:!1},defaultValue:{type:Object,default:function(){return o.EMPTY_SELECTIONRANGE}},modelValue:{type:Object,default:void 0},disabled:{type:Boolean,default:!1},popup:[String,Object,Function],calendar:[String,Object,Function],startDateInput:[String,Object,Function],endDateInput:[String,Object,Function],endDateInputSettings:Object,focusedDate:Date,format:{type:[String,Object],default:function(){return"d"}},id:String,ariaLabelledBy:String,ariaDescribedBy:String,max:{type:Date,default:function(){return m.MAX_DATE}},min:{type:Date,default:function(){return m.MIN_DATE}},rounded:{type:String,validator:function(e){return["none","small","medium","large","full"].includes(e)}},fillMode:{type:String,validator:function(e){return["solid","flat","outline"].includes(e)}},size:{type:String,validator:function(e){return["none","small","medium","large"].includes(e)}},popupSettings:{type:Object,default:function(){return{}}},show:{type:Boolean,default:void 0},startDateInputSettings:Object,swapButton:{type:Boolean,default:!1},tabIndex:Number,value:{type:Object,default:function(){}},inputAttributes:Object},created(){this._element=null,this._wrapper=null,this._calendar=null,this._startDateInput=null,this._endDateInput=null,this._popupId=n.guid(),this._anchor=n.guid(),this._startInputId=n.guid(),this._endInputId=n.guid(),this._calendarId=n.guid(),n.validatePackage(j.packageMetadata),this.currentShow=this.$props.show||this.$props.defaultShow,this.currentValue=this.$props.value||this.$props.defaultValue,this.initialAnimation=this.currentShow},mounted(){this._calendar=this.calendarRef,this._startDateInput=this.startDateInputRef,this._endDateInput=this.endDateInputRef,this.computedShow&&(this.$forceUpdate(),this.$nextTick(function(){this.initialAnimation=!1}))},updated(){this._calendar=this.calendarRef,this._startDateInput=this.startDateInputRef,this._endDateInput=this.endDateInputRef,this.shouldFocusCalendar&&this.focusCalendarElement(),this.shouldFocusDateInput&&this.focusDateInputElement(),this.shouldFocusCalendar=!1,this.shouldFocusDateInput=!1},data(){return{currentShow:!1,currentValue:null,valueDuringOnChange:void 0,shouldFocusDateInput:!1,shouldFocusCalendar:!1}},computed:{rootClassName(){return{"k-daterangepicker":!0,"k-disabled":this.$props.disabled}},computedValue(){return(this.valueDuringOnChange!==void 0?this.valueDuringOnChange:this.$props.value!==void 0?this.$props.value:this.$props.modelValue!==void 0?this.$props.modelValue:this.currentValue)||o.EMPTY_SELECTIONRANGE},computedShow(){return this.$props.show!==void 0?this.$props.show:this.currentShow},swapButtonClass(){const{size:e,rounded:t}=this.$props;return{"k-button":!0,[`k-button-${n.kendoThemeMaps.sizeMap[e]||e}`]:e,"k-button-flat":!0,"k-button-flat-base":!0,"k-icon-button":!0,[`k-rounded-${n.kendoThemeMaps.roundedMap[t]||t}`]:t}}},setup(){const e=s.ref(null),t=s.inject("kendoLocalizationService",{});return{kendoAnchorRef:e,kendoLocalizationService:t}},render(){const e=this.computedValue||o.EMPTY_SELECTIONRANGE,{size:t,fillMode:i,rounded:u}=this.$props,l=(this.$props.startDateInputSettings||{}).id||this._startInputId,f=(this.$props.endDateInputSettings||{}).id||this._endInputId,d=h.provideLocalizationService(this),I=d.toLanguageString(a.start,a.messages[a.start]),S=d.toLanguageString(a.end,a.messages[a.end]),D=d.toLanguageString(a.separator,a.messages[a.separator]),v=this.$props.startDateInput?n.templateRendering.call(this,this.$props.startDateInput,n.getListeners.call(this)):void 0,b={label:I,format:this.$props.format,min:this.min,max:this.max,id:this._startInputId,disabled:this.$props.disabled,valid:this.$props.valid,size:t,fillMode:i,rounded:u,ariaHasPopup:"grid",ariaExpanded:this.computedShow,value:e.start,ariaRole:"combobox",ariaControls:this._popupId,inputAttributes:this.$props.inputAttributes,...this.$props.startDateInputSettings},w=s.h(g.DateInput,{ref:r=>{this.startDateInputRef=r},...b,onChange:this.handleStartChange}),$=n.getTemplate.call(this,{h:s.h,template:v,defaultRendering:w,additionalListeners:{change:this.handleStartChange}}),C=this.$props.endDateInput?n.templateRendering.call(this,this.$props.endDateInput,n.getListeners.call(this)):void 0,R={label:S,format:this.$props.format,min:this.min,max:this.max,id:this._endInputId,size:t,fillMode:i,rounded:u,disabled:this.$props.disabled,valid:this.$props.valid,ariaHasPopup:"grid",ariaExpanded:this.computedShow,value:e.end,ariaRole:"combobox",ariaControls:this._popupId,inputAttributes:this.$props.inputAttributes,...this.$props.endDateInputSettings},y=s.h(g.DateInput,{ref:r=>{this.endDateInputRef=r},...R,onChange:this.handleEndChange}),E=n.getTemplate.call(this,{h:s.h,template:C,defaultRendering:y,additionalListeners:{change:this.handleEndChange}}),_=this.$props.calendar?n.templateRendering.call(this,this.$props.calendar,n.getListeners.call(this)):void 0,V={id:this._calendarId,min:this.min,max:this.max,views:2,allowReverse:this.$props.allowReverse,mode:"range",focusedDate:this.$props.focusedDate,disabled:this.$props.disabled,value:e,...this.$props.calendarSettings},k=s.h(x.Calendar,{ref:r=>{this.calendarRef=r},onKeydown:this.handleKeyDown,onFocus:this.calendarFocus,onBlur:this.calendarBlur,onChange:this.handleCalendarChange,...V}),p=n.getTemplate.call(this,{h:s.h,template:_,defaultRendering:k,additionalListeners:{change:this.handleCalendarChange,keydown:this.handleKeyDown,focus:this.calendarFocus,blur:this.calendarBlur}}),{popupClass:T,animate:B}=this.$props.popupSettings,L=this.$props.popup?n.templateRendering.call(this,this.$props.popup,n.getListeners.call(this)):void 0,O={show:this.computedShow,anchor:this._anchor,id:this._popupId,anchorAlign:{horizontal:"left",vertical:"bottom"},popupAlign:{horizontal:"left",vertical:"top"},animate:this.initialAnimation?!1:B,...this.$props.popupSettings},A=s.h(N.Popup,{class:T,...O},function(){return[p]}),M=n.getTemplate.call(this,{h:s.h,template:L,defaultRendering:A,defaultSlots:p}),F=s.createVNode("button",{class:this.swapButtonClass,role:"button",title:h.provideLocalizationService(this).toLanguageString(a.swapStartEnd,a.messages[a.swapStartEnd]),onMousedown:this.handleReverseMouseDown,onClick:this.handleReverseClick,"aria-controls":l+" "+f,"aria-label":h.provideLocalizationService(this).toLanguageString(a.swapStartEnd,a.messages[a.swapStartEnd])},[s.createVNode(n.Icon,{name:"arrows-swap",icon:z.arrowsSwapIcon,style:{transform:"rotate(90deg)"},class:"k-button-icon"},null)]);return s.createVNode("span",{class:this.rootClassName,style:this.$attrs.style,id:this.$props.id,"aria-labelledby":this.$props.ariaLabelledBy,"aria-describedby":this.$props.ariaDescribedBy,tabindex:this.$props.tabIndex,onFocusin:this.handleFocus,onFocusout:this.handleBlur,onKeydown:this.handleKeyDown,ref:r=>{this.kendoAnchorRef=r}},[$,(this.$props.allowReverse||this.$props.calendarSettings&&this.$props.calendarSettings.allowReverse)&&this.$props.swapButton?F:D,E,M])},methods:{focus(){const e=this.getStartInput();e&&e.focus()},focusCalendarElement(){const e=this.getCalendar();e&&e.focus({preventScroll:!0})},focusDateInputElement(){const e=this.getStartInput(),t=this.getEndInput();!document||!e||!t||((this.computedValue.start===null||this.computedValue.end!==null)&&document.activeElement!==t?e.focus({preventScroll:!0}):document.activeElement!==e&&t.focus({preventScroll:!0}))},calculateValue(e,t){return(e.value!==void 0?e.value:t.currentValue)||o.EMPTY_SELECTIONRANGE},calculateShow(e,t){return e.show!==void 0?e.show:t.currentShow},setShow(e){this.currentShow!==e&&(this.currentShow=e,this.$emit(e?"open":"close",{component:this}))},handleReverseClick(e){const t={start:this.computedValue.end,end:this.computedValue.start},i={event:e.event};this.handleChange(t,i)},handleReverseMouseDown(e){e.preventDefault()},handleFocus(e){this.shouldFocusDateInput||this.setShow(!0),this.$emit("focus",{event:e})},calendarBlur(){clearTimeout(this._blurTimeout),this.createBlurTimeout()},calendarFocus(){clearTimeout(this._blurTimeout)},createBlurTimeout(){this._blurTimeout=setTimeout(()=>{const e=this.getStartInput(),t=this.getEndInput();e&&t&&n.canUseDOM&&e&&document.activeElement!==t&&this.setShow(!1)},200)},getStartInput(){return this._startDateInput&&this._startDateInput.element?this._startDateInput.element():document.getElementById(this._startInputId)},getEndInput(){return this._endDateInput&&this._endDateInput.element?this._endDateInput.element():document.getElementById(this._endInputId)},getCalendar(){return this._calendar&&this._calendar.element?this._calendar:document.getElementById(this._calendarId)},handleBlur(e){this.createBlurTimeout(),this.$emit("blur",{event:e})},handleEndChange(e){const t={start:this.computedValue.start,end:c.cloneDate(e.value||void 0)};this.handleChange(t,e)},handleStartChange(e){const t={start:c.cloneDate(e.value||void 0),end:this.computedValue.end};this.handleChange(t,e)},extractRangeFromValue(e){if(!Array.isArray(e.value)&&!(e.value instanceof Date))return e.value||o.EMPTY_SELECTIONRANGE;const t=Array.isArray(e.value)?e.value[0]:e.value;return{start:this.computedValue.end!==null?t:this.computedValue.start,end:this.computedValue.start!==null?t:this.computedValue.end}},handleCalendarChange(e){const t=this.extractRangeFromValue(e);this.handleChange(t,e)},handleKeyDown(e){const{keyCode:t,altKey:i}=e,u=this.getEndInput(),l=this.getCalendar();t===n.Keys.esc?(e.preventDefault(),this.shouldFocusDateInput=!0,this.setShow(!1)):i&&t===n.Keys.down?(e.preventDefault(),this.shouldFocusCalendar=!0,this.setShow(!0)):t===n.Keys.tab&&this.computedShow&&l&&u&&document&&document.activeElement===u&&(e.preventDefault(),this.focusCalendarElement()),this.$emit("keydown",e)},handleChange(e,t){this.currentValue=e,this.valueDuringOnChange=e;const i={event:t.event,value:this.computedValue,show:this.computedShow,component:this,target:{name:this.$props.name,value:this.computedValue,show:this.computedShow}};this.$emit("changemodel",this.computedValue),this.$emit("update:modelValue",this.computedValue),this.$emit("change",i),this.valueDuringOnChange=void 0}}});exports.DateRangePicker=P;
|
|
@@ -90,23 +90,20 @@ const It = /* @__PURE__ */ X({
|
|
|
90
90
|
},
|
|
91
91
|
rounded: {
|
|
92
92
|
type: String,
|
|
93
|
-
default: "medium",
|
|
94
93
|
validator: function(t) {
|
|
95
|
-
return ["small", "medium", "large", "full"].includes(t);
|
|
94
|
+
return ["none", "small", "medium", "large", "full"].includes(t);
|
|
96
95
|
}
|
|
97
96
|
},
|
|
98
97
|
fillMode: {
|
|
99
98
|
type: String,
|
|
100
|
-
default: "solid",
|
|
101
99
|
validator: function(t) {
|
|
102
100
|
return ["solid", "flat", "outline"].includes(t);
|
|
103
101
|
}
|
|
104
102
|
},
|
|
105
103
|
size: {
|
|
106
104
|
type: String,
|
|
107
|
-
default: "medium",
|
|
108
105
|
validator: function(t) {
|
|
109
|
-
return ["small", "medium", "large"].includes(t);
|
|
106
|
+
return ["none", "small", "medium", "large"].includes(t);
|
|
110
107
|
}
|
|
111
108
|
},
|
|
112
109
|
popupSettings: {
|
|
@@ -5,4 +5,4 @@
|
|
|
5
5
|
* Licensed under commercial license. See LICENSE.md in the package root for more information
|
|
6
6
|
*-------------------------------------------------------------------------------------------
|
|
7
7
|
*/
|
|
8
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("vue"),G=require("@progress/kendo-vue-labels"),J=require("@progress/kendo-vue-buttons"),Q=require("@progress/kendo-vue-popup"),r=require("@progress/kendo-date-math"),t=require("@progress/kendo-vue-common"),W=require("../dateinput/DateInput.js"),Y=require("../package-metadata.js"),u=require("../utils.js"),o=require("../messages/main.js"),T=require("@progress/kendo-vue-intl"),Z=require("./DateTimeSelector.js"),ee=require("../timepicker/utils.js"),b=require("../defaults.js"),te=require("../dateinput/utils.js"),ie=require("@progress/kendo-svg-icons");function m(e){return typeof e=="function"||Object.prototype.toString.call(e)==="[object Object]"&&!n.isVNode(e)}const ne=n.defineComponent({name:"KendoDateTimePicker",emits:{changemodel:e=>!0,"update:modelValue":e=>!0,iconclick:e=>!0,change:e=>!0,focus:e=>!0,blur:e=>!0,keydown:e=>!0,open:e=>!0,close:e=>!0},props:{modelValue:{type:Date,default:void 0},defaultShow:{type:Boolean,default:!1},defaultValue:{type:Date,default:null},disabled:{type:Boolean,default:!1},dateInput:{type:[String,Object,Function],default:function(){}},popup:{type:[String,Object,Function],default:function(){}},calendar:{type:[String,Object,Function],default:function(){}},focusedDate:Date,format:{type:[String,Object],default:function(){return"g"}},formatPlaceholder:{type:[String,Object],default:function(){return te.defaultFormatPlaceholder}},rounded:{type:String,default:"medium",validator:function(e){return["small","medium","large","full"].includes(e)}},fillMode:{type:String,default:"solid",validator:function(e){return["solid","flat","outline"].includes(e)}},size:{type:String,default:"medium",validator:function(e){return["small","medium","large"].includes(e)}},id:String,ariaLabelledBy:String,ariaDescribedBy:String,min:{type:Date,default:function(){return u.MIN_DATE}},max:{type:Date,default:function(){return u.MAX_DATE}},maxTime:{type:Date,default:function(){return r.cloneDate(u.MAX_TIME)}},minTime:{type:Date,default:function(){return r.cloneDate(b.MIN_TIME)}},name:String,label:String,placeholder:String,popupSettings:{type:Object,default:function(){return{}}},show:{type:Boolean,default:void 0},tabIndex:{type:Number,default:0},title:{type:String,default:function(){return""}},steps:{type:Object,default:function(){return{}}},value:Date,weekNumber:{type:Boolean,default:!1},width:String,validationMessage:String,required:{type:Boolean,default:!1},validityStyles:{type:Boolean,default:!0},validate:Boolean,valid:{type:Boolean,default:void 0},cancelButton:{type:Boolean,default:!0},inputAttributes:Object},model:{event:"changemodel"},created(){this._anchor=t.guid(),this._popupId="popup"+t.guid(),this._wrapper=null,this._dateInput=null,this._dateTimeSelector=null,t.validatePackage(Y.packageMetadata),this.currentValue=this.$props.defaultValue,this.currentShow=this.$props.defaultShow},inject:{kendoLocalizationService:{default:null}},data(){return{currentValue:null,currentShow:!1,valueDuringOnChange:void 0,showDuringOnChange:void 0,shouldFocusDateInput:!1,isFocused:!1}},computed:{computedValue(){const e=this.valueDuringOnChange!==void 0?this.valueDuringOnChange:this.$props.value!==void 0?this.$props.value:this.$props.modelValue!==void 0?this.$props.modelValue:this.$data.currentValue;return e!==null?r.cloneDate(e):null},computedShow(){return this.showDuringOnChange!==void 0?this.showDuringOnChange:this.$props.show!==void 0?this.$props.show:this.currentShow}},watch:{show:function(e,i){this._oldShow=i},currentShow:function(e,i){this._oldShow=i}},mounted(){this.computedShow&&this.$forceUpdate();const e=this.dateInputElement();this._dateTimeSelector=this.$refs.dateTimeSelector,this._wrapper=this.kendoAnchorRef,this._dateInput=this.dateInputRef,e&&e.setAttribute("aria-haspopup","true")},updated(){const e=this.dateInputElement();this._dateTimeSelector=this.$refs.dateTimeSelector,this._wrapper=this.kendoAnchorRef,this._dateTimeSelector&&this.computedShow&&!this._oldShow&&this._dateTimeSelector.focus({preventScroll:!0}),e&&!this.computedShow&&this.shouldFocusDateInput&&this._dateInput.focus({preventScroll:!0}),this.shouldFocusDateInput=!1},setup(){const e=n.ref(null),i=n.inject("kendoLocalizationService",{});return{kendoAnchorRef:e,kendoLocalizationService:i}},render(){const e=t.getDefaultSlots(this),{disabled:i,tabIndex:a,title:d,id:f,format:g,formatPlaceholder:$,min:k,max:V,weekNumber:_,focusedDate:M,width:S,name:B,steps:v,placeholder:C,validationMessage:q,required:F,validityStyles:O,cancelButton:R,minTime:D,maxTime:w,ariaLabelledBy:ae,ariaDescribedBy:oe,size:p,fillMode:I,rounded:c,inputAttributes:x}=this.$props,{popupClass:E,appendTo:A,animate:j}=this.$props.popupSettings,y=!this.$props.validityStyles||this.validity().valid,N=this.$props.dateInput?t.templateRendering.call(this,this.$props.dateInput,t.getListeners.call(this)):void 0,P=n.createVNode(W.DateInput,{ref:h=>{this.dateInputRef=h},placeholder:C,disabled:i,format:g,formatPlaceholder:$,id:f,max:V,min:k,minTime:D,maxTime:w,name:B,size:null,rounded:null,fillMode:null,onChange:this.handleValueChange,required:F,steps:v,tabIndex:this.computedShow?-1:a,title:d,valid:this.validity().valid,validationMessage:q,validityStyles:O,value:this.computedValue,ariaHasPopup:"dialog",ariaExpanded:this.computedShow,ariaRole:"combobox",ariaControls:this._popupId,inputAttributes:x},m(e)?e:{default:()=>[e]}),L=t.getTemplate.call(this,{h:n.h,template:N,defaultRendering:P}),K=this.$props.calendar?t.templateRendering.call(this,this.$props.calendar,t.getListeners.call(this)):void 0,s=n.createVNode(Z.DateTimeSelector,{ref:"dateTimeSelector",cancelButton:R,value:this.computedValue,onChange:this.handleValueChange,onReject:this.handleReject,disabled:i,weekNumber:_,min:this.$props.min,max:this.$props.max,minTime:D,maxTime:w,focusedDate:M,format:g,calendar:K,steps:v,onFocus:this.timeSelectorFocus,onBlur:this.timeSelectorBlur,onKeydown:this.handleKeyDown},null),z=t.classNames("k-datetime-container k-reset",E),U=this.$props.popup?t.templateRendering.call(this,this.$props.popup,t.getListeners.call(this)):void 0,X=n.createVNode(Q.Popup,{show:this.computedShow,anchor:this._anchor,popupClass:z,id:this._popupId,anchorAlign:{horizontal:"left",vertical:"bottom"},popupAlign:{horizontal:"left",vertical:"top"},appendTo:A,animate:j},m(s)?s:{default:()=>[s]}),H=t.getTemplate.call(this,{h:n.h,template:U,defaultRendering:X,defaultSlots:s}),l=n.createVNode("div",{class:t.classNames("k-input","k-datetimepicker",{[`k-input-${t.kendoThemeMaps.sizeMap[p]||p}`]:p,[`k-input-${I}`]:I,[`k-rounded-${t.kendoThemeMaps.roundedMap[c]||c}`]:c,"k-invalid":!y,"k-required":this.required,"k-disabled":this.$props.disabled}),ref:h=>{this.kendoAnchorRef=h},onKeydown:this.handleKeyDown,style:{width:S},onFocusin:this.handleFocus,onFocusout:this.handleBlur},[L,n.createVNode(J.Button,{type:"button",tabIndex:-1,icon:"calendar",svgIcon:ie.calendarIcon,onMousedown:this.handleIconMouseDown,onClick:this.handleDateIconClick,title:T.provideLocalizationService(this).toLanguageString(o.toggleDateTimeSelector,o.messages[o.toggleDateTimeSelector]),rounded:null,class:"k-input-button","aria-controls":this._popupId,"aria-label":T.provideLocalizationService(this).toLanguageString(o.toggleDateTimeSelector,o.messages[o.toggleDateTimeSelector])},null),H]);return this.$props.label?n.createVNode(G.FloatingLabel,{label:this.$props.label,editorId:f,editorValid:y,editorValue:this.getDateInputText(),editorPlaceholder:this.$props.placeholder,editorDisabled:this.$props.disabled,style:{width:S}},m(l)?l:{default:()=>[l]}):l},methods:{validity(){const e=u.isInDateRange(this.computedValue,this.$props.min,this.$props.max)&&ee.isInTimeRange(this.computedValue,this.$props.minTime||b.MIN_TIME,this.$props.maxTime||u.MAX_TIME),i=this.$props.validationMessage!==void 0,a=(!this.$props.required||this.computedValue!==null)&&e,d=this.$props.valid!==void 0?this.$props.valid:a;return{customError:i,rangeOverflow:this.computedValue&&this.$props.max.getTime()<this.computedValue.getTime()||!1,rangeUnderflow:this.computedValue&&this.computedValue.getTime()<this.$props.min.getTime()||!1,valid:d,valueMissing:this.computedValue===null}},getDateInputText(){return this.computedValue?!0:this._dateInput?this._dateInput._element.value:""},focus(){const e=this.dateInputElement();e&&e.focus()},setShow(e){this.computedShow!==e&&(this.currentShow=e,this.$emit(e?"open":"close",{component:this}))},handleReject(){this.setShow(!1)},handleValueChange(e){this.currentValue=r.cloneDate(e.value||void 0),this.valueDuringOnChange=e.value,this.showDuringOnChange=!1,this.shouldFocusDateInput=!0,this.$emit("changemodel",this.computedValue),this.$emit("update:modelValue",this.computedValue),this.$emit("change",{event:e.event,value:this.computedValue,show:this.computedShow,component:this,target:{name:this.$props.name,value:this.computedValue,valueAsDate:this.computedValue}}),this.valueDuringOnChange=void 0,this.showDuringOnChange=void 0,this.setShow(!1)},handleFocus(e){this.isFocused=!0,this.$emit("focus",{event:e})},handleBlur(e){this.createBlurTimeout(),this.$emit("blur",{event:e})},timeSelectorBlur(e){this.$emit("blur",{event:e}),clearTimeout(this._blurTimeout),this.createBlurTimeout()},timeSelectorFocus(){clearTimeout(this._blurTimeout)},createBlurTimeout(){this._blurTimeout=setTimeout(()=>{this.isFocused=!1;const e=document.activeElement&&document.activeElement.closest(`#${this._popupId}`);this._dateInput&&t.canUseDOM&&document.activeElement!==this._dateInput.element()&&!e&&this.setShow(!1)},200)},handleDateIconClick(e){this.$props.disabled||(this.shouldFocusDateInput=!0,this.setShow(!this.computedShow),this.$emit("iconclick",e))},handleIconMouseDown(e){e.preventDefault()},handleKeyDown(e){const{altKey:i,keyCode:a}=e;if(a===t.Keys.tab&&this._dateInput&&e.target!==this._dateInput._element){e.preventDefault(),this.$data.shouldFocusDateInput=!0,this.setShow(!1);return}if(a===t.Keys.esc){this.shouldFocusDateInput=!0,this.setShow(!1);return}i&&(a===t.Keys.up||a===t.Keys.down)&&(e.preventDefault(),e.stopPropagation(),this.shouldFocusDateInput=a===t.Keys.up,this.setShow(a===t.Keys.down)),this.$emit("keydown",e)},dateInputElement(){return this._dateInput&&this._dateInput.$el||this._wrapper&&this._wrapper.querySelector(".k-dateinput-wrap > input.k-input")}}});exports.DateTimePicker=ne;
|
|
8
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("vue"),G=require("@progress/kendo-vue-labels"),J=require("@progress/kendo-vue-buttons"),Q=require("@progress/kendo-vue-popup"),r=require("@progress/kendo-date-math"),t=require("@progress/kendo-vue-common"),W=require("../dateinput/DateInput.js"),Y=require("../package-metadata.js"),u=require("../utils.js"),o=require("../messages/main.js"),T=require("@progress/kendo-vue-intl"),Z=require("./DateTimeSelector.js"),ee=require("../timepicker/utils.js"),b=require("../defaults.js"),te=require("../dateinput/utils.js"),ie=require("@progress/kendo-svg-icons");function m(e){return typeof e=="function"||Object.prototype.toString.call(e)==="[object Object]"&&!n.isVNode(e)}const ne=n.defineComponent({name:"KendoDateTimePicker",emits:{changemodel:e=>!0,"update:modelValue":e=>!0,iconclick:e=>!0,change:e=>!0,focus:e=>!0,blur:e=>!0,keydown:e=>!0,open:e=>!0,close:e=>!0},props:{modelValue:{type:Date,default:void 0},defaultShow:{type:Boolean,default:!1},defaultValue:{type:Date,default:null},disabled:{type:Boolean,default:!1},dateInput:{type:[String,Object,Function],default:function(){}},popup:{type:[String,Object,Function],default:function(){}},calendar:{type:[String,Object,Function],default:function(){}},focusedDate:Date,format:{type:[String,Object],default:function(){return"g"}},formatPlaceholder:{type:[String,Object],default:function(){return te.defaultFormatPlaceholder}},rounded:{type:String,validator:function(e){return["none","small","medium","large","full"].includes(e)}},fillMode:{type:String,validator:function(e){return["solid","flat","outline"].includes(e)}},size:{type:String,validator:function(e){return["none","small","medium","large"].includes(e)}},id:String,ariaLabelledBy:String,ariaDescribedBy:String,min:{type:Date,default:function(){return u.MIN_DATE}},max:{type:Date,default:function(){return u.MAX_DATE}},maxTime:{type:Date,default:function(){return r.cloneDate(u.MAX_TIME)}},minTime:{type:Date,default:function(){return r.cloneDate(b.MIN_TIME)}},name:String,label:String,placeholder:String,popupSettings:{type:Object,default:function(){return{}}},show:{type:Boolean,default:void 0},tabIndex:{type:Number,default:0},title:{type:String,default:function(){return""}},steps:{type:Object,default:function(){return{}}},value:Date,weekNumber:{type:Boolean,default:!1},width:String,validationMessage:String,required:{type:Boolean,default:!1},validityStyles:{type:Boolean,default:!0},validate:Boolean,valid:{type:Boolean,default:void 0},cancelButton:{type:Boolean,default:!0},inputAttributes:Object},model:{event:"changemodel"},created(){this._anchor=t.guid(),this._popupId="popup"+t.guid(),this._wrapper=null,this._dateInput=null,this._dateTimeSelector=null,t.validatePackage(Y.packageMetadata),this.currentValue=this.$props.defaultValue,this.currentShow=this.$props.defaultShow},inject:{kendoLocalizationService:{default:null}},data(){return{currentValue:null,currentShow:!1,valueDuringOnChange:void 0,showDuringOnChange:void 0,shouldFocusDateInput:!1,isFocused:!1}},computed:{computedValue(){const e=this.valueDuringOnChange!==void 0?this.valueDuringOnChange:this.$props.value!==void 0?this.$props.value:this.$props.modelValue!==void 0?this.$props.modelValue:this.$data.currentValue;return e!==null?r.cloneDate(e):null},computedShow(){return this.showDuringOnChange!==void 0?this.showDuringOnChange:this.$props.show!==void 0?this.$props.show:this.currentShow}},watch:{show:function(e,i){this._oldShow=i},currentShow:function(e,i){this._oldShow=i}},mounted(){this.computedShow&&this.$forceUpdate();const e=this.dateInputElement();this._dateTimeSelector=this.$refs.dateTimeSelector,this._wrapper=this.kendoAnchorRef,this._dateInput=this.dateInputRef,e&&e.setAttribute("aria-haspopup","true")},updated(){const e=this.dateInputElement();this._dateTimeSelector=this.$refs.dateTimeSelector,this._wrapper=this.kendoAnchorRef,this._dateTimeSelector&&this.computedShow&&!this._oldShow&&this._dateTimeSelector.focus({preventScroll:!0}),e&&!this.computedShow&&this.shouldFocusDateInput&&this._dateInput.focus({preventScroll:!0}),this.shouldFocusDateInput=!1},setup(){const e=n.ref(null),i=n.inject("kendoLocalizationService",{});return{kendoAnchorRef:e,kendoLocalizationService:i}},render(){const e=t.getDefaultSlots(this),{disabled:i,tabIndex:a,title:d,id:f,format:g,formatPlaceholder:$,min:k,max:V,weekNumber:_,focusedDate:M,width:S,name:B,steps:v,placeholder:C,validationMessage:q,required:F,validityStyles:O,cancelButton:R,minTime:D,maxTime:w,ariaLabelledBy:ae,ariaDescribedBy:oe,size:p,fillMode:I,rounded:c,inputAttributes:x}=this.$props,{popupClass:E,appendTo:A,animate:j}=this.$props.popupSettings,y=!this.$props.validityStyles||this.validity().valid,N=this.$props.dateInput?t.templateRendering.call(this,this.$props.dateInput,t.getListeners.call(this)):void 0,P=n.createVNode(W.DateInput,{ref:h=>{this.dateInputRef=h},placeholder:C,disabled:i,format:g,formatPlaceholder:$,id:f,max:V,min:k,minTime:D,maxTime:w,name:B,size:null,rounded:null,fillMode:null,onChange:this.handleValueChange,required:F,steps:v,tabIndex:this.computedShow?-1:a,title:d,valid:this.validity().valid,validationMessage:q,validityStyles:O,value:this.computedValue,ariaHasPopup:"dialog",ariaExpanded:this.computedShow,ariaRole:"combobox",ariaControls:this._popupId,inputAttributes:x},m(e)?e:{default:()=>[e]}),L=t.getTemplate.call(this,{h:n.h,template:N,defaultRendering:P}),K=this.$props.calendar?t.templateRendering.call(this,this.$props.calendar,t.getListeners.call(this)):void 0,s=n.createVNode(Z.DateTimeSelector,{ref:"dateTimeSelector",cancelButton:R,value:this.computedValue,onChange:this.handleValueChange,onReject:this.handleReject,disabled:i,weekNumber:_,min:this.$props.min,max:this.$props.max,minTime:D,maxTime:w,focusedDate:M,format:g,calendar:K,steps:v,onFocus:this.timeSelectorFocus,onBlur:this.timeSelectorBlur,onKeydown:this.handleKeyDown},null),z=t.classNames("k-datetime-container k-reset",E),U=this.$props.popup?t.templateRendering.call(this,this.$props.popup,t.getListeners.call(this)):void 0,X=n.createVNode(Q.Popup,{show:this.computedShow,anchor:this._anchor,popupClass:z,id:this._popupId,anchorAlign:{horizontal:"left",vertical:"bottom"},popupAlign:{horizontal:"left",vertical:"top"},appendTo:A,animate:j},m(s)?s:{default:()=>[s]}),H=t.getTemplate.call(this,{h:n.h,template:U,defaultRendering:X,defaultSlots:s}),l=n.createVNode("div",{class:t.classNames("k-input","k-datetimepicker",{[`k-input-${t.kendoThemeMaps.sizeMap[p]||p}`]:p,[`k-input-${I}`]:I,[`k-rounded-${t.kendoThemeMaps.roundedMap[c]||c}`]:c,"k-invalid":!y,"k-required":this.required,"k-disabled":this.$props.disabled}),ref:h=>{this.kendoAnchorRef=h},onKeydown:this.handleKeyDown,style:{width:S},onFocusin:this.handleFocus,onFocusout:this.handleBlur},[L,n.createVNode(J.Button,{type:"button",tabIndex:-1,icon:"calendar",svgIcon:ie.calendarIcon,onMousedown:this.handleIconMouseDown,onClick:this.handleDateIconClick,title:T.provideLocalizationService(this).toLanguageString(o.toggleDateTimeSelector,o.messages[o.toggleDateTimeSelector]),rounded:null,class:"k-input-button","aria-controls":this._popupId,"aria-label":T.provideLocalizationService(this).toLanguageString(o.toggleDateTimeSelector,o.messages[o.toggleDateTimeSelector])},null),H]);return this.$props.label?n.createVNode(G.FloatingLabel,{label:this.$props.label,editorId:f,editorValid:y,editorValue:this.getDateInputText(),editorPlaceholder:this.$props.placeholder,editorDisabled:this.$props.disabled,style:{width:S}},m(l)?l:{default:()=>[l]}):l},methods:{validity(){const e=u.isInDateRange(this.computedValue,this.$props.min,this.$props.max)&&ee.isInTimeRange(this.computedValue,this.$props.minTime||b.MIN_TIME,this.$props.maxTime||u.MAX_TIME),i=this.$props.validationMessage!==void 0,a=(!this.$props.required||this.computedValue!==null)&&e,d=this.$props.valid!==void 0?this.$props.valid:a;return{customError:i,rangeOverflow:this.computedValue&&this.$props.max.getTime()<this.computedValue.getTime()||!1,rangeUnderflow:this.computedValue&&this.computedValue.getTime()<this.$props.min.getTime()||!1,valid:d,valueMissing:this.computedValue===null}},getDateInputText(){return this.computedValue?!0:this._dateInput?this._dateInput._element.value:""},focus(){const e=this.dateInputElement();e&&e.focus()},setShow(e){this.computedShow!==e&&(this.currentShow=e,this.$emit(e?"open":"close",{component:this}))},handleReject(){this.setShow(!1)},handleValueChange(e){this.currentValue=r.cloneDate(e.value||void 0),this.valueDuringOnChange=e.value,this.showDuringOnChange=!1,this.shouldFocusDateInput=!0,this.$emit("changemodel",this.computedValue),this.$emit("update:modelValue",this.computedValue),this.$emit("change",{event:e.event,value:this.computedValue,show:this.computedShow,component:this,target:{name:this.$props.name,value:this.computedValue,valueAsDate:this.computedValue}}),this.valueDuringOnChange=void 0,this.showDuringOnChange=void 0,this.setShow(!1)},handleFocus(e){this.isFocused=!0,this.$emit("focus",{event:e})},handleBlur(e){this.createBlurTimeout(),this.$emit("blur",{event:e})},timeSelectorBlur(e){this.$emit("blur",{event:e}),clearTimeout(this._blurTimeout),this.createBlurTimeout()},timeSelectorFocus(){clearTimeout(this._blurTimeout)},createBlurTimeout(){this._blurTimeout=setTimeout(()=>{this.isFocused=!1;const e=document.activeElement&&document.activeElement.closest(`#${this._popupId}`);this._dateInput&&t.canUseDOM&&document.activeElement!==this._dateInput.element()&&!e&&this.setShow(!1)},200)},handleDateIconClick(e){this.$props.disabled||(this.shouldFocusDateInput=!0,this.setShow(!this.computedShow),this.$emit("iconclick",e))},handleIconMouseDown(e){e.preventDefault()},handleKeyDown(e){const{altKey:i,keyCode:a}=e;if(a===t.Keys.tab&&this._dateInput&&e.target!==this._dateInput._element){e.preventDefault(),this.$data.shouldFocusDateInput=!0,this.setShow(!1);return}if(a===t.Keys.esc){this.shouldFocusDateInput=!0,this.setShow(!1);return}i&&(a===t.Keys.up||a===t.Keys.down)&&(e.preventDefault(),e.stopPropagation(),this.shouldFocusDateInput=a===t.Keys.up,this.setShow(a===t.Keys.down)),this.$emit("keydown",e)},dateInputElement(){return this._dateInput&&this._dateInput.$el||this._wrapper&&this._wrapper.querySelector(".k-dateinput-wrap > input.k-input")}}});exports.DateTimePicker=ne;
|
|
@@ -5,12 +5,12 @@
|
|
|
5
5
|
* Licensed under commercial license. See LICENSE.md in the package root for more information
|
|
6
6
|
*-------------------------------------------------------------------------------------------
|
|
7
7
|
*/
|
|
8
|
-
import { defineComponent as ie, createVNode as n, h as b, ref as ne, inject as
|
|
8
|
+
import { defineComponent as ie, createVNode as n, h as b, ref as ne, inject as oe, isVNode as ae } from "vue";
|
|
9
9
|
import { FloatingLabel as ue } from "@progress/kendo-vue-labels";
|
|
10
10
|
import { Button as se } from "@progress/kendo-vue-buttons";
|
|
11
11
|
import { Popup as le } from "@progress/kendo-vue-popup";
|
|
12
12
|
import { cloneDate as s } from "@progress/kendo-date-math";
|
|
13
|
-
import { Keys as
|
|
13
|
+
import { Keys as o, canUseDOM as re, getDefaultSlots as de, templateRendering as c, getListeners as m, getTemplate as T, classNames as _, kendoThemeMaps as k, guid as V, validatePackage as pe } from "@progress/kendo-vue-common";
|
|
14
14
|
import { DateInput as he } from "../dateinput/DateInput.mjs";
|
|
15
15
|
import { packageMetadata as ce } from "../package-metadata.mjs";
|
|
16
16
|
import { isInDateRange as me, MAX_TIME as B, MAX_DATE as fe, MIN_DATE as ge } from "../utils.mjs";
|
|
@@ -22,7 +22,7 @@ import { MIN_TIME as M } from "../defaults.mjs";
|
|
|
22
22
|
import { defaultFormatPlaceholder as we } from "../dateinput/utils.mjs";
|
|
23
23
|
import { calendarIcon as Ie } from "@progress/kendo-svg-icons";
|
|
24
24
|
function f(e) {
|
|
25
|
-
return typeof e == "function" || Object.prototype.toString.call(e) === "[object Object]" && !
|
|
25
|
+
return typeof e == "function" || Object.prototype.toString.call(e) === "[object Object]" && !ae(e);
|
|
26
26
|
}
|
|
27
27
|
const Pe = /* @__PURE__ */ ie({
|
|
28
28
|
name: "KendoDateTimePicker",
|
|
@@ -84,23 +84,20 @@ const Pe = /* @__PURE__ */ ie({
|
|
|
84
84
|
},
|
|
85
85
|
rounded: {
|
|
86
86
|
type: String,
|
|
87
|
-
default: "medium",
|
|
88
87
|
validator: function(e) {
|
|
89
|
-
return ["small", "medium", "large", "full"].includes(e);
|
|
88
|
+
return ["none", "small", "medium", "large", "full"].includes(e);
|
|
90
89
|
}
|
|
91
90
|
},
|
|
92
91
|
fillMode: {
|
|
93
92
|
type: String,
|
|
94
|
-
default: "solid",
|
|
95
93
|
validator: function(e) {
|
|
96
94
|
return ["solid", "flat", "outline"].includes(e);
|
|
97
95
|
}
|
|
98
96
|
},
|
|
99
97
|
size: {
|
|
100
98
|
type: String,
|
|
101
|
-
default: "medium",
|
|
102
99
|
validator: function(e) {
|
|
103
|
-
return ["small", "medium", "large"].includes(e);
|
|
100
|
+
return ["none", "small", "medium", "large"].includes(e);
|
|
104
101
|
}
|
|
105
102
|
},
|
|
106
103
|
id: String,
|
|
@@ -237,7 +234,7 @@ const Pe = /* @__PURE__ */ ie({
|
|
|
237
234
|
}), this.shouldFocusDateInput = !1;
|
|
238
235
|
},
|
|
239
236
|
setup() {
|
|
240
|
-
const e = ne(null), t =
|
|
237
|
+
const e = ne(null), t = oe("kendoLocalizationService", {});
|
|
241
238
|
return {
|
|
242
239
|
kendoAnchorRef: e,
|
|
243
240
|
kendoLocalizationService: t
|
|
@@ -312,7 +309,7 @@ const Pe = /* @__PURE__ */ ie({
|
|
|
312
309
|
h: b,
|
|
313
310
|
template: G,
|
|
314
311
|
defaultRendering: J
|
|
315
|
-
}), W = this.$props.calendar ? c.call(this, this.$props.calendar, m.call(this)) : void 0,
|
|
312
|
+
}), W = this.$props.calendar ? c.call(this, this.$props.calendar, m.call(this)) : void 0, a = n(Se, {
|
|
316
313
|
ref: "dateTimeSelector",
|
|
317
314
|
cancelButton: K,
|
|
318
315
|
value: this.computedValue,
|
|
@@ -346,13 +343,13 @@ const Pe = /* @__PURE__ */ ie({
|
|
|
346
343
|
},
|
|
347
344
|
appendTo: X,
|
|
348
345
|
animate: H
|
|
349
|
-
}, f(
|
|
350
|
-
default: () => [
|
|
346
|
+
}, f(a) ? a : {
|
|
347
|
+
default: () => [a]
|
|
351
348
|
}), te = T.call(this, {
|
|
352
349
|
h: b,
|
|
353
350
|
template: Z,
|
|
354
351
|
defaultRendering: ee,
|
|
355
|
-
defaultSlots:
|
|
352
|
+
defaultSlots: a
|
|
356
353
|
}), u = n("div", {
|
|
357
354
|
class: _("k-input", "k-datetimepicker", {
|
|
358
355
|
[`k-input-${k.sizeMap[d] || d}`]: d,
|
|
@@ -473,15 +470,15 @@ const Pe = /* @__PURE__ */ ie({
|
|
|
473
470
|
altKey: t,
|
|
474
471
|
keyCode: i
|
|
475
472
|
} = e;
|
|
476
|
-
if (i ===
|
|
473
|
+
if (i === o.tab && this._dateInput && e.target !== this._dateInput._element) {
|
|
477
474
|
e.preventDefault(), this.$data.shouldFocusDateInput = !0, this.setShow(!1);
|
|
478
475
|
return;
|
|
479
476
|
}
|
|
480
|
-
if (i ===
|
|
477
|
+
if (i === o.esc) {
|
|
481
478
|
this.shouldFocusDateInput = !0, this.setShow(!1);
|
|
482
479
|
return;
|
|
483
480
|
}
|
|
484
|
-
t && (i ===
|
|
481
|
+
t && (i === o.up || i === o.down) && (e.preventDefault(), e.stopPropagation(), this.shouldFocusDateInput = i === o.up, this.setShow(i === o.down)), this.$emit("keydown", e);
|
|
485
482
|
},
|
|
486
483
|
dateInputElement() {
|
|
487
484
|
return this._dateInput && this._dateInput.$el || this._wrapper && this._wrapper.querySelector(".k-dateinput-wrap > input.k-input");
|