@nextcloud/vue 8.6.0 → 9.0.0-alpha.1

package/dist/chunks/NcAppContentList-_kO9F-p0.mjs

@@ -0,0 +1,26 @@
+import { openBlock as o, createElementBlock as s, normalizeClass as n, renderSlot as a } from "vue";
+import { _ as l } from "./_plugin-vue_export-helper-hUChTQA_.mjs";
+const c = {
+  name: "NcAppContentList",
+  props: {
+    selection: {
+      type: Boolean,
+      default: !1
+    },
+    showDetails: {
+      type: Boolean,
+      default: !1
+    }
+  }
+};
+function i(t, r, e, p, f, d) {
+  return o(), s("div", {
+    class: n(["app-content-list", { selection: e.selection, showdetails: e.showDetails }])
+  }, [
+    a(t.$slots, "default")
+  ], 2);
+}
+const u = /* @__PURE__ */ l(c, [["render", i]]);
+export {
+  u as N
+};

package/dist/chunks/NcAppContentList-_kO9F-p0.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"NcAppContentList-_kO9F-p0.mjs","sources":["../../src/components/NcAppContentList/NcAppContentList.vue"],"sourcesContent":["<!--\n - @copyright Copyright (c) 2019 Christoph Wurst <christoph@winzerhof-wurst.at>\n -\n - @author Christoph Wurst <christoph@winzerhof-wurst.at>\n -\n - @license GNU AGPL version 3 or any later version\n -\n - This program is free software: you can redistribute it and/or modify\n - it under the terms of the GNU Affero General Public License as\n - published by the Free Software Foundation, either version 3 of the\n - License, or (at your option) any later version.\n -\n - This program is distributed in the hope that it will be useful,\n - but WITHOUT ANY WARRANTY; without even the implied warranty of\n - MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the\n - GNU Affero General Public License for more details.\n -\n - You should have received a copy of the GNU Affero General Public License\n - along with this program. If not, see <http://www.gnu.org/licenses/>.\n -\n -->\n\n<template>\n\t<div class=\"app-content-list\"\n\t\t:class=\"{selection, showdetails: showDetails}\">\n\t\t<slot />\n\t</div>\n</template>\n\n<script>\nexport default {\n\tname: 'NcAppContentList',\n\tprops: {\n\t\tselection: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\t\tshowDetails: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\t},\n}\n</script>\n"],"names":["_sfc_main","_createElementBlock","_normalizeClass","$props","_renderSlot","_ctx"],"mappings":";;AA8BA,MAAKA,IAAU;AAAA,EACd,MAAM;AAAA,EACN,OAAO;AAAA,IACN,WAAW;AAAA,MACV,MAAM;AAAA,MACN,SAAS;AAAA,IACT;AAAA,IACD,aAAa;AAAA,MACZ,MAAM;AAAA,MACN,SAAS;AAAA,IACT;AAAA,EACD;AACF;;cAnBCC,EAGM,OAAA;AAAA,IAHD,OAvBNC,EAuBY,CAAA,oBACD,EAAA,WAAAC,EAAA,wBAAwBA,EAAW,YAAA,CAAA,CAAA;AAAA;IAC5CC,EAAQC,EAAA,QAAA,SAAA;AAAA;;;"}

package/dist/chunks/NcAppContentList-blRtleBI.cjs

@@ -0,0 +1,23 @@
+"use strict";
+const e = require("vue"), n = require("./_plugin-vue_export-helper-xG2iG1wl.cjs"), o = {
+  name: "NcAppContentList",
+  props: {
+    selection: {
+      type: Boolean,
+      default: !1
+    },
+    showDetails: {
+      type: Boolean,
+      default: !1
+    }
+  }
+};
+function l(s, a, t, i, r, p) {
+  return e.openBlock(), e.createElementBlock("div", {
+    class: e.normalizeClass(["app-content-list", { selection: t.selection, showdetails: t.showDetails }])
+  }, [
+    e.renderSlot(s.$slots, "default")
+  ], 2);
+}
+const c = /* @__PURE__ */ n._export_sfc(o, [["render", l]]);
+exports.NcAppContentList = c;

package/dist/chunks/NcAppContentList-blRtleBI.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"NcAppContentList-blRtleBI.cjs","sources":["../../src/components/NcAppContentList/NcAppContentList.vue"],"sourcesContent":["<!--\n - @copyright Copyright (c) 2019 Christoph Wurst <christoph@winzerhof-wurst.at>\n -\n - @author Christoph Wurst <christoph@winzerhof-wurst.at>\n -\n - @license GNU AGPL version 3 or any later version\n -\n - This program is free software: you can redistribute it and/or modify\n - it under the terms of the GNU Affero General Public License as\n - published by the Free Software Foundation, either version 3 of the\n - License, or (at your option) any later version.\n -\n - This program is distributed in the hope that it will be useful,\n - but WITHOUT ANY WARRANTY; without even the implied warranty of\n - MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the\n - GNU Affero General Public License for more details.\n -\n - You should have received a copy of the GNU Affero General Public License\n - along with this program. If not, see <http://www.gnu.org/licenses/>.\n -\n -->\n\n<template>\n\t<div class=\"app-content-list\"\n\t\t:class=\"{selection, showdetails: showDetails}\">\n\t\t<slot />\n\t</div>\n</template>\n\n<script>\nexport default {\n\tname: 'NcAppContentList',\n\tprops: {\n\t\tselection: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\t\tshowDetails: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\t},\n}\n</script>\n"],"names":["_sfc_main","_createElementBlock","_normalizeClass","$props","_renderSlot","_ctx"],"mappings":";mFA8BKA,IAAU;AAAA,EACd,MAAM;AAAA,EACN,OAAO;AAAA,IACN,WAAW;AAAA,MACV,MAAM;AAAA,MACN,SAAS;AAAA,IACT;AAAA,IACD,aAAa;AAAA,MACZ,MAAM;AAAA,MACN,SAAS;AAAA,IACT;AAAA,EACD;AACF;;wBAnBCC,EAGM,mBAAA,OAAA;AAAA,IAHD,OAvBNC,EAuBY,eAAA,CAAA,oBACD,EAAA,WAAAC,EAAA,wBAAwBA,EAAW,YAAA,CAAA,CAAA;AAAA;IAC5CC,aAAQC,EAAA,QAAA,SAAA;AAAA;;;;"}

package/dist/chunks/NcAppNavigation-sY7HaHMv.mjs

