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

package/datetimepicker/DateTimePicker.mjs

@@ -0,0 +1,484 @@
+/**
+ * @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 te, ref as ie, inject as ne, createVNode as n, h as b, isVNode as ae } from "vue";
+import { FloatingLabel as oe } from "@progress/kendo-vue-labels";
+import { Button as le } from "@progress/kendo-vue-buttons";
+import { Popup as ue } from "@progress/kendo-vue-popup";
+import { cloneDate as u } from "@progress/kendo-date-math";
+import { guid as T, validatePackage as se, getDefaultSlots as re, templateRendering as c, getListeners as m, getTemplate as _, classNames as k, kendoThemeMaps as V, canUseDOM as de, Keys as a } from "@progress/kendo-vue-common";
+import { DateInput as pe } from "../dateinput/DateInput.mjs";
+import { packageMetadata as he } from "../package-metadata.mjs";
+import { MIN_DATE as ce, MAX_DATE as me, MAX_TIME as B, isInDateRange as fe } from "../utils.mjs";
+import { toggleDateTimeSelector as s, messages as C } from "../messages/main.mjs";
+import { provideLocalizationService as F } from "@progress/kendo-vue-intl";
+import { DateTimeSelector as ge } from "./DateTimeSelector.mjs";
+import { isInTimeRange as Se } from "../timepicker/utils.mjs";
+import { MIN_TIME as M } from "../defaults.mjs";
+import { defaultFormatPlaceholder as we } from "../dateinput/utils.mjs";
+import { calendarIcon as Ie } from "@progress/kendo-svg-icons";
+function f(e) {
+  return typeof e == "function" || Object.prototype.toString.call(e) === "[object Object]" && !ae(e);
+}
+const Ae = /* @__PURE__ */ te({
+  name: "KendoDateTimePicker",
+  emits: {
+    changemodel: null,
+    "update:modelValue": null,
+    iconclick: null,
+    change: null,
+    focus: null,
+    blur: null,
+    keydown: null,
+    open: null,
+    close: null
+  },
+  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 we;
+      }
+    },
+    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 ce;
+      }
+    },
+    max: {
+      type: Date,
+      default: function() {
+        return me;
+      }
+    },
+    maxTime: {
+      type: Date,
+      default: function() {
+        return u(B);
+      }
+    },
+    minTime: {
+      type: Date,
+      default: function() {
+        return u(M);
+      }
+    },
+    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
+    }
+  },
+  model: {
+    event: "changemodel"
+  },
+  created() {
+    this._anchor = T(), this._popupId = "popup" + T(), this._wrapper = null, this._dateInput = null, this._dateTimeSelector = null, se(he), 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 ? u(e) : null;
+    },
+    computedShow() {
+      return this.showDuringOnChange !== void 0 ? this.showDuringOnChange : this.$props.show !== void 0 ? this.$props.show : this.currentShow;
+    }
+  },
+  watch: {
+    show: function(e, t) {
+      this._oldShow = t;
+    },
+    currentShow: function(e, t) {
+      this._oldShow = t;
+    }
+  },
+  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 = ie(null), t = ne("kendoLocalizationService", {});
+    return {
+      kendoAnchorRef: e,
+      kendoLocalizationService: t
+    };
+  },
+  render() {
+    const e = re(this), {
+      disabled: t,
+      tabIndex: i,
+      title: r,
+      id: g,
+      format: S,
+      formatPlaceholder: x,
+      min: O,
+      max: R,
+      weekNumber: E,
+      focusedDate: j,
+      width: w,
+      name: A,
+      steps: I,
+      placeholder: P,
+      validationMessage: z,
+      required: L,
+      validityStyles: N,
+      cancelButton: K,
+      minTime: v,
+      maxTime: D,
+      ariaLabelledBy: ve,
+      ariaDescribedBy: De,
+      size: d,
+      fillMode: y,
+      rounded: p
+    } = this.$props, {
+      popupClass: q,
+      appendTo: U,
+      animate: X
+    } = this.$props.popupSettings, $ = !this.$props.validityStyles || this.validity().valid, H = this.$props.dateInput ? c.call(this, this.$props.dateInput, m.call(this)) : void 0, G = n(pe, {
+      ref: (h) => {
+        this.dateInputRef = h;
+      },
+      placeholder: P,
+      disabled: t,
+      format: S,
+      formatPlaceholder: x,
+      id: g,
+      max: R,
+      min: O,
+      minTime: v,
+      maxTime: D,
+      name: A,
+      size: null,
+      rounded: null,
+      fillMode: null,
+      onChange: this.handleValueChange,
+      required: L,
+      steps: I,
+      tabIndex: this.computedShow ? -1 : i,
+      title: r,
+      valid: this.validity().valid,
+      validationMessage: z,
+      validityStyles: N,
+      value: this.computedValue,
+      ariaHasPopup: "dialog",
+      ariaExpanded: this.computedShow,
+      ariaRole: "combobox",
+      ariaControls: this._popupId
+    }, f(e) ? e : {
+      default: () => [e]
+    }), J = _.call(this, {
+      h: b,
+      template: H,
+      defaultRendering: G
+    }), Q = this.$props.calendar ? c.call(this, this.$props.calendar, m.call(this)) : void 0, o = n(ge, {
+      ref: "dateTimeSelector",
+      cancelButton: K,
+      value: this.computedValue,
+      onChange: this.handleValueChange,
+      onReject: this.handleReject,
+      disabled: t,
+      weekNumber: E,
+      min: this.$props.min,
+      max: this.$props.max,
+      minTime: v,
+      maxTime: D,
+      focusedDate: j,
+      format: S,
+      calendar: Q,
+      steps: I,
+      onFocus: this.timeSelectorFocus,
+      onBlur: this.timeSelectorBlur,
+      onKeydown: this.handleKeyDown
+    }, null), W = k("k-datetime-container k-reset", q), Y = this.$props.popup ? c.call(this, this.$props.popup, m.call(this)) : void 0, Z = n(ue, {
+      show: this.computedShow,
+      anchor: this._anchor,
+      popupClass: W,
+      id: this._popupId,
+      anchorAlign: {
+        horizontal: "left",
+        vertical: "bottom"
+      },
+      popupAlign: {
+        horizontal: "left",
+        vertical: "top"
+      },
+      appendTo: U,
+      animate: X
+    }, f(o) ? o : {
+      default: () => [o]
+    }), ee = _.call(this, {
+      h: b,
+      template: Y,
+      defaultRendering: Z,
+      defaultSlots: o
+    }), l = n("div", {
+      class: k("k-input", "k-datetimepicker", {
+        [`k-input-${V.sizeMap[d] || d}`]: d,
+        [`k-input-${y}`]: y,
+        [`k-rounded-${V.roundedMap[p] || p}`]: p,
+        "k-invalid": !$,
+        "k-required": this.required,
+        "k-disabled": this.$props.disabled
+      }),
+      ref: (h) => {
+        this.kendoAnchorRef = h;
+      },
+      onKeydown: this.handleKeyDown,
+      style: {
+        width: w
+      },
+      onFocusin: this.handleFocus,
+      onFocusout: this.handleBlur
+    }, [J, n(le, {
+      type: "button",
+      tabIndex: -1,
+      icon: "calendar",
+      svgIcon: Ie,
+      onMousedown: this.handleIconMouseDown,
+      onClick: this.handleDateIconClick,
+      title: F(this).toLanguageString(s, C[s]),
+      rounded: null,
+      class: "k-input-button",
+      "aria-controls": this._popupId,
+      "aria-label": F(this).toLanguageString(s, C[s])
+    }, null), ee]);
+    return this.$props.label ? n(oe, {
+      label: this.$props.label,
+      editorId: g,
+      editorValid: $,
+      editorValue: this.getDateInputText(),
+      editorPlaceholder: this.$props.placeholder,
+      editorDisabled: this.$props.disabled,
+      style: {
+        width: w
+      }
+    }, f(l) ? l : {
+      default: () => [l]
+    }) : l;
+  },
+  methods: {
+    validity() {
+      const e = fe(this.computedValue, this.$props.min, this.$props.max) && Se(this.computedValue, this.$props.minTime || M, this.$props.maxTime || B), t = this.$props.validationMessage !== void 0, i = (!this.$props.required || this.computedValue !== null) && e, r = this.$props.valid !== void 0 ? this.$props.valid : i;
+      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: r,
+        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 = u(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", e);
+    },
+    handleBlur(e) {
+      this.createBlurTimeout(), this.$emit("blur", e);
+    },
+    timeSelectorBlur(e) {
+      this.$emit("blur", 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 && de && 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: t,
+        keyCode: i
+      } = e;
+      if (i === a.tab && this._dateInput && e.target !== this._dateInput._element) {
+        e.preventDefault(), this.$data.shouldFocusDateInput = !0, this.setShow(!1);
+        return;
+      }
+      if (i === a.esc) {
+        this.shouldFocusDateInput = !0, this.setShow(!1);
+        return;
+      }
+      t && (i === a.up || i === a.down) && (e.preventDefault(), e.stopPropagation(), this.shouldFocusDateInput = i === a.up, this.setShow(i === a.down)), this.$emit("keydown", e);
+    },
+    dateInputElement() {
+      return this._dateInput && this._dateInput.$el || this._wrapper && this._wrapper.querySelector(".k-dateinput-wrap > input.k-input");
+    }
+  }
+});
+export {
+  Ae as DateTimePicker
+};

