@nextcloud/vue 9.0.0-rc.5 → 9.0.0-rc.7

package/dist/chunks/{NcAppNavigationNew-CLbVKk5X.mjs → NcAppNavigationNew-Y50s6jTC.mjs}

@@ -1,5 +1,5 @@
-import '../assets/NcAppNavigationNew-Ba3wWpcY.css';
-import { N as NcButton } from "./NcButton-Df1eAyJ3.mjs";
+import '../assets/NcAppNavigationNew-Bn8zj5lM.css';
+import { N as NcButton } from "./NcButton-DkC5k3Lb.mjs";
 import { resolveComponent, createElementBlock, openBlock, createVNode, withCtx, createTextVNode, toDisplayString, renderSlot } from "vue";
 import { _ as _export_sfc } from "./_plugin-vue_export-helper-1tPrXgE0.mjs";
 const _sfc_main = {
@@ -7,22 +7,32 @@ const _sfc_main = {
     NcButton
   },
   props: {
+    /**
+     * Id of the button
+     */
     buttonId: {
       type: String,
       required: false,
       default: ""
     },
+    /**
+     * Disabled state of the button
+     */
     disabled: {
       type: Boolean,
       required: false,
       default: false
     },
+    /**
+     * Main text of the button
+     */
     text: {
       type: String,
       required: true
     },
     /**
      * The color variant to use.
+     *
      * @default 'primary'
      */
     variant: {
@@ -55,8 +65,8 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
     }, 8, ["id", "disabled", "variant"])
   ]);
 }
-const NcAppNavigationNew = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__scopeId", "data-v-08119e68"]]);
+const NcAppNavigationNew = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__scopeId", "data-v-0ba6c9df"]]);
 export {
   NcAppNavigationNew as N
 };
-//# sourceMappingURL=NcAppNavigationNew-CLbVKk5X.mjs.map
+//# sourceMappingURL=NcAppNavigationNew-Y50s6jTC.mjs.map

package/dist/chunks/NcAppNavigationNew-Y50s6jTC.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"NcAppNavigationNew-Y50s6jTC.mjs","sources":["../../src/components/NcAppNavigationNew/NcAppNavigationNew.vue"],"sourcesContent":["<!--\n  - SPDX-FileCopyrightText: 2018 Nextcloud GmbH and Nextcloud contributors\n  - SPDX-License-Identifier: AGPL-3.0-or-later\n-->\n\n <docs>\n### Usage\n\n ```\n <template>\n\t<NcAppNavigationNew text=\"New Element\">\n\t\t<template #icon>\n\t\t\t<Plus :size=\"20\" />\n\t\t</template>\n\t</NcAppNavigationNew>\n </template>\n <script>\n import Plus from 'vue-material-design-icons/Plus'\n\n export default {\n\tcomponents: {\n\t\tPlus,\n\t},\n }\n </script>\n ```\n </docs>\n\n<template>\n\t<div class=\"app-navigation-new\">\n\t\t<NcButton\n\t\t\t:id=\"buttonId\"\n\t\t\t:disabled\n\t\t\t:variant\n\t\t\t@click=\"$emit('click')\">\n\t\t\t<template #icon>\n\t\t\t\t<slot name=\"icon\" />\n\t\t\t</template>\n\t\t\t{{ text }}\n\t\t</NcButton>\n\t</div>\n</template>\n\n<script>\nimport NcButton from '../NcButton/index.ts'\n\nexport default {\n\tcomponents: {\n\t\tNcButton,\n\t},\n\n\tprops: {\n\t\t/**\n\t\t * Id of the button\n\t\t */\n\t\tbuttonId: {\n\t\t\ttype: String,\n\t\t\trequired: false,\n\t\t\tdefault: '',\n\t\t},\n\n\t\t/**\n\t\t * Disabled state of the button\n\t\t */\n\t\tdisabled: {\n\t\t\ttype: Boolean,\n\t\t\trequired: false,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/**\n\t\t * Main text of the button\n\t\t */\n\t\ttext: {\n\t\t\ttype: String,\n\t\t\trequired: true,\n\t\t},\n\n\t\t/**\n\t\t * The color variant to use.\n\t\t *\n\t\t * @default 'primary'\n\t\t */\n\t\tvariant: {\n\t\t\ttype: String,\n\t\t\tdefault: 'primary',\n\t\t\tvalidator(value) {\n\t\t\t\treturn ['primary', 'secondary', 'tertiary'].indexOf(value) !== -1\n\t\t\t},\n\t\t},\n\t},\n\n\temits: ['click'],\n}\n</script>\n\n<style lang=\"scss\" scoped>\n/* 'New' button */\n.app-navigation-new {\n\tdisplay: block;\n\tpadding: calc(var(--default-grid-baseline, 4px) * 2);\n\tbutton {\n\t\twidth: 100%;\n\t}\n}\n</style>\n"],"names":["_openBlock","_createElementBlock","_createVNode","_renderSlot","_createTextVNode"],"mappings":";;;AA8CA,MAAK,YAAU;AAAA,EACd,YAAY;AAAA,IACX;AAAA;EAGD,OAAO;AAAA;AAAA;AAAA;AAAA,IAIN,UAAU;AAAA,MACT,MAAM;AAAA,MACN,UAAU;AAAA,MACV,SAAS;AAAA;;;;IAMV,UAAU;AAAA,MACT,MAAM;AAAA,MACN,UAAU;AAAA,MACV,SAAS;AAAA;;;;IAMV,MAAM;AAAA,MACL,MAAM;AAAA,MACN,UAAU;AAAA;;;;;;IAQX,SAAS;AAAA,MACR,MAAM;AAAA,MACN,SAAS;AAAA,MACT,UAAU,OAAO;AAChB,eAAO,CAAC,WAAW,aAAa,UAAU,EAAE,QAAQ,KAAK,MAAM;AAAA,MAChE;AAAA;;EAIF,OAAO,CAAC,OAAO;AAChB;AAhEM,MAAA,aAAA,EAAA,OAAM,qBAAoB;;;AAA/B,SAAAA,UAAA,GAAAC,mBAWM,OAXN,YAWM;AAAA,IAVLC,YASW,qBAAA;AAAA,MART,IAAI,OAAA;AAAA,MACJ,UAAA,OAAA;AAAA,MACA,SAAA,OAAA;AAAA,MACA,+CAAO,KAAA,MAAK,OAAA;AAAA;MACF,cACV,MAAoB;AAAA,QAApBC,WAAoB,KAAA,QAAA,QAAA,CAAA,GAAA,QAAA,IAAA;AAAA;uBACV,MACX;AAAA,QADWC,gBAAA,sBACR,OAAA,IAAI,GAAA,CAAA;AAAA;;;;;;"}

package/dist/chunks/{NcAppNavigationNewItem-B4TH71qQ.mjs → NcAppNavigationNewItem-CkWp0oFr.mjs}

