@nextcloud/vue 8.0.0-beta.6 → 8.0.0-beta.8

package/dist/Components/NcAppContent.mjs

@@ -1,73 +1,227 @@
-import "../assets/index30.css";
-import o from "./NcButton.mjs";
-import { t as l } from "../chunks/l10n-9a5a6afc.mjs";
+import "../assets/index-ed4adf1d.css";
+import l from "./NcButton.mjs";
+import { t as p } from "../chunks/l10n-27a75c40.mjs";
 import "../Directives/Tooltip.mjs";
-import { emit as i } from "@nextcloud/event-bus";
-import p from "vue-material-design-icons/ArrowRight.vue";
-import { n } from "../chunks/_plugin-vue2_normalizer-5b4c43a4.mjs";
-import { VTooltip as r } from "floating-vue";
-import h from "../Mixins/isMobile.mjs";
-import { getBuilder as u } from "@nextcloud/browser-storage";
-import { useSwipe as c } from "@vueuse/core";
-import { Pane as g, Splitpanes as d } from "splitpanes";
+import { emit as n } from "@nextcloud/event-bus";
+import r from "vue-material-design-icons/ArrowRight.vue";
+import { n as o } from "../chunks/_plugin-vue2_normalizer-71e2aa87.mjs";
+import { VTooltip as c } from "floating-vue";
+import u from "../Mixins/isMobile.mjs";
+import { getBuilder as h } from "@nextcloud/browser-storage";
+import { useSwipe as g } from "@vueuse/core";
+import { Pane as f, Splitpanes as d } from "splitpanes";
 import "splitpanes/dist/splitpanes.css";
