@nextcloud/vue 8.6.0 → 9.0.0-alpha.1

package/dist/chunks/NcRelatedResourcesPanel-NqDuh_7F.mjs

@@ -0,0 +1,220 @@
+import "../assets/NcRelatedResourcesPanel-i1-7CClp.css";
+import y from "@nextcloud/axios";
+import { generateOcsUrl as g } from "@nextcloud/router";
+import { N as I } from "./NcButton-YOXv3gFY.mjs";
+import { r as p, C as R, a as t, D as N } from "./_l10n-uuAvfQgY.mjs";
+import { resolveComponent as m, openBlock as l, createElementBlock as u, createVNode as b, withCtx as h, createElementVNode as o, createTextVNode as v, toDisplayString as d, Fragment as S, renderList as B, createBlock as T, createCommentVNode as w } from "vue";
+import { _ as f } from "./_plugin-vue_export-helper-hUChTQA_.mjs";
+p(R);
+const x = {
+  name: "NcResource",
+  components: {
+    NcButton: I
+  },
+  props: {
+    icon: {
+      type: String,
+      required: !0
+    },
+    name: {
+      type: String,
+      required: !0
+    },
+    url: {
+      type: String,
+      required: !0
+    }
+  },
+  data() {
+    return {
+      labelTranslated: t('Open link to "{resourceName}"', { resourceName: this.name })
+    };
+  },
+  methods: {
+    t
+  }
+}, k = { class: "resource" }, E = { class: "resource__icon" }, V = ["src"];
+function C(e, r, s, _, i, a) {
+  const c = m("NcButton");
+  return l(), u("li", k, [
+    b(c, {
+      class: "resource__button",
+      "aria-label": i.labelTranslated,
+      type: "tertiary",
+      href: s.url
+    }, {
+      icon: h(() => [
+        o("div", E, [
+          o("img", { src: s.icon }, null, 8, V)
+        ])
+      ]),
+      default: h(() => [
+        v(" " + d(s.name), 1)
+      ]),
+      _: 1
+    }, 8, ["aria-label", "href"])
+  ]);
+}
+const $ = /* @__PURE__ */ f(x, [["render", C], ["__scopeId", "data-v-e4d1c077"]]);
+p(N);
+const q = {
+  name: "NcRelatedResourcesPanel",
+  components: {
+    NcResource: $
+  },
+  props: {
+    /**
+     * The provider id implemented with `\OCA\RelatedResources\IRelatedResourceProvider::getProviderId()`
+     */
+    providerId: {
+      type: String,
+      default: null
+    },
+    /**
+     * The item id which uniquely identities the e.g. Calendar event, Deck board, file, Talk room, etc.
+     */
+    itemId: {
+      type: [String, Number],
+      default: null
+    },
+    /**
+     * Limits to specific resource type. i.e. any provider id implemented with `\OCA\RelatedResources\IRelatedResourceProvider::getProviderId()`
+     */
+    resourceType: {
+      type: String,
+      default: ""
+    },
+    /**
+     * Set the maximum number of resources to load
+     */
+    limit: {
+      type: Number,
+      default: 0
+    },
+    /**
+     * Only used by the files sidebar
+     *
+     * File info is passed when registered with `OCA.Sharing.ShareTabSections.registerSection()`
+     */
+    fileInfo: {
+      type: Object,
+      default: null
+    },
+    /**
+     * Make the header name dynamic
+     */
+    header: {
+      type: String,
+      default: t("Related resources")
+    },
+    description: {
+      type: String,
+      default: t("Anything shared with the same group of people will show up here")
+    },
+    /**
+     * If this element is used on a primary element set to true for primary styling.
+     */
+    primary: {
+      type: Boolean,
+      default: !1
+    }
+  },
+  emits: [
+    "has-error",
+    "has-resources"
+  ],
+  data() {
+    var e;
+    return {
+      appEnabled: ((e = OC == null ? void 0 : OC.appswebroots) == null ? void 0 : e.related_resources) !== void 0,
+      loading: !1,
+      error: null,
+      resources: []
+    };
+  },
+  computed: {
+    isVisible() {
+      var e;
+      return this.loading ? !1 : (e = this.error) != null ? e : this.resources.length > 0;
+    },
+    subline() {
+      return this.error ? t("Error getting related resources. Please contact your system administrator if you have any questions.") : this.description;
+    },
+    hasResourceInfo() {
+      return this.providerId !== null && this.itemId !== null || this.fileInfo !== null;
+    },
+    isFiles() {
+      var e;
+      return ((e = this.fileInfo) == null ? void 0 : e.id) !== void 0;
+    },
+    url() {
+      let e = null, r = null;
+      return this.isFiles ? (e = "files", r = this.fileInfo.id) : (e = this.providerId, r = this.itemId), g("/apps/related_resources/related/{providerId}?itemId={itemId}&resourceType={resourceType}&limit={limit}&format=json", {
+        providerId: e,
+        itemId: r,
+        resourceType: this.resourceType,
+        limit: this.limit
+      });
+    }
+  },
+  watch: {
+    providerId() {
+      this.fetchRelatedResources();
+    },
+    itemId() {
+      this.fetchRelatedResources();
+    },
+    fileInfo() {
+      this.fetchRelatedResources();
+    },
+    error(e) {
+      this.$emit("has-error", !!e);
+    },
+    resources(e) {
+      this.$emit("has-resources", e.length > 0);
+    }
+  },
+  created() {
+    this.fetchRelatedResources();
+  },
+  methods: {
+    t,
+    async fetchRelatedResources() {
+      var e;
+      if (!(!this.appEnabled || !this.hasResourceInfo)) {
+        this.loading = !0, this.error = null, this.resources = [];
+        try {
+          const r = await y.get(this.url);
+          this.resources = (e = r.data.ocs) == null ? void 0 : e.data;
+        } catch (r) {
+          this.error = r, console.error(r);
+        } finally {
+          this.loading = !1;
+        }
+      }
+    }
+  }
+}, O = {
+  key: 0,
+  class: "related-resources"
+}, F = { class: "related-resources__header" };
+function P(e, r, s, _, i, a) {
+  const c = m("NcResource");
+  return i.appEnabled && a.isVisible ? (l(), u("div", O, [
+    o("div", F, [
+      o("h5", null, d(s.header), 1),
+      o("p", null, d(a.subline), 1)
+    ]),
+    (l(!0), u(S, null, B(i.resources, (n) => (l(), T(c, {
+      key: n.itemId,
+      class: "related-resources__entry",
+      icon: n.icon,
+      name: n.title,
+      url: n.url
+    }, null, 8, ["icon", "name", "url"]))), 128))
+  ])) : w("", !0);
+}
+const H = /* @__PURE__ */ f(q, [["render", P], ["__scopeId", "data-v-dc5c8227"]]);
+export {
+  H as N
+};

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

