@nextcloud/vue 8.6.0 → 9.0.0-alpha.1

package/dist/chunks/NcAppSettingsDialog-HnYa47vg.cjs

@@ -0,0 +1,211 @@
+var q = require("../assets/NcAppSettingsDialog-HOydlmNi.css");
+const m = require("./NcDialog-BYXi2emF.cjs"), _ = require("../Components/NcVNodes.cjs"), f = require("../Composables/useIsMobile.cjs"), h = require("./_l10n-Fl7RzbcZ.cjs"), v = require("debounce"), e = require("vue"), S = require("./_plugin-vue_export-helper-xG2iG1wl.cjs"), k = (t) => t && t.__esModule ? t : { default: t }, N = /* @__PURE__ */ k(v);
+h.register(h.t38);
+const C = {
+  name: "NcAppSettingsDialog",
+  components: {
+    NcDialog: m.NcDialog,
+    NcVNodes: _
+  },
+  provide() {
+    return {
+      registerSection: this.registerSection,
+      unregisterSection: this.unregisterSection
+    };
+  },
+  props: {
+    /**
+     * Determines the open / closed state of the modal
+     */
+    open: {
+      type: Boolean,
+      required: !0
+    },
+    /**
+     * Shows the navigation on desktop if true
+     */
+    showNavigation: {
+      type: Boolean,
+      default: !1
+    },
+    /**
+     * Selector for the popover container
+     */
+    container: {
+      type: String,
+      default: "body"
+    },
+    /**
+     * Name of the settings
+     */
+    name: {
+      type: String,
+      default: ""
+    },
+    /**
+     * Additional elements to add to the focus trap
+     */
+    additionalTrapElements: {
+      type: Array,
+      default: () => []
+    }
+  },
+  emits: ["update:open"],
+  setup() {
+    return {
+      isMobile: f.useIsMobile()
+    };
+  },
+  data() {
+    return {
+      selectedSection: "",
+      linkClicked: !1,
+      addedScrollListener: !1,
+      scroller: null,
+      /**
+       * Currently registered settings sections
+       * @type {{ id: string, name: string, icon?: import('vue').VNode[] }[]}
+       */
+      sections: []
+    };
+  },
+  computed: {
+    dialogProperties() {
+      return {
+        additionalTrapElements: this.additionalTrapElements,
+        closeOnClickOutside: !0,
+        class: "app-settings",
+        container: this.container,
+        contentClasses: "app-settings__content",
+        size: "large",
+        name: this.name,
+        navigationClasses: "app-settings__navigation"
+      };
+    },
+    /**
+     * Check if one or more navigation entries provide icons
+     */
+    hasNavigationIcons() {
+      return this.sections.some(({ icon: t }) => !!t);
+    },
+    hasNavigation() {
+      return !(this.isMobile || !this.showNavigation);
+    },
+    settingsNavigationAriaLabel() {
+      return h.t("Settings navigation");
+    }
+  },
+  updated() {
+    this.$refs.settingsScroller && (this.scroller = this.$refs.settingsScroller, this.addedScrollListener || (this.scroller.addEventListener("scroll", this.handleScroll), this.addedScrollListener = !0));
+  },
+  methods: {
+    /**
+     * Called when a new section is registered
+     * @param {string} id The section ID
+     * @param {string} name The section name
+     * @param {import('vue').VNode[]|undefined} icon Optional icon component
+     */
+    registerSection(t, o, a) {
+      if (this.sections.some(({ id: s }) => t === s))
+        throw new Error("Duplicate section id found: ".concat(t, ". Settings navigation sections must have unique section ids."));
+      this.sections.some(({ name: s }) => o === s) && e.warn("Duplicate section name found: ".concat(o, ". Settings navigation sections must have unique section names."));
+      const l = [...this.sections, { id: t, name: o, icon: a }];
+      this.sections = l.sort(({ id: s }, { id: n }) => {
+        const r = (u) => {
+          var c, i, d;
+          return (d = (i = (c = this.$slots).default) == null ? void 0 : i.call(c).indexOf((g) => {
+            var p;
+            return ((p = g == null ? void 0 : g.props) == null ? void 0 : p.id) === u;
+          })) != null ? d : -1;
+        };
+        return r(s) - r(n);
+      }), this.sections.length === 1 && (this.selectedSection = t);
+    },
+    /**
+     * Called when a section is unregistered to remove it from dialog
+     * @param {string} id The section ID
+     */
+    unregisterSection(t) {
+      var o, a;
+      this.sections = this.sections.filter(({ id: l }) => t !== l), this.selectedSection === t && (this.selectedSection = (a = (o = this.sections[0]) == null ? void 0 : o.id) != null ? a : "");
+    },
+    /**
+     * Scrolls the content to the selected settings section.absolute
+     *
+     * @param {string} item the ID of the section
+     */
+    handleSettingsNavigationClick(t) {
+      this.linkClicked = !0, document.getElementById("settings-section_" + t).scrollIntoView({
+        behavior: "smooth",
+        inline: "nearest"
+      }), this.selectedSection = t, setTimeout(() => {
+        this.linkClicked = !1;
+      }, 1e3);
+    },
+    handleCloseModal(t) {
+      t || (this.$emit("update:open", !1), this.scroller.removeEventListener("scroll", this.handleScroll), this.addedScrollListener = !1, this.scroller.scrollTop = 0);
+    },
+    handleScroll() {
+      this.linkClicked || this.unfocusNavigationItem();
+    },
+    // Remove selected section once the user starts scrolling
+    unfocusNavigationItem: N.default(function() {
+      this.selectedSection = "", document.activeElement.className.includes("navigation-list__link") && document.activeElement.blur();
+    }, 300)
+  }
+}, y = {
+  key: 0,
+  class: "navigation-list"
+}, b = ["aria-current", "href", "onClick", "onKeydown"], E = {
+  key: 0,
+  class: "navigation-list__link-icon"
+}, B = { class: "navigation-list__link-text" }, w = { ref: "settingsScroller" };
+function V(t, o, a, l, s, n) {
+  const r = e.resolveComponent("NcVNodes"), u = e.resolveComponent("NcDialog");
+  return a.open ? (e.openBlock(), e.createBlock(u, e.mergeProps({
+    key: 0,
+    "navigation-aria-label": n.settingsNavigationAriaLabel
+  }, n.dialogProperties, { "onUpdate:open": n.handleCloseModal }), e.createSlots({
+    default: e.withCtx(() => [
+      e.createElementVNode("div", w, [
+        e.renderSlot(t.$slots, "default", {}, void 0, !0)
+      ], 512)
+    ]),
+    _: 2
+  }, [
+    n.hasNavigation ? {
+      name: "navigation",
+      fn: e.withCtx(({ isCollapsed: c }) => [
+        c ? e.createCommentVNode("", !0) : (e.openBlock(), e.createElementBlock("ul", y, [
+          (e.openBlock(!0), e.createElementBlock(e.Fragment, null, e.renderList(s.sections, (i) => (e.openBlock(), e.createElementBlock("li", {
+            key: i.id
+          }, [
+            e.createElementVNode("a", {
+              "aria-current": "".concat(i.id === s.selectedSection),
+              class: e.normalizeClass({
+                "navigation-list__link": !0,
+                "navigation-list__link--active": i.id === s.selectedSection,
+                "navigation-list__link--icon": n.hasNavigationIcons
+              }),
+              href: "#settings-section_".concat(i.id),
+              tabindex: "0",
+              onClick: e.withModifiers((d) => n.handleSettingsNavigationClick(i.id), ["prevent"]),
+              onKeydown: e.withKeys((d) => n.handleSettingsNavigationClick(i.id), ["enter"])
+            }, [
+              n.hasNavigationIcons ? (e.openBlock(), e.createElementBlock("div", E, [
+                i.icon ? (e.openBlock(), e.createBlock(r, {
+                  key: 0,
+                  vnodes: i.icon
+                }, null, 8, ["vnodes"])) : e.createCommentVNode("", !0)
+              ])) : e.createCommentVNode("", !0),
+              e.createElementVNode("span", B, e.toDisplayString(i.name), 1)
+            ], 42, b)
+          ]))), 128))
+        ]))
+      ]),
+      key: "0"
+    } : void 0
+  ]), 1040, ["navigation-aria-label", "onUpdate:open"])) : e.createCommentVNode("", !0);
+}
+const D = /* @__PURE__ */ S._export_sfc(C, [["render", V], ["__scopeId", "data-v-69d574b6"]]);
+exports.NcAppSettingsDialog = D;

