pixelize-design-library 2.2.128 → 2.2.129

package/dist/Components/KanbanBoard/KanbanBoard.d.ts

@@ -1,4 +1,4 @@
 import React from "react";
 import { KanbanBoardProps } from "./KanbanBoardProps";
-declare const KanbanBoard: ({ data, onDrag, onDelete, onOpen, onColumnDelete, isLoading, kanbanSelect, kanbanEdit, kanbanCreate, virtualization, permissions, }: KanbanBoardProps) => React.JSX.Element | null;
+declare const KanbanBoard: ({ data, onDrag, onDelete, onOpen, onColumnDelete, isLoading, kanbanSelect, kanbanEdit, kanbanCreate, virtualization, permissions, noItems, }: KanbanBoardProps) => React.JSX.Element | null;
 export default KanbanBoard;

package/dist/Components/KanbanBoard/KanbanBoard.js

@@ -56,9 +56,10 @@ var AccountCard_1 = __importDefault(require("./AccountCard"));
 var HeaderActions_1 = __importDefault(require("../Header/HeaderActions"));
 var MeasuredItem_1 = __importDefault(require("./MeasuredItem"));
 var OverflowTooltipText_1 = __importDefault(require("../SideBar/components/OverflowTooltipText"));
+var Button_1 = __importDefault(require("../Button/Button"));
 var KanbanBoard = function (_a) {
     var _b, _c, _d, _e, _f, _g, _h;
-    var data = _a.data, onDrag = _a.onDrag, onDelete = _a.onDelete, onOpen = _a.onOpen, onColumnDelete = _a.onColumnDelete, _j = _a.isLoading, isLoading = _j === void 0 ? false : _j, kanbanSelect = _a.kanbanSelect, kanbanEdit = _a.kanbanEdit, kanbanCreate = _a.kanbanCreate, virtualization = _a.virtualization, permissions = _a.permissions;
+    var data = _a.data, onDrag = _a.onDrag, onDelete = _a.onDelete, onOpen = _a.onOpen, onColumnDelete = _a.onColumnDelete, _j = _a.isLoading, isLoading = _j === void 0 ? false : _j, kanbanSelect = _a.kanbanSelect, kanbanEdit = _a.kanbanEdit, kanbanCreate = _a.kanbanCreate, virtualization = _a.virtualization, permissions = _a.permissions, noItems = _a.noItems;
     var colors = (0, useCustomTheme_1.useCustomTheme)().colors;
     var canDrag = (permissions === null || permissions === void 0 ? void 0 : permissions.isEditable) !== false;
     var canDelete = (permissions === null || permissions === void 0 ? void 0 : permissions.isDeletable) !== false;
@@ -169,6 +170,14 @@ var KanbanBoard = function (_a) {
                         react_1.default.createElement(AccountCard_1.default, { key: account.id, account: account, index: index, onDelete: onDelete, onOpen: onOpen, isExpanded: expanded[account.id], onToggleExpand: function () { return toggleExpand(account.id, colId, index); }, isDeletable: canDelete }))); }))),
             index === items.length - 1 && placeholder));
     };
+    var NoItemsTemplate = function (_a) {
+        var _b;
+        var colId = _a.colId;
+        return (react_1.default.createElement(react_2.Box, null,
+            react_1.default.createElement(react_2.Flex, { flexDirection: "column", alignItems: "center", justifyContent: "center", gap: 2 },
+                react_1.default.createElement(react_2.Text, { fontSize: "sm", color: (_b = colors === null || colors === void 0 ? void 0 : colors.text) === null || _b === void 0 ? void 0 : _b[600], textAlign: "center", mt: 4 }, (noItems === null || noItems === void 0 ? void 0 : noItems.text) || "No items in this column"),
+                react_1.default.createElement(Button_1.default, { onClick: function () { var _a; return (_a = noItems === null || noItems === void 0 ? void 0 : noItems.onClick) === null || _a === void 0 ? void 0 : _a.call(noItems, colId); }, size: "xs" }, (noItems === null || noItems === void 0 ? void 0 : noItems.buttonText) || "Add Item"))));
+    };
     if (!canView)
         return null;
     return (react_1.default.createElement(react_1.default.Fragment, null,
@@ -224,6 +233,7 @@ var KanbanBoard = function (_a) {
                                         react_1.default.createElement(OverflowTooltipText_1.default, { placement: "top" }, column.title)),
                                     canDelete && hoveredColumn === colId && column.items.length > 0 && (react_1.default.createElement(react_2.Box, { as: lucide_react_1.Trash2, size: 16, cursor: "pointer", color: (_j = colors === null || colors === void 0 ? void 0 : colors.text) === null || _j === void 0 ? void 0 : _j[600], _hover: { color: (_k = colors === null || colors === void 0 ? void 0 : colors.red) === null || _k === void 0 ? void 0 : _k[600] }, onClick: function () { return handleColumnDelete(colId); }, transition: "color 0.2s ease" })),
                                     !(canDelete && hoveredColumn === colId && column.items.length > 0) && (react_1.default.createElement(react_2.Box, { width: "16px", height: "16px" }))),
+                                (noItems === null || noItems === void 0 ? void 0 : noItems.isVisible) && column.items.length === 0 && react_1.default.createElement(NoItemsTemplate, { colId: colId }),
                                 react_1.default.createElement(react_2.Box, { px: 2, 
                                     // pb={2}
                                     flex: "1", overflowY: "auto", width: "100%", 

package/dist/Components/KanbanBoard/KanbanBoardProps.d.ts

@@ -45,4 +45,10 @@ export type KanbanBoardProps = {
         isDeletable?: boolean;
         isViewable?: boolean;
     };
+    noItems?: {
+        isVisible?: boolean;
+        text?: string;
+        buttonText?: string;
+        onClick?: (columnId: string) => void;
+    };
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pixelize-design-library",
-  "version": "2.2.128",
+  "version": "2.2.129",
   "private": false,
   "main": "dist/index.js",
   "module": "dist/index.js",