@@ -0,0 +1 @@
+{"version":3,"file":"NcRelatedResourcesPanel-NqDuh_7F.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:href=\"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.ts'\n\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\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$1","NcButton","_hoisted_1$1","_hoisted_2$1","_hoisted_3","openBlock","createElementBlock","$data","$props","withCtx","createElementVNode","_sfc_main","_a","providerId","itemId","generateOcsUrl","error","resources","response","axios","e","_hoisted_2","$options","_hoisted_1","toDisplayString","Fragment","renderList","resource","createCommentVNode"],"mappings":";;;;;;;;AA2CA,MAAAA,IAAA;AAAA,EACC,MAAA;AAAA;IAGC,UAAAC;AAAA;EAGD,OAAA;AAAA;;;;;;;;;;;;;EAeA,OAAA;AACC,WAAA;AAAA,MACC,iBAAA,EAAA,iCAAA,EAAA,cAAA,KAAA,KAAA,CAAA;AAAA,IACD;AAAA;EAGD,SAAA;AAAA;;AAGD,GAnDKC,IAAA,EAAA,OAAA,WAAA,GAMIC,IAAA,EAAA,OAAA,iBAAA,GA7BTC,IAAA,CAAA,KAAA;;;AAuBC,SAAAC,EAAA,GAAAC,EAAA,MAAAJ,GAAA;AAAA;MACW,OAAA;AAAA,MACR,cAAAK,EAAA;AAAA,MACD,MAAA;AAAA,MACC,MAAAC,EAAA;AAAA;MACU,MAAAC,EAAA,MAAA;AAAA,QACVC,EAAA,OAAAP,GAAA;AAAA,UACCO,EAAA,OAAA,EAAA,KAAAF,EAAA,KAAA,GAAA,MAAA,GAAAJ,CAAA;AAAA;;MA9BL,SAAAK,EAAA,MAAA;AAAA;;;;;;;;ACsEA,MAAAE,IAAA;AAAA,EACC,MAAA;AAAA;;;EAMA,OAAA;AAAA;AAAA;AAAA;AAAA;;;;;;;IAWC,QAAA;AAAA,MACC,MAAA,CAAA,QAAA,MAAA;AAAA;;;;;;;;;;;;IAaD,OAAA;AAAA;MAEC,SAAA;AAAA;;;;;;IAOD,UAAA;AAAA;;;;;;IAOA,QAAA;AAAA;;;;;MAMC,SAAA,EAAA,iEAAA;AAAA;;;;IAKD,SAAA;AAAA;;;;EAMD,OAAA;AAAA;IAEC;AAAA;EAGD,OAAA;;AACC,WAAA;AAAA;;;;IAKA;AAAA;EAGD,UAAA;AAAA;;AAEE,aAAA,KAAA,gBAGAC,IAAA,KAAA,UAAA,OAAAA,IAAA,KAAA,UAAA,SAAA;AAAA;IAED,UAAA;AACC,aAAA,KAAA,oHAGA,KAAA;AAAA;IAGD,kBAAA;;;IAUA,UAAA;;AACC,eAAAA,IAAA,KAAA,aAAA,gBAAAA,EAAA,QAAA;AAAA;;AAIA,UAAAC,IAAA;AAGA,aAAA,KAAA,WACCA,IAAA,uDAIAC,IAAA,KAAA,SAGDC,EAAA,sHAAA;AAAA;QAEC,QAAAD;AAAA,QACA,cAAA,KAAA;AAAA,QACA,OAAA,KAAA;AAAA;;;EAKH,OAAA;AAAA;;;IAIC,SAAA;;;;;;;AAYC,WAAA,MAAA,aAAA,EAAAE,CAAA;AAAA;IAED,UAAAC,GAAA;AAMC,WAAA,MAAA,iBAAAA,EAAA,SAAA,CAAA;AAAA;;EAIF,UAAA;;;EAIA,SAAA;AAAA;;;AAGE,UAAA,GAAA,KAAA,cAAA,CAAA,KAAA,kBAIA;AAAA,aAAA,UAAA,IACA,KAAA,QAAA,MACA,KAAA,YAAA,CAAA;AACA,YAAA;AACC,gBAAAC,IAAA,MAAAC,EAAA,IAAA,KAAA,GAAA;AACA,eAAA,aAAAP,IAAAM,EAAA,KAAA,QAAA,gBAAAN,EAAA;AAAA,QACD,SAAAQ,GAAA;0BAEC,QAAA,MAAAA,CAAA;AAAA,QACD,UAAA;AACC,eAAA,UAAA;AAAA,QACD;AAAA;AAAA;;AAGH;;EA5MqC,OAAA;GAC9BC,IAAA,EAAA,OAAA,4BAAA;;;AADK,SAAAd,EAAA,cAAAe,EAAA,aAAXjB,EAAA,GAAAC,EAAA,OAAAiB,GAAA;AAAA,IACCb,EAAA,OAAAW,GAAA;AAAA,MACCX,EAAA,MAAA,MAAAc,EAAAhB,EAAA,MAAA,GAAA,CAAA;AAAA,MACAE,EAAA,KAAA,MAAAc,EAAAF,EAAA,OAAA,GAAA,CAAA;AAAA;KAGDjB,EAAA,EAAA,GAAAC,EAAAmB,GAAA,MAAAC,EAAAnB,EAAA,WAAA,CAAAoB;;MAEC,OAAA;AAAA;;;;QAvDHC,EAAA,IAAA,EAAA;;;"}

