@formixru/b2b-ui 2.1.0 → 2.3.0

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.
Files changed (7) hide show
  1. package/CHANGELOG.md +8 -0
  2. package/package.json +1 -1
  3. package/src/components/request/index.js +21 -8
  4. package/src/components/tabs/index.scss +19 -17
  5. package/src/components/warning-message/index.scss +25 -29
  6. package/src/components/warning-message/index.vue +5 -2
  7. package/src/variables.scss +25 -12
package/CHANGELOG.md CHANGED
@@ -1,3 +1,11 @@
1
+ ## v2.3.0
2
+
3
+ - В `Request` добавлена поддержка id диалогового окна или сайдбара как c `#`, так и без неё
4
+
5
+ ## v2.2.0
6
+
7
+ - Доработки по стилям `.tabs`/`.warning-message`
8
+
1
9
  ## v2.1.0
2
10
 
3
11
  - В Request добавлены `reloadOnHideSidebar`/`hideSidebar`, а так же параметр `hideLoaderOnSuccess`
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@formixru/b2b-ui",
3
- "version": "2.1.0",
3
+ "version": "2.3.0",
4
4
  "type": "module",
5
5
  "repository": {
6
6
  "type": "git",
package/src/components/request/index.js CHANGED
@@ -15,6 +15,13 @@ export const initRequestContent = ($b) => {
15
15
  }
16
16
  };
17
17
 
