@gct-paas/render 0.1.5-dev.0 → 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.
Files changed (45) hide show
  1. package/dist/index.min.css +1 -1
  2. package/dist/loader.esm.min.js +1 -1
  3. package/es/Event/Dependency/controller.mjs +2 -2
  4. package/es/Event/Dependency/displayRule.mjs +2 -2
  5. package/es/Event/Dependency/useDependency.mjs +1 -1
  6. package/es/Event/baseEvent.d.ts +4 -4
  7. package/es/Event/baseEvent.mjs +4 -4
  8. package/es/Event/bizServiceRequest.d.ts +4 -4
  9. package/es/Event/bizServiceRequest.mjs +19 -10
  10. package/es/Event/utils/runGlobalByPage.d.ts +4 -4
  11. package/es/Event/utils/runGlobalByPage.mjs +1 -1
  12. package/es/controller/design-render/design-render.controller.d.ts +1 -1
  13. package/es/hooks/index.d.ts +1 -0
  14. package/es/hooks/index.mjs +1 -0
  15. package/es/hooks/useStorageRef.mjs +1 -1
  16. package/es/hooks/widgets/useFileAttrsHooks.d.ts +28 -0
  17. package/es/hooks/widgets/useFileAttrsHooks.mjs +37 -0
  18. package/es/index.d.ts +4 -2
  19. package/es/index.mjs +12 -5
  20. package/es/locale/sys/process.d.ts +8 -0
  21. package/es/locale/sys.d.ts +4 -0
  22. package/es/modules/vue3-dnd/components/vue3-dnd-draggable/vue3-dnd-draggable.css +73 -0
  23. package/es/modules/vue3-dnd/components/vue3-dnd-draggable/vue3-dnd-draggable.d.ts +70 -0
  24. package/es/modules/vue3-dnd/components/vue3-dnd-draggable/vue3-dnd-draggable.mjs +119 -0
  25. package/es/modules/vue3-dnd/components/vue3-dnd-draggable-item/vue3-dnd-draggable-item.css +74 -0
  26. package/es/modules/vue3-dnd/components/vue3-dnd-draggable-item/vue3-dnd-draggable-item.d.ts +69 -0
  27. package/es/modules/vue3-dnd/components/vue3-dnd-draggable-item/vue3-dnd-draggable-item.mjs +165 -0
  28. package/es/modules/vue3-dnd/index.d.ts +3 -0
  29. package/es/modules/vue3-dnd/index.mjs +2 -0
  30. package/es/modules/vue3-dnd/interface/i-vue3-dnd-draggable-options.d.ts +294 -0
  31. package/es/modules/vue3-dnd/interface/index.d.ts +1 -0
  32. package/es/utils/expression/index.mjs +1 -1
  33. package/es/utils/expression/regularExpression/methods.mjs +1 -1
  34. package/es/utils/field-empty-value.d.ts +6 -0
  35. package/es/utils/field-empty-value.mjs +17 -0
  36. package/es/utils/index.d.ts +2 -0
  37. package/es/utils/index.mjs +3 -0
  38. package/es/utils/is.d.ts +21 -0
  39. package/es/utils/is.mjs +70 -0
  40. package/es/utils/model-transformer.d.ts +1 -1
  41. package/es/utils/search/index.d.ts +1 -0
  42. package/es/utils/search/index.mjs +1 -0
  43. package/es/utils/search/listhook.d.ts +23 -0
  44. package/es/utils/search/listhook.mjs +87 -0
  45. package/package.json +27 -26
@@ -1,16 +1,16 @@
1
+ import { Globals } from "./utils/runGlobalByPage.mjs";
1
2
  import { transformData, transformSourceData } from "../utils/model-transformer.mjs";
2
3
  import "../utils/index.mjs";
3
- import { Globals } from "./utils/runGlobalByPage.mjs";
4
4
  import { $httpBizService, $request, BizService } from "./bizServiceRequest.mjs";
5
5
  import { globalLoading } from "./utils/globalLoading.mjs";
6
6
  import { ProcessAppRovedData } from "./utils/processRovedInfo.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, data?: IObject, config?: AxiosRequestConfig) => Promise<unknown>;
5
- get: (path: PathType, query?: IObject, data?: IObject, config?: AxiosRequestConfig) => Promise<unknown>;
6
- put: (path: PathType, query?: IObject, data?: IObject, config?: AxiosRequestConfig) => Promise<unknown>;
7
- delete: (path: PathType, query?: IObject, data?: IObject, config?: AxiosRequestConfig) => Promise<unknown>;
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) => (path, query = {}, data = {}, config = {}) => {
4
- return api({
5
- modelKey: path.key,
6
- bsKey: path.action,
7
- modelCategory: path.modelCategory ?? EntityModelCategoryEnum.ENTITY
8
- }, query, data, config);
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('../../interface').IDesignRenderBaseState>>;
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,2 +1,3 @@
1
1
  export { useDesignRenderController } from './use-design-render-controller/use-design-render-controller';
2
2
  export { useGctSelect } from './useStorageRef';
3
+ export * from './widgets/useFileAttrsHooks';
@@ -1,2 +1,3 @@
1
1
  import "./useStorageRef.mjs";
2
2
  import "./use-design-render-controller/use-design-render-controller.mjs";
3
+ import "./widgets/useFileAttrsHooks.mjs";
@@ -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
  /**
@@ -0,0 +1,28 @@
1
+ export declare const useAsyncFileAttrs: () => {
2
+ getFileAttrs: ({ modelKey, fieldKey }: IObject) => Promise<void>;
3
+ attrObj: import('vue').Ref<{
4
+ maxSize?: number | undefined;
5
+ maxCount?: number | undefined;
6
+ accept?: string[] | undefined;
7
+ acceptStr?: string | undefined;
8
+ maxTagTextLength?: number | undefined;
9
+ }, {
10
+ maxSize?: number | undefined;
11
+ maxCount?: number | undefined;
12
+ accept?: string[] | undefined;
13
+ acceptStr?: string | undefined;
14
+ maxTagTextLength?: number | undefined;
15
+ } | {
16
+ /** 单个文件大小 */
17
+ maxSize?: number;
18
+ /** 最大上传数量 */
19
+ maxCount?: number;
20
+ /** 支持的格式数组 */
21
+ accept?: string[];
22
+ /** 支持的格式 */
23
+ acceptStr?: string;
24
+ /** 最大字符显示个数 */
25
+ maxTagTextLength?: number;
26
+ }>;
27
+ getmaxTagLength: ({ modelKey, fieldKey }: IObject) => Promise<void>;
28
+ };
@@ -0,0 +1,37 @@
1
+ import { FieldSchema } from "../../utils/getFieldSchema.mjs";
2
+ import { ref } from "vue";
3
+ import { pick } from "lodash-es";
4
+ //#region src/hooks/widgets/useFileAttrsHooks.ts
5
+ var useAsyncFileAttrs = () => {
6
+ const attrObj = ref({});
7
+ /** 获取附件、图片的的专属配置项信息 */
8
+ async function getFileAttrs({ modelKey, fieldKey }) {
9
+ const fieldInfo = await FieldSchema.getConfigByField(modelKey, fieldKey);
10
+ if (fieldInfo && fieldInfo.specificConfig) {
11
+ const attrsMap = pick(fieldInfo.specificConfig, [
12
+ "maxNumber",
13
+ "fileSize",
14
+ "fileTypes"
15
+ ]) ?? {};
16
+ const _accept = attrsMap.fileTypes ?? [];
17
+ attrObj.value = {
18
+ maxSize: attrsMap.fileSize,
19
+ maxCount: attrsMap.maxNumber,
20
+ accept: _accept,
21
+ acceptStr: Array.isArray(_accept) && _accept.length !== 0 ? _accept.join("、") : ""
22
+ };
23
+ }
24
+ }
25
+ /** 获取部门多选、枚举多选、范围人员,模型多选最大字符显示个数 */
26
+ async function getmaxTagLength({ modelKey, fieldKey }) {
27
+ const fieldInfo = await FieldSchema.getConfigByField(modelKey, fieldKey);
28
+ if (fieldInfo && fieldInfo.specificConfig) attrObj.value = { maxTagTextLength: (pick(fieldInfo.specificConfig, ["codeVisibleNum"]) ?? {}).codeVisibleNum || 12 };
29
+ }
30
+ return {
31
+ getFileAttrs,
32
+ attrObj,
33
+ getmaxTagLength
34
+ };
35
+ };
36
+ //#endregion
37
+ export { useAsyncFileAttrs };
package/es/index.d.ts CHANGED
@@ -1,7 +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;
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,11 +18,10 @@ 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";
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";
17
24
  import "./utils/index.mjs";
