Niestandardowy komponent Vuetify frontend vue ui/ux szablon nodejs

Potrzebne jest stworzenie niestandardowego komponentu Vuetify (kombinacja v-combobox + v-chips)

Ma działać jak v-combobox, ale jednocześnie wspierać niestandardowe chipsy, 

które będzie można:

- przeciągać

- zaznaczać (selected true/false)

- wybierać z listy (po tagach)

Załączam wideo wyjaśniające do TŻ.

Można proponować dowolną realizację na podstawie v-combobox lub v-text-field lub v-input (wybieracie według własnego uznania).

Biblioteka do przeciągania:

vue-draggable-plus (komponenty drag and drop)

https://vue-draggable-plus.pages.dev/en/

https://github.com/Alfred-Skyblue/vue-draggable-plus

Przybliżona struktura (ale można dodawać lub zmieniać według własnego uznania):

items: [

        { itemText: 'Marchew', tags: ['warzywa', 'pomarańczowy'], selected: false, id: 1 },

        { itemText: 'Ziemniak', tags: ['warzywa', 'brązowy'], selected: true, id: 2 },

        { itemText: 'Ogórek', tags: ['warzywa', 'zielony'], selected: false, id: 4 },

        { itemText: 'Pomidor', tags: ['warzywa', 'czerwony'], selected: false, id: 5 },

        { itemText: 'Cukinia', tags: ['warzywa', 'zielony'], selected: false, id: 6 },

        { itemText: 'Cebula', tags: ['warzywa', 'biały'], selected: false, id: 7 },

        { itemText: 'Papryka', tags: ['warzywa', 'czerwony'], selected: false, id: 8 },

        { itemText: 'Bakłażan', tags: ['warzywa', 'fioletowy'], selected: false, id: 9 },

        { itemText: 'Burak', tags: ['warzywa', 'czerwony'], selected: false, id: 10 },

        { itemText: 'Kapusta', tags: ['warzywa', 'zielony'], selected: false, id: 11 },

        { itemText: 'Jabłko', tags: ['owoce', 'czerwony'], selected: false, id: 12 },

        { itemText: 'Banan', tags: ['owoce', 'żółty'], selected: false, id: 13 },

        { itemText: 'Pomarańcza', tags: ['owoce', 'pomarańczowy'], selected: false, id: 14 },

        { itemText: 'Gruszka', tags: ['owoce', 'zielony'], selected: false, id: 15 },

        { itemText: 'Winogrono', tags: ['owoce', 'fioletowy'], selected: false, id: 16 },

        { itemText: 'Cytryna', tags: ['owoce', 'żółty'], selected: true, id: 17 },

        { itemText: 'Kiwi', tags: ['owoce', 'brązowy'], selected: false, id: 18 },

        { itemText: 'Ananas', tags: ['owoce', 'żółty'], selected: false, id: 19 },

        { itemText: 'Truskawka', tags: ['owoce', 'czerwony'], selected: false, id: 20 },

        { itemText: 'Mango', tags: ['owoce', 'zielony'], selected: false, id: 21 },

        { itemText: 'Czekolada', tags: ['słodycze', 'brązowy'], selected: false, id: 22 },

        { itemText: 'Pianka', tags: ['słodycze', 'biały'], selected: false, id: 23 },

        { itemText: 'Tort', tags: ['słodycze', 'biały'], selected: true, id: 24 },

        { itemText: 'Lizak', tags: ['słodycze', 'czerwony'], selected: false, id: 25 },

        { itemText: 'Ciastko', tags: ['słodycze', 'złoty'], selected: false, id: 26 },

        { itemText: 'Marshmallow', tags: ['słodycze', 'różowy'], selected: true, id: 27 },

        { itemText: 'Wafle', tags: ['słodycze', 'beżowy'], selected: false, id: 28 },

        { itemText: 'Karmel', tags: ['słodycze', 'bursztynowy'], selected: false, id: 29 },

        { itemText: 'Pastylka', tags: ['słodycze', 'biały'], selected: false, id: 30 },

        { itemText: 'Piernik', tags: ['słodycze', 'brązowy'], selected: false, id: 31 }

      ]

STYLISTYCZNE PROPSY V-CHIP:

label (forma chipsa)

close-icon="mdi-close" (ikona zamknięcia)

filter-icon="mdi-alert-outline" (ikona zaznaczenia)

selected-class="text-warning" (styl zaznaczenia)

closable

filter (aby można było robić zaznaczenie)

draggable (aby przeciągać)

Dokumentacja komponentów:

https://vuetifyjs.com/en/components/combobox/

https://vuetifyjs.com/en/api/v-combobox/

https://vuetifyjs.com/en/components/text-fields/

https://vuetifyjs.com/en/api/v-text-field/

https://vuetifyjs.com/en/components/inputs/

https://vuetifyjs.com/en/api/v-input/

https://vuetifyjs.com/en/components/chips/

https://vuetifyjs.com/en/api/v-chip/

https://vuetifyjs.com/en/components/chip-groups/

https://vuetifyjs.com/en/api/v-chip-group/