Skip to content

Commit 4e48527

Browse files
pringelmannpringelmann
authored
Merge pull request #8423 from nextcloud-libraries/feat/vue-select-nextcloud-fork
feat(NcSelect): use @nextcloud/vue-select 4.0.0
2 parents a85904a + fc07e88 commit 4e48527

5 files changed

Lines changed: 44 additions & 37 deletions

File tree

‎package-lock.json‎

Lines changed: 14 additions & 11 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -87,6 +87,7 @@
8787
"@nextcloud/logger": "^3.0.3",
8888
"@nextcloud/router": "^3.1.0",
8989
"@nextcloud/sharing": "^0.4.0",
90+
"@nextcloud/vue-select": "^4.0.0",
9091
"@vuepic/vue-datepicker": "^11.0.3",
9192
"@vueuse/components": "^14.2.1",
9293
"@vueuse/core": "^14.2.1",
@@ -117,8 +118,7 @@
117118
"unist-builder": "^4.0.0",
118119
"unist-util-visit": "^5.1.0",
119120
"vue": "^3.5.18",
120-
"vue-router": "^5.0.4",
121-
"vue-select": "^4.0.0-beta.6"
121+
"vue-router": "^5.0.4"
122122
},
123123
"devDependencies": {
124124
"@babel/plugin-syntax-import-assertions": "^7.28.6",

‎src/components/NcSelect/NcSelect.vue‎

Lines changed: 1 addition & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -395,8 +395,8 @@ import {
395395
offset,
396396
shift,
397397
} from '@floating-ui/dom'
398+
import { VueSelect } from '@nextcloud/vue-select'
398399
import { h, warn } from 'vue'
399-
import VueSelect from 'vue-select'
400400
import ChevronDown from 'vue-material-design-icons/ChevronDown.vue'
401401
import Close from 'vue-material-design-icons/Close.vue'
402402
import NcEllipsisedOption from '../NcEllipsisedOption/NcEllipsisedOption.vue'
@@ -405,11 +405,6 @@ import { t } from '../../l10n.ts'
405405
import { createElementId } from '../../utils/createElementId.ts'
406406
import { isLegacy } from '../../utils/legacy.ts'
407407
408-
// TODO: Use @nextcloud/vue-select once a vue 3 version is available.
409-
// Until then, all @nextcloud/vue-select specific improvements won't be available.
410-
// E.g. the `limit` prop has no effect, currently.
411-
import 'vue-select/dist/vue-select.css'
412-
413408
export default {
414409
name: 'NcSelect',
415410

‎tests/component/components/NcSelectUsers/NcSelectUsers.spec.ts‎

Lines changed: 18 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -9,8 +9,8 @@ import UserSelect from './UserSelect.story.vue'
99
test('has options', async ({ mount, page }) => {
1010
const component = await mount(UserSelect)
1111

12-
await expect(component.getByRole('searchbox')).toBeVisible()
13-
await component.getByRole('searchbox').click()
12+
await expect(component.getByRole('combobox')).toBeVisible()
13+
await component.getByRole('combobox').click()
1414

1515
expect(await page.getByRole('option').all()).toHaveLength(3)
1616
await expect(page.getByRole('option', { name: 'Olivia' })).toBeVisible()
@@ -21,8 +21,8 @@ test('has options', async ({ mount, page }) => {
2121
test('can filter by name', async ({ mount, page }) => {
2222
const component = await mount(UserSelect)
2323

24-
await expect(component.getByRole('searchbox')).toBeVisible()
25-
await component.getByRole('searchbox').fill('Em')
24+
await expect(component.getByRole('combobox')).toBeVisible()
25+
await component.getByRole('combobox').fill('Em')
2626

2727
await expect(page.getByRole('option', { name: 'Emma' })).toBeVisible()
2828
expect(await page.getByRole('option').all()).toHaveLength(1)
@@ -31,8 +31,8 @@ test('can filter by name', async ({ mount, page }) => {
3131
test('can filter by mail', async ({ mount, page }) => {
3232
const component = await mount(UserSelect)
3333

34-
await expect(component.getByRole('searchbox')).toBeVisible()
35-
await component.getByRole('searchbox').fill('olivia@example')
34+
await expect(component.getByRole('combobox')).toBeVisible()
35+
await component.getByRole('combobox').fill('olivia@example')
3636

3737
await expect(page.getByRole('option', { name: 'Olivia' })).toBeVisible()
3838
expect(await page.getByRole('option').all()).toHaveLength(1)
@@ -49,18 +49,18 @@ test(
4949
async ({ mount, page }) => {
5050
const component = await mount(UserSelect)
5151

52-
await expect(component.getByRole('searchbox')).toBeVisible()
53-
await component.getByRole('searchbox').fill('O. <')
52+
await expect(component.getByRole('combobox')).toBeVisible()
53+
await component.getByRole('combobox').fill('O. <')
5454

5555
// should not exist right now as neither Name no email provided
5656
await expect(page.getByText('No results')).toBeVisible()
5757
expect(await page.getByRole('option', { name: 'Olivia' }).all()).toHaveLength(0)
5858

59-
await component.getByRole('searchbox').fill('O. <olivia')
59+
await component.getByRole('combobox').fill('O. <olivia')
6060
// now it should match the name
6161
await expect(page.getByRole('option', { name: 'Olivia' })).toBeVisible()
6262

63-
await component.getByRole('searchbox').fill('O. <olivia@example.org>')
63+
await component.getByRole('combobox').fill('O. <olivia@example.org>')
6464
// now it should match the email
6565
await expect(page.getByRole('option', { name: 'Olivia' })).toBeVisible()
6666
expect(await page.getByRole('option').all()).toHaveLength(1)
@@ -75,8 +75,8 @@ test('can select option', async ({ mount, page }) => {
7575
},
7676
})
7777

78-
await expect(component.getByRole('searchbox')).toBeVisible()
79-
await component.getByRole('searchbox').click()
78+
await expect(component.getByRole('combobox')).toBeVisible()
79+
await component.getByRole('combobox').click()
8080

8181
await expect(page.getByRole('option', { name: 'Olivia' })).toBeVisible()
8282
await page.getByRole('option', { name: 'Olivia' }).click()
@@ -86,8 +86,8 @@ test('can select option', async ({ mount, page }) => {
8686
id: '0-olivia',
8787
})
8888

89-
await expect(component.getByRole('searchbox')).toBeVisible()
90-
await component.getByRole('searchbox').click()
89+
await expect(component.getByRole('combobox')).toBeVisible()
90+
await component.getByRole('combobox').click()
9191

9292
await expect(page.getByRole('option', { name: 'John' })).toBeVisible()
9393
await page.getByRole('option', { name: 'John' }).click()
@@ -109,14 +109,14 @@ test('can select multiple option', async ({ mount, page }) => {
109109
},
110110
})
111111

112-
await expect(component.getByRole('searchbox')).toBeVisible()
113-
await component.getByRole('searchbox').click()
112+
await expect(component.getByRole('combobox')).toBeVisible()
113+
await component.getByRole('combobox').click()
114114

115115
await expect(page.getByRole('option', { name: 'Olivia' })).toBeVisible()
116116
await page.getByRole('option', { name: 'Olivia' }).click()
117117

118-
await expect(component.getByRole('searchbox')).toBeVisible()
119-
await component.getByRole('searchbox').click()
118+
await expect(component.getByRole('combobox')).toBeVisible()
119+
await component.getByRole('combobox').click()
120120
await expect(page.getByRole('option', { name: 'John' })).toBeVisible()
121121
await page.getByRole('option', { name: 'John' }).click()
122122

‎vitest.config.ts‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -28,6 +28,15 @@ export default async (env) => {
2828
'node_modules/**',
2929
'docs/**',
3030
],
31+
// @nextcloud/vue-select's ESM bundle imports its own CSS inline
32+
// (`import './assets/*.css'` at the top of dist/index.mjs). Routing
33+
// it through Vite's transform pipeline lets the CSS import be
34+
// handled instead of reaching Node's native ESM loader.
35+
server: {
36+
deps: {
37+
inline: ['@nextcloud/vue-select'],
38+
},
39+
},
3140
},
3241
})
3342
}

0 commit comments

Comments
 (0)