@nextcloud/vue 9.0.0-alpha.5 → 9.0.0-alpha.7

package/dist/chunks/NcAppNavigationItem-C7bIZuo2.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"NcAppNavigationItem-C7bIZuo2.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  - SPDX-FileCopyrightText: 2019 Nextcloud GmbH and Nextcloud contributors\n  - SPDX-License-Identifier: AGPL-3.0-or-later\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 { t } from '../../l10n.js'\nimport NcButton from '../NcButton/index.ts'\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\tinset-inline-end: 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  - SPDX-FileCopyrightText: 2019 Nextcloud GmbH and Nextcloud contributors\n  - SPDX-License-Identifier: AGPL-3.0-or-later\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.vue'\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.vue'\n\timport Delete from 'vue-material-design-icons/Delete.vue'\n\timport OpenInNew from 'vue-material-design-icons/OpenInNew.vue'\n\timport Pencil from 'vue-material-design-icons/Pencil.vue'\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\tmethods: {\n\t\t\talert(msg) {\n\t\t\t\talert(msg)\n\t\t\t},\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 :count=\"90\" />\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.vue'\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 :count=\"90\" />\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 #default>\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.vue'\n\timport Delete from 'vue-material-design-icons/Delete.vue'\n\timport OpenInNew from 'vue-material-design-icons/OpenInNew.vue'\n\timport Pencil from 'vue-material-design-icons/Pencil.vue'\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\tmethods: {\n\t\t\talert(msg) {\n\t\t\t\talert(msg)\n\t\t\t},\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.vue'\n\n\texport default {\n\t\tcomponents: {\n\t\t\tFolder,\n\t\t},\n\t\tmethods: {\n\t\t\talert(msg) {\n\t\t\t\talert(msg)\n\t\t\t},\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```vue\n\t<template>\n\t\t<ul>\n\t\t\t<NcAppNavigationItem :undo=\"true\" name=\"Deleted important entry\" @undo=\"alert('undo delete')\" />\n\t\t</ul>\n\t</template>\n\t<script>\n\texport default {\n\t\tmethods: {\n\t\t\talert(msg) {\n\t\t\t\talert(msg)\n\t\t\t},\n\t\t},\n\t}\n\t</script>\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': allowCollapse && !!$slots.default,\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\tv-bind=\"{ ...isRouterLink && { custom: true, to } }\">\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=\"!!$slots.default ? 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 class=\"app-navigation-entry__name\" :class=\"{ 'hidden-visually': editingActive }\">\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=\"(!!$slots.actions || !!$slots.counter || editable || undo) && !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=\"allowCollapse && !!$slots.default\" :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 && !!$slots.default\" 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 * 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\tactionsBoundariesElement: undefined,\n\t\t\teditingValue: '',\n\t\t\topened: this.open, // Collapsible state\n\t\t\teditingActive: 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}\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\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},\n\n\twatch: {\n\t\topen(newVal) {\n\t\t\tthis.opened = newVal\n\t\t},\n\t},\n\n\tmounted() {\n\t\tthis.actionsBoundariesElement = document.querySelector('#content-vue') || undefined\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\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","_createBlock","_normalizeClass","_hoisted_1","_hoisted_2","_hoisted_3","_createElementBlock","_mergeProps","_createElementVNode","_hoisted_4","_createCommentVNode","NcVNodes","_resolveDynamicComponent","_normalizeProps","_guardReactiveProps","_withCtx","_withKeys","_withModifiers","_openBlock","_renderSlot","_createVNode","_toDisplayString","_createTextVNode"],"mappings":"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","x_google_ignoreList":[1,2]}

package/dist/chunks/NcAppNavigationList-DX_Yo23V.mjs

@@ -0,0 +1,16 @@
+import '../assets/NcAppNavigationList-CLLHyHIn.css';
+import { createElementBlock, openBlock, renderSlot } from "vue";
+import { _ as _export_sfc } from "./_plugin-vue_export-helper-1tPrXgE0.mjs";
+const _sfc_main = {
+  name: "NcAppNavigationList"
+};
+const _hoisted_1 = { class: "app-navigation-list" };
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  return openBlock(), createElementBlock("ul", _hoisted_1, [
+    renderSlot(_ctx.$slots, "default", {}, void 0, true)
+  ]);
+}
+const NcAppNavigationList = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__scopeId", "data-v-57437e4a"]]);
+export {
+  NcAppNavigationList as N
+};

package/dist/chunks/NcAppNavigationList-DX_Yo23V.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"NcAppNavigationList-DX_Yo23V.mjs","sources":["../../src/components/NcAppNavigationList/NcAppNavigationList.vue"],"sourcesContent":["<!--\n  - SPDX-FileCopyrightText: 2024 Nextcloud GmbH and Nextcloud contributors\n  - SPDX-License-Identifier: AGPL-3.0-or-later\n-->\n\n<docs>\n### Description\n\nList wrapper for use in NcAppNavigation.\n\n#### Example\n\nUsage with NcAppNavigationCaption as a heading.\n\n```vue\n<NcAppNavigation>\n\t<NcAppNavigationList>\n\t\t<NcAppNavigationItem name=\"First\" />\n\t\t<NcAppNavigationItem name=\"Second\" />\n\t\t<NcAppNavigationItem name=\"Third\" />\n\t</NcAppNavigationList>\n\t<NcAppNavigationCaption name=\"Sections\" is-heading />\n\t<NcAppNavigationList>\n\t\t<NcAppNavigationItem name=\"Foo\" />\n\t\t<NcAppNavigationItem name=\"Bar\" />\n\t\t<NcAppNavigationItem name=\"Baz\" />\n\t</NcAppNavigationList>\n</NcAppNavigation>\n```\n</docs>\n\n<template>\n\t<ul class=\"app-navigation-list\">\n\t\t<slot />\n\t</ul>\n</template>\n\n<script>\nexport default {\n\tname: 'NcAppNavigationList',\n}\n</script>\n\n<style lang=\"scss\" scoped>\n.app-navigation-list {\n\tposition: relative;\n\twidth: 100%;\n\toverflow-x: hidden;\n\toverflow-y: auto;\n\tdisplay: flex;\n\tflex-direction: column;\n\tgap: var(--default-grid-baseline, 4px);\n\tpadding: var(--app-navigation-padding);\n}\n</style>\n"],"names":["_openBlock","_createElementBlock","_renderSlot"],"mappings":";;AAsCA,MAAK,YAAU;AAAA,EACd,MAAM;AACP;AARK,MAAA,aAAA,EAAA,OAAM,sBAAqB;;AAA/B,SAAAA,UAAA,GAAAC,mBAEK,MAFL,YAEK;AAAA,IADJC,WAAQ,KAAA,QAAA,WAAA,CAAA,GAAA,QAAA,IAAA;AAAA;;;"}

package/dist/chunks/NcAppNavigationNew-BO-Llutk.mjs

