feat(cdk:dnd): add dnd lib for dnd sortting and moving

`cdk/drag-drop` is now deprecated, please use `cdk/dnd` instead.
IDuxFE · Jul 10, 2024 · 09c9766 · 09c9766
1 parent 67a2f82
commit 09c9766
Show file tree

Hide file tree

Showing 83 changed files with 4,980 additions and 12 deletions.
diff --git a/packages/cdk/dnd/__tests__/dnd.spec.ts b/packages/cdk/dnd/__tests__/dnd.spec.ts
@@ -0,0 +1,3 @@
+describe.skip('useDnd.ts', () => {
+  test('init test', () => {})
+})
diff --git a/packages/cdk/dnd/demo/ListSortable.md b/packages/cdk/dnd/demo/ListSortable.md
@@ -0,0 +1,14 @@
+---
+order: 0
+title:
+  zh: 列表拖拽排序
+  en: List dnd sortable
+---
+
+## zh
+
+使用 `CdkDndSortable` 实现列表拖拽排序。
+
+## en
+
+Impliment list sortting by drag-and-drop with `CdkDndSortable`.
diff --git a/packages/cdk/dnd/demo/ListSortable.vue b/packages/cdk/dnd/demo/ListSortable.vue
@@ -0,0 +1,68 @@
+<template>
+  <CdkDndSortable :dataSource="dataSource" :onSortReorder="onSortReorder" :onSortChange="onSortChange">
+    <div ref="listRef" class="dnd-list">
+      <CdkDndSortableItem v-for="item in dataSource" :key="item.key" :itemKey="item.key" class="dnd-list__item">
+        {{ item.label }}
+      </CdkDndSortableItem>
+    </div>
+  </CdkDndSortable>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+
+import { type DndSortableReorderInfo, useDndAutoScroll } from '@idux/cdk/dnd'
+
+interface ListData {
+  key: string
+  label: string
+}
+
+const listRef = ref<HTMLElement>()
+
+useDndAutoScroll(listRef, {
+  allowedAxis: 'vertical',
+  canScroll: true,
+})
+
+const dataSource = ref<ListData[]>(
+  Array.from({ length: 30 }).map((_, idx) => {
+    return {
+      key: `key-${idx}`,
+      label: `list item ${idx}`,
+    }
+  }),
+)
+
+const onSortReorder = (reorderInfo: DndSortableReorderInfo) => {
+  console.log('onSortReorder', reorderInfo)
+}
+const onSortChange = (newData: ListData[], oldData: ListData[]) => {
+  console.log('onSortChange', newData, oldData)
+  dataSource.value = newData
+}
+</script>
+
+<style scoped lang="less">
+.dnd-list {
+  display: flex;
+  flex-direction: column;
+  width: 300px;
+  height: 500px;
+  overflow-y: auto;
+  border: 1px solid red;
+
+  &__item {
+    display: flex;
+    align-items: center;
+    flex-shrink: 0;
+    width: 100%;
+    height: 48px;
+    padding: 0 16px;
+
+    &:not(&:last-child) {
+      border-bottom: 1px solid red;
+    }
+  }
+}
+</style>
diff --git a/packages/cdk/dnd/demo/Movable.md b/packages/cdk/dnd/demo/Movable.md
@@ -0,0 +1,14 @@
+---
+order: 40
+title:
+  zh: 拖拽移动
+  en: Drag move
+---
+
+## zh
+
+使用 `CdkDndMovable` 实现元素拖拽移动。
+
+## en
+
+Impliment element dragging with `CdkDndMovable`.
diff --git a/packages/cdk/dnd/demo/Movable.vue b/packages/cdk/dnd/demo/Movable.vue
@@ -0,0 +1,109 @@
+<template>
+  <IxSpace vertical>
+    <div class="dnd-movable-wrapper">
+      <CdkDndMovable class="dnd-movable-item" :mode="mode" :strategy="strategy" :allowedAxis="allowedAxis">
+        <CdkDndMovableHandle v-if="useHandle" class="dnd-movable-item__handle">
+          <IxIcon name="holder" />
+        </CdkDndMovableHandle>
+        <div class="dnd-movable-item__inner"> Drag Me </div>
+      </CdkDndMovable>
+    </div>
+    <IxSpace vertical>
+      <IxSpace>
+        <span>strategy: </span>
+        <IxRadioGroup v-model:value="strategy" :dataSource="strategies" />
+      </IxSpace>
+      <IxSpace>
+        <span>mode: </span>
+        <IxRadioGroup v-model:value="mode" :dataSource="modes" />
+      </IxSpace>
+      <IxSpace>
+        <span>allowedAxis: </span>
+        <IxRadioGroup v-model:value="allowedAxis" :dataSource="axises" />
+      </IxSpace>
+      <IxSpace>
+        <span>use drag handle: </span>
+        <IxSwitch v-model:checked="useHandle" />
+      </IxSpace>
+    </IxSpace>
+  </IxSpace>
+</template>
+
+<script setup lang="ts">
+import type { Axis, DndMovableMode, DndMovableStrategy } from '@idux/cdk/dnd'
+import type { RadioData } from '@idux/components/radio'
+
+import { ref } from 'vue'
+
+const strategy = ref<DndMovableStrategy>('transform')
+const mode = ref<DndMovableMode>('afterDrop')
+const allowedAxis = ref<Axis>('all')
+const useHandle = ref<boolean>(false)
+
+const strategies: RadioData[] = [
+  {
+    key: 'transform',
+    label: 'transform',
+  },
+  {
+    key: 'absolute',
+    label: 'absolute',
+  },
+  {
+    key: 'fixed',
+    label: 'fixed',
+  },
+]
+const modes: RadioData[] = [
+  {
+    key: 'afterDrop',
+    label: 'afterDrop',
+  },
+  {
+    key: 'immediate',
+    label: 'immediate',
+  },
+]
+const axises: RadioData[] = [
+  {
+    key: 'all',
+    label: 'all',
+  },
+  {
+    key: 'horizontal',
+    label: 'horizontal',
+  },
+  {
+    key: 'vertical',
+    label: 'vertical',
+  },
+]
+</script>
+
+<style scoped lang="less">
+.dnd-movable-wrapper {
+  width: 100%;
+  height: 300px;
+  position: relative;
+}
+.dnd-movable-item {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100px;
+  height: 50px;
+  background-color: red;
+  border-radius: 3px;
+  font-size: 14px;
+  font-weight: 600;
+
+  &__handle {
+    width: 30px;
+    height: 30px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    font-size: 24px;
+  }
+}
+</style>
diff --git a/packages/cdk/dnd/demo/MovableWithBoundary.md b/packages/cdk/dnd/demo/MovableWithBoundary.md
@@ -0,0 +1,14 @@
+---
+order: 50
+title:
+  zh: 拖拽移动（设置边界）
+  en: Drag move with boundary
+---
+
+## zh
+
+配置 `CdkDndMovable` 的 `boundary` 属性设置拖拽移动边界。
+
+## en
+
+Configure dragging move boundary by setting `boundary` prop of `CdkDndMovable`.
diff --git a/packages/cdk/dnd/demo/MovableWithBoundary.vue b/packages/cdk/dnd/demo/MovableWithBoundary.vue
@@ -0,0 +1,75 @@
+<template>
+  <IxSpace vertical>
+    <div ref="boundaryRef" class="dnd-movable-wrapper">
+      <CdkDndMovable class="dnd-movable-item" :mode="mode" :strategy="strategy" :boundary="boundaryRef">
+        <div class="dnd-movable-item__inner"> Drag Me </div>
+      </CdkDndMovable>
+    </div>
+    <IxSpace vertical>
+      <IxSpace>
+        <span>strategy: </span>
+        <IxRadioGroup v-model:value="strategy" :dataSource="strategies" />
+      </IxSpace>
+      <IxSpace>
+        <span>mode: </span>
+        <IxRadioGroup v-model:value="mode" :dataSource="modes" />
+      </IxSpace>
+    </IxSpace>
+  </IxSpace>
+</template>
+
+<script setup lang="ts">
+import type { DndMovableMode, DndMovableStrategy } from '@idux/cdk/dnd'
+import type { RadioData } from '@idux/components/radio'
+
+import { ref } from 'vue'
+
+const strategy = ref<DndMovableStrategy>('transform')
+const mode = ref<DndMovableMode>('afterDrop')
+const boundaryRef = ref<HTMLElement>()
+
+const strategies: RadioData[] = [
+  {
+    key: 'transform',
+    label: 'transform',
+  },
+  {
+    key: 'absolute',
+    label: 'absolute',
+  },
+  {
+    key: 'fixed',
+    label: 'fixed',
+  },
+]
+const modes: RadioData[] = [
+  {
+    key: 'afterDrop',
+    label: 'afterDrop',
+  },
+  {
+    key: 'immediate',
+    label: 'immediate',
+  },
+]
+</script>
+
+<style scoped lang="less">
+.dnd-movable-wrapper {
+  width: 300px;
+  height: 300px;
+  position: relative;
+  border: 1px solid red;
+}
+.dnd-movable-item {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100px;
+  height: 50px;
+  background-color: red;
+  border-radius: 3px;
+  font-size: 14px;
+  font-weight: 600;
+}
+</style>
diff --git a/packages/cdk/dnd/demo/MovableWithTargets.md b/packages/cdk/dnd/demo/MovableWithTargets.md
@@ -0,0 +1,18 @@
+---
+order: 60
+title:
+  zh: 拖拽移动（设置拖放目标）
+  en: Drag move with targets
+---
+
+## zh
+
+配置 `CdkDndMovable` 的 `dropTargets` 属性设置拖拽移动的目标元素。
+
+仅支持 `mode` 为 `afterDrop` 的方式。
+
+## en
+
+Configure dragging move targets by setting `dropTargets` prop of `CdkDndMovable`.
+
+Only supported under `afterDrop` mode.
diff --git a/packages/cdk/dnd/demo/MovableWithTargets.vue b/packages/cdk/dnd/demo/MovableWithTargets.vue
@@ -0,0 +1,52 @@
+<template>
+  <IxSpace vertical :gap="50">
+    <IxSpace>
+      <div ref="box1" class="dnd-movable-drop-box">box1</div>
+      <div ref="box2" class="dnd-movable-drop-box">box2</div>
+    </IxSpace>
+    <IxSpace>
+      <CdkDndMovable class="dnd-movable-item" :mode="mode" :dropTargets="[box1]">
+        <div class="dnd-movable-item__inner"> Drag To Box1 </div>
+      </CdkDndMovable>
+      <CdkDndMovable class="dnd-movable-item" :mode="mode" :dropTargets="[box2]">
+        <div class="dnd-movable-item__inner"> Drag To Box2 </div>
+      </CdkDndMovable>
+      <CdkDndMovable class="dnd-movable-item" :mode="mode" :dropTargets="[box1, box2]">
+        <div class="dnd-movable-item__inner"> Drag To All </div>
+      </CdkDndMovable>
+    </IxSpace>
+  </IxSpace>
+</template>
+
+<script setup lang="ts">
+import type { DndMovableMode } from '@idux/cdk/dnd'
+
+import { ref } from 'vue'
+
+const mode = ref<DndMovableMode>('afterDrop')
+const box1 = ref<HTMLElement>()
+const box2 = ref<HTMLElement>()
+</script>
+
+<style scoped lang="less">
+.dnd-movable-drop-box {
+  width: 300px;
+  height: 300px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 30;
+  border: 1px solid red;
+}
+.dnd-movable-item {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100px;
+  height: 50px;
+  background-color: red;
+  border-radius: 3px;
+  font-size: 14px;
+  font-weight: 600;
+}
+</style>
diff --git a/packages/cdk/dnd/demo/SortablePreview.md b/packages/cdk/dnd/demo/SortablePreview.md
@@ -0,0 +1,14 @@
+---
+order: 20
+title:
+  zh: 拖拽预览
+  en: Drag preview
+---
+
+## zh
+
+设置拖拽元素的预览。
+
+## en
+
+Set preview of item being dragged.