npm - @nextcloud/vue - Versions diffs - 8.5.0 → 9.0.0-alpha.0 - Mend

@nextcloud/vue 8.5.0 → 9.0.0-alpha.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (1076) hide show

package/dist/chunks/NcAppContent-khCUrgDu.cjs ADDED Viewed

@@ -0,0 +1,264 @@
+var x = require("../assets/NcAppContent--D5zvLsb.css");
+const m = require("./NcButton-Uxh-oARg.cjs"), c = require("./_l10n-wK0o0jNS.cjs");
+require("../Directives/Tooltip.cjs");
+const u = require("@nextcloud/event-bus"), f = require("./ArrowRight-mI4Fw0h2.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-${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 = 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-khCUrgDu.cjs.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"NcAppContent-khCUrgDu.cjs","sources":["../../src/components/NcAppContent/NcAppDetailsToggle.vue","../../src/components/NcAppContent/NcAppContent.vue"],"sourcesContent":["\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<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\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\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\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\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/NcAppContent-rV1EGzGY.mjs ADDED Viewed

@@ -0,0 +1,275 @@
+import "../assets/NcAppContent--D5zvLsb.css";
+import { N } from "./NcButton-nCkJxwsi.mjs";
+import { r as v, y, a as D } from "./_l10n-JmazR_zZ.mjs";
+import "../Directives/Tooltip.mjs";
+import { emit as g } from "@nextcloud/event-bus";
+import { A as b } from "./ArrowRight-Fk_qtqpW.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-${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 = 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-rV1EGzGY.mjs.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"NcAppContent-rV1EGzGY.mjs","sources":["../../src/components/NcAppContent/NcAppDetailsToggle.vue","../../src/components/NcAppContent/NcAppContent.vue"],"sourcesContent":["\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<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\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\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\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\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":"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"}

package/dist/chunks/NcAppContentDetails-BhbsNp93.cjs ADDED Viewed

@@ -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 ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"NcAppContentDetails-BhbsNp93.cjs","sources":["../../src/components/NcAppContentDetails/NcAppContentDetails.vue"],"sourcesContent":["\n\n<template>\n\t<div class=\"app-content-details\">\n\t\t\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 ADDED Viewed

@@ -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 ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"NcAppContentDetails-bD9j5H59.mjs","sources":["../../src/components/NcAppContentDetails/NcAppContentDetails.vue"],"sourcesContent":["\n\n<template>\n\t<div class=\"app-content-details\">\n\t\t\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;;;"}