@nextcloud/vue 9.0.0-alpha.0 → 9.0.0-alpha.2

package/dist/chunks/NcActions-VJy75Dj8.cjs

@@ -1,443 +0,0 @@
-var w = require("../assets/NcActions-cEMOhd0g.css");
-const d = require("./NcButton-Uxh-oARg.cjs"), b = require("./NcPopover-sVfBFdPh.cjs"), M = require("./GenRandomId-ULxaMkkr.cjs"), y = require("./_l10n-wK0o0jNS.cjs"), v = require("./DotsHorizontal-Ehuu1q0g.cjs"), i = require("vue"), k = require("./_plugin-vue_export-helper-xG2iG1wl.cjs");
-y.register(y.t4);
-const u = ".focusable", L = {
-  name: "NcActions",
-  components: {
-    NcButton: d.NcButton,
-    DotsHorizontal: v.DotsHorizontal,
-    NcPopover: b.NcPopover
-  },
-  provide() {
-    return {
-      /**
-       * NcActions can be used as:
-       * - Application menu (has menu role)
-       * - Navigation (has no specific role, should be used an element with navigation role)
-       * - Popover with plain text or text inputs (has no specific role)
-       * Depending on the usage (used items), the menu and its items should have different roles for a11y.
-       * Provide the role for NcAction* components in the NcActions content.
-       * @type {import('vue').ComputedRef<boolean>}
-       */
-      "NcActions:isSemanticMenu": i.computed(() => this.isSemanticMenu)
-    };
-  },
-  props: {
-    /**
-     * Specify the open state of the popover menu
-     */
-    open: {
-      type: Boolean,
-      default: !1
-    },
-    /**
-     * This disables the internal open management,
-     * so the actions menu only respects the `open` prop.
-     * This is e.g. necessary for the NcAvatar component
-     * to only open the actions menu after loading it's entries has finished.
-     */
-    manualOpen: {
-      type: Boolean,
-      default: !1
-    },
-    /**
-     * Force the actions to display in a three dot menu
-     */
-    forceMenu: {
-      type: Boolean,
-      default: !1
-    },
-    /**
-     * Force the name to show for single actions
-     */
-    forceName: {
-      type: Boolean,
-      default: !1
-    },
-    /**
-     * Specify the menu name
-     */
-    menuName: {
-      type: String,
-      default: null
-    },
-    /**
-     * Apply primary styling for this menu
-     */
-    primary: {
-      type: Boolean,
-      default: !1
-    },
-    /**
-     * Specifies the button type used for trigger and single actions buttons
-     * Accepted values: primary, secondary, tertiary, tertiary-no-background, tertiary-on-primary, error, warning, success. If left empty,
-     * the default button style will be applied.
-     */
-    type: {
-      type: String,
-      validator(e) {
-        return ["primary", "secondary", "tertiary", "tertiary-no-background", "tertiary-on-primary", "error", "warning", "success"].indexOf(e) !== -1;
-      },
-      default: null
-    },
-    /**
-     * Icon to show for the toggle menu button
-     * when more than one action is inside the actions component.
-     * Only replace the default three-dot icon if really necessary.
-     */
-    defaultIcon: {
-      type: String,
-      default: ""
-    },
-    /**
-     * Aria label for the actions menu.
-     *
-     * If `menuName` is defined this will not be used to prevent
-     * any accessible name conflicts. This ensures that the
-     * element can be activated via voice input.
-     */
-    ariaLabel: {
-      type: String,
-      default: y.t("Actions")
-    },
-    /**
-     * @deprecated To be removed in @nextcloud/vue 9. Migration guide: remove ariaHidden prop from NcAction* components.
-     * @todo Add a check in @nextcloud/vue 9 that this prop is not provided,
-     * otherwise root element will inherit incorrect aria-hidden.
-     */
-    ariaHidden: {
-      type: Boolean,
-      default: null
-    },
-    /**
-     * Wanted direction of the menu
-     */
-    placement: {
-      type: String,
-      default: "bottom"
-    },
-    /**
-     * DOM element for the actions' popover boundaries
-     */
-    boundariesElement: {
-      type: Element,
-      default: () => document.querySelector("body")
-    },
-    /**
-     * Selector for the actions' popover container
-     */
-    container: {
-      type: [String, Object, Element, Boolean],
-      default: "body"
-    },
-    /**
-     * Disabled state of the main button (single action or menu toggle)
-     */
-    disabled: {
-      type: Boolean,
-      default: !1
-    },
-    /**
-     * Display x items inline out of the dropdown menu
-     * Will be ignored if `forceMenu` is set
-     */
-    inline: {
-      type: Number,
-      default: 0
-    }
-  },
-  emits: [
-    "open",
-    "update:open",
-    "close",
-    "focus",
-    "blur"
-  ],
-  data() {
-    return {
-      opened: this.open,
-      focusIndex: 0,
-      randomId: `menu-${M.GenRandomId()}`,
-      isSemanticMenu: !1,
-      isSemanticNavigation: !1,
-      isSemanticPopoverLike: !1
-    };
-  },
-  computed: {
-    triggerBtnType() {
-      return this.type || (this.primary ? "primary" : this.menuName ? "secondary" : "tertiary");
-    }
-  },
-  watch: {
-    // Watch parent prop
-    open(e) {
-      e !== this.opened && (this.opened = e);
-    }
-  },
-  methods: {
-    /**
-     * Do we have exactly one Action and
-     * is it allowed as a standalone element?
-     *
-     * @param {Array} action The action to check
-     * @return {boolean}
-     */
-    isValidSingleAction(e) {
-      return ["NcActionButton", "NcActionLink", "NcActionRouter"].includes(e?.type?.name);
-    },
-    isAction(e) {
-      return e.type?.name?.startsWith?.("NcAction");
-    },
-    /**
-     * Check whether a icon prop value is an URL or not
-     * @param {string} url The icon prop value
-     */
-    isIconUrl(e) {
-      try {
-        return !!new URL(e, e.startsWith("/") ? window.location.origin : void 0);
-      } catch {
-        return !1;
-      }
-    },
-    // MENU STATE MANAGEMENT
-    openMenu() {
-      this.opened || (this.opened = !0, this.$emit("update:open", !0), this.$emit("open"));
-    },
-    closeMenu(e = !0) {
-      this.opened && (this.opened = !1, this.$refs.popover?.clearFocusTrap({ returnFocus: e }), this.$emit("update:open", !1), this.$emit("close"), this.focusIndex = 0, this.$refs.menuButton.$el.focus());
-    },
-    onOpen(e) {
-      this.$nextTick(() => {
-        this.focusFirstAction(e);
-      });
-    },
-    // MENU KEYS & FOCUS MANAGEMENT
-    // focus nearest focusable item on mouse move
-    // DO NOT change the focus if the target is already focused
-    // this will prevent issues with input being unfocused
-    // on mouse move
-    onMouseFocusAction(e) {
-      if (document?.activeElement === e.target)
-        return;
-      const n = e.target.closest("li");
-      if (n && this.$refs.menu.contains(n)) {
-        const s = n.querySelector(u);
-        if (s) {
-          const l = [...this.$refs.menu.querySelectorAll(u)].indexOf(s);
-          l > -1 && (this.focusIndex = l, this.focusAction());
-        }
-      }
-    },
-    /**
-     * Dispatches the keydown listener to different handlers
-     *
-     * @param {object} event The keydown event
-     */
-    onKeydown(e) {
-      e.key === "Tab" && !this.isSemanticPopoverLike && this.closeMenu(!1), e.key === "ArrowUp" && this.focusPreviousAction(e), e.key === "ArrowDown" && this.focusNextAction(e), e.key === "PageUp" && this.focusFirstAction(e), e.key === "PageDown" && this.focusLastAction(e), e.key === "Escape" && (this.closeMenu(), e.preventDefault());
-    },
-    removeCurrentActive() {
-      const e = this.$refs.menu.querySelector("li.active");
-      e && e.classList.remove("active");
-    },
-    focusAction() {
-      const e = this.$refs.menu.querySelectorAll(u)[this.focusIndex];
-      if (e) {
-        this.removeCurrentActive();
-        const n = e.closest("li.action");
-        e.focus(), n && n.classList.add("active");
-      }
-    },
-    focusPreviousAction(e) {
-      this.opened && (this.focusIndex === 0 ? this.focusLastAction(e) : (this.preventIfEvent(e), this.focusIndex = this.focusIndex - 1), this.focusAction());
-    },
-    focusNextAction(e) {
-      if (this.opened) {
-        const n = this.$refs.menu.querySelectorAll(u).length - 1;
-        this.focusIndex === n ? this.focusFirstAction(e) : (this.preventIfEvent(e), this.focusIndex = this.focusIndex + 1), this.focusAction();
-      }
-    },
-    focusFirstAction(e) {
-      if (this.opened) {
-        this.preventIfEvent(e);
-        const n = [...this.$refs.menu.querySelectorAll(u)].findIndex((s) => s.parentElement.getAttribute("aria-selected"));
-        this.focusIndex = n > -1 ? n : 0, this.focusAction();
-      }
-    },
-    focusLastAction(e) {
-      this.opened && (this.preventIfEvent(e), this.focusIndex = this.$refs.menu.querySelectorAll(u).length - 1, this.focusAction());
-    },
-    preventIfEvent(e) {
-      e && (e.preventDefault(), e.stopPropagation());
-    },
-    onFocus(e) {
-      this.$emit("focus", e);
-    },
-    onBlur(e) {
-      this.$emit("blur", e);
-    }
-  },
-  /**
-   * The render function to display the component
-   *
-   * @return {object|undefined} The created VNode
-   */
-  render() {
-    const e = [], n = (t, o) => {
-      t.forEach((c) => {
-        if (this.isAction(c)) {
-          o.push(c);
-          return;
-        }
-        c.type === i.Fragment && n(c.children, o);
-      });
-    };
-    n(this.$slots.default?.(), e);
-    const s = (t) => t?.type?.name, A = ["NcActionButton", "NcActionButtonGroup", "NcActionCheckbox", "NcActionRadio"], l = ["NcActionInput", "NcActionTextEditable"], x = ["NcActionLink", "NcActionRouter"], h = e.some((t) => l.includes(s(t))), g = e.some((t) => A.includes(s(t))), B = e.some((t) => x.includes(s(t)));
-    this.isSemanticMenu = g && !h, this.isSemanticNavigation = B && !g && !h, this.isSemanticPopoverLike = !this.isSemanticMenu && !this.isSemanticNavigation;
-    const p = this.isSemanticMenu ? "menu" : h ? "dialog" : "true";
-    let r = e.filter(this.isValidSingleAction);
-    if (this.forceMenu && r.length > 0 && this.inline > 0 && (i.warn("Specifying forceMenu will ignore any inline actions rendering."), r = []), e.length === 0)
-      return;
-    const I = (t) => {
-      const o = t?.props?.icon, c = t?.children?.icon?.()?.[0] ?? (this.isIconUrl(o) ? i.h("img", { class: "action-item__menutoggle__icon", src: o, alt: "" }) : i.h("span", { class: ["icon", o] })), f = t?.children?.default?.()?.[0]?.children?.trim(), S = this.forceName ? f : "";
-      let m = t?.props?.title;
-      this.forceName || m || (m = f);
-      const a = { ...t?.props ?? {} }, $ = ["submit", "reset"].includes(a.type) ? a.modelValue : "button";
-      return delete a.modelValue, delete a.type, i.h(
-        d.NcButton,
-        i.mergeProps(
-          a,
-          {
-            class: "action-item action-item--single",
-            "aria-label": t?.props?.["aria-label"] || f,
-            title: m,
-            // If it has a menuName, we use a secondary button
-            type: this.type || (S ? "secondary" : "tertiary"),
-            disabled: this.disabled || t?.props?.disabled,
-            pressed: t?.props?.modelValue,
-            nativeType: $,
-            onFocus: this.onFocus,
-            onBlur: this.onBlur,
-            // forward any pressed state from NcButton just like NcActionButton does
-            "onUpdate:pressed": t?.props?.["onUpdate:modelValue"] ?? (() => {
-            })
-          }
-        ),
-        {
-          default: () => S,
-          icon: () => c
-        }
-      );
-    }, N = (t) => {
-      const o = d.isSlotPopulated(this.$slots.icon?.()) ? this.$slots.icon?.() : this.defaultIcon ? i.h("span", { class: ["icon", this.defaultIcon] }) : i.h(v.DotsHorizontal, { size: 20 });
-      return i.h(
-        b.NcPopover,
-        {
-          ref: "popover",
-          delay: 0,
-          handleResize: !0,
-          shown: this.opened,
-          placement: this.placement,
-          boundary: this.boundariesElement,
-          container: this.container,
-          ...this.manualOpen && { triggers: [] },
-          popoverBaseClass: "action-item__popper",
-          popupRole: p,
-          // Menu and navigation should not have focus trap
-          // Tab should close the menu and move focus to the next UI element
-          setReturnFocus: this.isSemanticPopoverLike ? this.$refs.menuButton?.$el : null,
-          focusTrap: this.isSemanticPopoverLike,
-          onShow: this.openMenu,
-          onAfterShow: this.onOpen,
-          onHide: this.closeMenu
-        },
-        {
-          trigger: () => i.h(d.NcButton, {
-            class: "action-item__menutoggle",
-            type: this.triggerBtnType,
-            disabled: this.disabled,
-            ariaHidden: this.ariaHidden,
-            ref: "menuButton",
-            "aria-label": this.menuName ? null : this.ariaLabel,
-            "aria-controls": this.opened ? this.randomId : null,
-            onFocus: this.onFocus,
-            onBlur: this.onBlur
-          }, {
-            icon: () => o,
-            default: () => this.menuName
-          }),
-          default: () => i.h("div", {
-            class: {
-              open: this.opened
-            },
-            tabindex: "-1",
-            onKeydown: this.onKeydown,
-            onMousemove: this.onMouseFocusAction,
-            ref: "menu"
-          }, [
-            i.h("ul", {
-              id: this.randomId,
-              tabindex: "-1",
-              role: p !== "true" ? p : void 0
-              // TODO: allow to provide dialog aria-label
-            }, [
-              t
-            ])
-          ])
-        }
-      );
-    };
-    if (e.length === 1 && r.length === 1 && !this.forceMenu)
-      return I(r[0]);
-    if (this.$nextTick(() => {
-      this.opened && this.$refs.menu && (this.$refs.menu.querySelector("li.active") || []).length === 0 && this.focusFirstAction();
-    }), r.length > 0 && this.inline > 0) {
-      const t = r.slice(0, this.inline), o = e.filter((c) => !t.includes(c));
-      return i.h(
-        "div",
-        {
-          class: [
-            "action-items",
-            `action-item--${this.triggerBtnType}`
-          ]
-        },
-        [
-          // Render inline actions
-          ...t.map(I),
-          // render the rest within the popover menu
-          o.length > 0 ? i.h(
-            "div",
-            {
-              class: [
-                "action-item",
-                {
-                  "action-item--open": this.opened
-                }
-              ]
-            },
-            [
-              N(o)
-            ]
-          ) : null
-        ]
-      );
-    }
-    return i.h(
-      "div",
-      {
-        class: [
-          "action-item action-item--default-popover",
-          `action-item--${this.triggerBtnType}`,
-          {
-            "action-item--open": this.opened
-          }
-        ]
-      },
-      [
-        N(e)
-      ]
-    );
-  }
-}, P = /* @__PURE__ */ k._export_sfc(L, [["__scopeId", "data-v-00b334b3"]]);
-exports.NcActions = P;

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

