feat: PivotModel 양방향 바인딩 기능 구현

- VPivottableUi 컴포넌트에 v-model:pivotModel 지원 추가
- 필터 변경사항이 즉시 PivotModel에 반영되도록 수정
- pivotModelsEqual 함수에 valueFilter 비교 로직 추가
- props 정의를 Partial<DefaultPropsType>로 변경하여 유연성 향상
- 디버그 로그 제거 및 코드 정리
- ESLint 오류 수정

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>

Author: Seungwoo321

.changeset/pivot-model-two-way-binding.md

@@ -0,0 +1,13 @@
+---
+"vue-pivottable": minor
+---
+
+feat: PivotModel 양방향 바인딩 기능 구현
+
+- VPivottableUi 컴포넌트에 v-model:pivotModel 지원 추가
+- PivotModel 인터페이스 정의 및 타입 시스템 구축
+- 필터 변경사항이 즉시 PivotModel에 반영되도록 수정
+- props 정의를 Partial<DefaultPropsType>로 변경하여 pivotModel 사용 시 개별 props를 선택적으로 만듦
+- PivotModel 유틸리티 함수 추가 (비교, 생성, 복제)
+- PivotModel 히스토리 관리를 위한 composable 추가 (usePivotModelHistory)
+- PivotModel 직렬화/역직렬화 유틸리티 추가

src/App.vue

@@ -22,12 +22,7 @@
           v-if="data.length > 0"
           v-model:pivot-model="pivotModel"
           :data="data"
-          :rows="rows"
-          :cols="cols"
-          :vals="vals"
           :renderers="renderers"
-          :aggregator-name="aggregatorName"
-          :renderer-name="rendererName"
           :sorters="sorters"
           @change="onPivotModelChange"
         >
@@ -136,8 +131,8 @@ const pivotModel = ref({
   heatmapMode: ''
 })
 
