@nextcloud/vue 8.31.0 → 8.32.0

package/dist/chunks/NcAppSettingsDialog-Cpjr8Tca.mjs

@@ -0,0 +1,132 @@
+import '../assets/NcAppSettingsDialog-DH3DIIwL.css';
+import Vue, { defineComponent, provide, ref, shallowRef, computed, useSlots } from "vue";
+import { useVModel } from "@vueuse/core";
+import debounce from "debounce";
+import { N as NcDialog } from "./NcDialog-BM_wTqUn.mjs";
+import NcVNodes from "../Components/NcVNodes.mjs";
+import { useIsMobile } from "../Composables/useIsMobile.mjs";
+import { r as register, a as t } from "./_l10n-DSLCwJSN.mjs";
+import { A as APP_SETTINGS_REGISTRATION_KEY } from "./useAppSettingsDialog-Dn48dw1k.mjs";
+import { n as normalizeComponent } from "./_plugin-vue2_normalizer-DU4iP6Vu.mjs";
+register();
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "NcAppSettingsDialog",
+  props: {
+    open: { type: Boolean },
+    showNavigation: { type: Boolean },
+    container: { default: "body" },
+    name: { default: "" },
+    additionalTrapElements: { default: () => [] }
+  },
+  emits: ["update:open"],
+  setup(__props, { emit }) {
+    const props = __props;
+    const open = useVModel(props, "open", emit, { passive: true });
+    provide(APP_SETTINGS_REGISTRATION_KEY, {
+      registerSection,
+      unregisterSection
+    });
+    const settingsScroller = ref();
+    const isMobile = useIsMobile();
+    const selectedSection = ref("");
+    const linkClicked = ref(false);
+    const registeredSections = shallowRef([]);
+    const hasNavigation = computed(() => !isMobile.value && props.showNavigation);
+    const hasNavigationIcons = computed(() => registeredSections.value.some(({ icon }) => !!icon));
+    const unfocusNavigationItem = debounce(() => {
+      var _a;
+      selectedSection.value = "";
+      if ((_a = document.activeElement) == null ? void 0 : _a.className.includes("navigation-list__link")) {
+        document.activeElement.blur();
+      }
+    }, 300);
+    function handleSettingsNavigationClick(item) {
+      linkClicked.value = true;
+      document.getElementById("settings-section_" + item).scrollIntoView({
+        behavior: "smooth",
+        inline: "nearest"
+      });
+      selectedSection.value = item;
+      setTimeout(() => {
+        linkClicked.value = false;
+      }, 1e3);
+    }
+    function handleCloseModal(isOpen) {
+      if (isOpen) {
+        return;
+      }
+      open.value = false;
+      settingsScroller.value.scrollTop = 0;
+    }
+    function handleScroll() {
+      if (open.value && !linkClicked.value) {
+        unfocusNavigationItem();
+      }
+    }
+    const slots = useSlots();
+    function registerSection(id, name, icon) {
+      if (registeredSections.value.some(({ id: otherId }) => id === otherId)) {
+        throw new Error("Duplicate section id found: ".concat(id, ". Settings navigation sections must have unique section ids."));
+      }
+      if (registeredSections.value.some(({ name: otherName }) => name === otherName)) {
+        Vue.util.warn("Duplicate section name found: ".concat(name, ". Settings navigation sections must have unique section names."));
+      }
+      const newSections = [
+        ...registeredSections.value,
+        { id, name, icon }
+      ];
+      registeredSections.value = newSections.sort(({ id: idA }, { id: idB }) => {
+        const indexOf = (id2) => {
+          var _a, _b;
+          return (_b = (_a = slots.default) == null ? void 0 : _a.call(slots).findIndex((vnode) => {
+            var _a2, _b2;
+            return ((_b2 = (_a2 = vnode == null ? void 0 : vnode.componentOptions) == null ? void 0 : _a2.propsData) == null ? void 0 : _b2.id) === id2;
+          })) != null ? _b : -1;
+        };
+        return indexOf(idA) - indexOf(idB);
+      });
+      if (registeredSections.value.length === 1) {
+        selectedSection.value = id;
+      }
+    }
+    function unregisterSection(id) {
+      var _a, _b;
+      registeredSections.value = registeredSections.value.filter(({ id: otherId }) => id !== otherId);
+      if (selectedSection.value === id) {
+        selectedSection.value = (_b = (_a = registeredSections.value[0]) == null ? void 0 : _a.id) != null ? _b : "";
+      }
+    }
+    return { __sfc: true, props, emit, open, settingsScroller, isMobile, selectedSection, linkClicked, registeredSections, hasNavigation, hasNavigationIcons, unfocusNavigationItem, handleSettingsNavigationClick, handleCloseModal, handleScroll, slots, registerSection, unregisterSection, NcDialog, NcVNodes, t };
+  }
+});
+var _sfc_render = function render() {
+  var _vm = this, _c = _vm._self._c, _setup = _vm._self._setupProxy;
+  return _setup.open ? _c(_setup.NcDialog, { staticClass: "app-settings", attrs: { "content-classes": "app-settings__content", "navigation-classes": "app-settings__navigation", "additional-trap-elements": _vm.additionalTrapElements, "container": _vm.container, "close-on-click-outside": "", "navigation-aria-label": _setup.t("Settings navigation"), "size": "large", "name": _vm.name }, on: { "update:open": _setup.handleCloseModal }, scopedSlots: _vm._u([_setup.hasNavigation ? { key: "navigation", fn: function({ isCollapsed }) {
+    return [!isCollapsed ? _c("ul", { staticClass: "navigation-list" }, _vm._l(_setup.registeredSections, function(section) {
+      return _c("li", { key: section.id }, [_c("a", { staticClass: "navigation-list__link", class: {
+        "navigation-list__link--active": section.id === _setup.selectedSection,
+        "navigation-list__link--icon": _setup.hasNavigationIcons
+      }, attrs: { "aria-current": "".concat(section.id === _setup.selectedSection), "href": "#settings-section_".concat(section.id), "tabindex": "0" }, on: { "click": function($event) {
+        $event.preventDefault();
+        return _setup.handleSettingsNavigationClick(section.id);
+      }, "keydown": function($event) {
+        if (!$event.type.indexOf("key") && _vm._k($event.keyCode, "enter", 13, $event.key, "Enter")) return null;
+        return _setup.handleSettingsNavigationClick(section.id);
+      } } }, [_setup.hasNavigationIcons ? _c("div", { staticClass: "navigation-list__link-icon" }, [section.icon ? _c(_setup.NcVNodes, { attrs: { "vnodes": section.icon } }) : _vm._e()], 1) : _vm._e(), _c("span", { staticClass: "navigation-list__link-text" }, [_vm._v(" " + _vm._s(section.name) + " ")])])]);
+    }), 0) : _vm._e()];
+  } } : null], null, true) }, [_c("div", { ref: "settingsScroller", on: { "scroll": _setup.handleScroll } }, [_vm._t("default")], 2)]) : _vm._e();
+};
+var _sfc_staticRenderFns = [];
+var __component__ = /* @__PURE__ */ normalizeComponent(
+  _sfc_main,
+  _sfc_render,
+  _sfc_staticRenderFns,
+  false,
+  null,
+  "84140ad4"
+);
+const NcAppSettingsDialog = __component__.exports;
+export {
+  NcAppSettingsDialog as N
+};
+//# sourceMappingURL=NcAppSettingsDialog-Cpjr8Tca.mjs.map