@@ -1,6 +1,6 @@
-import '../assets/NcAppNavigationNewItem-CCu1yQxq.css';
-import { N as NcInputConfirmCancel } from "./NcInputConfirmCancel-RRwim02d.mjs";
-import { N as NcLoadingIcon } from "./NcLoadingIcon-Dm3kRPrf.mjs";
+import '../assets/NcAppNavigationNewItem-Dmdd1YSE.css';
+import { N as NcInputConfirmCancel } from "./NcInputConfirmCancel-DC6lvX7Z.mjs";
+import { N as NcLoadingIcon } from "./NcLoadingIcon-b_ajZ_nQ.mjs";
 import { resolveComponent, createElementBlock, openBlock, normalizeClass, createElementVNode, createCommentVNode, createBlock, renderSlot, toDisplayString, createVNode } from "vue";
 import { _ as _export_sfc } from "./_plugin-vue_export-helper-1tPrXgE0.mjs";
 const _sfc_main = {
@@ -83,16 +83,16 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_NcLoadingIcon = resolveComponent("NcLoadingIcon");
   const _component_NcInputConfirmCancel = resolveComponent("NcInputConfirmCancel");
   return openBlock(), createElementBlock("li", {
-    class: normalizeClass([{
+    class: normalizeClass(["app-navigation-entry", {
       "app-navigation-entry--newItemActive": $data.newItemActive
-    }, "app-navigation-entry"])
+    }])
   }, [
     createElementVNode("button", {
       class: "app-navigation-entry-button",
       onClick: _cache[1] || (_cache[1] = (...args) => $options.handleNewItem && $options.handleNewItem(...args))
     }, [
       createElementVNode("span", {
-        class: normalizeClass([{ [$props.icon]: !$props.loading }, "app-navigation-entry-icon"])
+        class: normalizeClass(["app-navigation-entry-icon", { [$props.icon]: !$props.loading }])
       }, [
         $props.loading ? (openBlock(), createBlock(_component_NcLoadingIcon, { key: 0 })) : renderSlot(_ctx.$slots, "icon", { key: 1 }, void 0, true)
       ], 2),
@@ -114,8 +114,8 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
     ])
   ], 2);
 }
-const NcAppNavigationNewItem = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__scopeId", "data-v-489f71a9"]]);
+const NcAppNavigationNewItem = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__scopeId", "data-v-ee07f8f8"]]);
 export {
   NcAppNavigationNewItem as N
 };
-//# sourceMappingURL=NcAppNavigationNewItem-B4TH71qQ.mjs.map
+//# sourceMappingURL=NcAppNavigationNewItem-CkWp0oFr.mjs.map

package/dist/chunks/NcAppNavigationNewItem-CkWp0oFr.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"NcAppNavigationNewItem-CkWp0oFr.mjs","sources":["../../src/components/NcAppNavigationNewItem/NcAppNavigationNewItem.vue"],"sourcesContent":["<!--\n  - SPDX-FileCopyrightText: 2020 Nextcloud GmbH and Nextcloud contributors\n  - SPDX-License-Identifier: AGPL-3.0-or-later\n-->\n\n<docs>\n### Usage\n\n#### New Item element\n```vue\n\t<template>\n\t\t<NcAppNavigationNewItem name=\"New Item\" @new-item=\"function(value){alert(value)}\">\n\t\t\t<template #icon>\n\t\t\t\t<Plus :size=\"20\" />\n\t\t\t</template>\n\t\t</NcAppNavigationNewItem>\n\t</template>\n\t<script>\n\timport Plus from 'vue-material-design-icons/Plus'\n\n\texport default {\n\t\tcomponents: {\n\t\t\tPlus,\n\t\t},\n\t}\n\t</script>\n```\n\n#### New Item element with a loading animation instead of the icon\n```vue\n\t<template>\n\t\t<NcAppNavigationNewItem name=\"New Item\" :loading=\"true\">\n\t\t\t<template #icon>\n\t\t\t\t<Plus :size=\"20\" />\n\t\t\t</template>\n\t\t</NcAppNavigationNewItem>\n\t</template>\n\t<script>\n\timport Plus from 'vue-material-design-icons/Plus'\n\n\texport default {\n\t\tcomponents: {\n\t\t\tPlus,\n\t\t},\n\t}\n\t</script>\n```\n</docs>\n\n<template>\n\t<li\n\t\tclass=\"app-navigation-entry\"\n\t\t:class=\"{\n\t\t\t'app-navigation-entry--newItemActive': newItemActive,\n\t\t}\">\n\t\t<!-- New Item -->\n\t\t<button class=\"app-navigation-entry-button\" @click=\"handleNewItem\">\n\t\t\t<span\n\t\t\t\tclass=\"app-navigation-entry-icon\"\n\t\t\t\t:class=\"{ [icon]: !loading }\">\n\t\t\t\t<NcLoadingIcon v-if=\"loading\" />\n\t\t\t\t<slot v-else name=\"icon\" />\n\t\t\t</span>\n\n\t\t\t<span v-if=\"!newItemActive\" class=\"app-navigation-new-item__name\" :title=\"name\">\n\t\t\t\t{{ name }}\n\t\t\t</span>\n\n\t\t\t<!-- new Item input -->\n\t\t\t<span v-if=\"newItemActive\" class=\"newItemContainer\">\n\t\t\t\t<NcInputConfirmCancel\n\t\t\t\t\tref=\"newItemInput\"\n\t\t\t\t\tv-model=\"newItemValue\"\n\t\t\t\t\t:placeholder=\"editPlaceholder !== '' ? editPlaceholder : name\"\n\t\t\t\t\t@cancel=\"cancelNewItem\"\n\t\t\t\t\t@confirm=\"handleNewItemDone\" />\n\t\t\t</span>\n\t\t</button>\n\t</li>\n</template>\n\n<script>\nimport NcInputConfirmCancel from '../NcAppNavigationItem/NcInputConfirmCancel.vue'\nimport NcLoadingIcon from '../NcLoadingIcon/index.ts'\n\nexport default {\n\tname: 'NcAppNavigationNewItem',\n\n\tcomponents: {\n\t\tNcInputConfirmCancel,\n\t\tNcLoadingIcon,\n\t},\n\n\tprops: {\n\t\t/**\n\t\t * The name of the element.\n\t\t */\n\t\tname: {\n\t\t\ttype: String,\n\t\t\trequired: true,\n\t\t},\n\n\t\t/**\n\t\t * Refers to the icon on the left, this prop accepts a class\n\t\t * like 'icon-category-enabled'.\n\t\t */\n\t\ticon: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\n\t\t/**\n\t\t * Displays a loading animated icon on the left of the element\n\t\t * instead of the icon.\n\t\t */\n\t\tloading: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/**\n\t\t * Only for 'editable' items, sets label for the edit action button.\n\t\t */\n\t\teditLabel: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\n\t\t/**\n\t\t * Sets the placeholder text for the editing form.\n\t\t */\n\t\teditPlaceholder: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\t},\n\n\temits: ['newItem'],\n\n\tdata() {\n\t\treturn {\n\t\t\tnewItemValue: '',\n\t\t\tnewItemActive: false,\n\t\t}\n\t},\n\n\tmethods: {\n\t\thandleNewItem() {\n\t\t\tif (!this.loading) {\n\t\t\t\tthis.newItemActive = true\n\t\t\t\tthis.$nextTick(() => {\n\t\t\t\t\tthis.$refs.newItemInput.focusInput()\n\t\t\t\t})\n\t\t\t}\n\t\t},\n\n\t\tcancelNewItem() {\n\t\t\tthis.newItemActive = false\n\t\t},\n\n\t\thandleNewItemDone() {\n\t\t\tthis.$emit('newItem', this.newItemValue)\n\t\t\tthis.newItemValue = ''\n\t\t\tthis.newItemActive = false\n\t\t},\n\t},\n}\n</script>\n\n<style scoped lang=\"scss\">\n@use '../../assets/NcAppNavigationItem.scss';\n\n.app-navigation-new-item__name {\n\toverflow: hidden;\n\tmax-width: 100%;\n\twhite-space: nowrap;\n\ttext-overflow: ellipsis;\n\tpadding-inline-start: 7px;\n\tfont-size: 14px;\n}\n\n.newItemContainer {\n\twidth: calc(100% - var(--default-clickable-area));\n\tmargin: auto;\n}\n</style>\n"],"names":["_createElementBlock","_createElementVNode","_normalizeClass","_createBlock","_renderSlot","_openBlock","_createVNode"],"mappings":";;;;AAqFA,MAAK,YAAU;AAAA,EACd,MAAM;AAAA,EAEN,YAAY;AAAA,IACX;AAAA,IACA;AAAA;EAGD,OAAO;AAAA;AAAA;AAAA;AAAA,IAIN,MAAM;AAAA,MACL,MAAM;AAAA,MACN,UAAU;AAAA;;;;;IAOX,MAAM;AAAA,MACL,MAAM;AAAA,MACN,SAAS;AAAA;;;;;IAOV,SAAS;AAAA,MACR,MAAM;AAAA,MACN,SAAS;AAAA;;;;IAMV,WAAW;AAAA,MACV,MAAM;AAAA,MACN,SAAS;AAAA;;;;IAMV,iBAAiB;AAAA,MAChB,MAAM;AAAA,MACN,SAAS;AAAA;;EAIX,OAAO,CAAC,SAAS;AAAA,EAEjB,OAAO;AACN,WAAO;AAAA,MACN,cAAc;AAAA,MACd,eAAe;AAAA,IAChB;AAAA,EACD;AAAA,EAEA,SAAS;AAAA,IACR,gBAAgB;AACf,UAAI,CAAC,KAAK,SAAS;AAClB,aAAK,gBAAgB;AACrB,aAAK,UAAU,MAAM;AACpB,eAAK,MAAM,aAAa,WAAU;AAAA,QACnC,CAAC;AAAA,MACF;AAAA,IACD;AAAA,IAEA,gBAAgB;AACf,WAAK,gBAAgB;AAAA,IACtB;AAAA,IAEA,oBAAoB;AACnB,WAAK,MAAM,WAAW,KAAK,YAAY;AACvC,WAAK,eAAe;AACpB,WAAK,gBAAgB;AAAA,IACtB;AAAA;AAEF;;;;EAjG8B,OAAM;;;;;sBAnBnCA,mBA4BK,MAAA;AAAA,IA3BJ,uBAAM,wBAAsB;AAAA,6CACwB,MAAA;AAAA;;IAIpDC,mBAqBS,UAAA;AAAA,MArBD,OAAM;AAAA,MAA+B,gDAAO,SAAA,iBAAA,SAAA,cAAA,GAAA,IAAA;AAAA;MACnDA,mBAKO,QAAA;AAAA,QAJN,OAAKC,eAAA,CAAC,6BAA2B,EAAA,CACtB,OAAA,IAAI,IAAI,OAAA,SAAO,CAAA;AAAA;QACL,OAAA,wBAArBC,YAAgC,0BAAA,EAAA,KAAA,EAAA,CAAA,KAChCC,WAA2B,KAAA,QAAA,QAAA,EAAA,KAAA,EAAA,GAAA,QAAA,IAAA;AAAA;OAGf,MAAA,8BAAbJ,mBAEO,QAAA;AAAA;QAFqB,OAAM;AAAA,QAAiC,OAAO,OAAA;AAAA,yBACtE,OAAA,IAAI,GAAA,GAAA,UAAA;MAII,MAAA,iBAAZK,aAAAL,mBAOO,QAPP,YAOO;AAAA,QANNM,YAKgC,iCAAA;AAAA,UAJ/B,KAAI;AAAA,sBACK,MAAA;AAAA,uEAAA,MAAA,eAAY;AAAA,UACpB,aAAa,OAAA,oBAAe,KAAU,OAAA,kBAAkB,OAAA;AAAA,UACxD,UAAQ,SAAA;AAAA,UACR,WAAS,SAAA;AAAA;;;;;;"}

