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

package/dist/chunks/NcActions-COaRMDe5.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"NcActions-COaRMDe5.mjs","sources":["../../src/components/NcActions/NcActions.vue"],"sourcesContent":["<!--\n  - SPDX-FileCopyrightText: 2019 Nextcloud GmbH and Nextcloud contributors\n  - SPDX-License-Identifier: AGPL-3.0-or-later\n-->\n\n<!-- Accessibility guidelines:\nhttps://www.w3.org/TR/wai-aria-practices/examples/menu-button/menu-button-actions.html -->\n\n<docs>\n### Single action\n\n```vue\n<template>\n\t<NcActions>\n\t\t<NcActionButton @click=\"actionDelete\">\n\t\t\t<template #icon>\n\t\t\t\t<Delete :size=\"20\" />\n\t\t\t</template>\n\t\t\tDelete\n\t\t</NcActionButton>\n\t</NcActions>\n</template>\n<script>\nimport Delete from 'vue-material-design-icons/Delete.vue'\n\nexport default {\n\tcomponents: {\n\t\tDelete,\n\t},\n\tmethods: {\n\t\tactionDelete() {\n\t\t\talert('Delete')\n\t\t},\n\t},\n}\n</script>\n```\n\n### Multiple actions\n\n```vue\n<template>\n\t<NcActions>\n\t\t<NcActionButton @click=\"showMessage('Edit')\">\n\t\t\t<template #icon>\n\t\t\t\t<Pencil :size=\"20\" />\n\t\t\t</template>\n\t\t\tEdit\n\t\t</NcActionButton>\n\t\t<NcActionButton @click=\"showMessage('Delete')\">\n\t\t\t<template #icon>\n\t\t\t\t<Delete :size=\"20\" />\n\t\t\t</template>\n\t\t\tDelete\n\t\t</NcActionButton>\n\t\t<NcActionLink href=\"https://nextcloud.com\">\n\t\t\t<template #icon>\n\t\t\t\t<OpenInNew :size=\"20\" />\n\t\t\t</template>\n\t\t\tLink\n\t\t</NcActionLink>\n\t</NcActions>\n</template>\n<script>\nimport Delete from 'vue-material-design-icons/Delete.vue'\nimport OpenInNew from 'vue-material-design-icons/OpenInNew.vue'\nimport Pencil from 'vue-material-design-icons/Pencil.vue'\n\nexport default {\n\tcomponents: {\n\t\tDelete,\n\t\tOpenInNew,\n\t\tPencil,\n\t},\n\tmethods: {\n\t\tshowMessage(msg) {\n\t\t\talert(msg)\n\t\t},\n\t},\n}\n</script>\n```\n\n### Multiple actions with 2 items inline\n\n```vue\n<template>\n\t<NcActions :inline=\"2\">\n\t\t<NcActionButton @click=\"showMessage('Add')\">\n\t\t\t<template #icon>\n\t\t\t\t<Plus :size=\"20\" />\n\t\t\t</template>\n\t\t\tAdd\n\t\t</NcActionButton>\n\t\t<NcActionButton @click=\"showMessage('Edit')\">\n\t\t\t<template #icon>\n\t\t\t\t<Pencil :size=\"20\" />\n\t\t\t</template>\n\t\t\tEdit\n\t\t</NcActionButton>\n\t\t<NcActionButton @click=\"showMessage('Delete')\">\n\t\t\t<template #icon>\n\t\t\t\t<Delete :size=\"20\" />\n\t\t\t</template>\n\t\t\tDelete\n\t\t</NcActionButton>\n\t\t<NcActionLink href=\"https://nextcloud.com\">\n\t\t\t<template #icon>\n\t\t\t\t<OpenInNew :size=\"20\" />\n\t\t\t</template>\n\t\t\tLink\n\t\t</NcActionLink>\n\t</NcActions>\n</template>\n<script>\nimport Plus from 'vue-material-design-icons/Plus.vue'\nimport Delete from 'vue-material-design-icons/Delete.vue'\nimport OpenInNew from 'vue-material-design-icons/OpenInNew.vue'\nimport Pencil from 'vue-material-design-icons/Pencil.vue'\n\nexport default {\n\tcomponents: {\n\t\tDelete,\n\t\tOpenInNew,\n\t\tPencil,\n\t\tPlus,\n\t},\n\tmethods: {\n\t\tshowMessage(msg) {\n\t\t\talert(msg)\n\t\t},\n\t},\n}\n</script>\n```\n\n### Multiple actions with 2 items inline AND forced names\n\n```vue\n<template>\n\t<NcActions :force-name=\"true\" :inline=\"2\">\n\t\t<NcActionButton @click=\"showMessage('Add')\">\n\t\t\t<template #icon>\n\t\t\t\t<Plus :size=\"20\" />\n\t\t\t</template>\n\t\t\tAdd\n\t\t</NcActionButton>\n\t\t<NcActionButton @click=\"showMessage('Edit')\">\n\t\t\t<template #icon>\n\t\t\t\t<Pencil :size=\"20\" />\n\t\t\t</template>\n\t\t\tEdit\n\t\t</NcActionButton>\n\t\t<NcActionButton @click=\"showMessage('Delete')\">\n\t\t\t<template #icon>\n\t\t\t\t<Delete :size=\"20\" />\n\t\t\t</template>\n\t\t\tDelete\n\t\t</NcActionButton>\n\t\t<NcActionLink href=\"https://nextcloud.com\">\n\t\t\t<template #icon>\n\t\t\t\t<OpenInNew :size=\"20\" />\n\t\t\t</template>\n\t\t\tLink\n\t\t</NcActionLink>\n\t</NcActions>\n</template>\n<script>\nimport Plus from 'vue-material-design-icons/Plus.vue'\nimport Delete from 'vue-material-design-icons/Delete.vue'\nimport OpenInNew from 'vue-material-design-icons/OpenInNew.vue'\nimport Pencil from 'vue-material-design-icons/Pencil.vue'\nexport default {\n\tcomponents: {\n\t\tDelete,\n\t\tOpenInNew,\n\t\tPencil,\n\t\tPlus,\n\t},\n\tmethods: {\n\t\tshowMessage(msg) {\n\t\t\talert(msg)\n\t\t},\n\t},\n}\n</script>\n```\n\n### Multiple actions with custom icon\n\n```vue\n<template>\n\t<NcActions>\n\t\t<template #icon>\n\t\t\t<Pencil :size=\"20\" />\n\t\t</template>\n\t\t<NcActionButton @click=\"showMessage('Edit')\">\n\t\t\t<template #icon>\n\t\t\t\t<Pencil :size=\"20\" />\n\t\t\t</template>\n\t\t\tEdit\n\t\t</NcActionButton>\n\t\t<NcActionButton @click=\"showMessage('Delete')\">\n\t\t\t<template #icon>\n\t\t\t\t<Delete :size=\"20\" />\n\t\t\t</template>\n\t\t\tDelete\n\t\t</NcActionButton>\n\t\t<NcActionLink href=\"https://nextcloud.com\">\n\t\t\t<template #icon>\n\t\t\t\t<OpenInNew :size=\"20\" />\n\t\t\t</template>\n\t\t\tLink\n\t\t</NcActionLink>\n\t</NcActions>\n</template>\n<script>\nimport Delete from 'vue-material-design-icons/Delete.vue'\nimport OpenInNew from 'vue-material-design-icons/OpenInNew.vue'\nimport Pencil from 'vue-material-design-icons/Pencil.vue'\n\nexport default {\n\tcomponents: {\n\t\tDelete,\n\t\tOpenInNew,\n\t\tPencil,\n\t},\n\tmethods: {\n\t\tshowMessage(msg) {\n\t\t\talert(msg)\n\t\t},\n\t},\n}\n</script>\n```\n\n### With menu name\n\n```vue\n<template>\n\t<NcActions menu-name=\"Object management\">\n\t\t<template #icon>\n\t\t\t<Pencil :size=\"20\" />\n\t\t</template>\n\t\t<NcActionButton>\n\t\t\t<template #icon>\n\t\t\t\t<Pencil :size=\"20\" />\n\t\t\t</template>\n\t\t\tRename\n\t\t</NcActionButton>\n\t\t<NcActionButton>\n\t\t\t<template #icon>\n\t\t\t\t<Delete :size=\"20\" />\n\t\t\t</template>\n\t\t\tDelete\n\t\t</NcActionButton>\n\t\t<NcActionButton>\n\t\t\t<template #icon>\n\t\t\t\t<ArrowRight :size=\"20\" />\n\t\t\t</template>\n\t\t\tValidate\n\t\t</NcActionButton>\n\t\t<NcActionButton>\n\t\t\t<template #icon>\n\t\t\t\t<Download :size=\"20\" />\n\t\t\t</template>\n\t\t\tDownload\n\t\t</NcActionButton>\n\t</NcActions>\n</template>\n<script>\nimport ArrowRight from 'vue-material-design-icons/ArrowRight.vue'\nimport Delete from 'vue-material-design-icons/Delete.vue'\nimport Download from 'vue-material-design-icons/Download.vue'\nimport Pencil from 'vue-material-design-icons/Pencil.vue'\n\nexport default {\n\tcomponents: {\n\t\tArrowRight,\n\t\tDelete,\n\t\tDownload,\n\t\tPencil,\n\t},\n}\n</script>\n```\n\n### Various icons styles\n```vue\n<template>\n\t<NcActions :primary=\"true\">\n\t\t<NcActionButton>\n\t\t\t<template #icon>\n\t\t\t\t<Pencil :size=\"20\" />\n\t\t\t</template>\n\t\t\tEdit\n\t\t</NcActionButton>\n\t\t<NcActionButton>\n\t\t\t<template #icon>\n\t\t\t\t<Delete :size=\"20\" />\n\t\t\t</template>\n\t\t\tDelete\n\t\t</NcActionButton>\n\t</NcActions>\n</template>\n<script>\nimport Delete from 'vue-material-design-icons/Delete.vue'\nimport Pencil from 'vue-material-design-icons/Pencil.vue'\n\nexport default {\n\tcomponents: {\n\t\tDelete,\n\t\tPencil,\n\t},\n}\n</script>\n```\n\n```vue\n<template>\n\t<NcActions :primary=\"true\" menu-name=\"Object management\">\n\t\t<template #icon>\n\t\t\t<Plus :size=\"20\" />\n\t\t</template>\n\t\t<NcActionButton>\n\t\t\t<template #icon>\n\t\t\t\t<Pencil :size=\"20\" />\n\t\t\t</template>\n\t\t\tRename\n\t\t</NcActionButton>\n\t\t<NcActionButton>\n\t\t\t<template #icon>\n\t\t\t\t<Delete :size=\"20\" />\n\t\t\t</template>\n\t\t\tDelete\n\t\t</NcActionButton>\n\t\t<NcActionButton>\n\t\t\t<template #icon>\n\t\t\t\t<ArrowRight :size=\"20\" />\n\t\t\t</template>\n\t\t\tValidate\n\t\t</NcActionButton>\n\t\t<NcActionButton>\n\t\t\t<template #icon>\n\t\t\t\t<Download :size=\"20\" />\n\t\t\t</template>\n\t\t\tDownload\n\t\t</NcActionButton>\n\t</NcActions>\n</template>\n<script>\nimport ArrowRight from 'vue-material-design-icons/ArrowRight.vue'\nimport Delete from 'vue-material-design-icons/Delete.vue'\nimport Download from 'vue-material-design-icons/Download.vue'\nimport Pencil from 'vue-material-design-icons/Pencil.vue'\nimport Plus from 'vue-material-design-icons/Plus.vue'\n\nexport default {\n\tcomponents: {\n\t\tArrowRight,\n\t\tDelete,\n\t\tDownload,\n\t\tPencil,\n\t\tPlus,\n\t},\n}\n</script>\n```\n\n### Custom icon slot\nTo be used with `vue-material-design-icons` only. For icon classes use the `default-icon` slot.\nIt can be used with one or multiple actions.\n```vue\n<template>\n\t<div style=\"display: flex;align-items: center;\">\n\t\t<NcButton @click=\"toggled = !toggled\">Toggle multiple action</NcButton>\n\t\t<NcActions>\n\t\t\t<template #icon>\n\t\t\t\t<DotsHorizontalCircleOutline :size=\"20\" />\n\t\t\t</template>\n\t\t\t<NcActionButton>\n\t\t\t\t<template #icon>\n\t\t\t\t\t<MicrophoneOff :size=\"20\" />\n\t\t\t\t</template>\n\t\t\t\tMute\n\t\t\t</NcActionButton>\n\t\t\t<NcActionButton v-if=\"toggled\">\n\t\t\t\t<template #icon>\n\t\t\t\t\t<Delete :size=\"20\" />\n\t\t\t\t</template>\n\t\t\t\tDelete\n\t\t\t</NcActionButton>\n\t\t</NcActions>\n\t</div>\n</template>\n<script>\nimport Delete from 'vue-material-design-icons/Delete.vue'\nimport DotsHorizontalCircleOutline from 'vue-material-design-icons/DotsHorizontalCircleOutline.vue'\nimport MicrophoneOff from 'vue-material-design-icons/MicrophoneOff.vue'\n\nexport default {\n\tcomponents: {\n\t\tDelete,\n\t\tDotsHorizontalCircleOutline,\n\t\tMicrophoneOff,\n\t},\n\tdata() {\n\t\treturn {\n\t\t\ttoggled: false\n\t\t}\n\t}\n}\n</script>\n```\n\n### Custom icon slot in child elements\n```vue\n<template>\n\t<NcActions :primary=\"true\">\n\t\t<NcActionButton>\n\t\t\t<template #icon>\n\t\t\t\t<Magnify :size=\"20\" />\n\t\t\t</template>\n\t\t\tSearch\n\t\t</NcActionButton>\n\t\t<NcActionButton>\n\t\t\t<template #icon>\n\t\t\t\t<Delete :size=\"20\" />\n\t\t\t</template>\n\t\t\tDelete\n\t\t</NcActionButton>\n\t</NcActions>\n</template>\n<script>\nimport Delete from 'vue-material-design-icons/Delete.vue'\nimport Magnify from 'vue-material-design-icons/Magnify.vue'\n\nexport default {\n\tcomponents: {\n\t\tDelete,\n\t\tMagnify,\n\t},\n}\n</script>\n```\n\n### 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.vue'\nimport Palette from 'vue-material-design-icons/Palette.vue'\nimport SelectColor from 'vue-material-design-icons/SelectColor.vue'\nimport CheckboxMarkedCircleOutline from 'vue-material-design-icons/CheckboxMarkedCircleOutline.vue'\n\nexport default {\n\tcomponents: {\n\t\tDelete,\n\t\tPalette,\n\t\tSelectColor,\n\t\tCheckboxMarkedCircleOutline,\n\t},\n\tdata() {\n\t\treturn {\n\t\t\tcurrent: 'primary',\n\t\t\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 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\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\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>Tooltip</h2>\n\t\tHas only text and not interactive elements\n\t\t<p>\n\t\t\t<NcActions aria-label=\"Contact\" :inline=\"1\">\n\t\t\t\t<NcActionLink aria-label=\"View profile\" href=\"/u/alice\" icon=\"icon-user-white\">\n\t\t\t\t\tView profile\n\t\t\t\t</NcActionLink>\n\t\t\t\t<NcActionText icon=\"icon-timezone-white\">\n\t\t\t\t\tLocal time: 10:12\n\t\t\t\t</NcActionText>\n\t\t\t</NcActions>\n\t\t</p>\n\t</div>\n</template>\n\n<script>\n// Common icons\nimport Pencil from 'vue-material-design-icons/Pencil.vue'\nimport Delete from 'vue-material-design-icons/Delete.vue'\n\n// Email icons\nimport StarOutline from 'vue-material-design-icons/StarOutline.vue'\nimport EmailUnread from 'vue-material-design-icons/Email.vue'\nimport Bookmark from 'vue-material-design-icons/Bookmark.vue'\nimport ClockOutlineIcon from 'vue-material-design-icons/ClockOutline.vue'\nimport AlertOctagonIcon from 'vue-material-design-icons/AlertOctagon.vue'\nimport CheckIcon from 'vue-material-design-icons/Check.vue'\nimport OpenInNewIcon from 'vue-material-design-icons/OpenInNew.vue'\nimport DownloadIcon from 'vue-material-design-icons/Download.vue'\n\n// 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 { h, resolveComponent } from 'vue'\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(resolveComponent('NcActionButton'), null, { default: () => 'Button', icon: () => h(Account, { size: 20 }) }),\n\t\t},\n\n\t\tMyActionsList: {\n\t\t\tname: 'MyActionsList',\n\t\t\tcomponents: { Account },\n\t\t\trender: () => h('div', null, {\n\t\t\t\tdefault: () => [\n\t\t\t\t\th(resolveComponent('NcActionButton'), null, { default: () => 'Button', icon: () => h(Account, { size: 20 }) }),\n\t\t\t\t\th(resolveComponent('NcActionButton'), null, { default: () => 'Button', icon: () => h(Account, { size: 20 }) }),\n\t\t\t\t\th(resolveComponent('NcActionButton'), null, { default: () => 'Button', icon: () => h(Account, { size: 20 }) }),\n\t\t\t\t\th(resolveComponent('NcActionButton'), null, { default: () => 'Button', icon: () => h(Account, { size: 20 }) }),\n\t\t\t\t],\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.ts'\nimport NcPopover from '../NcPopover/index.js'\nimport GenRandomId from '../../utils/GenRandomId.js'\nimport isSlotPopulated from '../../utils/isSlotPopulated.ts'\nimport { getTrapStack } from '../../utils/focusTrap.js'\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.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?.type?.name\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\t\tisAction(action) {\n\t\t\treturn this.getActionName(action)?.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\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\t/**\n\t\t * Called when popover is shown after the show delay\n\t\t */\n\t\tonOpen() {\n\t\t\tthis.$nextTick(() => {\n\t\t\t\tthis.focusFirstAction(null)\n\t\t\t\tthis.resizePopover()\n\t\t\t})\n\t\t},\n\n\t\t/**\n\t\t * Hanle resizing the popover to make sure users can discover there is more to scroll\n\t\t */\n\t\tresizePopover() {\n\t\t\t// Get the inner v-popper element that defines the popover height (from floating-vue)\n\t\t\tconst inner = this.$refs.menu.closest('.v-popper__inner')\n\t\t\tconst maxHeight = Number.parseFloat(window.getComputedStyle(inner).maxHeight)\n\t\t\tconst height = this.$refs.menu.clientHeight\n\t\t\t// If the popover height is limited by the max-height (scrollbars shown) limit the height to half of the last element\n\t\t\tif (height > maxHeight) {\n\t\t\t\t// sum of action heights\n\t\t\t\tlet currentHeight = 0\n\t\t\t\t// last action height\n\t\t\t\tlet actionHeight = 0\n\t\t\t\tfor (const action of this.$refs.menuList.children) {\n\t\t\t\t\t// If the max height would be overflown by half of the current element,\n\t\t\t\t\t// then we limit the height to the half of the previous element\n\t\t\t\t\tif ((currentHeight + action.clientHeight / 2) > maxHeight) {\n\t\t\t\t\t\tinner.style.height = `${currentHeight - actionHeight / 2}px`\n\t\t\t\t\t\tbreak\n\t\t\t\t\t}\n\t\t\t\t\t// otherwise sum up the height\n\t\t\t\t\tactionHeight = action.clientHeight\n\t\t\t\t\tcurrentHeight += actionHeight\n\t\t\t\t}\n\t\t\t}\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 * @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\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\twarn('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?.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\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\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: this.config.popupRole,\n\t\t\t\t\tsetReturnFocus: this.config.withFocusTrap ? this.$refs.menuButton?.$el : null,\n\t\t\t\t\tfocusTrap: this.config.withFocusTrap,\n\t\t\t\t\tonShow: this.openMenu,\n\t\t\t\t\tonApplyShow: 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\tid: triggerRandomId,\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' should only present together with a valid aria-haspopup\n\t\t\t\t\t\t'aria-controls': this.opened && this.config.popupRole ? 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\tonClick: this.onClick,\n\t\t\t\t\t\tonKeydown: this.onTriggerKeydown,\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\tref: 'menuList',\n\t\t\t\t\t\t\trole: this.config.popupRole,\n\t\t\t\t\t\t\t// Dialog must have a label\n\t\t\t\t\t\t\t'aria-labelledby': this.actionsMenuSemanticType === 'dialog' ? triggerRandomId : undefined,\n\t\t\t\t\t\t\t'aria-modal': this.actionsMenuSemanticType === 'dialog' ? 'true' : undefined,\n\t\t\t\t\t\t}, [\n\t\t\t\t\t\t\tactions,\n\t\t\t\t\t\t]),\n\t\t\t\t\t]),\n\t\t\t\t},\n\t\t\t)\n\t\t}\n\n\t\t/**\n\t\t * If we have a single action only and didn't force a menu,\n\t\t * we render the action as a standalone button\n\t\t */\n\t\tif (actions.length === 1 && validInlineActions.length === 1 && !this.forceMenu) {\n\t\t\treturn renderInlineAction(actions[0])\n\t\t}\n\n\t\t// If we completely re-render the children\n\t\t// we need to focus the first action again\n\t\t// Mostly used when clicking a menu item\n\t\tthis.$nextTick(() => {\n\t\t\tif (this.opened && this.$refs.menu) {\n\t\t\t\tthis.resizePopover()\n\t\t\t\tconst isAnyActive = this.$refs.menu.querySelector('li.active') || []\n\t\t\t\tif (isAnyActive.length === 0) {\n\t\t\t\t\tthis.focusFirstAction()\n\t\t\t\t}\n\t\t\t}\n\t\t})\n\n\t\t/**\n\t\t * If we some inline actions to render, render them, then the menu\n\t\t */\n\t\tif (inlineActions.length > 0 && this.inline > 0) {\n\t\t\treturn h('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":["actions"],"mappings":"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"}