package/dist/chunks/NcAppSettingsDialog-Cpjr8Tca.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"NcAppSettingsDialog-Cpjr8Tca.mjs","sources":["../../src/components/NcAppSettingsDialog/NcAppSettingsDialog.vue"],"sourcesContent":["<!--\n  - SPDX-FileCopyrightText: 2020 Nextcloud GmbH and Nextcloud contributors\n  - SPDX-License-Identifier: AGPL-3.0-or-later\n-->\n\n<script setup lang=\"ts\">\nimport type { VNode } from 'vue'\n\nimport { useVModel } from '@vueuse/core'\nimport debounce from 'debounce'\nimport Vue, { computed, provide, ref, shallowRef, useSlots } from 'vue'\nimport NcDialog from '../NcDialog/NcDialog.vue'\nimport NcVNodes from '../NcVNodes/NcVNodes.vue'\nimport { useIsMobile } from '../../composables/useIsMobile/index.ts'\nimport { t } from '../../l10n.js'\nimport { APP_SETTINGS_REGISTRATION_KEY } from './useAppSettingsDialog.ts'\n\nexport interface IAppSettingsSection {\n\tid: string\n\tname: string\n\ticon?: VNode[]\n}\n\nconst props = withDefaults(defineProps<{\n\t/**\n\t * Determines the open / closed state of the modal\n\t */\n\topen: boolean\n\n\t/**\n\t * Shows the navigation on desktop if true\n\t */\n\tshowNavigation?: boolean\n\n\t/**\n\t * Selector for the popover container\n\t */\n\tcontainer?: string\n\n\t/**\n\t * Name of the settings\n\t */\n\tname?: string\n\n\t/**\n\t * Additional elements to add to the focus trap\n\t */\n\tadditionalTrapElements?: (string | HTMLElement)[]\n}>(), {\n\tcontainer: 'body',\n\tname: '',\n\tadditionalTrapElements: () => [],\n})\n\nconst emit = defineEmits<{\n\t(e: 'update:open', v: boolean): void\n}>()\n\nconst open = useVModel(props, 'open', emit, { passive: true })\n\nprovide(APP_SETTINGS_REGISTRATION_KEY, {\n\tregisterSection,\n\tunregisterSection,\n})\n\nconst settingsScroller = ref<HTMLDivElement>()\n\nconst isMobile = useIsMobile()\n\nconst selectedSection = ref('')\nconst linkClicked = ref(false)\nconst registeredSections = shallowRef<IAppSettingsSection[]>([])\n\nconst hasNavigation = computed(() => !isMobile.value && props.showNavigation)\n\n/**\n * Check if one or more navigation entries provide icons\n */\nconst hasNavigationIcons = computed(() => registeredSections.value.some(({ icon }) => !!icon))\n\n/**\n * Remove selected section once the user starts scrolling\n */\nconst unfocusNavigationItem = debounce(() => {\n\tselectedSection.value = ''\n\tif (document.activeElement?.className.includes('navigation-list__link')) {\n\t\t(document.activeElement as HTMLElement).blur()\n\t}\n}, 300)\n\n/**\n * Scrolls the content to the selected settings section.absolute\n *\n * @param item - the ID of the section\n */\nfunction handleSettingsNavigationClick(item: string) {\n\tlinkClicked.value = true\n\tdocument.getElementById('settings-section_' + item)!.scrollIntoView({\n\t\tbehavior: 'smooth',\n\t\tinline: 'nearest',\n\t})\n\tselectedSection.value = item\n\tsetTimeout(() => {\n\t\tlinkClicked.value = false\n\t}, 1000)\n}\n\n/**\n * Reset the dialog state when closed to have a clean state if re-opened.\n *\n * @param isOpen - The new modal open state\n */\nfunction handleCloseModal(isOpen: boolean) {\n\tif (isOpen) {\n\t\treturn\n\t}\n\n\topen.value = false\n\t// reset the scrolling state if the modal is just hidden\n\tsettingsScroller.value!.scrollTop = 0\n}\n\n/**\n * When scrolled manually we remove the focus from the navigation item.\n */\nfunction handleScroll() {\n\tif (open.value && !linkClicked.value) {\n\t\tunfocusNavigationItem()\n\t}\n}\n\nconst slots = useSlots()\n\n/**\n * Called when a new section is registered\n *\n * @param id - The section ID\n * @param name - The section name\n * @param icon - Optional icon component\n */\nfunction registerSection(id: string, name: string, icon?: VNode[]) {\n\t// Check for the uniqueness of section names\n\tif (registeredSections.value.some(({ id: otherId }) => id === otherId)) {\n\t\tthrow new Error(`Duplicate section id found: ${id}. Settings navigation sections must have unique section ids.`)\n\t}\n\tif (registeredSections.value.some(({ name: otherName }) => name === otherName)) {\n\t\tVue.util.warn(`Duplicate section name found: ${name}. Settings navigation sections must have unique section names.`)\n\t}\n\n\tconst newSections = [\n\t\t...registeredSections.value,\n\t\t{ id, name, icon },\n\t]\n\n\t// Sort sections by order in slots\n\tregisteredSections.value = newSections.sort(({ id: idA }, { id: idB }) => {\n\t\tconst indexOf = (id) => slots.default?.().findIndex((vnode: VNode) => (vnode?.componentOptions?.propsData as { id: string | undefined })?.id === id) ?? -1\n\t\treturn indexOf(idA) - indexOf(idB)\n\t})\n\n\t// If this is the first section registered, set it as selected\n\tif (registeredSections.value.length === 1) {\n\t\tselectedSection.value = id\n\t}\n}\n\n/**\n * Called when a section is unregistered to remove it from dialog\n *\n * @param id - The section ID\n */\nfunction unregisterSection(id: string) {\n\tregisteredSections.value = registeredSections.value\n\t\t.filter(({ id: otherId }) => id !== otherId)\n\n\t// If the current section is unregistered, set the first section as selected\n\tif (selectedSection.value === id) {\n\t\tselectedSection.value = registeredSections.value[0]?.id ?? ''\n\t}\n}\n</script>\n\n<template>\n\t<NcDialog\n\t\tv-if=\"open\"\n\t\tclass=\"app-settings\"\n\t\tcontent-classes=\"app-settings__content\"\n\t\tnavigation-classes=\"app-settings__navigation\"\n\t\t:additional-trap-elements=\"additionalTrapElements\"\n\t\t:container=\"container\"\n\t\tclose-on-click-outside\n\t\t:navigation-aria-label=\"t('Settings navigation')\"\n\t\tsize=\"large\"\n\t\t:name=\"name\"\n\t\t@update:open=\"handleCloseModal\">\n\t\t<template v-if=\"hasNavigation\" #navigation=\"{ isCollapsed }\">\n\t\t\t<ul\n\t\t\t\tv-if=\"!isCollapsed\"\n\t\t\t\tclass=\"navigation-list\">\n\t\t\t\t<li v-for=\"section in registeredSections\" :key=\"section.id\">\n\t\t\t\t\t<a\n\t\t\t\t\t\t:aria-current=\"`${section.id === selectedSection}`\"\n\t\t\t\t\t\tclass=\"navigation-list__link\"\n\t\t\t\t\t\t:class=\"{\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\t:href=\"`#settings-section_${section.id}`\"\n\t\t\t\t\t\ttabindex=\"0\"\n\t\t\t\t\t\t@click.prevent=\"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\" @scroll=\"handleScroll\">\n\t\t\t<slot />\n\t\t</div>\n\t</NcDialog>\n</template>\n\n<style lang=\"scss\" scoped>\n.app-settings {\n\t:deep &__navigation {\n\t\tmin-width: 200px;\n\t\tmargin-right: calc(4 * var(--default-grid-baseline));\n\t\toverflow-x: hidden;\n\t\toverflow-y: auto;\n\t\tposition: relative;\n\t}\n\t:deep &__content {\n\t\tbox-sizing: border-box;\n\t\tpadding-inline: calc(4 * var(--default-grid-baseline));\n\t}\n}\n\n.navigation-list {\n\theight: 100%;\n\tbox-sizing: border-box;\n\toverflow-y: auto;\n\tpadding: calc(3 * var(--default-grid-baseline));\n\n\t&__link {\n\t\tdisplay: flex;\n\t\talign-content: center;\n\t\tfont-size: 16px;\n\t\theight: var(--default-clickable-area);\n\t\tmargin: 4px 0;\n\t\tline-height: var(--default-clickable-area);\n\t\tborder-radius: var(--border-radius-element, var(--border-radius-pill));\n\t\tfont-weight: bold;\n\t\tpadding: 0 calc(4 * var(--default-grid-baseline));\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: calc(2 * var(--default-grid-baseline));\n\t\t\tgap: var(--default-grid-baseline);\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: calc(var(--default-clickable-area) - 2 * var(--default-grid-baseline));\n\t\t\tmax-width: calc(var(--default-clickable-area) - 2 * var(--default-grid-baseline));\n\t\t}\n\t}\n}\n\n@media only screen and (max-width: $breakpoint-small-mobile) {\n\t.app-settings {\n\t\t:deep .dialog__name {\n\t\t\tpadding-inline-start: 16px;\n\t\t}\n\t}\n}\n</style>\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"],"names":["id","_b","_a"],"mappings":"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"}

