@progress/kendo-vue-scheduler 3.0.8 → 3.0.9-dev.202203010857

package/dist/es/slots/SchedulerEditSlot.js

@@ -0,0 +1,309 @@
+// @ts-ignore
+import * as Vue from 'vue';
+var allVue = Vue;
+var gh = allVue.h;
+var inject = allVue.inject;
+import { getDefaultSlots, Keys } from '@progress/kendo-vue-common';
+import { DATA_ACTION } from '../Scheduler';
+import { setField, getField, findFirstItem, isGroupped } from '../utils';
+import { SchedulerViewSlot } from './SchedulerViewSlot';
+import { SLOTS_FOCUS_ACTION, useEditable } from '../hooks';
+import { SLOTS_SELECT_ACTION } from '../hooks/use-slots-selection'; // tslint:enable:max-line-length
+
+var SchedulerEditSlotVue2 = {
+  name: 'KendoSchedulerEditSlot',
+  props: {
+    viewSlot: Object,
+    renderSlot: Object,
+    form: Object,
+    formItem: Object,
+    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,
+    isAllDay: Boolean,
+    expandable: [Boolean, Object]
+  },
+  created: function created() {
+    this.slot = null;
+    this.editableSlot = null;
+  },
+  inject: {
+    bv: {
+      default: null
+    },
+    ks: {
+      default: null
+    }
+  },
+  data: function data() {
+    return {
+      currentFormItem: null
+    };
+  },
+  computed: {
+    currentTabIndex: function currentTabIndex() {
+      var isFirst = this.bv.slots.length && this.bv.slots[0].current === this.slot;
+      return this.$props.tabIndex !== undefined ? this.$props.tabIndex === null ? undefined : this.$props.tabIndex : this.bv.selectedSlots.length === 0 ? isFirst && this.items.length === 0 ? 0 : undefined : undefined;
+    },
+    computedEditable: function computedEditable() {
+      return useEditable(this.$props.editable);
+    }
+  },
+  // @ts-ignore
+  setup: !gh ? undefined : function () {
+    var v3 = !!gh;
+    return {
+      v3: v3
+    };
+  },
+  // @ts-ignore
+  render: function render(createElement) {
+    var _this = this;
+
+    var h = gh || createElement;
+    var defaultSlot = getDefaultSlots(this);
+    var _a = this.$props,
+        refTo = _a.refTo,
+        propViewSlot = _a.viewSlot,
+        propForm = _a.form,
+        propFormItem = _a.formItem,
+        onFormItemChange = _a.onFormItemChange,
+        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; // const fields = useSchedulerFieldsContext();
+    // const [slots] = useSchedulerViewSlotsContext();
+    // const [items] = useSchedulerViewItemsContext();
+    // const [selectedSlots, dispatchSlotsSelection] = useSchedulerViewSelectedSlotsContext();
+    // const [,dispatchFocusedSlots] = useSchedulerViewFocusedSlotsContext();
+
+    var selected = this.bv.selectedSlots.some(function (s) {
+      return Boolean(s.current && s.current.props.start.getTime() === _this.$props.start.getTime() && s.current.props.end.getTime() === _this.$props.end.getTime() && s.current.props.index === _this.$props.index && s.current.props.group.index === _this.$props.group.index && s.current.props.range.index === _this.$props.range.index && s.current.props.isAllDay === _this.$props.isAllDay);
+    });
+    return (// @ts-ignore  function children
+      h(SchedulerViewSlot, {
+        isAllDay: this.isAllDay,
+        attrs: this.v3 ? undefined : {
+          isAllDay: this.isAllDay,
+          expandable: this.expandable,
+          items: items,
+          row: row,
+          group: group,
+          range: range,
+          isWorkDay: isWorkDay,
+          isWorkHour: isWorkHour,
+          col: col,
+          index: index,
+          start: start,
+          end: end,
+          zonedStart: zonedStart,
+          zonedEnd: zonedEnd //  refTo={this}
+          ,
+          selected: selected,
+          tabIndex: this.currentTabIndex // Focus
+
+        },
+        expandable: this.expandable,
+        items: items,
+        row: row,
+        group: group,
+        range: range,
+        isWorkDay: isWorkDay,
+        isWorkHour: isWorkHour,
+        col: col,
+        index: index,
+        start: start,
+        end: end,
+        zonedStart: zonedStart,
+        zonedEnd: zonedEnd,
+        selected: selected,
+        tabIndex: this.currentTabIndex,
+        onFocus: this.handleFocus // Mouse
+        ,
+        on: this.v3 ? undefined : {
+          "focus": this.handleFocus,
+          "doubleclick": this.handleDoubleClick,
+          "keydown": this.handleKeyDown
+        },
+        onDoubleclick: this.handleDoubleClick // Keyboard
+        ,
+        onKeydown: this.handleKeyDown
+      }, this.v3 ? function () {
+        return [defaultSlot];
+      } : [defaultSlot]) // (this.formItem && <SchedulerForm
+      //     dataItem={this.formItem}
+      //     onSubmit={this.handleEditFormSubmit}
+      //     onClose={this.handleEditFormClose}
+      //     onCancel={this.handleEditFormCancel}
+      // />
+      // </SchedulerEditSlotContext>
+
+    );
+  },
+  methods: {
+    createDataItemFromSlot: function createDataItemFromSlot() {
+      var dataItem = {};
+      setField(dataItem, this.fields.start, new Date(this.$props.start.getTime()));
+      setField(dataItem, this.fields.end, new Date(this.$props.end.getTime()));
+      setField(dataItem, this.fields.isAllDay, this.$props.isAllDay);
+
+      if (this.$props.group.resources.length) {
+        for (var idx = 0; idx < this.$props.group.resources.length; idx++) {
+          var resource = this.$props.group.resources[idx];
+
+          if (isGroupped(this.$props.group.resources)) {
+            var value = getField(this.$props.group.resources[idx], resource.valueField);
+            setField(dataItem, resource.field, resource.multiple ? [value] : value);
+          } else {
+            setField(dataItem, resource.field, resource.multiple ? [] : undefined);
+          }
+        }
+      }
+
+      return dataItem;
+    },
+    handleFocus: function handleFocus(event) {
+      if (this.computedEditable.select) {
+        this.dispatchSlotsSelection({
+          type: SLOTS_SELECT_ACTION.select,
+          slot: this.renderSlot
+        }, event.event);
+      }
+
+      this.$emit('focus', event);
+    },
+    handleDoubleClick: function handleDoubleClick(event) {
+      if (this.computedEditable.add) {
+        var dataItem = this.createDataItemFromSlot();
+        this.setFormItem(dataItem, event);
+      }
+
+      this.$emit('doubleclick', event);
+    },
+    handleKeyDown: function handleKeyDown(event) {
+      var nextItem;
+
+      switch (event.event.keyCode) {
+        case Keys.left:
+          if (!this.bv.slots) {
+            return;
+          }
+
+          event.event.preventDefault();
+          this.dispatchFocusedSlots({
+            type: SLOTS_FOCUS_ACTION.left,
+            slot: this.slot
+          }, event.event);
+          break;
+
+        case Keys.right:
+          if (!this.bv.slots) {
+            return;
+          }
+
+          event.event.preventDefault();
+          this.dispatchFocusedSlots({
+            type: SLOTS_FOCUS_ACTION.right,
+            slot: this.slot
+          }, event.event);
+          break;
+
+        case Keys.up:
+          if (!this.bv.slots) {
+            return;
+          }
+
+          event.event.preventDefault();
+          this.dispatchFocusedSlots({
+            type: SLOTS_FOCUS_ACTION.up,
+            slot: this.slot
+          }, event.event);
+          break;
+
+        case Keys.down:
+          if (!this.bv.slots) {
+            return;
+          }
+
+          event.event.preventDefault();
+          this.dispatchFocusedSlots({
+            type: SLOTS_FOCUS_ACTION.down,
+            slot: this.slot
+          }, event.event);
+          break;
+
+        case Keys.enter:
+          if (!this.bv.slots || !this.computedEditable.add) {
+            return;
+          }
+
+          var dataItem = this.createDataItemFromSlot();
+          this.setFormItem(dataItem);
+          break;
+
+        case Keys.tab:
+          nextItem = findFirstItem(event.target);
+          break;
+
+        default:
+          break;
+      }
+
+      if (nextItem) {
+        event.event.preventDefault();
+
+        if (nextItem.element) {
+          nextItem.element.focus();
+        }
+      }
+    },
+    handleEditFormSubmit: function handleEditFormSubmit(event) {
+      this.$emit('dataaction', {
+        type: DATA_ACTION.create,
+        series: false,
+        dataItem: event.value
+      }, event);
+      this.setFormItem(null, event.event);
+    },
+    handleEditFormCancel: function handleEditFormCancel(event) {
+      this.setFormItem(null, event.event);
+    },
+    handleEditFormClose: function handleEditFormClose(event) {
+      this.setFormItem(null, event);
+    },
+    handleFormItemChange: function handleFormItemChange(value, event) {
+      if (!this.setFormItem) {
+        return;
+      }
+
+      this.setFormItem(value, event);
+    }
+  }
+};
+var SchedulerEditSlot = SchedulerEditSlotVue2;
+export { SchedulerEditSlot, SchedulerEditSlotVue2 };

