@nextcloud/vue 9.11.0 → 9.13.0

package/dist/chunks/NcActions.mjs

@@ -2,7 +2,7 @@ import '../assets/NcActions.css';
 import { openBlock, createElementBlock, mergeProps, createElementVNode, toDisplayString, createCommentVNode, Comment, Fragment, Text, warn, h, computed } from "vue";
 import { _ as _export_sfc } from "./_plugin-vue_export-helper.mjs";
 import { u as useTrapStackControl } from "./useTrapStackControl.mjs";
-import { r as register, F as t5, a as t } from "./_l10n.mjs";
+import { r as register, G as t4, a as t } from "./_l10n.mjs";
 import { c as createElementId } from "./createElementId.mjs";
 import { N as NcButton } from "./NcButton.mjs";
 import { N as NcPopover } from "./NcPopover.mjs";
@@ -50,7 +50,7 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
   ], 16, _hoisted_1);
 }
 const IconDotsHorizontal = /* @__PURE__ */ _export_sfc(_sfc_main$1, [["render", _sfc_render]]);
-register(t5);
+register(t4);
 function isSlotPopulated(vnodes) {
   return Array.isArray(vnodes) && vnodes.some((node) => {
     if (node === null) {

package/dist/chunks/NcAppContent.mjs

@@ -1,21 +1,21 @@
 import '../assets/NcAppContent.css';
-import { getBuilder } from "@nextcloud/browser-storage";
-import { getCapabilities } from "@nextcloud/capabilities";
+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 { useSwipe } from "@vueuse/core";
+import { useCurrentElement, useSwipe } from "@vueuse/core";
 import { Splitpanes, Pane } from "splitpanes";
-import { defineComponent, watch, onMounted, onBeforeUnmount, openBlock, createBlock, unref, normalizeClass, withCtx, createVNode, resolveComponent, createElementBlock, toDisplayString, createCommentVNode, Fragment, withModifiers, withDirectives, createElementVNode, renderSlot, vShow } from "vue";
 import { m as mdiArrowRight } from "./mdi.mjs";
 import { useIsMobile } from "../composables/useIsMobile/index.mjs";
-import { r as register, G as t28, a as t } from "./_l10n.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 { u as useLocalizedAppName, a as useAppName } from "./appName.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";
-register(t28);
+import { getBuilder } from "@nextcloud/browser-storage";
+import { getCapabilities } from "@nextcloud/capabilities";
+register(t29);
 const _sfc_main$1 = /* @__PURE__ */ defineComponent({
   __name: "NcAppContentDetailsToggle",
   setup(__props) {
@@ -57,324 +57,197 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
   }
 });
 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 = {
-  name: "NcAppContent",
-  components: {
-    NcAppContentDetailsToggle,
-    Pane,
-    Splitpanes
-  },
-  props: {
-    /**
-     * Allows to disable the control by swipe of the app navigation open state.
-     */
-    disableSwipe: {
-      type: Boolean,
-      default: false
-    },
-    /**
-     * Allows you to set the default width of the resizable list in % on vertical-split
-     * or respectively the default height on horizontal-split.
-     *
-     * Must be between `listMinWidth` and `listMaxWidth`.
-     */
-    listSize: {
-      type: Number,
-      default: 20
-    },
-    /**
-     * Allows you to set the minimum width of the list column in % on vertical-split
-     * or respectively the minimum height on horizontal-split.
-     */
-    listMinWidth: {
-      type: Number,
-      default: 15
-    },
-    /**
-     * Allows you to set the maximum width of the list column in % on vertical-split
-     * or respectively the maximum height on horizontal-split.
-     */
-    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: true
-    },
-    /**
-     * Content layout used when there is a list together with content:
-     * - `vertical-split` - a 2-column layout with list and default content separated vertically
-     * - `no-split` - a single column layout; List is shown when `showDetails` is `false`, otherwise the default slot content is shown with a back button to return to the list.
-     * - 'horizontal-split' - a 2-column layout with list and default content separated horizontally
-     * On mobile screen `no-split` layout is forced.
-     */
-    layout: {
-      type: String,
-      default: "vertical-split",
-      validator(value) {
-        return ["no-split", "vertical-split", "horizontal-split"].includes(value);
+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
+              });
+            }
+          }
+        }
       }
-    },
-    /**
-     * Specify the `<h1>` page heading
-     */
-    pageHeading: {
-      type: String,
-      default: null
-    },
-    /**
-     * Allow setting the page's `<title>`
-     *
-     * If a page heading is set it defaults to `{pageHeading} - {appName} - {instanceName}` e.g. `Favorites - Files - MyPersonalCloud`.
-     * When the page heading and the app name is the same only one is used, e.g. `Files - Files - MyPersonalCloud` is shown as `Files - MyPersonalCloud`.
-     * When setting the prop then the following format will be used: `{pageTitle} - {instanceName}`
-     */
-    pageTitle: {
-      type: String,
-      default: null
-    }
-  },
-  emits: [
-    "update:showDetails",
-    "resizeList"
-  ],
-  setup() {
-    return {
-      appName: useAppName(),
-      localizedAppName: useLocalizedAppName(),
-      isMobile: useIsMobile(),
-      isRtl
-    };
-  },
-  data() {
-    return {
-      contentHeight: 0,
-      swiping: {},
-      listPaneSize: this.restorePaneConfig()
-    };
-  },
-  computed: {
-    paneConfigID() {
-      if (this.paneConfigKey !== "") {
-        return `pane-list-size-${this.paneConfigKey}`;
+    );
+    const listPaneSize = ref();
+    const paneConfigID = computed(() => {
+      if (__props.paneConfigKey !== "") {
+        return `pane-list-size-${__props.paneConfigKey}`;
       }
-      try {
-        return `pane-list-size-${this.appName}`;
-      } catch {
-        logger.info("[NcAppContent]: falling back to global nextcloud pane config");
-        return "pane-list-size-nextcloud";
+      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
       }
-    },
-    detailsPaneSize() {
-      if (this.listPaneSize) {
-        return 100 - this.listPaneSize;
+    }));
+    const detailsPaneSize = computed(() => {
+      if (listPaneSize.value) {
+        return 100 - listPaneSize.value;
       }
-      return 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
-        }
-      };
-    },
-    realPageTitle() {
+      return paneDefaults.value.details.size;
+    });
+    const realPageTitle = computed(() => {
       const entries = /* @__PURE__ */ new Set();
-      if (this.pageTitle) {
-        for (const part of this.pageTitle.split(" - ")) {
+      if (__props.pageTitle) {
+        for (const part of __props.pageTitle.split(" - ")) {
           entries.add(part);
         }
-      } else if (this.pageHeading) {
-        for (const part of this.pageHeading.split(" - ")) {
+      } else if (__props.pageHeading) {
+        for (const part of __props.pageHeading.split(" - ")) {
           entries.add(part);
         }
         if (entries.size > 0) {
-          entries.add(this.localizedAppName);
+          entries.add(localizedAppName);
         }
       } else {
         return null;
       }
       entries.add(instanceName);
       return [...entries.values()].join(" - ");
-    }
-  },
-  watch: {
-    realPageTitle: {
-      immediate: true,
-      handler() {
-        if (this.realPageTitle !== null) {
-          document.title = this.realPageTitle;
-        }
-      }
-    },
-    paneConfigKey: {
-      immediate: true,
-      handler() {
-        this.restorePaneConfig();
+    });
+    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 });
     }
-  },
-  mounted() {
-    if (!this.disableSwipe) {
-      this.swiping = useSwipe(this.$el, {
-        onSwipeEnd: this.handleSwipe
-      });
-    }
-    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, direction) {
-      const minSwipeX = 70;
-      const touchZone = 300;
-      if (Math.abs(this.swiping.lengthX) > minSwipeX) {
-        if (this.swiping.coordsStart.x < touchZone / 2 && direction === "right") {
-          emit("toggle-navigation", {
-            open: true
-          });
-        } else if (this.swiping.coordsStart.x < touchZone * 1.5 && direction === "left") {
-          emit("toggle-navigation", {
-            open: false
-          });
-        }
+    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;
       }
-    },
-    handlePaneResize(event) {
-      const listPaneSize = parseInt(event.panes[0].size, 10);
-      browserStorage.setItem(this.paneConfigID, JSON.stringify(listPaneSize));
-      this.listPaneSize = listPaneSize;
-      this.$emit("resizeList", { size: listPaneSize });
-      logger.debug("[NcAppContent] pane config", { listPaneSize });
-    },
-    // browserStorage is not reactive, we need to update this manually
-    restorePaneConfig() {
-      const listPaneSize = parseInt(browserStorage.getItem(this.paneConfigID), 10);
-      if (!isNaN(listPaneSize) && listPaneSize !== this.listPaneSize) {
-        logger.debug("[NcAppContent] pane config", { listPaneSize });
-        this.listPaneSize = listPaneSize;
-        return listPaneSize;
-      }
-    },
-    /**
-     * The user clicked the back arrow from the details view
-     */
-    hideDetails() {
-      this.$emit("update:showDetails", false);
     }
-  }
-};
-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"
-};
-function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
-  const _component_NcAppContentDetailsToggle = resolveComponent("NcAppContentDetailsToggle");
-  const _component_Pane = resolveComponent("Pane");
-  const _component_Splitpanes = resolveComponent("Splitpanes");
-  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 }, [
-      $setup.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": $props.showDetails,
-          "app-content-wrapper--show-list": !$props.showDetails,
-          "app-content-wrapper--mobile": $setup.isMobile
-        }])
+    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.showDetails ? (openBlock(), createBlock(_component_NcAppContentDetailsToggle, {
-          key: 0,
-          onClick: withModifiers($options.hideDetails, ["stop", "prevent"])
-        }, null, 8, ["onClick"])) : createCommentVNode("", true),
-        withDirectives(createElementVNode("div", _hoisted_2, [
-          renderSlot(_ctx.$slots, "list", {}, void 0, true)
-        ], 512), [
-          [vShow, !$props.showDetails]
-        ]),
-        $props.showDetails ? renderSlot(_ctx.$slots, "default", { key: 1 }, void 0, true) : createCommentVNode("", true)
-      ], 2)) : $props.layout === "vertical-split" || $props.layout === "horizontal-split" ? (openBlock(), createElementBlock("div", _hoisted_3, [
-        createVNode(_component_Splitpanes, {
-          horizontal: $props.layout === "horizontal-split",
-          class: normalizeClass(["default-theme", {
-            "splitpanes--horizontal": $props.layout === "horizontal-split",
-            "splitpanes--vertical": $props.layout === "vertical-split"
-          }]),
-          rtl: $setup.isRtl,
-          onResized: $options.handlePaneResize
-        }, {
-          default: withCtx(() => [
-            createVNode(_component_Pane, {
-              class: "splitpanes__pane-list",
-              size: $data.listPaneSize || $options.paneDefaults.list.size,
-              minSize: $options.paneDefaults.list.min,
-              maxSize: $options.paneDefaults.list.max
-            }, {
-              default: withCtx(() => [
-                renderSlot(_ctx.$slots, "list", {}, void 0, true)
-              ]),
-              _: 3
-            }, 8, ["size", "minSize", "maxSize"]),
-            createVNode(_component_Pane, {
-              class: "splitpanes__pane-details",
-              size: $options.detailsPaneSize,
-              minSize: $options.paneDefaults.details.min,
-              maxSize: $options.paneDefaults.details.max
+        __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(() => [
-                renderSlot(_ctx.$slots, "default", {}, void 0, true)
+                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, ["size", "minSize", "maxSize"])
-          ]),
-          _: 3
-        }, 8, ["horizontal", "class", "rtl", "onResized"])
-      ])) : createCommentVNode("", true)
-    ], 64)) : createCommentVNode("", true),
-    !_ctx.$slots.list ? renderSlot(_ctx.$slots, "default", { key: 2 }, void 0, true) : createCommentVNode("", true)
-  ], 2);
-}
-const NcAppContent = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__scopeId", "data-v-51427d61"]]);
+            }, 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
 };