@formixru/b2b-ui 3.0.6 → 3.2.0

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@formixru/b2b-ui",
-    "version": "3.0.6",
+    "version": "3.2.0",
     "type": "module",
     "repository": {
         "type": "git",
@@ -26,6 +26,7 @@
         "@advdominion/eslint-config": "^1.1.2",
         "@advdominion/get-scrollbar-width": "^2.0.1",
         "@advdominion/pluralize": "^1.0.2",
+        "@advdominion/scroll-to": "^1.0.0",
         "@advdominion/tooltip": "^6.0.0",
         "@floating-ui/dom": "^1.7.4",
         "@popperjs/core": "^2.11.8",
@@ -70,6 +71,7 @@
     "peerDependencies": {
         "@advdominion/get-scrollbar-width": "^2.0.0",
         "@advdominion/pluralize": "^1.0.0",
+        "@advdominion/scroll-to": "^1.0.0",
         "@advdominion/tooltip": "^6.0.0",
         "color": "^5.0.0",
         "dayjs": "^1.0.0",

package/src/components/button/index.scss

@@ -193,8 +193,8 @@ $b: '.button';
     }
 
     &_narrow {
-        min-width: 4px * 18;
-        padding: 0 4px * 4;
+        min-width: 72px;
+        padding: 0 16px;
     }
 
     &_small {
@@ -211,6 +211,10 @@ $b: '.button';
 
     &_only-icon {
         @include only-icon;
+
+        &#{$b}_small {
+            @include only-icon($button-small-height);
+        }
     }
 
     &__icon {

package/src/components/form/index.js

@@ -1,7 +1,8 @@
 /* globals SmartCaptcha, SMART_CAPTCHA_KEY */
 
+import { scrollTo } from '@advdominion/scroll-to';
+
 import { getSmartCaptcha } from '../../utils/get-smart-captcha.js';
-import { scrollTo } from '../../utils/scroll-to.js';
 import { initRequestContent, request } from '../request/index.js';
 
 const scrollToError = ($b = document.body) => {

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

@@ -123,7 +123,7 @@ $b: '.quantity-input';
     }
 
     &__input {
-        appearance: none;
+        appearance: textfield;
         background-color: $quantity-input-bg;
         border-bottom: $quantity-input-border-width solid $quantity-input-border-color;
         border-left-style: none;
@@ -142,15 +142,9 @@ $b: '.quantity-input';
 
         @include font($quantity-input-font);
 
-        @media (--tablet-landscape-up) {
-            appearance: textfield;
-        }
-
         &::-webkit-inner-spin-button,
         &::-webkit-outer-spin-button {
-            @media (--tablet-landscape-up) {
-                appearance: none;
-            }
+            appearance: none;
         }
 
         &:disabled {

package/src/components/quantity-input/index.vue

@@ -14,6 +14,7 @@
         <input
             class="quantity-input__input"
             type="number"
+            :inputmode="digits ? 'decimal' : 'numeric'"
             :name="name"
             :value="quantity"
             :disabled="(disabled && !focus) || auth.length > 0"

package/src/components/sidebar/index.scss

@@ -55,7 +55,6 @@ $b: '.sidebar';
         display: flex;
         height: 4px * 14;
         justify-content: center;
-        position: relative;
         transition-duration: var(--duration-micro-s);
         transition-property: background-color, color;
         transition-timing-function: var(--easing-standard);
@@ -81,25 +80,6 @@ $b: '.sidebar';
             }
         }
 
-        &[data-notification] {
-            &::before {
-                align-items: center;
-                background-color: $sidebar-notification-bg;
-                border-radius: 50%;
-                color: $sidebar-notification-color;
-                content: attr(data-notification);
-                display: flex;
-                height: 4px * 4;
-                justify-content: center;
-                position: absolute;
-                right: 4px * 3;
-                top: 4px * 3;
-                width: 4px * 4;
-
-                @include font($sidebar-notification-font);
-            }
-        }
-
         &[data-sidebar-close] {
             background-color: $sidebar-close-bg;
             color: $sidebar-close-color;

package/src/components/slider-nav/index.scss

@@ -10,21 +10,21 @@ $b: '.slider-nav';
         border-radius: $slider-nav-button-radius;
         cursor: pointer;
         display: flex;
-        height: 4px * 8;
+        height: 32px;
         justify-content: center;
         opacity: 1;
         transition-duration: var(--duration-micro-s);
-        transition-property: border-color, color, opacity;
+        transition-property: background-color, border-color, color, opacity;
         transition-timing-function: var(--easing-standard);
-        width: 4px * 8;
+        width: 32px;
 
         @media (--tablet-portrait-down) {
             display: none;
         }
 
         @media (--tablet-landscape-up) {
-            height: 4px * 12;
-            width: 4px * 12;
+            height: 48px;
+            width: 48px;
         }
 
         &_disabled {
@@ -65,16 +65,16 @@ $b: '.slider-nav';
 
     &__icon {
         fill: currentcolor;
-        height: 4px * 4;
-        width: 4px * 4;
+        height: 16px;
+        width: 16px;
 
         @media (--tablet-landscape-up) {
-            height: 4px * 6;
-            width: 4px * 6;
+            height: 24px;
+            width: 24px;
         }
 
         #{$b}__button_prev & {
-            transform: translateX(-2px);
+            transform: translateX(-1px);
         }
 
         #{$b}__button_next & {

package/src/components/tabs/index.js

@@ -1,9 +1,10 @@
 /* globals BX */
 
+import { scrollTo } from '@advdominion/scroll-to';
+
 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) => {
@@ -21,18 +22,16 @@ const setLeftWidth = async ($line, $el) => {
 
 export const setInitLineStyles = ($b) => {
     const $nav = $b.querySelector('.tabs__nav');
-    const $item = $nav.querySelectorAll('.tabs__item');
+    const $items = $nav.querySelectorAll('.tabs__item');
     const $line = $nav.querySelector('.tabs__line');
 
-    const $el = [...$item].find((el) => {
+    const $el = [...$items].find((el) => {
         return el.disabled || (el.tagName !== 'BUTTON' && !el.href);
     });
 
     setLeftWidth($line, $el);
     // Прокручиваем до нужного таба
-    if ($nav.swiper) {
-        $nav.swiper.slideTo([...$item].indexOf($el));
-    }
+    $nav.swiper?.slideTo([...$items].indexOf($el));
 };
 
 const initTabsContent = ($b) => {
@@ -46,14 +45,14 @@ const initTabsContent = ($b) => {
 export const init = async ($b) => {
     const $nav = $b.querySelector('.tabs__nav');
     const $list = $nav.querySelector('.tabs__list');
-    const $item = $nav.querySelectorAll('.tabs__item');
+    const $items = $nav.querySelectorAll('.tabs__item');
     const $line = $nav.querySelector('.tabs__line');
     const $content = $b.querySelectorAll('.tabs__content');
 
     // Переключаем табы и меняем стили для линии
     const handleItemClick = async (e) => {
         const $el = e.currentTarget;
-        const index = [...$item].indexOf($el);
+        const index = [...$items].indexOf($el);
         if ($el.tagName === 'BUTTON') {
             if ($el.dataset.tabsFetch && $content[index].innerHTML.trim() === '') {
                 showLoader();
@@ -73,7 +72,7 @@ export const init = async ($b) => {
                     // Вставляем полученный HTML
                     $content[index].innerHTML = data;
                     // Переключаем таб
-                    for (const i of $item) i.disabled = false;
+                    for (const i of $items) i.disabled = false;
                     $el.disabled = true;
                     for (const [i, c] of $content.entries()) {
                         if (i === index) {
@@ -102,7 +101,7 @@ export const init = async ($b) => {
                 }
             } else {
                 // Переключаем таб
-                for (const i of $item) i.disabled = false;
+                for (const i of $items) i.disabled = false;
                 $el.disabled = true;
                 for (const [i, c] of $content.entries()) {
                     if (i === index) {
@@ -135,14 +134,14 @@ export const init = async ($b) => {
 
     if ($nav.swiper) {
         $nav.swiper.destroy();
-        for (const i of $item) i.removeEventListener('click', handleItemClick);
+        for (const i of $items) i.removeEventListener('click', handleItemClick);
     }
 
     const { default: Swiper } = await import('swiper');
 
     $nav.classList.add('swiper');
     $list.classList.add('swiper-wrapper');
-    for (const i of $item) i.classList.add('swiper-slide');
+    for (const i of $items) i.classList.add('swiper-slide');
 
     new Swiper($nav, {
         speed: cssVar('--duration-effect-s'),
@@ -150,6 +149,7 @@ export const init = async ($b) => {
         freeMode: true,
         on: {
             init() {
+                setInitLineStyles($b); // Устанавливаем стили для линии при загрузке страницы
                 if (!this.isBeginning) {
                     $nav.classList.toggle('tabs__nav_shadow-start', true);
                 }
@@ -168,14 +168,7 @@ export const init = async ($b) => {
         },
     });
 
-    // Устанавливаем стили для линии при загрузке страницы
-    if ($line) {
-        setTimeout(() => {
-            setInitLineStyles($b);
-        });
-    }
-
-    for (const i of $item) i.addEventListener('click', handleItemClick);
+    for (const i of $items) i.addEventListener('click', handleItemClick);
 };
 
 document.body.addEventListener('click', async (e) => {

package/src/components/warning-message/index.scss

@@ -7,6 +7,7 @@ $b: '.warning-message';
     background-color: $warning-message-bg;
     border-radius: $warning-message-radius;
     box-shadow: $warning-message-shadow;
+    color: $warning-message-color;
     display: flex;
     padding: 16px 16px 24px;
 
@@ -26,34 +27,43 @@ $b: '.warning-message';
     }
 
     &_success {
+        color: $warning-message-success-color;
     }
 
     &_info {
+        color: $warning-message-info-color;
     }
 
     &_light-info {
+        color: $warning-message-light-info-color;
     }
 
     &_error {
+        color: $warning-message-error-color;
     }
 
     &_solid {
-        background-color: $warning-message-color;
+        background-color: $warning-message-solid-bg;
+        color: $warning-message-solid-color;
 
         &#{$b}_success {
-            background-color: $warning-message-success-color;
+            background-color: $warning-message-solid-success-bg;
+            color: $warning-message-solid-success-color;
         }
 
         &#{$b}_info {
-            background-color: $warning-message-info-color;
+            background-color: $warning-message-solid-info-bg;
+            color: $warning-message-solid-info-color;
         }
 
         &#{$b}_light-info {
-            background-color: $warning-message-light-info-color;
+            background-color: $warning-message-solid-light-info-bg;
+            color: $warning-message-solid-light-info-color;
         }
 
         &#{$b}_error {
-            background-color: $warning-message-error-color;
+            background-color: $warning-message-solid-error-bg;
+            color: $warning-message-solid-error-color;
         }
     }
 
@@ -138,49 +148,11 @@ $b: '.warning-message';
     }
 
     &__title {
-        color: $warning-message-color;
-
         @include font($warning-message-title-font);
 
         #{$b}_small & {
             @include font($warning-message-small-title-font);
         }
-
-        #{$b}_solid & {
-            color: $warning-message-solid-color;
-        }
-
-        #{$b}_success & {
-            color: $warning-message-success-color;
-        }
-
-        #{$b}_solid#{$b}_success & {
-            color: $warning-message-solid-success-color;
-        }
-
-        #{$b}_info & {
-            color: $warning-message-info-color;
-        }
-
-        #{$b}_solid#{$b}_info & {
-            color: $warning-message-solid-info-color;
-        }
-
-        #{$b}_light-info & {
-            color: $warning-message-light-info-color;
-        }
-
-        #{$b}_solid#{$b}_light-info & {
-            color: $warning-message-solid-light-info-color;
-        }
-
-        #{$b}_error & {
-            color: $warning-message-error-color;
-        }
-
-        #{$b}_solid#{$b}_error & {
-            color: $warning-message-solid-error-color;
-        }
     }
 
     &__descr {
@@ -197,23 +169,7 @@ $b: '.warning-message';
         }
 
         #{$b}_solid & {
-            color: $warning-message-solid-descr-color;
-        }
-
-        #{$b}_solid#{$b}_success & {
-            color: $warning-message-solid-success-descr-color;
-        }
-
-        #{$b}_solid#{$b}_info & {
-            color: $warning-message-solid-info-descr-color;
-        }
-
-        #{$b}_solid#{$b}_light-info & {
-            color: $warning-message-solid-light-info-descr-color;
-        }
-
-        #{$b}_solid#{$b}_error & {
-            color: $warning-message-solid-error-descr-color;
+            color: inherit;
         }
     }
 

package/src/components/warning-message/index.vue

@@ -84,7 +84,8 @@ const icon = computed(() => {
             icon = 'check';
             break;
         }
-        case 'info': {
+        case 'info':
+        case 'light-info': {
             icon = 'info';
             break;
         }

package/src/utils/error-handler.js

@@ -42,15 +42,11 @@ export const errorHandler = async (error) => {
     }
     const $descr = $dialog.querySelector('.dialog__descr');
     $descr.innerHTML = content;
-    $descr.style = `
-        overflow: auto;
-    `;
+    $descr.style.overflow = 'auto';
     $dialog.addEventListener(
         'dialog-hidden',
         () => {
-            $descr.style = `
-                overflow: '';
-            `;
+            $descr.style.overflow = '';
         },
         {
             once: true,

package/src/variables.scss

@@ -939,10 +939,6 @@ $sidebar-active-button-label-color: $sidebar-active-button-color !default;
 $sidebar-close-bg: $sidebar-button-bg !default;
 $sidebar-close-color: $color-grey-20 !default;
 
-$sidebar-notification-bg: $color-error !default;
-$sidebar-notification-color: $color-white !default;
-$sidebar-notification-font: ('font-weight': bold, 'font-size': $font-size-3xs, 'line-height': 1) !default;
-
 $sidebar-header-separator-color: autocolor(('light': $color-grey-alpha-80, 'dark': $color-grey-alpha-i-90), $sidebar-bg) !default;
 $sidebar-header-separator-width: 1px !default;
 $sidebar-header-icon-border-color: $color-primary !default;
@@ -1029,15 +1025,20 @@ $warning-message-color: $color-warning !default;
 
 $warning-message-small-shadow: $shadow-s !default;
 
-$warning-message-solid-color: $font-color-inverted !default;
-
 $warning-message-success-color: $color-success !default;
-$warning-message-solid-success-color: $warning-message-solid-color !default;
 $warning-message-info-color: $color-primary !default;
+$warning-message-light-info-color: $color-primary-70 !default;
+$warning-message-error-color: $color-error !default;
+
+$warning-message-solid-bg: $warning-message-color !default;
+$warning-message-solid-color: $font-color-inverted !default;
+$warning-message-solid-success-bg: $warning-message-success-color !default;
+$warning-message-solid-success-color: $warning-message-solid-color !default;
+$warning-message-solid-info-bg: $warning-message-info-color !default;
 $warning-message-solid-info-color: $warning-message-solid-color !default;
-$warning-message-light-info-color: $color-primary-80 !default;
+$warning-message-solid-light-info-bg: $color-primary-80 !default;
 $warning-message-solid-light-info-color: $font-color-secondary !default;
-$warning-message-error-color: $color-error !default;
+$warning-message-solid-error-bg: $warning-message-error-color !default;
 $warning-message-solid-error-color: $warning-message-solid-color !default;
 
 $warning-message-title-font: ('font-weight': bold, 'font-size': $font-size-l, 'line-height': $line-height-s) !default;
@@ -1047,22 +1048,17 @@ $warning-message-descr-font: ('font-size': $font-size, 'line-height': $line-heig
 $warning-message-small-descr-font: ('font-size': $font-size-xs, 'line-height': $line-height) !default;
 
 $warning-message-descr-color: $font-color-secondary !default;
-$warning-message-solid-descr-color: $warning-message-solid-color !default;
-$warning-message-solid-success-descr-color: $warning-message-solid-success-color !default;
-$warning-message-solid-info-descr-color: $warning-message-solid-info-color !default;
-$warning-message-solid-light-info-descr-color: $warning-message-solid-light-info-color !default;
-$warning-message-solid-error-descr-color: $warning-message-solid-error-color !default;
-
-$warning-message-icon-color: $warning-message-solid-color !default;
-$warning-message-solid-icon-color: $warning-message-icon-color !default;
-$warning-message-success-icon-color: $warning-message-solid-success-color !default;
-$warning-message-solid-success-icon-color: $warning-message-success-icon-color !default;
-$warning-message-info-icon-color: $warning-message-solid-info-color !default;
-$warning-message-solid-info-icon-color: $warning-message-info-icon-color !default;
-$warning-message-light-info-icon-color: $color-primary-70 !default;
+
+$warning-message-icon-color: $warning-message-color !default;
+$warning-message-solid-icon-color: $warning-message-solid-color !default;
+$warning-message-success-icon-color: $warning-message-success-color !default;
+$warning-message-solid-success-icon-color: $warning-message-solid-success-color !default;
+$warning-message-info-icon-color: $warning-message-info-color !default;
+$warning-message-solid-info-icon-color: $warning-message-solid-info-color !default;
+$warning-message-light-info-icon-color: $warning-message-light-info-color !default;
 $warning-message-solid-light-info-icon-color: $color-primary !default;
-$warning-message-error-icon-color: $warning-message-solid-error-color !default;
-$warning-message-solid-error-icon-color: $warning-message-error-icon-color !default;
+$warning-message-error-icon-color: $warning-message-error-color !default;
+$warning-message-solid-error-icon-color: $warning-message-solid-error-color !default;
 
 /********** Панель пустого состояния (.empty-list) **********/
 

package/src/utils/scroll-to.js

@@ -1,21 +0,0 @@
-export const scrollTo = ($el, offset = 0) => {
-    return new Promise((resolve) => {
-        const observer = new IntersectionObserver((entries) => {
-            if (entries[0].isIntersecting) {
-                observer.disconnect();
-                setTimeout(() => {
-                    resolve();
-                }, 500);
-            }
-        });
-        observer.observe($el);
-
-        const elementTop = $el.getBoundingClientRect().top + window.pageYOffset;
-        const offsetValue = (window.innerHeight * offset) / 100;
-
-        window.scrollTo({
-            top: elementTop - offsetValue,
-            behavior: 'smooth',
-        });
-    });
-};