@@ -0,0 +1,57 @@
+import '../assets/NcAppNavigationNew-L_VNZNL4.css';
+import { N as NcButton } from "./NcButton-QmfEsvXC.mjs";
+import { resolveComponent, createElementBlock, openBlock, createVNode, withCtx, createTextVNode, toDisplayString, renderSlot } from "vue";
+import { _ as _export_sfc } from "./_plugin-vue_export-helper-1tPrXgE0.mjs";
+const _sfc_main = {
+  components: {
+    NcButton
+  },
+  props: {
+    buttonId: {
+      type: String,
+      required: false,
+      default: ""
+    },
+    disabled: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+    text: {
+      type: String,
+      required: true
+    },
+    type: {
+      type: String,
+      default: "primary",
+      validator(value) {
+        return ["primary", "secondary", "tertiary"].indexOf(value) !== -1;
+      }
+    }
+  },
+  emits: ["click"]
+};
+const _hoisted_1 = { class: "app-navigation-new" };
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_NcButton = resolveComponent("NcButton");
+  return openBlock(), createElementBlock("div", _hoisted_1, [
+    createVNode(_component_NcButton, {
+      id: $props.buttonId,
+      disabled: $props.disabled,
+      type: $props.type,
+      onClick: _cache[0] || (_cache[0] = ($event) => _ctx.$emit("click"))
+    }, {
+      icon: withCtx(() => [
+        renderSlot(_ctx.$slots, "icon", {}, void 0, true)
+      ]),
+      default: withCtx(() => [
+        createTextVNode(" " + toDisplayString($props.text), 1)
+      ]),
+      _: 3
+    }, 8, ["id", "disabled", "type"])
+  ]);
+}
+const NcAppNavigationNew = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__scopeId", "data-v-1eae9ec9"]]);
+export {
+  NcAppNavigationNew as N
+};

package/dist/chunks/NcAppNavigationNew-BO-Llutk.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"NcAppNavigationNew-BO-Llutk.mjs","sources":["../../src/components/NcAppNavigationNew/NcAppNavigationNew.vue"],"sourcesContent":["<!--\n  - SPDX-FileCopyrightText: 2018 Nextcloud GmbH and Nextcloud contributors\n  - SPDX-License-Identifier: AGPL-3.0-or-later\n-->\n\n <docs>\n### Usage\n\n ```\n <template>\n\t<NcAppNavigationNew text=\"New Element\">\n\t\t<template #icon>\n\t\t\t<Plus :size=\"20\" />\n\t\t</template>\n\t</NcAppNavigationNew>\n </template>\n <script>\n import Plus from 'vue-material-design-icons/Plus'\n\n export default {\n\tcomponents: {\n\t\tPlus,\n\t},\n }\n </script>\n ```\n </docs>\n\n<template>\n\t<div class=\"app-navigation-new\">\n\t\t<NcButton :id=\"buttonId\"\n\t\t\t:disabled=\"disabled\"\n\t\t\t:type=\"type\"\n\t\t\t@click=\"$emit('click')\">\n\t\t\t<template #icon>\n\t\t\t\t<slot name=\"icon\" />\n\t\t\t</template>\n\t\t\t{{ text }}\n\t\t</NcButton>\n\t</div>\n</template>\n\n<script>\nimport NcButton from '../NcButton/index.ts'\n\nexport default {\n\tcomponents: {\n\t\tNcButton,\n\t},\n\tprops: {\n\t\tbuttonId: {\n\t\t\ttype: String,\n\t\t\trequired: false,\n\t\t\tdefault: '',\n\t\t},\n\t\tdisabled: {\n\t\t\ttype: Boolean,\n\t\t\trequired: false,\n\t\t\tdefault: false,\n\t\t},\n\t\ttext: {\n\t\t\ttype: String,\n\t\t\trequired: true,\n\t\t},\n\t\ttype: {\n\t\t\ttype: String,\n\t\t\tdefault: 'primary',\n\t\t\tvalidator(value) {\n\t\t\t\treturn ['primary', 'secondary', 'tertiary'].indexOf(value) !== -1\n\t\t\t},\n\t\t},\n\t},\n\n\temits: ['click'],\n}\n</script>\n\n<style lang=\"scss\" scoped>\n/* 'New' button */\n.app-navigation-new {\n\tdisplay: block;\n\tpadding: calc(var(--default-grid-baseline, 4px) * 2);\n\tbutton {\n\t\twidth: 100%;\n\t}\n}\n</style>\n"],"names":["_openBlock","_createElementBlock","_createVNode","_renderSlot","_withCtx","_createTextVNode"],"mappings":";;;AA6CA,MAAK,YAAU;AAAA,EACd,YAAY;AAAA,IACX;AAAA,EACA;AAAA,EACD,OAAO;AAAA,IACN,UAAU;AAAA,MACT,MAAM;AAAA,MACN,UAAU;AAAA,MACV,SAAS;AAAA,IACT;AAAA,IACD,UAAU;AAAA,MACT,MAAM;AAAA,MACN,UAAU;AAAA,MACV,SAAS;AAAA,IACT;AAAA,IACD,MAAM;AAAA,MACL,MAAM;AAAA,MACN,UAAU;AAAA,IACV;AAAA,IACD,MAAM;AAAA,MACL,MAAM;AAAA,MACN,SAAS;AAAA,MACT,UAAU,OAAO;AAChB,eAAO,CAAC,WAAW,aAAa,UAAU,EAAE,QAAQ,KAAK,MAAM;AAAA,MAC/D;AAAA,IACD;AAAA,EACD;AAAA,EAED,OAAO,CAAC,OAAO;AAChB;AA7CM,MAAA,aAAA,EAAA,OAAM,qBAAoB;;;AAA/B,SAAAA,UAAA,GAAAC,mBAUM,OAVN,YAUM;AAAA,IATLC,YAQW,qBAAA;AAAA,MARA,IAAI,OAAQ;AAAA,MACrB,UAAU,OAAQ;AAAA,MAClB,MAAM,OAAI;AAAA,MACV,+CAAO,KAAK,MAAA,OAAA;AAAA;MACF,cACV,MAAoB;AAAA,QAApBC,WAAoB,KAAA,QAAA,QAAA,CAAA,GAAA,QAAA,IAAA;AAAA;MAnCxB,SAAAC,QAoCc,MACX;AAAA,QArCHC,gBAoCc,sBACR,OAAI,IAAA,GAAA,CAAA;AAAA;MArCV,GAAA;AAAA;;;;"}

package/dist/chunks/NcAppNavigationNewItem-D7CYmmOm.mjs

