@progress/kendo-vue-dateinputs/datetimepicker/DateTimeSelector.mjs

TODO

/**
 * @license
 *-------------------------------------------------------------------------------------------
 * Copyright © 2025 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 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 { 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]" && !A(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, Object],
    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: j,
      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
};