@progress/kendo-vue-scheduler 3.2.6 → 3.2.8-dev.202205030909

package/dist/es/views/day/MultiDayView.js

@@ -51,6 +51,7 @@ import { SchedulerDrag } from '../../views/common/SchedulerDrag';
 import { SchedulerEditSlot } from '../../slots/SchedulerEditSlot';
 import { SchedulerEditItem } from '../../items/SchedulerEditItem';
 import { CurrentTimeMarker } from '../../components/CurrentTimeMarket';
+import { SchedulerResize } from '../common/SchedulerResize';
 var FIRST_INDEX = 0;
 export var GRID_OFFSET = 1; // tslint:enable:max-line-length
 
@@ -133,6 +134,16 @@ var MultiDayViewVue2 = {
         return undefined;
       }
     },
+    resizeItem: {
+      type: Object,
+      default: function _default() {
+        return undefined;
+      }
+    },
+    format: {
+      type: String,
+      default: 't'
+    },
     // showCurrentTime: {
     //   type: Boolean,
     //   default: true
@@ -144,6 +155,7 @@ var MultiDayViewVue2 = {
     timeHeaderCell: String,
     slotRender: [String, Function, Object],
     item: [String, Function, Object],
+    viewItem: [String, Function, Object],
     editable: {
       type: [Boolean, Object],
       default: false
@@ -254,11 +266,15 @@ var MultiDayViewVue2 = {
     },
     compDragItem: function compDragItem() {
       return this.dragItem !== undefined ? this.dragItem : this.currentDragItem;
+    },
+    compResizeItem: function compResizeItem() {
+      return this.resizeItem !== undefined ? this.resizeItem : this.currentResizeItem;
     }
   },
   data: function data() {
     return {
-      currentDragItem: undefined
+      currentDragItem: undefined,
+      currentResizeItem: undefined
     };
   },
   created: function created() {
@@ -322,6 +338,41 @@ var MultiDayViewVue2 = {
       }));
     };
 
