@gct-paas/render 0.1.5-dev.3 → 0.1.5-dev.4

package/es/modules/vue3-dnd/components/vue3-dnd-draggable-item/vue3-dnd-draggable-item.mjs

@@ -0,0 +1,165 @@
+import './vue3-dnd-draggable-item.css';/* empty css                              */
+import { useNamespace } from "@gct-paas/core";
+import { createVNode, defineComponent, nextTick, onMounted, ref } from "vue";
+import { useDrag, useDrop } from "vue3-dnd";
+//#region src/modules/vue3-dnd/components/vue3-dnd-draggable-item/vue3-dnd-draggable-item.tsx
+var Vue3DndDraggableItem = /* @__PURE__ */ defineComponent({
+	name: "Vue3DndDraggableItem",
+	props: {
+		group: {
+			type: String,
+			required: true
+		},
+		index: {
+			type: Number,
+			required: true
+		},
+		item: {
+			type: Object,
+			required: true
+		},
+		config: {
+			type: Object,
+			required: true
+		},
+		add: {
+			type: Function,
+			required: true
+		},
+		remove: {
+			type: Function,
+			required: true
+		},
+		move: {
+			type: Function,
+			required: true
+		}
+	},
+	setup(props) {
+		const ns = useNamespace("vue3-dnd-draggable-item");
+		const elRef = ref(null);
+		const isBeforeHover = ref(false);
+		const { config } = props;
+		const [dragCollect, drag, preview] = useDrag({
+			type: config.type,
+			item: () => {
+				return {
+					group: props.group,
+					item: props.item
+				};
+			},
+			collect: (monitor) => {
+				return {
+					canDrag: monitor.canDrag(),
+					isDragging: monitor.isDragging()
+				};
+			},
+			canDrag(monitor) {
+				if (config.canDrag) return config.canDrag(monitor);
+				return true;
+			},
+			end(item, monitor) {
+				if (config.end) return config.end(item, monitor);
+				const result = monitor.getDropResult();
+				if (result && result.group !== props.group) props.remove(item);
+			},
+			options: config.dragOptions,
+			previewOptions: config.previewOptions
+		});
+		const [dropCollect, drop] = useDrop({
+			accept: config.type,
+			collect(monitor) {
+				return {
+					handlerId: monitor.getHandlerId(),
+					canDrop: monitor.canDrop(),
+					isShallowOver: monitor.isOver({ shallow: true }),
+					isOver: monitor.isOver()
+				};
+			},
+			hover(item, monitor) {
+				if (config.hover) return config.hover(item, monitor);
+				if (monitor.canDrop() === false || dragCollect.value.isDragging === true) return;
+				if (props.item === item.item) return;
+				if (monitor.isOver({ shallow: true })) {
+					const rect = elRef.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;
+					}
+					const key = config.key ?? "id";
+					if (item.group === props.group) props.move(isBeforeHover.value, props.item[key], item.item[key]);
+					else props.add(isBeforeHover.value, props.item[key], item.item);
+				}
+			},
+			canDrop(item, monitor) {
+				if (config.canDrop) return config.canDrop(item, monitor);
+				if (dragCollect.value.isDragging === true) return false;
+				return true;
+			},
+			drop(item, monitor) {
+				if (config.drop) return config.drop(item, monitor);
+				return { group: props.group };
+			},
+			options: config.dropOptions
+		});
+		if (props.config.isCustomHandle !== true && !props.config.handle) drag(elRef);
+		drop(elRef);
+		preview(elRef);
+		onMounted(() => {
+			nextTick(() => {
+				if (props.config.handle && elRef.value) {
+					const el = elRef.value.querySelector(props.config.handle);
+					if (el) drag(el);
+				}
+			});
+		});
+		return {
+			ns,
+			elRef,
+			dragCollect,
+			dropCollect,
+			isBeforeHover,
+			drag,
+			preview
+		};
+	},
+	render() {
+		return createVNode("div", {
+			"ref": "elRef",
+			"class": [
+				this.ns.b(),
+				this.ns.is("dragging", this.dragCollect.isDragging),
+				this.ns.is("shallow-over", this.dropCollect.isShallowOver)
+			]
+		}, [this.$slots.default?.({
+			item: this.item,
+			index: this.index,
+			isDragging: this.dragCollect.isDragging,
+			isShallowOver: this.dropCollect.isShallowOver,
+			isOver: this.dropCollect.isOver,
+			isBeforeHover: this.isBeforeHover,
+			isAfterHover: !this.isBeforeHover,
+			direction: this.config.direction,
+			drag: this.drag,
+			preview: this.preview
+		})]);
+	}
+});
+//#endregion
+export { Vue3DndDraggableItem };

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

