funuicss 3.8.1 → 3.8.2

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.
Files changed (5) hide show
  1. package/css/fun.css +19 -2
  2. package/package.json +1 -1
  3. package/ui/empty/Empty.d.ts +3 -3
  4. package/ui/table/Table.d.ts +4 -0
  5. package/ui/table/Table.js +14 -16
package/css/fun.css CHANGED
@@ -2091,6 +2091,7 @@ border-radius: var(--borderRadius);
2091
2091
  }
2092
2092
 
2093
2093
 
2094
+
2094
2095
  /* Dropdown Container */
2095
2096
  .dropdown-container {
2096
2097
  position: relative;
@@ -3801,6 +3802,7 @@ padding-right: 2.5rem;
3801
3802
  display: flex;
3802
3803
  flex-direction: column;
3803
3804
  gap: 1px;
3805
+
3804
3806
  }
3805
3807
 
3806
3808
  /* Table Row */
@@ -3836,10 +3838,11 @@ padding-right: 2.5rem;
3836
3838
 
3837
3839
  /* Cell specific */
3838
3840
  .table-cell {
3839
- background: var(--white);
3840
- border-bottom: 1px solid var(--light);
3841
+ border-bottom: 0.5px solid var(--borderColor);
3842
+ overflow: visible;
3841
3843
  }
3842
3844
 
3845
+
3843
3846
  /* Text handling classes */
3844
3847
  .table-cell.truncate {
3845
3848
  white-space: nowrap;
@@ -3951,6 +3954,10 @@ padding-right: 2.5rem;
3951
3954
  max-width: 100% !important;
3952
3955
  }
3953
3956
 
3957
+ .table-cell:first-child {
3958
+ border-top: none;
3959
+ }
3960
+
3954
3961
  .table-cell:last-child {
3955
3962
  border-bottom: none;
3956
3963
  }
@@ -3993,6 +4000,16 @@ padding-right: 2.5rem;
3993
4000
  }
3994
4001
  }
3995
4002
 
4003
+ .pagination-item{
4004
+ height: 30px !important;
4005
+ width: 30px !important;
4006
+ display: flex;
4007
+ align-items: center;
4008
+ justify-content: center;
4009
+ border-radius: 50%;
4010
+ cursor: pointer;
4011
+ }
4012
+
3996
4013
  /* Empty State */