package/dist/chunks/NcAppSettingsDialog-R6Y-tl6d.cjs

@@ -0,0 +1,134 @@
+require('../assets/NcAppSettingsDialog-DH3DIIwL.css');
+"use strict";
+const Vue = require("vue");
+const core = require("@vueuse/core");
+const debounce = require("debounce");
+const NcDialog = require("./NcDialog-CG2sufkb.cjs");
+const Components_NcVNodes = require("../Components/NcVNodes.cjs");
+const Composables_useIsMobile = require("../Composables/useIsMobile.cjs");
+const _l10n = require("./_l10n-9b4TMo5Q.cjs");
+const useAppSettingsDialog = require("./useAppSettingsDialog-CPqmms-u.cjs");
+const _pluginVue2_normalizer = require("./_plugin-vue2_normalizer-V0q-tHlQ.cjs");
+const _interopDefault = (e) => e && e.__esModule ? e : { default: e };
+const Vue__default = /* @__PURE__ */ _interopDefault(Vue);
+const debounce__default = /* @__PURE__ */ _interopDefault(debounce);
+_l10n.register();
+const _sfc_main = /* @__PURE__ */ Vue.defineComponent({
+  __name: "NcAppSettingsDialog",
+  props: {
+    open: { type: Boolean },
+    showNavigation: { type: Boolean },
+    container: { default: "body" },
+    name: { default: "" },
+    additionalTrapElements: { default: () => [] }
+  },
+  emits: ["update:open"],
+  setup(__props, { emit }) {
+    const props = __props;
+    const open = core.useVModel(props, "open", emit, { passive: true });
+    Vue.provide(useAppSettingsDialog.APP_SETTINGS_REGISTRATION_KEY, {
+      registerSection,
+      unregisterSection
+    });
+    const settingsScroller = Vue.ref();
+    const isMobile = Composables_useIsMobile.useIsMobile();
+    const selectedSection = Vue.ref("");
+    const linkClicked = Vue.ref(false);
+    const registeredSections = Vue.shallowRef([]);
+    const hasNavigation = Vue.computed(() => !isMobile.value && props.showNavigation);
+    const hasNavigationIcons = Vue.computed(() => registeredSections.value.some(({ icon }) => !!icon));
+    const unfocusNavigationItem = debounce__default.default(() => {
+      var _a;
+      selectedSection.value = "";
+      if ((_a = document.activeElement) == null ? void 0 : _a.className.includes("navigation-list__link")) {
+        document.activeElement.blur();
+      }
+    }, 300);
+    function handleSettingsNavigationClick(item) {
+      linkClicked.value = true;
+      document.getElementById("settings-section_" + item).scrollIntoView({
+        behavior: "smooth",
+        inline: "nearest"
+      });
+      selectedSection.value = item;
+      setTimeout(() => {
+        linkClicked.value = false;
+      }, 1e3);
+    }
+    function handleCloseModal(isOpen) {
+      if (isOpen) {
+        return;
+      }
+      open.value = false;
+      settingsScroller.value.scrollTop = 0;
+    }
+    function handleScroll() {
+      if (open.value && !linkClicked.value) {
+        unfocusNavigationItem();
+      }
+    }
+    const slots = Vue.useSlots();
+    function registerSection(id, name, icon) {
+      if (registeredSections.value.some(({ id: otherId }) => id === otherId)) {
+        throw new Error("Duplicate section id found: ".concat(id, ". Settings navigation sections must have unique section ids."));
+      }
+      if (registeredSections.value.some(({ name: otherName }) => name === otherName)) {
+        Vue__default.default.util.warn("Duplicate section name found: ".concat(name, ". Settings navigation sections must have unique section names."));
+      }
+      const newSections = [
+        ...registeredSections.value,
+        { id, name, icon }
+      ];
+      registeredSections.value = newSections.sort(({ id: idA }, { id: idB }) => {
+        const indexOf = (id2) => {
+          var _a, _b;
+          return (_b = (_a = slots.default) == null ? void 0 : _a.call(slots).findIndex((vnode) => {
+            var _a2, _b2;
+            return ((_b2 = (_a2 = vnode == null ? void 0 : vnode.componentOptions) == null ? void 0 : _a2.propsData) == null ? void 0 : _b2.id) === id2;
+          })) != null ? _b : -1;
+        };
+        return indexOf(idA) - indexOf(idB);
+      });
+      if (registeredSections.value.length === 1) {
+        selectedSection.value = id;
+      }
+    }
+    function unregisterSection(id) {
+      var _a, _b;
+      registeredSections.value = registeredSections.value.filter(({ id: otherId }) => id !== otherId);
+      if (selectedSection.value === id) {
+        selectedSection.value = (_b = (_a = registeredSections.value[0]) == null ? void 0 : _a.id) != null ? _b : "";
+      }
+    }
+    return { __sfc: true, props, emit, open, settingsScroller, isMobile, selectedSection, linkClicked, registeredSections, hasNavigation, hasNavigationIcons, unfocusNavigationItem, handleSettingsNavigationClick, handleCloseModal, handleScroll, slots, registerSection, unregisterSection, NcDialog: NcDialog.NcDialog, NcVNodes: Components_NcVNodes, t: _l10n.t };
+  }
+});
+var _sfc_render = function render() {
+  var _vm = this, _c = _vm._self._c, _setup = _vm._self._setupProxy;
+  return _setup.open ? _c(_setup.NcDialog, { staticClass: "app-settings", attrs: { "content-classes": "app-settings__content", "navigation-classes": "app-settings__navigation", "additional-trap-elements": _vm.additionalTrapElements, "container": _vm.container, "close-on-click-outside": "", "navigation-aria-label": _setup.t("Settings navigation"), "size": "large", "name": _vm.name }, on: { "update:open": _setup.handleCloseModal }, scopedSlots: _vm._u([_setup.hasNavigation ? { key: "navigation", fn: function({ isCollapsed }) {
+    return [!isCollapsed ? _c("ul", { staticClass: "navigation-list" }, _vm._l(_setup.registeredSections, function(section) {
+      return _c("li", { key: section.id }, [_c("a", { staticClass: "navigation-list__link", class: {
+        "navigation-list__link--active": section.id === _setup.selectedSection,
+        "navigation-list__link--icon": _setup.hasNavigationIcons
+      }, attrs: { "aria-current": "".concat(section.id === _setup.selectedSection), "href": "#settings-section_".concat(section.id), "tabindex": "0" }, on: { "click": function($event) {
+        $event.preventDefault();
+        return _setup.handleSettingsNavigationClick(section.id);
+      }, "keydown": function($event) {
+        if (!$event.type.indexOf("key") && _vm._k($event.keyCode, "enter", 13, $event.key, "Enter")) return null;
+        return _setup.handleSettingsNavigationClick(section.id);
+      } } }, [_setup.hasNavigationIcons ? _c("div", { staticClass: "navigation-list__link-icon" }, [section.icon ? _c(_setup.NcVNodes, { attrs: { "vnodes": section.icon } }) : _vm._e()], 1) : _vm._e(), _c("span", { staticClass: "navigation-list__link-text" }, [_vm._v(" " + _vm._s(section.name) + " ")])])]);
+    }), 0) : _vm._e()];
+  } } : null], null, true) }, [_c("div", { ref: "settingsScroller", on: { "scroll": _setup.handleScroll } }, [_vm._t("default")], 2)]) : _vm._e();
+};
+var _sfc_staticRenderFns = [];
+var __component__ = /* @__PURE__ */ _pluginVue2_normalizer.normalizeComponent(
+  _sfc_main,
+  _sfc_render,
+  _sfc_staticRenderFns,
+  false,
+  null,
+  "84140ad4"
+);
+const NcAppSettingsDialog = __component__.exports;
+exports.NcAppSettingsDialog = NcAppSettingsDialog;
+//# sourceMappingURL=NcAppSettingsDialog-R6Y-tl6d.cjs.map