package/dist/chunks/NcAppSettingsDialog-HnYa47vg.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"NcAppSettingsDialog-HnYa47vg.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 v-model:open=\"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 v-model:open=\"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\t:navigation-aria-label=\"settingsNavigationAriaLabel\"\n\t\tv-bind=\"dialogProperties\"\n\t\t@update:open=\"handleCloseModal\">\n\t\t<template v-if=\"hasNavigation\" #navigation=\"{ isCollapsed }\">\n\t\t\t<ul v-if=\"!isCollapsed\"\n\t\t\t\tclass=\"navigation-list\">\n\t\t\t\t<li v-for=\"section in sections\" :key=\"section.id\">\n\t\t\t\t\t<a :aria-current=\"`${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\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\">\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'\nimport { warn } from 'vue'\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.unregisterSection,\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?: import('vue').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\tcloseOnClickOutside: true,\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\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\twarn(`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?.props?.id === id) ?? -1\n\t\t\t\treturn indexOf(idA) - indexOf(idB)\n\t\t\t})\n\n\t\t\t// If this is the first section registered, set it as selected\n\t\t\tif (this.sections.length === 1) {\n\t\t\t\tthis.selectedSection = id\n\t\t\t}\n\t\t},\n\n\t\t/**\n\t\t * Called when a section is unregistered to remove it from dialog\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\n\t\t\t// If the current section is unregistered, set the first section as selected\n\t\t\tif (this.selectedSection === id) {\n\t\t\t\tthis.selectedSection = this.sections[0]?.id ?? ''\n\t\t\t}\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:deep &__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}\n\t:deep &__content {\n\t\tbox-sizing: border-box;\n\t\tpadding-inline: 16px;\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&__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@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"],"names":["_sfc_main","NcDialog","Components_NcVNodes","icon","indexOf","id","_c","_b","_a","vnode","idA","idB","otherId","item","debounce__default","_hoisted_2","_hoisted_4","_hoisted_5","vue","_component_NcDialog","$options","_hoisted_1","$data","section","$event","_hoisted_3"],"mappings":"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"}

