@nextcloud/vue 8.7.0 → 8.8.0

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

@@ -0,0 +1 @@
+{"version":3,"file":"NcActions-iACO4laf.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  - @author Grigorii K. Shartsev <me@shgk.me>\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\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\" 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 :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\" 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 :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\" 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/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>Toolip</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'\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## 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;\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</docs>\n\n<script>\nimport NcButton from '../NcButton/index.js'\nimport NcPopover from '../NcPopover/index.js'\nimport GenRandomId from '../../utils/GenRandomId.js'\nimport { getTrapStack } from '../../utils/focusTrap.js'\nimport { t } from '../../l10n.js'\n\nimport Vue, { computed } from 'vue'\nimport DotsHorizontal from 'vue-material-design-icons/DotsHorizontal.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.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 * 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\t'click',\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\t/**\n\t\t\t * @type {'menu'|'navigation'|'dialog'|'tooltip'|'unknown'}\n\t\t\t */\n\t\t\tactionsMenuSemanticType: 'unknown',\n\t\t\texternalFocusTrapStack: [],\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\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 * There is no valid popup role for navigation 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\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},\n\t\t\t\tnavigation: {\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},\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},\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},\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},\n\t\t\t}\n\t\t\treturn configs[this.actionsMenuSemanticType]\n\t\t},\n\n\t\twithFocusTrap() {\n\t\t\treturn this.config.withFocusTrap\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\tthis.intersectIntoCurrentFocusTrapStack()\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 * When the component has its own focus trap, then it is managed by global trap stack by focus-trap.\n\t\t *\n\t\t * However if the component has no focus trap and is used inside another focus trap - there is an issue.\n\t\t * By default popover content is rendered in body or other container, which is likely outside the current focus trap containers.\n\t\t * It results in broken behavior from focus-trap.\n\t\t *\n\t\t * We need to pause all the focus traps for opening popover and then unpause them back after closing.\n\t\t */\n\t\tintersectIntoCurrentFocusTrapStack() {\n\t\t\tif (this.config.withFocusTrap) {\n\t\t\t\treturn\n\t\t\t}\n\n\t\t\tif (this.opened) {\n\t\t\t\tthis.externalFocusTrapStack = [...getTrapStack()]\n\t\t\t\tfor (const trap of this.externalFocusTrapStack) {\n\t\t\t\t\ttrap.pause()\n\t\t\t\t}\n\t\t\t} else {\n\t\t\t\tfor (const trap of this.externalFocusTrapStack) {\n\t\t\t\t\ttrap.unpause()\n\t\t\t\t}\n\t\t\t\tthis.externalFocusTrapStack = []\n\t\t\t}\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 * @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(e) {\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\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 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\tif (returnFocus) {\n\t\t\t\t// Focus back the menu button\n\t\t\t\tthis.$refs.menuButton.$el.focus()\n\t\t\t}\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/**\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\t\t/**\n\t\t * @return {NodeListOf<HTMLElement>}\n\t\t */\n\t\tgetFocusableMenuItemElements() {\n\t\t\treturn this.$refs.menu.querySelectorAll(focusableSelector)\n\t\t},\n\t\t/**\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\t * @param {PointerEvent} event - The mouse move event\n\t\t */\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.getFocusableMenuItemElements()\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') {\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\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\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\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.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\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.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\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\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\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\n\t\t\t// When there is no focusable elements to handle Tab press from actions menu\n\t\t\t// It requries 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\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\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 = menuActions.some(action => textInputActions.includes(this.getActionName(action)))\n\t\tconst hasMenuItemAction = menuActions.some(action => menuItemsActions.includes(this.getActionName(action)))\n\t\tconst hasLinkAction = menuActions.some(action => linkActions.includes(this.getActionName(action)))\n\n\t\tif (hasTextInputAction) {\n\t\t\tthis.actionsMenuSemanticType = 'dialog'\n\t\t} else if (hasMenuItemAction) {\n\t\t\tthis.actionsMenuSemanticType = 'menu'\n\t\t} else if (hasLinkAction) {\n\t\t\tthis.actionsMenuSemanticType = 'navigation'\n\t\t} else {\n\t\t\t// (!) Hotfix (!)\n\t\t\t// In Vue 2 it is not easy to search for NcAction* in sub-component of a slot.\n\t\t\t// When a menu is rendered, children are not mounted yet.\n\t\t\t// If we have NcActions > MyActionsList > NcActionButton, only MyActionsList's vnode is available.\n\t\t\t// So when NcActions has actions as non-direct children, here then we don't know about them.\n\t\t\t// Like this menu has no buttons/links/inputs.\n\t\t\t// It makes the menu incorrectly considered a tooltip.\n\t\t\tconst ncActions = actions.filter((action) => this.getActionName(action).startsWith('NcAction'))\n\t\t\tif (ncActions.length === actions.length) {\n\t\t\t\t// True tooltip\n\t\t\t\tthis.actionsMenuSemanticType = 'tooltip'\n\t\t\t} else {\n\t\t\t\t// Custom components are passed to the NcActions\n\t\t\t\tthis.actionsMenuSemanticType = 'unknown'\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('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// 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?.componentOptions?.propsData?.disabled,\n\t\t\t\t\t\tpressed: action?.componentOptions?.propsData?.modelValue,\n\t\t\t\t\t\tnativeType,\n\t\t\t\t\t\t...propsToForward,\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('DotsHorizontal', {\n\t\t\t\t\t\tprops: {\n\t\t\t\t\t\t\tsize: 20,\n\t\t\t\t\t\t},\n\t\t\t\t\t})\n\t\t\t)\n\t\t\tconst triggerRandomId = `${this.randomId}-trigger`\n\t\t\treturn h('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\tsetReturnFocus: this.config.withFocusTrap ? this.$refs.menuButton?.$el : null,\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.onOpen,\n\t\t\t\t\t\thide: this.closeMenu,\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\ttype: this.triggerBtnType,\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: 'menuButton',\n\t\t\t\t\t\tattrs: {\n\t\t\t\t\t\t\tid: triggerRandomId,\n\t\t\t\t\t\t\t'aria-label': this.menuName ? null : this.ariaLabel,\n\t\t\t\t\t\t\t// 'aria-controls' should only present together with a valid aria-haspopup\n\t\t\t\t\t\t\t'aria-controls': this.opened && this.config.popupRole ? this.randomId : null,\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},\n\t\t\t\t\t\ton: {\n\t\t\t\t\t\t\tkeydown: this.onKeydown,\n\t\t\t\t\t\t\tmousemove: this.onMouseFocusAction,\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\tid: this.randomId,\n\t\t\t\t\t\t\t\ttabindex: '-1',\n\t\t\t\t\t\t\t\trole: this.config.popupRole,\n\t\t\t\t\t\t\t\t// Dialog must have a label\n\t\t\t\t\t\t\t\t'aria-labelledby': this.actionsMenuSemanticType === 'dialog' ? triggerRandomId : undefined,\n\t\t\t\t\t\t\t\t'aria-modal': this.actionsMenuSemanticType === 'dialog' ? 'true' : undefined,\n\t\t\t\t\t\t\t},\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\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('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...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('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","computed","value","t","GenRandomId","state","action","getTrapStack","trap","url","e","returnFocus","event","menuItem","focusableItem","focusIndex","focusList","newFocusIndex","currentActiveElement","focusElement","liMenuParent","indexLength","firstCheckedIndex","button","h","actions","validInlineActions","Vue","inlineActions","menuActions","menuItemsActions","textInputActions","linkActions","hasTextInputAction","hasMenuItemAction","hasLinkAction","renderInlineAction","iconProp","icon","attrs","clickListener","text","ariaLabel","buttonText","title","propsToForward","nativeType","renderActionsPopover","triggerIcon","triggerRandomId"],"mappings":"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"}

