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

package/dist/chunks/NcSavingIndicatorIcon-BiGAtlKQ.mjs

@@ -0,0 +1,79 @@
+import { defineComponent, openBlock, createElementBlock, createElementVNode, toDisplayString, createCommentVNode } from "vue";
+import { _ as _export_sfc } from "./_plugin-vue_export-helper-1tPrXgE0.mjs";
+const _sfc_main = defineComponent({
+  name: "NcSavingIndicatorIcon",
+  props: {
+    /**
+     * Specify the size of the saving icon.
+     */
+    size: {
+      type: Number,
+      default: 20
+    },
+    /**
+     * Specify what is saved.
+     */
+    name: {
+      type: String,
+      default: ""
+    },
+    /**
+     * Set to true when saving is in progress.
+     */
+    saving: {
+      type: Boolean,
+      default: false,
+      required: false
+    },
+    /**
+     * Set to true if an error occured while saving.
+     */
+    error: {
+      type: Boolean,
+      default: false,
+      required: false
+    }
+  },
+  emits: ["click"],
+  computed: {
+    indicatorColor() {
+      return this.error ? "var(--color-error)" : this.saving ? "var(--color-primary-element)" : "none";
+    }
+  }
+});
+const _hoisted_1 = ["aria-label"];
+const _hoisted_2 = ["fill", "width", "height"];
+const _hoisted_3 = ["fill"];
+const _hoisted_4 = {
+  fill: "currentColor",
+  d: "M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"
+};
+const _hoisted_5 = { key: 0 };
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  return openBlock(), createElementBlock("span", {
+    "aria-label": _ctx.name,
+    class: "material-design-icon",
+    role: "img",
+    onClick: _cache[0] || (_cache[0] = ($event) => _ctx.$emit("click", $event))
+  }, [
+    (openBlock(), createElementBlock("svg", {
+      fill: _ctx.fillColor,
+      class: "material-design-icon__svg",
+      width: _ctx.size,
+      height: _ctx.size,
+      viewBox: "0 0 24 24"
+    }, [
+      createElementVNode("path", {
+        fill: _ctx.indicatorColor,
+        d: "m19 15a4 4 0 0 0-4 4 4 4 0 0 0 4 4 4 4 0 0 0 4-4 4 4 0 0 0-4-4z"
+      }, null, 8, _hoisted_3),
+      createElementVNode("path", _hoisted_4, [
+        _ctx.name ? (openBlock(), createElementBlock("title", _hoisted_5, toDisplayString(_ctx.name), 1)) : createCommentVNode("", true)
+      ])
+    ], 8, _hoisted_2))
+  ], 8, _hoisted_1);
+}
+const NcSavingIndicatorIcon = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
+export {
+  NcSavingIndicatorIcon as N
+};