package/dist/chunks/NcAppSettingsDialog-nbTWBbti.mjs

@@ -0,0 +1,219 @@
+import "../assets/NcAppSettingsDialog-HOydlmNi.css";
+import { N } from "./NcDialog-rTTTdaH3.mjs";
+import k from "../Components/NcVNodes.mjs";
+import { useIsMobile as y } from "../Composables/useIsMobile.mjs";
+import { r as C, l as b, a as w } from "./_l10n-uuAvfQgY.mjs";
+import E from "debounce";
+import { warn as I, resolveComponent as _, openBlock as a, createBlock as v, mergeProps as L, createSlots as D, withCtx as S, createElementVNode as p, renderSlot as x, createElementBlock as u, Fragment as B, renderList as M, normalizeClass as V, withModifiers as A, withKeys as T, createCommentVNode as h, toDisplayString as O } from "vue";
+import { _ as $ } from "./_plugin-vue_export-helper-hUChTQA_.mjs";
+C(b);
+const q = {
+  name: "NcAppSettingsDialog",
+  components: {
+    NcDialog: N,
+    NcVNodes: k
+  },
+  provide() {
+    return {
+      registerSection: this.registerSection,
+      unregisterSection: this.unregisterSection
+    };
+  },
+  props: {
+    /**
+     * Determines the open / closed state of the modal
+     */
+    open: {
+      type: Boolean,
+      required: !0
+    },
+    /**
+     * Shows the navigation on desktop if true
+     */
+    showNavigation: {
+      type: Boolean,
+      default: !1
+    },
+    /**
+     * Selector for the popover container
+     */
+    container: {
+      type: String,
+      default: "body"
+    },
+    /**
+     * Name of the settings
+     */
+    name: {
+      type: String,
+      default: ""
+    },
+    /**
+     * Additional elements to add to the focus trap
+     */
+    additionalTrapElements: {
+      type: Array,
+      default: () => []
+    }
+  },
+  emits: ["update:open"],
+  setup() {
+    return {
+      isMobile: y()
+    };
+  },
+  data() {
+    return {
+      selectedSection: "",
+      linkClicked: !1,
+      addedScrollListener: !1,
+      scroller: null,
+      /**
+       * Currently registered settings sections
+       * @type {{ id: string, name: string, icon?: import('vue').VNode[] }[]}
+       */
+      sections: []
+    };
+  },
+  computed: {
+    dialogProperties() {
+      return {
+        additionalTrapElements: this.additionalTrapElements,
+        closeOnClickOutside: !0,
+        class: "app-settings",
+        container: this.container,
+        contentClasses: "app-settings__content",
+        size: "large",
+        name: this.name,
+        navigationClasses: "app-settings__navigation"
+      };
+    },
+    /**
+     * Check if one or more navigation entries provide icons
+     */
+    hasNavigationIcons() {
+      return this.sections.some(({ icon: e }) => !!e);
+    },
+    hasNavigation() {
+      return !(this.isMobile || !this.showNavigation);
+    },
+    settingsNavigationAriaLabel() {
+      return w("Settings navigation");
+    }
+  },
+  updated() {
+    this.$refs.settingsScroller && (this.scroller = this.$refs.settingsScroller, this.addedScrollListener || (this.scroller.addEventListener("scroll", this.handleScroll), this.addedScrollListener = !0));
+  },
+  methods: {
+    /**
+     * Called when a new section is registered
+     * @param {string} id The section ID
+     * @param {string} name The section name
+     * @param {import('vue').VNode[]|undefined} icon Optional icon component
+     */
+    registerSection(e, s, o) {
+      if (this.sections.some(({ id: n }) => e === n))
+        throw new Error("Duplicate section id found: ".concat(e, ". Settings navigation sections must have unique section ids."));
+      this.sections.some(({ name: n }) => s === n) && I("Duplicate section name found: ".concat(s, ". Settings navigation sections must have unique section names."));
+      const r = [...this.sections, { id: e, name: s, icon: o }];
+      this.sections = r.sort(({ id: n }, { id: i }) => {
+        const l = (g) => {
+          var c, t, d;
+          return (d = (t = (c = this.$slots).default) == null ? void 0 : t.call(c).indexOf((m) => {
+            var f;
+            return ((f = m == null ? void 0 : m.props) == null ? void 0 : f.id) === g;
+          })) != null ? d : -1;
+        };
+        return l(n) - l(i);
+      }), this.sections.length === 1 && (this.selectedSection = e);
+    },
+    /**
+     * Called when a section is unregistered to remove it from dialog
+     * @param {string} id The section ID
+     */
+    unregisterSection(e) {
+      var s, o;
+      this.sections = this.sections.filter(({ id: r }) => e !== r), this.selectedSection === e && (this.selectedSection = (o = (s = this.sections[0]) == null ? void 0 : s.id) != null ? o : "");
+    },
+    /**
+     * Scrolls the content to the selected settings section.absolute
+     *
+     * @param {string} item the ID of the section
+     */
+    handleSettingsNavigationClick(e) {
+      this.linkClicked = !0, document.getElementById("settings-section_" + e).scrollIntoView({
+        behavior: "smooth",
+        inline: "nearest"
+      }), this.selectedSection = e, setTimeout(() => {
+        this.linkClicked = !1;
+      }, 1e3);
+    },
+    handleCloseModal(e) {
+      e || (this.$emit("update:open", !1), this.scroller.removeEventListener("scroll", this.handleScroll), this.addedScrollListener = !1, this.scroller.scrollTop = 0);
+    },
+    handleScroll() {
+      this.linkClicked || this.unfocusNavigationItem();
+    },
+    // Remove selected section once the user starts scrolling
+    unfocusNavigationItem: E(function() {
+      this.selectedSection = "", document.activeElement.className.includes("navigation-list__link") && document.activeElement.blur();
+    }, 300)
+  }
+}, K = {
+  key: 0,
+  class: "navigation-list"
+}, P = ["aria-current", "href", "onClick", "onKeydown"], z = {
+  key: 0,
+  class: "navigation-list__link-icon"
+}, U = { class: "navigation-list__link-text" }, F = { ref: "settingsScroller" };
+function j(e, s, o, r, n, i) {
+  const l = _("NcVNodes"), g = _("NcDialog");
+  return o.open ? (a(), v(g, L({
+    key: 0,
+    "navigation-aria-label": i.settingsNavigationAriaLabel
+  }, i.dialogProperties, { "onUpdate:open": i.handleCloseModal }), D({
+    default: S(() => [
+      p("div", F, [
+        x(e.$slots, "default", {}, void 0, !0)
+      ], 512)
+    ]),
+    _: 2
+  }, [
+    i.hasNavigation ? {
+      name: "navigation",
+      fn: S(({ isCollapsed: c }) => [
+        c ? h("", !0) : (a(), u("ul", K, [
+          (a(!0), u(B, null, M(n.sections, (t) => (a(), u("li", {
+            key: t.id
+          }, [
+            p("a", {
+              "aria-current": "".concat(t.id === n.selectedSection),
+              class: V({
+                "navigation-list__link": !0,
+                "navigation-list__link--active": t.id === n.selectedSection,
+                "navigation-list__link--icon": i.hasNavigationIcons
+              }),
+              href: "#settings-section_".concat(t.id),
+              tabindex: "0",
+              onClick: A((d) => i.handleSettingsNavigationClick(t.id), ["prevent"]),
+              onKeydown: T((d) => i.handleSettingsNavigationClick(t.id), ["enter"])
+            }, [
+              i.hasNavigationIcons ? (a(), u("div", z, [
+                t.icon ? (a(), v(l, {
+                  key: 0,
+                  vnodes: t.icon
+                }, null, 8, ["vnodes"])) : h("", !0)
+              ])) : h("", !0),
+              p("span", U, O(t.name), 1)
+            ], 42, P)
+          ]))), 128))
+        ]))
+      ]),
+      key: "0"
+    } : void 0
+  ]), 1040, ["navigation-aria-label", "onUpdate:open"])) : h("", !0);
+}
+const Z = /* @__PURE__ */ $(q, [["render", j], ["__scopeId", "data-v-69d574b6"]]);
+export {
+  Z as N
+};

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