package/dist/es/slots/SchedulerSlot.d.ts

@@ -0,0 +1,142 @@
+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 { Slot, SchedulerSlotMouseEvent, SchedulerSlotKeyboardEvent, SchedulerSlotFocusEvent, EditableProp } from '../models';
+/**
+ * Represents the props of the Kendo UI for Vue [SchedulerSlot]({% slug api_scheduler_schedulerslot %}) component.
+ */
+export interface SchedulerSlotProps extends Slot {
+    /** @hidden */
+    refTo: any;
+    /**
+     * Specifies the `id` of the wrapping element of the SchedulerSlot.
+     */
+    id?: string;
+    /**
+     * Specifies the `tabIndex` attribute of the wrapping element of the SchedulerSlot.
+     *
+     * Providing `null` will not apply any `tabIndex` to the element.
+     */
+    tabIndex?: number;
+    /**
+     * Specifies the `className` attribute of the wrapping element of the SchedulerSlot.
+     *
+     * The SchedulerSlot applies the following default className:
+     * - `k-scheduler-cell`
+     * - `k-slot-cell`
+     * - `k-nonwork-hour` - if either `props.isWorkHour` or `props.isWorkDay` is `false`
+     * - `k-state-selected` - if `props.selected` is set to `true`
+     */
+    className?: string;
+    /**
+     * Overrides the `editable` prop of the `Scheduler` and the active view.
+     */
+    editable?: EditableProp | boolean;
+    /**
+     * Specifies if the `day` of the SchedulerSlot(in the current timezone) is between the `workDayStart` and `workDayEnd` of the active view.
+     */
+    isWorkDay?: boolean;
+    /**
+     * Specifies if the `time` of the SchedulerSlot(in the current timezone) is between the `workDayStart` and `workDayEnd` of the active view.
+     */
+    isWorkHour?: boolean;
+    /**
+     * Sets the selected state of the SchedulerSlot. By default the `k-state-selected` className is added if `props.selected` is `true`.
+     */
+    selected?: boolean;
+    /**
+     * Sets the `row` in the context of the current active view.
+     * This property is being used to provide keyboard navigation between the SchedulerSlot components.
+     */
+    row: number;
+    /**
+     * Sets the `col` in the context of the current active view.
+     * This property is being used to provide keyboard navigation between the SchedulerSlot components.
+     */
+    col: number;
+    /**
+     * Called each time the element, or any of its child elements, receive focus.
+     */
+    onFocus?: (event: SchedulerSlotFocusEvent) => void;
+    /**
+     * Called each time the element, or any of its child elements, lose focus.
+     */
+    onBlur?: (event: SchedulerSlotFocusEvent) => void;
+    /**
+     * Called each time the element, or any of its child elements, is clicked.
+     */
+    onClick?: (event: SchedulerSlotMouseEvent) => void;
+    /**
+     * Called each time the element, or any of its child elements receives `mouseenter` event.
+     */
+    onMouseEnter?: (event: SchedulerSlotMouseEvent) => void;
+    /**
+     * Called each time the element, or any of its child elements receives `mouseleave` event.
+     */
+    onMouseLeave?: (event: SchedulerSlotMouseEvent) => void;
+    /**
+     * Called each time the element, or any of its child elements receives `mouseover` event.
+     */
+    onMouseOver?: (event: SchedulerSlotMouseEvent) => void;
+    /**
+     * Called each time the element, or any of its child elements receives `mouseout` event.
+     */
+    onMouseOut?: (event: SchedulerSlotMouseEvent) => void;
+    /**
+     * Called each time the element, or any of its child elements, is double-clicked.
+     */
+    onDoubleClick?: (event: SchedulerSlotMouseEvent) => void;
+    /**
+     * Called each time a `keydown` event propagates to the wrapping element.
+     */
+    onKeyDown?: (event: SchedulerSlotKeyboardEvent) => void;
+    /**
+     * Called each time a `keypress` event propagates to the wrapping element.
+     */
+    onKeyPress?: (event: SchedulerSlotKeyboardEvent) => void;
+    /**
+     * Called each time a `keyup` event propagates to the wrapping element.
+     */
+    onKeyUp?: (event: SchedulerSlotKeyboardEvent) => void;
+}
+/**
+ * Represents the object which is returned from the `ref` callback of the [SchedulerSlot]({% slug api_scheduler_schedulerslot %}).
+ *
+ * For more information about Refs, refer to the [React Refs & Dom](https://reactjs.org/docs/refs-and-the-dom.html) article.
+ */
+export interface SchedulerSlotHandle {
+    element: HTMLDivElement | null;
+    props: SchedulerSlotProps;
+}
+/**
+ * @hidden
+ */
+export interface SchedulerSlotState {
+}
+/**
+ * @hidden
+ */
+export interface SchedulerSlotComputed {
+    [key: string]: any;
+}
+/**
+ * @hidden
+ */
+export interface SchedulerSlotMethods {
+    [key: string]: any;
+}
+/**
+ * @hidden
+ */
+export interface SchedulerSlotData {
+}
+/**
+ * @hidden
+ */
+export interface SchedulerSlotAll extends Vue2type, SchedulerSlotMethods, SchedulerSlotData, SchedulerSlotComputed, SchedulerSlotState {
+}
+declare let SchedulerSlotVue2: ComponentOptions<SchedulerSlotAll, DefaultData<SchedulerSlotData>, DefaultMethods<SchedulerSlotAll>, SchedulerSlotComputed, RecordPropsDefinition<SchedulerSlotProps>>;
+declare const SchedulerSlot: DefineComponent<SchedulerSlotProps, any, SchedulerSlotData, SchedulerSlotComputed, SchedulerSlotMethods, {}, {}, {}, string, SchedulerSlotProps, SchedulerSlotProps, {}>;
+export { SchedulerSlot, SchedulerSlotVue2 };

