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

package/dist/esm/dateinput/DateInput.js

@@ -0,0 +1,706 @@
+// @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 { isEqual, cloneDate } from '@progress/kendo-date-math';
+import { provideIntlService, provideLocalizationService } from '@progress/kendo-vue-intl';
+import { KendoDate } from './models.js';
+import { guid, noop, validatePackage, canUseDOM, kendoThemeMaps, getDefaultSlots, setRef, getRef } from '@progress/kendo-vue-common';
+import { Button as KButton } from '@progress/kendo-vue-buttons';
+import { packageMetadata } from '../package-metadata.js';
+import { approximateStringMatching, defaultFormat, defaultFormatPlaceholder, isInRange } from './utils.js';
+import { MAX_DATE, MIN_DATE } from './../utils.js';
+import { messages, increaseValue, decreaseValue } from './../messages.js';
+import { isInTimeRange } from '../timepicker/utils.js';
+import { MIN_TIME, MAX_TIME } from '../defaults.js';
+import { FloatingLabel } from '@progress/kendo-vue-labels';
+var VALIDATION_MESSAGE = 'Please enter a valid value!';
+/**
+ * @hidden
+ */
+
+var DateInputVue2 = {
+  name: 'DateInput',
+  model: {
+    event: 'changemodel'
+  },
+  inject: {
+    kendoIntlService: {
+      default: null
+    },
+    kendoLocalizationService: {
+      default: null
+    }
+  },
+  // @ts-ignore
+  emits: {
+    'change': null,
+    'changemodel': null,
+    'update:modelValue': null,
+    'focus': null,
+    'blur': null
+  },
+  props: {
+    modelValue: Date,
+    value: Date,
+    defaultValue: Date,
+    format: {
+      type: [String, Object],
+      default: function _default() {
+        return defaultFormat;
+      }
+    },
+    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);
+      }
+    },
+    tabIndex: Number,
+    title: String,
+    steps: Object,
+    placeholder: String,
+    max: {
+      type: Date,
+      default: function _default() {
+        return cloneDate(MAX_DATE);
+      }
+    },
+    min: {
+      type: Date,
+      default: function _default() {
+        return cloneDate(MIN_DATE);
+      }
+    },
+    maxTime: {
+      type: Date,
+      default: function _default() {
+        return cloneDate(MAX_TIME);
+      }
+    },
+    minTime: {
+      type: Date,
+      default: function _default() {
+        return cloneDate(MIN_TIME);
+      }
+    },
+    disabled: {
+      type: Boolean,
+      default: false
+    },
+    spinners: {
+      type: Boolean,
+      default: false
+    },
+    name: String,
+    dir: String,
+    label: String,
+    id: String,
+    validationMessage: {
+      type: String,
+      default: VALIDATION_MESSAGE
+    },
+    required: {
+      type: Boolean,
+      default: false
+    },
+    validityStyles: {
+      type: Boolean,
+      default: true
+    },
+    validate: Boolean,
+    valid: {
+      type: Boolean,
+      default: undefined
+    }
+  },
+  data: function data() {
+    return {
+      kendoDate: null,
+      currentFormat: undefined,
+      valueDuringOnChange: undefined,
+      hasMounted: false,
+      isEmpty: undefined,
+      lastSelectedSymbol: undefined,
+      isFocused: false
+    };
+  },
+  created: function created() {
+    validatePackage(packageMetadata);
+    var _a = this.$props,
+        formatPlaceholder = _a.formatPlaceholder,
+        format = _a.format,
+        value = _a.value,
+        defaultValue = _a.defaultValue;
+    this.kendoDate = new KendoDate(this.intl, formatPlaceholder, format);
+    this.kendoDate.setValue(null);
+    this._emptyText = this.kendoDate.getTextAndFormat().text;
+    this.kendoDate.setValue(value || defaultValue || null);
+    this._element = null;
+    this._inputId = guid();
+  },
+  computed: {
+    computedValue: {
+      get: function get() {
+        if (this.$data.valueDuringOnChange !== undefined) {
+          return this.$data.valueDuringOnChange;
+        }
+
+        return this.kendoDate && this.kendoDate.getDateObject();
+      }
+    },
+    wrapperClassNames: {
+      get: function get() {
+        var _a;
+
+        var isValid = !this.$data.hasMounted || !this.$props.validityStyles || this.validity().valid;
+        var disabled = this.$props.disabled;
+        var _b = this.$props,
+            size = _b.size,
+            fillMode = _b.fillMode,
+            rounded = _b.rounded;
+        return _a = {
+          'k-dateinput': true,
+          'k-input': true
+        }, _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-disabled'] = disabled, _a['k-invalid'] = !isValid && isValid !== undefined, _a['k-focus'] = this.isFocused, _a['k-rtl'] = this.$props.dir === 'rtl', _a;
+      }
+    }
+  },
+  methods: {
+    selection: function selection() {
+      var returnValue = {
+        start: 0,
+        end: 0
+      };
+      var element = this.element();
+
+      if (element !== null && element.selectionStart !== undefined) {
+        returnValue = {
+          start: element.selectionStart,
+          end: element.selectionEnd
+        };
+      }
+
+      return returnValue;
+    },
+    element: function element() {
+      return this._element;
+    },
+    focus: function focus(e) {
+      if (this._element) {
+        this._element.focus(e);
+      }
+    },
+    handleFocus: function handleFocus(e) {
+      this.$data.isFocused = true;
+      this.$emit('focus', e);
+    },
+    handleBlur: function handleBlur(e) {
+      this.$data.isFocused = false;
+      this.$emit('blur', e);
+    },
+    intl: function intl() {
+      return provideIntlService(this);
+    },
+    setValidity: function setValidity() {
+      var element = this.element();
+
+      if (element && element.setCustomValidity) {
+        element.setCustomValidity(this.validity().valid ? '' : this.$props.validationMessage);
+      }
+    },
+    spinnersMouseDown: function spinnersMouseDown(event) {
+      var element = this.element();
+      /* do not steal focus from input when changing value with spinners */
+
+      event.preventDefault();
+      /* manually focus the input in case the user clicks the spinners first */
+
+      if (element && canUseDOM && document.activeElement !== element) {
+        element.focus({
+          preventScroll: true
+        });
+      }
+    },
+    elementChange: function elementChange(event) {
+      var element = this.element();
+
+      if (!element || !this.kendoDate) {
+        return;
+      }
+
+      var _a = this.kendoDate.getTextAndFormat(),
+          text = _a.text,
+          currentFormat = _a.format;
+
+      this.$data.currentFormat = currentFormat;
+      var dateBeforeChange = this.computedValue;
+      var diff = approximateStringMatching(text, this.$data.currentFormat, element.value, this.selection().start);
+      var navigationOnly = diff.length === 1 && diff[0][1] === '_';
+
+      if (!navigationOnly) {
+        for (var i = 0; i < diff.length; i++) {
+          this.kendoDate.parsePart(diff[i][0], diff[i][1]);
+        }
+      }
+
+      if (diff.length && diff[0][0] !== '_') {
+        this.setSelection(this.selectionBySymbol(diff[0][0]));
+      }
+
+      if (navigationOnly) {
+        this.switchDateSegment(1);
+      }
+
+      this.triggerChange(event, dateBeforeChange);
+    },
+    elementClick: function elementClick(_) {
+      this.setSelection(this.selectionByIndex(this.selection().start));
+    },
+    wheel: function wheel(event) {
+      var element = this.element();
+
+      if (canUseDOM && document.activeElement !== element) {
+        return;
+      }
+
+      if (event.deltaY < 0) {
+        event.preventDefault();
+        this.increasePart(event);
+      }
+
+      if (event.deltaY > 0) {
+        event.preventDefault();
+        this.decreasePart(event);
+      }
+    },
+    increasePart: function increasePart(event) {
+      event.preventDefault();
+      this.modifyDateSegmentValue(1, event);
+    },
+    decreasePart: function decreasePart(event) {
+      event.preventDefault();
+      this.modifyDateSegmentValue(-1, event);
+    },
+    elementKeyDown: function elementKeyDown(event) {
+      if (event.altKey) {
+        return;
+      }
+
+      switch (event.keyCode) {
+        case 37:
+          /*
+          * Key: `Left Arrow`
+          * Action: Switches to previous logical* segment.
+          * (*) https://www.w3.org/International/articles/inline-bidi-markup/uba-basics
+          */
+          this.switchDateSegment(-1);
+          break;
+
+        case 38:
+          /*
+          * Key: `Up Arrow`
+          * Action: Increases the currently selected segment value.
+          */
+          this.modifyDateSegmentValue(1, event);
+          break;
+
+        case 39:
+          /*
+          * Key: `Right Arrow`
+          * Action: Switches to the next logical segment.
+          */
+          this.switchDateSegment(1);
+          break;
+
+        case 40:
+          /*
+          * Key: `Down Arrow`
+          * Action: Decreases the currently selected segment value.
+          */
+          this.modifyDateSegmentValue(-1, event);
+          break;
+
+        default:
+          /*
+          * Key: any
+          * Action: Does not prevent the default behavior.
+          */
+          return;
+      }
+
+      event.preventDefault();
+    },
+    setSelection: function setSelection(selection) {
+      var element = this.element();
+      this.$data.lastSelectedSymbol = this.$data.currentFormat[selection.start];
+      window.requestAnimationFrame(function () {
+        if (element && canUseDOM && document.activeElement === element) {
+          element.setSelectionRange(selection.start, selection.end);
+        }
+      });
+    },
+    triggerChange: function triggerChange(event, oldValue) {
+      this.$data.valueDuringOnChange = this.computedValue;
+
+      if (!isEqual(oldValue, this.computedValue)) {
+        this.$emit('changemodel', this.computedValue);
+        this.$emit('update:modelValue', this.computedValue); // isEqual works with null
+
+        this.$emit('change', {
+          event: event,
+          value: this.computedValue,
+          component: this,
+          target: {
+            name: this.$props.name,
+            value: this.$data.valueDuringOnChange,
+            valueAsDate: this.$data.valueDuringOnChange
+          },
+          validity: this.validity()
+        });
+      }
+
+      this.$data.valueDuringOnChange = undefined;
+    },
+    selectionBySymbol: function selectionBySymbol(symbol) {
+      var start = -1;
+      var end = 0;
+
+      for (var i = 0; i < this.$data.currentFormat.length; i++) {
+        if (this.$data.currentFormat[i] === symbol) {
+          end = i + 1;
+
+          if (start === -1) {
+            start = i;
+          }
+        }
+      }
+
+      if (start < 0) {
+        start = 0;
+      }
+
+      return {
+        start: start,
+        end: end
+      };
+    },
+    selectionByIndex: function selectionByIndex(index) {
+      var selection = {
+        start: index,
+        end: index
+      };
+
+      for (var i = index, j = index - 1; i < this.$data.currentFormat.length || j >= 0; i++, j--) {
+        if (i < this.$data.currentFormat.length && this.$data.currentFormat[i] !== '_') {
+          selection = this.selectionBySymbol(this.$data.currentFormat[i]);
+          break;
+        }
+
+        if (j >= 0 && this.$data.currentFormat[j] !== '_') {
+          selection = this.selectionBySymbol(this.$data.currentFormat[j]);
+          break;
+        }
+      }
+
+      return selection;
+    },
+    switchDateSegment: function switchDateSegment(offset) {
+      var _a = this.selection(),
+          selectionStart = _a.start,
+          selectionEnd = _a.end;
+
+      if (selectionStart < selectionEnd && this.$data.currentFormat[selectionStart] !== this.$data.currentFormat[selectionEnd - 1]) {
+        this.setSelection(this.selectionByIndex(offset > 0 ? selectionStart : selectionEnd - 1));
+        return;
+      }
+
+      var previousFormatSymbol = this.$data.currentFormat[selectionStart];
+      var a = selectionStart + offset;
+
+      while (a > 0 && a < this.$data.currentFormat.length) {
+        if (this.$data.currentFormat[a] !== previousFormatSymbol && this.$data.currentFormat[a] !== '_') {
+          break;
+        }
+
+        a += offset;
+      }
+
+      if (this.$data.currentFormat[a] === '_') {
+        // no known symbol is found
+        return;
+      }
+
+      var b = a;
+
+      while (b >= 0 && b < this.$data.currentFormat.length) {
+        if (this.$data.currentFormat[b] !== this.$data.currentFormat[a]) {
+          break;
+        }
+
+        b += offset;
+      }
+
+      if (a > b && (b + 1 !== selectionStart || a + 1 !== selectionEnd)) {
+        this.setSelection({
+          start: b + 1,
+          end: a + 1
+        });
+      } else if (a < b && (a !== selectionStart || b !== selectionEnd)) {
+        this.setSelection({
+          start: a,
+          end: b
+        });
+      }
+    },
+    modifyDateSegmentValue: function modifyDateSegmentValue(offset, event) {
+      if (!this.kendoDate) {
+        return;
+      }
+
+      var oldValue = this.computedValue;
+      var symbol = this.$data.currentFormat[this.selection().start];
+      var currentStepSymbol = this.kendoDate.symbolMap(symbol);
+      var step = ((this.$props.steps || {})[currentStepSymbol] || 1) * offset;
+      this.kendoDate.modifyPart(symbol, step);
+      this.setSelection(this.selectionBySymbol(symbol));
+      this.triggerChange(event, oldValue);
+    },
+    validity: function validity() {
+      var inRange = isInRange(this.computedValue, this.$props.min, this.$props.max) && isInTimeRange(this.computedValue, this.$props.minTime, this.$props.maxTime);
+      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
+      };
+    }
+  },
+  mounted: function mounted() {
+    this._element = getRef(this, 'input');
+    this.setValidity();
+    this.$data.hasMounted = true;
+  },
+  updated: function updated() {
+    if (this.$data.lastSelectedSymbol) {
+      this.setSelection(this.selectionBySymbol(this.$data.lastSelectedSymbol));
+    }
+
+    this.setValidity();
+  },
+  // @ts-ignore
+  setup: !isV3 ? undefined : function () {
+    var v3 = !!isV3;
+    var inputRef = ref(null);
+    var kendoIntlService = inject('kendoIntlService', {});
+    var kendoLocalizationService = inject('kendoLocalizationService', {});
+    return {
+      v3: v3,
+      inputRef: inputRef,
+      kendoIntlService: kendoIntlService,
+      kendoLocalizationService: kendoLocalizationService
+    };
+  },
+  // @ts-ignore
+  render: function render(createElement) {
+    var h = gh || createElement;
+    var defaultSlot = getDefaultSlots(this);
+    var localizationService = provideLocalizationService(this);
+    var _a = this.$props,
+        formatPlaceholder = _a.formatPlaceholder,
+        format = _a.format,
+        value = _a.value,
+        modelValue = _a.modelValue,
+        min = _a.min,
+        max = _a.max,
+        name = _a.name,
+        label = _a.label,
+        id = _a.id,
+        defaultValue = _a.defaultValue;
+    this.kendoDate.format = format;
+    this.kendoDate.formatPlaceholder = formatPlaceholder;
+    var currentValue = value !== undefined ? value : modelValue;
+
+    if (currentValue !== undefined && this.computedValue !== currentValue) {
+      this.kendoDate.setValue(currentValue);
+    }
+
+    var _b = this.kendoDate.getTextAndFormat(),
+        currentText = _b.text,
+        currentFormat = _b.format;
+
+    this.$data.currentFormat = currentFormat;
+    this.$data.isEmpty = currentText === this._emptyText;
+    var showPlaceHolder = this.$props.placeholder !== undefined && this.$data.isEmpty && !this.$data.isFocused;
+    var textToDisplay = !showPlaceHolder ? currentText : null;
+    var inputId = id || this._inputId;
+    var isValid = !this.$props.validityStyles || this.validity().valid;
+    var dateinput = h("span", {
+      "class": this.wrapperClassNames,
+      dir: this.$props.dir,
+      attrs: this.v3 ? undefined : {
+        dir: this.$props.dir
+      }
+    }, [h("input", {
+      role: "spinbutton",
+      attrs: this.v3 ? undefined : {
+        role: "spinbutton",
+        tabindex: this.$props.tabIndex,
+        disabled: this.$props.disabled,
+        title: this.$props.title !== undefined ? this.$props.title : currentText,
+        type: "text",
+        spellcheck: false,
+        autocomplete: "off",
+        autocorrect: "off",
+        id: inputId,
+        placeholder: this.$props.placeholder,
+        name: name,
+        "aria-valuenow": this.computedValue !== null ? this.computedValue.getTime() : undefined,
+        "aria-valuemin": min === null ? undefined : min.getTime(),
+        "aria-valuemax": max === null ? undefined : max.getTime(),
+        "aria-valuetext": currentText
+      },
+      tabindex: this.$props.tabIndex,
+      disabled: this.$props.disabled,
+      title: this.$props.title !== undefined ? this.$props.title : currentText,
+      type: "text",
+      spellcheck: false,
+      autocomplete: "off",
+      autocorrect: "off",
+      "class": "k-input-inner",
+      id: inputId,
+      placeholder: this.$props.placeholder,
+      onWheel: this.wheel,
+      on: this.v3 ? undefined : {
+        "wheel": this.wheel,
+        "click": this.elementClick,
+        "input": this.elementChange,
+        "keydown": this.elementKeyDown,
+        "change": noop,
+        "focusin": this.handleFocus,
+        "focusout": this.handleBlur
+      },
+      onClick: this.elementClick,
+      onInput: this.elementChange,
+      onKeydown: this.elementKeyDown,
+      onChange: noop,
+      onFocusin: this.handleFocus,
+      onFocusout: this.handleBlur,
+      value: this.v3 ? textToDisplay : null,
+      domProps: this.v3 ? undefined : {
+        "value": textToDisplay
+      },
+      name: name,
+      "aria-valuenow": this.computedValue !== null ? this.computedValue.getTime() : undefined,
+      "aria-valuemin": min === null ? undefined : min.getTime(),
+      "aria-valuemax": max === null ? undefined : max.getTime(),
+      "aria-valuetext": currentText,
+      ref: setRef(this, 'input')
+    }), defaultSlot, this.$props.spinners && h("span", {
+      "class": "k-input-spinner k-spin-button",
+      onMousedown: this.spinnersMouseDown,
+      on: this.v3 ? undefined : {
+        "mousedown": this.spinnersMouseDown
+      }
+    }, [// @ts-ignore
+    h(KButton, {
+      type: "button",
+      attrs: this.v3 ? undefined : {
+        type: "button",
+        tabIndex: -1,
+        icon: 'arrow-n',
+        size: this.$props.size,
+        fillMode: this.$props.fillMode,
+        "aria-label": localizationService.toLanguageString(increaseValue, messages[increaseValue]),
+        title: localizationService.toLanguageString(increaseValue, messages[increaseValue])
+      },
+      tabIndex: -1,
+      icon: 'arrow-n',
+      size: this.$props.size,
+      fillMode: this.$props.fillMode,
+      "class": "k-spinner-increase",
+      "aria-label": localizationService.toLanguageString(increaseValue, messages[increaseValue]),
+      title: localizationService.toLanguageString(increaseValue, messages[increaseValue]),
+      onClick: this.increasePart,
+      on: this.v3 ? undefined : {
+        "click": this.increasePart
+      }
+    }), // @ts-ignore
+    h(KButton, {
+      type: "button",
+      attrs: this.v3 ? undefined : {
+        type: "button",
+        tabIndex: -1,
+        icon: 'arrow-s',
+        size: this.$props.size,
+        fillMode: this.$props.fillMode,
+        "aria-label": localizationService.toLanguageString(decreaseValue, messages[decreaseValue]),
+        title: localizationService.toLanguageString(decreaseValue, messages[decreaseValue])
+      },
+      tabIndex: -1,
+      "class": "k-spinner-decrease",
+      icon: 'arrow-s',
+      size: this.$props.size,
+      fillMode: this.$props.fillMode,
+      "aria-label": localizationService.toLanguageString(decreaseValue, messages[decreaseValue]),
+      title: localizationService.toLanguageString(decreaseValue, messages[decreaseValue]),
+      onClick: this.decreasePart,
+      on: this.v3 ? undefined : {
+        "click": this.decreasePart
+      }
+    })])]);
+    return label ? // @ts-ignore function children
+    h(FloatingLabel, {
+      label: label,
+      attrs: this.v3 ? undefined : {
+        label: label,
+        editorId: inputId,
+        editorValue: textToDisplay,
+        editorPlaceholder: this.$props.placeholder,
+        editorValid: isValid,
+        editorDisabled: this.$props.disabled
+      },
+      editorId: inputId,
+      editorValue: textToDisplay,
+      editorPlaceholder: this.$props.placeholder,
+      editorValid: isValid,
+      editorDisabled: this.$props.disabled
+    }, this.v3 ? function () {
+      return [dateinput];
+    } : [dateinput]) : dateinput;
+  }
+};
+/**
+ * @hidden
+ */
+
+var DateInput = DateInputVue2;
+export { DateInput, DateInputVue2 };

package/dist/esm/dateinput/interfaces/DateInputComputed.d.ts

@@ -0,0 +1,8 @@
+/**
+ * @hidden
+ */
+export interface DateInputComputed {
+    [key: string]: any;
+    computedValue: any;
+    wrapperClassNames: object;
+}

package/dist/esm/dateinput/interfaces/DateInputComputed.js

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