Merge branch 'main' into develop

Author: Seungwoo321

CHANGELOG.md

@@ -1,3 +1,10 @@
+## [1.0.15](https://github.com/vue-pivottable/vue3-pivottable/compare/vue-pivottable@1.0.14...vue-pivottable@1.0.15) (2025-06-05)
+
+
+### Bug Fixes
+
+* delay Draggable render to prevent _sortable.option error on HMR [#150](https://github.com/vue-pivottable/vue3-pivottable/issues/150) ([2ea40c8](https://github.com/vue-pivottable/vue3-pivottable/commit/2ea40c83f39f561dd409e8da23f724fa7a08849e))
+
 ## [1.0.14](https://github.com/vue-pivottable/vue3-pivottable/compare/vue-pivottable@1.0.13...vue-pivottable@1.0.14) (2025-05-13)
 
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue-pivottable",
-  "version": "1.0.14",
+  "version": "1.0.15",
   "type": "module",
   "description": "",
   "exports": {

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
 })