npm - @nextcloud/vue - Versions diffs - 9.0.0-alpha.7 → 9.0.0-rc.0 - Mend

@nextcloud/vue 9.0.0-alpha.7 → 9.0.0-rc.0

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 (521) hide show

package/dist/chunks/{NcAppNavigation-BxUvXgeG.mjs → NcAppNavigation-DuLUJbsJ.mjs} RENAMED Viewed

@@ -1,10 +1,10 @@
-import '../assets/NcAppNavigation-_K9H-MtG.css';
+import '../assets/NcAppNavigation-BXItV5BV.css';
 import { useIsMobile } from "../composables/useIsMobile/index.mjs";
 import { g as getTrapStack } from "./focusTrap-DmkaYJTC.mjs";
 import { emit, unsubscribe, subscribe } from "@nextcloud/event-bus";
 import { createFocusTrap } from "focus-trap";
 import { N as NcAppNavigationList } from "./NcAppNavigationList-DX_Yo23V.mjs";
-import { N as NcAppNavigationToggle } from "./NcAppNavigationToggle-DBtf139E.mjs";
+import { N as NcAppNavigationToggle } from "./NcAppNavigationToggle-CqZs9ls-.mjs";
 import { warn, resolveComponent, createElementBlock, openBlock, normalizeClass, createElementVNode, createVNode, withKeys, createBlock, createCommentVNode, renderSlot, withCtx } from "vue";
 import { _ as _export_sfc } from "./_plugin-vue_export-helper-1tPrXgE0.mjs";
 const _sfc_main = {
@@ -160,7 +160,8 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
     }, null, 8, ["open", "onUpdate:open"])
   ], 2);
 }
-const NcAppNavigation = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__scopeId", "data-v-ad91e468"]]);
+const NcAppNavigation = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__scopeId", "data-v-a249486e"]]);
 export {
   NcAppNavigation as N
 };
+//# sourceMappingURL=NcAppNavigation-DuLUJbsJ.mjs.map

