@nextcloud/vue 8.30.0 → 8.32.0

package/dist/chunks/NcSettingsSection-r4NOxKIz.cjs

@@ -0,0 +1,119 @@
+require('../assets/NcSettingsSection-D_qeKnRb.css');
+"use strict";
+var _a;
+const initialState = require("@nextcloud/initial-state");
+const _pluginVue2_normalizer = require("./_plugin-vue2_normalizer-V0q-tHlQ.cjs");
+const _l10n = require("./_l10n-9b4TMo5Q.cjs");
+const _sfc_main$1 = {
+  name: "HelpCircleIcon",
+  emits: ["click"],
+  props: {
+    title: {
+      type: String
+    },
+    fillColor: {
+      type: String,
+      default: "currentColor"
+    },
+    size: {
+      type: Number,
+      default: 24
+    }
+  }
+};
+var _sfc_render$1 = function render() {
+  var _vm = this, _c = _vm._self._c;
+  return _c("span", _vm._b({ staticClass: "material-design-icon help-circle-icon", attrs: { "aria-hidden": _vm.title ? null : "true", "aria-label": _vm.title, "role": "img" }, on: { "click": function($event) {
+    return _vm.$emit("click", $event);
+  } } }, "span", _vm.$attrs, false), [_c("svg", { staticClass: "material-design-icon__svg", attrs: { "fill": _vm.fillColor, "width": _vm.size, "height": _vm.size, "viewBox": "0 0 24 24" } }, [_c("path", { attrs: { "d": "M15.07,11.25L14.17,12.17C13.45,12.89 13,13.5 13,15H11V14.5C11,13.39 11.45,12.39 12.17,11.67L13.41,10.41C13.78,10.05 14,9.55 14,9C14,7.89 13.1,7 12,7A2,2 0 0,0 10,9H8A4,4 0 0,1 12,5A4,4 0 0,1 16,9C16,9.88 15.64,10.67 15.07,11.25M13,19H11V17H13M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12C22,6.47 17.5,2 12,2Z" } }, [_vm.title ? _c("title", [_vm._v(_vm._s(_vm.title))]) : _vm._e()])])]);
+};
+var _sfc_staticRenderFns$1 = [];
+var __component__$1 = /* @__PURE__ */ _pluginVue2_normalizer.normalizeComponent(
+  _sfc_main$1,
+  _sfc_render$1,
+  _sfc_staticRenderFns$1,
+  false,
+  null,
+  null
+);
+const HelpCircle = __component__$1.exports;
+_l10n.register(_l10n.t24);
+const [major] = (_a = initialState.loadState("core", "config", { version: "30.0" }).version.split(".", 2)) != null ? _a : [];
+const isLegacy = major && Number.parseInt(major) < 30;
+const _sfc_main = {
+  name: "NcSettingsSection",
+  components: {
+    HelpCircle
+  },
+  props: {
+    /**
+     * The name of the settings section.
+     * This is used for the headline and needs to be set.
+     */
+    name: {
+      type: String,
+      required: true
+    },
+    /**
+     * Further informational description of the section.
+     */
+    description: {
+      type: String,
+      default: ""
+    },
+    /**
+     * The URL for the documentation about this section
+     */
+    docUrl: {
+      type: String,
+      default: ""
+    },
+    /**
+     * Limit the width of the setting's content
+     *
+     * Setting this to false allows unrestricted (width) settings content.
+     * Note that the name and description have always a width limit.
+     *
+     * @deprecated Will be removed with next version and will not be used on Nextcloud 30+ (always forced to true)
+     */
+    limitWidth: {
+      type: Boolean,
+      // eslint-disable-next-line vue/no-boolean-default
+      default: true
+    }
+  },
+  data() {
+    return {
+      docNameTranslated: _l10n.t("External documentation for {name}", {
+        name: this.name
+      })
+    };
+  },
+  computed: {
+    forceLimitWidth() {
+      return this.limitWidth || !isLegacy;
+    },
+    hasDescription() {
+      return this.description.length > 0;
+    },
+    hasDocUrl() {
+      return this.docUrl.length > 0;
+    }
+  }
+};
+var _sfc_render = function render2() {
+  var _vm = this, _c = _vm._self._c;
+  return _c("div", { staticClass: "settings-section", class: { "settings-section--limit-width": _vm.forceLimitWidth } }, [_c("h2", { staticClass: "settings-section__name" }, [_vm._v(" " + _vm._s(_vm.name) + " "), _vm.hasDocUrl ? _c("a", { staticClass: "settings-section__info", attrs: { "href": _vm.docUrl, "title": _vm.docNameTranslated, "aria-label": _vm.docNameTranslated, "target": "_blank", "rel": "noreferrer nofollow" } }, [_c("HelpCircle", { attrs: { "size": 20 } })], 1) : _vm._e()]), _vm.hasDescription ? _c("p", { staticClass: "settings-section__desc" }, [_vm._v(" " + _vm._s(_vm.description) + " ")]) : _vm._e(), _vm._t("default")], 2);
+};
+var _sfc_staticRenderFns = [];
+var __component__ = /* @__PURE__ */ _pluginVue2_normalizer.normalizeComponent(
+  _sfc_main,
+  _sfc_render,
+  _sfc_staticRenderFns,
+  false,
+  null,
+  "56b92b56"
+);
+const NcSettingsSection = __component__.exports;
+exports.NcSettingsSection = NcSettingsSection;
+//# sourceMappingURL=NcSettingsSection-r4NOxKIz.cjs.map

