feat(NcSelect): use @nextcloud/vue-select 4.0.0

-e
Signed-off-by: Peter Ringelmann <peter.ringelmann@nextcloud.com>

Author: pringelmann

package-lock.json

@@ -87,6 +87,7 @@
     "@nextcloud/logger": "^3.0.3",
     "@nextcloud/router": "^3.1.0",
     "@nextcloud/sharing": "^0.4.0",
+    "@nextcloud/vue-select": "^4.0.0",
     "@vuepic/vue-datepicker": "^11.0.3",
     "@vueuse/components": "^14.2.1",
     "@vueuse/core": "^14.2.1",
@@ -117,8 +118,7 @@
     "unist-builder": "^4.0.0",
     "unist-util-visit": "^5.1.0",
     "vue": "^3.5.18",
-    "vue-router": "^5.0.4",
-    "vue-select": "^4.0.0-beta.6"
+    "vue-router": "^5.0.4"
   },
   "devDependencies": {
     "@babel/plugin-syntax-import-assertions": "^7.28.6",

package.json

@@ -395,8 +395,8 @@ import {
 	offset,
 	shift,
 } from '@floating-ui/dom'
+import { VueSelect } from '@nextcloud/vue-select'
 import { h, warn } from 'vue'
-import VueSelect from 'vue-select'
 import ChevronDown from 'vue-material-design-icons/ChevronDown.vue'
 import Close from 'vue-material-design-icons/Close.vue'
 import NcEllipsisedOption from '../NcEllipsisedOption/NcEllipsisedOption.vue'
@@ -405,11 +405,6 @@ import { t } from '../../l10n.ts'
 import { createElementId } from '../../utils/createElementId.ts'
 import { isLegacy } from '../../utils/legacy.ts'
 
-// TODO: Use @nextcloud/vue-select once a vue 3 version is available.
-// Until then, all @nextcloud/vue-select specific improvements won't be available.
-// E.g. the `limit` prop has no effect, currently.
-import 'vue-select/dist/vue-select.css'
-
 export default {
 	name: 'NcSelect',
 

src/components/NcSelect/NcSelect.vue

@@ -28,6 +28,15 @@ export default async (env) => {
 				'node_modules/**',
 				'docs/**',
 			],
+			// @nextcloud/vue-select's ESM bundle imports its own CSS inline
+			// (`import './assets/*.css'` at the top of dist/index.mjs). Routing
+			// it through Vite's transform pipeline lets the CSS import be
+			// handled instead of reaching Node's native ESM loader.
+			server: {
+				deps: {
+					inline: ['@nextcloud/vue-select'],
+				},
+			},
 		},
 	})
 }