Aurora Admin v1.2.0: 79 components x 5 ends, doc site, contracts batch 1, playground, regression, deploy ready

frameworks/MergedCellTable.vue3.vue

@@ -0,0 +1,47 @@
+<template>
+  <table class="aa-mergetable">
+    <thead>
+      <tr><th v-for="c in columns" :key="c.key">{{ c.title }}</th></tr>
+    </thead>
+    <tbody>
+      <tr v-for="(row, idx) in merged" :key="idx">
+        <template v-for="c in columns" :key="c.key">
+          <td
+            v-if="!c.merge || row._first[c.key]"
+            :class="{ 'aa-merged': c.merge && row._first[c.key] }"
+            :rowspan="c.merge && row._first[c.key] ? row._span[c.key] : undefined"
+          >{{ row[c.key] }}</td>
+        </template>
+      </tr>
+    </tbody>
+  </table>
+</template>
+
+<script setup>
+import { computed } from 'vue';
+
+const props = defineProps({
+  data: { type: Array, default: () => [] },
+  columns: { type: Array, default: () => [] }
+});
+
+const merged = computed(() => {
+  const result = props.data.map((row) => ({ ...row, _first: {}, _span: {} }));
+  props.columns.filter((c) => c.merge).forEach((c) => {
+    let i = 0;
+    while (i < result.length) {
+      let j = i;
+      while (j + 1 < result.length && result[j + 1][c.key] === result[i][c.key]) j++;
+      const span = j - i + 1;
+      for (let k = i; k <= j; k++) {
+        result[k]._first[c.key] = k === i;
+        result[k]._span[c.key] = span;
+      }
+      i = j + 1;
+    }
+  });
+  return result;
+});
+</script>
+
+<style src="./MergedCellTable.css"></style>