package/dist/chunks/NcAppContent-D2in9bd7.mjs

@@ -0,0 +1,350 @@
+import '../assets/NcAppContent-CK9aL637.css';
+import { N as NcButton } from "./NcButton-DvO0XwJf.mjs";
+import { r as register, A as t24, a as t } from "./_l10n-C3nxU4O-.mjs";
+import "../Directives/Tooltip.mjs";
+import { emit } from "@nextcloud/event-bus";
+import { A as ArrowRight } from "./ArrowRight-Cg6xGDcS.mjs";
+import { useIsMobile } from "../Composables/useIsMobile.mjs";
+import { resolveComponent, resolveDirective, withDirectives, openBlock, createBlock, normalizeClass, withCtx, createVNode, createElementBlock, toDisplayString, createCommentVNode, Fragment, withModifiers, renderSlot } from "vue";
+import { _ as _export_sfc } from "./_plugin-vue_export-helper-1tPrXgE0.mjs";
+import { VTooltip } from "floating-vue";
+import { getBuilder } from "@nextcloud/browser-storage";
+import { useSwipe } from "@vueuse/core";
+import { Pane, Splitpanes } from "splitpanes";
+import "splitpanes/dist/splitpanes.css";
+register(t24);
+const _sfc_main$1 = {
+  name: "NcAppDetailsToggle",
+  directives: {
+    tooltip: VTooltip
+  },
+  components: {
+    NcButton,
+    ArrowRight
+  },
+  setup() {
+    return {
+      isMobile: useIsMobile()
+    };
+  },
+  computed: {
+    title() {
+      return t("Go back to the list");
+    }
+  },
+  watch: {
+    isMobile: {
+      immediate: true,
+      handler() {
+        this.toggleAppNavigationButton(this.isMobile);
+      }
+    }
+  },
+  beforeUnmount() {
+    if (this.isMobile) {
+      this.toggleAppNavigationButton(false);
+    }
+  },
+  methods: {
+    toggleAppNavigationButton(hide = true) {
+      const appNavigationToggle = document.querySelector(".app-navigation .app-navigation-toggle");
+      if (appNavigationToggle) {
+        appNavigationToggle.style.display = hide ? "none" : null;
+        if (hide === true) {
+          emit("toggle-navigation", { open: false });
+        }
+      }
+    }
+  }
+};
+function _sfc_render$1(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_ArrowRight = resolveComponent("ArrowRight");
+  const _component_NcButton = resolveComponent("NcButton");
+  const _directive_tooltip = resolveDirective("tooltip");
+  return withDirectives((openBlock(), createBlock(_component_NcButton, {
+    type: "tertiary",
+    "aria-label": $options.title,
+    class: normalizeClass(["app-details-toggle", { "app-details-toggle--mobile": $setup.isMobile }])
+  }, {
+    icon: withCtx(() => [
+      createVNode(_component_ArrowRight, { size: 20 })
+    ]),
+    _: 1
+  }, 8, ["aria-label", "class"])), [
+    [_directive_tooltip, $options.title]
+  ]);
+}
+const NcAppDetailsToggle = /* @__PURE__ */ _export_sfc(_sfc_main$1, [["render", _sfc_render$1], ["__scopeId", "data-v-de03822e"]]);
+const browserStorage = getBuilder("nextcloud").persist().build();
+const _sfc_main = {
+  name: "NcAppContent",
+  components: {
+    NcAppDetailsToggle,
+    Pane,
+    Splitpanes
+  },
+  props: {
+    /**
+     * Allows to disable the control by swipe of the app navigation open state
+     */
+    allowSwipeNavigation: {
+      type: Boolean,
+      default: true
+    },
+    /**
+     * Allows you to set the default width of the resizable list in % on vertical-split
+     * Allows you to set the default height of the resizable list in % on horizontal-split
+     * Must be between listMinWidth and listMaxWidth
+     */
+    listSize: {
+      type: Number,
+      default: 20
+    },
+    /**
+     * Allows you to set the minimum width of the list column in % on vertical-split
+     * Allows you to set the minimum height of the list column in % on horizontal-split
+     */
+    listMinWidth: {
+      type: Number,
+      default: 15
+    },
+    /**
+     * Allows you to set the maximum width of the list column in % on vertical-split
+     * Allows you to set the maximum height of the list column in % on horizontal-split
+     */
+    listMaxWidth: {
+      type: Number,
+      default: 40
+    },
+    /**
+     * Specify the config key for the pane config sizes
+     * Default is the global var appName if you use the webpack-vue-config
+     */
+    paneConfigKey: {
+      type: String,
+      default: ""
+    },
+    /**
+     * When in mobile view, only the list or the details are shown
+     * If you provide a list, you need to provide a variable
+     * that will be set to true by the user when an element of
+     * the list gets selected. The details will then show a back
+     * arrow to return to the list that will update this prop to false.
+     */
+    showDetails: {
+      type: Boolean,
+      default: true
+    },
+    /**
+     * Specify the `<h1>` page heading
+     */
+    pageHeading: {
+      type: String,
+      default: null
+    },
+    /**
+     * Content layout used when there is a list together with content:
+     * - `vertical-split` - a 2-column layout with list and default content separated vertically
+     * - `no-split` - a single column layout; List is shown when `showDetails` is `false`, otherwise the default slot content is shown with a back button to return to the list.
+     * - 'horizontal-split' - a 2-column layout with list and default content separated horizontally
+     * On mobile screen `no-split` layout is forced.
+     */
+    layout: {
+      type: String,
+      default: "vertical-split",
+      validator(value) {
+        return ["no-split", "vertical-split", "horizontal-split"].includes(value);
+      }
+    }
+  },
+  emits: [
+    "update:showDetails",
+    "resize:list"
+  ],
+  setup() {
+    return {
+      isMobile: useIsMobile()
+    };
+  },
+  data() {
+    return {
+      contentHeight: 0,
+      hasList: false,
+      hasContent: false,
+      swiping: {},
+      listPaneSize: this.restorePaneConfig()
+    };
+  },
+  computed: {
+    paneConfigID() {
+      if (this.paneConfigKey !== "") {
+        return `pane-list-size-${this.paneConfigKey}`;
+      }
+      try {
+        return `pane-list-size-${appName}`;
+      } catch (e) {
+        console.info("[INFO] AppContent:", "falling back to global nextcloud pane config");
+        return "pane-list-size-nextcloud";
+      }
+    },
+    detailsPaneSize() {
+      if (this.listPaneSize) {
+        return 100 - this.listPaneSize;
+      }
+      return this.paneDefaults.details.size;
+    },
+    paneDefaults() {
+      return {
+        list: {
+          size: this.listSize,
+          min: this.listMinWidth,
+          max: this.listMaxWidth
+        },
+        // set the inverse values of the details column
+        // based on the provided (or default) values of the list column
+        details: {
+          size: 100 - this.listSize,
+          min: 100 - this.listMaxWidth,
+          max: 100 - this.listMinWidth
+        }
+      };
+    }
+  },
+  updated() {
+    this.checkSlots();
+  },
+  mounted() {
+    if (this.allowSwipeNavigation) {
+      this.swiping = useSwipe(this.$el, {
+        onSwipeEnd: this.handleSwipe
+      });
+    }
+    this.checkSlots();
+    this.restorePaneConfig();
+  },
+  methods: {
+    /**
+     * handle the swipe event
+     *
+     * @param {TouchEvent} e The touch event
+     * @param {import('@vueuse/core').SwipeDirection} direction The swipe direction of the event
+     */
+    handleSwipe(e, direction) {
+      const minSwipeX = 70;
+      const touchZone = 300;
+      if (Math.abs(this.swiping.lengthX) > minSwipeX) {
+        if (this.swiping.coordsStart.x < touchZone / 2 && direction === "right") {
+          emit("toggle-navigation", {
+            open: true
+          });
+        } else if (this.swiping.coordsStart.x < touchZone * 1.5 && direction === "left") {
+          emit("toggle-navigation", {
+            open: false
+          });
+        }
+      }
+    },
+    handlePaneResize(event) {
+      const listPaneSize = parseInt(event[0].size, 10);
+      browserStorage.setItem(this.paneConfigID, JSON.stringify(listPaneSize));
+      this.listPaneSize = listPaneSize;
+      this.$emit("resize:list", { size: listPaneSize });
+      console.debug("AppContent pane config", listPaneSize);
+    },
+    // $slots is not reactive, we need to update this manually
+    checkSlots() {
+      this.hasList = !!this.$slots.list;
+      this.hasContent = !!this.$slots.default;
+    },
+    // browserStorage is not reactive, we need to update this manually
+    restorePaneConfig() {
+      const listPaneSize = parseInt(browserStorage.getItem(this.paneConfigID), 10);
+      if (!isNaN(listPaneSize) && listPaneSize !== this.listPaneSize) {
+        console.debug("AppContent pane config", listPaneSize);
+        this.listPaneSize = listPaneSize;
+        return listPaneSize;
+      }
+    },
+    /**
+     * The user clicked the back arrow from the details view
+     */
+    hideDetails() {
+      this.$emit("update:showDetails", false);
+    }
+  }
+};
+const _hoisted_1 = {
+  key: 0,
+  class: "hidden-visually"
+};
+const _hoisted_2 = {
+  key: 1,
+  class: "app-content-wrapper"
+};
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_NcAppDetailsToggle = resolveComponent("NcAppDetailsToggle");
+  const _component_Pane = resolveComponent("Pane");
+  const _component_Splitpanes = resolveComponent("Splitpanes");
+  return openBlock(), createElementBlock("main", {
+    id: "app-content-vue",
+    class: normalizeClass(["app-content no-snapper", { "app-content--has-list": $data.hasList }])
+  }, [
+    $props.pageHeading ? (openBlock(), createElementBlock("h1", _hoisted_1, toDisplayString($props.pageHeading), 1)) : createCommentVNode("", true),
+    $data.hasList ? (openBlock(), createElementBlock(Fragment, { key: 1 }, [
+      $setup.isMobile || $props.layout === "no-split" ? (openBlock(), createElementBlock("div", {
+        key: 0,
+        class: normalizeClass(["app-content-wrapper app-content-wrapper--no-split", {
+          "app-content-wrapper--show-details": $props.showDetails,
+          "app-content-wrapper--show-list": !$props.showDetails,
+          "app-content-wrapper--mobile": $setup.isMobile
+        }])
+      }, [
+        $props.showDetails ? (openBlock(), createBlock(_component_NcAppDetailsToggle, {
+          key: 0,
+          onClick: withModifiers($options.hideDetails, ["stop", "prevent"])
+        }, null, 8, ["onClick"])) : createCommentVNode("", true),
+        !$props.showDetails ? renderSlot(_ctx.$slots, "list", { key: 1 }, void 0, true) : renderSlot(_ctx.$slots, "default", { key: 2 }, void 0, true)
+      ], 2)) : $props.layout === "vertical-split" || $props.layout === "horizontal-split" ? (openBlock(), createElementBlock("div", _hoisted_2, [
+        createVNode(_component_Splitpanes, {
+          horizontal: $props.layout === "horizontal-split",
+          class: normalizeClass(["default-theme", {
+            "splitpanes--horizontal": $props.layout === "horizontal-split",
+            "splitpanes--vertical": $props.layout === "vertical-split"
+          }]),
+          onResized: $options.handlePaneResize
+        }, {
+          default: withCtx(() => [
+            createVNode(_component_Pane, {
+              class: "splitpanes__pane-list",
+              size: $data.listPaneSize || $options.paneDefaults.list.size,
+              "min-size": $options.paneDefaults.list.min,
+              "max-size": $options.paneDefaults.list.max
+            }, {
+              default: withCtx(() => [
+                renderSlot(_ctx.$slots, "list", {}, void 0, true)
+              ]),
+              _: 3
+            }, 8, ["size", "min-size", "max-size"]),
+            createVNode(_component_Pane, {
+              class: "splitpanes__pane-details",
+              size: $options.detailsPaneSize,
+              "min-size": $options.paneDefaults.details.min,
+              "max-size": $options.paneDefaults.details.max
+            }, {
+              default: withCtx(() => [
+                renderSlot(_ctx.$slots, "default", {}, void 0, true)
+              ]),
+              _: 3
+            }, 8, ["size", "min-size", "max-size"])
+          ]),
+          _: 3
+        }, 8, ["horizontal", "class", "onResized"])
+      ])) : createCommentVNode("", true)
+    ], 64)) : createCommentVNode("", true),
+    !$data.hasList ? renderSlot(_ctx.$slots, "default", { key: 2 }, void 0, true) : createCommentVNode("", true)
+  ], 2);
+}
+const NcAppContent = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__scopeId", "data-v-47b57a9d"]]);
+export {
+  NcAppContent as N
+};

