@nextcloud/vue 8.32.0 → 8.34.0

package/dist/chunks/{NcActions-D3N_As6c.cjs → NcActions-ykoV9rRj.cjs}

@@ -1,32 +1,12 @@
-require('../assets/NcActions-B4-9qwLn.css');
+require('../assets/NcActions-Dfs69WGA.css');
 "use strict";
-var __defProp = Object.defineProperty;
-var __defProps = Object.defineProperties;
-var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols = Object.getOwnPropertySymbols;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __propIsEnum = Object.prototype.propertyIsEnumerable;
-var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues = (a, b) => {
-  for (var prop in b || (b = {}))
-    if (__hasOwnProp.call(b, prop))
-      __defNormalProp(a, prop, b[prop]);
-  if (__getOwnPropSymbols)
-    for (var prop of __getOwnPropSymbols(b)) {
-      if (__propIsEnum.call(b, prop))
-        __defNormalProp(a, prop, b[prop]);
-    }
-  return a;
-};
-var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
-const core = require("@vueuse/core");
 const Vue = require("vue");
 const _pluginVue2_normalizer = require("./_plugin-vue2_normalizer-V0q-tHlQ.cjs");
-const useTrapStackControl = require("./useTrapStackControl-dthvITlQ.cjs");
-const _l10n = require("./_l10n-9b4TMo5Q.cjs");
+const useTrapStackControl = require("./useTrapStackControl-XYABY64G.cjs");
+const _l10n = require("./_l10n-B4clLGwo.cjs");
 const GenRandomId = require("./GenRandomId-D7iOvpZS.cjs");
