Vue 3 / Component Roadmap #1597
Comments
|
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 |
|
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 Hope It helpful for someone too. |
|
@Ima-Acikima, the |
|
@sagalbot just like @Ima-Acikima value change events are not triggering on my end either using This is a tough one because I do see the event triggered in Vue Devtools. Interesting enough, I am actually able to hook to I'm using I'll debug it further and if I find a fix I'll PR it. EDIT: Found the issue and created a PR here #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? |
|
I made it work with Vue 3 Composition API. Firstly you need to install it: Now you can use it like this: |
This comment was marked as resolved.
This comment was marked as resolved.
|
What is the vue-select-3 package? It seems to link to the same documentation as vue-select ... |
|
@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? |
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. |
|
@mattl1598 That actually looks fantastic, I haven't heard of it either! Thanks a bunch |
|
Hi @sagalbot , Thanks by the way for this great tool ! |
|
I'm not sure if this is a vue3 issue, but I'm using 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: <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)
Is cause we "manually update" the @sagalbot / @everybody reading 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 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 Hope that helps. |
|
Thank you very muck @GoudekettingRM, that helped a lot (and worked for me too)! A question still remains:
|
|
Glad I could be of help @triosw.
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. |
Vue 3 support is currently on the
betarelease channel. This issue will track the state of progress to thev4release 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
betawith Vue 3 support:yarn add vue-select@beta # or npm npm install vue-select@betaThis 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
betabranchvaluerenamed tomodelValueto match the Vue 3v-modelsyntax@inputevent renamed toupdate:modelValueRemaining Tasks
Now that Vue 3 is the default install, the pressure is on to get support moved off the
betachannel and intomasterfor av4.0release!Todo
These items must be completed in order to merge
betaintomaster.Build / Ecosystem
pickvitepressorvuepress-nextor something else entirely? nuxt? separate repo?@nuxt/contentv4landsVue 3 Updates
emitspropertythis.$onv-forPublic API Breaking Changes
v-modelsyntaxvalueprop ->modelValueinputevent ->SASStoCSSwith custom properties3.xHow You Can Help
The current
betadistribution 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/:modelValuebinding, 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
v4release 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.The text was updated successfully, but these errors were encountered: