@progress/kendo-vue-layout 10.2.0-develop.4 → 10.2.0-develop.6

package/contextmenu/ContextMenu.d.ts

@@ -13,7 +13,7 @@ import { MenuProps } from '../menu/MenuProps';
 /**
  * Represents the props of the ContextMenu component.
  */
-export interface ContextMenuProps extends Omit<MenuProps, 'openOnClick' | 'hoverOpenDelay' | 'hoverCloseDelay'> {
+export interface ContextMenuProps extends Omit<MenuProps, 'openOnClick' | 'hoverOpenDelay' | 'hoverCloseDelay' | 'contextMenu'> {
     /**
      * Controls the visibility of the ContextMenu.
      */
@@ -39,6 +39,10 @@ declare const ContextMenu: import('vue').DefineComponent<import('vue').ExtractPr
             top: number;
         };
     };
+    vertical: {
+        type: PropType<boolean>;
+        default: boolean;
+    };
     items: {
         type: PropType<MenuItemModel[]>;
         default: any;
@@ -46,10 +50,13 @@ declare const ContextMenu: import('vue').DefineComponent<import('vue').ExtractPr
     dir: PropType<string>;
     itemRender: PropType<any>;
     linkRender: PropType<any>;
+    actionsRender: PropType<any>;
     customCloseItemIds: PropType<string[]>;
+    size: PropType<import('../menu/MenuProps').MenuSize>;
     className: PropType<string>;
 }>, {}, {
     visible: boolean;
+    lastItems: MenuItemModel[];
 }, {}, {
     handleClose(): void;
     handleSelect(event: MenuSelectEvent): void;
@@ -66,6 +73,10 @@ declare const ContextMenu: import('vue').DefineComponent<import('vue').ExtractPr
             top: number;
         };
     };
