Кастомний компонент 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
Оптимізація Core Web Vitals (OpenCart) під Google PageSpeed — Мобільна та ПК версіїОпис замовлення: Шукаємо досвідченого frontend-розробника/фахівця з OpenCart для оптимізації швидкості завантаження сайту (категорії та картки товарів) під вимоги Google Core Web Vitals. Про проект: * CMS: OpenCart. * Специфіка: Сайт працює в режимі каталогу (кошика та… CMS, Javascript та Typescript ∙ 9 хвилин тому ∙ 4 ставки |
Оптимізація швидкості сайту WordPress
5088 UAH
повні деталі надішлемо в особисті повідомлення Мета Максимально прискорити завантаження сайту, особливо на мобільних пристроях. KPI (обов'язково) Після завершення робіт необхідно досягти наступних показників. Mobile Performance 90+ LCP менше 2.2 сек INP менше 200 мс CLS менше… HTML та CSS верстання, Javascript та Typescript ∙ 19 годин 34 хвилини тому ∙ 54 ставки |
Інтеграція калькулятора вартості послуг на сайт Webflow
14 807 UAH
Шукаємо розробника для інтеграції готового калькулятора вартості послуг на наш сайт, створений на Webflow. Про компанію Ми займаємося: збіркою меблів; монтажем телевізорів; монтажем полиць, картин, дзеркал та інших предметів; moving help; heavy lifting; handyman послугами;… Javascript та Typescript, Веб-програмування ∙ 20 годин 34 хвилини тому ∙ 55 ставок |
Шукаємо Odoo Developer — соло-розробника з досвідом розробки на Odoo 19 Community EditionЄ робочий, чисто спроектований проєкт на Odoo 19 Community — CRM для українського готелю, уже в production-grade інфраструктурі. Переписувати з нуля не плануємо. Шукаємо одну людину, яка підхопить проєкт, збереже працююче і поведе його далі: спершу CRM → потім HMS → бухгалтерія.… Javascript та Typescript, Веб-програмування ∙ 2 дні 21 година тому ∙ 2 ставки |
Шукаю досвідченого Full Stack розробника для створення SaaS-сервісу для інтернет-магазинів.Ідея сервісу: Клієнт завантажує посилання на свій товарний фід (XML або CSV). Сервіс автоматично отримує товари, бере їхні фотографії та створює нові рекламні зображення за готовими шаблонами: ціна, знижка, логотип, акційні плашки тощо. Також у сервісі має бути простий редактор… Javascript та Typescript, Веб-програмування ∙ 4 дні 2 години тому ∙ 87 ставок |