@progress/kendo-vue-scheduler 3.2.10 → 3.3.0-dev.202205091534

package/dist/es/Scheduler.js

@@ -49,6 +49,7 @@ import { validatePackage } from '@progress/kendo-vue-common';
 import { packageMetadata } from './package-metadata';
 import { AgendaView, MonthView, WeekView, WorkWeekView } from './main';
 import { TimelineView } from './views/time/TimelineView';
+import { useEditable } from './hooks';
 var DEFAULT_DATE_FORMAT = '{0:D}';
 var DEFAULT_SHORT_DATE_FORMAT = '{0:d}';
 /**
@@ -142,6 +143,9 @@ var SchedulerVue2 = {
     },
     fields: function fields() {
       return getModelFields(this.$props.modelFields).fields;
+    },
+    currentEditable: function currentEditable() {
+      return useEditable(this.$props.editable);
     }
   },
   provide: function provide() {
@@ -174,8 +178,8 @@ var SchedulerVue2 = {
       date: currentDate,
       timezone: this.$props.timezone,
       numberOfDays: this.getViewPropValue(view, 'numberOfDays', activeViewName),
-      workWeekStart: view.workWeekStart || this.intl.firstDay(),
-      workWeekEnd: view.workWeekEnd || (this.intl.firstDay() + this.getViewPropValue(view, 'numberOfDays', activeViewName)) % 6
+      workWeekStart: this.getViewPropValue(view, 'workWeekStart', activeViewName) || this.intl.firstDay(),
+      workWeekEnd: this.getViewPropValue(view, 'workWeekEnd', activeViewName) || (this.intl.firstDay() + this.getViewPropValue(view, 'numberOfDays', activeViewName)) % 6
     });
     return {
       ks: {
@@ -197,9 +201,6 @@ var SchedulerVue2 = {
       }
     };
   },
-  mounted: function mounted() {
-    this.ks.scheduler = this.$el;
-  },
   watch: {
     view: function view(newName) {
       this.updatePassedState(newName);
@@ -260,7 +261,8 @@ var SchedulerVue2 = {
       viewItem: viewItem,
       task: task,
       dateHeaderCell: dateHeaderCell,
-      timeHeaderCell: timeHeaderCell
+      timeHeaderCell: timeHeaderCell,
+      editable: this.currentEditable
     });
 
     var headerRender;
@@ -554,12 +556,12 @@ var SchedulerVue2 = {
       this.$emit('viewchange', __assign(__assign({
         viewName: newView
       }, event), {
-        target: this.ks.scheduler
+        target: this.ks.scheduler.$el
       }));
     },
     handleDateChange: function handleDateChange(newDate, event) {
       this.setDate(newDate, __assign(__assign({}, event), {
-        target: this.ks.scheduler
+        target: this.ks.scheduler.$el
       }));
     },
     handleDatePickerChange: function handleDatePickerChange(event) {
@@ -568,7 +570,7 @@ var SchedulerVue2 = {
       }
 
       this.setDate(event.value, __assign(__assign({}, event), {
-        target: this.ks.scheduler,
+        target: this.ks.scheduler.$el,
         nativeEvent: event.event
       }));
     },

package/dist/es/components/SchedulerForm.d.ts

@@ -40,6 +40,7 @@ export interface SchedulerFormHandle {
  * @hidden
  */
 export interface SchedulerFormState {
+    dialogId: string;
 }
 /**
  * @hidden

package/dist/es/components/SchedulerForm.js

@@ -26,7 +26,7 @@ import { provideLocalizationService } from '@progress/kendo-vue-intl';
 import { SchedulerFormEditor } from '../editors/SchedulerFormEditor'; // import { useSchedulerFieldsContext } from '../context';
 
 import { messages, editorValidationRequired, editorValidationStart, editorValidationEnd, editorSave, editorCancel, editorTitle } from '../messages';
-import { getTemplate } from '@progress/kendo-vue-common'; // tslint:enable:max-line-length
+import { getTemplate, guid } from '@progress/kendo-vue-common'; // tslint:enable:max-line-length
 
 var SchedulerFormVue2 = {
   name: 'KendoSchedulerForm',
@@ -53,6 +53,19 @@ var SchedulerFormVue2 = {
       default: null
     }
   },
+  created: function created() {
+    this.dialogId = guid();
+  },
+  mounted: function mounted() {
+    var that = this;
+    setTimeout(function () {
+      var dialogWrapper = document.getElementById(that.dialogId);
+
+      if (dialogWrapper) {
+        dialogWrapper.focus();
+      }
+    }, 10);
+  },
   // @ts-ignore
   setup: !gh ? undefined : function () {
     var v3 = !!gh;
@@ -119,7 +132,8 @@ var SchedulerFormVue2 = {
     var dialogProps = __assign({
       title: editorTitleMessage,
       appendTo: 'body',
-      minWidth: 600
+      minWidth: 600,
+      wrapperId: this.dialogId
     }, this.ks.dialogProps);
 
     var formProps = __assign({

package/dist/es/components/SchedulerOccurrenceDialog.js

@@ -6,6 +6,7 @@ var inject = allVue.inject;
 import { Dialog, DialogActionsBar } from '@progress/kendo-vue-dialogs';
 import { provideLocalizationService } from '@progress/kendo-vue-intl';
 import { messages, editorOccurrence, editorSeries, editorRecurringConfirmation, editorRecurringDialogTitle, deleteOccurrence, deleteSeries, deleteRecurringDialogTitle, deleteRecurringConfirmation } from '../messages';
+import { guid } from '@progress/kendo-vue-common';
 import { Button } from '@progress/kendo-vue-buttons'; // tslint:enable:max-line-length
 
 var SchedulerOccurrenceDialogVue2 = {
@@ -19,6 +20,19 @@ var SchedulerOccurrenceDialogVue2 = {
       default: null
     }
   },
+  created: function created() {
+    this.dialogId = guid();
+  },
+  mounted: function mounted() {
+    var that = this;
+    setTimeout(function () {
+      var dialogWrapper = document.getElementById(that.dialogId);
+
+      if (dialogWrapper) {
+        dialogWrapper.focus();
+      }
+    }, 10);
+  },
   // @ts-ignore
   setup: !gh ? undefined : function () {
     var v3 = !!gh;
@@ -57,9 +71,11 @@ var SchedulerOccurrenceDialogVue2 = {
         title: titleMessage,
         attrs: this.v3 ? undefined : {
           title: titleMessage,
-          appendTo: 'body'
+          appendTo: 'body',
+          wrapperId: this.dialogId
         },
         appendTo: 'body',
+        wrapperId: this.dialogId,
         onClose: this.handleClose,
         on: this.v3 ? undefined : {
           "close": this.handleClose

package/dist/es/components/SchedulerRemoveDialog.js

@@ -6,7 +6,8 @@ var inject = allVue.inject;
 import { DialogActionsBar, Dialog } from '@progress/kendo-vue-dialogs';
 import { provideLocalizationService } from '@progress/kendo-vue-intl';
 import { messages, editorCancel, deleteConfirmation, editorDelete, deleteDialogTitle } from '../messages';
-import { Button } from '@progress/kendo-vue-buttons'; // tslint:enable:max-line-length
+import { Button } from '@progress/kendo-vue-buttons';
+import { guid } from '@progress/kendo-vue-common'; // tslint:enable:max-line-length
 
 var SchedulerRemoveDialogVue2 = {
   name: 'KendoSchedulerRemoveDialog',
@@ -18,6 +19,19 @@ var SchedulerRemoveDialogVue2 = {
       default: null
     }
   },
+  created: function created() {
+    this.dialogId = guid();
+  },
+  mounted: function mounted() {
+    var that = this;
+    setTimeout(function () {
+      var dialogWrapper = document.getElementById(that.dialogId);
+
+      if (dialogWrapper) {
+        dialogWrapper.focus();
+      }
+    }, 10);
+  },
   // @ts-ignore
   setup: !gh ? undefined : function () {
     var v3 = !!gh;
@@ -42,9 +56,11 @@ var SchedulerRemoveDialogVue2 = {
         title: deleteDialogTitleMessage,
         attrs: this.v3 ? undefined : {
           title: deleteDialogTitleMessage,
-          appendTo: 'body'
+          appendTo: 'body',
+          wrapperId: this.dialogId
         },
         appendTo: 'body',
+        wrapperId: this.dialogId,
         onClose: this.handleClose,
         on: this.v3 ? undefined : {
           "close": this.handleClose

package/dist/es/editors/ZonedDateTime.js

@@ -37,6 +37,10 @@ import { ZonedDate, toLocalDate } from '@progress/kendo-date-math'; // tslint:en
 
 var ZonedDateTimeVue2 = {
   name: 'KendoZonedDateTime',
+  // @ts-ignore
+  emits: {
+    change: null
+  },
   props: __assign(__assign({}, DateTimePicker.props), {
     value: [String, Date],
     isAllDay: Boolean,
@@ -65,7 +69,7 @@ var ZonedDateTimeVue2 = {
     var timezone = this.ks.timezone;
 
     var dtpProps = __assign(__assign({}, other), {
-      format: this.isAllDay ? 'd' : 'M/dd/yyyy HH:mm',
+      format: this.isAllDay ? 'd' : 'g',
       value: this.readDateAsLocal(other.value, timezone)
     });
 

package/dist/es/hooks/use-items-focus.d.ts

@@ -7,6 +7,7 @@ import { BaseViewAll } from '../components/BaseView';
  * - `ITEMS_FOCUS_PREV`
  */
 export declare enum ITEMS_FOCUS_ACTION {
+    current = "ITEMS_FOCUS_CURRENT",
     next = "ITEMS_FOCUS_NEXT",
     prev = "ITEMS_FOCUS_PREV"
 }

