@formixru/b2b-ui 2.5.0 → 3.0.1

package/README.md

@@ -19,10 +19,10 @@ import ExampleInput from '@formixru/b2b-ui/components/example-input/vue';
 
 При подключении Vue-компонента подключать SCSS не нужно - он подключается автоматически.
 
-## Подключение хелперов
+## Подключение вспомогательных функций
 
 ```js
-import { cssVar } from '@formixru/b2b-ui/helpers/css-var';
+import { cssVar } from '@formixru/b2b-ui/utils/css-var';
 ```
 
 ## Разработка

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@formixru/b2b-ui",
-    "version": "2.5.0",
+    "version": "3.0.1",
     "type": "module",
     "repository": {
         "type": "git",
@@ -8,84 +8,72 @@
     },
     "license": "MIT",
     "browserslist": [
-        "defaults",
-        "not OperaMini all"
+        "defaults and fully supports es6-module"
     ],
-    "packageManager": "yarn@4.9.3",
+    "packageManager": "yarn@4.12.0",
     "scripts": {
         "_postinstall": "husky",
         "prepack": "yarn pinst --disable",
         "postpack": "yarn pinst --enable",
         "lint:eslint": "yarn eslint --max-warnings 10 \"**/*.{js,vue}\"",
-        "lint:stylelint": "yarn stylelint --max-warnings 10 \"**/*.scss\"",
+        "lint:stylelint": "yarn stylelint --max-warnings 10 \"src/**/*.scss\"",
         "lint:prettier": "yarn prettier --check .",
         "lint": "yarn lint:eslint && yarn lint:stylelint && yarn lint:prettier",
         "dev": "storybook dev -p 3000",
         "build": "storybook build -o www"
     },
     "devDependencies": {
-        "@advdominion/get-scrollbar-width": "^2.0.0",
-        "@advdominion/is": "^1.0.1",
-        "@advdominion/pluralize": "^1.0.1",
-        "@advdominion/tooltip": "^5.0.0",
-        "@eslint/eslintrc": "^3.3.1",
-        "@eslint/js": "^9.33.0",
+        "@advdominion/eslint-config": "^1.1.2",
+        "@advdominion/get-scrollbar-width": "^2.0.1",
+        "@advdominion/pluralize": "^1.0.2",
+        "@advdominion/tooltip": "^6.0.0",
         "@floating-ui/dom": "^1.7.4",
         "@popperjs/core": "^2.11.8",
         "@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.33.0",
-        "eslint-config-prettier": "^10.1.8",
-        "eslint-plugin-simple-import-sort": "^12.1.1",
-        "eslint-plugin-storybook": "9.1.3",
-        "eslint-plugin-unicorn": "^60.0.0",
-        "eslint-plugin-vue": "^10.4.0",
-        "globals": "^16.3.0",
+        "@storybook/addon-designs": "^11.1.1",
+        "@storybook/addon-docs": "^10.2.0",
+        "@storybook/addon-links": "^10.2.0",
+        "@storybook/vue3-vite": "^10.2.0",
+        "@vitejs/plugin-vue": "^6.0.3",
+        "@vueless/storybook-dark-mode": "^10.0.6",
+        "color": "^5.0.3",
+        "dayjs": "^1.11.19",
+        "es-toolkit": "^1.44.0",
+        "eslint": "^9.39.2",
         "husky": "^9.1.7",
         "imask": "^7.6.1",
-        "lint-staged": "^16.1.5",
-        "lodash-es": "^4.17.21",
-        "mime": "^4.0.7",
-        "msw": "^2.10.5",
-        "msw-storybook-addon": "^2.0.5",
+        "lint-staged": "^16.2.7",
+        "mime": "^4.1.0",
+        "msw": "^2.12.7",
+        "msw-storybook-addon": "^2.0.6",
         "nouislider": "^15.8.1",
         "pinst": "^3.0.0",
-        "prettier": "^3.6.2",
+        "postcss": "^8.5.6",
+        "postcss-preset-env": "^11.1.1",
+        "prettier": "^3.8.0",
         "reset-css": "^5.0.2",
-        "sass-embedded": "^1.90.0",
-        "storybook": "^9.1.3",
+        "sass-embedded": "^1.97.2",
+        "storybook": "^10.2.0",
         "stylelint": "^16.23.1",
         "stylelint-config-standard-scss": "^15.0.1",
         "stylelint-config-standard-vue": "^1.0.0",
         "stylelint-order": "^7.0.0",
-        "swiper": "^11.2.10",
+        "swiper": "^12.0.3",
+        "update-browserslist-db": "^1.2.3",
         "v-calendar": "3.0.1",
-        "vite": "^7.1.3",
-        "vue": "^3.5.19",
+        "vite": "^7.3.1",
+        "vue": "^3.5.27",
         "vue-eslint-parser": "^10.2.0",
         "yargs": "^18.0.0"
     },