@@ -0,0 +1,134 @@
+import "../assets/NcAppNavigation-9xEM_GAn.css";
+import { useIsMobile as g } from "../Composables/useIsMobile.mjs";
+import { g as c } from "./focusTrap-Py2bQ9-r.mjs";
+import { subscribe as d, emit as n, unsubscribe as u } from "@nextcloud/event-bus";
+import { createFocusTrap as f } from "focus-trap";
+import { N as v } from "./NcAppNavigationToggle-SEvIEY16.mjs";
+import { warn as h, resolveComponent as m, openBlock as N, createElementBlock as b, normalizeClass as y, createElementVNode as p, withKeys as _, renderSlot as s, createVNode as T } from "vue";
+import { _ as A } from "./_plugin-vue_export-helper-hUChTQA_.mjs";
+const C = {
+  name: "NcAppNavigation",
+  components: {
+    NcAppNavigationToggle: v
+  },
+  // Injected from NcContent
+  inject: {
+    setHasAppNavigation: {
+      default: () => () => h("NcAppNavigation is not mounted inside NcContent, this is probably an error."),
+      from: "NcContent:setHasAppNavigation"
+    }
+  },
+  props: {
+    /**
+     * The aria label to describe the navigation
+     */
+    ariaLabel: {
+      type: String,
+      default: ""
+    },
+    /**
+     * aria-labelledby attribute to describe the navigation
+     */
+    ariaLabelledby: {
+      type: String,
+      default: ""
+    }
+  },
+  setup() {
+    return {
+      isMobile: g()
+    };
+  },
+  data() {
+    return {
+      open: !this.isMobile,
+      focusTrap: null
+    };
+  },
+  watch: {
+    isMobile() {
+      this.open = !this.isMobile, this.toggleFocusTrap();
+    },
+    open() {
+      this.toggleFocusTrap();
+    }
+  },
+  mounted() {
+    this.setHasAppNavigation(!0), d("toggle-navigation", this.toggleNavigationByEventBus), n("navigation-toggled", {
+      open: this.open
+    }), this.focusTrap = f(this.$refs.appNavigationContainer, {
+      allowOutsideClick: !0,
+      fallbackFocus: this.$refs.appNavigationContainer,
+      trapStack: c(),
+      escapeDeactivates: !1
+    }), this.toggleFocusTrap();
+  },
+  unmounted() {
+    this.setHasAppNavigation(!1), u("toggle-navigation", this.toggleNavigationByEventBus), this.focusTrap.deactivate();
+  },
+  methods: {
+    /**
+     * Toggle the navigation
+     *
+     * @param {boolean} [state] set the state instead of inverting the current one
+     */
+    toggleNavigation(e) {
+      if (this.open === e) {
+        n("navigation-toggled", {
+          open: this.open
+        });
+        return;
+      }
+      this.open = typeof e > "u" ? !this.open : e;
+      const t = getComputedStyle(document.body), i = parseInt(t.getPropertyValue("--animation-quick")) || 100;
+      setTimeout(() => {
+        n("navigation-toggled", {
+          open: this.open
+        });
+      }, 1.5 * i);
+    },
+    toggleNavigationByEventBus({ open: e }) {
+      this.toggleNavigation(e);
+    },
+    /**
+     * Activate focus trap if it is currently needed, otherwise deactivate
+     */
+    toggleFocusTrap() {
+      this.isMobile && this.open ? this.focusTrap.activate() : this.focusTrap.deactivate();
+    },
+    handleEsc() {
+      this.isMobile && this.toggleNavigation(!1);
+    }
+  }
+}, B = ["aria-hidden", "aria-label", "aria-labelledby", "inert"], E = { class: "app-navigation__list" };
+function k(e, t, i, M, a, o) {
+  const r = m("NcAppNavigationToggle");
+  return N(), b("div", {
+    ref: "appNavigationContainer",
+    class: y(["app-navigation", { "app-navigation--close": !a.open }])
+  }, [
+    p("nav", {
+      id: "app-navigation-vue",
+      "aria-hidden": a.open ? "false" : "true",
+      "aria-label": i.ariaLabel || void 0,
+      "aria-labelledby": i.ariaLabelledby || void 0,
+      class: "app-navigation__content",
+      inert: !a.open || void 0,
+      onKeydown: t[0] || (t[0] = _((...l) => o.handleEsc && o.handleEsc(...l), ["esc"]))
+    }, [
+      s(e.$slots, "default", {}, void 0, !0),
+      p("ul", E, [
+        s(e.$slots, "list", {}, void 0, !0)
+      ]),
+      s(e.$slots, "footer", {}, void 0, !0)
+    ], 40, B),
+    T(r, {
+      open: a.open,
+      "onUpdate:open": o.toggleNavigation
+    }, null, 8, ["open", "onUpdate:open"])
+  ], 2);
+}
+const U = /* @__PURE__ */ A(C, [["render", k], ["__scopeId", "data-v-3f9718fc"]]);
+export {
+  U as N
+};