package/dist/chunks/{NcAppNavigationSearch-BOZ5dS_m.mjs → NcAppNavigationSearch-Cs14jpSe.mjs}

@@ -1,9 +1,9 @@
-import '../assets/NcAppNavigationSearch-Ct6uMFNo.css';
+import '../assets/NcAppNavigationSearch-CQamlS4X.css';
 import { defineComponent, mergeModels, useModel, useSlots, ref, useTemplateRef, watch, createElementBlock, openBlock, normalizeClass, createVNode, createCommentVNode, unref, withCtx, renderSlot, nextTick } from "vue";
 import { useFocusWithin } from "@vueuse/core";
-import { r as register, a as t } from "./_l10n-_R1HqC4N.mjs";
 import { I as IconClose } from "./Close-D6ngJ4t9.mjs";
-import { N as NcInputField } from "./NcInputField-DEHb834Z.mjs";
+import { N as NcInputField } from "./NcInputField-DugqxUR2.mjs";
+import { r as register, a as t } from "./_l10n-CiWgAjJZ.mjs";
 import { _ as _export_sfc } from "./_plugin-vue_export-helper-1tPrXgE0.mjs";
 register();
 const _sfc_main = /* @__PURE__ */ defineComponent({
@@ -14,7 +14,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
      */
     label: {
       type: String,
-      default: t("Search…")
+      default: t("Search …")
     },
     /**
      * Placeholder of the search input
@@ -35,7 +35,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     const inputElement = ref();
     const { focused: inputHasFocus } = useFocusWithin(inputElement);
     const transitionTimeout = Number.parseInt(window.getComputedStyle(window.document.body).getPropertyValue("--animation-quick")) || 100;
-    const actionsContainer = useTemplateRef("actionsContainer");
+    const actionsContainer = useTemplateRef("actions-container-key");
     const hasActions = () => !!slots.actions?.({});
     const showActions = ref(true);
     const timeoutId = ref();
@@ -85,8 +85,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         }, 8, ["modelValue", "aria-label", "placeholder", "trailing-button-label"]),
         hasActions() ? (openBlock(), createElementBlock("div", {
           key: 0,
-          ref_key: "actionsContainer",
-          ref: actionsContainer,
+          ref: "actions-container-key",
           class: normalizeClass(["app-navigation-search__actions", {
             "app-navigation-search__actions--hidden": !showActions.value,
             "hidden-visually": hideActions.value
@@ -98,8 +97,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const NcAppNavigationSearch = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-8579a4c4"]]);
+const NcAppNavigationSearch = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-e27843d3"]]);
 export {
   NcAppNavigationSearch as N
 };
-//# sourceMappingURL=NcAppNavigationSearch-BOZ5dS_m.mjs.map
+//# sourceMappingURL=NcAppNavigationSearch-Cs14jpSe.mjs.map

package/dist/chunks/NcAppNavigationSearch-Cs14jpSe.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"NcAppNavigationSearch-Cs14jpSe.mjs","sources":["../../src/components/NcAppNavigationSearch/NcAppNavigationSearch.vue"],"sourcesContent":["<!--\n  - SPDX-FileCopyrightText: 2024 Nextcloud GmbH and Nextcloud contributors\n  - SPDX-License-Identifier: AGPL-3.0-or-later\n-->\n\n<docs>\n### Usage\n\n```vue\n<template>\n\t<div class=\"styleguide-wrapper\">\n\t\t<NcContent app-name=\"styleguide-app-navigation\" class=\"content-styleguidist\">\n\t\t\t<NcAppNavigation>\n\t\t\t\t<template #search>\n\t\t\t\t\t<NcAppNavigationSearch v-model=\"searchQuery\">\n\t\t\t\t\t\t<template #actions>\n\t\t\t\t\t\t\t<NcActions aria-label=\"Filters\">\n\t\t\t\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t\t\t\t<IconFilter :size=\"20\" />\n\t\t\t\t\t\t\t\t</template>\n\t\t\t\t\t\t\t\t<NcActionButton>\n\t\t\t\t\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t\t\t\t\t<IconAccount :size=\"20\" />\n\t\t\t\t\t\t\t\t\t</template>\n\t\t\t\t\t\t\t\t\tFilter by name\n\t\t\t\t\t\t\t\t</NcActionButton>\n\t\t\t\t\t\t\t\t<NcActionButton>\n\t\t\t\t\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t\t\t\t\t<IconCalendarAccount :size=\"20\" />\n\t\t\t\t\t\t\t\t\t</template>\n\t\t\t\t\t\t\t\t\tFilter by year\n\t\t\t\t\t\t\t\t</NcActionButton>\n\t\t\t\t\t\t\t</NcActions>\n\t\t\t\t\t\t\t<NcButton aria-label=\"Search globally\" variant=\"tertiary\">\n\t\t\t\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t\t\t\t<IconSearchGlobal :size=\"20\" />\n\t\t\t\t\t\t\t\t</template>\n\t\t\t\t\t\t\t</NcButton>\n\t\t\t\t\t\t</template>\n\t\t\t\t\t</NcAppNavigationSearch>\n\t\t\t\t</template>\n\t\t\t\t<template #list>\n\t\t\t\t\t<NcAppNavigationItem name=\"First navigation entry\">\n\t\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t\t<IconStar :size=\"20\" />\n\t\t\t\t\t\t</template>\n\t\t\t\t\t</NcAppNavigationItem>\n\t\t\t\t\t<NcAppNavigationItem name=\"Second navigation entry\">\n\t\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t\t<IconStar :size=\"20\" />\n\t\t\t\t\t\t</template>\n\t\t\t\t\t</NcAppNavigationItem>\n\t\t\t\t</template>\n\t\t\t</NcAppNavigation>\n\t\t\t<NcAppContent>\n\t\t\t\t<ul class=\"fake-content\">\n\t\t\t\t\t<li>Search query: {{ searchQuery }}</li>\n\t\t\t\t\t<li v-for=\"(item, index) in items\" :key=\"index\">\n\t\t\t\t\t\t{{ item }}\n\t\t\t\t\t</li>\n\t\t\t\t</ul>\n\t\t\t</NcAppContent>\n\t\t</NcContent>\n\t</div>\n</template>\n<script>\nimport IconAccount from 'vue-material-design-icons/Account.vue'\nimport IconCalendarAccount from 'vue-material-design-icons/CalendarAccount.vue'\nimport IconFilter from 'vue-material-design-icons/Filter.vue'\nimport IconSearchGlobal from 'vue-material-design-icons/CloudSearch.vue'\nimport IconStar from 'vue-material-design-icons/Star.vue'\n\nconst exampleItem = ['Mary', 'Patricia', 'James', 'Michael']\n\nexport default {\n\tcomponents: {\n\t\tIconAccount,\n\t\tIconCalendarAccount,\n\t\tIconFilter,\n\t\tIconSearchGlobal,\n\t\tIconStar,\n\t},\n\n\tdata() {\n\t\treturn {\n\t\t\tsearchQuery: '',\n\t\t}\n\t},\n\n\tcomputed: {\n\t\titems() {\n\t\t\treturn exampleItem.filter((item) => item.toLocaleLowerCase().includes(this.searchQuery.toLocaleLowerCase()))\n\t\t},\n\t},\n}\n</script>\n<style scoped>\n/* This styles just mock NcContent and NcAppContent */\n.content-styleguidist {\n\tposition: relative !important;\n\tmargin: 0 !important;\n\t/* prevent jumping */\n\tmin-height: 200px;\n}\n\n.content-styleguidist > * {\n\theight: auto;\n}\n\n.fake-content {\n\tpadding: var(--app-navigation-padding);\n\tpadding-top: calc(2 * var(--app-navigation-padding) + var(--default-clickable-area));\n}\n\n.styleguide-wrapper {\n\tbackground-color: var(--color-background-plain);\n\tpadding: var(--body-container-margin);\n}\n</style>\n```\n</docs>\n\n<template>\n\t<div\n\t\tclass=\"app-navigation-search\"\n\t\t:class=\"{\n\t\t\t'app-navigation-search--has-actions': hasActions(),\n\t\t}\">\n\t\t<NcInputField\n\t\t\tref=\"inputElement\"\n\t\t\tv-model=\"model\"\n\t\t\t:aria-label=\"label\"\n\t\t\tclass=\"app-navigation-search__input\"\n\t\t\tlabel-outside\n\t\t\t:placeholder=\"placeholder ?? label\"\n\t\t\tshow-trailing-button\n\t\t\t:trailing-button-label=\"t('Clear search')\"\n\t\t\ttype=\"search\"\n\t\t\t@trailing-button-click=\"onCloseSearch\">\n\t\t\t<template #trailing-button-icon>\n\t\t\t\t<IconClose :size=\"20\" />\n\t\t\t</template>\n\t\t</NcInputField>\n\t\t<div\n\t\t\tv-if=\"hasActions()\"\n\t\t\tref=\"actions-container-key\"\n\t\t\tclass=\"app-navigation-search__actions\"\n\t\t\t:class=\"{\n\t\t\t\t'app-navigation-search__actions--hidden': !showActions,\n\t\t\t\t'hidden-visually': hideActions,\n\t\t\t}\">\n\t\t\t<slot name=\"actions\" />\n\t\t</div>\n\t</div>\n</template>\n\n<script setup lang=\"ts\">\nimport { useFocusWithin } from '@vueuse/core'\nimport { nextTick, ref, useSlots, useTemplateRef, watch } from 'vue'\nimport IconClose from 'vue-material-design-icons/Close.vue'\nimport NcInputField from '../NcInputField/NcInputField.vue'\nimport { t } from '../../l10n.ts'\n\n/**\n * Current search input\n */\nconst model = defineModel<string>({ default: '' })\n\ndefineProps({\n\t/**\n\t * Text used to label the search input\n\t */\n\tlabel: {\n\t\ttype: String,\n\t\tdefault: t('Search …'),\n\t},\n\n\t/**\n\t * Placeholder of the search input\n\t * By default the value of `label` is used.\n\t */\n\tplaceholder: {\n\t\ttype: String,\n\t\tdefault: null,\n\t},\n})\n\nconst slots = useSlots()\n\nconst inputElement = ref()\nconst { focused: inputHasFocus } = useFocusWithin(inputElement)\n\n/** Timeout used to define when the search input is fully expanded */\nconst transitionTimeout = Number.parseInt(window.getComputedStyle(window.document.body).getPropertyValue('--animation-quick')) || 100\n\nconst actionsContainer = useTemplateRef('actions-container-key')\nconst hasActions = () => !!slots.actions?.({})\nconst showActions = ref(true)\nconst timeoutId = ref()\n/** This is used to hide the actions after the transition is done */\nconst hideActions = ref(false)\nwatch(inputHasFocus, () => {\n\tshowActions.value = !inputHasFocus.value\n\twindow.clearTimeout(timeoutId.value)\n\tif (showActions.value) {\n\t\thideActions.value = false\n\t} else {\n\t\t// If the transition is done, we fully hide the actions visually\n\t\twindow.setTimeout(() => {\n\t\t\thideActions.value = !showActions.value\n\t\t}, transitionTimeout)\n\t}\n})\n\n/**\n * Handle close the search\n */\nfunction onCloseSearch() {\n\tmodel.value = ''\n\tif (hasActions()) {\n\t\tshowActions.value = true\n\t\tnextTick(() => actionsContainer.value?.querySelector('button')?.focus())\n\t}\n}\n</script>\n\n<style scoped lang=\"scss\">\n.app-navigation-search {\n\tdisplay: flex;\n\tgap: var(--app-navigation-padding);\n\tpadding: var(--app-navigation-padding);\n\n\t&--has-actions &__input {\n\t\tflex-grow: 1;\n\t\tz-index: 3;\n\t}\n\n\t&__actions {\n\t\tdisplay: flex;\n\t\tgap: var(--default-grid-baseline);\n\n\t\tmargin-inline-start: 0;\n\t\tmax-width: calc(2 * var(--default-clickable-area) + var(--default-grid-baseline));\n\t\tmax-height: var(--default-clickable-area);\n\n\t\ttransition: margin-inline-start var(--animation-quick);\n\n\t\t&--hidden {\n\t\t\tmargin-inline-start: calc(-1 * var(--default-clickable-area));\n\t\t}\n\t}\n}\n</style>\n"],"names":["_useModel","_createElementBlock","_createVNode","_unref","_renderSlot"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAsKA,UAAM,QAAQA,SAAmB,SAAA,YAAgB;AAqBjD,UAAM,QAAQ,SAAA;AAEd,UAAM,eAAe,IAAA;AACrB,UAAM,EAAE,SAAS,kBAAkB,eAAe,YAAY;AAG9D,UAAM,oBAAoB,OAAO,SAAS,OAAO,iBAAiB,OAAO,SAAS,IAAI,EAAE,iBAAiB,mBAAmB,CAAC,KAAK;AAElI,UAAM,mBAAmB,eAAe,uBAAuB;AAC/D,UAAM,aAAa,MAAM,CAAC,CAAC,MAAM,UAAU,CAAA,CAAE;AAC7C,UAAM,cAAc,IAAI,IAAI;AAC5B,UAAM,YAAY,IAAA;AAElB,UAAM,cAAc,IAAI,KAAK;AAC7B,UAAM,eAAe,MAAM;AAC1B,kBAAY,QAAQ,CAAC,cAAc;AACnC,aAAO,aAAa,UAAU,KAAK;AACnC,UAAI,YAAY,OAAO;AACtB,oBAAY,QAAQ;AAAA,MACrB,OAAO;AAEN,eAAO,WAAW,MAAM;AACvB,sBAAY,QAAQ,CAAC,YAAY;AAAA,QAClC,GAAG,iBAAiB;AAAA,MACrB;AAAA,IACD,CAAC;AAKD,aAAS,gBAAgB;AACxB,YAAM,QAAQ;AACd,UAAI,cAAc;AACjB,oBAAY,QAAQ;AACpB,iBAAS,MAAM,iBAAiB,OAAO,cAAc,QAAQ,GAAG,OAAO;AAAA,MACxE;AAAA,IACD;;0BApGCC,mBA8BM,OAAA;AAAA,QA7BL,uBAAM,yBAAuB;AAAA,gDACsB,WAAA;AAAA,QAAU;;QAG7DC,YAce,cAAA;AAAA,mBAbV;AAAA,UAAJ,KAAI;AAAA,sBACK,MAAA;AAAA,uEAAA,MAAK,QAAA;AAAA,UACb,cAAY,QAAA;AAAA,UACb,OAAM;AAAA,UACN,iBAAA;AAAA,UACC,aAAa,QAAA,eAAe,QAAA;AAAA,UAC7B,wBAAA;AAAA,UACC,yBAAuBC,MAAA,CAAA,EAAC,cAAA;AAAA,UACzB,MAAK;AAAA,UACJ,uBAAuB;AAAA,QAAA;UACb,gCACV,MAAwB;AAAA,YAAxBD,YAAwB,WAAA,EAAZ,MAAM,IAAE;AAAA,UAAA;;;QAIf,6BADPD,mBASM,OAAA;AAAA;UAPL,KAAI;AAAA,UACJ,uBAAM,kCAAgC;AAAA,uDACmB,YAAA;AAAA,+BAAoC,YAAA;AAAA,UAAA;;UAI7FG,WAAuB,KAAA,QAAA,WAAA,CAAA,GAAA,QAAA,IAAA;AAAA,QAAA;;;;;;"}

package/dist/chunks/NcAppNavigationSettings-D_u5pIPX.mjs

@@ -0,0 +1,98 @@
+import '../assets/NcAppNavigationSettings-Bt0dnsjR.css';
+import { defineComponent, ref, useTemplateRef, computed, createElementBlock, openBlock, normalizeClass, createElementVNode, createVNode, unref, withCtx, createTextVNode, toDisplayString, Transition, withDirectives, renderSlot, vShow } from "vue";
+import { t as mdiCog, u as mdiCogOutline } from "./mdi-DXaZM2k3.mjs";
+import { onClickOutside } from "@vueuse/core";
+import { N as NcButton } from "./NcButton-DkC5k3Lb.mjs";
+import { N as NcIconSvgWrapper } from "./NcIconSvgWrapper-5AA93z-F.mjs";
+import { r as register, a as t } from "./_l10n-CiWgAjJZ.mjs";
+import { c as createElementId } from "./createElementId-DhjFt1I9.mjs";
+import { i as isLegacy } from "./legacy-DcjXBL_t.mjs";
+import { _ as _export_sfc } from "./_plugin-vue_export-helper-1tPrXgE0.mjs";
+register();
+const _hoisted_1 = ["id"];
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "NcAppNavigationSettings",
+  props: {
+    excludeClickOutsideSelectors: { default: () => [] },
+    name: { default: () => t("Settings") }
+  },
+  setup(__props) {
+    const contentId = createElementId();
+    const open = ref(false);
+    const container2 = useTemplateRef("wrapperElement");
+    const ignore = computed(() => Array.isArray(__props.excludeClickOutsideSelectors) ? __props.excludeClickOutsideSelectors : __props.excludeClickOutsideSelectors.split(" "));
+    onClickOutside(container2, () => {
+      open.value = false;
+    }, { ignore });
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", {
+        ref: "wrapperElement",
+        class: normalizeClass(_ctx.$style.container)
+      }, [
+        createElementVNode("div", {
+          class: normalizeClass(_ctx.$style.header)
+        }, [
+          createVNode(NcButton, {
+            "aria-controls": unref(contentId),
+            "aria-expanded": open.value ? "true" : "false",
+            class: normalizeClass(_ctx.$style.button),
+            alignment: "start",
+            variant: "tertiary",
+            wide: "",
+            onClick: _cache[0] || (_cache[0] = ($event) => open.value = !open.value)
+          }, {
+            icon: withCtx(() => [
+              createVNode(NcIconSvgWrapper, {
+                path: unref(isLegacy) ? unref(mdiCog) : unref(mdiCogOutline)
+              }, null, 8, ["path"])
+            ]),
+            default: withCtx(() => [
+              createTextVNode(" " + toDisplayString(_ctx.name), 1)
+            ]),
+            _: 1
+          }, 8, ["aria-controls", "aria-expanded", "class"])
+        ], 2),
+        createVNode(Transition, {
+          "enter-active-class": _ctx.$style.animationActive,
+          "leave-active-class": _ctx.$style.animationActive,
+          "enter-from-class": _ctx.$style.animationStop,
+          "leave-to-class": _ctx.$style.animationStop
+        }, {
+          default: withCtx(() => [
+            withDirectives(createElementVNode("div", {
+              id: unref(contentId),
+              class: normalizeClass(_ctx.$style.content)
+            }, [
+              renderSlot(_ctx.$slots, "default")
+            ], 10, _hoisted_1), [
+              [vShow, open.value]
+            ])
+          ]),
+          _: 3
+        }, 8, ["enter-active-class", "leave-active-class", "enter-from-class", "leave-to-class"])
+      ], 2);
+    };
+  }
+});
+const container = "_container_fpy51_2";
+const header = "_header_fpy51_7";
+const button = "_button_fpy51_13";
+const content = "_content_fpy51_21";
+const animationActive = "_animationActive_fpy51_33";
+const animationStop = "_animationStop_fpy51_39";
+const style0 = {
+  container,
+  header,
+  button,
+  content,
+  animationActive,
+  animationStop
+};
+const cssModules = {
+  "$style": style0
+};
+const NcAppNavigationSettings = /* @__PURE__ */ _export_sfc(_sfc_main, [["__cssModules", cssModules]]);
+export {
+  NcAppNavigationSettings as N
+};
+//# sourceMappingURL=NcAppNavigationSettings-D_u5pIPX.mjs.map

package/dist/chunks/NcAppNavigationSettings-D_u5pIPX.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"NcAppNavigationSettings-D_u5pIPX.mjs","sources":["../../src/components/NcAppNavigationSettings/NcAppNavigationSettings.vue"],"sourcesContent":["<!--\n  - SPDX-FileCopyrightText: 2018 Nextcloud GmbH and Nextcloud contributors\n  - SPDX-License-Identifier: AGPL-3.0-or-later\n-->\n\n<script setup lang=\"ts\">\nimport type { Slot } from 'vue'\n\nimport { mdiCog, mdiCogOutline } from '@mdi/js'\nimport { onClickOutside } from '@vueuse/core'\nimport { computed, ref, useTemplateRef } from 'vue'\nimport NcButton from '../NcButton/NcButton.vue'\nimport NcIconSvgWrapper from '../NcIconSvgWrapper/NcIconSvgWrapper.vue'\nimport { t } from '../../l10n.ts'\nimport { createElementId } from '../../utils/createElementId.js'\nimport { isLegacy } from '../../utils/legacy.ts'\n\nconst {\n\texcludeClickOutsideSelectors = [],\n\tname = t('Settings'),\n} = defineProps<{\n\t/**\n\t * A query-selector or an array of query-selectors\n\t * to be ignored when clicking outside an element\n\t */\n\texcludeClickOutsideSelectors?: string | string[]\n\n\t/**\n\t * Text of the button\n\t *\n\t * @default 'Settings'\n\t */\n\tname?: string\n}>()\n\ndefineSlots<{\n\t/**\n\t * Content of the accordion button (the settings).\n\t */\n\tdefault: Slot\n}>()\n\nconst contentId = createElementId()\n/**\n * Are the settings open\n */\nconst open = ref(false)\n\n// Close the menu when the user clicks outside of the container\nconst container = useTemplateRef('wrapperElement')\nconst ignore = computed(() => Array.isArray(excludeClickOutsideSelectors)\n\t? excludeClickOutsideSelectors\n\t: excludeClickOutsideSelectors.split(' '))\nonClickOutside(container, () => {\n\topen.value = false\n}, { ignore })\n</script>\n\n<template>\n\t<div ref=\"wrapperElement\" :class=\"$style.container\">\n\t\t<div :class=\"$style.header\">\n\t\t\t<NcButton\n\t\t\t\t:aria-controls=\"contentId\"\n\t\t\t\t:aria-expanded=\"open ? 'true' : 'false'\"\n\t\t\t\t:class=\"$style.button\"\n\t\t\t\talignment=\"start\"\n\t\t\t\tvariant=\"tertiary\"\n\t\t\t\twide\n\t\t\t\t@click=\"open = !open\">\n\t\t\t\t<template #icon>\n\t\t\t\t\t<NcIconSvgWrapper :path=\"isLegacy ? mdiCog : mdiCogOutline\" />\n\t\t\t\t</template>\n\t\t\t\t{{ name }}\n\t\t\t</NcButton>\n\t\t</div>\n\t\t<Transition\n\t\t\t:enter-active-class=\"$style.animationActive\"\n\t\t\t:leave-active-class=\"$style.animationActive\"\n\t\t\t:enter-from-class=\"$style.animationStop\"\n\t\t\t:leave-to-class=\"$style.animationStop\">\n\t\t\t<div\n\t\t\t\tv-show=\"open\"\n\t\t\t\t:id=\"contentId\"\n\t\t\t\t:class=\"$style.content\">\n\t\t\t\t<slot />\n\t\t\t</div>\n\t\t</Transition>\n\t</div>\n</template>\n\n<style module>\n.container {\n\tmargin-top: auto;\n\tpadding: var(--default-grid-baseline);\n}\n\n.header {\n\tmargin-block: 0 var(--default-grid-baseline);\n\tmargin-inline: var(--default-grid-baseline);\n}\n\n/* Overwrite the padding to match NcAppNavigationItem */\n.button {\n\tpadding-inline: 0 calc((var(--default-clickable-area) - 16px) / 2) !important;\n\n\t:global(.button-vue__text) {\n\t\tfont-weight: normal;\n\t}\n}\n\n.content {\n\tdisplay: block;\n\tpadding: 10px;\n\n\t/* prevent scrolled contents from stopping too early */\n\tmargin-bottom: calc(-1 * var(--default-grid-baseline));\n\n\t/* restrict height of settings and make scrollable */\n\tmax-height: 300px;\n\toverflow-y: auto;\n}\n\n.animationActive {\n\ttransition-duration: var(--animation-slow);\n\ttransition-property: max-height, padding;\n\toverflow-y: hidden !important;\n}\n\n.animationStop {\n\tmax-height: 0 !important;\n\tpadding: 0 10px !important;\n}\n</style>\n"],"names":["container","_createElementBlock","_normalizeClass","$style","_createElementVNode","_createVNode","_unref","_createTextVNode","name","_Transition","_renderSlot"],"mappings":";;;;;;;;;;;;;;;;;;AA0CA,UAAM,YAAY,gBAAA;AAIlB,UAAM,OAAO,IAAI,KAAK;AAGtB,UAAMA,aAAY,eAAe,gBAAgB;AACjD,UAAM,SAAS,SAAS,MAAM,MAAM,QAAQ,QAAA,4BAA4B,IACrE,QAAA,+BACA,QAAA,6BAA6B,MAAM,GAAG,CAAC;AAC1C,mBAAeA,YAAW,MAAM;AAC/B,WAAK,QAAQ;AAAA,IACd,GAAG,EAAE,QAAQ;;0BAIZC,mBA4BM,OAAA;AAAA,QA5BD,KAAI;AAAA,QAAkB,OAAKC,eAAEC,KAAAA,OAAO,SAAS;AAAA,MAAA;QACjDC,mBAcM,OAAA;AAAA,UAdA,OAAKF,eAAEC,KAAAA,OAAO,MAAM;AAAA,QAAA;UACzBE,YAYW,UAAA;AAAA,YAXT,iBAAeC,MAAA,SAAA;AAAA,YACf,iBAAe,KAAA,QAAI,SAAA;AAAA,YACnB,OAAKJ,eAAEC,KAAAA,OAAO,MAAM;AAAA,YACrB,WAAU;AAAA,YACV,SAAQ;AAAA,YACR,MAAA;AAAA,YACC,SAAK,OAAA,CAAA,MAAA,OAAA,CAAA,IAAA,CAAA,WAAE,KAAA,QAAI,CAAI,KAAA;AAAA,UAAA;YACL,cACV,MAA8D;AAAA,cAA9DE,YAA8D,kBAAA;AAAA,gBAA3C,MAAMC,MAAA,QAAA,IAAWA,MAAA,MAAA,IAASA,MAAA,aAAA;AAAA,cAAA;;6BACnC,MACX;AAAA,cADWC,gBAAA,sBACRC,KAAAA,IAAI,GAAA,CAAA;AAAA,YAAA;;;;QAGTH,YAWaI,YAAA;AAAA,UAVX,sBAAoBN,KAAAA,OAAO;AAAA,UAC3B,sBAAoBA,KAAAA,OAAO;AAAA,UAC3B,oBAAkBA,KAAAA,OAAO;AAAA,UACzB,kBAAgBA,KAAAA,OAAO;AAAA,QAAA;2BACxB,MAKM;AAAA,2BALNC,mBAKM,OAAA;AAAA,cAHJ,IAAIE,MAAA,SAAA;AAAA,cACJ,OAAKJ,eAAEC,KAAAA,OAAO,OAAO;AAAA,YAAA;cACtBO,WAAQ,KAAA,QAAA,SAAA;AAAA,YAAA;sBAHA,KAAA,KAAI;AAAA,YAAA;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/chunks/NcAppNavigationSpacer-BvkBfuVw.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"NcAppNavigationSpacer-BvkBfuVw.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;"}
+{"version":3,"file":"NcAppNavigationSpacer-BvkBfuVw.mjs","sources":["../../src/components/NcAppNavigationSpacer/NcAppNavigationSpacer.vue"],"sourcesContent":["<!--\n  - SPDX-FileCopyrightText: 2019 Nextcloud GmbH and Nextcloud contributors\n  - SPDX-License-Identifier: AGPL-3.0-or-later\n-->\n\n<script setup lang=\"ts\">\n// nothing\n</script>\n\n<template>\n\t<li class=\"app-navigation-spacer\" />\n</template>\n\n<style scoped>\n\t.app-navigation-spacer {\n\t\tflex-shrink: 0;\n\t\theight: 22px;\n\t}\n\n</style>\n"],"names":["_openBlock","_createElementBlock"],"mappings":";;;;;;;AAUC,aAAAA,UAAA,GAAAC,mBAAoC,MAApC,UAAoC;AAAA;;;;"}

package/dist/chunks/{NcAppSettingsDialog-B4rJQ7w_.mjs → NcAppSettingsDialog-Dy2SrGfl.mjs}

@@ -1,9 +1,9 @@
-import '../assets/NcAppSettingsDialog-BtS89pIY.css';
+import '../assets/NcAppSettingsDialog-CW1IxPWr.css';
 import debounce from "debounce";
 import { resolveComponent, createBlock, createCommentVNode, openBlock, mergeProps, createSlots, withCtx, createElementVNode, renderSlot, createElementBlock, Fragment, renderList, withKeys, withModifiers, normalizeClass, toDisplayString, warn } from "vue";
 import { useIsMobile } from "../composables/useIsMobile/index.mjs";
-import { r as register, h as t44, a as t } from "./_l10n-_R1HqC4N.mjs";
-import { N as NcDialog } from "./NcDialog-B_4Lud9m.mjs";
+import { r as register, g as t44, a as t } from "./_l10n-CiWgAjJZ.mjs";
+import { N as NcDialog } from "./NcDialog-DmKbeOcJ.mjs";
 import { _ as _sfc_main$1 } from "./NcVNodes.vue_vue_type_script_lang-BqUHinRZ.mjs";
 import { _ as _export_sfc } from "./_plugin-vue_export-helper-1tPrXgE0.mjs";
 register(t44);
@@ -70,6 +70,7 @@ const _sfc_main = {
       scroller: null,
       /**
        * Currently registered settings sections
+       *
        * @type {{ id: string, name: string, icon?: import('vue').VNode[] }[]}
        */
       sections: []
@@ -118,6 +119,7 @@ const _sfc_main = {
   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
@@ -140,6 +142,7 @@ const _sfc_main = {
     },
     /**
      * Called when a section is unregistered to remove it from dialog
+     *
      * @param {string} id The section ID
      */
     unregisterSection(id) {
@@ -178,7 +181,11 @@ const _sfc_main = {
         this.unfocusNavigationItem();
       }
     },
-    // Remove selected section once the user starts scrolling
+    /**
+     * Remove selected section once the user starts scrolling
+     *
+     * @type {import('debounce').DebouncedFunction<() => void>}
+     */
     unfocusNavigationItem: debounce(function() {
       this.selectedSection = "";
       if (document.activeElement.className.includes("navigation-list__link")) {
@@ -222,11 +229,10 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
             }, [
               createElementVNode("a", {
                 "aria-current": `${section.id === $data.selectedSection}`,
-                class: normalizeClass({
-                  "navigation-list__link": true,
+                class: normalizeClass(["navigation-list__link", {
                   "navigation-list__link--active": section.id === $data.selectedSection,
                   "navigation-list__link--icon": $options.hasNavigationIcons
-                }),
+                }]),
                 href: `#settings-section_${section.id}`,
                 tabindex: "0",
                 onClick: withModifiers(($event) => $options.handleSettingsNavigationClick(section.id), ["prevent"]),
@@ -248,8 +254,8 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
     } : void 0
   ]), 1040, ["navigation-aria-label", "onUpdate:open"])) : createCommentVNode("", true);
 }