package/dist/chunks/{NcAppNavigation-BxUvXgeG.mjs.map → NcAppNavigation-DuLUJbsJ.mjs.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"NcAppNavigation-BxUvXgeG.mjs","sources":["../../src/components/NcAppNavigation/NcAppNavigation.vue"],"sourcesContent":["<!--\n - SPDX-FileCopyrightText: 2019 Nextcloud GmbH and Nextcloud contributors\n - SPDX-License-Identifier: AGPL-3.0-or-later\n-->\n\n<docs>\n```vue\n<template>\n\t<div class=\"styleguide-nc-content\">\n\t\t<NcAppNavigation>\n\t\t\t<template #search>\n\t\t\t\t<div class=\"navigation__header\">\n\t\t\t\t\t<NcAppNavigationSearch v-model=\"searchValue\" label=\"Search …\" />\n\t\t\t\t\t<NcActions>\n\t\t\t\t\t\t<NcActionButton close-after-click @click=\"showModal = true\">\n\t\t\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t\t\t<IconCog />\n\t\t\t\t\t\t\t</template>\n\t\t\t\t\t\t\tApp settings (close after click)\n\t\t\t\t\t\t</NcActionButton>\n\t\t\t\t\t\t<NcActionButton @click=\"showModal = true\">\n\t\t\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t\t\t<IconCog />\n\t\t\t\t\t\t\t</template>\n\t\t\t\t\t\t\tApp settings (handle only click)\n\t\t\t\t\t\t</NcActionButton>\n\t\t\t\t\t</NcActions>\n\t\t\t\t</div>\n\t\t\t</template>\n\t\t\t<template #list>\n\t\t\t\t<NcAppNavigationItem v-for=\"item in items\" :key=\"item\" :name=\"item\">\n\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t<IconCheck :size=\"20\" />\n\t\t\t\t\t</template>\n\t\t\t\t</NcAppNavigationItem>\n\t\t\t</template>\n\t\t\t<template #footer>\n\t\t\t\t<div class=\"navigation__footer\">\n\t\t\t\t\t<NcButton wide @click=\"showModal = true\">\n\t\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t\t<IconCog />\n\t\t\t\t\t\t</template>\n\t\t\t\t\t\tApp settings\n\t\t\t\t\t</NcButton>\n\t\t\t\t\t<NcModal v-if=\"showModal\" name=\"Modal for focus-trap check\" @close=\"showModal = false\">\n\t\t\t\t\t\t<div class=\"modal-content\">\n\t\t\t\t\t\t\t<h4>Focus-trap should be locked inside the modal</h4>\n\t\t\t\t\t\t\t<NcTextField v-model=\"modalValue\" label=\"Focus me\" />\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</NcModal>\n\t\t\t\t</div>\n\t\t\t</template>\n\t\t</NcAppNavigation>\n\t</div>\n</template>\n\n<script>\n\timport IconCheck from 'vue-material-design-icons/Check'\n\timport IconCog from 'vue-material-design-icons/Cog'\n\n\texport default {\n\t\tcomponents: {\n\t\t\tIconCheck,\n\t\t\tIconCog,\n\t\t},\n\t\tprovide() {\n\t\t\treturn {\n\t\t\t\t'NcContent:setHasAppNavigation': () => {},\n\t\t\t}\n\t\t},\n\t\tdata() {\n\t\t\treturn {\n\t\t\t\titems: Array.from({ length: 5 }, (v, i) => `Item ${i+1}`),\n\t\t\t\tsearchValue: '',\n\t\t\t\tmodalValue: '',\n\t\t\t\tshowModal: false,\n\t\t\t}\n\t\t},\n\t}\n</script>\n\n<style scoped>\n\t/* Mock NcContent /\n\t.styleguide-nc-content {\n\t\tposition: relative;\n\t\theight: 300px;\n\t\tbackground-color: var(--color-background-plain);\n\t\toverflow: hidden;\n\t}\n\n\t.navigation__header,\n\t.navigation__footer {\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tgap: 4px;\n\t\tpadding: 4px;\n\t}\n\n\t.modal-content {\n\t\theight: 120px;\n\t\tpadding: 10px;\n\t}\n</style>\n```\n\nThe navigation bar can be open and closed from anywhere in the app using the\nnextcloud event bus.\n\n### Install the event bus package\n\n```bash\nnpm i -S @nextcloud/event-bus\n```\n\n### Usage\n\n#### Open the navigation\n\n```js static\nimport { emit } from '@nextcloud/event-bus'\nemit('toggle-navigation', {\n\topen: true,\n})\n```\n\n#### Close the navigation\n\n```js static\nimport { emit } from '@nextcloud/event-bus'\nemit('toggle-navigation', {\n\topen: false,\n})\n```\n\n</docs>\n\n<template>\n\t<div ref=\"appNavigationContainer\"\n\t\tclass=\"app-navigation\"\n\t\t:class=\"{'app-navigation--close':!open }\">\n\t\t<nav id=\"app-navigation-vue\"\n\t\t\t:aria-hidden=\"open ? 'false' : 'true'\"\n\t\t\t:aria-label=\"ariaLabel \|\| undefined\"\n\t\t\t:aria-labelledby=\"ariaLabelledby \|\| undefined\"\n\t\t\tclass=\"app-navigation__content\"\n\t\t\t:inert=\"!open \|\| undefined\"\n\t\t\t@keydown.esc=\"handleEsc\">\n\t\t\t<div class=\"app-navigation__search\">\n\t\t\t\t<!-- @slot For in-app search you can pass a `NcAppNavigationSearch` component as the slot content. -->\n\t\t\t\t<slot name=\"search\" />\n\t\t\t</div>\n\n\t\t\t<div class=\"app-navigation__body\" :class=\"{ 'app-navigation__body--no-list': !$slots.list }\">\n\t\t\t\t<!-- @slot The main content of the navigation. If no list is passed to the #list slot, stretched vertically. -->\n\t\t\t\t<slot />\n\t\t\t</div>\n\n\t\t\t<NcAppNavigationList v-if=\"$slots.list\" class=\"app-navigation__list\">\n\t\t\t\t<!-- List for Navigation list items. Stretched between the main content and the footer -->\n\t\t\t\t<slot name=\"list\" />\n\t\t\t</NcAppNavigationList>\n\n\t\t\t<!-- @slot Footer for e.g. NcAppNavigationSettings -->\n\t\t\t<slot name=\"footer\" />\n\t\t</nav>\n\t\t<NcAppNavigationToggle :open=\"open\" @update:open=\"toggleNavigation\" />\n\t</div>\n</template>\n\n<script>\nimport { useIsMobile } from '../../composables/useIsMobile/index.js'\nimport { getTrapStack } from '../../utils/focusTrap.ts'\nimport { emit, subscribe, unsubscribe } from '@nextcloud/event-bus'\nimport { createFocusTrap } from 'focus-trap'\n\nimport NcAppNavigationList from '../NcAppNavigationList/index.js'\nimport NcAppNavigationToggle from '../NcAppNavigationToggle/index.js'\nimport { warn } from 'vue'\n\nexport default {\n\tname: 'NcAppNavigation',\n\n\tcomponents: {\n\t\tNcAppNavigationList,\n\t\tNcAppNavigationToggle,\n\t},\n\n\t// Injected from NcContent\n\tinject: {\n\t\tsetHasAppNavigation: {\n\t\t\tdefault: () => () => warn('NcAppNavigation is not mounted inside NcContent, this is probably an error.'),\n\t\t\tfrom: 'NcContent:setHasAppNavigation',\n\t\t},\n\t},\n\n\tprops: {\n\t\t/\n\t\t The aria label to describe the navigation\n\t\t /\n\t\tariaLabel: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\n\t\t/\n\t\t aria-labelledby attribute to describe the navigation\n\t\t /\n\t\tariaLabelledby: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\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\topen: !this.isMobile,\n\t\t\tfocusTrap: null,\n\t\t}\n\t},\n\n\twatch: {\n\t\tisMobile() {\n\t\t\tthis.open = !this.isMobile\n\t\t\tthis.toggleFocusTrap()\n\t\t},\n\t\topen() {\n\t\t\tthis.toggleFocusTrap()\n\t\t},\n\t},\n\n\tmounted() {\n\t\tthis.setHasAppNavigation(true)\n\t\tsubscribe('toggle-navigation', this.toggleNavigationByEventBus)\n\t\t// Emit an event with the initial state of the navigation\n\t\temit('navigation-toggled', {\n\t\t\topen: this.open,\n\t\t})\n\n\t\tthis.focusTrap = createFocusTrap(this.$refs.appNavigationContainer, {\n\t\t\tallowOutsideClick: true,\n\t\t\tfallbackFocus: this.$refs.appNavigationContainer,\n\t\t\ttrapStack: getTrapStack(),\n\t\t\tescapeDeactivates: false,\n\t\t})\n\t\tthis.toggleFocusTrap()\n\t},\n\tunmounted() {\n\t\tthis.setHasAppNavigation(false)\n\t\tunsubscribe('toggle-navigation', this.toggleNavigationByEventBus)\n\t\tthis.focusTrap.deactivate()\n\t},\n\n\tmethods: {\n\t\t/\n\t\t Toggle the navigation\n\t\t \n\t\t @param {boolean} [state] set the state instead of inverting the current one\n\t\t /\n\t\ttoggleNavigation(state) {\n\t\t\t// Early return if already in that state\n\t\t\tif (this.open === state) {\n\t\t\t\temit('navigation-toggled', {\n\t\t\t\t\topen: this.open,\n\t\t\t\t})\n\t\t\t\treturn\n\t\t\t}\n\n\t\t\tthis.open = (typeof state === 'undefined') ? !this.open : state\n\t\t\tconst bodyStyles = getComputedStyle(document.body)\n\t\t\tconst animationLength = parseInt(bodyStyles.getPropertyValue('--animation-quick')) \|\| 100\n\n\t\t\tsetTimeout(() => {\n\t\t\t\temit('navigation-toggled', {\n\t\t\t\t\topen: this.open,\n\t\t\t\t})\n\t\t\t// We wait for 1.5 times the animation length to give the animation time to really finish.\n\t\t\t}, 1.5 animationLength)\n\t\t},\n\n\t\ttoggleNavigationByEventBus({ open }) {\n\t\t\tthis.toggleNavigation(open)\n\t\t},\n\n\t\t/*\n\t\t Activate focus trap if it is currently needed, otherwise deactivate\n\t\t /\n\t\ttoggleFocusTrap() {\n\t\t\tif (this.isMobile && this.open) {\n\t\t\t\tthis.focusTrap.activate()\n\t\t\t} else {\n\t\t\t\tthis.focusTrap.deactivate()\n\t\t\t}\n\t\t},\n\n\t\thandleEsc() {\n\t\t\tif (this.isMobile) {\n\t\t\t\tthis.toggleNavigation(false)\n\t\t\t}\n\t\t},\n\t},\n}\n</script>\n\n<style lang=\"scss\">\n.app-navigation,\n.app-content {\n\t/* Distance of the app navigation toggle and the first navigation item to the top edge of the app content container /\n\t--app-navigation-padding: #{$app-navigation-padding};\n}\n</style>\n\n<style lang=\"scss\" scoped>\n.app-navigation {\n\t// Set scoped variable override\n\t// Using --color-text-maxcontrast as a fallback evaluates to an invalid value as it references itself in this scope instead of the variable defined higher up\n\t--color-text-maxcontrast: var(--color-text-maxcontrast-background-blur, var(--color-text-maxcontrast-default));\n\ttransition: transform var(--animation-quick), margin var(--animation-quick);\n\twidth: $navigation-width;\n\t// Left toggle button padding + toggle button + right padding from NcAppContent\n\t--app-navigation-max-width: calc(100vw - (var(--app-navigation-padding) + var(--default-clickable-area) + var(--default-grid-baseline)));\n\tmax-width: var(--app-navigation-max-width);\n\tposition: relative;\n\ttop: 0;\n\tleft: 0;\n\tpadding: 0px;\n\t// Above NcAppContent\n\tz-index: 1800;\n\theight: 100%;\n\t-webkit-user-select: none;\n\t-moz-user-select: none;\n\t-ms-user-select: none;\n\tuser-select: none;\n\tflex-grow: 0;\n\tflex-shrink: 0;\n\tbackground-color: var(--color-main-background-blur, var(--color-main-background));\n\t-webkit-backdrop-filter: var(--filter-background-blur, none);\n\tbackdrop-filter: var(--filter-background-blur, none);\n\n\t&--close {\n\t\tmargin-inline-start: calc(-1 min($navigation-width, var(--app-navigation-max-width)));\n\t}\n\n\t&__search {\n\t\twidth: 100%;\n\t}\n\n\t&__body {\n\t\toverflow-y: scroll;\n\t}\n\n\t// For legacy purposes support passing a bare list to the content in #default slot and including #footer slot\n\t// Same styles as NcAppNavigationList\n\t&__content > ul {\n\t\tposition: relative;\n\t\twidth: 100%;\n\t\toverflow-x: hidden;\n\t\toverflow-y: auto;\n\t\tdisplay: flex;\n\t\tflex-direction: column;\n\t\tgap: var(--default-grid-baseline, 4px);\n\t\tpadding: var(--app-navigation-padding);\n\t}\n\n\t// Always stretch the navigation list\n\t& &__list {\n\t\theight: 100%;\n\t}\n\n\t// Stretch the main content if there is no stretched list\n\t&__body--no-list {\n\t\tflex: 1 1 auto;\n\t\toverflow: auto;\n\t\theight: 100%;\n\t}\n\n\t&__content {\n\t\theight: 100%;\n\t\tdisplay: flex;\n\t\tflex-direction: column;\n\t}\n}\n\n// Add extra border for high contrast mode\n[data-themes*=\"highcontrast\"] {\n\t.app-navigation {\n\t\tborder-inline-end: 1px solid var(--color-border);\n\t}\n}\n\n// When on mobile, we make the navigation slide over the NcAppContent\n@media only screen and (max-width: $breakpoint-mobile) {\n\t.app-navigation {\n\t\tposition: absolute;\n\t\tborder-inline-end: 1px solid var(--color-border);\n\t}\n}\n\n// Put the toggle behind NcAppSidebar on small screens\n@media only screen and (max-width: $breakpoint-small-mobile) {\n\t.app-navigation {\n\t\tz-index: 1400;\n\t}\n}\n\n</style>\n"],"names":["_createElementBlock","_normalizeClass","_createElementVNode","_withKeys","_renderSlot","_createBlock","_withCtx","_createCommentVNode","_createVNode"],"mappings":"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"}
1	+ {"version":3,"file":"NcAppNavigation-DuLUJbsJ.mjs","sources":["../../src/components/NcAppNavigation/NcAppNavigation.vue"],"sourcesContent":["<!--\n - SPDX-FileCopyrightText: 2019 Nextcloud GmbH and Nextcloud contributors\n - SPDX-License-Identifier: AGPL-3.0-or-later\n-->\n\n<docs>\n```vue\n<template>\n\t<div class=\"styleguide-nc-content\">\n\t\t<NcAppNavigation>\n\t\t\t<template #search>\n\t\t\t\t<div class=\"navigation__header\">\n\t\t\t\t\t<NcAppNavigationSearch v-model=\"searchValue\" label=\"Search …\" />\n\t\t\t\t\t<NcActions>\n\t\t\t\t\t\t<NcActionButton close-after-click @click=\"showModal = true\">\n\t\t\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t\t\t<IconCog />\n\t\t\t\t\t\t\t</template>\n\t\t\t\t\t\t\tApp settings (close after click)\n\t\t\t\t\t\t</NcActionButton>\n\t\t\t\t\t\t<NcActionButton @click=\"showModal = true\">\n\t\t\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t\t\t<IconCog />\n\t\t\t\t\t\t\t</template>\n\t\t\t\t\t\t\tApp settings (handle only click)\n\t\t\t\t\t\t</NcActionButton>\n\t\t\t\t\t</NcActions>\n\t\t\t\t</div>\n\t\t\t</template>\n\t\t\t<template #list>\n\t\t\t\t<NcAppNavigationItem v-for=\"item in items\" :key=\"item\" :name=\"item\">\n\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t<IconCheck :size=\"20\" />\n\t\t\t\t\t</template>\n\t\t\t\t</NcAppNavigationItem>\n\t\t\t</template>\n\t\t\t<template #footer>\n\t\t\t\t<div class=\"navigation__footer\">\n\t\t\t\t\t<NcButton wide @click=\"showModal = true\">\n\t\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t\t<IconCog />\n\t\t\t\t\t\t</template>\n\t\t\t\t\t\tApp settings\n\t\t\t\t\t</NcButton>\n\t\t\t\t\t<NcModal v-if=\"showModal\" name=\"Modal for focus-trap check\" @close=\"showModal = false\">\n\t\t\t\t\t\t<div class=\"modal-content\">\n\t\t\t\t\t\t\t<h4>Focus-trap should be locked inside the modal</h4>\n\t\t\t\t\t\t\t<NcTextField v-model=\"modalValue\" label=\"Focus me\" />\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</NcModal>\n\t\t\t\t</div>\n\t\t\t</template>\n\t\t</NcAppNavigation>\n\t</div>\n</template>\n\n<script>\n\timport IconCheck from 'vue-material-design-icons/Check'\n\timport IconCog from 'vue-material-design-icons/Cog'\n\n\texport default {\n\t\tcomponents: {\n\t\t\tIconCheck,\n\t\t\tIconCog,\n\t\t},\n\t\tprovide() {\n\t\t\treturn {\n\t\t\t\t'NcContent:setHasAppNavigation': () => {},\n\t\t\t}\n\t\t},\n\t\tdata() {\n\t\t\treturn {\n\t\t\t\titems: Array.from({ length: 5 }, (v, i) => `Item ${i+1}`),\n\t\t\t\tsearchValue: '',\n\t\t\t\tmodalValue: '',\n\t\t\t\tshowModal: false,\n\t\t\t}\n\t\t},\n\t}\n</script>\n\n<style scoped>\n\t/* Mock NcContent /\n\t.styleguide-nc-content {\n\t\tposition: relative;\n\t\theight: 300px;\n\t\tbackground-color: var(--color-background-plain);\n\t\toverflow: hidden;\n\t}\n\n\t.navigation__header,\n\t.navigation__footer {\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tgap: 4px;\n\t\tpadding: 4px;\n\t}\n\n\t.modal-content {\n\t\theight: 120px;\n\t\tpadding: 10px;\n\t}\n</style>\n```\n\nThe navigation bar can be open and closed from anywhere in the app using the\nnextcloud event bus.\n\n### Install the event bus package\n\n```bash\nnpm i -S @nextcloud/event-bus\n```\n\n### Usage\n\n#### Open the navigation\n\n```js static\nimport { emit } from '@nextcloud/event-bus'\nemit('toggle-navigation', {\n\topen: true,\n})\n```\n\n#### Close the navigation\n\n```js static\nimport { emit } from '@nextcloud/event-bus'\nemit('toggle-navigation', {\n\topen: false,\n})\n```\n\n</docs>\n\n<template>\n\t<div ref=\"appNavigationContainer\"\n\t\tclass=\"app-navigation\"\n\t\t:class=\"{'app-navigation--close':!open }\">\n\t\t<nav id=\"app-navigation-vue\"\n\t\t\t:aria-hidden=\"open ? 'false' : 'true'\"\n\t\t\t:aria-label=\"ariaLabel \|\| undefined\"\n\t\t\t:aria-labelledby=\"ariaLabelledby \|\| undefined\"\n\t\t\tclass=\"app-navigation__content\"\n\t\t\t:inert=\"!open \|\| undefined\"\n\t\t\t@keydown.esc=\"handleEsc\">\n\t\t\t<div class=\"app-navigation__search\">\n\t\t\t\t<!-- @slot For in-app search you can pass a `NcAppNavigationSearch` component as the slot content. -->\n\t\t\t\t<slot name=\"search\" />\n\t\t\t</div>\n\n\t\t\t<div class=\"app-navigation__body\" :class=\"{ 'app-navigation__body--no-list': !$slots.list }\">\n\t\t\t\t<!-- @slot The main content of the navigation. If no list is passed to the #list slot, stretched vertically. -->\n\t\t\t\t<slot />\n\t\t\t</div>\n\n\t\t\t<NcAppNavigationList v-if=\"$slots.list\" class=\"app-navigation__list\">\n\t\t\t\t<!-- List for Navigation list items. Stretched between the main content and the footer -->\n\t\t\t\t<slot name=\"list\" />\n\t\t\t</NcAppNavigationList>\n\n\t\t\t<!-- @slot Footer for e.g. NcAppNavigationSettings -->\n\t\t\t<slot name=\"footer\" />\n\t\t</nav>\n\t\t<NcAppNavigationToggle :open=\"open\" @update:open=\"toggleNavigation\" />\n\t</div>\n</template>\n\n<script>\nimport { useIsMobile } from '../../composables/useIsMobile/index.js'\nimport { getTrapStack } from '../../utils/focusTrap.ts'\nimport { emit, subscribe, unsubscribe } from '@nextcloud/event-bus'\nimport { createFocusTrap } from 'focus-trap'\n\nimport NcAppNavigationList from '../NcAppNavigationList/index.js'\nimport NcAppNavigationToggle from '../NcAppNavigationToggle/index.js'\nimport { warn } from 'vue'\n\nexport default {\n\tname: 'NcAppNavigation',\n\n\tcomponents: {\n\t\tNcAppNavigationList,\n\t\tNcAppNavigationToggle,\n\t},\n\n\t// Injected from NcContent\n\tinject: {\n\t\tsetHasAppNavigation: {\n\t\t\tdefault: () => () => warn('NcAppNavigation is not mounted inside NcContent, this is probably an error.'),\n\t\t\tfrom: 'NcContent:setHasAppNavigation',\n\t\t},\n\t},\n\n\tprops: {\n\t\t/\n\t\t The aria label to describe the navigation\n\t\t /\n\t\tariaLabel: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\n\t\t/\n\t\t aria-labelledby attribute to describe the navigation\n\t\t /\n\t\tariaLabelledby: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\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\topen: !this.isMobile,\n\t\t\tfocusTrap: null,\n\t\t}\n\t},\n\n\twatch: {\n\t\tisMobile() {\n\t\t\tthis.open = !this.isMobile\n\t\t\tthis.toggleFocusTrap()\n\t\t},\n\t\topen() {\n\t\t\tthis.toggleFocusTrap()\n\t\t},\n\t},\n\n\tmounted() {\n\t\tthis.setHasAppNavigation(true)\n\t\tsubscribe('toggle-navigation', this.toggleNavigationByEventBus)\n\t\t// Emit an event with the initial state of the navigation\n\t\temit('navigation-toggled', {\n\t\t\topen: this.open,\n\t\t})\n\n\t\tthis.focusTrap = createFocusTrap(this.$refs.appNavigationContainer, {\n\t\t\tallowOutsideClick: true,\n\t\t\tfallbackFocus: this.$refs.appNavigationContainer,\n\t\t\ttrapStack: getTrapStack(),\n\t\t\tescapeDeactivates: false,\n\t\t})\n\t\tthis.toggleFocusTrap()\n\t},\n\tunmounted() {\n\t\tthis.setHasAppNavigation(false)\n\t\tunsubscribe('toggle-navigation', this.toggleNavigationByEventBus)\n\t\tthis.focusTrap.deactivate()\n\t},\n\n\tmethods: {\n\t\t/\n\t\t Toggle the navigation\n\t\t \n\t\t @param {boolean} [state] set the state instead of inverting the current one\n\t\t /\n\t\ttoggleNavigation(state) {\n\t\t\t// Early return if already in that state\n\t\t\tif (this.open === state) {\n\t\t\t\temit('navigation-toggled', {\n\t\t\t\t\topen: this.open,\n\t\t\t\t})\n\t\t\t\treturn\n\t\t\t}\n\n\t\t\tthis.open = (typeof state === 'undefined') ? !this.open : state\n\t\t\tconst bodyStyles = getComputedStyle(document.body)\n\t\t\tconst animationLength = parseInt(bodyStyles.getPropertyValue('--animation-quick')) \|\| 100\n\n\t\t\tsetTimeout(() => {\n\t\t\t\temit('navigation-toggled', {\n\t\t\t\t\topen: this.open,\n\t\t\t\t})\n\t\t\t// We wait for 1.5 times the animation length to give the animation time to really finish.\n\t\t\t}, 1.5 animationLength)\n\t\t},\n\n\t\ttoggleNavigationByEventBus({ open }) {\n\t\t\tthis.toggleNavigation(open)\n\t\t},\n\n\t\t/*\n\t\t Activate focus trap if it is currently needed, otherwise deactivate\n\t\t /\n\t\ttoggleFocusTrap() {\n\t\t\tif (this.isMobile && this.open) {\n\t\t\t\tthis.focusTrap.activate()\n\t\t\t} else {\n\t\t\t\tthis.focusTrap.deactivate()\n\t\t\t}\n\t\t},\n\n\t\thandleEsc() {\n\t\t\tif (this.isMobile) {\n\t\t\t\tthis.toggleNavigation(false)\n\t\t\t}\n\t\t},\n\t},\n}\n</script>\n\n<style lang=\"scss\">\n.app-navigation,\n.app-content {\n\t/* Distance of the app navigation toggle and the first navigation item to the top edge of the app content container /\n\t--app-navigation-padding: #{$app-navigation-padding};\n}\n</style>\n\n<style lang=\"scss\" scoped>\n.app-navigation {\n\t// Set scoped variable override\n\t// Using --color-text-maxcontrast as a fallback evaluates to an invalid value as it references itself in this scope instead of the variable defined higher up\n\t--color-text-maxcontrast: var(--color-text-maxcontrast-background-blur, var(--color-text-maxcontrast-default));\n\ttransition: transform var(--animation-quick), margin var(--animation-quick);\n\twidth: $navigation-width;\n\t// Left toggle button padding + toggle button + right padding from NcAppContent\n\t--app-navigation-max-width: calc(100vw - (var(--app-navigation-padding) + var(--default-clickable-area) + var(--default-grid-baseline)));\n\tmax-width: var(--app-navigation-max-width);\n\tposition: relative;\n\ttop: 0;\n\tinset-inline-start: 0;\n\tpadding: 0px;\n\t// Above NcAppContent\n\tz-index: 1800;\n\theight: 100%;\n\t-webkit-user-select: none;\n\t-moz-user-select: none;\n\t-ms-user-select: none;\n\tuser-select: none;\n\tflex-grow: 0;\n\tflex-shrink: 0;\n\tbackground-color: var(--color-main-background-blur, var(--color-main-background));\n\t-webkit-backdrop-filter: var(--filter-background-blur, none);\n\tbackdrop-filter: var(--filter-background-blur, none);\n\n\t&--close {\n\t\tmargin-inline-start: calc(-1 min($navigation-width, var(--app-navigation-max-width)));\n\t}\n\n\t&__search {\n\t\twidth: 100%;\n\t}\n\n\t&__body {\n\t\toverflow-y: scroll;\n\t}\n\n\t// For legacy purposes support passing a bare list to the content in #default slot and including #footer slot\n\t// Same styles as NcAppNavigationList\n\t&__content > ul {\n\t\tposition: relative;\n\t\twidth: 100%;\n\t\toverflow-x: hidden;\n\t\toverflow-y: auto;\n\t\tdisplay: flex;\n\t\tflex-direction: column;\n\t\tgap: var(--default-grid-baseline, 4px);\n\t\tpadding: var(--app-navigation-padding);\n\t}\n\n\t// Always stretch the navigation list\n\t& &__list {\n\t\theight: 100%;\n\t}\n\n\t// Stretch the main content if there is no stretched list\n\t&__body--no-list {\n\t\tflex: 1 1 auto;\n\t\toverflow: auto;\n\t\theight: 100%;\n\t}\n\n\t&__content {\n\t\theight: 100%;\n\t\tdisplay: flex;\n\t\tflex-direction: column;\n\t}\n}\n\n// Add extra border for high contrast mode\n[data-themes*=\"highcontrast\"] {\n\t.app-navigation {\n\t\tborder-inline-end: 1px solid var(--color-border);\n\t}\n}\n\n// When on mobile, we make the navigation slide over the NcAppContent\n@media only screen and (max-width: $breakpoint-mobile) {\n\t.app-navigation {\n\t\tposition: absolute;\n\t\tborder-inline-end: 1px solid var(--color-border);\n\t}\n}\n\n// Put the toggle behind NcAppSidebar on small screens\n@media only screen and (max-width: $breakpoint-small-mobile) {\n\t.app-navigation {\n\t\tz-index: 1400;\n\t}\n}\n\n</style>\n"],"names":["_createElementBlock","_normalizeClass","_createElementVNode","_withKeys","_renderSlot","_createBlock","_withCtx","_createCommentVNode","_createVNode"],"mappings":"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"}