package/dist/chunks/NcAppNavigation-sY7HaHMv.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"NcAppNavigation-sY7HaHMv.mjs","sources":["../../src/components/NcAppNavigation/NcAppNavigation.vue"],"sourcesContent":["<!--\n - @copyright Copyright (c) 2019 Christoph Wurst <christoph@winzerhof-wurst.at>\n -\n - @author Christoph Wurst <christoph@winzerhof-wurst.at>\n - @author John Molakvoæ <skjnldsv@protonmail.com>\n - @author Marco Ambrosini <marcoambrosini@icloud.com>\n -\n - @license GNU AGPL version 3 or any later version\n -\n - This program is free software: you can redistribute it and/or modify\n - it under the terms of the GNU Affero General Public License as\n - published by the Free Software Foundation, either version 3 of the\n - License, or (at your option) any later version.\n -\n - This program is distributed in the hope that it will be useful,\n - but WITHOUT ANY WARRANTY; without even the implied warranty of\n - MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the\n - GNU Affero General Public License for more details.\n -\n - You should have received a copy of the GNU Affero General Public License\n - along with this program. If not, see <http://www.gnu.org/licenses/>.\n -\n -->\n<docs>\nThe navigation bar can be open and closed from anywhere in the app using the\nnextcloud event bus.\n\n### Install the event bus package\n\n```bash\nnpm i -S @nextcloud/event-bus\n```\n\n### Usage\n\n#### Open the navigation\n\n```js static\nimport { emit } from '@nextcloud/event-bus'\nemit('toggle-navigation', {\n\topen: true,\n})\n```\n\n#### Close the navigation\n\n```js static\nimport { emit } from '@nextcloud/event-bus'\nemit('toggle-navigation', {\n\topen: false,\n})\n```\n\n</docs>\n\n<template>\n\t<div ref=\"appNavigationContainer\"\n\t\tclass=\"app-navigation\"\n\t\t:class=\"{'app-navigation--close':!open }\">\n\t\t<nav id=\"app-navigation-vue\"\n\t\t\t:aria-hidden=\"open ? 'false' : 'true'\"\n\t\t\t:aria-label=\"ariaLabel || undefined\"\n\t\t\t:aria-labelledby=\"ariaLabelledby || undefined\"\n\t\t\tclass=\"app-navigation__content\"\n\t\t\t:inert=\"!open || undefined\"\n\t\t\t@keydown.esc=\"handleEsc\">\n\t\t\t<slot />\n\t\t\t<!-- List for Navigation li-items -->\n\t\t\t<ul class=\"app-navigation__list\">\n\t\t\t\t<slot name=\"list\" />\n\t\t\t</ul>\n\n\t\t\t<!-- Footer for e.g. AppNavigationSettings -->\n\t\t\t<slot name=\"footer\" />\n\t\t</nav>\n\t\t<NcAppNavigationToggle :open=\"open\" @update:open=\"toggleNavigation\" />\n\t</div>\n</template>\n\n<script>\nimport { useIsMobile } from '../../composables/useIsMobile/index.js'\nimport { getTrapStack } from '../../utils/focusTrap.js'\nimport { emit, subscribe, unsubscribe } from '@nextcloud/event-bus'\nimport { createFocusTrap } from 'focus-trap'\n\nimport NcAppNavigationToggle from '../NcAppNavigationToggle/index.js'\nimport { warn } from 'vue'\n\nexport default {\n\tname: 'NcAppNavigation',\n\n\tcomponents: {\n\t\tNcAppNavigationToggle,\n\t},\n\n\t// Injected from NcContent\n\tinject: {\n\t\tsetHasAppNavigation: {\n\t\t\tdefault: () => () => warn('NcAppNavigation is not mounted inside NcContent, this is probably an error.'),\n\t\t\tfrom: 'NcContent:setHasAppNavigation',\n\t\t},\n\t},\n\n\tprops: {\n\t\t/**\n\t\t * The aria label to describe the navigation\n\t\t */\n\t\tariaLabel: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\n\t\t/**\n\t\t * aria-labelledby attribute to describe the navigation\n\t\t */\n\t\tariaLabelledby: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\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\topen: !this.isMobile,\n\t\t\tfocusTrap: null,\n\t\t}\n\t},\n\n\twatch: {\n\t\tisMobile() {\n\t\t\tthis.open = !this.isMobile\n\t\t\tthis.toggleFocusTrap()\n\t\t},\n\t\topen() {\n\t\t\tthis.toggleFocusTrap()\n\t\t},\n\t},\n\n\tmounted() {\n\t\tthis.setHasAppNavigation(true)\n\t\tsubscribe('toggle-navigation', this.toggleNavigationByEventBus)\n\t\t// Emit an event with the initial state of the navigation\n\t\temit('navigation-toggled', {\n\t\t\topen: this.open,\n\t\t})\n\n\t\tthis.focusTrap = createFocusTrap(this.$refs.appNavigationContainer, {\n\t\t\tallowOutsideClick: true,\n\t\t\tfallbackFocus: this.$refs.appNavigationContainer,\n\t\t\ttrapStack: getTrapStack(),\n\t\t\tescapeDeactivates: false,\n\t\t})\n\t\tthis.toggleFocusTrap()\n\t},\n\tunmounted() {\n\t\tthis.setHasAppNavigation(false)\n\t\tunsubscribe('toggle-navigation', this.toggleNavigationByEventBus)\n\t\tthis.focusTrap.deactivate()\n\t},\n\n\tmethods: {\n\t\t/**\n\t\t * Toggle the navigation\n\t\t *\n\t\t * @param {boolean} [state] set the state instead of inverting the current one\n\t\t */\n\t\ttoggleNavigation(state) {\n\t\t\t// Early return if alreay in that state\n\t\t\tif (this.open === state) {\n\t\t\t\temit('navigation-toggled', {\n\t\t\t\t\topen: this.open,\n\t\t\t\t})\n\t\t\t\treturn\n\t\t\t}\n\n\t\t\tthis.open = (typeof state === 'undefined') ? !this.open : state\n\t\t\tconst bodyStyles = getComputedStyle(document.body)\n\t\t\tconst animationLength = parseInt(bodyStyles.getPropertyValue('--animation-quick')) || 100\n\n\t\t\tsetTimeout(() => {\n\t\t\t\temit('navigation-toggled', {\n\t\t\t\t\topen: this.open,\n\t\t\t\t})\n\t\t\t// We wait for 1.5 times the animation length to give the animation time to really finish.\n\t\t\t}, 1.5 * animationLength)\n\t\t},\n\n\t\ttoggleNavigationByEventBus({ open }) {\n\t\t\tthis.toggleNavigation(open)\n\t\t},\n\n\t\t/**\n\t\t * Activate focus trap if it is currently needed, otherwise deactivate\n\t\t */\n\t\ttoggleFocusTrap() {\n\t\t\tif (this.isMobile && this.open) {\n\t\t\t\tthis.focusTrap.activate()\n\t\t\t} else {\n\t\t\t\tthis.focusTrap.deactivate()\n\t\t\t}\n\t\t},\n\n\t\thandleEsc() {\n\t\t\tif (this.isMobile) {\n\t\t\t\tthis.toggleNavigation(false)\n\t\t\t}\n\t\t},\n\t},\n}\n</script>\n\n<style lang=\"scss\">\n.app-navigation,\n.app-content {\n\t/** Distance of the app naviation toggle and the first navigation item to the top edge of the app content container */\n\t--app-navigation-padding: #{$app-navigation-padding};\n}\n</style>\n\n<style lang=\"scss\" scoped>\n.app-navigation {\n\t// Set scoped variable override\n\t// Using --color-text-maxcontrast as a fallback evaluates to an invalid value as it references itself in this scope instead of the variable defined higher up\n\t--color-text-maxcontrast: var(--color-text-maxcontrast-background-blur, var(--color-text-maxcontrast-default));\n\ttransition: transform var(--animation-quick), margin var(--animation-quick);\n\twidth: $navigation-width;\n\t// Left toggle button padding + toggle button + right padding from NcAppContent\n\tmax-width: calc(100vw - (var(--app-navigation-padding) + var(--default-clickable-area) + var(--default-grid-baseline)));\n\tposition: relative;\n\ttop: 0;\n\tleft: 0;\n\tpadding: 0px;\n\t// Above appcontent\n\tz-index: 1800;\n\theight: 100%;\n\tbox-sizing: border-box;\n\t-webkit-user-select: none;\n\t-moz-user-select: none;\n\t-ms-user-select: none;\n\tuser-select: none;\n\tflex-grow: 0;\n\tflex-shrink: 0;\n\tbackground-color:  var(--color-main-background-blur, var(--color-main-background));\n\t-webkit-backdrop-filter: var(--filter-background-blur, none);\n\tbackdrop-filter: var(--filter-background-blur, none);\n\n\t&--close {\n\t\ttransform: translateX(-100%);\n\t\tposition: absolute;\n\t}\n\n\t&__content > ul,\n\t&__list {\n\t\tposition: relative;\n\t\theight: 100%;\n\t\twidth: 100%;\n\t\toverflow-x: hidden;\n\t\toverflow-y: auto;\n\t\tbox-sizing: border-box;\n\t\tdisplay: flex;\n\t\tflex-direction: column;\n\t\tgap: var(--default-grid-baseline, 4px);\n\t\tpadding: var(--app-navigation-padding);\n\t}\n\t&__content {\n\t\theight: 100%;\n\t\tdisplay: flex;\n\t\tflex-direction: column;\n\t}\n}\n\n// add extra border for high contrast mode\n[data-themes*='highcontrast'] {\n\t.app-navigation {\n\t\tborder-right: 1px solid var(--color-border);\n\t}\n}\n\n// When on mobile, we make the navigation slide over the appcontent\n@media only screen and (max-width: $breakpoint-mobile) {\n\t.app-navigation:not(.app-navigation--close) {\n\t\tposition: absolute;\n\t}\n}\n</style>\n"],"names":["_sfc_main","NcAppNavigationToggle","warn","createFocusTrap","unsubscribe","state","animationLength","bodyStyles","open","_hoisted_1","_hoisted_2","normalizeClass","$data","createElementVNode","$options"],"mappings":";;;;;;;;AAwFA,MAAAA,IAAA;AAAA;;IAIE,uBAAAC;AAAA;;EAID,QAAA;AAAA,IACC,qBAAA;AAAA,MACC,SAAA,MAAA,MAAAC,EAAA,6EAAA;AAAA,MACA,MAAA;AAAA;;EAIF,OAAA;AAAA;AAAA;AAAA;AAAA;;;;;;;IAYC,gBAAA;AAAA;;;;EAMD,QAAA;AACC,WAAA;AAAA;IAEA;AAAA;EAGD,OAAA;AACC,WAAA;AAAA,MACC,MAAA,CAAA,KAAA;AAAA,MACA,WAAA;AAAA,IACD;AAAA;EAGD,OAAA;AAAA;kCAGE,KAAA,gBAAA;AAAA;IAED,OAAA;AACC,WAAA,gBAAA;AAAA;;EAIF,UAAA;;MAKE,MAAA,KAAA;AAAA,QAGD,KAAA,YAAAC,EAAA,KAAA,MAAA,wBAAA;AAAA;;;;QAMA,KAAA,gBAAA;AAAA;;AAGA,SAAA,oBAAA,EAAA,GACAC,EAAA,qBAAA,KAAA,0BAAA;;EAID,SAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAQE,UAAA,KAAA,SAAAC,GAAA;;UAEE,MAAA,KAAA;AAAA;;MAGF;;iDAIAC,IAAA,SAAAC,EAAA,iBAAA,mBAAA,CAAA,KAAA;AAEA,iBAAA,MAAA;;UAEE,MAAA,KAAA;AAAA;MAGF,GAAA,MAAAD,CAAA;AAAA;IAGD,2BAAA,EAAA,MAAAE,EAAA,GAAA;;;;;;IAOA,kBAAA;;;;AASC,MAAA,KAAA;;;AAKH,GAtNAC,IAAA,CAAA,eAAA,cAAA,mBAAA,OAAA,GAoEOC,IAAA,EAAA,OAAA,uBAAA;;;;IAZD,KAAA;AAAA,IACJ,OAAAC,EAAA,CAAA,kBAAA,EAAA,yBAAA,CAAAC,EAAA,KAAA,CAAA,CAAA;AAAA;;MAEK,IAAA;AAAA,MACH,eAAAA,EAAA,OAAA,UAAA;AAAA;;MAGD,OAAA;AAAA;;;;MAKAC,EAAA,MAAAH,GAAA;AAAA;;;IApEH,GAAA,IAAAD,CAAA;AAAA;MA2E0B,MAAAG,EAAA;AAAA,MAAa,iBAAAE,EAAA;AAAA;;;;"}

