@gct-paas/design 0.1.6-dev.3 → 0.1.6-dev.30

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 (88) hide show
  1. package/dist/index.min.css +1 -1
  2. package/dist/loader.esm.min.js +2 -1
  3. package/es/components/field-transfer/components/field-transfer-modal.vue.mjs +2 -2
  4. package/es/components/field-transfer/components/field-transfer-modal.vue_vue_type_style_index_0_scoped_2f34388d_lang.css +8 -0
  5. package/es/components/index.d.ts +0 -4
  6. package/es/components/index.mjs +0 -5
  7. package/es/components/mobile-container/mobile-container.d.ts +2 -2
  8. package/es/components/user-occupy/index.d.ts +0 -1
  9. package/es/components/user-occupy/index.mjs +0 -1
  10. package/es/components/user-occupy/user-lock.vue.mjs +2 -2
  11. package/es/components/user-occupy/user-lock.vue_vue_type_script_setup_true_lang.mjs +2 -1
  12. package/es/components/user-occupy/user-lock.vue_vue_type_style_index_0_scoped_143659f6_lang.css +29 -0
  13. package/es/components/user-occupy/user-occupy.vue.mjs +2 -2
  14. package/es/components/user-occupy/user-occupy.vue_vue_type_script_setup_true_lang.mjs +2 -1
  15. package/es/components/user-occupy/{user-occupy.vue_vue_type_style_index_0_scoped_9b136922_lang.css → user-occupy.vue_vue_type_style_index_0_scoped_1234af11_lang.css} +6 -6
  16. package/es/constant/index.d.ts +5 -0
  17. package/es/constant/index.mjs +6 -1
  18. package/es/constant/page-designer.d.ts +9 -36
  19. package/es/constant/page-designer.mjs +2 -32
  20. package/es/create-app-vue.d.ts +1 -1
  21. package/es/create-app-vue.mjs +1 -1
  22. package/es/{components/user-occupy → hooks/design-view/components}/useUserOccupy.d.ts +3 -3
  23. package/es/{components/user-occupy → hooks/design-view/components}/useUserOccupy.mjs +48 -27
  24. package/es/hooks/design-view/design-state.d.ts +91 -1
  25. package/es/hooks/design-view/design-state.mjs +7 -7
  26. package/es/hooks/design-view/designer/useDesignCache.mjs +2 -3
  27. package/es/hooks/design-view/designer/useDesignPreview.mjs +11 -5
  28. package/es/hooks/design-view/designer/useDesignSave.d.ts +2 -2
  29. package/es/hooks/design-view/designer/useDesignSave.mjs +131 -21
  30. package/es/hooks/design-view/layout/useToolkit.d.ts +1 -1
  31. package/es/hooks/design-view/layout/useToolkit.mjs +123 -82
  32. package/es/hooks/design-view/page/usePage.d.ts +12 -7
  33. package/es/hooks/design-view/page/usePage.mjs +131 -8
  34. package/es/hooks/design-view/useDesigner.d.ts +6 -2
  35. package/es/hooks/design-view/useDesigner.mjs +14 -3
  36. package/es/hooks/design-view/widget/useSelectedWidget.mjs +55 -28
  37. package/es/hooks/design-view/widget/useWidget.mjs +2 -1
  38. package/es/hooks/index.d.ts +1 -1
  39. package/es/hooks/index.mjs +1 -1
  40. package/es/index.d.ts +1 -0
  41. package/es/index.mjs +10 -12
  42. package/es/interface/index.d.ts +0 -1
  43. package/es/locale/auto-register.d.ts +2 -0
  44. package/es/locale/auto-register.mjs +25 -0
  45. package/es/locale/sys/app.mjs +6 -0
  46. package/es/locale/sys/appDesigner.mjs +9 -0
  47. package/es/locale/sys/cardDesign.d.ts +4 -4
  48. package/es/locale/sys/cardDesign.mjs +17 -0
  49. package/es/locale/sys/component.mjs +21 -0
  50. package/es/locale/sys/model.mjs +10 -0
  51. package/es/locale/sys/pageDesigner.mjs +32 -0
  52. package/es/locale/sys/platform.mjs +11 -0
  53. package/es/locale/sys.d.ts +7 -5
  54. package/es/locale/sys.mjs +26 -0
  55. package/es/props/design-plugin-props.d.ts +64 -0
  56. package/es/props/design-plugin-props.mjs +59 -0
  57. package/es/props/index.d.ts +1 -0
  58. package/es/register/designer-register/designer-register.d.ts +6 -3
  59. package/es/register/designer-register/designer-register.mjs +20 -14
  60. package/es/register/index.d.ts +1 -0
  61. package/es/register/index.mjs +1 -0
  62. package/es/register/props-editor/props-editor.register.d.ts +24 -0
  63. package/es/register/props-editor/props-editor.register.mjs +30 -0
  64. package/es/schema/begin-drag/begin-drag.mjs +1 -1
  65. package/es/schema/field/index.mjs +17 -3
  66. package/es/setup-app.d.ts +2 -1
  67. package/es/setup-app.mjs +3 -1
  68. package/es/types/index.d.ts +2 -1
  69. package/package.json +11 -11
  70. package/es/components/design-save-tip/design-save-tip.css +0 -107
  71. package/es/components/design-save-tip/design-save-tip.d.ts +0 -44
  72. package/es/components/design-save-tip/design-save-tip.mjs +0 -81
  73. package/es/components/design-step-check/design-step-check.css +0 -133
  74. package/es/components/design-step-check/design-step-check.d.ts +0 -30
  75. package/es/components/design-step-check/design-step-check.mjs +0 -96
  76. package/es/components/design-view-layout/design-view-layout.css +0 -157
  77. package/es/components/design-view-layout/design-view-layout.d.ts +0 -1
  78. package/es/components/design-view-layout/design-view-layout.mjs +0 -139
  79. package/es/components/field-transfer/components/field-transfer-modal.vue_vue_type_style_index_0_scoped_711e6992_lang.css +0 -8
  80. package/es/components/modal-name-editor/modal-name-editor.css +0 -117
  81. package/es/components/modal-name-editor/modal-name-editor.d.ts +0 -34
  82. package/es/components/modal-name-editor/modal-name-editor.mjs +0 -124
  83. package/es/components/user-occupy/occupy.const.d.ts +0 -4
  84. package/es/components/user-occupy/occupy.const.mjs +0 -7
  85. package/es/components/user-occupy/user-lock.vue_vue_type_style_index_0_scoped_b40d46ff_lang.css +0 -29
  86. package/es/hooks/develop/useKeyParser.d.ts +0 -16
  87. package/es/hooks/develop/useKeyParser.mjs +0 -79
  88. package/es/interface/i-view-step/i-view-step.d.ts +0 -32
@@ -1,81 +0,0 @@
1
- import './design-save-tip.css';/* empty css */
2
- import { t, useNamespace } from "@gct-paas/core";
3
- import { createVNode, defineComponent, isVNode, resolveComponent } from "vue";
4
- //#region src/components/design-save-tip/design-save-tip.tsx
5
- function _isSlot(s) {
6
- return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !isVNode(s);
7
- }
8
- var DesignSaveTip = /* @__PURE__ */ defineComponent({
9
- name: "DesignSaveTip",
10
- props: {
11
- modal: {
12
- type: Object,
13
- required: true
14
- },
15
- title: {
16
- type: String,
17
- default: () => {
18
- return t("sys.cardDesign.back_info.title");
19
- }
20
- },
21
- content: {
22
- type: String,
23
- default: () => {
24
- return t("sys.cardDesign.back_info.content");
25
- }
26
- },
27
- exit: { type: Function },
28
- saveAndExit: { type: Function }
29
- },
30
- setup(props) {
31
- const ns = useNamespace("design-save-tip");
32
- /**
33
- * 继续编辑
34
- */
35
- function onContinue() {
36
- props.modal.dismiss({ ok: false });
37
- }
38
- /**
39
- * 不保存并退出
40
- *
41
- */
42
- function onNotSave() {
43
- if (props.exit) props.exit();
44
- props.modal.dismiss({ ok: true });
45
- }
46
- /**
47
- * 保存并退出
48
- */
49
- function onSaveAndExit() {
50
- if (props.saveAndExit) props.saveAndExit();
51
- props.modal.dismiss({ ok: true });
52
- }
53
- return () => {
54
- let _slot, _slot2, _slot3;
55
- return createVNode("div", { "class": ns.b() }, [
56
- createVNode("div", { "class": ns.e("tip-icon") }, [createVNode(resolveComponent("assets-svg-icon"), { "src": "/extras-assets/design-view/exclamation-circle.svg" }, null)]),
57
- createVNode("div", { "class": ns.e("header") }, [props.title]),
58
- createVNode("div", { "class": ns.e("content") }, [props.content]),
59
- createVNode("div", { "class": ns.e("footer") }, [
60
- createVNode(resolveComponent("a-button"), {
61
- "type": "link",
62
- "onClick": onContinue
63
- }, _isSlot(_slot = t("sys.app.continueEdit")) ? _slot : { default: () => [_slot] }),
64
- createVNode(resolveComponent("a-button"), {
65
- "class": ns.e("cancel-btn"),
66
- "size": "small",
67
- "onClick": onNotSave
68
- }, _isSlot(_slot2 = t("sys.cardDesign.back_info.notSave")) ? _slot2 : { default: () => [_slot2] }),
69
- createVNode(resolveComponent("a-button"), {
70
- "class": ns.e("save-exit"),
71
- "type": "primary",
72
- "size": "small",
73
- "onClick": onSaveAndExit
74
- }, _isSlot(_slot3 = t("sys.cardDesign.back_info.saveAndExit")) ? _slot3 : { default: () => [_slot3] })
75
- ])
76
- ]);
77
- };
78
- }
79
- });
80
- //#endregion
81
- export { DesignSaveTip };
@@ -1,133 +0,0 @@
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-design-step-check {
66
- height: 40px;
67
- border-radius: 20px;
68
- background-color: rgb(232, 235, 240);
69
- display: flex;
70
- align-items: center;
71
- padding: 3px 2px;
72
- position: relative;
73
- overflow: hidden;
74
- }
75
- .gct-design-step-check::before {
76
- content: "";
77
- display: var(--indicator-display, block);
78
- position: absolute;
79
- top: 2px;
80
- left: var(--indicator-left, 3px);
81
- width: var(--indicator-width, 130px);
82
- height: 36px;
83
- border-radius: 18px;
84
- background-color: rgb(255, 255, 255);
85
- z-index: 1;
86
- pointer-events: none;
87
- }
88
- .gct-design-step-check__item {
89
- position: relative;
90
- height: 36px;
91
- border-radius: 18px;
92
- padding: 3px;
93
- padding-right: 26px;
94
- min-width: 131px;
95
- max-width: max-content;
96
- display: flex;
97
- align-items: center;
98
- cursor: pointer;
99
- background-color: transparent;
100
- z-index: 2;
101
- color: var(--gct-color-text-1);
102
- }
103
- .gct-design-step-check__item.is-selected .gct-design-step-check__item-number {
104
- background-color: var(--gct-color-primary);
105
- color: #fff;
106
- }
107
-
108
- .gct-design-step-check__item.is-selected .gct-design-step-check__item-name {
109
- font-weight: bold;
110
- color: rgb(33, 37, 40);
111
- }
112
-
113
- .gct-design-step-check__item-number {
114
- width: 30px;
115
- height: 30px;
116
- border-radius: 50%;
117
- display: flex;
118
- align-items: center;
119
- justify-content: center;
120
- color: #5A5F6B;
121
- font-weight: normal;
122
- margin-right: 8px;
123
- flex-shrink: 0;
124
- }
125
-
126
- .gct-design-step-check__item-name {
127
- font-size: 16px;
128
- color: #5A5F6B;
129
- line-height: 22px;
130
- font-weight: normal;
131
- flex: 1;
132
- white-space: nowrap;
133
- }
@@ -1,30 +0,0 @@
1
- import { PropType } from 'vue';
2
- import { IViewStep } from '../../interface';
3
- /**
4
- * 设计界面步骤选择
5
- */
6
- export declare const DesignStepCheck: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
7
- steps: {
8
- type: PropType<IViewStep[]>;
9
- default: () => never[];
10
- };
11
- currentStep: {
12
- type: (NumberConstructor | StringConstructor)[];
13
- default: string;
14
- };
15
- }>, () => import("vue/jsx-runtime").JSX.Element, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, ("stepChange" | "update:currentStep")[], "stepChange" | "update:currentStep", import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
16
- steps: {
17
- type: PropType<IViewStep[]>;
18
- default: () => never[];
19
- };
20
- currentStep: {
21
- type: (NumberConstructor | StringConstructor)[];
22
- default: string;
23
- };
24
- }>> & Readonly<{
25
- onStepChange?: ((...args: any[]) => any) | undefined;
26
- "onUpdate:currentStep"?: ((...args: any[]) => any) | undefined;
27
- }>, {
28
- steps: IViewStep[];
29
- currentStep: string | number;
30
- }, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
@@ -1,96 +0,0 @@
1
- import './design-step-check.css';/* empty css */
2
- import { useNamespace } from "@gct-paas/core";
3
- import { createVNode, defineComponent, nextTick, onMounted, ref, toRefs, watch } from "vue";
4
- //#region src/components/design-step-check/design-step-check.tsx
5
- /**
6
- * 设计界面步骤选择
7
- */
8
- var DesignStepCheck = /* @__PURE__ */ defineComponent({
9
- name: "DesignStepCheck",
10
- props: {
11
- steps: {
12
- type: Array,
13
- default: () => []
14
- },
15
- currentStep: {
16
- type: [String, Number],
17
- default: ""
18
- }
19
- },
20
- emits: ["update:currentStep", "stepChange"],
21
- setup(props, { emit, expose }) {
22
- const ns = useNamespace("design-step-check");
23
- const { steps, currentStep } = toRefs(props);
24
- const containerRef = ref();
25
- const innerCurrentStep = ref(currentStep.value);
26
- const offsetLeft = ref(0);
27
- const width = ref(0);
28
- const updateIndicatorPosition = async () => {
29
- await new Promise((resolve) => setTimeout(resolve, 100));
30
- await nextTick();
31
- if (!containerRef.value) return;
32
- const selectedIndex = steps.value.findIndex((step) => step.tag === innerCurrentStep.value);
33
- if (selectedIndex === -1) return;
34
- const items = containerRef.value.querySelectorAll(`.${ns.e("item")}`);
35
- const selectedItem = items[selectedIndex];
36
- if (selectedItem) {
37
- offsetLeft.value = 2;
38
- for (let i = 0; i < selectedIndex; i++) {
39
- const item = items[i];
40
- offsetLeft.value += item.offsetWidth;
41
- }
42
- width.value = selectedItem.offsetWidth;
43
- }
44
- };
45
- watch(currentStep, (newValue) => {
46
- innerCurrentStep.value = newValue;
47
- updateIndicatorPosition();
48
- });
49
- watch(steps, (newSteps) => {
50
- if (newSteps.length > 0 && !innerCurrentStep.value) {
51
- innerCurrentStep.value = newSteps[0].tag;
52
- emit("update:currentStep", innerCurrentStep.value);
53
- emit("stepChange", innerCurrentStep.value, newSteps[0]);
54
- }
55
- updateIndicatorPosition();
56
- });
57
- const handleStepClick = (step) => {
58
- innerCurrentStep.value = step.tag;
59
- emit("update:currentStep", step.tag);
60
- emit("stepChange", step.tag, step);
61
- updateIndicatorPosition();
62
- };
63
- onMounted(() => {
64
- updateIndicatorPosition();
65
- });
66
- /**
67
- * 设置当前步骤,用于外部控制,不需要触发事件
68
- *
69
- * @param {string} tag
70
- */
71
- function setStep(tag) {
72
- if (steps.value.some((step) => step.tag === tag)) {
73
- innerCurrentStep.value = tag;
74
- updateIndicatorPosition();
75
- }
76
- }
77
- expose({ setStep });
78
- return () => {
79
- return createVNode("div", {
80
- "ref": containerRef,
81
- "class": ns.b(),
82
- "style": {
83
- "--indicator-display": currentStep.value ? "block" : "none",
84
- "--indicator-left": `${offsetLeft.value || -40}px`,
85
- "--indicator-width": `${width.value || -131}px`
86
- }
87
- }, [props.steps.map((step) => createVNode("div", {
88
- "key": step.tag,
89
- "class": [ns.e("item"), ns.is("selected", step.tag === innerCurrentStep.value)],
90
- "onClick": () => handleStepClick(step)
91
- }, [createVNode("div", { "class": ns.e("item-number") }, [props.steps.findIndex((s) => s.tag === step.tag) + 1]), createVNode("div", { "class": ns.e("item-name") }, [step.name])]))]);
92
- };
93
- }
94
- });
95
- //#endregion
96
- export { DesignStepCheck };
@@ -1,157 +0,0 @@
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
- /**
66
- * 设计视图布局组件样式
67
- * 使用 BEM 命名规范
68
- */
69
- .gct-design-view-layout {
70
- position: relative;
71
- width: 100%;
72
- height: 100%;
73
- overflow: hidden;
74
- }
75
- .gct-design-view-layout .gct-modal-name-editor__input .ant-input.ant-input-sm {
76
- color: rgb(26, 29, 35);
77
- }
78
- .gct-design-view-layout__header {
79
- display: flex;
80
- align-items: center;
81
- justify-content: space-between;
82
- width: 100%;
83
- height: 69px;
84
- padding: 0 24px;
85
- background-color: #fff;
86
- border-bottom: 1px solid #E0E3EB;
87
- }
88
-
89
- .gct-design-view-layout__header-back {
90
- display: inline-flex;
91
- align-items: center;
92
- justify-content: center;
93
- width: 20px;
94
- height: 20px;
95
- font-size: 20px;
96
- cursor: pointer;
97
- }
98
-
99
- .gct-design-view-layout__header-info {
100
- display: inline-block;
101
- margin-left: 16px;
102
- }
103
-
104
- .gct-design-view-layout__header-sub-title {
105
- font-size: 12px;
106
- color: rgb(90, 95, 107);
107
- }
108
-
109
- .gct-design-view-layout__header-title {
110
- font-size: 14px;
111
- font-weight: 600;
112
- }
113
-
114
- .gct-design-view-layout__header-left {
115
- display: flex;
116
- align-items: center;
117
- height: 100%;
118
- }
119
-
120
- .gct-design-view-layout__header-center {
121
- position: absolute;
122
- left: 50%;
123
- transform: translateX(-50%);
124
- }
125
-
126
- .gct-design-view-layout__header-right {
127
- display: flex;
128
- align-items: center;
129
- height: 100%;
130
- }
131
-
132
- .gct-design-view-layout__header-actions {
133
- display: flex;
134
- gap: 12px;
135
- align-items: center;
136
- height: 100%;
137
- }
138
-
139
- .gct-design-view-layout__header-action-btn {
140
- display: flex;
141
- align-items: center;
142
- }
143
- .gct-design-view-layout__header-action-btn:focus {
144
- color: rgba(0, 0, 0, 0.85);
145
- border-color: #E0E3EB;
146
- }
147
- .gct-design-view-layout__header-action-btn .gct-iconfont {
148
- margin-right: 6px;
149
- font-size: 14px;
150
- }
151
- .gct-design-view-layout__header-action-btn span {
152
- height: 22px;
153
- }
154
-
155
- .gct-design-view-layout__content {
156
- height: calc(100% - 70px);
157
- }
@@ -1 +0,0 @@
1
- export declare const DesignViewLayout: any;
@@ -1,139 +0,0 @@
1
- import { DesignStepCheck } from "../design-step-check/design-step-check.mjs";
2
- import { ModalNameEditor } from "../modal-name-editor/modal-name-editor.mjs";
3
- import './design-view-layout.css';/* empty css */
4
- import { t, useNamespace } from "@gct-paas/core";
5
- import { Fragment, computed, createVNode, defineComponent, isVNode, mergeProps, ref, resolveComponent, toRefs } from "vue";
6
- //#region src/components/design-view-layout/design-view-layout.tsx
7
- function _isSlot(s) {
8
- return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !isVNode(s);
9
- }
10
- var DesignViewLayout = /* @__PURE__ */ defineComponent({
11
- name: "DesignViewLayout",
12
- props: {
13
- name: {
14
- type: String,
15
- default: "未命名"
16
- },
17
- defaultName: {
18
- type: String,
19
- default: "未命名卡片名称"
20
- },
21
- editName: {
22
- type: Boolean,
23
- default: true
24
- },
25
- subTitle: {
26
- type: String,
27
- default: ""
28
- },
29
- step: {
30
- type: String,
31
- default: ""
32
- },
33
- steps: {
34
- type: Array,
35
- default: () => []
36
- },
37
- actions: {
38
- type: Array,
39
- default: () => []
40
- },
41
- save: { type: Function },
42
- next: { type: Function }
43
- },
44
- emits: [
45
- "changeName",
46
- "back",
47
- "stepChange"
48
- ],
49
- setup(props, { slots, emit, expose }) {
50
- const ns = useNamespace("design-view-layout");
51
- const stepCheckRef = ref();
52
- const { name, subTitle, step, steps } = toRefs(props);
53
- const isLoading = ref(false);
54
- const val = computed({
55
- get() {
56
- return name.value;
57
- },
58
- set(val) {
59
- if (name.value !== val) {
60
- name.value = val;
61
- emit("changeName", val);
62
- }
63
- }
64
- });
65
- const isBack = computed(() => {
66
- return history.length > 1 || !!window.$wujie;
67
- });
68
- const isLastStep = computed(() => {
69
- return steps.value.length === 0 || steps.value[steps.value.length - 1]?.tag === step.value;
70
- });
71
- function onBack(e) {
72
- e.stopPropagation();
73
- emit("back", e);
74
- }
75
- async function onNext() {
76
- if (props.next) try {
77
- isLoading.value = true;
78
- await props.next();
79
- } catch (error) {
80
- console.error("DesignViewLayout: next function error", error);
81
- } finally {
82
- isLoading.value = false;
83
- }
84
- }
85
- async function onSave() {
86
- if (props.save) try {
87
- isLoading.value = true;
88
- await props.save();
89
- } catch (error) {
90
- console.error("DesignViewLayout: save function error", error);
91
- } finally {
92
- isLoading.value = false;
93
- }
94
- }
95
- function setStep(stepId) {
96
- if (stepCheckRef.value) stepCheckRef.value.setStep(stepId);
97
- }
98
- expose({ setStep });
99
- return () => {
100
- let _slot, _slot2;
101
- return createVNode("div", { "class": ns.b() }, [createVNode("div", { "class": ns.e("header") }, [
102
- createVNode("div", { "class": ns.e("header-left") }, [isBack.value ? createVNode("div", {
103
- "class": ns.e("header-back"),
104
- "onClick": onBack
105
- }, [createVNode(resolveComponent("assets-svg-icon"), { "src": "/extras-assets/card-design/arrow_back.svg" }, null)]) : null, props.editName ? createVNode("div", { "class": ns.e("header-info") }, [createVNode("div", { "class": ns.e("header-sub-title") }, [subTitle.value]), createVNode("div", { "class": ns.e("header-title") }, [createVNode(ModalNameEditor, {
106
- "value": val.value,
107
- "onUpdate:value": ($event) => val.value = $event,
108
- "defaultName": props.defaultName
109
- }, null)])]) : null]),
110
- createVNode("div", { "class": ns.e("header-center") }, [steps.value.length > 0 ? createVNode(DesignStepCheck, {
111
- "ref": (ref) => stepCheckRef.value = ref,
112
- "steps": steps.value,
113
- "currentStep": step.value,
114
- "onStepChange": (stepId, stepData) => {
115
- emit("stepChange", stepId, stepData);
116
- }
117
- }, null) : null]),
118
- createVNode("div", { "class": ns.e("header-right") }, [slots.headerRight ? slots.headerRight() : null, createVNode("div", { "class": ns.e("header-actions") }, [props.steps.length > 0 ? isLastStep.value ? createVNode(Fragment, null, [
119
- slots.headerActions ? slots.headerActions() : null,
120
- props.actions.map((actionProps) => {
121
- createVNode(resolveComponent("a-button"), mergeProps({ "class": ns.e("header-action-btn") }, actionProps), { default: () => [actionProps.title] });
122
- }),
123
- createVNode(resolveComponent("a-button"), {
124
- "class": ns.e("header-action-btn"),
125
- "type": "primary",
126
- "loading": isLoading.value,
127
- "onClick": onSave,
128
- "icon": createVNode("i", { "class": "gct-iconfont icon-icon_baocun_btn" }, null)
129
- }, _isSlot(_slot = t("sys.saveText")) ? _slot : { default: () => [_slot] })
130
- ]) : createVNode(resolveComponent("a-button"), {
131
- "type": "primary",
132
- "onClick": onNext
133
- }, _isSlot(_slot2 = t("sys.nextStep")) ? _slot2 : { default: () => [_slot2] }) : null])])
134
- ]), createVNode("div", { "class": ns.e("content") }, [slots.default ? slots.default() : null])]);
135
- };
136
- }
137
- });
138
- //#endregion
139
- export { DesignViewLayout };
@@ -1,8 +0,0 @@
1
- .field-transfer-container[data-v-711e6992] {
2
- position: relative;
3
- width: 100%;
4
- height: 100%;
5
- }
6
- .field-transfer-container .field-cascader[data-v-711e6992] {
7
- margin-bottom: 8px;
8
- }