@progress/kendo-vue-dateinputs 8.4.0-develop.3 → 8.4.0-develop.5

package/datetimepicker/DateTimeSelector.mjs

@@ -5,18 +5,18 @@
  * Licensed under commercial license. See LICENSE.md in the package root for more information
  *-------------------------------------------------------------------------------------------
  */
-import { defineComponent as F, createVNode as a, h as x, ref as N, inject as j, isVNode as A } from "vue";
+import { defineComponent as F, createVNode as a, h as P, ref as N, inject as j, isVNode as A } from "vue";
 import { provideLocalizationService as E } from "@progress/kendo-vue-intl";
-import { date as p, messages as l, time as f, dateTimePickerCancel as g, dateTimePickerSet as T } from "../messages/main.mjs";
-import { ButtonGroup as L, Button as o } from "@progress/kendo-vue-buttons";
+import { date as c, messages as l, time as h, dateTimePickerCancel as m, dateTimePickerSet as d } from "../messages/main.mjs";
+import { SegmentedControl as L, Button as p } from "@progress/kendo-vue-buttons";
 import { Calendar as R } from "../calendar/components/Calendar.mjs";
 import { TimePart as z } from "../timepicker/TimePart.mjs";
-import { MAX_DATE as K, MIN_DATE as I, setTime as b, getToday as k, MAX_TIME as v, MIN_TIME as D } from "../utils.mjs";
+import { MAX_DATE as K, MIN_DATE as I, setTime as f, getToday as g, MAX_TIME as T, MIN_TIME as b } from "../utils.mjs";
 import { isEqualDate as O } from "@progress/kendo-date-math";
