fix: rows/cols가 비어있을 때 Vue2와 동일하게 렌더링되도록 수정 (#254)

* fix: 베타 버전 증가 로직 수정

changeset version이 베타 접미사가 있는 버전을 증가시키지 않는 문제 해결:

1. changeset version 실행 전에 베타 접미사 임시 제거
2. changeset version으로 버전 증가 (1.1.6 → 1.1.7)
3. 증가된 버전에 베타 접미사 재적용 (1.1.7-beta.timestamp)

이제 베타 상태에서도 올바른 버전 증가가 가능함

* fix: rows/cols가 비어있을 때 Vue2와 동일하게 렌더링되도록 수정

- 디버그용 console.log 코드 제거
- rows/cols가 모두 비어있을 때도 테이블 구조와 총계가 표시되도록 수정
- rowAttrs가 비어있을 때 헤더에 빈 행이 추가되는 문제 해결
- Vue2의 렌더링 동작과 완전히 일치하도록 조건부 렌더링 로직 개선

Author: Seungwoo321

.changeset/fix-empty-rows-cols-rendering.md

@@ -0,0 +1,10 @@
+---
+"vue-pivottable": patch
+---
+
+fix: rows/cols가 비어있을 때 Vue2와 동일하게 렌더링되도록 수정
+
+- 디버그용 console.log 코드 제거
+- rows/cols가 모두 비어있을 때도 테이블 구조와 총계가 표시되도록 수정
+- rowAttrs가 비어있을 때 헤더에 빈 행이 추가되는 문제 해결
+- Vue2의 렌더링 동작과 완전히 일치하도록 조건부 렌더링 로직 개선

src/components/pivottable-ui/VDragAndDropCell.vue

@@ -1,6 +1,6 @@
 <template>
   <Draggable
-    v-if="showDraggable && modelItems.length > 0"
+    v-if="showDraggable"
     tag="td"
     :list="modelItems"
     :group="{ name: 'shared', pull: true, put: true }"

src/components/pivottable/VPivottableBody.vue

@@ -1,6 +1,7 @@
 <template>
-  <tbody v-if="pivotData">
+  <tbody>
     <VPivottableBodyRows
+      v-if="rowKeys.length > 0"
       :row-keys="rowKeys"
       :col-keys="colKeys"
       :show-row-total="showRowTotal"
@@ -31,6 +32,5 @@ type Props = Pick<
 
 defineProps<Props>()
 
-const { pivotData, rowKeys, colKeys, rowAttrs, colAttrs } =
-  useProvidePivotData()
+const { rowKeys, colKeys, rowAttrs, colAttrs } = useProvidePivotData()
 </script>

src/components/pivottable/VPivottableBodyRows.vue

@@ -61,7 +61,6 @@ type VPivottableBodyRowsProps = Pick<
 }
 
 const props = defineProps<VPivottableBodyRowsProps>()
-
 const {
   pivotData,
   spanSize,

src/components/pivottable/VPivottableBodyRowsTotalRow.vue

@@ -1,5 +1,5 @@
 <template>
-  <tr v-if="showColTotal">
+  <tr v-if="showColTotal || (colKeys.length === 0 && rowKeys.length === 0)">
     <th
       class="pvtTotalLabel"
       :colSpan="rowAttrs.length + (colAttrs.length === 0 ? 0 : 1)"
@@ -18,7 +18,7 @@
       {{ getAggregator([], colKey).format(getAggregator([], colKey).value()) }}
     </td>
     <td
-      v-if="showRowTotal"
+      v-if="showRowTotal || (colKeys.length === 0 && rowKeys.length === 0)"
       class="pvtGrandTotal"
       @click="handleCellClick(grandTotalValue, [], [])($event)"
     >
@@ -45,6 +45,7 @@ const {
   colAttrs,
   rowAttrs,
   colKeys,
+  rowKeys,
   pivotData
 } = useProvidePivotData()
 

src/components/pivottable/VPivottableHeader.vue

@@ -1,5 +1,5 @@
 <template>
-  <thead v-if="pivotData">
+  <thead>
     <tr
       v-for="(c, j) in colAttrs"
       :key="`colAttrs${j}`"
@@ -46,5 +46,5 @@ type Props = Pick<DefaultPropsType, 'showRowTotal' | 'languagePack'>
 
 defineProps<Props>()
 
-const { pivotData, colAttrs, rowAttrs, colKeys } = useProvidePivotData()
+const { colAttrs, rowAttrs, colKeys } = useProvidePivotData()
 </script>