@@ -1 +0,0 @@
-{"version":3,"file":"NcActions-VJy75Dj8.cjs","sources":["../../src/components/NcActions/NcActions.vue"],"sourcesContent":["<!--\n  - @copyright Copyright (c) 2018 John Molakvoæ <skjnldsv@protonmail.com>\n  -\n  - @author John Molakvoæ <skjnldsv@protonmail.com>\n  - @author Marco Ambrosini <marcoambrosini@icloud.com>\n  - @author Raimund Schlüßler <raimund.schluessler@mailbox.org>\n  -\n  - @license GNU AGPL version 3 or any later version\n  -\n  - This program is free software: you can redistribute it and/or modify\n  - it under the terms of the GNU Affero General Public License as\n  - published by the Free Software Foundation, either version 3 of the\n  - License, or (at your option) any later version.\n  -\n  - This program is distributed in the hope that it will be useful,\n  - but WITHOUT ANY WARRANTY; without even the implied warranty of\n  - MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the\n  - GNU Affero General Public License for more details.\n  -\n  - You should have received a copy of the GNU Affero General Public License\n  - along with this program. If not, see <http://www.gnu.org/licenses/>.\n  -\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'\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'\nimport OpenInNew from 'vue-material-design-icons/OpenInNew'\nimport Pencil from 'vue-material-design-icons/Pencil'\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'\nimport Delete from 'vue-material-design-icons/Delete'\nimport OpenInNew from 'vue-material-design-icons/OpenInNew'\nimport Pencil from 'vue-material-design-icons/Pencil'\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'\nimport Delete from 'vue-material-design-icons/Delete'\nimport OpenInNew from 'vue-material-design-icons/OpenInNew'\nimport Pencil from 'vue-material-design-icons/Pencil'\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'\nimport OpenInNew from 'vue-material-design-icons/OpenInNew'\nimport Pencil from 'vue-material-design-icons/Pencil'\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'\nimport Delete from 'vue-material-design-icons/Delete'\nimport Download from 'vue-material-design-icons/Download'\nimport Pencil from 'vue-material-design-icons/Pencil'\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'\nimport Pencil from 'vue-material-design-icons/Pencil'\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'\nimport Delete from 'vue-material-design-icons/Delete'\nimport Download from 'vue-material-design-icons/Download'\nimport Pencil from 'vue-material-design-icons/Pencil'\nimport Plus from 'vue-material-design-icons/Plus'\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'\nimport DotsHorizontalCircleOutline from 'vue-material-design-icons/DotsHorizontalCircleOutline'\nimport MicrophoneOff from 'vue-material-design-icons/MicrophoneOff'\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'\nimport Magnify from 'vue-material-design-icons/Magnify'\n\nexport default {\n\tcomponents: {\n\t\tDelete,\n\t\tMagnify,\n\t},\n}\n</script>\n```\n\n### Type variants\n\n```vue\n<template>\n\t<div>\n\t\t<NcActions :type=\"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 types\" 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 :type=\"current\" menu-name=\"Choose a type\">\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 types\" 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 :type=\"current\"  menu-name=\"Choose a type\">\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 types\" 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'\nimport Palette from 'vue-material-design-icons/Palette'\nimport SelectColor from 'vue-material-design-icons/SelectColor'\nimport CheckboxMarkedCircleOutline from 'vue-material-design-icons/CheckboxMarkedCircleOutline'\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\ttypes: [\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\tUses buttons, button groups, links and router links, separators, text. May have checkboxes and radio buttons.\n\t\t<p>\n\t\t\t<NcActions aria-label=\"Email menu\" type=\"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 v-model=\"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\n\t\t<h2>Menu in menubar</h2>\n\t\tSame as application menu. Separator can be used to make groups of radio buttons as well.\n\t\t<p>\n\t\t\t<NcActions aria-label=\"Text settings\" type=\"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=\"Allignment\">\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 v-model=\"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 v-model=\"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 v-model=\"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\" v-model=\"color.black\" value=\"Black\">Black</NcActionRadio>\n\t\t\t\t<NcActionRadio name=\"color\" v-model=\"color.blue\" value=\"Blue\">Blue</NcActionRadio>\n\t\t\t\t<NcActionRadio name=\"color\" v-model=\"color.red\" value=\"Red\">Red</NcActionRadio>\n\t\t\t\t<NcActionRadio name=\"color\" v-model=\"color.green\" value=\"Green\">Green</NcActionRadio>\n\t\t\t</NcActions>\n\t\t</p>\n\n\t\t<h2>Navigation</h2>\n\t\tUses links or router links. May use text elements, captions and separators.\n\t\t<p>\n\t\t\t<NcActions aria-label=\"Applications navigation\" :inline=\"2\" type=\"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/spreed\" 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>Popover</h2>\n\t\tHas any elements, including text input element, or no buttons.\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\t</div>\n</template>\n\n<script>\n// Common icons\nimport Pencil from 'vue-material-design-icons/Pencil'\nimport Delete from 'vue-material-design-icons/Delete'\n\n// Email icons\nimport StarOutline from 'vue-material-design-icons/StarOutline'\nimport EmailUnread from 'vue-material-design-icons/Email'\nimport Bookmark from 'vue-material-design-icons/Bookmark'\nimport ClockOutlineIcon from 'vue-material-design-icons/ClockOutline'\nimport AlertOctagonIcon from 'vue-material-design-icons/AlertOctagon'\nimport CheckIcon from 'vue-material-design-icons/Check'\nimport OpenInNewIcon from 'vue-material-design-icons/OpenInNew'\nimport DownloadIcon from 'vue-material-design-icons/Download'\n\n// Formating 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// Formating 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// Formating\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</docs>\n\n<script>\nimport NcButton from '../NcButton/index.ts'\nimport NcPopover from '../NcPopover/index.js'\nimport GenRandomId from '../../utils/GenRandomId.js'\nimport isSlotPopulated from '../../utils/isSlotPopulated.ts'\nimport { t } from '../../l10n.js'\n\nimport DotsHorizontal from 'vue-material-design-icons/DotsHorizontal.vue'\n\nimport { computed, h, Fragment, warn, mergeProps } from 'vue'\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 popovermenu 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\tDotsHorizontal,\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 * - Navigation (has no specific role, should be used an element with navigation 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 * @type {import('vue').ComputedRef<boolean>}\n\t\t\t */\n\t\t\t'NcActions:isSemanticMenu': computed(() => this.isSemanticMenu),\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 * 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 type used for trigger and single actions buttons\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\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'].indexOf(value) !== -1\n\t\t\t},\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\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('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: [String, Object, Element, Boolean],\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\t},\n\n\temits: [\n\t\t'open',\n\t\t'update:open',\n\t\t'close',\n\t\t'focus',\n\t\t'blur',\n\t],\n\n\tdata() {\n\t\treturn {\n\t\t\topened: this.open,\n\t\t\tfocusIndex: 0,\n\t\t\trandomId: `menu-${GenRandomId()}`,\n\t\t\tisSemanticMenu: false,\n\t\t\tisSemanticNavigation: false,\n\t\t\tisSemanticPopoverLike: false,\n\t\t}\n\t},\n\n\tcomputed: {\n\t\ttriggerBtnType() {\n\t\t\t// If requested, we use a primary button\n\t\t\treturn this.type || (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\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\t},\n\n\tmethods: {\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 {Array} 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(action?.type?.name)\n\t\t},\n\t\tisAction(vnode) {\n\t\t\treturn vnode.type?.name?.startsWith?.('NcAction')\n\t\t},\n\n\t\t/**\n\t\t * Check whether a icon prop value is an URL or not\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 (error) {\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\t\tcloseMenu(returnFocus = true) {\n\t\t\tif (!this.opened) {\n\t\t\t\treturn\n\t\t\t}\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 closed\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\t// focus back the menu button\n\t\t\tthis.$refs.menuButton.$el.focus()\n\t\t},\n\n\t\tonOpen(event) {\n\t\t\tthis.$nextTick(() => {\n\t\t\t\tthis.focusFirstAction(event)\n\t\t\t})\n\t\t},\n\n\t\t// MENU KEYS & FOCUS MANAGEMENT\n\t\t// focus nearest focusable item on mouse move\n\t\t// DO NOT change the focus if the target is already focused\n\t\t// this will prevent issues with input being unfocused\n\t\t// on mouse move\n\t\tonMouseFocusAction(event) {\n\t\t\tif (document?.activeElement === event.target) {\n\t\t\t\treturn\n\t\t\t}\n\n\t\t\tconst menuItem = event.target.closest('li')\n\t\t\tif (menuItem && this.$refs.menu.contains(menuItem)) {\n\t\t\t\tconst focusableItem = menuItem.querySelector(focusableSelector)\n\t\t\t\tif (focusableItem) {\n\t\t\t\t\tconst focusList = this.$refs.menu.querySelectorAll(focusableSelector)\n\t\t\t\t\tconst focusIndex = [...focusList].indexOf(focusableItem)\n\t\t\t\t\tif (focusIndex > -1) {\n\t\t\t\t\t\tthis.focusIndex = focusIndex\n\t\t\t\t\t\tthis.focusAction()\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\t\t},\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' && !this.isSemanticPopoverLike) {\n\t\t\t\tthis.closeMenu(false)\n\t\t\t}\n\n\t\t\tif (event.key === 'ArrowUp') {\n\t\t\t\tthis.focusPreviousAction(event)\n\t\t\t}\n\n\t\t\tif (event.key === 'ArrowDown') {\n\t\t\t\tthis.focusNextAction(event)\n\t\t\t}\n\n\t\t\tif (event.key === 'PageUp') {\n\t\t\t\tthis.focusFirstAction(event)\n\t\t\t}\n\n\t\t\tif (event.key === 'PageDown') {\n\t\t\t\tthis.focusLastAction(event)\n\t\t\t}\n\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\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\t\tfocusAction() {\n\t\t\t// TODO: have a global disabled state for non input elements\n\t\t\tconst focusElement = this.$refs.menu.querySelectorAll(focusableSelector)[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\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\t\tfocusNextAction(event) {\n\t\t\tif (this.opened) {\n\t\t\t\tconst indexLength = this.$refs.menu.querySelectorAll(focusableSelector).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\t\tfocusFirstAction(event) {\n\t\t\tif (this.opened) {\n\t\t\t\tthis.preventIfEvent(event)\n\t\t\t\t// In case a button is considered aria-selected we will use this one as a initial focus\n\t\t\t\tconst firstSelectedIndex = [...this.$refs.menu.querySelectorAll(focusableSelector)].findIndex((button) => {\n\t\t\t\t\treturn button.parentElement.getAttribute('aria-selected')\n\t\t\t\t})\n\t\t\t\tthis.focusIndex = firstSelectedIndex > -1 ? firstSelectedIndex : 0\n\t\t\t\tthis.focusAction()\n\t\t\t}\n\t\t},\n\t\tfocusLastAction(event) {\n\t\t\tif (this.opened) {\n\t\t\t\tthis.preventIfEvent(event)\n\t\t\t\tthis.focusIndex = this.$refs.menu.querySelectorAll(focusableSelector).length - 1\n\t\t\t\tthis.focusAction()\n\t\t\t}\n\t\t},\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\t\tonFocus(event) {\n\t\t\tthis.$emit('focus', event)\n\t\t},\n\t\tonBlur(event) {\n\t\t\tthis.$emit('blur', event)\n\t\t},\n\t},\n\n\t/**\n\t * The render function to display the component\n\t *\n\t * @return {object|undefined} The created VNode\n\t */\n\trender() {\n\t\tconst actions = []\n\t\t// We have to iterate over all slot elements\n\t\tconst findActions = (vnodes, actions) => {\n\t\t\tvnodes.forEach(vnode => {\n\t\t\t\tif (this.isAction(vnode)) {\n\t\t\t\t\tactions.push(vnode)\n\t\t\t\t\treturn\n\t\t\t\t}\n\t\t\t\t// If we encounter a Fragment, we have to check its children too\n\t\t\t\tif (vnode.type === Fragment) {\n\t\t\t\t\tfindActions(vnode.children, actions)\n\t\t\t\t}\n\t\t\t})\n\t\t}\n\t\tfindActions(this.$slots.default?.(), actions)\n\n\t\tconst getActionName = (action) => action?.type?.name\n\n\t\tconst menuItemsActions = ['NcActionButton', 'NcActionButtonGroup', 'NcActionCheckbox', 'NcActionRadio']\n\t\tconst textInputActions = ['NcActionInput', 'NcActionTextEditable']\n\t\tconst linkActions = ['NcActionLink', 'NcActionRouter']\n\n\t\tconst hasTextInputAction = actions.some(action => textInputActions.includes(getActionName(action)))\n\t\tconst hasMenuItemAction = actions.some(action => menuItemsActions.includes(getActionName(action)))\n\t\tconst hasLinkAction = actions.some(action => linkActions.includes(getActionName(action)))\n\n\t\t// We consider the NcActions to have role=\"menu\" if it consists some button-like action and not text inputs\n\t\tthis.isSemanticMenu = hasMenuItemAction && !hasTextInputAction\n\t\t// We consider the NcActions to be navigation if it consists some link-like action\n\t\tthis.isSemanticNavigation = hasLinkAction && !hasMenuItemAction && !hasTextInputAction\n\t\t// If it is not a menu and not a navigation, it is a popover with items: a form or just a text\n\t\tthis.isSemanticPopoverLike = !this.isSemanticMenu && !this.isSemanticNavigation\n\n\t\tconst popupRole = this.isSemanticMenu\n\t\t\t? 'menu'\n\t\t\t: hasTextInputAction\n\t\t\t\t? 'dialog'\n\t\t\t\t: 'true'\n\n\t\t/**\n\t\t * Filter and list actions that are allowed to be displayed inline\n\t\t */\n\t\tlet inlineActions = actions.filter(this.isValidSingleAction)\n\t\tif (this.forceMenu && inlineActions.length > 0 && this.inline > 0) {\n\t\t\twarn('Specifying forceMenu will ignore any inline actions rendering.')\n\t\t\tinlineActions = []\n\t\t}\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 * 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?.props?.icon\n\t\t\tconst icon = action?.children?.icon?.()?.[0] ?? (\n\t\t\t\tthis.isIconUrl(iconProp)\n\t\t\t\t\t? h('img', { class: 'action-item__menutoggle__icon', src: iconProp, alt: '' })\n\t\t\t\t\t: h('span', { class: ['icon', iconProp] })\n\t\t\t)\n\t\t\tconst text = action?.children?.default?.()?.[0]?.children?.trim()\n\t\t\tconst buttonText = this.forceName ? text : ''\n\n\t\t\tlet title = action?.props?.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?.props ?? {}) }\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(NcButton,\n\t\t\t\tmergeProps(\n\t\t\t\t\tpropsToForward,\n\t\t\t\t\t{\n\t\t\t\t\t\tclass: 'action-item action-item--single',\n\t\t\t\t\t\t'aria-label': action?.props?.['aria-label'] || text,\n\t\t\t\t\t\ttitle,\n\t\t\t\t\t\t// If it has a menuName, we use a secondary button\n\t\t\t\t\t\ttype: this.type || (buttonText ? 'secondary' : 'tertiary'),\n\t\t\t\t\t\tdisabled: this.disabled || action?.props?.disabled,\n\t\t\t\t\t\tpressed: action?.props?.modelValue,\n\t\t\t\t\t\tnativeType,\n\t\t\t\t\t\tonFocus: this.onFocus,\n\t\t\t\t\t\tonBlur: 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'onUpdate:pressed': action?.props?.['onUpdate:modelValue'] ?? (() => {}),\n\t\t\t\t\t},\n\t\t\t\t),\n\t\t\t\t{\n\t\t\t\t\tdefault: () => buttonText,\n\t\t\t\t\ticon: () => icon,\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 = isSlotPopulated(this.$slots.icon?.())\n\t\t\t\t? this.$slots.icon?.()\n\t\t\t\t: (this.defaultIcon\n\t\t\t\t\t? h('span', { class: ['icon', this.defaultIcon] })\n\t\t\t\t\t: h(DotsHorizontal, { size: 20 })\n\t\t\t\t)\n\t\t\treturn h(NcPopover,\n\t\t\t\t{\n\t\t\t\t\tref: 'popover',\n\t\t\t\t\tdelay: 0,\n\t\t\t\t\thandleResize: true,\n\t\t\t\t\tshown: this.opened,\n\t\t\t\t\tplacement: this.placement,\n\t\t\t\t\tboundary: this.boundariesElement,\n\t\t\t\t\tcontainer: this.container,\n\t\t\t\t\t...this.manualOpen && { triggers: [] },\n\t\t\t\t\tpopoverBaseClass: 'action-item__popper',\n\t\t\t\t\tpopupRole,\n\t\t\t\t\t// Menu and navigation should not have focus trap\n\t\t\t\t\t// Tab should close the menu and move focus to the next UI element\n\t\t\t\t\tsetReturnFocus: !this.isSemanticPopoverLike ? null : this.$refs.menuButton?.$el,\n\t\t\t\t\tfocusTrap: this.isSemanticPopoverLike,\n\t\t\t\t\tonShow: this.openMenu,\n\t\t\t\t\tonAfterShow: this.onOpen,\n\t\t\t\t\tonHide: this.closeMenu,\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\ttrigger: () => h(NcButton, {\n\t\t\t\t\t\tclass: 'action-item__menutoggle',\n\t\t\t\t\t\ttype: this.triggerBtnType,\n\t\t\t\t\t\tdisabled: this.disabled,\n\t\t\t\t\t\tariaHidden: this.ariaHidden,\n\t\t\t\t\t\tref: 'menuButton',\n\t\t\t\t\t\t'aria-label': this.menuName ? null : this.ariaLabel,\n\t\t\t\t\t\t'aria-controls': this.opened ? this.randomId : null,\n\t\t\t\t\t\tonFocus: this.onFocus,\n\t\t\t\t\t\tonBlur: this.onBlur,\n\t\t\t\t\t}, {\n\t\t\t\t\t\ticon: () => triggerIcon,\n\t\t\t\t\t\tdefault: () => this.menuName,\n\t\t\t\t\t}),\n\t\t\t\t\tdefault: () => h('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\ttabindex: '-1',\n\t\t\t\t\t\tonKeydown: this.onKeydown,\n\t\t\t\t\t\tonMousemove: this.onMouseFocusAction,\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\tid: this.randomId,\n\t\t\t\t\t\t\ttabindex: '-1',\n\t\t\t\t\t\t\trole: popupRole !== 'true' ? popupRole : undefined,\n\t\t\t\t\t\t\t// TODO: allow to provide dialog aria-label\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 && inlineActions.length === 1 && !this.forceMenu) {\n\t\t\treturn renderInlineAction(inlineActions[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\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\tconst renderedInlineActions = inlineActions.slice(0, this.inline)\n\t\t\t// Filter already rendered actions\n\t\t\tconst menuActions = actions.filter(action => !renderedInlineActions.includes(action))\n\t\t\treturn h('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.triggerBtnType}`,\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...renderedInlineActions.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('div',\n\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\tclass: [\n\t\t\t\t\t\t\t\t\t'action-item',\n\t\t\t\t\t\t\t\t\t{\n\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},\n\t\t\t\t\t\t\t\t],\n\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t[\n\t\t\t\t\t\t\t\trenderActionsPopover(menuActions),\n\t\t\t\t\t\t\t])\n\t\t\t\t\t\t: null,\n\t\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('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.triggerBtnType}`,\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\n\t// Spacing between buttons\n\t& > button {\n\t\tmargin-right: math.div($icon-margin, 2);\n\t}\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-dropdown.v-popper__popper.action-item__popper .v-popper__wrapper {\n\tborder-radius: var(--border-radius-large);\n\toverflow:hidden;\n\n\t.v-popper__inner {\n\t\tborder-radius: var(--border-radius-large);\n\t\tpadding: 4px;\n\t\tmax-height: calc(50vh - 16px);\n\t\toverflow: auto;\n\t}\n}\n</style>\n"],"names":["focusableSelector","_sfc_main","NcButton","DotsHorizontal","NcPopover","value","_l10n","GenRandomId","state","action","vnode","url","event","menuItem","focusableItem","focusIndex","currentActiveElement","focusElement","liMenuParent","indexLength","actions","findActions","vnodes","hasTextInputAction","textInputActions","getActionName","hasMenuItemAction","menuItemsActions","hasLinkAction","linkActions","popupRole","vue","inlineActions","renderInlineAction","iconProp","icon","buttonText","text","title","propsToForward","renderActionsPopover","triggerIcon","menuActions","renderedInlineActions"],"mappings":"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"}