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

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,24 @@
+/**
+ * 拖拽放置时的插入位置
+ *
+ * @export
+ * @enum {number}
+ */
+export declare enum GCT_DND_INSERT_POS {
+    /**
+     * 插入第一个
+     */
+    FIRST = "first",
+    /**
+     * 插入前
+     */
+    BEFORE = "before",
+    /**
+     * 插入后
+     */
+    AFTER = "after",
+    /**
+     * 插入最后
+     */
+    LAST = "last"
+}

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

@@ -0,0 +1,9 @@
+var GCT_DND_INSERT_POS = /* @__PURE__ */ ((GCT_DND_INSERT_POS2) => {
+  GCT_DND_INSERT_POS2["FIRST"] = "first";
+  GCT_DND_INSERT_POS2["BEFORE"] = "before";
+  GCT_DND_INSERT_POS2["AFTER"] = "after";
+  GCT_DND_INSERT_POS2["LAST"] = "last";
+  return GCT_DND_INSERT_POS2;
+})(GCT_DND_INSERT_POS || {});
+
+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;
+}

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

@@ -0,0 +1,47 @@
+import { IGctDndConfig } from './i-gct-dnd-config';
+import { IGctDndData } from './i-gct-dnd-data';
+/**
+ * 放置返回值数据
+ *
+ * @export
+ * @interface IGctDropResultData
+ */
+export interface IGctDropResultData {
+    /**
+     * 放置分组标识
+     *
+     * @type {string}
+     */
+    group: string;
+    /**
+     * 是否成功放置
+     *
+     * @type {boolean}
+     */
+    success: boolean;
+    /**
+     * 放置数据
+     *
+     * @type {IGctDndData}
+     */
+    data?: IGctDndData;
+    /**
+     * 额外携带放置配置，用于优化放置对比
+     *
+     * @type {IGctDndConfig}
+     */
+    cfg: IGctDndConfig;
+}
+/**
+ * 放置返回值
+ *
+ * @export
+ * @interface IGctDropResult
+ */
+export interface IGctDropResult {
+    /**
+     * 放置数据异步钩子
+     *
+     */
+    asyncDrop: () => Promise<IGctDropResultData>;
+}

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

@@ -0,0 +1,7 @@
+export type { IGctDndConfig } from './i-gct-dnd-config';
+export type { IGctDndData } from './i-gct-dnd-data';
+export type { IGctDndRenderItemOptions } from './i-gct-dnd-render-item-options';
+export type { IGctDragCollect } from './i-gct-drag-collect';
+export type { IGctDropCollect } from './i-gct-drop-collect';
+export type { IGctDragDndData } from './i-gct-drag-dnd-data';
+export type { IGctDropResult, IGctDropResultData } from './i-gct-drop-result';

package/es/utils/with-install.mjs

@@ -1,4 +1,3 @@
-"use strict";
 const withInstall = (component, alias) => {
   component.install = (app) => {
     const compName = component.name || component.displayName;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gct-paas/core-web",
-  "version": "0.1.4-dev.7",
+  "version": "0.1.4-dev.8",
   "type": "module",
   "description": "paas 平台网页端核心包",
   "main": "dist/index.min.cjs",
@@ -31,8 +31,9 @@
   "license": "MIT",
   "author": "gct",
   "scripts": {
-    "dev": "rollup -c -w --environment=NODE_ENV:development",
-    "build": "npm run lint && rollup -c --environment=NODE_ENV:production && vite build --mode production --config vite.config.ts",
+    "dev": "cross-env NODE_ENV=development vite build --watch --config vite.dev.config.ts",
+    "es:build": "vite build --config vite.dev.config.ts",
+    "build": "npm run lint && vite build --config vite.dev.config.ts && vite build --config vite.config.ts",
     "lint": "eslint src/",
     "publish:next": "npm run build && npm publish --access public --tag=next --registry=https://registry.npmjs.org/",
     "publish:dev": "npm run build && npm publish --access public --tag=dev --registry=https://registry.npmjs.org/",
@@ -44,20 +45,22 @@
     "gen-api:platform": "gct-paas gen-api --url=http://paas.paasdev.gct-paas.com --tag=platform -t ../cli/hbs-temp -o ./src/service/gct-platform && prettier './src/service/gct-platform' --write"
   },
   "dependencies": {
-    "@gct-paas/core": "0.1.4-dev.7",
-    "@gct-paas/scss": "0.1.4-dev.7",
+    "@ant-design/icons-vue": "^7.0.1",
+    "@gct-paas/core": "0.1.4-dev.8",
+    "@gct-paas/scss": "0.1.4-dev.8",
     "@monaco-editor/loader": "^1.7.0",
     "ant-design-vue": "3.2.20",
     "lodash-es": "^4.17.23",
     "monaco-editor": "^0.55.1",
     "vue": "3.5.27",
-    "vue3-colorpicker": "^2.3.0"
+    "vue3-colorpicker": "^2.3.0",
+    "vue3-dnd": "^2.1.0"
   },
   "devDependencies": {
-    "@gct-paas/build": "^0.1.4"
+    "@gct-paas/build": "^0.1.5-dev.6"
   },
   "peerDependencies": {
     "vue": "^3.x"
   },
-  "gitHead": "331b60348593f6afa0ccaa54fcdd52435b7876fa"
+  "gitHead": "bf7f4f9672c3906ec834e6d58b999ce78f7cad08"
 }