@progress/kendo-vue-dateinputs 5.3.0-dev.202410141143 → 5.3.0-develop.1

package/timepicker/TimePart.mjs

@@ -0,0 +1,266 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2024 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+import { defineComponent as w, inject as m, createVNode as s, isVNode as B } from "vue";
+import { Button as b } from "@progress/kendo-vue-buttons";
+import { cloneDate as S } from "@progress/kendo-date-math";
+import { classNames as d, canUseDOM as I, Keys as f } from "@progress/kendo-vue-common";
+import { provideIntlService as M, provideLocalizationService as T } from "@progress/kendo-vue-intl";
+import { selectNow as g, messages as v, now as y } from "../messages/main.mjs";
+import { TimeList as R } from "./TimeList.mjs";
+import { MAX_TIME as F, MIN_TIME as N, MIDNIGHT_DATE as x } from "../utils.mjs";
+import { TIME_PART as a } from "./models/TimePart.mjs";
+import { snapTime as L, generateSnappers as k, timeInRange as D, isInTimeRange as _, getNow as C } from "./utils.mjs";
+function E(t) {
+  return typeof t == "function" || Object.prototype.toString.call(t) === "[object Object]" && !B(t);
+}
+const u = new RegExp(`${a.hour}|${a.minute}|${a.second}|${a.dayperiod}|literal`);
+let c = /* @__PURE__ */ function(t) {
+  return t[t.Left = 0] = "Left", t[t.Right = 1] = "Right", t;
+}({});
+const X = /* @__PURE__ */ w({
+  name: "KendoTimePart",
+  props: {
+    cancelButton: {
+      type: Boolean,
+      default: !0
+    },
+    disabled: {
+      type: Boolean,
+      default: !1
+    },
+    format: {
+      type: String,
+      default: function() {
+        return "hh:mm a";
+      }
+    },
+    max: {
+      type: Date,
+      default: function() {
+        return F;
+      }
+    },
+    min: {
+      type: Date,
+      default: function() {
+        return N;
+      }
+    },
+    nowButton: {
+      type: Boolean,
+      default: !0
+    },
+    steps: {
+      type: Object,
+      default: function() {
+        return {};
+      }
+    },
+    smoothScroll: {
+      type: Boolean,
+      default: !0
+    },
+    tabIndex: Number,
+    value: {
+      type: Date,
+      default: function() {
+        return null;
+      }
+    },
+    boundRange: {
+      type: Boolean,
+      default: !1
+    }
+  },
+  emits: {
+    change: null,
+    focus: null,
+    blur: null,
+    nowclick: null
+  },
+  created() {
+    this.timeLists = [], this.snapTime = L(k(this.$props.steps, this.$props.min)), this.activeListIndex = -1, this.hasActiveButton = this.hasActiveButton.bind(this);
+  },
+  inject: {
+    kendoIntlService: {
+      default: null
+    },
+    kendoLocalizationService: {
+      default: null
+    }
+  },
+  data() {
+    return {
+      activeListIndex: null
+    };
+  },
+  computed: {
+    element() {
+      return this._element;
+    },
+    computedValue() {
+      return D(this.snapTime(S(this.$props.value || x)), this.computedMin, this.computedMax);
+    },
+    intl() {
+      return M(this);
+    },
+    computedMin() {
+      return this.snapTime(this.$props.min);
+    },
+    computedMax() {
+      return this.snapTime(this.$props.max);
+    }
+  },
+  mounted() {
+    this._nowButton = this.$refs.nowButton, this.dateFormatParts.forEach((t, e) => {
+      t.type !== "literal" && this.timeLists.push(this.$refs["timeList" + e]);
+    });
+  },
+  setup() {
+    const t = m("kendoIntlService", {}), e = m("kendoLocalizationService", {});
+    return {
+      kendoIntlService: t,
+      kendoLocalizationService: e
+    };
+  },
+  render() {
+    let t;
+    const {
+      format: e,
+      smoothScroll: n,
+      disabled: i
+    } = this.$props;
+    this.snapTime = L(k(this.$props.steps, this.computedMin)), this.dateFormatParts = this.intl.splitDateFormat(e).filter(this.timeFormatFilter);
+    const $ = d({
+      "k-disabled": i
+    }, "k-time-part"), h = T(this), p = h.toLanguageString(g, v[g]);
+    return s("div", {
+      class: $
+    }, [s("div", {
+      class: "k-time-header"
+    }, [s("span", {
+      class: "k-title"
+    }, [this.intl.formatDate(this.computedValue, this.dateFormatParts.reduce(this.timeFormatReducer, ""))]), this.showNowButton() && s(b, {
+      type: "button",
+      ref: "nowButton",
+      fillMode: "flat",
+      class: "k-time-now",
+      title: p,
+      "aria-label": p,
+      onClick: this.onNowClick,
+      tabIndex: i ? -1 : 0
+    }, E(t = h.toLanguageString(y, v[y])) ? t : {
+      default: () => [t]
+    })]), s("div", {
+      class: "k-time-list-container",
+      onKeydown: this.handleKeyDown
+    }, [s("span", {
+      class: "k-time-highlight"
+    }, null), this.dateFormatParts.map(function(o, r) {
+      return o.type !== "literal" ? s("div", {
+        key: r,
+        class: d("k-time-list-wrapper", {
+          "k-focus": r === this.activeListIndex
+        }),
+        role: "presentation",
+        tabindex: -1
+      }, [s("span", {
+        class: "k-title",
+        onMousedown: (l) => {
+          l.preventDefault();
+        }
+      }, [this.intl.dateFieldName(o)]), s(R, {
+        min: this.computedMin,
+        max: this.computedMax,
+        boundRange: this.$props.boundRange,
+        part: o,
+        step: o.type ? this.$props.steps[o.type] : 1,
+        smoothScroll: n,
+        ref: "timeList" + r,
+        id: r,
+        onFocus: (l) => {
+          this.handleListFocus(l, r);
+        },
+        onBlur: this.handleListBlur,
+        onChange: this.handleChange,
+        value: this.computedValue,
+        disabled: i
+      }, null)]) : s("div", {
+        key: r,
+        class: "k-time-separator"
+      }, [o.pattern]);
+    }, this)])]);
+  },
+  methods: {
+    onNowClick(t) {
+      this.$emit("nowclick", t);
+    },
+    focus(t) {
+      this.$nextTick(() => {
+        const e = this.timeLists[0];
+        !this.hasActiveButton() && e && e.$el && e.focus(t);
+      });
+    },
+    timeFormatReducer(t, e) {
+      return t + e.pattern;
+    },
+    timeFormatFilter(t, e, n) {
+      const i = e >= 1 && n[e - 1];
+      return i && i && t.type === "literal" ? u.test(i.type || "") : u.test(t.type || "");
+    },
+    hasActiveButton() {
+      return I && this._nowButton && document.activeElement === this._nowButton.$el;
+    },
+    focusList(t) {
+      this.timeLists.length && this.timeLists.reduce(this.listReducer, []).map((e) => t === c.Right ? e.next : e.prev).map((e) => e && e.$el && e.$el.focus({
+        preventScroll: !0
+      }));
+    },
+    listReducer(t, e, n, i) {
+      return t.length || e.$props.id !== this.activeListIndex ? t : [{
+        next: i[n + 1] || e,
+        prev: i[n - 1] || e
+      }];
+    },
+    showNowButton() {
+      return !this.hasSteps() && this.$props.nowButton && _(C(), this.computedMin, this.computedMax);
+    },
+    hasSteps() {
+      const t = Object.keys(this.$props.steps);
+      return t.length !== t.reduce((e, n) => e + this.$props.steps[n], 0);
+    },
+    handleKeyDown(t) {
+      const {
+        keyCode: e
+      } = t;
+      switch (e) {
+        case f.left:
+          t.preventDefault(), this.focusList(c.Left);
+          return;
+        case f.right:
+          t.preventDefault(), this.focusList(c.Right);
+          return;
+        default:
+          return;
+      }
+    },
+    handleListBlur(t) {
+      this.$emit("blur", t);
+    },
+    handleListFocus(t, e) {
+      this.$emit("focus", t), this.activeListIndex = e;
+    },
+    handleChange(t) {
+      this.$emit("change", t);
+    }
+  }
+});
+export {
+  c as Direction,
+  X as TimePart
+};

