@formixru/b2b-ui 4.6.0 → 4.6.2

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@formixru/b2b-ui",
-    "version": "4.6.0",
+    "version": "4.6.2",
     "type": "module",
     "repository": {
         "type": "git",

package/src/components/sidebar/index.js

@@ -1,6 +1,5 @@
 import { cssVar } from '@advdominion/css-var';
 
-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';
@@ -16,6 +15,18 @@ for (const $b of $sidebars) {
     }
 }
 
+const getSidebarWidth = ($b) => {
+    const width = $b.querySelector('.sidebar__wrapper').offsetWidth + $b.querySelector('.sidebar__aside').offsetWidth;
+    return $b.classList.contains('sidebar_left') ? width * -1 : width;
+};
+
+const slideSidebar = ($b, frames, options) =>
+    Promise.all(
+        ['aside', 'wrapper'].map(
+            (elementName) => $b.querySelector(`.sidebar__${elementName}`).animate(frames, options).finished,
+        ),
+    );
+
 export const show = async ($b, showBackdrop = 'before') => {
     if (!$b?.hidden) {
         return;
@@ -32,16 +43,10 @@ export const show = async ($b, showBackdrop = 'before') => {
     }
     $b.hidden = false;
 
-    let width = mm('tablet-landscape-up')
-        ? $b.offsetWidth + $b.querySelector('.sidebar__aside').offsetWidth
-        : $b.offsetWidth;
-    if ($b.classList.contains('sidebar_left')) {
-        width = width * -1;
-    }
-    await $b.animate([{ transform: `translateX(${width}px)` }, { transform: 'translateX(0px)' }], {
+    await slideSidebar($b, [{ transform: `translateX(${getSidebarWidth($b)}px)` }, { transform: 'translateX(0px)' }], {
         duration: cssVar('--duration-enter-m'),
         easing: cssVar('--easing-deceleration'),
-    }).finished;
+    });
 
     if (showBackdrop === 'after') {
         $b.classList.add('sidebar_backdrop');
@@ -62,16 +67,10 @@ export const hide = async ($b) => {
 
     $b.classList.remove('sidebar_backdrop');
 
-    let width = mm('tablet-landscape-up')
-        ? $b.offsetWidth + $b.querySelector('.sidebar__aside').offsetWidth
-        : $b.offsetWidth;
-    if ($b.classList.contains('sidebar_left')) {
-        width = width * -1;
-    }
-    await $b.animate([{ transform: 'translateX(0px)' }, { transform: `translateX(${width}px)` }], {
+    await slideSidebar($b, [{ transform: 'translateX(0px)' }, { transform: `translateX(${getSidebarWidth($b)}px)` }], {
         duration: cssVar('--duration-leave-m'),
         easing: cssVar('--easing-acceleration'),
-    }).finished;
+    });
 
     $b.hidden = true;
     if ($b.id !== 'settings-generator') {

package/src/components/sidebar/index.scss

@@ -1,6 +1,7 @@
 @use '../../variables' as *;
 
 $b: '.sidebar';
+$sidebar-button-size: 56px;
 
 #{$b} {
     display: flex;
@@ -27,17 +28,13 @@ $b: '.sidebar';
     }
 
     &_backdrop {
-        @media (--tablet-landscape-up) {
-            background-color: $sidebar-backdrop-color;
-        }
+        background-color: $sidebar-backdrop-color;
 
         // Т. к. .loader исчезает постепенно, с таким же эффектом показываем оверлей, чтобы не было мерцания
         body:has(.loader_active) & {
-            @media (--tablet-landscape-up) {
-                transition-duration: var(--duration-leave-m);
-                transition-property: background-color;
-                transition-timing-function: var(--easing-standard);
-            }
+            transition-duration: var(--duration-leave-m);
+            transition-property: background-color;
+            transition-timing-function: var(--easing-standard);
         }
     }
 
@@ -46,7 +43,7 @@ $b: '.sidebar';
         display: flex;
         flex-direction: column;
         position: absolute;
-        right: 100%;
+        right: calc(100% - $sidebar-button-size);
         top: 0;
 
         @media (--tablet-landscape-up) {
@@ -67,7 +64,7 @@ $b: '.sidebar';
 
         #{$b}_left & {
             align-items: flex-start;
-            left: 100%;
+            left: calc(100% - $sidebar-button-size);
             right: auto;
 
             @media (--tablet-landscape-up) {
@@ -93,12 +90,12 @@ $b: '.sidebar';
         background-color: $sidebar-disabled-button-bg;
         color: $sidebar-disabled-button-color;
         display: flex;
-        height: 4px * 14;
+        height: $sidebar-button-size;
         justify-content: center;
         transition-duration: var(--duration-micro-s);
         transition-property: background-color, color;
         transition-timing-function: var(--easing-standard);
-        width: 4px * 14;
+        width: $sidebar-button-size;
 
         #{$b}_catalog & {
             @media (--tablet-landscape-up) {
@@ -136,9 +133,9 @@ $b: '.sidebar';
             color: $sidebar-disabled-button-label-color;
             height: auto;
             justify-content: flex-start;
-            min-height: 4px * 14;
-            min-width: 4px * 28;
-            padding: 4px * 4;
+            min-height: $sidebar-button-size;
+            min-width: 112px;
+            padding: 16px;
             width: 100%;
 
             @include font($sidebar-button-label-font);
@@ -155,7 +152,7 @@ $b: '.sidebar';
 
             #{$b}_catalog & {
                 @media (--tablet-landscape-up) {
-                    min-width: 4px * 56;
+                    min-width: 224px;
                 }
             }
         }
@@ -163,12 +160,12 @@ $b: '.sidebar';
 
     &__button-icon {
         fill: currentcolor;
-        height: 4px * 6;
-        width: 4px * 6;
+        height: 24px;
+        width: 24px;
 
         [data-sidebar-close] & {
-            height: 4px * 5;
-            width: 4px * 5;
+            height: 20px;
+            width: 20px;
         }
     }
 
@@ -185,7 +182,7 @@ $b: '.sidebar';
         height: 100%;
         overflow: auto;
         -webkit-overflow-scrolling: touch;
-        width: calc(100% - 56px);
+        width: calc(100% - $sidebar-button-size);
 
         @media (--tablet-landscape-up) {
             width: 320px;
@@ -205,7 +202,7 @@ $b: '.sidebar';
 
         #{$b}_catalog & {
             @media (--tablet-landscape-up) {
-                height: calc(100% - (4px * 14 + 1px));
+                height: calc(100% - (56px + 1px));
             }
         }
     }
@@ -223,21 +220,21 @@ $b: '.sidebar';
         flex-direction: column;
         flex-shrink: 0;
         justify-content: center;
-        margin-bottom: 4px * 4;
-        min-height: 4px * 14;
-        padding-bottom: 4px * 4;
-        padding-left: 4px * 4;
-        padding-right: 4px * 4;
-        padding-top: 4px * 4 + 1px;
+        margin-bottom: 16px;
+        min-height: 56px;
+        padding-bottom: 16px;
+        padding-left: 16px;
+        padding-right: 16px;
+        padding-top: 16px + 1px;
 
         #{$b}_catalog & {
             @media (--tablet-landscape-up) {
                 background-color: $sidebar-catalog-header-bg;
-                left: -4px * 56;
+                left: -224px;
                 margin-bottom: 0;
-                padding-left: 4px * 2;
+                padding-left: 8px;
                 position: relative;
-                width: calc(100% + 4px * 56);
+                width: calc(100% + 224px);
                 z-index: 1;
             }
         }
@@ -248,27 +245,27 @@ $b: '.sidebar';
         border: $sidebar-header-icon-border-width solid $sidebar-header-icon-border-color;
         border-radius: 50%;
         display: flex;
-        height: 4px * 6;
+        height: 24px;
         justify-content: center;
         position: relative;
-        width: 4px * 6;
+        width: 24px;
 
         @media (--tablet-landscape-up) {
             background-color: $sidebar-header-icon-bg;
             border-style: none;
-            height: 4px * 12;
-            width: 4px * 12;
+            height: 48px;
+            width: 48px;
         }
     }
 
     &__header-icon {
         fill: $sidebar-header-icon-color;
-        height: 4px * 4;
-        width: 4px * 4;
+        height: 16px;
+        width: 16px;
 
         @media (--tablet-landscape-up) {
-            height: 4px * 6;
-            width: 4px * 6;
+            height: 24px;
+            width: 24px;
         }
     }
 
@@ -279,7 +276,7 @@ $b: '.sidebar';
         @include font($sidebar-header-title-font);
 
         @media (--tablet-landscape-up) {
-            margin-top: 4px * 2;
+            margin-top: 8px;
         }
     }
 
@@ -295,7 +292,7 @@ $b: '.sidebar';
         }
 
         &:not(:first-child) {
-            margin-top: 4px * 2;
+            margin-top: 8px;
         }
 
         &:first-child:last-child {
@@ -315,7 +312,7 @@ $b: '.sidebar';
         }
 
         &:not(:first-child) {
-            margin-top: 4px * 2;
+            margin-top: 8px;
         }
 
         &:first-child:last-child {
@@ -327,18 +324,18 @@ $b: '.sidebar';
             text-align: left;
 
             @media (--tablet-landscape-up) {
-                margin-left: 4px * 2;
-                margin-right: 4px * 2;
+                margin-left: 8px;
+                margin-right: 8px;
             }
         }
     }
 
     &__header-link {
-        margin-top: 4px * 2;
+        margin-top: 8px;
 
         @media (--tablet-landscape-up) {
             flex-shrink: 0;
-            margin-left: 4px * 2;
+            margin-left: 8px;
             margin-top: 0;
         }
     }
