npm - @nextcloud/vue - Versions diffs - 8.0.0-beta.8 → 8.0.0-beta.9 - Mend

@nextcloud/vue 8.0.0-beta.8 → 8.0.0-beta.9

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (223) hide show

package/dist/Components/NcRelatedResourcesPanel.mjs CHANGED Viewed

@@ -1,13 +1,13 @@
-import "../assets/index-6405cd50.css";
-import a from "@nextcloud/axios";
-import { generateOcsUrl as o } from "@nextcloud/router";
-import l from "./NcButton.mjs";
-import { t as s } from "../chunks/l10n-27a75c40.mjs";
-import { n as i } from "../chunks/_plugin-vue2_normalizer-71e2aa87.mjs";
-const c = {
+import "../assets/index-e828b286.css";
+import o from "@nextcloud/axios";
+import { generateOcsUrl as l } from "@nextcloud/router";
+import a from "./NcButton.mjs";
+import { t as s } from "../chunks/l10n-05a09c66.mjs";
+import { n } from "../chunks/_plugin-vue2_normalizer-71e2aa87.mjs";
+const u = {
   name: "NcResource",
   components: {
-    NcButton: l
+    NcButton: a
   },
   props: {
     icon: {
@@ -32,14 +32,14 @@ const c = {
     t: s
   }
 };
-var u = function() {
+var c = 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("div", { staticClass: "resource__icon" }, [t("img", { attrs: { src: e.icon } })])];
   }, proxy: !0 }]) }, [e._v(" " + e._s(e.name) + " ")])], 1);
