@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.
- package/dist/index.min.css +1 -1
- package/dist/loader.esm.min.js +2 -1
- package/es/components/field-transfer/components/field-transfer-modal.vue.mjs +2 -2
- package/es/components/field-transfer/components/field-transfer-modal.vue_vue_type_style_index_0_scoped_2f34388d_lang.css +8 -0
- package/es/components/index.d.ts +0 -4
- package/es/components/index.mjs +0 -5
- package/es/components/mobile-container/mobile-container.d.ts +2 -2
- package/es/components/user-occupy/index.d.ts +0 -1
- package/es/components/user-occupy/index.mjs +0 -1
- package/es/components/user-occupy/user-lock.vue.mjs +2 -2
- package/es/components/user-occupy/user-lock.vue_vue_type_script_setup_true_lang.mjs +2 -1
- package/es/components/user-occupy/user-lock.vue_vue_type_style_index_0_scoped_143659f6_lang.css +29 -0
- package/es/components/user-occupy/user-occupy.vue.mjs +2 -2
- package/es/components/user-occupy/user-occupy.vue_vue_type_script_setup_true_lang.mjs +2 -1
- 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
- package/es/constant/index.d.ts +5 -0
- package/es/constant/index.mjs +6 -1
- package/es/constant/page-designer.d.ts +9 -36
- package/es/constant/page-designer.mjs +2 -32
- package/es/create-app-vue.d.ts +1 -1
- package/es/create-app-vue.mjs +1 -1
- package/es/{components/user-occupy → hooks/design-view/components}/useUserOccupy.d.ts +3 -3
- package/es/{components/user-occupy → hooks/design-view/components}/useUserOccupy.mjs +48 -27
- package/es/hooks/design-view/design-state.d.ts +91 -1
- package/es/hooks/design-view/design-state.mjs +7 -7
- package/es/hooks/design-view/designer/useDesignCache.mjs +2 -3
- package/es/hooks/design-view/designer/useDesignPreview.mjs +11 -5
- package/es/hooks/design-view/designer/useDesignSave.d.ts +2 -2
- package/es/hooks/design-view/designer/useDesignSave.mjs +131 -21
- package/es/hooks/design-view/layout/useToolkit.d.ts +1 -1
- package/es/hooks/design-view/layout/useToolkit.mjs +123 -82
- package/es/hooks/design-view/page/usePage.d.ts +12 -7
- package/es/hooks/design-view/page/usePage.mjs +131 -8
- package/es/hooks/design-view/useDesigner.d.ts +6 -2
- package/es/hooks/design-view/useDesigner.mjs +14 -3
- package/es/hooks/design-view/widget/useSelectedWidget.mjs +55 -28
- package/es/hooks/design-view/widget/useWidget.mjs +2 -1
- package/es/hooks/index.d.ts +1 -1
- package/es/hooks/index.mjs +1 -1
- package/es/index.d.ts +1 -0
- package/es/index.mjs +10 -12
- package/es/interface/index.d.ts +0 -1
- package/es/locale/auto-register.d.ts +2 -0
- package/es/locale/auto-register.mjs +25 -0
- package/es/locale/sys/app.mjs +6 -0
- package/es/locale/sys/appDesigner.mjs +9 -0
- package/es/locale/sys/cardDesign.d.ts +4 -4
- package/es/locale/sys/cardDesign.mjs +17 -0
- package/es/locale/sys/component.mjs +21 -0
- package/es/locale/sys/model.mjs +10 -0
- package/es/locale/sys/pageDesigner.mjs +32 -0
- package/es/locale/sys/platform.mjs +11 -0
- package/es/locale/sys.d.ts +7 -5
- package/es/locale/sys.mjs +26 -0
- package/es/props/design-plugin-props.d.ts +64 -0
- package/es/props/design-plugin-props.mjs +59 -0
- package/es/props/index.d.ts +1 -0
- package/es/register/designer-register/designer-register.d.ts +6 -3
- package/es/register/designer-register/designer-register.mjs +20 -14
- package/es/register/index.d.ts +1 -0
- package/es/register/index.mjs +1 -0
- package/es/register/props-editor/props-editor.register.d.ts +24 -0
- package/es/register/props-editor/props-editor.register.mjs +30 -0
- package/es/schema/begin-drag/begin-drag.mjs +1 -1
- package/es/schema/field/index.mjs +17 -3
- package/es/setup-app.d.ts +2 -1
- package/es/setup-app.mjs +3 -1
- package/es/types/index.d.ts +2 -1
- package/package.json +11 -11
- package/es/components/design-save-tip/design-save-tip.css +0 -107
- package/es/components/design-save-tip/design-save-tip.d.ts +0 -44
- package/es/components/design-save-tip/design-save-tip.mjs +0 -81
- package/es/components/design-step-check/design-step-check.css +0 -133
- package/es/components/design-step-check/design-step-check.d.ts +0 -30
- package/es/components/design-step-check/design-step-check.mjs +0 -96
- package/es/components/design-view-layout/design-view-layout.css +0 -157
- package/es/components/design-view-layout/design-view-layout.d.ts +0 -1
- package/es/components/design-view-layout/design-view-layout.mjs +0 -139
- package/es/components/field-transfer/components/field-transfer-modal.vue_vue_type_style_index_0_scoped_711e6992_lang.css +0 -8
- package/es/components/modal-name-editor/modal-name-editor.css +0 -117
- package/es/components/modal-name-editor/modal-name-editor.d.ts +0 -34
- package/es/components/modal-name-editor/modal-name-editor.mjs +0 -124
- package/es/components/user-occupy/occupy.const.d.ts +0 -4
- package/es/components/user-occupy/occupy.const.mjs +0 -7
- package/es/components/user-occupy/user-lock.vue_vue_type_style_index_0_scoped_b40d46ff_lang.css +0 -29
- package/es/hooks/develop/useKeyParser.d.ts +0 -16
- package/es/hooks/develop/useKeyParser.mjs +0 -79
- 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 };
|