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

package/dist/esm/datepicker/DatePicker.js

@@ -0,0 +1,648 @@
+// @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 { Popup } from '@progress/kendo-vue-popup';
+import { getDate, cloneDate } from '@progress/kendo-date-math';
+import { classNames, guid, Keys, templateRendering, getListeners, getTemplate, validatePackage, canUseDOM, kendoThemeMaps, getDefaultSlots, setRef, getRef } from '@progress/kendo-vue-common';
+import { packageMetadata } from '../package-metadata.js';
+import { DateInput } from '../dateinput/DateInput.js';
+import { Calendar } from '../calendar/components/Calendar.js';
+import { MIN_DATE, MAX_DATE, setTime } from '../utils.js';
+import { isInDateRange } from '../utils.js';
+import { messages, toggleCalendar } from '../messages.js';
+import { provideLocalizationService } from '@progress/kendo-vue-intl';
+import { ToggleButton } from './ToggleButton.js';
+import { FloatingLabel } from '@progress/kendo-vue-labels';
+/**
+ * @hidden
+ */
+
+var DatePickerVue2 = {
+  name: 'DatePicker',
+  inject: {
+    kendoLocalizationService: {
+      default: null
+    }
+  },
+  model: {
+    event: 'changemodel'
+  },
+  // @ts-ignore
+  emits: {
+    'change': null,
+    'changemodel': null,
+    'update:modelValue': null,
+    'iconclick': null,
+    'focus': null,
+    'blur': null,
+    'keydown': null
+  },
+  props: {
+    defaultShow: {
+      type: Boolean,
+      default: false
+    },
+    modelValue: {
+      type: Date,
+      default: undefined
+    },
+    defaultValue: {
+      type: Date,
+      default: undefined
+    },
+    disabled: {
+      type: Boolean,
+      default: false
+    },
+    dateInput: {
+      type: [String, Object, Function],
+      default: function _default() {
+        return undefined;
+      }
+    },
+    calendar: {
+      type: [String, Object, Function],
+      default: function _default() {
+        return undefined;
+      }
+    },
+    toggleButton: {
+      type: [String, Object, Function],
+      default: function _default() {
+        return undefined;
+      }
+    },
+    label: String,
+    placeholder: String,
+    popup: {
+      type: [String, Object, Function],
+      default: function _default() {
+        return undefined;
+      }
+    },
+    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);
+      }
+    },
+    focusedDate: Date,
+    format: {
+      type: [Object, String],
+      default: function _default() {
+        return 'd';
+      }
+    },
+    formatPlaceholder: [Object, String],
+    id: String,
+    max: {
+      type: Date,
+      default: function _default() {
+        return cloneDate(MAX_DATE);
+      }
+    },
+    min: {
+      type: Date,
+      default: function _default() {
+        return cloneDate(MIN_DATE);
+      }
+    },
+    name: 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 '';
+      }
+    },
+    value: Date,
+    weekNumber: Boolean,
+    width: [Number, String],
+    validityStyles: {
+      type: Boolean,
+      default: true
+    },
+    validationMessage: String,
+    required: Boolean,
+    validate: Boolean,
+    valid: {
+      type: Boolean,
+      default: undefined
+    }
+  },
+  data: function data() {
+    return {
+      isFocused: false,
+      currentValue: undefined,
+      currentShow: undefined,
+      valueDuringOnChange: undefined,
+      showDuringOnChange: undefined,
+      shouldFocusDateInput: false
+    };
+  },
+  created: function created() {
+    validatePackage(packageMetadata);
+    this._popupId = guid();
+    this._anchor = guid();
+    this._dateInput = null;
+    this._calendar = null;
+    this.$data.currentValue = this.$props.defaultValue;
+    this.$data.currentShow = this.$props.defaultShow;
+  },
+  mounted: function mounted() {
+    this._dateInput = getRef(this, 'dateInput');
+
+    if (this.$refs.calendar || this.calendarRef) {
+      this._calendar = getRef(this, 'calendar');
+    }
+
+    if (this.computedShow) {
+      // If defaultShow is true during the initial render, the popup is not aligned.
+      this.$forceUpdate();
+    }
+
+    if (this._dateInput && this._dateInput.$el) {
+      this._dateInput.$el.setAttribute('aria-haspopup', 'true'); // this._dateInput.$el.setAttribute('aria-expanded', `${this.$data.currentShow}`);
+
+    }
+
+    if (this.$el) {
+      this.$el.setAttribute('aria-expanded', "".concat(this.computedShow));
+    }
+  },
+  updated: function updated() {
+    if (this.$el) {
+      this.$el.setAttribute('aria-expanded', "".concat(this.computedShow));
+    }
+
+    if (this.$refs.calendar || this.calendarRef) {
+      this._calendar = getRef(this, 'calendar');
+    }
+
+    if (this.computedShow) {
+      if (this._calendar && this._calendar.$el && !this._oldShow) {
+        this._calendar.focus({
+          preventScroll: true
+        });
+      }
+    } else {
+      if (this._dateInput && this._dateInput.$el && this.$data.shouldFocusDateInput) {
+        this._dateInput.focus({
+          preventScroll: true
+        });
+      }
+    }
+
+    this.$data.shouldFocusDateInput = false;
+  },
+  watch: {
+    show: function show(_newShow, oldShow) {
+      this._oldShow = oldShow;
+    },
+    currentShow: function currentShow(_newShow, oldShow) {
+      this._oldShow = oldShow;
+    }
+  },
+  computed: {
+    computedValue: {
+      get: function get() {
+        var value = this.$data.valueDuringOnChange !== undefined ? this.$data.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: {
+      get: function get() {
+        return this.$data.showDuringOnChange !== undefined ? this.$data.showDuringOnChange : this.$props.show !== undefined ? this.$props.show : this.$data.currentShow;
+      }
+    }
+  },
+  methods: {
+    focus: function focus() {
+      if (this._dateInput) {
+        this._dateInput.focus();
+      }
+    },
+    handleFocus: function handleFocus(event) {
+      this._oldShow = this.computedShow;
+      this.$data.isFocused = true;
+      this.$emit('focus', event);
+    },
+    handleBlur: function handleBlur(event) {
+      this.$data.isFocused = false;
+      this.createBlurTimeout();
+      this.$emit('blur', event);
+    },
+    calendarBlur: function calendarBlur() {
+      this.$emit('blur', event);
+      clearTimeout(this._blurTimeout);
+      this.createBlurTimeout();
+    },
+    calendarFocus: function calendarFocus() {
+      this.$emit('focus', event);
+      clearTimeout(this._blurTimeout);
+    },
+    createBlurTimeout: function createBlurTimeout() {
+      var _this = this;
+
+      this._blurTimeout = setTimeout(function () {
+        if (_this._dateInput && canUseDOM && document.activeElement !== _this._dateInput._element) {
+          _this.setShow(false);
+        }
+      }, 200);
+    },
+    validity: function validity() {
+      var value = this.computedValue;
+      var inRange = isInDateRange(value, this.$props.min, this.$props.max);
+      var customError = this.$props.validationMessage !== undefined;
+      var isValid = (!this.$props.required || value !== null) && inRange;
+      var valid = this.$props.valid !== undefined ? this.$props.valid : isValid;
+      return {
+        customError: customError,
+        rangeOverflow: value && this.$props.max.getTime() < value.getTime() || false,
+        rangeUnderflow: value && value.getTime() < this.$props.min.getTime() || false,
+        valid: valid,
+        valueMissing: value === null
+      };
+    },
+    nextValue: function nextValue(nextProps, nextState) {
+      return nextProps.value !== undefined ? nextProps.value : nextState.value;
+    },
+    nextShow: function nextShow(nextProps, nextState) {
+      return nextProps.show !== undefined ? nextProps.show : nextState.show;
+    },
+    setShow: function setShow(show) {
+      if (this.computedShow === show) {
+        return;
+      }
+
+      this.$data.currentShow = show;
+    },
+    mergeTime: function mergeTime(value) {
+      return this.computedValue && value ? setTime(value, this.computedValue) : value;
+    },
+    handleInputValueChange: function handleInputValueChange(event) {
+      this.handleValueChange(event.value, event);
+    },
+    handleCalendarValueChange: function handleCalendarValueChange(event) {
+      var value = this.mergeTime(event.value);
+      this.handleValueChange(value, event);
+    },
+    getDateInputText: function getDateInputText() {
+      return this.computedValue ? true : this._dateInput ? this._dateInput._element.value : '';
+    },
+    handleValueChange: function handleValueChange(value, event) {
+      this.$data.currentValue = cloneDate(value || undefined);
+      this.$data.currentShow = false;
+      this.$data.valueDuringOnChange = value;
+      this.$data.showDuringOnChange = false;
+      this.$data.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
+        },
+        validity: this.validity()
+      });
+      this.$data.valueDuringOnChange = undefined;
+      this.$data.showDuringOnChange = undefined;
+    },
+    handleIconClick: function handleIconClick(event) {
+      event.stopPropagation();
+      event.preventDefault();
+
+      if (this.$props.disabled) {
+        return;
+      }
+
+      this.$data.shouldFocusDateInput = true;
+      this.setShow(!this.computedShow);
+      this.$emit('iconclick', event);
+    },
+    handleIconMouseDown: function handleIconMouseDown(event) {
+      event.stopPropagation();
+      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.$data.shouldFocusDateInput = true;
+        this.setShow(false);
+        return;
+      }
+
+      if (altKey && (keyCode === Keys.up || keyCode === Keys.down)) {
+        event.preventDefault();
+        event.stopPropagation();
+        this.$data.shouldFocusDateInput = keyCode === Keys.up;
+        this.setShow(keyCode === Keys.down);
+      }
+
+      this.$emit('keydown', event);
+    }
+  },
+  // @ts-ignore
+  setup: !isV3 ? undefined : function () {
+    var v3 = !!isV3;
+    var listRef = ref(null);
+    var kendoAnchorRef = ref(null);
+    var kendoLocalizationService = inject('kendoLocalizationService', {});
+    return {
+      v3: v3,
+      listRef: listRef,
+      kendoAnchorRef: kendoAnchorRef,
+      kendoLocalizationService: kendoLocalizationService
+    };
+  },
+  // @ts-ignore
+  render: function render(createElement) {
+    var _a;
+
+    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,
+        validationMessage = _b.validationMessage,
+        required = _b.required,
+        validityStyles = _b.validityStyles,
+        size = _b.size,
+        fillMode = _b.fillMode,
+        rounded = _b.rounded;
+    var _c = this.$props.popupSettings,
+        popupClass = _c.popupClass,
+        animate = _c.animate,
+        appendTo = _c.appendTo;
+    var show = this.computedShow;
+    var value = this.computedValue;
+    var sanitizedValue = value && getDate(value);
+    var isValid = !this.$props.validityStyles || this.validity().valid;
+    var popupClassNames = classNames('k-calendar-container k-group k-reset', popupClass);
+    var toggleButton = this.$props.toggleButton ? templateRendering.call(this, this.$props.toggleButton, getListeners.call(this)) : undefined;
+    var toggleButtonDefaultRendering = // @ts-ignore
+    h(ToggleButton, {
+      type: "button",
+      attrs: this.v3 ? undefined : {
+        type: "button",
+        tabIndex: -1,
+        icon: "calendar",
+        title: provideLocalizationService(this).toLanguageString(toggleCalendar, messages[toggleCalendar]),
+        "aria-label": provideLocalizationService(this).toLanguageString(toggleCalendar, messages[toggleCalendar]),
+        rounded: null
+      },
+      tabIndex: -1,
+      icon: "calendar",
+      onMousedown: this.handleIconMouseDown,
+      on: this.v3 ? undefined : {
+        "mousedown": this.handleIconMouseDown,
+        "click": this.handleIconClick
+      },
+      onClick: this.handleIconClick,
+      title: provideLocalizationService(this).toLanguageString(toggleCalendar, messages[toggleCalendar]),
+      "aria-label": provideLocalizationService(this).toLanguageString(toggleCalendar, messages[toggleCalendar]),
+      rounded: null,
+      "class": "k-input-button"
+    });
+    var toggleButtonRendering = getTemplate.call(this, {
+      h: h,
+      template: toggleButton,
+      defaultRendering: toggleButtonDefaultRendering,
+      defaultSlots: h("span", {
+        "class": "k-icon k-i-calendar"
+      }),
+      additionalListeners: {
+        click: this.handleIconClick
+      }
+    });
+    var dateInput = this.$props.dateInput ? templateRendering.call(this, this.$props.dateInput, getListeners.call(this)) : undefined;
+    var dateInputDefaultRendering = // @ts-ignore
+    h(DateInput, {
+      ref: setRef(this, 'dateInput'),
+      placeholder: this.$props.placeholder,
+      attrs: this.v3 ? undefined : {
+        placeholder: this.$props.placeholder,
+        disabled: disabled,
+        format: format,
+        formatPlaceholder: formatPlaceholder,
+        id: id,
+        max: max,
+        min: min,
+        name: name,
+        size: null,
+        rounded: null,
+        fillMode: null,
+        required: required,
+        tabIndex: !show ? tabIndex : -1,
+        title: title,
+        valid: this.validity().valid,
+        validationMessage: validationMessage,
+        validityStyles: validityStyles,
+        value: value
+      },
+      disabled: disabled,
+      format: format,
+      formatPlaceholder: formatPlaceholder,
+      id: id,
+      max: max,
+      min: min,
+      name: name,
+      size: null,
+      rounded: null,
+      fillMode: null,
+      onChange: this.handleInputValueChange,
+      on: this.v3 ? undefined : {
+        "change": this.handleInputValueChange
+      },
+      required: required,
+      tabIndex: !show ? tabIndex : -1,
+      title: title,
+      valid: this.validity().valid,
+      validationMessage: validationMessage,
+      validityStyles: validityStyles,
+      value: value
+    });
+    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 calendarDefaultRendering = // @ts-ignore
+    h(Calendar, {
+      ref: setRef(this, 'calendar'),
+      onKeydown: this.handleKeyDown,
+      on: this.v3 ? undefined : {
+        "keydown": this.handleKeyDown,
+        "focus": this.calendarFocus,
+        "blur": this.calendarBlur,
+        "change": this.handleCalendarValueChange
+      },
+      onFocus: this.calendarFocus,
+      onBlur: this.calendarBlur,
+      disabled: disabled,
+      attrs: this.v3 ? undefined : {
+        disabled: disabled,
+        value: sanitizedValue,
+        min: min,
+        max: max,
+        weekNumber: weekNumber,
+        focusedDate: focusedDate
+      },
+      value: sanitizedValue,
+      min: min,
+      max: max,
+      weekNumber: weekNumber,
+      focusedDate: focusedDate,
+      onChange: this.handleCalendarValueChange
+    });
+    var calendarRendering = getTemplate.call(this, {
+      h: h,
+      template: calendar,
+      defaultRendering: calendarDefaultRendering
+    });
+    var popup = this.$props.popup ? templateRendering.call(this, this.$props.popup, getListeners.call(this)) : undefined;
+    var popupDefaultRendering = // @ts-ignore function children
+    h(Popup, {
+      show: show,
+      attrs: this.v3 ? undefined : {
+        show: show,
+        anchor: this._anchor,
+        id: this._popupId,
+        anchorAlign: {
+          horizontal: 'left',
+          vertical: 'bottom'
+        },
+        popupAlign: {
+          horizontal: 'left',
+          vertical: 'top'
+        },
+        animate: animate,
+        appendTo: appendTo
+      },
+      anchor: this._anchor,
+      "class": popupClassNames,
+      id: this._popupId,
+      anchorAlign: {
+        horizontal: 'left',
+        vertical: 'bottom'
+      },
+      popupAlign: {
+        horizontal: 'left',
+        vertical: 'top'
+      },
+      animate: animate,
+      appendTo: appendTo
+    }, this.v3 ? function () {
+      return [calendarRendering];
+    } : [calendarRendering]);
+    var popupRendering = getTemplate.call(this, {
+      h: h,
+      template: popup,
+      defaultRendering: popupDefaultRendering,
+      defaultSlots: calendarRendering
+    });
+    var datepicker = h("span", {
+      ref: setRef(this, 'kendoAnchor', this._anchor),
+      role: "group",
+      attrs: this.v3 ? undefined : {
+        role: "group",
+        "aria-expanded": this.computedShow
+      },
+      "aria-expanded": this.computedShow,
+      "class": classNames('k-input', 'k-datepicker', (_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['k-focus'] = this.$data.isFocused, _a)),
+      onKeydown: this.handleKeyDown,
+      on: this.v3 ? undefined : {
+        "keydown": this.handleKeyDown,
+        "focusin": this.handleFocus,
+        "focusout": this.handleBlur
+      },
+      onFocusin: this.handleFocus,
+      onFocusout: this.handleBlur
+    }, [dateInputRendering, toggleButtonRendering, 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 [datepicker];
+    } : [datepicker]) : datepicker;
+  }
+};
+/**
+ * @hidden
+ */
+
+var DatePicker = DatePickerVue2;
+export { DatePicker, DatePickerVue2 };

