@nextcloud/vue 8.0.0-beta.7 → 8.0.0-beta.9

package/dist/Components/NcAppNavigationToggle.mjs

@@ -1,4 +1,24 @@
-import { N as p } from "../chunks/NcAppNavigationToggle-86cc2542.mjs";
+import { N as p } from "../chunks/NcAppNavigationToggle-e358aa47.mjs";
+/**
+ * @copyright 2019 Christoph Wurst <christoph@winzerhof-wurst.at>
+ *
+ * @author 2019 Christoph Wurst <christoph@winzerhof-wurst.at>
+ *
+ * @license AGPL-3.0-or-later
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as
+ * published by the Free Software Foundation, either version 3 of the
+ * License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
 export {
   p as NcAppNavigationSpacer,
   p as default

package/dist/Components/NcAppNavigationToggle.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"NcAppNavigationToggle.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";"}
+{"version":3,"file":"NcAppNavigationToggle.mjs","sources":["../../src/components/NcAppNavigationToggle/index.js"],"sourcesContent":["/**\n * @copyright 2019 Christoph Wurst <christoph@winzerhof-wurst.at>\n *\n * @author 2019 Christoph Wurst <christoph@winzerhof-wurst.at>\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 */\nimport NcAppNavigationToggle from './NcAppNavigationToggle.vue'\n\nexport default NcAppNavigationToggle\nexport { NcAppNavigationToggle as NcAppNavigationSpacer }\n"],"names":[],"mappings":";AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;"}

package/dist/Components/NcAppSettingsDialog.cjs