package/datetimepicker/DateTimeSelector.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 a=require("vue"),C=require("@progress/kendo-vue-intl"),i=require("../messages/main.js"),u=require("@progress/kendo-vue-buttons"),N=require("../calendar/components/Calendar.js"),$=require("../timepicker/TimePart.js"),n=require("../utils.js"),B=require("@progress/kendo-date-math"),r=require("@progress/kendo-vue-common"),p=require("../defaults.js"),f=require("../timepicker/utils.js");function d(e){return typeof e=="function"||Object.prototype.toString.call(e)==="[object Object]"&&!a.isVNode(e)}const M=a.defineComponent({name:"KendoDateTimeSelector",props:{value:Date,disabled:{type:Boolean,default:!1},cancelButton:{type:Boolean,default:!0},min:{type:Date,default:n.MIN_DATE},max:{type:Date,default:n.MAX_DATE},maxTime:{type:Date,default:function(){return r.cloneDate(n.MAX_TIME)}},minTime:{type:Date,default:function(){return r.cloneDate(n.MIN_TIME)}},weekNumber:{type:Boolean,default:!1},steps:{type:Object,default:function(){return{}}},focusedDate:Date,format:String,calendar:Object,onChange:Function,onReject:Function,onFocus:Function,onBlur:Function,onKeydown:Function},created(){this._calendarWrap=null,this.currentTab="date",this.dateValue=this.$props.value,this.timeValue=this.$props.value||p.MIDNIGHT_DATE},inject:{kendoLocalizationService:{default:null}},data(){return{currentTab:null,dateValue:null,timeValue:Date}},computed:{hasDateValue(){return this.dateValue!==null},computedMinTime(){return this.$props.minTime!==void 0?this.$props.minTime:this.normalizeRange(this.$props.min,this.dateValue)},computedMaxTime(){return this.$props.maxTime!==void 0?this.$props.maxTime:this.normalizeRange(this.$props.max,this.dateValue)}},mounted(){this._acceptButton=this.$refs.acceptButton,this._calendar=this.$refs.calendar,this._calendarWrap=this.$refs.calendarWrap,this._cancelButton=this.$refs.cancelButton,this._timePart=this.$refs.timePart,this.focus({preventScroll:!0})},updated(){this.shouldFocusPart&&this.focus({preventScroll:!0}),this.shouldFocusPart=!1},setup(){const e=a.ref(null),t=a.inject("kendoLocalizationService",{});return{kendoAnchorRef:e,kendoLocalizationService:t}},render(){const{disabled:e,cancelButton:t,min:s,max:g,weekNumber:T,focusedDate:b,format:k,steps:V}=this.$props,v=r.classNames({"k-date-tab":this.currentTab==="date","k-time-tab":this.currentTab==="time","k-disabled":e},"k-datetime-wrap"),c=C.provideLocalizationService(this),h=c.toLanguageString(i.date,i.messages[i.date]),m=c.toLanguageString(i.time,i.messages[i.time]),o=c.toLanguageString(i.dateTimePickerCancel,i.messages[i.dateTimePickerCancel]),l=c.toLanguageString(i.dateTimePickerSet,i.messages[i.dateTimePickerSet]),D=a.createVNode(N.Calendar,{ref:"calendar",min:s,max:g,weekNumber:T,focusedDate:b,disabled:e||this.currentTab!=="date",value:this.dateValue,onChange:this.handleCalendarValueChange,onFocus:this.handleFocus,onBlur:this.handleBlur},null),y=r.getTemplate.call(this,{h:a.h,template:this.$props.calendar,defaultRendering:D});return a.createVNode("div",{onKeydown:this.handleKeyDown,class:v,tabindex:-1},[a.createVNode("div",{class:"k-datetime-buttongroup"},[a.createVNode(u.ButtonGroup,{width:"100%"},{default:()=>[a.createVNode(u.Button,{type:"button",selected:this.currentTab==="date",togglable:!0,onClick:this.handleDateClick},d(h)?h:{default:()=>[h]}),a.createVNode(u.Button,{type:"button",selected:this.currentTab==="time",togglable:!0,onClick:this.handleTimeClick},d(m)?m:{default:()=>[m]})]})]),a.createVNode("div",{class:"k-datetime-selector"},[a.createVNode("div",{class:"k-datetime-calendar-wrap",ref:"calendarWrap"},[y]),a.createVNode("div",{class:"k-datetime-time-wrap"},[a.createVNode($.TimePart,{key:1,onNowclick:this.handleNowClick,disabled:e||this.currentTab!=="time",ref:"timePart",min:this.computedMinTime||n.MIN_TIME,max:this.computedMaxTime||n.MAX_TIME,value:this.timeValue,format:k,steps:V,onChange:this.handleTimeListContainerChange,onFocus:this.handleFocus,onBlur:this.handleBlur},null)])]),a.createVNode("div",{class:"k-datetime-footer k-actions k-actions-stretched"},[t&&a.createVNode(u.Button,{type:"button",ref:"cancelButton",class:"k-time-cancel",onClick:this.handleReject,title:o,"aria-label":o},d(o)?o:{default:()=>[o]}),a.createVNode(u.Button,{type:"button",ref:"acceptButton",disabled:!this.hasDateValue,themeColor:"primary",class:"k-time-accept",onClick:this.handleAccept,title:l,"aria-label":l},d(l)?l:{default:()=>[l]})])])},methods:{handleBlur(e){this.$emit("blur",e)},handleFocus(e){this.$emit("focus",e)},focus(e){this.$nextTick(()=>{this.currentTab==="time"&&this._timePart&&this._timePart.focus(e);const t=this.calendarElement();this.currentTab==="date"&&t&&t.focus(e)})},calendarElement(){return this._calendar&&this._calendar.$el?this._calendar:null},normalizeRange(e,t){return B.isEqualDate(e,t||n.getToday())?e:null},hasActiveButton(){return this._acceptButton?r.canUseDOM&&(document.activeElement===this._acceptButton.$el||document.activeElement===this._cancelButton.$el):!1},mergeTime(e,t){return e&&t?n.setTime(t,e):t},mergeDate(e,t){return e?n.setTime(e||n.getToday(),t):t},move(e){if(e==="right"&&this.currentTab==="time"||e==="left"&&this.currentTab==="date")return;const t=e==="left"?"date":"time";this.shouldFocusPart=!0,this.currentTab=t},handleReject(e){this.dateValue=this.$props.value,this.timeValue=this.$props.value||p.MIDNIGHT_DATE;const t=this.mergeDate(this.$props.value,this.$props.value||p.MIDNIGHT_DATE),s={event:e,target:this,value:t};this.$emit("reject",s)},handleAccept(e,t){if(!this.dateValue||!this.timeValue||!this.hasDateValue)return;const s=this.mergeDate(this.dateValue,t||this.timeValue);this.$emit("change",{event:e,value:s,target:this})},handleNowClick(e){this.timeValue=f.getNow(),this.handleAccept(e,f.getNow())},handleCalendarValueChange(e){e.event.stopPropagation(),this.dateValue=e.value,this.currentTab="time",this.shouldFocusPart=!0},handleTimeListContainerChange(e){this.timeValue=e},handleDateClick(e){e.stopPropagation(),this.move("left")},handleTimeClick(e){e.stopPropagation(),this.move("right")},handleKeyDown(e){const{keyCode:t,altKey:s}=e;switch(this.$emit("keydown",e),t){case r.Keys.enter:!this.hasActiveButton()&&this.hasDateValue&&this.handleAccept(e);return;case r.Keys.left:if(!s)return;this.move("left");return;case r.Keys.right:if(!s)return;this.move("right");return;default:return}},handleTimePartMount(e){this.timeValue=e}}});exports.DateTimeSelector=M;