package/dist/chunks/NcAppSettingsDialog-R6Y-tl6d.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"NcAppSettingsDialog-R6Y-tl6d.cjs","sources":["../../src/components/NcAppSettingsDialog/NcAppSettingsDialog.vue"],"sourcesContent":["<!--\n  - SPDX-FileCopyrightText: 2020 Nextcloud GmbH and Nextcloud contributors\n  - SPDX-License-Identifier: AGPL-3.0-or-later\n-->\n\n<script setup lang=\"ts\">\nimport type { VNode } from 'vue'\n\nimport { useVModel } from '@vueuse/core'\nimport debounce from 'debounce'\nimport Vue, { computed, provide, ref, shallowRef, useSlots } from 'vue'\nimport NcDialog from '../NcDialog/NcDialog.vue'\nimport NcVNodes from '../NcVNodes/NcVNodes.vue'\nimport { useIsMobile } from '../../composables/useIsMobile/index.ts'\nimport { t } from '../../l10n.js'\nimport { APP_SETTINGS_REGISTRATION_KEY } from './useAppSettingsDialog.ts'\n\nexport interface IAppSettingsSection {\n\tid: string\n\tname: string\n\ticon?: VNode[]\n}\n\nconst props = withDefaults(defineProps<{\n\t/**\n\t * Determines the open / closed state of the modal\n\t */\n\topen: boolean\n\n\t/**\n\t * Shows the navigation on desktop if true\n\t */\n\tshowNavigation?: boolean\n\n\t/**\n\t * Selector for the popover container\n\t */\n\tcontainer?: string\n\n\t/**\n\t * Name of the settings\n\t */\n\tname?: string\n\n\t/**\n\t * Additional elements to add to the focus trap\n\t */\n\tadditionalTrapElements?: (string | HTMLElement)[]\n}>(), {\n\tcontainer: 'body',\n\tname: '',\n\tadditionalTrapElements: () => [],\n})\n\nconst emit = defineEmits<{\n\t(e: 'update:open', v: boolean): void\n}>()\n\nconst open = useVModel(props, 'open', emit, { passive: true })\n\nprovide(APP_SETTINGS_REGISTRATION_KEY, {\n\tregisterSection,\n\tunregisterSection,\n})\n\nconst settingsScroller = ref<HTMLDivElement>()\n\nconst isMobile = useIsMobile()\n\nconst selectedSection = ref('')\nconst linkClicked = ref(false)\nconst registeredSections = shallowRef<IAppSettingsSection[]>([])\n\nconst hasNavigation = computed(() => !isMobile.value && props.showNavigation)\n\n/**\n * Check if one or more navigation entries provide icons\n */\nconst hasNavigationIcons = computed(() => registeredSections.value.some(({ icon }) => !!icon))\n\n/**\n * Remove selected section once the user starts scrolling\n */\nconst unfocusNavigationItem = debounce(() => {\n\tselectedSection.value = ''\n\tif (document.activeElement?.className.includes('navigation-list__link')) {\n\t\t(document.activeElement as HTMLElement).blur()\n\t}\n}, 300)\n\n/**\n * Scrolls the content to the selected settings section.absolute\n *\n * @param item - the ID of the section\n */\nfunction handleSettingsNavigationClick(item: string) {\n\tlinkClicked.value = true\n\tdocument.getElementById('settings-section_' + item)!.scrollIntoView({\n\t\tbehavior: 'smooth',\n\t\tinline: 'nearest',\n\t})\n\tselectedSection.value = item\n\tsetTimeout(() => {\n\t\tlinkClicked.value = false\n\t}, 1000)\n}\n\n/**\n * Reset the dialog state when closed to have a clean state if re-opened.\n *\n * @param isOpen - The new modal open state\n */\nfunction handleCloseModal(isOpen: boolean) {\n\tif (isOpen) {\n\t\treturn\n\t}\n\n\topen.value = false\n\t// reset the scrolling state if the modal is just hidden\n\tsettingsScroller.value!.scrollTop = 0\n}\n\n/**\n * When scrolled manually we remove the focus from the navigation item.\n */\nfunction handleScroll() {\n\tif (open.value && !linkClicked.value) {\n\t\tunfocusNavigationItem()\n\t}\n}\n\nconst slots = useSlots()\n\n/**\n * Called when a new section is registered\n *\n * @param id - The section ID\n * @param name - The section name\n * @param icon - Optional icon component\n */\nfunction registerSection(id: string, name: string, icon?: VNode[]) {\n\t// Check for the uniqueness of section names\n\tif (registeredSections.value.some(({ id: otherId }) => id === otherId)) {\n\t\tthrow new Error(`Duplicate section id found: ${id}. Settings navigation sections must have unique section ids.`)\n\t}\n\tif (registeredSections.value.some(({ name: otherName }) => name === otherName)) {\n\t\tVue.util.warn(`Duplicate section name found: ${name}. Settings navigation sections must have unique section names.`)\n\t}\n\n\tconst newSections = [\n\t\t...registeredSections.value,\n\t\t{ id, name, icon },\n\t]\n\n\t// Sort sections by order in slots\n\tregisteredSections.value = newSections.sort(({ id: idA }, { id: idB }) => {\n\t\tconst indexOf = (id) => slots.default?.().findIndex((vnode: VNode) => (vnode?.componentOptions?.propsData as { id: string | undefined })?.id === id) ?? -1\n\t\treturn indexOf(idA) - indexOf(idB)\n\t})\n\n\t// If this is the first section registered, set it as selected\n\tif (registeredSections.value.length === 1) {\n\t\tselectedSection.value = id\n\t}\n}\n\n/**\n * Called when a section is unregistered to remove it from dialog\n *\n * @param id - The section ID\n */\nfunction unregisterSection(id: string) {\n\tregisteredSections.value = registeredSections.value\n\t\t.filter(({ id: otherId }) => id !== otherId)\n\n\t// If the current section is unregistered, set the first section as selected\n\tif (selectedSection.value === id) {\n\t\tselectedSection.value = registeredSections.value[0]?.id ?? ''\n\t}\n}\n</script>\n\n<template>\n\t<NcDialog\n\t\tv-if=\"open\"\n\t\tclass=\"app-settings\"\n\t\tcontent-classes=\"app-settings__content\"\n\t\tnavigation-classes=\"app-settings__navigation\"\n\t\t:additional-trap-elements=\"additionalTrapElements\"\n\t\t:container=\"container\"\n\t\tclose-on-click-outside\n\t\t:navigation-aria-label=\"t('Settings navigation')\"\n\t\tsize=\"large\"\n\t\t:name=\"name\"\n\t\t@update:open=\"handleCloseModal\">\n\t\t<template v-if=\"hasNavigation\" #navigation=\"{ isCollapsed }\">\n\t\t\t<ul\n\t\t\t\tv-if=\"!isCollapsed\"\n\t\t\t\tclass=\"navigation-list\">\n\t\t\t\t<li v-for=\"section in registeredSections\" :key=\"section.id\">\n\t\t\t\t\t<a\n\t\t\t\t\t\t:aria-current=\"`${section.id === selectedSection}`\"\n\t\t\t\t\t\tclass=\"navigation-list__link\"\n\t\t\t\t\t\t:class=\"{\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\t:href=\"`#settings-section_${section.id}`\"\n\t\t\t\t\t\ttabindex=\"0\"\n\t\t\t\t\t\t@click.prevent=\"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\" @scroll=\"handleScroll\">\n\t\t\t<slot />\n\t\t</div>\n\t</NcDialog>\n</template>\n\n<style lang=\"scss\" scoped>\n.app-settings {\n\t:deep &__navigation {\n\t\tmin-width: 200px;\n\t\tmargin-right: calc(4 * var(--default-grid-baseline));\n\t\toverflow-x: hidden;\n\t\toverflow-y: auto;\n\t\tposition: relative;\n\t}\n\t:deep &__content {\n\t\tbox-sizing: border-box;\n\t\tpadding-inline: calc(4 * var(--default-grid-baseline));\n\t}\n}\n\n.navigation-list {\n\theight: 100%;\n\tbox-sizing: border-box;\n\toverflow-y: auto;\n\tpadding: calc(3 * var(--default-grid-baseline));\n\n\t&__link {\n\t\tdisplay: flex;\n\t\talign-content: center;\n\t\tfont-size: 16px;\n\t\theight: var(--default-clickable-area);\n\t\tmargin: 4px 0;\n\t\tline-height: var(--default-clickable-area);\n\t\tborder-radius: var(--border-radius-element, var(--border-radius-pill));\n\t\tfont-weight: bold;\n\t\tpadding: 0 calc(4 * var(--default-grid-baseline));\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: calc(2 * var(--default-grid-baseline));\n\t\t\tgap: var(--default-grid-baseline);\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: calc(var(--default-clickable-area) - 2 * var(--default-grid-baseline));\n\t\t\tmax-width: calc(var(--default-clickable-area) - 2 * var(--default-grid-baseline));\n\t\t}\n\t}\n}\n\n@media only screen and (max-width: $breakpoint-small-mobile) {\n\t.app-settings {\n\t\t:deep .dialog__name {\n\t\t\tpadding-inline-start: 16px;\n\t\t}\n\t}\n}\n</style>\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"],"names":["useVModel","provide","APP_SETTINGS_REGISTRATION_KEY","ref","useIsMobile","shallowRef","computed","debounce","useSlots","Vue","id","_b","_a"],"mappings":"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"}

