@progress/kendo-vue-dateinputs 3.5.0 → 3.5.1-dev.202208150613

package/dist/esm/datetimepicker/DateTimePicker.js

@@ -0,0 +1,673 @@
+// @ts-ignore
+import * as Vue from 'vue';
+var allVue = Vue;
+var gh = allVue.h;
+var isV3 = allVue.version && allVue.version[0] === '3';
+var ref = allVue.ref;
+var inject = allVue.inject;
+import { FloatingLabel } from '@progress/kendo-vue-labels';
+import { Button } from '@progress/kendo-vue-buttons';
+import { Popup } from '@progress/kendo-vue-popup';
+import { cloneDate } from '@progress/kendo-date-math';
+import { classNames, guid, Keys, templateRendering, getListeners, getTemplate, validatePackage, canUseDOM, kendoThemeMaps, getDefaultSlots } from '@progress/kendo-vue-common';
+import { DateInput } from '../dateinput/DateInput.js';
+import { packageMetadata } from '../package-metadata.js';
+import { MIN_DATE, MAX_DATE, isInDateRange, MAX_TIME } from '../utils.js';
+import { messages, toggleDateTimeSelector } from '../messages.js';
+import { provideLocalizationService } from '@progress/kendo-vue-intl';
+import { DateTimeSelector } from './DateTimeSelector.js';
+import { isInTimeRange } from '../timepicker/utils.js';
+import { MIN_TIME } from '../defaults.js';
+import { defaultFormatPlaceholder } from '../dateinput/utils.js';
+/**
+ * @hidden
+ */
+
+var DateTimePickerVue2 = {
+  name: 'KendoDateTimePicker',
+  // @ts-ignore
+  emits: {
+    'changemodel': null,
+    'update:modelValue': null,
+    'iconclick': null,
+    'change': null,
+    'focus': null,
+    'blur': null,
+    'keydown': null
+  },
+  props: {
+    modelValue: {
+      type: Date,
+      default: undefined
+    },
+    defaultShow: {
+      type: Boolean,
+      default: false
+    },
+    defaultValue: {
+      type: Date,
+      default: null
+    },
+    disabled: {
+      type: Boolean,
+      default: false
+    },
+    dateInput: {
+      type: [String, Object, Function],
+      default: function _default() {
+        return undefined;
+      }
+    },
+    popup: {
+      type: [String, Object, Function],
+      default: function _default() {
+        return undefined;
+      }
+    },
+    calendar: {
+      type: [String, Object, Function],
+      default: function _default() {
+        return undefined;
+      }
+    },
+    focusedDate: Date,
+    format: {
+      type: [String, Object],
+      default: function _default() {
+        return 'g';
+      }
+    },
+    formatPlaceholder: {
+      type: [String, Object],
+      default: function _default() {
+        return defaultFormatPlaceholder;
+      }
+    },
+    rounded: {
+      type: String,
+      default: 'medium',
+      validator: function validator(value) {
+        return ['small', 'medium', 'large', 'full'].includes(value);
+      }
+    },
+    fillMode: {
+      type: String,
+      default: 'solid',
+      validator: function validator(value) {
+        return ['solid', 'flat', 'outline'].includes(value);
+      }
+    },
+    size: {
+      type: String,
+      default: 'medium',
+      validator: function validator(value) {
+        return ['small', 'medium', 'large'].includes(value);
+      }
+    },
+    id: String,
+    ariaLabelledBy: String,
+    ariaDescribedBy: String,
+    min: {
+      type: Date,
+      default: function _default() {
+        return MIN_DATE;
+      }
+    },
+    max: {
+      type: Date,
+      default: function _default() {
+        return MAX_DATE;
+      }
+    },
+    maxTime: {
+      type: Date,
+      default: function _default() {
+        return cloneDate(MAX_TIME);
+      }
+    },
+    minTime: {
+      type: Date,
+      default: function _default() {
+        return cloneDate(MIN_TIME);
+      }
+    },
+    name: String,
+    label: String,
+    placeholder: String,
+    popupSettings: {
+      type: Object,
+      default: function _default() {
+        return {};
+      }
+    },
+    show: {
+      type: Boolean,
+      default: undefined
+    },
+    tabIndex: {
+      type: Number,
+      default: 0
+    },
+    title: {
+      type: String,
+      default: function _default() {
+        return '';
+      }
+    },
+    steps: {
+      type: Object,
+      default: function _default() {
+        return {};
+      }
+    },
+    value: Date,
+    weekNumber: {
+      type: Boolean,
+      default: false
+    },
+    width: String,
+    validationMessage: String,
+    required: {
+      type: Boolean,
+      default: false
+    },
+    validityStyles: {
+      type: Boolean,
+      default: true
+    },
+    validate: Boolean,
+    valid: {
+      type: Boolean,
+      default: undefined
+    },
+    cancelButton: {
+      type: Boolean,
+      default: true
+    }
+  },
+  model: {
+    event: 'changemodel'
+  },
+  created: function created() {
+    this._anchor = guid();
+    this._popupId = 'popup' + guid();
+    this._wrapper = null;
+    this._dateInput = null;
+    this._dateTimeSelector = null;
+    validatePackage(packageMetadata);
+    this.currentValue = this.$props.defaultValue;
+    this.currentShow = this.$props.defaultShow;
+  },
+  inject: {
+    kendoLocalizationService: {
+      default: null
+    }
+  },
+  data: function data() {
+    return {
+      currentValue: null,
+      currentShow: false,
+      valueDuringOnChange: undefined,
+      showDuringOnChange: undefined,
+      shouldFocusDateInput: false,
+      isFocused: false
+    };
+  },
+  computed: {
+    computedValue: function computedValue() {
+      var value = this.valueDuringOnChange !== undefined ? this.valueDuringOnChange : this.$props.value !== undefined ? this.$props.value : this.$props.modelValue !== undefined ? this.$props.modelValue : this.$data.currentValue;
+      return value !== null ? cloneDate(value) : null;
+    },
+    computedShow: function computedShow() {
+      return this.showDuringOnChange !== undefined ? this.showDuringOnChange : this.$props.show !== undefined ? this.$props.show : this.currentShow;
+    }
+  },
+  watch: {
+    show: function show(_newShow, oldShow) {
+      this._oldShow = oldShow;
+    },
+    currentShow: function currentShow(_newShow, oldShow) {
+      this._oldShow = oldShow;
+    }
+  },
+  mounted: function mounted() {
+    if (this.computedShow) {
+      // If defaultShow is true during the initial render, the popup is not aligned.
+      this.$forceUpdate();
+    }
+
+    var dateInputElement = this.dateInputElement();
+    this._dateTimeSelector = this.$refs.dateTimeSelector;
+    this._wrapper = this.v3 ? this.kendoAnchorRef : this.$refs[this._anchor];
+    this._dateInput = this.v3 ? this.dateInputRef : this.$refs.dateInput;
+
+    if (dateInputElement) {
+      dateInputElement.setAttribute('aria-haspopup', 'true');
+      dateInputElement.setAttribute('aria-expanded', "".concat(this.computedShow));
+    }
+  },
+  updated: function updated() {
+    var dateInputElement = this.dateInputElement();
+    this._dateTimeSelector = this.$refs.dateTimeSelector;
+    this._wrapper = this.v3 ? this.kendoAnchorRef : this.$refs[this._anchor];
+
+    if (dateInputElement) {
+      dateInputElement.setAttribute('aria-expanded', "".concat(this.computedShow));
+    }
+
+    if (this._dateTimeSelector && this.computedShow && !this._oldShow) {
+      this._dateTimeSelector.focus({
+        preventScroll: true
+      });
+    }
+
+    if (dateInputElement && !this.computedShow && this.shouldFocusDateInput) {
+      this._dateInput.focus({
+        preventScroll: true
+      });
+    }
+
+    this.shouldFocusDateInput = false;
+  },
+  // @ts-ignore
+  setup: !isV3 ? undefined : function () {
+    var v3 = !!isV3;
+    var kendoAnchorRef = ref(null);
+    var kendoLocalizationService = inject('kendoLocalizationService', {});
+    return {
+      v3: v3,
+      kendoAnchorRef: kendoAnchorRef,
+      kendoLocalizationService: kendoLocalizationService
+    };
+  },
+  // @ts-ignore
+  render: function render(createElement) {
+    var _a;
+
+    var _this = this;
+
+    var h = gh || createElement;
+    var defaultSlot = getDefaultSlots(this);
+    var _b = this.$props,
+        disabled = _b.disabled,
+        tabIndex = _b.tabIndex,
+        title = _b.title,
+        id = _b.id,
+        format = _b.format,
+        formatPlaceholder = _b.formatPlaceholder,
+        min = _b.min,
+        max = _b.max,
+        weekNumber = _b.weekNumber,
+        focusedDate = _b.focusedDate,
+        width = _b.width,
+        name = _b.name,
+        steps = _b.steps,
+        placeholder = _b.placeholder,
+        validationMessage = _b.validationMessage,
+        required = _b.required,
+        validityStyles = _b.validityStyles,
+        cancelButton = _b.cancelButton,
+        minTime = _b.minTime,
+        maxTime = _b.maxTime,
+        ariaLabelledBy = _b.ariaLabelledBy,
+        ariaDescribedBy = _b.ariaDescribedBy,
+        size = _b.size,
+        fillMode = _b.fillMode,
+        rounded = _b.rounded;
+    var _c = this.$props.popupSettings,
+        popupClass = _c.popupClass,
+        appendTo = _c.appendTo,
+        animate = _c.animate;
+    var isValid = !this.$props.validityStyles || this.validity().valid;
+    var dateInput = this.$props.dateInput ? templateRendering.call(this, this.$props.dateInput, getListeners.call(this)) : undefined;
+    var dateInputDefaultRendering = // @ts-ignore  function children
+    h(DateInput, {
+      ref: this.v3 ? function (el) {
+        _this.dateInputRef = el;
+      } : 'dateInput',
+      placeholder: placeholder,
+      attrs: this.v3 ? undefined : {
+        placeholder: placeholder,
+        disabled: disabled,
+        format: format,
+        formatPlaceholder: formatPlaceholder,
+        id: id,
+        ariaLabelledBy: ariaLabelledBy,
+        ariaDescribedBy: ariaDescribedBy,
+        max: max,
+        min: min,
+        minTime: minTime,
+        maxTime: maxTime,
+        name: name,
+        size: null,
+        rounded: null,
+        fillMode: null,
+        required: required,
+        steps: steps,
+        tabIndex: !this.computedShow ? tabIndex : -1,
+        title: title,
+        valid: this.validity().valid,
+        validationMessage: validationMessage,
+        validityStyles: validityStyles,
+        value: this.computedValue
+      },
+      disabled: disabled,
+      format: format,
+      formatPlaceholder: formatPlaceholder,
+      id: id,
+      ariaLabelledBy: ariaLabelledBy,
+      ariaDescribedBy: ariaDescribedBy,
+      max: max,
+      min: min,
+      minTime: minTime,
+      maxTime: maxTime,
+      name: name,
+      size: null,
+      rounded: null,
+      fillMode: null,
+      onChange: this.handleValueChange,
+      on: this.v3 ? undefined : {
+        "change": this.handleValueChange
+      },
+      required: required,
+      steps: steps,
+      tabIndex: !this.computedShow ? tabIndex : -1,
+      title: title,
+      valid: this.validity().valid,
+      validationMessage: validationMessage,
+      validityStyles: validityStyles,
+      value: this.computedValue
+    }, this.v3 ? function () {
+      return [defaultSlot];
+    } : [defaultSlot]);
+    var dateInputRendering = getTemplate.call(this, {
+      h: h,
+      template: dateInput,
+      defaultRendering: dateInputDefaultRendering
+    });
+    var calendar = this.$props.calendar ? templateRendering.call(this, this.$props.calendar, getListeners.call(this)) : undefined;
+    var dataTimeSelector = // @ts-ignore  function children
+    h(DateTimeSelector, {
+      ref: 'dateTimeSelector',
+      cancelButton: cancelButton,
+      attrs: this.v3 ? undefined : {
+        cancelButton: cancelButton,
+        value: this.computedValue,
+        disabled: disabled,
+        weekNumber: weekNumber,
+        min: this.$props.min,
+        max: this.$props.max,
+        minTime: minTime,
+        maxTime: maxTime,
+        focusedDate: focusedDate,
+        format: format,
+        calendar: calendar,
+        steps: steps
+      },
+      value: this.computedValue,
+      onChange: this.handleValueChange,
+      on: this.v3 ? undefined : {
+        "change": this.handleValueChange,
+        "reject": this.handleReject,
+        "focus": this.timeSelectorFocus,
+        "blur": this.timeSelectorBlur,
+        "keydown": this.handleKeyDown
+      },
+      onReject: this.handleReject,
+      disabled: disabled,
+      weekNumber: weekNumber,
+      min: this.$props.min,
+      max: this.$props.max,
+      minTime: minTime,
+      maxTime: maxTime,
+      focusedDate: focusedDate,
+      format: format,
+      calendar: calendar,
+      steps: steps,
+      onFocus: this.timeSelectorFocus,
+      onBlur: this.timeSelectorBlur,
+      onKeydown: this.handleKeyDown
+    });
+    var popupClassNames = classNames('k-datetime-container k-group k-reset', popupClass);
+    var popup = this.$props.popup ? templateRendering.call(this, this.$props.popup, getListeners.call(this)) : undefined;
+    var popupDefaultRendering = // @ts-ignore function children
+    h(Popup, {
+      show: this.computedShow,
+      attrs: this.v3 ? undefined : {
+        show: this.computedShow,
+        anchor: this._anchor,
+        id: this._popupId,
+        anchorAlign: {
+          horizontal: 'left',
+          vertical: 'bottom'
+        },
+        popupAlign: {
+          horizontal: 'left',
+          vertical: 'top'
+        },
+        appendTo: appendTo,
+        animate: animate
+      },
+      anchor: this._anchor,
+      "class": popupClassNames,
+      id: this._popupId,
+      anchorAlign: {
+        horizontal: 'left',
+        vertical: 'bottom'
+      },
+      popupAlign: {
+        horizontal: 'left',
+        vertical: 'top'
+      },
+      appendTo: appendTo,
+      animate: animate
+    }, this.v3 ? function () {
+      return [dataTimeSelector];
+    } : [dataTimeSelector]);
+    var popupRendering = getTemplate.call(this, {
+      h: h,
+      template: popup,
+      defaultRendering: popupDefaultRendering,
+      defaultSlots: dataTimeSelector
+    });
+    var dateTimePicker = h("div", {
+      "class": classNames('k-input', 'k-datetimepicker', (_a = {}, _a["k-input-".concat(kendoThemeMaps.sizeMap[size] || size)] = size, _a["k-input-".concat(fillMode)] = fillMode, _a["k-rounded-".concat(kendoThemeMaps.roundedMap[rounded] || rounded)] = rounded, _a['k-invalid'] = !isValid, _a['k-required'] = this.required, _a['k-disabled'] = this.$props.disabled, _a)),
+      ref: this.v3 ? function (el) {
+        _this.kendoAnchorRef = el;
+      } : this._anchor,
+      onKeydown: this.handleKeyDown,
+      on: this.v3 ? undefined : {
+        "keydown": this.handleKeyDown,
+        "focusin": this.handleFocus,
+        "focusout": this.handleBlur
+      },
+      style: {
+        width: width
+      },
+      onFocusin: this.handleFocus,
+      onFocusout: this.handleBlur
+    }, [dateInputRendering, // @ts-ignore
+    h(Button, {
+      type: "button",
+      attrs: this.v3 ? undefined : {
+        type: "button",
+        tabIndex: -1,
+        icon: 'calendar',
+        title: provideLocalizationService(this).toLanguageString(toggleDateTimeSelector, messages[toggleDateTimeSelector]),
+        rounded: null,
+        "aria-controls": this._popupId,
+        "aria-label": provideLocalizationService(this).toLanguageString(toggleDateTimeSelector, messages[toggleDateTimeSelector])
+      },
+      tabIndex: -1,
+      icon: 'calendar',
+      onMousedown: this.handleIconMouseDown,
+      on: this.v3 ? undefined : {
+        "mousedown": this.handleIconMouseDown,
+        "click": this.handleDateIconClick
+      },
+      onClick: this.handleDateIconClick,
+      title: provideLocalizationService(this).toLanguageString(toggleDateTimeSelector, messages[toggleDateTimeSelector]),
+      rounded: null,
+      "class": "k-input-button",
+      "aria-controls": this._popupId,
+      "aria-label": provideLocalizationService(this).toLanguageString(toggleDateTimeSelector, messages[toggleDateTimeSelector])
+    }), popupRendering]);
+    return this.$props.label ? // @ts-ignore function children
+    h(FloatingLabel, {
+      label: this.$props.label,
+      attrs: this.v3 ? undefined : {
+        label: this.$props.label,
+        editorId: id,
+        editorValid: isValid,
+        editorValue: this.getDateInputText(),
+        editorPlaceholder: this.$props.placeholder,
+        editorDisabled: this.$props.disabled
+      },
+      editorId: id,
+      editorValid: isValid,
+      editorValue: this.getDateInputText(),
+      editorPlaceholder: this.$props.placeholder,
+      editorDisabled: this.$props.disabled,
+      style: {
+        width: width
+      }
+    }, this.v3 ? function () {
+      return [dateTimePicker];
+    } : [dateTimePicker]) : dateTimePicker;
+  },
+  methods: {
+    validity: function validity() {
+      var inRange = isInDateRange(this.computedValue, this.$props.min, this.$props.max) && isInTimeRange(this.computedValue, this.$props.minTime || MIN_TIME, this.$props.maxTime || MAX_TIME);
+      var customError = this.$props.validationMessage !== undefined;
+      var isValid = (!this.$props.required || this.computedValue !== null) && inRange;
+      var valid = this.$props.valid !== undefined ? this.$props.valid : isValid;
+      return {
+        customError: customError,
+        rangeOverflow: this.computedValue && this.$props.max.getTime() < this.computedValue.getTime() || false,
+        rangeUnderflow: this.computedValue && this.computedValue.getTime() < this.$props.min.getTime() || false,
+        valid: valid,
+        valueMissing: this.computedValue === null
+      };
+    },
+    getDateInputText: function getDateInputText() {
+      return this.computedValue ? true : this._dateInput ? this._dateInput._element.value : '';
+    },
+    focus: function focus() {
+      var dateInputElement = this.dateInputElement();
+
+      if (dateInputElement) {
+        dateInputElement.focus();
+      }
+    },
+    setShow: function setShow(show) {
+      if (this.computedShow === show) {
+        return;
+      }
+
+      this.currentShow = show;
+    },
+    handleReject: function handleReject() {
+      this.setShow(false);
+    },
+    handleValueChange: function handleValueChange(event) {
+      this.currentValue = cloneDate(event.value || undefined);
+      this.currentShow = false;
+      this.valueDuringOnChange = event.value;
+      this.showDuringOnChange = false;
+      this.shouldFocusDateInput = true;
+      this.$emit('changemodel', this.computedValue);
+      this.$emit('update:modelValue', this.computedValue);
+      this.$emit('change', {
+        event: event.event,
+        value: this.computedValue,
+        show: this.computedShow,
+        component: this,
+        target: {
+          name: this.$props.name,
+          value: this.computedValue,
+          valueAsDate: this.computedValue
+        }
+      });
+      this.valueDuringOnChange = undefined;
+      this.showDuringOnChange = undefined;
+    },
+    handleFocus: function handleFocus(event) {
+      this.isFocused = true;
+      this.$emit('focus', event);
+    },
+    handleBlur: function handleBlur(event) {
+      this.createBlurTimeout();
+      this.$emit('blur', event);
+    },
+    timeSelectorBlur: function timeSelectorBlur(event) {
+      this.$emit('blur', event);
+      clearTimeout(this._blurTimeout);
+      this.createBlurTimeout();
+    },
+    timeSelectorFocus: function timeSelectorFocus() {
+      clearTimeout(this._blurTimeout);
+    },
+    createBlurTimeout: function createBlurTimeout() {
+      var _this = this;
+
+      var that = this;
+      this._blurTimeout = setTimeout(function () {
+        _this.isFocused = false;
+        var isInPopup = document.activeElement && document.activeElement.closest("#".concat(that._popupId));
+
+        var isElementActive = that._dateInput && canUseDOM && document.activeElement !== that._dateInput.element();
+
+        if (isElementActive && !isInPopup) {
+          that.setShow(false);
+        }
+      }, 200);
+    },
+    handleDateIconClick: function handleDateIconClick(event) {
+      if (this.$props.disabled) {
+        return;
+      }
+
+      this.shouldFocusDateInput = true;
+      this.setShow(!this.computedShow);
+      this.$emit('iconclick', event);
+    },
+    handleIconMouseDown: function handleIconMouseDown(event) {
+      event.preventDefault();
+    },
+    handleKeyDown: function handleKeyDown(event) {
+      var altKey = event.altKey,
+          keyCode = event.keyCode;
+
+      if (keyCode === Keys.tab && this._dateInput && event.target !== this._dateInput._element) {
+        event.preventDefault();
+        this.$data.shouldFocusDateInput = true;
+        this.setShow(false);
+        return;
+      }
+
+      if (keyCode === Keys.esc) {
+        this.shouldFocusDateInput = true;
+        this.setShow(false);
+        return;
+      }
+
+      if (altKey && (keyCode === Keys.up || keyCode === Keys.down)) {
+        event.preventDefault();
+        event.stopPropagation();
+        this.shouldFocusDateInput = keyCode === Keys.up;
+        this.setShow(keyCode === Keys.down);
+      }
+
+      this.$emit('keydown', event);
+    },
+    dateInputElement: function dateInputElement() {
+      return this._dateInput && this._dateInput.$el || this._wrapper && this._wrapper.querySelector('.k-dateinput-wrap > input.k-input');
+    }
+  }
+};
+/**
+ * @hidden
+ */
+
+var DateTimePicker = DateTimePickerVue2;
+export { DateTimePicker, DateTimePickerVue2 };