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/