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

package/dist/esm/timepicker/TimeList.js

@@ -0,0 +1,356 @@
+var _a, _b; // @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 { cloneDate } from '@progress/kendo-date-math';
+import { canUseDOM, Keys, noop } from '@progress/kendo-vue-common';
+import { provideIntlService } from '@progress/kendo-vue-intl';
+import { Virtualization } from '../virtualization/Virtualization.js';
+import { TIME_PART } from './models.js';
+import { SecondsService, MinutesService, HoursService, DayPeriodService, DOMService } from './services.js';
+import { MAX_TIME, MIDNIGHT_DATE } from '../utils.js';
+var SCROLL_THRESHOLD = 2; // < 2px threshold
+
+var SNAP_THRESHOLD = 0.05; // % of the item height
+
+var SKIP = 0;
+var getters = (_a = {}, _a[Keys.end] = function (data, _) {
+  return data[data.length - 1];
+}, _a[Keys.home] = function (data, _) {
+  return data[0];
+}, _a[Keys.up] = function (data, index) {
+  return data[index - 1];
+}, _a[Keys.down] = function (data, index) {
+  return data[index + 1];
+}, _a);
+var services = (_b = {}, _b[TIME_PART.dayperiod] = DayPeriodService, _b[TIME_PART.hour] = HoursService, _b[TIME_PART.minute] = MinutesService, _b[TIME_PART.second] = SecondsService, _b);
+/**
+ * @hidden
+ */
+
+var TimeListVue2 = {
+  name: 'KendoTimeList',
+  // @ts-ignore
+  emits: {
+    'change': null,
+    'focus': null,
+    'blur': null
+  },
+  props: {
+    id: Number,
+    boundRange: {
+      type: Boolean,
+      default: false
+    },
+    max: {
+      type: Date,
+      default: function _default() {
+        return MAX_TIME;
+      }
+    },
+    min: {
+      type: Date,
+      default: function _default() {
+        return MIDNIGHT_DATE;
+      }
+    },
+    part: Object,
+    step: {
+      type: Number,
+      default: 1
+    },
+    value: Date,
+    smoothScroll: {
+      type: Boolean,
+      default: true
+    }
+  },
+  inject: {
+    kendoIntlService: {
+      default: null
+    }
+  },
+  data: function data() {
+    return {
+      animateToIndex: false
+    };
+  },
+  created: function created() {
+    this.topOffset = undefined;
+    this.dom = new DOMService();
+  },
+  computed: {
+    animate: function animate() {
+      return Boolean(this.$props.smoothScroll && this.animateToIndex);
+    }
+  },
+  mounted: function mounted() {
+    var _this = this;
+
+    this.virtualization = this.$refs.virtualization; // Async calculation of height to avoid animation cancellation
+
+    Promise.resolve().then(function () {
+      if (!_this.$el) {
+        return;
+      } // @ts-ignore
+
+
+      _this.dom.calculateHeights(_this.$el);
+
+      _this.$forceUpdate();
+    });
+  },
+  updated: function updated() {
+    if (!this.$refs.virtualization) {
+      return;
+    }
+
+    this.virtualization = this.$refs.virtualization;
+    var index = this.service.selectedIndex(this.$props.value);
+    this.virtualization[this.animate ? 'animateToIndex' : 'scrollToIndex'](index);
+    this.animateToIndex = true;
+  },
+  // @ts-ignore
+  setup: !isV3 ? undefined : function () {
+    var v3 = !!isV3;
+    var kendoIntlService = inject('kendoIntlService', {});
+    return {
+      v3: v3,
+      kendoIntlService: kendoIntlService
+    };
+  },
+  // @ts-ignore
+  render: function render(createElement) {
+    var _this2 = this;
+
+    var h = gh || createElement;
+
+    if (!this.$props.part.type || !services[this.$props.part.type]) {
+      return;
+    }
+
+    this.calculateHeights();
+    this.intl = provideIntlService(this);
+    this.service = new services[this.$props.part.type](this.intl);
+    this.configureServices();
+    var data = this.service.data(this.$props.value);
+    var transform = 'translateY(' + this.topOffset + 'px)';
+    var total = this.service.total(this.$props.value);
+
+    var list = function list() {
+      return h("ul", {
+        style: {
+          transform: transform,
+          msTransform: transform
+        },
+        "class": "k-reset"
+      }, [data.map(function (item, idx) {
+        var _this = this;
+
+        return h("li", {
+          key: idx,
+          "class": "k-item",
+          onClick: function onClick() {
+            _this.handleChange(item);
+          },
+          on: this.v3 ? undefined : {
+            "click": function onClick() {
+              _this.handleChange(item);
+            }
+          }
+        }, [h("span", [item.text])]);
+      }, this)]);
+    };
+
+    return h("div", {
+      "class": "k-time-list",
+      id: String(this.$props.id || ''),
+      attrs: this.v3 ? undefined : {
+        id: String(this.$props.id || ''),
+        tabindex: this.$props.disabled ? -1 : 0
+      },
+      tabindex: this.$props.disabled ? -1 : 0,
+      onKeydown: this.handleKeyDown,
+      on: this.v3 ? undefined : {
+        "keydown": this.handleKeyDown,
+        "focusin": this.handleFocus,
+        "focusout": this.handleBlur,
+        "mouseover": this.handleMouseOver
+      },
+      onFocusin: this.handleFocus,
+      onFocusout: this.handleBlur,
+      onMouseover: this.handleMouseOver
+    }, [this.dom.didCalculate ? // @ts-ignore  function children
+    h(Virtualization, {
+      bottomOffset: this.bottomOffset,
+      attrs: this.v3 ? undefined : {
+        bottomOffset: this.bottomOffset,
+        itemHeight: this.itemHeight,
+        maxScrollDifference: this.listHeight,
+        role: "presentation",
+        skip: SKIP,
+        tabIndex: -1,
+        take: total,
+        topOffset: this.topOffset,
+        total: total
+      },
+      "class": 'k-time-container',
+      itemHeight: this.itemHeight,
+      maxScrollDifference: this.listHeight,
+      onScrollaction: this.handleScrollAction,
+      on: this.v3 ? undefined : {
+        "scrollaction": this.handleScrollAction
+      },
+      ref: 'virtualization',
+      role: "presentation",
+      skip: SKIP,
+      tabIndex: -1,
+      take: total,
+      topOffset: this.topOffset,
+      total: total
+    }, this.v3 ? function () {
+      return [list.call(_this2)];
+    } : [list.call(_this2)]) : h("div", {
+      "class": "k-time-container"
+    }, [list.call(this)])]);
+  },
+  methods: {
+    focus: function focus(args) {
+      var _this = this;
+
+      Promise.resolve().then(function () {
+        if (!_this.$el) {
+          return;
+        } // @ts-ignore
+
+
+        _this.$el.focus(args);
+      });
+    },
+    itemOffset: function itemOffset(scrollTop) {
+      if (!this.virtualization) {
+        return -1;
+      }
+
+      var valueIndex = this.service.selectedIndex(this.$props.value);
+      var activeIndex = this.virtualization.activeIndex();
+      var offset = this.virtualization.itemOffset(activeIndex);
+      var distance = Math.abs(Math.ceil(scrollTop) - offset);
+
+      if (valueIndex === activeIndex && distance < SCROLL_THRESHOLD) {
+        return offset;
+      }
+
+      var scrollUp = valueIndex > activeIndex;
+      var moveToNext = scrollUp && distance >= this.bottomThreshold || !scrollUp && distance > this.topThreshold;
+      return moveToNext ? this.virtualization.itemOffset(activeIndex + 1) : offset;
+    },
+    calculateHeights: function calculateHeights() {
+      if (!this.dom.didCalculate) {
+        return;
+      }
+
+      this.itemHeight = this.dom.itemHeight;
+      this.listHeight = this.dom.timeListHeight;
+      this.topOffset = (this.listHeight - this.itemHeight) / 2;
+      this.bottomOffset = this.listHeight - this.itemHeight;
+      this.topThreshold = this.itemHeight * SNAP_THRESHOLD;
+      this.bottomThreshold = this.itemHeight * (1 - SNAP_THRESHOLD);
+    },
+    configureServices: function configureServices(props) {
+      var _a = props || this.$props,
+          min = _a.min,
+          max = _a.max,
+          value = _a.value;
+
+      var _b = this.service.limitRange(min || this.$props.min, max || this.$props.max, value || this.$props.value),
+          newMin = _b[0],
+          newMax = _b[1];
+
+      this.service.configure(this.serviceSettings({
+        min: newMin,
+        max: newMax
+      }));
+    },
+    serviceSettings: function serviceSettings(settings) {
+      var defaults = {
+        boundRange: this.$props.boundRange,
+        insertUndividedMax: false,
+        min: cloneDate(this.$props.min),
+        max: cloneDate(this.$props.max),
+        part: this.$props.part,
+        step: this.$props.step
+      };
+      var result = Object.assign({}, defaults, settings);
+      result.boundRange = result.part.type !== 'hour' || this.$props.boundRange;
+      return result;
+    },
+    handleScrollAction: function handleScrollAction(_a) {
+      var target = _a.target,
+          animationInProgress = _a.animationInProgress;
+
+      if (!this.virtualization) {
+        return;
+      }
+
+      if (target && !animationInProgress) {
+        this.animateToIndex = false;
+        var index = this.virtualization.itemIndex(this.itemOffset(target.scrollTop));
+        var dataItem = this.service.data(this.$props.value)[index];
+        this.handleChange(dataItem);
+      }
+    },
+    handleFocus: function handleFocus(event) {
+      this.$emit('focus', event);
+    },
+    handleBlur: function handleBlur(event) {
+      this.$emit('blur', event);
+    },
+    handleMouseOver: function handleMouseOver() {
+      if (!this.$el) {
+        return;
+      }
+
+      if (canUseDOM && document.activeElement !== this.$el) {
+        // @ts-ignore
+        this.$el.focus({
+          preventScroll: true
+        });
+      }
+    },
+    handleKeyDown: function handleKeyDown(event) {
+      var keyCode = event.keyCode;
+
+      if (keyCode === Keys.down || keyCode === Keys.up || keyCode === Keys.end || keyCode === Keys.home) {
+        event.preventDefault();
+      }
+
+      var getter = getters[event.keyCode] || noop;
+      var dataItem = getter(this.service.data(this.$props.value), this.service.selectedIndex(this.$props.value));
+
+      if (dataItem) {
+        this.handleChange(dataItem);
+      }
+    },
+    handleChange: function handleChange(dataItem) {
+      var candidate = this.service.apply(this.$props.value, dataItem.value);
+
+      if (this.$props.value.getTime() === candidate.getTime()) {
+        return;
+      }
+
+      this.currentValue = candidate;
+      this.$emit('change', candidate);
+    }
+  }
+};
+/**
+ * @hidden
+ */
+
+var TimeList = TimeListVue2;
+export { TimeList, TimeListVue2 };

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

