Кастомный компонент Vuetify frontend vue ui/ux верстка nodejs
Необходимо создать кастомный компонент 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/
Приложения 1
Актуальные фриланс-проекты в категории Javascript и Typescript
Поддержка и развитие сайта клининговой компании
919 UAH
Ищу веб-разработчика / веб-мастера для долгосрочной поддержки и развития сайта клининговой компании. Сайт: https://donely.ca О проекте DoneLy Home Services — компания по предоставлению услуг уборки в Канаде, которая активно развивается и расширяет географию работы. Ищу… Javascript и Typescript, Веб-программирование ∙ 1 день 20 часов назад ∙ 59 ставок |
Разработка сайта по ТЗ на FramerНеобходимо сделать сайт по этим параметрам, что в ТЗ https://docs.google.com/document/d/1ODO2C9Krb4AaMiJz9wfbNzWlAyA2FwCCHL8r0biajUY/edit?usp=sharing Назовите реальный рейд на основе этого дизайна HTML и CSS верстка, Javascript и Typescript ∙ 2 дня 22 часа назад ∙ 27 ставок |
Разработка интерактивной карты Palworld для сайтаНеобходимо разработать интерактивную карту Palworld по примеру: https://palworld.gg/map Нам нужна не просто статическая картинка, а полноценная интерактивная карта, где пользователь может смотреть локации, включать / выключать категории объектов, искать нужные точки и… HTML и CSS верстка, Javascript и Typescript ∙ 4 дня 12 часов назад ∙ 32 ставки |
Разработка платформы AM Mobility (автосервис, парковка, страхование, аренда автомобилей)
259 653 UAH
Ищем команду или опытного Full Stack разработчика для создания MVP платформы AM Mobility. AM Mobility — это единая цифровая экосистема для автомобилистов, объединяющая в одном приложении и веб-платформе: парковку; автосервис; шиномонтаж; автомойку; аренду автомобилей;… Javascript и Typescript, Веб-программирование ∙ 9 дней 19 часов назад ∙ 119 ставок |
Gsap анимации
1000 UAH
Добрый день. Нужно внести правки в текущем проекте. Нужен специалист, который хорошо работает на gsap/lenis Нужно сделать анимацию карточек. Подробное ТЗ здесь: https://www.figma.com/design/5bLEJudN5LPpB9ZSoJa2Eb/Untitled?m=auto&t=qwyluUctL1lrMNvh-6 Нужно… Javascript и Typescript, Веб-программирование ∙ 10 дней 1 час назад ∙ 21 ставка |