package/timepicker/TimePicker.js

@@ -0,0 +1,8 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2024 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("vue"),E=require("@progress/kendo-vue-labels"),U=require("@progress/kendo-vue-popup"),k=require("@progress/kendo-date-math"),t=require("@progress/kendo-vue-common"),H=require("@progress/kendo-vue-intl"),G=require("@progress/kendo-vue-buttons"),s=require("../messages/main.js"),X=require("../dateinput/DateInput.js"),J=require("./TimeSelector.js"),l=require("../utils.js"),S=require("./utils.js"),Q=require("../dateinput/utils.js"),W=require("@progress/kendo-svg-icons");function w(e){return typeof e=="function"||Object.prototype.toString.call(e)==="[object Object]"&&!n.isVNode(e)}const Y=n.defineComponent({name:"KendoTimePicker",emits:{changemodel:null,"update:modelValue":null,iconclick:null,change:null,focus:null,blur:null,keydown:null,open:null,close:null},model:{event:"changemodel"},props:{cancelButton:{type:Boolean,default:!0},nowButton:{type:Boolean,default:void 0},defaultShow:{type:Boolean,default:!1},modelValue:{type:Date,default:void 0},defaultValue:{type:Date,default:function(){return null}},dateInput:{type:[String,Object,Function],default:function(){}},popup:{type:[String,Object,Function],default:function(){}},disabled:{type:Boolean,default:!1},format:{type:[String,Object],default:function(){return"t"}},formatPlaceholder:{type:[String,Object],default:function(){return Q.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 l.MIN_TIME}},max:{type:Date,default:function(){return l.MAX_TIME}},name:String,label:String,placeholder:String,popupSettings:{type:Object,default:function(){return{}}},show:{type:Boolean,default:void 0},tabIndex:{type:Number,default:0},steps:{type:Object,default:function(){return{}}},smoothScroll:{type:Boolean,default:!0},title:{type:String,default:function(){return""}},value:{type:Date,default:function(){}},width:[Number,String],validationMessage:String,required:{type:Boolean,default:!1},validityStyles:{type:Boolean,default:!0},validate:Boolean,valid:{type:Boolean,default:void 0}},created(){this._anchor=t.guid(),this._popupId="popup"+t.guid(),this._element=null,this._wrapper=null,this._dateInput=null,this._timeSelector=null,this.shouldFocusDateInput=!1,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,isFocused:!1}},computed:{timeSelector(){return this._timeSelector},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?k.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(),this._dateInput=this.dateInputRef,this._timeSelector=this.$refs.timeSelector,this._wrapper=this.kendoAnchorRef,this._dateInput&&this._dateInput.element()&&this._dateInput.element().setAttribute("aria-haspopup","true")},updated(){this._dateInput=this.dateInputRef,this._timeSelector=this.$refs.timeSelector,this._wrapper=this.kendoAnchorRef,this._timeSelector&&this.computedShow&&!this._oldShow?this._timeSelector.focusActiveList():this._dateInput&&this._dateInput.element()&&!this.computedShow&&this.shouldFocusDateInput&&this._dateInput.element().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:o,title:h,id:u,placeholder:c,format:a,formatPlaceholder:V,smoothScroll:$,width:I,name:_,steps:v,cancelButton:D,nowButton:T,validationMessage:B,required:C,validityStyles:M,ariaLabelledBy:Z,ariaDescribedBy:ee,size:p,rounded:m,fillMode:y}=this.$props,{popupClass:F,appendTo:O,animate:R}=this.$props.popupSettings,f=!this.$props.validityStyles||this.validity().valid;t.classNames("k-picker-wrap",{"k-invalid":!f,"k-disabled":i,"k-focus":this.isFocused});const q=t.classNames("k-group k-reset",F),b=H.provideLocalizationService(this),z=b.toLanguageString(s.toggleClock,s.messages[s.toggleClock]),x=b.toLanguageString(s.toggleTimeSelector,s.messages[s.toggleTimeSelector]),j=this.$props.dateInput?t.templateRendering.call(this,this.$props.dateInput,t.getListeners.call(this)):void 0,N=n.createVNode(X.DateInput,{ref:g=>{this.dateInputRef=g},placeholder:c,disabled:i,format:a,formatPlaceholder:V,id:u,size:null,rounded:null,fillMode:null,max:this.normalizeTime(this.$props.max),min:this.normalizeTime(this.$props.min),name:_,onChange:this.handleInputValueChange,required:C,steps:v,tabIndex:this.computedShow?-1:o,title:h,valid:this.validity().valid,validationMessage:B,validityStyles:M,value:this.computedValue&&this.normalizeTime(this.computedValue),ariaHasPopup:"grid",ariaExpanded:this.computedShow,ariaRole:"combobox",ariaControls:this._popupId},w(e)?e:{default:()=>[e]}),r=n.createVNode(J.TimeSelector,{ref:"timeSelector",cancelButton:D,disabled:i,nowButton:T,format:a,min:this.$props.min,max:this.$props.max,steps:v,smoothScroll:$,value:this.computedValue,onChange:this.handleValueChange,onReject:this.handleValueReject,onFocus:this.timeFocus,onBlur:this.timeBlur,onKeydown:this.handleKeyDown},null),P=t.getTemplate.call(this,{h:n.h,template:j,defaultRendering:N,additionalListeners:{change:this.handleInputValueChange}}),L=this.$props.popup?t.templateRendering.call(this,this.$props.popup,t.getListeners.call(this)):void 0,A=n.createVNode(U.Popup,{show:this.computedShow,anchor:this._anchor,class:q,id:this._popupId,anchorAlign:{horizontal:"left",vertical:"bottom"},popupAlign:{horizontal:"left",vertical:"top"},appendTo:O,animate:R},w(r)?r:{default:()=>[r]}),K=t.getTemplate.call(this,{h:n.h,template:L,defaultRendering:A,defaultSlots:r}),d=n.createVNode("div",{class:t.classNames("k-input","k-timepicker",{[`k-input-${t.kendoThemeMaps.sizeMap[p]||p}`]:p,[`k-input-${y}`]:y,[`k-rounded-${t.kendoThemeMaps.roundedMap[m]||m}`]:m,"k-invalid":!f,"k-required":this.required,"k-disabled":this.$props.disabled,"k-focus":this.isFocused}),onKeydown:this.handleKeyDown,style:{width:I},onFocusin:this.handleFocus,onFocusout:this.handleBlur,ref:g=>{this.kendoAnchorRef=g}},[P,n.createVNode(G.Button,{type:"button",tabIndex:-1,icon:"clock",svgIcon:W.clockIcon,onMousedown:this.handleIconMouseDown,onClick:this.handleIconClick,title:x,rounded:null,class:"k-input-button","aria-controls":this._popupId,"aria-label":z},null),K]);return this.$props.label?n.createVNode(E.FloatingLabel,{label:this.$props.label,editorId:u,editorValid:f,editorValue:this.getDateInputText(),editorPlaceholder:this.$props.placeholder,editorDisabled:this.$props.disabled,style:{width:I}},w(d)?d:{default:()=>[d]}):d},methods:{validity(){const e=this.computedValue&&this.normalizeTime(this.computedValue),i=this.normalizeTime(this.$props.min),o=this.normalizeTime(this.$props.max),h=S.isInRange(e,i,o),u=this.$props.validationMessage!==void 0,c=(!this.$props.required||this.computedValue!==null)&&h,a=this.$props.valid!==void 0?this.$props.valid:c;return{customError:u,rangeOverflow:S.isBiggerThanMax(e,o),rangeUnderflow:S.isSmallerThanMin(e,i),valid:a,valueMissing:this.computedValue===null}},getDateInputText(){return this.computedValue?!0:this._dateInput?this._dateInput._element.value:""},focus(){this._dateInput&&this._dateInput.focus()},normalizeTime(e){return l.setTime(l.MIDNIGHT_DATE,e)},setShow(e){this.computedShow!==e&&(this.currentShow=e,this.$emit(e?"open":"close",{component:this}))},mergeTime(e){return this.computedValue&&e?l.setTime(this.computedValue,e):e},handleInputValueChange(e){const i=this.mergeTime(e.value);this.handleValueChange({...e,value:i})},handleValueChange(e){this.currentValue=k.cloneDate(e.value),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._oldShow=this.computedShow,this.isFocused=!0,this.$emit("focus",e)},handleBlur(e){this.createBlurTimeout(),this.$emit("blur",e)},timeBlur(e){this.$emit("blur",e),clearTimeout(this._blurTimeout),this.createBlurTimeout()},timeFocus(){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)},handleValueReject(e){this.setShow(!1)},handleIconClick(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:o}=e;if(o===t.Keys.tab&&this._dateInput&&e.target!==this._dateInput._element){e.preventDefault(),this.shouldFocusDateInput=!0,this.setShow(!1);return}if(o===t.Keys.esc){this.shouldFocusDateInput=!0,this.setShow(!1);return}i&&(o===t.Keys.up||o===t.Keys.down)&&(e.preventDefault(),e.stopPropagation(),this.shouldFocusDateInput=o===t.Keys.up,this.setShow(o===t.Keys.down)),this.$emit("keydown",e)}}});exports.TimePicker=Y;