package/dist/chunks/NcSavingIndicatorIcon-BiGAtlKQ.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"NcSavingIndicatorIcon-BiGAtlKQ.mjs","sources":["../../src/components/NcSavingIndicatorIcon/NcSavingIndicatorIcon.vue"],"sourcesContent":["<!--\n  - @copyright Copyright (c) 2022\n  -\n  - @license GNU AGPL version 3 or any later version\n  -\n  - This program is free software: you can redistribute it and/or modify\n  - it under the terms of the GNU Affero General Public License as\n  - published by the Free Software Foundation, either version 3 of the\n  - License, or (at your option) any later version.\n  -\n  - This program is distributed in the hope that it will be useful,\n  - but WITHOUT ANY WARRANTY; without even the implied warranty of\n  - MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the\n  - GNU Affero General Public License for more details.\n  -\n  - You should have received a copy of the GNU Affero General Public License\n  - along with this program. If not, see <http://www.gnu.org/licenses/>.\n  -\n  -->\n\n<docs>\n# Usage\n\n```\n<template>\n<div>\n\t<div>\n\t\t<NcSavingIndicatorIcon :name=\"`${savingState === 'error' ? 'Error saving' : savingState} file`\"\n\t\t\t:error=\"savingState === 'error'\"\n\t\t\t:saving=\"savingState === 'saving'\" />\n\t</div>\n\t<br />\n\t<div style=\"display: flex; justify-content: space-around;\">\n\t\t<NcCheckboxRadioSwitch v-model=\"savingState\"\n\t\t\tvalue=\"saved\"\n\t\t\tname=\"saving_radio\"\n\t\t\ttype=\"radio\">\n\t\t\tSaved\n\t\t</NcCheckboxRadioSwitch>\n\t\t<NcCheckboxRadioSwitch v-model=\"savingState\"\n\t\t\tvalue=\"saving\"\n\t\t\tname=\"saving_radio\"\n\t\t\ttype=\"radio\">\n\t\t\tSaving\n\t\t</NcCheckboxRadioSwitch>\n\t\t<NcCheckboxRadioSwitch v-model=\"savingState\"\n\t\t\tvalue=\"error\"\n\t\t\tname=\"saving_radio\"\n\t\t\ttype=\"radio\">\n\t\t\tError\n\t\t</NcCheckboxRadioSwitch>\n\t</div>\n</div>\n</template>\n<script>\nexport default {\n\tdata() {\n\t\treturn {\n\t\t\tsavingState: 'saved',\n\t\t}\n\t},\n}\n</script>\n\n```\n</docs>\n\n<template>\n\t<span :aria-label=\"name\"\n\t\tclass=\"material-design-icon\"\n\t\trole=\"img\"\n\t\t@click=\"$emit('click', $event)\">\n\t\t<svg :fill=\"fillColor\"\n\t\t\tclass=\"material-design-icon__svg\"\n\t\t\t:width=\"size\"\n\t\t\t:height=\"size\"\n\t\t\tviewBox=\"0 0 24 24\">\n\t\t\t<path :fill=\"indicatorColor\" d=\"m19 15a4 4 0 0 0-4 4 4 4 0 0 0 4 4 4 4 0 0 0 4-4 4 4 0 0 0-4-4z\" />\n\t\t\t<path fill=\"currentColor\" d=\"M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z\">\n\t\t\t\t<title v-if=\"name\">{{ name }}</title>\n\t\t\t</path>\n\t\t</svg>\n\t</span>\n</template>\n\n<script>\nimport { defineComponent } from 'vue'\n\nexport default defineComponent({\n\tname: 'NcSavingIndicatorIcon',\n\tprops: {\n\t\t/**\n\t\t * Specify the size of the saving icon.\n\t\t */\n\t\tsize: {\n\t\t\ttype: Number,\n\t\t\tdefault: 20,\n\t\t},\n\t\t/**\n\t\t * Specify what is saved.\n\t\t */\n\t\tname: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\t\t/**\n\t\t * Set to true when saving is in progress.\n\t\t */\n\t\tsaving: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t\trequired: false,\n\t\t},\n\t\t/**\n\t\t * Set to true if an error occured while saving.\n\t\t */\n\t\terror: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t\trequired: false,\n\t\t},\n\t},\n\temits: ['click'],\n\tcomputed: {\n\t\tindicatorColor() {\n\t\t\treturn this.error ? 'var(--color-error)' : (this.saving ? 'var(--color-primary-element)' : 'none')\n\t\t},\n\t},\n})\n</script>\n"],"names":["_createElementBlock","_createElementVNode","_createCommentVNode"],"mappings":";;AAwFA,MAAK,YAAa,gBAAa;AAAA,EAC9B,MAAM;AAAA,EACN,OAAO;AAAA;AAAA;AAAA;AAAA,IAIN,MAAM;AAAA,MACL,MAAM;AAAA,MACN,SAAS;AAAA,IACT;AAAA;AAAA;AAAA;AAAA,IAID,MAAM;AAAA,MACL,MAAM;AAAA,MACN,SAAS;AAAA,IACT;AAAA;AAAA;AAAA;AAAA,IAID,QAAQ;AAAA,MACP,MAAM;AAAA,MACN,SAAS;AAAA,MACT,UAAU;AAAA,IACV;AAAA;AAAA;AAAA;AAAA,IAID,OAAO;AAAA,MACN,MAAM;AAAA,MACN,SAAS;AAAA,MACT,UAAU;AAAA,IACV;AAAA,EACD;AAAA,EACD,OAAO,CAAC,OAAO;AAAA,EACf,UAAU;AAAA,IACT,iBAAiB;AAChB,aAAO,KAAK,QAAQ,uBAAwB,KAAK,SAAS,iCAAiC;AAAA,IAC3F;AAAA,EACD;AACF,CAAC;AAhID,MAAA,aAAA,CAAA,YAAA;AAAA,MAAA,aAAA,CAAA,QAAA,SAAA,QAAA;AAAA,MAAA,aAAA,CAAA,MAAA;;EA8ES,MAAK;AAAA,EAAe,GAAE;;qBA9E/B,KAAA,EAAA;;sBAoECA,mBAcO,QAAA;AAAA,IAdA,cAAY,KAAI;AAAA,IACtB,OAAM;AAAA,IACN,MAAK;AAAA,IACJ,SAAK,OAAA,CAAA,MAAA,OAAA,CAAA,IAAA,YAAE,KAAK,MAAA,SAAU,MAAM;AAAA;kBAC7BA,mBASM,OAAA;AAAA,MATA,MAAM,KAAS;AAAA,MACpB,OAAM;AAAA,MACL,OAAO,KAAI;AAAA,MACX,QAAQ,KAAI;AAAA,MACb,SAAQ;AAAA;MACRC,mBAAmG,QAAA;AAAA,QAA5F,MAAM,KAAc;AAAA,QAAE,GAAE;AAAA,MA7ElC,GAAA,MAAA,GAAA,UAAA;AAAA,MA8EGA,mBAEO,QAFP,YAEO;AAAA,QADO,KAAI,qBAAjBD,mBAAqC,SA/EzC,4BA+E0B,KAAI,IAAA,GAAA,CAAA,KA/E9BE,mBAAA,IAAA,IAAA;AAAA;IAAA,GAAA,GAAA,UAAA;AAAA,EAAA,GAAA,GAAA,UAAA;;;"}

