@salesgenterp/ui-components 0.4.160 → 0.4.162
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.js +21 -17
- package/dist/index.js.map +1 -1
- package/dist/index.modern.js +21 -17
- package/dist/index.modern.js.map +1 -1
- package/package.json +3 -3
package/dist/index.js
CHANGED
|
@@ -16,6 +16,7 @@ var TableBody = _interopDefault(require('@mui/material/TableBody'));
|
|
|
16
16
|
var TableHead = _interopDefault(require('@mui/material/TableHead'));
|
|
17
17
|
var TableRow = _interopDefault(require('@mui/material/TableRow'));
|
|
18
18
|
var TableSortLabel = _interopDefault(require('@mui/material/TableSortLabel'));
|
|
19
|
+
var hi2 = require('react-icons/hi2');
|
|
19
20
|
var bi = require('react-icons/bi');
|
|
20
21
|
var cg = require('react-icons/cg');
|
|
21
22
|
var md = require('react-icons/md');
|
|
@@ -87,16 +88,16 @@ function _taggedTemplateLiteralLoose(strings, raw) {
|
|
|
87
88
|
}
|
|
88
89
|
|
|
89
90
|
var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7;
|
|
90
|
-
var CartDrawerContainer = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n width: 100%;\n max-width: ", ";\n height: 100%;\n font-family: ", ";\n /* padding: 1em;\n padding-top: 0rem; */\n position: relative;\n /* min-width: 100%; */\n min-height: 100vh;\n max-height: 100vh;\n overflow-y: auto;\n
|
|
91
|
+
var CartDrawerContainer = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n width: 100%;\n max-width: ", ";\n height: 100%;\n font-family: ", ";\n /* padding: 1em;\n padding-top: 0rem; */\n position: relative;\n /* min-width: 100%; */\n min-height: 100vh;\n max-height: 100vh;\n overflow-y: auto;\n background-color: grey;\n display: flex;\n flex-direction: column;\n /* border: 1px solid; */\n"])), function (props) {
|
|
91
92
|
return props.maxWidth || '650px';
|
|
92
93
|
}, function (props) {
|
|
93
94
|
return props.fontFamily;
|
|
94
95
|
});
|
|
95
|
-
var CartDrawerBar = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n width: 100%;\n display: flex;\n flex-direction: row;\n justify-content: space-between;\n align-items: center;\n position: sticky;\n box-sizing: border-box;\n top: 0;\n left: -1em;\n padding: 1em;\n height: 4.6rem;\n font-size: 1.6rem;\n background-color: white;\n font-weight: bold;\n padding-left: 1rem;\n z-index: 2;\n h2{\n font-size: 1.5em;\n }\n .icon {\n cursor: pointer;\n font-size: 1em;\n }\n @media only screen and (max-width: 640px) {\n font-size: 1rem;\n height: 4rem;\n }\n"])));
|
|
96
|
+
var CartDrawerBar = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n width: 100%;\n display: flex;\n flex-direction: row;\n justify-content: space-between;\n align-items: center;\n position: sticky;\n box-sizing: border-box;\n top: 0;\n left: -1em;\n padding: 1em;\n height: 4.6rem;\n font-size: 1.6rem;\n background-color: white;\n font-weight: bold;\n padding-left: 1rem;\n z-index: 2;\n h2 {\n font-size: 1.5em;\n }\n .icon {\n cursor: pointer;\n font-size: 1em;\n }\n @media only screen and (max-width: 640px) {\n font-size: 1rem;\n height: 4rem;\n }\n"])));
|
|
96
97
|
var CartDrawerProductContainer = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["\n width: 100%;\n height: max-content;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: flex-start;\n position: relative;\n /* height: 900px; */\n padding: 1rem;\n min-height: 74vh;\n opacity: ", ";\n @media only screen and (max-width: 748px) {\n min-height: 75vh;\n }\n /* background-color: red; */\n"])), function (props) {
|
|
97
98
|
return props.opacity;
|
|
98
99
|
});
|
|
99
|
-
var CartDrawerBottomSection = styled.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteralLoose(["\n width: 100%;\n /* height: 8rem; */\n background-color: white;\n box-shadow: 3px -2px 10px #b1b1b1;\n display: flex;\n flex-direction: column;\n min-height: 7rem;\n position: sticky;\n bottom: 0;\n /* padding-bottom: 0.5rem; */\n\n /* left: 0; */\n align-items: center;\n .row {\n width: 100%;\n padding: 0rem 1rem;\n padding-top: 1rem;\n /* padding-left: 1rem; */\n h5 {\n font-weight: bold;\n font-size: 1.1rem;\n span {\n font-weight: 400;\n padding-left: 0.5rem;\n }\n }\n }\n @media only screen and (max-width: 340px) {\n min-height: 6rem;\n .row h5 {\n font-size: 0.8rem;\n }\n }\n"])));
|
|
100
|
+
var CartDrawerBottomSection = styled.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteralLoose(["\n width: 100%;\n /* height: 8rem; */\n background-color: white;\n box-shadow: 3px -2px 10px #b1b1b1;\n display: flex;\n flex-direction: column;\n min-height: 7rem;\n position: sticky;\n bottom: 0;\n margin-top:auto;\n /* padding-bottom: 0.5rem; */\n\n /* left: 0; */\n align-items: center;\n .row {\n width: 100%;\n padding: 0rem 1rem;\n padding-top: 1rem;\n /* padding-left: 1rem; */\n h5 {\n font-weight: bold;\n font-size: 1.1rem;\n span {\n font-weight: 400;\n padding-left: 0.5rem;\n }\n }\n }\n @media only screen and (max-width: 340px) {\n min-height: 6rem;\n .row h5 {\n font-size: 0.8rem;\n }\n }\n"])));
|
|
100
101
|
var CartDrawerOutlinedButton = styled.button(_templateObject5 || (_templateObject5 = _taggedTemplateLiteralLoose(["\n width: 90%;\n height: 3.55rem;\n border: 2px solid;\n border-radius: 1rem;\n display: grid;\n place-items: center;\n font-weight: 500;\n font-size: 1rem;\n transition: 0.5s;\n outline: none;\n text-transform: capitalize;\n border-color: ", ";\n color: ", ";\n text-transform: capitalize;\n margin: 0.6rem 0;\n cursor: pointer;\n background: white;\n &:hover,\n &:focus {\n opacity: 0.8;\n letter-spacing: 1px;\n outline: none;\n }\n @media only screen and (max-width: 640px) {\n height: 2.9rem;\n }\n @media only screen and (max-width: 340px) {\n height: 2.2rem;\n margin: 0.3rem 0;\n }\n"])), function (props) {
|
|
101
102
|
return props.color || 'black';
|
|
102
103
|
}, function (props) {
|
|
@@ -110,7 +111,7 @@ var CartDrawerEmptyCart = styled.div(_templateObject7 || (_templateObject7 = _ta
|
|
|
110
111
|
});
|
|
111
112
|
|
|
112
113
|
var _templateObject$1, _templateObject2$1, _templateObject3$1;
|
|
113
|
-
var CartDrawerProduct = styled.div(_templateObject$1 || (_templateObject$1 = _taggedTemplateLiteralLoose(["\n width: 100%;\n display: flex;\n flex-direction: row;\n height: 100px;\n justify-content: space-around;\n align-items: center;\n overflow: hidden;\n margin-bottom: 2rem;\n\n img {\n width: 20%;\n max-height: 100%;\n /* aspect-ratio: 1; */\n object-fit: cover;\n }\n .middleSection {\n width: 60%;\n padding-left: 0.8rem;\n height:
|
|
114
|
+
var CartDrawerProduct = styled.div(_templateObject$1 || (_templateObject$1 = _taggedTemplateLiteralLoose(["\n width: 100%;\n display: flex;\n flex-direction: row;\n height: 100px;\n justify-content: space-around;\n align-items: center;\n overflow: hidden;\n margin-bottom: 2rem;\n\n img {\n width: 20%;\n max-height: 100%;\n /* aspect-ratio: 1; */\n object-fit: cover;\n }\n .middleSection {\n width: 60%;\n padding-left: 0.8rem;\n height: 100%;\n h6 {\n font-size: 1.1rem;\n font-weight: bold;\n margin: 0;\n\n span {\n font-size: 0.8rem;\n color: grey;\n text-decoration: line-through;\n margin-right: 0.5rem;\n }\n }\n .name {\n font-size: 0.9rem;\n line-height: 1.2rem;\n max-height: 2.45rem;\n width: 100%;\n word-wrap: break-word;\n overflow: hidden;\n text-overflow: ellipsis;\n transition: 0.3s;\n cursor: pointer;\n &:hover {\n color: ", ";\n }\n }\n }\n .endSection {\n width: 20%;\n height: 95%;\n .icon {\n cursor: pointer;\n transition: 0.4s;\n &:hover {\n color: red;\n /* opacity: 0.7; */\n }\n }\n }\n @media only screen and (max-width: 768px) {\n .closeIcon {\n font-size: 1rem;\n }\n height: 80px;\n .middleSection {\n .name {\n max-height: 2.4rem;\n height: 2.4rem;\n }\n }\n }\n @media only screen and (max-width: 340px) {\n height: 80px;\n .middleSection {\n h6 {\n font-size: 0.9rem;\n }\n .name {\n font-size: 0.7rem;\n height: 1.45rem;\n }\n }\n }\n"])), function (props) {
|
|
114
115
|
return props.color || 'grey';
|
|
115
116
|
});
|
|
116
117
|
var CartDrawerQtBox = styled.div(_templateObject2$1 || (_templateObject2$1 = _taggedTemplateLiteralLoose(["\n height: 34px;\n width: 82px;\n border: 1px solid rgb(211, 210, 210);\n display: flex;\n align-items: center;\n justify-content: space-between;\n font-size: 13.5px;\n color: #333;\n padding: 0 0.5rem;\n border-radius: 5px;\n max-width: 100%;\n\n span {\n cursor: pointer;\n height: 100%;\n display: grid;\n place-items: center;\n }\n .qt {\n font-size: 12px;\n color: black;\n font-weight: 500;\n cursor: auto;\n }\n @media only screen and (max-width: 640px) {\n min-width: 55px;\n aspect-ratio: 1/2;\n /* min-height: 28px; */\n font-size: 10px;\n }\n @media only screen and (max-width: 340px) {\n min-width: 50px;\n aspect-ratio: 1/2;\n height: 22px;\n font-size: 8px;\n }\n"])));
|
|
@@ -1382,12 +1383,12 @@ if (process.env.NODE_ENV !== 'production') {
|
|
|
1382
1383
|
|
|
1383
1384
|
var _templateObject$3, _templateObject2$3, _templateObject3$3, _templateObject4$2, _templateObject5$2, _templateObject6$2;
|
|
1384
1385
|
var ProductImage = styled.img(_templateObject$3 || (_templateObject$3 = _taggedTemplateLiteralLoose(["\n min-width: 50px;\n min-height: 58px;\n @media only screen and (max-width: 640px) {\n margin: 0.5em 0;\n padding-right: 0.5em;\n }\n"])));
|
|
1385
|
-
var ProductName = styled.h6(_templateObject2$3 || (_templateObject2$3 = _taggedTemplateLiteralLoose(["\n font-size: ", ";\n padding: 0
|
|
1386
|
+
var ProductName = styled.h6(_templateObject2$3 || (_templateObject2$3 = _taggedTemplateLiteralLoose(["\n font-size: ", ";\n padding: 0;\n line-height: 1.3em;\n max-height: ", ";\n height: ", ";\n overflow: hidden;\n text-overflow: ellipsis;\n height: fit-content;\n"])), function (props) {
|
|
1386
1387
|
return props.size || '1em';
|
|
1387
1388
|
}, function (props) {
|
|
1388
|
-
return props.maxHeight ? props.maxHeight + "em" : '
|
|
1389
|
+
return props.maxHeight ? props.maxHeight + "em" : '2.75em';
|
|
1389
1390
|
}, function (props) {
|
|
1390
|
-
return props.maxHeight ? props.maxHeight + "em" : '
|
|
1391
|
+
return props.maxHeight ? props.maxHeight + "em" : '2.80em';
|
|
1391
1392
|
});
|
|
1392
1393
|
var CartTableRow = styled(material.TableRow)(_templateObject3$3 || (_templateObject3$3 = _taggedTemplateLiteralLoose(["\n position: relative;\n transition: 0.3s;\n background: white;\n /* &:hover {\n td:first-child,\n td:last-child {\n border-left-style: solid;\n border-top-style: solid;\n border-top-right-radius: 10px;\n }\n } */\n .outOfStock {\n font-size: 0.75em;\n color: red;\n text-transform: uppercase;\n font-weight: 500;\n }\n .price {\n font-size: ", ";\n font-weight: bold;\n color: #323232;\n /* font-size: 1.15em; */\n }\n .borderLeft {\n height: 100%;\n width: 0;\n background: #fd0015;\n transition: 0.2s;\n width: 0px;\n position: absolute;\n left: 0;\n top: 0;\n border-top-left-radius: 10px;\n display: none;\n border-bottom-left-radius: 10px;\n }\n &:hover {\n background: white !important;\n box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2);\n border-radius: 10px;\n /* opacity: 1;\n box-shadow: 1px 2px 6px 2px rgba(0, 0, 0, 0.2); */\n z-index: 2;\n /* border-radius: 20px; */\n .borderLeft {\n width: 13px;\n display: inline-block;\n }\n }\n @media only screen and (max-width: 640px) {\n .CartnoPaddingSm {\n padding: 0 !important;\n }\n .price {\n font-size: 0.8em;\n }\n margin: 0.5em 0;\n .cartCheckBox {\n .css-i4bv87-MuiSvgIcon-root {\n font-size: 10px !important;\n }\n }\n }\n"])), function (props) {
|
|
1393
1394
|
return props.size || '1.19em';
|
|
@@ -1396,7 +1397,7 @@ var CartTableCell$1 = styled(material.TableCell)(_templateObject4$2 || (_templat
|
|
|
1396
1397
|
var QuantityBox = styled.div(_templateObject5$2 || (_templateObject5$2 = _taggedTemplateLiteralLoose(["\n height: 1.7em;\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: center;\n div {\n /* width:30px; */\n min-height: 100%;\n aspect-ratio: 1.15/1;\n display: grid;\n place-items: center;\n font-size: 0.65em;\n color: white;\n background-color: #323232;\n cursor: pointer;\n }\n .price {\n background: transparent;\n cursor: auto;\n background: #ffffff;\n border: 1px solid #ebebeb;\n p {\n color: #5e5c5c;\n font-size: 0.685em;\n font-weight: 500;\n }\n }\n .add {\n background-color: #ebebeb;\n color: #323232;\n }\n"])));
|
|
1397
1398
|
var DeleteBtn = styled.div(_templateObject6$2 || (_templateObject6$2 = _taggedTemplateLiteralLoose(["\n display: grid;\n place-items: center;\n cursor: pointer;\n border-radius: 50%;\n width: 20px;\n height: 20px;\n background: #eef1f4;\n color: #393f48;\n font-size: 0.75em;\n transition: 0.4s;\n &:hover {\n background: red;\n color: white;\n }\n"])));
|
|
1398
1399
|
var CardRow = function CardRow(_ref) {
|
|
1399
|
-
var _styles$price, _styles$Btn,
|
|
1400
|
+
var _styles$price, _styles$Btn, _row$standardPrice, _row$subtotal;
|
|
1400
1401
|
var row = _ref.row,
|
|
1401
1402
|
isItemSelected = _ref.isItemSelected,
|
|
1402
1403
|
handleClick = _ref.handleClick,
|
|
@@ -1444,10 +1445,8 @@ var CardRow = function CardRow(_ref) {
|
|
|
1444
1445
|
id: row === null || row === void 0 ? void 0 : row.labelId,
|
|
1445
1446
|
scope: "row",
|
|
1446
1447
|
padding: "none"
|
|
1447
|
-
}, /*#__PURE__*/React__default.createElement(ProductName
|
|
1448
|
-
|
|
1449
|
-
size: styles === null || styles === void 0 ? void 0 : (_styles$name2 = styles.name) === null || _styles$name2 === void 0 ? void 0 : _styles$name2.size
|
|
1450
|
-
}, row.productName), row.quantity > row.availableQuantity && /*#__PURE__*/React__default.createElement("p", {
|
|
1448
|
+
}, /*#__PURE__*/React__default.createElement(ProductName
|
|
1449
|
+
, null, row.productName), row.quantity > row.availableQuantity && /*#__PURE__*/React__default.createElement("p", {
|
|
1451
1450
|
className: "outOfStock"
|
|
1452
1451
|
}, "out of stock")), /*#__PURE__*/React__default.createElement(CartTableCell$1, {
|
|
1453
1452
|
align: "center",
|
|
@@ -1583,10 +1582,15 @@ function EnhancedTableHead(props) {
|
|
|
1583
1582
|
className: (headCell === null || headCell === void 0 ? void 0 : headCell.noBelowSm) && 'CartnoBelowSm',
|
|
1584
1583
|
bg: styles.bg,
|
|
1585
1584
|
color: styles === null || styles === void 0 ? void 0 : styles.headingColor
|
|
1586
|
-
}, headCell.filter ? /*#__PURE__*/React.createElement(TableSortLabel
|
|
1587
|
-
|
|
1585
|
+
}, headCell.filter ? /*#__PURE__*/React.createElement(TableSortLabel
|
|
1586
|
+
, {
|
|
1587
|
+
active: true,
|
|
1588
1588
|
direction: orderBy === headCell.id ? order : 'asc',
|
|
1589
|
-
|
|
1589
|
+
IconComponent: function IconComponent() {
|
|
1590
|
+
return /*#__PURE__*/React.createElement(hi2.HiChevronUpDown, null);
|
|
1591
|
+
},
|
|
1592
|
+
onClick: createSortHandler(headCell.id),
|
|
1593
|
+
hideSortIcon: true
|
|
1590
1594
|
}, headCell.label) : /*#__PURE__*/React.createElement("span", null, headCell.label));
|
|
1591
1595
|
})));
|
|
1592
1596
|
}
|
|
@@ -1851,7 +1855,7 @@ var CartSummaryInputBox = styled.form(_templateObject4$4 || (_templateObject4$4
|
|
|
1851
1855
|
}, function (props) {
|
|
1852
1856
|
return props.Btncolor || 'inherit';
|
|
1853
1857
|
});
|
|
1854
|
-
var CartSummaryCheckoutBtn = styled.button(_templateObject5$4 || (_templateObject5$4 = _taggedTemplateLiteralLoose(["\n font-size: 0.95em;\n font-weight:
|
|
1858
|
+
var CartSummaryCheckoutBtn = styled.button(_templateObject5$4 || (_templateObject5$4 = _taggedTemplateLiteralLoose(["\n font-size: 0.95em;\n font-weight: 600;\n background: ", ";\n color: ", ";\n cursor: pointer;\n text-transform: uppercase;\n border: none;\n outline: none;\n width: 16.81em;\n height: 3.4em;\n display: grid;\n place-items: center;\n font-size: 0.75em;\n border-radius: ", ";\n padding: 0;\n font-family: 'karla-fonts';\n font-size: 0.94em;\n margin: 1em auto;\n transition: 0.3s;\n margin-top: 3em;\n &:hover {\n opacity: 0.8;\n }\n"])), function (props) {
|
|
1855
1859
|
return props.background || '#393f48';
|
|
1856
1860
|
}, function (props) {
|
|
1857
1861
|
return props.color || 'inherit';
|
|
@@ -1950,7 +1954,7 @@ var CartSummary = function CartSummary(_ref) {
|
|
|
1950
1954
|
},
|
|
1951
1955
|
background: Btn.background,
|
|
1952
1956
|
color: Btn.color
|
|
1953
|
-
}, "proceed to
|
|
1957
|
+
}, "proceed to checkout")), /*#__PURE__*/React__default.createElement(CartSummaryRow, {
|
|
1954
1958
|
justify: "center"
|
|
1955
1959
|
}, /*#__PURE__*/React__default.createElement("span", {
|
|
1956
1960
|
className: "continueShopping",
|