@progress/kendo-vue-dialogs 3.7.4-dev.202212020747 → 3.7.4-dev.202301091431

package/dist/npm/Window.js

@@ -42,7 +42,8 @@ var WindowVue2 = {
     'resize': null,
     'move': null,
     'close': null,
-    'stagechange': null
+    'stagechange': null,
+    'overlayclick': null
   },
   provide: function provide() {
     return {
@@ -110,6 +111,12 @@ var WindowVue2 = {
       validator: function validator(value) {
         return ['DEFAULT', 'MINIMIZED', 'FULLSCREEN'].indexOf(value) !== -1;
       }
+    },
+    themeColor: {
+      type: String,
+      validator: function validator(value) {
+        return [undefined, 'primary', 'dark', 'light'].includes(value);
+      }
     }
   },
   // @ts-ignore
@@ -145,7 +152,9 @@ var WindowVue2 = {
       currentTop: this.getInitialTop(),
       currentLeft: this.getInitialLeft(),
       currentWidth: this.getInitialWidth(),
-      currentHeight: this.getInitialHeight()
+      currentHeight: this.getInitialHeight(),
+      _id: (0, kendo_vue_common_1.guid)(),
+      titleId: this.generateTitleId()
     };
   },
   mounted: function mounted() {
@@ -174,6 +183,15 @@ var WindowVue2 = {
     }
   },
   computed: {
+    windowElementClass: function windowElementClass() {
+      var _a;
+      var _b = this.$props,
+        windowClass = _b.windowClass,
+        themeColor = _b.themeColor;
+      return _a = {
+        'k-window': true
+      }, _a[windowClass] = windowClass, _a["k-window-".concat(themeColor)] = themeColor, _a['k-window-minimized'] = this.currentStage === 'MINIMIZED', _a;
+    },
     computedTop: function computedTop() {
       if (this.windowStage !== StageEnum_1.windowStage.FULLSCREEN) {
         return Math.max(this.$props.top || this.currentTop, 0);
@@ -368,6 +386,9 @@ var WindowVue2 = {
       }
       return height;
     },
+    generateTitleId: function generateTitleId() {
+      return 'window-title-' + this._id;
+    },
     handleMinimize: function handleMinimize(event) {
       event.preventDefault();
       this.windowCoordinatesState.leftBeforeAction = this.computedLeft;
@@ -470,15 +491,15 @@ var WindowVue2 = {
         this.currentWidth = window.innerWidth;
         this.currentHeight = window.innerHeight;
       }
+    },
+    handleClick: function handleClick(e) {
+      this.$emit('overlayclick', e);
     }
   },
   // @ts-ignore
   render: function render(createElement) {
     var _this = this;
     var h = gh || createElement;
-    var classNamesWindow = (0, kendo_vue_common_1.classNames)('k-widget', 'k-window', this.$props.windowClass, {
-      'k-window-minimized': this.currentStage === 'MINIMIZED'
-    });
     var titleRender = kendo_vue_common_1.templateRendering.call(this, this.$props.titleRender, kendo_vue_common_1.getListeners.call(this));
     var closeButton = kendo_vue_common_1.templateRendering.call(this, this.$props.closeButton, kendo_vue_common_1.getListeners.call(this));
     var minimizeButton = kendo_vue_common_1.templateRendering.call(this, this.$props.minimizeButton, kendo_vue_common_1.getListeners.call(this));
@@ -488,11 +509,17 @@ var WindowVue2 = {
     var windowElement = h("div", {
       ref: 'wrapper'
     }, [this.$props.modal && h("div", {
-      "class": "k-overlay"
+      "class": "k-overlay",
+      onClick: this.handleClick,
+      on: this.v3 ? undefined : {
+        "click": this.handleClick
+      }
     }), h("div", {
       tabindex: 0,
       attrs: this.v3 ? undefined : {
-        tabindex: 0
+        tabindex: 0,
+        role: 'dialog',
+        "aria-labelledby": this.titleId
       },
       onFocus: function onFocus(e) {
         return e.target.classList.add('k-focus');
@@ -511,7 +538,9 @@ var WindowVue2 = {
       },
       onKeydown: this.handleKeyDown,
       ref: 'windowElement',
-      "class": classNamesWindow,
+      "class": this.windowElementClass,
+      role: 'dialog',
+      "aria-labelledby": this.titleId,
       style: __assign({
         top: this.computedTop + 'px',
         left: this.computedLeft + 'px',
@@ -538,6 +567,7 @@ var WindowVue2 = {
         attrs: _this.v3 ? undefined : {
           stage: _this.windowStage,
           title: _this.$props.title,
+          titleId: _this.titleId,
           titleRender: titleRender,
           closeButton: closeButton,
           minimizeButton: minimizeButton,
@@ -545,6 +575,7 @@ var WindowVue2 = {
           restoreButton: restoreButton
         },
         title: _this.$props.title,
+        titleId: _this.titleId,
         titleRender: titleRender,
         onDoubleclick: _this.handleDoubleClick,
         on: _this.v3 ? undefined : {
@@ -568,6 +599,7 @@ var WindowVue2 = {
       attrs: _this.v3 ? undefined : {
         stage: _this.windowStage,
         title: _this.$props.title,
+        titleId: _this.titleId,
         titleRender: titleRender,
         closeButton: closeButton,
         minimizeButton: minimizeButton,
@@ -575,6 +607,7 @@ var WindowVue2 = {
         restoreButton: restoreButton
       },
       title: _this.$props.title,
+      titleId: _this.titleId,
       titleRender: titleRender,
       onDoubleclick: _this.handleDoubleClick,
       on: _this.v3 ? undefined : {
@@ -593,7 +626,7 @@ var WindowVue2 = {
       maximizeButton: maximizeButton,
       restoreButton: restoreButton
     })]), this.windowStage !== StageEnum_1.windowStage.MINIMIZED ? h("div", {
-      "class": "k-content k-window-content"
+      "class": "k-window-content"
     }, [defaultSlot]) : null, this.windowStage === StageEnum_1.windowStage.DEFAULT && this.$props.resizable
     // @ts-ignore  function children
     ? h(WindowResizeHandlers_1.ResizeHandlers, {

package/dist/npm/WindowProps.d.ts

@@ -77,6 +77,10 @@ export interface WindowProps {
      * Specifies if the Window will be resizable ([see example]({% slug dimensionsresizing_window %}#toc-resizing)).
      */
     resizable?: boolean;
+    /**
+     * Specifies the theme color of the Dialog.
+     */
+    themeColor?: 'promary' | 'dark' | 'light' | string;
     /**
      * Acccepts a named slot `string`, functional or class component for the restore button. If set to `false` the button is not rendered.
      * @default true
@@ -127,4 +131,8 @@ export interface WindowProps {
      * Fires when the Window resizes.
      */
     onResize?: (event: WindowMoveEvent) => void;
+    /**
+     * Fires when modal overlay of the Window is clicked.
+     */
+    onOverlayclick?: (event: any) => void;
 }

package/dist/npm/WindowTitlebar.d.ts

@@ -36,6 +36,10 @@ export interface WindowTitleBarProps {
      * @hidden
      */
     title?: string;
+    /**
+     * @hidden
+     */
+    titleId?: string;
     /**
      * @hidden
      */

package/dist/npm/WindowTitlebar.js

@@ -14,6 +14,7 @@ var kendo_vue_buttons_1 = require("@progress/kendo-vue-buttons");
 var kendo_vue_intl_1 = require("@progress/kendo-vue-intl");
 var StageEnum_1 = require("./StageEnum");
 var main_1 = require("./messages/main");
+var kendo_svg_icons_1 = require("@progress/kendo-svg-icons");
 /**
  * @hidden
  */
@@ -27,6 +28,7 @@ var WindowTitleBarVue2 = {
     maximizeButton: [String, Function, Object, Boolean],
     restoreButton: [String, Function, Object, Boolean],
     title: String,
+    titleId: String,
     titleRender: [String, Function, Object, Boolean]
   },
   inject: {
@@ -82,11 +84,13 @@ var WindowTitleBarVue2 = {
       attrs: this.v3 ? undefined : {
         type: "button",
         icon: 'window-minimize',
+        svgIcon: kendo_svg_icons_1.windowMinimizeIcon,
         fillMode: 'flat',
         "aria-label": ls.toLanguageString(main_1.dialogsWindowMinimizeButton, main_1.messages[main_1.dialogsWindowMinimizeButton])
       },
-      "class": "k-window-action",
+      "class": "k-window-titlebar-action",
       icon: 'window-minimize',
+      svgIcon: kendo_svg_icons_1.windowMinimizeIcon,
       fillMode: 'flat',
       onClick: this.onMinimizeClick,
       on: this.v3 ? undefined : {
@@ -105,12 +109,14 @@ var WindowTitleBarVue2 = {
       type: "button",
       attrs: this.v3 ? undefined : {
         type: "button",
-        icon: 'window-maximize',
+        icon: 'window',
+        svgIcon: kendo_svg_icons_1.windowIcon,
         fillMode: 'flat',
         "aria-label": ls.toLanguageString(main_1.dialogsWindowMaximizeButton, main_1.messages[main_1.dialogsWindowMaximizeButton])
       },
-      "class": "k-window-action",
-      icon: 'window-maximize',
+      "class": "k-window-titlebar-action",
+      icon: 'window',
+      svgIcon: kendo_svg_icons_1.windowIcon,
       fillMode: 'flat',
       onClick: this.onFullScreenClick,
       on: this.v3 ? undefined : {
@@ -130,11 +136,13 @@ var WindowTitleBarVue2 = {
       attrs: this.v3 ? undefined : {
         type: "button",
         icon: 'window-restore',
+        svgIcon: kendo_svg_icons_1.windowRestoreIcon,
         fillMode: 'flat',
         "aria-label": ls.toLanguageString(main_1.dialogsWindowRestoreButton, main_1.messages[main_1.dialogsWindowRestoreButton])
       },
-      "class": "k-window-action",
+      "class": "k-window-titlebar-action",
       icon: 'window-restore',
+      svgIcon: kendo_svg_icons_1.windowRestoreIcon,
       fillMode: 'flat',
       onClick: this.onRestoreClick,
       on: this.v3 ? undefined : {
@@ -154,11 +162,13 @@ var WindowTitleBarVue2 = {
       attrs: this.v3 ? undefined : {
         type: "button",
         icon: 'x',
+        svgIcon: kendo_svg_icons_1.xIcon,
         fillMode: 'flat',
         "aria-label": ls.toLanguageString(main_1.dialogsWindowCloseButton, main_1.messages[main_1.dialogsWindowCloseButton])
       },
-      "class": "k-window-action",
+      "class": "k-window-titlebar-action",
       icon: 'x',
+      svgIcon: kendo_svg_icons_1.xIcon,
       fillMode: 'flat',
       onClick: this.onCloseClick,
       on: this.v3 ? undefined : {
@@ -172,7 +182,7 @@ var WindowTitleBarVue2 = {
       defaultRendering: closeButtonDefault
     });
     return h("div", {
-      "class": "k-window-titlebar k-dialog-titlebar",
+      "class": "k-window-titlebar",
       style: {
         touchAction: 'none'
       },
@@ -181,9 +191,13 @@ var WindowTitleBarVue2 = {
         "dblclick": this.onDoubleClick
       }
     }, [h("div", {
-      "class": "k-window-title"
+      "class": "k-window-title",
+      id: this.$props.titleId,
+      attrs: this.v3 ? undefined : {
+        id: this.$props.titleId
+      }
     }, [titleElement]), h("div", {
-      "class": "k-window-actions"
+      "class": "k-window-titlebar-actions"
     }, [stage === StageEnum_1.windowStage.DEFAULT && minimizeButtonRender, stage === StageEnum_1.windowStage.DEFAULT && maximizeButtonRender, stage !== StageEnum_1.windowStage.DEFAULT && restoreButtonRender, closeButtonRender])]);
   }
 };

package/dist/npm/package-metadata.js

@@ -8,7 +8,7 @@ exports.packageMetadata = {
     name: '@progress/kendo-vue-dialogs',
     productName: 'Kendo UI for Vue',
     productCodes: ['KENDOUIVUE', 'KENDOUICOMPLETE'],
-    publishDate: 1669966363,
+    publishDate: 1673273393,
     version: '',
     licensingDocsUrl: 'https://www.telerik.com/kendo-vue-ui/my-license/?utm_medium=product&utm_source=kendovue&utm_campaign=kendo-ui-vue-purchase-license-keys-warning'
 };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@progress/kendo-vue-dialogs",
   "description": "Kendo UI for Vue Dialogs package",
-  "version": "3.7.4-dev.202212020747",
+  "version": "3.7.4-dev.202301091431",
   "repository": {
     "type": "git",
     "url": "https://github.com/telerik/kendo-vue.git"
@@ -38,17 +38,19 @@
     "framework": "Kendo UI for Vue"
   },
   "peerDependencies": {
-    "@progress/kendo-licensing": "^1.1.0",
+    "@progress/kendo-licensing": "^1.3.0",
+    "@progress/kendo-svg-icons": "^1.0.0",
     "@progress/kendo-vue-intl": "^3.6.0",
     "vue": "^2.6.12 || ^3.0.2"
   },
   "dependencies": {
-    "@progress/kendo-vue-buttons": "3.7.4-dev.202212020747",
-    "@progress/kendo-vue-common": "3.7.4-dev.202212020747"
+    "@progress/kendo-vue-buttons": "3.7.4-dev.202301091431",
+    "@progress/kendo-vue-common": "3.7.4-dev.202301091431"
   },
   "devDependencies": {
-    "@progress/kendo-licensing": "^1.1.0",
-    "@progress/kendo-vue-intl": "3.7.4-dev.202212020747"
+    "@progress/kendo-licensing": "^1.3.0",
+    "@progress/kendo-svg-icons": "^1.0.0",
+    "@progress/kendo-vue-intl": "3.7.4-dev.202301091431"
   },
   "author": "Progress",
   "license": "SEE LICENSE IN LICENSE.md",