@nextcloud/vue/dist/Components/NcAppContent.mjs

Nextcloud vue components

import "../assets/index30.css";
import o from "./NcButton.mjs";
import { t as l } from "../chunks/l10n-9a5a6afc.mjs";
import "../Directives/Tooltip.mjs";
import { emit as i } from "@nextcloud/event-bus";
import p from "vue-material-design-icons/ArrowRight.vue";
import { n } from "../chunks/_plugin-vue2_normalizer-5b4c43a4.mjs";
import { VTooltip as r } from "floating-vue";
import h from "../Mixins/isMobile.mjs";
import { getBuilder as u } from "@nextcloud/browser-storage";
import { useSwipe as c } from "@vueuse/core";
import { Pane as g, Splitpanes as d } from "splitpanes";
import "splitpanes/dist/splitpanes.css";
const m = { name: "NcAppDetailsToggle", directives: { tooltip: r }, components: { NcButton: o, ArrowRight: p }, computed: { title() {
  return l("Go back to the list");
} }, beforeMount() {
  this.toggleAppNavigationButton(!0);
}, beforeDestroy() {
  this.toggleAppNavigationButton(!1);
}, methods: { toggleAppNavigationButton(t = !0) {
  const e = document.querySelector(".app-navigation .app-navigation-toggle");
  e && (e.style.display = t ? "none" : null, t === !0 && i("toggle-navigation", { open: !1 }));
} } };
var f = function() {
  var t = this, e = t._self._c;
  return e("NcButton", { directives: [{ name: "tooltip", rawName: "v-tooltip", value: t.title, expression: "title" }], staticClass: "app-details-toggle", attrs: { "aria-label": t.title }, scopedSlots: t._u([{ key: "icon", fn: function() {
    return [e("ArrowRight", { attrs: { size: 20 } })];
  }, proxy: !0 }]) });
}, z = [], S = n(m, f, z, !1, null, "5244e83e", null, null);
const w = S.exports;
const a = u("nextcloud").persist().build(), v = { name: "NcAppContent", components: { NcAppDetailsToggle: w, Pane: g, Splitpanes: d }, mixins: [h], props: { allowSwipeNavigation: { type: Boolean, default: !0 }, listSize: { type: Number, default: 20 }, listMinWidth: { type: Number, default: 15 }, listMaxWidth: { type: Number, default: 40 }, paneConfigKey: { type: String, default: "" }, showDetails: { type: Boolean, default: !0 }, pageHeading: { type: String, default: null } }, emits: ["update:showDetails", "resize:list"], data() {
  return { contentHeight: 0, hasList: !1, swiping: {}, listPaneSize: this.restorePaneConfig() };
}, computed: { paneConfigID() {
  if (this.paneConfigKey !== "")
    return `pane-list-size-${this.paneConfigKey}`;
  try {
    return `pane-list-size-${appName}`;
  } catch {
    return console.info("[INFO] AppContent:", "falling back to global nextcloud pane config"), "pane-list-size-nextcloud";
  }
}, detailsPaneSize() {
  return this.listPaneSize ? 100 - this.listPaneSize : this.paneDefaults.details.size;
}, paneDefaults() {
  return { list: { size: this.listSize, min: this.listMinWidth, max: this.listMaxWidth }, details: { size: 100 - this.listSize, min: 100 - this.listMaxWidth, max: 100 - this.listMinWidth } };
} }, updated() {
  this.checkListSlot();
}, mounted() {
  this.allowSwipeNavigation && (this.swiping = c(this.$el, { onSwipeEnd: this.handleSwipe })), this.checkListSlot(), this.restorePaneConfig();
}, methods: { handleSwipe(t, e) {
  Math.abs(this.swiping.lengthX) > 70 && (this.swiping.coordsStart.x < 300 / 2 && e === "right" ? i("toggle-navigation", { open: !0 }) : this.swiping.coordsStart.x < 300 * 1.5 && e === "left" && i("toggle-navigation", { open: !1 }));
}, handlePaneResize(t) {
  const e = parseInt(t[0].size, 10);
  a.setItem(this.paneConfigID, JSON.stringify(e)), this.listPaneSize = e, this.$emit("resize:list", { size: e }), console.debug("AppContent pane config", e);
}, checkListSlot() {
  const t = !!this.$slots.list;
  this.hasList !== t && (this.hasList = t);
}, restorePaneConfig() {
  const t = parseInt(a.getItem(this.paneConfigID), 10);
  if (!isNaN(t) && t !== this.listPaneSize)
    return console.debug("AppContent pane config", t), this.listPaneSize = t, t;
}, hideDetails() {
  this.$emit("update:showDetails", !1);
} } };
var D = function() {
  var t = this, e = t._self._c;
  return e("main", { staticClass: "app-content no-snapper", class: { "app-content--has-list": t.hasList }, attrs: { id: "app-content-vue" } }, [t.pageHeading ? e("h1", { staticClass: "hidden-visually" }, [t._v(" " + t._s(t.pageHeading) + " ")]) : t._e(), t.hasList ? [t.isMobile ? e("div", { staticClass: "app-content-wrapper app-content-wrapper--mobile", class: t.showDetails ? "app-content-wrapper--show-details" : "app-content-wrapper--show-list" }, [t.hasList && t.showDetails ? e("NcAppDetailsToggle", { nativeOn: { click: function(s) {
    return s.stopPropagation(), s.preventDefault(), t.hideDetails.apply(null, arguments);
  } } }) : t._e(), t._t("list"), t._t("default")], 2) : e("div", { staticClass: "app-content-wrapper" }, [e("Splitpanes", { staticClass: "default-theme", on: { resized: t.handlePaneResize } }, [e("Pane", { staticClass: "splitpanes__pane-list", attrs: { size: t.listPaneSize || t.paneDefaults.list.size, "min-size": t.paneDefaults.list.min, "max-size": t.paneDefaults.list.max } }, [t._t("list")], 2), e("Pane", { staticClass: "splitpanes__pane-details", attrs: { size: t.detailsPaneSize, "min-size": t.paneDefaults.details.min, "max-size": t.paneDefaults.details.max } }, [t._t("default")], 2)], 1)], 1)] : t._t("default")], 2);
}, C = [], y = n(v, D, C, !1, null, "38aa7204", null, null);
const H = y.exports;
export {
  H as default
};