[{"data":1,"prerenderedAt":154},["ShallowReactive",2],{"docs:\u002Fdocs\u002Fcopy-guide":3},{"id":4,"title":5,"body":6,"component":142,"dependsOn":143,"description":144,"emitDescriptions":145,"extension":146,"meta":147,"navigation":148,"order":137,"path":149,"seo":150,"status":151,"stem":152,"__hash__":153},"docs\u002Fdocs\u002Fcopy-guide.md","Як перенести компонент",{"type":7,"value":8,"toc":135},"minimark",[9,13,18,30,46,56,74,78,88,102,106,112,118],[10,11,12],"p",{},"Компоненти не встановлюються пакетом. Ви копіюєте файл у свій проєкт — і\nдалі він ваш.",[14,15,17],"h2",{"id":16},"порядок","Порядок",[10,19,20,24,25,29],{},[21,22,23],"strong",{},"1. Токени."," Один раз на проєкт скопіюйте ",[26,27,28],"code",{},"app\u002Fassets\u002Fcss\u002Ftokens.css"," і\nпідключіть його. Це чистий CSS без синтаксису Tailwind: працює однаково на\nv3 і v4.",[10,31,32,35,36,39,40,45],{},[21,33,34],{},"2. Реєстрація токенів."," На Tailwind v4 скопіюйте ще й ",[26,37,38],{},"theme.css",". На v3\nзамість нього візьміть конфіг зі сторінки ",[41,42,44],"a",{"href":43},"\u002Fdocs\u002Ffoundations\u002Ftokens","Токени","\n— класи утиліт будуть ті самі.",[10,47,48,51,52,55],{},[21,49,50],{},"3. Сам компонент."," Скопіюйте ",[26,53,54],{},".vue","-файл кнопкою на його сторінці.",[10,57,58,61,62,65,66,69,70,73],{},[21,59,60],{},"4. Залежності."," Якщо на сторінці компонента є блок «Портування» зі\nсписком файлів — скопіюйте і їх. Наприклад, ",[26,63,64],{},"UiSelect"," без\n",[26,67,68],{},"uiFieldStyles.ts"," лишиться без стилів, а ",[26,71,72],{},"UiModal"," без чотирьох\nкомпозаблів overlay-ядра просто не працюватиме.",[14,75,77],{"id":76},"що-варто-змінити-після-копіювання","Що варто змінити після копіювання",[10,79,80,83,84,87],{},[21,81,82],{},"Українські рядки."," У компонентах є кілька зашитих підписів: «Закрити»,\n«Нічого не знайдено», «Завантаження…». Якщо у вас i18n — замініть їх на\n",[26,85,86],{},"t()",". Навмисно не винесені в props: типовий випадок не має вимагати\nналаштування.",[10,89,90,93,94,97,98,101],{},[21,91,92],{},"Шляхи імпортів."," Компоненти імпортують одне одного через ",[26,95,96],{},"~\u002Fcomponents\u002Fui\u002F…","\nі ",[26,99,100],{},"~\u002Fcomposables\u002F…",". Якщо у вашому проєкті інший аліас — поправте.",[14,103,105],{"id":104},"чого-не-робити","Чого не робити",[10,107,108,111],{},[21,109,110],{},"Не копіюйте компонент без токенів."," Він виглядатиме зламаним, бо всі\nкольори посилаються на змінні, яких у проєкті немає. Це найчастіша помилка.",[10,113,114,117],{},[21,115,116],{},"Не правте компонент, щоб він «вписався» в чужі кольори."," Якщо кнопка на\nвашому фоні виглядає не так — виправляйте токени, а не класи всередині\nкомпонента. Інакше наступне оновлення доведеться зливати руками.",[10,119,120,123,124,126,127,130,131,134],{},[21,121,122],{},"Не тягніть overlay-ядро двічі."," Якщо в проєкті вже є ",[26,125,72],{},", то для\n",[26,128,129],{},"UiDrawer"," чи ",[26,132,133],{},"UiConfirmDialog"," композабли копіювати вдруге не потрібно —\nвони спільні, і саме тому вкладені оверлеї працюють правильно.",{"title":136,"searchDepth":137,"depth":137,"links":138},"",2,[139,140,141],{"id":16,"depth":137,"text":17},{"id":76,"depth":137,"text":77},{"id":104,"depth":137,"text":105},null,[],"Що саме копіювати, у якому порядку і чого не робити.",{},"md",{},true,"\u002Fdocs\u002Fcopy-guide",{"title":5,"description":144},"stable","docs\u002Fcopy-guide","N_Yg81Wm1fnvlVfMZQEiia29n5xo96Dq1GpvD3QYyxw",1788072641362]