+    vertical: {
+        type: PropType<boolean>;
+        default: boolean;
+    };
     items: {
         type: PropType<MenuItemModel[]>;
         default: any;
@@ -73,12 +84,15 @@ declare const ContextMenu: import('vue').DefineComponent<import('vue').ExtractPr
     dir: PropType<string>;
     itemRender: PropType<any>;
     linkRender: PropType<any>;
+    actionsRender: PropType<any>;
     customCloseItemIds: PropType<string[]>;
+    size: PropType<import('../menu/MenuProps').MenuSize>;
     className: PropType<string>;
 }>> & Readonly<{
     onSelect?: (...args: any[]) => any;
     onClose?: (...args: any[]) => any;
 }>, {
+    vertical: boolean;
     items: MenuItemModel[];
     show: boolean;
     offset: Offset;

package/contextmenu/ContextMenu.js

@@ -5,4 +5,4 @@
  * Licensed under commercial license. See LICENSE.md in the package root for more information
  *-------------------------------------------------------------------------------------------
  */
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("vue"),r=require("@progress/kendo-vue-common"),u=require("@progress/kendo-vue-popup"),l=require("../menu/components/Menu.js");function c(e){return typeof e=="function"||Object.prototype.toString.call(e)==="[object Object]"&&!o.isVNode(e)}const d=o.defineComponent({name:"KendoContextMenu",props:{show:{type:Boolean,default:!1},offset:{type:Object,default:()=>({left:0,top:0})},items:{type:Array,default:void 0},dir:String,itemRender:[String,Object,Function],linkRender:[String,Object,Function],customCloseItemIds:Array,className:String},emits:["close","select"],data(){return{visible:this.show}},watch:{show(e){this.visible=e,r.canUseDOM&&(e?(o.nextTick(()=>{var n;const t=(n=this.$refs.popupRef)==null?void 0:n.$el,s=t==null?void 0:t.querySelector(".k-menu-item"),i=r.getActiveElement(t==null?void 0:t.ownerDocument);s&&s!==i&&s.focus()}),document.addEventListener("mousedown",this.handleClickOutside)):document.removeEventListener("mousedown",this.handleClickOutside))}},unmounted(){r.canUseDOM&&document.removeEventListener("mousedown",this.handleClickOutside)},methods:{handleClose(){this.$emit("close")},handleSelect(e){this.$emit("select",e)},handleClickOutside(e){var i,n;const t=(i=this.$refs.popupRef)==null?void 0:i.$el,s=e.target;if(t&&!t.contains(s)){if((n=s.closest)!=null&&n.call(s,".k-menu-item"))return;this.handleClose()}}},render(){var s;let e;const t=this.visible&&((s=this.$props.items)==null?void 0:s.length);return o.createVNode(u.Popup,{ref:"popupRef",show:!!t,offset:this.$props.offset,popupClass:"k-menu-popup k-overflow-visible"},{default:()=>[t?o.createVNode(l.Menu,{vertical:!0,items:this.$props.items,dir:this.$props.dir,itemRender:this.$props.itemRender,linkRender:this.$props.linkRender,customCloseItemIds:this.$props.customCloseItemIds,class:["k-context-menu",this.$props.className],onSelect:this.handleSelect},c(e=r.getDefaultSlots(this))?e:{default:()=>[e]}):void 0]})}});exports.ContextMenu=d;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("vue"),r=require("@progress/kendo-vue-common"),l=require("@progress/kendo-vue-popup"),c=require("../menu/components/Menu.js"),u=o.defineComponent({name:"KendoContextMenu",props:{show:{type:Boolean,default:!1},offset:{type:Object,default:()=>({left:0,top:0})},vertical:{type:Boolean,default:!0},items:{type:Array,default:void 0},dir:String,itemRender:[String,Object,Function],linkRender:[String,Object,Function],actionsRender:[String,Object,Function],customCloseItemIds:Array,size:String,className:String},emits:["close","select"],data(){return{visible:this.show,lastItems:this.items}},watch:{items(e){e!=null&&e.length&&(this.lastItems=e)},show(e){this.visible=e,r.canUseDOM&&(e?(o.nextTick(()=>{var n;const t=(n=this.$refs.popupRef)==null?void 0:n.$el,s=t==null?void 0:t.querySelector('[role="menuitem"]'),i=r.getActiveElement(t==null?void 0:t.ownerDocument);s&&s!==i&&s.focus()}),document.addEventListener("mousedown",this.handleClickOutside)):document.removeEventListener("mousedown",this.handleClickOutside))}},unmounted(){r.canUseDOM&&document.removeEventListener("mousedown",this.handleClickOutside)},methods:{handleClose(){this.$emit("close")},handleSelect(e){this.$emit("select",e)},handleClickOutside(e){var i,n;const t=(i=this.$refs.popupRef)==null?void 0:i.$el,s=e.target;if(t&&!t.contains(s)){if((n=s.closest)!=null&&n.call(s,".k-menu-popup"))return;this.handleClose()}}},render(){var s,i;const e=this.visible&&((s=this.$props.items)==null?void 0:s.length),t=(i=this.$props.items)!=null&&i.length?this.$props.items:this.lastItems;return o.createVNode(l.Popup,{ref:"popupRef",show:!!e,offset:this.$props.offset,popupClass:"k-menu-popup k-overflow-visible"},{default:()=>[o.createVNode(c.Menu,{vertical:this.$props.vertical,items:t,dir:this.$props.dir,itemRender:this.$props.itemRender,linkRender:this.$props.linkRender,actionsRender:this.$props.actionsRender,customCloseItemIds:this.$props.customCloseItemIds,size:this.$props.size,contextMenu:!0,className:this.$props.className,onSelect:this.handleSelect},this.$slots)]})}});exports.ContextMenu=u;

package/contextmenu/ContextMenu.mjs

@@ -5,14 +5,11 @@
  * Licensed under commercial license. See LICENSE.md in the package root for more information
  *-------------------------------------------------------------------------------------------
  */
-import { defineComponent as l, createVNode as i, nextTick as c, isVNode as d } from "vue";
-import { getDefaultSlots as m, canUseDOM as r, getActiveElement as u } from "@progress/kendo-vue-common";
-import { Popup as p } from "@progress/kendo-vue-popup";
-import { Menu as f } from "../menu/components/Menu.mjs";
-function h(e) {
-  return typeof e == "function" || Object.prototype.toString.call(e) === "[object Object]" && !d(e);
-}
-const C = /* @__PURE__ */ l({
+import { defineComponent as l, createVNode as n, nextTick as c } from "vue";
+import { canUseDOM as r, getActiveElement as p } from "@progress/kendo-vue-common";
+import { Popup as m } from "@progress/kendo-vue-popup";
+import { Menu as d } from "../menu/components/Menu.mjs";
+const $ = /* @__PURE__ */ l({
   name: "KendoContextMenu",
   props: {
     show: {
@@ -26,6 +23,10 @@ const C = /* @__PURE__ */ l({
         top: 0
       })
     },
+    vertical: {
+      type: Boolean,
+      default: !0
+    },
     items: {
       type: Array,
       default: void 0
@@ -33,21 +34,27 @@ const C = /* @__PURE__ */ l({
     dir: String,
     itemRender: [String, Object, Function],
     linkRender: [String, Object, Function],
+    actionsRender: [String, Object, Function],
     customCloseItemIds: Array,
+    size: String,
     className: String
   },
   emits: ["close", "select"],
   data() {
     return {
-      visible: this.show
+      visible: this.show,
+      lastItems: this.items
     };
   },
   watch: {
+    items(e) {
+      e != null && e.length && (this.lastItems = e);
+    },
     show(e) {
       this.visible = e, r && (e ? (c(() => {
         var o;
-        const t = (o = this.$refs.popupRef) == null ? void 0 : o.$el, s = t == null ? void 0 : t.querySelector(".k-menu-item"), n = u(t == null ? void 0 : t.ownerDocument);
-        s && s !== n && s.focus();
+        const t = (o = this.$refs.popupRef) == null ? void 0 : o.$el, s = t == null ? void 0 : t.querySelector('[role="menuitem"]'), i = p(t == null ? void 0 : t.ownerDocument);
+        s && s !== i && s.focus();
       }), document.addEventListener("mousedown", this.handleClickOutside)) : document.removeEventListener("mousedown", this.handleClickOutside));
     }
   },
@@ -62,40 +69,40 @@ const C = /* @__PURE__ */ l({
       this.$emit("select", e);
     },
     handleClickOutside(e) {
-      var n, o;
-      const t = (n = this.$refs.popupRef) == null ? void 0 : n.$el, s = e.target;
+      var i, o;
+      const t = (i = this.$refs.popupRef) == null ? void 0 : i.$el, s = e.target;
       if (t && !t.contains(s)) {
-        if ((o = s.closest) != null && o.call(s, ".k-menu-item"))
+        if ((o = s.closest) != null && o.call(s, ".k-menu-popup"))
           return;
         this.handleClose();
       }
     }
   },
   render() {
-    var s;
-    let e;
-    const t = this.visible && ((s = this.$props.items) == null ? void 0 : s.length);
-    return i(p, {
+    var s, i;
+    const e = this.visible && ((s = this.$props.items) == null ? void 0 : s.length), t = (i = this.$props.items) != null && i.length ? this.$props.items : this.lastItems;
+    return n(m, {
       ref: "popupRef",
-      show: !!t,
+      show: !!e,
       offset: this.$props.offset,
       popupClass: "k-menu-popup k-overflow-visible"
     }, {
-      default: () => [t ? i(f, {
-        vertical: !0,
-        items: this.$props.items,
+      default: () => [n(d, {
+        vertical: this.$props.vertical,
+        items: t,
         dir: this.$props.dir,
         itemRender: this.$props.itemRender,
         linkRender: this.$props.linkRender,
+        actionsRender: this.$props.actionsRender,
         customCloseItemIds: this.$props.customCloseItemIds,
-        class: ["k-context-menu", this.$props.className],
+        size: this.$props.size,
+        contextMenu: !0,
+        className: this.$props.className,
         onSelect: this.handleSelect
-      }, h(e = m(this)) ? e : {
-        default: () => [e]
-      }) : void 0]
+      }, this.$slots)]
     });
   }
 });
 export {
-  C as ContextMenu
+  $ as ContextMenu
 };