@@ -0,0 +1,120 @@
+import '../assets/NcAppNavigationNewItem-rCrG0Uuo.css';
+import { N as NcInputConfirmCancel } from "./NcInputConfirmCancel-xnrPAGac.mjs";
+import { N as NcLoadingIcon } from "./NcLoadingIcon-CsMn1bFR.mjs";
+import { resolveComponent, createElementBlock, openBlock, normalizeClass, createElementVNode, createCommentVNode, createBlock, renderSlot, toDisplayString, createVNode } from "vue";
+import { _ as _export_sfc } from "./_plugin-vue_export-helper-1tPrXgE0.mjs";
+const _sfc_main = {
+  name: "NcAppNavigationNewItem",
+  components: {
+    NcInputConfirmCancel,
+    NcLoadingIcon
+  },
+  props: {
+    /**
+     * The name of the element.
+     */
+    name: {
+      type: String,
+      required: true
+    },
+    /**
+     * Refers to the icon on the left, this prop accepts a class
+     * like 'icon-category-enabled'.
+     */
+    icon: {
+      type: String,
+      default: ""
+    },
+    /**
+     * Displays a loading animated icon on the left of the element
+     * instead of the icon.
+     */
+    loading: {
+      type: Boolean,
+      default: false
+    },
+    /**
+     * Only for 'editable' items, sets label for the edit action button.
+     */
+    editLabel: {
+      type: String,
+      default: ""
+    },
+    /**
+     * Sets the placeholder text for the editing form.
+     */
+    editPlaceholder: {
+      type: String,
+      default: ""
+    }
+  },
+  emits: ["new-item"],
+  data() {
+    return {
+      newItemValue: "",
+      newItemActive: false
+    };
+  },
+  methods: {
+    handleNewItem() {
+      if (!this.loading) {
+        this.newItemActive = true;
+        this.$nextTick(() => {
+          this.$refs.newItemInput.focusInput();
+        });
+      }
+    },
+    cancelNewItem() {
+      this.newItemActive = false;
+    },
+    handleNewItemDone() {
+      this.$emit("new-item", this.newItemValue);
+      this.newItemValue = "";
+      this.newItemActive = false;
+    }
+  }
+};
+const _hoisted_1 = ["title"];
+const _hoisted_2 = {
+  key: 1,
+  class: "newItemContainer"
+};
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_NcLoadingIcon = resolveComponent("NcLoadingIcon");
+  const _component_NcInputConfirmCancel = resolveComponent("NcInputConfirmCancel");
+  return openBlock(), createElementBlock("li", {
+    class: normalizeClass([{
+      "app-navigation-entry--newItemActive": $data.newItemActive
+    }, "app-navigation-entry"])
+  }, [
+    createElementVNode("button", {
+      class: "app-navigation-entry-button",
+      onClick: _cache[1] || (_cache[1] = (...args) => $options.handleNewItem && $options.handleNewItem(...args))
+    }, [
+      createElementVNode("span", {
+        class: normalizeClass([{ [$props.icon]: !$props.loading }, "app-navigation-entry-icon"])
+      }, [
+        $props.loading ? (openBlock(), createBlock(_component_NcLoadingIcon, { key: 0 })) : renderSlot(_ctx.$slots, "icon", { key: 1 }, void 0, true)
+      ], 2),
+      !$data.newItemActive ? (openBlock(), createElementBlock("span", {
+        key: 0,
+        class: "app-navigation-new-item__name",
+        title: $props.name
+      }, toDisplayString($props.name), 9, _hoisted_1)) : createCommentVNode("", true),
+      $data.newItemActive ? (openBlock(), createElementBlock("span", _hoisted_2, [
+        createVNode(_component_NcInputConfirmCancel, {
+          ref: "newItemInput",
+          modelValue: $data.newItemValue,
+          "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => $data.newItemValue = $event),
+          placeholder: $props.editPlaceholder !== "" ? $props.editPlaceholder : $props.name,
+          onCancel: $options.cancelNewItem,
+          onConfirm: $options.handleNewItemDone
+        }, null, 8, ["modelValue", "placeholder", "onCancel", "onConfirm"])
+      ])) : createCommentVNode("", true)
+    ])
+  ], 2);
+}
+const NcAppNavigationNewItem = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__scopeId", "data-v-46fee9ac"]]);
+export {
+  NcAppNavigationNewItem as N
+};

package/dist/chunks/NcAppNavigationNewItem-D7CYmmOm.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"NcAppNavigationNewItem-D7CYmmOm.mjs","sources":["../../src/components/NcAppNavigationNewItem/NcAppNavigationNewItem.vue"],"sourcesContent":["<!--\n  - SPDX-FileCopyrightText: 2020 Nextcloud GmbH and Nextcloud contributors\n  - SPDX-License-Identifier: AGPL-3.0-or-later\n-->\n\n<docs>\n### Usage\n\n#### New Item element\n```vue\n\t<template>\n\t\t<NcAppNavigationNewItem name=\"New Item\" @new-item=\"function(value){alert(value)}\">\n\t\t\t<template #icon>\n\t\t\t\t<Plus :size=\"20\" />\n\t\t\t</template>\n\t\t</NcAppNavigationNewItem>\n\t</template>\n\t<script>\n\timport Plus from 'vue-material-design-icons/Plus'\n\n\texport default {\n\t\tcomponents: {\n\t\t\tPlus,\n\t\t},\n\t}\n\t</script>\n```\n\n#### New Item element with a loading animation instead of the icon\n```vue\n\t<template>\n\t\t<NcAppNavigationNewItem name=\"New Item\" :loading=\"true\">\n\t\t\t<template #icon>\n\t\t\t\t<Plus :size=\"20\" />\n\t\t\t</template>\n\t\t</NcAppNavigationNewItem>\n\t</template>\n\t<script>\n\timport Plus from 'vue-material-design-icons/Plus'\n\n\texport default {\n\t\tcomponents: {\n\t\t\tPlus,\n\t\t},\n\t}\n\t</script>\n```\n</docs>\n<template>\n\t<li :class=\"{\n\t\t\t'app-navigation-entry--newItemActive': newItemActive,\n\t\t}\"\n\t\tclass=\"app-navigation-entry\">\n\t\t<!-- New Item -->\n\t\t<button class=\"app-navigation-entry-button\" @click=\"handleNewItem\">\n\t\t\t<span :class=\"{ [icon]: !loading }\"\n\t\t\t\tclass=\"app-navigation-entry-icon\">\n\t\t\t\t<NcLoadingIcon v-if=\"loading\" />\n\t\t\t\t<slot v-else name=\"icon\" />\n\t\t\t</span>\n\n\t\t\t<span v-if=\"!newItemActive\" class=\"app-navigation-new-item__name\" :title=\"name\">\n\t\t\t\t{{ name }}\n\t\t\t</span>\n\n\t\t\t<!-- new Item input -->\n\t\t\t<span v-if=\"newItemActive\" class=\"newItemContainer\">\n\t\t\t\t<NcInputConfirmCancel ref=\"newItemInput\"\n\t\t\t\t\tv-model=\"newItemValue\"\n\t\t\t\t\t:placeholder=\"editPlaceholder !== '' ? editPlaceholder : name\"\n\t\t\t\t\t@cancel=\"cancelNewItem\"\n\t\t\t\t\t@confirm=\"handleNewItemDone\" />\n\t\t\t</span>\n\t\t</button>\n\t</li>\n</template>\n\n<script>\nimport NcInputConfirmCancel from '../NcAppNavigationItem/NcInputConfirmCancel.vue'\nimport NcLoadingIcon from '../NcLoadingIcon/index.js'\n\nexport default {\n\tname: 'NcAppNavigationNewItem',\n\n\tcomponents: {\n\t\tNcInputConfirmCancel,\n\t\tNcLoadingIcon,\n\t},\n\n\tprops: {\n\t\t/**\n\t\t * The name of the element.\n\t\t */\n\t\tname: {\n\t\t\ttype: String,\n\t\t\trequired: true,\n\t\t},\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\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\t\t/**\n\t\t * 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\t},\n\n\temits: ['new-item'],\n\n\tdata() {\n\t\treturn {\n\t\t\tnewItemValue: '',\n\t\t\tnewItemActive: false,\n\t\t}\n\t},\n\n\tmethods: {\n\t\thandleNewItem() {\n\t\t\tif (!this.loading) {\n\t\t\t\tthis.newItemActive = true\n\t\t\t\tthis.$nextTick(() => {\n\t\t\t\t\tthis.$refs.newItemInput.focusInput()\n\t\t\t\t})\n\t\t\t}\n\t\t},\n\t\tcancelNewItem() {\n\t\t\tthis.newItemActive = false\n\t\t},\n\t\thandleNewItemDone() {\n\t\t\tthis.$emit('new-item', this.newItemValue)\n\t\t\tthis.newItemValue = ''\n\t\t\tthis.newItemActive = false\n\t\t},\n\t},\n}\n</script>\n\n<style scoped lang=\"scss\">\n@import '../../assets/NcAppNavigationItem';\n\n.app-navigation-new-item__name {\n\toverflow: hidden;\n\tmax-width: 100%;\n\twhite-space: nowrap;\n\ttext-overflow: ellipsis;\n\tpadding-inline-start: 7px;\n\tfont-size: 14px;\n}\n\n.newItemContainer {\n\twidth: calc(100% - var(--default-clickable-area));\n\tmargin: auto;\n}\n</style>\n"],"names":["_createElementBlock","_normalizeClass","_createElementVNode","_openBlock","_createBlock","_renderSlot","_toDisplayString","_createCommentVNode","_createVNode"],"mappings":";;;;AAiFA,MAAK,YAAU;AAAA,EACd,MAAM;AAAA,EAEN,YAAY;AAAA,IACX;AAAA,IACA;AAAA,EACA;AAAA,EAED,OAAO;AAAA;AAAA;AAAA;AAAA,IAIN,MAAM;AAAA,MACL,MAAM;AAAA,MACN,UAAU;AAAA,IACV;AAAA;AAAA;AAAA;AAAA;AAAA,IAKD,MAAM;AAAA,MACL,MAAM;AAAA,MACN,SAAS;AAAA,IACT;AAAA;AAAA;AAAA;AAAA;AAAA,IAMD,SAAS;AAAA,MACR,MAAM;AAAA,MACN,SAAS;AAAA,IACT;AAAA;AAAA;AAAA;AAAA,IAID,WAAW;AAAA,MACV,MAAM;AAAA,MACN,SAAS;AAAA,IACT;AAAA;AAAA;AAAA;AAAA,IAID,iBAAiB;AAAA,MAChB,MAAM;AAAA,MACN,SAAS;AAAA,IACT;AAAA,EACD;AAAA,EAED,OAAO,CAAC,UAAU;AAAA,EAElB,OAAO;AACN,WAAO;AAAA,MACN,cAAc;AAAA,MACd,eAAe;AAAA,IAChB;AAAA,EACA;AAAA,EAED,SAAS;AAAA,IACR,gBAAgB;AACf,UAAI,CAAC,KAAK,SAAS;AAClB,aAAK,gBAAgB;AACrB,aAAK,UAAU,MAAM;AACpB,eAAK,MAAM,aAAa,WAAU;AAAA,QAClC,CAAA;AAAA,MACF;AAAA,IACA;AAAA,IACD,gBAAgB;AACf,WAAK,gBAAgB;AAAA,IACrB;AAAA,IACD,oBAAoB;AACnB,WAAK,MAAM,YAAY,KAAK,YAAY;AACxC,WAAK,eAAe;AACpB,WAAK,gBAAgB;AAAA,IACrB;AAAA,EACD;AACF;AA7JA,MAAA,aAAA,CAAA,OAAA;;EAAA,KAAA;AAAA,EAkE8B,OAAM;;;;;sBAjBnCA,mBAyBK,MAAA;AAAA,IAzBA,OAjDNC,eAAA,CAAA;AAAA,6CAiDyD,MAAa;AAAA,OAG9D,sBAAsB,CAAA;AAAA;IAE5BC,mBAmBS,UAAA;AAAA,MAnBD,OAAM;AAAA,MAA+B,gDAAO,SAAa,iBAAA,SAAA,cAAA,GAAA,IAAA;AAAA;MAChEA,mBAIO,QAAA;AAAA,QAJA,OAvDVD,eAuDoB,CAAA,EAAA,CAAA,OAAA,IAAI,GAAI,CAAA,OAAA,WAClB,2BAA2B,CAAA;AAAA;QACZ,OAAO,WAA5BE,UAAA,GAAAC,YAAgC,4BAzDpC,KAAA,EAAA,CAAA,KA0DIC,WAA2B,uBA1D/B,KAAA,EAAA,GAAA,QAAA,IAAA;AAAA;OA6DgB,MAAa,8BAA1BL,mBAEO,QAAA;AAAA,QA/DV,KAAA;AAAA,QA6D+B,OAAM;AAAA,QAAiC,OAAO,OAAI;AAAA,MAC1E,GAAAM,gBAAA,OAAA,IAAI,GA9DX,GAAA,UAAA,KAAAC,mBAAA,IAAA,IAAA;AAAA,MAkEe,MAAa,iBAAzBJ,aAAAH,mBAMO,QANP,YAMO;AAAA,QALNQ,YAIgC,iCAAA;AAAA,UAJV,KAAI;AAAA,UAnE9B,YAoEc,MAAY;AAAA,UApE1B,uBAAA,OAAA,CAAA,MAAA,OAAA,CAAA,IAAA,YAoEc,MAAY,eAAA;AAAA,UACpB,aAAa,OAAA,oBAAyB,KAAA,OAAA,kBAAkB,OAAI;AAAA,UAC5D,UAAQ,SAAa;AAAA,UACrB,WAAS,SAAiB;AAAA;YAvEhCD,mBAAA,IAAA,IAAA;AAAA;;;;"}

