@gct-paas/core-web 0.1.4-dev.7 → 0.1.4-dev.9

package/es/modules/gct-dnd/components/gct-dnd-item/gct-dnd-item.css

@@ -0,0 +1,70 @@
+@charset "UTF-8";
+/* stylelint-disable scss/no-global-function-names */
+/* bem('block', 'element', 'modifier') => 'ibiz-block__element--modifier' */
+/**
+ * 定义 Block 块
+ * @param {String} $block - Block 块名称
+ * @example
+ *   @include b('button') {
+ *     padding: 10px;
+ *   }
+ */
+/**
+ * 定义 Element 元素
+ * @param {String|List} $element - Element 元素名称，支持单个或多个
+ * @example
+ *   @include b('button') {
+ *     @include e('text') {
+ *       color: #000;
+ *     }
+ *   }
+ *   // 或传入多个元素
+ *   @include b('button') {
+ *     @include e(('text', 'icon')) {
+ *       margin: 5px;
+ *     }
+ *   }
+ */
+/**
+ * 定义 Modifier 修饰符
+ * @param {String|List} $modifier - Modifier 修饰符名称，支持单个或多个
+ * @example
+ *   @include b('button') {
+ *     @include m('primary') {
+ *       background: blue;
+ *     }
+ *   }
+ *   // 或传入多个修饰符
+ *   @include b('button') {
+ *     @include m(('primary', 'large')) {
+ *       background: blue;
+ *       font-size: 16px;
+ *     }
+ *   }
+ */
+/**
+ * 定义状态选择器
+ * @param {String} $state - 状态名称
+ * @example
+ *   @include b('button') {
+ *     @include when('disabled') {
+ *       opacity: 0.5;
+ *     }
+ *   }
+ */
+/**
+ * 深色主题样式
+ * @param {String} $block - Block 块名称
+ * @example
+ *   @include dark('button') {
+ *     background: #333;
+ *     color: #fff;
+ *   }
+ */
+/* stylelint-disable scss/no-global-function-names */
+.gct-dnd-item {
+  background-color: rgb(var(--gct-gray-2));
+}
+.gct-dnd-item.is-dragging {
+  background-color: var(--gct-color-bg-3) !important;
+}

package/es/modules/gct-dnd/components/gct-dnd-item/gct-dnd-item.d.ts

