@veracity/vui 0.2.1 → 0.2.2
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/avatar/theme.d.ts +5 -9
- package/avatar/theme.js +5 -18
- package/button/theme.js +1 -0
- package/checkbox/checkbox.js +5 -4
- package/checkbox/checkbox.types.d.ts +1 -1
- package/checkbox/checkboxGroup.types.d.ts +1 -1
- package/core/globalStyle.js +5 -6
- package/core/index.d.ts +1 -2
- package/core/index.js +2 -5
- package/core/resetCSS.js +2 -2
- package/core/styled.d.ts +192 -4
- package/core/styled.js +45 -7
- package/core/types/component.d.ts +2 -7
- package/core/types/index.d.ts +0 -2
- package/core/types/index.js +0 -2
- package/core/utils.d.ts +2 -2
- package/core/utils.js +8 -7
- package/icon/icon.types.d.ts +1 -2
- package/icons/types.d.ts +1 -1
- package/input/input.types.d.ts +1 -2
- package/link/context.d.ts +4 -0
- package/link/context.js +23 -0
- package/link/index.d.ts +2 -0
- package/link/index.js +2 -0
- package/link/link.d.ts +7 -1
- package/link/link.js +31 -3
- package/link/link.types.d.ts +5 -0
- package/link/linkIcon.d.ts +3 -0
- package/link/linkIcon.js +30 -0
- package/link/linkText.d.ts +3 -0
- package/link/linkText.js +30 -0
- package/link/theme.d.ts +27 -10
- package/link/theme.js +26 -12
- package/list/index.d.ts +1 -0
- package/list/index.js +1 -0
- package/list/list.d.ts +2 -0
- package/list/list.js +3 -1
- package/list/listDivider.d.ts +3 -0
- package/list/listDivider.js +30 -0
- package/list/listHeading.js +1 -1
- package/list/theme.d.ts +0 -16
- package/list/theme.js +6 -22
- package/package.json +1 -1
- package/radio/radio.types.d.ts +1 -1
- package/radio/radioGroup.js +0 -1
- package/radio/radioGroup.types.d.ts +1 -1
- package/switch/switch.types.d.ts +1 -1
- package/switch/theme.d.ts +0 -5
- package/switch/theme.js +4 -9
- package/system/custom.d.ts +0 -17
- package/system/custom.js +4 -21
- package/system/system.d.ts +2 -2
- package/system/system.js +1 -1
- package/tag/tag.js +6 -5
- package/tag/tag.types.d.ts +1 -0
- package/tag/tagButton.js +13 -2
- package/textarea/textarea.types.d.ts +1 -1
- package/theme/components.d.ts +32 -39
- package/theme/defaultTheme.d.ts +33 -39
- package/theme/foundations/index.d.ts +1 -0
- package/theme/foundations/transformers.d.ts +1 -0
- package/theme/foundations/transformers.js +26 -0
- package/utils/object.d.ts +4 -1
- package/utils/object.js +27 -28
- package/utils/types.d.ts +23 -1
- package/core/types/events.d.ts +0 -17
- package/core/types/events.js +0 -2
- package/core/types/styled.d.ts +0 -11
- package/core/types/styled.js +0 -2
- package/core/v.d.ts +0 -182
- package/core/v.js +0 -6
package/list/theme.js
CHANGED
|
@@ -7,66 +7,50 @@ function variantDefault(props) {
|
|
|
7
7
|
borderRadius: 'md',
|
|
8
8
|
hoverBg: c + ".20"
|
|
9
9
|
};
|
|
10
|
-
|
|
11
|
-
var heading = {};
|
|
12
|
-
var icon = {};
|
|
13
|
-
var text = {};
|
|
14
|
-
return { container: container, heading: heading, icon: icon, item: item, text: text };
|
|
10
|
+
return { item: item };
|
|
15
11
|
}
|
|
16
12
|
var defaultProps = {
|
|
17
13
|
colorScheme: 'blue',
|
|
18
14
|
size: 'md',
|
|
19
15
|
variant: 'default'
|
|
20
16
|
};
|
|
21
|
-
var parts = ['container', 'heading', 'icon', 'item', 'text'];
|
|
17
|
+
var parts = ['container', 'divider', 'heading', 'icon', 'item', 'text'];
|
|
22
18
|
var sizes = {
|
|
23
19
|
sm: {
|
|
24
|
-
container: {},
|
|
25
|
-
heading: {},
|
|
26
20
|
icon: {
|
|
27
21
|
size: 'sm'
|
|
28
22
|
},
|
|
29
23
|
item: {
|
|
30
24
|
fontSize: 'md',
|
|
31
25
|
h: 32
|
|
32
|
-
}
|
|
33
|
-
text: {}
|
|
26
|
+
}
|
|
34
27
|
},
|
|
35
28
|
md: {
|
|
36
|
-
container: {},
|
|
37
|
-
heading: {},
|
|
38
29
|
icon: {
|
|
39
30
|
size: 'md'
|
|
40
31
|
},
|
|
41
32
|
item: {
|
|
42
33
|
fontSize: 'md',
|
|
43
34
|
h: 40
|
|
44
|
-
}
|
|
45
|
-
text: {}
|
|
35
|
+
}
|
|
46
36
|
},
|
|
47
37
|
lg: {
|
|
48
|
-
container: {},
|
|
49
|
-
heading: {},
|
|
50
38
|
item: {
|
|
51
39
|
fontSize: 'md',
|
|
52
40
|
h: 48
|
|
53
41
|
},
|
|
54
42
|
icon: {
|
|
55
43
|
size: 'lg'
|
|
56
|
-
}
|
|
57
|
-
text: {}
|
|
44
|
+
}
|
|
58
45
|
},
|
|
59
46
|
xl: {
|
|
60
|
-
container: {},
|
|
61
|
-
heading: {},
|
|
62
47
|
item: {
|
|
63
48
|
fontSize: 'lg',
|
|
64
49
|
h: 56
|
|
65
50
|
},
|
|
66
51
|
icon: {
|
|
67
52
|
scale: 2
|
|
68
|
-
}
|
|
69
|
-
text: {}
|
|
53
|
+
}
|
|
70
54
|
}
|
|
71
55
|
};
|
|
72
56
|
var variants = {
|
package/package.json
CHANGED
package/radio/radio.types.d.ts
CHANGED
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
import { HTMLAttributes } from 'react';
|
|
2
|
-
import { ChangeEventHandler, FocusEventHandler } from '../core';
|
|
3
2
|
import { IconProp } from '../icon';
|
|
4
3
|
import { SystemProps } from '../system';
|
|
5
4
|
import { ThemingProps } from '../theme';
|
|
5
|
+
import { ChangeEventHandler, FocusEventHandler } from '../utils';
|
|
6
6
|
export interface RadioProps extends SystemProps, ThemingProps<'Radio'> {
|
|
7
7
|
checked?: boolean;
|
|
8
8
|
colorScheme?: 'blue' | 'prussian';
|
package/radio/radioGroup.js
CHANGED
|
@@ -76,7 +76,6 @@ exports.RadioGroup = (0, core_1.vui)(function (props, ref) {
|
|
|
76
76
|
var className = props.className, colorScheme = props.colorScheme, defaultValue = props.defaultValue, disabled = props.disabled, isRow = props.isRow, name = props.name, onBlur = props.onBlur, onChange = props.onChange, onFocus = props.onFocus, size = props.size, value = props.value, variant = props.variant, rest = __rest(props, ["className", "colorScheme", "defaultValue", "disabled", "isRow", "name", "onBlur", "onChange", "onFocus", "size", "value", "variant"]);
|
|
77
77
|
var _a = __read((0, react_1.useState)(value !== null && value !== void 0 ? value : defaultValue), 2), isChecked = _a[0], setIsChecked = _a[1];
|
|
78
78
|
var handleOnChange = (0, react_1.useCallback)(function (e) {
|
|
79
|
-
console.log('group onchange', e.target.value);
|
|
80
79
|
setIsChecked(e.target.value);
|
|
81
80
|
onChange === null || onChange === void 0 ? void 0 : onChange(e);
|
|
82
81
|
}, [onChange]);
|
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
import { ChangeEventHandler, FocusEventHandler } from '../core';
|
|
2
1
|
import { SystemProps } from '../system';
|
|
3
2
|
import { ThemingProps } from '../theme';
|
|
3
|
+
import { ChangeEventHandler, FocusEventHandler } from '../utils';
|
|
4
4
|
export interface RadioGroupProps extends SystemProps, ThemingProps<'Radio'> {
|
|
5
5
|
colorScheme?: 'blue' | 'prussian';
|
|
6
6
|
disabled?: boolean;
|
package/switch/switch.types.d.ts
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { ReactNode, ReactText } from 'react';
|
|
2
|
-
import { ChangeEventHandler, FocusEventHandler, PropsOf } from '../core';
|
|
3
2
|
import { SystemProps } from '../system';
|
|
4
3
|
import { ThemingProps } from '../theme';
|
|
4
|
+
import { ChangeEventHandler, FocusEventHandler, PropsOf } from '../utils';
|
|
5
5
|
export interface SwitchButtonProps extends SystemProps, ThemingProps<'Switch'> {
|
|
6
6
|
checked?: boolean;
|
|
7
7
|
colorScheme?: 'blue' | 'green' | 'prussian';
|
package/switch/theme.d.ts
CHANGED
|
@@ -1,6 +1,5 @@
|
|
|
1
1
|
import { Dict } from '../utils';
|
|
2
2
|
declare function sizeLg(): {
|
|
3
|
-
container: {};
|
|
4
3
|
button: {
|
|
5
4
|
fontSize: string;
|
|
6
5
|
minW: number;
|
|
@@ -17,7 +16,6 @@ declare function sizeLg(): {
|
|
|
17
16
|
};
|
|
18
17
|
};
|
|
19
18
|
declare function sizeMd(): {
|
|
20
|
-
container: {};
|
|
21
19
|
button: {
|
|
22
20
|
fontSize: string;
|
|
23
21
|
minW: number;
|
|
@@ -34,7 +32,6 @@ declare function sizeMd(): {
|
|
|
34
32
|
};
|
|
35
33
|
};
|
|
36
34
|
declare function sizeSm(): {
|
|
37
|
-
container: {};
|
|
38
35
|
button: {
|
|
39
36
|
fontSize: string;
|
|
40
37
|
minW: number;
|
|
@@ -51,7 +48,6 @@ declare function sizeSm(): {
|
|
|
51
48
|
};
|
|
52
49
|
};
|
|
53
50
|
declare function variantContained(props: Dict): {
|
|
54
|
-
container: {};
|
|
55
51
|
button: {
|
|
56
52
|
thumb: {
|
|
57
53
|
bg: string;
|
|
@@ -61,7 +57,6 @@ declare function variantContained(props: Dict): {
|
|
|
61
57
|
ring: number;
|
|
62
58
|
};
|
|
63
59
|
};
|
|
64
|
-
label: {};
|
|
65
60
|
};
|
|
66
61
|
declare const _default: {
|
|
67
62
|
defaultProps: {
|
package/switch/theme.js
CHANGED
|
@@ -1,7 +1,6 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
3
|
function sizeLg() {
|
|
4
|
-
var container = {};
|
|
5
4
|
var button = {
|
|
6
5
|
fontSize: 'md',
|
|
7
6
|
minW: 50,
|
|
@@ -16,10 +15,9 @@ function sizeLg() {
|
|
|
16
15
|
var label = {
|
|
17
16
|
size: 'lg'
|
|
18
17
|
};
|
|
19
|
-
return {
|
|
18
|
+
return { button: button, label: label };
|
|
20
19
|
}
|
|
21
20
|
function sizeMd() {
|
|
22
|
-
var container = {};
|
|
23
21
|
var button = {
|
|
24
22
|
fontSize: 'sm',
|
|
25
23
|
minW: 42,
|
|
@@ -34,10 +32,9 @@ function sizeMd() {
|
|
|
34
32
|
var label = {
|
|
35
33
|
size: 'md'
|
|
36
34
|
};
|
|
37
|
-
return {
|
|
35
|
+
return { button: button, label: label };
|
|
38
36
|
}
|
|
39
37
|
function sizeSm() {
|
|
40
|
-
var container = {};
|
|
41
38
|
var button = {
|
|
42
39
|
fontSize: 'xs',
|
|
43
40
|
minW: 34,
|
|
@@ -52,11 +49,10 @@ function sizeSm() {
|
|
|
52
49
|
var label = {
|
|
53
50
|
size: 'sm'
|
|
54
51
|
};
|
|
55
|
-
return {
|
|
52
|
+
return { button: button, label: label };
|
|
56
53
|
}
|
|
57
54
|
function variantContained(props) {
|
|
58
55
|
var c = props.colorScheme;
|
|
59
|
-
var container = {};
|
|
60
56
|
var button = {
|
|
61
57
|
thumb: {
|
|
62
58
|
bg: 'white'
|
|
@@ -66,8 +62,7 @@ function variantContained(props) {
|
|
|
66
62
|
ring: 3
|
|
67
63
|
}
|
|
68
64
|
};
|
|
69
|
-
|
|
70
|
-
return { container: container, button: button, label: label };
|
|
65
|
+
return { button: button };
|
|
71
66
|
}
|
|
72
67
|
var defaultProps = {
|
|
73
68
|
colorScheme: 'blue',
|
package/system/custom.d.ts
CHANGED
|
@@ -1,20 +1,3 @@
|
|
|
1
|
-
import { BorderRadiusProp } from './borders';
|
|
2
|
-
export interface BorderRadiusBottomProps {
|
|
3
|
-
borderRadiusBottom?: BorderRadiusProp;
|
|
4
|
-
}
|
|
5
|
-
export declare const borderRadiusBottom: import("@xstyled/styled-components").StyleGenerator;
|
|
6
|
-
export interface BorderRadiusLeftProps {
|
|
7
|
-
borderRadiusLeft?: BorderRadiusProp;
|
|
8
|
-
}
|
|
9
|
-
export declare const borderRadiusLeft: import("@xstyled/styled-components").StyleGenerator;
|
|
10
|
-
export interface BorderRadiusRightProps {
|
|
11
|
-
borderRadiusRight?: BorderRadiusProp;
|
|
12
|
-
}
|
|
13
|
-
export declare const borderRadiusRight: import("@xstyled/styled-components").StyleGenerator;
|
|
14
|
-
export interface BorderRadiusTopProps {
|
|
15
|
-
borderRadiusTop?: BorderRadiusProp;
|
|
16
|
-
}
|
|
17
|
-
export declare const borderRadiusTop: import("@xstyled/styled-components").StyleGenerator;
|
|
18
1
|
export interface IsTruncatedProps {
|
|
19
2
|
isTruncated?: boolean;
|
|
20
3
|
}
|
package/system/custom.js
CHANGED
|
@@ -1,27 +1,7 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
-
exports.wordBreak = exports.spaceAround = exports.maxLines = exports.isTruncated =
|
|
3
|
+
exports.wordBreak = exports.spaceAround = exports.maxLines = exports.isTruncated = void 0;
|
|
4
4
|
var styled_components_1 = require("@xstyled/styled-components");
|
|
5
|
-
exports.borderRadiusBottom = (0, styled_components_1.style)({
|
|
6
|
-
prop: 'borderRadiusBottom',
|
|
7
|
-
themeGet: styled_components_1.getRadius,
|
|
8
|
-
cssProperty: ['borderBottomLeftRadius', 'borderBottomRightRadius']
|
|
9
|
-
});
|
|
10
|
-
exports.borderRadiusLeft = (0, styled_components_1.style)({
|
|
11
|
-
prop: 'borderRadiusLeft',
|
|
12
|
-
themeGet: styled_components_1.getRadius,
|
|
13
|
-
cssProperty: ['borderBottomLeftRadius', 'borderTopLeftRadius']
|
|
14
|
-
});
|
|
15
|
-
exports.borderRadiusRight = (0, styled_components_1.style)({
|
|
16
|
-
prop: 'borderRadiusRight',
|
|
17
|
-
themeGet: styled_components_1.getRadius,
|
|
18
|
-
cssProperty: ['borderBottomRightRadius', 'borderTopRightRadius']
|
|
19
|
-
});
|
|
20
|
-
exports.borderRadiusTop = (0, styled_components_1.style)({
|
|
21
|
-
prop: 'borderRadiusTop',
|
|
22
|
-
themeGet: styled_components_1.getRadius,
|
|
23
|
-
cssProperty: ['borderTopLeftRadius', 'borderTopRightRadius']
|
|
24
|
-
});
|
|
25
5
|
/** Provides styling to truncate single-line text. */
|
|
26
6
|
exports.isTruncated = (0, styled_components_1.style)({
|
|
27
7
|
prop: 'isTruncated',
|
|
@@ -52,6 +32,9 @@ exports.spaceAround = (0, styled_components_1.style)({
|
|
|
52
32
|
themeGet: styled_components_1.getSpace,
|
|
53
33
|
cssProperty: function (value) {
|
|
54
34
|
return {
|
|
35
|
+
'&': {
|
|
36
|
+
margin: '-' + value
|
|
37
|
+
},
|
|
55
38
|
'& > *': {
|
|
56
39
|
margin: value
|
|
57
40
|
}
|
package/system/system.d.ts
CHANGED
|
@@ -4,7 +4,7 @@ import { BordersProps } from './borders';
|
|
|
4
4
|
import { EffectsProps } from './effects';
|
|
5
5
|
import { FlexboxesProps } from './flexboxes';
|
|
6
6
|
import { InteractivityProps } from './interactivity';
|
|
7
|
-
import {
|
|
7
|
+
import { IsTruncatedProps, MaxLinesProps, SpaceAroundProps, WordBreakProps } from './custom';
|
|
8
8
|
import { LayoutProps } from './layout';
|
|
9
9
|
import { SizingProps } from './sizing';
|
|
10
10
|
import { SpaceProps } from './space';
|
|
@@ -12,7 +12,7 @@ import { TablesProps } from './tables';
|
|
|
12
12
|
import { TransformsProps } from './transforms';
|
|
13
13
|
import { TransitionsProps } from './transitions';
|
|
14
14
|
import { TypographyProps } from './typography';
|
|
15
|
-
export interface SystemProps extends AnimationsProps, BackgroundColorProps, BordersProps,
|
|
15
|
+
export interface SystemProps extends AnimationsProps, BackgroundColorProps, BordersProps, EffectsProps, FlexboxesProps, InteractivityProps, IsTruncatedProps, LayoutProps, MaxLinesProps, SizingProps, SpaceProps, SpaceAroundProps, TablesProps, TransformsProps, TransitionsProps, TypographyProps, WordBreakProps {
|
|
16
16
|
}
|
|
17
17
|
declare const _default: import("@xstyled/styled-components").StyleGenerator;
|
|
18
18
|
export default _default;
|
package/system/system.js
CHANGED
|
@@ -2,4 +2,4 @@
|
|
|
2
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
3
|
var styled_components_1 = require("@xstyled/styled-components");
|
|
4
4
|
var custom_1 = require("./custom");
|
|
5
|
-
exports.default = (0, styled_components_1.compose)(styled_components_1.animation, styled_components_1.backgroundColor, styled_components_1.borders,
|
|
5
|
+
exports.default = (0, styled_components_1.compose)(styled_components_1.animation, styled_components_1.backgroundColor, styled_components_1.borders, styled_components_1.color, styled_components_1.effects, styled_components_1.flexboxes, styled_components_1.interactivity, custom_1.isTruncated, styled_components_1.layout, custom_1.maxLines, styled_components_1.sizing, styled_components_1.space, custom_1.spaceAround, styled_components_1.tables, styled_components_1.transforms, styled_components_1.transitions, styled_components_1.typography, custom_1.wordBreak);
|
package/tag/tag.js
CHANGED
|
@@ -58,17 +58,17 @@ var tagText_1 = __importDefault(require("./tagText"));
|
|
|
58
58
|
var core_1 = require("../core");
|
|
59
59
|
var system_1 = require("../system");
|
|
60
60
|
var utils_1 = require("../utils");
|
|
61
|
-
exports.TagBase = styled_components_1.default.span.withConfig((0, core_1.forwardPropConfig)(system_1.system))(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n\talign-items: center;\n\tdisplay: inline-flex;\n\tjustify-content: center;\n\tline-height: normal;\n\tposition: relative;\n\twidth: fit-content;\n\n\t&:focus {\n\t\tborder-color: transparent;\n\t\toutline: none;\n\t}\n\n\t", "\n"], ["\n\talign-items: center;\n\tdisplay: inline-flex;\n\tjustify-content: center;\n\tline-height: normal;\n\tposition: relative;\n\twidth: fit-content;\n\n\t&:focus {\n\t\tborder-color: transparent;\n\t\toutline: none;\n\t}\n\n\t", "\n"])), system_1.system);
|
|
61
|
+
exports.TagBase = styled_components_1.default.span.withConfig((0, core_1.forwardPropConfig)(system_1.system))(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n\talign-items: center;\n\tdisplay: inline-flex;\n\tjustify-content: center;\n\tline-height: normal;\n\tposition: relative;\n\twidth: fit-content;\n\n\t&:focus {\n\t\tborder-color: transparent;\n\t\toutline: none;\n\t}\n\n\t&[data-disabled='true'] {\n\t\tbackground-color: var(--vui-colors-disabled-bg);\n\t\tcolor: var(--vui-colors-disabled-font);\n\t\tcursor: not-allowed;\n\t\tuser-select: none;\n\t}\n\n\t", "\n"], ["\n\talign-items: center;\n\tdisplay: inline-flex;\n\tjustify-content: center;\n\tline-height: normal;\n\tposition: relative;\n\twidth: fit-content;\n\n\t&:focus {\n\t\tborder-color: transparent;\n\t\toutline: none;\n\t}\n\n\t&[data-disabled='true'] {\n\t\tbackground-color: var(--vui-colors-disabled-bg);\n\t\tcolor: var(--vui-colors-disabled-font);\n\t\tcursor: not-allowed;\n\t\tuser-select: none;\n\t}\n\n\t", "\n"])), system_1.system);
|
|
62
62
|
exports.Tag = (0, core_1.vui)(function (props, ref) {
|
|
63
|
-
var casing = props.casing, children = props.children, className = props.className, _a = props.colorScheme, colorScheme = _a === void 0 ? 'blue' : _a, icon = props.icon, iconLeft = props.iconLeft, iconRight = props.iconRight, isFullWidth = props.isFullWidth, _b = props.isInteractive, isInteractive = _b === void 0 ? props.onClick !== undefined : _b, isRound = props.isRound, _c = props.isTruncated, isTruncated = _c === void 0 ? true : _c, itemLeft = props.itemLeft, itemRight = props.itemRight, onDelete = props.onDelete, _d = props.size, size = _d === void 0 ? 'md' : _d, text = props.text, _e = props.variant, variant = _e === void 0 ? 'subtle' : _e, weight = props.weight, rest = __rest(props, ["casing", "children", "className", "colorScheme", "icon", "iconLeft", "iconRight", "isFullWidth", "isInteractive", "isRound", "isTruncated", "itemLeft", "itemRight", "onDelete", "size", "text", "variant", "weight"]);
|
|
63
|
+
var casing = props.casing, children = props.children, className = props.className, _a = props.colorScheme, colorScheme = _a === void 0 ? 'blue' : _a, disabled = props.disabled, icon = props.icon, iconLeft = props.iconLeft, iconRight = props.iconRight, isFullWidth = props.isFullWidth, _b = props.isInteractive, isInteractive = _b === void 0 ? props.onClick !== undefined : _b, isRound = props.isRound, _c = props.isTruncated, isTruncated = _c === void 0 ? true : _c, itemLeft = props.itemLeft, itemRight = props.itemRight, onClick = props.onClick, onDelete = props.onDelete, _d = props.size, size = _d === void 0 ? 'md' : _d, text = props.text, _e = props.variant, variant = _e === void 0 ? 'subtle' : _e, weight = props.weight, rest = __rest(props, ["casing", "children", "className", "colorScheme", "disabled", "icon", "iconLeft", "iconRight", "isFullWidth", "isInteractive", "isRound", "isTruncated", "itemLeft", "itemRight", "onClick", "onDelete", "size", "text", "variant", "weight"]);
|
|
64
64
|
var styles = (0, core_1.useStyleConfig)('Tag', props);
|
|
65
65
|
var _f = styles.container, activeBg = _f.activeBg, h = _f.h, hoverBg = _f.hoverBg, _g = _f.spaceX, spaceXBase = _g === void 0 ? 0 : _g, tagStyles = __rest(_f, ["activeBg", "h", "hoverBg", "spaceX"]);
|
|
66
|
-
var context = (0, react_1.useMemo)(function () { return (0, utils_1.filterUndefined)({ colorScheme: colorScheme, size: size, variant: variant }); }, [colorScheme, size, variant]);
|
|
66
|
+
var context = (0, react_1.useMemo)(function () { return (0, utils_1.filterUndefined)({ colorScheme: colorScheme, disabled: disabled, size: size, variant: variant }); }, [colorScheme, disabled, size, variant]);
|
|
67
67
|
var spaceX = spaceXBase / 8;
|
|
68
68
|
var spaceXText = (spaceXBase + 4) / 8;
|
|
69
69
|
var pl = icon || itemLeft || iconLeft ? spaceX : spaceXText;
|
|
70
70
|
var pr = icon || itemRight || iconRight ? spaceX : spaceXText;
|
|
71
|
-
var interactiveProps = isInteractive
|
|
71
|
+
var interactiveProps = !disabled && isInteractive
|
|
72
72
|
? {
|
|
73
73
|
cursor: 'pointer',
|
|
74
74
|
hoverBg: hoverBg,
|
|
@@ -80,12 +80,13 @@ exports.Tag = (0, core_1.vui)(function (props, ref) {
|
|
|
80
80
|
: {};
|
|
81
81
|
var aliasedProps = (0, utils_1.filterUndefined)({
|
|
82
82
|
borderRadius: isRound ? h / 2 : undefined,
|
|
83
|
+
'data-disabled': disabled,
|
|
83
84
|
fontWeight: weight,
|
|
84
85
|
textTransform: casing,
|
|
85
86
|
w: isFullWidth ? '100%' : undefined
|
|
86
87
|
});
|
|
87
88
|
return (react_1.default.createElement(context_1.TagProvider, { value: context },
|
|
88
|
-
react_1.default.createElement(exports.TagBase, __assign({ borderRadius: "md", className: (0, utils_1.cs)('vui-tag', className), fontWeight: "medium", h: h, pl: pl, pr: pr, ref: ref, transitionDuration: "fast" }, tagStyles, interactiveProps, aliasedProps, rest),
|
|
89
|
+
react_1.default.createElement(exports.TagBase, __assign({ borderRadius: "md", className: (0, utils_1.cs)('vui-tag', className), fontWeight: "medium", h: h, onClick: !disabled ? onClick : undefined, pl: pl, pr: pr, ref: ref, transitionDuration: "fast" }, tagStyles, interactiveProps, aliasedProps, rest),
|
|
89
90
|
(0, utils_1.isString)(icon) ? react_1.default.createElement(tagIcon_1.default, { name: icon }) : icon,
|
|
90
91
|
!icon && (react_1.default.createElement(react_1.default.Fragment, null,
|
|
91
92
|
itemLeft,
|
package/tag/tag.types.d.ts
CHANGED
|
@@ -6,6 +6,7 @@ import { AnyElement } from '../utils';
|
|
|
6
6
|
export interface TagProps extends SystemProps, ThemingProps<'Tag'> {
|
|
7
7
|
casing?: TypographyProps['textTransform'];
|
|
8
8
|
colorScheme?: 'blue' | 'green' | 'grey' | 'prussian' | 'red' | 'yellow';
|
|
9
|
+
disabled?: boolean;
|
|
9
10
|
icon?: IconProp | AnyElement;
|
|
10
11
|
iconLeft?: IconProp | AnyElement;
|
|
11
12
|
iconRight?: IconProp | AnyElement;
|
package/tag/tagButton.js
CHANGED
|
@@ -10,6 +10,17 @@ var __assign = (this && this.__assign) || function () {
|
|
|
10
10
|
};
|
|
11
11
|
return __assign.apply(this, arguments);
|
|
12
12
|
};
|
|
13
|
+
var __rest = (this && this.__rest) || function (s, e) {
|
|
14
|
+
var t = {};
|
|
15
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
|
|
16
|
+
t[p] = s[p];
|
|
17
|
+
if (s != null && typeof Object.getOwnPropertySymbols === "function")
|
|
18
|
+
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
|
19
|
+
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
|
|
20
|
+
t[p[i]] = s[p[i]];
|
|
21
|
+
}
|
|
22
|
+
return t;
|
|
23
|
+
};
|
|
13
24
|
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
14
25
|
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
15
26
|
};
|
|
@@ -21,10 +32,10 @@ var button_1 = __importDefault(require("../button"));
|
|
|
21
32
|
var core_1 = require("../core");
|
|
22
33
|
exports.TagButton = (0, core_1.vui)(function (props, ref) {
|
|
23
34
|
var _a;
|
|
24
|
-
var
|
|
35
|
+
var _b = (_a = (0, context_1.useTag)()) !== null && _a !== void 0 ? _a : {}, disabled = _b.disabled, tagProps = __rest(_b, ["disabled"]);
|
|
25
36
|
var mergedProps = __assign(__assign({}, tagProps), props);
|
|
26
37
|
var styles = (0, core_1.useStyleConfig)('Tag', mergedProps);
|
|
27
|
-
return (react_1.default.createElement(button_1.default, __assign({ className: "vui-tagButton", colorScheme: mergedProps.colorScheme, icon: "falTimes", isRound: true, mr: -0.5, ref: ref }, styles.button, props)));
|
|
38
|
+
return (react_1.default.createElement(button_1.default, __assign({ className: "vui-tagButton", colorScheme: mergedProps.colorScheme, disabled: disabled, icon: "falTimes", isRound: true, mr: -0.5, ref: ref }, styles.button, props)));
|
|
28
39
|
});
|
|
29
40
|
exports.TagButton.displayName = 'TagButton';
|
|
30
41
|
exports.default = exports.TagButton;
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
|
-
import { ChangeEventHandler, FocusEventHandler, PropsOf } from '../core';
|
|
3
2
|
import { SystemProps } from '../system';
|
|
4
3
|
import { ThemingProps } from '../theme';
|
|
4
|
+
import { ChangeEventHandler, FocusEventHandler, PropsOf } from '../utils';
|
|
5
5
|
export interface TextareaProps extends SystemProps, ThemingProps<'Textarea'> {
|
|
6
6
|
autoFocus?: boolean;
|
|
7
7
|
children?: never;
|
package/theme/components.d.ts
CHANGED
|
@@ -26,16 +26,13 @@ declare const _default: {
|
|
|
26
26
|
h: number;
|
|
27
27
|
iconSize: string;
|
|
28
28
|
};
|
|
29
|
+
xl: {
|
|
30
|
+
fontSize: string;
|
|
31
|
+
h: number;
|
|
32
|
+
iconSize: string;
|
|
33
|
+
};
|
|
29
34
|
};
|
|
30
35
|
variants: {
|
|
31
|
-
outlined: (props: import("..").Dict<any>) => {
|
|
32
|
-
borderColor: string;
|
|
33
|
-
borderWidth: number;
|
|
34
|
-
hoverBg: string;
|
|
35
|
-
activeBg: string;
|
|
36
|
-
bg: string;
|
|
37
|
-
color: string;
|
|
38
|
-
};
|
|
39
36
|
solid: (props: import("..").Dict<any>) => {
|
|
40
37
|
hoverBg: string;
|
|
41
38
|
activeBg: string;
|
|
@@ -348,28 +345,45 @@ declare const _default: {
|
|
|
348
345
|
size: string;
|
|
349
346
|
variant: string;
|
|
350
347
|
};
|
|
348
|
+
parts: string[];
|
|
351
349
|
sizes: {
|
|
352
|
-
xs: {
|
|
353
|
-
fontSize: string;
|
|
354
|
-
};
|
|
355
350
|
sm: {
|
|
356
|
-
|
|
351
|
+
container: {
|
|
352
|
+
fontSize: string;
|
|
353
|
+
};
|
|
354
|
+
icon: {
|
|
355
|
+
size: string;
|
|
356
|
+
};
|
|
357
357
|
};
|
|
358
358
|
md: {
|
|
359
|
-
|
|
359
|
+
container: {
|
|
360
|
+
fontSize: string;
|
|
361
|
+
};
|
|
362
|
+
icon: {
|
|
363
|
+
size: string;
|
|
364
|
+
};
|
|
360
365
|
};
|
|
361
366
|
lg: {
|
|
362
|
-
|
|
367
|
+
container: {
|
|
368
|
+
fontSize: string;
|
|
369
|
+
};
|
|
370
|
+
icon: {
|
|
371
|
+
size: string;
|
|
372
|
+
};
|
|
363
373
|
};
|
|
364
374
|
};
|
|
365
375
|
variants: {
|
|
366
376
|
default: (props: import("..").Dict<any>) => {
|
|
367
|
-
|
|
368
|
-
|
|
377
|
+
container: {
|
|
378
|
+
color: string;
|
|
379
|
+
hoverColor: string;
|
|
380
|
+
};
|
|
369
381
|
};
|
|
370
382
|
light: (props: import("..").Dict<any>) => {
|
|
371
|
-
|
|
372
|
-
|
|
383
|
+
container: {
|
|
384
|
+
color: string;
|
|
385
|
+
hoverColor: string;
|
|
386
|
+
};
|
|
373
387
|
};
|
|
374
388
|
};
|
|
375
389
|
};
|
|
@@ -382,8 +396,6 @@ declare const _default: {
|
|
|
382
396
|
parts: string[];
|
|
383
397
|
sizes: {
|
|
384
398
|
sm: {
|
|
385
|
-
container: {};
|
|
386
|
-
heading: {};
|
|
387
399
|
icon: {
|
|
388
400
|
size: string;
|
|
389
401
|
};
|
|
@@ -391,11 +403,8 @@ declare const _default: {
|
|
|
391
403
|
fontSize: string;
|
|
392
404
|
h: number;
|
|
393
405
|
};
|
|
394
|
-
text: {};
|
|
395
406
|
};
|
|
396
407
|
md: {
|
|
397
|
-
container: {};
|
|
398
|
-
heading: {};
|
|
399
408
|
icon: {
|
|
400
409
|
size: string;
|
|
401
410
|
};
|
|
@@ -403,11 +412,8 @@ declare const _default: {
|
|
|
403
412
|
fontSize: string;
|
|
404
413
|
h: number;
|
|
405
414
|
};
|
|
406
|
-
text: {};
|
|
407
415
|
};
|
|
408
416
|
lg: {
|
|
409
|
-
container: {};
|
|
410
|
-
heading: {};
|
|
411
417
|
item: {
|
|
412
418
|
fontSize: string;
|
|
413
419
|
h: number;
|
|
@@ -415,11 +421,8 @@ declare const _default: {
|
|
|
415
421
|
icon: {
|
|
416
422
|
size: string;
|
|
417
423
|
};
|
|
418
|
-
text: {};
|
|
419
424
|
};
|
|
420
425
|
xl: {
|
|
421
|
-
container: {};
|
|
422
|
-
heading: {};
|
|
423
426
|
item: {
|
|
424
427
|
fontSize: string;
|
|
425
428
|
h: number;
|
|
@@ -427,16 +430,11 @@ declare const _default: {
|
|
|
427
430
|
icon: {
|
|
428
431
|
scale: number;
|
|
429
432
|
};
|
|
430
|
-
text: {};
|
|
431
433
|
};
|
|
432
434
|
};
|
|
433
435
|
variants: {
|
|
434
436
|
default: (props: import("..").Dict<any>) => {
|
|
435
|
-
container: {};
|
|
436
|
-
heading: {};
|
|
437
|
-
icon: {};
|
|
438
437
|
item: import("..").Dict<any>;
|
|
439
|
-
text: {};
|
|
440
438
|
};
|
|
441
439
|
ordered: {
|
|
442
440
|
container: {
|
|
@@ -685,7 +683,6 @@ declare const _default: {
|
|
|
685
683
|
parts: string[];
|
|
686
684
|
sizes: {
|
|
687
685
|
sm: () => {
|
|
688
|
-
container: {};
|
|
689
686
|
button: {
|
|
690
687
|
fontSize: string;
|
|
691
688
|
minW: number;
|
|
@@ -702,7 +699,6 @@ declare const _default: {
|
|
|
702
699
|
};
|
|
703
700
|
};
|
|
704
701
|
md: () => {
|
|
705
|
-
container: {};
|
|
706
702
|
button: {
|
|
707
703
|
fontSize: string;
|
|
708
704
|
minW: number;
|
|
@@ -719,7 +715,6 @@ declare const _default: {
|
|
|
719
715
|
};
|
|
720
716
|
};
|
|
721
717
|
lg: () => {
|
|
722
|
-
container: {};
|
|
723
718
|
button: {
|
|
724
719
|
fontSize: string;
|
|
725
720
|
minW: number;
|
|
@@ -738,7 +733,6 @@ declare const _default: {
|
|
|
738
733
|
};
|
|
739
734
|
variants: {
|
|
740
735
|
contained: (props: import("..").Dict<any>) => {
|
|
741
|
-
container: {};
|
|
742
736
|
button: {
|
|
743
737
|
thumb: {
|
|
744
738
|
bg: string;
|
|
@@ -748,7 +742,6 @@ declare const _default: {
|
|
|
748
742
|
ring: number;
|
|
749
743
|
};
|
|
750
744
|
};
|
|
751
|
-
label: {};
|
|
752
745
|
};
|
|
753
746
|
};
|
|
754
747
|
};
|