package/dist/chunks/NcAppNavigationSearch-DLbzvkkq.mjs

@@ -0,0 +1,104 @@
+import '../assets/NcAppNavigationSearch-Bsr4esEc.css';
+import { defineComponent, mergeModels, useModel, useSlots, ref, useTemplateRef, watch, createElementBlock, openBlock, normalizeClass, createVNode, createCommentVNode, unref, withCtx, renderSlot, nextTick } from "vue";
+import { useFocusWithin } from "@vueuse/core";
+import { r as register, a as t } from "./_l10n-BEP_UzXI.mjs";
+import { C as Close } from "./Close-idsVwGrC.mjs";
+import { N as NcInputField } from "./NcInputField-CzC820tG.mjs";
+import { _ as _export_sfc } from "./_plugin-vue_export-helper-1tPrXgE0.mjs";
+register();
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "NcAppNavigationSearch",
+  props: /* @__PURE__ */ mergeModels({
+    /**
+     * Text used to label the search input
+     */
+    label: {
+      type: String,
+      default: t("Search…")
+    },
+    /**
+     * Placeholder of the search input
+     * By default the value of `label` is used.
+     */
+    placeholder: {
+      type: String,
+      default: null
+    }
+  }, {
+    "modelValue": { default: "" },
+    "modelModifiers": {}
+  }),
+  emits: ["update:modelValue"],
+  setup(__props) {
+    const model = useModel(__props, "modelValue");
+    const slots = useSlots();
+    const inputElement = ref();
+    const { focused: inputHasFocus } = useFocusWithin(inputElement);
+    const transitionTimeout = Number.parseInt(window.getComputedStyle(window.document.body).getPropertyValue("--animation-quick")) || 100;
+    const actionsContainer = useTemplateRef("actionsContainer");
+    const hasActions = () => !!slots.actions?.({});
+    const showActions = ref(true);
+    const timeoutId = ref();
+    const hideActions = ref(false);
+    watch(inputHasFocus, () => {
+      showActions.value = !inputHasFocus.value;
+      window.clearTimeout(timeoutId.value);
+      if (showActions.value) {
+        hideActions.value = false;
+      } else {
+        window.setTimeout(() => {
+          hideActions.value = !showActions.value;
+        }, transitionTimeout);
+      }
+    });
+    function onCloseSearch() {
+      model.value = "";
+      if (hasActions()) {
+        showActions.value = true;
+        nextTick(() => actionsContainer.value?.querySelector("button")?.focus());
+      }
+    }
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", {
+        class: normalizeClass(["app-navigation-search", {
+          "app-navigation-search--has-actions": hasActions()
+        }])
+      }, [
+        createVNode(NcInputField, {
+          ref_key: "inputElement",
+          ref: inputElement,
+          modelValue: model.value,
+          "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => model.value = $event),
+          "aria-label": __props.label,
+          class: "app-navigation-search__input",
+          "label-outside": "",
+          placeholder: __props.placeholder ?? __props.label,
+          "show-trailing-button": "",
+          "trailing-button-label": unref(t)("Clear search"),
+          type: "search",
+          onTrailingButtonClick: onCloseSearch
+        }, {
+          "trailing-button-icon": withCtx(() => [
+            createVNode(Close, { size: 20 })
+          ]),
+          _: 1
+        }, 8, ["modelValue", "aria-label", "placeholder", "trailing-button-label"]),
+        hasActions() ? (openBlock(), createElementBlock("div", {
+          key: 0,
+          ref_key: "actionsContainer",
+          ref: actionsContainer,
+          class: normalizeClass(["app-navigation-search__actions", {
+            "app-navigation-search__actions--hidden": !showActions.value,
+            "hidden-visually": hideActions.value
+          }])
+        }, [
+          renderSlot(_ctx.$slots, "actions", {}, void 0, true)
+        ], 2)) : createCommentVNode("", true)
+      ], 2);
+    };
+  }
+});
+const NcAppNavigationSearch = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-183b9280"]]);
+export {
+  NcAppNavigationSearch as N
+};

package/dist/chunks/NcAppNavigationSearch-DLbzvkkq.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"NcAppNavigationSearch-DLbzvkkq.mjs","sources":["../../src/components/NcAppNavigationSearch/NcAppNavigationSearch.vue"],"sourcesContent":["<!--\n  - SPDX-FileCopyrightText: 2024 Nextcloud GmbH and Nextcloud contributors\n  - SPDX-License-Identifier: AGPL-3.0-or-later\n-->\n\n<docs>\n### Usage\n\n```vue\n<template>\n\t<div class=\"styleguide-wrapper\">\n\t\t<NcContent app-name=\"styleguide-app-navigation\" class=\"content-styleguidist\">\n\t\t\t<NcAppNavigation>\n\t\t\t\t<template #search>\n\t\t\t\t\t<NcAppNavigationSearch v-model=\"searchQuery\">\n\t\t\t\t\t\t<template #actions>\n\t\t\t\t\t\t\t<NcActions aria-label=\"Filters\">\n\t\t\t\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t\t\t\t<IconFilter :size=\"20\" />\n\t\t\t\t\t\t\t\t</template>\n\t\t\t\t\t\t\t\t<NcActionButton>\n\t\t\t\t\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t\t\t\t\t<IconAccount :size=\"20\" />\n\t\t\t\t\t\t\t\t\t</template>\n\t\t\t\t\t\t\t\t\tFilter by name\n\t\t\t\t\t\t\t\t</NcActionButton>\n\t\t\t\t\t\t\t\t<NcActionButton>\n\t\t\t\t\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t\t\t\t\t<IconCalendarAccount :size=\"20\" />\n\t\t\t\t\t\t\t\t\t</template>\n\t\t\t\t\t\t\t\t\tFilter by year\n\t\t\t\t\t\t\t\t</NcActionButton>\n\t\t\t\t\t\t\t</NcActions>\n\t\t\t\t\t\t\t<NcButton aria-label=\"Search globally\" type=\"tertiary\">\n\t\t\t\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t\t\t\t<IconSearchGlobal :size=\"20\" />\n\t\t\t\t\t\t\t\t</template>\n\t\t\t\t\t\t\t</NcButton>\n\t\t\t\t\t\t</template>\n\t\t\t\t\t</NcAppNavigationSearch>\n\t\t\t\t</template>\n\t\t\t\t<template #list>\n\t\t\t\t\t<NcAppNavigationItem name=\"First navigation entry\">\n\t\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t\t<IconStar :size=\"20\" />\n\t\t\t\t\t\t</template>\n\t\t\t\t\t</NcAppNavigationItem>\n\t\t\t\t\t<NcAppNavigationItem name=\"Second navigation entry\">\n\t\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t\t<IconStar :size=\"20\" />\n\t\t\t\t\t\t</template>\n\t\t\t\t\t</NcAppNavigationItem>\n\t\t\t\t</template>\n\t\t\t</NcAppNavigation>\n\t\t\t<NcAppContent>\n\t\t\t\t<ul class=\"fake-content\">\n\t\t\t\t\t<li>Search query: {{ searchQuery }}</li>\n\t\t\t\t\t<li v-for=\"(item, index) in items\" :key=\"index\">\n\t\t\t\t\t\t{{ item }}\n\t\t\t\t\t</li>\n\t\t\t\t</ul>\n\t\t\t</NcAppContent>\n\t\t</NcContent>\n\t</div>\n</template>\n<script>\nimport IconAccount from 'vue-material-design-icons/Account.vue'\nimport IconCalendarAccount from 'vue-material-design-icons/CalendarAccount.vue'\nimport IconFilter from 'vue-material-design-icons/Filter.vue'\nimport IconSearchGlobal from 'vue-material-design-icons/CloudSearch.vue'\nimport IconStar from 'vue-material-design-icons/Star.vue'\n\nconst exampleItem = ['Mary', 'Patricia', 'James', 'Michael']\n\nexport default {\n\tcomponents: {\n\t\tIconAccount,\n\t\tIconCalendarAccount,\n\t\tIconFilter,\n\t\tIconSearchGlobal,\n\t\tIconStar,\n\t},\n\n\tdata() {\n\t\treturn {\n\t\t\tsearchQuery: '',\n\t\t}\n\t},\n\n\tcomputed: {\n\t\titems() {\n\t\t\treturn exampleItem.filter((item) => item.toLocaleLowerCase().includes(this.searchQuery.toLocaleLowerCase()))\n\t\t},\n\t},\n}\n</script>\n<style scoped>\n/* This styles just mock NcContent and NcAppContent */\n.content-styleguidist {\n\tposition: relative !important;\n\tmargin: 0 !important;\n\t/* prevent jumping */\n\tmin-height: 200px;\n}\n\n.content-styleguidist > * {\n\theight: auto;\n}\n\n.fake-content {\n\tpadding: var(--app-navigation-padding);\n\tpadding-top: calc(2 * var(--app-navigation-padding) + var(--default-clickable-area));\n}\n\n.styleguide-wrapper {\n\tbackground-color: var(--color-background-plain);\n\tpadding: var(--body-container-margin);\n}\n</style>\n```\n</docs>\n<template>\n\t<div class=\"app-navigation-search\"\n\t\t:class=\"{\n\t\t\t'app-navigation-search--has-actions': hasActions(),\n\t\t}\">\n\t\t<NcInputField ref=\"inputElement\"\n\t\t\tv-model=\"model\"\n\t\t\t:aria-label=\"label\"\n\t\t\tclass=\"app-navigation-search__input\"\n\t\t\tlabel-outside\n\t\t\t:placeholder=\"placeholder ?? label\"\n\t\t\tshow-trailing-button\n\t\t\t:trailing-button-label=\"t('Clear search')\"\n\t\t\ttype=\"search\"\n\t\t\t@trailing-button-click=\"onCloseSearch\">\n\t\t\t<template #trailing-button-icon>\n\t\t\t\t<IconClose :size=\"20\" />\n\t\t\t</template>\n\t\t</NcInputField>\n\t\t<div v-if=\"hasActions()\"\n\t\t\tref=\"actionsContainer\"\n\t\t\tclass=\"app-navigation-search__actions\"\n\t\t\t:class=\"{\n\t\t\t\t'app-navigation-search__actions--hidden': !showActions,\n\t\t\t\t'hidden-visually': hideActions,\n\t\t\t}\">\n\t\t\t<slot name=\"actions\" />\n\t\t</div>\n\t</div>\n</template>\n\n<script setup lang=\"ts\">\nimport { useFocusWithin } from '@vueuse/core'\nimport { ref, nextTick, useSlots, watch, useTemplateRef } from 'vue'\nimport { t } from '../../l10n.js'\n\nimport IconClose from 'vue-material-design-icons/Close.vue'\nimport NcInputField from '../NcInputField/NcInputField.vue'\n\ndefineProps({\n\t/**\n\t * Text used to label the search input\n\t */\n\tlabel: {\n\t\ttype: String,\n\t\tdefault: t('Search…'),\n\t},\n\n\t/**\n\t * Placeholder of the search input\n\t * By default the value of `label` is used.\n\t */\n\tplaceholder: {\n\t\ttype: String,\n\t\tdefault: null,\n\t},\n})\n\n/**\n * Current search input\n */\nconst model = defineModel<string>({ default: '' })\nconst slots = useSlots()\n\nconst inputElement = ref()\nconst { focused: inputHasFocus } = useFocusWithin(inputElement)\n\n/** Timeout used to define when the search input is fully expanded */\nconst transitionTimeout = Number.parseInt(window.getComputedStyle(window.document.body).getPropertyValue('--animation-quick')) || 100\n\nconst actionsContainer = useTemplateRef('actionsContainer')\nconst hasActions = () => !!slots.actions?.({})\nconst showActions = ref(true)\nconst timeoutId = ref()\n/** This is used to hide the actions after the transition is done */\nconst hideActions = ref(false)\nwatch(inputHasFocus, () => {\n\tshowActions.value = !inputHasFocus.value\n\twindow.clearTimeout(timeoutId.value)\n\tif (showActions.value) {\n\t\thideActions.value = false\n\t} else {\n\t\t// If the transition is done, we fully hide the actions visually\n\t\twindow.setTimeout(() => {\n\t\t\thideActions.value = !showActions.value\n\t\t}, transitionTimeout)\n\t}\n})\n\n/**\n * Handle close the search\n */\nfunction onCloseSearch() {\n\tmodel.value = ''\n\tif (hasActions()) {\n\t\tshowActions.value = true\n\t\tnextTick(() => actionsContainer.value?.querySelector('button')?.focus())\n\t}\n}\n</script>\n\n<style scoped lang=\"scss\">\n.app-navigation-search {\n\tdisplay: flex;\n\tgap: var(--app-navigation-padding);\n\tpadding: var(--app-navigation-padding);\n\n\t&--has-actions &__input {\n\t\tflex-grow: 1;\n\t\tz-index: 3;\n\t}\n\n\t&__actions {\n\t\tdisplay: flex;\n\t\tgap: var(--default-grid-baseline);\n\n\t\tmargin-inline-start: 0;\n\t\tmax-width: calc(2 * var(--default-clickable-area) + var(--default-grid-baseline));\n\t\tmax-height: var(--default-clickable-area);\n\n\t\ttransition: margin-inline-start var(--animation-quick);\n\n\t\t&--hidden {\n\t\t\tmargin-inline-start: calc(-1 * var(--default-clickable-area));\n\t\t}\n\t}\n\n\t&__input {\n\t\t// This is a fallback for legacy version (Nextcloud 29 and older) so that we keep the pill like design there\n\t\t--input-border-radius: var(--border-radius-element, var(--border-radius-pill)) !important;\n\t}\n}\n</style>\n"],"names":["_useModel"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAsLM,UAAA,QAAQA,SAAmC,SAAA,YAAA;AACjD,UAAM,QAAQ,SAAS;AAEvB,UAAM,eAAe,IAAI;AACzB,UAAM,EAAE,SAAS,kBAAkB,eAAe,YAAY;AAG9D,UAAM,oBAAoB,OAAO,SAAS,OAAO,iBAAiB,OAAO,SAAS,IAAI,EAAE,iBAAiB,mBAAmB,CAAC,KAAK;AAE5H,UAAA,mBAAmB,eAAe,kBAAkB;AAC1D,UAAM,aAAa,MAAM,CAAC,CAAC,MAAM,UAAU,CAAA,CAAE;AACvC,UAAA,cAAc,IAAI,IAAI;AAC5B,UAAM,YAAY,IAAI;AAEhB,UAAA,cAAc,IAAI,KAAK;AAC7B,UAAM,eAAe,MAAM;AACd,kBAAA,QAAQ,CAAC,cAAc;AAC5B,aAAA,aAAa,UAAU,KAAK;AACnC,UAAI,YAAY,OAAO;AACtB,oBAAY,QAAQ;AAAA,MAAA,OACd;AAEN,eAAO,WAAW,MAAM;AACX,sBAAA,QAAQ,CAAC,YAAY;AAAA,WAC/B,iBAAiB;AAAA,MAAA;AAAA,IACrB,CACA;AAKD,aAAS,gBAAgB;AACxB,YAAM,QAAQ;AACd,UAAI,cAAc;AACjB,oBAAY,QAAQ;AACpB,iBAAS,MAAM,iBAAiB,OAAO,cAAc,QAAQ,GAAG,OAAO;AAAA,MAAA;AAAA,IACxE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/chunks/NcAppNavigationSettings-vM8ajNNK.mjs

@@ -0,0 +1,131 @@
+import '../assets/NcAppNavigationSettings-BDc6Mtek.css';
+import { createElementBlock, openBlock, mergeProps, createElementVNode, createCommentVNode, toDisplayString, defineComponent, ref, useTemplateRef, computed, normalizeClass, createVNode, unref, withCtx, createTextVNode, Transition, withDirectives, renderSlot, vShow } from "vue";
+import { onClickOutside } from "@vueuse/core";
+import { r as register, a as t } from "./_l10n-BEP_UzXI.mjs";
+import { G as GenRandomId } from "./GenRandomId-CMooMQt0.mjs";
+import { _ as _export_sfc } from "./_plugin-vue_export-helper-1tPrXgE0.mjs";
+import { N as NcButton } from "./NcButton-QmfEsvXC.mjs";
+register();
+const _sfc_main$1 = {
+  name: "CogIcon",
+  emits: ["click"],
+  props: {
+    title: {
+      type: String
+    },
+    fillColor: {
+      type: String,
+      default: "currentColor"
+    },
+    size: {
+      type: Number,
+      default: 24
+    }
+  }
+};
+const _hoisted_1$1 = ["aria-hidden", "aria-label"];
+const _hoisted_2 = ["fill", "width", "height"];
+const _hoisted_3 = { d: "M12,15.5A3.5,3.5 0 0,1 8.5,12A3.5,3.5 0 0,1 12,8.5A3.5,3.5 0 0,1 15.5,12A3.5,3.5 0 0,1 12,15.5M19.43,12.97C19.47,12.65 19.5,12.33 19.5,12C19.5,11.67 19.47,11.34 19.43,11L21.54,9.37C21.73,9.22 21.78,8.95 21.66,8.73L19.66,5.27C19.54,5.05 19.27,4.96 19.05,5.05L16.56,6.05C16.04,5.66 15.5,5.32 14.87,5.07L14.5,2.42C14.46,2.18 14.25,2 14,2H10C9.75,2 9.54,2.18 9.5,2.42L9.13,5.07C8.5,5.32 7.96,5.66 7.44,6.05L4.95,5.05C4.73,4.96 4.46,5.05 4.34,5.27L2.34,8.73C2.21,8.95 2.27,9.22 2.46,9.37L4.57,11C4.53,11.34 4.5,11.67 4.5,12C4.5,12.33 4.53,12.65 4.57,12.97L2.46,14.63C2.27,14.78 2.21,15.05 2.34,15.27L4.34,18.73C4.46,18.95 4.73,19.03 4.95,18.95L7.44,17.94C7.96,18.34 8.5,18.68 9.13,18.93L9.5,21.58C9.54,21.82 9.75,22 10,22H14C14.25,22 14.46,21.82 14.5,21.58L14.87,18.93C15.5,18.67 16.04,18.34 16.56,17.94L19.05,18.95C19.27,19.03 19.54,18.95 19.66,18.73L21.66,15.27C21.78,15.05 21.73,14.78 21.54,14.63L19.43,12.97Z" };
+const _hoisted_4 = { key: 0 };
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  return openBlock(), createElementBlock("span", mergeProps(_ctx.$attrs, {
+    "aria-hidden": $props.title ? null : "true",
+    "aria-label": $props.title,
+    class: "material-design-icon cog-icon",
+    role: "img",
+    onClick: _cache[0] || (_cache[0] = ($event) => _ctx.$emit("click", $event))
+  }), [
+    (openBlock(), createElementBlock("svg", {
+      fill: $props.fillColor,
+      class: "material-design-icon__svg",
+      width: $props.size,
+      height: $props.size,
+      viewBox: "0 0 24 24"
+    }, [
+      createElementVNode("path", _hoisted_3, [
+        $props.title ? (openBlock(), createElementBlock("title", _hoisted_4, toDisplayString($props.title), 1)) : createCommentVNode("", true)
+      ])
+    ], 8, _hoisted_2))
+  ], 16, _hoisted_1$1);
+}
+const IconCog = /* @__PURE__ */ _export_sfc(_sfc_main$1, [["render", _sfc_render]]);
+const _hoisted_1 = ["id"];
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "NcAppNavigationSettings",
+  props: {
+    excludeClickOutsideSelectors: { default: () => [] },
+    name: { default: () => t("Settings") }
+  },
+  setup(__props) {
+    const contentId = GenRandomId();
+    const open = ref(false);
+    const container2 = useTemplateRef("wrapperElement");
+    const ignore = computed(
+      () => Array.isArray(__props.excludeClickOutsideSelectors) ? __props.excludeClickOutsideSelectors : __props.excludeClickOutsideSelectors.split(" ")
+    );
+    onClickOutside(container2, () => {
+      open.value = false;
+    }, { ignore });
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", {
+        ref: "wrapperElement",
+        class: normalizeClass(_ctx.$style.container)
+      }, [
+        createElementVNode("div", {
+          class: normalizeClass(_ctx.$style.header)
+        }, [
+          createVNode(NcButton, {
+            "aria-controls": unref(contentId),
+            "aria-expanded": open.value ? "true" : "false",
+            onClick: _cache[0] || (_cache[0] = ($event) => open.value = !open.value)
+          }, {
+            icon: withCtx(() => [
+              createVNode(IconCog, { size: 20 })
+            ]),
+            default: withCtx(() => [
+              createTextVNode(" " + toDisplayString(_ctx.name), 1)
+            ]),
+            _: 1
+          }, 8, ["aria-controls", "aria-expanded"])
+        ], 2),
+        createVNode(Transition, {
+          "enter-active-class": _ctx.$style.animationActive,
+          "leave-active-class": _ctx.$style.animationActive,
+          "enter-from-class": _ctx.$style.animationStop,
+          "leave-to-class": _ctx.$style.animationStop
+        }, {
+          default: withCtx(() => [
+            withDirectives(createElementVNode("div", {
+              id: unref(contentId),
+              class: normalizeClass(_ctx.$style.content)
+            }, [
+              renderSlot(_ctx.$slots, "default")
+            ], 10, _hoisted_1), [
+              [vShow, open.value]
+            ])
+          ]),
+          _: 3
+        }, 8, ["enter-active-class", "leave-active-class", "enter-from-class", "leave-to-class"])
+      ], 2);
+    };
+  }
+});
+const container = "_container_1v0ql_2";
+const header = "_header_1v0ql_7";
+const content = "_content_1v0ql_12";
+const animationActive = "_animationActive_1v0ql_24";
+const animationStop = "_animationStop_1v0ql_30";
+const style0 = {
+  container,
+  header,
+  content,
+  animationActive,
+  animationStop
+};
+const cssModules = {
+  "$style": style0
+};
+const NcAppNavigationSettings = /* @__PURE__ */ _export_sfc(_sfc_main, [["__cssModules", cssModules]]);
+export {
+  NcAppNavigationSettings as N
+};

