@nextcloud/vue 8.3.0 → 8.4.0

package/dist/Components/NcAppContent.mjs

@@ -1,28 +1,29 @@
 import "../assets/index-4596132f.css";
 import l from "./NcButton.mjs";
-import { t as p } from "../chunks/l10n-1b905a9a.mjs";
+import { r as p, Q as r, a as c } from "../chunks/_l10n-f5af5269.mjs";
 import "../Directives/Tooltip.mjs";
-import { emit as n } from "@nextcloud/event-bus";
-import { A as r } from "../chunks/ArrowRight-74a9fcb2.mjs";
+import { emit as a } from "@nextcloud/event-bus";
+import { A as u } from "../chunks/ArrowRight-74a9fcb2.mjs";
 import { n as o } from "../chunks/_plugin-vue2_normalizer-71e2aa87.mjs";
-import { VTooltip as c } from "floating-vue";
-import { useIsMobile as u } from "../Composables/useIsMobile.mjs";
-import { getBuilder as f } from "@nextcloud/browser-storage";
-import { useSwipe as h } from "@vueuse/core";
-import { Pane as g, Splitpanes as d } from "splitpanes";
+import { VTooltip as f } from "floating-vue";
+import { useIsMobile as h } from "../Composables/useIsMobile.mjs";
+import { getBuilder as g } from "@nextcloud/browser-storage";
+import { useSwipe as d } from "@vueuse/core";
+import { Pane as m, Splitpanes as _ } from "splitpanes";
 import "splitpanes/dist/splitpanes.css";