package/dist/chunks/{NcActions-5_igU-CH.mjs → NcActions-rHzi4RcQ.mjs}

@@ -1,19 +1,19 @@
-import '../assets/NcActions-4Gq5bZLW.css';
-import $ from "../Components/NcButton.mjs";
-import { N as M } from "./NcPopover-T4GMXmKV.mjs";
-import { G as w } from "./GenRandomId-VodkdWbp.mjs";
-import { g as B } from "./focusTrap-Py2bQ9-r.mjs";
-import { r as F, o as O, a as _ } from "./_l10n-FmsZpnE4.mjs";
-import L, { computed as E } from "vue";
-import { D as R } from "./DotsHorizontal-IbmXTXRA.mjs";
-import { n as D } from "./_plugin-vue2_normalizer-u6G_3nkj.mjs";
-F(O);
-const c = ".focusable", P = {
+import '../assets/NcActions-mt8BQ_bn.css';
+import F from "../Components/NcButton.mjs";
+import { N as k } from "./NcPopover-93ns_0K4.mjs";
+import { G as M } from "./GenRandomId-VodkdWbp.mjs";
+import { g as S } from "./focusTrap-Py2bQ9-r.mjs";
+import { r as $, o as E, a as B } from "./_l10n-Y2fvkVoK.mjs";
+import O, { computed as R } from "vue";
+import { D as L } from "./DotsHorizontal-IbmXTXRA.mjs";
+import { n as _ } from "./_plugin-vue2_normalizer-u6G_3nkj.mjs";
+$(E);
+const m = ".focusable", D = {
   name: "NcActions",
   components: {
-    NcButton: $,
-    DotsHorizontal: R,
-    NcPopover: M
+    NcButton: F,
+    DotsHorizontal: L,
+    NcPopover: k
   },
   provide() {
     return {
@@ -26,7 +26,7 @@ const c = ".focusable", P = {
        * Provide the role for NcAction* components in the NcActions content.
        * @type {import('vue').ComputedRef<boolean>}
        */
-      "NcActions:isSemanticMenu": E(() => this.actionsMenuSemanticType === "menu")
+      "NcActions:isSemanticMenu": R(() => this.actionsMenuSemanticType === "menu")
     };
   },
   props: {
@@ -105,7 +105,7 @@ const c = ".focusable", P = {
      */
     ariaLabel: {
       type: String,
-      default: _("Actions")
+      default: B("Actions")
     },
     /**
      * @deprecated To be removed in @nextcloud/vue 9. Migration guide: remove ariaHidden prop from NcAction* components.
@@ -165,11 +165,11 @@ const c = ".focusable", P = {
     return {
       opened: this.open,
       focusIndex: 0,
-      randomId: `menu-${w()}`,
+      randomId: `menu-${M()}`,
       /**
-       * @type {'menu'|'navigation'|'dialog'|'tooltip'|''}
+       * @type {'menu'|'navigation'|'dialog'|'tooltip'|'unknown'}
        */
-      actionsMenuSemanticType: "",
+      actionsMenuSemanticType: "unknown",
       externalFocusTrapStack: []
     };
   },
@@ -177,8 +177,48 @@ const c = ".focusable", P = {
     triggerBtnType() {
       return this.type || (this.primary ? "primary" : this.menuName ? "secondary" : "tertiary");
     },
+    /**
+     * A11y roles and keyboard navigation configuration depending on the semantic type
+     */
+    config() {
+      return {
+        menu: {
+          popupRole: "menu",
+          withArrowNavigation: !0,
+          withTabNavigation: !1,
+          withFocusTrap: !1
+        },
+        navigation: {
+          popupRole: void 0,
+          withArrowNavigation: !1,
+          withTabNavigation: !0,
+          withFocusTrap: !1
+        },
+        dialog: {
+          popupRole: "dialog",
+          withArrowNavigation: !1,
+          withTabNavigation: !0,
+          withFocusTrap: !0
+        },
+        tooltip: {
+          popupRole: void 0,
+          withArrowNavigation: !1,
+          withTabNavigation: !1,
+          withFocusTrap: !1
+        },
+        // Due to Vue limitations, we sometimes cannot determine the true type
+        // As a fallback use both arrow navigation and focus trap
+        unknown: {
+          popupRole: void 0,
+          role: void 0,
+          withArrowNavigation: !0,
+          withTabNavigation: !1,
+          withFocusTrap: !0
+        }
+      }[this.actionsMenuSemanticType];
+    },
     withFocusTrap() {
-      return this.actionsMenuSemanticType === "dialog";
+      return this.config.withFocusTrap;
     }
   },
   watch: {
@@ -210,9 +250,9 @@ const c = ".focusable", P = {
      * We need to pause all the focus traps for opening popover and then unpause them back after closing.
      */
     intersectIntoCurrentFocusTrapStack() {
-      if (!this.withFocusTrap)
+      if (!this.config.withFocusTrap)
         if (this.opened) {
-          this.externalFocusTrapStack = [...B()];
+          this.externalFocusTrapStack = [...S()];
           for (const t of this.externalFocusTrapStack)
             t.pause();
         } else {
@@ -255,19 +295,34 @@ const c = ".focusable", P = {
       });
     },
     // 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
+    /**
+     * @return {HTMLElement|null}
+     */
+    getCurrentActiveMenuItemElement() {
+      return this.$refs.menu.querySelector("li.active");
+    },
+    /**
+     * @return {NodeListOf<HTMLElement>}
+     */
+    getFocusableMenuItemElements() {
+      return this.$refs.menu.querySelectorAll(m);
+    },
+    /**
+     * 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
+     * @param {PointerEvent} event - The mouse move event
+     */
     onMouseFocusAction(t) {
       if (document.activeElement === t.target)
         return;
       const n = t.target.closest("li");
       if (n && this.$refs.menu.contains(n)) {
-        const i = n.querySelector(c);
+        const i = n.querySelector(m);
         if (i) {
-          const o = [...this.$refs.menu.querySelectorAll(c)].indexOf(i);
-          o > -1 && (this.focusIndex = o, this.focusAction());
+          const s = [...this.getFocusableMenuItemElements()].indexOf(i);
+          s > -1 && (this.focusIndex = s, this.focusAction());
         }
       }
     },
@@ -277,14 +332,32 @@ const c = ".focusable", P = {
      * @param {object} event The keydown event
      */
     onKeydown(t) {
-      t.key === "Tab" && !this.withFocusTrap && this.closeMenu(!0), t.key === "ArrowUp" && this.focusPreviousAction(t), t.key === "ArrowDown" && this.focusNextAction(t), t.key === "PageUp" && this.focusFirstAction(t), t.key === "PageDown" && this.focusLastAction(t), t.key === "Escape" && (this.closeMenu(), t.preventDefault());
+      if (t.key === "Tab") {
+        if (this.config.withFocusTrap)
+          return;
+        if (!this.config.withTabNavigation) {
+          this.closeMenu(!0);
+          return;
+        }
+        t.preventDefault();
+        const n = this.getFocusableMenuItemElements(), i = [...n].indexOf(document.activeElement);
+        if (i === -1)
+          return;
+        const o = t.shiftKey ? i - 1 : i + 1;
+        (o < 0 || o === n.length) && this.closeMenu(!0), this.focusIndex = o, this.focusAction();
+        return;
+      }
+      this.config.withArrowNavigation && (t.key === "ArrowUp" && this.focusPreviousAction(t), t.key === "ArrowDown" && this.focusNextAction(t), t.key === "PageUp" && this.focusFirstAction(t), t.key === "PageDown" && this.focusLastAction(t)), t.key === "Escape" && (this.closeMenu(), t.preventDefault());
+    },
+    onTriggerKeydown(t) {
+      t.key === "Escape" && this.actionsMenuSemanticType === "tooltip" && this.closeMenu();
     },
     removeCurrentActive() {
       const t = this.$refs.menu.querySelector("li.active");
       t && t.classList.remove("active");
     },
     focusAction() {
-      const t = this.$refs.menu.querySelectorAll(c)[this.focusIndex];
+      const t = this.getFocusableMenuItemElements()[this.focusIndex];
       if (t) {
         this.removeCurrentActive();
         const n = t.closest("li.action");
@@ -296,19 +369,19 @@ const c = ".focusable", P = {
     },
     focusNextAction(t) {
       if (this.opened) {
-        const n = this.$refs.menu.querySelectorAll(c).length - 1;
+        const n = this.getFocusableMenuItemElements().length - 1;
         this.focusIndex === n ? this.focusFirstAction(t) : (this.preventIfEvent(t), this.focusIndex = this.focusIndex + 1), this.focusAction();
       }
     },
     focusFirstAction(t) {
       if (this.opened) {
         this.preventIfEvent(t);
-        const n = [...this.$refs.menu.querySelectorAll(c)].findIndex((i) => i.parentElement.getAttribute("aria-selected"));
+        const n = [...this.getFocusableMenuItemElements()].findIndex((i) => i.getAttribute("aria-checked") === "true" && i.getAttribute("role") === "menuitemradio");
         this.focusIndex = n > -1 ? n : 0, this.focusAction();
       }
     },
     focusLastAction(t) {
-      this.opened && (this.preventIfEvent(t), this.focusIndex = this.$refs.menu.querySelectorAll(c).length - 1, this.focusAction());
+      this.opened && (this.preventIfEvent(t), this.focusIndex = this.getFocusableMenuItemElements().length - 1, this.focusAction());
     },
     preventIfEvent(t) {
       t && (t.preventDefault(), t.stopPropagation());
@@ -317,7 +390,7 @@ const c = ".focusable", P = {
       this.$emit("focus", t);
     },
     onBlur(t) {
-      this.$emit("blur", t), this.actionsMenuSemanticType === "tooltip" && this.$refs.menu && this.$refs.menu.querySelectorAll(c).length === 0 && this.closeMenu(!1);
+      this.$emit("blur", t), this.actionsMenuSemanticType === "tooltip" && this.$refs.menu && this.getFocusableMenuItemElements().length === 0 && this.closeMenu(!1);
     },
     onClick(t) {
       this.$emit("click", t);
@@ -334,20 +407,15 @@ const c = ".focusable", P = {
     if (n.length === 0)
       return;
     let i = n.filter(this.isValidSingleAction);
-    this.forceMenu && i.length > 0 && this.inline > 0 && (L.util.warn("Specifying forceMenu will ignore any inline actions rendering."), i = []);
-    const a = i.slice(0, this.inline), o = n.filter((e) => !a.includes(e)), y = ["NcActionButton", "NcActionButtonGroup", "NcActionCheckbox", "NcActionRadio"], A = ["NcActionInput", "NcActionTextEditable"], g = ["NcActionLink", "NcActionRouter"], I = o.some((e) => A.includes(this.getActionName(e))), S = o.some((e) => y.includes(this.getActionName(e))), x = o.some((e) => g.includes(this.getActionName(e)));
-    I ? this.actionsMenuSemanticType = "dialog" : S ? this.actionsMenuSemanticType = "menu" : x ? this.actionsMenuSemanticType = "navigation" : n.filter((s) => this.getActionName(s).startsWith("NcAction")).length === n.length ? this.actionsMenuSemanticType = "tooltip" : this.actionsMenuSemanticType = "dialog";
-    const l = {
-      dialog: "dialog",
-      menu: "menu",
-      navigation: "true",
-      tooltip: "true"
-    }[this.actionsMenuSemanticType], d = (e) => {
-      const s = e?.componentOptions?.propsData?.icon, T = e?.data?.scopedSlots?.icon()?.[0] ?? (this.isIconUrl(s) ? t("img", { class: "action-item__menutoggle__icon", attrs: { src: s, alt: "" } }) : t("span", { class: ["icon", s] })), b = e?.data?.attrs || {}, u = e?.componentOptions?.listeners?.click, p = e?.componentOptions?.children?.[0]?.text?.trim?.(), N = e?.componentOptions?.propsData?.ariaLabel || p, m = this.forceName ? p : "";
-      let f = e?.componentOptions?.propsData?.title;
-      this.forceName || f || (f = p);
-      const r = { ...e?.componentOptions?.propsData ?? {} }, k = ["submit", "reset"].includes(r.type) ? r.modelValue : "button";
-      return delete r.modelValue, delete r.type, t(
+    this.forceMenu && i.length > 0 && this.inline > 0 && (O.util.warn("Specifying forceMenu will ignore any inline actions rendering."), i = []);
+    const o = i.slice(0, this.inline), s = n.filter((e) => !o.includes(e)), g = ["NcActionButton", "NcActionButtonGroup", "NcActionCheckbox", "NcActionRadio"], y = ["NcActionInput", "NcActionTextEditable"], A = ["NcActionLink", "NcActionRouter"], b = s.some((e) => y.includes(this.getActionName(e))), w = s.some((e) => g.includes(this.getActionName(e))), I = s.some((e) => A.includes(this.getActionName(e)));
+    b ? this.actionsMenuSemanticType = "dialog" : w ? this.actionsMenuSemanticType = "menu" : I ? this.actionsMenuSemanticType = "navigation" : n.filter((c) => this.getActionName(c).startsWith("NcAction")).length === n.length ? this.actionsMenuSemanticType = "tooltip" : this.actionsMenuSemanticType = "unknown";
+    const f = (e) => {
+      const c = e?.componentOptions?.propsData?.icon, r = e?.data?.scopedSlots?.icon()?.[0] ?? (this.isIconUrl(c) ? t("img", { class: "action-item__menutoggle__icon", attrs: { src: c, alt: "" } }) : t("span", { class: ["icon", c] })), T = e?.data?.attrs || {}, u = e?.componentOptions?.listeners?.click, l = e?.componentOptions?.children?.[0]?.text?.trim?.(), N = e?.componentOptions?.propsData?.ariaLabel || l, d = this.forceName ? l : "";
+      let p = e?.componentOptions?.propsData?.title;
+      this.forceName || p || (p = l);
+      const a = { ...e?.componentOptions?.propsData ?? {} }, v = ["submit", "reset"].includes(a.type) ? a.modelValue : "button";
+      return delete a.modelValue, delete a.type, t(
         "NcButton",
         {
           class: [
@@ -356,18 +424,18 @@ const c = ".focusable", P = {
             e?.data?.class
           ],
           attrs: {
-            ...b,
+            ...T,
             "aria-label": N,
-            title: f
+            title: p
           },
           ref: e?.data?.ref,
           props: {
             // If it has a menuName, we use a secondary button
-            type: this.type || (m ? "secondary" : "tertiary"),
+            type: this.type || (d ? "secondary" : "tertiary"),
             disabled: this.disabled || e?.componentOptions?.propsData?.disabled,
             pressed: e?.componentOptions?.propsData?.modelValue,
-            nativeType: k,
-            ...r
+            nativeType: v,
+            ...a
           },
           on: {
             focus: this.onFocus,
@@ -378,23 +446,23 @@ const c = ".focusable", P = {
             // If we have a click listener,
             // we bind it to execute on click and forward the click event
             ...!!u && {
-              click: (v) => {
-                u && u(v);
+              click: (x) => {
+                u && u(x);
               }
             }
           }
         },
         [
-          t("template", { slot: "icon" }, [T]),
-          m
+          t("template", { slot: "icon" }, [r]),
+          d
         ]
       );
     }, h = (e) => {
-      const s = this.$slots.icon?.[0] || (this.defaultIcon ? t("span", { class: ["icon", this.defaultIcon] }) : t("DotsHorizontal", {
+      const c = this.$slots.icon?.[0] || (this.defaultIcon ? t("span", { class: ["icon", this.defaultIcon] }) : t("DotsHorizontal", {
         props: {
           size: 20
         }
-      }));
+      })), r = `${this.randomId}-trigger`;
       return t(
         "NcPopover",
         {
@@ -407,9 +475,9 @@ const c = ".focusable", P = {
             boundary: this.boundariesElement,
             container: this.container,
             popoverBaseClass: "action-item__popper",
-            popupRole: l,
-            setReturnFocus: this.withFocusTrap ? this.$refs.menuButton?.$el : null,
-            focusTrap: this.withFocusTrap
+            popupRole: this.config.popupRole,
+            setReturnFocus: this.config.withFocusTrap ? this.$refs.menuButton?.$el : null,
+            focusTrap: this.config.withFocusTrap
           },
           // For some reason the popover component
           // does not react to props given under the 'props' key,
@@ -439,16 +507,19 @@ const c = ".focusable", P = {
             slot: "trigger",
             ref: "menuButton",
             attrs: {
+              id: r,
               "aria-label": this.menuName ? null : this.ariaLabel,
-              "aria-controls": this.opened ? this.randomId : null
+              // 'aria-controls' should only present together with a valid aria-haspopup
+              "aria-controls": this.opened && this.config.popupRole ? this.randomId : null
             },
             on: {
               focus: this.onFocus,
               blur: this.onBlur,
-              click: this.onClick
+              click: this.onClick,
+              keydown: this.onTriggerKeydown
             }
           }, [
-            t("template", { slot: "icon" }, [s]),
+            t("template", { slot: "icon" }, [c]),
             this.menuName
           ]),
           t("div", {
@@ -468,8 +539,10 @@ const c = ".focusable", P = {
               attrs: {
                 id: this.randomId,
                 tabindex: "-1",
-                role: l !== "true" ? l : void 0
-                // TODO: allow to provide dialog aria-label
+                role: this.config.popupRole,
+                // Dialog must have a label
+                "aria-labelledby": this.actionsMenuSemanticType === "dialog" ? r : void 0,
+                "aria-modal": this.actionsMenuSemanticType === "dialog" ? "true" : void 0
               }
             }, [
               e
@@ -478,9 +551,9 @@ const c = ".focusable", P = {
         ]
       );
     };
-    return n.length === 1 && i.length === 1 && !this.forceMenu ? d(n[0]) : (this.$nextTick(() => {
+    return n.length === 1 && i.length === 1 && !this.forceMenu ? f(n[0]) : (this.$nextTick(() => {
       this.opened && this.$refs.menu && (this.$refs.menu.querySelector("li.active") || []).length === 0 && this.focusFirstAction();
-    }), a.length > 0 && this.inline > 0 ? t(
+    }), o.length > 0 && this.inline > 0 ? t(
       "div",
       {
         class: [
@@ -490,9 +563,9 @@ const c = ".focusable", P = {
       },
       [
         // Render inline actions
-        ...a.map(d),
+        ...o.map(f),
         // render the rest within the popover menu
-        o.length > 0 ? t(
+        s.length > 0 ? t(
           "div",
           {
             class: [
@@ -503,7 +576,7 @@ const c = ".focusable", P = {
             ]
           },
           [
-            h(o)
+            h(s)
           ]
         ) : null
       ]
@@ -523,18 +596,18 @@ const c = ".focusable", P = {
       ]
     ));
   }
-}, C = null, q = null;
-var V = /* @__PURE__ */ D(
-  P,
+}, C = null, P = null;
+var V = /* @__PURE__ */ _(
+  D,
   C,
-  q,
+  P,
   !1,
   null,
-  "eae4a464",
+  "4131bd38",
   null,
   null
 );
-const X = V.exports;
+const J = V.exports;
 export {
-  X as N
+  J as N
 };