package/dist/chunks/NcAppNavigationSettings-vM8ajNNK.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"NcAppNavigationSettings-vM8ajNNK.mjs","sources":["../../node_modules/vue-material-design-icons/Cog.vue","../../src/components/NcAppNavigationSettings/NcAppNavigationSettings.vue"],"sourcesContent":["<template>\n  <span v-bind=\"$attrs\"\n        :aria-hidden=\"title ? null : 'true'\"\n        :aria-label=\"title\"\n        class=\"material-design-icon cog-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,15.5A3.5,3.5 0 0,1 8.5,12A3.5,3.5 0 0,1 12,8.5A3.5,3.5 0 0,1 15.5,12A3.5,3.5 0 0,1 12,15.5M19.43,12.97C19.47,12.65 19.5,12.33 19.5,12C19.5,11.67 19.47,11.34 19.43,11L21.54,9.37C21.73,9.22 21.78,8.95 21.66,8.73L19.66,5.27C19.54,5.05 19.27,4.96 19.05,5.05L16.56,6.05C16.04,5.66 15.5,5.32 14.87,5.07L14.5,2.42C14.46,2.18 14.25,2 14,2H10C9.75,2 9.54,2.18 9.5,2.42L9.13,5.07C8.5,5.32 7.96,5.66 7.44,6.05L4.95,5.05C4.73,4.96 4.46,5.05 4.34,5.27L2.34,8.73C2.21,8.95 2.27,9.22 2.46,9.37L4.57,11C4.53,11.34 4.5,11.67 4.5,12C4.5,12.33 4.53,12.65 4.57,12.97L2.46,14.63C2.27,14.78 2.21,15.05 2.34,15.27L4.34,18.73C4.46,18.95 4.73,19.03 4.95,18.95L7.44,17.94C7.96,18.34 8.5,18.68 9.13,18.93L9.5,21.58C9.54,21.82 9.75,22 10,22H14C14.25,22 14.46,21.82 14.5,21.58L14.87,18.93C15.5,18.67 16.04,18.34 16.56,17.94L19.05,18.95C19.27,19.03 19.54,18.95 19.66,18.73L21.66,15.27C21.78,15.05 21.73,14.78 21.54,14.63L19.43,12.97Z\">\n        <title v-if=\"title\">{{ title }}</title>\n      </path>\n    </svg>\n  </span>\n</template>\n\n<script>\nexport default {\n  name: \"CogIcon\",\n  emits: ['click'],\n  props: {\n    title: {\n      type: String,\n    },\n    fillColor: {\n      type: String,\n      default: \"currentColor\"\n    },\n    size: {\n      type: Number,\n      default: 24\n    }\n  }\n}\n</script>","<!--\n  - SPDX-FileCopyrightText: 2018 Nextcloud GmbH and Nextcloud contributors\n  - SPDX-License-Identifier: AGPL-3.0-or-later\n-->\n\n<script setup lang=\"ts\">\nimport type { Slot } from 'vue'\nimport { onClickOutside } from '@vueuse/core'\nimport { computed, ref, useTemplateRef } from 'vue'\nimport { t } from '../../l10n.js'\nimport GenRandomId from '../../utils/GenRandomId.js'\n\nimport IconCog from 'vue-material-design-icons/Cog.vue'\nimport NcButton from '../NcButton/NcButton.vue'\n\nconst {\n\texcludeClickOutsideSelectors = [],\n\tname = t('Settings'),\n} = defineProps<{\n\t/**\n\t * A query-selector or an array of query-selectors\n\t * to be ignored when clicking outside an element\n\t */\n\texcludeClickOutsideSelectors?: string | string[]\n\n\t/**\n\t * Text of the button\n\t * @default 'Settings'\n\t */\n\tname?: string\n}>()\n\ndefineSlots<{\n\t/**\n\t * Content of the accordion button (the settings).\n\t */\n\tdefault: Slot\n}>()\n\nconst contentId = GenRandomId()\n/**\n * Are the settings open\n */\nconst open = ref(false)\n\n// Close the menu when the user clicks outside of the container\nconst container = useTemplateRef('wrapperElement')\nconst ignore = computed(() => Array.isArray(excludeClickOutsideSelectors)\n\t? excludeClickOutsideSelectors\n\t: excludeClickOutsideSelectors.split(' '),\n)\nonClickOutside(container, () => { open.value = false }, { ignore })\n</script>\n\n<template>\n\t<div ref=\"wrapperElement\" :class=\"$style.container\">\n\t\t<div :class=\"$style.header\">\n\t\t\t<NcButton :aria-controls=\"contentId\"\n\t\t\t\t:aria-expanded=\"open ? 'true' : 'false'\"\n\t\t\t\t@click=\"open = !open\">\n\t\t\t\t<template #icon>\n\t\t\t\t\t<IconCog :size=\"20\" />\n\t\t\t\t</template>\n\t\t\t\t{{ name }}\n\t\t\t</NcButton>\n\t\t</div>\n\t\t<Transition :enter-active-class=\"$style.animationActive\"\n\t\t\t:leave-active-class=\"$style.animationActive\"\n\t\t\t:enter-from-class=\"$style.animationStop\"\n\t\t\t:leave-to-class=\"$style.animationStop\">\n\t\t\t<div v-show=\"open\"\n\t\t\t\t:id=\"contentId\"\n\t\t\t\t:class=\"$style.content\">\n\t\t\t\t<slot />\n\t\t\t</div>\n\t\t</Transition>\n\t</div>\n</template>\n\n<style module>\n.container {\n\tmargin-top: auto;\n\tpadding: var(--default-grid-baseline);\n}\n\n.header {\n\tmargin-block: 0 var(--default-grid-baseline);\n\tmargin-inline: var(--default-grid-baseline);\n}\n\n.content {\n\tdisplay: block;\n\tpadding: 10px;\n\n\t/* prevent scrolled contents from stopping too early */\n\tmargin-bottom: calc(-1 * var(--default-grid-baseline));\n\n\t/* restrict height of settings and make scrollable */\n\tmax-height: 300px;\n\toverflow-y: auto;\n}\n\n.animationActive {\n\ttransition-duration: var(--animation-slow);\n\ttransition-property: max-height, padding;\n\toverflow-y: hidden !important;\n}\n\n.animationStop {\n\tmax-height: 0 !important;\n\tpadding: 0 10px !important;\n}\n</style>\n"],"names":["_sfc_main","_hoisted_1","_createElementBlock","_mergeProps","_createElementVNode","_createCommentVNode","container"],"mappings":";;;;;;;AAoBA,MAAKA,cAAU;AAAA,EACb,MAAM;AAAA,EACN,OAAO,CAAC,OAAO;AAAA,EACf,OAAO;AAAA,IACL,OAAO;AAAA,MACL,MAAM;AAAA,IACP;AAAA,IACD,WAAW;AAAA,MACT,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA,IACD,MAAM;AAAA,MACJ,MAAM;AAAA,MACN,SAAS;AAAA,IACX;AAAA,EACF;AACF;AApCA,MAAAC,eAAA,CAAA,eAAA,YAAA;AAAA,MAAA,aAAA,CAAA,QAAA,SAAA,QAAA;AAYY,MAAA,aAAA,EAAA,GAAE,84BAA64B;qBAZ35B,KAAA,EAAA;;sBACEC,mBAeO,QAfPC,WAAc,KAAM,QAAA;AAAA,IACb,eAAa,OAAK,QAAA,OAAA;AAAA,IAClB,cAAY,OAAK;AAAA,IAClB,OAAM;AAAA,IACN,MAAK;AAAA,IACJ,SAAK,OAAA,CAAA,MAAA,OAAA,CAAA,IAAA,YAAE,KAAK,MAAA,SAAU,MAAM;AAAA;kBACjCD,mBAQM,OAAA;AAAA,MARA,MAAM,OAAS;AAAA,MAChB,OAAM;AAAA,MACL,OAAO,OAAI;AAAA,MACX,QAAQ,OAAI;AAAA,MACb,SAAQ;AAAA;MACXE,mBAEO,QAFP,YAEO;AAAA,QADQ,OAAK,sBAAlBF,mBAAuC,SAb/C,4BAa+B,OAAK,KAAA,GAAA,CAAA,KAbpCG,mBAAA,IAAA,IAAA;AAAA;IAAA,GAAA,GAAA,UAAA;AAAA,EAAA,GAAA,IAAAJ,YAAA;;;;;;;;;;;ACuCA,UAAM,YAAY,YAAY;AAIxB,UAAA,OAAO,IAAI,KAAK;AAGhB,UAAAK,aAAY,eAAe,gBAAgB;AACjD,UAAM,SAAS;AAAA,MAAS,MAAM,MAAM,QAAQ,QAA4B,4BAAA,IACrE,QAAA,+BACA,QAA4B,6BAAC,MAAM,GAAG;AAAA,IACzC;AACA,mBAAeA,YAAW,MAAM;AAAE,WAAK,QAAQ;AAAA,IAAA,GAAS,EAAE,OAAA,CAAQ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","x_google_ignoreList":[0]}