-const m = { name: "NcAppDetailsToggle", directives: { tooltip: r }, components: { NcButton: o, ArrowRight: p }, computed: { title() {
-  return l("Go back to the list");
-} }, beforeMount() {
-  this.toggleAppNavigationButton(!0);
-}, beforeDestroy() {
-  this.toggleAppNavigationButton(!1);
-}, methods: { toggleAppNavigationButton(t = !0) {
-  const e = document.querySelector(".app-navigation .app-navigation-toggle");
-  e && (e.style.display = t ? "none" : null, t === !0 && i("toggle-navigation", { open: !1 }));
-} } };
-var f = function() {
-  var t = this, e = t._self._c;
-  return e("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 [e("ArrowRight", { attrs: { size: 20 } })];
+const m = {
+  name: "NcAppDetailsToggle",
+  directives: {
+    tooltip: c
+  },
+  components: {
+    NcButton: l,
+    ArrowRight: r
+  },
+  computed: {
+    title() {
+      return p("Go back to the list");
+    }
+  },
+  beforeMount() {
+    this.toggleAppNavigationButton(!0);
+  },
+  beforeDestroy() {
+    this.toggleAppNavigationButton(!1);
+  },
+  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 }));
+    }
+  }
+};
+var _ = 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 = n(m, f, z, !1, null, "5244e83e", null, null);
-const w = S.exports;
-const a = u("nextcloud").persist().build(), v = { name: "NcAppContent", components: { NcAppDetailsToggle: w, Pane: g, Splitpanes: d }, mixins: [h], props: { allowSwipeNavigation: { type: Boolean, default: !0 }, listSize: { type: Number, default: 20 }, listMinWidth: { type: Number, default: 15 }, listMaxWidth: { type: Number, default: 40 }, paneConfigKey: { type: String, default: "" }, showDetails: { type: Boolean, default: !0 }, pageHeading: { type: String, default: null } }, emits: ["update:showDetails", "resize:list"], data() {
-  return { contentHeight: 0, hasList: !1, swiping: {}, listPaneSize: this.restorePaneConfig() };
-}, computed: { paneConfigID() {
-  if (this.paneConfigKey !== "")
-    return `pane-list-size-${this.paneConfigKey}`;
-  try {
-    return `pane-list-size-${appName}`;
-  } catch {
-    return console.info("[INFO] AppContent:", "falling back to global nextcloud pane config"), "pane-list-size-nextcloud";
+}, z = [], S = /* @__PURE__ */ o(
+  m,
+  _,
+  z,
+  !1,
+  null,
+  "5244e83e",
+  null,
+  null
+);
+const v = S.exports;
+const a = h("nextcloud").persist().build(), w = {
+  name: "NcAppContent",
+  components: {
+    NcAppDetailsToggle: v,
+    Pane: f,
+    Splitpanes: d
+  },
+  mixins: [u],
+  props: {
+    /**
+     * Allows to disable the control by swipe of the app navigation open state
+     */
+    allowSwipeNavigation: {
+      type: Boolean,
+      default: !0
+    },
+    /**
+     * Allows you to set the default width of the resizable list in %
+     * Must be between listMinWidth and listMaxWidth
+     */
+    listSize: {
+      type: Number,
+      default: 20
+    },
+    /**
+     * Allows you to set the minimum width of the list column in %
+     */
+    listMinWidth: {
+      type: Number,
+      default: 15
+    },
+    /**
+     * Allows you to set the maximum width of the list column in %
+     */
+    listMaxWidth: {
+      type: Number,
+      default: 40
+    },
+    /**
+     * Specify the config key for the pane config sizes
+     * Default is the global var appName if you use the webpack-vue-config
+     */
+    paneConfigKey: {
+      type: String,
+      default: ""
+    },
+    /**
+     * When in mobile view, only the list or the details are shown
+     * If you provide a list, you need to provide a variable
+     * that will be set to true by the user when an element of
+     * the list gets selected. The details will then show a back
+     * arrow to return to the list that will update this prop to false.
+     */
+    showDetails: {
+      type: Boolean,
+      default: !0
+    },
+    /**
+     * Specify the `<h1>` page heading
+     */
+    pageHeading: {
+      type: String,
+      default: null
+    }
+  },
+  emits: [
+    "update:showDetails",
+    "resize:list"
+  ],
+  data() {
+    return {
+      contentHeight: 0,
+      hasList: !1,
+      swiping: {},
+      listPaneSize: this.restorePaneConfig()
+    };
+  },
+  computed: {
+    paneConfigID() {
+      if (this.paneConfigKey !== "")
+        return `pane-list-size-${this.paneConfigKey}`;
+      try {
+        return `pane-list-size-${appName}`;
+      } catch {
+        return console.info("[INFO] AppContent:", "falling back to global nextcloud pane config"), "pane-list-size-nextcloud";
+      }
+    },
+    detailsPaneSize() {
+      return this.listPaneSize ? 100 - this.listPaneSize : this.paneDefaults.details.size;
+    },
+    paneDefaults() {
+      return {
+        list: {
+          size: this.listSize,
+          min: this.listMinWidth,
+          max: this.listMaxWidth
+        },
+        // set the inverse values of the details column
+        // based on the provided (or default) values of the list column
+        details: {
+          size: 100 - this.listSize,
+          min: 100 - this.listMaxWidth,
+          max: 100 - this.listMinWidth
+        }
+      };
+    }
+  },
+  updated() {
+    this.checkListSlot();
+  },
+  mounted() {
+    this.allowSwipeNavigation && (this.swiping = g(this.$el, {
+      onSwipeEnd: this.handleSwipe
+    })), this.checkListSlot(), this.restorePaneConfig();
+  },
+  methods: {
+    /**
+     * handle the swipe event
+     *
+     * @param {TouchEvent} e The touch event
+     * @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", {
+        open: !0
+      }) : this.swiping.coordsStart.x < 300 * 1.5 && t === "left" && n("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);
+    },
+    // $slots is not reactive, we need to update this manually
+    checkListSlot() {
+      const e = !!this.$slots.list;
+      this.hasList !== e && (this.hasList = e);
+    },
+    // browserStorage is not reactive, we need to update this manually
+    restorePaneConfig() {
+      const e = parseInt(a.getItem(this.paneConfigID), 10);
+      if (!isNaN(e) && e !== this.listPaneSize)
+        return console.debug("AppContent pane config", e), this.listPaneSize = e, e;
+    },
+    /**
+     * The user clicked the back arrow from the details view
+     */
+    hideDetails() {
+      this.$emit("update:showDetails", !1);
+    }
   }
-}, detailsPaneSize() {
-  return this.listPaneSize ? 100 - this.listPaneSize : this.paneDefaults.details.size;
-}, paneDefaults() {
-  return { list: { size: this.listSize, min: this.listMinWidth, max: this.listMaxWidth }, details: { size: 100 - this.listSize, min: 100 - this.listMaxWidth, max: 100 - this.listMinWidth } };
-} }, updated() {
-  this.checkListSlot();
-}, mounted() {
-  this.allowSwipeNavigation && (this.swiping = c(this.$el, { onSwipeEnd: this.handleSwipe })), this.checkListSlot(), this.restorePaneConfig();
-}, methods: { handleSwipe(t, e) {
-  Math.abs(this.swiping.lengthX) > 70 && (this.swiping.coordsStart.x < 300 / 2 && e === "right" ? i("toggle-navigation", { open: !0 }) : this.swiping.coordsStart.x < 300 * 1.5 && e === "left" && i("toggle-navigation", { open: !1 }));
-}, handlePaneResize(t) {
-  const e = parseInt(t[0].size, 10);
-  a.setItem(this.paneConfigID, JSON.stringify(e)), this.listPaneSize = e, this.$emit("resize:list", { size: e }), console.debug("AppContent pane config", e);
-}, checkListSlot() {
-  const t = !!this.$slots.list;
-  this.hasList !== t && (this.hasList = t);
-}, restorePaneConfig() {
-  const t = parseInt(a.getItem(this.paneConfigID), 10);
-  if (!isNaN(t) && t !== this.listPaneSize)
-    return console.debug("AppContent pane config", t), this.listPaneSize = t, t;
-}, hideDetails() {
-  this.$emit("update:showDetails", !1);
-} } };
-var D = function() {
-  var t = this, e = t._self._c;
-  return e("main", { staticClass: "app-content no-snapper", class: { "app-content--has-list": t.hasList }, attrs: { id: "app-content-vue" } }, [t.pageHeading ? e("h1", { staticClass: "hidden-visually" }, [t._v(" " + t._s(t.pageHeading) + " ")]) : t._e(), t.hasList ? [t.isMobile ? e("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 ? e("NcAppDetailsToggle", { nativeOn: { click: function(s) {
+};
+var y = 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) : e("div", { staticClass: "app-content-wrapper" }, [e("Splitpanes", { staticClass: "default-theme", on: { resized: t.handlePaneResize } }, [e("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), e("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 = [], y = n(v, D, C, !1, null, "38aa7204", null, null);
-const H = y.exports;
+  } } }) : 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,
+  C,
+  !1,
+  null,
+  "9a2b658c",
+  null,
+  null
+);
+const W = N.exports;
 export {
-  H as default
+  W as default
 };

package/dist/Components/NcAppContent.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"NcAppContent.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"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 isMobile from '../../mixins/isMobile/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\tmixins: [isMobile],\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\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}\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","isMobile","useSwipe","direction","event","listPaneSize","hasListSlot"],"mappings":"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"}

package/dist/Components/NcAppContentDetails.cjs

@@ -1 +1,19 @@
-"use strict";const e=require("../chunks/_plugin-vue2_normalizer-764a4c12.cjs"),l={name:"NcAppContentDetails"};var s=function(){var t=this,n=t._self._c;return n("div",{staticClass:"app-content-details"},[t._t("default")],2)},a=[],r=e.normalizeComponent(l,s,a,!1,null,null,null,null);const o=r.exports;module.exports=o;
+"use strict";
+const t = require("../chunks/_plugin-vue2_normalizer-7f9efb60.cjs"), s = {
+  name: "NcAppContentDetails"
+};
+var r = function() {
+  var n = this, e = n._self._c;
+  return e("div", { staticClass: "app-content-details" }, [n._t("default")], 2);
+}, l = [], a = /* @__PURE__ */ t.normalizeComponent(
+  s,
+  r,
+  l,
+  !1,
+  null,
+  null,
+  null,
+  null
+);
+const _ = a.exports;
+module.exports = _;

package/dist/Components/NcAppContentDetails.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"NcAppContentDetails.cjs","sources":["../../src/components/NcAppContentDetails/NcAppContentDetails.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-details\">\n\t\t<!-- @slot Provide content to the details view -->\n\t\t<slot />\n\t</div>\n</template>\n\n<script>\nexport default {\n\tname: 'NcAppContentDetails',\n}\n</script>\n"],"names":["_sfc_main"],"mappings":"+EA8BAA,EAAA,CACA,KAAA,qBACA"}
+{"version":3,"file":"NcAppContentDetails.cjs","sources":["../../src/components/NcAppContentDetails/NcAppContentDetails.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-details\">\n\t\t<!-- @slot Provide content to the details view -->\n\t\t<slot />\n\t</div>\n</template>\n\n<script>\nexport default {\n\tname: 'NcAppContentDetails',\n}\n</script>\n"],"names":["_sfc_main"],"mappings":";qEA8BAA,IAAA;AAAA,EACA,MAAA;AACA;;;;;;;;;;;;;;;;"}

package/dist/Components/NcAppContentDetails.mjs

@@ -1,10 +1,21 @@
-import { n as l } from "../chunks/_plugin-vue2_normalizer-5b4c43a4.mjs";
-const a = { name: "NcAppContentDetails" };
+import { n as e } from "../chunks/_plugin-vue2_normalizer-71e2aa87.mjs";
+const a = {
+  name: "NcAppContentDetails"
+};
 var s = function() {
-  var t = this, n = t._self._c;
-  return n("div", { staticClass: "app-content-details" }, [t._t("default")], 2);
-}, e = [], o = l(a, s, e, !1, null, null, null, null);
-const u = o.exports;
+  var n = this, t = n._self._c;
+  return t("div", { staticClass: "app-content-details" }, [n._t("default")], 2);
+}, l = [], r = /* @__PURE__ */ e(
+  a,
+  s,
+  l,
+  !1,
+  null,
+  null,
+  null,
+  null
+);
+const c = r.exports;
 export {
-  u as default
+  c as default
 };

package/dist/Components/NcAppContentDetails.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"NcAppContentDetails.mjs","sources":["../../src/components/NcAppContentDetails/NcAppContentDetails.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-details\">\n\t\t<!-- @slot Provide content to the details view -->\n\t\t<slot />\n\t</div>\n</template>\n\n<script>\nexport default {\n\tname: 'NcAppContentDetails',\n}\n</script>\n"],"names":["_sfc_main"],"mappings":";AA8BA,MAAAA,IAAA,EACA,MAAA,sBACA;;;;;;"}
+{"version":3,"file":"NcAppContentDetails.mjs","sources":["../../src/components/NcAppContentDetails/NcAppContentDetails.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-details\">\n\t\t<!-- @slot Provide content to the details view -->\n\t\t<slot />\n\t</div>\n</template>\n\n<script>\nexport default {\n\tname: 'NcAppContentDetails',\n}\n</script>\n"],"names":["_sfc_main"],"mappings":";AA8BA,MAAAA,IAAA;AAAA,EACA,MAAA;AACA;;;;;;;;;;;;;;;"}

package/dist/Components/NcAppContentList.cjs

@@ -1 +1,29 @@
-"use strict";const s=require("../chunks/_plugin-vue2_normalizer-764a4c12.cjs"),l={name:"NcAppContentList",props:{selection:{type:Boolean,default:!1},showDetails:{type:Boolean,default:!1}}};var n=function(){var t=this,e=t._self._c;return e("div",{staticClass:"app-content-list",class:{selection:t.selection,showdetails:t.showDetails}},[t._t("default")],2)},o=[],a=s.normalizeComponent(l,n,o,!1,null,null,null,null);const i=a.exports;module.exports=i;
+"use strict";
+const s = require("../chunks/_plugin-vue2_normalizer-7f9efb60.cjs"), n = {
+  name: "NcAppContentList",
+  props: {
+    selection: {
+      type: Boolean,
+      default: !1
+    },
+    showDetails: {
+      type: Boolean,
+      default: !1
+    }
+  }
+};
+var l = function() {
+  var e = this, t = e._self._c;
+  return t("div", { staticClass: "app-content-list", class: { selection: e.selection, showdetails: e.showDetails } }, [e._t("default")], 2);
+}, o = [], a = /* @__PURE__ */ s.normalizeComponent(
+  n,
+  l,
+  o,
+  !1,
+  null,
+  null,
+  null,
+  null
+);
+const c = a.exports;
+module.exports = c;

package/dist/Components/NcAppContentList.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"NcAppContentList.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"],"mappings":"+EA8BAA,EAAA,CACA,KAAA,mBACA,MAAA,CACA,UAAA,CACA,KAAA,QACA,QAAA,EACA,EACA,YAAA,CACA,KAAA,QACA,QAAA,EACA,CACA,CACA"}
+{"version":3,"file":"NcAppContentList.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"],"mappings":";qEA8BAA,IAAA;AAAA,EACA,MAAA;AAAA,EACA,OAAA;AAAA,IACA,WAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA,IACA,aAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA,EACA;AACA;;;;;;;;;;;;;;;;"}