package/dist/chunks/NcAppContent-D2in9bd7.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"NcAppContent-D2in9bd7.mjs","sources":["../../src/components/NcAppContent/NcAppDetailsToggle.vue","../../src/components/NcAppContent/NcAppContent.vue"],"sourcesContent":["<!--\n  - SPDX-FileCopyrightText: 2019 Nextcloud GmbH and Nextcloud contributors\n  - SPDX-License-Identifier: AGPL-3.0-or-later\n-->\n\n<template>\n\t<NcButton v-tooltip=\"title\"\n\t\ttype=\"tertiary\"\n\t\t:aria-label=\"title\"\n\t\tclass=\"app-details-toggle\"\n\t\t:class=\"{ 'app-details-toggle--mobile': isMobile }\">\n\t\t<template #icon>\n\t\t\t<ArrowRight :size=\"20\" />\n\t\t</template>\n\t</NcButton>\n</template>\n\n<script>\nimport NcButton from '../NcButton/index.ts'\nimport { t } from '../../l10n.js'\nimport Tooltip from '../../directives/Tooltip/index.js'\n\nimport { emit } from '@nextcloud/event-bus'\n\nimport ArrowRight from 'vue-material-design-icons/ArrowRight.vue'\nimport { useIsMobile } from '../../composables/useIsMobile/index.js'\n\nexport default {\n\tname: 'NcAppDetailsToggle',\n\n\tdirectives: {\n\t\ttooltip: Tooltip,\n\t},\n\n\tcomponents: {\n\t\tNcButton,\n\t\tArrowRight,\n\t},\n\tsetup() {\n\t\treturn {\n\t\t\tisMobile: useIsMobile(),\n\t\t}\n\t},\n\n\tcomputed: {\n\t\ttitle() {\n\t\t\treturn t('Go back to the list')\n\t\t},\n\t},\n\twatch: {\n\t\tisMobile: {\n\t\t\timmediate: true,\n\t\t\thandler() {\n\t\t\t\tthis.toggleAppNavigationButton(this.isMobile)\n\t\t\t},\n\t\t},\n\t},\n\n\tbeforeUnmount() {\n\t\tif (this.isMobile) {\n\t\t\tthis.toggleAppNavigationButton(false)\n\t\t}\n\t},\n\n\tmethods: {\n\t\ttoggleAppNavigationButton(hide = true) {\n\t\t\tconst appNavigationToggle = document.querySelector('.app-navigation .app-navigation-toggle')\n\t\t\tif (appNavigationToggle) {\n\t\t\t\tappNavigationToggle.style.display = hide ? 'none' : null\n\n\t\t\t\t// If we hide the NavigationToggle, we need to make sure the Navigation is also closed\n\t\t\t\tif (hide === true) {\n\t\t\t\t\temit('toggle-navigation', { open: false })\n\t\t\t\t}\n\t\t\t}\n\t\t},\n\t},\n}\n</script>\n\n<style lang=\"scss\" scoped>\n.app-details-toggle {\n\tposition: sticky;\n\twidth: $clickable-area;\n\theight: $clickable-area;\n\tpadding: $icon-margin;\n\tcursor: pointer;\n\topacity: .6;\n\ttransform: rotate(180deg);\n\tbackground-color: var(--color-main-background);\n\tz-index: 2000;\n\n\ttop: var(--app-navigation-padding);\n\t// Navigation Toggle button width + 2 paddings around\n\tleft: calc(var(--default-clickable-area) + var(--app-navigation-padding) * 2);\n\t&--mobile {\n\t\t// There is no NavigationToggle button\n\t\tleft: var(--app-navigation-padding);\n\t}\n\n\t&:active,\n\t&:hover,\n\t&:focus {\n\t\topacity: 1;\n\t}\n}\n\n</style>\n","<!--\n  - SPDX-FileCopyrightText: 2019 Nextcloud GmbH and Nextcloud contributors\n  - SPDX-License-Identifier: AGPL-3.0-or-later\n-->\n\n<docs>\n### General description\n\nThis components provides a wrapper around the main app's content.\n\nSingle-column layouts can just use the default slot. A resizable column\ncan be added by providing content to the named slot `list`.\n\n### CSS variables\nIn the css section some css variables are declared and will be available for\nall the children of the NcAppContent component\n\n### Examples\n\n#### Usage: Single-column content\n```vue\n<template>\n\t<NcAppContent>\n\t\t<h2>Single-column main content</h2>\n\t</NcAppContent>\n</template>\n```\n\n#### Usage: Two resizable columns\n```vue\n<template>\n\t<NcAppContent>\n\t\t<template #list>\n\t\t\t<div>Resizable list content</div>\n\t\t</template>\n\n\t\t<div>Main content</div>\n\t</NcAppContent>\n</template>\n```\n\n#### Overriding Defaults\nThe default, min and max sizes (in percent) of the resizable list column can be overridden.\nThe list size must be between the min and the max width value.\n\n```\n<NcAppContent\n\t:list-size=\"35\"\n\t:list-min-width=\"20\"\n\t:list-max-width=\"45\"\n>...</NcAppContent>\n```\n</docs>\n\n<template>\n\t<main id=\"app-content-vue\" class=\"app-content no-snapper\" :class=\"{ 'app-content--has-list': hasList }\">\n\t\t<h1 v-if=\"pageHeading\" class=\"hidden-visually\">\n\t\t\t{{ pageHeading }}\n\t\t</h1>\n\n\t\t<template v-if=\"hasList\">\n\t\t\t<!-- Mobile view does not allow resizeable panes -->\n\t\t\t<div v-if=\"isMobile || layout === 'no-split'\"\n\t\t\t\tclass=\"app-content-wrapper app-content-wrapper--no-split\"\n\t\t\t\t:class=\"{\n\t\t\t\t\t'app-content-wrapper--show-details': showDetails,\n\t\t\t\t\t'app-content-wrapper--show-list': !showDetails,\n\t\t\t\t\t'app-content-wrapper--mobile': isMobile,}\">\n\t\t\t\t<NcAppDetailsToggle v-if=\"showDetails\" @click.stop.prevent=\"hideDetails\" />\n\t\t\t\t<slot v-if=\"!showDetails\" name=\"list\" />\n\n\t\t\t\t<slot v-else />\n\t\t\t</div>\n\t\t\t<div v-else-if=\"layout === 'vertical-split' || layout === 'horizontal-split'\" class=\"app-content-wrapper\">\n\t\t\t\t<Splitpanes :horizontal=\"layout === 'horizontal-split'\"\n\t\t\t\t\tclass=\"default-theme\"\n\t\t\t\t\t:class=\"{ 'splitpanes--horizontal': layout === 'horizontal-split',\n\t\t\t\t\t\t'splitpanes--vertical': layout === 'vertical-split'\n\t\t\t\t\t}\"\n\t\t\t\t\t@resized=\"handlePaneResize\">\n\t\t\t\t\t<Pane class=\"splitpanes__pane-list\"\n\t\t\t\t\t\t:size=\"listPaneSize || paneDefaults.list.size\"\n\t\t\t\t\t\t:min-size=\"paneDefaults.list.min\"\n\t\t\t\t\t\t:max-size=\"paneDefaults.list.max\">\n\t\t\t\t\t\t<!-- @slot Provide a list to the app content -->\n\t\t\t\t\t\t<slot name=\"list\" />\n\t\t\t\t\t</Pane>\n\n\t\t\t\t\t<Pane class=\"splitpanes__pane-details\"\n\t\t\t\t\t\t:size=\"detailsPaneSize\"\n\t\t\t\t\t\t:min-size=\"paneDefaults.details.min\"\n\t\t\t\t\t\t:max-size=\"paneDefaults.details.max\">\n\t\t\t\t\t\t<!-- @slot Provide the main content to the app content -->\n\t\t\t\t\t\t<slot />\n\t\t\t\t\t</Pane>\n\t\t\t\t</Splitpanes>\n\t\t\t</div>\n\t\t</template>\n\t\t<!-- @slot Provide the main content to the app content -->\n\t\t<slot v-if=\"!hasList\" />\n\t</main>\n</template>\n\n<script>\nimport NcAppDetailsToggle from './NcAppDetailsToggle.vue'\nimport { useIsMobile } from '../../composables/useIsMobile/index.js'\n\nimport { getBuilder } from '@nextcloud/browser-storage'\nimport { useSwipe } from '@vueuse/core'\nimport { Splitpanes, Pane } from 'splitpanes'\n\nimport 'splitpanes/dist/splitpanes.css'\nimport { emit } from '@nextcloud/event-bus'\n\nconst browserStorage = getBuilder('nextcloud').persist().build()\n\n/**\n * App content container to be used for the main content of your app\n *\n */\nexport default {\n\tname: 'NcAppContent',\n\n\tcomponents: {\n\t\tNcAppDetailsToggle,\n\t\tPane,\n\t\tSplitpanes,\n\t},\n\tprops: {\n\t\t/**\n\t\t * Allows to disable the control by swipe of the app navigation open state\n\t\t */\n\t\tallowSwipeNavigation: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: true,\n\t\t},\n\n\t\t/**\n\t\t * Allows you to set the default width of the resizable list in % on vertical-split\n\t\t * Allows you to set the default height of the resizable list in % on horizontal-split\n\t\t * Must be between listMinWidth and listMaxWidth\n\t\t */\n\t\tlistSize: {\n\t\t\ttype: Number,\n\t\t\tdefault: 20,\n\t\t},\n\n\t\t/**\n\t\t * Allows you to set the minimum width of the list column in % on vertical-split\n\t\t * Allows you to set the minimum height of the list column in % on horizontal-split\n\t\t */\n\t\tlistMinWidth: {\n\t\t\ttype: Number,\n\t\t\tdefault: 15,\n\t\t},\n\n\t\t/**\n\t\t * Allows you to set the maximum width of the list column in % on vertical-split\n\t\t * Allows you to set the maximum height of the list column in % on horizontal-split\n\t\t */\n\t\tlistMaxWidth: {\n\t\t\ttype: Number,\n\t\t\tdefault: 40,\n\t\t},\n\n\t\t/**\n\t\t * Specify the config key for the pane config sizes\n\t\t * Default is the global var appName if you use the webpack-vue-config\n\t\t */\n\t\tpaneConfigKey: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\n\t\t/**\n\t\t * When in mobile view, only the list or the details are shown\n\t\t * If you provide a list, you need to provide a variable\n\t\t * that will be set to true by the user when an element of\n\t\t * the list gets selected. The details will then show a back\n\t\t * arrow to return to the list that will update this prop to false.\n\t\t */\n\t\tshowDetails: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: true,\n\t\t},\n\n\t\t/**\n\t\t * Specify the `<h1>` page heading\n\t\t */\n\t\tpageHeading: {\n\t\t\ttype: String,\n\t\t\tdefault: null,\n\t\t},\n\t\t/**\n\t\t * Content layout used when there is a list together with content:\n\t\t * - `vertical-split` - a 2-column layout with list and default content separated vertically\n\t\t * - `no-split` - a single column layout; List is shown when `showDetails` is `false`, otherwise the default slot content is shown with a back button to return to the list.\n\t\t * - 'horizontal-split' - a 2-column layout with list and default content separated horizontally\n\t\t * On mobile screen `no-split` layout is forced.\n\t\t */\n\t\tlayout: {\n\t\t\ttype: String,\n\t\t\tdefault: 'vertical-split',\n\t\t\tvalidator(value) {\n\t\t\t\treturn ['no-split', 'vertical-split', 'horizontal-split'].includes(value)\n\t\t\t},\n\t\t},\n\t},\n\n\temits: [\n\t\t'update:showDetails',\n\t\t'resize:list',\n\t],\n\n\tsetup() {\n\t\treturn {\n\t\t\tisMobile: useIsMobile(),\n\t\t}\n\t},\n\n\tdata() {\n\t\treturn {\n\t\t\tcontentHeight: 0,\n\t\t\thasList: false,\n\t\t\thasContent: false,\n\t\t\tswiping: {},\n\t\t\tlistPaneSize: this.restorePaneConfig(),\n\t\t}\n\t},\n\n\tcomputed: {\n\t\tpaneConfigID() {\n\t\t\t// If provided, let's use it\n\t\t\tif (this.paneConfigKey !== '') {\n\t\t\t\treturn `pane-list-size-${this.paneConfigKey}`\n\t\t\t}\n\n\t\t\ttry {\n\t\t\t\t// Using the webpack-vue-config, appName is a global variable\n\t\t\t\t// This will throw a ReferenceError when the global variable is missing\n\t\t\t\t// In that case either you provide paneConfigKey or else it fallback\n\t\t\t\t// to a global storage key\n\t\t\t\treturn `pane-list-size-${appName}`\n\t\t\t} catch (e) {\n\t\t\t\tconsole.info('[INFO] AppContent:', 'falling back to global nextcloud pane config')\n\t\t\t\treturn 'pane-list-size-nextcloud'\n\t\t\t}\n\t\t},\n\n\t\tdetailsPaneSize() {\n\t\t\tif (this.listPaneSize) {\n\t\t\t\treturn 100 - this.listPaneSize\n\t\t\t}\n\t\t\treturn this.paneDefaults.details.size\n\t\t},\n\n\t\tpaneDefaults() {\n\t\t\treturn {\n\t\t\t\tlist: {\n\t\t\t\t\tsize: this.listSize,\n\t\t\t\t\tmin: this.listMinWidth,\n\t\t\t\t\tmax: this.listMaxWidth,\n\t\t\t\t},\n\n\t\t\t\t// set the inverse values of the details column\n\t\t\t\t// based on the provided (or default) values of the list column\n\t\t\t\tdetails: {\n\t\t\t\t\tsize: 100 - this.listSize,\n\t\t\t\t\tmin: 100 - this.listMaxWidth,\n\t\t\t\t\tmax: 100 - this.listMinWidth,\n\t\t\t\t},\n\t\t\t}\n\t\t},\n\t},\n\n\tupdated() {\n\t\tthis.checkSlots()\n\t},\n\n\tmounted() {\n\t\tif (this.allowSwipeNavigation) {\n\t\t\tthis.swiping = useSwipe(this.$el, {\n\t\t\t\tonSwipeEnd: this.handleSwipe,\n\t\t\t})\n\t\t}\n\n\t\tthis.checkSlots()\n\t\tthis.restorePaneConfig()\n\t},\n\n\tmethods: {\n\t\t/**\n\t\t * handle the swipe event\n\t\t *\n\t\t * @param {TouchEvent} e The touch event\n\t\t * @param {import('@vueuse/core').SwipeDirection} direction The swipe direction of the event\n\t\t */\n\t\thandleSwipe(e, direction) {\n\t\t\tconst minSwipeX = 70\n\t\t\tconst touchZone = 300\n\t\t\tif (Math.abs(this.swiping.lengthX) > minSwipeX) {\n\t\t\t\tif (this.swiping.coordsStart.x < (touchZone / 2) && direction === 'right') {\n\t\t\t\t\temit('toggle-navigation', {\n\t\t\t\t\t\topen: true,\n\t\t\t\t\t})\n\t\t\t\t} else if (this.swiping.coordsStart.x < touchZone * 1.5 && direction === 'left') {\n\t\t\t\t\temit('toggle-navigation', {\n\t\t\t\t\t\topen: false,\n\t\t\t\t\t})\n\t\t\t\t}\n\t\t\t}\n\t\t},\n\n\t\thandlePaneResize(event) {\n\t\t\tconst listPaneSize = parseInt(event[0].size, 10)\n\t\t\tbrowserStorage.setItem(this.paneConfigID, JSON.stringify(listPaneSize))\n\t\t\tthis.listPaneSize = listPaneSize\n\t\t\t/**\n\t\t\t * Emitted when the list pane is resized by the user\n\t\t\t */\n\t\t\tthis.$emit('resize:list', { size: listPaneSize })\n\t\t\tconsole.debug('AppContent pane config', listPaneSize)\n\t\t},\n\n\t\t// $slots is not reactive, we need to update this manually\n\t\tcheckSlots() {\n\t\t\tthis.hasList = !!this.$slots.list\n\t\t\tthis.hasContent = !!this.$slots.default\n\t\t},\n\n\t\t// browserStorage is not reactive, we need to update this manually\n\t\trestorePaneConfig() {\n\t\t\tconst listPaneSize = parseInt(browserStorage.getItem(this.paneConfigID), 10)\n\t\t\tif (!isNaN(listPaneSize) && listPaneSize !== this.listPaneSize) {\n\t\t\t\tconsole.debug('AppContent pane config', listPaneSize)\n\t\t\t\tthis.listPaneSize = listPaneSize\n\t\t\t\treturn listPaneSize\n\t\t\t}\n\t\t},\n\n\t\t/**\n\t\t * The user clicked the back arrow from the details view\n\t\t */\n\t\thideDetails() {\n\t\t\tthis.$emit('update:showDetails', false)\n\t\t},\n\t},\n}\n</script>\n<style lang=\"scss\" scoped>\n\n.app-content {\n\tposition: initial;\n\tz-index: 1000;\n\tflex-basis: 100vw;\n\theight: 100%;\n\t// Overriding server styles TODO: cleanup!\n\tmargin: 0 !important;\n\tbackground-color: var(--color-main-background);\n\tmin-width: 0;\n\n\t&:not(.app-content--has-list) {\n\t\toverflow: auto;\n\t}\n}\n\n.app-content-wrapper {\n\tposition: relative;\n\twidth: 100%;\n\theight: 100%;\n}\n\n// Mobile list/details handling\n.app-content-wrapper--no-split {\n\t&.app-content-wrapper--show-list :deep() {\n\t\t.app-content-list {\n\t\t\tdisplay: flex;\n\t\t}\n\t\t.app-content-details {\n\t\t\tdisplay: none;\n\t\t}\n\t}\n\t&.app-content-wrapper--show-details :deep() {\n\t\t.app-content-list {\n\t\t\tdisplay: none;\n\t\t}\n\t\t.app-content-details {\n\t\t\tdisplay: block;\n\t\t}\n\t}\n}\n\n:deep(.splitpanes.default-theme) {\n\t.app-content-list {\n\t\tmax-width: none;\n\t\t/* Thin scrollbar is hard to catch on resizable columns */\n\t\tscrollbar-width: auto;\n\t}\n\n\t.splitpanes__pane {\n\t\tbackground-color: transparent;\n\t\ttransition: none;\n\n\t\t&-list {\n\t\t\tmin-width: 300px;\n\t\t\tposition: sticky;\n\n\t\t\t@media only screen and (width < $breakpoint-mobile) {\n\t\t\t\tdisplay: none;\n\t\t\t}\n\t\t}\n\n\t\t&-details {\n\t\t\toverflow-y: auto;\n\n\t\t\t@media only screen and (width < $breakpoint-mobile) {\n\t\t\t\tmin-width: 100%;\n\t\t\t}\n\t\t}\n\t}\n\t.app-content-wrapper--vertical-split {\n\t\t.splitpanes__splitter {\n\t\t\twidth: 9px;\n\t\t\tmargin-left: -5px;\n\t\t\tbackground-color: transparent;\n\t\t\tborder-left: none;\n\n\t\t\t&:before,\n\t\t\t&:after {\n\t\t\t\tdisplay: none;\n\t\t\t}\n\t\t}\n\t}\n\t.app-content-wrapper--horizontal-split {\n\t\t.splitpanes__splitter {\n\t\t\theight: 9px;\n\t\t\tmargin-top: -5px;\n\t\t}\n\t}\n}\n\n.app-content-wrapper--show-list {\n\t:deep(.app-content-list) {\n\t\tmax-width: none;\n\t}\n}\n</style>\n"],"names":["_sfc_main","Tooltip","_createBlock","_normalizeClass","_createVNode","_createElementBlock","_toDisplayString","_createCommentVNode","_openBlock","_Fragment","_withModifiers","_renderSlot","_withCtx"],"mappings":"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"}