-}, d = [], _ = /* @__PURE__ */ i(
-  c,
+}, d = [], f = /* @__PURE__ */ n(
   u,
+  c,
   d,
   !1,
   null,
@@ -47,11 +47,11 @@ var u = function() {
   null,
   null
 );
-const f = _.exports;
-const h = {
+const _ = f.exports;
+const p = {
   name: "NcRelatedResourcesPanel",
   components: {
-    NcResource: f
+    NcResource: _
   },
   props: {
     /**
@@ -68,6 +68,20 @@ const h = {
       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: null
+    },
+    /**
+     * Set the maximum number of resources to load
+     */
+    limit: {
+      type: Number,
+      default: null
+    },
     /**
      * Only used by the files sidebar
      *
@@ -109,9 +123,11 @@ const h = {
     },
     url() {
       let r = null, e = null;
-      return this.isFiles ? (r = "files", e = this.fileInfo.id) : (r = this.providerId, e = this.itemId), o("/apps/related_resources/related/{providerId}?itemId={itemId}&format=json", {
+      return this.isFiles ? (r = "files", e = this.fileInfo.id) : (r = this.providerId, e = this.itemId), l("/apps/related_resources/related/{providerId}?itemId={itemId}&resourceType={resourceType}&limit={limit}&format=json", {
         providerId: r,
-        itemId: e
+        itemId: e,
+        resourceType: this.resourceType,
+        limit: this.limit
       });
     }
   },
@@ -142,7 +158,7 @@ const h = {
       if (!(!this.appEnabled || !this.hasResourceInfo)) {
         this.loading = !0, this.error = null, this.resources = [];
         try {
-          const e = await a.get(this.url);
+          const e = await o.get(this.url);
           this.resources = (r = e.data.ocs) == null ? void 0 : r.data;
         } catch (e) {
           this.error = e, console.error(e);
@@ -153,22 +169,22 @@ const h = {
     }
   }
 };
-var p = function() {
+var h = 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.headerTranslated))]), t("p", [e._v(e._s(e.description))])]), e._l(e.resources, function(n) {
-    return t("NcResource", { key: n.itemId, staticClass: "related-resources__entry", attrs: { icon: n.icon, name: n.title, url: n.url } });
+  return e.appEnabled && e.isVisible ? t("div", { staticClass: "related-resources" }, [t("div", { staticClass: "related-resources__header" }, [t("h5", [e._v(e._s(e.headerTranslated))]), t("p", [e._v(e._s(e.description))])]), 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();
-}, m = [], v = /* @__PURE__ */ i(
-  h,
+}, m = [], y = /* @__PURE__ */ n(
   p,
+  h,
   m,
   !1,
   null,
-  "235fc8aa",
+  "01cfeb01",
   null,
   null
 );
-const C = v.exports;
+const T = y.exports;
 export {
-  C as default
+  T as default
 };

package/dist/Components/NcRelatedResourcesPanel.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"NcRelatedResourcesPanel.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.js'\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\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>{{ headerTranslated }}</h5>\n\t\t\t<p>{{ description }}</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 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},\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\theaderTranslated: t('Related resources'),\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\n\t\tdescription() {\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 t('Anything shared with the same group of people will show up here')\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}&format=json', {\n\t\t\t\tproviderId,\n\t\t\t\titemId,\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","t","_sfc_main","NcResource","_a","providerId","itemId","generateOcsUrl","error","resources","response","axios"],"mappings":"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"}
1	+ {"version":3,"file":"NcRelatedResourcesPanel.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.js'\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\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>{{ headerTranslated }}</h5>\n\t\t\t<p>{{ description }}</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: null,\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: null,\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},\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\theaderTranslated: t('Related resources'),\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\n\t\tdescription() {\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 t('Anything shared with the same group of people will show up here')\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","t","_sfc_main","NcResource","_a","providerId","itemId","generateOcsUrl","error","resources","response","axios"],"mappings":"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"}

package/dist/Components/NcRichContenteditable.cjs CHANGED Viewed

@@ -1,8 +1,8 @@
 var O = require("../assets/index-793eae6b.css");
 Object.defineProperties(exports, { __esModule: { value: !0 }, [Symbol.toStringTag]: { value: "Module" } });
-const p = require("../chunks/index-4398f925.cjs"), f = require("@nextcloud/router"), m = require("../chunks/_plugin-vue2_normalizer-7f9efb60.cjs"), l = require("../chunks/l10n-903083c4.cjs");
+const p = require("../chunks/index-4398f925.cjs"), f = require("@nextcloud/router"), m = require("../chunks/_plugin-vue2_normalizer-7f9efb60.cjs"), l = require("../chunks/l10n-b1d264c7.cjs");
 require("../Directives/Tooltip.cjs");
-const c = require("../Functions/emoji.cjs"), d = require("../chunks/referencePickerModal-9b4ff88d.cjs");
+const c = require("../Functions/emoji.cjs"), d = require("../chunks/referencePickerModal-279a483d.cjs");
 require("@nextcloud/axios");
 require("unist-util-visit");
 require("unist-builder");

package/dist/Components/NcRichContenteditable.mjs CHANGED Viewed

@@ -3,10 +3,10 @@ import { r as c } from "../chunks/index-5f2a5f57.mjs";
 import { N as ut } from "../chunks/index-5f2a5f57.mjs";
 import { generateUrl as p } from "@nextcloud/router";
 import { n as u } from "../chunks/_plugin-vue2_normalizer-71e2aa87.mjs";
-import { t as r } from "../chunks/l10n-27a75c40.mjs";
+import { t as r } from "../chunks/l10n-05a09c66.mjs";
 import "../Directives/Tooltip.mjs";
 import { emojiAddRecent as m, emojiSearch as d } from "../Functions/emoji.mjs";
-import { n as h, j as f } from "../chunks/referencePickerModal-0fde503d.mjs";
+import { n as h, j as f } from "../chunks/referencePickerModal-443a4c57.mjs";
 import "@nextcloud/axios";
 import "unist-util-visit";
 import "unist-builder";

package/dist/Components/NcRichText.cjs CHANGED Viewed

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperties(exports, { __esModule: { value: !0 }, [Symbol.toStringTag]: { value: "Module" } });
-const r = require("../chunks/NcRichText-d385dc10.cjs"), e = require("../chunks/referencePickerModal-9b4ff88d.cjs");
+const r = require("../chunks/NcRichText-332fe454.cjs"), e = require("../chunks/referencePickerModal-279a483d.cjs");
 /**
  * @copyright Copyright (c) 2023 Raimund Schlüßler <raimund.schluessler@mailbox.org>
  *

package/dist/Components/NcRichText.mjs CHANGED Viewed

@@ -1,6 +1,6 @@
-import { N as r } from "../chunks/NcRichText-1c3d2654.mjs";
-import { a as t } from "../chunks/NcRichText-1c3d2654.mjs";
-import { e as c, a as d, b as o, N as n, c as g, k as m, j as P, l as k, m as f, h as N, i as R, f as l, r as u, g as h, d as v, n as W, s as p } from "../chunks/referencePickerModal-0fde503d.mjs";
+import { N as r } from "../chunks/NcRichText-8fda53c8.mjs";
+import { a as t } from "../chunks/NcRichText-8fda53c8.mjs";
+import { e as c, a as d, b as o, N as n, c as g, k as m, j as P, l as k, m as f, h as N, i as R, f as l, r as u, g as h, d as v, n as W, s as p } from "../chunks/referencePickerModal-443a4c57.mjs";
 /**
  * @copyright Copyright (c) 2023 Raimund Schlüßler <raimund.schluessler@mailbox.org>
  *

package/dist/Components/NcSelect.cjs CHANGED Viewed

@@ -1,18 +1,18 @@
 var w = require("../assets/index-1beccc92.css");
 const c = require("@nextcloud/vue-select");
 require("@nextcloud/vue-select/dist/vue-select.css");
-const r = require("@floating-ui/dom"), p = require("vue-material-design-icons/ChevronDown.vue"), f = require("vue-material-design-icons/Close.vue"), d = require("./NcEllipsisedOption.cjs"), _ = require("./NcListItemIcon.cjs"), y = require("./NcLoadingIcon.cjs"), m = require("../chunks/l10n-4326316a.cjs"), h = require("../chunks/GenRandomId-c214d235.cjs"), g = require("../chunks/_plugin-vue2_normalizer-7f9efb60.cjs"), i = (t) => t && t.__esModule ? t : { default: t }, S = /* @__PURE__ */ i(p), b = /* @__PURE__ */ i(f);
-const C = {
+const a = require("@floating-ui/dom"), f = require("vue-material-design-icons/ChevronDown.vue"), d = require("vue-material-design-icons/Close.vue"), _ = require("./NcEllipsisedOption.cjs"), m = require("./NcListItemIcon.cjs"), y = require("./NcLoadingIcon.cjs"), h = require("../chunks/l10n-c7bd0ea6.cjs"), g = require("../chunks/GenRandomId-c214d235.cjs"), S = require("../chunks/_plugin-vue2_normalizer-7f9efb60.cjs"), u = (t) => t && t.__esModule ? t : { default: t }, b = /* @__PURE__ */ u(f), C = /* @__PURE__ */ u(d);
+const L = {
   name: "NcSelect",
   components: {
-    ChevronDown: S.default,
-    NcEllipsisedOption: d,
-    NcListItemIcon: _,
+    ChevronDown: b.default,
+    NcEllipsisedOption: _,
+    NcListItemIcon: m,
     NcLoadingIcon: y,
     VueSelect: c.VueSelect
   },
   mixins: [
-    m.l10n
+    h.l10n
   ],
   props: {
     // Add VueSelect props to $props
@@ -59,7 +59,7 @@ const C = {
       type: Object,
       default: () => ({
         Deselect: {
-          render: (t) => t(b.default, {
+          render: (t) => t(C.default, {
             props: {
               size: 20,
               fillColor: "var(--vs-controls-color)"
@@ -236,7 +236,7 @@ const C = {
      */
     uid: {
       type: String,
-      default: () => "-" + h.GenRandomId()
+      default: () => "-" + g.GenRandomId()
     },
     /**
      * When `appendToBody` is true, this sets the placement of the dropdown
@@ -306,47 +306,52 @@ const C = {
         t.style.width = n;
         const l = {
           name: "addClass",
-          fn(s) {
+          fn(r) {
             return t.classList.add("vs__dropdown-menu--floating"), {};
           }
         }, o = {
           name: "togglePlacementClass",
-          fn({ placement: s }) {
+          fn({ placement: r }) {
             return e.$el.classList.toggle(
               "select--drop-up",
-              s === "top"
+              r === "top"
             ), t.classList.toggle(
               "vs__dropdown-menu--floating-placement-top",
-              s === "top"
+              r === "top"
             ), {};
           }
-        }, a = () => {
-          r.computePosition(e.$refs.toggle, t, {
+        }, s = () => {
+          a.computePosition(e.$refs.toggle, t, {
             placement: this.placement,
             middleware: [
-              r.offset(-1),
+              a.offset(-1),
               l,
               o,
               // Match popperjs default collision prevention behavior by appending the following middleware in order
-              r.flip(),
-              r.shift({ limiter: r.limitShift() })
+              a.flip(),
+              a.shift({ limiter: a.limitShift() })
             ]
-          }).then(({ x: s, y: u }) => {
+          }).then(({ x: r, y: p }) => {
             Object.assign(t.style, {
-              left: `${s}px`,
-              top: `${u}px`
+              left: `${r}px`,
+              top: `${p}px`
             });
           });
         };
-        return r.autoUpdate(
+        return a.autoUpdate(
           e.$refs.toggle,
           t,
-          a
+          s
         );
       };
     },
     localFilterBy() {
-      return this.filterBy !== null ? this.filterBy : this.userSelect ? (t, e, n) => (`${e} ${t.subname}` || "").toLocaleLowerCase().indexOf(n.toLocaleLowerCase()) > -1 : c.VueSelect.props.filterBy.default;
+      const t = /[^<]*<([^>]+)/;
+      return this.filterBy !== null ? this.filterBy : this.userSelect ? (e, n, l) => {
+        var s, i, r;
+        const o = l.match(t);
+        return o && ((r = (i = (s = e.subname) == null ? void 0 : s.toLocaleLowerCase) == null ? void 0 : i.call(s)) == null ? void 0 : r.indexOf(o[1].toLocaleLowerCase())) > -1 || `${n} ${e.subname}`.toLocaleLowerCase().indexOf(l.toLocaleLowerCase()) > -1;
+      } : c.VueSelect.props.filterBy.default;
     },
     localLabel() {
       return this.label !== null ? this.label : this.userSelect ? "displayName" : c.VueSelect.props.label.default;
@@ -371,7 +376,7 @@ const C = {
     }
   }
 };
-var L = function() {
+var N = function() {
   var e = this, n = e._self._c;
   return n("VueSelect", e._g(e._b({ staticClass: "select", class: {
     "select--no-wrap": e.noWrap
@@ -388,13 +393,13 @@ var L = function() {
   } }, { key: "no-options", fn: function() {
     return [e._v(" " + e._s(e.t("No results")) + " ")];
   }, proxy: !0 }, e._l(e.$scopedSlots, function(l, o) {
-    return { key: o, fn: function(a) {
-      return [e._t(o, null, null, a)];
+    return { key: o, fn: function(s) {
+      return [e._t(o, null, null, s)];
     } };
   })], null, !0) }, "VueSelect", e.propsToForward, !1), e.$listeners));
-}, v = [], N = /* @__PURE__ */ g.normalizeComponent(
-  C,
+}, v = [], I = /* @__PURE__ */ S.normalizeComponent(
   L,
+  N,
   v,
   !1,
   null,
@@ -402,5 +407,5 @@ var L = function() {
   null,
   null
 );
-const B = N.exports;
+const B = I.exports;
 module.exports = B;

package/dist/Components/NcSelect.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"NcSelect.cjs","sources":["../../src/components/NcSelect/NcSelect.vue"],"sourcesContent":["<!--\n\t- @copyright 2022 Christopher Ng <chrng8@gmail.com>\n\t-\n\t- @author Christopher Ng <chrng8@gmail.com>\n\t-\n\t- @license AGPL-3.0-or-later\n\t-\n\t- This program is free software: you can redistribute it and/or modify\n\t- it under the terms of the GNU Affero General Public License as\n\t- published by the Free Software Foundation, either version 3 of the\n\t- License, or (at your option) any later version.\n\t-\n\t- This program is distributed in the hope that it will be useful,\n\t- but WITHOUT ANY WARRANTY; without even the implied warranty of\n\t- MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the\n\t- GNU Affero General Public License for more details.\n\t-\n\t- You should have received a copy of the GNU Affero General Public License\n\t- along with this program. If not, see <http://www.gnu.org/licenses/>.\n\t-\n-->\n\n<docs>\n### Description\n\nGeneral purpose multiselect component.\n\n### Basic examples\n\n```vue\n<template>\n\t<div class=\"grid\">\n\t\t<div v-for=\"{ name, props } in selectArray\"\n\t\t\tclass=\"container\">\n\t\t\t<label :for=\"props.inputId\">{{ name }}</label>\n\t\t\t<NcSelect v-bind=\"props\"\n\t\t\t\tv-model=\"props.value\" />\n\t\t</div>\n\t</div>\n</template>\n\n<script>\nimport GenRandomId from '../../utils/GenRandomId.js'\n\nconst getRandomId = () => {\n\treturn `select-${GenRandomId()}`\n}\n\nconst selectArray = [\n\t{\n\t\tname: 'Simple',\n\t\tprops: {\n\t\t\tinputId: getRandomId(),\n\t\t\toptions: [\n\t\t\t\t'foo',\n\t\t\t\t'bar',\n\t\t\t\t'baz',\n\t\t\t\t'qux',\n\t\t\t\t'quux',\n\t\t\t],\n\t\t},\n\t},\n\n\t{\n\t\tname: 'Simple (top placement)',\n\t\tprops: {\n\t\t\tinputId: getRandomId(),\n\t\t\tplacement: 'top',\n\t\t\toptions: [\n\t\t\t\t'foo',\n\t\t\t\t'bar',\n\t\t\t\t'baz',\n\t\t\t\t'qux',\n\t\t\t\t'quux',\n\t\t\t],\n\t\t},\n\t},\n\n\t{\n\t\tname: 'Multiple (with placeholder)',\n\t\tprops: {\n\t\t\tinputId: getRandomId(),\n\t\t\tmultiple: true,\n\t\t\tplaceholder: 'Select multiple options',\n\t\t\toptions: [\n\t\t\t\t'foo',\n\t\t\t\t'bar',\n\t\t\t\t'baz',\n\t\t\t\t'qux',\n\t\t\t\t'quux',\n\t\t\t],\n\t\t},\n\t},\n\n\t{\n\t\tname: 'Multiple (objects, pre-selected, stay open on select)',\n\t\tprops: {\n\t\t\tinputId: getRandomId(),\n\t\t\tmultiple: true,\n\t\t\tcloseOnSelect: false,\n\t\t\toptions: [\n\t\t\t\t{\n\t\t\t\t\tid: 'foo',\n\t\t\t\t\tlabel: 'Foo',\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\tid: 'bar',\n\t\t\t\t\tlabel: 'Bar',\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\tid: 'baz',\n\t\t\t\t\tlabel: 'Baz',\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\tid: 'qux',\n\t\t\t\t\tlabel: 'Qux',\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\tid: 'quux',\n\t\t\t\t\tlabel: 'Quux',\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\tid: 'corge',\n\t\t\t\t\tlabel: 'Corge',\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\tid: 'grault',\n\t\t\t\t\tlabel: 'Grault',\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\tid: 'garply',\n\t\t\t\t\tlabel: 'Garply',\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\tid: 'waldo',\n\t\t\t\t\tlabel: 'Waldo',\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\tid: 'fred',\n\t\t\t\t\tlabel: 'Fred',\n\t\t\t\t},\n\t\t\t],\n\t\t\tvalue: [\n\t\t\t\t{\n\t\t\t\t\tid: 'foo',\n\t\t\t\t\tlabel: 'Foo',\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\tid: 'bar',\n\t\t\t\t\tlabel: 'Bar',\n\t\t\t\t},\n\t\t\t],\n\t\t},\n\t},\n]\n\nexport default {\n\tdata() {\n\t\treturn {\n\t\t\tselectArray,\n\t\t}\n\t},\n}\n</script>\n\n<style>\n.grid {\n\tdisplay: grid;\n\tgrid-template-columns: repeat(2, 1fr);\n\tgap: 10px;\n}\n\n.container {\n\tdisplay: flex;\n\tflex-direction: column;\n\tgap: 2px 0;\n}\n</style>\n```\n\n### No wrap example\n\nThe `noWrap` prop is set to `true` and the `max-width` of the multiselect\nparent container is limited to `350px`\n\n```vue\n<template>\n\t<div class=\"grid\">\n\t\t<div class=\"container\">\n\t\t\t<label :for=\"data1.props.inputId\">{{ data1.name }}</label>\n\t\t\t<NcSelect :no-wrap=\"false\"\n\t\t\t\tv-bind=\"data1.props\"\n\t\t\t\tv-model=\"data1.props.value\" />\n\t\t</div>\n\t\t<div class=\"container\">\n\t\t\t<label :for=\"data2.props.inputId\">{{ data2.name }}</label>\n\t\t\t<NcSelect :no-wrap=\"true\"\n\t\t\t\tv-bind=\"data2.props\"\n\t\t\t\tv-model=\"data2.props.value\" />\n\t\t</div>\n\t</div>\n</template>\n\n<script>\nimport GenRandomId from '../../utils/GenRandomId.js'\n\nconst getRandomId = () => {\n\treturn `select-${GenRandomId()}`\n}\n\nconst data1 = {\n\tname: 'Wrapped (Default)',\n\tprops: {\n\t\tinputId: getRandomId(),\n\t\tmultiple: true,\n\t\tcloseOnSelect: false,\n\t\toptions: [\n\t\t\t'foo',\n\t\t\t'bar',\n\t\t\t'baz',\n\t\t\t'qux',\n\t\t\t'quux',\n\t\t\t'corge',\n\t\t\t'grault',\n\t\t\t'garply',\n\t\t\t'waldo',\n\t\t\t'fred',\n\t\t],\n\t\tvalue: [\n\t\t\t'foo',\n\t\t\t'bar',\n\t\t\t'baz',\n\t\t\t'qux',\n\t\t\t'quux',\n\t\t\t'corge',\n\t\t\t'grault',\n\t\t\t'garply',\n\t\t\t'waldo',\n\t\t\t'fred',\n\t\t],\n\t},\n}\n\nconst data2 = {\n\tname: 'Not wrapped',\n\tprops: {\n\t\tinputId: getRandomId(),\n\t\tmultiple: true,\n\t\tcloseOnSelect: false,\n\t\toptions: [\n\t\t\t'foo',\n\t\t\t'bar',\n\t\t\t'baz',\n\t\t\t'qux',\n\t\t\t'quux',\n\t\t\t'corge',\n\t\t\t'grault',\n\t\t\t'garply',\n\t\t\t'waldo',\n\t\t\t'fred',\n\t\t],\n\t\tvalue: [\n\t\t\t'foo',\n\t\t\t'bar',\n\t\t\t'baz',\n\t\t\t'qux',\n\t\t\t'quux',\n\t\t\t'corge',\n\t\t\t'grault',\n\t\t\t'garply',\n\t\t\t'waldo',\n\t\t\t'fred',\n\t\t],\n\t},\n}\n\nexport default {\n\tdata() {\n\t\treturn {\n\t\t\tdata1,\n\t\t\tdata2,\n\t\t}\n\t},\n}\n</script>\n\n<style>\n.grid {\n\tdisplay: grid;\n\tgrid-template-columns: repeat(1, 1fr);\n\tgap: 10px;\n}\n\n.container {\n\tmax-width: 350px;\n\tdisplay: flex;\n\tflex-direction: column;\n\tgap: 2px 0;\n}\n</style>\n```\n\n### User select examples\n\n```vue\n<template>\n\t<div class=\"grid\">\n\t\t<div v-for=\"{ name, props } in selectArray\"\n\t\t\tclass=\"container\">\n\t\t\t<label :for=\"props.inputId\">{{ name }}</label>\n\t\t\t<NcSelect v-bind=\"props\"\n\t\t\t\tv-model=\"props.value\" />\n\t\t</div>\n\t</div>\n</template>\n\n<script>\nimport AccountGroup from '@mdi/svg/svg/account-group.svg?raw'\nimport Email from '@mdi/svg/svg/email.svg?raw'\n\nimport GenRandomId from '../../utils/GenRandomId.js'\n\nconst getRandomId = () => {\n\treturn `select-${GenRandomId()}`\n}\n\nconst selectArray = [\n\t{\n\t\tname: 'User select',\n\t\tprops: {\n\t\t\tinputId: getRandomId(),\n\t\t\tuserSelect: true,\n\t\t\toptions: [\n\t\t\t\t{\n\t\t\t\t\tid: '0-john',\n\t\t\t\t\tdisplayName: 'John',\n\t\t\t\t\tisNoUser: false,\n\t\t\t\t\tsubname: 'john@example.org',\n\t\t\t\t\ticon: '',\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\tid: '0-emma',\n\t\t\t\t\tdisplayName: 'Emma',\n\t\t\t\t\tisNoUser: false,\n\t\t\t\t\tsubname: 'emma@example.org',\n\t\t\t\t\ticon: '',\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\tid: '0-olivia',\n\t\t\t\t\tdisplayName: 'Olivia',\n\t\t\t\t\tisNoUser: false,\n\t\t\t\t\tsubname: 'olivia@example.org',\n\t\t\t\t\ticon: '',\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\tid: '0-noah',\n\t\t\t\t\tdisplayName: 'Noah',\n\t\t\t\t\tisNoUser: false,\n\t\t\t\t\tsubname: 'noah@example.org',\n\t\t\t\t\ticon: '',\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\tid: '0-oliver',\n\t\t\t\t\tdisplayName: 'Oliver',\n\t\t\t\t\tisNoUser: false,\n\t\t\t\t\tsubname: 'oliver@example.org',\n\t\t\t\t\ticon: '',\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\tid: '1-admin',\n\t\t\t\t\tdisplayName: 'Admin',\n\t\t\t\t\tisNoUser: true,\n\t\t\t\t\tsubname: null,\n\t\t\t\t\ticonSvg: AccountGroup,\n\t\t\t\t\ticonName: 'Group icon',\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\tid: '2-org@example.org',\n\t\t\t\t\tdisplayName: 'Organization',\n\t\t\t\t\tisNoUser: true,\n\t\t\t\t\tsubname: 'org@example.org',\n\t\t\t\t\ticonSvg: Email,\n\t\t\t\t\ticonName: 'Email icon',\n\t\t\t\t},\n\t\t\t],\n\t\t},\n\t},\n\n\t{\n\t\tname: 'Multiple user select (stay open on select)',\n\t\tprops: {\n\t\t\tinputId: getRandomId(),\n\t\t\tuserSelect: true,\n\t\t\tmultiple: true,\n\t\t\tcloseOnSelect: false,\n\t\t\toptions: [\n\t\t\t\t{\n\t\t\t\t\tid: '0-john',\n\t\t\t\t\tdisplayName: 'John',\n\t\t\t\t\tisNoUser: false,\n\t\t\t\t\tsubname: 'john@example.org',\n\t\t\t\t\ticon: '',\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\tid: '0-emma',\n\t\t\t\t\tdisplayName: 'Emma',\n\t\t\t\t\tisNoUser: false,\n\t\t\t\t\tsubname: 'emma@example.org',\n\t\t\t\t\ticon: '',\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\tid: '0-olivia',\n\t\t\t\t\tdisplayName: 'Olivia',\n\t\t\t\t\tisNoUser: false,\n\t\t\t\t\tsubname: 'olivia@example.org',\n\t\t\t\t\ticon: '',\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\tid: '0-noah',\n\t\t\t\t\tdisplayName: 'Noah',\n\t\t\t\t\tisNoUser: false,\n\t\t\t\t\tsubname: 'noah@example.org',\n\t\t\t\t\ticon: '',\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\tid: '0-oliver',\n\t\t\t\t\tdisplayName: 'Oliver',\n\t\t\t\t\tisNoUser: false,\n\t\t\t\t\tsubname: 'oliver@example.org',\n\t\t\t\t\ticon: '',\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\tid: '1-admin',\n\t\t\t\t\tdisplayName: 'Admin',\n\t\t\t\t\tisNoUser: true,\n\t\t\t\t\tsubname: null,\n\t\t\t\t\ticonSvg: AccountGroup,\n\t\t\t\t\ticonName: 'Group icon',\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\tid: '2-org@example.org',\n\t\t\t\t\tdisplayName: 'Organization',\n\t\t\t\t\tisNoUser: true,\n\t\t\t\t\tsubname: 'org@example.org',\n\t\t\t\t\ticonSvg: Email,\n\t\t\t\t\ticonName: 'Email icon',\n\t\t\t\t},\n\t\t\t],\n\t\t},\n\t},\n]\n\nexport default {\n\tdata() {\n\t\treturn {\n\t\t\tselectArray,\n\t\t}\n\t},\n}\n</script>\n\n<style>\n.grid {\n\tdisplay: grid;\n\tgrid-template-columns: repeat(1, 500px);\n\tgap: 10px;\n}\n\n.container {\n\tdisplay: flex;\n\tflex-direction: column;\n\tgap: 2px 0;\n}\n</style>\n```\n</docs>\n\n<template>\n\t<VueSelect class=\"select\"\n\t\t:class=\"{\n\t\t\t'select--no-wrap': noWrap,\n\t\t}\"\n\t\tv-bind=\"propsToForward\"\n\t\tv-on=\"$listeners\"\n\t\t@search=\"searchString => search = searchString\">\n\t\t<template #search=\"{ attributes, events }\">\n\t\t\t<input :class=\"['vs__search', inputClass]\"\n\t\t\t\tv-bind=\"attributes\"\n\t\t\t\tv-on=\"events\">\n\t\t</template>\n\t\t<template #open-indicator=\"{ attributes }\">\n\t\t\t<ChevronDown v-bind=\"attributes\"\n\t\t\t\tfill-color=\"var(--vs-controls-color)\"\n\t\t\t\t:size=\"26\" />\n\t\t\t\t<!-- Set size to 26 to make up for the increased padding of this icon -->\n\t\t</template>\n\t\t<template #option=\"option\">\n\t\t\t<NcListItemIcon v-if=\"userSelect\"\n\t\t\t\tv-bind=\"option\"\n\t\t\t\t:name=\"option[localLabel]\"\n\t\t\t\t:search=\"search\" />\n\t\t\t<NcEllipsisedOption v-else\n\t\t\t\t:name=\"String(option[localLabel])\"\n\t\t\t\t:search=\"search\" />\n\t\t</template>\n\t\t<template #selected-option=\"selectedOption\">\n\t\t\t<NcListItemIcon v-if=\"userSelect\"\n\t\t\t\tv-bind=\"selectedOption\"\n\t\t\t\t:name=\"selectedOption[localLabel]\"\n\t\t\t\t:search=\"search\" />\n\t\t\t<NcEllipsisedOption v-else\n\t\t\t\t:name=\"String(selectedOption[localLabel])\"\n\t\t\t\t:search=\"search\" />\n\t\t</template>\n\t\t<template #spinner=\"spinner\">\n\t\t\t<NcLoadingIcon v-if=\"spinner.loading\" />\n\t\t</template>\n\t\t<template #no-options>\n\t\t\t{{ t('No results') }}\n\t\t</template>\n\t\t<template v-for=\"(_, name) in $scopedSlots\" #[name]=\"data\">\n\t\t\t<!-- @slot Any combination of slots from https://vue-select.org/api/slots.html -->\n\t\t\t<slot :name=\"name\" v-bind=\"data\" />\n\t\t</template>\n\t</VueSelect>\n</template>\n\n<script>\nimport { VueSelect } from '@nextcloud/vue-select'\nimport '@nextcloud/vue-select/dist/vue-select.css'\nimport {\n\tautoUpdate,\n\tcomputePosition,\n\tflip,\n\tlimitShift,\n\toffset,\n\tshift,\n} from '@floating-ui/dom'\n\nimport ChevronDown from 'vue-material-design-icons/ChevronDown.vue'\nimport Close from 'vue-material-design-icons/Close.vue'\n\nimport NcEllipsisedOption from '../NcEllipsisedOption/index.js'\nimport NcListItemIcon from '../NcListItemIcon/index.js'\nimport NcLoadingIcon from '../NcLoadingIcon/index.js'\n\nimport l10n from '../../mixins/l10n.js'\n\nimport GenRandomId from '../../utils/GenRandomId.js'\n\nexport default {\n\tname: 'NcSelect',\n\n\tcomponents: {\n\t\tChevronDown,\n\t\tNcEllipsisedOption,\n\t\tNcListItemIcon,\n\t\tNcLoadingIcon,\n\t\tVueSelect,\n\t},\n\n\tmixins: [\n\t\tl10n,\n\t],\n\n\tprops: {\n\t\t// Add VueSelect props to $props\n\t\t...VueSelect.props,\n\n\t\t/*\n\t\t Append the dropdown element to the end of the body\n\t\t * and size/position it dynamically.\n\t\t \n\t\t @see https://vue-select.org/api/props.html#appendtobody\n\t\t /\n\t\tappendToBody: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: true,\n\t\t},\n\n\t\t/\n\t\t When `appendToBody` is true, this function is responsible for\n\t\t * positioning the drop down list.\n\t\t \n\t\t If a function is returned from `calculatePosition`, it will\n\t\t * be called when the drop down list is removed from the DOM.\n\t\t * This allows for any garbage collection you may need to do.\n\t\t \n\t\t @see https://vue-select.org/api/props.html#calculateposition\n\t\t /\n\t\tcalculatePosition: {\n\t\t\ttype: Function,\n\t\t\tdefault: null,\n\t\t},\n\n\t\t/\n\t\t Close the dropdown when selecting an option\n\t\t \n\t\t @see https://vue-select.org/api/props.html#closeonselect\n\t\t /\n\t\tcloseOnSelect: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: true,\n\t\t},\n\n\t\t/\n\t\t Replace default vue-select components\n\t\t \n\t\t @see https://vue-select.org/api/props.html#components\n\t\t /\n\t\tcomponents: {\n\t\t\ttype: Object,\n\t\t\tdefault: () => ({\n\t\t\t\tDeselect: {\n\t\t\t\t\trender: createElement => createElement(Close, {\n\t\t\t\t\t\tprops: {\n\t\t\t\t\t\t\tsize: 20,\n\t\t\t\t\t\t\tfillColor: 'var(--vs-controls-color)',\n\t\t\t\t\t\t},\n\t\t\t\t\t\tstyle: {\n\t\t\t\t\t\t\tcursor: 'pointer',\n\t\t\t\t\t\t},\n\t\t\t\t\t}),\n\t\t\t\t},\n\t\t\t}),\n\t\t},\n\n\t\t/\n\t\t Sets the maximum number of options to display in the dropdown list\n\t\t /\n\t\tlimit: {\n\t\t\ttype: Number,\n\t\t\tdefault: null,\n\t\t},\n\n\t\t/\n\t\t Disable the component\n\t\t \n\t\t @see https://vue-select.org/api/props.html#disabled\n\t\t /\n\t\tdisabled: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/\n\t\t Determines whether the dropdown should be open.\n\t\t * Receives the component instance as the only argument.\n\t\t \n\t\t @see https://vue-select.org/api/props.html#dropdownshouldopen\n\t\t /\n\t\tdropdownShouldOpen: {\n\t\t\ttype: Function,\n\t\t\tdefault: ({ noDrop, open }) => {\n\t\t\t\treturn noDrop ? false : open\n\t\t\t},\n\t\t},\n\n\t\t/\n\t\t Callback to determine if the provided option should\n\t\t * match the current search text. Used to determine\n\t\t * if the option should be displayed.\n\t\t \n\t\t Defaults to the internal vue-select function documented at the link\n\t\t * below\n\t\t \n\t\t Enabling `userSelect` will automatically set this to filter by the\n\t\t * `displayName` and `subname` properties of the user option object\n\t\t * unless this prop is set explicitly\n\t\t \n\t\t @see https://vue-select.org/api/props.html#filterby\n\t\t /\n\t\tfilterBy: {\n\t\t\ttype: Function,\n\t\t\tdefault: null,\n\t\t},\n\n\t\t/\n\t\t Class for the `input`\n\t\t \n\t\t Necessary for use in NcActionInput\n\t\t /\n\t\tinputClass: {\n\t\t\ttype: [String, Object],\n\t\t\tdefault: null,\n\t\t},\n\n\t\t/\n\t\t Input element id\n\t\t \n\t\t @see https://vue-select.org/api/props.html#inputid\n\t\t /\n\t\tinputId: {\n\t\t\ttype: String,\n\t\t\tdefault: null,\n\t\t},\n\n\t\t/\n\t\t Display a visible border around dropdown options\n\t\t * which have keyboard focus\n\t\t /\n\t\tkeyboardFocusBorder: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: true,\n\t\t},\n\n\t\t/\n\t\t Key of the displayed label for object options\n\t\t \n\t\t Defaults to the internal vue-select string documented at the link\n\t\t * below\n\t\t \n\t\t Enabling `userSelect` will automatically set this to `'displayName'`\n\t\t * unless this prop is set explicitly\n\t\t \n\t\t @see https://vue-select.org/api/props.html#label\n\t\t /\n\t\tlabel: {\n\t\t\ttype: String,\n\t\t\tdefault: null,\n\t\t},\n\n\t\t/\n\t\t Show the loading icon\n\t\t \n\t\t @see https://vue-select.org/api/props.html#loading\n\t\t /\n\t\tloading: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/\n\t\t Allow selection of multiple options\n\t\t \n\t\t @see https://vue-select.org/api/props.html#multiple\n\t\t /\n\t\tmultiple: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/\n\t\t Disable automatic wrapping when selected options overflow the width\n\t\t /\n\t\tnoWrap: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/\n\t\t Array of options\n\t\t \n\t\t @type {Array<string \| number \| Record<string \| number, any>>}\n\t\t \n\t\t @see https://vue-select.org/api/props.html#options\n\t\t /\n\t\toptions: {\n\t\t\ttype: Array,\n\t\t\tdefault: () => [],\n\t\t},\n\n\t\t/\n\t\t Placeholder text\n\t\t \n\t\t @see https://vue-select.org/api/props.html#placeholder\n\t\t /\n\t\tplaceholder: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\n\t\t/\n\t\t Customized component's response to keydown events while the search input has focus\n\t\t \n\t\t @see https://vue-select.org/guide/keydown.html#mapkeydown\n\t\t /\n\t\tmapKeydown: {\n\t\t\ttype: Function,\n\t\t\t/\n\t\t\t Patched Vue-Select keydown events handlers map to stop Escape propagation in open select\n\t\t\t \n\t\t\t @param {Record<number, Function>} map - Mapped keyCode to handlers { <keyCode>:<callback> }\n\t\t\t * @param {import('@nextcloud/vue-select').VueSelect} vm - VueSelect instance\n\t\t\t * @return {Record<number, Function>} patched keydown event handlers\n\t\t\t /\n\t\t\tdefault(map, vm) {\n\t\t\t\treturn {\n\t\t\t\t\t...map,\n\t\t\t\t\t/\n\t\t\t\t\t Patched Escape handler to stop propagation from open select\n\t\t\t\t\t \n\t\t\t\t\t @param {KeyboardEvent} event - default keydown event handler\n\t\t\t\t\t /\n\t\t\t\t\t27: (event) => {\n\t\t\t\t\t\tif (vm.open) {\n\t\t\t\t\t\t\tevent.stopPropagation()\n\t\t\t\t\t\t}\n\t\t\t\t\t\t// Default VueSelect's handler\n\t\t\t\t\t\tmap[27](event)\n\t\t\t\t\t},\n\t\t\t\t}\n\t\t\t},\n\t\t},\n\n\t\t/\n\t\t A unique identifier used to generate IDs and DOM attributes. Must be unique for every instance of the component.\n\t\t \n\t\t @see https://vue-select.org/api/props.html#uid\n\t\t /\n\t\tuid: {\n\t\t\ttype: String,\n\t\t\tdefault: () => '-' + GenRandomId(),\n\t\t},\n\n\t\t/\n\t\t When `appendToBody` is true, this sets the placement of the dropdown\n\t\t \n\t\t @type {'bottom' \| 'top'}\n\t\t /\n\t\tplacement: {\n\t\t\ttype: String,\n\t\t\tdefault: 'bottom',\n\t\t},\n\n\t\t/\n\t\t If false, the focused dropdown option will not be reset when filtered\n\t\t * options change\n\t\t /\n\t\tresetFocusOnOptionsChange: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: true,\n\t\t},\n\n\t\t/\n\t\t Enable the user selector with avatars\n\t\t \n\t\t Objects must contain the data expected by the\n\t\t * [NcListItemIcon](#/Components/NcListItemIcon) and\n\t\t * [NcAvatar](#/Components/NcAvatar) components\n\t\t /\n\t\tuserSelect: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/\n\t\t Currently selected value\n\t\t \n\t\t The `v-model` directive may be used for two-way data binding\n\t\t \n\t\t @type {string \| number \| Record<string \| number, any> \| Array<any>}\n\t\t \n\t\t @see https://vue-select.org/api/props.html#value\n\t\t /\n\t\tvalue: {\n\t\t\ttype: [String, Number, Object, Array],\n\t\t\tdefault: null,\n\t\t},\n\n\t\t/\n\t\t Any available prop\n\t\t \n\t\t @see https://vue-select.org/api/props.html\n\t\t /\n\t\t// Not an actual prop but needed to show in vue-styleguidist docs\n\t\t// eslint-disable-next-line\n\t\t' ': {},\n\t},\n\n\temits: [\n\t\t/\n\t\t All events from https://vue-select.org/api/events.html\n\t\t /\n\t\t// Not an actual event but needed to show in vue-styleguidist docs\n\t\t' ',\n\t],\n\n\tdata() {\n\t\treturn {\n\t\t\tsearch: '',\n\t\t}\n\t},\n\n\tcomputed: {\n\t\tlocalCalculatePosition() {\n\t\t\tif (this.calculatePosition !== null) {\n\t\t\t\treturn this.calculatePosition\n\t\t\t}\n\n\t\t\treturn (dropdownMenu, component, { width }) => {\n\t\t\t\tdropdownMenu.style.width = width\n\n\t\t\t\tconst addClass = {\n\t\t\t\t\tname: 'addClass',\n\t\t\t\t\tfn(_middlewareArgs) {\n\t\t\t\t\t\tdropdownMenu.classList.add('vs__dropdown-menu--floating')\n\t\t\t\t\t\treturn {}\n\t\t\t\t\t},\n\t\t\t\t}\n\n\t\t\t\tconst togglePlacementClass = {\n\t\t\t\t\tname: 'togglePlacementClass',\n\t\t\t\t\tfn({ placement }) {\n\t\t\t\t\t\tcomponent.$el.classList.toggle(\n\t\t\t\t\t\t\t'select--drop-up',\n\t\t\t\t\t\t\tplacement === 'top',\n\t\t\t\t\t\t)\n\t\t\t\t\t\tdropdownMenu.classList.toggle(\n\t\t\t\t\t\t\t'vs__dropdown-menu--floating-placement-top',\n\t\t\t\t\t\t\tplacement === 'top',\n\t\t\t\t\t\t)\n\t\t\t\t\t\treturn {}\n\t\t\t\t\t},\n\t\t\t\t}\n\n\t\t\t\tconst updatePosition = () => {\n\t\t\t\t\tcomputePosition(component.$refs.toggle, dropdownMenu, {\n\t\t\t\t\t\tplacement: this.placement,\n\t\t\t\t\t\tmiddleware: [\n\t\t\t\t\t\t\toffset(-1),\n\t\t\t\t\t\t\taddClass,\n\t\t\t\t\t\t\ttogglePlacementClass,\n\t\t\t\t\t\t\t// Match popperjs default collision prevention behavior by appending the following middleware in order\n\t\t\t\t\t\t\tflip(),\n\t\t\t\t\t\t\tshift({ limiter: limitShift() }),\n\t\t\t\t\t\t],\n\t\t\t\t\t}).then(({ x, y }) => {\n\t\t\t\t\t\tObject.assign(dropdownMenu.style, {\n\t\t\t\t\t\t\tleft: `${x}px`,\n\t\t\t\t\t\t\ttop: `${y}px`,\n\t\t\t\t\t\t})\n\t\t\t\t\t})\n\t\t\t\t}\n\n\t\t\t\tconst cleanup = autoUpdate(\n\t\t\t\t\tcomponent.$refs.toggle,\n\t\t\t\t\tdropdownMenu,\n\t\t\t\t\tupdatePosition,\n\t\t\t\t)\n\n\t\t\t\treturn cleanup\n\t\t\t}\n\t\t},\n\n\t\tlocalFilterBy() {\n\t\t\tif (this.filterBy !== null) {\n\t\t\t\treturn this.filterBy\n\t\t\t}\n\t\t\tif (this.userSelect) {\n\t\t\t\treturn (option, label, search) => {\n\t\t\t\t\treturn (`${label} ${option.subname}` \|\| '')\n\t\t\t\t\t\t.toLocaleLowerCase()\n\t\t\t\t\t\t.indexOf(search.toLocaleLowerCase()) > -1\n\t\t\t\t}\n\t\t\t}\n\t\t\treturn VueSelect.props.filterBy.default\n\t\t},\n\n\t\tlocalLabel() {\n\t\t\tif (this.label !== null) {\n\t\t\t\treturn this.label\n\t\t\t}\n\t\t\tif (this.userSelect) {\n\t\t\t\treturn 'displayName'\n\t\t\t}\n\t\t\treturn VueSelect.props.label.default\n\t\t},\n\n\t\tpropsToForward() {\n\t\t\tconst {\n\t\t\t\t// Props handled by this component\n\t\t\t\tinputClass,\n\t\t\t\tnoWrap,\n\t\t\t\tplacement,\n\t\t\t\tuserSelect,\n\t\t\t\t// Props to forward\n\t\t\t\t...initialPropsToForward\n\t\t\t} = this.$props\n\n\t\t\tconst propsToForward = {\n\t\t\t\t...initialPropsToForward,\n\t\t\t\t// Custom overrides of vue-select props\n\t\t\t\tcalculatePosition: this.localCalculatePosition,\n\t\t\t\tfilterBy: this.localFilterBy,\n\t\t\t\tlabel: this.localLabel,\n\t\t\t}\n\n\t\t\treturn propsToForward\n\t\t},\n\t},\n}\n</script>\n\n<style lang=\"scss\">\nbody {\n\t/\n\t Set custom vue-select CSS variables.\n\t * Needs to be on the body (not :root) for theming to apply (see nextcloud/server#36462)\n\t /\n\n\t/ Search Input /\n\t--vs-search-input-color: var(--color-main-text);\n\t--vs-search-input-bg: var(--color-main-background);\n\t--vs-search-input-placeholder-color: var(--color-text-maxcontrast);\n\n\t/ Font /\n\t--vs-font-size: var(--default-font-size);\n\t--vs-line-height: var(--default-line-height);\n\n\t/ Disabled State /\n\t--vs-state-disabled-bg: var(--color-background-hover);\n\t--vs-state-disabled-color: var(--color-text-maxcontrast);\n\t--vs-state-disabled-controls-color: var(--color-text-maxcontrast);\n\t--vs-state-disabled-cursor: not-allowed;\n\t--vs-disabled-bg: var(--color-background-hover);\n\t--vs-disabled-color: var(--color-text-maxcontrast);\n\t--vs-disabled-cursor: not-allowed;\n\n\t/ Borders /\n\t--vs-border-color: var(--color-border-maxcontrast);\n\t--vs-border-width: 2px;\n\t--vs-border-style: solid;\n\t--vs-border-radius: var(--border-radius-large);\n\n\t/ Component Controls: Clear, Open Indicator /\n\t--vs-controls-color: var(--color-text-maxcontrast);\n\n\t/ Selected /\n\t--vs-selected-bg: var(--color-background-dark);\n\t--vs-selected-color: var(--color-main-text);\n\t--vs-selected-border-color: var(--vs-border-color);\n\t--vs-selected-border-style: var(--vs-border-style);\n\t--vs-selected-border-width: var(--vs-border-width);\n\n\t/ Dropdown /\n\t--vs-dropdown-bg: var(--color-main-background);\n\t--vs-dropdown-color: var(--color-main-text);\n\t--vs-dropdown-z-index: 9999;\n\t--vs-dropdown-box-shadow: 0px 2px 2px 0px var(--color-box-shadow);\n\n\t/ Options /\n\t--vs-dropdown-option-padding: 8px 20px;\n\n\t/ Active State /\n\t--vs-dropdown-option--active-bg: var(--color-background-hover);\n\t--vs-dropdown-option--active-color: var(--color-main-text);\n\n\t/ Keyboard Focus State /\n\t--vs-dropdown-option--kb-focus-box-shadow: inset 0px 0px 0px 2px var(--vs-border-color);\n\n\t/ Deselect State /\n\t--vs-dropdown-option--deselect-bg: var(--color-error);\n\t--vs-dropdown-option--deselect-color: #fff;\n\n\t/ Transitions /\n\t--vs-transition-duration: 0ms;\n}\n\n.v-select.select {\n\t/ Override default vue-select styles /\n\tmin-height: $clickable-area;\n\tmin-width: 260px;\n\tmargin: 0;\n\n\t.vs__selected {\n\t\tmin-height: 36px;\n\t\tpadding: 0 0.5em;\n\t\tborder-radius: calc(var(--vs-border-radius) - 4px) !important;\n\t}\n\n\t.vs__clear {\n\t\tmargin-right: 2px;\n\t}\n\n\t&.vs--open .vs__dropdown-toggle {\n\t\tborder-color: var(--color-primary-element);\n\t\tborder-bottom-color: transparent;\n\t}\n\n\t&:not(.vs--disabled, .vs--open) .vs__dropdown-toggle:hover {\n\t\tborder-color: var(--color-primary-element);\n\t}\n\n\t&.vs--disabled {\n\t\t.vs__search,\n\t\t.vs__selected {\n\t\t\tcolor: var(--color-text-maxcontrast);\n\t\t}\n\n\t\t.vs__clear,\n\t\t.vs__deselect {\n\t\t\tdisplay: none;\n\t\t}\n\t}\n\n\t&--no-wrap {\n\t\t.vs__selected-options {\n\t\t\tflex-wrap: nowrap;\n\t\t\toverflow: auto;\n\t\t\tmin-width: unset;\n\t\t\t.vs__selected {\n\t\t\t\tmin-width: unset;\n\t\t\t}\n\t\t}\n\t}\n\n\t&--drop-up {\n\t\t&.vs--open {\n\t\t\t.vs__dropdown-toggle {\n\t\t\t\tborder-radius: 0 0 var(--vs-border-radius) var(--vs-border-radius);\n\t\t\t\tborder-top-color: transparent;\n\t\t\t\tborder-bottom-color: var(--color-primary-element);\n\t\t\t}\n\t\t}\n\t}\n\n\t.vs__selected-options {\n\t\t// If search is hidden, ensure that the height of the search is the same\n\t\tmin-height: 40px; // 36px search height + 4px search margin\n\n\t\t// Hide search from dom if unused to prevent unneeded flex wrap\n\t\t.vs__selected ~ .vs__search[readonly] {\n\t\t\tposition: absolute;\n\t\t}\n\t}\n\n\t&.vs--single {\n\t\t&.vs--loading,\n\t\t&.vs--open {\n\t\t\t.vs__selected {\n\t\t\t\t// Fix `max-width` for `position: absolute`\n\t\t\t\tmax-width: 100%;\n\t\t\t}\n\t\t}\n\t\t.vs__selected-options {\n\t\t\tflex-wrap: nowrap;\n\t\t}\n\t}\n}\n\n.vs__dropdown-menu {\n\tborder-color: var(--color-primary-element) !important;\n\tpadding: 4px !important;\n\n\t&--floating {\n\t\t/ Fallback styles overidden by programmatically set inline styles */\n\t\twidth: max-content;\n\t\tposition: absolute;\n\t\ttop: 0;\n\t\tleft: 0;\n\n\t\t&-placement-top {\n\t\t\tborder-radius: var(--vs-border-radius) var(--vs-border-radius) 0 0 !important;\n\t\t\tborder-top-style: var(--vs-border-style) !important;\n\t\t\tborder-bottom-style: none !important;\n\t\t\tbox-shadow: 0px -1px 1px 0px var(--color-box-shadow) !important;\n\t\t}\n\t}\n\n\t.vs__dropdown-option {\n\t\tborder-radius: 6px !important;\n\t}\n\n\t.vs__no-options {\n\t\tcolor: var(--color-text-lighter) !important;\n\t}\n}\n</style>\n"],"names":["_sfc_main","ChevronDown__default","Components_NcEllipsisedOption","Components_NcListItemIcon","Components_NcLoadingIcon","vueSelect","l10n","createElement","Close__default","noDrop","open","map","vm","event","GenRandomId","dropdownMenu","component","width","addClass","_middlewareArgs","togglePlacementClass","placement","updatePosition","dom","x","y","option","label","search","inputClass","noWrap","userSelect","initialPropsToForward"],"mappings":"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"}
1	+ {"version":3,"file":"NcSelect.cjs","sources":["../../src/components/NcSelect/NcSelect.vue"],"sourcesContent":["<!--\n\t- @copyright 2022 Christopher Ng <chrng8@gmail.com>\n\t-\n\t- @author Christopher Ng <chrng8@gmail.com>\n\t-\n\t- @license AGPL-3.0-or-later\n\t-\n\t- This program is free software: you can redistribute it and/or modify\n\t- it under the terms of the GNU Affero General Public License as\n\t- published by the Free Software Foundation, either version 3 of the\n\t- License, or (at your option) any later version.\n\t-\n\t- This program is distributed in the hope that it will be useful,\n\t- but WITHOUT ANY WARRANTY; without even the implied warranty of\n\t- MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the\n\t- GNU Affero General Public License for more details.\n\t-\n\t- You should have received a copy of the GNU Affero General Public License\n\t- along with this program. If not, see <http://www.gnu.org/licenses/>.\n\t-\n-->\n\n<docs>\n### Description\n\nGeneral purpose multiselect component.\n\n### Basic examples\n\n```vue\n<template>\n\t<div class=\"grid\">\n\t\t<div v-for=\"{ name, props } in selectArray\"\n\t\t\tclass=\"container\">\n\t\t\t<label :for=\"props.inputId\">{{ name }}</label>\n\t\t\t<NcSelect v-bind=\"props\"\n\t\t\t\tv-model=\"props.value\" />\n\t\t</div>\n\t</div>\n</template>\n\n<script>\nimport GenRandomId from '../../utils/GenRandomId.js'\n\nconst getRandomId = () => {\n\treturn `select-${GenRandomId()}`\n}\n\nconst selectArray = [\n\t{\n\t\tname: 'Simple',\n\t\tprops: {\n\t\t\tinputId: getRandomId(),\n\t\t\toptions: [\n\t\t\t\t'foo',\n\t\t\t\t'bar',\n\t\t\t\t'baz',\n\t\t\t\t'qux',\n\t\t\t\t'quux',\n\t\t\t],\n\t\t},\n\t},\n\n\t{\n\t\tname: 'Simple (top placement)',\n\t\tprops: {\n\t\t\tinputId: getRandomId(),\n\t\t\tplacement: 'top',\n\t\t\toptions: [\n\t\t\t\t'foo',\n\t\t\t\t'bar',\n\t\t\t\t'baz',\n\t\t\t\t'qux',\n\t\t\t\t'quux',\n\t\t\t],\n\t\t},\n\t},\n\n\t{\n\t\tname: 'Multiple (with placeholder)',\n\t\tprops: {\n\t\t\tinputId: getRandomId(),\n\t\t\tmultiple: true,\n\t\t\tplaceholder: 'Select multiple options',\n\t\t\toptions: [\n\t\t\t\t'foo',\n\t\t\t\t'bar',\n\t\t\t\t'baz',\n\t\t\t\t'qux',\n\t\t\t\t'quux',\n\t\t\t],\n\t\t},\n\t},\n\n\t{\n\t\tname: 'Multiple (objects, pre-selected, stay open on select)',\n\t\tprops: {\n\t\t\tinputId: getRandomId(),\n\t\t\tmultiple: true,\n\t\t\tcloseOnSelect: false,\n\t\t\toptions: [\n\t\t\t\t{\n\t\t\t\t\tid: 'foo',\n\t\t\t\t\tlabel: 'Foo',\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\tid: 'bar',\n\t\t\t\t\tlabel: 'Bar',\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\tid: 'baz',\n\t\t\t\t\tlabel: 'Baz',\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\tid: 'qux',\n\t\t\t\t\tlabel: 'Qux',\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\tid: 'quux',\n\t\t\t\t\tlabel: 'Quux',\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\tid: 'corge',\n\t\t\t\t\tlabel: 'Corge',\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\tid: 'grault',\n\t\t\t\t\tlabel: 'Grault',\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\tid: 'garply',\n\t\t\t\t\tlabel: 'Garply',\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\tid: 'waldo',\n\t\t\t\t\tlabel: 'Waldo',\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\tid: 'fred',\n\t\t\t\t\tlabel: 'Fred',\n\t\t\t\t},\n\t\t\t],\n\t\t\tvalue: [\n\t\t\t\t{\n\t\t\t\t\tid: 'foo',\n\t\t\t\t\tlabel: 'Foo',\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\tid: 'bar',\n\t\t\t\t\tlabel: 'Bar',\n\t\t\t\t},\n\t\t\t],\n\t\t},\n\t},\n]\n\nexport default {\n\tdata() {\n\t\treturn {\n\t\t\tselectArray,\n\t\t}\n\t},\n}\n</script>\n\n<style>\n.grid {\n\tdisplay: grid;\n\tgrid-template-columns: repeat(2, 1fr);\n\tgap: 10px;\n}\n\n.container {\n\tdisplay: flex;\n\tflex-direction: column;\n\tgap: 2px 0;\n}\n</style>\n```\n\n### No wrap example\n\nThe `noWrap` prop is set to `true` and the `max-width` of the multiselect\nparent container is limited to `350px`\n\n```vue\n<template>\n\t<div class=\"grid\">\n\t\t<div class=\"container\">\n\t\t\t<label :for=\"data1.props.inputId\">{{ data1.name }}</label>\n\t\t\t<NcSelect :no-wrap=\"false\"\n\t\t\t\tv-bind=\"data1.props\"\n\t\t\t\tv-model=\"data1.props.value\" />\n\t\t</div>\n\t\t<div class=\"container\">\n\t\t\t<label :for=\"data2.props.inputId\">{{ data2.name }}</label>\n\t\t\t<NcSelect :no-wrap=\"true\"\n\t\t\t\tv-bind=\"data2.props\"\n\t\t\t\tv-model=\"data2.props.value\" />\n\t\t</div>\n\t</div>\n</template>\n\n<script>\nimport GenRandomId from '../../utils/GenRandomId.js'\n\nconst getRandomId = () => {\n\treturn `select-${GenRandomId()}`\n}\n\nconst data1 = {\n\tname: 'Wrapped (Default)',\n\tprops: {\n\t\tinputId: getRandomId(),\n\t\tmultiple: true,\n\t\tcloseOnSelect: false,\n\t\toptions: [\n\t\t\t'foo',\n\t\t\t'bar',\n\t\t\t'baz',\n\t\t\t'qux',\n\t\t\t'quux',\n\t\t\t'corge',\n\t\t\t'grault',\n\t\t\t'garply',\n\t\t\t'waldo',\n\t\t\t'fred',\n\t\t],\n\t\tvalue: [\n\t\t\t'foo',\n\t\t\t'bar',\n\t\t\t'baz',\n\t\t\t'qux',\n\t\t\t'quux',\n\t\t\t'corge',\n\t\t\t'grault',\n\t\t\t'garply',\n\t\t\t'waldo',\n\t\t\t'fred',\n\t\t],\n\t},\n}\n\nconst data2 = {\n\tname: 'Not wrapped',\n\tprops: {\n\t\tinputId: getRandomId(),\n\t\tmultiple: true,\n\t\tcloseOnSelect: false,\n\t\toptions: [\n\t\t\t'foo',\n\t\t\t'bar',\n\t\t\t'baz',\n\t\t\t'qux',\n\t\t\t'quux',\n\t\t\t'corge',\n\t\t\t'grault',\n\t\t\t'garply',\n\t\t\t'waldo',\n\t\t\t'fred',\n\t\t],\n\t\tvalue: [\n\t\t\t'foo',\n\t\t\t'bar',\n\t\t\t'baz',\n\t\t\t'qux',\n\t\t\t'quux',\n\t\t\t'corge',\n\t\t\t'grault',\n\t\t\t'garply',\n\t\t\t'waldo',\n\t\t\t'fred',\n\t\t],\n\t},\n}\n\nexport default {\n\tdata() {\n\t\treturn {\n\t\t\tdata1,\n\t\t\tdata2,\n\t\t}\n\t},\n}\n</script>\n\n<style>\n.grid {\n\tdisplay: grid;\n\tgrid-template-columns: repeat(1, 1fr);\n\tgap: 10px;\n}\n\n.container {\n\tmax-width: 350px;\n\tdisplay: flex;\n\tflex-direction: column;\n\tgap: 2px 0;\n}\n</style>\n```\n\n### User select examples\n\n```vue\n<template>\n\t<div class=\"grid\">\n\t\t<div v-for=\"{ name, props } in selectArray\"\n\t\t\tclass=\"container\">\n\t\t\t<label :for=\"props.inputId\">{{ name }}</label>\n\t\t\t<NcSelect v-bind=\"props\"\n\t\t\t\tv-model=\"props.value\" />\n\t\t</div>\n\t</div>\n</template>\n\n<script>\nimport AccountGroup from '@mdi/svg/svg/account-group.svg?raw'\nimport Email from '@mdi/svg/svg/email.svg?raw'\n\nimport GenRandomId from '../../utils/GenRandomId.js'\n\nconst getRandomId = () => {\n\treturn `select-${GenRandomId()}`\n}\n\nconst selectArray = [\n\t{\n\t\tname: 'User select',\n\t\tprops: {\n\t\t\tinputId: getRandomId(),\n\t\t\tuserSelect: true,\n\t\t\toptions: [\n\t\t\t\t{\n\t\t\t\t\tid: '0-john',\n\t\t\t\t\tdisplayName: 'John',\n\t\t\t\t\tisNoUser: false,\n\t\t\t\t\tsubname: 'john@example.org',\n\t\t\t\t\ticon: '',\n\t\t\t\t\t// Example of how to show the user status within the option\n\t\t\t\t\tuser: '0-john',\n\t\t\t\t\tpreloadedUserStatus: {\n\t\t\t\t\t\ticon: '',\n\t\t\t\t\t\tstatus: 'online',\n\t\t\t\t\t\tmessage: 'I am online',\n\t\t\t\t\t},\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\tid: '0-emma',\n\t\t\t\t\tdisplayName: 'Emma',\n\t\t\t\t\tisNoUser: false,\n\t\t\t\t\tsubname: 'emma@example.org',\n\t\t\t\t\ticon: '',\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\tid: '0-olivia',\n\t\t\t\t\tdisplayName: 'Olivia',\n\t\t\t\t\tisNoUser: false,\n\t\t\t\t\tsubname: 'olivia@example.org',\n\t\t\t\t\ticon: '',\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\tid: '0-noah',\n\t\t\t\t\tdisplayName: 'Noah',\n\t\t\t\t\tisNoUser: false,\n\t\t\t\t\tsubname: 'noah@example.org',\n\t\t\t\t\ticon: '',\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\tid: '0-oliver',\n\t\t\t\t\tdisplayName: 'Oliver',\n\t\t\t\t\tisNoUser: false,\n\t\t\t\t\tsubname: 'oliver@example.org',\n\t\t\t\t\ticon: '',\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\tid: '1-admin',\n\t\t\t\t\tdisplayName: 'Admin',\n\t\t\t\t\tisNoUser: true,\n\t\t\t\t\tsubname: null,\n\t\t\t\t\ticonSvg: AccountGroup,\n\t\t\t\t\ticonName: 'Group icon',\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\tid: '2-org@example.org',\n\t\t\t\t\tdisplayName: 'Organization',\n\t\t\t\t\tisNoUser: true,\n\t\t\t\t\tsubname: 'org@example.org',\n\t\t\t\t\ticonSvg: Email,\n\t\t\t\t\ticonName: 'Email icon',\n\t\t\t\t},\n\t\t\t],\n\t\t},\n\t},\n\n\t{\n\t\tname: 'Multiple user select (stay open on select)',\n\t\tprops: {\n\t\t\tinputId: getRandomId(),\n\t\t\tuserSelect: true,\n\t\t\tmultiple: true,\n\t\t\tcloseOnSelect: false,\n\t\t\toptions: [\n\t\t\t\t{\n\t\t\t\t\tid: '0-john',\n\t\t\t\t\tdisplayName: 'John',\n\t\t\t\t\tisNoUser: false,\n\t\t\t\t\tsubname: 'john@example.org',\n\t\t\t\t\ticon: '',\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\tid: '0-emma',\n\t\t\t\t\tdisplayName: 'Emma',\n\t\t\t\t\tisNoUser: false,\n\t\t\t\t\tsubname: 'emma@example.org',\n\t\t\t\t\ticon: '',\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\tid: '0-olivia',\n\t\t\t\t\tdisplayName: 'Olivia',\n\t\t\t\t\tisNoUser: false,\n\t\t\t\t\tsubname: 'olivia@example.org',\n\t\t\t\t\ticon: '',\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\tid: '0-noah',\n\t\t\t\t\tdisplayName: 'Noah',\n\t\t\t\t\tisNoUser: false,\n\t\t\t\t\tsubname: 'noah@example.org',\n\t\t\t\t\ticon: '',\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\tid: '0-oliver',\n\t\t\t\t\tdisplayName: 'Oliver',\n\t\t\t\t\tisNoUser: false,\n\t\t\t\t\tsubname: 'oliver@example.org',\n\t\t\t\t\ticon: '',\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\tid: '1-admin',\n\t\t\t\t\tdisplayName: 'Admin',\n\t\t\t\t\tisNoUser: true,\n\t\t\t\t\tsubname: null,\n\t\t\t\t\ticonSvg: AccountGroup,\n\t\t\t\t\ticonName: 'Group icon',\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\tid: '2-org@example.org',\n\t\t\t\t\tdisplayName: 'Organization',\n\t\t\t\t\tisNoUser: true,\n\t\t\t\t\tsubname: 'org@example.org',\n\t\t\t\t\ticonSvg: Email,\n\t\t\t\t\ticonName: 'Email icon',\n\t\t\t\t},\n\t\t\t],\n\t\t},\n\t},\n]\n\nexport default {\n\tdata() {\n\t\treturn {\n\t\t\tselectArray,\n\t\t}\n\t},\n}\n</script>\n\n<style>\n.grid {\n\tdisplay: grid;\n\tgrid-template-columns: repeat(1, 500px);\n\tgap: 10px;\n}\n\n.container {\n\tdisplay: flex;\n\tflex-direction: column;\n\tgap: 2px 0;\n}\n</style>\n```\n</docs>\n\n<template>\n\t<VueSelect class=\"select\"\n\t\t:class=\"{\n\t\t\t'select--no-wrap': noWrap,\n\t\t}\"\n\t\tv-bind=\"propsToForward\"\n\t\tv-on=\"$listeners\"\n\t\t@search=\"searchString => search = searchString\">\n\t\t<template #search=\"{ attributes, events }\">\n\t\t\t<input :class=\"['vs__search', inputClass]\"\n\t\t\t\tv-bind=\"attributes\"\n\t\t\t\tv-on=\"events\">\n\t\t</template>\n\t\t<template #open-indicator=\"{ attributes }\">\n\t\t\t<ChevronDown v-bind=\"attributes\"\n\t\t\t\tfill-color=\"var(--vs-controls-color)\"\n\t\t\t\t:size=\"26\" />\n\t\t\t\t<!-- Set size to 26 to make up for the increased padding of this icon -->\n\t\t</template>\n\t\t<template #option=\"option\">\n\t\t\t<NcListItemIcon v-if=\"userSelect\"\n\t\t\t\tv-bind=\"option\"\n\t\t\t\t:name=\"option[localLabel]\"\n\t\t\t\t:search=\"search\" />\n\t\t\t<NcEllipsisedOption v-else\n\t\t\t\t:name=\"String(option[localLabel])\"\n\t\t\t\t:search=\"search\" />\n\t\t</template>\n\t\t<template #selected-option=\"selectedOption\">\n\t\t\t<NcListItemIcon v-if=\"userSelect\"\n\t\t\t\tv-bind=\"selectedOption\"\n\t\t\t\t:name=\"selectedOption[localLabel]\"\n\t\t\t\t:search=\"search\" />\n\t\t\t<NcEllipsisedOption v-else\n\t\t\t\t:name=\"String(selectedOption[localLabel])\"\n\t\t\t\t:search=\"search\" />\n\t\t</template>\n\t\t<template #spinner=\"spinner\">\n\t\t\t<NcLoadingIcon v-if=\"spinner.loading\" />\n\t\t</template>\n\t\t<template #no-options>\n\t\t\t{{ t('No results') }}\n\t\t</template>\n\t\t<template v-for=\"(_, name) in $scopedSlots\" #[name]=\"data\">\n\t\t\t<!-- @slot Any combination of slots from https://vue-select.org/api/slots.html -->\n\t\t\t<slot :name=\"name\" v-bind=\"data\" />\n\t\t</template>\n\t</VueSelect>\n</template>\n\n<script>\nimport { VueSelect } from '@nextcloud/vue-select'\nimport '@nextcloud/vue-select/dist/vue-select.css'\nimport {\n\tautoUpdate,\n\tcomputePosition,\n\tflip,\n\tlimitShift,\n\toffset,\n\tshift,\n} from '@floating-ui/dom'\n\nimport ChevronDown from 'vue-material-design-icons/ChevronDown.vue'\nimport Close from 'vue-material-design-icons/Close.vue'\n\nimport NcEllipsisedOption from '../NcEllipsisedOption/index.js'\nimport NcListItemIcon from '../NcListItemIcon/index.js'\nimport NcLoadingIcon from '../NcLoadingIcon/index.js'\n\nimport l10n from '../../mixins/l10n.js'\n\nimport GenRandomId from '../../utils/GenRandomId.js'\n\nexport default {\n\tname: 'NcSelect',\n\n\tcomponents: {\n\t\tChevronDown,\n\t\tNcEllipsisedOption,\n\t\tNcListItemIcon,\n\t\tNcLoadingIcon,\n\t\tVueSelect,\n\t},\n\n\tmixins: [\n\t\tl10n,\n\t],\n\n\tprops: {\n\t\t// Add VueSelect props to $props\n\t\t...VueSelect.props,\n\n\t\t/*\n\t\t Append the dropdown element to the end of the body\n\t\t * and size/position it dynamically.\n\t\t \n\t\t @see https://vue-select.org/api/props.html#appendtobody\n\t\t /\n\t\tappendToBody: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: true,\n\t\t},\n\n\t\t/\n\t\t When `appendToBody` is true, this function is responsible for\n\t\t * positioning the drop down list.\n\t\t \n\t\t If a function is returned from `calculatePosition`, it will\n\t\t * be called when the drop down list is removed from the DOM.\n\t\t * This allows for any garbage collection you may need to do.\n\t\t \n\t\t @see https://vue-select.org/api/props.html#calculateposition\n\t\t /\n\t\tcalculatePosition: {\n\t\t\ttype: Function,\n\t\t\tdefault: null,\n\t\t},\n\n\t\t/\n\t\t Close the dropdown when selecting an option\n\t\t \n\t\t @see https://vue-select.org/api/props.html#closeonselect\n\t\t /\n\t\tcloseOnSelect: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: true,\n\t\t},\n\n\t\t/\n\t\t Replace default vue-select components\n\t\t \n\t\t @see https://vue-select.org/api/props.html#components\n\t\t /\n\t\tcomponents: {\n\t\t\ttype: Object,\n\t\t\tdefault: () => ({\n\t\t\t\tDeselect: {\n\t\t\t\t\trender: createElement => createElement(Close, {\n\t\t\t\t\t\tprops: {\n\t\t\t\t\t\t\tsize: 20,\n\t\t\t\t\t\t\tfillColor: 'var(--vs-controls-color)',\n\t\t\t\t\t\t},\n\t\t\t\t\t\tstyle: {\n\t\t\t\t\t\t\tcursor: 'pointer',\n\t\t\t\t\t\t},\n\t\t\t\t\t}),\n\t\t\t\t},\n\t\t\t}),\n\t\t},\n\n\t\t/\n\t\t Sets the maximum number of options to display in the dropdown list\n\t\t /\n\t\tlimit: {\n\t\t\ttype: Number,\n\t\t\tdefault: null,\n\t\t},\n\n\t\t/\n\t\t Disable the component\n\t\t \n\t\t @see https://vue-select.org/api/props.html#disabled\n\t\t /\n\t\tdisabled: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/\n\t\t Determines whether the dropdown should be open.\n\t\t * Receives the component instance as the only argument.\n\t\t \n\t\t @see https://vue-select.org/api/props.html#dropdownshouldopen\n\t\t /\n\t\tdropdownShouldOpen: {\n\t\t\ttype: Function,\n\t\t\tdefault: ({ noDrop, open }) => {\n\t\t\t\treturn noDrop ? false : open\n\t\t\t},\n\t\t},\n\n\t\t/\n\t\t Callback to determine if the provided option should\n\t\t * match the current search text. Used to determine\n\t\t * if the option should be displayed.\n\t\t \n\t\t Defaults to the internal vue-select function documented at the link\n\t\t * below\n\t\t \n\t\t Enabling `userSelect` will automatically set this to filter by the\n\t\t * `displayName` and `subname` properties of the user option object\n\t\t * unless this prop is set explicitly\n\t\t \n\t\t @see https://vue-select.org/api/props.html#filterby\n\t\t /\n\t\tfilterBy: {\n\t\t\ttype: Function,\n\t\t\tdefault: null,\n\t\t},\n\n\t\t/\n\t\t Class for the `input`\n\t\t \n\t\t Necessary for use in NcActionInput\n\t\t /\n\t\tinputClass: {\n\t\t\ttype: [String, Object],\n\t\t\tdefault: null,\n\t\t},\n\n\t\t/\n\t\t Input element id\n\t\t \n\t\t @see https://vue-select.org/api/props.html#inputid\n\t\t /\n\t\tinputId: {\n\t\t\ttype: String,\n\t\t\tdefault: null,\n\t\t},\n\n\t\t/\n\t\t Display a visible border around dropdown options\n\t\t * which have keyboard focus\n\t\t /\n\t\tkeyboardFocusBorder: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: true,\n\t\t},\n\n\t\t/\n\t\t Key of the displayed label for object options\n\t\t \n\t\t Defaults to the internal vue-select string documented at the link\n\t\t * below\n\t\t \n\t\t Enabling `userSelect` will automatically set this to `'displayName'`\n\t\t * unless this prop is set explicitly\n\t\t \n\t\t @see https://vue-select.org/api/props.html#label\n\t\t /\n\t\tlabel: {\n\t\t\ttype: String,\n\t\t\tdefault: null,\n\t\t},\n\n\t\t/\n\t\t Show the loading icon\n\t\t \n\t\t @see https://vue-select.org/api/props.html#loading\n\t\t /\n\t\tloading: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/\n\t\t Allow selection of multiple options\n\t\t \n\t\t @see https://vue-select.org/api/props.html#multiple\n\t\t /\n\t\tmultiple: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/\n\t\t Disable automatic wrapping when selected options overflow the width\n\t\t /\n\t\tnoWrap: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/\n\t\t Array of options\n\t\t \n\t\t @type {Array<string \| number \| Record<string \| number, any>>}\n\t\t \n\t\t @see https://vue-select.org/api/props.html#options\n\t\t /\n\t\toptions: {\n\t\t\ttype: Array,\n\t\t\tdefault: () => [],\n\t\t},\n\n\t\t/\n\t\t Placeholder text\n\t\t \n\t\t @see https://vue-select.org/api/props.html#placeholder\n\t\t /\n\t\tplaceholder: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\n\t\t/\n\t\t Customized component's response to keydown events while the search input has focus\n\t\t \n\t\t @see https://vue-select.org/guide/keydown.html#mapkeydown\n\t\t /\n\t\tmapKeydown: {\n\t\t\ttype: Function,\n\t\t\t/\n\t\t\t Patched Vue-Select keydown events handlers map to stop Escape propagation in open select\n\t\t\t \n\t\t\t @param {Record<number, Function>} map - Mapped keyCode to handlers { <keyCode>:<callback> }\n\t\t\t * @param {import('@nextcloud/vue-select').VueSelect} vm - VueSelect instance\n\t\t\t * @return {Record<number, Function>} patched keydown event handlers\n\t\t\t /\n\t\t\tdefault(map, vm) {\n\t\t\t\treturn {\n\t\t\t\t\t...map,\n\t\t\t\t\t/\n\t\t\t\t\t Patched Escape handler to stop propagation from open select\n\t\t\t\t\t \n\t\t\t\t\t @param {KeyboardEvent} event - default keydown event handler\n\t\t\t\t\t /\n\t\t\t\t\t27: (event) => {\n\t\t\t\t\t\tif (vm.open) {\n\t\t\t\t\t\t\tevent.stopPropagation()\n\t\t\t\t\t\t}\n\t\t\t\t\t\t// Default VueSelect's handler\n\t\t\t\t\t\tmap[27](event)\n\t\t\t\t\t},\n\t\t\t\t}\n\t\t\t},\n\t\t},\n\n\t\t/\n\t\t A unique identifier used to generate IDs and DOM attributes. Must be unique for every instance of the component.\n\t\t \n\t\t @see https://vue-select.org/api/props.html#uid\n\t\t /\n\t\tuid: {\n\t\t\ttype: String,\n\t\t\tdefault: () => '-' + GenRandomId(),\n\t\t},\n\n\t\t/\n\t\t When `appendToBody` is true, this sets the placement of the dropdown\n\t\t \n\t\t @type {'bottom' \| 'top'}\n\t\t /\n\t\tplacement: {\n\t\t\ttype: String,\n\t\t\tdefault: 'bottom',\n\t\t},\n\n\t\t/\n\t\t If false, the focused dropdown option will not be reset when filtered\n\t\t * options change\n\t\t /\n\t\tresetFocusOnOptionsChange: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: true,\n\t\t},\n\n\t\t/\n\t\t Enable the user selector with avatars\n\t\t \n\t\t Objects must contain the data expected by the\n\t\t * [NcListItemIcon](#/Components/NcListItemIcon) and\n\t\t * [NcAvatar](#/Components/NcAvatar) components\n\t\t /\n\t\tuserSelect: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/\n\t\t Currently selected value\n\t\t \n\t\t The `v-model` directive may be used for two-way data binding\n\t\t \n\t\t @type {string \| number \| Record<string \| number, any> \| Array<any>}\n\t\t \n\t\t @see https://vue-select.org/api/props.html#value\n\t\t /\n\t\tvalue: {\n\t\t\ttype: [String, Number, Object, Array],\n\t\t\tdefault: null,\n\t\t},\n\n\t\t/\n\t\t Any available prop\n\t\t \n\t\t @see https://vue-select.org/api/props.html\n\t\t /\n\t\t// Not an actual prop but needed to show in vue-styleguidist docs\n\t\t// eslint-disable-next-line\n\t\t' ': {},\n\t},\n\n\temits: [\n\t\t/\n\t\t All events from https://vue-select.org/api/events.html\n\t\t /\n\t\t// Not an actual event but needed to show in vue-styleguidist docs\n\t\t' ',\n\t],\n\n\tdata() {\n\t\treturn {\n\t\t\tsearch: '',\n\t\t}\n\t},\n\n\tcomputed: {\n\t\tlocalCalculatePosition() {\n\t\t\tif (this.calculatePosition !== null) {\n\t\t\t\treturn this.calculatePosition\n\t\t\t}\n\n\t\t\treturn (dropdownMenu, component, { width }) => {\n\t\t\t\tdropdownMenu.style.width = width\n\n\t\t\t\tconst addClass = {\n\t\t\t\t\tname: 'addClass',\n\t\t\t\t\tfn(_middlewareArgs) {\n\t\t\t\t\t\tdropdownMenu.classList.add('vs__dropdown-menu--floating')\n\t\t\t\t\t\treturn {}\n\t\t\t\t\t},\n\t\t\t\t}\n\n\t\t\t\tconst togglePlacementClass = {\n\t\t\t\t\tname: 'togglePlacementClass',\n\t\t\t\t\tfn({ placement }) {\n\t\t\t\t\t\tcomponent.$el.classList.toggle(\n\t\t\t\t\t\t\t'select--drop-up',\n\t\t\t\t\t\t\tplacement === 'top',\n\t\t\t\t\t\t)\n\t\t\t\t\t\tdropdownMenu.classList.toggle(\n\t\t\t\t\t\t\t'vs__dropdown-menu--floating-placement-top',\n\t\t\t\t\t\t\tplacement === 'top',\n\t\t\t\t\t\t)\n\t\t\t\t\t\treturn {}\n\t\t\t\t\t},\n\t\t\t\t}\n\n\t\t\t\tconst updatePosition = () => {\n\t\t\t\t\tcomputePosition(component.$refs.toggle, dropdownMenu, {\n\t\t\t\t\t\tplacement: this.placement,\n\t\t\t\t\t\tmiddleware: [\n\t\t\t\t\t\t\toffset(-1),\n\t\t\t\t\t\t\taddClass,\n\t\t\t\t\t\t\ttogglePlacementClass,\n\t\t\t\t\t\t\t// Match popperjs default collision prevention behavior by appending the following middleware in order\n\t\t\t\t\t\t\tflip(),\n\t\t\t\t\t\t\tshift({ limiter: limitShift() }),\n\t\t\t\t\t\t],\n\t\t\t\t\t}).then(({ x, y }) => {\n\t\t\t\t\t\tObject.assign(dropdownMenu.style, {\n\t\t\t\t\t\t\tleft: `${x}px`,\n\t\t\t\t\t\t\ttop: `${y}px`,\n\t\t\t\t\t\t})\n\t\t\t\t\t})\n\t\t\t\t}\n\n\t\t\t\tconst cleanup = autoUpdate(\n\t\t\t\t\tcomponent.$refs.toggle,\n\t\t\t\t\tdropdownMenu,\n\t\t\t\t\tupdatePosition,\n\t\t\t\t)\n\n\t\t\t\treturn cleanup\n\t\t\t}\n\t\t},\n\n\t\tlocalFilterBy() {\n\t\t\t// Match the email notation like \"Jane <j.doe@example.com>\" with the email address as matching group\n\t\t\tconst EMAIL_NOTATION = /[^<]<([^>]+)/\n\n\t\t\tif (this.filterBy !== null) {\n\t\t\t\treturn this.filterBy\n\t\t\t}\n\t\t\tif (this.userSelect) {\n\t\t\t\treturn (option, label, search) => {\n\t\t\t\t\tconst match = search.match(EMAIL_NOTATION)\n\t\t\t\t\treturn (match && option.subname?.toLocaleLowerCase?.()?.indexOf(match[1].toLocaleLowerCase()) > -1)\n\t\t\t\t\t\t\|\| (`${label} ${option.subname}`\n\t\t\t\t\t\t\t.toLocaleLowerCase()\n\t\t\t\t\t\t\t.indexOf(search.toLocaleLowerCase()) > -1)\n\t\t\t\t}\n\t\t\t}\n\t\t\treturn VueSelect.props.filterBy.default\n\t\t},\n\n\t\tlocalLabel() {\n\t\t\tif (this.label !== null) {\n\t\t\t\treturn this.label\n\t\t\t}\n\t\t\tif (this.userSelect) {\n\t\t\t\treturn 'displayName'\n\t\t\t}\n\t\t\treturn VueSelect.props.label.default\n\t\t},\n\n\t\tpropsToForward() {\n\t\t\tconst {\n\t\t\t\t// Props handled by this component\n\t\t\t\tinputClass,\n\t\t\t\tnoWrap,\n\t\t\t\tplacement,\n\t\t\t\tuserSelect,\n\t\t\t\t// Props to forward\n\t\t\t\t...initialPropsToForward\n\t\t\t} = this.$props\n\n\t\t\tconst propsToForward = {\n\t\t\t\t...initialPropsToForward,\n\t\t\t\t// Custom overrides of vue-select props\n\t\t\t\tcalculatePosition: this.localCalculatePosition,\n\t\t\t\tfilterBy: this.localFilterBy,\n\t\t\t\tlabel: this.localLabel,\n\t\t\t}\n\n\t\t\treturn propsToForward\n\t\t},\n\t},\n}\n</script>\n\n<style lang=\"scss\">\nbody {\n\t/*\n\t Set custom vue-select CSS variables.\n\t * Needs to be on the body (not :root) for theming to apply (see nextcloud/server#36462)\n\t /\n\n\t/ Search Input /\n\t--vs-search-input-color: var(--color-main-text);\n\t--vs-search-input-bg: var(--color-main-background);\n\t--vs-search-input-placeholder-color: var(--color-text-maxcontrast);\n\n\t/ Font /\n\t--vs-font-size: var(--default-font-size);\n\t--vs-line-height: var(--default-line-height);\n\n\t/ Disabled State /\n\t--vs-state-disabled-bg: var(--color-background-hover);\n\t--vs-state-disabled-color: var(--color-text-maxcontrast);\n\t--vs-state-disabled-controls-color: var(--color-text-maxcontrast);\n\t--vs-state-disabled-cursor: not-allowed;\n\t--vs-disabled-bg: var(--color-background-hover);\n\t--vs-disabled-color: var(--color-text-maxcontrast);\n\t--vs-disabled-cursor: not-allowed;\n\n\t/ Borders /\n\t--vs-border-color: var(--color-border-maxcontrast);\n\t--vs-border-width: 2px;\n\t--vs-border-style: solid;\n\t--vs-border-radius: var(--border-radius-large);\n\n\t/ Component Controls: Clear, Open Indicator /\n\t--vs-controls-color: var(--color-text-maxcontrast);\n\n\t/ Selected /\n\t--vs-selected-bg: var(--color-background-dark);\n\t--vs-selected-color: var(--color-main-text);\n\t--vs-selected-border-color: var(--vs-border-color);\n\t--vs-selected-border-style: var(--vs-border-style);\n\t--vs-selected-border-width: var(--vs-border-width);\n\n\t/ Dropdown /\n\t--vs-dropdown-bg: var(--color-main-background);\n\t--vs-dropdown-color: var(--color-main-text);\n\t--vs-dropdown-z-index: 9999;\n\t--vs-dropdown-box-shadow: 0px 2px 2px 0px var(--color-box-shadow);\n\n\t/ Options /\n\t--vs-dropdown-option-padding: 8px 20px;\n\n\t/ Active State /\n\t--vs-dropdown-option--active-bg: var(--color-background-hover);\n\t--vs-dropdown-option--active-color: var(--color-main-text);\n\n\t/ Keyboard Focus State /\n\t--vs-dropdown-option--kb-focus-box-shadow: inset 0px 0px 0px 2px var(--vs-border-color);\n\n\t/ Deselect State /\n\t--vs-dropdown-option--deselect-bg: var(--color-error);\n\t--vs-dropdown-option--deselect-color: #fff;\n\n\t/ Transitions /\n\t--vs-transition-duration: 0ms;\n}\n\n.v-select.select {\n\t/ Override default vue-select styles /\n\tmin-height: $clickable-area;\n\tmin-width: 260px;\n\tmargin: 0;\n\n\t.vs__selected {\n\t\tmin-height: 36px;\n\t\tpadding: 0 0.5em;\n\t\tborder-radius: calc(var(--vs-border-radius) - 4px) !important;\n\t}\n\n\t.vs__clear {\n\t\tmargin-right: 2px;\n\t}\n\n\t&.vs--open .vs__dropdown-toggle {\n\t\tborder-color: var(--color-primary-element);\n\t\tborder-bottom-color: transparent;\n\t}\n\n\t&:not(.vs--disabled, .vs--open) .vs__dropdown-toggle:hover {\n\t\tborder-color: var(--color-primary-element);\n\t}\n\n\t&.vs--disabled {\n\t\t.vs__search,\n\t\t.vs__selected {\n\t\t\tcolor: var(--color-text-maxcontrast);\n\t\t}\n\n\t\t.vs__clear,\n\t\t.vs__deselect {\n\t\t\tdisplay: none;\n\t\t}\n\t}\n\n\t&--no-wrap {\n\t\t.vs__selected-options {\n\t\t\tflex-wrap: nowrap;\n\t\t\toverflow: auto;\n\t\t\tmin-width: unset;\n\t\t\t.vs__selected {\n\t\t\t\tmin-width: unset;\n\t\t\t}\n\t\t}\n\t}\n\n\t&--drop-up {\n\t\t&.vs--open {\n\t\t\t.vs__dropdown-toggle {\n\t\t\t\tborder-radius: 0 0 var(--vs-border-radius) var(--vs-border-radius);\n\t\t\t\tborder-top-color: transparent;\n\t\t\t\tborder-bottom-color: var(--color-primary-element);\n\t\t\t}\n\t\t}\n\t}\n\n\t.vs__selected-options {\n\t\t// If search is hidden, ensure that the height of the search is the same\n\t\tmin-height: 40px; // 36px search height + 4px search margin\n\n\t\t// Hide search from dom if unused to prevent unneeded flex wrap\n\t\t.vs__selected ~ .vs__search[readonly] {\n\t\t\tposition: absolute;\n\t\t}\n\t}\n\n\t&.vs--single {\n\t\t&.vs--loading,\n\t\t&.vs--open {\n\t\t\t.vs__selected {\n\t\t\t\t// Fix `max-width` for `position: absolute`\n\t\t\t\tmax-width: 100%;\n\t\t\t}\n\t\t}\n\t\t.vs__selected-options {\n\t\t\tflex-wrap: nowrap;\n\t\t}\n\t}\n}\n\n.vs__dropdown-menu {\n\tborder-color: var(--color-primary-element) !important;\n\tpadding: 4px !important;\n\n\t&--floating {\n\t\t/ Fallback styles overidden by programmatically set inline styles */\n\t\twidth: max-content;\n\t\tposition: absolute;\n\t\ttop: 0;\n\t\tleft: 0;\n\n\t\t&-placement-top {\n\t\t\tborder-radius: var(--vs-border-radius) var(--vs-border-radius) 0 0 !important;\n\t\t\tborder-top-style: var(--vs-border-style) !important;\n\t\t\tborder-bottom-style: none !important;\n\t\t\tbox-shadow: 0px -1px 1px 0px var(--color-box-shadow) !important;\n\t\t}\n\t}\n\n\t.vs__dropdown-option {\n\t\tborder-radius: 6px !important;\n\t}\n\n\t.vs__no-options {\n\t\tcolor: var(--color-text-lighter) !important;\n\t}\n}\n</style>\n"],"names":["_sfc_main","ChevronDown__default","Components_NcEllipsisedOption","Components_NcListItemIcon","Components_NcLoadingIcon","vueSelect","l10n","createElement","Close__default","noDrop","open","map","vm","event","GenRandomId","dropdownMenu","component","width","addClass","_middlewareArgs","togglePlacementClass","placement","updatePosition","dom","x","y","EMAIL_NOTATION","option","label","search","match","_c","_b","_a","inputClass","noWrap","userSelect","initialPropsToForward"],"mappings":"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"}