3997
4014
  .table-empty {
3998
4015
  display: flex;
package/package.json CHANGED
@@ -1,5 +1,5 @@
1
1
  {
2
- "version": "3.8.1",
2
+ "version": "3.8.2",
3
3
  "name": "funuicss",
4
4
  "description": "React and Next.js component UI Library for creating Easy and good looking websites with fewer lines of code. Elevate your web development experience with our cutting-edge React/Next.js component UI Library. Craft stunning websites effortlessly, boasting both seamless functionality and aesthetic appeal—all achieved with minimal lines of code. Unleash the power of simplicity and style in your projects!",
5
5
  "main": "index.js",
package/ui/empty/Empty.d.ts CHANGED
@@ -1,10 +1,10 @@
1
1
  import * as React from 'react';
2
2
  interface EmptyProps {
3
- header?: React.ReactNode;
4
- title?: string;
3
+ header?: React.ReactNode | String;
4
+ title?: string | React.ReactNode;
5
5
  titleSize?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl';
6
6
  content?: React.ReactNode;
7
- description?: string;
7
+ description?: string | React.ReactNode;
8
8
  descriptionSize?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
9
9
  action?: React.ReactNode;
10
10
  ctaText?: string;
package/ui/table/Table.d.ts CHANGED
@@ -41,6 +41,10 @@ type TableProps = {
41
41
  icon?: React.ReactNode;
42
42
  title?: React.ReactNode;
43
43
  subtitle: React.ReactNode;
44
+ ctaText?: string;
45
+ ctaIcon?: React.ReactNode | string;
46
+ showCta?: boolean;
47
+ ctaOnClick?: () => void;
44
48
  };
45
49
  customColumns?: {
46
50
  title: string;
package/ui/table/Table.js CHANGED
@@ -85,6 +85,7 @@ var Flex_1 = __importDefault(require("../flex/Flex"));
85
85
  var ci_1 = require("react-icons/ci");
86
86
  var io5_1 = require("react-icons/io5");
87
87
  var Query_1 = require("./Query");
88
+ var Empty_1 = __importDefault(require("../empty/Empty"));
88
89
  function Table(_a) {
89
90
  var _b, _c;
90
91
  var children = _a.children, funcss = _a.funcss, bordered = _a.bordered, noStripped = _a.noStripped, hoverable = _a.hoverable, _d = _a.title, title = _d === void 0 ? "" : _d, showTotal = _a.showTotal, light = _a.light, dark = _a.dark, head = _a.head, body = _a.body, data = _a.data, _e = _a.isLoading, isLoading = _e === void 0 ? false : _e, right = _a.right, hideExport = _a.hideExport, height = _a.height, _f = _a.pageSize, pageSize = _f === void 0 ? data ? 10 : 0 : _f, // Default page size,
@@ -376,19 +377,18 @@ function Table(_a) {
376
377
  var _a;
377
378
  // Calculate index for custom column (after regular data fields)
378
379
  var colIndex = (((_a = data === null || data === void 0 ? void 0 : data.fields) === null || _a === void 0 ? void 0 : _a.length) || 0) + columnIndex;
379
- return (React.createElement("div", { key: columnIndex, className: "table-cell", "data-label": column.title || "Action", style: {
380
+ return (React.createElement("div", { key: columnIndex, className: "table-cell wrap", "data-label": column.title || "Action", style: {
380
381
  position: "relative",
381
382
  overflow: "visible",
382
383
  // Apply column-specific styles
383
384
  minWidth: getColumnMinWidth(colIndex),
384
385
  maxWidth: getColumnMaxWidth(colIndex),
385
- width: getColumnWidth(colIndex)
386
+ width: getColumnWidth(colIndex),
387
+ whiteSpace: 'normal',
388
+ overflowWrap: 'break-word',
389
+ textOverflow: 'clip'
386
390
  } },
387
- React.createElement("div", { style: {
388
- position: "relative",
389
- overflow: "visible",
390
- zIndex: 50,
391
- } }, column.render && column.render(mdoc)),
391
+ column.render && column.render(mdoc),
392
392
  column.onClick && (React.createElement(Button_1.default, { onClick: function () { return column.onClick && column.onClick(mdoc); } }, column.title))));
393
393
  })
394
394
  : "")); });
@@ -416,23 +416,21 @@ function Table(_a) {
416
416
  } }));
417
417
  }))); }),
418
418
  children ? children : ""),
