@longline/aqua-ui 1.0.47 → 1.0.48
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.
|
@@ -27,10 +27,11 @@ var BoxWrapperBase = function (props) {
|
|
|
27
27
|
};
|
|
28
28
|
return (React.createElement("div", { className: props.className, onClick: handleClick, ref: wrapper },
|
|
29
29
|
props.label,
|
|
30
|
-
props.children,
|
|
30
|
+
React.createElement(Control, null, props.children),
|
|
31
31
|
React.createElement(HintBackground, null, props.hint)));
|
|
32
32
|
};
|
|
33
33
|
var HintBackground = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n position: absolute;\n left: 0;\n bottom: 0;\n right: 0;\n height: 22px;\n border-bottom-left-radius: ", "px;\n border-bottom-right-radius: ", "px;\n"], ["\n position: absolute;\n left: 0;\n bottom: 0;\n right: 0;\n height: 22px;\n border-bottom-left-radius: ", "px;\n border-bottom-right-radius: ", "px;\n"])), function (p) { return p.theme.radius.normal; }, function (p) { return p.theme.radius.normal; });
|
|
34
|
-
var
|
|
34
|
+
var Control = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n padding-top: 25px;\n padding-bottom: 25px;\n"], ["\n display: flex;\n align-items: center;\n padding-top: 25px;\n padding-bottom: 25px;\n"])));
|
|
35
|
+
var BoxWrapper = styled(BoxWrapperBase)(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n // Size:\n position: relative;\n box-sizing: border-box;\n margin-bottom: 8px;\n min-height: 80px;\n \n // Appearance:\n border-radius: ", "px;\n background-color: ", ";\n border: none;\n\n // Hint/error background:\n ", " {\n ", "\n }\n\n // Hover:\n &:hover {\n outline: solid 2px ", ";\n }\n\n &:focus-within {\n outline: solid 2px ", ";\n } \n\n ", " {\n position: absolute;\n left: 12px;\n right: 12px;\n top: 10px;\n color: ", ";\n }\n\n ", " {\n position: absolute;\n left: 12px;\n right: 12px;\n bottom: 2px;\n color: ", ";\n }\n\n // Error state:\n ", "\n\n // Disabled state:\n ", "\n\n // Ghost state:\n ", "\n\n // Fields may provide their weight in relative units to other fields.\n ", "\n"], ["\n // Size:\n position: relative;\n box-sizing: border-box;\n margin-bottom: 8px;\n min-height: 80px;\n \n // Appearance:\n border-radius: ", "px;\n background-color: ", ";\n border: none;\n\n // Hint/error background:\n ", " {\n ", "\n }\n\n // Hover:\n &:hover {\n outline: solid 2px ", ";\n }\n\n &:focus-within {\n outline: solid 2px ", ";\n } \n\n ", " {\n position: absolute;\n left: 12px;\n right: 12px;\n top: 10px;\n color: ", ";\n }\n\n ", " {\n position: absolute;\n left: 12px;\n right: 12px;\n bottom: 2px;\n color: ", ";\n }\n\n // Error state:\n ", "\n\n // Disabled state:\n ", "\n\n // Ghost state:\n ", "\n\n // Fields may provide their weight in relative units to other fields.\n ", "\n"])), function (p) { return p.theme.radius.normal; }, function (p) { return p.theme.colors.neutral[100]; }, HintBackground, function (p) { return !p.ghost && !p.disabled && css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n background: ", ";\n "], ["\n background: ", ";\n "])), p.error ? p.theme.colors.negative : p.theme.colors.neutral[95]); }, function (p) { return p.theme.colors.primary[2]; }, function (p) { return p.theme.colors.primary[1]; }, Label, function (p) { return p.theme.colors.primary[2]; }, Hint, function (p) { return p.error ? p.theme.colors.neutral[100] : p.theme.colors.primary[3]; }, function (p) { return p.error && css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n outline: solid 2px ", ";\n &:hover, &:focus-within {\n outline: solid 2px ", ";\n }\n "], ["\n outline: solid 2px ", ";\n &:hover, &:focus-within {\n outline: solid 2px ", ";\n }\n "])), p.theme.colors.negative, p.theme.colors.negative); }, function (p) { return p.disabled && css(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n user-select: none;\n outline: solid 2px ", ";\n background-color: ", ";\n pointer-events: none;\n ", " {\n color: ", ";\n }\n ", " {\n color: ", ";\n }\n "], ["\n user-select: none;\n outline: solid 2px ", ";\n background-color: ", ";\n pointer-events: none;\n ", " {\n color: ", ";\n }\n ", " {\n color: ", ";\n }\n "])), p.theme.colors.primary[4], p.theme.colors.primary[4], Label, p.theme.colors.neutral[50], Hint, p.theme.colors.neutral[50]); }, function (p) { return p.ghost && css(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n outline: dashed 1px ", ";\n background-color: transparent;\n pointer-events: none;\n\n ", " {\n color: transparent;\n text-shadow: 0 0 3px rgb(from ", " r g b / 50%);\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 pointer-events: none;\n\n ", " {\n color: transparent;\n text-shadow: 0 0 3px rgb(from ", " r g b / 50%);\n } \n ", " {\n color: transparent;\n text-shadow: 0 0 3px rgb(from ", " r g b / 50%);\n } \n "])), p.theme.colors.primary[2], Label, function (p) { return p.theme.colors.primary[1]; }, Hint, function (p) { return p.theme.colors.primary[1]; }); }, function (p) { return p.weight && css(templateObject_7 || (templateObject_7 = __makeTemplateObject(["flex: ", ""], ["flex: ", ""])), p.weight); });
|
|
35
36
|
export { BoxWrapper };
|
|
36
|
-
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7;
|
|
37
|
+
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8;
|
package/inputs/Dropdown/Body.js
CHANGED
|
@@ -6,9 +6,9 @@ import * as React from 'react';
|
|
|
6
6
|
import styled, { css } from 'styled-components';
|
|
7
7
|
import { List } from '../../containers/List';
|
|
8
8
|
var BodyBase = React.forwardRef(function (props, ref) {
|
|
9
|
-
return React.createElement("div", { className: props.className, tabIndex: -1 },
|
|
10
|
-
React.createElement(List, { tall: props.tall, maxItems: props.maxItems, contract: true, onSearch: props.onSearch, ref: ref }, props.children));
|
|
9
|
+
return (React.createElement("div", { className: props.className, tabIndex: -1 },
|
|
10
|
+
React.createElement(List, { tall: props.tall, maxItems: props.maxItems, contract: true, onSearch: props.onSearch, ref: ref }, props.children)));
|
|
11
11
|
});
|
|
12
|
-
var Body = styled(BodyBase)(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n position: absolute;\n z-index: 100;\n box-sizing: border-box;\n
|
|
12
|
+
var Body = styled(BodyBase)(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n position: absolute;\n z-index: 100;\n box-sizing: border-box;\n outline: none;\n visibility: ", ";\n font: ", ";\n\n // Width:\n ", "\n // Transparent fill be placed over thick FieldWrapper's border.\n ", "\n\n // Dropbox can open upwards or downwards. This affects its positioning \n // relative to the parent.\n // Transparent Dropdowns have more distance from the selector so that\n // they appear outside of the FieldWrapper.\n ", "\n ", "\n\n transition: opacity ", "ms ease-in-out,\n max-height 0ms linear ", "ms;\n max-height: 0;\n opacity: 0;\n ", "\n"], ["\n position: absolute;\n z-index: 100;\n box-sizing: border-box;\n outline: none;\n visibility: ", ";\n font: ", ";\n\n // Width:\n ", "\n // Transparent fill be placed over thick FieldWrapper's border.\n ", "\n\n // Dropbox can open upwards or downwards. This affects its positioning \n // relative to the parent.\n // Transparent Dropdowns have more distance from the selector so that\n // they appear outside of the FieldWrapper.\n ", "\n ", "\n\n transition: opacity ", "ms ease-in-out,\n max-height 0ms linear ", "ms;\n max-height: 0;\n opacity: 0;\n ", "\n"])), function (p) { return p.open ? 'visible' : 'hidden'; }, function (p) { return p.theme.font.bodyMedium; }, function (p) { return !p.transparent && css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["width: 100%;"], ["width: 100%;"]))); }, function (p) { return p.transparent && css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["left: -2px; right: -2px;"], ["left: -2px; right: -2px;"]))); }, function (p) { return p.upwards && css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n bottom: calc(100% + ", ");\n "], ["\n bottom: calc(100% + ", ");\n "])), p.transparent ? "30px" : "8px"); }, function (p) { return !p.upwards && css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n top: calc(100% + ", ");\n "], ["\n top: calc(100% + ", ");\n "])), p.transparent ? "30px" : "8px"); }, function (p) { return p.theme.animation.duration * 0; }, function (p) { return p.theme.animation.duration * 0; }, function (p) { return p.open && css(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n transition: opacity ", "ms ease-in,\n max-height 0ms linear;\n max-height: 1000px;\n opacity: 1;\n "], ["\n transition: opacity ", "ms ease-in,\n max-height 0ms linear;\n max-height: 1000px;\n opacity: 1;\n "])), function (p) { return p.theme.animation.duration; }); });
|
|
13
13
|
export { Body };
|
|
14
14
|
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6;
|
|
@@ -6,6 +6,11 @@ interface IProps {
|
|
|
6
6
|
* Current value.
|
|
7
7
|
*/
|
|
8
8
|
value?: number;
|
|
9
|
+
/**
|
|
10
|
+
* If set, `Slider` will fill all horizontal space available to it.
|
|
11
|
+
* @default false
|
|
12
|
+
*/
|
|
13
|
+
fluid?: boolean;
|
|
9
14
|
/**
|
|
10
15
|
* Minimum value.
|
|
11
16
|
* @default 0
|
|
@@ -27,10 +32,6 @@ interface IProps {
|
|
|
27
32
|
* `delta` will be 10% of the value range.
|
|
28
33
|
*/
|
|
29
34
|
delta?: number;
|
|
30
|
-
/**
|
|
31
|
-
* Event is triggered when slider's value changes.
|
|
32
|
-
*/
|
|
33
|
-
onChange?: (value: number) => void;
|
|
34
35
|
/**
|
|
35
36
|
* Should ticks be displayed? If so, how many?
|
|
36
37
|
* @default 0
|
|
@@ -53,11 +54,15 @@ interface IProps {
|
|
|
53
54
|
* A `Slider` can be in an `error` state.
|
|
54
55
|
*/
|
|
55
56
|
error?: boolean;
|
|
57
|
+
/**
|
|
58
|
+
* Event is triggered when slider's value changes.
|
|
59
|
+
*/
|
|
60
|
+
onChange?: (value: number) => void;
|
|
56
61
|
}
|
|
57
62
|
/**
|
|
58
63
|
* Sliders allow users to view and select a value (or range) along a track.
|
|
59
|
-
* They
|
|
64
|
+
* They're ideal for adjusting settings such as volume and brightness, or for
|
|
60
65
|
* applying image filters.
|
|
61
66
|
*/
|
|
62
|
-
declare const Slider: ({ min, max, ...props }: IProps) => React.JSX.Element;
|
|
67
|
+
declare const Slider: ({ min, max, fluid, ...props }: IProps) => React.JSX.Element;
|
|
63
68
|
export { Slider, IProps };
|
package/inputs/Slider/Slider.js
CHANGED
|
@@ -177,21 +177,21 @@ var Knob = styled.div(templateObject_12 || (templateObject_12 = __makeTemplateOb
|
|
|
177
177
|
var KnobPosition = styled.div(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n position: absolute;\n left: 0;\n top: 0px;\n z-index: 0; // Required z-offset for Knob::before\n"], ["\n position: absolute;\n left: 0;\n top: 0px;\n z-index: 0; // Required z-offset for Knob::before\n"])));
|
|
178
178
|
var TrackFill = styled.div(templateObject_16 || (templateObject_16 = __makeTemplateObject(["\n position: absolute;\n left: 0;\n top: 0;\n bottom: 0;\n right: 50%;\n background-color: ", ";\n ", "\n ", " \n border-radius: 2px;\n"], ["\n position: absolute;\n left: 0;\n top: 0;\n bottom: 0;\n right: 50%;\n background-color: ", ";\n ", "\n ", " \n border-radius: 2px;\n"])), function (p) { return p.theme.colors.primary[1]; }, function (p) { return p.$error && css(templateObject_14 || (templateObject_14 = __makeTemplateObject(["background-color: ", ";"], ["background-color: ", ";"])), p.theme.colors.negative); }, function (p) { return p.$disabled && css(templateObject_15 || (templateObject_15 = __makeTemplateObject(["background-color: ", ";"], ["background-color: ", ";"])), p.theme.colors.neutral[30]); });
|
|
179
179
|
var Track = styled.div(templateObject_17 || (templateObject_17 = __makeTemplateObject(["\n position: relative;\n height: 4px;\n border-radius: 2px;\n box-sizing: border-box;\n background-color: ", ";\n\n display: flex;\n flex-direction: row;\n justify-content: space-between;\n padding-top: 1px;\n padding-left: 2px;\n padding-right: 2px;\n"], ["\n position: relative;\n height: 4px;\n border-radius: 2px;\n box-sizing: border-box;\n background-color: ", ";\n\n display: flex;\n flex-direction: row;\n justify-content: space-between;\n padding-top: 1px;\n padding-left: 2px;\n padding-right: 2px;\n"])), function (p) { return p.theme.colors.primary[5]; });
|
|
180
|
-
var SliderStyled = styled(SliderBase)(templateObject_21 || (templateObject_21 = __makeTemplateObject(["\n position: relative;\n min-width:
|
|
180
|
+
var SliderStyled = styled(SliderBase)(templateObject_21 || (templateObject_21 = __makeTemplateObject(["\n position: relative;\n min-width: ", ";\n box-sizing: border-box;\n // Padding above and below to capture mouse-down\n padding-top: 48px;\n padding-bottom: 8px;\n ", "\n cursor: ", ";\n user-select: none;\n outline: none;\n ", "\n\n ", "\n"], ["\n position: relative;\n min-width: ", ";\n box-sizing: border-box;\n // Padding above and below to capture mouse-down\n padding-top: 48px;\n padding-bottom: 8px;\n ", "\n cursor: ", ";\n user-select: none;\n outline: none;\n ", "\n\n ", "\n"
|
|
181
181
|
/**
|
|
182
182
|
* Sliders allow users to view and select a value (or range) along a track.
|
|
183
|
-
* They
|
|
183
|
+
* They're ideal for adjusting settings such as volume and brightness, or for
|
|
184
184
|
* applying image filters.
|
|
185
185
|
*/
|
|
186
|
-
])), function (p) { return p.padded && css(templateObject_18 || (templateObject_18 = __makeTemplateObject(["\n padding-left: 12px;\n padding-right: 12px;\n "], ["\n padding-left: 12px;\n padding-right: 12px;\n "]))); }, function (p) { return p.disabled ? 'auto' : 'pointer'; }, function (p) { return p.disabled && css(templateObject_19 || (templateObject_19 = __makeTemplateObject(["\n pointer-events: none;\n "], ["\n pointer-events: none;\n "]))); }, function (p) { return !p.disabled && css(templateObject_20 || (templateObject_20 = __makeTemplateObject(["\n // Focus ring:\n &:focus ", ":before {\n animation: ", " 2s linear infinite;\n }\n\n &:hover ", ":before {\n animation: none;\n opacity: 0.7;\n } \n\n // Active focus ring:\n &:active ", ":before {\n animation: none;\n opacity: 1;\n }\n "], ["\n // Focus ring:\n &:focus ", ":before {\n animation: ", " 2s linear infinite;\n }\n\n &:hover ", ":before {\n animation: none;\n opacity: 0.7;\n } \n\n // Active focus ring:\n &:active ", ":before {\n animation: none;\n opacity: 1;\n }\n "])), Knob, Pulse, Knob, Knob); });
|
|
186
|
+
])), function (p) { return p.fluid == true ? '100%' : '200px'; }, function (p) { return p.padded && css(templateObject_18 || (templateObject_18 = __makeTemplateObject(["\n padding-left: 12px;\n padding-right: 12px;\n "], ["\n padding-left: 12px;\n padding-right: 12px;\n "]))); }, function (p) { return p.disabled ? 'auto' : 'pointer'; }, function (p) { return p.disabled && css(templateObject_19 || (templateObject_19 = __makeTemplateObject(["\n pointer-events: none;\n "], ["\n pointer-events: none;\n "]))); }, function (p) { return !p.disabled && css(templateObject_20 || (templateObject_20 = __makeTemplateObject(["\n // Focus ring:\n &:focus ", ":before {\n animation: ", " 2s linear infinite;\n }\n\n &:hover ", ":before {\n animation: none;\n opacity: 0.7;\n } \n\n // Active focus ring:\n &:active ", ":before {\n animation: none;\n opacity: 1;\n }\n "], ["\n // Focus ring:\n &:focus ", ":before {\n animation: ", " 2s linear infinite;\n }\n\n &:hover ", ":before {\n animation: none;\n opacity: 0.7;\n } \n\n // Active focus ring:\n &:active ", ":before {\n animation: none;\n opacity: 1;\n }\n "])), Knob, Pulse, Knob, Knob); });
|
|
187
187
|
/**
|
|
188
188
|
* Sliders allow users to view and select a value (or range) along a track.
|
|
189
|
-
* They
|
|
189
|
+
* They're ideal for adjusting settings such as volume and brightness, or for
|
|
190
190
|
* applying image filters.
|
|
191
191
|
*/
|
|
192
192
|
var Slider = function (_a) {
|
|
193
|
-
var _b = _a.min, min = _b === void 0 ? 0 : _b, _c = _a.max, max = _c === void 0 ? 100 : _c, props = __rest(_a, ["min", "max"]);
|
|
194
|
-
return React.createElement(SliderStyled, __assign({ min: min, max: max }, props));
|
|
193
|
+
var _b = _a.min, min = _b === void 0 ? 0 : _b, _c = _a.max, max = _c === void 0 ? 100 : _c, _d = _a.fluid, fluid = _d === void 0 ? false : _d, props = __rest(_a, ["min", "max", "fluid"]);
|
|
194
|
+
return React.createElement(SliderStyled, __assign({ min: min, max: max, fluid: fluid }, props));
|
|
195
195
|
};
|
|
196
196
|
export { Slider };
|
|
197
197
|
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13, templateObject_14, templateObject_15, templateObject_16, templateObject_17, templateObject_18, templateObject_19, templateObject_20, templateObject_21;
|