@formixru/b2b-ui 3.0.5 → 3.1.0

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@formixru/b2b-ui",
-    "version": "3.0.5",
+    "version": "3.1.0",
     "type": "module",
     "repository": {
         "type": "git",
@@ -98,5 +98,8 @@
         "workerDirectory": [
             ".storybook/static"
         ]
+    },
+    "dependencies": {
+        "@advdominion/scroll-to": "^1.0.0"
     }
 }

package/src/components/dialog/index.scss

@@ -54,15 +54,6 @@ $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,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

@@ -8,9 +8,6 @@ $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;
 
@@ -19,10 +16,6 @@ $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,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/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/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',
-        });
-    });
-};