-const NcAppSettingsDialog = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__scopeId", "data-v-5c8e2a25"]]);
+const NcAppSettingsDialog = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__scopeId", "data-v-39ac847e"]]);
 export {
   NcAppSettingsDialog as N
 };
-//# sourceMappingURL=NcAppSettingsDialog-B4rJQ7w_.mjs.map
+//# sourceMappingURL=NcAppSettingsDialog-Dy2SrGfl.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"NcAppSettingsDialog-Dy2SrGfl.mjs","sources":["../../src/components/NcAppSettingsDialog/NcAppSettingsDialog.vue"],"sourcesContent":["<!--\n  - SPDX-FileCopyrightText: 2020 Nextcloud GmbH and Nextcloud contributors\n  - SPDX-License-Identifier: AGPL-3.0-or-later\n-->\n\n<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\n\t\tv-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\n\t\t\t\tv-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\n\t\t\t\t\t\t:aria-current=\"`${section.id === selectedSection}`\"\n\t\t\t\t\t\tclass=\"navigation-list__link\"\n\t\t\t\t\t\t:class=\"{\n\t\t\t\t\t\t\t'navigation-list__link--active': section.id === selectedSection,\n\t\t\t\t\t\t\t'navigation-list__link--icon': hasNavigationIcons,\n\t\t\t\t\t\t}\"\n\t\t\t\t\t\t:href=\"`#settings-section_${section.id}`\"\n\t\t\t\t\t\ttabindex=\"0\"\n\t\t\t\t\t\t@click.prevent=\"handleSettingsNavigationClick(section.id)\"\n\t\t\t\t\t\t@keydown.enter=\"handleSettingsNavigationClick(section.id)\">\n\t\t\t\t\t\t<div v-if=\"hasNavigationIcons\" class=\"navigation-list__link-icon\">\n\t\t\t\t\t\t\t<NcVNodes v-if=\"section.icon\" :vnodes=\"section.icon\" />\n\t\t\t\t\t\t</div>\n\t\t\t\t\t\t<span class=\"navigation-list__link-text\">\n\t\t\t\t\t\t\t{{ section.name }}\n\t\t\t\t\t\t</span>\n\t\t\t\t\t</a>\n\t\t\t\t</li>\n\t\t\t</ul>\n\t\t</template>\n\t\t<div ref=\"settingsScroller\">\n\t\t\t<slot />\n\t\t</div>\n\t</NcDialog>\n</template>\n\n<script>\nimport debounce from 'debounce'\nimport { warn } from 'vue'\nimport { useIsMobile } from '../../composables/useIsMobile/index.ts'\nimport { t } from '../../l10n.ts'\nimport NcDialog from '../NcDialog/index.ts'\nimport NcVNodes from '../NcVNodes/index.ts'\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\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 *\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\t},\n\n\tmethods: {\n\t\t/**\n\t\t * Called when a new section is registered\n\t\t *\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 *\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/**\n\t\t * Remove selected section once the user starts scrolling\n\t\t *\n\t\t * @type {import('debounce').DebouncedFunction<() => void>}\n\t\t */\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-inline-end: calc(4 * var(--default-grid-baseline));\n\t\toverflow-x: hidden;\n\t\toverflow-y: auto;\n\t\tposition: relative;\n\t}\n\t:deep &__content {\n\t\tpadding-inline: calc(4 * var(--default-grid-baseline));\n\t}\n}\n\n.navigation-list {\n\theight: 100%;\n\toverflow-y: auto;\n\tpadding: calc(3 * var(--default-grid-baseline));\n\n\t&__link {\n\t\tdisplay: flex;\n\t\talign-content: center;\n\t\tfont-size: 16px;\n\t\theight: var(--default-clickable-area);\n\t\tmargin: 4px 0;\n\t\tline-height: var(--default-clickable-area);\n\t\tborder-radius: var(--border-radius-element);\n\t\tfont-weight: bold;\n\t\tpadding: 0 calc(4 * var(--default-grid-baseline));\n\t\tcursor: pointer;\n\t\twhite-space: nowrap;\n\t\ttext-overflow: ellipsis;\n\t\toverflow: hidden;\n\t\tbackground-color: transparent;\n\t\tborder: none;\n\n\t\t&:hover,\n\t\t&:focus {\n\t\t\tbackground-color: var(--color-background-hover);\n\t\t}\n\n\t\t&--active {\n\t\t\tbackground-color: var(--color-primary-element-light) !important;\n\t\t}\n\n\t\t&--icon {\n\t\t\tpadding-inline-start: calc(2 * var(--default-grid-baseline));\n\t\t\tgap: var(--default-grid-baseline);\n\t\t}\n\n\t\t&-icon {\n\t\t\tdisplay: flex;\n\t\t\tjustify-content: center;\n\t\t\talign-content: center;\n\t\t\twidth: calc(var(--default-clickable-area) - 2 * var(--default-grid-baseline));\n\t\t\tmax-width: calc(var(--default-clickable-area) - 2 * var(--default-grid-baseline));\n\t\t}\n\t}\n}\n\n@media only screen and (max-width: $breakpoint-small-mobile) {\n\t.app-settings {\n\t\t:deep .dialog__name {\n\t\t\tpadding-inline-start: 16px;\n\t\t}\n\t}\n}\n</style>\n"],"names":["NcVNodes","id","_openBlock","_createBlock","_mergeProps","_createSlots","_createElementVNode","_renderSlot","_withCtx","_createElementBlock","_Fragment","_renderList","_withModifiers","_withKeys","_toDisplayString"],"mappings":"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"}

