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

package/dist/es/Dialog.d.ts

@@ -44,6 +44,10 @@ export interface DialogProps {
      * Fires when the **Close** button in the title is clicked or when the `Esc` button is pressed.
      */
     onClose?: (event: DialogCloseEvent) => void;
+    /**
+     * Fires when modal overlay of the Window is clicked.
+     */
+    onOverlayclick?: (event: any) => void;
     /**
      * Sets the `aria-labelledby` value.
      */

package/dist/es/Dialog.js

@@ -12,6 +12,11 @@ import { DEFAULT_DIALOGS_ZINDEX } from './constants';
  */
 var DialogVue2 = {
   name: 'KendoDialog',
+  // @ts-ignore
+  emits: {
+    close: null,
+    overlayclick: null
+  },
   props: {
     appendTo: String,
     title: String,
@@ -86,6 +91,9 @@ var DialogVue2 = {
     },
     generateTitleId: function generateTitleId() {
       return 'dialog-title' + guid();
+    },
+    handleClick: function handleClick(e) {
+      this.$emit('overlayclick', e);
     }
   },
   // @ts-ignore
@@ -129,7 +137,11 @@ var DialogVue2 = {
       id: wrapperId,
       dir: dir
     }, [h("div", {
-      "class": "k-overlay"
+      "class": "k-overlay",
+      onClick: this.handleClick,
+      on: this.v3 ? undefined : {
+        "click": this.handleClick
+      }
     }), h("div", {
       "aria-labelledby": title || titleRender ? id : undefined,
       attrs: this.v3 ? undefined : {

package/dist/es/Window.js

@@ -16,7 +16,7 @@ var allVue = Vue;
 var gh = allVue.h;
 var isV3 = allVue.version && allVue.version[0] === '3';
 import { WindowTitleBar } from './WindowTitlebar';
-import { Keys, classNames, Draggable, templateDefinition, getDefaultSlots, templateRendering, getListeners, validatePackage } from '@progress/kendo-vue-common';
+import { Keys, classNames, guid, Draggable, templateDefinition, getDefaultSlots, templateRendering, getListeners, validatePackage } from '@progress/kendo-vue-common';
 import { ResizeHandlers } from './WindowResizeHandlers';
 import { windowStage } from './StageEnum';
 import { packageMetadata } from './package-metadata';
@@ -36,7 +36,8 @@ var WindowVue2 = {
     'resize': null,
     'move': null,
     'close': null,
-    'stagechange': null
+    'stagechange': null,
+    'overlayclick': null
   },
   provide: function provide() {
     return {
@@ -139,7 +140,9 @@ var WindowVue2 = {
       currentTop: this.getInitialTop(),
       currentLeft: this.getInitialLeft(),
       currentWidth: this.getInitialWidth(),
-      currentHeight: this.getInitialHeight()
+      currentHeight: this.getInitialHeight(),
+      _id: guid(),
+      titleId: this.generateTitleId()
     };
   },
   mounted: function mounted() {
@@ -362,6 +365,9 @@ var WindowVue2 = {
       }
       return height;
     },
+    generateTitleId: function generateTitleId() {
+      return 'window-title-' + this._id;
+    },
     handleMinimize: function handleMinimize(event) {
       event.preventDefault();
       this.windowCoordinatesState.leftBeforeAction = this.computedLeft;
@@ -464,6 +470,9 @@ var WindowVue2 = {
         this.currentWidth = window.innerWidth;
         this.currentHeight = window.innerHeight;
       }
+    },
+    handleClick: function handleClick(e) {
+      this.$emit('overlayclick', e);
     }
   },
   // @ts-ignore
@@ -482,11 +491,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');
@@ -506,6 +521,8 @@ var WindowVue2 = {
       onKeydown: this.handleKeyDown,
       ref: 'windowElement',
       "class": classNamesWindow,
+      role: 'dialog',
+      "aria-labelledby": this.titleId,
       style: __assign({
         top: this.computedTop + 'px',
         left: this.computedLeft + 'px',
@@ -532,6 +549,7 @@ var WindowVue2 = {
         attrs: _this.v3 ? undefined : {
           stage: _this.windowStage,
           title: _this.$props.title,
+          titleId: _this.titleId,
           titleRender: titleRender,
           closeButton: closeButton,
           minimizeButton: minimizeButton,
@@ -539,6 +557,7 @@ var WindowVue2 = {
           restoreButton: restoreButton
         },
         title: _this.$props.title,
+        titleId: _this.titleId,
         titleRender: titleRender,
         onDoubleclick: _this.handleDoubleClick,
         on: _this.v3 ? undefined : {
@@ -562,6 +581,7 @@ var WindowVue2 = {
       attrs: _this.v3 ? undefined : {
         stage: _this.windowStage,
         title: _this.$props.title,
+        titleId: _this.titleId,
         titleRender: titleRender,
         closeButton: closeButton,
         minimizeButton: minimizeButton,
@@ -569,6 +589,7 @@ var WindowVue2 = {
         restoreButton: restoreButton
       },
       title: _this.$props.title,
+      titleId: _this.titleId,
       titleRender: titleRender,
       onDoubleclick: _this.handleDoubleClick,
       on: _this.v3 ? undefined : {

package/dist/es/WindowProps.d.ts

@@ -127,4 +127,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/es/WindowTitlebar.d.ts

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

package/dist/es/WindowTitlebar.js

@@ -21,6 +21,7 @@ var WindowTitleBarVue2 = {
     maximizeButton: [String, Function, Object, Boolean],
     restoreButton: [String, Function, Object, Boolean],
     title: String,
+    titleId: String,
     titleRender: [String, Function, Object, Boolean]
   },
   inject: {
@@ -175,7 +176,11 @@ 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"
     }, [stage === windowStage.DEFAULT && minimizeButtonRender, stage === windowStage.DEFAULT && maximizeButtonRender, stage !== windowStage.DEFAULT && restoreButtonRender, closeButtonRender])]);

package/dist/es/package-metadata.js

@@ -5,7 +5,7 @@ export var packageMetadata = {
     name: '@progress/kendo-vue-dialogs',
     productName: 'Kendo UI for Vue',
     productCodes: ['KENDOUIVUE', 'KENDOUICOMPLETE'],
-    publishDate: 1669966363,
+    publishDate: 1672389550,
     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/dist/esm/Dialog.d.ts

@@ -44,6 +44,10 @@ export interface DialogProps {
      * Fires when the **Close** button in the title is clicked or when the `Esc` button is pressed.
      */
     onClose?: (event: DialogCloseEvent) => void;
+    /**
+     * Fires when modal overlay of the Window is clicked.
+     */
+    onOverlayclick?: (event: any) => void;
     /**
      * Sets the `aria-labelledby` value.
      */

package/dist/esm/Dialog.js

@@ -12,6 +12,11 @@ import { DEFAULT_DIALOGS_ZINDEX } from './constants.js';
  */
 var DialogVue2 = {
   name: 'KendoDialog',
+  // @ts-ignore
+  emits: {
+    close: null,
+    overlayclick: null
+  },
   props: {
     appendTo: String,
     title: String,
@@ -86,6 +91,9 @@ var DialogVue2 = {
     },
     generateTitleId: function generateTitleId() {
       return 'dialog-title' + guid();
+    },
+    handleClick: function handleClick(e) {
+      this.$emit('overlayclick', e);
     }
   },
   // @ts-ignore
@@ -129,7 +137,11 @@ var DialogVue2 = {
       id: wrapperId,
       dir: dir
     }, [h("div", {
-      "class": "k-overlay"
+      "class": "k-overlay",
+      onClick: this.handleClick,
+      on: this.v3 ? undefined : {
+        "click": this.handleClick
+      }
     }), h("div", {
       "aria-labelledby": title || titleRender ? id : undefined,
       attrs: this.v3 ? undefined : {

package/dist/esm/Window.js

@@ -16,7 +16,7 @@ var allVue = Vue;
 var gh = allVue.h;
 var isV3 = allVue.version && allVue.version[0] === '3';
 import { WindowTitleBar } from './WindowTitlebar.js';
-import { Keys, classNames, Draggable, templateDefinition, getDefaultSlots, templateRendering, getListeners, validatePackage } from '@progress/kendo-vue-common';
+import { Keys, classNames, guid, Draggable, templateDefinition, getDefaultSlots, templateRendering, getListeners, validatePackage } from '@progress/kendo-vue-common';
 import { ResizeHandlers } from './WindowResizeHandlers.js';
 import { windowStage } from './StageEnum.js';
 import { packageMetadata } from './package-metadata.js';
@@ -36,7 +36,8 @@ var WindowVue2 = {
     'resize': null,
     'move': null,
     'close': null,
-    'stagechange': null
+    'stagechange': null,
+    'overlayclick': null
   },
   provide: function provide() {
     return {
@@ -139,7 +140,9 @@ var WindowVue2 = {
       currentTop: this.getInitialTop(),
       currentLeft: this.getInitialLeft(),
       currentWidth: this.getInitialWidth(),
-      currentHeight: this.getInitialHeight()
+      currentHeight: this.getInitialHeight(),
+      _id: guid(),
+      titleId: this.generateTitleId()
     };
   },
   mounted: function mounted() {
@@ -362,6 +365,9 @@ var WindowVue2 = {
       }
       return height;
     },
+    generateTitleId: function generateTitleId() {
+      return 'window-title-' + this._id;
+    },
     handleMinimize: function handleMinimize(event) {
       event.preventDefault();
       this.windowCoordinatesState.leftBeforeAction = this.computedLeft;
@@ -464,6 +470,9 @@ var WindowVue2 = {
         this.currentWidth = window.innerWidth;
         this.currentHeight = window.innerHeight;
       }
+    },
+    handleClick: function handleClick(e) {
+      this.$emit('overlayclick', e);
     }
   },
   // @ts-ignore
@@ -482,11 +491,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');
@@ -506,6 +521,8 @@ var WindowVue2 = {
       onKeydown: this.handleKeyDown,
       ref: 'windowElement',
       "class": classNamesWindow,
+      role: 'dialog',
+      "aria-labelledby": this.titleId,
       style: __assign({
         top: this.computedTop + 'px',
         left: this.computedLeft + 'px',
@@ -532,6 +549,7 @@ var WindowVue2 = {
         attrs: _this.v3 ? undefined : {
           stage: _this.windowStage,
           title: _this.$props.title,
+          titleId: _this.titleId,
           titleRender: titleRender,
           closeButton: closeButton,
           minimizeButton: minimizeButton,
@@ -539,6 +557,7 @@ var WindowVue2 = {
           restoreButton: restoreButton
         },
         title: _this.$props.title,
+        titleId: _this.titleId,
         titleRender: titleRender,
         onDoubleclick: _this.handleDoubleClick,
         on: _this.v3 ? undefined : {
@@ -562,6 +581,7 @@ var WindowVue2 = {
       attrs: _this.v3 ? undefined : {
         stage: _this.windowStage,
         title: _this.$props.title,
+        titleId: _this.titleId,
         titleRender: titleRender,
         closeButton: closeButton,
         minimizeButton: minimizeButton,
@@ -569,6 +589,7 @@ var WindowVue2 = {
         restoreButton: restoreButton
       },
       title: _this.$props.title,
+      titleId: _this.titleId,
       titleRender: titleRender,
       onDoubleclick: _this.handleDoubleClick,
       on: _this.v3 ? undefined : {

package/dist/esm/WindowProps.d.ts

@@ -127,4 +127,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/esm/WindowTitlebar.d.ts

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

package/dist/esm/WindowTitlebar.js

@@ -21,6 +21,7 @@ var WindowTitleBarVue2 = {
     maximizeButton: [String, Function, Object, Boolean],
     restoreButton: [String, Function, Object, Boolean],
     title: String,
+    titleId: String,
     titleRender: [String, Function, Object, Boolean]
   },
   inject: {
@@ -175,7 +176,11 @@ 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"
     }, [stage === windowStage.DEFAULT && minimizeButtonRender, stage === windowStage.DEFAULT && maximizeButtonRender, stage !== windowStage.DEFAULT && restoreButtonRender, closeButtonRender])]);

package/dist/esm/package-metadata.js

@@ -5,7 +5,7 @@ export var packageMetadata = {
     name: '@progress/kendo-vue-dialogs',
     productName: 'Kendo UI for Vue',
     productCodes: ['KENDOUIVUE', 'KENDOUICOMPLETE'],
-    publishDate: 1669966363,
+    publishDate: 1672389550,
     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/dist/npm/Dialog.d.ts

@@ -44,6 +44,10 @@ export interface DialogProps {
      * Fires when the **Close** button in the title is clicked or when the `Esc` button is pressed.
      */
     onClose?: (event: DialogCloseEvent) => void;
+    /**
+     * Fires when modal overlay of the Window is clicked.
+     */
+    onOverlayclick?: (event: any) => void;
     /**
      * Sets the `aria-labelledby` value.
      */

package/dist/npm/Dialog.js

@@ -18,6 +18,11 @@ var constants_1 = require("./constants");
  */
 var DialogVue2 = {
   name: 'KendoDialog',
+  // @ts-ignore
+  emits: {
+    close: null,
+    overlayclick: null
+  },
   props: {
     appendTo: String,
     title: String,
@@ -92,6 +97,9 @@ var DialogVue2 = {
     },
     generateTitleId: function generateTitleId() {
       return 'dialog-title' + (0, kendo_vue_common_1.guid)();
+    },
+    handleClick: function handleClick(e) {
+      this.$emit('overlayclick', e);
     }
   },
   // @ts-ignore
@@ -135,7 +143,11 @@ var DialogVue2 = {
       id: wrapperId,
       dir: dir
     }, [h("div", {
-      "class": "k-overlay"
+      "class": "k-overlay",
+      onClick: this.handleClick,
+      on: this.v3 ? undefined : {
+        "click": this.handleClick
+      }
     }), h("div", {
       "aria-labelledby": title || titleRender ? id : undefined,
       attrs: this.v3 ? undefined : {

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 {
@@ -145,7 +146,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() {
@@ -368,6 +371,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,6 +476,9 @@ var WindowVue2 = {
         this.currentWidth = window.innerWidth;
         this.currentHeight = window.innerHeight;
       }
+    },
+    handleClick: function handleClick(e) {
+      this.$emit('overlayclick', e);
     }
   },
   // @ts-ignore
@@ -488,11 +497,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');
@@ -512,6 +527,8 @@ var WindowVue2 = {
       onKeydown: this.handleKeyDown,
       ref: 'windowElement',
       "class": classNamesWindow,
+      role: 'dialog',
+      "aria-labelledby": this.titleId,
       style: __assign({
         top: this.computedTop + 'px',
         left: this.computedLeft + 'px',
@@ -538,6 +555,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 +563,7 @@ var WindowVue2 = {
           restoreButton: restoreButton
         },
         title: _this.$props.title,
+        titleId: _this.titleId,
         titleRender: titleRender,
         onDoubleclick: _this.handleDoubleClick,
         on: _this.v3 ? undefined : {
@@ -568,6 +587,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 +595,7 @@ var WindowVue2 = {
         restoreButton: restoreButton
       },
       title: _this.$props.title,
+      titleId: _this.titleId,
       titleRender: titleRender,
       onDoubleclick: _this.handleDoubleClick,
       on: _this.v3 ? undefined : {

package/dist/npm/WindowProps.d.ts

@@ -127,4 +127,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

@@ -27,6 +27,7 @@ var WindowTitleBarVue2 = {
     maximizeButton: [String, Function, Object, Boolean],
     restoreButton: [String, Function, Object, Boolean],
     title: String,
+    titleId: String,
     titleRender: [String, Function, Object, Boolean]
   },
   inject: {
@@ -181,7 +182,11 @@ 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"
     }, [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: 1672389550,
     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.202212300853",
   "repository": {
     "type": "git",
     "url": "https://github.com/telerik/kendo-vue.git"
@@ -43,12 +43,12 @@
     "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.202212300853",
+    "@progress/kendo-vue-common": "3.7.4-dev.202212300853"
   },
   "devDependencies": {
     "@progress/kendo-licensing": "^1.1.0",
-    "@progress/kendo-vue-intl": "3.7.4-dev.202212020747"
+    "@progress/kendo-vue-intl": "3.7.4-dev.202212300853"
   },
   "author": "Progress",
   "license": "SEE LICENSE IN LICENSE.md",