primevue 4.0.6 → 4.1.0

package/tieredmenu/index.mjs

@@ -1,14 +1,14 @@
-import { UniqueComponentId, ConnectedOverlayScrollHandler } from '@primevue/core/utils';
 import { nestedPosition, focus, findSingle, addStyle, absolutePosition, getOuterWidth, isTouchDevice } from '@primeuix/utils/dom';
 import { resolve, isNotEmpty, isPrintableCharacter, isEmpty, findLastIndex } from '@primeuix/utils/object';
 import { ZIndex } from '@primeuix/utils/zindex';
+import { UniqueComponentId, ConnectedOverlayScrollHandler } from '@primevue/core/utils';
 import OverlayEventBus from 'primevue/overlayeventbus';
 import Portal from 'primevue/portal';
 import BaseComponent from '@primevue/core/basecomponent';
 import TieredMenuStyle from 'primevue/tieredmenu/style';
 import AngleRightIcon from '@primevue/icons/angleright';
 import Ripple from 'primevue/ripple';
-import { mergeProps, resolveComponent, resolveDirective, openBlock, createBlock, Transition, withCtx, createElementBlock, Fragment, renderList, createElementVNode, withDirectives, resolveDynamicComponent, normalizeClass, createCommentVNode, toDisplayString, normalizeStyle, createVNode, renderSlot } from 'vue';
+import { mergeProps, resolveComponent, resolveDirective, openBlock, createBlock, Transition, withCtx, createElementBlock, Fragment, renderList, createElementVNode, withDirectives, resolveDynamicComponent, normalizeClass, createCommentVNode, toDisplayString, createVNode, renderSlot } from 'vue';
 
 var script$2 = {
   name: 'BaseTieredMenu',
@@ -26,6 +26,10 @@ var script$2 = {
       type: [String, Object],
       "default": 'body'
     },
+    breakpoint: {
+      type: String,
+      "default": '960px'
+    },
     autoZIndex: {
       type: Boolean,
       "default": true
@@ -227,12 +231,11 @@ function render$1(_ctx, _cache, $props, $setup, $data, $options) {
     onEnter: $options.onEnter
   }, _ctx.ptm('menu.transition')), {
     "default": withCtx(function () {
-      return [($props.level === 0 ? true : $props.visible) ? (openBlock(), createElementBlock("ul", mergeProps({
+      return [($props.level === 0 ? true : $props.visible) ? (openBlock(), createElementBlock("ul", {
         key: 0,
         ref: $options.containerRef,
-        "class": $props.level === 0 ? _ctx.cx('rootList') : _ctx.cx('submenu'),
         tabindex: $props.tabindex
-      }, $props.level === 0 ? _ctx.ptm('rootList') : _ctx.ptm('submenu')), [(openBlock(true), createElementBlock(Fragment, null, renderList($props.items, function (processedItem, index) {
+      }, [(openBlock(true), createElementBlock(Fragment, null, renderList($props.items, function (processedItem, index) {
         return openBlock(), createElementBlock(Fragment, {
           key: $options.getItemKey(processedItem)
         }, [$options.isItemVisible(processedItem) && !$options.getItemProp(processedItem, 'separator') ? (openBlock(), createElementBlock("li", mergeProps({
@@ -303,12 +306,13 @@ function render$1(_ctx, _cache, $props, $setup, $data, $options) {
           hasSubmenu: $options.getItemProp(processedItem, 'items'),
           label: $options.getItemLabel(processedItem),
           props: $options.getMenuItemProps(processedItem, index)
-        }, null, 8, ["item", "hasSubmenu", "label", "props"]))], 16, _hoisted_3), $options.isItemVisible(processedItem) && $options.isItemGroup(processedItem) ? (openBlock(), createBlock(_component_TieredMenuSub, {
+        }, null, 8, ["item", "hasSubmenu", "label", "props"]))], 16, _hoisted_3), $options.isItemVisible(processedItem) && $options.isItemGroup(processedItem) ? (openBlock(), createBlock(_component_TieredMenuSub, mergeProps({
           key: 0,
           id: $options.getItemId(processedItem) + '_list',
-          style: normalizeStyle(_ctx.sx('submenu', true, {
+          "class": _ctx.cx('submenu'),
+          style: _ctx.sx('submenu', true, {
             processedItem: processedItem
-          })),
+          }),
           "aria-labelledby": $options.getItemLabelId(processedItem),
           role: "menu",
           menuId: $props.menuId,
@@ -328,8 +332,9 @@ function render$1(_ctx, _cache, $props, $setup, $data, $options) {
           }),
           onItemMousemove: _cache[2] || (_cache[2] = function ($event) {
             return _ctx.$emit('item-mousemove', $event);
-          })
-        }, null, 8, ["id", "style", "aria-labelledby", "menuId", "focusedItemId", "items", "templates", "activeItemPath", "level", "visible", "pt", "unstyled"])) : createCommentVNode("", true)], 16, _hoisted_2)) : createCommentVNode("", true), $options.isItemVisible(processedItem) && $options.getItemProp(processedItem, 'separator') ? (openBlock(), createElementBlock("li", mergeProps({
+          }),
+          ref_for: true
+        }, _ctx.ptm('submenu')), null, 16, ["id", "class", "style", "aria-labelledby", "menuId", "focusedItemId", "items", "templates", "activeItemPath", "level", "visible", "pt", "unstyled"])) : createCommentVNode("", true)], 16, _hoisted_2)) : createCommentVNode("", true), $options.isItemVisible(processedItem) && $options.getItemProp(processedItem, 'separator') ? (openBlock(), createElementBlock("li", mergeProps({
           key: 1,
           id: $options.getItemId(processedItem),
           style: $options.getItemProp(processedItem, 'style'),
@@ -337,7 +342,7 @@ function render$1(_ctx, _cache, $props, $setup, $data, $options) {
           role: "separator",
           ref_for: true
         }, _ctx.ptm('separator')), null, 16, _hoisted_6)) : createCommentVNode("", true)], 64);
-      }), 128))], 16, _hoisted_1$1)) : createCommentVNode("", true)];
+      }), 128))], 8, _hoisted_1$1)) : createCommentVNode("", true)];
     }),
     _: 1
   }, 16, ["onEnter"]);