package/dist/chunks/NcAppContentDetails-Ch6NJvAl.mjs

@@ -0,0 +1,15 @@
+import { openBlock, createElementBlock, renderSlot } from "vue";
+import { _ as _export_sfc } from "./_plugin-vue_export-helper-1tPrXgE0.mjs";
+const _sfc_main = {
+  name: "NcAppContentDetails"
+};
+const _hoisted_1 = { class: "app-content-details" };
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  return openBlock(), createElementBlock("div", _hoisted_1, [
+    renderSlot(_ctx.$slots, "default")
+  ]);
+}
+const NcAppContentDetails = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
+export {
+  NcAppContentDetails as N
+};

package/dist/chunks/NcAppContentDetails-Ch6NJvAl.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"NcAppContentDetails-Ch6NJvAl.mjs","sources":["../../src/components/NcAppContentDetails/NcAppContentDetails.vue"],"sourcesContent":["<!--\n  - SPDX-FileCopyrightText: 2019 Nextcloud GmbH and Nextcloud contributors\n  - SPDX-License-Identifier: AGPL-3.0-or-later\n-->\n\n<template>\n\t<div class=\"app-content-details\">\n\t\t<!-- @slot Provide content to the details view -->\n\t\t<slot />\n\t</div>\n</template>\n\n<script>\nexport default {\n\tname: 'NcAppContentDetails',\n}\n</script>\n"],"names":["_openBlock","_createElementBlock","_renderSlot"],"mappings":";;AAaA,MAAK,YAAU;AAAA,EACd,MAAM;AACP;AATM,MAAA,aAAA,EAAA,OAAM,sBAAqB;;AAAhC,SAAAA,UAAA,GAAAC,mBAGM,OAHN,YAGM;AAAA,IADLC,WAAQ,KAAA,QAAA,SAAA;AAAA;;;"}