@@ -0,0 +1 @@
+{"version":3,"file":"NcAppSettingsDialog-nbTWBbti.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 v-model:open=\"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 v-model:open=\"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\t:navigation-aria-label=\"settingsNavigationAriaLabel\"\n\t\tv-bind=\"dialogProperties\"\n\t\t@update:open=\"handleCloseModal\">\n\t\t<template v-if=\"hasNavigation\" #navigation=\"{ isCollapsed }\">\n\t\t\t<ul v-if=\"!isCollapsed\"\n\t\t\t\tclass=\"navigation-list\">\n\t\t\t\t<li v-for=\"section in sections\" :key=\"section.id\">\n\t\t\t\t\t<a :aria-current=\"`${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\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\">\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'\nimport { warn } from 'vue'\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.unregisterSection,\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?: import('vue').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\tcloseOnClickOutside: true,\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\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\twarn(`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?.props?.id === id) ?? -1\n\t\t\t\treturn indexOf(idA) - indexOf(idB)\n\t\t\t})\n\n\t\t\t// If this is the first section registered, set it as selected\n\t\t\tif (this.sections.length === 1) {\n\t\t\t\tthis.selectedSection = id\n\t\t\t}\n\t\t},\n\n\t\t/**\n\t\t * Called when a section is unregistered to remove it from dialog\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\n\t\t\t// If the current section is unregistered, set the first section as selected\n\t\t\tif (this.selectedSection === id) {\n\t\t\t\tthis.selectedSection = this.sections[0]?.id ?? ''\n\t\t\t}\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:deep &__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}\n\t:deep &__content {\n\t\tbox-sizing: border-box;\n\t\tpadding-inline: 16px;\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&__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@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"],"names":["_sfc_main","NcDialog","_sfc_main$1","icon","indexOf","id","_c","_b","_a","vnode","idA","idB","otherId","item","debounce","_hoisted_2","_hoisted_4","_hoisted_5","openBlock","createBlock","_component_NcDialog","mergeProps","$options","createSlots","withCtx","createElementVNode","createCommentVNode","createElementBlock","_hoisted_1","Fragment","renderList","$data","section","normalizeClass","withModifiers","$event","withKeys","_hoisted_3","toDisplayString"],"mappings":"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"}