@@ -0,0 +1,3 @@
+export { Vue3DndDraggableItem } from './components/vue3-dnd-draggable-item/vue3-dnd-draggable-item';
+export { Vue3DndDraggable } from './components/vue3-dnd-draggable/vue3-dnd-draggable';
+export type * from './interface';

package/es/modules/vue3-dnd/index.mjs

@@ -0,0 +1,2 @@
+import "./components/vue3-dnd-draggable-item/vue3-dnd-draggable-item.mjs";
+import "./components/vue3-dnd-draggable/vue3-dnd-draggable.mjs";

package/es/modules/vue3-dnd/interface/i-vue3-dnd-draggable-options.d.ts

@@ -0,0 +1,294 @@
+import { ConnectDragPreview, ConnectDragSource, DragPreviewOptions, DragSourceMonitor, DragSourceOptions, DropTargetMonitor, DropTargetOptions } from 'vue3-dnd';
+/**
+ * 拖拽绘制项参数
+ *
+ * @author zhanghanrui
+ * @date 2024-08-20 16:08:30
+ * @export
+ * @interface IRenderOptions
+ * @template O
+ */
+export interface IRenderOptions<O = unknown> {
+    /**
+     * 节点数据
+     *
+     * @author zhanghanrui
+     * @date 2024-08-20 16:08:42
+     * @type {O}
+     */
+    item: O;
+    /**
+     * 当前排序
+     *
+     * @author zhanghanrui
+     * @date 2024-08-20 16:08:47
+     * @type {number}
+     */
+    index: number;
+    /**
+     * 是否正在拖拽
+     *
+     * @author zhanghanrui
+     * @date 2024-08-20 16:08:53
+     * @type {boolean}
+     */
+    isDragging: boolean;
+    /**
+     * 是否悬浮于当前元素内，并且只有当前元素。多层悬浮时，以最底层触发此参数
+     *
+     * @author zhanghanrui
+     * @date 2024-08-20 16:08:00
+     * @type {boolean}
+     */
+    isShallowOver: boolean;
+    /**
+     * 是否在此元素上
+     *
+     * @author zhanghanrui
+     * @date 2024-08-20 16:08:57
+     * @type {boolean}
+     */
+    isOver: boolean;
+    /**
+     * 是否悬浮于此元素前半段（需要根据拖拽线方向，判断是上下还是左右）
+     *
+     * @author zhanghanrui
+     * @date 2024-08-20 16:08:07
+     * @type {boolean}
+     */
+    isBeforeHover: boolean;
+    /**
+     * 是否悬浮于此元素后半段（需要根据拖拽线方向，判断是上下还是左右）
+     *
+     * @author zhanghanrui
+     * @date 2024-08-20 16:08:29
+     * @type {boolean}
+     */
+    isAfterHover: boolean;
+    /**
+     * 放置线方向
+     *
+     * @author zhanghanrui
+     * @date 2024-08-20 16:08:34
+     * @type {('vertical' | 'horizontal')}
+     */
+    direction: 'vertical' | 'horizontal';
+    /**
+     * 自定义拖拽 handle 元素
+     *
+     * @author zhanghanrui
+     * @date 2024-08-20 17:08:35
+     * @type {ConnectDragSource<DragSourceOptions>}
+     */
+    drag?: ConnectDragSource<DragSourceOptions>;
+    /**
+     * 自定义拖拽预览
+     *
+     * @author zhanghanrui
+     * @date 2024-09-26 17:09:42
+     * @type {ConnectDragPreview<DragPreviewOptions>}
+     */
+    preview?: ConnectDragPreview<DragPreviewOptions>;
+}
+/**
+ * 放置结果回执
+ *
+ * @author zhanghanrui
+ * @date 2024-08-20 16:08:38
+ * @export
+ * @interface IDropResult
+ */
+export interface IDropResult {
+    /**
+     * 放置分组标识
+     *
+     * @author zhanghanrui
+     * @date 2024-08-20 16:08:52
+     * @type {string}
+     */
+    group: string;
+}
+/**
+ * 拖拽数据项
+ *
+ * @author zhanghanrui
+ * @date 2024-08-20 16:08:57
+ * @export
+ * @interface IDragDataItem
+ * @template O
+ */
+export interface IDragDataItem<O = unknown> {
+    /**
+     * 拖拽分组实例标识
+     *
+     * @author zhanghanrui
+     * @date 2024-08-20 16:08:03
+     * @type {string}
+     */
+    group: string;
+    /**
+     * 当前拖拽数据
+     *
+     * @author zhanghanrui
+     * @date 2024-08-20 16:08:22
+     * @type {O}
+     */
+    item: O;
+}
+/**
+ * 拖拽配置
+ *
+ * @author zhanghanrui
+ * @date 2024-08-20 14:08:48
+ * @export
+ * @interface IVue3DndDraggableOptions
+ * @template O
+ * @template R
+ */
+export interface IVue3DndDraggableOptions<O = unknown, R extends IDropResult = IDropResult> {
+    /**
+     * 拖拽分组类型（同类型下，可跨分组拖拽）
+     *
+     * @author zhanghanrui
+     * @date 2024-08-20 14:08:26
+     * @type {string}
+     */
+    type: string;
+    /**
+     * 放置线方向
+     *
+     * @author zhanghanrui
+     * @date 2024-08-20 14:08:09
+     * @type {('vertical' | 'horizontal')} 垂直方向 | 水平方向
+     */
+    direction: 'vertical' | 'horizontal';
+    /**
+     * 放置线偏移量
+     *
+     * @author zhanghanrui
+     * @date 2024-09-22 10:09:36
+     * @type {number}
+     */
+    offset?: number;
+    /**
+     * 自定义拖拽元素选择器
+     *
+     * @author zhanghanrui
+     * @date 2024-08-20 19:08:30
+     * @type {string}
+     */
+    handle?: string;
+    /**
+     * 项数据标识
+     *
+     * @default 'id'
+     * @author zhanghanrui
+     * @date 2024-09-22 10:09:43
+     * @type {string}
+     */
+    key?: string;
+    /**
+     * 是否自定义拖拽节点
+     *
+     * @default false
+     * @author zhanghanrui
+     * @date 2024-08-20 17:08:41
+     * @type {boolean}
+     */
+    isCustomHandle?: boolean;
+    /**
+     * 是否允许拖拽
+     *
+     * @author zhanghanrui
+     * @date 2024-08-20 14:08:35
+     * @template O
+     * @template R
+     * @param {DragSourceMonitor<IDragDataItem<O>, R>} monitor
+     * @return {*}  {boolean}
+     */
+    canDrag?(monitor: DragSourceMonitor<IDragDataItem<O>, R>): boolean;
+    /**
+     * 是否允许放置
+     *
+     * @author zhanghanrui
+     * @date 2024-08-20 14:08:45
+     * @template O
+     * @template R
+     * @param {O} item
+     * @param {DropTargetMonitor<IDragDataItem<O>, R>} monitor
+     * @return {*}  {boolean}
+     */
+    canDrop?(item: IDragDataItem<O>, monitor: DropTargetMonitor<IDragDataItem<O>, R>): boolean;
+    /**
+     * 是否允许放置容器内
+     *
+     * @author zhanghanrui
+     * @date 2024-08-20 15:08:22
+     * @param {O} item
+     * @param {DropTargetMonitor<IDragDataItem<O>, R>} monitor
+     * @return {*}  {boolean}
+     */
+    canDropContainer?(item: IDragDataItem<O>, monitor: DropTargetMonitor<IDragDataItem<O>, R>): boolean;
+    /**
+     * 放置钩子
+     *
+     * @author zhanghanrui
+     * @date 2024-08-20 14:08:36
+     * @param {O} item
+     * @param {DropTargetMonitor<IDragDataItem<O>, R>} monitor
+     * @return {*}  {(O | undefined)}
+     */
+    drop?(item: IDragDataItem<O>, monitor: DropTargetMonitor<IDragDataItem<O>, R>): R | undefined;
+    /**
+     * 放置容器钩子
+     *
+     * @author zhanghanrui
+     * @date 2024-08-20 15:08:26
+     * @param {O} item
+     * @param {DropTargetMonitor<IDragDataItem<O>, R>} monitor
+     * @return {*}  {(O | undefined)}
+     */
+    dropContainer?(item: IDragDataItem<O>, monitor: DropTargetMonitor<IDragDataItem<O>, R>): O | undefined;
+    /**
+     * 放置悬浮钩子
+     *
+     * @author zhanghanrui
+     * @date 2024-08-20 14:08:34
+     * @param {O} item
+     * @param {DropTargetMonitor<IDragDataItem<O>, R>} monitor
+     */
+    hover?(item: IDragDataItem<O>, monitor: DropTargetMonitor<IDragDataItem<O>, R>): void;
+    /**
+     * 拖拽结束
+     *
+     * @author zhanghanrui
+     * @date 2024-08-20 14:08:02
+     * @param {O} item
+     * @param {DragSourceMonitor<IDragDataItem<O>, R>} monitor
+     */
+    end?(item: IDragDataItem<O>, monitor: DragSourceMonitor<IDragDataItem<O>, R>): void;
+    /**
+     * 预览配置
+     *
+     * @author zhanghanrui
+     * @date 2024-08-20 14:08:41
+     * @type {DragPreviewOptions}
+     */
+    previewOptions?: DragPreviewOptions;
+    /**
+     * 拖拽配置
+     *
+     * @author zhanghanrui
+     * @date 2024-08-20 14:08:46
+     * @type {DragSourceOptions}
+     */
+    dragOptions?: DragSourceOptions;
+    /**
+     * 放置配置
+     *
+     * @author zhanghanrui
+     * @date 2024-08-20 14:08:58
+     * @type {DropTargetOptions}
+     */
+    dropOptions?: DropTargetOptions;
+}

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