package/dist/chunks/NcAppContentList-DGwk3AvB.mjs

@@ -0,0 +1,26 @@
+import { openBlock, createElementBlock, normalizeClass, renderSlot } from "vue";
+import { _ as _export_sfc } from "./_plugin-vue_export-helper-1tPrXgE0.mjs";
+const _sfc_main = {
+  name: "NcAppContentList",
+  props: {
+    selection: {
+      type: Boolean,
+      default: false
+    },
+    showDetails: {
+      type: Boolean,
+      default: false
+    }
+  }
+};
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  return openBlock(), createElementBlock("div", {
+    class: normalizeClass(["app-content-list", { selection: $props.selection, showdetails: $props.showDetails }])
+  }, [
+    renderSlot(_ctx.$slots, "default")
+  ], 2);
+}
+const NcAppContentList = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
+export {
+  NcAppContentList as N
+};

package/dist/chunks/NcAppContentList-DGwk3AvB.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"NcAppContentList-DGwk3AvB.mjs","sources":["../../src/components/NcAppContentList/NcAppContentList.vue"],"sourcesContent":["<!--\n  - SPDX-FileCopyrightText: 2019 Nextcloud GmbH and Nextcloud contributors\n  - SPDX-License-Identifier: AGPL-3.0-or-later\n-->\n\n<template>\n\t<div class=\"app-content-list\"\n\t\t:class=\"{selection, showdetails: showDetails}\">\n\t\t<slot />\n\t</div>\n</template>\n\n<script>\nexport default {\n\tname: 'NcAppContentList',\n\tprops: {\n\t\tselection: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\t\tshowDetails: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\t},\n}\n</script>\n"],"names":["_createElementBlock","_normalizeClass","_renderSlot"],"mappings":";;AAaA,MAAK,YAAU;AAAA,EACd,MAAM;AAAA,EACN,OAAO;AAAA,IACN,WAAW;AAAA,MACV,MAAM;AAAA,MACN,SAAS;AAAA,IACT;AAAA,IACD,aAAa;AAAA,MACZ,MAAM;AAAA,MACN,SAAS;AAAA,IACT;AAAA,EACD;AACF;;sBAnBCA,mBAGM,OAAA;AAAA,IAHD,OANNC,eAMY,CAAA,oBACD,EAAA,WAAA,OAAA,wBAAwB,OAAW,YAAA,CAAA,CAAA;AAAA;IAC5CC,WAAQ,KAAA,QAAA,SAAA;AAAA;;;"}