npm - @nextcloud/vue - Versions diffs - 8.11.2 → 8.11.3 - Mend

@nextcloud/vue 8.11.2 → 8.11.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (775) hide show

package/dist/chunks/{NcAppNavigationItem-Djfc0DPY.mjs.map → NcAppNavigationItem-CFyEP8wP.mjs.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"NcAppNavigationItem-Djfc0DPY.mjs","sources":["../../src/components/NcAppNavigationItem/NcAppNavigationIconCollapsible.vue","../../node_modules/vue-material-design-icons/Pencil.vue","../../node_modules/vue-material-design-icons/Undo.vue","../../src/components/NcAppNavigationItem/NcAppNavigationItem.vue"],"sourcesContent":["<!--\n - @copyright Copyright (c) 2019 Marco Ambrosini <marcoambrosini@icloud.com>\n -\n - @author Marco Ambrosini <marcoambrosini@icloud.com>\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<template>\n\t<!-- Button to expand or collapse children -->\n\t<NcButton class=\"icon-collapse\"\n\t\t:class=\"{'icon-collapse--open':open}\"\n\t\ttype=\"tertiary\"\n\t\t:aria-label=\"labelButton\"\n\t\t@click=\"onClick\">\n\t\t<template #icon>\n\t\t\t<ChevronUp v-if=\"open\"\n\t\t\t\t:size=\"20\" />\n\t\t\t<ChevronDown v-else\n\t\t\t\t:size=\"20\" />\n\t\t</template>\n\t</NcButton>\n</template>\n\n<script>\nimport NcButton from '../NcButton/index.js'\nimport { t } from '../../l10n.js'\n\nimport ChevronDown from 'vue-material-design-icons/ChevronDown.vue'\nimport ChevronUp from 'vue-material-design-icons/ChevronUp.vue'\n\nexport default {\n\tname: 'NcAppNavigationIconCollapsible',\n\n\tcomponents: {\n\t\tNcButton,\n\t\tChevronDown,\n\t\tChevronUp,\n\t},\n\n\tprops: {\n\t\topen: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: true,\n\t\t},\n\t},\n\n\temits: ['click'],\n\n\tcomputed: {\n\t\tlabelButton() {\n\t\t\treturn this.open ? t('Collapse menu') : t('Open menu')\n\t\t},\n\t},\n\n\tmethods: {\n\t\tonClick(e) {\n\t\t\tthis.$emit('click', e)\n\t\t},\n\t},\n\n}\n</script>\n\n<style lang=\"scss\" scoped>\n.button-vue.icon-collapse {\n\tposition: relative;\n\tz-index: 105; // above a, under button\n\tcolor: var(--color-main-text);\n\tright: 0;\n\t&--open {\n\t\tcolor: var(--color-main-text);\n\t\t&:hover{\n\t\t\tcolor: var(--color-primary-element);\n\t\t}\n\t}\n}\n\n</style>\n","<template>\n <span v-bind=\"$attrs\"\n :aria-hidden=\"title ? null : true\"\n :aria-label=\"title\"\n class=\"material-design-icon pencil-icon\"\n role=\"img\"\n @click=\"$emit('click', $event)\">\n <svg :fill=\"fillColor\"\n class=\"material-design-icon__svg\"\n :width=\"size\"\n :height=\"size\"\n viewBox=\"0 0 24 24\">\n <path d=\"M20.71,7.04C21.1,6.65 21.1,6 20.71,5.63L18.37,3.29C18,2.9 17.35,2.9 16.96,3.29L15.12,5.12L18.87,8.87M3,17.25V21H6.75L17.81,9.93L14.06,6.18L3,17.25Z\">\n <title v-if=\"title\">{{ title }}</title>\n </path>\n </svg>\n </span>\n</template>\n\n<script>\nexport default {\n name: \"PencilIcon\",\n emits: ['click'],\n props: {\n title: {\n type: String,\n },\n fillColor: {\n type: String,\n default: \"currentColor\"\n },\n size: {\n type: Number,\n default: 24\n }\n }\n}\n</script>","<template>\n <span v-bind=\"$attrs\"\n :aria-hidden=\"title ? null : true\"\n :aria-label=\"title\"\n class=\"material-design-icon undo-icon\"\n role=\"img\"\n @click=\"$emit('click', $event)\">\n <svg :fill=\"fillColor\"\n class=\"material-design-icon__svg\"\n :width=\"size\"\n :height=\"size\"\n viewBox=\"0 0 24 24\">\n <path d=\"M12.5,8C9.85,8 7.45,9 5.6,10.6L2,7V16H11L7.38,12.38C8.77,11.22 10.54,10.5 12.5,10.5C16.04,10.5 19.05,12.81 20.1,16L22.47,15.22C21.08,11.03 17.15,8 12.5,8Z\">\n <title v-if=\"title\">{{ title }}</title>\n </path>\n </svg>\n </span>\n</template>\n\n<script>\nexport default {\n name: \"UndoIcon\",\n emits: ['click'],\n props: {\n title: {\n type: String,\n },\n fillColor: {\n type: String,\n default: \"currentColor\"\n },\n size: {\n type: Number,\n default: 24\n }\n }\n}\n</script>","<!--\n - @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 Jonas Sulzer <jonas@violoncello.ch>\n - @author Jonathan Treffler <mail@jonathan-treffler.de>\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<docs>\n\n# Usage\n\n### Simple element\n\n* With an icon:\n\n```vue\n\t<template>\n\t\t<ul>\n\t\t\t<NcAppNavigationItem name=\"My name\">\n\t\t\t\t<template #icon>\n\t\t\t\t\t<Check :size=\"20\" />\n\t\t\t\t</template>\n\t\t\t</NcAppNavigationItem>\n\t\t</ul>\n\t</template>\n\t<script>\n\timport Check from 'vue-material-design-icons/Check'\n\n\texport default {\n\t\tcomponents: {\n\t\t\tCheck,\n\t\t},\n\t}\n\t</script>\n```\n* With a spinning loader instead of the icon:\n\n```vue\n<ul>\n\t<NcAppNavigationItem name=\"Loading Item\" :loading=\"true\" />\n</ul>\n```\n* With an active state (only needed when not using `vue-router` and the `to` property, otherwise this is set automatically)\n\n```vue\n<ul>\n\t<NcAppNavigationItem name=\"Current page\" :active=\"true\" />\n</ul>\n```\n\n### Element with actions\nWrap the children in a template. If you have more than 2 actions, a popover menu and a menu\nbutton will be automatically created.\n\n```vue\n\t<template>\n\t\t<div id=\"app-navigation-vue\"><!-- Just a wrapper necessary in the docs. Not needed when NcAppNavigation is correctly used as parent. -->\n\t\t\t<ul>\n\t\t\t\t<NcAppNavigationItem name=\"Item with actions\">\n\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t<Check :size=\"20\" />\n\t\t\t\t\t</template>\n\t\t\t\t\t<template #actions>\n\t\t\t\t\t\t<NcActionButton @click=\"alert('Edit')\">\n\t\t\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t\t\t<Pencil :size=\"20\" />\n\t\t\t\t\t\t\t</template>\n\t\t\t\t\t\t\tEdit\n\t\t\t\t\t\t</NcActionButton>\n\t\t\t\t\t\t<NcActionButton @click=\"alert('Delete')\">\n\t\t\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t\t\t<Delete :size=\"20\" />\n\t\t\t\t\t\t\t</template>\n\t\t\t\t\t\t\tDelete\n\t\t\t\t\t\t</NcActionButton>\n\t\t\t\t\t\t<NcActionLink name=\"Link\" href=\"https://nextcloud.com\">\n\t\t\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t\t\t<OpenInNew :size=\"20\" />\n\t\t\t\t\t\t\t</template>\n\t\t\t\t\t\t</NcActionLink>\n\t\t\t\t\t</template>\n\t\t\t\t</NcAppNavigationItem>\n\t\t\t</ul>\n\t\t</div>\n\t</template>\n\t<script>\n\timport Check from 'vue-material-design-icons/Check'\n\timport Delete from 'vue-material-design-icons/Delete'\n\timport OpenInNew from 'vue-material-design-icons/OpenInNew'\n\timport Pencil from 'vue-material-design-icons/Pencil'\n\n\texport default {\n\t\tcomponents: {\n\t\t\tCheck,\n\t\t\tDelete,\n\t\t\tOpenInNew,\n\t\t\tPencil,\n\t\t},\n\t}\n\t</script>\n```\n\n### Element with counter\nJust nest the counter in a template within `<NcAppNavigationItem>` and add `#counter` to it.\n\n```vue\n\t<template>\n\t\t<ul>\n\t\t\t<NcAppNavigationItem name=\"Item with counter\">\n\t\t\t\t<template #icon>\n\t\t\t\t\t<Folder :size=\"20\" />\n\t\t\t\t</template>\n\t\t\t\t<template #counter>\n\t\t\t\t\t<NcCounterBubble>\n\t\t\t\t\t\t99+\n\t\t\t\t\t</NcCounterBubble>\n\t\t\t\t</template>\n\t\t\t</NcAppNavigationItem>\n\t\t</ul>\n\t</template>\n\t<script>\n\timport Folder from 'vue-material-design-icons/Folder'\n\n\texport default {\n\t\tcomponents: {\n\t\t\tFolder,\n\t\t},\n\t}\n\t</script>\n```\n\n### Element with children\n\nWrap the children in a template with the `slot` property and use the prop `allowCollapse` to choose wether to allow or\nprevent the user from collapsing the items.\n\n```vue\n\t<template>\n\t\t<ul>\n\t\t\t<NcAppNavigationItem name=\"Item with children\" :allowCollapse=\"true\" :open=\"true\">\n\t\t\t\t<template #icon>\n\t\t\t\t\t<Folder :size=\"20\" />\n\t\t\t\t</template>\n\t\t\t\t<template #counter>\n\t\t\t\t\t<NcCounterBubble>\n\t\t\t\t\t\t99+\n\t\t\t\t\t</NcCounterBubble>\n\t\t\t\t</template>\n\t\t\t\t<template #actions>\n\t\t\t\t\t<NcActionButton @click=\"alert('Edit')\">\n\t\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t\t<Pencil :size=\"20\" />\n\t\t\t\t\t\t</template>\n\t\t\t\t\t\tEdit\n\t\t\t\t\t</NcActionButton>\n\t\t\t\t\t<NcActionButton @click=\"alert('Delete')\">\n\t\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t\t<Delete :size=\"20\" />\n\t\t\t\t\t\t</template>\n\t\t\t\t\t\tDelete\n\t\t\t\t\t</NcActionButton>\n\t\t\t\t\t<NcActionLink name=\"Link\" href=\"https://nextcloud.com\">\n\t\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t\t<OpenInNew :size=\"20\" />\n\t\t\t\t\t\t</template>\n\t\t\t\t\t</NcActionLink>\n\t\t\t\t</template>\n\t\t\t\t<template>\n\t\t\t\t\t<NcAppNavigationItem name=\"AppNavigationItemChild1\" />\n\t\t\t\t\t<NcAppNavigationItem name=\"AppNavigationItemChild2\" />\n\t\t\t\t\t<NcAppNavigationItem name=\"AppNavigationItemChild3\" />\n\t\t\t\t\t<NcAppNavigationItem name=\"AppNavigationItemChild4\" />\n\t\t\t\t</template>\n\t\t\t</NcAppNavigationItem>\n\t\t</ul>\n\t</template>\n\t<script>\n\timport Folder from 'vue-material-design-icons/Folder'\n\timport Delete from 'vue-material-design-icons/Delete'\n\timport OpenInNew from 'vue-material-design-icons/OpenInNew'\n\timport Pencil from 'vue-material-design-icons/Pencil'\n\n\texport default {\n\t\tcomponents: {\n\t\t\tFolder,\n\t\t\tDelete,\n\t\t\tOpenInNew,\n\t\t\tPencil,\n\t\t},\n\t}\n\t</script>\n```\n\n### Editable element\nAdd the prop `:editable=true` and an edit placeholder if you need it. By default\nthe placeholder is the previous name of the element.\n\n```vue\n\t<template>\n\t\t<ul>\n\t\t\t<NcAppNavigationItem name=\"Editable Item\" :editable=\"true\"\n\t\t\t\teditPlaceholder=\"your_placeholder_here\" @update:name=\"function(value){alert(value)}\">\n\t\t\t\t<template #icon>\n\t\t\t\t\t<Folder :size=\"20\" />\n\t\t\t\t</template>\n\t\t\t</NcAppNavigationItem>\n\t\t</ul>\n\t</template>\n\t<script>\n\timport Folder from 'vue-material-design-icons/Folder'\n\n\texport default {\n\t\tcomponents: {\n\t\t\tFolder,\n\t\t},\n\t}\n\t</script>\n```\n\n### Undo element\nJust set the `undo` and `name` props. When clicking the undo button, an `undo` event is emitted.\n\n```\n<ul>\n\t<NcAppNavigationItem :undo=\"true\" name=\"Deleted important entry\" @undo=\"alert('undo delete')\" />\n</ul>\n```\n\n### Link element\nHref that start by http will be treated as external and opened in a new tab\n```\n<div>\n\t<ul>\n\t\t<NcAppNavigationItem name=\"Files\" href=\"/index.php/apps/files\" />\n\t\t<NcAppNavigationItem name=\"Nextcloud\" href=\"https://nextcloud.com\" />\n\t</ul>\n</div>\n```\n\n### Custom title\n```\n<ul>\n\t<NcAppNavigationItem name=\"Nextcloud\" title=\"Open the Nextcloud website\" href=\"https://nextcloud.com\" />\n</ul>\n```\n\n### Pinned element\nJust set the `pinned` prop.\n```\n<ul>\n\t<NcAppNavigationItem name=\"Pinned item\" :pinned=\"true\" />\n</ul>\n```\n</docs>\n\n<template>\n\t<li :id=\"id\"\n\t\t:class=\"{\n\t\t\t'app-navigation-entry--opened': opened,\n\t\t\t'app-navigation-entry--pinned': pinned,\n\t\t\t'app-navigation-entry--collapsible': collapsible,\n\t\t}\"\n\t\tclass=\"app-navigation-entry-wrapper\">\n\t\t<component :is=\"isRouterLink ? 'router-link' : 'NcVNodes'\"\n\t\t\tv-slot=\"{ href: routerLinkHref, navigate, isActive }\"\n\t\t\t:custom=\"isRouterLink ? true : false\"\n\t\t\t:to=\"to\"\n\t\t\t:exact=\"isRouterLink ? exact : null\">\n\t\t\t<div :class=\"{\n\t\t\t\t\t'app-navigation-entry--editing': editingActive,\n\t\t\t\t\t'app-navigation-entry--deleted': undo,\n\t\t\t\t\t'active': (isActive && to) \|\| active,\n\t\t\t\t}\"\n\t\t\t\tclass=\"app-navigation-entry\">\n\t\t\t\t<!-- Icon and name -->\n\t\t\t\t<a v-if=\"!undo\"\n\t\t\t\t\tclass=\"app-navigation-entry-link\"\n\t\t\t\t\t:aria-current=\"active \|\| (isActive && to) ? 'page' : undefined\"\n\t\t\t\t\t:aria-description=\"ariaDescription\"\n\t\t\t\t\t:aria-expanded=\"hasChildren ? opened.toString() : undefined\"\n\t\t\t\t\t:href=\"href \|\| routerLinkHref \|\| '#'\"\n\t\t\t\t\t:target=\"isExternal(href) ? '_blank' : undefined\"\n\t\t\t\t\t:title=\"title \|\| name\"\n\t\t\t\t\t@blur=\"handleBlur\"\n\t\t\t\t\t@click=\"onClick($event, navigate, routerLinkHref)\"\n\t\t\t\t\t@focus=\"handleFocus\"\n\t\t\t\t\t@keydown.tab.exact=\"handleTab\">\n\n\t\t\t\t\t<!-- icon if not collapsible -->\n\t\t\t\t\t<!-- never show the icon over the collapsible if mobile -->\n\t\t\t\t\t<div :class=\"{ [icon]: icon }\"\n\t\t\t\t\t\tclass=\"app-navigation-entry-icon\">\n\t\t\t\t\t\t<NcLoadingIcon v-if=\"loading\" />\n\t\t\t\t\t\t<!-- @slot Slot for the optional leading icon -->\n\t\t\t\t\t\t<slot v-else name=\"icon\" />\n\t\t\t\t\t</div>\n\t\t\t\t\t<span v-if=\"!editingActive\" class=\"app-navigation-entry__name\">\n\t\t\t\t\t\t{{ name }}\n\t\t\t\t\t</span>\n\t\t\t\t\t<div v-if=\"editingActive\" class=\"editingContainer\">\n\t\t\t\t\t\t<NcInputConfirmCancel ref=\"editingInput\"\n\t\t\t\t\t\t\tv-model=\"editingValue\"\n\t\t\t\t\t\t\t:placeholder=\"editPlaceholder !== '' ? editPlaceholder : name\"\n\t\t\t\t\t\t\t:primary=\"(isActive && to) \|\| active\"\n\t\t\t\t\t\t\t@cancel=\"cancelEditing\"\n\t\t\t\t\t\t\t@confirm=\"handleEditingDone\" />\n\t\t\t\t\t</div>\n\t\t\t\t</a>\n\n\t\t\t\t<!-- undo entry -->\n\t\t\t\t<div v-if=\"undo\" class=\"app-navigation-entry__deleted\">\n\t\t\t\t\t<div class=\"app-navigation-entry__deleted-description\">\n\t\t\t\t\t\t{{ name }}\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\n\t\t\t\t<!-- Counter and Actions -->\n\t\t\t\t<div v-if=\"hasUtils && !editingActive\"\n\t\t\t\t\tclass=\"app-navigation-entry__utils\"\n\t\t\t\t\t:class=\"{'app-navigation-entry__utils--display-actions': forceDisplayActions \|\| menuOpenLocalValue \|\| menuOpen }\">\n\t\t\t\t\t<div v-if=\"$slots.counter\"\n\t\t\t\t\t\tclass=\"app-navigation-entry__counter-wrapper\">\n\t\t\t\t\t\t<!-- @slot Slot for the `NcCounterBubble` -->\n\t\t\t\t\t\t<slot name=\"counter\" />\n\t\t\t\t\t</div>\n\t\t\t\t\t<NcActions v-if=\"$slots.actions \|\| (editable && !editingActive) \|\| undo\"\n\t\t\t\t\t\tref=\"actions\"\n\t\t\t\t\t\t:inline=\"inlineActions\"\n\t\t\t\t\t\tclass=\"app-navigation-entry__actions\"\n\t\t\t\t\t\tcontainer=\"#app-navigation-vue\"\n\t\t\t\t\t\t:boundaries-element=\"actionsBoundariesElement\"\n\t\t\t\t\t\t:placement=\"menuPlacement\"\n\t\t\t\t\t\t:open=\"menuOpen\"\n\t\t\t\t\t\t:type=\"(isActive && to) \|\| active ? 'primary' : null\"\n\t\t\t\t\t\t:force-menu=\"forceMenu\"\n\t\t\t\t\t\t:default-icon=\"menuIcon\"\n\t\t\t\t\t\t@update:open=\"onMenuToggle\">\n\t\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t\t<!-- @slot Slot for the custom menu icon -->\n\t\t\t\t\t\t\t<slot name=\"menu-icon\" />\n\t\t\t\t\t\t</template>\n\t\t\t\t\t\t<NcActionButton v-if=\"editable && !editingActive\"\n\t\t\t\t\t\t\t:aria-label=\"editButtonAriaLabel\"\n\t\t\t\t\t\t\t@click=\"handleEdit\">\n\t\t\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t\t\t<Pencil :size=\"20\" />\n\t\t\t\t\t\t\t</template>\n\t\t\t\t\t\t\t{{ editLabel }}\n\t\t\t\t\t\t</NcActionButton>\n\t\t\t\t\t\t<NcActionButton v-if=\"undo\"\n\t\t\t\t\t\t\t:aria-label=\"undoButtonAriaLabel\"\n\t\t\t\t\t\t\t@click=\"handleUndo\">\n\t\t\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t\t\t<Undo :size=\"20\" />\n\t\t\t\t\t\t\t</template>\n\t\t\t\t\t\t</NcActionButton>\n\t\t\t\t\t\t<!-- @slot Slot for additional `NcAction` -->\n\t\t\t\t\t\t<slot name=\"actions\" />\n\t\t\t\t\t</NcActions>\n\t\t\t\t</div>\n\t\t\t\t<NcAppNavigationIconCollapsible v-if=\"collapsible\" :open=\"opened\" @click.prevent.stop=\"toggleCollapse\" />\n\n\t\t\t\t<!-- @slot Slot for anything (virtual) that should be mounted in the component, like a related modal -->\n\t\t\t\t<slot name=\"extra\" />\n\t\t\t</div>\n\t\t</component>\n\t\t<!-- Children elements -->\n\t\t<ul v-if=\"canHaveChildren && hasChildren\" class=\"app-navigation-entry__children\">\n\t\t\t<!-- @slot Slot for children -->\n\t\t\t<slot />\n\t\t</ul>\n\t</li>\n</template>\n\n<script>\nimport NcActions from '../NcActions/index.js'\nimport NcActionButton from '../NcActionButton/index.js'\nimport NcLoadingIcon from '../NcLoadingIcon/index.js'\nimport NcVNodes from '../NcVNodes/index.js'\nimport NcAppNavigationIconCollapsible from './NcAppNavigationIconCollapsible.vue'\nimport { useIsMobile } from '../../composables/useIsMobile/index.js'\nimport NcInputConfirmCancel from './NcInputConfirmCancel.vue'\nimport { t } from '../../l10n.js'\nimport GenRandomId from '../../utils/GenRandomId.js'\n\nimport Pencil from 'vue-material-design-icons/Pencil.vue'\nimport Undo from 'vue-material-design-icons/Undo.vue'\n\nexport default {\n\tname: 'NcAppNavigationItem',\n\n\tcomponents: {\n\t\tNcActions,\n\t\tNcActionButton,\n\t\tNcAppNavigationIconCollapsible,\n\t\tNcInputConfirmCancel,\n\t\tNcLoadingIcon,\n\t\tNcVNodes,\n\t\tPencil,\n\t\tUndo,\n\t},\n\n\tprops: {\n\t\t/\n\t\t If you are not using vue-router you can use the property to set this item as the active navigation entry.\n\t\t * When using vue-router and the `to` property this is set automatically.\n\t\t /\n\t\tactive: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/\n\t\t The main text content of the entry.\n\t\t /\n\t\tname: {\n\t\t\ttype: String,\n\t\t\trequired: true,\n\t\t},\n\n\t\t/\n\t\t The title attribute of the element.\n\t\t /\n\t\ttitle: {\n\t\t\ttype: String,\n\t\t\tdefault: null,\n\t\t},\n\n\t\t/\n\t\t id attribute of the list item element\n\t\t /\n\t\tid: {\n\t\t\ttype: String,\n\t\t\tdefault: () => 'app-navigation-item-' + GenRandomId(),\n\t\t\tvalidator: id => id.trim() !== '',\n\t\t},\n\n\t\t/\n\t\t Refers to the icon on the left, this prop accepts a class\n\t\t * like 'icon-category-enabled'.\n\t\t /\n\t\ticon: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\n\t\t/\n\t\t Displays a loading animated icon on the left of the element\n\t\t * instead of the icon.\n\t\t /\n\t\tloading: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/\n\t\t Passing in a route will make the root element of this\n\t\t * component a `<router-link />` that points to that route.\n\t\t * By leaving this blank, the root element will be a `<li>`.\n\t\t /\n\t\tto: {\n\t\t\ttype: [String, Object],\n\t\t\tdefault: null,\n\t\t},\n\n\t\t/\n\t\t A direct link. This will be used as the `href` attribute.\n\t\t * This will ignore any `to` prop being defined.\n\t\t /\n\t\thref: {\n\t\t\ttype: String,\n\t\t\tdefault: null,\n\t\t},\n\n\t\t/\n\t\t Pass in `true` if you want the matching behaviour to\n\t\t * be non-inclusive: https://router.vuejs.org/api/#exact\n\t\t /\n\t\texact: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\t\t/\n\t\t Gives the possibility to collapse the children elements into the\n\t\t * parent element (true) or expands the children elements (false).\n\t\t /\n\t\tallowCollapse: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/\n\t\t Makes the name of the item editable by providing an `ActionButton`\n\t\t * component that toggles a form\n\t\t /\n\t\teditable: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/\n\t\t Only for 'editable' items, sets label for the edit action button.\n\t\t /\n\t\teditLabel: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\n\t\t/\n\t\t Only for items in 'editable' mode, sets the placeholder text for the editing form.\n\t\t /\n\t\teditPlaceholder: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\n\t\t/\n\t\t Pins the item to the bottom left area, above the settings. Do not\n\t\t * place 'non-pinned' `AppnavigationItem` components below `pinned`\n\t\t * ones.\n\t\t /\n\t\tpinned: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/\n\t\t Puts the item in the 'undo' state.\n\t\t /\n\t\tundo: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/\n\t\t The navigation collapsible state (synced)\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 The actions menu open state (synced)\n\t\t /\n\t\tmenuOpen: {\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 The action's menu default icon\n\t\t /\n\t\tmenuIcon: {\n\t\t\ttype: String,\n\t\t\tdefault: undefined,\n\t\t},\n\n\t\t/\n\t\t The action's menu direction\n\t\t /\n\t\tmenuPlacement: {\n\t\t\ttype: String,\n\t\t\tdefault: 'bottom',\n\t\t},\n\n\t\t/\n\t\t Entry aria details\n\t\t /\n\t\tariaDescription: {\n\t\t\ttype: String,\n\t\t\tdefault: null,\n\t\t},\n\n\t\t/\n\t\t To be used only when the elements in the actions menu are very important\n\t\t /\n\t\tforceDisplayActions: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/\n\t\t Number of action items outside the menu\n\t\t /\n\t\tinlineActions: {\n\t\t\ttype: Number,\n\t\t\tdefault: 0,\n\t\t},\n\t},\n\n\temits: [\n\t\t'update:menuOpen',\n\t\t'update:open',\n\t\t'update:name',\n\t\t'click',\n\t\t'undo',\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\teditingValue: '',\n\t\t\topened: this.open, // Collapsible state\n\t\t\teditingActive: false,\n\t\t\thasChildren: false,\n\t\t\t/\n\t\t\t Tracks the open state of the actions menu\n\t\t\t /\n\t\t\tmenuOpenLocalValue: false,\n\t\t\tfocused: false,\n\t\t\tcollapsible: false,\n\t\t}\n\t},\n\n\tcomputed: {\n\t\tisRouterLink() {\n\t\t\treturn this.to && !this.href\n\t\t},\n\n\t\t// Checks if the component is already a children of another\n\t\t// instance of AppNavigationItem\n\t\tcanHaveChildren() {\n\t\t\tif (this.$parent.$options._componentTag === 'AppNavigationItem') {\n\t\t\t\treturn false\n\t\t\t} else {\n\t\t\t\treturn true\n\t\t\t}\n\t\t},\n\n\t\thasUtils() {\n\t\t\tif (this.$slots.actions \|\| this.$slots.counter \|\| this.editable \|\| this.undo) {\n\t\t\t\treturn true\n\t\t\t}\n\t\t\treturn false\n\t\t},\n\n\t\teditButtonAriaLabel() {\n\t\t\treturn this.editLabel ? this.editLabel : t('Edit item')\n\t\t},\n\n\t\tundoButtonAriaLabel() {\n\t\t\treturn t('Undo changes')\n\t\t},\n\t\tactionsBoundariesElement() {\n\t\t\treturn document.querySelector('#content-vue') \|\| undefined\n\t\t},\n\t},\n\n\twatch: {\n\t\topen(newVal) {\n\t\t\tthis.opened = newVal\n\t\t},\n\t},\n\n\tcreated() {\n\t\tthis.updateSlotInfo()\n\t},\n\n\tbeforeUpdate() {\n\t\tthis.updateSlotInfo()\n\t},\n\n\tmethods: {\n\t\t// sync opened menu state with prop\n\t\tonMenuToggle(state) {\n\t\t\tthis.$emit('update:menuOpen', state)\n\t\t\tthis.menuOpenLocalValue = state\n\t\t},\n\t\t// toggle the collapsible state\n\t\ttoggleCollapse() {\n\t\t\tthis.opened = !this.opened\n\t\t\tthis.$emit('update:open', this.opened)\n\t\t},\n\n\t\t/\n\t\t Handle link click\n\t\t \n\t\t @param {PointerEvent} event - Native click event\n\t\t * @param {Function} [navigate] - VueRouter link's navigate if any\n\t\t * @param {string} [routerLinkHref] - VueRouter link's href\n\t\t /\n\t\tonClick(event, navigate, routerLinkHref) {\n\t\t\t// Always forward native event\n\t\t\tthis.$emit('click', event)\n\t\t\t// Do not navigate with control keys - it is opening in a new tab\n\t\t\tif (event.metaKey \|\| event.altKey \|\| event.ctrlKey \|\| event.shiftKey) {\n\t\t\t\treturn\n\t\t\t}\n\t\t\t// Prevent default link behaviour if it's a router-link and navigate manually\n\t\t\tif (routerLinkHref) {\n\t\t\t\tnavigate?.(event)\n\t\t\t\tevent.preventDefault()\n\t\t\t}\n\t\t},\n\n\t\t// Edition methods\n\t\thandleEdit() {\n\t\t\tthis.editingValue = this.name\n\t\t\tthis.editingActive = true\n\t\t\tthis.onMenuToggle(false)\n\t\t\tthis.$nextTick(() => {\n\t\t\t\tthis.$refs.editingInput.focusInput()\n\t\t\t})\n\t\t},\n\t\tcancelEditing() {\n\t\t\tthis.editingActive = false\n\t\t},\n\t\thandleEditingDone() {\n\t\t\tthis.$emit('update:name', this.editingValue)\n\t\t\tthis.editingValue = ''\n\t\t\tthis.editingActive = false\n\t\t},\n\n\t\t// Undo methods\n\t\thandleUndo() {\n\t\t\tthis.$emit('undo')\n\t\t},\n\n\t\tupdateSlotInfo() {\n\t\t\tthis.hasChildren = !!this.$slots.default\n\t\t\tthis.collapsible = this.allowCollapse && !!this.$slots.default\n\t\t},\n\n\t\t/\n\t\t Show actions upon focus\n\t\t /\n\t\thandleFocus() {\n\t\t\tthis.focused = true\n\t\t},\n\n\t\thandleBlur() {\n\t\t\tthis.focused = false\n\t\t},\n\n\t\t/\n\t\t This method checks if the root element of the component is focused and\n\t\t * if that's the case it focuses the actions button if available\n\t\t \n\t\t @param {Event} e the keydown event\n\t\t /\n\t\thandleTab(e) {\n\t\t\t// If there is no actions menu, do nothing.\n\t\t\tif (!this.$refs.actions) {\n\t\t\t\treturn\n\t\t\t}\n\t\t\tif (this.focused) {\n\t\t\t\te.preventDefault()\n\t\t\t\tthis.$refs.actions.$refs.menuButton.$el.focus()\n\t\t\t\tthis.focused = false\n\t\t\t} else {\n\t\t\t\tthis.$refs.actions.$refs.menuButton.$el.blur()\n\t\t\t}\n\t\t},\n\n\t\t/\n\t\t Is this an external link\n\t\t \n\t\t @param {string} href The link to check\n\t\t * @return {boolean} Whether it is external or not\n\t\t */\n\t\tisExternal(href) {\n\t\t\t// Match any protocol\n\t\t\treturn href && href.match(/[a-z]+:\\/\\//i)\n\t\t},\n\t},\n}\n</script>\n\n<style scoped lang=\"scss\">\n@import '../../assets/NcAppNavigationItem';\n</style>\n"],"names":["_sfc_main","NcButton","ChevronDown","ChevronUp","t","e","NcActions","NcActionButton","NcAppNavigationIconCollapsible","NcInputConfirmCancel","NcLoadingIcon","NcVNodes","Pencil","Undo","GenRandomId","id","useIsMobile","newVal","state","event","navigate","routerLinkHref","href"],"mappings":"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","x_google_ignoreList":[1,2]}
1	+ {"version":3,"file":"NcAppNavigationItem-CFyEP8wP.mjs","sources":["../../src/components/NcAppNavigationItem/NcAppNavigationIconCollapsible.vue","../../node_modules/vue-material-design-icons/Pencil.vue","../../node_modules/vue-material-design-icons/Undo.vue","../../src/components/NcAppNavigationItem/NcAppNavigationItem.vue"],"sourcesContent":["<!--\n - @copyright Copyright (c) 2019 Marco Ambrosini <marcoambrosini@icloud.com>\n -\n - @author Marco Ambrosini <marcoambrosini@icloud.com>\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<template>\n\t<!-- Button to expand or collapse children -->\n\t<NcButton class=\"icon-collapse\"\n\t\t:class=\"{'icon-collapse--open':open}\"\n\t\ttype=\"tertiary\"\n\t\t:aria-label=\"labelButton\"\n\t\t@click=\"onClick\">\n\t\t<template #icon>\n\t\t\t<ChevronUp v-if=\"open\"\n\t\t\t\t:size=\"20\" />\n\t\t\t<ChevronDown v-else\n\t\t\t\t:size=\"20\" />\n\t\t</template>\n\t</NcButton>\n</template>\n\n<script>\nimport NcButton from '../NcButton/index.js'\nimport { t } from '../../l10n.js'\n\nimport ChevronDown from 'vue-material-design-icons/ChevronDown.vue'\nimport ChevronUp from 'vue-material-design-icons/ChevronUp.vue'\n\nexport default {\n\tname: 'NcAppNavigationIconCollapsible',\n\n\tcomponents: {\n\t\tNcButton,\n\t\tChevronDown,\n\t\tChevronUp,\n\t},\n\n\tprops: {\n\t\topen: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: true,\n\t\t},\n\t},\n\n\temits: ['click'],\n\n\tcomputed: {\n\t\tlabelButton() {\n\t\t\treturn this.open ? t('Collapse menu') : t('Open menu')\n\t\t},\n\t},\n\n\tmethods: {\n\t\tonClick(e) {\n\t\t\tthis.$emit('click', e)\n\t\t},\n\t},\n\n}\n</script>\n\n<style lang=\"scss\" scoped>\n.button-vue.icon-collapse {\n\tposition: relative;\n\tz-index: 105; // above a, under button\n\tcolor: var(--color-main-text);\n\tright: 0;\n\t&--open {\n\t\tcolor: var(--color-main-text);\n\t\t&:hover{\n\t\t\tcolor: var(--color-primary-element);\n\t\t}\n\t}\n}\n\n</style>\n","<template>\n <span v-bind=\"$attrs\"\n :aria-hidden=\"title ? null : true\"\n :aria-label=\"title\"\n class=\"material-design-icon pencil-icon\"\n role=\"img\"\n @click=\"$emit('click', $event)\">\n <svg :fill=\"fillColor\"\n class=\"material-design-icon__svg\"\n :width=\"size\"\n :height=\"size\"\n viewBox=\"0 0 24 24\">\n <path d=\"M20.71,7.04C21.1,6.65 21.1,6 20.71,5.63L18.37,3.29C18,2.9 17.35,2.9 16.96,3.29L15.12,5.12L18.87,8.87M3,17.25V21H6.75L17.81,9.93L14.06,6.18L3,17.25Z\">\n <title v-if=\"title\">{{ title }}</title>\n </path>\n </svg>\n </span>\n</template>\n\n<script>\nexport default {\n name: \"PencilIcon\",\n emits: ['click'],\n props: {\n title: {\n type: String,\n },\n fillColor: {\n type: String,\n default: \"currentColor\"\n },\n size: {\n type: Number,\n default: 24\n }\n }\n}\n</script>","<template>\n <span v-bind=\"$attrs\"\n :aria-hidden=\"title ? null : true\"\n :aria-label=\"title\"\n class=\"material-design-icon undo-icon\"\n role=\"img\"\n @click=\"$emit('click', $event)\">\n <svg :fill=\"fillColor\"\n class=\"material-design-icon__svg\"\n :width=\"size\"\n :height=\"size\"\n viewBox=\"0 0 24 24\">\n <path d=\"M12.5,8C9.85,8 7.45,9 5.6,10.6L2,7V16H11L7.38,12.38C8.77,11.22 10.54,10.5 12.5,10.5C16.04,10.5 19.05,12.81 20.1,16L22.47,15.22C21.08,11.03 17.15,8 12.5,8Z\">\n <title v-if=\"title\">{{ title }}</title>\n </path>\n </svg>\n </span>\n</template>\n\n<script>\nexport default {\n name: \"UndoIcon\",\n emits: ['click'],\n props: {\n title: {\n type: String,\n },\n fillColor: {\n type: String,\n default: \"currentColor\"\n },\n size: {\n type: Number,\n default: 24\n }\n }\n}\n</script>","<!--\n - @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 Jonas Sulzer <jonas@violoncello.ch>\n - @author Jonathan Treffler <mail@jonathan-treffler.de>\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<docs>\n\n# Usage\n\n### Simple element\n\n* With an icon:\n\n```vue\n\t<template>\n\t\t<ul>\n\t\t\t<NcAppNavigationItem name=\"My name\">\n\t\t\t\t<template #icon>\n\t\t\t\t\t<Check :size=\"20\" />\n\t\t\t\t</template>\n\t\t\t</NcAppNavigationItem>\n\t\t</ul>\n\t</template>\n\t<script>\n\timport Check from 'vue-material-design-icons/Check'\n\n\texport default {\n\t\tcomponents: {\n\t\t\tCheck,\n\t\t},\n\t}\n\t</script>\n```\n* With a spinning loader instead of the icon:\n\n```vue\n<ul>\n\t<NcAppNavigationItem name=\"Loading Item\" :loading=\"true\" />\n</ul>\n```\n* With an active state (only needed when not using `vue-router` and the `to` property, otherwise this is set automatically)\n\n```vue\n<ul>\n\t<NcAppNavigationItem name=\"Current page\" :active=\"true\" />\n</ul>\n```\n\n### Element with actions\nWrap the children in a template. If you have more than 2 actions, a popover menu and a menu\nbutton will be automatically created.\n\n```vue\n\t<template>\n\t\t<div id=\"app-navigation-vue\"><!-- Just a wrapper necessary in the docs. Not needed when NcAppNavigation is correctly used as parent. -->\n\t\t\t<ul>\n\t\t\t\t<NcAppNavigationItem name=\"Item with actions\">\n\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t<Check :size=\"20\" />\n\t\t\t\t\t</template>\n\t\t\t\t\t<template #actions>\n\t\t\t\t\t\t<NcActionButton @click=\"alert('Edit')\">\n\t\t\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t\t\t<Pencil :size=\"20\" />\n\t\t\t\t\t\t\t</template>\n\t\t\t\t\t\t\tEdit\n\t\t\t\t\t\t</NcActionButton>\n\t\t\t\t\t\t<NcActionButton @click=\"alert('Delete')\">\n\t\t\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t\t\t<Delete :size=\"20\" />\n\t\t\t\t\t\t\t</template>\n\t\t\t\t\t\t\tDelete\n\t\t\t\t\t\t</NcActionButton>\n\t\t\t\t\t\t<NcActionLink name=\"Link\" href=\"https://nextcloud.com\">\n\t\t\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t\t\t<OpenInNew :size=\"20\" />\n\t\t\t\t\t\t\t</template>\n\t\t\t\t\t\t</NcActionLink>\n\t\t\t\t\t</template>\n\t\t\t\t</NcAppNavigationItem>\n\t\t\t</ul>\n\t\t</div>\n\t</template>\n\t<script>\n\timport Check from 'vue-material-design-icons/Check'\n\timport Delete from 'vue-material-design-icons/Delete'\n\timport OpenInNew from 'vue-material-design-icons/OpenInNew'\n\timport Pencil from 'vue-material-design-icons/Pencil'\n\n\texport default {\n\t\tcomponents: {\n\t\t\tCheck,\n\t\t\tDelete,\n\t\t\tOpenInNew,\n\t\t\tPencil,\n\t\t},\n\t}\n\t</script>\n```\n\n### Element with counter\nJust nest the counter in a template within `<NcAppNavigationItem>` and add `#counter` to it.\n\n```vue\n\t<template>\n\t\t<ul>\n\t\t\t<NcAppNavigationItem name=\"Item with counter\">\n\t\t\t\t<template #icon>\n\t\t\t\t\t<Folder :size=\"20\" />\n\t\t\t\t</template>\n\t\t\t\t<template #counter>\n\t\t\t\t\t<NcCounterBubble>\n\t\t\t\t\t\t99+\n\t\t\t\t\t</NcCounterBubble>\n\t\t\t\t</template>\n\t\t\t</NcAppNavigationItem>\n\t\t</ul>\n\t</template>\n\t<script>\n\timport Folder from 'vue-material-design-icons/Folder'\n\n\texport default {\n\t\tcomponents: {\n\t\t\tFolder,\n\t\t},\n\t}\n\t</script>\n```\n\n### Element with children\n\nWrap the children in a template with the `slot` property and use the prop `allowCollapse` to choose wether to allow or\nprevent the user from collapsing the items.\n\n```vue\n\t<template>\n\t\t<ul>\n\t\t\t<NcAppNavigationItem name=\"Item with children\" :allowCollapse=\"true\" :open=\"true\">\n\t\t\t\t<template #icon>\n\t\t\t\t\t<Folder :size=\"20\" />\n\t\t\t\t</template>\n\t\t\t\t<template #counter>\n\t\t\t\t\t<NcCounterBubble>\n\t\t\t\t\t\t99+\n\t\t\t\t\t</NcCounterBubble>\n\t\t\t\t</template>\n\t\t\t\t<template #actions>\n\t\t\t\t\t<NcActionButton @click=\"alert('Edit')\">\n\t\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t\t<Pencil :size=\"20\" />\n\t\t\t\t\t\t</template>\n\t\t\t\t\t\tEdit\n\t\t\t\t\t</NcActionButton>\n\t\t\t\t\t<NcActionButton @click=\"alert('Delete')\">\n\t\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t\t<Delete :size=\"20\" />\n\t\t\t\t\t\t</template>\n\t\t\t\t\t\tDelete\n\t\t\t\t\t</NcActionButton>\n\t\t\t\t\t<NcActionLink name=\"Link\" href=\"https://nextcloud.com\">\n\t\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t\t<OpenInNew :size=\"20\" />\n\t\t\t\t\t\t</template>\n\t\t\t\t\t</NcActionLink>\n\t\t\t\t</template>\n\t\t\t\t<template>\n\t\t\t\t\t<NcAppNavigationItem name=\"AppNavigationItemChild1\" />\n\t\t\t\t\t<NcAppNavigationItem name=\"AppNavigationItemChild2\" />\n\t\t\t\t\t<NcAppNavigationItem name=\"AppNavigationItemChild3\" />\n\t\t\t\t\t<NcAppNavigationItem name=\"AppNavigationItemChild4\" />\n\t\t\t\t</template>\n\t\t\t</NcAppNavigationItem>\n\t\t</ul>\n\t</template>\n\t<script>\n\timport Folder from 'vue-material-design-icons/Folder'\n\timport Delete from 'vue-material-design-icons/Delete'\n\timport OpenInNew from 'vue-material-design-icons/OpenInNew'\n\timport Pencil from 'vue-material-design-icons/Pencil'\n\n\texport default {\n\t\tcomponents: {\n\t\t\tFolder,\n\t\t\tDelete,\n\t\t\tOpenInNew,\n\t\t\tPencil,\n\t\t},\n\t}\n\t</script>\n```\n\n### Editable element\nAdd the prop `:editable=true` and an edit placeholder if you need it. By default\nthe placeholder is the previous name of the element.\n\n```vue\n\t<template>\n\t\t<ul>\n\t\t\t<NcAppNavigationItem name=\"Editable Item\" :editable=\"true\"\n\t\t\t\teditPlaceholder=\"your_placeholder_here\" @update:name=\"function(value){alert(value)}\">\n\t\t\t\t<template #icon>\n\t\t\t\t\t<Folder :size=\"20\" />\n\t\t\t\t</template>\n\t\t\t</NcAppNavigationItem>\n\t\t</ul>\n\t</template>\n\t<script>\n\timport Folder from 'vue-material-design-icons/Folder'\n\n\texport default {\n\t\tcomponents: {\n\t\t\tFolder,\n\t\t},\n\t}\n\t</script>\n```\n\n### Undo element\nJust set the `undo` and `name` props. When clicking the undo button, an `undo` event is emitted.\n\n```\n<ul>\n\t<NcAppNavigationItem :undo=\"true\" name=\"Deleted important entry\" @undo=\"alert('undo delete')\" />\n</ul>\n```\n\n### Link element\nHref that start by http will be treated as external and opened in a new tab\n```\n<div>\n\t<ul>\n\t\t<NcAppNavigationItem name=\"Files\" href=\"/index.php/apps/files\" />\n\t\t<NcAppNavigationItem name=\"Nextcloud\" href=\"https://nextcloud.com\" />\n\t</ul>\n</div>\n```\n\n### Custom title\n```\n<ul>\n\t<NcAppNavigationItem name=\"Nextcloud\" title=\"Open the Nextcloud website\" href=\"https://nextcloud.com\" />\n</ul>\n```\n\n### Pinned element\nJust set the `pinned` prop.\n```\n<ul>\n\t<NcAppNavigationItem name=\"Pinned item\" :pinned=\"true\" />\n</ul>\n```\n</docs>\n\n<template>\n\t<li :id=\"id\"\n\t\t:class=\"{\n\t\t\t'app-navigation-entry--opened': opened,\n\t\t\t'app-navigation-entry--pinned': pinned,\n\t\t\t'app-navigation-entry--collapsible': collapsible,\n\t\t}\"\n\t\tclass=\"app-navigation-entry-wrapper\">\n\t\t<component :is=\"isRouterLink ? 'router-link' : 'NcVNodes'\"\n\t\t\tv-slot=\"{ href: routerLinkHref, navigate, isActive }\"\n\t\t\t:custom=\"isRouterLink ? true : false\"\n\t\t\t:to=\"to\"\n\t\t\t:exact=\"isRouterLink ? exact : null\">\n\t\t\t<div :class=\"{\n\t\t\t\t\t'app-navigation-entry--editing': editingActive,\n\t\t\t\t\t'app-navigation-entry--deleted': undo,\n\t\t\t\t\t'active': (isActive && to) \|\| active,\n\t\t\t\t}\"\n\t\t\t\tclass=\"app-navigation-entry\">\n\t\t\t\t<!-- Icon and name -->\n\t\t\t\t<a v-if=\"!undo\"\n\t\t\t\t\tclass=\"app-navigation-entry-link\"\n\t\t\t\t\t:aria-current=\"active \|\| (isActive && to) ? 'page' : undefined\"\n\t\t\t\t\t:aria-description=\"ariaDescription\"\n\t\t\t\t\t:aria-expanded=\"hasChildren ? opened.toString() : undefined\"\n\t\t\t\t\t:href=\"href \|\| routerLinkHref \|\| '#'\"\n\t\t\t\t\t:target=\"isExternal(href) ? '_blank' : undefined\"\n\t\t\t\t\t:title=\"title \|\| name\"\n\t\t\t\t\t@blur=\"handleBlur\"\n\t\t\t\t\t@click=\"onClick($event, navigate, routerLinkHref)\"\n\t\t\t\t\t@focus=\"handleFocus\"\n\t\t\t\t\t@keydown.tab.exact=\"handleTab\">\n\n\t\t\t\t\t<!-- icon if not collapsible -->\n\t\t\t\t\t<!-- never show the icon over the collapsible if mobile -->\n\t\t\t\t\t<div :class=\"{ [icon]: icon }\"\n\t\t\t\t\t\tclass=\"app-navigation-entry-icon\">\n\t\t\t\t\t\t<NcLoadingIcon v-if=\"loading\" />\n\t\t\t\t\t\t<!-- @slot Slot for the optional leading icon -->\n\t\t\t\t\t\t<slot v-else name=\"icon\" />\n\t\t\t\t\t</div>\n\t\t\t\t\t<span v-if=\"!editingActive\" class=\"app-navigation-entry__name\">\n\t\t\t\t\t\t{{ name }}\n\t\t\t\t\t</span>\n\t\t\t\t\t<div v-if=\"editingActive\" class=\"editingContainer\">\n\t\t\t\t\t\t<NcInputConfirmCancel ref=\"editingInput\"\n\t\t\t\t\t\t\tv-model=\"editingValue\"\n\t\t\t\t\t\t\t:placeholder=\"editPlaceholder !== '' ? editPlaceholder : name\"\n\t\t\t\t\t\t\t:primary=\"(isActive && to) \|\| active\"\n\t\t\t\t\t\t\t@cancel=\"cancelEditing\"\n\t\t\t\t\t\t\t@confirm=\"handleEditingDone\" />\n\t\t\t\t\t</div>\n\t\t\t\t</a>\n\n\t\t\t\t<!-- undo entry -->\n\t\t\t\t<div v-if=\"undo\" class=\"app-navigation-entry__deleted\">\n\t\t\t\t\t<div class=\"app-navigation-entry__deleted-description\">\n\t\t\t\t\t\t{{ name }}\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\n\t\t\t\t<!-- Counter and Actions -->\n\t\t\t\t<div v-if=\"hasUtils && !editingActive\"\n\t\t\t\t\tclass=\"app-navigation-entry__utils\"\n\t\t\t\t\t:class=\"{'app-navigation-entry__utils--display-actions': forceDisplayActions \|\| menuOpenLocalValue \|\| menuOpen }\">\n\t\t\t\t\t<div v-if=\"$slots.counter\"\n\t\t\t\t\t\tclass=\"app-navigation-entry__counter-wrapper\">\n\t\t\t\t\t\t<!-- @slot Slot for the `NcCounterBubble` -->\n\t\t\t\t\t\t<slot name=\"counter\" />\n\t\t\t\t\t</div>\n\t\t\t\t\t<NcActions v-if=\"$slots.actions \|\| (editable && !editingActive) \|\| undo\"\n\t\t\t\t\t\tref=\"actions\"\n\t\t\t\t\t\t:inline=\"inlineActions\"\n\t\t\t\t\t\tclass=\"app-navigation-entry__actions\"\n\t\t\t\t\t\tcontainer=\"#app-navigation-vue\"\n\t\t\t\t\t\t:boundaries-element=\"actionsBoundariesElement\"\n\t\t\t\t\t\t:placement=\"menuPlacement\"\n\t\t\t\t\t\t:open=\"menuOpen\"\n\t\t\t\t\t\t:type=\"(isActive && to) \|\| active ? 'primary' : null\"\n\t\t\t\t\t\t:force-menu=\"forceMenu\"\n\t\t\t\t\t\t:default-icon=\"menuIcon\"\n\t\t\t\t\t\t@update:open=\"onMenuToggle\">\n\t\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t\t<!-- @slot Slot for the custom menu icon -->\n\t\t\t\t\t\t\t<slot name=\"menu-icon\" />\n\t\t\t\t\t\t</template>\n\t\t\t\t\t\t<NcActionButton v-if=\"editable && !editingActive\"\n\t\t\t\t\t\t\t:aria-label=\"editButtonAriaLabel\"\n\t\t\t\t\t\t\t@click=\"handleEdit\">\n\t\t\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t\t\t<Pencil :size=\"20\" />\n\t\t\t\t\t\t\t</template>\n\t\t\t\t\t\t\t{{ editLabel }}\n\t\t\t\t\t\t</NcActionButton>\n\t\t\t\t\t\t<NcActionButton v-if=\"undo\"\n\t\t\t\t\t\t\t:aria-label=\"undoButtonAriaLabel\"\n\t\t\t\t\t\t\t@click=\"handleUndo\">\n\t\t\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t\t\t<Undo :size=\"20\" />\n\t\t\t\t\t\t\t</template>\n\t\t\t\t\t\t</NcActionButton>\n\t\t\t\t\t\t<!-- @slot Slot for additional `NcAction` -->\n\t\t\t\t\t\t<slot name=\"actions\" />\n\t\t\t\t\t</NcActions>\n\t\t\t\t</div>\n\t\t\t\t<NcAppNavigationIconCollapsible v-if=\"collapsible\" :open=\"opened\" @click.prevent.stop=\"toggleCollapse\" />\n\n\t\t\t\t<!-- @slot Slot for anything (virtual) that should be mounted in the component, like a related modal -->\n\t\t\t\t<slot name=\"extra\" />\n\t\t\t</div>\n\t\t</component>\n\t\t<!-- Children elements -->\n\t\t<ul v-if=\"canHaveChildren && hasChildren\" class=\"app-navigation-entry__children\">\n\t\t\t<!-- @slot Slot for children -->\n\t\t\t<slot />\n\t\t</ul>\n\t</li>\n</template>\n\n<script>\nimport NcActions from '../NcActions/index.js'\nimport NcActionButton from '../NcActionButton/index.js'\nimport NcLoadingIcon from '../NcLoadingIcon/index.js'\nimport NcVNodes from '../NcVNodes/index.js'\nimport NcAppNavigationIconCollapsible from './NcAppNavigationIconCollapsible.vue'\nimport { useIsMobile } from '../../composables/useIsMobile/index.js'\nimport NcInputConfirmCancel from './NcInputConfirmCancel.vue'\nimport { t } from '../../l10n.js'\nimport GenRandomId from '../../utils/GenRandomId.js'\n\nimport Pencil from 'vue-material-design-icons/Pencil.vue'\nimport Undo from 'vue-material-design-icons/Undo.vue'\n\nexport default {\n\tname: 'NcAppNavigationItem',\n\n\tcomponents: {\n\t\tNcActions,\n\t\tNcActionButton,\n\t\tNcAppNavigationIconCollapsible,\n\t\tNcInputConfirmCancel,\n\t\tNcLoadingIcon,\n\t\tNcVNodes,\n\t\tPencil,\n\t\tUndo,\n\t},\n\n\tprops: {\n\t\t/\n\t\t If you are not using vue-router you can use the property to set this item as the active navigation entry.\n\t\t * When using vue-router and the `to` property this is set automatically.\n\t\t /\n\t\tactive: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/\n\t\t The main text content of the entry.\n\t\t /\n\t\tname: {\n\t\t\ttype: String,\n\t\t\trequired: true,\n\t\t},\n\n\t\t/\n\t\t The title attribute of the element.\n\t\t /\n\t\ttitle: {\n\t\t\ttype: String,\n\t\t\tdefault: null,\n\t\t},\n\n\t\t/\n\t\t id attribute of the list item element\n\t\t /\n\t\tid: {\n\t\t\ttype: String,\n\t\t\tdefault: () => 'app-navigation-item-' + GenRandomId(),\n\t\t\tvalidator: id => id.trim() !== '',\n\t\t},\n\n\t\t/\n\t\t Refers to the icon on the left, this prop accepts a class\n\t\t * like 'icon-category-enabled'.\n\t\t /\n\t\ticon: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\n\t\t/\n\t\t Displays a loading animated icon on the left of the element\n\t\t * instead of the icon.\n\t\t /\n\t\tloading: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/\n\t\t Passing in a route will make the root element of this\n\t\t * component a `<router-link />` that points to that route.\n\t\t * By leaving this blank, the root element will be a `<li>`.\n\t\t /\n\t\tto: {\n\t\t\ttype: [String, Object],\n\t\t\tdefault: null,\n\t\t},\n\n\t\t/\n\t\t A direct link. This will be used as the `href` attribute.\n\t\t * This will ignore any `to` prop being defined.\n\t\t /\n\t\thref: {\n\t\t\ttype: String,\n\t\t\tdefault: null,\n\t\t},\n\n\t\t/\n\t\t Pass in `true` if you want the matching behaviour to\n\t\t * be non-inclusive: https://router.vuejs.org/api/#exact\n\t\t /\n\t\texact: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\t\t/\n\t\t Gives the possibility to collapse the children elements into the\n\t\t * parent element (true) or expands the children elements (false).\n\t\t /\n\t\tallowCollapse: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/\n\t\t Makes the name of the item editable by providing an `ActionButton`\n\t\t * component that toggles a form\n\t\t /\n\t\teditable: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/\n\t\t Only for 'editable' items, sets label for the edit action button.\n\t\t /\n\t\teditLabel: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\n\t\t/\n\t\t Only for items in 'editable' mode, sets the placeholder text for the editing form.\n\t\t /\n\t\teditPlaceholder: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\n\t\t/\n\t\t Pins the item to the bottom left area, above the settings. Do not\n\t\t * place 'non-pinned' `AppnavigationItem` components below `pinned`\n\t\t * ones.\n\t\t /\n\t\tpinned: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/\n\t\t Puts the item in the 'undo' state.\n\t\t /\n\t\tundo: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/\n\t\t The navigation collapsible state (synced)\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 The actions menu open state (synced)\n\t\t /\n\t\tmenuOpen: {\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 The action's menu default icon\n\t\t /\n\t\tmenuIcon: {\n\t\t\ttype: String,\n\t\t\tdefault: undefined,\n\t\t},\n\n\t\t/\n\t\t The action's menu direction\n\t\t /\n\t\tmenuPlacement: {\n\t\t\ttype: String,\n\t\t\tdefault: 'bottom',\n\t\t},\n\n\t\t/\n\t\t Entry aria details\n\t\t /\n\t\tariaDescription: {\n\t\t\ttype: String,\n\t\t\tdefault: null,\n\t\t},\n\n\t\t/\n\t\t To be used only when the elements in the actions menu are very important\n\t\t /\n\t\tforceDisplayActions: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/\n\t\t Number of action items outside the menu\n\t\t /\n\t\tinlineActions: {\n\t\t\ttype: Number,\n\t\t\tdefault: 0,\n\t\t},\n\t},\n\n\temits: [\n\t\t'update:menuOpen',\n\t\t'update:open',\n\t\t'update:name',\n\t\t'click',\n\t\t'undo',\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\teditingValue: '',\n\t\t\topened: this.open, // Collapsible state\n\t\t\teditingActive: false,\n\t\t\thasChildren: false,\n\t\t\t/\n\t\t\t Tracks the open state of the actions menu\n\t\t\t /\n\t\t\tmenuOpenLocalValue: false,\n\t\t\tfocused: false,\n\t\t\tcollapsible: false,\n\t\t}\n\t},\n\n\tcomputed: {\n\t\tisRouterLink() {\n\t\t\treturn this.to && !this.href\n\t\t},\n\n\t\t// Checks if the component is already a children of another\n\t\t// instance of AppNavigationItem\n\t\tcanHaveChildren() {\n\t\t\tif (this.$parent.$options._componentTag === 'AppNavigationItem') {\n\t\t\t\treturn false\n\t\t\t} else {\n\t\t\t\treturn true\n\t\t\t}\n\t\t},\n\n\t\thasUtils() {\n\t\t\tif (this.$slots.actions \|\| this.$slots.counter \|\| this.editable \|\| this.undo) {\n\t\t\t\treturn true\n\t\t\t}\n\t\t\treturn false\n\t\t},\n\n\t\teditButtonAriaLabel() {\n\t\t\treturn this.editLabel ? this.editLabel : t('Edit item')\n\t\t},\n\n\t\tundoButtonAriaLabel() {\n\t\t\treturn t('Undo changes')\n\t\t},\n\t\tactionsBoundariesElement() {\n\t\t\treturn document.querySelector('#content-vue') \|\| undefined\n\t\t},\n\t},\n\n\twatch: {\n\t\topen(newVal) {\n\t\t\tthis.opened = newVal\n\t\t},\n\t},\n\n\tcreated() {\n\t\tthis.updateSlotInfo()\n\t},\n\n\tbeforeUpdate() {\n\t\tthis.updateSlotInfo()\n\t},\n\n\tmethods: {\n\t\t// sync opened menu state with prop\n\t\tonMenuToggle(state) {\n\t\t\tthis.$emit('update:menuOpen', state)\n\t\t\tthis.menuOpenLocalValue = state\n\t\t},\n\t\t// toggle the collapsible state\n\t\ttoggleCollapse() {\n\t\t\tthis.opened = !this.opened\n\t\t\tthis.$emit('update:open', this.opened)\n\t\t},\n\n\t\t/\n\t\t Handle link click\n\t\t \n\t\t @param {PointerEvent} event - Native click event\n\t\t * @param {Function} [navigate] - VueRouter link's navigate if any\n\t\t * @param {string} [routerLinkHref] - VueRouter link's href\n\t\t /\n\t\tonClick(event, navigate, routerLinkHref) {\n\t\t\t// Always forward native event\n\t\t\tthis.$emit('click', event)\n\t\t\t// Do not navigate with control keys - it is opening in a new tab\n\t\t\tif (event.metaKey \|\| event.altKey \|\| event.ctrlKey \|\| event.shiftKey) {\n\t\t\t\treturn\n\t\t\t}\n\t\t\t// Prevent default link behaviour if it's a router-link and navigate manually\n\t\t\tif (routerLinkHref) {\n\t\t\t\tnavigate?.(event)\n\t\t\t\tevent.preventDefault()\n\t\t\t}\n\t\t},\n\n\t\t// Edition methods\n\t\thandleEdit() {\n\t\t\tthis.editingValue = this.name\n\t\t\tthis.editingActive = true\n\t\t\tthis.onMenuToggle(false)\n\t\t\tthis.$nextTick(() => {\n\t\t\t\tthis.$refs.editingInput.focusInput()\n\t\t\t})\n\t\t},\n\t\tcancelEditing() {\n\t\t\tthis.editingActive = false\n\t\t},\n\t\thandleEditingDone() {\n\t\t\tthis.$emit('update:name', this.editingValue)\n\t\t\tthis.editingValue = ''\n\t\t\tthis.editingActive = false\n\t\t},\n\n\t\t// Undo methods\n\t\thandleUndo() {\n\t\t\tthis.$emit('undo')\n\t\t},\n\n\t\tupdateSlotInfo() {\n\t\t\tthis.hasChildren = !!this.$slots.default\n\t\t\tthis.collapsible = this.allowCollapse && !!this.$slots.default\n\t\t},\n\n\t\t/\n\t\t Show actions upon focus\n\t\t /\n\t\thandleFocus() {\n\t\t\tthis.focused = true\n\t\t},\n\n\t\thandleBlur() {\n\t\t\tthis.focused = false\n\t\t},\n\n\t\t/\n\t\t This method checks if the root element of the component is focused and\n\t\t * if that's the case it focuses the actions button if available\n\t\t \n\t\t @param {Event} e the keydown event\n\t\t /\n\t\thandleTab(e) {\n\t\t\t// If there is no actions menu, do nothing.\n\t\t\tif (!this.$refs.actions) {\n\t\t\t\treturn\n\t\t\t}\n\t\t\tif (this.focused) {\n\t\t\t\te.preventDefault()\n\t\t\t\tthis.$refs.actions.$refs.menuButton.$el.focus()\n\t\t\t\tthis.focused = false\n\t\t\t} else {\n\t\t\t\tthis.$refs.actions.$refs.menuButton.$el.blur()\n\t\t\t}\n\t\t},\n\n\t\t/\n\t\t Is this an external link\n\t\t \n\t\t @param {string} href The link to check\n\t\t * @return {boolean} Whether it is external or not\n\t\t */\n\t\tisExternal(href) {\n\t\t\t// Match any protocol\n\t\t\treturn href && href.match(/[a-z]+:\\/\\//i)\n\t\t},\n\t},\n}\n</script>\n\n<style scoped lang=\"scss\">\n@import '../../assets/NcAppNavigationItem';\n</style>\n"],"names":["_sfc_main"],"mappings":"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","x_google_ignoreList":[1,2]}