@formixru/b2b-ui 3.3.0 → 3.4.1

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@formixru/b2b-ui",
-    "version": "3.3.0",
+    "version": "3.4.1",
     "type": "module",
     "repository": {
         "type": "git",
@@ -15,60 +15,60 @@
         "_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 \"src/**/*.scss\"",
-        "lint:prettier": "yarn prettier --check .",
-        "lint": "yarn lint:eslint && yarn lint:stylelint && yarn lint:prettier",
+        "lint:eslint": "yarn node build-scripts/eslint.js",
+        "lint:stylelint": "yarn node build-scripts/stylelint.js",
+        "lint:prettier": "yarn node build-scripts/prettier.js",
+        "lint": "yarn node build-scripts/lint.js",
         "dev": "storybook dev -p 3000",
         "build": "storybook build -o www"
     },
     "devDependencies": {
-        "@advdominion/eslint-config": "^1.1.2",
+        "@advdominion/css-var": "^1.0.1",
+        "@advdominion/eslint-config": "^2.0.0",
         "@advdominion/get-scrollbar-width": "^2.0.1",
         "@advdominion/pluralize": "^1.0.2",
-        "@advdominion/scroll-to": "^1.0.0",
+        "@advdominion/scroll-to": "^1.0.1",
+        "@advdominion/stylelint-config": "^1.1.0",
         "@advdominion/tooltip": "^6.0.0",
-        "@floating-ui/dom": "^1.7.4",
+        "@floating-ui/dom": "^1.7.5",
         "@popperjs/core": "^2.11.8",
         "@prettier/plugin-php": "^0.24.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",
+        "@storybook/addon-designs": "^11.1.2",
+        "@storybook/addon-docs": "^10.2.13",
+        "@storybook/addon-links": "^10.2.13",
+        "@storybook/vue3-vite": "^10.2.13",
+        "@vitejs/plugin-vue": "^6.0.4",
+        "@vueless/storybook-dark-mode": "^10.0.7",
         "browserslist": "^4.28.1",
         "color": "^5.0.3",
         "dayjs": "^1.11.19",
         "es-toolkit": "^1.44.0",
-        "eslint": "^9.39.2",
+        "eslint": "^10.0.2",
         "husky": "^9.1.7",
         "imask": "^7.6.1",
         "lint-staged": "^16.2.7",
         "mime": "^4.1.0",
-        "msw": "^2.12.7",
+        "msw": "^2.12.10",
         "msw-storybook-addon": "^2.0.6",
         "nouislider": "^15.8.1",
         "pinst": "^3.0.0",
         "postcss": "^8.5.6",
-        "postcss-preset-env": "^11.1.1",
-        "prettier": "^3.8.0",
+        "postcss-preset-env": "^11.2.0",
+        "prettier": "^3.8.1",
         "reset-css": "^5.0.2",
-        "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": "^12.0.3",
+        "sass-embedded": "^1.97.3",
+        "storybook": "^10.2.13",
+        "stylelint": "^17.4.0",
+        "swiper": "^12.1.2",
         "update-browserslist-db": "^1.2.3",
         "v-calendar": "3.0.1",
         "vite": "^7.3.1",
-        "vue": "^3.5.27",
-        "vue-eslint-parser": "^10.2.0",
+        "vue": "^3.5.29",
+        "vue-eslint-parser": "^10.4.0",
         "yargs": "^18.0.0"
     },
     "peerDependencies": {
+        "@advdominion/css-var": "^1.0.0",
         "@advdominion/get-scrollbar-width": "^2.0.0",
         "@advdominion/pluralize": "^1.0.0",
         "@advdominion/scroll-to": "^1.0.0",

package/src/base.scss

@@ -34,10 +34,12 @@
 
 * {
     box-sizing: border-box;
+    overflow-wrap: anywhere;
 
     &::before,
     &::after {
         box-sizing: border-box;
+        overflow-wrap: anywhere;
     }
 
     &:focus {

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

@@ -76,12 +76,12 @@ $b: '.color-input';
 
         #{$b}__example_autocolor & {
             &:first-child {
-                clip: rect(auto, 6px, auto, auto);
+                clip-path: inset(0 calc(100% - 6px) 0 0);
                 fill: $color-input-icon-dark-color;
             }
 
             &:last-child {
-                clip: rect(auto, auto, auto, 6px);
+                clip-path: inset(0 0 0 6px);
                 fill: $color-input-icon-light-color;
             }
         }

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

@@ -75,11 +75,10 @@
 </template>
 
 <script setup>
+import { cssVar } from '@advdominion/css-var';
 import Color from 'color';
 import { computed, ref, toRefs, watch } from 'vue';
 
-import { cssVar } from '../../utils/css-var.js';
-
 const ICONS_PATH = window.ICONS_PATH;
 
 const emit = defineEmits(['input']);

package/src/components/dialog/index.js

@@ -1,6 +1,6 @@
+import { cssVar } from '@advdominion/css-var';
 import { throttle } from 'es-toolkit';
 
-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';

package/src/components/form/index.scss

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

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

@@ -110,11 +110,11 @@ const input = (inputValue) => {
         } else {
             quantity.value = Number(inputValue);
             if (quantity.value < min.value) {
-                newValue = min.value;
                 quantity.value = min.value;
-            } else if (quantity.value > max.value) {
-                newValue = max.value;
+                newValue = min.value;
+            } else if (max.value > 0 && quantity.value > max.value) {
                 quantity.value = max.value;
+                newValue = max.value;
             } else {
                 newValue = quantity.value;
             }

package/src/components/request/index.js

@@ -30,6 +30,7 @@ export const request = async ({
     loader = true,
     showLoaderDelay,
     hideLoaderOnSuccess = true,
+    interceptData = true,
 }) => {
     const reqUrl = new URL(url, location.origin);
     const options = {
@@ -91,22 +92,38 @@ export const request = async ({
                 location.reload();
             }
         } else {
-            try {
-                await window.__FORMIX__REQUEST__INTERCEPT_DATA(data);
-            } catch {
-                console.warn('Функция __FORMIX__REQUEST__INTERCEPT_DATA не установлена');
+            if (interceptData) {
+                try {
+                    await window.__FORMIX__REQUEST__INTERCEPT_DATA(data);
+                } catch {
+                    console.warn('Функция __FORMIX__REQUEST__INTERCEPT_DATA не установлена');
+                }
             }
+
+            const isReloadPending =
+                (data.reloadOnHideDialog && data.hideDialog) || (data.reloadOnHideSidebar && data.hideSidebar);
+            const isUIComponentClosing = data.hideDialog || data.hideSidebar;
+            const shouldSkipLoaderClose = isReloadPending || (data.trigger && !isUIComponentClosing);
+            const shouldHideLoader = loader && hideLoaderOnSuccess && !shouldSkipLoaderClose;
+            let isLoaderHidden = false;
+
             if (data.dialog) {
                 const elementId = getElementId(data.dialog.id);
                 const $dialog = document.querySelector(elementId);
                 if ($dialog) {
                     $dialog.querySelector('.dialog__container').innerHTML = data.dialog.content;
+                    // Вызываем hideLoader так же как в основном компоненте - до функции show()
+                    if (shouldHideLoader && !isLoaderHidden) {
+                        hideLoader();
+                        isLoaderHidden = true;
+                    }
                     await showDialog($dialog);
                     initRequestContent($dialog);
                 } else {
                     console.error(`Диалоговое окно с id ${elementId?.replace(/^#/, '')} не найдено`);
                 }
             }
+
             if (data.reloadOnHideDialog) {
                 if (data.dialog) {
                     const elementId = getElementId(data.dialog.id);
@@ -120,6 +137,7 @@ export const request = async ({
                     });
                 }
             }
+
             if (data.hideDialog) {
                 if (data.dialog) {
                     const elementId = getElementId(data.dialog.id);
@@ -131,17 +149,24 @@ export const request = async ({
                     hideDialog($b.closest('.dialog'));
                 }
             }
+
             if (data.sidebar) {
                 const elementId = getElementId(data.sidebar.id);
                 const $sidebar = document.querySelector(elementId);
                 if ($sidebar) {
                     $sidebar.innerHTML = data.sidebar.content;
+                    // Вызываем hideLoader так же как в основном компоненте - до функции show()
+                    if (shouldHideLoader && !isLoaderHidden) {
+                        hideLoader();
+                        isLoaderHidden = true;
+                    }
                     await showSidebar($sidebar);
                     initRequestContent($sidebar);
                 } else {
                     console.error(`Сайдбар с id ${elementId?.replace(/^#/, '')} не найден`);
                 }
             }
+
             if (data.reloadOnHideSidebar) {
                 if (data.sidebar) {
                     const elementId = getElementId(data.sidebar.id);
@@ -155,6 +180,7 @@ export const request = async ({
                     });
                 }
             }
+
             if (data.hideSidebar) {
                 if (data.sidebar) {
                     const elementId = getElementId(data.sidebar.id);
@@ -166,6 +192,7 @@ export const request = async ({
                     hideSidebar($b.closest('.sidebar'));
                 }
             }
+
             if (data.trigger) {
                 const $trigger = document.querySelector(data.trigger);
                 if ($trigger) {
@@ -177,13 +204,8 @@ export const request = async ({
                     }
                 }
             }
-            if (
-                !(data.reloadOnHideDialog && data.hideDialog) &&
-                !(data.reloadOnHideSidebar && data.hideSidebar) &&
-                (!data.trigger || data.hideDialog || data.hideSidebar) &&
-                loader &&
-                hideLoaderOnSuccess
-            ) {
+
+            if (shouldHideLoader && !isLoaderHidden) {
                 hideLoader();
             }
         }

package/src/components/sidebar/index.js

@@ -1,4 +1,5 @@
-import { cssVar } from '../../utils/css-var.js';
+import { cssVar } from '@advdominion/css-var';
+
 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';

package/src/components/sr-only/index.scss

@@ -3,22 +3,12 @@
 // https://allyjs.io/tutorials/hiding-elements.html#2017-edition-of-visuallyhidden
 
 .sr-only {
-    border-bottom-style: none;
-    border-left-style: none;
-    border-right-style: none;
-    border-top-style: none;
-    clip: rect(0 0 0 0);
+    border-style: none;
     clip-path: inset(100%);
     height: 1px;
-    margin-bottom: -1px;
-    margin-left: -1px;
-    margin-right: -1px;
-    margin-top: -1px;
+    margin: -1px;
     overflow: hidden;
-    padding-bottom: 0;
-    padding-left: 0;
-    padding-right: 0;
-    padding-top: 0;
+    padding: 0;
     position: absolute;
     white-space: nowrap;
     width: 1px;

package/src/components/steps/index.scss

@@ -1,3 +1,4 @@
+@use 'sass:color';
 @use '../../variables' as *;
 
 $b: '.steps';
@@ -7,7 +8,7 @@ $b: '.steps';
     position: relative;
 
     &::before {
-        background-image: linear-gradient(-90deg, rgba($content-bg, 0%), $content-bg);
+        background-image: linear-gradient(-90deg, color.change($content-bg, $alpha: 0), $content-bg);
         content: none;
         height: 100%;
         left: 0;
@@ -18,12 +19,12 @@ $b: '.steps';
 
         .content_fill_grey &,
         .content__block_fill_grey & {
-            background-image: linear-gradient(-90deg, rgba($content-bg-grey, 0%), $content-bg-grey);
+            background-image: linear-gradient(-90deg, color.change($content-bg-grey, $alpha: 0), $content-bg-grey);
         }
     }
 
     &::after {
-        background-image: linear-gradient(90deg, rgba($content-bg, 0%), $content-bg);
+        background-image: linear-gradient(90deg, color.change($content-bg, $alpha: 0), $content-bg);
         content: '';
         height: 100%;
         position: absolute;
@@ -38,7 +39,7 @@ $b: '.steps';
 
         .content_fill_grey &,
         .content__block_fill_grey & {
-            background-image: linear-gradient(90deg, rgba($content-bg-grey, 0%), $content-bg-grey);
+            background-image: linear-gradient(90deg, color.change($content-bg-grey, $alpha: 0), $content-bg-grey);
         }
     }
 

package/src/components/tabs/index.js

@@ -1,6 +1,6 @@
+import { cssVar } from '@advdominion/css-var';
 import { scrollTo } from '@advdominion/scroll-to';
 
-import { cssVar } from '../../utils/css-var.js';
 import { isInViewport } from '../../utils/is-in-viewport.js';
 import { request } from '../request/index.js';
 

package/src/components/tabs/index.scss

@@ -1,3 +1,4 @@
+@use 'sass:color';
 @use '../../variables' as *;
 
 $b: '.tabs';
@@ -32,7 +33,11 @@ $b: '.tabs';
         &_shadow-start {
             &::before {
                 @media (--tablet-landscape-up) {
-                    background-image: linear-gradient(-90deg, rgba($content-bg-grey, 0%), $content-bg-grey);
+                    background-image: linear-gradient(
+                        -90deg,
+                        color.change($content-bg-grey, $alpha: 0),
+                        $content-bg-grey
+                    );
                     content: '';
                     height: calc(100% - #{$tabs-border-width});
                     left: 0;
@@ -44,7 +49,7 @@ $b: '.tabs';
 
                 #{$b}_white-bg & {
                     @media (--tablet-landscape-up) {
-                        background-image: linear-gradient(-90deg, rgba($content-bg, 0%), $content-bg);
+                        background-image: linear-gradient(-90deg, color.change($content-bg, $alpha: 0), $content-bg);
                     }
                 }
             }
@@ -53,7 +58,11 @@ $b: '.tabs';
         &_shadow-end {
             &::after {
                 @media (--tablet-landscape-up) {
-                    background-image: linear-gradient(90deg, rgba($content-bg-grey, 0%), $content-bg-grey);
+                    background-image: linear-gradient(
+                        90deg,
+                        color.change($content-bg-grey, $alpha: 0),
+                        $content-bg-grey
+                    );
                     content: '';
                     height: calc(100% - #{$tabs-border-width});
                     position: absolute;
@@ -65,7 +74,7 @@ $b: '.tabs';
 
                 #{$b}_white-bg & {
                     @media (--tablet-landscape-up) {
-                        background-image: linear-gradient(90deg, rgba($content-bg, 0%), $content-bg);
+                        background-image: linear-gradient(90deg, color.change($content-bg, $alpha: 0), $content-bg);
                     }
                 }
             }

package/src/components/tooltip/index.js

@@ -1,6 +1,7 @@
 /* globals BX */
 
-import { cssVar } from '../../utils/css-var.js';
+import { cssVar } from '@advdominion/css-var';
+
 import { errorHandler } from '../../utils/error-handler.js';
 
 export const init = async ($b) => {
@@ -11,16 +12,20 @@ export const init = async ($b) => {
     if ($b.dataset.tooltipImage) {
         content = `<img class="tooltip__image" src=${$b.dataset.tooltipImage} alt="">`;
     }
+    const tooltipFetch = $b.dataset.tooltipFetch;
 
     return new Promise((resolve) => {
         if ($b._tooltip) {
-            $b._tooltip.setContent(content);
+            if (tooltipFetch) {
+                $b._tooltip._isFetching = false;
+                $b._tooltip._isFetched = false;
+            } else {
+                $b._tooltip.setContent(content);
+            }
             resolve();
             return;
         }
 
-        const tooltipFetch = $b.dataset.tooltipFetch;
-
         let appendTo = document.body;
         const $special = $b.closest('.dialog, .sidebar, .filter, .compare-pane');
         if ($special) {

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

@@ -22,7 +22,7 @@ $b: '.warning-message';
         padding: 16px 16px 24px;
 
         &:has(#{$b}__content:last-child #{$b}__descr:first-child) {
-            padding-bottom: 16px;
+            padding-bottom: 20px;
         }
     }
 

package/src/utils/mm.js

@@ -1,4 +1,4 @@
-import { cssVar } from './css-var.js';
+import { cssVar } from '@advdominion/css-var';
 
 /*
 

package/src/variables.scss

@@ -268,10 +268,10 @@ $bg-color-info: $color-primary !default;
     $bg-color-tertiary: #212223 !default;
 }
 
-$backdrop-color: rgba($color-black, 30%) !default;
+$backdrop-color: color.change($color-black, $alpha: 0.3) !default;
 
 @if $dark {
-    $backdrop-color: rgba($color-black, 75%) !default;
+    $backdrop-color: color.change($color-black, $alpha: 0.75) !default;
 }
 
 $font-color-primary: $color-grey-20 !default;
@@ -321,8 +321,8 @@ $radius: 4px * 2 !default;
 $radius-s: 4px !default;
 $radius-l: 10000px !default;
 
-$shadow: 0 2px 16px 0 rgba($color-black, 10%) !default;
-$shadow-s: 0 2px 8px 0 rgba($color-black, 10%) !default;
+$shadow: 0 2px 16px 0 color.change($color-black, $alpha: 0.1) !default;
+$shadow-s: 0 2px 8px 0 color.change($color-black, $alpha: 0.1) !default;
 
 @if $dark {
     $shadow: none !default;
@@ -458,8 +458,8 @@ $button-height: 4px * 12 !default;
 $button-min-width: 4px * 38 !default;
 $button-padding: 0 4px * 7 !default;
 
-$button-disabled-bg: rgba($color-primary, 35%) !default;
-$button-disabled-border-color: rgba($color-primary, 35%) !default;
+$button-disabled-bg: color.change($color-primary, $alpha: 0.35) !default;
+$button-disabled-border-color: color.change($color-primary, $alpha: 0.35) !default;
 $button-disabled-color: $color-white !default;
 
 $button-active-bg: $color-primary-40 !default;
@@ -488,8 +488,8 @@ $button-alt-border-color: $color-primary !default;
 $button-alt-color: $color-primary !default;
 
 $button-alt-disabled-bg: transparent !default;
-$button-alt-disabled-border-color: rgba($color-primary, 35%) !default;
-$button-alt-disabled-color: rgba($color-primary, 35%) !default;
+$button-alt-disabled-border-color: color.change($color-primary, $alpha: 0.35) !default;
+$button-alt-disabled-color: color.change($color-primary, $alpha: 0.35) !default;
 
 $button-alt-active-bg: $color-primary-40 !default;
 $button-alt-active-border-color: $color-primary-40 !default;
@@ -504,7 +504,7 @@ $button-ghost-color: $color-primary !default;
 
 $button-ghost-disabled-bg: $color-grey-90 !default;
 $button-ghost-disabled-border-color: $color-grey-90 !default;
-$button-ghost-disabled-color: rgba($color-primary, 35%) !default;
+$button-ghost-disabled-color: color.change($color-primary, $alpha: 0.35) !default;
 
 $button-ghost-active-bg: $color-primary-80 !default;
 $button-ghost-active-border-color: $color-primary-80 !default;
@@ -533,8 +533,8 @@ $button-inverted-border-color: $color-white !default;
 $button-inverted-color: $color-white !default;
 
 $button-inverted-disabled-bg: transparent !default;
-$button-inverted-disabled-border-color: rgba($color-white, 50%) !default;
-$button-inverted-disabled-color: rgba($color-white, 50%) !default;
+$button-inverted-disabled-border-color: color.change($color-white, $alpha: 0.5) !default;
+$button-inverted-disabled-color: color.change($color-white, $alpha: 0.5) !default;
 
 $button-inverted-active-bg: $color-white !default;
 $button-inverted-active-border-color: $color-white !default;
@@ -548,7 +548,7 @@ $input-border-color: $color-grey-80 !default;
 $input-radius: $radius !default;
 $input-color: $font-color-primary !default;
 $input-font: ('font-size': $font-size, 'line-height': $line-height-s, 'font-family': $font-family) !default;
-$input-placeholder-color: rgba($input-color, 50%) !default;
+$input-placeholder-color: color.change($input-color, $alpha: 0.5) !default;
 $input-height: 4px * 12 !default;
 $input-padding-x: 4px * 4 !default;
 $input-padding-y: 4px * 3 !default;
@@ -560,10 +560,10 @@ $input-active-border-color: $color-primary !default;
 $input-active-outline-color: $input-active-border-color !default;
 $input-active-color: $input-color !default;
 
-$input-disabled-bg: rgba($color-primary-20, 7%) !default;
+$input-disabled-bg: color.change($color-primary-20, $alpha: 0.07) !default;
 $input-disabled-border-color: $color-grey-90 !default;
-$input-disabled-color: rgba($input-color, 50%) !default;
-$input-disabled-placeholder-color: rgba($input-color, 25%) !default;
+$input-disabled-color: color.change($input-color, $alpha: 0.5) !default;
+$input-disabled-placeholder-color: color.change($input-color, $alpha: 0.25) !default;
 
 $input-error-bg: $input-bg !default;
 $input-error-border-color: $color-error !default;
@@ -753,8 +753,8 @@ $radio-list-color: $color-primary !default;
 $radio-list-font: ('font-weight': bold, 'font-size': $font-size-s, 'line-height': 1) !default;
 
 $radio-list-disabled-bg: $bg-color-tertiary !default;
-$radio-list-disabled-border-color: rgba($color-primary, 35%) !default;
-$radio-list-disabled-color: rgba($color-primary, 35%) !default;
+$radio-list-disabled-border-color: color.change($color-primary, $alpha: 0.35) !default;
+$radio-list-disabled-color: color.change($color-primary, $alpha: 0.35) !default;
 
 $radio-list-active-bg: $color-primary !default;
 $radio-list-active-border-color: $color-primary !default;
@@ -764,8 +764,8 @@ $radio-list-selected-bg: $color-primary-40 !default;
 $radio-list-selected-border-color: $color-primary-40 !default;
 $radio-list-selected-color: $color-white !default;
 
-$radio-list-selected-disabled-bg: rgba($color-primary, 35%) !default;
-$radio-list-selected-disabled-border-color: rgba($color-primary, 35%) !default;
+$radio-list-selected-disabled-bg: color.change($color-primary, $alpha: 0.35) !default;
+$radio-list-selected-disabled-border-color: color.change($color-primary, $alpha: 0.35) !default;
 $radio-list-selected-disabled-color: $color-white !default;
 
 /********** Переключатель (.toggle) **********/
@@ -787,7 +787,7 @@ $toggle-active-check-color: $color-white !default;
 
 $toggle-active-disabled-bg: $color-success !default;
 $toggle-active-disabled-border-color: $color-success !default;
-$toggle-active-disabled-check-color: rgba($color-white, 50%) !default;
+$toggle-active-disabled-check-color: color.change($color-white, $alpha: 0.5) !default;
 
 $toggle-label-color: $font-color-secondary !default;
 $toggle-label-font: ('font-size': $font-size, 'line-height': $line-height-s) !default;

package/src/utils/css-var.js

@@ -1,9 +0,0 @@
-export const cssVar = (name, element = document.documentElement) => {
-    const value = window.getComputedStyle(element).getPropertyValue(name);
-    const durationRegExp = /(^[\d.]+)(ms|s)$/;
-    if (durationRegExp.test(value)) {
-        const [, numericValue, unit] = durationRegExp.exec(value);
-        return unit === 's' ? numericValue * 1000 : Number(numericValue);
-    }
-    return value;
-};