{"id":336594,"date":"2022-08-05T09:00:09","date_gmt":"2022-08-05T09:00:09","guid":{"rendered":"http:\/\/savepearlharbor.com\/?p=336594"},"modified":"-0001-11-30T00:00:00","modified_gmt":"-0001-11-29T21:00:00","slug":"","status":"publish","type":"post","link":"https:\/\/savepearlharbor.com\/?p=336594","title":{"rendered":"<span>\u0410\u0434\u0430\u043f\u0442\u0438\u0432\u043d\u044b\u0435 \u0442\u0430\u0431\u043b\u0438\u0446\u044b \u0432 \u0432\u0435\u0431\u0435<\/span>"},"content":{"rendered":"<div><\/div>\n<div id=\"post-content-body\">\n<div>\n<div class=\"article-formatted-body article-formatted-body article-formatted-body_version-2\">\n<div xmlns=\"http:\/\/www.w3.org\/1999\/xhtml\">\n<p><strong>\u0422\u0430\u0431\u043b\u0438\u0446\u0430 \u2014 \u0443\u0434\u043e\u0431\u043d\u044b\u0439 \u0438 \u043e\u0434\u0438\u043d \u0438\u0437 \u0441\u0430\u043c\u044b\u0445 \u044d\u0444\u0444\u0435\u043a\u0442\u0438\u0432\u043d\u044b\u0445 \u0441\u043f\u043e\u0441\u043e\u0431\u043e\u0432 \u043f\u043e\u0434\u0430\u0447\u0438 \u0422\u0415\u041a\u0421\u0422\u041e\u0412\u041e\u0419 \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u0438: \u043d\u0430 \u043c\u0438\u043d\u0438\u043c\u0443\u043c\u0435 \u043f\u0440\u043e\u0441\u0442\u0440\u0430\u043d\u0441\u0442\u0432\u0430 \u0440\u0430\u0437\u043c\u0435\u0449\u0435\u043d\u043e \u043c\u0430\u043a\u0441\u0438\u043c\u0443\u043c \u0434\u0430\u043d\u043d\u044b\u0445. \u0418 \u0447\u0442\u043e \u043d\u0435 \u043c\u0435\u043d\u0435\u0435 \u0432\u0430\u0436\u043d\u043e \u2014 \u044d\u0442\u0438 \u0434\u0430\u043d\u043d\u044b\u0435 \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u044b \u043d\u0435 \u0442\u043e\u043b\u044c\u043a\u043e \u0434\u043b\u044f \u0432\u043e\u0441\u043f\u0440\u0438\u044f\u0442\u0438\u044f, \u043d\u043e \u0438 \u0434\u043b\u044f \u0430\u043d\u0430\u043b\u0438\u0437\u0430 (\u0421\u0420\u0410\u0412\u041d\u0415\u041d\u0418\u042f). \u041e\u0441\u043d\u043e\u0432\u043d\u0430\u044f \u0441\u043b\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u0442\u0430\u0431\u043b\u0438\u0446 \u043f\u0440\u0438 \u0432\u0435\u0440\u0441\u0442\u043a\u0435 \u2014 \u0438\u0445 \u0430\u0434\u0430\u043f\u0442\u0438\u0432\u043d\u043e\u0441\u0442\u044c \u0434\u043b\u044f \u0443\u0441\u0442\u0440\u043e\u0439\u0441\u0442\u0432 \u0441 \u043d\u0435\u0431\u043e\u043b\u044c\u0448\u0438\u043c\u0438 \u044d\u043a\u0440\u0430\u043d\u0430\u043c\u0438 (\u043c\u043e\u0431\u0438\u043b\u044c\u043d\u044b\u0445 \u0434\u0435\u0432\u0430\u0439\u0441\u043e\u0432). \u041c\u043e\u0436\u043d\u043e \u043b\u0438 \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u0442\u0430\u043a, \u0447\u0442\u043e\u0431\u044b \u0434\u0430\u0436\u0435 \u043d\u0430 \u044d\u043a\u0440\u0430\u043d\u0435 \u0441 \u0440\u0430\u0437\u043c\u0435\u0440\u0430\u043c\u0438 \u0432 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0441\u0430\u043d\u0442\u0438\u043c\u0435\u0442\u0440\u043e\u0432 \u0442\u0430\u0431\u043b\u0438\u0446\u044b \u043c\u043e\u0433\u043b\u0438 \u0431\u044b\u0442\u044c \u0443\u0434\u043e\u0431\u043d\u044b\u043c\u0438 \u0434\u043b\u044f \u0432\u043e\u0441\u043f\u0440\u0438\u044f\u0442\u0438\u044f?<\/strong><\/p>\n<p>\u0412 \u0441\u0442\u0430\u0442\u044c\u0435 \u0431\u0443\u0434\u0435\u0442 \u043f\u0440\u0435\u0434\u043b\u043e\u0436\u0435\u043d \u0441\u043f\u043e\u0441\u043e\u0431 \u0430\u0434\u0430\u043f\u0442\u0430\u0446\u0438\u0438 \u0442\u0430\u0431\u043b\u0438\u0446 \u043a \u0440\u0430\u0437\u043d\u044b\u043c \u044d\u043a\u0440\u0430\u043d\u0430\u043c \u0440\u0430\u0437\u043d\u044b\u0445 \u0443\u0441\u0442\u0440\u043e\u0439\u0441\u0442\u0432. \u041a\u0440\u043e\u043c\u0435 \u0442\u043e\u0433\u043e, \u044d\u0442\u043e\u0442 \u0441\u043f\u043e\u0441\u043e\u0431 \u0431\u0443\u0434\u0435\u0442 \u0440\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u043d \u043d\u0430 \u043f\u0440\u0430\u043a\u0442\u0438\u043a\u0435 \u0441 \u043f\u0440\u0438\u043c\u0435\u043d\u0435\u043d\u0438\u0435\u043c Vue.js 3, CSS-\u043c\u043e\u0434\u0443\u043b\u0435\u0439 \u0438 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043d\u043e-\u043e\u0440\u0438\u0435\u043d\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u043e\u0433\u043e \u043f\u043e\u0434\u0445\u043e\u0434\u0430.<\/p>\n<h3>\u0421\u043e\u0434\u0435\u0440\u0436\u0430\u043d\u0438\u0435<\/h3>\n<ul>\n<li>\n<p>\u0421\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0430 \u0442\u0430\u0431\u043b\u0438\u0446\u044b<\/p>\n<\/li>\n<li>\n<p>\u0426\u0432\u0435\u0442\u043e\u0432\u0430\u044f \u0434\u0438\u0444\u0444\u0435\u0440\u0435\u043d\u0446\u0438\u0430\u0446\u0438\u044f<\/p>\n<\/li>\n<li>\n<p>\u041f\u0440\u043e\u0431\u043b\u0435\u043c\u0430 \u0441 Mobile First<\/p>\n<\/li>\n<li>\n<p>\u0427\u0442\u043e \u0434\u0435\u043b\u0430\u0442\u044c \u0441 \u0442\u0430\u0431\u043b\u0438\u0446\u0430\u043c\u0438 \u043d\u0430 \u043c\u0430\u043b\u0435\u043d\u044c\u043a\u0438\u0445 \u044d\u043a\u0440\u0430\u043d\u0430\u0445?<\/p>\n<\/li>\n<li>\n<p><s>Back to the Future<\/s> Forward to the Past, \u0438\u043b\u0438 \u0447\u0442\u043e \u0431\u0443\u0434\u0435\u043c \u0443\u043b\u0443\u0447\u0448\u0430\u0442\u044c<\/p>\n<\/li>\n<li>\n<p>Mobile First \u0438\u043b\u0438 Desktop First? \u0411\u0435\u0437 \u0440\u0430\u0437\u043d\u0438\u0446\u044b!<\/p>\n<\/li>\n<li>\n<p>\u041f\u043e\u0434\u0433\u043e\u0442\u043e\u0432\u043a\u0430 \u043a \u0440\u0430\u0431\u043e\u0442\u0435, Vue.js<\/p>\n<\/li>\n<li>\n<p>\u0421\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0430 \u043f\u0440\u043e\u0435\u043a\u0442\u0430 \u0438 \u043d\u0435\u0439\u043c\u0438\u043d\u0433<\/p>\n<\/li>\n<li>\n<p>CSS-\u043c\u043e\u0434\u0443\u043b\u0438<\/p>\n<\/li>\n<li>\n<p>\u041a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043d\u043e-\u043e\u0440\u0438\u0435\u043d\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u0439 \u043f\u043e\u0434\u0445\u043e\u0434<\/p>\n<\/li>\n<li>\n<p>API \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 \u0430\u0434\u0430\u043f\u0442\u0438\u0432\u043d\u043e\u0439 \u0442\u0430\u0431\u043b\u0438\u0446\u044b<\/p>\n<\/li>\n<li>\n<p>\u041a\u043b\u0430\u0441\u0441\u0438\u0447\u0435\u0441\u043a\u0438\u0439 \u0432\u0438\u0434 \u0442\u0430\u0431\u043b\u0438\u0446\u044b<\/p>\n<\/li>\n<li>\n<p>\u0414\u0435\u043b\u0430\u0435\u043c \u0442\u0430\u0431\u043b\u0438\u0446\u0443 \u0430\u0434\u0430\u043f\u0442\u0438\u0432\u043d\u043e\u0439<\/p>\n<\/li>\n<li>\n<p>\u0415\u0441\u043b\u0438 \u043c\u043d\u043e\u0433\u043e \u043a\u043e\u043b\u043e\u043d\u043e\u043a<\/p>\n<\/li>\n<li>\n<p>\u0414\u0432\u0438\u0436\u0443\u0449\u0430\u044f\u0441\u044f \u0448\u0430\u043f\u043a\u0430 \u0430\u0434\u0430\u043f\u0442\u0438\u0432\u043d\u043e\u0439 \u0442\u0430\u0431\u043b\u0438\u0446\u044b<\/p>\n<\/li>\n<\/ul>\n<h2>\u0421\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0430 \u0442\u0430\u0431\u043b\u0438\u0446\u044b<\/h2>\n<p>\u0422\u0430\u0431\u043b\u0438\u0446\u0430 \u0441\u043e\u0441\u0442\u043e\u0438\u0442 \u0438\u0437 \u0441\u0442\u043e\u043b\u0431\u0446\u043e\u0432 \u0438 \u0441\u0442\u0440\u043e\u043a. \u041f\u0435\u0440\u0432\u0430\u044f, \u0441\u0430\u043c\u0430\u044f \u0432\u0435\u0440\u0445\u043d\u044f\u044f \u0441\u0442\u0440\u043e\u043a\u0430 \u2014 \u0448\u0430\u043f\u043a\u0430 \u0442\u0430\u0431\u043b\u0438\u0446\u044b. \u0422.\u0435. <strong>\u0417\u0410\u0413\u041e\u041b\u041e\u0412\u041a\u0418 \u0441\u0442\u043e\u043b\u0431\u0446\u043e\u0432<\/strong>. \u0412\u0430\u0436\u043d\u043e \u043e\u0442\u043c\u0435\u0442\u0438\u0442\u044c, \u0447\u0442\u043e \u043f\u0435\u0440\u0432\u044b\u0439 \u0441\u0442\u043e\u043b\u0431\u0435\u0446, \u043a\u0430\u043a \u043f\u0440\u0430\u0432\u0438\u043b\u043e, \u0438\u0433\u0440\u0430\u0435\u0442 \u043d\u0435 \u043c\u0435\u043d\u0435\u0435 \u0432\u0430\u0436\u043d\u0443\u044e \u0440\u043e\u043b\u044c, \u0442.\u043a. \u0432 \u0435\u0433\u043e \u044f\u0447\u0435\u0439\u043a\u0430\u0445 \u2014 \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u044f, \u043a\u043e\u0442\u043e\u0440\u0443\u044e \u043c\u043e\u0436\u043d\u043e \u043e\u0431\u043e\u0437\u043d\u0430\u0447\u0438\u0442\u044c \u043a\u0430\u043a <strong>\u0417\u0410\u0413\u041e\u041b\u041e\u0412\u041a\u0418 \u0441\u0442\u0440\u043e\u043a<\/strong>.<\/p>\n<p>\u0422\u0430\u0431\u043b\u0438\u0446\u0430 \u043c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c \u0443\u0441\u043b\u043e\u0436\u043d\u0435\u043d\u0430 (\u0447\u0442\u043e, \u043a\u0430\u043a \u043d\u0438 \u043f\u0430\u0440\u0430\u0434\u043e\u043a\u0441\u0430\u043b\u044c\u043d\u043e, \u043d\u0435 \u0443\u0441\u043b\u043e\u0436\u043d\u044f\u0435\u0442, \u0430 \u043d\u0430\u043e\u0431\u043e\u0440\u043e\u0442, \u0443\u043f\u0440\u043e\u0449\u0430\u0435\u0442 \u0435\u0435 \u0432\u043e\u0441\u043f\u0440\u0438\u044f\u0442\u0438\u0435):<\/p>\n<ul>\n<li>\n<p>\u0448\u0430\u043f\u043a\u0430 \u0442\u0430\u0431\u043b\u0438\u0446\u044b \u043c\u043e\u0436\u0435\u0442 \u0441\u043e\u0441\u0442\u043e\u044f\u0442\u044c \u043d\u0435 \u0438\u0437 \u043e\u0434\u043d\u043e\u0439, \u0430 \u0438\u0437 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u0438\u0445 \u0441\u0442\u0440\u043e\u043a, \u043f\u0440\u0438\u0447\u0435\u043c \u0432 \u043a\u0430\u043a\u0438\u0445-\u0442\u043e \u0441\u0442\u043e\u043b\u0431\u0446\u0430\u0445 \u044d\u0442\u0438 \u0441\u0442\u0440\u043e\u043a\u0438 \u043c\u043e\u0433\u0443\u0442 \u0431\u044b\u0442\u044c \u043e\u0431\u044a\u0435\u0434\u0438\u043d\u0435\u043d\u044b, \u0430 \u0432 \u043a\u0430\u043a\u0438\u0445-\u0442\u043e \u2014 \u043c\u043e\u0433\u0443\u0442 \u0431\u044b\u0442\u044c \u043f\u043e\u0434\u0441\u0442\u043e\u043b\u0431\u0446\u044b<\/p>\n<\/li>\n<li>\n<p>\u043a\u0440\u043e\u043c\u0435 \u0437\u0430\u0433\u043e\u043b\u043e\u0432\u043a\u043e\u0432 \u0441\u0442\u0440\u043e\u043a \u0432 \u043f\u0435\u0440\u0432\u043e\u043c \u0441\u0442\u043e\u043b\u0431\u0446\u0435, \u0432\u043e \u0432\u0442\u043e\u0440\u043e\u043c \u043c\u043e\u0433\u0443\u0442 \u0431\u044b\u0442\u044c \u043f\u043e\u0434\u0437\u0430\u0433\u043e\u043b\u043e\u0432\u043a\u0438 \u044d\u0442\u0438\u0445 \u0441\u0442\u0440\u043e\u043a<\/p>\n<\/li>\n<li>\n<p>\u0434\u043b\u044f \u0443\u043b\u0443\u0447\u0448\u0435\u043d\u0438\u044f \u0432\u043e\u0441\u043f\u0440\u0438\u044f\u0442\u0438\u044f \u044f\u0447\u0435\u0439\u043a\u0438 \u0441 \u043e\u0434\u0438\u043d\u0430\u043a\u043e\u0432\u044b\u043c\u0438 \u0434\u0430\u043d\u043d\u044b\u043c\u0438 \u043c\u043e\u0433\u0443\u0442 \u0431\u044b\u0442\u044c \u043e\u0431\u044a\u0435\u0434\u0438\u043d\u0435\u043d\u044b \u043a\u0430\u043a \u043f\u043e \u0433\u043e\u0440\u0438\u0437\u043e\u043d\u0442\u0430\u043b\u0438, \u0442\u0430\u043a \u0438 \u043f\u043e \u0432\u0435\u0440\u0442\u0438\u043a\u0430\u043b\u0438<\/p>\n<\/li>\n<\/ul>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/0c8\/f1a\/635\/0c8f1a635f12eaf64a756206b4265fff.png\" alt=\"\u041f\u0440\u0438\u043c\u0435\u0440 \u0442\u0430\u0431\u043b\u0438\u0446\u044b \u0441 \u0448\u0430\u043f\u043a\u043e\u0439 \u0438\u0437 \u0434\u0432\u0443\u0445 \u0441\u0442\u0440\u043e\u043a, \u0434\u0432\u0443\u043c\u044f \u0437\u0430\u0433\u043e\u043b\u043e\u0432\u043a\u0430\u043c\u0438 \u0441\u0442\u0440\u043e\u043a (title + subtitle) \u0438 \u043e\u0431\u044a\u0435\u0434\u0438\u043d\u0435\u043d\u043d\u044b\u043c\u0438 \u044f\u0447\u0435\u0439\u043a\u0430\u043c\u0438\" title=\"\u041f\u0440\u0438\u043c\u0435\u0440 \u0442\u0430\u0431\u043b\u0438\u0446\u044b \u0441 \u0448\u0430\u043f\u043a\u043e\u0439 \u0438\u0437 \u0434\u0432\u0443\u0445 \u0441\u0442\u0440\u043e\u043a, \u0434\u0432\u0443\u043c\u044f \u0437\u0430\u0433\u043e\u043b\u043e\u0432\u043a\u0430\u043c\u0438 \u0441\u0442\u0440\u043e\u043a (title + subtitle) \u0438 \u043e\u0431\u044a\u0435\u0434\u0438\u043d\u0435\u043d\u043d\u044b\u043c\u0438 \u044f\u0447\u0435\u0439\u043a\u0430\u043c\u0438\" width=\"822\" height=\"199\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/0c8\/f1a\/635\/0c8f1a635f12eaf64a756206b4265fff.png\"\/><figcaption>\u041f\u0440\u0438\u043c\u0435\u0440 \u0442\u0430\u0431\u043b\u0438\u0446\u044b \u0441 \u0448\u0430\u043f\u043a\u043e\u0439 \u0438\u0437 \u0434\u0432\u0443\u0445 \u0441\u0442\u0440\u043e\u043a, \u0434\u0432\u0443\u043c\u044f \u0437\u0430\u0433\u043e\u043b\u043e\u0432\u043a\u0430\u043c\u0438 \u0441\u0442\u0440\u043e\u043a (title + subtitle) \u0438 \u043e\u0431\u044a\u0435\u0434\u0438\u043d\u0435\u043d\u043d\u044b\u043c\u0438 \u044f\u0447\u0435\u0439\u043a\u0430\u043c\u0438<\/figcaption><\/figure>\n<h2>\u0426\u0432\u0435\u0442\u043e\u0432\u0430\u044f \u0434\u0438\u0444\u0444\u0435\u0440\u0435\u043d\u0446\u0438\u0430\u0446\u0438\u044f<\/h2>\n<p>\u0414\u0430\u043d\u043d\u044b\u0435, \u043e\u0431\u043e\u0437\u043d\u0430\u0447\u0435\u043d\u043d\u044b\u0435 \u0432 \u044f\u0447\u0435\u0439\u043a\u0430\u0445, \u043b\u0435\u0433\u0447\u0435 \u0432\u043e\u0441\u043f\u0440\u0438\u043d\u0438\u043c\u0430\u044e\u0442\u0441\u044f, \u0435\u0441\u043b\u0438 \u044d\u0442\u0438 \u044f\u0447\u0435\u0439\u043a\u0438 \u0440\u0430\u0437\u0434\u0435\u043b\u0435\u043d\u044b \u0433\u0440\u0430\u043d\u0438\u0446\u0430\u043c\u0438. \u041d\u0435 \u043c\u0435\u043d\u0435\u0435 \u0432\u0430\u0436\u043d\u044b\u0439 \u0430\u0441\u043f\u0435\u043a\u0442 \u2014 \u0434\u0438\u0444\u0444\u0435\u0440\u0435\u043d\u0446\u0438\u0430\u0446\u0438\u044f \u0440\u0430\u0437\u043d\u044b\u0445 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u0442\u0430\u0431\u043b\u0438\u0446\u044b \u043f\u043e \u0446\u0432\u0435\u0442\u0430\u043c. \u041a\u0430\u043a \u043f\u0440\u0430\u0432\u0438\u043b\u043e, \u0447\u0430\u0449\u0435 \u0432\u0441\u0435\u0433\u043e \u0432\u044b\u0434\u0435\u043b\u044f\u044e\u0442 \u0434\u0440\u0443\u0433\u0438\u043c \u0446\u0432\u0435\u0442\u043e\u0432\u044b\u043c \u0444\u043e\u043d\u043e\u043c \u0448\u0430\u043f\u043a\u0443 \u0442\u0430\u0431\u043b\u0438\u0446\u044b, \u043d\u043e \u043d\u0435 \u043c\u0435\u043d\u0435\u0435 \u0432\u0430\u0436\u043d\u043e, \u043e\u0441\u043e\u0431\u0435\u043d\u043d\u043e \u043f\u0440\u0438 \u0430\u0434\u0430\u043f\u0442\u0430\u0446\u0438\u0438 \u0442\u0430\u0431\u043b\u0438\u0446\u044b \u0434\u043b\u044f \u043c\u0430\u043b\u0435\u043d\u044c\u043a\u0438\u0445 \u044d\u043a\u0440\u0430\u043d\u043e\u0432 (\u043e\u0431 \u044d\u0442\u043e\u043c \u043d\u0438\u0436\u0435), \u0432\u044b\u0434\u0435\u043b\u044f\u0442\u044c \u0444\u043e\u043d\u043e\u043c \u0437\u0430\u0433\u043e\u043b\u043e\u0432\u043a\u0438 \u0441\u0442\u0440\u043e\u043a.<\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/621\/6f2\/ba8\/6216f2ba89c3c1cdbc604c9211c8e1aa.png\" alt=\"\u0414\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u0438\u0435 \u0446\u0432\u0435\u0442\u043d\u043e\u0433\u043e \u0444\u043e\u043d\u0430 \u0434\u043b\u044f \u0448\u0430\u043f\u043a\u0438 \u0438 \u0437\u0430\u0433\u043e\u043b\u043e\u0432\u043a\u043e\u0432 \u0441\u0442\u0440\u043e\u043a \u0434\u0435\u043b\u0430\u0435\u0442 \u0442\u0430\u0431\u043b\u0438\u0446\u0443 \u0431\u043e\u043b\u0435\u0435 \u0443\u0434\u043e\u0431\u043d\u043e\u0439 \u0434\u043b\u044f \u0432\u043e\u0441\u043f\u0440\u0438\u044f\u0442\u0438\u044f\" title=\"\u0414\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u0438\u0435 \u0446\u0432\u0435\u0442\u043d\u043e\u0433\u043e \u0444\u043e\u043d\u0430 \u0434\u043b\u044f \u0448\u0430\u043f\u043a\u0438 \u0438 \u0437\u0430\u0433\u043e\u043b\u043e\u0432\u043a\u043e\u0432 \u0441\u0442\u0440\u043e\u043a \u0434\u0435\u043b\u0430\u0435\u0442 \u0442\u0430\u0431\u043b\u0438\u0446\u0443 \u0431\u043e\u043b\u0435\u0435 \u0443\u0434\u043e\u0431\u043d\u043e\u0439 \u0434\u043b\u044f \u0432\u043e\u0441\u043f\u0440\u0438\u044f\u0442\u0438\u044f\" width=\"822\" height=\"199\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/621\/6f2\/ba8\/6216f2ba89c3c1cdbc604c9211c8e1aa.png\"\/><figcaption>\u0414\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u0438\u0435 \u0446\u0432\u0435\u0442\u043d\u043e\u0433\u043e \u0444\u043e\u043d\u0430 \u0434\u043b\u044f \u0448\u0430\u043f\u043a\u0438 \u0438 \u0437\u0430\u0433\u043e\u043b\u043e\u0432\u043a\u043e\u0432 \u0441\u0442\u0440\u043e\u043a \u0434\u0435\u043b\u0430\u0435\u0442 \u0442\u0430\u0431\u043b\u0438\u0446\u0443 \u0431\u043e\u043b\u0435\u0435 \u0443\u0434\u043e\u0431\u043d\u043e\u0439 \u0434\u043b\u044f \u0432\u043e\u0441\u043f\u0440\u0438\u044f\u0442\u0438\u044f<\/figcaption><\/figure>\n<p>\u041f\u0440\u0438 \u043d\u0430\u043b\u0438\u0447\u0438\u0438 \u0433\u0440\u0430\u043d\u0438\u0446 \u0432\u043e\u0441\u043f\u0440\u0438\u044f\u0442\u0438\u0435 \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u0438 \u0442\u0430\u043a\u0436\u0435 \u0443\u043b\u0443\u0447\u0448\u0430\u0435\u0442 \u0446\u0435\u043d\u0442\u0440\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435 \u0432 \u044f\u0447\u0435\u0439\u043a\u0430\u0445. \u0418 \u0435\u0449\u0435 \u043e\u0434\u0438\u043d \u043f\u0440\u0438\u044f\u0442\u043d\u044b\u0439 \u0434\u043b\u044f \u0433\u043b\u0430\u0437 \u043c\u043e\u043c\u0435\u043d\u0442 \u2014 \u043d\u0430\u043b\u0438\u0447\u0438\u0435 \u043e\u0442\u0441\u0442\u0443\u043f\u043e\u0432, \u043f\u043e \u043a\u0440\u0430\u0439\u043d\u0435\u0439 \u043c\u0435\u0440\u0435 \u0432\u0435\u0440\u0442\u0438\u043a\u0430\u043b\u044c\u043d\u044b\u0445 (\u043e\u043f\u0442\u0438\u043c\u0430\u043b\u044c\u043d\u044b\u0439 \u0432\u0430\u0440\u0438\u0430\u043d\u0442, \u043d\u0430 \u043c\u043e\u0439 \u0432\u0437\u0433\u043b\u044f\u0434 \u2014 \u043e\u0442 0.25em \u0434\u043e 0.5em). \u0414\u0430, \u0438 \u043f\u0440\u0438 \u044d\u0442\u043e\u043c (\u043d\u0430\u043b\u0438\u0447\u0438\u0438 \u043e\u0442\u0441\u0442\u0443\u043f\u043e\u0432) \u043c\u0435\u0436\u0441\u0442\u0440\u043e\u0447\u043d\u044b\u0439 \u0438\u043d\u0442\u0435\u0440\u0432\u0430\u043b \u0432 \u044f\u0447\u0435\u0439\u043a\u0430\u0445 \u043d\u0435 \u0434\u043e\u043b\u0436\u0435\u043d \u0431\u044b\u0442\u044c \u0442\u0430\u043a\u0438\u043c \u0436\u0435 \u0431\u043e\u043b\u044c\u0448\u0438\u043c, \u043a\u0430\u043a \u0443 \u043e\u0431\u044b\u0447\u043d\u044b\u0445 \u043f\u0430\u0440\u0430\u0433\u0440\u0430\u0444\u043e\u0432.<\/p>\n<h2>\u041f\u0440\u043e\u0431\u043b\u0435\u043c\u0430 \u0441 Mobile First<\/h2>\n<p>\u041e\u0441\u043d\u043e\u0432\u043d\u0430\u044f \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u0430, \u043f\u043e\u0447\u0435\u043c\u0443 \u0442\u0430\u0431\u043b\u0438\u0446\u044b \u0438\u0441\u0447\u0435\u0437\u043b\u0438 \u0441 \u0441\u0430\u0439\u0442\u043e\u0432 \u2014 \u043e\u0447\u0435\u043d\u044c \u043d\u0435\u0431\u043e\u043b\u044c\u0448\u0430\u044f \u0448\u0438\u0440\u0438\u043d\u0430 \u043c\u043e\u0431\u0438\u043b\u044c\u043d\u044b\u0445 \u044d\u043a\u0440\u0430\u043d\u043e\u0432, \u043e\u0441\u043e\u0431\u0435\u043d\u043d\u043e \u0432 portrait-\u043e\u0440\u0438\u0435\u043d\u0442\u0430\u0446\u0438\u0438. \u0427\u0430\u0441\u0442\u043e \u0437\u0430\u0433\u043e\u043b\u043e\u0432\u043a\u0438 \u0441\u0442\u0440\u043e\u043a \u0441\u043e\u0441\u0442\u043e\u044f\u0442 \u0438\u0437 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u0438\u0445 \u0441\u043b\u043e\u0432, \u0438 \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e \u0434\u043b\u0438\u043d\u043d\u044b, \u0438 \u0432\u0441\u0435 \u0447\u0442\u043e \u043e\u0441\u0442\u0430\u0435\u0442\u0441\u044f \u2014 \u043e\u0434\u0438\u043d-\u0434\u0432\u0430 \u0441\u0442\u043e\u043b\u0431\u0446\u0430 \u0441 \u0434\u0430\u043d\u043d\u044b\u043c\u0438, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043d\u0435 \u0443\u043c\u0435\u0449\u0430\u044e\u0442\u0441\u044f \u0432 \u0448\u0438\u0440\u0438\u043d\u0443 \u044d\u043a\u0440\u0430\u043d\u0430 \u043f\u0440\u0438 \u043d\u043e\u0440\u043c\u0430\u043b\u044c\u043d\u043e\u043c (\u0447\u0438\u0442\u0430\u0435\u043c\u043e\u043c) \u0440\u0430\u0437\u043c\u0435\u0440\u0435 \u0448\u0440\u0438\u0444\u0442\u0430.<\/p>\n<p>\u0418\u043c\u0435\u043d\u043d\u043e \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u043f\u0440\u0438\u043d\u0446\u0438\u043f \u201c<a href=\"https:\/\/ru.wikipedia.org\/wiki\/%D0%90%D0%B4%D0%B0%D0%BF%D1%82%D0%B8%D0%B2%D0%BD%D1%8B%D0%B9_%D0%B2%D0%B5%D0%B1-%D0%B4%D0%B8%D0%B7%D0%B0%D0%B9%D0%BD#%D0%A1%D0%BD%D0%B0%D1%87%D0%B0%D0%BB%D0%B0_%D0%BC%D0%BE%D0%B1%D0%B8%D0%BB%D1%8C%D0%BD%D1%8B%D0%B5_(%C2%ABMobile_first%C2%BB)\" rel=\"noopener noreferrer nofollow\">Mobile First<\/a>\u201d, \u043f\u043e\u043f\u0443\u043b\u044f\u0440\u043d\u044b\u0439 \u0432 \u0430\u0434\u0430\u043f\u0442\u0438\u0432\u043d\u043e\u043c \u0434\u0438\u0437\u0430\u0439\u043d\u0435, \u0441\u0432\u043e\u0434\u0438\u0442 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435 \u0442\u0430\u0431\u043b\u0438\u0446 \u043a \u043d\u0443\u043b\u044e. \u0412\u043c\u0435\u0441\u0442\u043e \u043d\u0438\u0445 \u043f\u043e\u043b\u0443\u0447\u0438\u043b \u0440\u0430\u0441\u043f\u0440\u043e\u0441\u0442\u0440\u0430\u043d\u0435\u043d\u0438\u0435 \u201c\u043a\u0430\u0440\u0442\u043e\u0447\u043d\u044b\u0439 \u043f\u043e\u0434\u0445\u043e\u0434\u201d, \u043a\u043e\u0433\u0434\u0430 \u0432\u0441\u0435 \u0434\u0430\u043d\u043d\u044b\u0435, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043c\u043e\u0436\u043d\u043e \u0431\u044b\u043b\u043e \u0431\u044b \u0443\u043c\u0435\u0441\u0442\u0438\u0442\u044c \u0432 \u0441\u0442\u0440\u043e\u043a\u0443, \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u044b \u0432 \u0432\u0438\u0434\u0435 \u0441\u043f\u0438\u0441\u043a\u0430.<\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/ee6\/cfa\/0be\/ee6cfa0beebba8b1052d2035e854c70c.png\" alt=\"\u041a\u0430\u0440\u0442\u043e\u0447\u043d\u044b\u0439 \u043f\u043e\u0434\u0445\u043e\u0434, \u043f\u0440\u0438\u043c\u0435\u043d\u0435\u043d\u043d\u044b\u0439 \u043a \u043d\u0430\u0448\u0435\u0439 \u0442\u0430\u0431\u043b\u0438\u0446\u0435, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0447\u0430\u0441\u0442\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u0432 \u0430\u0434\u0430\u043f\u0442\u0438\u0432\u043d\u043e\u0439 \u0432\u0435\u0440\u0441\u0442\u043a\u0435, \u043a\u0430\u043a \u0435\u0433\u043e \u043c\u043e\u0436\u043d\u043e \u043d\u0430\u0431\u043b\u044e\u0434\u0430\u0442\u044c \u043d\u0430 \u044d\u043a\u0440\u0430\u043d\u0430\u0445 \u043c\u043e\u043d\u0438\u0442\u043e\u0440\u0430\u0445 \u0438 \u043c\u043e\u0431\u0438\u043b\u044c\u043d\u044b\u0445 \u0443\u0441\u0442\u0440\u043e\u0439\u0441\u0442\u0432 \u0432 portrait-\u043e\u0440\u0438\u0435\u043d\u0442\u0430\u0446\u0438\u0438\" title=\"\u041a\u0430\u0440\u0442\u043e\u0447\u043d\u044b\u0439 \u043f\u043e\u0434\u0445\u043e\u0434, \u043f\u0440\u0438\u043c\u0435\u043d\u0435\u043d\u043d\u044b\u0439 \u043a \u043d\u0430\u0448\u0435\u0439 \u0442\u0430\u0431\u043b\u0438\u0446\u0435, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0447\u0430\u0441\u0442\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u0432 \u0430\u0434\u0430\u043f\u0442\u0438\u0432\u043d\u043e\u0439 \u0432\u0435\u0440\u0441\u0442\u043a\u0435, \u043a\u0430\u043a \u0435\u0433\u043e \u043c\u043e\u0436\u043d\u043e \u043d\u0430\u0431\u043b\u044e\u0434\u0430\u0442\u044c \u043d\u0430 \u044d\u043a\u0440\u0430\u043d\u0430\u0445 \u043c\u043e\u043d\u0438\u0442\u043e\u0440\u0430\u0445 \u0438 \u043c\u043e\u0431\u0438\u043b\u044c\u043d\u044b\u0445 \u0443\u0441\u0442\u0440\u043e\u0439\u0441\u0442\u0432 \u0432 portrait-\u043e\u0440\u0438\u0435\u043d\u0442\u0430\u0446\u0438\u0438\" width=\"2594\" height=\"1508\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/ee6\/cfa\/0be\/ee6cfa0beebba8b1052d2035e854c70c.png\"\/><figcaption>\u041a\u0430\u0440\u0442\u043e\u0447\u043d\u044b\u0439 \u043f\u043e\u0434\u0445\u043e\u0434, \u043f\u0440\u0438\u043c\u0435\u043d\u0435\u043d\u043d\u044b\u0439 \u043a \u043d\u0430\u0448\u0435\u0439 \u0442\u0430\u0431\u043b\u0438\u0446\u0435, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0447\u0430\u0441\u0442\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u0432 \u0430\u0434\u0430\u043f\u0442\u0438\u0432\u043d\u043e\u0439 \u0432\u0435\u0440\u0441\u0442\u043a\u0435, \u043a\u0430\u043a \u0435\u0433\u043e \u043c\u043e\u0436\u043d\u043e \u043d\u0430\u0431\u043b\u044e\u0434\u0430\u0442\u044c \u043d\u0430 \u044d\u043a\u0440\u0430\u043d\u0430\u0445 \u043c\u043e\u043d\u0438\u0442\u043e\u0440\u0430\u0445 \u0438 \u043c\u043e\u0431\u0438\u043b\u044c\u043d\u044b\u0445 \u0443\u0441\u0442\u0440\u043e\u0439\u0441\u0442\u0432 \u0432 portrait-\u043e\u0440\u0438\u0435\u043d\u0442\u0430\u0446\u0438\u0438<\/figcaption><\/figure>\n<p>\u041d\u0435\u0434\u043e\u0441\u0442\u0430\u0442\u043a\u043e\u0432 \u0442\u0430\u043a\u043e\u0433\u043e \u043f\u043e\u0434\u0445\u043e\u0434\u0430 \u043c\u043d\u043e\u0436\u0435\u0441\u0442\u0432\u043e. \u0421\u0430\u043c\u044b\u0435 \u0433\u043b\u0430\u0432\u043d\u044b\u0435 \u0438\u0437 \u043d\u0438\u0445:<\/p>\n<ul>\n<li>\n<p>\u043a\u0430\u0440\u0442\u043e\u0447\u043a\u0438 \u2014 \u044d\u0442\u043e \u201c\u043c\u0443\u0441\u043e\u0440\u201d \u0432 \u0434\u0438\u0437\u0430\u0439\u043d\u0435: \u043d\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0435 \u2014 \u043c\u043d\u043e\u0436\u0435\u0441\u0442\u0432\u043e \u043f\u043e\u0432\u0442\u043e\u0440\u044f\u044e\u0449\u0438\u0445\u0441\u044f \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432, \u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u043c\u043e\u0433\u043b\u043e \u0431\u044b \u0438 \u043d\u0435 \u0431\u044b\u0442\u044c (\u043f\u0440\u0430\u0432\u0430\u044f \u0447\u0430\u0441\u0442\u044c \u0441\u043f\u0438\u0441\u043a\u043e\u0432 \u043f\u043e\u0434 \u043f\u043e\u0434\u0437\u0430\u0433\u043e\u043b\u043e\u0432\u043a\u0430\u043c\u0438 Subtitles, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043c\u0435\u0448\u0430\u044e\u0442 \u0432\u043e\u0441\u043f\u0440\u0438\u044f\u0442\u0438\u044e)<\/p>\n<\/li>\n<li>\n<p>\u043a\u0430\u0440\u0442\u043e\u0447\u043a\u0438 \u0437\u0430\u043d\u0438\u043c\u0430\u044e\u0442 \u043c\u043d\u043e\u0433\u043e \u043c\u0435\u0441\u0442\u0430: \u043d\u0430 \u044d\u043a\u0440\u0430\u043d\u0435 \u043c\u043e\u0431\u0438\u043b\u044c\u043d\u043e\u0433\u043e \u0443\u0441\u0442\u0440\u043e\u0439\u0441\u0442\u0432\u0430 \u0432\u0438\u0434\u043d\u043e \u043e\u0447\u0435\u043d\u044c \u043d\u0435\u043c\u043d\u043e\u0433\u043e \u043a\u0430\u0440\u0442\u043e\u0447\u0435\u043a \u0431\u0435\u0437 \u0441\u043a\u0440\u043e\u043b\u043b\u0430 \u2014 \u0434\u0432\u0435, \u043c\u0430\u043a\u0441\u0438\u043c\u0443\u043c \u0442\u0440\u0438; \u0447\u0442\u043e\u0431\u044b \u043e\u0437\u043d\u0430\u043a\u043e\u043c\u0438\u0442\u044c\u0441\u044f \u0441\u043e \u0432\u0441\u0435\u0439 \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u0435\u0439, \u043d\u0443\u0436\u043d\u043e \u043f\u0440\u043e\u043b\u0438\u0441\u0442\u044b\u0432\u0430\u0442\u044c \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443 \u0432\u0432\u0435\u0440\u0445 \u0438\u043b\u0438 \u0432\u043d\u0438\u0437<\/p>\n<\/li>\n<li>\n<p>\u0441\u0430\u043c\u043e\u0435 \u0433\u043b\u0430\u0432\u043d\u043e\u0435 \u2014 \u0442\u0435\u0440\u044f\u0435\u0442\u0441\u044f \u0443\u043d\u0438\u043a\u0430\u043b\u044c\u043d\u043e\u0435 \u043f\u0440\u0435\u0438\u043c\u0443\u0449\u0435\u0441\u0442\u0432\u043e \u0442\u0430\u0431\u043b\u0438\u0446 \u2014 \u0430\u043d\u0430\u043b\u0438\u0437, <strong>\u0421\u0420\u0410\u0412\u041d\u0415\u041d\u0418\u0415<\/strong> \u0434\u0430\u043d\u043d\u044b\u0445, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0431\u044b\u043b\u0438 \u0434\u043e \u044d\u0442\u043e\u0433\u043e \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u044b \u0432 \u044f\u0447\u0435\u0439\u043a\u0430\u0445 \u043a\u043e\u043c\u043f\u0430\u043a\u0442\u043d\u043e, <strong>\u0440\u044f\u0434\u043e\u043c \u0434\u0440\u0443\u0433 \u0441 \u0434\u0440\u0443\u0433\u043e\u043c<\/strong><\/p>\n<\/li>\n<\/ul>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/0c9\/705\/7ac\/0c97057ac6f6f285ca3d61f4160cdbb1.png\" alt=\"\u0420\u0435\u0430\u043b\u044c\u043d\u044b\u0439 \u043f\u0440\u0438\u043c\u0435\u0440 \u00ab\u043a\u0430\u0440\u0442\u043e\u0447\u043d\u043e\u0433\u043e \u043f\u043e\u0434\u0445\u043e\u0434\u0430\u00bb \u2014 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0430 \u043a\u043e\u043d\u0444\u0438\u0433\u0443\u0440\u0430\u0442\u043e\u0440\u0430 Mercedes \u043c\u043e\u0434\u0435\u043b\u0438 C-\u043a\u043b\u0430\u0441\u0441\u0430 (https:\/\/www.mercedes-benz.co.uk\/passengercars\/mercedes-benz-cars\/car-configurator.html\/motorization\/CCci\/GB\/en\/C-KLASSE\/LIMOUSINE). \u0412 \u043f\u043e\u043b\u043d\u043e\u044d\u043a\u0440\u0430\u043d\u043d\u043e\u043c \u0440\u0435\u0436\u0438\u043c\u0435 \u043d\u0430 \u0431\u043e\u043b\u044c\u0448\u043e\u043c \u043c\u043e\u043d\u0438\u0442\u043e\u0440\u0435 \u043f\u043e\u043b\u043d\u043e\u0441\u0442\u044c\u044e \u0432\u0438\u0434\u043d\u044b \u0442\u043e\u043b\u044c\u043a\u043e 6 \u043a\u0430\u0440\u0442\u043e\u0447\u0435\u043a, \u043d\u0430 \u044d\u043a\u0440\u0430\u043d \u043c\u043e\u0431\u0438\u043b\u044c\u043d\u043e\u0433\u043e \u0442\u0435\u043b\u0435\u0444\u043e\u043d\u0430 \u0441 \u0442\u0440\u0443\u0434\u043e\u043c \u0437\u0430 \u043e\u0434\u0438\u043d \u0440\u0430\u0437 \u043f\u043e\u043c\u0435\u0449\u0430\u044e\u0442\u0441\u044f \u0442\u043e\u043b\u044c\u043a\u043e \u0434\u0432\u0435. \u0410 \u0432\u0441\u0435\u0433\u043e \u0438\u0445 19!\" title=\"\u0420\u0435\u0430\u043b\u044c\u043d\u044b\u0439 \u043f\u0440\u0438\u043c\u0435\u0440 \u00ab\u043a\u0430\u0440\u0442\u043e\u0447\u043d\u043e\u0433\u043e \u043f\u043e\u0434\u0445\u043e\u0434\u0430\u00bb \u2014 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0430 \u043a\u043e\u043d\u0444\u0438\u0433\u0443\u0440\u0430\u0442\u043e\u0440\u0430 Mercedes \u043c\u043e\u0434\u0435\u043b\u0438 C-\u043a\u043b\u0430\u0441\u0441\u0430 (https:\/\/www.mercedes-benz.co.uk\/passengercars\/mercedes-benz-cars\/car-configurator.html\/motorization\/CCci\/GB\/en\/C-KLASSE\/LIMOUSINE). \u0412 \u043f\u043e\u043b\u043d\u043e\u044d\u043a\u0440\u0430\u043d\u043d\u043e\u043c \u0440\u0435\u0436\u0438\u043c\u0435 \u043d\u0430 \u0431\u043e\u043b\u044c\u0448\u043e\u043c \u043c\u043e\u043d\u0438\u0442\u043e\u0440\u0435 \u043f\u043e\u043b\u043d\u043e\u0441\u0442\u044c\u044e \u0432\u0438\u0434\u043d\u044b \u0442\u043e\u043b\u044c\u043a\u043e 6 \u043a\u0430\u0440\u0442\u043e\u0447\u0435\u043a, \u043d\u0430 \u044d\u043a\u0440\u0430\u043d \u043c\u043e\u0431\u0438\u043b\u044c\u043d\u043e\u0433\u043e \u0442\u0435\u043b\u0435\u0444\u043e\u043d\u0430 \u0441 \u0442\u0440\u0443\u0434\u043e\u043c \u0437\u0430 \u043e\u0434\u0438\u043d \u0440\u0430\u0437 \u043f\u043e\u043c\u0435\u0449\u0430\u044e\u0442\u0441\u044f \u0442\u043e\u043b\u044c\u043a\u043e \u0434\u0432\u0435. \u0410 \u0432\u0441\u0435\u0433\u043e \u0438\u0445 19!\" width=\"2594\" height=\"1508\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/0c9\/705\/7ac\/0c97057ac6f6f285ca3d61f4160cdbb1.png\"\/><figcaption>\u0420\u0435\u0430\u043b\u044c\u043d\u044b\u0439 \u043f\u0440\u0438\u043c\u0435\u0440 \u00ab\u043a\u0430\u0440\u0442\u043e\u0447\u043d\u043e\u0433\u043e \u043f\u043e\u0434\u0445\u043e\u0434\u0430\u00bb \u2014 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0430 \u043a\u043e\u043d\u0444\u0438\u0433\u0443\u0440\u0430\u0442\u043e\u0440\u0430 Mercedes \u043c\u043e\u0434\u0435\u043b\u0438 C-\u043a\u043b\u0430\u0441\u0441\u0430 (https:\/\/www.mercedes-benz.co.uk\/passengercars\/mercedes-benz-cars\/car-configurator.html\/motorization\/CCci\/GB\/en\/C-KLASSE\/LIMOUSINE). \u0412 \u043f\u043e\u043b\u043d\u043e\u044d\u043a\u0440\u0430\u043d\u043d\u043e\u043c \u0440\u0435\u0436\u0438\u043c\u0435 \u043d\u0430 \u0431\u043e\u043b\u044c\u0448\u043e\u043c \u043c\u043e\u043d\u0438\u0442\u043e\u0440\u0435 \u043f\u043e\u043b\u043d\u043e\u0441\u0442\u044c\u044e \u0432\u0438\u0434\u043d\u044b \u0442\u043e\u043b\u044c\u043a\u043e 6 \u043a\u0430\u0440\u0442\u043e\u0447\u0435\u043a, \u043d\u0430 \u044d\u043a\u0440\u0430\u043d \u043c\u043e\u0431\u0438\u043b\u044c\u043d\u043e\u0433\u043e \u0442\u0435\u043b\u0435\u0444\u043e\u043d\u0430 \u0441 \u0442\u0440\u0443\u0434\u043e\u043c \u0437\u0430 \u043e\u0434\u0438\u043d \u0440\u0430\u0437 \u043f\u043e\u043c\u0435\u0449\u0430\u044e\u0442\u0441\u044f \u0442\u043e\u043b\u044c\u043a\u043e \u0434\u0432\u0435. \u0410 \u0432\u0441\u0435\u0433\u043e \u0438\u0445 19!<\/figcaption><\/figure>\n<h2>\u0427\u0442\u043e \u0434\u0435\u043b\u0430\u0442\u044c \u0441 \u0442\u0430\u0431\u043b\u0438\u0446\u0430\u043c\u0438 \u043d\u0430 \u043c\u0430\u043b\u0435\u043d\u044c\u043a\u0438\u0445 \u044d\u043a\u0440\u0430\u043d\u0430\u0445?<\/h2>\n<p>\u0415\u0441\u0442\u044c \u043e\u0434\u0438\u043d \u043f\u043e\u0434\u0445\u043e\u0434 \u043a \u0442\u0430\u0431\u043b\u0438\u0446\u0430\u043c, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043c\u043d\u0435 \u043d\u0440\u0430\u0432\u0438\u0442\u0441\u044f. \u0421\u043a\u043e\u0440\u0435\u0435 \u0432\u0441\u0435\u0433\u043e \u043a\u0442\u043e-\u043d\u0438\u0431\u0443\u0434\u044c \u044d\u0442\u043e \u043f\u0440\u0438\u0434\u0443\u043c\u0430\u043b \u0434\u0430\u0432\u043d\u044b\u043c-\u0434\u0430\u0432\u043d\u043e, \u0438 \u044f \u201c\u0438\u0437\u043e\u0431\u0440\u0435\u043b \u0432\u0435\u043b\u043e\u0441\u0438\u043f\u0435\u0434\u201d, \u043f\u0440\u043e\u0441\u0442\u043e \u043d\u0435 \u0432\u0438\u0434\u0435\u043b \u0442\u0430\u043a\u043e\u0433\u043e \u0432\u043e\u043f\u043b\u043e\u0449\u0435\u043d\u0438\u044f \u0430\u0434\u0430\u043f\u0442\u0438\u0432\u043d\u043e\u0439 \u0432\u0435\u0440\u0441\u0442\u043a\u0438 \u0442\u0430\u0431\u043b\u0438\u0446. \u0421\u043c\u044b\u0441\u043b \u043f\u043e\u0434\u0445\u043e\u0434\u0430 \u0437\u0430\u043a\u043b\u044e\u0447\u0430\u0435\u0442\u0441\u044f \u0432 \u0442\u043e\u043c, \u0447\u0442\u043e \u043d\u0430 \u0448\u0438\u0440\u043e\u043a\u0438\u0445 \u044d\u043a\u0440\u0430\u043d\u0430\u0445 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u0432\u0438\u0434\u0438\u0442 \u043a\u043b\u0430\u0441\u0441\u0438\u0447\u0435\u0441\u043a\u0443\u044e \u0442\u0430\u0431\u043b\u0438\u0446\u0443, \u0430 \u043d\u0430 \u0443\u0437\u043a\u0438\u0445 \u2014 \u0437\u0430\u0433\u043e\u043b\u043e\u0432\u043a\u0438 (\u0438 \u043f\u043e\u0434\u0437\u0430\u0433\u043e\u043b\u043e\u0432\u043a\u0438) \u0441\u0442\u0440\u043e\u043a \u0442\u0440\u0430\u043d\u0441\u0444\u043e\u0440\u043c\u0438\u0440\u0443\u044e\u0442\u0441\u044f \u0432 \u044d\u0434\u0430\u043a\u0438\u0435 \u201c\u043f\u043e\u0434\u0448\u0430\u043f\u043a\u0438\u201d \u0442\u0430\u0431\u043b\u0438\u0446\u044b.<\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/c1a\/edd\/fbb\/c1aeddfbb6dc97d4d53a295ebd822b8a.png\" alt=\"\u0412 \u0441\u043b\u0443\u0447\u0430\u0435, \u043a\u043e\u0433\u0434\u0430 \u0437\u0430\u0433\u043e\u043b\u043e\u0432\u043a\u0438 \u0438 \u043f\u043e\u0434\u0437\u0430\u0433\u043e\u043b\u043e\u0432\u043a\u0438 \u0441\u0442\u0440\u043e\u043a \u0432 \u043c\u043e\u0431\u0438\u043b\u044c\u043d\u043e\u043c \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0438 \u0441\u0442\u0430\u043d\u043e\u0432\u044f\u0442\u0441\u044f \u00ab\u043f\u043e\u0434\u0448\u0430\u043f\u043a\u0430\u043c\u0438\u00bb \u0442\u0430\u0431\u043b\u0438\u0446\u044b, \u0432\u0441\u0435 \u043f\u0440\u0435\u0438\u043c\u0443\u0449\u0435\u0441\u0442\u0432\u0430 \u0442\u0430\u0431\u043b\u0438\u0446\u044b \u0441\u043e\u0445\u0440\u0430\u043d\u044f\u044e\u0442\u0441\u044f, \u0438 \u043c\u0430\u043b\u0435\u043d\u044c\u043a\u0438\u0439 \u0440\u0430\u0437\u043c\u0435\u0440 \u044d\u043a\u0440\u0430\u043d\u0430 \u043c\u043e\u0431\u0438\u043b\u044c\u043d\u043e\u0433\u043e \u0443\u0441\u0442\u0440\u043e\u0439\u0441\u0442\u0432\u0430 \u044d\u0442\u043e\u043c\u0443 \u043d\u0435 \u043f\u043e\u043c\u0435\u0445\u0430\" title=\"\u0412 \u0441\u043b\u0443\u0447\u0430\u0435, \u043a\u043e\u0433\u0434\u0430 \u0437\u0430\u0433\u043e\u043b\u043e\u0432\u043a\u0438 \u0438 \u043f\u043e\u0434\u0437\u0430\u0433\u043e\u043b\u043e\u0432\u043a\u0438 \u0441\u0442\u0440\u043e\u043a \u0432 \u043c\u043e\u0431\u0438\u043b\u044c\u043d\u043e\u043c \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0438 \u0441\u0442\u0430\u043d\u043e\u0432\u044f\u0442\u0441\u044f \u00ab\u043f\u043e\u0434\u0448\u0430\u043f\u043a\u0430\u043c\u0438\u00bb \u0442\u0430\u0431\u043b\u0438\u0446\u044b, \u0432\u0441\u0435 \u043f\u0440\u0435\u0438\u043c\u0443\u0449\u0435\u0441\u0442\u0432\u0430 \u0442\u0430\u0431\u043b\u0438\u0446\u044b \u0441\u043e\u0445\u0440\u0430\u043d\u044f\u044e\u0442\u0441\u044f, \u0438 \u043c\u0430\u043b\u0435\u043d\u044c\u043a\u0438\u0439 \u0440\u0430\u0437\u043c\u0435\u0440 \u044d\u043a\u0440\u0430\u043d\u0430 \u043c\u043e\u0431\u0438\u043b\u044c\u043d\u043e\u0433\u043e \u0443\u0441\u0442\u0440\u043e\u0439\u0441\u0442\u0432\u0430 \u044d\u0442\u043e\u043c\u0443 \u043d\u0435 \u043f\u043e\u043c\u0435\u0445\u0430\" width=\"2594\" height=\"1508\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/c1a\/edd\/fbb\/c1aeddfbb6dc97d4d53a295ebd822b8a.png\"\/><figcaption>\u0412 \u0441\u043b\u0443\u0447\u0430\u0435, \u043a\u043e\u0433\u0434\u0430 \u0437\u0430\u0433\u043e\u043b\u043e\u0432\u043a\u0438 \u0438 \u043f\u043e\u0434\u0437\u0430\u0433\u043e\u043b\u043e\u0432\u043a\u0438 \u0441\u0442\u0440\u043e\u043a \u0432 \u043c\u043e\u0431\u0438\u043b\u044c\u043d\u043e\u043c \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0438 \u0441\u0442\u0430\u043d\u043e\u0432\u044f\u0442\u0441\u044f \u00ab\u043f\u043e\u0434\u0448\u0430\u043f\u043a\u0430\u043c\u0438\u00bb \u0442\u0430\u0431\u043b\u0438\u0446\u044b, \u0432\u0441\u0435 \u043f\u0440\u0435\u0438\u043c\u0443\u0449\u0435\u0441\u0442\u0432\u0430 \u0442\u0430\u0431\u043b\u0438\u0446\u044b \u0441\u043e\u0445\u0440\u0430\u043d\u044f\u044e\u0442\u0441\u044f, \u0438 \u043c\u0430\u043b\u0435\u043d\u044c\u043a\u0438\u0439 \u0440\u0430\u0437\u043c\u0435\u0440 \u044d\u043a\u0440\u0430\u043d\u0430 \u043c\u043e\u0431\u0438\u043b\u044c\u043d\u043e\u0433\u043e \u0443\u0441\u0442\u0440\u043e\u0439\u0441\u0442\u0432\u0430 \u044d\u0442\u043e\u043c\u0443 \u043d\u0435 \u043f\u043e\u043c\u0435\u0445\u0430<\/figcaption><\/figure>\n<p>\u0414\u043e\u0432\u043e\u043b\u044c\u043d\u043e \u0442\u0435\u043e\u0440\u0438\u0438 \u0438 \u043f\u0440\u0438\u0434\u0443\u043c\u0430\u043d\u043d\u044b\u0445 \u043a\u0430\u0440\u0442\u0438\u043d\u043e\u043a, \u043f\u0435\u0440\u0435\u0439\u0434\u0435\u043c \u043a \u0440\u0435\u0430\u043b\u044c\u043d\u044b\u043c \u043f\u0440\u0438\u043c\u0435\u0440\u0430\u043c. \u0418, \u0435\u0441\u043b\u0438 \u0432\u0434\u0440\u0443\u0433 \u0438\u0445 \u043c\u043e\u0436\u043d\u043e \u0443\u043b\u0443\u0447\u0448\u0438\u0442\u044c \u2014 \u043f\u043e\u043f\u0440\u043e\u0431\u0443\u0435\u043c \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u044d\u0442\u043e, \u0437\u0430\u043e\u0434\u043d\u043e \u043f\u043e\u0442\u0440\u0435\u043d\u0438\u0440\u0443\u044f\u0441\u044c \u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c \u0432 \u043c\u043e\u0435\u043c \u043b\u044e\u0431\u0438\u043c\u043e\u043c vue.js.<\/p>\n<h2>Forward to the Past, \u0438\u043b\u0438 \u0447\u0442\u043e \u0431\u0443\u0434\u0435\u043c \u0443\u043b\u0443\u0447\u0448\u0430\u0442\u044c<\/h2>\n<p>\u0411\u043b\u0430\u0433\u043e\u0434\u0430\u0440\u044f \u0413\u0435\u043d\u0440\u0438 \u0424\u043e\u0440\u0434\u0443 \u0438 \u0435\u0433\u043e \u043f\u0435\u0440\u0432\u043e\u0439 \u043a\u043e\u043d\u0432\u0435\u0439\u0435\u0440\u043d\u043e\u0439 \u043b\u0438\u043d\u0438\u0438, \u0441\u043e\u0437\u0434\u0430\u043d\u043d\u043e\u0439 \u0432 1913 \u0433\u043e\u0434\u0443, \u0432 \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0441\u0442\u0432\u0435 \u043f\u0440\u0430\u043a\u0442\u0438\u0447\u0435\u0441\u043a\u0438 \u0432\u0441\u0435\u0445 \u0442\u043e\u0432\u0430\u0440\u043e\u0432 \u043f\u043e\u044f\u0432\u0438\u043b\u0441\u044f \u043a\u043e\u043d\u0432\u0435\u0439\u0435\u0440. \u041f\u043e\u0434\u0445\u043e\u0434 \u0422\u043e\u0439\u043e\u0442\u044b \u043a \u043e\u0440\u0433\u0430\u043d\u0438\u0437\u0430\u0446\u0438\u0438 \u043f\u0440\u043e\u0446\u0435\u0441\u0441\u0430 \u2014 \u043a\u0430\u043d\u0431\u0430\u043d (1959 \u0433\u043e\u0434) \u2014 \u0441\u0442\u0430\u043b \u043e\u0441\u043d\u043e\u0432\u043e\u0439 \u0434\u043b\u044f agile-\u043c\u0435\u0442\u043e\u0434\u043e\u043b\u043e\u0433\u0438\u0438, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u043e\u0447\u0435\u043d\u044c \u043f\u043e\u043f\u0443\u043b\u044f\u0440\u043d\u0430 \u0432 IT-\u0438\u043d\u0434\u0443\u0441\u0442\u0440\u0438\u0438. \u0410\u0432\u0442\u043e\u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u0435\u043b\u0438 \u0432\u0441\u0435\u0433\u0434\u0430 \u0441\u0442\u0440\u0435\u043c\u0438\u043b\u0438\u0441\u044c \u0431\u044b\u0442\u044c \u043f\u0435\u0440\u0432\u043e\u043e\u0442\u043a\u0440\u044b\u0432\u0430\u0442\u0435\u043b\u044f\u043c\u0438 \u0432\u043e \u043c\u043d\u043e\u0433\u0438\u0445 \u0441\u0444\u0435\u0440\u0430\u0445 (\u0435\u0449\u0435 \u043e\u0434\u0438\u043d \u043f\u043e\u043a\u0430\u0437\u0430\u0442\u0435\u043b\u044c\u043d\u044b\u0439 \u043f\u0440\u0438\u043c\u0435\u0440 \u0437\u0430\u0431\u044b\u043b \u2014 product placement \u0441 \u00ab\u0411\u043e\u043d\u0434\u0438\u0430\u0434\u043e\u0439\u00bb \u0432 \u043a\u0438\u043d\u043e). \u041d\u0443 \u0438\u043b\u0438 \u0445\u043e\u0442\u044f \u0431\u044b \u0431\u0440\u0430\u043b\u0438 \u043d\u0430 \u0432\u043e\u043e\u0440\u0443\u0436\u0435\u043d\u0438\u0435 \u043f\u0435\u0440\u0435\u0434\u043e\u0432\u044b\u0435 \u0442\u0435\u0445\u043d\u043e\u043b\u043e\u0433\u0438\u0438. \u041f\u0440\u0435\u0434\u043b\u0430\u0433\u0430\u044e \u0432 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u043f\u0440\u0438\u043c\u0435\u0440\u0430 \u0440\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u0435\u0442\u044c \u0442\u043e, \u0447\u0442\u043e \u043d\u0430\u043c \u043f\u0440\u0435\u0434\u043b\u0430\u0433\u0430\u044e\u0442 \u0430\u0432\u0442\u043e\u043c\u043e\u0431\u0438\u043b\u044c\u043d\u044b\u0435 \u0431\u0440\u0435\u043d\u0434\u044b \u0432 \u0438\u043d\u0442\u0435\u0440\u043d\u0435\u0442\u0435 <em>(\u043f\u0440\u0438\u043c\u0435\u0447\u0430\u043d\u0438\u0435\u00a0\u2014 \u0441\u00a0\u0440\u043e\u0441\u0441\u0438\u0439\u0441\u043a\u0438\u043c \u0430\u0432\u0442\u043e\u0431\u0438\u0437\u043d\u0435\u0441\u043e\u043c \u0441\u0435\u0439\u0447\u0430\u0441, \u043c\u044f\u0433\u043a\u043e \u0433\u043e\u0432\u043e\u0440\u044f&#8230; <\/em>\u201c<em>\u0432\u0441\u0435  \u043d\u0435\u00a0\u0442\u0430\u043a \u043e\u0434\u043d\u043e\u0437\u043d\u0430\u0447\u043d\u043e<\/em>\u201d<em>, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u043f\u0440\u0438\u043c\u0435\u0440\u044b \u044f\u00a0\u0438\u0441\u043a\u0430\u043b \u043d\u0430\u00a0\u0441\u0430\u0439\u0442\u0430\u0445 .uk, \u043f\u043e\u0442\u043e\u043c\u0443 \u0447\u0442\u043e  \u0442\u0430\u043c \u0430\u043d\u0433\u043b\u0438\u0439\u0441\u043a\u0438\u0439 \u044f\u0437\u044b\u043a)<\/em>  <\/p>\n<p>\u041f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u0438\u043c, \u0447\u0442\u043e \u043c\u044b \u0445\u043e\u0442\u0438\u043c \u043a\u0443\u043f\u0438\u0442\u044c \u043d\u043e\u0432\u044b\u0439 \u0430\u0432\u0442\u043e\u043c\u043e\u0431\u0438\u043b\u044c. \u041c\u044b \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0438\u043b\u0438\u0441\u044c \u0441 \u043c\u0430\u0440\u043a\u043e\u0439, \u043c\u043e\u0434\u0435\u043b\u044c\u044e, \u0438 \u0434\u0430\u0436\u0435 \u043f\u0440\u0438\u043c\u0435\u0440\u043d\u043e \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u043c \u0447\u0435\u043c \u043e\u0442\u043b\u0438\u0447\u0430\u044e\u0442\u0441\u044f \u0432\u0435\u0440\u0441\u0438\u0438, \u0432 \u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u044d\u0442\u0430 \u043c\u043e\u0434\u0435\u043b\u044c \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u0441\u044f. \u041c\u044b \u043f\u043e\u043d\u0438\u043c\u0430\u0435\u043c, \u0434\u0432\u0438\u0433\u0430\u0442\u0435\u043b\u044c \u043a\u0430\u043a\u043e\u0439 \u043c\u043e\u0449\u043d\u043e\u0441\u0442\u0438 \u0438 \u043e\u0431\u044a\u0435\u043c\u0430 \u043d\u0430\u0441 \u0443\u0441\u0442\u0440\u0430\u0438\u0432\u0430\u0435\u0442, \u0438 \u043a\u0430\u043a\u043e\u0433\u043e \u0442\u0438\u043f\u0430 \u043a\u043e\u0440\u043e\u0431\u043a\u0443 \u043f\u0435\u0440\u0435\u0434\u0430\u0447 \u043c\u044b \u0445\u043e\u0442\u0438\u043c. \u041d\u0430\u0448\u0435 \u0436\u0435\u043b\u0430\u043d\u0438\u0435 \u2014 <strong>\u041f\u0420\u0418\u0426\u0415\u041d\u0418\u0422\u042c\u0421\u042f<\/strong>, \u0442.\u0435. \u043f\u043e\u043d\u044f\u0442\u044c \u0440\u0430\u0437\u0431\u0440\u043e\u0441 \u0446\u0435\u043d \u0432 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438 \u043e\u0442 \u043f\u0435\u0440\u0435\u0447\u0438\u0441\u043b\u0435\u043d\u043d\u044b\u0445 \u0432\u044b\u0448\u0435 \u0443\u0441\u043b\u043e\u0432\u0438\u0439. \u0423 \u0432\u0441\u0435\u0445 \u0430\u0432\u0442\u043e\u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u0435\u043b\u0435\u0439 \u0435\u0441\u0442\u044c \u043a\u043e\u043d\u0444\u0438\u0433\u0443\u0440\u0430\u0442\u043e\u0440\u044b, \u043d\u043e, \u0447\u0442\u043e\u0431\u044b \u043f\u043e\u043d\u044f\u0442\u044c, \u043d\u0430\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u043e\u0442\u043b\u0438\u0447\u0430\u0435\u0442\u0441\u044f \u0446\u0435\u043d\u0430, \u0432 \u044d\u0442\u0438\u0445 \u043a\u043e\u043d\u0444\u0438\u0433\u0443\u0440\u0430\u0442\u043e\u0440\u0430\u0445 \u043d\u0443\u0436\u043d\u043e \u0441\u043e\u0432\u0435\u0440\u0448\u0430\u0442\u044c \u043c\u043d\u043e\u0436\u0435\u0441\u0442\u0432\u043e \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0439, \u043f\u0435\u0440\u0435\u0445\u043e\u0434\u0438\u0442\u044c \u043f\u043e \u0448\u0430\u0433\u0430\u043c\/\u044d\u0442\u0430\u043f\u0430\u043c \u0438 \u043f\u0440. \u0427\u0442\u043e\u0431\u044b \u043f\u0440\u0438\u0446\u0435\u043d\u0438\u0442\u044c\u0441\u044f, \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0438\u0442\u044c \u043f\u043e\u0440\u044f\u0434\u043e\u043a \u0446\u0435\u043d, \u0435\u0441\u0442\u044c \u043e\u0434\u0438\u043d \u0434\u0435\u0439\u0441\u0442\u0432\u0435\u043d\u043d\u044b\u0439 \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442 \u2014 \u043f\u0440\u0430\u0439\u0441-\u043b\u0438\u0441\u0442. \u041f\u043e\u043f\u0440\u043e\u0431\u0443\u0435\u043c \u043d\u0430\u0439\u0442\u0438 \u0435\u0433\u043e \u043d\u0430 \u0441\u0430\u0439\u0442\u0430\u0445 \u0438 \u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0435\u0442\u044c, \u043c\u043e\u0436\u043d\u043e \u043b\u0438 \u0435\u0433\u043e \u043a\u0430\u043a-\u0442\u043e \u0443\u043b\u0443\u0447\u0448\u0438\u0442\u044c.<\/p>\n<p>\u041d\u0430\u0447\u0430\u0442\u044c \u044f \u0440\u0435\u0448\u0438\u043b \u0441 Volkswagen Passat, \u043f\u043e\u0442\u043e\u043c\u0443 \u0447\u0442\u043e \u043a\u043e\u0433\u0434\u0430-\u0442\u043e \u0435\u0437\u0434\u0438\u043b \u043d\u0430 \u0442\u0430\u043a\u043e\u0439 \u043c\u0430\u0448\u0438\u043d\u0435. \u041d\u043e \u043d\u0430 \u0430\u043d\u0433\u043b\u0438\u0439\u0441\u043a\u043e\u043c \u043e\u0444. \u0441\u0430\u0439\u0442\u0435 \u044d\u0442\u043e\u0433\u043e \u0431\u0440\u0435\u043d\u0434\u0430 \u044f \u0432\u043e\u043e\u0431\u0449\u0435 \u043d\u0435 \u0443\u0432\u0438\u0434\u0435\u043b \u043f\u0440\u0430\u0439\u0441-\u043b\u0438\u0441\u0442\u043e\u0432! \u041e\u043a, \u043d\u043e\u0432\u044b\u0439 Passat \u043f\u0440\u043e\u0435\u043a\u0442\u0438\u0440\u0443\u0435\u0442 \u0434\u0438\u0437\u0430\u0439\u043d-\u043a\u043e\u043c\u0430\u043d\u0434\u0430 Skoda, \u0440\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u0438\u043c \u00ab\u043c\u043b\u0430\u0434\u0448\u0435\u0433\u043e \u0431\u0440\u0430\u0442\u0430\u00bb \u0438\u0437 \u0427\u0435\u0445\u0438\u0438 \u2014 Superb. \u0414\u043b\u044f \u0441\u0440\u0430\u0432\u043d\u0435\u043d\u0438\u044f \u0440\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u0438\u043c \u0430\u043c\u0435\u0440\u0438\u043a\u0430\u043d\u0441\u043a\u0443\u044e \u0430\u043b\u044c\u0442\u0435\u0440\u043d\u0430\u0442\u0438\u0432\u0443 \u2014 Ford Mondeo, \u0438 \u044f\u043f\u043e\u043d\u0441\u043a\u0443\u044e \u2014 Toyota Corolla. \u041f\u0440\u0430\u0439\u0441-\u043b\u0438\u0441\u0442\u044b \u0434\u043b\u044f \u044d\u0442\u0438\u0445 \u043c\u043e\u0434\u0435\u043b\u0435\u0439 \u043d\u0430 \u0430\u043d\u0433\u043b\u0438\u0439\u0441\u043a\u0438\u0445 \u0441\u0430\u0439\u0442\u0430\u0445 \u043d\u0430\u0448\u043b\u0438\u0441\u044c, \u043d\u043e! \u2014 \u0432\u0441\u0435 \u043e\u043d\u0438 \u043f\u043e\u0447\u0435\u043c\u0443-\u0442\u043e \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u044b \u0432 \u0444\u043e\u0440\u043c\u0430\u0442\u0435 pdf.<\/p>\n<figure class=\"bordered full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/d15\/46b\/aa3\/d1546baa39c34eb2f6aee25712b8d1cf.png\" alt=\"\u0414\u0432\u0435 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b (21-\u044f \u0438 22-\u044f) pdf-\u0444\u0430\u0439\u043b\u0430 (https:\/\/www.skoda.co.uk\/_doc\/71165c49-62c5-4f74-b29a-be6ad40d7373), \u043d\u0430 \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0432\u0435\u0434\u0435\u0442 \u0441\u0441\u044b\u043b\u043a\u0430 \u00abBROCHURE &amp; PRICELIST\u00bb \u0441\u043e \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b https:\/\/www.skoda.co.uk\/new-cars\/superb\/hatch-se\" title=\"\u0414\u0432\u0435 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b (21-\u044f \u0438 22-\u044f) pdf-\u0444\u0430\u0439\u043b\u0430 (https:\/\/www.skoda.co.uk\/_doc\/71165c49-62c5-4f74-b29a-be6ad40d7373), \u043d\u0430 \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0432\u0435\u0434\u0435\u0442 \u0441\u0441\u044b\u043b\u043a\u0430 \u00abBROCHURE &amp; PRICELIST\u00bb \u0441\u043e \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b https:\/\/www.skoda.co.uk\/new-cars\/superb\/hatch-se\" width=\"1237\" height=\"928\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/d15\/46b\/aa3\/d1546baa39c34eb2f6aee25712b8d1cf.png\"\/><figcaption>\u0414\u0432\u0435 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b (21-\u044f \u0438 22-\u044f) pdf-\u0444\u0430\u0439\u043b\u0430 (https:\/\/www.skoda.co.uk\/_doc\/71165c49-62c5-4f74-b29a-be6ad40d7373), \u043d\u0430 \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0432\u0435\u0434\u0435\u0442 \u0441\u0441\u044b\u043b\u043a\u0430 \u00abBROCHURE &amp; PRICELIST\u00bb \u0441\u043e \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b https:\/\/www.skoda.co.uk\/new-cars\/superb\/hatch-se<\/figcaption><\/figure>\n<figure class=\"bordered full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/fed\/190\/94c\/fed19094c6e380ff972d62f97d26cf6e.png\" width=\"1237\" height=\"928\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/fed\/190\/94c\/fed19094c6e380ff972d62f97d26cf6e.png\"\/><figcaption><\/figcaption><\/figure>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/866\/ed6\/161\/866ed61612381cae78b3fcaaee9c4308.png\" alt=\"\u0414\u0432\u0435 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b (8-\u044f \u0438 9-\u044f) pdf-\u0444\u0430\u0439\u043b\u0430 (https:\/\/s3-eu-west-1.amazonaws.com\/liveassets.toyotaretail.co.uk\/price-list\/010791_VPL_CVPL_JUNE_68_PAGES.pdf#page=8), \u043d\u0430 \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0432\u0435\u0434\u0435\u0442 \u0441\u0441\u044b\u043b\u043a\u0430 \u201cView Brochure\u201d \u0441\u043e \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b https:\/\/www.toyota.co.uk\/new-cars\/corolla-hatchback\" title=\"\u0414\u0432\u0435 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b (8-\u044f \u0438 9-\u044f) pdf-\u0444\u0430\u0439\u043b\u0430 (https:\/\/s3-eu-west-1.amazonaws.com\/liveassets.toyotaretail.co.uk\/price-list\/010791_VPL_CVPL_JUNE_68_PAGES.pdf#page=8), \u043d\u0430 \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0432\u0435\u0434\u0435\u0442 \u0441\u0441\u044b\u043b\u043a\u0430 \u201cView Brochure\u201d \u0441\u043e \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b https:\/\/www.toyota.co.uk\/new-cars\/corolla-hatchback\" width=\"1237\" height=\"928\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/866\/ed6\/161\/866ed61612381cae78b3fcaaee9c4308.png\"\/><figcaption>\u0414\u0432\u0435 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b (8-\u044f \u0438 9-\u044f) pdf-\u0444\u0430\u0439\u043b\u0430 (https:\/\/s3-eu-west-1.amazonaws.com\/liveassets.toyotaretail.co.uk\/price-list\/010791_VPL_CVPL_JUNE_68_PAGES.pdf#page=8), \u043d\u0430 \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0432\u0435\u0434\u0435\u0442 \u0441\u0441\u044b\u043b\u043a\u0430 \u201cView Brochure\u201d \u0441\u043e \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b https:\/\/www.toyota.co.uk\/new-cars\/corolla-hatchback<\/figcaption><\/figure>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/2b7\/b71\/61e\/2b7b7161e8e8a2d015919730030b7882.png\" width=\"1237\" height=\"928\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/2b7\/b71\/61e\/2b7b7161e8e8a2d015919730030b7882.png\"\/><figcaption><\/figcaption><\/figure>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/a85\/6a9\/7cf\/a856a97cf6e376b0ef8efd97ed921cde.png\" alt=\"4-\u044f \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0430 \u043f\u0440\u0430\u0439\u0441-\u043b\u0438\u0441\u0442\u0430 \u0438\u0437 pdf-\u0444\u0430\u0439\u043b\u0430 https:\/\/www.ford.co.uk\/content\/dam\/guxeu\/uk\/documents\/price-list\/cars\/PL-Mondeo_2019.pdf, \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u043e\u0433\u043e \u043f\u043e \u0441\u0441\u044b\u043b\u043a\u0435 \u201cBrochures &amp; Price Lists\u201d \u0441\u043e \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b https:\/\/www.ford.co.uk\/cars\/mondeo\" title=\"4-\u044f \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0430 \u043f\u0440\u0430\u0439\u0441-\u043b\u0438\u0441\u0442\u0430 \u0438\u0437 pdf-\u0444\u0430\u0439\u043b\u0430 https:\/\/www.ford.co.uk\/content\/dam\/guxeu\/uk\/documents\/price-list\/cars\/PL-Mondeo_2019.pdf, \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u043e\u0433\u043e \u043f\u043e \u0441\u0441\u044b\u043b\u043a\u0435 \u201cBrochures &amp; Price Lists\u201d \u0441\u043e \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b https:\/\/www.ford.co.uk\/cars\/mondeo\" width=\"1237\" height=\"928\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/a85\/6a9\/7cf\/a856a97cf6e376b0ef8efd97ed921cde.png\"\/><figcaption>4-\u044f \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0430 \u043f\u0440\u0430\u0439\u0441-\u043b\u0438\u0441\u0442\u0430 \u0438\u0437 pdf-\u0444\u0430\u0439\u043b\u0430 https:\/\/www.ford.co.uk\/content\/dam\/guxeu\/uk\/documents\/price-list\/cars\/PL-Mondeo_2019.pdf, \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u043e\u0433\u043e \u043f\u043e \u0441\u0441\u044b\u043b\u043a\u0435 \u201cBrochures &amp; Price Lists\u201d \u0441\u043e \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b https:\/\/www.ford.co.uk\/cars\/mondeo<\/figcaption><\/figure>\n<p> \u042f\u00a0\u043d\u0435\u00a0\u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u044f\u044e, \u043a\u0430\u043a \u044d\u0442\u0438 pdf-\u043f\u0440\u0430\u0439\u0441\u044b \u0438\u0437\u0443\u0447\u0430\u0442\u044c \u043d\u0430\u00a0\u044d\u043a\u0440\u0430\u043d\u0435 \u043c\u043e\u0431\u0438\u043b\u044c\u043d\u043e\u0433\u043e  \u0442\u0435\u043b\u0435\u0444\u043e\u043d\u0430 \u0441\u00a0\u0448\u0438\u0440\u0438\u043d\u043e\u0439 &lt;10\u00a0\u0441\u043c. \u041c\u0430\u043b\u043e \u0442\u043e\u0433\u043e, \u0434\u0430\u0436\u0435 \u0435\u0441\u043b\u0438 \u0440\u0430\u0441\u043f\u0435\u0447\u0430\u0442\u0430\u0442\u044c  \u0438\u0445\u00a0\u043d\u0430\u00a0\u0431\u043e\u043b\u044c\u0448\u043e\u043c \u043b\u0438\u0441\u0442\u0435 \u0431\u0443\u043c\u0430\u0433\u0435, \u043c\u043e\u0436\u043d\u043e \u0437\u0430\u043c\u0435\u0442\u0438\u0442\u044c, \u0447\u0442\u043e \u0441\u0434\u0435\u043b\u0430\u043d\u044b \u044d\u0442\u0438 \u0442\u0430\u0431\u043b\u0438\u0446\u044b  \u0441\u043e\u0432\u0441\u0435\u043c \u043d\u0435\u00a0\u0438\u0434\u0435\u0430\u043b\u044c\u043d\u043e. \u041f\u043e\u043f\u0440\u043e\u0431\u0443\u0435\u043c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0441\u043e\u0432\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0435 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0438 \u0432\u0435\u0431\u0430.  \u0410\u00a0\u0432\u00a0\u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u0440\u0430\u0431\u043e\u0447\u0435\u0433\u043e \u043f\u0440\u0438\u043c\u0435\u0440\u0430 \u044f\u00a0\u0432\u043e\u0437\u044c\u043c\u0443 Ford, \u043e\u0442\u0434\u0430\u0432 \u0442\u0430\u043a\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c \u0434\u0430\u043d\u044c  \u0431\u043b\u0430\u0433\u043e\u0434\u0430\u0440\u043d\u043e\u0441\u0442\u0438 \u043e\u0441\u043d\u043e\u0432\u0430\u0442\u0435\u043b\u044e \u043a\u043e\u043c\u043f\u0430\u043d\u0438\u0438 \u0437\u0430\u00a0\u0435\u0433\u043e \u0437\u0430\u043c\u0435\u0447\u0430\u0442\u0435\u043b\u044c\u043d\u0443\u044e \u043a\u043d\u0438\u0433\u0443 \u201c\u041c\u043e\u044f \u0436\u0438\u0437\u043d\u044c, \u043c\u043e\u0438 \u0434\u043e\u0441\u0442\u0438\u0436\u0435\u043d\u0438\u044f\u201d (\u0440\u0435\u043a\u043e\u043c\u0435\u043d\u0434\u0443\u044e \u043a\u00a0\u043f\u0440\u043e\u0447\u0442\u0435\u043d\u0438\u044e).<\/p>\n<h2>\u0427\u0435\u043c \u043c\u0435\u043d\u044c\u0448\u0435 \u0442\u0430\u0431\u043b\u0438\u0446\u0430, \u0442\u0435\u043c \u043b\u0443\u0447\u0448\u0435<\/h2>\n<p> \u041f\u043e\u00a0\u0432\u0441\u0435\u043c \u043f\u0440\u0430\u0439\u0441 \u043b\u0438\u0441\u0442\u0430\u043c \u0432\u0438\u0434\u043d\u043e, \u0447\u0442\u043e \u0442\u0430\u043c \u0441\u043b\u0438\u0448\u043a\u043e\u043c \u043c\u043d\u043e\u0433\u043e \u0434\u0430\u043d\u043d\u044b\u0445. \u0412\u00a0\u043f\u0435\u0440\u0432\u0443\u044e  \u043e\u0447\u0435\u0440\u0435\u0434\u044c\u00a0\u2014 \u044d\u0442\u043e \u043f\u0440\u0430\u0439\u0441-\u043b\u0438\u0441\u0442\u044b, \u0437\u0430\u0434\u0430\u0447\u0430 \u0442\u0430\u0431\u043b\u0438\u0446\u00a0\u2014 \u0434\u0430\u0442\u044c <strong>\u0441\u0440\u0430\u0432\u043d\u0435\u043d\u0438\u0435 \u0446\u0435\u043d<\/strong>. \u041e\u0431\u043b\u0435\u0433\u0447\u0438\u043c  \u044d\u0442\u0443 \u0437\u0430\u0434\u0430\u0447\u0443, \u0443\u0431\u0440\u0430\u0432 \u043d\u0435\u00a0\u043e\u0441\u043e\u0431\u043e \u0432\u0430\u0436\u043d\u0443\u044e \u0434\u043b\u044f \u043d\u0430\u0448\u0435\u0439 \u0446\u0435\u043b\u0438 \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u044e:<\/p>\n<ul>\n<li>\n<p>\u043f\u0440\u0438\u043c\u0435\u0447\u0430\u043d\u0438\u0435 \u043a \u201cCO\u2082 Emissions\u201d \u0433\u043b\u0430\u0441\u0438\u0442 <em>\u00ab&#8230;\u042d\u0442\u0438 \u0446\u0438\u0444\u0440\u044b \u043c\u043e\u0433\u0443\u0442 \u043d\u0435 \u043e\u0442\u0440\u0430\u0436\u0430\u0442\u044c \u0440\u0435\u0430\u043b\u044c\u043d\u044b\u0435 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u044b \u0432\u043e\u0436\u0434\u0435\u043d\u0438\u044f&#8230; \u0414\u043b\u044f \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u0438\u044f \u0434\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0439 \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u0438&#8230; \u043e\u0431\u0440\u0430\u0442\u0438\u0442\u0435\u0441\u044c \u043a \u043d\u0430\u0448\u0435\u043c\u0443 \u0440\u0430\u0437\u0434\u0435\u043b\u0443 \u201e\u0422\u043e\u043f\u043b\u0438\u0432\u043e \u0438 \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u044c\u201c.\u00bb<\/em> \u0420\u0430\u0437 \u044d\u0442\u043e \u0435\u0441\u0442\u044c \u0432 \u0434\u0440\u0443\u0433\u043e\u043c \u0440\u0430\u0437\u0434\u0435\u043b\u0435 \u0438 \u043d\u0435 \u043e\u0442\u043d\u043e\u0441\u0438\u0442\u0441\u044f \u043a \u0441\u0442\u043e\u0438\u043c\u043e\u0441\u0442\u0438 \u2014 \u0443\u0431\u0438\u0440\u0430\u0435\u043c \u0441\u0442\u043e\u043b\u0431\u0435\u0446<\/p>\n<\/li>\n<li>\n<p> \u043f\u0440\u0438\u043c\u0435\u0447\u0430\u043d\u0438\u044f \u043a\u00a0\u0441\u0442\u043e\u043b\u0431\u0446\u0430\u043c \u201cMonthly BIK\u201d\u00a0\u2014 \u201c<em>\u043d\u0435\u00a0\u0434\u043b\u044f \u0447\u0430\u0441\u0442\u043d\u044b\u0445 \u043f\u043e\u043a\u0443\u043f\u0430\u0442\u0435\u043b\u0435\u0439<\/em>\u201d, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u0442\u043e\u0436\u0435 \u0438\u0445\u00a0\u0443\u0431\u0438\u0440\u0430\u0435\u043c<\/p>\n<\/li>\n<\/ul>\n<p>\u0412 \u043e\u0442\u043b\u0438\u0447\u0438\u0435 \u043e\u0442 pdf-\u0444\u043e\u0440\u043c\u0430\u0442\u0430, \u043f\u0440\u0435\u0434\u043d\u0430\u0437\u043d\u0430\u0447\u0435\u043d\u043d\u043e\u0433\u043e \u0434\u043b\u044f \u043f\u0435\u0447\u0430\u0442\u0438 (\u044f \u0432\u043e\u043e\u0431\u0449\u0435 \u043f\u043e\u0440\u0430\u0436\u0430\u044e\u0441\u044c, \u0437\u0430\u0447\u0435\u043c \u0432 21 \u0432\u0435\u043a\u0435 \u044d\u0442\u043e\u0442 \u0444\u043e\u0440\u043c\u0430\u0442 \u0434\u043e \u0441\u0438\u0445 \u043f\u043e\u0440 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u0432 \u0441\u0430\u0439\u0442\u043e\u0441\u0442\u0440\u043e\u0435\u043d\u0438\u0438), \u043d\u0430 \u0432\u0435\u0431-\u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0435 \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0438\u043d\u0442\u0435\u0440\u0430\u043a\u0442\u0438\u0432\u043d\u043e\u0441\u0442\u044c, \u0447\u0442\u043e \u043f\u043e\u0437\u0432\u043e\u043b\u0438\u0442 \u043d\u0430\u043c \u0441\u0443\u0449\u0435\u0441\u0442\u0432\u0435\u043d\u043d\u043e \u0441\u043e\u043a\u0440\u0430\u0442\u0438\u0442\u044c \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u044f\u0447\u0435\u0435\u043a.<\/p>\n<ul>\n<li>\n<p>\u0440\u0430\u0437\u0434\u0435\u043b\u0438\u043c \u0434\u0430\u043d\u043d\u044b\u0435 \u043f\u043e \u043a\u0430\u0442\u0435\u0433\u043e\u0440\u0438\u044f\u043c Bodystyle. \u041d\u0435 \u0441\u043e\u0432\u0441\u0435\u043c \u043f\u043e\u043d\u044f\u0442\u043d\u044b\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u201c4 door\u201d \u0438 \u201c5 door\u201d \u0437\u0430\u043c\u0435\u043d\u0438\u043c \u043d\u0430 \u201cSaloon\u201d \u0438 \u201cHatchback\u201d \u0438\u0437 \u0442\u043e\u0439 \u0436\u0435 \u0431\u0440\u043e\u0448\u044e\u0440\u044b, \u0438\u0442\u043e\u0433\u043e\u0432\u044b\u0435 \u043a\u0430\u0442\u0435\u0433\u043e\u0440\u0438\u0438 \u0431\u0443\u0434\u0443\u0442 [\u2018Saloon \/ Hatchback\u2019, \u2018Estate\u2019]<\/p>\n<\/li>\n<li>\n<p> \u0432\u00a0\u043a\u0430\u0436\u0434\u043e\u0439 \u043a\u0430\u0442\u0435\u0433\u043e\u0440\u0438\u0438 \u0441\u0434\u0435\u043b\u0430\u0435\u043c \u0438\u043d\u0442\u0435\u0440\u0430\u043a\u0442\u0438\u0432\u043d\u044b\u0439 \u0432\u044b\u0431\u043e\u0440 \u201cPrice: [\u2018Basic Retail\u2019, \u2018incl. Vat\u2019, \u2019+ Manufacturers\u2019]\u201d<\/p>\n<\/li>\n<\/ul>\n<p>\u0418 \u043d\u0435\u043c\u043d\u043e\u0433\u043e \u043f\u0435\u0440\u0435\u0444\u043e\u0440\u043c\u0430\u0442\u0438\u0440\u0443\u0435\u043c \u0442\u0430\u0431\u043b\u0438\u0446\u0443:<\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/05c\/aa1\/108\/05caa1108cecec7d886981bca96dd2ab.png\" alt=\"\u0414\u043b\u044f \u0438\u043d\u0442\u0435\u0440\u0430\u043a\u0442\u0438\u0432\u043d\u044b\u0445 \u0432\u044b\u0431\u043e\u0440\u043e\u0432 \u00abBody: Saloon \/ Hatchback\u00bb \u0438 \u00abPrice: Basic Retail\u00bb \u0442\u0430\u0431\u043b\u0438\u0446\u0430 \u0432 \u043a\u043b\u0430\u0441\u0441\u0438\u0447\u0435\u0441\u043a\u043e\u043c \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u0438\u0438 \u043c\u043e\u0436\u0435\u0442 \u0432\u044b\u0433\u043b\u044f\u0434\u0435\u0442\u044c \u0442\u0430\u043a\" title=\"\u0414\u043b\u044f \u0438\u043d\u0442\u0435\u0440\u0430\u043a\u0442\u0438\u0432\u043d\u044b\u0445 \u0432\u044b\u0431\u043e\u0440\u043e\u0432 \u00abBody: Saloon \/ Hatchback\u00bb \u0438 \u00abPrice: Basic Retail\u00bb \u0442\u0430\u0431\u043b\u0438\u0446\u0430 \u0432 \u043a\u043b\u0430\u0441\u0441\u0438\u0447\u0435\u0441\u043a\u043e\u043c \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u0438\u0438 \u043c\u043e\u0436\u0435\u0442 \u0432\u044b\u0433\u043b\u044f\u0434\u0435\u0442\u044c \u0442\u0430\u043a\" width=\"1158\" height=\"223\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/05c\/aa1\/108\/05caa1108cecec7d886981bca96dd2ab.png\"\/><figcaption>\u0414\u043b\u044f \u0438\u043d\u0442\u0435\u0440\u0430\u043a\u0442\u0438\u0432\u043d\u044b\u0445 \u0432\u044b\u0431\u043e\u0440\u043e\u0432 \u00abBody: Saloon \/ Hatchback\u00bb \u0438 \u00abPrice: Basic Retail\u00bb \u0442\u0430\u0431\u043b\u0438\u0446\u0430 \u0432 \u043a\u043b\u0430\u0441\u0441\u0438\u0447\u0435\u0441\u043a\u043e\u043c \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u0438\u0438 \u043c\u043e\u0436\u0435\u0442 \u0432\u044b\u0433\u043b\u044f\u0434\u0435\u0442\u044c \u0442\u0430\u043a<\/figcaption><\/figure>\n<h2>Mobile First \u0438\u043b\u0438 Desktop First? \u0411\u0435\u0437 \u0440\u0430\u0437\u043d\u0438\u0446\u044b!<\/h2>\n<p>\u0423\u00a0\u043c\u043e\u0431\u0438\u043b\u044c\u043d\u044b\u0445 \u0442\u0435\u043b\u0435\u0444\u043e\u043d\u043e\u0432\u00a0\u2014 \u0440\u0430\u0437\u043d\u044b\u0435 \u0440\u0430\u0437\u043c\u0435\u0440\u044b \u044d\u043a\u0440\u0430\u043d\u043e\u0432. \u041f\u043b\u0430\u043d\u0448\u0435\u0442\u044b\u00a0\u2014 \u0442\u043e\u0436\u0435  \u043c\u043e\u0431\u0438\u043b\u044c\u043d\u044b\u0435 \u0443\u0441\u0442\u0440\u043e\u0439\u0441\u0442\u0432\u0430, \u0438\u00a0\u0441\u00a0\u0438\u0445\u00a0\u0443\u0447\u0435\u0442\u043e\u043c \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u0432\u0430\u0440\u0438\u0430\u043d\u0442\u043e\u0432 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u044b\u0445  \u0430\u0434\u0430\u043f\u0442\u0430\u0446\u0438\u0439 \u0441\u0442\u0440\u0435\u043c\u0438\u0442\u0441\u044f \u043a\u00a0\u0431\u0435\u0441\u043a\u043e\u043d\u0435\u0447\u043d\u043e\u0441\u0442\u0438. \u0410\u00a0\u0435\u0441\u043b\u0438 \u0443\u0447\u0438\u0442\u044b\u0432\u0430\u0442\u044c  \u0438\u00a0landscape-\u043e\u0440\u0438\u0435\u043d\u0442\u0430\u0446\u0438\u044e \u043c\u043e\u0431\u0438\u043b\u044c\u043d\u044b\u0445 \u0434\u0435\u0432\u0430\u0439\u0441\u043e\u0432, \u0437\u0430\u043f\u0443\u0442\u0430\u0442\u044c\u0441\u044f \u043c\u043e\u0436\u043d\u043e  \u043e\u043a\u043e\u043d\u0447\u0430\u0442\u0435\u043b\u044c\u043d\u043e. \u041f\u043e\u044d\u0442\u043e\u043c\u0443 \u043c\u043e\u0436\u043d\u043e \u043f\u043e\u0441\u0442\u0443\u043f\u0438\u0442\u044c \u043f\u0440\u043e\u0449\u0435\u00a0\u2014 \u0432\u043e\u043e\u0431\u0449\u0435 \u043d\u0435\u00a0\u043e\u0431\u0440\u0430\u0449\u0430\u0442\u044c \u043d\u0430\u00a0\u044d\u0442\u043e  \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u0435 ? \u0412\u0441\u0451, \u0447\u0442\u043e \u043d\u0430\u0441 \u0438\u043d\u0442\u0435\u0440\u0435\u0441\u0443\u0435\u0442\u00a0\u2014 \u0448\u0438\u0440\u0438\u043d\u0430 \u0442\u0430\u0431\u043b\u0438\u0446\u044b. \u0415\u0441\u043b\u0438 \u0432\u0441\u0435  \u0443\u043c\u0435\u0449\u0430\u0435\u0442\u0441\u044f\u00a0\u2014 \u043d\u0435\u0442 \u043f\u0440\u043e\u0431\u043b\u0435\u043c, \u0435\u0441\u043b\u0438 \u043d\u0435\u00a0\u0443\u043c\u0435\u0449\u0430\u0435\u0442\u0441\u044f\u00a0\u2014 \u0437\u043d\u0430\u0447\u0438\u0442 \u0437\u0430\u0433\u043e\u043b\u043e\u0432\u043a\u0438 \u0441\u0442\u0440\u043e\u043a  \u0432\u044b\u043d\u043e\u0441\u0438\u043c \u0432\u00a0\u043e\u0442\u0434\u0435\u043b\u044c\u043d\u044b\u0435 \u0441\u0442\u0440\u043e\u043a\u0438.<\/p>\n<h2>\u041f\u043e\u0434\u0433\u043e\u0442\u043e\u0432\u043a\u0430 \u043a \u0440\u0430\u0431\u043e\u0442\u0435, Vue.js<\/h2>\n<p>\u042f \u0431\u0443\u0434\u0443 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u043f\u043e\u0441\u043b\u0435\u0434\u043d\u044e\u044e \u0432\u0435\u0440\u0441\u0438\u044e Vue.js (3 \u043d\u0430 \u043c\u043e\u043c\u0435\u043d\u0442 \u043d\u0430\u043f\u0438\u0441\u0430\u043d\u0438\u044f \u0441\u0442\u0430\u0442\u044c\u0438) \u0438 \u043f\u043e\u044d\u0442\u0430\u043f\u043d\u043e \u043f\u043e\u043a\u0430\u0436\u0443 \u0438 \u0440\u0430\u0441\u0441\u043a\u0430\u0436\u0443, \u0447\u0442\u043e \u0431\u0443\u0434\u0443 \u0434\u0435\u043b\u0430\u0442\u044c. \u0412\u0435\u0441\u044c \u043a\u043e\u0434 \u0438 \u043a\u043e\u043c\u043c\u0438\u0442\u044b, \u043e\u043f\u0438\u0441\u0430\u043d\u043d\u044b\u0435 \u0437\u0434\u0435\u0441\u044c, \u043c\u043e\u0436\u043d\u043e \u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0435\u0442\u044c \u043d\u0430 <a href=\"https:\/\/github.com\/v-khakimov\/table-adaptive-article\" rel=\"noopener noreferrer nofollow\">Github<\/a>.<\/p>\n<p>\u0421\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u043f\u0440\u043e\u0435\u043a\u0442 \u0441\u043e\u0433\u043b\u0430\u0441\u043d\u043e <a href=\"https:\/\/vuejs.org\/guide\/quick-start.html#local\" rel=\"noopener noreferrer nofollow\">\u0438\u0441\u0442\u0440\u0443\u043a\u0446\u0438\u0438<\/a> \u0441\u00a0\u0441\u0430\u0439\u0442\u0430 Vue.js. \u041e\u0442\u0432\u0435\u0442\u044b \u00abYes\u00bb\u00a0\u2014 \u0442\u043e\u043b\u044c\u043a\u043e \u0432\u00a0\u0432\u043e\u043f\u0440\u043e\u0441\u0430\u0445 \u00abAdd ESLint for code quality?\u00bb \u0438\u00a0\u00abAdd Prettier for code formatting?\u00bb. \u041d\u0430\u0441\u0442\u0440\u043e\u044e \u043f\u0440\u043e\u0435\u043a\u0442 \u0442\u0430\u043a, \u043a\u0430\u043a \u043c\u043d\u0435 \u0443\u0434\u043e\u0431\u043d\u043e.<\/p>\n<pre><code class=\"javascript\">\/\/ vite.config.js, \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u0432\u043d\u0443\u0442\u0440\u044c export default defineConfig({}) \/\/ \u044d\u0442\u043e \u043d\u0443\u0436\u043d\u043e \u0434\u043b\u044f CSS-\u043c\u043e\u0434\u0443\u043b\u0435\u0439 css: {   modules: {     root: '.',     localsConvention: 'camelCase',   }, }, \/\/ .eslintrc.cjs, \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u0432\u043d\u0443\u0442\u0440\u044c module.exports {} \/\/ \u0435\u0441\u043b\u0438 \u0432\u0430\u043c \u043d\u0440\u0430\u0432\u044f\u0442\u0441\u044f \u043e\u0434\u0438\u043d\u0430\u0440\u043d\u044b\u0435 \u043a\u0430\u0432\u044b\u0447\u043a\u0438 \u043f\u0440\u0438 \u0444\u043e\u0440\u043c\u0430\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0438 \u0447\u0435\u0440\u0435\u0437 npm run lint rules: {   'prettier\/prettier': ['error', { singleQuote: true }], },<\/code><\/pre>\n<p>\u0414\u043e\u0431\u0430\u0432\u0438\u043c \u043f\u0430\u043f\u043a\u0443 \u201ccss\u201d \u0432 \u201csrc\u201d \u0438 \u0441\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u0442\u0430\u043c \u0434\u0432\u0430 \u0444\u0430\u0439\u043b\u0430 (\u0432\u0441\u0435 \u043f\u0443\u0442\u0438 \u0432 \u043a\u043e\u0434\u0435 \u0434\u0430\u043b\u0435\u0435 \u043e\u0437\u043d\u0430\u0447\u0430\u044e\u0442 \u043d\u0430\u0445\u043e\u0436\u0434\u0435\u043d\u0438\u0435 \u0444\u0430\u0439\u043b\u043e\u0432 \u0432\u043d\u0443\u0442\u0440\u0438 \u043f\u0430\u043f\u043a\u0438 \u201csrc\u201d<\/p>\n<pre><code class=\"javascript\">\/\/ .\/css\/reset.css * {   box-sizing: border-box;   color: inherit;   font-size: 100%;   margin: 0;   padding: 0;   -webkit-tap-highlight-color: rgba(0,0,0,0); } \/\/ .\/css\/font-family.css, \u0441\u043a\u043e\u043f\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 \u0438\u0437 .\/assets\/base.css body {   font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI',     Roboto, Oxygen, Ubuntu, \u0421antarell, 'Fira Sans', 'Droid Sans',     'Helvetica Neue', sans-serif;   text-rendering: optimizeLegibility;   -webkit-font-smoothing: antialiased;   -moz-osx-font-smoothing: grayscale; }<\/code><\/pre>\n<p>\u0423\u0434\u0430\u043b\u044f\u0435\u043c \u0432\u0441\u0451 \u0438\u0437 \u043f\u0430\u043f\u043e\u043a \u201cassets\u201d \u0438 \u201ccomponents\u201d. \u0418\u0437\u043c\u0435\u043d\u044f\u0435\u043c App.vue:<\/p>\n<pre><code class=\"xml\">\/\/ .App.vue &lt;template>   &lt;p>There will be an adaptive table here.&lt;\/p> &lt;\/template>  &lt;style> @import '.\/css\/reset.css'; @import '.\/css\/font-family.css';  #app {padding: 1em 0;} #app, body {min-height: 100%; width: 100%;} &lt;\/style><\/code><\/pre>\n<p>\u041d\u0430\u0431\u0438\u0440\u0430\u0435\u043c \u0432 \u043a\u043e\u043c\u0430\u043d\u0434\u043d\u043e\u0439 \u0441\u0442\u0440\u043e\u043a\u0435 <code>git init<\/code> \u0438 \u0434\u0435\u043b\u0430\u0435\u043c \u043f\u0435\u0440\u0432\u044b\u0439 \u043a\u043e\u043c\u043c\u0438\u0442 \u201cstart project\u201d.<\/p>\n<p>\u0414\u043e\u0431\u0430\u0432\u0438\u043c media queries:  <\/p>\n<pre><code class=\"javascript\">\/\/ .\/css\/media-queries.css \/* Mobile, Portrait *\/ @media (max-aspect-ratio: 6\/5) {   body {     color: rgb(0, 0, 0);     font-size: calc(12 * 100vw \/ 320);   } } \/* Mobile, Landscape *\/ @media (max-width: 1134px) and (min-aspect-ratio: 6\/5) {   body {     color: rgb(0, 0, 1);     font-size: calc(10 * 100vw \/ 480);   } } \/* Desktop *\/ @media (min-width: 1134px) and (min-aspect-ratio: 6\/5) {   body {     color: rgb(0, 1, 0);     font-size: calc(24 * 100vw \/ 1920);   } } \/* Wide (Ultra Wide) Monitors *\/ @media (min-width: 1134px) and (min-aspect-ratio: 5\/2) {   body {     color: rgb(1, 0, 0);     font-size: calc(22 * 100vw \/ 2560);   } }  \/\/ .\/store-variables\/media-queries.js import { computed, ref } from 'vue'; const refMq = ref(''); const checkMq = () => {   const { color } = getComputedStyle(document.body);   let mq;   if (color === 'rgb(0, 0, 0)') mq = 'portrait';   else if (color === 'rgb(0, 0, 1)') mq = 'landscape';   else if (color === 'rgb(1, 0, 0)') mq = 'wide';   else mq = 'desktop';   refMq.value = mq; }; const setMq = () => {   checkMq();   window.addEventListener('resize', checkMq); }; const isMqPortrait = computed(() => refMq.value === 'portrait'); const isMqLandscape = computed(() => refMq.value === 'landscape'); const isMqMobile = computed(() => isMqPortrait.value || isMqLandscape.value); export { isMqPortrait, isMqLandscape, isMqMobile, setMq };<\/code><\/pre>\n<p> \u0412\u00a0\u0444\u0430\u0439\u043b\u0435 \u00abmedia-queries.css\u00bb \u044f\u00a0\u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0438\u043b \u043b\u0435\u0439\u0430\u0443\u0442\u044b (\u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f):<\/p>\n<ul>\n<li>\n<p> Mobile, Portrait<\/p>\n<\/li>\n<li>\n<p> Mobile, Landscape<\/p>\n<\/li>\n<li>\n<p> Desktop<\/p>\n<\/li>\n<li>\n<p> Wide (Ultra Wide \u043c\u043e\u043d\u0438\u0442\u043e\u0440\u044b)<\/p>\n<\/li>\n<\/ul>\n<p> \u0412\u044b\u0440\u0430\u0436\u0435\u043d\u0438\u0435 <code>font-size: calc(24 * 100vw\u00a0\/ 1920);<\/code> \u043e\u0437\u043d\u0430\u0447\u0430\u0435\u0442, \u0447\u0442\u043e \u0432\u00a0\u043f\u0440\u0435\u0434\u0435\u043b\u0430\u0445  \u043e\u0434\u043d\u043e\u0433\u043e \u043b\u0435\u0439\u0430\u0443\u0442\u0430 \u0448\u0440\u0438\u0444\u0442 \u0431\u0443\u0434\u0435\u0442 \u0440\u0430\u0441\u0442\u044f\u0433\u0438\u0432\u0430\u0442\u044c\u0441\u044f \u0432\u00a0\u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438 \u043e\u0442\u00a0\u0448\u0438\u0440\u0438\u043d\u044b \u044d\u043a\u0440\u0430\u043d\u0430,  \u0430\u00a0\u043f\u0440\u0438 \u0448\u0438\u0440\u0438\u043d\u0435 1920px \u0435\u0433\u043e \u0440\u0430\u0437\u043c\u0435\u0440 \u0431\u0443\u0434\u0435\u0442 \u0440\u0430\u0432\u0435\u043d 24px.<\/p>\n<p>\u041e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u0437\u0430\u0434\u0430\u043d\u044b \u0447\u0435\u0440\u0435\u0437 aspect-ratio \u0438\u00a0\u0433\u0440\u0430\u043d\u0438\u0447\u043d\u043e\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 1134px.  \u0421\u043e\u0433\u043b\u0430\u0441\u043d\u043e <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Learn\/CSS\/Building_blocks\/Values_and_units#absolute_length_units\" rel=\"noopener noreferrer nofollow\">Mdn<\/a> \u0442\u0430\u043a\u043e\u0435 \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u043f\u0438\u043a\u0441\u0435\u043b\u0435\u0439 \u0440\u0430\u0432\u043d\u043e 30cm. \u0415\u0441\u043b\u0438 \u0432\u0430\u043c \u043d\u0435\u00a0\u043d\u0440\u0430\u0432\u0438\u0442\u0441\u044f  \u0442\u0430\u043a\u043e\u0435 \u0440\u0430\u0437\u0434\u0435\u043b\u0435\u043d\u0438\u0435\u00a0\u2014 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0439\u0442\u0435 \u0441\u0432\u043e\u0435. \u041a\u0440\u043e\u043c\u0435 \u0442\u043e\u0433\u043e, \u0432\u00a0\u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f\u0445 \u044f\u00a0\u0437\u0430\u0434\u0430\u043b \u0440\u0430\u0437\u043d\u044b\u0435 \u0446\u0432\u0435\u0442\u0430 body. \u042d\u0442\u0430 \u0440\u0430\u0437\u043d\u0438\u0446\u0430  \u043d\u0435\u0440\u0430\u0437\u043b\u0438\u0447\u0438\u043c\u0430 \u0434\u043b\u044f \u0433\u043b\u0430\u0437\u0430, \u043d\u043e\u00a0\u0441\u00a0\u043f\u043e\u043c\u043e\u0449\u044c\u044e \u043d\u0435\u0435 \u043c\u043e\u0436\u043d\u043e \u0432\u00a0\u043b\u044e\u0431\u043e\u0439 \u043c\u043e\u043c\u0435\u043d\u0442 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0438\u0442\u044c,  \u043a\u0430\u043a\u043e\u0439 \u0438\u0437\u00a0\u043b\u0435\u0439\u0430\u0443\u0442\u043e\u0432 \u0432\u00a0\u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0435 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f \u0438\u043d\u0442\u0435\u0440\u043d\u0435\u0442\u0430. \u0427\u0442\u043e \u0438\u00a0\u0434\u0435\u043b\u0430\u0435\u0442 \u0444\u0443\u043d\u043a\u0446\u0438\u044f setMq() \u0432\u00a0\u0444\u0430\u0439\u043b\u0435 \u00abmedia-queries.js\u00bb.<\/p>\n<p>\u0418\u0437\u043c\u0435\u043d\u044f\u0435\u043c App.vue:<\/p>\n<pre><code class=\"xml\">\/\/ .App.vue, \u0432\u0441\u0442\u0430\u0432\u0438\u0442\u044c \u0432 \u043d\u0430\u0447\u0430\u043b\u043e \u0444\u0430\u0439\u043b\u0430 &lt;script setup> import { setMq } from '.\/store-variables\/media-queries';  setMq(); &lt;\/script>  \/\/ \u0432\u0441\u0442\u0430\u0432\u0438\u0442\u044c \u0432\u043d\u0443\u0442\u0440\u044c &lt;style> \u043f\u043e\u0441\u043b\u0435 \u0432\u0441\u0435\u0445 \u0438\u043c\u043f\u043e\u0440\u0442\u043e\u0432 @import '.\/css\/media-queries.css';<\/code><\/pre>\n<p> \u0412\u0441\u0435 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f \u0434\u043e\u00a0\u044d\u0442\u043e\u0433\u043e \u043c\u043e\u043c\u0435\u043d\u0442\u0430\u00a0\u2014 \u0432\u00a0\u043a\u043e\u043c\u043c\u0438\u0442\u0435 \u00abmedia queries\u00bb.<\/p>\n<h2>\u0421\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0430 \u043f\u0440\u043e\u0435\u043a\u0442\u0430 \u0438 \u043d\u0435\u0439\u043c\u0438\u043d\u0433<\/h2>\n<p>\u0412 \u0434\u043e\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u0435 \u043a \u043f\u0430\u043f\u043a\u0435 \u201ccomponents\u201d, \u043a\u043e\u0442\u043e\u0440\u0443\u044e \u0441\u0442\u0430\u0432\u0438\u0442 \u0434\u0435\u0444\u043e\u043b\u0442\u043e\u043c Vue, \u043c\u043d\u0435 \u043d\u0440\u0430\u0432\u0438\u0442\u0441\u044f \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0430\u044f \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0430 \u043f\u0440\u043e\u0435\u043a\u0442\u0430, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0438\u043b\u0430\u0441\u044c \u043e\u043f\u044b\u0442\u043d\u044b\u043c \u043f\u0443\u0442\u0435\u043c:<\/p>\n<ul>\n<li>\n<p>\u201c.\/css\/\u201d  \u2014  \u043f\u0430\u043f\u043a\u0430 \u0434\u043b\u044f \u043e\u0431\u0449\u0438\u0445 css-\u0444\u0430\u0439\u043b\u043e\u0432 \u0438 css-\u043c\u043e\u0434\u0443\u043b\u0435\u0439. \u041c\u043e\u0434\u0443\u043b\u0438 \u043c\u043d\u0435 \u0443\u0434\u043e\u0431\u043d\u043e \u0440\u0430\u0437\u0434\u0435\u043b\u044f\u0442\u044c \u043f\u043e \u043a\u0430\u0442\u0435\u0433\u043e\u0440\u0438\u044f\u043c, \u043f\u043b\u044e\u0441 \u0431\u044b\u0432\u0430\u044e\u0442 \u043c\u043e\u0434\u0443\u043b\u0438 \u0434\u043b\u044f \u043a\u0430\u043a\u0438\u0445-\u0442\u043e \u043a\u043e\u043d\u043a\u0440\u0435\u0442\u043d\u044b\u0445 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 (\u0434\u0430\u043b\u044c\u0448\u0435 \u0431\u0443\u0434\u0435\u0442 \u043f\u043e\u043d\u044f\u0442\u043d\u043e, \u043e \u0447\u0435\u043c \u0440\u0435\u0447\u044c)<\/p>\n<\/li>\n<li>\n<p>\u201c.\/store-variables\/\u201d \u2014 \u043f\u0430\u043f\u043a\u0430 \u0434\u043b\u044f \u0432\u044b\u0447\u0438\u0441\u043b\u044f\u0435\u043c\u044b\u0445 (computed) \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0445 Vue, \u043f\u0440\u0438\u0447\u0435\u043c \u0442\u043e\u043b\u044c\u043a\u043e \u0434\u043b\u044f \u0442\u0435\u0445, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0442\u0441\u044f \u0432 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u0438\u0445 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430\u0445; \u0431\u043b\u0430\u0433\u043e\u0434\u0430\u0440\u044f composition API \u0432 Vue 3 \u0438 \u043f\u043e\u0434\u043e\u0431\u043d\u043e\u0439 \u043f\u0430\u043f\u043a\u0435 \u0433\u043b\u043e\u0431\u0430\u043b\u044c\u043d\u044b\u0435 \u0445\u0440\u0430\u043d\u0438\u043b\u0438\u0449\u0430 \u0434\u0430\u043d\u043d\u044b\u0445 Vuex\/Pinia \u0443\u0436\u0435 \u043d\u0435 \u043e\u0441\u043e\u0431\u043e \u0438 \u043d\u0443\u0436\u043d\u044b<\/p>\n<\/li>\n<li>\n<p>\u201c.\/store-constant\/\u201d \u2014 \u043f\u0430\u043f\u043a\u0430, \u0432 \u043a\u043e\u0442\u043e\u0440\u043e\u0439 \u0441\u043e\u0434\u0435\u0440\u0436\u0430\u0442\u0441\u044f \u043a\u0430\u043a\u0438\u0435-\u0442\u043e \u043f\u043e\u0441\u0442\u043e\u044f\u043d\u043d\u044b\u0435, \u043d\u0435\u0438\u0437\u043c\u0435\u043d\u044f\u0435\u043c\u044b\u0435 \u0434\u0430\u043d\u043d\u044b\u0435<\/p>\n<\/li>\n<li>\n<p>\u201c.\/store-functions\/\u201d \u2014 \u043f\u0430\u043f\u043a\u0430 \u0444\u0443\u043d\u043a\u0446\u0438\u0439, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043c\u043e\u0433\u0443\u0442 \u0431\u044b\u0442\u044c \u043a\u0430\u043a \u043d\u0435\u0437\u0430\u0432\u0438\u0441\u0438\u043c\u044b\u043c\u0438, \u0442\u0430\u043a \u0438 \u0437\u0430\u0434\u0435\u0439\u0441\u0442\u0432\u043e\u0432\u0430\u0442\u044c \u0434\u0430\u043d\u043d\u044b\u0435 \u0438\u0437 \u201cstore-constant\u201d \u0438\u043b\u0438 \u201cstore-variables\u201d<\/p>\n<\/li>\n<\/ul>\n<p>\u041d\u0435\u0439\u043c\u0438\u043d\u0433 \u044f \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e \u0442\u0430\u043a\u043e\u0439:<\/p>\n<ul>\n<li>\n<p><code>domName = ref(null)<\/code> \u2014 \u0435\u0441\u043b\u0438 dom-\u044d\u043b\u0435\u043c\u0435\u043d\u0442<\/p>\n<\/li>\n<li>\n<p><code>refName = ref(\/* \u2026 *\/)<\/code> \u2014 \u0438\u0437\u043c\u0435\u043d\u044f\u0435\u043c\u0430\u044f-vue-\u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u0430\u044f (\u0430\u043d\u0430\u043b\u043e\u0433\u0438\u0447\u043d\u043e reactiveName, \u043d\u043e reactive \u044f \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e \u0440\u0435\u0434\u043a\u043e, ref \u043c\u043d\u0435 \u043d\u0440\u0430\u0432\u044f\u0442\u0441\u044f \u0431\u043e\u043b\u044c\u0448\u0435)<\/p>\n<\/li>\n<li>\n<p><code>getName = computed(() => refName.value)<\/code> \u2014 \u0433\u0435\u0442\u0442\u0435\u0440 \u201crefName\u201d<\/p>\n<\/li>\n<li>\n<p><code>isName<\/code> \u2014 \u0442\u043e\u0436\u0435, \u0447\u0442\u043e \u201cgetName\u201d, \u043d\u043e \u0441 \u0442\u0438\u043f\u043e\u043c Boolean<\/p>\n<\/li>\n<li>\n<p><code>setName()<\/code> \u2014 \u0444\u0443\u043d\u043a\u0446\u0438\u044f, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u0447\u0442\u043e-\u0442\u043e \u0443\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u0435\u0442, \u0432 \u0442.\u0447. \u0438 ref-\u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0435<\/p>\n<\/li>\n<li>\n<p><code>switchName()<\/code> \u2014 \u0441\u0435\u0442\u0442\u0435\u0440 \u0431\u0435\u0437 \u0430\u0440\u0433\u0443\u043c\u0435\u043d\u0442\u0430, \u0435\u0441\u043b\u0438 ref-\u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u0430\u044f \u2014 Boolean<\/p>\n<\/li>\n<li>\n<p><code>seekName()<\/code> \u2014 \u0444\u0443\u043d\u043a\u0446\u0438\u044f, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u0447\u0442\u043e-\u0442\u043e \u0432\u044b\u0447\u0438\u0441\u043b\u044f\u0435\u0442 \u0438 \u043e\u0442\u0434\u0430\u0435\u0442 (\u043f\u043e\u0442\u043e\u043c\u0443 \u0447\u0442\u043e getName \u0443\u0436\u0435 \u0437\u0430\u043d\u044f\u0442\u043e)))<\/p>\n<\/li>\n<li>\n<p><code>CommonName.vue<\/code> \u2014 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442-\u201d\u0447\u0435\u0440\u043d\u044b\u0439 \u044f\u0449\u0438\u043a\u201d, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043c\u043e\u0436\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0432 \u0434\u0440\u0443\u0433\u0438\u0445 \u043f\u0440\u043e\u0435\u043a\u0442\u0430\u0445 (\u0434\u0430\u043b\u044c\u0448\u0435 \u0431\u0443\u0434\u0435\u0442 \u043f\u043e\u043d\u044f\u0442\u043d\u0435\u0435)<\/p>\n<\/li>\n<\/ul>\n<p>\u0415\u0441\u043b\u0438 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u2014 \u0431\u043e\u043b\u044c\u0448\u043e\u0439 (\u043f\u043e \u0440\u0430\u0437\u043c\u0435\u0440\u0443 \u043a\u043e\u0434\u0430), \u0442\u043e \u0434\u043b\u044f \u043d\u0435\u0433\u043e \u0441\u043e\u0437\u0434\u0430\u0435\u0442\u0441\u044f \u043f\u0430\u043f\u043a\u0430 \u0432 \u201ccomponents\u201d \u0438 \u043e\u043d \u043f\u0435\u0440\u0435\u0435\u0437\u0436\u0430\u0435\u0442 \u0442\u0443\u0434\u0430, \u043d\u0430 \u0443\u0440\u043e\u0432\u0435\u043d\u044c \u043d\u0438\u0436\u0435.<\/p>\n<p>\u201cst\u201d \u2014 CSS-\u0441\u0442\u0438\u043b\u0438, \u201ccl\u201d \u2014 CSS-\u043a\u043b\u0430\u0441\u0441\u044b, \u201cbt\u201d, \u201cbr\u201d, \u201cbb\u201d, \u201cbl\u201d \u2014 \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0435\u043d\u043d\u043e border-[top\/right\/bottom\/left], \u0442\u0430\u043a\u0436\u0435 \u201cpt\u201d \u0438 \u0442.\u0434., \u201cmt\u201d \u0438 \u0442.\u0434. \u2014 padding-top \u0438 \u0434\u0430\u043b\u0435\u0435, margin-top \u0438 \u0434\u0430\u043b\u0435\u0435. \u041e\u0442\u0441\u0442\u0443\u043f\u044b (\u0438 \u043f\u0430\u0434\u0434\u0438\u043d\u0433\u0438, \u0438 \u043c\u0430\u0440\u0433\u0438\u043d\u044b) \u0441\u043e\u043e\u0442\u043d\u043e\u0441\u044f\u0442\u0441\u044f \u0441 \u0437\u0430\u0434\u0430\u043d\u043d\u044b\u043c\u0438 \u0432 root \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f\u043c\u0438:<\/p>\n<pre><code class=\"css\">:root {   --gap: 0.5em;   --gap-twice: 1em; } .pt {padding-top: var(--gap);} .pr2 {padding-right: var(--gap-twice);}<\/code><\/pre>\n<p>\u042f \u0441\u043e\u043a\u0440\u0430\u0449\u0430\u044e \u0438 \u0434\u0440\u0443\u0433\u0438\u0435 \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u044f CSS-\u0441\u0432\u043e\u0439\u0441\u0442\u0432, \u043d\u043e \u0438\u0445 \u043e\u043f\u0438\u0441\u044b\u0432\u0430\u0442\u044c \u043d\u0435 \u0431\u0443\u0434\u0443 \u2014 \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u044f \u043f\u043e\u043d\u044f\u0442\u043d\u044b \u0438\u0437 \u043a\u043e\u043d\u0442\u0435\u043a\u0441\u0442\u0430.<\/p>\n<h2>CSS-\u043c\u043e\u0434\u0443\u043b\u0438<\/h2>\n<p>\u041d\u0430\u043c \u043d\u0443\u0436\u043d\u043e \u0440\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u0442\u044c \u0438\u043d\u0442\u0435\u0440\u0430\u043a\u0442\u0438\u0432\u043d\u044b\u0439 \u0432\u044b\u0431\u043e\u0440 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f. \u042f \u0441\u043a\u043e\u043f\u0438\u0440\u043e\u0432\u0430\u043b \u0434\u0430\u043d\u043d\u044b\u0435 \u0438\u0437 \u043f\u0440\u0430\u0439\u0441-\u043b\u0438\u0441\u0442\u0430, \u0441\u043b\u0435\u0433\u043a\u0430 \u0438\u0445 \u043f\u0440\u0435\u043e\u0431\u0440\u0430\u0437\u043e\u0432\u0430\u043b \u0438 \u0441\u043e\u0445\u0440\u0430\u043d\u0438\u043b \u0432 \u0444\u0430\u0439\u043b \u201c.\/store-constant\/table-data.js\u201d. \u0424\u0430\u0439\u043b \u043c\u043e\u0436\u043d\u043e \u0441\u043a\u0430\u0447\u0430\u0442\u044c \u0438\u0437 \u043a\u043e\u043c\u043c\u0438\u0442\u0430 \u201c<a href=\"https:\/\/github.com\/v-khakimov\/table-adaptive-article\/commit\/1dfde16d5fb84f364d95bd9b6d2f07bc9c8c66eb?short_path=b335630#diff-b335630551682c19a781afebcf4d07bf978fb1f8ac04c6bf87428ed5106870f5\" rel=\"noopener noreferrer nofollow\">table-data<\/a>\u201d.<\/p>\n<p>\u0427\u0442\u043e\u0431\u044b \u043d\u0435 \u043f\u0435\u0440\u0435\u0433\u0440\u0443\u0436\u0430\u0442\u044c \u0433\u043b\u0430\u0432\u043d\u044b\u0439 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 App.vue, \u0441\u043e\u0437\u0434\u0430\u0434\u0438\u043c ButtonsForTable.vue \u0438 \u043d\u0430\u043f\u0438\u0448\u0435\u043c \u0432 \u043d\u0435\u043c \u043a\u043e\u0434, \u043e\u0440\u0438\u0435\u043d\u0442\u0438\u0440\u0443\u044f\u0441\u044c \u043d\u0430 <a href=\"https:\/\/ru.wikipedia.org\/wiki\/%D0%A1%D0%B5%D0%BC%D0%B0%D0%BD%D1%82%D0%B8%D1%87%D0%B5%D1%81%D0%BA%D0%B0%D1%8F_%D0%B2%D1%91%D1%80%D1%81%D1%82%D0%BA%D0%B0\" rel=\"noopener noreferrer nofollow\">\u0441\u0435\u043c\u0430\u043d\u0442\u0438\u0447\u0435\u0441\u043a\u0443\u044e \u0432\u0435\u0440\u0441\u0442\u043a\u0443<\/a>:<\/p>\n<pre><code class=\"xml\">\/\/ .\/components\/ButtonsForTable.vue &lt;script setup> import { headTitles, priceTypeNames } from '..\/store-constant\/table-data';  const bodyTypes = Object.keys(headTitles); const priceTypes = Object.values(priceTypeNames); &lt;\/script>  &lt;template>   &lt;section>     &lt;h5>Body:&lt;\/h5>     &lt;p>{{ bodyTypes }}&lt;\/p>   &lt;\/section>    &lt;section>     &lt;h5>Price:&lt;\/h5>     &lt;p>{{ priceTypes }}&lt;\/p>   &lt;\/section> &lt;\/template><\/code><\/pre>\n<p>\u0418\u043c\u043f\u043e\u0440\u0442\u0438\u0440\u0443\u0435\u043c \u0441\u043e\u0437\u0434\u0430\u043d\u043d\u044b\u0439 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0432 App.vue:<\/p>\n<pre><code class=\"xml\">\/\/ .\/App.vue \/\/ \u0432\u0441\u0442\u0430\u0432\u0438\u0442\u044c \u0432\u043d\u0443\u0442\u0440\u044c &lt;script setup> import ButtonsForTable from '.\/components\/ButtonsForTable.vue';  \/\/ \u0437\u0430\u043c\u0435\u043d\u0438\u0442\u044c &lt;template> &lt;template>   &lt;ButtonsForTable \/> &lt;\/template><\/code><\/pre>\n<p>\u041f\u043e\u0440\u0430\u0431\u043e\u0442\u0430\u0435\u043c \u0441\u043e \u0441\u0442\u0438\u043b\u044f\u043c\u0438. \u0420\u0430\u043d\u044c\u0448\u0435 \u044f \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043b SCSS, \u043d\u043e \u0442\u0435\u043f\u0435\u0440\u044c \u043c\u043d\u0435 \u043d\u0440\u0430\u0432\u044f\u0442\u0441\u044f <a href=\"https:\/\/vuejs.org\/api\/sfc-css-features.html#css-modules\" rel=\"noopener noreferrer nofollow\">CSS-\u043c\u043e\u0434\u0443\u043b\u0438<\/a>. \u0414\u043e\u0431\u0430\u0432\u0438\u043c \u0432 App.vue:<\/p>\n<pre><code class=\"css\">\/\/ .App.vue, \u0432\u0441\u0442\u0430\u0432\u0438\u0442\u044c \u0432\u043d\u0443\u0442\u0440\u044c &lt;style> .flex, #app {display: flex;} .wrap, #app {flex-wrap: wrap;} .ac-start, #app {align-content: flex-start;}<\/code><\/pre>\n<p>\u0421\u043e\u0437\u0434\u0430\u0434\u0438\u043c CSS-\u043c\u043e\u0434\u0443\u043b\u0438:  <\/p>\n<pre><code class=\"css\">\/\/ .\/css\/colors.module.css :root {   --color-grey: #8c8c8c; } .grey {color: var(--color-grey);}  \/\/ .\/css\/flex.module.css .ac-start {composes: ac-start from global;} \/* align-content: flex-start *\/ .ai-center {align-items: center;} .flex {composes: flex from global;} \/* display: flex *\/ .fb100 {flex-basis: 100%;} .fg1 {flex-grow: 1;} .wrap {composes: wrap from global;} \/* flex-wrap: wrap *\/  \/\/ .\/css\/gaps.module.css :root {   --gap: 0.5em;   --gap-twice: 1em; } .pb {padding-bottom: var(--gap);} .pr {padding-right: var(--gap);} .pt {padding-top: var(--gap);} .pl2 {padding-left: var(--gap-twice);} .pr2 {padding-right: var(--gap-twice);}  \/\/ .\/css\/text.module.css .normal {font-weight: normal;}<\/code><\/pre>\n<p>\u0418 \u0438\u0437\u043c\u0435\u043d\u0438\u043c ButtonsForTable.vue:<\/p>\n<pre><code class=\"xml\">\/\/ .\/components\/ButtonsForTable.vue &lt;script setup> import { computed, useCssModule } from 'vue'; import flex from '..\/css\/flex.module.css'; import gaps from '..\/css\/gaps.module.css'; import { headTitles, priceTypeNames } from '..\/store-constant\/table-data'; import { isMqPortrait } from '..\/store-variables\/media-queries';  const bodyTypes = Object.keys(headTitles); const priceTypes = Object.values(priceTypeNames);  const getSectionCl = computed(() => [   isMqPortrait.value ? flex.fb100 : flex.fg1,   flex.flex, flex.aiCenter, gaps.pt, gaps.pb, gaps.pl2, gaps.pr2]);    const styleModule = useCssModule(); const getWillBeButtonCl = computed(() => isMqPortrait.value   ? styleModule.testDesktop : styleModule.testPortrait); &lt;\/script>  &lt;template>   &lt;section :class=\"getSectionCl\">     &lt;h5 :class=\"$style.title\">Body:&lt;\/h5>     &lt;p :class=\"getWillBeButtonCl\">{{ bodyTypes }}&lt;\/p>   &lt;\/section>    &lt;section :class=\"getSectionCl\">     &lt;h5 :class=\"$style.title\">Price:&lt;\/h5>     &lt;p :class=\"getWillBeButtonCl\">{{ priceTypes }}&lt;\/p>   &lt;\/section> &lt;\/template>  &lt;style module> .title {   composes: pr from '..\/css\/gaps.module.css';   composes: normal from '..\/css\/text.module.css';   composes: grey from '..\/css\/colors.module.css'; } .test {   composes: fg1 from '..\/css\/flex.module.css';   text-align: center; } .test-desktop {composes: test; border: 1px solid red;} .test-portrait {composes: test; border: 1px solid blue;} &lt;\/style><\/code><\/pre>\n<p>\u0421\u043c\u044b\u0441\u043b \u0432\u0441\u0435\u0433\u043e \u0441\u0434\u0435\u043b\u0430\u043d\u043d\u043e\u0433\u043e: \u0432\u0441\u0435 CSS-\u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430, \u0437\u0430\u0434\u0435\u0439\u0441\u0442\u0432\u043e\u0432\u0430\u043d\u043d\u044b\u0435 \u0432 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430\u0445, \u0437\u0430\u043f\u0438\u0441\u0430\u043d\u044b \u0432 CSS-\u043c\u043e\u0434\u0443\u043b\u044f\u0445, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0440\u0430\u0437\u0434\u0435\u043b\u0435\u043d\u044b \u043f\u043e \u0443\u0434\u043e\u0431\u043d\u044b\u043c \u043a\u0430\u0442\u0435\u0433\u043e\u0440\u0438\u044f\u043c. \u0415\u0441\u043b\u0438 \u0432 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0435 CSS-\u043a\u043b\u0430\u0441\u0441\u044b \u043a\u0430\u043a\u043e\u0433\u043e-\u043d\u0438\u0431\u0443\u0434\u044c \u0442\u0435\u0433\u0430, \u0440\u0430\u0437\u043c\u0435\u0449\u0435\u043d\u043d\u043e\u0433\u043e \u0432 <code>&lt;template><\/code>  \u2014 \u0434\u0438\u043d\u0430\u043c\u0438\u0447\u0435\u0441\u043a\u0438\u0435 (\u043c\u0435\u043d\u044f\u044e\u0442\u0441\u044f \u0432 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438 \u043e\u0442 \u0447\u0435\u0433\u043e-\u043d\u0438\u0431\u0443\u0434\u044c, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, computed-\u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0445), \u0442\u043e \u044d\u0442\u0438 \u043a\u043b\u0430\u0441\u0441\u044b \u043c\u043e\u0436\u043d\u043e \u0438\u043c\u043f\u043e\u0440\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0432 <code>&lt;script setup><\/code> \u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0438\u0445 \u0432 \u043d\u043e\u0432\u043e\u0439 computed-\u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u043e\u0439. \u0412 \u043d\u0430\u0448\u0435\u043c \u043f\u0440\u0438\u043c\u0435\u0440\u0435 \u043a\u043b\u0430\u0441\u0441\u044b \u0443 \u0442\u0435\u0433\u0430 <code>&lt;section><\/code> \u043c\u0435\u043d\u044f\u044e\u0442\u0441\u044f \u0432 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438 \u043e\u0442 \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f: \u0435\u0441\u043b\u0438 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u0441\u043c\u043e\u0442\u0440\u0438\u0442 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443 \u043d\u0430 Mobile \u0432 Portrait-\u043e\u0440\u0438\u0435\u043d\u0442\u0430\u0446\u0438\u0438, \u0442\u043e <code>&lt;section><\/code> \u0437\u0430\u043d\u0438\u043c\u0430\u0435\u0442 \u0432\u0441\u044e \u0448\u0438\u0440\u0438\u043d\u0443, \u0435\u0441\u043b\u0438 \u043d\u0435\u0442 \u2014 \u0441\u043a\u043e\u043b\u044c\u043a\u043e \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u0441\u044f (\u0441\u043c. <code>getSectionCl<\/code>).<\/p>\n<p>\u0415\u0449\u0435 \u043e\u0434\u0438\u043d \u0441\u043f\u043e\u0441\u043e\u0431 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f CSS-\u043c\u043e\u0434\u0443\u043b\u0435\u0439 \u0432 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430\u0445 \u2014 \u0435\u0441\u043b\u0438 \u043a\u043b\u0430\u0441\u0441\u044b \u043d\u0435 \u043c\u0435\u043d\u044f\u044e\u0442\u0441\u044f. \u0422\u043e\u0433\u0434\u0430 \u0438\u0445 \u043c\u043e\u0436\u043d\u043e \u0441\u0444\u043e\u0440\u043c\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0432 <code>&lt;style module><\/code>, \u0430 \u0432 <code>&lt;template><\/code> \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0447\u0435\u0440\u0435\u0437 <code>:class=\"$style.className\"<\/code>, \u0447\u0442\u043e \u043c\u044b \u0438 \u0441\u0434\u0435\u043b\u0430\u043b\u0438 \u0432 \u0437\u0430\u0433\u043e\u043b\u043e\u0432\u043a\u0430\u0445  <code>&lt;h5><\/code>.<\/p>\n<p>\u041d\u0430\u043a\u043e\u043d\u0435\u0446, \u043a\u043b\u0430\u0441\u0441\u044b \u0438\u0437 <code>&lt;style module><\/code> \u043c\u043e\u0436\u043d\u043e \u0437\u0430\u0434\u0435\u0439\u0441\u0442\u0432\u043e\u0432\u0430\u0442\u044c \u0432 <code>&lt;script setup><\/code> \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e vue-\u043c\u0435\u0442\u043e\u0434\u0430 <code>useCssModule()<\/code>, \u043a\u043e\u0442\u043e\u0440\u044b\u043c \u043c\u044b \u0432\u043e\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043b\u0438\u0441\u044c \u0434\u043b\u044f \u043f\u0435\u0440\u0435\u0434\u0430\u0447\u0438 \u043a\u043b\u0430\u0441\u0441\u043e\u0432 \u0442\u0435\u0433\u0430\u043c <code>&lt;p><\/code>.<\/p>\n<p>\u0421\u0434\u0435\u043b\u0430\u0435\u043c \u043a\u043e\u043c\u043c\u0438\u0442 \u201cCSS modules\u201d. C\u0435\u0439\u0447\u0430\u0441 \u043d\u0430\u0448\u0435 \u0442\u0432\u043e\u0440\u0435\u043d\u0438\u0435 \u0432\u044b\u0433\u043b\u044f\u0434\u0438\u0442 \u0442\u0430\u043a:<\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/a48\/38d\/565\/a4838d565df9119a93860a5b810458c8.png\" width=\"2646\" height=\"250\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/a48\/38d\/565\/a4838d565df9119a93860a5b810458c8.png\"\/><figcaption><\/figcaption><\/figure>\n<p>\u0410 \u0445\u043e\u0442\u0435\u043b\u043e\u0441\u044c \u0431\u044b \u0447\u0442\u043e-\u043d\u0438\u0431\u0443\u0434\u044c \u0442\u0430\u043a\u043e\u0435:<\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/9d7\/304\/62a\/9d730462acc0a2edc1462d993e88b2fd.png\" width=\"1508\" height=\"147\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/9d7\/304\/62a\/9d730462acc0a2edc1462d993e88b2fd.png\"\/><figcaption><\/figcaption><\/figure>\n<p>\u0416\u0435\u043b\u0430\u0435\u043c\u043e\u0435 \u043d\u0435 \u043f\u043e\u0445\u043e\u0436\u0435 \u043d\u0430 \u0441\u0434\u0435\u043b\u0430\u043d\u043d\u043e\u0435, \u0437\u0430\u0442\u043e \u043c\u044b \u0440\u0430\u0437\u043e\u0431\u0440\u0430\u043b\u0438\u0441\u044c \u0441 CSS-\u043c\u043e\u0434\u0443\u043b\u044f\u043c\u0438, \u0438 \u044d\u0442\u043e \u043f\u0440\u0438\u0433\u043e\u0434\u0438\u0442\u0441\u044f \u0432 \u0434\u0430\u043b\u044c\u043d\u0435\u0439\u0448\u0435\u043c.<\/p>\n<h2>\u041a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043d\u043e-\u043e\u0440\u0438\u0435\u043d\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u0439 \u043f\u043e\u0434\u0445\u043e\u0434<\/h2>\n<p>\u0421\u0434\u0435\u043b\u0430\u0435\u043c \u0438\u043d\u0442\u0435\u0440\u0430\u043a\u0442\u0438\u0432\u043d\u044b\u0435 \u0440\u0430\u0434\u0438\u043e-\u043a\u043d\u043e\u043f\u043a\u0438, \u043f\u043e \u043a\u043b\u0438\u043a\u0443 \u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u0432 \u0442\u0430\u0431\u043b\u0438\u0446\u0435 \u0431\u0443\u0434\u0443\u0442 \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u0442\u044c\u0441\u044f \u0442\u0435 \u0438\u043b\u0438 \u0438\u043d\u044b\u0435 \u0434\u0430\u043d\u043d\u044b\u0435. \u041f\u0440\u0438\u0447\u0435\u043c \u043f\u043e\u043f\u0440\u043e\u0431\u0443\u0435\u043c \u043f\u0440\u0438\u043c\u0435\u043d\u0438\u0442\u044c <a href=\"https:\/\/ru.wikipedia.org\/wiki\/%D0%9A%D0%BE%D0%BC%D0%BF%D0%BE%D0%BD%D0%B5%D0%BD%D1%82%D0%BD%D0%BE-%D0%BE%D1%80%D0%B8%D0%B5%D0%BD%D1%82%D0%B8%D1%80%D0%BE%D0%B2%D0%B0%D0%BD%D0%BD%D0%BE%D0%B5_%D0%BF%D1%80%D0%BE%D0%B3%D1%80%D0%B0%D0%BC%D0%BC%D0%B8%D1%80%D0%BE%D0%B2%D0%B0%D0%BD%D0%B8%D0%B5\" rel=\"noopener noreferrer nofollow\">\u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043d\u043e-\u043e\u0440\u0438\u0435\u043d\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u0439 \u043f\u043e\u0434\u0445\u043e\u0434<\/a>.<\/p>\n<p>\u0421\u043c\u044b\u0441\u043b \u044d\u0442\u043e\u0433\u043e \u043f\u043e\u0434\u0445\u043e\u0434\u0430 (\u043a\u0430\u043a \u044f\u00a0\u0435\u0433\u043e \u043f\u043e\u043d\u0438\u043c\u0430\u044e)\u00a0\u2014 \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442, \u043a\u043e\u0442\u043e\u0440\u044b\u0439  \u043c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c \u043f\u043e\u043b\u0435\u0437\u0435\u043d \u0432\u00a0\u0434\u0430\u043b\u044c\u043d\u0435\u0439\u0448\u0435\u043c \u0438\u00a0\u043c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d \u0432\u00a0\u0434\u0440\u0443\u0433\u0438\u0445  \u043f\u0440\u043e\u0435\u043a\u0442\u0430\u0445. \u0421\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0435\u043d\u043d\u043e, \u0432\u00a0\u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0435 \u043d\u0435\u00a0\u043c\u043e\u0433\u0443\u0442 \u0431\u044b\u0442\u044c \u043d\u0430\u043f\u0440\u044f\u043c\u0443\u044e  \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u044b (\u0442.\u0435. \u0438\u043c\u043f\u043e\u0440\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u044b) \u043a\u0430\u043a\u0438\u0435-\u043d\u0438\u0431\u0443\u0434\u044c \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0435 \u0438\u043b\u0438 \u043a\u043e\u043d\u0441\u0442\u0430\u043d\u0442\u044b.  \u0422.\u0435. \u0442\u0430\u043a\u043e\u0439 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u00a0\u2014 \u044d\u0442\u043e \u00ab<a href=\"https:\/\/ru.wikipedia.org\/wiki\/%D0%A7%D1%91%D1%80%D0%BD%D1%8B%D0%B9_%D1%8F%D1%89%D0%B8%D0%BA\" rel=\"noopener noreferrer nofollow\">\u0447\u0435\u0440\u043d\u044b\u0439 \u044f\u0449\u0438\u043a<\/a>\u00bb, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0447\u0442\u043e-\u0442\u043e \u043f\u0440\u0438\u043d\u0438\u043c\u0430\u0435\u0442  \u0438\u00a0\u0447\u0442\u043e-\u0442\u043e \u0432\u044b\u0434\u0430\u0435\u0442, \u0438\u00a0\u0435\u0433\u043e API\u00a0\u2014 \u0442\u043e, \u0447\u0442\u043e \u043e\u043d\u00a0\u043f\u0440\u0438\u043d\u0438\u043c\u0430\u0435\u0442 \u0438\u00a0\u0432\u044b\u0434\u0430\u0435\u0442. \u0412\u00a0vue.js  \u0435\u0441\u0442\u044c \u0434\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u0432\u0441\u0451 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e\u0435\u00a0\u2014 \u0441\u0430\u043c Component.vue, \u0430\u00a0\u0435\u0433\u043e API\u00a0\u2014 \u044d\u0442\u043e  <code>defineProps()<\/code> \u2014 <a href=\"https:\/\/vuejs.org\/guide\/components\/props.html\" rel=\"noopener noreferrer nofollow\">\u0432\u0445\u043e\u0434\u044f\u0449\u0438\u0435 \u0434\u0430\u043d\u043d\u044b\u0435<\/a> \u0438\u00a0<code>defineEmits()<\/code> \u2014 \u0441\u043e\u0432\u0435\u0440\u0448\u0430\u0435\u043c\u044b\u0435 \u044d\u0442\u0438\u043c  \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u043c <a href=\"https:\/\/vuejs.org\/guide\/components\/events.html#emitting-and-listening-to-events\" rel=\"noopener noreferrer nofollow\">\u0441\u043e\u0431\u044b\u0442\u0438\u044f<\/a>, \u0438\u00a0\u043e\u0442\u043f\u0440\u0430\u0432\u043b\u044f\u0435\u043c\u044b\u0435 \u0432\u00a0\u0441\u0432\u044f\u0437\u0438 \u0441\u00a0\u043d\u0438\u043c \u0434\u0430\u043d\u043d\u044b\u0435.<\/p>\n<p>\u041f\u0440\u043e\u0434\u0443\u043c\u0430\u0435\u043c API \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 \u0441 \u043f\u0435\u0440\u0435\u043a\u043b\u044e\u0447\u0430\u0435\u043c\u044b\u043c\u0438 \u043a\u043d\u043e\u043f\u043a\u0430\u043c\u0438. \u041d\u0443\u0436\u043d\u044b \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u044f \u043a\u043d\u043e\u043f\u043e\u043a, \u043d\u0443\u0436\u043d\u043e \u0437\u043d\u0430\u0442\u044c, \u043a\u0430\u043a\u0430\u044f \u0438\u0437 \u043a\u043d\u043e\u043f\u043e\u043a \u043d\u0430\u0436\u0430\u0442\u0430. \u041a\u0440\u043e\u043c\u0435 \u0442\u043e\u0433\u043e, \u043c\u044b \u0445\u043e\u0442\u0438\u043c, \u0447\u0442\u043e\u0431\u044b \u043a\u043d\u043e\u043f\u043a\u0438 \u043a\u0430\u043a-\u0442\u043e \u0432\u044b\u0433\u043b\u044f\u0434\u0435\u043b\u0438, \u0442.\u0435. \u0443 \u043d\u0438\u0445 \u0434\u043e\u043b\u0436\u043d\u044b \u0431\u044b\u0442\u044c \u043a\u0430\u043a\u0438\u0435-\u0442\u043e \u043a\u043b\u0430\u0441\u0441\u044b, \u043f\u0440\u0438\u0447\u0435\u043c \u043a\u043b\u0430\u0441\u0441\u044b \u043c\u043e\u0433\u0443\u0442 \u0431\u044b\u0442\u044c \u043e\u0434\u0438\u043d\u0430\u043a\u043e\u0432\u044b\u0435 \u0434\u043b\u044f \u0432\u0441\u0435\u0445, \u0430 \u043c\u043e\u0433\u0443\u0442 \u0440\u0430\u0437\u043b\u0438\u0447\u0430\u0442\u044c\u0441\u044f \u0443 \u043d\u0430\u0436\u0430\u0442\u043e\u0439, \u043d\u0435\u043d\u0430\u0436\u0430\u0442\u043e\u0439 \u043a\u043d\u043e\u043f\u043a\u0438 \u0438 \u043f\u0435\u0440\u0432\u043e\u0439 \u043a\u043d\u043e\u043f\u043a\u0438 \u0432 \u0440\u044f\u0434\u0443. \u0421\u043e\u0431\u044b\u0442\u0438\u0435, \u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u043d\u0430\u0441 \u0438\u043d\u0442\u0435\u0440\u0435\u0441\u0443\u0435\u0442 &#8212; \u043a\u043b\u0438\u043a \u043f\u043e \u043d\u0435\u043d\u0430\u0436\u0430\u0442\u043e\u0439 \u043a\u043d\u043e\u043f\u043a\u0435, \u0438 \u043e\u0442\u0434\u0430\u0432\u0430\u0442\u044c \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u0435\u0435 \u043f\u043e\u0440\u044f\u0434\u043a\u043e\u0432\u044b\u0439 \u043d\u043e\u043c\u0435\u0440.<\/p>\n<p>\u0421\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 CommonButtonsRadio.vue:<\/p>\n<pre><code class=\"xml\">\/\/ .\/components\/CommonButtonsRadio.vue &lt;script setup> const props = defineProps({   buttons: Array,   indexSelected: Number,   classes: Object, \/\/ { each, first, selected, unselected }; values - Array || String   \/\/ first, selected, unselected are added to 'each' value }); const emit = defineEmits(['selectButtonIndex']);  const clickToButton = (index) => {   if (index !== props.indexSelected) {     emit('selectButtonIndex', index);   } };  const seekClass = (index) => {   const { each, first, selected, unselected } = props.classes;   const cl = [];   const addCl = (arrayOrString) => {     if (typeof arrayOrString === 'string') {       cl.push(arrayOrString);     } else {       cl.push(...arrayOrString);     }   };   if (each) addCl(each);   if (index === props.indexSelected) {     if (selected) addCl(selected);   } else if (unselected) addCl(unselected);   if (first &amp;&amp; !index) addCl(first);   return cl; }; &lt;\/script>  &lt;template>   &lt;p     v-for=\"(name, i) in props.buttons\"     :key=\"`radio-button-${i}`\"     @click=\"clickToButton(i)\"     :class=\"seekClass(i)\"     v-html=\"name\"   >&lt;\/p> &lt;\/template><\/code><\/pre>\n<p>\u0412 <code>&lt;script setup><\/code> \u043c\u044b \u0441\u043d\u0430\u0447\u0430\u043b\u0430 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043b\u0438 API (\u0447\u0435\u0440\u0435\u0437 defineProps \u0438 defineEmits), \u0437\u0430\u0442\u0435\u043c \u0438\u0434\u0435\u0442 \u0444\u0443\u043d\u043a\u0446\u0438\u044f clickToButton(), \u0440\u0435\u0430\u0433\u0438\u0440\u0443\u044e\u0449\u0430\u044f \u043d\u0430 \u0441\u043e\u0431\u044b\u0442\u0438\u0435 \u0438 \u043e\u0442\u0434\u0430\u044e\u0449\u0430\u044f \u0438\u043d\u0434\u0435\u043a\u0441 \u043d\u0430\u0436\u0430\u0442\u043e\u0439 \u043a\u043d\u043e\u043f\u043a\u0438, \u0437\u0430\u0442\u0435\u043c &#8212; \u0444\u0443\u043d\u043a\u0446\u0438\u044f seekClass(), \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u0442, \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u043b\u0438 \u043a\u043d\u043e\u043f\u043a\u0430 \u043d\u0430\u0436\u0430\u0442\u043e\u0439\/\u043d\u0435 \u043d\u0430\u0436\u0430\u0442\u043e\u0439, \u0438 \u043f\u0435\u0440\u0432\u0430\u044f \u043b\u0438 \u0432 \u0440\u044f\u0434\u0443, \u0438 \u0432 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438 \u043e\u0442 \u044d\u0442\u043e\u0433\u043e \u043e\u0442\u0434\u0430\u0435\u0442 \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u044e\u0449\u0438\u0435 \u043a\u043b\u0430\u0441\u0441\u044b \u0438\u0437 API. \u0412\u0441\u0435, \u043d\u0430\u0448 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0433\u043e\u0442\u043e\u0432 \u0434\u043b\u044f \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f \u043d\u0435 \u0442\u043e\u043b\u044c\u043a\u043e \u0432 \u044d\u0442\u043e\u043c, \u043d\u043e \u0438 \u0432 \u0434\u0440\u0443\u0433\u0438\u0445 \u043f\u0440\u043e\u0435\u043a\u0442\u0430\u0445, \u043c\u043e\u0436\u043d\u043e \u0435\u0433\u043e \u0437\u0430\u0433\u0440\u0443\u0437\u0438\u0442\u044c \u043d\u0430 <a href=\"https:\/\/github.com\/v-khakimov\/vue-buttons-radio\" rel=\"noopener noreferrer nofollow\">\u0413\u0438\u0442\u0445\u0430\u0431<\/a> \u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u043d\u0430 \u0437\u0434\u043e\u0440\u043e\u0432\u044c\u0435.<\/p>\n<p>\u0422\u0435\u043f\u0435\u0440\u044c \u0437\u0430\u0434\u0435\u0439\u0441\u0442\u0432\u0443\u0435\u043c \u0441\u043e\u0437\u0434\u0430\u043d\u043d\u044b\u0439 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0432 \u043d\u0430\u0448\u0435\u043c \u043f\u0440\u043e\u0435\u043a\u0442\u0435. \u0421\u043d\u0430\u0447\u0430\u043b\u0430 \u0437\u0430\u0439\u043c\u0435\u043c\u0441\u044f \u0441\u0442\u0438\u043b\u044f\u043c\u0438. \u0418\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f \/ \u043d\u043e\u0432\u044b\u0435 \u0444\u0430\u0439\u043b\u044b:<\/p>\n<pre><code class=\"css\">\/\/ .\/css\/colors.module.css :root {   --color-blue: #2d96cd;   --color-grey: #8c8c8c;   --color-white: #fff;   --color-major: var(--color-blue); } .back-grey {background-color: var(--color-grey);} .back-color {background-color: var(--color-major);}  .bb-grey {border-bottom: 1px solid var(--color-grey);} .bl-grey {border-left: 1px solid var(--color-grey);} .br-grey {border-right: 1px solid var(--color-grey);} .bt-grey {border-top: 1px solid var(--color-grey);}  .bb {border-bottom: 1px solid var(--color-major);} .bl {border-left: 1px solid var(--color-major);} .br {border-right: 1px solid var(--color-major);} .bt {border-top: 1px solid var(--color-major);}  .grey {color: var(--color-grey);} .color {color: var(--color-major);} .white {color: var(--color-white);}  \/\/ .\/css\/cursor.module.css .pointer {cursor: pointer;}  \/\/ add into .\/css\/gaps.module.css .padding {padding: var(--gap);}  \/\/ .\/css\/shadow.module.css .shadow {box-shadow: 0 0 0.15em 0.1em rgba(0,0,0,0.1);}  \/\/ add into .\/css\/text.module.css .center {text-align: center;}<\/code><\/pre>\n<p>\u0421\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u043a\u043b\u0430\u0441\u0441\u044b, \u043e\u0431\u0449\u0438\u0435 \u0434\u043b\u044f \u0432\u0441\u0435\u0445 \u043a\u043d\u043e\u043f\u043e\u043a:<\/p>\n<pre><code class=\"css\">\/\/ .\/css\/buttons-radio.module.css .each {   composes: fg1 from '.\/flex.module.css';   composes: padding from '.\/gaps.module.css';   composes: center from '.\/text.module.css'; } .selected {   composes: white from '.\/colors.module.css'; } .unselected {   composes: pointer from '.\/cursor.module.css';   composes: shadow from '.\/shadow.module.css'; }<\/code><\/pre>\n<p> \u0410\u00a0\u043f\u043e\u0441\u043b\u0435 \u044d\u0442\u043e\u0433\u043e\u00a0\u2014 \u0434\u043b\u044f \u043a\u043d\u043e\u043f\u043e\u043a \u0432\u00a0\u0434\u0432\u0443\u0445 \u0446\u0432\u0435\u0442\u043e\u0432\u044b\u0445 \u0433\u0430\u043c\u043c\u0430\u0445:<\/p>\n<pre><code class=\"css\">\/\/ .\/css\/buttons-radio-color.module.css .each {   composes: each from '.\/buttons-radio.module.css';   composes: bt br bb from '.\/colors.module.css'; } .first {   composes: bl from '.\/colors.module.css'; } .selected {   composes: selected from '.\/buttons-radio.module.css';   composes: back-color from '.\/colors.module.css'; } .unselected {   composes: unselected from '.\/buttons-radio.module.css';   composes: color from '.\/colors.module.css'; }  \/\/ .\/css\/buttons-radio-grey.module.css .each {   composes: each from '.\/buttons-radio.module.css';   composes: bt-grey br-grey bb-grey from '.\/colors.module.css'; } .first {   composes: bl-grey from '.\/colors.module.css'; } .selected {   composes: selected from '.\/buttons-radio.module.css';   composes: back-grey from '.\/colors.module.css'; } .unselected {   composes: unselected from '.\/buttons-radio.module.css';   composes: grey from '.\/colors.module.css'; }<\/code><\/pre>\n<p>\u041f\u0435\u0440\u0435\u0445\u043e\u0434\u0438\u043c \u043a js:<\/p>\n<pre><code class=\"javascript\">\/\/ .\/store-variables\/body-type.js import { computed, ref } from 'vue'; import classes from '..\/css\/buttons-radio-color.module.css'; import { headTitles } from '..\/store-constant\/table-data';  const buttons = Object.keys(headTitles); const refBodyTypeIndex = ref(0); const getBodyTypeIndex = computed(() => refBodyTypeIndex.value); const setBodyTypeIndex = (index) => {   refBodyTypeIndex.value = index; }; const propsButtonsBodyType = computed(() => ({   buttons,   indexSelected: getBodyTypeIndex.value,   classes, }));  export { getBodyTypeIndex, propsButtonsBodyType, setBodyTypeIndex };  \/\/ .\/store-variables\/price-type.js import { computed, ref } from 'vue'; import classes from '..\/css\/buttons-radio-grey.module.css'; import { priceTypeNames } from '..\/store-constant\/table-data'; const buttons = Object.values(priceTypeNames); const refPriceTypeIndex = ref(0); const getPriceTypeIndex = computed(() => refPriceTypeIndex.value); const setPriceTypeIndex = (index) => {   refPriceTypeIndex.value = index; }; const propsButtonsPriceType = computed(() => ({   buttons,   indexSelected: getPriceTypeIndex.value,   classes, })); export { getPriceTypeIndex, propsButtonsPriceType, setPriceTypeIndex };<\/code><\/pre>\n<p>\u0421\u0442\u0438\u043b\u0438, \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u043d\u044b\u0435 \u0432 \u043a\u043b\u0430\u0441\u0441\u0430\u0445 \u0432 \u043c\u043e\u0434\u0443\u043b\u044f\u0445 buttons-radio-color.module.css \u0438 buttons-radio-grey.module.css, \u043c\u044b \u0441\u0440\u0430\u0437\u0443 \u0433\u0440\u0443\u0437\u0438\u043c \u043a\u0430\u043a <code>classes<\/code> \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0435\u043d\u043d\u043e \u0432 body-type.js \u0438 price-type.js, \u0432 props. \u0422\u0435\u043f\u0435\u0440\u044c \u043e\u0441\u0442\u0430\u043b\u043e\u0441\u044c \u0437\u0430\u0433\u0440\u0443\u0437\u0438\u0442\u044c \u043f\u043e\u0441\u043b\u0435\u0434\u043d\u0438\u0435 \u0432 \u0441\u043e\u0437\u0434\u0430\u043d\u043d\u044b\u0439 \u0440\u0430\u043d\u0435\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 ButtonsForTable.vue \u0438 \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0438\u0442\u044c \u0442\u0430\u043c \u0443\u043d\u0438\u0432\u0435\u0440\u0441\u0430\u043b\u044c\u043d\u044b\u0439 \u201c\u0447\u0435\u0440\u043d\u044b\u0439 \u044f\u0449\u0438\u043a\u201d CommonButtonsRadio.vue:<\/p>\n<pre><code class=\"xml\">\/\/ .\/components\/ButtonsForTable.vue &lt;script setup> import { computed } from 'vue'; import flex from '..\/css\/flex.module.css'; import gaps from '..\/css\/gaps.module.css'; import {   propsButtonsBodyType,   setBodyTypeIndex, } from '..\/store-variables\/body-type'; import { isMqPortrait } from '..\/store-variables\/media-queries'; import {   propsButtonsPriceType,   setPriceTypeIndex, } from '..\/store-variables\/price-type'; import CommonButtonsRadio from '.\/CommonButtonsRadio.vue';  const getSectionCl = computed(() => [   isMqPortrait.value ? flex.fb100 : flex.fg1,   flex.flex, flex.aiCenter, gaps.pt, gaps.pb, gaps.pl2, gaps.pr2]); &lt;\/script>  &lt;template>   &lt;section :class=\"getSectionCl\">     &lt;h5 :class=\"$style.title\">Body:&lt;\/h5>     &lt;CommonButtonsRadio v-bind=\"propsButtonsBodyType\"       @select-button-index=\"setBodyTypeIndex\" \/>   &lt;\/section>    &lt;section :class=\"getSectionCl\">     &lt;h5 :class=\"$style.title\">Price:&lt;\/h5>     &lt;CommonButtonsRadio v-bind=\"propsButtonsPriceType\"       @select-button-index=\"setPriceTypeIndex\" \/>   &lt;\/section> &lt;\/template>  &lt;style module> .title {   composes: pr from '..\/css\/gaps.module.css';   composes: normal from '..\/css\/text.module.css';   composes: grey from '..\/css\/colors.module.css'; } &lt;\/style><\/code><\/pre>\n<p>\u041f\u0440\u043e\u0431\u0443\u0435\u043c \u0437\u0430\u043f\u0443\u0441\u0442\u0438\u0442\u044c \u0438 \u0432\u0438\u0434\u0438\u043c, \u0447\u0442\u043e \u043f\u043e\u043b\u0443\u0447\u0438\u043b\u043e\u0441\u044c:<\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/e16\/1e3\/bb9\/e161e3bb9b4847590772273517aaaa45.png\" width=\"1794\" height=\"241\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/e16\/1e3\/bb9\/e161e3bb9b4847590772273517aaaa45.png\"\/><figcaption><\/figcaption><\/figure>\n<p>\u0412\u0441\u0435 \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442, \u043d\u0430\u0436\u0438\u043c\u0430\u0435\u0442\u0441\u044f \u0438 \u0438\u0437\u043c\u0435\u043d\u044f\u0435\u0442\u0441\u044f. \u0410\u0434\u0430\u043f\u0442\u0438\u0432\u043d\u043e\u0439 \u0442\u0430\u0431\u043b\u0438\u0446\u044b, \u043f\u0440\u0430\u0432\u0434\u0430, \u043f\u043e\u043a\u0430 \u043d\u0435\u0442, \u043d\u043e \u043c\u044b \u0443\u0436\u0435 \u0440\u0430\u0437\u0431\u0438\u0440\u0430\u0435\u043c\u0441\u044f \u0432 CSS-\u043c\u043e\u0434\u0443\u043b\u044f\u0445, \u0437\u043d\u0430\u0435\u043c \u043f\u0440\u043e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043d\u043e-\u043e\u0440\u0438\u0435\u043d\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u0439 \u043f\u043e\u0434\u0445\u043e\u0434 \u0438 \u0443\u043c\u0435\u0435\u043c \u0441\u043e\u0437\u0434\u0430\u0432\u0430\u0442\u044c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043c\u043e\u0436\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0432 \u0434\u0430\u043b\u044c\u043d\u0435\u0439\u0448\u0435\u043c. \u0418 \u0432\u0441\u0435 \u044d\u0442\u0438 \u0441\u043a\u0438\u043b\u043b\u044b \u043f\u043e\u043c\u043e\u0433\u0443\u0442 \u043d\u0430\u043c \u0432 \u0440\u0430\u0431\u043e\u0442\u0435 \u0441 \u0442\u0430\u0431\u043b\u0438\u0446\u0435\u0439. \u041a \u043d\u0435\u0439, \u043d\u0430\u043a\u043e\u043d\u0435\u0446, \u0438 \u043f\u0440\u0438\u0441\u0442\u0443\u043f\u0438\u043c.<\/p>\n<p>\u0412\u0441\u0435 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f \u0432 \u043f\u0440\u043e\u0435\u043a\u0442\u0435 \u0434\u043e \u044d\u0442\u043e\u0433\u043e \u043c\u043e\u043c\u0435\u043d\u0442\u0430  \u2014  \u0432 \u043a\u043e\u043c\u043c\u0438\u0442\u0435 \u201cCommonButtonsRadio\u201d<\/p>\n<h2>API \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 \u0430\u0434\u0430\u043f\u0442\u0438\u0432\u043d\u043e\u0439 \u0442\u0430\u0431\u043b\u0438\u0446\u044b<\/h2>\n<p>\u0422\u0430\u0431\u043b\u0438\u0446\u0443 \u043c\u044b \u0442\u0430\u043a\u0436\u0435 \u0431\u0443\u0434\u0435\u043c \u0434\u0435\u043b\u0430\u0442\u044c \u201c\u0447\u0435\u0440\u043d\u044b\u043c \u044f\u0449\u0438\u043a\u043e\u043c\u201d, \u0447\u0442\u043e\u0431\u044b \u043c\u043e\u0436\u043d\u043e \u0431\u044b\u043b\u043e \u0435\u0439 \u043f\u043e\u0442\u043e\u043c \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c\u0441\u044f. \u041d\u0430\u0447\u043d\u0435\u043c \u0441 \u0433\u043b\u0430\u0432\u043d\u043e\u0433\u043e  \u2014  API. \u0412 \u0440\u0430\u043c\u043a\u0430\u0445 \u0434\u0430\u043d\u043d\u043e\u0439 \u0441\u0442\u0430\u0442\u044c\u0438 \u043d\u0430\u0448 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0431\u0443\u0434\u0435\u0442 \u0442\u043e\u043b\u044c\u043a\u043e \u043f\u0440\u0438\u043d\u0438\u043c\u0430\u0442\u044c \u0434\u0430\u043d\u043d\u044b\u0435, \u0438 \u043d\u0438\u0447\u0435\u0433\u043e \u043d\u0435 \u043e\u0442\u0434\u0430\u0432\u0430\u0442\u044c.<\/p>\n<p>\u041f\u043e\u0434\u0443\u043c\u0430\u0435\u043c \u043d\u0430\u0434 \u0448\u0430\u043f\u043a\u043e\u0439. \u0428\u0430\u043f\u043a\u0430 \u0431\u0443\u0434\u0435\u0442 \u0441\u043e\u0441\u0442\u043e\u044f\u0442\u044c \u0438\u0437 \u0434\u0432\u0443\u0445 \u0447\u0430\u0441\u0442\u0435\u0439 \u2014 \u0448\u0430\u043f\u043a\u0438 \u0437\u0430\u0433\u043e\u043b\u043e\u0432\u043a\u043e\u0432 \u0441\u0442\u0440\u043e\u043a (headTitles) \u0438 \u0448\u0430\u043f\u043a\u0438 \u043e\u0441\u0442\u0430\u043b\u044c\u043d\u044b\u0445 \u0441\u0442\u043e\u043b\u0431\u0446\u043e\u0432 (headCols). \u0415\u0441\u043b\u0438 \u0443 \u043d\u0430\u0441 \u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e \u0448\u0438\u0440\u0438\u043d\u044b \u0434\u043b\u044f \u043a\u043b\u0430\u0441\u0441\u0438\u0447\u0435\u0441\u043a\u043e\u0433\u043e \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u0442\u0430\u0431\u043b\u0438\u0446\u044b \u2014 \u044d\u0442\u0438 \u0448\u0430\u043f\u043a\u0438 \u0438\u0434\u0443\u0442 \u0441\u043b\u0435\u0432\u0430 \u043d\u0430\u043f\u0440\u0430\u0432\u043e, \u0435\u0441\u043b\u0438 \u043d\u0435\u0442 \u2014 \u0441\u0432\u0435\u0440\u0445\u0443 \u0432\u043d\u0438\u0437. \u0417\u0430\u0442\u0435\u043c \u0443 \u043d\u0430\u0441 \u0438\u0434\u0443\u0442 \u0437\u0430\u0433\u043e\u043b\u043e\u0432\u043a\u0438 \u0441\u0442\u0440\u043e\u043a (titles), \u043d\u0443 \u0438 \u0441\u0430\u043c\u0438 \u044f\u0447\u0435\u0439\u043a\u0438 \u0441 \u0434\u0430\u043d\u043d\u044b\u043c\u0438 \u0434\u043b\u044f \u0441\u0440\u0430\u0432\u043d\u0435\u043d\u0438\u044f (cells).<\/p>\n<p>\u0422\u0435\u043f\u0435\u0440\u044c \u043f\u0440\u043e CSS-\u043a\u043b\u0430\u0441\u0441\u044b. \u041a\u0440\u043e\u043c\u0435 \u043a\u043b\u0430\u0441\u0441\u043e\u0432, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043c\u043e\u0433\u0443\u0442 \u0431\u044b\u0442\u044c \u0443 \u043a\u043e\u043d\u043a\u0440\u0435\u0442\u043d\u043e\u0439 \u044f\u0447\u0435\u0439\u043a\u0438 (clAdd, \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u043a\u043e \u0432\u0441\u0435\u043c \u0432\u044b\u0447\u0438\u0441\u043b\u0435\u043d\u043d\u044b\u043c \u043a \u044f\u0447\u0435\u0439\u043a\u0435 \u043a\u043b\u0430\u0441\u0441\u0430\u043c), \u043c\u043e\u0433\u0443\u0442 \u0431\u044b\u0442\u044c \u043a\u043b\u0430\u0441\u0441\u044b \u0443:<\/p>\n<ul>\n<li>\n<p>\u0432\u0441\u0435\u0445 \u044f\u0447\u0435\u0435\u043a (eachCell)<\/p>\n<\/li>\n<li>\n<p>\u0448\u0430\u043f\u043a\u0438 \u0442\u0430\u0431\u043b\u0438\u0446\u044b (head)<\/p>\n<\/li>\n<li>\n<p>\u0437\u0430\u0433\u043e\u043b\u043e\u0432\u043a\u043e\u0432 \u0441\u0442\u0440\u043e\u043a (titles)<\/p>\n<\/li>\n<li>\n<p>\u043e\u0441\u0442\u0430\u043b\u044c\u043d\u044b\u0445 \u044f\u0447\u0435\u0435\u043a (cells)<\/p>\n<\/li>\n<\/ul>\n<p>head, titles \u0438 cells \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u044e\u0442\u0441\u044f \u043a eachCell, \u0435\u0441\u043b\u0438 \u043e\u043d\u0438 \u0435\u0441\u0442\u044c.\u041f\u043b\u044e\u0441 \u043a \u044d\u0442\u043e\u043c\u0443, \u043e\u043d\u0438 \u044f\u0432\u043b\u044f\u044e\u0442\u0441\u044f \u043d\u0435\u043a\u0438\u043c\u0438 \u043a\u0430\u0442\u0435\u0433\u043e\u0440\u0438\u044f\u043c\u0438, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043c\u043e\u0433\u0443 \u043f\u043e\u0434\u0440\u0430\u0437\u0434\u0435\u043b\u044f\u0442\u044c\u0441\u044f \u043d\u0430:<\/p>\n<ul>\n<li>\n<p>\u043b\u044e\u0431\u0430\u044f \u044f\u0447\u0435\u0439\u043a\u0430 \u0432 \u0441\u0432\u043e\u0435\u0439 \u043a\u0430\u0442\u0435\u0433\u043e\u0440\u0438\u0438 (each)<\/p>\n<\/li>\n<li>\n<p>\u043f\u0435\u0440\u0432\u0430\u044f\/\u043f\u043e\u0441\u043b\u0435\u0434\u043d\u044f\u044f \u044f\u0447\u0435\u0439\u043a\u0430 \u0432 \u0441\u0442\u0440\u043e\u043a\u0435 (rowFirst\/rowLast)<\/p>\n<\/li>\n<li>\n<p>\u043f\u0435\u0440\u0432\u0430\u044f\/\u043f\u043e\u0441\u043b\u0435\u0434\u043d\u044f\u044f  \u044f\u0447\u0435\u0439\u043a\u0430 \u0432 \u0441\u0442\u043e\u043b\u0431\u0446\u0435 (colFirst, colLast)<\/p>\n<\/li>\n<\/ul>\n<p>\u041a\u043b\u0430\u0441\u0441\u044b \u0438\u0437 rowFirst, rowLast, colFirst, colLast \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u044e\u0442\u0441\u044f \u043a each, \u0435\u0441\u043b\u0438 \u043e\u043d\u0438 \u0435\u0441\u0442\u044c.<\/p>\n<p>\u0422\u0430\u0431\u043b\u0438\u0446\u0430, \u0432 \u043e\u0442\u043b\u0438\u0447\u0438\u0435 \u043e\u0442 \u0440\u0430\u0434\u0438\u043e-\u043a\u043d\u043e\u043f\u043e\u043a  \u2014 \u0432\u043f\u043e\u043b\u043d\u0435 \u0441\u0435\u0431\u0435 \u0441\u0430\u043c\u043e\u0441\u0442\u043e\u044f\u0442\u0435\u043b\u044c\u043d\u044b\u0439 \u0431\u043b\u043e\u043a, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u043b\u043e\u0433\u0438\u0447\u043d\u043e \u043e\u0431\u043e\u0440\u0430\u0447\u0438\u0432\u0430\u044e\u0449\u0438\u0439 \u0435\u0435 \u0442\u0435\u0433 \u043f\u043e\u043c\u0435\u0441\u0442\u0438\u0442\u044c \u0432\u043d\u0443\u0442\u0440\u044c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430. \u041f\u043e\u044d\u0442\u043e\u043c\u0443 \u0432 classes \u0432\u0445\u043e\u0434\u044f\u0449\u0438\u0445 \u0434\u0430\u043d\u043d\u044b\u0445 \u0442\u0430\u0431\u043b\u0438\u0446\u044b \u0434\u043e\u0431\u0430\u0432\u0438\u043c \u043a\u043b\u044e\u0447 outer.<\/p>\n<p>\u0415\u0449\u0435 \u043e\u0434\u043d\u043e \u043e\u0442\u043b\u0438\u0447\u0438\u0435 \u043e\u0442 \u043f\u0440\u0435\u0434\u044b\u0434\u0443\u0449\u0435\u0433\u043e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 \u0441 \u043a\u043d\u043e\u043f\u043a\u0430\u043c\u0438 \u2014 \u043a\u043e\u0434\u0430 \u0431\u0443\u0434\u0435\u0442 \u0431\u043e\u043b\u044c\u0448\u0435. \u041f\u043e\u044d\u0442\u043e\u043c\u0443 \u0434\u043b\u044f \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 \u0442\u0430\u0431\u043b\u0438\u0446\u044b \u0441\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u043f\u0430\u043f\u043a\u0443 \u201cCommonTableAdaptive\u201d \u0438 \u0443\u0436\u0435 \u0432 \u043d\u0435\u0439 \u2014 TableTemplate.vue:<\/p>\n<pre><code class=\"xml\">\/\/ .\/components\/TableTemplate.vue &lt;script setup> const props = defineProps({   headTitles: Array,   headCols: Array,   titles: Array,   cells: Array,   classes: Object,   \/* classes: {     outer: [String, Array],     eachCell: [String, Array],     head: { each, colFirst, colLast, rowFirst, rowLast }     titles: { each, colFirst, colLast, rowFirst, rowLast }     cells: { each, colFirst, colLast, rowFirst, rowLast }   } *\/ }); &lt;\/script><\/code><\/pre>\n<p>\u0417\u0430\u0439\u043c\u0435\u043c\u0441\u044f props \u0434\u043b\u044f \u043d\u0430\u0448\u0435\u0433\u043e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 \u0441 \u0442\u0430\u0431\u043b\u0438\u0446\u0430\u043c\u0438. \u0417\u0430\u0432\u0435\u0434\u0435\u043c \u0434\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u044b\u0439 \u0444\u0430\u0439\u043b table-props.js \u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c \u0434\u0430\u043d\u043d\u044b\u0435 \u0434\u043b\u044f \u0442\u0430\u0431\u043b\u0438\u0446\u044b, \u043f\u043e\u0434\u0433\u043e\u0442\u043e\u0432\u043b\u0435\u043d\u043d\u044b\u0435 \u0440\u0430\u043d\u0435\u0435 \u0432 \u201c.\/store-constant\/table-data\u201d:<\/p>\n<pre><code class=\"javascript\">\/\/ .\/store-variables\/table-props.js import { computed } from 'vue'; import { cells, headCols, headTitles, titles } from '..\/store-constant\/table-data'; import { getBodyTypeIndex } from '..\/store-variables\/body-type'; import { getPriceTypeIndex } from '..\/store-variables\/price-type';  const cellswithCl = Object.fromEntries(Object.entries(cells)   .map(([body, obj]) => [     body,     Object.fromEntries(Object.entries(obj)       .map(([priceType, rows]) => [         priceType,         rows.map((row) => row.map((price) => price === '-'           ? { text: '-', clAdd: [colors.grey] }           : { text: `\u00a3&amp;nbsp;${price}`, clAdd: [text.bold] })),       ])),   ]) );  const getTableProps = computed(() => ({   headTitles: Object.values(headTitles)[getBodyTypeIndex.value],   headCols,   titles: Object.values(titles)[getBodyTypeIndex.value],   cells: Object.values(Object.values(cellswithCl)[getBodyTypeIndex.value])[     getPriceTypeIndex.value], }));<\/code><\/pre>\n<p>\u0418 \u0432 \u044d\u0442\u043e\u043c \u0436\u0435 \u0444\u0430\u0439\u043b\u0435 \u0437\u0430\u0439\u043c\u0435\u043c\u0441\u044f \u0441\u0442\u0438\u043b\u044f\u043c\u0438. \u0421\u0444\u043e\u0440\u043c\u0438\u0440\u0443\u0435\u043c \u043a\u043b\u0430\u0441\u0441\u044b \u0434\u043b\u044f \u0442\u0435\u0433\u0430, \u043e\u0431\u043e\u0440\u0430\u0447\u0438\u0432\u0430\u044e\u0449\u0435\u0433\u043e \u0442\u0430\u0431\u043b\u0438\u0446\u0443:<\/p>\n<pre><code class=\"javascript\">\/\/ \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u0432 .\/store-variables\/table-props import flex from '..\/css\/flex.module.css'; import gaps from '..\/css\/gaps.module.css'; import text from '..\/css\/text.module.css'; import { isMqMobile } from '..\/store-variables\/media-queries';  const getClOuter = computed(() => {   const cl = [flex.fb100, gaps.mt2, text.lineHeightTable, text.center];   if (!isMqMobile.value) cl.push(gaps.pl2, gaps.pr2);   return cl; });  \/\/ \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u0432 .\/css\/gaps.module.css .mt2 {margin-top: var(--gap-twice);} \/\/ \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u0432 .\/css\/text.module.css .line-height-table {line-height: 1.2;}<\/code><\/pre>\n<p>\u0415\u0441\u043b\u0438 \u0443 \u043d\u0430\u0441 desktop-\u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435, \u0442\u043e \u0443 \u0433\u0440\u0430\u043d\u0438\u0446\u044b \u0431\u0443\u0434\u0443\u0442 \u043f\u0430\u0434\u0434\u0438\u043d\u0433\u0438 \u0441\u043f\u0440\u0430\u0432\u0430 \u0438 \u0441\u043b\u0435\u0432\u0430, \u0435\u0441\u043b\u0438 mobile  \u2014  \u0442\u0430\u0431\u043b\u0438\u0446\u0430 \u0432\u043e \u0432\u0441\u044e \u0448\u0438\u0440\u0438\u043d\u0443 \u044d\u043a\u0440\u0430\u043d\u0430.<\/p>\n<p>\u0422\u0435\u043f\u0435\u0440\u044c \u0441\u0442\u0438\u043b\u0438 \u044f\u0447\u0435\u0435\u043a:<\/p>\n<pre><code class=\"javascript\">\/\/ \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u0432 .\/store-variables\/table-props import colors from '..\/css\/colors.module.css';  const getClasses = computed(() => {   const classesCells = { each: [colors.btGrey, colors.blGrey] };   if (isMqMobile.value) {     classesCells.colFirst = [colors.blTransparent];   } else {     classesCells.colLast = [colors.brGrey];     classesCells.rowLast = [colors.bbGrey];   }   const classes = {     outer: getClOuter.value,     eachCell: [flex.flex, flex.aiCenter, flex.jcCenter, gaps.padding],     head: {       each: [text.bold, colors.backColor, colors.white,         colors.btWhite, colors.blWhite],       colFirst: [colors.blTransparent],     },     cells: classesCells,     titles: Object.fromEntries(Object.entries(classesCells)),   };   classes.titles.each = [...classes.titles.each, colors.backGreyLight];   return classes; });  \/\/ .\/css\/colors.module.css \/\/ \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u0432\u043d\u0443\u0442\u0440\u044c :root {} --color-grey-light: #e5e5e5; \/\/ \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u0432 \u0444\u0430\u0439\u043b .back-grey-light {background-color: var(--color-grey-light);} .bl-white {border-left: 1px solid var(--color-white);} .bt-white {border-top: 1px solid var(--color-white);} .bl-transparent {border-left: 1px solid transparent;}  \/\/ \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u0432 .\/css\/flex.module.css .jc-center {justify-content: center;} \/\/ \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u0432 .\/css\/text.module.css .bold {font-weight: bold;}<\/code><\/pre>\n<p>\u0423 \u0432\u0441\u0435\u0445 \u044f\u0447\u0435\u0435\u043a (eachCell) \u0446\u0435\u043d\u0442\u0440\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435 \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u043c\u043e\u0433\u043e \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e flex \u0438 \u043e\u0442\u0441\u0442\u0443\u043f\u044b. \u0424\u043e\u043d \u0448\u0430\u043f\u043a\u0438 (head)  \u2014 \u0441\u0438\u043d\u0438\u0439, \u0446\u0432\u0435\u0442 \u0431\u0443\u043a\u0432 \u2014 \u0431\u0435\u043b\u044b\u0439, \u0443 \u043a\u0430\u0436\u0434\u043e\u0439 \u044f\u0447\u0435\u0439\u043a\u0438 \u0441\u0432\u0435\u0440\u0445\u0443 \u0438 \u0441\u043f\u0440\u0430\u0432\u0430 (\u0437\u0430 \u0438\u0441\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u0435\u043c \u043f\u0435\u0440\u0432\u044b\u0445 \u0432 \u0440\u044f\u0434\u0443) \u0431\u0435\u043b\u044b\u0439 \u0431\u043e\u0440\u0434\u044e\u0440. \u041e\u0441\u0442\u0430\u043b\u044c\u043d\u044b\u0435 \u044f\u0447\u0435\u0439\u043a\u0438 \u2014 \u0441\u0435\u0440\u044b\u0435 \u0433\u0440\u0430\u043d\u0438\u0446\u044b \u0441\u0432\u0435\u0440\u0445\u0443, \u0441\u043b\u0435\u0432\u0430 (\u0435\u0441\u043b\u0438 mobile \u0438 \u043f\u0435\u0440\u0432\u0430\u044f \u0432 \u0440\u044f\u0434\u0443, \u0442\u043e \u0441\u043b\u0435\u0432\u0430 \u0433\u0440\u0430\u043d\u0438\u0446\u044b \u043d\u0435\u0442), \u0430 \u0442\u0430\u043a\u0436\u0435 \u0441\u043d\u0438\u0437\u0443 \u0438 \u0441\u043f\u0440\u0430\u0432\u0430 (\u0442\u043e\u043b\u044c\u043a\u043e \u0435\u0441\u043b\u0438 desktop), \u0435\u0441\u043b\u0438 \u044f\u0447\u0435\u0439\u043a\u0430 \u043f\u043e\u0441\u043b\u0435\u0434\u043d\u044f\u044f \u0432 \u043a\u043e\u043b\u043e\u043d\u043a\u0435 \u0438 \u0440\u044f\u0434\u0443 \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0435\u043d\u043d\u043e. \u0423 \u044f\u0447\u0435\u0435\u043a, \u043e\u0442\u043d\u043e\u0441\u044f\u0449\u0438\u0445\u0441\u044f \u043a \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u044f\u043c \u0441\u0442\u0440\u043e\u043a \u0442\u0430\u0431\u043b\u0438\u0446\u044b \u2014 \u0441\u0432\u0435\u0442\u043b\u043e-\u0441\u0435\u0440\u044b\u0439 \u0444\u043e\u043d.<\/p>\n<p>\u0412\u0430\u0436\u043d\u043e\u0435 \u043f\u0440\u0438\u043c\u0435\u0447\u0430\u043d\u0438\u0435, \u043e\u0442\u043d\u043e\u0441\u044f\u0449\u0435\u0435\u0441\u044f \u043a CSS-\u043c\u043e\u0434\u0443\u043b\u044f\u043c. \u0412\u043e Vue \u0438 Vite \u0442\u0430\u043a \u0443\u0441\u0442\u0440\u043e\u0435\u043d\u043e (\u0430 \u043c\u043e\u0436\u0435\u0442 \u044d\u0442\u043e \u0433\u043b\u043e\u0431\u0430\u043b\u044c\u043d\u043e \u0442\u0430\u043a \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442), \u0447\u0442\u043e \u0435\u0441\u043b\u0438 \u0443 \u043a\u0430\u043a\u043e\u0433\u043e-\u0442\u043e \u0442\u0435\u0433\u0430 \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0435\u043d\u044b \u0434\u0432\u0430 \u043a\u043b\u0430\u0441\u0441\u0430, \u0432\u043b\u0438\u044f\u044e\u0449\u0438\u0435 \u043d\u0430 \u043e\u0434\u043d\u043e \u0438 \u0442\u043e \u0436\u0435 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e, \u0442\u043e \u0441\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u0435\u0442 \u043d\u0435 \u043f\u043e\u0441\u043b\u0435\u0434\u043d\u0438\u0439 \u043a\u043b\u0430\u0441\u0441 \u0432 <code>class=\"\"<\/code>, \u0430 \u0442\u043e \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e, \u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u0437\u0430\u0433\u0440\u0443\u0437\u0438\u043b\u043e\u0441\u044c \u043f\u043e\u0441\u043b\u0435\u0434\u043d\u0438\u043c \u0432 \u043c\u043e\u0434\u0443\u043b\u044f\u0445. \u041f\u043e\u044f\u0441\u043d\u044e \u043d\u0430 \u043f\u0440\u0438\u043c\u0435\u0440\u0435: \u0432 \u201c.\/css\/colors.module.css\u201d \u0441\u043d\u0430\u0447\u0430\u043b\u0430 \u0438\u0434\u0435\u0442 <code>.bt-white {border-top: 1px solid var(--color-white);}<\/code>, \u0430 \u043f\u043e\u0442\u043e\u043c (\u043d\u0438\u0436\u0435) <code>.bl-transparent {border-left: 1px solid transparent;}<\/code>. \u041a\u0430\u043a\u043e\u0439-\u0431\u044b \u043d\u0438 \u0431\u044b\u043b \u043f\u043e\u0440\u044f\u0434\u043e\u043a \u044d\u0442\u0438\u0445 \u043a\u043b\u0430\u0441\u0441\u043e\u0432 \u0443 \u043b\u044e\u0431\u043e\u0433\u043e \u0442\u0435\u0433\u0430, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440 <code>&lt;p :class=\"[colors.blWhite, colors.blTransparent]\"><\/code> \u0438\u043b\u0438 <code>&lt;p :class=\"[colors.blTransparent, colors.blWhite]\"><\/code>, \u0443 \u044d\u0442\u043e\u0433\u043e \u0442\u0435\u0433\u0430 \u0431\u0443\u0434\u0435\u0442 \u043f\u0440\u043e\u0437\u0440\u0430\u0447\u043d\u0430\u044f \u043b\u0435\u0432\u0430\u044f \u0433\u0440\u0430\u043d\u0438\u0446\u0430, \u043f\u043e\u0442\u043e\u043c\u0443 \u0447\u0442\u043e \u043a\u043b\u0430\u0441\u0441 <code>.bl-transparent<\/code> \u043e\u0431\u044a\u044f\u0432\u043b\u0435\u043d \u043f\u043e\u0437\u0434\u043d\u0435\u0435 (\u043d\u0438\u0436\u0435) \u0432 \u0444\u0430\u0439\u043b\u0435, \u0447\u0435\u043c <code>.bt-white<\/code>.<\/p>\n<p>\u0412\u043a\u043b\u044e\u0447\u0438\u043c \u0441\u043e\u0437\u0434\u0430\u043d\u043d\u044b\u0435 getClasses \u0432 \u0434\u0430\u043d\u043d\u044b\u0435, \u043f\u0435\u0440\u0435\u0434\u0430\u0432\u0430\u0435\u043c\u044b\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0443, \u0438 \u044d\u043a\u0441\u043f\u043e\u0440\u0442\u0438\u0440\u0443\u0435\u043c getTableProps:<\/p>\n<pre><code class=\"javascript\">\/\/ .\/store-variables\/table-props.js \/\/ \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u0432 \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u043c\u044b\u0439 \u043e\u0431\u044a\u0435\u043a\u0442 getTableProps = computed(() => ({}) classes: getClasses.value, \/\/ \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u0432 \u043a\u043e\u043d\u0435\u0446 \u0444\u0430\u0439\u043b\u0430 export { getTableProps };<\/code><\/pre>\n<p>\u0418 \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0438\u043c \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u0443\u044e \u0438 \u043d\u043e\u0432\u044b\u0439 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0432 App.vue<\/p>\n<pre><code class=\"javascript\">\/\/ .\/App.vue \/\/ \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u0432 &lt;script setup> import { getTableProps } from '.\/store-variables\/table-props'; import CommonTableAdaptive from '.\/components\/CommonTableAdaptive\/TableTemplate.vue'; \/\/ \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u0432 \u043a\u043e\u043d\u0435\u0446 &lt;template> &lt;CommonTableAdaptive v-bind=\"getTableProps\" \/><\/code><\/pre>\n<p>\u041a\u043e\u043c\u043c\u0438\u0442 \u201cCommonTableAdaptive: props, API\u201d \u041d\u0430\u0447\u0430\u043b\u043e \u043f\u043e\u043b\u043e\u0436\u0435\u043d\u043e!<\/p>\n<h2>\u041a\u043b\u0430\u0441\u0441\u0438\u0447\u0435\u0441\u043a\u0438\u0439 \u0432\u0438\u0434 \u0442\u0430\u0431\u043b\u0438\u0446\u044b<\/h2>\n<p>\u041e\u0442\u043e\u0431\u0440\u0430\u0437\u0438\u043c \u0442\u0430\u0431\u043b\u0438\u0446\u0443 \u0432 \u043a\u043b\u0430\u0441\u0441\u0438\u0447\u0435\u0441\u043a\u043e\u043c \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u0438\u0438. \u0422\u0430\u043a\u0436\u0435 \u0431\u0443\u0434\u0435\u043c \u043e\u0440\u0438\u0435\u043d\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u043d\u0430 \u0441\u0435\u043c\u0430\u043d\u0442\u0438\u0447\u0435\u0441\u043a\u0443\u044e \u0432\u0435\u0440\u0441\u0442\u043a\u0443, \u0438 \u043f\u043e\u043c\u043e\u0436\u0435\u0442 \u043d\u0430\u043c \u0432 \u044d\u0442\u043e\u043c CSS Grid. \u041a\u043e\u043d\u0446\u0435\u043f\u0446\u0438\u044f <code>&lt;template><\/code> \u0442\u0430\u043a\u0430\u044f:<\/p>\n<pre><code class=\"xml\">&lt;section>   &lt;h6>\u042f\u0447\u0435\u0439\u043a\u0430 \u0448\u0430\u043f\u043a\u0438 1&lt;\/h6>&lt;h6>\u042f\u0447\u0435\u0439\u043a\u0430 \u0448\u0430\u043f\u043a\u0438 N&lt;\/h6>   &lt;p>\u042f\u0447\u0435\u0439\u043a\u0430 1&lt;\/p>&lt;p>\u042f\u0447\u0435\u0439\u043a\u0430 1 N&lt;\/p> &lt;section><\/code><\/pre>\n<p>\u041a\u043b\u0430\u0441\u0441\u0438\u0447\u0435\u0441\u043a\u0438\u0435 \u0434\u043b\u044f \u0442\u0430\u0431\u043b\u0438\u0446\u044b \u0442\u0435\u0433\u0438 &lt;table>, &lt;tr>, &lt;th>, &lt;td> \u044f \u043d\u0435 \u0441\u0442\u0430\u043b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0445\u043e\u0442\u044f \u0431\u044b \u043f\u043e \u0434\u0432\u0443\u043c \u043f\u0440\u0438\u0447\u0438\u043d\u0430\u043c:<\/p>\n<ul>\n<li>\n<p>\u0431\u00f3\u043b\u044c\u0448\u0430\u044f \u0432\u043b\u043e\u0436\u0435\u043d\u043d\u043e\u0441\u0442\u044c, \u0431\u043e\u043b\u044c\u0448\u0435 \u0442\u0435\u0433\u043e\u0432<\/p>\n<\/li>\n<li>\n<p>\u0434\u043b\u044f \u043e\u0434\u043d\u043e\u0439 \u0437\u0430\u0434\u0443\u043c\u043a\u0438, \u043e \u043a\u043e\u0442\u043e\u0440\u043e\u0439 \u0440\u0435\u0447\u044c \u043f\u043e\u0439\u0434\u0435\u0442 \u043d\u0438\u0436\u0435, \u043c\u043d\u0435 \u043d\u0443\u0436\u043d\u043e, \u0447\u0442\u043e\u0431\u044b \u044f\u0447\u0435\u0439\u043a\u0438 \u0448\u0430\u043f\u043a\u0438 \u0442\u0430\u0431\u043b\u0438\u0446\u044b \u0438 \u044f\u0447\u0435\u0439\u043a\u0438 \u0441\u0430\u043c\u043e\u0439 \u0442\u0430\u0431\u043b\u0438\u0446\u0435 \u043d\u0430\u0445\u043e\u0434\u0438\u043b\u0438\u0441\u044c \u0432 \u043e\u0434\u043d\u043e\u043c \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u0435 \u043d\u0430 \u043e\u0434\u043d\u043e\u043c \u0443\u0440\u043e\u0432\u043d\u0435 \u0432\u043b\u043e\u0436\u0435\u043d\u043d\u043e\u0441\u0442\u0438.<\/p>\n<\/li>\n<\/ul>\n<h4>\u041e\u0431\u043e\u0440\u0430\u0447\u0438\u0432\u0430\u044e\u0449\u0438\u0439 \u0442\u0430\u0431\u043b\u0438\u0446\u0443 &lt;section><\/h4>\n<p>\u041d\u0430\u0447\u043d\u0435\u043c \u0441 \u0441\u0430\u043c\u043e\u0433\u043e \u043f\u0440\u043e\u0441\u0442\u043e\u0433\u043e  \u2014 <code>&lt;section><\/code>. \u0414\u043b\u044f \u0442\u043e\u0433\u043e, \u0447\u0442\u043e\u0431\u044b \u044f\u0447\u0435\u0439\u043a\u0438 \u0432 \u0442\u0430\u0431\u043b\u0438\u0446\u0435 \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u043b\u0438\u0441\u044c \u043a\u0430\u043a \u043d\u0430\u043c \u043d\u0430\u0434\u043e, \u043e\u0431\u043e\u0440\u0430\u0447\u0438\u0432\u0430\u044e\u0449\u0435\u043c\u0443 \u0442\u0435\u0433\u0443 \u043d\u0443\u0436\u043d\u043e \u0437\u0430\u0434\u0430\u0442\u044c \u0434\u0432\u0430 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430: <code>display: grid; grid-template-columns: repeat(N, auto);<\/code>, \u0433\u0434\u0435 N \u2014 \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u044f\u0447\u0435\u0435\u043a \u0442\u0430\u0431\u043b\u0438\u0446\u044b. \u041f\u043e\u0441\u043a\u043e\u043b\u044c\u043a\u0443 \u044d\u0442\u0438\u0445 \u044f\u0447\u0435\u0435\u043a \u043c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c \u0432 \u0440\u044f\u0434\u0443 \u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0443\u0433\u043e\u0434\u043d\u043e, \u0438 \u043e\u043d\u0438 \u043c\u043e\u0433\u0443\u0442 \u0434\u0438\u043d\u0430\u043c\u0438\u0447\u0435\u0441\u043a\u0438 \u043c\u0435\u043d\u044f\u0442\u044c\u0441\u044f, \u043a\u043b\u0430\u0441\u0441\u043e\u0432 \u043d\u0430 \u043d\u0438\u0445 \u043d\u0435 \u043d\u0430\u043f\u0430\u0441\u0435\u0448\u044c\u0441\u044f, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u043b\u0443\u0447\u0448\u0435 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e grid-template-columns \u0437\u0430\u0434\u0430\u0442\u044c \u0438\u043d\u043b\u0430\u0439\u043d-\u0441\u0442\u0438\u043b\u0435\u043c. \u0410 \u0440\u0430\u0437 \u0443\u0436 \u0443 \u043d\u0430\u0441 \u043f\u043e\u044f\u0432\u043b\u044f\u044e\u0442\u0441\u044f \u0438\u043d\u043b\u0430\u0439\u043d-\u0441\u0442\u0438\u043b\u0438 \u0443 \u044d\u0442\u043e\u0433\u043e \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430, \u0438 \u043d\u0430\u0448 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 &#8212; \u201c\u0447\u0435\u0440\u043d\u044b\u0439 \u044f\u0449\u0438\u043a\u201d, \u0442\u043e \u0438 \u201cdisplay: grid;\u201d \u043c\u044b \u0432\u043a\u043b\u044e\u0447\u0438\u043c \u0442\u0443\u0434\u0430 \u0436\u0435.<\/p>\n<p>\u0418\u0442\u0430\u043a, \u043d\u0430\u043c \u043d\u0443\u0436\u043d\u043e \u043e\u0431\u0449\u0435\u0435 \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u043a\u043e\u043b\u043e\u043d\u043e\u043a \u0442\u0430\u0431\u043b\u0438\u0446\u044b. \u041e\u043d\u043e \u0441\u043a\u043b\u0430\u0434\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u0438\u0437 \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u0430 \u043a\u043e\u043b\u043e\u043d\u043e\u043a props.titles \u0438 props.cells. \u0414\u043b\u044f \u0440\u0430\u0441\u0447\u0435\u0442\u0430 \u043c\u043e\u0436\u043d\u043e \u0432\u0437\u044f\u0442\u044c \u043f\u0435\u0440\u0432\u044b\u0435 \u0441\u0442\u0440\u043e\u043a\u0438 \u044d\u0442\u0438\u0445 \u043c\u0430\u0441\u0441\u0438\u0432\u043e\u0432. \u0415\u0441\u043b\u0438 \u0431\u044b \u0443 \u043d\u0430\u0441 \u043a\u0430\u0436\u0434\u0430\u044f \u044f\u0447\u0435\u0439\u043a\u0430 \u0437\u0430\u043d\u0438\u043c\u0430\u043b\u0430 \u043e\u0434\u043d\u0443 \u043a\u043e\u043b\u043e\u043d\u043a\u0443, \u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e \u0431\u044b\u043b\u043e \u0431\u044b \u0437\u043d\u0430\u0442\u044c \u0434\u043b\u0438\u043d\u044b \u044d\u0442\u0438\u0445 \u043f\u0435\u0440\u0432\u044b\u0445 \u0441\u0442\u0440\u043e\u043a. \u041d\u043e, \u043f\u043e\u0441\u043a\u043e\u043b\u044c\u043a\u0443 \u0432 \u0441\u0442\u0440\u043e\u043a\u0430\u0445 \u0442\u0430\u0431\u043b\u0438\u0446\u044b \u043c\u043e\u0436\u0435\u0442 \u0432\u0441\u0442\u0440\u0435\u0442\u0438\u0442\u0441\u044f \u044f\u0447\u0435\u0439\u043a\u0430 \u0432\u0438\u0434\u0430 { text: &#8216;\u044f\u0447\u0435\u0439\u043a\u0430&#8217;, cols: 3 } \u0441 \u043b\u044e\u0431\u044b\u043c \u0447\u0438\u0441\u043b\u043e\u043c \u0432 cols, \u0442\u043e \u0434\u043b\u0438\u043d\u0430 \u0441\u0442\u0440\u043e\u043a\u0438 titles \u0438\u043b\u0438 cells \u043c\u043e\u0436\u0435\u0442 \u043d\u0435 \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u043e\u0432\u0430\u0442\u044c \u043a\u043e\u043b-\u0432\u0443 \u043a\u043e\u043b\u043e\u043d\u043e\u043a \u0432 \u043d\u0435\u0439. \u041f\u043e\u044d\u0442\u043e\u043c\u0443 \u0432\u043c\u0435\u0441\u0442\u043e \u0434\u043b\u0438\u043d\u044b \u043c\u0430\u0441\u0441\u0438\u0432\u0430 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u0444\u0443\u043d\u043a\u0446\u0438\u044f countCollsNum, \u0441\u043a\u043b\u0430\u0434\u044b\u0432\u0430\u044e\u0449\u0430\u044f \u043a\u043e\u043b\u043e\u043d\u043a\u0438 \u0447\u0435\u0440\u0435\u0437 .reduce() \u0441 \u0443\u0447\u0435\u0442\u043e\u043c cols.<\/p>\n<p>\u041f\u043e\u0441\u0447\u0438\u0442\u0430\u0435\u043c \u0438\u0445:<\/p>\n<pre><code class=\"javascript\">\/\/ \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u0432 &lt;script setup> \u0432 .\/components\/CommonTableAdaptive\/TableTemplate.vue import { computed, watch } from 'vue'; import { getColsNumber, setColsNumber } from '.\/computed-cols-number';  setColsNumber([props.titles[0], props.cells[0]]); watch(() => [props.titles[0], props.cells[0]], setColsNumber);  \/\/ .\/components\/CommonTableAdaptive\/computed-cols-number.js import { computed, ref } from 'vue';  const refColsNumber = ref(0); const getColsNumber = computed(() => refColsNumber.value);  const countCollsNum = (row) => row.reduce((sum, { cols }) => sum + (cols || 1), 0);  const setColsNumber = ([titlesFirstRow, cellsFirstRow]) => {   refColsNumber.value = countCollsNum(cellsFirstRow) + countCollsNum(titlesFirstRow); };  export { getColsNumber, setColsNumber };<\/code><\/pre>\n<p>\u041a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u043a\u043e\u043b\u043e\u043d\u043e\u043a \u043c\u044b \u0432\u044b\u0441\u0447\u0438\u0442\u0430\u043b\u0438, \u043f\u043e\u0440\u0430 \u0437\u0430\u0434\u0430\u0442\u044c \u0442\u0435\u0433\u0443 &lt;section> \u0441\u0442\u0438\u043b\u0438 \u0438 \u043a\u043b\u0430\u0441\u0441\u044b:<\/p>\n<pre><code class=\"javascript\">\/\/ \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u0432 &lt;script setup> \u0432 .\/components\/CommonTableAdaptive\/TableTemplate.vue const getSectionSt = computed(() => `display: grid;   grid-template-columns: repeat(${getColsNumber.value}, auto);`);  const getSectionCl = computed(() =>   props.classes &amp;&amp; 'outer' in props.classes   ? props.classes.outer : '');  \/\/ \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u0432 \u043a\u043e\u043d\u0435\u0446 \u0444\u0430\u0439\u043b\u0430 &lt;template>   &lt;section :class=\"getSectionCl\" :style=\"getSectionSt\">     There will be a table here.   &lt;\/section> &lt;\/template><\/code><\/pre>\n<p>\u0422\u0435\u043f\u0435\u0440\u044c, \u0435\u0441\u043b\u0438 \u043c\u044b \u0437\u0430\u043f\u0443\u0441\u0442\u0438\u043c <code>npm run dev<\/code> \u0432 \u043a\u043e\u043c\u0430\u043d\u0434\u043d\u043e\u0439 \u0441\u0442\u0440\u043e\u043a\u0435, \u0438 \u043f\u043e\u043d\u0430\u0436\u0438\u043c\u0430\u0435\u043c \u043d\u0430 \u043a\u043d\u043e\u043f\u043a\u0438 \u201cSaloon \/ Hatchback\u201d \/ \u201cEstate\u201d, \u0432 \u043a\u043e\u043d\u0441\u043e\u043b\u0438 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430 \u043c\u043e\u0436\u043d\u043e \u0443\u0432\u0438\u0434\u0435\u0442\u044c, \u043a\u0430\u043a \u0434\u0438\u043d\u0430\u043c\u0438\u0447\u0435\u0441\u043a\u0438 \u0438\u0437\u043c\u0435\u043d\u044f\u0435\u0442\u0441\u044f \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e grid-template-columns \u0443 &lt;section>. \u0417\u043d\u0430\u0447\u0438\u0442, \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u043a\u0430\u043a \u043d\u0430\u0434\u043e \ud83d\ude42<\/p>\n<h4>\u0428\u0430\u043f\u043a\u0430 \u0442\u0430\u0431\u043b\u0438\u0446\u044b<\/h4>\n<p>headTitles, headCols, titles \u0438 cells \u0432 props  \u2014 \u043c\u0430\u0441\u0441\u0438\u0432\u044b \u0438\u0437 \u0441\u0442\u0440\u043e\u043a \u0442\u0430\u0431\u043b\u0438\u0446\u044b, \u043a\u0430\u0436\u0434\u0430\u044f \u0441\u0442\u0440\u043e\u043a\u0430 \u2014 \u043c\u0430\u0441\u0441\u0438\u0432 \u0438\u0437 \u044f\u0447\u0435\u0435\u043a. \u042f\u0447\u0435\u0439\u043a\u0430 \u043c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c \u043b\u0438\u0431\u043e \u0441\u0442\u0440\u043e\u043a\u043e\u0439, \u043b\u0438\u0431\u043e \u0447\u0438\u0441\u043b\u043e\u043c, \u043b\u0438\u0431\u043e \u043e\u0431\u044a\u0435\u043a\u0442\u043e\u043c. \u041d\u0443\u0436\u043d\u0430 \u0444\u0443\u043d\u043a\u0446\u0438\u044f, \u043f\u0440\u0435\u043e\u0431\u0440\u0430\u0437\u043e\u0432\u044b\u0432\u0430\u044e\u0449\u0430\u044f \u0432\u0441\u0435 \u044f\u0447\u0435\u0439\u043a\u0438 \u0432 \u043e\u0431\u044a\u0435\u043a\u0442\u044b. \u041d\u0430\u043f\u0438\u0448\u0435\u043c \u0435\u0435 \u0432 \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u043e\u043c \u043c\u043e\u0434\u0443\u043b\u0435:<\/p>\n<pre><code class=\"javascript\">\/\/ .\/components\/CommonTableAdaptive\/transform-cells-to-object.js const transformCellsToObject = (rows) => rows   .map((row) => row     .map((cell) => (typeof cell === 'object' ? { ...cell } : { text: cell })));  export { transformCellsToObject };<\/code><\/pre>\n<p>\u0428\u0430\u043f\u043a\u0430 \u0442\u0430\u0431\u043b\u0438\u0446\u044b \u0441\u043e\u0441\u0442\u043e\u0438\u0442 \u0438\u0437 \u0434\u0432\u0443\u0445 \u0447\u0430\u0441\u0442\u0435\u0439 \u2014 headTitles \u0438 headCols. \u0417\u0430\u0439\u043c\u0435\u043c\u0441\u044f \u043f\u0435\u0440\u0432\u043e\u0439:<\/p>\n<pre><code class=\"javascript\">\/\/ .\/components\/CommonTableAdaptive\/seek-head-titles.js import { transformCellsToObject } from '.\/transform-cells-to-object';  const seekHeadTitles = (propsHeadTitles) => {   let rows;   if (propsHeadTitles) rows = transformCellsToObject(propsHeadTitles);   return rows; };  export { seekHeadTitles };  \/\/ .\/components\/CommonTableAdaptive\/TableTemplate.vue \/\/ \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u0432 &lt;script setup> import { seekHeadTitles } from '.\/seek-head-titles'; \/\/ \u043f\u0435\u0440\u0435\u0434 \u0437\u0430\u043a\u0440\u044b\u0442\u0438\u0435\u043c &lt;\/script setup> const getHeadTitles = computed(() => seekHeadTitles(   props.headTitles,   props.headCols, )); console.log(getHeadTitles.value);<\/code><\/pre>\n<p>\u0422\u0435\u043f\u0435\u0440\u044c \u0443 \u043d\u0430\u0441 \u043a\u0430\u0436\u0434\u0430\u044f \u044f\u0447\u0435\u0439\u043a\u0430  \u2014 \u043e\u0431\u044a\u0435\u043a\u0442. \u00a0\u0412 \u043a\u043b\u0430\u0441\u0441\u0438\u0447\u0435\u0441\u043a\u043e\u043c \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u0438\u0438 \u0448\u0430\u043f\u043a\u0430 \u0437\u0430\u0433\u043e\u043b\u043e\u0432\u043a\u043e\u0432 \u0441\u0442\u0440\u043e\u043a headTitles \u0440\u0430\u0437\u043c\u0435\u0449\u0435\u043d\u0430 \u0441\u043b\u0435\u0432\u0430, \u0448\u0430\u043f\u043a\u0430 \u043e\u0441\u0442\u0430\u043b\u044c\u043d\u044b\u0445 \u044f\u0447\u0435\u0435\u043a \u2014 \u0441\u043f\u0440\u0430\u0432\u0430. \u041d\u043e \u0443 \u044d\u0442\u0438\u0445 \u0447\u0430\u0441\u0442\u0435\u0439 \u0448\u0430\u043f\u043a\u0438 \u043c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c \u0440\u0430\u0437\u043d\u043e\u0435 \u0447\u0438\u0441\u043b\u043e \u0441\u0442\u0440\u043e\u043a, \u0438 \u0443 \u043d\u0430\u0441 \u043a\u0430\u043a \u0440\u0430\u0437 \u0442\u0430\u043a\u043e\u0439 \u0441\u043b\u0443\u0447\u0430\u0439. \u0420\u0435\u0448\u0438\u043c \u044d\u0442\u0443 \u0437\u0430\u0434\u0430\u0447\u0443:<\/p>\n<pre><code class=\"javascript\">\/\/ .\/components\/CommonTableAdaptive\/add-head-rows.js const addRowsToHead = (arrayOfRows, differenceLengths) => {   const firstRow = arrayOfRows.shift();   arrayOfRows.unshift(firstRow.map((cell) => ({       ...cell,       rows: 'rows' in cell ? cell.rows + differenceLengths: differenceLengths + 1,   })));   return arrayOfRows; };  export { addRowsToHead };<\/code><\/pre>\n<p>\u0424\u0443\u043d\u043a\u0446\u0438\u044f addRowsToHead() \u043f\u0440\u0438\u043d\u0438\u043c\u0430\u0435\u0442 \u043c\u0430\u0441\u0441\u0438\u0432 \u0438\u0437 \u0441\u0442\u0440\u043e\u043a \u0438 \u0440\u0430\u0437\u043d\u0438\u0446\u0443 \u0434\u043b\u0438\u043d \u0441\u0442\u0440\u043e\u043a, \u0438 \u043f\u0440\u0435\u043e\u0431\u0440\u0430\u0437\u0443\u0435\u0442 \u044f\u0447\u0435\u0439\u043a\u0438 \u043f\u0435\u0440\u0432\u043e\u0439 \u0441\u0442\u0440\u043e\u043a\u0438 \u043c\u0430\u0441\u0441\u0438\u0432\u0430  \u2014 \u0442\u0430\u043c \u043f\u043e\u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u043a\u043b\u044e\u0447 rows, \u0435\u0441\u043b\u0438 \u0435\u0433\u043e \u043d\u0435 \u0431\u044b\u043b\u043e, \u0438\u043d\u0430\u0447\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u044d\u0442\u043e\u0433\u043e \u043a\u043b\u044e\u0447\u0430 \u0443\u0432\u0435\u043b\u0438\u0447\u0438\u0432\u0430\u0435\u0442\u0441\u044f \u043d\u0430 \u0440\u0430\u0437\u043d\u0438\u0446\u0443 \u0441\u0442\u0440\u043e\u043a headTitles \u0438 headCols.<\/p>\n<p>\u0414\u043e\u0431\u0430\u0432\u0438\u043c \u043d\u043e\u0432\u0443\u044e \u0444\u0443\u043d\u043a\u0446\u0438\u044e \u0432 seekHeadTitles:<\/p>\n<pre><code class=\"javascript\">\/\/ .\/components\/CommonTableAdaptive\/seek-head-titles.js import { addRowsToHead } from '.\/add-head-rows'; import { transformCellsToObject } from '.\/transform-cells-to-object';  const seekHeadTitles = (propsHeadTitles, propsHeadCols) => {   let rows;   if (propsHeadTitles) rows = transformCellsToObject(propsHeadTitles);   if (rows &amp;&amp; propsHeadCols &amp;&amp; propsHeadCols.length > propsHeadTitles.length) {     rows = addRowsToHead(rows, propsHeadCols.length - propsHeadTitles.length);   }   return rows; };  export { seekHeadTitles };<\/code><\/pre>\n<p>\u0412 \u043a\u043e\u043d\u0441\u043e\u043b\u0438 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430 \u043f\u0440\u0438 \u0437\u0430\u043f\u0443\u0449\u0435\u043d\u043d\u043e\u043c dev-\u0440\u0435\u0436\u0438\u043c\u0435 \u043c\u044b \u0432\u0438\u0434\u0438\u043c, \u0447\u0442\u043e \u0443 \u0432\u0441\u0435\u0445 \u044f\u0447\u0435\u0435\u043a-\u043e\u0431\u044a\u0435\u043a\u0442\u043e\u0432 \u043f\u043e\u044f\u0432\u0438\u043b\u043e\u0441\u044c <code>rows: 2<\/code>. \u041e\u0442\u043b\u0438\u0447\u043d\u043e, \u0434\u0443\u043c\u0430\u0435\u043c \u0434\u0430\u043b\u044c\u0448\u0435.<\/p>\n<p>\u0422\u0435\u043f\u0435\u0440\u044c \u043d\u0430\u043c \u043d\u0443\u0436\u043d\u043e \u043c\u0430\u0441\u0441\u0438\u0432 \u0438\u0437 \u0441\u0442\u0440\u043e\u043a, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043c\u0430\u0441\u0441\u0438\u0432\u044b \u0438\u0437 \u044f\u0447\u0435\u0435\u043a, \u043f\u0440\u0435\u043e\u0431\u0440\u0430\u0437\u043e\u0432\u0430\u0442\u044c \u0432 \u043c\u0430\u0441\u0441\u0438\u0432 \u0438\u0437 \u044f\u0447\u0435\u0435\u043a. \u041d\u043e \u043f\u0440\u0438 \u044d\u0442\u043e\u043c \u043d\u0443\u0436\u043d\u043e \u0434\u0430\u0442\u044c \u044f\u0447\u0435\u0439\u043a\u0430\u043c \u0437\u043d\u0430\u043d\u0438\u044f, \u044f\u0432\u043b\u044f\u044e\u0442\u0441\u044f \u043b\u0438 \u043e\u043d\u0438 \u043f\u0435\u0440\u0432\u044b\u043c\u0438\/\u043f\u043e\u0441\u043b\u0435\u0434\u043d\u0438\u043c\u0438 \u0432 \u0440\u044f\u0434\u0443 \u0438 \u043a\u043e\u043b\u043e\u043d\u043a\u0435. \u041a\u0440\u043e\u043c\u0435 \u0442\u043e\u0433\u043e, \u044f\u0447\u0435\u0439\u043a\u0435 \u043d\u0443\u0436\u043d\u043e \u043f\u0435\u0440\u0435\u0434\u0430\u0442\u044c \u0442\u0438\u043f \u0431\u043b\u043e\u043a\u0430, \u043a \u043a\u043e\u0442\u043e\u0440\u043e\u043c\u0443 \u043e\u043d\u0430 \u043e\u0442\u043d\u043e\u0441\u0438\u0442\u0441\u044f, \u0447\u0442\u043e\u0431\u044b \u0432\u043f\u043e\u0441\u043b\u0435\u0434\u0441\u0442\u0432\u0438\u0438 \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0438\u0442\u044c \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u044e\u0449\u0438\u0435 \u043a\u043b\u0430\u0441\u0441\u044b. \u0418 \u044d\u0442\u0430 \u0444\u0443\u043d\u043a\u0446\u0438\u044f \u0442\u0430\u043a\u0436\u0435 \u043f\u0440\u0438\u0433\u043e\u0434\u0438\u0442\u0441\u044f \u0434\u043b\u044f \u0448\u0430\u043f\u043a\u0438 \u043a\u043e\u043b\u043e\u043d\u043e\u043a \u0442\u0430\u0431\u043b\u0438\u0446\u044b. \u041d\u0430\u043f\u0438\u0448\u0435\u043c \u0435\u0435:<\/p>\n<pre><code class=\"javascript\">\/\/ .\/components\/CommonTableAdaptive\/transform-rows-to-cells.js const transformRowsToCells = (rows, params = {}) => {   const { cellType, colFirst, colLast, rowFirst } = params;   const cells = [];   rows.forEach((row, iRow) => {     row.forEach((cellExt, iCol) => {       const cell = { ...cellExt, cellType };       if (iRow === 0 &amp;&amp; rowFirst) cell.rowFirst = true;       if (iCol === 0 &amp;&amp; colFirst) cell.colFirst = true;       if (iCol === row.length - 1 &amp;&amp; colLast) cell.colLast = true;       cells.push(cell);     });   });   return cells; };  export { transformRowsToCells };<\/code><\/pre>\n<p>\u0424\u0443\u043d\u043a\u0446\u0438\u044f \u043f\u0440\u0438\u043d\u0438\u043c\u0430\u0435\u0442 \u043c\u0430\u0441\u0441\u0438\u0432 \u0438\u0437 \u0441\u0442\u0440\u043e\u043a (\u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043c\u0430\u0441\u0441\u0438\u0432 \u0438\u0437 \u044f\u0447\u0435\u0435\u043a), \u0438 \u043e\u0431\u044a\u0435\u043a\u0442, \u0432 \u043a\u043e\u0442\u043e\u0440\u043e\u043c \u043f\u0435\u0440\u0435\u0434\u0430\u0435\u0442\u0441\u044f \u0442\u0438\u043f \u0431\u043b\u043e\u043a\u0430, \u0430 \u0442\u0430\u043a\u0436\u0435 \u043f\u0435\u0440\u0435\u0447\u0438\u0441\u043b\u0435\u043d\u043e, \u043d\u0443\u0436\u043d\u043e \u043b\u0438 \u043e\u0442\u043c\u0435\u0447\u0430\u0442\u044c \u043f\u0435\u0440\u0432\u044b\u0435\/\u043f\u043e\u0441\u043b\u0435\u0434\u043d\u0438\u0435 \u044f\u0447\u0435\u0439\u043a\u0438 \u0432 \u0440\u044f\u0434\u0430\u0445\/\u043a\u043e\u043b\u043e\u043d\u043a\u0430\u0445, \u0438 \u0442\u0438\u043f \u0431\u043b\u043e\u043a\u0430 \u0442\u0430\u0431\u043b\u0438\u0446\u044b (\u043a\u0440\u043e\u043c\u0435 rowLast  \u2014 \u043f\u043e\u0441\u043b\u0435\u0434\u043d\u0435\u0439 \u044f\u0447\u0435\u0439\u043a\u0438 \u0432 \u043a\u043e\u043b\u043e\u043d\u043a\u0435 \u0442\u0430\u0431\u043b\u0438\u0446\u044b, \u043f\u043e\u0442\u043e\u043c\u0443 \u0447\u0442\u043e \u0448\u0430\u043f\u043a\u0430 \u0442\u0430\u0431\u043b\u0438\u0446\u044b \u043d\u0438\u043a\u043e\u0433\u0434\u0430 \u0431\u0443\u0434\u0435\u0442 \u043f\u043e\u0441\u043b\u0435\u0434\u043d\u0438\u043c \u0440\u044f\u0434\u043e\u043c). \u041a\u0430\u0436\u0434\u0430\u044f \u044f\u0447\u0435\u0439\u043a\u0430 \u043f\u0440\u0435\u043e\u0431\u0440\u0430\u0437\u0443\u0435\u0442\u0441\u044f \u0432 \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0438\u0438 \u0441 \u044d\u0442\u0438\u043c\u0438 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u0430\u043c\u0438, \u0438 \u043d\u0430 \u0432\u044b\u0445\u043e\u0434\u0435 \u043c\u044b \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u043c \u043c\u0430\u0441\u0441\u0438\u0432 \u0438\u0437 \u044d\u0442\u0438\u0445 \u044f\u0447\u0435\u0435\u043a.<\/p>\n<p>\u041f\u043e\u0434\u043a\u043b\u044e\u0447\u0438\u043c \u043d\u0430\u043f\u0438\u0441\u0430\u043d\u043d\u044b\u0435 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 \u0432 seekHeadTitles:<\/p>\n<pre><code class=\"javascript\">\/\/ .\/components\/CommonTableAdaptive\/seek-head-titles.js import { addRowsToHead } from '.\/add-head-rows'; import { transformCellsToObject } from '.\/transform-cells-to-object'; import { transformRowsToCells } from '.\/transform-rows-to-cells';  const seekHeadTitles = (propsHeadTitles, propsHeadCols) => {   let rows;   if (propsHeadTitles) rows = transformCellsToObject(propsHeadTitles);   if (     rows &amp;&amp;     propsHeadCols &amp;&amp;     propsHeadCols.length > propsHeadTitles.length   ) {     rows = addRowsToHead(rows, propsHeadCols.length - propsHeadTitles.length);   }   let cells = [];   if (rows) {     cells = transformRowsToCells(rows, {       cellType: 'head',       colFirst: true,       rowFirst: true,     });   }   return cells; };  export { seekHeadTitles };<\/code><\/pre>\n<p>\u0412 \u043a\u043e\u043d\u0441\u043e\u043b\u0438 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430 \u043f\u0440\u0438 \u0437\u0430\u043f\u0443\u0449\u0435\u043d\u043d\u043e\u043c dev-\u0440\u0435\u0436\u0438\u043c\u0435 \u043c\u044b \u0432\u0438\u0434\u0438\u043c, \u0447\u0442\u043e \u0443 \u0432\u0441\u0435\u0445 \u044f\u0447\u0435\u0435\u043a-\u043e\u0431\u044a\u0435\u043a\u0442\u043e\u0432 \u043f\u043e\u044f\u0432\u0438\u043b\u043e\u0441\u044c <code>rows: 2, cellType: 'head'<\/code> \u0438 \u0443 \u043a\u0430\u043a\u0438\u0445 \u043d\u0430\u0434\u043e \u044f\u0447\u0435\u0435\u043a  \u2014 <code>colFirst: true, rowFirst: true<\/code>.<\/p>\n<p>\u041f\u0440\u0438\u043c\u0435\u0440\u043d\u043e \u0432\u0441\u0435 \u0442\u043e \u0436\u0435 \u0441\u0430\u043c\u043e\u0435 \u0434\u0435\u043b\u0430\u0435\u043c \u0434\u043b\u044f \u0431\u043b\u043e\u043a\u0430 headCols \u2014 \u0448\u0430\u043f\u043a\u0438 \u044f\u0447\u0435\u0435\u043a \u0442\u0430\u0431\u043b\u0438\u0446\u044b:<\/p>\n<pre><code class=\"javascript\">\/\/ .\/components\/CommonTableAdaptive\/seek-head-cols.js import { addRowsToHead } from '.\/add-head-rows'; import { transformCellsToObject } from '.\/transform-cells-to-object'; import { transformRowsToCells } from '.\/transform-rows-to-cells';  const seekHeadCols = (propsHeadCols, propsHeadTitles) => {   let rows;   if (propsHeadCols) rows = transformCellsToObject(propsHeadCols);   if (rows &amp;&amp; propsHeadTitles &amp;&amp; propsHeadTitles.length > propsHeadCols.length) {     rows = addRowsToHead(rows, propsHeadTitles.length - propsHeadCols.length);   }   let cells = [];   if (rows) {     cells = transformRowsToCells(rows, {       cellType: 'head',       colLast: true,       rowFirst: true,     });   }   return cells; };  export { seekHeadCols };<\/code><\/pre>\n<p>\u0422\u0435\u043f\u0435\u0440\u044c \u043d\u0430\u043c \u043d\u0443\u0436\u043d\u043e \u043f\u0440\u0435\u043e\u0431\u0440\u0430\u0437\u043e\u0432\u0430\u0442\u044c \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u043d\u044b\u0435 \u044f\u0447\u0435\u0439\u043a\u0438-\u043e\u0431\u044a\u0435\u043a\u0442\u044b \u0432 \u0442\u043e, \u0447\u0442\u043e \u043c\u043e\u0436\u043d\u043e \u0431\u0443\u0434\u0435\u0442 \u043f\u0435\u0440\u0435\u0434\u0430\u0442\u044c \u0432 &lt;template>. \u041d\u0430\u043f\u0438\u0448\u0435\u043c \u0435\u0449\u0435 \u043e\u0434\u043d\u0443 \u0444\u0443\u043d\u043a\u0446\u0438\u044e transformRowsToTemplate:<\/p>\n<pre><code class=\"javascript\">\/\/ .\/components\/CommonTableAdaptive\/transform-rows-to-template.js const bringArray = (arrayOrStr) =>   Array.isArray(arrayOrStr) ? arrayOrStr : [arrayOrStr];  const transformCellToTemplate = (cell, classes) => {   const { text, cols, rows, cellType, clAdd } = cell;      let st = cell.st || '';   if (cols) st += `grid-column-end: span ${cols};`;   if (rows) st += `grid-row-end: span ${rows};`;      const cl = [];   if ('eachCell' in classes) cl.push(...bringArray(classes.eachCell));   if (cellType in classes) {     if ('each' in classes[cellType]) {       cl.push(...bringArray(classes[cellType].each));     }     ['colFirst', 'colLast', 'rowFirst', 'rowLast'].forEach((typ) => {       if (typ in cell &amp;&amp; cell[typ] &amp;&amp; typ in classes[cellType]) {         cl.push(...bringArray(classes[cellType][typ]));       }     });   }   if (clAdd) cl.push(...bringArray(clAdd));   return { text, st, cl }; }; const transformRowsToTemplate = (cells, classes) =>   cells.map((cell) => transformCellToTemplate(cell, classes));  export { transformRowsToTemplate };<\/code><\/pre>\n<p>\u042d\u043a\u0441\u043f\u043e\u0440\u0442\u0438\u0440\u0443\u0435\u043c\u0430\u044f \u0444\u0443\u043d\u043a\u0446\u0438\u044f transformRowsToTemplate \u043f\u0440\u0438\u043d\u0438\u043c\u0430\u0435\u0442 \u043c\u0430\u0441\u0441\u0438\u0432 \u0438\u0437 \u044f\u0447\u0435\u0435\u043a \u0442\u0430\u0431\u043b\u0438\u0446\u044b \u0438 \u043a\u043b\u0430\u0441\u0441\u043e\u0432 \u0438\u0437 props \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430. \u041a\u0430\u0436\u0434\u0430\u044f \u044f\u0447\u0435\u0439\u043a\u0430 \u043c\u0430\u0441\u0441\u0438\u0432\u0430 \u043f\u0440\u0435\u043e\u0431\u0440\u0430\u0437\u0443\u0435\u0442\u0441\u044f \u0444\u0443\u043d\u043a\u0446\u0438\u0435\u0439 transformCellToTemplate.<\/p>\n<p>\u0424\u0443\u043d\u043a\u0446\u0438\u044f transformCellToTemplate \u0432\u044b\u0434\u0430\u0435\u0442 \u0442\u043e, \u0447\u0442\u043e \u043d\u0443\u0436\u043d\u043e \u0434\u043b\u044f &lt;template> \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430:<\/p>\n<ul>\n<li>\n<p>text  \u2014 \u0441\u043e\u0434\u0435\u0440\u0436\u0430\u043d\u0438\u0435 \u044f\u0447\u0435\u0439\u043a\u0438  <\/p>\n<\/li>\n<li>\n<p>cl \u2014 \u043c\u0430\u0441\u0441\u0438\u0432 css-\u043a\u043b\u0430\u0441\u0441\u043e\u0432, \u0441\u0444\u043e\u0440\u043c\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u0439 \u0432 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438 \u043e\u0442 \u0442\u043e\u0433\u043e, \u0435\u0441\u0442\u044c \u043b\u0438 \u043a\u043b\u0430\u0441\u0441\u044b \u0432 \u0441\u0430\u043c\u043e\u0439 \u044f\u0447\u0435\u0439\u043a\u0435, \u043f\u043b\u044e\u0441 \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u0442 \u0441\u043e\u043e\u0442\u0432\u0435\u0441\u0442\u0432\u0443\u044e\u0449\u0438\u0435 \u043a\u043b\u0430\u0441\u0441\u044b \u0438\u0437 props.classes (\u0441 \u0443\u0447\u0435\u0442\u043e\u043c \u0442\u0438\u043f\u0430 \u0431\u043b\u043e\u043a\u0430 \u0442\u0430\u0431\u043b\u0438\u0446\u044b \u0438 \u0442\u043e\u0433\u043e, \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u043b\u0438 \u044f\u0447\u0435\u0439\u043a\u0430 \u043f\u0435\u0440\u0432\u043e\u0439\/\u043f\u043e\u0441\u043b\u0435\u0434\u043d\u0435\u0439 \u0432 \u0440\u044f\u0434\u0443\/\u043a\u043e\u043b\u043e\u043d\u043a\u0435)<\/p>\n<\/li>\n<li>\n<p>st \u2014 \u0441\u0442\u0440\u043e\u043a\u0430 \u0438\u043d\u043b\u0430\u0439\u043d-\u0441\u0442\u0438\u043b\u0435\u0439. \u0415\u0441\u043b\u0438 \u0435\u0441\u0442\u044c \u043a\u043b\u044e\u0447 \u0441\u043e \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435\u043c rows, \u0442\u043e \u043a \u0441\u0442\u0438\u043b\u044f\u043c \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u0442\u0441\u044f <code>grid-row-end: span ${rows};<\/code> (\u044f\u0447\u0435\u0439\u043a\u0430 \u0440\u0430\u0441\u0442\u044f\u0433\u0438\u0432\u0430\u0435\u0442\u0441\u044f \u043f\u043e \u0432\u0435\u0440\u0442\u0438\u043a\u0430\u043b\u0438), \u0435\u0441\u043b\u0438 cols \u2014 <code>grid-column-end: span ${cols};<\/code> (\u0440\u0430\u0441\u0442\u044f\u0433\u0438\u0432\u0430\u0435\u0442\u0441\u044f \u043f\u043e \u0433\u043e\u0440\u0438\u0437\u043e\u043d\u0442\u0430\u043b\u0438).<\/p>\n<\/li>\n<\/ul>\n<p>\u0421\u043e\u0435\u0434\u0438\u043d\u0438\u043c \u0432\u0441\u0435 \u043d\u0430\u043f\u0438\u0441\u0430\u043d\u043d\u043e\u0435 \u0432 TableTemplate.vue:<\/p>\n<pre><code class=\"javascript\">\/\/ .\/components\/CommonTableAdaptive\/TableTemplate.vue \/\/ \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u0432 &lt;script setup> import { seekHeadCols } from '.\/seek-head-cols'; import { transformRowsToTemplate } from '.\/transform-rows-to-template';  \/\/ \u0443\u0434\u0430\u043b\u0438\u0442\u044c console.log(), \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u043f\u043e\u0441\u043b\u0435 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 getHeadTitles const getHeadcols = computed(() => seekHeadCols(props.headCols, props.headTitles)); const getTableHead = computed(() => transformRowsToTemplate(   [...getHeadTitles.value, ...getHeadcols.value],   props.classes ));    \/\/ \u0438\u0437\u043c\u0435\u043d\u0438\u0442\u044c &lt;template> &lt;template>   &lt;section :class=\"getSectionCl\" :style=\"getSectionSt\">     &lt;h6 v-for=\"({ text, cl, st }, i) in getTableHead\" :key=\"`cell-head-${i}`\"       :class=\"cl\" :style=\"st\" v-html=\"text\">&lt;\/h6>   &lt;\/section> &lt;\/template><\/code><\/pre>\n<p>\u0418 \u0441\u043c\u043e\u0442\u0440\u0438\u043c, \u0447\u0442\u043e \u043f\u043e\u043b\u0443\u0447\u0438\u043b\u043e\u0441\u044c:<\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/1e7\/a31\/df7\/1e7a31df744d82e6cbbc8c32b961f172.gif\" alt=\"\u0417\u0430\u0433\u043e\u043b\u043e\u0432\u043e\u043a \u0442\u0430\u0431\u043b\u0438\u0446\u044b \u0432 \u043a\u043b\u0430\u0441\u0441\u0438\u0447\u0435\u0441\u043a\u043e\u043c \u0432\u0438\u0434\u0435 \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u0435\u0442\u0441\u044f \u0442\u0430\u043a, \u043a\u0430\u043a \u043d\u0443\u0436\u043d\u043e. \u041a\u0440\u043e\u043c\u0435 \u0442\u043e\u0433\u043e, \u043e\u043d \u0438\u043d\u0442\u0435\u0440\u0430\u043a\u0442\u0438\u0432\u0435\u043d \u2014 \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u0441\u0442\u043e\u043b\u0431\u0446\u043e\u0432 \u043c\u0435\u043d\u044f\u0435\u0442\u0441\u044f \u0432 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438 \u043e\u0442 \u0442\u0438\u043f\u0430 \u043a\u0443\u0437\u043e\u0432\u0430\" title=\"\u0417\u0430\u0433\u043e\u043b\u043e\u0432\u043e\u043a \u0442\u0430\u0431\u043b\u0438\u0446\u044b \u0432 \u043a\u043b\u0430\u0441\u0441\u0438\u0447\u0435\u0441\u043a\u043e\u043c \u0432\u0438\u0434\u0435 \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u0435\u0442\u0441\u044f \u0442\u0430\u043a, \u043a\u0430\u043a \u043d\u0443\u0436\u043d\u043e. \u041a\u0440\u043e\u043c\u0435 \u0442\u043e\u0433\u043e, \u043e\u043d \u0438\u043d\u0442\u0435\u0440\u0430\u043a\u0442\u0438\u0432\u0435\u043d \u2014 \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u0441\u0442\u043e\u043b\u0431\u0446\u043e\u0432 \u043c\u0435\u043d\u044f\u0435\u0442\u0441\u044f \u0432 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438 \u043e\u0442 \u0442\u0438\u043f\u0430 \u043a\u0443\u0437\u043e\u0432\u0430\" width=\"1938\" height=\"201\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/1e7\/a31\/df7\/1e7a31df744d82e6cbbc8c32b961f172.gif\"\/><figcaption>\u0417\u0430\u0433\u043e\u043b\u043e\u0432\u043e\u043a \u0442\u0430\u0431\u043b\u0438\u0446\u044b \u0432 \u043a\u043b\u0430\u0441\u0441\u0438\u0447\u0435\u0441\u043a\u043e\u043c \u0432\u0438\u0434\u0435 \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u0435\u0442\u0441\u044f \u0442\u0430\u043a, \u043a\u0430\u043a \u043d\u0443\u0436\u043d\u043e. \u041a\u0440\u043e\u043c\u0435 \u0442\u043e\u0433\u043e, \u043e\u043d \u0438\u043d\u0442\u0435\u0440\u0430\u043a\u0442\u0438\u0432\u0435\u043d \u2014 \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u0441\u0442\u043e\u043b\u0431\u0446\u043e\u0432 \u043c\u0435\u043d\u044f\u0435\u0442\u0441\u044f \u0432 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438 \u043e\u0442 \u0442\u0438\u043f\u0430 \u043a\u0443\u0437\u043e\u0432\u0430<\/figcaption><\/figure>\n<p>\u0412\u0441\u0435 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f  \u2014 \u0432 \u043a\u043e\u043c\u043c\u0438\u0442\u0435 \u201cClassic table: head\u201d<\/p>\n<h4>\u041a\u043b\u0430\u0441\u0441\u0438\u0447\u0435\u0441\u043a\u0430\u044f \u0442\u0430\u0431\u043b\u0438\u0446\u0430 \u0446\u0435\u043b\u0438\u043a\u043e\u043c<\/h4>\n<p>\u0417\u0430\u0439\u043c\u0435\u043c\u0441\u044f \u043e\u0441\u0442\u0430\u043b\u044c\u043d\u044b\u043c\u0438 \u044f\u0447\u0435\u0439\u043a\u0430\u043c\u0438 \u0442\u0430\u0431\u043b\u0438\u0446\u044b. \u0421\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u043d\u043e\u0432\u044b\u0439 \u0444\u0430\u0439\u043b \u0434\u043b\u044f \u044d\u0442\u043e\u0433\u043e:<\/p>\n<pre><code class=\"javascript\">\/\/ .\/components\/CommonTableAdaptive\/seek-table-cells.js import { transformCellsToObject } from '.\/transform-cells-to-object';  const addTitleCells = (propsTitles, iRow) => {   const cells = [];   propsTitles[iRow].forEach((cell, iCol) => {     cells.push({       ...cell,       colFirst: iCol === 0,       rowLast: iRow === propsTitles.length - 1,       cellType: 'titles',     });   });   return cells; };  const addOtherCells = (row, iRow, rowsLength) => {   const cells = [];   row.forEach((cell, iCell) => {     cells.push({       ...cell,       colLast: iCell === row.length - 1,       rowLast: iRow === rowsLength - 1,       cellType: 'cells',     });   });   return cells; };  const seekTableCells = (propsTitlesExt, propsCellsExt) => {   const propsTitles = transformCellsToObject(propsTitlesExt);   const propsCells = transformCellsToObject(propsCellsExt);   const cells = [];   propsCells.forEach((row, iRow) => {     cells.push(...addTitleCells(propsTitles, iRow));     cells.push(...addOtherCells(row, iRow, propsCells.length));   });   return cells; };  export { seekTableCells };<\/code><\/pre>\n<p>\u0412 \u044d\u043a\u0441\u043f\u043e\u0440\u0442\u0438\u0440\u0443\u0435\u043c\u043e\u0439 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 seekTableCells \u043c\u044b \u0442\u0440\u0430\u043d\u0441\u0444\u043e\u0440\u043c\u0438\u0440\u0443\u0435\u043c \u044f\u0447\u0435\u0439\u043a\u0438 \u0432 \u043c\u0430\u0441\u0441\u0438\u0432\u0430\u0445 props.titles \u0438 props.cells \u0432 \u043e\u0431\u044a\u0435\u043a\u0442\u044b, \u043f\u043e\u0441\u043b\u0435 \u044d\u0442\u043e\u0433\u043e \u0440\u0430\u0437\u0431\u0438\u0440\u0430\u0435\u043c props.cells \u043f\u043e \u0441\u0442\u0440\u043e\u043a\u0430\u043c \u0442\u0430\u0431\u043b\u0438\u0446\u044b, \u0441\u043d\u0430\u0447\u0430\u043b\u0430 \u043f\u043e \u043d\u043e\u043c\u0435\u0440\u0443 \u0441\u0442\u0440\u043e\u043a\u0438 \u0442\u0430\u0431\u043b\u0438\u0446\u044b \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u043c \u0432 \u043c\u0430\u0441\u0441\u0438\u0432 \u044f\u0447\u0435\u0439\u043a\u0438 \u0438\u0437 \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u044e\u0449\u0435\u0433\u043e \u0440\u044f\u0434\u0430 props.titles, \u0438 \u0437\u0430\u0442\u0435\u043c &#8212; \u0438\u0437 \u0440\u044f\u0434\u0430 props.cells. \u041a \u0442\u0435\u043c \u044f\u0447\u0435\u0439\u043a\u0430\u043c, \u0433\u0434\u0435 \u044d\u0442\u043e \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e, \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u043c \u043a\u043b\u044e\u0447\u0438 colFirst, colLast \u0438 rowLast (rowFirst \u0431\u044b\u0442\u044c \u043d\u0435 \u043c\u043e\u0436\u0435\u0442, \u043f\u043e\u0442\u043e\u043c\u0443 \u0447\u0442\u043e \u0432\u044b\u0448\u0435  \u2014 \u0448\u0430\u043f\u043a\u0430 \u0442\u0430\u0431\u043b\u0438\u0446\u044b).<\/p>\n<p>\u0418\u043c\u043f\u043e\u0440\u0442\u0438\u0440\u0443\u0435\u043c \u043d\u0430\u043f\u0438\u0441\u0430\u043d\u043d\u043e\u0435 \u0432 TableTemplate.vue:<\/p>\n<pre><code class=\"javascript\">\/\/ .\/components\/CommonTableAdaptive\/TableTemplate.vue: \/\/ \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u0432 &lt;script setup> import { seekTableCells } from '.\/seek-table-cells';  const getTableCells = computed(() => transformRowsToTemplate(   seekTableCells(props.titles, props.cells),   props.classes, ));  \/\/ \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u0432 &lt;template> \u043f\u0435\u0440\u0435\u0434 \u0437\u0430\u043a\u0440\u044b\u0432\u0430\u044e\u0449\u0438\u043c &lt;\/section> &lt;p v-for=\"({ text, st, cl }, i) in getTableCells\" :key=\"`cell-${i}`\"   :class=\"cl\" :style=\"st\" v-html=\"text\">&lt;\/p><\/code><\/pre>\n<p>\u0421\u043c\u043e\u0442\u0440\u0438\u043c, \u0447\u0442\u043e \u043f\u043e\u043b\u0443\u0447\u0438\u043b\u043e\u0441\u044c\u2026 \u0423\u043f\u0441, \u0443 \u043d\u0430\u0441 \u043d\u0435\u043f\u0440\u0430\u0432\u0438\u043b\u044c\u043d\u043e \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u044e\u0442\u0441\u044f \u043f\u043e\u0441\u043b\u0435\u0434\u043d\u0438\u0435 \u044f\u0447\u0435\u0439\u043a\u0438 \u0432 \u043a\u043e\u043b\u043e\u043d\u043a\u0435 (\u2193). \u0410 \u0435\u0441\u043b\u0438 \u043c\u044b \u043f\u0440\u043e\u0432\u0435\u0440\u0438\u043c \u043f\u0435\u0440\u0432\u044b\u0435 \u044f\u0447\u0435\u0439\u043a\u0438 \u0432 \u0440\u044f\u0434\u0443 (\u2190), \u0442\u043e \u0442\u0430\u043c \u0442\u043e\u0436\u0435 \u0431\u0443\u0434\u0435\u0442 \u043e\u0448\u0438\u0431\u043a\u0430. \u0412\u0441\u0435 \u0434\u0435\u043b\u043e \u0432 \u0442\u043e\u043c, \u0447\u0442\u043e \u043c\u044b \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u043c \u0438\u0445 \u043f\u043e \u0438\u043d\u0434\u0435\u043a\u0441\u0443 \u044f\u0447\u0435\u0439\u043a\u0438 \u0432 \u043c\u0430\u0441\u0441\u0438\u0432\u0435 \u0441\u0442\u0440\u043e\u043a\u0438 \u0438 \u0438\u043d\u0434\u0435\u043a\u0441\u0443 \u0441\u0442\u0440\u043e\u043a\u0438 \u0432 \u043c\u0430\u0441\u0441\u0438\u0432\u0435 \u0431\u043b\u043e\u043a\u0430. \u0422\u043e \u0435\u0441\u0442\u044c \u0443 \u043c\u0430\u0441\u0441\u0438\u0432\u0430 rows \u0441 \u0434\u043b\u0438\u043d\u043e\u0439 length = 2<\/p>\n<pre><code class=\"javascript\">rows = [   [1, 2], \/\/ row   [3, 4], \/\/ row ] <\/code><\/pre>\n<p>colFirst = true \u0443 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 1 \u0438 3 (\u0438\u0445 \u0438\u043d\u0434\u0435\u043a\u0441 \u0432 \u043c\u0430\u0441\u0441\u0438\u0432\u0430\u0445 row === 0, \u0438 rowLast \u0443 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 3 \u0438 4 (\u0438\u043d\u0434\u0435\u043a\u0441 \u0441\u0442\u0440\u043e\u043a\u0438, \u0432 \u043a\u043e\u0442\u043e\u0440\u043e\u0439 \u043e\u043d\u0438 \u0441\u043e\u0441\u0442\u043e\u044f\u0442, \u0440\u0430\u0432\u0435\u043d rows.length &#8212; 1). \u041d\u043e \u0432 \u043d\u0430\u0448\u0435\u043c \u0441\u043b\u0443\u0447\u0430\u0435 \u043c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c \u0442\u0430\u043a:<\/p>\n<pre><code class=\"javascript\">rows = [   [{ text: 1, rows: 2 }, 2], \/\/ row   [4], \/\/ row ]<\/code><\/pre>\n<p>\u0417\u0434\u0435\u0441\u044c \u043f\u0435\u0440\u0432\u0430\u044f \u044f\u0447\u0435\u0439\u043a\u0430 \u0432 \u043f\u0435\u0440\u0432\u043e\u043c \u043c\u0430\u0441\u0441\u0438\u0432\u0435 row \u0437\u0430\u043d\u0438\u043c\u0430\u0435\u0442 \u0434\u0432\u0430 \u043c\u0435\u0441\u0442\u0430, \u201c\u0440\u0430\u0441\u0442\u044f\u0433\u0438\u0432\u0430\u0435\u0442\u0441\u044f\u201d \u043d\u0430 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0443\u044e \u0441\u0442\u0440\u043e\u043a\u0443. \u0418 \u0443 \u043d\u0435\u0435 \u0434\u043e\u043b\u0436\u043d\u043e \u0431\u044b\u0442\u044c <code>rowLast = true<\/code>, \u0438 \u043e\u043f\u0438\u0441\u0430\u043d\u043d\u0430\u044f \u043b\u043e\u0433\u0438\u043a\u0430 \u043d\u0435 \u0441\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u0435\u0442. \u0418 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0430\u044f \u043e\u0448\u0438\u0431\u043a\u0430 \u2014 \u0443 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 4, \u0443 \u043a\u043e\u0442\u043e\u0440\u043e\u0433\u043e colFirst = false, \u0445\u043e\u0442\u044c \u043e\u043d \u0438 \u043f\u0435\u0440\u0432\u044b\u0439 \u0432 \u0441\u0432\u043e\u0435\u043c \u0440\u044f\u0434\u0443.<\/p>\n<p>\u041d\u0430\u043f\u0438\u0448\u0435\u043c \u043f\u0440\u0430\u0432\u0438\u043b\u044c\u043d\u0443\u044e \u0444\u0443\u043d\u043a\u0446\u0438\u044e \u0434\u043b\u044f \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u0438\u044f, \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u043b\u0438 \u044f\u0447\u0435\u0439\u043a\u0430 \u043f\u0435\u0440\u0432\u043e\u0439 \u0432 \u043d\u0430\u0448\u0435\u0439 \u0442\u0430\u0431\u043b\u0438\u0446\u0435. \u0412\u044b\u043d\u0435\u0441\u0435\u043c \u0435\u0435 \u0432 \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u044b\u0439 \u0444\u0430\u0439\u043b, \u043f\u043e\u0442\u043e\u043c\u0443 \u0447\u0442\u043e \u044d\u0442\u0430 \u0436\u0435 \u043e\u0448\u0438\u0431\u043a\u0430 \u0430\u043a\u0442\u0443\u0430\u043b\u044c\u043d\u0430 \u0434\u043b\u044f \u0448\u0430\u043f\u043a\u0438 \u0442\u0430\u0431\u043b\u0438\u0446\u044b, \u0445\u043e\u0442\u044c \u043e\u043d\u0430 \u0442\u0430\u043c \u0438 \u043d\u0435 \u043f\u0440\u043e\u044f\u0432\u0438\u043b\u0430\u0441\u044c:<\/p>\n<pre><code class=\"javascript\">\/\/ .\/components\/CommonTableAdaptive\/check-col-first.js let prevColFirst = 0;  const checkColFirst = ({ rows }, iCol) => {   let colFirst;   if (iCol === 0) {     if (prevColFirst === 0) {       colFirst = true;       if (rows) prevColFirst = rows - 1;     } else prevColFirst -= 1;   }   return colFirst; };  export { checkColFirst };<\/code><\/pre>\n<p>\u0421\u043d\u0430\u0447\u0430\u043b\u0430 (\u0432\u043d\u0435 \u0444\u0443\u043d\u043a\u0446\u0438\u0438) \u0437\u0430\u0432\u043e\u0434\u0438\u043c \u0441\u0447\u0435\u0442\u0447\u0438\u043a <code>prevColFirst = 0<\/code>. \u0421\u0430\u043c\u0430 \u0444\u0443\u043d\u043a\u0446\u0438\u044f checkColFirst \u043f\u0440\u0438\u043d\u0438\u043c\u0430\u0435\u0442 \u0434\u0432\u0430 \u0430\u0440\u0433\u0443\u043c\u0435\u0442\u0430 \u2014 \u044f\u0447\u0435\u0439\u043a\u0443-\u043e\u0431\u044a\u0435\u043a\u0442 (\u043d\u0430\u0441 \u0438\u043d\u0442\u0435\u0440\u0435\u0441\u0443\u0435\u0442 \u0442\u043e\u043b\u044c\u043a\u043e \u0435\u0435 \u043a\u043b\u044e\u0447 rows, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u0432\u043c\u0435\u0441\u0442\u043e <code>cell<\/code> \u043c\u044b \u043f\u0438\u0448\u0435\u043c <code>{ rows }<\/code>, \u0438 \u0438\u043d\u0434\u0435\u043a\u0441 \u044d\u0442\u043e\u0439 \u044f\u0447\u0435\u0439\u043a\u0438 \u0432 \u0441\u0442\u0440\u043e\u043a\u0435 \u0440\u044f\u0434\u0443. \u0415\u0441\u043b\u0438 <code>iCol === 0<\/code> (\u043f\u0435\u0440\u0432\u0430\u044f \u044f\u0447\u0435\u0439\u043a\u0430 \u0432 \u0441\u0442\u0440\u043e\u043a\u0435) \u2014 \u0441\u043c\u043e\u0442\u0440\u0438\u043c \u043d\u0430 \u0441\u0447\u0435\u0442\u0447\u0438\u043a prevColFirst. \u0415\u0441\u043b\u0438 \u043e\u043d \u0440\u0430\u0432\u0435\u043d \u043d\u0443\u043b\u044e, \u0437\u043d\u0430\u0447\u0438\u0442 \u0438\u0441\u0441\u043b\u0435\u0434\u0443\u0435\u043c\u0430\u044f \u044f\u0447\u0435\u0439\u043a\u0430 \u2014 \u043f\u0435\u0440\u0432\u0430\u044f \u0432 \u0440\u044f\u0434\u0443. \u0415\u0441\u043b\u0438 \u0443 \u043d\u0435\u0435 \u0435\u0441\u0442\u044c \u043a\u043b\u044e\u0447 rows, \u0437\u043d\u0430\u0447\u0438\u0442 \u044f\u0447\u0435\u0439\u043a\u0430 \u201c\u0440\u0430\u0441\u0442\u044f\u0433\u0438\u0432\u0430\u0435\u0442\u0441\u044f\u201d \u0432\u043d\u0438\u0437, \u0438 \u043c\u044b \u0443\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u0435\u043c <code>prevColFirst = rows - 1<\/code> \u2014 \u0442\u0440\u0438\u0433\u0433\u0435\u0440 \u0434\u043b\u044f \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0445 \u043f\u0435\u0440\u0432\u044b\u0445 \u044f\u0447\u0435\u0435\u043a. \u0415\u0441\u043b\u0438 <code>prevColFirst !== 0<\/code>, \u0437\u043d\u0430\u0447\u0438\u0442 \u044f\u0447\u0435\u0439\u043a\u0430 \u043f\u0435\u0440\u0432\u043e\u0439 \u0432 \u0440\u044f\u0434\u0443 \u043d\u0435 \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f, \u0434\u0430\u0436\u0435 \u0435\u0441\u043b\u0438 \u043e\u043d\u0430 \u043f\u0435\u0440\u0432\u0430\u044f \u0432 \u043c\u0430\u0441\u0441\u0438\u0432\u0435. \u0412 \u0442\u0430\u043a\u043e\u043c \u0441\u043b\u0443\u0447\u0430\u0435 \u0443\u043c\u0435\u043d\u044c\u0448\u0430\u0435\u043c prevColFirst \u043d\u0430 \u0435\u0434\u0438\u043d\u0438\u0446\u0443.<\/p>\n<p>\u041f\u043e\u0434\u043a\u043b\u044e\u0447\u0430\u0435\u043c \u043d\u0430\u043f\u0438\u0441\u0430\u043d\u043d\u0443\u044e \u0444\u0443\u043d\u043a\u0446\u0438\u044e:<\/p>\n<pre><code class=\"javascript\">\/\/ .\/components\/CommonTableAdaptive\/seek-table-cells.js \/\/ \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c import { checkColFirst } from '.\/check-col-first'; \/\/ \u0437\u0430\u043c\u0435\u043d\u0438\u0442\u044c \u0441\u0442\u0440\u043e\u043a\u0443 'colFirst: iCol === 0' \u0432\u043d\u0443\u0442\u0440\u0438 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 addTitleCells colFirst: checkColFirst(cell, iCol),  \/\/ .\/components\/CommonTableAdaptive\/transform-rows-to-cells.js \/\/ \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c import { checkColFirst } from '.\/check-col-first'; \/\/ \u0437\u0430\u043c\u0435\u043d\u0438\u0442\u044c \u0441\u0442\u0440\u043e\u043a\u0443 'if (iCol === 0 &amp;&amp; colFirst) cell.colFirst = true;' \/\/ \u0432\u043d\u0443\u0442\u0440\u0438 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 transformRowsToCells if (colFirst) cell.colFirst = checkColFirst(cell, iCol);<\/code><\/pre>\n<p>\u0422\u0435\u043f\u0435\u0440\u044c \u0440\u0430\u0437\u0431\u0435\u0440\u0435\u043c\u0441\u044f \u0441 rowLast. \u042d\u0442\u043e\u0442 \u043a\u043b\u044e\u0447 \u043d\u0430\u043c \u043d\u0443\u0436\u0435\u043d \u0442\u043e\u043b\u044c\u043a\u043e \u0434\u043b\u044f seekTableCells, \u0442\u0430\u043a \u0447\u0442\u043e \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u0437\u0430\u043f\u0438\u0441\u0430\u0442\u044c \u0444\u0443\u043d\u043a\u0446\u0438\u044e \u0432 seek-table-cells.js:<\/p>\n<pre><code class=\"javascript\">\/\/ .\/components\/CommonTableAdaptive\/seek-table-cells.js const checkRowLast = ({ rows }, iRow, rowsLength) =>   iRow + (rows || 1) === rowsLength;    \/\/ \u0437\u0430\u043c\u0435\u043d\u0438\u0442\u044c \u0441\u0442\u0440\u043e\u043a\u0443 'rowLast: iRow === propsTitles.length - 1,' \u0432\u043d\u0443\u0442\u0440\u0438 addTitleCells rowLast: checkRowLast(cell, iRow, propsTitles.length), \/\/ \u0437\u0430\u043c\u0435\u043d\u0438\u0442\u044c \u0441\u0442\u0440\u043e\u043a\u0443 'rowLast: iRow === rowsLength - 1,' \u0432\u043d\u0443\u0442\u0440\u0438 addOtherCells rowLast: checkRowLast(cell, iRow, rowsLength),<\/code><\/pre>\n<p>\u0424\u0443\u043d\u043a\u0446\u0438\u044f checkRowLast \u043f\u0440\u0438\u043d\u0438\u043c\u0430\u0435\u0442 \u0430\u0440\u0433\u0443\u043c\u0435\u043d\u0442\u044b: cell (\u043d\u0430\u0441 \u0438\u043d\u0442\u0435\u0440\u0435\u0441\u0443\u0435\u0442 rows), iRow &#8212; \u0438\u043d\u0434\u0435\u043a\u0441 \u0441\u0442\u0440\u043e\u043a\u0438 \u0442\u0430\u0431\u043b\u0438\u0446\u044b \u0438 rowsLength &#8212; \u043a\u043e\u043b-\u0432\u043e \u0441\u0442\u0440\u043e\u043a \u0432 \u0442\u0430\u0431\u043b\u0438\u0446\u0435. \u041f\u043e\u0441\u043b\u0435\u0434\u043d\u044f\u044f \u044f\u0447\u0435\u0439\u043a\u0430 \u0432 \u043a\u043e\u043b\u043e\u043d\u043a\u0435 &#8212; \u0435\u0441\u043b\u0438 <code>iRow === rowsLength - 1<\/code> \u0438\u043b\u0438 \u0435\u0441\u043b\u0438 <code>iRows + rows === rowsLength<\/code><\/p>\n<p>\u041f\u0440\u043e\u0432\u0435\u0440\u044f\u0435\u043c\u00a0\u2014 \u0432\u0441\u0435 \u0437\u0430\u043c\u0435\u0447\u0430\u0442\u0435\u043b\u044c\u043d\u043e:<\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/a04\/975\/bb3\/a04975bb375ffabaa4e8c87b86ddff37.png\" alt=\"\u0418\u043d\u0442\u0435\u0440\u0430\u043a\u0442\u0438\u0432\u043d\u0430\u044f \u0442\u0430\u0431\u043b\u0438\u0446\u0430 \u0432 \u043a\u043b\u0430\u0441\u0441\u0438\u0447\u0435\u0441\u043a\u043e\u043c \u0432\u0438\u0434\u0435 \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u0435\u0442\u0441\u044f \u0442\u0430\u043a, \u043a\u0430\u043a \u0438 \u0431\u044b\u043b\u043e \u0437\u0430\u0434\u0443\u043c\u0430\u043d\u043e. \u041f\u0440\u0438\u0447\u0435\u043c \u0441 \u044f\u0447\u0435\u0439\u043a\u0430\u043c\u0438, \u043e\u0431\u044a\u0435\u0434\u0438\u043d\u0435\u043d\u043d\u044b\u043c\u0438 \u043a\u0430\u043a \u0432 \u0440\u044f\u0434\u0430\u0445 (\u043f\u043e \u0433\u043e\u0440\u0438\u0437\u043e\u043d\u0442\u0430\u043b\u0438), \u0442\u0430\u043a \u0438 \u0432 \u043a\u043e\u043b\u043e\u043d\u043a\u0430\u0445 (\u043f\u043e \u0432\u0435\u0440\u0442\u0438\u043a\u0430\u043b\u0438)\" title=\"\u0418\u043d\u0442\u0435\u0440\u0430\u043a\u0442\u0438\u0432\u043d\u0430\u044f \u0442\u0430\u0431\u043b\u0438\u0446\u0430 \u0432 \u043a\u043b\u0430\u0441\u0441\u0438\u0447\u0435\u0441\u043a\u043e\u043c \u0432\u0438\u0434\u0435 \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u0435\u0442\u0441\u044f \u0442\u0430\u043a, \u043a\u0430\u043a \u0438 \u0431\u044b\u043b\u043e \u0437\u0430\u0434\u0443\u043c\u0430\u043d\u043e. \u041f\u0440\u0438\u0447\u0435\u043c \u0441 \u044f\u0447\u0435\u0439\u043a\u0430\u043c\u0438, \u043e\u0431\u044a\u0435\u0434\u0438\u043d\u0435\u043d\u043d\u044b\u043c\u0438 \u043a\u0430\u043a \u0432 \u0440\u044f\u0434\u0430\u0445 (\u043f\u043e \u0433\u043e\u0440\u0438\u0437\u043e\u043d\u0442\u0430\u043b\u0438), \u0442\u0430\u043a \u0438 \u0432 \u043a\u043e\u043b\u043e\u043d\u043a\u0430\u0445 (\u043f\u043e \u0432\u0435\u0440\u0442\u0438\u043a\u0430\u043b\u0438)\" width=\"1938\" height=\"389\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/a04\/975\/bb3\/a04975bb375ffabaa4e8c87b86ddff37.png\"\/><figcaption>\u0418\u043d\u0442\u0435\u0440\u0430\u043a\u0442\u0438\u0432\u043d\u0430\u044f \u0442\u0430\u0431\u043b\u0438\u0446\u0430 \u0432 \u043a\u043b\u0430\u0441\u0441\u0438\u0447\u0435\u0441\u043a\u043e\u043c \u0432\u0438\u0434\u0435 \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u0435\u0442\u0441\u044f \u0442\u0430\u043a, \u043a\u0430\u043a \u0438 \u0431\u044b\u043b\u043e \u0437\u0430\u0434\u0443\u043c\u0430\u043d\u043e. \u041f\u0440\u0438\u0447\u0435\u043c \u0441 \u044f\u0447\u0435\u0439\u043a\u0430\u043c\u0438, \u043e\u0431\u044a\u0435\u0434\u0438\u043d\u0435\u043d\u043d\u044b\u043c\u0438 \u043a\u0430\u043a \u0432 \u0440\u044f\u0434\u0430\u0445 (\u043f\u043e \u0433\u043e\u0440\u0438\u0437\u043e\u043d\u0442\u0430\u043b\u0438), \u0442\u0430\u043a \u0438 \u0432 \u043a\u043e\u043b\u043e\u043d\u043a\u0430\u0445 (\u043f\u043e \u0432\u0435\u0440\u0442\u0438\u043a\u0430\u043b\u0438)<\/figcaption><\/figure>\n<p>\u041a\u043e\u043c\u043c\u0438\u0442 \u201cClassic table: all cells\u201d<\/p>\n<h2>\u0414\u0435\u043b\u0430\u0435\u043c \u0442\u0430\u0431\u043b\u0438\u0446\u0443 \u0430\u0434\u0430\u043f\u0442\u0438\u0432\u043d\u043e\u0439<\/h2>\n<p>\u041f\u0440\u0438\u0441\u0442\u0443\u043f\u0438\u043c \u043a \u0430\u0434\u0430\u043f\u0442\u0430\u0446\u0438\u0438 \u0442\u0430\u0431\u043b\u0438\u0446\u044b \u0434\u043b\u044f \u043d\u0435\u0431\u043e\u043b\u044c\u0448\u0438\u0445 \u044d\u043a\u0440\u0430\u043d\u043e\u0432 (\u043d\u0435\u0432\u0430\u0436\u043d\u043e \u043a\u0430\u043a\u0438\u0445 \u0443\u0441\u0442\u0440\u043e\u0439\u0441\u0442\u0432, \u043c\u043e\u0431\u0438\u043b\u044c\u043d\u044b\u0445 \u0438\u043b\u0438 \u043d\u0435\u0442).<\/p>\n<h4>\u041e\u0442\u0441\u043b\u0435\u0436\u0438\u0432\u0430\u043d\u0438\u0435 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e\u0441\u0442\u0438 \u0430\u0434\u0430\u043f\u0442\u0430\u0446\u0438\u0438<\/h4>\n<p>\u0417\u0430\u0432\u0435\u0434\u0435\u043c \u0432\u044b\u0447\u0438\u0441\u043b\u044f\u0435\u043c\u0443\u044e \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u0443\u044e \u0438 \u0431\u0443\u0434\u0435\u043c \u0435\u0435 \u0432\u043e\u0432\u0440\u0435\u043c\u044f \u043e\u0431\u043d\u043e\u0432\u043b\u044f\u0442\u044c, \u0438 \u0432\u043e\u0432\u0440\u0435\u043c\u044f \u043d\u0430 \u043d\u0435\u0435 \u0440\u0435\u0430\u0433\u0438\u0440\u043e\u0432\u0430\u0442\u044c:<\/p>\n<pre><code class=\"javascript\">\/\/ .\/components\/CommonTableAdaptive\/computed-table-wide.js import { computed, ref } from 'vue';  const refTableWide = ref(true); const isTableWide = computed(() => refTableWide.value); const switchTableWide = () => {   refTableWide.value = !refTableWide.value; };  export { isTableWide, switchTableWide };  \/\/ .\/components\/CommonTableAdaptive\/watch-table-width.js import { isTableWide, switchTableWide } from '.\/computed-table-wide';  let clientWidthOld; const watchTableWidthWithArg = (domSection) => {   const { clientWidth } = document.documentElement;   if (clientWidth !== clientWidthOld) {     clientWidthOld = clientWidth     if (!isTableWide.value) switchTableWide();     setTimeout(() => {       if (domSection &amp;&amp; domSection.offsetWidth > clientWidth) {         switchTableWide();       }     }, 0);   } };  export { watchTableWidthWithArg };  \/\/ \u0432 &lt;script setup> .\/components\/CommonTableAdaptive\/TableTemplate.vue \/\/ \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c onMounted, ref \u0432 \u0441\u0442\u0440\u043e\u043a\u0443 'import { computed, watch } from 'vue';' import { computed, onMounted, ref, watch } from 'vue'; \/\/ \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c import { isTableWide } from '.\/computed-table-wide'; import { watchTableWidthWithArg } from '.\/watch-table-width'; \/\/ \u0438\u0437\u043c\u0435\u043d\u0438\u0442\u044c watch \u0438 setColsNumber, \u0431\u044b\u043b\u043e: setColsNumber([props.titles[0], props.cells[0]]); watch(() => [props.titles[0], props.cells[0]], setColsNumber); \/\/ \u0441\u0442\u0430\u043b\u043e setColsNumber([props.titles[0], props.cells[0], isTableWide.value]); watch(() => [props.titles[0], props.cells[0], isTableWide.value], setColsNumber); \/\/ \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c const domSection = ref(null); const watchTableWidth = () => {   watchTableWidthWithArg(domSection.value); }; onMounted(watchTableWidth); window.addEventListener('resize', watchTableWidth); \/\/ \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c ref=\"domSection\" \u0432 &lt;template> \u043a \u0442\u0435\u0433\u0443 &lt;section> &lt;section :class=\"getSectionCl\" :style=\"getSectionSt\" ref=\"domSection\"><\/code><\/pre>\n<p>\u0412\u044b\u0447\u0438\u0441\u043b\u044f\u0435\u043c\u0430\u044f \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u0430\u044f isTableWide \u043f\u043e\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u0442 \u043d\u0430\u043c, \u043d\u0430\u0434\u043e \u043b\u0438 \u043f\u043e\u043a\u0430\u0437\u044b\u0432\u0430\u0442\u044c \u0442\u0430\u0431\u043b\u0438\u0446\u0443 \u0432 \u043a\u043b\u0430\u0441\u0441\u0438\u0447\u0435\u0441\u043a\u043e\u043c (\u0448\u0438\u0440\u043e\u043a\u043e\u043c) \u0432\u0438\u0434\u0435, \u0438\u043b\u0438 \u0435\u0435 \u043d\u0443\u0436\u043d\u043e \u0430\u0434\u0430\u043f\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c.<\/p>\n<p>\u0424\u0443\u043d\u043a\u0446\u0438\u044f watchTableWidthWithArg \u0440\u0435\u0430\u0433\u0438\u0440\u0443\u0435\u0442 \u043d\u0430 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0435 \u043e\u043a\u043d\u0430 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430. \u0415\u0441\u043b\u0438 \u043d\u043e\u0432\u0430\u044f \u0448\u0438\u0440\u0438\u043d\u0430 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430 \u043d\u0435 \u0440\u0430\u0432\u043d\u0430 \u0441\u0442\u0430\u0440\u043e\u0439 clientWidthOld, \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442 \u0441\u0431\u0440\u043e\u0441 \u0442\u0430\u0431\u043b\u0438\u0446\u044b \u043a \u043a\u043b\u0430\u0441\u0441\u0438\u0447\u0435\u0441\u043a\u043e\u043c\u0443 \u0432\u0438\u0434\u0443 (refTableWide.value = true), \u0438 \u0441 \u043d\u0443\u043b\u0435\u0432\u043e\u0439 \u0437\u0430\u0434\u0435\u0440\u0436\u043a\u043e\u0439 setTimeout (\u043e\u043d\u0430 \u043d\u0443\u0436\u043d\u0430, \u0447\u0442\u043e\u0431\u044b \u0443 dom-\u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 \u0443\u0441\u043f\u0435\u043b\u0438 \u043f\u043e\u044f\u0432\u0438\u0442\u0441\u044f \u043d\u043e\u0432\u044b\u0435 \u0434\u0430\u043d\u043d\u044b\u0435, \u0432 \u0442.\u0447. \u0438\u043d\u0442\u0435\u0440\u0435\u0441\u0443\u044e\u0449\u0430\u044f \u043d\u0430\u0441 \u0448\u0438\u0440\u0438\u043d\u0430) \u043c\u044b \u0441\u0440\u0430\u0432\u043d\u0438\u0432\u0430\u0435\u043c, \u0432\u044b\u0445\u043e\u0434\u0438\u0442 \u043b\u0438 \u0442\u0430\u0431\u043b\u0438\u0446\u0430 \u0437\u0430 \u0433\u0440\u0430\u043d\u0438\u0446\u0443 \u044d\u043a\u0440\u0430\u043d\u0430 (\u0448\u0438\u0440\u0438\u043d\u0430 \u0442\u0430\u0431\u043b\u0438\u0446\u044b > \u0448\u0438\u0440\u0438\u043d\u044b \u043e\u043a\u043d\u0430 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430). \u0415\u0441\u043b\u0438 \u0432\u044b\u0445\u043e\u0434\u0438\u0442 \u2014 refTableWide.value = false. \u0417\u0430\u043f\u0443\u0441\u043a\u0430\u0435\u043c \u044d\u0442\u0443 \u0444\u0443\u043d\u043a\u0446\u0438\u044e \u043f\u043e vue-\u0441\u043e\u0431\u044b\u0442\u0438\u044e onMounted \u0438 \u043f\u043e \u0441\u043e\u0431\u044b\u0442\u0438\u044e \u2018resize\u2019 \u0443 window.<\/p>\n<p>\u0412\u0430\u0436\u043d\u043e \u0442\u0430\u043a\u0436\u0435 \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u043e\u0442\u0441\u043b\u0435\u0436\u0438\u0432\u0430\u043d\u0438\u0435 isTableWide \u043d\u0430 \u0432\u043e\u0442\u0447\u0435\u0440 watch, \u043f\u043e \u043a\u043e\u0442\u043e\u0440\u043e\u043c\u0443 \u0437\u0430\u043f\u0443\u0441\u043a\u0430\u0435\u0442\u0441\u044f \u0440\u0430\u0441\u0447\u0435\u0442 \u043a\u043e\u043b\u043e\u043d\u043e\u043a \u0442\u0430\u0431\u043b\u0438\u0446\u044b setColsNumber.<\/p>\n<p>\u0422\u0435\u043f\u0435\u0440\u044c \u043c\u044b \u0437\u043d\u0430\u0435\u043c, \u043a\u043e\u0433\u0434\u0430 \u043d\u0443\u0436\u043d\u043e \u043f\u043e\u043a\u0430\u0437\u044b\u0432\u0430\u0442\u044c \u0448\u0438\u0440\u043e\u043a\u0443\u044e \u0442\u0430\u0431\u043b\u0438\u0446\u0443, \u0430 \u043a\u043e\u0433\u0434\u0430 &#8212; \u0443\u0437\u043a\u0443\u044e. \u0421 \u0441\u0435\u0442\u0442\u0435\u0440\u0430 \u0440\u0430\u0441\u0447\u0435\u0442\u0430 \u043a\u043e\u043b\u043e\u043d\u043e\u043a \u0438 \u043d\u0430\u0447\u043d\u0435\u043c \u0430\u0434\u0430\u043f\u0442\u0430\u0446\u0438\u044e \u0442\u0430\u0431\u043b\u0438\u0446\u044b:<\/p>\n<pre><code class=\"javascript\">\/\/ .\/components\/CommonTableAdaptive\/computed-cols-number.js \/\/ \u0438\u0437\u043c\u0435\u043d\u0438\u0442\u044c \u0444\u0443\u043d\u043a\u0446\u0438\u044e setColsNumber const setColsNumber = ([titlesFirstRow, cellsFirstRow, isTableWide]) => {   refColsNumber.value = countCollsNum(cellsFirstRow);   if (isTableWide) refColsNumber.value += countCollsNum(titlesFirstRow); };<\/code><\/pre>\n<p>\u0415\u0441\u043b\u0438 \u0442\u0430\u0431\u043b\u0438\u0446\u0430 \u0448\u0438\u0440\u043e\u043a\u0430\u044f, \u043a\u043e\u043b-\u0432\u043e \u043a\u043e\u043b\u043e\u043d\u043e\u043a \u0432 \u043d\u0435\u0439 \u0441\u043a\u043b\u0430\u0434\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u0438\u0437 \u043a\u043e\u043b\u043e\u043d\u043e\u043a props.titles \u0438 props.cells, \u0435\u0441\u043b\u0438 \u0443\u0437\u043a\u0430\u044f  \u2014 \u0441\u0447\u0438\u0442\u0430\u044e\u0442\u0441\u044f \u0442\u043e\u043b\u044c\u043a\u043e \u043a\u043e\u043b\u043e\u043d\u043a\u0438 \u0432 props.cells<\/p>\n<h4>\u0428\u0430\u043f\u043a\u0430 \u0442\u0430\u0431\u043b\u0438\u0446\u044b<\/h4>\n<p>\u0418\u0437\u043c\u0435\u043d\u0438\u043c \u0448\u0430\u043f\u043a\u0443 \u0442\u0430\u0431\u043b\u0438\u0446\u044b. \u041d\u0430\u0447\u043d\u0435\u043c \u0441 \u0448\u0430\u043f\u043a\u0438 \u0437\u0430\u0433\u043e\u043b\u043e\u0432\u043a\u043e\u0432 \u0441\u0442\u0440\u043e\u043a:<\/p>\n<pre><code class=\"javascript\">\/\/ .\/components\/CommonTableAdaptive\/seek-head-titles.js import { addRowsToHead } from '.\/add-head-rows'; import { getColsNumber } from '.\/computed-cols-number'; import { isTableWide } from '.\/computed-table-wide'; import { transformCellsToObject } from '.\/transform-cells-to-object'; import { transformRowsToCells } from '.\/transform-rows-to-cells';  const seekHeadTitles = (propsHeadTitles, propsHeadCols) => {   let rows;   if (propsHeadTitles) rows = transformCellsToObject(propsHeadTitles);   if (     rows &amp;&amp;     isTableWide.value &amp;&amp;     propsHeadCols &amp;&amp;     propsHeadCols.length > propsHeadTitles.length   ) {     rows = addRowsToHead(rows, propsHeadCols.length - propsHeadTitles.length);   } else if (rows &amp;&amp; !isTableWide.value) {     rows = rows.map((row) => [       {         text: row.map(({ text }) => text).join(', '),         cols: getColsNumber.value,       },     ]);   }   let cells = [];   if (rows) {     cells = transformRowsToCells(rows, {       cellType: 'head',       colFirst: true,       colLast: !isTableWide.value,       rowFirst: true,     });   }   return cells; }; export { seekHeadTitles };<\/code><\/pre>\n<p>\u0412 \u0444\u0430\u0439\u043b \u043c\u044b \u0438\u043c\u043f\u043e\u0440\u0442\u0438\u0440\u043e\u0432\u0430\u043b\u0438 \u0434\u0432\u0435 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0445, isTableWide \u0438 getColsNumber. \u0412 \u0443\u0441\u043b\u043e\u0432\u0438\u0435, \u043f\u043e \u043a\u043e\u0442\u043e\u0440\u043e\u043c\u0443 \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u0435\u0442\u0441\u044f \u0444\u0443\u043d\u043a\u0446\u0438\u044f addRowsToHead, \u043c\u044b \u0434\u043e\u0431\u0430\u0432\u0438\u043b\u0438 <code>&amp;&amp; isTableWide.value<\/code> \u2014 \u0442.\u0435. \u044d\u0442\u043e \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442 \u0442\u043e\u043b\u044c\u043a\u043e \u0435\u0441\u043b\u0438 \u0442\u0430\u0431\u043b\u0438\u0446\u0430 \u0448\u0438\u0440\u043e\u043a\u0430\u044f. \u0412 \u043f\u0440\u043e\u0442\u0438\u0432\u043d\u043e\u043c \u0441\u043b\u0443\u0447\u0430\u0435 (<code>rows &amp;&amp; !isTableWide.value<\/code>) \u043c\u044b \u0442\u0440\u0430\u043d\u0441\u0444\u043e\u0440\u043c\u0438\u0440\u0443\u0435\u043c \u043a\u0430\u0436\u0434\u0443\u044e \u0441\u0442\u0440\u043e\u043a\u0443, \u0441\u043e\u0441\u0442\u043e\u044f\u0449\u0443\u044e \u0438\u0437 \u044f\u0447\u0435\u0435\u043a: \u0441\u043a\u043b\u0430\u0434\u044b\u0432\u0430\u0435\u043c \u0442\u0430\u043c \u0432\u0441\u0435 \u044f\u0447\u0435\u0439\u043a\u0438 \u0432 \u043e\u0434\u043d\u0443, \u043f\u0435\u0440\u0435\u0447\u0438\u0441\u043b\u044f\u044f \u0442\u0435\u043a\u0441\u0442 \u0447\u0435\u0440\u0435\u0437 \u0437\u0430\u043f\u044f\u0442\u0443\u044e, \u0438 \u044d\u0442\u043e\u0439 \u043e\u0434\u043d\u043e\u0439 \u044f\u0447\u0435\u0439\u043a\u0435 \u043f\u0440\u0438\u0441\u0432\u0430\u0438\u0432\u0430\u0435\u043c cols, \u0440\u0430\u0432\u043d\u043e\u0435 \u043e\u0431\u0449\u0435\u043c\u0443 \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u0443 \u044f\u0447\u0435\u0435\u043a \u0442\u0430\u0431\u043b\u0438\u0446\u044b (\u0440\u0430\u0441\u0442\u044f\u0433\u0438\u0432\u0430\u0435\u043c \u043f\u043e\u043b\u0443\u0447\u0438\u0432\u0448\u0443\u044e\u0441\u044f \u043e\u0434\u043d\u0443 \u044f\u0447\u0435\u0439\u043a\u0443 \u043d\u0430 \u0432\u0441\u044e \u0448\u0438\u0440\u0438\u043d\u0443 \u0442\u0430\u0431\u043b\u0438\u0446\u044b). \u041d\u0443 \u0438 \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u043c \u043a\u043b\u044e\u0447 colLast \u043a \u0430\u0440\u0433\u0443\u043c\u0435\u043d\u0442\u0443 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 transformRowsToCells \u0441\u043e \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435\u043c <code>!isTableWide.value<\/code>. \u0422.\u0435. \u0435\u0441\u043b\u0438 \u0442\u0430\u0431\u043b\u0438\u0446\u0430 \u0443\u0437\u043a\u0430\u044f, \u0442\u043e \u043f\u043e\u0441\u043b\u0435\u0434\u043d\u044f\u044f \u0432 \u0441\u0442\u0440\u043e\u043a\u0435 \u044f\u0447\u0435\u0439\u043a\u0430 \u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u0441\u044f \u043f\u043e\u0441\u043b\u0435\u0434\u043d\u0435\u0439 \u044f\u0447\u0435\u0439\u043a\u043e\u0439 \u0442\u0430\u0431\u043b\u0438\u0446\u044b \u043f\u043e \u0433\u043e\u0440\u0438\u0437\u043e\u043d\u0442\u0430\u043b\u0438.<\/p>\n<p>\u0428\u0430\u043f\u043a\u0430 \u044f\u0447\u0435\u0435\u043a \u0442\u0430\u0431\u043b\u0438\u0446\u044b \u043c\u0435\u043d\u044f\u0435\u0442\u0441\u044f \u043d\u0435 \u0441\u0438\u043b\u044c\u043d\u043e:<\/p>\n<pre><code class=\"javascript\">\/\/ .\/components\/CommonTableAdaptive\/seek-head-cols.js \/\/ \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c import { isTableWide } from '.\/computed-table-wide'; \/\/ \u0438\u0437\u043c\u0435\u043d\u0438\u0442\u044c \u0443\u0441\u043b\u043e\u0432\u0438\u0435 if () \u0432 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 seekHeadCols \/\/ \u0431\u044b\u043b\u043e: if (   rows &amp;&amp;   propsHeadTitles &amp;&amp;   propsHeadTitles.length > propsHeadCols.length ) \/\/ \u0441\u0442\u0430\u043b\u043e: if (   rows &amp;&amp;   isTableWide.value &amp;&amp;   propsHeadTitles &amp;&amp;   propsHeadTitles.length > propsHeadCols.length ) \/\/ \u0432 \u043e\u0431\u044a\u0435\u043a\u0442\u0435 (2-\u0439 \u0430\u0440\u0448\u0443\u043c\u0435\u043d\u0442 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 argument transformRowsToCells) \/\/ \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c colFirst: !isTableWide.value, \/\/ \u0438\u0437\u043c\u0435\u043d\u0438\u0442\u044c rowFirst: isTableWide.value || !propsHeadTitles.length,<\/code><\/pre>\n<p>\u041a\u043e\u0433\u0434\u0430 \u0442\u0430\u0431\u043b\u0438\u0446\u0430 \u0448\u0438\u0440\u043e\u043a\u0430\u044f, headCols \u0440\u0430\u0437\u043c\u0435\u0449\u0430\u0435\u0442\u0441\u044f \u0441\u0432\u0435\u0440\u0445\u0443 \u0441\u043b\u0435\u0432\u0430 \u0432 \u0442\u0430\u0431\u043b\u0438\u0446\u0435. \u0414\u043b\u044f \u0435\u0435 \u044f\u0447\u0435\u0435\u043a \u0432\u0430\u0436\u043d\u044b rowFirst \u0438 colLast. \u041f\u0440\u0438 \u0443\u0437\u043a\u043e\u0439 \u0442\u0430\u0431\u043b\u0438\u0446\u0435 headCols \u0432\u0432\u0435\u0440\u0445\u0443, \u0442\u043e\u043b\u044c\u043a\u043e \u0435\u0441\u043b\u0438 \u043d\u0435\u0442 headTitles (\u043f\u043e\u044d\u0442\u043e\u043c\u0443 <code>rowFirst: isTableWide.value || !propsHeadTitles.length<\/code>), \u0438 \u0448\u0430\u043f\u043a\u0430 \u044f\u0447\u0435\u0435\u043a \u0437\u0430\u043d\u0438\u043c\u0430\u0435\u0442 \u0432\u0441\u044e \u0448\u0438\u0440\u0438\u043d\u0443 \u0442\u0430\u0431\u043b\u0438\u0446\u044b (\u043f\u043e\u044d\u0442\u043e\u043c\u0443 <code>colFirst: !isTableWide.value<\/code>).<\/p>\n<h4>\u042f\u0447\u0435\u0439\u043a\u0438 \u0442\u0430\u0431\u043b\u0438\u0446\u044b<\/h4>\n<p>\u0412 \u043a\u043b\u0430\u0441\u0441\u0438\u0447\u0435\u0441\u043a\u043e\u043c \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u0438\u0438 \u0440\u044f\u0434 (\u0441\u0442\u0440\u043e\u043a\u0430) \u0442\u0430\u0431\u043b\u0438\u0446\u044b \u0444\u043e\u0440\u043c\u0438\u0440\u0443\u0435\u0442\u0441\u044f \u0442\u0430\u043a: \u0432 \u043b\u0435\u0432\u043e\u0439 \u0447\u0430\u0441\u0442\u0438 (\u0441\u043d\u0430\u0447\u0430\u043b\u0430) \u0438\u0434\u0443\u0442 \u044f\u0447\u0435\u0439\u043a\u0438 \u0440\u044f\u0434\u0430 props.titles, \u0432 \u043f\u0440\u0430\u0432\u043e\u0439 \u0447\u0430\u0441\u0442\u0438 (\u0437\u0430\u0442\u0435\u043c) \u2014 \u044f\u0447\u0435\u0439\u043a\u0438 props.cells. \u041a\u043e\u0433\u0434\u0430 \u0442\u0430\u0431\u043b\u0438\u0446\u0430 \u0443\u0437\u043a\u0430\u044f, \u044f\u0447\u0435\u0439\u043a\u0438 \u0440\u044f\u0434\u0430 props.titles \u0441\u043a\u043b\u0430\u0434\u044b\u0432\u0430\u044e\u0442\u0441\u044f \u0432 \u043e\u0434\u043d\u0443 \u0438 \u0437\u0430\u043d\u0438\u043c\u0430\u0435\u0442 \u0432\u0441\u044e \u0448\u0438\u0440\u0438\u043d\u0443 \u0442\u0430\u0431\u043b\u0438\u0446\u044b, \u0430 \u044f\u0447\u0435\u0439\u043a\u0438 props.cells \u0440\u0430\u0437\u043c\u0435\u0449\u0430\u044e\u0442\u0441\u044f \u043f\u043e\u0434 \u043d\u0435\u0439:<\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/2ab\/a10\/8cd\/2aba108cdf969bc7859d020e58b5259b.png\" alt=\"\u042f\u0447\u0435\u0439\u043a\u0438 \u0442\u0430\u0431\u043b\u0438\u0446\u044b \u0441\u043e\u0441\u0442\u043e\u044f\u0442 \u0438\u0437 \u0434\u0432\u0443\u0445 \u0431\u043b\u043e\u043a\u043e\u0432 \u2014 titles (\u0441\u0435\u0440\u044b\u0439 \u0444\u043e\u043d) \u0438 cells (\u0431\u0435\u043b\u044b\u0439 \u0444\u043e\u043d). \u0418\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435 \u043f\u043e\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u0442, \u043a\u0430\u043a \u044f\u0447\u0435\u0439\u043a\u0438 \u043e\u0434\u043d\u043e\u0439 \u0441\u0442\u0440\u043e\u043a\u0438 \u0442\u0430\u0431\u043b\u0438\u0446\u044b \u043c\u0435\u043d\u044f\u044e\u0442\u0441\u044f \u043f\u0440\u0438 \u0435\u0435 \u0430\u0434\u0430\u043f\u0442\u0430\u0446\u0438\u0438\" title=\"\u042f\u0447\u0435\u0439\u043a\u0438 \u0442\u0430\u0431\u043b\u0438\u0446\u044b \u0441\u043e\u0441\u0442\u043e\u044f\u0442 \u0438\u0437 \u0434\u0432\u0443\u0445 \u0431\u043b\u043e\u043a\u043e\u0432 \u2014 titles (\u0441\u0435\u0440\u044b\u0439 \u0444\u043e\u043d) \u0438 cells (\u0431\u0435\u043b\u044b\u0439 \u0444\u043e\u043d). \u0418\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435 \u043f\u043e\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u0442, \u043a\u0430\u043a \u044f\u0447\u0435\u0439\u043a\u0438 \u043e\u0434\u043d\u043e\u0439 \u0441\u0442\u0440\u043e\u043a\u0438 \u0442\u0430\u0431\u043b\u0438\u0446\u044b \u043c\u0435\u043d\u044f\u044e\u0442\u0441\u044f \u043f\u0440\u0438 \u0435\u0435 \u0430\u0434\u0430\u043f\u0442\u0430\u0446\u0438\u0438\" width=\"1794\" height=\"185\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/2ab\/a10\/8cd\/2aba108cdf969bc7859d020e58b5259b.png\"\/><figcaption>\u042f\u0447\u0435\u0439\u043a\u0438 \u0442\u0430\u0431\u043b\u0438\u0446\u044b \u0441\u043e\u0441\u0442\u043e\u044f\u0442 \u0438\u0437 \u0434\u0432\u0443\u0445 \u0431\u043b\u043e\u043a\u043e\u0432 \u2014 titles (\u0441\u0435\u0440\u044b\u0439 \u0444\u043e\u043d) \u0438 cells (\u0431\u0435\u043b\u044b\u0439 \u0444\u043e\u043d). \u0418\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435 \u043f\u043e\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u0442, \u043a\u0430\u043a \u044f\u0447\u0435\u0439\u043a\u0438 \u043e\u0434\u043d\u043e\u0439 \u0441\u0442\u0440\u043e\u043a\u0438 \u0442\u0430\u0431\u043b\u0438\u0446\u044b \u043c\u0435\u043d\u044f\u044e\u0442\u0441\u044f \u043f\u0440\u0438 \u0435\u0435 \u0430\u0434\u0430\u043f\u0442\u0430\u0446\u0438\u0438<\/figcaption><\/figure>\n<p>\u042f\u0447\u0435\u0439\u043a\u0430 \u0442\u0430\u0431\u043b\u0438\u0446\u044b \u043c\u043e\u0436\u0435\u0442 \u043e\u0431\u044a\u0435\u0434\u0438\u043d\u044f\u0442\u044c\u0441\u044f \u0441\u043e \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u043c\u0438 \u044f\u0447\u0435\u0439\u043a\u0430\u043c\u0438 \u0432 \u043a\u043e\u043b\u043e\u043d\u043a\u0435, \u0435\u0441\u043b\u0438 \u0443 \u043d\u0435\u0435 \u0435\u0441\u0442\u044c \u043a\u043b\u044e\u0447 rows. \u041f\u0440\u0438 \u0430\u0434\u0430\u043f\u0442\u0430\u0446\u0438\u0438 (!isTableWide) \u043d\u0430\u043c \u0442\u0430\u043a\u043e\u0435 \u043e\u0431\u044a\u0435\u0434\u0438\u043d\u0435\u043d\u0438\u0435 \u044f\u0447\u0435\u0435\u043a \u043d\u0435 \u043d\u0443\u0436\u043d\u043e \u0438\u0437-\u0437\u0430 \u043f\u043e\u0432\u0435\u0434\u0435\u043d\u0438\u044f titles. \u041d\u0430\u043f\u0438\u0448\u0435\u043c \u0444\u0443\u043d\u043a\u0446\u0438\u044e, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u0438\u0441\u043a\u043b\u044e\u0447\u0438\u0442 rows \u0438\u0437 \u044f\u0447\u0435\u0435\u043a, \u0430 \u0435\u0441\u043b\u0438 \u044d\u0442\u043e\u0442 \u043a\u043b\u044e\u0447 \u0435\u0441\u0442\u044c \u2014 \u043f\u0440\u043e\u0434\u0443\u0431\u043b\u0438\u0440\u0443\u0435\u0442 \u044f\u0447\u0435\u0439\u043a\u0438 \u0432 \u043a\u043e\u043b\u043e\u043d\u043a\u0435.<\/p>\n<pre><code class=\"javascript\">\/\/ \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u0432 .\/components\/CommonTableAdaptive\/seek-table-cells.js const transformCellsWithoutRows = (rowsExt) => {   const rows = [];   rowsExt.forEach((row, iRow) => {     if (!rows[iRow]) rows[iRow] = [];     row.forEach((cellExt) => {       const cell = { ...cellExt };       let iCol = rows[iRow].findIndex((el) => !el);       if (iCol &lt; 0) iCol = rows[iRow].length;       rows[iRow][iCol] = cell;       if ('rows' in cell) {         const rowsCell = cell.rows;         delete cell.rows;         for (let i = iRow + 1; i &lt; iRow + rowsCell; i += 1) {           if (!rows[i]) rows[i] = [];           rows[i][iCol] = cell;         }       }     });   });   return rows; };<\/code><\/pre>\n<p>\u0412 \u044d\u0442\u043e\u0439 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 \u043c\u044b \u043e\u0431\u044a\u044f\u0432\u043b\u044f\u0435\u043c \u043d\u043e\u0432\u044b\u0439 \u043c\u0430\u0441\u0441\u0438\u0432 \u0438\u0437 \u0441\u0442\u0440\u043e\u043a <code>rows=[]<\/code>. \u0421\u0442\u0430\u0440\u044b\u0439 \u043c\u0430\u0441\u0441\u0438\u0432 \u043e\u0431\u0445\u043e\u0434\u0438\u043c \u043f\u043e\u0441\u0442\u0440\u043e\u0447\u043d\u043e. \u0415\u0441\u043b\u0438 \u0443 \u043d\u043e\u0432\u043e\u0433\u043e rows \u043d\u0435 \u0437\u0430\u0432\u0435\u0434\u0435\u043d \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u0441 \u043c\u0430\u0441\u0441\u0438\u0432\u043e\u043c \u0441\u0442\u0440\u043e\u043a\u0438 \u0441 \u0438\u043d\u0434\u0435\u043a\u0441\u043e\u043c iRow \u2014 \u0437\u0430\u0432\u043e\u0434\u0438\u043c \u0435\u0433\u043e (<code>if (!rows[iRow]) rows[iRow] = [];<\/code>). \u0414\u0430\u043b\u044c\u0448\u0435 \u043c\u0430\u0441\u0441\u0438\u0432 \u0441\u0442\u0440\u043e\u043a\u0438 row, \u0441\u043e\u0441\u0442\u043e\u044f\u0449\u0438\u0439 \u0438\u0437 \u044f\u0447\u0435\u0435\u043a cell. \u0415\u0441\u043b\u0438 \u0443 \u044f\u0447\u0435\u0439\u043a\u0438-\u043e\u0431\u044a\u0435\u043a\u0438\u0430 \u0435\u0441\u0442\u044c rows, \u0437\u043d\u0430\u0447\u0438\u0442 \u043e\u043d\u0430 \u043e\u0431\u044a\u0435\u0434\u0438\u043d\u044f\u0435\u0442\u0441\u044f \u0441 \u044f\u0447\u0435\u0439\u043a\u0430\u043c\u0438 \u043d\u0438\u0436\u0435 \u0432 \u043a\u043e\u043b\u043e\u043d\u043a\u0435. \u0427\u0442\u043e\u0431\u044b \u044d\u0442\u043e \u0443\u0431\u0440\u0430\u0442\u044c, \u043c\u044b \u043f\u0440\u043e\u0434\u0443\u0431\u043b\u0438\u0440\u0443\u0435\u043c \u044d\u0442\u0443 \u044f\u0447\u0435\u0439\u043a\u0443 \u0432 \u043a\u043e\u043b\u043e\u043d\u043a\u0430\u0445 \u043d\u043e\u0432\u043e\u0433\u043e \u043c\u0430\u0441\u0441\u0438\u0432\u0430 rows \u0432 \u0446\u0438\u043a\u043b\u0435 for. \u041f\u043e\u044d\u0442\u043e\u043c\u0443 \u0438\u043d\u0434\u0435\u043a\u0441 \u044f\u0447\u0435\u0439\u043a\u0438 \u0432 \u0441\u0442\u0440\u043e\u043a\u0435 row \u043d\u0435 \u0432\u0441\u0435\u0433\u0434\u0430 \u0431\u0443\u0434\u0435\u0442 \u0441\u043e\u0432\u043f\u0430\u0434\u0430\u0442\u044c \u0441 \u0440\u0435\u0430\u043b\u044c\u043d\u044b\u043c \u0438\u043d\u0434\u0435\u043a\u0441\u043e\u043c \u044f\u0447\u0435\u0439\u043a\u0438 (\u0442\u0430\u043a\u0436\u0435 \u0441\u043c. \u0432\u044b\u0448\u0435, \u043f\u0440\u0438\u0447\u0438\u043d\u044b \u043d\u0430\u043f\u0438\u0441\u0430\u043d\u0438\u044f \u0444\u0443\u043d\u043a\u0446\u0438\u0438 checkColFirst). \u0418 \u044d\u0442\u043e\u0442 \u0438\u043d\u0434\u0435\u043a\u0441 \u0432 \u0441\u0442\u0440\u043e\u043a\u0435 \u043c\u044b \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u043c \u0442\u0430\u043a: \u0441\u043c\u043e\u0442\u0440\u0438\u043c, \u0435\u0441\u0442\u044c \u043b\u0438 \u0432 \u0441\u0442\u0440\u043e\u043a\u0435 \u0441 \u0438\u043d\u0434\u0435\u043a\u0441\u043e\u043c iRow \u043d\u043e\u0432\u043e\u0433\u043e \u043c\u0430\u0441\u0441\u0438\u0432\u0430 rows \u043f\u0443\u0441\u0442\u043e\u0439 (undefined) \u044d\u043b\u0435\u043c\u0435\u043d\u0442. \u0415\u0441\u043b\u0438 \u0434\u0430, \u0442\u043e iCol (\u0438\u043d\u0434\u0435\u043a\u0441 \u044f\u0447\u0435\u0439\u043a\u0438 \u0432 \u0441\u0442\u0440\u043e\u043a\u0435) \u0431\u0443\u0434\u0435\u0442 \u0438\u043d\u0434\u0435\u043a\u0441\u043e\u043c \u043f\u0443\u0441\u0442\u043e\u0433\u043e \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430, \u0435\u0441\u043b\u0438 \u043d\u0435\u0442 \u2014 iCol \u0431\u0443\u0434\u0435\u0442 \u0440\u0430\u0432\u0435\u043d \u0434\u043b\u0438\u043d\u0435 \u043c\u0430\u0441\u0441\u0438\u0432\u0430.<\/p>\n<p>\u0418\u0437\u043c\u0435\u043d\u0438\u043c \u0444\u0443\u043d\u043a\u0446\u0438\u0438 \u0432 seek-table-cells.js:<\/p>\n<pre><code class=\"javascript\">\/\/ .\/components\/CommonTableAdaptive\/seek-table-cells.js \/\/ \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c import { isTableWide } from '.\/computed-table-wide'; \/\/ \u0438\u0437\u043c\u0435\u043d\u0438\u0442\u044c \u0444\u0443\u043d\u043a\u0446\u0438\u044e seekTableCells const seekTableCells = (propsTitlesExt, propsCellsExt) => {   let propsTitles = transformCellsToObject(propsTitlesExt);   let propsCells = transformCellsToObject(propsCellsExt);   if (!isTableWide.value) {     propsTitles = transformCellsWithoutRows(propsTitles);     propsCells = transformCellsWithoutRows(propsCells);   }   const cells = [];   propsCells.forEach((row, iRow) => {     cells.push(...addTitleCells(propsTitles, iRow));     cells.push(...addOtherCells(row, iRow, propsCells.length));   });   return cells; };<\/code><\/pre>\n<p> \u0415\u0441\u043b\u0438 \u0442\u0430\u0431\u043b\u0438\u0446\u0430 \u0443\u0437\u043a\u0430\u044f\u00a0\u2014 \u0437\u0430\u043f\u0443\u0441\u043a\u0430\u0435\u043c transformCellsWithoutRows, \u0447\u0442\u043e\u0431\u044b \u0443\u0431\u0440\u0430\u0442\u044c  rows \u0432\u00a0\u044f\u0447\u0435\u0439\u043a\u0430\u0445-\u043e\u0431\u044a\u0435\u043a\u0442\u0430\u0445 \u0438\u00a0\u043f\u0440\u043e\u0434\u0443\u0431\u043b\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0438\u0445\u00a0\u0441\u0442\u043e\u043b\u044c\u043a\u043e \u0440\u0430\u0437, \u0441\u043a\u043e\u043b\u044c\u043a\u043e \u043d\u0443\u0436\u043d\u043e.<\/p>\n<pre><code class=\"javascript\">\/\/ .\/components\/CommonTableAdaptive\/seek-table-cells.js \/\/ \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c import { getColsNumber } from '.\/computed-cols-number'; \/\/ \u0438\u0437\u043c\u0435\u043d\u0438\u0442\u044c \u0444\u0443\u043d\u043a\u0446\u0438\u044e addTitleCells const addTitleCells = (propsTitles, iRow) => {   const cells = [];   if (isTableWide.value) {     propsTitles[iRow].forEach((cell, iCol) => {       cells.push({         ...cell,         colFirst: checkColFirst(cell, iCol),         rowLast: checkRowLast(cell, iRow, propsTitles.length),         cellType: 'titles',       });     });   } else {     cells.push({       text: propsTitles[iRow].map(({ text }) => text).join(', '),       cols: getColsNumber.value,       colFirst: true,       colLast: true,       cellType: 'titles',     });   }   return cells; };<\/code><\/pre>\n<p>\u0415\u0441\u043b\u0438 \u0442\u0430\u0431\u043b\u0438\u0446\u0430 \u0443\u0437\u043a\u0430\u044f \u2014 \u043e\u0431\u044a\u0435\u0434\u0438\u043d\u044f\u0435\u043c \u044f\u0447\u0435\u0439\u043a\u0438 \u0432 \u0440\u044f\u0434\u0443 propsTitles[iRow] \u0432 \u043e\u0434\u043d\u0443, \u0437\u0430\u0434\u0430\u0435\u043c \u0438\u043c <code>cols = getColsNumber.value<\/code> \u2014 \u0440\u0430\u0441\u0442\u044f\u0433\u0438\u0432\u0430\u0435\u043c \u044f\u0447\u0435\u0439\u043a\u0443 \u043d\u0430 \u0432\u0441\u044e \u0448\u0438\u0440\u0438\u043d\u0443, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u044d\u0442\u0430 \u044f\u0447\u0435\u0439\u043a\u0430 \u0431\u0443\u0434\u0435\u0442 \u043e\u0434\u043d\u043e\u0432\u0440\u0435\u043c\u0435\u043d\u043d\u043e \u043f\u0435\u0440\u0432\u043e\u0439 \u0438 \u043f\u043e\u0441\u043b\u0435\u0434\u043d\u0435\u0439 \u0432 \u0441\u0432\u043e\u0435\u0439 \u0441\u0442\u0440\u043e\u043a\u0435 (<code>colFirst: true, colLast: true<\/code>).<\/p>\n<pre><code class=\"javascript\">\/\/ .\/components\/CommonTableAdaptive\/seek-table-cells.js \/\/ \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u0432 \u0444\u0443\u043d\u043a\u0446\u0438\u044e addOtherCells \u0432 \u043e\u0431\u044a\u0435\u043a\u0442 cells.push({}) colFirst: !isTableWide.value &amp;&amp; iCell === 0,<\/code><\/pre>\n<p>\u0423 \u0431\u043b\u043e\u043a\u0430 cells, \u0435\u0441\u043b\u0438 \u0442\u0430\u0431\u043b\u0438\u0446\u0430 \u0443\u0437\u043a\u0430\u044f, \u044f\u0447\u0435\u0439\u043a\u0430 \u2014 \u043f\u0435\u0440\u0432\u0430\u044f \u0432 \u0440\u044f\u0434\u0443 \u0442\u0430\u0431\u043b\u0438\u0446\u044b, \u0435\u0441\u043b\u0438 \u043e\u043d\u0430 \u043f\u0435\u0440\u0432\u0430\u044f \u0432 \u0441\u0432\u043e\u0435\u0439 \u0441\u0442\u0440\u043e\u043a\u0435.<\/p>\n<p>\u0421\u043c\u043e\u0442\u0440\u0438\u043c, \u0447\u0442\u043e \u043f\u043e\u043b\u0443\u0447\u0438\u043b\u043e\u0441\u044c:<\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/0bb\/f2a\/282\/0bbf2a2823477971c0586b9cd00380d3.png\" width=\"1794\" height=\"883\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/0bb\/f2a\/282\/0bbf2a2823477971c0586b9cd00380d3.png\"\/><figcaption><\/figcaption><\/figure>\n<p>\u0412\u0441\u0451 \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u0442\u0430\u043a, \u043a\u0430\u043a \u0438 \u0437\u0430\u0434\u0443\u043c\u0430\u043d\u043e, \u0442\u0430\u0431\u043b\u0438\u0446\u0430 \u0430\u0434\u0430\u043f\u0442\u0438\u0440\u0443\u0435\u0442\u0441\u044f \u043f\u043e\u0434 \u043c\u0430\u043b\u0435\u043d\u044c\u043a\u0438\u0435 \u044d\u043a\u0440\u0430\u043d\u044b. \u0422\u0430\u0431\u043b\u0438\u0446\u0430 \u0438\u043d\u0442\u0435\u0440\u0430\u043a\u0442\u0438\u0432\u043d\u0430 \u2014 \u0434\u0430\u043d\u043d\u044b\u0435 \u043c\u0435\u043d\u044f\u044e\u0442\u0441\u044f \u0432 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438 \u043e\u0442 \u0432\u044b\u0431\u043e\u0440\u0430 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f. \u041c\u0430\u043b\u043e \u0442\u043e\u0433\u043e, \u043d\u0430 \u043b\u044e\u0431\u044b\u0445 \u044d\u043a\u0440\u0430\u043d\u0430\u0445 \u0442\u0430\u0431\u043b\u0438\u0446\u0430 \u043a\u043e\u043c\u043f\u0430\u043a\u0442\u043d\u0430 \u2014 \u0437\u0430\u043d\u0438\u043c\u0430\u0435\u0442 \u043c\u0438\u043d\u0438\u043c\u0443\u043c \u043c\u0435\u0441\u0442\u0430, \u0447\u0442\u043e \u043d\u0438\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u043d\u0435 \u043c\u0435\u0448\u0430\u0435\u0442 \u0432\u043e\u0441\u043f\u0440\u0438\u044f\u0442\u0438\u044e \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u0438, \u0430 \u0441\u0430\u043c\u043e\u0435 \u0433\u043b\u0430\u0432\u043d\u043e\u0435 \u2014 \u0441\u043e\u0445\u0440\u0430\u043d\u044f\u0435\u0442\u0441\u044f \u0433\u043b\u0430\u0432\u043d\u043e\u0435 \u0434\u043e\u0441\u0442\u043e\u0438\u043d\u0441\u0442\u0432\u043e \u0442\u0430\u0431\u043b\u0438\u0446\u044b \u2014 \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u043d\u044b\u0435 \u0432 \u043d\u0435\u0439 \u0434\u0430\u043d\u043d\u044b\u0435 \u043b\u0435\u0433\u043a\u043e \u0441\u0440\u0430\u0432\u043d\u0438\u0432\u0430\u0442\u044c \u0434\u0440\u0443\u0433 \u0441 \u0434\u0440\u0443\u0433\u043e\u043c!<\/p>\n<p>\u041a\u043e\u043c\u043c\u0438\u0442 \u201cAdaptive table\u201d<\/p>\n<p>\u041d\u0430 \u044d\u0442\u043e\u043c \u0441\u0442\u0430\u0442\u044c\u044e \u043c\u043e\u0436\u043d\u043e \u0431\u044b\u043b\u043e \u0431\u044b \u0438 \u0437\u0430\u0432\u0435\u0440\u0448\u0438\u0442\u044c. \u041d\u043e \u0447\u0442\u043e \u0435\u0441\u043b\u0438 \u043a\u043e\u043b\u043e\u043d\u043e\u043a \u0432 \u0442\u0430\u0431\u043b\u0438\u0446\u0435 \u043d\u0430\u043c\u043d\u043e\u0433\u043e \u0431\u043e\u043b\u044c\u0448\u0435? \u042d\u0442\u043e \u043d\u0435 \u043e\u0447\u0435\u043d\u044c \u0445\u043e\u0440\u043e\u0448\u043e \u0434\u043b\u044f \u0432\u043e\u0441\u043f\u0440\u0438\u044f\u0442\u0438\u044f, \u0438 \u0441\u043a\u043e\u0440\u0435\u0435 \u0432\u0441\u0435\u0433\u043e \u0434\u0430\u043d\u043d\u044b\u0435 \u0432 \u0442\u0430\u043a\u043e\u0439 \u0431\u043e\u043b\u044c\u0448\u043e\u0439 \u0442\u0430\u0431\u043b\u0438\u0446\u0435 \u043c\u043e\u0436\u043d\u043e \u0441\u043e\u043a\u0440\u0430\u0442\u0438\u0442\u044c, \u043d\u043e \u0432\u0441\u0435-\u0442\u0430\u043a\u0438?<\/p>\n<h2>\u0415\u0441\u043b\u0438 \u043c\u043d\u043e\u0433\u043e \u043a\u043e\u043b\u043e\u043d\u043e\u043a<\/h2>\n<p>\u0412 \u0441\u043b\u0443\u0447\u0430\u0435, \u0435\u0441\u043b\u0438 \u043a\u043e\u043b\u043e\u043d\u043e\u043a \u043c\u043d\u043e\u0433\u043e \u0432 \u043b\u0435\u0432\u043e\u0439 \u0447\u0430\u0441\u0442\u0438 \u043a\u043b\u0430\u0441\u0441\u0438\u0447\u0435\u0441\u043a\u043e\u0439 \u0442\u0430\u0431\u043b\u0438\u0446\u0435 \u2014 titles, \u043f\u0440\u043e\u0431\u043b\u0435\u043c \u043d\u0435 \u0432\u043e\u0437\u043d\u0438\u043a\u0430\u0435\u0442: \u0432 \u043a\u043e\u043c\u043f\u0430\u043a\u0442\u043d\u043e\u043c \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u0438\u0438 \u0432\u0441\u0435 \u044d\u0442\u0438 \u043a\u043e\u043b\u043e\u043d\u043a\u0438 \u201c\u0441\u0445\u043b\u043e\u043f\u044b\u0432\u0430\u044e\u0442\u0441\u044f\u201d \u0432 \u043e\u0434\u043d\u0443, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u0441\u044f \u201c\u043f\u043e\u0434\u0448\u0430\u043f\u043a\u043e\u0439\u201d \u0441\u0442\u0440\u043e\u043a\u0438 cells \u0441 \u044f\u0447\u0435\u0439\u043a\u0430\u043c\u0438, \u0433\u0434\u0435 \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u044b \u0434\u0430\u043d\u043d\u044b\u0435 \u0434\u043b\u044f \u0441\u0440\u0430\u0432\u043d\u0435\u043d\u0438\u044f.<\/p>\n<p>\u041d\u043e \u0447\u0442\u043e, \u0435\u0441\u043b\u0438 \u044d\u0442\u0438\u0445 \u044f\u0447\u0435\u0435\u043a \u043d\u0430\u0441\u0442\u043e\u043b\u044c\u043a\u043e \u043c\u043d\u043e\u0433\u043e, \u0447\u0442\u043e \u043e\u043d\u0438 \u043d\u0435 \u0443\u043c\u0435\u0449\u0430\u044e\u0442\u0441\u044f \u0432 \u043e\u0434\u043d\u0443 \u0441\u0442\u0440\u043e\u043a\u0443 \u043d\u0430 \u043c\u0430\u043b\u0435\u043d\u044c\u043a\u043e\u043c \u044d\u043a\u0440\u0430\u043d\u0435? \u0421\u0434\u0435\u043b\u0430\u0435\u043c \u0430\u0434\u0430\u043f\u0442\u0430\u0446\u0438\u044e \u0434\u043b\u044f \u0431\u0435\u0441\u043a\u043e\u043d\u0435\u0447\u043d\u043e\u0433\u043e \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u0430 \u0441\u0442\u043e\u043b\u0431\u0446\u043e\u0432 \u0432 cells. \u041a\u043e\u043d\u0446\u0435\u043f\u0446\u0438\u044f \u0442\u0430\u043a\u0430\u044f: \u0435\u0441\u043b\u0438 \u0432 \u0441\u0442\u0440\u043e\u043a\u0435 cells \u044f\u0447\u0435\u0439\u043a\u0438 \u043d\u0435 \u043f\u043e\u043c\u0435\u0449\u0430\u044e\u0442\u0441\u044f \u0432 \u044d\u043a\u0440\u0430\u043d \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430, \u0442\u043e \u043e\u0434\u043d\u0430 \u0441\u0442\u0440\u043e\u043a\u0430 \u0442\u0440\u0430\u043d\u0441\u0444\u043e\u0440\u043c\u0438\u0440\u0443\u0435\u0442\u0441\u044f \u0432 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e, \u043a\u0430\u043a \u043d\u0430 \u0440\u0438\u0441\u0443\u043d\u043a\u0435:<\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/70c\/df4\/714\/70cdf47140ef779453b0572a9f87fff2.png\" width=\"1794\" height=\"223\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/70c\/df4\/714\/70cdf47140ef779453b0572a9f87fff2.png\"\/><figcaption><\/figcaption><\/figure>\n<p>\u0417\u0434\u0435\u0441\u044c \u0435\u0441\u0442\u044c \u0434\u0432\u0435 \u0441\u043b\u043e\u0436\u043d\u043e\u0441\u0442\u0438, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043d\u0443\u0436\u043d\u043e \u0443\u0447\u0435\u0441\u0442\u044c:<\/p>\n<ol>\n<li>\n<p>\u0415\u0441\u043b\u0438 \u0432 \u0441\u0442\u0440\u043e\u043a\u0435 \u0435\u0441\u0442\u044c \u044f\u0447\u0435\u0439\u043a\u0430, \u043e\u0431\u044a\u0435\u0434\u0438\u043d\u044f\u044e\u0449\u0430\u044f \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u043a\u043e\u043b\u043e\u043d\u043e\u043a, \u0438 \u0440\u0430\u0437\u0434\u0435\u043b\u0435\u043d\u0438\u0435 \u043d\u0430 \u043f\u043e\u0434\u0441\u0442\u0440\u043e\u043a\u0438 \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442 \u043a\u0430\u043a \u0440\u0430\u0437 \u043f\u043e \u044d\u0442\u0438\u043c \u043a\u043e\u043b\u043e\u043d\u043a\u0430\u043c (\u201c2 columns\u201d \u043d\u0430 \u0440\u0438\u0441\u0443\u043d\u043a\u0435), \u0442\u043e \u0432 \u043a\u043e\u043c\u043f\u0430\u043a\u0442\u043d\u043e\u043c \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u0438\u0438 \u043d\u0443\u0436\u043d\u043e \u0431\u0443\u0434\u0435\u0442 \u0435\u0435 \u0434\u0443\u0431\u043b\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043d\u0430 \u0440\u0430\u0437\u0434\u0435\u043b\u044f\u0435\u043c\u044b\u0435 \u0441\u0442\u0440\u043e\u043a\u0438<\/p>\n<\/li>\n<li>\n<p>\u0415\u0441\u043b\u0438 \u043f\u043e\u0441\u043b\u0435 \u0440\u0430\u0437\u0434\u0435\u043b\u0435\u043d\u0438\u044f \u043f\u043e\u0434\u0441\u0442\u0440\u043e\u043a\u0438 \u0432 \u043f\u043e\u0441\u043b\u0435\u0434\u043d\u0435\u0439 \u0441\u0442\u0440\u043e\u043a\u0435 \u043e\u043a\u0430\u0436\u0435\u0442\u0441\u044f \u043c\u0435\u043d\u044c\u0448\u0435 \u044f\u0447\u0435\u0435\u043a, \u0447\u0435\u043c \u0432 \u043f\u0440\u0435\u0434\u044b\u0434\u0443\u0449\u0438\u0445 (\u201clast column\u201d \u043d\u0430 \u0440\u0438\u0441\u0443\u043d\u043a\u0435), \u0442\u043e \u043d\u0443\u0436\u043d\u043e \u0431\u0443\u0434\u0435\u0442 \u0435\u0435 \u0440\u0430\u0441\u0442\u044f\u043d\u0443\u0442\u044c \u043d\u0430 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e\u0435 \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u044f\u0447\u0435\u0435\u043a<\/p>\n<\/li>\n<\/ol>\n<p>\u041f\u0440\u0438\u0441\u0442\u0443\u043f\u0438\u043c. \u042f <a href=\"https:\/\/github.com\/v-khakimov\/table-adaptive-article\/blob\/master\/src\/store-constant\/table-data.js\" rel=\"noopener noreferrer nofollow\">\u0438\u0437\u043c\u0435\u043d\u0438\u043b \u0434\u0430\u043d\u043d\u044b\u0435<\/a> \u0432 \u2018.\/store-constant\/table-data.js\u2019 \u0438 <a href=\"https:\/\/github.com\/v-khakimov\/table-adaptive-article\/blob\/master\/src\/store-variables\/table-props.js\" rel=\"noopener noreferrer nofollow\">\u0447\u0443\u0442\u044c \u043f\u043e\u0434\u043f\u0440\u0430\u0432\u0438\u043b<\/a> \u0438\u0445 \u0442\u0440\u0430\u043d\u0441\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u044e \u0432 props \u0432 \u2018\u2019.\/store-variables\/table-props.js\u201d, \u0447\u0442\u043e\u0431\u044b \u0432 \u0442\u0430\u0431\u043b\u0438\u0446\u0435 \u0431\u044b\u043b\u043e \u043c\u043d\u043e\u0433\u043e \u044f\u0447\u0435\u0435\u043a. \u041a\u043d\u043e\u043f\u043a\u0430 \u201cEstate\u201d \u0432 \u0432\u044b\u0431\u043e\u0440\u0435 \u0442\u0438\u043f\u0430 \u043a\u0443\u0437\u043e\u0432\u0430 \u043f\u043e\u043b\u0443\u0447\u0438\u043b\u0430 \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u0435 \u201cMany Columns\u201d. \u041f\u0440\u0438 \u0442\u0430\u043a\u043e\u043c \u0432\u044b\u0431\u043e\u0440\u0435 \u201cRetail\u201d \u0438 \u201cincl. VAT\u201d \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u044e\u0442 7 \u043a\u043e\u043b\u043e\u043d\u043e\u043a \u0432 cells, \u043e\u0442\u043b\u0438\u0447\u0438\u0435 \u0432 \u0448\u0430\u043f\u043a\u0435 \u043a\u043e\u043b\u043e\u043d\u043e\u043a (headCols): \u0432 \u201cRetail\u201d \u043f\u0435\u0440\u0432\u0430\u044f \u0441\u0442\u0440\u043e\u043a\u0430 \u044d\u0442\u043e\u0439 \u0448\u0430\u043f\u043a\u0438 \u201cVersion\u201d \u0437\u0430\u043d\u0438\u043c\u0430\u0435\u0442 \u0432\u0441\u044e \u0447\u0430\u0441\u0442\u044c \u0442\u0430\u0431\u043b\u0438\u0446\u044b (cols: 7), \u0432 \u0441\u043b\u0443\u0447\u0430\u0435 \u201cincl. VAT\u201d \u043f\u0435\u0440\u0432\u0430\u044f \u0447\u0430\u0441\u0442\u044c headcols  \u2014 \u0441\u043e\u0441\u0442\u0430\u0432\u043d\u0430\u044f, \u043d\u043e \u0432 \u043a\u0430\u0436\u0434\u043e\u0439 \u044f\u0447\u0435\u0439\u043a\u0435 \u0442\u043e\u0436\u0435 \u0435\u0441\u0442\u044c \u043e\u0431\u044a\u0435\u0434\u0438\u043d\u0435\u043d\u0438\u0435 \u043a\u043e\u043b\u043e\u043d\u043e\u043a. \u041f\u0440\u0438 \u0432\u044b\u0431\u043e\u0440\u0435 \u201c+ Manufacturers\u201d \u2014 13 \u043a\u043e\u043b\u043e\u043d\u043e\u043a.<\/p>\n<p>\u0412\u00a0\u043f\u0435\u0440\u0432\u0443\u044e \u043e\u0447\u0435\u0440\u0435\u0434\u044c \u043d\u0430\u043c \u043d\u0443\u0436\u043d\u043e \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0438\u0442\u044c, \u043d\u0430\u00a0\u043a\u0430\u043a\u043e\u0435 \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u043f\u043e\u0434\u0441\u0442\u0440\u043e\u043a  \u0431\u0443\u0434\u0443\u0442 \u0434\u0435\u043b\u0438\u0442\u044c\u0441\u044f \u0441\u0442\u0440\u043e\u043a\u0438 \u0432\u00a0cells, \u0435\u0441\u043b\u0438 \u043e\u043d\u0438 \u043d\u0435\u00a0\u0443\u043c\u0435\u0449\u0430\u044e\u0442\u0441\u044f \u043f\u043e\u00a0\u0448\u0438\u0440\u0438\u043d\u0435 \u043e\u043a\u043d\u0430  \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430. \u0414\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u043d\u0430\u043c \u043d\u0443\u0436\u043d\u043e \u0437\u043d\u0430\u0442\u044c \u043e\u0431\u0449\u0435\u0435 \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u043a\u043e\u043b\u043e\u043d\u043e\u043a \u0432\u00a0cells.  \u041c\u044b\u00a0\u0443\u0436\u0435 \u0440\u0430\u0441\u0441\u0447\u0438\u0442\u044b\u0432\u0430\u0435\u043c \u044d\u0442\u043e\u0442 \u043f\u043e\u043a\u0430\u0437\u0430\u0442\u0435\u043b\u044c \u0432\u00a0setColsNumber, \u043f\u0435\u0440\u0435\u0434\u0430\u0432\u0430\u044f \u0442\u0443\u0434\u0430  \u0430\u0436\u00a0\u0442\u0440\u0438 \u0430\u0440\u0433\u0443\u043c\u0435\u043d\u0442\u0430. \u041c\u043d\u0435 \u044d\u0442\u043e \u043f\u0435\u0440\u0435\u0441\u0442\u0430\u043b\u043e \u043d\u0440\u0430\u0432\u0438\u0442\u0441\u044f, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u044f\u00a0\u0437\u0430\u0432\u0435\u0434\u0443 \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u044b\u0435  \u0432\u044b\u0447\u0438\u0441\u043b\u044f\u0435\u043c\u044b\u0435 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0435, \u043e\u0442\u0432\u0435\u0447\u0430\u044e\u0449\u0438\u0435 \u0437\u0430\u00a0\u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u043a\u043e\u043b\u043e\u043d\u043e\u043a, \u0438\u00a0\u0438\u0437\u0431\u0430\u0432\u043b\u044e\u0441\u044c  \u043e\u0442\u00a0refColsNumber \u0438\u00a0setColsNumber:<\/p>\n<pre><code class=\"javascript\">\/\/ .\/components\/CommonTableAdaptive\/computed-first-row-length.js import { computed, ref } from 'vue'; const countCollsNum = (row) =>   row.reduce((sum, { cols }) => sum + (cols || 1), 0); const refPropsTitlesFirstRowLength = ref(0); const getPropsTitlesFirstRowLength = computed(   () => refPropsTitlesFirstRowLength.value ); const setPropsTitlesFirstRowLength = (row0) => {   refPropsTitlesFirstRowLength.value = countCollsNum(row0); }; const refPropsCellsFirstRowLength = ref(0); const getPropsCellsFirstRowLength = computed(   () => refPropsCellsFirstRowLength.value ); const setPropsCellsFirstRowLength = (row0) => {   refPropsCellsFirstRowLength.value = countCollsNum(row0); }; export {   getPropsTitlesFirstRowLength,   setPropsTitlesFirstRowLength,   getPropsCellsFirstRowLength,   setPropsCellsFirstRowLength, };  \/\/ .\/components\/CommonTableAdaptive\/TableTemplate.vue \/\/ \u0443\u0434\u0430\u043b\u0438\u0442\u044c setColsNumber \u0432 \u0441\u0442\u0440\u043e\u043a\u0435 \/\/ import { getColsNumber, setColsNumber } from '.\/computed-cols-number'; import { getColsNumber } from '.\/computed-cols-number'; \/\/ \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c import {   setPropsTitlesFirstRowLength,   setPropsCellsFirstRowLength, } from '.\/computed-first-row-length';  setPropsTitlesFirstRowLength(props.titles[0]); watch(() => props.titles[0], setPropsTitlesFirstRowLength); setPropsCellsFirstRowLength(props.cells[0]); watch(() => props.cells[0], setPropsCellsFirstRowLength);  \/\/ \u0443\u0434\u0430\u043b\u0438\u0442\u044c import { isTableWide } from '.\/computed-table-wide';  setColsNumber([props.titles[0], props.cells[0], isTableWide.value]); watch(   () => [props.titles[0], props.cells[0], isTableWide.value],   setColsNumber );  \/\/ .\/components\/CommonTableAdaptive\/computed-cols-number.js import { computed } from 'vue'; import {   getPropsCellsFirstRowLength,   getPropsTitlesFirstRowLength, } from '.\/computed-first-row-length';  import { isTableWide } from '.\/computed-table-wide'; const getColsNumber = computed(() => {   let colsNumber = getPropsCellsFirstRowLength.value;   if (isTableWide.value) {     colsNumber += getPropsTitlesFirstRowLength.value;   }   return colsNumber; });  export { getColsNumber };<\/code><\/pre>\n<p>\u0417\u0430\u0432\u0435\u0434\u0435\u043c \u0432\u044b\u0447\u0438\u0441\u043b\u044f\u0435\u043c\u0443\u044e \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u0443\u044e RowsSplitter:<\/p>\n<pre><code class=\"javascript\">\/\/ .\/components\/CommonTableAdaptive\/computed-rows-splitter.js import { computed, ref } from 'vue';  const refRowsSplitter = ref(1); const getRowsSplitter = computed(() => refRowsSplitter.value); const setRowsSplitter = (num) => {   refRowsSplitter.value = num; };  export { getRowsSplitter, setRowsSplitter };<\/code><\/pre>\n<p>\u0418 \u0438\u0437\u043c\u0435\u043d\u0438\u043c \u0444\u0443\u043d\u043a\u0446\u0438\u044e watchTableWidthWithArg:<\/p>\n<pre><code class=\"javascript\">\/\/ .\/components\/CommonTableAdaptive\/watch-table-width.js import { setRowsSplitter } from '.\/computed-rows-splitter'; import { getPropsCellsFirstRowLength } from '.\/computed-first-row-length'; import { isTableWide, switchTableWide } from '.\/computed-table-wide';  let clientWidthOld; const watchTableWidth = (domSection, changeProps) => {   const { clientWidth } = document.documentElement;   if (changeProps || clientWidth !== clientWidthOld) {     clientWidthOld = clientWidth;     setRowsSplitter(1);     if (!isTableWide.value) switchTableWide();     setTimeout(() => {       if (domSection &amp;&amp; domSection.offsetWidth > clientWidth) {         switchTableWide();         setTimeout(() => {           if (domSection &amp;&amp; domSection.offsetWidth > clientWidth) {             setRowsSplitter(seekRowsSplitter(domSection, clientWidth));           }         }, 0);       }     }, 0);   } };  export { watchTableWidth };  \/\/ .\/components\/CommonTableAdaptive\/TableTemplate.vue \/\/ \u0443\u0434\u0430\u043b\u0438\u0442\u044c import { watchTableWidthWithArg } from '.\/watch-table-width';  const watchTableWidth = () => {   watchTableWidthWithArg(domSection.value); }; onMounted(watchTableWidth); window.addEventListener('resize', watchTableWidth);  \/\/ \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c import { watchTableWidth } from '.\/watch-table-width';  onMounted(() => {   watchTableWidth(domSection.value); }); window.addEventListener('resize', () => {   watchTableWidth(domSection.value); }); watch(   () => [props.titles[0], props.cells[0]],   () => {     watchTableWidth(domSection.value, 'changeProps');   } );<\/code><\/pre>\n<p>\u041c\u044b \u043f\u0435\u0440\u0435\u0438\u043c\u0435\u043d\u043e\u0432\u0430\u043b\u0438 \u0444\u0443\u043d\u043a\u0446\u0438\u044e watchTableWidth \u0438 \u0434\u043e\u0431\u0430\u0432\u0438\u043b\u0438 \u043a \u043d\u0435\u0439 \u0430\u0440\u0433\u0443\u043c\u0435\u043d\u0442 changeProps &#8212; \u0447\u0442\u043e\u0431\u044b \u0432\u044b\u0437\u044b\u0432\u0430\u0442\u044c \u0435\u0435 \u043d\u0435 \u0442\u043e\u043b\u044c\u043a\u043e \u043f\u0440\u0438 \u0441\u043e\u0431\u044b\u0442\u0438\u0438 <code>window.onresize<\/code>, \u043d\u043e \u0438 \u043f\u0440\u0438 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0438 \u043a\u043e\u043b-\u0432\u0430 \u044f\u0447\u0435\u0435\u043a \u0432 cells \u0438\u043b\u0438 titles. \u041f\u0440\u0438 \u0441\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u043d\u0438\u0438 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 \u043c\u044b \u0434\u043e\u0431\u0430\u0432\u0438\u043b\u0438 \u0440\u0435\u0437\u0435\u0442 \u0432\u044b\u0447\u0438\u0441\u043b\u044f\u0435\u043c\u043e\u0439 RowsSplitter (<code>setRowsSplitter(1)<\/code>). \u0417\u0430\u0442\u0435\u043c, \u043f\u043e\u0441\u043b\u0435 \u0442\u043e\u0433\u043e, \u043a\u0430\u043a \u043c\u044b \u0443\u0431\u0435\u0434\u0438\u043b\u0438\u0441\u044c, \u0447\u0442\u043e \u043d\u0443\u043c \u043d\u0443\u0436\u043d\u043e \u043f\u0435\u0440\u0435\u043a\u043b\u044e\u0447\u0438\u0442\u044c refTableWide \u0432 \u043f\u043e\u043b\u043e\u0436\u0435\u043d\u0438\u0435 false (\u0442.\u0435. \u0434\u0435\u043b\u0430\u0435\u043c \u0442\u0430\u0431\u043b\u0438\u0446\u0443 \u0430\u0434\u0430\u043f\u0442\u0438\u0432\u043d\u043e\u0439), \u043c\u044b \u0437\u0430\u043f\u0443\u0441\u043a\u0430\u0435\u043c \u0435\u0449\u0435 \u043e\u0434\u043d\u0443 \u043d\u0443\u043b\u0435\u0432\u0443\u044e \u0437\u0430\u0434\u0435\u0440\u0436\u043a\u0443 \u0447\u0435\u0440\u0435\u0437 setTimeout, \u0438 \u043f\u0440\u043e\u0432\u0435\u0440\u044f\u0435\u043c, \u0443\u043c\u0435\u0449\u0430\u0435\u0442\u0441\u044f \u043b\u0438 \u043d\u0430\u0448\u0430 \u0443\u0436\u0435 \u0430\u0434\u0430\u043f\u0442\u0438\u0432\u043d\u0430\u044f \u0442\u0430\u0431\u043b\u0438\u0446\u0430 \u0432 \u044d\u043a\u0440\u0430\u043d \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430 \u043f\u043e \u0448\u0438\u0440\u0438\u043d\u0435. \u0415\u0441\u043b\u0438 \u043d\u0435 \u0443\u043c\u0435\u0449\u0430\u0435\u0442\u0441\u044f &#8212; \u043d\u0430\u0434\u043e \u0440\u0430\u0437\u0431\u0438\u0432\u0430\u0442\u044c \u0441\u0442\u0440\u043e\u043a\u0438 sells \u043d\u0430 \u043f\u043e\u0434\u0441\u0442\u0440\u043e\u043a\u0438, \u0438 \u043d\u0443\u0436\u043d\u043e \u0432\u044b\u0441\u0447\u0438\u0442\u0430\u0442\u044c \u0438 \u0437\u0430\u043f\u0438\u0441\u0430\u0442\u044c \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u044d\u0442\u0438\u0445 \u043f\u043e\u0434\u0441\u0442\u0440\u043e\u043a (<code>setRowsSplitter(seekRowsSplitter(domSection, clientWidth));<\/code>).<\/p>\n<p>\u0417\u0430\u0439\u043c\u0435\u043c\u0441\u044f \u0444\u0443\u043d\u043a\u0446\u0438\u0435\u0439 seekRowsSplitter. \u0427\u0442\u043e\u0431\u044b \u043d\u0430\u0447\u0430\u0442\u044c \u0440\u0430\u0437\u0431\u0438\u0440\u0430\u0442\u044c\u0441\u044f \u0441 \u0448\u0438\u0440\u0438\u043d\u043e\u0439 \u0442\u0430\u0431\u043b\u0438\u0446\u044b \u0438 \u0448\u0438\u0440\u0438\u043d\u043e\u0439 \u044f\u0447\u0435\u0435\u043a cells, \u0432\u0441\u043f\u043e\u043c\u043d\u0438\u043c, \u0447\u0442\u043e \u043e\u043d\u0430 \u0441\u043e\u0441\u0442\u043e\u0438\u0442 \u0438\u0437 \u043e\u0431\u043e\u0440\u0430\u0447\u0438\u0432\u0430\u044e\u0449\u0435\u0433\u043e \u0442\u0435\u0433\u0430 &lt;section>, \u044f\u0447\u0435\u0435\u043a \u0448\u0430\u043f\u043a\u0438 \u0442\u0430\u0431\u043b\u0438\u0446\u044b &lt;h6> \u0438 \u044f\u0447\u0435\u0435\u043a titles \u0438 cells, \u0443 \u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u0442\u0435\u0433 &lt;p>. \u041f\u0440\u0438\u0447\u0435\u043c \u0443 \u044f\u0447\u0435\u0435\u043a titles, \u043a\u043e\u0433\u0434\u0430 \u0442\u0430\u0431\u043b\u0438\u0446\u0430 \u0443\u0436\u0435 \u0430\u0434\u0430\u043f\u0442\u0438\u0432\u043d\u0430\u044f, CSS-\u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e \u201cgrid-column-end\u201d \u0440\u0430\u0432\u043d\u043e \u201cspan N\u201d, \u0433\u0434\u0435 N &#8212; \u043e\u0431\u0449\u0435\u0435 \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u044f\u0447\u0435\u0435\u043a cells. \u041d\u0430\u043f\u0438\u0448\u0435\u043c \u0444\u0443\u043d\u043a\u0446\u0438\u044e, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u0442, \u0441\u043a\u043e\u043b\u044c\u043a\u043e \u043a\u043e\u043b\u043e\u043d\u043e\u043a \u043e\u0431\u044a\u0435\u0434\u0438\u043d\u044f\u0435\u0442 \u044f\u0447\u0435\u0439\u043a\u0430, \u0443\u0436\u0435 \u044f\u0432\u043b\u044f\u044e\u0449\u0430\u044f\u0441\u044f dom-\u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u043c:<\/p>\n<pre><code class=\"javascript\">\/\/ \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u0432 .\/components\/CommonTableAdaptive\/watch-table-width.js const seekCols = (el) => {   const { gridColumnEnd } = getComputedStyle(el);   let cols = 1;   if (gridColumnEnd.startsWith('span ')) {     cols = Number(gridColumnEnd.slice(5));   }   return cols; };<\/code><\/pre>\n<p>\u0422\u0435\u043f\u0435\u0440\u044c \u043d\u0430\u043c \u043d\u0443\u0436\u043d\u0430 \u0444\u0443\u043d\u043a\u0446\u0438\u044f, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u043d\u0430\u0439\u0434\u0435\u0442 \u0432\u0441\u0435 \u0448\u0438\u0440\u0438\u043d\u044b \u043a\u043e\u043b\u043e\u043d\u043e\u043a \u0432 cells, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0442\u043e\u0436\u0435 \u0441\u0442\u0430\u043b\u0438 dom-\u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430\u043c\u0438:<\/p>\n<pre><code class=\"javascript\">\/\/ \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u0432 .\/components\/CommonTableAdaptive\/watch-table-width.js import { getPropsCellsFirstRowLength } from '.\/computed-first-row-length';  const seekCellsWidths = ({ children }) => {   const widths = [];   widths.length = getPropsCellsFirstRowLength.value;   let leftFirst;   let iCol = -1;   Array.from(children)     .filter(({ tagName }) => tagName === 'P')     .filter((child) => seekCols(child) !== getPropsCellsFirstRowLength.value)     .find((child) => {       const { left, width } = child.getBoundingClientRect();       if (leftFirst === undefined) leftFirst = left;       const cols = seekCols(child);       if (iCol === getPropsCellsFirstRowLength.value - 1) iCol = 0;       else iCol += cols;       if (cols === 1) widths[iCol] = width;       return !widths.includes(undefined);     });   return widths.map((w) => Math.round(w)); };<\/code><\/pre>\n<p>\u0424\u0443\u043d\u043a\u0446\u0438\u044f seekCellsWidths \u043f\u0440\u0438\u043d\u0438\u043c\u0430\u0435\u0442 \u043d\u0430\u0431\u043e\u0440 dom-\u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 &lt;section> \u0442\u0430\u0431\u043b\u0438\u0446\u044b. \u041c\u044b \u0437\u0430\u0432\u043e\u0434\u0438\u043c \u043c\u0430\u0441\u0441\u0438\u0432 widths \u0434\u043b\u0438\u043d\u043e\u0439, \u0440\u0430\u0432\u043d\u043e\u0439 \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u0443 \u044f\u0447\u0435\u0435\u043a cells (\u044d\u0442\u043e \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u0437\u043d\u0430\u0435\u0442 computed \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u0430\u044f getPropsCellsFirstRowLength). \u0417\u0430\u0434\u0430\u0447\u0430 \u2014 \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u044c \u043f\u043e\u043b\u043d\u043e\u0441\u0442\u044c\u044e \u0437\u0430\u043f\u043e\u043b\u043d\u0435\u043d\u043d\u044b\u0439 \u043c\u0430\u0441\u0441\u0438\u0432 widths, \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430\u043c\u0438 \u043a\u043e\u0442\u043e\u0440\u043e\u0433\u043e \u0431\u0443\u0434\u0443\u0442 \u044f\u0432\u043b\u044f\u0442\u044c\u0441\u044f \u0448\u0438\u0440\u0438\u043d\u044b \u043a\u043e\u043b\u043e\u043d\u043e\u043a cells.<\/p>\n<p>\u041f\u0440\u0435\u043e\u0431\u0440\u0430\u0437\u0443\u0435\u043c \u043d\u0430\u0431\u043e\u0440 \u0434\u0435\u0442\u0435\u0439 dom-\u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 &lt;section> \u0432 \u043c\u0430\u0441\u0441\u0438\u0432, \u0438 \u043e\u0442\u0444\u0438\u043b\u044c\u0442\u0440\u0443\u0435\u043c \u0435\u0433\u043e: \u0443\u0431\u0435\u0440\u0435\u043c \u0432\u0441\u0435 \u044f\u0447\u0435\u0439\u043a\u0438 \u0448\u0430\u043f\u043a\u0438 \u0442\u0430\u0431\u043b\u0438\u0446\u044b (\u0443 \u044d\u0442\u0438\u0445 dom-\u044f\u0447\u0435\u0435\u043a <code>tagName !== 'P'<\/code>) \u0438 \u0432\u0441\u0435 \u044f\u0447\u0435\u0439\u043a\u0438 titles (\u0443 \u044d\u0442\u0438\u0445 \u044f\u0447\u0435\u0435\u043a \u043e\u0431\u044a\u0435\u0434\u0438\u043d\u0435\u043d\u043d\u043e\u0435 \u043a\u043e\u043b-\u0432\u043e \u0441\u0442\u043e\u043b\u0431\u0446\u043e\u0432 \u0440\u0430\u0432\u043d\u043e \u043a\u043e\u043b-\u0432\u0443 \u0441\u0442\u043e\u043b\u0431\u0446\u043e\u0432 cells, \u0442.\u0435. <code>seekCols(child) === getPropsCellsFirstRowLength.value<\/code>).<\/p>\n<p>\u0418\u0442\u043e\u0433\u043e\u0432\u044b\u0439 \u043c\u0430\u0441\u0441\u0438\u0432, \u0432 \u043a\u043e\u0442\u043e\u0440\u043e\u043c \u043e\u0441\u0442\u0430\u043b\u0438\u0441\u044c \u0442\u043e\u043b\u044c\u043a\u043e \u044f\u0447\u0435\u0439\u043a\u0438 \u0438\u0437 cells, \u0431\u0443\u0434\u0435\u043c \u043f\u0440\u043e\u0445\u043e\u0434\u0438\u0442\u044c \u0434\u043e \u0442\u0435\u0445 \u043f\u043e\u0440, \u043f\u043e\u043a\u0430 \u043f\u043e\u043b\u043d\u043e\u0441\u0442\u044c\u044e \u043d\u0435 \u0437\u0430\u043f\u043e\u043b\u043d\u0438\u043c \u043c\u0430\u0441\u0441\u0438\u0432 widths. \u0414\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u043c \u0432 \u044d\u0442\u043e\u0442 \u043c\u0430\u0441\u0441\u0438\u0432 \u0442\u043e\u043b\u044c\u043a\u043e \u0448\u0438\u0440\u0438\u043d\u0443 \u044f\u0447\u0435\u0439\u043a\u0438, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u0437\u0430\u043d\u0438\u043c\u0430\u0435\u0442 \u0442\u043e\u043b\u044c\u043a\u043e \u043e\u0434\u043d\u0443 \u043a\u043e\u043b\u043e\u043d\u043a\u0443 (\u0444\u0443\u043d\u043a\u0446\u0438\u044f seekCols \u0432\u044b\u0434\u0430\u0435\u0442 1). \u0418\u043d\u0434\u0435\u043a\u0441 \u0434\u043b\u044f \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 \u0432\u044b\u0441\u0447\u0438\u0442\u044b\u0432\u0430\u0435\u043c \u0447\u0435\u0440\u0435\u0437 \u0441\u0447\u0435\u0442\u0447\u0438\u043a iCol, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0443\u0432\u0435\u043b\u0438\u0447\u0438\u0432\u0430\u0435\u0442\u0441\u044f \u043d\u0430 \u043a\u043e\u043b-\u0432\u043e \u043a\u043e\u043b\u043e\u043d\u043e\u043a, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0437\u0430\u043d\u0438\u043c\u0430\u0435\u0442 \u043f\u0440\u0435\u0434\u044b\u0434\u0443\u0449\u0430\u044f \u044f\u0447\u0435\u0439\u043a\u0430, \u0438 \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043e\u0431\u043d\u0443\u043b\u044f\u0435\u0442\u0441\u044f, \u0435\u0441\u043b\u0438 \u0435\u0433\u043e \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u0432\u044b\u0440\u0430\u0441\u0442\u0430\u0435\u0442 \u0434\u043e \u043e\u0431\u0449\u0435\u0439 \u0434\u043b\u0438\u043d\u044b \u043a\u043e\u043b\u043e\u043d\u043e\u043a \u0437\u0430 \u043c\u0438\u043d\u0443\u0441\u043e\u043c \u0435\u0434\u0438\u043d\u0438\u0446\u044b.<\/p>\n<p>\u041c\u044b \u0437\u043d\u0430\u0435\u043c \u0448\u0438\u0440\u0438\u043d\u044b \u0432\u0441\u0435\u0445 \u043a\u043e\u043b\u043e\u043d\u043e\u043a cells, \u0438 \u0442\u0435\u043f\u0435\u0440\u044c \u043c\u043e\u0436\u0435\u043c \u043f\u043e\u0441\u0447\u0438\u0442\u0430\u0442\u044c, \u043d\u0430 \u0441\u043a\u043e\u043b\u044c\u043a\u043e \u043f\u043e\u0434\u0441\u0442\u0440\u043e\u043a \u043d\u0443\u0436\u043d\u043e \u0440\u0430\u0437\u0434\u0435\u043b\u0438\u0442\u044c \u043a\u0430\u0436\u0434\u0443\u044e \u0441\u0442\u0440\u043e\u043a\u0443 cells:<\/p>\n<pre><code class=\"javascript\">\/\/ \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u0432 .\/components\/CommonTableAdaptive\/watch-table-width.js const seekRowsSplitter = (domSection, clientWidth) => {   const widths = seekCellsWidths(domSection);   const matrix = [[]];   widths.forEach((width) => {     if (       matrix[matrix.length - 1].reduce((sum, w) => sum + w, 0) + width >       clientWidth     ) {       matrix.push([]);     }     matrix[matrix.length - 1].push(width);   });   return matrix.length; };<\/code><\/pre>\n<p>\u0412 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 seekRowsSplitter \u0437\u0430\u0432\u043e\u0434\u0438\u043c \u043c\u0430\u0441\u0441\u0438\u0432 matrix, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0431\u0443\u0434\u0435\u0442 \u0441\u043e\u0441\u0442\u043e\u044f\u0442\u044c \u0438\u0437 \u043f\u043e\u0434\u0441\u0442\u0440\u043e\u043a. \u0412 \u043d\u043e\u0432\u0443\u044e (\u043f\u043e\u0441\u043b\u0435\u0434\u043d\u044e\u044e \u0432 \u043c\u0430\u0441\u0441\u0438\u0432\u0435) \u043f\u043e\u0434\u0441\u0442\u0440\u043e\u043a\u0443 \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u043c \u044f\u0447\u0435\u0439\u043a\u0443 \u0441 \u0438\u0437\u0432\u0435\u0441\u0442\u043d\u043e\u0439 \u0448\u0438\u0440\u0438\u043d\u043e\u0439 \u0438\u0437 widths \u0434\u043e \u0442\u0435\u0445 \u043f\u043e\u0440, \u043f\u043e\u043a\u0430 \u044d\u0442\u0430 \u043f\u043e\u0434\u0441\u0442\u0440\u043e\u043a\u0430 \u0443\u043c\u0435\u0449\u0430\u0435\u0442\u0441\u044f \u0432 \u0448\u0438\u0440\u043e\u0438\u043d\u0443 \u044d\u043a\u0440\u0430\u043d\u0430, \u0438\u043b\u0438 \u0441\u0443\u043c\u043c\u0430 \u0448\u0438\u0440\u0438\u043d \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u044d\u0442\u043e\u0439 \u043f\u043e\u0434\u0441\u0442\u0440\u043e\u043a\u0438 &lt;= window.clientWidth. \u0415\u0441\u043b\u0438 \u0431\u043e\u043b\u044c\u0448\u0435 \u2014 \u0437\u0430\u0432\u043e\u0434\u0438\u043c \u043d\u043e\u0432\u0443\u044e \u043f\u043e\u0434\u0441\u0442\u0440\u043e\u043a\u0443. \u0412 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u0435 \u043c\u044b \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u043c \u0442\u043e, \u0447\u0442\u043e \u043d\u0443\u0436\u043d\u043e: \u0434\u043b\u0438\u043d\u0430 \u043c\u0430\u0441\u0441\u0438\u0432\u0430 matrix \u2014 \u0438 \u0435\u0441\u0442\u044c \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u043f\u043e\u0434\u0441\u0442\u0440\u043e\u043a, \u043d\u0430 \u043a\u043e\u0442\u043e\u0440\u0443\u044e \u043d\u0443\u0436\u043d\u043e \u0440\u0430\u0437\u0434\u0435\u043b\u0438\u0442\u044c \u043a\u0430\u0436\u0434\u0443\u044e \u0441\u0442\u0440\u043e\u043a\u0443 cells.<\/p>\n<p>\u0418\u0437\u043c\u0435\u043d\u0438\u043c \u0432\u044b\u0447\u0438\u0441\u043b\u044f\u0435\u043c\u0443\u044e \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u0443\u044e, \u043e\u0442\u0432\u0435\u0447\u0430\u044e\u0449\u0443\u044e \u0437\u0430 \u043a\u043e\u043b-\u0432\u043e \u043a\u043e\u043b\u043e\u043d\u043e\u043a \u0442\u0430\u0431\u043b\u0438\u0446\u044b:<\/p>\n<pre><code class=\"javascript\">\/\/ .\/components\/CommonTableAdaptive\/computed-cols-number.js import { computed } from 'vue'; import {   getPropsCellsFirstRowLength,   getPropsTitlesFirstRowLength, } from '.\/computed-first-row-length'; import { getRowsSplitter } from '.\/computed-rows-splitter'; import { isTableWide } from '.\/computed-table-wide';  const getColsNumber = computed(() => {   let colsNumber = getPropsCellsFirstRowLength.value;   if (isTableWide.value) {     colsNumber += getPropsTitlesFirstRowLength.value;   } else if (getRowsSplitter.value > 1) {     colsNumber = Math.ceil(colsNumber \/ getRowsSplitter.value);   }   return colsNumber; });  export { getColsNumber };<\/code><\/pre>\n<p>\u041c\u044b \u0434\u043e\u0431\u0430\u0432\u0438\u043b\u0438 \u0443\u0441\u043b\u043e\u0432\u0438\u0435 (\u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u0435\u0442\u0441\u044f \u043f\u0440\u0438 !isTableWide.value): \u0435\u0441\u043b\u0438 \u043d\u0443\u0436\u043d\u043e \u0441\u0442\u0440\u043e\u043a\u0438 cells \u0434\u0435\u043b\u0438\u0442\u044c \u043d\u0430 \u043f\u043e\u0434\u0441\u0442\u0440\u043e\u043a\u0438, \u0442\u043e \u043e\u0431\u0449\u0435\u0435 \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u043a\u043e\u043b\u043e\u043d\u043e\u043a \u0434\u0435\u043b\u0438\u0442\u0441\u044f \u043d\u0430 \u043a\u043e\u043b-\u0432\u043e \u044d\u0442\u0438\u0445 \u043f\u043e\u0434\u0441\u0442\u0440\u043e\u043a \u0441 \u043e\u043a\u0440\u0443\u0433\u043b\u0435\u043d\u0438\u0435\u043c \u0432 \u0431\u043e\u043b\u044c\u0448\u0443\u044e \u0441\u0442\u043e\u0440\u043e\u043d\u0443.<\/p>\n<p>\u041e\u0441\u0442\u0430\u043b\u043e\u0441\u044c \u0441\u043e\u0432\u0441\u0435\u043c \u043d\u0435\u043c\u043d\u043e\u0433\u043e \u2014 \u0440\u0430\u0437\u0434\u0435\u043b\u0438\u0442\u044c cells \u043d\u0430 \u043f\u043e\u0434\u0441\u0442\u0440\u043e\u043a\u0438. \u041d\u0430\u043f\u0438\u0448\u0435\u043c \u0444\u0443\u043d\u043a\u0446\u0438\u044e splitRows:<\/p>\n<pre><code class=\"javascript\">\/\/ .\/components\/CommonTableAdaptive\/split-rows.js import { getColsNumber } from '.\/computed-cols-number';  const splitRows = (rowsOld) => {   const rowsNew = [];   let countCol;   rowsOld.forEach((row) => {     countCol = 0;     row.forEach((cellExt, iCol) => {       if (countCol === 0) {         rowsNew.push([]);       }       const cell = { ...cellExt };       let { cols } = cell;        rowsNew[rowsNew.length - 1].push(cell);       countCol += cols ? cols : 1;       if (countCol === getColsNumber.value) countCol = 0;     });   });   return rowsNew; };  export { splitRows };<\/code><\/pre>\n<p>\u041f\u043e\u043a\u0430 \u044d\u0442\u0430 \u0444\u0443\u043d\u043a\u0446\u0438\u044f \u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e \u043f\u0440\u043e\u0441\u0442\u0430: \u043c\u0430\u0441\u0441\u0438\u0432 rowsNew \u0441\u043e\u0441\u0442\u043e\u0438\u0442 \u0438\u0437 \u0441\u0442\u0440\u043e\u043a, \u0434\u043b\u0438\u043d\u0430 \u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u043d\u0435 \u0431\u043e\u043b\u044c\u0448\u0435 getColsNumber, \u0430 \u0432 getColsNumber \u043c\u044b \u0443\u0436\u0435 \u0443\u0447\u0438\u0442\u044b\u0432\u0430\u0435\u043c \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u043f\u043e\u0434\u0441\u0442\u0440\u043e\u043a getRowsSplitter. \u041a\u0430\u0436\u0434\u0443\u044e \u044f\u0447\u0435\u0439\u043a\u0443 \u043c\u044b \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u043c \u0432 \u043a\u043e\u043d\u0435\u0446 \u043f\u043e\u0441\u043b\u0435\u0434\u043d\u0435\u0439 \u0441\u0442\u0440\u043e\u043a\u0438 \u0432 rowsNew. \u0421\u0447\u0435\u0442\u0447\u0438\u043a countCol \u0441 \u043a\u0430\u0436\u0434\u043e\u0439 \u044f\u0447\u0435\u0439\u043a\u043e\u0439 \u0440\u0430\u0441\u0442\u0435\u0442 \u043b\u0438\u0431\u043e \u043d\u0430 \u0435\u0434\u0438\u043d\u0438\u0446\u0443, \u0435\u0441\u043b\u0438 \u044d\u0442\u0430 \u044f\u0447\u0435\u0439\u043a\u0430 \u043d\u0435 \u043e\u0431\u044a\u0435\u0434\u0438\u043d\u0435\u043d\u0430 \u0441 \u0434\u0440\u0443\u0433\u0438\u043c\u0438, \u043b\u0438\u0431\u043e \u043d\u0430 cols \u044f\u0447\u0435\u0439\u043a\u0438-\u043e\u0431\u044a\u0435\u043a\u0442\u0430. \u041a\u0430\u043a \u0442\u043e\u043b\u044c\u043a\u043e \u0441\u0447\u0435\u0442\u0447\u0438\u043a \u0432\u044b\u0440\u0430\u0441\u0442\u0430\u0435\u0442 \u0434\u043e \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u0430 \u043a\u043e\u043b\u043e\u043d\u043e\u043a getColsNumber, \u0441\u0447\u0435\u0442\u0447\u0438\u043a \u043e\u0431\u043d\u0443\u043b\u044f\u0435\u0442\u0441\u044f, \u0438 \u0437\u0430\u0432\u043e\u0434\u0438\u0442\u0441\u044f \u043d\u043e\u0432\u0430\u044f \u0441\u0442\u0440\u043e\u043a\u0430 \u0432 rowsNew.<\/p>\n<p>\u041d\u043e \u0435\u0441\u0442\u044c \u0434\u0432\u0435 \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u044b, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043e\u0431\u043e\u0437\u043d\u0430\u0447\u0435\u043d\u044b \u0432 \u043d\u0430\u0447\u0430\u043b\u0435 \u044d\u0442\u043e\u0439 \u0433\u043b\u0430\u0432\u044b, \u0438 \u0434\u0430\u0436\u0435 \u043d\u0430\u0440\u0438\u0441\u043e\u0432\u0430\u043d\u044b (\u0441\u043c. \u0432 \u043f\u043e\u0441\u043b\u0435\u0434\u043d\u0435\u043c \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0438 \u201c2 columns\u201d \u0438 \u201clast column\u201d. \u0420\u0435\u0448\u0438\u043c \u044d\u0442\u0438 \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u044b:<\/p>\n<pre><code class=\"javascript\">\/\/ .\/components\/CommonTableAdaptive\/split-rows.js \/\/ \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u043f\u0435\u0440\u0435\u0434 \u0441\u0442\u0440\u043e\u043a\u043e\u0439 rowsNew[rowsNew.length - 1].push(cell); while (cols &amp;&amp; cols + countCol > getColsNumber.value) {   const colsDouble = getColsNumber.value - countCol;   const cellDouble = { ...cell };   if (cellDouble.cols === 1) delete cellDouble.cols;   else cellDouble.cols = colsDouble;   rowsNew[rowsNew.length - 1].push(cellDouble);   rowsNew.push([]);   cols -= colsDouble;   if (cols === 1) {     cols = undefined;     delete cell.cols;   } else {     cell.cols = cols;   }   countCol = 0; }<\/code><\/pre>\n<p>\u041f\u043e\u0432\u0442\u043e\u0440\u044e\u0441\u044c\u00a0\u2014 \u044f\u0447\u0435\u0439\u043a\u0430 \u0432\u00a0\u043a\u043e\u043d\u0435\u0446 \u043f\u043e\u0441\u043b\u0435\u0434\u043d\u0435\u0439 \u0441\u0442\u0440\u043e\u043a\u0438 rowsNew \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0434\u043e\u00a0\u0442\u0435\u0445  \u043f\u043e\u0440, \u043f\u043e\u043a\u0430 \u0441\u0447\u0435\u0442\u0447\u0438\u043a countCol \u043d\u0435\u00a0\u0440\u0430\u0432\u0435\u043d \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u0443 \u043a\u043e\u043b\u043e\u043d\u043e\u043a \u0432\u00a0\u0442\u0430\u0431\u043b\u0438\u0446\u0435  getColsNumber.value, \u0438\u043d\u0430\u0447\u0435 \u0437\u0430\u0432\u043e\u0434\u0438\u0442\u0441\u044f \u043d\u043e\u0432\u0430\u044f \u0441\u0442\u0440\u043e\u043a\u0430 \u0432\u00a0rowsNew \u0438\u00a0\u0441\u0447\u0435\u0442\u0447\u0438\u043a  \u043e\u0431\u043d\u0443\u043b\u044f\u0435\u0442\u0441\u044f. \u0415\u0441\u043b\u0438\u00a0\u0436\u0435 \u043d\u0430\u043c \u043d\u0443\u0436\u043d\u043e \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u044f\u0447\u0435\u0439\u043a\u0443, \u0443\u00a0\u043a\u043e\u0442\u043e\u0440\u043e\u0439 \u0435\u0441\u0442\u044c cols, \u0438  <code>cols + countCol > getColsNumber.value<\/code> \u2014 \u0437\u043d\u0430\u0447\u0438\u0442 \u044d\u0442\u0430 \u044f\u0447\u0435\u0439\u043a\u0430, \u043a\u043e\u0442\u043e\u0440\u0430\u044f  \u0437\u0430\u043d\u0438\u043c\u0430\u0435\u0442 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u043a\u043e\u043b\u043e\u043d\u043e\u043a, \u043d\u0430\u0445\u043e\u0434\u0438\u0442\u0441\u044f \u043d\u0430\u00a0\u0441\u0442\u044b\u043a\u0435 \u0440\u0430\u0437\u0440\u044b\u0432\u0430 \u0441\u0442\u0440\u043e\u043a, \u0438\u00a0\u0435\u0435\u00a0\u043d\u0443\u0436\u043d\u043e  \u0434\u0443\u0431\u043b\u0438\u0440\u043e\u0432\u0430\u0442\u044c, \u0447\u0442\u043e \u0438\u00a0\u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442 \u0432\u00a0\u0446\u0438\u043a\u043b\u0435 while.<\/p>\n<p>\u0422\u0435\u043f\u0435\u0440\u044c \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u0438\u043c \u043f\u0440\u0438\u043c\u0435\u0440: \u0443 cell \u2014 7 \u043a\u043e\u043b\u043e\u043d\u043e\u043a. \u041d\u0430 \u043c\u0430\u043b\u0435\u043d\u044c\u043a\u043e\u043c \u044d\u043a\u0440\u0430\u043d\u0435 \u043f\u043e\u043c\u0435\u0449\u0430\u0435\u0442\u0441\u044f \u0442\u043e\u043b\u044c\u043a\u043e 4. \u041a\u0430\u0436\u0434\u0430\u044f \u0441\u0442\u0440\u043e\u043a\u0430 cell \u0434\u0435\u043b\u0438\u0442\u0441\u044f \u043d\u0430 \u0434\u0432\u0435 \u043f\u043e\u0434\u0441\u0442\u0440\u043e\u043a\u0438, \u0432 \u043f\u0435\u0440\u0432\u043e\u0439 \u2014 4 \u044f\u0447\u0435\u0439\u043a\u0438, \u0432\u043e \u0432\u0442\u043e\u0440\u043e\u0439 \u2014 \u0442\u0440\u0438. \u041f\u043e\u0441\u043a\u043e\u043b\u044c\u043a\u0443 \u0443 \u043d\u0430\u0441 \u0442\u0430\u0431\u043b\u0438\u0447\u043d\u043e\u0435 \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u0438\u0435, \u043d\u0430\u0434\u043e \u043f\u043e\u0441\u043b\u0435\u0434\u043d\u044e\u044e \u044f\u0447\u0435\u0439\u043a\u0443 \u0432\u0442\u043e\u0440\u043e\u0439 \u0441\u0442\u0440\u043e\u043a\u0438 \u0440\u0430\u0441\u0442\u044f\u043d\u0443\u0442\u044c \u043d\u0430 \u0434\u0432\u0435. \u0414\u043e\u0431\u0430\u0432\u0438\u043c \u043a\u043e\u0434 \u0432 \u0444\u0443\u043d\u043a\u0446\u0438\u044e, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0431\u0443\u0434\u0435\u0442 \u0434\u0435\u043b\u0430\u0442\u044c \u043f\u043e\u0434\u043e\u0431\u043d\u043e\u0435:<\/p>\n<pre><code class=\"javascript\">\/\/ .\/components\/CommonTableAdaptive\/split-rows.js \/\/ \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u043f\u0435\u0440\u0435\u0434 \u0441\u0442\u0440\u043e\u043a\u043e\u0439 rowsNew[rowsNew.length - 1].push(cell); if (iCol === row.length - 1) {   let colsRest = getColsNumber.value - countCol - (cols ? cols : 1);   if (colsRest) {     if (cols) cell.cols += colsRest;     else cell.cols = colsRest + 1;   } }<\/code><\/pre>\n<p>\u041e\u0442\u043b\u0438\u0447\u043d\u043e, \u0442\u0435\u043f\u0435\u0440\u044c \u0444\u0443\u043d\u043a\u0446\u0438\u044f splitRows \u0440\u0430\u0437\u0431\u0438\u0432\u0430\u0435\u0442 \u043a\u0430\u0436\u0434\u0443\u044e \u0441\u0442\u0440\u043e\u043a\u0443 cells \u043d\u0430 \u043f\u043e\u0434\u0441\u0442\u0440\u043e\u043a\u0438, \u0435\u0441\u043b\u0438 \u0441\u0442\u0440\u043e\u043a\u0438 \u043d\u0435 \u0443\u043c\u0435\u0449\u0430\u044e\u0442\u0441\u044f \u0446\u0435\u043b\u0438\u043a\u043e\u043c \u043d\u0430 \u044d\u043a\u0440\u0430\u043d\u0435. \u0418\u0437\u043c\u0435\u043d\u0438\u043c \u043a\u043e\u0434 \u0432 \u043c\u043e\u0434\u0443\u043b\u0435, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0442\u0440\u0430\u043d\u0441\u0444\u043e\u0440\u043c\u0438\u0440\u0443\u0435\u0442 \u044f\u0447\u0435\u0439\u043a\u0438 \u0438\u0437 sells:<\/p>\n<pre><code class=\"javascript\">\/\/ .\/components\/CommonTableAdaptive\/seek-table-cells.js \/\/ \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c import { getRowsSplitter } from '.\/computed-rows-splitter'; import { splitRows } from '.\/split-rows';  \/\/ \u0438\u0437\u043c\u0435\u043d\u0438\u0442\u044c \u0444\u0443\u043d\u043a\u0446\u0438\u044e seekTableCells const seekTableCells = (propsTitlesExt, propsCellsExt) => {   let propsTitles = transformCellsToObject(propsTitlesExt);   let propsCells = transformCellsToObject(propsCellsExt);   if (!isTableWide.value) {     propsTitles = transformCellsWithoutRows(propsTitles);     propsCells = transformCellsWithoutRows(propsCells);     if (getRowsSplitter.value > 1) {       propsCells = splitRows(propsCells);     }   }   const cells = [];   propsCells.forEach((row, iRow) => {     if (iRow % getRowsSplitter.value === 0) {       cells.push(...addTitleCells(propsTitles, iRow \/ getRowsSplitter.value));     }     cells.push(...addOtherCells(row, iRow, propsCells.length));   });   return cells; };<\/code><\/pre>\n<p>\u041f\u0440\u0438\u043c\u0435\u043d\u0438\u043c \u043d\u0430\u043f\u0438\u0441\u0430\u043d\u043d\u0443\u044e \u0444\u0443\u043d\u043a\u0446\u0438\u044e \u0438 \u043a \u0448\u0430\u043f\u043a\u0435 \u044f\u0447\u0435\u0435\u043a:<\/p>\n<pre><code class=\"javascript\">\/\/ .\/components\/CommonTableAdaptive\/seek-head-cols.js \/\/ \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c import { getColsNumber } from '.\/computed-cols-number'; import { getRowsSplitter } from '.\/computed-rows-splitter'; import { splitRows } from '.\/split-rows';  const transformRowsThroughOne = (rows) => {   const rowsNew = [];   for (let i = 0; i &lt; rows.length \/ 2; i += 1) {     rowsNew.push(rows[i], rows[rows.length \/ 2 + i]);   }   return rowsNew; };  \/\/ \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u0432 \u0444\u0443\u043d\u043a\u0446\u0438\u044e addRowsToHead \u043f\u0435\u0440\u0435\u0434 \u0441\u0442\u0440\u043e\u043a\u043e\u0439 let cells = []; if (rows &amp;&amp; !isTableWide.value &amp;&amp; getRowsSplitter.value > 1) {   let firstRowAllCols;   if (rows.length > 1 &amp;&amp; rows[0].length === 1) {     firstRowAllCols = rows.shift();     firstRowAllCols[0].cols = getColsNumber.value;   }   rows = splitRows(rows);   if (rows.length > 1) rows = transformRowsThroughOne(rows);   if (firstRowAllCols) rows.unshift(firstRowAllCols); }<\/code><\/pre>\n<p>\u0415\u0441\u043b\u0438 \u0443 \u043d\u0430\u0441 \u0430\u0434\u0430\u043f\u0442\u0438\u0432\u043d\u0430\u044f \u0442\u0430\u0431\u043b\u0438\u0446\u0430 (!isTableWide.value) \u0438 \u0435\u0441\u0442\u044c \u0440\u0430\u0437\u0434\u0435\u043b\u0435\u043d\u0438\u0435 \u0441\u0442\u0440\u043e\u043a \u043d\u0430 \u043f\u043e\u0434\u0441\u0442\u0440\u043e\u043a\u0438 (getRowsSplitter.value > 1), \u043c\u044b \u0441\u043c\u043e\u0442\u0440\u0438\u043c \u043d\u0430 \u043f\u0435\u0440\u0432\u0443\u044e \u0441\u0442\u0440\u043e\u043a\u0443 \u0448\u0430\u043f\u043a\u0438. \u0415\u0441\u043b\u0438 \u043e\u043d\u0430 \u0441\u043e\u0441\u0442\u043e\u0438\u0442 \u0432\u0441\u0435\u0433\u043e \u0438\u0437 \u043e\u0434\u043d\u043e\u0439 \u044f\u0447\u0435\u0439\u043a\u0438 (\u0442.\u0435. \u0440\u0430\u0441\u0442\u044f\u0433\u0438\u0432\u0430\u0435\u0442\u0441\u044f \u043d\u0430 \u0432\u0441\u0435 \u043a\u043e\u043b\u043e\u043d\u043a\u0438 \u0432 cells), \u043c\u044b \u0435\u0435 \u0432\u0440\u0435\u043c\u0435\u043d\u043d\u043e \u0443\u0434\u0430\u043b\u044f\u0435\u043c \u0438\u0437 \u0448\u0430\u043f\u043a\u0438, \u0437\u0430\u043e\u0434\u043d\u043e \u043f\u0440\u0438\u0441\u0432\u0430\u0438\u0432\u0430\u044f \u0435\u0439 cols, \u0440\u0430\u0432\u043d\u043e\u0435 \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u0443 \u043a\u043e\u043b\u043e\u043d\u043e\u043a \u0441 \u0443\u0447\u0435\u0442\u043e\u043c getRowsSplitter. \u041e\u0441\u0442\u0430\u0432\u0448\u0438\u0435\u0441\u044f \u0441\u0442\u0440\u043e\u043a\u0438 \u0448\u0430\u043f\u043a\u0438 \u043f\u0440\u0435\u043e\u0431\u0440\u0430\u0437\u0443\u0435\u043c \u0442\u0430\u043a\u0436\u0435, \u043a\u0430\u043a \u0438 cells \u0434\u043e \u044d\u0442\u043e\u0433\u043e. \u041e\u0434\u043d\u0430\u043a\u043e \u0442\u0435\u043f\u0435\u0440\u044c \u043d\u0430\u043c \u043d\u0443\u0436\u043d\u043e \u0440\u0430\u0441\u043a\u0438\u0434\u0430\u0442\u044c \u0441\u0442\u0440\u043e\u043a\u0438 \u0447\u0435\u0440\u0435\u0437 \u043e\u0434\u043d\u0443, \u0447\u0442\u043e \u0438 \u0434\u0435\u043b\u0430\u0435\u0442 \u0444\u0443\u043d\u043a\u0446\u0438\u044f transformRowsThroughOne. \u041d\u0443 \u0438 \u0435\u0441\u043b\u0438 \u043c\u044b \u043d\u0430\u0448\u043b\u0438 \u0441\u0442\u0440\u043e\u043a\u0443 \u0441 \u043e\u0434\u043d\u043e\u0439 \u044f\u0447\u0435\u0439\u043a\u043e\u0439, \u043f\u0440\u0438\u043a\u0440\u0435\u043f\u043b\u044f\u0435\u043c \u0435\u0435 \u043a \u0448\u0430\u043f\u043a\u0435 \u043e\u0431\u0440\u0430\u0442\u043d\u043e.<\/p>\n<p>\u0412\u0441\u0435 \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u043a\u0430\u043a \u043d\u0430\u0434\u043e:<\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/eb7\/c9d\/786\/eb7c9d786dbafcf90831ae34fc807233.png\" width=\"1560\" height=\"1133\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/eb7\/c9d\/786\/eb7c9d786dbafcf90831ae34fc807233.png\"\/><figcaption><\/figcaption><\/figure>\n<p>\u041a\u043e\u043c\u043c\u0438\u0442 \u201cMany Columns\u201d<\/p>\n<p>\u0422\u0430\u0431\u043b\u0438\u0446\u044b \u0441\u00a0\u043d\u0435\u0431\u043e\u043b\u044c\u0448\u0438\u043c \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e\u043c \u044f\u0447\u0435\u0435\u043a \u0432\u00a0cells \u0432\u044b\u0433\u043b\u044f\u0434\u044f\u0442 \u043d\u0435\u043f\u043b\u043e\u0445\u043e, \u043e\u0434\u043d\u0430\u043a\u043e  \u0447\u0435\u043c \u0431\u043e\u043b\u044c\u0448\u0435 \u044f\u0447\u0435\u0435\u043a\u00a0\u2014 \u0442\u0435\u043c \u043c\u0430\u0441\u0441\u0438\u0432\u043d\u0435\u0435 \u0448\u0430\u043f\u043a\u0430, \u0438\u00a0\u0442\u0435\u043c \u0445\u0443\u0436\u0435 \u0441\u0440\u0430\u0432\u043d\u0438\u0432\u0430\u0442\u044c \u0434\u0430\u043d\u043d\u044b\u0435.  \u0411\u043e\u043b\u044c\u0448\u043e\u0433\u043e \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u0430 \u044f\u0447\u0435\u0435\u043a \u0441\u043b\u0435\u0434\u0443\u0435\u0442 \u0438\u0437\u0431\u0435\u0433\u0430\u0442\u044c, \u043d\u043e\u00a0\u0441\u043b\u0443\u0447\u0430\u0438 \u0440\u0430\u0437\u043d\u044b\u0435 \u0431\u044b\u0432\u0430\u044e\u0442.  \u0414\u043e\u0431\u0430\u0432\u0438\u043c \u043f\u043e\u0441\u043b\u0435\u0434\u043d\u0438\u0439 \u0448\u0442\u0440\u0438\u0445, \u0443\u043b\u0443\u0447\u0448\u0430\u044e\u0449\u0438\u0439 \u0432\u043e\u0441\u043f\u0440\u0438\u044f\u0442\u0438\u0435 \u043a\u0430\u043a\u043e\u0439 \u0443\u0433\u043e\u0434\u043d\u043e \u043f\u043e\u00a0\u0440\u0430\u0437\u043c\u0435\u0440\u0443  \u0442\u0430\u0431\u043b\u0438\u0446\u044b.<\/p>\n<h2>\u0414\u0432\u0438\u0436\u0443\u0449\u0430\u044f\u0441\u044f \u0448\u0430\u043f\u043a\u0430 \u0430\u0434\u0430\u043f\u0442\u0438\u0432\u043d\u043e\u0439 \u0442\u0430\u0431\u043b\u0438\u0446\u044b<\/h2>\n<p>\u0412 CSS-Grid \u0435\u0441\u0442\u044c \u0445\u043e\u0440\u043e\u0448\u0435\u0435 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e, \u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u0441\u0434\u0435\u043b\u0430\u0435\u0442 \u043d\u0430\u0448\u0443 \u0442\u0430\u0431\u043b\u0438\u0446\u0443 \u0431\u043e\u043b\u0435\u0435 \u043f\u0440\u0438\u044f\u0442\u043d\u043e\u0439 \u0434\u043b\u044f \u0433\u043b\u0430\u0437 \u2014 \u201cgrid-row-start\u201d. \u0414\u043e\u0431\u0430\u0432\u0438\u043c \u043f\u0440\u0438\u0431\u0430\u0432\u043b\u0435\u043d\u0438\u0435 \u044d\u0442\u043e\u0433\u043e \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 \u0432 \u0444\u0443\u043d\u043a\u0446\u0438\u044e transformCellToTemplate, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u043f\u043e\u0434\u0433\u043e\u0442\u0430\u0432\u043b\u0438\u0432\u0430\u0435\u0442 \u044f\u0447\u0435\u0439\u043a\u0438-\u043e\u0431\u044a\u0435\u043a\u0442\u044b \u0434\u043b\u044f &lt;template>:<\/p>\n<pre><code class=\"javascript\">\/\/ .\/components\/CommonTableAdaptive\/transform-rows-to-template.js \/\/ \u0438\u0437\u043c\u0435\u043d\u0438\u0442\u044c \u043f\u0435\u0440\u0432\u0443\u044e \u0441\u0442\u0440\u043e\u043a\u0443 \u0432\u043d\u0443\u0442\u0440\u0438 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 transformCellToTemplate \/\/ \u0431\u044b\u043b\u043e const { text, cols, rows, cellType, clAdd } = cell; \/\/ \u0441\u0442\u0430\u043b\u043e const { text, cols, rows, indent, cellType, clAdd } = cell;  \/\/ \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u043f\u043e\u0441\u043b\u0435 \u0441\u0442\u0440\u043e\u043a\u0438 'if (rows) st += `grid-row-end: span ${rows};`;' if (indent) st += `grid-row-start: ${indent + 1};`;<\/code><\/pre>\n<p>\u0421\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u0432\u044b\u0447\u0438\u0441\u043b\u044f\u0435\u043c\u0443\u044e \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u0443\u044e HeadIndent:<\/p>\n<pre><code class=\"javascript\">\/\/ .\/components\/CommonTableAdaptive\/computed-head-indent.js import { computed, ref } from 'vue';  const refHeadIndent = ref(0); const getHeadIndent = computed(() => refHeadIndent.value);  let topMin; const setHeadIndentFromDom = (domSection, propsCellsColsLength) => {   if (domSection) {     const { top, height } = domSection.getBoundingClientRect();     if (!topMin) topMin = top;     const topMax = window.innerHeight - height;     let prc = (topMin - top) \/ (topMin - topMax);     if (prc > 1) prc = 1;     else if (prc &lt; 0) prc = 0;     prc = Math.round(prc * (propsCellsColsLength - 1));     refHeadIndent.value = prc;   } };  const resetIndent = () => {   refHeadIndent.value = 0;   topMin = undefined; };  export { getHeadIndent, resetIndent, setHeadIndentFromDom };<\/code><\/pre>\n<p>\u0424\u0443\u043d\u043a\u0446\u0438\u044f setHeadIndentFromDom \u043f\u0440\u0438\u043d\u0438\u043c\u0430\u0435\u0442 dom-\u044d\u043b\u0435\u043c\u0435\u043d\u0442 &lt;section> \u2014 \u043e\u0431\u043e\u0440\u0430\u0447\u0438\u0432\u0430\u044e\u0449\u0438\u0439 \u0442\u0435\u0433 \u043d\u0430\u0448\u0435\u0439 \u0442\u0430\u0431\u043b\u0438\u0446\u044b, \u0438 \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u0441\u0442\u0440\u043e\u043a \u0432 cells \u0438\u0437 props. \u041a\u043e\u0433\u0434\u0430 \u0442\u0430\u0431\u043b\u0438\u0446\u0430 \u0442\u043e\u043b\u044c\u043a\u043e \u0437\u0430\u0433\u0440\u0443\u0437\u0438\u043b\u0430\u0441\u044c \u0432 dom-\u0434\u0435\u0440\u0435\u0432\u043e, \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u0432\u044b\u0447\u0438\u0441\u043b\u0438\u0442\u044c \u0432\u044b\u0441\u043e\u0442\u0443 &lt;section> \u043e\u0442\u043d\u043e\u0441\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u043e\u043a\u043d\u0430 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430. \u042d\u0442\u043e \u0443\u0441\u043b\u043e\u0432\u043d\u044b\u0439 0%, \u043d\u0430\u0447\u0430\u043b\u043e \u0442\u0430\u0431\u043b\u0438\u0446\u044b (topMin). 100% (topMax) \u2014 \u043a\u043e\u0433\u0434\u0430 \u043d\u0438\u0436\u043d\u044f\u044f \u0433\u0440\u0430\u043d\u0438\u0446\u0430 \u0442\u0430\u0431\u043b\u0438\u0446\u044b \u0432\u0438\u0434\u043d\u0430 \u0432 \u043e\u043a\u043d\u0435 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430. \u0417\u043d\u0430\u044f topMin \u0438 topMax \u0438 \u0442\u0435\u043a\u0443\u0449\u0438\u0439 top \u043e\u0442\u043d\u043e\u0441\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u043e\u043a\u043d\u0430 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430 \u043f\u0440\u0438 \u0441\u043a\u0440\u043e\u043b\u043b\u0435, \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u0440\u0430\u0441\u0441\u0447\u0438\u0442\u0430\u0442\u044c, \u043d\u0430 \u0441\u043a\u043e\u043b\u044c\u043a\u043e \u043f\u0440\u043e\u0446\u0435\u043d\u0442\u043e\u0432 \u0442\u0430\u0431\u043b\u0438\u0446\u0430 \u043f\u043e\u0434\u043d\u044f\u043b\u0430\u0441\u044c \u0432\u0432\u0435\u0440\u0445. \u0410 \u0437\u043d\u0430\u044f \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u0441\u0442\u0440\u043e\u043a \u0432 cells, \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0438\u0442\u044c, \u043a \u043a\u0430\u043a\u043e\u0439 \u0441\u0442\u0440\u043e\u043a\u0435 cells \u043f\u043e\u0434\u0432\u0438\u043d\u0443\u0442\u044c \u0448\u0430\u043f\u043a\u0443 \u0442\u0430\u0431\u043b\u0438\u0446\u044b \u043f\u0440\u0438 \u0441\u043a\u0440\u043e\u043b\u043b\u0435.<\/p>\n<p>\u0418\u043c\u043f\u043e\u0440\u0442\u0438\u0440\u0443\u0435\u043c \u0441\u043e\u0437\u0434\u0430\u043d\u043d\u043e\u0435:<\/p>\n<pre><code class=\"javascript\">\/\/ .\/components\/CommonTableAdaptive\/watch-table-width.js \/\/ \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c import { resetIndent, setHeadIndentFromDom } from '.\/computed-head-indent'; \/\/ \u0438\u0437\u043c\u0435\u043d\u0438\u0442\u044c \u0444\u0443\u043d\u043a\u0446\u0438\u044e watchTableWidth const watchTableWidth = (domSection, propsCellsColsLength, changeProps) => {   const { clientWidth } = document.documentElement;   if (changeProps || clientWidth !== clientWidthOld) {     clientWidthOld = clientWidth;     setRowsSplitter(1);     resetIndent();     if (!isTableWide.value) switchTableWide();     setTimeout(() => {       if (domSection &amp;&amp; domSection.offsetWidth > clientWidth) {         switchTableWide();         setTimeout(() => {           if (domSection &amp;&amp; domSection.offsetWidth > clientWidth) {             setRowsSplitter(seekRowsSplitter(domSection, clientWidth));           }           setHeadIndentFromDom(domSection, propsCellsColsLength);         }, 0);       }     }, 0);   } };  \/\/ .\/components\/CommonTableAdaptive\/TableTemplate.vue \/\/ \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c import { setHeadIndentFromDom } from '.\/computed-head-indent'; \/\/ \u0442\u0440\u0438\u0436\u0434\u044b \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c 2-\u0439 \u0430\u0440\u0433\u0443\u043c\u0435\u043d\u0442 props.cells.length \u0432 \u0444\u0443\u043d\u043a\u0446\u0438\u044e watchTableWidth onMounted(() => {   watchTableWidth(domSection.value, props.cells.length); }); window.addEventListener('resize', () => {   watchTableWidth(domSection.value, props.cells.length); }); watch(   () => [props.titles[0], props.cells[0]],   () => {     watchTableWidth(domSection.value, props.cells.length, 'changeProps');   } ); \/\/ \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u043f\u0435\u0440\u0435\u0434 \u0437\u0430\u043a\u0440\u044b\u0432\u0430\u044e\u0449\u0438\u043c \u0442\u0435\u0433\u043e\u043c &lt;\/script> window.addEventListener('scroll', () => {   setHeadIndentFromDom(domSection.value, props.cells.length); });<\/code><\/pre>\n<p>\u0421\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u0444\u0443\u043d\u043a\u0446\u0438\u044e addHeadIndent:<\/p>\n<pre><code class=\"javascript\">\/\/ .\/components\/CommonTableAdaptive\/add-head-indent.js import { getHeadIndent } from '.\/computed-head-indent'; import { getRowsSplitter } from '.\/computed-rows-splitter';  const addHeadIndent = (rows, titlesLength, throughOne) => {   let countRow = 0;   return rows.map((row, iRow) => {     const rowNew = row.map((cell) => ({       ...cell,       indent:         countRow +         1 +         titlesLength +         getHeadIndent.value * (1 + getRowsSplitter.value),     }));     countRow += throughOne &amp;&amp; iRow >= 1 &amp;&amp; iRow % 2 ? 2 : 1;     return rowNew;   }); };  export { addHeadIndent };<\/code><\/pre>\n<p>\u042d\u0442\u0430 \u0444\u0443\u043d\u043a\u0446\u0438\u044f \u0431\u0443\u0434\u0435\u0442 \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0442\u044c \u043a \u044f\u0447\u0435\u0439\u043a\u0430\u043c \u0448\u0430\u043f\u043a\u0438 \u043a\u043b\u044e\u0447 indent \u0441 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u044b\u043c \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435\u043c. \u041f\u0440\u043e\u0441\u043b\u0435\u0434\u0438\u0432 \u043d\u0430 \u0432\u0438\u0434\u0435\u043e \u043d\u0438\u0436\u0435 \u0437\u0430 \u043f\u043e\u0432\u0435\u0434\u0435\u043d\u0438\u0435\u043c \u0448\u0430\u043f\u043a\u0438 \u0442\u0430\u0431\u043b\u0438\u0446\u044b,\u0441\u0442\u0430\u043d\u0435\u0442 \u043f\u043e\u043d\u044f\u0442\u043d\u043e, \u0447\u0442\u043e \u044d\u0442\u0430 \u0444\u0443\u043d\u043a\u0446\u0438\u044f \u0434\u0435\u043b\u0430\u0435\u0442. \u0418\u043c\u043f\u043e\u0440\u0442\u0438\u0440\u0443\u0435\u043c \u0435\u0435 \u0432 \u0444\u0443\u043d\u043a\u0446\u0438\u0438, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0440\u0430\u0431\u043e\u0442\u0430\u044e\u0442 \u0441 \u044f\u0447\u0435\u0439\u043a\u0430\u043c\u0438 \u0448\u0430\u043f\u043a\u0438:<\/p>\n<pre><code class=\"javascript\">\/\/ .\/components\/CommonTableAdaptive\/seek-head-titles.js \/\/ \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c import { addHeadIndent } from '.\/add-head-indent'; import { getHeadIndent } from '.\/computed-head-indent'; \/\/ \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u043f\u0435\u0440\u0435\u0434 \u0437\u0430\u043a\u0440\u044b\u0432\u0430\u044e\u0449\u0438\u043c '}' \/\/ \u0432\u043d\u0443\u0442\u0440\u0438 'else if (rows &amp;&amp; !isTableWide.value)' if (getHeadIndent.value > 0) {   rows = addHeadIndent(rows, -1); }  \/\/ .\/components\/CommonTableAdaptive\/seek-head-cols.js \/\/ \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c import { addHeadIndent } from '.\/add-head-indent'; \/\/ \u0432\u043d\u0443\u0442\u0440\u0438 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 seekHeadCols: \/\/ \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u043f\u043e\u0441\u043b\u0435 \u0441\u0442\u0440\u043e\u043a\u0438 'let rows;' let throughOne; \/\/ \u0438\u0437\u043c\u0435\u043d\u0438\u0442\u044c \u0441\u0442\u0440\u043e\u043a\u0443, \u0431\u044b\u043b\u043e: if (rows.length > 1) rows = transformRowsThroughOne(rows); \/\/ \u0441\u0442\u0430\u043b\u043e if (rows.length > 1) {   rows = transformRowsThroughOne(rows);   throughOne = true; } \/\/ \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u043f\u0435\u0440\u0435\u0434 \u0441\u0442\u0440\u043e\u043a\u043e\u0439 'let cells = [];' if (rows &amp;&amp; !isTableWide.value) {   rows = addHeadIndent(rows, propsHeadTitles.length, throughOne); }<\/code><\/pre>\n<p>\u041a\u043e\u043c\u043c\u0438\u0442 \u201cMoving Table Header\u201d<\/p>\n<p>\u0421\u043c\u043e\u0442\u0440\u0435\u0442\u044c, \u0447\u0442\u043e \u043f\u043e\u043b\u0443\u0447\u0438\u043b\u043e\u0441\u044c, \u043b\u0443\u0447\u0448\u0435 \u0432 \u0434\u0432\u0438\u0436\u0435\u043d\u0438\u0438:<\/p>\n<div class=\"tm-iframe_temp\" data-src=\"https:\/\/embedd.srv.habr.com\/iframe\/62ecc4bfd5cd01344c92f170\" data-style=\"\" id=\"62ecc4bfd5cd01344c92f170\" width=\"\"><\/div>\n<p>\u0438\u043b\u0438 \u043d\u0430 <a href=\"https:\/\/khakimov.info\/adaptive-table-example\/\" rel=\"noopener noreferrer nofollow\">\u0432\u0435\u0431-\u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0435<\/a>.<\/p>\n<\/p>\n<\/div>\n<\/div>\n<\/div>\n<div class=\"v-portal\" style=\"display:none;\"><\/div>\n<\/div>\n<p> <!----> <!----><br \/> \u0441\u0441\u044b\u043b\u043a\u0430 \u043d\u0430 \u043e\u0440\u0438\u0433\u0438\u043d\u0430\u043b \u0441\u0442\u0430\u0442\u044c\u0438 <a href=\"https:\/\/habr.com\/ru\/post\/680976\/\"> https:\/\/habr.com\/ru\/post\/680976\/<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<div><\/div>\n<div id=\"post-content-body\">\n<div>\n<div class=\"article-formatted-body article-formatted-body article-formatted-body_version-2\">\n<div xmlns=\"http:\/\/www.w3.org\/1999\/xhtml\">\n<p><strong>\u0422\u0430\u0431\u043b\u0438\u0446\u0430 \u2014 \u0443\u0434\u043e\u0431\u043d\u044b\u0439 \u0438 \u043e\u0434\u0438\u043d \u0438\u0437 \u0441\u0430\u043c\u044b\u0445 \u044d\u0444\u0444\u0435\u043a\u0442\u0438\u0432\u043d\u044b\u0445 \u0441\u043f\u043e\u0441\u043e\u0431\u043e\u0432 \u043f\u043e\u0434\u0430\u0447\u0438 \u0422\u0415\u041a\u0421\u0422\u041e\u0412\u041e\u0419 \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u0438: \u043d\u0430 \u043c\u0438\u043d\u0438\u043c\u0443\u043c\u0435 \u043f\u0440\u043e\u0441\u0442\u0440\u0430\u043d\u0441\u0442\u0432\u0430 \u0440\u0430\u0437\u043c\u0435\u0449\u0435\u043d\u043e \u043c\u0430\u043a\u0441\u0438\u043c\u0443\u043c \u0434\u0430\u043d\u043d\u044b\u0445. \u0418 \u0447\u0442\u043e \u043d\u0435 \u043c\u0435\u043d\u0435\u0435 \u0432\u0430\u0436\u043d\u043e \u2014 \u044d\u0442\u0438 \u0434\u0430\u043d\u043d\u044b\u0435 \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u044b \u043d\u0435 \u0442\u043e\u043b\u044c\u043a\u043e \u0434\u043b\u044f \u0432\u043e\u0441\u043f\u0440\u0438\u044f\u0442\u0438\u044f, \u043d\u043e \u0438 \u0434\u043b\u044f \u0430\u043d\u0430\u043b\u0438\u0437\u0430 (\u0421\u0420\u0410\u0412\u041d\u0415\u041d\u0418\u042f). \u041e\u0441\u043d\u043e\u0432\u043d\u0430\u044f \u0441\u043b\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u0442\u0430\u0431\u043b\u0438\u0446 \u043f\u0440\u0438 \u0432\u0435\u0440\u0441\u0442\u043a\u0435 \u2014 \u0438\u0445 \u0430\u0434\u0430\u043f\u0442\u0438\u0432\u043d\u043e\u0441\u0442\u044c \u0434\u043b\u044f \u0443\u0441\u0442\u0440\u043e\u0439\u0441\u0442\u0432 \u0441 \u043d\u0435\u0431\u043e\u043b\u044c\u0448\u0438\u043c\u0438 \u044d\u043a\u0440\u0430\u043d\u0430\u043c\u0438 (\u043c\u043e\u0431\u0438\u043b\u044c\u043d\u044b\u0445 \u0434\u0435\u0432\u0430\u0439\u0441\u043e\u0432). \u041c\u043e\u0436\u043d\u043e \u043b\u0438 \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u0442\u0430\u043a, \u0447\u0442\u043e\u0431\u044b \u0434\u0430\u0436\u0435 \u043d\u0430 \u044d\u043a\u0440\u0430\u043d\u0435 \u0441 \u0440\u0430\u0437\u043c\u0435\u0440\u0430\u043c\u0438 \u0432 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0441\u0430\u043d\u0442\u0438\u043c\u0435\u0442\u0440\u043e\u0432 \u0442\u0430\u0431\u043b\u0438\u0446\u044b \u043c\u043e\u0433\u043b\u0438 \u0431\u044b\u0442\u044c \u0443\u0434\u043e\u0431\u043d\u044b\u043c\u0438 \u0434\u043b\u044f \u0432\u043e\u0441\u043f\u0440\u0438\u044f\u0442\u0438\u044f?<\/strong><\/p>\n<p>\u0412 \u0441\u0442\u0430\u0442\u044c\u0435 \u0431\u0443\u0434\u0435\u0442 \u043f\u0440\u0435\u0434\u043b\u043e\u0436\u0435\u043d \u0441\u043f\u043e\u0441\u043e\u0431 \u0430\u0434\u0430\u043f\u0442\u0430\u0446\u0438\u0438 \u0442\u0430\u0431\u043b\u0438\u0446 \u043a \u0440\u0430\u0437\u043d\u044b\u043c \u044d\u043a\u0440\u0430\u043d\u0430\u043c \u0440\u0430\u0437\u043d\u044b\u0445 \u0443\u0441\u0442\u0440\u043e\u0439\u0441\u0442\u0432. \u041a\u0440\u043e\u043c\u0435 \u0442\u043e\u0433\u043e, \u044d\u0442\u043e\u0442 \u0441\u043f\u043e\u0441\u043e\u0431 \u0431\u0443\u0434\u0435\u0442 \u0440\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u043d \u043d\u0430 \u043f\u0440\u0430\u043a\u0442\u0438\u043a\u0435 \u0441 \u043f\u0440\u0438\u043c\u0435\u043d\u0435\u043d\u0438\u0435\u043c Vue.js 3, CSS-\u043c\u043e\u0434\u0443\u043b\u0435\u0439 \u0438 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043d\u043e-\u043e\u0440\u0438\u0435\u043d\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u043e\u0433\u043e \u043f\u043e\u0434\u0445\u043e\u0434\u0430.<\/p>\n<h3>\u0421\u043e\u0434\u0435\u0440\u0436\u0430\u043d\u0438\u0435<\/h3>\n<ul>\n<li>\n<p>\u0421\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0430 \u0442\u0430\u0431\u043b\u0438\u0446\u044b<\/p>\n<\/li>\n<li>\n<p>\u0426\u0432\u0435\u0442\u043e\u0432\u0430\u044f \u0434\u0438\u0444\u0444\u0435\u0440\u0435\u043d\u0446\u0438\u0430\u0446\u0438\u044f<\/p>\n<\/li>\n<li>\n<p>\u041f\u0440\u043e\u0431\u043b\u0435\u043c\u0430 \u0441 Mobile First<\/p>\n<\/li>\n<li>\n<p>\u0427\u0442\u043e \u0434\u0435\u043b\u0430\u0442\u044c \u0441 \u0442\u0430\u0431\u043b\u0438\u0446\u0430\u043c\u0438 \u043d\u0430 \u043c\u0430\u043b\u0435\u043d\u044c\u043a\u0438\u0445 \u044d\u043a\u0440\u0430\u043d\u0430\u0445?<\/p>\n<\/li>\n<li>\n<p><s>Back to the Future<\/s> Forward to the Past, \u0438\u043b\u0438 \u0447\u0442\u043e \u0431\u0443\u0434\u0435\u043c \u0443\u043b\u0443\u0447\u0448\u0430\u0442\u044c<\/p>\n<\/li>\n<li>\n<p>Mobile First \u0438\u043b\u0438 Desktop First? \u0411\u0435\u0437 \u0440\u0430\u0437\u043d\u0438\u0446\u044b!<\/p>\n<\/li>\n<li>\n<p>\u041f\u043e\u0434\u0433\u043e\u0442\u043e\u0432\u043a\u0430 \u043a \u0440\u0430\u0431\u043e\u0442\u0435, Vue.js<\/p>\n<\/li>\n<li>\n<p>\u0421\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0430 \u043f\u0440\u043e\u0435\u043a\u0442\u0430 \u0438 \u043d\u0435\u0439\u043c\u0438\u043d\u0433<\/p>\n<\/li>\n<li>\n<p>CSS-\u043c\u043e\u0434\u0443\u043b\u0438<\/p>\n<\/li>\n<li>\n<p>\u041a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043d\u043e-\u043e\u0440\u0438\u0435\u043d\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u0439 \u043f\u043e\u0434\u0445\u043e\u0434<\/p>\n<\/li>\n<li>\n<p>API \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 \u0430\u0434\u0430\u043f\u0442\u0438\u0432\u043d\u043e\u0439 \u0442\u0430\u0431\u043b\u0438\u0446\u044b<\/p>\n<\/li>\n<li>\n<p>\u041a\u043b\u0430\u0441\u0441\u0438\u0447\u0435\u0441\u043a\u0438\u0439 \u0432\u0438\u0434 \u0442\u0430\u0431\u043b\u0438\u0446\u044b<\/p>\n<\/li>\n<li>\n<p>\u0414\u0435\u043b\u0430\u0435\u043c \u0442\u0430\u0431\u043b\u0438\u0446\u0443 \u0430\u0434\u0430\u043f\u0442\u0438\u0432\u043d\u043e\u0439<\/p>\n<\/li>\n<li>\n<p>\u0415\u0441\u043b\u0438 \u043c\u043d\u043e\u0433\u043e \u043a\u043e\u043b\u043e\u043d\u043e\u043a<\/p>\n<\/li>\n<li>\n<p>\u0414\u0432\u0438\u0436\u0443\u0449\u0430\u044f\u0441\u044f \u0448\u0430\u043f\u043a\u0430 \u0430\u0434\u0430\u043f\u0442\u0438\u0432\u043d\u043e\u0439 \u0442\u0430\u0431\u043b\u0438\u0446\u044b<\/p>\n<\/li>\n<\/ul>\n<h2>\u0421\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0430 \u0442\u0430\u0431\u043b\u0438\u0446\u044b<\/h2>\n<p>\u0422\u0430\u0431\u043b\u0438\u0446\u0430 \u0441\u043e\u0441\u0442\u043e\u0438\u0442 \u0438\u0437 \u0441\u0442\u043e\u043b\u0431\u0446\u043e\u0432 \u0438 \u0441\u0442\u0440\u043e\u043a. \u041f\u0435\u0440\u0432\u0430\u044f, \u0441\u0430\u043c\u0430\u044f \u0432\u0435\u0440\u0445\u043d\u044f\u044f \u0441\u0442\u0440\u043e\u043a\u0430 \u2014 \u0448\u0430\u043f\u043a\u0430 \u0442\u0430\u0431\u043b\u0438\u0446\u044b. \u0422.\u0435. <strong>\u0417\u0410\u0413\u041e\u041b\u041e\u0412\u041a\u0418 \u0441\u0442\u043e\u043b\u0431\u0446\u043e\u0432<\/strong>. \u0412\u0430\u0436\u043d\u043e \u043e\u0442\u043c\u0435\u0442\u0438\u0442\u044c, \u0447\u0442\u043e \u043f\u0435\u0440\u0432\u044b\u0439 \u0441\u0442\u043e\u043b\u0431\u0435\u0446, \u043a\u0430\u043a \u043f\u0440\u0430\u0432\u0438\u043b\u043e, \u0438\u0433\u0440\u0430\u0435\u0442 \u043d\u0435 \u043c\u0435\u043d\u0435\u0435 \u0432\u0430\u0436\u043d\u0443\u044e \u0440\u043e\u043b\u044c, \u0442.\u043a. \u0432 \u0435\u0433\u043e \u044f\u0447\u0435\u0439\u043a\u0430\u0445 \u2014 \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u044f, \u043a\u043e\u0442\u043e\u0440\u0443\u044e \u043c\u043e\u0436\u043d\u043e \u043e\u0431\u043e\u0437\u043d\u0430\u0447\u0438\u0442\u044c \u043a\u0430\u043a <strong>\u0417\u0410\u0413\u041e\u041b\u041e\u0412\u041a\u0418 \u0441\u0442\u0440\u043e\u043a<\/strong>.<\/p>\n<p>\u0422\u0430\u0431\u043b\u0438\u0446\u0430 \u043c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c \u0443\u0441\u043b\u043e\u0436\u043d\u0435\u043d\u0430 (\u0447\u0442\u043e, \u043a\u0430\u043a \u043d\u0438 \u043f\u0430\u0440\u0430\u0434\u043e\u043a\u0441\u0430\u043b\u044c\u043d\u043e, \u043d\u0435 \u0443\u0441\u043b\u043e\u0436\u043d\u044f\u0435\u0442, \u0430 \u043d\u0430\u043e\u0431\u043e\u0440\u043e\u0442, \u0443\u043f\u0440\u043e\u0449\u0430\u0435\u0442 \u0435\u0435 \u0432\u043e\u0441\u043f\u0440\u0438\u044f\u0442\u0438\u0435):<\/p>\n<ul>\n<li>\n<p>\u0448\u0430\u043f\u043a\u0430 \u0442\u0430\u0431\u043b\u0438\u0446\u044b \u043c\u043e\u0436\u0435\u0442 \u0441\u043e\u0441\u0442\u043e\u044f\u0442\u044c \u043d\u0435 \u0438\u0437 \u043e\u0434\u043d\u043e\u0439, \u0430 \u0438\u0437 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u0438\u0445 \u0441\u0442\u0440\u043e\u043a, \u043f\u0440\u0438\u0447\u0435\u043c \u0432 \u043a\u0430\u043a\u0438\u0445-\u0442\u043e \u0441\u0442\u043e\u043b\u0431\u0446\u0430\u0445 \u044d\u0442\u0438 \u0441\u0442\u0440\u043e\u043a\u0438 \u043c\u043e\u0433\u0443\u0442 \u0431\u044b\u0442\u044c \u043e\u0431\u044a\u0435\u0434\u0438\u043d\u0435\u043d\u044b, \u0430 \u0432 \u043a\u0430\u043a\u0438\u0445-\u0442\u043e \u2014 \u043c\u043e\u0433\u0443\u0442 \u0431\u044b\u0442\u044c \u043f\u043e\u0434\u0441\u0442\u043e\u043b\u0431\u0446\u044b<\/p>\n<\/li>\n<li>\n<p>\u043a\u0440\u043e\u043c\u0435 \u0437\u0430\u0433\u043e\u043b\u043e\u0432\u043a\u043e\u0432 \u0441\u0442\u0440\u043e\u043a \u0432 \u043f\u0435\u0440\u0432\u043e\u043c \u0441\u0442\u043e\u043b\u0431\u0446\u0435, \u0432\u043e \u0432\u0442\u043e\u0440\u043e\u043c \u043c\u043e\u0433\u0443\u0442 \u0431\u044b\u0442\u044c \u043f\u043e\u0434\u0437\u0430\u0433\u043e\u043b\u043e\u0432\u043a\u0438 \u044d\u0442\u0438\u0445 \u0441\u0442\u0440\u043e\u043a<\/p>\n<\/li>\n<li>\n<p>\u0434\u043b\u044f \u0443\u043b\u0443\u0447\u0448\u0435\u043d\u0438\u044f \u0432\u043e\u0441\u043f\u0440\u0438\u044f\u0442\u0438\u044f \u044f\u0447\u0435\u0439\u043a\u0438 \u0441 \u043e\u0434\u0438\u043d\u0430\u043a\u043e\u0432\u044b\u043c\u0438 \u0434\u0430\u043d\u043d\u044b\u043c\u0438 \u043c\u043e\u0433\u0443\u0442 \u0431\u044b\u0442\u044c \u043e\u0431\u044a\u0435\u0434\u0438\u043d\u0435\u043d\u044b \u043a\u0430\u043a \u043f\u043e \u0433\u043e\u0440\u0438\u0437\u043e\u043d\u0442\u0430\u043b\u0438, \u0442\u0430\u043a \u0438 \u043f\u043e \u0432\u0435\u0440\u0442\u0438\u043a\u0430\u043b\u0438<\/p>\n<\/li>\n<\/ul>\n<figure class=\"full-width\"><figcaption>\u041f\u0440\u0438\u043c\u0435\u0440 \u0442\u0430\u0431\u043b\u0438\u0446\u044b \u0441 \u0448\u0430\u043f\u043a\u043e\u0439 \u0438\u0437 \u0434\u0432\u0443\u0445 \u0441\u0442\u0440\u043e\u043a, \u0434\u0432\u0443\u043c\u044f \u0437\u0430\u0433\u043e\u043b\u043e\u0432\u043a\u0430\u043c\u0438 \u0441\u0442\u0440\u043e\u043a (title + subtitle) \u0438 \u043e\u0431\u044a\u0435\u0434\u0438\u043d\u0435\u043d\u043d\u044b\u043c\u0438 \u044f\u0447\u0435\u0439\u043a\u0430\u043c\u0438<\/figcaption><\/figure>\n<h2>\u0426\u0432\u0435\u0442\u043e\u0432\u0430\u044f \u0434\u0438\u0444\u0444\u0435\u0440\u0435\u043d\u0446\u0438\u0430\u0446\u0438\u044f<\/h2>\n<p>\u0414\u0430\u043d\u043d\u044b\u0435, \u043e\u0431\u043e\u0437\u043d\u0430\u0447\u0435\u043d\u043d\u044b\u0435 \u0432 \u044f\u0447\u0435\u0439\u043a\u0430\u0445, \u043b\u0435\u0433\u0447\u0435 \u0432\u043e\u0441\u043f\u0440\u0438\u043d\u0438\u043c\u0430\u044e\u0442\u0441\u044f, \u0435\u0441\u043b\u0438 \u044d\u0442\u0438 \u044f\u0447\u0435\u0439\u043a\u0438 \u0440\u0430\u0437\u0434\u0435\u043b\u0435\u043d\u044b \u0433\u0440\u0430\u043d\u0438\u0446\u0430\u043c\u0438. \u041d\u0435 \u043c\u0435\u043d\u0435\u0435 \u0432\u0430\u0436\u043d\u044b\u0439 \u0430\u0441\u043f\u0435\u043a\u0442 \u2014 \u0434\u0438\u0444\u0444\u0435\u0440\u0435\u043d\u0446\u0438\u0430\u0446\u0438\u044f \u0440\u0430\u0437\u043d\u044b\u0445 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u0442\u0430\u0431\u043b\u0438\u0446\u044b \u043f\u043e \u0446\u0432\u0435\u0442\u0430\u043c. \u041a\u0430\u043a \u043f\u0440\u0430\u0432\u0438\u043b\u043e, \u0447\u0430\u0449\u0435 \u0432\u0441\u0435\u0433\u043e \u0432\u044b\u0434\u0435\u043b\u044f\u044e\u0442 \u0434\u0440\u0443\u0433\u0438\u043c \u0446\u0432\u0435\u0442\u043e\u0432\u044b\u043c \u0444\u043e\u043d\u043e\u043c \u0448\u0430\u043f\u043a\u0443 \u0442\u0430\u0431\u043b\u0438\u0446\u044b, \u043d\u043e \u043d\u0435 \u043c\u0435\u043d\u0435\u0435 \u0432\u0430\u0436\u043d\u043e, \u043e\u0441\u043e\u0431\u0435\u043d\u043d\u043e \u043f\u0440\u0438 \u0430\u0434\u0430\u043f\u0442\u0430\u0446\u0438\u0438 \u0442\u0430\u0431\u043b\u0438\u0446\u044b \u0434\u043b\u044f \u043c\u0430\u043b\u0435\u043d\u044c\u043a\u0438\u0445 \u044d\u043a\u0440\u0430\u043d\u043e\u0432 (\u043e\u0431 \u044d\u0442\u043e\u043c \u043d\u0438\u0436\u0435), \u0432\u044b\u0434\u0435\u043b\u044f\u0442\u044c \u0444\u043e\u043d\u043e\u043c \u0437\u0430\u0433\u043e\u043b\u043e\u0432\u043a\u0438 \u0441\u0442\u0440\u043e\u043a.<\/p>\n<figure class=\"full-width\"><figcaption>\u0414\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u0438\u0435 \u0446\u0432\u0435\u0442\u043d\u043e\u0433\u043e \u0444\u043e\u043d\u0430 \u0434\u043b\u044f \u0448\u0430\u043f\u043a\u0438 \u0438 \u0437\u0430\u0433\u043e\u043b\u043e\u0432\u043a\u043e\u0432 \u0441\u0442\u0440\u043e\u043a \u0434\u0435\u043b\u0430\u0435\u0442 \u0442\u0430\u0431\u043b\u0438\u0446\u0443 \u0431\u043e\u043b\u0435\u0435 \u0443\u0434\u043e\u0431\u043d\u043e\u0439 \u0434\u043b\u044f \u0432\u043e\u0441\u043f\u0440\u0438\u044f\u0442\u0438\u044f<\/figcaption><\/figure>\n<p>\u041f\u0440\u0438 \u043d\u0430\u043b\u0438\u0447\u0438\u0438 \u0433\u0440\u0430\u043d\u0438\u0446 \u0432\u043e\u0441\u043f\u0440\u0438\u044f\u0442\u0438\u0435 \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u0438 \u0442\u0430\u043a\u0436\u0435 \u0443\u043b\u0443\u0447\u0448\u0430\u0435\u0442 \u0446\u0435\u043d\u0442\u0440\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435 \u0432 \u044f\u0447\u0435\u0439\u043a\u0430\u0445. \u0418 \u0435\u0449\u0435 \u043e\u0434\u0438\u043d \u043f\u0440\u0438\u044f\u0442\u043d\u044b\u0439 \u0434\u043b\u044f \u0433\u043b\u0430\u0437 \u043c\u043e\u043c\u0435\u043d\u0442 \u2014 \u043d\u0430\u043b\u0438\u0447\u0438\u0435 \u043e\u0442\u0441\u0442\u0443\u043f\u043e\u0432, \u043f\u043e \u043a\u0440\u0430\u0439\u043d\u0435\u0439 \u043c\u0435\u0440\u0435 \u0432\u0435\u0440\u0442\u0438\u043a\u0430\u043b\u044c\u043d\u044b\u0445 (\u043e\u043f\u0442\u0438\u043c\u0430\u043b\u044c\u043d\u044b\u0439 \u0432\u0430\u0440\u0438\u0430\u043d\u0442, \u043d\u0430 \u043c\u043e\u0439 \u0432\u0437\u0433\u043b\u044f\u0434 \u2014 \u043e\u0442 0.25em \u0434\u043e 0.5em). \u0414\u0430, \u0438 \u043f\u0440\u0438 \u044d\u0442\u043e\u043c (\u043d\u0430\u043b\u0438\u0447\u0438\u0438 \u043e\u0442\u0441\u0442\u0443\u043f\u043e\u0432) \u043c\u0435\u0436\u0441\u0442\u0440\u043e\u0447\u043d\u044b\u0439 \u0438\u043d\u0442\u0435\u0440\u0432\u0430\u043b \u0432 \u044f\u0447\u0435\u0439\u043a\u0430\u0445 \u043d\u0435 \u0434\u043e\u043b\u0436\u0435\u043d \u0431\u044b\u0442\u044c \u0442\u0430\u043a\u0438\u043c \u0436\u0435 \u0431\u043e\u043b\u044c\u0448\u0438\u043c, \u043a\u0430\u043a \u0443 \u043e\u0431\u044b\u0447\u043d\u044b\u0445 \u043f\u0430\u0440\u0430\u0433\u0440\u0430\u0444\u043e\u0432.<\/p>\n<h2>\u041f\u0440\u043e\u0431\u043b\u0435\u043c\u0430 \u0441 Mobile First<\/h2>\n<p>\u041e\u0441\u043d\u043e\u0432\u043d\u0430\u044f \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u0430, \u043f\u043e\u0447\u0435\u043c\u0443 \u0442\u0430\u0431\u043b\u0438\u0446\u044b \u0438\u0441\u0447\u0435\u0437\u043b\u0438 \u0441 \u0441\u0430\u0439\u0442\u043e\u0432 \u2014 \u043e\u0447\u0435\u043d\u044c \u043d\u0435\u0431\u043e\u043b\u044c\u0448\u0430\u044f \u0448\u0438\u0440\u0438\u043d\u0430 \u043c\u043e\u0431\u0438\u043b\u044c\u043d\u044b\u0445 \u044d\u043a\u0440\u0430\u043d\u043e\u0432, \u043e\u0441\u043e\u0431\u0435\u043d\u043d\u043e \u0432 portrait-\u043e\u0440\u0438\u0435\u043d\u0442\u0430\u0446\u0438\u0438. \u0427\u0430\u0441\u0442\u043e \u0437\u0430\u0433\u043e\u043b\u043e\u0432\u043a\u0438 \u0441\u0442\u0440\u043e\u043a \u0441\u043e\u0441\u0442\u043e\u044f\u0442 \u0438\u0437 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u0438\u0445 \u0441\u043b\u043e\u0432, \u0438 \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e \u0434\u043b\u0438\u043d\u043d\u044b, \u0438 \u0432\u0441\u0435 \u0447\u0442\u043e \u043e\u0441\u0442\u0430\u0435\u0442\u0441\u044f \u2014 \u043e\u0434\u0438\u043d-\u0434\u0432\u0430 \u0441\u0442\u043e\u043b\u0431\u0446\u0430 \u0441 \u0434\u0430\u043d\u043d\u044b\u043c\u0438, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043d\u0435 \u0443\u043c\u0435\u0449\u0430\u044e\u0442\u0441\u044f \u0432 \u0448\u0438\u0440\u0438\u043d\u0443 \u044d\u043a\u0440\u0430\u043d\u0430 \u043f\u0440\u0438 \u043d\u043e\u0440\u043c\u0430\u043b\u044c\u043d\u043e\u043c (\u0447\u0438\u0442\u0430\u0435\u043c\u043e\u043c) \u0440\u0430\u0437\u043c\u0435\u0440\u0435 \u0448\u0440\u0438\u0444\u0442\u0430.<\/p>\n<p>\u0418\u043c\u0435\u043d\u043d\u043e \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u043f\u0440\u0438\u043d\u0446\u0438\u043f \u201c<a href=\"https:\/\/ru.wikipedia.org\/wiki\/%D0%90%D0%B4%D0%B0%D0%BF%D1%82%D0%B8%D0%B2%D0%BD%D1%8B%D0%B9_%D0%B2%D0%B5%D0%B1-%D0%B4%D0%B8%D0%B7%D0%B0%D0%B9%D0%BD#%D0%A1%D0%BD%D0%B0%D1%87%D0%B0%D0%BB%D0%B0_%D0%BC%D0%BE%D0%B1%D0%B8%D0%BB%D1%8C%D0%BD%D1%8B%D0%B5_(%C2%ABMobile_first%C2%BB)\" rel=\"noopener noreferrer nofollow\">Mobile First<\/a>\u201d, \u043f\u043e\u043f\u0443\u043b\u044f\u0440\u043d\u044b\u0439 \u0432 \u0430\u0434\u0430\u043f\u0442\u0438\u0432\u043d\u043e\u043c \u0434\u0438\u0437\u0430\u0439\u043d\u0435, \u0441\u0432\u043e\u0434\u0438\u0442 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435 \u0442\u0430\u0431\u043b\u0438\u0446 \u043a \u043d\u0443\u043b\u044e. \u0412\u043c\u0435\u0441\u0442\u043e \u043d\u0438\u0445 \u043f\u043e\u043b\u0443\u0447\u0438\u043b \u0440\u0430\u0441\u043f\u0440\u043e\u0441\u0442\u0440\u0430\u043d\u0435\u043d\u0438\u0435 \u201c\u043a\u0430\u0440\u0442\u043e\u0447\u043d\u044b\u0439 \u043f\u043e\u0434\u0445\u043e\u0434\u201d, \u043a\u043e\u0433\u0434\u0430 \u0432\u0441\u0435 \u0434\u0430\u043d\u043d\u044b\u0435, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043c\u043e\u0436\u043d\u043e \u0431\u044b\u043b\u043e \u0431\u044b \u0443\u043c\u0435\u0441\u0442\u0438\u0442\u044c \u0432 \u0441\u0442\u0440\u043e\u043a\u0443, \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u044b \u0432 \u0432\u0438\u0434\u0435 \u0441\u043f\u0438\u0441\u043a\u0430.<\/p>\n<figure class=\"full-width\"><figcaption>\u041a\u0430\u0440\u0442\u043e\u0447\u043d\u044b\u0439 \u043f\u043e\u0434\u0445\u043e\u0434, \u043f\u0440\u0438\u043c\u0435\u043d\u0435\u043d\u043d\u044b\u0439 \u043a \u043d\u0430\u0448\u0435\u0439 \u0442\u0430\u0431\u043b\u0438\u0446\u0435, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0447\u0430\u0441\u0442\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u0432 \u0430\u0434\u0430\u043f\u0442\u0438\u0432\u043d\u043e\u0439 \u0432\u0435\u0440\u0441\u0442\u043a\u0435, \u043a\u0430\u043a \u0435\u0433\u043e \u043c\u043e\u0436\u043d\u043e \u043d\u0430\u0431\u043b\u044e\u0434\u0430\u0442\u044c \u043d\u0430 \u044d\u043a\u0440\u0430\u043d\u0430\u0445 \u043c\u043e\u043d\u0438\u0442\u043e\u0440\u0430\u0445 \u0438 \u043c\u043e\u0431\u0438\u043b\u044c\u043d\u044b\u0445 \u0443\u0441\u0442\u0440\u043e\u0439\u0441\u0442\u0432 \u0432 portrait-\u043e\u0440\u0438\u0435\u043d\u0442\u0430\u0446\u0438\u0438<\/figcaption><\/figure>\n<p>\u041d\u0435\u0434\u043e\u0441\u0442\u0430\u0442\u043a\u043e\u0432 \u0442\u0430\u043a\u043e\u0433\u043e \u043f\u043e\u0434\u0445\u043e\u0434\u0430 \u043c\u043d\u043e\u0436\u0435\u0441\u0442\u0432\u043e. \u0421\u0430\u043c\u044b\u0435 \u0433\u043b\u0430\u0432\u043d\u044b\u0435 \u0438\u0437 \u043d\u0438\u0445:<\/p>\n<ul>\n<li>\n<p>\u043a\u0430\u0440\u0442\u043e\u0447\u043a\u0438 \u2014 \u044d\u0442\u043e \u201c\u043c\u0443\u0441\u043e\u0440\u201d \u0432 \u0434\u0438\u0437\u0430\u0439\u043d\u0435: \u043d\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0435 \u2014 \u043c\u043d\u043e\u0436\u0435\u0441\u0442\u0432\u043e \u043f\u043e\u0432\u0442\u043e\u0440\u044f\u044e\u0449\u0438\u0445\u0441\u044f \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432, \u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u043c\u043e\u0433\u043b\u043e \u0431\u044b \u0438 \u043d\u0435 \u0431\u044b\u0442\u044c (\u043f\u0440\u0430\u0432\u0430\u044f \u0447\u0430\u0441\u0442\u044c \u0441\u043f\u0438\u0441\u043a\u043e\u0432 \u043f\u043e\u0434 \u043f\u043e\u0434\u0437\u0430\u0433\u043e\u043b\u043e\u0432\u043a\u0430\u043c\u0438 Subtitles, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043c\u0435\u0448\u0430\u044e\u0442 \u0432\u043e\u0441\u043f\u0440\u0438\u044f\u0442\u0438\u044e)<\/p>\n<\/li>\n<li>\n<p>\u043a\u0430\u0440\u0442\u043e\u0447\u043a\u0438 \u0437\u0430\u043d\u0438\u043c\u0430\u044e\u0442 \u043c\u043d\u043e\u0433\u043e \u043c\u0435\u0441\u0442\u0430: \u043d\u0430 \u044d\u043a\u0440\u0430\u043d\u0435 \u043c\u043e\u0431\u0438\u043b\u044c\u043d\u043e\u0433\u043e \u0443\u0441\u0442\u0440\u043e\u0439\u0441\u0442\u0432\u0430 \u0432\u0438\u0434\u043d\u043e \u043e\u0447\u0435\u043d\u044c \u043d\u0435\u043c\u043d\u043e\u0433\u043e \u043a\u0430\u0440\u0442\u043e\u0447\u0435\u043a \u0431\u0435\u0437 \u0441\u043a\u0440\u043e\u043b\u043b\u0430 \u2014 \u0434\u0432\u0435, \u043c\u0430\u043a\u0441\u0438\u043c\u0443\u043c \u0442\u0440\u0438; \u0447\u0442\u043e\u0431\u044b \u043e\u0437\u043d\u0430\u043a\u043e\u043c\u0438\u0442\u044c\u0441\u044f \u0441\u043e \u0432\u0441\u0435\u0439 \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u0435\u0439, \u043d\u0443\u0436\u043d\u043e \u043f\u0440\u043e\u043b\u0438\u0441\u0442\u044b\u0432\u0430\u0442\u044c \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443 \u0432\u0432\u0435\u0440\u0445 \u0438\u043b\u0438 \u0432\u043d\u0438\u0437<\/p>\n<\/li>\n<li>\n<p>\u0441\u0430\u043c\u043e\u0435 \u0433\u043b\u0430\u0432\u043d\u043e\u0435 \u2014 \u0442\u0435\u0440\u044f\u0435\u0442\u0441\u044f \u0443\u043d\u0438\u043a\u0430\u043b\u044c\u043d\u043e\u0435 \u043f\u0440\u0435\u0438\u043c\u0443\u0449\u0435\u0441\u0442\u0432\u043e \u0442\u0430\u0431\u043b\u0438\u0446 \u2014 \u0430\u043d\u0430\u043b\u0438\u0437, <strong>\u0421\u0420\u0410\u0412\u041d\u0415\u041d\u0418\u0415<\/strong> \u0434\u0430\u043d\u043d\u044b\u0445, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0431\u044b\u043b\u0438 \u0434\u043e \u044d\u0442\u043e\u0433\u043e \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u044b \u0432 \u044f\u0447\u0435\u0439\u043a\u0430\u0445 \u043a\u043e\u043c\u043f\u0430\u043a\u0442\u043d\u043e, <strong>\u0440\u044f\u0434\u043e\u043c \u0434\u0440\u0443\u0433 \u0441 \u0434\u0440\u0443\u0433\u043e\u043c<\/strong><\/p>\n<\/li>\n<\/ul>\n<figure class=\"full-width\"><figcaption>\u0420\u0435\u0430\u043b\u044c\u043d\u044b\u0439 \u043f\u0440\u0438\u043c\u0435\u0440 \u00ab\u043a\u0430\u0440\u0442\u043e\u0447\u043d\u043e\u0433\u043e \u043f\u043e\u0434\u0445\u043e\u0434\u0430\u00bb \u2014 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0430 \u043a\u043e\u043d\u0444\u0438\u0433\u0443\u0440\u0430\u0442\u043e\u0440\u0430 Mercedes \u043c\u043e\u0434\u0435\u043b\u0438 C-\u043a\u043b\u0430\u0441\u0441\u0430 (https:\/\/www.mercedes-benz.co.uk\/passengercars\/mercedes-benz-cars\/car-configurator.html\/motorization\/CCci\/GB\/en\/C-KLASSE\/LIMOUSINE). \u0412 \u043f\u043e\u043b\u043d\u043e\u044d\u043a\u0440\u0430\u043d\u043d\u043e\u043c \u0440\u0435\u0436\u0438\u043c\u0435 \u043d\u0430 \u0431\u043e\u043b\u044c\u0448\u043e\u043c \u043c\u043e\u043d\u0438\u0442\u043e\u0440\u0435 \u043f\u043e\u043b\u043d\u043e\u0441\u0442\u044c\u044e \u0432\u0438\u0434\u043d\u044b \u0442\u043e\u043b\u044c\u043a\u043e 6 \u043a\u0430\u0440\u0442\u043e\u0447\u0435\u043a, \u043d\u0430 \u044d\u043a\u0440\u0430\u043d \u043c\u043e\u0431\u0438\u043b\u044c\u043d\u043e\u0433\u043e \u0442\u0435\u043b\u0435\u0444\u043e\u043d\u0430 \u0441 \u0442\u0440\u0443\u0434\u043e\u043c \u0437\u0430 \u043e\u0434\u0438\u043d \u0440\u0430\u0437 \u043f\u043e\u043c\u0435\u0449\u0430\u044e\u0442\u0441\u044f \u0442\u043e\u043b\u044c\u043a\u043e \u0434\u0432\u0435. \u0410 \u0432\u0441\u0435\u0433\u043e \u0438\u0445 19!<\/figcaption><\/figure>\n<h2>\u0427\u0442\u043e \u0434\u0435\u043b\u0430\u0442\u044c \u0441 \u0442\u0430\u0431\u043b\u0438\u0446\u0430\u043c\u0438 \u043d\u0430 \u043c\u0430\u043b\u0435\u043d\u044c\u043a\u0438\u0445 \u044d\u043a\u0440\u0430\u043d\u0430\u0445?<\/h2>\n<p>\u0415\u0441\u0442\u044c \u043e\u0434\u0438\u043d \u043f\u043e\u0434\u0445\u043e\u0434 \u043a \u0442\u0430\u0431\u043b\u0438\u0446\u0430\u043c, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043c\u043d\u0435 \u043d\u0440\u0430\u0432\u0438\u0442\u0441\u044f. \u0421\u043a\u043e\u0440\u0435\u0435 \u0432\u0441\u0435\u0433\u043e \u043a\u0442\u043e-\u043d\u0438\u0431\u0443\u0434\u044c \u044d\u0442\u043e \u043f\u0440\u0438\u0434\u0443\u043c\u0430\u043b \u0434\u0430\u0432\u043d\u044b\u043c-\u0434\u0430\u0432\u043d\u043e, \u0438 \u044f \u201c\u0438\u0437\u043e\u0431\u0440\u0435\u043b \u0432\u0435\u043b\u043e\u0441\u0438\u043f\u0435\u0434\u201d, \u043f\u0440\u043e\u0441\u0442\u043e \u043d\u0435 \u0432\u0438\u0434\u0435\u043b \u0442\u0430\u043a\u043e\u0433\u043e \u0432\u043e\u043f\u043b\u043e\u0449\u0435\u043d\u0438\u044f \u0430\u0434\u0430\u043f\u0442\u0438\u0432\u043d\u043e\u0439 \u0432\u0435\u0440\u0441\u0442\u043a\u0438 \u0442\u0430\u0431\u043b\u0438\u0446. \u0421\u043c\u044b\u0441\u043b \u043f\u043e\u0434\u0445\u043e\u0434\u0430 \u0437\u0430\u043a\u043b\u044e\u0447\u0430\u0435\u0442\u0441\u044f \u0432 \u0442\u043e\u043c, \u0447\u0442\u043e \u043d\u0430 \u0448\u0438\u0440\u043e\u043a\u0438\u0445 \u044d\u043a\u0440\u0430\u043d\u0430\u0445 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u0432\u0438\u0434\u0438\u0442 \u043a\u043b\u0430\u0441\u0441\u0438\u0447\u0435\u0441\u043a\u0443\u044e \u0442\u0430\u0431\u043b\u0438\u0446\u0443, \u0430 \u043d\u0430 \u0443\u0437\u043a\u0438\u0445 \u2014 \u0437\u0430\u0433\u043e\u043b\u043e\u0432\u043a\u0438 (\u0438 \u043f\u043e\u0434\u0437\u0430\u0433\u043e\u043b\u043e\u0432\u043a\u0438) \u0441\u0442\u0440\u043e\u043a \u0442\u0440\u0430\u043d\u0441\u0444\u043e\u0440\u043c\u0438\u0440\u0443\u044e\u0442\u0441\u044f \u0432 \u044d\u0434\u0430\u043a\u0438\u0435 \u201c\u043f\u043e\u0434\u0448\u0430\u043f\u043a\u0438\u201d \u0442\u0430\u0431\u043b\u0438\u0446\u044b.<\/p>\n<figure class=\"full-width\"><figcaption>\u0412 \u0441\u043b\u0443\u0447\u0430\u0435, \u043a\u043e\u0433\u0434\u0430 \u0437\u0430\u0433\u043e\u043b\u043e\u0432\u043a\u0438 \u0438 \u043f\u043e\u0434\u0437\u0430\u0433\u043e\u043b\u043e\u0432\u043a\u0438 \u0441\u0442\u0440\u043e\u043a \u0432 \u043c\u043e\u0431\u0438\u043b\u044c\u043d\u043e\u043c \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0438 \u0441\u0442\u0430\u043d\u043e\u0432\u044f\u0442\u0441\u044f \u00ab\u043f\u043e\u0434\u0448\u0430\u043f\u043a\u0430\u043c\u0438\u00bb \u0442\u0430\u0431\u043b\u0438\u0446\u044b, \u0432\u0441\u0435 \u043f\u0440\u0435\u0438\u043c\u0443\u0449\u0435\u0441\u0442\u0432\u0430 \u0442\u0430\u0431\u043b\u0438\u0446\u044b \u0441\u043e\u0445\u0440\u0430\u043d\u044f\u044e\u0442\u0441\u044f, \u0438 \u043c\u0430\u043b\u0435\u043d\u044c\u043a\u0438\u0439 \u0440\u0430\u0437\u043c\u0435\u0440 \u044d\u043a\u0440\u0430\u043d\u0430 \u043c\u043e\u0431\u0438\u043b\u044c\u043d\u043e\u0433\u043e \u0443\u0441\u0442\u0440\u043e\u0439\u0441\u0442\u0432\u0430 \u044d\u0442\u043e\u043c\u0443 \u043d\u0435 \u043f\u043e\u043c\u0435\u0445\u0430<\/figcaption><\/figure>\n<p>\u0414\u043e\u0432\u043e\u043b\u044c\u043d\u043e \u0442\u0435\u043e\u0440\u0438\u0438 \u0438 \u043f\u0440\u0438\u0434\u0443\u043c\u0430\u043d\u043d\u044b\u0445 \u043a\u0430\u0440\u0442\u0438\u043d\u043e\u043a, \u043f\u0435\u0440\u0435\u0439\u0434\u0435\u043c \u043a \u0440\u0435\u0430\u043b\u044c\u043d\u044b\u043c \u043f\u0440\u0438\u043c\u0435\u0440\u0430\u043c. \u0418, \u0435\u0441\u043b\u0438 \u0432\u0434\u0440\u0443\u0433 \u0438\u0445 \u043c\u043e\u0436\u043d\u043e \u0443\u043b\u0443\u0447\u0448\u0438\u0442\u044c \u2014 \u043f\u043e\u043f\u0440\u043e\u0431\u0443\u0435\u043c \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u044d\u0442\u043e, \u0437\u0430\u043e\u0434\u043d\u043e \u043f\u043e\u0442\u0440\u0435\u043d\u0438\u0440\u0443\u044f\u0441\u044c \u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c \u0432 \u043c\u043e\u0435\u043c \u043b\u044e\u0431\u0438\u043c\u043e\u043c vue.js.<\/p>\n<h2>Forward to the Past, \u0438\u043b\u0438 \u0447\u0442\u043e \u0431\u0443\u0434\u0435\u043c \u0443\u043b\u0443\u0447\u0448\u0430\u0442\u044c<\/h2>\n<p>\u0411\u043b\u0430\u0433\u043e\u0434\u0430\u0440\u044f \u0413\u0435\u043d\u0440\u0438 \u0424\u043e\u0440\u0434\u0443 \u0438 \u0435\u0433\u043e \u043f\u0435\u0440\u0432\u043e\u0439 \u043a\u043e\u043d\u0432\u0435\u0439\u0435\u0440\u043d\u043e\u0439 \u043b\u0438\u043d\u0438\u0438, \u0441\u043e\u0437\u0434\u0430\u043d\u043d\u043e\u0439 \u0432 1913 \u0433\u043e\u0434\u0443, \u0432 \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0441\u0442\u0432\u0435 \u043f\u0440\u0430\u043a\u0442\u0438\u0447\u0435\u0441\u043a\u0438 \u0432\u0441\u0435\u0445 \u0442\u043e\u0432\u0430\u0440\u043e\u0432 \u043f\u043e\u044f\u0432\u0438\u043b\u0441\u044f \u043a\u043e\u043d\u0432\u0435\u0439\u0435\u0440. \u041f\u043e\u0434\u0445\u043e\u0434 \u0422\u043e\u0439\u043e\u0442\u044b \u043a \u043e\u0440\u0433\u0430\u043d\u0438\u0437\u0430\u0446\u0438\u0438 \u043f\u0440\u043e\u0446\u0435\u0441\u0441\u0430 \u2014 \u043a\u0430\u043d\u0431\u0430\u043d (1959 \u0433\u043e\u0434) \u2014 \u0441\u0442\u0430\u043b \u043e\u0441\u043d\u043e\u0432\u043e\u0439 \u0434\u043b\u044f agile-\u043c\u0435\u0442\u043e\u0434\u043e\u043b\u043e\u0433\u0438\u0438, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u043e\u0447\u0435\u043d\u044c \u043f\u043e\u043f\u0443\u043b\u044f\u0440\u043d\u0430 \u0432 IT-\u0438\u043d\u0434\u0443\u0441\u0442\u0440\u0438\u0438. \u0410\u0432\u0442\u043e\u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u0435\u043b\u0438 \u0432\u0441\u0435\u0433\u0434\u0430 \u0441\u0442\u0440\u0435\u043c\u0438\u043b\u0438\u0441\u044c \u0431\u044b\u0442\u044c \u043f\u0435\u0440\u0432\u043e\u043e\u0442\u043a\u0440\u044b\u0432\u0430\u0442\u0435\u043b\u044f\u043c\u0438 \u0432\u043e \u043c\u043d\u043e\u0433\u0438\u0445 \u0441\u0444\u0435\u0440\u0430\u0445 (\u0435\u0449\u0435 \u043e\u0434\u0438\u043d \u043f\u043e\u043a\u0430\u0437\u0430\u0442\u0435\u043b\u044c\u043d\u044b\u0439 \u043f\u0440\u0438\u043c\u0435\u0440 \u0437\u0430\u0431\u044b\u043b \u2014 product placement \u0441 \u00ab\u0411\u043e\u043d\u0434\u0438\u0430\u0434\u043e\u0439\u00bb \u0432 \u043a\u0438\u043d\u043e). \u041d\u0443 \u0438\u043b\u0438 \u0445\u043e\u0442\u044f \u0431\u044b \u0431\u0440\u0430\u043b\u0438 \u043d\u0430 \u0432\u043e\u043e\u0440\u0443\u0436\u0435\u043d\u0438\u0435 \u043f\u0435\u0440\u0435\u0434\u043e\u0432\u044b\u0435 \u0442\u0435\u0445\u043d\u043e\u043b\u043e\u0433\u0438\u0438. \u041f\u0440\u0435\u0434\u043b\u0430\u0433\u0430\u044e \u0432 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u043f\u0440\u0438\u043c\u0435\u0440\u0430 \u0440\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u0435\u0442\u044c \u0442\u043e, \u0447\u0442\u043e \u043d\u0430\u043c \u043f\u0440\u0435\u0434\u043b\u0430\u0433\u0430\u044e\u0442 \u0430\u0432\u0442\u043e\u043c\u043e\u0431\u0438\u043b\u044c\u043d\u044b\u0435 \u0431\u0440\u0435\u043d\u0434\u044b \u0432 \u0438\u043d\u0442\u0435\u0440\u043d\u0435\u0442\u0435 <em>(\u043f\u0440\u0438\u043c\u0435\u0447\u0430\u043d\u0438\u0435\u00a0\u2014 \u0441\u00a0\u0440\u043e\u0441\u0441\u0438\u0439\u0441\u043a\u0438\u043c \u0430\u0432\u0442\u043e\u0431\u0438\u0437\u043d\u0435\u0441\u043e\u043c \u0441\u0435\u0439\u0447\u0430\u0441, \u043c\u044f\u0433\u043a\u043e \u0433\u043e\u0432\u043e\u0440\u044f&#8230; <\/em>\u201c<em>\u0432\u0441\u0435  \u043d\u0435\u00a0\u0442\u0430\u043a \u043e\u0434\u043d\u043e\u0437\u043d\u0430\u0447\u043d\u043e<\/em>\u201d<em>, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u043f\u0440\u0438\u043c\u0435\u0440\u044b \u044f\u00a0\u0438\u0441\u043a\u0430\u043b \u043d\u0430\u00a0\u0441\u0430\u0439\u0442\u0430\u0445 .uk, \u043f\u043e\u0442\u043e\u043c\u0443 \u0447\u0442\u043e  \u0442\u0430\u043c \u0430\u043d\u0433\u043b\u0438\u0439\u0441\u043a\u0438\u0439 \u044f\u0437\u044b\u043a)<\/em>  <\/p>\n<p>\u041f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u0438\u043c, \u0447\u0442\u043e \u043c\u044b \u0445\u043e\u0442\u0438\u043c \u043a\u0443\u043f\u0438\u0442\u044c \u043d\u043e\u0432\u044b\u0439 \u0430\u0432\u0442\u043e\u043c\u043e\u0431\u0438\u043b\u044c. \u041c\u044b \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0438\u043b\u0438\u0441\u044c \u0441 \u043c\u0430\u0440\u043a\u043e\u0439, \u043c\u043e\u0434\u0435\u043b\u044c\u044e, \u0438 \u0434\u0430\u0436\u0435 \u043f\u0440\u0438\u043c\u0435\u0440\u043d\u043e \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u043c \u0447\u0435\u043c \u043e\u0442\u043b\u0438\u0447\u0430\u044e\u0442\u0441\u044f \u0432\u0435\u0440\u0441\u0438\u0438, \u0432 \u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u044d\u0442\u0430 \u043c\u043e\u0434\u0435\u043b\u044c \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u0441\u044f. \u041c\u044b \u043f\u043e\u043d\u0438\u043c\u0430\u0435\u043c, \u0434\u0432\u0438\u0433\u0430\u0442\u0435\u043b\u044c \u043a\u0430\u043a\u043e\u0439 \u043c\u043e\u0449\u043d\u043e\u0441\u0442\u0438 \u0438 \u043e\u0431\u044a\u0435\u043c\u0430 \u043d\u0430\u0441 \u0443\u0441\u0442\u0440\u0430\u0438\u0432\u0430\u0435\u0442, \u0438 \u043a\u0430\u043a\u043e\u0433\u043e \u0442\u0438\u043f\u0430 \u043a\u043e\u0440\u043e\u0431\u043a\u0443 \u043f\u0435\u0440\u0435\u0434\u0430\u0447 \u043c\u044b \u0445\u043e\u0442\u0438\u043c. \u041d\u0430\u0448\u0435 \u0436\u0435\u043b\u0430\u043d\u0438\u0435 \u2014 <strong>\u041f\u0420\u0418\u0426\u0415\u041d\u0418\u0422\u042c\u0421\u042f<\/strong>, \u0442.\u0435. \u043f\u043e\u043d\u044f\u0442\u044c \u0440\u0430\u0437\u0431\u0440\u043e\u0441 \u0446\u0435\u043d \u0432 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438 \u043e\u0442 \u043f\u0435\u0440\u0435\u0447\u0438\u0441\u043b\u0435\u043d\u043d\u044b\u0445 \u0432\u044b\u0448\u0435 \u0443\u0441\u043b\u043e\u0432\u0438\u0439. \u0423 \u0432\u0441\u0435\u0445 \u0430\u0432\u0442\u043e\u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u0435\u043b\u0435\u0439 \u0435\u0441\u0442\u044c \u043a\u043e\u043d\u0444\u0438\u0433\u0443\u0440\u0430\u0442\u043e\u0440\u044b, \u043d\u043e, \u0447\u0442\u043e\u0431\u044b \u043f\u043e\u043d\u044f\u0442\u044c, \u043d\u0430\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u043e\u0442\u043b\u0438\u0447\u0430\u0435\u0442\u0441\u044f \u0446\u0435\u043d\u0430, \u0432 \u044d\u0442\u0438\u0445 \u043a\u043e\u043d\u0444\u0438\u0433\u0443\u0440\u0430\u0442\u043e\u0440\u0430\u0445 \u043d\u0443\u0436\u043d\u043e \u0441\u043e\u0432\u0435\u0440\u0448\u0430\u0442\u044c \u043c\u043d\u043e\u0436\u0435\u0441\u0442\u0432\u043e \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0439, \u043f\u0435\u0440\u0435\u0445\u043e\u0434\u0438\u0442\u044c \u043f\u043e \u0448\u0430\u0433\u0430\u043c\/\u044d\u0442\u0430\u043f\u0430\u043c \u0438 \u043f\u0440. \u0427\u0442\u043e\u0431\u044b \u043f\u0440\u0438\u0446\u0435\u043d\u0438\u0442\u044c\u0441\u044f, \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0438\u0442\u044c \u043f\u043e\u0440\u044f\u0434\u043e\u043a \u0446\u0435\u043d, \u0435\u0441\u0442\u044c \u043e\u0434\u0438\u043d \u0434\u0435\u0439\u0441\u0442\u0432\u0435\u043d\u043d\u044b\u0439 \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442 \u2014 \u043f\u0440\u0430\u0439\u0441-\u043b\u0438\u0441\u0442. \u041f\u043e\u043f\u0440\u043e\u0431\u0443\u0435\u043c \u043d\u0430\u0439\u0442\u0438 \u0435\u0433\u043e \u043d\u0430 \u0441\u0430\u0439\u0442\u0430\u0445 \u0438 \u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0435\u0442\u044c, \u043c\u043e\u0436\u043d\u043e \u043b\u0438 \u0435\u0433\u043e \u043a\u0430\u043a-\u0442\u043e \u0443\u043b\u0443\u0447\u0448\u0438\u0442\u044c.<\/p>\n<p>\u041d\u0430\u0447\u0430\u0442\u044c \u044f \u0440\u0435\u0448\u0438\u043b \u0441 Volkswagen Passat, \u043f\u043e\u0442\u043e\u043c\u0443 \u0447\u0442\u043e \u043a\u043e\u0433\u0434\u0430-\u0442\u043e \u0435\u0437\u0434\u0438\u043b \u043d\u0430 \u0442\u0430\u043a\u043e\u0439 \u043c\u0430\u0448\u0438\u043d\u0435. \u041d\u043e \u043d\u0430 \u0430\u043d\u0433\u043b\u0438\u0439\u0441\u043a\u043e\u043c \u043e\u0444. \u0441\u0430\u0439\u0442\u0435 \u044d\u0442\u043e\u0433\u043e \u0431\u0440\u0435\u043d\u0434\u0430 \u044f \u0432\u043e\u043e\u0431\u0449\u0435 \u043d\u0435 \u0443\u0432\u0438\u0434\u0435\u043b \u043f\u0440\u0430\u0439\u0441-\u043b\u0438\u0441\u0442\u043e\u0432! \u041e\u043a, \u043d\u043e\u0432\u044b\u0439 Passat \u043f\u0440\u043e\u0435\u043a\u0442\u0438\u0440\u0443\u0435\u0442 \u0434\u0438\u0437\u0430\u0439\u043d-\u043a\u043e\u043c\u0430\u043d\u0434\u0430 Skoda, \u0440\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u0438\u043c \u00ab\u043c\u043b\u0430\u0434\u0448\u0435\u0433\u043e \u0431\u0440\u0430\u0442\u0430\u00bb \u0438\u0437 \u0427\u0435\u0445\u0438\u0438 \u2014 Superb. \u0414\u043b\u044f \u0441\u0440\u0430\u0432\u043d\u0435\u043d\u0438\u044f \u0440\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u0438\u043c \u0430\u043c\u0435\u0440\u0438\u043a\u0430\u043d\u0441\u043a\u0443\u044e \u0430\u043b\u044c\u0442\u0435\u0440\u043d\u0430\u0442\u0438\u0432\u0443 \u2014 Ford Mondeo, \u0438 \u044f\u043f\u043e\u043d\u0441\u043a\u0443\u044e \u2014 Toyota Corolla. \u041f\u0440\u0430\u0439\u0441-\u043b\u0438\u0441\u0442\u044b \u0434\u043b\u044f \u044d\u0442\u0438\u0445 \u043c\u043e\u0434\u0435\u043b\u0435\u0439 \u043d\u0430 \u0430\u043d\u0433\u043b\u0438\u0439\u0441\u043a\u0438\u0445 \u0441\u0430\u0439\u0442\u0430\u0445 \u043d\u0430\u0448\u043b\u0438\u0441\u044c, \u043d\u043e! \u2014 \u0432\u0441\u0435 \u043e\u043d\u0438 \u043f\u043e\u0447\u0435\u043c\u0443-\u0442\u043e \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u044b \u0432 \u0444\u043e\u0440\u043c\u0430\u0442\u0435 pdf.<\/p>\n<figure class=\"bordered full-width\"><figcaption>\u0414\u0432\u0435 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b (21-\u044f \u0438 22-\u044f) pdf-\u0444\u0430\u0439\u043b\u0430 (https:\/\/www.skoda.co.uk\/_doc\/71165c49-62c5-4f74-b29a-be6ad40d7373), \u043d\u0430 \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0432\u0435\u0434\u0435\u0442 \u0441\u0441\u044b\u043b\u043a\u0430 \u00abBROCHURE &amp; PRICELIST\u00bb \u0441\u043e \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b https:\/\/www.skoda.co.uk\/new-cars\/superb\/hatch-se<\/figcaption><\/figure>\n<figure class=\"bordered full-width\"><figcaption><\/figcaption><\/figure>\n<figure class=\"full-width\"><figcaption>\u0414\u0432\u0435 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b (8-\u044f \u0438 9-\u044f) pdf-\u0444\u0430\u0439\u043b\u0430 (https:\/\/s3-eu-west-1.amazonaws.com\/liveassets.toyotaretail.co.uk\/price-list\/010791_VPL_CVPL_JUNE_68_PAGES.pdf#page=8), \u043d\u0430 \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0432\u0435\u0434\u0435\u0442 \u0441\u0441\u044b\u043b\u043a\u0430 \u201cView Brochure\u201d \u0441\u043e \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b https:\/\/www.toyota.co.uk\/new-cars\/corolla-hatchback<\/figcaption><\/figure>\n<figure class=\"full-width\"><figcaption><\/figcaption><\/figure>\n<figure class=\"full-width\"><figcaption>4-\u044f \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0430 \u043f\u0440\u0430\u0439\u0441-\u043b\u0438\u0441\u0442\u0430 \u0438\u0437 pdf-\u0444\u0430\u0439\u043b\u0430 https:\/\/www.ford.co.uk\/content\/dam\/guxeu\/uk\/documents\/price-list\/cars\/PL-Mondeo_2019.pdf, \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u043e\u0433\u043e \u043f\u043e \u0441\u0441\u044b\u043b\u043a\u0435 \u201cBrochures &amp; Price Lists\u201d \u0441\u043e \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b https:\/\/www.ford.co.uk\/cars\/mondeo<\/figcaption><\/figure>\n<p> \u042f\u00a0\u043d\u0435\u00a0\u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u044f\u044e, \u043a\u0430\u043a \u044d\u0442\u0438 pdf-\u043f\u0440\u0430\u0439\u0441\u044b \u0438\u0437\u0443\u0447\u0430\u0442\u044c \u043d\u0430\u00a0\u044d\u043a\u0440\u0430\u043d\u0435 \u043c\u043e\u0431\u0438\u043b\u044c\u043d\u043e\u0433\u043e  \u0442\u0435\u043b\u0435\u0444\u043e\u043d\u0430 \u0441\u00a0\u0448\u0438\u0440\u0438\u043d\u043e\u0439 &lt;10\u00a0\u0441\u043c. \u041c\u0430\u043b\u043e \u0442\u043e\u0433\u043e, \u0434\u0430\u0436\u0435 \u0435\u0441\u043b\u0438 \u0440\u0430\u0441\u043f\u0435\u0447\u0430\u0442\u0430\u0442\u044c  \u0438\u0445\u00a0\u043d\u0430\u00a0\u0431\u043e\u043b\u044c\u0448\u043e\u043c \u043b\u0438\u0441\u0442\u0435 \u0431\u0443\u043c\u0430\u0433\u0435, \u043c\u043e\u0436\u043d\u043e \u0437\u0430\u043c\u0435\u0442\u0438\u0442\u044c, \u0447\u0442\u043e \u0441\u0434\u0435\u043b\u0430\u043d\u044b \u044d\u0442\u0438 \u0442\u0430\u0431\u043b\u0438\u0446\u044b  \u0441\u043e\u0432\u0441\u0435\u043c \u043d\u0435\u00a0\u0438\u0434\u0435\u0430\u043b\u044c\u043d\u043e. \u041f\u043e\u043f\u0440\u043e\u0431\u0443\u0435\u043c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0441\u043e\u0432\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0435 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0438 \u0432\u0435\u0431\u0430.  \u0410\u00a0\u0432\u00a0\u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u0440\u0430\u0431\u043e\u0447\u0435\u0433\u043e \u043f\u0440\u0438\u043c\u0435\u0440\u0430 \u044f\u00a0\u0432\u043e\u0437\u044c\u043c\u0443 Ford, \u043e\u0442\u0434\u0430\u0432 \u0442\u0430\u043a\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c \u0434\u0430\u043d\u044c  \u0431\u043b\u0430\u0433\u043e\u0434\u0430\u0440\u043d\u043e\u0441\u0442\u0438 \u043e\u0441\u043d\u043e\u0432\u0430\u0442\u0435\u043b\u044e \u043a\u043e\u043c\u043f\u0430\u043d\u0438\u0438 \u0437\u0430\u00a0\u0435\u0433\u043e \u0437\u0430\u043c\u0435\u0447\u0430\u0442\u0435\u043b\u044c\u043d\u0443\u044e \u043a\u043d\u0438\u0433\u0443 \u201c\u041c\u043e\u044f \u0436\u0438\u0437\u043d\u044c, \u043c\u043e\u0438 \u0434\u043e\u0441\u0442\u0438\u0436\u0435\u043d\u0438\u044f\u201d (\u0440\u0435\u043a\u043e\u043c\u0435\u043d\u0434\u0443\u044e \u043a\u00a0\u043f\u0440\u043e\u0447\u0442\u0435\u043d\u0438\u044e).<\/p>\n<h2>\u0427\u0435\u043c \u043c\u0435\u043d\u044c\u0448\u0435 \u0442\u0430\u0431\u043b\u0438\u0446\u0430, \u0442\u0435\u043c \u043b\u0443\u0447\u0448\u0435<\/h2>\n<p> \u041f\u043e\u00a0\u0432\u0441\u0435\u043c \u043f\u0440\u0430\u0439\u0441 \u043b\u0438\u0441\u0442\u0430\u043c \u0432\u0438\u0434\u043d\u043e, \u0447\u0442\u043e \u0442\u0430\u043c \u0441\u043b\u0438\u0448\u043a\u043e\u043c \u043c\u043d\u043e\u0433\u043e \u0434\u0430\u043d\u043d\u044b\u0445. \u0412\u00a0\u043f\u0435\u0440\u0432\u0443\u044e  \u043e\u0447\u0435\u0440\u0435\u0434\u044c\u00a0\u2014 \u044d\u0442\u043e \u043f\u0440\u0430\u0439\u0441-\u043b\u0438\u0441\u0442\u044b, \u0437\u0430\u0434\u0430\u0447\u0430 \u0442\u0430\u0431\u043b\u0438\u0446\u00a0\u2014 \u0434\u0430\u0442\u044c <strong>\u0441\u0440\u0430\u0432\u043d\u0435\u043d\u0438\u0435 \u0446\u0435\u043d<\/strong>. \u041e\u0431\u043b\u0435\u0433\u0447\u0438\u043c  \u044d\u0442\u0443 \u0437\u0430\u0434\u0430\u0447\u0443, \u0443\u0431\u0440\u0430\u0432 \u043d\u0435\u00a0\u043e\u0441\u043e\u0431\u043e \u0432\u0430\u0436\u043d\u0443\u044e \u0434\u043b\u044f \u043d\u0430\u0448\u0435\u0439 \u0446\u0435\u043b\u0438 \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u044e:<\/p>\n<ul>\n<li>\n<p>\u043f\u0440\u0438\u043c\u0435\u0447\u0430\u043d\u0438\u0435 \u043a \u201cCO\u2082 Emissions\u201d \u0433\u043b\u0430\u0441\u0438\u0442 <em>\u00ab&#8230;\u042d\u0442\u0438 \u0446\u0438\u0444\u0440\u044b \u043c\u043e\u0433\u0443\u0442 \u043d\u0435 \u043e\u0442\u0440\u0430\u0436\u0430\u0442\u044c \u0440\u0435\u0430\u043b\u044c\u043d\u044b\u0435 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u044b \u0432\u043e\u0436\u0434\u0435\u043d\u0438\u044f&#8230; \u0414\u043b\u044f \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u0438\u044f \u0434\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0439 \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u0438&#8230; \u043e\u0431\u0440\u0430\u0442\u0438\u0442\u0435\u0441\u044c \u043a \u043d\u0430\u0448\u0435\u043c\u0443 \u0440\u0430\u0437\u0434\u0435\u043b\u0443 \u201e\u0422\u043e\u043f\u043b\u0438\u0432\u043e \u0438 \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u044c\u201c.\u00bb<\/em> \u0420\u0430\u0437 \u044d\u0442\u043e \u0435\u0441\u0442\u044c \u0432 \u0434\u0440\u0443\u0433\u043e\u043c \u0440\u0430\u0437\u0434\u0435\u043b\u0435 \u0438 \u043d\u0435 \u043e\u0442\u043d\u043e\u0441\u0438\u0442\u0441\u044f \u043a \u0441\u0442\u043e\u0438\u043c\u043e\u0441\u0442\u0438 \u2014 \u0443\u0431\u0438\u0440\u0430\u0435\u043c \u0441\u0442\u043e\u043b\u0431\u0435\u0446<\/p>\n<\/li>\n<li>\n<p> \u043f\u0440\u0438\u043c\u0435\u0447\u0430\u043d\u0438\u044f \u043a\u00a0\u0441\u0442\u043e\u043b\u0431\u0446\u0430\u043c \u201cMonthly BIK\u201d\u00a0\u2014 \u201c<em>\u043d\u0435\u00a0\u0434\u043b\u044f \u0447\u0430\u0441\u0442\u043d\u044b\u0445 \u043f\u043e\u043a\u0443\u043f\u0430\u0442\u0435\u043b\u0435\u0439<\/em>\u201d, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u0442\u043e\u0436\u0435 \u0438\u0445\u00a0\u0443\u0431\u0438\u0440\u0430\u0435\u043c<\/p>\n<\/li>\n<\/ul>\n<p>\u0412 \u043e\u0442\u043b\u0438\u0447\u0438\u0435 \u043e\u0442 pdf-\u0444\u043e\u0440\u043c\u0430\u0442\u0430, \u043f\u0440\u0435\u0434\u043d\u0430\u0437\u043d\u0430\u0447\u0435\u043d\u043d\u043e\u0433\u043e \u0434\u043b\u044f \u043f\u0435\u0447\u0430\u0442\u0438 (\u044f \u0432\u043e\u043e\u0431\u0449\u0435 \u043f\u043e\u0440\u0430\u0436\u0430\u044e\u0441\u044c, \u0437\u0430\u0447\u0435\u043c \u0432 21 \u0432\u0435\u043a\u0435 \u044d\u0442\u043e\u0442 \u0444\u043e\u0440\u043c\u0430\u0442 \u0434\u043e \u0441\u0438\u0445 \u043f\u043e\u0440 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u0432 \u0441\u0430\u0439\u0442\u043e\u0441\u0442\u0440\u043e\u0435\u043d\u0438\u0438), \u043d\u0430 \u0432\u0435\u0431-\u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0435 \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0438\u043d\u0442\u0435\u0440\u0430\u043a\u0442\u0438\u0432\u043d\u043e\u0441\u0442\u044c, \u0447\u0442\u043e \u043f\u043e\u0437\u0432\u043e\u043b\u0438\u0442 \u043d\u0430\u043c \u0441\u0443\u0449\u0435\u0441\u0442\u0432\u0435\u043d\u043d\u043e \u0441\u043e\u043a\u0440\u0430\u0442\u0438\u0442\u044c \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u044f\u0447\u0435\u0435\u043a.<\/p>\n<ul>\n<li>\n<p>\u0440\u0430\u0437\u0434\u0435\u043b\u0438\u043c \u0434\u0430\u043d\u043d\u044b\u0435 \u043f\u043e \u043a\u0430\u0442\u0435\u0433\u043e\u0440\u0438\u044f\u043c Bodystyle. \u041d\u0435 \u0441\u043e\u0432\u0441\u0435\u043c \u043f\u043e\u043d\u044f\u0442\u043d\u044b\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u201c4 door\u201d \u0438 \u201c5 door\u201d \u0437\u0430\u043c\u0435\u043d\u0438\u043c \u043d\u0430 \u201cSaloon\u201d \u0438 \u201cHatchback\u201d \u0438\u0437 \u0442\u043e\u0439 \u0436\u0435 \u0431\u0440\u043e\u0448\u044e\u0440\u044b, \u0438\u0442\u043e\u0433\u043e\u0432\u044b\u0435 \u043a\u0430\u0442\u0435\u0433\u043e\u0440\u0438\u0438 \u0431\u0443\u0434\u0443\u0442 [\u2018Saloon \/ Hatchback\u2019, \u2018Estate\u2019]<\/p>\n<\/li>\n<li>\n<p> \u0432\u00a0\u043a\u0430\u0436\u0434\u043e\u0439 \u043a\u0430\u0442\u0435\u0433\u043e\u0440\u0438\u0438 \u0441\u0434\u0435\u043b\u0430\u0435\u043c \u0438\u043d\u0442\u0435\u0440\u0430\u043a\u0442\u0438\u0432\u043d\u044b\u0439 \u0432\u044b\u0431\u043e\u0440 \u201cPrice: [\u2018Basic Retail\u2019, \u2018incl. Vat\u2019, \u2019+ Manufacturers\u2019]\u201d<\/p>\n<\/li>\n<\/ul>\n<p>\u0418 \u043d\u0435\u043c\u043d\u043e\u0433\u043e \u043f\u0435\u0440\u0435\u0444\u043e\u0440\u043c\u0430\u0442\u0438\u0440\u0443\u0435\u043c \u0442\u0430\u0431\u043b\u0438\u0446\u0443:<\/p>\n<figure class=\"full-width\"><figcaption>\u0414\u043b\u044f \u0438\u043d\u0442\u0435\u0440\u0430\u043a\u0442\u0438\u0432\u043d\u044b\u0445 \u0432\u044b\u0431\u043e\u0440\u043e\u0432 \u00abBody: Saloon \/ Hatchback\u00bb \u0438 \u00abPrice: Basic Retail\u00bb \u0442\u0430\u0431\u043b\u0438\u0446\u0430 \u0432 \u043a\u043b\u0430\u0441\u0441\u0438\u0447\u0435\u0441\u043a\u043e\u043c \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u0438\u0438 \u043c\u043e\u0436\u0435\u0442 \u0432\u044b\u0433\u043b\u044f\u0434\u0435\u0442\u044c \u0442\u0430\u043a<\/figcaption><\/figure>\n<h2>Mobile First \u0438\u043b\u0438 Desktop First? \u0411\u0435\u0437 \u0440\u0430\u0437\u043d\u0438\u0446\u044b!<\/h2>\n<p>\u0423\u00a0\u043c\u043e\u0431\u0438\u043b\u044c\u043d\u044b\u0445 \u0442\u0435\u043b\u0435\u0444\u043e\u043d\u043e\u0432\u00a0\u2014 \u0440\u0430\u0437\u043d\u044b\u0435 \u0440\u0430\u0437\u043c\u0435\u0440\u044b \u044d\u043a\u0440\u0430\u043d\u043e\u0432.<\/p>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[],"tags":[],"class_list":["post-336594","post","type-post","status-publish","format-standard","hentry"],"_links":{"self":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/336594","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=336594"}],"version-history":[{"count":0,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/336594\/revisions"}],"wp:attachment":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=336594"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=336594"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=336594"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}