@@ -0,0 +1 @@
+export type { IVue3DndDraggableOptions, IRenderOptions, IDragDataItem, } from './i-vue3-dnd-draggable-options';

package/es/utils/expression/index.mjs

@@ -1,8 +1,8 @@
 import { methods_exports } from "./regularExpression/methods.mjs";
 import { SYSTEM_VAR_PREFIX, functionMap, innerVarIds, operator2FuncMap } from "@gct-paas/core";
+import { useMemoize } from "@vueuse/core";
 import * as esprima from "esprima-next";
 import estraverse from "estraverse";
-import { useMemoize } from "@vueuse/core";
 //#region src/utils/expression/index.ts
 window._METHOD_DEBUG_ = methods_exports;
 var identify = useMemoize(_identify);

package/es/utils/expression/regularExpression/methods.mjs

@@ -1,12 +1,12 @@
 import { __exportAll } from "../../../_virtual/_rolldown/runtime.mjs";
 import dayjs from "dayjs";
+import BigNumberJS from "bignumber.js";
 import { isEqual, isNull, isUndefined } from "lodash-es";
 import utc from "dayjs/plugin/utc";
 import timezone from "dayjs/plugin/timezone";
 import quarterOfYear from "dayjs/plugin/quarterOfYear";
 import toArray from "dayjs/plugin/toArray";
 import isoWeek from "dayjs/plugin/isoWeek";
