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

package/dist/esm/slots/SchedulerSlot.js

@@ -0,0 +1,345 @@
+var __assign = this && this.__assign || function () {
+  __assign = Object.assign || function (t) {
+    for (var s, i = 1, n = arguments.length; i < n; i++) {
+      s = arguments[i];
+
+      for (var p in s) {
+        if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
+      }
+    }
+
+    return t;
+  };
+
+  return __assign.apply(this, arguments);
+}; // @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 { getDefaultSlots } from '@progress/kendo-vue-common';
+import { COLLECTION_ACTION, formatEventTime } from '../utils.js';
+import { provideIntlService } from '@progress/kendo-vue-intl';
+import { ShowMoreItemsButton } from '../components/ShowMoreItemsButton.js';
+import { SchedulerForm } from '../components/SchedulerForm.js';
+var DAY_FORMAT = {
+  skeleton: 'dd'
+};
+/**
+ * @hidden
+ */
+
+var SchedulerSlotVue2 = {
+  name: 'KendoSchedulerSlot',
+  // @ts-ignore
+  emits: {
+    focus: null,
+    blur: null,
+    click: null,
+    showmoreitems: null,
+    mouseover: null,
+    mouseout: null,
+    mouseenter: null,
+    mouseleave: null,
+    doubleclick: null,
+    keydown: null,
+    keypress: null,
+    keyup: null
+  },
+  props: {
+    refTo: [Function, Object],
+    items: Array,
+    row: Number,
+    group: Object,
+    range: Object,
+    isWorkDay: {
+      type: Boolean,
+      default: true
+    },
+    isWorkHour: {
+      type: Boolean,
+      default: true
+    },
+    selected: Boolean,
+    tabIndex: {
+      type: Number,
+      default: undefined
+    },
+    col: Number,
+    index: Number,
+    start: Date,
+    end: Date,
+    zonedStart: Object,
+    zonedEnd: Object,
+    isAllDay: Boolean,
+    navDay: Boolean,
+    editable: [Object, Boolean],
+    itemsPerSlot: Number,
+    formItem: Object
+  },
+  computed: {
+    currentTabIndex: function currentTabIndex() {
+      return this.$props.tabIndex !== undefined ? this.$props.tabIndex === null ? undefined : this.$props.tabIndex : this.$props.selected ? 0 : -1;
+    },
+    slotClass: function slotClass() {
+      return {
+        'k-scheduler-cell k-slot-cell': true,
+        'k-nonwork-hour': !this.$props.isWorkHour || !this.$props.isWorkDay,
+        'k-selected': this.$props.selected
+      };
+    },
+    slotLabel: function slotLabel() {
+      return "".concat(formatEventTime(this.intl, this.$props.zonedStart, this.$props.zonedEnd, this.$props.isAllDay || false));
+    }
+  },
+  inject: {
+    kendoIntlService: {
+      default: null
+    },
+    setSlots: {
+      default: null
+    },
+    slotClick: {
+      default: null
+    },
+    slotDoubleClick: {
+      default: null
+    },
+    ksEditFormSubmit: {
+      default: null
+    },
+    ksEditFormCancel: {
+      default: null
+    },
+    ksEditFormClose: {
+      default: null
+    }
+  },
+  created: function created() {
+    this.setSlots({
+      type: COLLECTION_ACTION.add,
+      item: this
+    });
+  },
+  destroyed: !!isV3 ? undefined : function () {
+    this.setSlots({
+      type: COLLECTION_ACTION.remove,
+      item: this
+    });
+  },
+  // @ts-ignore
+  unmounted: function unmounted() {
+    this.setSlots({
+      type: COLLECTION_ACTION.remove,
+      item: this
+    });
+  },
+  // @ts-ignore
+  setup: !isV3 ? undefined : function () {
+    var v3 = !!isV3;
+    return {
+      v3: v3
+    };
+  },
+  // @ts-ignore
+  render: function render(createElement) {
+    var h = gh || createElement;
+    this.intl = provideIntlService(this);
+    var defaultSlot = getDefaultSlots(this);
+    return h("div", {
+      id: this.$props.id,
+      attrs: this.v3 ? undefined : {
+        id: this.$props.id,
+        tabindex: this.currentTabIndex // Aria
+        ,
+        "aria-label": this.slotLabel,
+        "aria-selected": this.$props.selected // Focus
+        ,
+        "data-slot": true,
+        "data-slot-allday": this.$props.isAllDay,
+        "data-slot-start": this.$props.start.getTime(),
+        "data-slot-end": this.$props.end.getTime(),
+        "data-slot-group": this.$props.group.index,
+        "data-slot-range": this.$props.range.index,
+        "data-slot-index": this.$props.index
+      },
+      style: {
+        userSelect: 'none'
+      },
+      "class": this.slotClass,
+      tabindex: this.currentTabIndex,
+      "aria-label": this.slotLabel,
+      "aria-selected": this.$props.selected,
+      onFocus: this.handleFocus,
+      on: this.v3 ? undefined : {
+        "focus": this.handleFocus,
+        "blur": this.handleBlur,
+        "click": this.handleClick,
+        "mouseenter": this.handleMouseEnter,
+        "mouseleave": this.handleMouseLeave,
+        "mouseover": this.handleMouseOver,
+        "mouseout": this.handleMouseOut,
+        "dblclick": this.handleDoubleClick,
+        "keydown": this.handleKeyDown,
+        "keypress": this.handleKeyPress,
+        "keyup": this.handleKeyUp
+      },
+      onBlur: this.handleBlur // Mouse
+      ,
+      onClick: this.handleClick,
+      onMouseenter: this.handleMouseEnter,
+      onMouseleave: this.handleMouseLeave,
+      onMouseover: this.handleMouseOver,
+      onMouseout: this.handleMouseOut,
+      onDblclick: this.handleDoubleClick // Keyboard
+      ,
+      onKeydown: this.handleKeyDown,
+      onKeypress: this.handleKeyPress,
+      onKeyup: this.handleKeyUp,
+      "data-slot": true,
+      "data-slot-allday": this.$props.isAllDay,
+      "data-slot-start": this.$props.start.getTime(),
+      "data-slot-end": this.$props.end.getTime(),
+      "data-slot-group": this.$props.group.index,
+      "data-slot-range": this.$props.range.index,
+      "data-slot-index": this.$props.index
+    }, [this.navDay && h("span", {
+      "class": "k-link k-nav-day"
+    }, [this.intl.formatDate(new Date(this.end.getTime() - (this.end.getTime() - this.start.getTime()) / 2), DAY_FORMAT)]), this.itemsPerSlot < this.items.length && h(ShowMoreItemsButton, {
+      onClick: this.handleShowMoreItemsClick,
+      on: this.v3 ? undefined : {
+        "click": this.handleShowMoreItemsClick
+      }
+    }), defaultSlot, this.formItem && h(SchedulerForm, {
+      dataItem: this.formItem,
+      attrs: this.v3 ? undefined : {
+        dataItem: this.formItem
+      },
+      onSubmit: this.ksEditFormSubmit,
+      on: this.v3 ? undefined : {
+        "submit": this.ksEditFormSubmit,
+        "close": this.ksEditFormClose,
+        "cancel": this.ksEditFormCancel
+      },
+      onClose: this.ksEditFormClose,
+      onCancel: this.ksEditFormCancel
+    })]);
+  },
+  methods: {
+    handleShowMoreItemsClick: function handleShowMoreItemsClick(event) {
+      this.$emit('showmoreitems', event);
+    },
+    handleFocus: function handleFocus(event) {
+      this.$emit('focus', {
+        event: event,
+        target: {
+          props: __assign({}, this.$props),
+          element: this.$el
+        }
+      });
+    },
+    handleBlur: function handleBlur(event) {
+      this.$emit('blur', {
+        event: event,
+        target: {
+          props: __assign({}, this.$props),
+          element: this.$el
+        }
+      });
+    },
+    handleClick: function handleClick(event) {
+      var args = {
+        event: event,
+        target: {
+          props: __assign({}, this.$props),
+          element: this.$el
+        }
+      };
+      this.$emit('click', args);
+      this.slotClick(args);
+    },
+    handleMouseOver: function handleMouseOver(event) {
+      this.$emit('mouseover', {
+        event: event,
+        target: {
+          props: __assign({}, this.$props),
+          element: this.$el
+        }
+      });
+    },
+    handleMouseOut: function handleMouseOut(event) {
+      this.$emit('mouseout', {
+        event: event,
+        target: {
+          props: __assign({}, this.$props),
+          element: this.$el
+        }
+      });
+    },
+    handleMouseEnter: function handleMouseEnter(event) {
+      this.$emit('mouseenter', {
+        event: event,
+        target: {
+          props: __assign({}, this.$props),
+          element: this.$el
+        }
+      });
+    },
+    handleMouseLeave: function handleMouseLeave(event) {
+      this.$emit('mouseleave', {
+        event: event,
+        target: {
+          props: __assign({}, this.$props),
+          element: this.$el
+        }
+      });
+    },
+    handleDoubleClick: function handleDoubleClick(event) {
+      var args = {
+        event: event,
+        target: {
+          props: __assign({}, this.$props),
+          element: this.$el
+        }
+      };
+      this.$emit('doubleclick', args);
+      this.slotDoubleClick(args);
+    },
+    handleKeyDown: function handleKeyDown(event) {
+      this.$emit('keydown', {
+        event: event,
+        target: {
+          props: __assign({}, this.$props),
+          element: this.$el
+        }
+      });
+    },
+    handleKeyPress: function handleKeyPress(event) {
+      this.$emit('keypress', {
+        event: event,
+        target: {
+          props: __assign({}, this.$props),
+          element: this.$el
+        }
+      });
+    },
+    handleKeyUp: function handleKeyUp(event) {
+      this.$emit('keyup', {
+        event: event,
+        target: {
+          props: __assign({}, this.$props),
+          element: this.$el
+        }
+      });
+    }
+  }
+};
+/**
+ * @hidden
+ */
+
+var SchedulerSlot = SchedulerSlotVue2;
+export { SchedulerSlot, SchedulerSlotVue2 };

