Vue 3 / Component Roadmap

Question

Vue 3 / Component Roadmap

sagalbot opened this issue 3 years ago · 35 comments

Answer 1 · 2022-03-14T06:19:05.000Z

Hey really like this package! Just wondering if there's been any progress on supporting Vue 3?

Answer 2 · 2022-03-22T01:22:21.000Z

@matthewknill the above is up to date at the moment. The vue-select@beta channel currently works with Vue 3.

Answer 3 · 2022-04-18T16:00:47.000Z

it still not working as CDN global. please, can you give me an example?

thank you

Answer 4 · 2022-04-18T19:08:18.000Z

also having issues with the cdn version

Answer 5 · 2022-04-20T15:00:57.000Z

Issues with CDN...

Answer 6 · 2022-05-16T08:53:37.000Z

Anyone managed to make it work with cdn?

Answer 7 · 2022-05-27T13:59:44.000Z

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.

Answer 8 · 2022-07-27T09:04:24.000Z

Hi, currently event @input / @change doesnt triggered

Answer 9 · 2022-07-27T19:25:19.000Z

@Ima-Acikima, the input/change events have been removed in favour of update:modelValue inline with the v-model changes for vue 3.

Answer 10 · 2022-08-03T15:09:23.000Z

@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 #1668

Answer 11 · 2022-08-12T16:38:28.000Z

@walmon thanks for the diagnosis and PR! Just on vacation today and will review in the next few days.

Answer 12 · 2022-09-06T11:32:53.000Z

Is there a documentation showing how I can use this?

Answer 13 · 2022-09-17T12:34:28.000Z

@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"
/>

Answer 14 · 2022-10-23T12:25:04.000Z

is library dead for Vue 3?

Answer 15 · 2022-11-03T08:57:45.000Z

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

Answer 16 · 2022-11-04T18:22:45.000Z

@amchconsult define dead for me

Answer 17 · 2022-11-07T22:19:43.000Z

@karladler that package is not associated with this one. Just a fork that someone published to NPM.

Answer 18 · 2023-01-10T14:38:33.000Z

@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!

Answer 19 · 2023-01-20T22:11:03.000Z

Has anyone successfully migrated vue 2 version of this to vue 3?

Answer 20 · 2023-02-13T16:08:36.000Z

Has anyone successfully migrated vue 2 version of this to vue 3?

yes, works fine for me.

Answer 21 · 2023-04-25T13:38:09.000Z

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

Answer 22 · 2023-05-29T06:43:37.000Z

Looks like this library is not maintained anymore after all - anybody has recommendations for alternatives?

Answer 23 · 2023-06-03T14:27:33.000Z

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.

Answer 24 · 2023-06-03T14:29:05.000Z

@mattl1598 That actually looks fantastic, I haven't heard of it either! Thanks a bunch

Answer 25 · 2023-08-23T19:06:25.000Z

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 !

Answer 26 · 2024-01-26T09:59:13.000Z

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>

Answer 27 · 2024-04-16T16:13:47.000Z

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

Answer 28 · 2024-04-17T09:21:31.000Z

@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.

Answer 29 · 2024-04-17T11:03:57.000Z

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

Answer 30 · 2024-04-18T08:00:34.000Z

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.

Answer 31 · 2024-04-18T09:16:34.000Z

+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

Answer 32 · 2024-04-18T22:32:41.000Z

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.

Answer 33 · 2024-07-06T17:22:06.000Z

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!

Answer 34 · 2024-07-07T23:53:40.000Z

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...

Answer 35 · 2024-07-08T10:28:56.000Z

@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 / Component Roadmap

Remaining Tasks

Todo

Build / Ecosystem

Vue 3 Updates

Public API Breaking Changes

How You Can Help

Wishlist