@@ -0,0 +1,50 @@
+import { PropType } from 'vue';
+import { IGctDragCollect, IGctDndData, IGctDndConfig } from '../../interface';
+import { GCT_DND_INSERT_POS } from '../../constants';
+export declare const GctDndItem: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+    config: {
+        type: PropType<IGctDndConfig>;
+        required: true;
+    };
+    index: {
+        type: NumberConstructor;
+        required: true;
+    };
+    data: {
+        type: PropType<IGctDndData>;
+        required: true;
+    };
+    last: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>, {
+    ns: import('@gct-paas/core').Namespace;
+    rootRef: import('vue').Ref<HTMLDivElement | null, HTMLDivElement | null>;
+    posState: import('vue').Ref<0 | 1 | -1, 0 | 1 | -1>;
+    collect: import('vue').Ref<IGctDragCollect, IGctDragCollect>;
+    onDrop: (insertPos: GCT_DND_INSERT_POS, data: IGctDndData) => void;
+    drag: import('vue3-dnd').ConnectDragSource<import('vue3-dnd').DragSourceOptions>;
+}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, "drop"[], "drop", import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+    config: {
+        type: PropType<IGctDndConfig>;
+        required: true;
+    };
+    index: {
+        type: NumberConstructor;
+        required: true;
+    };
+    data: {
+        type: PropType<IGctDndData>;
+        required: true;
+    };
+    last: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>> & Readonly<{
+    onDrop?: ((...args: any[]) => any) | undefined;
+}>, {
+    last: boolean;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+export default GctDndItem;

package/es/modules/gct-dnd/components/gct-dnd-item/gct-dnd-item.mjs

@@ -0,0 +1,239 @@
+import { defineComponent, createVNode, ref, inject } from 'vue';
+import { useNamespace } from '@gct-paas/core';
+import { useDrag, useDrop } from 'vue3-dnd';
+import { cloneDeep } from 'lodash-es';
+import { GCT_DND_INSERT_POS } from '../../constants/index.mjs';
+import './gct-dnd-item.css';/* empty css                   */
+
+const GctDndItem = /* @__PURE__ */ defineComponent({
+  name: 'GctDndItem',
+  props: {
+    config: {
+      type: Object,
+      required: true
+    },
+    // 数据所在位置下标
+    index: {
+      type: Number,
+      required: true
+    },
+    // 当前项数据
+    data: {
+      type: Object,
+      required: true
+    },
+    last: {
+      type: Boolean,
+      default: false
+    }
+  },
+  emits: ['drop'],
+  setup(props, {
+    emit
+  }) {
+    const {
+      config
+    } = props;
+    const ns = useNamespace('dnd-item');
+    const rootRef = ref(null);
+    const isBeforeHover = ref(false);
+    const dropLineState = inject('vue3-dnd-drop-line-state');
+    // 通过悬浮时计算，放置的位置
+    const posState = ref(-1);
+    // 拖放配置，暂时无用，主要利用内部机制，避免悬浮时容器触发了放置
+    // 拖拽配置
+    const [collect, drag, preview] = useDrag({
+      type: config.group,
+      item: () => {
+        return {
+          index: props.index,
+          id: props.data.id,
+          data: props.data,
+          group: config.group,
+          mode: config.mode ?? 'move',
+          tagMap: config.tagMap ?? {},
+          types: []
+        };
+      },
+      collect: monitor => {
+        return {
+          canDrag: monitor.canDrag(),
+          isDragging: monitor.isDragging()
+        };
+      },
+      canDrag() {
+        if (config.isDrag === false) {
+          return false;
+        }
+        if (config.canDrag) {
+          return config.canDrag(props.data);
+        }
+        return true;
+      },
+      end: async (_, monitor) => {
+        const result = monitor.getDropResult();
+        if (result && result.asyncDrop) {
+          const res = await result.asyncDrop();
+          if (res.success === true && res.data) {
+            if (config.end) {
+              config.end(_, res);
+            }
+            if (config.add) {
+              config.add(res.data);
+            }
+            console.debug('drop success');
+          }
+        }
+      }
+    });
+    if (props.config.isDrop !== true) {
+      // eslint-disable-next-line @typescript-eslint/no-unused-vars
+      const [_, drop] = useDrop({
+        accept: config.group,
+        canDrop() {
+          return false;
+        }
+      });
+      drop(rootRef);
+    } else {
+      const [dropCollect, drop] = useDrop({
+        accept: config.group,
+        collect(monitor) {
+          return {
+            handlerId: monitor.getHandlerId(),
+            isOver: monitor.isOver(),
+            canDrop: monitor.canDrop(),
+            isShallowOver: monitor.isOver({
+              shallow: true
+            })
+          };
+        },
+        canDrop(item, monitor) {
+          if (collect.value.isDragging === true) {
+            return false;
+          }
+          return item.id !== props.data.id && monitor.isOver({
+            shallow: true
+          });
+        },
+        hover(_item, monitor) {
+          if (monitor.canDrop() === false) {
+            return;
+          }
+          const isOver = monitor.isOver({
+            shallow: true
+          });
+          if (isOver) {
+            const rect = rootRef.value.getBoundingClientRect();
+            const offset = monitor.getClientOffset();
+            // 放置线计算偏移量
+            const dropOffset = config.offset ?? 0;
+            let difference = 0;
+            if (config.direction === 'vertical') {
+              const {
+                top,
+                height
+              } = rect;
+              const {
+                y
+              } = offset;
+              const half = height / 2;
+              difference = y - top - half;
+              // 小于偏移量，则不处理
+              if (Math.abs(difference) < dropOffset) {
+                return;
+              }
+              if (difference < 0) {
+                isBeforeHover.value = true;
+              } else {
+                isBeforeHover.value = false;
+              }
+            } else if (config.direction === 'horizontal') {
+              const {
+                left,
+                width
+              } = rect;
+              const {
+                x
+              } = offset;
+              const half = width / 2;
+              difference = x - left - half;
+              // 小于偏移量，则不处理
+              if (Math.abs(difference) < dropOffset) {
+                return;
+              }
+              if (difference < 0) {
+                isBeforeHover.value = true;
+              } else {
+                isBeforeHover.value = false;
+              }
+            }
+            dropLineState.activeKey = props.data.id;
+            dropLineState.isBeforeHover = isBeforeHover.value;
+          } else {
+            dropLineState.activeKey = '';
+          }
+        },
+        drop: (item, monitor) => {
+          // 一旦放置，操控线的激活项就置空
+          dropLineState.activeKey = '';
+          if (dropCollect.value.isShallowOver !== true || monitor.canDrop() === false) {
+            return;
+          }
+          const callback = async () => {
+            let data = item.data;
+            if (config.drop) {
+              data = await config.drop(item);
+              if (!data) {
+                return {
+                  group: config.group,
+                  cfg: cloneDeep(props.config),
+                  success: false
+                };
+              }
+            }
+            onDrop(isBeforeHover.value ? GCT_DND_INSERT_POS.BEFORE : GCT_DND_INSERT_POS.AFTER, data);
+            return {
+              group: config.group,
+              success: true,
+              cfg: cloneDeep(props.config),
+              data
+            };
+          };
+          return {
+            asyncDrop: callback
+          };
+        }
+      });
+      drop(rootRef);
+    }
+    if (!config.handle && config.isDrag !== false) {
+      drag(rootRef);
+    }
+    preview(rootRef);
+    function onDrop(insertPos, data) {
+      emit('drop', insertPos, data);
+    }
+    return {
+      ns,
+      rootRef,
+      posState,
+      collect,
+      onDrop,
+      drag
+    };
+  },
+  render() {
+    const itemProps = {
+      index: this.index,
+      data: this.data,
+      drag: this.drag
+    };
+    return createVNode("div", {
+      "ref": "rootRef",
+      "class": [this.ns.b(), this.ns.is('dragging', this.collect.isDragging), this.ns.is('not-drag', this.collect.canDrag === false)]
+    }, [this.$slots.default?.(itemProps)]);
+  }
+});
+
+export { GctDndItem };

package/es/modules/gct-dnd/constants/index.d.ts

@@ -0,0 +1,22 @@
+/**
+ * 拖拽放置时的插入位置
+ */
+export declare const GCT_DND_INSERT_POS: {
+    /**
+     * 插入第一个
+     */
+    readonly FIRST: "first";
+    /**
+     * 插入前
+     */
+    readonly BEFORE: "before";
+    /**
+     * 插入后
+     */
+    readonly AFTER: "after";
+    /**
+     * 插入最后
+     */
+    readonly LAST: "last";
+};
+export type GCT_DND_INSERT_POS = (typeof GCT_DND_INSERT_POS)[keyof typeof GCT_DND_INSERT_POS];

package/es/modules/gct-dnd/constants/index.mjs

@@ -0,0 +1,20 @@
+const GCT_DND_INSERT_POS = {
+  /**
+   * 插入第一个
+   */
+  FIRST: "first",
+  /**
+   * 插入前
+   */
+  BEFORE: "before",
+  /**
+   * 插入后
+   */
+  AFTER: "after",
+  /**
+   * 插入最后
+   */
+  LAST: "last"
+};
+
+export { GCT_DND_INSERT_POS };

package/es/modules/gct-dnd/index.d.ts

@@ -0,0 +1,5 @@
+export { GctDndContainer } from './components/gct-dnd-container/gct-dnd-container';
+export { GctDndDropLine } from './components/gct-dnd-drop-line/gct-dnd-drop-line';
+export { GctDndItem } from './components/gct-dnd-item/gct-dnd-item';
+export { GCT_DND_INSERT_POS } from './constants';
+export type * from './interface';

package/es/modules/gct-dnd/interface/i-gct-dnd-config.d.ts

@@ -0,0 +1,101 @@
+import { GCT_DND_INSERT_POS } from '../constants';
+import { IGctDndData } from './i-gct-dnd-data';
+import { IGctDragDndData } from './i-gct-drag-dnd-data';
+import { IGctDropResultData } from './i-gct-drop-result';
+/**
+ * 拖拽配置
+ *
+ * @export
+ * @interface IGctDndConfig
+ */
+export interface IGctDndConfig {
+    /**
+     * 拖拽分组标识
+     *
+     * @type {string}
+     */
+    group: string;
+    /**
+     * 拖拽时额外携带的标签，可以用于做特殊区分
+     *
+     * @type {IObject}
+     */
+    tagMap?: IObject;
+    /**
+     * 拖拽模式，默认移动
+     *
+     * @default 'move'
+     * @type {('copy' | 'move' | string)}
+     */
+    mode?: 'copy' | 'move' | string;
+    /**
+     * 自定义拖拽标识
+     *
+     * @type {string}
+     */
+    handle?: string;
+    /**
+     * 是否开启放置功能，默认 开启
+     *
+     * @default true
+     * @type {boolean}
+     */
+    isDrop?: boolean;
+    /**
+     * 是否开启拖拽功能，默认 开启
+     *
+     * @default true
+     * @type {boolean}
+     */
+    isDrag?: boolean;
+    /**
+     * 拖拽方向，默认水平方向
+     *
+     * @default 'horizontal'
+     * @type {('vertical' | 'horizontal')}
+     */
+    direction?: 'vertical' | 'horizontal';
+    /**
+     * 拖拽放置偏移量，用于控制放置区移动鼠标的交互优化
+     *
+     * @type {number}
+     */
+    offset?: number;
+    /**
+     * 拖入容器时，默认插入位置
+     *
+     * @default 'after'
+     * @type {('first' | 'last')}
+     */
+    insertPos?: GCT_DND_INSERT_POS;
+    /**
+     * 是否允许放置
+     *
+     */
+    canDrop?: (data: IGctDragDndData) => boolean;
+    /**
+     * 是否允许拖拽
+     *
+     */
+    canDrag?: (data: IGctDndData) => boolean;
+    /**
+     * 放置数据处理
+     *
+     */
+    drop?: (data: IGctDragDndData) => IGctDndData | null;
+    /**
+     * 放置数据处理
+     *
+     */
+    end?: (data: IGctDragDndData, res: IGctDropResultData) => void;
+    /**
+     * 新增
+     *
+     */
+    add?: (data: IGctDndData) => void;
+    /**
+     * 删除项
+     *
+     */
+    remove?: (data: IGctDndData) => void;
+}

package/es/modules/gct-dnd/interface/i-gct-dnd-data.d.ts

@@ -0,0 +1,14 @@
+/**
+ * 拖拽数据
+ *
+ * @export
+ * @interface IGctDndData
+ */
+export interface IGctDndData extends IObject {
+    /**
+     * 必须要有主键标识
+     *
+     * @type {string}
+     */
+    id: string;
+}

package/es/modules/gct-dnd/interface/i-gct-dnd-render-item-options.d.ts

@@ -0,0 +1,28 @@
+import { ConnectDragSource, DragSourceOptions } from 'vue3-dnd';
+/**
+ * 拖拽项绘制 props 参数
+ *
+ * @export
+ * @interface IGctDndRenderItemOptions
+ * @template T
+ */
+export interface IGctDndRenderItemOptions<T = IObject> {
+    /**
+     * 当前拖拽项开始拖拽时的索引
+     *
+     * @type {number}
+     */
+    index: number;
+    /**
+     * 拖拽数据
+     *
+     * @type {T}
+     */
+    data: T;
+    /**
+     * 设置拖拽项的 DOM 元素
+     *
+     * @type {ConnectDragSource<DragSourceOptions>}
+     */
+    drag: ConnectDragSource<DragSourceOptions>;
+}

package/es/modules/gct-dnd/interface/i-gct-drag-collect.d.ts

@@ -0,0 +1,24 @@
+/**
+ * 拖拽时状态
+ *
+ * @export
+ * @interface IGctDragCollect
+ */
+export interface IGctDragCollect {
+    /**
+     * 是否可以拖拽
+     *
+     * @author zhanghanrui
+     * @date 2024-07-05 15:07:20
+     * @type {boolean}
+     */
+    canDrag: boolean;
+    /**
+     * 是否正在拖拽
+     *
+     * @author zhanghanrui
+     * @date 2024-07-05 15:07:26
+     * @type {boolean}
+     */
+    isDragging: boolean;
+}

package/es/modules/gct-dnd/interface/i-gct-drag-dnd-data.d.ts

@@ -0,0 +1,51 @@
+import { IGctDndData } from './i-gct-dnd-data';
+/**
+ * 拖拽数据
+ *
+ * @export
+ * @interface IGctDragDndData
+ */
+export interface IGctDragDndData<T = IGctDndData> {
+    /**
+     * 当前数据标识，如果是新数据则主键为空
+     *
+     * @type {string}
+     */
+    id: string;
+    /**
+     * 拖拽分组实例标识
+     *
+     * @type {string}
+     */
+    group: string;
+    /**
+     * 拖拽项原位置索引
+     *
+     * @type {number}
+     */
+    index: number;
+    /**
+     * 当前拖拽数据
+     *
+     * @type {T}
+     */
+    data: T;
+    /**
+     * 数据模式
+     *
+     * @type {('create' | 'move' | string)} 新建 | 移动
+     */
+    mode: 'create' | 'move' | string;
+    /**
+     * 额外拖拽标识
+     *
+     * @type {IObject}
+     */
+    tagMap: IObject;
+    /**
+     * 包含自身 + 所有子的类型，目前主要用于拖拽限制
+     *
+     * @type {string[]}
+     */
+    types: string[];
+}

package/es/modules/gct-dnd/interface/i-gct-drop-collect.d.ts

@@ -0,0 +1,32 @@
+/**
+ * 放置时状态
+ *
+ * @export
+ * @interface IGctDropCollect
+ */
+export interface IGctDropCollect {
+    /**
+     * 拖拽元素标识
+     *
+     * @type {string}
+     */
+    handlerId: string;
+    /**
+     * 是否可以放置
+     *
+     * @type {boolean}
+     */
+    canDrop: boolean;
+    /**
+     * 是否只在单一元素放置
+     *
+     * @type {boolean}
+     */
+    isShallowOver: boolean;
+    /**
+     * 是否放置中
+     *
+     * @type {boolean}
+     */
+    isOver: boolean;
+}