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

package/dist/es/dateinput/DateInput.js

@@ -1,687 +0,0 @@
-// @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/main';
-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';
-import { approximateStringMatching, defaultFormat, defaultFormatPlaceholder, isInRange } from './utils';
-import { MAX_DATE, MIN_DATE } from './../utils';
-import { messages, increaseValue, decreaseValue } from '../messages/main';
-import { isInTimeRange } from '../timepicker/utils';
-import { MIN_TIME, MAX_TIME } from '../defaults';
-import { FloatingLabel } from '@progress/kendo-vue-labels';
-import { caretAltDownIcon, caretAltUpIcon } from '@progress/kendo-svg-icons';
-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
-    },
-    ariaRole: {
-      type: String,
-      default: 'textbox'
-    },
-    ariaControls: String,
-    ariaLabel: String,
-    ariaExpanded: {
-      type: Boolean,
-      default: undefined
-    },
-    ariaHasPopup: {
-      type: String,
-      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];
-      if (canUseDOM) {
-        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,
-      name = _a.name,
-      label = _a.label,
-      id = _a.id,
-      ariaLabel = _a.ariaLabel,
-      ariaExpanded = _a.ariaExpanded,
-      ariaHasPopup = _a.ariaHasPopup,
-      ariaRole = _a.ariaRole,
-      ariaControls = _a.ariaControls;
-    var currentValue = value !== undefined ? value : modelValue;
-    this.kendoDate.format = format;
-    this.kendoDate.formatPlaceholder = formatPlaceholder;
-    this.valueDuringOnChange = this.valueDuringOnChange ? this.valueDuringOnChange : undefined;
-    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: ariaRole,
-      attrs: this.v3 ? undefined : {
-        role: ariaRole,
-        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-label": ariaLabel,
-        "aria-expanded": ariaExpanded,
-        "aria-haspopup": ariaHasPopup,
-        "aria-controls": ariaControls,
-        "aria-disabled": this.$props.disabled
-      },
-      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-label": ariaLabel,
-      "aria-expanded": ariaExpanded,
-      "aria-haspopup": ariaHasPopup,
-      "aria-controls": ariaControls,
-      "aria-disabled": this.$props.disabled,
-      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: 'caret-alt-up',
-        svgIcon: caretAltUpIcon,
-        size: this.$props.size,
-        fillMode: this.$props.fillMode,
-        "aria-label": localizationService.toLanguageString(increaseValue, messages[increaseValue]),
-        title: localizationService.toLanguageString(increaseValue, messages[increaseValue])
-      },
-      tabIndex: -1,
-      icon: 'caret-alt-up',
-      svgIcon: caretAltUpIcon,
-      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: 'caret-alt-down',
-        svgIcon: caretAltDownIcon,
-        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: 'caret-alt-down',
-      svgIcon: caretAltDownIcon,
-      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/es/dateinput/interfaces/DateInputComputed.d.ts

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

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

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

package/dist/es/dateinput/interfaces/DateInputData.d.ts

@@ -1,11 +0,0 @@
-import { KendoDate } from '../models/main';
-/**
- * @hidden
- */
-export interface DateInputData {
-    kendoDate: KendoDate;
-    currentFormat: string;
-    valueDuringOnChange: Date | null | undefined;
-    lastSelectedSymbol: string;
-    isFocused: boolean;
-}

package/dist/es/dateinput/interfaces/DateInputData.js

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