@nextcloud/vue 8.7.0 → 8.8.0

package/dist/chunks/{NcPopover-T4GMXmKV.mjs → NcPopover-93ns_0K4.mjs}

@@ -1,10 +1,10 @@
 import '../assets/NcPopover-MK4GcuPY.css';
 import s, { defineComponent as a } from "vue";
-import { Dropdown as p } from "floating-vue";
-import { createFocusTrap as i } from "focus-trap";
-import { g as u } from "./focusTrap-Py2bQ9-r.mjs";
+import { Dropdown as i } from "floating-vue";
+import { createFocusTrap as p } from "focus-trap";
+import { g as l } from "./focusTrap-Py2bQ9-r.mjs";
 import { n } from "./_plugin-vue2_normalizer-u6G_3nkj.mjs";
-const l = a({
+const u = a({
   name: "NcPopoverTriggerProvider",
   provide() {
     return {
@@ -19,7 +19,7 @@ const l = a({
     },
     popupRole: {
       type: String,
-      required: !0
+      default: void 0
     }
   },
   computed: {
@@ -36,8 +36,8 @@ const l = a({
     });
   }
 }), c = null, d = null;
-var h = /* @__PURE__ */ n(
-  l,
+var g = /* @__PURE__ */ n(
+  u,
   c,
   d,
   !1,
@@ -46,11 +46,11 @@ var h = /* @__PURE__ */ n(
   null,
   null
 );
-const f = h.exports, g = {
+const h = g.exports, f = {
   name: "NcPopover",
   components: {
-    Dropdown: p,
-    NcPopoverTriggerProvider: f
+    Dropdown: i,
+    NcPopoverTriggerProvider: h
   },
   inheritAttrs: !1,
   props: {
@@ -68,7 +68,7 @@ const f = h.exports, g = {
      */
     popupRole: {
       type: String,
-      default: "true",
+      default: void 0,
       validator: (t) => ["menu", "listbox", "tree", "grid", "dialog", "true"].includes(t)
     },
     popoverBaseClass: {
@@ -125,7 +125,16 @@ const f = h.exports, g = {
      * Important to check custom trigger button.
      */
     checkTriggerA11y() {
-      window.OC?.debug && (this.$refs.popover.$refs.reference.querySelector("[aria-expanded][aria-haspopup]") || s.util.warn("It looks like you are using a custom button as a <NcPopover> or other popover #trigger. If you are not using <NcButton> as a trigger, you need to bind attrs from the #trigger slot props to your custom button. See <NcPopover> docs for an example."));
+      window.OC?.debug && (this.getPopoverTriggerContainerElement().querySelector("[aria-expanded]") || s.util.warn("It looks like you are using a custom button as a <NcPopover> or other popover #trigger. If you are not using <NcButton> as a trigger, you need to bind attrs from the #trigger slot props to your custom button. See <NcPopover> docs for an example."));
+    },
+    /**
+     * Remove incorrect aria-describedby attribute from the trigger.
+     * @see https://github.com/Akryum/floating-vue/blob/8d4f7125aae0e3ea00ba4093d6d2001ab15058f1/packages/floating-vue/src/components/Popper.ts#L734
+     */
+    removeFloatingVueAriaDescribedBy() {
+      const e = this.getPopoverTriggerContainerElement().querySelectorAll("[data-popper-shown]");
+      for (const r of e)
+        r.removeAttribute("aria-describedby");
     },
     /**
      * @return {HTMLElement|undefined}
@@ -133,6 +142,12 @@ const f = h.exports, g = {
     getPopoverContentElement() {
       return this.$refs.popover?.$refs.popperContent?.$el;
     },
+    /**
+     * @return {HTMLElement|undefined}
+     */
+    getPopoverTriggerContainerElement() {
+      return this.$refs.popover.$refs.reference;
+    },
     /**
      * Add focus trap for accessibility.
      */
@@ -140,13 +155,13 @@ const f = h.exports, g = {
       if (await this.$nextTick(), !this.focusTrap)
         return;
       const t = this.getPopoverContentElement();
-      t && (this.$focusTrap = i(t, {
+      t && (this.$focusTrap = p(t, {
         // Prevents to lose focus using esc key
         // Focus will be release when popover be hide
         escapeDeactivates: !1,
         allowOutsideClick: !0,
         setReturnFocus: this.setReturnFocus,
-        trapStack: u()
+        trapStack: l()
       }), this.$focusTrap.activate());
     },
     /**
@@ -184,7 +199,7 @@ const f = h.exports, g = {
       t.type === "keydown" && t.key === "Escape" && t.stopPropagation();
     },
     afterShow() {
-      this.$nextTick(() => {
+      this.removeFloatingVueAriaDescribedBy(), this.$nextTick(() => {
         this.$emit("after-show"), this.useFocusTrap(), this.addEscapeStopPropagation();
       });
     },
@@ -194,16 +209,16 @@ const f = h.exports, g = {
   }
 };
 var m = function() {
-  var e = this, o = e._self._c;
-  return o("Dropdown", e._g(e._b({ ref: "popover", attrs: { distance: 10, "arrow-padding": 10, "no-auto-focus": !0, "popper-class": e.popoverBaseClass, shown: e.internalShown }, on: { "update:shown": function(r) {
-    e.internalShown = r;
+  var e = this, r = e._self._c;
+  return r("Dropdown", e._g(e._b({ ref: "popover", attrs: { distance: 10, "arrow-padding": 10, "no-auto-focus": !0, "popper-class": e.popoverBaseClass, shown: e.internalShown }, on: { "update:shown": function(o) {
+    e.internalShown = o;
   }, "apply-show": e.afterShow, "apply-hide": e.afterHide }, scopedSlots: e._u([{ key: "popper", fn: function() {
     return [e._t("default")];
-  }, proxy: !0 }], null, !0) }, "Dropdown", e.$attrs, !1), e.$listeners), [o("NcPopoverTriggerProvider", { attrs: { shown: e.internalShown, "popup-role": e.popupRole }, scopedSlots: e._u([{ key: "default", fn: function(r) {
-    return [e._t("trigger", null, null, r)];
+  }, proxy: !0 }], null, !0) }, "Dropdown", e.$attrs, !1), e.$listeners), [r("NcPopoverTriggerProvider", { attrs: { shown: e.internalShown, "popup-role": e.popupRole }, scopedSlots: e._u([{ key: "default", fn: function(o) {
+    return [e._t("trigger", null, null, o)];
   } }], null, !0) })], 1);
 }, w = [], v = /* @__PURE__ */ n(
-  g,
+  f,
   m,
   w,
   !1,
@@ -212,7 +227,7 @@ var m = function() {
   null,
   null
 );
-const $ = v.exports;
+const E = v.exports;
 export {
-  $ as N
+  E as N
 };

package/dist/chunks/NcPopover-93ns_0K4.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"NcPopover-93ns_0K4.mjs","sources":["../../src/components/NcPopover/NcPopoverTriggerProvider.vue","../../src/components/NcPopover/NcPopover.vue"],"sourcesContent":["<script>\nimport { defineComponent } from 'vue'\n\nexport default defineComponent({\n\tname: 'NcPopoverTriggerProvider',\n\n\tprovide() {\n\t\treturn {\n\t\t\t'NcPopover:trigger:shown': () => this.shown,\n\t\t\t'NcPopover:trigger:attrs': () => this.triggerAttrs,\n\t\t}\n\t},\n\n\tprops: {\n\t\tshown: {\n\t\t\ttype: Boolean,\n\t\t\trequired: true,\n\t\t},\n\t\tpopupRole: {\n\t\t\ttype: String,\n\t\t\tdefault: undefined,\n\t\t},\n\t},\n\n\tcomputed: {\n\t\ttriggerAttrs() {\n\t\t\treturn {\n\t\t\t\t'aria-haspopup': this.popupRole,\n\t\t\t\t'aria-expanded': this.shown.toString(),\n\t\t\t}\n\t\t},\n\t},\n\n\trender() {\n\t\t// TODO: Vue 3 - replace with $slots\n\t\treturn this.$scopedSlots.default?.({\n\t\t\tattrs: this.triggerAttrs,\n\t\t})\n\t},\n})\n</script>\n","<!--\n  - @copyright Copyright (c) 2019 Marco Ambrosini <marcoambrosini@icloud.com>\n  -\n  - @author Marco Ambrosini <marcoambrosini@icloud.com>\n  -\n  - @license GNU AGPL version 3 or any later version\n  -\n  - This program is free software: you can redistribute it and/or modify\n  - it under the terms of the GNU Affero General Public License as\n  - published by the Free Software Foundation, either version 3 of the\n  - License, or (at your option) any later version.\n  -\n  - This program is distributed in the hope that it will be useful,\n  - but WITHOUT ANY WARRANTY; without even the implied warranty of\n  - MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the\n  - GNU Affero General Public License for more details.\n  -\n  - You should have received a copy of the GNU Affero General Public License\n  - along with this program. If not, see <http://www.gnu.org/licenses/>.\n-->\n\n<docs>\n\n### General description\n\nThis component is just a wrapper for the floating-vue plugin by Akryum,\nplease refer to this documentation for customization:\nhttps://github.com/Akryum/floating-vue\n\nThis components has two slots:\n* 'trigger' which can be any html element and it will trigger the popover\nthis slot is optional since you can toggle the popover also by updating the\nopen prop on this component;\n\n* a default slot that is for the content of the popover.\n\n### Examples\n\n#### With a `<NcButton>` as a trigger:\n\n```vue\n<template>\n\t<div style=\"display: flex\">\n\t\t<NcPopover popup-role=\"dialog\">\n\t\t\t<template #trigger>\n\t\t\t\t<NcButton>I am the trigger</NcButton>\n\t\t\t</template>\n\t\t\t<template>\n\t\t\t\t<form tabindex=\"0\" role=\"dialog\" aria-labelledby=\"popover-example-dialog-header-1\" @submit.prevent>\n\t\t\t\t\t<h2 id=\"popover-example-dialog-header-1\">this is some content</h2>\n\t\t\t\t\t<p>\n\t\t\t\t\t\tLorem ipsum dolor sit amet, consectetur adipiscing elit. <br/>\n\t\t\t\t\t\tVestibulum eget placerat velit.\n\t\t\t\t\t</p>\n\t\t\t\t\t<label>\n\t\t\t\t\t\tLabel element\n\t\t\t\t\t\t<input type=\"text\" placeholder=\"input element\"/>\n\t\t\t\t\t</label>\n\t\t\t\t</form>\n\t\t\t</template>\n\t\t</NcPopover>\n\t</div>\n</template>\n```\n\n#### Without focus trap:\n\nThe [`focus-trap`](https://github.com/focus-trap/focus-trap) emits an error when used in a non-focusable element tree.\n\nThe prop `:focus-trap=\"false\"` help to prevent it when the default behavior is not relevant.\n\n```vue\n<template>\n\t<div style=\"display: flex\">\n\t\t<NcPopover :focus-trap=\"false\">\n\t\t\t<template #trigger>\n\t\t\t\t<NcButton>Click me!</NcButton>\n\t\t\t</template>\n\t\t\t<template>\n\t\t\t\tHi! 🚀\n\t\t\t</template>\n\t\t</NcPopover>\n\t</div>\n</template>\n```\n\n#### With passing props to `floating-vue`'s `Dropdown`:\n\n```vue\n<template>\n\t<div style=\"display: flex\">\n\t\t<NcPopover container=\"body\" :popper-hide-triggers=\"(triggers) => [...triggers, 'click']\" popup-role=\"dialog\">\n\t\t\t<template #trigger>\n\t\t\t\t<NcButton>I am the trigger</NcButton>\n\t\t\t</template>\n\t\t\t<template #default>\n\t\t\t\t<NcButton>Click on the button will close NcPopover</NcButton>\n\t\t\t</template>\n\t\t</NcPopover>\n\t</div>\n</template>\n```\n\n#### With a custom button in as a trigger:\n\nWhen `<NcButton>` is used as a `<NcPopover>` trigger, it injects required for a11y attributes to the button.\n\nIf you are using your own custom button as a trigger make sure to bind `attrs` from the trigger slot props.\nSee code example below.\n\n```vue\n<template>\n\t<div style=\"display: flex\">\n\t\t<NcPopover>\n\t\t\t<!-- Take \"attrs\" from the slot props -->\n\t\t\t<template #trigger=\"{ attrs }\">\n\t\t\t\t<!-- Bind attrs as the button attrs -->\n\t\t\t\t<button v-bind=\"attrs\">\n\t\t\t\t\tI am a custom button in the trigger\n\t\t\t\t</button>\n\t\t\t</template>\n\n\t\t\tHi! 🚀\n\t\t</NcPopover>\n\t</div>\n</template>\n```\n\n#### Provide role for the popover content\n\nFor accessibility reasons, popover should have a role. Provide it to the `popup-role` and make sure that the popover content is an element with the same role.\n\nSee: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-haspopup\n\n```vue\n<template>\n\t<div style=\"display: flex\">\n\t\t<!-- Provide popup role -->\n\t\t<NcPopover popup-role=\"dialog\">\n\t\t\t<template #trigger>\n\t\t\t\t<NcButton>Delete</NcButton>\n\t\t\t</template>\n\n\t\t\t<!-- Popover content should has the same role -->\n\t\t\t<div role=\"dialog\" aria-labelledby=\"popover-example-custom-role-1\" aria-modal=\"true\">\n\t\t\t\t<!-- This is not required but better to provide a label -->\n\t\t\t\t<header id=\"popover-example-custom-role-1\">\n\t\t\t\t\t<strong>Confirm remove</strong>\n\t\t\t\t</header>\n\t\t\t\t<NcButton type=\"danger\">Delete</NcButton>\n\t\t\t</div>\n\t\t</NcPopover>\n\t</div>\n</template>\n```\n</docs>\n\n<template>\n\t<Dropdown ref=\"popover\"\n\t\t:distance=\"10\"\n\t\t:arrow-padding=\"10\"\n\t\tv-bind=\"$attrs\"\n\t\t:no-auto-focus=\"true /* Handled by the focus trap */\"\n\t\t:popper-class=\"popoverBaseClass\"\n\t\t:shown=\"internalShown\"\n\t\tv-on=\"$listeners\"\n\t\t@update:shown=\"internalShown = $event\"\n\t\t@apply-show=\"afterShow\"\n\t\t@apply-hide=\"afterHide\">\n\t\t<NcPopoverTriggerProvider v-slot=\"slotProps\" :shown=\"internalShown\" :popup-role=\"popupRole\">\n\t\t\t<!-- This will be the popover target (for the events and position) -->\n\t\t\t<slot name=\"trigger\" v-bind=\"slotProps\" />\n\t\t</NcPopoverTriggerProvider>\n\n\t\t<!-- This will be the content of the popover -->\n\t\t<template #popper>\n\t\t\t<slot />\n\t\t</template>\n\t</Dropdown>\n</template>\n\n<script>\nimport Vue from 'vue'\nimport { Dropdown } from 'floating-vue'\nimport { createFocusTrap } from 'focus-trap'\nimport { getTrapStack } from '../../utils/focusTrap.js'\nimport NcPopoverTriggerProvider from './NcPopoverTriggerProvider.vue'\n\nexport default {\n\tname: 'NcPopover',\n\n\tcomponents: {\n\t\tDropdown,\n\t\tNcPopoverTriggerProvider,\n\t},\n\n\tinheritAttrs: false,\n\n\tprops: {\n\t\t/**\n\t\t * Show or hide the popper\n\t\t * @see https://floating-vue.starpad.dev/api/#shown\n\t\t */\n\t\tshown: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/**\n\t\t * Popup role\n\t\t * @see https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-haspopup#values\n\t\t */\n\t\tpopupRole: {\n\t\t\ttype: String,\n\t\t\tdefault: undefined,\n\t\t\tvalidator: (value) => ['menu', 'listbox', 'tree', 'grid', 'dialog', 'true'].includes(value),\n\t\t},\n\n\t\tpopoverBaseClass: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\t\t/**\n\t\t * Enable popover focus trap\n\t\t */\n\t\tfocusTrap: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: true,\n\t\t},\n\t\t/**\n\t\t * Set element to return focus to after focus trap deactivation\n\t\t *\n\t\t * @type {import('focus-trap').FocusTargetValueOrFalse}\n\t\t */\n\t\tsetReturnFocus: {\n\t\t\tdefault: undefined,\n\t\t\ttype: [HTMLElement, SVGElement, String, Boolean],\n\t\t},\n\t},\n\n\temits: [\n\t\t'after-show',\n\t\t'after-hide',\n\t\t/**\n\t\t * @see https://floating-vue.starpad.dev/api/#update-shown\n\t\t */\n\t\t'update:shown',\n\t],\n\n\tdata() {\n\t\treturn {\n\t\t\tinternalShown: this.shown,\n\t\t}\n\t},\n\n\twatch: {\n\t\tshown(value) {\n\t\t\tthis.internalShown = value\n\t\t},\n\n\t\tinternalShown(value) {\n\t\t\tthis.$emit('update:shown', value)\n\t\t},\n\t},\n\n\tmounted() {\n\t\tthis.checkTriggerA11y()\n\t},\n\n\tbeforeDestroy() {\n\t\tthis.clearFocusTrap()\n\t\tthis.clearEscapeStopPropagation()\n\t},\n\n\tmethods: {\n\t\t/**\n\t\t * Check if the trigger has all required a11y attributes.\n\t\t * Important to check custom trigger button.\n\t\t */\n\t\tcheckTriggerA11y() {\n\t\t\tif (window.OC?.debug) {\n\t\t\t\tconst triggerContainer = this.getPopoverTriggerContainerElement()\n\t\t\t\tconst requiredTriggerButton = triggerContainer.querySelector('[aria-expanded]')\n\t\t\t\tif (!requiredTriggerButton) {\n\t\t\t\t\tVue.util.warn('It looks like you are using a custom button as a <NcPopover> or other popover #trigger. If you are not using <NcButton> as a trigger, you need to bind attrs from the #trigger slot props to your custom button. See <NcPopover> docs for an example.')\n\t\t\t\t}\n\t\t\t}\n\t\t},\n\n\t\t/**\n\t\t * Remove incorrect aria-describedby attribute from the trigger.\n\t\t * @see https://github.com/Akryum/floating-vue/blob/8d4f7125aae0e3ea00ba4093d6d2001ab15058f1/packages/floating-vue/src/components/Popper.ts#L734\n\t\t */\n\t\tremoveFloatingVueAriaDescribedBy() {\n\t\t\t// When the popover is shown, floating-vue mutates the root elements of the trigger adding data-popper-shown and incorrect aria-describedby attributes.\n\t\t\tconst triggerContainer = this.getPopoverTriggerContainerElement()\n\t\t\tconst triggerElements = triggerContainer.querySelectorAll('[data-popper-shown]')\n\t\t\tfor (const el of triggerElements) {\n\t\t\t\tel.removeAttribute('aria-describedby')\n\t\t\t}\n\t\t},\n\n\t\t/**\n\t\t * @return {HTMLElement|undefined}\n\t\t */\n\t\tgetPopoverContentElement() {\n\t\t\treturn this.$refs.popover?.$refs.popperContent?.$el\n\t\t},\n\n\t\t/**\n\t\t * @return {HTMLElement|undefined}\n\t\t */\n\t\tgetPopoverTriggerContainerElement() {\n\t\t\t// TODO: Vue 3: should be\n\t\t\t// this.$refs.popover.$refs.popper.$refs.reference\n\t\t\treturn this.$refs.popover.$refs.reference\n\t\t},\n\n\t\t/**\n\t\t * Add focus trap for accessibility.\n\t\t */\n\t\tasync useFocusTrap() {\n\t\t\tawait this.$nextTick()\n\n\t\t\tif (!this.focusTrap) {\n\t\t\t\treturn\n\t\t\t}\n\n\t\t\tconst el = this.getPopoverContentElement()\n\n\t\t\tif (!el) {\n\t\t\t\treturn\n\t\t\t}\n\n\t\t\t// Init focus trap\n\t\t\tthis.$focusTrap = createFocusTrap(el, {\n\t\t\t\t// Prevents to lose focus using esc key\n\t\t\t\t// Focus will be release when popover be hide\n\t\t\t\tescapeDeactivates: false,\n\t\t\t\tallowOutsideClick: true,\n\t\t\t\tsetReturnFocus: this.setReturnFocus,\n\t\t\t\ttrapStack: getTrapStack(),\n\t\t\t})\n\t\t\tthis.$focusTrap.activate()\n\t\t},\n\n\t\t/**\n\t\t * Remove focus trap\n\t\t *\n\t\t * @param {object} options The configuration options for focusTrap\n\t\t */\n\t\tclearFocusTrap(options = {}) {\n\t\t\ttry {\n\t\t\t\tthis.$focusTrap?.deactivate(options)\n\t\t\t\tthis.$focusTrap = null\n\t\t\t} catch (err) {\n\t\t\t\tconsole.warn(err)\n\t\t\t}\n\t\t},\n\n\t\t/**\n\t\t * Add stopPropagation for Escape.\n\t\t * It prevents global Escape handling after closing popover.\n\t\t *\n\t\t * Manual event handling is used here instead of v-on because there is no direct access to the node.\n\t\t * Alternative - wrap <template #popover> in a div wrapper.\n\t\t */\n\t\taddEscapeStopPropagation() {\n\t\t\tconst el = this.getPopoverContentElement()\n\t\t\tel?.addEventListener('keydown', this.stopKeydownEscapeHandler)\n\t\t},\n\n\t\t/**\n\t\t * Remove stop Escape handler\n\t\t */\n\t\tclearEscapeStopPropagation() {\n\t\t\tconst el = this.getPopoverContentElement()\n\t\t\tel?.removeEventListener('keydown', this.stopKeydownEscapeHandler)\n\t\t},\n\n\t\t/**\n\t\t * @param {KeyboardEvent} event - native keydown event\n\t\t */\n\t\tstopKeydownEscapeHandler(event) {\n\t\t\tif (event.type === 'keydown' && event.key === 'Escape') {\n\t\t\t\tevent.stopPropagation()\n\t\t\t}\n\t\t},\n\n\t\tafterShow() {\n\t\t\tthis.removeFloatingVueAriaDescribedBy()\n\n\t\t\tthis.$nextTick(() => {\n\t\t\t\t/**\n\t\t\t\t * Triggered after the tooltip was visually displayed.\n\t\t\t\t *\n\t\t\t\t * This is different from the 'show' and 'apply-show' which\n\t\t\t\t * run earlier than this where there is no guarantee that the\n\t\t\t\t * tooltip is already visible and in the DOM.\n\t\t\t\t */\n\t\t\t\tthis.$emit('after-show')\n\t\t\t\tthis.useFocusTrap()\n\t\t\t\tthis.addEscapeStopPropagation()\n\t\t\t})\n\t\t},\n\t\tafterHide() {\n\t\t\t/**\n\t\t\t * Triggered after the tooltip was visually hidden.\n\t\t\t */\n\t\t\tthis.$emit('after-hide')\n\t\t\tthis.clearFocusTrap()\n\t\t\tthis.clearEscapeStopPropagation()\n\t\t},\n\t},\n}\n</script>\n\n<style lang=\"scss\">\n\n.resize-observer {\n\tposition:absolute;\n\ttop:0;\n\tleft:0;\n\tz-index:-1;\n\twidth:100%;\n\theight:100%;\n\tborder:none;\n\tbackground-color:transparent;\n\tpointer-events:none;\n\tdisplay:block;\n\toverflow:hidden;\n\topacity:0\n}\n\n.resize-observer object {\n\tdisplay:block;\n\tposition:absolute;\n\ttop:0;\n\tleft:0;\n\theight:100%;\n\twidth:100%;\n\toverflow:hidden;\n\tpointer-events:none;\n\tz-index:-1\n}\n\n$arrow-width: 10px;\n\n.v-popper--theme-dropdown {\n\t&.v-popper__popper {\n\t\tz-index: 100000;\n\t\ttop: 0;\n\t\tleft: 0;\n\t\tdisplay: block !important;\n\n\t\tfilter: drop-shadow(0 1px 10px var(--color-box-shadow));\n\n\t\t.v-popper__inner {\n\t\t\tpadding: 0;\n\t\t\tcolor: var(--color-main-text);\n\t\t\tborder-radius: var(--border-radius-large);\n\t\t\toverflow: hidden;\n\t\t\tbackground: var(--color-main-background);\n\t\t}\n\n\t\t.v-popper__arrow-container {\n\t\t\tposition: absolute;\n\t\t\tz-index: 1;\n\t\t\twidth: 0;\n\t\t\theight: 0;\n\t\t\tborder-style: solid;\n\t\t\tborder-color: transparent;\n\t\t\tborder-width: $arrow-width;\n\t\t}\n\n\t\t&[data-popper-placement^='top'] .v-popper__arrow-container {\n\t\t\tbottom: -$arrow-width;\n\t\t\tborder-bottom-width: 0;\n\t\t\tborder-top-color: var(--color-main-background);\n\t\t}\n\n\t\t&[data-popper-placement^='bottom'] .v-popper__arrow-container {\n\t\t\ttop: -$arrow-width;\n\t\t\tborder-top-width: 0;\n\t\t\tborder-bottom-color: var(--color-main-background);\n\t\t}\n\n\t\t&[data-popper-placement^='right'] .v-popper__arrow-container {\n\t\t\tleft: -$arrow-width;\n\t\t\tborder-left-width: 0;\n\t\t\tborder-right-color: var(--color-main-background);\n\t\t}\n\n\t\t&[data-popper-placement^='left'] .v-popper__arrow-container {\n\t\t\tright: -$arrow-width;\n\t\t\tborder-right-width: 0;\n\t\t\tborder-left-color: var(--color-main-background);\n\t\t}\n\n\t\t&[aria-hidden='true'] {\n\t\t\tvisibility: hidden;\n\t\t\ttransition: opacity var(--animation-quick), visibility var(--animation-quick);\n\t\t\topacity: 0;\n\t\t}\n\n\t\t&[aria-hidden='false'] {\n\t\t\tvisibility: visible;\n\t\t\ttransition: opacity var(--animation-quick);\n\t\t\topacity: 1;\n\t\t}\n\t}\n}\n\n</style>\n"],"names":["_sfc_main","defineComponent","Dropdown","NcPopoverTriggerProvider","value","Vue","triggerElements","el","createFocusTrap","getTrapStack","options","err","event"],"mappings":"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"}

package/dist/chunks/{NcPopover-judBGW5r.cjs → NcPopover-fv7OFtxM.cjs}

@@ -15,7 +15,7 @@ const n = require("vue"), a = require("floating-vue"), i = require("focus-trap")
     },
     popupRole: {
       type: String,
-      required: !0
+      default: void 0
     }
   },
   computed: {
@@ -31,22 +31,22 @@ const n = require("vue"), a = require("floating-vue"), i = require("focus-trap")
       attrs: this.triggerAttrs
     });
   }
-}), d = null, h = null;
-var f = /* @__PURE__ */ s.normalizeComponent(
+}), d = null, g = null;
+var h = /* @__PURE__ */ s.normalizeComponent(
   c,
   d,
-  h,
+  g,
   !1,
   null,
   null,
   null,
   null
 );
-const g = f.exports, w = {
+const f = h.exports, w = {
   name: "NcPopover",
   components: {
     Dropdown: a.Dropdown,
-    NcPopoverTriggerProvider: g
+    NcPopoverTriggerProvider: f
   },
   inheritAttrs: !1,
   props: {
@@ -64,7 +64,7 @@ const g = f.exports, w = {
      */
     popupRole: {
       type: String,
-      default: "true",
+      default: void 0,
       validator: (e) => ["menu", "listbox", "tree", "grid", "dialog", "true"].includes(e)
     },
     popoverBaseClass: {
@@ -121,7 +121,16 @@ const g = f.exports, w = {
      * Important to check custom trigger button.
      */
     checkTriggerA11y() {
-      window.OC?.debug && (this.$refs.popover.$refs.reference.querySelector("[aria-expanded][aria-haspopup]") || l.default.util.warn("It looks like you are using a custom button as a <NcPopover> or other popover #trigger. If you are not using <NcButton> as a trigger, you need to bind attrs from the #trigger slot props to your custom button. See <NcPopover> docs for an example."));
+      window.OC?.debug && (this.getPopoverTriggerContainerElement().querySelector("[aria-expanded]") || l.default.util.warn("It looks like you are using a custom button as a <NcPopover> or other popover #trigger. If you are not using <NcButton> as a trigger, you need to bind attrs from the #trigger slot props to your custom button. See <NcPopover> docs for an example."));
+    },
+    /**
+     * Remove incorrect aria-describedby attribute from the trigger.
+     * @see https://github.com/Akryum/floating-vue/blob/8d4f7125aae0e3ea00ba4093d6d2001ab15058f1/packages/floating-vue/src/components/Popper.ts#L734
+     */
+    removeFloatingVueAriaDescribedBy() {
+      const t = this.getPopoverTriggerContainerElement().querySelectorAll("[data-popper-shown]");
+      for (const r of t)
+        r.removeAttribute("aria-describedby");
     },
     /**
      * @return {HTMLElement|undefined}
@@ -129,6 +138,12 @@ const g = f.exports, w = {
     getPopoverContentElement() {
       return this.$refs.popover?.$refs.popperContent?.$el;
     },
+    /**
+     * @return {HTMLElement|undefined}
+     */
+    getPopoverTriggerContainerElement() {
+      return this.$refs.popover.$refs.reference;
+    },
     /**
      * Add focus trap for accessibility.
      */
@@ -180,7 +195,7 @@ const g = f.exports, w = {
       e.type === "keydown" && e.key === "Escape" && e.stopPropagation();
     },
     afterShow() {
-      this.$nextTick(() => {
+      this.removeFloatingVueAriaDescribedBy(), this.$nextTick(() => {
         this.$emit("after-show"), this.useFocusTrap(), this.addEscapeStopPropagation();
       });
     },
@@ -189,24 +204,24 @@ const g = f.exports, w = {
     }
   }
 };
-var _ = function() {
-  var t = this, o = t._self._c;
-  return o("Dropdown", t._g(t._b({ ref: "popover", attrs: { distance: 10, "arrow-padding": 10, "no-auto-focus": !0, "popper-class": t.popoverBaseClass, shown: t.internalShown }, on: { "update:shown": function(r) {
-    t.internalShown = r;
+var v = function() {
+  var t = this, r = t._self._c;
+  return r("Dropdown", t._g(t._b({ ref: "popover", attrs: { distance: 10, "arrow-padding": 10, "no-auto-focus": !0, "popper-class": t.popoverBaseClass, shown: t.internalShown }, on: { "update:shown": function(o) {
+    t.internalShown = o;
   }, "apply-show": t.afterShow, "apply-hide": t.afterHide }, scopedSlots: t._u([{ key: "popper", fn: function() {
     return [t._t("default")];
-  }, proxy: !0 }], null, !0) }, "Dropdown", t.$attrs, !1), t.$listeners), [o("NcPopoverTriggerProvider", { attrs: { shown: t.internalShown, "popup-role": t.popupRole }, scopedSlots: t._u([{ key: "default", fn: function(r) {
-    return [t._t("trigger", null, null, r)];
+  }, proxy: !0 }], null, !0) }, "Dropdown", t.$attrs, !1), t.$listeners), [r("NcPopoverTriggerProvider", { attrs: { shown: t.internalShown, "popup-role": t.popupRole }, scopedSlots: t._u([{ key: "default", fn: function(o) {
+    return [t._t("trigger", null, null, o)];
   } }], null, !0) })], 1);
-}, v = [], m = /* @__PURE__ */ s.normalizeComponent(
+}, m = [], _ = /* @__PURE__ */ s.normalizeComponent(
   w,
-  _,
   v,
+  m,
   !1,
   null,
   null,
   null,
   null
 );
-const y = m.exports;
+const y = _.exports;
 exports.NcPopover = y;

package/dist/chunks/NcPopover-fv7OFtxM.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"NcPopover-fv7OFtxM.cjs","sources":["../../src/components/NcPopover/NcPopoverTriggerProvider.vue","../../src/components/NcPopover/NcPopover.vue"],"sourcesContent":["<script>\nimport { defineComponent } from 'vue'\n\nexport default defineComponent({\n\tname: 'NcPopoverTriggerProvider',\n\n\tprovide() {\n\t\treturn {\n\t\t\t'NcPopover:trigger:shown': () => this.shown,\n\t\t\t'NcPopover:trigger:attrs': () => this.triggerAttrs,\n\t\t}\n\t},\n\n\tprops: {\n\t\tshown: {\n\t\t\ttype: Boolean,\n\t\t\trequired: true,\n\t\t},\n\t\tpopupRole: {\n\t\t\ttype: String,\n\t\t\tdefault: undefined,\n\t\t},\n\t},\n\n\tcomputed: {\n\t\ttriggerAttrs() {\n\t\t\treturn {\n\t\t\t\t'aria-haspopup': this.popupRole,\n\t\t\t\t'aria-expanded': this.shown.toString(),\n\t\t\t}\n\t\t},\n\t},\n\n\trender() {\n\t\t// TODO: Vue 3 - replace with $slots\n\t\treturn this.$scopedSlots.default?.({\n\t\t\tattrs: this.triggerAttrs,\n\t\t})\n\t},\n})\n</script>\n","<!--\n  - @copyright Copyright (c) 2019 Marco Ambrosini <marcoambrosini@icloud.com>\n  -\n  - @author Marco Ambrosini <marcoambrosini@icloud.com>\n  -\n  - @license GNU AGPL version 3 or any later version\n  -\n  - This program is free software: you can redistribute it and/or modify\n  - it under the terms of the GNU Affero General Public License as\n  - published by the Free Software Foundation, either version 3 of the\n  - License, or (at your option) any later version.\n  -\n  - This program is distributed in the hope that it will be useful,\n  - but WITHOUT ANY WARRANTY; without even the implied warranty of\n  - MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the\n  - GNU Affero General Public License for more details.\n  -\n  - You should have received a copy of the GNU Affero General Public License\n  - along with this program. If not, see <http://www.gnu.org/licenses/>.\n-->\n\n<docs>\n\n### General description\n\nThis component is just a wrapper for the floating-vue plugin by Akryum,\nplease refer to this documentation for customization:\nhttps://github.com/Akryum/floating-vue\n\nThis components has two slots:\n* 'trigger' which can be any html element and it will trigger the popover\nthis slot is optional since you can toggle the popover also by updating the\nopen prop on this component;\n\n* a default slot that is for the content of the popover.\n\n### Examples\n\n#### With a `<NcButton>` as a trigger:\n\n```vue\n<template>\n\t<div style=\"display: flex\">\n\t\t<NcPopover popup-role=\"dialog\">\n\t\t\t<template #trigger>\n\t\t\t\t<NcButton>I am the trigger</NcButton>\n\t\t\t</template>\n\t\t\t<template>\n\t\t\t\t<form tabindex=\"0\" role=\"dialog\" aria-labelledby=\"popover-example-dialog-header-1\" @submit.prevent>\n\t\t\t\t\t<h2 id=\"popover-example-dialog-header-1\">this is some content</h2>\n\t\t\t\t\t<p>\n\t\t\t\t\t\tLorem ipsum dolor sit amet, consectetur adipiscing elit. <br/>\n\t\t\t\t\t\tVestibulum eget placerat velit.\n\t\t\t\t\t</p>\n\t\t\t\t\t<label>\n\t\t\t\t\t\tLabel element\n\t\t\t\t\t\t<input type=\"text\" placeholder=\"input element\"/>\n\t\t\t\t\t</label>\n\t\t\t\t</form>\n\t\t\t</template>\n\t\t</NcPopover>\n\t</div>\n</template>\n```\n\n#### Without focus trap:\n\nThe [`focus-trap`](https://github.com/focus-trap/focus-trap) emits an error when used in a non-focusable element tree.\n\nThe prop `:focus-trap=\"false\"` help to prevent it when the default behavior is not relevant.\n\n```vue\n<template>\n\t<div style=\"display: flex\">\n\t\t<NcPopover :focus-trap=\"false\">\n\t\t\t<template #trigger>\n\t\t\t\t<NcButton>Click me!</NcButton>\n\t\t\t</template>\n\t\t\t<template>\n\t\t\t\tHi! 🚀\n\t\t\t</template>\n\t\t</NcPopover>\n\t</div>\n</template>\n```\n\n#### With passing props to `floating-vue`'s `Dropdown`:\n\n```vue\n<template>\n\t<div style=\"display: flex\">\n\t\t<NcPopover container=\"body\" :popper-hide-triggers=\"(triggers) => [...triggers, 'click']\" popup-role=\"dialog\">\n\t\t\t<template #trigger>\n\t\t\t\t<NcButton>I am the trigger</NcButton>\n\t\t\t</template>\n\t\t\t<template #default>\n\t\t\t\t<NcButton>Click on the button will close NcPopover</NcButton>\n\t\t\t</template>\n\t\t</NcPopover>\n\t</div>\n</template>\n```\n\n#### With a custom button in as a trigger:\n\nWhen `<NcButton>` is used as a `<NcPopover>` trigger, it injects required for a11y attributes to the button.\n\nIf you are using your own custom button as a trigger make sure to bind `attrs` from the trigger slot props.\nSee code example below.\n\n```vue\n<template>\n\t<div style=\"display: flex\">\n\t\t<NcPopover>\n\t\t\t<!-- Take \"attrs\" from the slot props -->\n\t\t\t<template #trigger=\"{ attrs }\">\n\t\t\t\t<!-- Bind attrs as the button attrs -->\n\t\t\t\t<button v-bind=\"attrs\">\n\t\t\t\t\tI am a custom button in the trigger\n\t\t\t\t</button>\n\t\t\t</template>\n\n\t\t\tHi! 🚀\n\t\t</NcPopover>\n\t</div>\n</template>\n```\n\n#### Provide role for the popover content\n\nFor accessibility reasons, popover should have a role. Provide it to the `popup-role` and make sure that the popover content is an element with the same role.\n\nSee: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-haspopup\n\n```vue\n<template>\n\t<div style=\"display: flex\">\n\t\t<!-- Provide popup role -->\n\t\t<NcPopover popup-role=\"dialog\">\n\t\t\t<template #trigger>\n\t\t\t\t<NcButton>Delete</NcButton>\n\t\t\t</template>\n\n\t\t\t<!-- Popover content should has the same role -->\n\t\t\t<div role=\"dialog\" aria-labelledby=\"popover-example-custom-role-1\" aria-modal=\"true\">\n\t\t\t\t<!-- This is not required but better to provide a label -->\n\t\t\t\t<header id=\"popover-example-custom-role-1\">\n\t\t\t\t\t<strong>Confirm remove</strong>\n\t\t\t\t</header>\n\t\t\t\t<NcButton type=\"danger\">Delete</NcButton>\n\t\t\t</div>\n\t\t</NcPopover>\n\t</div>\n</template>\n```\n</docs>\n\n<template>\n\t<Dropdown ref=\"popover\"\n\t\t:distance=\"10\"\n\t\t:arrow-padding=\"10\"\n\t\tv-bind=\"$attrs\"\n\t\t:no-auto-focus=\"true /* Handled by the focus trap */\"\n\t\t:popper-class=\"popoverBaseClass\"\n\t\t:shown=\"internalShown\"\n\t\tv-on=\"$listeners\"\n\t\t@update:shown=\"internalShown = $event\"\n\t\t@apply-show=\"afterShow\"\n\t\t@apply-hide=\"afterHide\">\n\t\t<NcPopoverTriggerProvider v-slot=\"slotProps\" :shown=\"internalShown\" :popup-role=\"popupRole\">\n\t\t\t<!-- This will be the popover target (for the events and position) -->\n\t\t\t<slot name=\"trigger\" v-bind=\"slotProps\" />\n\t\t</NcPopoverTriggerProvider>\n\n\t\t<!-- This will be the content of the popover -->\n\t\t<template #popper>\n\t\t\t<slot />\n\t\t</template>\n\t</Dropdown>\n</template>\n\n<script>\nimport Vue from 'vue'\nimport { Dropdown } from 'floating-vue'\nimport { createFocusTrap } from 'focus-trap'\nimport { getTrapStack } from '../../utils/focusTrap.js'\nimport NcPopoverTriggerProvider from './NcPopoverTriggerProvider.vue'\n\nexport default {\n\tname: 'NcPopover',\n\n\tcomponents: {\n\t\tDropdown,\n\t\tNcPopoverTriggerProvider,\n\t},\n\n\tinheritAttrs: false,\n\n\tprops: {\n\t\t/**\n\t\t * Show or hide the popper\n\t\t * @see https://floating-vue.starpad.dev/api/#shown\n\t\t */\n\t\tshown: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/**\n\t\t * Popup role\n\t\t * @see https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-haspopup#values\n\t\t */\n\t\tpopupRole: {\n\t\t\ttype: String,\n\t\t\tdefault: undefined,\n\t\t\tvalidator: (value) => ['menu', 'listbox', 'tree', 'grid', 'dialog', 'true'].includes(value),\n\t\t},\n\n\t\tpopoverBaseClass: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\t\t/**\n\t\t * Enable popover focus trap\n\t\t */\n\t\tfocusTrap: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: true,\n\t\t},\n\t\t/**\n\t\t * Set element to return focus to after focus trap deactivation\n\t\t *\n\t\t * @type {import('focus-trap').FocusTargetValueOrFalse}\n\t\t */\n\t\tsetReturnFocus: {\n\t\t\tdefault: undefined,\n\t\t\ttype: [HTMLElement, SVGElement, String, Boolean],\n\t\t},\n\t},\n\n\temits: [\n\t\t'after-show',\n\t\t'after-hide',\n\t\t/**\n\t\t * @see https://floating-vue.starpad.dev/api/#update-shown\n\t\t */\n\t\t'update:shown',\n\t],\n\n\tdata() {\n\t\treturn {\n\t\t\tinternalShown: this.shown,\n\t\t}\n\t},\n\n\twatch: {\n\t\tshown(value) {\n\t\t\tthis.internalShown = value\n\t\t},\n\n\t\tinternalShown(value) {\n\t\t\tthis.$emit('update:shown', value)\n\t\t},\n\t},\n\n\tmounted() {\n\t\tthis.checkTriggerA11y()\n\t},\n\n\tbeforeDestroy() {\n\t\tthis.clearFocusTrap()\n\t\tthis.clearEscapeStopPropagation()\n\t},\n\n\tmethods: {\n\t\t/**\n\t\t * Check if the trigger has all required a11y attributes.\n\t\t * Important to check custom trigger button.\n\t\t */\n\t\tcheckTriggerA11y() {\n\t\t\tif (window.OC?.debug) {\n\t\t\t\tconst triggerContainer = this.getPopoverTriggerContainerElement()\n\t\t\t\tconst requiredTriggerButton = triggerContainer.querySelector('[aria-expanded]')\n\t\t\t\tif (!requiredTriggerButton) {\n\t\t\t\t\tVue.util.warn('It looks like you are using a custom button as a <NcPopover> or other popover #trigger. If you are not using <NcButton> as a trigger, you need to bind attrs from the #trigger slot props to your custom button. See <NcPopover> docs for an example.')\n\t\t\t\t}\n\t\t\t}\n\t\t},\n\n\t\t/**\n\t\t * Remove incorrect aria-describedby attribute from the trigger.\n\t\t * @see https://github.com/Akryum/floating-vue/blob/8d4f7125aae0e3ea00ba4093d6d2001ab15058f1/packages/floating-vue/src/components/Popper.ts#L734\n\t\t */\n\t\tremoveFloatingVueAriaDescribedBy() {\n\t\t\t// When the popover is shown, floating-vue mutates the root elements of the trigger adding data-popper-shown and incorrect aria-describedby attributes.\n\t\t\tconst triggerContainer = this.getPopoverTriggerContainerElement()\n\t\t\tconst triggerElements = triggerContainer.querySelectorAll('[data-popper-shown]')\n\t\t\tfor (const el of triggerElements) {\n\t\t\t\tel.removeAttribute('aria-describedby')\n\t\t\t}\n\t\t},\n\n\t\t/**\n\t\t * @return {HTMLElement|undefined}\n\t\t */\n\t\tgetPopoverContentElement() {\n\t\t\treturn this.$refs.popover?.$refs.popperContent?.$el\n\t\t},\n\n\t\t/**\n\t\t * @return {HTMLElement|undefined}\n\t\t */\n\t\tgetPopoverTriggerContainerElement() {\n\t\t\t// TODO: Vue 3: should be\n\t\t\t// this.$refs.popover.$refs.popper.$refs.reference\n\t\t\treturn this.$refs.popover.$refs.reference\n\t\t},\n\n\t\t/**\n\t\t * Add focus trap for accessibility.\n\t\t */\n\t\tasync useFocusTrap() {\n\t\t\tawait this.$nextTick()\n\n\t\t\tif (!this.focusTrap) {\n\t\t\t\treturn\n\t\t\t}\n\n\t\t\tconst el = this.getPopoverContentElement()\n\n\t\t\tif (!el) {\n\t\t\t\treturn\n\t\t\t}\n\n\t\t\t// Init focus trap\n\t\t\tthis.$focusTrap = createFocusTrap(el, {\n\t\t\t\t// Prevents to lose focus using esc key\n\t\t\t\t// Focus will be release when popover be hide\n\t\t\t\tescapeDeactivates: false,\n\t\t\t\tallowOutsideClick: true,\n\t\t\t\tsetReturnFocus: this.setReturnFocus,\n\t\t\t\ttrapStack: getTrapStack(),\n\t\t\t})\n\t\t\tthis.$focusTrap.activate()\n\t\t},\n\n\t\t/**\n\t\t * Remove focus trap\n\t\t *\n\t\t * @param {object} options The configuration options for focusTrap\n\t\t */\n\t\tclearFocusTrap(options = {}) {\n\t\t\ttry {\n\t\t\t\tthis.$focusTrap?.deactivate(options)\n\t\t\t\tthis.$focusTrap = null\n\t\t\t} catch (err) {\n\t\t\t\tconsole.warn(err)\n\t\t\t}\n\t\t},\n\n\t\t/**\n\t\t * Add stopPropagation for Escape.\n\t\t * It prevents global Escape handling after closing popover.\n\t\t *\n\t\t * Manual event handling is used here instead of v-on because there is no direct access to the node.\n\t\t * Alternative - wrap <template #popover> in a div wrapper.\n\t\t */\n\t\taddEscapeStopPropagation() {\n\t\t\tconst el = this.getPopoverContentElement()\n\t\t\tel?.addEventListener('keydown', this.stopKeydownEscapeHandler)\n\t\t},\n\n\t\t/**\n\t\t * Remove stop Escape handler\n\t\t */\n\t\tclearEscapeStopPropagation() {\n\t\t\tconst el = this.getPopoverContentElement()\n\t\t\tel?.removeEventListener('keydown', this.stopKeydownEscapeHandler)\n\t\t},\n\n\t\t/**\n\t\t * @param {KeyboardEvent} event - native keydown event\n\t\t */\n\t\tstopKeydownEscapeHandler(event) {\n\t\t\tif (event.type === 'keydown' && event.key === 'Escape') {\n\t\t\t\tevent.stopPropagation()\n\t\t\t}\n\t\t},\n\n\t\tafterShow() {\n\t\t\tthis.removeFloatingVueAriaDescribedBy()\n\n\t\t\tthis.$nextTick(() => {\n\t\t\t\t/**\n\t\t\t\t * Triggered after the tooltip was visually displayed.\n\t\t\t\t *\n\t\t\t\t * This is different from the 'show' and 'apply-show' which\n\t\t\t\t * run earlier than this where there is no guarantee that the\n\t\t\t\t * tooltip is already visible and in the DOM.\n\t\t\t\t */\n\t\t\t\tthis.$emit('after-show')\n\t\t\t\tthis.useFocusTrap()\n\t\t\t\tthis.addEscapeStopPropagation()\n\t\t\t})\n\t\t},\n\t\tafterHide() {\n\t\t\t/**\n\t\t\t * Triggered after the tooltip was visually hidden.\n\t\t\t */\n\t\t\tthis.$emit('after-hide')\n\t\t\tthis.clearFocusTrap()\n\t\t\tthis.clearEscapeStopPropagation()\n\t\t},\n\t},\n}\n</script>\n\n<style lang=\"scss\">\n\n.resize-observer {\n\tposition:absolute;\n\ttop:0;\n\tleft:0;\n\tz-index:-1;\n\twidth:100%;\n\theight:100%;\n\tborder:none;\n\tbackground-color:transparent;\n\tpointer-events:none;\n\tdisplay:block;\n\toverflow:hidden;\n\topacity:0\n}\n\n.resize-observer object {\n\tdisplay:block;\n\tposition:absolute;\n\ttop:0;\n\tleft:0;\n\theight:100%;\n\twidth:100%;\n\toverflow:hidden;\n\tpointer-events:none;\n\tz-index:-1\n}\n\n$arrow-width: 10px;\n\n.v-popper--theme-dropdown {\n\t&.v-popper__popper {\n\t\tz-index: 100000;\n\t\ttop: 0;\n\t\tleft: 0;\n\t\tdisplay: block !important;\n\n\t\tfilter: drop-shadow(0 1px 10px var(--color-box-shadow));\n\n\t\t.v-popper__inner {\n\t\t\tpadding: 0;\n\t\t\tcolor: var(--color-main-text);\n\t\t\tborder-radius: var(--border-radius-large);\n\t\t\toverflow: hidden;\n\t\t\tbackground: var(--color-main-background);\n\t\t}\n\n\t\t.v-popper__arrow-container {\n\t\t\tposition: absolute;\n\t\t\tz-index: 1;\n\t\t\twidth: 0;\n\t\t\theight: 0;\n\t\t\tborder-style: solid;\n\t\t\tborder-color: transparent;\n\t\t\tborder-width: $arrow-width;\n\t\t}\n\n\t\t&[data-popper-placement^='top'] .v-popper__arrow-container {\n\t\t\tbottom: -$arrow-width;\n\t\t\tborder-bottom-width: 0;\n\t\t\tborder-top-color: var(--color-main-background);\n\t\t}\n\n\t\t&[data-popper-placement^='bottom'] .v-popper__arrow-container {\n\t\t\ttop: -$arrow-width;\n\t\t\tborder-top-width: 0;\n\t\t\tborder-bottom-color: var(--color-main-background);\n\t\t}\n\n\t\t&[data-popper-placement^='right'] .v-popper__arrow-container {\n\t\t\tleft: -$arrow-width;\n\t\t\tborder-left-width: 0;\n\t\t\tborder-right-color: var(--color-main-background);\n\t\t}\n\n\t\t&[data-popper-placement^='left'] .v-popper__arrow-container {\n\t\t\tright: -$arrow-width;\n\t\t\tborder-right-width: 0;\n\t\t\tborder-left-color: var(--color-main-background);\n\t\t}\n\n\t\t&[aria-hidden='true'] {\n\t\t\tvisibility: hidden;\n\t\t\ttransition: opacity var(--animation-quick), visibility var(--animation-quick);\n\t\t\topacity: 0;\n\t\t}\n\n\t\t&[aria-hidden='false'] {\n\t\t\tvisibility: visible;\n\t\t\ttransition: opacity var(--animation-quick);\n\t\t\topacity: 1;\n\t\t}\n\t}\n}\n\n</style>\n"],"names":["_sfc_main","defineComponent","Dropdown","NcPopoverTriggerProvider","value","Vue","triggerElements","el","createFocusTrap","getTrapStack","options","err","event"],"mappings":"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"}

package/dist/chunks/{NcRelatedResourcesPanel-f2UeB_6X.cjs → NcRelatedResourcesPanel-f1Up3M7Q.cjs}

@@ -1,8 +1,8 @@
-require('../assets/NcRelatedResourcesPanel-m3uf_nvH.css');
+require('../assets/NcRelatedResourcesPanel-oq5eMIoh.css');
 "use strict";
-const o = require("@nextcloud/axios"), l = require("@nextcloud/router"), a = require("../Components/NcButton.cjs"), s = require("./_l10n-Od-4xzJA.cjs"), n = require("./_plugin-vue2_normalizer-DCfUPqga.cjs"), u = (r) => r && r.__esModule ? r : { default: r }, c = /* @__PURE__ */ u(o);
+const o = require("@nextcloud/axios"), l = require("@nextcloud/router"), a = require("../Components/NcButton.cjs"), u = require("./autolink-gVCgJtXh.cjs"), s = require("./_l10n-AmjncLyn.cjs"), n = require("./_plugin-vue2_normalizer-DCfUPqga.cjs"), c = (r) => r && r.__esModule ? r : { default: r }, d = /* @__PURE__ */ c(o);
 s.register(s.t31);
-const d = {
+const h = {
   name: "NcResource",
   components: {
     NcButton: a
@@ -26,31 +26,36 @@ const d = {
       labelTranslated: s.t('Open link to "{resourceName}"', { resourceName: this.name })
     };
   },
+  computed: {
+    route() {
+      return u.getRoute(this.$router, this.url);
+    }
+  },
   methods: {
     t: s.t
   }
 };
 var f = function() {
   var e = this, t = e._self._c;
-  return t("li", { staticClass: "resource" }, [t("NcButton", { staticClass: "resource__button", attrs: { "aria-label": e.labelTranslated, type: "tertiary", href: e.url }, scopedSlots: e._u([{ key: "icon", fn: function() {
+  return t("li", { staticClass: "resource" }, [t("NcButton", { staticClass: "resource__button", attrs: { "aria-label": e.labelTranslated, type: "tertiary", to: e.route, href: e.route ? null : e.url }, scopedSlots: e._u([{ key: "icon", fn: function() {
     return [t("div", { staticClass: "resource__icon" }, [t("img", { attrs: { src: e.icon } })])];
   }, proxy: !0 }]) }, [e._v(" " + e._s(e.name) + " ")])], 1);
-}, h = [], p = /* @__PURE__ */ n.normalizeComponent(
-  d,
-  f,
+}, p = [], _ = /* @__PURE__ */ n.normalizeComponent(
   h,
+  f,
+  p,
   !1,
   null,
-  "1a960bef",
+  "dd53e5b9",
   null,
   null
 );
-const _ = p.exports;
+const m = _.exports;
 s.register(s.t8);
-const m = {
+const y = {
   name: "NcRelatedResourcesPanel",
   components: {
-    NcResource: _
+    NcResource: m
   },
   props: {
     /**
@@ -170,7 +175,7 @@ const m = {
       if (!(!this.appEnabled || !this.hasResourceInfo)) {
         this.loading = !0, this.error = null, this.resources = [];
         try {
-          const r = await c.default.get(this.url);
+          const r = await d.default.get(this.url);
           this.resources = r.data.ocs?.data;
         } catch (r) {
           this.error = r, console.error(r);
@@ -181,20 +186,20 @@ const m = {
     }
   }
 };
-var y = function() {
+var g = function() {
   var e = this, t = e._self._c;
   return e.appEnabled && e.isVisible ? t("div", { staticClass: "related-resources" }, [t("div", { staticClass: "related-resources__header" }, [t("h5", [e._v(e._s(e.header))]), t("p", [e._v(e._s(e.subline))])]), e._l(e.resources, function(i) {
     return t("NcResource", { key: i.itemId, staticClass: "related-resources__entry", attrs: { icon: i.icon, name: i.title, url: i.url } });
   })], 2) : e._e();
-}, g = [], R = /* @__PURE__ */ n.normalizeComponent(
-  m,
+}, R = [], v = /* @__PURE__ */ n.normalizeComponent(
   y,
   g,
+  R,
   !1,
   null,
   "dc5c8227",
   null,
   null
 );
-const v = R.exports;
-exports.NcRelatedResourcesPanel = v;
+const I = v.exports;
+exports.NcRelatedResourcesPanel = I;

package/dist/chunks/NcRelatedResourcesPanel-f1Up3M7Q.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"NcRelatedResourcesPanel-f1Up3M7Q.cjs","sources":["../../src/components/NcRelatedResourcesPanel/NcResource.vue","../../src/components/NcRelatedResourcesPanel/NcRelatedResourcesPanel.vue"],"sourcesContent":["<!--\n  - @copyright 2022 Christopher Ng <chrng8@gmail.com>\n  -\n  - @author Christopher Ng <chrng8@gmail.com>\n  -\n  - @license AGPL-3.0-or-later\n  -\n  - This program is free software: you can redistribute it and/or modify\n  - it under the terms of the GNU Affero General Public License as\n  - published by the Free Software Foundation, either version 3 of the\n  - License, or (at your option) any later version.\n  -\n  - This program is distributed in the hope that it will be useful,\n  - but WITHOUT ANY WARRANTY; without even the implied warranty of\n  - MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the\n  - GNU Affero General Public License for more details.\n  -\n  - You should have received a copy of the GNU Affero General Public License\n  - along with this program. If not, see <http://www.gnu.org/licenses/>.\n  -\n-->\n\n<template>\n\t<li class=\"resource\">\n\t\t<NcButton class=\"resource__button\"\n\t\t\t:aria-label=\"labelTranslated\"\n\t\t\ttype=\"tertiary\"\n\t\t\t:to=\"route\"\n\t\t\t:href=\"route ? null : url\">\n\t\t\t<template #icon>\n\t\t\t\t<div class=\"resource__icon\">\n\t\t\t\t\t<img :src=\"icon\">\n\t\t\t\t</div>\n\t\t\t</template>\n\t\t\t{{ name }}\n\t\t</NcButton>\n\t</li>\n</template>\n\n<script>\nimport NcButton from '../NcButton/index.js'\n\nimport { getRoute } from '../NcRichText/autolink.js'\nimport { t } from '../../l10n.js'\n\nexport default {\n\tname: 'NcResource',\n\n\tcomponents: {\n\t\tNcButton,\n\t},\n\n\tprops: {\n\t\ticon: {\n\t\t\ttype: String,\n\t\t\trequired: true,\n\t\t},\n\t\tname: {\n\t\t\ttype: String,\n\t\t\trequired: true,\n\t\t},\n\t\turl: {\n\t\t\ttype: String,\n\t\t\trequired: true,\n\t\t},\n\t},\n\n\tdata() {\n\t\treturn {\n\t\t\tlabelTranslated: t('Open link to \"{resourceName}\"', { resourceName: this.name }),\n\t\t}\n\t},\n\n\tcomputed: {\n\t\troute() {\n\t\t\treturn getRoute(this.$router, this.url)\n\t\t},\n\t},\n\n\tmethods: {\n\t\tt,\n\t},\n}\n</script>\n\n<style lang=\"scss\" scoped>\n.resource {\n\tdisplay: flex;\n\talign-items: center;\n\theight: 44px;\n\n\t// Override default NcButton styles\n\t&__button {\n\t\twidth: 100% !important;\n\t\tjustify-content: flex-start !important;\n\t\tpadding: 0 !important;\n\n\t\t&:deep {\n\t\t\t.button-vue__wrapper {\n\t\t\t\tjustify-content: flex-start !important;\n\n\t\t\t\t.button-vue__text {\n\t\t\t\t\tfont-weight: normal !important;\n\t\t\t\t\tmargin-left: 2px !important;\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t}\n\n\t&__icon {\n\t\twidth: 32px;\n\t\theight: 32px;\n\t\tbackground-color: var(--color-text-maxcontrast);\n\t\tborder-radius: 50%;\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tjustify-content: center;\n\n\t\timg {\n\t\t\twidth: 16px;\n\t\t\theight: 16px;\n\t\t\tfilter: var(--background-invert-if-dark);\n\t\t}\n\t}\n}\n</style>\n","<!--\n  - @copyright 2022 Christopher Ng <chrng8@gmail.com>\n  -\n  - @author Christopher Ng <chrng8@gmail.com>\n  -\n  - @license AGPL-3.0-or-later\n  -\n  - This program is free software: you can redistribute it and/or modify\n  - it under the terms of the GNU Affero General Public License as\n  - published by the Free Software Foundation, either version 3 of the\n  - License, or (at your option) any later version.\n  -\n  - This program is distributed in the hope that it will be useful,\n  - but WITHOUT ANY WARRANTY; without even the implied warranty of\n  - MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the\n  - GNU Affero General Public License for more details.\n  -\n  - You should have received a copy of the GNU Affero General Public License\n  - along with this program. If not, see <http://www.gnu.org/licenses/>.\n  -\n-->\n\n<docs>\n### Usage\n\nUse this component to display the related resources of a given item.\n\n```\n<template>\n\t<NcRelatedResourcesPanel provider-id=\"talk\"\n\t\theader=\"Related resources for talk\"\n\t\t:item-id=\"conversationId\" />\n</template>\n\n<script>\nexport default {\n\tdata() {\n\t\treturn {\n\t\t\tconversationId: 1,\n\t\t}\n\t},\n}\n</script>\n```\n</docs>\n\n<template>\n\t<div v-if=\"appEnabled && isVisible\" class=\"related-resources\">\n\t\t<div class=\"related-resources__header\">\n\t\t\t<h5>{{ header }}</h5>\n\t\t\t<p>{{ subline }}</p>\n\t\t</div>\n\n\t\t<NcResource v-for=\"resource in resources\"\n\t\t\t:key=\"resource.itemId\"\n\t\t\tclass=\"related-resources__entry\"\n\t\t\t:icon=\"resource.icon\"\n\t\t\t:name=\"resource.title\"\n\t\t\t:url=\"resource.url\" />\n\t</div>\n</template>\n\n<script>\nimport axios from '@nextcloud/axios'\nimport { generateOcsUrl } from '@nextcloud/router'\n\nimport NcResource from './NcResource.vue'\n\nimport { t } from '../../l10n.js'\n\nexport default {\n\tname: 'NcRelatedResourcesPanel',\n\n\tcomponents: {\n\t\tNcResource,\n\t},\n\n\tprops: {\n\t\t/**\n\t\t * The provider id implemented with `\\OCA\\RelatedResources\\IRelatedResourceProvider::getProviderId()`\n\t\t */\n\t\tproviderId: {\n\t\t\ttype: String,\n\t\t\tdefault: null,\n\t\t},\n\t\t/**\n\t\t * The item id which uniquely identities the e.g. Calendar event, Deck board, file, Talk room, etc.\n\t\t */\n\t\titemId: {\n\t\t\ttype: [String, Number],\n\t\t\tdefault: null,\n\t\t},\n\t\t/**\n\t\t * Limits to specific resource type. i.e. any provider id implemented with `\\OCA\\RelatedResources\\IRelatedResourceProvider::getProviderId()`\n\t\t */\n\t\tresourceType: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\t\t/**\n\t\t * Set the maximum number of resources to load\n\t\t */\n\t\tlimit: {\n\t\t\ttype: Number,\n\t\t\tdefault: 0,\n\t\t},\n\t\t/**\n\t\t * Only used by the files sidebar\n\t\t *\n\t\t * File info is passed when registered with `OCA.Sharing.ShareTabSections.registerSection()`\n\t\t */\n\t\tfileInfo: {\n\t\t\ttype: Object,\n\t\t\tdefault: null,\n\t\t},\n\t\t/**\n\t\t * Make the header name dynamic\n\t\t */\n\t\theader: {\n\t\t\ttype: String,\n\t\t\tdefault: t('Related resources'),\n\t\t},\n\t\tdescription: {\n\t\t\ttype: String,\n\t\t\tdefault: t('Anything shared with the same group of people will show up here'),\n\t\t},\n\t\t/**\n\t\t * If this element is used on a primary element set to true for primary styling.\n\t\t */\n\t\tprimary: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\t},\n\n\temits: [\n\t\t'has-error',\n\t\t'has-resources',\n\t],\n\n\tdata() {\n\t\treturn {\n\t\t\tappEnabled: OC?.appswebroots?.related_resources !== undefined,\n\t\t\tloading: false,\n\t\t\terror: null,\n\t\t\tresources: [],\n\t\t}\n\t},\n\n\tcomputed: {\n\t\tisVisible() {\n\t\t\tif (this.loading) {\n\t\t\t\treturn false\n\t\t\t}\n\t\t\treturn this.error ?? this.resources.length > 0\n\t\t},\n\t\tsubline() {\n\t\t\tif (this.error) {\n\t\t\t\treturn t('Error getting related resources. Please contact your system administrator if you have any questions.')\n\t\t\t}\n\t\t\treturn this.description\n\t\t},\n\n\t\thasResourceInfo() {\n\t\t\tif (this.providerId !== null && this.itemId !== null) {\n\t\t\t\treturn true\n\t\t\t}\n\t\t\tif (this.fileInfo !== null) {\n\t\t\t\treturn true\n\t\t\t}\n\t\t\treturn false\n\t\t},\n\n\t\tisFiles() {\n\t\t\treturn this.fileInfo?.id !== undefined\n\t\t},\n\n\t\turl() {\n\t\t\tlet providerId = null\n\t\t\tlet itemId = null\n\n\t\t\tif (this.isFiles) {\n\t\t\t\tproviderId = 'files'\n\t\t\t\titemId = this.fileInfo.id\n\t\t\t} else {\n\t\t\t\tproviderId = this.providerId\n\t\t\t\titemId = this.itemId\n\t\t\t}\n\n\t\t\treturn generateOcsUrl('/apps/related_resources/related/{providerId}?itemId={itemId}&resourceType={resourceType}&limit={limit}&format=json', {\n\t\t\t\tproviderId,\n\t\t\t\titemId,\n\t\t\t\tresourceType: this.resourceType,\n\t\t\t\tlimit: this.limit,\n\t\t\t})\n\t\t},\n\t},\n\n\twatch: {\n\t\tproviderId() {\n\t\t\tthis.fetchRelatedResources()\n\t\t},\n\t\titemId() {\n\t\t\tthis.fetchRelatedResources()\n\t\t},\n\t\tfileInfo() {\n\t\t\tthis.fetchRelatedResources()\n\t\t},\n\t\terror(error) {\n\t\t\t/**\n\t\t\t * Emitted when the error value changes\n\t\t\t *\n\t\t\t * @type {boolean}\n\t\t\t */\n\t\t\tthis.$emit('has-error', Boolean(error))\n\t\t},\n\t\tresources(resources) {\n\t\t\t/**\n\t\t\t * Emitted when the resources value changes\n\t\t\t *\n\t\t\t * @type {boolean}\n\t\t\t */\n\t\t\tthis.$emit('has-resources', resources.length > 0)\n\t\t},\n\t},\n\n\tcreated() {\n\t\tthis.fetchRelatedResources()\n\t},\n\n\tmethods: {\n\t\tt,\n\t\tasync fetchRelatedResources() {\n\t\t\tif (!this.appEnabled || !this.hasResourceInfo) {\n\t\t\t\treturn\n\t\t\t}\n\n\t\t\tthis.loading = true\n\t\t\tthis.error = null\n\t\t\tthis.resources = []\n\t\t\ttry {\n\t\t\t\tconst response = await axios.get(this.url)\n\t\t\t\tthis.resources = response.data.ocs?.data\n\t\t\t} catch (e) {\n\t\t\t\tthis.error = e\n\t\t\t\tconsole.error(e)\n\t\t\t} finally {\n\t\t\t\tthis.loading = false\n\t\t\t}\n\t\t},\n\t},\n}\n</script>\n\n<style lang=\"scss\" scoped>\n.related-resources {\n\t&__header {\n\t\tmargin: 0 0 10px 46px;\n\n\t\th5 {\n\t\t\tfont-weight: bold;\n\t\t}\n\n\t\tp {\n\t\t\tcolor: var(--color-text-maxcontrast);\n\t\t}\n\t}\n}\n</style>\n"],"names":["_sfc_main","NcButton","t","getRoute","NcResource","providerId","itemId","generateOcsUrl","error","resources","response","axios","e"],"mappings":"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"}

package/dist/chunks/{NcRelatedResourcesPanel-EDvgZgjQ.mjs → NcRelatedResourcesPanel-zXNE9qiS.mjs}

@@ -1,11 +1,12 @@
-import '../assets/NcRelatedResourcesPanel-m3uf_nvH.css';
-import o from "@nextcloud/axios";
+import '../assets/NcRelatedResourcesPanel-oq5eMIoh.css';
+import a from "@nextcloud/axios";
 import { generateOcsUrl as l } from "@nextcloud/router";
 import u from "../Components/NcButton.mjs";
-import { r as n, C as c, a as s, D as d } from "./_l10n-FmsZpnE4.mjs";
-import { n as a } from "./_plugin-vue2_normalizer-u6G_3nkj.mjs";
-n(c);
-const f = {
+import { g as c } from "./autolink-oKM43mOC.mjs";
+import { r as o, C as d, a as s, D as f } from "./_l10n-Y2fvkVoK.mjs";
+import { n } from "./_plugin-vue2_normalizer-u6G_3nkj.mjs";
+o(d);
+const p = {
   name: "NcResource",
   components: {
     NcButton: u
@@ -29,31 +30,36 @@ const f = {
       labelTranslated: s('Open link to "{resourceName}"', { resourceName: this.name })
     };
   },
+  computed: {
+    route() {
+      return c(this.$router, this.url);
+    }
+  },
   methods: {
     t: s
   }
 };
-var p = function() {
+var h = function() {
   var e = this, t = e._self._c;
-  return t("li", { staticClass: "resource" }, [t("NcButton", { staticClass: "resource__button", attrs: { "aria-label": e.labelTranslated, type: "tertiary", href: e.url }, scopedSlots: e._u([{ key: "icon", fn: function() {
+  return t("li", { staticClass: "resource" }, [t("NcButton", { staticClass: "resource__button", attrs: { "aria-label": e.labelTranslated, type: "tertiary", to: e.route, href: e.route ? null : e.url }, scopedSlots: e._u([{ key: "icon", fn: function() {
     return [t("div", { staticClass: "resource__icon" }, [t("img", { attrs: { src: e.icon } })])];
   }, proxy: !0 }]) }, [e._v(" " + e._s(e.name) + " ")])], 1);
-}, h = [], m = /* @__PURE__ */ a(
-  f,
+}, m = [], _ = /* @__PURE__ */ n(
   p,
   h,
+  m,
   !1,
   null,
-  "1a960bef",
+  "dd53e5b9",
   null,
   null
 );
-const _ = m.exports;
-n(d);
-const y = {
+const y = _.exports;
+o(f);
+const g = {
   name: "NcRelatedResourcesPanel",
   components: {
-    NcResource: _
+    NcResource: y
   },
   props: {
     /**
@@ -173,7 +179,7 @@ const y = {
       if (!(!this.appEnabled || !this.hasResourceInfo)) {
         this.loading = !0, this.error = null, this.resources = [];
         try {
-          const r = await o.get(this.url);
+          const r = await a.get(this.url);
           this.resources = r.data.ocs?.data;
         } catch (r) {
           this.error = r, console.error(r);
@@ -189,17 +195,17 @@ var v = function() {
   return e.appEnabled && e.isVisible ? t("div", { staticClass: "related-resources" }, [t("div", { staticClass: "related-resources__header" }, [t("h5", [e._v(e._s(e.header))]), t("p", [e._v(e._s(e.subline))])]), e._l(e.resources, function(i) {
     return t("NcResource", { key: i.itemId, staticClass: "related-resources__entry", attrs: { icon: i.icon, name: i.title, url: i.url } });
   })], 2) : e._e();
-}, g = [], R = /* @__PURE__ */ a(
-  y,
-  v,
+}, R = [], I = /* @__PURE__ */ n(
   g,
+  v,
+  R,
   !1,
   null,
   "dc5c8227",
   null,
   null
 );
-const T = R.exports;
+const w = I.exports;
 export {
-  T as N
+  w as N
 };

package/dist/chunks/NcRelatedResourcesPanel-zXNE9qiS.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"NcRelatedResourcesPanel-zXNE9qiS.mjs","sources":["../../src/components/NcRelatedResourcesPanel/NcResource.vue","../../src/components/NcRelatedResourcesPanel/NcRelatedResourcesPanel.vue"],"sourcesContent":["<!--\n  - @copyright 2022 Christopher Ng <chrng8@gmail.com>\n  -\n  - @author Christopher Ng <chrng8@gmail.com>\n  -\n  - @license AGPL-3.0-or-later\n  -\n  - This program is free software: you can redistribute it and/or modify\n  - it under the terms of the GNU Affero General Public License as\n  - published by the Free Software Foundation, either version 3 of the\n  - License, or (at your option) any later version.\n  -\n  - This program is distributed in the hope that it will be useful,\n  - but WITHOUT ANY WARRANTY; without even the implied warranty of\n  - MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the\n  - GNU Affero General Public License for more details.\n  -\n  - You should have received a copy of the GNU Affero General Public License\n  - along with this program. If not, see <http://www.gnu.org/licenses/>.\n  -\n-->\n\n<template>\n\t<li class=\"resource\">\n\t\t<NcButton class=\"resource__button\"\n\t\t\t:aria-label=\"labelTranslated\"\n\t\t\ttype=\"tertiary\"\n\t\t\t:to=\"route\"\n\t\t\t:href=\"route ? null : url\">\n\t\t\t<template #icon>\n\t\t\t\t<div class=\"resource__icon\">\n\t\t\t\t\t<img :src=\"icon\">\n\t\t\t\t</div>\n\t\t\t</template>\n\t\t\t{{ name }}\n\t\t</NcButton>\n\t</li>\n</template>\n\n<script>\nimport NcButton from '../NcButton/index.js'\n\nimport { getRoute } from '../NcRichText/autolink.js'\nimport { t } from '../../l10n.js'\n\nexport default {\n\tname: 'NcResource',\n\n\tcomponents: {\n\t\tNcButton,\n\t},\n\n\tprops: {\n\t\ticon: {\n\t\t\ttype: String,\n\t\t\trequired: true,\n\t\t},\n\t\tname: {\n\t\t\ttype: String,\n\t\t\trequired: true,\n\t\t},\n\t\turl: {\n\t\t\ttype: String,\n\t\t\trequired: true,\n\t\t},\n\t},\n\n\tdata() {\n\t\treturn {\n\t\t\tlabelTranslated: t('Open link to \"{resourceName}\"', { resourceName: this.name }),\n\t\t}\n\t},\n\n\tcomputed: {\n\t\troute() {\n\t\t\treturn getRoute(this.$router, this.url)\n\t\t},\n\t},\n\n\tmethods: {\n\t\tt,\n\t},\n}\n</script>\n\n<style lang=\"scss\" scoped>\n.resource {\n\tdisplay: flex;\n\talign-items: center;\n\theight: 44px;\n\n\t// Override default NcButton styles\n\t&__button {\n\t\twidth: 100% !important;\n\t\tjustify-content: flex-start !important;\n\t\tpadding: 0 !important;\n\n\t\t&:deep {\n\t\t\t.button-vue__wrapper {\n\t\t\t\tjustify-content: flex-start !important;\n\n\t\t\t\t.button-vue__text {\n\t\t\t\t\tfont-weight: normal !important;\n\t\t\t\t\tmargin-left: 2px !important;\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t}\n\n\t&__icon {\n\t\twidth: 32px;\n\t\theight: 32px;\n\t\tbackground-color: var(--color-text-maxcontrast);\n\t\tborder-radius: 50%;\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tjustify-content: center;\n\n\t\timg {\n\t\t\twidth: 16px;\n\t\t\theight: 16px;\n\t\t\tfilter: var(--background-invert-if-dark);\n\t\t}\n\t}\n}\n</style>\n","<!--\n  - @copyright 2022 Christopher Ng <chrng8@gmail.com>\n  -\n  - @author Christopher Ng <chrng8@gmail.com>\n  -\n  - @license AGPL-3.0-or-later\n  -\n  - This program is free software: you can redistribute it and/or modify\n  - it under the terms of the GNU Affero General Public License as\n  - published by the Free Software Foundation, either version 3 of the\n  - License, or (at your option) any later version.\n  -\n  - This program is distributed in the hope that it will be useful,\n  - but WITHOUT ANY WARRANTY; without even the implied warranty of\n  - MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the\n  - GNU Affero General Public License for more details.\n  -\n  - You should have received a copy of the GNU Affero General Public License\n  - along with this program. If not, see <http://www.gnu.org/licenses/>.\n  -\n-->\n\n<docs>\n### Usage\n\nUse this component to display the related resources of a given item.\n\n```\n<template>\n\t<NcRelatedResourcesPanel provider-id=\"talk\"\n\t\theader=\"Related resources for talk\"\n\t\t:item-id=\"conversationId\" />\n</template>\n\n<script>\nexport default {\n\tdata() {\n\t\treturn {\n\t\t\tconversationId: 1,\n\t\t}\n\t},\n}\n</script>\n```\n</docs>\n\n<template>\n\t<div v-if=\"appEnabled && isVisible\" class=\"related-resources\">\n\t\t<div class=\"related-resources__header\">\n\t\t\t<h5>{{ header }}</h5>\n\t\t\t<p>{{ subline }}</p>\n\t\t</div>\n\n\t\t<NcResource v-for=\"resource in resources\"\n\t\t\t:key=\"resource.itemId\"\n\t\t\tclass=\"related-resources__entry\"\n\t\t\t:icon=\"resource.icon\"\n\t\t\t:name=\"resource.title\"\n\t\t\t:url=\"resource.url\" />\n\t</div>\n</template>\n\n<script>\nimport axios from '@nextcloud/axios'\nimport { generateOcsUrl } from '@nextcloud/router'\n\nimport NcResource from './NcResource.vue'\n\nimport { t } from '../../l10n.js'\n\nexport default {\n\tname: 'NcRelatedResourcesPanel',\n\n\tcomponents: {\n\t\tNcResource,\n\t},\n\n\tprops: {\n\t\t/**\n\t\t * The provider id implemented with `\\OCA\\RelatedResources\\IRelatedResourceProvider::getProviderId()`\n\t\t */\n\t\tproviderId: {\n\t\t\ttype: String,\n\t\t\tdefault: null,\n\t\t},\n\t\t/**\n\t\t * The item id which uniquely identities the e.g. Calendar event, Deck board, file, Talk room, etc.\n\t\t */\n\t\titemId: {\n\t\t\ttype: [String, Number],\n\t\t\tdefault: null,\n\t\t},\n\t\t/**\n\t\t * Limits to specific resource type. i.e. any provider id implemented with `\\OCA\\RelatedResources\\IRelatedResourceProvider::getProviderId()`\n\t\t */\n\t\tresourceType: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\t\t/**\n\t\t * Set the maximum number of resources to load\n\t\t */\n\t\tlimit: {\n\t\t\ttype: Number,\n\t\t\tdefault: 0,\n\t\t},\n\t\t/**\n\t\t * Only used by the files sidebar\n\t\t *\n\t\t * File info is passed when registered with `OCA.Sharing.ShareTabSections.registerSection()`\n\t\t */\n\t\tfileInfo: {\n\t\t\ttype: Object,\n\t\t\tdefault: null,\n\t\t},\n\t\t/**\n\t\t * Make the header name dynamic\n\t\t */\n\t\theader: {\n\t\t\ttype: String,\n\t\t\tdefault: t('Related resources'),\n\t\t},\n\t\tdescription: {\n\t\t\ttype: String,\n\t\t\tdefault: t('Anything shared with the same group of people will show up here'),\n\t\t},\n\t\t/**\n\t\t * If this element is used on a primary element set to true for primary styling.\n\t\t */\n\t\tprimary: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\t},\n\n\temits: [\n\t\t'has-error',\n\t\t'has-resources',\n\t],\n\n\tdata() {\n\t\treturn {\n\t\t\tappEnabled: OC?.appswebroots?.related_resources !== undefined,\n\t\t\tloading: false,\n\t\t\terror: null,\n\t\t\tresources: [],\n\t\t}\n\t},\n\n\tcomputed: {\n\t\tisVisible() {\n\t\t\tif (this.loading) {\n\t\t\t\treturn false\n\t\t\t}\n\t\t\treturn this.error ?? this.resources.length > 0\n\t\t},\n\t\tsubline() {\n\t\t\tif (this.error) {\n\t\t\t\treturn t('Error getting related resources. Please contact your system administrator if you have any questions.')\n\t\t\t}\n\t\t\treturn this.description\n\t\t},\n\n\t\thasResourceInfo() {\n\t\t\tif (this.providerId !== null && this.itemId !== null) {\n\t\t\t\treturn true\n\t\t\t}\n\t\t\tif (this.fileInfo !== null) {\n\t\t\t\treturn true\n\t\t\t}\n\t\t\treturn false\n\t\t},\n\n\t\tisFiles() {\n\t\t\treturn this.fileInfo?.id !== undefined\n\t\t},\n\n\t\turl() {\n\t\t\tlet providerId = null\n\t\t\tlet itemId = null\n\n\t\t\tif (this.isFiles) {\n\t\t\t\tproviderId = 'files'\n\t\t\t\titemId = this.fileInfo.id\n\t\t\t} else {\n\t\t\t\tproviderId = this.providerId\n\t\t\t\titemId = this.itemId\n\t\t\t}\n\n\t\t\treturn generateOcsUrl('/apps/related_resources/related/{providerId}?itemId={itemId}&resourceType={resourceType}&limit={limit}&format=json', {\n\t\t\t\tproviderId,\n\t\t\t\titemId,\n\t\t\t\tresourceType: this.resourceType,\n\t\t\t\tlimit: this.limit,\n\t\t\t})\n\t\t},\n\t},\n\n\twatch: {\n\t\tproviderId() {\n\t\t\tthis.fetchRelatedResources()\n\t\t},\n\t\titemId() {\n\t\t\tthis.fetchRelatedResources()\n\t\t},\n\t\tfileInfo() {\n\t\t\tthis.fetchRelatedResources()\n\t\t},\n\t\terror(error) {\n\t\t\t/**\n\t\t\t * Emitted when the error value changes\n\t\t\t *\n\t\t\t * @type {boolean}\n\t\t\t */\n\t\t\tthis.$emit('has-error', Boolean(error))\n\t\t},\n\t\tresources(resources) {\n\t\t\t/**\n\t\t\t * Emitted when the resources value changes\n\t\t\t *\n\t\t\t * @type {boolean}\n\t\t\t */\n\t\t\tthis.$emit('has-resources', resources.length > 0)\n\t\t},\n\t},\n\n\tcreated() {\n\t\tthis.fetchRelatedResources()\n\t},\n\n\tmethods: {\n\t\tt,\n\t\tasync fetchRelatedResources() {\n\t\t\tif (!this.appEnabled || !this.hasResourceInfo) {\n\t\t\t\treturn\n\t\t\t}\n\n\t\t\tthis.loading = true\n\t\t\tthis.error = null\n\t\t\tthis.resources = []\n\t\t\ttry {\n\t\t\t\tconst response = await axios.get(this.url)\n\t\t\t\tthis.resources = response.data.ocs?.data\n\t\t\t} catch (e) {\n\t\t\t\tthis.error = e\n\t\t\t\tconsole.error(e)\n\t\t\t} finally {\n\t\t\t\tthis.loading = false\n\t\t\t}\n\t\t},\n\t},\n}\n</script>\n\n<style lang=\"scss\" scoped>\n.related-resources {\n\t&__header {\n\t\tmargin: 0 0 10px 46px;\n\n\t\th5 {\n\t\t\tfont-weight: bold;\n\t\t}\n\n\t\tp {\n\t\t\tcolor: var(--color-text-maxcontrast);\n\t\t}\n\t}\n}\n</style>\n"],"names":["_sfc_main","NcButton","t","getRoute","NcResource","providerId","itemId","generateOcsUrl","error","resources","response","axios","e"],"mappings":"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"}