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

package/dist/es/Dialog.d.ts

@@ -40,10 +40,18 @@ export interface DialogProps {
      * Specifies the minimum width of the Dialog.
      */
     minWidth?: number | string;
+    /**
+     * Specifies the theme color of the Dialog.
+     */
+    themeColor?: 'promary' | 'dark' | 'light' | string;
     /**
      * 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.
      */
@@ -64,6 +72,7 @@ export interface DialogProps {
      * The styles that are applied to the content of the Dialog.
      */
     contentStyle?: any;
+    dialogClass?: string;
 }
 /**
  * @hidden

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,
@@ -25,7 +30,14 @@ var DialogVue2 = {
     },
     width: [String, Number],
     height: [String, Number],
-    minWidth: [String, Number]
+    minWidth: [String, Number],
+    dialogClass: String,
+    themeColor: {
+      type: String,
+      validator: function validator(value) {
+        return ['primary', 'dark', 'light'].includes(value);
+      }
+    }
   },
   provide: function provide() {
     return {
@@ -43,6 +55,18 @@ var DialogVue2 = {
       v3: v3
     };
   },
+  computed: {
+    dialogElementClass: function dialogElementClass() {
+      var _a;
+      var _b = this.$props,
+        dialogClass = _b.dialogClass,
+        themeColor = _b.themeColor;
+      return _a = {
+        'k-window': true,
+        'k-dialog': true
+      }, _a[dialogClass] = dialogClass, _a["k-window-".concat(themeColor)] = themeColor, _a;
+    }
+  },
   mounted: function mounted() {
     if (this.$props.appendTo) {
       var body = document.querySelector(this.$props.appendTo);
@@ -86,6 +110,9 @@ var DialogVue2 = {
     },
     generateTitleId: function generateTitleId() {
       return 'dialog-title' + guid();
+    },
+    handleClick: function handleClick(e) {
+      this.$emit('overlayclick', e);
     }
   },
   // @ts-ignore
@@ -129,14 +156,18 @@ 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 : {
         "aria-labelledby": title || titleRender ? id : undefined,
         role: "dialog"
       },
-      "class": "k-widget k-window k-dialog",
+      "class": "k-window k-dialog",
       role: "dialog",
       style: {
         width: width,
@@ -161,7 +192,7 @@ var DialogVue2 = {
       title: title,
       titleRender: titleRender
     }), h("div", {
-      "class": "k-content k-window-content k-dialog-content",
+      "class": "k-window-content k-dialog-content",
       style: contentStyle
     }, [content]), actions])]);
     return this.$props.appendTo ? h("div", [dialog]) : dialog;

package/dist/es/DialogActionsBar.d.ts

@@ -7,8 +7,25 @@ declare type DefaultMethods<V> = {
  * @hidden
  */
 export interface DialogActionsBarProps {
+    /**
+     * Set the layout of the actions.
+     *
+     * The supported values are:
+     * * (Default) `start`
+     * * `center`
+     * * `end`
+     * * `stretched`
+     */
     layout: string;
-    buttonGroupClass?: boolean;
+    /**
+     * Specifies the orientation of the Dialog action buttons.
+     *
+     * * The possible values are:
+     * * (Default) `horizontal`
+     * * `vertical`
+     *
+     */
+    orientation?: 'horizontal' | 'vertical' | string;
 }
 /**
  * @hidden

package/dist/es/DialogActionsBar.js

@@ -12,11 +12,17 @@ var DialogActionsBarVue2 = {
   props: {
     layout: {
       type: String,
-      default: 'stretched'
+      default: 'stretched',
+      validator: function validator(value) {
+        return ['stretched', 'start', 'center', 'end'].includes(value);
+      }
     },
-    buttonGroupClass: {
-      type: Boolean,
-      default: true
+    orientation: {
+      type: String,
+      default: 'horizontal',
+      validator: function validator(value) {
+        return ['horizontal', 'vertical'].includes(value);
+      }
     }
   },
   // @ts-ignore
@@ -29,11 +35,14 @@ var DialogActionsBarVue2 = {
   computed: {
     wrapperClasses: function wrapperClasses() {
       var _a;
-      var layout = this.$props.layout;
+      var _b = this.$props,
+        layout = _b.layout,
+        orientation = _b.orientation;
       return _a = {
-        'k-dialog-buttongroup': this.buttonGroupClass,
-        'k-actions': true
-      }, _a["k-actions-".concat(layout)] = layout, _a;
+        'k-actions': true,
+        'k-dialog-actions': true,
+        'k-window-actions': true
+      }, _a["k-actions-".concat(orientation)] = orientation, _a["k-actions-".concat(layout)] = layout, _a;
     }
   },
   // @ts-ignore

package/dist/es/DialogTitleBar.js

@@ -5,6 +5,7 @@ var gh = allVue.h;
 var isV3 = allVue.version && allVue.version[0] === '3';
 import { getTemplate } from '@progress/kendo-vue-common';
 import { Button } from '@progress/kendo-vue-buttons';
+import { xIcon } from '@progress/kendo-svg-icons';
 /**
  * @hidden
  */
@@ -53,7 +54,7 @@ var DialogTitleBarVue2 = {
     }, [h("div", {
       "class": "k-window-title k-dialog-title"
     }, [titleElement]), h("div", {
-      "class": "k-window-actions k-dialog-actions"
+      "class": "k-window-titlebar-actions k-dialog-titlebar-actions"
     }, [closeIcon &&
     // @ts-ignore
     h(Button, {
@@ -62,16 +63,18 @@ var DialogTitleBarVue2 = {
         type: "button",
         fillMode: 'flat',
         "aria-label": "Close",
-        icon: 'x'
+        icon: 'x',
+        svgIcon: xIcon
       },
       fillMode: 'flat',
       "aria-label": "Close",
       icon: 'x',
+      svgIcon: xIcon,
       onClick: this.onCloseButtonClick,
       on: this.v3 ? undefined : {
         "click": this.onCloseButtonClick
       },
-      "class": "k-window-action k-dialog-action"
+      "class": "k-window-titlebar-action k-dialog-titlebar-action"
     })])]);
   }
 };

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, 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 {
@@ -104,6 +105,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
@@ -139,7 +146,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() {
@@ -168,6 +177,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 !== windowStage.FULLSCREEN) {
         return Math.max(this.$props.top || this.currentTop, 0);
@@ -362,6 +380,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,15 +485,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 = classNames('k-widget', 'k-window', this.$props.windowClass, {
-      'k-window-minimized': this.currentStage === 'MINIMIZED'
-    });
     var titleRender = templateRendering.call(this, this.$props.titleRender, getListeners.call(this));
     var closeButton = templateRendering.call(this, this.$props.closeButton, getListeners.call(this));
     var minimizeButton = templateRendering.call(this, this.$props.minimizeButton, getListeners.call(this));
@@ -482,11 +503,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');
@@ -505,7 +532,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',
@@ -532,6 +561,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 +569,7 @@ var WindowVue2 = {
           restoreButton: restoreButton
         },
         title: _this.$props.title,
+        titleId: _this.titleId,
         titleRender: titleRender,
         onDoubleclick: _this.handleDoubleClick,
         on: _this.v3 ? undefined : {
@@ -562,6 +593,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 +601,7 @@ var WindowVue2 = {
         restoreButton: restoreButton
       },
       title: _this.$props.title,
+      titleId: _this.titleId,
       titleRender: titleRender,
       onDoubleclick: _this.handleDoubleClick,
       on: _this.v3 ? undefined : {
@@ -587,7 +620,7 @@ var WindowVue2 = {
       maximizeButton: maximizeButton,
       restoreButton: restoreButton
     })]), this.windowStage !== windowStage.MINIMIZED ? h("div", {
-      "class": "k-content k-window-content"
+      "class": "k-window-content"
     }, [defaultSlot]) : null, this.windowStage === windowStage.DEFAULT && this.$props.resizable
     // @ts-ignore  function children
     ? h(ResizeHandlers, {

package/dist/es/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/es/WindowTitlebar.d.ts

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

package/dist/es/WindowTitlebar.js

@@ -8,6 +8,7 @@ import { Button } from '@progress/kendo-vue-buttons';
 import { provideLocalizationService } from '@progress/kendo-vue-intl';
 import { windowStage } from './StageEnum';
 import { dialogsWindowCloseButton, dialogsWindowMaximizeButton, dialogsWindowMinimizeButton, dialogsWindowRestoreButton, messages } from './messages/main';
+import { windowIcon, windowMinimizeIcon, windowRestoreIcon, xIcon } from '@progress/kendo-svg-icons';
 /**
  * @hidden
  */
@@ -21,6 +22,7 @@ var WindowTitleBarVue2 = {
     maximizeButton: [String, Function, Object, Boolean],
     restoreButton: [String, Function, Object, Boolean],
     title: String,
+    titleId: String,
     titleRender: [String, Function, Object, Boolean]
   },
   inject: {
@@ -76,11 +78,13 @@ var WindowTitleBarVue2 = {
       attrs: this.v3 ? undefined : {
         type: "button",
         icon: 'window-minimize',
+        svgIcon: windowMinimizeIcon,
         fillMode: 'flat',
         "aria-label": ls.toLanguageString(dialogsWindowMinimizeButton, messages[dialogsWindowMinimizeButton])
       },
-      "class": "k-window-action",
+      "class": "k-window-titlebar-action",
       icon: 'window-minimize',
+      svgIcon: windowMinimizeIcon,
       fillMode: 'flat',
       onClick: this.onMinimizeClick,
       on: this.v3 ? undefined : {
@@ -99,12 +103,14 @@ var WindowTitleBarVue2 = {
       type: "button",
       attrs: this.v3 ? undefined : {
         type: "button",
-        icon: 'window-maximize',
+        icon: 'window',
+        svgIcon: windowIcon,
         fillMode: 'flat',
         "aria-label": ls.toLanguageString(dialogsWindowMaximizeButton, messages[dialogsWindowMaximizeButton])
       },
-      "class": "k-window-action",
-      icon: 'window-maximize',
+      "class": "k-window-titlebar-action",
+      icon: 'window',
+      svgIcon: windowIcon,
       fillMode: 'flat',
       onClick: this.onFullScreenClick,
       on: this.v3 ? undefined : {
@@ -124,11 +130,13 @@ var WindowTitleBarVue2 = {
       attrs: this.v3 ? undefined : {
         type: "button",
         icon: 'window-restore',
+        svgIcon: windowRestoreIcon,
         fillMode: 'flat',
         "aria-label": ls.toLanguageString(dialogsWindowRestoreButton, messages[dialogsWindowRestoreButton])
       },
-      "class": "k-window-action",
+      "class": "k-window-titlebar-action",
       icon: 'window-restore',
+      svgIcon: windowRestoreIcon,
       fillMode: 'flat',
       onClick: this.onRestoreClick,
       on: this.v3 ? undefined : {
@@ -148,11 +156,13 @@ var WindowTitleBarVue2 = {
       attrs: this.v3 ? undefined : {
         type: "button",
         icon: 'x',
+        svgIcon: xIcon,
         fillMode: 'flat',
         "aria-label": ls.toLanguageString(dialogsWindowCloseButton, messages[dialogsWindowCloseButton])
       },
-      "class": "k-window-action",
+      "class": "k-window-titlebar-action",
       icon: 'x',
+      svgIcon: xIcon,
       fillMode: 'flat',
       onClick: this.onCloseClick,
       on: this.v3 ? undefined : {
@@ -166,7 +176,7 @@ var WindowTitleBarVue2 = {
       defaultRendering: closeButtonDefault
     });
     return h("div", {
-      "class": "k-window-titlebar k-dialog-titlebar",
+      "class": "k-window-titlebar",
       style: {
         touchAction: 'none'
       },
@@ -175,9 +185,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 === 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: 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/dist/esm/Dialog.d.ts

@@ -40,10 +40,18 @@ export interface DialogProps {
      * Specifies the minimum width of the Dialog.
      */
     minWidth?: number | string;
+    /**
+     * Specifies the theme color of the Dialog.
+     */
+    themeColor?: 'promary' | 'dark' | 'light' | string;
     /**
      * 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.
      */
@@ -64,6 +72,7 @@ export interface DialogProps {
      * The styles that are applied to the content of the Dialog.
      */
     contentStyle?: any;
+    dialogClass?: string;
 }
 /**
  * @hidden

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,
@@ -25,7 +30,14 @@ var DialogVue2 = {
     },
     width: [String, Number],
     height: [String, Number],
-    minWidth: [String, Number]
+    minWidth: [String, Number],
+    dialogClass: String,
+    themeColor: {
+      type: String,
+      validator: function validator(value) {
+        return ['primary', 'dark', 'light'].includes(value);
+      }
+    }
   },
   provide: function provide() {
     return {
@@ -43,6 +55,18 @@ var DialogVue2 = {
       v3: v3
     };
   },
+  computed: {
+    dialogElementClass: function dialogElementClass() {
+      var _a;
+      var _b = this.$props,
+        dialogClass = _b.dialogClass,
+        themeColor = _b.themeColor;
+      return _a = {
+        'k-window': true,
+        'k-dialog': true
+      }, _a[dialogClass] = dialogClass, _a["k-window-".concat(themeColor)] = themeColor, _a;
+    }
+  },
   mounted: function mounted() {
     if (this.$props.appendTo) {
       var body = document.querySelector(this.$props.appendTo);
@@ -86,6 +110,9 @@ var DialogVue2 = {
     },
     generateTitleId: function generateTitleId() {
       return 'dialog-title' + guid();
+    },
+    handleClick: function handleClick(e) {
+      this.$emit('overlayclick', e);
     }
   },
   // @ts-ignore
@@ -129,14 +156,18 @@ 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 : {
         "aria-labelledby": title || titleRender ? id : undefined,
         role: "dialog"
       },
-      "class": "k-widget k-window k-dialog",
+      "class": "k-window k-dialog",
       role: "dialog",
       style: {
         width: width,
@@ -161,7 +192,7 @@ var DialogVue2 = {
       title: title,
       titleRender: titleRender
     }), h("div", {
-      "class": "k-content k-window-content k-dialog-content",
+      "class": "k-window-content k-dialog-content",
       style: contentStyle
     }, [content]), actions])]);
     return this.$props.appendTo ? h("div", [dialog]) : dialog;

package/dist/esm/DialogActionsBar.d.ts

@@ -7,8 +7,25 @@ declare type DefaultMethods<V> = {
  * @hidden
  */
 export interface DialogActionsBarProps {
+    /**
+     * Set the layout of the actions.
+     *
+     * The supported values are:
+     * * (Default) `start`
+     * * `center`
+     * * `end`
+     * * `stretched`
+     */
     layout: string;
-    buttonGroupClass?: boolean;
+    /**
+     * Specifies the orientation of the Dialog action buttons.
+     *
+     * * The possible values are:
+     * * (Default) `horizontal`
+     * * `vertical`
+     *
+     */
+    orientation?: 'horizontal' | 'vertical' | string;
 }
 /**
  * @hidden