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

package/dist/esm/timepicker/TimePart.js

@@ -0,0 +1,365 @@
+// @ts-ignore
+import * as Vue from 'vue';
+var allVue = Vue;
+var gh = allVue.h;
+var isV3 = allVue.version && allVue.version[0] === '3';
+var inject = allVue.inject;
+import { Button } from '@progress/kendo-vue-buttons';
+import { cloneDate } from '@progress/kendo-date-math';
+import { canUseDOM, classNames, Keys } from '@progress/kendo-vue-common';
+import { provideIntlService, provideLocalizationService } from '@progress/kendo-vue-intl';
+import { messages, now, selectNow } from '../messages.js';
+import { TimeList } from './TimeList.js';
+import { MIDNIGHT_DATE, MIN_TIME, MAX_TIME } from '../utils.js';
+import { TIME_PART } from './models/TimePart.js';
+import { generateSnappers, getNow, isInTimeRange, snapTime, timeInRange } from './utils.js';
+var formatRegExp = new RegExp("".concat(TIME_PART.hour, "|").concat(TIME_PART.minute, "|").concat(TIME_PART.second, "|").concat(TIME_PART.dayperiod, "|literal"));
+/**
+ * @hidden
+ */
+
+export var Direction;
+
+(function (Direction) {
+  Direction[Direction["Left"] = 0] = "Left";
+  Direction[Direction["Right"] = 1] = "Right";
+})(Direction || (Direction = {}));
+/**
+ * @hidden
+ */
+
+
+var TimePartVue2 = {
+  name: 'KendoTimePart',
+  props: {
+    cancelButton: {
+      type: Boolean,
+      default: true
+    },
+    disabled: {
+      type: Boolean,
+      default: false
+    },
+    format: {
+      type: String,
+      default: function _default() {
+        return 'hh:mm a';
+      }
+    },
+    max: {
+      type: Date,
+      default: function _default() {
+        return MAX_TIME;
+      }
+    },
+    min: {
+      type: Date,
+      default: function _default() {
+        return MIN_TIME;
+      }
+    },
+    nowButton: {
+      type: Boolean,
+      default: true
+    },
+    steps: {
+      type: Object,
+      default: function _default() {
+        return {};
+      }
+    },
+    smoothScroll: {
+      type: Boolean,
+      default: true
+    },
+    tabIndex: Number,
+    value: {
+      type: Date,
+      default: function _default() {
+        return null;
+      }
+    }
+  },
+  // @ts-ignore
+  emits: {
+    'change': null,
+    'focus': null,
+    'blur': null,
+    'nowclick': null
+  },
+  created: function created() {
+    this.timeLists = [];
+    this.snapTime = snapTime(generateSnappers(this.$props.steps, this.$props.min));
+    this.activeListIndex = -1;
+    this.hasActiveButton = this.hasActiveButton.bind(this);
+  },
+  inject: {
+    kendoIntlService: {
+      default: null
+    },
+    kendoLocalizationService: {
+      default: null
+    }
+  },
+  data: function data() {
+    return {
+      activeListIndex: null
+    };
+  },
+  computed: {
+    element: function element() {
+      return this._element;
+    },
+    computedValue: function computedValue() {
+      return timeInRange(this.snapTime(cloneDate(this.$props.value || MIDNIGHT_DATE)), this.computedMin, this.computedMax);
+    },
+    intl: function intl() {
+      return provideIntlService(this);
+    },
+    computedMin: function computedMin() {
+      return this.snapTime(this.$props.min);
+    },
+    computedMax: function computedMax() {
+      return this.snapTime(this.$props.max);
+    }
+  },
+  mounted: function mounted() {
+    var _this = this;
+
+    this._nowButton = this.$refs.nowButton;
+    this.dateFormatParts.forEach(function (item, idx) {
+      if (item.type !== 'literal') {
+        _this.timeLists.push(_this.$refs['timeList' + idx]);
+      }
+    });
+  },
+  // @ts-ignore
+  setup: !isV3 ? undefined : function () {
+    var v3 = !!isV3;
+    var kendoIntlService = inject('kendoIntlService', {});
+    var kendoLocalizationService = inject('kendoLocalizationService', {});
+    return {
+      v3: v3,
+      kendoIntlService: kendoIntlService,
+      kendoLocalizationService: kendoLocalizationService
+    };
+  },
+  // @ts-ignore
+  render: function render(createElement) {
+    var h = gh || createElement;
+    var _a = this.$props,
+        format = _a.format,
+        smoothScroll = _a.smoothScroll,
+        disabled = _a.disabled;
+    this.snapTime = snapTime(generateSnappers(this.$props.steps, this.computedMin));
+    this.dateFormatParts = this.intl.splitDateFormat(format).filter(this.timeFormatFilter);
+    var rootClassName = classNames({
+      'k-disabled': disabled
+    }, 'k-time-part');
+    var localizationService = provideLocalizationService(this);
+    var selectNowMessage = localizationService.toLanguageString(selectNow, messages[selectNow]);
+    return h("div", {
+      "class": rootClassName
+    }, [h("div", {
+      "class": "k-time-header"
+    }, [h("span", {
+      "class": "k-title"
+    }, [this.intl.formatDate(this.computedValue, this.dateFormatParts.reduce(this.timeFormatReducer, ''))]), this.showNowButton() && // @ts-ignore  function children
+    h(Button, {
+      type: "button",
+      attrs: this.v3 ? undefined : {
+        type: "button",
+        fillMode: 'flat',
+        title: selectNowMessage,
+        "aria-label": selectNowMessage,
+        tabIndex: disabled ? -1 : 0
+      },
+      ref: 'nowButton',
+      fillMode: 'flat',
+      "class": "k-time-now",
+      title: selectNowMessage,
+      "aria-label": selectNowMessage,
+      onClick: this.onNowClick,
+      on: this.v3 ? undefined : {
+        "click": this.onNowClick
+      },
+      tabIndex: disabled ? -1 : 0
+    }, this.v3 ? function () {
+      return [localizationService.toLanguageString(now, messages[now])];
+    } : [localizationService.toLanguageString(now, messages[now])])]), h("div", {
+      "class": "k-time-list-container",
+      onKeydown: this.handleKeyDown,
+      on: this.v3 ? undefined : {
+        "keydown": this.handleKeyDown
+      }
+    }, [h("span", {
+      "class": "k-time-highlight"
+    }), this.dateFormatParts.map(function (part, idx) {
+      var _this = this;
+
+      return part.type !== 'literal' ? h("div", {
+        key: idx,
+        "class": classNames('k-time-list-wrapper', {
+          'k-focus': idx === this.activeListIndex
+        }),
+        role: "presentation",
+        attrs: this.v3 ? undefined : {
+          role: "presentation",
+          tabindex: -1
+        },
+        tabindex: -1
+      }, [h("span", {
+        "class": "k-title",
+        onMousedown: function onMousedown(e) {
+          e.preventDefault();
+        },
+        on: this.v3 ? undefined : {
+          "mousedown": function onMousedown(e) {
+            e.preventDefault();
+          }
+        }
+      }, [this.intl.dateFieldName(part)]), // @ts-ignore  function children
+      h(TimeList, {
+        min: this.computedMin,
+        attrs: this.v3 ? undefined : {
+          min: this.computedMin,
+          max: this.computedMax,
+          boundRange: this.$props.boundRange,
+          part: part,
+          step: part.type ? this.$props.steps[part.type] : 1,
+          smoothScroll: smoothScroll,
+          id: idx,
+          value: this.computedValue,
+          disabled: disabled
+        },
+        max: this.computedMax,
+        boundRange: this.$props.boundRange,
+        part: part,
+        step: part.type ? this.$props.steps[part.type] : 1,
+        smoothScroll: smoothScroll,
+        ref: 'timeList' + idx,
+        id: idx,
+        onFocus: function onFocus(event) {
+          _this.handleListFocus(event, idx);
+        },
+        on: this.v3 ? undefined : {
+          "focus": function onFocus(event) {
+            _this.handleListFocus(event, idx);
+          },
+          "blur": this.handleListBlur,
+          "change": this.handleChange
+        },
+        onBlur: this.handleListBlur,
+        onChange: this.handleChange,
+        value: this.computedValue,
+        disabled: disabled
+      })]) : h("div", {
+        key: idx,
+        "class": "k-time-separator"
+      }, [part.pattern]);
+    }, this)])]);
+  },
+  methods: {
+    onNowClick: function onNowClick(event) {
+      this.$emit('nowclick', event);
+    },
+    focus: function focus(args) {
+      var _this = this;
+
+      this.$nextTick(function () {
+        var timeList = _this.timeLists[0];
+
+        if (!_this.hasActiveButton() && timeList && timeList.$el) {
+          timeList.focus(args);
+        }
+      });
+    },
+    timeFormatReducer: function timeFormatReducer(acc, current) {
+      return acc + current.pattern;
+    },
+    timeFormatFilter: function timeFormatFilter(part, index, all) {
+      var prevItem = index >= 1 && all[index - 1];
+
+      if (!prevItem) {
+        return formatRegExp.test(part.type || '');
+      }
+
+      if (prevItem && part.type === 'literal') {
+        return formatRegExp.test(prevItem.type || '');
+      }
+
+      return formatRegExp.test(part.type || '');
+    },
+    hasActiveButton: function hasActiveButton() {
+      return canUseDOM && this._nowButton && document.activeElement === this._nowButton.$el;
+    },
+    focusList: function focusList(dir) {
+      if (!this.timeLists.length) {
+        return;
+      }
+
+      this.timeLists.reduce(this.listReducer, []).map(function (state) {
+        return dir === Direction.Right ? state.next : state.prev;
+      }).map(function (list) {
+        return list && list.$el && list.$el.focus({
+          preventScroll: true
+        });
+      });
+    },
+    listReducer: function listReducer(state, list, idx, all) {
+      if (state.length || list.$props.id !== this.activeListIndex) {
+        return state;
+      }
+
+      return [{
+        next: all[idx + 1] || list,
+        prev: all[idx - 1] || list
+      }];
+    },
+    showNowButton: function showNowButton() {
+      return !this.hasSteps() && this.$props.nowButton && isInTimeRange(getNow(), this.computedMin, this.computedMax);
+    },
+    hasSteps: function hasSteps() {
+      var _this = this;
+
+      var keys = Object.keys(this.$props.steps);
+      return keys.length !== keys.reduce(function (acc, k) {
+        return acc + _this.$props.steps[k];
+      }, 0);
+    },
+    handleKeyDown: function handleKeyDown(event) {
+      var keyCode = event.keyCode;
+
+      switch (keyCode) {
+        case Keys.left:
+          event.preventDefault();
+          this.focusList(Direction.Left);
+          return;
+
+        case Keys.right:
+          event.preventDefault();
+          this.focusList(Direction.Right);
+          return;
+
+        default:
+          return;
+      }
+    },
+    handleListBlur: function handleListBlur(event) {
+      this.$emit('blur', event);
+    },
+    handleListFocus: function handleListFocus(event, idx) {
+      this.$emit('focus', event);
+      this.activeListIndex = idx;
+    },
+    handleChange: function handleChange(candidate) {
+      this.$emit('change', candidate);
+    }
+  }
+};
+/**
+ * @hidden
+ */
+
+var TimePart = TimePartVue2;
+export { TimePart, TimePartVue2 };