package/dist/chunks/NcAppSettingsSection-LHcKgBpz.cjs

@@ -0,0 +1,54 @@
+var _ = require("../assets/NcAppSettingsSection-Gh575p0x.css");
+const s = require("vue"), o = require("./_plugin-vue_export-helper-xG2iG1wl.cjs"), c = {
+  name: "NcAppSettingsSection",
+  inject: ["registerSection", "unregisterSection"],
+  props: {
+    name: {
+      type: String,
+      required: !0
+    },
+    id: {
+      type: String,
+      required: !0,
+      validator(t) {
+        return /^[a-z0-9\-_]+$/.test(t);
+      }
+    }
+  },
+  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(t, e) {
+      var i, n;
+      this.unregisterSection(e), this.registerSection(t, this.name, (n = (i = this.$slots) == null ? void 0 : i.icon) == null ? void 0 : n.call(i));
+    },
+    name(t) {
+      var e, i;
+      this.unregisterSection(this.id), this.registerSection(this.id, t, (i = (e = this.$slots) == null ? void 0 : e.icon) == null ? void 0 : i.call(e));
+    }
+  },
+  mounted() {
+    var t, e;
+    this.registerSection(this.id, this.name, (e = (t = this.$slots) == null ? void 0 : t.icon) == null ? void 0 : e.call(t));
+  },
+  beforeUnmount() {
+    this.unregisterSection(this.id);
+  }
+}, d = ["id"], a = { class: "app-settings-section__name" };
+function u(t, e, i, n, h, r) {
+  return s.openBlock(), s.createElementBlock("div", {
+    id: r.htmlId,
+    class: "app-settings-section"
+  }, [
+    s.createElementVNode("h3", a, s.toDisplayString(i.name), 1),
+    s.renderSlot(t.$slots, "default", {}, void 0, !0),
+    s.createCommentVNode("", !0)
+  ], 8, d);
+}
+const p = /* @__PURE__ */ o._export_sfc(c, [["render", u], ["__scopeId", "data-v-9bc88a91"]]);
+exports.NcAppSettingsSection = p;

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