package/dist/es/slots/SchedulerSlot.js

@@ -0,0 +1,218 @@
+// @ts-ignore
+import * as Vue from 'vue';
+var allVue = Vue;
+var gh = allVue.h;
+var inject = allVue.inject;
+import { getDefaultSlots } from '@progress/kendo-vue-common';
+import { COLLECTION_ACTION, formatEventTime } from '../utils';
+import { provideIntlService } from '@progress/kendo-vue-intl'; // tslint:enable:max-line-length
+
+var SchedulerSlotVue2 = {
+  name: 'KendoSchedulerSlot',
+  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,
+    isAllDay: Boolean
+  },
+  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-state-selected': this.$props.selected
+      };
+    },
+    slotLabel: function slotLabel() {
+      return "" + formatEventTime(this.intl, this.$props.zonedStart, this.$props.zonedEnd, this.$props.isAllDay || false);
+    }
+  },
+  inject: {
+    kendoIntlService: {
+      default: null
+    },
+    setSlots: {
+      default: null
+    }
+  },
+  created: function created() {
+    this.setSlots({
+      type: COLLECTION_ACTION.add,
+      item: this
+    });
+  },
+  destroyed: !!gh ? 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: !gh ? undefined : function () {
+    var v3 = !!gh;
+    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,
+        "doubleclick": 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,
+      onDoubleclick: 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
+    }, [defaultSlot]);
+  },
+  methods: {
+    handleFocus: function handleFocus(event) {
+      this.$emit('focus', {
+        event: event,
+        target: this.slot
+      });
+    },
+    handleBlur: function handleBlur(event) {
+      this.$emit('blur', {
+        event: event,
+        target: this.slot
+      });
+    },
+    handleClick: function handleClick(event) {
+      this.$emit('click', {
+        event: event,
+        target: this.slot
+      });
+    },
+    handleMouseOver: function handleMouseOver(event) {
+      this.$emit('mouseover', {
+        event: event,
+        target: this.slot
+      });
+    },
+    handleMouseOut: function handleMouseOut(event) {
+      this.$emit('mouseout', {
+        event: event,
+        target: this.slot
+      });
+    },
+    handleMouseEnter: function handleMouseEnter(event) {
+      this.$emit('mouseenter', {
+        event: event,
+        target: this.slot
+      });
+    },
+    handleMouseLeave: function handleMouseLeave(event) {
+      this.$emit('mouseleave', {
+        event: event,
+        target: this.slot
+      });
+    },
+    handleDoubleClick: function handleDoubleClick(event) {
+      this.$emit('doubleclick', {
+        event: event,
+        target: this.slot
+      });
+    },
+    handleKeyDown: function handleKeyDown(event) {
+      this.$emit('keydown', {
+        event: event,
+        target: this.slot
+      });
+    },
+    handleKeyPress: function handleKeyPress(event) {
+      this.$emit('keydown', {
+        event: event,
+        target: this.slot
+      });
+    },
+    handleKeyUp: function handleKeyUp(event) {
+      this.$emit('keyup', {
+        event: event,
+        target: this.slot
+      });
+    }
+  }
+};
+var SchedulerSlot = SchedulerSlotVue2;
+export { SchedulerSlot, SchedulerSlotVue2 };