+    var resizeItemClue = function resizeItemClue(vertical) {
+      return this.compResizeItem && this.editable.resize && (Array.isArray(this.compResizeItem) ? this.compResizeItem.map(function (ri, idx) {
+        return h(SchedulerResize, {
+          key: idx,
+          format: this.$props.format //   ignoreIsAllDay={ignoreIsAllDay}
+          ,
+          attrs: this.v3 ? undefined : {
+            format: this.$props.format,
+            dataItem: ri,
+            viewItem: this.$props.viewItem,
+            item: this.$props.item,
+            vertical: vertical
+          },
+          dataItem: ri,
+          viewItem: this.$props.viewItem,
+          item: this.$props.item,
+          vertical: vertical
+        });
+      }, this) : h(SchedulerResize, {
+        format: this.$props.format //   ignoreIsAllDay={ignoreIsAllDay}
+        ,
+        attrs: this.v3 ? undefined : {
+          format: this.$props.format,
+          dataItem: this.compResizeItem,
+          viewItem: this.$props.viewItem,
+          item: this.$props.item,
+          vertical: vertical
+        },
+        dataItem: this.compResizeItem,
+        viewItem: this.$props.viewItem,
+        item: this.$props.item,
+        vertical: vertical
+      }));
+    };
+
     return (// @ts-ignore  function children
       h(BaseView, {
         id: this.$props.id,
@@ -487,16 +538,18 @@ var MultiDayViewVue2 = {
             form: this.$props.form,
             onDataaction: this.handleDataAction,
             on: this.v3 ? undefined : {
-              "dataaction": this.handleDataAction
+              "dataaction": this.handleDataAction,
+              "dragitemchange": this.handleDragItemChange,
+              "resizeitemchange": this.handleResizeItemChange
             },
+            onDragitemchange: this.handleDragItemChange,
+            onResizeitemchange: this.handleResizeItemChange,
             item: this.$props.item,
             viewItem: this.$props.viewItem,
             editable: this.$props.editable,
             vertical: false
           });
-        }, _this2) // ,
-        // dragItemClue.call(this, false)
-        ] : // @ts-ignore  function children
+        }, _this2), _this2.compDragItem && _this2.compDragItem.isAllDay && dragItemClue.call(_this2, false), _this2.compResizeItem && _this2.compResizeItem.isAllDay && resizeItemClue.call(_this2, false)] : // @ts-ignore  function children
         h(VerticalResourceIterator, {
           group: _this2.ks.props.group,
           attrs: _this2.v3 ? undefined : {
@@ -762,15 +815,19 @@ var MultiDayViewVue2 = {
             isRecurring: item.isRecurring,
             onDataaction: this.handleDataAction,
             on: this.v3 ? undefined : {
-              "dataaction": this.handleDataAction
+              "dataaction": this.handleDataAction,
+              "dragitemchange": this.handleDragItemChange,
+              "resizeitemchange": this.handleResizeItemChange
             },
+            onDragitemchange: this.handleDragItemChange,
+            onResizeitemchange: this.handleResizeItemChange,
             viewItem: this.$props.viewItem,
             item: this.$props.item,
             form: this.$props.form,
             editable: this.$props.editable,
             vertical: false
           });
-        }, _this2)], timeItems.map(function (item) {
+        }, _this2), _this2.compDragItem && _this2.compDragItem.isAllDay && dragItemClue.call(_this2, true), _this2.compResizeItem && _this2.compResizeItem.isAllDay && resizeItemClue.call(_this2, true)], timeItems.map(function (item) {
           return h(EditItem, {
             key: item.isRecurring ? item.uid + ":" + item.group.index + ":" + item.range.index + ":" + item.originalStart : item.uid + ":" + item.group.index + ":" + item.range.index,
             uid: item.uid,
@@ -835,16 +892,18 @@ var MultiDayViewVue2 = {
             onDataaction: this.handleDataAction,
             on: this.v3 ? undefined : {
               "dataaction": this.handleDataAction,
-              "dragitemchange": this.handleDragItemChange
+              "dragitemchange": this.handleDragItemChange,
+              "resizeitemchange": this.handleResizeItemChange
             },
             onDragitemchange: this.handleDragItemChange,
+            onResizeitemchange: this.handleResizeItemChange,
             viewItem: this.$props.viewItem,
             item: this.$props.item,
             form: this.$props.form,
             editable: this.$props.editable,
             vertical: true
           });
-        }, _this2), dragItemClue.call(_this2, true)])];
+        }, _this2), _this2.compDragItem && !_this2.compDragItem.isAllDay && dragItemClue.call(_this2, true), _this2.compResizeItem && !_this2.compResizeItem.isAllDay && resizeItemClue.call(_this2, true)])];
       } : [h("div", {
         "class": "k-scheduler-head"
       }, [_this2.ks.orientation === 'horizontal' ? [h(HorizontalResourceIterator, {
@@ -994,14 +1053,18 @@ var MultiDayViewVue2 = {
           form: this.$props.form,
           onDataaction: this.handleDataAction,
           on: this.v3 ? undefined : {
-            "dataaction": this.handleDataAction
+            "dataaction": this.handleDataAction,
+            "dragitemchange": this.handleDragItemChange,
+            "resizeitemchange": this.handleResizeItemChange
           },
+          onDragitemchange: this.handleDragItemChange,
+          onResizeitemchange: this.handleResizeItemChange,
           item: this.$props.item,
           viewItem: this.$props.viewItem,
           editable: this.$props.editable,
           vertical: false
         });
-      }, _this2)] : h(VerticalResourceIterator, {
+      }, _this2), _this2.compDragItem && _this2.compDragItem.isAllDay && dragItemClue.call(_this2, false), _this2.compResizeItem && _this2.compResizeItem.isAllDay && resizeItemClue.call(_this2, false)] : h(VerticalResourceIterator, {
         group: _this2.ks.props.group,
         attrs: _this2.v3 ? undefined : {
           group: _this2.ks.props.group,
@@ -1253,15 +1316,19 @@ var MultiDayViewVue2 = {
           isRecurring: item.isRecurring,
           onDataaction: this.handleDataAction,
           on: this.v3 ? undefined : {
-            "dataaction": this.handleDataAction
+            "dataaction": this.handleDataAction,
+            "dragitemchange": this.handleDragItemChange,
+            "resizeitemchange": this.handleResizeItemChange
           },
+          onDragitemchange: this.handleDragItemChange,
+          onResizeitemchange: this.handleResizeItemChange,
           viewItem: this.$props.viewItem,
           item: this.$props.item,
           form: this.$props.form,
           editable: this.$props.editable,
           vertical: false
         });
-      }, _this2)], timeItems.map(function (item) {
+      }, _this2), _this2.compDragItem && _this2.compDragItem.isAllDay && dragItemClue.call(_this2, true), _this2.compResizeItem && _this2.compResizeItem.isAllDay && resizeItemClue.call(_this2, true)], timeItems.map(function (item) {
         return h(EditItem, {
           key: item.isRecurring ? item.uid + ":" + item.group.index + ":" + item.range.index + ":" + item.originalStart : item.uid + ":" + item.group.index + ":" + item.range.index,
           uid: item.uid,
@@ -1326,16 +1393,18 @@ var MultiDayViewVue2 = {
           onDataaction: this.handleDataAction,
           on: this.v3 ? undefined : {
             "dataaction": this.handleDataAction,
-            "dragitemchange": this.handleDragItemChange
+            "dragitemchange": this.handleDragItemChange,
+            "resizeitemchange": this.handleResizeItemChange
           },
           onDragitemchange: this.handleDragItemChange,
+          onResizeitemchange: this.handleResizeItemChange,
           viewItem: this.$props.viewItem,
           item: this.$props.item,
           form: this.$props.form,
           editable: this.$props.editable,
           vertical: true
         });
-      }, _this2), dragItemClue.call(_this2, true)])])
+      }, _this2), _this2.compDragItem && !_this2.compDragItem.isAllDay && dragItemClue.call(_this2, true), _this2.compResizeItem && !_this2.compResizeItem.isAllDay && resizeItemClue.call(_this2, true)])])
     );
   },
   methods: {
@@ -1344,6 +1413,9 @@ var MultiDayViewVue2 = {
     },
     handleDragItemChange: function handleDragItemChange(item) {
       this.currentDragItem = item;
+    },
+    handleResizeItemChange: function handleResizeItemChange(item) {
+      this.currentResizeItem = item;
     }
   }
 };