@@ -0,0 +1,99 @@
+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 { DateFormatPart, IntlService, DateFormatOptions } from '@progress/kendo-vue-intl';
+import { TimePickerIncrementalSteps } from './models/IncrementalSteps';
+/**
+ * @hidden
+ */
+export declare enum Direction {
+    Left = 0,
+    Right = 1
+}
+/**
+ * @hidden
+ */
+export interface TimePartChangeEvent {
+    event: any;
+    value: Date;
+    target: any;
+}
+/**
+ * @hidden
+ */
+export interface TimePartProps {
+    disabled?: boolean;
+    format?: string | DateFormatOptions;
+    max?: Date;
+    min?: Date;
+    cancelButton?: boolean;
+    nowButton?: boolean;
+    onChange?: any;
+    steps?: TimePickerIncrementalSteps;
+    smoothScroll?: boolean;
+    tabIndex?: number;
+    value?: Date | null;
+    boundRange?: boolean;
+}
+/**
+ * @hidden
+ */
+export interface TimePartState {
+    _element: HTMLSpanElement | null;
+    _nowButton: any;
+    dateFormatParts: DateFormatPart[];
+    timeLists: any[];
+    snapTime: Function;
+}
+/**
+ * @hidden
+ */
+export interface TimePartData {
+    activeListIndex: number;
+}
+/**
+ * @hidden
+ */
+export interface TimePartComputed {
+    [key: string]: any;
+    element: HTMLSpanElement | null;
+    computedValue: Date;
+    intl: IntlService;
+    computedMin: Date;
+    computedMax: Date;
+}
+/**
+ * @hidden
+ */
+export interface TimePartMethods {
+    [key: string]: any;
+    focus: (args?: any) => void;
+    timeFormatReducer: (acc: string, current: DateFormatPart) => any;
+    timeFormatFilter: (part: DateFormatPart, index: number, all: DateFormatPart[]) => boolean;
+    hasActiveButton: () => boolean;
+    focusList: (dir: Direction) => void;
+    listReducer: (state: any, list: any, idx: number, all: any) => void;
+    showNowButton: () => boolean;
+    hasSteps: () => boolean;
+    handleKeyDown: (event: any) => void;
+    handleListBlur: () => void;
+    handleListFocus: (event: any, idx: number) => void;
+    handleChange: (candidate: Date) => void;
+    onNowClick: (event: any) => void;
+}
+/**
+ * @hidden
+ */
+export interface TimePartAll extends Vue2type, TimePartMethods, TimePartData, TimePartComputed, TimePartState {
+}
+/**
+ * @hidden
+ */
+declare let TimePartVue2: ComponentOptions<TimePartAll, DefaultData<TimePartData>, DefaultMethods<TimePartAll>, TimePartComputed, RecordPropsDefinition<TimePartProps>>;
+/**
+ * @hidden
+ */
+declare const TimePart: DefineComponent<TimePartProps, any, TimePartData, TimePartComputed, TimePartMethods, {}, {}, {}, string, TimePartProps, TimePartProps, {}>;
+export { TimePart, TimePartVue2 };