-const onPivotModelChange = (model) => {
-  console.log('PivotModel 변경됨:', model)
+const onPivotModelChange = () => {
+  // PivotModel이 변경될 때 호출됩니다
 }
 
 const onDataParsed = () => {

src/components/pivottable-ui/VFilterBox.vue

@@ -116,7 +116,6 @@ const addValuesToFilter = (values: string[]) => {
     },
     Object.assign({}, unselectedValues.value)
   )
-  console.log('FilterBox emit addValues:', props.filterBoxKey, filterValues)
   emit('update:unselectedFilterValues', {
     key: props.filterBoxKey,
     value: filterValues
@@ -132,14 +131,12 @@ const removeValuesFromFilter = (values: string[]) => {
     },
     Object.assign({}, unselectedValues.value)
   )
-  console.log('FilterBox emit removeValues:', props.filterBoxKey, filterValues)
   emit('update:unselectedFilterValues', {
     key: props.filterBoxKey,
     value: filterValues
   })
 }
 const toggleValue = (value: string) => {
-  console.log('FilterBox toggleValue:', value, 'in unselected:', value in unselectedValues.value)
   if (value in unselectedValues.value) {
     removeValuesFromFilter([value])
   } else {

src/components/pivottable-ui/VPivottableUi.vue

@@ -132,7 +132,7 @@
 </template>
 
 <script setup lang="ts">
-import { aggregators, PivotData, sortAs , locales } from '@/helper'
+import { PivotData, sortAs , locales, AggregatorTemplate, Locale } from '@/helper'
 import VRendererCell from './VRendererCell.vue'
 import VAggregatorCell from './VAggregatorCell.vue'
 import VDragAndDropCell from './VDragAndDropCell.vue'
@@ -144,22 +144,43 @@ import {
   usePivotUiState,
   provideFilterBox
 } from '@/composables'
-import { DefaultPropsType, PivotModelInterface } from '@/types'
+import { DefaultPropsType, PivotModelInterface, RendererDefinition } from '@/types'
 
 const props = withDefaults(
   defineProps<
-    DefaultPropsType & {
+    Partial<DefaultPropsType> & {
+      data: any
+      renderers: Record<string, RendererDefinition>
       hiddenAttributes?: string[]
       hiddenFromAggregators?: string[]
       hiddenFromDragDrop?: string[]
       restrictedFromDragDrop?: string[]
       menuLimit?: number
       pivotModel?: PivotModelInterface
       hideFilterBoxOfUnusedAttributes?: boolean
+      aggregators?: Record<string, AggregatorTemplate>
+      aggregatorName?: string
+      heatmapMode?: 'full' | 'col' | 'row' | ''
+      tableColorScaleGenerator?: (...args: any[]) => any
+      tableOptions?: Record<string, any>
+      rendererName?: string
+      locale?: string
+      languagePack?: Record<string, Locale>
+      showRowTotal?: boolean
+      showColTotal?: boolean
+      cols?: string[]
+      rows?: string[]
+      vals?: string[]
+      attributes?: string[]
+      valueFilter?: Record<string, any>
+      sorters?: any
+      derivedAttributes?: any
+      rowOrder?: 'key_a_to_z' | 'value_a_to_z' | 'value_z_to_a'
+      colOrder?: 'key_a_to_z' | 'value_a_to_z' | 'value_z_to_a'
+      tableMaxWidth?: number
     }
   >(),
   {
-    aggregators: () => aggregators,
     hiddenAttributes: () => [],
     hiddenFromAggregators: () => [],
     pivotModel: undefined,
@@ -170,7 +191,20 @@ const props = withDefaults(
     rowOrder: 'key_a_to_z',
     colOrder: 'key_a_to_z',
     languagePack: () => locales,
-    locale: 'en'
+    locale: 'en',
+    rows: () => [],
+    cols: () => [],
+    vals: () => [],
+    aggregatorName: 'Count',
+    rendererName: 'Table',
+    valueFilter: () => ({}),
+    heatmapMode: '',
+    tableColorScaleGenerator: undefined,
+    tableOptions: () => ({}),
+    attributes: () => [],
+    sorters: () => ({}),
+    derivedAttributes: () => ({}),
+    tableMaxWidth: 0
   }
 )
 
@@ -179,6 +213,55 @@ const emit = defineEmits<{
   'change': [model: PivotModelInterface]
 }>()
 
+// pivotModel이 제공되면 해당 값으로 props 오버라이드
+const propsWithModel = computed(() => {
+  const base = {
+    data: props.data,
+    renderers: props.renderers,
+    aggregators: props.aggregators,
+    aggregatorName: props.aggregatorName || 'Count',
+    heatmapMode: (props.heatmapMode || '') as 'full' | 'col' | 'row' | '',
+    tableColorScaleGenerator: props.tableColorScaleGenerator,
+    tableOptions: props.tableOptions,
+    rendererName: props.rendererName || 'Table',
+    locale: props.locale || 'en',
+    languagePack: props.languagePack || locales,
+    showRowTotal: props.showRowTotal,
+    showColTotal: props.showColTotal,
+    cols: props.cols || [],
+    rows: props.rows || [],
+    vals: props.vals || [],
+    attributes: props.attributes,
+    valueFilter: props.valueFilter || {},
+    sorters: props.sorters,
+    derivedAttributes: props.derivedAttributes,
+    rowOrder: (props.rowOrder || 'key_a_to_z') as 'key_a_to_z' | 'value_a_to_z' | 'value_z_to_a',
+    colOrder: (props.colOrder || 'key_a_to_z') as 'key_a_to_z' | 'value_a_to_z' | 'value_z_to_a',
+    tableMaxWidth: props.tableMaxWidth,
+    hiddenAttributes: props.hiddenAttributes || [],
+    hiddenFromAggregators: props.hiddenFromAggregators || [],
+    hiddenFromDragDrop: props.hiddenFromDragDrop || [],
+    restrictedFromDragDrop: props.restrictedFromDragDrop || [],
+    hideFilterBoxOfUnusedAttributes: props.hideFilterBoxOfUnusedAttributes || false
+  }
+  
+  if (props.pivotModel && Object.keys(props.pivotModel).length > 0) {
+    return {
+      ...base,
+      rows: props.pivotModel.rows || base.rows,
+      cols: props.pivotModel.cols || base.cols,
+      vals: props.pivotModel.vals || base.vals,
+      aggregatorName: props.pivotModel.aggregatorName || base.aggregatorName,
+      rendererName: props.pivotModel.rendererName || base.rendererName,
+      valueFilter: props.pivotModel.valueFilter || base.valueFilter,
+      rowOrder: (props.pivotModel.rowOrder || base.rowOrder) as 'key_a_to_z' | 'value_a_to_z' | 'value_z_to_a',
+      colOrder: (props.pivotModel.colOrder || base.colOrder) as 'key_a_to_z' | 'value_a_to_z' | 'value_z_to_a',
+      heatmapMode: (props.pivotModel.heatmapMode || base.heatmapMode) as 'full' | 'col' | 'row' | ''
+    }
+  }
+  return base
+})
+
 const {
   state,
   localeStrings,
@@ -190,7 +273,7 @@ const {
   onUpdateRowOrder,
   onUpdateColOrder,
   onUpdateVals
-} = usePropsState(props, emit)
+} = usePropsState(propsWithModel.value, emit)
 
 const {
   state: pivotUiState,
@@ -283,8 +366,8 @@ const pivotProps = computed(() => ({
   tableOptions: state.tableOptions,
   renderers: rendererItems.value,
   rendererName: state.rendererName,
-  locale: state.locale,
-  languagePack: state.languagePack,
+  locale: state.locale || 'en',
+  languagePack: state.languagePack || locales,
   showRowTotal: state.showRowTotal,
   showColTotal: state.showColTotal,
   cols: state.cols,

src/composables/usePropsState.ts

@@ -4,7 +4,24 @@ import { debounce } from '@/utils/performance'
 import { pivotModelsEqual, clonePivotModel } from '@/utils/pivotModel'
 import { locales, LocaleStrings } from '@/helper'
 export type UsePropsStateProps = Pick<DefaultPropsType,
-  'aggregators' | 'languagePack' | 'locale' | 'valueFilter' | 'rendererName' | 'heatmapMode' | 'aggregatorName' | 'rowOrder' | 'colOrder' | 'vals' | 'rows' | 'cols'>
+  'aggregators' | 'languagePack' | 'locale' | 'valueFilter' | 'rendererName' | 'heatmapMode' | 'aggregatorName' | 'rowOrder' | 'colOrder' | 'vals' | 'rows' | 'cols'> & {
+  data?: any
+  renderers?: any
+  hiddenAttributes?: string[]
+  hiddenFromAggregators?: string[]
+  hiddenFromDragDrop?: string[]
+  restrictedFromDragDrop?: string[]
+  hideFilterBoxOfUnusedAttributes?: boolean
+  tableOptions?: any
+  showRowTotal?: boolean
+  showColTotal?: boolean
+  attributes?: string[]
+  sorters?: any
+  derivedAttributes?: any
+  tableMaxWidth?: number
+  allFilters?: any
+  materializedInput?: any
+}
 
 export interface UsePropsStateReturn<T extends UsePropsStateProps> {
   state: UnwrapRef<T>
@@ -26,7 +43,21 @@ export function usePropsState<T extends UsePropsStateProps> (
   emit?: (event: string, payload: any) => void
 ): UsePropsStateReturn<T> {
   const state = reactive({
-    ...initialProps
+    ...initialProps,
+    data: initialProps.data || [],
+    renderers: initialProps.renderers || {},
+    hiddenAttributes: initialProps.hiddenAttributes || [],
+    hiddenFromAggregators: initialProps.hiddenFromAggregators || [],
+    hiddenFromDragDrop: initialProps.hiddenFromDragDrop || [],
+    restrictedFromDragDrop: initialProps.restrictedFromDragDrop || [],
+    hideFilterBoxOfUnusedAttributes: initialProps.hideFilterBoxOfUnusedAttributes || false,
+    tableOptions: initialProps.tableOptions || {},
+    showRowTotal: initialProps.showRowTotal ?? true,
+    showColTotal: initialProps.showColTotal ?? true,
+    attributes: initialProps.attributes || [],
+    sorters: initialProps.sorters || {},
+    derivedAttributes: initialProps.derivedAttributes || {},
+    tableMaxWidth: initialProps.tableMaxWidth || 0
   }) as UnwrapRef<T>
 
   let previousModel: PivotModelInterface | null = null
@@ -36,7 +67,7 @@ export function usePropsState<T extends UsePropsStateProps> (
   )
 
   const buildPivotModel = (): PivotModelInterface => {
-    const model = {
+    return {
       rows: state.rows || [],
       cols: state.cols || [],
       vals: state.vals || [],
@@ -45,10 +76,10 @@ export function usePropsState<T extends UsePropsStateProps> (
       valueFilter: state.valueFilter || {},
       rowOrder: state.rowOrder || 'key_a_to_z',
       colOrder: state.colOrder || 'key_a_to_z',
-      heatmapMode: state.heatmapMode || ''
+      heatmapMode: state.heatmapMode || '',
+      timestamp: Date.now(),
+      version: '1.0'
     }
-    console.log('buildPivotModel - valueFilter:', model.valueFilter)
-    return model
   }
 
   const emitPivotModel = () => {
@@ -74,23 +105,26 @@ export function usePropsState<T extends UsePropsStateProps> (
     emitPivotModelDebounced()
   }
 
-  const updateMultiple = (updates: Partial<T>) => {
+  const updateMultiple = (updates: Partial<T> & { allFilters?: any, materializedInput?: any, data?: any }) => {
     Object.entries(updates).forEach(([key, value]) => {
-      if (key in state) {
+      if (key in state || key === 'allFilters' || key === 'materializedInput' || key === 'data') {
         (state as any)[key] = value
       }
     })
-    emitPivotModel()
+    if (updates.rows || updates.cols || updates.vals || updates.aggregatorName || 
+        updates.rendererName || updates.valueFilter || updates.rowOrder || 
+        updates.colOrder || updates.heatmapMode) {
+      emitPivotModel()
+    }
   }
 
   const onUpdateValueFilter = ({ key, value }: { key: string; value: any }) => {
-    console.log('usePropsState onUpdateValueFilter:', key, value)
-    const newFilter = {
-      ...(state.valueFilter || {}),
-      [key]: value
-    }
-    console.log('New valueFilter state:', newFilter)
-    updateState('valueFilter' as keyof T, newFilter)
+    updateMultiple({
+      valueFilter: {
+        ...(state.valueFilter || {}),
+        [key]: value
+      }
+    } as Partial<T>)
   }
 
   const onUpdateRendererName = (rendererName: string) => {

src/utils/pivotModel.ts

@@ -21,6 +21,7 @@ export function pivotModelsEqual(
     'vals',
     'aggregatorName',
     'rendererName',
+    'valueFilter',
     'rowOrder',
     'colOrder',
     'heatmapMode'