package/dist/es/hooks/use-items-focus.js

@@ -1,4 +1,4 @@
-import { findNextItem } from '../utils';
+import { findCurrentItem, findNextItem } from '../utils';
 /**
  * Represents the available `action` types for the `SchedulerItemsFocusAction` objects.
  *
@@ -10,6 +10,7 @@ import { findNextItem } from '../utils';
 export var ITEMS_FOCUS_ACTION;
 
 (function (ITEMS_FOCUS_ACTION) {
+  ITEMS_FOCUS_ACTION["current"] = "ITEMS_FOCUS_CURRENT";
   ITEMS_FOCUS_ACTION["next"] = "ITEMS_FOCUS_NEXT";
   ITEMS_FOCUS_ACTION["prev"] = "ITEMS_FOCUS_PREV";
 })(ITEMS_FOCUS_ACTION || (ITEMS_FOCUS_ACTION = {}));
@@ -18,6 +19,22 @@ export var ITEMS_FOCUS_ACTION;
 
 export var dispatchFocusedItems = function dispatchFocusedItems(action, event) {
   switch (action.type) {
+    case ITEMS_FOCUS_ACTION.current:
+      {
+        if (!action.item || !this.bv.items) {
+          return;
+        }
+
+        var next = findCurrentItem(action.item, this.bv.items, action.ignoreIsAllDay);
+
+        if (next && next.element) {
+          event.preventDefault();
+          next.element.focus();
+        }
+
+        break;
+      }
+
     case ITEMS_FOCUS_ACTION.next:
       {
         if (!action.item || !this.bv.items) {

package/dist/es/items/SchedulerEditItem.js

@@ -22,16 +22,16 @@ var inject = allVue.inject;
 import { DATA_ACTION } from '../Scheduler';
 import { clone, Keys, getDefaultSlots, getTemplate } from '@progress/kendo-vue-common';
 import { SchedulerViewItem } from './SchedulerViewItem';
-import { ITEMS_FOCUS_ACTION, SLOTS_FOCUS_ACTION, useEditable } from '../hooks';
+import { ITEMS_FOCUS_ACTION, SLOTS_FOCUS_ACTION } from '../hooks';
 import { FORM_ITEM_ACTION } from './hooks/use-form-item';
-import { showOccurrenceDialogReducer, SHOW_OCCURRENCE_DIALOG_ACTION, useShowOccurrenceDialog } from './hooks/use-show-occurrence-dialog';
+import { showOccurrenceDialogReducer, SHOW_OCCURRENCE_DIALOG_ACTION } from './hooks/use-show-occurrence-dialog';
 import { REMOVE_ITEM_ACTION } from './hooks/use-remove-item';
-import { showRemoveDialogReducer, SHOW_REMOVE_DIALOG_ACTION, useShowRemoveDialog } from './hooks/use-show-remove-item-dialog';
+import { showRemoveDialogReducer, SHOW_REMOVE_DIALOG_ACTION } from './hooks/use-show-remove-item-dialog';
 import { DRAG_ITEM_ACTION, useDragItem } from './hooks/use-drag-item';
 import { RESIZE_ITEM_ACTION, useResizeItem } from './hooks/use-resize-item';
-import { seriesReducer, SERIES_ACTION, useSeries } from './hooks/use-series';
+import { seriesReducer, SERIES_ACTION } from './hooks/use-series';
 import { ITEMS_SELECT_ACTION } from '../hooks/use-items-selection';
-import { compareItems, findMaster } from '../utils'; // tslint:enable:max-line-length
+import { compareItems, compareSlots, findMaster } from '../utils'; // tslint:enable:max-line-length
 
 var SchedulerEditItemVue2 = {
   name: 'KendoSchedulerEditItem',
@@ -196,77 +196,6 @@ var SchedulerEditItemVue2 = {
     var h = gh || createElement;
     var defaultSlot = getDefaultSlots(this); // tslint:enable:max-line-length
 
-    var _a = this.$props,
-        onDataaction = _a.onDataaction,
-        ignoreIsAllDay = _a.ignoreIsAllDay,
-        propViewItem = _a.viewItem,
-        propSeries = _a.series,
-        onSeriesChange = _a.onSeriesChange,
-        propForm = _a.form,
-        propFormItem = _a.formItem,
-        onFormItemChange = _a.onFormItemChange,
-        propDrag = _a.drag,
-        propDragItem = _a.dragItem,
-        onDragItemChange = _a.onDragItemChange,
-        propResize = _a.resize,
-        propResizeItem = _a.resizeItem,
-        onResizeItemChange = _a.onResizeItemChange,
-        propRemoveDialog = _a.removeDialog,
-        propRemoveItem = _a.removeItem,
-        onRemoveItemChange = _a.onRemoveItemChange,
-        propOccurrenceDialog = _a.occurrenceDialog,
-        propShowOccurrenceDialog = _a.showOccurrenceDialog,
-        onShowOccurrenceDialogChange = _a.onShowOccurrenceDialogChange,
-        propShowRemoveDialog = _a.showRemoveDialog,
-        onShowRemoveDialogChange = _a.onShowRemoveDialogChange; // const editItem = React.useRef<SchedulerEditItemHandle>(null);
-    // const item = React.useRef<SchedulerItemHandle>(null);
-
-    var ViewItem = propViewItem;
-    var Drag = propDrag;
-    var Resize = propResize;
-    var Form = propForm;
-    var OccurrenceDialog = propOccurrenceDialog;
-    var RemoveDialog = propRemoveDialog;
-    var editable = useEditable(this.$props.editable); //  const [selectedItems, dispatchItemSelection] = useSchedulerViewSelectedItemsContext();
-
-    var _b = useSeries(null, propSeries, onSeriesChange),
-        series = _b[0],
-        dispatchSeries = _b[1]; // const [formItem, setFormItem, dispatchFormItem] = useFormItem(
-    //     { series, onDataaction},
-    //     [null, propFormItem, onFormItemChange]
-    // );
-    // const [dragItem, setDragItem, dispatchDragItem] = useDragItem(
-    //     { 
-    //         dataItem: this.$props.dataItem, 
-    //         ignoreIsAllDay: this.$props.ignoreIsAllDay, 
-    //         isAllDay: this.$props.isAllDay, 
-    //         onDataaction },
-    //     [null, propDragItem, onDragItemChange]
-    // );
-    // const [resizeItem, setResizeItem, dispatchResizeItem] = useResizeItem(
-    //     { dataItem: this.$props.dataItem, onDataaction },
-    //     [null, propResizeItem, onResizeItemChange]
-    // );
-    // const [removeItem, setRemoveItem, dispatchRemoveItem] = useRemoveItem(
-    //     { series, onDataaction},
-    //     [null, propRemoveItem, onRemoveItemChange]
-    // );
-
-
-    var _c = useShowRemoveDialog(false, propShowRemoveDialog, onShowRemoveDialogChange),
-        showRemoveDialog = _c[0],
-        setShowRemoveDialog = _c[1],
-        dispatchShowRemoveDialog = _c[2];
-
-    var _d = useShowOccurrenceDialog(false, propShowOccurrenceDialog, onShowOccurrenceDialogChange),
-        showOccurrenceDialog = _d[0],
-        setShowOccurrenceDialog = _d[1],
-        dispatchShowOccurrenceDialog = _d[2];
-
-    var items = this.bv.items; // useSchedulerViewItemsContext();
-    // const [,dispatchViewItemsFocus] = useSchedulerViewFocusedItemsContext();
-    // const [,dispatchViewSlotsFocus] = useSchedulerViewFocusedSlotsContext();
-
     var selected = Boolean(this.bv.selectedItems && this.bv.selectedItems.some(function (si) {
       return compareItems(si, _this, _this.ignoreIsAllDay);
     }));
@@ -314,8 +243,7 @@ var SchedulerEditItemVue2 = {
         formItem: this.compFormItem,
         dragItem: this.compDragItem,
         resizeItem: this.compResizeItem,
-        removeItem: this.compRemoveItem //   refTo={this}
-        ,
+        removeItem: this.compRemoveItem,
         itemRef: this.item,
         selected: selected,
         tabIndex: this.currentTabIndex // Keyboard
@@ -1084,6 +1012,8 @@ var SchedulerEditItemVue2 = {
       }
     },
     onKeyDownAction: function onKeyDownAction(event, props) {
+      var nextSlot;
+
       switch (event.event.keyCode) {
         case Keys.enter:
           return [{
@@ -1103,27 +1033,50 @@ var SchedulerEditItemVue2 = {
           }];
 
         case Keys.up:
-          return [Boolean(props.slots.length && props.slots[0].refTo.current) && {
+          nextSlot = this.bv.slots.find(function (s) {
+            return compareSlots(s, props.slots[0]);
+          });
+          return [Boolean(props.slots.length && nextSlot) && {
             type: SLOTS_FOCUS_ACTION.up,
-            slot: props.slots[0].refTo
+            slot: nextSlot
           }];
 
         case Keys.right:
-          return [Boolean(props.slots.length && props.slots[0].refTo.current) && {
+          nextSlot = this.bv.slots.find(function (s) {
+            return compareSlots(s, props.slots[0]);
+          });
+          return [Boolean(props.slots.length && nextSlot) && {
             type: SLOTS_FOCUS_ACTION.right,
-            slot: props.slots[0].refTo
+            slot: nextSlot
           }];
 
         case Keys.down:
-          return [Boolean(props.slots.length && props.slots[props.slots.length - 1].refTo.current) && {
+          nextSlot = this.bv.slots.find(function (s) {
+            return compareSlots(s, props.slots[props.slots.length - 1]);
+          });
+          return [Boolean(props.slots.length && nextSlot) && {
             type: SLOTS_FOCUS_ACTION.down,
-            slot: props.slots[props.slots.length - 1].refTo
+            slot: nextSlot
           }];
 
         case Keys.left:
-          return [Boolean(props.slots.length && props.slots[0].refTo.current) && {
+          nextSlot = this.bv.slots.find(function (s) {
+            return compareSlots(s, props.slots[0]);
+          });
+          return [Boolean(props.slots.length && nextSlot) && {
             type: SLOTS_FOCUS_ACTION.left,
-            slot: props.slots[0].refTo
+            slot: nextSlot
+          }];
+
+        case Keys.delete:
+        case Keys.backspace:
+          return [{
+            type: REMOVE_ITEM_ACTION.set,
+            payload: props.dataItem
+          }, props.isRecurring ? {
+            type: SHOW_OCCURRENCE_DIALOG_ACTION.open
+          } : {
+            type: SHOW_REMOVE_DIALOG_ACTION.open
           }];
 
         default: