@nextcloud/vue 9.0.0-rc.9 → 9.0.1

package/dist/chunks/{referencePickerModal-B2XHvg0V.mjs → referencePickerModal-BgBJRzaB.mjs}

@@ -1,26 +1,26 @@
-import '../assets/referencePickerModal-B9tq1n_R.css';
-import { createElementBlock, openBlock, mergeProps, createElementVNode, createCommentVNode, toDisplayString, resolveComponent, createVNode, withCtx, ref, nextTick, normalizeClass, createBlock, resolveDynamicComponent, normalizeStyle, createTextVNode, withKeys, withModifiers, createApp } from "vue";
+import '../assets/referencePickerModal-B4dORP5P.css';
+import { createElementBlock, openBlock, mergeProps, createElementVNode, createCommentVNode, toDisplayString, resolveComponent, createVNode, withCtx, defineComponent, inject, ref, useTemplateRef, nextTick, computed, watch, onBeforeUnmount, normalizeClass, createBlock, resolveDynamicComponent, normalizeStyle, createTextVNode, unref, withKeys, withModifiers, createApp } from "vue";
 import { emit } from "@nextcloud/event-bus";
 import { _ as _export_sfc } from "./_plugin-vue_export-helper-1tPrXgE0.mjs";
 import { I as IconClose } from "./Close-D6ngJ4t9.mjs";
-import { f as renderCustomPickerElement, b as destroyCustomPickerElement, c as isCustomPickerElementRegistered, d as destroyWidget, a as renderWidget, i as isWidgetRegistered, h as hasInteractiveView, j as hasFullWidth, g as getCustomPickerElementSize } from "./customPickerElements-4pQTZUnk.mjs";
+import { f as renderCustomPickerElement, b as destroyCustomPickerElement, c as isCustomPickerElementRegistered, j as hasFullWidth, i as isWidgetRegistered, h as hasInteractiveView, a as renderWidget, d as destroyWidget, g as getCustomPickerElementSize } from "./customPickerElements-4pQTZUnk.mjs";
 import axios from "@nextcloud/axios";
 import { loadState } from "@nextcloud/initial-state";
 import { imagePath, generateOcsUrl } from "@nextcloud/router";
-import { r as register, F as t8, a as t, G as t43, H as t39, I as t23, J as t24, j as t41, K as t31, p as t19, L as t12 } from "./_l10n-CeXHJQB0.mjs";
+import { r as register, E as t8, a as t, F as t43, G as t38, H as t24, i as t40, I as t30, o as t19, J as t12 } from "./_l10n-BPfpECk_.mjs";
 import { l as logger } from "./logger-D3RVzcfQ.mjs";
 import { N as NcEmptyContent } from "./NcEmptyContent-BdOezubv.mjs";
 import { _ as _sfc_main$a } from "./NcHighlight.vue_vue_type_script_lang-DnWQDM_2.mjs";
-import { N as NcSelect } from "./NcSelect-D8ZEOizf.mjs";
+import { N as NcSelect } from "./NcSelect-BN2tEhoU.mjs";
 import debounce from "debounce";
 import { useElementSize, useIntersectionObserver } from "@vueuse/core";
-import { RouterLink } from "vue-router";
+import { routerKey, RouterLink } from "vue-router";
 import { N as NcButton } from "./NcButton-DkC5k3Lb.mjs";
 import { g as getRoute } from "./autolink-U5pBzLgI.mjs";
 import { N as NcLoadingIcon } from "./NcLoadingIcon-b_ajZ_nQ.mjs";
-import { _ as _sfc_main$b } from "./NcTextField.vue_vue_type_script_setup_true_lang-C7tMhmsN.mjs";
-import { I as IconDotsHorizontal } from "./NcActions-B1Zg0lCE.mjs";
-import { N as NcModal } from "./NcModal-vyUsS1qu.mjs";
+import { _ as _sfc_main$b } from "./NcTextField.vue_vue_type_script_setup_true_lang-Dl9AQfwW.mjs";
+import { I as IconDotsHorizontal } from "./NcActions-Ccr8kkyh.mjs";
+import { N as NcModal } from "./NcModal-DLFgq7Qy.mjs";
 const _sfc_main$9 = {
   name: "ArrowLeftIcon",
   emits: ["click"],
@@ -42,7 +42,7 @@ const _hoisted_1$9 = ["aria-hidden", "aria-label"];
 const _hoisted_2$7 = ["fill", "width", "height"];
 const _hoisted_3$6 = { d: "M20,11V13H8L13.5,18.5L12.08,19.92L4.16,12L12.08,4.08L13.5,5.5L8,11H20Z" };
 const _hoisted_4$5 = { key: 0 };
-function _sfc_render$9(_ctx, _cache, $props, $setup, $data, $options) {
+function _sfc_render$8(_ctx, _cache, $props, $setup, $data, $options) {
   return openBlock(), createElementBlock("span", mergeProps(_ctx.$attrs, {
     "aria-hidden": $props.title ? null : "true",
     "aria-label": $props.title,
@@ -63,7 +63,7 @@ function _sfc_render$9(_ctx, _cache, $props, $setup, $data, $options) {
     ], 8, _hoisted_2$7))
   ], 16, _hoisted_1$9);
 }
-const ArrowLeftIcon = /* @__PURE__ */ _export_sfc(_sfc_main$9, [["render", _sfc_render$9]]);
+const ArrowLeftIcon = /* @__PURE__ */ _export_sfc(_sfc_main$9, [["render", _sfc_render$8]]);
 const _sfc_main$8 = {
   name: "NcCustomPickerElement",
   props: {
@@ -122,10 +122,10 @@ const _sfc_main$8 = {
   }
 };
 const _hoisted_1$8 = { ref: "domElement" };
-function _sfc_render$8(_ctx, _cache, $props, $setup, $data, $options) {
+function _sfc_render$7(_ctx, _cache, $props, $setup, $data, $options) {
   return openBlock(), createElementBlock("div", _hoisted_1$8, null, 512);
 }
-const NcCustomPickerElement = /* @__PURE__ */ _export_sfc(_sfc_main$8, [["render", _sfc_render$8], ["__scopeId", "data-v-e408867a"]]);
+const NcCustomPickerElement = /* @__PURE__ */ _export_sfc(_sfc_main$8, [["render", _sfc_render$7], ["__scopeId", "data-v-e408867a"]]);
 const _sfc_main$7 = {
   name: "LinkVariantIcon",
   emits: ["click"],
@@ -147,7 +147,7 @@ const _hoisted_1$7 = ["aria-hidden", "aria-label"];
 const _hoisted_2$6 = ["fill", "width", "height"];
 const _hoisted_3$5 = { d: "M10.59,13.41C11,13.8 11,14.44 10.59,14.83C10.2,15.22 9.56,15.22 9.17,14.83C7.22,12.88 7.22,9.71 9.17,7.76V7.76L12.71,4.22C14.66,2.27 17.83,2.27 19.78,4.22C21.73,6.17 21.73,9.34 19.78,11.29L18.29,12.78C18.3,11.96 18.17,11.14 17.89,10.36L18.36,9.88C19.54,8.71 19.54,6.81 18.36,5.64C17.19,4.46 15.29,4.46 14.12,5.64L10.59,9.17C9.41,10.34 9.41,12.24 10.59,13.41M13.41,9.17C13.8,8.78 14.44,8.78 14.83,9.17C16.78,11.12 16.78,14.29 14.83,16.24V16.24L11.29,19.78C9.34,21.73 6.17,21.73 4.22,19.78C2.27,17.83 2.27,14.66 4.22,12.71L5.71,11.22C5.7,12.04 5.83,12.86 6.11,13.65L5.64,14.12C4.46,15.29 4.46,17.19 5.64,18.36C6.81,19.54 8.71,19.54 9.88,18.36L13.41,14.83C14.59,13.66 14.59,11.76 13.41,10.59C13,10.2 13,9.56 13.41,9.17Z" };
 const _hoisted_4$4 = { key: 0 };
-function _sfc_render$7(_ctx, _cache, $props, $setup, $data, $options) {
+function _sfc_render$6(_ctx, _cache, $props, $setup, $data, $options) {
   return openBlock(), createElementBlock("span", mergeProps(_ctx.$attrs, {
     "aria-hidden": $props.title ? null : "true",
     "aria-label": $props.title,
@@ -168,7 +168,7 @@ function _sfc_render$7(_ctx, _cache, $props, $setup, $data, $options) {
     ], 8, _hoisted_2$6))
   ], 16, _hoisted_1$7);
 }
-const LinkVariantIcon = /* @__PURE__ */ _export_sfc(_sfc_main$7, [["render", _sfc_render$7]]);
+const LinkVariantIcon = /* @__PURE__ */ _export_sfc(_sfc_main$7, [["render", _sfc_render$6]]);
 register(t8);
 const anyLinkProviderId = "any-link";
 const anyLinkProvider = {
@@ -224,7 +224,7 @@ async function touchProvider(providerId) {
   await axios.put(url, { timestamp });
   window._vue_richtext_reference_provider_timestamps[providerId] = timestamp;
 }
-register(t39, t43);
+register(t38, t43);
 /*!
  * SPDX-FileCopyrightText: 2023 Nextcloud GmbH and Nextcloud contributors
  * SPDX-License-Identifier: AGPL-3.0-or-later
@@ -301,7 +301,7 @@ const _hoisted_3$4 = {
   class: "provider"
 };
 const _hoisted_4$3 = ["src", "alt"];
-function _sfc_render$6(_ctx, _cache, $props, $setup, $data, $options) {
+function _sfc_render$5(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_LinkVariantIcon = resolveComponent("LinkVariantIcon");
   const _component_NcHighlight = resolveComponent("NcHighlight");
   const _component_NcSelect = resolveComponent("NcSelect");
@@ -355,85 +355,68 @@ function _sfc_render$6(_ctx, _cache, $props, $setup, $data, $options) {
     })
   ]);
 }
-const NcProviderList = /* @__PURE__ */ _export_sfc(_sfc_main$6, [["render", _sfc_render$6], ["__scopeId", "data-v-90c6aa3b"]]);
-register(t23);
+const NcProviderList = /* @__PURE__ */ _export_sfc(_sfc_main$6, [["render", _sfc_render$5], ["__scopeId", "data-v-90c6aa3b"]]);
+register();
+const _hoisted_1$5 = ["src"];
+const _hoisted_2$4 = { class: "widget-default--details" };
+const _hoisted_3$3 = { class: "widget-default--name" };
+const _hoisted_4$2 = { class: "widget-default--link" };
 const IDLE_TIMEOUT = 3 * 60 * 1e3;
-const _sfc_main$5 = {
-  name: "NcReferenceWidget",
-  components: {
-    NcButton
-  },
-  /* eslint vue/require-prop-comment: warn -- TODO: Add a proper doc block about what this props do */
+const _sfc_main$5 = /* @__PURE__ */ defineComponent({
+  __name: "NcReferenceWidget",
   props: {
-    reference: {
-      type: Object,
-      required: true
-    },
-    interactive: {
-      type: Boolean,
-      default: true
-    },
-    interactiveOptIn: {
-      type: Boolean,
-      default: false
-    }
+    reference: {},
+    interactive: { type: Boolean, default: true },
+    interactiveOptIn: { type: Boolean, default: false }
   },
-  setup() {
+  setup(__props) {
+    const props = __props;
+    const router = inject(routerKey, null);
     const isVisible = ref(false);
-    const widgetRoot = ref();
+    const customWidget = useTemplateRef("customWidget");
+    const widgetRoot = useTemplateRef("widgetRoot");
     const { width } = useElementSize(widgetRoot);
     useIntersectionObserver(widgetRoot, ([entry]) => {
       nextTick(() => {
         isVisible.value = entry.isIntersecting;
       });
     });
-    return {
-      width,
-      isVisible,
-      widgetRoot
-    };
-  },
-  data() {
-    return {
-      showInteractive: false,
-      rendered: false,
-      idleTimeout: null
-    };
-  },
-  computed: {
-    isInteractive() {
-      return !this.interactiveOptIn && this.interactive || this.showInteractive;
-    },
-    hasFullWidth() {
-      return hasFullWidth(this.reference.richObjectType);
-    },
-    hasCustomWidget() {
-      return isWidgetRegistered(this.reference.richObjectType);
-    },
-    hasInteractiveView() {
-      return isWidgetRegistered(this.reference.richObjectType) && hasInteractiveView(this.reference.richObjectType);
-    },
-    noAccess() {
-      return this.reference && !this.reference.accessible;
-    },
-    descriptionStyle() {
-      if (this.numberOfLines === 0) {
+    const showInteractive = ref(false);
+    const rendered = ref(false);
+    let idleTimeout = null;
+    const isInteractive = computed(() => {
+      return !props.interactiveOptIn && props.interactive || showInteractive.value;
+    });
+    const referenceHasFullWidth = computed(() => {
+      return hasFullWidth(props.reference.richObjectType);
+    });
+    const hasCustomWidget = computed(() => {
+      return isWidgetRegistered(props.reference.richObjectType);
+    });
+    const referenceHasInteractiveView = computed(() => {
+      return hasCustomWidget.value && hasInteractiveView(props.reference.richObjectType);
+    });
+    const noAccess = computed(() => {
+      return !props.reference.accessible;
+    });
+    const numberOfLines = computed(() => {
+      const lineCountOffsets = [450, 550, 650, Infinity];
+      return lineCountOffsets.findIndex((max) => width.value < max);
+    });
+    const descriptionStyle = computed(() => {
+      if (numberOfLines.value === 0) {
         return {
           display: "none"
         };
       }
-      const lineClamp = this.numberOfLines;
+      const lineClamp = numberOfLines.value;
       return {
         lineClamp,
         webkitLineClamp: lineClamp
       };
-    },
-    numberOfLines() {
-      const lineCountOffsets = [450, 550, 650, Infinity];
-      return lineCountOffsets.findIndex((max) => this.width < max);
-    },
-    compactLink() {
-      const link = this.reference.openGraphObject.link;
+    });
+    const compactLink = computed(() => {
+      const link = props.reference.openGraphObject.link;
       if (!link) {
         return "";
       }
@@ -444,123 +427,112 @@ const _sfc_main$5 = {
         return link.substring(7);
       }
       return link;
-    },
-    route() {
-      return getRoute(this.$router, this.reference.openGraphObject.link);
-    },
-    referenceWidgetLinkComponent() {
-      return this.route ? RouterLink : "a";
-    },
-    referenceWidgetLinkProps() {
-      return this.route ? { to: this.route } : { href: this.reference.openGraphObject.link, target: "_blank" };
-    }
-  },
-  watch: {
-    isVisible: {
-      handler(val) {
-        if (!val) {
-          this.idleTimeout = setTimeout(() => {
-            if (!this.isVisible) {
-              this.destroyWidget();
-            }
-          }, IDLE_TIMEOUT);
-          return;
-        }
-        if (this.idleTimeout) {
-          clearTimeout(this.idleTimeout);
-          this.idleTimeout = null;
-        }
-        if (!this.rendered) {
-          this.renderWidget();
-        }
-      },
-      immediate: true
+    });
+    const route = computed(() => {
+      return getRoute(router, props.reference.openGraphObject.link);
+    });
+    const referenceWidgetLinkComponent = computed(() => {
+      return route.value ? RouterLink : "a";
+    });
+    const referenceWidgetLinkProps = computed(() => {
+      return route.value ? { to: route.value } : { href: props.reference.openGraphObject.link, target: "_blank" };
+    });
+    watch(isVisible, (val) => {
+      if (!val) {
+        idleTimeout = setTimeout(() => {
+          if (!isVisible.value) {
+            destroyReferenceWidget();
+          }
+        }, IDLE_TIMEOUT);
+        return;
+      }
+      if (idleTimeout) {
+        clearTimeout(idleTimeout);
+        idleTimeout = null;
+      }
+      if (!rendered.value) {
+        renderReferenceWidget();
+      }
+    }, { immediate: true });
+    onBeforeUnmount(() => {
+      destroyReferenceWidget();
+    });
+    function enableInteractive() {
+      showInteractive.value = true;
+      renderReferenceWidget();
     }
-  },
-  beforeUnmount() {
-    this.destroyWidget();
-  },
-  methods: {
-    t,
-    enableInteractive() {
-      this.showInteractive = true;
-      this.renderWidget();
-    },
-    renderWidget() {
-      if (!this.$refs.customWidget) {
+    function renderReferenceWidget() {
+      if (!customWidget.value) {
         return;
       }
-      if (this?.reference?.richObjectType === "open-graph") {
+      if (props.reference.richObjectType === "open-graph") {
         return;
       }
-      this.$refs.customWidget.innerHTML = "";
+      customWidget.value.innerHTML = "";
       const widget = document.createElement("div");
-      widget.style = "width: 100%;";
-      this.$refs.customWidget.appendChild(widget);
-      this.$nextTick(() => {
+      widget.style.width = "100%";
+      customWidget.value.appendChild(widget);
+      nextTick(() => {
         renderWidget(widget, {
-          ...this.reference,
-          interactive: this.isInteractive
+          ...props.reference,
+          interactive: isInteractive.value
         });
-        this.rendered = true;
+        rendered.value = true;
       });
-    },
-    destroyWidget() {
-      if (this.rendered) {
-        destroyWidget(this.reference.richObjectType, this.$el);
-        this.rendered = false;
+    }
+    function destroyReferenceWidget() {
+      if (rendered.value && widgetRoot.value) {
+        destroyWidget(props.reference.richObjectType, widgetRoot.value);
+        rendered.value = false;
       }
     }
-  }
-};
-const _hoisted_1$5 = ["src"];
-const _hoisted_2$4 = { class: "widget-default--details" };
-const _hoisted_3$3 = { class: "widget-default--name" };
-const _hoisted_4$2 = { class: "widget-default--link" };
-function _sfc_render$5(_ctx, _cache, $props, $setup, $data, $options) {
-  const _component_NcButton = resolveComponent("NcButton");
-  return openBlock(), createElementBlock("div", {
-    ref: "widgetRoot",
-    class: normalizeClass({ "toggle-interactive": $options.hasInteractiveView && !$options.isInteractive })
-  }, [
-    $props.reference && $options.hasCustomWidget ? (openBlock(), createElementBlock("div", {
-      key: 0,
-      ref: "customWidget",
-      class: normalizeClass(["widget-custom", { "full-width": $options.hasFullWidth }])
-    }, null, 2)) : !$options.noAccess && $props.reference && $props.reference.openGraphObject && !$options.hasCustomWidget ? (openBlock(), createBlock(resolveDynamicComponent($options.referenceWidgetLinkComponent), mergeProps({ key: 1 }, $options.referenceWidgetLinkProps, {
-      rel: "noopener noreferrer",
-      class: "widget-default"
-    }), {
-      default: withCtx(() => [
-        $props.reference.openGraphObject.thumb ? (openBlock(), createElementBlock("img", {
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", {
+        ref_key: "widgetRoot",
+        ref: widgetRoot,
+        class: normalizeClass({ "toggle-interactive": referenceHasInteractiveView.value && !isInteractive.value })
+      }, [
+        _ctx.reference && hasCustomWidget.value ? (openBlock(), createElementBlock("div", {
           key: 0,
-          class: "widget-default--image",
-          src: $props.reference.openGraphObject.thumb
-        }, null, 8, _hoisted_1$5)) : createCommentVNode("", true),
-        createElementVNode("div", _hoisted_2$4, [
-          createElementVNode("p", _hoisted_3$3, toDisplayString($props.reference.openGraphObject.name), 1),
-          createElementVNode("p", {
-            class: "widget-default--description",
-            style: normalizeStyle($options.descriptionStyle)
-          }, toDisplayString($props.reference.openGraphObject.description), 5),
-          createElementVNode("p", _hoisted_4$2, toDisplayString($options.compactLink), 1)
-        ])
-      ]),
-      _: 1
-    }, 16)) : createCommentVNode("", true),
-    $props.interactiveOptIn && $options.hasInteractiveView && !$options.isInteractive ? (openBlock(), createBlock(_component_NcButton, {
-      key: 2,
-      class: "toggle-interactive--button",
-      onClick: $options.enableInteractive
-    }, {
-      default: withCtx(() => [
-        createTextVNode(toDisplayString($options.t("Enable interactive view")), 1)
-      ]),
-      _: 1
-    }, 8, ["onClick"])) : createCommentVNode("", true)
-  ], 2);
-}
-const NcReferenceWidget = /* @__PURE__ */ _export_sfc(_sfc_main$5, [["render", _sfc_render$5], ["__scopeId", "data-v-17076b70"]]);
+          ref_key: "customWidget",
+          ref: customWidget,
+          class: normalizeClass(["widget-custom", { "full-width": referenceHasFullWidth.value }])
+        }, null, 2)) : !noAccess.value && _ctx.reference && _ctx.reference.openGraphObject && !hasCustomWidget.value ? (openBlock(), createBlock(resolveDynamicComponent(referenceWidgetLinkComponent.value), mergeProps({ key: 1 }, referenceWidgetLinkProps.value, {
+          rel: "noopener noreferrer",
+          class: "widget-default"
+        }), {
+          default: withCtx(() => [
+            _ctx.reference.openGraphObject.thumb ? (openBlock(), createElementBlock("img", {
+              key: 0,
+              class: "widget-default--image",
+              src: _ctx.reference.openGraphObject.thumb
+            }, null, 8, _hoisted_1$5)) : createCommentVNode("", true),
+            createElementVNode("div", _hoisted_2$4, [
+              createElementVNode("p", _hoisted_3$3, toDisplayString(_ctx.reference.openGraphObject.name), 1),
+              createElementVNode("p", {
+                class: "widget-default--description",
+                style: normalizeStyle(descriptionStyle.value)
+              }, toDisplayString(_ctx.reference.openGraphObject.description), 5),
+              createElementVNode("p", _hoisted_4$2, toDisplayString(compactLink.value), 1)
+            ])
+          ]),
+          _: 1
+        }, 16)) : createCommentVNode("", true),
+        _ctx.interactiveOptIn && referenceHasInteractiveView.value && !isInteractive.value ? (openBlock(), createBlock(NcButton, {
+          key: 2,
+          class: "toggle-interactive--button",
+          onClick: enableInteractive
+        }, {
+          default: withCtx(() => [
+            createTextVNode(toDisplayString(unref(t)("Enable interactive view")), 1)
+          ]),
+          _: 1
+        })) : createCommentVNode("", true)
+      ], 2);
+    };
+  }
+});
+const NcReferenceWidget = /* @__PURE__ */ _export_sfc(_sfc_main$5, [["__scopeId", "data-v-8ce33442"]]);
 register(t24);
 const _sfc_main$4 = {
   name: "NcRawLinkInput",
@@ -749,7 +721,7 @@ function _sfc_render$3(_ctx, _cache, $props, $setup, $data, $options) {
   ]);
 }
 const NcSearchResult = /* @__PURE__ */ _export_sfc(_sfc_main$3, [["render", _sfc_render$3], ["__scopeId", "data-v-059edcfb"]]);
-register(t31, t39, t41);
+register(t30, t38, t40);
 const LIMIT = 5;
 const _sfc_main$2 = {
   name: "NcSearch",
@@ -1396,4 +1368,4 @@ export {
   NcSearch as h,
   searchProvider as s
 };
-//# sourceMappingURL=referencePickerModal-B2XHvg0V.mjs.map
+//# sourceMappingURL=referencePickerModal-BgBJRzaB.mjs.map