-const m = {
+p(r);
+const z = {
   name: "NcAppDetailsToggle",
   directives: {
-    tooltip: c
+    tooltip: f
   },
   components: {
     NcButton: l,
-    ArrowRight: r
+    ArrowRight: u
   },
   computed: {
     title() {
-      return p("Go back to the list");
+      return c("Go back to the list");
     }
   },
   beforeMount() {
@@ -34,32 +35,32 @@ const m = {
   methods: {
     toggleAppNavigationButton(e = !0) {
       const t = document.querySelector(".app-navigation .app-navigation-toggle");
-      t && (t.style.display = e ? "none" : null, e === !0 && n("toggle-navigation", { open: !1 }));
+      t && (t.style.display = e ? "none" : null, e === !0 && a("toggle-navigation", { open: !1 }));
     }
   }
 };
-var _ = function() {
+var S = function() {
   var t = this, i = t._self._c;
   return i("NcButton", { directives: [{ name: "tooltip", rawName: "v-tooltip", value: t.title, expression: "title" }], staticClass: "app-details-toggle", attrs: { "aria-label": t.title }, scopedSlots: t._u([{ key: "icon", fn: function() {
     return [i("ArrowRight", { attrs: { size: 20 } })];
   }, proxy: !0 }]) });
-}, z = [], S = /* @__PURE__ */ o(
-  m,
-  _,
+}, v = [], w = /* @__PURE__ */ o(
   z,
+  S,
+  v,
   !1,
   null,
   "5244e83e",
   null,
   null
 );
-const v = S.exports;
-const a = f("nextcloud").persist().build(), w = {
+const y = w.exports;
+const n = g("nextcloud").persist().build(), C = {
   name: "NcAppContent",
   components: {
-    NcAppDetailsToggle: v,
-    Pane: g,
-    Splitpanes: d
+    NcAppDetailsToggle: y,
+    Pane: m,
+    Splitpanes: _
   },
   props: {
     /**
@@ -124,7 +125,7 @@ const a = f("nextcloud").persist().build(), w = {
   ],
   setup() {
     return {
-      isMobile: u()
+      isMobile: h()
     };
   },
   data() {
@@ -169,7 +170,7 @@ const a = f("nextcloud").persist().build(), w = {
     this.checkListSlot();
   },
   mounted() {
-    this.allowSwipeNavigation && (this.swiping = h(this.$el, {
+    this.allowSwipeNavigation && (this.swiping = d(this.$el, {
       onSwipeEnd: this.handleSwipe
     })), this.checkListSlot(), this.restorePaneConfig();
   },
@@ -181,15 +182,15 @@ const a = f("nextcloud").persist().build(), w = {
      * @param {import('@vueuse/core').SwipeDirection} direction The swipe direction of the event
      */
     handleSwipe(e, t) {
-      Math.abs(this.swiping.lengthX) > 70 && (this.swiping.coordsStart.x < 300 / 2 && t === "right" ? n("toggle-navigation", {
+      Math.abs(this.swiping.lengthX) > 70 && (this.swiping.coordsStart.x < 300 / 2 && t === "right" ? a("toggle-navigation", {
         open: !0
-      }) : this.swiping.coordsStart.x < 300 * 1.5 && t === "left" && n("toggle-navigation", {
+      }) : this.swiping.coordsStart.x < 300 * 1.5 && t === "left" && a("toggle-navigation", {
         open: !1
       }));
     },
     handlePaneResize(e) {
       const t = parseInt(e[0].size, 10);
-      a.setItem(this.paneConfigID, JSON.stringify(t)), this.listPaneSize = t, this.$emit("resize:list", { size: t }), console.debug("AppContent pane config", t);
+      n.setItem(this.paneConfigID, JSON.stringify(t)), this.listPaneSize = t, this.$emit("resize:list", { size: t }), console.debug("AppContent pane config", t);
     },
     // $slots is not reactive, we need to update this manually
     checkListSlot() {
@@ -198,7 +199,7 @@ const a = f("nextcloud").persist().build(), w = {
     },
     // browserStorage is not reactive, we need to update this manually
     restorePaneConfig() {
-      const e = parseInt(a.getItem(this.paneConfigID), 10);
+      const e = parseInt(n.getItem(this.paneConfigID), 10);
       if (!isNaN(e) && e !== this.listPaneSize)
         return console.debug("AppContent pane config", e), this.listPaneSize = e, e;
     },
@@ -210,22 +211,22 @@ const a = f("nextcloud").persist().build(), w = {
     }
   }
 };
-var y = function() {
+var N = function() {
   var t = this, i = t._self._c;
   return i("main", { staticClass: "app-content no-snapper", class: { "app-content--has-list": t.hasList }, attrs: { id: "app-content-vue" } }, [t.pageHeading ? i("h1", { staticClass: "hidden-visually" }, [t._v(" " + t._s(t.pageHeading) + " ")]) : t._e(), t.hasList ? [t.isMobile ? i("div", { staticClass: "app-content-wrapper app-content-wrapper--mobile", class: t.showDetails ? "app-content-wrapper--show-details" : "app-content-wrapper--show-list" }, [t.hasList && t.showDetails ? i("NcAppDetailsToggle", { nativeOn: { click: function(s) {
     return s.stopPropagation(), s.preventDefault(), t.hideDetails.apply(null, arguments);
   } } }) : t._e(), t._t("list"), t._t("default")], 2) : i("div", { staticClass: "app-content-wrapper" }, [i("Splitpanes", { staticClass: "default-theme", on: { resized: t.handlePaneResize } }, [i("Pane", { staticClass: "splitpanes__pane-list", attrs: { size: t.listPaneSize || t.paneDefaults.list.size, "min-size": t.paneDefaults.list.min, "max-size": t.paneDefaults.list.max } }, [t._t("list")], 2), i("Pane", { staticClass: "splitpanes__pane-details", attrs: { size: t.detailsPaneSize, "min-size": t.paneDefaults.details.min, "max-size": t.paneDefaults.details.max } }, [t._t("default")], 2)], 1)], 1)] : t._t("default")], 2);
-}, C = [], N = /* @__PURE__ */ o(
-  w,
-  y,
+}, D = [], x = /* @__PURE__ */ o(
   C,
+  N,
+  D,
   !1,
   null,
   "27fc3f3a",
   null,
   null
 );
-const W = N.exports;
+const F = x.exports;
 export {
-  W as default
+  F as default
 };

package/dist/Components/NcAppContent.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"NcAppContent.mjs","sources":["../../src/components/NcAppContent/NcAppDetailsToggle.vue","../../src/components/NcAppContent/NcAppContent.vue"],"sourcesContent":["<!--\n  - @copyright Copyright (c) 2021 John Molakvoæ <skjnldsv@protonmail.com>\n  -\n  - @author John Molakvoæ <skjnldsv@protonmail.com>\n  -\n  - @license GNU AGPL version 3 or any later version\n  -\n  - This program is free software: you can redistribute it and/or modify\n  - it under the terms of the GNU Affero General Public License as\n  - published by the Free Software Foundation, either version 3 of the\n  - License, or (at your option) any later version.\n  -\n  - This program is distributed in the hope that it will be useful,\n  - but WITHOUT ANY WARRANTY; without even the implied warranty of\n  - MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the\n  - GNU Affero General Public License for more details.\n  -\n  - You should have received a copy of the GNU Affero General Public License\n  - along with this program. If not, see <http://www.gnu.org/licenses/>.\n  -\n  -->\n\n<template>\n\t<NcButton v-tooltip=\"title\" :aria-label=\"title\" class=\"app-details-toggle\">\n\t\t<template #icon>\n\t\t\t<ArrowRight :size=\"20\" />\n\t\t</template>\n\t</NcButton>\n</template>\n\n<script>\nimport NcButton from '../NcButton/index.js'\nimport { t } from '../../l10n.js'\nimport Tooltip from '../../directives/Tooltip/index.js'\n\nimport { emit } from '@nextcloud/event-bus'\n\nimport ArrowRight from 'vue-material-design-icons/ArrowRight.vue'\n\nexport default {\n\tname: 'NcAppDetailsToggle',\n\n\tdirectives: {\n\t\ttooltip: Tooltip,\n\t},\n\n\tcomponents: {\n\t\tNcButton,\n\t\tArrowRight,\n\t},\n\n\tcomputed: {\n\t\ttitle() {\n\t\t\treturn t('Go back to the list')\n\t\t},\n\t},\n\n\tbeforeMount() {\n\t\tthis.toggleAppNavigationButton(true)\n\t},\n\n\tbeforeDestroy() {\n\t\tthis.toggleAppNavigationButton(false)\n\t},\n\n\tmethods: {\n\t\ttoggleAppNavigationButton(hide = true) {\n\t\t\tconst appNavigationToggle = document.querySelector('.app-navigation .app-navigation-toggle')\n\t\t\tif (appNavigationToggle) {\n\t\t\t\tappNavigationToggle.style.display = hide ? 'none' : null\n\n\t\t\t\t// If we hide the NavigationToggle, we need to make sure the Navigation is also closed\n\t\t\t\tif (hide === true) {\n\t\t\t\t\temit('toggle-navigation', { open: false })\n\t\t\t\t}\n\t\t\t}\n\t\t},\n\t},\n}\n</script>\n\n<style lang=\"scss\" scoped>\n.app-details-toggle {\n\tposition: fixed;\n\twidth: $clickable-area;\n\theight: $clickable-area;\n\tpadding: $icon-margin;\n\tcursor: pointer;\n\topacity: .6;\n\ttransform: rotate(180deg);\n\tbackground-color: var(--color-main-background);\n\tz-index: 2000;\n\n\t&:active,\n\t&:hover,\n\t&:focus {\n\t\topacity: 1;\n\t}\n}\n</style>\n","<!--\n - @copyright Copyright (c) 2019 Christoph Wurst <christoph@winzerhof-wurst.at>\n -\n - @author Christoph Wurst <christoph@winzerhof-wurst.at>\n - @author Marco Ambrosini <marcoambrosini@icloud.com>\n - @author John Molakvoæ <skjnldsv@protonmail.com>\n -\n - @license GNU AGPL version 3 or any later version\n -\n - This program is free software: you can redistribute it and/or modify\n - it under the terms of the GNU Affero General Public License as\n - published by the Free Software Foundation, either version 3 of the\n - License, or (at your option) any later version.\n -\n - This program is distributed in the hope that it will be useful,\n - but WITHOUT ANY WARRANTY; without even the implied warranty of\n - MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the\n - GNU Affero General Public License for more details.\n -\n - You should have received a copy of the GNU Affero General Public License\n - along with this program. If not, see <http://www.gnu.org/licenses/>.\n -\n -->\n<docs>\n### General description\n\nThis components provides a wrapper around the main app's content.\n\nSingle-column layouts can just use the default slot. A resizable column\ncan be added by providing content to the named slot `list`.\n\n### CSS variables\nIn the css section some css variables are declared and will be available for\nall the children of the NcAppContent component\n\n### Examples\n\n#### Usage: Single-column content\n```vue\n<template>\n\t<NcAppContent>\n\t\t<h2>Single-column main content</h2>\n\t</NcAppContent>\n</template>\n```\n\n#### Usage: Two resizable columns\n```vue\n<template>\n\t<NcAppContent>\n\t\t<template #list>\n\t\t\t<div>Resizable list content</div>\n\t\t</template>\n\n\t\t<div>Main content</div>\n\t</NcAppContent>\n</template>\n```\n\n#### Overriding Defaults\nThe default, min and max sizes (in percent) of the resizable list column can be overridden.\nThe list size must be between the min and the max width value.\n\n```\n<NcAppContent\n\t:list-size=\"35\"\n\t:list-min-width=\"20\"\n\t:list-max-width=\"45\"\n>...</NcAppContent>\n```\n</docs>\n\n<template>\n\t<main id=\"app-content-vue\" class=\"app-content no-snapper\" :class=\"{ 'app-content--has-list': hasList }\">\n\t\t<h1 v-if=\"pageHeading\" class=\"hidden-visually\">\n\t\t\t{{ pageHeading }}\n\t\t</h1>\n\n\t\t<template v-if=\"hasList\">\n\t\t\t<!-- Mobile view does not allow resizeable panes -->\n\t\t\t<div v-if=\"isMobile\"\n\t\t\t\t:class=\"showDetails ? 'app-content-wrapper--show-details' : 'app-content-wrapper--show-list'\"\n\t\t\t\tclass=\"app-content-wrapper app-content-wrapper--mobile\">\n\t\t\t\t<NcAppDetailsToggle v-if=\"hasList && showDetails\" @click.native.stop.prevent=\"hideDetails\" />\n\n\t\t\t\t<slot name=\"list\" />\n\t\t\t\t<slot />\n\t\t\t</div>\n\n\t\t\t<div v-else class=\"app-content-wrapper\">\n\t\t\t\t<Splitpanes class=\"default-theme\"\n\t\t\t\t\t@resized=\"handlePaneResize\">\n\t\t\t\t\t<Pane class=\"splitpanes__pane-list\"\n\t\t\t\t\t\t:size=\"listPaneSize || paneDefaults.list.size\"\n\t\t\t\t\t\t:min-size=\"paneDefaults.list.min\"\n\t\t\t\t\t\t:max-size=\"paneDefaults.list.max\">\n\t\t\t\t\t\t<!-- @slot Provide a list to the app content -->\n\t\t\t\t\t\t<slot name=\"list\" />\n\t\t\t\t\t</Pane>\n\n\t\t\t\t\t<Pane class=\"splitpanes__pane-details\"\n\t\t\t\t\t\t:size=\"detailsPaneSize\"\n\t\t\t\t\t\t:min-size=\"paneDefaults.details.min\"\n\t\t\t\t\t\t:max-size=\"paneDefaults.details.max\">\n\t\t\t\t\t\t<!-- @slot Provide the main content to the app content -->\n\t\t\t\t\t\t<slot />\n\t\t\t\t\t</Pane>\n\t\t\t\t</Splitpanes>\n\t\t\t</div>\n\t\t</template>\n\n\t\t<!-- @slot Provide the main content to the app content -->\n\t\t<slot v-else />\n\t</main>\n</template>\n\n<script>\nimport NcAppDetailsToggle from './NcAppDetailsToggle.vue'\nimport { useIsMobile } from '../../composables/useIsMobile/index.js'\n\nimport { getBuilder } from '@nextcloud/browser-storage'\nimport { emit } from '@nextcloud/event-bus'\nimport { useSwipe } from '@vueuse/core'\nimport { Splitpanes, Pane } from 'splitpanes'\n\nimport 'splitpanes/dist/splitpanes.css'\n\nconst browserStorage = getBuilder('nextcloud').persist().build()\n\n/**\n * App content container to be used for the main content of your app\n *\n */\nexport default {\n\tname: 'NcAppContent',\n\n\tcomponents: {\n\t\tNcAppDetailsToggle,\n\t\tPane,\n\t\tSplitpanes,\n\t},\n\n\tprops: {\n\t\t/**\n\t\t * Allows to disable the control by swipe of the app navigation open state\n\t\t */\n\t\tallowSwipeNavigation: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: true,\n\t\t},\n\n\t\t/**\n\t\t * Allows you to set the default width of the resizable list in %\n\t\t * Must be between listMinWidth and listMaxWidth\n\t\t */\n\t\tlistSize: {\n\t\t\ttype: Number,\n\t\t\tdefault: 20,\n\t\t},\n\n\t\t/**\n\t\t * Allows you to set the minimum width of the list column in %\n\t\t */\n\t\tlistMinWidth: {\n\t\t\ttype: Number,\n\t\t\tdefault: 15,\n\t\t},\n\n\t\t/**\n\t\t * Allows you to set the maximum width of the list column in %\n\t\t */\n\t\tlistMaxWidth: {\n\t\t\ttype: Number,\n\t\t\tdefault: 40,\n\t\t},\n\n\t\t/**\n\t\t * Specify the config key for the pane config sizes\n\t\t * Default is the global var appName if you use the webpack-vue-config\n\t\t */\n\t\tpaneConfigKey: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\n\t\t/**\n\t\t * When in mobile view, only the list or the details are shown\n\t\t * If you provide a list, you need to provide a variable\n\t\t * that will be set to true by the user when an element of\n\t\t * the list gets selected. The details will then show a back\n\t\t * arrow to return to the list that will update this prop to false.\n\t\t */\n\t\tshowDetails: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: true,\n\t\t},\n\n\t\t/**\n\t\t * Specify the `<h1>` page heading\n\t\t */\n\t\tpageHeading: {\n\t\t\ttype: String,\n\t\t\tdefault: null,\n\t\t},\n\t},\n\n\temits: [\n\t\t'update:showDetails',\n\t\t'resize:list',\n\t],\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\tcontentHeight: 0,\n\t\t\thasList: false,\n\n\t\t\tswiping: {},\n\t\t\tlistPaneSize: this.restorePaneConfig(),\n\t\t}\n\t},\n\n\tcomputed: {\n\t\tpaneConfigID() {\n\t\t\t// If provided, let's use it\n\t\t\tif (this.paneConfigKey !== '') {\n\t\t\t\treturn `pane-list-size-${this.paneConfigKey}`\n\t\t\t}\n\n\t\t\ttry {\n\t\t\t\t// Using the webpack-vue-config, appName is a global variable\n\t\t\t\t// This will throw a ReferenceError when the global variable is missing\n\t\t\t\t// In that case either you provide paneConfigKey or else it fallback\n\t\t\t\t// to a global storage key\n\t\t\t\treturn `pane-list-size-${appName}`\n\t\t\t} catch (e) {\n\t\t\t\tconsole.info('[INFO] AppContent:', 'falling back to global nextcloud pane config')\n\t\t\t\treturn 'pane-list-size-nextcloud'\n\t\t\t}\n\t\t},\n\n\t\tdetailsPaneSize() {\n\t\t\tif (this.listPaneSize) {\n\t\t\t\treturn 100 - this.listPaneSize\n\t\t\t}\n\t\t\treturn this.paneDefaults.details.size\n\t\t},\n\n\t\tpaneDefaults() {\n\t\t\treturn {\n\t\t\t\tlist: {\n\t\t\t\t\tsize: this.listSize,\n\t\t\t\t\tmin: this.listMinWidth,\n\t\t\t\t\tmax: this.listMaxWidth,\n\t\t\t\t},\n\n\t\t\t\t// set the inverse values of the details column\n\t\t\t\t// based on the provided (or default) values of the list column\n\t\t\t\tdetails: {\n\t\t\t\t\tsize: 100 - this.listSize,\n\t\t\t\t\tmin: 100 - this.listMaxWidth,\n\t\t\t\t\tmax: 100 - this.listMinWidth,\n\t\t\t\t},\n\t\t\t}\n\t\t},\n\t},\n\n\tupdated() {\n\t\tthis.checkListSlot()\n\t},\n\n\tmounted() {\n\t\tif (this.allowSwipeNavigation) {\n\t\t\tthis.swiping = useSwipe(this.$el, {\n\t\t\t\tonSwipeEnd: this.handleSwipe,\n\t\t\t})\n\t\t}\n\n\t\tthis.checkListSlot()\n\t\tthis.restorePaneConfig()\n\t},\n\n\tmethods: {\n\t\t/**\n\t\t * handle the swipe event\n\t\t *\n\t\t * @param {TouchEvent} e The touch event\n\t\t * @param {import('@vueuse/core').SwipeDirection} direction The swipe direction of the event\n\t\t */\n\t\thandleSwipe(e, direction) {\n\t\t\tconst minSwipeX = 70\n\t\t\tconst touchZone = 300\n\t\t\tif (Math.abs(this.swiping.lengthX) > minSwipeX) {\n\t\t\t\tif (this.swiping.coordsStart.x < (touchZone / 2) && direction === 'right') {\n\t\t\t\t\temit('toggle-navigation', {\n\t\t\t\t\t\topen: true,\n\t\t\t\t\t})\n\t\t\t\t} else if (this.swiping.coordsStart.x < touchZone * 1.5 && direction === 'left') {\n\t\t\t\t\temit('toggle-navigation', {\n\t\t\t\t\t\topen: false,\n\t\t\t\t\t})\n\t\t\t\t}\n\t\t\t}\n\t\t},\n\n\t\thandlePaneResize(event) {\n\t\t\tconst listPaneSize = parseInt(event[0].size, 10)\n\t\t\tbrowserStorage.setItem(this.paneConfigID, JSON.stringify(listPaneSize))\n\t\t\tthis.listPaneSize = listPaneSize\n\t\t\t/**\n\t\t\t * Emitted when the list pane is resized by the user\n\t\t\t */\n\t\t\tthis.$emit('resize:list', { size: listPaneSize })\n\t\t\tconsole.debug('AppContent pane config', listPaneSize)\n\t\t},\n\n\t\t// $slots is not reactive, we need to update this manually\n\t\tcheckListSlot() {\n\t\t\tconst hasListSlot = !!this.$slots.list\n\t\t\tif (this.hasList !== hasListSlot) {\n\t\t\t\tthis.hasList = hasListSlot\n\t\t\t}\n\t\t},\n\n\t\t// browserStorage is not reactive, we need to update this manually\n\t\trestorePaneConfig() {\n\t\t\tconst listPaneSize = parseInt(browserStorage.getItem(this.paneConfigID), 10)\n\t\t\tif (!isNaN(listPaneSize) && listPaneSize !== this.listPaneSize) {\n\t\t\t\tconsole.debug('AppContent pane config', listPaneSize)\n\t\t\t\tthis.listPaneSize = listPaneSize\n\t\t\t\treturn listPaneSize\n\t\t\t}\n\t\t},\n\n\t\t/**\n\t\t * The user clicked the back arrow from the details view\n\t\t */\n\t\thideDetails() {\n\t\t\tthis.$emit('update:showDetails', false)\n\t\t},\n\t},\n}\n</script>\n<style lang=\"scss\" scoped>\n\n.app-content {\n\tposition: initial;\n\tz-index: 1000;\n\tflex-basis: 100vw;\n\theight: 100%;\n\t// Overriding server styles TODO: cleanup!\n\tmargin: 0 !important;\n\tbackground-color: var(--color-main-background);\n\tmin-width: 0;\n\n\t&:not(.app-content--has-list) {\n\t\toverflow: auto;\n\t}\n}\n\n.app-content-wrapper {\n\tposition: relative;\n\twidth: 100%;\n\theight: 100%;\n}\n\n// Mobile list/details handling\n.app-content-wrapper--mobile {\n\t&.app-content-wrapper--show-list :deep() {\n\t\t.app-content-list {\n\t\t\tdisplay: flex;\n\t\t}\n\t\t.app-content-details {\n\t\t\tdisplay: none;\n\t\t}\n\t}\n\t&.app-content-wrapper--show-details :deep() {\n\t\t.app-content-list {\n\t\t\tdisplay: none;\n\t\t}\n\t\t.app-content-details {\n\t\t\tdisplay: block;\n\t\t}\n\t}\n}\n\n:deep(.splitpanes.default-theme) {\n\t.app-content-list {\n\t\tmax-width: none;\n\t\t/* Thin scrollbar is hard to catch on resizable columns */\n\t\tscrollbar-width: auto;\n\t}\n\n\t.splitpanes__pane {\n\t\tbackground-color: transparent;\n\t\ttransition: none;\n\n\t\t&-list {\n\t\t\tmin-width: 300px;\n\t\t\tposition: sticky;\n\t\t\ttop: var(--header-height);\n\n\t\t\t@media only screen and (width < $breakpoint-mobile) {\n\t\t\t\tdisplay: none;\n\t\t\t}\n\t\t}\n\n\t\t&-details {\n\t\t\toverflow-y: auto;\n\n\t\t\t@media only screen and (width < $breakpoint-mobile) {\n\t\t\t\tmin-width: 100%;\n\t\t\t}\n\t\t}\n\t}\n\n\t.splitpanes__splitter {\n\t\twidth: 9px;\n\t\tmargin-left: -5px;\n\t\tbackground-color: transparent;\n\t\tborder-left: none;\n\n\t\t&:before,\n\t\t&:after {\n\t\t\tdisplay: none;\n\t\t}\n\t}\n}\n</style>\n"],"names":["_sfc_main$1","VTooltip","NcButton","ArrowRight","t","hide","appNavigationToggle","emit","browserStorage","getBuilder","_sfc_main","NcAppDetailsToggle","Pane","Splitpanes","useIsMobile","useSwipe","direction","event","listPaneSize","hasListSlot"],"mappings":"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"}
+{"version":3,"file":"NcAppContent.mjs","sources":["../../src/components/NcAppContent/NcAppDetailsToggle.vue","../../src/components/NcAppContent/NcAppContent.vue"],"sourcesContent":["<!--\n  - @copyright Copyright (c) 2021 John Molakvoæ <skjnldsv@protonmail.com>\n  -\n  - @author John Molakvoæ <skjnldsv@protonmail.com>\n  -\n  - @license GNU AGPL version 3 or any later version\n  -\n  - This program is free software: you can redistribute it and/or modify\n  - it under the terms of the GNU Affero General Public License as\n  - published by the Free Software Foundation, either version 3 of the\n  - License, or (at your option) any later version.\n  -\n  - This program is distributed in the hope that it will be useful,\n  - but WITHOUT ANY WARRANTY; without even the implied warranty of\n  - MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the\n  - GNU Affero General Public License for more details.\n  -\n  - You should have received a copy of the GNU Affero General Public License\n  - along with this program. If not, see <http://www.gnu.org/licenses/>.\n  -\n  -->\n\n<template>\n\t<NcButton v-tooltip=\"title\" :aria-label=\"title\" class=\"app-details-toggle\">\n\t\t<template #icon>\n\t\t\t<ArrowRight :size=\"20\" />\n\t\t</template>\n\t</NcButton>\n</template>\n\n<script>\nimport NcButton from '../NcButton/index.js'\nimport { t } from '../../l10n.js'\nimport Tooltip from '../../directives/Tooltip/index.js'\n\nimport { emit } from '@nextcloud/event-bus'\n\nimport ArrowRight from 'vue-material-design-icons/ArrowRight.vue'\n\nexport default {\n\tname: 'NcAppDetailsToggle',\n\n\tdirectives: {\n\t\ttooltip: Tooltip,\n\t},\n\n\tcomponents: {\n\t\tNcButton,\n\t\tArrowRight,\n\t},\n\n\tcomputed: {\n\t\ttitle() {\n\t\t\treturn t('Go back to the list')\n\t\t},\n\t},\n\n\tbeforeMount() {\n\t\tthis.toggleAppNavigationButton(true)\n\t},\n\n\tbeforeDestroy() {\n\t\tthis.toggleAppNavigationButton(false)\n\t},\n\n\tmethods: {\n\t\ttoggleAppNavigationButton(hide = true) {\n\t\t\tconst appNavigationToggle = document.querySelector('.app-navigation .app-navigation-toggle')\n\t\t\tif (appNavigationToggle) {\n\t\t\t\tappNavigationToggle.style.display = hide ? 'none' : null\n\n\t\t\t\t// If we hide the NavigationToggle, we need to make sure the Navigation is also closed\n\t\t\t\tif (hide === true) {\n\t\t\t\t\temit('toggle-navigation', { open: false })\n\t\t\t\t}\n\t\t\t}\n\t\t},\n\t},\n}\n</script>\n\n<style lang=\"scss\" scoped>\n.app-details-toggle {\n\tposition: fixed;\n\twidth: $clickable-area;\n\theight: $clickable-area;\n\tpadding: $icon-margin;\n\tcursor: pointer;\n\topacity: .6;\n\ttransform: rotate(180deg);\n\tbackground-color: var(--color-main-background);\n\tz-index: 2000;\n\n\t&:active,\n\t&:hover,\n\t&:focus {\n\t\topacity: 1;\n\t}\n}\n</style>\n","<!--\n - @copyright Copyright (c) 2019 Christoph Wurst <christoph@winzerhof-wurst.at>\n -\n - @author Christoph Wurst <christoph@winzerhof-wurst.at>\n - @author Marco Ambrosini <marcoambrosini@icloud.com>\n - @author John Molakvoæ <skjnldsv@protonmail.com>\n -\n - @license GNU AGPL version 3 or any later version\n -\n - This program is free software: you can redistribute it and/or modify\n - it under the terms of the GNU Affero General Public License as\n - published by the Free Software Foundation, either version 3 of the\n - License, or (at your option) any later version.\n -\n - This program is distributed in the hope that it will be useful,\n - but WITHOUT ANY WARRANTY; without even the implied warranty of\n - MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the\n - GNU Affero General Public License for more details.\n -\n - You should have received a copy of the GNU Affero General Public License\n - along with this program. If not, see <http://www.gnu.org/licenses/>.\n -\n -->\n<docs>\n### General description\n\nThis components provides a wrapper around the main app's content.\n\nSingle-column layouts can just use the default slot. A resizable column\ncan be added by providing content to the named slot `list`.\n\n### CSS variables\nIn the css section some css variables are declared and will be available for\nall the children of the NcAppContent component\n\n### Examples\n\n#### Usage: Single-column content\n```vue\n<template>\n\t<NcAppContent>\n\t\t<h2>Single-column main content</h2>\n\t</NcAppContent>\n</template>\n```\n\n#### Usage: Two resizable columns\n```vue\n<template>\n\t<NcAppContent>\n\t\t<template #list>\n\t\t\t<div>Resizable list content</div>\n\t\t</template>\n\n\t\t<div>Main content</div>\n\t</NcAppContent>\n</template>\n```\n\n#### Overriding Defaults\nThe default, min and max sizes (in percent) of the resizable list column can be overridden.\nThe list size must be between the min and the max width value.\n\n```\n<NcAppContent\n\t:list-size=\"35\"\n\t:list-min-width=\"20\"\n\t:list-max-width=\"45\"\n>...</NcAppContent>\n```\n</docs>\n\n<template>\n\t<main id=\"app-content-vue\" class=\"app-content no-snapper\" :class=\"{ 'app-content--has-list': hasList }\">\n\t\t<h1 v-if=\"pageHeading\" class=\"hidden-visually\">\n\t\t\t{{ pageHeading }}\n\t\t</h1>\n\n\t\t<template v-if=\"hasList\">\n\t\t\t<!-- Mobile view does not allow resizeable panes -->\n\t\t\t<div v-if=\"isMobile\"\n\t\t\t\t:class=\"showDetails ? 'app-content-wrapper--show-details' : 'app-content-wrapper--show-list'\"\n\t\t\t\tclass=\"app-content-wrapper app-content-wrapper--mobile\">\n\t\t\t\t<NcAppDetailsToggle v-if=\"hasList && showDetails\" @click.native.stop.prevent=\"hideDetails\" />\n\n\t\t\t\t<slot name=\"list\" />\n\t\t\t\t<slot />\n\t\t\t</div>\n\n\t\t\t<div v-else class=\"app-content-wrapper\">\n\t\t\t\t<Splitpanes class=\"default-theme\"\n\t\t\t\t\t@resized=\"handlePaneResize\">\n\t\t\t\t\t<Pane class=\"splitpanes__pane-list\"\n\t\t\t\t\t\t:size=\"listPaneSize || paneDefaults.list.size\"\n\t\t\t\t\t\t:min-size=\"paneDefaults.list.min\"\n\t\t\t\t\t\t:max-size=\"paneDefaults.list.max\">\n\t\t\t\t\t\t<!-- @slot Provide a list to the app content -->\n\t\t\t\t\t\t<slot name=\"list\" />\n\t\t\t\t\t</Pane>\n\n\t\t\t\t\t<Pane class=\"splitpanes__pane-details\"\n\t\t\t\t\t\t:size=\"detailsPaneSize\"\n\t\t\t\t\t\t:min-size=\"paneDefaults.details.min\"\n\t\t\t\t\t\t:max-size=\"paneDefaults.details.max\">\n\t\t\t\t\t\t<!-- @slot Provide the main content to the app content -->\n\t\t\t\t\t\t<slot />\n\t\t\t\t\t</Pane>\n\t\t\t\t</Splitpanes>\n\t\t\t</div>\n\t\t</template>\n\n\t\t<!-- @slot Provide the main content to the app content -->\n\t\t<slot v-else />\n\t</main>\n</template>\n\n<script>\nimport NcAppDetailsToggle from './NcAppDetailsToggle.vue'\nimport { useIsMobile } from '../../composables/useIsMobile/index.js'\n\nimport { getBuilder } from '@nextcloud/browser-storage'\nimport { emit } from '@nextcloud/event-bus'\nimport { useSwipe } from '@vueuse/core'\nimport { Splitpanes, Pane } from 'splitpanes'\n\nimport 'splitpanes/dist/splitpanes.css'\n\nconst browserStorage = getBuilder('nextcloud').persist().build()\n\n/**\n * App content container to be used for the main content of your app\n *\n */\nexport default {\n\tname: 'NcAppContent',\n\n\tcomponents: {\n\t\tNcAppDetailsToggle,\n\t\tPane,\n\t\tSplitpanes,\n\t},\n\n\tprops: {\n\t\t/**\n\t\t * Allows to disable the control by swipe of the app navigation open state\n\t\t */\n\t\tallowSwipeNavigation: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: true,\n\t\t},\n\n\t\t/**\n\t\t * Allows you to set the default width of the resizable list in %\n\t\t * Must be between listMinWidth and listMaxWidth\n\t\t */\n\t\tlistSize: {\n\t\t\ttype: Number,\n\t\t\tdefault: 20,\n\t\t},\n\n\t\t/**\n\t\t * Allows you to set the minimum width of the list column in %\n\t\t */\n\t\tlistMinWidth: {\n\t\t\ttype: Number,\n\t\t\tdefault: 15,\n\t\t},\n\n\t\t/**\n\t\t * Allows you to set the maximum width of the list column in %\n\t\t */\n\t\tlistMaxWidth: {\n\t\t\ttype: Number,\n\t\t\tdefault: 40,\n\t\t},\n\n\t\t/**\n\t\t * Specify the config key for the pane config sizes\n\t\t * Default is the global var appName if you use the webpack-vue-config\n\t\t */\n\t\tpaneConfigKey: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\n\t\t/**\n\t\t * When in mobile view, only the list or the details are shown\n\t\t * If you provide a list, you need to provide a variable\n\t\t * that will be set to true by the user when an element of\n\t\t * the list gets selected. The details will then show a back\n\t\t * arrow to return to the list that will update this prop to false.\n\t\t */\n\t\tshowDetails: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: true,\n\t\t},\n\n\t\t/**\n\t\t * Specify the `<h1>` page heading\n\t\t */\n\t\tpageHeading: {\n\t\t\ttype: String,\n\t\t\tdefault: null,\n\t\t},\n\t},\n\n\temits: [\n\t\t'update:showDetails',\n\t\t'resize:list',\n\t],\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\tcontentHeight: 0,\n\t\t\thasList: false,\n\n\t\t\tswiping: {},\n\t\t\tlistPaneSize: this.restorePaneConfig(),\n\t\t}\n\t},\n\n\tcomputed: {\n\t\tpaneConfigID() {\n\t\t\t// If provided, let's use it\n\t\t\tif (this.paneConfigKey !== '') {\n\t\t\t\treturn `pane-list-size-${this.paneConfigKey}`\n\t\t\t}\n\n\t\t\ttry {\n\t\t\t\t// Using the webpack-vue-config, appName is a global variable\n\t\t\t\t// This will throw a ReferenceError when the global variable is missing\n\t\t\t\t// In that case either you provide paneConfigKey or else it fallback\n\t\t\t\t// to a global storage key\n\t\t\t\treturn `pane-list-size-${appName}`\n\t\t\t} catch (e) {\n\t\t\t\tconsole.info('[INFO] AppContent:', 'falling back to global nextcloud pane config')\n\t\t\t\treturn 'pane-list-size-nextcloud'\n\t\t\t}\n\t\t},\n\n\t\tdetailsPaneSize() {\n\t\t\tif (this.listPaneSize) {\n\t\t\t\treturn 100 - this.listPaneSize\n\t\t\t}\n\t\t\treturn this.paneDefaults.details.size\n\t\t},\n\n\t\tpaneDefaults() {\n\t\t\treturn {\n\t\t\t\tlist: {\n\t\t\t\t\tsize: this.listSize,\n\t\t\t\t\tmin: this.listMinWidth,\n\t\t\t\t\tmax: this.listMaxWidth,\n\t\t\t\t},\n\n\t\t\t\t// set the inverse values of the details column\n\t\t\t\t// based on the provided (or default) values of the list column\n\t\t\t\tdetails: {\n\t\t\t\t\tsize: 100 - this.listSize,\n\t\t\t\t\tmin: 100 - this.listMaxWidth,\n\t\t\t\t\tmax: 100 - this.listMinWidth,\n\t\t\t\t},\n\t\t\t}\n\t\t},\n\t},\n\n\tupdated() {\n\t\tthis.checkListSlot()\n\t},\n\n\tmounted() {\n\t\tif (this.allowSwipeNavigation) {\n\t\t\tthis.swiping = useSwipe(this.$el, {\n\t\t\t\tonSwipeEnd: this.handleSwipe,\n\t\t\t})\n\t\t}\n\n\t\tthis.checkListSlot()\n\t\tthis.restorePaneConfig()\n\t},\n\n\tmethods: {\n\t\t/**\n\t\t * handle the swipe event\n\t\t *\n\t\t * @param {TouchEvent} e The touch event\n\t\t * @param {import('@vueuse/core').SwipeDirection} direction The swipe direction of the event\n\t\t */\n\t\thandleSwipe(e, direction) {\n\t\t\tconst minSwipeX = 70\n\t\t\tconst touchZone = 300\n\t\t\tif (Math.abs(this.swiping.lengthX) > minSwipeX) {\n\t\t\t\tif (this.swiping.coordsStart.x < (touchZone / 2) && direction === 'right') {\n\t\t\t\t\temit('toggle-navigation', {\n\t\t\t\t\t\topen: true,\n\t\t\t\t\t})\n\t\t\t\t} else if (this.swiping.coordsStart.x < touchZone * 1.5 && direction === 'left') {\n\t\t\t\t\temit('toggle-navigation', {\n\t\t\t\t\t\topen: false,\n\t\t\t\t\t})\n\t\t\t\t}\n\t\t\t}\n\t\t},\n\n\t\thandlePaneResize(event) {\n\t\t\tconst listPaneSize = parseInt(event[0].size, 10)\n\t\t\tbrowserStorage.setItem(this.paneConfigID, JSON.stringify(listPaneSize))\n\t\t\tthis.listPaneSize = listPaneSize\n\t\t\t/**\n\t\t\t * Emitted when the list pane is resized by the user\n\t\t\t */\n\t\t\tthis.$emit('resize:list', { size: listPaneSize })\n\t\t\tconsole.debug('AppContent pane config', listPaneSize)\n\t\t},\n\n\t\t// $slots is not reactive, we need to update this manually\n\t\tcheckListSlot() {\n\t\t\tconst hasListSlot = !!this.$slots.list\n\t\t\tif (this.hasList !== hasListSlot) {\n\t\t\t\tthis.hasList = hasListSlot\n\t\t\t}\n\t\t},\n\n\t\t// browserStorage is not reactive, we need to update this manually\n\t\trestorePaneConfig() {\n\t\t\tconst listPaneSize = parseInt(browserStorage.getItem(this.paneConfigID), 10)\n\t\t\tif (!isNaN(listPaneSize) && listPaneSize !== this.listPaneSize) {\n\t\t\t\tconsole.debug('AppContent pane config', listPaneSize)\n\t\t\t\tthis.listPaneSize = listPaneSize\n\t\t\t\treturn listPaneSize\n\t\t\t}\n\t\t},\n\n\t\t/**\n\t\t * The user clicked the back arrow from the details view\n\t\t */\n\t\thideDetails() {\n\t\t\tthis.$emit('update:showDetails', false)\n\t\t},\n\t},\n}\n</script>\n<style lang=\"scss\" scoped>\n\n.app-content {\n\tposition: initial;\n\tz-index: 1000;\n\tflex-basis: 100vw;\n\theight: 100%;\n\t// Overriding server styles TODO: cleanup!\n\tmargin: 0 !important;\n\tbackground-color: var(--color-main-background);\n\tmin-width: 0;\n\n\t&:not(.app-content--has-list) {\n\t\toverflow: auto;\n\t}\n}\n\n.app-content-wrapper {\n\tposition: relative;\n\twidth: 100%;\n\theight: 100%;\n}\n\n// Mobile list/details handling\n.app-content-wrapper--mobile {\n\t&.app-content-wrapper--show-list :deep() {\n\t\t.app-content-list {\n\t\t\tdisplay: flex;\n\t\t}\n\t\t.app-content-details {\n\t\t\tdisplay: none;\n\t\t}\n\t}\n\t&.app-content-wrapper--show-details :deep() {\n\t\t.app-content-list {\n\t\t\tdisplay: none;\n\t\t}\n\t\t.app-content-details {\n\t\t\tdisplay: block;\n\t\t}\n\t}\n}\n\n:deep(.splitpanes.default-theme) {\n\t.app-content-list {\n\t\tmax-width: none;\n\t\t/* Thin scrollbar is hard to catch on resizable columns */\n\t\tscrollbar-width: auto;\n\t}\n\n\t.splitpanes__pane {\n\t\tbackground-color: transparent;\n\t\ttransition: none;\n\n\t\t&-list {\n\t\t\tmin-width: 300px;\n\t\t\tposition: sticky;\n\t\t\ttop: var(--header-height);\n\n\t\t\t@media only screen and (width < $breakpoint-mobile) {\n\t\t\t\tdisplay: none;\n\t\t\t}\n\t\t}\n\n\t\t&-details {\n\t\t\toverflow-y: auto;\n\n\t\t\t@media only screen and (width < $breakpoint-mobile) {\n\t\t\t\tmin-width: 100%;\n\t\t\t}\n\t\t}\n\t}\n\n\t.splitpanes__splitter {\n\t\twidth: 9px;\n\t\tmargin-left: -5px;\n\t\tbackground-color: transparent;\n\t\tborder-left: none;\n\n\t\t&:before,\n\t\t&:after {\n\t\t\tdisplay: none;\n\t\t}\n\t}\n}\n</style>\n"],"names":["_sfc_main$1","VTooltip","NcButton","ArrowRight","t","hide","appNavigationToggle","emit","browserStorage","getBuilder","_sfc_main","NcAppDetailsToggle","Pane","Splitpanes","useIsMobile","useSwipe","direction","event","listPaneSize","hasListSlot"],"mappings":"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"}

package/dist/Components/NcAppNavigation.cjs

@@ -1,5 +1,5 @@
 var _ = require("../assets/index-5784183b.css");
-const o = require("../chunks/NcAppNavigationToggle-6a975868.cjs"), s = require("../Composables/useIsMobile.cjs"), p = require("../chunks/focusTrap-14985831.cjs"), i = require("@nextcloud/event-bus"), l = require("focus-trap"), r = require("../chunks/_plugin-vue2_normalizer-7f9efb60.cjs");
+const o = require("../chunks/NcAppNavigationToggle-6d192bea.cjs"), s = require("../Composables/useIsMobile.cjs"), p = require("../chunks/focusTrap-14985831.cjs"), i = require("@nextcloud/event-bus"), l = require("focus-trap"), r = require("../chunks/_plugin-vue2_normalizer-7f9efb60.cjs");
 const g = {
   name: "NcAppNavigation",
   components: {

package/dist/Components/NcAppNavigation.mjs

@@ -1,5 +1,5 @@
 import "../assets/index-5784183b.css";
-import { N as n } from "../chunks/NcAppNavigationToggle-f5591773.mjs";
+import { N as n } from "../chunks/NcAppNavigationToggle-0bc638a8.mjs";
 import { useIsMobile as s } from "../Composables/useIsMobile.mjs";
 import { g as p } from "../chunks/focusTrap-5d0f71d4.mjs";
 import { subscribe as l, emit as o, unsubscribe as r } from "@nextcloud/event-bus";

package/dist/Components/NcAppNavigationCaption.cjs

@@ -1,4 +1,4 @@
-var p = require("../assets/index-f72cef5d.css");
+var p = require("../assets/index-fe84a063.css");
 const s = require("./NcActions.cjs"), i = require("../chunks/_plugin-vue2_normalizer-7f9efb60.cjs");
 const e = {
   name: "NcAppNavigationCaption",
@@ -36,7 +36,7 @@ var o = function() {
   a,
   !1,
   null,
-  "5d751802",
+  "3b1f7071",
   null,
   null
 );

package/dist/Components/NcAppNavigationCaption.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"NcAppNavigationCaption.cjs","sources":["../../src/components/NcAppNavigationCaption/NcAppNavigationCaption.vue"],"sourcesContent":["<docs>\n```vue\n\t<template>\n\t\t<ul>\n\t\t\t<NcAppNavigationCaption\n\t\t\t\tname=\"Your caption goes here\">\n\t\t\t\t<template #actions>\n\t\t\t\t\t<NcActionButton>\n\t\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t\t<Plus :size=\"20\" />\n\t\t\t\t\t\t</template>\n\t\t\t\t\t\tThis is an action\n\t\t\t\t\t</NcActionButton>\n\t\t\t\t</template>\n\t\t\t</NcAppNavigationCaption>\n\t\t</ul>\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\t<style scoped>\n\t\t/* mock the appnavigation */\n\t\tul {\n\t\t\tbackground-color: #cce6f4;\n\t\t}\n\t</style>\n```\n\n### Element with a slot for custom actions icon\n```vue\n\t<template>\n\t\t<ul>\n\t\t\t<NcAppNavigationCaption\n\t\t\t\tname=\"Your caption goes here\">\n\t\t\t\t<template #actionsTriggerIcon>\n\t\t\t\t\t<Plus slot=\"icon\" :size=\"20\" />\n\t\t\t\t</template>\n\t\t\t\t<template #actions>\n\t\t\t\t\t<NcActionButton>\n\t\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t\t<Pencil :size=\"20\" />\n\t\t\t\t\t\t</template>\n\t\t\t\t\t\tRename\n\t\t\t\t\t</NcActionButton>\n\t\t\t\t\t<NcActionButton>\n\t\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t\t<Delete :size=\"20\" />\n\t\t\t\t\t\t</template>\n\t\t\t\t\t\tDelete\n\t\t\t\t\t</NcActionButton>\n\t\t\t\t\t<NcActionButton>\n\t\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t\t<ArrowRight :size=\"20\" />\n\t\t\t\t\t\t</template>\n\t\t\t\t\t\tValidate\n\t\t\t\t\t</NcActionButton>\n\t\t\t\t\t<NcActionButton>\n\t\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t\t<Download :size=\"20\" />\n\t\t\t\t\t\t</template>\n\t\t\t\t\t\tDownload\n\t\t\t\t\t</NcActionButton>\n\t\t\t\t</template>\n\t\t\t</NcAppNavigationCaption>\n\t\t</ul>\n\t</template>\n\t<script>\n\t\timport ArrowRight from 'vue-material-design-icons/ArrowRight'\n\t\timport Delete from 'vue-material-design-icons/Delete'\n\t\timport Download from 'vue-material-design-icons/Download'\n\t\timport Pencil from 'vue-material-design-icons/Pencil'\n\t\timport Plus from 'vue-material-design-icons/Plus'\n\n\t\texport default {\n\t\t\tcomponents: {\n\t\t\t\tArrowRight,\n\t\t\t\tDelete,\n\t\t\t\tDownload,\n\t\t\t\tPencil,\n\t\t\t\tPlus,\n\t\t\t}\n\t\t}\n\t</script>\n\t<style scoped>\n\t\t/* mock the appnavigation */\n\t\tul {\n\t\t\tbackground-color: #cce6f4;\n\t\t}\n\t</style>\n```\n\n</docs>\n\n<template>\n\t<li class=\"app-navigation-caption\">\n\t\t<!-- Name of the caption -->\n\t\t<h2 class=\"app-navigation-caption__name\">\n\t\t\t{{ name }}\n\t\t</h2>\n\n\t\t<!-- Actions -->\n\t\t<div v-if=\"hasActions\"\n\t\t\tclass=\"app-navigation-caption__actions\">\n\t\t\t<NcActions v-bind=\"$attrs\"\n\t\t\t\tv-on=\"$listeners\">\n\t\t\t\t<!-- @slot Slot for the actions menu -->\n\t\t\t\t<slot name=\"actions\" />\n\t\t\t\t<template #icon>\n\t\t\t\t\t<slot name=\"actionsTriggerIcon\" />\n\t\t\t\t</template>\n\t\t\t</NcActions>\n\t\t</div>\n\t</li>\n</template>\n\n<script>\nimport NcActions from '../NcActions/index.js'\n\nexport default {\n\tname: 'NcAppNavigationCaption',\n\n\tcomponents: {\n\t\tNcActions,\n\t},\n\n\tinheritAttrs: false,\n\n\tprops: {\n\t\tname: {\n\t\t\ttype: String,\n\t\t\trequired: true,\n\t\t},\n\n\t\t/**\n\t\t * Any [NcActions](#/Components/NcActions?id=ncactions-1) prop\n\t\t */\n\t\t// Not an actual prop but needed to show in vue-styleguidist docs\n\t\t// eslint-disable-next-line\n\t\t' ': {},\n\t},\n\n\tcomputed: {\n\t\t// Check if the actions slot is populated\n\t\thasActions() {\n\t\t\treturn !!this.$slots.actions\n\t\t},\n\t},\n}\n</script>\n\n<style lang=\"scss\" scoped>\n\n.app-navigation-caption {\n\tdisplay: flex;\n\tjustify-content: space-between;\n\n\t&__name {\n\t\tfont-weight: bold;\n\t\tcolor: var(--color-main-text);\n\t\tfont-size: var(--default-font-size);\n\t\tline-height: $clickable-area;\n\t\twhite-space: nowrap;\n\t\toverflow: hidden;\n\t\ttext-overflow: ellipsis;\n\t\tbox-shadow: none !important;\n\t\tflex-shrink: 0;\n\t\t// padding to align the name with the icon of app navigation items\n\t\tpadding: 0 calc(var(--default-grid-baseline, 4px) * 2) 0 calc(var(--default-grid-baseline, 4px) * 3);\n\t}\n\n\t&__actions {\n\t\tflex: 0 0 $clickable-area;\n\t}\n}\n\n// extra top space if it's not the first item on the list\n.app-navigation-caption:not(:first-child) {\n\tmargin-top: math.div($clickable-area, 2);\n}\n</style>\n"],"names":["_sfc_main","Components_NcActions"],"mappings":";;AA4HA,MAAAA,IAAA;AAAA,EACA,MAAA;AAAA,EAEA,YAAA;AAAA,IACA,WAAAC;AAAA,EACA;AAAA,EAEA,cAAA;AAAA,EAEA,OAAA;AAAA,IACA,MAAA;AAAA,MACA,MAAA;AAAA,MACA,UAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOA,KAAA,CAAA;AAAA,EACA;AAAA,EAEA,UAAA;AAAA;AAAA,IAEA,aAAA;AACA,aAAA,CAAA,CAAA,KAAA,OAAA;AAAA,IACA;AAAA,EACA;AACA;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"NcAppNavigationCaption.cjs","sources":["../../src/components/NcAppNavigationCaption/NcAppNavigationCaption.vue"],"sourcesContent":["<docs>\n```vue\n\t<template>\n\t\t<ul class=\"nav\">\n\t\t\t<NcAppNavigationCaption\n\t\t\t\tname=\"Your caption goes here\">\n\t\t\t\t<template #actions>\n\t\t\t\t\t<NcActionButton>\n\t\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t\t<Plus :size=\"20\" />\n\t\t\t\t\t\t</template>\n\t\t\t\t\t\tThis is an action\n\t\t\t\t\t</NcActionButton>\n\t\t\t\t</template>\n\t\t\t</NcAppNavigationCaption>\n\t\t</ul>\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\t<style scoped>\n\t\t/* mock the appnavigation */\n\t\tul.nav {\n\t\t\tbackground-color: #cce6f4;\n\t\t}\n\t</style>\n```\n\n### Element with a slot for custom actions icon\n```vue\n\t<template>\n\t\t<ul class=\"nav\">\n\t\t\t<NcAppNavigationCaption\n\t\t\t\tname=\"Your caption goes here\">\n\t\t\t\t<template #actionsTriggerIcon>\n\t\t\t\t\t<Plus slot=\"icon\" :size=\"20\" />\n\t\t\t\t</template>\n\t\t\t\t<template #actions>\n\t\t\t\t\t<NcActionButton>\n\t\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t\t<Pencil :size=\"20\" />\n\t\t\t\t\t\t</template>\n\t\t\t\t\t\tRename\n\t\t\t\t\t</NcActionButton>\n\t\t\t\t\t<NcActionButton>\n\t\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t\t<Delete :size=\"20\" />\n\t\t\t\t\t\t</template>\n\t\t\t\t\t\tDelete\n\t\t\t\t\t</NcActionButton>\n\t\t\t\t\t<NcActionButton>\n\t\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t\t<ArrowRight :size=\"20\" />\n\t\t\t\t\t\t</template>\n\t\t\t\t\t\tValidate\n\t\t\t\t\t</NcActionButton>\n\t\t\t\t\t<NcActionButton>\n\t\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t\t<Download :size=\"20\" />\n\t\t\t\t\t\t</template>\n\t\t\t\t\t\tDownload\n\t\t\t\t\t</NcActionButton>\n\t\t\t\t</template>\n\t\t\t</NcAppNavigationCaption>\n\t\t</ul>\n\t</template>\n\t<script>\n\t\timport ArrowRight from 'vue-material-design-icons/ArrowRight'\n\t\timport Delete from 'vue-material-design-icons/Delete'\n\t\timport Download from 'vue-material-design-icons/Download'\n\t\timport Pencil from 'vue-material-design-icons/Pencil'\n\t\timport Plus from 'vue-material-design-icons/Plus'\n\n\t\texport default {\n\t\t\tcomponents: {\n\t\t\t\tArrowRight,\n\t\t\t\tDelete,\n\t\t\t\tDownload,\n\t\t\t\tPencil,\n\t\t\t\tPlus,\n\t\t\t}\n\t\t}\n\t</script>\n\t<style scoped>\n\t\t/* mock the appnavigation */\n\t\tul.nav {\n\t\t\tbackground-color: #cce6f4;\n\t\t}\n\t</style>\n```\n\n</docs>\n\n<template>\n\t<li class=\"app-navigation-caption\">\n\t\t<!-- Name of the caption -->\n\t\t<h2 class=\"app-navigation-caption__name\">\n\t\t\t{{ name }}\n\t\t</h2>\n\n\t\t<!-- Actions -->\n\t\t<div v-if=\"hasActions\"\n\t\t\tclass=\"app-navigation-caption__actions\">\n\t\t\t<NcActions v-bind=\"$attrs\"\n\t\t\t\tv-on=\"$listeners\">\n\t\t\t\t<!-- @slot Slot for the actions menu -->\n\t\t\t\t<slot name=\"actions\" />\n\t\t\t\t<template #icon>\n\t\t\t\t\t<slot name=\"actionsTriggerIcon\" />\n\t\t\t\t</template>\n\t\t\t</NcActions>\n\t\t</div>\n\t</li>\n</template>\n\n<script>\nimport NcActions from '../NcActions/index.js'\n\nexport default {\n\tname: 'NcAppNavigationCaption',\n\n\tcomponents: {\n\t\tNcActions,\n\t},\n\n\tinheritAttrs: false,\n\n\tprops: {\n\t\tname: {\n\t\t\ttype: String,\n\t\t\trequired: true,\n\t\t},\n\n\t\t/**\n\t\t * Any [NcActions](#/Components/NcActions?id=ncactions-1) prop\n\t\t */\n\t\t// Not an actual prop but needed to show in vue-styleguidist docs\n\t\t// eslint-disable-next-line\n\t\t' ': {},\n\t},\n\n\tcomputed: {\n\t\t// Check if the actions slot is populated\n\t\thasActions() {\n\t\t\treturn !!this.$slots.actions\n\t\t},\n\t},\n}\n</script>\n\n<style lang=\"scss\" scoped>\n\n.app-navigation-caption {\n\tdisplay: flex;\n\tjustify-content: space-between;\n\n\t&__name {\n\t\tfont-weight: bold;\n\t\tcolor: var(--color-main-text);\n\t\tfont-size: var(--default-font-size);\n\t\tline-height: $clickable-area;\n\t\twhite-space: nowrap;\n\t\toverflow: hidden;\n\t\ttext-overflow: ellipsis;\n\t\tbox-shadow: none !important;\n\t\tflex-shrink: 0;\n\t\t// padding to align the name with the icon of app navigation items\n\t\tpadding: 0 calc(var(--default-grid-baseline, 4px) * 2) 0 calc(var(--default-grid-baseline, 4px) * 3);\n\t}\n\n\t&__actions {\n\t\tflex: 0 0 $clickable-area;\n\t}\n}\n\n// extra top space if it's not the first item on the list\n.app-navigation-caption:not(:first-child) {\n\tmargin-top: math.div($clickable-area, 2);\n}\n</style>\n"],"names":["_sfc_main","Components_NcActions"],"mappings":";;AA4HA,MAAAA,IAAA;AAAA,EACA,MAAA;AAAA,EAEA,YAAA;AAAA,IACA,WAAAC;AAAA,EACA;AAAA,EAEA,cAAA;AAAA,EAEA,OAAA;AAAA,IACA,MAAA;AAAA,MACA,MAAA;AAAA,MACA,UAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOA,KAAA,CAAA;AAAA,EACA;AAAA,EAEA,UAAA;AAAA;AAAA,IAEA,aAAA;AACA,aAAA,CAAA,CAAA,KAAA,OAAA;AAAA,IACA;AAAA,EACA;AACA;;;;;;;;;;;;;;;;;;"}

package/dist/Components/NcAppNavigationCaption.mjs

@@ -1,4 +1,4 @@
-import "../assets/index-f72cef5d.css";
+import "../assets/index-fe84a063.css";
 import a from "./NcActions.mjs";
 import { n as i } from "../chunks/_plugin-vue2_normalizer-71e2aa87.mjs";
 const s = {
@@ -37,7 +37,7 @@ var o = function() {
   e,
   !1,
   null,
-  "5d751802",
+  "3b1f7071",
   null,
   null
 );

package/dist/Components/NcAppNavigationCaption.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"NcAppNavigationCaption.mjs","sources":["../../src/components/NcAppNavigationCaption/NcAppNavigationCaption.vue"],"sourcesContent":["<docs>\n```vue\n\t<template>\n\t\t<ul>\n\t\t\t<NcAppNavigationCaption\n\t\t\t\tname=\"Your caption goes here\">\n\t\t\t\t<template #actions>\n\t\t\t\t\t<NcActionButton>\n\t\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t\t<Plus :size=\"20\" />\n\t\t\t\t\t\t</template>\n\t\t\t\t\t\tThis is an action\n\t\t\t\t\t</NcActionButton>\n\t\t\t\t</template>\n\t\t\t</NcAppNavigationCaption>\n\t\t</ul>\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\t<style scoped>\n\t\t/* mock the appnavigation */\n\t\tul {\n\t\t\tbackground-color: #cce6f4;\n\t\t}\n\t</style>\n```\n\n### Element with a slot for custom actions icon\n```vue\n\t<template>\n\t\t<ul>\n\t\t\t<NcAppNavigationCaption\n\t\t\t\tname=\"Your caption goes here\">\n\t\t\t\t<template #actionsTriggerIcon>\n\t\t\t\t\t<Plus slot=\"icon\" :size=\"20\" />\n\t\t\t\t</template>\n\t\t\t\t<template #actions>\n\t\t\t\t\t<NcActionButton>\n\t\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t\t<Pencil :size=\"20\" />\n\t\t\t\t\t\t</template>\n\t\t\t\t\t\tRename\n\t\t\t\t\t</NcActionButton>\n\t\t\t\t\t<NcActionButton>\n\t\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t\t<Delete :size=\"20\" />\n\t\t\t\t\t\t</template>\n\t\t\t\t\t\tDelete\n\t\t\t\t\t</NcActionButton>\n\t\t\t\t\t<NcActionButton>\n\t\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t\t<ArrowRight :size=\"20\" />\n\t\t\t\t\t\t</template>\n\t\t\t\t\t\tValidate\n\t\t\t\t\t</NcActionButton>\n\t\t\t\t\t<NcActionButton>\n\t\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t\t<Download :size=\"20\" />\n\t\t\t\t\t\t</template>\n\t\t\t\t\t\tDownload\n\t\t\t\t\t</NcActionButton>\n\t\t\t\t</template>\n\t\t\t</NcAppNavigationCaption>\n\t\t</ul>\n\t</template>\n\t<script>\n\t\timport ArrowRight from 'vue-material-design-icons/ArrowRight'\n\t\timport Delete from 'vue-material-design-icons/Delete'\n\t\timport Download from 'vue-material-design-icons/Download'\n\t\timport Pencil from 'vue-material-design-icons/Pencil'\n\t\timport Plus from 'vue-material-design-icons/Plus'\n\n\t\texport default {\n\t\t\tcomponents: {\n\t\t\t\tArrowRight,\n\t\t\t\tDelete,\n\t\t\t\tDownload,\n\t\t\t\tPencil,\n\t\t\t\tPlus,\n\t\t\t}\n\t\t}\n\t</script>\n\t<style scoped>\n\t\t/* mock the appnavigation */\n\t\tul {\n\t\t\tbackground-color: #cce6f4;\n\t\t}\n\t</style>\n```\n\n</docs>\n\n<template>\n\t<li class=\"app-navigation-caption\">\n\t\t<!-- Name of the caption -->\n\t\t<h2 class=\"app-navigation-caption__name\">\n\t\t\t{{ name }}\n\t\t</h2>\n\n\t\t<!-- Actions -->\n\t\t<div v-if=\"hasActions\"\n\t\t\tclass=\"app-navigation-caption__actions\">\n\t\t\t<NcActions v-bind=\"$attrs\"\n\t\t\t\tv-on=\"$listeners\">\n\t\t\t\t<!-- @slot Slot for the actions menu -->\n\t\t\t\t<slot name=\"actions\" />\n\t\t\t\t<template #icon>\n\t\t\t\t\t<slot name=\"actionsTriggerIcon\" />\n\t\t\t\t</template>\n\t\t\t</NcActions>\n\t\t</div>\n\t</li>\n</template>\n\n<script>\nimport NcActions from '../NcActions/index.js'\n\nexport default {\n\tname: 'NcAppNavigationCaption',\n\n\tcomponents: {\n\t\tNcActions,\n\t},\n\n\tinheritAttrs: false,\n\n\tprops: {\n\t\tname: {\n\t\t\ttype: String,\n\t\t\trequired: true,\n\t\t},\n\n\t\t/**\n\t\t * Any [NcActions](#/Components/NcActions?id=ncactions-1) prop\n\t\t */\n\t\t// Not an actual prop but needed to show in vue-styleguidist docs\n\t\t// eslint-disable-next-line\n\t\t' ': {},\n\t},\n\n\tcomputed: {\n\t\t// Check if the actions slot is populated\n\t\thasActions() {\n\t\t\treturn !!this.$slots.actions\n\t\t},\n\t},\n}\n</script>\n\n<style lang=\"scss\" scoped>\n\n.app-navigation-caption {\n\tdisplay: flex;\n\tjustify-content: space-between;\n\n\t&__name {\n\t\tfont-weight: bold;\n\t\tcolor: var(--color-main-text);\n\t\tfont-size: var(--default-font-size);\n\t\tline-height: $clickable-area;\n\t\twhite-space: nowrap;\n\t\toverflow: hidden;\n\t\ttext-overflow: ellipsis;\n\t\tbox-shadow: none !important;\n\t\tflex-shrink: 0;\n\t\t// padding to align the name with the icon of app navigation items\n\t\tpadding: 0 calc(var(--default-grid-baseline, 4px) * 2) 0 calc(var(--default-grid-baseline, 4px) * 3);\n\t}\n\n\t&__actions {\n\t\tflex: 0 0 $clickable-area;\n\t}\n}\n\n// extra top space if it's not the first item on the list\n.app-navigation-caption:not(:first-child) {\n\tmargin-top: math.div($clickable-area, 2);\n}\n</style>\n"],"names":["_sfc_main","NcActions"],"mappings":";;;AA4HA,MAAAA,IAAA;AAAA,EACA,MAAA;AAAA,EAEA,YAAA;AAAA,IACA,WAAAC;AAAA,EACA;AAAA,EAEA,cAAA;AAAA,EAEA,OAAA;AAAA,IACA,MAAA;AAAA,MACA,MAAA;AAAA,MACA,UAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOA,KAAA,CAAA;AAAA,EACA;AAAA,EAEA,UAAA;AAAA;AAAA,IAEA,aAAA;AACA,aAAA,CAAA,CAAA,KAAA,OAAA;AAAA,IACA;AAAA,EACA;AACA;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"NcAppNavigationCaption.mjs","sources":["../../src/components/NcAppNavigationCaption/NcAppNavigationCaption.vue"],"sourcesContent":["<docs>\n```vue\n\t<template>\n\t\t<ul class=\"nav\">\n\t\t\t<NcAppNavigationCaption\n\t\t\t\tname=\"Your caption goes here\">\n\t\t\t\t<template #actions>\n\t\t\t\t\t<NcActionButton>\n\t\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t\t<Plus :size=\"20\" />\n\t\t\t\t\t\t</template>\n\t\t\t\t\t\tThis is an action\n\t\t\t\t\t</NcActionButton>\n\t\t\t\t</template>\n\t\t\t</NcAppNavigationCaption>\n\t\t</ul>\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\t<style scoped>\n\t\t/* mock the appnavigation */\n\t\tul.nav {\n\t\t\tbackground-color: #cce6f4;\n\t\t}\n\t</style>\n```\n\n### Element with a slot for custom actions icon\n```vue\n\t<template>\n\t\t<ul class=\"nav\">\n\t\t\t<NcAppNavigationCaption\n\t\t\t\tname=\"Your caption goes here\">\n\t\t\t\t<template #actionsTriggerIcon>\n\t\t\t\t\t<Plus slot=\"icon\" :size=\"20\" />\n\t\t\t\t</template>\n\t\t\t\t<template #actions>\n\t\t\t\t\t<NcActionButton>\n\t\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t\t<Pencil :size=\"20\" />\n\t\t\t\t\t\t</template>\n\t\t\t\t\t\tRename\n\t\t\t\t\t</NcActionButton>\n\t\t\t\t\t<NcActionButton>\n\t\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t\t<Delete :size=\"20\" />\n\t\t\t\t\t\t</template>\n\t\t\t\t\t\tDelete\n\t\t\t\t\t</NcActionButton>\n\t\t\t\t\t<NcActionButton>\n\t\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t\t<ArrowRight :size=\"20\" />\n\t\t\t\t\t\t</template>\n\t\t\t\t\t\tValidate\n\t\t\t\t\t</NcActionButton>\n\t\t\t\t\t<NcActionButton>\n\t\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t\t<Download :size=\"20\" />\n\t\t\t\t\t\t</template>\n\t\t\t\t\t\tDownload\n\t\t\t\t\t</NcActionButton>\n\t\t\t\t</template>\n\t\t\t</NcAppNavigationCaption>\n\t\t</ul>\n\t</template>\n\t<script>\n\t\timport ArrowRight from 'vue-material-design-icons/ArrowRight'\n\t\timport Delete from 'vue-material-design-icons/Delete'\n\t\timport Download from 'vue-material-design-icons/Download'\n\t\timport Pencil from 'vue-material-design-icons/Pencil'\n\t\timport Plus from 'vue-material-design-icons/Plus'\n\n\t\texport default {\n\t\t\tcomponents: {\n\t\t\t\tArrowRight,\n\t\t\t\tDelete,\n\t\t\t\tDownload,\n\t\t\t\tPencil,\n\t\t\t\tPlus,\n\t\t\t}\n\t\t}\n\t</script>\n\t<style scoped>\n\t\t/* mock the appnavigation */\n\t\tul.nav {\n\t\t\tbackground-color: #cce6f4;\n\t\t}\n\t</style>\n```\n\n</docs>\n\n<template>\n\t<li class=\"app-navigation-caption\">\n\t\t<!-- Name of the caption -->\n\t\t<h2 class=\"app-navigation-caption__name\">\n\t\t\t{{ name }}\n\t\t</h2>\n\n\t\t<!-- Actions -->\n\t\t<div v-if=\"hasActions\"\n\t\t\tclass=\"app-navigation-caption__actions\">\n\t\t\t<NcActions v-bind=\"$attrs\"\n\t\t\t\tv-on=\"$listeners\">\n\t\t\t\t<!-- @slot Slot for the actions menu -->\n\t\t\t\t<slot name=\"actions\" />\n\t\t\t\t<template #icon>\n\t\t\t\t\t<slot name=\"actionsTriggerIcon\" />\n\t\t\t\t</template>\n\t\t\t</NcActions>\n\t\t</div>\n\t</li>\n</template>\n\n<script>\nimport NcActions from '../NcActions/index.js'\n\nexport default {\n\tname: 'NcAppNavigationCaption',\n\n\tcomponents: {\n\t\tNcActions,\n\t},\n\n\tinheritAttrs: false,\n\n\tprops: {\n\t\tname: {\n\t\t\ttype: String,\n\t\t\trequired: true,\n\t\t},\n\n\t\t/**\n\t\t * Any [NcActions](#/Components/NcActions?id=ncactions-1) prop\n\t\t */\n\t\t// Not an actual prop but needed to show in vue-styleguidist docs\n\t\t// eslint-disable-next-line\n\t\t' ': {},\n\t},\n\n\tcomputed: {\n\t\t// Check if the actions slot is populated\n\t\thasActions() {\n\t\t\treturn !!this.$slots.actions\n\t\t},\n\t},\n}\n</script>\n\n<style lang=\"scss\" scoped>\n\n.app-navigation-caption {\n\tdisplay: flex;\n\tjustify-content: space-between;\n\n\t&__name {\n\t\tfont-weight: bold;\n\t\tcolor: var(--color-main-text);\n\t\tfont-size: var(--default-font-size);\n\t\tline-height: $clickable-area;\n\t\twhite-space: nowrap;\n\t\toverflow: hidden;\n\t\ttext-overflow: ellipsis;\n\t\tbox-shadow: none !important;\n\t\tflex-shrink: 0;\n\t\t// padding to align the name with the icon of app navigation items\n\t\tpadding: 0 calc(var(--default-grid-baseline, 4px) * 2) 0 calc(var(--default-grid-baseline, 4px) * 3);\n\t}\n\n\t&__actions {\n\t\tflex: 0 0 $clickable-area;\n\t}\n}\n\n// extra top space if it's not the first item on the list\n.app-navigation-caption:not(:first-child) {\n\tmargin-top: math.div($clickable-area, 2);\n}\n</style>\n"],"names":["_sfc_main","NcActions"],"mappings":";;;AA4HA,MAAAA,IAAA;AAAA,EACA,MAAA;AAAA,EAEA,YAAA;AAAA,IACA,WAAAC;AAAA,EACA;AAAA,EAEA,cAAA;AAAA,EAEA,OAAA;AAAA,IACA,MAAA;AAAA,MACA,MAAA;AAAA,MACA,UAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOA,KAAA,CAAA;AAAA,EACA;AAAA,EAEA,UAAA;AAAA;AAAA,IAEA,aAAA;AACA,aAAA,CAAA,CAAA,KAAA,OAAA;AAAA,IACA;AAAA,EACA;AACA;;;;;;;;;;;;;;;;;"}

package/dist/Components/NcAppNavigationItem.cjs

@@ -1,5 +1,7 @@
-var T = require("../assets/index-5e4bf286.css");
-const c = require("./NcActions.cjs"), u = require("./NcActionButton.cjs"), p = require("./NcLoadingIcon.cjs"), d = require("./NcVNodes.cjs"), f = require("./NcButton.cjs"), s = require("../chunks/l10n-070da9ad.cjs"), _ = require("../chunks/ChevronDown-dc32e51d.cjs"), l = require("../chunks/_plugin-vue2_normalizer-7f9efb60.cjs"), m = require("../Composables/useIsMobile.cjs"), h = require("../chunks/NcInputConfirmCancel-790f5902.cjs"), g = require("../chunks/GenRandomId-c214d235.cjs"), v = {
+var T = require("../assets/index-d8bc189c.css");
+const c = require("./NcActions.cjs"), u = require("./NcActionButton.cjs"), p = require("./NcLoadingIcon.cjs"), d = require("./NcVNodes.cjs"), f = require("./NcButton.cjs"), a = require("../chunks/_l10n-72c5e29e.cjs"), _ = require("../chunks/ChevronDown-dc32e51d.cjs"), o = require("../chunks/_plugin-vue2_normalizer-7f9efb60.cjs"), m = require("../Composables/useIsMobile.cjs"), h = require("../chunks/NcInputConfirmCancel-b99898db.cjs"), g = require("../chunks/GenRandomId-c214d235.cjs");
+a.register(a.t18);
+const v = {
   name: "ChevronUpIcon",
   emits: ["click"],
   props: {
@@ -18,10 +20,10 @@ const c = require("./NcActions.cjs"), u = require("./NcActionButton.cjs"), p = r
 };
 var y = function() {
   var e = this, t = e._self._c;
-  return t("span", e._b({ staticClass: "material-design-icon chevron-up-icon", attrs: { "aria-hidden": !e.title, "aria-label": e.title, role: "img" }, on: { click: function(a) {
-    return e.$emit("click", a);
+  return t("span", e._b({ staticClass: "material-design-icon chevron-up-icon", attrs: { "aria-hidden": !e.title, "aria-label": e.title, role: "img" }, on: { click: function(l) {
+    return e.$emit("click", l);
   } } }, "span", e.$attrs, !1), [t("svg", { staticClass: "material-design-icon__svg", attrs: { fill: e.fillColor, width: e.size, height: e.size, viewBox: "0 0 24 24" } }, [t("path", { attrs: { d: "M7.41,15.41L12,10.83L16.59,15.41L18,14L12,8L6,14L7.41,15.41Z" } }, [e.title ? t("title", [e._v(e._s(e.title))]) : e._e()])])]);
-}, C = [], b = /* @__PURE__ */ l.normalizeComponent(
+}, C = [], b = /* @__PURE__ */ o.normalizeComponent(
   v,
   y,
   C,
@@ -48,7 +50,7 @@ const k = {
   emits: ["click"],
   computed: {
     labelButton() {
-      return this.open ? s.t("Collapse menu") : s.t("Open menu");
+      return this.open ? a.t("Collapse menu") : a.t("Open menu");
     }
   },
   methods: {
@@ -62,7 +64,7 @@ var $ = function() {
   return t("NcButton", { staticClass: "icon-collapse", class: { "icon-collapse--open": e.open }, attrs: { type: "tertiary", "aria-label": e.labelButton }, on: { click: e.onClick }, scopedSlots: e._u([{ key: "icon", fn: function() {
     return [e.open ? t("ChevronUp", { attrs: { size: 20 } }) : t("ChevronDown", { attrs: { size: 20 } })];
   }, proxy: !0 }]) });
-}, B = [], L = /* @__PURE__ */ l.normalizeComponent(
+}, B = [], L = /* @__PURE__ */ o.normalizeComponent(
   k,
   $,
   B,
@@ -72,7 +74,9 @@ var $ = function() {
   null,
   null
 );
-const A = L.exports, I = {
+const A = L.exports;
+a.register(a.t19, a.t40);
+const I = {
   name: "PencilIcon",
   emits: ["click"],
   props: {
@@ -91,10 +95,10 @@ const A = L.exports, I = {
 };
 var S = function() {
   var e = this, t = e._self._c;
-  return t("span", e._b({ staticClass: "material-design-icon pencil-icon", attrs: { "aria-hidden": !e.title, "aria-label": e.title, role: "img" }, on: { click: function(a) {
-    return e.$emit("click", a);
+  return t("span", e._b({ staticClass: "material-design-icon pencil-icon", attrs: { "aria-hidden": !e.title, "aria-label": e.title, role: "img" }, on: { click: function(l) {
+    return e.$emit("click", l);
   } } }, "span", e.$attrs, !1), [t("svg", { staticClass: "material-design-icon__svg", attrs: { fill: e.fillColor, width: e.size, height: e.size, viewBox: "0 0 24 24" } }, [t("path", { attrs: { d: "M20.71,7.04C21.1,6.65 21.1,6 20.71,5.63L18.37,3.29C18,2.9 17.35,2.9 16.96,3.29L15.12,5.12L18.87,8.87M3,17.25V21H6.75L17.81,9.93L14.06,6.18L3,17.25Z" } }, [e.title ? t("title", [e._v(e._s(e.title))]) : e._e()])])]);
-}, x = [], z = /* @__PURE__ */ l.normalizeComponent(
+}, x = [], z = /* @__PURE__ */ o.normalizeComponent(
   I,
   S,
   x,
@@ -123,10 +127,10 @@ const w = z.exports, V = {
 };
 var q = function() {
   var e = this, t = e._self._c;
-  return t("span", e._b({ staticClass: "material-design-icon undo-icon", attrs: { "aria-hidden": !e.title, "aria-label": e.title, role: "img" }, on: { click: function(a) {
-    return e.$emit("click", a);
+  return t("span", e._b({ staticClass: "material-design-icon undo-icon", attrs: { "aria-hidden": !e.title, "aria-label": e.title, role: "img" }, on: { click: function(l) {
+    return e.$emit("click", l);
   } } }, "span", e.$attrs, !1), [t("svg", { staticClass: "material-design-icon__svg", attrs: { fill: e.fillColor, width: e.size, height: e.size, viewBox: "0 0 24 24" } }, [t("path", { attrs: { d: "M12.5,8C9.85,8 7.45,9 5.6,10.6L2,7V16H11L7.38,12.38C8.77,11.22 10.54,10.5 12.5,10.5C16.04,10.5 19.05,12.81 20.1,16L22.47,15.22C21.08,11.03 17.15,8 12.5,8Z" } }, [e.title ? t("title", [e._v(e._s(e.title))]) : e._e()])])]);
-}, D = [], M = /* @__PURE__ */ l.normalizeComponent(
+}, D = [], M = /* @__PURE__ */ o.normalizeComponent(
   V,
   q,
   D,
@@ -366,10 +370,10 @@ const E = {
       return !!(this.$slots.actions || this.$slots.counter || this.editable || this.undo);
     },
     editButtonAriaLabel() {
-      return this.editLabel ? this.editLabel : s.t("Edit item");
+      return this.editLabel ? this.editLabel : a.t("Edit item");
     },
     undoButtonAriaLabel() {
-      return s.t("Undo changes");
+      return a.t("Undo changes");
     },
     actionsBoundariesElement() {
       return document.querySelector("#content-vue") || void 0;
@@ -459,18 +463,18 @@ var O = function() {
     "app-navigation-entry--opened": e.opened,
     "app-navigation-entry--pinned": e.pinned,
     "app-navigation-entry--collapsible": e.collapsible
-  }, attrs: { id: e.id } }, [t(e.isRouterLink ? "router-link" : "NcVNodes", { tag: "component", attrs: { custom: !!e.isRouterLink, to: e.to, exact: e.isRouterLink ? e.exact : null }, scopedSlots: e._u([{ key: "default", fn: function({ href: a, navigate: r, isActive: o }) {
+  }, attrs: { id: e.id } }, [t(e.isRouterLink ? "router-link" : "NcVNodes", { tag: "component", attrs: { custom: !!e.isRouterLink, to: e.to, exact: e.isRouterLink ? e.exact : null }, scopedSlots: e._u([{ key: "default", fn: function({ href: l, navigate: r, isActive: s }) {
     return [t("div", { staticClass: "app-navigation-entry", class: {
       "app-navigation-entry--editing": e.editingActive,
       "app-navigation-entry--deleted": e.undo,
-      active: o && e.to || e.active
-    } }, [e.undo ? e._e() : t("a", { staticClass: "app-navigation-entry-link", attrs: { "aria-current": e.active || o && e.to ? "page" : void 0, "aria-description": e.ariaDescription, "aria-expanded": e.hasChildren ? e.opened.toString() : void 0, href: e.href || a || "#", target: e.isExternal(e.href) ? "_blank" : void 0, title: e.title || e.name }, on: { blur: e.handleBlur, click: function(i) {
-      return e.onClick(i, r, a);
+      active: s && e.to || e.active
+    } }, [e.undo ? e._e() : t("a", { staticClass: "app-navigation-entry-link", attrs: { "aria-current": e.active || s && e.to ? "page" : void 0, "aria-description": e.ariaDescription, "aria-expanded": e.hasChildren ? e.opened.toString() : void 0, href: e.href || l || "#", target: e.isExternal(e.href) ? "_blank" : void 0, title: e.title || e.name }, on: { blur: e.handleBlur, click: function(i) {
+      return e.onClick(i, r, l);
     }, focus: e.handleFocus, keydown: function(i) {
       return !i.type.indexOf("key") && e._k(i.keyCode, "tab", 9, i.key, "Tab") || i.ctrlKey || i.shiftKey || i.altKey || i.metaKey ? null : e.handleTab.apply(null, arguments);
-    } } }, [t("div", { staticClass: "app-navigation-entry-icon", class: { [e.icon]: e.icon } }, [e.loading ? t("NcLoadingIcon") : e._t("icon")], 2), e.editingActive ? e._e() : t("span", { staticClass: "app-navigation-entry__name" }, [e._v(" " + e._s(e.name) + " ")]), e.editingActive ? t("div", { staticClass: "editingContainer" }, [t("NcInputConfirmCancel", { ref: "editingInput", attrs: { placeholder: e.editPlaceholder !== "" ? e.editPlaceholder : e.name, primary: o && e.to }, on: { cancel: e.cancelEditing, confirm: e.handleEditingDone }, model: { value: e.editingValue, callback: function(i) {
+    } } }, [t("div", { staticClass: "app-navigation-entry-icon", class: { [e.icon]: e.icon } }, [e.loading ? t("NcLoadingIcon") : e._t("icon")], 2), e.editingActive ? e._e() : t("span", { staticClass: "app-navigation-entry__name" }, [e._v(" " + e._s(e.name) + " ")]), e.editingActive ? t("div", { staticClass: "editingContainer" }, [t("NcInputConfirmCancel", { ref: "editingInput", attrs: { placeholder: e.editPlaceholder !== "" ? e.editPlaceholder : e.name, primary: s && e.to || e.active }, on: { cancel: e.cancelEditing, confirm: e.handleEditingDone }, model: { value: e.editingValue, callback: function(i) {
       e.editingValue = i;
-    }, expression: "editingValue" } })], 1) : e._e()]), e.undo ? t("div", { staticClass: "app-navigation-entry__deleted" }, [t("div", { staticClass: "app-navigation-entry__deleted-description" }, [e._v(" " + e._s(e.name) + " ")])]) : e._e(), e.hasUtils && !e.editingActive ? t("div", { staticClass: "app-navigation-entry__utils", class: { "app-navigation-entry__utils--display-actions": e.forceDisplayActions || e.menuOpenLocalValue || e.menuOpen } }, [e.$slots.counter ? t("div", { staticClass: "app-navigation-entry__counter-wrapper" }, [e._t("counter")], 2) : e._e(), e.$slots.actions || e.editable && !e.editingActive || e.undo ? t("NcActions", { ref: "actions", staticClass: "app-navigation-entry__actions", attrs: { inline: e.inlineActions, container: "#app-navigation-vue", "boundaries-element": e.actionsBoundariesElement, placement: e.menuPlacement, open: e.menuOpen, type: o && e.to ? "primary" : null, "force-menu": e.forceMenu, "default-icon": e.menuIcon }, on: { "update:open": e.onMenuToggle }, scopedSlots: e._u([{ key: "icon", fn: function() {
+    }, expression: "editingValue" } })], 1) : e._e()]), e.undo ? t("div", { staticClass: "app-navigation-entry__deleted" }, [t("div", { staticClass: "app-navigation-entry__deleted-description" }, [e._v(" " + e._s(e.name) + " ")])]) : e._e(), e.hasUtils && !e.editingActive ? t("div", { staticClass: "app-navigation-entry__utils", class: { "app-navigation-entry__utils--display-actions": e.forceDisplayActions || e.menuOpenLocalValue || e.menuOpen } }, [e.$slots.counter ? t("div", { staticClass: "app-navigation-entry__counter-wrapper" }, [e._t("counter")], 2) : e._e(), e.$slots.actions || e.editable && !e.editingActive || e.undo ? t("NcActions", { ref: "actions", staticClass: "app-navigation-entry__actions", attrs: { inline: e.inlineActions, container: "#app-navigation-vue", "boundaries-element": e.actionsBoundariesElement, placement: e.menuPlacement, open: e.menuOpen, type: s && e.to || e.active ? "primary" : null, "force-menu": e.forceMenu, "default-icon": e.menuIcon }, on: { "update:open": e.onMenuToggle }, scopedSlots: e._u([{ key: "icon", fn: function() {
       return [e._t("menu-icon")];
     }, proxy: !0 }], null, !0) }, [e.editable && !e.editingActive ? t("NcActionButton", { attrs: { "aria-label": e.editButtonAriaLabel }, on: { click: e.handleEdit }, scopedSlots: e._u([{ key: "icon", fn: function() {
       return [t("Pencil", { attrs: { size: 20 } })];
@@ -480,13 +484,13 @@ var O = function() {
       return i.preventDefault(), i.stopPropagation(), e.toggleCollapse.apply(null, arguments);
     } } }) : e._e(), e._t("extra")], 2)];
   } }], null, !0) }), e.canHaveChildren && e.hasChildren ? t("ul", { staticClass: "app-navigation-entry__children" }, [e._t("default")], 2) : e._e()], 1);
-}, R = [], P = /* @__PURE__ */ l.normalizeComponent(
+}, R = [], P = /* @__PURE__ */ o.normalizeComponent(
   E,
   O,
   R,
   !1,
   null,
-  "e7a7a3c0",
+  "6a7129ac",
   null,
   null
 );