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

package/dist/npm/items/SchedulerItem.d.ts

@@ -0,0 +1,219 @@
+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 { Item, SchedulerItemDragEvent, SchedulerItemFocusEvent, SchedulerItemMouseEvent, SchedulerItemKeyboardEvent, EditableProp } from '../models';
+/**
+ * Represents the props of the Kendo UI for Vue [SchedulerItem]({% slug api_scheduler_scheduleritem %}) component.
+ */
+export interface SchedulerItemProps extends Item {
+    /**
+     * Specifies the `id` of the wrapping element of the SchedulerItem.
+     */
+    id?: string;
+    /**
+     * Specifies the `tabIndex` attribute of the wrapping element of the SchedulerItem.
+     *
+     * Providing `null` will not apply any `tabIndex` to the element.
+     */
+    tabIndex?: number | null;
+    /**
+     * Specifies the `className` attribute of the wrapping element of the SchedulerItem.
+     *
+     * The SchedulerItem applies the following default className:
+     * - `k-event`
+     * - `k-state-selected` - if `props.selected` is set to `true`
+     * - `k-event-drag-hint` - if `props.dragHint` is set to `true`
+     * - `k-scheduler-marquee` - if `props.resizeHint` is set to `true`
+     * - `k-marquee`: if `props.resizeHint` is set to `true`
+     * - `k-first`: if `props.resizeHint` is set to `true` and `props.tail` is set to `false`
+     * - `k-last`: if `props.resizeHint` is set to `true` and `props.head` is set to `false`
+     */
+    className?: string;
+    /**
+     * Specifies the `style` object of the wrapping element of the SchedulerItem.
+     *
+     * The SchedulerItem applies the following default styles:
+     *  - `cursor`: `pointer`
+     *  - `userSelect`: `none`
+     *  - `borderColor`: `props.color`
+     *  - `borderColor`: `props.color`
+     *  - `pointerEvents`: `none` - if `props.dragHint` or `props.resizeHint` is set to `true`
+     */
+    itemStyle?: any;
+    /**
+     * Overrides the `editable` prop of the `Scheduler` and the active view.
+     */
+    editable?: EditableProp | boolean;
+    /**
+     * Sets the selected state of the SchedulerSlot. By default the `k-state-selected` className is added if `props.selected` is `true`.
+     */
+    selected?: boolean;
+    /**
+     * Specifies the orientation of the SchedulerItem.
+     */
+    vertical?: boolean;
+    /**
+     * Specifies if the current SchedulerItem is used as a DragHint.
+     */
+    dragHint?: boolean;
+    /**
+     * Specifies if the current SchedulerItem is used as a ResizeHint.
+     */
+    resizeHint?: boolean;
+    /**
+     * Specifies the `format` in which the `zonedStart` and `zonedEnd` properties are displayed.
+     *
+     * For more information, refer to the [formatDate]({% slug api_intl_intlservice %}#toc-formatdate) method of the [IntlService]({% slug overview_globalization %}).
+     */
+    format?: string;
+    /**
+     * Called each time the element, or any of its child elements, receive focus.
+     */
+    onFocus?: (event: SchedulerItemFocusEvent) => void;
+    /**
+     * Called each time the element, or any of its child elements, lose focus.
+     */
+    onBlur?: (event: SchedulerItemFocusEvent) => void;
+    /**
+     * Called each time the element, or any of its child elements resceives `mousedown` event.
+     */
+    onMouseDown?: (event: SchedulerItemMouseEvent) => void;
+    /**
+     * Called each time the element, or any of its child elements resceives `mouseup` event.
+     */
+    onMouseUp?: (event: SchedulerItemMouseEvent) => void;
+    /**
+     * Called each time the element, or any of its child elements, is clicked.
+     */
+    onClick?: (event: SchedulerItemMouseEvent) => void;
+    /**
+     * Called each time the element, or any of its child elements receives `mouseenter` event.
+     */
+    onMouseEnter?: (event: SchedulerItemMouseEvent) => void;
+    /**
+     * Called each time the element, or any of its child elements receives `mouseleave` event.
+     */
+    onMouseLeave?: (event: SchedulerItemMouseEvent) => void;
+    /**
+     * Called each time the element, or any of its child elements receives `mouseover` event.
+     */
+    onMouseOver?: (event: SchedulerItemMouseEvent) => void;
+    /**
+     * Called each time the element, or any of its child elements receives `mouseout` event.
+     */
+    onMouseOut?: (event: SchedulerItemMouseEvent) => void;
+    /**
+     * Called each time the element, or any of its child elements, is double-clicked.
+     */
+    onDoubleClick?: (event: SchedulerItemMouseEvent) => void;
+    /**
+     * Called when the `delete` icon is clicked.
+     *
+     * The `delete` icon is rendered only when `props.editable` or `props.editable.remove` is `true`
+     */
+    onRemoveClick?: (event: SchedulerItemMouseEvent) => void;
+    /**
+     * Called each time a `keydown` event propagates to the wrapping element.
+     */
+    onKeyDown?: (event: SchedulerItemKeyboardEvent) => void;
+    /**
+     * Called each time a `keypress` event propagates to the wrapping element.
+     */
+    onKeyPress?: (event: SchedulerItemKeyboardEvent) => void;
+    /**
+     * Called each time a `keyup` event propagates to the wrapping element.
+     */
+    onKeyUp?: (event: SchedulerItemKeyboardEvent) => void;
+    /**
+     * Called each time the element receives a `press` event.
+     *
+     * This event is used by the [`Drag & Drop`]({% slug editing_scheduler %}) functionality of the SchedulerItem.
+     * The SchedulerItem is using the [Kendo UI for VueDraggable]({% slug draggable_common %}) instead of the `onDragStart` callback.
+     */
+    onPress?: (event: SchedulerItemDragEvent) => void;
+    /**
+     * Called each time the element is dragged.
+     *
+     * This event is used by the [`Drag & Drop`]({% slug editing_scheduler %}) functionality of the SchedulerItem.
+     * The SchedulerItem is using the [Kendo UI for VueDraggable]({% slug draggable_common %}) instead of the `onDrag` callback.
+     */
+    onDrag?: (event: SchedulerItemDragEvent) => void;
+    /**
+     * Called when the dragged element is being `released`.
+     *
+     * This event is used by the [`Drag & Drop`]({% slug editing_scheduler %}) functionality of the SchedulerItem.
+     * The SchedulerItem is using the [Kendo UI for VueDraggable]({% slug draggable_common %}) instead of the `onDragEnd` callback.
+     */
+    onRelease?: (event: SchedulerItemDragEvent) => void;
+    /**
+     * Called each time the any of the resize handlers receives a `press` event.
+     *
+     * This event is used by the [`Resize`]({% slug editing_scheduler %}) functionality of the SchedulerItem.
+     * The SchedulerItem is using the [Kendo UI for VueDraggable]({% slug draggable_common %}) instead of the `onDragStart` callback.
+     */
+    onResizePress?: (event: SchedulerItemDragEvent) => void;
+    /**
+     * Called each time the the resize handler responsible for the item `start` is being dragged.
+     *
+     * This event is used by the [`Resize`]({% slug editing_scheduler %}) functionality of the SchedulerItem.
+     * The SchedulerItem is using the [Kendo UI for VueDraggable]({% slug draggable_common %}) instead of the `onDrag` callback.
+     */
+    onResizeStartDrag?: (event: SchedulerItemDragEvent) => void;
+    /**
+     * Called each time the the resize handler responsible for the item `end` is being dragged.
+     *
+     * This event is used by the [`Resize`]({% slug editing_scheduler %}) functionality of the SchedulerItem.
+     * The SchedulerItem is using the [Kendo UI for VueDraggable]({% slug draggable_common %}) instead of the `onDrag` callback.
+     */
+    onResizeEndDrag?: (event: SchedulerItemDragEvent) => void;
+    /**
+     * Called when the dragged resize handler is being `released`
+     *
+     * This event is used by the [`Resize`]({% slug editing_scheduler %}) functionality of the SchedulerItem.
+     * The SchedulerItem is using the [Kendo UI for VueDraggable]({% slug draggable_common %}) instead of the `onDragEnd` callback.
+     */
+    onResizeRelease?: (event: SchedulerItemDragEvent) => void;
+    /** @hidden */
+    maxSiblingsPerSlot?: number;
+}
+/**
+ * Represents the object which is returned from the `ref` callback of the [SchedulerItem]({% slug api_scheduler_scheduleritem %}).
+ *
+ * For more information about Refs, refer to the [React Refs & Dom](https://reactjs.org/docs/refs-and-the-dom.html) article.
+ */
+export interface SchedulerItemHandle {
+    element: HTMLDivElement | null;
+    props: SchedulerItemProps;
+}
+/**
+ * @hidden
+ */
+export interface SchedulerItemState {
+}
+/**
+ * @hidden
+ */
+export interface SchedulerItemComputed {
+    [key: string]: any;
+}
+/**
+ * @hidden
+ */
+export interface SchedulerItemMethods {
+    [key: string]: any;
+}
+/**
+ * @hidden
+ */
+export interface SchedulerItemData {
+}
+/**
+ * @hidden
+ */
+export interface SchedulerItemAll extends Vue2type, SchedulerItemMethods, SchedulerItemData, SchedulerItemComputed, SchedulerItemState {
+}
+declare let SchedulerItemVue2: ComponentOptions<SchedulerItemAll, DefaultData<SchedulerItemData>, DefaultMethods<SchedulerItemAll>, SchedulerItemComputed, RecordPropsDefinition<SchedulerItemProps>>;
+declare const SchedulerItem: DefineComponent<SchedulerItemProps, any, SchedulerItemData, SchedulerItemComputed, SchedulerItemMethods, {}, {}, {}, string, SchedulerItemProps, SchedulerItemProps, {}>;
+export { SchedulerItem, SchedulerItemVue2 };