package/dist/chunks/NcSettingsSection-r4NOxKIz.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"NcSettingsSection-r4NOxKIz.cjs","sources":["../../node_modules/vue-material-design-icons/HelpCircle.vue","../../src/components/NcSettingsSection/NcSettingsSection.vue"],"sourcesContent":["<template>\n  <span v-bind=\"$attrs\"\n        :aria-hidden=\"title ? null : 'true'\"\n        :aria-label=\"title\"\n        class=\"material-design-icon help-circle-icon\"\n        role=\"img\"\n        @click=\"$emit('click', $event)\">\n    <svg :fill=\"fillColor\"\n         class=\"material-design-icon__svg\"\n         :width=\"size\"\n         :height=\"size\"\n         viewBox=\"0 0 24 24\">\n      <path d=\"M15.07,11.25L14.17,12.17C13.45,12.89 13,13.5 13,15H11V14.5C11,13.39 11.45,12.39 12.17,11.67L13.41,10.41C13.78,10.05 14,9.55 14,9C14,7.89 13.1,7 12,7A2,2 0 0,0 10,9H8A4,4 0 0,1 12,5A4,4 0 0,1 16,9C16,9.88 15.64,10.67 15.07,11.25M13,19H11V17H13M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12C22,6.47 17.5,2 12,2Z\">\n        <title v-if=\"title\">{{ title }}</title>\n      </path>\n    </svg>\n  </span>\n</template>\n\n<script>\nexport default {\n  name: \"HelpCircleIcon\",\n  emits: ['click'],\n  props: {\n    title: {\n      type: String,\n    },\n    fillColor: {\n      type: String,\n      default: \"currentColor\"\n    },\n    size: {\n      type: Number,\n      default: 24\n    }\n  }\n}\n</script>","<!--\n  - SPDX-FileCopyrightText: 2019 Nextcloud GmbH and Nextcloud contributors\n  - SPDX-License-Identifier: AGPL-3.0-or-later\n-->\n\n<docs>\n### General description\n\nThis component is to be used in the settings section of nextcloud.\n\n### Examples\n\n```vue\n<template>\n\t<div>\n\t\t<NcSettingsSection name=\"Two-factor authentication\"\n\t\t\tdescription=\"Two-factor authentication can be enforced for all accounts and specific groups. If they do not have a two-factor provider configured, they will be unable to log into the system.\"\n\t\t\tdoc-url=\"https://docs.nextcloud.com/server/19/go.php?to=admin-2fa\">\n\t\t\t<NcCheckboxRadioSwitch type=\"switch\">\n\t\t\t\tEnforce two-factor authentication\n\t\t\t</NcCheckboxRadioSwitch>\n\t\t</NcSettingsSection>\n\n\t\t<NcSettingsSection name=\"Server-side encryption\"\n\t\t\tdescription=\"Server-side encryption makes it possible to encrypt files which are uploaded to this server. This comes with limitations like a performance penalty, so enable this only if needed.\">\n\t\t\t<NcCheckboxRadioSwitch type=\"switch\">\n\t\t\t\tEnable server-side encryption\n\t\t\t</NcCheckboxRadioSwitch>\n\t\t</NcSettingsSection>\n\n\t\t<NcSettingsSection name=\"OAuth 2.0 clients\"\n\t\t\tdescription=\"OAuth 2.0 allows external services to request access to Nextcloud.\"\n\t\t\tdoc-url=\"https://docs.nextcloud.com/server/latest/admin_manual/configuration_server/oauth2.html\">\n\n\t\t\tAny content here\n\n\t\t</NcSettingsSection>\n\t</div>\n</template>\n```\n</docs>\n\n<template>\n\t<div class=\"settings-section\" :class=\"{ 'settings-section--limit-width': forceLimitWidth }\">\n\t\t<h2 class=\"settings-section__name\">\n\t\t\t{{ name }}\n\t\t\t<a\n\t\t\t\tv-if=\"hasDocUrl\"\n\t\t\t\t:href=\"docUrl\"\n\t\t\t\tclass=\"settings-section__info\"\n\t\t\t\t:title=\"docNameTranslated\"\n\t\t\t\t:aria-label=\"docNameTranslated\"\n\t\t\t\ttarget=\"_blank\"\n\t\t\t\trel=\"noreferrer nofollow\">\n\t\t\t\t<HelpCircle :size=\"20\" />\n\t\t\t</a>\n\t\t</h2>\n\t\t<p\n\t\t\tv-if=\"hasDescription\"\n\t\t\tclass=\"settings-section__desc\">\n\t\t\t{{ description }}\n\t\t</p>\n\t\t<slot />\n\t</div>\n</template>\n\n<script>\nimport { loadState } from '@nextcloud/initial-state'\nimport HelpCircle from 'vue-material-design-icons/HelpCircle.vue'\nimport { t } from '../../l10n.js'\n\n// Overwrite this on Nextcloud 30+ to always limit the width\nconst [major] = loadState('core', 'config', { version: '30.0' }).version.split('.', 2) ?? []\nconst isLegacy = major && Number.parseInt(major) < 30\n\nexport default {\n\tname: 'NcSettingsSection',\n\n\tcomponents: {\n\t\tHelpCircle,\n\t},\n\n\tprops: {\n\t\t/**\n\t\t * The name of the settings section.\n\t\t * This is used for the headline and needs to be set.\n\t\t */\n\t\tname: {\n\t\t\ttype: String,\n\t\t\trequired: true,\n\t\t},\n\n\t\t/**\n\t\t * Further informational description of the section.\n\t\t */\n\t\tdescription: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\n\t\t/**\n\t\t * The URL for the documentation about this section\n\t\t */\n\t\tdocUrl: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\n\t\t/**\n\t\t * Limit the width of the setting's content\n\t\t *\n\t\t * Setting this to false allows unrestricted (width) settings content.\n\t\t * Note that the name and description have always a width limit.\n\t\t *\n\t\t * @deprecated Will be removed with next version and will not be used on Nextcloud 30+ (always forced to true)\n\t\t */\n\t\tlimitWidth: {\n\t\t\ttype: Boolean,\n\t\t\t// eslint-disable-next-line vue/no-boolean-default\n\t\t\tdefault: true,\n\t\t},\n\t},\n\n\tdata() {\n\t\treturn {\n\t\t\tdocNameTranslated: t('External documentation for {name}', {\n\t\t\t\tname: this.name,\n\t\t\t}),\n\t\t}\n\t},\n\n\tcomputed: {\n\t\tforceLimitWidth() {\n\t\t\treturn this.limitWidth || !isLegacy\n\t\t},\n\n\t\thasDescription() {\n\t\t\treturn this.description.length > 0\n\t\t},\n\n\t\thasDocUrl() {\n\t\t\treturn this.docUrl.length > 0\n\t\t},\n\t},\n}\n\n</script>\n\n<style lang=\"scss\" scoped>\n$maxWidth: 900px;\n\n.settings-section {\n\tdisplay: block;\n\tmargin-bottom: auto;\n\tpadding: 30px;\n\n\t&:not(:last-child) {\n\t\tborder-bottom: 1px solid var(--color-border);\n\t}\n\n\t&--limit-width > * {\n\t\tmax-width: $maxWidth;\n\t}\n\n\t&__name {\n\t\tdisplay: inline-flex;\n\t\talign-items: center;\n\t\tjustify-content: center;\n\t\tfont-size: 20px;\n\t\tfont-weight: bold;\n\t\tmax-width: $maxWidth;\n\t\tmargin-top: 0; // Remove default heading margin\n\t}\n\n\t&__info {\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tjustify-content: center;\n\t\twidth: var(--default-clickable-area);\n\t\theight: var(--default-clickable-area);\n\t\t// make sure to properly align the icon with the text\n\t\tmargin: calc($icon-margin * -1);\n\t\tmargin-inline-start: 0;\n\t\tcolor: var(--color-text-maxcontrast);\n\n\t\t&:hover, &:focus, &:active {\n\t\t\tcolor: var(--color-main-text);\n\t\t}\n\t}\n\n\t&__desc {\n\t\tmargin-top: -.2em;\n\t\tmargin-bottom: 1em;\n\t\tcolor: var(--color-text-maxcontrast);\n\t\tmax-width: $maxWidth;\n\t}\n}\n\n</style>\n"],"names":["_sfc_main","loadState","t"],"mappings":";;;;;AAoBA,MAAAA,cAAA;AAAA,EACA,MAAA;AAAA,EACA,OAAA,CAAA,OAAA;AAAA,EACA,OAAA;AAAA,IACA,OAAA;AAAA,MACA,MAAA;AAAA,IACA;AAAA,IACA,WAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA,IACA,MAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA,EACA;AACA;;;;;;;;;;;;;;;;;;ACoCA,MAAA,CAAA,KAAA,KAAAC,kBAAAA,UAAA,QAAA,UAAA,EAAA,SAAA,OAAA,CAAA,EAAA,QAAA,MAAA,KAAA,CAAA,MAAAA,YAAA,CAAA;AACA,MAAA,WAAA,SAAA,OAAA,SAAA,KAAA,IAAA;AAEA,MAAA,YAAA;AAAA,EACA,MAAA;AAAA,EAEA,YAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAKA,MAAA;AAAA,MACA,MAAA;AAAA,MACA,UAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,aAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,QAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAUA,YAAA;AAAA,MACA,MAAA;AAAA;AAAA,MAEA,SAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA;AACA,WAAA;AAAA,MACA,mBAAAC,MAAAA,EAAA,qCAAA;AAAA,QACA,MAAA,KAAA;AAAA,MACA,CAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,UAAA;AAAA,IACA,kBAAA;AACA,aAAA,KAAA,cAAA,CAAA;AAAA,IACA;AAAA,IAEA,iBAAA;AACA,aAAA,KAAA,YAAA,SAAA;AAAA,IACA;AAAA,IAEA,YAAA;AACA,aAAA,KAAA,OAAA,SAAA;AAAA,IACA;AAAA,EACA;AACA;;;;;;;;;;;;;;;;","x_google_ignoreList":[0]}

