@nextcloud/vue 9.0.0-alpha.1 → 9.0.0-alpha.2

package/dist/chunks/NcSettingsSelectGroup-Dp3kxwBh.mjs

@@ -0,0 +1,208 @@
+import "../assets/NcSettingsSelectGroup-DnUcwotl.css";
+import { N as p } from "./NcSelect-qdi4yiIe.mjs";
+import { r as m, e as f, a as s } from "./_l10n-D1NkaqfQ.mjs";
+import { G as i } from "./GenRandomId-BW3iYFf9.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-CHgC5LLL.mjs";
+m(f);
+const N = {
+  name: "NcSettingsSelectGroup",
+  components: {
+    NcSelect: p
+  },
+  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(),
+      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(),
+      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 = "".concat(appName, ":").concat(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: 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(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 h.get(y("cloud/groups/details?search=".concat(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((a) => [a.id, a]));
+          return this.groups = { ...this.groups, ...t }, !0;
+        }
+      } catch (r) {
+        this.$emit("error", r), this.errorMessage = s("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 "".concat(r || "", " ").concat(e.id).toLocaleLowerCase().indexOf(t.toLocaleLowerCase()) > -1;
+    },
+    /**
+     * Debounce the group search (reduce API calls)
+     */
+    onSearch: g(function(e) {
+      this.loadGroup(e);
+    }, 200)
+  }
+}, 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 {
+  B as N
+};

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

@@ -0,0 +1 @@
+{"version":3,"file":"NcSettingsSelectGroup-Dp3kxwBh.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,GAAA,OAAAD,KAAA,IAAA,KAAA,OAAAD,EAAA,IAAA,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-mihJA_d6.cjs

@@ -0,0 +1,199 @@
+var G = require("../assets/NcSettingsSelectGroup-DnUcwotl.css");
+const c = require("./NcSelect-DXYUyhQf.cjs"), a = require("./_l10n-CEec8lDL.cjs"), i = require("./GenRandomId-B2O1GMbH.cjs"), p = require("@nextcloud/axios"), m = require("debounce"), h = require("@nextcloud/router"), o = require("vue"), f = require("./_plugin-vue_export-helper-CTzpuyvq.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 = "".concat(appName, ":").concat(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=".concat(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 "".concat(r || "", " ").concat(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-mihJA_d6.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"NcSettingsSelectGroup-mihJA_d6.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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"}

package/dist/chunks/NcTextArea-B66cixHu.cjs

@@ -0,0 +1,196 @@
+var C = require("../assets/NcTextArea-Sq__7kVG.css");
+const d = require("./GenRandomId-B2O1GMbH.cjs"), c = require("./AlertCircleOutline-CWsuE9tq.cjs"), o = require("./Check-DfVOclb6.cjs"), e = require("vue"), u = require("./_plugin-vue_export-helper-CTzpuyvq.cjs"), h = {
+  name: "NcTextArea",
+  components: {
+    AlertCircle: c.AlertCircle,
+    Check: o.Check
+  },
+  inheritAttrs: !1,
+  props: {
+    /**
+     * The value of the input field
+     */
+    modelValue: {
+      type: String,
+      required: !0
+    },
+    /**
+     * The input label, always provide one for accessibility purposes.
+     * This will also be used as a placeholder unless the placeholder
+     * prop is populated with a different string.
+     */
+    label: {
+      type: String,
+      default: void 0
+    },
+    /**
+     * Pass in true if you want to use an external label. This is useful
+     * if you need a label that looks different from the one provided by
+     * this component
+     */
+    labelOutside: {
+      type: Boolean,
+      default: !1
+    },
+    /**
+     * The placeholder of the input. This defaults as the string that's
+     * passed into the label prop. In order to remove the placeholder,
+     * pass in an empty string.
+     */
+    placeholder: {
+      type: String,
+      default: void 0
+    },
+    /**
+     * Toggles the success state of the component. Adds a checkmark icon.
+     * this cannot be used together with canClear.
+     */
+    success: {
+      type: Boolean,
+      default: !1
+    },
+    /**
+     * Toggles the error state of the component. Adds an error icon.
+     * this cannot be used together with canClear.
+     */
+    error: {
+      type: Boolean,
+      default: !1
+    },
+    /**
+     * Additional helper text message
+     *
+     * This will be displayed beneath the input field. In case the field is
+     * also marked as having an error, the text will be displayed in red.
+     */
+    helperText: {
+      type: String,
+      default: ""
+    },
+    /**
+     * Disable the input field
+     */
+    disabled: {
+      type: Boolean,
+      default: !1
+    },
+    /**
+     * Class to add to the input field.
+     * Necessary to use NcInputField in the NcActionInput component.
+     */
+    inputClass: {
+      type: [Object, String],
+      default: ""
+    },
+    /**
+     * The resize CSS property sets whether an element is resizable, and if
+     * so, in which directions.
+     */
+    resize: {
+      type: String,
+      default: "both",
+      validator: (a) => ["both", "vertical", "horizontal", "none"].includes(a)
+    }
+  },
+  emits: [
+    "update:modelValue"
+  ],
+  computed: {
+    computedId() {
+      return this.$attrs.id && this.$attrs.id !== "" ? this.$attrs.id : this.inputName;
+    },
+    inputName() {
+      return "input" + d.GenRandomId();
+    },
+    hasPlaceholder() {
+      return this.placeholder !== "" && this.placeholder !== void 0;
+    },
+    computedPlaceholder() {
+      return this.hasPlaceholder ? this.placeholder : this.label;
+    },
+    isValidLabel() {
+      const a = this.label || this.labelOutside;
+      return a || console.warn("You need to add a label to the NcInputField component. Either use the prop label or use an external one, as per the example in the documentation."), a;
+    },
+    ariaDescribedby() {
+      const a = [];
+      return this.helperText.length > 0 && a.push("".concat(this.inputName, "-helper-text")), this.$attrs["aria-describedby"] && a.push(this.$attrs["aria-describedby"]), a.join(" ") || null;
+    }
+  },
+  methods: {
+    /**
+     * Focus the input element
+     *
+     * @public
+     */
+    focus() {
+      this.$refs.input.focus();
+    },
+    /**
+     * Select all the text in the input
+     *
+     * @public
+     */
+    select() {
+      this.$refs.input.select();
+    },
+    handleInput(a) {
+      this.$emit("update:modelValue", a.target.value);
+    }
+  }
+}, p = { class: "textarea__main-wrapper" }, m = ["id", "type", "disabled", "placeholder", "aria-describedby", "value"], _ = ["for"], b = ["id"];
+function x(a, r, t, y, k, l) {
+  const s = e.resolveComponent("Check"), i = e.resolveComponent("AlertCircle");
+  return e.openBlock(), e.createElementBlock("div", {
+    class: e.normalizeClass(["textarea", { "textarea--disabled": t.disabled }])
+  }, [
+    e.createElementVNode("div", p, [
+      e.createElementVNode("textarea", e.mergeProps(a.$attrs, {
+        id: l.computedId,
+        ref: "input",
+        class: ["textarea__input", [
+          t.inputClass,
+          {
+            "textarea__input--label-outside": t.labelOutside,
+            "textarea__input--success": t.success,
+            "textarea__input--error": t.error
+          }
+        ]],
+        type: a.type,
+        disabled: t.disabled,
+        placeholder: l.computedPlaceholder,
+        "aria-describedby": l.ariaDescribedby,
+        "aria-live": "polite",
+        style: { resize: t.resize },
+        value: t.modelValue,
+        onInput: r[0] || (r[0] = (...n) => l.handleInput && l.handleInput(...n))
+      }), null, 16, m),
+      !t.labelOutside && l.isValidLabel ? (e.openBlock(), e.createElementBlock("label", {
+        key: 0,
+        class: "textarea__label",
+        for: l.computedId
+      }, e.toDisplayString(t.label), 9, _)) : e.createCommentVNode("", !0)
+    ]),
+    t.helperText.length > 0 ? (e.openBlock(), e.createElementBlock("p", {
+      key: 0,
+      id: "".concat(l.inputName, "-helper-text"),
+      class: e.normalizeClass(["textarea__helper-text-message", {
+        "textarea__helper-text-message--error": t.error,
+        "textarea__helper-text-message--success": t.success
+      }])
+    }, [
+      t.success ? (e.openBlock(), e.createBlock(s, {
+        key: 0,
+        class: "textarea__helper-text-message__icon",
+        size: 18
+      })) : t.error ? (e.openBlock(), e.createBlock(i, {
+        key: 1,
+        class: "textarea__helper-text-message__icon",
+        size: 18
+      })) : e.createCommentVNode("", !0),
+      e.createTextVNode(" " + e.toDisplayString(t.helperText), 1)
+    ], 10, b)) : e.createCommentVNode("", !0)
+  ], 2);
+}
+const f = /* @__PURE__ */ u._export_sfc(h, [["render", x], ["__scopeId", "data-v-db4d2d17"]]);
+exports.NcTextArea = f;