Przykład komponentu Combobox Vuetify 3 frontend vue 3 ui/ux szata graficzna nodejs

Zrealizować funkcjonalność za pomocą standardowych możliwości v-combobox.

Jest taka struktura danych obiektów:

const items = ref([

  { title: 'Marchew', text: 'Słodka marchew', tags: ['warzywa', 'pomarańczowy'], id: 1 },

  { title: 'Ziemniak', text: 'Delikatny ziemniak', tags: ['warzywa', 'brązowy'], id: 2 },

  { title: 'Ogórek', text: 'Świeży ogórek', tags: ['warzywa', 'zielony'], id: 4 },

  { title: 'Pomidor', text: 'Soczysty pomidor', tags: ['warzywa', 'czerwony'], id: 5 },

  { title: 'Cukinia', text: 'Delikatna cukinia', tags: ['warzywa', 'zielony'], id: 6 },

  { title: 'Cebula', text: 'Pikantna cebula', tags: ['warzywa', 'biały'], id: 7 },

  { title: 'Papryka', text: 'Słodka papryka', tags: ['warzywa', 'czerwony'], id: 8 },

  { title: 'Bakłażan', text: 'Delikatny bakłażan', tags: ['warzywa', 'fioletowy'], id: 9 },

  { title: 'Burak', text: 'Słodki burak', tags: ['warzywa', 'czerwony'], id: 10 },

  { title: 'Kapusta', text: 'Świeża kapusta', tags: ['warzywa', 'zielony'], id: 11 },

  { title: 'Jabłko', text: 'Soczyste jabłko', tags: ['owoce', 'czerwony'], id: 12 },

  { title: 'Banan', text: 'Słodki banan', tags: ['owoce', 'żółty'], id: 13 },

  { title: 'Pomarańcza', text: 'Soczysta pomarańcza', tags: ['owoce', 'pomarańczowy'], id: 14 },

  { title: 'Gruszka', text: 'Słodka gruszka', tags: ['owoce', 'zielony'], id: 15 },

  { title: 'Winogrono', text: 'Słodkie winogrono', tags: ['owoce', 'fioletowy'], id: 16 },

  { title: 'Cytryna', text: 'Kwaśna cytryna', tags: ['owoce', 'żółty'], id: 17 },

  { title: 'Kiwi', text: 'Delikatne kiwi', tags: ['owoce', 'brązowy'], id: 18 },

  { title: 'Ananas', text: 'Słodki ananas', tags: ['owoce', 'żółty'], id: 19 },

  { title: 'Truskawka', text: 'Aromatyczna truskawka', tags: ['owoce', 'czerwony'], id: 20 },

  { title: 'Mango', text: 'Egzotyczne mango', tags: ['owoce', 'zielony'], id: 21 },

  { title: 'Czekolada', text: 'Słodka czekolada', tags: ['słodycze', 'brązowy'], id: 22 },

  { title: 'Pianka', text: 'Powietrzna pianka', tags: ['słodycze', 'biały'], id: 23 },

  { title: 'Tort', text: 'Słodki tort', tags: ['słodycze', 'biały'], id: 24 },

  { title: 'Lizak', text: 'Słodki lizak', tags: ['słodycze', 'czerwony'], id: 25 },

  { title: 'Ciastko', text: 'Chrupiące ciastko', tags: ['słodycze', 'złoty'], id: 26 },

  { title: 'Marshmallow', text: 'Delikatne marshmallow', tags: ['słodycze', 'różowy'], id: 27 },

  { title: 'Wafle', text: 'Chrupiące wafle', tags: ['słodycze', 'beżowy'], id: 28 },

  { title: 'Karmel', text: 'Słodki karmel', tags: ['słodycze', 'bursztynowy'], id: 29 },

  { title: 'Pastylka', text: 'Słodka pastylka', tags: ['słodycze', 'biały'], id: 30 },

  { title: 'Piernik', text: 'Aromatyczny piernik', tags: ['słodycze', 'brązowy'], id: 31 },

  { title: 'Krewetki', text: 'Soczyste krewetki', tags: ['owoce morza', 'różowy'], id: 32 },

  { title: 'Małże', text: 'Soczyste małże', tags: ['owoce morza', 'czarny'], id: 33 },

  { title: 'Kałamarnice', text: 'Soczyste kałamarnice', tags: ['owoce morza', 'biały'], id: 34 },

  { title: 'Homar', text: 'Soczysty homar', tags: ['owoce morza', 'czerwony'], id: 35 },

  { title: 'Przegrzebki', text: 'Soczyste przegrzebki', tags: ['owoce morza', 'biały'], id: 36 },

  { title: 'Krab', text: 'Soczysty krab', tags: ['owoce morza', 'czerwony'], id: 37 },

  { title: 'Łosoś', text: 'Delikatny łosoś', tags: ['owoce morza', 'pomarańczowy'], id: 38 },

  { title: 'Tuńczyk', text: 'Delikatny tuńczyk', tags: ['owoce morza', 'różowy'], id: 39 },

  { title: 'Makrela', text: 'Soczysta makrela', tags: ['owoce morza', 'srebrny'], id: 40 },

  { title: 'Śledź', text: 'Słony śledź', tags: ['owoce morza', 'szary'], id: 41 }

]);

Jest taka struktura danych dla listy filtrów:

filtersMenu: ['warzywa', 'owoce', 'słodycze', 'owoce morza'],

Trzeba zrobić przykład kodu z oryginalnym v-combobox z biblioteki vuetify 3  z taką funkcjonalnością:

1) szukać po kluczach po wszystkich trzech właściwościach (filter-keys="title, text, tags");

2) w rozwijanej liście obiektów wyświetlać props text;

3) w rozwijanej liście obiektów ma działać podświetlenie (podświetlać dopasowania w text);

4) przy wyborze obiektu, w polu input dodawać props title;

5) przy wyborze elementu z filtersMenu, dodawać go w input oraz aktualizować menu z pasującymi obiektami;

Zwrócić uwagę:

- zrealizować trzeba standardowymi możliwościami v-combobox (bez kombinacji z różnych komponentów);

- funkcja wyszukiwania ma szukać po wszystkich trzech propsach (title, text, tags) niezależnie od wielkości liter;

- podświetlenie ma działać

- rozwijana lista ma aktywować się, gdy dodano element z filtersMenu (poprzednia wartość może być zastępowana)