@@ -1 +1,156 @@
-var f=require("../assets/index-3aba62de.css");const r=require("./NcModal.cjs"),c=require("../Mixins/isMobile.cjs"),d=require("../chunks/l10n-46d0c1c0.cjs"),p=require("debounce"),h=require("../chunks/_plugin-vue2_normalizer-764a4c12.cjs");const u={name:"NcAppSettingsDialog",components:{NcModal:r},mixins:[c],props:{open:{type:Boolean,required:!0},showNavigation:{type:Boolean,default:!1},container:{type:String,default:"body"},name:{type:String,default:""},additionalTrapElements:{type:Array,default:()=>[]}},emits:["update:open"],data(){return{selectedSection:"",linkClicked:!1,addedScrollListener:!1,scroller:null}},computed:{hasNavigation(){return!(this.isMobile||!this.showNavigation)},settingsNavigationAriaLabel(){return d.t("Settings navigation")}},mounted(){this.selectedSection=this.$slots.default[0].componentOptions.propsData.id},updated(){this.$refs.settingsScroller&&(this.scroller=this.$refs.settingsScroller,this.addedScrollListener||(this.scroller.addEventListener("scroll",this.handleScroll),this.addedScrollListener=!0))},methods:{getSettingsNavigation(t){const n=t.filter(e=>e.componentOptions).map(e=>{var s,a;return{id:(s=e.componentOptions.propsData)==null?void 0:s.id,name:(a=e.componentOptions.propsData)==null?void 0:a.name}}),l=t.map(e=>e.name),i=t.map(e=>e.id);return n.forEach((e,s)=>{const a=[...l],o=[...i];if(a.splice(s,1),o.splice(s,1),a.includes(e.name))throw new Error(`Duplicate section name found: ${e}. Settings navigation sections must have unique section names.`);if(o.includes(e.id))throw new Error(`Duplicate section id found: ${e}. Settings navigation sections must have unique section ids.`)}),n},handleSettingsNavigationClick(t){this.linkClicked=!0,document.getElementById("settings-section_"+t).scrollIntoView({behavior:"smooth",inline:"nearest"}),this.selectedSection=t,setTimeout(()=>{this.linkClicked=!1},1e3)},handleCloseModal(){this.$emit("update:open",!1),this.scroller.removeEventListener("scroll",this.handleScroll),this.addedScrollListener=!1,this.scroller.scrollTop=0},handleScroll(){this.linkClicked||this.unfocusNavigationItem()},unfocusNavigationItem:p(function(){this.selectedSection="",document.activeElement.className.includes("navigation-list__link")&&document.activeElement.blur()},300),handleLinkKeydown(t,n){t.code==="Enter"&&this.handleSettingsNavigationClick(n)}},render(t){const n=()=>this.hasNavigation?[t("div",{attrs:{class:"app-settings__navigation",role:"tablist","aria-label":this.settingsNavigationAriaLabel}},[t("ul",{attrs:{class:"navigation-list",role:"tablist"}},this.getSettingsNavigation(this.$slots.default).map(i=>l(i)))])]:[],l=i=>t("li",{},[t("a",{class:{"navigation-list__link":!0,"navigation-list__link--active":i.id===this.selectedSection},attrs:{role:"tab","aria-selected":i.id===this.selectedSection,tabindex:"0"},on:{click:()=>this.handleSettingsNavigationClick(i.id),keydown:()=>this.handleLinkKeydown(event,i.id)}},i.name)]);if(this.open)return t("NcModal",{class:["app-settings-modal"],attrs:{container:this.container,size:"large",additionalTrapElements:this.additionalTrapElements},on:{close:()=>{this.handleCloseModal()}}},[t("div",{attrs:{class:"app-settings"}},[t("h2",{attrs:{class:"app-settings__name"}},this.name),t("div",{attrs:{class:"app-settings__wrapper"}},[...n(),t("div",{attrs:{class:"app-settings__content"},ref:"settingsScroller"},this.$slots.default)])])])}},g=null,m=null;var v=h.normalizeComponent(u,g,m,!1,null,"0ff961d8",null,null);const S=v.exports;module.exports=S;
+var N = require("../assets/index-f85aa003.css");
+const r = require("./NcDialog.cjs"), c = require("../Mixins/isMobile.cjs"), d = require("../chunks/l10n-b1d264c7.cjs"), u = require("debounce"), p = require("../chunks/_plugin-vue2_normalizer-7f9efb60.cjs"), g = (n) => n && n.__esModule ? n : { default: n }, f = /* @__PURE__ */ g(u);
+const _ = {
+  name: "NcAppSettingsDialog",
+  components: {
+    NcDialog: r
+  },
+  mixins: [c],
+  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"],
+  data() {
+    return {
+      selectedSection: "",
+      linkClicked: !1,
+      addedScrollListener: !1,
+      scroller: null
+    };
+  },
+  computed: {
+    dialogProperties() {
+      return {
+        additionalTrapElements: this.additionalTrapElements,
+        class: "app-settings",
+        container: this.container,
+        contentClasses: "app-settings__content",
+        size: "large",
+        name: this.name,
+        navigationClasses: "app-settings__navigation"
+      };
+    },
+    hasNavigation() {
+      return !(this.isMobile || !this.showNavigation);
+    },
+    settingsNavigationAriaLabel() {
+      return d.t("Settings navigation");
+    },
+    getNavigationItems() {
+      return this.getSettingsNavigation(this.$slots.default);
+    }
+  },
+  mounted() {
+    this.selectedSection = this.$slots.default[0].componentOptions.propsData.id;
+  },
+  updated() {
+    this.$refs.settingsScroller && (this.scroller = this.$refs.settingsScroller, this.addedScrollListener || (this.scroller.addEventListener("scroll", this.handleScroll), this.addedScrollListener = !0));
+  },
+  methods: {
+    /**
+     * Builds the settings navigation menu
+     *
+     * @param {object} slots The default slots object passed from the render function.
+     * @return {Array} the navigation items
+     */
+    getSettingsNavigation(n) {
+      const e = n.filter((t) => t.componentOptions).map((t) => {
+        var i, a;
+        return {
+          id: (i = t.componentOptions.propsData) == null ? void 0 : i.id,
+          name: (a = t.componentOptions.propsData) == null ? void 0 : a.name
+        };
+      }), s = n.map((t) => t.name), o = n.map((t) => t.id);
+      return e.forEach((t, i) => {
+        const a = [...s], l = [...o];
+        if (a.splice(i, 1), l.splice(i, 1), a.includes(t.name))
+          throw new Error(`Duplicate section name found: ${t}. Settings navigation sections must have unique section names.`);
+        if (l.includes(t.id))
+          throw new Error(`Duplicate section id found: ${t}. Settings navigation sections must have unique section ids.`);
+      }), e;
+    },
+    /**
+     * Scrolls the content to the selected settings section.absolute
+     *
+     * @param {string} item the ID of the section
+     */
+    handleSettingsNavigationClick(n) {
+      this.linkClicked = !0, document.getElementById("settings-section_" + n).scrollIntoView({
+        behavior: "smooth",
+        inline: "nearest"
+      }), this.selectedSection = n, setTimeout(() => {
+        this.linkClicked = !1;
+      }, 1e3);
+    },
+    handleCloseModal(n) {
+      n || (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: f.default(function() {
+      this.selectedSection = "", document.activeElement.className.includes("navigation-list__link") && document.activeElement.blur();
+    }, 300)
+  }
+};
+var h = function() {
+  var e = this, s = e._self._c;
+  return e.open ? s("NcDialog", e._b({ on: { "update:open": e.handleCloseModal }, scopedSlots: e._u([{ key: "navigation", fn: function({ isCollapsed: o }) {
+    return [s("ul", { class: { "navigation-list": !0, "navigation-list--collapsed": o }, attrs: { "aria-label": e.settingsNavigationAriaLabel, role: "tablist" } }, e._l(e.getNavigationItems, function(t) {
+      return s("li", { key: t.id }, [s("a", { class: {
+        "navigation-list__link": !0,
+        "navigation-list__link--active": t.id === e.selectedSection
+      }, attrs: { "aria-selected": t.id === e.selectedSection, role: "tab", tabindex: "0" }, on: { click: function(i) {
+        return e.handleSettingsNavigationClick(t.id);
+      }, keydown: function(i) {
+        return !i.type.indexOf("key") && e._k(i.keyCode, "enter", 13, i.key, "Enter") ? null : e.handleSettingsNavigationClick(t.id);
+      } } }, [e._v(e._s(t.name))])]);
+    }), 0)];
+  } }], null, !1, 1246349142) }, "NcDialog", e.dialogProperties, !1), [s("div", { ref: "settingsScroller" }, [e._t("default")], 2)]) : e._e();
+}, m = [], v = /* @__PURE__ */ p.normalizeComponent(
+  _,
+  h,
+  m,
+  !1,
+  null,
+  "a4d36143",
+  null,
+  null
+);
+const S = v.exports;
+module.exports = S;

package/dist/Components/NcAppSettingsDialog.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"NcAppSettingsDialog.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":""}
+{"version":3,"file":"NcAppSettingsDialog.cjs","sources":["../../src/components/NcAppSettingsDialog/NcAppSettingsDialog.vue"],"sourcesContent":["<!--\n - @copyright Copyright (c) 2020 Marco Ambrosini <marcoambrosini@icloud.com>\n -\n - @author Marco Ambrosini <marcoambrosini@icloud.com>\n - @author Ferdinand Thiessen <opensource@fthiessen.de>\n -\n - @license AGPL-3.0-or-later\n -\n - This program is free software: you can redistribute it and/or modify\n - it under the terms of the GNU Affero General Public License as\n - published by the Free Software Foundation, either version 3 of the\n - License, or (at your option) any later version.\n -\n - This program is distributed in the hope that it will be useful,\n - but WITHOUT ANY WARRANTY; without even the implied warranty of\n - MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the\n - GNU Affero General Public License for more details.\n -\n - You should have received a copy of the GNU Affero General Public License\n - along with this program. If not, see <http://www.gnu.org/licenses/>.\n -\n -->\n<docs>\nJust nest the `AppSettingSections` component into `NcAppSettingsDialog`,\nproviding the section's name prop. You can put your settings within each\n`NcAppSettingsSection` component.\n\n```vue\n<template>\n\t<div>\n\t\t<NcButton @click=\"settingsOpen = true\">Show Settings</NcButton>\n\t\t<NcAppSettingsDialog :open.sync=\"settingsOpen\" :show-navigation=\"true\" name=\"Application settings\">\n\t\t\t<NcAppSettingsSection id=\"asci-name-1\" name=\"Example name 1\">\n\t\t\t\tSome example content\n\t\t\t</NcAppSettingsSection>\n\t\t\t<NcAppSettingsSection id=\"asci-name-2\" name=\"Example name 2\">\n\t\t\t\tSome more content\n\t\t\t</NcAppSettingsSection>\n\t\t\t<NcAppSettingsSection id=\"asci-name-3\" name=\"Example name 3\">\n\t\t\t\tSome example content\n\t\t\t</NcAppSettingsSection>\n\t\t\t<NcAppSettingsSection id=\"asci-name-4\" name=\"Example name 4\">\n\t\t\t\tSome more content\n\t\t\t</NcAppSettingsSection>\n\t\t\t<NcAppSettingsSection id=\"asci-name-5\" name=\"Example name 5\">\n\t\t\t\tSome example content\n\t\t\t</NcAppSettingsSection>\n\t\t\t<NcAppSettingsSection id=\"asci-name-6\" name=\"Example name 6\">\n\t\t\t\tSome more content\n\t\t\t</NcAppSettingsSection>\n\t\t\t<NcAppSettingsSection id=\"asci-name-7\" name=\"Example name 7\">\n\t\t\t\tSome example content\n\t\t\t</NcAppSettingsSection>\n\t\t\t<NcAppSettingsSection id=\"asci-name-8\" name=\"Example name 8\">\n\t\t\t\tSome more content\n\t\t\t</NcAppSettingsSection>\n\t\t\t<NcAppSettingsSection id=\"asci-name-9\" name=\"Example name 9\">\n\t\t\t\tSome more content\n\t\t\t</NcAppSettingsSection>\n\t\t\t<NcAppSettingsSection id=\"asci-name-10\" name=\"Example name 10\">\n\t\t\t\tSome more content\n\t\t\t</NcAppSettingsSection>\n\t\t</NcAppSettingsDialog>\n\t</div>\n</template>\n\n<script>\nexport default {\n\tdata() {\n\t\treturn {\n\t\t\tsettingsOpen: false,\n\t\t}\n\t},\n}\n</script>\n```\n</docs>\n\n<template>\n\t<NcDialog v-if=\"open\"\n\t\tv-bind=\"dialogProperties\"\n\t\t@update:open=\"handleCloseModal\">\n\t\t<template #navigation=\"{ isCollapsed }\">\n\t\t\t<ul :aria-label=\"settingsNavigationAriaLabel\"\n\t\t\t\t:class=\"{ 'navigation-list': true, 'navigation-list--collapsed': isCollapsed }\"\n\t\t\t\trole=\"tablist\">\n\t\t\t\t<li v-for=\"item in getNavigationItems\" :key=\"item.id\">\n\t\t\t\t\t<a :aria-selected=\"item.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': item.id === selectedSection,\n\t\t\t\t\t\t}\"\n\t\t\t\t\t\trole=\"tab\"\n\t\t\t\t\t\ttabindex=\"0\"\n\t\t\t\t\t\t@click=\"handleSettingsNavigationClick(item.id)\"\n\t\t\t\t\t\t@keydown.enter=\"handleSettingsNavigationClick(item.id)\">{{ item.name }}</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 isMobile from '../../mixins/isMobile/index.js'\nimport { t } from '../../l10n.js'\n\nimport debounce from 'debounce'\n\nexport default {\n\n\tname: 'NcAppSettingsDialog',\n\n\tcomponents: {\n\t\tNcDialog,\n\t},\n\n\tmixins: [isMobile],\n\n\tprops: {\n\t\t/**\n\t\t * Determines the open / closed state of the modal\n\t\t */\n\t\topen: {\n\t\t\ttype: Boolean,\n\t\t\trequired: true,\n\t\t},\n\t\t/**\n\t\t * Shows the navigation on desktop if true\n\t\t */\n\t\tshowNavigation: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/**\n\t\t * Selector for the popover container\n\t\t */\n\t\tcontainer: {\n\t\t\ttype: String,\n\t\t\tdefault: 'body',\n\t\t},\n\n\t\t/**\n\t\t * Name of the settings\n\t\t */\n\t\tname: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\n\t\t/**\n\t\t * Additional elements to add to the focus trap\n\t\t */\n\t\tadditionalTrapElements: {\n\t\t\ttype: Array,\n\t\t\tdefault: () => [],\n\t\t},\n\n\t},\n\n\temits: ['update:open'],\n\n\tdata() {\n\t\treturn {\n\t\t\tselectedSection: '',\n\t\t\tlinkClicked: false,\n\t\t\taddedScrollListener: false,\n\t\t\tscroller: null,\n\t\t}\n\t},\n\n\tcomputed: {\n\t\tdialogProperties() {\n\t\t\treturn {\n\t\t\t\tadditionalTrapElements: this.additionalTrapElements,\n\t\t\t\tclass: 'app-settings',\n\t\t\t\tcontainer: this.container,\n\t\t\t\tcontentClasses: 'app-settings__content',\n\t\t\t\tsize: 'large',\n\t\t\t\tname: this.name,\n\t\t\t\tnavigationClasses: 'app-settings__navigation',\n\t\t\t}\n\t\t},\n\n\t\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\n\t\tgetNavigationItems() {\n\t\t\treturn this.getSettingsNavigation(this.$slots.default)\n\t\t},\n\t},\n\n\tmounted() {\n\t\t// Select first settings section\n\t\tthis.selectedSection = this.$slots.default[0].componentOptions.propsData.id\n\t},\n\n\tupdated() {\n\t\t// Check that the scroller element has been mounted\n\t\tif (!this.$refs.settingsScroller) {\n\t\t\treturn\n\t\t}\n\t\t// Get the scroller element\n\t\tthis.scroller = this.$refs.settingsScroller\n\t\tif (!this.addedScrollListener) {\n\t\t\tthis.scroller.addEventListener('scroll', this.handleScroll)\n\t\t\tthis.addedScrollListener = true\n\t\t}\n\n\t},\n\n\tmethods: {\n\t\t/**\n\t\t * Builds the settings navigation menu\n\t\t *\n\t\t * @param {object} slots The default slots object passed from the render function.\n\t\t * @return {Array} the navigation items\n\t\t */\n\t\tgetSettingsNavigation(slots) {\n\t\t\t// Array of navigationitems strings\n\t\t\tconst navigationItems = slots.filter(vNode => vNode.componentOptions).map(vNode => {\n\t\t\t\treturn {\n\t\t\t\t\tid: vNode.componentOptions.propsData?.id,\n\t\t\t\t\tname: vNode.componentOptions.propsData?.name,\n\t\t\t\t}\n\t\t\t})\n\t\t\tconst navigationNames = slots.map(item => item.name)\n\t\t\tconst navigationIds = slots.map(item => item.id)\n\n\t\t\t// Check for the uniqueness of section names\n\t\t\tnavigationItems.forEach((element, index) => {\n\t\t\t\tconst newNamesArray = [...navigationNames]\n\t\t\t\tconst newIdArray = [...navigationIds]\n\t\t\t\tnewNamesArray.splice(index, 1)\n\t\t\t\tnewIdArray.splice(index, 1)\n\t\t\t\tif (newNamesArray.includes(element.name)) {\n\t\t\t\t\tthrow new Error(`Duplicate section name found: ${element}. Settings navigation sections must have unique section names.`)\n\t\t\t\t}\n\t\t\t\tif (newIdArray.includes(element.id)) {\n\t\t\t\t\tthrow new Error(`Duplicate section id found: ${element}. Settings navigation sections must have unique section ids.`)\n\t\t\t\t}\n\t\t\t})\n\t\t\treturn navigationItems\n\t\t},\n\n\t\t/**\n\t\t * Scrolls the content to the selected settings section.absolute\n\t\t *\n\t\t * @param {string} item the ID of the section\n\t\t */\n\t\thandleSettingsNavigationClick(item) {\n\t\t\tthis.linkClicked = true\n\t\t\tdocument.getElementById('settings-section_' + item).scrollIntoView({\n\t\t\t\tbehavior: 'smooth',\n\t\t\t\tinline: 'nearest',\n\t\t\t})\n\t\t\tthis.selectedSection = item\n\t\t\tsetTimeout(() => {\n\t\t\t\tthis.linkClicked = false\n\t\t\t}, 1000)\n\t\t},\n\n\t\thandleCloseModal(isOpen) {\n\t\t\tif (isOpen) {\n\t\t\t\treturn\n\t\t\t}\n\n\t\t\tthis.$emit('update:open', false)\n\t\t\t// Remove scroll listener each time the modal is closed\n\t\t\tthis.scroller.removeEventListener('scroll', this.handleScroll)\n\t\t\tthis.addedScrollListener = false\n\t\t\tthis.scroller.scrollTop = 0\n\t\t},\n\n\t\thandleScroll() {\n\t\t\tif (!this.linkClicked) {\n\t\t\t\tthis.unfocusNavigationItem()\n\t\t\t}\n\t\t},\n\n\t\t// Remove selected section once the user starts scrolling\n\t\tunfocusNavigationItem: debounce(function() {\n\t\t\tthis.selectedSection = ''\n\t\t\tif (document.activeElement.className.includes('navigation-list__link')) {\n\t\t\t\tdocument.activeElement.blur()\n\t\t\t}\n\t\t}, 300),\n\t},\n}\n\n</script>\n\n<style lang=\"scss\" scoped>\n.app-settings {\n\t&__navigation {\n\t\tmin-width: 200px;\n\t\tmargin-right: 20px;\n\t\toverflow-x: hidden;\n\t\toverflow-y: auto;\n\t\tposition: relative;\n\t\theight: 100%;\n\t}\n\t&__content {\n\t\tmax-width: 100vw;\n\t\toverflow-y: auto;\n\t\toverflow-x: hidden;\n\t\tpadding: 24px;\n\t\twidth: 100%;\n\t}\n}\n\n.navigation-list {\n\theight: 100%;\n\tbox-sizing: border-box;\n\toverflow-y: auto;\n\tpadding: 12px;\n\n\t&--collapsed {\n\t\tdisplay: flex;\n\t\tflex-direction: row;\n\t\tgap: 6px;\n\t}\n\n\t&__link {\n\t\tdisplay: block;\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\t\t&:hover,\n\t\t&:focus {\n\t\t\tbackground-color: var(--color-background-hover);\n\t\t}\n\t\t&--active {\n\t\t\tbackground-color: var(--color-primary-element-light) !important;\n\t\t}\n\t}\n}\n\n</style>\n"],"names":["_sfc_main","Components_NcDialog","Mixins_isMobile","l10n","slots","navigationItems","vNode","_a","_b","navigationNames","item","navigationIds","element","index","newNamesArray","newIdArray","isOpen","debounce__default"],"mappings":"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"}

package/dist/Components/NcAppSettingsDialog.mjs

@@ -1,52 +1,162 @@
-import "../assets/index-3aba62de.css";
-import r from "./NcModal.mjs";
-import d from "../Mixins/isMobile.mjs";
-import { t as c } from "../chunks/l10n-9a5a6afc.mjs";
-import p from "debounce";
-import { n as h } from "../chunks/_plugin-vue2_normalizer-5b4c43a4.mjs";
-const m = { name: "NcAppSettingsDialog", components: { NcModal: r }, mixins: [d], props: { open: { type: Boolean, required: !0 }, showNavigation: { type: Boolean, default: !1 }, container: { type: String, default: "body" }, name: { type: String, default: "" }, additionalTrapElements: { type: Array, default: () => [] } }, emits: ["update:open"], data() {
-  return { selectedSection: "", linkClicked: !1, addedScrollListener: !1, scroller: null };
-}, computed: { hasNavigation() {
-  return !(this.isMobile || !this.showNavigation);
-}, settingsNavigationAriaLabel() {
-  return c("Settings navigation");
-} }, mounted() {
-  this.selectedSection = this.$slots.default[0].componentOptions.propsData.id;
-}, updated() {
-  this.$refs.settingsScroller && (this.scroller = this.$refs.settingsScroller, this.addedScrollListener || (this.scroller.addEventListener("scroll", this.handleScroll), this.addedScrollListener = !0));
-}, methods: { getSettingsNavigation(t) {
-  const n = t.filter((e) => e.componentOptions).map((e) => {
-    var s, a;
-    return { id: (s = e.componentOptions.propsData) == null ? void 0 : s.id, name: (a = e.componentOptions.propsData) == null ? void 0 : a.name };
-  }), o = t.map((e) => e.name), i = t.map((e) => e.id);
-  return n.forEach((e, s) => {
-    const a = [...o], l = [...i];
-    if (a.splice(s, 1), l.splice(s, 1), a.includes(e.name))
-      throw new Error(`Duplicate section name found: ${e}. Settings navigation sections must have unique section names.`);
-    if (l.includes(e.id))
-      throw new Error(`Duplicate section id found: ${e}. Settings navigation sections must have unique section ids.`);
-  }), n;
-}, handleSettingsNavigationClick(t) {
-  this.linkClicked = !0, document.getElementById("settings-section_" + t).scrollIntoView({ behavior: "smooth", inline: "nearest" }), this.selectedSection = t, setTimeout(() => {
-    this.linkClicked = !1;
-  }, 1e3);
-}, handleCloseModal() {
-  this.$emit("update:open", !1), this.scroller.removeEventListener("scroll", this.handleScroll), this.addedScrollListener = !1, this.scroller.scrollTop = 0;
-}, handleScroll() {
-  this.linkClicked || this.unfocusNavigationItem();
-}, unfocusNavigationItem: p(function() {
-  this.selectedSection = "", document.activeElement.className.includes("navigation-list__link") && document.activeElement.blur();
-}, 300), handleLinkKeydown(t, n) {
-  t.code === "Enter" && this.handleSettingsNavigationClick(n);
-} }, render(t) {
-  const n = () => this.hasNavigation ? [t("div", { attrs: { class: "app-settings__navigation", role: "tablist", "aria-label": this.settingsNavigationAriaLabel } }, [t("ul", { attrs: { class: "navigation-list", role: "tablist" } }, this.getSettingsNavigation(this.$slots.default).map((i) => o(i)))])] : [], o = (i) => t("li", {}, [t("a", { class: { "navigation-list__link": !0, "navigation-list__link--active": i.id === this.selectedSection }, attrs: { role: "tab", "aria-selected": i.id === this.selectedSection, tabindex: "0" }, on: { click: () => this.handleSettingsNavigationClick(i.id), keydown: () => this.handleLinkKeydown(event, i.id) } }, i.name)]);
-  if (this.open)
-    return t("NcModal", { class: ["app-settings-modal"], attrs: { container: this.container, size: "large", additionalTrapElements: this.additionalTrapElements }, on: { close: () => {
-      this.handleCloseModal();
-    } } }, [t("div", { attrs: { class: "app-settings" } }, [t("h2", { attrs: { class: "app-settings__name" } }, this.name), t("div", { attrs: { class: "app-settings__wrapper" } }, [...n(), t("div", { attrs: { class: "app-settings__content" }, ref: "settingsScroller" }, this.$slots.default)])])]);
-} }, g = null, u = null;
-var v = h(m, g, u, !1, null, "0ff961d8", null, null);
-const E = v.exports;
+import "../assets/index-f85aa003.css";
+import r from "./NcDialog.mjs";
+import c from "../Mixins/isMobile.mjs";
+import { t as d } from "../chunks/l10n-05a09c66.mjs";
+import u from "debounce";
+import { n as p } from "../chunks/_plugin-vue2_normalizer-71e2aa87.mjs";
+const g = {
+  name: "NcAppSettingsDialog",
+  components: {
+    NcDialog: r
+  },
+  mixins: [c],
+  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"],
+  data() {
+    return {
+      selectedSection: "",
+      linkClicked: !1,
+      addedScrollListener: !1,
+      scroller: null
+    };
+  },
+  computed: {
+    dialogProperties() {
+      return {
+        additionalTrapElements: this.additionalTrapElements,
+        class: "app-settings",
+        container: this.container,
+        contentClasses: "app-settings__content",
+        size: "large",
+        name: this.name,
+        navigationClasses: "app-settings__navigation"
+      };
+    },
+    hasNavigation() {
+      return !(this.isMobile || !this.showNavigation);
+    },
+    settingsNavigationAriaLabel() {
+      return d("Settings navigation");
+    },
+    getNavigationItems() {
+      return this.getSettingsNavigation(this.$slots.default);
+    }
+  },
+  mounted() {
+    this.selectedSection = this.$slots.default[0].componentOptions.propsData.id;
+  },
+  updated() {
+    this.$refs.settingsScroller && (this.scroller = this.$refs.settingsScroller, this.addedScrollListener || (this.scroller.addEventListener("scroll", this.handleScroll), this.addedScrollListener = !0));
+  },
+  methods: {
+    /**
+     * Builds the settings navigation menu
+     *
+     * @param {object} slots The default slots object passed from the render function.
+     * @return {Array} the navigation items
+     */
+    getSettingsNavigation(n) {
+      const e = n.filter((t) => t.componentOptions).map((t) => {
+        var i, s;
+        return {
+          id: (i = t.componentOptions.propsData) == null ? void 0 : i.id,
+          name: (s = t.componentOptions.propsData) == null ? void 0 : s.name
+        };
+      }), a = n.map((t) => t.name), o = n.map((t) => t.id);
+      return e.forEach((t, i) => {
+        const s = [...a], l = [...o];
+        if (s.splice(i, 1), l.splice(i, 1), s.includes(t.name))
+          throw new Error(`Duplicate section name found: ${t}. Settings navigation sections must have unique section names.`);
+        if (l.includes(t.id))
+          throw new Error(`Duplicate section id found: ${t}. Settings navigation sections must have unique section ids.`);
+      }), e;
+    },
+    /**
+     * Scrolls the content to the selected settings section.absolute
+     *
+     * @param {string} item the ID of the section
+     */
+    handleSettingsNavigationClick(n) {
+      this.linkClicked = !0, document.getElementById("settings-section_" + n).scrollIntoView({
+        behavior: "smooth",
+        inline: "nearest"
+      }), this.selectedSection = n, setTimeout(() => {
+        this.linkClicked = !1;
+      }, 1e3);
+    },
+    handleCloseModal(n) {
+      n || (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: u(function() {
+      this.selectedSection = "", document.activeElement.className.includes("navigation-list__link") && document.activeElement.blur();
+    }, 300)
+  }
+};
+var m = function() {
+  var e = this, a = e._self._c;
+  return e.open ? a("NcDialog", e._b({ on: { "update:open": e.handleCloseModal }, scopedSlots: e._u([{ key: "navigation", fn: function({ isCollapsed: o }) {
+    return [a("ul", { class: { "navigation-list": !0, "navigation-list--collapsed": o }, attrs: { "aria-label": e.settingsNavigationAriaLabel, role: "tablist" } }, e._l(e.getNavigationItems, function(t) {
+      return a("li", { key: t.id }, [a("a", { class: {
+        "navigation-list__link": !0,
+        "navigation-list__link--active": t.id === e.selectedSection
+      }, attrs: { "aria-selected": t.id === e.selectedSection, role: "tab", tabindex: "0" }, on: { click: function(i) {
+        return e.handleSettingsNavigationClick(t.id);
+      }, keydown: function(i) {
+        return !i.type.indexOf("key") && e._k(i.keyCode, "enter", 13, i.key, "Enter") ? null : e.handleSettingsNavigationClick(t.id);
+      } } }, [e._v(e._s(t.name))])]);
+    }), 0)];
+  } }], null, !1, 1246349142) }, "NcDialog", e.dialogProperties, !1), [a("div", { ref: "settingsScroller" }, [e._t("default")], 2)]) : e._e();
+}, f = [], h = /* @__PURE__ */ p(
+  g,
+  m,
+  f,
+  !1,
+  null,
+  "a4d36143",
+  null,
+  null
+);
+const b = h.exports;
 export {
-  E as default
+  b as default
 };

package/dist/Components/NcAppSettingsDialog.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"NcAppSettingsDialog.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"NcAppSettingsDialog.mjs","sources":["../../src/components/NcAppSettingsDialog/NcAppSettingsDialog.vue"],"sourcesContent":["<!--\n - @copyright Copyright (c) 2020 Marco Ambrosini <marcoambrosini@icloud.com>\n -\n - @author Marco Ambrosini <marcoambrosini@icloud.com>\n - @author Ferdinand Thiessen <opensource@fthiessen.de>\n -\n - @license AGPL-3.0-or-later\n -\n - This program is free software: you can redistribute it and/or modify\n - it under the terms of the GNU Affero General Public License as\n - published by the Free Software Foundation, either version 3 of the\n - License, or (at your option) any later version.\n -\n - This program is distributed in the hope that it will be useful,\n - but WITHOUT ANY WARRANTY; without even the implied warranty of\n - MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the\n - GNU Affero General Public License for more details.\n -\n - You should have received a copy of the GNU Affero General Public License\n - along with this program. If not, see <http://www.gnu.org/licenses/>.\n -\n -->\n<docs>\nJust nest the `AppSettingSections` component into `NcAppSettingsDialog`,\nproviding the section's name prop. You can put your settings within each\n`NcAppSettingsSection` component.\n\n```vue\n<template>\n\t<div>\n\t\t<NcButton @click=\"settingsOpen = true\">Show Settings</NcButton>\n\t\t<NcAppSettingsDialog :open.sync=\"settingsOpen\" :show-navigation=\"true\" name=\"Application settings\">\n\t\t\t<NcAppSettingsSection id=\"asci-name-1\" name=\"Example name 1\">\n\t\t\t\tSome example content\n\t\t\t</NcAppSettingsSection>\n\t\t\t<NcAppSettingsSection id=\"asci-name-2\" name=\"Example name 2\">\n\t\t\t\tSome more content\n\t\t\t</NcAppSettingsSection>\n\t\t\t<NcAppSettingsSection id=\"asci-name-3\" name=\"Example name 3\">\n\t\t\t\tSome example content\n\t\t\t</NcAppSettingsSection>\n\t\t\t<NcAppSettingsSection id=\"asci-name-4\" name=\"Example name 4\">\n\t\t\t\tSome more content\n\t\t\t</NcAppSettingsSection>\n\t\t\t<NcAppSettingsSection id=\"asci-name-5\" name=\"Example name 5\">\n\t\t\t\tSome example content\n\t\t\t</NcAppSettingsSection>\n\t\t\t<NcAppSettingsSection id=\"asci-name-6\" name=\"Example name 6\">\n\t\t\t\tSome more content\n\t\t\t</NcAppSettingsSection>\n\t\t\t<NcAppSettingsSection id=\"asci-name-7\" name=\"Example name 7\">\n\t\t\t\tSome example content\n\t\t\t</NcAppSettingsSection>\n\t\t\t<NcAppSettingsSection id=\"asci-name-8\" name=\"Example name 8\">\n\t\t\t\tSome more content\n\t\t\t</NcAppSettingsSection>\n\t\t\t<NcAppSettingsSection id=\"asci-name-9\" name=\"Example name 9\">\n\t\t\t\tSome more content\n\t\t\t</NcAppSettingsSection>\n\t\t\t<NcAppSettingsSection id=\"asci-name-10\" name=\"Example name 10\">\n\t\t\t\tSome more content\n\t\t\t</NcAppSettingsSection>\n\t\t</NcAppSettingsDialog>\n\t</div>\n</template>\n\n<script>\nexport default {\n\tdata() {\n\t\treturn {\n\t\t\tsettingsOpen: false,\n\t\t}\n\t},\n}\n</script>\n```\n</docs>\n\n<template>\n\t<NcDialog v-if=\"open\"\n\t\tv-bind=\"dialogProperties\"\n\t\t@update:open=\"handleCloseModal\">\n\t\t<template #navigation=\"{ isCollapsed }\">\n\t\t\t<ul :aria-label=\"settingsNavigationAriaLabel\"\n\t\t\t\t:class=\"{ 'navigation-list': true, 'navigation-list--collapsed': isCollapsed }\"\n\t\t\t\trole=\"tablist\">\n\t\t\t\t<li v-for=\"item in getNavigationItems\" :key=\"item.id\">\n\t\t\t\t\t<a :aria-selected=\"item.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': item.id === selectedSection,\n\t\t\t\t\t\t}\"\n\t\t\t\t\t\trole=\"tab\"\n\t\t\t\t\t\ttabindex=\"0\"\n\t\t\t\t\t\t@click=\"handleSettingsNavigationClick(item.id)\"\n\t\t\t\t\t\t@keydown.enter=\"handleSettingsNavigationClick(item.id)\">{{ item.name }}</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 isMobile from '../../mixins/isMobile/index.js'\nimport { t } from '../../l10n.js'\n\nimport debounce from 'debounce'\n\nexport default {\n\n\tname: 'NcAppSettingsDialog',\n\n\tcomponents: {\n\t\tNcDialog,\n\t},\n\n\tmixins: [isMobile],\n\n\tprops: {\n\t\t/**\n\t\t * Determines the open / closed state of the modal\n\t\t */\n\t\topen: {\n\t\t\ttype: Boolean,\n\t\t\trequired: true,\n\t\t},\n\t\t/**\n\t\t * Shows the navigation on desktop if true\n\t\t */\n\t\tshowNavigation: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/**\n\t\t * Selector for the popover container\n\t\t */\n\t\tcontainer: {\n\t\t\ttype: String,\n\t\t\tdefault: 'body',\n\t\t},\n\n\t\t/**\n\t\t * Name of the settings\n\t\t */\n\t\tname: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\n\t\t/**\n\t\t * Additional elements to add to the focus trap\n\t\t */\n\t\tadditionalTrapElements: {\n\t\t\ttype: Array,\n\t\t\tdefault: () => [],\n\t\t},\n\n\t},\n\n\temits: ['update:open'],\n\n\tdata() {\n\t\treturn {\n\t\t\tselectedSection: '',\n\t\t\tlinkClicked: false,\n\t\t\taddedScrollListener: false,\n\t\t\tscroller: null,\n\t\t}\n\t},\n\n\tcomputed: {\n\t\tdialogProperties() {\n\t\t\treturn {\n\t\t\t\tadditionalTrapElements: this.additionalTrapElements,\n\t\t\t\tclass: 'app-settings',\n\t\t\t\tcontainer: this.container,\n\t\t\t\tcontentClasses: 'app-settings__content',\n\t\t\t\tsize: 'large',\n\t\t\t\tname: this.name,\n\t\t\t\tnavigationClasses: 'app-settings__navigation',\n\t\t\t}\n\t\t},\n\n\t\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\n\t\tgetNavigationItems() {\n\t\t\treturn this.getSettingsNavigation(this.$slots.default)\n\t\t},\n\t},\n\n\tmounted() {\n\t\t// Select first settings section\n\t\tthis.selectedSection = this.$slots.default[0].componentOptions.propsData.id\n\t},\n\n\tupdated() {\n\t\t// Check that the scroller element has been mounted\n\t\tif (!this.$refs.settingsScroller) {\n\t\t\treturn\n\t\t}\n\t\t// Get the scroller element\n\t\tthis.scroller = this.$refs.settingsScroller\n\t\tif (!this.addedScrollListener) {\n\t\t\tthis.scroller.addEventListener('scroll', this.handleScroll)\n\t\t\tthis.addedScrollListener = true\n\t\t}\n\n\t},\n\n\tmethods: {\n\t\t/**\n\t\t * Builds the settings navigation menu\n\t\t *\n\t\t * @param {object} slots The default slots object passed from the render function.\n\t\t * @return {Array} the navigation items\n\t\t */\n\t\tgetSettingsNavigation(slots) {\n\t\t\t// Array of navigationitems strings\n\t\t\tconst navigationItems = slots.filter(vNode => vNode.componentOptions).map(vNode => {\n\t\t\t\treturn {\n\t\t\t\t\tid: vNode.componentOptions.propsData?.id,\n\t\t\t\t\tname: vNode.componentOptions.propsData?.name,\n\t\t\t\t}\n\t\t\t})\n\t\t\tconst navigationNames = slots.map(item => item.name)\n\t\t\tconst navigationIds = slots.map(item => item.id)\n\n\t\t\t// Check for the uniqueness of section names\n\t\t\tnavigationItems.forEach((element, index) => {\n\t\t\t\tconst newNamesArray = [...navigationNames]\n\t\t\t\tconst newIdArray = [...navigationIds]\n\t\t\t\tnewNamesArray.splice(index, 1)\n\t\t\t\tnewIdArray.splice(index, 1)\n\t\t\t\tif (newNamesArray.includes(element.name)) {\n\t\t\t\t\tthrow new Error(`Duplicate section name found: ${element}. Settings navigation sections must have unique section names.`)\n\t\t\t\t}\n\t\t\t\tif (newIdArray.includes(element.id)) {\n\t\t\t\t\tthrow new Error(`Duplicate section id found: ${element}. Settings navigation sections must have unique section ids.`)\n\t\t\t\t}\n\t\t\t})\n\t\t\treturn navigationItems\n\t\t},\n\n\t\t/**\n\t\t * Scrolls the content to the selected settings section.absolute\n\t\t *\n\t\t * @param {string} item the ID of the section\n\t\t */\n\t\thandleSettingsNavigationClick(item) {\n\t\t\tthis.linkClicked = true\n\t\t\tdocument.getElementById('settings-section_' + item).scrollIntoView({\n\t\t\t\tbehavior: 'smooth',\n\t\t\t\tinline: 'nearest',\n\t\t\t})\n\t\t\tthis.selectedSection = item\n\t\t\tsetTimeout(() => {\n\t\t\t\tthis.linkClicked = false\n\t\t\t}, 1000)\n\t\t},\n\n\t\thandleCloseModal(isOpen) {\n\t\t\tif (isOpen) {\n\t\t\t\treturn\n\t\t\t}\n\n\t\t\tthis.$emit('update:open', false)\n\t\t\t// Remove scroll listener each time the modal is closed\n\t\t\tthis.scroller.removeEventListener('scroll', this.handleScroll)\n\t\t\tthis.addedScrollListener = false\n\t\t\tthis.scroller.scrollTop = 0\n\t\t},\n\n\t\thandleScroll() {\n\t\t\tif (!this.linkClicked) {\n\t\t\t\tthis.unfocusNavigationItem()\n\t\t\t}\n\t\t},\n\n\t\t// Remove selected section once the user starts scrolling\n\t\tunfocusNavigationItem: debounce(function() {\n\t\t\tthis.selectedSection = ''\n\t\t\tif (document.activeElement.className.includes('navigation-list__link')) {\n\t\t\t\tdocument.activeElement.blur()\n\t\t\t}\n\t\t}, 300),\n\t},\n}\n\n</script>\n\n<style lang=\"scss\" scoped>\n.app-settings {\n\t&__navigation {\n\t\tmin-width: 200px;\n\t\tmargin-right: 20px;\n\t\toverflow-x: hidden;\n\t\toverflow-y: auto;\n\t\tposition: relative;\n\t\theight: 100%;\n\t}\n\t&__content {\n\t\tmax-width: 100vw;\n\t\toverflow-y: auto;\n\t\toverflow-x: hidden;\n\t\tpadding: 24px;\n\t\twidth: 100%;\n\t}\n}\n\n.navigation-list {\n\theight: 100%;\n\tbox-sizing: border-box;\n\toverflow-y: auto;\n\tpadding: 12px;\n\n\t&--collapsed {\n\t\tdisplay: flex;\n\t\tflex-direction: row;\n\t\tgap: 6px;\n\t}\n\n\t&__link {\n\t\tdisplay: block;\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\t\t&:hover,\n\t\t&:focus {\n\t\t\tbackground-color: var(--color-background-hover);\n\t\t}\n\t\t&--active {\n\t\t\tbackground-color: var(--color-primary-element-light) !important;\n\t\t}\n\t}\n}\n\n</style>\n"],"names":["_sfc_main","NcDialog","isMobile","t","slots","navigationItems","vNode","_a","_b","navigationNames","item","navigationIds","element","index","newNamesArray","newIdArray","isOpen","debounce"],"mappings":"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"}

package/dist/Components/NcAppSettingsSection.cjs

@@ -1 +1,39 @@
-var p=require("../assets/index-bf46edd7.css");const s=require("../chunks/_plugin-vue2_normalizer-764a4c12.cjs");const n={name:"NcAppSettingsSection",props:{name:{type:String,required:!0},id:{type:String,required:!0,validator(t){return/^[a-z0-9\-_]+$/.test(t)}}},computed:{htmlId(){return"settings-section_"+this.id}}};var i=function(){var t=this,e=t._self._c;return e("div",{staticClass:"app-settings-section",attrs:{id:t.htmlId}},[e("h3",{staticClass:"app-settings-section__name"},[t._v(" "+t._s(t.name)+" ")]),t._t("default")],2)},r=[],a=s.normalizeComponent(n,i,r,!1,null,"a8066fd5",null,null);const o=a.exports;module.exports=o;
+var o = require("../assets/index-1151d229.css");
+const s = require("../chunks/_plugin-vue2_normalizer-7f9efb60.cjs");
+const i = {
+  name: "NcAppSettingsSection",
+  props: {
+    name: {
+      type: String,
+      required: !0
+    },
+    id: {
+      type: String,
+      required: !0,
+      validator(e) {
+        return /^[a-z0-9\-_]+$/.test(e);
+      }
+    }
+  },
+  computed: {
+    // generate an id for each settingssection based on the name without whitespaces
+    htmlId() {
+      return "settings-section_" + this.id;
+    }
+  }
+};
+var r = function() {
+  var t = this, n = t._self._c;
+  return n("div", { staticClass: "app-settings-section", attrs: { id: t.htmlId } }, [n("h3", { staticClass: "app-settings-section__name" }, [t._v(" " + t._s(t.name) + " ")]), t._t("default")], 2);
+}, _ = [], a = /* @__PURE__ */ s.normalizeComponent(
+  i,
+  r,
+  _,
+  !1,
+  null,
+  "a8066fd5",
+  null,
+  null
+);
+const c = a.exports;
+module.exports = c;

package/dist/Components/NcAppSettingsSection.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"NcAppSettingsSection.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":""}
+{"version":3,"file":"NcAppSettingsSection.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</div>\n</template>\n\n<script>\nexport default {\n\tname: 'NcAppSettingsSection',\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}\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"],"mappings":";;AAgCA,MAAAA,IAAA;AAAA,EACA,MAAA;AAAA,EAEA,OAAA;AAAA,IACA,MAAA;AAAA,MACA,MAAA;AAAA,MACA,UAAA;AAAA,IACA;AAAA,IAEA,IAAA;AAAA,MACA,MAAA;AAAA,MACA,UAAA;AAAA,MACA,UAAAC,GAAA;AAEA,eAAA,iBAAA,KAAAA,CAAA;AAAA,MACA;AAAA,IACA;AAAA,EACA;AAAA,EACA,UAAA;AAAA;AAAA,IAEA,SAAA;AACA,aAAA,sBAAA,KAAA;AAAA,IACA;AAAA,EACA;AACA;;;;;;;;;;;;;;;;"}

package/dist/Components/NcAppSettingsSection.mjs

@@ -1,15 +1,41 @@
-import "../assets/index-bf46edd7.css";
-import { n as e } from "../chunks/_plugin-vue2_normalizer-5b4c43a4.mjs";
-const n = { name: "NcAppSettingsSection", props: { name: { type: String, required: !0 }, id: { type: String, required: !0, validator(t) {
-  return /^[a-z0-9\-_]+$/.test(t);
-} } }, computed: { htmlId() {
-  return "settings-section_" + this.id;
-} } };
-var i = function() {
-  var t = this, s = t._self._c;
-  return s("div", { staticClass: "app-settings-section", attrs: { id: t.htmlId } }, [s("h3", { staticClass: "app-settings-section__name" }, [t._v(" " + t._s(t.name) + " ")]), t._t("default")], 2);
-}, r = [], a = e(n, i, r, !1, null, "a8066fd5", null, null);
-const l = a.exports;
+import "../assets/index-1151d229.css";
+import { n as s } from "../chunks/_plugin-vue2_normalizer-71e2aa87.mjs";
+const i = {
+  name: "NcAppSettingsSection",
+  props: {
+    name: {
+      type: String,
+      required: !0
+    },
+    id: {
+      type: String,
+      required: !0,
+      validator(e) {
+        return /^[a-z0-9\-_]+$/.test(e);
+      }
+    }
+  },
+  computed: {
+    // generate an id for each settingssection based on the name without whitespaces
+    htmlId() {
+      return "settings-section_" + this.id;
+    }
+  }
+};
+var r = function() {
+  var t = this, n = t._self._c;
+  return n("div", { staticClass: "app-settings-section", attrs: { id: t.htmlId } }, [n("h3", { staticClass: "app-settings-section__name" }, [t._v(" " + t._s(t.name) + " ")]), t._t("default")], 2);
+}, _ = [], a = /* @__PURE__ */ s(
+  i,
+  r,
+  _,
+  !1,
+  null,
+  "a8066fd5",
+  null,
+  null
+);
+const p = a.exports;
 export {
-  l as default
+  p as default
 };

package/dist/Components/NcAppSettingsSection.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"NcAppSettingsSection.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;"}
+{"version":3,"file":"NcAppSettingsSection.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</div>\n</template>\n\n<script>\nexport default {\n\tname: 'NcAppSettingsSection',\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}\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"],"mappings":";;AAgCA,MAAAA,IAAA;AAAA,EACA,MAAA;AAAA,EAEA,OAAA;AAAA,IACA,MAAA;AAAA,MACA,MAAA;AAAA,MACA,UAAA;AAAA,IACA;AAAA,IAEA,IAAA;AAAA,MACA,MAAA;AAAA,MACA,UAAA;AAAA,MACA,UAAAC,GAAA;AAEA,eAAA,iBAAA,KAAAA,CAAA;AAAA,MACA;AAAA,IACA;AAAA,EACA;AAAA,EACA,UAAA;AAAA;AAAA,IAEA,SAAA;AACA,aAAA,sBAAA,KAAA;AAAA,IACA;AAAA,EACA;AACA;;;;;;;;;;;;;;;"}