@nextcloud/vue
Version:
Nextcloud vue components
255 lines (254 loc) • 10.6 kB
JavaScript
import '../assets/NcAppContent.css';
import { defineComponent, watch, onMounted, onBeforeUnmount, openBlock, createBlock, unref, normalizeClass, withCtx, createVNode, useModel, ref, computed, createElementBlock, toDisplayString, createCommentVNode, Fragment, withModifiers, withDirectives, createElementVNode, renderSlot, vShow, mergeModels } from "vue";
import { emit } from "@nextcloud/event-bus";
import { useCurrentElement, useSwipe } from "@vueuse/core";
import { Splitpanes, Pane } from "splitpanes";
import { m as mdiArrowRight } from "./mdi.mjs";
import { useIsMobile } from "../composables/useIsMobile/index.mjs";
import { r as register, J as t29, a as t } from "./_l10n.mjs";
import { N as NcButton } from "./NcButton.mjs";
import { N as NcIconSvgWrapper } from "./NcIconSvgWrapper.mjs";
import { _ as _export_sfc } from "./_plugin-vue_export-helper.mjs";
import { a as useAppName, u as useLocalizedAppName } from "./appName.mjs";
import { l as logger } from "./logger.mjs";
import { i as isRtl } from "./rtl.mjs";
import "splitpanes/dist/splitpanes.css";
import { getBuilder } from "@nextcloud/browser-storage";
import { getCapabilities } from "@nextcloud/capabilities";
register(t29);
const _sfc_main$1 = /* @__PURE__ */ defineComponent({
__name: "NcAppContentDetailsToggle",
setup(__props) {
const isMobile = useIsMobile();
watch(isMobile, toggleAppNavigationButton);
onMounted(() => {
toggleAppNavigationButton(isMobile.value);
});
onBeforeUnmount(() => {
if (isMobile.value) {
toggleAppNavigationButton(false);
}
});
function toggleAppNavigationButton(hide = true) {
const appNavigationToggle = document.querySelector(".app-navigation .app-navigation-toggle");
if (appNavigationToggle) {
appNavigationToggle.style.display = hide ? "none" : "";
if (hide === true) {
emit("toggle-navigation", { open: false });
}
}
}
return (_ctx, _cache) => {
return openBlock(), createBlock(unref(NcButton), {
"aria-label": unref(t)("Go back to the list"),
class: normalizeClass(["app-details-toggle", { "app-details-toggle--mobile": unref(isMobile) }]),
title: unref(t)("Go back to the list"),
variant: "tertiary"
}, {
icon: withCtx(() => [
createVNode(unref(NcIconSvgWrapper), {
directional: "",
path: unref(mdiArrowRight)
}, null, 8, ["path"])
]),
_: 1
}, 8, ["aria-label", "class", "title"]);
};
}
});
const NcAppContentDetailsToggle = /* @__PURE__ */ _export_sfc(_sfc_main$1, [["__scopeId", "data-v-a28923a1"]]);
const _hoisted_1 = {
key: 0,
class: "hidden-visually"
};
const _hoisted_2 = { class: "app-content-wrapper__list" };
const _hoisted_3 = {
key: 1,
class: "app-content-wrapper"
};
const browserStorage = getBuilder("nextcloud").persist().build();
const instanceName = getCapabilities().theming?.name ?? "Nextcloud";
const _sfc_main = /* @__PURE__ */ defineComponent({
__name: "NcAppContent",
props: /* @__PURE__ */ mergeModels({
disableSwipe: { type: Boolean, default: false },
listSize: { default: 20 },
listMinWidth: { default: 15 },
listMaxWidth: { default: 40 },
paneConfigKey: { default: "" },
layout: { default: "vertical-split" },
pageHeading: { default: () => void 0 },
pageTitle: { default: () => void 0 }
}, {
"showDetails": { type: Boolean, ...{ default: true } },
"showDetailsModifiers": {}
}),
emits: /* @__PURE__ */ mergeModels(["resizeList", "update:showDetails"], ["update:showDetails"]),
setup(__props, { emit: __emit }) {
const showDetails = useModel(__props, "showDetails");
const emit$1 = __emit;
const appName = useAppName();
const localizedAppName = useLocalizedAppName();
const isMobile = useIsMobile();
const element = useCurrentElement();
const swipe = useSwipe(
// Swiping can be disabled by not providing a target to listen on
() => __props.disableSwipe ? void 0 : element.value,
{
onSwipeEnd(_event, direction) {
const minSwipeX = 70;
const touchZone = 300;
if (Math.abs(swipe.lengthX.value) > minSwipeX) {
if (swipe.coordsStart.x < touchZone / 2 && direction === "right") {
emit("toggle-navigation", {
open: true
});
} else if (swipe.coordsStart.x < touchZone * 1.5 && direction === "left") {
emit("toggle-navigation", {
open: false
});
}
}
}
}
);
const listPaneSize = ref();
const paneConfigID = computed(() => {
if (__props.paneConfigKey !== "") {
return `pane-list-size-${__props.paneConfigKey}`;
}
return `pane-list-size-${appName}`;
});
const paneDefaults = computed(() => ({
list: {
size: __props.listSize,
min: __props.listMinWidth,
max: __props.listMaxWidth
},
// set the inverse values of the details column
// based on the provided (or default) values of the list column
details: {
size: 100 - __props.listSize,
min: 100 - __props.listMaxWidth,
max: 100 - __props.listMinWidth
}
}));
const detailsPaneSize = computed(() => {
if (listPaneSize.value) {
return 100 - listPaneSize.value;
}
return paneDefaults.value.details.size;
});
const realPageTitle = computed(() => {
const entries = /* @__PURE__ */ new Set();
if (__props.pageTitle) {
for (const part of __props.pageTitle.split(" - ")) {
entries.add(part);
}
} else if (__props.pageHeading) {
for (const part of __props.pageHeading.split(" - ")) {
entries.add(part);
}
if (entries.size > 0) {
entries.add(localizedAppName);
}
} else {
return null;
}
entries.add(instanceName);
return [...entries.values()].join(" - ");
});
watch(realPageTitle, () => {
if (realPageTitle.value !== null) {
document.title = realPageTitle.value;
}
}, { immediate: true });
watch(() => __props.paneConfigKey, restorePaneConfig, { immediate: true });
onMounted(restorePaneConfig);
function handlePaneResize(event) {
const size = Math.trunc(event.panes[0].size);
browserStorage.setItem(paneConfigID.value, JSON.stringify(size));
listPaneSize.value = size;
emit$1("resizeList", { size });
logger.debug("[NcAppContent] pane config", { listPaneSize: size });
}
function restorePaneConfig() {
const size = parseInt(browserStorage.getItem(paneConfigID.value) ?? "", 10);
if (!isNaN(size) && size !== listPaneSize.value) {
logger.debug("[NcAppContent] pane config", { listPaneSize: size });
listPaneSize.value = size;
}
}
return (_ctx, _cache) => {
return openBlock(), createElementBlock("main", {
id: "app-content-vue",
class: normalizeClass(["app-content no-snapper", { "app-content--has-list": !!_ctx.$slots.list }])
}, [
__props.pageHeading ? (openBlock(), createElementBlock("h1", _hoisted_1, toDisplayString(__props.pageHeading), 1)) : createCommentVNode("", true),
!!_ctx.$slots.list ? (openBlock(), createElementBlock(Fragment, { key: 1 }, [
unref(isMobile) || __props.layout === "no-split" ? (openBlock(), createElementBlock("div", {
key: 0,
class: normalizeClass(["app-content-wrapper app-content-wrapper--no-split", {
"app-content-wrapper--show-details": showDetails.value,
"app-content-wrapper--show-list": !showDetails.value,
"app-content-wrapper--mobile": unref(isMobile)
}])
}, [
showDetails.value ? (openBlock(), createBlock(NcAppContentDetailsToggle, {
key: 0,
onClick: _cache[0] || (_cache[0] = withModifiers(($event) => showDetails.value = false, ["stop", "prevent"]))
})) : createCommentVNode("", true),
withDirectives(createElementVNode("div", _hoisted_2, [
renderSlot(_ctx.$slots, "list", {}, void 0, true)
], 512), [
[vShow, !showDetails.value]
]),
showDetails.value ? renderSlot(_ctx.$slots, "default", {}, void 0, true, 1) : createCommentVNode("", true)
], 2)) : __props.layout === "vertical-split" || __props.layout === "horizontal-split" ? (openBlock(), createElementBlock("div", _hoisted_3, [
createVNode(unref(Splitpanes), {
horizontal: __props.layout === "horizontal-split",
class: normalizeClass(["default-theme", {
"splitpanes--horizontal": __props.layout === "horizontal-split",
"splitpanes--vertical": __props.layout === "vertical-split"
}]),
rtl: unref(isRtl),
onResized: handlePaneResize
}, {
default: withCtx(() => [
createVNode(unref(Pane), {
class: "splitpanes__pane-list",
size: listPaneSize.value || paneDefaults.value.list.size,
minSize: paneDefaults.value.list.min,
maxSize: paneDefaults.value.list.max
}, {
default: withCtx(() => [
renderSlot(_ctx.$slots, "list", {}, void 0, true)
]),
_: 3
}, 8, ["size", "minSize", "maxSize"]),
createVNode(unref(Pane), {
class: "splitpanes__pane-details",
size: detailsPaneSize.value,
minSize: paneDefaults.value.details.min,
maxSize: paneDefaults.value.details.max
}, {
default: withCtx(() => [
renderSlot(_ctx.$slots, "default", {}, void 0, true)
]),
_: 3
}, 8, ["size", "minSize", "maxSize"])
]),
_: 3
}, 8, ["horizontal", "class", "rtl"])
])) : createCommentVNode("", true)
], 64)) : createCommentVNode("", true),
!_ctx.$slots.list ? renderSlot(_ctx.$slots, "default", {}, void 0, true, 2) : createCommentVNode("", true)
], 2);
};
}
});
const NcAppContent = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-5de09463"]]);
export {
NcAppContent as N
};
//# sourceMappingURL=NcAppContent.mjs.map