@loja-integrada/admin-components 0.9.1 → 0.9.5
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/Forms/Checkbox/Checkbox.d.ts +1 -0
- package/dist/Icons/icons-path/Image.d.ts +2 -0
- package/dist/Icons/icons-path/Move.d.ts +2 -0
- package/dist/Icons/icons-path/index.d.ts +2 -0
- package/dist/admin-components.cjs.development.js +41 -11
- package/dist/admin-components.cjs.development.js.map +1 -1
- package/dist/admin-components.cjs.production.min.js +1 -1
- package/dist/admin-components.cjs.production.min.js.map +1 -1
- package/dist/admin-components.esm.js +41 -11
- package/dist/admin-components.esm.js.map +1 -1
- package/package.json +1 -1
- package/src/Components/LoadingPlaceholder/LoadingPlaceholder.tsx +1 -1
- package/src/Components/Table/Table.tsx +9 -5
- package/src/Components/Tabs/TabsItem.tsx +2 -1
- package/src/Forms/Checkbox/Checkbox.tsx +15 -8
- package/src/Icons/icons-path/Image.tsx +9 -0
- package/src/Icons/icons-path/Move.tsx +9 -0
- package/src/Icons/icons-path/index.ts +4 -0
- package/src/Layout/ActionBar/ActionBar.stories.tsx +8 -7
- package/src/Layout/ActionBar/ActionBar.tsx +19 -16
- package/src/Navigation/Pagination/PaginationInfo.tsx +1 -0
- package/src/Navigation/Pagination/PaginationNav.tsx +6 -2
|
@@ -266,6 +266,22 @@ var Home = function Home() {
|
|
|
266
266
|
});
|
|
267
267
|
};
|
|
268
268
|
|
|
269
|
+
var Image = function Image() {
|
|
270
|
+
return React.createElement("path", {
|
|
271
|
+
fillRule: "evenodd",
|
|
272
|
+
d: "M10.5 5a1.5 1.5 0 1 1 3 0 1.5 1.5 0 0 1-3 0Zm5.5 7.5H2a.5.5 0 0 1-.5-.5v-.937L5.176 8.39a2.247 2.247 0 0 1 2.647 0l2.188 1.59a3.759 3.759 0 0 0 4.027.246L16.5 8.857V12a.5.5 0 0 1-.5.5ZM2 1.5h14a.5.5 0 0 1 .5.5v5.261a.704.704 0 0 0-.364.084l-2.827 1.57a2.258 2.258 0 0 1-2.416-.147L8.706 7.177a3.743 3.743 0 0 0-4.412 0L1.5 9.209V2a.5.5 0 0 1 .5-.5ZM16 0H2a2 2 0 0 0-2 2v10a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2Z",
|
|
273
|
+
clipRule: "evenodd"
|
|
274
|
+
});
|
|
275
|
+
};
|
|
276
|
+
|
|
277
|
+
var Move = function Move() {
|
|
278
|
+
return React.createElement("path", {
|
|
279
|
+
fillRule: "evenodd",
|
|
280
|
+
d: "M9.5 14c0-.828-.672-1.5-1.5-1.5s-1.5.672-1.5 1.5.672 1.5 1.5 1.5 1.5-.672 1.5-1.5zm-6 0c0-.828-.671-1.5-1.5-1.5S.5 13.172.5 14s.671 1.5 1.5 1.5 1.5-.672 1.5-1.5zm6-12C9.5 1.172 8.828.5 8 .5S6.5 1.172 6.5 2 7.172 3.5 8 3.5 9.5 2.828 9.5 2zm-6 0C3.5 1.172 2.829.5 2 .5S.5 1.172.5 2 1.171 3.5 2 3.5 3.5 2.828 3.5 2zm6 6c0-.828-.672-1.5-1.5-1.5S6.5 7.172 6.5 8 7.172 9.5 8 9.5 9.5 8.828 9.5 8zM2 9.5C1.171 9.5.5 8.828.5 8S1.171 6.5 2 6.5s1.5.672 1.5 1.5S2.829 9.5 2 9.5z",
|
|
281
|
+
clipRule: "evenodd"
|
|
282
|
+
});
|
|
283
|
+
};
|
|
284
|
+
|
|
269
285
|
var Order = function Order() {
|
|
270
286
|
return React.createElement("path", {
|
|
271
287
|
fillRule: "evenodd",
|
|
@@ -494,6 +510,8 @@ var icons = {
|
|
|
494
510
|
exclamationTriangle: ExclamationTriangle,
|
|
495
511
|
externalLink: ExternalLink,
|
|
496
512
|
home: Home,
|
|
513
|
+
image: Image,
|
|
514
|
+
move: Move,
|
|
497
515
|
order: Order,
|
|
498
516
|
pagali: Pagali,
|
|
499
517
|
paperList: PaperList,
|
|
@@ -661,7 +679,7 @@ var LoadingPlaceholderComponent = function LoadingPlaceholderComponent(_ref) {
|
|
|
661
679
|
return React.createElement("div", {
|
|
662
680
|
className: "animate-pulse flex " + className
|
|
663
681
|
}, React.createElement("div", {
|
|
664
|
-
className: "h-4 bg-inverted-2 bg-opacity-20 rounded w-
|
|
682
|
+
className: "h-4 bg-inverted-2 bg-opacity-20 rounded w-full max-w-full"
|
|
665
683
|
}));
|
|
666
684
|
};
|
|
667
685
|
|
|
@@ -1570,7 +1588,9 @@ var CheckboxComponent = function CheckboxComponent(_ref, ref) {
|
|
|
1570
1588
|
checked = _ref.checked,
|
|
1571
1589
|
disabled = _ref.disabled,
|
|
1572
1590
|
indeterminate = _ref.indeterminate,
|
|
1573
|
-
|
|
1591
|
+
_ref$boxAlign = _ref.boxAlign,
|
|
1592
|
+
boxAlign = _ref$boxAlign === void 0 ? 'center' : _ref$boxAlign,
|
|
1593
|
+
props = _objectWithoutPropertiesLoose(_ref, ["label", "id", "name", "onChange", "checked", "disabled", "indeterminate", "boxAlign"]);
|
|
1574
1594
|
|
|
1575
1595
|
var inputRef = React.useRef(null);
|
|
1576
1596
|
var inputId = id || name;
|
|
@@ -1583,6 +1603,7 @@ var CheckboxComponent = function CheckboxComponent(_ref, ref) {
|
|
|
1583
1603
|
isIndeterminate = _React$useState2[0],
|
|
1584
1604
|
setIsIndeterminate = _React$useState2[1];
|
|
1585
1605
|
|
|
1606
|
+
var isCenterBoxAlign = boxAlign === 'center';
|
|
1586
1607
|
React.useEffect(function () {
|
|
1587
1608
|
setIsChecked(!!checked);
|
|
1588
1609
|
if (checked) setIsIndeterminate(false);
|
|
@@ -1601,11 +1622,11 @@ var CheckboxComponent = function CheckboxComponent(_ref, ref) {
|
|
|
1601
1622
|
};
|
|
1602
1623
|
|
|
1603
1624
|
var checkboxIconClasses = "transition duration-200 ease-in-out " + (isChecked || isIndeterminate ? 'scale-100' : 'scale-0');
|
|
1604
|
-
var checkboxIconContainerClasses = "border border-card-stroke transition duration-200 ease-in-out
|
|
1625
|
+
var checkboxIconContainerClasses = "border border-card-stroke transition duration-200 ease-in-out\n " + (disabled ? 'bg-base-4' : isChecked || isIndeterminate ? 'bg-primary border-primary' : 'bg-base-1') + "\n " + (isCenterBoxAlign ? 'items-center' : '') + "\n rounded w-4 h-4 flex justify-center m-px\n ";
|
|
1605
1626
|
var checkboxLabelClasses = "ml-1 input-label text-f6 tracking-4 leading-6 " + (disabled ? 'text-inverted-2' : '');
|
|
1606
1627
|
return React.createElement("label", {
|
|
1607
1628
|
htmlFor: inputId,
|
|
1608
|
-
className: "inline-flex items-
|
|
1629
|
+
className: "inline-flex items-" + boxAlign + " cursor-pointer"
|
|
1609
1630
|
}, React.createElement("span", {
|
|
1610
1631
|
className: "rounded z-50 flex items-center justify-center focus-within:ring-2 ring-focus"
|
|
1611
1632
|
}, React.createElement("input", Object.assign({
|
|
@@ -1820,10 +1841,12 @@ var TableComponent = function TableComponent(_ref2) {
|
|
|
1820
1841
|
}));
|
|
1821
1842
|
})), React.createElement("tbody", Object.assign({}, getTableBodyProps(), {
|
|
1822
1843
|
className: "text-sm text-on-base"
|
|
1823
|
-
}), isLoading ? React.createElement("tr", null,
|
|
1824
|
-
|
|
1825
|
-
|
|
1826
|
-
|
|
1844
|
+
}), isLoading ? React.createElement("tr", null, Array(columnsLength).fill(0).map(function (key) {
|
|
1845
|
+
return React.createElement("td", {
|
|
1846
|
+
key: key,
|
|
1847
|
+
className: "" + TdClasses
|
|
1848
|
+
}, React.createElement(TdWrapper, null, React.createElement(LoadingPlaceholder, null)));
|
|
1849
|
+
})) : !rows || !rows.length ? React.createElement("tr", null, React.createElement("td", {
|
|
1827
1850
|
colSpan: columnsLength || 1,
|
|
1828
1851
|
className: "" + TdClasses
|
|
1829
1852
|
}, React.createElement(TdWrapper, null, React.createElement("div", {
|
|
@@ -1882,12 +1905,13 @@ var TabsItem = function TabsItem(_ref) {
|
|
|
1882
1905
|
active = _ref$active === void 0 ? false : _ref$active,
|
|
1883
1906
|
onChange = _ref.onChange;
|
|
1884
1907
|
return React.createElement("button", {
|
|
1908
|
+
id: "btnTab" + id,
|
|
1885
1909
|
className: "tabs-item " + (active ? 'tabs-item-active' : '') + " group min-w-0 flex-shrink-0 overflow-x-hidden px-2 last:-mr-2 first:-ml-2",
|
|
1886
1910
|
onClick: function onClick() {
|
|
1887
1911
|
return onChange(id);
|
|
1888
1912
|
}
|
|
1889
1913
|
}, React.createElement("span", {
|
|
1890
|
-
className: "block text-f6 text-sm py-4 border-b-4 break-words group-hover:font-semibold " + activeStyles(active) + " " + boldFixStyle,
|
|
1914
|
+
className: "block text-f6 tracking-4 text-sm py-4 border-b-4 break-words group-hover:font-semibold " + activeStyles(active) + " " + boldFixStyle,
|
|
1891
1915
|
"data-title": title
|
|
1892
1916
|
}, title));
|
|
1893
1917
|
};
|
|
@@ -2677,6 +2701,7 @@ var ActionBarComponent = function ActionBarComponent(_ref) {
|
|
|
2677
2701
|
className: "lg:hidden"
|
|
2678
2702
|
}, React.Children.map(children, function (_ref3) {
|
|
2679
2703
|
var props = _ref3.props;
|
|
2704
|
+
if (!props.children) return;
|
|
2680
2705
|
return React.createElement("button", {
|
|
2681
2706
|
className: 'px-4 py-1 text-base-1' + (props != null && props.loading ? ' pointer-events-none' : ''),
|
|
2682
2707
|
onClick: props == null ? void 0 : props.onClick
|
|
@@ -2795,6 +2820,7 @@ var PaginationInfoComponent = function PaginationInfoComponent(_ref) {
|
|
|
2795
2820
|
}, React.createElement("div", {
|
|
2796
2821
|
className: "flex items-center mr-5 text-inverted-2 tracking-4 text-f6"
|
|
2797
2822
|
}, itemsLengthOptions ? React.createElement(Select, {
|
|
2823
|
+
id: "selectItemsPerPage",
|
|
2798
2824
|
options: itemsLengthOptions,
|
|
2799
2825
|
withoutStyle: true,
|
|
2800
2826
|
"aria-label": "Itens por p\xE1gina",
|
|
@@ -2864,6 +2890,7 @@ var PaginationNavComponent = function PaginationNavComponent(_ref) {
|
|
|
2864
2890
|
}, React.createElement("div", {
|
|
2865
2891
|
className: "text-inverted-2 text-f6 tracking-4"
|
|
2866
2892
|
}, React.createElement("span", {
|
|
2893
|
+
id: "btnPaginationActualPage",
|
|
2867
2894
|
className: "pagination-nav-current text-primary font-semibold",
|
|
2868
2895
|
ref: inputEl,
|
|
2869
2896
|
contentEditable: true,
|
|
@@ -2873,6 +2900,7 @@ var PaginationNavComponent = function PaginationNavComponent(_ref) {
|
|
|
2873
2900
|
onCut: onPreventDefault,
|
|
2874
2901
|
onPaste: onPreventDefault
|
|
2875
2902
|
}, currentPage), ' ', "/", ' ', React.createElement("button", {
|
|
2903
|
+
id: "btnPaginationLastPage",
|
|
2876
2904
|
className: "pagination-nav-total focus:outline-none",
|
|
2877
2905
|
onClick: function onClick() {
|
|
2878
2906
|
if (currentPage !== maxTotalPages) handleChange(maxTotalPages);
|
|
@@ -2880,7 +2908,8 @@ var PaginationNavComponent = function PaginationNavComponent(_ref) {
|
|
|
2880
2908
|
}, maxTotalPages)), React.createElement("div", {
|
|
2881
2909
|
className: "text-inverted-2 ml-5 flex items-center"
|
|
2882
2910
|
}, React.createElement("button", {
|
|
2883
|
-
|
|
2911
|
+
id: "btnPaginationPrev",
|
|
2912
|
+
className: "pagination-nav-previous mr-3 duration-200 outline-none " + (hasPrev ? 'hover:text-inverted-1' : ''),
|
|
2884
2913
|
"aria-label": "Ir para p\xE1gina anterior",
|
|
2885
2914
|
onClick: function onClick() {
|
|
2886
2915
|
if (hasPrev) handleChange(currentPage - 1);
|
|
@@ -2890,7 +2919,8 @@ var PaginationNavComponent = function PaginationNavComponent(_ref) {
|
|
|
2890
2919
|
block: true,
|
|
2891
2920
|
size: 4
|
|
2892
2921
|
})), React.createElement("button", {
|
|
2893
|
-
|
|
2922
|
+
id: "btnPaginationNext",
|
|
2923
|
+
className: "pagination-nav-next duration-200 outline-none " + (hasNext ? 'hover:text-inverted-1' : ''),
|
|
2894
2924
|
"aria-label": "Ir para pr\xF3xima p\xE1gina",
|
|
2895
2925
|
onClick: function onClick() {
|
|
2896
2926
|
if (hasNext) handleChange(currentPage + 1);
|