@gct-paas/render 0.1.5-dev.1 → 0.1.5-dev.10
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.min.css +1 -1
- package/dist/loader.esm.min.js +1 -1
- package/es/Event/Dependency/controller.mjs +2 -2
- package/es/Event/Dependency/displayRule.mjs +2 -2
- package/es/Event/Dependency/useDependency.mjs +2 -2
- package/es/Event/baseEvent.d.ts +4 -4
- package/es/Event/baseEvent.mjs +5 -5
- package/es/Event/bizServiceRequest.d.ts +4 -4
- package/es/Event/bizServiceRequest.mjs +19 -10
- package/es/Event/utils/runGlobalByPage.d.ts +4 -4
- package/es/Event/utils/runGlobalByPage.mjs +1 -1
- package/es/controller/design-render/design-render.controller.d.ts +1 -1
- package/es/hooks/useStorageRef.mjs +1 -1
- package/es/hooks/widgets/useFileAttrsHooks.d.ts +6 -6
- package/es/hooks/widgets/useFileAttrsHooks.mjs +1 -1
- package/es/index.d.ts +4 -3
- package/es/index.mjs +12 -15
- package/es/locale/sys/process.d.ts +8 -0
- package/es/locale/sys.d.ts +4 -0
- package/es/modules/vue3-dnd/components/vue3-dnd-draggable/vue3-dnd-draggable.css +73 -0
- package/es/modules/vue3-dnd/components/vue3-dnd-draggable/vue3-dnd-draggable.d.ts +70 -0
- package/es/modules/vue3-dnd/components/vue3-dnd-draggable/vue3-dnd-draggable.mjs +119 -0
- package/es/modules/vue3-dnd/components/vue3-dnd-draggable-item/vue3-dnd-draggable-item.css +74 -0
- package/es/modules/vue3-dnd/components/vue3-dnd-draggable-item/vue3-dnd-draggable-item.d.ts +69 -0
- package/es/modules/vue3-dnd/components/vue3-dnd-draggable-item/vue3-dnd-draggable-item.mjs +165 -0
- package/es/modules/vue3-dnd/index.d.ts +3 -0
- package/es/modules/vue3-dnd/index.mjs +2 -0
- package/es/modules/vue3-dnd/interface/i-vue3-dnd-draggable-options.d.ts +294 -0
- package/es/modules/vue3-dnd/interface/index.d.ts +1 -0
- package/es/utils/expression/index.mjs +1 -1
- package/es/utils/expression/regularExpression/methods.mjs +1 -1
- package/es/utils/field-empty-value.d.ts +6 -0
- package/es/utils/field-empty-value.mjs +17 -0
- package/es/utils/index.d.ts +2 -0
- package/es/utils/index.mjs +2 -0
- package/es/utils/is.d.ts +21 -0
- package/es/utils/is.mjs +70 -0
- package/es/utils/model-transformer.d.ts +1 -1
- package/es/utils/search/listhook.d.ts +6 -0
- package/es/utils/search/listhook.mjs +18 -1
- package/package.json +26 -26
package/es/Event/baseEvent.mjs
CHANGED
|
@@ -1,16 +1,16 @@
|
|
|
1
|
-
import { transformData, transformSourceData } from "../utils/model-transformer.mjs";
|
|
2
1
|
import { Globals } from "./utils/runGlobalByPage.mjs";
|
|
2
|
+
import { transformData, transformSourceData } from "../utils/model-transformer.mjs";
|
|
3
|
+
import "../utils/index.mjs";
|
|
3
4
|
import { $httpBizService, $request, BizService } from "./bizServiceRequest.mjs";
|
|
4
5
|
import { globalLoading } from "./utils/globalLoading.mjs";
|
|
5
6
|
import { ProcessAppRovedData } from "./utils/processRovedInfo.mjs";
|
|
6
|
-
import "../utils/index.mjs";
|
|
7
7
|
import { FormComponents, INNER_EVENT, t } from "@gct-paas/core";
|
|
8
8
|
import dayjs from "dayjs";
|
|
9
|
+
import { toRaw } from "vue";
|
|
10
|
+
import { useStyleTag } from "@vueuse/core";
|
|
11
|
+
import BigNumberJS from "bignumber.js";
|
|
9
12
|
import * as _ from "lodash-es";
|
|
10
13
|
import { cloneDeep, differenceBy } from "lodash-es";
|
|
11
|
-
import BigNumberJS from "bignumber.js";
|
|
12
|
-
import { useStyleTag } from "@vueuse/core";
|
|
13
|
-
import { toRaw } from "vue";
|
|
14
14
|
//#region src/Event/baseEvent.ts
|
|
15
15
|
var Events = class {
|
|
16
16
|
context;
|
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
import { BizServiceEnum, EntityModelCategoryEnum } from '@gct-paas/core';
|
|
2
2
|
import { AxiosRequestConfig } from 'axios';
|
|
3
3
|
export declare const BizService: {
|
|
4
|
-
post: (path: PathType, query?: IObject,
|
|
5
|
-
get: (path: PathType, query?: IObject,
|
|
6
|
-
put: (path: PathType, query?: IObject,
|
|
7
|
-
delete: (path: PathType, query?: IObject,
|
|
4
|
+
post: ((path: PathType, data?: IObject, query?: IObject, config?: AxiosRequestConfig) => Promise<unknown>) | ((path: PathType, query?: IObject, config?: AxiosRequestConfig) => Promise<unknown>);
|
|
5
|
+
get: ((path: PathType, data?: IObject, query?: IObject, config?: AxiosRequestConfig) => Promise<unknown>) | ((path: PathType, query?: IObject, config?: AxiosRequestConfig) => Promise<unknown>);
|
|
6
|
+
put: ((path: PathType, data?: IObject, query?: IObject, config?: AxiosRequestConfig) => Promise<unknown>) | ((path: PathType, query?: IObject, config?: AxiosRequestConfig) => Promise<unknown>);
|
|
7
|
+
delete: ((path: PathType, data?: IObject, query?: IObject, config?: AxiosRequestConfig) => Promise<unknown>) | ((path: PathType, query?: IObject, config?: AxiosRequestConfig) => Promise<unknown>);
|
|
8
8
|
};
|
|
9
9
|
/**
|
|
10
10
|
* 系统内置业务服务请求
|
|
@@ -1,17 +1,26 @@
|
|
|
1
1
|
import { BizServiceEnum, EntityModelCategoryEnum } from "@gct-paas/core";
|
|
2
2
|
//#region src/Event/bizServiceRequest.ts
|
|
3
|
-
var bizServiceRequestHook = (api
|
|
4
|
-
return
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
3
|
+
var bizServiceRequestHook = (api, method) => {
|
|
4
|
+
if (["post", "put"].includes(method)) return (path, data = {}, query = {}, config = {}) => {
|
|
5
|
+
return api({
|
|
6
|
+
modelKey: path.key,
|
|
7
|
+
bsKey: path.action,
|
|
8
|
+
modelCategory: path.modelCategory ?? EntityModelCategoryEnum.ENTITY
|
|
9
|
+
}, query, data, config);
|
|
10
|
+
};
|
|
11
|
+
else return (path, query = {}, config = {}) => {
|
|
12
|
+
return api({
|
|
13
|
+
modelKey: path.key,
|
|
14
|
+
bsKey: path.action,
|
|
15
|
+
modelCategory: path.modelCategory ?? EntityModelCategoryEnum.ENTITY
|
|
16
|
+
}, query, config);
|
|
17
|
+
};
|
|
9
18
|
};
|
|
10
19
|
var BizService = {
|
|
11
|
-
post: bizServiceRequestHook(_gct.api.apaas.modelComprehensive.postBizServiceModelCategoryModelKeyBsKey),
|
|
12
|
-
get: bizServiceRequestHook(_gct.api.apaas.modelComprehensive.getBizServiceModelCategoryModelKeyBsKey),
|
|
13
|
-
put: bizServiceRequestHook(_gct.api.apaas.modelComprehensive.putBizServiceModelCategoryModelKeyBsKey),
|
|
14
|
-
delete: bizServiceRequestHook(_gct.api.apaas.modelComprehensive.deleteBizServiceModelCategoryModelKeyBsKey)
|
|
20
|
+
post: bizServiceRequestHook(_gct.api.apaas.modelComprehensive.postBizServiceModelCategoryModelKeyBsKey, "post"),
|
|
21
|
+
get: bizServiceRequestHook(_gct.api.apaas.modelComprehensive.getBizServiceModelCategoryModelKeyBsKey, "get"),
|
|
22
|
+
put: bizServiceRequestHook(_gct.api.apaas.modelComprehensive.putBizServiceModelCategoryModelKeyBsKey, "put"),
|
|
23
|
+
delete: bizServiceRequestHook(_gct.api.apaas.modelComprehensive.deleteBizServiceModelCategoryModelKeyBsKey, "delete")
|
|
15
24
|
};
|
|
16
25
|
/**
|
|
17
26
|
* 系统内置业务服务请求
|
|
@@ -128,10 +128,6 @@ export declare const pageDataforJson: import('vue').Ref<{
|
|
|
128
128
|
} | undefined;
|
|
129
129
|
pageName?: string | undefined;
|
|
130
130
|
}, {
|
|
131
|
-
pageStyle?: RuntimePageJson["pageStyle"];
|
|
132
|
-
pageConfig?: RuntimePageJson["pageConfig"];
|
|
133
|
-
pageName?: string;
|
|
134
|
-
} | {
|
|
135
131
|
pageStyle?: {
|
|
136
132
|
position?: string | undefined;
|
|
137
133
|
top?: string | undefined;
|
|
@@ -244,6 +240,10 @@ export declare const pageDataforJson: import('vue').Ref<{
|
|
|
244
240
|
hasFooter?: boolean | undefined;
|
|
245
241
|
} | undefined;
|
|
246
242
|
pageName?: string | undefined;
|
|
243
|
+
} | {
|
|
244
|
+
pageStyle?: RuntimePageJson["pageStyle"];
|
|
245
|
+
pageConfig?: RuntimePageJson["pageConfig"];
|
|
246
|
+
pageName?: string;
|
|
247
247
|
}>;
|
|
248
248
|
/**页面信息 */
|
|
249
249
|
export declare const getPageTitle: Readonly<import('vue').Ref<string | undefined, string | undefined>>;
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
import { useCreateAppredis } from "./appRedis.mjs";
|
|
2
2
|
import { verificationData } from "./verificationVar.mjs";
|
|
3
3
|
import { usePermissionStore } from "@gct-paas/core";
|
|
4
|
-
import "@gct-paas/schema";
|
|
5
4
|
import { nextTick, onActivated, onBeforeUnmount, onMounted, ref, toRef } from "vue";
|
|
5
|
+
import "@gct-paas/schema";
|
|
6
6
|
//#region src/Event/utils/runGlobalByPage.ts
|
|
7
7
|
var PageTypeEnum = /* @__PURE__ */ function(PageTypeEnum) {
|
|
8
8
|
/** WEB */
|
|
@@ -4,7 +4,7 @@ export declare class DesignRenderController implements IDesignRenderController {
|
|
|
4
4
|
state: IDesignRenderState;
|
|
5
5
|
prefix: string;
|
|
6
6
|
preview: boolean;
|
|
7
|
-
readonly item: Map<string, IDesignRenderBaseController<IDesignNodeData, import('
|
|
7
|
+
readonly item: Map<string, IDesignRenderBaseController<IDesignNodeData, import('../..').IDesignRenderBaseState>>;
|
|
8
8
|
protected nodes: IDesignNode<IDesignNodeData>[];
|
|
9
9
|
protected tree: IDesignTreeItem[];
|
|
10
10
|
setTree(tree: IDesignTreeItem[]): void;
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { GlobalParamEnum } from "../enums/index.mjs";
|
|
2
|
-
import { useLocalStorage } from "@vueuse/core";
|
|
3
2
|
import { computed } from "vue";
|
|
3
|
+
import { useLocalStorage } from "@vueuse/core";
|
|
4
4
|
//#region src/hooks/useStorageRef.ts
|
|
5
5
|
var GCT_SELECT_ID = useLocalStorage("GCT_APP_GlobalCache", {});
|
|
6
6
|
/**
|
|
@@ -7,6 +7,12 @@ export declare const useAsyncFileAttrs: () => {
|
|
|
7
7
|
acceptStr?: string | undefined;
|
|
8
8
|
maxTagTextLength?: number | undefined;
|
|
9
9
|
}, {
|
|
10
|
+
maxSize?: number | undefined;
|
|
11
|
+
maxCount?: number | undefined;
|
|
12
|
+
accept?: string[] | undefined;
|
|
13
|
+
acceptStr?: string | undefined;
|
|
14
|
+
maxTagTextLength?: number | undefined;
|
|
15
|
+
} | {
|
|
10
16
|
/** 单个文件大小 */
|
|
11
17
|
maxSize?: number;
|
|
12
18
|
/** 最大上传数量 */
|
|
@@ -17,12 +23,6 @@ export declare const useAsyncFileAttrs: () => {
|
|
|
17
23
|
acceptStr?: string;
|
|
18
24
|
/** 最大字符显示个数 */
|
|
19
25
|
maxTagTextLength?: number;
|
|
20
|
-
} | {
|
|
21
|
-
maxSize?: number | undefined;
|
|
22
|
-
maxCount?: number | undefined;
|
|
23
|
-
accept?: string[] | undefined;
|
|
24
|
-
acceptStr?: string | undefined;
|
|
25
|
-
maxTagTextLength?: number | undefined;
|
|
26
26
|
}>;
|
|
27
27
|
getmaxTagLength: ({ modelKey, fieldKey }: IObject) => Promise<void>;
|
|
28
28
|
};
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { FieldSchema } from "../../utils/getFieldSchema.mjs";
|
|
2
|
-
import { pick } from "lodash-es";
|
|
3
2
|
import { ref } from "vue";
|
|
3
|
+
import { pick } from "lodash-es";
|
|
4
4
|
//#region src/hooks/widgets/useFileAttrsHooks.ts
|
|
5
5
|
var useAsyncFileAttrs = () => {
|
|
6
6
|
const attrObj = ref({});
|
package/es/index.d.ts
CHANGED
|
@@ -1,8 +1,9 @@
|
|
|
1
|
-
export * from './utils';
|
|
2
1
|
export * from './components';
|
|
3
|
-
export * from './Event';
|
|
4
2
|
export * from './constant';
|
|
3
|
+
export * from './Event';
|
|
5
4
|
export * from './hooks';
|
|
5
|
+
export type * from './interface';
|
|
6
6
|
export * from './register';
|
|
7
|
+
export * from './utils';
|
|
8
|
+
export * from './modules/vue3-dnd';
|
|
7
9
|
export declare function onInit(): void;
|
|
8
|
-
export declare const deleteAndInsertArr: (arr: string[], deleteIndex: number, insertIndex: number) => void;
|
package/es/index.mjs
CHANGED
|
@@ -4,6 +4,10 @@ import { DateFormat, DatepickerRanges } from "./constant/data-format.mjs";
|
|
|
4
4
|
import { ControllerType, DesignRenderViewPrefix, RenderNodeType } from "./constant/index.mjs";
|
|
5
5
|
import { RenderNodeRegister } from "./register/node/node.register.mjs";
|
|
6
6
|
import "./register/index.mjs";
|
|
7
|
+
import HandwritingPad_default from "./components/HandwritingPad.vue.mjs";
|
|
8
|
+
import "./components/index.mjs";
|
|
9
|
+
import { useGctSelect } from "./hooks/useStorageRef.mjs";
|
|
10
|
+
import { Globals, PageTypeEnum, formMap, getPageTitle, getPremission, globalVarCaches, pageDataforJson, pageGlobaVariables, setFormData } from "./Event/utils/runGlobalByPage.mjs";
|
|
7
11
|
import { calculate, identify } from "./utils/expression/index.mjs";
|
|
8
12
|
import { transformPropsField } from "./utils/field-attrs/index.mjs";
|
|
9
13
|
import { RenderPluginPgkUtil } from "./utils/render-plugin-pkg-util/render-plugin-pkg-util.mjs";
|
|
@@ -14,33 +18,26 @@ import { cacheAdapter } from "./utils/cacheAdapter.mjs";
|
|
|
14
18
|
import { getRefInfoId } from "./utils/get-ref-data.mjs";
|
|
15
19
|
import { useGetBodyBySearch } from "./utils/search/search-hooks.mjs";
|
|
16
20
|
import { defaultValMap } from "./utils/search/search-default-value.mjs";
|
|
17
|
-
import {
|
|
18
|
-
import {
|
|
21
|
+
import { getIExp, getIKeywordFieldKeys, getQueryDateByKeyWord, getQuerySort, useQueryfilter } from "./utils/search/listhook.mjs";
|
|
22
|
+
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";
|
|
23
|
+
import { emptyValueDisplay } from "./utils/field-empty-value.mjs";
|
|
24
|
+
import "./utils/index.mjs";
|
|
19
25
|
import { Context, Events, GctComponent } from "./Event/baseEvent.mjs";
|
|
20
26
|
import { calculateDepResult, insetDep } from "./Event/Dependency/controller.mjs";
|
|
21
27
|
import { useDisplayRuleColumnByStyles, useDisplayRuleOptions, useVisibileByRuleHook } from "./Event/Dependency/displayRule.mjs";
|
|
22
28
|
import { dependencyToShow, dependencyToShowSync, tableWidgetByDept, tableWidgetToShow, useDependencyToShow, useDependencyToShowList } from "./Event/Dependency/useDependencyToShow.mjs";
|
|
23
29
|
import { useDependency, useDependencyByRequired } from "./Event/Dependency/useDependency.mjs";
|
|
24
30
|
import "./Event/index.mjs";
|
|
25
|
-
import { getIExp, getIKeywordFieldKeys, getQueryDateByKeyWord, useQueryfilter } from "./utils/search/listhook.mjs";
|
|
26
|
-
import "./utils/index.mjs";
|
|
27
|
-
import HandwritingPad_default from "./components/HandwritingPad.vue.mjs";
|
|
28
|
-
import "./components/index.mjs";
|
|
29
31
|
import { useDesignRenderController } from "./hooks/use-design-render-controller/use-design-render-controller.mjs";
|
|
30
32
|
import { useAsyncFileAttrs } from "./hooks/widgets/useFileAttrsHooks.mjs";
|
|
31
33
|
import "./hooks/index.mjs";
|
|
34
|
+
import { Vue3DndDraggableItem } from "./modules/vue3-dnd/components/vue3-dnd-draggable-item/vue3-dnd-draggable-item.mjs";
|
|
35
|
+
import { Vue3DndDraggable } from "./modules/vue3-dnd/components/vue3-dnd-draggable/vue3-dnd-draggable.mjs";
|
|
36
|
+
import "./modules/vue3-dnd/index.mjs";
|
|
32
37
|
//#region src/index.ts
|
|
33
38
|
function onInit() {
|
|
34
39
|
if (!_gct.register.render) _gct.register.render = new RenderRegister();
|
|
35
40
|
else console.warn("渲染注册已存在,可能存在重复注册问题,请检查是否有重复引入渲染包的情况");
|
|
36
41
|
}
|
|
37
|
-
var deleteAndInsertArr = (arr, deleteIndex, insertIndex) => {
|
|
38
|
-
if (deleteIndex < 0 || deleteIndex >= arr.length || insertIndex < 0 || insertIndex > arr.length) {
|
|
39
|
-
console.log("下标超出数组范围");
|
|
40
|
-
return;
|
|
41
|
-
}
|
|
42
|
-
const deletedElement = arr.splice(deleteIndex, 1)[0];
|
|
43
|
-
arr.splice(insertIndex, 0, deletedElement);
|
|
44
|
-
};
|
|
45
42
|
//#endregion
|
|
46
|
-
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,
|
|
43
|
+
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, 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 };
|
|
@@ -0,0 +1,73 @@
|
|
|
1
|
+
@charset "UTF-8";
|
|
2
|
+
/* stylelint-disable scss/no-global-function-names */
|
|
3
|
+
/* bem('block', 'element', 'modifier') => 'ibiz-block__element--modifier' */
|
|
4
|
+
/**
|
|
5
|
+
* 定义 Block 块
|
|
6
|
+
* @param {String} $block - Block 块名称
|
|
7
|
+
* @example
|
|
8
|
+
* @include b('button') {
|
|
9
|
+
* padding: 10px;
|
|
10
|
+
* }
|
|
11
|
+
*/
|
|
12
|
+
/**
|
|
13
|
+
* 定义 Element 元素
|
|
14
|
+
* @param {String|List} $element - Element 元素名称,支持单个或多个
|
|
15
|
+
* @example
|
|
16
|
+
* @include b('button') {
|
|
17
|
+
* @include e('text') {
|
|
18
|
+
* color: #000;
|
|
19
|
+
* }
|
|
20
|
+
* }
|
|
21
|
+
* // 或传入多个元素
|
|
22
|
+
* @include b('button') {
|
|
23
|
+
* @include e(('text', 'icon')) {
|
|
24
|
+
* margin: 5px;
|
|
25
|
+
* }
|
|
26
|
+
* }
|
|
27
|
+
*/
|
|
28
|
+
/**
|
|
29
|
+
* 定义 Modifier 修饰符
|
|
30
|
+
* @param {String|List} $modifier - Modifier 修饰符名称,支持单个或多个
|
|
31
|
+
* @example
|
|
32
|
+
* @include b('button') {
|
|
33
|
+
* @include m('primary') {
|
|
34
|
+
* background: blue;
|
|
35
|
+
* }
|
|
36
|
+
* }
|
|
37
|
+
* // 或传入多个修饰符
|
|
38
|
+
* @include b('button') {
|
|
39
|
+
* @include m(('primary', 'large')) {
|
|
40
|
+
* background: blue;
|
|
41
|
+
* font-size: 16px;
|
|
42
|
+
* }
|
|
43
|
+
* }
|
|
44
|
+
*/
|
|
45
|
+
/**
|
|
46
|
+
* 定义状态选择器
|
|
47
|
+
* @param {String} $state - 状态名称
|
|
48
|
+
* @example
|
|
49
|
+
* @include b('button') {
|
|
50
|
+
* @include when('disabled') {
|
|
51
|
+
* opacity: 0.5;
|
|
52
|
+
* }
|
|
53
|
+
* }
|
|
54
|
+
*/
|
|
55
|
+
/**
|
|
56
|
+
* 深色主题样式
|
|
57
|
+
* @param {String} $block - Block 块名称
|
|
58
|
+
* @example
|
|
59
|
+
* @include dark('button') {
|
|
60
|
+
* background: #333;
|
|
61
|
+
* color: #fff;
|
|
62
|
+
* }
|
|
63
|
+
*/
|
|
64
|
+
/* stylelint-disable scss/no-global-function-names */
|
|
65
|
+
.gct-vue3-dnd-draggable .list-enter-active,
|
|
66
|
+
.gct-vue3-dnd-draggable .list-leave-active {
|
|
67
|
+
transition: all 0.5s ease;
|
|
68
|
+
}
|
|
69
|
+
.gct-vue3-dnd-draggable .list-enter-from,
|
|
70
|
+
.gct-vue3-dnd-draggable .list-leave-to {
|
|
71
|
+
opacity: 0;
|
|
72
|
+
transform: translateX(30px);
|
|
73
|
+
}
|
|
@@ -0,0 +1,70 @@
|
|
|
1
|
+
import { PropType } from 'vue';
|
|
2
|
+
import { IDragDataItem, IDropResult, IVue3DndDraggableOptions } from '../../interface/i-vue3-dnd-draggable-options';
|
|
3
|
+
export declare const Vue3DndDraggable: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
|
|
4
|
+
opts: {
|
|
5
|
+
type: PropType<IVue3DndDraggableOptions>;
|
|
6
|
+
default: () => {};
|
|
7
|
+
};
|
|
8
|
+
items: {
|
|
9
|
+
type: {
|
|
10
|
+
(arrayLength: number): IObject[];
|
|
11
|
+
(...items: IObject[]): IObject[];
|
|
12
|
+
new (arrayLength: number): IObject[];
|
|
13
|
+
new (...items: IObject[]): IObject[];
|
|
14
|
+
isArray(arg: any): arg is any[];
|
|
15
|
+
readonly prototype: any[];
|
|
16
|
+
from<T>(arrayLike: ArrayLike<T>): T[];
|
|
17
|
+
from<T, U>(arrayLike: ArrayLike<T>, mapfn: (v: T, k: number) => U, thisArg?: any): U[];
|
|
18
|
+
from<T>(iterable: Iterable<T> | ArrayLike<T>): T[];
|
|
19
|
+
from<T, U>(iterable: Iterable<T> | ArrayLike<T>, mapfn: (v: T, k: number) => U, thisArg?: any): U[];
|
|
20
|
+
of<T>(...items: T[]): T[];
|
|
21
|
+
readonly [Symbol.species]: ArrayConstructor;
|
|
22
|
+
fromAsync<T>(iterableOrArrayLike: AsyncIterable<T> | Iterable<T | PromiseLike<T>> | ArrayLike<T | PromiseLike<T>>): Promise<T[]>;
|
|
23
|
+
fromAsync<T, U>(iterableOrArrayLike: AsyncIterable<T> | Iterable<T> | ArrayLike<T>, mapFn: (value: Awaited<T>, index: number) => U, thisArg?: any): Promise<Awaited<U>[]>;
|
|
24
|
+
};
|
|
25
|
+
required: true;
|
|
26
|
+
};
|
|
27
|
+
}>, {
|
|
28
|
+
ns: import('@gct-paas/core').Namespace;
|
|
29
|
+
groupId: string;
|
|
30
|
+
key: import('vue').ComputedRef<string>;
|
|
31
|
+
rootRef: import('vue').Ref<HTMLElement | null, HTMLElement | null>;
|
|
32
|
+
collect: import('vue').Ref<IObject, IObject>;
|
|
33
|
+
config: import('vue').ComputedRef<{
|
|
34
|
+
type: string;
|
|
35
|
+
direction: string;
|
|
36
|
+
} & IVue3DndDraggableOptions<unknown, IDropResult>>;
|
|
37
|
+
onAdd: (isBefore: boolean, id: string, data: unknown) => void;
|
|
38
|
+
onRemove: (_item: IDragDataItem<IObject>) => void;
|
|
39
|
+
onMove: (isBefore: boolean, id: string, moveId: string) => void;
|
|
40
|
+
}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, ("add" | "move" | "remove")[], "add" | "move" | "remove", import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
|
|
41
|
+
opts: {
|
|
42
|
+
type: PropType<IVue3DndDraggableOptions>;
|
|
43
|
+
default: () => {};
|
|
44
|
+
};
|
|
45
|
+
items: {
|
|
46
|
+
type: {
|
|
47
|
+
(arrayLength: number): IObject[];
|
|
48
|
+
(...items: IObject[]): IObject[];
|
|
49
|
+
new (arrayLength: number): IObject[];
|
|
50
|
+
new (...items: IObject[]): IObject[];
|
|
51
|
+
isArray(arg: any): arg is any[];
|
|
52
|
+
readonly prototype: any[];
|
|
53
|
+
from<T>(arrayLike: ArrayLike<T>): T[];
|
|
54
|
+
from<T, U>(arrayLike: ArrayLike<T>, mapfn: (v: T, k: number) => U, thisArg?: any): U[];
|
|
55
|
+
from<T>(iterable: Iterable<T> | ArrayLike<T>): T[];
|
|
56
|
+
from<T, U>(iterable: Iterable<T> | ArrayLike<T>, mapfn: (v: T, k: number) => U, thisArg?: any): U[];
|
|
57
|
+
of<T>(...items: T[]): T[];
|
|
58
|
+
readonly [Symbol.species]: ArrayConstructor;
|
|
59
|
+
fromAsync<T>(iterableOrArrayLike: AsyncIterable<T> | Iterable<T | PromiseLike<T>> | ArrayLike<T | PromiseLike<T>>): Promise<T[]>;
|
|
60
|
+
fromAsync<T, U>(iterableOrArrayLike: AsyncIterable<T> | Iterable<T> | ArrayLike<T>, mapFn: (value: Awaited<T>, index: number) => U, thisArg?: any): Promise<Awaited<U>[]>;
|
|
61
|
+
};
|
|
62
|
+
required: true;
|
|
63
|
+
};
|
|
64
|
+
}>> & Readonly<{
|
|
65
|
+
onAdd?: ((...args: any[]) => any) | undefined;
|
|
66
|
+
onMove?: ((...args: any[]) => any) | undefined;
|
|
67
|
+
onRemove?: ((...args: any[]) => any) | undefined;
|
|
68
|
+
}>, {
|
|
69
|
+
opts: IVue3DndDraggableOptions<unknown, IDropResult>;
|
|
70
|
+
}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
|
|
@@ -0,0 +1,119 @@
|
|
|
1
|
+
import { Vue3DndDraggableItem } from "../vue3-dnd-draggable-item/vue3-dnd-draggable-item.mjs";
|
|
2
|
+
import './vue3-dnd-draggable.css';/* empty css */
|
|
3
|
+
import { useNamespace } from "@gct-paas/core";
|
|
4
|
+
import { TransitionGroup, computed, createVNode, defineComponent, isVNode, ref, toRefs } from "vue";
|
|
5
|
+
import { merge } from "lodash-es";
|
|
6
|
+
import { useDrop } from "vue3-dnd";
|
|
7
|
+
import { createUUID } from "qx-util";
|
|
8
|
+
//#region src/modules/vue3-dnd/components/vue3-dnd-draggable/vue3-dnd-draggable.tsx
|
|
9
|
+
function _isSlot(s) {
|
|
10
|
+
return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !isVNode(s);
|
|
11
|
+
}
|
|
12
|
+
var Vue3DndDraggable = /* @__PURE__ */ defineComponent({
|
|
13
|
+
name: "Vue3DndDraggable",
|
|
14
|
+
props: {
|
|
15
|
+
opts: {
|
|
16
|
+
type: Object,
|
|
17
|
+
default: () => {
|
|
18
|
+
return {};
|
|
19
|
+
}
|
|
20
|
+
},
|
|
21
|
+
items: {
|
|
22
|
+
type: Array,
|
|
23
|
+
required: true
|
|
24
|
+
}
|
|
25
|
+
},
|
|
26
|
+
emits: [
|
|
27
|
+
"add",
|
|
28
|
+
"remove",
|
|
29
|
+
"move"
|
|
30
|
+
],
|
|
31
|
+
setup(props, { emit }) {
|
|
32
|
+
const ns = useNamespace("vue3-dnd-draggable");
|
|
33
|
+
const groupId = createUUID();
|
|
34
|
+
const rootRef = ref(null);
|
|
35
|
+
const { opts, items } = toRefs(props);
|
|
36
|
+
const key = computed(() => {
|
|
37
|
+
return config.value.key || "id";
|
|
38
|
+
});
|
|
39
|
+
const config = computed(() => {
|
|
40
|
+
return merge({
|
|
41
|
+
type: "Vue3DndDraggable",
|
|
42
|
+
direction: "vertical"
|
|
43
|
+
}, opts.value);
|
|
44
|
+
});
|
|
45
|
+
const [collect, drop] = useDrop({
|
|
46
|
+
accept: config.value.type,
|
|
47
|
+
collect(monitor) {
|
|
48
|
+
return {
|
|
49
|
+
handlerId: monitor.getHandlerId(),
|
|
50
|
+
canDrop: monitor.canDrop(),
|
|
51
|
+
isShallowOver: monitor.isOver({ shallow: true })
|
|
52
|
+
};
|
|
53
|
+
},
|
|
54
|
+
canDrop(item, monitor) {
|
|
55
|
+
if (props.items.length > 0) return false;
|
|
56
|
+
if (config.value.canDropContainer) return config.value.canDropContainer(item, monitor);
|
|
57
|
+
return true;
|
|
58
|
+
},
|
|
59
|
+
drop(item, monitor) {
|
|
60
|
+
if (config.value.dropContainer) return config.value.dropContainer(item, monitor);
|
|
61
|
+
if (monitor.canDrop() !== false) items.value.push(item);
|
|
62
|
+
return { group: groupId };
|
|
63
|
+
}
|
|
64
|
+
});
|
|
65
|
+
drop(rootRef);
|
|
66
|
+
const onAdd = (isBefore, id, data) => {
|
|
67
|
+
const i = items.value.findIndex((item) => item[key.value] === id);
|
|
68
|
+
items.value.splice(isBefore ? i : i + 1, 0, data);
|
|
69
|
+
emit("add", data, i);
|
|
70
|
+
};
|
|
71
|
+
const onRemove = (_item) => {
|
|
72
|
+
console.warn("onRemove 未实现", _item);
|
|
73
|
+
};
|
|
74
|
+
const onMove = (isBefore, id, moveId) => {
|
|
75
|
+
const index = items.value.findIndex((item) => item[key.value] === id);
|
|
76
|
+
const moveIndex = items.value.findIndex((item) => item[key.value] === moveId);
|
|
77
|
+
const item = items.value[moveIndex];
|
|
78
|
+
const newIndex = isBefore ? index : index + 1;
|
|
79
|
+
if (!isBefore && newIndex === moveIndex || isBefore && newIndex - 1 === moveIndex) return;
|
|
80
|
+
items.value.splice(newIndex, 0, item);
|
|
81
|
+
if (newIndex < moveIndex) items.value.splice(moveIndex + 1, 1);
|
|
82
|
+
else items.value.splice(moveIndex, 1);
|
|
83
|
+
emit("move", index, newIndex);
|
|
84
|
+
};
|
|
85
|
+
return {
|
|
86
|
+
ns,
|
|
87
|
+
groupId,
|
|
88
|
+
key,
|
|
89
|
+
rootRef,
|
|
90
|
+
collect,
|
|
91
|
+
config,
|
|
92
|
+
onAdd,
|
|
93
|
+
onRemove,
|
|
94
|
+
onMove
|
|
95
|
+
};
|
|
96
|
+
},
|
|
97
|
+
render() {
|
|
98
|
+
let _slot;
|
|
99
|
+
return createVNode("div", {
|
|
100
|
+
"ref": "rootRef",
|
|
101
|
+
"class": [this.ns.b(), this.ns.is("over", this.collect.isShallowOver)]
|
|
102
|
+
}, [createVNode(TransitionGroup, { "name": "list" }, _isSlot(_slot = this.items.map((item, index) => {
|
|
103
|
+
return createVNode(Vue3DndDraggableItem, {
|
|
104
|
+
"group": this.groupId,
|
|
105
|
+
"key": item[this.key] || index,
|
|
106
|
+
"index": index,
|
|
107
|
+
"item": item,
|
|
108
|
+
"config": this.config,
|
|
109
|
+
"add": this.onAdd,
|
|
110
|
+
"remove": this.onRemove,
|
|
111
|
+
"move": this.onMove
|
|
112
|
+
}, { default: (args) => {
|
|
113
|
+
return this.$slots.draggableItem?.(args);
|
|
114
|
+
} });
|
|
115
|
+
})) ? _slot : { default: () => [_slot] })]);
|
|
116
|
+
}
|
|
117
|
+
});
|
|
118
|
+
//#endregion
|
|
119
|
+
export { Vue3DndDraggable };
|
|
@@ -0,0 +1,74 @@
|
|
|
1
|
+
@charset "UTF-8";
|
|
2
|
+
/* stylelint-disable scss/no-global-function-names */
|
|
3
|
+
/* bem('block', 'element', 'modifier') => 'ibiz-block__element--modifier' */
|
|
4
|
+
/**
|
|
5
|
+
* 定义 Block 块
|
|
6
|
+
* @param {String} $block - Block 块名称
|
|
7
|
+
* @example
|
|
8
|
+
* @include b('button') {
|
|
9
|
+
* padding: 10px;
|
|
10
|
+
* }
|
|
11
|
+
*/
|
|
12
|
+
/**
|
|
13
|
+
* 定义 Element 元素
|
|
14
|
+
* @param {String|List} $element - Element 元素名称,支持单个或多个
|
|
15
|
+
* @example
|
|
16
|
+
* @include b('button') {
|
|
17
|
+
* @include e('text') {
|
|
18
|
+
* color: #000;
|
|
19
|
+
* }
|
|
20
|
+
* }
|
|
21
|
+
* // 或传入多个元素
|
|
22
|
+
* @include b('button') {
|
|
23
|
+
* @include e(('text', 'icon')) {
|
|
24
|
+
* margin: 5px;
|
|
25
|
+
* }
|
|
26
|
+
* }
|
|
27
|
+
*/
|
|
28
|
+
/**
|
|
29
|
+
* 定义 Modifier 修饰符
|
|
30
|
+
* @param {String|List} $modifier - Modifier 修饰符名称,支持单个或多个
|
|
31
|
+
* @example
|
|
32
|
+
* @include b('button') {
|
|
33
|
+
* @include m('primary') {
|
|
34
|
+
* background: blue;
|
|
35
|
+
* }
|
|
36
|
+
* }
|
|
37
|
+
* // 或传入多个修饰符
|
|
38
|
+
* @include b('button') {
|
|
39
|
+
* @include m(('primary', 'large')) {
|
|
40
|
+
* background: blue;
|
|
41
|
+
* font-size: 16px;
|
|
42
|
+
* }
|
|
43
|
+
* }
|
|
44
|
+
*/
|
|
45
|
+
/**
|
|
46
|
+
* 定义状态选择器
|
|
47
|
+
* @param {String} $state - 状态名称
|
|
48
|
+
* @example
|
|
49
|
+
* @include b('button') {
|
|
50
|
+
* @include when('disabled') {
|
|
51
|
+
* opacity: 0.5;
|
|
52
|
+
* }
|
|
53
|
+
* }
|
|
54
|
+
*/
|
|
55
|
+
/**
|
|
56
|
+
* 深色主题样式
|
|
57
|
+
* @param {String} $block - Block 块名称
|
|
58
|
+
* @example
|
|
59
|
+
* @include dark('button') {
|
|
60
|
+
* background: #333;
|
|
61
|
+
* color: #fff;
|
|
62
|
+
* }
|
|
63
|
+
*/
|
|
64
|
+
/* stylelint-disable scss/no-global-function-names */
|
|
65
|
+
.gct-vue3-dnd-draggable-item {
|
|
66
|
+
position: relative;
|
|
67
|
+
}
|
|
68
|
+
.gct-vue3-dnd-draggable-item.is-dragging .gct-vue3-dnd-draggable-preview {
|
|
69
|
+
display: inline;
|
|
70
|
+
}
|
|
71
|
+
|
|
72
|
+
.gct-vue3-dnd-draggable-item.is-dragging {
|
|
73
|
+
opacity: 0.3;
|
|
74
|
+
}
|
|
@@ -0,0 +1,69 @@
|
|
|
1
|
+
import { PropType } from 'vue';
|
|
2
|
+
import { IDragDataItem, IVue3DndDraggableOptions } from '../../interface/i-vue3-dnd-draggable-options';
|
|
3
|
+
export declare const Vue3DndDraggableItem: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
|
|
4
|
+
group: {
|
|
5
|
+
type: StringConstructor;
|
|
6
|
+
required: true;
|
|
7
|
+
};
|
|
8
|
+
index: {
|
|
9
|
+
type: NumberConstructor;
|
|
10
|
+
required: true;
|
|
11
|
+
};
|
|
12
|
+
item: {
|
|
13
|
+
type: PropType<IObject>;
|
|
14
|
+
required: true;
|
|
15
|
+
};
|
|
16
|
+
config: {
|
|
17
|
+
type: PropType<IVue3DndDraggableOptions>;
|
|
18
|
+
required: true;
|
|
19
|
+
};
|
|
20
|
+
add: {
|
|
21
|
+
type: PropType<(isBefore: boolean, id: string, data: unknown) => void>;
|
|
22
|
+
required: true;
|
|
23
|
+
};
|
|
24
|
+
remove: {
|
|
25
|
+
type: PropType<(item: IDragDataItem<IObject>) => void>;
|
|
26
|
+
required: true;
|
|
27
|
+
};
|
|
28
|
+
move: {
|
|
29
|
+
type: PropType<(isBefore: boolean, id: string, moveId: string) => void>;
|
|
30
|
+
required: true;
|
|
31
|
+
};
|
|
32
|
+
}>, {
|
|
33
|
+
ns: import('@gct-paas/core').Namespace;
|
|
34
|
+
elRef: import('vue').Ref<HTMLDivElement | null, HTMLDivElement | null>;
|
|
35
|
+
dragCollect: import('vue').Ref<IObject, IObject>;
|
|
36
|
+
dropCollect: import('vue').Ref<IObject, IObject>;
|
|
37
|
+
isBeforeHover: import('vue').Ref<boolean, boolean>;
|
|
38
|
+
drag: import('vue3-dnd').ConnectDragSource<import('vue3-dnd').DragSourceOptions>;
|
|
39
|
+
preview: import('vue3-dnd').ConnectDragPreview<import('vue3-dnd').DragPreviewOptions>;
|
|
40
|
+
}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
|
|
41
|
+
group: {
|
|
42
|
+
type: StringConstructor;
|
|
43
|
+
required: true;
|
|
44
|
+
};
|
|
45
|
+
index: {
|
|
46
|
+
type: NumberConstructor;
|
|
47
|
+
required: true;
|
|
48
|
+
};
|
|
49
|
+
item: {
|
|
50
|
+
type: PropType<IObject>;
|
|
51
|
+
required: true;
|
|
52
|
+
};
|
|
53
|
+
config: {
|
|
54
|
+
type: PropType<IVue3DndDraggableOptions>;
|
|
55
|
+
required: true;
|
|
56
|
+
};
|
|
57
|
+
add: {
|
|
58
|
+
type: PropType<(isBefore: boolean, id: string, data: unknown) => void>;
|
|
59
|
+
required: true;
|
|
60
|
+
};
|
|
61
|
+
remove: {
|
|
62
|
+
type: PropType<(item: IDragDataItem<IObject>) => void>;
|
|
63
|
+
required: true;
|
|
64
|
+
};
|
|
65
|
+
move: {
|
|
66
|
+
type: PropType<(isBefore: boolean, id: string, moveId: string) => void>;
|
|
67
|
+
required: true;
|
|
68
|
+
};
|
|
69
|
+
}>> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
|