package/dist/chunks/NcAppSettingsSection-BNVlt4g0.mjs

@@ -0,0 +1,88 @@
+import '../assets/NcAppSettingsSection-Dq0eTGEp.css';
+var __defProp = Object.defineProperty;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+import { u as useAppSettingsDialog } from "./useAppSettingsDialog-Dn48dw1k.mjs";
+import { n as normalizeComponent } from "./_plugin-vue2_normalizer-DU4iP6Vu.mjs";
+const _sfc_main = {
+  name: "NcAppSettingsSection",
+  props: {
+    /**
+     * Name of the section
+     */
+    name: {
+      type: String,
+      required: true
+    },
+    /**
+     * The id of the section
+     */
+    id: {
+      type: String,
+      required: true,
+      validator(id) {
+        return /^[a-z0-9\-_]+$/.test(id);
+      }
+    }
+  },
+  setup() {
+    return __spreadValues({}, useAppSettingsDialog());
+  },
+  computed: {
+    // generate an id for each settingssection based on the name without whitespaces
+    htmlId() {
+      return "settings-section_" + this.id;
+    }
+  },
+  // Reactive changes for section navigation
+  watch: {
+    id(newId, oldId) {
+      var _a;
+      this.unregisterSection(oldId);
+      this.registerSection(newId, this.name, (_a = this.$slots) == null ? void 0 : _a.icon);
+    },
+    name(newName) {
+      var _a;
+      this.unregisterSection(this.id);
+      this.registerSection(this.id, newName, (_a = this.$slots) == null ? void 0 : _a.icon);
+    }
+  },
+  mounted() {
+    var _a;
+    this.registerSection(this.id, this.name, (_a = this.$slots) == null ? void 0 : _a.icon);
+  },
+  beforeDestroy() {
+    this.unregisterSection(this.id);
+  }
+};
+var _sfc_render = function render() {
+  var _vm = this, _c = _vm._self._c;
+  return _c("section", { staticClass: "app-settings-section", attrs: { "id": _vm.htmlId, "aria-labelledby": "".concat(_vm.htmlId, "--label") } }, [_c("h3", { staticClass: "app-settings-section__name", attrs: { "id": "".concat(_vm.htmlId, "--label") } }, [_vm._v(" " + _vm._s(_vm.name) + " ")]), _vm._t("default"), _vm._e()], 2);
+};
+var _sfc_staticRenderFns = [];
+var __component__ = /* @__PURE__ */ normalizeComponent(
+  _sfc_main,
+  _sfc_render,
+  _sfc_staticRenderFns,
+  false,
+  null,
+  "caabd323"
+);
+const NcAppSettingsSection = __component__.exports;
+export {
+  NcAppSettingsSection as N
+};
+//# sourceMappingURL=NcAppSettingsSection-BNVlt4g0.mjs.map