package/dist/esm/datepicker/ToggleButton.d.ts

@@ -0,0 +1,11 @@
+import { ButtonProps } from '@progress/kendo-vue-buttons';
+import { DefineComponent } from '../additionalTypes';
+/**
+ * @hidden
+ */
+declare let ToggleButtonVue2: DefineComponent<ButtonProps, any, import("@progress/kendo-vue-buttons/dist/npm/Button").ButtonData, import("@progress/kendo-vue-buttons/dist/npm/Button").ButtonComputed, import("@progress/kendo-vue-buttons/dist/npm/Button").ButtonMethods, {}, {}, {}, string, ButtonProps, ButtonProps, {}>;
+/**
+ * @hidden
+ */
+declare const ToggleButton: DefineComponent<ButtonProps, any, {}, {}, {}, {}, {}, {}, string, ButtonProps, ButtonProps, {}>;
+export { ToggleButton, ToggleButtonVue2 };

package/dist/esm/datepicker/ToggleButton.js

@@ -0,0 +1,12 @@
+import { Button } from '@progress/kendo-vue-buttons';
+/**
+ * @hidden
+ */
+
+var ToggleButtonVue2 = Button;
+/**
+ * @hidden
+ */
+
+var ToggleButton = ToggleButtonVue2;
+export { ToggleButton, ToggleButtonVue2 };

package/dist/esm/datepicker/interfaces/DatePickerComputed.d.ts

@@ -0,0 +1,8 @@
+/**
+ * @hidden
+ */
+export interface DatePickerComputed {
+    [key: string]: any;
+    computedValue: Date | null;
+    computedShow: boolean;
+}

package/dist/esm/datepicker/interfaces/DatePickerComputed.js

@@ -0,0 +1 @@
+export {};

package/dist/esm/datepicker/interfaces/DatePickerData.d.ts

@@ -0,0 +1,8 @@
+/**
+ * @hidden
+ */
+export interface DatePickerData {
+    currentValue: Date | null;
+    currentShow: boolean;
+    isFocused: boolean;
+}

package/dist/esm/datepicker/interfaces/DatePickerData.js

@@ -0,0 +1 @@
+export {};

package/dist/esm/datepicker/interfaces/DatePickerEventArguments.d.ts

@@ -0,0 +1,10 @@
+/**
+ * The arguments for the `change` event of the DatePicker.
+ */
+export interface DatePickerChangeEvent {
+    event: any;
+    value: Date | null;
+    show: boolean;
+    target: any;
+    component: any;
+}