@formixru/b2b-ui 3.5.0 → 3.6.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@formixru/b2b-ui",
|
|
3
|
-
"version": "3.
|
|
3
|
+
"version": "3.6.1",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"repository": {
|
|
6
6
|
"type": "git",
|
|
@@ -34,37 +34,37 @@
|
|
|
34
34
|
"@popperjs/core": "^2.11.8",
|
|
35
35
|
"@prettier/plugin-php": "^0.25.0",
|
|
36
36
|
"@storybook/addon-designs": "^11.1.3",
|
|
37
|
-
"@storybook/addon-docs": "^10.
|
|
38
|
-
"@storybook/addon-links": "^10.
|
|
39
|
-
"@storybook/vue3-vite": "^10.
|
|
40
|
-
"@vitejs/plugin-vue": "^6.0.
|
|
41
|
-
"@vueless/storybook-dark-mode": "^10.0.
|
|
37
|
+
"@storybook/addon-docs": "^10.4.0",
|
|
38
|
+
"@storybook/addon-links": "^10.4.0",
|
|
39
|
+
"@storybook/vue3-vite": "^10.4.0",
|
|
40
|
+
"@vitejs/plugin-vue": "^6.0.7",
|
|
41
|
+
"@vueless/storybook-dark-mode": "^10.0.8",
|
|
42
42
|
"browserslist": "^4.28.2",
|
|
43
43
|
"color": "^5.0.3",
|
|
44
44
|
"dayjs": "^1.11.20",
|
|
45
|
-
"es-toolkit": "^1.46.
|
|
46
|
-
"eslint": "^10.
|
|
45
|
+
"es-toolkit": "^1.46.1",
|
|
46
|
+
"eslint": "^10.4.0",
|
|
47
47
|
"husky": "^9.1.7",
|
|
48
48
|
"imask": "^7.6.1",
|
|
49
|
-
"js-cookie": "^3.0.
|
|
50
|
-
"lint-staged": "^
|
|
49
|
+
"js-cookie": "^3.0.7",
|
|
50
|
+
"lint-staged": "^17.0.5",
|
|
51
51
|
"mime": "^4.1.0",
|
|
52
|
-
"msw": "^2.
|
|
52
|
+
"msw": "^2.14.6",
|
|
53
53
|
"msw-storybook-addon": "^2.0.7",
|
|
54
54
|
"nouislider": "^15.8.1",
|
|
55
55
|
"pinst": "^3.0.0",
|
|
56
|
-
"postcss": "^8.5.
|
|
57
|
-
"postcss-preset-env": "^11.
|
|
56
|
+
"postcss": "^8.5.14",
|
|
57
|
+
"postcss-preset-env": "^11.3.0",
|
|
58
58
|
"prettier": "^3.8.3",
|
|
59
59
|
"reset-css": "^5.0.2",
|
|
60
60
|
"sass-embedded": "^1.99.0",
|
|
61
|
-
"storybook": "^10.
|
|
62
|
-
"stylelint": "^17.
|
|
63
|
-
"swiper": "^12.1.
|
|
61
|
+
"storybook": "^10.4.0",
|
|
62
|
+
"stylelint": "^17.11.1",
|
|
63
|
+
"swiper": "^12.1.4",
|
|
64
64
|
"update-browserslist-db": "^1.2.3",
|
|
65
65
|
"v-calendar": "3.0.1",
|
|
66
|
-
"vite": "^8.0.
|
|
67
|
-
"vue": "^3.5.
|
|
66
|
+
"vite": "^8.0.13",
|
|
67
|
+
"vue": "^3.5.34",
|
|
68
68
|
"vue-eslint-parser": "^10.4.0",
|
|
69
69
|
"yargs": "^18.0.0"
|
|
70
70
|
},
|
|
@@ -48,7 +48,7 @@
|
|
|
48
48
|
|
|
49
49
|
import { pluralize } from '@advdominion/pluralize';
|
|
50
50
|
import mime from 'mime';
|
|
51
|
-
import { computed, nextTick, onMounted, ref, toRefs } from 'vue';
|
|
51
|
+
import { computed, nextTick, onMounted, ref, toRefs, watch } from 'vue';
|
|
52
52
|
|
|
53
53
|
const ICONS_PATH = window.ICONS_PATH;
|
|
54
54
|
|
|
@@ -141,17 +141,24 @@ const descr = computed(() => {
|
|
|
141
141
|
const $root = ref();
|
|
142
142
|
const $input = ref();
|
|
143
143
|
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
144
|
+
watch(
|
|
145
|
+
value,
|
|
146
|
+
(newValue) => {
|
|
147
|
+
files.value = [];
|
|
148
|
+
if (newValue) {
|
|
149
|
+
for (const name of newValue.split(',')) {
|
|
150
|
+
if (files.value.length < maxCount.value) {
|
|
151
|
+
files.value.push({
|
|
152
|
+
name: name.trim(),
|
|
153
|
+
uploaded: true,
|
|
154
|
+
error: false,
|
|
155
|
+
});
|
|
156
|
+
}
|
|
157
|
+
}
|
|
152
158
|
}
|
|
153
|
-
}
|
|
154
|
-
}
|
|
159
|
+
},
|
|
160
|
+
{ immediate: true },
|
|
161
|
+
);
|
|
155
162
|
|
|
156
163
|
const selectFiles = () => {
|
|
157
164
|
$input.value.click();
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
document.body.addEventListener('click', (event) => {
|
|
2
|
+
if (!event.target.closest('.password__toggle')) {
|
|
3
|
+
return;
|
|
4
|
+
}
|
|
5
|
+
|
|
6
|
+
const $input = event.currentTarget.querySelector('.password').querySelector('.password__input');
|
|
7
|
+
|
|
8
|
+
if ($input.getAttribute('type') === 'password') {
|
|
9
|
+
$input.setAttribute('type', 'text');
|
|
10
|
+
} else {
|
|
11
|
+
$input.setAttribute('type', 'password');
|
|
12
|
+
}
|
|
13
|
+
});
|
|
@@ -0,0 +1,60 @@
|
|
|
1
|
+
@use 'sass:math';
|
|
2
|
+
@use '../../variables' as *;
|
|
3
|
+
|
|
4
|
+
$b: '.password';
|
|
5
|
+
|
|
6
|
+
#{$b} {
|
|
7
|
+
position: relative;
|
|
8
|
+
|
|
9
|
+
&__input {
|
|
10
|
+
}
|
|
11
|
+
|
|
12
|
+
&__toggle {
|
|
13
|
+
align-items: center;
|
|
14
|
+
color: $password-color;
|
|
15
|
+
cursor: pointer;
|
|
16
|
+
display: flex;
|
|
17
|
+
height: $input-height - $input-border-width * 2;
|
|
18
|
+
justify-content: center;
|
|
19
|
+
position: absolute;
|
|
20
|
+
right: 1px;
|
|
21
|
+
top: 1px;
|
|
22
|
+
transition-duration: var(--duration-micro-s);
|
|
23
|
+
transition-property: color;
|
|
24
|
+
transition-timing-function: var(--easing-standard);
|
|
25
|
+
width: $input-height - $input-border-width * 2;
|
|
26
|
+
|
|
27
|
+
&:hover,
|
|
28
|
+
&:focus-visible {
|
|
29
|
+
color: $password-active-color;
|
|
30
|
+
}
|
|
31
|
+
|
|
32
|
+
.input_small ~ & {
|
|
33
|
+
height: $input-small-height - $input-border-width * 2;
|
|
34
|
+
width: $input-small-height - $input-border-width * 2;
|
|
35
|
+
}
|
|
36
|
+
}
|
|
37
|
+
|
|
38
|
+
&__icon {
|
|
39
|
+
fill: currentcolor;
|
|
40
|
+
height: math.div($input-height, 2.5);
|
|
41
|
+
width: math.div($input-height, 2.5);
|
|
42
|
+
|
|
43
|
+
&_show {
|
|
44
|
+
#{$b}__input[type='text'] ~ #{$b}__toggle & {
|
|
45
|
+
display: none;
|
|
46
|
+
}
|
|
47
|
+
}
|
|
48
|
+
|
|
49
|
+
&_hide {
|
|
50
|
+
#{$b}__input[type='password'] ~ #{$b}__toggle & {
|
|
51
|
+
display: none;
|
|
52
|
+
}
|
|
53
|
+
}
|
|
54
|
+
|
|
55
|
+
.input_small ~ #{$b}__toggle & {
|
|
56
|
+
height: math.div($input-small-height, 2.5);
|
|
57
|
+
width: math.div($input-small-height, 2.5);
|
|
58
|
+
}
|
|
59
|
+
}
|
|
60
|
+
}
|
|
@@ -4,7 +4,7 @@ import { isString } from 'es-toolkit';
|
|
|
4
4
|
|
|
5
5
|
import { errorHandler } from '../../utils/error-handler.js';
|
|
6
6
|
import { hide as hideDialog, show as showDialog } from '../dialog/index.js';
|
|
7
|
-
import {
|
|
7
|
+
import { hide as hideLoader, show as showLoader } from '../loader/index.js';
|
|
8
8
|
import { hide as hideSidebar, show as showSidebar } from '../sidebar/index.js';
|
|
9
9
|
|
|
10
10
|
export const initRequestContent = ($b) => {
|
|
@@ -78,16 +78,12 @@ export const request = async ({
|
|
|
78
78
|
data = { content: raw };
|
|
79
79
|
}
|
|
80
80
|
|
|
81
|
+
const shouldHideLoader = loader && hideLoaderOnSuccess;
|
|
82
|
+
let isLoaderHidden = false;
|
|
83
|
+
|
|
81
84
|
if (isString(data.redirect)) {
|
|
82
85
|
if (data.redirect) {
|
|
83
86
|
location.assign(data.redirect);
|
|
84
|
-
if (data.redirect.startsWith('tg:')) {
|
|
85
|
-
if (loader) {
|
|
86
|
-
hideLoader();
|
|
87
|
-
}
|
|
88
|
-
} else {
|
|
89
|
-
clearLoaderTimeout();
|
|
90
|
-
}
|
|
91
87
|
} else {
|
|
92
88
|
location.reload();
|
|
93
89
|
}
|
|
@@ -100,13 +96,6 @@ export const request = async ({
|
|
|
100
96
|
}
|
|
101
97
|
}
|
|
102
98
|
|
|
103
|
-
const isReloadPending =
|
|
104
|
-
(data.reloadOnHideDialog && data.hideDialog) || (data.reloadOnHideSidebar && data.hideSidebar);
|
|
105
|
-
const isUIComponentClosing = data.hideDialog || data.hideSidebar;
|
|
106
|
-
const shouldSkipLoaderClose = isReloadPending || (data.trigger && !isUIComponentClosing);
|
|
107
|
-
const shouldHideLoader = loader && hideLoaderOnSuccess && !shouldSkipLoaderClose;
|
|
108
|
-
let isLoaderHidden = false;
|
|
109
|
-
|
|
110
99
|
if (data.dialog) {
|
|
111
100
|
const elementId = getElementId(data.dialog.id);
|
|
112
101
|
const $dialog = document.querySelector(elementId);
|
|
@@ -204,10 +193,10 @@ export const request = async ({
|
|
|
204
193
|
}
|
|
205
194
|
}
|
|
206
195
|
}
|
|
196
|
+
}
|
|
207
197
|
|
|
208
|
-
|
|
209
|
-
|
|
210
|
-
}
|
|
198
|
+
if (shouldHideLoader && !isLoaderHidden) {
|
|
199
|
+
hideLoader(isString(data.redirect) ? 3000 : undefined);
|
|
211
200
|
}
|
|
212
201
|
|
|
213
202
|
return data;
|
|
@@ -215,9 +204,18 @@ export const request = async ({
|
|
|
215
204
|
if (error.status === 401) {
|
|
216
205
|
location.reload();
|
|
217
206
|
} else {
|
|
207
|
+
if (
|
|
208
|
+
error.name === 'AbortError' ||
|
|
209
|
+
error.message?.includes('NetworkError') ||
|
|
210
|
+
error.message?.includes('Failed to fetch')
|
|
211
|
+
) {
|
|
212
|
+
return;
|
|
213
|
+
}
|
|
214
|
+
|
|
218
215
|
if (loader) {
|
|
219
216
|
hideLoader();
|
|
220
217
|
}
|
|
218
|
+
|
|
221
219
|
errorHandler(error);
|
|
222
220
|
}
|
|
223
221
|
}
|
package/src/variables.scss
CHANGED
|
@@ -317,7 +317,7 @@ $font-h4-desktop: () !default;
|
|
|
317
317
|
|
|
318
318
|
$font: ('font-size': $font-size, 'line-height': $line-height) !default;
|
|
319
319
|
|
|
320
|
-
$radius:
|
|
320
|
+
$radius: 8px !default;
|
|
321
321
|
$radius-s: 4px !default;
|
|
322
322
|
$radius-l: 10000px !default;
|
|
323
323
|
|
|
@@ -454,9 +454,9 @@ $button-border-color: $color-primary !default;
|
|
|
454
454
|
$button-radius: $radius-l !default;
|
|
455
455
|
$button-color: $color-white !default;
|
|
456
456
|
$button-font: ('font-weight': bold, 'font-size': $font-size, 'line-height': 1) !default;
|
|
457
|
-
$button-height:
|
|
458
|
-
$button-min-width:
|
|
459
|
-
$button-padding: 0
|
|
457
|
+
$button-height: 48px !default;
|
|
458
|
+
$button-min-width: 152px !default;
|
|
459
|
+
$button-padding: 0 28px !default;
|
|
460
460
|
|
|
461
461
|
$button-disabled-bg: color.change($color-primary, $alpha: 0.35) !default;
|
|
462
462
|
$button-disabled-border-color: color.change($color-primary, $alpha: 0.35) !default;
|
|
@@ -466,19 +466,19 @@ $button-active-bg: $color-primary-40 !default;
|
|
|
466
466
|
$button-active-border-color: $color-primary-40 !default;
|
|
467
467
|
$button-active-color: $color-white !default;
|
|
468
468
|
|
|
469
|
-
$button-icon-size:
|
|
470
|
-
$button-icon-space-before:
|
|
471
|
-
$button-icon-space-after:
|
|
469
|
+
$button-icon-size: 24px !default;
|
|
470
|
+
$button-icon-space-before: 8px !default;
|
|
471
|
+
$button-icon-space-after: 8px !default;
|
|
472
472
|
|
|
473
473
|
$button-small-font: ('font-weight': bold, 'font-size': $font-size-s, 'line-height': 1) !default;
|
|
474
|
-
$button-small-height:
|
|
475
|
-
$button-small-min-width:
|
|
476
|
-
$button-small-padding: 0
|
|
474
|
+
$button-small-height: 40px !default;
|
|
475
|
+
$button-small-min-width: 72px !default;
|
|
476
|
+
$button-small-padding: 0 16px !default;
|
|
477
477
|
|
|
478
478
|
$button-square-radius: $radius !default;
|
|
479
479
|
|
|
480
|
-
$button-wide-min-width:
|
|
481
|
-
$button-small-wide-min-width:
|
|
480
|
+
$button-wide-min-width: 208px !default;
|
|
481
|
+
$button-small-wide-min-width: 128px !default;
|
|
482
482
|
|
|
483
483
|
// Secondary (.button_alt)
|
|
484
484
|
|
|
@@ -549,9 +549,9 @@ $input-radius: $radius !default;
|
|
|
549
549
|
$input-color: $font-color-primary !default;
|
|
550
550
|
$input-font: ('font-size': $font-size, 'line-height': $line-height-s, 'font-family': $font-family) !default;
|
|
551
551
|
$input-placeholder-color: color.change($input-color, $alpha: 0.5) !default;
|
|
552
|
-
$input-height:
|
|
553
|
-
$input-padding-x:
|
|
554
|
-
$input-padding-y:
|
|
552
|
+
$input-height: 48px !default;
|
|
553
|
+
$input-padding-x: 16px !default;
|
|
554
|
+
$input-padding-y: 12px !default;
|
|
555
555
|
|
|
556
556
|
$input-filled-border-color: $color-primary !default;
|
|
557
557
|
|
|
@@ -570,18 +570,23 @@ $input-error-border-color: $color-error !default;
|
|
|
570
570
|
$input-error-color: $input-color !default;
|
|
571
571
|
|
|
572
572
|
$input-small-font: () !default;
|
|
573
|
-
$input-small-height:
|
|
574
|
-
$input-small-padding-x:
|
|
573
|
+
$input-small-height: 40px !default;
|
|
574
|
+
$input-small-padding-x: 16px !default;
|
|
575
575
|
$input-small-padding-y: 4px !default;
|
|
576
576
|
|
|
577
577
|
$input-textarea-font: ('line-height': $line-height) !default;
|
|
578
|
-
$input-textarea-min-height:
|
|
578
|
+
$input-textarea-min-height: 144px !default;
|
|
579
579
|
|
|
580
|
-
$input-textarea-small-min-height:
|
|
580
|
+
$input-textarea-small-min-height: 72px !default;
|
|
581
|
+
|
|
582
|
+
/********** Поле ввода пароля (.password) **********/
|
|
583
|
+
|
|
584
|
+
$password-color: $color-grey-40;
|
|
585
|
+
$password-active-color: $color-primary-40;
|
|
581
586
|
|
|
582
587
|
/********** Поле ввода с подсказкамми (.suggest-input) **********/
|
|
583
588
|
|
|
584
|
-
$suggest-input-item-height:
|
|
589
|
+
$suggest-input-item-height: 40px !default;
|
|
585
590
|
$suggest-input-item-color: $color-grey-20 !default;
|
|
586
591
|
$suggest-input-item-font: ('font-size': $font-size, 'line-height': $line-height) !default;
|
|
587
592
|
$suggest-input-item-mark-color: inherit !default;
|
|
@@ -604,8 +609,8 @@ $suggest-input-clear-active-color: $color-grey-40 !default;
|
|
|
604
609
|
|
|
605
610
|
$date-input-icon-color: $color-grey-70 !default;
|
|
606
611
|
$date-input-disabled-icon-color: $color-grey-80 !default;
|
|
607
|
-
$date-input-icon-size:
|
|
608
|
-
$date-input-small-icon-size:
|
|
612
|
+
$date-input-icon-size: 16px !default;
|
|
613
|
+
$date-input-small-icon-size: 20px !default;
|
|
609
614
|
|
|
610
615
|
$date-input-bg: $bg-color-primary !default;
|
|
611
616
|
$date-input-radius: $input-radius !default;
|
|
@@ -896,7 +901,7 @@ $form-submit-error-shadow: $shadow !default;
|
|
|
896
901
|
$form-submit-error-color: $font-color-error !default;
|
|
897
902
|
$form-submit-error-mobile-font: ('font-size': $font-size-xs, 'line-height': $line-height) !default;
|
|
898
903
|
$form-submit-error-desktop-font: ('font-size': $font-size-s) !default;
|
|
899
|
-
$form-submit-error-padding:
|
|
904
|
+
$form-submit-error-padding: 16px 24px !default;
|
|
900
905
|
|
|
901
906
|
/********** Диалоговое окно (.dialog) **********/
|
|
902
907
|
|