feat: add TypeScript support to pivottable components

- Convert pivottable Vue components to use TypeScript
- Add type definitions for props and component interfaces
- Update composables with proper type annotations
- Remove obsolete utilities.d.ts file
- Refactor defaultProps structure for better type safety

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

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

Author: Seungwoo321

package.json

@@ -54,7 +54,7 @@
     "clean": "rimraf dist",
     "clean:all": "rimraf dist packages/*/dist",
     "dev": "vite",
-    "build": "tsc src/helper/utilities.ts --declaration --emitDeclarationOnly --outDir src/helper && vite build",
+    "build": "vite build",
     "preview": "vite preview",
     "lint": "eslint",
     "build:all": "pnpm clean && pnpm build && pnpm -r --filter './packages/*' build",

src/components/pivottable-ui/VAggregatorCell.vue

@@ -38,7 +38,7 @@
   </td>
 </template>
 
-<script setup>
+<script setup lang="ts">
 import { computed } from 'vue'
 import VDropdown from './VDropdown.vue'
 

src/components/pivottable-ui/VPivottableUi.vue

@@ -131,52 +131,44 @@
   </table>
 </template>
 
-<script setup>
-import { defaultProps, PivotData, sortAs } from '@/helper'
+<script setup lang="ts">
+import { aggregators, PivotData, sortAs } from '@/helper'
 import VRendererCell from './VRendererCell.vue'
 import VAggregatorCell from './VAggregatorCell.vue'
 import VDragAndDropCell from './VDragAndDropCell.vue'
 import VPivottable from '../pivottable/VPivottable.vue'
-import TableRenderer from '../pivottable/renderer/index'
 import { computed, watch } from 'vue'
 import {
   usePropsState,
   useMaterializeInput,
   usePivotUiState,
   provideFilterBox
 } from '@/composables'
+import { DefaultPropsType } from '@/types'
 