package/dist/chunks/NcAppNavigationSpacer-CzBLuQL8.mjs

@@ -0,0 +1,14 @@
+import '../assets/NcAppNavigationSpacer-BJj8CIpA.css';
+import { createElementBlock, openBlock } from "vue";
+import { _ as _export_sfc } from "./_plugin-vue_export-helper-1tPrXgE0.mjs";
+const _sfc_main = {
+  name: "NcAppNavigationSpacer"
+};
+const _hoisted_1 = { class: "app-navigation-spacer" };
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  return openBlock(), createElementBlock("li", _hoisted_1);
+}
+const NcAppNavigationSpacer = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__scopeId", "data-v-b699c557"]]);
+export {
+  NcAppNavigationSpacer as N
+};

package/dist/chunks/NcAppNavigationSpacer-CzBLuQL8.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"NcAppNavigationSpacer-CzBLuQL8.mjs","sources":["../../src/components/NcAppNavigationSpacer/NcAppNavigationSpacer.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<li class=\"app-navigation-spacer\" />\n</template>\n\n<script>\nexport default {\n\tname: 'NcAppNavigationSpacer',\n}\n</script>\n\n<style scoped>\n\t.app-navigation-spacer {\n\t\tflex-shrink: 0;\n\t\theight: 22px;\n\t}\n\n</style>\n"],"names":["_openBlock","_createElementBlock"],"mappings":";;AAUA,MAAK,YAAU;AAAA,EACd,MAAM;AACP;AANK,MAAA,aAAA,EAAA,OAAM,wBAAuB;;AAAjC,SAAAA,UAAA,GAAAC,mBAAoC,MAApC,UAAoC;;;"}