@nextcloud/vue 8.4.0 → 9.0.0-alpha.0

package/dist/chunks/{NcSettingsSelectGroup-ecc8bc5a.mjs → NcSettingsSelectGroup-JfvkEnNr.mjs}

@@ -1,16 +1,17 @@
-import "../assets/NcSettingsSelectGroup-a29e2156.css";
-import i from "../Components/NcSelect.mjs";
-import { r as l, b as n, a } from "./_l10n-f5af5269.mjs";
-import { G as o } from "./GenRandomId-cb9ccebe.mjs";
-import u from "@nextcloud/axios";
-import p from "debounce";
-import { generateOcsUrl as d } from "@nextcloud/router";
-import { n as c } from "./_plugin-vue2_normalizer-71e2aa87.mjs";
-l(n);
-const m = {
+import "../assets/NcSettingsSelectGroup-51HMKLZQ.css";
+import { N as p } from "./NcSelect-w_Gt1U72.mjs";
+import { r as m, e as f, a as s } from "./_l10n-JmazR_zZ.mjs";
+import { G as i } from "./GenRandomId-VodkdWbp.mjs";
+import h from "@nextcloud/axios";
+import g from "debounce";
+import { generateOcsUrl as y } from "@nextcloud/router";
+import { resolveComponent as b, openBlock as l, createElementBlock as n, toDisplayString as d, createCommentVNode as S, createVNode as V, withDirectives as _, createElementVNode as v, vShow as w } from "vue";
+import { _ as G } from "./_plugin-vue_export-helper-hUChTQA_.mjs";
+m(f);
+const N = {
   name: "NcSettingsSelectGroup",
   components: {
-    NcSelect: i
+    NcSelect: p
   },
   props: {
     /**
@@ -33,14 +34,14 @@ const m = {
      */
     id: {
       type: String,
-      default: () => "action-" + o(),
-      validator: (r) => r.trim() !== ""
+      default: () => "action-" + i(),
+      validator: (e) => e.trim() !== ""
     },
     /**
      * value of the select group input
      * A list of group IDs can be provided
      */
-    value: {
+    modelValue: {
       type: Array,
       default: () => []
     },
@@ -53,14 +54,15 @@ const m = {
     }
   },
   emits: [
+    "error",
     "input",
-    "error"
+    "update:modelValue"
   ],
   data() {
     return {
       /** Temporary store to cache groups */
       groups: {},
-      randId: o(),
+      randId: i(),
       errorMessage: ""
     };
   },
@@ -77,17 +79,17 @@ const m = {
      * @return {string[]}
      */
     filteredValue() {
-      return this.value.filter((r) => r !== "" && typeof r == "string");
+      return this.modelValue.filter((e) => e !== "" && typeof e == "string");
     },
     /**
      * value property converted to an array of group objects used as input for the NcSelect
      */
     inputValue() {
       return this.filteredValue.map(
-        (r) => typeof this.groups[r] > "u" ? {
-          id: r,
-          displayname: r
-        } : this.groups[r]
+        (e) => typeof this.groups[e] > "u" ? {
+          id: e,
+          displayname: e
+        } : this.groups[e]
       );
     },
     /**
@@ -97,17 +99,17 @@ const m = {
      * @return {object[]}
      */
     groupsArray() {
-      return Object.values(this.groups).filter((r) => !this.value.includes(r.id));
+      return Object.values(this.groups).filter((e) => !this.modelValue.includes(e.id));
     }
   },
   watch: {
     /**
      * If the value is changed, check that all groups are loaded so we show the correct display name
      */
-    value: {
+    modelValue: {
       handler() {
-        const r = Object.keys(this.groups);
-        this.filteredValue.filter((t) => !r.includes(t)).forEach((t) => {
+        const e = Object.keys(this.groups);
+        this.filteredValue.filter((t) => !e.includes(t)).forEach((t) => {
           this.loadGroup(t);
         });
       },
@@ -119,20 +121,20 @@ const m = {
    * Load groups matching the empty query to reduce API calls
    */
   async mounted() {
-    const r = `${appName}:${appVersion}/initialGroups`;
-    let e = window.sessionStorage.getItem(r);
-    e ? (e = Object.fromEntries(JSON.parse(e).map((t) => [t.id, t])), this.groups = { ...this.groups, ...e }) : (await this.loadGroup(""), window.sessionStorage.setItem(r, JSON.stringify(Object.values(this.groups))));
+    const e = `${appName}:${appVersion}/initialGroups`;
+    let r = window.sessionStorage.getItem(e);
+    r ? (r = Object.fromEntries(JSON.parse(r).map((t) => [t.id, t])), this.groups = { ...this.groups, ...r }) : (await this.loadGroup(""), window.sessionStorage.setItem(e, JSON.stringify(Object.values(this.groups))));
   },
   methods: {
-    t: a,
+    t: s,
     /**
      * Called when a new group is selected or previous group is deselected to emit the update event
      *
      * @param {object[]} updatedValue Array of selected groups
      */
-    update(r) {
-      const e = r.map((t) => t.id);
-      this.$emit("input", e);
+    update(e) {
+      const r = e.map((t) => t.id);
+      this.$emit("update:modelValue", r);
     },
     /**
      * Use provisioning API to search for given group and save it in the groups object
@@ -140,18 +142,18 @@ const m = {
      * @param {string} query The query like parts of the id oder display name
      * @return {boolean}
      */
-    async loadGroup(r) {
+    async loadGroup(e) {
       try {
-        r = typeof r == "string" ? encodeURI(r) : "";
-        const e = await u.get(d(`cloud/groups/details?search=${r}&limit=10`, 2));
+        e = typeof e == "string" ? encodeURI(e) : "";
+        const r = await h.get(y(`cloud/groups/details?search=${e}&limit=10`, 2));
         if (this.errorMessage !== "" && window.setTimeout(() => {
           this.errorMessage = "";
-        }, 5e3), Object.keys(e.data.ocs.data.groups).length > 0) {
-          const t = Object.fromEntries(e.data.ocs.data.groups.map((s) => [s.id, s]));
+        }, 5e3), Object.keys(r.data.ocs.data.groups).length > 0) {
+          const t = Object.fromEntries(r.data.ocs.data.groups.map((a) => [a.id, a]));
           return this.groups = { ...this.groups, ...t }, !0;
         }
-      } catch (e) {
-        this.$emit("error", e), this.errorMessage = a("Unable to search the group");
+      } catch (r) {
+        this.$emit("error", r), this.errorMessage = s("Unable to search the group");
       }
       return !1;
     },
@@ -162,31 +164,45 @@ const m = {
      * @param {string} label The label property of the group
      * @param {string} search The current search string
      */
-    filterGroups(r, e, t) {
-      return `${e || ""} ${r.id}`.toLocaleLowerCase().indexOf(t.toLocaleLowerCase()) > -1;
+    filterGroups(e, r, t) {
+      return `${r || ""} ${e.id}`.toLocaleLowerCase().indexOf(t.toLocaleLowerCase()) > -1;
     },
     /**
      * Debounce the group search (reduce API calls)
      */
-    onSearch: p(function(r) {
-      this.loadGroup(r);
+    onSearch: g(function(e) {
+      this.loadGroup(e);
     }, 200)
   }
-};
-var f = function() {
-  var e = this, t = e._self._c;
-  return t("div", [e.label ? t("label", { staticClass: "hidden-visually", attrs: { for: e.id } }, [e._v(e._s(e.label))]) : e._e(), t("NcSelect", { attrs: { value: e.inputValue, options: e.groupsArray, placeholder: e.placeholder || e.label, "filter-by": e.filterGroups, "input-id": e.id, limit: 5, label: "displayname", multiple: !0, "close-on-select": !1, disabled: e.disabled }, on: { input: e.update, search: e.onSearch } }), t("div", { directives: [{ name: "show", rawName: "v-show", value: e.hasError, expression: "hasError" }], staticClass: "select-group-error" }, [e._v(" " + e._s(e.errorMessage) + " ")])], 1);
-}, h = [], g = /* @__PURE__ */ c(
-  m,
-  f,
-  h,
-  !1,
-  null,
-  "6d99b3e0",
-  null,
-  null
-);
-const O = g.exports;
+}, O = ["for"];
+function E(e, r, t, a, u, o) {
+  const c = b("NcSelect");
+  return l(), n("div", null, [
+    t.label ? (l(), n("label", {
+      key: 0,
+      for: t.id,
+      class: "hidden-visually"
+    }, d(t.label), 9, O)) : S("", !0),
+    V(c, {
+      "model-value": o.inputValue,
+      options: o.groupsArray,
+      placeholder: t.placeholder || t.label,
+      "filter-by": o.filterGroups,
+      "input-id": t.id,
+      limit: 5,
+      label: "displayname",
+      multiple: !0,
+      "close-on-select": !1,
+      disabled: t.disabled,
+      "onUpdate:modelValue": o.update,
+      onSearch: o.onSearch
+    }, null, 8, ["model-value", "options", "placeholder", "filter-by", "input-id", "disabled", "onUpdate:modelValue", "onSearch"]),
+    _(v("div", { class: "select-group-error" }, d(u.errorMessage), 513), [
+      [w, o.hasError]
+    ])
+  ]);
+}
+const B = /* @__PURE__ */ G(N, [["render", E], ["__scopeId", "data-v-7a7f3619"]]);
 export {
-  O as N
+  B as N
 };

package/dist/chunks/NcSettingsSelectGroup-JfvkEnNr.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"NcSettingsSelectGroup-JfvkEnNr.mjs","sources":["../../src/components/NcSettingsSelectGroup/NcSettingsSelectGroup.vue"],"sourcesContent":["<!--\n  - @copyright Copyright (c) 2019 Julius Härtl <jus@bitgrid.net>\n  -\n  - @author Julius Härtl <jus@bitgrid.net>\n  - @author Greta Doci <gretadoci@gmail.com>\n  - @author Ferdinand Thiessen <opensource@fthiessen.de>\n  -\n  - @license GNU AGPL version 3 or any later version\n  -\n  - This program is free software: you can redistribute it and/or modify\n  - it under the terms of the GNU Affero General Public License as\n  - published by the Free Software Foundation, either version 3 of the\n  - License, or (at your option) any later version.\n  -\n  - This program is distributed in the hope that it will be useful,\n  - but WITHOUT ANY WARRANTY; without even the implied warranty of\n  - MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the\n  - GNU Affero General Public License for more details.\n  -\n  - You should have received a copy of the GNU Affero General Public License\n  - along with this program. If not, see <http://www.gnu.org/licenses/>.\n  -\n  -->\n\n<docs>\n```vue\n<template>\n\t<section>\n\t\t<NcSettingsSelectGroup v-model=\"groups\" placeholder=\"Select user groups\" label=\"The hidden label\" />\n\t\t<NcSettingsSelectGroup v-model=\"otherGroups\" :disabled=\"true\" label=\"Also a fallback for the placeholder\" />\n\t\t<div>You have selected: <code>{{ groups }}</code> and <code>{{ otherGroups }}</code></div>\n\t</section>\n</template>\n<script>\nexport default {\n\tdata() {\n\t\treturn {\n\t\t\tgroups: [],\n\t\t\totherGroups: ['admin']\n\t\t}\n\t}\n}\n</script>\n<style scoped>\nsection * {\n\tpadding: 6px 0px;\n}\n</style>\n```\n</docs>\n\n<template>\n\t<div>\n\t\t<label v-if=\"label\" :for=\"id\" class=\"hidden-visually\">{{ label }}</label>\n\t\t<NcSelect :model-value=\"inputValue\"\n\t\t\t:options=\"groupsArray\"\n\t\t\t:placeholder=\"placeholder || label\"\n\t\t\t:filter-by=\"filterGroups\"\n\t\t\t:input-id=\"id\"\n\t\t\t:limit=\"5\"\n\t\t\tlabel=\"displayname\"\n\t\t\t:multiple=\"true\"\n\t\t\t:close-on-select=\"false\"\n\t\t\t:disabled=\"disabled\"\n\t\t\t@update:model-value=\"update\"\n\t\t\t@search=\"onSearch\" />\n\t\t<div v-show=\"hasError\" class=\"select-group-error\">\n\t\t\t{{ errorMessage }}\n\t\t</div>\n\t</div>\n</template>\n\n<script>\nimport NcSelect from '../../components/NcSelect/index.js'\nimport { t } from '../../l10n.js'\nimport GenRandomId from '../../utils/GenRandomId.js'\n\nimport axios from '@nextcloud/axios'\nimport debounce from 'debounce'\nimport { generateOcsUrl } from '@nextcloud/router'\n\nexport default {\n\tname: 'NcSettingsSelectGroup',\n\tcomponents: {\n\t\tNcSelect,\n\t},\n\n\tprops: {\n\t\t/**\n\t\t * The text of the label element of the select group input\n\t\t */\n\t\tlabel: {\n\t\t\ttype: String,\n\t\t\trequired: true,\n\t\t},\n\n\t\t/**\n\t\t * Placeholder for the input element\n\t\t * For backwards compatibility it falls back to the `label` value\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 * id attribute of the select group element\n\t\t */\n\t\tid: {\n\t\t\ttype: String,\n\t\t\tdefault: () => 'action-' + GenRandomId(),\n\t\t\tvalidator: id => id.trim() !== '',\n\t\t},\n\n\t\t/**\n\t\t * value of the select group input\n\t\t * A list of group IDs can be provided\n\t\t */\n\t\tmodelValue: {\n\t\t\ttype: Array,\n\t\t\tdefault: () => [],\n\t\t},\n\n\t\t/**\n\t\t * disabled state of the settings select group input\n\t\t */\n\t\tdisabled: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\t},\n\temits: [\n\t\t'error',\n\t\t'input',\n\t\t'update:modelValue',\n\t],\n\tdata() {\n\t\treturn {\n\t\t\t/** Temporary store to cache groups */\n\t\t\tgroups: {},\n\t\t\trandId: GenRandomId(),\n\t\t\terrorMessage: '',\n\t\t}\n\t},\n\tcomputed: {\n\t\t/**\n\t\t * If the error message should be shown\n\t\t */\n\t\thasError() {\n\t\t\treturn this.errorMessage !== ''\n\t\t},\n\n\t\t/**\n\t\t * Validate input value and only return valid strings (group IDs)\n\t\t *\n\t\t * @return {string[]}\n\t\t */\n\t\tfilteredValue() {\n\t\t\treturn this.modelValue.filter((group) => group !== '' && typeof group === 'string')\n\t\t},\n\n\t\t/**\n\t\t * value property converted to an array of group objects used as input for the NcSelect\n\t\t */\n\t\tinputValue() {\n\t\t\treturn this.filteredValue.map(\n\t\t\t\t(id) => {\n\t\t\t\t\tif (typeof this.groups[id] === 'undefined') {\n\t\t\t\t\t\treturn {\n\t\t\t\t\t\t\tid,\n\t\t\t\t\t\t\tdisplayname: id,\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t\treturn this.groups[id]\n\t\t\t\t},\n\t\t\t)\n\t\t},\n\n\t\t/**\n\t\t * Convert groups object to array of groups required for NcSelect.options\n\t\t * Filter out currently selected values\n\t\t *\n\t\t * @return {object[]}\n\t\t */\n\t\tgroupsArray() {\n\t\t\treturn Object.values(this.groups).filter(g => !this.modelValue.includes(g.id))\n\t\t},\n\t},\n\twatch: {\n\t\t/**\n\t\t * If the value is changed, check that all groups are loaded so we show the correct display name\n\t\t */\n\t\tmodelValue: {\n\t\t\thandler() {\n\t\t\t\tconst loadedGroupIds = Object.keys(this.groups)\n\t\t\t\tconst missing = this.filteredValue.filter(group => !loadedGroupIds.includes(group))\n\t\t\t\tmissing.forEach((groupId) => {\n\t\t\t\t\tthis.loadGroup(groupId)\n\t\t\t\t})\n\t\t\t},\n\t\t\t// Run the watch handler also when the component is initially mounted\n\t\t\timmediate: true,\n\t\t},\n\t},\n\t/**\n\t * Load groups matching the empty query to reduce API calls\n\t */\n\tasync mounted() {\n\t\t// version scoped to prevent issues with different library versions\n\t\tconst storageName = `${appName}:${appVersion}/initialGroups`\n\n\t\tlet savedGroups = window.sessionStorage.getItem(storageName)\n\t\tif (savedGroups) {\n\t\t\tsavedGroups = Object.fromEntries(JSON.parse(savedGroups).map(group => [group.id, group]))\n\t\t\tthis.groups = { ...this.groups, ...savedGroups }\n\t\t} else {\n\t\t\tawait this.loadGroup('')\n\t\t\twindow.sessionStorage.setItem(storageName, JSON.stringify(Object.values(this.groups)))\n\t\t}\n\t},\n\tmethods: {\n\t\tt,\n\n\t\t/**\n\t\t * Called when a new group is selected or previous group is deselected to emit the update event\n\t\t *\n\t\t * @param {object[]} updatedValue Array of selected groups\n\t\t */\n\t\tupdate(updatedValue) {\n\t\t\tconst value = updatedValue.map((element) => element.id)\n\t\t\t/** Emitted when the groups selection changes<br />**Payload:** `value` (`Array`) - *Ids of selected groups */\n\t\t\tthis.$emit('update:modelValue', value)\n\t\t},\n\n\t\t/**\n\t\t * Use provisioning API to search for given group and save it in the groups object\n\t\t *\n\t\t * @param {string} query The query like parts of the id oder display name\n\t\t * @return {boolean}\n\t\t */\n\t\tasync loadGroup(query) {\n\t\t\ttry {\n\t\t\t\tquery = typeof query === 'string' ? encodeURI(query) : ''\n\t\t\t\tconst response = await axios.get(generateOcsUrl(`cloud/groups/details?search=${query}&limit=10`, 2))\n\n\t\t\t\t// No network error, so reset any error after 5 seconds\n\t\t\t\tif (this.errorMessage !== '') {\n\t\t\t\t\twindow.setTimeout(() => {\n\t\t\t\t\t\tthis.errorMessage = ''\n\t\t\t\t\t}, 5000)\n\t\t\t\t}\n\n\t\t\t\tif (Object.keys(response.data.ocs.data.groups).length > 0) {\n\t\t\t\t\tconst newGroups = Object.fromEntries(response.data.ocs.data.groups.map((element) => [element.id, element]))\n\t\t\t\t\tthis.groups = { ...this.groups, ...newGroups }\n\t\t\t\t\treturn true\n\t\t\t\t}\n\t\t\t} catch (error) {\n\t\t\t\t/** Emitted if groups could not be queried.<br />**Payload:** `error` (`object`) - The Axios error */\n\t\t\t\tthis.$emit('error', error)\n\t\t\t\tthis.errorMessage = t('Unable to search the group')\n\t\t\t}\n\t\t\treturn false\n\t\t},\n\n\t\t/**\n\t\t * Custom filter function for `NcSelect` to filter by ID *and* display name\n\t\t *\n\t\t * @param {object} option One of the groups\n\t\t * @param {string} label The label property of the group\n\t\t * @param {string} search The current search string\n\t\t */\n\t\tfilterGroups(option, label, search) {\n\t\t\treturn `${label || ''} ${option.id}`.toLocaleLowerCase().indexOf(search.toLocaleLowerCase()) > -1\n\t\t},\n\n\t\t/**\n\t\t * Debounce the group search (reduce API calls)\n\t\t */\n\t\tonSearch: debounce(function(query) {\n\t\t\tthis.loadGroup(query)\n\t\t}, 200),\n\t},\n}\n</script>\n\n<style scoped lang=\"scss\">\n.select-group-error {\n\tcolor: var(--color-error);\n\tfont-size: 13px;\n\tpadding-inline-start: var(--border-radius-large);\n}\n</style>\n"],"names":["_sfc_main","NcSelect","GenRandomId","group","id","g","loadedGroupIds","savedGroups","storageName","updatedValue","value","query","newGroups","t","option","label","search","debounce","_hoisted_1","$props","toDisplayString","createCommentVNode","$options","withDirectives","createElementVNode","$data"],"mappings":";;;;;;;;;;AAiFA,MAAAA,IAAA;AAAA;;IAGE,UAAAC;AAAA;EAGD,OAAA;AAAA;AAAA;AAAA;AAAA,IAIC,OAAA;AAAA;;;;;;;;;;;;;;IAiBA,IAAA;AAAA;MAEC,SAAA,MAAA,YAAAC,EAAA;AAAA;;;;;;;;MAUA,SAAA,MAAA,CAAA;AAAA;;;;IAMD,UAAA;AAAA;;;;EAKD,OAAA;AAAA,IACC;AAAA,IACA;AAAA,IACA;AAAA;EAED,OAAA;AACC,WAAA;AAAA;AAAA,MAEC,QAAA,CAAA;AAAA,MACA,QAAAA,EAAA;AAAA,MACA,cAAA;AAAA,IACD;AAAA;EAED,UAAA;AAAA;AAAA;AAAA;AAAA;;;;;;;;IAaC,gBAAA;AACC,aAAA,KAAA,WAAA,OAAA,CAAAC,MAAAA,MAAA,MAAA,OAAAA,KAAA,QAAA;AAAA;;;;;;QAQC,CAAAC,MACC,OAAA,KAAA,OAAAA,CAAA,IAAA,MACC;AAAA,UACC,IAAAA;AAAA,UACA,aAAAA;AAAA,QACD,IAED,KAAA,OAAAA,CAAA;AAAA,MAEF;AAAA;;;;;;;;AAUA,aAAA,OAAA,OAAA,KAAA,MAAA,EAAA,OAAA,CAAAC,MAAA,CAAA,KAAA,WAAA,SAAAA,EAAA,EAAA,CAAA;AAAA;;EAGF,OAAA;AAAA;AAAA;AAAA;AAAA;MAKE,UAAA;AACC,cAAAC,IAAA,OAAA,KAAA,KAAA,MAAA;QACA,KAAA,cAAA,OAAA,CAAAH,MAAA,CAAAG,EAAA,SAAAH,CAAA,CAAA;;;;;MAMD,WAAA;AAAA;;;;;EAMF,MAAA,UAAA;;;AAKC,IAAAI,KACCA,IAAA,OAAA,YAAA,KAAA,MAAAA,CAAA,EAAA,IAAA,CAAAJ,MAAA,CAAAA,EAAA,IAAAA,CAAA,CAAA,CAAA,GACA,KAAA,SAAA,EAAA,GAAA,KAAA,QAAA,GAAAI,EAAA,gCAGA,OAAA,eAAA,QAAAC,GAAA,KAAA,UAAA,OAAA,OAAA,KAAA,MAAA,CAAA,CAAA;AAAA;EAGF,SAAA;AAAA;;;;;;IAQC,OAAAC,GAAA;;AAGC,WAAA,MAAA,qBAAAC,CAAA;AAAA;;;;;;;IASD,MAAA,UAAAC,GAAA;AACC,UAAA;;;;AAOG,eAAA,eAAA;AAAA,QACD,GAAA,GAAA;;AAKA,sBAAA,SAAA,EAAA,GAAA,KAAA,QAAA,GAAAC,EAAA,GACA;AAAA,QACD;AAAA;gCAIA,KAAA,eAAAC,EAAA,4BAAA;AAAA,MACD;;;;;;;;;;IAWD,aAAAC,GAAAC,GAAAC,GAAA;AACC,aAAA,GAAAD,KAAA,EAAA,IAAAD,EAAA,EAAA,GAAA,kBAAA,EAAA,QAAAE,EAAA,kBAAA,CAAA,IAAA;AAAA;;;;IAMD,UAAAC,EAAA,SAAAN,GAAA;AACC,WAAA,UAAAA,CAAA;AAAA,IACD,GAAA,GAAA;AAAA;AAEF,GA3RAO,IAAA,CAAA,KAAA;;;;;;MAqDuB,KAAAC,EAAA;AAAA,MAAS,OAAA;AAAA,IAA2B,GAAAC,EAAAD,EAAA,KAAA,GAAA,GAAAD,CAAA,KArD3DG,EAAA,IAAA,EAAA;AAAA;MAsDa,eAAAC,EAAA;AAAA,MACT,SAAAA,EAAA;AAAA;MAEA,aAAAA,EAAA;AAAA,MACA,YAAAH,EAAA;AAAA,MACA,OAAA;AAAA,MACD,OAAA;AAAA,MACC,UAAA;AAAA,MACA,mBAAA;AAAA,MACA,UAAAA,EAAA;AAAA,MACA,uBAAAG,EAAA;AAAA,MACA,UAAAA,EAAA;AAAA;IACFC,EAAAC,EAAA,OAAA,EAAA,OAAA,qBAAA,GAAAJ,EAAAK,EAAA,YAAA,GAAA,GAAA,GAAA;AAAA;;;;;"}

package/dist/chunks/NcSettingsSelectGroup-p8cgn6pv.cjs

@@ -0,0 +1,199 @@
+var G = require("../assets/NcSettingsSelectGroup-51HMKLZQ.css");
+const c = require("./NcSelect-9cM-OGdn.cjs"), a = require("./_l10n-wK0o0jNS.cjs"), i = require("./GenRandomId-ULxaMkkr.cjs"), p = require("@nextcloud/axios"), m = require("debounce"), h = require("@nextcloud/router"), o = require("vue"), f = require("./_plugin-vue_export-helper-xG2iG1wl.cjs"), n = (e) => e && e.__esModule ? e : { default: e }, g = /* @__PURE__ */ n(p), S = /* @__PURE__ */ n(m);
+a.register(a.t40);
+const _ = {
+  name: "NcSettingsSelectGroup",
+  components: {
+    NcSelect: c.NcSelect
+  },
+  props: {
+    /**
+     * The text of the label element of the select group input
+     */
+    label: {
+      type: String,
+      required: !0
+    },
+    /**
+     * Placeholder for the input element
+     * For backwards compatibility it falls back to the `label` value
+     */
+    placeholder: {
+      type: String,
+      default: ""
+    },
+    /**
+     * id attribute of the select group element
+     */
+    id: {
+      type: String,
+      default: () => "action-" + i.GenRandomId(),
+      validator: (e) => e.trim() !== ""
+    },
+    /**
+     * value of the select group input
+     * A list of group IDs can be provided
+     */
+    modelValue: {
+      type: Array,
+      default: () => []
+    },
+    /**
+     * disabled state of the settings select group input
+     */
+    disabled: {
+      type: Boolean,
+      default: !1
+    }
+  },
+  emits: [
+    "error",
+    "input",
+    "update:modelValue"
+  ],
+  data() {
+    return {
+      /** Temporary store to cache groups */
+      groups: {},
+      randId: i.GenRandomId(),
+      errorMessage: ""
+    };
+  },
+  computed: {
+    /**
+     * If the error message should be shown
+     */
+    hasError() {
+      return this.errorMessage !== "";
+    },
+    /**
+     * Validate input value and only return valid strings (group IDs)
+     *
+     * @return {string[]}
+     */
+    filteredValue() {
+      return this.modelValue.filter((e) => e !== "" && typeof e == "string");
+    },
+    /**
+     * value property converted to an array of group objects used as input for the NcSelect
+     */
+    inputValue() {
+      return this.filteredValue.map(
+        (e) => typeof this.groups[e] > "u" ? {
+          id: e,
+          displayname: e
+        } : this.groups[e]
+      );
+    },
+    /**
+     * Convert groups object to array of groups required for NcSelect.options
+     * Filter out currently selected values
+     *
+     * @return {object[]}
+     */
+    groupsArray() {
+      return Object.values(this.groups).filter((e) => !this.modelValue.includes(e.id));
+    }
+  },
+  watch: {
+    /**
+     * If the value is changed, check that all groups are loaded so we show the correct display name
+     */
+    modelValue: {
+      handler() {
+        const e = Object.keys(this.groups);
+        this.filteredValue.filter((t) => !e.includes(t)).forEach((t) => {
+          this.loadGroup(t);
+        });
+      },
+      // Run the watch handler also when the component is initially mounted
+      immediate: !0
+    }
+  },
+  /**
+   * Load groups matching the empty query to reduce API calls
+   */
+  async mounted() {
+    const e = `${appName}:${appVersion}/initialGroups`;
+    let r = window.sessionStorage.getItem(e);
+    r ? (r = Object.fromEntries(JSON.parse(r).map((t) => [t.id, t])), this.groups = { ...this.groups, ...r }) : (await this.loadGroup(""), window.sessionStorage.setItem(e, JSON.stringify(Object.values(this.groups))));
+  },
+  methods: {
+    t: a.t,
+    /**
+     * Called when a new group is selected or previous group is deselected to emit the update event
+     *
+     * @param {object[]} updatedValue Array of selected groups
+     */
+    update(e) {
+      const r = e.map((t) => t.id);
+      this.$emit("update:modelValue", r);
+    },
+    /**
+     * Use provisioning API to search for given group and save it in the groups object
+     *
+     * @param {string} query The query like parts of the id oder display name
+     * @return {boolean}
+     */
+    async loadGroup(e) {
+      try {
+        e = typeof e == "string" ? encodeURI(e) : "";
+        const r = await g.default.get(h.generateOcsUrl(`cloud/groups/details?search=${e}&limit=10`, 2));
+        if (this.errorMessage !== "" && window.setTimeout(() => {
+          this.errorMessage = "";
+        }, 5e3), Object.keys(r.data.ocs.data.groups).length > 0) {
+          const t = Object.fromEntries(r.data.ocs.data.groups.map((l) => [l.id, l]));
+          return this.groups = { ...this.groups, ...t }, !0;
+        }
+      } catch (r) {
+        this.$emit("error", r), this.errorMessage = a.t("Unable to search the group");
+      }
+      return !1;
+    },
+    /**
+     * Custom filter function for `NcSelect` to filter by ID *and* display name
+     *
+     * @param {object} option One of the groups
+     * @param {string} label The label property of the group
+     * @param {string} search The current search string
+     */
+    filterGroups(e, r, t) {
+      return `${r || ""} ${e.id}`.toLocaleLowerCase().indexOf(t.toLocaleLowerCase()) > -1;
+    },
+    /**
+     * Debounce the group search (reduce API calls)
+     */
+    onSearch: S.default(function(e) {
+      this.loadGroup(e);
+    }, 200)
+  }
+}, y = ["for"];
+function b(e, r, t, l, u, s) {
+  const d = o.resolveComponent("NcSelect");
+  return o.openBlock(), o.createElementBlock("div", null, [
+    t.label ? (o.openBlock(), o.createElementBlock("label", {
+      key: 0,
+      for: t.id,
+      class: "hidden-visually"
+    }, o.toDisplayString(t.label), 9, y)) : o.createCommentVNode("", !0),
+    o.createVNode(d, {
+      "model-value": s.inputValue,
+      options: s.groupsArray,
+      placeholder: t.placeholder || t.label,
+      "filter-by": s.filterGroups,
+      "input-id": t.id,
+      limit: 5,
+      label: "displayname",
+      multiple: !0,
+      "close-on-select": !1,
+      disabled: t.disabled,
+      "onUpdate:modelValue": s.update,
+      onSearch: s.onSearch
+    }, null, 8, ["model-value", "options", "placeholder", "filter-by", "input-id", "disabled", "onUpdate:modelValue", "onSearch"]),
+    o.withDirectives(o.createElementVNode("div", { class: "select-group-error" }, o.toDisplayString(u.errorMessage), 513), [
+      [o.vShow, s.hasError]
+    ])
+  ]);
+}
+const V = /* @__PURE__ */ f._export_sfc(_, [["render", b], ["__scopeId", "data-v-7a7f3619"]]);
+exports.NcSettingsSelectGroup = V;

package/dist/chunks/NcSettingsSelectGroup-p8cgn6pv.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"NcSettingsSelectGroup-p8cgn6pv.cjs","sources":["../../src/components/NcSettingsSelectGroup/NcSettingsSelectGroup.vue"],"sourcesContent":["<!--\n  - @copyright Copyright (c) 2019 Julius Härtl <jus@bitgrid.net>\n  -\n  - @author Julius Härtl <jus@bitgrid.net>\n  - @author Greta Doci <gretadoci@gmail.com>\n  - @author Ferdinand Thiessen <opensource@fthiessen.de>\n  -\n  - @license GNU AGPL version 3 or any later version\n  -\n  - This program is free software: you can redistribute it and/or modify\n  - it under the terms of the GNU Affero General Public License as\n  - published by the Free Software Foundation, either version 3 of the\n  - License, or (at your option) any later version.\n  -\n  - This program is distributed in the hope that it will be useful,\n  - but WITHOUT ANY WARRANTY; without even the implied warranty of\n  - MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the\n  - GNU Affero General Public License for more details.\n  -\n  - You should have received a copy of the GNU Affero General Public License\n  - along with this program. If not, see <http://www.gnu.org/licenses/>.\n  -\n  -->\n\n<docs>\n```vue\n<template>\n\t<section>\n\t\t<NcSettingsSelectGroup v-model=\"groups\" placeholder=\"Select user groups\" label=\"The hidden label\" />\n\t\t<NcSettingsSelectGroup v-model=\"otherGroups\" :disabled=\"true\" label=\"Also a fallback for the placeholder\" />\n\t\t<div>You have selected: <code>{{ groups }}</code> and <code>{{ otherGroups }}</code></div>\n\t</section>\n</template>\n<script>\nexport default {\n\tdata() {\n\t\treturn {\n\t\t\tgroups: [],\n\t\t\totherGroups: ['admin']\n\t\t}\n\t}\n}\n</script>\n<style scoped>\nsection * {\n\tpadding: 6px 0px;\n}\n</style>\n```\n</docs>\n\n<template>\n\t<div>\n\t\t<label v-if=\"label\" :for=\"id\" class=\"hidden-visually\">{{ label }}</label>\n\t\t<NcSelect :model-value=\"inputValue\"\n\t\t\t:options=\"groupsArray\"\n\t\t\t:placeholder=\"placeholder || label\"\n\t\t\t:filter-by=\"filterGroups\"\n\t\t\t:input-id=\"id\"\n\t\t\t:limit=\"5\"\n\t\t\tlabel=\"displayname\"\n\t\t\t:multiple=\"true\"\n\t\t\t:close-on-select=\"false\"\n\t\t\t:disabled=\"disabled\"\n\t\t\t@update:model-value=\"update\"\n\t\t\t@search=\"onSearch\" />\n\t\t<div v-show=\"hasError\" class=\"select-group-error\">\n\t\t\t{{ errorMessage }}\n\t\t</div>\n\t</div>\n</template>\n\n<script>\nimport NcSelect from '../../components/NcSelect/index.js'\nimport { t } from '../../l10n.js'\nimport GenRandomId from '../../utils/GenRandomId.js'\n\nimport axios from '@nextcloud/axios'\nimport debounce from 'debounce'\nimport { generateOcsUrl } from '@nextcloud/router'\n\nexport default {\n\tname: 'NcSettingsSelectGroup',\n\tcomponents: {\n\t\tNcSelect,\n\t},\n\n\tprops: {\n\t\t/**\n\t\t * The text of the label element of the select group input\n\t\t */\n\t\tlabel: {\n\t\t\ttype: String,\n\t\t\trequired: true,\n\t\t},\n\n\t\t/**\n\t\t * Placeholder for the input element\n\t\t * For backwards compatibility it falls back to the `label` value\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 * id attribute of the select group element\n\t\t */\n\t\tid: {\n\t\t\ttype: String,\n\t\t\tdefault: () => 'action-' + GenRandomId(),\n\t\t\tvalidator: id => id.trim() !== '',\n\t\t},\n\n\t\t/**\n\t\t * value of the select group input\n\t\t * A list of group IDs can be provided\n\t\t */\n\t\tmodelValue: {\n\t\t\ttype: Array,\n\t\t\tdefault: () => [],\n\t\t},\n\n\t\t/**\n\t\t * disabled state of the settings select group input\n\t\t */\n\t\tdisabled: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\t},\n\temits: [\n\t\t'error',\n\t\t'input',\n\t\t'update:modelValue',\n\t],\n\tdata() {\n\t\treturn {\n\t\t\t/** Temporary store to cache groups */\n\t\t\tgroups: {},\n\t\t\trandId: GenRandomId(),\n\t\t\terrorMessage: '',\n\t\t}\n\t},\n\tcomputed: {\n\t\t/**\n\t\t * If the error message should be shown\n\t\t */\n\t\thasError() {\n\t\t\treturn this.errorMessage !== ''\n\t\t},\n\n\t\t/**\n\t\t * Validate input value and only return valid strings (group IDs)\n\t\t *\n\t\t * @return {string[]}\n\t\t */\n\t\tfilteredValue() {\n\t\t\treturn this.modelValue.filter((group) => group !== '' && typeof group === 'string')\n\t\t},\n\n\t\t/**\n\t\t * value property converted to an array of group objects used as input for the NcSelect\n\t\t */\n\t\tinputValue() {\n\t\t\treturn this.filteredValue.map(\n\t\t\t\t(id) => {\n\t\t\t\t\tif (typeof this.groups[id] === 'undefined') {\n\t\t\t\t\t\treturn {\n\t\t\t\t\t\t\tid,\n\t\t\t\t\t\t\tdisplayname: id,\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t\treturn this.groups[id]\n\t\t\t\t},\n\t\t\t)\n\t\t},\n\n\t\t/**\n\t\t * Convert groups object to array of groups required for NcSelect.options\n\t\t * Filter out currently selected values\n\t\t *\n\t\t * @return {object[]}\n\t\t */\n\t\tgroupsArray() {\n\t\t\treturn Object.values(this.groups).filter(g => !this.modelValue.includes(g.id))\n\t\t},\n\t},\n\twatch: {\n\t\t/**\n\t\t * If the value is changed, check that all groups are loaded so we show the correct display name\n\t\t */\n\t\tmodelValue: {\n\t\t\thandler() {\n\t\t\t\tconst loadedGroupIds = Object.keys(this.groups)\n\t\t\t\tconst missing = this.filteredValue.filter(group => !loadedGroupIds.includes(group))\n\t\t\t\tmissing.forEach((groupId) => {\n\t\t\t\t\tthis.loadGroup(groupId)\n\t\t\t\t})\n\t\t\t},\n\t\t\t// Run the watch handler also when the component is initially mounted\n\t\t\timmediate: true,\n\t\t},\n\t},\n\t/**\n\t * Load groups matching the empty query to reduce API calls\n\t */\n\tasync mounted() {\n\t\t// version scoped to prevent issues with different library versions\n\t\tconst storageName = `${appName}:${appVersion}/initialGroups`\n\n\t\tlet savedGroups = window.sessionStorage.getItem(storageName)\n\t\tif (savedGroups) {\n\t\t\tsavedGroups = Object.fromEntries(JSON.parse(savedGroups).map(group => [group.id, group]))\n\t\t\tthis.groups = { ...this.groups, ...savedGroups }\n\t\t} else {\n\t\t\tawait this.loadGroup('')\n\t\t\twindow.sessionStorage.setItem(storageName, JSON.stringify(Object.values(this.groups)))\n\t\t}\n\t},\n\tmethods: {\n\t\tt,\n\n\t\t/**\n\t\t * Called when a new group is selected or previous group is deselected to emit the update event\n\t\t *\n\t\t * @param {object[]} updatedValue Array of selected groups\n\t\t */\n\t\tupdate(updatedValue) {\n\t\t\tconst value = updatedValue.map((element) => element.id)\n\t\t\t/** Emitted when the groups selection changes<br />**Payload:** `value` (`Array`) - *Ids of selected groups */\n\t\t\tthis.$emit('update:modelValue', value)\n\t\t},\n\n\t\t/**\n\t\t * Use provisioning API to search for given group and save it in the groups object\n\t\t *\n\t\t * @param {string} query The query like parts of the id oder display name\n\t\t * @return {boolean}\n\t\t */\n\t\tasync loadGroup(query) {\n\t\t\ttry {\n\t\t\t\tquery = typeof query === 'string' ? encodeURI(query) : ''\n\t\t\t\tconst response = await axios.get(generateOcsUrl(`cloud/groups/details?search=${query}&limit=10`, 2))\n\n\t\t\t\t// No network error, so reset any error after 5 seconds\n\t\t\t\tif (this.errorMessage !== '') {\n\t\t\t\t\twindow.setTimeout(() => {\n\t\t\t\t\t\tthis.errorMessage = ''\n\t\t\t\t\t}, 5000)\n\t\t\t\t}\n\n\t\t\t\tif (Object.keys(response.data.ocs.data.groups).length > 0) {\n\t\t\t\t\tconst newGroups = Object.fromEntries(response.data.ocs.data.groups.map((element) => [element.id, element]))\n\t\t\t\t\tthis.groups = { ...this.groups, ...newGroups }\n\t\t\t\t\treturn true\n\t\t\t\t}\n\t\t\t} catch (error) {\n\t\t\t\t/** Emitted if groups could not be queried.<br />**Payload:** `error` (`object`) - The Axios error */\n\t\t\t\tthis.$emit('error', error)\n\t\t\t\tthis.errorMessage = t('Unable to search the group')\n\t\t\t}\n\t\t\treturn false\n\t\t},\n\n\t\t/**\n\t\t * Custom filter function for `NcSelect` to filter by ID *and* display name\n\t\t *\n\t\t * @param {object} option One of the groups\n\t\t * @param {string} label The label property of the group\n\t\t * @param {string} search The current search string\n\t\t */\n\t\tfilterGroups(option, label, search) {\n\t\t\treturn `${label || ''} ${option.id}`.toLocaleLowerCase().indexOf(search.toLocaleLowerCase()) > -1\n\t\t},\n\n\t\t/**\n\t\t * Debounce the group search (reduce API calls)\n\t\t */\n\t\tonSearch: debounce(function(query) {\n\t\t\tthis.loadGroup(query)\n\t\t}, 200),\n\t},\n}\n</script>\n\n<style scoped lang=\"scss\">\n.select-group-error {\n\tcolor: var(--color-error);\n\tfont-size: 13px;\n\tpadding-inline-start: var(--border-radius-large);\n}\n</style>\n"],"names":["_sfc_main","NcSelect","GenRandomId","group","id","g","loadedGroupIds","savedGroups","storageName","updatedValue","value","query","newGroups","_l10n","option","label","search","debounce__default","_hoisted_1","$props","vue","$options","$data"],"mappings":"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"}