@loja-integrada/admin-components 0.9.3 → 0.9.7

package/dist/admin-components.esm.js

@@ -573,7 +573,8 @@ var listOfStylesHover = {
   info: "hover:bg-secondary-bold",
   warning: "hover:bg-warning-dark",
   danger: "hover:bg-danger-dark",
-  outline: "hover:bg-primary-light"
+  outline: "hover:bg-primary-light",
+  onlyText: "hover:bg-base-2"
 };
 var listOfStylesActive = {
   primary: "active:bg-primary-bold",
@@ -581,13 +582,15 @@ var listOfStylesActive = {
   tertiary: "active:bg-tertiary-bold",
   warning: "active:bg-warning-bold",
   danger: "hover:bg-danger-bold",
-  outline: "active:shadow-inner active:bg-base-1"
+  outline: "active:shadow-inner active:bg-base-1",
+  onlyText: "active:bg-base-1"
 };
 var listOfStylesFocus = {
   primary: "focus:ring-1 focus:ring-primary-dark focus:ring-opacity-50",
   secondary: "focus:ring focus:ring-focus",
   danger: "focus:ring-1 focus:ring-danger-dark",
-  outline: "focus:ring-2 focus:ring-focus focus:ring-offset-1"
+  outline: "focus:ring-2 focus:ring-focus focus:ring-offset-1",
+  onlyText: "focus:bg-base-1"
 };
 var listOfStyles = {
   primary: "bg-primary text-base-1 " + listOfStylesHover['primary'] + " " + listOfStylesActive['primary'] + " " + listOfStylesFocus['primary'],
@@ -596,7 +599,8 @@ var listOfStyles = {
   info: "bg-secondary-dark text-base-1 " + listOfStylesHover['info'],
   warning: "bg-warning text-on-base " + listOfStylesHover['warning'] + " " + listOfStylesActive['warning'],
   danger: "bg-danger text-base-1 " + listOfStylesHover['danger'] + " " + listOfStylesActive['danger'] + " " + listOfStylesFocus['danger'],
-  outline: "bg-transparent text-inverted-2 border border-inverted-2 " + listOfStylesHover['outline'] + " " + listOfStylesActive['outline'] + " " + listOfStylesFocus['outline']
+  outline: "bg-transparent text-inverted-2 border border-inverted-2 " + listOfStylesHover['outline'] + " " + listOfStylesActive['outline'] + " " + listOfStylesFocus['outline'],
+  onlyText: "bg-transparent border-transparent text-inverted-2 px-0 " + listOfStylesHover['onlyText'] + " " + listOfStylesActive['onlyText'] + " " + listOfStylesFocus['onlyText']
 };
 var defaultDisabledStyle = "bg-base-3 cursor-default text-on-base-2 shadow-none ring-0 border-0 hover:bg-base-3 hover:text-on-base-2 ";
 var listOfStylesDisabled = {
@@ -606,7 +610,8 @@ var listOfStylesDisabled = {
   info: defaultDisabledStyle,
   warning: defaultDisabledStyle,
   danger: defaultDisabledStyle,
-  outline: defaultDisabledStyle
+  outline: defaultDisabledStyle,
+  onlyText: "bg-transparent text-on-base-3 shadow-none ring-0 border-0"
 };
 var listOfSizes = {
   small: "text-f7 h-8",
@@ -679,7 +684,7 @@ var LoadingPlaceholderComponent = function LoadingPlaceholderComponent(_ref) {
   return React.createElement("div", {
     className: "animate-pulse flex " + className
   }, React.createElement("div", {
-    className: "h-4 bg-inverted-2 bg-opacity-20 rounded w-80 max-w-full"
+    className: "h-4 bg-inverted-2 bg-opacity-20 rounded w-full max-w-full"
   }));
 };
 
@@ -1588,7 +1593,9 @@ var CheckboxComponent = function CheckboxComponent(_ref, ref) {
       checked = _ref.checked,
       disabled = _ref.disabled,
       indeterminate = _ref.indeterminate,
-      props = _objectWithoutPropertiesLoose(_ref, ["label", "id", "name", "onChange", "checked", "disabled", "indeterminate"]);
+      _ref$boxAlign = _ref.boxAlign,
+      boxAlign = _ref$boxAlign === void 0 ? 'center' : _ref$boxAlign,
+      props = _objectWithoutPropertiesLoose(_ref, ["label", "id", "name", "onChange", "checked", "disabled", "indeterminate", "boxAlign"]);
 
   var inputRef = React.useRef(null);
   var inputId = id || name;
@@ -1601,6 +1608,7 @@ var CheckboxComponent = function CheckboxComponent(_ref, ref) {
       isIndeterminate = _React$useState2[0],
       setIsIndeterminate = _React$useState2[1];
 
+  var isCenterBoxAlign = boxAlign === 'center';
   React.useEffect(function () {
     setIsChecked(!!checked);
     if (checked) setIsIndeterminate(false);
@@ -1619,11 +1627,18 @@ var CheckboxComponent = function CheckboxComponent(_ref, ref) {
   };
 
   var checkboxIconClasses = "transition duration-200 ease-in-out " + (isChecked || isIndeterminate ? 'scale-100' : 'scale-0');
-  var checkboxIconContainerClasses = "border border-card-stroke transition duration-200 ease-in-out " + (disabled ? 'bg-base-4' : isChecked || isIndeterminate ? 'bg-primary border-primary' : 'bg-base-1') + "  rounded w-4 h-4 flex justify-center items-center m-px";
+  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  ";
   var checkboxLabelClasses = "ml-1 input-label text-f6 tracking-4 leading-6 " + (disabled ? 'text-inverted-2' : '');
+  var alignOptions = {
+    start: 'items-start',
+    end: 'items-end',
+    center: 'items-center',
+    baseline: 'items-baseline',
+    stretch: 'items-stretch'
+  };
   return React.createElement("label", {
     htmlFor: inputId,
-    className: "inline-flex items-center cursor-pointer"
+    className: "inline-flex " + alignOptions[boxAlign] + " cursor-pointer"
   }, React.createElement("span", {
     className: "rounded z-50 flex items-center justify-center focus-within:ring-2 ring-focus"
   }, React.createElement("input", Object.assign({
@@ -1838,10 +1853,12 @@ var TableComponent = function TableComponent(_ref2) {
     }));
   })), React.createElement("tbody", Object.assign({}, getTableBodyProps(), {
     className: "text-sm text-on-base"
-  }), isLoading ? React.createElement("tr", null, React.createElement("td", {
-    colSpan: columnsLength || 1,
-    className: "" + TdClasses
-  }, React.createElement(TdWrapper, null, React.createElement(LoadingPlaceholder, null)))) : !rows || !rows.length ? React.createElement("tr", null, React.createElement("td", {
+  }), isLoading ? React.createElement("tr", null, Array(columnsLength).fill(0).map(function (key) {
+    return React.createElement("td", {
+      key: key,
+      className: "" + TdClasses
+    }, React.createElement(TdWrapper, null, React.createElement(LoadingPlaceholder, null)));
+  })) : !rows || !rows.length ? React.createElement("tr", null, React.createElement("td", {
     colSpan: columnsLength || 1,
     className: "" + TdClasses
   }, React.createElement(TdWrapper, null, React.createElement("div", {
@@ -1893,19 +1910,24 @@ var activeStyles = function activeStyles(active) {
 
 
 var boldFixStyle = "before:content-[attr(data-title)] before:block before:font-semibold before:h-0 before:overflow-hidden before:visibility-hidden";
+var disabledStyle = 'text-inverted-2 cursor-not-allowed';
 var TabsItem = function TabsItem(_ref) {
   var id = _ref.id,
       title = _ref.title,
       _ref$active = _ref.active,
       active = _ref$active === void 0 ? false : _ref$active,
+      _ref$disabled = _ref.disabled,
+      disabled = _ref$disabled === void 0 ? false : _ref$disabled,
       onChange = _ref.onChange;
   return React.createElement("button", {
-    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",
+    id: "btnTab" + id,
+    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 " + (disabled ? disabledStyle : ''),
     onClick: function onClick() {
       return onChange(id);
-    }
+    },
+    disabled: disabled
   }, React.createElement("span", {
-    className: "block text-f6 text-sm py-4 border-b-4 break-words group-hover:font-semibold " + activeStyles(active) + " " + boldFixStyle,
+    className: "block tracking-4 text-f6 text-sm py-4 border-b-4 break-words " + (disabled ? '' : 'group-hover:font-semibold') + " " + activeStyles(active) + " " + boldFixStyle,
     "data-title": title
   }, title));
 };
@@ -2814,6 +2836,7 @@ var PaginationInfoComponent = function PaginationInfoComponent(_ref) {
   }, React.createElement("div", {
     className: "flex items-center mr-5 text-inverted-2 tracking-4 text-f6"
   }, itemsLengthOptions ? React.createElement(Select, {
+    id: "selectItemsPerPage",
     options: itemsLengthOptions,
     withoutStyle: true,
     "aria-label": "Itens por p\xE1gina",
@@ -2883,6 +2906,7 @@ var PaginationNavComponent = function PaginationNavComponent(_ref) {
   }, React.createElement("div", {
     className: "text-inverted-2 text-f6 tracking-4"
   }, React.createElement("span", {
+    id: "btnPaginationActualPage",
     className: "pagination-nav-current text-primary font-semibold",
     ref: inputEl,
     contentEditable: true,
@@ -2892,6 +2916,7 @@ var PaginationNavComponent = function PaginationNavComponent(_ref) {
     onCut: onPreventDefault,
     onPaste: onPreventDefault
   }, currentPage), ' ', "/", ' ', React.createElement("button", {
+    id: "btnPaginationLastPage",
     className: "pagination-nav-total focus:outline-none",
     onClick: function onClick() {
       if (currentPage !== maxTotalPages) handleChange(maxTotalPages);
@@ -2899,7 +2924,8 @@ var PaginationNavComponent = function PaginationNavComponent(_ref) {
   }, maxTotalPages)), React.createElement("div", {
     className: "text-inverted-2 ml-5 flex items-center"
   }, React.createElement("button", {
-    className: "pagination-nav-previous mr-3 duration-200 focus:outline-none " + (hasPrev ? 'hover:text-inverted-1' : ''),
+    id: "btnPaginationPrev",
+    className: "pagination-nav-previous mr-3 duration-200 outline-none " + (hasPrev ? 'hover:text-inverted-1' : ''),
     "aria-label": "Ir para p\xE1gina anterior",
     onClick: function onClick() {
       if (hasPrev) handleChange(currentPage - 1);
@@ -2909,7 +2935,8 @@ var PaginationNavComponent = function PaginationNavComponent(_ref) {
     block: true,
     size: 4
   })), React.createElement("button", {
-    className: "pagination-nav-next duration-200 focus:outline-none " + (hasNext ? 'hover:text-inverted-1' : ''),
+    id: "btnPaginationNext",
+    className: "pagination-nav-next duration-200 outline-none " + (hasNext ? 'hover:text-inverted-1' : ''),
     "aria-label": "Ir para pr\xF3xima p\xE1gina",
     onClick: function onClick() {
       if (hasNext) handleChange(currentPage + 1);