Merge pull request #166 from vue-pivottable/feat/typescript-pivottable

feat: add TypeScript support to pivottable components

Author: gingerbeerlime

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",

packages/lazy-table-renderer/src/index.ts

@@ -6,7 +6,7 @@ export default markRaw({
   'Lazy Table': defineComponent({
     name: 'VueLazyTable',
     props: { ...PivotUtilities.defaultProps },
-    setup(props) {
+    setup (props) {
       return () =>
         h(LazyPivottableRenderer, {
           ...props,

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/VPivottable.vue

@@ -5,13 +5,12 @@
   />
 </template>
 
-<script setup>
+<script setup lang="ts">
 import { computed } from 'vue'
-import { defaultProps } from '@/helper'
 import TableRenderer from './renderer'
-const props = defineProps({
-  ...defaultProps
-})
+import { DefaultPropsType } from '@/types'
+
+const props = defineProps<DefaultPropsType>()
 
 const rendererComponent = computed(
   () => props.renderers[props.rendererName] || TableRenderer.Table

src/components/pivottable/VPivottableBody.vue

@@ -3,48 +3,33 @@
     <VPivottableBodyRows
       :row-keys="rowKeys"
       :col-keys="colKeys"
-      :row-total="rowTotal"
+      :show-row-total="showRowTotal"
       :table-options="tableOptions"
     />
     <VPivottableBodyRowsTotalRow
-      :col-total="colTotal"
-      :row-total="rowTotal"
+      :show-col-total="showColTotal"
+      :show-row-total="showRowTotal"
       :row-attrs="rowAttrs"
       :col-attrs="colAttrs"
       :col-keys="colKeys"
-      :locale-strings="localeStrings"
+      :language-pack="languagePack"
       :table-options="tableOptions"
     />
   </tbody>
 </template>
 
-<script setup>
-import { useProvidePivotData } from '@/composables/useProvidePivotData'
+<script setup lang="ts">
+import { useProvidePivotData } from '@/composables'
 import VPivottableBodyRows from './VPivottableBodyRows.vue'
 import VPivottableBodyRowsTotalRow from './VPivottableBodyRowsTotalRow.vue'
+import type { DefaultPropsType } from '@/types'
 
-defineProps({
-  rowTotal: {
-    type: Boolean,
-    default: true
-  },
-  colTotal: {
-    type: Boolean,
-    default: true
-  },
-  localeStrings: {
-    type: Object,
-    default: () => ({
-      totals: 'Totals'
-    })
-  },
-  tableOptions: {
-    type: Object,
-    default: () => ({
-      clickCallback: null
-    })
-  }
-})
+type Props = Pick<
+  DefaultPropsType,
+  'showRowTotal' | 'showColTotal' | 'languagePack' | 'tableOptions'
+>
+
+defineProps<Props>()
 
 const { pivotData, rowKeys, colKeys, rowAttrs, colAttrs } =
   useProvidePivotData()

src/components/pivottable/VPivottableBodyRows.vue

@@ -36,7 +36,7 @@
       }}
     </td>
     <td
-      v-if="rowTotal"
+      v-if="showRowTotal"
       class="pvtTotal"
       :style="getRowTotalStyle(rowKey)"
       @click="
@@ -48,27 +48,19 @@
   </tr>
 </template>
 
-<script setup>
-import { useProvidePivotData } from '@/composables/useProvidePivotData'
+<script setup lang="ts">
+import { useProvidePivotData } from '@/composables'
+import { DefaultPropsType } from '@/types'
 
-const props = defineProps({
-  rowKeys: {
-    type: Array,
-    required: true
-  },
-  colKeys: {
-    type: Array,
-    required: true
-  },
-  rowTotal: {
-    type: Boolean,
-    required: true
-  },
-  tableOptions: {
-    type: Object,
-    required: true
-  }
-})
+type VPivottableBodyRowsProps = Pick<
+  DefaultPropsType,
+  'showRowTotal' | 'tableOptions'
+> & {
+  rowKeys: any[][]
+  colKeys: any[][]
+}
+
+const props = defineProps<VPivottableBodyRowsProps>()
 
 const {
   pivotData,
@@ -80,34 +72,34 @@ const {
   getAggregator
 } = useProvidePivotData()
 
-const getValueCellStyle = (rowKey, colKey) => {
+const getValueCellStyle = (rowKey: any, colKey: any) => {
   const value = getAggregator(rowKey, colKey).value()
   return valueCellColors(rowKey, colKey, value)
 }
 
-const getRowTotalStyle = (rowKey) => {
+const getRowTotalStyle = (rowKey: any) => {
   const value = getAggregator(rowKey, []).value()
   return colTotalColors(value)
 }
 
-const handleCellClick = (value, rowValues, colValues) => {
+const handleCellClick = (value: any, rowValues: any, colValues: any) => {
   if (props.tableOptions?.clickCallback) {
-    const filters = {}
+    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) =>
-      props.tableOptions.clickCallback(event, value, filters, pivotData.value)
+    return (event: MouseEvent) =>
+      props.tableOptions?.clickCallback(event, value, filters, pivotData.value)
   }
   return () => ({})
 }