@chalabi/svelte-sheets 2.0.4 → 2.0.6

package/dist/Sheet.svelte

@@ -131,11 +131,23 @@ $: {
         currentValue = "";
     }
 }
+function getDefaultColWidth() {
+    const w = config.defaultColWidth;
+    if (typeof w === "string") {
+        return Number(w.replace("px", "")) || 50;
+    }
+    return Number(w) || 50;
+}
 function getColumnsWidth(i) {
-    var _a, _b, _c;
-    return Number(typeof ((_a = columns[i]) === null || _a === void 0 ? void 0 : _a.width) == "string"
-        ? (_b = columns[i]) === null || _b === void 0 ? void 0 : _b.width.replace("px", "")
-        : ((_c = columns[i]) === null || _c === void 0 ? void 0 : _c.width) || config.defaultColWidth);
+    var _a;
+    const colWidth = (_a = columns[i]) === null || _a === void 0 ? void 0 : _a.width;
+    if (colWidth !== undefined && colWidth !== null) {
+        if (typeof colWidth === "string") {
+            return Number(colWidth.replace("px", "")) || getDefaultColWidth();
+        }
+        return Number(colWidth) || getDefaultColWidth();
+    }
+    return getDefaultColWidth();
 }
 function getRowHeight(i) {
     var _a, _b, _c, _d;
@@ -178,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)
@@ -185,7 +242,7 @@ function refresh(data, viewport_height, viewport_width) {
         const { scrollTop, scrollLeft } = viewport;
         yield tick(); // wait until the DOM is up to date
         const defaultHeight = 24;
-        const defaultWidth = config.defaultColWidth || 50;
+        const defaultWidth = getDefaultColWidth();
         // Safety limits to prevent infinite loops
         const maxRowsToRender = Math.max(data.length, Math.ceil((viewport_height + bottom_buffer * 2) / defaultHeight) + 10, 100);
         const maxColsToRender = Math.max(columns.length, Math.ceil((viewport_width + right_buffer * 2) / defaultWidth) + 10, 50);
@@ -244,7 +301,7 @@ $: (function scrollX() {
         return;
     // Ensure we have valid dimensions to work with
     const totalCols = Math.max(columns.length, endX, 1);
-    const defaultWidth = config.defaultColWidth || 50;
+    const defaultWidth = getDefaultColWidth();
     // if (!scrollLeft) ;
     // horizontal scrolling
     for (let v = 0; v < colElements.length; v += 1) {
@@ -978,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(
@@ -990,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) => {
@@ -1003,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}
@@ -1231,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.4",
+  "version": "2.0.6",
   "description": "Run your excel sheet in the browser!",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",