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

package/dist/esm/slots/SchedulerEditSlot.js

@@ -0,0 +1,375 @@
+// @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, getTemplate, Keys } from '@progress/kendo-vue-common';
+import { DATA_ACTION } from '../Scheduler.js';
+import { setField, getField, findFirstItem, isGroupped, compareSlots, findCurrentItem, getSortedSlots } from '../utils.js';
+import { SchedulerViewSlot } from './SchedulerViewSlot.js';
+import { ITEMS_FOCUS_ACTION, SLOTS_FOCUS_ACTION, useEditable } from '../hooks.js';
+import { SLOTS_SELECT_ACTION } from '../hooks/use-slots-selection.js';
+import { ITEMS_SELECT_ACTION } from '../main.js';
+/**
+ * @hidden
+ */
+
+var SchedulerEditSlotVue2 = {
+  name: 'KendoSchedulerEditSlot',
+  props: {
+    tabIndex: {
+      type: Number,
+      default: undefined
+    },
+    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],
+    slotRender: [String, Function, Object],
+    viewSlot: [String, Function, Object],
+    navDay: Boolean,
+    editable: [Object, Boolean],
+    itemsPerSlot: Number
+  },
+  created: function created() {
+    this.slot = null;
+    this.editableSlot = null;
+  },
+  provide: function provide() {
+    return {
+      ksEditFormSubmit: this.handleEditFormSubmit,
+      ksEditFormCancel: this.handleEditFormCancel,
+      ksEditFormClose: this.handleEditFormClose
+    };
+  },
+  inject: {
+    bv: {
+      default: null
+    },
+    ks: {
+      default: null
+    },
+    dispatchSelectedItems: {
+      default: null
+    },
+    dispatchFocusedItems: {
+      default: null
+    },
+    dispatchFocusedSlots: {
+      default: null
+    },
+    dispatchSelectedSlots: {
+      default: null
+    }
+  },
+  data: function data() {
+    return {
+      currentFormItem: null
+    };
+  },
+  computed: {
+    currentTabIndex: function currentTabIndex() {
+      var isFirst = this.bv.slots.length && compareSlots(this.bv.slots[0], this);
+      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);
+    },
+    compFormItem: function compFormItem() {
+      return this.formItem !== undefined ? this.formItem : this.currentFormItem;
+    }
+  },
+  // @ts-ignore
+  setup: !isV3 ? undefined : function () {
+    var v3 = !!isV3;
+    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,
+        navDay = _a.navDay,
+        itemsPerSlot = _a.itemsPerSlot;
+    var selected = this.bv.selectedSlots.some(function (s) {
+      return compareSlots(s, _this);
+    });
+    var editSlotRender;
+    var editSlotRenderDefaultRendering = // @ts-ignore  function children
+    h(SchedulerViewSlot, {
+      slotRender: this.$props.slotRender,
+      attrs: this.v3 ? undefined : {
+        slotRender: this.$props.slotRender,
+        viewSlot: this.$props.viewSlot,
+        isAllDay: this.isAllDay,
+        expandable: this.expandable,
+        editable: this.editable,
+        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,
+        navDay: navDay,
+        itemsPerSlot: itemsPerSlot,
+        tabIndex: this.currentTabIndex,
+        formItem: this.compFormItem // Focus
+
+      },
+      viewSlot: this.$props.viewSlot,
+      isAllDay: this.isAllDay,
+      expandable: this.expandable,
+      editable: this.editable,
+      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,
+      navDay: navDay,
+      itemsPerSlot: itemsPerSlot,
+      tabIndex: this.currentTabIndex,
+      formItem: this.compFormItem,
+      onFocus: this.handleFocus // Mouse
+      ,
+      on: this.v3 ? undefined : {
+        "focus": this.handleFocus,
+        "doubleclick": this.handleDoubleClick,
+        "keydown": this.handleKeyDown,
+        "showmoreitems": this.handleShowMoreItemsClick
+      },
+      onDoubleclick: this.handleDoubleClick // Keyboard
+      ,
+      onKeydown: this.handleKeyDown,
+      onShowmoreitems: this.handleShowMoreItemsClick
+    }, this.v3 ? function () {
+      return [defaultSlot];
+    } : [defaultSlot]);
+    editSlotRender = getTemplate.call(this, {
+      h: h,
+      template: this.$props.viewSlot,
+      defaultRendering: editSlotRenderDefaultRendering,
+      defaultSlots: defaultSlot,
+      additionalListeners: {
+        focus: this.handleFocus,
+        doubleclick: this.handleDoubleClick,
+        keydown: this.handleKeyDown,
+        showmoreitems: this.handleShowMoreItemsClick
+      }
+    });
+    return editSlotRender;
+  },
+  methods: {
+    handleShowMoreItemsClick: function handleShowMoreItemsClick(event) {
+      this.$emit('showmoreitems', event);
+    },
+    createDataItemFromSlot: function createDataItemFromSlot() {
+      var dataItem = {};
+      setField(dataItem, this.ks.fields.start, new Date(this.$props.start.getTime()));
+      setField(dataItem, this.ks.fields.end, new Date(this.$props.end.getTime()));
+      setField(dataItem, this.ks.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.dispatchSelectedSlots({
+          type: SLOTS_SELECT_ACTION.select,
+          slot: this
+        }, 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
+          }, event.event);
+          break;
+
+        case Keys.right:
+          if (!this.bv.slots) {
+            return;
+          }
+
+          event.event.preventDefault();
+          this.dispatchFocusedSlots({
+            type: SLOTS_FOCUS_ACTION.right,
+            slot: this
+          }, event.event);
+          break;
+
+        case Keys.up:
+          if (!this.bv.slots) {
+            return;
+          }
+
+          event.event.preventDefault();
+          this.dispatchFocusedSlots({
+            type: SLOTS_FOCUS_ACTION.up,
+            slot: this
+          }, event.event);
+          break;
+
+        case Keys.down:
+          if (!this.bv.slots) {
+            return;
+          }
+
+          event.event.preventDefault();
+          this.dispatchFocusedSlots({
+            type: SLOTS_FOCUS_ACTION.down,
+            slot: this
+          }, 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:
+          var fi = findFirstItem(event.target);
+          nextItem = fi ? findCurrentItem(fi, this.bv.items, false) : getSortedSlots(this.bv.items, this.ignoreIsAllDay)[0];
+          this.dispatchFocusedItems({
+            type: ITEMS_FOCUS_ACTION.current,
+            item: nextItem
+          }, event.event);
+          this.dispatchSelectedItems({
+            type: ITEMS_SELECT_ACTION.select,
+            item: nextItem
+          }, event);
+          break;
+
+        default:
+          break;
+      }
+
+      if (nextItem) {
+        event.event.preventDefault();
+      }
+    },
+    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);
+    },
+    setFormItem: function setFormItem(dataItem, event) {
+      this.currentFormItem = dataItem;
+      this.$emit('formitemchange', event);
+    }
+  }
+};
+/**
+ * @hidden
+ */
+
+var SchedulerEditSlot = SchedulerEditSlotVue2;
+export { SchedulerEditSlot, SchedulerEditSlotVue2 };

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

@@ -0,0 +1,144 @@
+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_schedulerslotprops %}) component.
+ */
+export interface SchedulerSlotProps extends Slot {
+    /** @hidden */
+    refTo: any;
+    /** @hidden */
+    navDay?: boolean;
+    /** @hidden */
+    itemsPerSlot?: number;
+    /** @hidden */
+    formItem?: object;
+    /** @hidden */
+    viewSlot?: any;
+    /** @hidden */
+    slotStyle?: 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;
+    /**
+     * 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-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;
+}
+/** @hidden */
+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 {
+}
+/**
+ * @hidden
+ */
+declare let SchedulerSlotVue2: ComponentOptions<SchedulerSlotAll, DefaultData<SchedulerSlotData>, DefaultMethods<SchedulerSlotAll>, SchedulerSlotComputed, RecordPropsDefinition<SchedulerSlotProps>>;
+/**
+ * @hidden
+ */
+declare const SchedulerSlot: DefineComponent<SchedulerSlotProps, any, SchedulerSlotData, SchedulerSlotComputed, SchedulerSlotMethods, {}, {}, {}, string, SchedulerSlotProps, SchedulerSlotProps, {}>;
+export { SchedulerSlot, SchedulerSlotVue2 };