package/dist/chunks/NcSelect-Dt3JJc9b.mjs

@@ -0,0 +1,565 @@
+import '../assets/NcSelect-Fmyu7qyl.css';
+import "vue-select/dist/vue-select.css";
+import VueSelect from "vue-select";
+import { autoUpdate, computePosition, offset, flip, shift, limitShift } from "@floating-ui/dom";
+import { r as register, b as t14, a as t } from "./_l10n-ipRV_dfs.mjs";
+import { C as ChevronDown } from "./ChevronDown-De_Zvlgu.mjs";
+import { C as Close } from "./Close-pmiXntgw.mjs";
+import { N as NcEllipsisedOption } from "./NcEllipsisedOption-DsCFqgUF.mjs";
+import { N as NcListItemIcon } from "./NcListItemIcon-A5o8HkQv.mjs";
+import { N as NcLoadingIcon } from "./NcLoadingIcon-DwbO7gAy.mjs";
+import { G as GenRandomId } from "./GenRandomId-CXkjMlAT.mjs";
+import { h, warn, resolveComponent, openBlock, createBlock, mergeProps, createSlots, withCtx, createElementVNode, toHandlers, createVNode, createCommentVNode, createTextVNode, toDisplayString, renderList, renderSlot, normalizeProps, guardReactiveProps } from "vue";
+import { _ as _export_sfc } from "./_plugin-vue_export-helper-1tPrXgE0.mjs";
+register(t14);
+const _sfc_main = {
+  name: "NcSelect",
+  components: {
+    ChevronDown,
+    NcEllipsisedOption,
+    NcListItemIcon,
+    NcLoadingIcon,
+    VueSelect
+  },
+  props: {
+    // Add VueSelect props to $props
+    ...VueSelect.props,
+    ...VueSelect.mixins.reduce((allProps, mixin) => ({ ...allProps, ...mixin.props }), {}),
+    /**
+     * `aria-label` for the clear input button
+     */
+    ariaLabelClearSelected: {
+      type: String,
+      default: 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: 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: (optionLabel) => t("Deselect {option}", { option: optionLabel })
+    },
+    /**
+     * 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: true
+    },
+    /**
+     * 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: true
+    },
+    /**
+     * Replace default vue-select components
+     *
+     * @see https://vue-select.org/api/props.html#components
+     */
+    components: {
+      type: Object,
+      default: () => ({
+        Deselect: {
+          render: () => h(Close, {
+            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: false
+    },
+    /**
+     * 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, open }) => {
+        return noDrop ? false : open;
+      }
+    },
+    /**
+     * 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-${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: false
+    },
+    /**
+     * Display a visible border around dropdown options
+     * which have keyboard focus
+     */
+    keyboardFocusBorder: {
+      type: Boolean,
+      default: true
+    },
+    /**
+     * 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: false
+    },
+    /**
+     * Allow selection of multiple options
+     *
+     * @see https://vue-select.org/api/props.html#multiple
+     */
+    multiple: {
+      type: Boolean,
+      default: false
+    },
+    /**
+     * Disable automatic wrapping when selected options overflow the width
+     */
+    noWrap: {
+      type: Boolean,
+      default: false
+    },
+    /**
+     * 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(map, vm) {
+        return {
+          ...map,
+          /**
+           * Patched Escape handler to stop propagation from open select
+           *
+           * @param {KeyboardEvent} event - default keydown event handler
+           */
+          27: (event) => {
+            if (vm.open) {
+              event.stopPropagation();
+            }
+            map[27](event);
+          }
+        };
+      }
+    },
+    /**
+     * 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: () => 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: true
+    },
+    /**
+     * 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: false
+    },
+    /**
+     * 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
+     */
+    modelValue: {
+      type: [String, Number, Object, Array],
+      default: null
+    },
+    /**
+     * Enable if a value is required for native form validation
+     */
+    required: {
+      type: Boolean,
+      default: false
+    },
+    /**
+     * 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
+    " ",
+    "update:modelValue"
+  ],
+  data() {
+    return {
+      search: ""
+    };
+  },
+  computed: {
+    inputRequired() {
+      if (!this.required) {
+        return null;
+      }
+      return this.value === null || Array.isArray(this.value) && this.value.length === 0;
+    },
+    localCalculatePosition() {
+      if (this.calculatePosition !== null) {
+        return this.calculatePosition;
+      }
+      return (dropdownMenu, component, { width }) => {
+        dropdownMenu.style.width = width;
+        const addClass = {
+          name: "addClass",
+          fn() {
+            dropdownMenu.classList.add("vs__dropdown-menu--floating");
+            return {};
+          }
+        };
+        const togglePlacementClass = {
+          name: "togglePlacementClass",
+          fn({ placement }) {
+            component.$el.classList.toggle(
+              "select--drop-up",
+              placement === "top"
+            );
+            dropdownMenu.classList.toggle(
+              "vs__dropdown-menu--floating-placement-top",
+              placement === "top"
+            );
+            return {};
+          }
+        };
+        const updatePosition = () => {
+          computePosition(component.$refs.toggle, dropdownMenu, {
+            placement: this.placement,
+            middleware: [
+              offset(-1),
+              addClass,
+              togglePlacementClass,
+              // Match popperjs default collision prevention behavior by appending the following middleware in order
+              flip(),
+              shift({ limiter: limitShift() })
+            ]
+          }).then(({ x, y }) => {
+            Object.assign(dropdownMenu.style, {
+              left: `${x}px`,
+              top: `${y}px`,
+              width: `${component.$refs.toggle.getBoundingClientRect().width}px`
+            });
+          });
+        };
+        const cleanup = autoUpdate(
+          component.$refs.toggle,
+          dropdownMenu,
+          updatePosition
+        );
+        return cleanup;
+      };
+    },
+    localFilterBy() {
+      const EMAIL_NOTATION = /[^<]*<([^>]+)/;
+      if (this.filterBy !== null) {
+        return this.filterBy;
+      }
+      if (this.userSelect) {
+        return (option, label, search) => {
+          const match = search.match(EMAIL_NOTATION);
+          return match && option.subname?.toLocaleLowerCase?.()?.indexOf(match[1].toLocaleLowerCase()) > -1 || `${label} ${option.subname}`.toLocaleLowerCase().indexOf(search.toLocaleLowerCase()) > -1;
+        };
+      }
+      return VueSelect.props.filterBy.default;
+    },
+    localLabel() {
+      if (this.label !== null) {
+        return this.label;
+      }
+      if (this.userSelect) {
+        return "displayName";
+      }
+      return VueSelect.props.label.default;
+    },
+    propsToForward() {
+      const vueSelectKeys = [
+        ...Object.keys(VueSelect.props),
+        ...VueSelect.mixins.flatMap((mixin) => Object.keys(mixin.props ?? {}))
+      ];
+      const initialPropsToForward = Object.fromEntries(
+        Object.entries(this.$props).filter(([key, _value]) => vueSelectKeys.includes(key))
+      );
+      const propsToForward = {
+        ...initialPropsToForward,
+        // Custom overrides of vue-select props
+        calculatePosition: this.localCalculatePosition,
+        filterBy: this.localFilterBy,
+        label: this.localLabel
+      };
+      return propsToForward;
+    }
+  },
+  mounted() {
+    if (!this.labelOutside && !this.inputLabel && !this.ariaLabelCombobox) {
+      warn("[NcSelect] An `inputLabel` or `ariaLabelCombobox` should be set. If an external label is used, `labelOutside` should be set to `true`.");
+    }
+    if (this.inputLabel && this.ariaLabelCombobox) {
+      warn("[NcSelect] Only one of `inputLabel` or `ariaLabelCombobox` should to be set.");
+    }
+  },
+  methods: {
+    t
+  }
+};
+const _hoisted_1 = ["for"];
+const _hoisted_2 = ["required"];
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_ChevronDown = resolveComponent("ChevronDown");
+  const _component_NcListItemIcon = resolveComponent("NcListItemIcon");
+  const _component_NcEllipsisedOption = resolveComponent("NcEllipsisedOption");
+  const _component_NcLoadingIcon = resolveComponent("NcLoadingIcon");
+  const _component_VueSelect = resolveComponent("VueSelect");
+  return openBlock(), createBlock(_component_VueSelect, mergeProps({
+    class: ["select", {
+      "select--no-wrap": $props.noWrap,
+      "user-select": $props.userSelect
+    }]
+  }, $options.propsToForward, {
+    onSearch: _cache[0] || (_cache[0] = ($event) => $data.search = $event),
+    "onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => _ctx.$emit("update:modelValue", $event))
+  }), createSlots({
+    search: withCtx(({ attributes, events }) => [
+      createElementVNode("input", mergeProps({
+        class: ["vs__search", $props.inputClass]
+      }, attributes, { required: $options.inputRequired }, toHandlers(events, true)), null, 16, _hoisted_2)
+    ]),
+    "open-indicator": withCtx(({ attributes }) => [
+      createVNode(_component_ChevronDown, mergeProps(attributes, {
+        "fill-color": "var(--vs-controls-color)",
+        style: {
+          cursor: !$props.disabled ? "pointer" : null
+        },
+        size: 26
+      }), null, 16, ["style"])
+    ]),
+    option: withCtx((option) => [
+      $props.userSelect ? (openBlock(), createBlock(_component_NcListItemIcon, mergeProps({ key: 0 }, option, {
+        "avatar-size": 24,
+        name: option[$options.localLabel],
+        search: $data.search
+      }), null, 16, ["name", "search"])) : (openBlock(), createBlock(_component_NcEllipsisedOption, {
+        key: 1,
+        name: String(option[$options.localLabel]),
+        search: $data.search
+      }, null, 8, ["name", "search"]))
+    ]),
+    "selected-option": withCtx((selectedOption) => [
+      $props.userSelect ? (openBlock(), createBlock(_component_NcListItemIcon, mergeProps({ key: 0 }, selectedOption, {
+        "avatar-size": 24,
+        name: selectedOption[$options.localLabel],
+        search: $data.search
+      }), null, 16, ["name", "search"])) : (openBlock(), createBlock(_component_NcEllipsisedOption, {
+        key: 1,
+        name: String(selectedOption[$options.localLabel]),
+        search: $data.search
+      }, null, 8, ["name", "search"]))
+    ]),
+    spinner: withCtx((spinner) => [
+      spinner.loading ? (openBlock(), createBlock(_component_NcLoadingIcon, { key: 0 })) : createCommentVNode("", true)
+    ]),
+    "no-options": withCtx(() => [
+      createTextVNode(toDisplayString($options.t("No results")), 1)
+    ]),
+    _: 2
+  }, [
+    !$props.labelOutside && $props.inputLabel ? {
+      name: "header",
+      fn: withCtx(() => [
+        createElementVNode("label", {
+          for: $props.inputId,
+          class: "select__label"
+        }, toDisplayString($props.inputLabel), 9, _hoisted_1)
+      ]),
+      key: "0"
+    } : void 0,
+    renderList(_ctx.$slots, (_, name) => {
+      return {
+        name,
+        fn: withCtx((data) => [
+          renderSlot(_ctx.$slots, name, normalizeProps(guardReactiveProps(data)))
+        ])
+      };
+    })
+  ]), 1040, ["class"]);
+}
+const NcSelect = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
+export {
+  NcSelect as N
+};