@loja-integrada/admin-components 0.14.0 → 0.15.1

package/dist/admin-components.esm.js

@@ -2030,6 +2030,185 @@ var TableComponent = function TableComponent(_ref2) {
 
 var Table = /*#__PURE__*/React.memo(TableComponent);
 
+var ItemWrapperClasses = "flex relative py-6 text-f7 leading-4 break-words no-underline";
+var ItemWrapperClassesContainerHover = "before:hover:block before:hover:absolute before:hover:h-full before:hover:w-8 before:hover:top-0 before:hover:-left-8 before:hover:bg-base-2 after:hover:block after:hover:absolute after:hover:h-full after:hover:w-8 after:hover:top-0 after:hover:-right-8 after:hover:bg-base-2";
+
+var DefaultWrapper = function DefaultWrapper(props) {
+  var children = props.children,
+      restProps = _objectWithoutPropertiesLoose(props, ["children"]);
+
+  return React.createElement("div", Object.assign({}, restProps), children);
+};
+
+var TableListItemWrapper = function TableListItemWrapper(_ref) {
+  var _ref$Wrapper = _ref.Wrapper,
+      Wrapper = _ref$Wrapper === void 0 ? DefaultWrapper : _ref$Wrapper,
+      _ref$props = _ref.props,
+      props = _ref$props === void 0 ? {} : _ref$props,
+      children = _ref.children,
+      _ref$withHover = _ref.withHover,
+      withHover = _ref$withHover === void 0 ? false : _ref$withHover,
+      _ref$isInsideContaine = _ref.isInsideContainer,
+      isInsideContainer = _ref$isInsideContaine === void 0 ? false : _ref$isInsideContaine;
+  return React.createElement(Wrapper, Object.assign({
+    className: "table-item-wrapper " + ItemWrapperClasses + " " + (withHover ? "hover:bg-base-2 " + (isInsideContainer ? ItemWrapperClassesContainerHover : '') : '')
+  }, props), children);
+};
+
+var TableListItem = function TableListItem(_ref) {
+  var _ref$forceBorderDeskt = _ref.forceBorderDesktop,
+      forceBorderDesktop = _ref$forceBorderDeskt === void 0 ? false : _ref$forceBorderDeskt,
+      title = _ref.title,
+      description = _ref.description,
+      timestampTime = _ref.timestampTime,
+      timestampDate = _ref.timestampDate,
+      itemWrapper = _ref.itemWrapper,
+      itemWrapperProps = _ref.itemWrapperProps,
+      _ref$withHover = _ref.withHover,
+      withHover = _ref$withHover === void 0 ? false : _ref$withHover,
+      _ref$isInsideContaine = _ref.isInsideContainer,
+      isInsideContainer = _ref$isInsideContaine === void 0 ? false : _ref$isInsideContaine,
+      withIcon = _ref.withIcon;
+  return React.createElement("div", {
+    className: "table-item border-primary-bold border-opacity-10 border-t first:border-t-0 " + (forceBorderDesktop ? 'lg:first:border-t' : '')
+  }, React.createElement(TableListItemWrapper, {
+    Wrapper: itemWrapper,
+    props: itemWrapperProps,
+    withHover: withHover,
+    isInsideContainer: isInsideContainer
+  }, withIcon && React.createElement("div", {
+    className: "table-item-icon flex items-center justify-center flex-none mr-4"
+  }, React.createElement("div", {
+    className: "table-item-icon-background h-8 w-8 flex items-center justify-center rounded " + (withIcon["class"] || '')
+  }, React.createElement(Icon, {
+    icon: withIcon.icon || 'minus',
+    block: true,
+    size: 5
+  }))), React.createElement("div", {
+    className: "table-item-content flex flex-col justify-center flex-auto gap-1.5 min-w-0 w-full"
+  }, React.createElement("div", {
+    className: "table-item-title text-f6 font-semibold"
+  }, title), description && React.createElement("div", {
+    className: "table-item-description"
+  }, description)), timestampTime && React.createElement("div", {
+    className: "table-item-timestamp flex flex-col justify-center items-end shrink-0 gap-1.5 ml-4 min-w-0 max-w-[50%] text-right"
+  }, React.createElement("div", {
+    className: "table-item-timestamp-time w-full"
+  }, timestampTime), timestampDate && React.createElement("div", {
+    className: "table-item-timestamp-date w-full hidden lg:block"
+  }, timestampDate))));
+};
+
+var TableListItemLoading = function TableListItemLoading(_ref) {
+  var _ref$forceBorderDeskt = _ref.forceBorderDesktop,
+      forceBorderDesktop = _ref$forceBorderDeskt === void 0 ? false : _ref$forceBorderDeskt;
+  return React.createElement("div", {
+    className: "table-item table-item-loading border-primary-bold border-opacity-10 border-t first:border-t-0 " + (forceBorderDesktop ? 'lg:first:border-t' : '')
+  }, React.createElement(TableListItemWrapper, null, React.createElement("div", {
+    className: "table-item-icon flex items-center justify-center flex-none mr-4"
+  }, React.createElement("div", {
+    className: "table-item-icon-background h-8 w-8 flex items-center justify-center rounded"
+  }, React.createElement(LoadingPlaceholder, {
+    className: "w-full"
+  }))), React.createElement("div", {
+    className: "table-item-content flex flex-col justify-center flex-auto gap-1.5 min-w-0 w-full"
+  }, React.createElement("div", {
+    className: "table-item-title text-f6 font-semibold"
+  }, React.createElement(LoadingPlaceholder, {
+    className: "w-2/3"
+  })), React.createElement("div", {
+    className: "table-item-description"
+  }, React.createElement(LoadingPlaceholder, {
+    className: "w-1/3"
+  }))), React.createElement("div", {
+    className: "table-item-timestamp flex flex-col justify-center items-end shrink-0 gap-1.5 ml-4 min-w-0 max-w-[50%] text-right"
+  }, React.createElement("div", {
+    className: "table-item-timestamp-time w-full"
+  }, React.createElement(LoadingPlaceholder, {
+    className: "w-16"
+  })))));
+};
+
+var groupTitleMobileClass = "before:block before:absolute before:h-0 before:w-5 before:-top-px before:-left-5 before:border-t before:border-primary-bold before:border-opacity-10 after:block after:absolute after:h-0 after:w-5 after:-top-px after:-right-5 after:border-t after:border-primary-bold after:border-opacity-10";
+
+var TableListComponent = function TableListComponent(_ref) {
+  var _ref$className = _ref.className,
+      className = _ref$className === void 0 ? '' : _ref$className,
+      itemWrapper = _ref.itemWrapper,
+      _ref$items = _ref.items,
+      items = _ref$items === void 0 ? [] : _ref$items,
+      _ref$isLoading = _ref.isLoading,
+      isLoading = _ref$isLoading === void 0 ? false : _ref$isLoading,
+      _ref$empty = _ref.empty,
+      empty = _ref$empty === void 0 ? {
+    title: 'Nenhum registro encontrado'
+  } : _ref$empty,
+      _ref$withHover = _ref.withHover,
+      withHover = _ref$withHover === void 0 ? false : _ref$withHover,
+      _ref$isInsideContaine = _ref.isInsideContainer,
+      isInsideContainer = _ref$isInsideContaine === void 0 ? false : _ref$isInsideContaine;
+  var itemsMemoized = React.useMemo(function () {
+    var groups = items.reduce(function (groups, item) {
+      var groupTitle = item.timestampDate || item.timestampTime || 'no_title';
+
+      if (!groups[groupTitle]) {
+        groups[groupTitle] = [];
+      }
+
+      groups[groupTitle].push(item);
+      return groups;
+    }, {});
+    return Object.keys(groups).map(function (groupTitle) {
+      return {
+        title: groupTitle,
+        items: groups[groupTitle]
+      };
+    });
+  }, [items]);
+  return React.createElement("div", {
+    className: "table-list tracking-tight " + className
+  }, isLoading ? React.createElement("div", {
+    className: "table-list-loading"
+  }, React.createElement(TableListItemLoading, null), React.createElement(TableListItemLoading, null), React.createElement(TableListItemLoading, null), React.createElement(TableListItemLoading, null)) : !itemsMemoized || !itemsMemoized.length ? React.createElement("div", {
+    className: "table-list-empty flex flex-col items-center justify-center gap-5 min-h-[80vh] lg:min-h-[60vh] max-w-sm mx-auto px-4"
+  }, empty.illustration && React.createElement("div", {
+    className: "table-list-empty-illustration text-center"
+  }, empty.illustration), React.createElement("div", {
+    className: "table-list-empty-title text-center text-f4 font-semibold text-primary-bold leading-7"
+  }, empty.title), empty.subTitle && React.createElement("div", {
+    className: "table-list-empty-subtitle text-center text-f6 text-on-base-2 leading-6 -mt-1"
+  }, empty.subTitle), empty.action && React.createElement("div", {
+    className: "table-list-empty-action text-center"
+  }, empty.action)) : itemsMemoized.map(function (group, indexGroup) {
+    return React.createElement("div", {
+      key: "group-items-" + indexGroup,
+      className: "table-list-group"
+    }, group.title && group.title !== 'no_title' && React.createElement("div", {
+      className: "table-list-title relative lg:hidden border-primary-bold border-opacity-10 " + (indexGroup !== 0 ? "border-t " + (isInsideContainer ? groupTitleMobileClass : '') : '')
+    }, React.createElement("span", {
+      className: "text-f5 text-on-base-2 leading-4 break-words inline-block pt-6 pb-2"
+    }, group.title)), React.createElement("div", {
+      className: "group-items"
+    }, group.items.map(function (item, indexItem) {
+      return React.createElement(TableListItem, {
+        key: "group-item-" + indexItem,
+        forceBorderDesktop: indexItem === 0 && indexGroup !== 0,
+        title: item.title,
+        description: item.description,
+        timestampTime: item.timestampTime,
+        timestampDate: item.timestampDate,
+        itemWrapper: itemWrapper,
+        itemWrapperProps: item.itemWrapperProps,
+        withIcon: item.withIcon,
+        withHover: withHover,
+        isInsideContainer: isInsideContainer
+      });
+    })));
+  }));
+};
+
+var TableList = /*#__PURE__*/React.memo(TableListComponent);
+
 var activeStyles = function activeStyles(active) {
   return active ? "border-primary font-semibold" : "border-transparent";
 }; // When using bold at hover, prevent text shift
@@ -2140,7 +2319,7 @@ var TimelineItem = function TimelineItem(_ref) {
     size: 3,
     className: "mr-1"
   }), item.timestamp), item.description && React.createElement("div", {
-    className: "timeline-description overflow-hidden text-sm tracking-4 text-inverted-1 break-words transition-max-height " + (isOpen ? 'max-h-96' : 'max-h-0')
+    className: "timeline-description mt-1 overflow-hidden text-sm tracking-4 text-inverted-1 break-words transition-max-height " + (isOpen ? 'max-h-96' : 'max-h-0')
   }, item.description)));
 };
 