package/dist/chunks/{NcAppNavigationCaption-S_2Jmwqr.mjs → NcAppNavigationCaption-DTVdWgpf.mjs} RENAMED Viewed

@@ -1,5 +1,5 @@
 import '../assets/NcAppNavigationCaption-B6mZd0E3.css';
-import { N as NcActions } from "./NcActions-DxTtucKk.mjs";
+import { N as NcActions } from "./NcActions-DpYAcY6a.mjs";
 import { resolveComponent, createBlock, openBlock, resolveDynamicComponent, normalizeClass, withCtx, createElementBlock, createCommentVNode, createTextVNode, toDisplayString, createVNode, normalizeProps, guardReactiveProps, renderSlot } from "vue";
 import { _ as _export_sfc } from "./_plugin-vue_export-helper-1tPrXgE0.mjs";
 const _sfc_main = {
@@ -95,3 +95,4 @@ const NcAppNavigationCaption = /* @__PURE__ */ _export_sfc(_sfc_main, [["render"
 export {
   NcAppNavigationCaption as N
 };
+//# sourceMappingURL=NcAppNavigationCaption-DTVdWgpf.mjs.map

package/dist/chunks/{NcAppNavigationCaption-S_2Jmwqr.mjs.map → NcAppNavigationCaption-DTVdWgpf.mjs.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"NcAppNavigationCaption-~~S_2Jmwqr~~.mjs","sources":["../../src/components/NcAppNavigationCaption/NcAppNavigationCaption.vue"],"sourcesContent":["<!--\n - SPDX-FileCopyrightText: 2019 Nextcloud GmbH and Nextcloud contributors\n - SPDX-License-Identifier: AGPL-3.0-or-later\n-->\n\n<docs>\n### Basic usage\n\n```vue\n\t<template>\n\t\t<div class=\"styleguide-nc-content\">\n\t\t\t<NcAppNavigation>\n\t\t\t\t<template #list>\n\t\t\t\t\t<NcAppNavigationCaption\n\t\t\t\t\t\tname=\"Your caption goes here\">\n\t\t\t\t\t\t<template #actions>\n\t\t\t\t\t\t\t<NcActionButton>\n\t\t\t\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t\t\t\t<IconPlus :size=\"20\" />\n\t\t\t\t\t\t\t\t</template>\n\t\t\t\t\t\t\t\tThis is an action\n\t\t\t\t\t\t\t</NcActionButton>\n\t\t\t\t\t\t</template>\n\t\t\t\t\t</NcAppNavigationCaption>\n\t\t\t\t</template>\n\t\t\t</NcAppNavigation>\n\t\t</div>\n\t</template>\n\t<script>\n\timport IconPlus from 'vue-material-design-icons/Plus.vue'\n\n\texport default {\n\t\tcomponents: {\n\t\t\tIconPlus,\n\t\t},\n\t}\n\t</script>\n\t<style scoped>\n\t\t/* Mock NcContent /\n\t\t.styleguide-nc-content {\n\t\t\tbackground-color: var(--color-background-plain);\n\t\t\toverflow: hidden;\n\t\t}\n\t</style>\n```\n\n### Element with a slot for custom actions icon\n```vue\n\t<template>\n\t\t<div class=\"styleguide-nc-content\">\n\t\t\t<NcAppNavigation>\n\t\t\t\t<template #list>\n\t\t\t\t\t<NcAppNavigationCaption\n\t\t\t\t\t\tname=\"Your caption goes here\">\n\t\t\t\t\t\t<template #actionsTriggerIcon>\n\t\t\t\t\t\t\t<IconPlus slot=\"icon\" :size=\"20\" />\n\t\t\t\t\t\t</template>\n\t\t\t\t\t\t<template #actions>\n\t\t\t\t\t\t\t<NcActionButton>\n\t\t\t\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t\t\t\t<IconPencil :size=\"20\" />\n\t\t\t\t\t\t\t\t</template>\n\t\t\t\t\t\t\t\tRename\n\t\t\t\t\t\t\t</NcActionButton>\n\t\t\t\t\t\t\t<NcActionButton>\n\t\t\t\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t\t\t\t<IconDelete :size=\"20\" />\n\t\t\t\t\t\t\t\t</template>\n\t\t\t\t\t\t\t\tDelete\n\t\t\t\t\t\t\t</NcActionButton>\n\t\t\t\t\t\t\t<NcActionButton>\n\t\t\t\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t\t\t\t<IconArrowRight :size=\"20\" />\n\t\t\t\t\t\t\t\t</template>\n\t\t\t\t\t\t\t\tValidate\n\t\t\t\t\t\t\t</NcActionButton>\n\t\t\t\t\t\t\t<NcActionButton>\n\t\t\t\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t\t\t\t<IconDownload :size=\"20\" />\n\t\t\t\t\t\t\t\t</template>\n\t\t\t\t\t\t\t\tDownload\n\t\t\t\t\t\t\t</NcActionButton>\n\t\t\t\t\t\t</template>\n\t\t\t\t\t</NcAppNavigationCaption>\n\t\t\t\t</template>\n\t\t\t</NcAppNavigation>\n\t\t</div>\n\t</template>\n\t<script>\n\t\timport IconArrowRight from 'vue-material-design-icons/ArrowRight.vue'\n\t\timport IconDelete from 'vue-material-design-icons/Delete.vue'\n\t\timport IconDownload from 'vue-material-design-icons/Download.vue'\n\t\timport IconPencil from 'vue-material-design-icons/Pencil.vue'\n\t\timport IconPlus from 'vue-material-design-icons/Plus.vue'\n\n\t\texport default {\n\t\t\tcomponents: {\n\t\t\t\tIconArrowRight,\n\t\t\t\tIconDelete,\n\t\t\t\tIconDownload,\n\t\t\t\tIconPencil,\n\t\t\t\tIconPlus,\n\t\t\t}\n\t\t}\n\t</script>\n\t<style scoped>\n\t\t/ Mock NcContent /\n\t\t.styleguide-nc-content {\n\t\t\tbackground-color: var(--color-background-plain);\n\t\t\toverflow: hidden;\n\t\t}\n\t</style>\n```\n\n### Element used as a heading\n```vue\n\t<template>\n\t\t<div class=\"styleguide-nc-content\">\n\t\t\t<NcAppNavigation>\n\t\t\t\t<!-- if you need multiple lists you can use it in the default slot like this: -->\n\t\t\t\t<NcAppNavigationCaption heading-id=\"people-heading\"\n\t\t\t\t\tis-heading\n\t\t\t\t\tname=\"People\" />\n\t\t\t\t<NcAppNavigationList aria-labelledby=\"people-heading\">\n\t\t\t\t\t<NcAppNavigationItem name=\"Emma\" />\n\t\t\t\t\t<NcAppNavigationItem name=\"Jane\" />\n\t\t\t\t\t<NcAppNavigationItem name=\"Jake\" />\n\t\t\t\t</NcAppNavigationList>\n\t\t\t\t<NcAppNavigationCaption heading-id=\"places-heading\"\n\t\t\t\t\tis-heading\n\t\t\t\t\tname=\"Places\" />\n\t\t\t\t<NcAppNavigationList aria-labelledby=\"places-heading\">\n\t\t\t\t\t<NcAppNavigationItem name=\"America\" />\n\t\t\t\t\t<NcAppNavigationItem name=\"Australia\" />\n\t\t\t\t\t<NcAppNavigationItem name=\"Europe\" />\n\t\t\t\t</NcAppNavigationList>\n\t\t\t</NcAppNavigation>\n\t\t</div>\n\t</template>\n\t<style scoped>\n\t\t/ Mock NcContent /\n\t\t.styleguide-nc-content {\n\t\t\tbackground-color: var(--color-background-plain);\n\t\t\toverflow: hidden;\n\t\t}\n\t</style>\n```\n\n</docs>\n\n<template>\n\t<component :is=\"wrapperTag\"\n\t\tclass=\"app-navigation-caption\"\n\t\t:class=\"{ 'app-navigation-caption--heading': isHeading }\">\n\t\t<!-- Name of the caption -->\n\t\t<component :is=\"captionTag\"\n\t\t\t:id=\"headingId\"\n\t\t\tclass=\"app-navigation-caption__name\">\n\t\t\t{{ name }}\n\t\t</component>\n\n\t\t<!-- Actions -->\n\t\t<div v-if=\"!!$slots.actions\"\n\t\t\tclass=\"app-navigation-caption__actions\">\n\t\t\t<NcActions v-bind=\"actionsProps\">\n\t\t\t\t<!-- @slot Slot for the actions menu -->\n\t\t\t\t<slot name=\"actions\" />\n\t\t\t\t<template #icon>\n\t\t\t\t\t<slot name=\"actionsTriggerIcon\" />\n\t\t\t\t</template>\n\t\t\t</NcActions>\n\t\t</div>\n\t</component>\n</template>\n\n<script>\nimport NcActions from '../NcActions/NcActions.vue'\n\nexport default {\n\tname: 'NcAppNavigationCaption',\n\n\tcomponents: {\n\t\tNcActions,\n\t},\n\n\tprops: {\n\t\tname: {\n\t\t\ttype: String,\n\t\t\trequired: true,\n\t\t},\n\n\t\t/\n\t\t `id` to set on the inner caption\n\t\t * Can be used for connecting the `NcActionCaption` with `NcActionList` using `aria-labelledby`.\n\t\t /\n\t\theadingId: {\n\t\t\ttype: String,\n\t\t\tdefault: null,\n\t\t},\n\n\t\t/\n\t\t Enable when used as a heading\n\t\t * e.g. Before NcAppNavigationList\n\t\t /\n\t\tisHeading: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/\n\t\t If `isHeading` is set, this defines the heading level that should be used\n\t\t /\n\t\theadingLevel: {\n\t\t\ttype: Number,\n\t\t\tdefault: 2,\n\t\t},\n\n\t\t/\n\t\t Any [NcActions](#/Components/NcActions?id=ncactions-1) prop\n\t\t /\n\t\t// Not an actual prop but needed to show in vue-styleguidist docs\n\t\t// eslint-disable-next-line\n\t\t...NcActions.props,\n\t},\n\n\tcomputed: {\n\t\tactionsProps() {\n\t\t\tconst actionProps = Object.keys(NcActions.props)\n\t\t\tconst props = Object\n\t\t\t\t.entries(this.$props)\n\t\t\t\t// eslint-disable-next-line @typescript-eslint/no-unused-vars\n\t\t\t\t.filter(([key, _value]) => actionProps.includes(key))\n\t\t\treturn Object.fromEntries(props)\n\t\t},\n\t\twrapperTag() {\n\t\t\treturn this.isHeading ? 'div' : 'li'\n\t\t},\n\t\tcaptionTag() {\n\t\t\t// Limit to at least h2 as h1 is considered invalid and reserved\n\t\t\tconst headingLevel = Math.max(2, this.headingLevel)\n\t\t\treturn this.isHeading ? `h${headingLevel}` : 'span'\n\t\t},\n\t},\n}\n</script>\n\n<style lang=\"scss\" scoped>\n\n.app-navigation-caption {\n\tdisplay: flex;\n\tjustify-content: space-between;\n\n\t&--heading {\n\t\tpadding: var(--app-navigation-padding);\n\t\t&:not(:first-child):not(:last-child) {\n\t\t\tpadding: 0 var(--app-navigation-padding);\n\t\t}\n\t}\n\n\t&__name {\n\t\tfont-weight: bold;\n\t\tcolor: var(--color-main-text);\n\t\tfont-size: var(--default-font-size);\n\t\tline-height: var(--default-clickable-area);\n\t\twhite-space: nowrap;\n\t\toverflow: hidden;\n\t\ttext-overflow: ellipsis;\n\t\tbox-shadow: none !important;\n\t\tflex-shrink: 0;\n\t\t// padding to align the name with the icon of app navigation items\n\t\tpadding-block: 0;\n\t\tpadding-inline: calc(var(--default-grid-baseline, 4px) 2) 0;\n\t\tmargin-top: 0px;\n\t\tmargin-bottom: var(--default-grid-baseline);\n\t}\n\n\t&__actions {\n\t\tflex: 0 0 var(--default-clickable-area);\n\t}\n}\n\n// extra top space if it's not the first item on the list\n.app-navigation-caption:not(:first-child) {\n\tmargin-top: calc(var(--default-clickable-area) / 2);\n}\n</style>\n"],"names":["_createBlock","_resolveDynamicComponent","_normalizeClass","_withCtx","_createTextVNode","_toDisplayString","_openBlock","_createElementBlock","_createVNode","_normalizeProps","_guardReactiveProps","_renderSlot","_createCommentVNode"],"mappings":";;;AAkLA,MAAK,YAAU;AAAA,EACd,MAAM;AAAA,EAEN,YAAY;AAAA,IACX;AAAA,EACA;AAAA,EAED,OAAO;AAAA,IACN,MAAM;AAAA,MACL,MAAM;AAAA,MACN,UAAU;AAAA,IACV;AAAA;AAAA;AAAA;AAAA;AAAA,IAMD,WAAW;AAAA,MACV,MAAM;AAAA,MACN,SAAS;AAAA,IACT;AAAA;AAAA;AAAA;AAAA;AAAA,IAMD,WAAW;AAAA,MACV,MAAM;AAAA,MACN,SAAS;AAAA,IACT;AAAA;AAAA;AAAA;AAAA,IAKD,cAAc;AAAA,MACb,MAAM;AAAA,MACN,SAAS;AAAA,IACT;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOD,GAAG,UAAU;AAAA,EACb;AAAA,EAED,UAAU;AAAA,IACT,eAAe;AACd,YAAM,cAAc,OAAO,KAAK,UAAU,KAAK;AAC/C,YAAM,QAAQ,OACZ,QAAQ,KAAK,MAAM,EAEnB,OAAO,CAAC,CAAC,KAAK,MAAM,MAAM,YAAY,SAAS,GAAG,CAAC;AACrD,aAAO,OAAO,YAAY,KAAK;AAAA,IAC/B;AAAA,IACD,aAAa;AACZ,aAAO,KAAK,YAAY,QAAQ;AAAA,IAChC;AAAA,IACD,aAAa;AAEZ,YAAM,eAAe,KAAK,IAAI,GAAG,KAAK,YAAY;AAClD,aAAO,KAAK,YAAY,IAAI,YAAY,KAAK;AAAA,IAC7C;AAAA,EACD;AACF;;EAnPA,KAAA;AAAA,EAmKG,OAAM;;;;sBAZRA,YAvJDC,wBAuJiB,SAAU,UAAA,GAAA;AAAA,IACzB,OAxJFC,eAAA,CAwJQ,0BAAwB,EAAA,mCACe,OAAS,WAAA,CAAA;AAAA;IAzJxD,SAAAC,QA2JE,MAIY;AAAA,oBAJZH,YA3JFC,wBA2JkB,SAAU,UAAA,GAAA;AAAA,QACxB,IAAI,OAAS;AAAA,QACd,OAAM;AAAA;QA7JT,SAAAE,QA8JG,MAAU;AAAA,UA9JbC,gBAAAC,gBA8JM,OAAI,IAAA,GAAA,CAAA;AAAA;QA9JV,GAAA;AAAA;MAkKe,CAAA,CAAA,KAAA,OAAO,WAApBC,aAAAC,mBASM,OATN,YASM;AAAA,QAPLC,YAMY,sBA1KfC,eAAAC,mBAoKsB,SAAY,YAAA,CAAA,GAAA;AAAA,UAGnB,cACV,MAAkC;AAAA,YAAlCC,WAAkC,KAAA,QAAA,sBAAA,CAAA,GAAA,QAAA,IAAA;AAAA;UAxKvC,SAAAR,QAsKI,MAAuB;AAAA,YAAvBQ,WAAuB,KAAA,QAAA,WAAA,CAAA,GAAA,QAAA,IAAA;AAAA;UAtK3B,GAAA;AAAA;YAAAC,mBAAA,IAAA,IAAA;AAAA;IAAA,GAAA;AAAA;;;"}
1	+ {"version":3,"file":"NcAppNavigationCaption-DTVdWgpf.mjs","sources":["../../src/components/NcAppNavigationCaption/NcAppNavigationCaption.vue"],"sourcesContent":["<!--\n - SPDX-FileCopyrightText: 2019 Nextcloud GmbH and Nextcloud contributors\n - SPDX-License-Identifier: AGPL-3.0-or-later\n-->\n\n<docs>\n### Basic usage\n\n```vue\n\t<template>\n\t\t<div class=\"styleguide-nc-content\">\n\t\t\t<NcAppNavigation>\n\t\t\t\t<template #list>\n\t\t\t\t\t<NcAppNavigationCaption\n\t\t\t\t\t\tname=\"Your caption goes here\">\n\t\t\t\t\t\t<template #actions>\n\t\t\t\t\t\t\t<NcActionButton>\n\t\t\t\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t\t\t\t<IconPlus :size=\"20\" />\n\t\t\t\t\t\t\t\t</template>\n\t\t\t\t\t\t\t\tThis is an action\n\t\t\t\t\t\t\t</NcActionButton>\n\t\t\t\t\t\t</template>\n\t\t\t\t\t</NcAppNavigationCaption>\n\t\t\t\t</template>\n\t\t\t</NcAppNavigation>\n\t\t</div>\n\t</template>\n\t<script>\n\timport IconPlus from 'vue-material-design-icons/Plus.vue'\n\n\texport default {\n\t\tcomponents: {\n\t\t\tIconPlus,\n\t\t},\n\t}\n\t</script>\n\t<style scoped>\n\t\t/* Mock NcContent /\n\t\t.styleguide-nc-content {\n\t\t\tbackground-color: var(--color-background-plain);\n\t\t\toverflow: hidden;\n\t\t}\n\t</style>\n```\n\n### Element with a slot for custom actions icon\n```vue\n\t<template>\n\t\t<div class=\"styleguide-nc-content\">\n\t\t\t<NcAppNavigation>\n\t\t\t\t<template #list>\n\t\t\t\t\t<NcAppNavigationCaption\n\t\t\t\t\t\tname=\"Your caption goes here\">\n\t\t\t\t\t\t<template #actionsTriggerIcon>\n\t\t\t\t\t\t\t<IconPlus slot=\"icon\" :size=\"20\" />\n\t\t\t\t\t\t</template>\n\t\t\t\t\t\t<template #actions>\n\t\t\t\t\t\t\t<NcActionButton>\n\t\t\t\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t\t\t\t<IconPencil :size=\"20\" />\n\t\t\t\t\t\t\t\t</template>\n\t\t\t\t\t\t\t\tRename\n\t\t\t\t\t\t\t</NcActionButton>\n\t\t\t\t\t\t\t<NcActionButton>\n\t\t\t\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t\t\t\t<IconDelete :size=\"20\" />\n\t\t\t\t\t\t\t\t</template>\n\t\t\t\t\t\t\t\tDelete\n\t\t\t\t\t\t\t</NcActionButton>\n\t\t\t\t\t\t\t<NcActionButton>\n\t\t\t\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t\t\t\t<IconArrowRight :size=\"20\" />\n\t\t\t\t\t\t\t\t</template>\n\t\t\t\t\t\t\t\tValidate\n\t\t\t\t\t\t\t</NcActionButton>\n\t\t\t\t\t\t\t<NcActionButton>\n\t\t\t\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t\t\t\t<IconDownload :size=\"20\" />\n\t\t\t\t\t\t\t\t</template>\n\t\t\t\t\t\t\t\tDownload\n\t\t\t\t\t\t\t</NcActionButton>\n\t\t\t\t\t\t</template>\n\t\t\t\t\t</NcAppNavigationCaption>\n\t\t\t\t</template>\n\t\t\t</NcAppNavigation>\n\t\t</div>\n\t</template>\n\t<script>\n\t\timport IconArrowRight from 'vue-material-design-icons/ArrowRight.vue'\n\t\timport IconDelete from 'vue-material-design-icons/Delete.vue'\n\t\timport IconDownload from 'vue-material-design-icons/Download.vue'\n\t\timport IconPencil from 'vue-material-design-icons/Pencil.vue'\n\t\timport IconPlus from 'vue-material-design-icons/Plus.vue'\n\n\t\texport default {\n\t\t\tcomponents: {\n\t\t\t\tIconArrowRight,\n\t\t\t\tIconDelete,\n\t\t\t\tIconDownload,\n\t\t\t\tIconPencil,\n\t\t\t\tIconPlus,\n\t\t\t}\n\t\t}\n\t</script>\n\t<style scoped>\n\t\t/ Mock NcContent /\n\t\t.styleguide-nc-content {\n\t\t\tbackground-color: var(--color-background-plain);\n\t\t\toverflow: hidden;\n\t\t}\n\t</style>\n```\n\n### Element used as a heading\n```vue\n\t<template>\n\t\t<div class=\"styleguide-nc-content\">\n\t\t\t<NcAppNavigation>\n\t\t\t\t<!-- if you need multiple lists you can use it in the default slot like this: -->\n\t\t\t\t<NcAppNavigationCaption heading-id=\"people-heading\"\n\t\t\t\t\tis-heading\n\t\t\t\t\tname=\"People\" />\n\t\t\t\t<NcAppNavigationList aria-labelledby=\"people-heading\">\n\t\t\t\t\t<NcAppNavigationItem name=\"Emma\" />\n\t\t\t\t\t<NcAppNavigationItem name=\"Jane\" />\n\t\t\t\t\t<NcAppNavigationItem name=\"Jake\" />\n\t\t\t\t</NcAppNavigationList>\n\t\t\t\t<NcAppNavigationCaption heading-id=\"places-heading\"\n\t\t\t\t\tis-heading\n\t\t\t\t\tname=\"Places\" />\n\t\t\t\t<NcAppNavigationList aria-labelledby=\"places-heading\">\n\t\t\t\t\t<NcAppNavigationItem name=\"America\" />\n\t\t\t\t\t<NcAppNavigationItem name=\"Australia\" />\n\t\t\t\t\t<NcAppNavigationItem name=\"Europe\" />\n\t\t\t\t</NcAppNavigationList>\n\t\t\t</NcAppNavigation>\n\t\t</div>\n\t</template>\n\t<style scoped>\n\t\t/ Mock NcContent /\n\t\t.styleguide-nc-content {\n\t\t\tbackground-color: var(--color-background-plain);\n\t\t\toverflow: hidden;\n\t\t}\n\t</style>\n```\n\n</docs>\n\n<template>\n\t<component :is=\"wrapperTag\"\n\t\tclass=\"app-navigation-caption\"\n\t\t:class=\"{ 'app-navigation-caption--heading': isHeading }\">\n\t\t<!-- Name of the caption -->\n\t\t<component :is=\"captionTag\"\n\t\t\t:id=\"headingId\"\n\t\t\tclass=\"app-navigation-caption__name\">\n\t\t\t{{ name }}\n\t\t</component>\n\n\t\t<!-- Actions -->\n\t\t<div v-if=\"!!$slots.actions\"\n\t\t\tclass=\"app-navigation-caption__actions\">\n\t\t\t<NcActions v-bind=\"actionsProps\">\n\t\t\t\t<!-- @slot Slot for the actions menu -->\n\t\t\t\t<slot name=\"actions\" />\n\t\t\t\t<template #icon>\n\t\t\t\t\t<slot name=\"actionsTriggerIcon\" />\n\t\t\t\t</template>\n\t\t\t</NcActions>\n\t\t</div>\n\t</component>\n</template>\n\n<script>\nimport NcActions from '../NcActions/NcActions.vue'\n\nexport default {\n\tname: 'NcAppNavigationCaption',\n\n\tcomponents: {\n\t\tNcActions,\n\t},\n\n\tprops: {\n\t\tname: {\n\t\t\ttype: String,\n\t\t\trequired: true,\n\t\t},\n\n\t\t/\n\t\t `id` to set on the inner caption\n\t\t * Can be used for connecting the `NcActionCaption` with `NcActionList` using `aria-labelledby`.\n\t\t /\n\t\theadingId: {\n\t\t\ttype: String,\n\t\t\tdefault: null,\n\t\t},\n\n\t\t/\n\t\t Enable when used as a heading\n\t\t * e.g. Before NcAppNavigationList\n\t\t /\n\t\tisHeading: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/\n\t\t If `isHeading` is set, this defines the heading level that should be used\n\t\t /\n\t\theadingLevel: {\n\t\t\ttype: Number,\n\t\t\tdefault: 2,\n\t\t},\n\n\t\t/\n\t\t Any [NcActions](#/Components/NcActions?id=ncactions-1) prop\n\t\t /\n\t\t// Not an actual prop but needed to show in vue-styleguidist docs\n\t\t// eslint-disable-next-line\n\t\t...NcActions.props,\n\t},\n\n\tcomputed: {\n\t\tactionsProps() {\n\t\t\tconst actionProps = Object.keys(NcActions.props)\n\t\t\tconst props = Object\n\t\t\t\t.entries(this.$props)\n\t\t\t\t// eslint-disable-next-line @typescript-eslint/no-unused-vars\n\t\t\t\t.filter(([key, _value]) => actionProps.includes(key))\n\t\t\treturn Object.fromEntries(props)\n\t\t},\n\t\twrapperTag() {\n\t\t\treturn this.isHeading ? 'div' : 'li'\n\t\t},\n\t\tcaptionTag() {\n\t\t\t// Limit to at least h2 as h1 is considered invalid and reserved\n\t\t\tconst headingLevel = Math.max(2, this.headingLevel)\n\t\t\treturn this.isHeading ? `h${headingLevel}` : 'span'\n\t\t},\n\t},\n}\n</script>\n\n<style lang=\"scss\" scoped>\n\n.app-navigation-caption {\n\tdisplay: flex;\n\tjustify-content: space-between;\n\n\t&--heading {\n\t\tpadding: var(--app-navigation-padding);\n\t\t&:not(:first-child):not(:last-child) {\n\t\t\tpadding: 0 var(--app-navigation-padding);\n\t\t}\n\t}\n\n\t&__name {\n\t\tfont-weight: bold;\n\t\tcolor: var(--color-main-text);\n\t\tfont-size: var(--default-font-size);\n\t\tline-height: var(--default-clickable-area);\n\t\twhite-space: nowrap;\n\t\toverflow: hidden;\n\t\ttext-overflow: ellipsis;\n\t\tbox-shadow: none !important;\n\t\tflex-shrink: 0;\n\t\t// padding to align the name with the icon of app navigation items\n\t\tpadding-block: 0;\n\t\tpadding-inline: calc(var(--default-grid-baseline, 4px) 2) 0;\n\t\tmargin-top: 0px;\n\t\tmargin-bottom: var(--default-grid-baseline);\n\t}\n\n\t&__actions {\n\t\tflex: 0 0 var(--default-clickable-area);\n\t}\n}\n\n// extra top space if it's not the first item on the list\n.app-navigation-caption:not(:first-child) {\n\tmargin-top: calc(var(--default-clickable-area) / 2);\n}\n</style>\n"],"names":["_createBlock","_resolveDynamicComponent","_normalizeClass","_withCtx","_createTextVNode","_toDisplayString","_openBlock","_createElementBlock","_createVNode","_normalizeProps","_guardReactiveProps","_renderSlot","_createCommentVNode"],"mappings":";;;AAkLA,MAAK,YAAU;AAAA,EACd,MAAM;AAAA,EAEN,YAAY;AAAA,IACX;AAAA,EACA;AAAA,EAED,OAAO;AAAA,IACN,MAAM;AAAA,MACL,MAAM;AAAA,MACN,UAAU;AAAA,IACV;AAAA;AAAA;AAAA;AAAA;AAAA,IAMD,WAAW;AAAA,MACV,MAAM;AAAA,MACN,SAAS;AAAA,IACT;AAAA;AAAA;AAAA;AAAA;AAAA,IAMD,WAAW;AAAA,MACV,MAAM;AAAA,MACN,SAAS;AAAA,IACT;AAAA;AAAA;AAAA;AAAA,IAKD,cAAc;AAAA,MACb,MAAM;AAAA,MACN,SAAS;AAAA,IACT;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOD,GAAG,UAAU;AAAA,EACb;AAAA,EAED,UAAU;AAAA,IACT,eAAe;AACd,YAAM,cAAc,OAAO,KAAK,UAAU,KAAK;AAC/C,YAAM,QAAQ,OACZ,QAAQ,KAAK,MAAM,EAEnB,OAAO,CAAC,CAAC,KAAK,MAAM,MAAM,YAAY,SAAS,GAAG,CAAC;AACrD,aAAO,OAAO,YAAY,KAAK;AAAA,IAC/B;AAAA,IACD,aAAa;AACZ,aAAO,KAAK,YAAY,QAAQ;AAAA,IAChC;AAAA,IACD,aAAa;AAEZ,YAAM,eAAe,KAAK,IAAI,GAAG,KAAK,YAAY;AAClD,aAAO,KAAK,YAAY,IAAI,YAAY,KAAK;AAAA,IAC7C;AAAA,EACD;AACF;;EAnPA,KAAA;AAAA,EAmKG,OAAM;;;;sBAZRA,YAvJDC,wBAuJiB,SAAU,UAAA,GAAA;AAAA,IACzB,OAxJFC,eAAA,CAwJQ,0BAAwB,EAAA,mCACe,OAAS,WAAA,CAAA;AAAA;IAzJxD,SAAAC,QA2JE,MAIY;AAAA,oBAJZH,YA3JFC,wBA2JkB,SAAU,UAAA,GAAA;AAAA,QACxB,IAAI,OAAS;AAAA,QACd,OAAM;AAAA;QA7JT,SAAAE,QA8JG,MAAU;AAAA,UA9JbC,gBAAAC,gBA8JM,OAAI,IAAA,GAAA,CAAA;AAAA;QA9JV,GAAA;AAAA;MAkKe,CAAA,CAAA,KAAA,OAAO,WAApBC,aAAAC,mBASM,OATN,YASM;AAAA,QAPLC,YAMY,sBA1KfC,eAAAC,mBAoKsB,SAAY,YAAA,CAAA,GAAA;AAAA,UAGnB,cACV,MAAkC;AAAA,YAAlCC,WAAkC,KAAA,QAAA,sBAAA,CAAA,GAAA,QAAA,IAAA;AAAA;UAxKvC,SAAAR,QAsKI,MAAuB;AAAA,YAAvBQ,WAAuB,KAAA,QAAA,WAAA,CAAA,GAAA,QAAA,IAAA;AAAA;UAtK3B,GAAA;AAAA;YAAAC,mBAAA,IAAA,IAAA;AAAA;IAAA,GAAA;AAAA;;;"}

package/dist/chunks/NcAppNavigationIconBullet-B1kc4u65.mjs CHANGED Viewed

@@ -41,3 +41,4 @@ const NcAppNavigationIconBullet = /* @__PURE__ */ _export_sfc(_sfc_main, [["rend
 export {
   NcAppNavigationIconBullet as N
 };
+//# sourceMappingURL=NcAppNavigationIconBullet-B1kc4u65.mjs.map

package/dist/chunks/{NcAppNavigationItem-C7bIZuo2.mjs → NcAppNavigationItem-5KG5Pl2c.mjs} RENAMED Viewed

@@ -1,18 +1,18 @@
-import '../assets/NcAppNavigationItem-PKTHyQue.css';
-import { N as NcActions } from "./NcActions-DxTtucKk.mjs";
-import { N as NcActionButton } from "./NcActionButton-DBFJTCO5.mjs";
+import '../assets/NcAppNavigationItem-DRU-cLRN.css';
+import { N as NcActions } from "./NcActions-DpYAcY6a.mjs";
+import { N as NcActionButton } from "./NcActionButton-BZEDhdCm.mjs";
 import { N as NcLoadingIcon } from "./NcLoadingIcon-CsMn1bFR.mjs";
 import _sfc_main$4 from "../components/NcVNodes/index.mjs";
-import { r as register, H as t19, a as t, d as t47, I as t20 } from "./_l10n-BEP_UzXI.mjs";
-import { N as NcButton } from "./NcButton-QmfEsvXC.mjs";
+import { r as register, F as t20, a as t, d as t46, G as t21 } from "./_l10n-BNGeEX3W.mjs";
+import { N as NcButton } from "./NcButton-Byg8-ta1.mjs";
 import { C as ChevronDown } from "./ChevronDown-FiGpp0KT.mjs";
 import { C as ChevronUp } from "./ChevronUp-DPXFp1ss.mjs";
 import { resolveComponent, createBlock, openBlock, normalizeClass, withCtx, createElementBlock, mergeProps, createElementVNode, createCommentVNode, toDisplayString, resolveDynamicComponent, normalizeProps, guardReactiveProps, renderSlot, withKeys, withModifiers, createVNode, createTextVNode } from "vue";
 import { _ as _export_sfc } from "./_plugin-vue_export-helper-1tPrXgE0.mjs";
+import { N as NcInputConfirmCancel } from "./NcInputConfirmCancel-DeWD9uc6.mjs";
 import { useIsMobile } from "../composables/useIsMobile/index.mjs";
-import { N as NcInputConfirmCancel } from "./NcInputConfirmCancel-xnrPAGac.mjs";
-import { G as GenRandomId } from "./GenRandomId-CMooMQt0.mjs";
-register(t19);
+import { c as createElementId } from "./createElementId-DhjFt1I9.mjs";
+register(t20);
 const _sfc_main$3 = {
   name: "NcAppNavigationIconCollapsible",
   components: {
@@ -44,8 +44,8 @@ function _sfc_render$3(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_NcButton = resolveComponent("NcButton");
   return openBlock(), createBlock(_component_NcButton, {
     class: normalizeClass(["icon-collapse", { "icon-collapse--open": $props.open }]),
-    type: "tertiary",
     "aria-label": $options.labelButton,
+    variant: "tertiary",
     onClick: $options.onClick
   }, {
     icon: withCtx(() => [
@@ -60,8 +60,8 @@ function _sfc_render$3(_ctx, _cache, $props, $setup, $data, $options) {
     _: 1
   }, 8, ["class", "aria-label", "onClick"]);
 }
-const NcAppNavigationIconCollapsible = /* @__PURE__ */ _export_sfc(_sfc_main$3, [["render", _sfc_render$3], ["__scopeId", "data-v-f91ad265"]]);
-register(t20, t47);
+const NcAppNavigationIconCollapsible = /* @__PURE__ */ _export_sfc(_sfc_main$3, [["render", _sfc_render$3], ["__scopeId", "data-v-a22b5c4b"]]);
+register(t21, t46);
 const _sfc_main$2 = {
   name: "PencilIcon",
   emits: ["click"],
@@ -188,7 +188,7 @@ const _sfc_main = {
      */
     id: {
       type: String,
-      default: () => "app-navigation-item-" + GenRandomId(),
+      default: () => createElementId(),
       validator: (id) => id.trim() !== ""
     },
     /**
@@ -565,9 +565,9 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
               "boundaries-element": $data.actionsBoundariesElement,
               placement: $props.menuPlacement,
               open: $props.menuOpen,
-              type: isActive && $props.to || $props.active ? "primary" : null,
               "force-menu": $props.forceMenu,
               "default-icon": $props.menuIcon,
+              variant: isActive && $props.to || $props.active ? "primary" : null,
               "onUpdate:open": $options.onMenuToggle
             }, {
               icon: withCtx(() => [
@@ -600,7 +600,7 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
                 renderSlot(_ctx.$slots, "actions", {}, void 0, true)
               ]),
               _: 2
-            }, 1032, ["inline", "boundaries-element", "placement", "open", "type", "force-menu", "default-icon", "onUpdate:open"])) : createCommentVNode("", true)
+            }, 1032, ["inline", "boundaries-element", "placement", "open", "force-menu", "default-icon", "variant", "onUpdate:open"])) : createCommentVNode("", true)
           ], 2)) : createCommentVNode("", true),
           $props.allowCollapse && !!_ctx.$slots.default ? (openBlock(), createBlock(_component_NcAppNavigationIconCollapsible, {
             key: 3,
@@ -617,7 +617,8 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
     ])) : createCommentVNode("", true)
   ], 10, _hoisted_1);
 }
-const NcAppNavigationItem = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__scopeId", "data-v-e6b9a4c4"]]);
+const NcAppNavigationItem = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__scopeId", "data-v-fea09060"]]);
 export {
   NcAppNavigationItem as N
 };
+//# sourceMappingURL=NcAppNavigationItem-5KG5Pl2c.mjs.map

package/dist/chunks/NcAppNavigationItem-5KG5Pl2c.mjs.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"NcAppNavigationItem-5KG5Pl2c.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\n<template>\n\t\n\t<NcButton class=\"icon-collapse\"\n\t\t:class=\"{'icon-collapse--open':open}\"\n\t\t:aria-label=\"labelButton\"\n\t\tvariant=\"tertiary\"\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\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\">\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\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\n\t\t\t\t\t\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\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\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\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\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:force-menu=\"forceMenu\"\n\t\t\t\t\t\t:default-icon=\"menuIcon\"\n\t\t\t\t\t\t:variant=\"(isActive && to) || active ? 'primary' : null\"\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\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\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\n\t\t\t\t<slot name=\"extra\" />\n\t\t\t</div>\n\t\t</component>\n\t\t\n\t\t<ul v-if=\"canHaveChildren && !!$slots.default\" class=\"app-navigation-entry__children\">\n\t\t\t\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 NcInputConfirmCancel from './NcInputConfirmCancel.vue'\nimport { useIsMobile } from '../../composables/useIsMobile/index.js'\nimport { createElementId } from '../../utils/createElementId.ts'\nimport { t } from '../../l10n.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: () => createElementId(),\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@use '../../assets/NcAppNavigationItem.scss';\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 CHANGED Viewed

@@ -14,3 +14,4 @@ const NcAppNavigationList = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _
 export {
   NcAppNavigationList as N
 };
+//# sourceMappingURL=NcAppNavigationList-DX_Yo23V.mjs.map

package/dist/chunks/{NcAppNavigationNew-BO-Llutk.mjs → NcAppNavigationNew-BUQgcKdv.mjs} RENAMED Viewed

@@ -1,5 +1,5 @@
-import '../assets/NcAppNavigationNew-L_VNZNL4.css';
-import { N as NcButton } from "./NcButton-QmfEsvXC.mjs";
+import '../assets/NcAppNavigationNew-Ba3wWpcY.css';
+import { N as NcButton } from "./NcButton-Byg8-ta1.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 = {
@@ -21,7 +21,11 @@ const _sfc_main = {
       type: String,
       required: true
     },
-    type: {
+    /**
+     * The color variant to use.
+     * @default 'primary'
+     */
+    variant: {
       type: String,
       default: "primary",
       validator(value) {
@@ -38,7 +42,7 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
     createVNode(_component_NcButton, {
       id: $props.buttonId,
       disabled: $props.disabled,
-      type: $props.type,
+      variant: $props.variant,
       onClick: _cache[0] || (_cache[0] = ($event) => _ctx.$emit("click"))
     }, {
       icon: withCtx(() => [
@@ -48,10 +52,11 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
         createTextVNode(" " + toDisplayString($props.text), 1)
       ]),
       _: 3
-    }, 8, ["id", "disabled", "type"])
+    }, 8, ["id", "disabled", "variant"])
   ]);
 }
-const NcAppNavigationNew = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__scopeId", "data-v-1eae9ec9"]]);
+const NcAppNavigationNew = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__scopeId", "data-v-08119e68"]]);
 export {
   NcAppNavigationNew as N
 };
+//# sourceMappingURL=NcAppNavigationNew-BUQgcKdv.mjs.map

package/dist/chunks/NcAppNavigationNew-BUQgcKdv.mjs.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"NcAppNavigationNew-BUQgcKdv.mjs","sources":["../../src/components/NcAppNavigationNew/NcAppNavigationNew.vue"],"sourcesContent":["\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\n\t\t\t:variant\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\n\t\t/**\n\t\t * The color variant to use.\n\t\t * @default 'primary'\n\t\t */\n\t\tvariant: {\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;AAAA;AAAA;AAAA;AAAA,IAMD,SAAS;AAAA,MACR,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;AAlDM,MAAA,aAAA,EAAA,OAAM,qBAAoB;;;AAA/B,SAAAA,UAAA,GAAAC,mBAUM,OAVN,YAUM;AAAA,IATLC,YAQW,qBAAA;AAAA,MARA,IAAI,OAAQ;AAAA,MACrB,UAAA,OAAQ;AAAA,MACR,SAAA,OAAO;AAAA,MACP,+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 → NcAppNavigationNewItem-CRCOC0hV.mjs} RENAMED Viewed

@@ -1,5 +1,5 @@
-import '../assets/NcAppNavigationNewItem-rCrG0Uuo.css';
-import { N as NcInputConfirmCancel } from "./NcInputConfirmCancel-xnrPAGac.mjs";
+import '../assets/NcAppNavigationNewItem-CsqJ6c8v.css';
+import { N as NcInputConfirmCancel } from "./NcInputConfirmCancel-DeWD9uc6.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";
@@ -114,7 +114,8 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
     ])
   ], 2);
 }
-const NcAppNavigationNewItem = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__scopeId", "data-v-46fee9ac"]]);
+const NcAppNavigationNewItem = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__scopeId", "data-v-517f8f86"]]);
 export {
   NcAppNavigationNewItem as N
 };
+//# sourceMappingURL=NcAppNavigationNewItem-CRCOC0hV.mjs.map

package/dist/chunks/{NcAppNavigationNewItem-D7CYmmOm.mjs.map → NcAppNavigationNewItem-CRCOC0hV.mjs.map} RENAMED Viewed

	@@ -1 +1 @@
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;;;;"}
1	+ {"version":3,"file":"NcAppNavigationNewItem-CRCOC0hV.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@use '../../assets/NcAppNavigationItem.scss';\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 → NcAppNavigationSearch-AT_S98B0.mjs} RENAMED Viewed

@@ -1,9 +1,9 @@
-import '../assets/NcAppNavigationSearch-Bsr4esEc.css';
+import '../assets/NcAppNavigationSearch-BAzhDRd7.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 { r as register, a as t } from "./_l10n-BNGeEX3W.mjs";
+import { I as IconClose } from "./Close-D6ngJ4t9.mjs";
+import { N as NcInputField } from "./NcInputField-BBS1E7r-.mjs";
 import { _ as _export_sfc } from "./_plugin-vue_export-helper-1tPrXgE0.mjs";
 register();
 const _sfc_main = /* @__PURE__ */ defineComponent({
@@ -79,7 +79,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
           onTrailingButtonClick: onCloseSearch
         }, {
           "trailing-button-icon": withCtx(() => [
-            createVNode(Close, { size: 20 })
+            createVNode(IconClose, { size: 20 })
           ]),
           _: 1
         }, 8, ["modelValue", "aria-label", "placeholder", "trailing-button-label"]),
@@ -98,7 +98,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const NcAppNavigationSearch = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-183b9280"]]);
+const NcAppNavigationSearch = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-6e81eae2"]]);
 export {
   NcAppNavigationSearch as N
 };
+//# sourceMappingURL=NcAppNavigationSearch-AT_S98B0.mjs.map

package/dist/chunks/NcAppNavigationSearch-AT_S98B0.mjs.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"NcAppNavigationSearch-AT_S98B0.mjs","sources":["../../src/components/NcAppNavigationSearch/NcAppNavigationSearch.vue"],"sourcesContent":["\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\" variant=\"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 → NcAppNavigationSettings-DFsvNlME.mjs} RENAMED Viewed

@@ -1,10 +1,10 @@
 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 { c as createElementId } from "./createElementId-DhjFt1I9.mjs";
+import { r as register, a as t } from "./_l10n-BNGeEX3W.mjs";
 import { _ as _export_sfc } from "./_plugin-vue_export-helper-1tPrXgE0.mjs";
-import { N as NcButton } from "./NcButton-QmfEsvXC.mjs";
+import { N as NcButton } from "./NcButton-Byg8-ta1.mjs";
 register();
 const _sfc_main$1 = {
   name: "CogIcon",
@@ -57,7 +57,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     name: { default: () => t("Settings") }
   },
   setup(__props) {
-    const contentId = GenRandomId();
+    const contentId = createElementId();
     const open = ref(false);
     const container2 = useTemplateRef("wrapperElement");
     const ignore = computed(
@@ -129,3 +129,4 @@ const NcAppNavigationSettings = /* @__PURE__ */ _export_sfc(_sfc_main, [["__cssM
 export {
   NcAppNavigationSettings as N
 };
+//# sourceMappingURL=NcAppNavigationSettings-DFsvNlME.mjs.map

package/dist/chunks/NcAppNavigationSettings-DFsvNlME.mjs.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"NcAppNavigationSettings-DFsvNlME.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\n<script setup lang=\"ts\">\nimport type { Slot } from 'vue'\nimport { onClickOutside } from '@vueuse/core'\nimport { computed, ref, useTemplateRef } from 'vue'\nimport { createElementId } from '../../utils/createElementId.js'\nimport { t } from '../../l10n.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 = createElementId()\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,gBAAgB;AAI5B,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 CHANGED Viewed

@@ -12,3 +12,4 @@ const NcAppNavigationSpacer = /* @__PURE__ */ _export_sfc(_sfc_main, [["render",
 export {
   NcAppNavigationSpacer as N
 };
+//# sourceMappingURL=NcAppNavigationSpacer-CzBLuQL8.mjs.map