@progress/kendo-vue-scheduler 3.10.2 → 3.11.0-dev.202305230751

package/dist/es/Scheduler.js

@@ -25,15 +25,15 @@ var allVue = Vue;
 var gh = allVue.h;
 var isV3 = allVue.version && allVue.version[0] === '3';
 import { getModelFields, getField, findMaster, setField, toSchedulerGroups, getToday } from './utils/main';
-import { clone, getListeners, getTemplate, templateRendering } from '@progress/kendo-vue-common';
-import { provideIntlService, provideLocalizationService } from '@progress/kendo-vue-intl';
+import { clone, getListeners, getTemplate, isRtl, templateRendering } from '@progress/kendo-vue-common';
 import { SchedulerHeader } from './components/header/SchedulerHeader';
+import { provideIntlService, provideLocalizationService } from '@progress/kendo-vue-intl';
 import { SchedulerNavigation } from './components/header/navigation/SchedulerNavigation';
-import { SchedulerViewSelector } from './components/header/view-selector/SchedulerViewSelector';
 import { addDays, addMonths } from '@progress/kendo-date-math';
 import { SchedulerFooter } from './components/footer/SchedulerFooter';
 import { ToolbarSpacer } from '@progress/kendo-vue-buttons';
 import { NavigationDatePicker } from './components/header/navigation/NavigationDatePicker';
+import { ViewSelectorList } from './components/header/view-selector/ViewSelectorList';
 import { BusinessHours } from './components/footer/bussiness-hours/BusinessHours';
 import { DayView } from './views/day/DayView';
 import { validatePackage } from '@progress/kendo-vue-common';
