@gct-paas/design 0.1.6-dev.2 → 0.1.6-dev.20

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 (41) hide show
  1. package/dist/index.min.css +1 -1
  2. package/dist/loader.esm.min.js +2 -1
  3. package/es/components/index.d.ts +0 -4
  4. package/es/components/index.mjs +0 -4
  5. package/es/components/user-occupy/useUserOccupy.mjs +2 -2
  6. package/es/constant/page-designer.d.ts +9 -36
  7. package/es/constant/page-designer.mjs +2 -32
  8. package/es/create-app-vue.d.ts +1 -1
  9. package/es/create-app-vue.mjs +1 -1
  10. package/es/hooks/design-view/designer/useDesignPreview.mjs +6 -4
  11. package/es/hooks/design-view/layout/useToolkit.mjs +4 -1
  12. package/es/hooks/index.d.ts +0 -1
  13. package/es/hooks/index.mjs +0 -1
  14. package/es/index.mjs +6 -9
  15. package/es/interface/index.d.ts +0 -1
  16. package/es/locale/sys/component.d.ts +4 -4
  17. package/es/locale/sys/pageDesigner.d.ts +5 -5
  18. package/es/props/design-plugin-props.d.ts +64 -0
  19. package/es/props/{index.mjs → design-plugin-props.mjs} +1 -1
  20. package/es/props/index.d.ts +1 -64
  21. package/es/register/index.d.ts +1 -0
  22. package/es/register/index.mjs +1 -0
  23. package/es/register/props-editor/props-editor.register.d.ts +24 -0
  24. package/es/register/props-editor/props-editor.register.mjs +30 -0
  25. package/es/types/index.d.ts +2 -1
  26. package/package.json +11 -11
  27. package/es/components/design-save-tip/design-save-tip.css +0 -107
  28. package/es/components/design-save-tip/design-save-tip.d.ts +0 -44
  29. package/es/components/design-save-tip/design-save-tip.mjs +0 -81
  30. package/es/components/design-step-check/design-step-check.css +0 -133
  31. package/es/components/design-step-check/design-step-check.d.ts +0 -30
  32. package/es/components/design-step-check/design-step-check.mjs +0 -96
  33. package/es/components/design-view-layout/design-view-layout.css +0 -157
  34. package/es/components/design-view-layout/design-view-layout.d.ts +0 -1
  35. package/es/components/design-view-layout/design-view-layout.mjs +0 -139
  36. package/es/components/modal-name-editor/modal-name-editor.css +0 -117
  37. package/es/components/modal-name-editor/modal-name-editor.d.ts +0 -34
  38. package/es/components/modal-name-editor/modal-name-editor.mjs +0 -124
  39. package/es/hooks/develop/useKeyParser.d.ts +0 -16
  40. package/es/hooks/develop/useKeyParser.mjs +0 -79
  41. package/es/interface/i-view-step/i-view-step.d.ts +0 -32
@@ -1,107 +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-save-tip {
66
- position: relative;
67
- padding: var(--gct-padding-7);
68
- padding-left: 38px;
69
- width: 316px;
70
- height: 140px;
71
- }
72
- .gct-design-save-tip__tip-icon {
73
- position: absolute;
74
- top: 17px;
75
- left: 16px;
76
- font-size: 16px;
77
- }
78
-
79
- .gct-design-save-tip__header {
80
- font-size: 14px;
81
- font-weight: bold;
82
- color: #1A1D23;
83
- }
84
-
85
- .gct-design-save-tip__content {
86
- font-size: 14px;
87
- margin-top: 2px;
88
- color: var(--gct-color-text-4);
89
- }
90
-
91
- .gct-design-save-tip__footer {
92
- margin-top: 16px;
93
- }
94
- .gct-design-save-tip__footer .ant-btn-link {
95
- padding-left: 0;
96
- padding-right: 0;
97
- margin-right: 40px;
98
- }
99
-
100
- .gct-design-save-tip__cancel-btn {
101
- width: 62px;
102
- margin-right: 12px;
103
- }
104
-
105
- .gct-design-save-tip__save-exit {
106
- width: 90px;
107
- }
@@ -1,44 +0,0 @@
1
- import { PropType } from 'vue';
2
- import { IModal } from '@gct-paas/core';
3
- export declare const DesignSaveTip: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
4
- modal: {
5
- type: PropType<IModal>;
6
- required: true;
7
- };
8
- title: {
9
- type: StringConstructor;
10
- default: () => string;
11
- };
12
- content: {
13
- type: StringConstructor;
14
- default: () => string;
15
- };
16
- exit: {
17
- type: PropType<() => void>;
18
- };
19
- saveAndExit: {
20
- type: PropType<() => void>;
21
- };
22
- }>, () => import("vue/jsx-runtime").JSX.Element, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
23
- modal: {
24
- type: PropType<IModal>;
25
- required: true;
26
- };
27
- title: {
28
- type: StringConstructor;
29
- default: () => string;
30
- };
31
- content: {
32
- type: StringConstructor;
33
- default: () => string;
34
- };
35
- exit: {
36
- type: PropType<() => void>;
37
- };
38
- saveAndExit: {
39
- type: PropType<() => void>;
40
- };
41
- }>> & Readonly<{}>, {
42
- title: string;
43
- content: string;
44
- }, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
@@ -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;