@nextcloud/vue 8.6.0 → 9.0.0-alpha.1

package/dist/chunks/NcAppContent-Tw5gNorr.mjs

@@ -0,0 +1,275 @@
+import "../assets/NcAppContent-kIkHd4VN.css";
+import { N } from "./NcButton-YOXv3gFY.mjs";
+import { r as v, y, a as D } from "./_l10n-uuAvfQgY.mjs";
+import "../Directives/Tooltip.mjs";
+import { emit as g } from "@nextcloud/event-bus";
+import { A as b } from "./ArrowRight-6gYTXvBH.mjs";
+import { resolveComponent as p, resolveDirective as C, withDirectives as P, openBlock as s, createBlock as _, withCtx as c, createVNode as d, createElementBlock as o, normalizeClass as f, toDisplayString as k, createCommentVNode as z, Fragment as x, withModifiers as A, renderSlot as l } from "vue";
+import { _ as w } from "./_plugin-vue_export-helper-hUChTQA_.mjs";
+import { VTooltip as B } from "floating-vue";
+import { useIsMobile as M } from "../Composables/useIsMobile.mjs";
+import { getBuilder as I } from "@nextcloud/browser-storage";
+import { useSwipe as L } from "@vueuse/core";
+import { Pane as R, Splitpanes as T } from "splitpanes";
+import "splitpanes/dist/splitpanes.css";
+v(y);
+const W = {
+  name: "NcAppDetailsToggle",
+  directives: {
+    tooltip: B
+  },
+  components: {
+    NcButton: N,
+    ArrowRight: b
+  },
+  computed: {
+    title() {
+      return D("Go back to the list");
+    }
+  },
+  beforeMount() {
+    this.toggleAppNavigationButton(!0);
+  },
+  beforeUnmount() {
+    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 && g("toggle-navigation", { open: !1 }));
+    }
+  }
+};
+function H(e, t, n, u, a, i) {
+  const h = p("ArrowRight"), r = p("NcButton"), m = C("tooltip");
+  return P((s(), _(r, {
+    "aria-label": i.title,
+    class: "app-details-toggle"
+  }, {
+    icon: c(() => [
+      d(h, { size: 20 })
+    ]),
+    _: 1
+  }, 8, ["aria-label"])), [
+    [m, i.title]
+  ]);
+}
+const K = /* @__PURE__ */ w(W, [["render", H], ["__scopeId", "data-v-13238b37"]]), S = I("nextcloud").persist().build(), V = {
+  name: "NcAppContent",
+  components: {
+    NcAppDetailsToggle: K,
+    Pane: R,
+    Splitpanes: T
+  },
+  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"
+  ],
+  setup() {
+    return {
+      isMobile: M()
+    };
+  },
+  data() {
+    return {
+      contentHeight: 0,
+      hasList: !1,
+      swiping: {},
+      listPaneSize: this.restorePaneConfig()
+    };
+  },
+  computed: {
+    paneConfigID() {
+      if (this.paneConfigKey !== "")
+        return "pane-list-size-".concat(this.paneConfigKey);
+      try {
+        return "pane-list-size-".concat(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 = L(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" ? g("toggle-navigation", {
+        open: !0
+      }) : this.swiping.coordsStart.x < 300 * 1.5 && t === "left" && g("toggle-navigation", {
+        open: !1
+      }));
+    },
+    handlePaneResize(e) {
+      const t = parseInt(e[0].size, 10);
+      S.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(S.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);
+    }
+  }
+}, X = {
+  key: 0,
+  class: "hidden-visually"
+}, Z = {
+  key: 1,
+  class: "app-content-wrapper"
+};
+function E(e, t, n, u, a, i) {
+  const h = p("NcAppDetailsToggle"), r = p("Pane"), m = p("Splitpanes");
+  return s(), o("main", {
+    id: "app-content-vue",
+    class: f(["app-content no-snapper", { "app-content--has-list": a.hasList }])
+  }, [
+    n.pageHeading ? (s(), o("h1", X, k(n.pageHeading), 1)) : z("", !0),
+    a.hasList ? (s(), o(x, { key: 1 }, [
+      u.isMobile ? (s(), o("div", {
+        key: 0,
+        class: f([n.showDetails ? "app-content-wrapper--show-details" : "app-content-wrapper--show-list", "app-content-wrapper app-content-wrapper--mobile"])
+      }, [
+        a.hasList && n.showDetails ? (s(), _(h, {
+          key: 0,
+          onClick: A(i.hideDetails, ["stop", "prevent"])
+        }, null, 8, ["onClick"])) : z("", !0),
+        l(e.$slots, "list", {}, void 0, !0),
+        l(e.$slots, "default", {}, void 0, !0)
+      ], 2)) : (s(), o("div", Z, [
+        d(m, {
+          class: "default-theme",
+          onResized: i.handlePaneResize
+        }, {
+          default: c(() => [
+            d(r, {
+              class: "splitpanes__pane-list",
+              size: a.listPaneSize || i.paneDefaults.list.size,
+              "min-size": i.paneDefaults.list.min,
+              "max-size": i.paneDefaults.list.max
+            }, {
+              default: c(() => [
+                l(e.$slots, "list", {}, void 0, !0)
+              ]),
+              _: 3
+            }, 8, ["size", "min-size", "max-size"]),
+            d(r, {
+              class: "splitpanes__pane-details",
+              size: i.detailsPaneSize,
+              "min-size": i.paneDefaults.details.min,
+              "max-size": i.paneDefaults.details.max
+            }, {
+              default: c(() => [
+                l(e.$slots, "default", {}, void 0, !0)
+              ]),
+              _: 3
+            }, 8, ["size", "min-size", "max-size"])
+          ]),
+          _: 3
+        }, 8, ["onResized"])
+      ]))
+    ], 64)) : l(e.$slots, "default", { key: 2 }, void 0, !0)
+  ], 2);
+}
+const ne = /* @__PURE__ */ w(V, [["render", E], ["__scopeId", "data-v-d2d0b7de"]]);
+export {
+  ne as N
+};