package/dist/chunks/NcAppSettingsSection-BNVlt4g0.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"NcAppSettingsSection-BNVlt4g0.mjs","sources":["../../src/components/NcAppSettingsSection/NcAppSettingsSection.vue"],"sourcesContent":["<!--\n  - SPDX-FileCopyrightText: 2020 Nextcloud GmbH and Nextcloud contributors\n  - SPDX-License-Identifier: AGPL-3.0-or-later\n-->\n\n<template>\n\t<section :id=\"htmlId\" :aria-labelledby=\"`${htmlId}--label`\" class=\"app-settings-section\">\n\t\t<h3 :id=\"`${htmlId}--label`\" class=\"app-settings-section__name\">\n\t\t\t{{ name }}\n\t\t</h3>\n\t\t<slot />\n\t\t<!-- @slot Optonal icon to for the secion in the navigation -->\n\t\t<slot v-if=\"false\" name=\"icon\" />\n\t</section>\n</template>\n\n<script>\nimport { useAppSettingsDialog } from '../NcAppSettingsDialog/useAppSettingsDialog.ts'\n\nexport default {\n\tname: 'NcAppSettingsSection',\n\n\tprops: {\n\t\t/**\n\t\t * Name of the section\n\t\t */\n\t\tname: {\n\t\t\ttype: String,\n\t\t\trequired: true,\n\t\t},\n\n\t\t/**\n\t\t * The id of the section\n\t\t */\n\t\tid: {\n\t\t\ttype: String,\n\t\t\trequired: true,\n\t\t\tvalidator(id) {\n\t\t\t\t// Only alphanumeric, dash and underscore\n\t\t\t\treturn /^[a-z0-9\\-_]+$/.test(id)\n\t\t\t},\n\t\t},\n\t},\n\n\tsetup() {\n\t\treturn {\n\t\t\t...useAppSettingsDialog(),\n\t\t}\n\t},\n\n\tcomputed: {\n\t\t// generate an id for each settingssection based on the name without whitespaces\n\t\thtmlId() {\n\t\t\treturn 'settings-section_' + this.id\n\t\t},\n\t},\n\n\t// Reactive changes for section navigation\n\twatch: {\n\t\tid(newId, oldId) {\n\t\t\tthis.unregisterSection(oldId)\n\t\t\tthis.registerSection(newId, this.name, this.$slots?.icon)\n\t\t},\n\n\t\tname(newName) {\n\t\t\tthis.unregisterSection(this.id)\n\t\t\tthis.registerSection(this.id, newName, this.$slots?.icon)\n\t\t},\n\t},\n\n\tmounted() {\n\t\t// register section for navigation\n\t\tthis.registerSection(this.id, this.name, this.$slots?.icon)\n\t},\n\n\tbeforeDestroy() {\n\t\tthis.unregisterSection(this.id)\n\t},\n}\n\n</script>\n\n<style lang=\"scss\" scoped>\n.app-settings-section {\n\tmargin-bottom: 80px;\n\t&__name {\n\t\tfont-size: 1.6em;\n\t\tmargin: 0;\n\t\tpadding: 20px 0;\n\t\tfont-weight: bold;\n\t\toverflow: hidden;\n\t\twhite-space: nowrap;\n\t\ttext-overflow: ellipsis;\n\t}\n}\n</style>\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;AAmBA,MAAA,YAAA;AAAA,EACA,MAAA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA,IAIA,MAAA;AAAA,MACA,MAAA;AAAA,MACA,UAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,IAAA;AAAA,MACA,MAAA;AAAA,MACA,UAAA;AAAA,MACA,UAAA,IAAA;AAEA,eAAA,iBAAA,KAAA,EAAA;AAAA,MACA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,QAAA;AACA,WAAA,mBACA,qBAAA;AAAA,EAEA;AAAA,EAEA,UAAA;AAAA;AAAA,IAEA,SAAA;AACA,aAAA,sBAAA,KAAA;AAAA,IACA;AAAA,EACA;AAAA;AAAA,EAGA,OAAA;AAAA,IACA,GAAA,OAAA,OAAA;;AACA,WAAA,kBAAA,KAAA;AACA,WAAA,gBAAA,OAAA,KAAA,OAAA,UAAA,WAAA,mBAAA,IAAA;AAAA,IACA;AAAA,IAEA,KAAA,SAAA;;AACA,WAAA,kBAAA,KAAA,EAAA;AACA,WAAA,gBAAA,KAAA,IAAA,UAAA,UAAA,WAAA,mBAAA,IAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,UAAA;;AAEA,SAAA,gBAAA,KAAA,IAAA,KAAA,OAAA,UAAA,WAAA,mBAAA,IAAA;AAAA,EACA;AAAA,EAEA,gBAAA;AACA,SAAA,kBAAA,KAAA,EAAA;AAAA,EACA;AACA;;;;;;;;;;;;;;;"}

package/dist/chunks/NcAppSettingsSection-CTqViPnP.cjs

@@ -0,0 +1,87 @@
+require('../assets/NcAppSettingsSection-Dq0eTGEp.css');
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+const useAppSettingsDialog = require("./useAppSettingsDialog-CPqmms-u.cjs");
+const _pluginVue2_normalizer = require("./_plugin-vue2_normalizer-V0q-tHlQ.cjs");
+const _sfc_main = {
+  name: "NcAppSettingsSection",
+  props: {
+    /**
+     * Name of the section
+     */
+    name: {
+      type: String,
+      required: true
+    },
+    /**
+     * The id of the section
+     */
+    id: {
+      type: String,
+      required: true,
+      validator(id) {
+        return /^[a-z0-9\-_]+$/.test(id);
+      }
+    }
+  },
+  setup() {
+    return __spreadValues({}, useAppSettingsDialog.useAppSettingsDialog());
+  },
+  computed: {
+    // generate an id for each settingssection based on the name without whitespaces
+    htmlId() {
+      return "settings-section_" + this.id;
+    }
+  },
+  // Reactive changes for section navigation
+  watch: {
+    id(newId, oldId) {
+      var _a;
+      this.unregisterSection(oldId);
+      this.registerSection(newId, this.name, (_a = this.$slots) == null ? void 0 : _a.icon);
+    },
+    name(newName) {
+      var _a;
+      this.unregisterSection(this.id);
+      this.registerSection(this.id, newName, (_a = this.$slots) == null ? void 0 : _a.icon);
+    }
+  },
+  mounted() {
+    var _a;
+    this.registerSection(this.id, this.name, (_a = this.$slots) == null ? void 0 : _a.icon);
+  },
+  beforeDestroy() {
+    this.unregisterSection(this.id);
+  }
+};
+var _sfc_render = function render() {
+  var _vm = this, _c = _vm._self._c;
+  return _c("section", { staticClass: "app-settings-section", attrs: { "id": _vm.htmlId, "aria-labelledby": "".concat(_vm.htmlId, "--label") } }, [_c("h3", { staticClass: "app-settings-section__name", attrs: { "id": "".concat(_vm.htmlId, "--label") } }, [_vm._v(" " + _vm._s(_vm.name) + " ")]), _vm._t("default"), _vm._e()], 2);
+};
+var _sfc_staticRenderFns = [];
+var __component__ = /* @__PURE__ */ _pluginVue2_normalizer.normalizeComponent(
+  _sfc_main,
+  _sfc_render,
+  _sfc_staticRenderFns,
+  false,
+  null,
+  "caabd323"
+);
+const NcAppSettingsSection = __component__.exports;
+exports.NcAppSettingsSection = NcAppSettingsSection;
+//# sourceMappingURL=NcAppSettingsSection-CTqViPnP.cjs.map