package/dist/esm/timepicker/TimePicker.d.ts

@@ -0,0 +1,118 @@
+import { DefineComponent, RecordPropsDefinition, ComponentOptions, Vue2type } from '../additionalTypes';
+declare type DefaultData<V> = object | ((this: V) => {});
+declare type DefaultMethods<V> = {
+    [key: string]: (this: V, ...args: any[]) => any;
+};
+import { FormComponentProps, FormComponentValidity } from '@progress/kendo-vue-common';
+import { DateInputChangeEvent } from '../dateinput/interfaces/DateInputEventArguments';
+import { TimeSelectorChangeEvent } from './TimeSelector';
+import { TimePickerSettings } from './models';
+/**
+ * The arguments for the `onChange` event of the TimePicker.
+ */
+export interface TimePickerChangeEvent {
+    event?: any;
+    value: Date | null;
+    show: boolean;
+    target: any;
+}
+/**
+ * Represents the props of the [Kendo UI for Vue TimePicker component]({% slug overview_timepicker %}).
+ */
+export interface TimePickerProps extends TimePickerSettings, FormComponentProps {
+    /**
+     * @hidden
+     */
+    modelValue?: Date;
+    /**
+     * Sets the default value of the TimePicker ([see example]({% slug default_value_timepicker %}#toc-setting-the-default-value)).
+     */
+    defaultValue?: Date;
+    /**
+     * Fires each time the user selects a new value ([see example]({% slug controlled_timepicker %}#toc-controlling-the-date-value)).
+     */
+    onChange?: (event: TimePickerChangeEvent) => void;
+    /**
+     * Specifies the value of the TimePicker ([see example]({% slug controlled_timepicker %}#toc-controlling-the-date-value)).
+     *
+     * > The `value` has to be a valid [JavaScript `Date`](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Date) instance.
+     */
+    value?: Date | null;
+}
+/**
+ * @hidden
+ */
+export interface TimePickerState {
+    _popupId: string;
+    _element: HTMLSpanElement | null;
+    _dateInput: any;
+    dateInputRef: any;
+    _timeSelector: any;
+    _wrapper: any;
+    _anchor: any;
+    _oldShow: boolean;
+    _blurTimeout: any;
+    v3: boolean;
+    kendoAnchorRef: any;
+    valueDuringOnChange?: Date | null;
+    showDuringOnChange?: boolean;
+    shouldFocusDateInput: boolean;
+}
+/**
+ * @hidden
+ */
+export interface TimePickerMethods {
+    [key: string]: any;
+    validity: () => FormComponentValidity;
+    focus: () => void;
+    setDateInputRef: (dateInput: any) => void;
+    setTimeSelectorRef: (timeSelector: any) => void;
+    nextValue: (nextProps: TimePickerProps, nextState: TimePickerState) => Date | null;
+    nextShow: (nextProps: TimePickerProps, nextState: TimePickerState) => any;
+    normalizeTime: (date: Date) => Date;
+    setShow: (show: boolean) => void;
+    mergeTime: (value: Date | null) => Date | null;
+    handleInputValueChange: (event: DateInputChangeEvent) => void;
+    handleValueChange: (event: DateInputChangeEvent | TimeSelectorChangeEvent) => void;
+    handleFocus: (event: any) => void;
+    handleBlur: (event: any) => void;
+    handleValueReject: (_: any) => void;
+    handleIconClick: (_: any) => void;
+    handleIconMouseDown: (event: any) => void;
+    handleKeyDown: (event: any) => void;
+    timeFocus: (event: any) => void;
+    timeBlur: (event: any) => void;
+    createBlurTimeout: () => void;
+    getDateInputText: () => string;
+}
+/**
+ * @hidden
+ */
+export interface TimePickerData {
+    currentValue: Date | null;
+    currentShow: boolean;
+    isFocused: boolean;
+}
+/**
+ * @hidden
+ */
+export interface TimePickerComputed {
+    [key: string]: any;
+    timeSelector: any;
+    computedValue: Date | null;
+    computedShow: boolean;
+}
+/**
+ * @hidden
+ */
+export interface TimePickerAll extends Vue2type, TimePickerMethods, TimePickerData, TimePickerComputed, TimePickerState {
+}
+/**
+ * @hidden
+ */
+declare let TimePickerVue2: ComponentOptions<TimePickerAll, DefaultData<TimePickerData>, DefaultMethods<TimePickerAll>, TimePickerComputed, RecordPropsDefinition<TimePickerProps>>;
+/**
+ * @hidden
+ */
+declare const TimePicker: DefineComponent<TimePickerProps, any, TimePickerData, TimePickerComputed, TimePickerMethods, {}, {}, {}, string, TimePickerProps, TimePickerProps, {}>;
+export { TimePicker, TimePickerVue2 };