Тестове завдання

Надання результатів

Надати посилання на git репозиторій в якому містяться:

• README з інструкцією щодо використання компоненту
• код компоненту
• тести

Вимоги

• vue 3
• пошук з фільтрацією
• підтримка slots для окремої ноди з доступом до всіх даних обʼєкту ноди
• при виборі ноди яка має дітей, діти теж мають вибиратись

Опис

Написати самостійний (без застосування сторонніх бібліотек) компонент візуалізації дерева категорій з можливістю пошуку і вибору користувачем декількох категорій.

Режими роботи

Компонент має наступні візуальні режими

• режим за замовчуванням, відображається все дерево, рядок пошуку порожній
• режим пошуку, в рядку користувач може ввести пошуковий запит, в дереві відображаються категорії що підпадають під пошуквий запит і всі батьківські категорії
• заповнений, відображається рядок з обраними категоріями у виді тегів з можливістю видалення вибраних раніше категорій

Формат даних

З бекенду приходитимуть дані в форматі

{
    data:[
        {
            id: "687086d9-e6b9-40a2-a226-5834c67a781d",
            name:"Europe",
            children:[
                {
                    id: "487086d9-e6b9-40a2-a226-5834c67a781d",
                    name:"Ukraine",
                    children:[
                        {
                            id:"9a434c91-13ee-4e19-94c1-47b2f95d7461",
                            name:"Kharkivska",
                            children:[]
                        },
                        {
                            id:"7160291a-3da3-418b-8860-bc3b3d058e26",
                            name:"Kyivska",
                            children:[]
                        }
                        {
                            id:"fac202c4-75de-45f6-b850-0d5c3e897964",
                            name:"Vinnytska",
                            children:[]
                        }
                        {
                            id:"e3b3e640-809f-47ba-bf66-5aeea1c3f3ac",
                            name:"Lvivska",
                            children:[]
                        }
                    ]
                },
                {
                    id: "e0a7380f-faec-4e4f-a915-35108857685d",
                    name:"Great britain",
                    children:[]
                },
                {
                    id: "46611bd2-a5e3-4d2f-89d9-bca6fafcf43b",
                    name:"France",
                    children:[]
                },
                {
                    id: "78d0d634-380b-4979-9fc0-08307ed6e3d7",
                    name:"Norway",
                    children:[]
                }
            ]
        },
        {
            id: "687086ea-e6b9-40a2-a226-5834c67a781d",
            name:"Asia",
            children:[
                {
                    id: "868a248d-26df-433a-aecc-3c004e3c66d3",
                    name:"China",
                    children:[]
                },
                {
                    id: "b602579b-5faf-454d-b84a-5ef6605e98fe",
                    name:"Taiwan",
                    children:[]
                },
                {
                    id: "fa71bbd5-a052-43cc-bd9d-42a252154ca0",
                    name:"Japan",
                    children:[]
                },
                {
                    id: "a0bb0c79-9da2-4ff8-89f7-f55e9a17d69e",
                    name:"Vietnam",
                    children:[]
                }
            ]
        }
    ]
}

Обрані категорії потрібно віддавати в форматі

{
  "categories": [
    "687086d9-e6b9-40a2-a226-5834c67a781d", // Europe
    "487086d9-e6b9-40a2-a226-5834c67a781d", // Ukraine
    "b602579b-5faf-454d-b84a-5ef6605e98fe" // Taiwan
  ]
}