-    "msw": {
-        "workerDirectory": [
-            ".storybook/static"
-        ]
-    },
     "peerDependencies": {
         "@advdominion/get-scrollbar-width": "^2.0.0",
-        "@advdominion/is": "^1.0.0",
         "@advdominion/pluralize": "^1.0.0",
-        "@advdominion/tooltip": "^5.0.0",
+        "@advdominion/tooltip": "^6.0.0",
         "color": "^5.0.0",
         "dayjs": "^1.0.0",
+        "es-toolkit": "^1.0.0",
         "imask": "^7.0.0",
-        "lodash-es": "^4.0.0",
         "mime": "^4.0.0",
         "nouislider": "^15.0.0",
         "reset-css": "^5.0.0",
@@ -99,5 +87,14 @@
         "./helpers/*": "./src/helpers/*.js",
         "./base": "./src/base.scss",
         "./variables": "./src/variables.scss"
+    },
+    "files": [
+        "src/**/*.scss",
+        "src/**/*.js"
+    ],
+    "msw": {
+        "workerDirectory": [
+            ".storybook/static"
+        ]
     }
 }

package/src/components/action-link/index.scss

@@ -0,0 +1,49 @@
+@use '../../variables' as *;
+@use '../link';
+
+$b: '.action-link';
+
+#{$b} {
+    align-items: center;
+    display: inline-flex;
+    gap: 8px;
+
+    @include font($action-link-font);
+
+    .action-list & {
+        @include font($action-link-action-list-font);
+    }
+
+    &_danger {
+        color: $action-link-danger-color;
+        cursor: pointer;
+        text-decoration: none;
+
+        @include link.transform;
+        @include font($action-link-danger-font);
+
+        &:hover,
+        &:focus-visible {
+            color: $action-link-danger-active-color;
+        }
+    }
+
+    &__icon {
+        flex-shrink: 0;
+        height: 24px;
+        position: relative;
+        top: -1px;
+        width: 24px;
+
+        #{$b}_danger & {
+            fill: $action-link-danger-icon-color;
+
+            @include link.transform(fill);
+        }
+
+        #{$b}_danger:hover &,
+        #{$b}_danger:focus-visible & {
+            fill: $action-link-danger-icon-active-color;
+        }
+    }
+}

package/src/components/action-list/index.scss

@@ -3,36 +3,27 @@
 $b: '.action-list';
 
 #{$b} {
+    color: $action-list-color;
+
     &__item {
     }
 
     &__link {
-        align-items: center;
-        color: $action-list-link-color;
-        display: flex;
-        padding: 4px * 2 4px * 4;
+        padding: 8px 16px;
         width: 100%;
 
         #{$b}__item:first-child:not(:last-child) & {
-            padding-top: 4px * 4;
+            padding-top: 16px;
         }
 
         #{$b}__item:last-child:not(:first-child) & {
-            padding-bottom: 4px * 4;
+            padding-bottom: 16px;
         }
 
         &_separator {
             border-top: $action-list-link-separator-width solid $action-list-link-separator-color;
             margin-top: 4px;
-            padding-top: 4px * 3;
+            padding-top: 12px;
         }
     }
-
-    &__icon {
-        fill: currentcolor;
-        flex-shrink: 0;
-        height: 4px * 6;
-        margin-right: 4px * 2;
-        width: 4px * 6;
-    }
 }

package/src/components/counter/index.scss

@@ -0,0 +1,16 @@
+@use '../../variables' as *;
+
+$b: '.counter';
+
+#{$b} {
+    align-items: center;
+    background-color: $counter-bg;
+    border-radius: $counter-radius;
+    color: $counter-color;
+    display: flex;
+    height: $counter-size;
+    justify-content: center;
+    width: $counter-size;
+
+    @include font($counter-font);
+}

package/src/components/dialog/index.js

@@ -1,7 +1,7 @@
-import _throttle from 'lodash-es/throttle.js';
+import { throttle } from 'es-toolkit';
 