package/dist/chunks/NcSettingsSelectGroup-CR4XLrgs.mjs

@@ -0,0 +1,253 @@
+import '../assets/NcSettingsSelectGroup-B9FlWQVH.css';
+var __defProp = Object.defineProperty;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+import axios from "@nextcloud/axios";
+import { generateOcsUrl } from "@nextcloud/router";
+import debounce from "debounce";
+import { N as NcSelect } from "./NcSelect-TjZw7TJ_.mjs";
+import { u as useModelMigration } from "./useModelMigration-DBUi8saj.mjs";
+import { r as register, h as t49, a as t } from "./_l10n-DSLCwJSN.mjs";
+import { G as GenRandomId } from "./GenRandomId-F5ebeBB_.mjs";
+import { n as normalizeComponent } from "./_plugin-vue2_normalizer-DU4iP6Vu.mjs";
+register(t49);
+const _sfc_main = {
+  name: "NcSettingsSelectGroup",
+  components: {
+    NcSelect
+  },
+  model: {
+    prop: "modelValue",
+    event: "update:modelValue"
+  },
+  props: {
+    /**
+     * The text of the label element of the select group input
+     */
+    label: {
+      type: String,
+      required: true
+    },
+    /**
+     * 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-" + GenRandomId(),
+      validator: (id) => id.trim() !== ""
+    },
+    /**
+     * Removed in v9 - use `modelValue` (`v-model`) instead
+     *
+     * @deprecated
+     */
+    value: {
+      type: Array,
+      default: void 0
+    },
+    /**
+     * 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: false
+    }
+  },
+  emits: [
+    /**
+     * Removed in v9 - use `update:modelValue` (`v-model`) instead
+     *
+     * @deprecated
+     */
+    "input",
+    /** Emitted when the groups selection changes<br />**Payload:** `value` (`Array`) - *Ids of selected groups */
+    "update:modelValue",
+    /** Same as update:modelValue for Vue 2 compatibility */
+    "update:model-value",
+    "error"
+  ],
+  setup() {
+    const model = useModelMigration("value", "input");
+    return {
+      model
+    };
+  },
+  data() {
+    return {
+      /** Temporary store to cache groups */
+      groups: {},
+      randId: 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.model.filter((group) => group !== "" && typeof group === "string");
+    },
+    /**
+     * value property converted to an array of group objects used as input for the NcSelect
+     */
+    inputValue() {
+      return this.filteredValue.map((id) => {
+        if (typeof this.groups[id] === "undefined") {
+          return {
+            id,
+            displayname: id
+          };
+        }
+        return this.groups[id];
+      });
+    },
+    /**
+     * 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((g) => !this.model.includes(g.id));
+    }
+  },
+  watch: {
+    /**
+     * If the value is changed, check that all groups are loaded so we show the correct display name
+     */
+    value: {
+      handler() {
+        const loadedGroupIds = Object.keys(this.groups);
+        const missing = this.filteredValue.filter((group) => !loadedGroupIds.includes(group));
+        missing.forEach((groupId) => {
+          this.loadGroup(groupId);
+        });
+      },
+      // Run the watch handler also when the component is initially mounted
+      immediate: true
+    }
+  },
+  /**
+   * Load groups matching the empty query to reduce API calls
+   */
+  async mounted() {
+    const storageName = "".concat(appName, ":").concat(appVersion, "/initialGroups");
+    let savedGroups = window.sessionStorage.getItem(storageName);
+    if (savedGroups) {
+      savedGroups = Object.fromEntries(JSON.parse(savedGroups).map((group) => [group.id, group]));
+      this.groups = __spreadValues(__spreadValues({}, this.groups), savedGroups);
+    } else {
+      await this.loadGroup("");
+      window.sessionStorage.setItem(storageName, JSON.stringify(Object.values(this.groups)));
+    }
+  },
+  methods: {
+    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(updatedValue) {
+      const value = updatedValue.map((element) => element.id);
+      this.model = value;
+    },
+    /**
+     * 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(query) {
+      try {
+        query = typeof query === "string" ? encodeURI(query) : "";
+        const response = await axios.get(generateOcsUrl("cloud/groups/details?search=".concat(query, "&limit=10"), 2));
+        if (this.errorMessage !== "") {
+          window.setTimeout(() => {
+            this.errorMessage = "";
+          }, 5e3);
+        }
+        if (Object.keys(response.data.ocs.data.groups).length > 0) {
+          const newGroups = Object.fromEntries(response.data.ocs.data.groups.map((element) => [element.id, element]));
+          this.groups = __spreadValues(__spreadValues({}, this.groups), newGroups);
+          return true;
+        }
+      } catch (error) {
+        this.$emit("error", error);
+        this.errorMessage = t("Unable to search the group");
+      }
+      return false;
+    },
+    /**
+     * 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(option, label, search) {
+      return "".concat(label || "", " ").concat(option.id).toLocaleLowerCase().indexOf(search.toLocaleLowerCase()) > -1;
+    },
+    /**
+     * Debounce the group search (reduce API calls)
+     */
+    onSearch: debounce(function(query) {
+      this.loadGroup(query);
+    }, 200)
+  }
+};
+var _sfc_render = function render() {
+  var _vm = this, _c = _vm._self._c;
+  return _c("div", [_vm.label ? _c("label", { staticClass: "hidden-visually", attrs: { "for": _vm.id } }, [_vm._v(_vm._s(_vm.label))]) : _vm._e(), _c("NcSelect", { attrs: { "value": _vm.inputValue, "options": _vm.groupsArray, "placeholder": _vm.placeholder || _vm.label, "filter-by": _vm.filterGroups, "input-id": _vm.id, "limit": 5, "label": "displayname", "multiple": true, "close-on-select": false, "disabled": _vm.disabled }, on: { "update:model-value": _vm.update, "search": _vm.onSearch } }), _c("div", { directives: [{ name: "show", rawName: "v-show", value: _vm.hasError, expression: "hasError" }], staticClass: "select-group-error" }, [_vm._v(" " + _vm._s(_vm.errorMessage) + " ")])], 1);
+};
+var _sfc_staticRenderFns = [];
+var __component__ = /* @__PURE__ */ normalizeComponent(
+  _sfc_main,
+  _sfc_render,
+  _sfc_staticRenderFns,
+  false,
+  null,
+  "9d59765b"
+);
+const NcSettingsSelectGroup = __component__.exports;
+export {
+  NcSettingsSelectGroup as N
+};
+//# sourceMappingURL=NcSettingsSelectGroup-CR4XLrgs.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"NcSettingsSelectGroup-CR4XLrgs.mjs","sources":["../../src/components/NcSettingsSelectGroup/NcSettingsSelectGroup.vue"],"sourcesContent":["<!--\n  - SPDX-FileCopyrightText: 2019 Nextcloud GmbH and Nextcloud contributors\n  - SPDX-License-Identifier: AGPL-3.0-or-later\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\n\t\t\t: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 axios from '@nextcloud/axios'\nimport { generateOcsUrl } from '@nextcloud/router'\nimport debounce from 'debounce'\nimport NcSelect from '../../components/NcSelect/index.js'\nimport { useModelMigration } from '../../composables/useModelMigration.ts'\nimport { t } from '../../l10n.js'\nimport GenRandomId from '../../utils/GenRandomId.js'\n\nexport default {\n\tname: 'NcSettingsSelectGroup',\n\tcomponents: {\n\t\tNcSelect,\n\t},\n\n\tmodel: {\n\t\tprop: 'modelValue',\n\t\tevent: 'update:modelValue',\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 * Removed in v9 - use `modelValue` (`v-model`) instead\n\t\t *\n\t\t * @deprecated\n\t\t */\n\t\tvalue: {\n\t\t\ttype: Array,\n\t\t\tdefault: undefined,\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\n\temits: [\n\t\t/**\n\t\t * Removed in v9 - use `update:modelValue` (`v-model`) instead\n\t\t *\n\t\t * @deprecated\n\t\t */\n\t\t'input',\n\t\t/** Emitted when the groups selection changes<br />**Payload:** `value` (`Array`) - *Ids of selected groups */\n\t\t'update:modelValue',\n\t\t/** Same as update:modelValue for Vue 2 compatibility */\n\t\t'update:model-value',\n\t\t'error',\n\t],\n\n\tsetup() {\n\t\tconst model = useModelMigration('value', 'input')\n\t\treturn {\n\t\t\tmodel,\n\t\t}\n\t},\n\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\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.model.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((id) => {\n\t\t\t\tif (typeof this.groups[id] === 'undefined') {\n\t\t\t\t\treturn {\n\t\t\t\t\t\tid,\n\t\t\t\t\t\tdisplayname: id,\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t\treturn this.groups[id]\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.model.includes(g.id))\n\t\t},\n\t},\n\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\tvalue: {\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\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\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\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\tthis.model = 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-text-error, var(--color-error));\n\tfont-size: 13px;\n\tpadding-inline-start: var(--border-radius-large);\n}\n</style>\n"],"names":[],"mappings":"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"}