package/dist/chunks/NcRelatedResourcesPanel-QgNIHnCY.cjs

@@ -0,0 +1,213 @@
+var S = require("../assets/NcRelatedResourcesPanel-i1-7CClp.css");
+const d = require("@nextcloud/axios"), h = require("@nextcloud/router"), p = require("./NcButton-7UKtzkX5.cjs"), s = require("./_l10n-Fl7RzbcZ.cjs"), t = require("vue"), a = require("./_plugin-vue_export-helper-xG2iG1wl.cjs"), f = (e) => e && e.__esModule ? e : { default: e }, m = /* @__PURE__ */ f(d);
+s.register(s.t31);
+const _ = {
+  name: "NcResource",
+  components: {
+    NcButton: p.NcButton
+  },
+  props: {
+    icon: {
+      type: String,
+      required: !0
+    },
+    name: {
+      type: String,
+      required: !0
+    },
+    url: {
+      type: String,
+      required: !0
+    }
+  },
+  data() {
+    return {
+      labelTranslated: s.t('Open link to "{resourceName}"', { resourceName: this.name })
+    };
+  },
+  methods: {
+    t: s.t
+  }
+}, y = { class: "resource" }, g = { class: "resource__icon" }, N = ["src"];
+function I(e, r, o, u, n, l) {
+  const c = t.resolveComponent("NcButton");
+  return t.openBlock(), t.createElementBlock("li", y, [
+    t.createVNode(c, {
+      class: "resource__button",
+      "aria-label": n.labelTranslated,
+      type: "tertiary",
+      href: o.url
+    }, {
+      icon: t.withCtx(() => [
+        t.createElementVNode("div", g, [
+          t.createElementVNode("img", { src: o.icon }, null, 8, N)
+        ])
+      ]),
+      default: t.withCtx(() => [
+        t.createTextVNode(" " + t.toDisplayString(o.name), 1)
+      ]),
+      _: 1
+    }, 8, ["aria-label", "href"])
+  ]);
+}
+const R = /* @__PURE__ */ a._export_sfc(_, [["render", I], ["__scopeId", "data-v-e4d1c077"]]);
+s.register(s.t8);
+const b = {
+  name: "NcRelatedResourcesPanel",
+  components: {
+    NcResource: R
+  },
+  props: {
+    /**
+     * The provider id implemented with `\OCA\RelatedResources\IRelatedResourceProvider::getProviderId()`
+     */
+    providerId: {
+      type: String,
+      default: null
+    },
+    /**
+     * The item id which uniquely identities the e.g. Calendar event, Deck board, file, Talk room, etc.
+     */
+    itemId: {
+      type: [String, Number],
+      default: null
+    },
+    /**
+     * Limits to specific resource type. i.e. any provider id implemented with `\OCA\RelatedResources\IRelatedResourceProvider::getProviderId()`
+     */
+    resourceType: {
+      type: String,
+      default: ""
+    },
+    /**
+     * Set the maximum number of resources to load
+     */
+    limit: {
+      type: Number,
+      default: 0
+    },
+    /**
+     * Only used by the files sidebar
+     *
+     * File info is passed when registered with `OCA.Sharing.ShareTabSections.registerSection()`
+     */
+    fileInfo: {
+      type: Object,
+      default: null
+    },
+    /**
+     * Make the header name dynamic
+     */
+    header: {
+      type: String,
+      default: s.t("Related resources")
+    },
+    description: {
+      type: String,
+      default: s.t("Anything shared with the same group of people will show up here")
+    },
+    /**
+     * If this element is used on a primary element set to true for primary styling.
+     */
+    primary: {
+      type: Boolean,
+      default: !1
+    }
+  },
+  emits: [
+    "has-error",
+    "has-resources"
+  ],
+  data() {
+    var e;
+    return {
+      appEnabled: ((e = OC == null ? void 0 : OC.appswebroots) == null ? void 0 : e.related_resources) !== void 0,
+      loading: !1,
+      error: null,
+      resources: []
+    };
+  },
+  computed: {
+    isVisible() {
+      var e;
+      return this.loading ? !1 : (e = this.error) != null ? e : this.resources.length > 0;
+    },
+    subline() {
+      return this.error ? s.t("Error getting related resources. Please contact your system administrator if you have any questions.") : this.description;
+    },
+    hasResourceInfo() {
+      return this.providerId !== null && this.itemId !== null || this.fileInfo !== null;
+    },
+    isFiles() {
+      var e;
+      return ((e = this.fileInfo) == null ? void 0 : e.id) !== void 0;
+    },
+    url() {
+      let e = null, r = null;
+      return this.isFiles ? (e = "files", r = this.fileInfo.id) : (e = this.providerId, r = this.itemId), h.generateOcsUrl("/apps/related_resources/related/{providerId}?itemId={itemId}&resourceType={resourceType}&limit={limit}&format=json", {
+        providerId: e,
+        itemId: r,
+        resourceType: this.resourceType,
+        limit: this.limit
+      });
+    }
+  },
+  watch: {
+    providerId() {
+      this.fetchRelatedResources();
+    },
+    itemId() {
+      this.fetchRelatedResources();
+    },
+    fileInfo() {
+      this.fetchRelatedResources();
+    },
+    error(e) {
+      this.$emit("has-error", !!e);
+    },
+    resources(e) {
+      this.$emit("has-resources", e.length > 0);
+    }
+  },
+  created() {
+    this.fetchRelatedResources();
+  },
+  methods: {
+    t: s.t,
+    async fetchRelatedResources() {
+      var e;
+      if (!(!this.appEnabled || !this.hasResourceInfo)) {
+        this.loading = !0, this.error = null, this.resources = [];
+        try {
+          const r = await m.default.get(this.url);
+          this.resources = (e = r.data.ocs) == null ? void 0 : e.data;
+        } catch (r) {
+          this.error = r, console.error(r);
+        } finally {
+          this.loading = !1;
+        }
+      }
+    }
+  }
+}, v = {
+  key: 0,
+  class: "related-resources"
+}, B = { class: "related-resources__header" };
+function E(e, r, o, u, n, l) {
+  const c = t.resolveComponent("NcResource");
+  return n.appEnabled && l.isVisible ? (t.openBlock(), t.createElementBlock("div", v, [
+    t.createElementVNode("div", B, [
+      t.createElementVNode("h5", null, t.toDisplayString(o.header), 1),
+      t.createElementVNode("p", null, t.toDisplayString(l.subline), 1)
+    ]),
+    (t.openBlock(!0), t.createElementBlock(t.Fragment, null, t.renderList(n.resources, (i) => (t.openBlock(), t.createBlock(c, {
+      key: i.itemId,
+      class: "related-resources__entry",
+      icon: i.icon,
+      name: i.title,
+      url: i.url
+    }, null, 8, ["icon", "name", "url"]))), 128))
+  ])) : t.createCommentVNode("", !0);
+}
+const k = /* @__PURE__ */ a._export_sfc(b, [["render", E], ["__scopeId", "data-v-dc5c8227"]]);
+exports.NcRelatedResourcesPanel = k;

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

@@ -0,0 +1 @@
+{"version":3,"file":"NcRelatedResourcesPanel-QgNIHnCY.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:href=\"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.ts'\n\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\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$1","NcButton","_l10n","_hoisted_1$1","_hoisted_2$1","_hoisted_3","vue","$data","$props","_sfc_main","_a","providerId","itemId","router","error","resources","response","axios__default","e","_hoisted_2","$options","_hoisted_1","resource"],"mappings":"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"}