18
+ const getElementId = (id) => {
19
+ if (!id || id.startsWith('#')) {
20
+ return id;
21
+ }
22
+ return `#${id}`;
23
+ };
24
+
18
25
  export const request = async ({
19
26
  $b,
20
27
  url = '',
@@ -90,18 +97,20 @@ export const request = async ({
90
97
  console.warn('Функция __FORMIX__REQUEST__INTERCEPT_DATA не установлена');
91
98
  }
92
99
  if (data.dialog) {
93
- const $dialog = document.querySelector(data.dialog.id);
100
+ const elementId = getElementId(data.dialog.id);
101
+ const $dialog = document.querySelector(elementId);
94
102
  if ($dialog) {
95
103
  $dialog.querySelector('.dialog__container').innerHTML = data.dialog.content;
96
104
  await showDialog($dialog);
97
105
  initRequestContent($dialog);
98
106
  } else {
99
- console.error(`Диалоговое окно с id ${data.trigger} не найдено`);
107
+ console.error(`Диалоговое окно с id ${elementId?.replace(/^#/, '')} не найдено`);
100
108
  }
101
109
  }
102
110
  if (data.reloadOnHideDialog) {
103
111
  if (data.dialog) {
104
- const $dialog = document.querySelector(data.dialog.id);
112
+ const elementId = getElementId(data.dialog.id);
113
+ const $dialog = document.querySelector(elementId);
105
114
  $dialog?.addEventListener('dialog-hide', () => {
106
115
  location.reload();
107
116
  });
@@ -113,7 +122,8 @@ export const request = async ({
113
122
  }
114
123
  if (data.hideDialog) {
115
124
  if (data.dialog) {
116
- const $dialog = document.querySelector(data.dialog.id);
125
+ const elementId = getElementId(data.dialog.id);
126
+ const $dialog = document.querySelector(elementId);
117
127
  if ($dialog) {
118
128
  hideDialog($dialog);
119
129
  }
@@ -122,18 +132,20 @@ export const request = async ({
122
132
  }
123
133
  }
124
134
  if (data.sidebar) {
125
- const $sidebar = document.querySelector(data.sidebar.id);
135
+ const elementId = getElementId(data.sidebar.id);
136
+ const $sidebar = document.querySelector(elementId);
126
137
  if ($sidebar) {
127
138
  $sidebar.innerHTML = data.sidebar.content;
128
139
  await showSidebar($sidebar);
129
140
  initRequestContent($sidebar);
130
141
  } else {
131
- console.error(`Сайдбар с id ${data.trigger} не найден`);
142
+ console.error(`Сайдбар с id ${elementId?.replace(/^#/, '')} не найден`);
132
143
  }
133
144
  }
134
145
  if (data.reloadOnHideSidebar) {
135
146
  if (data.sidebar) {
136
- const $sidebar = document.querySelector(data.sidebar.id);
147
+ const elementId = getElementId(data.sidebar.id);
148
+ const $sidebar = document.querySelector(elementId);
137
149
  $sidebar?.addEventListener('sidebar-hide', () => {
138
150
  location.reload();
139
151
  });
@@ -145,7 +157,8 @@ export const request = async ({
145
157
  }
146
158
  if (data.hideSidebar) {
147
159
  if (data.sidebar) {
148
- const $sidebar = document.querySelector(data.sidebar.id);
160
+ const elementId = getElementId(data.sidebar.id);
161
+ const $sidebar = document.querySelector(elementId);
149
162
  if ($sidebar) {
150
163
  hideSidebar($sidebar);
151
164
  }
package/src/components/tabs/index.scss CHANGED
@@ -13,19 +13,19 @@ $b: '.tabs';
13
13
  width: 100%;
14
14
 
15
15
  @media (--tablet-portrait-down) {
16
- margin-left: -4px * 4;
17
- margin-right: -4px * 4;
18
- padding-left: 4px * 4;
19
- padding-right: 4px * 4;
16
+ margin-left: -16px;
17
+ margin-right: -16px;
18
+ padding-left: 16px;
19
+ padding-right: 16px;
20
20
  width: calc(100% + 32px);
21
21
  }
22
22
 
23
23
  .account & {
24
24
  @media (--tablet-portrait-down) {
25
- margin-left: -4px * 6;
26
- margin-right: -4px * 6;
27
- padding-left: 4px * 6;
28
- padding-right: 4px * 6;
25
+ margin-left: -24px;
26
+ margin-right: -24px;
27
+ padding-left: 24px;
28
+ padding-right: 24px;
29
29
  }
30
30
  }
31
31
 
@@ -38,7 +38,7 @@ $b: '.tabs';
38
38
  left: 0;
39
39
  position: absolute;
40
40
  top: 0;
41
- width: 4px * 4;
41
+ width: 16px;
42
42
  z-index: 2;
43
43
  }
44
44
 
@@ -59,7 +59,7 @@ $b: '.tabs';
59
59
  position: absolute;
60
60
  right: 0;
61
61
  top: 0;
62
- width: 4px * 4;
62
+ width: 16px;
63
63
  z-index: 2;
64
64
  }
65
65
 
@@ -82,9 +82,9 @@ $b: '.tabs';
82
82
  border-bottom: $tabs-border-width solid $tabs-border-color;
83
83
  display: block;
84
84
  margin-bottom: $tabs-border-width * -1;
85
- padding: 0 4px * 4;
86
- padding-bottom: 4px * 3;
87
- padding-top: 4px * 3;
85
+ padding: 0 16px;
86
+ padding-bottom: 12px;
87
+ padding-top: 12px;
88
88
 
89
89
  &:first-of-type {
90
90
  padding-left: 0;
@@ -96,7 +96,7 @@ $b: '.tabs';
96
96
 
97
97
  div#{$b}__item + &:any-link,
98
98
  div#{$b}__item + &:enabled {
99
- padding-left: 4px * 4;
99
+ padding-left: 16px;
100
100
  }
101
101
 
102
102
  &.swiper-slide {
@@ -114,11 +114,13 @@ $b: '.tabs';
114
114
  background-color: $tabs-counter-bg;
115
115
  border-radius: $tabs-counter-radius;
116
116
  color: $tabs-counter-color;
117
- height: 4px * 5;
117
+ height: 20px;
118
118
  padding-bottom: 2px;
119
- padding-left: 4px * 2;
120
- padding-right: 4px * 2;
119
+ padding-left: 4px;
120
+ padding-right: 4px;
121
121
  padding-top: 3px;
122
+ position: relative;
123
+ top: -1px;
122
124
 
123
125
  @include font($tabs-counter-font);
124
126
  }
package/src/components/warning-message/index.scss CHANGED
@@ -8,25 +8,21 @@ $b: '.warning-message';
8
8
  border-radius: $warning-message-radius;
9
9
  box-shadow: $warning-message-shadow;
10
10
  display: flex;
11
- padding-bottom: 4px * 6;
12
- padding-left: 4px * 4;
13
- padding-right: 4px * 4;
14
- padding-top: 4px * 4;
11
+ padding: 16px 16px 24px;
15
12
 
16
13
  @include dark-border;
17
14
 
18
15
  @media (--tablet-landscape-up) {
19
- padding-bottom: 4px * 8;
20
- padding-left: 4px * 6;
21
- padding-right: 4px * 6;
22
- padding-top: 4px * 6;
16
+ padding: 24px 24px 32px;
23
17
  }
24
18
 
25
19
  &_small {
26
- padding-bottom: 4px * 6;
27
- padding-left: 4px * 4;
28
- padding-right: 4px * 4;
29
- padding-top: 4px * 4;
20
+ box-shadow: $warning-message-small-shadow;
21
+ padding: 16px 16px 24px;
22
+
23
+ &:has(#{$b}__content:last-child #{$b}__descr:first-child) {
24
+ padding-bottom: 16px;
25
+ }
30
26
  }
31
27
 
32
28
  &_success {
@@ -62,51 +58,51 @@ $b: '.warning-message';
62
58
  }
63
59
 
64
60
  &__icon {
65
- fill: $warning-message-color;
61
+ fill: $warning-message-icon-color;
66
62
  flex-shrink: 0;
67
- height: 4px * 6;
68
- margin-right: 4px * 2;
69
- width: 4px * 6;
63
+ height: 24px;
64
+ margin-right: 8px;
65
+ width: 24px;
70
66
 
71
67
  #{$b}_small & {
72
- height: 4px * 5;
73
- width: 4px * 5;
68
+ height: 20px;
69
+ width: 20px;
74
70
  }
75
71
 
76
72
  #{$b}_solid & {
77
- fill: $warning-message-solid-descr-color;
73
+ fill: $warning-message-solid-icon-color;
78
74
  }
79
75
 
80
76
  #{$b}_success & {
81
- fill: $warning-message-success-color;
77
+ fill: $warning-message-success-icon-color;
82
78
  }
83
79
 
84
80
  #{$b}_solid#{$b}_success & {
85
- fill: $warning-message-solid-success-color;
81
+ fill: $warning-message-solid-success-icon-color;
86
82
  }
87
83
 
88
84
  #{$b}_info & {
89
- fill: $warning-message-info-color;
85
+ fill: $warning-message-info-icon-color;
90
86
  }
91
87
 
92
88
  #{$b}_solid#{$b}_info & {
93
- fill: $warning-message-solid-info-color;
89
+ fill: $warning-message-solid-info-icon-color;
94
90
  }
95
91
 
96
92
  #{$b}_light-info & {
97
- fill: $warning-message-light-info-color;
93
+ fill: $warning-message-light-info-icon-color;
98
94
  }
99
95
 
100
96
  #{$b}_solid#{$b}_light-info & {
101
- fill: $warning-message-solid-light-info-color;
97
+ fill: $warning-message-solid-light-info-icon-color;
102
98
  }
103
99
 
104
100
  #{$b}_error & {
105
- fill: $warning-message-error-color;
101
+ fill: $warning-message-error-icon-color;
106
102
  }
107
103
 
108
104
  #{$b}_solid#{$b}_error & {
109
- fill: $warning-message-solid-error-color;
105
+ fill: $warning-message-solid-error-icon-color;
110
106
  }
111
107
  }
112
108
 
@@ -223,10 +219,10 @@ $b: '.warning-message';
223
219
 
224
220
  &__action {
225
221
  flex-shrink: 0;
226
- margin-top: 4px * 4;
222
+ margin-top: 16px;
227
223
 
228
224
  @media (--tablet-landscape-up) {
229
- margin-left: 4px * 6;
225
+ margin-left: 24px;
230
226
  margin-top: 0;
231
227
  }
232
228
  }
package/src/components/warning-message/index.vue CHANGED
@@ -9,7 +9,10 @@
9
9
  <a
10
10
  v-if="actionUrl.length > 0"
11
11
  class="warning-message__action button"
12
- :class="{ button_inverted: solid, button_alt: !solid }"
12
+ :class="{
13
+ button_inverted: solid && type !== 'light-info',
14
+ button_alt: !solid || type === 'light-info',
15
+ }"
13
16
  :href="actionUrl"