package/dist/esm/slots/SchedulerViewSlot.d.ts

@@ -0,0 +1,73 @@
+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 { SchedulerSlotProps, SchedulerSlotHandle } from './SchedulerSlot';
+/**
+ * Represents the extended `expandable` configuration of a `SchedulerSlot`.
+ *
+ * Settings `offsetTop` or `offsetBottom` would provide an extra space in addition to the space taken by the `items` inside the `slot`.
+ */
+export declare type SchedulerSlotExpandableConfig = {
+    offsetTop?: number;
+    offsetBottom?: number;
+};
+/**
+ * Represents the props of the Kendo UI for Vue [SchedulerViewSlot]({% slug api_scheduler_schedulerviewslotprops %}) component.
+ */
+export interface SchedulerViewSlotProps extends SchedulerSlotProps {
+    /**
+     * Overrides the default component responsible for view-specific functionality.
+     *
+     * The default Component is: [SchedulerSlot]({% slug api_scheduler_schedulerslotprops %}).
+     */
+    slotRender?: any;
+    /**
+     * Set to `false` will render the `slot` as is, without expanding depending on the `items` inside it.
+     *
+     * For more information, please refer to the [Adaptive Slot Height]({% slug recurring_events_scheduler %}) article.
+     */
+    expandable?: boolean | SchedulerSlotExpandableConfig;
+}
+/** @hidden */
+export interface SchedulerViewSlotHandle {
+    props: SchedulerViewSlotProps;
+}
+/**
+ * @hidden
+ */
+export interface SchedulerViewSlotState {
+    slot: SchedulerSlotHandle | null;
+}
+/**
+ * @hidden
+ */
+export interface SchedulerViewSlotComputed {
+    [key: string]: any;
+}
+/**
+ * @hidden
+ */
+export interface SchedulerViewSlotMethods {
+    [key: string]: any;
+}
+/**
+ * @hidden
+ */
+export interface SchedulerViewSlotData {
+}
+/**
+ * @hidden
+ */
+export interface SchedulerViewSlotAll extends Vue2type, SchedulerViewSlotMethods, SchedulerViewSlotData, SchedulerViewSlotComputed, SchedulerViewSlotState {
+}
+/**
+ * @hidden
+ */
+declare let SchedulerViewSlotVue2: ComponentOptions<SchedulerViewSlotAll, DefaultData<SchedulerViewSlotData>, DefaultMethods<SchedulerViewSlotAll>, SchedulerViewSlotComputed, RecordPropsDefinition<SchedulerViewSlotProps>>;
+/**
+ * @hidden
+ */
+declare const SchedulerViewSlot: DefineComponent<SchedulerViewSlotProps, any, SchedulerViewSlotData, SchedulerViewSlotComputed, SchedulerViewSlotMethods, {}, {}, {}, string, SchedulerViewSlotProps, SchedulerViewSlotProps, {}>;
+export { SchedulerViewSlot, SchedulerViewSlotVue2 };