package/dist/chunks/{NcAppSettingsSection-CssmXyZ0.mjs → NcAppSettingsSection-tccU68DQ.mjs}

@@ -1,14 +1,20 @@
-import '../assets/NcAppSettingsSection-DnDcGk1v.css';
+import '../assets/NcAppSettingsSection-C4JF60e-.css';
 import { createElementBlock, openBlock, createElementVNode, renderSlot, createCommentVNode, toDisplayString } from "vue";
 import { _ as _export_sfc } from "./_plugin-vue_export-helper-1tPrXgE0.mjs";
 const _sfc_main = {
   name: "NcAppSettingsSection",
   inject: ["registerSection", "unregisterSection"],
   props: {
+    /**
+     * Name of the section
+     */
     name: {
       type: String,
       required: true
     },
+    /**
+     * The id of the section
+     */
     id: {
       type: String,
       required: true,
@@ -57,8 +63,8 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
     createCommentVNode("", true)
   ], 8, _hoisted_1);
 }
-const NcAppSettingsSection = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__scopeId", "data-v-ce8fac13"]]);
+const NcAppSettingsSection = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__scopeId", "data-v-fc8f9a6f"]]);
 export {
   NcAppSettingsSection as N
 };
-//# sourceMappingURL=NcAppSettingsSection-CssmXyZ0.mjs.map
+//# sourceMappingURL=NcAppSettingsSection-tccU68DQ.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"NcAppSettingsSection-tccU68DQ.mjs","sources":["../../src/components/NcAppSettingsSection/NcAppSettingsSection.vue"],"sourcesContent":["<!--\n  - SPDX-FileCopyrightText: 2020 Nextcloud GmbH and Nextcloud contributors\n  - SPDX-License-Identifier: AGPL-3.0-or-later\n-->\n\n<template>\n\t<section :id=\"htmlId\" :aria-labelledby=\"`${htmlId}--label`\" class=\"app-settings-section\">\n\t\t<h3 :id=\"`${htmlId}--label`\" class=\"app-settings-section__name\">\n\t\t\t{{ name }}\n\t\t</h3>\n\t\t<slot />\n\t\t<!-- @slot Optonal icon to for the secion in the navigation -->\n\t\t<slot v-if=\"false\" name=\"icon\" />\n\t</section>\n</template>\n\n<script>\nexport default {\n\tname: 'NcAppSettingsSection',\n\tinject: ['registerSection', 'unregisterSection'],\n\n\tprops: {\n\t\t/**\n\t\t * Name of the section\n\t\t */\n\t\tname: {\n\t\t\ttype: String,\n\t\t\trequired: true,\n\t\t},\n\n\t\t/**\n\t\t * The id of the section\n\t\t */\n\t\tid: {\n\t\t\ttype: String,\n\t\t\trequired: true,\n\t\t\tvalidator(id) {\n\t\t\t\t// Only alphanumeric, dash and underscore\n\t\t\t\treturn /^[a-z0-9\\-_]+$/.test(id)\n\t\t\t},\n\t\t},\n\t},\n\n\tcomputed: {\n\t\t// generate an id for each settingssection based on the name without whitespaces\n\t\thtmlId() {\n\t\t\treturn 'settings-section_' + this.id\n\t\t},\n\t},\n\n\t// Reactive changes for section navigation\n\twatch: {\n\t\tid(newId, oldId) {\n\t\t\tthis.unregisterSection(oldId)\n\t\t\tthis.registerSection(newId, this.name, this.$slots?.icon?.())\n\t\t},\n\n\t\tname(newName) {\n\t\t\tthis.unregisterSection(this.id)\n\t\t\tthis.registerSection(this.id, newName, this.$slots?.icon?.())\n\t\t},\n\t},\n\n\tmounted() {\n\t\t// register section for navigation\n\t\tthis.registerSection(this.id, this.name, this.$slots?.icon?.())\n\t},\n\n\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: 1.6em;\n\t\tmargin: 0;\n\t\tpadding: 20px 0;\n\t\tfont-weight: bold;\n\t\toverflow: hidden;\n\t\twhite-space: nowrap;\n\t\ttext-overflow: ellipsis;\n\t}\n}\n</style>\n"],"names":["_createElementBlock","_createElementVNode","_renderSlot"],"mappings":";;AAiBA,MAAK,YAAU;AAAA,EACd,MAAM;AAAA,EACN,QAAQ,CAAC,mBAAmB,mBAAmB;AAAA,EAE/C,OAAO;AAAA;AAAA;AAAA;AAAA,IAIN,MAAM;AAAA,MACL,MAAM;AAAA,MACN,UAAU;AAAA;;;;IAMX,IAAI;AAAA,MACH,MAAM;AAAA,MACN,UAAU;AAAA,MACV,UAAU,IAAI;AAEb,eAAO,iBAAiB,KAAK,EAAE;AAAA,MAChC;AAAA;;EAIF,UAAU;AAAA;AAAA,IAET,SAAS;AACR,aAAO,sBAAsB,KAAK;AAAA,IACnC;AAAA;;EAID,OAAO;AAAA,IACN,GAAG,OAAO,OAAO;AAChB,WAAK,kBAAkB,KAAK;AAC5B,WAAK,gBAAgB,OAAO,KAAK,MAAM,KAAK,QAAQ,OAAI,CAAI;AAAA,IAC7D;AAAA,IAEA,KAAK,SAAS;AACb,WAAK,kBAAkB,KAAK,EAAE;AAC9B,WAAK,gBAAgB,KAAK,IAAI,SAAS,KAAK,QAAQ,OAAI,CAAI;AAAA,IAC7D;AAAA;EAGD,UAAU;AAET,SAAK,gBAAgB,KAAK,IAAI,KAAK,MAAM,KAAK,QAAQ,OAAI,CAAI;AAAA,EAC/D;AAAA,EAEA,gBAAgB;AACf,SAAK,kBAAkB,KAAK,EAAE;AAAA,EAC/B;AACD;;;;sBAjECA,mBAOU,WAAA;AAAA,IAPA,IAAI,SAAA;AAAA,IAAS,sBAAoB,SAAA,MAAM;AAAA,IAAW,OAAM;AAAA;IACjEC,mBAEK,MAAA;AAAA,MAFA,OAAO,SAAA,MAAM;AAAA,MAAW,OAAM;AAAA,uBAC/B,OAAA,IAAI,GAAA,GAAA,UAAA;AAAA,IAERC,WAAQ,KAAA,QAAA,WAAA,CAAA,GAAA,QAAA,IAAA;AAAA;;;;"}