package/dist/chunks/NcAppContent-Tw5gNorr.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"NcAppContent-Tw5gNorr.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.ts'\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\tbeforeUnmount() {\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.stop.prevent=\"hideDetails\" />\n\n\t\t\t\t<slot name=\"list\" />\n\t\t\t\t<slot />\n\t\t\t</div>\n\n\t\t\t<div v-else class=\"app-content-wrapper\">\n\t\t\t\t<Splitpanes class=\"default-theme\"\n\t\t\t\t\t@resized=\"handlePaneResize\">\n\t\t\t\t\t<Pane class=\"splitpanes__pane-list\"\n\t\t\t\t\t\t:size=\"listPaneSize || paneDefaults.list.size\"\n\t\t\t\t\t\t:min-size=\"paneDefaults.list.min\"\n\t\t\t\t\t\t:max-size=\"paneDefaults.list.max\">\n\t\t\t\t\t\t<!-- @slot Provide a list to the app content -->\n\t\t\t\t\t\t<slot name=\"list\" />\n\t\t\t\t\t</Pane>\n\n\t\t\t\t\t<Pane class=\"splitpanes__pane-details\"\n\t\t\t\t\t\t:size=\"detailsPaneSize\"\n\t\t\t\t\t\t:min-size=\"paneDefaults.details.min\"\n\t\t\t\t\t\t:max-size=\"paneDefaults.details.max\">\n\t\t\t\t\t\t<!-- @slot Provide the main content to the app content -->\n\t\t\t\t\t\t<slot />\n\t\t\t\t\t</Pane>\n\t\t\t\t</Splitpanes>\n\t\t\t</div>\n\t\t</template>\n\n\t\t<!-- @slot Provide the main content to the app content -->\n\t\t<slot v-else />\n\t</main>\n</template>\n\n<script>\nimport NcAppDetailsToggle from './NcAppDetailsToggle.vue'\nimport { useIsMobile } from '../../composables/useIsMobile/index.js'\n\nimport { getBuilder } from '@nextcloud/browser-storage'\nimport { emit } from '@nextcloud/event-bus'\nimport { useSwipe } from '@vueuse/core'\nimport { Splitpanes, Pane } from 'splitpanes'\n\nimport 'splitpanes/dist/splitpanes.css'\n\nconst browserStorage = getBuilder('nextcloud').persist().build()\n\n/**\n * App content container to be used for the main content of your app\n *\n */\nexport default {\n\tname: 'NcAppContent',\n\n\tcomponents: {\n\t\tNcAppDetailsToggle,\n\t\tPane,\n\t\tSplitpanes,\n\t},\n\n\tprops: {\n\t\t/**\n\t\t * Allows to disable the control by swipe of the app navigation open state\n\t\t */\n\t\tallowSwipeNavigation: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: true,\n\t\t},\n\n\t\t/**\n\t\t * Allows you to set the default width of the resizable list in %\n\t\t * Must be between listMinWidth and listMaxWidth\n\t\t */\n\t\tlistSize: {\n\t\t\ttype: Number,\n\t\t\tdefault: 20,\n\t\t},\n\n\t\t/**\n\t\t * Allows you to set the minimum width of the list column in %\n\t\t */\n\t\tlistMinWidth: {\n\t\t\ttype: Number,\n\t\t\tdefault: 15,\n\t\t},\n\n\t\t/**\n\t\t * Allows you to set the maximum width of the list column in %\n\t\t */\n\t\tlistMaxWidth: {\n\t\t\ttype: Number,\n\t\t\tdefault: 40,\n\t\t},\n\n\t\t/**\n\t\t * Specify the config key for the pane config sizes\n\t\t * Default is the global var appName if you use the webpack-vue-config\n\t\t */\n\t\tpaneConfigKey: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\n\t\t/**\n\t\t * When in mobile view, only the list or the details are shown\n\t\t * If you provide a list, you need to provide a variable\n\t\t * that will be set to true by the user when an element of\n\t\t * the list gets selected. The details will then show a back\n\t\t * arrow to return to the list that will update this prop to false.\n\t\t */\n\t\tshowDetails: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: true,\n\t\t},\n\n\t\t/**\n\t\t * Specify the `<h1>` page heading\n\t\t */\n\t\tpageHeading: {\n\t\t\ttype: String,\n\t\t\tdefault: null,\n\t\t},\n\t},\n\n\temits: [\n\t\t'update:showDetails',\n\t\t'resize:list',\n\t],\n\n\tsetup() {\n\t\treturn {\n\t\t\tisMobile: useIsMobile(),\n\t\t}\n\t},\n\n\tdata() {\n\t\treturn {\n\t\t\tcontentHeight: 0,\n\t\t\thasList: false,\n\n\t\t\tswiping: {},\n\t\t\tlistPaneSize: this.restorePaneConfig(),\n\t\t}\n\t},\n\n\tcomputed: {\n\t\tpaneConfigID() {\n\t\t\t// If provided, let's use it\n\t\t\tif (this.paneConfigKey !== '') {\n\t\t\t\treturn `pane-list-size-${this.paneConfigKey}`\n\t\t\t}\n\n\t\t\ttry {\n\t\t\t\t// Using the webpack-vue-config, appName is a global variable\n\t\t\t\t// This will throw a ReferenceError when the global variable is missing\n\t\t\t\t// In that case either you provide paneConfigKey or else it fallback\n\t\t\t\t// to a global storage key\n\t\t\t\treturn `pane-list-size-${appName}`\n\t\t\t} catch (e) {\n\t\t\t\tconsole.info('[INFO] AppContent:', 'falling back to global nextcloud pane config')\n\t\t\t\treturn 'pane-list-size-nextcloud'\n\t\t\t}\n\t\t},\n\n\t\tdetailsPaneSize() {\n\t\t\tif (this.listPaneSize) {\n\t\t\t\treturn 100 - this.listPaneSize\n\t\t\t}\n\t\t\treturn this.paneDefaults.details.size\n\t\t},\n\n\t\tpaneDefaults() {\n\t\t\treturn {\n\t\t\t\tlist: {\n\t\t\t\t\tsize: this.listSize,\n\t\t\t\t\tmin: this.listMinWidth,\n\t\t\t\t\tmax: this.listMaxWidth,\n\t\t\t\t},\n\n\t\t\t\t// set the inverse values of the details column\n\t\t\t\t// based on the provided (or default) values of the list column\n\t\t\t\tdetails: {\n\t\t\t\t\tsize: 100 - this.listSize,\n\t\t\t\t\tmin: 100 - this.listMaxWidth,\n\t\t\t\t\tmax: 100 - this.listMinWidth,\n\t\t\t\t},\n\t\t\t}\n\t\t},\n\t},\n\n\tupdated() {\n\t\tthis.checkListSlot()\n\t},\n\n\tmounted() {\n\t\tif (this.allowSwipeNavigation) {\n\t\t\tthis.swiping = useSwipe(this.$el, {\n\t\t\t\tonSwipeEnd: this.handleSwipe,\n\t\t\t})\n\t\t}\n\n\t\tthis.checkListSlot()\n\t\tthis.restorePaneConfig()\n\t},\n\n\tmethods: {\n\t\t/**\n\t\t * handle the swipe event\n\t\t *\n\t\t * @param {TouchEvent} e The touch event\n\t\t * @param {import('@vueuse/core').SwipeDirection} direction The swipe direction of the event\n\t\t */\n\t\thandleSwipe(e, direction) {\n\t\t\tconst minSwipeX = 70\n\t\t\tconst touchZone = 300\n\t\t\tif (Math.abs(this.swiping.lengthX) > minSwipeX) {\n\t\t\t\tif (this.swiping.coordsStart.x < (touchZone / 2) && direction === 'right') {\n\t\t\t\t\temit('toggle-navigation', {\n\t\t\t\t\t\topen: true,\n\t\t\t\t\t})\n\t\t\t\t} else if (this.swiping.coordsStart.x < touchZone * 1.5 && direction === 'left') {\n\t\t\t\t\temit('toggle-navigation', {\n\t\t\t\t\t\topen: false,\n\t\t\t\t\t})\n\t\t\t\t}\n\t\t\t}\n\t\t},\n\n\t\thandlePaneResize(event) {\n\t\t\tconst listPaneSize = parseInt(event[0].size, 10)\n\t\t\tbrowserStorage.setItem(this.paneConfigID, JSON.stringify(listPaneSize))\n\t\t\tthis.listPaneSize = listPaneSize\n\t\t\t/**\n\t\t\t * Emitted when the list pane is resized by the user\n\t\t\t */\n\t\t\tthis.$emit('resize:list', { size: listPaneSize })\n\t\t\tconsole.debug('AppContent pane config', listPaneSize)\n\t\t},\n\n\t\t// $slots is not reactive, we need to update this manually\n\t\tcheckListSlot() {\n\t\t\tconst hasListSlot = !!this.$slots.list\n\t\t\tif (this.hasList !== hasListSlot) {\n\t\t\t\tthis.hasList = hasListSlot\n\t\t\t}\n\t\t},\n\n\t\t// browserStorage is not reactive, we need to update this manually\n\t\trestorePaneConfig() {\n\t\t\tconst listPaneSize = parseInt(browserStorage.getItem(this.paneConfigID), 10)\n\t\t\tif (!isNaN(listPaneSize) && listPaneSize !== this.listPaneSize) {\n\t\t\t\tconsole.debug('AppContent pane config', listPaneSize)\n\t\t\t\tthis.listPaneSize = listPaneSize\n\t\t\t\treturn listPaneSize\n\t\t\t}\n\t\t},\n\n\t\t/**\n\t\t * The user clicked the back arrow from the details view\n\t\t */\n\t\thideDetails() {\n\t\t\tthis.$emit('update:showDetails', false)\n\t\t},\n\t},\n}\n</script>\n<style lang=\"scss\" scoped>\n\n.app-content {\n\tposition: initial;\n\tz-index: 1000;\n\tflex-basis: 100vw;\n\theight: 100%;\n\t// Overriding server styles TODO: cleanup!\n\tmargin: 0 !important;\n\tbackground-color: var(--color-main-background);\n\tmin-width: 0;\n\n\t&:not(.app-content--has-list) {\n\t\toverflow: auto;\n\t}\n}\n\n.app-content-wrapper {\n\tposition: relative;\n\twidth: 100%;\n\theight: 100%;\n}\n\n// Mobile list/details handling\n.app-content-wrapper--mobile {\n\t&.app-content-wrapper--show-list :deep() {\n\t\t.app-content-list {\n\t\t\tdisplay: flex;\n\t\t}\n\t\t.app-content-details {\n\t\t\tdisplay: none;\n\t\t}\n\t}\n\t&.app-content-wrapper--show-details :deep() {\n\t\t.app-content-list {\n\t\t\tdisplay: none;\n\t\t}\n\t\t.app-content-details {\n\t\t\tdisplay: block;\n\t\t}\n\t}\n}\n\n:deep(.splitpanes.default-theme) {\n\t.app-content-list {\n\t\tmax-width: none;\n\t\t/* Thin scrollbar is hard to catch on resizable columns */\n\t\tscrollbar-width: auto;\n\t}\n\n\t.splitpanes__pane {\n\t\tbackground-color: transparent;\n\t\ttransition: none;\n\n\t\t&-list {\n\t\t\tmin-width: 300px;\n\t\t\tposition: sticky;\n\t\t\ttop: var(--header-height);\n\n\t\t\t@media only screen and (width < $breakpoint-mobile) {\n\t\t\t\tdisplay: none;\n\t\t\t}\n\t\t}\n\n\t\t&-details {\n\t\t\toverflow-y: auto;\n\n\t\t\t@media only screen and (width < $breakpoint-mobile) {\n\t\t\t\tmin-width: 100%;\n\t\t\t}\n\t\t}\n\t}\n\n\t.splitpanes__splitter {\n\t\twidth: 9px;\n\t\tmargin-left: -5px;\n\t\tbackground-color: transparent;\n\t\tborder-left: none;\n\n\t\t&:before,\n\t\t&:after {\n\t\t\tdisplay: none;\n\t\t}\n\t}\n}\n</style>\n"],"names":["_sfc_main$1","VTooltip","NcButton","hide","appNavigationToggle","emit","$options","withCtx","browserStorage","getBuilder","_sfc_main","NcAppDetailsToggle","useSwipe","direction","listPaneSize","event","hasListSlot","normalizeClass","$data","createCommentVNode","openBlock","createElementBlock","Fragment","$props","_hoisted_2","renderSlot","_ctx"],"mappings":";;;;;;;;;;;;;;;AAuCA,MAAAA,IAAA;AAAA;;IAIE,SAAAC;AAAA;;IAIA,UAAAC;AAAA;;EAID,UAAA;AAAA,IACC,QAAA;;;;;AAMA,SAAA,0BAAA,EAAA;AAAA;EAGD,gBAAA;AACC,SAAA,0BAAA,EAAA;AAAA;EAGD,SAAA;AAAA,IACC,0BAAAC,IAAA,IAAA;AACC,YAAAC,IAAA,SAAA,cAAA,wCAAA;iDAKCD,MAAA,MACCE,EAAA,qBAAA,EAAA,MAAA,GAAA,CAAA;AAAA;;AAKL;;;;IAvD8B,cAAAC,EAAA;AAAA,IAAmB,OAAA;AAAA;IACpC,MAAAC,EAAA,MAAA;AAAA;;;;;;;mFCuGbC,IAAAC,EAAA,WAAA,EAAA,QAAA,EAAA,MAAA,GAMAC,IAAA;AAAA,EACC,MAAA;AAAA;IAGC,oBAAAC;AAAA;;;EAKD,OAAA;AAAA;AAAA;AAAA;AAAA,IAIC,sBAAA;AAAA;;;;;;;IASA,UAAA;AAAA;;;;;;;;;;;;;;;;;;;;;IAyBA,eAAA;AAAA;;;;;;;;;;;;;;;;;;;;;;EA0BD,OAAA;AAAA,IACC;AAAA;;EAID,QAAA;AACC,WAAA;AAAA;IAEA;AAAA;EAGD,OAAA;AACC,WAAA;AAAA,MACC,eAAA;AAAA;;MAIA,cAAA,KAAA,kBAAA;AAAA,IACD;AAAA;EAGD,UAAA;AAAA,IACC,eAAA;;AAGE,eAAA,kBAAA,YAAA;AAGD,UAAA;AAKC,eAAA,kBAAA;AAAA,MACD,QAAA;AACC,uBAAA,KAAA,sBAAA,8CAAA,GACA;AAAA,MACD;AAAA;IAGD,kBAAA;AACC,aAAA,KAAA,yCAGA,KAAA,aAAA,QAAA;AAAA;IAGD,eAAA;AACC,aAAA;AAAA;UAEE,MAAA,KAAA;AAAA,UACA,KAAA,KAAA;AAAA,UACA,KAAA,KAAA;AAAA;;;QAKD,SAAA;AAAA;;;;MAKD;AAAA;;EAIF,UAAA;AACC,SAAA,cAAA;AAAA;EAGD,UAAA;kCAEE,KAAA,UAAAC,EAAA,KAAA,KAAA;AAAA;SAKD,KAAA,cAAA;;EAID,SAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAUE,MAAA,KAAA,IAAA,KAAA,QAAA,OAAA,IAAA,OACC,KAAA,QAAA,YAAA,IAAA,MAAA,KAAAC,MAAA;QAEE,MAAA;AAAA,WAEF,KAAA,QAAA,YAAA,IAAA,MAAA,OAAAA,MAAA;;;;;AASD,YAAAC,IAAA,SAAAC,EAAA,CAAA,EAAA,MAAA,EAAA;AACA,MAAAP,EAAA,QAAA,KAAA,cAAA,KAAA,UAAAM,CAAA,CAAA,0BAKA,KAAA,MAAA,eAAA,EAAA,MAAAA,EAAA,CAAA;;;IAKD,gBAAA;AACC,YAAAE,IAAA,CAAA,CAAA,KAAA,OAAA;AACA,MAAA,KAAA,YAAAA;;;IAMD,oBAAA;AACC,YAAAF,IAAA,SAAAN,EAAA,QAAA,KAAA,YAAA,GAAA,EAAA;;kFAICM;AAAA;;;;;AAQD,WAAA,MAAA,sBAAA,EAAA;AAAA;;AAGH;;EAhRyB,OAAA;;;EAeV,OAAA;;;;;IAhBR,IAAA;AAAA,IAAqB,OAAAG,EAAA,CAAA,0BAAA,EAAA,yBAAAC,EAAA,QAAA,CAAA,CAAA;AAAA;6DAzE5BC,EAAA,IAAA,EAAA;AAAA,iBA8EEC,EAAA,GAAAC,EAAAC,GAAA,EAAA,KAAA,EAAA,GAAA;AAAA;;QAGG,OAAAL,EAAA,CAAAM,EAAA,cAAA,sCAAA,kCAAA,iDAAA,CAAA;AAAA;QAEyBL,EAAA,WAAAK,EAAA;;;oCAnF9BJ,EAAA,IAAA,EAAA;AAAA;;gBAyFGC,EAAA,GAAAC,EAAA,OAAAG,GAAA;AAAA;UACa,OAAA;AAAA,UACV,WAAAlB,EAAA;AAAA;UA3FN,SAAAC,EAAA,MAAA;AAAA;cA4FW,OAAA;AAAA,cACJ,MAAAW,EAAA,gBAAAZ,EAAA,aAAA,KAAA;AAAA,cACA,YAAAA,EAAA,aAAA,KAAA;AAAA,cACA,YAAAA,EAAA,aAAA,KAAA;AAAA;cA/FP,SAAAC,EAAA,MAAA;AAAA;;;;;cAoGW,OAAA;AAAA,cACJ,MAAAD,EAAA;AAAA,cACA,YAAAA,EAAA,aAAA,QAAA;AAAA,cACA,YAAAA,EAAA,aAAA,QAAA;AAAA;cAvGP,SAAAC,EAAA,MAAA;AAAA;;;;;;;;cAgHEkB,EAAAC,EAAA,QAAA,WAAA,EAAA,KAAA,EAAA,GAAA,QAAA,EAAA;AAAA;;;"}

