funuicss 3.8.0 → 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.
- package/css/fun.css +19 -2
- package/package.json +1 -1
- package/ui/empty/Empty.d.ts +3 -3
- package/ui/table/Table.d.ts +4 -0
- package/ui/table/Table.js +29 -32
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
|
-
|
|
3840
|
-
|
|
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.
|
|
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,
|
|
@@ -359,16 +360,16 @@ function Table(_a) {
|
|
|
359
360
|
var _a, _b;
|
|
360
361
|
var colConfig = getColumnConfig(findex);
|
|
361
362
|
var cellContent = getNestedValue(mdoc, fdoc);
|
|
362
|
-
return (React.createElement("div", { key: fdoc, className: "table-cell ".concat(data.funcss ? ((_a = data === null || data === void 0 ? void 0 : data.funcss) === null || _a === void 0 ? void 0 : _a[findex]) || "" : "", " ").concat((colConfig === null || colConfig === void 0 ? void 0 : colConfig.cellClassName) || '', " ").concat(
|
|
363
|
+
return (React.createElement("div", { key: fdoc, className: "table-cell ".concat(data.funcss ? ((_a = data === null || data === void 0 ? void 0 : data.funcss) === null || _a === void 0 ? void 0 : _a[findex]) || "" : "", " ").concat((colConfig === null || colConfig === void 0 ? void 0 : colConfig.cellClassName) || '', " ").concat('wrap'), "data-label": ((_b = data.titles) === null || _b === void 0 ? void 0 : _b[findex]) || fdoc, style: {
|
|
363
364
|
overflow: "visible",
|
|
364
365
|
// Apply column-specific styles to match header
|
|
365
366
|
minWidth: getColumnMinWidth(findex),
|
|
366
367
|
maxWidth: getColumnMaxWidth(findex),
|
|
367
368
|
width: getColumnWidth(findex),
|
|
368
369
|
// Text handling based on column config
|
|
369
|
-
whiteSpace:
|
|
370
|
-
overflowWrap:
|
|
371
|
-
textOverflow:
|
|
370
|
+
whiteSpace: 'normal',
|
|
371
|
+
overflowWrap: 'break-word',
|
|
372
|
+
textOverflow: 'clip'
|
|
372
373
|
} }, cellContent));
|
|
373
374
|
}),
|
|
374
375
|
customColumns
|
|
@@ -376,25 +377,24 @@ 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
|
-
|
|
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
|
: "")); });
|
|
395
395
|
})(),
|
|
396
396
|
isLoading &&
|
|
397
|
-
[1, 2, 3, 4, 5, 6, 7, 8, 9, 10].map(function (_, index) { return (React.createElement(
|
|
397
|
+
[1, 2, 3, 4, 5, 6, 7, 8, 9, 10].map(function (_, index) { return (React.createElement(Flex_1.default, { key: index, className: "table-row skeleton", style: {
|
|
398
398
|
// Match the grid template columns
|
|
399
399
|
gridTemplateColumns: gridTemplateColumns
|
|
400
400
|
} }, data === null || data === void 0 ? void 0 :
|
|
@@ -416,25 +416,22 @@ function Table(_a) {
|
|
|
416
416
|
} }));
|
|
417
417
|
}))); }),
|
|
418
418
|
children ? children : ""),
|
|
419
|
-
filteredData.length === 0 && !isLoading && !children && (React.createElement("div",
|
|
420
|
-
React.createElement(
|
|
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
|
-
React.createElement(RowFlex_1.default, { gap: 1, justify: "center" },
|
|
425
|
-
React.createElement("div", { className: "pagination-
|
|
426
|
-
React.createElement(
|
|
427
|
-
|
|
428
|
-
React.createElement(
|
|
429
|
-
|
|
430
|
-
|
|
431
|
-
|
|
432
|
-
|
|
433
|
-
|
|
434
|
-
|
|
435
|
-
|
|
436
|
-
React.createElement(
|
|
437
|
-
|
|
438
|
-
React.createElement(
|
|
439
|
-
React.createElement(Text_1.default, { text: "\u00BB\u00BB" }))))))));
|
|
422
|
+
React.createElement(RowFlex_1.default, { gap: 1, funcss: 'pointer', justify: "center" },
|
|
423
|
+
React.createElement("div", { className: "pagination-nav ".concat(currentPage === 1 ? 'pagination-nav-disabled' : ''), onClick: function () { return currentPage > 1 && handleChangePage(1); }, title: "First page" },
|
|
424
|
+
React.createElement(Text_1.default, { text: "\u00AB\u00AB" })),
|
|
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" },
|
|
426
|
+
React.createElement(Text_1.default, { text: "\u2039" })),
|
|
427
|
+
React.createElement(Flex_1.default, null, Array.from({ length: endPage - startPage + 1 }, function (_, i) {
|
|
428
|
+
var pageNumber = startPage + i;
|
|
429
|
+
var isActive = currentPage === pageNumber;
|
|
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))));
|
|
432
|
+
})),
|
|
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" },
|
|
434
|
+
React.createElement(Text_1.default, { text: "\u203A" })),
|
|
435
|
+
React.createElement("div", { className: "pagination-nav ".concat(currentPage === totalPages ? 'pagination-nav-disabled' : ''), onClick: function () { return currentPage < totalPages && handleChangePage(totalPages); }, title: "Last page" },
|
|
436
|
+
React.createElement(Text_1.default, { text: "\u00BB\u00BB" })))))));
|
|
440
437
|
}
|