-import { Keys as d, canUseDOM as W, classNames as G, getTemplate as X, cloneDate as $ } from "@progress/kendo-vue-common";
-import { MIDNIGHT_DATE as m } from "../defaults.mjs";
-import { getNow as C } from "../timepicker/utils.mjs";
-function u(e) {
+import { Keys as o, canUseDOM as W, classNames as X, getTemplate as q, cloneDate as v } from "@progress/kendo-vue-common";
+import { MIDNIGHT_DATE as u } from "../defaults.mjs";
+import { getNow as k } from "../timepicker/utils.mjs";
+function D(e) {
   return typeof e == "function" || Object.prototype.toString.call(e) === "[object Object]" && !A(e);
 }
 const ne = /* @__PURE__ */ F({
@@ -42,13 +42,13 @@ const ne = /* @__PURE__ */ F({
     maxTime: {
       type: Date,
       default: function() {
-        return $(v);
+        return v(T);
       }
     },
     minTime: {
       type: Date,
       default: function() {
-        return $(D);
+        return v(b);
       }
     },
     weekNumber: {
@@ -71,7 +71,7 @@ const ne = /* @__PURE__ */ F({
     onKeydown: Function
   },
   created() {
-    this._calendarWrap = null, this.currentTab = "date", this.dateValue = this.$props.value, this.timeValue = this.$props.value || m;
+    this._calendarWrap = null, this.currentTab = "date", this.dateValue = this.$props.value, this.timeValue = this.$props.value || u;
   },
   inject: {
     kendoLocalizationService: {
@@ -118,87 +118,80 @@ const ne = /* @__PURE__ */ F({
       disabled: e,
       cancelButton: t,
       min: i,
-      max: V,
-      weekNumber: y,
-      focusedDate: B,
-      format: _,
-      steps: w
-    } = this.$props, M = G({
+      max: $,
+      weekNumber: V,
+      focusedDate: C,
+      format: y,
+      steps: B
+    } = this.$props, _ = X({
       "k-date-tab": this.currentTab === "date",
       "k-time-tab": this.currentTab === "time",
       "k-disabled": e
-    }, "k-datetime-wrap"), r = E(this), c = r.toLanguageString(p, l[p]), h = r.toLanguageString(f, l[f]), n = r.toLanguageString(g, l[g]), s = r.toLanguageString(T, l[T]), P = a(R, {
+    }, "k-datetime-wrap"), r = E(this), M = r.toLanguageString(c, l[c]), S = r.toLanguageString(h, l[h]), n = r.toLanguageString(m, l[m]), s = r.toLanguageString(d, l[d]), w = a(R, {
       ref: "calendar",
       min: i,
-      max: V,
-      weekNumber: y,
-      focusedDate: B,
+      max: $,
+      weekNumber: V,
+      focusedDate: C,
       disabled: e || this.currentTab !== "date",
       value: this.dateValue,
       onChange: this.handleCalendarValueChange,
       onFocus: this.handleFocus,
       onBlur: this.handleBlur
-    }, null), S = X.call(this, {
-      h: x,
+    }, null), x = q.call(this, {
+      h: P,
       template: this.$props.calendar,
-      defaultRendering: P
+      defaultRendering: w
     });
     return a("div", {
       onKeydown: this.handleKeyDown,
-      class: M,
+      class: _,
       tabindex: -1
     }, [a("div", {
       class: "k-datetime-buttongroup"
     }, [a(L, {
-      width: "100%"
-    }, {
-      default: () => [a(o, {
-        type: "button",
-        selected: this.currentTab === "date",
-        togglable: !0,
-        onClick: this.handleDateClick
-      }, u(c) ? c : {
-        default: () => [c]
-      }), a(o, {
-        type: "button",
-        selected: this.currentTab === "time",
-        togglable: !0,
-        onClick: this.handleTimeClick
-      }, u(h) ? h : {
-        default: () => [h]
-      })]
-    })]), a("div", {
+      layoutMode: "stretch",
+      value: this.currentTab,
+      items: [{
+        value: "date",
+        text: M
+      }, {
+        value: "time",
+        text: S
+      }],
+      onChange: this.handleTabChange
+    }, null)]), a("div", {
       class: "k-datetime-selector"
     }, [a("div", {
       class: "k-datetime-calendar-wrap",
       ref: "calendarWrap"
-    }, [S]), a("div", {
+    }, [x]), a("div", {
       class: "k-datetime-time-wrap"
     }, [a(z, {
       key: 1,
       onNowclick: this.handleNowClick,
       disabled: e || this.currentTab !== "time",
       ref: "timePart",
-      min: this.computedMinTime || D,
-      max: this.computedMaxTime || v,
+      min: this.computedMinTime || b,
+      max: this.computedMaxTime || T,
       value: this.timeValue,
-      format: _,
-      steps: w,
+      format: y,
+      steps: B,
       onChange: this.handleTimeListContainerChange,
       onFocus: this.handleFocus,
       onBlur: this.handleBlur
     }, null)])]), a("div", {
       class: "k-datetime-footer k-actions k-actions-stretched"
-    }, [t && a(o, {
+    }, [t && a(p, {
       type: "button",
       ref: "cancelButton",
       class: "k-time-cancel",
       onClick: this.handleReject,
       title: n,
       "aria-label": n
-    }, u(n) ? n : {
+    }, D(n) ? n : {
       default: () => [n]
-    }), a(o, {
+    }), a(p, {
       type: "button",
       ref: "acceptButton",
       disabled: !this.hasDateValue,
@@ -207,7 +200,7 @@ const ne = /* @__PURE__ */ F({
       onClick: this.handleAccept,
       title: s,
       "aria-label": s
-    }, u(s) ? s : {
+    }, D(s) ? s : {
       default: () => [s]
     })])]);
   },
@@ -229,16 +222,16 @@ const ne = /* @__PURE__ */ F({
       return this._calendar && this._calendar.$el ? this._calendar : null;
     },
     normalizeRange(e, t) {
-      return O(e, t || k()) ? e : null;
+      return O(e, t || g()) ? e : null;
     },
     hasActiveButton() {
       return this._acceptButton ? W && (document.activeElement === this._acceptButton.$el || document.activeElement === this._cancelButton.$el) : !1;
     },
     mergeTime(e, t) {
-      return e && t ? b(t, e) : t;
+      return e && t ? f(t, e) : t;
     },
     mergeDate(e, t) {
-      return e ? b(e || k(), t) : t;
+      return e ? f(e || g(), t) : t;
     },
     move(e) {
       if (e === "right" && this.currentTab === "time" || e === "left" && this.currentTab === "date")
@@ -247,8 +240,8 @@ const ne = /* @__PURE__ */ F({
       this.shouldFocusPart = !0, this.currentTab = t;
     },
     handleReject(e) {
-      this.dateValue = this.$props.value, this.timeValue = this.$props.value || m;
-      const t = this.mergeDate(this.$props.value, this.$props.value || m), i = {
+      this.dateValue = this.$props.value, this.timeValue = this.$props.value || u;
+      const t = this.mergeDate(this.$props.value, this.$props.value || u), i = {
         event: e,
         target: this,
         value: t
@@ -266,7 +259,7 @@ const ne = /* @__PURE__ */ F({
       });
     },
     handleNowClick(e) {
-      this.timeValue = C(), this.handleAccept(e, C());
+      this.timeValue = k(), this.handleAccept(e, k());
     },
     handleCalendarValueChange(e) {
       e.event.stopPropagation(), this.dateValue = e.value, this.currentTab = "time", this.shouldFocusPart = !0;
@@ -274,11 +267,8 @@ const ne = /* @__PURE__ */ F({
     handleTimeListContainerChange(e) {
       this.timeValue = e;
     },
-    handleDateClick(e) {
-      e.stopPropagation(), this.move("left");
-    },
-    handleTimeClick(e) {
-      e.stopPropagation(), this.move("right");
+    handleTabChange(e) {
+      e === "date" ? this.move("left") : e === "time" && this.move("right");
     },
     handleKeyDown(e) {
       const {
@@ -286,15 +276,15 @@ const ne = /* @__PURE__ */ F({
         altKey: i
       } = e;
       switch (this.$emit("keydown", e), t) {
-        case d.enter:
+        case o.enter:
           !this.hasActiveButton() && this.hasDateValue && this.handleAccept(e);
           return;
-        case d.left:
+        case o.left:
           if (!i)
             return;
           this.move("left");
           return;
-        case d.right:
+        case o.right:
           if (!i)
             return;
           this.move("right");