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

package/dist/Components/NcSelect.mjs

@@ -1,63 +1,416 @@
-import "../assets/index10.css";
-import { VueSelect as r } from "@nextcloud/vue-select";
+import "../assets/index-1beccc92.css";
+import { VueSelect as s } from "@nextcloud/vue-select";
 import "@nextcloud/vue-select/dist/vue-select.css";
 import { autoUpdate as c, computePosition as u, offset as p, flip as f, shift as d, limitShift as m } from "@floating-ui/dom";
 import y from "vue-material-design-icons/ChevronDown.vue";
-import h from "vue-material-design-icons/Close.vue";
-import g from "./NcEllipsisedOption.mjs";
-import b from "./NcListItemIcon.mjs";
-import S from "./NcLoadingIcon.mjs";
-import { l as _ } from "../chunks/l10n-05baf7da.mjs";
-import { n as L } from "../chunks/_plugin-vue2_normalizer-5b4c43a4.mjs";
-const B = { name: "NcSelect", components: { ChevronDown: y, NcEllipsisedOption: g, NcListItemIcon: b, NcLoadingIcon: S, VueSelect: r }, mixins: [_], props: { ...r.props, appendToBody: { type: Boolean, default: !0 }, calculatePosition: { type: Function, default: null }, closeOnSelect: { type: Boolean, default: !0 }, components: { type: Object, default: () => ({ Deselect: { render: (e) => e(h, { props: { size: 20, fillColor: "var(--vs-controls-color)" }, style: { cursor: "pointer" } }) } }) }, limit: { type: Number, default: null }, disabled: { type: Boolean, default: !1 }, dropdownShouldOpen: { type: Function, default: ({ noDrop: e, open: l }) => e ? !1 : l }, filterBy: { type: Function, default: null }, inputClass: { type: [String, Object], default: null }, inputId: { type: String, default: null }, keyboardFocusBorder: { type: Boolean, default: !0 }, label: { type: String, default: null }, loading: { type: Boolean, default: !1 }, multiple: { type: Boolean, default: !1 }, noWrap: { type: Boolean, default: !1 }, options: { type: Array, default: () => [] }, placeholder: { type: String, default: "" }, mapKeydown: { type: Function, default(e, l) {
-  return { ...e, 27: (t) => {
-    l.open && t.stopPropagation(), e[27](t);
-  } };
-} }, placement: { type: String, default: "bottom" }, resetFocusOnOptionsChange: { type: Boolean, default: !0 }, userSelect: { type: Boolean, default: !1 }, value: { type: [String, Number, Object, Array], default: null }, " ": {} }, emits: [" "], data() {
-  return { search: "" };
-}, computed: { localCalculatePosition() {
-  return this.calculatePosition !== null ? this.calculatePosition : (e, l, { width: t }) => {
-    e.style.width = t;
-    const o = { name: "addClass", fn(a) {
-      return e.classList.add("vs__dropdown-menu--floating"), {};
-    } }, n = { name: "togglePlacementClass", fn({ placement: a }) {
-      return l.$el.classList.toggle("select--drop-up", a === "top"), e.classList.toggle("vs__dropdown-menu--floating-placement-top", a === "top"), {};
-    } }, s = () => {
-      u(l.$refs.toggle, e, { placement: this.placement, middleware: [p(-1), o, n, f(), d({ limiter: m() })] }).then(({ x: a, y: i }) => {
-        Object.assign(e.style, { left: `${a}px`, top: `${i}px` });
-      });
+import _ from "vue-material-design-icons/Close.vue";
+import h from "./NcEllipsisedOption.mjs";
+import g from "./NcListItemIcon.mjs";
+import b from "./NcLoadingIcon.mjs";
+import { l as S } from "../chunks/l10n-c5f5f001.mjs";
+import { G as L } from "../chunks/GenRandomId-cb9ccebe.mjs";
+import { n as C } from "../chunks/_plugin-vue2_normalizer-71e2aa87.mjs";
+const v = {
+  name: "NcSelect",
+  components: {
+    ChevronDown: y,
+    NcEllipsisedOption: h,
+    NcListItemIcon: g,
+    NcLoadingIcon: b,
+    VueSelect: s
+  },
+  mixins: [
+    S
+  ],
+  props: {
+    // Add VueSelect props to $props
+    ...s.props,
+    /**
+     * Append the dropdown element to the end of the body
+     * and size/position it dynamically.
+     *
+     * @see https://vue-select.org/api/props.html#appendtobody
+     */
+    appendToBody: {
+      type: Boolean,
+      default: !0
+    },
+    /**
+     * When `appendToBody` is true, this function is responsible for
+     * positioning the drop down list.
+     *
+     * If a function is returned from `calculatePosition`, it will
+     * be called when the drop down list is removed from the DOM.
+     * This allows for any garbage collection you may need to do.
+     *
+     * @see https://vue-select.org/api/props.html#calculateposition
+     */
+    calculatePosition: {
+      type: Function,
+      default: null
+    },
+    /**
+     * Close the dropdown when selecting an option
+     *
+     * @see https://vue-select.org/api/props.html#closeonselect
+     */
+    closeOnSelect: {
+      type: Boolean,
+      default: !0
+    },
+    /**
+     * Replace default vue-select components
+     *
+     * @see https://vue-select.org/api/props.html#components
+     */
+    components: {
+      type: Object,
+      default: () => ({
+        Deselect: {
+          render: (l) => l(_, {
+            props: {
+              size: 20,
+              fillColor: "var(--vs-controls-color)"
+            },
+            style: {
+              cursor: "pointer"
+            }
+          })
+        }
+      })
+    },
+    /**
+     * Sets the maximum number of options to display in the dropdown list
+     */
+    limit: {
+      type: Number,
+      default: null
+    },
+    /**
+     * Disable the component
+     *
+     * @see https://vue-select.org/api/props.html#disabled
+     */
+    disabled: {
+      type: Boolean,
+      default: !1
+    },
+    /**
+     * Determines whether the dropdown should be open.
+     * Receives the component instance as the only argument.
+     *
+     * @see https://vue-select.org/api/props.html#dropdownshouldopen
+     */
+    dropdownShouldOpen: {
+      type: Function,
+      default: ({ noDrop: l, open: e }) => l ? !1 : e
+    },
+    /**
+     * Callback to determine if the provided option should
+     * match the current search text. Used to determine
+     * if the option should be displayed.
+     *
+     * Defaults to the internal vue-select function documented at the link
+     * below
+     *
+     * Enabling `userSelect` will automatically set this to filter by the
+     * `displayName` and `subname` properties of the user option object
+     * unless this prop is set explicitly
+     *
+     * @see https://vue-select.org/api/props.html#filterby
+     */
+    filterBy: {
+      type: Function,
+      default: null
+    },
+    /**
+     * Class for the `input`
+     *
+     * Necessary for use in NcActionInput
+     */
+    inputClass: {
+      type: [String, Object],
+      default: null
+    },
+    /**
+     * Input element id
+     *
+     * @see https://vue-select.org/api/props.html#inputid
+     */
+    inputId: {
+      type: String,
+      default: null
+    },
+    /**
+     * Display a visible border around dropdown options
+     * which have keyboard focus
+     */
+    keyboardFocusBorder: {
+      type: Boolean,
+      default: !0
+    },
+    /**
+     * Key of the displayed label for object options
+     *
+     * Defaults to the internal vue-select string documented at the link
+     * below
+     *
+     * Enabling `userSelect` will automatically set this to `'displayName'`
+     * unless this prop is set explicitly
+     *
+     * @see https://vue-select.org/api/props.html#label
+     */
+    label: {
+      type: String,
+      default: null
+    },
+    /**
+     * Show the loading icon
+     *
+     * @see https://vue-select.org/api/props.html#loading
+     */
+    loading: {
+      type: Boolean,
+      default: !1
+    },
+    /**
+     * Allow selection of multiple options
+     *
+     * @see https://vue-select.org/api/props.html#multiple
+     */
+    multiple: {
+      type: Boolean,
+      default: !1
+    },
+    /**
+     * Disable automatic wrapping when selected options overflow the width
+     */
+    noWrap: {
+      type: Boolean,
+      default: !1
+    },
+    /**
+     * Array of options
+     *
+     * @type {Array<string | number | Record<string | number, any>>}
+     *
+     * @see https://vue-select.org/api/props.html#options
+     */
+    options: {
+      type: Array,
+      default: () => []
+    },
+    /**
+     * Placeholder text
+     *
+     * @see https://vue-select.org/api/props.html#placeholder
+     */
+    placeholder: {
+      type: String,
+      default: ""
+    },
+    /**
+     * Customized component's response to keydown events while the search input has focus
+     *
+     * @see https://vue-select.org/guide/keydown.html#mapkeydown
+     */
+    mapKeydown: {
+      type: Function,
+      /**
+       * Patched Vue-Select keydown events handlers map to stop Escape propagation in open select
+       *
+       * @param {Record<number, Function>} map - Mapped keyCode to handlers { <keyCode>:<callback> }
+       * @param {import('@nextcloud/vue-select').VueSelect} vm - VueSelect instance
+       * @return {Record<number, Function>} patched keydown event handlers
+       */
+      default(l, e) {
+        return {
+          ...l,
+          /**
+           * Patched Escape handler to stop propagation from open select
+           *
+           * @param {KeyboardEvent} event - default keydown event handler
+           */
+          27: (o) => {
+            e.open && o.stopPropagation(), l[27](o);
+          }
+        };
+      }
+    },
+    /**
+     * A unique identifier used to generate IDs and DOM attributes. Must be unique for every instance of the component.
+     *
+     * @see https://vue-select.org/api/props.html#uid
+     */
+    uid: {
+      type: String,
+      default: () => "-" + L()
+    },
+    /**
+     * When `appendToBody` is true, this sets the placement of the dropdown
+     *
+     * @type {'bottom' | 'top'}
+     */
+    placement: {
+      type: String,
+      default: "bottom"
+    },
+    /**
+     * If false, the focused dropdown option will not be reset when filtered
+     * options change
+     */
+    resetFocusOnOptionsChange: {
+      type: Boolean,
+      default: !0
+    },
+    /**
+     * Enable the user selector with avatars
+     *
+     * Objects must contain the data expected by the
+     * [NcListItemIcon](#/Components/NcListItemIcon) and
+     * [NcAvatar](#/Components/NcAvatar) components
+     */
+    userSelect: {
+      type: Boolean,
+      default: !1
+    },
+    /**
+     * Currently selected value
+     *
+     * The `v-model` directive may be used for two-way data binding
+     *
+     * @type {string | number | Record<string | number, any> | Array<any>}
+     *
+     * @see https://vue-select.org/api/props.html#value
+     */
+    value: {
+      type: [String, Number, Object, Array],
+      default: null
+    },
+    /**
+     * Any available prop
+     *
+     * @see https://vue-select.org/api/props.html
+     */
+    // Not an actual prop but needed to show in vue-styleguidist docs
+    // eslint-disable-next-line
+    " ": {}
+  },
+  emits: [
+    /**
+     * All events from https://vue-select.org/api/events.html
+     */
+    // Not an actual event but needed to show in vue-styleguidist docs
+    " "
+  ],
+  data() {
+    return {
+      search: ""
     };
-    return c(l.$refs.toggle, e, s);
-  };
-}, localFilterBy() {
-  return this.filterBy !== null ? this.filterBy : this.userSelect ? (e, l, t) => (`${l} ${e.subname}` || "").toLocaleLowerCase().indexOf(t.toLocaleLowerCase()) > -1 : r.props.filterBy.default;
-}, localLabel() {
-  return this.label !== null ? this.label : this.userSelect ? "displayName" : r.props.label.default;
-}, propsToForward() {
-  const { inputClass: e, noWrap: l, placement: t, userSelect: o, ...n } = this.$props;
-  return { ...n, calculatePosition: this.localCalculatePosition, filterBy: this.localFilterBy, label: this.localLabel };
-} } };
-var v = function() {
-  var e = this, l = e._self._c;
-  return l("VueSelect", e._g(e._b({ staticClass: "select", class: { "select--no-wrap": e.noWrap }, on: { search: (t) => e.search = t }, scopedSlots: e._u([{ key: "search", fn: function({ attributes: t, events: o }) {
-    return [l("input", e._g(e._b({ class: ["vs__search", e.inputClass] }, "input", t, !1), o))];
+  },
+  computed: {
+    localCalculatePosition() {
+      return this.calculatePosition !== null ? this.calculatePosition : (l, e, { width: o }) => {
+        l.style.width = o;
+        const t = {
+          name: "addClass",
+          fn(n) {
+            return l.classList.add("vs__dropdown-menu--floating"), {};
+          }
+        }, r = {
+          name: "togglePlacementClass",
+          fn({ placement: n }) {
+            return e.$el.classList.toggle(
+              "select--drop-up",
+              n === "top"
+            ), l.classList.toggle(
+              "vs__dropdown-menu--floating-placement-top",
+              n === "top"
+            ), {};
+          }
+        }, a = () => {
+          u(e.$refs.toggle, l, {
+            placement: this.placement,
+            middleware: [
+              p(-1),
+              t,
+              r,
+              // Match popperjs default collision prevention behavior by appending the following middleware in order
+              f(),
+              d({ limiter: m() })
+            ]
+          }).then(({ x: n, y: i }) => {
+            Object.assign(l.style, {
+              left: `${n}px`,
+              top: `${i}px`
+            });
+          });
+        };
+        return c(
+          e.$refs.toggle,
+          l,
+          a
+        );
+      };
+    },
+    localFilterBy() {
+      return this.filterBy !== null ? this.filterBy : this.userSelect ? (l, e, o) => (`${e} ${l.subname}` || "").toLocaleLowerCase().indexOf(o.toLocaleLowerCase()) > -1 : s.props.filterBy.default;
+    },
+    localLabel() {
+      return this.label !== null ? this.label : this.userSelect ? "displayName" : s.props.label.default;
+    },
+    propsToForward() {
+      const {
+        // Props handled by this component
+        inputClass: l,
+        noWrap: e,
+        placement: o,
+        userSelect: t,
+        // Props to forward
+        ...r
+      } = this.$props;
+      return {
+        ...r,
+        // Custom overrides of vue-select props
+        calculatePosition: this.localCalculatePosition,
+        filterBy: this.localFilterBy,
+        label: this.localLabel
+      };
+    }
+  }
+};
+var B = function() {
+  var e = this, o = e._self._c;
+  return o("VueSelect", e._g(e._b({ staticClass: "select", class: {
+    "select--no-wrap": e.noWrap
+  }, on: { search: (t) => e.search = t }, scopedSlots: e._u([{ key: "search", fn: function({ attributes: t, events: r }) {
+    return [o("input", e._g(e._b({ class: ["vs__search", e.inputClass] }, "input", t, !1), r))];
   } }, { key: "open-indicator", fn: function({ attributes: t }) {
-    return [l("ChevronDown", e._b({ attrs: { "fill-color": "var(--vs-controls-color)", size: 26 } }, "ChevronDown", t, !1))];
+    return [o("ChevronDown", e._b({ attrs: { "fill-color": "var(--vs-controls-color)", size: 26 } }, "ChevronDown", t, !1))];
   } }, { key: "option", fn: function(t) {
-    return [e.userSelect ? l("NcListItemIcon", e._b({ attrs: { name: t[e.localLabel], search: e.search } }, "NcListItemIcon", t, !1)) : l("NcEllipsisedOption", { attrs: { name: String(t[e.localLabel]), search: e.search } })];
+    return [e.userSelect ? o("NcListItemIcon", e._b({ attrs: { name: t[e.localLabel], search: e.search } }, "NcListItemIcon", t, !1)) : o("NcEllipsisedOption", { attrs: { name: String(t[e.localLabel]), search: e.search } })];
   } }, { key: "selected-option", fn: function(t) {
-    return [e.userSelect ? l("NcListItemIcon", e._b({ attrs: { name: t[e.localLabel], search: e.search } }, "NcListItemIcon", t, !1)) : l("NcEllipsisedOption", { attrs: { name: String(t[e.localLabel]), search: e.search } })];
+    return [e.userSelect ? o("NcListItemIcon", e._b({ attrs: { name: t[e.localLabel], search: e.search } }, "NcListItemIcon", t, !1)) : o("NcEllipsisedOption", { attrs: { name: String(t[e.localLabel]), search: e.search } })];
   } }, { key: "spinner", fn: function(t) {
-    return [t.loading ? l("NcLoadingIcon") : e._e()];
+    return [t.loading ? o("NcLoadingIcon") : e._e()];
   } }, { key: "no-options", fn: function() {
     return [e._v(" " + e._s(e.t("No results")) + " ")];
-  }, proxy: !0 }, e._l(e.$scopedSlots, function(t, o) {
-    return { key: o, fn: function(n) {
-      return [e._t(o, null, null, n)];
+  }, proxy: !0 }, e._l(e.$scopedSlots, function(t, r) {
+    return { key: r, fn: function(a) {
+      return [e._t(r, null, null, a)];
     } };
   })], null, !0) }, "VueSelect", e.propsToForward, !1), e.$listeners));
-}, C = [], N = L(B, v, C, !1, null, null, null, null);
-const A = N.exports;
+}, N = [], F = /* @__PURE__ */ C(
+  v,
+  B,
+  N,
+  !1,
+  null,
+  null,
+  null,
+  null
+);
+const V = F.exports;
 export {
-  A as default
+  V as default
 };

package/dist/Components/NcSelect.mjs.map

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