package/dist/chunks/NcAppNavigation-yEZ-RJA2.cjs

@@ -0,0 +1,125 @@
+var T = require("../assets/NcAppNavigation-9xEM_GAn.css");
+const l = require("../Composables/useIsMobile.cjs"), g = require("./focusTrap-n3H52LOw.cjs"), i = require("@nextcloud/event-bus"), c = require("focus-trap"), u = require("./NcAppNavigationToggle-sXvQDqok.cjs"), e = require("vue"), d = require("./_plugin-vue_export-helper-xG2iG1wl.cjs"), v = {
+  name: "NcAppNavigation",
+  components: {
+    NcAppNavigationToggle: u.NcAppNavigationToggle
+  },
+  // Injected from NcContent
+  inject: {
+    setHasAppNavigation: {
+      default: () => () => e.warn("NcAppNavigation is not mounted inside NcContent, this is probably an error."),
+      from: "NcContent:setHasAppNavigation"
+    }
+  },
+  props: {
+    /**
+     * The aria label to describe the navigation
+     */
+    ariaLabel: {
+      type: String,
+      default: ""
+    },
+    /**
+     * aria-labelledby attribute to describe the navigation
+     */
+    ariaLabelledby: {
+      type: String,
+      default: ""
+    }
+  },
+  setup() {
+    return {
+      isMobile: l.useIsMobile()
+    };
+  },
+  data() {
+    return {
+      open: !this.isMobile,
+      focusTrap: null
+    };
+  },
+  watch: {
+    isMobile() {
+      this.open = !this.isMobile, this.toggleFocusTrap();
+    },
+    open() {
+      this.toggleFocusTrap();
+    }
+  },
+  mounted() {
+    this.setHasAppNavigation(!0), i.subscribe("toggle-navigation", this.toggleNavigationByEventBus), i.emit("navigation-toggled", {
+      open: this.open
+    }), this.focusTrap = c.createFocusTrap(this.$refs.appNavigationContainer, {
+      allowOutsideClick: !0,
+      fallbackFocus: this.$refs.appNavigationContainer,
+      trapStack: g.getTrapStack(),
+      escapeDeactivates: !1
+    }), this.toggleFocusTrap();
+  },
+  unmounted() {
+    this.setHasAppNavigation(!1), i.unsubscribe("toggle-navigation", this.toggleNavigationByEventBus), this.focusTrap.deactivate();
+  },
+  methods: {
+    /**
+     * Toggle the navigation
+     *
+     * @param {boolean} [state] set the state instead of inverting the current one
+     */
+    toggleNavigation(t) {
+      if (this.open === t) {
+        i.emit("navigation-toggled", {
+          open: this.open
+        });
+        return;
+      }
+      this.open = typeof t > "u" ? !this.open : t;
+      const a = getComputedStyle(document.body), o = parseInt(a.getPropertyValue("--animation-quick")) || 100;
+      setTimeout(() => {
+        i.emit("navigation-toggled", {
+          open: this.open
+        });
+      }, 1.5 * o);
+    },
+    toggleNavigationByEventBus({ open: t }) {
+      this.toggleNavigation(t);
+    },
+    /**
+     * Activate focus trap if it is currently needed, otherwise deactivate
+     */
+    toggleFocusTrap() {
+      this.isMobile && this.open ? this.focusTrap.activate() : this.focusTrap.deactivate();
+    },
+    handleEsc() {
+      this.isMobile && this.toggleNavigation(!1);
+    }
+  }
+}, f = ["aria-hidden", "aria-label", "aria-labelledby", "inert"], h = { class: "app-navigation__list" };
+function N(t, a, o, m, n, s) {
+  const p = e.resolveComponent("NcAppNavigationToggle");
+  return e.openBlock(), e.createElementBlock("div", {
+    ref: "appNavigationContainer",
+    class: e.normalizeClass(["app-navigation", { "app-navigation--close": !n.open }])
+  }, [
+    e.createElementVNode("nav", {
+      id: "app-navigation-vue",
+      "aria-hidden": n.open ? "false" : "true",
+      "aria-label": o.ariaLabel || void 0,
+      "aria-labelledby": o.ariaLabelledby || void 0,
+      class: "app-navigation__content",
+      inert: !n.open || void 0,
+      onKeydown: a[0] || (a[0] = e.withKeys((...r) => s.handleEsc && s.handleEsc(...r), ["esc"]))
+    }, [
+      e.renderSlot(t.$slots, "default", {}, void 0, !0),
+      e.createElementVNode("ul", h, [
+        e.renderSlot(t.$slots, "list", {}, void 0, !0)
+      ]),
+      e.renderSlot(t.$slots, "footer", {}, void 0, !0)
+    ], 40, f),
+    e.createVNode(p, {
+      open: n.open,
+      "onUpdate:open": s.toggleNavigation
+    }, null, 8, ["open", "onUpdate:open"])
+  ], 2);
+}
+const b = /* @__PURE__ */ d._export_sfc(v, [["render", N], ["__scopeId", "data-v-3f9718fc"]]);
+exports.NcAppNavigation = b;

