complete examples!

Author: yyx990803

src/.vitepress/config.js

@@ -425,7 +425,7 @@ const sidebar = {
         },
         {
           text: 'Temperature Converter',
-          link: '/examples/#temprature-converter'
+          link: '/examples/#temperature-converter'
         },
         {
           text: 'Flight Booker',

src/examples/src/cells/App/composition.js

@@ -0,0 +1,15 @@
+import Cell from './Cell.vue'
+import { cells } from './store.js'
+
+export default {
+  components: {
+    Cell
+  },
+  setup() {
+    const cols = cells.map((_, i) => String.fromCharCode(65 + i))
+    return {
+      cols,
+      cells
+    }
+  }
+}

src/examples/src/cells/App/options.js

@@ -0,0 +1,14 @@
+import Cell from './Cell.vue'
+import { cells } from './store.js'
+
+export default {
+  components: {
+    Cell
+  },
+  data() {
+    return {
+      cols: cells.map((_, i) => String.fromCharCode(65 + i)),
+      cells
+    }
+  }
+}

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

@@ -0,0 +1,27 @@
+body {
+  margin: 0;
+}
+
+table {
+  border-collapse: collapse;
+  table-layout: fixed;
+  width: 100%;
+}
+
+th {
+  background-color: lightgray;
+}
+
+tr:first-of-type th {
+  width: 100px;
+}
+
+tr:first-of-type th:first-of-type {
+  width: 25px;
+}
+
+td {
+  border: 1px solid lightgray;
+  height: 1.5em;
+  overflow: scroll;
+}

src/examples/src/cells/App/template.html

@@ -0,0 +1,16 @@
+<table>
+  <thead>
+    <tr>
+      <th></th>
+      <th v-for="c in cols">{{ c }}</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr v-for="i in cells[0].length">
+      <th>{{ i - 1 }}</th>
+      <td v-for="c, j in cols">
+        <Cell :r="i - 1" :c="j"></Cell>
+      </td>
+    </tr>
+  </tbody>
+</table>

src/examples/src/cells/Cell/composition.js

@@ -0,0 +1,24 @@
+import { ref } from 'vue'
+import { cells, evalCell } from './store.js'
+
+export default {
+  props: {
+    c: Number,
+    r: Number
+  },
+  setup(props) {
+    const editing = ref(false)
+
+    function update(e) {
+      editing.value = false
+      cells[props.c][props.r] = e.target.value.trim()
+    }
+
+    return {
+      cells,
+      editing,
+      evalCell,
+      update
+    }
+  }
+}

src/examples/src/cells/Cell/options.js

@@ -0,0 +1,21 @@
+import { cells, evalCell } from './store.js'
+
+export default {
+  props: {
+    c: Number,
+    r: Number
+  },
+  data() {
+    return {
+      editing: false,
+      cells
+    }
+  },
+  methods: {
+    evalCell,
+    update(e) {
+      this.editing = false
+      cells[this.c][this.r] = e.target.value.trim()
+    }
+  }
+}

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

@@ -0,0 +1,10 @@
+.cell {
+  padding: 0 6px;
+  height: 1em;
+}
+
+.cell input {
+  width: 80px;
+  height: 1em;
+  font-size: 15px;
+}

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

@@ -0,0 +1,10 @@
+<div class="cell" @click="editing = true">
+  <input
+    v-if="editing"
+    :value="cells[c][r]"
+    @change="update"
+    @blur="update"
+    @vnode-mounted="({ el }) => el.focus()"
+  />
+  <span v-else>{{ evalCell(cells[c][r]) }}</span>
+</div>

src/examples/src/cells/description.txt

@@ -0,0 +1 @@
+https://eugenkiss.github.io/7guis/tasks/#cells