@@ -351,6 +356,7 @@ var script = {
   inheritAttrs: false,
   emits: ['focus', 'blur', 'before-show', 'before-hide', 'hide', 'show'],
   outsideClickListener: null,
+  matchMediaListener: null,
   scrollHandler: null,
   resizeListener: null,
   target: null,
@@ -370,7 +376,9 @@ var script = {
       activeItemPath: [],
       visible: !this.popup,
       submenuVisible: false,
-      dirty: false
+      dirty: false,
+      query: null,
+      queryMatches: false
     };
   },
   watch: {
@@ -391,10 +399,12 @@ var script = {
   },
   mounted: function mounted() {
     this.id = this.id || UniqueComponentId();
+    this.bindMatchMediaListener();
   },
   beforeUnmount: function beforeUnmount() {
     this.unbindOutsideClickListener();
     this.unbindResizeListener();
+    this.unbindMatchMediaListener();
     if (this.scrollHandler) {
       this.scrollHandler.destroy();
       this.scrollHandler = null;
@@ -803,6 +813,24 @@ var script = {
         this.resizeListener = null;
       }
     },
+    bindMatchMediaListener: function bindMatchMediaListener() {
+      var _this5 = this;
+      if (!this.matchMediaListener) {
+        var query = matchMedia("(max-width: ".concat(this.breakpoint, ")"));
+        this.query = query;
+        this.queryMatches = query.matches;
+        this.matchMediaListener = function () {
+          _this5.queryMatches = query.matches;
+        };
+        this.query.addEventListener('change', this.matchMediaListener);
+      }
+    },
+    unbindMatchMediaListener: function unbindMatchMediaListener() {
+      if (this.matchMediaListener) {
+        this.query.removeEventListener('change', this.matchMediaListener);
+        this.matchMediaListener = null;
+      }
+    },
     isItemMatched: function isItemMatched(processedItem) {
       var _this$getProccessedIt;
       return this.isValidItem(processedItem) && ((_this$getProccessedIt = this.getProccessedItemLabel(processedItem)) === null || _this$getProccessedIt === void 0 ? void 0 : _this$getProccessedIt.toLocaleLowerCase().startsWith(this.searchValue.toLocaleLowerCase()));
@@ -819,35 +847,35 @@ var script = {
       });
     },
     findFirstItemIndex: function findFirstItemIndex() {
-      var _this5 = this;
+      var _this6 = this;
       return this.visibleItems.findIndex(function (processedItem) {
-        return _this5.isValidItem(processedItem);
+        return _this6.isValidItem(processedItem);
       });
     },
     findLastItemIndex: function findLastItemIndex() {
-      var _this6 = this;
+      var _this7 = this;
       return findLastIndex(this.visibleItems, function (processedItem) {
-        return _this6.isValidItem(processedItem);
+        return _this7.isValidItem(processedItem);
       });
     },
     findNextItemIndex: function findNextItemIndex(index) {
-      var _this7 = this;
+      var _this8 = this;
       var matchedItemIndex = index < this.visibleItems.length - 1 ? this.visibleItems.slice(index + 1).findIndex(function (processedItem) {
-        return _this7.isValidItem(processedItem);
+        return _this8.isValidItem(processedItem);
       }) : -1;
       return matchedItemIndex > -1 ? matchedItemIndex + index + 1 : index;
     },
     findPrevItemIndex: function findPrevItemIndex(index) {
-      var _this8 = this;
+      var _this9 = this;
       var matchedItemIndex = index > 0 ? findLastIndex(this.visibleItems.slice(0, index), function (processedItem) {
-        return _this8.isValidItem(processedItem);
+        return _this9.isValidItem(processedItem);
       }) : -1;
       return matchedItemIndex > -1 ? matchedItemIndex : index;
     },
     findSelectedItemIndex: function findSelectedItemIndex() {
-      var _this9 = this;
+      var _this10 = this;
       return this.visibleItems.findIndex(function (processedItem) {
-        return _this9.isValidSelectedItem(processedItem);
+        return _this10.isValidSelectedItem(processedItem);
       });
     },
     findFirstFocusedItemIndex: function findFirstFocusedItemIndex() {
@@ -859,20 +887,20 @@ var script = {
       return selectedIndex < 0 ? this.findLastItemIndex() : selectedIndex;
     },
     searchItems: function searchItems(event, _char) {
-      var _this10 = this;
+      var _this11 = this;
       this.searchValue = (this.searchValue || '') + _char;
       var itemIndex = -1;
       var matched = false;
       if (this.focusedItemInfo.index !== -1) {
         itemIndex = this.visibleItems.slice(this.focusedItemInfo.index).findIndex(function (processedItem) {
-          return _this10.isItemMatched(processedItem);
+          return _this11.isItemMatched(processedItem);
         });
         itemIndex = itemIndex === -1 ? this.visibleItems.slice(0, this.focusedItemInfo.index).findIndex(function (processedItem) {
-          return _this10.isItemMatched(processedItem);
+          return _this11.isItemMatched(processedItem);
         }) : itemIndex + this.focusedItemInfo.index;
       } else {
         itemIndex = this.visibleItems.findIndex(function (processedItem) {
-          return _this10.isItemMatched(processedItem);
+          return _this11.isItemMatched(processedItem);
         });
       }
       if (itemIndex !== -1) {
@@ -888,8 +916,8 @@ var script = {
         clearTimeout(this.searchTimeout);
       }
       this.searchTimeout = setTimeout(function () {
-        _this10.searchValue = '';
-        _this10.searchTimeout = null;
+        _this11.searchValue = '';
+        _this11.searchTimeout = null;
       }, 500);
       return matched;
     },
@@ -911,7 +939,7 @@ var script = {
       }
     },
     createProcessedItems: function createProcessedItems(items) {
-      var _this11 = this;
+      var _this12 = this;
       var level = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
       var parent = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
       var parentKey = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : '';
@@ -926,7 +954,7 @@ var script = {
           parent: parent,
           parentKey: parentKey
         };
-        newItem['items'] = _this11.createProcessedItems(item.items, level + 1, newItem, key);
+        newItem['items'] = _this12.createProcessedItems(item.items, level + 1, newItem, key);
         processedItems.push(newItem);
       });
       return processedItems;
@@ -943,9 +971,9 @@ var script = {
       return this.createProcessedItems(this.model || []);
     },
     visibleItems: function visibleItems() {
-      var _this12 = this;
+      var _this13 = this;
       var processedItem = this.activeItemPath.find(function (p) {
-        return p.key === _this12.focusedItemInfo.parentKey;
+        return p.key === _this13.focusedItemInfo.parentKey;
       });
       return processedItem ? processedItem.items : this.processedItems;
     },
@@ -987,9 +1015,10 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
           }, _ctx.ptmi('root')), [_ctx.$slots.start ? (openBlock(), createElementBlock("div", mergeProps({
             key: 0,
             "class": _ctx.cx('start')
-          }, _ctx.ptm('start')), [renderSlot(_ctx.$slots, "start")], 16)) : createCommentVNode("", true), createVNode(_component_TieredMenuSub, {
+          }, _ctx.ptm('start')), [renderSlot(_ctx.$slots, "start")], 16)) : createCommentVNode("", true), createVNode(_component_TieredMenuSub, mergeProps({
             ref: $options.menubarRef,
             id: $data.id + '_list',
+            "class": _ctx.cx('rootList'),
             tabindex: !_ctx.disabled ? _ctx.tabindex : -1,
             role: "menubar",
             "aria-label": _ctx.ariaLabel,
@@ -1012,7 +1041,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
             onItemClick: $options.onItemClick,
             onItemMouseenter: $options.onItemMouseEnter,
             onItemMousemove: $options.onItemMouseMove
-          }, null, 8, ["id", "tabindex", "aria-label", "aria-labelledby", "aria-disabled", "aria-activedescendant", "menuId", "focusedItemId", "items", "templates", "activeItemPath", "visible", "pt", "unstyled", "onFocus", "onBlur", "onKeydown", "onItemClick", "onItemMouseenter", "onItemMousemove"]), _ctx.$slots.end ? (openBlock(), createElementBlock("div", mergeProps({
+          }, _ctx.ptm('rootList')), null, 16, ["id", "class", "tabindex", "aria-label", "aria-labelledby", "aria-disabled", "aria-activedescendant", "menuId", "focusedItemId", "items", "templates", "activeItemPath", "visible", "pt", "unstyled", "onFocus", "onBlur", "onKeydown", "onItemClick", "onItemMouseenter", "onItemMousemove"]), _ctx.$slots.end ? (openBlock(), createElementBlock("div", mergeProps({
             key: 1,
             "class": _ctx.cx('end')
           }, _ctx.ptm('end')), [renderSlot(_ctx.$slots, "end")], 16)) : createCommentVNode("", true)], 16, _hoisted_1)) : createCommentVNode("", true)];