package/dist/es/views/month/MonthView.js

@@ -63,6 +63,7 @@ var MonthViewVue2 = {
     },
     slotRender: [String, Function, Object],
     item: [String, Function, Object],
+    viewItem: [String, Function, Object],
     editable: {
       type: [Boolean, Object],
       default: false

package/dist/es/views/time/MultiDayTimelineView.js

@@ -122,6 +122,7 @@ var MultiDayTimelineViewVue2 = {
     },
     slotRender: [String, Function, Object],
     item: [String, Function, Object],
+    viewItem: [String, Function, Object],
     editable: {
       type: [Boolean, Object],
       default: false

package/dist/es/views/time/TimelineView.js

@@ -94,6 +94,7 @@ var TimelineViewVue2 = {
     },
     slotRender: [String, Function, Object],
     item: [String, Function, Object],
+    viewItem: [String, Function, Object],
     editable: [Object, Boolean]
   },
   // @ts-ignore
@@ -129,6 +130,7 @@ var TimelineViewVue2 = {
         workWeekEnd: this.$props.workWeekEnd,
         slotRender: this.$props.slotRender,
         item: this.$props.item,
+        viewItem: this.$props.viewItem,
         editable: this.$props.editable
       },
       dateRange: this.$props.dateRange,
@@ -150,6 +152,7 @@ var TimelineViewVue2 = {
       workWeekEnd: this.$props.workWeekEnd,
       slotRender: this.$props.slotRender,
       item: this.$props.item,
+      viewItem: this.$props.viewItem,
       editable: this.$props.editable,
       onDataaction: this.handleDataAction,
       on: this.v3 ? undefined : {

package/dist/es/views/week/WeekView.js

@@ -87,10 +87,12 @@ var WeekViewVue2 = {
     timeHeaderCell: String,
     slotRender: [String, Function, Object],
     item: [String, Function, Object],
+    viewItem: [String, Function, Object],
     editable: {
       type: [Boolean, Object],
       default: false
-    }
+    },
+    format: String
   },
   inject: {
     kendoLocalizationService: {
@@ -133,6 +135,7 @@ var WeekViewVue2 = {
         timeHeaderCell: this.$props.timeHeaderCell,
         slotRender: this.$props.slotRender,
         item: this.$props.item,
+        viewItem: this.$props.viewItem,
         editable: this.$props.editable
       },
       dateRange: this.$props.dateRange,
@@ -155,6 +158,7 @@ var WeekViewVue2 = {
       timeHeaderCell: this.$props.timeHeaderCell,
       slotRender: this.$props.slotRender,
       item: this.$props.item,
+      viewItem: this.$props.viewItem,
       editable: this.$props.editable,
       onDataaction: this.handleDataAction,
       on: this.v3 ? undefined : {

package/dist/es/views/week/WorkWeekView.js

@@ -76,6 +76,7 @@ var WorkWeekViewVue2 = {
     },
     slotRender: [String, Function, Object],
     item: [String, Function, Object],
+    viewItem: [String, Function, Object],
     editable: {
       type: [Boolean, Object],
       default: false
@@ -118,6 +119,7 @@ var WorkWeekViewVue2 = {
         step: DAYS_IN_WEEK_COUNT,
         slotRender: this.$props.slotRender,
         item: this.$props.item,
+        viewItem: this.$props.viewItem,
         editable: this.$props.editable
       },
       dateRange: this.$props.dateRange,
@@ -131,6 +133,7 @@ var WorkWeekViewVue2 = {
       step: DAYS_IN_WEEK_COUNT,
       slotRender: this.$props.slotRender,
       item: this.$props.item,
+      viewItem: this.$props.viewItem,
       editable: this.$props.editable,
       onDataaction: this.handleDataAction,
       on: this.v3 ? undefined : {

package/dist/npm/Scheduler.js

@@ -143,6 +143,7 @@ var SchedulerVue2 = {
     footer: [String, Function, Object],
     slotRender: [String, Function, Object],
     item: [String, Function, Object],
+    viewItem: [String, Function, Object],
     task: [String, Function, Object]
   },
   computed: {
@@ -252,6 +253,7 @@ var SchedulerVue2 = {
     var footer = kendo_vue_common_1.templateRendering.call(this, view.footer || this.$props.footer, kendo_vue_common_1.getListeners.call(this));
     var slotRender = kendo_vue_common_1.templateRendering.call(this, view.slot || this.$props.slotRender, {});
     var item = kendo_vue_common_1.templateRendering.call(this, view.item || this.$props.item, {});
+    var viewItem = kendo_vue_common_1.templateRendering.call(this, view.viewItem || this.$props.viewItem, {});
     var task = kendo_vue_common_1.templateRendering.call(this, view.task || this.$props.task, {});
     var ViewSelector = SchedulerViewSelector_1.SchedulerViewSelector;
     var viewComponent = this.getViewComponentByName(this.ks.activeViewName || view.name);
@@ -264,6 +266,7 @@ var SchedulerVue2 = {
       dateRange: this.ks.dateRange,
       slotRender: slotRender,
       item: item,
+      viewItem: viewItem,
       task: task
     });
 

package/dist/npm/components/BaseView.js

@@ -42,10 +42,10 @@ var BaseViewVue2 = {
       bv: this.bv,
       setItems: this.dispatchItems,
       setSlots: this.dispatchSlots,
-      setSelectedSlots: use_slots_selection_1.dispatchSelectedSlots,
-      setSelectedItems: use_items_selection_1.dispatchSelectedItems,
-      setFocusedItems: hooks_1.dispatchFocusedItems,
-      setFocusedSlots: hooks_1.dispatchFocusedSlots //    setActiveViewName: this.handleActiveViewNameChange
+      dispatchSelectedSlots: this.handleSchedulerSlotsSelectAction,
+      dispatchSelectedItems: this.handleSchedulerItemsSelectAction,
+      dispatchFocusedItems: this.setFocusedItems,
+      dispatchFocusedSlots: this.setFocusedSlots //    setActiveViewName: this.handleActiveViewNameChange
 
     };
   },
@@ -107,21 +107,23 @@ var BaseViewVue2 = {
       });
     },
     handleSchedulerItemsSelectAction: function handleSchedulerItemsSelectAction(action, event) {
-      this.dispatchSelectedSlots({
+      use_slots_selection_1.dispatchSelectedSlots.call(this, {
         type: use_slots_selection_1.SLOTS_SELECT_ACTION.reset
       });
-      this.dispatchSelectedItems(action, event);
+      use_items_selection_1.dispatchSelectedItems.call(this, action, event);
     },
     handleSchedulerSlotsSelectAction: function handleSchedulerSlotsSelectAction(action, event) {
-      this.dispatchSelectedItems({
+      use_items_selection_1.dispatchSelectedItems.call(this, {
         type: use_items_selection_1.ITEMS_SELECT_ACTION.reset
       }, event);
-      this.dispatchSelectedSlots(action);
+      use_slots_selection_1.dispatchSelectedSlots.call(this, action);
+    },
+    setFocusedItems: function setFocusedItems(action, event) {
+      hooks_1.dispatchFocusedItems.call(this, action, event);
+    },
+    setFocusedSlots: function setFocusedSlots(action, event) {
+      hooks_1.dispatchFocusedSlots.call(this, action, event);
     },
-    dispatchSelectedSlots: use_slots_selection_1.dispatchSelectedSlots,
-    dispatchSelectedItems: use_items_selection_1.dispatchSelectedItems,
-    dispatchFocusedItems: hooks_1.dispatchFocusedItems,
-    dispatchFocusedSlots: hooks_1.dispatchFocusedSlots,
     dispatchItems: function dispatchItems(action) {
       switch (action.type) {
         case utils_1.COLLECTION_ACTION.add:

package/dist/npm/components/header/view-selector/ViewSelectorList.js

@@ -97,14 +97,9 @@ var ViewSelectorListVue2 = {
     }, [activeView && this.media === 'mobile' && // @ts-ignore  function children
     h(kendo_vue_buttons_1.DropDownButton, {
       "class": "k-views-dropdown",
-      onItemclick: this.handleItemClick,
-      on: this.v3 ? undefined : {
-        "itemclick": this.handleItemClick
-      },
-      popupSettings: {
-        popupClass: 'k-scheduler-toolbar'
-      },
+      tabIndex: -1,
       attrs: this.v3 ? undefined : {
+        tabIndex: -1,
         popupSettings: {
           popupClass: 'k-scheduler-toolbar'
         },
@@ -120,6 +115,13 @@ var ViewSelectorListVue2 = {
         }, this),
         text: activeView.title || activeName
       },
+      onItemclick: this.handleItemClick,
+      on: this.v3 ? undefined : {
+        "itemclick": this.handleItemClick
+      },
+      popupSettings: {
+        popupClass: 'k-scheduler-toolbar'
+      },
       textField: "title",
       items: views.map(function (v) {
         var nameTitle = 'scheduler.' + v.name + 'ViewTitle';

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

@@ -28,15 +28,15 @@ exports.dispatchFocusedItems = function (action, event) {
   switch (action.type) {
     case ITEMS_FOCUS_ACTION.next:
       {
-        if (!action.item || !action.item.current || !this.items) {
+        if (!action.item || !this.bv.items) {
           return;
         }
 
-        var next = utils_1.findNextItem(action.item, this.items, action.ignoreIsAllDay, false);
+        var next = utils_1.findNextItem(action.item, this.bv.items, action.ignoreIsAllDay, false);
 
-        if (next && next.current && next.current.element) {
+        if (next && next.element) {
           event.preventDefault();
-          next.current.element.focus();
+          next.element.focus();
         }
 
         break;
@@ -44,15 +44,15 @@ exports.dispatchFocusedItems = function (action, event) {
 
     case ITEMS_FOCUS_ACTION.prev:
       {
-        if (!action.item || !action.item.current || !this.items) {
+        if (!action.item || !this.bv.items) {
           return;
         }
 
-        var next = utils_1.findNextItem(action.item, this.items, action.ignoreIsAllDay, true);
+        var next = utils_1.findNextItem(action.item, this.bv.items, action.ignoreIsAllDay, true);
 
-        if (next && next.current && next.current.element) {
+        if (next && next.element) {
           event.preventDefault();
-          next.current.element.focus();
+          next.element.focus();
         }
 
         break;

package/dist/npm/hooks/use-items-selection.js

@@ -53,20 +53,20 @@ exports.dispatchSelectedItems = function (action, event) {
         return;
       }
 
-      this.selectedItems = [action.item];
+      this.bv.selectedItems = [action.item];
       break;
 
     case ITEMS_SELECT_ACTION.selectNext:
       {
-        if (!action.item || !action.item.current || !this.items) {
+        if (!action.item || !this.bv.items) {
           return;
         }
 
-        var next = utils_1.findNextItem(action.item, this.items, action.ignoreIsAllDay, false);
+        var next = utils_1.findNextItem(action.item, this.bv.items, action.ignoreIsAllDay, false);
 
         if (next) {
           event.preventDefault();
-          this.selectedItems = [next];
+          this.bv.selectedItems = [next];
         }
 
         break;
@@ -74,22 +74,22 @@ exports.dispatchSelectedItems = function (action, event) {
 
     case ITEMS_SELECT_ACTION.selectPrev:
       {
-        if (!action.item || !action.item.current || !this.items) {
+        if (!action.item || !this.bv.items) {
           return;
         }
 
-        var next = utils_1.findNextItem(action.item, this.items, action.ignoreIsAllDay, true);
+        var next = utils_1.findNextItem(action.item, this.bv.items, action.ignoreIsAllDay, true);
 
         if (next) {
           event.preventDefault();
-          this.selectedItems = [next];
+          this.bv.selectedItems = [next];
         }
 
         break;
       }
 
     case ITEMS_SELECT_ACTION.reset:
-      this.selectedItems = [];
+      this.bv.selectedItems = [];
       break;
 
     case ITEMS_SELECT_ACTION.add:
@@ -97,10 +97,10 @@ exports.dispatchSelectedItems = function (action, event) {
         return;
       }
 
-      if (!this.selectedItems.some(function (si) {
+      if (!this.bv.selectedItems.some(function (si) {
         return si === action.item;
       })) {
-        this.selectedItems = __spreadArrays(this.selectedItems, [action.item]);
+        this.bv.selectedItems = __spreadArrays(this.bv.selectedItems, [action.item]);
       }
 
       break;
@@ -110,7 +110,7 @@ exports.dispatchSelectedItems = function (action, event) {
         return;
       }
 
-      this.selectedItems = __spreadArrays(this.selectedItems.filter(function (si) {
+      this.bv.selectedItems = __spreadArrays(this.bv.selectedItems.filter(function (si) {
         return si !== action.item;
       }));
       break;

package/dist/npm/hooks/use-slots-focus.js

@@ -29,15 +29,15 @@ exports.dispatchFocusedSlots = function (action, event) {
   switch (action.type) {
     case SLOTS_FOCUS_ACTION.up:
       {
-        if (!action.slot.current || !this.slots) {
+        if (!action.slot || !this.bv.slots) {
           return;
         }
 
-        var next = exports.findUpSlot(action.slot, this.slots);
+        var next = exports.findUpSlot(action.slot, this.bv.slots);
 
-        if (next && next.current && next.current.element) {
+        if (next && next.$el) {
           event.preventDefault();
-          next.current.element.focus();
+          next.$el.focus();
         }
 
         break;
@@ -45,15 +45,15 @@ exports.dispatchFocusedSlots = function (action, event) {
 
     case SLOTS_FOCUS_ACTION.down:
       {
-        if (!action.slot || !this.slots) {
+        if (!action.slot || !this.bv.slots) {
           return;
         }
 
-        var next = exports.findDownSlot(action.slot, this.slots);
+        var next = exports.findDownSlot(action.slot, this.bv.slots);
 
-        if (next && next.current && next.current.element) {
+        if (next && next.$el) {
           event.preventDefault();
-          next.current.element.focus();
+          next.$el.focus();
         }
 
         break;
@@ -61,15 +61,15 @@ exports.dispatchFocusedSlots = function (action, event) {
 
     case SLOTS_FOCUS_ACTION.left:
       {
-        if (!action.slot || !this.slots) {
+        if (!action.slot || !this.bv.slots) {
           return;
         }
 
-        var next = exports.findLeftSlot(action.slot, this.slots);
+        var next = exports.findLeftSlot(action.slot, this.bv.slots);
 
-        if (next && next.current && next.current.element) {
+        if (next && next.$el) {
           event.preventDefault();
-          next.current.element.focus();
+          next.$el.focus();
         }
 
         break;
@@ -77,15 +77,15 @@ exports.dispatchFocusedSlots = function (action, event) {
 
     case SLOTS_FOCUS_ACTION.right:
       {
-        if (!action.slot || !this.slots) {
+        if (!action.slot || !this.bv.slots) {
           return;
         }
 
-        var next = exports.findRightSlot(action.slot, this.slots);
+        var next = exports.findRightSlot(action.slot, this.bv.slots);
 
-        if (next && next.current && next.current.element) {
+        if (next && next.$el) {
           event.preventDefault();
-          next.current.element.focus();
+          next.$el.focus();
         }
 
         break;
@@ -100,7 +100,7 @@ exports.dispatchFocusedSlots = function (action, event) {
 
 exports.findUpSlot = function (target, all) {
   return all.find(function (slot) {
-    return slot.current !== null && target.current !== null && slot.current.props.row === target.current.props.row - 1 && slot.current.props.col === target.current.props.col;
+    return slot !== null && target !== null && slot.$props.row === target.$props.row - 1 && slot.$props.col === target.$props.col;
   });
 };
 /** @hidden */
@@ -108,7 +108,7 @@ exports.findUpSlot = function (target, all) {
 
 exports.findLeftSlot = function (target, all) {
   return all.find(function (slot) {
-    return slot.current !== null && target.current !== null && slot.current.props.row === target.current.props.row && slot.current.props.col === target.current.props.col - 1;
+    return slot !== null && target !== null && slot.$props.row === target.$props.row && slot.$props.col === target.$props.col - 1;
   });
 };
 /** @hidden */
@@ -116,7 +116,7 @@ exports.findLeftSlot = function (target, all) {
 
 exports.findRightSlot = function (target, all) {
   return all.find(function (slot) {
-    return slot.current !== null && target.current !== null && slot.current.props.row === target.current.props.row && slot.current.props.col === target.current.props.col + 1;
+    return slot !== null && target !== null && slot.$props.row === target.$props.row && slot.$props.col === target.$props.col + 1;
   });
 };
 /** @hidden */
@@ -124,6 +124,6 @@ exports.findRightSlot = function (target, all) {
 
 exports.findDownSlot = function (target, all) {
   return all.find(function (slot) {
-    return slot.current !== null && target.current !== null && slot.current.props.row === target.current.props.row + 1 && slot.current.props.col === target.current.props.col;
+    return slot !== null && target !== null && slot.$props.row === target.$props.row + 1 && slot.$props.col === target.$props.col;
   });
 };