@@ -0,0 +1 @@
+{"version":3,"file":"NcAppSettingsSection-LHcKgBpz.cjs","sources":["../../src/components/NcAppSettingsSection/NcAppSettingsSection.vue"],"sourcesContent":["<!--\n - @copyright Copyright (c) 2020 Marco Ambrosini <marcoambrosini@icloud.com>\n -\n - @author Marco Ambrosini <marcoambrosini@icloud.com>\n -\n - @license GNU AGPL version 3 or any later version\n -\n - This program is free software: you can redistribute it and/or modify\n - it under the terms of the GNU Affero General Public License as\n - published by the Free Software Foundation, either version 3 of the\n - License, or (at your option) any later version.\n -\n - This program is distributed in the hope that it will be useful,\n - but WITHOUT ANY WARRANTY; without even the implied warranty of\n - MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the\n - GNU Affero General Public License for more details.\n -\n - You should have received a copy of the GNU Affero General Public License\n - along with this program. If not, see <http://www.gnu.org/licenses/>.\n -\n -->\n\n<template>\n\t<div :id=\"htmlId\" class=\"app-settings-section\">\n\t\t<h3 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</div>\n</template>\n\n<script>\nexport default {\n\tname: 'NcAppSettingsSection',\n\tinject: ['registerSection', 'unregisterSection'],\n\n\tprops: {\n\t\tname: {\n\t\t\ttype: String,\n\t\t\trequired: true,\n\t\t},\n\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\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\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\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\tmounted() {\n\t\t// register section for navigation\n\t\tthis.registerSection(this.id, this.name, this.$slots?.icon?.())\n\t},\n\tbeforeUnmount() {\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: 20px;\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":["_sfc_main","id","newId","oldId","_hoisted_1","_hoisted_2","$options"],"mappings":";mFAkCAA,IAAA;AAAA;;EAIC,OAAA;AAAA;;;;IAMC,IAAA;AAAA;;;AAKE,eAAA,iBAAA,KAAAC,CAAA;AAAA;;;EAIH,UAAA;AAAA;AAAA,IAEC,SAAA;AACC,aAAA,sBAAA,KAAA;AAAA;;;EAIF,OAAA;AAAA,IACC,GAAAC,GAAAC,GAAA;;;;;;AAKC,WAAA,kBAAA,KAAA,EAAA;;;EAIF,UAAA;;;;EAIA,gBAAA;AACC,SAAA,kBAAA,KAAA,EAAA;AAAA;AAEF,GA7EAC,IAAA,CAAA,IAAA,GAwBMC,IAAA,EAAA,OAAA,6BAAA;;;IADC,IAAAC,EAAA;AAAA,IAAY,OAAA;AAAA;;;;EAvBnB,GAAA,GAAAF,CAAA;;;;"}

package/dist/chunks/NcAppSettingsSection-a0Un2ZRv.mjs

@@ -0,0 +1,58 @@
+import "../assets/NcAppSettingsSection-Gh575p0x.css";
+import { openBlock as r, createElementBlock as o, createElementVNode as c, toDisplayString as d, renderSlot as a, createCommentVNode as h } from "vue";
+import { _ as m } from "./_plugin-vue_export-helper-hUChTQA_.mjs";
+const p = {
+  name: "NcAppSettingsSection",
+  inject: ["registerSection", "unregisterSection"],
+  props: {
+    name: {
+      type: String,
+      required: !0
+    },
+    id: {
+      type: String,
+      required: !0,
+      validator(t) {
+        return /^[a-z0-9\-_]+$/.test(t);
+      }
+    }
+  },
+  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(t, e) {
+      var i, s;
+      this.unregisterSection(e), this.registerSection(t, this.name, (s = (i = this.$slots) == null ? void 0 : i.icon) == null ? void 0 : s.call(i));
+    },
+    name(t) {
+      var e, i;
+      this.unregisterSection(this.id), this.registerSection(this.id, t, (i = (e = this.$slots) == null ? void 0 : e.icon) == null ? void 0 : i.call(e));
+    }
+  },
+  mounted() {
+    var t, e;
+    this.registerSection(this.id, this.name, (e = (t = this.$slots) == null ? void 0 : t.icon) == null ? void 0 : e.call(t));
+  },
+  beforeUnmount() {
+    this.unregisterSection(this.id);
+  }
+}, u = ["id"], _ = { class: "app-settings-section__name" };
+function g(t, e, i, s, l, n) {
+  return r(), o("div", {
+    id: n.htmlId,
+    class: "app-settings-section"
+  }, [
+    c("h3", _, d(i.name), 1),
+    a(t.$slots, "default", {}, void 0, !0),
+    h("", !0)
+  ], 8, u);
+}
+const N = /* @__PURE__ */ m(p, [["render", g], ["__scopeId", "data-v-9bc88a91"]]);
+export {
+  N
+};

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