package/dist/chunks/NcAppContent-mHc-Ms2b.cjs

@@ -0,0 +1,264 @@
+var x = require("../assets/NcAppContent-kIkHd4VN.css");
+const m = require("./NcButton-7UKtzkX5.cjs"), c = require("./_l10n-Fl7RzbcZ.cjs");
+require("../Directives/Tooltip.cjs");
+const u = require("@nextcloud/event-bus"), f = require("./ArrowRight-UxW1qyeX.cjs"), e = require("vue"), g = require("./_plugin-vue_export-helper-xG2iG1wl.cjs"), z = require("floating-vue"), S = require("../Composables/useIsMobile.cjs"), _ = require("@nextcloud/browser-storage"), w = require("@vueuse/core"), d = require("splitpanes");
+require("splitpanes/dist/splitpanes.css");
+c.register(c.t23);
+const N = {
+  name: "NcAppDetailsToggle",
+  directives: {
+    tooltip: z.VTooltip
+  },
+  components: {
+    NcButton: m.NcButton,
+    ArrowRight: f.ArrowRight
+  },
+  computed: {
+    title() {
+      return c.t("Go back to the list");
+    }
+  },
+  beforeMount() {
+    this.toggleAppNavigationButton(!0);
+  },
+  beforeUnmount() {
+    this.toggleAppNavigationButton(!1);
+  },
+  methods: {
+    toggleAppNavigationButton(t = !0) {
+      const i = document.querySelector(".app-navigation .app-navigation-toggle");
+      i && (i.style.display = t ? "none" : null, t === !0 && u.emit("toggle-navigation", { open: !1 }));
+    }
+  }
+};
+function C(t, i, s, l, o, n) {
+  const r = e.resolveComponent("ArrowRight"), a = e.resolveComponent("NcButton"), p = e.resolveDirective("tooltip");
+  return e.withDirectives((e.openBlock(), e.createBlock(a, {
+    "aria-label": n.title,
+    class: "app-details-toggle"
+  }, {
+    icon: e.withCtx(() => [
+      e.createVNode(r, { size: 20 })
+    ]),
+    _: 1
+  }, 8, ["aria-label"])), [
+    [p, n.title]
+  ]);
+}
+const v = /* @__PURE__ */ g._export_sfc(N, [["render", C], ["__scopeId", "data-v-13238b37"]]), h = _.getBuilder("nextcloud").persist().build(), k = {
+  name: "NcAppContent",
+  components: {
+    NcAppDetailsToggle: v,
+    Pane: d.Pane,
+    Splitpanes: d.Splitpanes
+  },
+  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"
+  ],
+  setup() {
+    return {
+      isMobile: S.useIsMobile()
+    };
+  },
+  data() {
+    return {
+      contentHeight: 0,
+      hasList: !1,
+      swiping: {},
+      listPaneSize: this.restorePaneConfig()
+    };
+  },
+  computed: {
+    paneConfigID() {
+      if (this.paneConfigKey !== "")
+        return "pane-list-size-".concat(this.paneConfigKey);
+      try {
+        return "pane-list-size-".concat(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 = w.useSwipe(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(t, i) {
+      Math.abs(this.swiping.lengthX) > 70 && (this.swiping.coordsStart.x < 300 / 2 && i === "right" ? u.emit("toggle-navigation", {
+        open: !0
+      }) : this.swiping.coordsStart.x < 300 * 1.5 && i === "left" && u.emit("toggle-navigation", {
+        open: !1
+      }));
+    },
+    handlePaneResize(t) {
+      const i = parseInt(t[0].size, 10);
+      h.setItem(this.paneConfigID, JSON.stringify(i)), this.listPaneSize = i, this.$emit("resize:list", { size: i }), console.debug("AppContent pane config", i);
+    },
+    // $slots is not reactive, we need to update this manually
+    checkListSlot() {
+      const t = !!this.$slots.list;
+      this.hasList !== t && (this.hasList = t);
+    },
+    // browserStorage is not reactive, we need to update this manually
+    restorePaneConfig() {
+      const t = parseInt(h.getItem(this.paneConfigID), 10);
+      if (!isNaN(t) && t !== this.listPaneSize)
+        return console.debug("AppContent pane config", t), this.listPaneSize = t, t;
+    },
+    /**
+     * The user clicked the back arrow from the details view
+     */
+    hideDetails() {
+      this.$emit("update:showDetails", !1);
+    }
+  }
+}, B = {
+  key: 0,
+  class: "hidden-visually"
+}, b = {
+  key: 1,
+  class: "app-content-wrapper"
+};
+function D(t, i, s, l, o, n) {
+  const r = e.resolveComponent("NcAppDetailsToggle"), a = e.resolveComponent("Pane"), p = e.resolveComponent("Splitpanes");
+  return e.openBlock(), e.createElementBlock("main", {
+    id: "app-content-vue",
+    class: e.normalizeClass(["app-content no-snapper", { "app-content--has-list": o.hasList }])
+  }, [
+    s.pageHeading ? (e.openBlock(), e.createElementBlock("h1", B, e.toDisplayString(s.pageHeading), 1)) : e.createCommentVNode("", !0),
+    o.hasList ? (e.openBlock(), e.createElementBlock(e.Fragment, { key: 1 }, [
+      l.isMobile ? (e.openBlock(), e.createElementBlock("div", {
+        key: 0,
+        class: e.normalizeClass([s.showDetails ? "app-content-wrapper--show-details" : "app-content-wrapper--show-list", "app-content-wrapper app-content-wrapper--mobile"])
+      }, [
+        o.hasList && s.showDetails ? (e.openBlock(), e.createBlock(r, {
+          key: 0,
+          onClick: e.withModifiers(n.hideDetails, ["stop", "prevent"])
+        }, null, 8, ["onClick"])) : e.createCommentVNode("", !0),
+        e.renderSlot(t.$slots, "list", {}, void 0, !0),
+        e.renderSlot(t.$slots, "default", {}, void 0, !0)
+      ], 2)) : (e.openBlock(), e.createElementBlock("div", b, [
+        e.createVNode(p, {
+          class: "default-theme",
+          onResized: n.handlePaneResize
+        }, {
+          default: e.withCtx(() => [
+            e.createVNode(a, {
+              class: "splitpanes__pane-list",
+              size: o.listPaneSize || n.paneDefaults.list.size,
+              "min-size": n.paneDefaults.list.min,
+              "max-size": n.paneDefaults.list.max
+            }, {
+              default: e.withCtx(() => [
+                e.renderSlot(t.$slots, "list", {}, void 0, !0)
+              ]),
+              _: 3
+            }, 8, ["size", "min-size", "max-size"]),
+            e.createVNode(a, {
+              class: "splitpanes__pane-details",
+              size: n.detailsPaneSize,
+              "min-size": n.paneDefaults.details.min,
+              "max-size": n.paneDefaults.details.max
+            }, {
+              default: e.withCtx(() => [
+                e.renderSlot(t.$slots, "default", {}, void 0, !0)
+              ]),
+              _: 3
+            }, 8, ["size", "min-size", "max-size"])
+          ]),
+          _: 3
+        }, 8, ["onResized"])
+      ]))
+    ], 64)) : e.renderSlot(t.$slots, "default", { key: 2 }, void 0, !0)
+  ], 2);
+}
+const y = /* @__PURE__ */ g._export_sfc(k, [["render", D], ["__scopeId", "data-v-d2d0b7de"]]);
+exports.NcAppContent = y;

package/dist/chunks/NcAppContent-mHc-Ms2b.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"NcAppContent-mHc-Ms2b.cjs","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.ts'\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\tbeforeUnmount() {\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.stop.prevent=\"hideDetails\" />\n\n\t\t\t\t<slot name=\"list\" />\n\t\t\t\t<slot />\n\t\t\t</div>\n\n\t\t\t<div v-else class=\"app-content-wrapper\">\n\t\t\t\t<Splitpanes class=\"default-theme\"\n\t\t\t\t\t@resized=\"handlePaneResize\">\n\t\t\t\t\t<Pane class=\"splitpanes__pane-list\"\n\t\t\t\t\t\t:size=\"listPaneSize || paneDefaults.list.size\"\n\t\t\t\t\t\t:min-size=\"paneDefaults.list.min\"\n\t\t\t\t\t\t:max-size=\"paneDefaults.list.max\">\n\t\t\t\t\t\t<!-- @slot Provide a list to the app content -->\n\t\t\t\t\t\t<slot name=\"list\" />\n\t\t\t\t\t</Pane>\n\n\t\t\t\t\t<Pane class=\"splitpanes__pane-details\"\n\t\t\t\t\t\t:size=\"detailsPaneSize\"\n\t\t\t\t\t\t:min-size=\"paneDefaults.details.min\"\n\t\t\t\t\t\t:max-size=\"paneDefaults.details.max\">\n\t\t\t\t\t\t<!-- @slot Provide the main content to the app content -->\n\t\t\t\t\t\t<slot />\n\t\t\t\t\t</Pane>\n\t\t\t\t</Splitpanes>\n\t\t\t</div>\n\t\t</template>\n\n\t\t<!-- @slot Provide the main content to the app content -->\n\t\t<slot v-else />\n\t</main>\n</template>\n\n<script>\nimport NcAppDetailsToggle from './NcAppDetailsToggle.vue'\nimport { useIsMobile } from '../../composables/useIsMobile/index.js'\n\nimport { getBuilder } from '@nextcloud/browser-storage'\nimport { emit } from '@nextcloud/event-bus'\nimport { useSwipe } from '@vueuse/core'\nimport { Splitpanes, Pane } from 'splitpanes'\n\nimport 'splitpanes/dist/splitpanes.css'\n\nconst browserStorage = getBuilder('nextcloud').persist().build()\n\n/**\n * App content container to be used for the main content of your app\n *\n */\nexport default {\n\tname: 'NcAppContent',\n\n\tcomponents: {\n\t\tNcAppDetailsToggle,\n\t\tPane,\n\t\tSplitpanes,\n\t},\n\n\tprops: {\n\t\t/**\n\t\t * Allows to disable the control by swipe of the app navigation open state\n\t\t */\n\t\tallowSwipeNavigation: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: true,\n\t\t},\n\n\t\t/**\n\t\t * Allows you to set the default width of the resizable list in %\n\t\t * Must be between listMinWidth and listMaxWidth\n\t\t */\n\t\tlistSize: {\n\t\t\ttype: Number,\n\t\t\tdefault: 20,\n\t\t},\n\n\t\t/**\n\t\t * Allows you to set the minimum width of the list column in %\n\t\t */\n\t\tlistMinWidth: {\n\t\t\ttype: Number,\n\t\t\tdefault: 15,\n\t\t},\n\n\t\t/**\n\t\t * Allows you to set the maximum width of the list column in %\n\t\t */\n\t\tlistMaxWidth: {\n\t\t\ttype: Number,\n\t\t\tdefault: 40,\n\t\t},\n\n\t\t/**\n\t\t * Specify the config key for the pane config sizes\n\t\t * Default is the global var appName if you use the webpack-vue-config\n\t\t */\n\t\tpaneConfigKey: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\n\t\t/**\n\t\t * When in mobile view, only the list or the details are shown\n\t\t * If you provide a list, you need to provide a variable\n\t\t * that will be set to true by the user when an element of\n\t\t * the list gets selected. The details will then show a back\n\t\t * arrow to return to the list that will update this prop to false.\n\t\t */\n\t\tshowDetails: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: true,\n\t\t},\n\n\t\t/**\n\t\t * Specify the `<h1>` page heading\n\t\t */\n\t\tpageHeading: {\n\t\t\ttype: String,\n\t\t\tdefault: null,\n\t\t},\n\t},\n\n\temits: [\n\t\t'update:showDetails',\n\t\t'resize:list',\n\t],\n\n\tsetup() {\n\t\treturn {\n\t\t\tisMobile: useIsMobile(),\n\t\t}\n\t},\n\n\tdata() {\n\t\treturn {\n\t\t\tcontentHeight: 0,\n\t\t\thasList: false,\n\n\t\t\tswiping: {},\n\t\t\tlistPaneSize: this.restorePaneConfig(),\n\t\t}\n\t},\n\n\tcomputed: {\n\t\tpaneConfigID() {\n\t\t\t// If provided, let's use it\n\t\t\tif (this.paneConfigKey !== '') {\n\t\t\t\treturn `pane-list-size-${this.paneConfigKey}`\n\t\t\t}\n\n\t\t\ttry {\n\t\t\t\t// Using the webpack-vue-config, appName is a global variable\n\t\t\t\t// This will throw a ReferenceError when the global variable is missing\n\t\t\t\t// In that case either you provide paneConfigKey or else it fallback\n\t\t\t\t// to a global storage key\n\t\t\t\treturn `pane-list-size-${appName}`\n\t\t\t} catch (e) {\n\t\t\t\tconsole.info('[INFO] AppContent:', 'falling back to global nextcloud pane config')\n\t\t\t\treturn 'pane-list-size-nextcloud'\n\t\t\t}\n\t\t},\n\n\t\tdetailsPaneSize() {\n\t\t\tif (this.listPaneSize) {\n\t\t\t\treturn 100 - this.listPaneSize\n\t\t\t}\n\t\t\treturn this.paneDefaults.details.size\n\t\t},\n\n\t\tpaneDefaults() {\n\t\t\treturn {\n\t\t\t\tlist: {\n\t\t\t\t\tsize: this.listSize,\n\t\t\t\t\tmin: this.listMinWidth,\n\t\t\t\t\tmax: this.listMaxWidth,\n\t\t\t\t},\n\n\t\t\t\t// set the inverse values of the details column\n\t\t\t\t// based on the provided (or default) values of the list column\n\t\t\t\tdetails: {\n\t\t\t\t\tsize: 100 - this.listSize,\n\t\t\t\t\tmin: 100 - this.listMaxWidth,\n\t\t\t\t\tmax: 100 - this.listMinWidth,\n\t\t\t\t},\n\t\t\t}\n\t\t},\n\t},\n\n\tupdated() {\n\t\tthis.checkListSlot()\n\t},\n\n\tmounted() {\n\t\tif (this.allowSwipeNavigation) {\n\t\t\tthis.swiping = useSwipe(this.$el, {\n\t\t\t\tonSwipeEnd: this.handleSwipe,\n\t\t\t})\n\t\t}\n\n\t\tthis.checkListSlot()\n\t\tthis.restorePaneConfig()\n\t},\n\n\tmethods: {\n\t\t/**\n\t\t * handle the swipe event\n\t\t *\n\t\t * @param {TouchEvent} e The touch event\n\t\t * @param {import('@vueuse/core').SwipeDirection} direction The swipe direction of the event\n\t\t */\n\t\thandleSwipe(e, direction) {\n\t\t\tconst minSwipeX = 70\n\t\t\tconst touchZone = 300\n\t\t\tif (Math.abs(this.swiping.lengthX) > minSwipeX) {\n\t\t\t\tif (this.swiping.coordsStart.x < (touchZone / 2) && direction === 'right') {\n\t\t\t\t\temit('toggle-navigation', {\n\t\t\t\t\t\topen: true,\n\t\t\t\t\t})\n\t\t\t\t} else if (this.swiping.coordsStart.x < touchZone * 1.5 && direction === 'left') {\n\t\t\t\t\temit('toggle-navigation', {\n\t\t\t\t\t\topen: false,\n\t\t\t\t\t})\n\t\t\t\t}\n\t\t\t}\n\t\t},\n\n\t\thandlePaneResize(event) {\n\t\t\tconst listPaneSize = parseInt(event[0].size, 10)\n\t\t\tbrowserStorage.setItem(this.paneConfigID, JSON.stringify(listPaneSize))\n\t\t\tthis.listPaneSize = listPaneSize\n\t\t\t/**\n\t\t\t * Emitted when the list pane is resized by the user\n\t\t\t */\n\t\t\tthis.$emit('resize:list', { size: listPaneSize })\n\t\t\tconsole.debug('AppContent pane config', listPaneSize)\n\t\t},\n\n\t\t// $slots is not reactive, we need to update this manually\n\t\tcheckListSlot() {\n\t\t\tconst hasListSlot = !!this.$slots.list\n\t\t\tif (this.hasList !== hasListSlot) {\n\t\t\t\tthis.hasList = hasListSlot\n\t\t\t}\n\t\t},\n\n\t\t// browserStorage is not reactive, we need to update this manually\n\t\trestorePaneConfig() {\n\t\t\tconst listPaneSize = parseInt(browserStorage.getItem(this.paneConfigID), 10)\n\t\t\tif (!isNaN(listPaneSize) && listPaneSize !== this.listPaneSize) {\n\t\t\t\tconsole.debug('AppContent pane config', listPaneSize)\n\t\t\t\tthis.listPaneSize = listPaneSize\n\t\t\t\treturn listPaneSize\n\t\t\t}\n\t\t},\n\n\t\t/**\n\t\t * The user clicked the back arrow from the details view\n\t\t */\n\t\thideDetails() {\n\t\t\tthis.$emit('update:showDetails', false)\n\t\t},\n\t},\n}\n</script>\n<style lang=\"scss\" scoped>\n\n.app-content {\n\tposition: initial;\n\tz-index: 1000;\n\tflex-basis: 100vw;\n\theight: 100%;\n\t// Overriding server styles TODO: cleanup!\n\tmargin: 0 !important;\n\tbackground-color: var(--color-main-background);\n\tmin-width: 0;\n\n\t&:not(.app-content--has-list) {\n\t\toverflow: auto;\n\t}\n}\n\n.app-content-wrapper {\n\tposition: relative;\n\twidth: 100%;\n\theight: 100%;\n}\n\n// Mobile list/details handling\n.app-content-wrapper--mobile {\n\t&.app-content-wrapper--show-list :deep() {\n\t\t.app-content-list {\n\t\t\tdisplay: flex;\n\t\t}\n\t\t.app-content-details {\n\t\t\tdisplay: none;\n\t\t}\n\t}\n\t&.app-content-wrapper--show-details :deep() {\n\t\t.app-content-list {\n\t\t\tdisplay: none;\n\t\t}\n\t\t.app-content-details {\n\t\t\tdisplay: block;\n\t\t}\n\t}\n}\n\n:deep(.splitpanes.default-theme) {\n\t.app-content-list {\n\t\tmax-width: none;\n\t\t/* Thin scrollbar is hard to catch on resizable columns */\n\t\tscrollbar-width: auto;\n\t}\n\n\t.splitpanes__pane {\n\t\tbackground-color: transparent;\n\t\ttransition: none;\n\n\t\t&-list {\n\t\t\tmin-width: 300px;\n\t\t\tposition: sticky;\n\t\t\ttop: var(--header-height);\n\n\t\t\t@media only screen and (width < $breakpoint-mobile) {\n\t\t\t\tdisplay: none;\n\t\t\t}\n\t\t}\n\n\t\t&-details {\n\t\t\toverflow-y: auto;\n\n\t\t\t@media only screen and (width < $breakpoint-mobile) {\n\t\t\t\tmin-width: 100%;\n\t\t\t}\n\t\t}\n\t}\n\n\t.splitpanes__splitter {\n\t\twidth: 9px;\n\t\tmargin-left: -5px;\n\t\tbackground-color: transparent;\n\t\tborder-left: none;\n\n\t\t&:before,\n\t\t&:after {\n\t\t\tdisplay: none;\n\t\t}\n\t}\n}\n</style>\n"],"names":["_sfc_main$1","floatingVue","NcButton","hide","appNavigationToggle","eventBus","$options","vue","browserStorage","browserStorage$1","_sfc_main","NcAppDetailsToggle","core","direction","listPaneSize","event","hasListSlot","$data","$props","_hoisted_2","_ctx"],"mappings":"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"}

package/dist/chunks/NcAppContentDetails-BhbsNp93.cjs

@@ -0,0 +1,11 @@
+"use strict";
+const e = require("vue"), n = require("./_plugin-vue_export-helper-xG2iG1wl.cjs"), s = {
+  name: "NcAppContentDetails"
+}, o = { class: "app-content-details" };
+function c(t, p, a, i, l, _) {
+  return e.openBlock(), e.createElementBlock("div", o, [
+    e.renderSlot(t.$slots, "default")
+  ]);
+}
+const r = /* @__PURE__ */ n._export_sfc(s, [["render", c]]);
+exports.NcAppContentDetails = r;

package/dist/chunks/NcAppContentDetails-BhbsNp93.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"NcAppContentDetails-BhbsNp93.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","_hoisted_1","_openBlock","_createElementBlock","_renderSlot","_ctx"],"mappings":";mFA8BKA,IAAU;AAAA,EACd,MAAM;AACP,GATMC,IAAA,EAAA,OAAM,sBAAqB;;AAAhC,SAAAC,YAAA,GAAAC,qBAGM,OAHNF,GAGM;AAAA,IADLG,aAAQC,EAAA,QAAA,SAAA;AAAA;;;;"}

package/dist/chunks/NcAppContentDetails-bD9j5H59.mjs

@@ -0,0 +1,14 @@
+import { openBlock as e, createElementBlock as o, renderSlot as n } from "vue";
+import { _ as s } from "./_plugin-vue_export-helper-hUChTQA_.mjs";
+const c = {
+  name: "NcAppContentDetails"
+}, r = { class: "app-content-details" };
+function p(t, a, i, l, _, d) {
+  return e(), o("div", r, [
+    n(t.$slots, "default")
+  ]);
+}
+const $ = /* @__PURE__ */ s(c, [["render", p]]);
+export {
+  $ as N
+};

package/dist/chunks/NcAppContentDetails-bD9j5H59.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"NcAppContentDetails-bD9j5H59.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","_hoisted_1","_openBlock","_createElementBlock","_renderSlot","_ctx"],"mappings":";;AA8BA,MAAKA,IAAU;AAAA,EACd,MAAM;AACP,GATMC,IAAA,EAAA,OAAM,sBAAqB;;AAAhC,SAAAC,EAAA,GAAAC,EAGM,OAHNF,GAGM;AAAA,IADLG,EAAQC,EAAA,QAAA,SAAA;AAAA;;;"}