18
- import HandwritingPad_default from "./components/HandwritingPad.vue.mjs";
19
- import "./components/index.mjs";
20
- import { useGctSelect } from "./hooks/useStorageRef.mjs";
21
- import { Globals, PageTypeEnum, formMap, getPageTitle, getPremission, globalVarCaches, pageDataforJson, pageGlobaVariables, setFormData } from "./Event/utils/runGlobalByPage.mjs";
22
25
  import { Context, Events, GctComponent } from "./Event/baseEvent.mjs";
23
26
  import { calculateDepResult, insetDep } from "./Event/Dependency/controller.mjs";
24
27
  import { useDisplayRuleColumnByStyles, useDisplayRuleOptions, useVisibileByRuleHook } from "./Event/Dependency/displayRule.mjs";
@@ -26,11 +29,15 @@ import { dependencyToShow, dependencyToShowSync, tableWidgetByDept, tableWidgetT
26
29
  import { useDependency, useDependencyByRequired } from "./Event/Dependency/useDependency.mjs";
27
30
  import "./Event/index.mjs";
28
31
  import { useDesignRenderController } from "./hooks/use-design-render-controller/use-design-render-controller.mjs";
32
+ import { useAsyncFileAttrs } from "./hooks/widgets/useFileAttrsHooks.mjs";
29
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";
30
37
  //#region src/index.ts
31
38
  function onInit() {
32
39
  if (!_gct.register.render) _gct.register.render = new RenderRegister();
33
40
  else console.warn("渲染注册已存在,可能存在重复注册问题,请检查是否有重复引入渲染包的情况");
34
41
  }
35
42
  //#endregion
36
- 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, dependencyToShow, dependencyToShowSync, formMap, getDefaultDate, getDisabledDate, getMobileDateRange, getPageTitle, getPremission, getRefInfoId, globalVarCaches, identify, initFieldWidgetRuntime, insetDep, onInit, pageDataforJson, pageGlobaVariables, schemaToStyle, setDataByForm, setFormData, tableWidgetByDept, tableWidgetToShow, transSelectData, transformData, transformDataToDict, transformPropsField, transformSourceData, useDependency, useDependencyByRequired, useDependencyToShow, useDependencyToShowList, useDesignRenderController, useDisplayRuleColumnByStyles, useDisplayRuleOptions, useGctSelect, useGetBodyBySearch, useStyle, useVisibileByRuleHook };
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,8 @@
1
+ declare const _default: {
2
+ pleaseInitiateTheProcessFirst: string;
3
+ processInstanceMismatch: string;
4
+ element: {
5
+ approval: string;
6
+ };
7
+ };
8
+ export default _default;
@@ -0,0 +1,4 @@
1
+ declare const _default: {
2
+ success: string;
3
+ };
4
+ export default _default;
@@ -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
+ }