package/dist/chunks/NcSettingsSelectGroup-DYYAPkgp.cjs

@@ -0,0 +1,255 @@
+require('../assets/NcSettingsSelectGroup-B9FlWQVH.css');
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+const axios = require("@nextcloud/axios");
+const router = require("@nextcloud/router");
+const debounce = require("debounce");
+const NcSelect = require("./NcSelect-bo6wla87.cjs");
+const useModelMigration = require("./useModelMigration-HPf30klj.cjs");
+const _l10n = require("./_l10n-9b4TMo5Q.cjs");
+const GenRandomId = require("./GenRandomId-D7iOvpZS.cjs");
+const _pluginVue2_normalizer = require("./_plugin-vue2_normalizer-V0q-tHlQ.cjs");
+const _interopDefault = (e) => e && e.__esModule ? e : { default: e };
+const axios__default = /* @__PURE__ */ _interopDefault(axios);
+const debounce__default = /* @__PURE__ */ _interopDefault(debounce);
+_l10n.register(_l10n.t49);
+const _sfc_main = {
+  name: "NcSettingsSelectGroup",
+  components: {
+    NcSelect: NcSelect.NcSelect
+  },
+  model: {
+    prop: "modelValue",
+    event: "update:modelValue"
+  },
+  props: {
+    /**
+     * The text of the label element of the select group input
+     */
+    label: {
+      type: String,
+      required: true
+    },
+    /**
+     * 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-" + GenRandomId.GenRandomId(),
+      validator: (id) => id.trim() !== ""
+    },
+    /**
+     * Removed in v9 - use `modelValue` (`v-model`) instead
+     *
+     * @deprecated
+     */
+    value: {
+      type: Array,
+      default: void 0
+    },
+    /**
+     * 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: false
+    }
+  },
+  emits: [
+    /**
+     * Removed in v9 - use `update:modelValue` (`v-model`) instead
+     *
+     * @deprecated
+     */
+    "input",
+    /** Emitted when the groups selection changes<br />**Payload:** `value` (`Array`) - *Ids of selected groups */
+    "update:modelValue",
+    /** Same as update:modelValue for Vue 2 compatibility */
+    "update:model-value",
+    "error"
+  ],
+  setup() {
+    const model = useModelMigration.useModelMigration("value", "input");
+    return {
+      model
+    };
+  },
+  data() {
+    return {
+      /** Temporary store to cache groups */
+      groups: {},
+      randId: GenRandomId.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.model.filter((group) => group !== "" && typeof group === "string");
+    },
+    /**
+     * value property converted to an array of group objects used as input for the NcSelect
+     */
+    inputValue() {
+      return this.filteredValue.map((id) => {
+        if (typeof this.groups[id] === "undefined") {
+          return {
+            id,
+            displayname: id
+          };
+        }
+        return this.groups[id];
+      });
+    },
+    /**
+     * 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((g) => !this.model.includes(g.id));
+    }
+  },
+  watch: {
+    /**
+     * If the value is changed, check that all groups are loaded so we show the correct display name
+     */
+    value: {
+      handler() {
+        const loadedGroupIds = Object.keys(this.groups);
+        const missing = this.filteredValue.filter((group) => !loadedGroupIds.includes(group));
+        missing.forEach((groupId) => {
+          this.loadGroup(groupId);
+        });
+      },
+      // Run the watch handler also when the component is initially mounted
+      immediate: true
+    }
+  },
+  /**
+   * Load groups matching the empty query to reduce API calls
+   */
+  async mounted() {
+    const storageName = "".concat(appName, ":").concat(appVersion, "/initialGroups");
+    let savedGroups = window.sessionStorage.getItem(storageName);
+    if (savedGroups) {
+      savedGroups = Object.fromEntries(JSON.parse(savedGroups).map((group) => [group.id, group]));
+      this.groups = __spreadValues(__spreadValues({}, this.groups), savedGroups);
+    } else {
+      await this.loadGroup("");
+      window.sessionStorage.setItem(storageName, JSON.stringify(Object.values(this.groups)));
+    }
+  },
+  methods: {
+    t: _l10n.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(updatedValue) {
+      const value = updatedValue.map((element) => element.id);
+      this.model = value;
+    },
+    /**
+     * 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(query) {
+      try {
+        query = typeof query === "string" ? encodeURI(query) : "";
+        const response = await axios__default.default.get(router.generateOcsUrl("cloud/groups/details?search=".concat(query, "&limit=10"), 2));
+        if (this.errorMessage !== "") {
+          window.setTimeout(() => {
+            this.errorMessage = "";
+          }, 5e3);
+        }
+        if (Object.keys(response.data.ocs.data.groups).length > 0) {
+          const newGroups = Object.fromEntries(response.data.ocs.data.groups.map((element) => [element.id, element]));
+          this.groups = __spreadValues(__spreadValues({}, this.groups), newGroups);
+          return true;
+        }
+      } catch (error) {
+        this.$emit("error", error);
+        this.errorMessage = _l10n.t("Unable to search the group");
+      }
+      return false;
+    },
+    /**
+     * 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(option, label, search) {
+      return "".concat(label || "", " ").concat(option.id).toLocaleLowerCase().indexOf(search.toLocaleLowerCase()) > -1;
+    },
+    /**
+     * Debounce the group search (reduce API calls)
+     */
+    onSearch: debounce__default.default(function(query) {
+      this.loadGroup(query);
+    }, 200)
+  }
+};
+var _sfc_render = function render() {
+  var _vm = this, _c = _vm._self._c;
+  return _c("div", [_vm.label ? _c("label", { staticClass: "hidden-visually", attrs: { "for": _vm.id } }, [_vm._v(_vm._s(_vm.label))]) : _vm._e(), _c("NcSelect", { attrs: { "value": _vm.inputValue, "options": _vm.groupsArray, "placeholder": _vm.placeholder || _vm.label, "filter-by": _vm.filterGroups, "input-id": _vm.id, "limit": 5, "label": "displayname", "multiple": true, "close-on-select": false, "disabled": _vm.disabled }, on: { "update:model-value": _vm.update, "search": _vm.onSearch } }), _c("div", { directives: [{ name: "show", rawName: "v-show", value: _vm.hasError, expression: "hasError" }], staticClass: "select-group-error" }, [_vm._v(" " + _vm._s(_vm.errorMessage) + " ")])], 1);
+};
+var _sfc_staticRenderFns = [];
+var __component__ = /* @__PURE__ */ _pluginVue2_normalizer.normalizeComponent(
+  _sfc_main,
+  _sfc_render,
+  _sfc_staticRenderFns,
+  false,
+  null,
+  "9d59765b"
+);
+const NcSettingsSelectGroup = __component__.exports;
+exports.NcSettingsSelectGroup = NcSettingsSelectGroup;
+//# sourceMappingURL=NcSettingsSelectGroup-DYYAPkgp.cjs.map