package/dist/chunks/NcAppNavigation-yEZ-RJA2.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"NcAppNavigation-yEZ-RJA2.cjs","sources":["../../src/components/NcAppNavigation/NcAppNavigation.vue"],"sourcesContent":["<!--\n - @copyright Copyright (c) 2019 Christoph Wurst <christoph@winzerhof-wurst.at>\n -\n - @author Christoph Wurst <christoph@winzerhof-wurst.at>\n - @author John Molakvoæ <skjnldsv@protonmail.com>\n - @author Marco Ambrosini <marcoambrosini@icloud.com>\n -\n - @license GNU AGPL version 3 or any later version\n -\n - This program is free software: you can redistribute it and/or modify\n - it under the terms of the GNU Affero General Public License as\n - published by the Free Software Foundation, either version 3 of the\n - License, or (at your option) any later version.\n -\n - This program is distributed in the hope that it will be useful,\n - but WITHOUT ANY WARRANTY; without even the implied warranty of\n - MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the\n - GNU Affero General Public License for more details.\n -\n - You should have received a copy of the GNU Affero General Public License\n - along with this program. If not, see <http://www.gnu.org/licenses/>.\n -\n -->\n<docs>\nThe navigation bar can be open and closed from anywhere in the app using the\nnextcloud event bus.\n\n### Install the event bus package\n\n```bash\nnpm i -S @nextcloud/event-bus\n```\n\n### Usage\n\n#### Open the navigation\n\n```js static\nimport { emit } from '@nextcloud/event-bus'\nemit('toggle-navigation', {\n\topen: true,\n})\n```\n\n#### Close the navigation\n\n```js static\nimport { emit } from '@nextcloud/event-bus'\nemit('toggle-navigation', {\n\topen: false,\n})\n```\n\n</docs>\n\n<template>\n\t<div ref=\"appNavigationContainer\"\n\t\tclass=\"app-navigation\"\n\t\t:class=\"{'app-navigation--close':!open }\">\n\t\t<nav id=\"app-navigation-vue\"\n\t\t\t:aria-hidden=\"open ? 'false' : 'true'\"\n\t\t\t:aria-label=\"ariaLabel || undefined\"\n\t\t\t:aria-labelledby=\"ariaLabelledby || undefined\"\n\t\t\tclass=\"app-navigation__content\"\n\t\t\t:inert=\"!open || undefined\"\n\t\t\t@keydown.esc=\"handleEsc\">\n\t\t\t<slot />\n\t\t\t<!-- List for Navigation li-items -->\n\t\t\t<ul class=\"app-navigation__list\">\n\t\t\t\t<slot name=\"list\" />\n\t\t\t</ul>\n\n\t\t\t<!-- Footer for e.g. AppNavigationSettings -->\n\t\t\t<slot name=\"footer\" />\n\t\t</nav>\n\t\t<NcAppNavigationToggle :open=\"open\" @update:open=\"toggleNavigation\" />\n\t</div>\n</template>\n\n<script>\nimport { useIsMobile } from '../../composables/useIsMobile/index.js'\nimport { getTrapStack } from '../../utils/focusTrap.js'\nimport { emit, subscribe, unsubscribe } from '@nextcloud/event-bus'\nimport { createFocusTrap } from 'focus-trap'\n\nimport NcAppNavigationToggle from '../NcAppNavigationToggle/index.js'\nimport { warn } from 'vue'\n\nexport default {\n\tname: 'NcAppNavigation',\n\n\tcomponents: {\n\t\tNcAppNavigationToggle,\n\t},\n\n\t// Injected from NcContent\n\tinject: {\n\t\tsetHasAppNavigation: {\n\t\t\tdefault: () => () => warn('NcAppNavigation is not mounted inside NcContent, this is probably an error.'),\n\t\t\tfrom: 'NcContent:setHasAppNavigation',\n\t\t},\n\t},\n\n\tprops: {\n\t\t/**\n\t\t * The aria label to describe the navigation\n\t\t */\n\t\tariaLabel: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\n\t\t/**\n\t\t * aria-labelledby attribute to describe the navigation\n\t\t */\n\t\tariaLabelledby: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\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\topen: !this.isMobile,\n\t\t\tfocusTrap: null,\n\t\t}\n\t},\n\n\twatch: {\n\t\tisMobile() {\n\t\t\tthis.open = !this.isMobile\n\t\t\tthis.toggleFocusTrap()\n\t\t},\n\t\topen() {\n\t\t\tthis.toggleFocusTrap()\n\t\t},\n\t},\n\n\tmounted() {\n\t\tthis.setHasAppNavigation(true)\n\t\tsubscribe('toggle-navigation', this.toggleNavigationByEventBus)\n\t\t// Emit an event with the initial state of the navigation\n\t\temit('navigation-toggled', {\n\t\t\topen: this.open,\n\t\t})\n\n\t\tthis.focusTrap = createFocusTrap(this.$refs.appNavigationContainer, {\n\t\t\tallowOutsideClick: true,\n\t\t\tfallbackFocus: this.$refs.appNavigationContainer,\n\t\t\ttrapStack: getTrapStack(),\n\t\t\tescapeDeactivates: false,\n\t\t})\n\t\tthis.toggleFocusTrap()\n\t},\n\tunmounted() {\n\t\tthis.setHasAppNavigation(false)\n\t\tunsubscribe('toggle-navigation', this.toggleNavigationByEventBus)\n\t\tthis.focusTrap.deactivate()\n\t},\n\n\tmethods: {\n\t\t/**\n\t\t * Toggle the navigation\n\t\t *\n\t\t * @param {boolean} [state] set the state instead of inverting the current one\n\t\t */\n\t\ttoggleNavigation(state) {\n\t\t\t// Early return if alreay in that state\n\t\t\tif (this.open === state) {\n\t\t\t\temit('navigation-toggled', {\n\t\t\t\t\topen: this.open,\n\t\t\t\t})\n\t\t\t\treturn\n\t\t\t}\n\n\t\t\tthis.open = (typeof state === 'undefined') ? !this.open : state\n\t\t\tconst bodyStyles = getComputedStyle(document.body)\n\t\t\tconst animationLength = parseInt(bodyStyles.getPropertyValue('--animation-quick')) || 100\n\n\t\t\tsetTimeout(() => {\n\t\t\t\temit('navigation-toggled', {\n\t\t\t\t\topen: this.open,\n\t\t\t\t})\n\t\t\t// We wait for 1.5 times the animation length to give the animation time to really finish.\n\t\t\t}, 1.5 * animationLength)\n\t\t},\n\n\t\ttoggleNavigationByEventBus({ open }) {\n\t\t\tthis.toggleNavigation(open)\n\t\t},\n\n\t\t/**\n\t\t * Activate focus trap if it is currently needed, otherwise deactivate\n\t\t */\n\t\ttoggleFocusTrap() {\n\t\t\tif (this.isMobile && this.open) {\n\t\t\t\tthis.focusTrap.activate()\n\t\t\t} else {\n\t\t\t\tthis.focusTrap.deactivate()\n\t\t\t}\n\t\t},\n\n\t\thandleEsc() {\n\t\t\tif (this.isMobile) {\n\t\t\t\tthis.toggleNavigation(false)\n\t\t\t}\n\t\t},\n\t},\n}\n</script>\n\n<style lang=\"scss\">\n.app-navigation,\n.app-content {\n\t/** Distance of the app naviation toggle and the first navigation item to the top edge of the app content container */\n\t--app-navigation-padding: #{$app-navigation-padding};\n}\n</style>\n\n<style lang=\"scss\" scoped>\n.app-navigation {\n\t// Set scoped variable override\n\t// Using --color-text-maxcontrast as a fallback evaluates to an invalid value as it references itself in this scope instead of the variable defined higher up\n\t--color-text-maxcontrast: var(--color-text-maxcontrast-background-blur, var(--color-text-maxcontrast-default));\n\ttransition: transform var(--animation-quick), margin var(--animation-quick);\n\twidth: $navigation-width;\n\t// Left toggle button padding + toggle button + right padding from NcAppContent\n\tmax-width: calc(100vw - (var(--app-navigation-padding) + var(--default-clickable-area) + var(--default-grid-baseline)));\n\tposition: relative;\n\ttop: 0;\n\tleft: 0;\n\tpadding: 0px;\n\t// Above appcontent\n\tz-index: 1800;\n\theight: 100%;\n\tbox-sizing: border-box;\n\t-webkit-user-select: none;\n\t-moz-user-select: none;\n\t-ms-user-select: none;\n\tuser-select: none;\n\tflex-grow: 0;\n\tflex-shrink: 0;\n\tbackground-color:  var(--color-main-background-blur, var(--color-main-background));\n\t-webkit-backdrop-filter: var(--filter-background-blur, none);\n\tbackdrop-filter: var(--filter-background-blur, none);\n\n\t&--close {\n\t\ttransform: translateX(-100%);\n\t\tposition: absolute;\n\t}\n\n\t&__content > ul,\n\t&__list {\n\t\tposition: relative;\n\t\theight: 100%;\n\t\twidth: 100%;\n\t\toverflow-x: hidden;\n\t\toverflow-y: auto;\n\t\tbox-sizing: border-box;\n\t\tdisplay: flex;\n\t\tflex-direction: column;\n\t\tgap: var(--default-grid-baseline, 4px);\n\t\tpadding: var(--app-navigation-padding);\n\t}\n\t&__content {\n\t\theight: 100%;\n\t\tdisplay: flex;\n\t\tflex-direction: column;\n\t}\n}\n\n// add extra border for high contrast mode\n[data-themes*='highcontrast'] {\n\t.app-navigation {\n\t\tborder-right: 1px solid var(--color-border);\n\t}\n}\n\n// When on mobile, we make the navigation slide over the appcontent\n@media only screen and (max-width: $breakpoint-mobile) {\n\t.app-navigation:not(.app-navigation--close) {\n\t\tposition: absolute;\n\t}\n}\n</style>\n"],"names":["_sfc_main","NcAppNavigationToggle","vue","focusTrap","eventBus","state","animationLength","bodyStyles","open","_hoisted_1","_hoisted_2","$data","$options"],"mappings":";gSAwFAA,IAAA;AAAA;;IAIE,uBAAAC,EAAA;AAAA;;EAID,QAAA;AAAA,IACC,qBAAA;AAAA,MACC,SAAA,MAAA,MAAAC,EAAA,KAAA,6EAAA;AAAA,MACA,MAAA;AAAA;;EAIF,OAAA;AAAA;AAAA;AAAA;AAAA;;;;;;;IAYC,gBAAA;AAAA;;;;EAMD,QAAA;AACC,WAAA;AAAA;IAEA;AAAA;EAGD,OAAA;AACC,WAAA;AAAA,MACC,MAAA,CAAA,KAAA;AAAA,MACA,WAAA;AAAA,IACD;AAAA;EAGD,OAAA;AAAA;kCAGE,KAAA,gBAAA;AAAA;IAED,OAAA;AACC,WAAA,gBAAA;AAAA;;EAIF,UAAA;;MAKE,MAAA,KAAA;AAAA,QAGD,KAAA,YAAAC,EAAA,gBAAA,KAAA,MAAA,wBAAA;AAAA;;;;QAMA,KAAA,gBAAA;AAAA;;AAGA,SAAA,oBAAA,EAAA,GACAC,EAAA,YAAA,qBAAA,KAAA,0BAAA;;EAID,SAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAQE,UAAA,KAAA,SAAAC,GAAA;;UAEE,MAAA,KAAA;AAAA;;MAGF;;iDAIAC,IAAA,SAAAC,EAAA,iBAAA,mBAAA,CAAA,KAAA;AAEA,iBAAA,MAAA;;UAEE,MAAA,KAAA;AAAA;MAGF,GAAA,MAAAD,CAAA;AAAA;IAGD,2BAAA,EAAA,MAAAE,EAAA,GAAA;;;;;;IAOA,kBAAA;;;;AASC,MAAA,KAAA;;;AAKH,GAtNAC,IAAA,CAAA,eAAA,cAAA,mBAAA,OAAA,GAoEOC,IAAA,EAAA,OAAA,uBAAA;;;;IAZD,KAAA;AAAA,IACJ,OAAAR,EAAA,eAAA,CAAA,kBAAA,EAAA,yBAAA,CAAAS,EAAA,KAAA,CAAA,CAAA;AAAA;;MAEK,IAAA;AAAA,MACH,eAAAA,EAAA,OAAA,UAAA;AAAA;;MAGD,OAAA;AAAA;;;;MAKAT,EAAA,mBAAA,MAAAQ,GAAA;AAAA;;;IApEH,GAAA,IAAAD,CAAA;AAAA;MA2E0B,MAAAE,EAAA;AAAA,MAAa,iBAAAC,EAAA;AAAA;;;;;"}

