@nextcloud/vue 8.6.0 → 9.0.0-alpha.1

package/dist/chunks/NcSelect-BnTLFd27.cjs

@@ -1,464 +0,0 @@
-require('../assets/NcSelect-GsLmwj9w.css');
-"use strict";
-require("@nextcloud/vue-select/dist/vue-select.css");
-const f = require("vue"), a = require("@nextcloud/vue-select"), s = require("@floating-ui/dom"), r = require("./_l10n-mEcF7TYU.cjs"), b = require("./ChevronDown-Hc_DTRav.cjs"), y = require("./Close-dotk0707.cjs"), m = require("../Components/NcEllipsisedOption.cjs"), h = require("./NcListItemIcon-aE0JNfCX.cjs"), _ = require("../Components/NcLoadingIcon.cjs"), c = require("./GenRandomId-ULxaMkkr.cjs"), g = require("./_plugin-vue2_normalizer-DCfUPqga.cjs"), L = (t) => t && t.__esModule ? t : { default: t }, p = /* @__PURE__ */ L(f);
-r.register(r.t14);
-const S = {
-  name: "NcSelect",
-  components: {
-    ChevronDown: b.ChevronDown,
-    NcEllipsisedOption: m,
-    NcListItemIcon: h.NcListItemIcon,
-    NcLoadingIcon: _,
-    VueSelect: a.VueSelect
-  },
-  props: {
-    // Add VueSelect props to $props
-    ...a.VueSelect.props,
-    ...a.VueSelect.mixins.reduce((t, e) => ({ ...t, ...e.props }), {}),
-    /**
-     * `aria-label` for the clear input button
-     */
-    ariaLabelClearSelected: {
-      type: String,
-      default: r.t("Clear selected")
-    },
-    /**
-     * `aria-label` for the search input
-     *
-     * A descriptive `inputLabel` is preferred as this is not visible.
-     */
-    ariaLabelCombobox: {
-      type: String,
-      default: null
-    },
-    /**
-     * `aria-label` for the listbox element
-     */
-    ariaLabelListbox: {
-      type: String,
-      default: r.t("Options")
-    },
-    /**
-     * Allows to customize the `aria-label` for the deselect-option button
-     * The default is "Deselect " + optionLabel
-     * @type {(optionLabel: string) => string}
-     */
-    ariaLabelDeselectOption: {
-      type: Function,
-      default: (t) => r.t("Deselect {option}", { option: t })
-    },
-    /**
-     * 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: (t) => t(y.Close, {
-            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: t, open: e }) => t ? !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
-     */
-    inputId: {
-      type: String,
-      default: () => `select-input-${c.GenRandomId()}`
-    },
-    /**
-     * Visible label for the input element
-     *
-     * @todo Set default for @nextcloud/vue 9
-     */
-    inputLabel: {
-      type: String,
-      default: null
-    },
-    /**
-     * Pass true if you are using an external label
-     */
-    labelOutside: {
-      type: Boolean,
-      default: !1
-    },
-    /**
-     * 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(t, e) {
-        return {
-          ...t,
-          /**
-           * Patched Escape handler to stop propagation from open select
-           *
-           * @param {KeyboardEvent} event - default keydown event handler
-           */
-          27: (o) => {
-            e.open && o.stopPropagation(), t[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: () => c.GenRandomId()
-    },
-    /**
-     * 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: ""
-    };
-  },
-  computed: {
-    localCalculatePosition() {
-      return this.calculatePosition !== null ? this.calculatePosition : (t, e, { width: o }) => {
-        t.style.width = o;
-        const l = {
-          name: "addClass",
-          fn(i) {
-            return t.classList.add("vs__dropdown-menu--floating"), {};
-          }
-        }, n = {
-          name: "togglePlacementClass",
-          fn({ placement: i }) {
-            return e.$el.classList.toggle(
-              "select--drop-up",
-              i === "top"
-            ), t.classList.toggle(
-              "vs__dropdown-menu--floating-placement-top",
-              i === "top"
-            ), {};
-          }
-        }, u = () => {
-          s.computePosition(e.$refs.toggle, t, {
-            placement: this.placement,
-            middleware: [
-              s.offset(-1),
-              l,
-              n,
-              // Match popperjs default collision prevention behavior by appending the following middleware in order
-              s.flip(),
-              s.shift({ limiter: s.limitShift() })
-            ]
-          }).then(({ x: i, y: d }) => {
-            Object.assign(t.style, {
-              left: `${i}px`,
-              top: `${d}px`,
-              width: `${e.$refs.toggle.getBoundingClientRect().width}px`
-            });
-          });
-        };
-        return s.autoUpdate(
-          e.$refs.toggle,
-          t,
-          u
-        );
-      };
-    },
-    localFilterBy() {
-      const t = /[^<]*<([^>]+)/;
-      return this.filterBy !== null ? this.filterBy : this.userSelect ? (e, o, l) => {
-        const n = l.match(t);
-        return n && e.subname?.toLocaleLowerCase?.()?.indexOf(n[1].toLocaleLowerCase()) > -1 || `${o} ${e.subname}`.toLocaleLowerCase().indexOf(l.toLocaleLowerCase()) > -1;
-      } : a.VueSelect.props.filterBy.default;
-    },
-    localLabel() {
-      return this.label !== null ? this.label : this.userSelect ? "displayName" : a.VueSelect.props.label.default;
-    },
-    propsToForward() {
-      const t = [
-        ...Object.keys(a.VueSelect.props),
-        ...a.VueSelect.mixins.flatMap((l) => Object.keys(l.props ?? {}))
-      ];
-      return {
-        ...Object.fromEntries(
-          Object.entries(this.$props).filter(([l, n]) => t.includes(l))
-        ),
-        // Custom overrides of vue-select props
-        calculatePosition: this.localCalculatePosition,
-        filterBy: this.localFilterBy,
-        label: this.localLabel
-      };
-    }
-  },
-  mounted() {
-    !this.labelOutside && !this.inputLabel && !this.ariaLabelCombobox && p.default.util.warn("[NcSelect] An `inputLabel` or `ariaLabelCombobox` should be set."), this.inputLabel && this.ariaLabelCombobox && p.default.util.warn("[NcSelect] Only one of `inputLabel` or `ariaLabelCombobox` should to be set.");
-  },
-  methods: {
-    t: r.t
-  }
-};
-var C = function() {
-  var e = this, o = e._self._c;
-  return o("VueSelect", e._g(e._b({ staticClass: "select", class: {
-    "select--no-wrap": e.noWrap,
-    "user-select": e.userSelect
-  }, on: { search: (l) => e.search = l }, scopedSlots: e._u([!e.labelOutside && e.inputLabel ? { key: "header", fn: function() {
-    return [o("label", { staticClass: "select__label", attrs: { for: e.inputId } }, [e._v(" " + e._s(e.inputLabel) + " ")])];
-  }, proxy: !0 } : null, { key: "search", fn: function({ attributes: l, events: n }) {
-    return [o("input", e._g(e._b({ class: ["vs__search", e.inputClass] }, "input", l, !1), n))];
-  } }, { key: "open-indicator", fn: function({ attributes: l }) {
-    return [o("ChevronDown", e._b({ style: {
-      cursor: e.disabled ? null : "pointer"
-    }, attrs: { "fill-color": "var(--vs-controls-color)", size: 26 } }, "ChevronDown", l, !1))];
-  } }, { key: "option", fn: function(l) {
-    return [e.userSelect ? o("NcListItemIcon", e._b({ attrs: { "avatar-size": 24, name: l[e.localLabel], search: e.search } }, "NcListItemIcon", l, !1)) : o("NcEllipsisedOption", { attrs: { name: String(l[e.localLabel]), search: e.search } })];
-  } }, { key: "selected-option", fn: function(l) {
-    return [e.userSelect ? o("NcListItemIcon", e._b({ attrs: { "avatar-size": 24, name: l[e.localLabel], search: e.search } }, "NcListItemIcon", l, !1)) : o("NcEllipsisedOption", { attrs: { name: String(l[e.localLabel]), search: e.search } })];
-  } }, { key: "spinner", fn: function(l) {
-    return [l.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(l, n) {
-    return { key: n, fn: function(u) {
-      return [e._t(n, null, null, u)];
-    } };
-  })], null, !0) }, "VueSelect", e.propsToForward, !1), e.$listeners));
-}, N = [], v = /* @__PURE__ */ g.normalizeComponent(
-  S,
-  C,
-  N,
-  !1,
-  null,
-  null,
-  null,
-  null
-);
-const I = v.exports;
-exports.NcSelect = I;

package/dist/chunks/NcSelect-BnTLFd27.cjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"NcSelect-BnTLFd27.cjs","sources":["../../src/components/NcSelect/NcSelect.vue"],"sourcesContent":["<!--\n\t- @copyright 2022 Christopher Ng <chrng8@gmail.com>\n\t-\n\t- @author Christopher Ng <chrng8@gmail.com>\n\t-\n\t- @license AGPL-3.0-or-later\n\t-\n\t- This program is free software: you can redistribute it and/or modify\n\t- it under the terms of the GNU Affero General Public License as\n\t- published by the Free Software Foundation, either version 3 of the\n\t- License, or (at your option) any later version.\n\t-\n\t- This program is distributed in the hope that it will be useful,\n\t- but WITHOUT ANY WARRANTY; without even the implied warranty of\n\t- MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the\n\t- GNU Affero General Public License for more details.\n\t-\n\t- You should have received a copy of the GNU Affero General Public License\n\t- along with this program. If not, see <http://www.gnu.org/licenses/>.\n\t-\n-->\n\n<docs>\n### Description\n\nGeneral purpose multiselect component.\n\n### Basic examples\n\n```vue\n<template>\n\t<div class=\"grid\">\n\t\t<div v-for=\"{ props } in selectArray\"\n\t\t\tclass=\"container\">\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>\nconst selectArray = [\n\t{\n\t\tprops: {\n\t\t\tinputLabel: 'Simple',\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\tprops: {\n\t\t\tinputLabel: 'Simple (top placement)',\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\tprops: {\n\t\t\tinputLabel: 'Multiple (with placeholder)',\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\tprops: {\n\t\t\tinputLabel: 'Multiple (objects, pre-selected, stay open on select)',\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<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<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>\nconst data1 = {\n\tprops: {\n\t\tinputLabel: 'Wrapped (Default)',\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\tprops: {\n\t\tinputLabel: 'Not wrapped',\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=\"{ props } in selectArray\"\n\t\t\tclass=\"container\">\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\nconst selectArray = [\n\t{\n\t\tprops: {\n\t\t\tinputLabel: 'User select',\n\t\t\tuserSelect: true,\n\t\t\toptions: [\n\t\t\t\t{\n\t\t\t\t\tid: '0-john',\n\t\t\t\t\tdisplayName: 'John',\n\t\t\t\t\tisNoUser: false,\n\t\t\t\t\tsubname: 'john@example.org',\n\t\t\t\t\ticon: '',\n\t\t\t\t\t// Example of how to show the user status within the option\n\t\t\t\t\tuser: '0-john',\n\t\t\t\t\tpreloadedUserStatus: {\n\t\t\t\t\t\ticon: '',\n\t\t\t\t\t\tstatus: 'online',\n\t\t\t\t\t\tmessage: 'I am online',\n\t\t\t\t\t},\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\tid: '0-emma',\n\t\t\t\t\tdisplayName: 'Emma',\n\t\t\t\t\tisNoUser: false,\n\t\t\t\t\tsubname: 'emma@example.org',\n\t\t\t\t\ticon: '',\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\tid: '0-olivia',\n\t\t\t\t\tdisplayName: 'Olivia',\n\t\t\t\t\tisNoUser: false,\n\t\t\t\t\tsubname: 'olivia@example.org',\n\t\t\t\t\ticon: '',\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\tid: '0-noah',\n\t\t\t\t\tdisplayName: 'Noah',\n\t\t\t\t\tisNoUser: false,\n\t\t\t\t\tsubname: 'noah@example.org',\n\t\t\t\t\ticon: '',\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\tid: '0-oliver',\n\t\t\t\t\tdisplayName: 'Oliver',\n\t\t\t\t\tisNoUser: false,\n\t\t\t\t\tsubname: 'oliver@example.org',\n\t\t\t\t\ticon: '',\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\tid: '1-admin',\n\t\t\t\t\tdisplayName: 'Admin',\n\t\t\t\t\tisNoUser: true,\n\t\t\t\t\tsubname: null,\n\t\t\t\t\ticonSvg: AccountGroup,\n\t\t\t\t\ticonName: 'Group icon',\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\tid: '2-org@example.org',\n\t\t\t\t\tdisplayName: 'Organization',\n\t\t\t\t\tisNoUser: true,\n\t\t\t\t\tsubname: 'org@example.org',\n\t\t\t\t\ticonSvg: Email,\n\t\t\t\t\ticonName: 'Email icon',\n\t\t\t\t},\n\t\t\t],\n\t\t},\n\t},\n\n\t{\n\t\tprops: {\n\t\t\tinputLabel: 'Multiple user select (stay open on select)',\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\t'user-select': userSelect,\n\t\t}\"\n\t\tv-bind=\"propsToForward\"\n\t\tv-on=\"$listeners\"\n\t\t@search=\"searchString => search = searchString\">\n\t\t<template v-if=\"!labelOutside && inputLabel\" #header>\n\t\t\t<label :for=\"inputId\"\n\t\t\t\tclass=\"select__label\">\n\t\t\t\t{{ inputLabel }}\n\t\t\t</label>\n\t\t</template>\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:style=\"{\n\t\t\t\t\tcursor: !disabled ? 'pointer' : null,\n\t\t\t\t}\"\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:avatar-size=\"24\"\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:avatar-size=\"24\"\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 '@nextcloud/vue-select/dist/vue-select.css'\n\nimport Vue from 'vue'\nimport { VueSelect } from '@nextcloud/vue-select'\nimport {\n\tautoUpdate,\n\tcomputePosition,\n\tflip,\n\tlimitShift,\n\toffset,\n\tshift,\n} from '@floating-ui/dom'\nimport { t } from '../../l10n.js'\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 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\tprops: {\n\t\t// Add VueSelect props to $props\n\t\t...VueSelect.props,\n\t\t...VueSelect.mixins.reduce((allProps, mixin) => ({ ...allProps, ...mixin.props }), {}),\n\n\t\t/**\n\t\t * `aria-label` for the clear input button\n\t\t */\n\t\tariaLabelClearSelected: {\n\t\t\ttype: String,\n\t\t\tdefault: t('Clear selected'),\n\t\t},\n\n\t\t/**\n\t\t * `aria-label` for the search input\n\t\t *\n\t\t * A descriptive `inputLabel` is preferred as this is not visible.\n\t\t */\n\t\tariaLabelCombobox: {\n\t\t\ttype: String,\n\t\t\tdefault: null,\n\t\t},\n\n\t\t/**\n\t\t * `aria-label` for the listbox element\n\t\t */\n\t\tariaLabelListbox: {\n\t\t\ttype: String,\n\t\t\tdefault: t('Options'),\n\t\t},\n\n\t\t/**\n\t\t * Allows to customize the `aria-label` for the deselect-option button\n\t\t * The default is \"Deselect \" + optionLabel\n\t\t * @type {(optionLabel: string) => string}\n\t\t */\n\t\tariaLabelDeselectOption: {\n\t\t\ttype: Function,\n\t\t\tdefault: (optionLabel) => t('Deselect {option}', { option: optionLabel }),\n\t\t},\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\tinputId: {\n\t\t\ttype: String,\n\t\t\tdefault: () => `select-input-${GenRandomId()}`,\n\t\t},\n\n\t\t/**\n\t\t * Visible label for the input element\n\t\t *\n\t\t * @todo Set default for @nextcloud/vue 9\n\t\t */\n\t\tinputLabel: {\n\t\t\ttype: String,\n\t\t\tdefault: null,\n\t\t},\n\n\t\t/**\n\t\t * Pass true if you are using an external label\n\t\t */\n\t\tlabelOutside: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\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\twidth: `${component.$refs.toggle.getBoundingClientRect().width}px`,\n\t\t\t\t\t\t})\n\t\t\t\t\t})\n\t\t\t\t}\n\n\t\t\t\tconst cleanup = autoUpdate(\n\t\t\t\t\tcomponent.$refs.toggle,\n\t\t\t\t\tdropdownMenu,\n\t\t\t\t\tupdatePosition,\n\t\t\t\t)\n\n\t\t\t\treturn cleanup\n\t\t\t}\n\t\t},\n\n\t\tlocalFilterBy() {\n\t\t\t// Match the email notation like \"Jane <j.doe@example.com>\" with the email address as matching group\n\t\t\tconst EMAIL_NOTATION = /[^<]*<([^>]+)/\n\n\t\t\tif (this.filterBy !== null) {\n\t\t\t\treturn this.filterBy\n\t\t\t}\n\t\t\tif (this.userSelect) {\n\t\t\t\treturn (option, label, search) => {\n\t\t\t\t\tconst match = search.match(EMAIL_NOTATION)\n\t\t\t\t\treturn (match && option.subname?.toLocaleLowerCase?.()?.indexOf(match[1].toLocaleLowerCase()) > -1)\n\t\t\t\t\t\t|| (`${label} ${option.subname}`\n\t\t\t\t\t\t\t.toLocaleLowerCase()\n\t\t\t\t\t\t\t.indexOf(search.toLocaleLowerCase()) > -1)\n\t\t\t\t}\n\t\t\t}\n\t\t\treturn VueSelect.props.filterBy.default\n\t\t},\n\n\t\tlocalLabel() {\n\t\t\tif (this.label !== null) {\n\t\t\t\treturn this.label\n\t\t\t}\n\t\t\tif (this.userSelect) {\n\t\t\t\treturn 'displayName'\n\t\t\t}\n\t\t\treturn VueSelect.props.label.default\n\t\t},\n\n\t\tpropsToForward() {\n\t\t\tconst vueSelectKeys = [\n\t\t\t\t...Object.keys(VueSelect.props),\n\t\t\t\t...VueSelect.mixins.flatMap(mixin => Object.keys(mixin.props ?? {})),\n\t\t\t]\n\t\t\tconst initialPropsToForward = Object.fromEntries(\n\t\t\t\tObject.entries(this.$props)\n\t\t\t\t\t.filter(([key, _value]) => vueSelectKeys.includes(key)),\n\t\t\t)\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\t\t\treturn propsToForward\n\t\t},\n\t},\n\n\tmounted() {\n\t\tif (!this.labelOutside && !this.inputLabel && !this.ariaLabelCombobox) {\n\t\t\tVue.util.warn('[NcSelect] An `inputLabel` or `ariaLabelCombobox` should be set.')\n\t\t}\n\t\tif (this.inputLabel && this.ariaLabelCombobox) {\n\t\t\tVue.util.warn('[NcSelect] Only one of `inputLabel` or `ariaLabelCombobox` should to be set.')\n\t\t}\n\t},\n\n\tmethods: {\n\t\tt,\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-main-text);\n\n\t/* Selected */\n\t--vs-selected-bg: var(--color-background-hover);\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\t/* Actions */\n\t--vs-actions-padding: 0 8px 0 4px;\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.select__label {\n\t\tdisplay: block;\n\t\tmargin-bottom: 2px;\n\t}\n\n\t.vs__selected {\n\t\theight: 32px;\n\t\tpadding: 0 8px 0 12px;\n\t\tborder-radius: 18px !important;\n\t\tbackground: var(--color-primary-element-light);\n\t\tborder: none;\n\t}\n\n\t.vs__search, .vs__search:focus {\n\t\tmargin: 2px 0 0;\n\t}\n\n\t.vs__dropdown-toggle {\n\t\tpadding: 0;\n\t}\n\n\t.vs__clear {\n\t\tmargin-right: 2px;\n\t}\n\n\t&.vs--open .vs__dropdown-toggle {\n\t\toutline: 2px solid var(--color-main-background);\n\t\tborder-color: var(--color-main-text);\n\t\tborder-bottom-color: transparent;\n\t}\n\n\t&:not(.vs--disabled, .vs--open) .vs__dropdown-toggle:hover {\n\t\toutline: 2px solid var(--color-main-background);\n\t\tborder-color: var(--color-main-text);\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-main-text);\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\t// Fix color to be accessible\n\t\t\t\topacity: 1;\n\t\t\t\tcolor: var(--color-text-maxcontrast);\n\t\t\t}\n\t\t}\n\t\t.vs__selected-options {\n\t\t\tflex-wrap: nowrap;\n\t\t}\n\t\t.vs__selected {\n\t\t\tbackground: unset !important;\n\t\t}\n\t}\n}\n\n.vs__dropdown-menu {\n\tborder-color: var(--color-main-text) !important;\n\toutline: none !important;\n\tbox-shadow:\n\t\t-2px 0 0 var(--color-main-background), // Right\n\t\t0 2px 0 var(--color-main-background), // Bottom\n\t\t2px 0 0 var(--color-main-background), // Left\n\t\t!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:\n\t\t\t\t0 -2px 0 var(--color-main-background), // Top\n\t\t\t\t-2px 0 0 var(--color-main-background), // Right\n\t\t\t\t2px 0 0 var(--color-main-background), // Left\n\t\t\t\t!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\n// Selected users require slightly different padding\n.user-select .vs__selected {\n\tpadding: 0 2px !important;\n}\n</style>\n"],"names":["_sfc_main","ChevronDown","NcEllipsisedOption","NcListItemIcon","NcLoadingIcon","VueSelect","allProps","mixin","t","optionLabel","createElement","Close","noDrop","open","GenRandomId","map","vm","event","dropdownMenu","component","width","addClass","_middlewareArgs","togglePlacementClass","placement","updatePosition","computePosition","offset","flip","shift","limitShift","x","y","autoUpdate","EMAIL_NOTATION","option","label","search","match","vueSelectKeys","key","_value","Vue"],"mappings":"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"}