Необходимо создать кастомный компонент Vuetify (комбинация v-combobox + v-chips)
Он должен работать, как v-combobox, но при этом поддерживать кастомизированные chips,
которые можно будет:
- перетаскивать
- выделять (selected true/false)
- выбирать из списка (по тегам)
Прикрепляю видео объяснение к ТЗ.
Можно предлагать любое решение на основе v-combobox или v-text-field или v-input (выбираете на собственное усмотрение).
Библиотека для перетаскивания:
vue-draggable-plus (drag and drop components)
https://vue-draggable-plus.pages.dev/en/
https://github.com/Alfred-Skyblue/vue-draggable-plus
Приблизительная структура (но можно добавлять или изменять на свое):
items: [
{ itemText: 'Морковь', tags: ['овощи', 'оранжевый'], selected: false, id: 1 },
{ itemText: 'Картофель', tags: ['овощи', 'коричневый'], selected: true, id: 2 },
{ itemText: 'Огурец', tags: ['овощи', 'зеленый'], selected: false, id: 4 },
{ itemText: 'Помидор', tags: ['овощи', 'красный'], selected: false, id: 5 },
{ itemText: 'Кабачок', tags: ['овощи', 'зеленый'], selected: false, id: 6 },
{ itemText: 'Лук', tags: ['овощи', 'белый'], selected: false, id: 7 },
{ itemText: 'Перец', tags: ['овощи', 'красный'], selected: false, id: 8 },
{ itemText: 'Баклажан', tags: ['овощи', 'фиолетовый'], selected: false, id: 9 },
{ itemText: 'Свекла', tags: ['овощи', 'красный'], selected: false, id: 10 },
{ itemText: 'Капуста', tags: ['овощи', 'зеленый'], selected: false, id: 11 },
{ itemText: 'Яблоко', tags: ['фрукты', 'красный'], selected: false, id: 12 },
{ itemText: 'Банан', tags: ['фрукты', 'желтый'], selected: false, id: 13 },
{ itemText: 'Апельсин', tags: ['фрукты', 'оранжевый'], selected: false, id: 14 },
{ itemText: 'Груша', tags: ['фрукты', 'зеленый'], selected: false, id: 15 },
{ itemText: 'Виноград', tags: ['фрукты', 'фиолетовый'], selected: false, id: 16 },
{ itemText: 'Лимон', tags: ['фрукты', 'желтый'], selected: true, id: 17 },
{ itemText: 'Киви', tags: ['фрукты', 'коричневый'], selected: false, id: 18 },
{ itemText: 'Ананас', tags: ['фрукты', 'желтый'], selected: false, id: 19 },
{ itemText: 'Клубника', tags: ['фрукты', 'красный'], selected: false, id: 20 },
{ itemText: 'Манго', tags: ['фрукты', 'зеленый'], selected: false, id: 21 },
{ itemText: 'Шоколад', tags: ['сладости', 'коричневый'], selected: false, id: 22 },
{ itemText: 'Зефир', tags: ['сладости', 'белый'], selected: false, id: 23 },
{ itemText: 'Торт', tags: ['сладости', 'белый'], selected: true, id: 24 },
{ itemText: 'Леденец', tags: ['сладости', 'красный'], selected: false, id: 25 },
{ itemText: 'Печенье', tags: ['сладости', 'золотистый'], selected: false, id: 26 },
{ itemText: 'Маршмеллоу', tags: ['сладости', 'розовый'], selected: true, id: 27 },
{ itemText: 'Вафли', tags: ['сладости', 'бежевый'], selected: false, id: 28 },
{ itemText: 'Карамель', tags: ['сладости', 'янтарный'], selected: false, id: 29 },
{ itemText: 'Пастила', tags: ['сладости', 'белый'], selected: false, id: 30 },
{ itemText: 'Пряник', tags: ['сладости', 'коричневый'], selected: false, id: 31 }
]
СТИЛИСТИЧЕСКИЕ ПРОПСЫ V-CHIP:
label (форма чипа)
close-icon="mdi-close" (иконка закрытия)
filter-icon="mdi-alert-outline" (иконка селектед)
selected-class="text-warning" (стиль селектед)
closable
filter (чтобы можно было делать селектед)
draggable (чтобы перетаскивать)
Документация компонентов:
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/