package/dist/chunks/NcAppNavigationCaption-XpbVXYKV.cjs

@@ -0,0 +1,42 @@
+var g = require("../assets/NcAppNavigationCaption-0s4Wxc88.css");
+const i = require("./NcActions-YpbmJ7hS.cjs"), e = require("vue"), a = require("./_plugin-vue_export-helper-xG2iG1wl.cjs"), c = {
+  name: "NcAppNavigationCaption",
+  components: {
+    NcActions: i.NcActions
+  },
+  inheritAttrs: !1,
+  props: {
+    name: {
+      type: String,
+      required: !0
+    },
+    /**
+     * Any [NcActions](#/Components/NcActions?id=ncactions-1) prop
+     */
+    // Not an actual prop but needed to show in vue-styleguidist docs
+    // eslint-disable-next-line
+    " ": {}
+  }
+}, s = { class: "app-navigation-caption" }, r = { class: "app-navigation-caption__name" }, p = {
+  key: 0,
+  class: "app-navigation-caption__actions"
+};
+function l(t, _, n, u, m, N) {
+  const o = e.resolveComponent("NcActions");
+  return e.openBlock(), e.createElementBlock("li", s, [
+    e.createElementVNode("span", r, e.toDisplayString(n.name), 1),
+    t.$slots.actions ? (e.openBlock(), e.createElementBlock("div", p, [
+      e.createVNode(o, e.normalizeProps(e.guardReactiveProps(t.$attrs)), {
+        icon: e.withCtx(() => [
+          e.renderSlot(t.$slots, "actionsTriggerIcon", {}, void 0, !0)
+        ]),
+        default: e.withCtx(() => [
+          e.renderSlot(t.$slots, "actions", {}, void 0, !0)
+        ]),
+        _: 3
+      }, 16)
+    ])) : e.createCommentVNode("", !0)
+  ]);
+}
+const d = /* @__PURE__ */ a._export_sfc(c, [["render", l], ["__scopeId", "data-v-81448d04"]]);
+exports.NcAppNavigationCaption = d;