package/dist/chunks/NcAppSettingsSection-CTqViPnP.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"NcAppSettingsSection-CTqViPnP.cjs","sources":["../../src/components/NcAppSettingsSection/NcAppSettingsSection.vue"],"sourcesContent":["<!--\n  - SPDX-FileCopyrightText: 2020 Nextcloud GmbH and Nextcloud contributors\n  - SPDX-License-Identifier: AGPL-3.0-or-later\n-->\n\n<template>\n\t<section :id=\"htmlId\" :aria-labelledby=\"`${htmlId}--label`\" class=\"app-settings-section\">\n\t\t<h3 :id=\"`${htmlId}--label`\" class=\"app-settings-section__name\">\n\t\t\t{{ name }}\n\t\t</h3>\n\t\t<slot />\n\t\t<!-- @slot Optonal icon to for the secion in the navigation -->\n\t\t<slot v-if=\"false\" name=\"icon\" />\n\t</section>\n</template>\n\n<script>\nimport { useAppSettingsDialog } from '../NcAppSettingsDialog/useAppSettingsDialog.ts'\n\nexport default {\n\tname: 'NcAppSettingsSection',\n\n\tprops: {\n\t\t/**\n\t\t * Name of the section\n\t\t */\n\t\tname: {\n\t\t\ttype: String,\n\t\t\trequired: true,\n\t\t},\n\n\t\t/**\n\t\t * The id of the section\n\t\t */\n\t\tid: {\n\t\t\ttype: String,\n\t\t\trequired: true,\n\t\t\tvalidator(id) {\n\t\t\t\t// Only alphanumeric, dash and underscore\n\t\t\t\treturn /^[a-z0-9\\-_]+$/.test(id)\n\t\t\t},\n\t\t},\n\t},\n\n\tsetup() {\n\t\treturn {\n\t\t\t...useAppSettingsDialog(),\n\t\t}\n\t},\n\n\tcomputed: {\n\t\t// generate an id for each settingssection based on the name without whitespaces\n\t\thtmlId() {\n\t\t\treturn 'settings-section_' + this.id\n\t\t},\n\t},\n\n\t// Reactive changes for section navigation\n\twatch: {\n\t\tid(newId, oldId) {\n\t\t\tthis.unregisterSection(oldId)\n\t\t\tthis.registerSection(newId, this.name, this.$slots?.icon)\n\t\t},\n\n\t\tname(newName) {\n\t\t\tthis.unregisterSection(this.id)\n\t\t\tthis.registerSection(this.id, newName, this.$slots?.icon)\n\t\t},\n\t},\n\n\tmounted() {\n\t\t// register section for navigation\n\t\tthis.registerSection(this.id, this.name, this.$slots?.icon)\n\t},\n\n\tbeforeDestroy() {\n\t\tthis.unregisterSection(this.id)\n\t},\n}\n\n</script>\n\n<style lang=\"scss\" scoped>\n.app-settings-section {\n\tmargin-bottom: 80px;\n\t&__name {\n\t\tfont-size: 1.6em;\n\t\tmargin: 0;\n\t\tpadding: 20px 0;\n\t\tfont-weight: bold;\n\t\toverflow: hidden;\n\t\twhite-space: nowrap;\n\t\ttext-overflow: ellipsis;\n\t}\n}\n</style>\n"],"names":["useAppSettingsDialog"],"mappings":";;;;;;;;;;;;;;;;;;;AAmBA,MAAA,YAAA;AAAA,EACA,MAAA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA,IAIA,MAAA;AAAA,MACA,MAAA;AAAA,MACA,UAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,IAAA;AAAA,MACA,MAAA;AAAA,MACA,UAAA;AAAA,MACA,UAAA,IAAA;AAEA,eAAA,iBAAA,KAAA,EAAA;AAAA,MACA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,QAAA;AACA,WAAA,mBACAA,0CAAA;AAAA,EAEA;AAAA,EAEA,UAAA;AAAA;AAAA,IAEA,SAAA;AACA,aAAA,sBAAA,KAAA;AAAA,IACA;AAAA,EACA;AAAA;AAAA,EAGA,OAAA;AAAA,IACA,GAAA,OAAA,OAAA;;AACA,WAAA,kBAAA,KAAA;AACA,WAAA,gBAAA,OAAA,KAAA,OAAA,UAAA,WAAA,mBAAA,IAAA;AAAA,IACA;AAAA,IAEA,KAAA,SAAA;;AACA,WAAA,kBAAA,KAAA,EAAA;AACA,WAAA,gBAAA,KAAA,IAAA,UAAA,UAAA,WAAA,mBAAA,IAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,UAAA;;AAEA,SAAA,gBAAA,KAAA,IAAA,KAAA,OAAA,UAAA,WAAA,mBAAA,IAAA;AAAA,EACA;AAAA,EAEA,gBAAA;AACA,SAAA,kBAAA,KAAA,EAAA;AAAA,EACA;AACA;;;;;;;;;;;;;;;;"}