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

package/es/Event/utils/runGlobalByPage.d.ts

@@ -128,10 +128,6 @@ export declare const pageDataforJson: import('vue').Ref<{
     } | undefined;
     pageName?: string | undefined;
 }, {
-    pageStyle?: RuntimePageJson["pageStyle"];
-    pageConfig?: RuntimePageJson["pageConfig"];
-    pageName?: string;
-} | {
     pageStyle?: {
         position?: string | undefined;
         top?: string | undefined;
@@ -244,6 +240,10 @@ export declare const pageDataforJson: import('vue').Ref<{
         hasFooter?: boolean | undefined;
     } | undefined;
     pageName?: string | undefined;
+} | {
+    pageStyle?: RuntimePageJson["pageStyle"];
+    pageConfig?: RuntimePageJson["pageConfig"];
+    pageName?: string;
 }>;
 /**页面信息 */
 export declare const getPageTitle: Readonly<import('vue').Ref<string | undefined, string | undefined>>;

package/es/Event/utils/runGlobalByPage.mjs

@@ -1,8 +1,8 @@
 import { useCreateAppredis } from "./appRedis.mjs";
 import { verificationData } from "./verificationVar.mjs";
 import { usePermissionStore } from "@gct-paas/core";
-import "@gct-paas/schema";
 import { nextTick, onActivated, onBeforeUnmount, onMounted, ref, toRef } from "vue";
+import "@gct-paas/schema";
 //#region src/Event/utils/runGlobalByPage.ts
 var PageTypeEnum = /* @__PURE__ */ function(PageTypeEnum) {
 	/** WEB */

package/es/controller/design-render/design-render.controller.d.ts

@@ -4,7 +4,7 @@ export declare class DesignRenderController implements IDesignRenderController {
     state: IDesignRenderState;
     prefix: string;
     preview: boolean;
-    readonly item: Map<string, IDesignRenderBaseController<IDesignNodeData, import('../../interface').IDesignRenderBaseState>>;
+    readonly item: Map<string, IDesignRenderBaseController<IDesignNodeData, import('../..').IDesignRenderBaseState>>;
     protected nodes: IDesignNode<IDesignNodeData>[];
     protected tree: IDesignTreeItem[];
     setTree(tree: IDesignTreeItem[]): void;

package/es/hooks/useStorageRef.mjs

@@ -1,6 +1,6 @@
 import { GlobalParamEnum } from "../enums/index.mjs";
-import { useLocalStorage } from "@vueuse/core";
 import { computed } from "vue";
+import { useLocalStorage } from "@vueuse/core";
 //#region src/hooks/useStorageRef.ts
 var GCT_SELECT_ID = useLocalStorage("GCT_APP_GlobalCache", {});
 /**

package/es/hooks/widgets/useFileAttrsHooks.d.ts

@@ -7,6 +7,12 @@ export declare const useAsyncFileAttrs: () => {
         acceptStr?: string | undefined;
         maxTagTextLength?: number | undefined;
     }, {
+        maxSize?: number | undefined;
+        maxCount?: number | undefined;
+        accept?: string[] | undefined;
+        acceptStr?: string | undefined;
+        maxTagTextLength?: number | undefined;
+    } | {
         /** 单个文件大小 */
         maxSize?: number;
         /** 最大上传数量 */
@@ -17,12 +23,6 @@ export declare const useAsyncFileAttrs: () => {
         acceptStr?: string;
         /** 最大字符显示个数 */
         maxTagTextLength?: number;
-    } | {
-        maxSize?: number | undefined;
-        maxCount?: number | undefined;
-        accept?: string[] | undefined;
-        acceptStr?: string | undefined;
-        maxTagTextLength?: number | undefined;
     }>;
     getmaxTagLength: ({ modelKey, fieldKey }: IObject) => Promise<void>;
 };

package/es/hooks/widgets/useFileAttrsHooks.mjs

@@ -1,6 +1,6 @@
 import { FieldSchema } from "../../utils/getFieldSchema.mjs";
-import { pick } from "lodash-es";
 import { ref } from "vue";
+import { pick } from "lodash-es";
 //#region src/hooks/widgets/useFileAttrsHooks.ts
 var useAsyncFileAttrs = () => {
 	const attrObj = ref({});

package/es/index.d.ts

@@ -1,8 +1,10 @@
-export * from './utils';
 export * from './components';
-export * from './Event';
 export * from './constant';
+export * from './Event';
 export * from './hooks';
+export type * from './interface';
 export * from './register';
+export * from './utils';
+export * from './modules/vue3-dnd';
 export declare function onInit(): void;
 export declare const deleteAndInsertArr: (arr: string[], deleteIndex: number, insertIndex: number) => void;

package/es/index.mjs

@@ -4,6 +4,10 @@ import { DateFormat, DatepickerRanges } from "./constant/data-format.mjs";
 import { ControllerType, DesignRenderViewPrefix, RenderNodeType } from "./constant/index.mjs";
 import { RenderNodeRegister } from "./register/node/node.register.mjs";
 import "./register/index.mjs";
+import HandwritingPad_default from "./components/HandwritingPad.vue.mjs";
+import "./components/index.mjs";
+import { useGctSelect } from "./hooks/useStorageRef.mjs";
+import { Globals, PageTypeEnum, formMap, getPageTitle, getPremission, globalVarCaches, pageDataforJson, pageGlobaVariables, setFormData } from "./Event/utils/runGlobalByPage.mjs";
 import { calculate, identify } from "./utils/expression/index.mjs";
 import { transformPropsField } from "./utils/field-attrs/index.mjs";
 import { RenderPluginPgkUtil } from "./utils/render-plugin-pkg-util/render-plugin-pkg-util.mjs";
@@ -14,23 +18,22 @@ import { cacheAdapter } from "./utils/cacheAdapter.mjs";
 import { getRefInfoId } from "./utils/get-ref-data.mjs";
 import { useGetBodyBySearch } from "./utils/search/search-hooks.mjs";
 import { defaultValMap } from "./utils/search/search-default-value.mjs";
-import { useGctSelect } from "./hooks/useStorageRef.mjs";
-import { Globals, PageTypeEnum, formMap, getPageTitle, getPremission, globalVarCaches, pageDataforJson, pageGlobaVariables, setFormData } from "./Event/utils/runGlobalByPage.mjs";
+import { getIExp, getIKeywordFieldKeys, getQueryDateByKeyWord, getQuerySort, useQueryfilter } from "./utils/search/listhook.mjs";
+import { is, isArray, isBoolean, isDate, isDef, isElement, isEmpty, isEmptyStr, isFunction, isMap, isNull, isNullAndUnDef, isNullOrUnDef, isNumber, isObject, isPromise, isRegExp, isString, isUnDef, isUrl, isWindow } from "./utils/is.mjs";
+import { emptyValueDisplay } from "./utils/field-empty-value.mjs";
+import "./utils/index.mjs";
 import { Context, Events, GctComponent } from "./Event/baseEvent.mjs";
 import { calculateDepResult, insetDep } from "./Event/Dependency/controller.mjs";
 import { useDisplayRuleColumnByStyles, useDisplayRuleOptions, useVisibileByRuleHook } from "./Event/Dependency/displayRule.mjs";
 import { dependencyToShow, dependencyToShowSync, tableWidgetByDept, tableWidgetToShow, useDependencyToShow, useDependencyToShowList } from "./Event/Dependency/useDependencyToShow.mjs";
 import { useDependency, useDependencyByRequired } from "./Event/Dependency/useDependency.mjs";
 import "./Event/index.mjs";
-import { getIExp, getIKeywordFieldKeys, getQueryDateByKeyWord, getQuerySort, useQueryfilter } from "./utils/search/listhook.mjs";
-import { is, isArray, isBoolean, isDate, isDef, isElement, isEmpty, isEmptyStr, isFunction, isMap, isNull, isNullAndUnDef, isNullOrUnDef, isNumber, isObject, isPromise, isRegExp, isString, isUnDef, isUrl, isWindow } from "./utils/is.mjs";
-import { emptyValueDisplay } from "./utils/field-empty-value.mjs";
-import "./utils/index.mjs";
-import HandwritingPad_default from "./components/HandwritingPad.vue.mjs";
-import "./components/index.mjs";
 import { useDesignRenderController } from "./hooks/use-design-render-controller/use-design-render-controller.mjs";
 import { useAsyncFileAttrs } from "./hooks/widgets/useFileAttrsHooks.mjs";
 import "./hooks/index.mjs";
+import { Vue3DndDraggableItem } from "./modules/vue3-dnd/components/vue3-dnd-draggable-item/vue3-dnd-draggable-item.mjs";
+import { Vue3DndDraggable } from "./modules/vue3-dnd/components/vue3-dnd-draggable/vue3-dnd-draggable.mjs";
+import "./modules/vue3-dnd/index.mjs";
 //#region src/index.ts
 function onInit() {
 	if (!_gct.register.render) _gct.register.render = new RenderRegister();
@@ -45,4 +48,4 @@ var deleteAndInsertArr = (arr, deleteIndex, insertIndex) => {
 	arr.splice(insertIndex, 0, deletedElement);
 };
 //#endregion
-export { Context, ControllerType, DESIGN_DATA_KEY_TAG, DESIGN_TYPE, DateFormat, DateRangeMap, DatepickerRanges, DesignItemAttribute, DesignRenderViewPrefix, Events, FieldSchema, GctComponent, Globals, HandwritingPad_default as HandwritingPad, PageTypeEnum, RenderNodeRegister, RenderNodeType, RenderPluginPgkUtil, RenderRegister, addDataByForm, cacheAdapter, calculate, calculateDepResult, defaultValMap, deleteAndInsertArr, dependencyToShow, dependencyToShowSync, emptyValueDisplay, formMap, getDefaultDate, getDisabledDate, getIExp, getIKeywordFieldKeys, getMobileDateRange, getPageTitle, getPremission, getQueryDateByKeyWord, getQuerySort, getRefInfoId, globalVarCaches, identify, initFieldWidgetRuntime, insetDep, is, isArray, isBoolean, isDate, isDef, isElement, isEmpty, isEmptyStr, isFunction, isMap, isNull, isNullAndUnDef, isNullOrUnDef, isNumber, isObject, isPromise, isRegExp, isString, isUnDef, isUrl, isWindow, onInit, pageDataforJson, pageGlobaVariables, schemaToStyle, setDataByForm, setFormData, tableWidgetByDept, tableWidgetToShow, transSelectData, transformData, transformDataToDict, transformPropsField, transformSourceData, useAsyncFileAttrs, useDependency, useDependencyByRequired, useDependencyToShow, useDependencyToShowList, useDesignRenderController, useDisplayRuleColumnByStyles, useDisplayRuleOptions, useGctSelect, useGetBodyBySearch, useQueryfilter, useStyle, useVisibileByRuleHook };
+export { Context, ControllerType, DESIGN_DATA_KEY_TAG, DESIGN_TYPE, DateFormat, DateRangeMap, DatepickerRanges, DesignItemAttribute, DesignRenderViewPrefix, Events, FieldSchema, GctComponent, Globals, HandwritingPad_default as HandwritingPad, PageTypeEnum, RenderNodeRegister, RenderNodeType, RenderPluginPgkUtil, RenderRegister, Vue3DndDraggable, Vue3DndDraggableItem, addDataByForm, cacheAdapter, calculate, calculateDepResult, defaultValMap, deleteAndInsertArr, dependencyToShow, dependencyToShowSync, emptyValueDisplay, formMap, getDefaultDate, getDisabledDate, getIExp, getIKeywordFieldKeys, getMobileDateRange, getPageTitle, getPremission, getQueryDateByKeyWord, getQuerySort, getRefInfoId, globalVarCaches, identify, initFieldWidgetRuntime, insetDep, is, isArray, isBoolean, isDate, isDef, isElement, isEmpty, isEmptyStr, isFunction, isMap, isNull, isNullAndUnDef, isNullOrUnDef, isNumber, isObject, isPromise, isRegExp, isString, isUnDef, isUrl, isWindow, onInit, pageDataforJson, pageGlobaVariables, schemaToStyle, setDataByForm, setFormData, tableWidgetByDept, tableWidgetToShow, transSelectData, transformData, transformDataToDict, transformPropsField, transformSourceData, useAsyncFileAttrs, useDependency, useDependencyByRequired, useDependencyToShow, useDependencyToShowList, useDesignRenderController, useDisplayRuleColumnByStyles, useDisplayRuleOptions, useGctSelect, useGetBodyBySearch, useQueryfilter, useStyle, useVisibileByRuleHook };

package/es/modules/vue3-dnd/components/vue3-dnd-draggable/vue3-dnd-draggable.css

@@ -0,0 +1,73 @@
+@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-vue3-dnd-draggable .list-enter-active,
+.gct-vue3-dnd-draggable .list-leave-active {
+  transition: all 0.5s ease;
+}
+.gct-vue3-dnd-draggable .list-enter-from,
+.gct-vue3-dnd-draggable .list-leave-to {
+  opacity: 0;
+  transform: translateX(30px);
+}

package/es/modules/vue3-dnd/components/vue3-dnd-draggable/vue3-dnd-draggable.d.ts

@@ -0,0 +1,70 @@
+import { PropType } from 'vue';
+import { IDragDataItem, IDropResult, IVue3DndDraggableOptions } from '../../interface/i-vue3-dnd-draggable-options';
+export declare const Vue3DndDraggable: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+    opts: {
+        type: PropType<IVue3DndDraggableOptions>;
+        default: () => {};
+    };
+    items: {
+        type: {
+            (arrayLength: number): IObject[];
+            (...items: IObject[]): IObject[];
+            new (arrayLength: number): IObject[];
+            new (...items: IObject[]): IObject[];
+            isArray(arg: any): arg is any[];
+            readonly prototype: any[];
+            from<T>(arrayLike: ArrayLike<T>): T[];
+            from<T, U>(arrayLike: ArrayLike<T>, mapfn: (v: T, k: number) => U, thisArg?: any): U[];
+            from<T>(iterable: Iterable<T> | ArrayLike<T>): T[];
+            from<T, U>(iterable: Iterable<T> | ArrayLike<T>, mapfn: (v: T, k: number) => U, thisArg?: any): U[];
+            of<T>(...items: T[]): T[];
+            readonly [Symbol.species]: ArrayConstructor;
+            fromAsync<T>(iterableOrArrayLike: AsyncIterable<T> | Iterable<T | PromiseLike<T>> | ArrayLike<T | PromiseLike<T>>): Promise<T[]>;
+            fromAsync<T, U>(iterableOrArrayLike: AsyncIterable<T> | Iterable<T> | ArrayLike<T>, mapFn: (value: Awaited<T>, index: number) => U, thisArg?: any): Promise<Awaited<U>[]>;
+        };
+        required: true;
+    };
+}>, {
+    ns: import('@gct-paas/core').Namespace;
+    groupId: string;
+    key: import('vue').ComputedRef<string>;
+    rootRef: import('vue').Ref<HTMLElement | null, HTMLElement | null>;
+    collect: import('vue').Ref<IObject, IObject>;
+    config: import('vue').ComputedRef<{
+        type: string;
+        direction: string;
+    } & IVue3DndDraggableOptions<unknown, IDropResult>>;
+    onAdd: (isBefore: boolean, id: string, data: unknown) => void;
+    onRemove: (_item: IDragDataItem<IObject>) => void;
+    onMove: (isBefore: boolean, id: string, moveId: string) => void;
+}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, ("add" | "move" | "remove")[], "add" | "move" | "remove", import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+    opts: {
+        type: PropType<IVue3DndDraggableOptions>;
+        default: () => {};
+    };
+    items: {
+        type: {
+            (arrayLength: number): IObject[];
+            (...items: IObject[]): IObject[];
+            new (arrayLength: number): IObject[];
+            new (...items: IObject[]): IObject[];
+            isArray(arg: any): arg is any[];
+            readonly prototype: any[];
+            from<T>(arrayLike: ArrayLike<T>): T[];
+            from<T, U>(arrayLike: ArrayLike<T>, mapfn: (v: T, k: number) => U, thisArg?: any): U[];
+            from<T>(iterable: Iterable<T> | ArrayLike<T>): T[];
+            from<T, U>(iterable: Iterable<T> | ArrayLike<T>, mapfn: (v: T, k: number) => U, thisArg?: any): U[];
+            of<T>(...items: T[]): T[];
+            readonly [Symbol.species]: ArrayConstructor;
+            fromAsync<T>(iterableOrArrayLike: AsyncIterable<T> | Iterable<T | PromiseLike<T>> | ArrayLike<T | PromiseLike<T>>): Promise<T[]>;
+            fromAsync<T, U>(iterableOrArrayLike: AsyncIterable<T> | Iterable<T> | ArrayLike<T>, mapFn: (value: Awaited<T>, index: number) => U, thisArg?: any): Promise<Awaited<U>[]>;
+        };
+        required: true;
+    };
+}>> & Readonly<{
+    onAdd?: ((...args: any[]) => any) | undefined;
+    onMove?: ((...args: any[]) => any) | undefined;
+    onRemove?: ((...args: any[]) => any) | undefined;
+}>, {
+    opts: IVue3DndDraggableOptions<unknown, IDropResult>;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;

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

@@ -0,0 +1,119 @@
+import { Vue3DndDraggableItem } from "../vue3-dnd-draggable-item/vue3-dnd-draggable-item.mjs";
+import './vue3-dnd-draggable.css';/* empty css                         */
+import { useNamespace } from "@gct-paas/core";
+import { TransitionGroup, computed, createVNode, defineComponent, isVNode, ref, toRefs } from "vue";
+import { merge } from "lodash-es";
+import { useDrop } from "vue3-dnd";
+import { createUUID } from "qx-util";
+//#region src/modules/vue3-dnd/components/vue3-dnd-draggable/vue3-dnd-draggable.tsx
+function _isSlot(s) {
+	return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !isVNode(s);
+}
+var Vue3DndDraggable = /* @__PURE__ */ defineComponent({
+	name: "Vue3DndDraggable",
+	props: {
+		opts: {
+			type: Object,
+			default: () => {
+				return {};
+			}
+		},
+		items: {
+			type: Array,
+			required: true
+		}
+	},
+	emits: [
+		"add",
+		"remove",
+		"move"
+	],
+	setup(props, { emit }) {
+		const ns = useNamespace("vue3-dnd-draggable");
+		const groupId = createUUID();
+		const rootRef = ref(null);
+		const { opts, items } = toRefs(props);
+		const key = computed(() => {
+			return config.value.key || "id";
+		});
+		const config = computed(() => {
+			return merge({
+				type: "Vue3DndDraggable",
+				direction: "vertical"
+			}, opts.value);
+		});
+		const [collect, drop] = useDrop({
+			accept: config.value.type,
+			collect(monitor) {
+				return {
+					handlerId: monitor.getHandlerId(),
+					canDrop: monitor.canDrop(),
+					isShallowOver: monitor.isOver({ shallow: true })
+				};
+			},
+			canDrop(item, monitor) {
+				if (props.items.length > 0) return false;
+				if (config.value.canDropContainer) return config.value.canDropContainer(item, monitor);
+				return true;
+			},
+			drop(item, monitor) {
+				if (config.value.dropContainer) return config.value.dropContainer(item, monitor);
+				if (monitor.canDrop() !== false) items.value.push(item);
+				return { group: groupId };
+			}
+		});
+		drop(rootRef);
+		const onAdd = (isBefore, id, data) => {
+			const i = items.value.findIndex((item) => item[key.value] === id);
+			items.value.splice(isBefore ? i : i + 1, 0, data);
+			emit("add", data, i);
+		};
+		const onRemove = (_item) => {
+			console.warn("onRemove 未实现", _item);
+		};
+		const onMove = (isBefore, id, moveId) => {
+			const index = items.value.findIndex((item) => item[key.value] === id);
+			const moveIndex = items.value.findIndex((item) => item[key.value] === moveId);
+			const item = items.value[moveIndex];
+			const newIndex = isBefore ? index : index + 1;
+			if (!isBefore && newIndex === moveIndex || isBefore && newIndex - 1 === moveIndex) return;
+			items.value.splice(newIndex, 0, item);
+			if (newIndex < moveIndex) items.value.splice(moveIndex + 1, 1);
+			else items.value.splice(moveIndex, 1);
+			emit("move", index, newIndex);
+		};
+		return {
+			ns,
+			groupId,
+			key,
+			rootRef,
+			collect,
+			config,
+			onAdd,
+			onRemove,
+			onMove
+		};
+	},
+	render() {
+		let _slot;
+		return createVNode("div", {
+			"ref": "rootRef",
+			"class": [this.ns.b(), this.ns.is("over", this.collect.isShallowOver)]
+		}, [createVNode(TransitionGroup, { "name": "list" }, _isSlot(_slot = this.items.map((item, index) => {
+			return createVNode(Vue3DndDraggableItem, {
+				"group": this.groupId,
+				"key": item[this.key] || index,
+				"index": index,
+				"item": item,
+				"config": this.config,
+				"add": this.onAdd,
+				"remove": this.onRemove,
+				"move": this.onMove
+			}, { default: (args) => {
+				return this.$slots.draggableItem?.(args);
+			} });
+		})) ? _slot : { default: () => [_slot] })]);
+	}
+});
+//#endregion
+export { Vue3DndDraggable };

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

@@ -0,0 +1,74 @@
+@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-vue3-dnd-draggable-item {
+  position: relative;
+}
+.gct-vue3-dnd-draggable-item.is-dragging .gct-vue3-dnd-draggable-preview {
+  display: inline;
+}
+
+.gct-vue3-dnd-draggable-item.is-dragging {
+  opacity: 0.3;
+}

package/es/modules/vue3-dnd/components/vue3-dnd-draggable-item/vue3-dnd-draggable-item.d.ts

@@ -0,0 +1,69 @@
+import { PropType } from 'vue';
+import { IDragDataItem, IVue3DndDraggableOptions } from '../../interface/i-vue3-dnd-draggable-options';
+export declare const Vue3DndDraggableItem: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+    group: {
+        type: StringConstructor;
+        required: true;
+    };
+    index: {
+        type: NumberConstructor;
+        required: true;
+    };
+    item: {
+        type: PropType<IObject>;
+        required: true;
+    };
+    config: {
+        type: PropType<IVue3DndDraggableOptions>;
+        required: true;
+    };
+    add: {
+        type: PropType<(isBefore: boolean, id: string, data: unknown) => void>;
+        required: true;
+    };
+    remove: {
+        type: PropType<(item: IDragDataItem<IObject>) => void>;
+        required: true;
+    };
+    move: {
+        type: PropType<(isBefore: boolean, id: string, moveId: string) => void>;
+        required: true;
+    };
+}>, {
+    ns: import('@gct-paas/core').Namespace;
+    elRef: import('vue').Ref<HTMLDivElement | null, HTMLDivElement | null>;
+    dragCollect: import('vue').Ref<IObject, IObject>;
+    dropCollect: import('vue').Ref<IObject, IObject>;
+    isBeforeHover: import('vue').Ref<boolean, boolean>;
+    drag: import('vue3-dnd').ConnectDragSource<import('vue3-dnd').DragSourceOptions>;
+    preview: import('vue3-dnd').ConnectDragPreview<import('vue3-dnd').DragPreviewOptions>;
+}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+    group: {
+        type: StringConstructor;
+        required: true;
+    };
+    index: {
+        type: NumberConstructor;
+        required: true;
+    };
+    item: {
+        type: PropType<IObject>;
+        required: true;
+    };
+    config: {
+        type: PropType<IVue3DndDraggableOptions>;
+        required: true;
+    };
+    add: {
+        type: PropType<(isBefore: boolean, id: string, data: unknown) => void>;
+        required: true;
+    };
+    remove: {
+        type: PropType<(item: IDragDataItem<IObject>) => void>;
+        required: true;
+    };
+    move: {
+        type: PropType<(isBefore: boolean, id: string, moveId: string) => void>;
+        required: true;
+    };
+}>> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;