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

package/dist/Components/NcSelect.cjs

@@ -1 +1,406 @@
-var B=require("../assets/index15.css");const s=require("@nextcloud/vue-select");require("@nextcloud/vue-select/dist/vue-select.css");const o=require("@floating-ui/dom"),u=require("vue-material-design-icons/ChevronDown.vue"),p=require("vue-material-design-icons/Close.vue"),d=require("./NcEllipsisedOption.cjs"),f=require("./NcListItemIcon.cjs"),y=require("./NcLoadingIcon.cjs"),m=require("../chunks/l10n-dacb6440.cjs"),h=require("../chunks/_plugin-vue2_normalizer-764a4c12.cjs");const g={name:"NcSelect",components:{ChevronDown:u,NcEllipsisedOption:d,NcListItemIcon:f,NcLoadingIcon:y,VueSelect:s.VueSelect},mixins:[m.l10n],props:{...s.VueSelect.props,appendToBody:{type:Boolean,default:!0},calculatePosition:{type:Function,default:null},closeOnSelect:{type:Boolean,default:!0},components:{type:Object,default:()=>({Deselect:{render:e=>e(p,{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 n={name:"addClass",fn(a){return e.classList.add("vs__dropdown-menu--floating"),{}}},r={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"),{}}},i=()=>{o.computePosition(l.$refs.toggle,e,{placement:this.placement,middleware:[o.offset(-1),n,r,o.flip(),o.shift({limiter:o.limitShift()})]}).then(({x:a,y:c})=>{Object.assign(e.style,{left:`${a}px`,top:`${c}px`})})};return o.autoUpdate(l.$refs.toggle,e,i)}},localFilterBy(){return this.filterBy!==null?this.filterBy:this.userSelect?(e,l,t)=>(`${l} ${e.subname}`||"").toLocaleLowerCase().indexOf(t.toLocaleLowerCase())>-1:s.VueSelect.props.filterBy.default},localLabel(){return this.label!==null?this.label:this.userSelect?"displayName":s.VueSelect.props.label.default},propsToForward(){const{inputClass:e,noWrap:l,placement:t,userSelect:n,...r}=this.$props;return{...r,calculatePosition:this.localCalculatePosition,filterBy:this.localFilterBy,label:this.localLabel}}}};var b=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:n}){return[l("input",e._g(e._b({class:["vs__search",e.inputClass]},"input",t,!1),n))]}},{key:"open-indicator",fn:function({attributes:t}){return[l("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}})]}},{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}})]}},{key:"spinner",fn:function(t){return[t.loading?l("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,n){return{key:n,fn:function(r){return[e._t(n,null,null,r)]}}})],null,!0)},"VueSelect",e.propsToForward,!1),e.$listeners))},S=[],_=h.normalizeComponent(g,b,S,!1,null,null,null,null);const L=_.exports;module.exports=L;
+var w = require("../assets/index-1beccc92.css");
+const c = require("@nextcloud/vue-select");
+require("@nextcloud/vue-select/dist/vue-select.css");
+const r = require("@floating-ui/dom"), p = require("vue-material-design-icons/ChevronDown.vue"), f = require("vue-material-design-icons/Close.vue"), d = require("./NcEllipsisedOption.cjs"), _ = require("./NcListItemIcon.cjs"), y = require("./NcLoadingIcon.cjs"), m = require("../chunks/l10n-4326316a.cjs"), h = require("../chunks/GenRandomId-c214d235.cjs"), g = require("../chunks/_plugin-vue2_normalizer-7f9efb60.cjs"), i = (t) => t && t.__esModule ? t : { default: t }, S = /* @__PURE__ */ i(p), b = /* @__PURE__ */ i(f);
+const C = {
+  name: "NcSelect",
+  components: {
+    ChevronDown: S.default,
+    NcEllipsisedOption: d,
+    NcListItemIcon: _,
+    NcLoadingIcon: y,
+    VueSelect: c.VueSelect
+  },
+  mixins: [
+    m.l10n
+  ],
+  props: {
+    // Add VueSelect props to $props
+    ...c.VueSelect.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: (t) => t(b.default, {
+            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
+     *
+     * @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(t, e) {
+        return {
+          ...t,
+          /**
+           * Patched Escape handler to stop propagation from open select
+           *
+           * @param {KeyboardEvent} event - default keydown event handler
+           */
+          27: (n) => {
+            e.open && n.stopPropagation(), t[27](n);
+          }
+        };
+      }
+    },
+    /**
+     * 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: () => "-" + h.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: n }) => {
+        t.style.width = n;
+        const l = {
+          name: "addClass",
+          fn(s) {
+            return t.classList.add("vs__dropdown-menu--floating"), {};
+          }
+        }, o = {
+          name: "togglePlacementClass",
+          fn({ placement: s }) {
+            return e.$el.classList.toggle(
+              "select--drop-up",
+              s === "top"
+            ), t.classList.toggle(
+              "vs__dropdown-menu--floating-placement-top",
+              s === "top"
+            ), {};
+          }
+        }, a = () => {
+          r.computePosition(e.$refs.toggle, t, {
+            placement: this.placement,
+            middleware: [
+              r.offset(-1),
+              l,
+              o,
+              // Match popperjs default collision prevention behavior by appending the following middleware in order
+              r.flip(),
+              r.shift({ limiter: r.limitShift() })
+            ]
+          }).then(({ x: s, y: u }) => {
+            Object.assign(t.style, {
+              left: `${s}px`,
+              top: `${u}px`
+            });
+          });
+        };
+        return r.autoUpdate(
+          e.$refs.toggle,
+          t,
+          a
+        );
+      };
+    },
+    localFilterBy() {
+      return this.filterBy !== null ? this.filterBy : this.userSelect ? (t, e, n) => (`${e} ${t.subname}` || "").toLocaleLowerCase().indexOf(n.toLocaleLowerCase()) > -1 : c.VueSelect.props.filterBy.default;
+    },
+    localLabel() {
+      return this.label !== null ? this.label : this.userSelect ? "displayName" : c.VueSelect.props.label.default;
+    },
+    propsToForward() {
+      const {
+        // Props handled by this component
+        inputClass: t,
+        noWrap: e,
+        placement: n,
+        userSelect: l,
+        // Props to forward
+        ...o
+      } = this.$props;
+      return {
+        ...o,
+        // Custom overrides of vue-select props
+        calculatePosition: this.localCalculatePosition,
+        filterBy: this.localFilterBy,
+        label: this.localLabel
+      };
+    }
+  }
+};
+var L = function() {
+  var e = this, n = e._self._c;
+  return n("VueSelect", e._g(e._b({ staticClass: "select", class: {
+    "select--no-wrap": e.noWrap
+  }, on: { search: (l) => e.search = l }, scopedSlots: e._u([{ key: "search", fn: function({ attributes: l, events: o }) {
+    return [n("input", e._g(e._b({ class: ["vs__search", e.inputClass] }, "input", l, !1), o))];
+  } }, { key: "open-indicator", fn: function({ attributes: l }) {
+    return [n("ChevronDown", e._b({ attrs: { "fill-color": "var(--vs-controls-color)", size: 26 } }, "ChevronDown", l, !1))];
+  } }, { key: "option", fn: function(l) {
+    return [e.userSelect ? n("NcListItemIcon", e._b({ attrs: { name: l[e.localLabel], search: e.search } }, "NcListItemIcon", l, !1)) : n("NcEllipsisedOption", { attrs: { name: String(l[e.localLabel]), search: e.search } })];
+  } }, { key: "selected-option", fn: function(l) {
+    return [e.userSelect ? n("NcListItemIcon", e._b({ attrs: { name: l[e.localLabel], search: e.search } }, "NcListItemIcon", l, !1)) : n("NcEllipsisedOption", { attrs: { name: String(l[e.localLabel]), search: e.search } })];
+  } }, { key: "spinner", fn: function(l) {
+    return [l.loading ? n("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, o) {
+    return { key: o, fn: function(a) {
+      return [e._t(o, null, null, a)];
+    } };
+  })], null, !0) }, "VueSelect", e.propsToForward, !1), e.$listeners));
+}, v = [], N = /* @__PURE__ */ g.normalizeComponent(
+  C,
+  L,
+  v,
+  !1,
+  null,
+  null,
+  null,
+  null
+);
+const B = N.exports;
+module.exports = B;

package/dist/Components/NcSelect.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"NcSelect.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":""}
+{"version":3,"file":"NcSelect.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=\"{ 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__default","Components_NcEllipsisedOption","Components_NcListItemIcon","Components_NcLoadingIcon","vueSelect","l10n","createElement","Close__default","noDrop","open","map","vm","event","GenRandomId","dropdownMenu","component","width","addClass","_middlewareArgs","togglePlacementClass","placement","updatePosition","dom","x","y","option","label","search","inputClass","noWrap","userSelect","initialPropsToForward"],"mappings":"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"}