14
17
  >
15
18
  <svg v-if="actionIcon.length > 0" class="button__icon">
@@ -61,7 +64,7 @@ const props = defineProps({
61
64
  },
62
65
  });
63
66
 
64
- const { type, small, solid, title, descr } = toRefs(props);
67
+ const { type, small, solid, title, descr, actionUrl, actionIcon, noIcon } = toRefs(props);
65
68
 
66
69
  const classes = computed(() => {
67
70
  return {
package/src/variables.scss CHANGED
@@ -977,8 +977,8 @@ $tabs-line-color: $color-primary !default;
977
977
  $tabs-label-font: ('font-weight': bold, 'font-size': $font-size, 'line-height': 1) !default;
978
978
 
979
979
  $tabs-counter-bg: $color-grey-80 !default;
980
- $tabs-counter-color: $color-grey-100 !default;
981
- $tabs-counter-font: ('font-weight': normal, 'font-size': $font-size-s) !default;
980
+ $tabs-counter-color: $font-color-primary !default;
981
+ $tabs-counter-font: ('font-size': $font-size-xs) !default;
982
982
  $tabs-counter-radius: $radius-s !default;
983
983
 
984
984
  /********** Всплывающие подсказки / Tooltips **********/
@@ -1013,30 +1013,43 @@ $warning-message-radius: $radius !default;
1013
1013
  $warning-message-shadow: $shadow !default;
1014
1014
  $warning-message-color: $color-warning !default;
1015
1015
 
1016
- $warning-message-title-font: ('font-weight': bold, 'font-size': $font-size-l, 'line-height': $line-height-s) !default;
1017
- $warning-message-descr-font: ('font-size': $font-size, 'line-height': $line-height) !default;
1018
- $warning-message-descr-color: $font-color-secondary !default;
1016
+ $warning-message-small-shadow: $shadow-s !default;
1019
1017
 
1020
- $warning-message-small-title-font: ('font-weight': bold, 'font-size': $font-size-s, 'line-height': $line-height-s) !default;
1021
- $warning-message-small-descr-font: ('font-size': $font-size-xs, 'line-height': $line-height) !default;
1018
+ $warning-message-solid-color: $font-color-inverted !default;
1022
1019
 
1023
1020
  $warning-message-success-color: $color-success !default;
1024
- $warning-message-info-color: $color-primary !default;
1025
- $warning-message-light-info-color: $color-primary-80 !default;
1026
- $warning-message-error-color: $color-error !default;
1027
-
1028
- $warning-message-solid-color: $font-color-inverted !default;
1029
1021
  $warning-message-solid-success-color: $warning-message-solid-color !default;
1022
+ $warning-message-info-color: $color-primary !default;
1030
1023
  $warning-message-solid-info-color: $warning-message-solid-color !default;
1024
+ $warning-message-light-info-color: $color-primary-70 !default;
1031
1025
  $warning-message-solid-light-info-color: $font-color-secondary !default;
1026
+ $warning-message-error-color: $color-error !default;
1032
1027
  $warning-message-solid-error-color: $warning-message-solid-color !default;
1033
1028
 
1029
+ $warning-message-title-font: ('font-weight': bold, 'font-size': $font-size-l, 'line-height': $line-height-s) !default;
1030
+ $warning-message-small-title-font: ('font-weight': bold, 'font-size': $font-size-s, 'line-height': $line-height-s) !default;
1031
+
1032
+ $warning-message-descr-font: ('font-size': $font-size, 'line-height': $line-height) !default;
1033
+ $warning-message-small-descr-font: ('font-size': $font-size-xs, 'line-height': $line-height) !default;
1034
+
1035
+ $warning-message-descr-color: $font-color-secondary !default;
1034
1036
  $warning-message-solid-descr-color: $warning-message-solid-color !default;
1035
1037
  $warning-message-solid-success-descr-color: $warning-message-solid-success-color !default;
1036
1038
  $warning-message-solid-info-descr-color: $warning-message-solid-info-color !default;
1037
1039
  $warning-message-solid-light-info-descr-color: $warning-message-solid-light-info-color !default;
1038
1040
  $warning-message-solid-error-descr-color: $warning-message-solid-error-color !default;
1039
1041
 
1042
+ $warning-message-icon-color: $warning-message-solid-color !default;
1043
+ $warning-message-solid-icon-color: $warning-message-icon-color !default;
1044
+ $warning-message-success-icon-color: $warning-message-solid-success-color !default;
1045
+ $warning-message-solid-success-icon-color: $warning-message-success-icon-color !default;
1046
+ $warning-message-info-icon-color: $warning-message-solid-info-color !default;
1047
+ $warning-message-solid-info-icon-color: $warning-message-info-icon-color !default;
1048
+ $warning-message-light-info-icon-color: $color-primary-70 !default;
1049
+ $warning-message-solid-light-info-icon-color: $color-primary !default;
1050
+ $warning-message-error-icon-color: $warning-message-solid-error-color !default;
1051
+ $warning-message-solid-error-icon-color: $warning-message-error-icon-color !default;
1052
+
1040
1053
  /********** Панель пустого состояния (.empty-list) **********/
1041
1054
 
1042
1055
  $empty-list-bg: $bg-color-tertiary !default;