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

package/datetimepicker/DateTimeSelector.mjs

@@ -0,0 +1,313 @@
+/**
+ * @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 F, ref as x, inject as N, createVNode as a, h as A, isVNode as j } 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 { Calendar as R } from "../calendar/components/Calendar.mjs";
+import { TimePart as z } from "../timepicker/TimePart.mjs";
+import { MIN_DATE as K, MAX_DATE as I, MAX_TIME as b, MIN_TIME as k, getToday as v, setTime as D } from "../utils.mjs";
+import { isEqualDate as O } from "@progress/kendo-date-math";
+import { cloneDate as $, classNames as W, getTemplate as G, canUseDOM as X, Keys as d } from "@progress/kendo-vue-common";
+import { MIDNIGHT_DATE as m } from "../defaults.mjs";
+import { getNow as C } from "../timepicker/utils.mjs";
+function u(e) {
+  return typeof e == "function" || Object.prototype.toString.call(e) === "[object Object]" && !j(e);
+}
+const ne = /* @__PURE__ */ F({
+  name: "KendoDateTimeSelector",
+  props: {
+    value: Date,
+    disabled: {
+      type: Boolean,
+      default: !1
+    },
+    cancelButton: {
+      type: Boolean,
+      default: !0
+    },
+    min: {
+      type: Date,
+      default: K
+    },
+    max: {
+      type: Date,
+      default: I
+    },
+    maxTime: {
+      type: Date,
+      default: function() {
+        return $(b);
+      }
+    },
+    minTime: {
+      type: Date,
+      default: function() {
+        return $(k);
+      }
+    },
+    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 || m;
+  },
+  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 = x(null), t = N("kendoLocalizationService", {});
+    return {
+      kendoAnchorRef: e,
+      kendoLocalizationService: t
+    };
+  },
+  render() {
+    const {
+      disabled: e,
+      cancelButton: t,
+      min: i,
+      max: V,
+      weekNumber: y,
+      focusedDate: B,
+      format: _,
+      steps: w
+    } = this.$props, M = W({
+      "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, {
+      ref: "calendar",
+      min: i,
+      max: V,
+      weekNumber: y,
+      focusedDate: B,
+      disabled: e || this.currentTab !== "date",
+      value: this.dateValue,
+      onChange: this.handleCalendarValueChange,
+      onFocus: this.handleFocus,
+      onBlur: this.handleBlur
+    }, null), S = G.call(this, {
+      h: A,
+      template: this.$props.calendar,
+      defaultRendering: P
+    });
+    return a("div", {
+      onKeydown: this.handleKeyDown,
+      class: M,
+      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", {
+      class: "k-datetime-selector"
+    }, [a("div", {
+      class: "k-datetime-calendar-wrap",
+      ref: "calendarWrap"
+    }, [S]), a("div", {
+      class: "k-datetime-time-wrap"
+    }, [a(z, {
+      key: 1,
+      onNowclick: this.handleNowClick,
+      disabled: e || this.currentTab !== "time",
+      ref: "timePart",
+      min: this.computedMinTime || k,
+      max: this.computedMaxTime || b,
+      value: this.timeValue,
+      format: _,
+      steps: w,
+      onChange: this.handleTimeListContainerChange,
+      onFocus: this.handleFocus,
+      onBlur: this.handleBlur
+    }, null)])]), a("div", {
+      class: "k-datetime-footer k-actions k-actions-stretched"
+    }, [t && a(o, {
+      type: "button",
+      ref: "cancelButton",
+      class: "k-time-cancel",
+      onClick: this.handleReject,
+      title: n,
+      "aria-label": n
+    }, u(n) ? n : {
+      default: () => [n]
+    }), a(o, {
+      type: "button",
+      ref: "acceptButton",
+      disabled: !this.hasDateValue,
+      themeColor: "primary",
+      class: "k-time-accept",
+      onClick: this.handleAccept,
+      title: s,
+      "aria-label": s
+    }, u(s) ? s : {
+      default: () => [s]
+    })])]);
+  },
+  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 O(e, t || v()) ? e : null;
+    },
+    hasActiveButton() {
+      return this._acceptButton ? X && (document.activeElement === this._acceptButton.$el || document.activeElement === this._cancelButton.$el) : !1;
+    },
+    mergeTime(e, t) {
+      return e && t ? D(t, e) : t;
+    },
+    mergeDate(e, t) {
+      return e ? D(e || v(), 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 || m;
+      const t = this.mergeDate(this.$props.value, this.$props.value || m), i = {
+        event: e,
+        target: this,
+        value: t
+      };
+      this.$emit("reject", i);
+    },
+    handleAccept(e, t) {
+      if (!this.dateValue || !this.timeValue || !this.hasDateValue)
+        return;
+      const i = this.mergeDate(this.dateValue, t || this.timeValue);
+      this.$emit("change", {
+        event: e,
+        value: i,
+        target: this
+      });
+    },
+    handleNowClick(e) {
+      this.timeValue = C(), this.handleAccept(e, C());
+    },
+    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: i
+      } = e;
+      switch (this.$emit("keydown", e), t) {
+        case d.enter:
+          !this.hasActiveButton() && this.hasDateValue && this.handleAccept(e);
+          return;
+        case d.left:
+          if (!i)
+            return;
+          this.move("left");
+          return;
+        case d.right:
+          if (!i)
+            return;
+          this.move("right");
+          return;
+        default:
+          return;
+      }
+    },
+    handleTimePartMount(e) {
+      this.timeValue = e;
+    }
+  }
+});
+export {
+  ne as DateTimeSelector
+};

package/defaults.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 e=new Date(1980,0,1),t=new Date(1900,0,1),M=new Date(2099,11,31),D=new Date(1980,0,1),T=new Date(1980,0,1,23,59,59);exports.MAX_DATE=M;exports.MAX_TIME=T;exports.MIDNIGHT_DATE=e;exports.MIN_DATE=t;exports.MIN_TIME=D;

package/defaults.mjs

@@ -0,0 +1,15 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2024 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+const e = new Date(1980, 0, 1), t = new Date(1900, 0, 1), n = new Date(2099, 11, 31), D = new Date(1980, 0, 1), M = new Date(1980, 0, 1, 23, 59, 59);
+export {
+  n as MAX_DATE,
+  M as MAX_TIME,
+  e as MIDNIGHT_DATE,
+  t as MIN_DATE,
+  D as MIN_TIME
+};