@itcase/ui 1.0.77 → 1.0.79
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/dist/components/Accordion.js +2 -0
- package/dist/components/Avatar.js +58 -21
- package/dist/components/Badge.js +28 -4
- package/dist/components/Breadcrumbs.js +2 -0
- package/dist/components/Button.js +2 -0
- package/dist/components/Cell.js +2 -0
- package/dist/components/Choice.js +1 -1
- package/dist/components/ContextMenu.js +2 -0
- package/dist/components/CookiesWarning.js +2 -0
- package/dist/components/DatePicker.js +2 -0
- package/dist/components/Empty.js +2 -0
- package/dist/components/FormField.js +2 -0
- package/dist/components/Icon.js +11 -13
- package/dist/components/InputPassword.js +2 -0
- package/dist/components/LanguageSelector.js +2 -0
- package/dist/components/Search.js +2 -0
- package/dist/components/Select.js +143 -42
- package/dist/components/SiteMenu.js +2 -0
- package/dist/components/Swiper.js +383 -133
- package/dist/constants/componentProps/iconFillSize.js +5 -0
- package/dist/constants/componentProps/sizePX.js +1 -1
- package/dist/constants.js +2 -0
- package/dist/css/components/Avatar/Avatar.css +20 -13
- package/dist/css/components/Badge/Badge.css +25 -7
- package/dist/css/components/Swiper/Swiper.css +8 -6
- package/dist/hooks/styleAttributes.js +1 -1
- package/package.json +16 -16
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
const sizePXProps = [null, '14', '16', '24', '32', '40', '48', '56', '60', '64', '72', '80', '96', '112', '144'];
|
|
3
|
+
const sizePXProps = [null, '14', '16', '24', '32', '40', '48', '56', '60', '64', '72', '80', '96', '112', '144', '240'];
|
|
4
4
|
|
|
5
5
|
exports.default = sizePXProps;
|
package/dist/constants.js
CHANGED
|
@@ -24,6 +24,7 @@ var height = require('./constants/componentProps/height.js');
|
|
|
24
24
|
var horizontalContentAlign = require('./constants/componentProps/horizontalContentAlign.js');
|
|
25
25
|
var horizontalResizeMode = require('./constants/componentProps/horizontalResizeMode.js');
|
|
26
26
|
var iconSize = require('./constants/componentProps/iconSize.js');
|
|
27
|
+
var iconFillSize = require('./constants/componentProps/iconFillSize.js');
|
|
27
28
|
var itemColor = require('./constants/componentProps/itemColor.js');
|
|
28
29
|
var position = require('./constants/componentProps/position.js');
|
|
29
30
|
var resizeMode = require('./constants/componentProps/resizeMode.js');
|
|
@@ -78,6 +79,7 @@ exports.heightProps = height.default;
|
|
|
78
79
|
exports.horizontalContentAlignProps = horizontalContentAlign.default;
|
|
79
80
|
exports.horizontalResizeModeProps = horizontalResizeMode.default;
|
|
80
81
|
exports.iconSizeProps = iconSize.default;
|
|
82
|
+
exports.iconFillSizeProps = iconFillSize.default;
|
|
81
83
|
exports.itemColorProps = itemColor.default;
|
|
82
84
|
exports.positionProps = position.default;
|
|
83
85
|
exports.resizeModeProps = resizeMode.default;
|
|
@@ -1,10 +1,12 @@
|
|
|
1
1
|
.avatar {
|
|
2
2
|
&__wrapper {
|
|
3
|
-
display: flex;
|
|
4
3
|
position: relative;
|
|
4
|
+
display: flex;
|
|
5
5
|
justify-content: center;
|
|
6
6
|
align-items: center;
|
|
7
7
|
^&__image {
|
|
8
|
+
position: relative;
|
|
9
|
+
overflow: hidden;
|
|
8
10
|
}
|
|
9
11
|
^&__icon {
|
|
10
12
|
position: absolute;
|
|
@@ -15,18 +17,18 @@
|
|
|
15
17
|
}
|
|
16
18
|
.avatar {
|
|
17
19
|
&_size {
|
|
18
|
-
@each $size in 24, 32, 40, 60, 72, 96, 144, 240 {
|
|
20
|
+
@each $size in 14, 16, 24, 32, 40, 48, 56, 60, 64, 72, 80, 96, 112, 144, 240 {
|
|
19
21
|
&_$(size) {
|
|
20
22
|
^^&__wrapper {
|
|
21
|
-
^^^&__image {
|
|
22
|
-
width: $(size)px;
|
|
23
|
-
height: $(size)px;
|
|
24
|
-
}
|
|
25
23
|
width: $(size)px;
|
|
26
24
|
height: $(size)px;
|
|
27
25
|
display: flex;
|
|
28
|
-
align-items: center;
|
|
29
26
|
justify-content: center;
|
|
27
|
+
align-items: center;
|
|
28
|
+
^^^&__image {
|
|
29
|
+
width: $(size)px;
|
|
30
|
+
height: $(size)px;
|
|
31
|
+
}
|
|
30
32
|
}
|
|
31
33
|
}
|
|
32
34
|
}
|
|
@@ -34,15 +36,20 @@
|
|
|
34
36
|
}
|
|
35
37
|
.avatar {
|
|
36
38
|
&_shape {
|
|
37
|
-
&_rounded {
|
|
38
|
-
^^&__wrapper {
|
|
39
|
-
border-radius: 10px;
|
|
40
|
-
}
|
|
41
|
-
}
|
|
42
39
|
&_circular {
|
|
43
|
-
^^&
|
|
40
|
+
^^&__image {
|
|
44
41
|
border-radius: 50%;
|
|
45
42
|
}
|
|
46
43
|
}
|
|
44
|
+
&_geometric {
|
|
45
|
+
^^&__image {
|
|
46
|
+
border-radius: 0;
|
|
47
|
+
}
|
|
48
|
+
}
|
|
49
|
+
&_rounded {
|
|
50
|
+
^^&__image {
|
|
51
|
+
border-radius: 10px;
|
|
52
|
+
}
|
|
53
|
+
}
|
|
47
54
|
}
|
|
48
55
|
}
|
|
@@ -2,7 +2,6 @@
|
|
|
2
2
|
display: flex;
|
|
3
3
|
justify-content: center;
|
|
4
4
|
align-items: center;
|
|
5
|
-
border-radius: 50%;
|
|
6
5
|
}
|
|
7
6
|
.badge {
|
|
8
7
|
&_size {
|
|
@@ -32,25 +31,44 @@
|
|
|
32
31
|
}
|
|
33
32
|
}
|
|
34
33
|
}
|
|
34
|
+
.badge {
|
|
35
|
+
&_type_status {
|
|
36
|
+
&.badge_size {
|
|
37
|
+
@each $size in xxs, xs, s, m, l, xl, xxl {
|
|
38
|
+
&_$(size) {
|
|
39
|
+
min-width: var(--badge-status-width-size-$(size));
|
|
40
|
+
min-height: var(--badge-status-height-size-$(size));
|
|
41
|
+
max-width: var(--badge-status-width-size-$(size));
|
|
42
|
+
max-height: var(--badge-status-height-size-$(size));
|
|
43
|
+
}
|
|
44
|
+
}
|
|
45
|
+
}
|
|
46
|
+
}
|
|
47
|
+
}
|
|
48
|
+
.badge {
|
|
49
|
+
&_shape {
|
|
50
|
+
&_rounded {
|
|
51
|
+
border-radius: var(--badge-shape-rounded-default);
|
|
52
|
+
}
|
|
53
|
+
&_circular {
|
|
54
|
+
border-radius: 50%;
|
|
55
|
+
}
|
|
56
|
+
}
|
|
57
|
+
}
|
|
35
58
|
:root {
|
|
36
59
|
--badge-width-size-xxs: 16px;
|
|
37
60
|
--badge-height-size-xxs: 16px;
|
|
38
|
-
|
|
39
61
|
--badge-width-size-xs: 18px;
|
|
40
62
|
--badge-height-size-xs: 18px;
|
|
41
|
-
|
|
42
63
|
--badge-width-size-s: 20px;
|
|
43
64
|
--badge-height-size-s: 20px;
|
|
44
|
-
|
|
45
65
|
--badge-width-size-m: 24px;
|
|
46
66
|
--badge-height-size-m: 24px;
|
|
47
|
-
|
|
48
67
|
--badge-width-size-l: 32px;
|
|
49
68
|
--badge-height-size-l: 32px;
|
|
50
|
-
|
|
51
69
|
--badge-width-size-xl: 40px;
|
|
52
70
|
--badge-height-size-xl: 40px;
|
|
53
|
-
|
|
54
71
|
--badge-width-size-xxl: 48px;
|
|
55
72
|
--badge-height-size-xxl: 48px;
|
|
73
|
+
--badge-shape-rounded-default: 6px;
|
|
56
74
|
}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
/**
|
|
2
|
-
* Swiper
|
|
2
|
+
* Swiper 11.0.3
|
|
3
3
|
* Most modern mobile touch slider and framework with hardware accelerated transitions
|
|
4
4
|
* https://swiperjs.com
|
|
5
5
|
*
|
|
@@ -7,7 +7,7 @@
|
|
|
7
7
|
*
|
|
8
8
|
* Released under the MIT License
|
|
9
9
|
*
|
|
10
|
-
* Released on:
|
|
10
|
+
* Released on: October 26, 2023
|
|
11
11
|
*/
|
|
12
12
|
|
|
13
13
|
/* FONT_START */
|
|
@@ -42,7 +42,6 @@
|
|
|
42
42
|
margin-right: auto;
|
|
43
43
|
position: relative;
|
|
44
44
|
overflow: hidden;
|
|
45
|
-
overflow: clip;
|
|
46
45
|
list-style: none;
|
|
47
46
|
padding: 0;
|
|
48
47
|
/* Fix of Webkit flickering */
|
|
@@ -544,7 +543,8 @@ button.swiper-pagination-bullet {
|
|
|
544
543
|
.swiper-vertical > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet,
|
|
545
544
|
.swiper-pagination-vertical.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
|
|
546
545
|
display: inline-block;
|
|
547
|
-
transition: 200ms transform,
|
|
546
|
+
transition: 200ms transform,
|
|
547
|
+
200ms top;
|
|
548
548
|
}
|
|
549
549
|
|
|
550
550
|
.swiper-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet,
|
|
@@ -561,11 +561,13 @@ button.swiper-pagination-bullet {
|
|
|
561
561
|
|
|
562
562
|
.swiper-horizontal > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet,
|
|
563
563
|
.swiper-pagination-horizontal.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
|
|
564
|
-
transition: 200ms transform,
|
|
564
|
+
transition: 200ms transform,
|
|
565
|
+
200ms left;
|
|
565
566
|
}
|
|
566
567
|
|
|
567
568
|
.swiper-horizontal.swiper-rtl > .swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
|
|
568
|
-
transition: 200ms transform,
|
|
569
|
+
transition: 200ms transform,
|
|
570
|
+
200ms right;
|
|
569
571
|
}
|
|
570
572
|
|
|
571
573
|
/* Fraction */
|
|
@@ -28,7 +28,7 @@ var styleAttributes = [
|
|
|
28
28
|
/**
|
|
29
29
|
* Grid
|
|
30
30
|
*/
|
|
31
|
-
'gridTemplateColumns', 'gridArea', 'gridAutoColumns', 'gridAutoFlow', 'gridAutoRows', 'gridTemplate', 'gridTemplateAreas', 'gridTemplateRows',
|
|
31
|
+
'gridTemplateColumns', 'gridArea', 'gridAutoColumns', 'gridAutoFlow', 'gridAutoRows', 'gridTemplate', 'gridTemplateAreas', 'gridTemplateRows', 'gridColumnGap', 'gridRowGap',
|
|
32
32
|
/**
|
|
33
33
|
* Filter
|
|
34
34
|
*/
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@itcase/ui",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.79",
|
|
4
4
|
"description": "UI components (Modal, Loader, Popup, etc)",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"Modal",
|
|
@@ -40,26 +40,26 @@
|
|
|
40
40
|
"registry": "https://registry.npmjs.org/"
|
|
41
41
|
},
|
|
42
42
|
"dependencies": {
|
|
43
|
-
"@itcase/common": "^1.1.
|
|
43
|
+
"@itcase/common": "^1.1.9",
|
|
44
44
|
"clsx": "^2.0.0",
|
|
45
45
|
"html5-boilerplate": "^8.0.0",
|
|
46
46
|
"js-cookie": "^3.0.5",
|
|
47
47
|
"lodash": "^4.17.21",
|
|
48
48
|
"luxon": "^3.4.3",
|
|
49
49
|
"prop-types": "^15.8.1",
|
|
50
|
-
"rc-slider": "^10.
|
|
50
|
+
"rc-slider": "^10.4.0",
|
|
51
51
|
"react": "^18.2.0",
|
|
52
52
|
"react-dadata": "^2.23.1",
|
|
53
53
|
"react-date-range": "^1.4.0",
|
|
54
54
|
"react-dom": "^18.2.0",
|
|
55
|
-
"react-inlinesvg": "^4.0
|
|
55
|
+
"react-inlinesvg": "^4.1.0",
|
|
56
56
|
"react-modern-drawer": "^1.2.2",
|
|
57
57
|
"react-otp-input": "^3.1.0",
|
|
58
58
|
"react-paginate": "^8.2.0",
|
|
59
59
|
"react-responsive": "^9.0.2",
|
|
60
60
|
"react-scrollbars-custom": "^4.1.1",
|
|
61
|
-
"react-select": "^5.
|
|
62
|
-
"swiper": "^
|
|
61
|
+
"react-select": "^5.8.0",
|
|
62
|
+
"swiper": "^11.0.3",
|
|
63
63
|
"uuid": "^9.0.1"
|
|
64
64
|
},
|
|
65
65
|
"devDependencies": {
|
|
@@ -67,8 +67,8 @@
|
|
|
67
67
|
"@babel/eslint-parser": "^7.22.15",
|
|
68
68
|
"@babel/preset-env": "^7.23.2",
|
|
69
69
|
"@babel/preset-react": "^7.22.15",
|
|
70
|
-
"@commitlint/cli": "^
|
|
71
|
-
"@commitlint/config-conventional": "^
|
|
70
|
+
"@commitlint/cli": "^18.2.0",
|
|
71
|
+
"@commitlint/config-conventional": "^18.1.0",
|
|
72
72
|
"@rollup/plugin-babel": "^6.0.4",
|
|
73
73
|
"@rollup/plugin-commonjs": "^25.0.7",
|
|
74
74
|
"@rollup/plugin-json": "^6.0.1",
|
|
@@ -76,17 +76,17 @@
|
|
|
76
76
|
"@rollup/plugin-terser": "^0.4.4",
|
|
77
77
|
"@semantic-release/changelog": "^6.0.3",
|
|
78
78
|
"@semantic-release/git": "^10.0.1",
|
|
79
|
-
"@semantic-release/release-notes-generator": "^12.
|
|
79
|
+
"@semantic-release/release-notes-generator": "^12.1.0",
|
|
80
80
|
"babel-loader": "^9.1.3",
|
|
81
81
|
"babel-plugin-inline-react-svg": "^2.0.2",
|
|
82
82
|
"babel-plugin-react-docgen": "^4.2.1",
|
|
83
83
|
"babel-plugin-transform-react-remove-prop-types": "^0.4.24",
|
|
84
|
-
"eslint": "8.
|
|
84
|
+
"eslint": "8.53.0",
|
|
85
85
|
"eslint-config-prettier": "^9.0.0",
|
|
86
86
|
"eslint-config-standard": "^17.1.0",
|
|
87
87
|
"eslint-plugin-babel": "^5.3.1",
|
|
88
|
-
"eslint-plugin-import": "^2.
|
|
89
|
-
"eslint-plugin-n": "^16.
|
|
88
|
+
"eslint-plugin-import": "^2.29.0",
|
|
89
|
+
"eslint-plugin-n": "^16.3.0",
|
|
90
90
|
"eslint-plugin-node": "^11.1.0",
|
|
91
91
|
"eslint-plugin-prettier": "^5.0.1",
|
|
92
92
|
"eslint-plugin-promise": "^6.1.1",
|
|
@@ -95,7 +95,7 @@
|
|
|
95
95
|
"eslint-plugin-standard": "^5.0.0",
|
|
96
96
|
"husky": "^8.0.3",
|
|
97
97
|
"lint-staged": "^15.0.2",
|
|
98
|
-
"npm": "^10.2.
|
|
98
|
+
"npm": "^10.2.3",
|
|
99
99
|
"postcss": "^8.4.31",
|
|
100
100
|
"postcss-aspect-ratio-polyfill": "^2.0.0",
|
|
101
101
|
"postcss-cli": "^10.1.0",
|
|
@@ -114,15 +114,15 @@
|
|
|
114
114
|
"postcss-nested-ancestors": "^3.0.0",
|
|
115
115
|
"postcss-normalize": "^10.0.1",
|
|
116
116
|
"postcss-prepend-imports": "^1.0.1",
|
|
117
|
-
"postcss-preset-env": "^9.
|
|
117
|
+
"postcss-preset-env": "^9.3.0",
|
|
118
118
|
"postcss-pxtorem": "^6.0.0",
|
|
119
119
|
"postcss-responsive-type": "github:ITCase/postcss-responsive-type",
|
|
120
120
|
"postcss-sort-media-queries": "^5.2.0",
|
|
121
121
|
"prettier": "^3.0.3",
|
|
122
122
|
"react-datepicker": "^4.21.0",
|
|
123
|
-
"rollup": "^4.
|
|
123
|
+
"rollup": "^4.3.0",
|
|
124
124
|
"rollup-plugin-peer-deps-external": "^2.2.4",
|
|
125
|
-
"semantic-release": "^22.0.
|
|
125
|
+
"semantic-release": "^22.0.7",
|
|
126
126
|
"stylelint": "^15.11.0",
|
|
127
127
|
"stylelint-config-standard": "^34.0.0",
|
|
128
128
|
"stylelint-no-unsupported-browser-features": "^7.0.0",
|