@longline/aqua-ui 1.0.277 → 1.0.278
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/controls/TabBar/Tab.d.ts
CHANGED
|
@@ -30,6 +30,11 @@ interface ITabProps {
|
|
|
30
30
|
* Optional badge to show by label.
|
|
31
31
|
*/
|
|
32
32
|
badge?: React.ReactNode;
|
|
33
|
+
/**
|
|
34
|
+
* Font size
|
|
35
|
+
* @default 'large'
|
|
36
|
+
*/
|
|
37
|
+
size?: 'small' | 'large';
|
|
33
38
|
}
|
|
34
39
|
declare const Tab: React.ForwardRefExoticComponent<ITabProps & React.RefAttributes<HTMLDivElement>>;
|
|
35
40
|
export { Tab, ITabProps };
|
package/controls/TabBar/Tab.js
CHANGED
|
@@ -38,12 +38,12 @@ var TabBase = React.forwardRef(function (props, ref) {
|
|
|
38
38
|
props.children,
|
|
39
39
|
props.badge !== undefined && React.createElement(Badge, null, props.badge))));
|
|
40
40
|
});
|
|
41
|
-
var TabStyled = styled(TabBase)(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n position: relative;\n padding: 0 20px;\n\n font: ", ";\n box-sizing: border-box;\n ", "\n height:
|
|
41
|
+
var TabStyled = styled(TabBase)(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n position: relative;\n padding: 0 20px;\n\n font: ", ";\n box-sizing: border-box;\n ", "\n height: ", "px;\n z-index: 1;\n cursor: pointer;\n color: ", ";\n transition: color ", "ms ease-in-out;\n\n /* User cannot select header text.\n * This prevents accidental selection when clicking the tab.\n */\n user-select: none; \n\n ", " \n &:hover {\n color: ", ";\n }\n\n // Ghost and disabled cannot be clicked:\n ", "\n\n // Disabled:\n ", "\n\n // Ghost state:\n ", " \n"], ["\n position: relative;\n padding: 0 20px;\n\n font: ", ";\n box-sizing: border-box;\n ", "\n height: ", "px;\n z-index: 1;\n cursor: pointer;\n color: ", ";\n transition: color ", "ms ease-in-out;\n\n /* User cannot select header text.\n * This prevents accidental selection when clicking the tab.\n */\n user-select: none; \n\n ", " \n &:hover {\n color: ", ";\n }\n\n // Ghost and disabled cannot be clicked:\n ", "\n\n // Disabled:\n ", "\n\n // Ghost state:\n ", " \n"])), function (p) { return p.size === 'small' ? p.theme.font.labelSmall : p.theme.font.labelLarge; }, function (p) { return p.tabWidth && css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["min-width: ", "px;"], ["min-width: ", "px;"])), p.tabWidth); }, function (p) { return p.size === 'small' ? 30 : 40; }, function (p) { return p.theme.colors.neutral[80]; }, function (p) { return p.theme.animation.duration; }, function (p) { return p.active && css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n color: ", ";\n "], ["\n color: ", ";\n "])), function (p) { return p.theme.colors.neutral[100]; }); }, function (p) { return p.theme.colors.neutral[100]; }, function (p) { return (p.ghost || p.disabled) && css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n pointer-events: none;\n "], ["\n pointer-events: none;\n "]))); }, function (p) { return p.disabled && css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n color: ", ";\n &:hover {\n color: ", ";\n }\n "], ["\n color: ", ";\n &:hover {\n color: ", ";\n }\n "])), function (p) { return p.theme.colors.neutral[50]; }, function (p) { return p.theme.colors.neutral[50]; }); }, function (p) { return p.ghost && css(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n & > *:not(:first-child) {\n visibility: hidden;\n } \n "], ["\n & > *:not(:first-child) {\n visibility: hidden;\n } \n "]))); });
|
|
42
42
|
var Content = styled.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n display: flex;\n justify-content: center;\n align-items: center;\n gap: 4px;\n white-space: nowrap;\n height: 100%;\n"], ["\n display: flex;\n justify-content: center;\n align-items: center;\n gap: 4px;\n white-space: nowrap;\n height: 100%;\n"])));
|
|
43
43
|
var Badge = styled.div(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n background: ", ";\n border-radius: ", "px;\n padding: 0 6px;\n font: ", ";\n"], ["\n background: ", ";\n border-radius: ", "px;\n padding: 0 6px;\n font: ", ";\n"])), function (p) { return p.theme.colors.primary[5]; }, function (p) { return p.theme.radius.normal; }, function (p) { return p.theme.font.labelSmall; });
|
|
44
44
|
var Tab = React.forwardRef(function (_a, ref) {
|
|
45
|
-
var _b = _a.ghost, ghost = _b === void 0 ? false : _b, _c = _a.disabled, disabled = _c === void 0 ? false : _c, props = __rest(_a, ["ghost", "disabled"]);
|
|
46
|
-
return React.createElement(TabStyled, __assign({ ref: ref, ghost: ghost, disabled: disabled }, props));
|
|
45
|
+
var _b = _a.ghost, ghost = _b === void 0 ? false : _b, _c = _a.disabled, disabled = _c === void 0 ? false : _c, _d = _a.size, size = _d === void 0 ? 'large' : _d, props = __rest(_a, ["ghost", "disabled", "size"]);
|
|
46
|
+
return React.createElement(TabStyled, __assign({ ref: ref, ghost: ghost, disabled: disabled, size: size }, props));
|
|
47
47
|
});
|
|
48
48
|
Tab.displayName = "TabBar.Tab";
|
|
49
49
|
export { Tab };
|
|
@@ -44,6 +44,15 @@ interface ITabBarProps {
|
|
|
44
44
|
* @default left
|
|
45
45
|
*/
|
|
46
46
|
align?: 'left' | 'right' | 'center';
|
|
47
|
+
/**
|
|
48
|
+
* Font size
|
|
49
|
+
* @default 'large'
|
|
50
|
+
*/
|
|
51
|
+
size?: 'small' | 'large';
|
|
52
|
+
/**
|
|
53
|
+
* If set, draw a bottom border.
|
|
54
|
+
*/
|
|
55
|
+
line?: boolean;
|
|
47
56
|
}
|
|
48
57
|
/**
|
|
49
58
|
* A `TabBar` presents an array of `TabBar.Tab` children in a horizontal bar,
|
|
@@ -53,7 +62,7 @@ interface ITabBarProps {
|
|
|
53
62
|
* This is just a `TabBar`; if you need tabs and panes, use the `Tab` container.
|
|
54
63
|
*/
|
|
55
64
|
declare const TabBar: {
|
|
56
|
-
({ active, ghost, disabled, align, ...props }: ITabBarProps): React.JSX.Element;
|
|
65
|
+
({ active, ghost, disabled, align, size, ...props }: ITabBarProps): React.JSX.Element;
|
|
57
66
|
Tab: React.ForwardRefExoticComponent<import("./Tab").ITabProps & React.RefAttributes<HTMLDivElement>>;
|
|
58
67
|
displayName: string;
|
|
59
68
|
};
|
|
@@ -200,6 +200,7 @@ var TabBarBase = function (props) {
|
|
|
200
200
|
tabWidth: props.tabWidth,
|
|
201
201
|
ghost: props.ghost,
|
|
202
202
|
disabled: props.disabled,
|
|
203
|
+
size: props.size,
|
|
203
204
|
onClick: function () {
|
|
204
205
|
if (child.props.onClick)
|
|
205
206
|
child.props.onClick();
|
|
@@ -207,10 +208,10 @@ var TabBarBase = function (props) {
|
|
|
207
208
|
}
|
|
208
209
|
});
|
|
209
210
|
}),
|
|
210
|
-
React.createElement(Underliner, { ghost: props.ghost, disabled: props.disabled || props.ghost, ref: underlinerRef }))));
|
|
211
|
+
React.createElement(Underliner, { size: props.size, ghost: props.ghost, disabled: props.disabled || props.ghost, ref: underlinerRef }))));
|
|
211
212
|
};
|
|
212
|
-
var Slider = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n // Position & size:\n position: absolute;\n left: 0;\n top: 0;\n width: auto !important;\n min-width: 100%;\n
|
|
213
|
-
var TabBarStyled = styled(TabBarBase)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n position: relative;\n display: block;\n height:
|
|
213
|
+
var Slider = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n // Position & size:\n position: absolute;\n left: 0;\n top: 0;\n width: auto !important;\n min-width: 100%;\n\n // Content:\n box-sizing: border-box;\n display: flex;\n flex-direction: row;\n justify-content: start;\n flex-wrap: nowrap;\n align-items: center;\n"], ["\n // Position & size:\n position: absolute;\n left: 0;\n top: 0;\n width: auto !important;\n min-width: 100%;\n\n // Content:\n box-sizing: border-box;\n display: flex;\n flex-direction: row;\n justify-content: start;\n flex-wrap: nowrap;\n align-items: center;\n"])));
|
|
214
|
+
var TabBarStyled = styled(TabBarBase)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n position: relative;\n display: block;\n height: ", "px;\n min-height: ", "px;\n overflow-x: hidden;\n overflow-y: hidden;\n ", " {\n border-color: ", ";\n ", "\n ", "\n height: ", "px;\n border-bottom: solid 1px ", "; \n }\n"], ["\n position: relative;\n display: block;\n height: ", "px;\n min-height: ", "px;\n overflow-x: hidden;\n overflow-y: hidden;\n ", " {\n border-color: ", ";\n ", "\n ", "\n height: ", "px;\n border-bottom: solid 1px ", "; \n }\n"
|
|
214
215
|
/**
|
|
215
216
|
* A `TabBar` presents an array of `TabBar.Tab` children in a horizontal bar,
|
|
216
217
|
* with an underliner under the active child. The `onClick(idx)` event is fired
|
|
@@ -218,7 +219,7 @@ var TabBarStyled = styled(TabBarBase)(templateObject_4 || (templateObject_4 = __
|
|
|
218
219
|
*
|
|
219
220
|
* This is just a `TabBar`; if you need tabs and panes, use the `Tab` container.
|
|
220
221
|
*/
|
|
221
|
-
])), Slider, function (p) { return (p.disabled || p.ghost) ? p.theme.colors.neutral[50] : p.theme.colors.neutral[80]; }, function (p) { return p.align === 'right' && css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["justify-content: end;"], ["justify-content: end;"]))); }, function (p) { return p.align === 'center' && css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["justify-content: center;"], ["justify-content: center;"]))); });
|
|
222
|
+
])), function (p) { return p.size === 'small' ? 30 : 40; }, function (p) { return p.size === 'small' ? 30 : 40; }, Slider, function (p) { return (p.disabled || p.ghost) ? p.theme.colors.neutral[50] : p.theme.colors.neutral[80]; }, function (p) { return p.align === 'right' && css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["justify-content: end;"], ["justify-content: end;"]))); }, function (p) { return p.align === 'center' && css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["justify-content: center;"], ["justify-content: center;"]))); }, function (p) { return p.size === 'small' ? 30 : 40; }, function (p) { return p.line ? p.theme.colors.neutral[80] : "transparent"; });
|
|
222
223
|
/**
|
|
223
224
|
* A `TabBar` presents an array of `TabBar.Tab` children in a horizontal bar,
|
|
224
225
|
* with an underliner under the active child. The `onClick(idx)` event is fired
|
|
@@ -227,8 +228,8 @@ var TabBarStyled = styled(TabBarBase)(templateObject_4 || (templateObject_4 = __
|
|
|
227
228
|
* This is just a `TabBar`; if you need tabs and panes, use the `Tab` container.
|
|
228
229
|
*/
|
|
229
230
|
var TabBar = function (_a) {
|
|
230
|
-
var _b = _a.active, active = _b === void 0 ? 0 : _b, _c = _a.ghost, ghost = _c === void 0 ? false : _c, _d = _a.disabled, disabled = _d === void 0 ? false : _d, _e = _a.align, align = _e === void 0 ? 'left' : _e, props = __rest(_a, ["active", "ghost", "disabled", "align"]);
|
|
231
|
-
return React.createElement(TabBarStyled, __assign({ active: active, ghost: ghost, disabled: disabled, align: align }, props));
|
|
231
|
+
var _b = _a.active, active = _b === void 0 ? 0 : _b, _c = _a.ghost, ghost = _c === void 0 ? false : _c, _d = _a.disabled, disabled = _d === void 0 ? false : _d, _e = _a.align, align = _e === void 0 ? 'left' : _e, _f = _a.size, size = _f === void 0 ? 'large' : _f, props = __rest(_a, ["active", "ghost", "disabled", "align", "size"]);
|
|
232
|
+
return React.createElement(TabBarStyled, __assign({ active: active, ghost: ghost, disabled: disabled, align: align, size: size }, props));
|
|
232
233
|
};
|
|
233
234
|
TabBar.Tab = Tab;
|
|
234
235
|
TabBar.displayName = "TabBar";
|
|
@@ -6,6 +6,9 @@ interface IUnderlinerProps {
|
|
|
6
6
|
disabled?: boolean;
|
|
7
7
|
/** Is TabBar ghosted? */
|
|
8
8
|
ghost?: boolean;
|
|
9
|
+
/**
|
|
10
|
+
*/
|
|
11
|
+
size?: 'small' | 'large';
|
|
9
12
|
}
|
|
10
13
|
declare const Underliner: React.ForwardRefExoticComponent<IUnderlinerProps & React.RefAttributes<HTMLDivElement>>;
|
|
11
14
|
export { Underliner };
|
|
@@ -21,7 +21,7 @@ var UnderlinerBase = React.forwardRef(function (props, ref) {
|
|
|
21
21
|
/**
|
|
22
22
|
* Underliner passes a reference to itself back to its parent.
|
|
23
23
|
*/
|
|
24
|
-
var UnderlinerStyled = styled(UnderlinerBase)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n // Position and size:\n position: absolute;\n left: 0;\n top:
|
|
24
|
+
var UnderlinerStyled = styled(UnderlinerBase)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n // Position and size:\n position: absolute;\n left: 0;\n top: ", "px;\n width: 0px;\n height: 0px;\n // Appearance:\n border-top: solid 4px ", ";\n box-sizing: border-box;\n transition: transform ease .3s, width ease .3s;\n opacity: ", ";\n"], ["\n // Position and size:\n position: absolute;\n left: 0;\n top: ", "px;\n width: 0px;\n height: 0px;\n // Appearance:\n border-top: solid 4px ", ";\n box-sizing: border-box;\n transition: transform ease .3s, width ease .3s;\n opacity: ", ";\n"])), function (p) { return p.size === 'small' ? 28 : 38; }, function (p) { return p.disabled ? p.theme.colors.neutral[50] : p.theme.colors.primary[1]; }, function (p) { return p.ghost ? 0 : 1; });
|
|
25
25
|
var Underliner = React.forwardRef(function (props, ref) {
|
|
26
26
|
return React.createElement(UnderlinerStyled, __assign({ ref: ref }, props));
|
|
27
27
|
});
|