-const NcButton = require("./NcButton-DK7bNZIL.cjs");
-const NcPopover = require("./NcPopover-DrXnNOgM.cjs");
+const NcButton = require("./NcButton-CJBZrdiL.cjs");
+const NcPopover = require("./NcPopover-BgUZkmjk.cjs");
 const _interopDefault = (e) => e && e.__esModule ? e : { default: e };
 const Vue__default = /* @__PURE__ */ _interopDefault(Vue);
 const _sfc_main$1 = {
@@ -215,10 +195,7 @@ const _sfc_main = {
      */
     boundariesElement: {
       type: Element,
-      default: () => {
-        var _a;
-        return (_a = document.querySelector("#content-vue")) != null ? _a : document.querySelector("body");
-      }
+      default: () => document.querySelector("#content-vue") ?? document.querySelector("body")
     },
     /**
      * Selector for the actions' popover container
@@ -268,32 +245,10 @@ const _sfc_main = {
     "opened",
     "update:open"
   ],
-  setup(props) {
-    const randomId = "menu-".concat(GenRandomId.GenRandomId());
-    const triggerRandomId = "trigger-".concat(randomId);
-    const triggerButton = Vue.ref();
-    const { top, bottom } = core.useElementBounding(triggerButton);
-    const { top: boundaryTop, bottom: boundaryBottom } = core.useElementBounding(Vue.toRef(props, "boundariesElement"));
-    const { height: windowHeight } = core.useWindowSize();
-    const maxMenuHeight = Vue.computed(() => Math.max(
-      // Either expand to the top
-      Math.min(
-        // max height is the top position of the trigger minus the header height minus the wedge and the padding
-        top.value - 84,
-        // and also limited to the space in the boundary
-        top.value - boundaryTop.value
-      ),
-      // or expand to the bottom
-      Math.min(
-        // the max height is the window height minus current position of the trigger minus the wedge and padding
-        windowHeight.value - bottom.value - 34,
-        // and limit to the available space in the boundary
-        boundaryBottom.value - bottom.value
-      )
-    ));
+  setup() {
+    const randomId = `menu-${GenRandomId.GenRandomId()}`;
+    const triggerRandomId = `trigger-${randomId}`;
     return {
-      triggerButton,
-      maxMenuHeight,
       randomId,
       triggerRandomId
     };
@@ -310,8 +265,7 @@ const _sfc_main = {
   },
   computed: {
     triggerButtonVariant() {
-      var _a;
-      return ((_a = this.type) != null ? _a : this.variant) || (this.primary ? "primary" : this.menuName ? "secondary" : "tertiary");
+      return (this.type ?? this.variant) || (this.primary ? "primary" : this.menuName ? "secondary" : "tertiary");
     },
     /**
      * A11y roles and keyboard navigation configuration depending on the semantic type
@@ -417,8 +371,7 @@ const _sfc_main = {
      * @return {string} the name of the action component
      */
     getActionName(action) {
-      var _a, _b, _c, _d, _e;
-      return (_e = (_c = (_b = (_a = action == null ? void 0 : action.componentOptions) == null ? void 0 : _a.Ctor) == null ? void 0 : _b.extendOptions) == null ? void 0 : _c.name) != null ? _e : (_d = action == null ? void 0 : action.componentOptions) == null ? void 0 : _d.tag;
+      return action?.componentOptions?.Ctor?.extendOptions?.name ?? action?.componentOptions?.tag;
     },
     /**
      * Do we have exactly one Action and
@@ -438,7 +391,7 @@ const _sfc_main = {
     isIconUrl(url) {
       try {
         return !!new URL(url, url.startsWith("/") ? window.location.origin : void 0);
-      } catch (e) {
+      } catch {
         return false;
       }
     },
@@ -452,18 +405,17 @@ const _sfc_main = {
       this.$emit("open");
     },
     async closeMenu(returnFocus = true) {
-      var _a, _b;
       if (!this.opened) {
         return;
       }
       await this.$nextTick();
       this.opened = false;
-      (_a = this.$refs.popover) == null ? void 0 : _a.clearFocusTrap({ returnFocus });
+      this.$refs.popover?.clearFocusTrap({ returnFocus });
       this.$emit("update:open", false);
       this.$emit("close");
       this.focusIndex = 0;
       if (returnFocus) {
-        (_b = this.$refs.triggerButton) == null ? void 0 : _b.$el.focus();
+        this.$refs.triggerButton?.$el.focus();
       }
     },
     onClosed() {
@@ -485,12 +437,13 @@ const _sfc_main = {
     resizePopover() {
       const inner = this.$refs.menu.closest(".v-popper__inner");
       const height = this.$refs.menu.clientHeight;
-      if (height > this.maxMenuHeight) {
+      const maxMenuHeight = this.getMaxMenuHeight();
+      if (height > maxMenuHeight) {
         let currentHeight = 0;
         let actionHeight = 0;
         for (const action of this.$refs.menuList.children) {
-          if (currentHeight + action.clientHeight / 2 > this.maxMenuHeight) {
-            inner.style.height = "".concat(currentHeight - actionHeight / 2, "px");
+          if (currentHeight + action.clientHeight / 2 > maxMenuHeight) {
+            inner.style.height = `${currentHeight - actionHeight / 2}px`;
             break;
           }
           actionHeight = action.clientHeight;
@@ -500,6 +453,26 @@ const _sfc_main = {
         inner.style.height = "fit-content";
       }
     },
+    getMaxMenuHeight() {
+      const { top, bottom } = this.$refs.triggerButton?.$el.getBoundingClientRect() ?? { top: 0, bottom: 0 };
+      const { top: boundaryTop, bottom: boundaryBottom } = this.boundariesElement?.getBoundingClientRect() ?? { top: 0, bottom: window.innerHeight };
+      return Math.max(
+        // Either expand to the top
+        Math.min(
+          // max height is the top position of the trigger minus the header height minus the wedge and the padding
+          top - 84,
+          // and also limited to the space in the boundary
+          top - boundaryTop
+        ),
+        // or expand to the bottom
+        Math.min(
+          // the max height is the window height minus current position of the trigger minus the wedge and padding
+          window.innerHeight - bottom - 34,
+          // and limit to the available space in the boundary
+          boundaryBottom - bottom
+        )
+      );
+    },
     // MENU KEYS & FOCUS MANAGEMENT
     /**
      * @return {HTMLElement|null}
@@ -691,19 +664,18 @@ const _sfc_main = {
       }
     }
     const renderInlineAction = (action) => {
-      var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _A, _B, _C, _D, _E;
-      const iconProp = (_b = (_a = action == null ? void 0 : action.componentOptions) == null ? void 0 : _a.propsData) == null ? void 0 : _b.icon;
-      const icon = (_f = (_e = (_d = (_c = action == null ? void 0 : action.data) == null ? void 0 : _c.scopedSlots) == null ? void 0 : _d.icon()) == null ? void 0 : _e[0]) != null ? _f : this.isIconUrl(iconProp) ? h("img", { class: "action-item__menutoggle__icon", attrs: { src: iconProp, alt: "" } }) : h("span", { class: ["icon", iconProp] });
-      const attrs = ((_g = action == null ? void 0 : action.data) == null ? void 0 : _g.attrs) || {};
-      const clickListener = (_i = (_h = action == null ? void 0 : action.componentOptions) == null ? void 0 : _h.listeners) == null ? void 0 : _i.click;
-      const text = (_n = (_m = (_l = (_k = (_j = action == null ? void 0 : action.componentOptions) == null ? void 0 : _j.children) == null ? void 0 : _k[0]) == null ? void 0 : _l.text) == null ? void 0 : _m.trim) == null ? void 0 : _n.call(_m);
-      const ariaLabel = ((_p = (_o = action == null ? void 0 : action.componentOptions) == null ? void 0 : _o.propsData) == null ? void 0 : _p.ariaLabel) || text;
+      const iconProp = action?.componentOptions?.propsData?.icon;
+      const icon = action?.data?.scopedSlots?.icon()?.[0] ?? (this.isIconUrl(iconProp) ? h("img", { class: "action-item__menutoggle__icon", attrs: { src: iconProp, alt: "" } }) : h("span", { class: ["icon", iconProp] }));
+      const attrs = action?.data?.attrs || {};
+      const clickListener = action?.componentOptions?.listeners?.click;
+      const text = action?.componentOptions?.children?.[0]?.text?.trim?.();
+      const ariaLabel = action?.componentOptions?.propsData?.ariaLabel || text;
       const buttonText = this.forceName ? text : "";
-      let title = (_r = (_q = action == null ? void 0 : action.componentOptions) == null ? void 0 : _q.propsData) == null ? void 0 : _r.title;
+      let title = action?.componentOptions?.propsData?.title;
       if (!(this.forceName || title)) {
         title = text;
       }
-      const propsToForward = __spreadValues({}, (_t = (_s = action == null ? void 0 : action.componentOptions) == null ? void 0 : _s.propsData) != null ? _t : {});
+      const propsToForward = { ...action?.componentOptions?.propsData ?? {} };
       const nativeType = ["submit", "reset"].includes(propsToForward.type) ? propsToForward.modelValue : "button";
       delete propsToForward.modelValue;
       delete propsToForward.type;
@@ -712,34 +684,39 @@ const _sfc_main = {
         {
           class: [
             "action-item action-item--single",
-            (_u = action == null ? void 0 : action.data) == null ? void 0 : _u.staticClass,
-            (_v = action == null ? void 0 : action.data) == null ? void 0 : _v.class
+            action?.data?.staticClass,
+            action?.data?.class
           ],
-          attrs: __spreadProps(__spreadValues({}, attrs), {
+          attrs: {
+            ...attrs,
             "aria-label": ariaLabel,
             title
-          }),
-          ref: (_w = action == null ? void 0 : action.data) == null ? void 0 : _w.ref,
-          props: __spreadProps(__spreadValues({}, propsToForward), {
-            disabled: this.disabled || ((_y = (_x = action == null ? void 0 : action.componentOptions) == null ? void 0 : _x.propsData) == null ? void 0 : _y.disabled),
-            pressed: (_A = (_z = action == null ? void 0 : action.componentOptions) == null ? void 0 : _z.propsData) == null ? void 0 : _A.modelValue,
+          },
+          ref: action?.data?.ref,
+          props: {
+            ...propsToForward,
+            disabled: this.disabled || action?.componentOptions?.propsData?.disabled,
+            pressed: action?.componentOptions?.propsData?.modelValue,
             type: nativeType,
             // If it has a menuName, we use a secondary button
-            variant: ((_B = this.type) != null ? _B : this.variant) || (buttonText ? "secondary" : "tertiary")
-          }),
-          on: __spreadValues({
+            variant: (this.type ?? this.variant) || (buttonText ? "secondary" : "tertiary")
+          },
+          on: {
             focus: this.onFocus,
             blur: this.onBlur,
             // forward any pressed state from NcButton just like NcActionButton does
-            "update:pressed": (_E = (_D = (_C = action == null ? void 0 : action.componentOptions) == null ? void 0 : _C.listeners) == null ? void 0 : _D["update:modelValue"]) != null ? _E : () => {
-            }
-          }, !!clickListener && {
-            click: (event) => {
-              if (clickListener) {
-                clickListener(event);
+            "update:pressed": action?.componentOptions?.listeners?.["update:modelValue"] ?? (() => {
+            }),
+            // If we have a click listener,
+            // we bind it to execute on click and forward the click event
+            ...!!clickListener && {
+              click: (event) => {
+                if (clickListener) {
+                  clickListener(event);
+                }
               }
             }
-          })
+          }
         },
         [
           h("template", { slot: "icon" }, [icon]),
@@ -748,8 +725,7 @@ const _sfc_main = {
       );
     };
     const renderActionsPopover = (actions2) => {
-      var _a;
-      const triggerIcon = ((_a = this.$slots.icon) == null ? void 0 : _a[0]) || (this.defaultIcon ? h("span", { class: ["icon", this.defaultIcon] }) : h(DotsHorizontalIcon, {
+      const triggerIcon = this.$slots.icon?.[0] || (this.defaultIcon ? h("span", { class: ["icon", this.defaultIcon] }) : h(DotsHorizontalIcon, {
         props: {
           size: 20
         }
@@ -773,14 +749,15 @@ const _sfc_main = {
           // For some reason the popover component
           // does not react to props given under the 'props' key,
           // so we use both 'attrs' and 'props'
-          attrs: __spreadValues({
+          attrs: {
             delay: 0,
             handleResize: true,
             shown: this.opened,
             placement: this.placement,
             boundary: this.boundariesElement,
-            container: this.container
-          }, this.manualOpen && { triggers: [] }),
+            container: this.container,
+            ...this.manualOpen && { triggers: [] }
+          },
           on: {
             show: this.openMenu,
             "after-show": this.onOpened,
@@ -797,10 +774,11 @@ const _sfc_main = {
             },
             slot: "trigger",
             ref: "triggerButton",
-            attrs: __spreadValues({
+            attrs: {
               id: this.triggerRandomId,
-              "aria-label": this.menuName ? null : this.ariaLabel
-            }, this.config.triggerA11yAttr),
+              "aria-label": this.menuName ? null : this.ariaLabel,
+              ...this.config.triggerA11yAttr
+            },
             on: {
               focus: this.onFocus,
               blur: this.onBlur,
@@ -815,18 +793,20 @@ const _sfc_main = {
             class: {
               open: this.opened
             },
-            attrs: __spreadValues({
-              tabindex: "-1"
-            }, this.config.popoverContainerA11yAttrs),
+            attrs: {
+              tabindex: "-1",
+              ...this.config.popoverContainerA11yAttrs
+            },
             on: {
               keydown: this.onKeydown
             },
             ref: "menu"
           }, [
             h("ul", {
-              attrs: __spreadValues({
-                tabindex: "-1"
-              }, this.config.popoverUlA11yAttrs),
+              attrs: {
+                tabindex: "-1",
+                ...this.config.popoverUlA11yAttrs
+              },
               ref: "menuList"
             }, [
               actions2
@@ -853,7 +833,7 @@ const _sfc_main = {
         {
           class: [
             "action-items",
-            "action-item--".concat(this.triggerButtonVariant)
+            `action-item--${this.triggerButtonVariant}`
           ]
         },
         [
@@ -882,7 +862,7 @@ const _sfc_main = {
       {
         class: [
           "action-item action-item--default-popover",
-          "action-item--".concat(this.triggerButtonVariant),
+          `action-item--${this.triggerButtonVariant}`,
           {
             "action-item--open": this.opened
           }
@@ -902,9 +882,9 @@ var __component__ = /* @__PURE__ */ _pluginVue2_normalizer.normalizeComponent(
   _sfc_staticRenderFns,
   false,
   null,
-  "ddba453b"
+  "c816308a"
 );
 const NcActions = __component__.exports;
 exports.DotsHorizontalIcon = DotsHorizontalIcon;
 exports.NcActions = NcActions;
-//# sourceMappingURL=NcActions-D3N_As6c.cjs.map
+//# sourceMappingURL=NcActions-ykoV9rRj.cjs.map

package/dist/chunks/NcActions-ykoV9rRj.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"NcActions-ykoV9rRj.cjs","sources":["../../node_modules/vue-material-design-icons/DotsHorizontal.vue","../../src/components/NcActions/NcActions.vue"],"sourcesContent":["<template>\n  <span v-bind=\"$attrs\"\n        :aria-hidden=\"title ? null : 'true'\"\n        :aria-label=\"title\"\n        class=\"material-design-icon dots-horizontal-icon\"\n        role=\"img\"\n        @click=\"$emit('click', $event)\">\n    <svg :fill=\"fillColor\"\n         class=\"material-design-icon__svg\"\n         :width=\"size\"\n         :height=\"size\"\n         viewBox=\"0 0 24 24\">\n      <path d=\"M16,12A2,2 0 0,1 18,10A2,2 0 0,1 20,12A2,2 0 0,1 18,14A2,2 0 0,1 16,12M10,12A2,2 0 0,1 12,10A2,2 0 0,1 14,12A2,2 0 0,1 12,14A2,2 0 0,1 10,12M4,12A2,2 0 0,1 6,10A2,2 0 0,1 8,12A2,2 0 0,1 6,14A2,2 0 0,1 4,12Z\">\n        <title v-if=\"title\">{{ title }}</title>\n      </path>\n    </svg>\n  </span>\n</template>\n\n<script>\nexport default {\n  name: \"DotsHorizontalIcon\",\n  emits: ['click'],\n  props: {\n    title: {\n      type: String,\n    },\n    fillColor: {\n      type: String,\n      default: \"currentColor\"\n    },\n    size: {\n      type: Number,\n      default: 24\n    }\n  }\n}\n</script>","<!--\n  - SPDX-FileCopyrightText: 2019 Nextcloud GmbH and Nextcloud contributors\n  - SPDX-License-Identifier: AGPL-3.0-or-later\n-->\n\n<!-- Accessibility guidelines:\nhttps://www.w3.org/TR/wai-aria-practices/examples/menu-button/menu-button-actions.html -->\n\n<docs>\n### Single action\n\n```vue\n<template>\n\t<NcActions>\n\t\t<NcActionButton @click=\"actionDelete\">\n\t\t\t<template #icon>\n\t\t\t\t<Delete :size=\"20\" />\n\t\t\t</template>\n\t\t\tDelete\n\t\t</NcActionButton>\n\t</NcActions>\n</template>\n<script>\nimport Delete from 'vue-material-design-icons/Delete.vue'\n\nexport default {\n\tcomponents: {\n\t\tDelete,\n\t},\n\tmethods: {\n\t\tactionDelete() {\n\t\t\talert('Delete')\n\t\t},\n\t},\n}\n</script>\n```\n\n### Multiple actions\n\n```vue\n<template>\n\t<NcActions>\n\t\t<NcActionButton @click=\"showMessage('Edit')\">\n\t\t\t<template #icon>\n\t\t\t\t<Pencil :size=\"20\" />\n\t\t\t</template>\n\t\t\tEdit\n\t\t</NcActionButton>\n\t\t<NcActionButton @click=\"showMessage('Delete')\">\n\t\t\t<template #icon>\n\t\t\t\t<Delete :size=\"20\" />\n\t\t\t</template>\n\t\t\tDelete\n\t\t</NcActionButton>\n\t\t<NcActionLink href=\"https://nextcloud.com\">\n\t\t\t<template #icon>\n\t\t\t\t<OpenInNew :size=\"20\" />\n\t\t\t</template>\n\t\t\tLink\n\t\t</NcActionLink>\n\t</NcActions>\n</template>\n<script>\nimport Delete from 'vue-material-design-icons/Delete.vue'\nimport OpenInNew from 'vue-material-design-icons/OpenInNew.vue'\nimport Pencil from 'vue-material-design-icons/Pencil.vue'\n\nexport default {\n\tcomponents: {\n\t\tDelete,\n\t\tOpenInNew,\n\t\tPencil,\n\t},\n\tmethods: {\n\t\tshowMessage(msg) {\n\t\t\talert(msg)\n\t\t},\n\t},\n}\n</script>\n```\n\n### Multiple actions with 2 items inline\n\n```vue\n<template>\n\t<NcActions :inline=\"2\">\n\t\t<NcActionButton @click=\"showMessage('Add')\">\n\t\t\t<template #icon>\n\t\t\t\t<Plus :size=\"20\" />\n\t\t\t</template>\n\t\t\tAdd\n\t\t</NcActionButton>\n\t\t<NcActionButton @click=\"showMessage('Edit')\">\n\t\t\t<template #icon>\n\t\t\t\t<Pencil :size=\"20\" />\n\t\t\t</template>\n\t\t\tEdit\n\t\t</NcActionButton>\n\t\t<NcActionButton @click=\"showMessage('Delete')\">\n\t\t\t<template #icon>\n\t\t\t\t<Delete :size=\"20\" />\n\t\t\t</template>\n\t\t\tDelete\n\t\t</NcActionButton>\n\t\t<NcActionLink href=\"https://nextcloud.com\">\n\t\t\t<template #icon>\n\t\t\t\t<OpenInNew :size=\"20\" />\n\t\t\t</template>\n\t\t\tLink\n\t\t</NcActionLink>\n\t</NcActions>\n</template>\n<script>\nimport Plus from 'vue-material-design-icons/Plus.vue'\nimport Delete from 'vue-material-design-icons/Delete.vue'\nimport OpenInNew from 'vue-material-design-icons/OpenInNew.vue'\nimport Pencil from 'vue-material-design-icons/Pencil.vue'\n\nexport default {\n\tcomponents: {\n\t\tDelete,\n\t\tOpenInNew,\n\t\tPencil,\n\t\tPlus,\n\t},\n\tmethods: {\n\t\tshowMessage(msg) {\n\t\t\talert(msg)\n\t\t},\n\t},\n}\n</script>\n```\n\n### Multiple actions with 2 items inline AND forced names\n\n```vue\n<template>\n\t<NcActions :force-name=\"true\" :inline=\"2\">\n\t\t<NcActionButton @click=\"showMessage('Add')\">\n\t\t\t<template #icon>\n\t\t\t\t<Plus :size=\"20\" />\n\t\t\t</template>\n\t\t\tAdd\n\t\t</NcActionButton>\n\t\t<NcActionButton @click=\"showMessage('Edit')\">\n\t\t\t<template #icon>\n\t\t\t\t<Pencil :size=\"20\" />\n\t\t\t</template>\n\t\t\tEdit\n\t\t</NcActionButton>\n\t\t<NcActionButton @click=\"showMessage('Delete')\">\n\t\t\t<template #icon>\n\t\t\t\t<Delete :size=\"20\" />\n\t\t\t</template>\n\t\t\tDelete\n\t\t</NcActionButton>\n\t\t<NcActionLink href=\"https://nextcloud.com\">\n\t\t\t<template #icon>\n\t\t\t\t<OpenInNew :size=\"20\" />\n\t\t\t</template>\n\t\t\tLink\n\t\t</NcActionLink>\n\t</NcActions>\n</template>\n<script>\nimport Plus from 'vue-material-design-icons/Plus.vue'\nimport Delete from 'vue-material-design-icons/Delete.vue'\nimport OpenInNew from 'vue-material-design-icons/OpenInNew.vue'\nimport Pencil from 'vue-material-design-icons/Pencil.vue'\nexport default {\n\tcomponents: {\n\t\tDelete,\n\t\tOpenInNew,\n\t\tPencil,\n\t\tPlus,\n\t},\n\tmethods: {\n\t\tshowMessage(msg) {\n\t\t\talert(msg)\n\t\t},\n\t},\n}\n</script>\n```\n\n### Multiple actions with custom icon\n\n```vue\n<template>\n\t<NcActions>\n\t\t<template #icon>\n\t\t\t<Pencil :size=\"20\" />\n\t\t</template>\n\t\t<NcActionButton @click=\"showMessage('Edit')\">\n\t\t\t<template #icon>\n\t\t\t\t<Pencil :size=\"20\" />\n\t\t\t</template>\n\t\t\tEdit\n\t\t</NcActionButton>\n\t\t<NcActionButton @click=\"showMessage('Delete')\">\n\t\t\t<template #icon>\n\t\t\t\t<Delete :size=\"20\" />\n\t\t\t</template>\n\t\t\tDelete\n\t\t</NcActionButton>\n\t\t<NcActionLink href=\"https://nextcloud.com\">\n\t\t\t<template #icon>\n\t\t\t\t<OpenInNew :size=\"20\" />\n\t\t\t</template>\n\t\t\tLink\n\t\t</NcActionLink>\n\t</NcActions>\n</template>\n<script>\nimport Delete from 'vue-material-design-icons/Delete.vue'\nimport OpenInNew from 'vue-material-design-icons/OpenInNew.vue'\nimport Pencil from 'vue-material-design-icons/Pencil.vue'\n\nexport default {\n\tcomponents: {\n\t\tDelete,\n\t\tOpenInNew,\n\t\tPencil,\n\t},\n\tmethods: {\n\t\tshowMessage(msg) {\n\t\t\talert(msg)\n\t\t},\n\t},\n}\n</script>\n```\n\n### With menu name\n\n```vue\n<template>\n\t<NcActions menu-name=\"Object management\">\n\t\t<template #icon>\n\t\t\t<Pencil :size=\"20\" />\n\t\t</template>\n\t\t<NcActionButton>\n\t\t\t<template #icon>\n\t\t\t\t<Pencil :size=\"20\" />\n\t\t\t</template>\n\t\t\tRename\n\t\t</NcActionButton>\n\t\t<NcActionButton>\n\t\t\t<template #icon>\n\t\t\t\t<Delete :size=\"20\" />\n\t\t\t</template>\n\t\t\tDelete\n\t\t</NcActionButton>\n\t\t<NcActionButton>\n\t\t\t<template #icon>\n\t\t\t\t<ArrowRight :size=\"20\" />\n\t\t\t</template>\n\t\t\tValidate\n\t\t</NcActionButton>\n\t\t<NcActionButton>\n\t\t\t<template #icon>\n\t\t\t\t<Download :size=\"20\" />\n\t\t\t</template>\n\t\t\tDownload\n\t\t</NcActionButton>\n\t</NcActions>\n</template>\n<script>\nimport ArrowRight from 'vue-material-design-icons/ArrowRight.vue'\nimport Delete from 'vue-material-design-icons/Delete.vue'\nimport Download from 'vue-material-design-icons/Download.vue'\nimport Pencil from 'vue-material-design-icons/Pencil.vue'\n\nexport default {\n\tcomponents: {\n\t\tArrowRight,\n\t\tDelete,\n\t\tDownload,\n\t\tPencil,\n\t},\n}\n</script>\n```\n\n### Various icons styles\n```vue\n<template>\n\t<NcActions :primary=\"true\">\n\t\t<NcActionButton>\n\t\t\t<template #icon>\n\t\t\t\t<Pencil :size=\"20\" />\n\t\t\t</template>\n\t\t\tEdit\n\t\t</NcActionButton>\n\t\t<NcActionButton>\n\t\t\t<template #icon>\n\t\t\t\t<Delete :size=\"20\" />\n\t\t\t</template>\n\t\t\tDelete\n\t\t</NcActionButton>\n\t</NcActions>\n</template>\n<script>\nimport Delete from 'vue-material-design-icons/Delete.vue'\nimport Pencil from 'vue-material-design-icons/Pencil.vue'\n\nexport default {\n\tcomponents: {\n\t\tDelete,\n\t\tPencil,\n\t},\n}\n</script>\n```\n\n```vue\n<template>\n\t<NcActions :primary=\"true\" menu-name=\"Object management\">\n\t\t<template #icon>\n\t\t\t<Plus :size=\"20\" />\n\t\t</template>\n\t\t<NcActionButton>\n\t\t\t<template #icon>\n\t\t\t\t<Pencil :size=\"20\" />\n\t\t\t</template>\n\t\t\tRename\n\t\t</NcActionButton>\n\t\t<NcActionButton>\n\t\t\t<template #icon>\n\t\t\t\t<Delete :size=\"20\" />\n\t\t\t</template>\n\t\t\tDelete\n\t\t</NcActionButton>\n\t\t<NcActionButton>\n\t\t\t<template #icon>\n\t\t\t\t<ArrowRight :size=\"20\" />\n\t\t\t</template>\n\t\t\tValidate\n\t\t</NcActionButton>\n\t\t<NcActionButton>\n\t\t\t<template #icon>\n\t\t\t\t<Download :size=\"20\" />\n\t\t\t</template>\n\t\t\tDownload\n\t\t</NcActionButton>\n\t</NcActions>\n</template>\n<script>\nimport ArrowRight from 'vue-material-design-icons/ArrowRight.vue'\nimport Delete from 'vue-material-design-icons/Delete.vue'\nimport Download from 'vue-material-design-icons/Download.vue'\nimport Pencil from 'vue-material-design-icons/Pencil.vue'\nimport Plus from 'vue-material-design-icons/Plus.vue'\n\nexport default {\n\tcomponents: {\n\t\tArrowRight,\n\t\tDelete,\n\t\tDownload,\n\t\tPencil,\n\t\tPlus,\n\t},\n}\n</script>\n```\n\n### Custom icon slot\nTo be used with `vue-material-design-icons` only. For icon classes use the `default-icon` slot.\nIt can be used with one or multiple actions.\n```vue\n<template>\n\t<div style=\"display: flex;align-items: center;\">\n\t\t<NcButton @click=\"toggled = !toggled\">Toggle multiple action</NcButton>\n\t\t<NcActions>\n\t\t\t<template #icon>\n\t\t\t\t<DotsHorizontalCircleOutline :size=\"20\" />\n\t\t\t</template>\n\t\t\t<NcActionButton>\n\t\t\t\t<template #icon>\n\t\t\t\t\t<MicrophoneOff :size=\"20\" />\n\t\t\t\t</template>\n\t\t\t\tMute\n\t\t\t</NcActionButton>\n\t\t\t<NcActionButton v-if=\"toggled\">\n\t\t\t\t<template #icon>\n\t\t\t\t\t<Delete :size=\"20\" />\n\t\t\t\t</template>\n\t\t\t\tDelete\n\t\t\t</NcActionButton>\n\t\t</NcActions>\n\t</div>\n</template>\n<script>\nimport Delete from 'vue-material-design-icons/Delete.vue'\nimport DotsHorizontalCircleOutline from 'vue-material-design-icons/DotsHorizontalCircleOutline.vue'\nimport MicrophoneOff from 'vue-material-design-icons/MicrophoneOff.vue'\n\nexport default {\n\tcomponents: {\n\t\tDelete,\n\t\tDotsHorizontalCircleOutline,\n\t\tMicrophoneOff,\n\t},\n\tdata() {\n\t\treturn {\n\t\t\ttoggled: false\n\t\t}\n\t}\n}\n</script>\n```\n\n### Custom icon slot in child elements\n```vue\n<template>\n\t<NcActions :primary=\"true\">\n\t\t<NcActionButton>\n\t\t\t<template #icon>\n\t\t\t\t<Magnify :size=\"20\" />\n\t\t\t</template>\n\t\t\tSearch\n\t\t</NcActionButton>\n\t\t<NcActionButton>\n\t\t\t<template #icon>\n\t\t\t\t<Delete :size=\"20\" />\n\t\t\t</template>\n\t\t\tDelete\n\t\t</NcActionButton>\n\t</NcActions>\n</template>\n<script>\nimport Delete from 'vue-material-design-icons/Delete.vue'\nimport Magnify from 'vue-material-design-icons/Magnify.vue'\n\nexport default {\n\tcomponents: {\n\t\tDelete,\n\t\tMagnify,\n\t},\n}\n</script>\n```\n\n### Design variants\n\n```vue\n<template>\n\t<div>\n\t\t<NcActions :variant=\"current\">\n\t\t\t<template #icon>\n\t\t\t\t<SelectColor :size=\"20\" />\n\t\t\t</template>\n\n\t\t\t<NcActionButton v-if=\"current\" close-after-click @click=\"define()\">\n\t\t\t\t<template #icon>\n\t\t\t\t\t<Delete :size=\"20\" />\n\t\t\t\t</template>\n\t\t\t\tRemove\n\t\t\t</NcActionButton>\n\n\t\t\t<NcActionButton v-for=\"row in variants\" close-after-click @click=\"define(row)\" :key=\"`type-icon--${row}`\">\n\t\t\t\t<template #icon>\n\t\t\t\t\t<CheckboxMarkedCircleOutline v-if=\"row === current\" :size=\"20\" />\n\t\t\t\t\t<SelectColor v-else :size=\"20\" />\n\t\t\t\t</template>\n\t\t\t\t{{ row }}\n\t\t\t</NcActionButton>\n\t\t</NcActions>\n\n\t\t<NcActions :variant=\"current\" menu-name=\"Choose a variant\">\n\t\t\t<NcActionButton v-if=\"current\" close-after-click @click=\"define()\">\n\t\t\t\t<template #icon>\n\t\t\t\t\t<Delete :size=\"20\" />\n\t\t\t\t</template>\n\t\t\t\tRemove\n\t\t\t</NcActionButton>\n\n\t\t\t<NcActionButton v-for=\"row in variants\" close-after-click @click=\"define(row)\" :key=\"`type-text--${row}`\">\n\t\t\t\t<template #icon>\n\t\t\t\t\t<CheckboxMarkedCircleOutline v-if=\"row === current\" :size=\"20\" />\n\t\t\t\t\t<SelectColor v-else :size=\"20\" />\n\t\t\t\t</template>\n\t\t\t\t{{ row }}\n\t\t\t</NcActionButton>\n\t\t</NcActions>\n\n\t\t<NcActions :variant=\"current\"  menu-name=\"Choose a variant\">\n\t\t\t<template #icon>\n\t\t\t\t<SelectColor :size=\"20\" />\n\t\t\t</template>\n\n\t\t\t<NcActionButton v-if=\"current\" close-after-click @click=\"define()\">\n\t\t\t\t<template #icon>\n\t\t\t\t\t<Delete :size=\"20\" />\n\t\t\t\t</template>\n\t\t\t\tRemove\n\t\t\t</NcActionButton>\n\n\t\t\t<NcActionButton v-for=\"row in variants\" close-after-click @click=\"define(row)\" :key=\"`type-icon-text--${row}`\">\n\t\t\t\t<template #icon>\n\t\t\t\t\t<CheckboxMarkedCircleOutline v-if=\"row === current\" :size=\"20\" />\n\t\t\t\t\t<SelectColor v-else :size=\"20\" />\n\t\t\t\t</template>\n\t\t\t\t{{ row }}\n\t\t\t</NcActionButton>\n\t\t</NcActions>\n\t</div>\n</template>\n\n<script>\nimport Delete from 'vue-material-design-icons/Delete.vue'\nimport Palette from 'vue-material-design-icons/Palette.vue'\nimport SelectColor from 'vue-material-design-icons/SelectColor.vue'\nimport CheckboxMarkedCircleOutline from 'vue-material-design-icons/CheckboxMarkedCircleOutline.vue'\n\nexport default {\n\tcomponents: {\n\t\tDelete,\n\t\tPalette,\n\t\tSelectColor,\n\t\tCheckboxMarkedCircleOutline,\n\t},\n\tdata() {\n\t\treturn {\n\t\t\tcurrent: 'primary',\n\t\t\tvariants: [\n\t\t\t\t'primary',\n\t\t\t\t'secondary',\n\t\t\t\t'tertiary',\n\t\t\t\t'error',\n\t\t\t\t'warning',\n\t\t\t\t'success'\n\t\t\t]\n\t\t}\n\t},\n\tmethods: {\n\t\tdefine(row = undefined) {\n\t\t\tthis.current = row\n\t\t}\n\t}\n}\n</script>\n```\n\n### Use cases\n\n```vue\n<template>\n\t<div>\n\t\t<h2>Application menu</h2>\n\t\t<p>Has buttons, button groups, links and router links, separators, texts. May have checkboxes and radio buttons. Separator can be used to make groups of radio buttons as well.</p>\n\t\t<p><kbd>Arrows</kbd> are used to navigate between items, <kbd>Tab</kbd> is used to navigate to the next UI element on the page.</p>\n\t\t<p>\n\t\t\t<NcActions aria-label=\"Email menu\" variant=\"tertiary\">\n\t\t\t\t<NcActionButtonGroup>\n\t\t\t\t\t<NcActionButton>\n\t\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t\t<StarOutline :size=\"20\" />\n\t\t\t\t\t\t</template>\n\t\t\t\t\t\tFavorite\n\t\t\t\t\t</NcActionButton>\n\t\t\t\t\t<NcActionButton>\n\t\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t\t<EmailUnread :size=\"20\" />\n\t\t\t\t\t\t</template>\n\t\t\t\t\t\tUnread\n\t\t\t\t\t</NcActionButton>\n\t\t\t\t\t<NcActionButton>\n\t\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t\t<Bookmark :size=\"20\" />\n\t\t\t\t\t\t</template>\n\t\t\t\t\t\tImportant\n\t\t\t\t\t</NcActionButton>\n\t\t\t\t</NcActionButtonGroup>\n\t\t\t\t<NcActionText>\n\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t<ClockOutlineIcon :size=\"20\" />\n\t\t\t\t\t</template>\n\t\t\t\t\t{{ new Date().toLocaleDateString('en-US') }}\n\t\t\t\t</NcActionText>\n\t\t\t\t<NcActionSeparator />\n\t\t\t\t<NcActionButton>\n\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t<AlertOctagonIcon :size=\"20\" />\n\t\t\t\t\t</template>\n\t\t\t\t\tMark as spam\n\t\t\t\t</NcActionButton>\n\t\t\t\t<NcActionCheckbox :checked.sync=\"selected\">\n\t\t\t\t\tSelect\n\t\t\t\t</NcActionCheckbox>\n\t\t\t\t<NcActionButton>\n\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t<OpenInNewIcon :size=\"20\" />\n\t\t\t\t\t</template>\n\t\t\t\t\tMove thread\n\t\t\t\t</NcActionButton>\n\t\t\t\t<NcActionLink href=\"#\">\n\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t<DownloadIcon :size=\"20\" />\n\t\t\t\t\t</template>\n\t\t\t\t\tDownload message\n\t\t\t\t</NcActionLink>\n\t\t\t</NcActions>\n\t\t</p>\n\t\t<p>\n\t\t\t<NcActions aria-label=\"Text settings\" variant=\"tertiary\">\n\t\t\t\t<template #icon>\n\t\t\t\t\t<FormatTitle :size=\"20\" />\n\t\t\t\t</template>\n\t\t\t\t<NcActionButtonGroup name=\"Alignment\">\n\t\t\t\t\t<NcActionButton aria-label=\"Left\">\n\t\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t\t<FormatAlignLeft :size=\"20\" />\n\t\t\t\t\t\t</template>\n\t\t\t\t\t</NcActionButton>\n\t\t\t\t\t<NcActionButton aria-label=\"Center\">\n\t\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t\t<FormatAlignCenter :size=\"20\" />\n\t\t\t\t\t\t</template>\n\t\t\t\t\t</NcActionButton>\n\t\t\t\t\t<NcActionButton aria-label=\"Right\">\n\t\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t\t<FormatAlignRight :size=\"20\" />\n\t\t\t\t\t\t</template>\n\t\t\t\t\t</NcActionButton>\n\t\t\t\t</NcActionButtonGroup>\n\t\t\t\t<NcActionSeparator />\n\t\t\t\t<NcActionCheckbox :checked.sync=\"checked.bold\" value=\"bold\">\n\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t<FormatBold :size=\"20\" />\n\t\t\t\t\t</template>\n\t\t\t\t\tBold\n\t\t\t\t</NcActionCheckbox>\n\t\t\t\t<NcActionCheckbox :checked.sync=\"checked.italic\" value=\"italic\">\n\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t<FormatItalic :size=\"20\" />\n\t\t\t\t\t</template>\n\t\t\t\t\tItalic\n\t\t\t\t</NcActionCheckbox>\n\t\t\t\t<NcActionCheckbox :checked.sync=\"checked.underline\" value=\"underline\">\n\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t<FormatUnderline :size=\"20\" />\n\t\t\t\t\t</template>\n\t\t\t\t\tUnderline\n\t\t\t\t</NcActionCheckbox>\n\t\t\t\t<NcActionSeparator />\n\t\t\t\t<NcActionRadio name=\"color\" :checked.sync=\"color.black\" value=\"Black\">Black</NcActionRadio>\n\t\t\t\t<NcActionRadio name=\"color\" :checked.sync=\"color.blue\" value=\"Blue\">Blue</NcActionRadio>\n\t\t\t\t<NcActionRadio name=\"color\" :checked.sync=\"color.red\" value=\"Red\">Red</NcActionRadio>\n\t\t\t\t<NcActionRadio name=\"color\" :checked.sync=\"color.green\" value=\"Green\">Green</NcActionRadio>\n\t\t\t</NcActions>\n\t\t</p>\n\n\t\t<h2>Navigation</h2>\n\t\t<p>Has links or router links. May use text elements, captions and separators.</p>\n\t\t<p>Uses classic <kbd>Tab</kbd> navigation.</p>\n\t\t<p>\n\t\t\t<NcActions aria-label=\"Applications navigation\" :inline=\"2\" variant=\"tertiary\">\n\t\t\t\t<NcActionLink href=\"/apps/dashboard\" icon=\"icon-category-dashboard-white\">\n\t\t\t\t\tDashboard\n\t\t\t\t</NcActionLink>\n\t\t\t\t<NcActionLink href=\"/apps/files\" icon=\"icon-files-white\">\n\t\t\t\t\tFiles\n\t\t\t\t</NcActionLink>\n\t\t\t\t<NcActionLink href=\"/apps/spreed\" icon=\"icon-talk-white\">\n\t\t\t\t\tTalk\n\t\t\t\t</NcActionLink>\n\t\t\t\t<NcActionLink href=\"/apps/contacts\" icon=\"icon-contacts-white\">\n\t\t\t\t\tContacts\n\t\t\t\t</NcActionLink>\n\t\t\t\t<NcActionLink href=\"/apps/circles\" icon=\"icon-circles-white\">\n\t\t\t\t\tCircles\n\t\t\t\t</NcActionLink>\n\t\t\t</NcActions>\n\t\t</p>\n\n\t\t<h2>Dialog</h2>\n\t\t<p>Includes data input elements, forms.</p>\n\t\t<p>Uses <kbd>Tab</kbd> navigation with a focus trap.</p>\n\t\t<p>\n\t\t\t<NcActions aria-label=\"Group management\">\n\t\t\t\t<NcActionInput trailing-button-label=\"Submit\" label=\"Rename group\">\n\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t<Pencil :size=\"20\" />\n\t\t\t\t\t</template>\n\t\t\t\t</NcActionInput>\n\t\t\t\t<NcActionButton>\n\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t<Delete :size=\"20\" />\n\t\t\t\t\t</template>\n\t\t\t\t\tRemove group\n\t\t\t\t</NcActionButton>\n\t\t\t</NcActions>\n\t\t</p>\n\n\t\t<h2>Tooltip</h2>\n\t\t<p>Has only text and no interactive elements.</p>\n\t\t<p>\n\t\t\t<NcActions aria-label=\"Contact\" :inline=\"1\">\n\t\t\t\t<NcActionLink aria-label=\"View profile\" href=\"/u/alice\" icon=\"icon-user-white\">\n\t\t\t\t\tView profile\n\t\t\t\t</NcActionLink>\n\t\t\t\t<NcActionText icon=\"icon-timezone-white\">\n\t\t\t\t\tLocal time: 10:12\n\t\t\t\t</NcActionText>\n\t\t\t</NcActions>\n\t\t</p>\n\t</div>\n</template>\n\n<script>\n// Common icons\nimport Pencil from 'vue-material-design-icons/Pencil.vue'\nimport Delete from 'vue-material-design-icons/Delete.vue'\n\n// Email icons\nimport StarOutline from 'vue-material-design-icons/StarOutline.vue'\nimport EmailUnread from 'vue-material-design-icons/Email.vue'\nimport Bookmark from 'vue-material-design-icons/Bookmark.vue'\nimport ClockOutlineIcon from 'vue-material-design-icons/ClockOutline.vue'\nimport AlertOctagonIcon from 'vue-material-design-icons/AlertOctagon.vue'\nimport CheckIcon from 'vue-material-design-icons/Check.vue'\nimport OpenInNewIcon from 'vue-material-design-icons/OpenInNew.vue'\nimport DownloadIcon from 'vue-material-design-icons/Download.vue'\n\n// Formatting icons\nimport FormatTitle from 'vue-material-design-icons/FormatTitle.vue'\nimport FormatAlignLeft from 'vue-material-design-icons/FormatAlignLeft.vue'\nimport FormatAlignCenter from 'vue-material-design-icons/FormatAlignCenter.vue'\nimport FormatAlignRight from 'vue-material-design-icons/FormatAlignRight.vue'\nimport FormatBold from 'vue-material-design-icons/FormatBold.vue'\nimport FormatItalic from 'vue-material-design-icons/FormatItalic.vue'\nimport FormatUnderline from 'vue-material-design-icons/FormatUnderline.vue'\n\nexport default {\n\tcomponents: {\n\t\t// Common icons\n\t\tPencil,\n\t\tDelete,\n\n\t\t// Email icons\n\t\tStarOutline,\n\t\tEmailUnread,\n\t\tBookmark,\n\t\tClockOutlineIcon,\n\t\tAlertOctagonIcon,\n\t\tCheckIcon,\n\t\tOpenInNewIcon,\n\t\tDownloadIcon,\n\n\t\t// Formatting icons\n\t\tFormatTitle,\n\t\tFormatAlignLeft,\n\t\tFormatAlignCenter,\n\t\tFormatAlignRight,\n\t\tFormatBold,\n\t\tFormatItalic,\n\t\tFormatUnderline,\n\t},\n\n\tdata() {\n\t\treturn {\n\t\t\tselected: false,\n\t\t\t// Formatting\n\t\t\tchecked: {\n\t\t\t\tbold: true,\n\t\t\t\titalic: false,\n\t\t\t\tunderline: false,\n\t\t\t},\n\t\t\tcolor: {\n\t\t\t\tblack: true,\n\t\t\t\tblue: false,\n\t\t\t\tred: false,\n\t\t\t\tgreen: false,\n\t\t\t},\n\t\t}\n\t},\n}\n</script>\n\n<style scoped>\np {\n\tmargin: 1rem 0;\n}\n</style>\n```\n\n## NcActions children limitations\n\n`<NcActions>` is supposed to be used with direct `<NcAction*>` children.\nAlthough it works when actions are not direct children but wrapped in custom components, it has limitations:\n- No `inline` prop property, including a single action display;\n- Accessibility issues, including changed keyboard behavior (see below);\n- Invalid HTML.\n\n```\n<template>\n\t<table class=\"actions-limitations-table\">\n\t\t<tr>\n\t\t\t<th style=\"width: 50%\">Non-direct children</th>\n\t\t\t<th style=\"width: 50%\">Direct NcAction* children</th>\n\t\t</tr>\n\n\t\t<tr>\n\t\t\t<th colspan=\"2\">This single button is supposed to be rendered as inline action but it is rendered as a menu:</th>\n\t\t</tr>\n\t\t<tr>\n\t\t\t<td>\n\t\t\t\t<NcActions>\n\t\t\t\t\t<MyUserActionButton />\n\t\t\t\t</NcActions>\n\t\t\t</td>\n\t\t\t<td>\n\t\t\t\t<NcActions>\n\t\t\t\t\t<NcActionButton>\n\t\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t\t<Account :size=\"20\" />\n\t\t\t\t\t\t</template>\n\t\t\t\t\t\tButton\n\t\t\t\t\t</NcActionButton>\n\t\t\t\t</NcActions>\n\t\t\t</td>\n\t\t</tr>\n\t\t<tr>\n\t\t\t<th colspan=\"2\">This NcActions is supposed to have 2 inline buttons but it has none:</th>\n\t\t</tr>\n\t\t<tr>\n\t\t\t<td>\n\t\t\t\t<NcActions :inline=\"2\">\n\t\t\t\t\t<MyUserActionButton v-for=\"i in 4\" />\n\t\t\t\t</NcActions>\n\t\t\t</td>\n\t\t\t<td>\n\t\t\t\t<NcActions :inline=\"2\">\n\t\t\t\t\t<NcActionButton v-for=\"i in 4\">\n\t\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t\t<Account :size=\"20\" />\n\t\t\t\t\t\t</template>\n\t\t\t\t\t\tButton\n\t\t\t\t\t</NcActionButton>\n\t\t\t\t</NcActions>\n\t\t\t</td>\n\t\t</tr>\n\t\t<tr>\n\t\t\t<th colspan=\"2\">This NcActions is supposed to have a11y role menu and keyboard navigation but it acts like a dialog:</th>\n\t\t</tr>\n\t\t<tr>\n\t\t\t<td>\n\t\t\t\t<NcActions>\n\t\t\t\t\t<MyActionsList />\n\t\t\t\t</NcActions>\n\t\t\t</td>\n\t\t\t<td>\n\t\t\t\t<NcActions>\n\t\t\t\t\t<NcActionButton v-for=\"i in 4\">\n\t\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t\t<Account :size=\"20\" />\n\t\t\t\t\t\t</template>\n\t\t\t\t\t\tButton\n\t\t\t\t\t</NcActionButton>\n\t\t\t\t</NcActions>\n\t\t\t</td>\n\t\t</tr>\n\t</table>\n</template>\n\n<script>\nimport Account from 'vue-material-design-icons/Account.vue'\n\nexport default {\n\tcomponents: {\n\t\tAccount,\n\n\t\tMyUserActionButton: {\n\t\t\tname: 'MyUserActionButton',\n\t\t\tcomponents: { Account },\n\t\t\trender: (h) => h('NcActionButton', ['Button', h('Account', { props: { size: 20 }, slot: 'icon' })]),\n\t\t},\n\n\t\tMyActionsList: {\n\t\t\tname: 'MyActionsList',\n\t\t\tcomponents: { Account },\n\t\t\trender: (h) => h('div', [\n\t\t\t\th('NcActionButton', ['Button', h('Account', { props: { size: 20 }, slot: 'icon' })]),\n\t\t\t\th('NcActionButton', ['Button', h('Account', { props: { size: 20 }, slot: 'icon' })]),\n\t\t\t\th('NcActionButton', ['Button', h('Account', { props: { size: 20 }, slot: 'icon' })]),\n\t\t\t\th('NcActionButton', ['Button', h('Account', { props: { size: 20 }, slot: 'icon' })]),\n\t\t\t]),\n\t\t}\n\t}\n}\n</script>\n\n<style>\n.actions-limitations-table {\n\tborder-collapse: collapse;\n\twidth: 100%;\n\tth,\n\ttd {\n\t\tborder: 1px solid var(--color-border);\n\t\tpadding: var(--default-grid-baseline);\n\t\tmax-width: 50%;\n\t}\n\n\tth {\n\t\ttext-align: center;\n\t\ttext-wrap: wrap;\n\t}\n}\n</style>\n```\n\n#### Manually providing semantic menu information\nDue to limitations of Vue, when using a custom wrapper for action components, you have to provide the semantic menu type yourself.\nThis is used for keyboard navigation and accessibility.\nIn this example a `NcActionInput` component is used within a custom wrapper, so `NcActions` is not able to detect the semantic menu type of 'dialog' automatically,\nmeaning it must be provided manually:\n\n```vue\n<template>\n\t<NcActions menu-semantic-type=\"dialog\">\n\t\t<MyWrapper />\n\t</NcActions>\n</template>\n<script>\nimport Pencil from 'vue-material-design-icons/Pencil.vue'\n\nexport default {\n\tcomponents: {\n\t\tMyWrapper: {\n\t\t\ttemplate: `\n<NcActionInput trailing-button-label=\"Submit\" label=\"Rename group\">\n\t<template #icon>\n\t\t<Pencil :size=\"20\" />\n\t</template>\n</NcActionInput>`,\n\t\t},\n\t\tcomponents: {\n\t\t\tPencil,\n\t\t},\n\t},\n}\n</script>\n```\n\n</docs>\n\n<script>\nimport Vue, { computed } from 'vue'\nimport IconDotsHorizontal from 'vue-material-design-icons/DotsHorizontal.vue'\nimport { useTrapStackControl } from '../../composables/useTrapStackControl.ts'\nimport { t } from '../../l10n.js'\nimport GenRandomId from '../../utils/GenRandomId.js'\nimport NcButton from '../NcButton/index.js'\nimport NcPopover from '../NcPopover/index.js'\n\nconst focusableSelector = '.focusable'\n\n/**\n * The Actions component can be used to display one ore more actions.\n * If only a single action is provided, it will be rendered as an inline icon.\n * For more, a menu indicator will be shown and a popover menu containing the\n * actions will be opened on click.\n *\n * @since 0.10.0\n */\nexport default {\n\tname: 'NcActions',\n\n\tcomponents: {\n\t\tNcButton,\n\t\tNcPopover,\n\t},\n\n\tprovide() {\n\t\treturn {\n\t\t\t/**\n\t\t\t * NcActions can be used as:\n\t\t\t * - Application menu (has menu role)\n\t\t\t * - Expanded block (has no specific role, should be used an element with expanded role)\n\t\t\t * - Popover with plain text or text inputs (has no specific role)\n\t\t\t * Depending on the usage (used items), the menu and its items should have different roles for a11y.\n\t\t\t * Provide the role for NcAction* components in the NcActions content.\n\t\t\t *\n\t\t\t * @type {import('vue').ComputedRef<boolean>}\n\t\t\t */\n\t\t\t'NcActions:isSemanticMenu': computed(() => this.actionsMenuSemanticType === 'menu'),\n\t\t}\n\t},\n\n\tprops: {\n\t\t/**\n\t\t * Specify the open state of the popover menu\n\t\t */\n\t\topen: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/**\n\t\t * This disables the internal open management,\n\t\t * so the actions menu only respects the `open` prop.\n\t\t * This is e.g. necessary for the NcAvatar component\n\t\t * to only open the actions menu after loading it's entries has finished.\n\t\t */\n\t\tmanualOpen: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/**\n\t\t * Force the actions to display in a three dot menu\n\t\t */\n\t\tforceMenu: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/**\n\t\t * Force the name to show for single actions\n\t\t */\n\t\tforceName: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/**\n\t\t * Specify the menu name\n\t\t */\n\t\tmenuName: {\n\t\t\ttype: String,\n\t\t\tdefault: null,\n\t\t},\n\n\t\t/**\n\t\t * NcActions can be used as:\n\t\t *\n\t\t * - Application menu (has menu role)\n\t\t * - Navigation (has no specific role, should be used an element with expanded role)\n\t\t * - Popover with plain text or text inputs (has no specific role)\n\t\t *\n\t\t * By default the used type is automatically detected by components used in the default slot.#\n\t\t *\n\t\t * With Vue this is limited to direct children of the NcActions component.\n\t\t * So if you use a wrapper, you have to provide the semantic type yourself (see Example)\n\t\t *\n\t\t * Choose:\n\t\t *\n\t\t * - 'dialog' if you use any of these components: NcActionInput', 'NcActionTextEditable'\n\t\t * - 'menu' if you use any of these components: 'NcActionButton', 'NcActionButtonGroup', 'NcActionCheckbox', 'NcActionRadio'\n\t\t * - 'expanded' if using one of these: 'NcActionLink', 'NcActionRouter'. This represents an expanded block.\n\t\t * - 'tooltip' only to be used when a text without any interactive elements is used.\n\t\t * - Leave this property unset otherwise\n\t\t */\n\t\tforceSemanticType: {\n\t\t\ttype: String,\n\t\t\tdefault: null,\n\t\t\tvalidator(value) {\n\t\t\t\treturn ['dialog', 'menu', 'expanded', 'tooltip'].includes(value)\n\t\t\t},\n\t\t},\n\n\t\t/**\n\t\t * Apply primary styling for this menu\n\t\t */\n\t\tprimary: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/**\n\t\t * Specifies the button variant used for trigger and single actions buttons.\n\t\t *\n\t\t * Accepted values: primary, secondary, tertiary, tertiary-no-background, tertiary-on-primary, error, warning, success. If left empty,\n\t\t * the default button style will be applied.\n\t\t *\n\t\t * @deprecated use `variant` instead - will be removed with v9\n\t\t */\n\t\ttype: {\n\t\t\ttype: String,\n\t\t\tvalidator(value) {\n\t\t\t\treturn ['primary', 'secondary', 'tertiary', 'tertiary-no-background', 'tertiary-on-primary', 'error', 'warning', 'success'].includes(value)\n\t\t\t},\n\n\t\t\tdefault: null,\n\t\t},\n\n\t\t/**\n\t\t * Icon to show for the toggle menu button\n\t\t * when more than one action is inside the actions component.\n\t\t * Only replace the default three-dot icon if really necessary.\n\t\t */\n\t\tdefaultIcon: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\n\t\t/**\n\t\t * Aria label for the actions menu.\n\t\t *\n\t\t * If `menuName` is defined this will not be used to prevent\n\t\t * any accessible name conflicts. This ensures that the\n\t\t * element can be activated via voice input.\n\t\t */\n\t\tariaLabel: {\n\t\t\ttype: String,\n\t\t\tdefault: t('Actions'),\n\t\t},\n\n\t\t/**\n\t\t * @deprecated To be removed in @nextcloud/vue 9. Migration guide: remove ariaHidden prop from NcAction* components.\n\t\t * @todo Add a check in @nextcloud/vue 9 that this prop is not provided,\n\t\t * otherwise root element will inherit incorrect aria-hidden.\n\t\t */\n\t\tariaHidden: {\n\t\t\ttype: Boolean,\n\t\t\t// eslint-disable-next-line vue/no-boolean-default\n\t\t\tdefault: null,\n\t\t},\n\n\t\t/**\n\t\t * Wanted direction of the menu\n\t\t */\n\t\tplacement: {\n\t\t\ttype: String,\n\t\t\tdefault: 'bottom',\n\t\t},\n\n\t\t/**\n\t\t * DOM element for the actions' popover boundaries\n\t\t */\n\t\tboundariesElement: {\n\t\t\ttype: Element,\n\t\t\tdefault: () => document.querySelector('#content-vue') ?? document.querySelector('body'),\n\t\t},\n\n\t\t/**\n\t\t * Selector for the actions' popover container\n\t\t */\n\t\tcontainer: {\n\t\t\ttype: [Boolean, String, Object, Element],\n\t\t\tdefault: 'body',\n\t\t},\n\n\t\t/**\n\t\t * Disabled state of the main button (single action or menu toggle)\n\t\t */\n\t\tdisabled: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/**\n\t\t * Display x items inline out of the dropdown menu\n\t\t * Will be ignored if `forceMenu` is set\n\t\t */\n\t\tinline: {\n\t\t\ttype: Number,\n\t\t\tdefault: 0,\n\t\t},\n\n\t\t/**\n\t\t * Specifies the button variant used for trigger and single actions buttons.\n\t\t *\n\t\t * Accepted values: primary, secondary, tertiary, tertiary-no-background, tertiary-on-primary, error, warning, success.\n\t\t * If left empty, the default button style will be applied.\n\t\t *\n\t\t * @since 8.24.0\n\t\t */\n\t\tvariant: {\n\t\t\ttype: String,\n\t\t\tvalidator(value) {\n\t\t\t\treturn ['primary', 'secondary', 'tertiary', 'tertiary-no-background', 'tertiary-on-primary', 'error', 'warning', 'success'].includes(value)\n\t\t\t},\n\n\t\t\tdefault: null,\n\t\t},\n\t},\n\n\temits: [\n\t\t'click',\n\t\t'blur',\n\t\t'focus',\n\n\t\t'close',\n\t\t'closed',\n\t\t'open',\n\t\t'opened',\n\t\t'update:open',\n\t],\n\n\tsetup() {\n\t\tconst randomId = `menu-${GenRandomId()}`\n\t\tconst triggerRandomId = `trigger-${randomId}`\n\n\t\treturn {\n\t\t\trandomId,\n\t\t\ttriggerRandomId,\n\t\t}\n\t},\n\n\tdata() {\n\t\treturn {\n\t\t\topened: this.open,\n\t\t\tfocusIndex: 0,\n\t\t\t/**\n\t\t\t * @type {'menu'|'expanded'|'dialog'|'tooltip'|'unknown'}\n\t\t\t */\n\t\t\tactionsMenuSemanticType: 'unknown',\n\t\t}\n\t},\n\n\tcomputed: {\n\t\ttriggerButtonVariant() {\n\t\t\t// If requested, we use a primary button\n\t\t\treturn (this.type ?? this.variant) || (this.primary\n\t\t\t\t? 'primary'\n\t\t\t\t// If it has a name, we use a secondary button\n\t\t\t\t: this.menuName ? 'secondary' : 'tertiary')\n\t\t},\n\n\t\t/**\n\t\t * A11y roles and keyboard navigation configuration depending on the semantic type\n\t\t */\n\t\tconfig() {\n\t\t\t/**\n\t\t\t * Accessibility notes:\n\t\t\t *\n\t\t\t * \"aria-haspopup\" and \"aria-expanded\" are managed by NcPopover via `popupRole`\n\t\t\t *\n\t\t\t * \"aria-controls\" should only present together with a valid aria-haspopup\n\t\t\t *\n\t\t\t * There is no valid popup role for expanded and tooltip in `aria-haspopup`.\n\t\t\t * aria-haspopup=\"true\" is equivalent to aria-haspopup=\"menu\".\n\t\t\t * They must not be treated as menus.\n\t\t\t *\n\t\t\t * Having both arrow and tab navigation is not allowed for a11y.\n\t\t\t * Either menu is an atomic UI element, and arrows select menu items, Tab moves to the next UI element.\n\t\t\t * Or the menu is an expanded list of UI elements.\n\t\t\t *\n\t\t\t * Navigation type is just an \"expanded\" block, similar to native <details> element.\n\t\t\t *\n\t\t\t * Arrow and Tab navigation should not be used together:\n\t\t\t * - Arrow navigation is used to navigate between items of UI element\n\t\t\t * - Tab navigation is used to navigate between UI elements on the page\n\t\t\t * - Menu is either an atomic UI element of just an expanded block of elements\n\t\t\t */\n\t\t\tconst configs = {\n\t\t\t\tmenu: {\n\t\t\t\t\tpopupRole: 'menu',\n\t\t\t\t\twithArrowNavigation: true,\n\t\t\t\t\twithTabNavigation: false,\n\t\t\t\t\twithFocusTrap: false,\n\t\t\t\t\ttriggerA11yAttr: {\n\t\t\t\t\t\t'aria-controls': this.opened ? this.randomId : null,\n\t\t\t\t\t},\n\n\t\t\t\t\tpopoverContainerA11yAttrs: {},\n\t\t\t\t\tpopoverUlA11yAttrs: {\n\t\t\t\t\t\t'aria-labelledby': this.triggerRandomId,\n\t\t\t\t\t\tid: this.randomId,\n\t\t\t\t\t\trole: 'menu',\n\t\t\t\t\t},\n\t\t\t\t},\n\n\t\t\t\texpanded: {\n\t\t\t\t\tpopupRole: undefined,\n\t\t\t\t\twithArrowNavigation: false,\n\t\t\t\t\twithTabNavigation: true,\n\t\t\t\t\twithFocusTrap: false,\n\t\t\t\t\ttriggerA11yAttr: {},\n\t\t\t\t\tpopoverContainerA11yAttrs: {},\n\t\t\t\t\tpopoverUlA11yAttrs: {},\n\t\t\t\t},\n\n\t\t\t\tdialog: {\n\t\t\t\t\tpopupRole: 'dialog',\n\t\t\t\t\twithArrowNavigation: false,\n\t\t\t\t\twithTabNavigation: true,\n\t\t\t\t\twithFocusTrap: true,\n\t\t\t\t\ttriggerA11yAttr: {\n\t\t\t\t\t\t'aria-controls': this.opened ? this.randomId : null,\n\t\t\t\t\t},\n\n\t\t\t\t\tpopoverContainerA11yAttrs: {\n\t\t\t\t\t\tid: this.randomId,\n\t\t\t\t\t\trole: 'dialog',\n\t\t\t\t\t\t// Dialog must have a label\n\t\t\t\t\t\t'aria-labelledby': this.triggerRandomId,\n\t\t\t\t\t\t'aria-modal': 'true',\n\t\t\t\t\t},\n\n\t\t\t\t\tpopoverUlA11yAttrs: {},\n\t\t\t\t},\n\n\t\t\t\ttooltip: {\n\t\t\t\t\tpopupRole: undefined,\n\t\t\t\t\twithArrowNavigation: false,\n\t\t\t\t\twithTabNavigation: false,\n\t\t\t\t\twithFocusTrap: false,\n\t\t\t\t\ttriggerA11yAttr: {},\n\t\t\t\t\tpopoverContainerA11yAttrs: {},\n\t\t\t\t\tpopoverUlA11yAttrs: {},\n\t\t\t\t},\n\n\t\t\t\t// Due to Vue limitations, we sometimes cannot determine the true type\n\t\t\t\t// As a fallback use both arrow navigation and focus trap\n\t\t\t\tunknown: {\n\t\t\t\t\tpopupRole: undefined,\n\t\t\t\t\trole: undefined,\n\t\t\t\t\twithArrowNavigation: true,\n\t\t\t\t\twithTabNavigation: false,\n\t\t\t\t\twithFocusTrap: true,\n\t\t\t\t\ttriggerA11yAttr: {},\n\t\t\t\t\tpopoverContainerA11yAttrs: {},\n\t\t\t\t\tpopoverUlA11yAttrs: {\n\t\t\t\t\t\t// there is nothing against labelling a list, it is mostly recommended\n\t\t\t\t\t\t// so as we do not know the dialog type lets include the label\n\t\t\t\t\t\t'aria-labelledby': this.triggerRandomId,\n\t\t\t\t\t},\n\t\t\t\t},\n\t\t\t}\n\t\t\treturn configs[this.actionsMenuSemanticType]\n\t\t},\n\t},\n\n\twatch: {\n\t\t// Watch parent prop\n\t\topen(state) {\n\t\t\tif (state === this.opened) {\n\t\t\t\treturn\n\t\t\t}\n\n\t\t\tthis.opened = state\n\t\t},\n\n\t\topened() {\n\t\t\t// Ensure that pressing escape will close the menu even if the menu is not hovered\n\t\t\t// and not currently active, e.g. because user opened the context menu\n\t\t\tif (this.opened) {\n\t\t\t\tdocument.body.addEventListener('keydown', this.handleEscapePressed)\n\t\t\t} else {\n\t\t\t\tdocument.body.removeEventListener('keydown', this.handleEscapePressed)\n\t\t\t}\n\t\t},\n\t},\n\n\tcreated() {\n\t\t// When component has its own custom focus management\n\t\t// The global focus trap stack should be paused\n\t\tuseTrapStackControl(() => this.opened, {\n\t\t\tdisabled: () => this.config.withFocusTrap,\n\t\t})\n\t},\n\n\tmethods: {\n\t\t/**\n\t\t * Get the name of the action component\n\t\t *\n\t\t * @param {import('vue').VNode} action - a vnode with a NcAction* component instance\n\t\t * @return {string} the name of the action component\n\t\t */\n\t\tgetActionName(action) {\n\t\t\treturn action?.componentOptions?.Ctor?.extendOptions?.name ?? action?.componentOptions?.tag\n\t\t},\n\n\t\t/**\n\t\t * Do we have exactly one Action and\n\t\t * is it allowed as a standalone element?\n\t\t *\n\t\t * @param {import('vue').VNode} action The action to check\n\t\t * @return {boolean}\n\t\t */\n\t\tisValidSingleAction(action) {\n\t\t\treturn ['NcActionButton', 'NcActionLink', 'NcActionRouter'].includes(this.getActionName(action))\n\t\t},\n\n\t\t/**\n\t\t * Check whether a icon prop value is an URL or not\n\t\t *\n\t\t * @param {string} url The icon prop value\n\t\t */\n\t\tisIconUrl(url) {\n\t\t\ttry {\n\t\t\t\treturn !!(new URL(url, url.startsWith('/') ? window.location.origin : undefined))\n\t\t\t} catch {\n\t\t\t\treturn false\n\t\t\t}\n\t\t},\n\n\t\t// MENU STATE MANAGEMENT\n\t\topenMenu() {\n\t\t\tif (this.opened) {\n\t\t\t\treturn\n\t\t\t}\n\n\t\t\tthis.opened = true\n\n\t\t\t/**\n\t\t\t * Event emitted when the popover menu open state is changed\n\t\t\t *\n\t\t\t * @type {boolean}\n\t\t\t */\n\t\t\tthis.$emit('update:open', true)\n\n\t\t\t/**\n\t\t\t * Event emitted when the popover menu is opened\n\t\t\t */\n\t\t\tthis.$emit('open')\n\t\t},\n\n\t\tasync closeMenu(returnFocus = true) {\n\t\t\tif (!this.opened) {\n\t\t\t\treturn\n\t\t\t}\n\n\t\t\t// Wait for the next tick to keep the menu in DOM, allowing other components to find what button in what menu was used,\n\t\t\t// for example, to implement auto set return focus.\n\t\t\t// NcPopover will actually remove the menu from DOM also on the next tick.\n\t\t\tawait this.$nextTick()\n\n\t\t\tthis.opened = false\n\n\t\t\tthis.$refs.popover?.clearFocusTrap({ returnFocus })\n\n\t\t\t/**\n\t\t\t * Event emitted when the popover menu open state is changed\n\t\t\t *\n\t\t\t * @type {boolean}\n\t\t\t */\n\t\t\tthis.$emit('update:open', false)\n\n\t\t\t/**\n\t\t\t * Event emitted when the popover menu is *being* closed.\n\t\t\t *\n\t\t\t * @deprecated use `update:open` instead. This is always emitted the same time as `('update:open', false)`\n\t\t\t */\n\t\t\tthis.$emit('close')\n\n\t\t\t// close everything\n\t\t\tthis.focusIndex = 0\n\n\t\t\tif (returnFocus) {\n\t\t\t\t// Focus back the trigger button\n\t\t\t\tthis.$refs.triggerButton?.$el.focus()\n\t\t\t}\n\t\t},\n\n\t\tonClosed() {\n\t\t\t/**\n\t\t\t * Event emitted when the popover menu is closed.\n\t\t\t *\n\t\t\t * This event is emitted after `update:open` was emitted and the closing transition finished.\n\t\t\t */\n\t\t\tthis.$emit('closed')\n\t\t},\n\n\t\t/**\n\t\t * Called when popover is shown after the show delay\n\t\t */\n\t\tonOpened() {\n\t\t\tthis.$nextTick(() => {\n\t\t\t\tthis.focusFirstAction(null)\n\t\t\t\tthis.resizePopover()\n\n\t\t\t\t/**\n\t\t\t\t * Event emitted when the popover menu is opened.\n\t\t\t\t *\n\t\t\t\t * This event is emitted after `update:open` was emitted and the opening transition finished.\n\t\t\t\t */\n\t\t\t\tthis.$emit('opened')\n\t\t\t})\n\t\t},\n\n\t\t/**\n\t\t * Handle resizing the popover to make sure users can discover there is more to scroll\n\t\t */\n\t\tresizePopover() {\n\t\t\t// Get the inner v-popper element that defines the popover height (from floating-vue)\n\t\t\tconst inner = this.$refs.menu.closest('.v-popper__inner')\n\t\t\tconst height = this.$refs.menu.clientHeight\n\t\t\tconst maxMenuHeight = this.getMaxMenuHeight()\n\n\t\t\t// If the popover height is limited by the max-height (scrollbars shown) limit the height to half of the last element\n\t\t\tif (height > maxMenuHeight) {\n\t\t\t\t// sum of action heights\n\t\t\t\tlet currentHeight = 0\n\t\t\t\t// last action height\n\t\t\t\tlet actionHeight = 0\n\t\t\t\tfor (const action of this.$refs.menuList.children) {\n\t\t\t\t\t// If the max height would be overflown by half of the current element,\n\t\t\t\t\t// then we limit the height to the half of the previous element\n\t\t\t\t\tif ((currentHeight + action.clientHeight / 2) > maxMenuHeight) {\n\t\t\t\t\t\tinner.style.height = `${currentHeight - actionHeight / 2}px`\n\t\t\t\t\t\tbreak\n\t\t\t\t\t}\n\t\t\t\t\t// otherwise sum up the height\n\t\t\t\t\tactionHeight = action.clientHeight\n\t\t\t\t\tcurrentHeight += actionHeight\n\t\t\t\t}\n\t\t\t} else {\n\t\t\t\tinner.style.height = 'fit-content'\n\t\t\t}\n\t\t},\n\n\t\tgetMaxMenuHeight() {\n\t\t\tconst { top, bottom } = this.$refs.triggerButton?.$el.getBoundingClientRect() ?? { top: 0, bottom: 0 }\n\t\t\tconst { top: boundaryTop, bottom: boundaryBottom } = this.boundariesElement?.getBoundingClientRect() ?? { top: 0, bottom: window.innerHeight }\n\n\t\t\treturn Math.max(\n\t\t\t\t// Either expand to the top\n\t\t\t\tMath.min(\n\t\t\t\t\t// max height is the top position of the trigger minus the header height minus the wedge and the padding\n\t\t\t\t\ttop - 84,\n\t\t\t\t\t// and also limited to the space in the boundary\n\t\t\t\t\ttop - boundaryTop,\n\t\t\t\t),\n\t\t\t\t// or expand to the bottom\n\t\t\t\tMath.min(\n\t\t\t\t\t// the max height is the window height minus current position of the trigger minus the wedge and padding\n\t\t\t\t\twindow.innerHeight - bottom - 34,\n\t\t\t\t\t// and limit to the available space in the boundary\n\t\t\t\t\tboundaryBottom - bottom,\n\t\t\t\t),\n\t\t\t)\n\t\t},\n\n\t\t// MENU KEYS & FOCUS MANAGEMENT\n\t\t/**\n\t\t * @return {HTMLElement|null}\n\t\t */\n\t\tgetCurrentActiveMenuItemElement() {\n\t\t\treturn this.$refs.menu.querySelector('li.active')\n\t\t},\n\n\t\t/**\n\t\t * @return {NodeList<HTMLElement>}\n\t\t */\n\t\tgetFocusableMenuItemElements() {\n\t\t\treturn this.$refs.menu.querySelectorAll(focusableSelector)\n\t\t},\n\n\t\t/**\n\t\t * Dispatches the keydown listener to different handlers\n\t\t *\n\t\t * @param {object} event The keydown event\n\t\t */\n\t\tonKeydown(event) {\n\t\t\tif (event.key === 'Tab') {\n\t\t\t\tif (this.config.withFocusTrap) {\n\t\t\t\t\t// Focus is managed by focus-trap\n\t\t\t\t\treturn\n\t\t\t\t}\n\n\t\t\t\tif (!this.config.withTabNavigation) {\n\t\t\t\t\t// Tab is not used for navigation - close the menu\n\t\t\t\t\t// Return focus to restore Tab sequence\n\t\t\t\t\t// So browser will correctly move focus to the next element\n\t\t\t\t\tthis.closeMenu(true)\n\t\t\t\t\treturn\n\t\t\t\t}\n\n\t\t\t\t// Tab is used for classic navigation but we implement it manually\n\n\t\t\t\tevent.preventDefault()\n\n\t\t\t\tconst focusList = this.getFocusableMenuItemElements()\n\t\t\t\tconst focusIndex = [...focusList].indexOf(document.activeElement)\n\t\t\t\tif (focusIndex === -1) {\n\t\t\t\t\t// This is not supposed to happen\n\t\t\t\t\t// But if it does - do nothing and keep native behavior\n\t\t\t\t\treturn\n\t\t\t\t}\n\t\t\t\tconst newFocusIndex = event.shiftKey ? focusIndex - 1 : focusIndex + 1\n\n\t\t\t\t// There is no focus-trap, so going out of the menu closes it\n\t\t\t\tif (newFocusIndex < 0 || newFocusIndex === focusList.length) {\n\t\t\t\t\tthis.closeMenu(true)\n\t\t\t\t}\n\n\t\t\t\t// Update current focused element\n\t\t\t\tthis.focusIndex = newFocusIndex\n\t\t\t\tthis.focusAction()\n\t\t\t\treturn\n\t\t\t}\n\n\t\t\tif (this.config.withArrowNavigation) {\n\t\t\t\tif (event.key === 'ArrowUp') {\n\t\t\t\t\tthis.focusPreviousAction(event)\n\t\t\t\t}\n\n\t\t\t\tif (event.key === 'ArrowDown') {\n\t\t\t\t\tthis.focusNextAction(event)\n\t\t\t\t}\n\n\t\t\t\tif (event.key === 'PageUp') {\n\t\t\t\t\tthis.focusFirstAction(event)\n\t\t\t\t}\n\n\t\t\t\tif (event.key === 'PageDown') {\n\t\t\t\t\tthis.focusLastAction(event)\n\t\t\t\t}\n\t\t\t}\n\n\t\t\tthis.handleEscapePressed(event)\n\t\t},\n\n\t\tonTriggerKeydown(event) {\n\t\t\tif (event.key === 'Escape') {\n\t\t\t\t// Tooltip has no focusable elements and the focus remains on the trigger button.\n\t\t\t\t// So keydown event on the menu cannot be handled to close Tooltip on Escape.\n\t\t\t\t// Handle on the trigger.\n\t\t\t\tif (this.actionsMenuSemanticType === 'tooltip') {\n\t\t\t\t\tthis.closeMenu()\n\t\t\t\t}\n\t\t\t}\n\t\t},\n\n\t\thandleEscapePressed(event) {\n\t\t\tif (event.key === 'Escape') {\n\t\t\t\tthis.closeMenu()\n\t\t\t\tevent.preventDefault()\n\t\t\t}\n\t\t},\n\n\t\tremoveCurrentActive() {\n\t\t\tconst currentActiveElement = this.$refs.menu.querySelector('li.active')\n\t\t\tif (currentActiveElement) {\n\t\t\t\tcurrentActiveElement.classList.remove('active')\n\t\t\t}\n\t\t},\n\n\t\tfocusAction() {\n\t\t\t// TODO: have a global disabled state for non input elements\n\t\t\tconst focusElement = this.getFocusableMenuItemElements()[this.focusIndex]\n\t\t\tif (focusElement) {\n\t\t\t\tthis.removeCurrentActive()\n\t\t\t\tconst liMenuParent = focusElement.closest('li.action')\n\t\t\t\tfocusElement.focus()\n\t\t\t\tif (liMenuParent) {\n\t\t\t\t\tliMenuParent.classList.add('active')\n\t\t\t\t}\n\t\t\t}\n\t\t},\n\n\t\tfocusPreviousAction(event) {\n\t\t\tif (this.opened) {\n\t\t\t\tif (this.focusIndex === 0) {\n\t\t\t\t\tthis.focusLastAction(event)\n\t\t\t\t} else {\n\t\t\t\t\tthis.preventIfEvent(event)\n\t\t\t\t\tthis.focusIndex = this.focusIndex - 1\n\t\t\t\t}\n\t\t\t\tthis.focusAction()\n\t\t\t}\n\t\t},\n\n\t\tfocusNextAction(event) {\n\t\t\tif (this.opened) {\n\t\t\t\tconst indexLength = this.getFocusableMenuItemElements().length - 1\n\t\t\t\tif (this.focusIndex === indexLength) {\n\t\t\t\t\tthis.focusFirstAction(event)\n\t\t\t\t} else {\n\t\t\t\t\tthis.preventIfEvent(event)\n\t\t\t\t\tthis.focusIndex = this.focusIndex + 1\n\t\t\t\t}\n\t\t\t\tthis.focusAction()\n\t\t\t}\n\t\t},\n\n\t\tfocusFirstAction(event) {\n\t\t\tif (this.opened) {\n\t\t\t\tthis.preventIfEvent(event)\n\t\t\t\t// In case a NcActionButton is considered checked we will use this one as a initial focus\n\t\t\t\t// Having aria-checked is the simplest way to determine the checked state of a button\n\t\t\t\t// TODO: determine when we need to focus the first checked item and when we not, for example, if menu has many radio groups\n\t\t\t\tconst firstCheckedIndex = [...this.getFocusableMenuItemElements()].findIndex((button) => {\n\t\t\t\t\treturn button.getAttribute('aria-checked') === 'true' && button.getAttribute('role') === 'menuitemradio'\n\t\t\t\t})\n\t\t\t\tthis.focusIndex = firstCheckedIndex > -1 ? firstCheckedIndex : 0\n\t\t\t\tthis.focusAction()\n\t\t\t}\n\t\t},\n\n\t\tfocusLastAction(event) {\n\t\t\tif (this.opened) {\n\t\t\t\tthis.preventIfEvent(event)\n\t\t\t\tthis.focusIndex = this.getFocusableMenuItemElements().length - 1\n\t\t\t\tthis.focusAction()\n\t\t\t}\n\t\t},\n\n\t\tpreventIfEvent(event) {\n\t\t\tif (event) {\n\t\t\t\tevent.preventDefault()\n\t\t\t\tevent.stopPropagation()\n\t\t\t}\n\t\t},\n\n\t\tonFocus(event) {\n\t\t\tthis.$emit('focus', event)\n\t\t},\n\n\t\tonBlur(event) {\n\t\t\tthis.$emit('blur', event)\n\n\t\t\t// When there is no focusable elements to handle Tab press from actions menu\n\t\t\t// It requires manual closing\n\t\t\tif (this.actionsMenuSemanticType === 'tooltip') {\n\t\t\t\t// Tooltip is supposed to have no focusable element.\n\t\t\t\t// However, if there is a custom focusable element, it will be auto-focused and cause the menu to be closed on open.\n\t\t\t\tif (this.$refs.menu && this.getFocusableMenuItemElements().length === 0) {\n\t\t\t\t\tthis.closeMenu(false)\n\t\t\t\t}\n\t\t\t}\n\t\t},\n\n\t\tonClick(event) {\n\t\t\t/**\n\t\t\t * Event emitted when the menu toggle button is clicked.\n\t\t\t *\n\t\t\t * This is e.g. necessary for the NcAvatar component\n\t\t\t * which needs to fetch the menu items on click.\n\t\t\t *\n\t\t\t * @type {PointerEvent}\n\t\t\t */\n\t\t\tthis.$emit('click', event)\n\t\t},\n\t},\n\n\t/**\n\t * The render function to display the component\n\t *\n\t * @param {Function} h The function to create VNodes\n\t * @return {object|undefined} The created VNode\n\t */\n\trender(h) {\n\t\t/**\n\t\t * Filter the Actions, so that we only get allowed components.\n\t\t * This also ensure that we don't get 'text' elements, which would\n\t\t * become problematic later on.\n\t\t */\n\t\tconst actions = (this.$slots.default || []).filter((action) => this.getActionName(action))\n\n\t\t// Check that we have at least one action\n\t\tif (actions.length === 0) {\n\t\t\treturn\n\t\t}\n\n\t\t/**\n\t\t * Separate the actions into inline and menu actions\n\t\t */\n\n\t\t/**\n\t\t * @type {import('vue').VNode[]}\n\t\t */\n\t\tlet validInlineActions = actions.filter(this.isValidSingleAction)\n\t\tif (this.forceMenu && validInlineActions.length > 0 && this.inline > 0) {\n\t\t\tVue.util.warn('Specifying forceMenu will ignore any inline actions rendering.')\n\t\t\tvalidInlineActions = []\n\t\t}\n\t\t/**\n\t\t * @type {import('vue').VNode[]}\n\t\t */\n\t\tconst inlineActions = validInlineActions.slice(0, this.inline)\n\t\t/**\n\t\t * @type {import('vue').VNode[]}\n\t\t */\n\t\tconst menuActions = actions.filter((action) => !inlineActions.includes(action))\n\n\t\t/**\n\t\t * Determine what kind of menu we have.\n\t\t * It defines keyboard navigation and a11y.\n\t\t */\n\t\tif (this.forceSemanticType) {\n\t\t\tthis.actionsMenuSemanticType = this.forceSemanticType\n\t\t} else {\n\t\t\tconst textInputActions = ['NcActionInput', 'NcActionTextEditable']\n\t\t\tconst menuItemsActions = ['NcActionButton', 'NcActionButtonGroup', 'NcActionCheckbox', 'NcActionRadio']\n\t\t\tconst linkActions = ['NcActionLink', 'NcActionRouter']\n\n\t\t\tconst hasTextInputAction = menuActions.some((action) => textInputActions.includes(this.getActionName(action)))\n\t\t\tconst hasMenuItemAction = menuActions.some((action) => menuItemsActions.includes(this.getActionName(action)))\n\t\t\tconst hasLinkAction = menuActions.some((action) => linkActions.includes(this.getActionName(action)))\n\n\t\t\tif (hasTextInputAction) {\n\t\t\t\tthis.actionsMenuSemanticType = 'dialog'\n\t\t\t} else if (hasMenuItemAction) {\n\t\t\t\tthis.actionsMenuSemanticType = 'menu'\n\t\t\t} else if (hasLinkAction) {\n\t\t\t\tthis.actionsMenuSemanticType = 'expanded'\n\t\t\t} else {\n\t\t\t\t// (!) Hotfix (!)\n\t\t\t\t// In Vue 2 it is not easy to search for NcAction* in sub-component of a slot.\n\t\t\t\t// When a menu is rendered, children are not mounted yet.\n\t\t\t\t// If we have NcActions > MyActionsList > NcActionButton, only MyActionsList's vnode is available.\n\t\t\t\t// So when NcActions has actions as non-direct children, here then we don't know about them.\n\t\t\t\t// Like this menu has no buttons/links/inputs.\n\t\t\t\t// It makes the menu incorrectly considered a tooltip.\n\t\t\t\tconst ncActions = actions.filter((action) => this.getActionName(action).startsWith('NcAction'))\n\t\t\t\tif (ncActions.length === actions.length) {\n\t\t\t\t\t// True tooltip\n\t\t\t\t\tthis.actionsMenuSemanticType = 'tooltip'\n\t\t\t\t} else {\n\t\t\t\t\t// Custom components are passed to the NcActions\n\t\t\t\t\tthis.actionsMenuSemanticType = 'unknown'\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\n\t\t/**\n\t\t * Render the provided action\n\t\t *\n\t\t * @param {import('vue').VNode} action the action to render\n\t\t * @return {Function} the vue render function\n\t\t */\n\t\tconst renderInlineAction = (action) => {\n\t\t\tconst iconProp = action?.componentOptions?.propsData?.icon\n\t\t\tconst icon = action?.data?.scopedSlots?.icon()?.[0] ?? (\n\t\t\t\tthis.isIconUrl(iconProp)\n\t\t\t\t\t? h('img', { class: 'action-item__menutoggle__icon', attrs: { src: iconProp, alt: '' } })\n\t\t\t\t\t: h('span', { class: ['icon', iconProp] })\n\t\t\t)\n\t\t\tconst attrs = action?.data?.attrs || {}\n\t\t\tconst clickListener = action?.componentOptions?.listeners?.click\n\n\t\t\tconst text = action?.componentOptions?.children?.[0]?.text?.trim?.()\n\t\t\tconst ariaLabel = action?.componentOptions?.propsData?.ariaLabel || text\n\t\t\tconst buttonText = this.forceName ? text : ''\n\n\t\t\tlet title = action?.componentOptions?.propsData?.title\n\t\t\t// Show a default title for single actions if none is present\n\t\t\tif (!(this.forceName || title)) {\n\t\t\t\ttitle = text\n\t\t\t}\n\n\t\t\tconst propsToForward = { ...(action?.componentOptions?.propsData ?? {}) }\n\t\t\tconst nativeType = ['submit', 'reset'].includes(propsToForward.type) ? propsToForward.modelValue : 'button'\n\t\t\t// not available on NcButton or with different meaning\n\t\t\tdelete propsToForward.modelValue\n\t\t\tdelete propsToForward.type\n\n\t\t\treturn h(\n\t\t\t\t'NcButton',\n\t\t\t\t{\n\t\t\t\t\tclass: [\n\t\t\t\t\t\t'action-item action-item--single',\n\t\t\t\t\t\taction?.data?.staticClass,\n\t\t\t\t\t\taction?.data?.class,\n\t\t\t\t\t],\n\t\t\t\t\tattrs: {\n\t\t\t\t\t\t...attrs,\n\t\t\t\t\t\t'aria-label': ariaLabel,\n\t\t\t\t\t\ttitle,\n\t\t\t\t\t},\n\t\t\t\t\tref: action?.data?.ref,\n\t\t\t\t\tprops: {\n\t\t\t\t\t\t...propsToForward,\n\t\t\t\t\t\tdisabled: this.disabled || action?.componentOptions?.propsData?.disabled,\n\t\t\t\t\t\tpressed: action?.componentOptions?.propsData?.modelValue,\n\t\t\t\t\t\ttype: nativeType,\n\t\t\t\t\t\t// If it has a menuName, we use a secondary button\n\t\t\t\t\t\tvariant: (this.type ?? this.variant) || (buttonText ? 'secondary' : 'tertiary'),\n\t\t\t\t\t},\n\t\t\t\t\ton: {\n\t\t\t\t\t\tfocus: this.onFocus,\n\t\t\t\t\t\tblur: this.onBlur,\n\t\t\t\t\t\t// forward any pressed state from NcButton just like NcActionButton does\n\t\t\t\t\t\t'update:pressed': action?.componentOptions?.listeners?.['update:modelValue'] ?? (() => {}),\n\t\t\t\t\t\t// If we have a click listener,\n\t\t\t\t\t\t// we bind it to execute on click and forward the click event\n\t\t\t\t\t\t...(!!clickListener && {\n\t\t\t\t\t\t\tclick: (event) => {\n\t\t\t\t\t\t\t\tif (clickListener) {\n\t\t\t\t\t\t\t\t\tclickListener(event)\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t},\n\t\t\t\t\t\t}),\n\t\t\t\t\t},\n\t\t\t\t},\n\t\t\t\t[\n\t\t\t\t\th('template', { slot: 'icon' }, [icon]),\n\t\t\t\t\tbuttonText,\n\t\t\t\t],\n\t\t\t)\n\t\t}\n\n\t\t/**\n\t\t * Render the actions popover\n\t\t *\n\t\t * @param {Array} actions the actions to render within\n\t\t * @return {Function} the vue render function\n\t\t */\n\t\tconst renderActionsPopover = (actions) => {\n\t\t\tconst triggerIcon = this.$slots.icon?.[0] || (\n\t\t\t\tthis.defaultIcon\n\t\t\t\t\t? h('span', { class: ['icon', this.defaultIcon] })\n\t\t\t\t\t: h(IconDotsHorizontal, {\n\t\t\t\t\t\t\tprops: {\n\t\t\t\t\t\t\t\tsize: 20,\n\t\t\t\t\t\t\t},\n\t\t\t\t\t\t})\n\t\t\t)\n\t\t\treturn h(\n\t\t\t\t'NcPopover',\n\t\t\t\t{\n\t\t\t\t\tref: 'popover',\n\t\t\t\t\tprops: {\n\t\t\t\t\t\tdelay: 0,\n\t\t\t\t\t\thandleResize: true,\n\t\t\t\t\t\tshown: this.opened,\n\t\t\t\t\t\tplacement: this.placement,\n\t\t\t\t\t\tboundary: this.boundariesElement,\n\t\t\t\t\t\tcontainer: this.container,\n\t\t\t\t\t\tpopoverBaseClass: 'action-item__popper',\n\t\t\t\t\t\tpopupRole: this.config.popupRole,\n\t\t\t\t\t\tnoAutoReturnFocus: !this.withFocusTrap,\n\t\t\t\t\t\tfocusTrap: this.config.withFocusTrap,\n\t\t\t\t\t},\n\t\t\t\t\t// For some reason the popover component\n\t\t\t\t\t// does not react to props given under the 'props' key,\n\t\t\t\t\t// so we use both 'attrs' and 'props'\n\t\t\t\t\tattrs: {\n\t\t\t\t\t\tdelay: 0,\n\t\t\t\t\t\thandleResize: true,\n\t\t\t\t\t\tshown: this.opened,\n\t\t\t\t\t\tplacement: this.placement,\n\t\t\t\t\t\tboundary: this.boundariesElement,\n\t\t\t\t\t\tcontainer: this.container,\n\t\t\t\t\t\t...this.manualOpen && { triggers: [] },\n\t\t\t\t\t},\n\t\t\t\t\ton: {\n\t\t\t\t\t\tshow: this.openMenu,\n\t\t\t\t\t\t'after-show': this.onOpened,\n\t\t\t\t\t\thide: this.closeMenu,\n\t\t\t\t\t\t'after-hide': this.onClosed,\n\t\t\t\t\t},\n\t\t\t\t},\n\t\t\t\t[\n\t\t\t\t\th('NcButton', {\n\t\t\t\t\t\tclass: 'action-item__menutoggle',\n\t\t\t\t\t\tprops: {\n\t\t\t\t\t\t\tvariant: this.triggerButtonVariant,\n\t\t\t\t\t\t\tdisabled: this.disabled,\n\t\t\t\t\t\t},\n\t\t\t\t\t\tslot: 'trigger',\n\t\t\t\t\t\tref: 'triggerButton',\n\t\t\t\t\t\tattrs: {\n\t\t\t\t\t\t\tid: this.triggerRandomId,\n\t\t\t\t\t\t\t'aria-label': this.menuName ? null : this.ariaLabel,\n\t\t\t\t\t\t\t...this.config.triggerA11yAttr,\n\t\t\t\t\t\t},\n\t\t\t\t\t\ton: {\n\t\t\t\t\t\t\tfocus: this.onFocus,\n\t\t\t\t\t\t\tblur: this.onBlur,\n\t\t\t\t\t\t\tclick: this.onClick,\n\t\t\t\t\t\t\tkeydown: this.onTriggerKeydown,\n\t\t\t\t\t\t},\n\t\t\t\t\t}, [\n\t\t\t\t\t\th('template', { slot: 'icon' }, [triggerIcon]),\n\t\t\t\t\t\tthis.menuName,\n\t\t\t\t\t]),\n\t\t\t\t\th('div', {\n\t\t\t\t\t\tclass: {\n\t\t\t\t\t\t\topen: this.opened,\n\t\t\t\t\t\t},\n\t\t\t\t\t\tattrs: {\n\t\t\t\t\t\t\ttabindex: '-1',\n\t\t\t\t\t\t\t...this.config.popoverContainerA11yAttrs,\n\t\t\t\t\t\t},\n\t\t\t\t\t\ton: {\n\t\t\t\t\t\t\tkeydown: this.onKeydown,\n\t\t\t\t\t\t},\n\t\t\t\t\t\tref: 'menu',\n\t\t\t\t\t}, [\n\t\t\t\t\t\th('ul', {\n\t\t\t\t\t\t\tattrs: {\n\t\t\t\t\t\t\t\ttabindex: '-1',\n\t\t\t\t\t\t\t\t...this.config.popoverUlA11yAttrs,\n\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\tref: 'menuList',\n\t\t\t\t\t\t}, [\n\t\t\t\t\t\t\tactions,\n\t\t\t\t\t\t]),\n\t\t\t\t\t]),\n\t\t\t\t],\n\t\t\t)\n\t\t}\n\n\t\t/**\n\t\t * If we have a single action only and didn't force a menu,\n\t\t * we render the action as a standalone button\n\t\t */\n\t\tif (actions.length === 1 && validInlineActions.length === 1 && !this.forceMenu) {\n\t\t\treturn renderInlineAction(actions[0])\n\t\t}\n\n\t\t// If we completely re-render the children\n\t\t// we need to focus the first action again\n\t\t// Mostly used when clicking a menu item\n\t\tthis.$nextTick(() => {\n\t\t\tif (this.opened && this.$refs.menu) {\n\t\t\t\tthis.resizePopover()\n\t\t\t\tconst isAnyActive = this.$refs.menu.querySelector('li.active') || []\n\t\t\t\tif (isAnyActive.length === 0) {\n\t\t\t\t\tthis.focusFirstAction()\n\t\t\t\t}\n\t\t\t}\n\t\t})\n\n\t\t/**\n\t\t * If we some inline actions to render, render them, then the menu\n\t\t */\n\t\tif (inlineActions.length > 0 && this.inline > 0) {\n\t\t\treturn h(\n\t\t\t\t'div',\n\t\t\t\t{\n\t\t\t\t\tclass: [\n\t\t\t\t\t\t'action-items',\n\t\t\t\t\t\t`action-item--${this.triggerButtonVariant}`,\n\t\t\t\t\t],\n\t\t\t\t},\n\t\t\t\t[\n\t\t\t\t\t// Render inline actions\n\t\t\t\t\t...inlineActions.map(renderInlineAction),\n\t\t\t\t\t// render the rest within the popover menu\n\t\t\t\t\tmenuActions.length > 0\n\t\t\t\t\t\t? h(\n\t\t\t\t\t\t\t\t'div',\n\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\tclass: [\n\t\t\t\t\t\t\t\t\t\t'action-item',\n\t\t\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\t\t\t'action-item--open': this.opened,\n\t\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\t],\n\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t[\n\t\t\t\t\t\t\t\t\trenderActionsPopover(menuActions),\n\t\t\t\t\t\t\t\t],\n\t\t\t\t\t\t\t)\n\t\t\t\t\t\t: null,\n\t\t\t\t],\n\t\t\t)\n\t\t}\n\n\t\t/**\n\t\t * Otherwise, we render the actions in a popover\n\t\t */\n\t\treturn h(\n\t\t\t'div',\n\t\t\t{\n\t\t\t\tclass: [\n\t\t\t\t\t'action-item action-item--default-popover',\n\t\t\t\t\t`action-item--${this.triggerButtonVariant}`,\n\t\t\t\t\t{\n\t\t\t\t\t\t'action-item--open': this.opened,\n\t\t\t\t\t},\n\t\t\t\t],\n\t\t\t},\n\t\t\t[\n\t\t\t\trenderActionsPopover(actions),\n\t\t\t],\n\t\t)\n\t},\n}\n</script>\n\n<style lang=\"scss\" scoped>\n// Inline buttons\n.action-items {\n\tdisplay: flex;\n\talign-items: center;\n\tgap: calc($icon-margin / 2);\n}\n\n.action-item {\n\t--open-background-color: var(--color-background-hover, $action-background-hover);\n\tposition: relative;\n\tdisplay: inline-block;\n\n\t&.action-item--primary {\n\t\t--open-background-color: var(--color-primary-element-hover);\n\t}\n\n\t&.action-item--secondary {\n\t\t--open-background-color: var(--color-primary-element-light-hover);\n\t}\n\n\t&.action-item--error {\n\t\t--open-background-color: var(--color-error-hover);\n\t}\n\n\t&.action-item--warning {\n\t\t--open-background-color: var(--color-warning-hover);\n\t}\n\n\t&.action-item--success {\n\t\t--open-background-color: var(--color-success-hover);\n\t}\n\n\t&.action-item--tertiary-no-background {\n\t\t--open-background-color: transparent;\n\t}\n\n\t&.action-item--open .action-item__menutoggle {\n\t\tbackground-color: var(--open-background-color);\n\t}\n\n\t&__menutoggle__icon {\n\t\twidth: 20px;\n\t\theight: 20px;\n\t\tobject-fit: contain;\n\t}\n}\n</style>\n\n<style lang=\"scss\">\n// We overwrote the popover base class, so we can style\n// the popover__inner for actions only.\n.v-popper--theme-nc-popover-8.v-popper__popper.action-item__popper .v-popper__wrapper {\n\tborder-radius: var(--border-radius-large);\n\n\t.v-popper__inner {\n\t\tborder-radius: var(--border-radius-large);\n\t\tpadding: 4px;\n\t\tmax-height: calc(100vh - var(--header-height));\n\t\toverflow: auto;\n\t}\n}\n</style>\n"],"names":["_sfc_main","NcButton","NcPopover","computed","t","GenRandomId","useTrapStackControl","Vue","actions","IconDotsHorizontal"],"mappings":"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","x_google_ignoreList":[0]}