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

package/dist/npm/Scheduler.js

@@ -32,14 +32,14 @@ var gh = allVue.h;
 var isV3 = allVue.version && allVue.version[0] === '3';
 var main_1 = require("./utils/main");
 var kendo_vue_common_1 = require("@progress/kendo-vue-common");
-var kendo_vue_intl_1 = require("@progress/kendo-vue-intl");
 var SchedulerHeader_1 = require("./components/header/SchedulerHeader");
+var kendo_vue_intl_1 = require("@progress/kendo-vue-intl");
 var SchedulerNavigation_1 = require("./components/header/navigation/SchedulerNavigation");
-var SchedulerViewSelector_1 = require("./components/header/view-selector/SchedulerViewSelector");
 var kendo_date_math_1 = require("@progress/kendo-date-math");
 var SchedulerFooter_1 = require("./components/footer/SchedulerFooter");
 var kendo_vue_buttons_1 = require("@progress/kendo-vue-buttons");
 var NavigationDatePicker_1 = require("./components/header/navigation/NavigationDatePicker");
+var ViewSelectorList_1 = require("./components/header/view-selector/ViewSelectorList");
 var BusinessHours_1 = require("./components/footer/bussiness-hours/BusinessHours");
 var DayView_1 = require("./views/day/DayView");
 var kendo_vue_common_2 = require("@progress/kendo-vue-common");
@@ -127,9 +127,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
@@ -139,6 +142,9 @@ var SchedulerVue2 = {
       return (0, main_1.getModelFields)(this.$props.modelFields).fields;
     }
   },
+  mounted: function mounted() {
+    this.currentRtl = (0, kendo_vue_common_1.isRtl)(this.$el);
+  },
   provide: function provide() {
     return {
       ks: this.ks,
@@ -201,6 +207,9 @@ var SchedulerVue2 = {
     };
   },
   watch: {
+    isRtl: function isRtl(newRtl) {
+      this.ks.isRtl = newRtl;
+    },
     view: function view(newName) {
       this.updatePassedState(newName);
     },
@@ -230,7 +239,6 @@ var SchedulerVue2 = {
     var h = gh || createElement;
     (0, kendo_vue_common_2.validatePackage)(package_metadata_1.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_1.DayView);
@@ -249,7 +257,6 @@ var SchedulerVue2 = {
     this.ks.dialogProps = view.dialogProps || this.$props.dialogProps;
     this.ks.formProps = view.formProps || this.$props.formProps;
     var currentEditable = (0, main_3.useEditable)(view.editable !== undefined ? view.editable : this.$props.editable);
-    var ViewSelector = SchedulerViewSelector_1.SchedulerViewSelector;
     var viewComponent = this.getViewComponentByName(this.ks.activeViewName || view.name);
     var viewProps = __assign(__assign(__assign({}, this.$props), this.ks.view), {
       showWorkHours: this.ks.showWorkHours,
@@ -289,7 +296,7 @@ var SchedulerVue2 = {
         on: _this2.v3 ? undefined : {
           "change": _this2.handleDatePickerChange
         }
-      }), h(kendo_vue_buttons_1.ToolbarSpacer), h(ViewSelector)];
+      }), h(kendo_vue_buttons_1.ToolbarSpacer), h(ViewSelectorList_1.ViewSelectorList)];
     } : [h(SchedulerNavigation_1.SchedulerNavigation, {
       onPrevclick: _this2.handlePrevClick,
       on: _this2.v3 ? undefined : {
@@ -308,7 +315,7 @@ var SchedulerVue2 = {
       on: _this2.v3 ? undefined : {
         "change": _this2.handleDatePickerChange
       }
-    }), h(kendo_vue_buttons_1.ToolbarSpacer), h(ViewSelector)]);
+    }), h(kendo_vue_buttons_1.ToolbarSpacer), h(ViewSelectorList_1.ViewSelectorList)]);
     headerRender = kendo_vue_common_1.getTemplate.call(this, {
       h: h,
       template: header,
@@ -366,8 +373,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
@@ -378,6 +385,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/npm/components/SchedulerActionButtons.js

@@ -11,6 +11,7 @@ var gh = allVue.h;
 var isV3 = allVue.version && allVue.version[0] === '3';
 var kendo_vue_buttons_1 = require("@progress/kendo-vue-buttons");
 var kendo_vue_dialogs_1 = require("@progress/kendo-vue-dialogs");
+var kendo_svg_icons_1 = require("@progress/kendo-svg-icons");
 /**
  * @hidden
  */
@@ -39,7 +40,11 @@ var SchedulerActionButtonsVue2 = {
     return (
       // @ts-ignore  function children
       h(kendo_vue_dialogs_1.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
@@ -47,9 +52,15 @@ var SchedulerActionButtonsVue2 = {
           type: "submit",
           attrs: _this.v3 ? undefined : {
             type: "submit",
-            disabled: !_this.kendoForm.allowSubmit
+            themeColor: 'primary',
+            disabled: !_this.kendoForm.allowSubmit,
+            icon: 'save',
+            svgIcon: kendo_svg_icons_1.saveIcon
           },
+          themeColor: 'primary',
           disabled: !_this.kendoForm.allowSubmit,
+          icon: 'save',
+          svgIcon: kendo_svg_icons_1.saveIcon,
           onClick: _this.onSubmit,
           on: _this.v3 ? undefined : {
             "click": _this.onSubmit
@@ -62,7 +73,13 @@ var SchedulerActionButtonsVue2 = {
           onClick: _this.handleCancel,
           on: _this.v3 ? undefined : {
             "click": _this.handleCancel
-          }
+          },
+          icon: 'cancel',
+          attrs: _this.v3 ? undefined : {
+            icon: 'cancel',
+            svgIcon: kendo_svg_icons_1.cancelIcon
+          },
+          svgIcon: kendo_svg_icons_1.cancelIcon
         }, _this.v3 ? function () {
           return [_this.editCancelMessage];
         } : [_this.editCancelMessage])];
@@ -70,9 +87,15 @@ var SchedulerActionButtonsVue2 = {
         type: "submit",
         attrs: _this.v3 ? undefined : {
           type: "submit",
-          disabled: !_this.kendoForm.allowSubmit
+          themeColor: 'primary',
+          disabled: !_this.kendoForm.allowSubmit,
+          icon: 'save',
+          svgIcon: kendo_svg_icons_1.saveIcon
         },
+        themeColor: 'primary',
         disabled: !_this.kendoForm.allowSubmit,
+        icon: 'save',
+        svgIcon: kendo_svg_icons_1.saveIcon,
         onClick: _this.onSubmit,
         on: _this.v3 ? undefined : {
           "click": _this.onSubmit
@@ -83,7 +106,13 @@ var SchedulerActionButtonsVue2 = {
         onClick: _this.handleCancel,
         on: _this.v3 ? undefined : {
           "click": _this.handleCancel
-        }
+        },
+        icon: 'cancel',
+        attrs: _this.v3 ? undefined : {
+          icon: 'cancel',
+          svgIcon: kendo_svg_icons_1.cancelIcon
+        },
+        svgIcon: kendo_svg_icons_1.cancelIcon
       }, _this.v3 ? function () {
         return [_this.editCancelMessage];
       } : [_this.editCancelMessage])])

package/dist/npm/components/SchedulerForm.js

@@ -140,7 +140,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/npm/components/header/view-selector/SchedulerViewSelector.js

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

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

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

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

@@ -1,17 +1,5 @@
 "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
 });