@@ -121,9 +121,12 @@ var SchedulerVue2 = {
     timeHeaderCell: [String, Function, Object]
   },
   computed: {
+    isRtl: function isRtl() {
+      return this.$props.rtl !== undefined ? this.$props.rtl : this.currentRtl;
+    },
     wrapperClassName: function wrapperClassName() {
       return {
-        'k-rtl': this.$props.rtl !== undefined ? this.$props.rtl : this.dir === 'rtl',
+        'k-rtl': this.isRtl,
         'k-widget': true,
         'k-scheduler': true,
         'k-floatwrap': true
@@ -133,6 +136,9 @@ var SchedulerVue2 = {
       return getModelFields(this.$props.modelFields).fields;
     }
   },
+  mounted: function mounted() {
+    this.currentRtl = isRtl(this.$el);
+  },
   provide: function provide() {
     return {
       ks: this.ks,
@@ -195,6 +201,9 @@ var SchedulerVue2 = {
     };
   },
   watch: {
+    isRtl: function isRtl(newRtl) {
+      this.ks.isRtl = newRtl;
+    },
     view: function view(newName) {
       this.updatePassedState(newName);
     },
@@ -224,7 +233,6 @@ var SchedulerVue2 = {
     var h = gh || createElement;
     validatePackage(packageMetadata);
     var timezone = this.$props.timezone;
-    //  const dir = useDir(element);
     var view = this.views.find(function (currentView) {
       return currentView.name === _this.ks.activeViewName;
     }) || this.views[0] || h(DayView);
@@ -243,7 +251,6 @@ var SchedulerVue2 = {
     this.ks.dialogProps = view.dialogProps || this.$props.dialogProps;
     this.ks.formProps = view.formProps || this.$props.formProps;
     var currentEditable = useEditable(view.editable !== undefined ? view.editable : this.$props.editable);
-    var ViewSelector = SchedulerViewSelector;
     var viewComponent = this.getViewComponentByName(this.ks.activeViewName || view.name);
     var viewProps = __assign(__assign(__assign({}, this.$props), this.ks.view), {
       showWorkHours: this.ks.showWorkHours,
@@ -283,7 +290,7 @@ var SchedulerVue2 = {
         on: _this2.v3 ? undefined : {
           "change": _this2.handleDatePickerChange
         }
-      }), h(ToolbarSpacer), h(ViewSelector)];
+      }), h(ToolbarSpacer), h(ViewSelectorList)];
     } : [h(SchedulerNavigation, {
       onPrevclick: _this2.handlePrevClick,
       on: _this2.v3 ? undefined : {
@@ -302,7 +309,7 @@ var SchedulerVue2 = {
       on: _this2.v3 ? undefined : {
         "change": _this2.handleDatePickerChange
       }
-    }), h(ToolbarSpacer), h(ViewSelector)]);
+    }), h(ToolbarSpacer), h(ViewSelectorList)]);
     headerRender = getTemplate.call(this, {
       h: h,
       template: header,
@@ -360,8 +367,8 @@ var SchedulerVue2 = {
         id: this.$props.id,
         tabindex: this.$props.tabIndex
         // Aria
-        //  dir={dir}
         ,
+        dir: this.isRtl && 'rtl',
         role: this.$props.role || 'application',
         "aria-label": this.$props.ariaLabel,
         "aria-labelledby": this.$props.ariaLabelledby
@@ -372,6 +379,7 @@ var SchedulerVue2 = {
       },
       "class": this.wrapperClassName,
       tabindex: this.$props.tabIndex,
+      dir: this.isRtl && 'rtl',
       role: this.$props.role || 'application',
       "aria-label": this.$props.ariaLabel,
       "aria-labelledby": this.$props.ariaLabelledby,

package/dist/es/components/SchedulerActionButtons.js

@@ -5,6 +5,7 @@ var gh = allVue.h;
 var isV3 = allVue.version && allVue.version[0] === '3';
 import { Button } from '@progress/kendo-vue-buttons';
 import { DialogActionsBar } from '@progress/kendo-vue-dialogs';
+import { cancelIcon, saveIcon } from '@progress/kendo-svg-icons';
 /**
  * @hidden
  */
@@ -33,7 +34,11 @@ var SchedulerActionButtonsVue2 = {
     return (
       // @ts-ignore  function children
       h(DialogActionsBar, {
-        "class": 'k-form-buttons'
+        "class": 'k-form-buttons',
+        layout: 'start',
+        attrs: this.v3 ? undefined : {
+          layout: 'start'
+        }
       }, this.v3 ? function () {
         return [
         // @ts-ignore  function children
@@ -41,9 +46,15 @@ var SchedulerActionButtonsVue2 = {
           type: "submit",
           attrs: _this.v3 ? undefined : {
             type: "submit",
-            disabled: !_this.kendoForm.allowSubmit
+            themeColor: 'primary',
+            disabled: !_this.kendoForm.allowSubmit,
+            icon: 'save',
+            svgIcon: saveIcon
           },
+          themeColor: 'primary',
           disabled: !_this.kendoForm.allowSubmit,
+          icon: 'save',
+          svgIcon: saveIcon,
           onClick: _this.onSubmit,
           on: _this.v3 ? undefined : {
             "click": _this.onSubmit
@@ -56,7 +67,13 @@ var SchedulerActionButtonsVue2 = {
           onClick: _this.handleCancel,
           on: _this.v3 ? undefined : {
             "click": _this.handleCancel
-          }
+          },
+          icon: 'cancel',
+          attrs: _this.v3 ? undefined : {
+            icon: 'cancel',
+            svgIcon: cancelIcon
+          },
+          svgIcon: cancelIcon
         }, _this.v3 ? function () {
           return [_this.editCancelMessage];
         } : [_this.editCancelMessage])];
@@ -64,9 +81,15 @@ var SchedulerActionButtonsVue2 = {
         type: "submit",
         attrs: _this.v3 ? undefined : {
           type: "submit",
-          disabled: !_this.kendoForm.allowSubmit
+          themeColor: 'primary',
+          disabled: !_this.kendoForm.allowSubmit,
+          icon: 'save',
+          svgIcon: saveIcon
         },
+        themeColor: 'primary',
         disabled: !_this.kendoForm.allowSubmit,
+        icon: 'save',
+        svgIcon: saveIcon,
         onClick: _this.onSubmit,
         on: _this.v3 ? undefined : {
           "click": _this.onSubmit
@@ -77,7 +100,13 @@ var SchedulerActionButtonsVue2 = {
         onClick: _this.handleCancel,
         on: _this.v3 ? undefined : {
           "click": _this.handleCancel
-        }
+        },
+        icon: 'cancel',
+        attrs: _this.v3 ? undefined : {
+          icon: 'cancel',
+          svgIcon: cancelIcon
+        },
+        svgIcon: cancelIcon
       }, _this.v3 ? function () {
         return [_this.editCancelMessage];
       } : [_this.editCancelMessage])])

package/dist/es/components/SchedulerForm.js

@@ -134,7 +134,7 @@ var SchedulerFormVue2 = {
     var dialogProps = __assign({
       title: editorTitleMessage,
       appendTo: 'body',
-      minWidth: this.media === 'desktop' ? 600 : '85%',
+      minWidth: this.media === 'desktop' ? 400 : '85%',
       wrapperId: this.dialogId
     }, this.ks.dialogProps);
     var formProps = __assign({

package/dist/es/components/header/view-selector/SchedulerViewSelector.js

@@ -3,8 +3,6 @@ import * as Vue from 'vue';
 var allVue = Vue;
 var gh = allVue.h;
 var isV3 = allVue.version && allVue.version[0] === '3';
-import { ToolbarItem } from '@progress/kendo-vue-buttons';
-import { getDefaultSlots } from '@progress/kendo-vue-common';
 import { ViewSelectorList } from './ViewSelectorList';
 /**
  * @hidden
@@ -22,17 +20,7 @@ var SchedulerViewSelectorVue2 = {
   // @ts-ignore
   render: function render(createElement) {
     var h = gh || createElement;
-    var defaultSlot = getDefaultSlots(this);
-    return (
-      // @ts-ignore  function children
-      h(ToolbarItem
-      // ref={(item) => { if (item) { element.current = item.element; } }}
-      , {
-        "class": 'k-scheduler-views'
-      }, this.v3 ? function () {
-        return [h(ViewSelectorList)];
-      } : [h(ViewSelectorList)])
-    );
+    return h(ViewSelectorList);
   }
 };
 /**

package/dist/es/components/header/view-selector/ViewSelectorItem.js

@@ -42,6 +42,7 @@ var ViewSelectorItemVue2 = {
     return (
       // @ts-ignore function children
       h(Button, {
+        "class": "k-toolbar-button",
         role: "button",
         attrs: this.v3 ? undefined : {
           role: "button",

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

@@ -1,26 +1,12 @@
-var __assign = this && this.__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);
-};
 // @ts-ignore
 import * as Vue from 'vue';
 var allVue = Vue;
 var gh = allVue.h;
 var isV3 = allVue.version && allVue.version[0] === '3';
-import { DropDownButton, ButtonGroup } from '@progress/kendo-vue-buttons';
+import { ButtonGroup } from '@progress/kendo-vue-buttons';
 import { ViewSelectorItem } from './ViewSelectorItem';
 import { provideLocalizationService } from '@progress/kendo-vue-intl';
 import { messages, dropdownlistSelectViewAriaLabel } from '../../../messages/main';
-import { Icon } from '@progress/kendo-vue-common';
-import { caretAltDownIcon } from '@progress/kendo-svg-icons';
 /**
  * @hidden
  */
@@ -40,7 +26,9 @@ var ViewSelectorListVue2 = {
   mounted: function mounted() {
     this.calculateMedia();
     this.observer = new window.ResizeObserver(this.calculateMedia);
-    this.observer.observe(this.$el);
+    if (this.ks.scheduler) {
+      this.observer.observe(this.ks.scheduler.$el);
+    }
   },
   destroyed: !!isV3 ? undefined : function () {
     if (this.observer) {
@@ -77,70 +65,36 @@ var ViewSelectorListVue2 = {
     });
     var activeNameTitle = 'scheduler.' + activeView.name + 'ViewTitle';
     var activeName = this.localization.toLanguageString(activeNameTitle, messages[activeNameTitle]) || activeView.name;
-    return h("div", {
-      "class": "k-scheduler-views-wrapper"
-    }, [activeView && this.media === 'mobile' &&
-    // @ts-ignore  function children
-    h(DropDownButton, {
-      "class": "k-views-dropdown",
-      "aria-label": this.localization.toLanguageString(dropdownlistSelectViewAriaLabel, messages[dropdownlistSelectViewAriaLabel]),
-      attrs: this.v3 ? undefined : {
-        "aria-label": this.localization.toLanguageString(dropdownlistSelectViewAriaLabel, messages[dropdownlistSelectViewAriaLabel]),
+    var dropdown = function dropdown() {
+      return h("select", {
         tabIndex: -1,
-        popupSettings: {
-          popupClass: 'k-scheduler-toolbar'
+        attrs: this.v3 ? undefined : {
+          tabIndex: -1,
+          ariaLabel: this.localization.toLanguageString(dropdownlistSelectViewAriaLabel, messages[dropdownlistSelectViewAriaLabel])
         },
-        textField: "title",
-        items: views.map(function (v) {
-          var nameTitle = 'scheduler.' + v.name + 'ViewTitle';
-          var name = this.localization.toLanguageString(nameTitle, messages[nameTitle]) || v.name;
-          return __assign(__assign({}, v.props), {
-            selected: v.name === this.ks.activeViewName,
-            name: v.name,
-            title: v.title || name
-          });
-        }, this),
-        text: activeView.title || activeName
-      },
-      tabIndex: -1,
-      onItemclick: this.handleItemClick,
-      on: this.v3 ? undefined : {
-        "itemclick": this.handleItemClick
-      },
-      popupSettings: {
-        popupClass: 'k-scheduler-toolbar'
-      },
-      textField: "title",
-      items: views.map(function (v) {
+        "class": 'k-views-dropdown k-dropdown k-picker k-picker-solid k-rounded-md k-picker-md',
+        ariaLabel: this.localization.toLanguageString(dropdownlistSelectViewAriaLabel, messages[dropdownlistSelectViewAriaLabel]),
+        onChange: this.ddlChange,
+        on: this.v3 ? undefined : {
+          "change": this.ddlChange
+        }
+      }, [views.map(function (v) {
         var nameTitle = 'scheduler.' + v.name + 'ViewTitle';
         var name = this.localization.toLanguageString(nameTitle, messages[nameTitle]) || v.name;
-        return __assign(__assign({}, v.props), {
-          selected: v.name === this.ks.activeViewName,
-          name: v.name,
-          title: v.title || name
-        });
-      }, this),
-      text: activeView.title || activeName
-    }, this.v3 ? function () {
-      return [h(Icon, {
-        name: "caret-alt-down",
-        attrs: _this2.v3 ? undefined : {
-          name: "caret-alt-down",
-          icon: caretAltDownIcon
-        },
-        icon: caretAltDownIcon
-      })];
-    } : [h(Icon, {
-      name: "caret-alt-down",
-      attrs: _this2.v3 ? undefined : {
-        name: "caret-alt-down",
-        icon: caretAltDownIcon
-      },
-      icon: caretAltDownIcon
-    })]), this.media === 'desktop' &&
+        return h("option", {
+          value: this.v3 ? v.name || v.title || name : null,
+          domProps: this.v3 ? undefined : {
+            "value": v.name || v.title || name,
+            "selected": v.name === this.ks.activeViewName
+          },
+          selected: this.v3 ? v.name === this.ks.activeViewName : null
+        }, [v.title || name]);
+      }, this)]);
+    };
+    return activeView && this.media === 'mobile' ? dropdown.call(this) :
     // @ts-ignore  function children
     h(ButtonGroup, {
-      "class": "k-scheduler-views"
+      "class": "k-toolbar-button-group k-scheduler-views"
     }, this.v3 ? function () {
       return [views.map(function (view) {
         return h(ViewSelectorItem, {
@@ -159,14 +113,11 @@ var ViewSelectorListVue2 = {
           view: view
         }
       });
-    }, _this2)])]);
+    }, _this2)]);
   },
   methods: {
-    handleItemClick: function handleItemClick(event) {
-      event.event.preventDefault();
-      if (event.item.name || event.item.title) {
-        this.setActiveViewName(event.item.name || event.item.title);
-      }
+    ddlChange: function ddlChange(event) {
+      this.setActiveViewName(event.target.value);
     },
     calculateMedia: function calculateMedia() {
       this.media = window.matchMedia('(min-width: 1024px)').matches ? 'desktop' : 'mobile';