package/dist/chunks/NcAppNavigationCaption-XpbVXYKV.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"NcAppNavigationCaption-XpbVXYKV.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<span class=\"app-navigation-caption__name\">\n\t\t\t{{ name }}\n\t\t</span>\n\n\t\t<!-- Actions -->\n\t\t<div v-if=\"!!$slots.actions\"\n\t\t\tclass=\"app-navigation-caption__actions\">\n\t\t\t<NcActions v-bind=\"$attrs\">\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</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\tmargin-bottom: 12px;\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","_hoisted_1","_hoisted_2","vue","_ctx","_hoisted_3"],"mappings":";4HA2HAA,IAAA;AAAA;;IAIE,WAAAC,EAAA;AAAA;EAGD,cAAA;AAAA,EAEA,OAAA;AAAA;;;;;;;;;;;AAaD,GA7CKC,IAAA,EAAA,OAAA,yBAAA,GAEGC,IAAA,EAAA,OAAA,+BAAA;;EAML,OAAA;;;;AARF,SAAAC,EAAA,UAAA,GAAAA,EAAA,mBAAA,MAAAF,GAAA;AAAA;IAOcG,EAAA,OAAA,WAAbD,EAAA,UAAA,GAAAA,EAAA,mBAAA,OAAAE,GAAA;AAAA;QAKa,MAAAF,EAAA,QAAA,MAAA;AAAA;;QAhHf,SAAAA,EAAA,QAAA,MAAA;AAAA;;;;UAAAA,EAAA,mBAAA,IAAA,EAAA;AAAA;;;;"}

package/dist/chunks/NcAppNavigationCaption-pcyV3wRO.mjs

@@ -0,0 +1,47 @@
+import "../assets/NcAppNavigationCaption-0s4Wxc88.css";
+import { N as r } from "./NcActions-76CtOBCq.mjs";
+import { resolveComponent as c, openBlock as o, createElementBlock as e, createElementVNode as p, toDisplayString as d, createVNode as m, normalizeProps as _, guardReactiveProps as l, withCtx as n, renderSlot as a, createCommentVNode as u } from "vue";
+import { _ as N } from "./_plugin-vue_export-helper-hUChTQA_.mjs";
+const f = {
+  name: "NcAppNavigationCaption",
+  components: {
+    NcActions: r
+  },
+  inheritAttrs: !1,
+  props: {
+    name: {
+      type: String,
+      required: !0
+    },
+    /**
+     * Any [NcActions](#/Components/NcActions?id=ncactions-1) prop
+     */
+    // Not an actual prop but needed to show in vue-styleguidist docs
+    // eslint-disable-next-line
+    " ": {}
+  }
+}, g = { class: "app-navigation-caption" }, v = { class: "app-navigation-caption__name" }, $ = {
+  key: 0,
+  class: "app-navigation-caption__actions"
+};
+function h(t, A, i, C, k, y) {
+  const s = c("NcActions");
+  return o(), e("li", g, [
+    p("span", v, d(i.name), 1),
+    t.$slots.actions ? (o(), e("div", $, [
+      m(s, _(l(t.$attrs)), {
+        icon: n(() => [
+          a(t.$slots, "actionsTriggerIcon", {}, void 0, !0)
+        ]),
+        default: n(() => [
+          a(t.$slots, "actions", {}, void 0, !0)
+        ]),
+        _: 3
+      }, 16)
+    ])) : u("", !0)
+  ]);
+}
+const I = /* @__PURE__ */ N(f, [["render", h], ["__scopeId", "data-v-81448d04"]]);
+export {
+  I as N
+};

package/dist/chunks/NcAppNavigationCaption-pcyV3wRO.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"NcAppNavigationCaption-pcyV3wRO.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<span class=\"app-navigation-caption__name\">\n\t\t\t{{ name }}\n\t\t</span>\n\n\t\t<!-- Actions -->\n\t\t<div v-if=\"!!$slots.actions\"\n\t\t\tclass=\"app-navigation-caption__actions\">\n\t\t\t<NcActions v-bind=\"$attrs\">\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</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\tmargin-bottom: 12px;\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","_hoisted_1","_hoisted_2","openBlock","createElementBlock","_ctx","_hoisted_3","withCtx","createCommentVNode"],"mappings":";;;;AA2HA,MAAAA,IAAA;AAAA;;IAIE,WAAAC;AAAA;EAGD,cAAA;AAAA,EAEA,OAAA;AAAA;;;;;;;;;;;AAaD,GA7CKC,IAAA,EAAA,OAAA,yBAAA,GAEGC,IAAA,EAAA,OAAA,+BAAA;;EAML,OAAA;;;;AARF,SAAAC,EAAA,GAAAC,EAAA,MAAAH,GAAA;AAAA;IAOcI,EAAA,OAAA,WAAbF,EAAA,GAAAC,EAAA,OAAAE,GAAA;AAAA;QAKa,MAAAC,EAAA,MAAA;AAAA;;QAhHf,SAAAA,EAAA,MAAA;AAAA;;;;UAAAC,EAAA,IAAA,EAAA;AAAA;;;"}

package/dist/chunks/NcAppNavigationIconBullet-GLCjMfFF.cjs

@@ -0,0 +1,36 @@
+var d = require("../assets/NcAppNavigationIconBullet-Nf3ARMLv.css");
+const e = require("vue"), i = require("./_plugin-vue_export-helper-xG2iG1wl.cjs"), l = {
+  name: "NcAppNavigationIconBullet",
+  props: {
+    color: {
+      type: String,
+      required: !0,
+      validator(t) {
+        return /^#?([0-9A-F]{3}){1,2}$/i.test(t);
+      }
+    }
+  },
+  emits: ["click"],
+  computed: {
+    formattedColor() {
+      return this.color.startsWith("#") ? this.color : "#" + this.color;
+    }
+  },
+  methods: {
+    onClick(t) {
+      this.$emit("click", t);
+    }
+  }
+};
+function n(t, r, s, u, p, o) {
+  return e.openBlock(), e.createElementBlock("div", {
+    class: "app-navigation-entry__icon-bullet",
+    onClick: r[0] || (r[0] = (...c) => o.onClick && o.onClick(...c))
+  }, [
+    e.createElementVNode("div", {
+      style: e.normalizeStyle({ backgroundColor: o.formattedColor })
+    }, null, 4)
+  ]);
+}
+const a = /* @__PURE__ */ i._export_sfc(l, [["render", n], ["__scopeId", "data-v-91580127"]]);
+exports.NcAppNavigationIconBullet = a;