-import BigNumberJS from "bignumber.js";
 //#region src/utils/expression/regularExpression/methods.ts
 var methods_exports = /* @__PURE__ */ __exportAll({
 	ABS: () => ABS,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gct-paas/render",
-  "version": "0.1.5-dev.3",
+  "version": "0.1.5-dev.4",
   "type": "module",
   "description": "paas 平台网页端底包",
   "loader": "dist/loader.esm.min.js",
@@ -31,7 +31,7 @@
   "license": "MIT",
   "author": "gct",
   "dependencies": {
-    "@gct-paas/api": "^0.1.3",
+    "@gct-paas/api": "0.1.4-dev.0",
     "@vueuse/core": "^14.1.0",
     "axios": "^1.13.2",
     "bignumber.js": "^10.0.2",
@@ -43,10 +43,11 @@
     "qs": "^6.15.0",
     "qx-util": "^0.4.8",
     "vue": "^3.5.30",
-    "@gct-paas/core": "0.1.5-dev.3",
-    "@gct-paas/core-web": "0.1.5-dev.3",
-    "@gct-paas/scss": "0.1.5-dev.3",
-    "@gct-paas/schema": "0.1.5-dev.3"
+    "vue3-dnd": "^2.1.0",
+    "@gct-paas/schema": "0.1.5-dev.4",
+    "@gct-paas/core": "0.1.5-dev.4",
+    "@gct-paas/core-web": "0.1.5-dev.4",
+    "@gct-paas/scss": "0.1.5-dev.4"
   },
   "devDependencies": {
     "@types/escodegen": "^0.0.10",
@@ -54,17 +55,17 @@
     "@types/estree": "^1.0.8"
   },
   "peerDependencies": {
-    "@gct-paas/api": "^0.1.3",
+    "@gct-paas/api": "0.1.4-dev.0",
     "vue": ">=3",
-    "@gct-paas/core": "0.1.5-dev.3",
-    "@gct-paas/core-web": "0.1.5-dev.3",
-    "@gct-paas/schema": "0.1.5-dev.3",
-    "@gct-paas/scss": "0.1.5-dev.3"
+    "@gct-paas/core": "0.1.5-dev.4",
+    "@gct-paas/schema": "0.1.5-dev.4",
+    "@gct-paas/scss": "0.1.5-dev.4",
+    "@gct-paas/core-web": "0.1.5-dev.4"
   },
   "scripts": {
     "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",
+    "build": "npm run lint && vue-tsc --noEmit && 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/",