package/dist/npm/items/SchedulerItem.js

@@ -0,0 +1,459 @@
+"use strict";
+
+var __assign = undefined && undefined.__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);
+};
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.SchedulerItemVue2 = exports.SchedulerItem = void 0; // @ts-ignore
+
+var Vue = require("vue");
+
+var allVue = Vue;
+var gh = allVue.h;
+var inject = allVue.inject;
+
+var utils_1 = require("../utils");
+
+var kendo_vue_common_1 = require("@progress/kendo-vue-common");
+
+var kendo_vue_intl_1 = require("@progress/kendo-vue-intl");
+
+var messages_1 = require("../messages");
+
+var hooks_1 = require("../hooks");
+
+var utils_2 = require("../utils"); // tslint:enable:max-line-length
+
+
+var SchedulerItemVue2 = {
+  name: 'KendoSchedulerItem',
+  // @ts-ignore
+  emits: {
+    'focus': null,
+    'blur': null,
+    'mousedown': null,
+    'mouseup': null,
+    'mouseover': null,
+    'mouseout': null,
+    'mouseenter': null,
+    'mouseleave': null,
+    'click': null,
+    'doubleclick': null,
+    'removeclick': null,
+    'keydown': null,
+    'keypress': null,
+    'keyup': null,
+    'press': null,
+    'drag': null,
+    'release': null,
+    'resizepress': null,
+    'resizestartdrag': null,
+    'resizeenddrag': null,
+    'resizeenrelease': null
+  },
+  props: {
+    uid: [String, Number],
+    start: Date,
+    end: Date,
+    originalStart: Date,
+    startTimezone: String,
+    endTimezone: String,
+    isAllDay: Boolean,
+    title: String,
+    description: String,
+    occurrenceId: String,
+    recurrenceExceptions: Array,
+    recurrenceRule: String,
+    recurrenceId: [String, Number],
+    dataItem: Object,
+    head: Boolean,
+    tail: Boolean,
+    order: Number,
+    zonedStart: Object,
+    zonedEnd: Object,
+    slots: Array,
+    group: Object,
+    range: Object,
+    isException: Boolean,
+    isRecurring: Boolean,
+    id: String,
+    tabIndex: Number,
+    className: String,
+    itemStyle: Object,
+    editable: [Object, Boolean],
+    selected: Boolean,
+    vertical: Boolean,
+    dragHint: Boolean,
+    resizeHint: Boolean,
+    format: String,
+    maxSiblingsPerSlot: Number
+  },
+  data: function data() {
+    return {
+      resizeEast: null,
+      resizeWest: null,
+      resizeNorth: null,
+      resizeSouth: null
+    };
+  },
+  inject: {
+    kendoLocalizationService: {
+      default: null
+    },
+    kendoIntlService: {
+      default: null
+    },
+    setItems: {
+      default: null
+    }
+  },
+  computed: {
+    resource: function resource() {
+      return this.$props.group.resources.find(function (r) {
+        return Boolean(r.colorField && r[r.colorField] !== '' && r[r.colorField] !== undefined);
+      });
+    },
+    color: function color() {
+      return this.resource && this.resource.colorField && this.resource[this.resource.colorField];
+    },
+    currentTabIndex: function currentTabIndex() {
+      return this.$props.tabIndex !== undefined ? this.$props.tabIndex === null ? undefined : this.$props.tabIndex : this.$props.selected ? 0 : -1;
+    },
+    itemClassName: function itemClassName() {
+      var _a;
+
+      return _a = {
+        'k-event': !this.$props.resizeHint,
+        'k-state-selected': this.$props.selected && this.editable.select,
+        'k-event-drag-hint': this.$props.dragHint,
+        'k-scheduler-marquee': this.$props.resizeHint,
+        'k-marquee': this.$props.resizeHint,
+        'k-first': this.$props.resizeHint && !this.$props.tail,
+        'k-last': this.$props.resizeHint && !this.$props.head
+      }, _a[this.$props.className] = this.$props.className, _a;
+    },
+    eventLabel: function eventLabel() {
+      return utils_2.formatEventTime(this.intl, this.$props.zonedStart, this.$props.zonedEnd, this.$props.isAllDay) + ", " + this.$props.title;
+    },
+    computedStyle: function computedStyle() {
+      return __assign({
+        cursor: 'pointer',
+        userSelect: 'none',
+        borderColor: !this.$props.resizeHint ? this.color : undefined,
+        backgroundColor: !this.$props.resizeHint ? this.color : undefined,
+        touchAction: 'none'
+      }, this.$props.itemStyle);
+    }
+  },
+  created: function created() {
+    this.setItems({
+      type: utils_1.COLLECTION_ACTION.add,
+      item: this
+    });
+  },
+  destroyed: !!gh ? undefined : function () {
+    this.setItems({
+      type: utils_1.COLLECTION_ACTION.remove,
+      item: this
+    });
+  },
+  // @ts-ignore
+  unmounted: function unmounted() {
+    this.setItems({
+      type: utils_1.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;
+    var defaultSlot = kendo_vue_common_1.getDefaultSlots(this); //   const { item, element } =  useSchedulerItem(this.$props, this.$el);
+
+    var editable = hooks_1.useEditable(this.$props.editable);
+    this.intl = kendo_vue_intl_1.provideIntlService(this);
+    var localization = kendo_vue_intl_1.provideLocalizationService(this);
+    var deleteMessage = localization.toLanguageString(messages_1.deleteTitle, messages_1.messages[messages_1.deleteTitle]); // Handlers
+    // Effects
+    // // Drag Effects
+    // useDraggable(element, {
+    //     onPress: this.handlePress,
+    //     onDrag: this.handleDrag,
+    //     onRelease: this.handleRelease
+    // });
+    // // Resize Effects
+    // useDraggable(this.resizeEast, {
+    //     onPress: this.handleResizePress,
+    //     onDrag: this.handleResizeEndDrag,
+    //     onRelease: this.handleResizeRelease
+    // });
+    // useDraggable(this.resizeWest, {
+    //     onPress: this.handleResizePress,
+    //     onDrag: this.handleResizeStartDrag,
+    //     onRelease: this.handleResizeRelease
+    // });
+    // useDraggable(this.resizeNorth, {
+    //     onPress: this.handleResizePress,
+    //     onDrag: this.handleResizeStartDrag,
+    //     onRelease: this.handleResizeRelease
+    // });
+    // useDraggable(this.resizeSouth, {
+    //     onPress: this.handleResizePress,
+    //     onDrag: this.handleResizeEndDrag,
+    //     onRelease: this.handleResizeRelease
+    // });
+
+    return h("div", {
+      id: this.$props.id,
+      attrs: this.v3 ? undefined : {
+        id: this.$props.id,
+        tabIndex: this.currentTabIndex,
+        // Aria
+        "aria-label": this.eventLabel,
+        "aria-selected": this.$props.selected // Focus
+        ,
+        "data-group-index": this.$props.group.index,
+        "data-range-index": this.$props.range.index
+      },
+      style: this.computedStyle,
+      tabIndex: this.currentTabIndex,
+      "class": this.itemClassName,
+      "aria-label": this.eventLabel,
+      "aria-selected": this.$props.selected,
+      onFocus: this.handleFocus,
+      on: this.v3 ? undefined : {
+        "focus": this.handleFocus,
+        "blur": this.handleBlur,
+        "mouseup": this.handleMouseUp,
+        "mousedown": this.handleMouseDown,
+        "click": this.handleClick,
+        "mouseover": this.handleMouseOver,
+        "mouseout": this.handleMouseOut,
+        "mouseenter": this.handleMouseEnter,
+        "mouseleave": this.handleMouseLeave,
+        "doubleclick": this.handleDoubleClick,
+        "keydown": this.handleKeyDown,
+        "keypress": this.handleKeyPress,
+        "keyup": this.handleKeyUp
+      },
+      onBlur: this.handleBlur // Mouse
+      ,
+      onMouseup: this.handleMouseUp,
+      onMousedown: this.handleMouseDown,
+      onClick: this.handleClick,
+      onMouseover: this.handleMouseOver,
+      onMouseout: this.handleMouseOut,
+      onMouseenter: this.handleMouseEnter,
+      onMouseleave: this.handleMouseLeave,
+      onDoubleclick: this.handleDoubleClick // Keyboard
+      ,
+      onKeydown: this.handleKeyDown,
+      onKeypress: this.handleKeyPress,
+      onKeyup: this.handleKeyUp,
+      "data-group-index": this.$props.group.index,
+      "data-range-index": this.$props.range.index
+    }, [defaultSlot, !this.$props.resizeHint && h("span", {
+      "class": "k-event-actions"
+    }, [editable.remove && h("a", {
+      tabIndex: -1,
+      attrs: this.v3 ? undefined : {
+        tabIndex: -1,
+        "aria-hidden": "true",
+        title: deleteMessage,
+        "aria-label": deleteMessage
+      },
+      "aria-hidden": "true",
+      "class": "k-link k-event-delete",
+      title: deleteMessage,
+      "aria-label": deleteMessage,
+      onClick: this.handleRemoveClick,
+      on: this.v3 ? undefined : {
+        "click": this.handleRemoveClick
+      }
+    }, [h("span", {
+      "class": "k-icon k-i-close"
+    })]), this.$props.head && h("span", {
+      "class": "k-icon k-i-arrow-60-right"
+    })]), editable.resize && this.$props.vertical && [h("span", {
+      "class": "k-resize-handle k-resize-n",
+      ref: this.resizeNorth
+    }), h("span", {
+      "class": "k-resize-handle k-resize-s",
+      ref: this.resizeSouth
+    })], editable.resize && !this.$props.vertical && [h("span", {
+      "class": "k-resize-handle k-resize-w",
+      ref: this.resizeWest
+    }), h("span", {
+      "class": "k-resize-handle k-resize-e",
+      ref: this.resizeEast
+    })], this.$props.resizeHint && [h("div", {
+      "class": "k-marquee-color",
+      style: {
+        borderColor: this.color,
+        backgroundColor: this.color
+      }
+    }), h("div", {
+      "class": "k-marquee-text"
+    }, [!this.$props.tail && h("div", {
+      "class": "k-label-top"
+    }, [this.intl.formatDate(this.$props.zonedStart, this.$props.format)]), !this.$props.head && h("div", {
+      "class": "k-label-bottom"
+    }, [this.intl.formatDate(this.$props.zonedEnd, this.$props.format)])])]]);
+  },
+  methods: {
+    // Focus Handlers
+    handleFocus: function handleFocus(event) {
+      this.$emit('focus', {
+        event: event,
+        target: this.item
+      });
+    },
+    handleBlur: function handleBlur(event) {
+      this.$emit('blur', {
+        event: event,
+        target: this.item
+      });
+    },
+    // Mouse Handlers
+    handleMouseDown: function handleMouseDown(event) {
+      this.$emit('mousedown', {
+        event: event,
+        target: this.item
+      });
+    },
+    handleClick: function handleClick(event) {
+      this.$emit('click', {
+        event: event,
+        target: this.item
+      });
+    },
+    handleMouseUp: function handleMouseUp(event) {
+      this.$emit('mouseup', {
+        event: event,
+        target: this.item
+      });
+    },
+    handleMouseOver: function handleMouseOver(event) {
+      this.$emit('mouseover', {
+        event: event,
+        target: this.item
+      });
+    },
+    handleMouseOut: function handleMouseOut(event) {
+      this.$emit('mouseout', {
+        event: event,
+        target: this.item
+      });
+    },
+    handleMouseEnter: function handleMouseEnter(event) {
+      this.$emit('mouseenter', {
+        event: event,
+        target: this.item
+      });
+    },
+    handleMouseLeave: function handleMouseLeave(event) {
+      this.$emit('mouseleave', {
+        event: event,
+        target: this.item
+      });
+    },
+    handleDoubleClick: function handleDoubleClick(event) {
+      this.$emit('doubleclick', {
+        event: event,
+        target: this.item
+      });
+    },
+    handleRemoveClick: function handleRemoveClick(event) {
+      this.$emit('removeclick', {
+        event: event,
+        target: this.item
+      });
+    },
+    // Keyboard Handlers
+    handleKeyDown: function handleKeyDown(event) {
+      this.$emit('keydown', {
+        event: event,
+        target: this.item
+      });
+    },
+    handleKeyPress: function handleKeyPress(event) {
+      this.$emit('keypress', {
+        event: event,
+        target: this.item
+      });
+    },
+    handleKeyUp: function handleKeyUp(event) {
+      this.$emit('keyup', {
+        event: event,
+        target: this.item
+      });
+    },
+    // Drag Handlers
+    handlePress: function handlePress(dragEvent) {
+      this.$emit('press', {
+        dragEvent: dragEvent,
+        target: this.item
+      });
+    },
+    handleDrag: function handleDrag(dragEvent) {
+      this.$emit('drag', {
+        dragEvent: dragEvent,
+        target: this.item
+      });
+    },
+    handleRelease: function handleRelease(dragEvent) {
+      this.$emit('release', {
+        dragEvent: dragEvent,
+        target: this.item
+      });
+    },
+    handleResizePress: function handleResizePress(dragEvent) {
+      this.$emit('resizepress', {
+        dragEvent: dragEvent,
+        target: this.item
+      });
+    },
+    handleResizeStartDrag: function handleResizeStartDrag(dragEvent) {
+      this.$emit('resizestartdrag', {
+        dragEvent: dragEvent,
+        target: this.item
+      });
+    },
+    handleResizeEndDrag: function handleResizeEndDrag(dragEvent) {
+      this.$emit('resizeenddrag', {
+        dragEvent: dragEvent,
+        target: this.item
+      });
+    },
+    handleResizeRelease: function handleResizeRelease(dragEvent) {
+      this.$emit('resizerelease', {
+        dragEvent: dragEvent,
+        target: this.item
+      });
+    }
+  }
+};
+exports.SchedulerItemVue2 = SchedulerItemVue2;
+var SchedulerItem = SchedulerItemVue2;
+exports.SchedulerItem = SchedulerItem;