@@ -0,0 +1 @@
+{"version":3,"file":"NcAppSettingsSection-a0Un2ZRv.mjs","sources":["../../src/components/NcAppSettingsSection/NcAppSettingsSection.vue"],"sourcesContent":["<!--\n - @copyright Copyright (c) 2020 Marco Ambrosini <marcoambrosini@icloud.com>\n -\n - @author Marco Ambrosini <marcoambrosini@icloud.com>\n -\n - @license GNU AGPL version 3 or any later version\n -\n - This program is free software: you can redistribute it and/or modify\n - it under the terms of the GNU Affero General Public License as\n - published by the Free Software Foundation, either version 3 of the\n - License, or (at your option) any later version.\n -\n - This program is distributed in the hope that it will be useful,\n - but WITHOUT ANY WARRANTY; without even the implied warranty of\n - MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the\n - GNU Affero General Public License for more details.\n -\n - You should have received a copy of the GNU Affero General Public License\n - along with this program. If not, see <http://www.gnu.org/licenses/>.\n -\n -->\n\n<template>\n\t<div :id=\"htmlId\" class=\"app-settings-section\">\n\t\t<h3 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</div>\n</template>\n\n<script>\nexport default {\n\tname: 'NcAppSettingsSection',\n\tinject: ['registerSection', 'unregisterSection'],\n\n\tprops: {\n\t\tname: {\n\t\t\ttype: String,\n\t\t\trequired: true,\n\t\t},\n\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\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\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\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\tmounted() {\n\t\t// register section for navigation\n\t\tthis.registerSection(this.id, this.name, this.$slots?.icon?.())\n\t},\n\tbeforeUnmount() {\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: 20px;\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":["_sfc_main","id","newId","oldId","_hoisted_1","_hoisted_2","$options"],"mappings":";;;AAkCA,MAAAA,IAAA;AAAA;;EAIC,OAAA;AAAA;;;;IAMC,IAAA;AAAA;;;AAKE,eAAA,iBAAA,KAAAC,CAAA;AAAA;;;EAIH,UAAA;AAAA;AAAA,IAEC,SAAA;AACC,aAAA,sBAAA,KAAA;AAAA;;;EAIF,OAAA;AAAA,IACC,GAAAC,GAAAC,GAAA;;;;;;AAKC,WAAA,kBAAA,KAAA,EAAA;;;EAIF,UAAA;;;;EAIA,gBAAA;AACC,SAAA,kBAAA,KAAA,EAAA;AAAA;AAEF,GA7EAC,IAAA,CAAA,IAAA,GAwBMC,IAAA,EAAA,OAAA,6BAAA;;;IADC,IAAAC,EAAA;AAAA,IAAY,OAAA;AAAA;;;;EAvBnB,GAAA,GAAAF,CAAA;;;"}