@longline/aqua-ui 1.0.172 → 1.0.173
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/View/View.d.ts +5 -1
- package/controls/View/View.js +9 -4
- package/package.json +1 -1
package/controls/View/View.d.ts
CHANGED
|
@@ -4,7 +4,6 @@ interface IViewProps {
|
|
|
4
4
|
className?: string;
|
|
5
5
|
/**
|
|
6
6
|
* The `View`'s children are its value. Can be JSX.
|
|
7
|
-
*
|
|
8
7
|
*/
|
|
9
8
|
children?: React.ReactNode;
|
|
10
9
|
/**
|
|
@@ -37,6 +36,11 @@ interface IViewProps {
|
|
|
37
36
|
* @default false
|
|
38
37
|
*/
|
|
39
38
|
ghost?: boolean;
|
|
39
|
+
/**
|
|
40
|
+
* Optional badge, in order to show a count next to the View's label.
|
|
41
|
+
* Badged views don't support label text ellipsizing.
|
|
42
|
+
*/
|
|
43
|
+
badge?: number;
|
|
40
44
|
}
|
|
41
45
|
/**
|
|
42
46
|
* A `View` is used to display static (read-only) data. A `View` has a label,
|
package/controls/View/View.js
CHANGED
|
@@ -31,7 +31,10 @@ import { ScrollingContent } from './ScrollingContent';
|
|
|
31
31
|
import { EllipsizedContent } from './EllipsizedContent';
|
|
32
32
|
var ViewBase = function (props) {
|
|
33
33
|
return (React.createElement("div", { className: props.className },
|
|
34
|
-
React.createElement(Label, null, props.
|
|
34
|
+
React.createElement(Label, null, props.badge ? (React.createElement(BadgeWrapper, null,
|
|
35
|
+
props.label,
|
|
36
|
+
" ",
|
|
37
|
+
React.createElement(Badge, null, props.badge))) : (props.label)),
|
|
35
38
|
React.createElement(Content, null, props.height
|
|
36
39
|
? React.createElement(ScrollingContent, { ghost: props.ghost, height: props.height, children: props.children })
|
|
37
40
|
: React.createElement(EllipsizedContent, { ghost: props.ghost, children: props.children })),
|
|
@@ -39,7 +42,9 @@ var ViewBase = function (props) {
|
|
|
39
42
|
};
|
|
40
43
|
var Content = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n position: absolute;\n top: 22px;\n bottom: 22px;\n left: 0;\n right: 0;\n padding-left: 12px;\n padding-right: 12px;\n"], ["\n position: absolute;\n top: 22px;\n bottom: 22px;\n left: 0;\n right: 0;\n padding-left: 12px;\n padding-right: 12px;\n"])));
|
|
41
44
|
var HintContent = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n position: absolute;\n bottom: 3px;\n left: 12px;\n right: 12px;\n\n font: ", ";\n color: ", ";\n user-select: none;\n // Hints don't wrap and are ellipsized:\n white-space: nowrap;\n overflow-x: hidden;\n text-overflow: ellipsis;\n"], ["\n position: absolute;\n bottom: 3px;\n left: 12px;\n right: 12px;\n\n font: ", ";\n color: ", ";\n user-select: none;\n // Hints don't wrap and are ellipsized:\n white-space: nowrap;\n overflow-x: hidden;\n text-overflow: ellipsis;\n"])), function (p) { return p.theme.font.bodySmall; }, function (p) { return p.theme.colors.neutral[80]; });
|
|
42
|
-
var ViewStyled = styled(ViewBase)(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n // Position & size:\n position: relative;\n box-sizing: border-box;\n margin-bottom: 8px;\n \n min-height: 80px;\n ", "\n z-index: 0; // for :before\n\n // Appearance:\n border-radius: ", "px;\n background-color: rgb(from ", " r g b / 30%);\n border: none;\n font: ", ";\n color: ", ";\n\n // Content:\n overflow: hidden;\n\n // Hint background:\n ", "\n\n ", " {\n position: absolute;\n left: 12px;\n right: 12px;\n top: 10px;\n color: ", ";\n user-select: none;\n }\n\n // Ghost state:\n ", "\n\n // Views may provide their weight in relative units to other fields.\n ", "\n"], ["\n // Position & size:\n position: relative;\n box-sizing: border-box;\n margin-bottom: 8px;\n \n min-height: 80px;\n ", "\n z-index: 0; // for :before\n\n // Appearance:\n border-radius: ", "px;\n background-color: rgb(from ", " r g b / 30%);\n border: none;\n font: ", ";\n color: ", ";\n\n // Content:\n overflow: hidden;\n\n // Hint background:\n ", "\n\n ", " {\n position: absolute;\n left: 12px;\n right: 12px;\n top: 10px;\n color: ", ";\n user-select: none;\n }\n\n // Ghost state:\n ", "\n\n // Views may provide their weight in relative units to other fields.\n ", "\n"
|
|
45
|
+
var ViewStyled = styled(ViewBase)(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n // Position & size:\n position: relative;\n box-sizing: border-box;\n margin-bottom: 8px;\n \n min-height: 80px;\n ", "\n z-index: 0; // for :before\n\n // Appearance:\n border-radius: ", "px;\n background-color: rgb(from ", " r g b / 30%);\n border: none;\n font: ", ";\n color: ", ";\n\n // Content:\n overflow: hidden;\n\n // Hint background:\n ", "\n\n ", " {\n position: absolute;\n left: 12px;\n right: 12px;\n top: 10px;\n color: ", ";\n user-select: none;\n }\n\n // Ghost state:\n ", "\n\n // Views may provide their weight in relative units to other fields.\n ", "\n"], ["\n // Position & size:\n position: relative;\n box-sizing: border-box;\n margin-bottom: 8px;\n \n min-height: 80px;\n ", "\n z-index: 0; // for :before\n\n // Appearance:\n border-radius: ", "px;\n background-color: rgb(from ", " r g b / 30%);\n border: none;\n font: ", ";\n color: ", ";\n\n // Content:\n overflow: hidden;\n\n // Hint background:\n ", "\n\n ", " {\n position: absolute;\n left: 12px;\n right: 12px;\n top: 10px;\n color: ", ";\n user-select: none;\n }\n\n // Ghost state:\n ", "\n\n // Views may provide their weight in relative units to other fields.\n ", "\n"])), function (p) { return p.height && css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["height: ", ";"], ["height: ", ";"])), p.height); }, function (p) { return p.theme.radius.normal; }, function (p) { return p.theme.colors.primary[5]; }, function (p) { return p.theme.font.bodyLarge; }, function (p) { return p.theme.colors.neutral[100]; }, function (p) { return !p.noHintBg && css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n &:before {\n z-index: -1;\n content: '';\n position: absolute;\n left: 0;\n bottom: 0;\n right: 0;\n height: 22px;\n background-color: rgb(from ", " r g b / 30%);\n }\n "], ["\n &:before {\n z-index: -1;\n content: '';\n position: absolute;\n left: 0;\n bottom: 0;\n right: 0;\n height: 22px;\n background-color: rgb(from ", " r g b / 30%);\n }\n "])), function (p) { return p.theme.colors.primary[1]; }); }, Label, function (p) { return p.theme.colors.neutral[100]; }, function (p) { return p.ghost && css(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n outline: dashed 1px ", ";\n background-color: transparent;\n color: transparent;\n text-shadow: 0 0 3px rgb(from ", " r g b / 50%);\n pointer-events: none;\n user-select: none;\n \n ", " {\n color: transparent;\n text-shadow: 0 0 3px rgb(from ", " r g b / 50%);\n } \n "], ["\n outline: dashed 1px ", ";\n background-color: transparent;\n color: transparent;\n text-shadow: 0 0 3px rgb(from ", " r g b / 50%);\n pointer-events: none;\n user-select: none;\n \n ", " {\n color: transparent;\n text-shadow: 0 0 3px rgb(from ", " r g b / 50%);\n } \n "])), p.theme.colors.primary[2], function (p) { return p.theme.colors.neutral[100]; }, Label, function (p) { return p.theme.colors.neutral[100]; }); }, function (p) { return p.weight && css(templateObject_6 || (templateObject_6 = __makeTemplateObject(["flex: ", ""], ["flex: ", ""])), p.weight); });
|
|
46
|
+
var BadgeWrapper = styled.div(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n display: flex;\n flex-direction: row;\n gap: 4px;\n align-items: center;\n"], ["\n display: flex;\n flex-direction: row;\n gap: 4px;\n align-items: center;\n"])));
|
|
47
|
+
var Badge = styled.div(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n height: 12px;\n width: 12px;\n display: flex;\n font-size: 8px;\n justify-content: center;\n align-items: center;\n border-radius: 8px;\n background: ", ";\n"], ["\n height: 12px;\n width: 12px;\n display: flex;\n font-size: 8px;\n justify-content: center;\n align-items: center;\n border-radius: 8px;\n background: ", ";\n"
|
|
43
48
|
/**
|
|
44
49
|
* A `View` is used to display static (read-only) data. A `View` has a label,
|
|
45
50
|
* and its children are its value. Optionally, a hint can be shown at the
|
|
@@ -52,7 +57,7 @@ var ViewStyled = styled(ViewBase)(templateObject_7 || (templateObject_7 = __make
|
|
|
52
57
|
* <View label="Email address">{email}</View>
|
|
53
58
|
* ```
|
|
54
59
|
*/
|
|
55
|
-
])), function (p) { return p.
|
|
60
|
+
])), function (p) { return p.theme.colors.primary[2]; });
|
|
56
61
|
/**
|
|
57
62
|
* A `View` is used to display static (read-only) data. A `View` has a label,
|
|
58
63
|
* and its children are its value. Optionally, a hint can be shown at the
|
|
@@ -70,4 +75,4 @@ var View = function (_a) {
|
|
|
70
75
|
return React.createElement(ViewStyled, __assign({ ghost: ghost }, props));
|
|
71
76
|
};
|
|
72
77
|
export { View };
|
|
73
|
-
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7;
|
|
78
|
+
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9;
|