package/dist/chunks/NcAppNavigationIconBullet-GLCjMfFF.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"NcAppNavigationIconBullet-GLCjMfFF.cjs","sources":["../../src/components/NcAppNavigationIconBullet/NcAppNavigationIconBullet.vue"],"sourcesContent":["<!--\n  - @copyright Copyright (c) 2019 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<docs>\n### Bullet\nThis component is made to be used inside of the [NcAppNavigationItem](#NcAppNavigationItem) component slot: `icon`.\n\n```\n<template #icon>\n\t<NcAppNavigationIconBullet color=\"0082c9\" />\n</template>\n<template #icon>\n\t<NcAppNavigationIconBullet color=\"#0082c9\" />\n</template>\n\n```\n\n### AppNavigationItem example\n```\n<NcAppNavigationItem  name=\"Entry 2\" :pinned=\"true\">\n\t<template #icon>\n\t\t<NcAppNavigationIconBullet color=\"0082c9\" />\n\t</template>\n</NcAppNavigationItem>\n```\n</docs>\n\n<template>\n\t<div class=\"app-navigation-entry__icon-bullet\" @click=\"onClick\">\n\t\t<div :style=\"{ backgroundColor: formattedColor }\" />\n\t</div>\n</template>\n\n<script>\nexport default {\n\tname: 'NcAppNavigationIconBullet',\n\n\tprops: {\n\t\tcolor: {\n\t\t\ttype: String,\n\t\t\trequired: true,\n\t\t\tvalidator(color) {\n\t\t\t\t// #000, 000, #0082c9 and 0082c9\n\t\t\t\treturn /^#?([0-9A-F]{3}){1,2}$/i.test(color)\n\t\t\t},\n\t\t},\n\t},\n\n\temits: ['click'],\n\n\tcomputed: {\n\t\tformattedColor() {\n\t\t\tif (this.color.startsWith('#')) {\n\t\t\t\treturn this.color\n\t\t\t}\n\t\t\treturn '#' + this.color\n\t\t},\n\t},\n\n\tmethods: {\n\t\tonClick(e) {\n\t\t\tthis.$emit('click', e)\n\t\t},\n\t},\n\n}\n</script>\n\n<style lang=\"scss\" scoped>\n.app-navigation-entry__icon-bullet {\n\tdisplay: block;\n\t// there is 2 margins\n\tpadding: $icon-margin + 1px;\n\tdiv {\n\t\twidth: $icon-size - 2px;\n\t\theight: $icon-size - 2px;\n\t\tcursor: pointer;\n\t\ttransition: background 100ms ease-in-out;\n\t\tborder: none;\n\t\tborder-radius: 50%;\n\t}\n}\n\n</style>\n"],"names":["_sfc_main","color","e","_cache","args","$options"],"mappings":";mFAqDAA,IAAA;AAAA,EACC,MAAA;AAAA,EAEA,OAAA;AAAA,IACC,OAAA;AAAA;;MAGC,UAAAC,GAAA;AAEC,eAAA,0BAAA,KAAAA,CAAA;AAAA;;;EAKH,OAAA,CAAA,OAAA;AAAA,EAEA,UAAA;AAAA,IACC,iBAAA;AACC,aAAA,KAAA,MAAA,WAAA,GAAA,IACC,KAAA,QAED,MAAA,KAAA;AAAA;;EAIF,SAAA;AAAA;AAEE,WAAA,MAAA,SAAAC,CAAA;AAAA;;AAIH;;;IArCM,OAAA;AAAA,IAA2C,SAAAC,EAAA,CAAA,MAAAA,EAAA,CAAA,IAAA,IAAAC,MAAAC,EAAA,WAAAA,EAAA,QAAA,GAAAD,CAAA;AAAA;;;;;;;;"}

package/dist/chunks/NcAppNavigationIconBullet-OqquWWY6.mjs

@@ -0,0 +1,40 @@
+import "../assets/NcAppNavigationIconBullet-Nf3ARMLv.css";
+import { openBlock as i, createElementBlock as c, createElementVNode as l, normalizeStyle as n } from "vue";
+import { _ as a } from "./_plugin-vue_export-helper-hUChTQA_.mjs";
+const s = {
+  name: "NcAppNavigationIconBullet",
+  props: {
+    color: {
+      type: String,
+      required: !0,
+      validator(t) {
+        return /^#?([0-9A-F]{3}){1,2}$/i.test(t);
+      }
+    }
+  },
+  emits: ["click"],
+  computed: {
+    formattedColor() {
+      return this.color.startsWith("#") ? this.color : "#" + this.color;
+    }
+  },
+  methods: {
+    onClick(t) {
+      this.$emit("click", t);
+    }
+  }
+};
+function p(t, r, m, d, u, o) {
+  return i(), c("div", {
+    class: "app-navigation-entry__icon-bullet",
+    onClick: r[0] || (r[0] = (...e) => o.onClick && o.onClick(...e))
+  }, [
+    l("div", {
+      style: n({ backgroundColor: o.formattedColor })
+    }, null, 4)
+  ]);
+}
+const v = /* @__PURE__ */ a(s, [["render", p], ["__scopeId", "data-v-91580127"]]);
+export {
+  v as N
+};

package/dist/chunks/NcAppNavigationIconBullet-OqquWWY6.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"NcAppNavigationIconBullet-OqquWWY6.mjs","sources":["../../src/components/NcAppNavigationIconBullet/NcAppNavigationIconBullet.vue"],"sourcesContent":["<!--\n  - @copyright Copyright (c) 2019 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<docs>\n### Bullet\nThis component is made to be used inside of the [NcAppNavigationItem](#NcAppNavigationItem) component slot: `icon`.\n\n```\n<template #icon>\n\t<NcAppNavigationIconBullet color=\"0082c9\" />\n</template>\n<template #icon>\n\t<NcAppNavigationIconBullet color=\"#0082c9\" />\n</template>\n\n```\n\n### AppNavigationItem example\n```\n<NcAppNavigationItem  name=\"Entry 2\" :pinned=\"true\">\n\t<template #icon>\n\t\t<NcAppNavigationIconBullet color=\"0082c9\" />\n\t</template>\n</NcAppNavigationItem>\n```\n</docs>\n\n<template>\n\t<div class=\"app-navigation-entry__icon-bullet\" @click=\"onClick\">\n\t\t<div :style=\"{ backgroundColor: formattedColor }\" />\n\t</div>\n</template>\n\n<script>\nexport default {\n\tname: 'NcAppNavigationIconBullet',\n\n\tprops: {\n\t\tcolor: {\n\t\t\ttype: String,\n\t\t\trequired: true,\n\t\t\tvalidator(color) {\n\t\t\t\t// #000, 000, #0082c9 and 0082c9\n\t\t\t\treturn /^#?([0-9A-F]{3}){1,2}$/i.test(color)\n\t\t\t},\n\t\t},\n\t},\n\n\temits: ['click'],\n\n\tcomputed: {\n\t\tformattedColor() {\n\t\t\tif (this.color.startsWith('#')) {\n\t\t\t\treturn this.color\n\t\t\t}\n\t\t\treturn '#' + this.color\n\t\t},\n\t},\n\n\tmethods: {\n\t\tonClick(e) {\n\t\t\tthis.$emit('click', e)\n\t\t},\n\t},\n\n}\n</script>\n\n<style lang=\"scss\" scoped>\n.app-navigation-entry__icon-bullet {\n\tdisplay: block;\n\t// there is 2 margins\n\tpadding: $icon-margin + 1px;\n\tdiv {\n\t\twidth: $icon-size - 2px;\n\t\theight: $icon-size - 2px;\n\t\tcursor: pointer;\n\t\ttransition: background 100ms ease-in-out;\n\t\tborder: none;\n\t\tborder-radius: 50%;\n\t}\n}\n\n</style>\n"],"names":["_sfc_main","color","e","_cache","args","$options"],"mappings":";;;AAqDA,MAAAA,IAAA;AAAA,EACC,MAAA;AAAA,EAEA,OAAA;AAAA,IACC,OAAA;AAAA;;MAGC,UAAAC,GAAA;AAEC,eAAA,0BAAA,KAAAA,CAAA;AAAA;;;EAKH,OAAA,CAAA,OAAA;AAAA,EAEA,UAAA;AAAA,IACC,iBAAA;AACC,aAAA,KAAA,MAAA,WAAA,GAAA,IACC,KAAA,QAED,MAAA,KAAA;AAAA;;EAIF,SAAA;AAAA;AAEE,WAAA,MAAA,SAAAC,CAAA;AAAA;;AAIH;;;IArCM,OAAA;AAAA,IAA2C,SAAAC,EAAA,CAAA,MAAAA,EAAA,CAAA,IAAA,IAAAC,MAAAC,EAAA,WAAAA,EAAA,QAAA,GAAAD,CAAA;AAAA;;;;;;;"}