@mw-kit/mw-ui 1.7.38 → 1.7.39
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/index.modern.js
CHANGED
|
@@ -15556,79 +15556,88 @@ var bullet = css(_templateObject$q || (_templateObject$q = _taggedTemplateLitera
|
|
|
15556
15556
|
var theme = _ref4.theme;
|
|
15557
15557
|
return theme.getColor('black', 10);
|
|
15558
15558
|
});
|
|
15559
|
-
var
|
|
15560
|
-
var LabelContainer$4 = styled.div(_templateObject3$i || (_templateObject3$i = _taggedTemplateLiteralLoose(["\n display: inline-block;\n margin-bottom: ", ";\n"])), function (_ref5) {
|
|
15559
|
+
var NavBar = styled.div(_templateObject2$m || (_templateObject2$m = _taggedTemplateLiteralLoose(["\n position: absolute;\n z-index: 2;\n\n left: 0;\n width: 100%;\n height: calc(33px + ", ");\n transition: height 0.25s ease-in-out;\n overflow: hidden;\n\n ", "\n\n > div {\n position: absolute;\n z-index: 2;\n\n width: 100px;\n left: ", ";\n background-color: ", ";\n color: ", ";\n padding: ", ";\n border-radius: 4px;\n\n display: flex;\n align-items: center;\n justify-content: space-between;\n }\n"])), function (_ref5) {
|
|
15561
15560
|
var theme = _ref5.theme;
|
|
15562
15561
|
return theme.spacings.s1;
|
|
15562
|
+
}, function (_ref6) {
|
|
15563
|
+
var position = _ref6.position;
|
|
15564
|
+
return position === 'bottom' ? css(_templateObject3$i || (_templateObject3$i = _taggedTemplateLiteralLoose(["\n bottom: 100%;\n > div {\n bottom: ", ";\n }\n "])), function (_ref7) {
|
|
15565
|
+
var theme = _ref7.theme;
|
|
15566
|
+
return theme.spacings.s1;
|
|
15567
|
+
}) : css(_templateObject4$d || (_templateObject4$d = _taggedTemplateLiteralLoose(["\n top: 100%;\n > div {\n top: ", ";\n }\n "])), function (_ref8) {
|
|
15568
|
+
var theme = _ref8.theme;
|
|
15569
|
+
return theme.spacings.s1;
|
|
15570
|
+
});
|
|
15571
|
+
}, function (_ref9) {
|
|
15572
|
+
var percent = _ref9.percent;
|
|
15573
|
+
if (percent < 10) return '0%';
|
|
15574
|
+
if (percent > 90) return 'calc(100% - 100px)';
|
|
15575
|
+
return "calc(" + percent + "% - 50px + 22px * " + (50 - percent) / 100 + ")";
|
|
15576
|
+
}, function (_ref10) {
|
|
15577
|
+
var theme = _ref10.theme;
|
|
15578
|
+
return theme.colors.blue;
|
|
15579
|
+
}, function (_ref11) {
|
|
15580
|
+
var theme = _ref11.theme;
|
|
15581
|
+
return theme.colors.white;
|
|
15582
|
+
}, function (_ref12) {
|
|
15583
|
+
var theme = _ref12.theme;
|
|
15584
|
+
return theme.spacings.s1;
|
|
15563
15585
|
});
|
|
15564
|
-
var
|
|
15565
|
-
|
|
15586
|
+
var Input$2 = styled.input(_templateObject5$b || (_templateObject5$b = _taggedTemplateLiteralLoose(["\n appearance: none;\n width: 100%;\n height: 10px;\n background-color: transparent;\n outline: none;\n position: relative;\n z-index: 3;\n margin: 0;\n\n :not(:disabled) {\n cursor: pointer;\n }\n\n /** firefox */\n ::-moz-range-thumb {\n ", "\n }\n /** ie */\n ::-ms-thumb {\n ", "\n }\n /** chrome */\n ::-webkit-slider-thumb {\n ", "\n }\n"])), bullet, bullet, bullet);
|
|
15587
|
+
var LabelContainer$4 = styled.div(_templateObject6$a || (_templateObject6$a = _taggedTemplateLiteralLoose(["\n display: inline-block;\n margin-bottom: ", ";\n"])), function (_ref13) {
|
|
15588
|
+
var theme = _ref13.theme;
|
|
15589
|
+
return theme.spacings.s1;
|
|
15590
|
+
});
|
|
15591
|
+
var Label$5 = styled.label(_templateObject7$a || (_templateObject7$a = _taggedTemplateLiteralLoose(["\n ", ";\n line-height: 19px;\n\n width: ", ";\n box-sizing: border-box;\n display: block;\n position: relative;\n\n ", "\n\n > ", " {\n ", "\n }\n\n :not(:hover) ", " {\n height: 0;\n }\n"])), function (_ref14) {
|
|
15592
|
+
var theme = _ref14.theme;
|
|
15566
15593
|
return theme.useTypography('p');
|
|
15567
|
-
}, function (
|
|
15568
|
-
var width =
|
|
15594
|
+
}, function (_ref15) {
|
|
15595
|
+
var width = _ref15.width;
|
|
15569
15596
|
return width || '100%';
|
|
15570
|
-
}, function (
|
|
15571
|
-
var disabled =
|
|
15597
|
+
}, function (_ref16) {
|
|
15598
|
+
var disabled = _ref16.disabled;
|
|
15572
15599
|
if (!disabled) return;
|
|
15573
|
-
return css(
|
|
15574
|
-
}, LabelContainer$4, function (
|
|
15575
|
-
var required =
|
|
15576
|
-
return required && css(
|
|
15577
|
-
});
|
|
15578
|
-
var InputContainer$1 = styled.div(
|
|
15579
|
-
var theme =
|
|
15580
|
-
invalid =
|
|
15600
|
+
return css(_templateObject8$8 || (_templateObject8$8 = _taggedTemplateLiteralLoose(["\n opacity: 0.5;\n "])));
|
|
15601
|
+
}, LabelContainer$4, function (_ref17) {
|
|
15602
|
+
var required = _ref17.required;
|
|
15603
|
+
return required && css(_templateObject9$8 || (_templateObject9$8 = _taggedTemplateLiteralLoose(["\n :after {\n content: ' *';\n }\n "])));
|
|
15604
|
+
}, NavBar);
|
|
15605
|
+
var InputContainer$1 = styled.div(_templateObject10$6 || (_templateObject10$6 = _taggedTemplateLiteralLoose(["\n flex: 1;\n display: flex;\n gap: 6px;\n\n > div {\n position: relative;\n }\n\n ", "\n"])), function (_ref18) {
|
|
15606
|
+
var theme = _ref18.theme,
|
|
15607
|
+
invalid = _ref18.invalid;
|
|
15581
15608
|
|
|
15582
15609
|
if (!invalid) {
|
|
15583
|
-
return css(
|
|
15610
|
+
return css(_templateObject11$4 || (_templateObject11$4 = _taggedTemplateLiteralLoose(["\n ", " > span {\n background-color: ", ";\n }\n\n ", " {\n /** firefox */\n ::-moz-range-thumb {\n border-color: ", ";\n }\n /** ie */\n ::-ms-thumb {\n border-color: ", ";\n }\n /** chrome */\n ::-webkit-slider-thumb {\n border-color: ", ";\n }\n }\n "])), SelectedArea, theme.colors.blue, Input$2, theme.colors.lightestGrey, theme.colors.lightestGrey, theme.colors.lightestGrey);
|
|
15584
15611
|
}
|
|
15585
15612
|
|
|
15586
|
-
return css(
|
|
15613
|
+
return css(_templateObject12$3 || (_templateObject12$3 = _taggedTemplateLiteralLoose(["\n ", " > span {\n background-color: ", ";\n }\n\n ", " {\n /** firefox */\n ::-moz-range-thumb {\n border-color: ", ";\n }\n /** ie */\n ::-ms-thumb {\n border-color: ", ";\n }\n /** chrome */\n ::-webkit-slider-thumb {\n border-color: ", ";\n }\n }\n "])), SelectedArea, theme.colors.warningRed, Input$2, theme.colors.warningRed, theme.colors.warningRed, theme.colors.warningRed);
|
|
15587
15614
|
});
|
|
15588
|
-
var MinMaxLabelContainer = styled.div(
|
|
15589
|
-
var LabelsContainer = styled.div(
|
|
15590
|
-
var position =
|
|
15615
|
+
var MinMaxLabelContainer = styled.div(_templateObject13$2 || (_templateObject13$2 = _taggedTemplateLiteralLoose(["\n display: flex;\n padding-bottom: 2px;\n"])));
|
|
15616
|
+
var LabelsContainer = styled.div(_templateObject14$2 || (_templateObject14$2 = _taggedTemplateLiteralLoose(["\n display: flex;\n gap: 7px;\n\n ", "\n"])), function (_ref19) {
|
|
15617
|
+
var position = _ref19.position;
|
|
15591
15618
|
|
|
15592
15619
|
if (position === 'bottom') {
|
|
15593
|
-
return css(
|
|
15620
|
+
return css(_templateObject15$2 || (_templateObject15$2 = _taggedTemplateLiteralLoose(["\n ", " {\n flex-direction: column-reverse;\n }\n\n ", " {\n :after {\n bottom: calc(100% + 10.5px);\n }\n }\n\n ", " {\n align-items: start;\n }\n "])), InputContainer$1, Marker, MinMaxLabelContainer);
|
|
15594
15621
|
}
|
|
15595
15622
|
|
|
15596
|
-
return css(
|
|
15623
|
+
return css(_templateObject16$2 || (_templateObject16$2 = _taggedTemplateLiteralLoose(["\n ", " {\n flex-direction: column;\n }\n\n ", " {\n :after {\n top: calc(100% + 8px);\n }\n }\n\n ", " {\n align-items: end;\n }\n "])), InputContainer$1, Marker, MinMaxLabelContainer);
|
|
15597
15624
|
});
|
|
15598
|
-
var SelectedArea = styled.div(
|
|
15599
|
-
var theme =
|
|
15625
|
+
var SelectedArea = styled.div(_templateObject17$2 || (_templateObject17$2 = _taggedTemplateLiteralLoose(["\n background-color: ", ";\n\n height: 3px;\n width: 100%;\n position: absolute;\n bottom: calc(50% - 2px);\n left: 0;\n display: flex;\n z-index: 1;\n\n > span {\n width: ", "%;\n display: block;\n box-sizing: border-box;\n height: 100%;\n }\n"])), function (_ref20) {
|
|
15626
|
+
var theme = _ref20.theme;
|
|
15600
15627
|
return theme.getColor('greyishBlue', 10);
|
|
15601
|
-
}, function (
|
|
15602
|
-
var percent =
|
|
15628
|
+
}, function (_ref21) {
|
|
15629
|
+
var percent = _ref21.percent;
|
|
15603
15630
|
return percent;
|
|
15604
15631
|
});
|
|
15605
|
-
var MarkersContainer = styled.div(
|
|
15606
|
-
var Marker = styled.div(
|
|
15607
|
-
var left =
|
|
15632
|
+
var MarkersContainer = styled.div(_templateObject18$2 || (_templateObject18$2 = _taggedTemplateLiteralLoose(["\n height: 17px;\n"])));
|
|
15633
|
+
var Marker = styled.div(_templateObject19$1 || (_templateObject19$1 = _taggedTemplateLiteralLoose(["\n position: absolute;\n top: 0;\n width: 40px;\n text-align: center;\n left: ", ";\n z-index: 2;\n\n :first-child {\n left: 0;\n text-align: left;\n\n :after {\n left: 0;\n }\n }\n :last-child {\n right: 0;\n left: unset;\n text-align: right;\n\n :after {\n right: 0;\n left: unset;\n }\n }\n\n ", "\n"])), function (_ref22) {
|
|
15634
|
+
var left = _ref22.left;
|
|
15608
15635
|
return left;
|
|
15609
|
-
}, function (
|
|
15610
|
-
var bullet =
|
|
15611
|
-
theme =
|
|
15636
|
+
}, function (_ref23) {
|
|
15637
|
+
var bullet = _ref23.bullet,
|
|
15638
|
+
theme = _ref23.theme;
|
|
15612
15639
|
if (!bullet) return;
|
|
15613
|
-
return css(
|
|
15614
|
-
});
|
|
15615
|
-
var Text = styled.div(_templateObject18$2 || (_templateObject18$2 = _taggedTemplateLiteralLoose(["\n position: absolute;\n ", "\n width: 80px;\n left: ", ";\n background-color: ", ";\n color: ", ";\n padding: ", ";\n border-radius: 4px;\n\n display: flex;\n align-items: center;\n justify-content: space-between;\n"])), function (_ref16) {
|
|
15616
|
-
var position = _ref16.position;
|
|
15617
|
-
return position === 'bottom' ? css(_templateObject19$1 || (_templateObject19$1 = _taggedTemplateLiteralLoose(["\n bottom: calc(100% + 10px);\n "]))) : css(_templateObject20$1 || (_templateObject20$1 = _taggedTemplateLiteralLoose(["\n top: calc(100% + 10px);\n "])));
|
|
15618
|
-
}, function (_ref17) {
|
|
15619
|
-
var percent = _ref17.percent;
|
|
15620
|
-
if (percent < 10) return '0%';
|
|
15621
|
-
if (percent > 90) return 'calc(100% - 80px)';
|
|
15622
|
-
return "calc(" + percent + "% - 40px + 22px * " + (50 - percent) / 100 + ")";
|
|
15623
|
-
}, function (_ref18) {
|
|
15624
|
-
var theme = _ref18.theme;
|
|
15625
|
-
return theme.colors.blue;
|
|
15626
|
-
}, function (_ref19) {
|
|
15627
|
-
var theme = _ref19.theme;
|
|
15628
|
-
return theme.colors.white;
|
|
15629
|
-
}, function (_ref20) {
|
|
15630
|
-
var theme = _ref20.theme;
|
|
15631
|
-
return theme.spacings.s1;
|
|
15640
|
+
return css(_templateObject20$1 || (_templateObject20$1 = _taggedTemplateLiteralLoose(["\n :after {\n content: '';\n position: absolute;\n left: calc(50% - 5px);\n width: 10px;\n height: 10px;\n border-radius: 100%;\n border: 1px solid ", ";\n background-color: ", ";\n box-shadow: 0px 1px 3px ", ";\n }\n "])), theme.colors.lightestGrey, theme.colors.white, theme.getColor('black', 10));
|
|
15632
15641
|
});
|
|
15633
15642
|
|
|
15634
15643
|
var getMarkers = function getMarkers(props) {
|
|
@@ -15828,10 +15837,10 @@ var Range = React__default.forwardRef(function (props, ref) {
|
|
|
15828
15837
|
}, marker.label);
|
|
15829
15838
|
})), React__default.createElement("div", null, React__default.createElement(Input$2, Object.assign({
|
|
15830
15839
|
ref: ref
|
|
15831
|
-
}, inputProps)), React__default.createElement(
|
|
15840
|
+
}, inputProps)), React__default.createElement(NavBar, {
|
|
15832
15841
|
percent: value * 100 / max,
|
|
15833
15842
|
position: position
|
|
15834
|
-
}, React__default.createElement(Icon, {
|
|
15843
|
+
}, React__default.createElement("div", null, React__default.createElement(Icon, {
|
|
15835
15844
|
type: 'feather',
|
|
15836
15845
|
icon: 'minus_circle',
|
|
15837
15846
|
color: 'white',
|
|
@@ -15841,7 +15850,7 @@ var Range = React__default.forwardRef(function (props, ref) {
|
|
|
15841
15850
|
icon: 'plus_circle',
|
|
15842
15851
|
color: 'white',
|
|
15843
15852
|
onClick: canIncrement ? increment : undefined
|
|
15844
|
-
})), React__default.createElement(SelectedArea, {
|
|
15853
|
+
}))), React__default.createElement(SelectedArea, {
|
|
15845
15854
|
percent: percent
|
|
15846
15855
|
}, Array(spans).fill(1).map(function (_value, index) {
|
|
15847
15856
|
return React__default.createElement("span", {
|