@@ -25,8 +13,6 @@ var kendo_vue_buttons_1 = require("@progress/kendo-vue-buttons");
 var ViewSelectorItem_1 = require("./ViewSelectorItem");
 var kendo_vue_intl_1 = require("@progress/kendo-vue-intl");
 var main_1 = require("../../../messages/main");
-var kendo_vue_common_1 = require("@progress/kendo-vue-common");
-var kendo_svg_icons_1 = require("@progress/kendo-svg-icons");
 /**
  * @hidden
  */
@@ -46,7 +32,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) {
@@ -83,70 +71,36 @@ var ViewSelectorListVue2 = {
     });
     var activeNameTitle = 'scheduler.' + activeView.name + 'ViewTitle';
     var activeName = this.localization.toLanguageString(activeNameTitle, main_1.messages[activeNameTitle]) || activeView.name;
-    return h("div", {
-      "class": "k-scheduler-views-wrapper"
-    }, [activeView && this.media === 'mobile' &&
-    // @ts-ignore  function children
-    h(kendo_vue_buttons_1.DropDownButton, {
-      "class": "k-views-dropdown",
-      "aria-label": this.localization.toLanguageString(main_1.dropdownlistSelectViewAriaLabel, main_1.messages[main_1.dropdownlistSelectViewAriaLabel]),
-      attrs: this.v3 ? undefined : {
-        "aria-label": this.localization.toLanguageString(main_1.dropdownlistSelectViewAriaLabel, main_1.messages[main_1.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(main_1.dropdownlistSelectViewAriaLabel, main_1.messages[main_1.dropdownlistSelectViewAriaLabel])
         },
-        textField: "title",
-        items: views.map(function (v) {
-          var nameTitle = 'scheduler.' + v.name + 'ViewTitle';
-          var name = this.localization.toLanguageString(nameTitle, main_1.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(main_1.dropdownlistSelectViewAriaLabel, main_1.messages[main_1.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, main_1.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(kendo_vue_common_1.Icon, {
-        name: "caret-alt-down",
-        attrs: _this2.v3 ? undefined : {
-          name: "caret-alt-down",
-          icon: kendo_svg_icons_1.caretAltDownIcon
-        },
-        icon: kendo_svg_icons_1.caretAltDownIcon
-      })];
-    } : [h(kendo_vue_common_1.Icon, {
-      name: "caret-alt-down",
-      attrs: _this2.v3 ? undefined : {
-        name: "caret-alt-down",
-        icon: kendo_svg_icons_1.caretAltDownIcon
-      },
-      icon: kendo_svg_icons_1.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(kendo_vue_buttons_1.ButtonGroup, {
-      "class": "k-scheduler-views"
+      "class": "k-toolbar-button-group k-scheduler-views"
     }, this.v3 ? function () {
       return [views.map(function (view) {
         return h(ViewSelectorItem_1.ViewSelectorItem, {
@@ -165,14 +119,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';