@formixru/b2b-ui 1.8.0 → 1.9.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 (4) hide show
  1. package/CHANGELOG.md +4 -0
  2. package/package.json +1 -1
  3. package/src/components/tabs/index.js +69 -73
  4. package/src/components/tabs/index.scss +5 -0
package/CHANGELOG.md CHANGED
@@ -1,3 +1,7 @@
1
+ ## v1.9.0
2
+
3
+ - Табы: поддержка тегов кроме `button`
4
+
1
5
  ## v1.8.0
2
6
 
3
7
  - Возвращаем список файлов при событии upload в FileInput
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@formixru/b2b-ui",
3
- "version": "1.8.0",
3
+ "version": "1.9.0",
4
4
  "type": "module",
5
5
  "repository": {
6
6
  "type": "git",
package/src/components/tabs/index.js CHANGED
@@ -19,14 +19,25 @@ const setLeftWidth = async ($line, $el) => {
19
19
  }).finished;
20
20
  };
21
21
 
22
+ const setActive = ($el, active) => {
23
+ if ($el.tagName === 'BUTTON') {
24
+ $el.disabled = active;
25
+ } else if (active) {
26
+ $el.dataset.disabled = '';
27
+ } else {
28
+ delete $el.dataset.disabled;
29
+ }
30
+ };
31
+
22
32
  export const setInitLineStyles = ($b) => {
23
33
  const $nav = $b.querySelector('.tabs__nav');
24
34
  const $item = $nav.querySelectorAll('.tabs__item');
25
35
  const $line = $nav.querySelector('.tabs__line');
26
36
 
27
- const $el = [...$item].find((el) => {
28
- return el.disabled || (el.tagName !== 'BUTTON' && !el.href);
29
- });
37
+ const $el =
38
+ [...$item].find((el) => {
39
+ return el.tagName === 'BUTTON' ? el.disabled : el.dataset.disabled !== undefined;
40
+ }) || $item[0];
30
41
 
31
42
  setLeftWidth($line, $el);
32
43
  // Прокручиваем до нужного таба
@@ -54,83 +65,68 @@ export const init = async ($b) => {
54
65
  const handleItemClick = async (e) => {
55
66
  const $el = e.currentTarget;
56
67
  const index = [...$item].indexOf($el);
57
- if ($el.tagName === 'BUTTON') {
58
- if ($el.dataset.tabsFetch && $content[index].innerHTML.trim() === '') {
59
- showLoader();
60
- try {
61
- const response = await fetch($el.dataset.tabsFetch, {
62
- method: 'GET',
63
- headers: {
64
- 'X-Requested-With': 'XMLHttpRequest',
65
- 'X-Session-Id': BX.message('bitrix_sessid'),
66
- },
67
- });
68
- if (!response.ok) {
69
- throw response;
70
- }
71
- const data = await response.text();
72
- hideLoader();
73
- // Вставляем полученный HTML
74
- $content[index].innerHTML = data;
75
- // Переключаем таб
76
- for (const i of $item) i.disabled = false;
77
- $el.disabled = true;
78
- for (const [i, c] of $content.entries()) {
79
- if (i === index) {
80
- c.hidden = false;
81
- for (const swiperEl of c.querySelectorAll('.swiper')) {
82
- if (swiperEl.swiper) {
83
- swiperEl.swiper.update();
84
- }
85
- }
86
- for (const tabsEl of c.querySelectorAll('.tabs')) {
87
- setInitLineStyles(tabsEl);
88
- }
89
- // Инициализируем полученный HTML
90
- initTabsContent($content[index]);
91
- } else {
92
- c.hidden = true;
93
- }
94
- }
95
- } catch (error) {
96
- hideLoader();
97
- if (error.status === 401) {
98
- location.reload();
99
- } else {
100
- errorHandler(error);
101
- }
68
+
69
+ if ($el.tagName === 'A') {
70
+ e.preventDefault();
71
+ }
72
+
73
+ if ($el.dataset.tabsFetch && $content[index].innerHTML.trim() === '') {
74
+ showLoader();
75
+ try {
76
+ const response = await fetch($el.dataset.tabsFetch, {
77
+ method: 'GET',
78
+ headers: {
79
+ 'X-Requested-With': 'XMLHttpRequest',
80
+ 'X-Session-Id': BX.message('bitrix_sessid'),
81
+ },
82
+ });
83
+ if (!response.ok) {
84
+ throw response;
102
85
  }
103
- } else {
104
- // Переключаем таб
105
- for (const i of $item) i.disabled = false;
106
- $el.disabled = true;
107
- for (const [i, c] of $content.entries()) {
108
- if (i === index) {
109
- c.hidden = false;
110
- for (const swiperEl of c.querySelectorAll('.swiper')) {
111
- if (swiperEl.swiper) {
112
- swiperEl.swiper.update();
113
- }
114
- }
115
- for (const tabsEl of c.querySelectorAll('.tabs')) {
116
- setInitLineStyles(tabsEl);
117
- }
118
- // Инициализируем полученный HTML
119
- initTabsContent($content[index]);
120
- } else {
121
- c.hidden = true;
122
- }
86
+ const data = await response.text();
87
+ hideLoader();
88
+ // Вставляем полученный HTML
89
+ $content[index].innerHTML = data;
90
+ } catch (error) {
91
+ hideLoader();
92
+ if (error.status === 401) {
93
+ location.reload();
94
+ } else {
95
+ errorHandler(error);
123
96
  }
97
+ return;
124
98
  }
99
+ }
125
100
 
126
- if ($nav.swiper) {
127
- $nav.swiper.slideTo(index);
128
- }
101
+ // Переключаем таб
102
+ for (const i of $item) setActive(i, false);
103
+ setActive($el, true);
129
104
 
130
- if ($line) {
131
- setLeftWidth($line, $el);
105
+ for (const [i, c] of $content.entries()) {
106
+ if (i === index) {
107
+ c.hidden = false;
108
+ for (const swiperEl of c.querySelectorAll('.swiper')) {
109
+ if (swiperEl.swiper) {
110
+ swiperEl.swiper.update();
111
+ }
112
+ }
113
+ for (const tabsEl of c.querySelectorAll('.tabs')) {
114
+ setInitLineStyles(tabsEl);
115
+ }
116
+ // Инициализируем полученный HTML
117
+ initTabsContent($content[index]);
118
+ } else {
119
+ c.hidden = true;
132
120
  }
133
121
  }
122
+
123
+ if ($nav.swiper) {
124
+ $nav.swiper.slideTo(index);
125
+ }
126
+
127
+ if ($line) {
128
+ setLeftWidth($line, $el);
129
+ }
134
130
  };
135
131
 
136
132
  if ($nav.swiper) {
package/src/components/tabs/index.scss CHANGED
@@ -102,6 +102,11 @@ $b: '.tabs';
102
102
  &.swiper-slide {
103
103
  width: auto;
104
104
  }
105
+
106
+ &[data-disabled] {
107
+ color: $font-color-primary;
108
+ pointer-events: none;
109
+ }
105
110
  }
106
111
 
107
112
  &__label {