package/dist/Components/NcAppContentList.mjs

@@ -1,10 +1,31 @@
-import { n as l } from "../chunks/_plugin-vue2_normalizer-5b4c43a4.mjs";
-const s = { name: "NcAppContentList", props: { selection: { type: Boolean, default: !1 }, showDetails: { type: Boolean, default: !1 } } };
-var n = function() {
-  var t = this, e = t._self._c;
-  return e("div", { staticClass: "app-content-list", class: { selection: t.selection, showdetails: t.showDetails } }, [t._t("default")], 2);
-}, o = [], a = l(s, n, o, !1, null, null, null, null);
-const c = a.exports;
+import { n as s } from "../chunks/_plugin-vue2_normalizer-71e2aa87.mjs";
+const n = {
+  name: "NcAppContentList",
+  props: {
+    selection: {
+      type: Boolean,
+      default: !1
+    },
+    showDetails: {
+      type: Boolean,
+      default: !1
+    }
+  }
+};
+var l = function() {
+  var e = this, t = e._self._c;
+  return t("div", { staticClass: "app-content-list", class: { selection: e.selection, showdetails: e.showDetails } }, [e._t("default")], 2);
+}, a = [], o = /* @__PURE__ */ s(
+  n,
+  l,
+  a,
+  !1,
+  null,
+  null,
+  null,
+  null
+);
+const r = o.exports;
 export {
-  c as default
+  r as default
 };

