@chalabi/svelte-sheets 2.0.5 → 2.0.6

package/dist/Sheet.svelte

@@ -190,6 +190,51 @@ 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;
+    }
+    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 +1035,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 +1048,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 +1061,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 +1303,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/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.6",
   "description": "Run your excel sheet in the browser!",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",