419
- filteredData.length === 0 && !isLoading && !children && (React.createElement("div", { className: "table-empty" },
420
- React.createElement("div", { className: "empty-icon" }, (emptyResponse === null || emptyResponse === void 0 ? void 0 : emptyResponse.icon) || React.createElement(pi_1.PiEmpty, { size: 30, className: "text-error" })),
421
- React.createElement("div", null, (emptyResponse === null || emptyResponse === void 0 ? void 0 : emptyResponse.title) || (React.createElement(Text_1.default, { text: "No Record Found!", size: "xl" }))),
422
- React.createElement("div", null, (emptyResponse === null || emptyResponse === void 0 ? void 0 : emptyResponse.subtitle) || (React.createElement(Text_1.default, { text: "You can try reloading the page or check your query" }))))))),
419
+ filteredData.length === 0 && !isLoading && !children && (React.createElement("div", null,
420
+ React.createElement(Empty_1.default, { ctaIcon: (emptyResponse === null || emptyResponse === void 0 ? void 0 : emptyResponse.ctaIcon) || React.createElement(pi_1.PiSpinnerGap, null), title: (emptyResponse === null || emptyResponse === void 0 ? void 0 : emptyResponse.title) || 'No Record Found!', description: (emptyResponse === null || emptyResponse === void 0 ? void 0 : emptyResponse.subtitle) || 'You can try reloading the page or check your query', ctaText: (emptyResponse === null || emptyResponse === void 0 ? void 0 : emptyResponse.ctaText) || 'Reload', showCta: (emptyResponse === null || emptyResponse === void 0 ? void 0 : emptyResponse.showCta) || false, ctaOnClick: function () { return (emptyResponse === null || emptyResponse === void 0 ? void 0 : emptyResponse.ctaOnClick) ? emptyResponse === null || emptyResponse === void 0 ? void 0 : emptyResponse.ctaOnClick() : window.location.reload; } }))))),
423
421
  data && pageSize && filteredData.length > pageSize && (React.createElement("div", { className: "padding bt" },
424
422
  React.createElement(RowFlex_1.default, { gap: 1, funcss: 'pointer', justify: "center" },
425
423
  React.createElement("div", { className: "pagination-nav ".concat(currentPage === 1 ? 'pagination-nav-disabled' : ''), onClick: function () { return currentPage > 1 && handleChangePage(1); }, title: "First page" },
426
424
  React.createElement(Text_1.default, { text: "\u00AB\u00AB" })),
427
- React.createElement("div", { className: "pagination-nav ".concat(currentPage === 1 ? 'pagination-nav-disabled' : ''), onClick: function () { return currentPage > 1 && handleChangePage(currentPage - 1); }, title: "Previous page" },
425
+ React.createElement("div", { className: "pagination-nav p ".concat(currentPage === 1 ? 'pagination-nav-disabled' : ''), onClick: function () { return currentPage > 1 && handleChangePage(currentPage - 1); }, title: "Previous page" },
428
426
  React.createElement(Text_1.default, { text: "\u2039" })),
429
- React.createElement("div", { className: "pagination" }, Array.from({ length: endPage - startPage + 1 }, function (_, i) {
427
+ React.createElement(Flex_1.default, null, Array.from({ length: endPage - startPage + 1 }, function (_, i) {
430
428
  var pageNumber = startPage + i;
431
429
  var isActive = currentPage === pageNumber;
432
- return (React.createElement("div", { key: pageNumber, className: "pagination-item ".concat(isActive ? 'pagination-item-active h-30 w-30 circle flex central primary text-xs text-bold' : ''), onClick: function () { return handleChangePage(pageNumber); } },
433
- React.createElement(Text_1.default, { text: "".concat(pageNumber), bold: isActive })));
430
+ return (React.createElement("div", { key: pageNumber },
431
+ React.createElement("div", { className: "pagination-item text-xs ".concat(isActive ? 'pagination-item-active primary' : ''), onClick: function () { return handleChangePage(pageNumber); } }, "".concat(pageNumber))));
434
432
  })),
435
- React.createElement("div", { className: "pagination-nav ".concat(currentPage === totalPages ? 'pagination-nav-disabled' : ''), onClick: function () { return currentPage < totalPages && handleChangePage(currentPage + 1); }, title: "Next page" },
433
+ React.createElement("div", { className: "pagination-nav p ".concat(currentPage === totalPages ? 'pagination-nav-disabled' : ''), onClick: function () { return currentPage < totalPages && handleChangePage(currentPage + 1); }, title: "Next page" },
436
434
  React.createElement(Text_1.default, { text: "\u203A" })),
437
435
  React.createElement("div", { className: "pagination-nav ".concat(currentPage === totalPages ? 'pagination-nav-disabled' : ''), onClick: function () { return currentPage < totalPages && handleChangePage(totalPages); }, title: "Last page" },
438
436
  React.createElement(Text_1.default, { text: "\u00BB\u00BB" })))))));