Open sagalbot opened 2 years ago
Hey really like this package! Just wondering if there's been any progress on supporting Vue 3?
@matthewknill the above is up to date at the moment. The vue-select@beta
channel currently works with Vue 3.
it still not working as CDN global. please, can you give me an example?
thank you
also having issues with the cdn version
Issues with CDN...
Anyone managed to make it work with cdn?
As CDN for this library on vue 3 still not working, mean while I found this component.
https://github.com/iendeavor/vue-next-select https://morioh.com/p/7854e5675a05
Hope It helpful for someone too.
Hi, currently event @input / @change doesnt triggered
@Ima-Acikima, the input
/change
events have been removed in favour of update:modelValue
inline with the v-model
changes for vue 3.
@sagalbot just like @Ima-Acikima value change events are not triggering on my end either using @update:modelValue
.
This is a tough one because I do see the event triggered in Vue Devtools. Interesting enough, I am actually able to hook to option:selected
and other events.
I'm using "vue-select": "^4.0.0-beta.3",
but I'm starting to suspect that it might be something related to using @vue/compat
on my setup.
I'll debug it further and if I find a fix I'll PR it.
EDIT:
Found the issue and created a PR here https://github.com/sagalbot/vue-select/pull/1668
@walmon thanks for the diagnosis and PR! Just on vacation today and will review in the next few days.
Is there a documentation showing how I can use this?
@ankitsinghaniyaz
I made it work with Vue 3 Composition API.
Firstly you need to install it:
yarn add vue-select@beta
# or
npm install vue-select@beta
Now you can use it like this:
import vSelect from "vue-select";
[...]
<vSelect
:options="['Canada', 'USA', 'Poland']"
:clearable="false"
v-model="selectedCountry"
@update:modelValue="onCountryChange"
/>
is library dead for Vue 3?
What is the vue-select-3 package? It seems to link to the same documentation as vue-select ... https://www.npmjs.com/package/vue-select-3
@amchconsult define dead for me
@karladler that package is not associated with this one. Just a fork that someone published to NPM.
@sagalbot thanks for creating and maintaining this library! I'm working on large Vue 2 app, upgrading to Vue 3.
Are there updated types available for Vue 3 select beta? Anything specific to compositionAPI? I'm getting some type issues with @types/vue-select v3.16.2
In my components definition ( components: { vSelect }, ) I am getting the following lint error: "No overload matches this call. Type 'VueSelectContstructor' is not assignable to type 'Component<any, any, ComputedOptions, MethodOptions, any, any, any>'
Thanks!
Has anyone successfully migrated vue 2 version of this to vue 3?
Has anyone successfully migrated vue 2 version of this to vue 3?
yes, works fine for me.
What's the state of v4 development? Last update was 6 months ago and I am not sure if the project is still being worked on or if I should look for alternatives at this point
Looks like this library is not maintained anymore after all - anybody has recommendations for alternatives?
i went with Tom Select when no progress was made on this. https://github.com/orchidjs/tom-select Its not perfect but is framework agnostic and works quite well.
@mattl1598 That actually looks fantastic, I haven't heard of it either! Thanks a bunch
Hi @sagalbot , Is this library not maintained anymore ? v4 works for me in Vue 3, but I am not too keen on using a library which is not maintained. If you are looking for help, maybe you should advertise it on the main page ?
Thanks by the way for this great tool !
I'm not sure if this is a vue3 issue, but I'm using "vue-select": "^4.0.0-beta.6"
(nuxt@3.9.3) and I have a multiple select with vue-select. Every time I select an option from the list, it scrolls back to the top of the dropdown list. As you can imagine, this makes it very annoying to use.
I figured out what triggers it, but I'm not sure how to fix it. I wrote a wrapper for vue select to ensure styling etc are the same across my app. Therefore I have a model-value that comes in as a prop and I emit an update of that model value when something gets selected. If I comment out the emit (in handleSelect), it does not scroll back to the top every select. I'm sure I'm doing something wrong, but I cannot seem to figure out how to do it correctly 😅 Any help is very appreciated.
<template>
<div>
<v-select
v-model="selected"
:disabled="disabled"
:name="name"
label="label"
:options="options"
:multiple="multiple"
:close-on-select="!multiple"
:taggable="taggable"
:push-tags="taggable"
:placeholder="placeholder"
:class="selectFieldClass"
:style="{ backgroundColor: props.backgroundColor }"
@input="handleSelect"
@option:selected="handleSelect"
>
<template #option="option">
<slot name="option" :option="option">
{{ option.label }}
</slot>
</template>
<template #no-options="{ search, searching }">
<slot name="no-options" :search="search" :searching="searching">
<div v-if="searching" class="vs__dropdown-option">
No results found for <i>{{ search }}</i
>.
</div>
</slot>
</template>
<template #selected-option="option">
<slot name="selected-option" :option="option">
{{ option.label }}
</slot>
</template>
</v-select>
</div>
</template>
<script lang="ts" setup>
import { computed, ref } from 'vue';
import 'vue-select/dist/vue-select.css';
export interface IOption {
value: string | number;
label: string;
}
const props = withDefaults(
defineProps<{
modelValue: string | number | string[] | number[];
options: (string | number | IOption)[];
name: string;
placeholder?: string;
taggable?: boolean;
disabled?: boolean;
multiple?: boolean;
backgroundColor?: string;
}>(),
{
taggable: false,
disabled: false,
multiple: false,
placeholder: 'Select a specific career',
backgroundColor: '#526071',
}
);
type TMultiple = string[] | number[] | IOption[];
type TSingle = string | number | IOption;
const selected = ref<TSingle | TMultiple | null>(null);
const selectFieldClass = computed(() => {
return props.multiple ? 'vue-select--multiple' : 'vue-select--single';
});
const emit = defineEmits(['update:modelValue']);
const handleSelect = () => {
if (props.multiple) {
const arrayTyped = selected.value as TMultiple;
const valuesToEmit =
arrayTyped[0] &&
(typeof arrayTyped[0] === 'string' || typeof arrayTyped[0] === 'number')
? arrayTyped
: arrayTyped.map((option) => (option as IOption).value);
emit('update:modelValue', valuesToEmit);
} else {
const singleTyped = selected.value as TSingle;
const valueToEmit =
typeof singleTyped === 'string' || typeof singleTyped === 'number'
? singleTyped
: singleTyped?.value;
emit('update:modelValue', valueToEmit);
}
};
onBeforeMount(() => {
selected.value =
props.options.find((option) => {
if (typeof option === 'string' || typeof option === 'number') {
return option === props.modelValue;
}
return option.value === props.modelValue;
}) || null;
});
</script>
I have the exact same issue of @GoudekettingRM: "vue-select": "^4.0.0-beta.6"
with a wrapper to ensure styling and default behaviours, dropdown scrolls to top every time an option is selected (model value updated).
Here is a snippet (my modelValue
needs to be a string/array of string containing the value
of the selected option/options)
<template>
<div :class="wrapperClasses">
<vue-select ref="vueSelect"
:model-value="vueSelectValue"
:options="convertedValidOptions"
:disabled="disabled"
:multiple="multiple"
:clearable="clearable"
:placeholder="placeholder"
:append-to-body="appendToBody"
:selectable="isOptionSelectable"
:get-option-key="opt => opt.value || opt.code || opt.label || JSON.stringify(opt)"
@update:modelValue="onVueSelectInput"
@search="onSearch"
>
<template #no-options>
<slot name="no-options">{{ 'No options found' }}</slot>
</template>
<template #option="option">
<slot name="option" v-bind="option">
{{ option.label }}
</slot>
</template>
<template #selected-option="option">
<slot name="selected-option" v-bind="option">
{{ option.label }}
</slot>
</template>
</vue-select>
</div>
</template>
<script>
export default {
name: 'custom-vue-select',
props: {
modelValue: {
type: [String, Array],
},
options: {
type: Array,
},
codeAccessor: {
type: [String, Function],
default: 'code',
},
descAccessor: {
type: [String, Function],
default: 'description',
},
showCodeInOptions: {
type: Boolean,
default: true,
},
showDescInOptions: {
type: Boolean,
default: true,
},
disabled: {
type: Boolean,
default: false,
},
multiple: {
type: Boolean,
},
clearable: {
type: Boolean,
default: true,
},
placeholder: {
type: String,
default: '',
},
appendToBody: {
type: Boolean,
default: false,
},
isOptionSelectable: {
type: Function,
default: option => true,
},
},
data() {
return {
};
},
computed: {
wrapperClasses() {
return {
'pn--select': true,
'select-single': !this.multiple,
'select-multiple': this.multiple,
'append-to-body': this.appendToBody,
'valorized': this.modelValue?.length,
};
},
convertedValidOptions(){
return (this.options || [])
.map(x => {
if (!x) {
return null;
}
let code = typeof this.codeAccessor == 'function' ? this.codeAccessor(x) : x[this.codeAccessor];
let description = typeof this.descAccessor == 'function' ? this.descAccessor(x) : x[this.descAccessor];
let label = [
`${this.showCodeInOptions ? code || ' ' : ''}`,
`${this.showDescInOptions ? description || ' ' : ''}`,
].filter(x => x).join(' - ').trim()
return {
data: x,
code,
description,
value: code,
label,
};
})
.filter(x => x && x.value)
;
},
convertedValidOptionsMap(){
return this.convertedValidOptions
.reduce((a, x) => {
a[x.value] = x;
return a;
}, {})
;
},
vueSelectValue(){
if (this.multiple) {
return (this.modelValue || [])
.map(x => this.convertedValidOptionsMap[x])
.filter(x => x)
;
}
return this.convertedValidOptionsMap[this.modelValue] || null;
},
},
methods: {
onSearch(filterText, setLoading){
// Debounce
this._onSearchTimeout && clearTimeout(this._onSearchTimeout);
this._onSearchTimeout = setTimeout(() => {
this.$emit('search', filterText, setLoading);
}, 250);
},
onVueSelectInput(vueSelectValue){
var value = '';
if (this.multiple){
value = (vueSelectValue || []).map(x => x.value || x.label); // x.label is for "taggable" behavior
} else {
value = vueSelectValue?.value || vueSelectValue?.label || ''; // x.label is for "taggable" behavior
}
this.$emit('update:modelValue', value);
},
},
components: {
VueSelect,
},
};
</script>
<style lang="scss">
/* My custom style */
</style>
Any help will be very appreciated (and sorry for the english)
@GoudekettingRM
I figured out what triggers it, but I'm not sure how to fix it.
Is cause we "manually update" the :model-value
?
Have you found a solution?
@sagalbot / @Everybody reading Is this component/version still mantained? I have seen few commits on version 4.x in 2024 and wondered about the roadmap
Edit: replaced tabs identation with spaces
@triosw I did a pretty hacky thing, but it seems to do the trick for me. Basically I store the scroll position when then click, and then on the next tick, restore it.
This is my handleSelect
method (i.e. that what gets triggered once you click something in the list):
const handleSelect = () => {
const scrollPosition = captureScrollPosition();
const value = props.multiple ? getMultipleValues() : getSingleValue();
emit('update:modelValue', value);
restoreScrollPosition(scrollPosition);
};
The capture and restore functions are pretty straightforward:
const vSelectRef = ref<Ref | null>(null);
const captureScrollPosition = () => {
if (vSelectRef.value) {
const dropdown = vSelectRef.value.$el.querySelector('.vs__dropdown-menu');
return dropdown.scrollTop;
}
return 0;
};
const restoreScrollPosition = (scrollPosition: number) => {
nextTick(() => {
if (vSelectRef.value) {
const dropdown = vSelectRef.value.$el.querySelector('.vs__dropdown-menu');
dropdown.scrollTop = scrollPosition;
}
});
};
the vSelectRef
is just a normal ref on the vueselect tag:
<v-select
ref="vSelectRef"
...
>
Hope that helps.
Thank you very muck @GoudekettingRM, that helped a lot (and worked for me too)!
I also added a "reset scroll position" (to be called at @open
) to force dropdown.scrollTop = 0
(same behaviour i had with vue-select 2.x)
_resetDropdownScrollPosition(){
this.$refs.vueSelect && this.$nextTick()
.then(() => {
let dropdown = this.$refs.vueSelect.$el.querySelector('.vs__dropdown-menu');
dropdown.scrollTop = 0;
})
;
},
A question still remains:
@sagalbot / @everybody reading Is this component/version still mantained? I have seen few commits on version 4.x in 2024 and wondered about the roadmap
Glad I could be of help @triosw.
Is this component/version still mantained?
There's very little activity here, so I'm skeptical that it is. We started switching to NextJS because the support and the community for that is just bigger and further ahead in development.
+1. It doesn't seem like the library is maintained anymore, but I haven't personally found a better alternative just yet. I am looking at switching to this - https://www.shadcn-vue.com/docs/components/combobox.html - albeit it's not as comprehensive
This library looks good: https://github.com/vueform/multiselect?tab=readme-ov-file and also looks quite actively maintained. This library is still working for me but I will likely change if I find any issues.
For anyone struggling to find an up-to-date Vue 3 select component, I've open-sourced & published mine as vue3-select-component
.
npm i vue3-select-component
# https://vue3-select-component.vercel.app/getting-started.html
Built specifically for Vue 3, it offers:
v-model
v-model
It's already used in production by multiple websites and I can't wait to see more feedback!
For anyone struggling to find an up-to-date Vue 3 select component, I've open-sourced & published mine as
vue3-select-component
.npm i vue3-select-component # https://vue3-select-component.vercel.app/getting-started.html
Built specifically for Vue 3, it offers:
- Easy data manipulation with
v-model
- Many props to ensure you'll get the flexibility you need
Best-in-class DX & TypeScript support with typesafe relationship between options and
v-model
- There's a dedicated documentation page to usage with TypeScript.
- Single & multi-select support
- Multiple demos with minimal source-code to get the component working on a few seconds on your project
- Easy styling with CSS variables and infinite customisation with slots
- Light, 0 dependency (4.4kb gzip)
- Entirely tested with a 90%+ code coverage
It's already used in production by multiple websites and I can't wait to see more feedback!
Hi @TotomInc that looks very promising and thank you for your work. I gave it a try and it did seem to work correctly, albeit with a number of styling issues (my setup is quite complex). The main issue I have at the moment is that there doesn't seem to be way of doing custom tags...
@matthewknill thanks for the feedback. I believe you are talking about taggable/creatable options? Indeed this is the latest major missing feature from the component.
I am also very interested about the styling issues you encountered due to your complex setup. That would probably help a lot more people that can encounter the same issues.
In order to keep this issue clean, would you like to create 2 issues (about the taggable/creatable and another one about the styling issue)?
Thanks!
Vue 3 support is currently on the
beta
release channel. This issue will track the state of progress to thev4
release of the component with support for Vue 3. This issue will be updated when progress has been made or new tasks are discovered.To install the v4
beta
with Vue 3 support:This release has been out in the wild for some time now. At this point, things are pretty stable, but I can't guarantee there won't be more breaking changes. More on that at the very bottom.
Breaking Changes in v4
beta
branchvalue
renamed tomodelValue
to match the Vue 3v-model
syntax@input
event renamed toupdate:modelValue
Remaining Tasks
Now that Vue 3 is the default install, the pressure is on to get support moved off the
beta
channel and intomaster
for av4.0
release!Todo
These items must be completed in order to merge
beta
intomaster
.Build / Ecosystem
pickvitepress
orvuepress-next
or something else entirely? nuxt? separate repo?@nuxt/content
v4
landsVue 3 Updates
emits
propertythis.$on
v-for
Public API Breaking Changes
v-model
syntaxvalue
prop ->modelValue
input
event ->SASS
toCSS
with custom properties3.x
How You Can Help
The current
beta
distribution has primarily been a community effort driven by contributors. A huge thanks to the folks that pushed up the new initial PRs, triaged bugs and helped with issues to get to this point. I appreciate it!There's quite a bit to do here, and I'm excited to get moving. If you want to see this stuff move faster, the number one thing you can do is sponsor me through GitHub. I freelance full time, so the opportunity costs for me to work on vue-select instead of work for my clients is pretty high. Sponsorship contributions really help!
Outside of sponsoring, please get in touch before working on anything big so we can coordinate efforts - either through discussions or twitter. As always, I'm thrilled to welcome contributors to work on the component, and very grateful for those that do!
Wishlist
There are a few areas that the component really needs to improve on separate from Vue 3 support that may require breaking changes:
focus management The open/closed state is currently tied to whether the input has focus. This is bad for accessibility and general UX of forms. This needs to be fixed.
state management Having to manage selected values internally brings with it lots of code, and lots of room for bugs. A much simpler and easier to maintain approach would be to only emit events, don't manage state internally. This would really shrink the codebase, but in order for the component to be able to select values, the consumer needs to provide a
v-model
/:modelValue
binding, otherwise the component won't know what's selected.prop creep The number of props available continues to grow, which creates challenges for maintenance and edge cases. Many of these props have been added to alter visual opinions, as well as modify default behaviour. With a more robust slot implementation (and probably provide/inject wrapper components like Headless UI) many of the style related props can be removed. Behaviour modification is more challenging.
I'd like to compress the breaking changes for those areas into the
v4
release so that the component API is good to go for the next few years, and is in line with the way Vue is evolving. Converting the build to Vite/Vitest is part of that path. I'm going to focus on the critical path items, and if there's time, I'll assess the viability whether breaking changes are required in those areas for this release, or if it's better to address them in a future release. If you've got opinions about this, I'd love to hear them.