@@ -2315,7 +2494,8 @@ var AlertComponent = function AlertComponent(_ref) {
       showClose = _ref$showClose === void 0 ? false : _ref$showClose,
       onClose = _ref.onClose,
       _ref$hideIcon = _ref.hideIcon,
-      hideIcon = _ref$hideIcon === void 0 ? false : _ref$hideIcon;
+      hideIcon = _ref$hideIcon === void 0 ? false : _ref$hideIcon,
+      customIcon = _ref.customIcon;
 
   var _useState = useState(isOpen),
       alertIsOpen = _useState[0],
@@ -2336,7 +2516,7 @@ var AlertComponent = function AlertComponent(_ref) {
   }, !hideIcon && React.createElement("div", {
     className: "alert-icon hidden sm:block flex-shrink-0 mr-3 " + alertTypes[type].iconClass
   }, React.createElement(Icon, {
-    icon: alertTypes[type].icon,
+    icon: customIcon ? customIcon : alertTypes[type].icon,
     size: 6
   })), React.createElement("div", {
     className: "flex-grow flex flex-col sm:flex-row items-start sm:items-center justify-between min-w-0"
@@ -2917,6 +3097,11 @@ var Header = function Header(_ref2) {
 ContainerComponent.Header = Header;
 var Container$1 = ContainerComponent;
 
+var actionsDisplayClass = {
+  both: 'flex',
+  desktop: 'hidden lg:flex',
+  mobile: 'flex lg:hidden'
+};
 var Breadcrumb = /*#__PURE__*/React.memo(function (_ref) {
   var Link = _ref.Link,
       currentTitle = _ref.currentTitle,
@@ -2926,6 +3111,8 @@ var Breadcrumb = /*#__PURE__*/React.memo(function (_ref) {
       mobileAlign = _ref$mobileAlign === void 0 ? 'left' : _ref$mobileAlign,
       help = _ref.help,
       actions = _ref.actions,
+      _ref$actionsDisplay = _ref.actionsDisplay,
+      actionsDisplay = _ref$actionsDisplay === void 0 ? 'both' : _ref$actionsDisplay,
       _ref$className = _ref.className,
       className = _ref$className === void 0 ? '' : _ref$className;
   var renderPrevTitle = React.createElement("span", {
@@ -2967,7 +3154,7 @@ var Breadcrumb = /*#__PURE__*/React.memo(function (_ref) {
     className: "header-navigation-breadcrumb max-w-full truncate w-full"
   }, React.createElement("div", {
     className: "w-full inline-flex self-center items-center font-semibold tracking-5 text-f5 sm:text-f4 lg:text-f3"
-  }, (previousTitle || previousHref) && React.createElement("span", {
+  }, (previousTitle || previousHref || Link) && React.createElement("span", {
     className: "header-navigation-previous inline-flex items-center text-on-base-2 text-xl -mr-px truncate"
   }, renderPrevLink(), previousTitle && React.createElement("span", {
     className: "hidden lg:inline px-2 -ml-px"
@@ -2990,7 +3177,7 @@ var Breadcrumb = /*#__PURE__*/React.memo(function (_ref) {
   }), help.title && React.createElement("span", {
     className: "text-f6 font-semibold tracking-4 leading-6 ml-2 " + (!help.mobileText ? 'hidden md:inline' : '')
   }, help.title))), actions && React.createElement("div", {
-    className: "header-navigation-actions flex items-center gap-5"
+    className: "header-navigation-actions items-center gap-5 " + (actionsDisplayClass[actionsDisplay] || '')
   }, actions)));
 });
 
@@ -3158,5 +3345,5 @@ var PaginationComponent = function PaginationComponent(_ref) {
 
 var Pagination = /*#__PURE__*/React.memo(PaginationComponent);
 
-export { ActionBar, Alert, Badge, Box, Breadcrumb, Button, Checkbox, Container$1 as Container, Dropdown, Icon, Input, InputCurrency, InputCurrencyComponent, InputHelpText, InputLabel, InputMask, LoadingPlaceholder, Modal, Pagination, Select, SelectComponent, Sidebar, SidebarItem, SidebarSubItem, Status, Table, Tabs, Timeline, Toast, Toggle, Tooltip, Topbar, sizeClasses, varianErrorClasses, variantControlClasses, variantDisabledClasses, variantSelectedClasses, variantValueClasses };
+export { ActionBar, Alert, Badge, Box, Breadcrumb, Button, Checkbox, Container$1 as Container, Dropdown, Icon, Input, InputCurrency, InputCurrencyComponent, InputHelpText, InputLabel, InputMask, LoadingPlaceholder, Modal, Pagination, Select, SelectComponent, Sidebar, SidebarItem, SidebarSubItem, Status, Table, TableList, Tabs, Timeline, Toast, Toggle, Tooltip, Topbar, sizeClasses, varianErrorClasses, variantControlClasses, variantDisabledClasses, variantSelectedClasses, variantValueClasses };
 //# sourceMappingURL=admin-components.esm.js.map