-import { cssVar } from '../../helpers/css-var.js';
-import { mm } from '../../helpers/mm.js';
+import { cssVar } from '../../utils/css-var.js';
+import { mm } from '../../utils/mm.js';
 import { hide as hideLoader } from '../loader/index.js';
 import { disableScroll, enableScroll } from '../overlay/index.js';
 import { initRequestContent, request } from '../request/index.js';
@@ -18,21 +18,13 @@ export const init = ($b) => {
     // Отключаем скролл у body, если при загрузке на странице есть видимое диалоговое окно
     if (!$b.hidden) {
         disableScroll();
-        if (isDialogOverflow($b)) {
-            $b.classList.add('dialog_overflow');
-        } else {
-            $b.classList.remove('dialog_overflow');
-        }
+        $b.classList.toggle('dialog_overflow', isDialogOverflow($b));
     }
     if ($b._OVERFLOW_OBSERVER_) {
         $b._OVERFLOW_OBSERVER_.disconnect();
     }
     $b._OVERFLOW_OBSERVER_ = new MutationObserver(() => {
-        if (isDialogOverflow($b)) {
-            $b.classList.add('dialog_overflow');
-        } else {
-            $b.classList.remove('dialog_overflow');
-        }
+        $b.classList.toggle('dialog_overflow', isDialogOverflow($b));
     });
     $b._OVERFLOW_OBSERVER_.observe($b, {
         childList: true,
@@ -104,9 +96,9 @@ export const get = async (id, url) => {
             const $b = document.querySelector(elementId);
             if ($b) {
                 $b.querySelector('.dialog__container').innerHTML = content;
+                hideLoader();
                 await show($b);
                 initRequestContent($b);
-                hideLoader();
             } else {
                 console.error(`Диалоговое окно с id ${elementId} не найдено`);
             }
@@ -123,16 +115,12 @@ const resizeWindowListener = () => {
         prevWindowHeight = window.innerHeight;
         for (const $el of document.querySelectorAll('.dialog')) {
             if (!$el.hidden) {
-                if (isDialogOverflow($el)) {
-                    $el.classList.add('dialog_overflow');
-                } else {
-                    $el.classList.remove('dialog_overflow');
-                }
+                $el.classList.toggle('dialog_overflow', isDialogOverflow($el));
             }
         }
     }
 };
-window.addEventListener('resize', _throttle(resizeWindowListener, 100));
+window.addEventListener('resize', throttle(resizeWindowListener, 100));
 
 let $pointerDownTarget;
 document.body.addEventListener('pointerdown', (event) => {

package/src/components/dialog/index.scss

@@ -22,6 +22,10 @@ $b: '.dialog';
         padding: 4px * 10 0;
     }
 
+    body:has(.loader_active) & {
+        background-color: transparent;
+    }
+
     &_overflow {
         @media (--tablet-landscape-up) {
             justify-content: flex-start;
@@ -50,6 +54,15 @@ $b: '.dialog';
             min-height: auto;
             padding: 4px * 10;
             position: relative;
+            transition-duration: var(--duration-leave-s);
+            transition-property: opacity;
+            transition-timing-function: var(--easing-acceleration);
+        }
+
+        body:has(.loader_active) & {
+            @media (--tablet-landscape-up) {
+                opacity: 0.5;
+            }
         }
 
         #{$b}_overflow & {

package/src/components/form/index.js

@@ -1,42 +1,9 @@
 /* globals SmartCaptcha, SMART_CAPTCHA_KEY */
 
-import { getSmartCaptcha } from '../../helpers/get-smart-captcha.js';
-import { scrollTo } from '../../helpers/scroll-to.js';
+import { getSmartCaptcha } from '../../utils/get-smart-captcha.js';
+import { scrollTo } from '../../utils/scroll-to.js';
 import { initRequestContent, request } from '../request/index.js';
 
-export const send = async ($b, url, method, 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 }));
-    }
-    if (content) {
-        const $dialog = $b.closest('.dialog');
-        if ($dialog) {
-            $dialog.querySelector('.dialog__container').innerHTML = content;
-            initRequestContent($dialog);
-            setTimeout(() => {
-                scrollToError($dialog);
-            });
-        } else {
-            const $parent = $b.parentElement;
-            $b.outerHTML = content;
-            const $form = $parent.querySelector('.form');
-            if ($form) {
-                init($form);
-                initRequestContent($form);
-                setTimeout(() => {
-                    scrollToError($form);
-                });
-            }
-        }
-    }
-};
-
 const scrollToError = ($b = document.body) => {
     const $error = [...$b.querySelectorAll('.form__input-error, .form__submit-error')].find(($el) => {
         const rect = $el.getBoundingClientRect();
@@ -96,6 +63,39 @@ export const init = ($b) => {
     }
 };
 
+export const send = async ($b, url, method, 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 }));
+    }
+    if (content) {
+        const $dialog = $b.closest('.dialog');
+        if ($dialog) {
+            $dialog.querySelector('.dialog__container').innerHTML = content;
+            initRequestContent($dialog);
+            setTimeout(() => {
+                scrollToError($dialog);
+            });
+        } else {
+            const $parent = $b.parentElement;
+            $b.outerHTML = content;
+            const $form = $parent.querySelector('.form');
+            if ($form) {
+                init($form);
+                initRequestContent($form);
+                setTimeout(() => {
+                    scrollToError($form);
+                });
+            }
+        }
+    }
+};
+
 document.body.addEventListener('submit', (event) => {
     const { target } = event;
     const $b = target.closest('.form');

package/src/components/overlay/index.js

@@ -1,6 +1,6 @@
 import { getScrollbarWidth } from '@advdominion/get-scrollbar-width';
 
-import { mm } from '../../helpers/mm.js';
+import { mm } from '../../utils/mm.js';
 
 export const show = () => {
     if (!document.querySelector('.overlay')) {

package/src/components/overlay/index.scss

@@ -26,4 +26,8 @@ $b: '.overlay';
         transition-duration: var(--duration-enter-s);
         transition-timing-function: var(--easing-deceleration);
     }
+
+    body:has(.loader_active) & {
+        background-color: transparent;
+    }
 }

package/src/components/request/index.js

@@ -1,8 +1,8 @@
 /* globals BX */
 
-import { is } from '@advdominion/is';
+import { isString } from 'es-toolkit';
 
-import { errorHandler } from '../../helpers/error-handler.js';
+import { errorHandler } from '../../utils/error-handler.js';
 import { hide as hideDialog, show as showDialog } from '../dialog/index.js';
 import { clearLoaderTimeout, hide as hideLoader, show as showLoader } from '../loader/index.js';
 import { hide as hideSidebar, show as showSidebar } from '../sidebar/index.js';
@@ -31,7 +31,7 @@ export const request = async ({
     showLoaderDelay,
     hideLoaderOnSuccess = true,
 }) => {
-    url = new URL(url, location.origin);
+    const reqUrl = new URL(url, location.origin);
     const options = {
         method,
         headers: {
@@ -43,16 +43,16 @@ export const request = async ({
         let entries;
         if (data instanceof FormData) {
             entries = data.entries();
-        } else if (is(data, 'String')) {
+        } else if (isString(data)) {
             entries = Object.entries(JSON.parse(data));
         } else {
             entries = Object.entries(data);
         }
         for (const [name, value] of entries) {
-            url.searchParams.append(name, value);
+            reqUrl.searchParams.append(name, value);
         }
     } else {
-        if (data instanceof FormData || is(data, 'String')) {
+        if (data instanceof FormData || isString(data)) {
             options.body = data;
         } else {
             options.body = JSON.stringify(data);
@@ -63,7 +63,7 @@ export const request = async ({
         showLoader(showLoaderDelay);
     }
     try {
-        const response = await fetch(url, options);
+        const response = await fetch(reqUrl, options);
         if (!response.ok) {
             throw response;
         }
@@ -77,7 +77,7 @@ export const request = async ({
             data = { content: raw };
         }
 
-        if (is(data.redirect, 'String')) {
+        if (isString(data.redirect)) {
             if (data.redirect) {
                 location.assign(data.redirect);
                 if (data.redirect.startsWith('tg:')) {

package/src/components/sidebar/index.js

@@ -1,5 +1,5 @@
-import { cssVar } from '../../helpers/css-var.js';
-import { mm } from '../../helpers/mm.js';
+import { cssVar } from '../../utils/css-var.js';
+import { mm } from '../../utils/mm.js';
 import { hide as hideLoader } from '../loader/index.js';
 import { disableScroll, enableScroll, hide as hideOverlay, show as showOverlay } from '../overlay/index.js';
 import { initRequestContent, request } from '../request/index.js';
@@ -69,9 +69,9 @@ export const get = async (id, url, showLoaderDelay) => {
             const $b = document.querySelector(elementId);
             if ($b) {
                 $b.innerHTML = content;
+                hideLoader();
                 await show($b);
                 initRequestContent($b);
-                hideLoader();
             } else {
                 console.error(`Сайдбар с id ${elementId} не найден`);
             }

package/src/components/sidebar/index.scss

@@ -8,6 +8,9 @@ $b: '.sidebar';
     position: fixed;
     right: 0;
     top: 0;
+    transition-duration: var(--duration-leave-s);
+    transition-property: opacity;
+    transition-timing-function: var(--easing-acceleration);
     width: calc(100% - 56px);
     z-index: 910;
 
@@ -16,6 +19,10 @@ $b: '.sidebar';
         width: 320px;
     }
 
+    body:has(.loader_active) & {
+        opacity: 0.5;
+    }
+
     &_left {
         left: 0;
         right: auto;

package/src/components/tabs/index.js

@@ -1,9 +1,9 @@
 /* globals BX */
 
-import { cssVar } from '../../helpers/css-var.js';
-import { errorHandler } from '../../helpers/error-handler.js';
-import { isInViewport } from '../../helpers/is-in-viewport.js';
-import { scrollTo } from '../../helpers/scroll-to.js';
+import { cssVar } from '../../utils/css-var.js';
+import { errorHandler } from '../../utils/error-handler.js';
+import { isInViewport } from '../../utils/is-in-viewport.js';
+import { scrollTo } from '../../utils/scroll-to.js';
 import { hide as hideLoader, show as showLoader } from '../loader/index.js';
 
 const setLeftWidth = async ($line, $el) => {

package/src/components/tooltip/index.js

@@ -1,7 +1,7 @@
 /* globals BX */
 
-import { cssVar } from '../../helpers/css-var.js';
-import { errorHandler } from '../../helpers/error-handler.js';
+import { cssVar } from '../../utils/css-var.js';
+import { errorHandler } from '../../utils/error-handler.js';
 
 export const init = async ($b) => {
     const { createTooltip } = await import('@advdominion/tooltip');
@@ -15,7 +15,8 @@ export const init = async ($b) => {
     return new Promise((resolve) => {
         if ($b._tooltip) {
             $b._tooltip.setContent(content);
-            return resolve();
+            resolve();
+            return;
         }
 
         const tooltipFetch = $b.dataset.tooltipFetch;

package/src/{helpers → utils}/error-handler.js

@@ -1,4 +1,4 @@
-import { is } from '@advdominion/is';
+import { isError } from 'es-toolkit';
 
 import { show as showDialog } from '../components/dialog/index.js';
 
@@ -26,9 +26,9 @@ export const errorHandler = async (error) => {
     }
     const $dialog = document.querySelector('#error-handler');
     let content = '<p>Не удаётся выполнить действие. Перезагрузите страницу или попробуйте позже</p>';
-    if (is(error, 'Error')) {
+    if (isError(error)) {
         content += `<pre>${error.toString()}</pre>`;
-    } else if (is(error, 'Response')) {
+    } else if (error instanceof Response) {
         content = `<pre>${JSON.stringify(
             {
                 url: error.url,

package/src/{helpers → utils}/is-in-viewport.js

@@ -1,6 +1,6 @@
-export const isInViewport = ($el, offset = {}, partialVisibility = false) => {
+export const isInViewport = ($el, initOffset = {}, partialVisibility = false) => {
     const rect = $el.getBoundingClientRect();
-    offset = Object.assign({ top: 0, left: 0, bottom: 0, right: 0 }, offset);
+    const offset = Object.assign({ top: 0, left: 0, bottom: 0, right: 0 }, initOffset);
 
     if (partialVisibility) {
         return (

package/src/{helpers → utils}/mm.js

@@ -26,8 +26,8 @@ export const deviceBreakpoint = (device, returnDeviceIndex = false) => {
     return breakpoint;
 };
 
-export const mm = (query) => {
-    query = query.split('-');
+export const mm = (queryString) => {
+    const query = queryString.split('-');
     const device = query.length > 2 ? `${query[0]}-${query[1]}` : query[0];
     const condition = query.length > 2 ? query[2] : query[1];
     const { breakpoint, deviceIndex } = deviceBreakpoint(device, true);