@semcore/progress-bar 3.1.0 → 3.1.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/CHANGELOG.md +6 -0
- package/lib/cjs/ProgressBar.js +16 -16
- package/lib/cjs/index.d.js +2 -0
- package/lib/cjs/index.d.js.map +1 -0
- package/lib/es6/ProgressBar.js +16 -16
- package/lib/es6/index.d.js +2 -0
- package/lib/es6/index.d.js.map +1 -0
- package/package.json +3 -2
- package/lib/cjs/index.d.ts +0 -40
- package/lib/es6/index.d.ts +0 -40
package/CHANGELOG.md
CHANGED
|
@@ -2,6 +2,12 @@
|
|
|
2
2
|
|
|
3
3
|
CHANGELOG.md standards are inspired by [keepachangelog.com](https://keepachangelog.com/en/1.0.0/).
|
|
4
4
|
|
|
5
|
+
## [3.1.1] - 2022-10-04
|
|
6
|
+
|
|
7
|
+
### Changed
|
|
8
|
+
|
|
9
|
+
- Version patch update due to children dependencies update (`@semcore/flex-box` [4.5.11 ~> 4.5.12], `@semcore/utils` [3.37.1 ~> 3.37.2]).
|
|
10
|
+
|
|
5
11
|
## [3.1.0] - 2022-09-20
|
|
6
12
|
|
|
7
13
|
### Fixed
|
package/lib/cjs/ProgressBar.js
CHANGED
|
@@ -46,25 +46,25 @@ var style = (
|
|
|
46
46
|
/*__reshadow_css_start__*/
|
|
47
47
|
_core.sstyled.insert(
|
|
48
48
|
/*__inner_css_start__*/
|
|
49
|
-
".
|
|
49
|
+
".___SProgressBar_1k6xc_gg_{position:relative;width:100%;overflow:hidden}.___SValue_1k6xc_gg_{position:absolute;top:0;left:0;background-image:linear-gradient(-45deg,#008f74 25%,#009f81 0,#009f81 50%,#008f74 0,#008f74 76%,#009f81 0);overflow:hidden;animation-name:loading_1k6xc;animation-timing-function:linear;animation-iteration-count:infinite;transition-property:width;transition-timing-function:linear;transition-duration:1s}.___SProgressBar_1k6xc_gg_._size_s_1k6xc_gg_,.___SValue_1k6xc_gg_._size_s_1k6xc_gg_{height:4px;border-radius:6px;background-size:8px 8px}.___SProgressBar_1k6xc_gg_._size_m_1k6xc_gg_,.___SValue_1k6xc_gg_._size_m_1k6xc_gg_{height:8px;border-radius:6px;background-size:12px 12px}.___SProgressBar_1k6xc_gg_._size_l_1k6xc_gg_,.___SValue_1k6xc_gg_._size_l_1k6xc_gg_{height:12px;border-radius:6px;background-size:16px 16px}.___SProgressBar_1k6xc_gg_._theme_dark_1k6xc_gg_{background-color:hsla(0,0%,100%,.2)}.___SProgressBar_1k6xc_gg_._theme_invert_1k6xc_gg_{background-color:#e0e1e9}@keyframes loading_1k6xc{0%{background-position:0 0}to{background-position:60px 0}}.___SProgressBar_1k6xc_gg_.__animation_1k6xc_gg_{background-image:linear-gradient(-45deg,#cacbd2 25%,#e0e1e9 0,#e0e1e9 50%,#cacbd2 0,#cacbd2 76%,#e0e1e9 0);animation-name:loading_1k6xc;animation-timing-function:linear;animation-iteration-count:infinite}.___SProgressBar_1k6xc_gg_._theme_custom_1k6xc_gg_{background-color:var(--colorBg_1k6xc);background-image:var(--colorBg_1k6xc)}.___SProgressBar_1k6xc_gg_.__animation_1k6xc_gg_{animation-duration:var(--duration_1k6xc)}.___SValue_1k6xc_gg_{width:var(--width_1k6xc);animation-duration:var(--duration_1k6xc)}.___SValue_1k6xc_gg_.__theme_1k6xc_gg_{background-color:var(--colorBg_1k6xc);background-image:var(--colorBg_1k6xc)}@media (prefers-reduced-motion){.___SValue_1k6xc_gg_{animation-name:none}.___SProgressBar_1k6xc_gg_.__animation_1k6xc_gg_{animation-name:none}}"
|
|
50
50
|
/*__inner_css_end__*/
|
|
51
|
-
, "
|
|
51
|
+
, "1k6xc_gg_")
|
|
52
52
|
/*__reshadow_css_end__*/
|
|
53
53
|
, {
|
|
54
|
-
"__SProgressBar": "
|
|
55
|
-
"__SValue": "
|
|
56
|
-
"_size_s": "
|
|
57
|
-
"_size_m": "
|
|
58
|
-
"_size_l": "
|
|
59
|
-
"_theme_dark": "
|
|
60
|
-
"_theme_invert": "
|
|
61
|
-
"@loading": "
|
|
62
|
-
"_animation": "
|
|
63
|
-
"_theme_custom": "
|
|
64
|
-
"--colorBg": "--
|
|
65
|
-
"--duration": "--
|
|
66
|
-
"--width": "--
|
|
67
|
-
"_theme": "
|
|
54
|
+
"__SProgressBar": "___SProgressBar_1k6xc_gg_",
|
|
55
|
+
"__SValue": "___SValue_1k6xc_gg_",
|
|
56
|
+
"_size_s": "_size_s_1k6xc_gg_",
|
|
57
|
+
"_size_m": "_size_m_1k6xc_gg_",
|
|
58
|
+
"_size_l": "_size_l_1k6xc_gg_",
|
|
59
|
+
"_theme_dark": "_theme_dark_1k6xc_gg_",
|
|
60
|
+
"_theme_invert": "_theme_invert_1k6xc_gg_",
|
|
61
|
+
"@loading": "loading_1k6xc",
|
|
62
|
+
"_animation": "__animation_1k6xc_gg_",
|
|
63
|
+
"_theme_custom": "_theme_custom_1k6xc_gg_",
|
|
64
|
+
"--colorBg": "--colorBg_1k6xc",
|
|
65
|
+
"--duration": "--duration_1k6xc",
|
|
66
|
+
"--width": "--width_1k6xc",
|
|
67
|
+
"_theme": "__theme_1k6xc_gg_"
|
|
68
68
|
});
|
|
69
69
|
|
|
70
70
|
function isCustomTheme(theme) {
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.js","names":[],"sources":["../../src/index.d.ts"],"sourcesContent":["import { ReturnEl, CProps, PropGetterFn } from '@semcore/core';\nimport { IBoxProps } from '@semcore/flex-box';\n\nexport interface IProgressBarProps extends IBoxProps {\n /**\n * Progress bar theme\n * @default invert\n */\n theme?: 'dark' | 'invert' | string;\n /**\n * Progress bar size\n * @default m\n */\n size?: 's' | 'm' | 'l';\n /** Value as a percentage */\n value?: number;\n /** Duration of animation, ms\n * @default 1000\n */\n duration?: number;\n}\n\nexport interface IValueProps extends IBoxProps {\n size?: 's' | 'm' | 'l';\n value?: number;\n duration?: number;\n theme?: string;\n}\n\nexport interface IProgressBarCxt {\n getValueProps: PropGetterFn;\n}\n\ndeclare const ProgressBar: (<T>(\n props: CProps<IProgressBarProps & T, IProgressBarCxt>,\n) => ReturnEl) & {\n Value: <T>(props: IValueProps & T) => ReturnEl;\n};\n\nexport default ProgressBar;\n"],"mappings":""}
|
package/lib/es6/ProgressBar.js
CHANGED
|
@@ -26,25 +26,25 @@ var style = (
|
|
|
26
26
|
/*__reshadow_css_start__*/
|
|
27
27
|
_sstyled.insert(
|
|
28
28
|
/*__inner_css_start__*/
|
|
29
|
-
".
|
|
29
|
+
".___SProgressBar_1k6xc_gg_{position:relative;width:100%;overflow:hidden}.___SValue_1k6xc_gg_{position:absolute;top:0;left:0;background-image:linear-gradient(-45deg,#008f74 25%,#009f81 0,#009f81 50%,#008f74 0,#008f74 76%,#009f81 0);overflow:hidden;animation-name:loading_1k6xc;animation-timing-function:linear;animation-iteration-count:infinite;transition-property:width;transition-timing-function:linear;transition-duration:1s}.___SProgressBar_1k6xc_gg_._size_s_1k6xc_gg_,.___SValue_1k6xc_gg_._size_s_1k6xc_gg_{height:4px;border-radius:6px;background-size:8px 8px}.___SProgressBar_1k6xc_gg_._size_m_1k6xc_gg_,.___SValue_1k6xc_gg_._size_m_1k6xc_gg_{height:8px;border-radius:6px;background-size:12px 12px}.___SProgressBar_1k6xc_gg_._size_l_1k6xc_gg_,.___SValue_1k6xc_gg_._size_l_1k6xc_gg_{height:12px;border-radius:6px;background-size:16px 16px}.___SProgressBar_1k6xc_gg_._theme_dark_1k6xc_gg_{background-color:hsla(0,0%,100%,.2)}.___SProgressBar_1k6xc_gg_._theme_invert_1k6xc_gg_{background-color:#e0e1e9}@keyframes loading_1k6xc{0%{background-position:0 0}to{background-position:60px 0}}.___SProgressBar_1k6xc_gg_.__animation_1k6xc_gg_{background-image:linear-gradient(-45deg,#cacbd2 25%,#e0e1e9 0,#e0e1e9 50%,#cacbd2 0,#cacbd2 76%,#e0e1e9 0);animation-name:loading_1k6xc;animation-timing-function:linear;animation-iteration-count:infinite}.___SProgressBar_1k6xc_gg_._theme_custom_1k6xc_gg_{background-color:var(--colorBg_1k6xc);background-image:var(--colorBg_1k6xc)}.___SProgressBar_1k6xc_gg_.__animation_1k6xc_gg_{animation-duration:var(--duration_1k6xc)}.___SValue_1k6xc_gg_{width:var(--width_1k6xc);animation-duration:var(--duration_1k6xc)}.___SValue_1k6xc_gg_.__theme_1k6xc_gg_{background-color:var(--colorBg_1k6xc);background-image:var(--colorBg_1k6xc)}@media (prefers-reduced-motion){.___SValue_1k6xc_gg_{animation-name:none}.___SProgressBar_1k6xc_gg_.__animation_1k6xc_gg_{animation-name:none}}"
|
|
30
30
|
/*__inner_css_end__*/
|
|
31
|
-
, "
|
|
31
|
+
, "1k6xc_gg_")
|
|
32
32
|
/*__reshadow_css_end__*/
|
|
33
33
|
, {
|
|
34
|
-
"__SProgressBar": "
|
|
35
|
-
"__SValue": "
|
|
36
|
-
"_size_s": "
|
|
37
|
-
"_size_m": "
|
|
38
|
-
"_size_l": "
|
|
39
|
-
"_theme_dark": "
|
|
40
|
-
"_theme_invert": "
|
|
41
|
-
"@loading": "
|
|
42
|
-
"_animation": "
|
|
43
|
-
"_theme_custom": "
|
|
44
|
-
"--colorBg": "--
|
|
45
|
-
"--duration": "--
|
|
46
|
-
"--width": "--
|
|
47
|
-
"_theme": "
|
|
34
|
+
"__SProgressBar": "___SProgressBar_1k6xc_gg_",
|
|
35
|
+
"__SValue": "___SValue_1k6xc_gg_",
|
|
36
|
+
"_size_s": "_size_s_1k6xc_gg_",
|
|
37
|
+
"_size_m": "_size_m_1k6xc_gg_",
|
|
38
|
+
"_size_l": "_size_l_1k6xc_gg_",
|
|
39
|
+
"_theme_dark": "_theme_dark_1k6xc_gg_",
|
|
40
|
+
"_theme_invert": "_theme_invert_1k6xc_gg_",
|
|
41
|
+
"@loading": "loading_1k6xc",
|
|
42
|
+
"_animation": "__animation_1k6xc_gg_",
|
|
43
|
+
"_theme_custom": "_theme_custom_1k6xc_gg_",
|
|
44
|
+
"--colorBg": "--colorBg_1k6xc",
|
|
45
|
+
"--duration": "--duration_1k6xc",
|
|
46
|
+
"--width": "--width_1k6xc",
|
|
47
|
+
"_theme": "__theme_1k6xc_gg_"
|
|
48
48
|
});
|
|
49
49
|
|
|
50
50
|
function isCustomTheme(theme) {
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.js","names":[],"sources":["../../src/index.d.ts"],"sourcesContent":["import { ReturnEl, CProps, PropGetterFn } from '@semcore/core';\nimport { IBoxProps } from '@semcore/flex-box';\n\nexport interface IProgressBarProps extends IBoxProps {\n /**\n * Progress bar theme\n * @default invert\n */\n theme?: 'dark' | 'invert' | string;\n /**\n * Progress bar size\n * @default m\n */\n size?: 's' | 'm' | 'l';\n /** Value as a percentage */\n value?: number;\n /** Duration of animation, ms\n * @default 1000\n */\n duration?: number;\n}\n\nexport interface IValueProps extends IBoxProps {\n size?: 's' | 'm' | 'l';\n value?: number;\n duration?: number;\n theme?: string;\n}\n\nexport interface IProgressBarCxt {\n getValueProps: PropGetterFn;\n}\n\ndeclare const ProgressBar: (<T>(\n props: CProps<IProgressBarProps & T, IProgressBarCxt>,\n) => ReturnEl) & {\n Value: <T>(props: IValueProps & T) => ReturnEl;\n};\n\nexport default ProgressBar;\n"],"mappings":""}
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@semcore/progress-bar",
|
|
3
3
|
"description": "Semrush ProgressBar Component",
|
|
4
|
-
"version": "3.1.
|
|
4
|
+
"version": "3.1.1",
|
|
5
5
|
"main": "lib/cjs/index.js",
|
|
6
6
|
"module": "lib/es6/index.js",
|
|
7
7
|
"typings": "lib/types/index.d.ts",
|
|
@@ -9,7 +9,7 @@
|
|
|
9
9
|
"author": "UI-kit team <ui-kit-team@semrush.com>",
|
|
10
10
|
"license": "MIT",
|
|
11
11
|
"scripts": {
|
|
12
|
-
"build": "
|
|
12
|
+
"build": "pnpm semcore-builder --source=js",
|
|
13
13
|
"test": "jest"
|
|
14
14
|
},
|
|
15
15
|
"dependencies": {
|
|
@@ -29,6 +29,7 @@
|
|
|
29
29
|
"directory": "semcore/progress-bar"
|
|
30
30
|
},
|
|
31
31
|
"devDependencies": {
|
|
32
|
+
"@types/react": "16.8 - 17",
|
|
32
33
|
"@guidepup/playwright": "0.6.1",
|
|
33
34
|
"@playwright/test": "1.25.1",
|
|
34
35
|
"@semcore/jest-preset-ui": "1.0.0"
|
package/lib/cjs/index.d.ts
DELETED
|
@@ -1,40 +0,0 @@
|
|
|
1
|
-
import { ReturnEl, CProps, PropGetterFn } from '@semcore/core';
|
|
2
|
-
import { IBoxProps } from '@semcore/flex-box';
|
|
3
|
-
|
|
4
|
-
export interface IProgressBarProps extends IBoxProps {
|
|
5
|
-
/**
|
|
6
|
-
* Progress bar theme
|
|
7
|
-
* @default invert
|
|
8
|
-
*/
|
|
9
|
-
theme?: 'dark' | 'invert' | string;
|
|
10
|
-
/**
|
|
11
|
-
* Progress bar size
|
|
12
|
-
* @default m
|
|
13
|
-
*/
|
|
14
|
-
size?: 's' | 'm' | 'l';
|
|
15
|
-
/** Value as a percentage */
|
|
16
|
-
value?: number;
|
|
17
|
-
/** Duration of animation, ms
|
|
18
|
-
* @default 1000
|
|
19
|
-
*/
|
|
20
|
-
duration?: number;
|
|
21
|
-
}
|
|
22
|
-
|
|
23
|
-
export interface IValueProps extends IBoxProps {
|
|
24
|
-
size?: 's' | 'm' | 'l';
|
|
25
|
-
value?: number;
|
|
26
|
-
duration?: number;
|
|
27
|
-
theme?: string;
|
|
28
|
-
}
|
|
29
|
-
|
|
30
|
-
export interface IProgressBarCxt {
|
|
31
|
-
getValueProps: PropGetterFn;
|
|
32
|
-
}
|
|
33
|
-
|
|
34
|
-
declare const ProgressBar: (<T>(
|
|
35
|
-
props: CProps<IProgressBarProps & T, IProgressBarCxt>,
|
|
36
|
-
) => ReturnEl) & {
|
|
37
|
-
Value: <T>(props: IValueProps & T) => ReturnEl;
|
|
38
|
-
};
|
|
39
|
-
|
|
40
|
-
export default ProgressBar;
|
package/lib/es6/index.d.ts
DELETED
|
@@ -1,40 +0,0 @@
|
|
|
1
|
-
import { ReturnEl, CProps, PropGetterFn } from '@semcore/core';
|
|
2
|
-
import { IBoxProps } from '@semcore/flex-box';
|
|
3
|
-
|
|
4
|
-
export interface IProgressBarProps extends IBoxProps {
|
|
5
|
-
/**
|
|
6
|
-
* Progress bar theme
|
|
7
|
-
* @default invert
|
|
8
|
-
*/
|
|
9
|
-
theme?: 'dark' | 'invert' | string;
|
|
10
|
-
/**
|
|
11
|
-
* Progress bar size
|
|
12
|
-
* @default m
|
|
13
|
-
*/
|
|
14
|
-
size?: 's' | 'm' | 'l';
|
|
15
|
-
/** Value as a percentage */
|
|
16
|
-
value?: number;
|
|
17
|
-
/** Duration of animation, ms
|
|
18
|
-
* @default 1000
|
|
19
|
-
*/
|
|
20
|
-
duration?: number;
|
|
21
|
-
}
|
|
22
|
-
|
|
23
|
-
export interface IValueProps extends IBoxProps {
|
|
24
|
-
size?: 's' | 'm' | 'l';
|
|
25
|
-
value?: number;
|
|
26
|
-
duration?: number;
|
|
27
|
-
theme?: string;
|
|
28
|
-
}
|
|
29
|
-
|
|
30
|
-
export interface IProgressBarCxt {
|
|
31
|
-
getValueProps: PropGetterFn;
|
|
32
|
-
}
|
|
33
|
-
|
|
34
|
-
declare const ProgressBar: (<T>(
|
|
35
|
-
props: CProps<IProgressBarProps & T, IProgressBarCxt>,
|
|
36
|
-
) => ReturnEl) & {
|
|
37
|
-
Value: <T>(props: IValueProps & T) => ReturnEl;
|
|
38
|
-
};
|
|
39
|
-
|
|
40
|
-
export default ProgressBar;
|