package/dist/esm/slots/SchedulerViewSlot.js

@@ -0,0 +1,220 @@
+// @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 { SchedulerSlot } from './SchedulerSlot.js';
+import { useSlotExpand } from '../hooks.js';
+import { getDefaultSlots, getTemplate } from '@progress/kendo-vue-common';
+/**
+ * @hidden
+ */
+
+var SchedulerViewSlotVue2 = {
+  name: 'KendoSchedulerViewSlot',
+  // @ts-ignore
+  emits: {
+    focus: null,
+    showmoreitems: null,
+    doubleclick: null,
+    keydown: null
+  },
+  props: {
+    refTo: [Function, Object],
+    items: Array,
+    row: Number,
+    group: Object,
+    range: Object,
+    isWorkDay: {
+      type: Boolean,
+      default: true
+    },
+    isWorkHour: {
+      type: Boolean,
+      default: true
+    },
+    selected: Boolean,
+    col: Number,
+    index: Number,
+    start: Date,
+    end: Date,
+    zonedStart: Object,
+    zonedEnd: Object,
+    slotRender: [String, Function, Object],
+    expandable: [Boolean, Object],
+    isAllDay: Boolean,
+    navDay: Boolean,
+    editable: [Object, Boolean],
+    itemsPerSlot: Number,
+    formItem: Object,
+    tabIndex: {
+      type: Number,
+      default: undefined
+    },
+    slotStyle: Object
+  },
+  created: function created() {
+    this.viewSlot = null;
+    this.slot = null;
+  },
+  inject: {
+    ks: {
+      default: null
+    },
+    bv: {
+      default: null
+    }
+  },
+  data: function data() {
+    return {
+      timeout: undefined
+    };
+  },
+  updated: function updated() {
+    var that = this;
+    this.$nextTick(function () {
+      useSlotExpand(that, that.ks.scheduler.$el, that.$props.expandable);
+    });
+  },
+  mounted: function mounted() {
+    var that = this;
+    this.$nextTick(function () {
+      useSlotExpand(that, that.ks.scheduler.$el, that.$props.expandable);
+    });
+
+    if (!this.ks.scheduler || !this.ks.scheduler.$el) {
+      return;
+    }
+
+    this.observer = new window.ResizeObserver(this.handleResize);
+    this.observer.observe(this.ks.scheduler.$el);
+  },
+  // @ts-ignore
+  setup: !isV3 ? undefined : function () {
+    var v3 = !!isV3;
+    return {
+      v3: v3
+    };
+  },
+  // @ts-ignore
+  render: function render(createElement) {
+    var h = gh || createElement;
+    var defaultSlot = getDefaultSlots(this);
+    var _a = this.$props,
+        refTo = _a.refTo,
+        items = _a.items,
+        row = _a.row,
+        group = _a.group,
+        range = _a.range,
+        isWorkDay = _a.isWorkDay,
+        isWorkHour = _a.isWorkHour,
+        col = _a.col,
+        index = _a.index,
+        start = _a.start,
+        end = _a.end,
+        zonedStart = _a.zonedStart,
+        zonedEnd = _a.zonedEnd,
+        navDay = _a.navDay,
+        itemsPerSlot = _a.itemsPerSlot,
+        editable = _a.editable;
+    var slotRender;
+    var slotRenderDefaultRendering = // @ts-ignore  function children
+    h(SchedulerSlot, {
+      tabIndex: this.tabIndex,
+      attrs: this.v3 ? undefined : {
+        tabIndex: this.tabIndex,
+        isAllDay: this.isAllDay,
+        items: items,
+        row: row,
+        group: group,
+        range: range,
+        isWorkDay: isWorkDay,
+        isWorkHour: isWorkHour,
+        col: col,
+        index: index,
+        start: start,
+        end: end,
+        zonedStart: zonedStart,
+        zonedEnd: zonedEnd,
+        navDay: navDay,
+        itemsPerSlot: itemsPerSlot,
+        editable: editable,
+        formItem: this.formItem,
+        selected: this.selected
+      },
+      isAllDay: this.isAllDay,
+      items: items,
+      row: row,
+      group: group,
+      range: range,
+      isWorkDay: isWorkDay,
+      isWorkHour: isWorkHour,
+      col: col,
+      index: index,
+      start: start,
+      end: end,
+      zonedStart: zonedStart,
+      zonedEnd: zonedEnd,
+      navDay: navDay,
+      itemsPerSlot: itemsPerSlot,
+      editable: editable,
+      formItem: this.formItem,
+      onShowmoreitems: this.handleShowMoreItemsClick,
+      on: this.v3 ? undefined : {
+        "showmoreitems": this.handleShowMoreItemsClick,
+        "doubleclick": this.handleDoubleClick,
+        "keydown": this.handleKeyDown,
+        "focus": this.handleFocus
+      },
+      onDoubleclick: this.handleDoubleClick,
+      onKeydown: this.handleKeyDown,
+      onFocus: this.handleFocus,
+      selected: this.selected,
+      style: this.$props.slotStyle
+    }, this.v3 ? function () {
+      return [defaultSlot];
+    } : [defaultSlot]);
+    slotRender = getTemplate.call(this, {
+      h: h,
+      template: this.$props.slotRender,
+      defaultRendering: slotRenderDefaultRendering,
+      defaultSlots: defaultSlot,
+      additionalListeners: {
+        showmoreitems: this.handleShowMoreItemsClick
+      }
+    });
+    return slotRender;
+  },
+  methods: {
+    handleShowMoreItemsClick: function handleShowMoreItemsClick(event) {
+      this.$emit('showmoreitems', event);
+    },
+    handleDoubleClick: function handleDoubleClick(args) {
+      this.$emit('doubleclick', args);
+    },
+    handleKeyDown: function handleKeyDown(args) {
+      this.$emit('keydown', args);
+    },
+    handleFocus: function handleFocus(args) {
+      this.$emit('focus', args);
+    },
+    handleResize: function handleResize() {
+      var that = this;
+
+      if (this.timeout !== undefined) {
+        window.cancelAnimationFrame(this.timeout);
+      }
+
+      this.timeout = window.requestAnimationFrame(function () {
+        useSlotExpand(that, that.ks.scheduler.$el, that.$props.expandable);
+      });
+    }
+  }
+};
+/**
+ * @hidden
+ */
+
+var SchedulerViewSlot = SchedulerViewSlotVue2;
+export { SchedulerViewSlot, SchedulerViewSlotVue2 };