fix: dnd

package.json

@@ -38,7 +38,7 @@
     "@douyinfe/semi-theme-default": "2.66.1",
     "@vue/repl": "4.3.1",
     "lodash": "^4.17.21",
-    "vue": "^3.5.8"
+    "vue": "^3.5.9"
   },
   "devDependencies": {
     "@babel/core": "^7.18.2",

packages/semi-animation-vue/package.json

@@ -44,7 +44,7 @@
     "@douyinfe/semi-theme-default": "2.66.1",
     "classnames": "^2.3.2",
     "sass": "^1.57.1",
-    "vue": "^3.5.8"
+    "vue": "^3.5.9"
   },
   "peerDependencies": {
     "vue": ">=3.4.3"

packages/semi-icons-lab-vue/package.json

@@ -32,7 +32,7 @@
     "@douyinfe/semi-theme-default": "2.66.1",
     "classnames": "^2.3.2",
     "sass": "^1.57.1",
-    "vue": "^3.5.8"
+    "vue": "^3.5.9"
   },
   "peerDependencies": {
     "vue": ">=3.4.3"

packages/semi-icons-vue/package.json

@@ -26,7 +26,7 @@
     "@douyinfe/semi-theme-default": "2.66.1",
     "classnames": "^2.3.2",
     "sass": "^1.57.1",
-    "vue": "^3.5.8"
+    "vue": "^3.5.9"
   },
   "peerDependencies": {
     "vue": ">=3.4.3"

packages/semi-illustrations-vue/package.json

@@ -29,7 +29,7 @@
     "@douyinfe/semi-foundation": "2.66.1",
     "@douyinfe/semi-theme-default": "2.66.1",
     "classnames": "^2.3.2",
-    "vue": "^3.5.8"
+    "vue": "^3.5.9"
   },
   "peerDependencies": {
     "vue": ">=3.4.3"

packages/semi-ui-vue/package.json

@@ -31,10 +31,10 @@
     "@kousum/semi-icons-vue": "workspace:*",
     "@kousum/semi-illustrations-vue": "workspace:*",
     "@kousum/vue3-window": "0.0.6",
-    "@dnd-kit/abstract": "^0.0.6-beta-20240923164446",
-    "@dnd-kit/collision": "^0.0.6-beta-20240923164446",
-    "@dnd-kit/dom": "^0.0.6-beta-20240923164446",
-    "@dnd-kit/helpers": "^0.0.6-beta-20240923164446",
+    "@dnd-kit/abstract": "0.0.6-beta-20240923164446",
+    "@dnd-kit/collision": "0.0.6-beta-20240923164446",
+    "@dnd-kit/dom": "0.0.6-beta-20240923164446",
+    "@dnd-kit/helpers": "0.0.6-beta-20240923164446",
     "@kousum/dnd-kit-vue": "0.0.6-beta-20240923164446",
     "@kousum/vue-resizable": "1.0.2",
     "@kousum/vue-draggable": "1.0.2",
@@ -52,7 +52,7 @@
     "lottie-web": "^5.12.2",
     "@mdx-js/vue": "^3.0.1",
     "unified": "^11.0.5",
-    "vue": "^3.5.8"
+    "vue": "^3.5.9"
   },
   "peerDependencies": {
     "lodash": "^4.17.21",

packages/semi-ui-vue/src/components/table/__test__/TableDemo11.tsx

@@ -104,7 +104,7 @@ const TableDemo1 = defineComponent((props, {}) => {
     if (active && over && active.id !== over?.id) {
       newPageData = move(Array.from(pageData.value), event);
       newData = Array.from(data.value);
-      newData.splice((currentPage.value - 1) * PAGE_SIZE, PAGE_SIZE, ...pageData.value);
+      newData.splice((currentPage.value - 1) * PAGE_SIZE, PAGE_SIZE, ...newPageData);
     }
   }
 
@@ -176,10 +176,12 @@ const TableDemo1 = defineComponent((props, {}) => {
 
           }}
           onDragOver={(event)=>{
+            console.log('over')
             // props.onSortOver(event)
             handleDragEnd(event)
           }}
           onDragEnd={(event)=>{
+            console.log('end')
             // props.onSortOver(event)
             pageData.value = Array.from(newPageData)
             data.value = Array.from(newData);

packages/semi-ui-vue/src/components/table/__test__/demo11/SortableItem.tsx

@@ -1,6 +1,6 @@
 import { useSortable } from '@kousum/dnd-kit-vue/sortable';
 
-import { defineComponent, h, ref, useSlots } from 'vue';
+import { defineComponent, h, ref, useSlots, computed } from 'vue';
 import { pointerIntersection } from '@dnd-kit/collision';
 
 interface SortableItemProps {
@@ -31,8 +31,8 @@ const SortableItem = defineComponent((props, {attrs}) => {
   const element = ref<Element | null>(null);
   const handleRef = ref<HTMLButtonElement | null>(null);
   const {isDragSource} = useSortable({
-    id: props.id,
-    index: props.index,
+    id: computed(()=>props.id),
+    index: computed(()=>props.index),
     element,
     handle: handleRef,
     collisionDetector: pointerIntersection

packages/semi-ui-vue/src/components/tagInput/SortableItem.tsx

@@ -1,4 +1,4 @@
-import { defineComponent, ref } from 'vue';
+import { defineComponent, ref, shallowRef, watch } from 'vue';
 import { CombineProps } from '../interface';
 import { useSortable } from '@kousum/dnd-kit-vue/sortable';
 import { pointerIntersection } from '@dnd-kit/collision';
@@ -27,12 +27,23 @@ const SortableItem = defineComponent({
   props: { ...vuePropsType },
   name: 'SortableItem',
   setup(props, {}) {
-
+    const id = shallowRef(props.id)
+    watch(()=>props.id, (value, oldValue)=>{
+      if(value !== oldValue){
+        id.value = oldValue;
+      }
+    })
+    const index = shallowRef(props.index)
+    watch(()=>props.index, (value, oldValue)=>{
+      if(value !== oldValue){
+        index.value = oldValue;
+      }
+    })
     const element = ref<Element | null>(null);
     const handleRef = ref<HTMLButtonElement | null>(null);
     const {isDragSource} = useSortable({
-      id: props.id,
-      index: props.index,
+      id: id as any,
+      index: index as any,
       element,
       handle: handleRef,
       collisionDetector: pointerIntersection

packages/semi-ui-vue/src/components/tagInput/SortableList.tsx

@@ -6,6 +6,7 @@ import { DragDropProvider } from '@kousum/dnd-kit-vue';
 interface SortableListProps {
   items: any;
   onSortOver: any;
+  onSortEnd: any;
   useDragHandle: any;
   helperClass: any;
   axis: any;
@@ -14,6 +15,7 @@ interface SortableListProps {
 export const vuePropsType: CombineProps<Partial<SortableListProps>> = {
   items: Array,
   onSortOver: Function,
+  onSortEnd: Function,
   useDragHandle: [Boolean],
   helperClass: String,
   axis: String,
@@ -58,7 +60,7 @@ const SortableList = defineComponent({
             props.onSortOver(event)
           }}
           onDragEnd={(event)=>{
-            // props.onSortOver(event)
+            props.onSortEnd(event)
           }}
         >
           {props.items.map((item, index) => (

packages/semi-ui-vue/src/components/tagInput/__test__/TagInputDemo.tsx

@@ -23,9 +23,12 @@ const TagInputDemo = defineComponent((props, {}) => {
       {/*/>*/}
       <TagInput
         draggable
-        defaultValue={['抖音','火山','西瓜视频']}
+        value={value.value}
         placeholder='请输入...'
-        onChange={v => console.log(v)}
+        onChange={v => {
+          console.log(v)
+          value.value = v
+        }}
       />
     </div>
   )

packages/semi-ui-vue/src/components/tagInput/index.tsx

@@ -278,7 +278,7 @@ const Index = defineComponent({
     watch(
       [() => props.value, () => props.inputValue, () => state.inputValue],
       (val) => {
-        const newState = getDerivedStateFromProps({ ...props }, { ...state });
+        const newState = getDerivedStateFromProps({ ...getProps(props) }, { ...state });
         if (newState) {
           Object.keys(newState).forEach((key) => {
             state[key] = newState[key];
@@ -495,8 +495,15 @@ const Index = defineComponent({
         return;
       }
 
-      adapter().setTagsArray(move(Array.from(tagsArray), event));
+      if(active.id !==  over.id){
+        const oldIndex = tagsArray.indexOf(''+active.id);
+        const newIndex = tagsArray.indexOf(''+over.id);
+        foundation.handleSortEnd({  oldIndex, newIndex });
+      }
     };
+    const onSortEnd = (event: Parameters<Events['dragend']>[0]) =>{
+      // adapter().setTagsArray([...newArr]);
+    }
     function renderTags() {
       const {
         disabled,
@@ -536,6 +543,7 @@ const Index = defineComponent({
             items={sortableListItems}
             helperClass={`${prefixCls}-drag-item-move`}
             onSortOver={onSortOver}
+            onSortEnd={onSortEnd}
             axis={'xy'}
           >
             {sortableListItems}

packages/semi-ui-vue/src/components/transfer/SortableItem.tsx

@@ -1,4 +1,4 @@
-import { defineComponent, ref } from 'vue';
+import { defineComponent, ref, computed, shallowRef, watch } from 'vue';
 import { CombineProps } from '../interface';
 import { useSortable } from '@kousum/dnd-kit-vue/sortable';
 import { pointerIntersection } from '@dnd-kit/collision';
@@ -30,16 +30,30 @@ const SortableItem = defineComponent({
 
     const element = ref<Element | null>(null);
     const handleRef = ref<HTMLButtonElement | null>(null);
+    const id = shallowRef(props.id)
+    watch(()=>props.id, (value, oldValue)=>{
+      console.log(value);
+      if(value !== oldValue){
+        id.value = oldValue;
+      }
+    })
+    const index = shallowRef(props.index)
+    watch(()=>props.index, (value, oldValue)=>{
+      console.log(value);
+      if(value !== oldValue){
+        index.value = oldValue;
+      }
+    })
     const {isDragSource} = useSortable({
-      id: props.id,
-      index: props.index,
+      id: id as any,
+      index: index as any,
       element,
       handle: handleRef,
       collisionDetector: pointerIntersection
     });
 
     return () => {
-      return props.item({ element, handleRef: (v)=>{handleRef.value = v?.$el}, attributes: {shadow: isDragSource?.value,}});
+      return props.item({ element, handleRef: (v)=>{handleRef.value = v?.$el}, attributes: {'data-shadow': isDragSource?.value,}});
     };
   },
 });