-const props = defineProps({
-  ...defaultProps,
-  hiddenAttributes: {
-    type: Array,
-    default: () => []
-  },
-  hiddenFromAggregators: {
-    type: Array,
-    default: () => []
-  },
-  hiddenFromDragDrop: {
-    type: Array,
-    default: () => []
-  },
-  restrictedFromDragDrop: {
-    type: Array,
-    default: () => []
-  },
-  menuLimit: {
-    type: Number,
-    default: 500
-  },
-  pivotModel: {
-    type: Object,
-    default: () => ({})
-  },
-  hideFilterBoxOfUnusedAttributes: {
-    type: Boolean,
-    default: false
+const props = withDefaults(
+  defineProps<
+    DefaultPropsType & {
+      hiddenAttributes?: string[]
+      hiddenFromAggregators?: string[]
+      hiddenFromDragDrop?: string[]
+      restrictedFromDragDrop?: string[]
+      menuLimit?: number
+      pivotModel?: any
+      hideFilterBoxOfUnusedAttributes?: boolean
+    }
+  >(),
+  {
+    aggregators: () => aggregators,
+    hiddenAttributes: () => [],
+    hiddenFromAggregators: () => [],
+    hiddenFromDragDrop: () => [],
+    restrictedFromDragDrop: () => [],
+    menuLimit: 500,
+    hideFilterBoxOfUnusedAttributes: false
   }
-})
+)
+
 const {
   state,
   localeStrings,
@@ -205,7 +197,7 @@ const { allFilters, materializedInput } = useMaterializeInput(
 )
 
 const rendererItems = computed(() =>
-  Object.keys(state.renderers).length ? state.renderers : TableRenderer
+  Object.keys(state.renderers).length ? state.renderers : {}
 )
 const aggregatorItems = computed(() => state.aggregators)
 const rowAttrs = computed(() => {
@@ -238,7 +230,7 @@ const unusedAttrs = computed(() => {
         !state.hiddenAttributes.includes(e) &&
         !state.hiddenFromDragDrop.includes(e)
     )
-    .sort(sortAs(state.unusedOrder))
+    .sort(sortAs(pivotUiState.unusedOrder))
 })
 
 const pivotData = computed(() => new PivotData(state))
@@ -264,12 +256,13 @@ const pivotProps = computed(() => ({
   rowOrder: state.rowOrder,
   colOrder: state.colOrder,
   tableMaxWidth: state.tableMaxWidth,
-  localeStrings: localeStrings.value
+  localeStrings: localeStrings.value,
+  menuLimit: props.menuLimit
 }))
 
-onUpdateUnusedOrder(props.unusedAttrs)
+onUpdateUnusedOrder(unusedAttrs.value)
 
-provideFilterBox(props)
+provideFilterBox(pivotProps.value)
 
 watch(
   [allFilters, materializedInput],

src/components/pivottable-ui/VRendererCell.vue

@@ -25,7 +25,7 @@ const rendererOptions = computed<string[]>(() =>
 
 interface RendererDefinition {
   name: string
-  props: Record<string, any>
+  props?: Record<string, any>
   setup: (props: any) => () => VNode
 }
 

src/components/pivottable/VPivottableBody.vue

@@ -19,12 +19,15 @@
 </template>
 
 <script setup lang="ts">
-import { useProvidePivotData } from '@/composables/useProvidePivotData'
+import { useProvidePivotData } from '@/composables'
 import VPivottableBodyRows from './VPivottableBodyRows.vue'
 import VPivottableBodyRowsTotalRow from './VPivottableBodyRowsTotalRow.vue'
 import type { DefaultPropsType } from '@/types'
 
-type Props = Pick<DefaultPropsType, 'showRowTotal' | 'showColTotal' | 'languagePack' | 'tableOptions'>
+type Props = Pick<
+  DefaultPropsType,
+  'showRowTotal' | 'showColTotal' | 'languagePack' | 'tableOptions'
+>
 
 defineProps<Props>()
 

src/components/pivottable/VPivottableBodyRows.vue

@@ -49,7 +49,7 @@
 </template>
 
 <script setup lang="ts">
-import { useProvidePivotData } from '@/composables/useProvidePivotData'
+import { useProvidePivotData } from '@/composables'
 import { DefaultPropsType } from '@/types'
 
 type VPivottableBodyRowsProps = Pick<
@@ -86,20 +86,20 @@ const handleCellClick = (value: any, rowValues: any, colValues: any) => {
   if (props.tableOptions?.clickCallback) {
     const filters = {} as any
 
-    colAttrs.value.forEach((attr, i) => {
+    colAttrs.value.forEach((attr: string, i: number) => {
       if (colValues[i] !== undefined && colValues[i] !== null) {
         filters[attr] = colValues[i]
       }
     })
 
-    rowAttrs.value.forEach((attr, i) => {
+    rowAttrs.value.forEach((attr: string, i: number) => {
       if (rowValues[i] !== undefined && rowValues[i] !== null) {
         filters[attr] = rowValues[i]
       }
     })
 
     return (event: MouseEvent) =>
-      props.tableOptions.clickCallback(event, value, filters, pivotData.value)
+      props.tableOptions?.clickCallback(event, value, filters, pivotData.value)
   }
   return () => ({})
 }

src/components/pivottable/VPivottableBodyRowsTotalRow.vue

@@ -4,7 +4,7 @@
       class="pvtTotalLabel"
       :colSpan="rowAttrs.length + (colAttrs.length === 0 ? 0 : 1)"
     >
-      {{ languagePack.totals }}
+      {{ languagePack?.totals }}
     </th>
     <td
       v-for="(colKey, i) in colKeys"
@@ -29,7 +29,7 @@
 
 <script setup lang="ts">
 import { computed } from 'vue'
-import { useProvidePivotData } from '@/composables/useProvidePivotData'
+import { useProvidePivotData } from '@/composables'
 import { DefaultPropsType } from '@/types'
 
 type VPivottableBodyRowsTotalRowProps = Pick<
@@ -61,20 +61,20 @@ const handleCellClick = (value: any, rowValues: any[], colValues: any[]) => {
   if (props.tableOptions?.clickCallback) {
     const filters = {} as any
 
-    colAttrs.value.forEach((attr, i) => {
+    colAttrs.value.forEach((attr: string, i: number) => {
       if (colValues[i] !== undefined && colValues[i] !== null) {
         filters[attr] = colValues[i]
       }
     })
 
-    rowAttrs.value.forEach((attr, i) => {
+    rowAttrs.value.forEach((attr: string, i: number) => {
       if (rowValues[i] !== undefined && rowValues[i] !== null) {
         filters[attr] = rowValues[i]
       }
     })
 
     return (event: MouseEvent) =>
-      props.tableOptions.clickCallback(event, value, filters, pivotData.value)
+      props.tableOptions?.clickCallback(event, value, filters, pivotData.value)
   }
   return () => ({})
 }

src/components/pivottable/VPivottableHeader.vue

@@ -36,7 +36,7 @@
 </template>
 
 <script setup lang="ts">
-import { useProvidePivotData } from '@/composables/useProvidePivotData'
+import { useProvidePivotData } from '@/composables'
 import VPivottableHeaderColumns from './VPivottableHeaderColumns.vue'
 import VPivottableHeaderRows from './VPivottableHeaderRows.vue'
 import VPivottableHeaderRowsTotal from './VPivottableHeaderRowsTotal.vue'

src/components/pivottable/VPivottableHeaderColumns.vue

@@ -15,7 +15,7 @@
 </template>
 
 <script setup lang="ts">
-import { useProvidePivotData } from '@/composables/useProvidePivotData'
+import { useProvidePivotData } from '@/composables'
 
 type VPivottableHeaderColumnsProps = {
   colKeys: string[][]

src/components/pivottable/VPivottableHeaderRows.vue

@@ -11,7 +11,7 @@
       class="pvtTotalLabel"
       v-if="showRowTotal || colAttrsLength !== 0"
     >
-      {{ colAttrsLength === 0 && showRowTotal ? languagePack.totals : null }}
+      {{ colAttrsLength === 0 && showRowTotal ? languagePack?.totals : null }}
     </th>
   </tr>
 </template>