feat: @dnd-kit/experimental-vue

rashagu · Sep 26, 2024 · 5b8f806 · 5b8f806
1 parent 7e682fb
commit 5b8f806
Show file tree

Hide file tree

Showing 20 changed files with 458 additions and 672 deletions.
diff --git a/packages/semi-ui-vue/package.json b/packages/semi-ui-vue/package.json
@@ -31,11 +31,11 @@
     "@kousum/semi-icons-vue": "workspace:*",
     "@kousum/semi-illustrations-vue": "workspace:*",
     "@kousum/vue3-window": "0.0.6",
-    "@dnd-kit-vue/core": "0.1.2",
-    "@dnd-kit-vue/modifiers": "0.1.2",
-    "@dnd-kit-vue/sortable": "0.1.2",
-    "@dnd-kit-vue/utilities": "0.1.2",
-    "@dnd-kit-vue/accessibility": "0.1.2",
+    "@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",
     "async-validator": "^4.0.7",

diff --git a/packages/semi-ui-vue/src/App.tsx b/packages/semi-ui-vue/src/App.tsx
@@ -229,7 +229,7 @@ const App = defineComponent<ExampleProps>((props, {slots}) => {
         {/*<TableDemo8 />*/}
         {/*<TableDemo9 />*/}
         {/*<TableDemo10 />*/}
-        {/*<TableDemo11 />*/}
+        <TableDemo11 />
         {/*<TableDemo12 />*/}
         {/*<TableDemo13Virtualized />*/}
         {/*<PaginationDemo />*/}
@@ -271,7 +271,7 @@ const App = defineComponent<ExampleProps>((props, {slots}) => {
         {/*<InputNumberDemo />*/}
         {/*<ModalForm />*/}
         {/*<ModalDemoHook />*/}
-        <ModalDemoConfirm/>
+        {/*<ModalDemoConfirm/>*/}
         {/*<ModalDemo/>*/}
         {/*<ModalDemoVueSFC/>*/}
         {/*<ModalDemo2/>*/}

diff --git a/packages/semi-ui-vue/src/components/configProvider/context/Consumer.tsx b/packages/semi-ui-vue/src/components/configProvider/context/Consumer.tsx
@@ -2,7 +2,7 @@ import { defineComponent, h, inject, Ref, ref, UnwrapRef, useSlots } from 'vue';
 import { ContextValue } from '../context';
 
 export function useConfigContext(): { context: Ref<UnwrapRef<ContextValue>> } {
-  const context = inject('ConfigContext', ref<ContextValue>({}));
+  const context = inject('semi_ConfigContext', ref<ContextValue>({}));
   return {
     context,
   };

diff --git a/packages/semi-ui-vue/src/components/configProvider/context/Provider.tsx b/packages/semi-ui-vue/src/components/configProvider/context/Provider.tsx
@@ -17,7 +17,7 @@ const Provider = defineComponent({
       },
       { deep: true }
     );
-    provide('ConfigContext', ConfigContext);
+    provide('semi_ConfigContext', ConfigContext);
     return () => (slots.default ? slots.default(ConfigContext.value) : null);
   },
 });

diff --git a/packages/semi-ui-vue/src/components/locale/context/Consumer.tsx b/packages/semi-ui-vue/src/components/locale/context/Consumer.tsx
@@ -5,7 +5,7 @@ export const vuePropsType = {
 }
 const Consumer = defineComponent(() => {
   const slots = useSlots()
-  const config = inject('LocalContext', ref<Locale | null>(null))
+  const config = inject('semi_LocalContext', ref<Locale | null>(null))
   return ()=>slots.default?slots.default(config):null
 }, {
   props: { ...vuePropsType },

diff --git a/packages/semi-ui-vue/src/components/locale/context/Provider.tsx b/packages/semi-ui-vue/src/components/locale/context/Provider.tsx
@@ -11,7 +11,7 @@ const Provider = defineComponent((props, {slots}) => {
   watch(()=>props.value, ()=>{
     ConfigContext.value = props.value
   })
-  provide('LocalContext', ConfigContext)
+  provide('semi_LocalContext', ConfigContext)
   return ()=>slots.default?slots.default(ConfigContext.value):null
 }, {
   props: { ...vuePropsType },

diff --git a/packages/semi-ui-vue/src/components/locale/localeConsumer.tsx b/packages/semi-ui-vue/src/components/locale/localeConsumer.tsx
@@ -57,7 +57,9 @@ function LocaleConsumerFunc<T>() {
                 return (
                   <LocaleContext.Consumer>
                     {{
-                      default: (localeData) => renderChildren(locale.value.locale || localeData.value, slots.default),
+                      default: (localeData) => {
+                        return renderChildren(locale.value?.locale || localeData.value, slots.default)
+                      },
                     }}
                   </LocaleContext.Consumer>
                 );

diff --git a/packages/semi-ui-vue/src/components/table/__test__/TableDemo11.tsx b/packages/semi-ui-vue/src/components/table/__test__/TableDemo11.tsx
@@ -1,27 +1,12 @@
-import { computed, defineComponent, h, ref, Teleport, VNode, watch } from 'vue';
-import {TableMaker, TableComponents } from '../index';
+import { computed, defineComponent, nextTick, ref, watch } from 'vue';
+import { TableMaker } from '../index';
 import Avatar from '../../avatar';
-import {
-  closestCenter,
-  defaultDropAnimationSideEffects,
-  DndContext,
-  DragEndEvent,
-  DragOverlay,
-  DropAnimation,
-  KeyboardSensor,
-  PointerSensor,
-  useSensor,
-  useSensors,
-} from '@dnd-kit-vue/core';
-import {
-  arrayMove,
-  SortableContext,
-  sortableKeyboardCoordinates,
-  verticalListSortingStrategy,
-} from '@dnd-kit-vue/sortable';
 import * as dateFns from 'date-fns';
 import SortableItem from './demo11/SortableItem';
 import { isNull } from 'lodash';
+import { DragDropProvider, Events } from '@kousum/dnd-kit-vue';
+import { RestrictToVerticalAxis } from '@dnd-kit/abstract/modifiers';
+import { move } from '@dnd-kit/helpers';
 
 interface TableDemo1Props {
   name?: string;
@@ -109,39 +94,27 @@ export const vuePropsType = {
 };
 const Table = TableMaker();
 const TableDemo1 = defineComponent((props, {}) => {
-  const sensors = useSensors(
-    useSensor(PointerSensor, {
-      // activationConstraint: {
-      //   // distance: 5,
-      //   // delay: 100,
-      //   // tolerance: 100
-      // }
-    }),
-    useSensor(KeyboardSensor, {
-      coordinateGetter: sortableKeyboardCoordinates,
-    })
-  );
 
-  function handleDragEnd(event: DragEndEvent) {
-    console.log(event)
-    const { active, over } = event;
 
+  let newPageData = []
+  let newData = []
+  function handleDragEnd(event: Parameters<Events['dragend']>[0]) {
+
+    const { active, over } = {active: event.operation.source, over: event.operation.target};
     if (active && over && active.id !== over?.id) {
-      const oldIndex = pageData.value.findIndex(item => item.id === active.id);
-      const newIndex = pageData.value.findIndex(item => item.id === over.id);
-      pageData.value = arrayMove(pageData.value, oldIndex, newIndex);
-      const newData = Array.from(data.value);
+      newPageData = move(Array.from(pageData.value), event);
+      newData = Array.from(data.value);
       newData.splice((currentPage.value - 1) * PAGE_SIZE, PAGE_SIZE, ...pageData.value);
-      data.value = newData;
     }
   }
 
   const dragIngIndex = ref();
 
   const dragOverlayRef = ref();
   const tableDragOverlayRef = ref();
-  function onDragStart(event: DragEndEvent) {
-    const { active, over } = event;
+  function onDragStart(event: Parameters<Events['dragstart']>[0]) {
+    const { active, over } = {active: event.operation.source, over: event.operation.target};
+
     console.log(active);
     dragIngIndex.value = +active.id;
   }
@@ -187,15 +160,7 @@ const TableDemo1 = defineComponent((props, {}) => {
     pageData.value = data.value.slice((pageNum - 1) * PAGE_SIZE, pageNum * PAGE_SIZE);
   };
 
-  const dropAnimationConfig: DropAnimation = {
-    sideEffects: defaultDropAnimationSideEffects({
-      styles: {
-        active: {
-          opacity: '0.5',
-        },
-      },
-    }),
-  };
+
 
   const SortableData = computed(() => {
     return data.value.slice((currentPage.value - 1) * PAGE_SIZE, currentPage.value * PAGE_SIZE);
@@ -205,52 +170,39 @@ const TableDemo1 = defineComponent((props, {}) => {
 
     return (
       <div id="components-table-demo-drag-sorting">
-        <DndContext
-          sensors={sensors.value}
-          collisionDetection={closestCenter}
-          onDragEnd={handleDragEnd}
-          onDragStart={onDragStart}
+        <DragDropProvider
+          modifiers={[RestrictToVerticalAxis]}
+          onDragStart={(event)=>{
+
+          }}
+          onDragOver={(event)=>{
+            // props.onSortOver(event)
+            handleDragEnd(event)
+          }}
+          onDragEnd={(event)=>{
+            // props.onSortOver(event)
+            pageData.value = Array.from(newPageData)
+            data.value = Array.from(newData);
+          }}
         >
-          <SortableContext items={pageData.value} strategy={verticalListSortingStrategy}>
-            <Table
-              id={'table_asd'}
-              columns={columns}
-              dataSource={pageData.value}
-              pagination={{
-                pageSize: PAGE_SIZE,
-                total: data.value.length,
-                currentPage: currentPage.value,
-                onPageChange: handlePageChange,
-              }}
-              components={components}
-              onRow={(record, index) => ({
-                index,
-                moveRow,
-                id: record.id,
-              })}
-            />
-          </SortableContext>
-          <Teleport to={document.body}>
-            <DragOverlay adjustScale={false} dropAnimation={dropAnimationConfig}>
-              <SortableItem index={dragIngIndex.value} style={{}} moveRow={() => {}} id={''} componentsTag={'div'}>
-                <table
-                  ref={tableDragOverlayRef}
-                  role="grid"
-                  aria-rowcount="5"
-                  aria-colcount="4"
-                  class="semi-table semi-table-demo11_DragOverlay"
-                  style={{
-                    backgroundColor: '#fff',
-                    width: '100%',
-                    boxShadow: '0 0 0 2px rgba(63, 63, 68, 0.05), 0 1px 2px 0 rgba(34, 33, 81, 0.15)'
-                  }}
-                >
-                  <tbody class="semi-table-tbody" ref={dragOverlayRef} id={'asd_DragOverlay'}></tbody>
-                </table>
-              </SortableItem>
-            </DragOverlay>
-          </Teleport>
-        </DndContext>
+          <Table
+            id={'table_asd'}
+            columns={columns}
+            dataSource={pageData.value}
+            pagination={{
+              pageSize: PAGE_SIZE,
+              total: data.value.length,
+              currentPage: currentPage.value,
+              onPageChange: handlePageChange,
+            }}
+            components={components}
+            onRow={(record, index) => ({
+              index,
+              moveRow,
+              id: record.id,
+            })}
+          />
+        </DragDropProvider>
       </div>
     );
   };

diff --git a/packages/semi-ui-vue/src/components/table/__test__/demo11/SortableDemo1.tsx b/packages/semi-ui-vue/src/components/table/__test__/demo11/SortableDemo1.tsx