feat(abc:st): add drag property

- close ng-alain/ng-alain#1835

packages/abc/st/demo/drag.md

@@ -0,0 +1,48 @@
+---
+order: 4
+title:
+  en-US: Drag sorting
+  zh-CN: 拖拽排序
+---
+
+## zh-CN
+
+使用 `drag` 实现行拖拽排序。
+
+## en-US
+
+Use `drag` to implement row drag sorting.
+
+```ts
+import { Component } from '@angular/core';
+
+import { STColumn, STData, STModule } from '@delon/abc/st';
+
+@Component({
+  selector: 'app-demo',
+  template: `<st [data]="users" [columns]="columns" drag />`,
+  imports: [STModule]
+})
+export class DemoComponent {
+  users: STData[] = Array(10)
+    .fill({})
+    .map((_, idx) => {
+      return {
+        id: idx + 1,
+        name: `name ${idx + 1}`,
+        age: Math.ceil(Math.random() * 10) + 20
+      };
+    });
+  columns: STColumn[] = [
+    { title: '编号4', index: 'id' },
+    { title: '编号5', index: 'id' },
+    { title: '编号6', index: 'id' },
+    { title: '编号7', index: 'id' },
+    { title: '编号8', index: 'id' },
+    { title: '编号8', index: 'id' },
+    { title: '编号8', index: 'id' },
+    { title: '编号8', index: 'id' },
+    { title: '编号8', index: 'id' }
+  ];
+}
+```

packages/abc/st/index.en-US.md

@@ -88,6 +88,7 @@ When an exception is thrown when parsing column data, *INVALID DATA* will be for
 | `[responsiveHideHeaderFooter]` | Whether to display the header and footer under the small screen | `boolean` | `false` | ✅ |
 | `[resizable]` | Resize header of the current table, **Multiple headers not supported** | `STResizable, boolean` | - | - |
 | `[trackBy]` | `TrackByFunction` function of list loop `@for` | `TrackByFunction<T>` | - | - |
+| `[drag]` | Drag soring | `STDragOptions, boolean` | - | - |
 | `(change)` | Events | `EventEmitter<STChange>` | - | - |
 | `(error)` | Error event | `EventEmitter<STError>` | - | - |
 

packages/abc/st/index.zh-CN.md

@@ -88,6 +88,7 @@ module: import { STModule } from '@delon/abc/st';
 | `[responsiveHideHeaderFooter]` | 是否在小屏幕下才显示顶部与底部 | `boolean` | `false` | ✅ |
 | `[resizable]` | 当前表格所有列的调整表头配置项，**不支持多表头** | `STResizable, boolean` | - | - |
 | `[trackBy]` | `@for` 列表循环的 `TrackByFunction` 函数 | `TrackByFunction<T>` | - | - |
+| `[drag]` | 拖拽排序 | `STDragOptions, boolean` | - | - |
 | `(change)` | 变化时回调，包括：`pi`、`ps`、`checkbox`、`radio`、`sort`、`filter`、`click`、`dblClick`、`expand` 变动 | `EventEmitter<STChange>` | - | - |
 | `(error)` | 异常时回调 | `EventEmitter<STError>` | - | - |
 

packages/abc/st/st.component.html

@@ -145,7 +145,15 @@
       }
     </thead>
   }
-  <tbody class="st__body">
+  <tbody
+    class="st__body"
+    cdkDropList
+    [cdkDropListDisabled]="drag() === null"
+    (cdkDropListDropped)="drag()?.dropped?.($event)"
+    (cdkDropListEntered)="drag()?.entered?.($event)"
+    (cdkDropListExited)="drag()?.exited?.($event)"
+    (cdkDropListSorted)="drag()?.sorted?.($event)"
+  >
     @if (!_loading) {
       <ng-template [ngTemplateOutlet]="bodyHeader!" [ngTemplateOutletContext]="{ $implicit: _statistical }" />
     }
@@ -155,6 +163,7 @@
         (click)="_rowClick($event, i, index, false)"
         (dblclick)="_rowClick($event, i, index, true)"
         [class]="i._rowClassName"
