improve cells example

Author: yyx990803

src/examples/src/cells/App/style.css

@@ -9,7 +9,7 @@ table {
 }
 
 th {
-  background-color: lightgray;
+  background-color: #eee;
 }
 
 tr:first-of-type th {
@@ -21,7 +21,7 @@ tr:first-of-type th:first-of-type {
 }
 
 td {
-  border: 1px solid lightgray;
+  border: 1px solid #ccc;
   height: 1.5em;
   overflow: scroll;
 }

src/examples/src/cells/Cell/style.css

@@ -1,10 +1,14 @@
-.cell {
+.cell, .cell input {
+  height: 1.5em;
+  line-height: 1.5;
+  font-size: 15px;
+}
+
+.cell span {
   padding: 0 6px;
-  height: 1em;
 }
 
 .cell input {
-  width: 80px;
-  height: 1em;
-  font-size: 15px;
+  width: 100%;
+  box-sizing: border-box;
 }

src/examples/src/cells/Cell/template.html

@@ -1,4 +1,4 @@
-<div class="cell" @click="editing = true">
+<div class="cell" :title="cells[c][r]" @click="editing = true">
   <input
     v-if="editing"
     :value="cells[c][r]"

src/examples/src/cells/store.js

@@ -1,32 +1,38 @@
 import { reactive } from 'vue'
 
+const COLS = 5
+const ROWS = 20
+
 export const cells = reactive(
-  Array.from(Array(26).keys()).map((i) =>
-    Array.from(Array(100).keys()).map((i) => '')
+  Array.from(Array(COLS).keys()).map((i) =>
+    Array.from(Array(ROWS).keys()).map((i) => '')
   )
 )
 
-// https://codesandbox.io/s/jotai-7guis-task7-cells-mzoit?file=/src/atoms.ts
+// adapted from https://codesandbox.io/s/jotai-7guis-task7-cells-mzoit?file=/src/atoms.ts
+// by @dai-shi
 export function evalCell(exp) {
   if (!exp.startsWith('=')) {
     return exp
   }
-  try {
-    const fn = Function(
-      'get',
-      `
-      return ${exp
-        .slice(1)
-        .replace(/\b([A-Z])(\d{1,2})\b/g, (_, c, r) => `get('${c}', ${r})`)};
-      `
+
+  // = A1 + B2 ---> get(0,1) + get(1,2)
+  exp = exp
+    .slice(1)
+    .replace(
+      /\b([A-Z])(\d{1,2})\b/g,
+      (_, c, r) => `get(${c.charCodeAt(0) - 65},${r})`
     )
-    return fn((c, r) => {
-      c = c.charCodeAt(0) - 65
-      const val = evalCell(cells[c][r])
-      const num = Number(val)
-      return Number.isFinite(num) ? num : val
-    })
+
+  try {
+    return new Function('get', `return ${exp}`)(getCellValue)
   } catch (e) {
     return `#ERROR ${e}`
   }
 }
+
+function getCellValue(c, r) {
+  const val = evalCell(cells[c][r])
+  const num = Number(val)
+  return Number.isFinite(num) ? num : val
+}