package/dist/Components/NcAppContentList.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"NcAppContentList.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"],"mappings":";AA8BA,MAAAA,IAAA,EACA,MAAA,oBACA,OAAA,EACA,WAAA,EACA,MAAA,SACA,SAAA,GACA,GACA,aAAA,EACA,MAAA,SACA,SAAA,GACA,EACA,EACA;;;;;;"}
+{"version":3,"file":"NcAppContentList.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"],"mappings":";AA8BA,MAAAA,IAAA;AAAA,EACA,MAAA;AAAA,EACA,OAAA;AAAA,IACA,WAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA,IACA,aAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA,EACA;AACA;;;;;;;;;;;;;;;"}

package/dist/Components/NcAppNavigation.cjs

@@ -1 +1,66 @@
-var v=require("../assets/index36.css");const o=require("../chunks/NcAppNavigationToggle-c566f66e.cjs"),a=require("../Mixins/isMobile.cjs"),e=require("@nextcloud/event-bus"),s=require("../chunks/_plugin-vue2_normalizer-764a4c12.cjs");const g={name:"NcAppNavigation",components:{NcAppNavigationToggle:o.NcAppNavigationToggle},mixins:[a],data(){return{open:!0}},computed:{ariaHidden(){return this.open?"false":"true"}},watch:{isMobile(){this.open=!this.isMobile}},mounted(){e.subscribe("toggle-navigation",this.toggleNavigationByEventBus),e.emit("navigation-toggled",{open:this.open})},unmounted(){e.unsubscribe("toggle-navigation",this.toggleNavigationByEventBus)},methods:{toggleNavigation(t){this.open=typeof t>"u"?!this.open:t;const i=getComputedStyle(document.body),n=parseInt(i.getPropertyValue("--animation-quick"))||100;setTimeout(()=>{e.emit("navigation-toggled",{open:this.open})},1.5*n)},toggleNavigationByEventBus({open:t}){this.toggleNavigation(t)}}};var p=function(){var t=this,i=t._self._c;return i("div",{staticClass:"app-navigation",class:{"app-navigation--close":!t.open},attrs:{id:"app-navigation-vue",role:"navigation",inert:!t.open||null}},[i("NcAppNavigationToggle",{attrs:{open:t.open},on:{"update:open":t.toggleNavigation}}),i("div",{staticClass:"app-navigation__content",attrs:{"aria-hidden":t.ariaHidden}},[t._t("default"),i("ul",{staticClass:"app-navigation__list"},[t._t("list")],2),t._t("footer")],2)],1)},l=[],r=s.normalizeComponent(g,p,l,!1,null,"1ce9e281",null,null);const u=r.exports;module.exports=u;
+var c = require("../assets/index-0adc989c.css");
+const o = require("../chunks/NcAppNavigationToggle-960658a0.cjs"), a = require("../Mixins/isMobile.cjs"), i = require("@nextcloud/event-bus"), s = require("../chunks/_plugin-vue2_normalizer-7f9efb60.cjs");
+const g = {
+  name: "NcAppNavigation",
+  components: {
+    NcAppNavigationToggle: o.NcAppNavigationToggle
+  },
+  mixins: [a],
+  data() {
+    return {
+      open: !0
+    };
+  },
+  computed: {
+    ariaHidden() {
+      return this.open ? "false" : "true";
+    }
+  },
+  watch: {
+    isMobile() {
+      this.open = !this.isMobile;
+    }
+  },
+  mounted() {
+    i.subscribe("toggle-navigation", this.toggleNavigationByEventBus), i.emit("navigation-toggled", {
+      open: this.open
+    });
+  },
+  unmounted() {
+    i.unsubscribe("toggle-navigation", this.toggleNavigationByEventBus);
+  },
+  methods: {
+    /**
+     * Toggle the navigation
+     *
+     * @param {boolean} [state] set the state instead of inverting the current one
+     */
+    toggleNavigation(n) {
+      this.open = typeof n > "u" ? !this.open : n;
+      const t = getComputedStyle(document.body), e = parseInt(t.getPropertyValue("--animation-quick")) || 100;
+      setTimeout(() => {
+        i.emit("navigation-toggled", {
+          open: this.open
+        });
+      }, 1.5 * e);
+    },
+    toggleNavigationByEventBus({ open: n }) {
+      this.toggleNavigation(n);
+    }
+  }
+};
+var p = function() {
+  var t = this, e = t._self._c;
+  return e("div", { staticClass: "app-navigation", class: { "app-navigation--close": !t.open }, attrs: { id: "app-navigation-vue", role: "navigation" } }, [e("NcAppNavigationToggle", { attrs: { open: t.open }, on: { "update:open": t.toggleNavigation } }), e("div", { staticClass: "app-navigation__content", attrs: { "aria-hidden": t.ariaHidden, inert: !t.open || null } }, [t._t("default"), e("ul", { staticClass: "app-navigation__list" }, [t._t("list")], 2), t._t("footer")], 2)], 1);
+}, l = [], r = /* @__PURE__ */ s.normalizeComponent(
+  g,
+  p,
+  l,
+  !1,
+  null,
+  "23d718a2",
+  null,
+  null
+);
+const u = r.exports;
+module.exports = u;