+        cdkDrag
       >
         @if (expand) {
           <td

packages/abc/st/st.component.ts

@@ -1,3 +1,4 @@
+import { moveItemInArray, DragDropModule } from '@angular/cdk/drag-drop';
 import type { CdkVirtualScrollViewport } from '@angular/cdk/scrolling';
 import { DecimalPipe, DOCUMENT, NgTemplateOutlet } from '@angular/common';
 import {
@@ -10,6 +11,7 @@ import {
   ElementRef,
   EventEmitter,
   inject,
+  input,
   Input,
   numberAttribute,
   OnChanges,
@@ -72,6 +74,7 @@ import type {
   STContextmenuItem,
   STCustomRequestOptions,
   STData,
+  STDragOptions,
   STError,
   STExportOptions,
   STLoadOptions,
@@ -251,7 +254,8 @@ export class STTdComponent {
     NzIconDirective,
     NzMenuModule,
     STFilterComponent,
-    STTdComponent
+    STTdComponent,
+    DragDropModule
   ]
 })
 export class STComponent implements AfterViewInit, OnChanges {
@@ -330,6 +334,20 @@ export class STComponent implements AfterViewInit, OnChanges {
   @Input({ transform: booleanAttribute }) bordered = false;
   @Input() size!: 'small' | 'middle' | 'default';
   @Input() scroll: { x?: string | null; y?: string | null } = { x: null, y: null };
+  drag = input<STDragOptions | null, STDragOptions | boolean | string | null | undefined>(null, {
+    transform: v => {
+      const obj: STDragOptions | null = typeof v === 'object' ? v : booleanAttribute(v) ? {} : null;
+      if (obj == null) return null;
+
+      if (typeof obj.dropped !== 'function') {
+        obj.dropped = e => {
+          moveItemInArray(this._data, e.previousIndex, e.currentIndex);
+          this.cd();
+        };
+      }
+      return obj;
+    }
+  });
   @Input() singleSort?: STSingleSort | null;
   private _multiSort?: STMultiSort;
   @Input()

packages/abc/st/st.interfaces.ts

@@ -1,7 +1,8 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
-import { HttpHeaders, HttpParams } from '@angular/common/http';
-import { ElementRef, TemplateRef } from '@angular/core';
-import { Observable } from 'rxjs';
+import type { CdkDragDrop, CdkDragEnter, CdkDragExit, CdkDragSortEvent } from '@angular/cdk/drag-drop';
+import type { HttpHeaders, HttpParams } from '@angular/common/http';
+import type { ElementRef, TemplateRef } from '@angular/core';
+import type { Observable } from 'rxjs';
 
 import type { ThemeType } from '@ant-design/icons-angular';
 
@@ -1316,3 +1317,25 @@ export interface STOnCellResult {
   rowSpan?: number | null;
   colSpan?: number | null;
 }
+
+export interface STDragOptions {
+  /**
+   * Emits when the user drops an item inside the container, default: `moveItemInArray()`
+   */
+  dropped?: (e: CdkDragDrop<any, any, any>) => void;
+
+  /**
+   * Emits when the user has moved a new drag item into this container.
+   */
+  entered?: (e: CdkDragEnter<any>) => void;
+
+  /**
+   * Emits when the user removes an item from the container by dragging it into another container.
+   */
+  exited?: (e: CdkDragExit<any>) => void;
+
+  /**
+   * Emits as the user is swapping items while actively dragging.
+   */
+  sorted?: (e: CdkDragSortEvent<any>) => void;
+}

packages/theme/system/ng/_drag.less

@@ -0,0 +1,9 @@
+.cdk-drag {
+  &-preview {
+    display: table;
+  }
+
+  &-placeholder {
+    opacity: 0;
+  }
+}

packages/theme/system/ng/index.less

@@ -1,2 +1,3 @@
 @import './_preserve-white-spaces.less';
 @import './_form.less';
+@import './_drag.less';