@formixru/b2b-ui 1.7.0 → 2.0.0

package/CHANGELOG.md

@@ -1,3 +1,8 @@
+## v2.0.0
+
+- Добавлен новый компонент - универсальный AJAX-контроллер `Request`, который используется внутри `Dialog`/`Form`/`Sidebar` и может использоваться как отдельный компонент
+- Storybook обновлён до 9-й версии
+
 ## v1.7.0
 
 - Добавлен новый вид для WarningMessage (`light-info`)

package/CONTRIBUTING.md

@@ -55,7 +55,5 @@ yarn dlx storybook@latest upgrade
 
 yarn upgrade-interactive
 
-yarn update-browserslist-db
-
 yarn dlx @yarnpkg/sdks
 ```

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@formixru/b2b-ui",
-    "version": "1.7.0",
+    "version": "2.0.0",
     "type": "module",
     "repository": {
         "type": "git",
@@ -11,7 +11,7 @@
         "defaults",
         "not OperaMini all"
     ],
-    "packageManager": "yarn@4.6.0",
+    "packageManager": "yarn@4.9.3",
     "scripts": {
         "_postinstall": "husky",
         "prepack": "yarn pinst --disable",
@@ -26,58 +26,51 @@
     "devDependencies": {
         "@advdominion/get-scrollbar-width": "^2.0.0",
         "@advdominion/is": "^1.0.1",
-        "@advdominion/lightningcss-loader": "^1.0.0",
         "@advdominion/pluralize": "^1.0.1",
-        "@advdominion/tooltip": "^3.0.0",
-        "@eslint/eslintrc": "^3.2.0",
-        "@eslint/js": "^9.18.0",
-        "@floating-ui/dom": "^1.6.13",
+        "@advdominion/tooltip": "^3.0.1",
+        "@eslint/eslintrc": "^3.3.1",
+        "@eslint/js": "^9.33.0",
+        "@floating-ui/dom": "^1.7.4",
         "@popperjs/core": "^2.11.8",
-        "@prettier/plugin-php": "^0.22.4",
-        "@storybook/addon-designs": "^8.0.4",
-        "@storybook/addon-essentials": "^8.5.1",
-        "@storybook/addon-links": "^8.5.1",
-        "@storybook/addon-webpack5-compiler-swc": "^2.0.0",
-        "@storybook/blocks": "^8.5.1",
-        "@storybook/vue3": "^8.5.1",
-        "@storybook/vue3-webpack5": "^8.5.1",
-        "browserslist": "^4.24.4",
-        "color": "^4.2.3",
-        "css-loader": "^7.1.2",
+        "@prettier/plugin-php": "^0.24.0",
+        "@storybook/addon-designs": "^10.0.2",
+        "@storybook/addon-docs": "^9.1.3",
+        "@storybook/addon-links": "^9.1.3",
+        "@storybook/vue3-vite": "^9.1.3",
+        "@vitejs/plugin-vue": "^6.0.1",
+        "@vueless/storybook-dark-mode": "^9.0.7",
+        "color": "^5.0.0",
         "dayjs": "^1.11.13",
-        "eslint": "^9.18.0",
-        "eslint-config-prettier": "^10.0.1",
+        "eslint": "^9.33.0",
+        "eslint-config-prettier": "^10.1.8",
         "eslint-plugin-simple-import-sort": "^12.1.1",
-        "eslint-plugin-unicorn": "^56.0.1",
-        "eslint-plugin-vue": "^9.32.0",
-        "globals": "^15.14.0",
+        "eslint-plugin-storybook": "9.1.3",
+        "eslint-plugin-unicorn": "^60.0.0",
+        "eslint-plugin-vue": "^10.4.0",
+        "globals": "^16.3.0",
         "husky": "^9.1.7",
         "imask": "^7.6.1",
-        "lightningcss": "^1.29.1",
-        "lint-staged": "^15.4.1",
+        "lint-staged": "^16.1.5",
         "lodash-es": "^4.17.21",
-        "mime": "^4.0.6",
-        "msw": "^2.7.0",
-        "msw-storybook-addon": "^2.0.4",
+        "mime": "^4.0.7",
+        "msw": "^2.10.5",
+        "msw-storybook-addon": "^2.0.5",
         "nouislider": "^15.8.1",
         "pinst": "^3.0.0",
-        "prettier": "^3.4.2",
+        "prettier": "^3.6.2",
         "reset-css": "^5.0.2",
-        "sass-embedded": "^1.83.4",
-        "sass-loader": "^16.0.4",
-        "storybook": "^8.5.1",
-        "storybook-dark-mode": "^4.0.2",
-        "style-loader": "^4.0.0",
-        "stylelint": "^16.13.2",
-        "stylelint-config-standard-scss": "^14.0.0",
+        "sass-embedded": "^1.90.0",
+        "storybook": "^9.1.3",
+        "stylelint": "^16.23.1",
+        "stylelint-config-standard-scss": "^15.0.1",
         "stylelint-config-standard-vue": "^1.0.0",
-        "stylelint-order": "^6.0.4",
-        "swiper": "^11.2.1",
-        "update-browserslist-db": "^1.1.2",
+        "stylelint-order": "^7.0.0",
+        "swiper": "^11.2.10",
         "v-calendar": "3.0.1",
-        "vue": "^3.5.13",
-        "webpack": "^5.97.1",
-        "yargs": "^17.7.2"
+        "vite": "^7.1.3",
+        "vue": "^3.5.19",
+        "vue-eslint-parser": "^10.2.0",
+        "yargs": "^18.0.0"
     },
     "msw": {
         "workerDirectory": [
@@ -88,8 +81,8 @@
         "@advdominion/get-scrollbar-width": "^2.0.0",
         "@advdominion/is": "^1.0.0",
         "@advdominion/pluralize": "^1.0.0",
-        "@advdominion/tooltip": "^1.0.0",
-        "color": "^4.0.0",
+        "@advdominion/tooltip": "^3.0.0",
+        "color": "^5.0.0",
         "dayjs": "^1.0.0",
         "imask": "^7.0.0",
         "lodash-es": "^4.0.0",

package/src/components/color-input/index.scss

@@ -40,7 +40,8 @@ $b: '.color-input';
         width: 4px * 7;
 
         &_transparent {
-            background-image: linear-gradient(45deg, $color-grey-80 25%, transparent 25%),
+            background-image:
+                linear-gradient(45deg, $color-grey-80 25%, transparent 25%),
                 linear-gradient(-45deg, $color-grey-80 25%, transparent 25%),
                 linear-gradient(45deg, transparent 75%, $color-grey-80 75%),
                 linear-gradient(-45deg, transparent 75%, $color-grey-80 75%);

package/src/components/dialog/index.js

@@ -1,13 +1,9 @@
-/* globals BX */
-
-import { is } from '@advdominion/is';
 import _throttle from 'lodash-es/throttle.js';
 
 import { cssVar } from '../../helpers/css-var.js';
-import { errorHandler } from '../../helpers/error-handler.js';
 import { mm } from '../../helpers/mm.js';
-import { clearLoaderTimeout, hide as hideLoader, show as showLoader } from '../loader/index.js';
 import { disableScroll, enableScroll } from '../overlay/index.js';
+import { request } from '../request/index.js';
 
 const isDialogOverflow = ($b) => {
     return $b.scrollHeight > $b.clientHeight;
@@ -16,7 +12,6 @@ const isDialogOverflow = ($b) => {
 export const init = ($b) => {
     // Перемещаем кнопку закрытия модального окна для моб. устройств
     if (!mm('tablet-landscape-up')) {
-        // $b.find('.dialog__close').prependTo($b); ??
         $b.prepend($b.querySelector('.dialog__close'));
     }
     // Отключаем скролл у body, если при загрузке на странице есть видимое диалоговое окно
@@ -109,52 +104,15 @@ export const initDialogContent = ($b) => {
 
 export const get = async (id, url) => {
     if (url && url !== '#') {
-        showLoader();
-        try {
-            const response = await fetch(url, {
-                method: 'GET',
-                headers: {
-                    'X-Requested-With': 'XMLHttpRequest',
-                    'X-Session-Id': BX.message('bitrix_sessid'),
-                },
-            });
-            if (!response.ok) {
-                throw response;
-            }
-            let data = await response.text();
-            try {
-                data = JSON.parse(data);
-                if (is(data.redirect, 'String')) {
-                    if (data.redirect) {
-                        location.assign(data.redirect);
-                        clearLoaderTimeout();
-                    } else {
-                        location.reload();
-                    }
-                } else {
-                    try {
-                        await window.__FORMIX__DIALOG__INTERCEPT_DATA(data);
-                    } catch {
-                        console.warn('Функция __FORMIX__DIALOG__INTERCEPT_DATA не установлена');
-                    }
-                    data = data.content || '';
-                }
-            } catch {} // eslint-disable-line no-empty
-            if (data.length > 0) {
-                const $b = document.querySelector(id);
-                $b.querySelector('.dialog__container').innerHTML = data;
+        const { content } = await request({ url });
+        if (content) {
+            const $b = document.querySelector(id);
+            if ($b) {
+                $b.querySelector('.dialog__container').innerHTML = content;
                 await show($b);
-                hideLoader();
                 initDialogContent($b);
             } else {
-                hideLoader();
-            }
-        } catch (error) {
-            if (error.status === 401) {
-                location.reload();
-            } else {
-                hideLoader();
-                errorHandler(error);
+                console.error(`Диалоговое окно с id ${id} не найдено`);
             }
         }
     } else {
@@ -193,11 +151,7 @@ document.body.addEventListener('click', (event) => {
     if (target.closest('[data-dialog]')) {
         event.preventDefault();
         const $el = target.closest('[data-dialog]');
-        let url = $el.dataset.dialogFetch || $el.href;
-        if (url) {
-            url = new URL(url, location.origin);
-        }
-        get($el.dataset.dialog, url);
+        get($el.dataset.dialog, $el.dataset.dialogFetch ?? $el.href);
     } else if (target.closest('[data-dialog-close]')) {
         hide(target.closest('[data-dialog-close]').closest('.dialog'));
     } else if (target.matches('.dialog') && target === $pointerDownTarget) {

package/src/components/form/index.js

@@ -1,12 +1,9 @@
-/* globals BX, SmartCaptcha, SMART_CAPTCHA_KEY */
+/* globals SmartCaptcha, SMART_CAPTCHA_KEY */
 
-import { is } from '@advdominion/is';
-
-import { errorHandler } from '../../helpers/error-handler.js';
 import { getSmartCaptcha } from '../../helpers/get-smart-captcha.js';
 import { scrollTo } from '../../helpers/scroll-to.js';
-import { hide as hideDialog, initDialogContent, show as showDialog } from '../dialog/index.js';
-import { clearLoaderTimeout, hide as hideLoader, show as showLoader } from '../loader/index.js';
+import { initDialogContent } from '../dialog/index.js';
+import { request } from '../request/index.js';
 
 const initFormContent = ($b) => {
     try {
@@ -17,106 +14,34 @@ const initFormContent = ($b) => {
 };
 
 export const send = async ($b, url, method, data) => {
-    url = new URL(url || $b.getAttribute('action'), location.origin);
-    method = method || $b.getAttribute('method');
-    data = data || new FormData($b);
-    const options = {
-        method,
-        headers: {
-            'X-Requested-With': 'XMLHttpRequest',
-            'X-Session-Id': BX.message('bitrix_sessid'),
-        },
-    };
-    if (method === 'GET') {
-        for (const [name, value] of data) {
-            url.searchParams.append(name, value);
-        }
-    } else {
-        options.body = data;
+    const { success, content } = await request({
+        $b,
+        url: url || $b.getAttribute('action'),
+        method: method || $b.getAttribute('method'),
+        data: data || new FormData($b),
+    });
+    if (success) {
+        $b.dispatchEvent(new CustomEvent('form-success', { bubbles: true }));
     }
-    showLoader();
-    try {
-        const response = await fetch(url, options);
-        if (!response.ok) {
-            throw response;
-        }
-        const data = await response.json().catch(() => {
-            console.warn('Ошибка при попытке преобразования ответа в JSON.');
-            return {};
-        });
-        if (is(data.redirect, 'String')) {
-            if (data.redirect) {
-                location.assign(data.redirect);
-                if (data.redirect.startsWith('tg:')) {
-                    hideLoader();
-                } else {
-                    clearLoaderTimeout();
-                }
-            } else {
-                location.reload();
-            }
+    if (content) {
+        const $dialog = $b.closest('.dialog');
+        if ($dialog) {
+            $dialog.querySelector('.dialog__container').innerHTML = content;
+            initDialogContent($dialog);
+            setTimeout(() => {
+                scrollToError($dialog);
+            });
         } else {
-            if (!(data.reloadOnHideDialog && data.hideDialog) && (!data.trigger || data.hideDialog)) {
-                hideLoader();
-            }
-            try {
-                await window.__FORMIX__FORM__INTERCEPT_DATA(data);
-            } catch {
-                console.warn('Функция __FORMIX__FORM__INTERCEPT_DATA не установлена');
-            }
-            if (data.success) {
-                $b.dispatchEvent(new CustomEvent('form-success', { bubbles: true }));
-            }
-            if (data.dialog) {
-                const $dialog = document.querySelector(data.dialog.id);
-                $dialog.querySelector('.dialog__container').innerHTML = data.dialog.content;
-                showDialog($dialog);
-            }
-            if (data.reloadOnHideDialog) {
-                $b.closest('.dialog').addEventListener('dialog-hide', () => {
-                    location.reload();
+            const $parent = $b.parentElement;
+            $b.outerHTML = content;
+            const $form = $parent.querySelector('.form');
+            if ($form) {
+                init($form);
+                initFormContent($form);
+                setTimeout(() => {
+                    scrollToError($form);
                 });
             }
-            if (data.hideDialog) {
-                hideDialog($b.closest('.dialog'));
-            }
-            if (data.trigger) {
-                const $trigger = document.querySelector(data.trigger);
-                if ($trigger) {
-                    $trigger?.click();
-                    console.error(`Элемент с селектором ${data.trigger} не найден`);
-                } else {
-                    hideLoader();
-                }
-            }
-            if (data.content) {
-                const $dialog = $b.closest('.dialog');
-                if ($dialog) {
-                    $dialog.querySelector('.dialog__container').innerHTML = data.content;
-                    initDialogContent($dialog);
-                    setTimeout(() => {
-                        scrollToError($dialog);
-                    });
-                } else {
-                    const $parent = $b.parentElement;
-                    $b.outerHTML = data.content;
-                    const $form = $parent.querySelector('.form');
-                    if ($form) {
-                        init($form);
-                        initFormContent($form);
-                        setTimeout(() => {
-                            scrollToError($form);
-                        });
-                    }
-                }
-            }
-        }
-    } catch (error) {
-        if (error.status === 401) {
-            location.reload();
-        } else {
-            hideLoader();
-            errorHandler(error);
         }
     }
 };

package/src/components/form/index.scss

@@ -237,7 +237,7 @@ $b: '.form';
     &__value {
         color: $form-value-color;
         display: block;
-        word-break: break-word;
+        overflow-wrap: break-word;
 
         @include font($form-value-font);
     }

package/src/components/input/index.js

@@ -33,7 +33,7 @@ export const init = async ($b) => {
         ];
 
         if (window.TEL_ADD_MASKS) {
-            for (const item of [...window.TEL_ADD_MASKS].reverse()) {
+            for (const item of [...window.TEL_ADD_MASKS].toReversed()) {
                 mask.unshift(item);
             }
         }

package/src/components/request/index.js

@@ -0,0 +1,164 @@
+/* globals BX */
+
+import { is } from '@advdominion/is';
+
+import { errorHandler } from '../../helpers/error-handler.js';
+import { hide as hideDialog, initDialogContent, show as showDialog } from '../dialog/index.js';
+import { clearLoaderTimeout, hide as hideLoader, show as showLoader } from '../loader/index.js';
+import { initSidebarContent, show as showSidebar } from '../sidebar/index.js';
+
+export const request = async ({ $b, url = '', method = 'GET', data = {}, loader = true, showLoaderDelay }) => {
+    url = new URL(url, location.origin);
+    const options = {
+        method,
+        headers: {
+            'X-Requested-With': 'XMLHttpRequest',
+            'X-Session-Id': BX.message('bitrix_sessid'),
+        },
+    };
+    if (method === 'GET') {
+        let entries;
+        if (data instanceof FormData) {
+            entries = data.entries();
+        } else if (is(data, 'String')) {
+            entries = Object.entries(JSON.parse(data));
+        } else {
+            entries = Object.entries(data);
+        }
+        for (const [name, value] of entries) {
+            url.searchParams.append(name, value);
+        }
+    } else {
+        if (data instanceof FormData || is(data, 'String')) {
+            options.body = data;
+        } else {
+            options.body = JSON.stringify(data);
+            options.headers['Content-Type'] = 'application/json';
+        }
+    }
+    if (loader) {
+        showLoader(showLoaderDelay);
+    }
+    try {
+        const response = await fetch(url, options);
+        if (!response.ok) {
+            throw response;
+        }
+        const data = await response.json().catch(async () => {
+            console.warn('Ошибка при попытке преобразования ответа в JSON');
+            const content = await response.text();
+            return { content };
+        });
+
+        if (is(data.redirect, 'String')) {
+            if (data.redirect) {
+                location.assign(data.redirect);
+                if (data.redirect.startsWith('tg:')) {
+                    if (loader) {
+                        hideLoader();
+                    }
+                } else {
+                    clearLoaderTimeout();
+                }
+            } else {
+                location.reload();
+            }
+        } else {
+            try {
+                await window.__FORMIX__REQ__INTERCEPT_DATA(data);
+            } catch {
+                console.warn('Функция __FORMIX__REQUEST__INTERCEPT_DATA не установлена');
+            }
+            if (data.dialog) {
+                const $dialog = document.querySelector(data.dialog.id);
+                if ($dialog) {
+                    $dialog.querySelector('.dialog__container').innerHTML = data.dialog.content;
+                    await showDialog($dialog);
+                    initDialogContent($dialog);
+                } else {
+                    console.error(`Диалоговое окно с id ${data.trigger} не найдено`);
+                }
+            }
+            if (data.reloadOnHideDialog) {
+                if (data.dialog) {
+                    const $dialog = document.querySelector(data.dialog.id);
+                    $dialog?.addEventListener('dialog-hide', () => {
+                        location.reload();
+                    });
+                } else {
+                    $b?.closest('.dialog').addEventListener('dialog-hide', () => {
+                        location.reload();
+                    });
+                }
+            }
+            if (data.hideDialog) {
+                if (data.dialog) {
+                    const $dialog = document.querySelector(data.dialog.id);
+                    if ($dialog) {
+                        hideDialog($dialog);
+                    }
+                } else if ($b) {
+                    hideDialog($b.closest('.dialog'));
+                }
+            }
+            if (data.sidebar) {
+                const $sidebar = document.querySelector(data.sidebar.id);
+                if ($sidebar) {
+                    $sidebar.innerHTML = data.sidebar.content;
+                    await showSidebar($sidebar);
+                    initSidebarContent($sidebar);
+                } else {
+                    console.error(`Сайдбар с id ${data.trigger} не найден`);
+                }
+            }
+            if (data.trigger) {
+                const $trigger = document.querySelector(data.trigger);
+                if ($trigger) {
+                    $trigger.click();
+                } else {
+                    console.error(`Элемент с селектором ${data.trigger} не найден`);
+                    if (loader) {
+                        hideLoader();
+                    }
+                }
+            }
+            if (!(data.reloadOnHideDialog && data.hideDialog) && (!data.trigger || data.hideDialog) && loader) {
+                hideLoader();
+            }
+        }
+
+        return data;
+    } catch (error) {
+        if (error.status === 401) {
+            location.reload();
+        } else {
+            if (loader) {
+                hideLoader();
+            }
+            errorHandler(error);
+        }
+    }
+};
+
+document.body.addEventListener('click', (event) => {
+    const { target } = event;
+    if (target.closest('[data-request]')) {
+        event.preventDefault();
+        const $el = target.closest('[data-request]');
+        const options = { $b: $el, url: $el.dataset.request ?? $el.href };
+        if ($el.dataset.requestMethod) {
+            options.method = $el.dataset.requestMethod;
+        }
+        if ($el.dataset.requestData) {
+            try {
+                options.method = JSON.parse($el.dataset.requestData);
+            } catch {
+                console.warn('Ошибка при попытке преобразования значения data-request-data в JSON');
+            }
+        }
+        if ($el.dataset.requestLoader === 'false') {
+            options.loader = false;
+        }
+        request(options);
+    }
+});

package/src/components/sidebar/index.js

@@ -1,12 +1,7 @@
-/* globals BX */
-
-import { is } from '@advdominion/is';
-
 import { cssVar } from '../../helpers/css-var.js';
-import { errorHandler } from '../../helpers/error-handler.js';
 import { mm } from '../../helpers/mm.js';
-import { clearLoaderTimeout, hide as hideLoader, show as showLoader } from '../loader/index.js';
 import { disableScroll, enableScroll, hide as hideOverlay, show as showOverlay } from '../overlay/index.js';
+import { request } from '../request/index.js';
 
 export const show = async ($b) => {
     if ($b.id !== 'settings-generator') {
@@ -54,52 +49,15 @@ export const initSidebarContent = ($b) => {
 
 export const get = async (id, url, showLoaderDelay) => {
     if (url && url !== '#') {
-        showLoader(showLoaderDelay);
-        try {
-            const response = await fetch(url, {
-                method: 'GET',
-                headers: {
-                    'X-Requested-With': 'XMLHttpRequest',
-                    'X-Session-Id': BX.message('bitrix_sessid'),
-                },
-            });
-            if (!response.ok) {
-                throw response;
-            }
-            let data = await response.text();
-            try {
-                data = JSON.parse(data);
-                if (is(data.redirect, 'String')) {
-                    if (data.redirect) {
-                        location.assign(data.redirect);
-                        clearLoaderTimeout();
-                    } else {
-                        location.reload();
-                    }
-                } else {
-                    try {
-                        await window.__FORMIX__SIDEBAR__INTERCEPT_DATA(data);
-                    } catch {
-                        console.warn('Функция __FORMIX__SIDEBAR__INTERCEPT_DATA не установлена');
-                    }
-                    data = data.content || '';
-                }
-            } catch {} // eslint-disable-line no-empty
-            if (data.length > 0) {
-                const $b = document.querySelector(id);
-                $b.innerHTML = data;
+        const { content } = await request({ url, showLoaderDelay });
+        if (content) {
+            const $b = document.querySelector(id);
+            if ($b) {
+                $b.innerHTML = content;
                 await show($b);
-                hideLoader();
                 initSidebarContent($b);
             } else {
-                hideLoader();
-            }
-        } catch (error) {
-            if (error.status === 401) {
-                location.reload();
-            } else {
-                hideLoader();
-                errorHandler(error);
+                console.error(`Сайдбар с id ${id} не найден`);
             }
         }
     } else {
@@ -119,29 +77,16 @@ for (const $el of $sidebars) {
     }
 }
 
-document.body.addEventListener('click', (e) => {
-    const $el = e.target.closest('[data-sidebar]');
-    if ($el) {
-        e.preventDefault();
-        let url = $el.dataset.sidebarFetch || $el.href;
-        if (url) {
-            url = new URL(url, location.origin);
-        }
-        get($el.dataset.sidebar, url);
-    }
-});
-
-document.body.addEventListener('click', (e) => {
-    const $b = e.target.closest('[data-sidebar-close]')?.closest('.sidebar');
-    if ($b) {
-        hide($b);
-    }
-});
-
-document.body.addEventListener('click', (e) => {
-    if (e.target.classList.contains('overlay')) {
-        const $sidebars = document.querySelectorAll('.sidebar:not([hidden])');
-        for (const $el of $sidebars) {
+document.body.addEventListener('click', (event) => {
+    const { target } = event;
+    if (target.closest('[data-sidebar]')) {
+        event.preventDefault();
+        const $el = target.closest('[data-sidebar]');
+        get($el.dataset.sidebar, $el.dataset.sidebarFetch ?? $el.href);
+    } else if (target.closest('[data-sidebar-close]')) {
+        hide(target.closest('[data-sidebar-close]').closest('.sidebar'));
+    } else if (target.classList.contains('overlay')) {
+        for (const $el of document.querySelectorAll('.sidebar:not([hidden])')) {
             hide($el);
         }
     }

package/src/helpers/request.js

@@ -0,0 +1,126 @@
+/* globals BX */
+
+import { is } from '@advdominion/is';
+
+import { hide as hideDialog, initDialogContent, show as showDialog } from '../components/dialog/index.js';
+import { clearLoaderTimeout, hide as hideLoader, show as showLoader } from '../components/loader.js';
+import { initSidebarContent, show as showSidebar } from '../components/sidebar/index.js';
+import { errorHandler } from './error-handler.js';
+
+export const req = async ({ $b, url = '', method = 'GET', data = {}, loader = true, showLoaderDelay }) => {
+    url = new URL(url, location.origin);
+    const options = {
+        method,
+        headers: {
+            'X-Requested-With': 'XMLHttpRequest',
+            'X-Session-Id': BX.message('bitrix_sessid'),
+        },
+    };
+    if (method === 'GET') {
+        for (const [name, value] of data) {
+            url.searchParams.append(name, value);
+        }
+    } else {
+        options.body = data;
+    }
+    if (loader) {
+        showLoader(showLoaderDelay);
+    }
+    try {
+        const response = await fetch(url, options);
+        if (!response.ok) {
+            throw response;
+        }
+        const data = await response.json().catch(async () => {
+            console.warn('Ошибка при попытке преобразования ответа в JSON.');
+            const content = await response.text();
+            return { content };
+        });
+
+        if (is(data.redirect, 'String')) {
+            if (data.redirect) {
+                location.assign(data.redirect);
+                if (data.redirect.startsWith('tg:')) {
+                    if (loader) {
+                        hideLoader();
+                    }
+                } else {
+                    clearLoaderTimeout();
+                }
+            } else {
+                location.reload();
+            }
+        } else {
+            try {
+                await window.__FORMIX__REQ__INTERCEPT_DATA(data);
+            } catch {
+                console.warn('Функция __FORMIX__REQUEST__INTERCEPT_DATA не установлена');
+            }
+            if (data.dialog) {
+                const $dialog = document.querySelector(data.dialog.id);
+                if ($dialog) {
+                    $dialog.querySelector('.dialog__container').innerHTML = data.dialog.content;
+                    await showDialog($dialog);
+                    initDialogContent($dialog);
+                } else {
+                    console.error(`Диалоговое окно с id ${data.trigger} не найдено`);
+                }
+            }
+            if (data.reloadOnHideDialog) {
+                if (data.dialog) {
+                    const $dialog = document.querySelector(data.dialog.id);
+                    $dialog?.addEventListener('dialog-hide', () => {
+                        location.reload();
+                    });
+                } else {
+                    $b?.closest('.dialog').addEventListener('dialog-hide', () => {
+                        location.reload();
+                    });
+                }
+            }
+            if (data.hideDialog) {
+                if (data.dialog) {
+                    const $dialog = document.querySelector(data.dialog.id);
+                    if ($dialog) {
+                        hideDialog($dialog);
+                    }
+                } else if ($b) {
+                    hideDialog($b.closest('.dialog'));
+                }
+            }
+            if (data.sidebar) {
+                const $sidebar = document.querySelector(data.sidebar.id);
+                if ($sidebar) {
+                    $sidebar.innerHTML = data.sidebar.content;
+                    await showSidebar($sidebar);
+                    initSidebarContent($sidebar);
+                } else {
+                    console.error(`Сайдбар с id ${data.trigger} не найден`);
+                }
+            }
+            if (data.trigger) {
+                const $trigger = document.querySelector(data.trigger);
+                if ($trigger) {
+                    $trigger?.click();
+                    console.error(`Элемент с селектором ${data.trigger} не найден`);
+                } else if (loader) {
+                    hideLoader();
+                }
+            }
+            if (!(data.reloadOnHideDialog && data.hideDialog) && (!data.trigger || data.hideDialog) && loader) {
+                hideLoader();
+            }
+        }
+
+        return data;
+    } catch (error) {
+        if (error.status === 401) {
+            location.reload();
+        } else {
+            if (loader) {
+                hideLoader();
+            }
+            errorHandler(error);
+        }
+    }
+};

package/vite.config.js

@@ -0,0 +1,75 @@
+import { readFileSync } from 'node:fs';
+import { createRequire } from 'node:module';
+import path from 'node:path';
+import { fileURLToPath, pathToFileURL } from 'node:url';
+
+import vue from '@vitejs/plugin-vue';
+import { defineConfig } from 'vite';
+
+const require = createRequire(import.meta.url);
+
+export default defineConfig({
+    plugins: [
+        vue({
+            template: {
+                transformAssetUrls: {
+                    video: [],
+                    source: [],
+                    img: [],
+                    image: [],
+                    use: [],
+                },
+            },
+        }),
+    ],
+    css: {
+        preprocessorOptions: {
+            scss: {
+                api: 'modern-compiler',
+                importers: [
+                    {
+                        canonicalize(url, context) {
+                            if (url.startsWith('pkg:')) {
+                                return pathToFileURL(require.resolve(url.replace('pkg:', '')));
+                            }
+                            // Обработка относительных путей внутри pkg:
+                            if (context.containingUrl?.href.includes('node_modules')) {
+                                const basePath = path.dirname(fileURLToPath(context.containingUrl));
+                                const resolvedPath = path.resolve(basePath, url);
+
+                                // Пробуем найти файл с нужным названием (проверка на пустую строку нужна для случаев, когда в URL уже стоит файл с расширением)
+                                const extensions = ['', '.scss'];
+                                for (const ext of extensions) {
+                                    const fullPath = resolvedPath + ext;
+                                    try {
+                                        if (readFileSync(fullPath)) {
+                                            return pathToFileURL(fullPath);
+                                        }
+                                    } catch {} // eslint-disable-line no-empty
+                                }
+
+                                // Если не нашли файл с нужным названием, пробуем найти index
+                                for (const ext of ['.scss']) {
+                                    const indexPath = path.join(resolvedPath, `index${ext}`);
+                                    try {
+                                        if (readFileSync(indexPath)) {
+                                            return pathToFileURL(indexPath);
+                                        }
+                                    } catch {} // eslint-disable-line no-empty
+                                }
+                            }
+                            // eslint-disable-next-line unicorn/no-null
+                            return null;
+                        },
+                        load(canonicalUrl) {
+                            return {
+                                contents: readFileSync(fileURLToPath(canonicalUrl), 'utf8'),
+                                syntax: 'scss',
+                            };
+                        },
+                    },
+                ],
+            },
+        },
+    },
+});