package/dist/Components/NcAppNavigation.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"NcAppNavigation.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":""}
+{"version":3,"file":"NcAppNavigation.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 id=\"app-navigation-vue\"\n\t\tclass=\"app-navigation\"\n\t\trole=\"navigation\"\n\t\t:class=\"{'app-navigation--close':!open }\">\n\t\t<NcAppNavigationToggle :open=\"open\" @update:open=\"toggleNavigation\" />\n\t\t<div :aria-hidden=\"ariaHidden\"\n\t\t\tclass=\"app-navigation__content\"\n\t\t\t:inert=\"!open || null\">\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</div>\n\t</div>\n</template>\n\n<script>\nimport NcAppNavigationToggle from '../NcAppNavigationToggle/index.js'\nimport isMobile from '../../mixins/isMobile/index.js'\n\nimport { emit, subscribe, unsubscribe } from '@nextcloud/event-bus'\n\nexport default {\n\tname: 'NcAppNavigation',\n\n\tcomponents: {\n\t\tNcAppNavigationToggle,\n\t},\n\n\tmixins: [isMobile],\n\n\tdata() {\n\t\treturn {\n\t\t\topen: true,\n\t\t}\n\t},\n\tcomputed: {\n\t\tariaHidden() {\n\t\t\treturn this.open ? 'false' : 'true'\n\t\t},\n\t},\n\n\twatch: {\n\t\tisMobile() {\n\t\t\tthis.open = !this.isMobile\n\t\t},\n\t},\n\n\tmounted() {\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\t},\n\tunmounted() {\n\t\tunsubscribe('toggle-navigation', this.toggleNavigationByEventBus)\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\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\t\ttoggleNavigationByEventBus({ open }) {\n\t\t\tthis.toggleNavigation(open)\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\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//list of navigation items\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\n// Put the toggle behind appsidebar on small screens\n@media only screen and (max-width: 768px) {\n\t.app-navigation {\n\t\tz-index: 1400;\n\t}\n}\n\n</style>\n"],"names":["_sfc_main","NcAppNavigationToggle","Mixins_isMobile","eventBus","state","bodyStyles","animationLength","open"],"mappings":";;AAkFA,MAAAA,IAAA;AAAA,EACA,MAAA;AAAA,EAEA,YAAA;AAAA,IACA,uBAAAC,EAAA;AAAA,EACA;AAAA,EAEA,QAAA,CAAAC,CAAA;AAAA,EAEA,OAAA;AACA,WAAA;AAAA,MACA,MAAA;AAAA,IACA;AAAA,EACA;AAAA,EACA,UAAA;AAAA,IACA,aAAA;AACA,aAAA,KAAA,OAAA,UAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA;AAAA,IACA,WAAA;AACA,WAAA,OAAA,CAAA,KAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,UAAA;AACA,IAAAC,EAAA,UAAA,qBAAA,KAAA,0BAAA,GAEAA,EAAA,KAAA,sBAAA;AAAA,MACA,MAAA,KAAA;AAAA,IACA,CAAA;AAAA,EACA;AAAA,EACA,YAAA;AACA,IAAAA,EAAA,YAAA,qBAAA,KAAA,0BAAA;AAAA,EACA;AAAA,EAEA,SAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,iBAAAC,GAAA;AACA,WAAA,OAAA,OAAAA,IAAA,MAAA,CAAA,KAAA,OAAAA;AACA,YAAAC,IAAA,iBAAA,SAAA,IAAA,GACAC,IAAA,SAAAD,EAAA,iBAAA,mBAAA,CAAA,KAAA;AAEA,iBAAA,MAAA;AACA,QAAAF,EAAA,KAAA,sBAAA;AAAA,UACA,MAAA,KAAA;AAAA,QACA,CAAA;AAAA,MAEA,GAAA,MAAAG,CAAA;AAAA,IACA;AAAA,IACA,2BAAA,EAAA,MAAAC,EAAA,GAAA;AACA,WAAA,iBAAAA,CAAA;AAAA,IACA;AAAA,EACA;AACA;;;;;;;;;;;;;;;;"}