Merge pull request #151 from vue-pivottable/fix/hmr

fix: delay Draggable render to prevent _sortable.option error on HMR …

Author: Seungwoo321

src/components/pivottable-ui/VDragAndDropCell.vue

@@ -1,8 +1,9 @@
 <template>
   <Draggable
+    v-if="showDraggable && modelItems.length > 0"
     tag="td"
     :list="modelItems"
-    :group="{ name: 'sharted', pull: true, put: true }"
+    :group="{ name: 'shared', pull: true, put: true }"
     :ghost-class="'pvtPlaceholder'"
     :prevent-on-filter="false"
     :class="classes"
@@ -40,7 +41,7 @@
 </template>
 
 <script setup>
-import { ref, onMounted, computed } from 'vue'
+import { ref, onMounted, computed, watch, nextTick, onBeforeUnmount } from 'vue'
 import { VueDraggableNext as Draggable } from 'vue-draggable-next'
 import VDraggableAttribute from './VDraggableAttribute.vue'
 
@@ -95,6 +96,7 @@ const props = defineProps({
 })
 
 const modelItems = ref([])
+const showDraggable = ref(false)
 
 const onDragMove = (event) => {
   const draggedItem = event.draggedContext.element
@@ -118,8 +120,22 @@ const onDragEnd = () => {
 
 onMounted(() => {
   modelItems.value = [...props.attributeNames]
+  nextTick(() => {
+    showDraggable.value = true
+  })
 })
 
+onBeforeUnmount(() => {
+  showDraggable.value = false
+})
+
+watch(
+  () => props.attributeNames,
+  (newVal) => {
+    modelItems.value = [...newVal]
+  }
+)
+
 const hideDropDownForUnused = computed(() => {
   return props.cellType === 'unused' && props.hideFilterBoxOfUnusedAttributes
 })

src/composables/useMaterializeInput.js

@@ -24,13 +24,17 @@ export function useMaterializeInput(dataSource, options) {
         for (const attr of Object.keys(record)) {
           if (!(attr in newAllFilters)) {
             newAllFilters[attr] = {}
-            if (recordsProcessed > 0) { newAllFilters[attr].null = recordsProcessed }
+            if (recordsProcessed > 0) {
+              newAllFilters[attr].null = recordsProcessed
+            }
           }
         }
 
         for (const attr in newAllFilters) {
           const value = attr in record ? record[attr] : 'null'
-          if (!(value in newAllFilters[attr])) { newAllFilters[attr][value] = 0 }
+          if (!(value in newAllFilters[attr])) {
+            newAllFilters[attr][value] = 0
+          }
           newAllFilters[attr][value]++
         }
 
@@ -51,7 +55,9 @@ export function useMaterializeInput(dataSource, options) {
 
   watch(
     () => options.derivedAttributes.value,
-    () => { processData(dataSource.value) }
+    () => {
+      processData(dataSource.value)
+    }
   )
 
   return {

src/composables/useProvidePivotData.js

@@ -7,7 +7,9 @@ export function providePivotData(props) {
   const error = ref(null)
 
   const pivotData = computed(() => {
-    try { return new PivotData(props) } catch (err) {
+    try {
+      return new PivotData(props)
+    } catch (err) {
       console.error(err.stack)
       error.value = 'An error occurred computing the PivotTable results.'
       return null
@@ -35,7 +37,9 @@ export function providePivotData(props) {
   })
 
   const allColorScales = computed(() => {
-    const values = rowKeys.value.reduce((acc, r) => { return acc.concat(colKeys.value.map((c) => getAggregator(r, c).value())) }, [])
+    const values = rowKeys.value.reduce((acc, r) => {
+      return acc.concat(colKeys.value.map((c) => getAggregator(r, c).value()))
+    }, [])
     return colorScaleGenerator(values)
   })
   const rowColorScales = computed(() =>
@@ -56,7 +60,13 @@ export function providePivotData(props) {
   )
 
   const valueCellColors = (rowKey, colKey, value) => {
-    if (props.heatmapMode === 'full') { return allColorScales.value(value) } else if (props.heatmapMode === 'row') { return rowColorScales.value[rowKey](value) } else if (props.heatmapMode === 'col') { return colColorScales.value[colKey](value) }
+    if (props.heatmapMode === 'full') {
+      return allColorScales.value(value)
+    } else if (props.heatmapMode === 'row') {
+      return rowColorScales.value[rowKey](value)
+    } else if (props.heatmapMode === 'col') {
+      return colColorScales.value[colKey](value)
+    }
     return {}
   }
   const rowTotalValues = colKeys.value.map((x) => getAggregator([], x).value())
@@ -76,15 +86,27 @@ export function providePivotData(props) {
     let x
     if (i !== 0) {
       let noDraw = true
-      for (x = 0; x <= j; x++) { if (arr[i - 1][x] !== arr[i][x]) { noDraw = false } }
-      if (noDraw) { return -1 }
+      for (x = 0; x <= j; x++) {
+        if (arr[i - 1][x] !== arr[i][x]) {
+          noDraw = false
+        }
+      }
+      if (noDraw) {
+        return -1
+      }
     }
 
     let len = 0
     while (i + len < arr.length) {
       let stop = false
-      for (x = 0; x <= j; x++) { if (arr[i][x] !== arr[i + len][x]) { stop = true } }
-      if (stop) { break }
+      for (x = 0; x <= j; x++) {
+        if (arr[i][x] !== arr[i + len][x]) {
+          stop = true
+        }
+      }
+      if (stop) {
+        break
+      }
       len++
     }
     return len
@@ -109,4 +131,6 @@ export function providePivotData(props) {
   return pivotDataContext
 }
 
-export function useProvidePivotData() { return inject(PIVOT_DATA_KEY) }
+export function useProvidePivotData() {
+  return inject(PIVOT_DATA_KEY)
+}