npm - @nextcloud/vue - Versions diffs - 8.0.1 → 8.1.0 - Mend

@nextcloud/vue 8.0.1 → 8.1.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 (157) hide show

package/dist/Components/NcAppSettingsDialog.cjs CHANGED Viewed

@@ -1,12 +1,11 @@
-var C = require("../assets/index-db5a8b1c.css");
-const u = require("./NcDialog.cjs"), g = require("./NcVNodes.cjs"), p = require("../Mixins/isMobile.cjs"), _ = require("../chunks/l10n-f491109d.cjs"), h = require("debounce"), f = require("../chunks/_plugin-vue2_normalizer-7f9efb60.cjs"), m = (t) => t && t.__esModule ? t : { default: t }, v = /* @__PURE__ */ m(h);
+var y = require("../assets/index-9ca89b81.css");
+const u = require("./NcDialog.cjs"), g = require("./NcVNodes.cjs"), p = require("../Composables/useIsMobile.cjs"), _ = require("../chunks/l10n-c3dbf018.cjs"), h = require("debounce"), f = require("../chunks/_plugin-vue2_normalizer-7f9efb60.cjs"), m = (t) => t && t.__esModule ? t : { default: t }, v = /* @__PURE__ */ m(h);
 const S = {
   name: "NcAppSettingsDialog",
   components: {
     NcDialog: u,
     NcVNodes: g
   },
-  mixins: [p],
   provide() {
     return {
       registerSection: this.registerSection,
@@ -51,6 +50,11 @@ const S = {
     }
   },
   emits: ["update:open"],
+  setup() {
+    return {
+      isMobile: p.useIsMobile()
+    };
+  },
   data() {
     return {
       selectedSection: "",
@@ -169,9 +173,9 @@ var N = function() {
   k,
   !1,
   null,
-  "b5b2caa2",
+  "c8194bfe",
   null,
   null
 );
-const y = b.exports;
-module.exports = y;
+const C = b.exports;
+module.exports = C;

package/dist/Components/NcAppSettingsDialog.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"NcAppSettingsDialog.cjs","sources":["../../src/components/NcAppSettingsDialog/NcAppSettingsDialog.vue"],"sourcesContent":["<!--\n - @copyright Copyright (c) 2020 Marco Ambrosini <marcoambrosini@icloud.com>\n -\n - @author Marco Ambrosini <marcoambrosini@icloud.com>\n - @author Ferdinand Thiessen <opensource@fthiessen.de>\n -\n - @license AGPL-3.0-or-later\n -\n - This program is free software: you can redistribute it and/or modify\n - it under the terms of the GNU Affero General Public License as\n - published by the Free Software Foundation, either version 3 of the\n - License, or (at your option) any later version.\n -\n - This program is distributed in the hope that it will be useful,\n - but WITHOUT ANY WARRANTY; without even the implied warranty of\n - MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the\n - GNU Affero General Public License for more details.\n -\n - You should have received a copy of the GNU Affero General Public License\n - along with this program. If not, see <http://www.gnu.org/licenses/>.\n -\n -->\n<docs>\nJust nest the `AppSettingSections` component into `NcAppSettingsDialog`,\nproviding the section's name prop. You can put your settings within each\n`NcAppSettingsSection` component.\n\n```vue\n<template>\n\t<div>\n\t\t<NcButton @click=\"settingsOpen = true\">Show Settings</NcButton>\n\t\t<NcAppSettingsDialog :open.sync=\"settingsOpen\" :show-navigation=\"true\" name=\"Application settings\">\n\t\t\t<NcAppSettingsSection id=\"asci-name-1\" name=\"Example name 1\">\n\t\t\t\tSome example content\n\t\t\t</NcAppSettingsSection>\n\t\t\t<NcAppSettingsSection id=\"asci-name-2\" name=\"Example name 2\">\n\t\t\t\tSome more content\n\t\t\t</NcAppSettingsSection>\n\t\t\t<NcAppSettingsSection id=\"asci-name-3\" name=\"Example name 3\">\n\t\t\t\tSome example content\n\t\t\t</NcAppSettingsSection>\n\t\t\t<NcAppSettingsSection id=\"asci-name-4\" name=\"Example name 4\">\n\t\t\t\tSome more content\n\t\t\t</NcAppSettingsSection>\n\t\t\t<NcAppSettingsSection id=\"asci-name-5\" name=\"Example name 5\">\n\t\t\t\tSome example content\n\t\t\t</NcAppSettingsSection>\n\t\t\t<NcAppSettingsSection id=\"asci-name-6\" name=\"Example name 6\">\n\t\t\t\tSome more content\n\t\t\t</NcAppSettingsSection>\n\t\t\t<NcAppSettingsSection id=\"asci-name-7\" name=\"Example name 7\">\n\t\t\t\tSome example content\n\t\t\t</NcAppSettingsSection>\n\t\t\t<NcAppSettingsSection id=\"asci-name-8\" name=\"Example name 8\">\n\t\t\t\tSome more content\n\t\t\t</NcAppSettingsSection>\n\t\t\t<NcAppSettingsSection id=\"asci-name-9\" name=\"Example name 9\">\n\t\t\t\tSome more content\n\t\t\t</NcAppSettingsSection>\n\t\t\t<NcAppSettingsSection id=\"asci-name-10\" name=\"Example name 10\">\n\t\t\t\tSome more content\n\t\t\t</NcAppSettingsSection>\n\t\t</NcAppSettingsDialog>\n\t</div>\n</template>\n\n<script>\nexport default {\n\tdata() {\n\t\treturn {\n\t\t\tsettingsOpen: false,\n\t\t}\n\t},\n}\n</script>\n```\n\nYou can also add icons to the section navigation:\n\n```vue\n<template>\n\t<div>\n\t\t<NcButton @click=\"settingsOpen = true\">Show Settings</NcButton>\n\t\t<NcAppSettingsDialog :open.sync=\"settingsOpen\" :show-navigation=\"true\" name=\"Application settings\">\n\t\t\t<NcAppSettingsSection id=\"asci-name-1\" name=\"Instagram\">\n\t\t\t\t<template #icon>\n\t\t\t\t\t<Instagram :size=\"20\" />\n\t\t\t\t</template>\n\t\t\t\t<p style=\"height: 100vh;\">\n\t\t\t\t\tInstagram setting\n\t\t\t\t</p>\n\t\t\t</NcAppSettingsSection>\n\t\t\t<NcAppSettingsSection id=\"asci-name-2\" name=\"Mastodon\">\n\t\t\t\t<template #icon>\n\t\t\t\t\t<Mastodon :size=\"20\" />\n\t\t\t\t</template>\n\t\t\t\t<p style=\"height: 100vh;\">\n\t\t\t\t\tMastodon setting\n\t\t\t\t</p>\n\t\t\t</NcAppSettingsSection>\n\t\t\t<NcAppSettingsSection id=\"asci-name-3\" name=\"Twitch\">\n\t\t\t\t<template #icon>\n\t\t\t\t\t<Twitch :size=\"20\" />\n\t\t\t\t</template>\n\t\t\t\t<p style=\"height: 100vh;\">\n\t\t\t\t\tTwitch setting\n\t\t\t\t</p>\n\t\t\t</NcAppSettingsSection>\n\t\t\t<NcAppSettingsSection id=\"asci-name-4\" name=\"Twitter\">\n\t\t\t\t<template #icon>\n\t\t\t\t\t<Twitter :size=\"20\" />\n\t\t\t\t</template>\n\t\t\t\tTwitter setting\n\t\t\t</NcAppSettingsSection>\n\t\t</NcAppSettingsDialog>\n\t</div>\n</template>\n\n<script>\nimport Instagram from 'vue-material-design-icons/Instagram.vue'\nimport Mastodon from 'vue-material-design-icons/Mastodon.vue'\nimport Twitch from 'vue-material-design-icons/Twitch.vue'\nimport Twitter from 'vue-material-design-icons/Twitter.vue'\n\nexport default {\n\tcomponents: {\n\t\tInstagram,\n\t\tMastodon,\n\t\tTwitch,\n\t\tTwitter,\n\t},\n\tdata() {\n\t\treturn {\n\t\t\tsettingsOpen: false,\n\t\t}\n\t},\n}\n</script>\n```\n</docs>\n\n<template>\n\t<NcDialog v-if=\"open\"\n\t\tv-bind=\"dialogProperties\"\n\t\t@update:open=\"handleCloseModal\">\n\t\t<template #navigation=\"{ isCollapsed }\">\n\t\t\t<ul :aria-label=\"settingsNavigationAriaLabel\"\n\t\t\t\t:class=\"{ 'navigation-list': true, 'navigation-list--collapsed': isCollapsed }\"\n\t\t\t\trole=\"tablist\">\n\t\t\t\t<li v-for=\"section in sections\" :key=\"section.id\">\n\t\t\t\t\t<a :aria-selected=\"section.id === selectedSection\"\n\t\t\t\t\t\t:class=\"{\n\t\t\t\t\t\t\t'navigation-list__link': true,\n\t\t\t\t\t\t\t'navigation-list__link--active': section.id === selectedSection,\n\t\t\t\t\t\t\t'navigation-list__link--icon': hasNavigationIcons,\n\t\t\t\t\t\t}\"\n\t\t\t\t\t\trole=\"tab\"\n\t\t\t\t\t\ttabindex=\"0\"\n\t\t\t\t\t\t@click=\"handleSettingsNavigationClick(section.id)\"\n\t\t\t\t\t\t@keydown.enter=\"handleSettingsNavigationClick(section.id)\">\n\t\t\t\t\t\t<div v-if=\"hasNavigationIcons\" class=\"navigation-list__link-icon\">\n\t\t\t\t\t\t\t<NcVNodes v-if=\"section.icon\" :vnodes=\"section.icon\" />\n\t\t\t\t\t\t</div>\n\t\t\t\t\t\t<span class=\"navigation-list__link-text\">\n\t\t\t\t\t\t\t{{ section.name }}\n\t\t\t\t\t\t</span>\n\t\t\t\t\t</a>\n\t\t\t\t</li>\n\t\t\t</ul>\n\t\t</template>\n\t\t<div ref=\"settingsScroller\">\n\t\t\t<slot />\n\t\t</div>\n\t</NcDialog>\n</template>\n\n<script>\nimport NcDialog from '../NcDialog/index.js'\nimport NcVNodes from '../NcVNodes/index.js'\nimport isMobile from '../../mixins/isMobile/index.js'\nimport { t } from '../../l10n.js'\n\nimport debounce from 'debounce'\n\nexport default {\n\n\tname: 'NcAppSettingsDialog',\n\n\tcomponents: {\n\t\tNcDialog,\n\t\tNcVNodes,\n\t},\n\n\tmixins: [isMobile],\n\tprovide() {\n\t\treturn {\n\t\t\tregisterSection: this.registerSection,\n\t\t\tunregisterSection: this.registerSection,\n\t\t}\n\t},\n\n\tprops: {\n\t\t/*\n\t\t Determines the open / closed state of the modal\n\t\t /\n\t\topen: {\n\t\t\ttype: Boolean,\n\t\t\trequired: true,\n\t\t},\n\t\t/\n\t\t Shows the navigation on desktop if true\n\t\t /\n\t\tshowNavigation: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/\n\t\t Selector for the popover container\n\t\t /\n\t\tcontainer: {\n\t\t\ttype: String,\n\t\t\tdefault: 'body',\n\t\t},\n\n\t\t/\n\t\t Name of the settings\n\t\t /\n\t\tname: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\n\t\t/\n\t\t Additional elements to add to the focus trap\n\t\t /\n\t\tadditionalTrapElements: {\n\t\t\ttype: Array,\n\t\t\tdefault: () => [],\n\t\t},\n\n\t},\n\n\temits: ['update:open'],\n\n\tdata() {\n\t\treturn {\n\t\t\tselectedSection: '',\n\t\t\tlinkClicked: false,\n\t\t\taddedScrollListener: false,\n\t\t\tscroller: null,\n\t\t\t/\n\t\t\t Currently registered settings sections\n\t\t\t * @type {{ id: string, name: string, icon?: VNode[] }}\n\t\t\t /\n\t\t\tsections: [],\n\t\t}\n\t},\n\n\tcomputed: {\n\t\tdialogProperties() {\n\t\t\treturn {\n\t\t\t\tadditionalTrapElements: this.additionalTrapElements,\n\t\t\t\tclass: 'app-settings',\n\t\t\t\tcontainer: this.container,\n\t\t\t\tcontentClasses: 'app-settings__content',\n\t\t\t\tsize: 'large',\n\t\t\t\tname: this.name,\n\t\t\t\tnavigationClasses: 'app-settings__navigation',\n\t\t\t}\n\t\t},\n\n\t\t/\n\t\t Check if one or more navigation entries provide icons\n\t\t /\n\t\thasNavigationIcons() {\n\t\t\treturn this.sections.some(({ icon }) => !!icon)\n\t\t},\n\n\t\thasNavigation() {\n\t\t\tif (this.isMobile \|\| !this.showNavigation) {\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\tsettingsNavigationAriaLabel() {\n\t\t\treturn t('Settings navigation')\n\t\t},\n\t},\n\n\tmounted() {\n\t\t// Select first settings section\n\t\tthis.selectedSection = this.$slots.default[0].componentOptions.propsData.id\n\t},\n\n\tupdated() {\n\t\t// Check that the scroller element has been mounted\n\t\tif (!this.$refs.settingsScroller) {\n\t\t\treturn\n\t\t}\n\t\t// Get the scroller element\n\t\tthis.scroller = this.$refs.settingsScroller\n\t\tif (!this.addedScrollListener) {\n\t\t\tthis.scroller.addEventListener('scroll', this.handleScroll)\n\t\t\tthis.addedScrollListener = true\n\t\t}\n\n\t},\n\n\tmethods: {\n\t\t/\n\t\t Called when a new section is registered\n\t\t * @param {string} id The section ID\n\t\t * @param {string} name The section name\n\t\t * @param {import('vue').VNode[]\|undefined} icon Optional icon component\n\t\t /\n\t\tregisterSection(id, name, icon) {\n\t\t\t// Check for the uniqueness of section names\n\t\t\tif (this.sections.some(({ id: otherId }) => id === otherId)) {\n\t\t\t\tthrow new Error(`Duplicate section id found: ${id}. Settings navigation sections must have unique section ids.`)\n\t\t\t}\n\t\t\tif (this.sections.some(({ name: otherName }) => name === otherName)) {\n\t\t\t\tthrow new Error(`Duplicate section name found: ${name}. Settings navigation sections must have unique section names.`)\n\t\t\t}\n\n\t\t\tconst newSections = [...this.sections, { id, name, icon }]\n\t\t\t// Sort sections by order in slots\n\t\t\tthis.sections = newSections.sort(({ id: idA }, { id: idB }) => {\n\t\t\t\tconst indexOf = (id) => this.$slots.default.indexOf(vnode => vnode?.componentOptions?.propsData?.id === id)\n\t\t\t\treturn indexOf(idA) - indexOf(idB)\n\t\t\t})\n\t\t},\n\n\t\t/\n\t\t Called when a new section is unregistered\n\t\t * @param {string} id The section ID\n\t\t /\n\t\tunregisterSection(id) {\n\t\t\tthis.sections = this.sections.filter(({ id: otherId }) => id === otherId)\n\t\t},\n\n\t\t/\n\t\t Scrolls the content to the selected settings section.absolute\n\t\t \n\t\t @param {string} item the ID of the section\n\t\t */\n\t\thandleSettingsNavigationClick(item) {\n\t\t\tthis.linkClicked = true\n\t\t\tdocument.getElementById('settings-section_' + item).scrollIntoView({\n\t\t\t\tbehavior: 'smooth',\n\t\t\t\tinline: 'nearest',\n\t\t\t})\n\t\t\tthis.selectedSection = item\n\t\t\tsetTimeout(() => {\n\t\t\t\tthis.linkClicked = false\n\t\t\t}, 1000)\n\t\t},\n\n\t\thandleCloseModal(isOpen) {\n\t\t\tif (isOpen) {\n\t\t\t\treturn\n\t\t\t}\n\n\t\t\tthis.$emit('update:open', false)\n\t\t\t// Remove scroll listener each time the modal is closed\n\t\t\tthis.scroller.removeEventListener('scroll', this.handleScroll)\n\t\t\tthis.addedScrollListener = false\n\t\t\tthis.scroller.scrollTop = 0\n\t\t},\n\n\t\thandleScroll() {\n\t\t\tif (!this.linkClicked) {\n\t\t\t\tthis.unfocusNavigationItem()\n\t\t\t}\n\t\t},\n\n\t\t// Remove selected section once the user starts scrolling\n\t\tunfocusNavigationItem: debounce(function() {\n\t\t\tthis.selectedSection = ''\n\t\t\tif (document.activeElement.className.includes('navigation-list__link')) {\n\t\t\t\tdocument.activeElement.blur()\n\t\t\t}\n\t\t}, 300),\n\t},\n}\n\n</script>\n\n<style lang=\"scss\" scoped>\n.app-settings {\n\t&__navigation {\n\t\tmin-width: 200px;\n\t\tmargin-right: 20px;\n\t\toverflow-x: hidden;\n\t\toverflow-y: auto;\n\t\tposition: relative;\n\t\theight: 100%;\n\t}\n\t&__content {\n\t\tmax-width: 100vw;\n\t\toverflow-y: auto;\n\t\toverflow-x: hidden;\n\t\tpadding: 24px;\n\t\twidth: 100%;\n\t}\n}\n\n.navigation-list {\n\theight: 100%;\n\tbox-sizing: border-box;\n\toverflow-y: auto;\n\tpadding: 12px;\n\n\t&--collapsed {\n\t\tdisplay: flex;\n\t\tflex-direction: row;\n\t\tgap: 6px;\n\t}\n\n\t&__link {\n\t\tdisplay: flex;\n\t\talign-content: center;\n\t\tfont-size: 16px;\n\t\theight: $clickable-area;\n\t\tmargin: 4px 0;\n\t\tline-height: $clickable-area;\n\t\tborder-radius: var(--border-radius-pill);\n\t\tfont-weight: bold;\n\t\tpadding: 0 20px;\n\t\tcursor: pointer;\n\t\twhite-space: nowrap;\n\t\ttext-overflow: ellipsis;\n\t\toverflow: hidden;\n\t\tbackground-color: transparent;\n\t\tborder: none;\n\n\t\t&:hover,\n\t\t&:focus {\n\t\t\tbackground-color: var(--color-background-hover);\n\t\t}\n\n\t\t&--active {\n\t\t\tbackground-color: var(--color-primary-element-light) !important;\n\t\t}\n\n\t\t&--icon {\n\t\t\tpadding-inline-start: 8px;\n\t\t\tgap: 4px;\n\t\t}\n\n\t\t&-icon {\n\t\t\tdisplay: flex;\n\t\t\tjustify-content: center;\n\t\t\talign-content: center;\n\t\t\twidth: 36px;\n\t\t\tmax-width: 36px;\n\t\t}\n\t}\n}\n\n</style>\n"],"names":["_sfc_main","Components_NcDialog","Components_NcVNodes","Mixins_isMobile","icon","l10n","id","name","otherId","otherName","newSections","idA","idB","indexOf","vnode","_b","_a","item","isOpen","debounce__default"],"mappings":"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"}
1	+ {"version":3,"file":"NcAppSettingsDialog.cjs","sources":["../../src/components/NcAppSettingsDialog/NcAppSettingsDialog.vue"],"sourcesContent":["<!--\n - @copyright Copyright (c) 2020 Marco Ambrosini <marcoambrosini@icloud.com>\n -\n - @author Marco Ambrosini <marcoambrosini@icloud.com>\n - @author Ferdinand Thiessen <opensource@fthiessen.de>\n -\n - @license AGPL-3.0-or-later\n -\n - This program is free software: you can redistribute it and/or modify\n - it under the terms of the GNU Affero General Public License as\n - published by the Free Software Foundation, either version 3 of the\n - License, or (at your option) any later version.\n -\n - This program is distributed in the hope that it will be useful,\n - but WITHOUT ANY WARRANTY; without even the implied warranty of\n - MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the\n - GNU Affero General Public License for more details.\n -\n - You should have received a copy of the GNU Affero General Public License\n - along with this program. If not, see <http://www.gnu.org/licenses/>.\n -\n -->\n<docs>\nJust nest the `AppSettingSections` component into `NcAppSettingsDialog`,\nproviding the section's name prop. You can put your settings within each\n`NcAppSettingsSection` component.\n\n```vue\n<template>\n\t<div>\n\t\t<NcButton @click=\"settingsOpen = true\">Show Settings</NcButton>\n\t\t<NcAppSettingsDialog :open.sync=\"settingsOpen\" :show-navigation=\"true\" name=\"Application settings\">\n\t\t\t<NcAppSettingsSection id=\"asci-name-1\" name=\"Example name 1\">\n\t\t\t\tSome example content\n\t\t\t</NcAppSettingsSection>\n\t\t\t<NcAppSettingsSection id=\"asci-name-2\" name=\"Example name 2\">\n\t\t\t\tSome more content\n\t\t\t</NcAppSettingsSection>\n\t\t\t<NcAppSettingsSection id=\"asci-name-3\" name=\"Example name 3\">\n\t\t\t\tSome example content\n\t\t\t</NcAppSettingsSection>\n\t\t\t<NcAppSettingsSection id=\"asci-name-4\" name=\"Example name 4\">\n\t\t\t\tSome more content\n\t\t\t</NcAppSettingsSection>\n\t\t\t<NcAppSettingsSection id=\"asci-name-5\" name=\"Example name 5\">\n\t\t\t\tSome example content\n\t\t\t</NcAppSettingsSection>\n\t\t\t<NcAppSettingsSection id=\"asci-name-6\" name=\"Example name 6\">\n\t\t\t\tSome more content\n\t\t\t</NcAppSettingsSection>\n\t\t\t<NcAppSettingsSection id=\"asci-name-7\" name=\"Example name 7\">\n\t\t\t\tSome example content\n\t\t\t</NcAppSettingsSection>\n\t\t\t<NcAppSettingsSection id=\"asci-name-8\" name=\"Example name 8\">\n\t\t\t\tSome more content\n\t\t\t</NcAppSettingsSection>\n\t\t\t<NcAppSettingsSection id=\"asci-name-9\" name=\"Example name 9\">\n\t\t\t\tSome more content\n\t\t\t</NcAppSettingsSection>\n\t\t\t<NcAppSettingsSection id=\"asci-name-10\" name=\"Example name 10\">\n\t\t\t\tSome more content\n\t\t\t</NcAppSettingsSection>\n\t\t</NcAppSettingsDialog>\n\t</div>\n</template>\n\n<script>\nexport default {\n\tdata() {\n\t\treturn {\n\t\t\tsettingsOpen: false,\n\t\t}\n\t},\n}\n</script>\n```\n\nYou can also add icons to the section navigation:\n\n```vue\n<template>\n\t<div>\n\t\t<NcButton @click=\"settingsOpen = true\">Show Settings</NcButton>\n\t\t<NcAppSettingsDialog :open.sync=\"settingsOpen\" :show-navigation=\"true\" name=\"Application settings\">\n\t\t\t<NcAppSettingsSection id=\"asci-name-1\" name=\"Instagram\">\n\t\t\t\t<template #icon>\n\t\t\t\t\t<Instagram :size=\"20\" />\n\t\t\t\t</template>\n\t\t\t\t<p style=\"height: 100vh;\">\n\t\t\t\t\tInstagram setting\n\t\t\t\t</p>\n\t\t\t</NcAppSettingsSection>\n\t\t\t<NcAppSettingsSection id=\"asci-name-2\" name=\"Mastodon\">\n\t\t\t\t<template #icon>\n\t\t\t\t\t<Mastodon :size=\"20\" />\n\t\t\t\t</template>\n\t\t\t\t<p style=\"height: 100vh;\">\n\t\t\t\t\tMastodon setting\n\t\t\t\t</p>\n\t\t\t</NcAppSettingsSection>\n\t\t\t<NcAppSettingsSection id=\"asci-name-3\" name=\"Twitch\">\n\t\t\t\t<template #icon>\n\t\t\t\t\t<Twitch :size=\"20\" />\n\t\t\t\t</template>\n\t\t\t\t<p style=\"height: 100vh;\">\n\t\t\t\t\tTwitch setting\n\t\t\t\t</p>\n\t\t\t</NcAppSettingsSection>\n\t\t\t<NcAppSettingsSection id=\"asci-name-4\" name=\"Twitter\">\n\t\t\t\t<template #icon>\n\t\t\t\t\t<Twitter :size=\"20\" />\n\t\t\t\t</template>\n\t\t\t\tTwitter setting\n\t\t\t</NcAppSettingsSection>\n\t\t</NcAppSettingsDialog>\n\t</div>\n</template>\n\n<script>\nimport Instagram from 'vue-material-design-icons/Instagram.vue'\nimport Mastodon from 'vue-material-design-icons/Mastodon.vue'\nimport Twitch from 'vue-material-design-icons/Twitch.vue'\nimport Twitter from 'vue-material-design-icons/Twitter.vue'\n\nexport default {\n\tcomponents: {\n\t\tInstagram,\n\t\tMastodon,\n\t\tTwitch,\n\t\tTwitter,\n\t},\n\tdata() {\n\t\treturn {\n\t\t\tsettingsOpen: false,\n\t\t}\n\t},\n}\n</script>\n```\n</docs>\n\n<template>\n\t<NcDialog v-if=\"open\"\n\t\tv-bind=\"dialogProperties\"\n\t\t@update:open=\"handleCloseModal\">\n\t\t<template #navigation=\"{ isCollapsed }\">\n\t\t\t<ul :aria-label=\"settingsNavigationAriaLabel\"\n\t\t\t\t:class=\"{ 'navigation-list': true, 'navigation-list--collapsed': isCollapsed }\"\n\t\t\t\trole=\"tablist\">\n\t\t\t\t<li v-for=\"section in sections\" :key=\"section.id\">\n\t\t\t\t\t<a :aria-selected=\"section.id === selectedSection\"\n\t\t\t\t\t\t:class=\"{\n\t\t\t\t\t\t\t'navigation-list__link': true,\n\t\t\t\t\t\t\t'navigation-list__link--active': section.id === selectedSection,\n\t\t\t\t\t\t\t'navigation-list__link--icon': hasNavigationIcons,\n\t\t\t\t\t\t}\"\n\t\t\t\t\t\trole=\"tab\"\n\t\t\t\t\t\ttabindex=\"0\"\n\t\t\t\t\t\t@click=\"handleSettingsNavigationClick(section.id)\"\n\t\t\t\t\t\t@keydown.enter=\"handleSettingsNavigationClick(section.id)\">\n\t\t\t\t\t\t<div v-if=\"hasNavigationIcons\" class=\"navigation-list__link-icon\">\n\t\t\t\t\t\t\t<NcVNodes v-if=\"section.icon\" :vnodes=\"section.icon\" />\n\t\t\t\t\t\t</div>\n\t\t\t\t\t\t<span class=\"navigation-list__link-text\">\n\t\t\t\t\t\t\t{{ section.name }}\n\t\t\t\t\t\t</span>\n\t\t\t\t\t</a>\n\t\t\t\t</li>\n\t\t\t</ul>\n\t\t</template>\n\t\t<div ref=\"settingsScroller\">\n\t\t\t<slot />\n\t\t</div>\n\t</NcDialog>\n</template>\n\n<script>\nimport NcDialog from '../NcDialog/index.js'\nimport NcVNodes from '../NcVNodes/index.js'\nimport { useIsMobile } from '../../composables/useIsMobile/index.js'\nimport { t } from '../../l10n.js'\n\nimport debounce from 'debounce'\n\nexport default {\n\n\tname: 'NcAppSettingsDialog',\n\n\tcomponents: {\n\t\tNcDialog,\n\t\tNcVNodes,\n\t},\n\n\tprovide() {\n\t\treturn {\n\t\t\tregisterSection: this.registerSection,\n\t\t\tunregisterSection: this.registerSection,\n\t\t}\n\t},\n\n\tprops: {\n\t\t/*\n\t\t Determines the open / closed state of the modal\n\t\t /\n\t\topen: {\n\t\t\ttype: Boolean,\n\t\t\trequired: true,\n\t\t},\n\t\t/\n\t\t Shows the navigation on desktop if true\n\t\t /\n\t\tshowNavigation: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/\n\t\t Selector for the popover container\n\t\t /\n\t\tcontainer: {\n\t\t\ttype: String,\n\t\t\tdefault: 'body',\n\t\t},\n\n\t\t/\n\t\t Name of the settings\n\t\t /\n\t\tname: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\n\t\t/\n\t\t Additional elements to add to the focus trap\n\t\t /\n\t\tadditionalTrapElements: {\n\t\t\ttype: Array,\n\t\t\tdefault: () => [],\n\t\t},\n\n\t},\n\n\temits: ['update:open'],\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\tselectedSection: '',\n\t\t\tlinkClicked: false,\n\t\t\taddedScrollListener: false,\n\t\t\tscroller: null,\n\t\t\t/\n\t\t\t Currently registered settings sections\n\t\t\t * @type {{ id: string, name: string, icon?: VNode[] }}\n\t\t\t /\n\t\t\tsections: [],\n\t\t}\n\t},\n\n\tcomputed: {\n\t\tdialogProperties() {\n\t\t\treturn {\n\t\t\t\tadditionalTrapElements: this.additionalTrapElements,\n\t\t\t\tclass: 'app-settings',\n\t\t\t\tcontainer: this.container,\n\t\t\t\tcontentClasses: 'app-settings__content',\n\t\t\t\tsize: 'large',\n\t\t\t\tname: this.name,\n\t\t\t\tnavigationClasses: 'app-settings__navigation',\n\t\t\t}\n\t\t},\n\n\t\t/\n\t\t Check if one or more navigation entries provide icons\n\t\t /\n\t\thasNavigationIcons() {\n\t\t\treturn this.sections.some(({ icon }) => !!icon)\n\t\t},\n\n\t\thasNavigation() {\n\t\t\tif (this.isMobile \|\| !this.showNavigation) {\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\tsettingsNavigationAriaLabel() {\n\t\t\treturn t('Settings navigation')\n\t\t},\n\t},\n\n\tmounted() {\n\t\t// Select first settings section\n\t\tthis.selectedSection = this.$slots.default[0].componentOptions.propsData.id\n\t},\n\n\tupdated() {\n\t\t// Check that the scroller element has been mounted\n\t\tif (!this.$refs.settingsScroller) {\n\t\t\treturn\n\t\t}\n\t\t// Get the scroller element\n\t\tthis.scroller = this.$refs.settingsScroller\n\t\tif (!this.addedScrollListener) {\n\t\t\tthis.scroller.addEventListener('scroll', this.handleScroll)\n\t\t\tthis.addedScrollListener = true\n\t\t}\n\n\t},\n\n\tmethods: {\n\t\t/\n\t\t Called when a new section is registered\n\t\t * @param {string} id The section ID\n\t\t * @param {string} name The section name\n\t\t * @param {import('vue').VNode[]\|undefined} icon Optional icon component\n\t\t /\n\t\tregisterSection(id, name, icon) {\n\t\t\t// Check for the uniqueness of section names\n\t\t\tif (this.sections.some(({ id: otherId }) => id === otherId)) {\n\t\t\t\tthrow new Error(`Duplicate section id found: ${id}. Settings navigation sections must have unique section ids.`)\n\t\t\t}\n\t\t\tif (this.sections.some(({ name: otherName }) => name === otherName)) {\n\t\t\t\tthrow new Error(`Duplicate section name found: ${name}. Settings navigation sections must have unique section names.`)\n\t\t\t}\n\n\t\t\tconst newSections = [...this.sections, { id, name, icon }]\n\t\t\t// Sort sections by order in slots\n\t\t\tthis.sections = newSections.sort(({ id: idA }, { id: idB }) => {\n\t\t\t\tconst indexOf = (id) => this.$slots.default.indexOf(vnode => vnode?.componentOptions?.propsData?.id === id)\n\t\t\t\treturn indexOf(idA) - indexOf(idB)\n\t\t\t})\n\t\t},\n\n\t\t/\n\t\t Called when a new section is unregistered\n\t\t * @param {string} id The section ID\n\t\t /\n\t\tunregisterSection(id) {\n\t\t\tthis.sections = this.sections.filter(({ id: otherId }) => id === otherId)\n\t\t},\n\n\t\t/\n\t\t Scrolls the content to the selected settings section.absolute\n\t\t \n\t\t @param {string} item the ID of the section\n\t\t */\n\t\thandleSettingsNavigationClick(item) {\n\t\t\tthis.linkClicked = true\n\t\t\tdocument.getElementById('settings-section_' + item).scrollIntoView({\n\t\t\t\tbehavior: 'smooth',\n\t\t\t\tinline: 'nearest',\n\t\t\t})\n\t\t\tthis.selectedSection = item\n\t\t\tsetTimeout(() => {\n\t\t\t\tthis.linkClicked = false\n\t\t\t}, 1000)\n\t\t},\n\n\t\thandleCloseModal(isOpen) {\n\t\t\tif (isOpen) {\n\t\t\t\treturn\n\t\t\t}\n\n\t\t\tthis.$emit('update:open', false)\n\t\t\t// Remove scroll listener each time the modal is closed\n\t\t\tthis.scroller.removeEventListener('scroll', this.handleScroll)\n\t\t\tthis.addedScrollListener = false\n\t\t\tthis.scroller.scrollTop = 0\n\t\t},\n\n\t\thandleScroll() {\n\t\t\tif (!this.linkClicked) {\n\t\t\t\tthis.unfocusNavigationItem()\n\t\t\t}\n\t\t},\n\n\t\t// Remove selected section once the user starts scrolling\n\t\tunfocusNavigationItem: debounce(function() {\n\t\t\tthis.selectedSection = ''\n\t\t\tif (document.activeElement.className.includes('navigation-list__link')) {\n\t\t\t\tdocument.activeElement.blur()\n\t\t\t}\n\t\t}, 300),\n\t},\n}\n\n</script>\n\n<style lang=\"scss\" scoped>\n.app-settings {\n\t&__navigation {\n\t\tmin-width: 200px;\n\t\tmargin-right: 20px;\n\t\toverflow-x: hidden;\n\t\toverflow-y: auto;\n\t\tposition: relative;\n\t\theight: 100%;\n\t}\n\t&__content {\n\t\tmax-width: 100vw;\n\t\toverflow-y: auto;\n\t\toverflow-x: hidden;\n\t\tpadding: 24px;\n\t\twidth: 100%;\n\t}\n}\n\n.navigation-list {\n\theight: 100%;\n\tbox-sizing: border-box;\n\toverflow-y: auto;\n\tpadding: 12px;\n\n\t&--collapsed {\n\t\tdisplay: flex;\n\t\tflex-direction: row;\n\t\tgap: 6px;\n\t}\n\n\t&__link {\n\t\tdisplay: flex;\n\t\talign-content: center;\n\t\tfont-size: 16px;\n\t\theight: $clickable-area;\n\t\tmargin: 4px 0;\n\t\tline-height: $clickable-area;\n\t\tborder-radius: var(--border-radius-pill);\n\t\tfont-weight: bold;\n\t\tpadding: 0 20px;\n\t\tcursor: pointer;\n\t\twhite-space: nowrap;\n\t\ttext-overflow: ellipsis;\n\t\toverflow: hidden;\n\t\tbackground-color: transparent;\n\t\tborder: none;\n\n\t\t&:hover,\n\t\t&:focus {\n\t\t\tbackground-color: var(--color-background-hover);\n\t\t}\n\n\t\t&--active {\n\t\t\tbackground-color: var(--color-primary-element-light) !important;\n\t\t}\n\n\t\t&--icon {\n\t\t\tpadding-inline-start: 8px;\n\t\t\tgap: 4px;\n\t\t}\n\n\t\t&-icon {\n\t\t\tdisplay: flex;\n\t\t\tjustify-content: center;\n\t\t\talign-content: center;\n\t\t\twidth: 36px;\n\t\t\tmax-width: 36px;\n\t\t}\n\t}\n}\n\n</style>\n"],"names":["_sfc_main","Components_NcDialog","Components_NcVNodes","Composables_useIsMobile","icon","l10n","id","name","otherId","otherName","newSections","idA","idB","indexOf","vnode","_b","_a","item","isOpen","debounce__default"],"mappings":"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"}

package/dist/Components/NcAppSettingsDialog.mjs CHANGED Viewed

@@ -1,17 +1,16 @@
-import "../assets/index-db5a8b1c.css";
+import "../assets/index-9ca89b81.css";
 import u from "./NcDialog.mjs";
-import g from "./NcVNodes.mjs";
-import p from "../Mixins/isMobile.mjs";
-import { t as h } from "../chunks/l10n-f692947e.mjs";
-import f from "debounce";
+import p from "./NcVNodes.mjs";
+import { useIsMobile as g } from "../Composables/useIsMobile.mjs";
+import { t as f } from "../chunks/l10n-f51d3415.mjs";
+import h from "debounce";
 import { n as m } from "../chunks/_plugin-vue2_normalizer-71e2aa87.mjs";
 const _ = {
   name: "NcAppSettingsDialog",
   components: {
     NcDialog: u,
-    NcVNodes: g
+    NcVNodes: p
   },
-  mixins: [p],
   provide() {
     return {
       registerSection: this.registerSection,
@@ -56,6 +55,11 @@ const _ = {
     }
   },
   emits: ["update:open"],
+  setup() {
+    return {
+      isMobile: g()
+    };
+  },
   data() {
     return {
       selectedSection: "",
@@ -91,7 +95,7 @@ const _ = {
       return !(this.isMobile || !this.showNavigation);
     },
     settingsNavigationAriaLabel() {
-      return h("Settings navigation");
+      return f("Settings navigation");
     }
   },
   mounted() {
@@ -148,7 +152,7 @@ const _ = {
       this.linkClicked || this.unfocusNavigationItem();
     },
     // Remove selected section once the user starts scrolling
-    unfocusNavigationItem: f(function() {
+    unfocusNavigationItem: h(function() {
       this.selectedSection = "", document.activeElement.className.includes("navigation-list__link") && document.activeElement.blur();
     }, 300)
   }
@@ -174,7 +178,7 @@ var v = function() {
   S,
   !1,
   null,
-  "b5b2caa2",
+  "c8194bfe",
   null,
   null
 );

package/dist/Components/NcAppSettingsDialog.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"NcAppSettingsDialog.mjs","sources":["../../src/components/NcAppSettingsDialog/NcAppSettingsDialog.vue"],"sourcesContent":["<!--\n - @copyright Copyright (c) 2020 Marco Ambrosini <marcoambrosini@icloud.com>\n -\n - @author Marco Ambrosini <marcoambrosini@icloud.com>\n - @author Ferdinand Thiessen <opensource@fthiessen.de>\n -\n - @license AGPL-3.0-or-later\n -\n - This program is free software: you can redistribute it and/or modify\n - it under the terms of the GNU Affero General Public License as\n - published by the Free Software Foundation, either version 3 of the\n - License, or (at your option) any later version.\n -\n - This program is distributed in the hope that it will be useful,\n - but WITHOUT ANY WARRANTY; without even the implied warranty of\n - MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the\n - GNU Affero General Public License for more details.\n -\n - You should have received a copy of the GNU Affero General Public License\n - along with this program. If not, see <http://www.gnu.org/licenses/>.\n -\n -->\n<docs>\nJust nest the `AppSettingSections` component into `NcAppSettingsDialog`,\nproviding the section's name prop. You can put your settings within each\n`NcAppSettingsSection` component.\n\n```vue\n<template>\n\t<div>\n\t\t<NcButton @click=\"settingsOpen = true\">Show Settings</NcButton>\n\t\t<NcAppSettingsDialog :open.sync=\"settingsOpen\" :show-navigation=\"true\" name=\"Application settings\">\n\t\t\t<NcAppSettingsSection id=\"asci-name-1\" name=\"Example name 1\">\n\t\t\t\tSome example content\n\t\t\t</NcAppSettingsSection>\n\t\t\t<NcAppSettingsSection id=\"asci-name-2\" name=\"Example name 2\">\n\t\t\t\tSome more content\n\t\t\t</NcAppSettingsSection>\n\t\t\t<NcAppSettingsSection id=\"asci-name-3\" name=\"Example name 3\">\n\t\t\t\tSome example content\n\t\t\t</NcAppSettingsSection>\n\t\t\t<NcAppSettingsSection id=\"asci-name-4\" name=\"Example name 4\">\n\t\t\t\tSome more content\n\t\t\t</NcAppSettingsSection>\n\t\t\t<NcAppSettingsSection id=\"asci-name-5\" name=\"Example name 5\">\n\t\t\t\tSome example content\n\t\t\t</NcAppSettingsSection>\n\t\t\t<NcAppSettingsSection id=\"asci-name-6\" name=\"Example name 6\">\n\t\t\t\tSome more content\n\t\t\t</NcAppSettingsSection>\n\t\t\t<NcAppSettingsSection id=\"asci-name-7\" name=\"Example name 7\">\n\t\t\t\tSome example content\n\t\t\t</NcAppSettingsSection>\n\t\t\t<NcAppSettingsSection id=\"asci-name-8\" name=\"Example name 8\">\n\t\t\t\tSome more content\n\t\t\t</NcAppSettingsSection>\n\t\t\t<NcAppSettingsSection id=\"asci-name-9\" name=\"Example name 9\">\n\t\t\t\tSome more content\n\t\t\t</NcAppSettingsSection>\n\t\t\t<NcAppSettingsSection id=\"asci-name-10\" name=\"Example name 10\">\n\t\t\t\tSome more content\n\t\t\t</NcAppSettingsSection>\n\t\t</NcAppSettingsDialog>\n\t</div>\n</template>\n\n<script>\nexport default {\n\tdata() {\n\t\treturn {\n\t\t\tsettingsOpen: false,\n\t\t}\n\t},\n}\n</script>\n```\n\nYou can also add icons to the section navigation:\n\n```vue\n<template>\n\t<div>\n\t\t<NcButton @click=\"settingsOpen = true\">Show Settings</NcButton>\n\t\t<NcAppSettingsDialog :open.sync=\"settingsOpen\" :show-navigation=\"true\" name=\"Application settings\">\n\t\t\t<NcAppSettingsSection id=\"asci-name-1\" name=\"Instagram\">\n\t\t\t\t<template #icon>\n\t\t\t\t\t<Instagram :size=\"20\" />\n\t\t\t\t</template>\n\t\t\t\t<p style=\"height: 100vh;\">\n\t\t\t\t\tInstagram setting\n\t\t\t\t</p>\n\t\t\t</NcAppSettingsSection>\n\t\t\t<NcAppSettingsSection id=\"asci-name-2\" name=\"Mastodon\">\n\t\t\t\t<template #icon>\n\t\t\t\t\t<Mastodon :size=\"20\" />\n\t\t\t\t</template>\n\t\t\t\t<p style=\"height: 100vh;\">\n\t\t\t\t\tMastodon setting\n\t\t\t\t</p>\n\t\t\t</NcAppSettingsSection>\n\t\t\t<NcAppSettingsSection id=\"asci-name-3\" name=\"Twitch\">\n\t\t\t\t<template #icon>\n\t\t\t\t\t<Twitch :size=\"20\" />\n\t\t\t\t</template>\n\t\t\t\t<p style=\"height: 100vh;\">\n\t\t\t\t\tTwitch setting\n\t\t\t\t</p>\n\t\t\t</NcAppSettingsSection>\n\t\t\t<NcAppSettingsSection id=\"asci-name-4\" name=\"Twitter\">\n\t\t\t\t<template #icon>\n\t\t\t\t\t<Twitter :size=\"20\" />\n\t\t\t\t</template>\n\t\t\t\tTwitter setting\n\t\t\t</NcAppSettingsSection>\n\t\t</NcAppSettingsDialog>\n\t</div>\n</template>\n\n<script>\nimport Instagram from 'vue-material-design-icons/Instagram.vue'\nimport Mastodon from 'vue-material-design-icons/Mastodon.vue'\nimport Twitch from 'vue-material-design-icons/Twitch.vue'\nimport Twitter from 'vue-material-design-icons/Twitter.vue'\n\nexport default {\n\tcomponents: {\n\t\tInstagram,\n\t\tMastodon,\n\t\tTwitch,\n\t\tTwitter,\n\t},\n\tdata() {\n\t\treturn {\n\t\t\tsettingsOpen: false,\n\t\t}\n\t},\n}\n</script>\n```\n</docs>\n\n<template>\n\t<NcDialog v-if=\"open\"\n\t\tv-bind=\"dialogProperties\"\n\t\t@update:open=\"handleCloseModal\">\n\t\t<template #navigation=\"{ isCollapsed }\">\n\t\t\t<ul :aria-label=\"settingsNavigationAriaLabel\"\n\t\t\t\t:class=\"{ 'navigation-list': true, 'navigation-list--collapsed': isCollapsed }\"\n\t\t\t\trole=\"tablist\">\n\t\t\t\t<li v-for=\"section in sections\" :key=\"section.id\">\n\t\t\t\t\t<a :aria-selected=\"section.id === selectedSection\"\n\t\t\t\t\t\t:class=\"{\n\t\t\t\t\t\t\t'navigation-list__link': true,\n\t\t\t\t\t\t\t'navigation-list__link--active': section.id === selectedSection,\n\t\t\t\t\t\t\t'navigation-list__link--icon': hasNavigationIcons,\n\t\t\t\t\t\t}\"\n\t\t\t\t\t\trole=\"tab\"\n\t\t\t\t\t\ttabindex=\"0\"\n\t\t\t\t\t\t@click=\"handleSettingsNavigationClick(section.id)\"\n\t\t\t\t\t\t@keydown.enter=\"handleSettingsNavigationClick(section.id)\">\n\t\t\t\t\t\t<div v-if=\"hasNavigationIcons\" class=\"navigation-list__link-icon\">\n\t\t\t\t\t\t\t<NcVNodes v-if=\"section.icon\" :vnodes=\"section.icon\" />\n\t\t\t\t\t\t</div>\n\t\t\t\t\t\t<span class=\"navigation-list__link-text\">\n\t\t\t\t\t\t\t{{ section.name }}\n\t\t\t\t\t\t</span>\n\t\t\t\t\t</a>\n\t\t\t\t</li>\n\t\t\t</ul>\n\t\t</template>\n\t\t<div ref=\"settingsScroller\">\n\t\t\t<slot />\n\t\t</div>\n\t</NcDialog>\n</template>\n\n<script>\nimport NcDialog from '../NcDialog/index.js'\nimport NcVNodes from '../NcVNodes/index.js'\nimport isMobile from '../../mixins/isMobile/index.js'\nimport { t } from '../../l10n.js'\n\nimport debounce from 'debounce'\n\nexport default {\n\n\tname: 'NcAppSettingsDialog',\n\n\tcomponents: {\n\t\tNcDialog,\n\t\tNcVNodes,\n\t},\n\n\tmixins: [isMobile],\n\tprovide() {\n\t\treturn {\n\t\t\tregisterSection: this.registerSection,\n\t\t\tunregisterSection: this.registerSection,\n\t\t}\n\t},\n\n\tprops: {\n\t\t/*\n\t\t Determines the open / closed state of the modal\n\t\t /\n\t\topen: {\n\t\t\ttype: Boolean,\n\t\t\trequired: true,\n\t\t},\n\t\t/\n\t\t Shows the navigation on desktop if true\n\t\t /\n\t\tshowNavigation: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/\n\t\t Selector for the popover container\n\t\t /\n\t\tcontainer: {\n\t\t\ttype: String,\n\t\t\tdefault: 'body',\n\t\t},\n\n\t\t/\n\t\t Name of the settings\n\t\t /\n\t\tname: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\n\t\t/\n\t\t Additional elements to add to the focus trap\n\t\t /\n\t\tadditionalTrapElements: {\n\t\t\ttype: Array,\n\t\t\tdefault: () => [],\n\t\t},\n\n\t},\n\n\temits: ['update:open'],\n\n\tdata() {\n\t\treturn {\n\t\t\tselectedSection: '',\n\t\t\tlinkClicked: false,\n\t\t\taddedScrollListener: false,\n\t\t\tscroller: null,\n\t\t\t/\n\t\t\t Currently registered settings sections\n\t\t\t * @type {{ id: string, name: string, icon?: VNode[] }}\n\t\t\t /\n\t\t\tsections: [],\n\t\t}\n\t},\n\n\tcomputed: {\n\t\tdialogProperties() {\n\t\t\treturn {\n\t\t\t\tadditionalTrapElements: this.additionalTrapElements,\n\t\t\t\tclass: 'app-settings',\n\t\t\t\tcontainer: this.container,\n\t\t\t\tcontentClasses: 'app-settings__content',\n\t\t\t\tsize: 'large',\n\t\t\t\tname: this.name,\n\t\t\t\tnavigationClasses: 'app-settings__navigation',\n\t\t\t}\n\t\t},\n\n\t\t/\n\t\t Check if one or more navigation entries provide icons\n\t\t /\n\t\thasNavigationIcons() {\n\t\t\treturn this.sections.some(({ icon }) => !!icon)\n\t\t},\n\n\t\thasNavigation() {\n\t\t\tif (this.isMobile \|\| !this.showNavigation) {\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\tsettingsNavigationAriaLabel() {\n\t\t\treturn t('Settings navigation')\n\t\t},\n\t},\n\n\tmounted() {\n\t\t// Select first settings section\n\t\tthis.selectedSection = this.$slots.default[0].componentOptions.propsData.id\n\t},\n\n\tupdated() {\n\t\t// Check that the scroller element has been mounted\n\t\tif (!this.$refs.settingsScroller) {\n\t\t\treturn\n\t\t}\n\t\t// Get the scroller element\n\t\tthis.scroller = this.$refs.settingsScroller\n\t\tif (!this.addedScrollListener) {\n\t\t\tthis.scroller.addEventListener('scroll', this.handleScroll)\n\t\t\tthis.addedScrollListener = true\n\t\t}\n\n\t},\n\n\tmethods: {\n\t\t/\n\t\t Called when a new section is registered\n\t\t * @param {string} id The section ID\n\t\t * @param {string} name The section name\n\t\t * @param {import('vue').VNode[]\|undefined} icon Optional icon component\n\t\t /\n\t\tregisterSection(id, name, icon) {\n\t\t\t// Check for the uniqueness of section names\n\t\t\tif (this.sections.some(({ id: otherId }) => id === otherId)) {\n\t\t\t\tthrow new Error(`Duplicate section id found: ${id}. Settings navigation sections must have unique section ids.`)\n\t\t\t}\n\t\t\tif (this.sections.some(({ name: otherName }) => name === otherName)) {\n\t\t\t\tthrow new Error(`Duplicate section name found: ${name}. Settings navigation sections must have unique section names.`)\n\t\t\t}\n\n\t\t\tconst newSections = [...this.sections, { id, name, icon }]\n\t\t\t// Sort sections by order in slots\n\t\t\tthis.sections = newSections.sort(({ id: idA }, { id: idB }) => {\n\t\t\t\tconst indexOf = (id) => this.$slots.default.indexOf(vnode => vnode?.componentOptions?.propsData?.id === id)\n\t\t\t\treturn indexOf(idA) - indexOf(idB)\n\t\t\t})\n\t\t},\n\n\t\t/\n\t\t Called when a new section is unregistered\n\t\t * @param {string} id The section ID\n\t\t /\n\t\tunregisterSection(id) {\n\t\t\tthis.sections = this.sections.filter(({ id: otherId }) => id === otherId)\n\t\t},\n\n\t\t/\n\t\t Scrolls the content to the selected settings section.absolute\n\t\t \n\t\t @param {string} item the ID of the section\n\t\t */\n\t\thandleSettingsNavigationClick(item) {\n\t\t\tthis.linkClicked = true\n\t\t\tdocument.getElementById('settings-section_' + item).scrollIntoView({\n\t\t\t\tbehavior: 'smooth',\n\t\t\t\tinline: 'nearest',\n\t\t\t})\n\t\t\tthis.selectedSection = item\n\t\t\tsetTimeout(() => {\n\t\t\t\tthis.linkClicked = false\n\t\t\t}, 1000)\n\t\t},\n\n\t\thandleCloseModal(isOpen) {\n\t\t\tif (isOpen) {\n\t\t\t\treturn\n\t\t\t}\n\n\t\t\tthis.$emit('update:open', false)\n\t\t\t// Remove scroll listener each time the modal is closed\n\t\t\tthis.scroller.removeEventListener('scroll', this.handleScroll)\n\t\t\tthis.addedScrollListener = false\n\t\t\tthis.scroller.scrollTop = 0\n\t\t},\n\n\t\thandleScroll() {\n\t\t\tif (!this.linkClicked) {\n\t\t\t\tthis.unfocusNavigationItem()\n\t\t\t}\n\t\t},\n\n\t\t// Remove selected section once the user starts scrolling\n\t\tunfocusNavigationItem: debounce(function() {\n\t\t\tthis.selectedSection = ''\n\t\t\tif (document.activeElement.className.includes('navigation-list__link')) {\n\t\t\t\tdocument.activeElement.blur()\n\t\t\t}\n\t\t}, 300),\n\t},\n}\n\n</script>\n\n<style lang=\"scss\" scoped>\n.app-settings {\n\t&__navigation {\n\t\tmin-width: 200px;\n\t\tmargin-right: 20px;\n\t\toverflow-x: hidden;\n\t\toverflow-y: auto;\n\t\tposition: relative;\n\t\theight: 100%;\n\t}\n\t&__content {\n\t\tmax-width: 100vw;\n\t\toverflow-y: auto;\n\t\toverflow-x: hidden;\n\t\tpadding: 24px;\n\t\twidth: 100%;\n\t}\n}\n\n.navigation-list {\n\theight: 100%;\n\tbox-sizing: border-box;\n\toverflow-y: auto;\n\tpadding: 12px;\n\n\t&--collapsed {\n\t\tdisplay: flex;\n\t\tflex-direction: row;\n\t\tgap: 6px;\n\t}\n\n\t&__link {\n\t\tdisplay: flex;\n\t\talign-content: center;\n\t\tfont-size: 16px;\n\t\theight: $clickable-area;\n\t\tmargin: 4px 0;\n\t\tline-height: $clickable-area;\n\t\tborder-radius: var(--border-radius-pill);\n\t\tfont-weight: bold;\n\t\tpadding: 0 20px;\n\t\tcursor: pointer;\n\t\twhite-space: nowrap;\n\t\ttext-overflow: ellipsis;\n\t\toverflow: hidden;\n\t\tbackground-color: transparent;\n\t\tborder: none;\n\n\t\t&:hover,\n\t\t&:focus {\n\t\t\tbackground-color: var(--color-background-hover);\n\t\t}\n\n\t\t&--active {\n\t\t\tbackground-color: var(--color-primary-element-light) !important;\n\t\t}\n\n\t\t&--icon {\n\t\t\tpadding-inline-start: 8px;\n\t\t\tgap: 4px;\n\t\t}\n\n\t\t&-icon {\n\t\t\tdisplay: flex;\n\t\t\tjustify-content: center;\n\t\t\talign-content: center;\n\t\t\twidth: 36px;\n\t\t\tmax-width: 36px;\n\t\t}\n\t}\n}\n\n</style>\n"],"names":["_sfc_main","NcDialog","NcVNodes","isMobile","icon","t","id","name","otherId","otherName","newSections","idA","idB","indexOf","vnode","_b","_a","item","isOpen","debounce"],"mappings":"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"}
1	+ {"version":3,"file":"NcAppSettingsDialog.mjs","sources":["../../src/components/NcAppSettingsDialog/NcAppSettingsDialog.vue"],"sourcesContent":["<!--\n - @copyright Copyright (c) 2020 Marco Ambrosini <marcoambrosini@icloud.com>\n -\n - @author Marco Ambrosini <marcoambrosini@icloud.com>\n - @author Ferdinand Thiessen <opensource@fthiessen.de>\n -\n - @license AGPL-3.0-or-later\n -\n - This program is free software: you can redistribute it and/or modify\n - it under the terms of the GNU Affero General Public License as\n - published by the Free Software Foundation, either version 3 of the\n - License, or (at your option) any later version.\n -\n - This program is distributed in the hope that it will be useful,\n - but WITHOUT ANY WARRANTY; without even the implied warranty of\n - MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the\n - GNU Affero General Public License for more details.\n -\n - You should have received a copy of the GNU Affero General Public License\n - along with this program. If not, see <http://www.gnu.org/licenses/>.\n -\n -->\n<docs>\nJust nest the `AppSettingSections` component into `NcAppSettingsDialog`,\nproviding the section's name prop. You can put your settings within each\n`NcAppSettingsSection` component.\n\n```vue\n<template>\n\t<div>\n\t\t<NcButton @click=\"settingsOpen = true\">Show Settings</NcButton>\n\t\t<NcAppSettingsDialog :open.sync=\"settingsOpen\" :show-navigation=\"true\" name=\"Application settings\">\n\t\t\t<NcAppSettingsSection id=\"asci-name-1\" name=\"Example name 1\">\n\t\t\t\tSome example content\n\t\t\t</NcAppSettingsSection>\n\t\t\t<NcAppSettingsSection id=\"asci-name-2\" name=\"Example name 2\">\n\t\t\t\tSome more content\n\t\t\t</NcAppSettingsSection>\n\t\t\t<NcAppSettingsSection id=\"asci-name-3\" name=\"Example name 3\">\n\t\t\t\tSome example content\n\t\t\t</NcAppSettingsSection>\n\t\t\t<NcAppSettingsSection id=\"asci-name-4\" name=\"Example name 4\">\n\t\t\t\tSome more content\n\t\t\t</NcAppSettingsSection>\n\t\t\t<NcAppSettingsSection id=\"asci-name-5\" name=\"Example name 5\">\n\t\t\t\tSome example content\n\t\t\t</NcAppSettingsSection>\n\t\t\t<NcAppSettingsSection id=\"asci-name-6\" name=\"Example name 6\">\n\t\t\t\tSome more content\n\t\t\t</NcAppSettingsSection>\n\t\t\t<NcAppSettingsSection id=\"asci-name-7\" name=\"Example name 7\">\n\t\t\t\tSome example content\n\t\t\t</NcAppSettingsSection>\n\t\t\t<NcAppSettingsSection id=\"asci-name-8\" name=\"Example name 8\">\n\t\t\t\tSome more content\n\t\t\t</NcAppSettingsSection>\n\t\t\t<NcAppSettingsSection id=\"asci-name-9\" name=\"Example name 9\">\n\t\t\t\tSome more content\n\t\t\t</NcAppSettingsSection>\n\t\t\t<NcAppSettingsSection id=\"asci-name-10\" name=\"Example name 10\">\n\t\t\t\tSome more content\n\t\t\t</NcAppSettingsSection>\n\t\t</NcAppSettingsDialog>\n\t</div>\n</template>\n\n<script>\nexport default {\n\tdata() {\n\t\treturn {\n\t\t\tsettingsOpen: false,\n\t\t}\n\t},\n}\n</script>\n```\n\nYou can also add icons to the section navigation:\n\n```vue\n<template>\n\t<div>\n\t\t<NcButton @click=\"settingsOpen = true\">Show Settings</NcButton>\n\t\t<NcAppSettingsDialog :open.sync=\"settingsOpen\" :show-navigation=\"true\" name=\"Application settings\">\n\t\t\t<NcAppSettingsSection id=\"asci-name-1\" name=\"Instagram\">\n\t\t\t\t<template #icon>\n\t\t\t\t\t<Instagram :size=\"20\" />\n\t\t\t\t</template>\n\t\t\t\t<p style=\"height: 100vh;\">\n\t\t\t\t\tInstagram setting\n\t\t\t\t</p>\n\t\t\t</NcAppSettingsSection>\n\t\t\t<NcAppSettingsSection id=\"asci-name-2\" name=\"Mastodon\">\n\t\t\t\t<template #icon>\n\t\t\t\t\t<Mastodon :size=\"20\" />\n\t\t\t\t</template>\n\t\t\t\t<p style=\"height: 100vh;\">\n\t\t\t\t\tMastodon setting\n\t\t\t\t</p>\n\t\t\t</NcAppSettingsSection>\n\t\t\t<NcAppSettingsSection id=\"asci-name-3\" name=\"Twitch\">\n\t\t\t\t<template #icon>\n\t\t\t\t\t<Twitch :size=\"20\" />\n\t\t\t\t</template>\n\t\t\t\t<p style=\"height: 100vh;\">\n\t\t\t\t\tTwitch setting\n\t\t\t\t</p>\n\t\t\t</NcAppSettingsSection>\n\t\t\t<NcAppSettingsSection id=\"asci-name-4\" name=\"Twitter\">\n\t\t\t\t<template #icon>\n\t\t\t\t\t<Twitter :size=\"20\" />\n\t\t\t\t</template>\n\t\t\t\tTwitter setting\n\t\t\t</NcAppSettingsSection>\n\t\t</NcAppSettingsDialog>\n\t</div>\n</template>\n\n<script>\nimport Instagram from 'vue-material-design-icons/Instagram.vue'\nimport Mastodon from 'vue-material-design-icons/Mastodon.vue'\nimport Twitch from 'vue-material-design-icons/Twitch.vue'\nimport Twitter from 'vue-material-design-icons/Twitter.vue'\n\nexport default {\n\tcomponents: {\n\t\tInstagram,\n\t\tMastodon,\n\t\tTwitch,\n\t\tTwitter,\n\t},\n\tdata() {\n\t\treturn {\n\t\t\tsettingsOpen: false,\n\t\t}\n\t},\n}\n</script>\n```\n</docs>\n\n<template>\n\t<NcDialog v-if=\"open\"\n\t\tv-bind=\"dialogProperties\"\n\t\t@update:open=\"handleCloseModal\">\n\t\t<template #navigation=\"{ isCollapsed }\">\n\t\t\t<ul :aria-label=\"settingsNavigationAriaLabel\"\n\t\t\t\t:class=\"{ 'navigation-list': true, 'navigation-list--collapsed': isCollapsed }\"\n\t\t\t\trole=\"tablist\">\n\t\t\t\t<li v-for=\"section in sections\" :key=\"section.id\">\n\t\t\t\t\t<a :aria-selected=\"section.id === selectedSection\"\n\t\t\t\t\t\t:class=\"{\n\t\t\t\t\t\t\t'navigation-list__link': true,\n\t\t\t\t\t\t\t'navigation-list__link--active': section.id === selectedSection,\n\t\t\t\t\t\t\t'navigation-list__link--icon': hasNavigationIcons,\n\t\t\t\t\t\t}\"\n\t\t\t\t\t\trole=\"tab\"\n\t\t\t\t\t\ttabindex=\"0\"\n\t\t\t\t\t\t@click=\"handleSettingsNavigationClick(section.id)\"\n\t\t\t\t\t\t@keydown.enter=\"handleSettingsNavigationClick(section.id)\">\n\t\t\t\t\t\t<div v-if=\"hasNavigationIcons\" class=\"navigation-list__link-icon\">\n\t\t\t\t\t\t\t<NcVNodes v-if=\"section.icon\" :vnodes=\"section.icon\" />\n\t\t\t\t\t\t</div>\n\t\t\t\t\t\t<span class=\"navigation-list__link-text\">\n\t\t\t\t\t\t\t{{ section.name }}\n\t\t\t\t\t\t</span>\n\t\t\t\t\t</a>\n\t\t\t\t</li>\n\t\t\t</ul>\n\t\t</template>\n\t\t<div ref=\"settingsScroller\">\n\t\t\t<slot />\n\t\t</div>\n\t</NcDialog>\n</template>\n\n<script>\nimport NcDialog from '../NcDialog/index.js'\nimport NcVNodes from '../NcVNodes/index.js'\nimport { useIsMobile } from '../../composables/useIsMobile/index.js'\nimport { t } from '../../l10n.js'\n\nimport debounce from 'debounce'\n\nexport default {\n\n\tname: 'NcAppSettingsDialog',\n\n\tcomponents: {\n\t\tNcDialog,\n\t\tNcVNodes,\n\t},\n\n\tprovide() {\n\t\treturn {\n\t\t\tregisterSection: this.registerSection,\n\t\t\tunregisterSection: this.registerSection,\n\t\t}\n\t},\n\n\tprops: {\n\t\t/*\n\t\t Determines the open / closed state of the modal\n\t\t /\n\t\topen: {\n\t\t\ttype: Boolean,\n\t\t\trequired: true,\n\t\t},\n\t\t/\n\t\t Shows the navigation on desktop if true\n\t\t /\n\t\tshowNavigation: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/\n\t\t Selector for the popover container\n\t\t /\n\t\tcontainer: {\n\t\t\ttype: String,\n\t\t\tdefault: 'body',\n\t\t},\n\n\t\t/\n\t\t Name of the settings\n\t\t /\n\t\tname: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\n\t\t/\n\t\t Additional elements to add to the focus trap\n\t\t /\n\t\tadditionalTrapElements: {\n\t\t\ttype: Array,\n\t\t\tdefault: () => [],\n\t\t},\n\n\t},\n\n\temits: ['update:open'],\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\tselectedSection: '',\n\t\t\tlinkClicked: false,\n\t\t\taddedScrollListener: false,\n\t\t\tscroller: null,\n\t\t\t/\n\t\t\t Currently registered settings sections\n\t\t\t * @type {{ id: string, name: string, icon?: VNode[] }}\n\t\t\t /\n\t\t\tsections: [],\n\t\t}\n\t},\n\n\tcomputed: {\n\t\tdialogProperties() {\n\t\t\treturn {\n\t\t\t\tadditionalTrapElements: this.additionalTrapElements,\n\t\t\t\tclass: 'app-settings',\n\t\t\t\tcontainer: this.container,\n\t\t\t\tcontentClasses: 'app-settings__content',\n\t\t\t\tsize: 'large',\n\t\t\t\tname: this.name,\n\t\t\t\tnavigationClasses: 'app-settings__navigation',\n\t\t\t}\n\t\t},\n\n\t\t/\n\t\t Check if one or more navigation entries provide icons\n\t\t /\n\t\thasNavigationIcons() {\n\t\t\treturn this.sections.some(({ icon }) => !!icon)\n\t\t},\n\n\t\thasNavigation() {\n\t\t\tif (this.isMobile \|\| !this.showNavigation) {\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\tsettingsNavigationAriaLabel() {\n\t\t\treturn t('Settings navigation')\n\t\t},\n\t},\n\n\tmounted() {\n\t\t// Select first settings section\n\t\tthis.selectedSection = this.$slots.default[0].componentOptions.propsData.id\n\t},\n\n\tupdated() {\n\t\t// Check that the scroller element has been mounted\n\t\tif (!this.$refs.settingsScroller) {\n\t\t\treturn\n\t\t}\n\t\t// Get the scroller element\n\t\tthis.scroller = this.$refs.settingsScroller\n\t\tif (!this.addedScrollListener) {\n\t\t\tthis.scroller.addEventListener('scroll', this.handleScroll)\n\t\t\tthis.addedScrollListener = true\n\t\t}\n\n\t},\n\n\tmethods: {\n\t\t/\n\t\t Called when a new section is registered\n\t\t * @param {string} id The section ID\n\t\t * @param {string} name The section name\n\t\t * @param {import('vue').VNode[]\|undefined} icon Optional icon component\n\t\t /\n\t\tregisterSection(id, name, icon) {\n\t\t\t// Check for the uniqueness of section names\n\t\t\tif (this.sections.some(({ id: otherId }) => id === otherId)) {\n\t\t\t\tthrow new Error(`Duplicate section id found: ${id}. Settings navigation sections must have unique section ids.`)\n\t\t\t}\n\t\t\tif (this.sections.some(({ name: otherName }) => name === otherName)) {\n\t\t\t\tthrow new Error(`Duplicate section name found: ${name}. Settings navigation sections must have unique section names.`)\n\t\t\t}\n\n\t\t\tconst newSections = [...this.sections, { id, name, icon }]\n\t\t\t// Sort sections by order in slots\n\t\t\tthis.sections = newSections.sort(({ id: idA }, { id: idB }) => {\n\t\t\t\tconst indexOf = (id) => this.$slots.default.indexOf(vnode => vnode?.componentOptions?.propsData?.id === id)\n\t\t\t\treturn indexOf(idA) - indexOf(idB)\n\t\t\t})\n\t\t},\n\n\t\t/\n\t\t Called when a new section is unregistered\n\t\t * @param {string} id The section ID\n\t\t /\n\t\tunregisterSection(id) {\n\t\t\tthis.sections = this.sections.filter(({ id: otherId }) => id === otherId)\n\t\t},\n\n\t\t/\n\t\t Scrolls the content to the selected settings section.absolute\n\t\t \n\t\t @param {string} item the ID of the section\n\t\t */\n\t\thandleSettingsNavigationClick(item) {\n\t\t\tthis.linkClicked = true\n\t\t\tdocument.getElementById('settings-section_' + item).scrollIntoView({\n\t\t\t\tbehavior: 'smooth',\n\t\t\t\tinline: 'nearest',\n\t\t\t})\n\t\t\tthis.selectedSection = item\n\t\t\tsetTimeout(() => {\n\t\t\t\tthis.linkClicked = false\n\t\t\t}, 1000)\n\t\t},\n\n\t\thandleCloseModal(isOpen) {\n\t\t\tif (isOpen) {\n\t\t\t\treturn\n\t\t\t}\n\n\t\t\tthis.$emit('update:open', false)\n\t\t\t// Remove scroll listener each time the modal is closed\n\t\t\tthis.scroller.removeEventListener('scroll', this.handleScroll)\n\t\t\tthis.addedScrollListener = false\n\t\t\tthis.scroller.scrollTop = 0\n\t\t},\n\n\t\thandleScroll() {\n\t\t\tif (!this.linkClicked) {\n\t\t\t\tthis.unfocusNavigationItem()\n\t\t\t}\n\t\t},\n\n\t\t// Remove selected section once the user starts scrolling\n\t\tunfocusNavigationItem: debounce(function() {\n\t\t\tthis.selectedSection = ''\n\t\t\tif (document.activeElement.className.includes('navigation-list__link')) {\n\t\t\t\tdocument.activeElement.blur()\n\t\t\t}\n\t\t}, 300),\n\t},\n}\n\n</script>\n\n<style lang=\"scss\" scoped>\n.app-settings {\n\t&__navigation {\n\t\tmin-width: 200px;\n\t\tmargin-right: 20px;\n\t\toverflow-x: hidden;\n\t\toverflow-y: auto;\n\t\tposition: relative;\n\t\theight: 100%;\n\t}\n\t&__content {\n\t\tmax-width: 100vw;\n\t\toverflow-y: auto;\n\t\toverflow-x: hidden;\n\t\tpadding: 24px;\n\t\twidth: 100%;\n\t}\n}\n\n.navigation-list {\n\theight: 100%;\n\tbox-sizing: border-box;\n\toverflow-y: auto;\n\tpadding: 12px;\n\n\t&--collapsed {\n\t\tdisplay: flex;\n\t\tflex-direction: row;\n\t\tgap: 6px;\n\t}\n\n\t&__link {\n\t\tdisplay: flex;\n\t\talign-content: center;\n\t\tfont-size: 16px;\n\t\theight: $clickable-area;\n\t\tmargin: 4px 0;\n\t\tline-height: $clickable-area;\n\t\tborder-radius: var(--border-radius-pill);\n\t\tfont-weight: bold;\n\t\tpadding: 0 20px;\n\t\tcursor: pointer;\n\t\twhite-space: nowrap;\n\t\ttext-overflow: ellipsis;\n\t\toverflow: hidden;\n\t\tbackground-color: transparent;\n\t\tborder: none;\n\n\t\t&:hover,\n\t\t&:focus {\n\t\t\tbackground-color: var(--color-background-hover);\n\t\t}\n\n\t\t&--active {\n\t\t\tbackground-color: var(--color-primary-element-light) !important;\n\t\t}\n\n\t\t&--icon {\n\t\t\tpadding-inline-start: 8px;\n\t\t\tgap: 4px;\n\t\t}\n\n\t\t&-icon {\n\t\t\tdisplay: flex;\n\t\t\tjustify-content: center;\n\t\t\talign-content: center;\n\t\t\twidth: 36px;\n\t\t\tmax-width: 36px;\n\t\t}\n\t}\n}\n\n</style>\n"],"names":["_sfc_main","NcDialog","NcVNodes","useIsMobile","icon","t","id","name","otherId","otherName","newSections","idA","idB","indexOf","vnode","_b","_a","item","isOpen","debounce"],"mappings":"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"}

package/dist/Components/NcAppSidebar.cjs CHANGED Viewed

@@ -1,7 +1,7 @@
-var P = require("../assets/index-7d211db9.css");
+var P = require("../assets/index-2e31f707.css");
 const n = require("./NcVNodes.cjs"), o = require("./NcCheckboxRadioSwitch.cjs"), s = require("../chunks/_plugin-vue2_normalizer-7f9efb60.cjs"), l = require("./NcActions.cjs"), c = require("./NcLoadingIcon.cjs"), u = require("./NcButton.cjs"), d = require("./NcEmptyContent.cjs"), p = require("../Directives/Focus.cjs"), f = require("../Directives/Linkify.cjs");
 require("../Directives/Tooltip.cjs");
-const r = require("../chunks/l10n-f491109d.cjs"), m = require("../chunks/ArrowRight-7315f6c1.cjs"), _ = require("../chunks/Close-98cb6f12.cjs"), b = require("@vueuse/components"), h = require("floating-vue");
+const r = require("../chunks/l10n-c3dbf018.cjs"), m = require("../chunks/ArrowRight-7315f6c1.cjs"), _ = require("../chunks/Close-98cb6f12.cjs"), b = require("@vueuse/components"), h = require("floating-vue");
 const y = {
   name: "NcAppSidebarTabs",
   components: {
@@ -162,7 +162,7 @@ var g = function() {
   k,
   !1,
   null,
-  "c682268d",
+  "146b0d37",
   null,
   null
 );

package/dist/Components/NcAppSidebar.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"NcAppSidebar.cjs","sources":["../../src/components/NcAppSidebar/NcAppSidebarTabs.vue","../../node_modules/vue-material-design-icons/Star.vue","../../node_modules/vue-material-design-icons/StarOutline.vue","../../src/components/NcAppSidebar/NcAppSidebar.vue"],"sourcesContent":["<!--\n - @copyright Copyright (c) 2019 John Molakvoæ <skjnldsv@protonmail.com>\n - @copyright Copyright (c) 2020 Simon Belbeoch <simon.belbeoch@gmail.com>\n -\n - @author John Molakvoæ <skjnldsv@protonmail.com>\n - @author Ferdinand Thiessen <opensource@fthiessen.de>\n -\n - @license AGPL-3.0-or-later\n -\n - This program is free software: you can redistribute it and/or modify\n - it under the terms of the GNU Affero General Public License as\n - published by the Free Software Foundation, either version 3 of the\n - License, or (at your option) any later version.\n -\n - This program is distributed in the hope that it will be useful,\n - but WITHOUT ANY WARRANTY; without even the implied warranty of\n - MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the\n - GNU Affero General Public License for more details.\n -\n - You should have received a copy of the GNU Affero General Public License\n - along with this program. If not, see <http://www.gnu.org/licenses/>.\n -\n -->\n\n<!-- Follows the tab aria guidelines\n\thttps://www.w3.org/TR/wai-aria-practices/examples/tabs/tabs-1/tabs.html -->\n<template>\n\t<div class=\"app-sidebar-tabs\">\n\t\t<!-- tabs navigation -->\n\t\t<!-- 33 and 34 code is for page up and page down -->\n\t\t<div v-if=\"hasMultipleTabs\"\n\t\t\trole=\"tablist\"\n\t\t\tclass=\"app-sidebar-tabs__nav\"\n\t\t\t@keydown.left.exact.prevent.stop=\"focusPreviousTab\"\n\t\t\t@keydown.right.exact.prevent.stop=\"focusNextTab\"\n\t\t\t@keydown.tab.exact.prevent.stop=\"focusActiveTabContent\"\n\t\t\t@keydown.home.exact.prevent.stop=\"focusFirstTab\"\n\t\t\t@keydown.end.exact.prevent.stop=\"focusLastTab\"\n\t\t\t@keydown.page-up.exact.prevent.stop=\"focusFirstTab\"\n\t\t\t@keydown.page-down.exact.prevent.stop=\"focusLastTab\">\n\t\t\t<NcCheckboxRadioSwitch v-for=\"tab in tabs\"\n\t\t\t\t:key=\"tab.id\"\n\t\t\t\t:aria-controls=\"`tab-${tab.id}`\"\n\t\t\t\t:aria-selected=\"String(activeTab === tab.id)\"\n\t\t\t\t:button-variant=\"true\"\n\t\t\t\t:checked=\"activeTab === tab.id\"\n\t\t\t\t:wrapper-id=\"`tab-button-${tab.id}`\"\n\t\t\t\t:tabindex=\"activeTab === tab.id ? 0 : -1\"\n\t\t\t\tbutton-variant-grouped=\"horizontal\"\n\t\t\t\tclass=\"app-sidebar-tabs__tab\"\n\t\t\t\t:class=\"{ active: tab.id === activeTab }\"\n\t\t\t\trole=\"tab\"\n\t\t\t\ttype=\"button\"\n\t\t\t\t@update:checked=\"setActive(tab.id)\">\n\t\t\t\t<span class=\"app-sidebar-tabs__tab-caption\">\n\t\t\t\t\t{{ tab.name }}\n\t\t\t\t</span>\n\t\t\t\t<template #icon>\n\t\t\t\t\t<NcVNodes :vnodes=\"tab.renderIcon()\">\n\t\t\t\t\t\t<span class=\"app-sidebar-tabs__tab-icon\" :class=\"tab.icon\" />\n\t\t\t\t\t</NcVNodes>\n\t\t\t\t</template>\n\t\t\t</NcCheckboxRadioSwitch>\n\t\t</div>\n\n\t\t<!-- tabs content -->\n\t\t<div :class=\"{'app-sidebar-tabs__content--multiple': hasMultipleTabs}\"\n\t\t\tclass=\"app-sidebar-tabs__content\">\n\t\t\t<!-- @slot Tabs content - NcAppSidebarTab components or any content if there is no tabs -->\n\t\t\t<slot />\n\t\t</div>\n\t</div>\n</template>\n\n<script>\nimport NcVNodes from '../NcVNodes/index.js'\nimport NcCheckboxRadioSwitch from '../NcCheckboxRadioSwitch/index.js'\n\nexport default {\n\tname: 'NcAppSidebarTabs',\n\n\tcomponents: {\n\t\tNcCheckboxRadioSwitch,\n\t\tNcVNodes,\n\t},\n\n\tprovide() {\n\t\treturn {\n\t\t\tregisterTab: this.registerTab,\n\t\t\tunregisterTab: this.unregisterTab,\n\t\t\t// Getter as an alternative to Vue 2.7 computed(() => this.activeTab)\n\t\t\tgetActiveTab: () => this.activeTab,\n\t\t\t// Used to check whether the tab header is shown so the tabs can reference the tab header for `aria-labelledby` or not\n\t\t\tisTablistShown: () => this.hasMultipleTabs,\n\t\t}\n\t},\n\n\tprops: {\n\t\t/*\n\t\t Id of the tab to activate\n\t\t /\n\t\tactive: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\t},\n\n\temits: ['update:active'],\n\n\tdata() {\n\t\treturn {\n\t\t\t/\n\t\t\t Tab descriptions from the passed NcSidebarTab components' props to build the tab navbar from.\n\t\t\t /\n\t\t\ttabs: [],\n\t\t\t/\n\t\t\t Local active (open) tab's ID. It allows to use component without active.sync\n\t\t\t /\n\t\t\tactiveTab: '',\n\t\t}\n\t},\n\n\tcomputed: {\n\t\t/\n\t\t Has multiple tabs. If only one tab - its content is shown without navigation\n\t\t \n\t\t @return {boolean}\n\t\t /\n\t\thasMultipleTabs() {\n\t\t\treturn this.tabs.length > 1\n\t\t},\n\n\t\tcurrentTabIndex() {\n\t\t\treturn this.tabs.findIndex((tab) => tab.id === this.activeTab)\n\t\t},\n\t},\n\n\twatch: {\n\t\tactive(active) {\n\t\t\t// Prevent running it twice\n\t\t\tif (active !== this.activeTab) {\n\t\t\t\tthis.updateActive()\n\t\t\t}\n\t\t},\n\t},\n\n\tmethods: {\n\n\t\t/\n\t\t Set the current active tab\n\t\t \n\t\t @param {string} id the id of the tab\n\t\t /\n\t\tsetActive(id) {\n\t\t\tthis.activeTab = id\n\t\t\t/\n\t\t\t @property {string} active - active tab's id\n\t\t\t /\n\t\t\tthis.$emit('update:active', this.activeTab)\n\t\t},\n\n\t\t/\n\t\t Focus the previous tab\n\t\t * and emit to the parent component\n\t\t /\n\t\tfocusPreviousTab() {\n\t\t\tif (this.currentTabIndex > 0) {\n\t\t\t\tthis.setActive(this.tabs[this.currentTabIndex - 1].id)\n\t\t\t}\n\t\t\tthis.focusActiveTab()\n\t\t},\n\n\t\t/\n\t\t Focus the next tab\n\t\t * and emit to the parent component\n\t\t /\n\t\tfocusNextTab() {\n\t\t\tif (this.currentTabIndex < this.tabs.length - 1) {\n\t\t\t\tthis.setActive(this.tabs[this.currentTabIndex + 1].id)\n\t\t\t}\n\t\t\tthis.focusActiveTab()\n\t\t},\n\n\t\t/\n\t\t Focus the first tab\n\t\t * and emit to the parent component\n\t\t /\n\t\tfocusFirstTab() {\n\t\t\tthis.setActive(this.tabs[0].id)\n\t\t\tthis.focusActiveTab()\n\t\t},\n\n\t\t/\n\t\t Focus the last tab\n\t\t * and emit to the parent component\n\t\t /\n\t\tfocusLastTab() {\n\t\t\tthis.setActive(this.tabs[this.tabs.length - 1].id)\n\t\t\tthis.focusActiveTab()\n\t\t},\n\n\t\t/\n\t\t Focus the current active tab\n\t\t /\n\t\tfocusActiveTab() {\n\t\t\tthis.$el.querySelector(`#tab-button-${this.activeTab}`).focus()\n\t\t},\n\n\t\t/\n\t\t Focus the content on tab\n\t\t * see aria accessibility guidelines\n\t\t /\n\t\tfocusActiveTabContent() {\n\t\t\tthis.$el.querySelector('#tab-' + this.activeTab).focus()\n\t\t},\n\n\t\t/\n\t\t Update the current active tab\n\t\t /\n\t\tupdateActive() {\n\t\t\tthis.activeTab = this.active\n\t\t\t&& this.tabs.some(tab => tab.id === this.active)\n\t\t\t\t? this.active\n\t\t\t\t: this.tabs.length > 0\n\t\t\t\t\t? this.tabs[0].id\n\t\t\t\t\t: ''\n\t\t},\n\n\t\t/\n\t\t Register child tab in the tabs\n\t\t \n\t\t @param {object} tab child tab passed to slot\n\t\t /\n\t\tregisterTab(tab) {\n\t\t\tthis.tabs.push(tab)\n\t\t\tthis.tabs.sort((a, b) => {\n\t\t\t\tif (a.order === b.order) {\n\t\t\t\t\treturn OC.Util.naturalSortCompare(a.name, b.name)\n\t\t\t\t}\n\t\t\t\treturn a.order - b.order\n\t\t\t})\n\t\t\tthis.updateActive()\n\t\t},\n\n\t\t/\n\t\t Unregister child tab from the tabs\n\t\t \n\t\t @param {string} id tab's id\n\t\t /\n\t\tunregisterTab(id) {\n\t\t\tconst tabIndex = this.tabs.findIndex((tab) => tab.id === id)\n\t\t\tif (tabIndex !== -1) {\n\t\t\t\tthis.tabs.splice(tabIndex, 1)\n\t\t\t}\n\t\t\tif (this.activeTab === id) {\n\t\t\t\tthis.updateActive()\n\t\t\t}\n\t\t},\n\t},\n}\n</script>\n<style lang=\"scss\" scoped>\n.app-sidebar-tabs {\n\tdisplay: flex;\n\tflex-direction: column;\n\tmin-height: 0;\n\tflex: 1 1 100%;\n\n\t&__nav {\n\t\tdisplay: flex;\n\t\tjustify-content: stretch;\n\t\tmargin-top: 10px;\n\t\tpadding: 0 4px;\n\t}\n\n\t&__tab {\n\t\tflex: 1 1;\n\t\t&.active {\n\t\t\tcolor: var(--color-primary-element);\n\t\t}\n\n\t\t&-caption {\n\t\t\tflex: 0 1 100%;\n\t\t\twidth: 100%;\n\t\t\toverflow: hidden;\n\t\t\twhite-space: nowrap;\n\t\t\ttext-overflow: ellipsis;\n\t\t\ttext-align: center;\n\t\t}\n\n\t\t&-icon {\n\t\t\tdisplay: flex;\n\t\t\talign-items: center;\n\t\t\tjustify-content: center;\n\t\t\tbackground-size: 20px;\n\t\t}\n\n\t\t// Override max-width to use all available space\n\t\t:deep(.checkbox-radio-switch__content) {\n\t\t\tmax-width: unset;\n\t\t}\n\t}\n\n\t&__content {\n\t\tposition: relative;\n\t\t// take full available height\n\t\tmin-height: 0;\n\t\theight: 100%;\n\t\t// force the use of the tab component if more than one tab\n\t\t// you can just put raw content if you don't use tabs\n\t\t&--multiple > :not(section) {\n\t\t\tdisplay: none;\n\t\t}\n\t}\n}\n\n:deep(.checkbox-radio-switch--button-variant.checkbox-radio-switch) {\n\tborder: unset;\n}\n</style>\n","<template>\n <span v-bind=\"$attrs\"\n :aria-hidden=\"!title\"\n :aria-label=\"title\"\n class=\"material-design-icon star-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,17.27L18.18,21L16.54,13.97L22,9.24L14.81,8.62L12,2L9.19,8.62L2,9.24L7.45,13.97L5.82,21L12,17.27Z\">\n <title v-if=\"title\">{{ title }}</title>\n </path>\n </svg>\n </span>\n</template>\n\n<script>\nexport default {\n name: \"StarIcon\",\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\"\n :aria-label=\"title\"\n class=\"material-design-icon star-outline-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.39L8.24,17.66L9.23,13.38L5.91,10.5L10.29,10.13L12,6.09L13.71,10.13L18.09,10.5L14.77,13.38L15.76,17.66M22,9.24L14.81,8.63L12,2L9.19,8.63L2,9.24L7.45,13.97L5.82,21L12,17.27L18.18,21L16.54,13.97L22,9.24Z\">\n <title v-if=\"title\">{{ title }}</title>\n </path>\n </svg>\n </span>\n</template>\n\n<script>\nexport default {\n name: \"StarOutlineIcon\",\n emits: ['click'],\n props: {\n title: {\n type: String,\n },\n fillColor: {\n type: String,\n default: \"currentColor\"\n },\n size: {\n type: Number,\n default: 24\n }\n }\n}\n</script>","<!--\n - @copyright Copyright (c) 2019 John Molakvoæ <skjnldsv@protonmail.com>\n -\n - @author John Molakvoæ <skjnldsv@protonmail.com>\n -\n - @license GNU AGPL version 3 or any later version\n -\n - This program is free software: you can redistribute it and/or modify\n - it under the terms of the GNU Affero General Public License as\n - published by the Free Software Foundation, either version 3 of the\n - License, or (at your option) any later version.\n -\n - This program is distributed in the hope that it will be useful,\n - but WITHOUT ANY WARRANTY; without even the implied warranty of\n - MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the\n - GNU Affero General Public License for more details.\n -\n - You should have received a copy of the GNU Affero General Public License\n - along with this program. If not, see <http://www.gnu.org/licenses/>.\n -\n -->\n\n<docs>\n### General description\n\nThis component provides a way to include the standardised sidebar.\nThe standard properties like name, subname, starred, etc. allow to automatically\ninclude a standard-header like it's used by the files app.\n\n### Standard usage\n\n```vue\n<template>\n\t<NcAppSidebar\n\t\t:starred=\"starred\"\n\t\tname=\"cat-picture.jpg\"\n\t\tsubname=\"last edited 3 weeks ago\">\n\t\t<NcAppSidebarTab name=\"Search\" id=\"search-tab\">\n\t\t\t<template #icon>\n\t\t\t\t<Magnify :size=\"20\" />\n\t\t\t</template>\n\t\t\tSearch tab content\n\t\t</NcAppSidebarTab>\n\t\t<NcAppSidebarTab name=\"Settings\" id=\"settings-tab\">\n\t\t\t<template #icon>\n\t\t\t\t<Cog :size=\"20\" />\n\t\t\t</template>\n\t\t\tSettings tab content\n\t\t</NcAppSidebarTab>\n\t\t<NcAppSidebarTab name=\"Sharing\" id=\"share-tab\">\n\t\t\t<template #icon>\n\t\t\t\t<ShareVariant :size=\"20\" />\n\t\t\t</template>\n\t\t\tSharing tab content\n\t\t</NcAppSidebarTab>\n\t</NcAppSidebar>\n</template>\n<script>\n\timport Magnify from 'vue-material-design-icons/Magnify'\n\timport Cog from 'vue-material-design-icons/Cog'\n\timport ShareVariant from 'vue-material-design-icons/ShareVariant'\n\n\texport default {\n\t\tcomponents: {\n\t\t\tMagnify,\n\t\t\tCog,\n\t\t\tShareVariant,\n\t\t},\n\t\tdata() {\n\t\t\treturn {\n\t\t\t\tstarred: false,\n\t\t\t}\n\t\t},\n\t}\n</script>\n```\n\n### One tab\n\nSingle tab is rendered without navigation.\n\n```vue\n<template>\n\t<div>\n\t\t<NcAppSidebar\n\t\t\tname=\"cat-picture.jpg\"\n\t\t\tsubname=\"last edited 3 weeks ago\">\n\t\t\t<NcAppSidebarTab name=\"Settings\" id=\"settings-tab\">\n\t\t\t\t<template #icon>\n\t\t\t\t\t<Cog :size=\"20\" />\n\t\t\t\t</template>\n\t\t\t\tSingle tab content\n\t\t\t</NcAppSidebarTab>\n\t\t</NcAppSidebar>\n\t</div>\n</template>\n<script>\nimport Cog from 'vue-material-design-icons/Cog'\n\nexport default {\n\tcomponents: {\n\t\tCog,\n\t},\n}\n</script>\n```\n\n### Dynamic tabs\n\n```vue\n<template>\n\t<div>\n\t\t<NcCheckboxRadioSwitch :checked.sync=\"showTabs[0]\">Show search tab</NcCheckboxRadioSwitch>\n\t\t<NcCheckboxRadioSwitch :checked.sync=\"showTabs[1]\">Show settings tab</NcCheckboxRadioSwitch>\n\t\t<NcCheckboxRadioSwitch :checked.sync=\"showTabs[2]\">Show sharing tab</NcCheckboxRadioSwitch>\n\t\t<NcAppSidebar\n\t\t\tname=\"cat-picture.jpg\"\n\t\t\tsubname=\"last edited 3 weeks ago\">\n\t\t\t<NcAppSidebarTab v-if=\"showTabs[0]\" name=\"Search\" id=\"search-tab\">\n\t\t\t\t<template #icon>\n\t\t\t\t\t<Magnify :size=\"20\" />\n\t\t\t\t</template>\n\t\t\t\tSearch tab content\n\t\t\t</NcAppSidebarTab>\n\t\t\t<NcAppSidebarTab v-if=\"showTabs[1]\" name=\"Settings\" id=\"settings-tab\">\n\t\t\t\t<template #icon>\n\t\t\t\t\t<Cog :size=\"20\" />\n\t\t\t\t</template>\n\t\t\t\tSettings\n\t\t\t</NcAppSidebarTab>\n\t\t\t<NcAppSidebarTab v-if=\"showTabs[2]\" name=\"Sharing\" id=\"share-tab\">\n\t\t\t\t<template #icon>\n\t\t\t\t\t<ShareVariant :size=\"20\" />\n\t\t\t\t</template>\n\t\t\t\tSharing tab content\n\t\t\t</NcAppSidebarTab>\n\t\t</NcAppSidebar>\n\t</div>\n</template>\n<script>\nimport Magnify from 'vue-material-design-icons/Magnify'\nimport Cog from 'vue-material-design-icons/Cog'\nimport ShareVariant from 'vue-material-design-icons/ShareVariant'\n\nexport default {\n\tcomponents: {\n\t\tMagnify,\n\t\tCog,\n\t\tShareVariant,\n\t},\n\tdata() {\n\t\treturn {\n\t\t\tshowTabs: [true, true, false],\n\t\t}\n\t},\n}\n</script>\n```\n\n### Custom order\n\n```vue\n<template>\n\t<NcAppSidebar\n\t\tname=\"cat-picture.jpg\"\n\t\tsubname=\"last edited 3 weeks ago\">\n\t\t<NcAppSidebarTab name=\"Search\" id=\"search-tab\" :order=\"3\">\n\t\t\t<template #icon>\n\t\t\t\t<Magnify :size=\"20\" />\n\t\t\t</template>\n\t\t\tSearch tab content\n\t\t</NcAppSidebarTab>\n\t\t<NcAppSidebarTab name=\"Settings\" id=\"settings-tab\" :order=\"2\">\n\t\t\t<template #icon>\n\t\t\t\t<Cog :size=\"20\" />\n\t\t\t</template>\n\t\t\tSettings tab content\n\t\t</NcAppSidebarTab>\n\t\t<NcAppSidebarTab name=\"Sharing\" id=\"share-tab\" :order=\"1\">\n\t\t\t<template #icon>\n\t\t\t\t<ShareVariant :size=\"20\" />\n\t\t\t</template>\n\t\t\tSharing tab content\n\t\t</NcAppSidebarTab>\n\t</NcAppSidebar>\n</template>\n<script>\nimport Magnify from 'vue-material-design-icons/Magnify'\nimport Cog from 'vue-material-design-icons/Cog'\nimport ShareVariant from 'vue-material-design-icons/ShareVariant'\n\nexport default {\n\tcomponents: {\n\t\tMagnify,\n\t\tCog,\n\t\tShareVariant,\n\t},\n}\n</script>\n```\n\n### Activating tab programmatically\n\n```vue\n<template>\n\t<div>\n\t\t<NcSelect v-model=\"active\" :options=\"['search-tab', 'settings-tab', 'share-tab']\" />\n\t\t<NcAppSidebar\n\t\t\tname=\"cat-picture.jpg\"\n\t\t\tsubname=\"last edited 3 weeks ago\"\n\t\t\t:active.sync=\"active\">\n\t\t\t<NcAppSidebarTab name=\"Search\" id=\"search-tab\">\n\t\t\t\t<template #icon>\n\t\t\t\t\t<Magnify :size=\"20\" />\n\t\t\t\t</template>\n\t\t\t\tSearch tab content\n\t\t\t</NcAppSidebarTab>\n\t\t\t<NcAppSidebarTab name=\"Settings\" id=\"settings-tab\">\n\t\t\t\t<template #icon>\n\t\t\t\t\t<Cog :size=\"20\" />\n\t\t\t\t</template>\n\t\t\t\tSettings\n\t\t\t</NcAppSidebarTab>\n\t\t\t<NcAppSidebarTab name=\"Sharing\" id=\"share-tab\">\n\t\t\t\t<template #icon>\n\t\t\t\t\t<ShareVariant :size=\"20\" />\n\t\t\t\t</template>\n\t\t\t\tSharing tab content\n\t\t\t</NcAppSidebarTab>\n\t\t</NcAppSidebar>\n\t</div>\n</template>\n<script>\nimport Magnify from 'vue-material-design-icons/Magnify'\nimport Cog from 'vue-material-design-icons/Cog'\nimport ShareVariant from 'vue-material-design-icons/ShareVariant'\n\nexport default {\n\tcomponents: {\n\t\tMagnify,\n\t\tCog,\n\t\tShareVariant,\n\t},\n\tdata() {\n\t\treturn {\n\t\t\tactive: 'search-tab',\n\t\t}\n\t},\n}\n</script>\n```\n\n### Editable name\n\n```vue\n<template>\n\t<NcAppSidebar\n\t\t:name.sync=\"name\"\n\t\t:name-editable=\"true\"\n\t\tname-placeholder=\"Filename\"\n\t\tsubname=\"last edited 3 weeks ago\">\n\t\t<!-- Insert your slots and tabs here -->\n\t</NcAppSidebar>\n</template>\n<script>\n\texport default {\n\t\tdata() {\n\t\t\treturn {\n\t\t\t\tname: 'cat-picture.jpg',\n\t\t\t}\n\t\t},\n\t}\n</script>\n```\n\n### Editable name after click with custom tertiary action\n\n```vue\n<template>\n\t<NcAppSidebar\n\t\t:name=\"name\"\n\t\t:name-editable.sync=\"nameEditable\"\n\t\t:name-placeholder=\"namePlaceholder\"\n\t\t:subname=\"subname\"\n\t\t@update:name=\"nameUpdate\">\n\t\t<template #tertiary-actions>\n\t\t\t<form>\n\t\t\t\t<input type=\"checkbox\" @click=\"toggledCheckbox\"/>\n\t\t\t</form>\n\t\t</template>\n\t</NcAppSidebar>\n</template>\n<script>\n\texport default {\n\t\tdata() {\n\t\t\treturn {\n\t\t\t\tname: 'cat-picture.jpg',\n\t\t\t\tnamePlaceholder: 'Filename',\n\t\t\t\tsubname: 'last edited 3 weeks ago',\n\t\t\t\tnameEditable: false\n\t\t\t}\n\t\t},\n\t\tmethods: {\n\t\t\tnameUpdate(e) {\n\t\t\t\tthis.name = e\n\t\t\t},\n\t\t\ttoggledCheckbox() {\n\t\t\t\talert('toggle')\n\t\t\t}\n\t\t}\n\t}\n</script>\n```\n\n### Empty sidebar for e.g. empty content component.\n\n```vue\n\t<template>\n\t\t<NcAppSidebar\n\t\t\tname=\"cat-picture.jpg\"\n\t\t\t:empty=\"true\">\n\t\t\t<NcEmptyContent name=\"Content not found.\">\n\t\t\t\t<template #icon>\n\t\t\t\t\t<Magnify :size=\"20\" />\n\t\t\t\t</template>\n\t\t\t</NcEmptyContent>\n\t\t</NcAppSidebar>\n\t</template>\n\t<script>\n\timport Magnify from 'vue-material-design-icons/Magnify'\n\n\texport default {\n\t\tcomponents: {\n\t\t\tMagnify,\n\t\t},\n\t}\n\t</script>\n```\n</docs>\n\n<template>\n\t<transition appear\n\t\tname=\"slide-right\"\n\t\t@before-enter=\"onBeforeEnter\"\n\t\t@after-enter=\"onAfterEnter\"\n\t\t@before-leave=\"onBeforeLeave\"\n\t\t@after-leave=\"onAfterLeave\">\n\t\t<aside id=\"app-sidebar-vue\" class=\"app-sidebar\">\n\t\t\t<header :class=\"{\n\t\t\t\t\t'app-sidebar-header--with-figure': hasFigure,\n\t\t\t\t\t'app-sidebar-header--compact': compact,\n\t\t\t\t}\"\n\t\t\t\tclass=\"app-sidebar-header\">\n\t\t\t\t<!-- container for figure and description, allows easy switching to compact mode -->\n\t\t\t\t<div class=\"app-sidebar-header__info\">\n\t\t\t\t\t<!-- sidebar header illustration/figure -->\n\t\t\t\t\t<div v-if=\"hasFigure && !empty\"\n\t\t\t\t\t\t:class=\"{\n\t\t\t\t\t\t\t'app-sidebar-header__figure--with-action': hasFigureClickListener\n\t\t\t\t\t\t}\"\n\t\t\t\t\t\tclass=\"app-sidebar-header__figure\"\n\t\t\t\t\t\t:style=\"{\n\t\t\t\t\t\t\tbackgroundImage: `url(${background})`\n\t\t\t\t\t\t}\"\n\t\t\t\t\t\ttabindex=\"0\"\n\t\t\t\t\t\t@click=\"onFigureClick\"\n\t\t\t\t\t\t@keydown.enter=\"onFigureClick\">\n\t\t\t\t\t\t<slot class=\"app-sidebar-header__background\" name=\"header\" />\n\t\t\t\t\t</div>\n\n\t\t\t\t\t<!-- sidebar details -->\n\t\t\t\t\t<div v-if=\"!empty\"\n\t\t\t\t\t\t:class=\"{\n\t\t\t\t\t\t\t'app-sidebar-header__desc--with-tertiary-action': canStar \|\| $slots['tertiary-actions'],\n\t\t\t\t\t\t\t'app-sidebar-header__desc--editable': nameEditable && !subname,\n\t\t\t\t\t\t\t'app-sidebar-header__desc--with-subname--editable': nameEditable && subname,\n\t\t\t\t\t\t\t'app-sidebar-header__desc--without-actions': !$slots['secondary-actions'],\n\t\t\t\t\t\t}\"\n\t\t\t\t\t\tclass=\"app-sidebar-header__desc\">\n\t\t\t\t\t\t<!-- favourite icon -->\n\t\t\t\t\t\t<div v-if=\"canStar \|\| $slots['tertiary-actions']\" class=\"app-sidebar-header__tertiary-actions\">\n\t\t\t\t\t\t\t<slot name=\"tertiary-actions\">\n\t\t\t\t\t\t\t\t<NcButton v-if=\"canStar\"\n\t\t\t\t\t\t\t\t\t:aria-label=\"favoriteTranslated\"\n\t\t\t\t\t\t\t\t\t:pressed=\"isStarred\"\n\t\t\t\t\t\t\t\t\tclass=\"app-sidebar-header__star\"\n\t\t\t\t\t\t\t\t\ttype=\"secondary\"\n\t\t\t\t\t\t\t\t\t@click.prevent=\"toggleStarred\">\n\t\t\t\t\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t\t\t\t\t<NcLoadingIcon v-if=\"starLoading\" />\n\t\t\t\t\t\t\t\t\t\t<Star v-else-if=\"isStarred\" :size=\"20\" />\n\t\t\t\t\t\t\t\t\t\t<StarOutline v-else :size=\"20\" />\n\t\t\t\t\t\t\t\t\t</template>\n\t\t\t\t\t\t\t\t</NcButton>\n\t\t\t\t\t\t\t</slot>\n\t\t\t\t\t\t</div>\n\n\t\t\t\t\t\t<!-- name -->\n\t\t\t\t\t\t<div class=\"app-sidebar-header__name-container\">\n\t\t\t\t\t\t\t<div class=\"app-sidebar-header__mainname-container\">\n\t\t\t\t\t\t\t\t<!-- main name -->\n\t\t\t\t\t\t\t\t<h2 v-show=\"!nameEditable\"\n\t\t\t\t\t\t\t\t\tv-linkify=\"{text: name, linkify: linkifyName}\"\n\t\t\t\t\t\t\t\t\t:aria-label=\"title\"\n\t\t\t\t\t\t\t\t\t:title=\"title\"\n\t\t\t\t\t\t\t\t\tclass=\"app-sidebar-header__mainname\"\n\t\t\t\t\t\t\t\t\t:tabindex=\"nameEditable ? 0 : undefined\"\n\t\t\t\t\t\t\t\t\t@click.self=\"editName\">\n\t\t\t\t\t\t\t\t\t{{ name }}\n\t\t\t\t\t\t\t\t</h2>\n\t\t\t\t\t\t\t\t<template v-if=\"nameEditable\">\n\t\t\t\t\t\t\t\t\t<form v-click-outside=\"() => onSubmitName()\"\n\t\t\t\t\t\t\t\t\t\tclass=\"app-sidebar-header__mainname-form\"\n\t\t\t\t\t\t\t\t\t\t@submit.prevent=\"onSubmitName\">\n\t\t\t\t\t\t\t\t\t\t<input ref=\"nameInput\"\n\t\t\t\t\t\t\t\t\t\t\tv-focus\n\t\t\t\t\t\t\t\t\t\t\tclass=\"app-sidebar-header__mainname-input\"\n\t\t\t\t\t\t\t\t\t\t\ttype=\"text\"\n\t\t\t\t\t\t\t\t\t\t\t:placeholder=\"namePlaceholder\"\n\t\t\t\t\t\t\t\t\t\t\t:value=\"name\"\n\t\t\t\t\t\t\t\t\t\t\t@keydown.esc.stop=\"onDismissEditing\"\n\t\t\t\t\t\t\t\t\t\t\t@input=\"onNameInput\">\n\t\t\t\t\t\t\t\t\t\t<NcButton type=\"tertiary-no-background\"\n\t\t\t\t\t\t\t\t\t\t\t:aria-label=\"changeNameTranslated\"\n\t\t\t\t\t\t\t\t\t\t\tnative-type=\"submit\">\n\t\t\t\t\t\t\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t\t\t\t\t\t\t<ArrowRight :size=\"20\" />\n\t\t\t\t\t\t\t\t\t\t\t</template>\n\t\t\t\t\t\t\t\t\t\t</NcButton>\n\t\t\t\t\t\t\t\t\t</form>\n\t\t\t\t\t\t\t\t</template>\n\t\t\t\t\t\t\t\t<!-- header main menu -->\n\t\t\t\t\t\t\t\t<NcActions v-if=\"$slots['secondary-actions']\"\n\t\t\t\t\t\t\t\t\tclass=\"app-sidebar-header__menu\"\n\t\t\t\t\t\t\t\t\t:force-menu=\"forceMenu\">\n\t\t\t\t\t\t\t\t\t<slot name=\"secondary-actions\" />\n\t\t\t\t\t\t\t\t</NcActions>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t<!-- secondary name -->\n\t\t\t\t\t\t\t<p v-if=\"subname.trim() !== ''\"\n\t\t\t\t\t\t\t\t:aria-label=\"subtitle\"\n\t\t\t\t\t\t\t\t:title=\"subtitle\"\n\t\t\t\t\t\t\t\tclass=\"app-sidebar-header__subname\">\n\t\t\t\t\t\t\t\t{{ subname }}\n\t\t\t\t\t\t\t</p>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\n\t\t\t\t<NcButton :title=\"closeTranslated\"\n\t\t\t\t\t:aria-label=\"closeTranslated\"\n\t\t\t\t\ttype=\"tertiary\"\n\t\t\t\t\tclass=\"app-sidebar__close\"\n\t\t\t\t\t@click.prevent=\"closeSidebar\">\n\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t<Close :size=\"20\" />\n\t\t\t\t\t</template>\n\t\t\t\t</NcButton>\n\n\t\t\t\t<div v-if=\"$slots['description'] && !empty\" class=\"app-sidebar-header__description\">\n\t\t\t\t\t<slot name=\"description\" />\n\t\t\t\t</div>\n\t\t\t</header>\n\n\t\t\t<NcAppSidebarTabs v-show=\"!loading\"\n\t\t\t\tref=\"tabs\"\n\t\t\t\t:active=\"active\"\n\t\t\t\t@update:active=\"onUpdateActive\">\n\t\t\t\t<slot />\n\t\t\t</NcAppSidebarTabs>\n\n\t\t\t<NcEmptyContent v-if=\"loading\">\n\t\t\t\t<template #icon>\n\t\t\t\t\t<NcLoadingIcon :size=\"64\" />\n\t\t\t\t</template>\n\t\t\t</NcEmptyContent>\n\t\t</aside>\n\t</transition>\n</template>\n\n<script>\nimport NcAppSidebarTabs from './NcAppSidebarTabs.vue'\nimport NcActions from '../NcActions/index.js'\nimport NcLoadingIcon from '../NcLoadingIcon/index.js'\nimport NcButton from '../NcButton/index.js'\nimport NcEmptyContent from '../NcEmptyContent/index.js'\nimport Focus from '../../directives/Focus/index.js'\nimport Linkify from '../../directives/Linkify/index.js'\nimport Tooltip from '../../directives/Tooltip/index.js'\nimport { t } from '../../l10n.js'\n\nimport ArrowRight from 'vue-material-design-icons/ArrowRight.vue'\nimport Close from 'vue-material-design-icons/Close.vue'\nimport Star from 'vue-material-design-icons/Star.vue'\nimport StarOutline from 'vue-material-design-icons/StarOutline.vue'\n\nimport { vOnClickOutside as ClickOutside } from '@vueuse/components'\n\nexport default {\n\tname: 'NcAppSidebar',\n\n\tcomponents: {\n\t\tNcActions,\n\t\tNcAppSidebarTabs,\n\t\tArrowRight,\n\t\tNcButton,\n\t\tNcLoadingIcon,\n\t\tNcEmptyContent,\n\t\tClose,\n\t\tStar,\n\t\tStarOutline,\n\t},\n\n\tdirectives: {\n\t\tfocus: Focus,\n\t\tlinkify: Linkify,\n\t\tClickOutside,\n\t\tTooltip,\n\t},\n\n\tprops: {\n\t\tactive: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\t\tname: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t\trequired: true,\n\t\t},\n\n\t\t/\n\t\t Allow to edit the sidebar name.\n\t\t /\n\t\tnameEditable: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\t\tnamePlaceholder: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\t\tsubname: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\t\t/\n\t\t Title to display for the subname.\n\t\t /\n\t\tsubtitle: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\n\t\t/\n\t\t Url to the top header background image\n\t\t * Applied with css\n\t\t /\n\t\tbackground: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\n\t\t/\n\t\t Enable the favourite icon if not null\n\t\t * See fired events\n\t\t /\n\t\tstarred: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: null,\n\t\t},\n\t\t/\n\t\t Show loading spinner instead of the star icon\n\t\t /\n\t\tstarLoading: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\t\t/\n\t\t Show loading spinner instead of tabs\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 Display the sidebar in compact mode\n\t\t /\n\t\tcompact: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/\n\t\t Only display close button and default slot content.\n\t\t * Don't display other header content and primary and secondary actions.\n\t\t * Useful when showing the EmptyContent component as content.\n\t\t /\n\t\tempty: {\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\t\t/\n\t\t Linkify the name\n\t\t /\n\t\tlinkifyName: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\t\t/\n\t\t Title to display for the name.\n\t\t * Can be set to the same text in case it's too long.\n\t\t /\n\t\ttitle: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\t},\n\n\temits: [\n\t\t'close',\n\t\t'closing',\n\t\t'closed',\n\t\t'opening',\n\t\t'opened',\n\t\t'figure-click',\n\t\t'update:starred',\n\t\t'update:nameEditable',\n\t\t'update:name',\n\t\t'update:active',\n\t\t'submit-name',\n\t\t'dismiss-editing',\n\t],\n\n\tdata() {\n\t\treturn {\n\t\t\tchangeNameTranslated: t('Change name'),\n\t\t\tcloseTranslated: t('Close sidebar'),\n\t\t\tfavoriteTranslated: t('Favorite'),\n\t\t\tisStarred: this.starred,\n\t\t}\n\t},\n\n\tcomputed: {\n\t\tcanStar() {\n\t\t\treturn this.isStarred !== null\n\t\t},\n\t\thasFigure() {\n\t\t\treturn this.$slots.header \|\| this.background\n\t\t},\n\t\thasFigureClickListener() {\n\t\t\treturn this.$listeners['figure-click']\n\t\t},\n\t},\n\n\twatch: {\n\t\tstarred() {\n\t\t\tthis.isStarred = this.starred\n\t\t},\n\t},\n\n\tbeforeDestroy() {\n\t\t// Make sure that the 'closed' event is dispatched even if this element is destroyed before the 'after-leave' event is received.\n\t\tthis.$emit('closed')\n\t},\n\n\tmethods: {\n\t\tonBeforeEnter(element) {\n\t\t\t/\n\t\t\t The sidebar is opening and the transition is in progress\n\t\t\t \n\t\t\t @type {HTMLElement}\n\t\t\t /\n\t\t\tthis.$emit('opening', element)\n\t\t},\n\t\tonAfterEnter(element) {\n\t\t\t/\n\t\t\t The sidebar is opened and the transition is complete\n\t\t\t \n\t\t\t @type {HTMLElement}\n\t\t\t /\n\t\t\tthis.$emit('opened', element)\n\t\t},\n\t\tonBeforeLeave(element) {\n\t\t\t/\n\t\t\t The sidebar is closing and the transition is in progress\n\t\t\t \n\t\t\t @type {HTMLElement}\n\t\t\t /\n\t\t\tthis.$emit('closing', element)\n\t\t},\n\t\tonAfterLeave(element) {\n\t\t\t/\n\t\t\t The sidebar is closed and the transition is complete\n\t\t\t \n\t\t\t @type {HTMLElement}\n\t\t\t /\n\t\t\tthis.$emit('closed', element)\n\t\t},\n\n\t\t/\n\t\t Used to tell parent component the user asked to close the sidebar\n\t\t \n\t\t @param {Event} e close icon click event\n\t\t /\n\t\tcloseSidebar(e) {\n\t\t\t/\n\t\t\t The user clicked to closed the sidebar\n\t\t\t \n\t\t\t @type {Event}\n\t\t\t /\n\t\t\tthis.$emit('close', e)\n\t\t},\n\n\t\t/\n\t\t Emit figure click event to parent component\n\t\t \n\t\t @param {Event} e click event\n\t\t /\n\t\tonFigureClick(e) {\n\t\t\t/\n\t\t\t The figure/background header has been clicked\n\t\t\t \n\t\t\t @type {Event}\n\t\t\t /\n\t\t\tthis.$emit('figure-click', e)\n\t\t},\n\n\t\t/\n\t\t Toggle the favourite state\n\t\t * and emit to the parent component\n\t\t /\n\t\ttoggleStarred() {\n\t\t\tthis.isStarred = !this.isStarred\n\t\t\t/\n\t\t\t Emitted when the starred value changes\n\t\t\t \n\t\t\t @type {boolean}\n\t\t\t /\n\t\t\tthis.$emit('update:starred', this.isStarred)\n\t\t},\n\n\t\teditName() {\n\t\t\t/\n\t\t\t Emitted when the nameEditable value changes\n\t\t\t \n\t\t\t @type {boolean}\n\t\t\t /\n\t\t\tthis.$emit('update:nameEditable', true)\n\t\t\t// Focus the name input\n\t\t\tif (this.nameEditable) {\n\t\t\t\tthis.$nextTick(\n\t\t\t\t\t() => this.$refs.nameInput.focus(),\n\t\t\t\t)\n\t\t\t}\n\t\t},\n\n\t\t/\n\t\t Emit name change event to parent component\n\t\t \n\t\t @param {Event} event input event\n\t\t /\n\t\tonNameInput(event) {\n\t\t\t/\n\t\t\t Emitted when the name value changes\n\t\t\t \n\t\t\t @type {string\|Date}\n\t\t\t /\n\t\t\tthis.$emit('update:name', event.target.value)\n\t\t},\n\n\t\t/\n\t\t Emit when the name form edit confirm button is pressed in order\n\t\t * to change the name.\n\t\t \n\t\t @param {Event} event submit event\n\t\t /\n\t\tonSubmitName(event) {\n\t\t\t// Disable editing\n\t\t\tthis.$emit('update:nameEditable', false)\n\t\t\t/\n\t\t\t Emitted when the name edit input has been submitted\n\t\t\t \n\t\t\t @type {Event}\n\t\t\t /\n\t\t\tthis.$emit('submit-name', event)\n\t\t},\n\t\tonDismissEditing() {\n\t\t\t// Disable editing\n\t\t\tthis.$emit('update:nameEditable', false)\n\t\t\t/\n\t\t\t Emitted when the name edit has been cancelled\n\t\t\t \n\t\t\t @type {Event}\n\t\t\t /\n\t\t\tthis.$emit('dismiss-editing')\n\t\t},\n\t\tonUpdateActive(activeTab) {\n\t\t\t/\n\t\t\t The active tab changed\n\t\t\t \n\t\t\t @type {string}\n\t\t\t /\n\t\t\tthis.$emit('update:active', activeTab)\n\t\t},\n\t},\n}\n</script>\n<style lang=\"scss\" scoped>\n$sidebar-min-width: 300px;\n$sidebar-max-width: 500px;\n\n$desc-vertical-padding: 18px;\n$desc-vertical-padding-compact: 10px;\n$desc-input-padding: 7px;\n\n// name and subname\n$desc-name-height: 30px;\n$desc-subname-height: 22px;\n$desc-height: $desc-name-height + $desc-subname-height;\n\n$top-buttons-spacing: 6px;\n\n/\n\tSidebar: to be used within #content\n\tapp-content will be shrinked properly\n/\n.app-sidebar {\n\tz-index: 1500;\n\ttop: 0;\n\tright: 0;\n\tdisplay: flex;\n\toverflow-x: hidden;\n\toverflow-y: auto;\n\tflex-direction: column;\n\tflex-shrink: 0;\n\twidth: 27vw;\n\tmin-width: $sidebar-min-width;\n\tmax-width: $sidebar-max-width;\n\theight: 100%;\n\tborder-left: 1px solid var(--color-border);\n\tbackground: var(--color-main-background);\n\n\t.app-sidebar-header {\n\t\t> .app-sidebar__close {\n\t\t\tposition: absolute;\n\t\t\tz-index: 100;\n\t\t\ttop: $top-buttons-spacing;\n\t\t\tright: $top-buttons-spacing;\n\t\t\twidth: $clickable-area;\n\t\t\theight: $clickable-area;\n\t\t\topacity: $opacity_normal;\n\t\t\tborder-radius: math.div($clickable-area, 2);\n\t\t\t&:hover,\n\t\t\t&:active,\n\t\t\t&:focus {\n\t\t\t\topacity: $opacity_full;\n\t\t\t\tbackground-color: $action-background-hover;\n\t\t\t}\n\t\t}\n\n\t\t// Compact mode only affects a sidebar with a figure\n\t\t&--compact.app-sidebar-header--with-figure {\n\t\t\t.app-sidebar-header__info {\n\t\t\t\tflex-direction: row;\n\n\t\t\t\t.app-sidebar-header__figure {\n\t\t\t\t\tz-index: 2;\n\t\t\t\t\twidth: $desc-height + $desc-vertical-padding;\n\t\t\t\t\theight: $desc-height + $desc-vertical-padding;\n\t\t\t\t\tmargin: math.div($desc-vertical-padding, 2);\n\t\t\t\t\tborder-radius: 3px;\n\t\t\t\t\tflex: 0 0 auto;\n\t\t\t\t}\n\t\t\t\t.app-sidebar-header__desc {\n\t\t\t\t\tpadding-left: 0;\n\t\t\t\t\tflex: 1 1 auto;\n\t\t\t\t\tmin-width: 0;\n\t\t\t\t\tpadding-right: 2 $clickable-area + $top-buttons-spacing;\n\t\t\t\t\tpadding-top: $desc-vertical-padding-compact;\n\n\t\t\t\t\t&.app-sidebar-header__desc--without-actions {\n\t\t\t\t\t\tpadding-right: #{$clickable-area + $top-buttons-spacing};\n\t\t\t\t\t}\n\n\t\t\t\t\t.app-sidebar-header__tertiary-actions {\n\t\t\t\t\t\tz-index: 3; // above star\n\t\t\t\t\t\tposition: absolute;\n\t\t\t\t\t\ttop: math.div($desc-vertical-padding, 2);\n\t\t\t\t\t\tleft: -1 * $clickable-area;\n\t\t\t\t\t\tgap: 0; // override gap\n\t\t\t\t\t}\n\t\t\t\t\t.app-sidebar-header__menu {\n\t\t\t\t\t\ttop: $top-buttons-spacing;\n\t\t\t\t\t\tright: $clickable-area + $top-buttons-spacing; // left of the close button\n\t\t\t\t\t\tbackground-color: transparent;\n\t\t\t\t\t\tposition: absolute;\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\n\t\t// sidebar without figure\n\t\t&:not(.app-sidebar-header--with-figure) {\n\t\t\t// align the menu with the close button\n\t\t\t.app-sidebar-header__menu {\n\t\t\t\tposition: absolute;\n\t\t\t\ttop: $top-buttons-spacing;\n\t\t\t\tright: $top-buttons-spacing + $clickable-area;\n\t\t\t}\n\t\t\t// increase the padding to not overlap the menu\n\t\t\t.app-sidebar-header__desc {\n\t\t\t\tpadding-right: #{$clickable-area * 2 + $top-buttons-spacing};\n\n\t\t\t\t&.app-sidebar-header__desc--without-actions {\n\t\t\t\t\tpadding-right: #{$clickable-area + $top-buttons-spacing};\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\n\t\t// the container with the figure and the description\n\t\t.app-sidebar-header__info {\n\t\t\tdisplay: flex;\n\t\t\tflex-direction: column;\n\t\t}\n\n\t\t// header background\n\t\t&__figure {\n\t\t\twidth: 100%;\n\t\t\theight: 250px;\n\t\t\tmax-height: 250px;\n\t\t\tbackground-repeat: no-repeat;\n\t\t\tbackground-position: center;\n\t\t\tbackground-size: contain;\n\t\t\t&--with-action {\n\t\t\t\tcursor: pointer;\n\t\t\t}\n\t\t}\n\n\t\t// description\n\t\t&__desc {\n\t\t\tposition: relative;\n\t\t\tdisplay: flex;\n\t\t\tflex-direction: row;\n\t\t\tjustify-content: center;\n\t\t\talign-items: center;\n\t\t\tpadding: #{$desc-vertical-padding} #{$top-buttons-spacing} #{$desc-vertical-padding} #{math.div($desc-vertical-padding, 2)};\n\t\t\tgap: 0 4px;\n\n\t\t\t// custom overrides\n\t\t\t&--with-tertiary-action {\n\t\t\t\tpadding-left: 6px;\n\t\t\t}\n\n\t\t\t&--editable .app-sidebar-header__mainname-form,\n\t\t\t&--with-subname--editable .app-sidebar-header__mainname-form {\n\t\t\t\tmargin-top: -2px;\n\t\t\t\tmargin-bottom: -2px;\n\t\t\t}\n\n\t\t\t&--with-subname--editable .app-sidebar-header__subname {\n\t\t\t\tmargin-top: -2px;\n\t\t\t}\n\n\t\t\t.app-sidebar-header__tertiary-actions {\n\t\t\t\tdisplay: flex;\n\t\t\t\theight: $clickable-area;\n\t\t\t\twidth: $clickable-area;\n\t\t\t\tjustify-content: center;\n\t\t\t\tflex: 0 0 auto;\n\n\t\t\t\t.app-sidebar-header__star {\n\t\t\t\t\t// Override default Button component styles\n\t\t\t\t\tbox-shadow: none;\n\t\t\t\t\t&:not([aria-pressed='true']):hover {\n\t\t\t\t\t\tbox-shadow: none;\n\t\t\t\t\t\tbackground-color: var(--color-background-hover);\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\n\t\t\t// names\n\t\t\t.app-sidebar-header__name-container {\n\t\t\t\tflex: 1 1 auto;\n\t\t\t\tdisplay: flex;\n\t\t\t\tflex-direction: column;\n\t\t\t\tjustify-content: center;\n\t\t\t\tmin-width: 0;\n\n\t\t\t\t.app-sidebar-header__mainname-container {\n\t\t\t\t\tdisplay: flex;\n\t\t\t\t\talign-items: center;\n\t\t\t\t\tmin-height: $clickable-area;\n\n\t\t\t\t\t// main name\n\t\t\t\t\t.app-sidebar-header__mainname {\n\t\t\t\t\t\tpadding: 0;\n\t\t\t\t\t\tmin-height: 30px;\n\t\t\t\t\t\tfont-size: 20px;\n\t\t\t\t\t\tline-height: $desc-name-height;\n\n\t\t\t\t\t\t// Needs 'deep' as the link is generated by the linkify directive\n\t\t\t\t\t\t&:deep(.linkified) {\n\t\t\t\t\t\t\tcursor: pointer;\n\t\t\t\t\t\t\ttext-decoration: underline;\n\t\t\t\t\t\t\tmargin: 0;\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\n\t\t\t\t\t.app-sidebar-header__mainname-form {\n\t\t\t\t\t\tdisplay: flex;\n\t\t\t\t\t\tflex: 1 1 auto;\n\t\t\t\t\t\talign-items: center;\n\n\t\t\t\t\t\tinput.app-sidebar-header__mainname-input {\n\t\t\t\t\t\t\tflex: 1 1 auto;\n\t\t\t\t\t\t\tmargin: 0;\n\t\t\t\t\t\t\tpadding: $desc-input-padding;\n\t\t\t\t\t\t\tfont-size: 20px;\n\t\t\t\t\t\t\tfont-weight: bold;\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\n\t\t\t\t\t// main menu\n\t\t\t\t\t.app-sidebar-header__menu {\n\t\t\t\t\t\theight: $clickable-area;\n\t\t\t\t\t\twidth: $clickable-area;\n\t\t\t\t\t\tborder-radius: math.div($clickable-area, 2);\n\t\t\t\t\t\tbackground-color: $action-background-hover;\n\t\t\t\t\t\tmargin-left: 5px;\n\t\t\t\t\t}\n\t\t\t\t}\n\n\t\t\t\t// shared between main and subname\n\t\t\t\t.app-sidebar-header__mainname,\n\t\t\t\t.app-sidebar-header__subname {\n\t\t\t\t\toverflow: hidden;\n\t\t\t\t\twidth: 100%;\n\t\t\t\t\tmargin: 0;\n\t\t\t\t\twhite-space: nowrap;\n\t\t\t\t\ttext-overflow: ellipsis;\n\t\t\t\t}\n\n\t\t\t\t// subname\n\t\t\t\t.app-sidebar-header__subname {\n\t\t\t\t\tpadding: 0;\n\t\t\t\t\topacity: $opacity_normal;\n\t\t\t\t\tfont-size: var(--default-font-size);\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\n\t\t// sidebar description slot\n\t\t&__description {\n\t\t\tdisplay: flex;\n\t\t\talign-items: center;\n\t\t\tmargin: 0 10px;\n\t\t}\n\t}\n}\n\n// Make the sidebar full-width on small screens\n@media only screen and (max-width: 768px) {\n\t.app-sidebar {\n\t\twidth: 100vw;\n\t\tmax-width: 100vw;\n\t}\n}\n\n.slide-right-leave-active,\n.slide-right-enter-active {\n\ttransition-duration: var(--animation-quick);\n\ttransition-property: max-width, min-width;\n}\n\n.slide-right-enter-to,\n.slide-right-leave {\n\tmin-width: $sidebar-min-width;\n\tmax-width: $sidebar-max-width;\n}\n\n.slide-right-enter,\n.slide-right-leave-to {\n\tmin-width: 0 !important;\n\tmax-width: 0 !important;\n}\n</style>\n\n<style lang=\"scss\">\n// ! slots specific designs, cannot be scoped\n// if any button inside the description slot, increase visual padding\n.app-sidebar-header__description {\n\tbutton, .button,\n\tinput[type='button'],\n\tinput[type='submit'],\n\tinput[type='reset'] {\n\t\tpadding: 6px 22px;\n\t}\n}\n\n</style>\n"],"names":["_sfc_main$3","Components_NcCheckboxRadioSwitch","Components_NcVNodes","tab","active","id","a","b","tabIndex","_sfc_main$2","_sfc_main$1","_sfc_main","Components_NcActions","NcAppSidebarTabs","ArrowRight","Components_NcButton","Components_NcLoadingIcon","Components_NcEmptyContent","Close","Star","StarOutline","Directives_Focus","Directives_Linkify","components","floatingVue","l10n","element","e","event","activeTab"],"mappings":";;;;AA8EA,MAAAA,IAAA;AAAA,EACA,MAAA;AAAA,EAEA,YAAA;AAAA,IACA,uBAAAC;AAAA,IACA,UAAAC;AAAA,EACA;AAAA,EAEA,UAAA;AACA,WAAA;AAAA,MACA,aAAA,KAAA;AAAA,MACA,eAAA,KAAA;AAAA;AAAA,MAEA,cAAA,MAAA,KAAA;AAAA;AAAA,MAEA,gBAAA,MAAA,KAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA,IAIA,QAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA,CAAA,eAAA;AAAA,EAEA,OAAA;AACA,WAAA;AAAA;AAAA;AAAA;AAAA,MAIA,MAAA,CAAA;AAAA;AAAA;AAAA;AAAA,MAIA,WAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,UAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,kBAAA;AACA,aAAA,KAAA,KAAA,SAAA;AAAA,IACA;AAAA,IAEA,kBAAA;AACA,aAAA,KAAA,KAAA,UAAA,CAAAC,MAAAA,EAAA,OAAA,KAAA,SAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA;AAAA,IACA,OAAAC,GAAA;AAEA,MAAAA,MAAA,KAAA,aACA,KAAA,aAAA;AAAA,IAEA;AAAA,EACA;AAAA,EAEA,SAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOA,UAAAC,GAAA;AACA,WAAA,YAAAA,GAIA,KAAA,MAAA,iBAAA,KAAA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,mBAAA;AACA,MAAA,KAAA,kBAAA,KACA,KAAA,UAAA,KAAA,KAAA,KAAA,kBAAA,CAAA,EAAA,EAAA,GAEA,KAAA,eAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,eAAA;AACA,MAAA,KAAA,kBAAA,KAAA,KAAA,SAAA,KACA,KAAA,UAAA,KAAA,KAAA,KAAA,kBAAA,CAAA,EAAA,EAAA,GAEA,KAAA,eAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,gBAAA;AACA,WAAA,UAAA,KAAA,KAAA,CAAA,EAAA,EAAA,GACA,KAAA,eAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,eAAA;AACA,WAAA,UAAA,KAAA,KAAA,KAAA,KAAA,SAAA,CAAA,EAAA,EAAA,GACA,KAAA,eAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,iBAAA;AACA,WAAA,IAAA,cAAA,eAAA,KAAA,SAAA,EAAA,EAAA,MAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,wBAAA;AACA,WAAA,IAAA,cAAA,UAAA,KAAA,SAAA,EAAA,MAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,eAAA;AACA,WAAA,YAAA,KAAA,UACA,KAAA,KAAA,KAAA,CAAAF,MAAAA,EAAA,OAAA,KAAA,MAAA,IACA,KAAA,SACA,KAAA,KAAA,SAAA,IACA,KAAA,KAAA,CAAA,EAAA,KACA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOA,YAAAA,GAAA;AACA,WAAA,KAAA,KAAAA,CAAA,GACA,KAAA,KAAA,KAAA,CAAAG,GAAAC,MACAD,EAAA,UAAAC,EAAA,QACA,GAAA,KAAA,mBAAAD,EAAA,MAAAC,EAAA,IAAA,IAEAD,EAAA,QAAAC,EAAA,KACA,GACA,KAAA,aAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOA,cAAAF,GAAA;AACA,YAAAG,IAAA,KAAA,KAAA,UAAA,CAAAL,MAAAA,EAAA,OAAAE,CAAA;AACA,MAAAG,MAAA,MACA,KAAA,KAAA,OAAAA,GAAA,CAAA,GAEA,KAAA,cAAAH,KACA,KAAA,aAAA;AAAA,IAEA;AAAA,EACA;AACA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;qBC/OAI,IAAA;AAAA,EACA,MAAA;AAAA,EACA,OAAA,CAAA,OAAA;AAAA,EACA,OAAA;AAAA,IACA,OAAA;AAAA,MACA,MAAA;AAAA,IACA;AAAA,IACA,WAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA,IACA,MAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA,EACA;AACA;;;;;;;;;;;;;;;;qBChBAC,IAAA;AAAA,EACA,MAAA;AAAA,EACA,OAAA,CAAA,OAAA;AAAA,EACA,OAAA;AAAA,IACA,OAAA;AAAA,MACA,MAAA;AAAA,IACA;AAAA,IACA,WAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA,IACA,MAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA,EACA;AACA;;;;;;;;;;;;;;;;;AC8cA,MAAAC,IAAA;AAAA,EACA,MAAA;AAAA,EAEA,YAAA;AAAA,IACA,WAAAC;AAAA,IACA,kBAAAC;AAAA,IACA,YAAAC,EAAA;AAAA,IACA,UAAAC;AAAA,IACA,eAAAC;AAAA,IACA,gBAAAC;AAAA,IACA,OAAAC,EAAA;AAAA,IACA,MAAAC;AAAA,IACA,aAAAC;AAAA,EACA;AAAA,EAEA,YAAA;AAAA,IACA,OAAAC,EAAA;AAAA,IACA,SAAAC,EAAA;AAAA,IACA,cAAAC,EAAA;AAAA,IACA,SAAAC,EAAA;AAAA,EACA;AAAA,EAEA,OAAA;AAAA,IACA,QAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA,IACA,MAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,MACA,UAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,cAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA,IACA,iBAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA,IACA,SAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAIA,UAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,YAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,SAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAIA,aAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAIA,SAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,SAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOA,OAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,WAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAIA,aAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAKA,OAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA;AACA,WAAA;AAAA,MACA,sBAAAC,EAAA,EAAA,aAAA;AAAA,MACA,iBAAAA,EAAA,EAAA,eAAA;AAAA,MACA,oBAAAA,EAAA,EAAA,UAAA;AAAA,MACA,WAAA,KAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,UAAA;AAAA,IACA,UAAA;AACA,aAAA,KAAA,cAAA;AAAA,IACA;AAAA,IACA,YAAA;AACA,aAAA,KAAA,OAAA,UAAA,KAAA;AAAA,IACA;AAAA,IACA,yBAAA;AACA,aAAA,KAAA,WAAA,cAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA;AAAA,IACA,UAAA;AACA,WAAA,YAAA,KAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,gBAAA;AAEA,SAAA,MAAA,QAAA;AAAA,EACA;AAAA,EAEA,SAAA;AAAA,IACA,cAAAC,GAAA;AAMA,WAAA,MAAA,WAAAA,CAAA;AAAA,IACA;AAAA,IACA,aAAAA,GAAA;AAMA,WAAA,MAAA,UAAAA,CAAA;AAAA,IACA;AAAA,IACA,cAAAA,GAAA;AAMA,WAAA,MAAA,WAAAA,CAAA;AAAA,IACA;AAAA,IACA,aAAAA,GAAA;AAMA,WAAA,MAAA,UAAAA,CAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOA,aAAAC,GAAA;AAMA,WAAA,MAAA,SAAAA,CAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOA,cAAAA,GAAA;AAMA,WAAA,MAAA,gBAAAA,CAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,gBAAA;AACA,WAAA,YAAA,CAAA,KAAA,WAMA,KAAA,MAAA,kBAAA,KAAA,SAAA;AAAA,IACA;AAAA,IAEA,WAAA;AAMA,WAAA,MAAA,uBAAA,EAAA,GAEA,KAAA,gBACA,KAAA;AAAA,QACA,MAAA,KAAA,MAAA,UAAA,MAAA;AAAA,MACA;AAAA,IAEA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOA,YAAAC,GAAA;AAMA,WAAA,MAAA,eAAAA,EAAA,OAAA,KAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAQA,aAAAA,GAAA;AAEA,WAAA,MAAA,uBAAA,EAAA,GAMA,KAAA,MAAA,eAAAA,CAAA;AAAA,IACA;AAAA,IACA,mBAAA;AAEA,WAAA,MAAA,uBAAA,EAAA,GAMA,KAAA,MAAA,iBAAA;AAAA,IACA;AAAA,IACA,eAAAC,GAAA;AAMA,WAAA,MAAA,iBAAAA,CAAA;AAAA,IACA;AAAA,EACA;AACA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","x_google_ignoreList":[1,2]}
1	+ {"version":3,"file":"NcAppSidebar.cjs","sources":["../../src/components/NcAppSidebar/NcAppSidebarTabs.vue","../../node_modules/vue-material-design-icons/Star.vue","../../node_modules/vue-material-design-icons/StarOutline.vue","../../src/components/NcAppSidebar/NcAppSidebar.vue"],"sourcesContent":["<!--\n - @copyright Copyright (c) 2019 John Molakvoæ <skjnldsv@protonmail.com>\n - @copyright Copyright (c) 2020 Simon Belbeoch <simon.belbeoch@gmail.com>\n -\n - @author John Molakvoæ <skjnldsv@protonmail.com>\n - @author Ferdinand Thiessen <opensource@fthiessen.de>\n -\n - @license AGPL-3.0-or-later\n -\n - This program is free software: you can redistribute it and/or modify\n - it under the terms of the GNU Affero General Public License as\n - published by the Free Software Foundation, either version 3 of the\n - License, or (at your option) any later version.\n -\n - This program is distributed in the hope that it will be useful,\n - but WITHOUT ANY WARRANTY; without even the implied warranty of\n - MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the\n - GNU Affero General Public License for more details.\n -\n - You should have received a copy of the GNU Affero General Public License\n - along with this program. If not, see <http://www.gnu.org/licenses/>.\n -\n -->\n\n<!-- Follows the tab aria guidelines\n\thttps://www.w3.org/TR/wai-aria-practices/examples/tabs/tabs-1/tabs.html -->\n<template>\n\t<div class=\"app-sidebar-tabs\">\n\t\t<!-- tabs navigation -->\n\t\t<!-- 33 and 34 code is for page up and page down -->\n\t\t<div v-if=\"hasMultipleTabs\"\n\t\t\trole=\"tablist\"\n\t\t\tclass=\"app-sidebar-tabs__nav\"\n\t\t\t@keydown.left.exact.prevent.stop=\"focusPreviousTab\"\n\t\t\t@keydown.right.exact.prevent.stop=\"focusNextTab\"\n\t\t\t@keydown.tab.exact.prevent.stop=\"focusActiveTabContent\"\n\t\t\t@keydown.home.exact.prevent.stop=\"focusFirstTab\"\n\t\t\t@keydown.end.exact.prevent.stop=\"focusLastTab\"\n\t\t\t@keydown.page-up.exact.prevent.stop=\"focusFirstTab\"\n\t\t\t@keydown.page-down.exact.prevent.stop=\"focusLastTab\">\n\t\t\t<NcCheckboxRadioSwitch v-for=\"tab in tabs\"\n\t\t\t\t:key=\"tab.id\"\n\t\t\t\t:aria-controls=\"`tab-${tab.id}`\"\n\t\t\t\t:aria-selected=\"String(activeTab === tab.id)\"\n\t\t\t\t:button-variant=\"true\"\n\t\t\t\t:checked=\"activeTab === tab.id\"\n\t\t\t\t:wrapper-id=\"`tab-button-${tab.id}`\"\n\t\t\t\t:tabindex=\"activeTab === tab.id ? 0 : -1\"\n\t\t\t\tbutton-variant-grouped=\"horizontal\"\n\t\t\t\tclass=\"app-sidebar-tabs__tab\"\n\t\t\t\t:class=\"{ active: tab.id === activeTab }\"\n\t\t\t\trole=\"tab\"\n\t\t\t\ttype=\"button\"\n\t\t\t\t@update:checked=\"setActive(tab.id)\">\n\t\t\t\t<span class=\"app-sidebar-tabs__tab-caption\">\n\t\t\t\t\t{{ tab.name }}\n\t\t\t\t</span>\n\t\t\t\t<template #icon>\n\t\t\t\t\t<NcVNodes :vnodes=\"tab.renderIcon()\">\n\t\t\t\t\t\t<span class=\"app-sidebar-tabs__tab-icon\" :class=\"tab.icon\" />\n\t\t\t\t\t</NcVNodes>\n\t\t\t\t</template>\n\t\t\t</NcCheckboxRadioSwitch>\n\t\t</div>\n\n\t\t<!-- tabs content -->\n\t\t<div :class=\"{'app-sidebar-tabs__content--multiple': hasMultipleTabs}\"\n\t\t\tclass=\"app-sidebar-tabs__content\">\n\t\t\t<!-- @slot Tabs content - NcAppSidebarTab components or any content if there is no tabs -->\n\t\t\t<slot />\n\t\t</div>\n\t</div>\n</template>\n\n<script>\nimport NcVNodes from '../NcVNodes/index.js'\nimport NcCheckboxRadioSwitch from '../NcCheckboxRadioSwitch/index.js'\n\nexport default {\n\tname: 'NcAppSidebarTabs',\n\n\tcomponents: {\n\t\tNcCheckboxRadioSwitch,\n\t\tNcVNodes,\n\t},\n\n\tprovide() {\n\t\treturn {\n\t\t\tregisterTab: this.registerTab,\n\t\t\tunregisterTab: this.unregisterTab,\n\t\t\t// Getter as an alternative to Vue 2.7 computed(() => this.activeTab)\n\t\t\tgetActiveTab: () => this.activeTab,\n\t\t\t// Used to check whether the tab header is shown so the tabs can reference the tab header for `aria-labelledby` or not\n\t\t\tisTablistShown: () => this.hasMultipleTabs,\n\t\t}\n\t},\n\n\tprops: {\n\t\t/*\n\t\t Id of the tab to activate\n\t\t /\n\t\tactive: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\t},\n\n\temits: ['update:active'],\n\n\tdata() {\n\t\treturn {\n\t\t\t/\n\t\t\t Tab descriptions from the passed NcSidebarTab components' props to build the tab navbar from.\n\t\t\t /\n\t\t\ttabs: [],\n\t\t\t/\n\t\t\t Local active (open) tab's ID. It allows to use component without active.sync\n\t\t\t /\n\t\t\tactiveTab: '',\n\t\t}\n\t},\n\n\tcomputed: {\n\t\t/\n\t\t Has multiple tabs. If only one tab - its content is shown without navigation\n\t\t \n\t\t @return {boolean}\n\t\t /\n\t\thasMultipleTabs() {\n\t\t\treturn this.tabs.length > 1\n\t\t},\n\n\t\tcurrentTabIndex() {\n\t\t\treturn this.tabs.findIndex((tab) => tab.id === this.activeTab)\n\t\t},\n\t},\n\n\twatch: {\n\t\tactive(active) {\n\t\t\t// Prevent running it twice\n\t\t\tif (active !== this.activeTab) {\n\t\t\t\tthis.updateActive()\n\t\t\t}\n\t\t},\n\t},\n\n\tmethods: {\n\n\t\t/\n\t\t Set the current active tab\n\t\t \n\t\t @param {string} id the id of the tab\n\t\t /\n\t\tsetActive(id) {\n\t\t\tthis.activeTab = id\n\t\t\t/\n\t\t\t @property {string} active - active tab's id\n\t\t\t /\n\t\t\tthis.$emit('update:active', this.activeTab)\n\t\t},\n\n\t\t/\n\t\t Focus the previous tab\n\t\t * and emit to the parent component\n\t\t /\n\t\tfocusPreviousTab() {\n\t\t\tif (this.currentTabIndex > 0) {\n\t\t\t\tthis.setActive(this.tabs[this.currentTabIndex - 1].id)\n\t\t\t}\n\t\t\tthis.focusActiveTab()\n\t\t},\n\n\t\t/\n\t\t Focus the next tab\n\t\t * and emit to the parent component\n\t\t /\n\t\tfocusNextTab() {\n\t\t\tif (this.currentTabIndex < this.tabs.length - 1) {\n\t\t\t\tthis.setActive(this.tabs[this.currentTabIndex + 1].id)\n\t\t\t}\n\t\t\tthis.focusActiveTab()\n\t\t},\n\n\t\t/\n\t\t Focus the first tab\n\t\t * and emit to the parent component\n\t\t /\n\t\tfocusFirstTab() {\n\t\t\tthis.setActive(this.tabs[0].id)\n\t\t\tthis.focusActiveTab()\n\t\t},\n\n\t\t/\n\t\t Focus the last tab\n\t\t * and emit to the parent component\n\t\t /\n\t\tfocusLastTab() {\n\t\t\tthis.setActive(this.tabs[this.tabs.length - 1].id)\n\t\t\tthis.focusActiveTab()\n\t\t},\n\n\t\t/\n\t\t Focus the current active tab\n\t\t /\n\t\tfocusActiveTab() {\n\t\t\tthis.$el.querySelector(`#tab-button-${this.activeTab}`).focus()\n\t\t},\n\n\t\t/\n\t\t Focus the content on tab\n\t\t * see aria accessibility guidelines\n\t\t /\n\t\tfocusActiveTabContent() {\n\t\t\tthis.$el.querySelector('#tab-' + this.activeTab).focus()\n\t\t},\n\n\t\t/\n\t\t Update the current active tab\n\t\t /\n\t\tupdateActive() {\n\t\t\tthis.activeTab = this.active\n\t\t\t&& this.tabs.some(tab => tab.id === this.active)\n\t\t\t\t? this.active\n\t\t\t\t: this.tabs.length > 0\n\t\t\t\t\t? this.tabs[0].id\n\t\t\t\t\t: ''\n\t\t},\n\n\t\t/\n\t\t Register child tab in the tabs\n\t\t \n\t\t @param {object} tab child tab passed to slot\n\t\t /\n\t\tregisterTab(tab) {\n\t\t\tthis.tabs.push(tab)\n\t\t\tthis.tabs.sort((a, b) => {\n\t\t\t\tif (a.order === b.order) {\n\t\t\t\t\treturn OC.Util.naturalSortCompare(a.name, b.name)\n\t\t\t\t}\n\t\t\t\treturn a.order - b.order\n\t\t\t})\n\t\t\tthis.updateActive()\n\t\t},\n\n\t\t/\n\t\t Unregister child tab from the tabs\n\t\t \n\t\t @param {string} id tab's id\n\t\t /\n\t\tunregisterTab(id) {\n\t\t\tconst tabIndex = this.tabs.findIndex((tab) => tab.id === id)\n\t\t\tif (tabIndex !== -1) {\n\t\t\t\tthis.tabs.splice(tabIndex, 1)\n\t\t\t}\n\t\t\tif (this.activeTab === id) {\n\t\t\t\tthis.updateActive()\n\t\t\t}\n\t\t},\n\t},\n}\n</script>\n<style lang=\"scss\" scoped>\n.app-sidebar-tabs {\n\tdisplay: flex;\n\tflex-direction: column;\n\tmin-height: 0;\n\tflex: 1 1 100%;\n\n\t&__nav {\n\t\tdisplay: flex;\n\t\tjustify-content: stretch;\n\t\tmargin: 10px 8px 0 8px;\n\t\tborder-bottom: 1px solid var(--color-border);\n\t}\n\n\t&__tab {\n\t\tflex: 1 1;\n\t\t&.active {\n\t\t\tcolor: var(--color-primary-element);\n\t\t}\n\n\t\t&-caption {\n\t\t\tflex: 0 1 100%;\n\t\t\twidth: 100%;\n\t\t\toverflow: hidden;\n\t\t\twhite-space: nowrap;\n\t\t\ttext-overflow: ellipsis;\n\t\t\ttext-align: center;\n\t\t}\n\n\t\t&-icon {\n\t\t\tdisplay: flex;\n\t\t\talign-items: center;\n\t\t\tjustify-content: center;\n\t\t\tbackground-size: 20px;\n\t\t}\n\n\t\t// Override max-width to use all available space\n\t\t:deep(.checkbox-radio-switch__content) {\n\t\t\tmax-width: unset;\n\t\t}\n\t}\n\n\t&__content {\n\t\tposition: relative;\n\t\t// take full available height\n\t\tmin-height: 0;\n\t\theight: 100%;\n\t\t// force the use of the tab component if more than one tab\n\t\t// you can just put raw content if you don't use tabs\n\t\t&--multiple > :not(section) {\n\t\t\tdisplay: none;\n\t\t}\n\t}\n}\n\n// Override checkbox-radio-switch styles so that it looks like tabs\n:deep(.checkbox-radio-switch--button-variant) {\n\tborder: unset !important;\n\tborder-radius: 0 !important;\n\t.checkbox-content {\n\t\tpadding: var(--default-grid-baseline);\n\t\tborder-radius: var(--default-grid-baseline) var(--default-grid-baseline) 0 0 !important;\n\t\tmargin: 0 !important;\n\t\tborder-bottom: var(--default-grid-baseline) solid transparent !important;\n\t\t.checkbox-content__icon--checked > {\n\t\t\tcolor: var(--color-main-text) !important;\n\t\t}\n\t}\n\t&.checkbox-radio-switch--checked .checkbox-radio-switch__content{\n\t\tbackground: transparent !important;\n\t\tcolor: var(--color-main-text) !important;\n\t\tborder-bottom: var(--default-grid-baseline) solid var(--color-primary-element) !important;\n\t}\n}\n</style>\n","<template>\n <span v-bind=\"$attrs\"\n :aria-hidden=\"!title\"\n :aria-label=\"title\"\n class=\"material-design-icon star-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,17.27L18.18,21L16.54,13.97L22,9.24L14.81,8.62L12,2L9.19,8.62L2,9.24L7.45,13.97L5.82,21L12,17.27Z\">\n <title v-if=\"title\">{{ title }}</title>\n </path>\n </svg>\n </span>\n</template>\n\n<script>\nexport default {\n name: \"StarIcon\",\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\"\n :aria-label=\"title\"\n class=\"material-design-icon star-outline-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.39L8.24,17.66L9.23,13.38L5.91,10.5L10.29,10.13L12,6.09L13.71,10.13L18.09,10.5L14.77,13.38L15.76,17.66M22,9.24L14.81,8.63L12,2L9.19,8.63L2,9.24L7.45,13.97L5.82,21L12,17.27L18.18,21L16.54,13.97L22,9.24Z\">\n <title v-if=\"title\">{{ title }}</title>\n </path>\n </svg>\n </span>\n</template>\n\n<script>\nexport default {\n name: \"StarOutlineIcon\",\n emits: ['click'],\n props: {\n title: {\n type: String,\n },\n fillColor: {\n type: String,\n default: \"currentColor\"\n },\n size: {\n type: Number,\n default: 24\n }\n }\n}\n</script>","<!--\n - @copyright Copyright (c) 2019 John Molakvoæ <skjnldsv@protonmail.com>\n -\n - @author John Molakvoæ <skjnldsv@protonmail.com>\n -\n - @license GNU AGPL version 3 or any later version\n -\n - This program is free software: you can redistribute it and/or modify\n - it under the terms of the GNU Affero General Public License as\n - published by the Free Software Foundation, either version 3 of the\n - License, or (at your option) any later version.\n -\n - This program is distributed in the hope that it will be useful,\n - but WITHOUT ANY WARRANTY; without even the implied warranty of\n - MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the\n - GNU Affero General Public License for more details.\n -\n - You should have received a copy of the GNU Affero General Public License\n - along with this program. If not, see <http://www.gnu.org/licenses/>.\n -\n -->\n\n<docs>\n### General description\n\nThis component provides a way to include the standardised sidebar.\nThe standard properties like name, subname, starred, etc. allow to automatically\ninclude a standard-header like it's used by the files app.\n\n### Standard usage\n\n```vue\n<template>\n\t<NcAppSidebar\n\t\t:starred=\"starred\"\n\t\tname=\"cat-picture.jpg\"\n\t\tsubname=\"last edited 3 weeks ago\">\n\t\t<NcAppSidebarTab name=\"Search\" id=\"search-tab\">\n\t\t\t<template #icon>\n\t\t\t\t<Magnify :size=\"20\" />\n\t\t\t</template>\n\t\t\tSearch tab content\n\t\t</NcAppSidebarTab>\n\t\t<NcAppSidebarTab name=\"Settings\" id=\"settings-tab\">\n\t\t\t<template #icon>\n\t\t\t\t<Cog :size=\"20\" />\n\t\t\t</template>\n\t\t\tSettings tab content\n\t\t</NcAppSidebarTab>\n\t\t<NcAppSidebarTab name=\"Sharing\" id=\"share-tab\">\n\t\t\t<template #icon>\n\t\t\t\t<ShareVariant :size=\"20\" />\n\t\t\t</template>\n\t\t\tSharing tab content\n\t\t</NcAppSidebarTab>\n\t</NcAppSidebar>\n</template>\n<script>\n\timport Magnify from 'vue-material-design-icons/Magnify'\n\timport Cog from 'vue-material-design-icons/Cog'\n\timport ShareVariant from 'vue-material-design-icons/ShareVariant'\n\n\texport default {\n\t\tcomponents: {\n\t\t\tMagnify,\n\t\t\tCog,\n\t\t\tShareVariant,\n\t\t},\n\t\tdata() {\n\t\t\treturn {\n\t\t\t\tstarred: false,\n\t\t\t}\n\t\t},\n\t}\n</script>\n```\n\n### One tab\n\nSingle tab is rendered without navigation.\n\n```vue\n<template>\n\t<div>\n\t\t<NcAppSidebar\n\t\t\tname=\"cat-picture.jpg\"\n\t\t\tsubname=\"last edited 3 weeks ago\">\n\t\t\t<NcAppSidebarTab name=\"Settings\" id=\"settings-tab\">\n\t\t\t\t<template #icon>\n\t\t\t\t\t<Cog :size=\"20\" />\n\t\t\t\t</template>\n\t\t\t\tSingle tab content\n\t\t\t</NcAppSidebarTab>\n\t\t</NcAppSidebar>\n\t</div>\n</template>\n<script>\nimport Cog from 'vue-material-design-icons/Cog'\n\nexport default {\n\tcomponents: {\n\t\tCog,\n\t},\n}\n</script>\n```\n\n### Dynamic tabs\n\n```vue\n<template>\n\t<div>\n\t\t<NcCheckboxRadioSwitch :checked.sync=\"showTabs[0]\">Show search tab</NcCheckboxRadioSwitch>\n\t\t<NcCheckboxRadioSwitch :checked.sync=\"showTabs[1]\">Show settings tab</NcCheckboxRadioSwitch>\n\t\t<NcCheckboxRadioSwitch :checked.sync=\"showTabs[2]\">Show sharing tab</NcCheckboxRadioSwitch>\n\t\t<NcAppSidebar\n\t\t\tname=\"cat-picture.jpg\"\n\t\t\tsubname=\"last edited 3 weeks ago\">\n\t\t\t<NcAppSidebarTab v-if=\"showTabs[0]\" name=\"Search\" id=\"search-tab\">\n\t\t\t\t<template #icon>\n\t\t\t\t\t<Magnify :size=\"20\" />\n\t\t\t\t</template>\n\t\t\t\tSearch tab content\n\t\t\t</NcAppSidebarTab>\n\t\t\t<NcAppSidebarTab v-if=\"showTabs[1]\" name=\"Settings\" id=\"settings-tab\">\n\t\t\t\t<template #icon>\n\t\t\t\t\t<Cog :size=\"20\" />\n\t\t\t\t</template>\n\t\t\t\tSettings\n\t\t\t</NcAppSidebarTab>\n\t\t\t<NcAppSidebarTab v-if=\"showTabs[2]\" name=\"Sharing\" id=\"share-tab\">\n\t\t\t\t<template #icon>\n\t\t\t\t\t<ShareVariant :size=\"20\" />\n\t\t\t\t</template>\n\t\t\t\tSharing tab content\n\t\t\t</NcAppSidebarTab>\n\t\t</NcAppSidebar>\n\t</div>\n</template>\n<script>\nimport Magnify from 'vue-material-design-icons/Magnify'\nimport Cog from 'vue-material-design-icons/Cog'\nimport ShareVariant from 'vue-material-design-icons/ShareVariant'\n\nexport default {\n\tcomponents: {\n\t\tMagnify,\n\t\tCog,\n\t\tShareVariant,\n\t},\n\tdata() {\n\t\treturn {\n\t\t\tshowTabs: [true, true, false],\n\t\t}\n\t},\n}\n</script>\n```\n\n### Custom order\n\n```vue\n<template>\n\t<NcAppSidebar\n\t\tname=\"cat-picture.jpg\"\n\t\tsubname=\"last edited 3 weeks ago\">\n\t\t<NcAppSidebarTab name=\"Search\" id=\"search-tab\" :order=\"3\">\n\t\t\t<template #icon>\n\t\t\t\t<Magnify :size=\"20\" />\n\t\t\t</template>\n\t\t\tSearch tab content\n\t\t</NcAppSidebarTab>\n\t\t<NcAppSidebarTab name=\"Settings\" id=\"settings-tab\" :order=\"2\">\n\t\t\t<template #icon>\n\t\t\t\t<Cog :size=\"20\" />\n\t\t\t</template>\n\t\t\tSettings tab content\n\t\t</NcAppSidebarTab>\n\t\t<NcAppSidebarTab name=\"Sharing\" id=\"share-tab\" :order=\"1\">\n\t\t\t<template #icon>\n\t\t\t\t<ShareVariant :size=\"20\" />\n\t\t\t</template>\n\t\t\tSharing tab content\n\t\t</NcAppSidebarTab>\n\t</NcAppSidebar>\n</template>\n<script>\nimport Magnify from 'vue-material-design-icons/Magnify'\nimport Cog from 'vue-material-design-icons/Cog'\nimport ShareVariant from 'vue-material-design-icons/ShareVariant'\n\nexport default {\n\tcomponents: {\n\t\tMagnify,\n\t\tCog,\n\t\tShareVariant,\n\t},\n}\n</script>\n```\n\n### Activating tab programmatically\n\n```vue\n<template>\n\t<div>\n\t\t<NcSelect v-model=\"active\" :options=\"['search-tab', 'settings-tab', 'share-tab']\" />\n\t\t<NcAppSidebar\n\t\t\tname=\"cat-picture.jpg\"\n\t\t\tsubname=\"last edited 3 weeks ago\"\n\t\t\t:active.sync=\"active\">\n\t\t\t<NcAppSidebarTab name=\"Search\" id=\"search-tab\">\n\t\t\t\t<template #icon>\n\t\t\t\t\t<Magnify :size=\"20\" />\n\t\t\t\t</template>\n\t\t\t\tSearch tab content\n\t\t\t</NcAppSidebarTab>\n\t\t\t<NcAppSidebarTab name=\"Settings\" id=\"settings-tab\">\n\t\t\t\t<template #icon>\n\t\t\t\t\t<Cog :size=\"20\" />\n\t\t\t\t</template>\n\t\t\t\tSettings\n\t\t\t</NcAppSidebarTab>\n\t\t\t<NcAppSidebarTab name=\"Sharing\" id=\"share-tab\">\n\t\t\t\t<template #icon>\n\t\t\t\t\t<ShareVariant :size=\"20\" />\n\t\t\t\t</template>\n\t\t\t\tSharing tab content\n\t\t\t</NcAppSidebarTab>\n\t\t</NcAppSidebar>\n\t</div>\n</template>\n<script>\nimport Magnify from 'vue-material-design-icons/Magnify'\nimport Cog from 'vue-material-design-icons/Cog'\nimport ShareVariant from 'vue-material-design-icons/ShareVariant'\n\nexport default {\n\tcomponents: {\n\t\tMagnify,\n\t\tCog,\n\t\tShareVariant,\n\t},\n\tdata() {\n\t\treturn {\n\t\t\tactive: 'search-tab',\n\t\t}\n\t},\n}\n</script>\n```\n\n### Editable name\n\n```vue\n<template>\n\t<NcAppSidebar\n\t\t:name.sync=\"name\"\n\t\t:name-editable=\"true\"\n\t\tname-placeholder=\"Filename\"\n\t\tsubname=\"last edited 3 weeks ago\">\n\t\t<!-- Insert your slots and tabs here -->\n\t</NcAppSidebar>\n</template>\n<script>\n\texport default {\n\t\tdata() {\n\t\t\treturn {\n\t\t\t\tname: 'cat-picture.jpg',\n\t\t\t}\n\t\t},\n\t}\n</script>\n```\n\n### Editable name after click with custom tertiary action\n\n```vue\n<template>\n\t<NcAppSidebar\n\t\t:name=\"name\"\n\t\t:name-editable.sync=\"nameEditable\"\n\t\t:name-placeholder=\"namePlaceholder\"\n\t\t:subname=\"subname\"\n\t\t@update:name=\"nameUpdate\">\n\t\t<template #tertiary-actions>\n\t\t\t<form>\n\t\t\t\t<input type=\"checkbox\" @click=\"toggledCheckbox\"/>\n\t\t\t</form>\n\t\t</template>\n\t</NcAppSidebar>\n</template>\n<script>\n\texport default {\n\t\tdata() {\n\t\t\treturn {\n\t\t\t\tname: 'cat-picture.jpg',\n\t\t\t\tnamePlaceholder: 'Filename',\n\t\t\t\tsubname: 'last edited 3 weeks ago',\n\t\t\t\tnameEditable: false\n\t\t\t}\n\t\t},\n\t\tmethods: {\n\t\t\tnameUpdate(e) {\n\t\t\t\tthis.name = e\n\t\t\t},\n\t\t\ttoggledCheckbox() {\n\t\t\t\talert('toggle')\n\t\t\t}\n\t\t}\n\t}\n</script>\n```\n\n### Empty sidebar for e.g. empty content component.\n\n```vue\n\t<template>\n\t\t<NcAppSidebar\n\t\t\tname=\"cat-picture.jpg\"\n\t\t\t:empty=\"true\">\n\t\t\t<NcEmptyContent name=\"Content not found.\">\n\t\t\t\t<template #icon>\n\t\t\t\t\t<Magnify :size=\"20\" />\n\t\t\t\t</template>\n\t\t\t</NcEmptyContent>\n\t\t</NcAppSidebar>\n\t</template>\n\t<script>\n\timport Magnify from 'vue-material-design-icons/Magnify'\n\n\texport default {\n\t\tcomponents: {\n\t\t\tMagnify,\n\t\t},\n\t}\n\t</script>\n```\n</docs>\n\n<template>\n\t<transition appear\n\t\tname=\"slide-right\"\n\t\t@before-enter=\"onBeforeEnter\"\n\t\t@after-enter=\"onAfterEnter\"\n\t\t@before-leave=\"onBeforeLeave\"\n\t\t@after-leave=\"onAfterLeave\">\n\t\t<aside id=\"app-sidebar-vue\" class=\"app-sidebar\">\n\t\t\t<header :class=\"{\n\t\t\t\t\t'app-sidebar-header--with-figure': hasFigure,\n\t\t\t\t\t'app-sidebar-header--compact': compact,\n\t\t\t\t}\"\n\t\t\t\tclass=\"app-sidebar-header\">\n\t\t\t\t<!-- container for figure and description, allows easy switching to compact mode -->\n\t\t\t\t<div class=\"app-sidebar-header__info\">\n\t\t\t\t\t<!-- sidebar header illustration/figure -->\n\t\t\t\t\t<div v-if=\"hasFigure && !empty\"\n\t\t\t\t\t\t:class=\"{\n\t\t\t\t\t\t\t'app-sidebar-header__figure--with-action': hasFigureClickListener\n\t\t\t\t\t\t}\"\n\t\t\t\t\t\tclass=\"app-sidebar-header__figure\"\n\t\t\t\t\t\t:style=\"{\n\t\t\t\t\t\t\tbackgroundImage: `url(${background})`\n\t\t\t\t\t\t}\"\n\t\t\t\t\t\ttabindex=\"0\"\n\t\t\t\t\t\t@click=\"onFigureClick\"\n\t\t\t\t\t\t@keydown.enter=\"onFigureClick\">\n\t\t\t\t\t\t<slot class=\"app-sidebar-header__background\" name=\"header\" />\n\t\t\t\t\t</div>\n\n\t\t\t\t\t<!-- sidebar details -->\n\t\t\t\t\t<div v-if=\"!empty\"\n\t\t\t\t\t\t:class=\"{\n\t\t\t\t\t\t\t'app-sidebar-header__desc--with-tertiary-action': canStar \|\| $slots['tertiary-actions'],\n\t\t\t\t\t\t\t'app-sidebar-header__desc--editable': nameEditable && !subname,\n\t\t\t\t\t\t\t'app-sidebar-header__desc--with-subname--editable': nameEditable && subname,\n\t\t\t\t\t\t\t'app-sidebar-header__desc--without-actions': !$slots['secondary-actions'],\n\t\t\t\t\t\t}\"\n\t\t\t\t\t\tclass=\"app-sidebar-header__desc\">\n\t\t\t\t\t\t<!-- favourite icon -->\n\t\t\t\t\t\t<div v-if=\"canStar \|\| $slots['tertiary-actions']\" class=\"app-sidebar-header__tertiary-actions\">\n\t\t\t\t\t\t\t<slot name=\"tertiary-actions\">\n\t\t\t\t\t\t\t\t<NcButton v-if=\"canStar\"\n\t\t\t\t\t\t\t\t\t:aria-label=\"favoriteTranslated\"\n\t\t\t\t\t\t\t\t\t:pressed=\"isStarred\"\n\t\t\t\t\t\t\t\t\tclass=\"app-sidebar-header__star\"\n\t\t\t\t\t\t\t\t\ttype=\"secondary\"\n\t\t\t\t\t\t\t\t\t@click.prevent=\"toggleStarred\">\n\t\t\t\t\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t\t\t\t\t<NcLoadingIcon v-if=\"starLoading\" />\n\t\t\t\t\t\t\t\t\t\t<Star v-else-if=\"isStarred\" :size=\"20\" />\n\t\t\t\t\t\t\t\t\t\t<StarOutline v-else :size=\"20\" />\n\t\t\t\t\t\t\t\t\t</template>\n\t\t\t\t\t\t\t\t</NcButton>\n\t\t\t\t\t\t\t</slot>\n\t\t\t\t\t\t</div>\n\n\t\t\t\t\t\t<!-- name -->\n\t\t\t\t\t\t<div class=\"app-sidebar-header__name-container\">\n\t\t\t\t\t\t\t<div class=\"app-sidebar-header__mainname-container\">\n\t\t\t\t\t\t\t\t<!-- main name -->\n\t\t\t\t\t\t\t\t<h2 v-show=\"!nameEditable\"\n\t\t\t\t\t\t\t\t\tv-linkify=\"{text: name, linkify: linkifyName}\"\n\t\t\t\t\t\t\t\t\t:aria-label=\"title\"\n\t\t\t\t\t\t\t\t\t:title=\"title\"\n\t\t\t\t\t\t\t\t\tclass=\"app-sidebar-header__mainname\"\n\t\t\t\t\t\t\t\t\t:tabindex=\"nameEditable ? 0 : undefined\"\n\t\t\t\t\t\t\t\t\t@click.self=\"editName\">\n\t\t\t\t\t\t\t\t\t{{ name }}\n\t\t\t\t\t\t\t\t</h2>\n\t\t\t\t\t\t\t\t<template v-if=\"nameEditable\">\n\t\t\t\t\t\t\t\t\t<form v-click-outside=\"() => onSubmitName()\"\n\t\t\t\t\t\t\t\t\t\tclass=\"app-sidebar-header__mainname-form\"\n\t\t\t\t\t\t\t\t\t\t@submit.prevent=\"onSubmitName\">\n\t\t\t\t\t\t\t\t\t\t<input ref=\"nameInput\"\n\t\t\t\t\t\t\t\t\t\t\tv-focus\n\t\t\t\t\t\t\t\t\t\t\tclass=\"app-sidebar-header__mainname-input\"\n\t\t\t\t\t\t\t\t\t\t\ttype=\"text\"\n\t\t\t\t\t\t\t\t\t\t\t:placeholder=\"namePlaceholder\"\n\t\t\t\t\t\t\t\t\t\t\t:value=\"name\"\n\t\t\t\t\t\t\t\t\t\t\t@keydown.esc.stop=\"onDismissEditing\"\n\t\t\t\t\t\t\t\t\t\t\t@input=\"onNameInput\">\n\t\t\t\t\t\t\t\t\t\t<NcButton type=\"tertiary-no-background\"\n\t\t\t\t\t\t\t\t\t\t\t:aria-label=\"changeNameTranslated\"\n\t\t\t\t\t\t\t\t\t\t\tnative-type=\"submit\">\n\t\t\t\t\t\t\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t\t\t\t\t\t\t<ArrowRight :size=\"20\" />\n\t\t\t\t\t\t\t\t\t\t\t</template>\n\t\t\t\t\t\t\t\t\t\t</NcButton>\n\t\t\t\t\t\t\t\t\t</form>\n\t\t\t\t\t\t\t\t</template>\n\t\t\t\t\t\t\t\t<!-- header main menu -->\n\t\t\t\t\t\t\t\t<NcActions v-if=\"$slots['secondary-actions']\"\n\t\t\t\t\t\t\t\t\tclass=\"app-sidebar-header__menu\"\n\t\t\t\t\t\t\t\t\t:force-menu=\"forceMenu\">\n\t\t\t\t\t\t\t\t\t<slot name=\"secondary-actions\" />\n\t\t\t\t\t\t\t\t</NcActions>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t<!-- secondary name -->\n\t\t\t\t\t\t\t<p v-if=\"subname.trim() !== ''\"\n\t\t\t\t\t\t\t\t:aria-label=\"subtitle\"\n\t\t\t\t\t\t\t\t:title=\"subtitle\"\n\t\t\t\t\t\t\t\tclass=\"app-sidebar-header__subname\">\n\t\t\t\t\t\t\t\t{{ subname }}\n\t\t\t\t\t\t\t</p>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\n\t\t\t\t<NcButton :title=\"closeTranslated\"\n\t\t\t\t\t:aria-label=\"closeTranslated\"\n\t\t\t\t\ttype=\"tertiary\"\n\t\t\t\t\tclass=\"app-sidebar__close\"\n\t\t\t\t\t@click.prevent=\"closeSidebar\">\n\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t<Close :size=\"20\" />\n\t\t\t\t\t</template>\n\t\t\t\t</NcButton>\n\n\t\t\t\t<div v-if=\"$slots['description'] && !empty\" class=\"app-sidebar-header__description\">\n\t\t\t\t\t<slot name=\"description\" />\n\t\t\t\t</div>\n\t\t\t</header>\n\n\t\t\t<NcAppSidebarTabs v-show=\"!loading\"\n\t\t\t\tref=\"tabs\"\n\t\t\t\t:active=\"active\"\n\t\t\t\t@update:active=\"onUpdateActive\">\n\t\t\t\t<slot />\n\t\t\t</NcAppSidebarTabs>\n\n\t\t\t<NcEmptyContent v-if=\"loading\">\n\t\t\t\t<template #icon>\n\t\t\t\t\t<NcLoadingIcon :size=\"64\" />\n\t\t\t\t</template>\n\t\t\t</NcEmptyContent>\n\t\t</aside>\n\t</transition>\n</template>\n\n<script>\nimport NcAppSidebarTabs from './NcAppSidebarTabs.vue'\nimport NcActions from '../NcActions/index.js'\nimport NcLoadingIcon from '../NcLoadingIcon/index.js'\nimport NcButton from '../NcButton/index.js'\nimport NcEmptyContent from '../NcEmptyContent/index.js'\nimport Focus from '../../directives/Focus/index.js'\nimport Linkify from '../../directives/Linkify/index.js'\nimport Tooltip from '../../directives/Tooltip/index.js'\nimport { t } from '../../l10n.js'\n\nimport ArrowRight from 'vue-material-design-icons/ArrowRight.vue'\nimport Close from 'vue-material-design-icons/Close.vue'\nimport Star from 'vue-material-design-icons/Star.vue'\nimport StarOutline from 'vue-material-design-icons/StarOutline.vue'\n\nimport { vOnClickOutside as ClickOutside } from '@vueuse/components'\n\nexport default {\n\tname: 'NcAppSidebar',\n\n\tcomponents: {\n\t\tNcActions,\n\t\tNcAppSidebarTabs,\n\t\tArrowRight,\n\t\tNcButton,\n\t\tNcLoadingIcon,\n\t\tNcEmptyContent,\n\t\tClose,\n\t\tStar,\n\t\tStarOutline,\n\t},\n\n\tdirectives: {\n\t\tfocus: Focus,\n\t\tlinkify: Linkify,\n\t\tClickOutside,\n\t\tTooltip,\n\t},\n\n\tprops: {\n\t\tactive: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\t\tname: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t\trequired: true,\n\t\t},\n\n\t\t/*\n\t\t Allow to edit the sidebar name.\n\t\t /\n\t\tnameEditable: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\t\tnamePlaceholder: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\t\tsubname: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\t\t/\n\t\t Title to display for the subname.\n\t\t /\n\t\tsubtitle: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\n\t\t/\n\t\t Url to the top header background image\n\t\t * Applied with css\n\t\t /\n\t\tbackground: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\n\t\t/\n\t\t Enable the favourite icon if not null\n\t\t * See fired events\n\t\t /\n\t\tstarred: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: null,\n\t\t},\n\t\t/\n\t\t Show loading spinner instead of the star icon\n\t\t /\n\t\tstarLoading: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\t\t/\n\t\t Show loading spinner instead of tabs\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 Display the sidebar in compact mode\n\t\t /\n\t\tcompact: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/\n\t\t Only display close button and default slot content.\n\t\t * Don't display other header content and primary and secondary actions.\n\t\t * Useful when showing the EmptyContent component as content.\n\t\t /\n\t\tempty: {\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\t\t/\n\t\t Linkify the name\n\t\t /\n\t\tlinkifyName: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\t\t/\n\t\t Title to display for the name.\n\t\t * Can be set to the same text in case it's too long.\n\t\t /\n\t\ttitle: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\t},\n\n\temits: [\n\t\t'close',\n\t\t'closing',\n\t\t'closed',\n\t\t'opening',\n\t\t'opened',\n\t\t'figure-click',\n\t\t'update:starred',\n\t\t'update:nameEditable',\n\t\t'update:name',\n\t\t'update:active',\n\t\t'submit-name',\n\t\t'dismiss-editing',\n\t],\n\n\tdata() {\n\t\treturn {\n\t\t\tchangeNameTranslated: t('Change name'),\n\t\t\tcloseTranslated: t('Close sidebar'),\n\t\t\tfavoriteTranslated: t('Favorite'),\n\t\t\tisStarred: this.starred,\n\t\t}\n\t},\n\n\tcomputed: {\n\t\tcanStar() {\n\t\t\treturn this.isStarred !== null\n\t\t},\n\t\thasFigure() {\n\t\t\treturn this.$slots.header \|\| this.background\n\t\t},\n\t\thasFigureClickListener() {\n\t\t\treturn this.$listeners['figure-click']\n\t\t},\n\t},\n\n\twatch: {\n\t\tstarred() {\n\t\t\tthis.isStarred = this.starred\n\t\t},\n\t},\n\n\tbeforeDestroy() {\n\t\t// Make sure that the 'closed' event is dispatched even if this element is destroyed before the 'after-leave' event is received.\n\t\tthis.$emit('closed')\n\t},\n\n\tmethods: {\n\t\tonBeforeEnter(element) {\n\t\t\t/\n\t\t\t The sidebar is opening and the transition is in progress\n\t\t\t \n\t\t\t @type {HTMLElement}\n\t\t\t /\n\t\t\tthis.$emit('opening', element)\n\t\t},\n\t\tonAfterEnter(element) {\n\t\t\t/\n\t\t\t The sidebar is opened and the transition is complete\n\t\t\t \n\t\t\t @type {HTMLElement}\n\t\t\t /\n\t\t\tthis.$emit('opened', element)\n\t\t},\n\t\tonBeforeLeave(element) {\n\t\t\t/\n\t\t\t The sidebar is closing and the transition is in progress\n\t\t\t \n\t\t\t @type {HTMLElement}\n\t\t\t /\n\t\t\tthis.$emit('closing', element)\n\t\t},\n\t\tonAfterLeave(element) {\n\t\t\t/\n\t\t\t The sidebar is closed and the transition is complete\n\t\t\t \n\t\t\t @type {HTMLElement}\n\t\t\t /\n\t\t\tthis.$emit('closed', element)\n\t\t},\n\n\t\t/\n\t\t Used to tell parent component the user asked to close the sidebar\n\t\t \n\t\t @param {Event} e close icon click event\n\t\t /\n\t\tcloseSidebar(e) {\n\t\t\t/\n\t\t\t The user clicked to closed the sidebar\n\t\t\t \n\t\t\t @type {Event}\n\t\t\t /\n\t\t\tthis.$emit('close', e)\n\t\t},\n\n\t\t/\n\t\t Emit figure click event to parent component\n\t\t \n\t\t @param {Event} e click event\n\t\t /\n\t\tonFigureClick(e) {\n\t\t\t/\n\t\t\t The figure/background header has been clicked\n\t\t\t \n\t\t\t @type {Event}\n\t\t\t /\n\t\t\tthis.$emit('figure-click', e)\n\t\t},\n\n\t\t/\n\t\t Toggle the favourite state\n\t\t * and emit to the parent component\n\t\t /\n\t\ttoggleStarred() {\n\t\t\tthis.isStarred = !this.isStarred\n\t\t\t/\n\t\t\t Emitted when the starred value changes\n\t\t\t \n\t\t\t @type {boolean}\n\t\t\t /\n\t\t\tthis.$emit('update:starred', this.isStarred)\n\t\t},\n\n\t\teditName() {\n\t\t\t/\n\t\t\t Emitted when the nameEditable value changes\n\t\t\t \n\t\t\t @type {boolean}\n\t\t\t /\n\t\t\tthis.$emit('update:nameEditable', true)\n\t\t\t// Focus the name input\n\t\t\tif (this.nameEditable) {\n\t\t\t\tthis.$nextTick(\n\t\t\t\t\t() => this.$refs.nameInput.focus(),\n\t\t\t\t)\n\t\t\t}\n\t\t},\n\n\t\t/\n\t\t Emit name change event to parent component\n\t\t \n\t\t @param {Event} event input event\n\t\t /\n\t\tonNameInput(event) {\n\t\t\t/\n\t\t\t Emitted when the name value changes\n\t\t\t \n\t\t\t @type {string\|Date}\n\t\t\t /\n\t\t\tthis.$emit('update:name', event.target.value)\n\t\t},\n\n\t\t/\n\t\t Emit when the name form edit confirm button is pressed in order\n\t\t * to change the name.\n\t\t \n\t\t @param {Event} event submit event\n\t\t /\n\t\tonSubmitName(event) {\n\t\t\t// Disable editing\n\t\t\tthis.$emit('update:nameEditable', false)\n\t\t\t/\n\t\t\t Emitted when the name edit input has been submitted\n\t\t\t \n\t\t\t @type {Event}\n\t\t\t /\n\t\t\tthis.$emit('submit-name', event)\n\t\t},\n\t\tonDismissEditing() {\n\t\t\t// Disable editing\n\t\t\tthis.$emit('update:nameEditable', false)\n\t\t\t/\n\t\t\t Emitted when the name edit has been cancelled\n\t\t\t \n\t\t\t @type {Event}\n\t\t\t /\n\t\t\tthis.$emit('dismiss-editing')\n\t\t},\n\t\tonUpdateActive(activeTab) {\n\t\t\t/\n\t\t\t The active tab changed\n\t\t\t \n\t\t\t @type {string}\n\t\t\t /\n\t\t\tthis.$emit('update:active', activeTab)\n\t\t},\n\t},\n}\n</script>\n<style lang=\"scss\" scoped>\n$sidebar-min-width: 300px;\n$sidebar-max-width: 500px;\n\n$desc-vertical-padding: 18px;\n$desc-vertical-padding-compact: 10px;\n$desc-input-padding: 7px;\n\n// name and subname\n$desc-name-height: 30px;\n$desc-subname-height: 22px;\n$desc-height: $desc-name-height + $desc-subname-height;\n\n$top-buttons-spacing: 6px;\n\n/\n\tSidebar: to be used within #content\n\tapp-content will be shrinked properly\n/\n.app-sidebar {\n\tz-index: 1500;\n\ttop: 0;\n\tright: 0;\n\tdisplay: flex;\n\toverflow-x: hidden;\n\toverflow-y: auto;\n\tflex-direction: column;\n\tflex-shrink: 0;\n\twidth: 27vw;\n\tmin-width: $sidebar-min-width;\n\tmax-width: $sidebar-max-width;\n\theight: 100%;\n\tborder-left: 1px solid var(--color-border);\n\tbackground: var(--color-main-background);\n\n\t.app-sidebar-header {\n\t\t> .app-sidebar__close {\n\t\t\tposition: absolute;\n\t\t\tz-index: 100;\n\t\t\ttop: $top-buttons-spacing;\n\t\t\tright: $top-buttons-spacing;\n\t\t\twidth: $clickable-area;\n\t\t\theight: $clickable-area;\n\t\t\topacity: $opacity_normal;\n\t\t\tborder-radius: math.div($clickable-area, 2);\n\t\t\t&:hover,\n\t\t\t&:active,\n\t\t\t&:focus {\n\t\t\t\topacity: $opacity_full;\n\t\t\t\tbackground-color: $action-background-hover;\n\t\t\t}\n\t\t}\n\n\t\t// Compact mode only affects a sidebar with a figure\n\t\t&--compact.app-sidebar-header--with-figure {\n\t\t\t.app-sidebar-header__info {\n\t\t\t\tflex-direction: row;\n\n\t\t\t\t.app-sidebar-header__figure {\n\t\t\t\t\tz-index: 2;\n\t\t\t\t\twidth: $desc-height + $desc-vertical-padding;\n\t\t\t\t\theight: $desc-height + $desc-vertical-padding;\n\t\t\t\t\tmargin: math.div($desc-vertical-padding, 2);\n\t\t\t\t\tborder-radius: 3px;\n\t\t\t\t\tflex: 0 0 auto;\n\t\t\t\t}\n\t\t\t\t.app-sidebar-header__desc {\n\t\t\t\t\tpadding-left: 0;\n\t\t\t\t\tflex: 1 1 auto;\n\t\t\t\t\tmin-width: 0;\n\t\t\t\t\tpadding-right: 2 $clickable-area + $top-buttons-spacing;\n\t\t\t\t\tpadding-top: $desc-vertical-padding-compact;\n\n\t\t\t\t\t&.app-sidebar-header__desc--without-actions {\n\t\t\t\t\t\tpadding-right: #{$clickable-area + $top-buttons-spacing};\n\t\t\t\t\t}\n\n\t\t\t\t\t.app-sidebar-header__tertiary-actions {\n\t\t\t\t\t\tz-index: 3; // above star\n\t\t\t\t\t\tposition: absolute;\n\t\t\t\t\t\ttop: math.div($desc-vertical-padding, 2);\n\t\t\t\t\t\tleft: -1 * $clickable-area;\n\t\t\t\t\t\tgap: 0; // override gap\n\t\t\t\t\t}\n\t\t\t\t\t.app-sidebar-header__menu {\n\t\t\t\t\t\ttop: $top-buttons-spacing;\n\t\t\t\t\t\tright: $clickable-area + $top-buttons-spacing; // left of the close button\n\t\t\t\t\t\tbackground-color: transparent;\n\t\t\t\t\t\tposition: absolute;\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\n\t\t// sidebar without figure\n\t\t&:not(.app-sidebar-header--with-figure) {\n\t\t\t// align the menu with the close button\n\t\t\t.app-sidebar-header__menu {\n\t\t\t\tposition: absolute;\n\t\t\t\ttop: $top-buttons-spacing;\n\t\t\t\tright: $top-buttons-spacing + $clickable-area;\n\t\t\t}\n\t\t\t// increase the padding to not overlap the menu\n\t\t\t.app-sidebar-header__desc {\n\t\t\t\tpadding-right: #{$clickable-area * 2 + $top-buttons-spacing};\n\n\t\t\t\t&.app-sidebar-header__desc--without-actions {\n\t\t\t\t\tpadding-right: #{$clickable-area + $top-buttons-spacing};\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\n\t\t// the container with the figure and the description\n\t\t.app-sidebar-header__info {\n\t\t\tdisplay: flex;\n\t\t\tflex-direction: column;\n\t\t}\n\n\t\t// header background\n\t\t&__figure {\n\t\t\twidth: 100%;\n\t\t\theight: 250px;\n\t\t\tmax-height: 250px;\n\t\t\tbackground-repeat: no-repeat;\n\t\t\tbackground-position: center;\n\t\t\tbackground-size: contain;\n\t\t\t&--with-action {\n\t\t\t\tcursor: pointer;\n\t\t\t}\n\t\t}\n\n\t\t// description\n\t\t&__desc {\n\t\t\tposition: relative;\n\t\t\tdisplay: flex;\n\t\t\tflex-direction: row;\n\t\t\tjustify-content: center;\n\t\t\talign-items: center;\n\t\t\tpadding: #{$desc-vertical-padding} #{$top-buttons-spacing} #{$desc-vertical-padding} #{math.div($desc-vertical-padding, 2)};\n\t\t\tgap: 0 4px;\n\n\t\t\t// custom overrides\n\t\t\t&--with-tertiary-action {\n\t\t\t\tpadding-left: 6px;\n\t\t\t}\n\n\t\t\t&--editable .app-sidebar-header__mainname-form,\n\t\t\t&--with-subname--editable .app-sidebar-header__mainname-form {\n\t\t\t\tmargin-top: -2px;\n\t\t\t\tmargin-bottom: -2px;\n\t\t\t}\n\n\t\t\t&--with-subname--editable .app-sidebar-header__subname {\n\t\t\t\tmargin-top: -2px;\n\t\t\t}\n\n\t\t\t.app-sidebar-header__tertiary-actions {\n\t\t\t\tdisplay: flex;\n\t\t\t\theight: $clickable-area;\n\t\t\t\twidth: $clickable-area;\n\t\t\t\tjustify-content: center;\n\t\t\t\tflex: 0 0 auto;\n\n\t\t\t\t.app-sidebar-header__star {\n\t\t\t\t\t// Override default Button component styles\n\t\t\t\t\tbox-shadow: none;\n\t\t\t\t\t&:not([aria-pressed='true']):hover {\n\t\t\t\t\t\tbox-shadow: none;\n\t\t\t\t\t\tbackground-color: var(--color-background-hover);\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\n\t\t\t// names\n\t\t\t.app-sidebar-header__name-container {\n\t\t\t\tflex: 1 1 auto;\n\t\t\t\tdisplay: flex;\n\t\t\t\tflex-direction: column;\n\t\t\t\tjustify-content: center;\n\t\t\t\tmin-width: 0;\n\n\t\t\t\t.app-sidebar-header__mainname-container {\n\t\t\t\t\tdisplay: flex;\n\t\t\t\t\talign-items: center;\n\t\t\t\t\tmin-height: $clickable-area;\n\n\t\t\t\t\t// main name\n\t\t\t\t\t.app-sidebar-header__mainname {\n\t\t\t\t\t\tpadding: 0;\n\t\t\t\t\t\tmin-height: 30px;\n\t\t\t\t\t\tfont-size: 20px;\n\t\t\t\t\t\tline-height: $desc-name-height;\n\n\t\t\t\t\t\t// Needs 'deep' as the link is generated by the linkify directive\n\t\t\t\t\t\t&:deep(.linkified) {\n\t\t\t\t\t\t\tcursor: pointer;\n\t\t\t\t\t\t\ttext-decoration: underline;\n\t\t\t\t\t\t\tmargin: 0;\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\n\t\t\t\t\t.app-sidebar-header__mainname-form {\n\t\t\t\t\t\tdisplay: flex;\n\t\t\t\t\t\tflex: 1 1 auto;\n\t\t\t\t\t\talign-items: center;\n\n\t\t\t\t\t\tinput.app-sidebar-header__mainname-input {\n\t\t\t\t\t\t\tflex: 1 1 auto;\n\t\t\t\t\t\t\tmargin: 0;\n\t\t\t\t\t\t\tpadding: $desc-input-padding;\n\t\t\t\t\t\t\tfont-size: 20px;\n\t\t\t\t\t\t\tfont-weight: bold;\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\n\t\t\t\t\t// main menu\n\t\t\t\t\t.app-sidebar-header__menu {\n\t\t\t\t\t\theight: $clickable-area;\n\t\t\t\t\t\twidth: $clickable-area;\n\t\t\t\t\t\tborder-radius: math.div($clickable-area, 2);\n\t\t\t\t\t\tbackground-color: $action-background-hover;\n\t\t\t\t\t\tmargin-left: 5px;\n\t\t\t\t\t}\n\t\t\t\t}\n\n\t\t\t\t// shared between main and subname\n\t\t\t\t.app-sidebar-header__mainname,\n\t\t\t\t.app-sidebar-header__subname {\n\t\t\t\t\toverflow: hidden;\n\t\t\t\t\twidth: 100%;\n\t\t\t\t\tmargin: 0;\n\t\t\t\t\twhite-space: nowrap;\n\t\t\t\t\ttext-overflow: ellipsis;\n\t\t\t\t}\n\n\t\t\t\t// subname\n\t\t\t\t.app-sidebar-header__subname {\n\t\t\t\t\tpadding: 0;\n\t\t\t\t\topacity: $opacity_normal;\n\t\t\t\t\tfont-size: var(--default-font-size);\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\n\t\t// sidebar description slot\n\t\t&__description {\n\t\t\tdisplay: flex;\n\t\t\talign-items: center;\n\t\t\tmargin: 0 10px;\n\t\t}\n\t}\n}\n\n// Make the sidebar full-width on small screens\n@media only screen and (max-width: 768px) {\n\t.app-sidebar {\n\t\twidth: 100vw;\n\t\tmax-width: 100vw;\n\t}\n}\n\n.slide-right-leave-active,\n.slide-right-enter-active {\n\ttransition-duration: var(--animation-quick);\n\ttransition-property: max-width, min-width;\n}\n\n.slide-right-enter-to,\n.slide-right-leave {\n\tmin-width: $sidebar-min-width;\n\tmax-width: $sidebar-max-width;\n}\n\n.slide-right-enter,\n.slide-right-leave-to {\n\tmin-width: 0 !important;\n\tmax-width: 0 !important;\n}\n</style>\n\n<style lang=\"scss\">\n// ! slots specific designs, cannot be scoped\n// if any button inside the description slot, increase visual padding\n.app-sidebar-header__description {\n\tbutton, .button,\n\tinput[type='button'],\n\tinput[type='submit'],\n\tinput[type='reset'] {\n\t\tpadding: 6px 22px;\n\t}\n}\n\n</style>\n"],"names":["_sfc_main$3","Components_NcCheckboxRadioSwitch","Components_NcVNodes","tab","active","id","a","b","tabIndex","_sfc_main$2","_sfc_main$1","_sfc_main","Components_NcActions","NcAppSidebarTabs","ArrowRight","Components_NcButton","Components_NcLoadingIcon","Components_NcEmptyContent","Close","Star","StarOutline","Directives_Focus","Directives_Linkify","components","floatingVue","l10n","element","e","event","activeTab"],"mappings":"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","x_google_ignoreList":[1,2]}

package/dist/Components/NcAppSidebar.mjs CHANGED Viewed

@@ -1,4 +1,4 @@
-import "../assets/index-7d211db9.css";
+import "../assets/index-2e31f707.css";
 import n from "./NcVNodes.mjs";
 import l from "./NcCheckboxRadioSwitch.mjs";
 import { n as s } from "../chunks/_plugin-vue2_normalizer-71e2aa87.mjs";
@@ -9,7 +9,7 @@ import d from "./NcEmptyContent.mjs";
 import { directive as p } from "../Directives/Focus.mjs";
 import { directive as f } from "../Directives/Linkify.mjs";
 import "../Directives/Tooltip.mjs";
-import { t as r } from "../chunks/l10n-f692947e.mjs";
+import { t as r } from "../chunks/l10n-f51d3415.mjs";
 import { A as m } from "../chunks/ArrowRight-74a9fcb2.mjs";
 import { C as b } from "../chunks/Close-271f72e2.mjs";
 import { vOnClickOutside as _ } from "@vueuse/components";
@@ -174,7 +174,7 @@ var g = function() {
   k,
   !1,
   null,
-  "c682268d",
+  "146b0d37",
   null,
   null
 );