@@ -346,33 +343,33 @@ $b: '.sidebar';
     &__sub-title {
         background-color: $sidebar-sub-title-bg;
         color: $sidebar-sub-title-color;
-        margin-bottom: 4px * 4;
-        padding: 4px * 2 4px * 4;
+        margin-bottom: 16px;
+        padding: 8px 16px;
         text-align: center;
 
         @include font($sidebar-sub-title-font);
 
         #{$b}__header + & {
-            margin-top: -4px * 4;
+            margin-top: -16px;
 
             @media (--tablet-landscape-up) {
-                margin-top: -4px * 8;
+                margin-top: -32px;
             }
         }
     }
 
     &__specs {
         &:last-child {
-            margin-bottom: 4px * 6;
+            margin-bottom: 24px;
         }
     }
 
     &__action-list {
-        margin-top: 4px * 6;
-        padding: 0 4px * 4;
+        margin-top: 24px;
+        padding: 0 16px;
 
         &:last-child {
-            margin-bottom: 4px * 6;
+            margin-bottom: 24px;
         }
     }
 
@@ -380,13 +377,13 @@ $b: '.sidebar';
         width: 100%;
 
         &:not(:first-child) {
-            margin-top: 4px * 4;
+            margin-top: 16px;
         }
     }
 
     &__descr {
         color: $sidebar-descr-color;
-        margin-top: 4px * 2;
+        margin-top: 8px;
         width: 100%;
 
         @include font($sidebar-descr-font);
@@ -401,8 +398,8 @@ $b: '.sidebar';
         > svg {
             display: block;
             fill: $sidebar-descr-icon-color;
-            height: 4px * 4;
-            width: 4px * 4;
+            height: 16px;
+            width: 16px;
         }
     }
 
@@ -412,7 +409,7 @@ $b: '.sidebar';
 
     &__footer {
         flex-shrink: 0;
-        margin-top: 4px * 4;
+        margin-top: 16px;
     }
 
     &__toggle-wrapper {
@@ -423,13 +420,13 @@ $b: '.sidebar';
     }
 
     &__toggle {
-        margin-bottom: 4px * 2;
-        margin-top: 4px * 4;
+        margin-bottom: 8px;
+        margin-top: 16px;
 
         @media (--tablet-landscape-up) {
             flex-shrink: 0;
             margin-bottom: 0;
-            margin-left: 4px * 4;
+            margin-left: 16px;
             margin-top: 0;
         }
     }

package/src/components/tabs/index.js

@@ -17,25 +17,14 @@ const setLeftWidth = async ($line, $el) => {
     }).finished;
 };
 
-const setActive = ($el, active) => {
-    if ($el.tagName === 'BUTTON') {
-        $el.disabled = active;
-    } else if (active) {
-        $el.dataset.disabled = '';
-    } else {
-        delete $el.dataset.disabled;
-    }
-};
-
 export const setInitLineStyles = ($b) => {
     const $nav = $b.querySelector('.tabs__nav');
     const $items = $nav.querySelectorAll('.tabs__item');
     const $line = $nav.querySelector('.tabs__line');
 
-    const $el =
-        [...$items].find((el) => {
-            return el.tagName === 'BUTTON' ? el.disabled : el.dataset.disabled !== undefined;
-        }) || $items[0];
+    const $el = [...$items].find((el) => {
+        return el.disabled || (el.tagName !== 'BUTTON' && !el.href);
+    });
 
     setLeftWidth($line, $el);
     // Прокручиваем до нужного таба
@@ -58,7 +47,7 @@ const changeTab = ($el) => {
     const index = [...$items].indexOf($el);
 
     for (const [i, $item] of $items.entries()) {
-        setActive($item, i === index);
+        $item.disabled = i === index;
     }
 
     for (const [i, $c] of $content.entries()) {
@@ -89,28 +78,25 @@ export const init = async ($b) => {
     const handleItemClick = async (e) => {
         const $el = e.currentTarget;
         const index = [...$items].indexOf($el);
+        if ($el.tagName === 'BUTTON') {
+            if ($el.dataset.tabsFetch && $content[index].innerHTML.trim() === '') {
+                const { content } = await request({ url: $el.dataset.tabsFetch });
+                // Вставляем полученный HTML
+                $content[index].innerHTML = content;
+                // Переключаем таб
+                changeTab($el);
+            } else {
+                // Переключаем таб
+                changeTab($el);
+            }
 
-        if ($el.tagName === 'A') {
-            e.preventDefault();
-        }
-
-        if ($el.dataset.tabsFetch && $content[index].innerHTML.trim() === '') {
-            const { content } = await request({ url: $el.dataset.tabsFetch });
-            // Вставляем полученный HTML
-            $content[index].innerHTML = content;
-            // Переключаем таб
-            changeTab($el);
-        } else {
-            // Переключаем таб
-            changeTab($el);
-        }
-
-        if ($nav.swiper) {
-            $nav.swiper.slideTo(index);
-        }
+            if ($nav.swiper) {
+                $nav.swiper.slideTo(index);
+            }
 
-        if ($line) {
-            setLeftWidth($line, $el);
+            if ($line) {
+                setLeftWidth($line, $el);
+            }
         }
     };
 

package/src/components/tabs/index.scss

@@ -111,11 +111,6 @@ $b: '.tabs';
         &.swiper-slide {
             width: auto;
         }
-
-        &[data-disabled] {
-            color: $font-color-primary;
-            pointer-events: none;
-        }
     }
 
     &__label {