@chalabi/svelte-sheets 2.0.5 → 2.0.7

package/Readme.md

@@ -88,6 +88,22 @@ Common flags:
 - `editable`: false to disable edits (equivalent to readOnly)
 - `disableHover`: true to disable hover-based selection updates
 
+Boolean cells (Checkboxes):
+
+- `booleanColumns`: array of column indices to render as checkboxes (e.g., `[2, 5]`)
+- `booleanRows`: array of row indices to render as checkboxes (e.g., `[3, 7]`)
+
+Boolean cells display a checkmark (✓) for `true` values and a crossed circle (⦻) for `false` values. Users can click to toggle between true/false. The first row (headers) is automatically excluded from boolean rendering.
+
+Example:
+```js
+let options = {
+  tableHeight: "70vh",
+  booleanColumns: [5],  // Column 5 will show checkboxes
+  booleanRows: [10],    // Row 10 will show checkboxes
+};
+```
+
 Theme:
 
 - `theme`: set to `"dark"` for the bundled dark tokens (default is `"light"`)

package/dist/Sheet.svelte

@@ -18,8 +18,9 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-import { onMount, tick } from "svelte";
+import { onMount, tick, createEventDispatcher } from "svelte";
 import * as XLSX from "xlsx";
+const dispatch = createEventDispatcher();
 import { resizable } from "./actions/index.js";
 import { draggable } from "./actions/draggable.js";
 import { defaultconfig } from "./defaultconfig.js";
@@ -190,6 +191,53 @@ export function onInputChange(value, row, column) {
         data[row.i][column.i] = value;
     }
 }
+function isBooleanCell(colIndex, rowIndex) {
+    var _a, _b;
+    // Don't treat first row as boolean (headers)
+    if (rowIndex === 0)
+        return false;
+    return (((_a = config.booleanColumns) === null || _a === void 0 ? void 0 : _a.includes(colIndex)) ||
+        ((_b = config.booleanRows) === null || _b === void 0 ? void 0 : _b.includes(rowIndex)));
+}
+function toggleBooleanCell(colIndex, rowIndex) {
+    var _a, _b;
+    if (isReadOnly)
+        return;
+    if ((_a = columns[colIndex]) === null || _a === void 0 ? void 0 : _a.readOnly)
+        return;
+    if (!isBooleanCell(colIndex, rowIndex))
+        return;
+    cmdz = true;
+    const currentValue = (_b = data[rowIndex]) === null || _b === void 0 ? void 0 : _b[colIndex];
+    const newValue = !currentValue;
+    if (rowIndex > data.length - 1) {
+        data = [
+            ...data,
+            ...Array.from({ length: rowIndex - data.length + 1 }, (v, i) => {
+                if (i == rowIndex) {
+                    return Array.from({ length: columns.length }, (_, i) => {
+                        if (i == colIndex) {
+                            return newValue;
+                        }
+                        else {
+                            return "";
+                        }
+                    });
+                }
+                else {
+                    return Array.from({ length: columns.length }, (_) => "");
+                }
+            }),
+        ];
+    }
+    else {
+        data[rowIndex][colIndex] = newValue;
+    }
+    // Dispatch inputchange event for boolean toggle
+    dispatch('inputchange', { value: newValue, row: { i: rowIndex }, column: { i: colIndex } });
+    historyPush(data, rows, columns, style);
+    cmdz = false;
+}
 function refresh(data, viewport_height, viewport_width) {
     return __awaiter(this, void 0, void 0, function* () {
         if (!viewport)
@@ -990,6 +1038,7 @@ function historyPush(data, rows, columns, style) {
                 on:dblclick={(_) =>
                   !isReadOnly &&
                   !(columns[x.i] && columns[x.i].readOnly) &&
+                  !isBooleanCell(x.i, r.i) &&
                   (edition = [x.i, r.i])}
                 class:readonly={columns[x.i] && columns[x.i].readOnly}
                 style={computeStyles(
@@ -1002,7 +1051,7 @@ function historyPush(data, rows, columns, style) {
                   r.data && r.data[x.i + 1]
                 )}
               >
-                {#if String(edition) == String([x.i, r.i])}
+                {#if String(edition) == String([x.i, r.i]) && !isBooleanCell(x.i, r.i)}
                   <input
                     autofocus
                     on:blur={(e) => {
@@ -1015,6 +1064,20 @@ function historyPush(data, rows, columns, style) {
                       x.i
                     )}px; height: ${getRowHeight(r.i)}px; min-height: 22px;`}
                   />
+                {:else if isBooleanCell(x.i, r.i)}
+                  <span 
+                    class="boolean-cell"
+                    class:readonly={columns[x.i] && columns[x.i].readOnly}
+                    on:click|stopPropagation={() => toggleBooleanCell(x.i, r.i)}
+                    role="button"
+                    tabindex="-1"
+                  >
+                    {#if r.data && r.data[x.i]}
+                      <span class="checkmark">✓</span>
+                    {:else}
+                      <span class="crossmark">⦻</span>
+                    {/if}
+                  </span>
                 {:else}{(r.data && r.data[x.i]) || ""}{/if}
               </td>
             {/each}
@@ -1243,4 +1306,28 @@ function historyPush(data, rows, columns, style) {
   .hidden {
     display: none;
   }
+  .boolean-cell {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    height: 100%;
+    cursor: pointer;
+    user-select: none;
+  }
+  .boolean-cell.readonly {
+    cursor: default;
+  }
+  .checkmark {
+    font-size: 18px;
+    font-weight: bold;
+    color: var(--sheet-accent);
+    line-height: 1;
+  }
+  .crossmark {
+    font-size: 18px;
+    font-weight: bold;
+    color: #ef4444;
+    line-height: 1;
+  }
 </style>

package/dist/Sheet.svelte.d.ts

@@ -34,6 +34,8 @@ declare const Sheet: $$__sveltets_2_IsomorphicComponent<{
     endX?: number;
     onInputChange?: (value: any, row: any, column: any) => void;
 }, {
+    inputchange: CustomEvent<any>;
+} & {
     [evt: string]: CustomEvent<any>;
 }, {}, {
     onInputChange: (value: any, row: any, column: any) => void;

package/dist/defaultconfig.d.ts

@@ -8,6 +8,8 @@ export declare const defaultconfig: {
     nestedHeaders: any;
     defaultColWidth: number;
     defaultColAlign: string;
+    booleanColumns: number[];
+    booleanRows: number[];
     minSpareRows: number;
     minSpareCols: number;
     minDimensions: number[];

package/dist/defaultconfig.js

@@ -17,6 +17,10 @@ export const defaultconfig = {
     // Column width that is used by default
     defaultColWidth: 50,
     defaultColAlign: "center",
+    // Boolean columns for checkbox mode
+    booleanColumns: [],
+    // Boolean rows for checkbox mode
+    booleanRows: [],
     // Spare rows and columns
     minSpareRows: 0,
     minSpareCols: 0,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@chalabi/svelte-sheets",
-  "version": "2.0.5",
+  "version": "2.0.7",
   "description": "Run your excel sheet in the browser!",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",