@xcelsior/ui-spreadsheets 1.1.6 → 1.1.7
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/dist/index.d.mts +1 -1
- package/dist/index.d.ts +1 -1
- package/dist/index.js +24 -0
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +24 -0
- package/dist/index.mjs.map +1 -1
- package/dist/styles/globals.css +3 -0
- package/dist/styles/globals.css.map +1 -1
- package/package.json +2 -2
- package/src/components/RowContextMenu.tsx +1 -1
- package/src/components/Spreadsheet.stories.tsx +92 -0
- package/src/components/SpreadsheetCell.tsx +28 -0
- package/src/types.ts +1 -1
package/dist/index.d.mts
CHANGED
|
@@ -24,7 +24,7 @@ interface SpreadsheetColumn<T = any> {
|
|
|
24
24
|
/** Whether the column can be pinned */
|
|
25
25
|
pinnable?: boolean;
|
|
26
26
|
/** Type of data in the column (for filtering/formatting) */
|
|
27
|
-
type?: 'text' | 'number' | 'date' | 'select' | 'boolean';
|
|
27
|
+
type?: 'text' | 'number' | 'date' | 'select' | 'boolean' | 'checkbox';
|
|
28
28
|
/** Options for select type columns */
|
|
29
29
|
options?: string[];
|
|
30
30
|
/** Custom render function for cell content */
|
package/dist/index.d.ts
CHANGED
|
@@ -24,7 +24,7 @@ interface SpreadsheetColumn<T = any> {
|
|
|
24
24
|
/** Whether the column can be pinned */
|
|
25
25
|
pinnable?: boolean;
|
|
26
26
|
/** Type of data in the column (for filtering/formatting) */
|
|
27
|
-
type?: 'text' | 'number' | 'date' | 'select' | 'boolean';
|
|
27
|
+
type?: 'text' | 'number' | 'date' | 'select' | 'boolean' | 'checkbox';
|
|
28
28
|
/** Options for select type columns */
|
|
29
29
|
options?: string[];
|
|
30
30
|
/** Custom render function for cell content */
|
package/dist/index.js
CHANGED
|
@@ -257,10 +257,31 @@ var SpreadsheetCell = ({
|
|
|
257
257
|
if (isRowHovered) return "rgb(243 244 246)";
|
|
258
258
|
return "white";
|
|
259
259
|
};
|
|
260
|
+
const handleCheckboxChange = (e) => {
|
|
261
|
+
e.stopPropagation();
|
|
262
|
+
const newValue = e.target.checked;
|
|
263
|
+
onConfirm?.(newValue);
|
|
264
|
+
};
|
|
260
265
|
const renderContent = () => {
|
|
261
266
|
if (column.render) {
|
|
262
267
|
return column.render(value, row, rowIndex);
|
|
263
268
|
}
|
|
269
|
+
if (column.type === "checkbox") {
|
|
270
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
271
|
+
"input",
|
|
272
|
+
{
|
|
273
|
+
type: "checkbox",
|
|
274
|
+
checked: Boolean(value),
|
|
275
|
+
onChange: handleCheckboxChange,
|
|
276
|
+
onClick: (e) => e.stopPropagation(),
|
|
277
|
+
disabled: !isEditable,
|
|
278
|
+
className: cn(
|
|
279
|
+
"h-4 w-4 rounded border-gray-300 text-blue-600 focus:ring-blue-500 cursor-pointer",
|
|
280
|
+
!isEditable && "cursor-not-allowed opacity-60"
|
|
281
|
+
)
|
|
282
|
+
}
|
|
283
|
+
);
|
|
284
|
+
}
|
|
264
285
|
if (value === null || value === void 0 || value === "") {
|
|
265
286
|
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "text-gray-400", children: "-" });
|
|
266
287
|
}
|
|
@@ -273,6 +294,9 @@ var SpreadsheetCell = ({
|
|
|
273
294
|
return String(value);
|
|
274
295
|
};
|
|
275
296
|
const renderEditInput = () => {
|
|
297
|
+
if (column.type === "checkbox") {
|
|
298
|
+
return renderContent();
|
|
299
|
+
}
|
|
276
300
|
if (column.type === "select" && column.options) {
|
|
277
301
|
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
278
302
|
"select",
|