indicator-ui 0.0.153 → 0.0.155
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/fonts/golos-text_demibold.05e6a34649d70eb79fef.woff +0 -0
- package/dist/fonts/golos-text_demibold.56576690cfef6589aa86.ttf +0 -0
- package/dist/fonts/golos-text_demibold.e1665fc873e3565a6eed.woff2 +0 -0
- package/dist/fonts/golos-text_medium.443c23223f5e9ffa67f6.ttf +0 -0
- package/dist/fonts/golos-text_medium.69f15b6afe697154d728.woff2 +0 -0
- package/dist/fonts/golos-text_medium.ffa67c71c79e49888091.woff +0 -0
- package/dist/fonts/golos-text_regular.012c46c94b1cd02ee582.woff2 +0 -0
- package/dist/fonts/golos-text_regular.23f4c2d2931cfb0070d9.ttf +0 -0
- package/dist/fonts/golos-text_regular.437e7b47534cc7d6fd24.woff +0 -0
- package/dist/index.css +513 -26
- package/dist/index.css.map +1 -1
- package/dist/index.js +32 -27
- package/dist/index.js.map +1 -1
- package/dist/scss/styles/fonts.scss +29 -1
- package/dist/scss/styles/fontsAssets/Golos-Text/golos-text_demibold.ttf +0 -0
- package/dist/scss/styles/fontsAssets/Golos-Text/golos-text_demibold.woff +0 -0
- package/dist/scss/styles/fontsAssets/Golos-Text/golos-text_demibold.woff2 +0 -0
- package/dist/scss/styles/fontsAssets/Golos-Text/golos-text_medium.ttf +0 -0
- package/dist/scss/styles/fontsAssets/Golos-Text/golos-text_medium.woff +0 -0
- package/dist/scss/styles/fontsAssets/Golos-Text/golos-text_medium.woff2 +0 -0
- package/dist/scss/styles/fontsAssets/Golos-Text/golos-text_regular.ttf +0 -0
- package/dist/scss/styles/fontsAssets/Golos-Text/golos-text_regular.woff +0 -0
- package/dist/scss/styles/fontsAssets/Golos-Text/golos-text_regular.woff2 +0 -0
- package/dist/scss/styles/mixins/fnt.scss +4 -1
- package/dist/scss/ui/InputFields/FlexField/styles/mixins/flexField.scss +1 -1
- package/dist/types/src/ui/Checkbox/types/CheckboxTypes.d.ts +3 -0
- package/dist/types/src/ui/InputFields/InputField/types/InputFieldTypes.d.ts +3 -1
- package/dist/types/src/ui/InputFields/RadioField/types/RadioFieldItemTypes.d.ts +1 -0
- package/dist/types/src/ui/InputFields/RadioField/types/RadioFieldTypes.d.ts +2 -0
- package/dist/types/src/ui/InputFields/RadioField/ui/RadioField.d.ts +1 -1
- package/dist/types/src/ui/InputFields/RadioField/ui/RadioFieldItem.d.ts +1 -1
- package/dist/types/src/ui/ScrollProvider/types/ScrollProviderTypes.d.ts +10 -1
- package/dist/types/src/ui/ScrollProvider/ui/ScrollProvider.d.ts +8 -1
- package/package.json +1 -1
- package/dist/scss/ui/InputFields/InputField/styles/mixins/index.scss +0 -1
- package/dist/scss/ui/InputFields/InputField/styles/mixins/inputField.scss +0 -17
- package/dist/scss/ui/InputFields/RadioField/styles/mixins/index.scss +0 -1
- package/dist/scss/ui/InputFields/RadioField/styles/mixins/radioField.scss +0 -45
- package/dist/scss/ui/InputFields/SwitcherField/styles/mixins/index.scss +0 -1
- package/dist/scss/ui/InputFields/SwitcherField/styles/mixins/switcherField.scss +0 -92
- package/dist/scss/ui/InputFields/TextareaField/styles/mixin/index.scss +0 -1
- package/dist/scss/ui/InputFields/TextareaField/styles/mixin/textareaField.scss +0 -49
- package/dist/types/src/ui/InputFields/InputField/styles/index.d.ts +0 -1
- package/dist/types/src/ui/InputFields/RadioField/styles/index.d.ts +0 -1
- package/dist/types/src/ui/InputFields/SwitcherField/styles/index.d.ts +0 -1
|
@@ -28,4 +28,32 @@
|
|
|
28
28
|
font-style: normal;
|
|
29
29
|
}
|
|
30
30
|
|
|
31
|
-
|
|
31
|
+
@font-face {
|
|
32
|
+
font-family: "Golos Text";
|
|
33
|
+
src: local("Golos Text"),
|
|
34
|
+
url("./fontsAssets/Golos-Text/golos-text_regular.ttf") format("truetype"),
|
|
35
|
+
url("./fontsAssets/Golos-Text/golos-text_regular.woff2") format("woff2"),
|
|
36
|
+
url("./fontsAssets/Golos-Text/golos-text_regular.woff") format("woff");
|
|
37
|
+
font-weight: 400;
|
|
38
|
+
font-style: normal;
|
|
39
|
+
}
|
|
40
|
+
|
|
41
|
+
@font-face {
|
|
42
|
+
font-family: "Golos Text";
|
|
43
|
+
src: local("Golos Text"),
|
|
44
|
+
url("./fontsAssets/Golos-Text/golos-text_medium.ttf") format("truetype"),
|
|
45
|
+
url("./fontsAssets/Golos-Text/golos-text_medium.woff2") format("woff2"),
|
|
46
|
+
url("./fontsAssets/Golos-Text/golos-text_medium.woff") format("woff");
|
|
47
|
+
font-weight: 500;
|
|
48
|
+
font-style: normal;
|
|
49
|
+
}
|
|
50
|
+
|
|
51
|
+
@font-face {
|
|
52
|
+
font-family: "Golos Text";
|
|
53
|
+
src: local("Golos Text"),
|
|
54
|
+
url("./fontsAssets/Golos-Text/golos-text_demibold.ttf") format("truetype"),
|
|
55
|
+
url("./fontsAssets/Golos-Text/golos-text_demibold.woff2") format("woff2"),
|
|
56
|
+
url("./fontsAssets/Golos-Text/golos-text_demibold.woff") format("woff");
|
|
57
|
+
font-weight: 600;
|
|
58
|
+
font-style: normal;
|
|
59
|
+
}
|
|
Binary file
|
|
Binary file
|
|
Binary file
|
|
Binary file
|
|
Binary file
|
|
Binary file
|
|
Binary file
|
|
Binary file
|
|
@@ -1,11 +1,14 @@
|
|
|
1
1
|
@use "../fonts";
|
|
2
2
|
|
|
3
|
+
$golos-ui: 'Golos UI', sans-serif;
|
|
4
|
+
$golos-text: 'Golos Text', sans-serif;
|
|
5
|
+
|
|
3
6
|
@mixin fnt(
|
|
4
7
|
$size: 16,
|
|
5
8
|
$line-height: 24,
|
|
6
9
|
$color: black,
|
|
7
10
|
$weight: 400,
|
|
8
|
-
$family:
|
|
11
|
+
$family: $golos-ui,
|
|
9
12
|
$stretch: normal,
|
|
10
13
|
$style: normal,
|
|
11
14
|
$variant: normal,
|
|
@@ -6,13 +6,15 @@ import { TextareaFieldPropsType } from '../../TextareaField';
|
|
|
6
6
|
import { InputFieldWrapperPropsType } from "../../InputFieldWrapper";
|
|
7
7
|
import { DateTimeFieldPropsType } from "../../DateTimeField";
|
|
8
8
|
import { DateTimeRangeFieldPropsType } from "../../../../ui/InputFields/DateTimeRangeField";
|
|
9
|
-
export type InputFieldTypes = 'switcher' | 'select' | 'radio' | 'textarea' | 'date' | 'time' | 'datetime' | 'datetime-range' | string;
|
|
9
|
+
export type InputFieldTypes = 'switcher' | 'select' | 'radio' | 'checkbox' | 'textarea' | 'date' | 'time' | 'datetime' | 'datetime-range' | 'checkbox' | string;
|
|
10
10
|
export type InputFieldPropsType = Omit<(({
|
|
11
11
|
type?: 'switcher';
|
|
12
12
|
} & SwitcherFieldPropsType) & ({
|
|
13
13
|
type?: 'select';
|
|
14
14
|
} & SelectFieldPropsType) & ({
|
|
15
15
|
type?: 'radio';
|
|
16
|
+
} & RadioFieldPropsType) & ({
|
|
17
|
+
type?: 'checkbox';
|
|
16
18
|
} & RadioFieldPropsType) & ({
|
|
17
19
|
type?: 'textarea';
|
|
18
20
|
} & TextareaFieldPropsType) & ({
|
|
@@ -4,6 +4,7 @@ import { FieldsBasePropsType } from '../../FieldsBase';
|
|
|
4
4
|
export type RadioFieldOptionsItemType = {
|
|
5
5
|
value: any;
|
|
6
6
|
label?: string;
|
|
7
|
+
description?: string;
|
|
7
8
|
component?: ReactElement<RadioFieldOwnerItemPropsType>;
|
|
8
9
|
};
|
|
9
10
|
export type RadioFieldOptionsType = RadioFieldOptionsItemType[];
|
|
@@ -12,4 +13,5 @@ export type RadioFieldPropsType = FieldsBasePropsType<RadioFieldValueType> & {
|
|
|
12
13
|
options?: RadioFieldOptionsType;
|
|
13
14
|
multiple?: boolean;
|
|
14
15
|
width?: 'hug' | 'fill';
|
|
16
|
+
type?: 'checkbox' | 'radio';
|
|
15
17
|
};
|
|
@@ -1,3 +1,3 @@
|
|
|
1
1
|
import React from "react";
|
|
2
2
|
import { RadioFieldPropsType } from "../types";
|
|
3
|
-
export default function RadioField({ value, onChange, options, required, multiple, disabled, width, }: RadioFieldPropsType): React.JSX.Element;
|
|
3
|
+
export default function RadioField({ value, onChange, options, required, multiple, disabled, width, type, }: RadioFieldPropsType): React.JSX.Element;
|
|
@@ -1,3 +1,3 @@
|
|
|
1
1
|
import React from "react";
|
|
2
2
|
import { RadioFieldItemPropsType } from "../types";
|
|
3
|
-
export default function RadioFieldItem({ option, onClick, active, disabled, width, }: RadioFieldItemPropsType): React.JSX.Element;
|
|
3
|
+
export default function RadioFieldItem({ type, option, onClick, active, disabled, width, }: RadioFieldItemPropsType): React.JSX.Element;
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import React from "react";
|
|
1
|
+
import React, { ReactNode, Ref } from "react";
|
|
2
2
|
/**
|
|
3
3
|
* Триггер события скролла, может быть,
|
|
4
4
|
* либо значением отступа скролла от верха компонента
|
|
@@ -31,4 +31,13 @@ export type ScrollProviderPropsType = {
|
|
|
31
31
|
* По умолчанию: *10* _(10px)_.
|
|
32
32
|
* */
|
|
33
33
|
accuracy?: number;
|
|
34
|
+
/**
|
|
35
|
+
* Компонент обертка, скролл которого будет отслеживаться.
|
|
36
|
+
*
|
|
37
|
+
* **Warning:** у компонента есть обязательные _пропсы_: `ref`, `children`
|
|
38
|
+
* */
|
|
39
|
+
wrapper?: React.ReactElement<{
|
|
40
|
+
children?: ReactNode;
|
|
41
|
+
ref: Ref<HTMLElement>;
|
|
42
|
+
}>;
|
|
34
43
|
};
|
|
@@ -1,2 +1,9 @@
|
|
|
1
1
|
import { ScrollProviderPropsType } from "../types";
|
|
2
|
-
|
|
2
|
+
import React from "react";
|
|
3
|
+
/**
|
|
4
|
+
* Компонент для отслеживания скролла в разных обстоятельствах.
|
|
5
|
+
* */
|
|
6
|
+
export declare function ScrollProvider({ onScroll, onScrollTop, onScrollBottom, children, accuracy, wrapper, }: ScrollProviderPropsType): React.ReactElement<{
|
|
7
|
+
children?: React.ReactNode;
|
|
8
|
+
ref: React.Ref<HTMLElement>;
|
|
9
|
+
}, string | React.JSXElementConstructor<any>>;
|
package/package.json
CHANGED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
@forward "inputField";
|
|
@@ -1,17 +0,0 @@
|
|
|
1
|
-
@use '../../../FlexField';
|
|
2
|
-
@use '../../../InputFieldWrapper';
|
|
3
|
-
@use '../../../SelectField';
|
|
4
|
-
@use '../../../SwitcherField';
|
|
5
|
-
@use '../../../RadioField';
|
|
6
|
-
@use '../../../TextareaField';
|
|
7
|
-
|
|
8
|
-
@mixin insertInputField() {
|
|
9
|
-
@include FlexField.insertFlexField();
|
|
10
|
-
@include InputFieldWrapper.insertInputFieldWrapper() {
|
|
11
|
-
@content;
|
|
12
|
-
}
|
|
13
|
-
@include SelectField.insertSelectField();
|
|
14
|
-
@include SwitcherField.insertSwitcherField();
|
|
15
|
-
@include RadioField.insertRadioField();
|
|
16
|
-
@include TextareaField.insertTextareaField();
|
|
17
|
-
}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
@forward "radioField";
|
|
@@ -1,45 +0,0 @@
|
|
|
1
|
-
@use '../../../../../styles' as *;
|
|
2
|
-
@use '../../../FlexField';
|
|
3
|
-
|
|
4
|
-
@mixin insertRadioField() {
|
|
5
|
-
.radioFieldItem {
|
|
6
|
-
width: fit-content;
|
|
7
|
-
height: fit-content;
|
|
8
|
-
|
|
9
|
-
display: flex;
|
|
10
|
-
gap: 8px;
|
|
11
|
-
|
|
12
|
-
.checkbox {
|
|
13
|
-
flex: none;
|
|
14
|
-
width: 16px;
|
|
15
|
-
height: 16px;
|
|
16
|
-
|
|
17
|
-
border-radius: 50%;
|
|
18
|
-
border: 1px solid var(--gray-300);
|
|
19
|
-
background-color: var(--base-white);
|
|
20
|
-
|
|
21
|
-
@include centerInsideContent();
|
|
22
|
-
}
|
|
23
|
-
|
|
24
|
-
.label {
|
|
25
|
-
@include fnt($size: 14, $line-height: 20, $weight: 500, $color: var(--gray-700));
|
|
26
|
-
}
|
|
27
|
-
|
|
28
|
-
&.active {
|
|
29
|
-
.checkbox {
|
|
30
|
-
&:after {
|
|
31
|
-
content: '';
|
|
32
|
-
flex: none;
|
|
33
|
-
width: 6px;
|
|
34
|
-
height: 6px;
|
|
35
|
-
border-radius: 50%;
|
|
36
|
-
background-color: var(--blue-dark-500);
|
|
37
|
-
}
|
|
38
|
-
|
|
39
|
-
border: 1px solid var(--blue-dark-500);
|
|
40
|
-
}
|
|
41
|
-
}
|
|
42
|
-
|
|
43
|
-
@content;
|
|
44
|
-
}
|
|
45
|
-
}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
@forward "switcherField";
|
|
@@ -1,92 +0,0 @@
|
|
|
1
|
-
@use '../../../../../styles' as *;
|
|
2
|
-
@use "sass:meta";
|
|
3
|
-
@use "sass:string";
|
|
4
|
-
@use "sass:map";
|
|
5
|
-
|
|
6
|
-
$medium-size: 'medium';
|
|
7
|
-
$large-size: 'large';
|
|
8
|
-
|
|
9
|
-
$light-tone: 'light';
|
|
10
|
-
$dark-tone: 'dark';
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
$size-config: (
|
|
14
|
-
medium: (
|
|
15
|
-
width: 36,
|
|
16
|
-
height: 20,
|
|
17
|
-
radius: 16,
|
|
18
|
-
),
|
|
19
|
-
large: (
|
|
20
|
-
width: 44,
|
|
21
|
-
height: 24,
|
|
22
|
-
radius: 20,
|
|
23
|
-
),
|
|
24
|
-
);
|
|
25
|
-
|
|
26
|
-
$tone-config: (
|
|
27
|
-
light: (
|
|
28
|
-
main: var(--gray-200),
|
|
29
|
-
hover: var(--gray-300),
|
|
30
|
-
),
|
|
31
|
-
dark: (
|
|
32
|
-
main: var(--gray-300),
|
|
33
|
-
hover: var(--gray-400),
|
|
34
|
-
),
|
|
35
|
-
);
|
|
36
|
-
|
|
37
|
-
@mixin insertSwitcherField($size: $medium-size, $tone: $light-tone) {
|
|
38
|
-
$size: if(meta.type-of($size) == 'string', string.unquote($size), $size);
|
|
39
|
-
$tone: if(meta.type-of($tone) == 'string', string.unquote($tone), $tone);
|
|
40
|
-
$size-settings: map.get($size-config, $size);
|
|
41
|
-
$tone-settings: map.get($tone-config, $tone);
|
|
42
|
-
|
|
43
|
-
.switcherField {
|
|
44
|
-
width: #{map.get($size-settings, width)}px;
|
|
45
|
-
height: #{map.get($size-settings, height)}px;
|
|
46
|
-
|
|
47
|
-
display: flex;
|
|
48
|
-
justify-content: left;
|
|
49
|
-
|
|
50
|
-
border-radius: 12px;
|
|
51
|
-
padding: 2px;
|
|
52
|
-
background-color: map.get($tone-settings, main);
|
|
53
|
-
|
|
54
|
-
&:after {
|
|
55
|
-
flex: none;
|
|
56
|
-
content: '';
|
|
57
|
-
width: #{map.get($size-settings, radius)}px;
|
|
58
|
-
height: #{map.get($size-settings, radius)}px;
|
|
59
|
-
border-radius: 50%;
|
|
60
|
-
box-shadow: 0 1px 2px 0 #1018280F, 0 1px 3px 0 #1018281A;
|
|
61
|
-
background-color: var(--base-white);
|
|
62
|
-
}
|
|
63
|
-
|
|
64
|
-
&:hover {
|
|
65
|
-
background-color: map.get($tone-settings, hover);
|
|
66
|
-
}
|
|
67
|
-
|
|
68
|
-
&:focus {
|
|
69
|
-
box-shadow: 0 0 0 4px var(--gray-100);
|
|
70
|
-
}
|
|
71
|
-
|
|
72
|
-
&.active {
|
|
73
|
-
justify-content: right;
|
|
74
|
-
background-color: var(--blue-dark-500);
|
|
75
|
-
|
|
76
|
-
&:hover {
|
|
77
|
-
background-color: var(--blue-dark-600);
|
|
78
|
-
}
|
|
79
|
-
}
|
|
80
|
-
|
|
81
|
-
&:disabled {
|
|
82
|
-
cursor: default;
|
|
83
|
-
background-color: map.get($tone-settings, main);
|
|
84
|
-
|
|
85
|
-
&:hover {
|
|
86
|
-
background-color: map.get($tone-settings, main);
|
|
87
|
-
}
|
|
88
|
-
}
|
|
89
|
-
|
|
90
|
-
@content;
|
|
91
|
-
}
|
|
92
|
-
}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
@forward "textareaField";
|
|
@@ -1,49 +0,0 @@
|
|
|
1
|
-
@use '../../../../../styles' as *;
|
|
2
|
-
|
|
3
|
-
@mixin insertTextareaField() {
|
|
4
|
-
.textareaField {
|
|
5
|
-
width: 100%;
|
|
6
|
-
height: fit-content;
|
|
7
|
-
min-height: 68px;
|
|
8
|
-
|
|
9
|
-
resize: none;
|
|
10
|
-
border-radius: 8px;
|
|
11
|
-
// С учетом border
|
|
12
|
-
padding: 9px 11px;
|
|
13
|
-
|
|
14
|
-
background-color: var(--base-white);
|
|
15
|
-
border: 1px solid var(--gray-300);
|
|
16
|
-
box-shadow: 0 1px 2px 0 #1018280D;
|
|
17
|
-
|
|
18
|
-
transition: all ease-out 200ms;
|
|
19
|
-
|
|
20
|
-
@include fnt($size: 16, $line-height: 24, $weight: 400, $color: var(--gray-900));
|
|
21
|
-
|
|
22
|
-
&::placeholder {
|
|
23
|
-
@include fnt($size: 16, $line-height: 24, $weight: 400, $color: var(--gray-400));
|
|
24
|
-
}
|
|
25
|
-
|
|
26
|
-
&:focus {
|
|
27
|
-
border: 1px solid var(--gray-400);
|
|
28
|
-
}
|
|
29
|
-
|
|
30
|
-
&.offFocus {
|
|
31
|
-
|
|
32
|
-
}
|
|
33
|
-
|
|
34
|
-
&:disabled {
|
|
35
|
-
background-color: var(--gray-100);
|
|
36
|
-
@include fnt($size: 16, $line-height: 24, $weight: 400, $color: var(--gray-500));
|
|
37
|
-
}
|
|
38
|
-
|
|
39
|
-
&.isError {
|
|
40
|
-
border: 1px solid var(--error-300);
|
|
41
|
-
|
|
42
|
-
&:focus {
|
|
43
|
-
border: 1px solid var(--error-400);
|
|
44
|
-
}
|
|
45
|
-
}
|
|
46
|
-
|
|
47
|
-
@content;
|
|
48
|
-
}
|
|
49
|
-
}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export { default as InputFieldStyle } from './InputField.module.scss';
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export { default as RadioFieldStyle } from './RadioField.module.scss';
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export { default as SwitcherFieldStyle } from './SwitcherField.module.scss';
|