Кастомний компонент 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
Оптимізація швидкості сайту WordPress
5088 UAH
повні деталі надішлемо в особисті повідомлення Мета Максимально прискорити завантаження сайту, особливо на мобільних пристроях. KPI (обов'язково) Після завершення робіт необхідно досягти наступних показників. Mobile Performance 90+ LCP менше 2.2 сек INP менше 200 мс CLS менше… HTML та CSS верстання, Javascript та Typescript ∙ 11 годин 21 хвилина тому ∙ 42 ставки |
Інтеграція калькулятора вартості послуг на сайт Webflow
14 807 UAH
Шукаємо розробника для інтеграції готового калькулятора вартості послуг на наш сайт, створений на Webflow. Про компанію Ми займаємося: збіркою меблів; монтажем телевізорів; монтажем полиць, картин, дзеркал та інших предметів; moving help; heavy lifting; handyman послугами;… Javascript та Typescript, Веб-програмування ∙ 12 годин 21 хвилина тому ∙ 43 ставки |
Шукаю досвідченого Full Stack розробника для створення SaaS-сервісу для інтернет-магазинів.Ідея сервісу: Клієнт завантажує посилання на свій товарний фід (XML або CSV). Сервіс автоматично отримує товари, бере їхні фотографії та створює нові рекламні зображення за готовими шаблонами: ціна, знижка, логотип, акційні плашки тощо. Також у сервісі має бути простий редактор… Javascript та Typescript, Веб-програмування ∙ 3 дні 18 годин тому ∙ 86 ставок |
Розробка WebGL/Three.js сцени з генерацією та експортом 3D (снапшот) з анімованого шейдераОпис об'єкта:Проект являє собою дизайнерський стіл, виконаний у формі реалістичного, глибокого водовороту (центральна воронка, яка плавно переходить з широкої горизонтальної стільниці в тонку витончену ніжку). Суть задачі:Потрібен WebGL / Creative Coding розробник для створення… Javascript та Typescript, Веб-програмування ∙ 4 дні 15 годин тому ∙ 30 ставок |
Підтримка та розвиток сайту клінінгової компанії
890 UAH
Шукаю веб-розробника / вебмайстра для довгострокової підтримки та розвитку сайту клінінгової компанії. Сайт: https://donely.ca Про проєкт DoneLy Home Services — компанія з надання послуг прибирання в Канаді, яка активно розвивається та розширює географію роботи. Шукаю… Javascript та Typescript, Веб-програмування ∙ 6 днів 17 годин тому ∙ 64 ставки |