starfish-editor-custom 1.0.41 → 1.0.43

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 (44) hide show
  1. package/dist/ConditionModule.js +46 -56
  2. package/dist/ConditionSelect.js +23 -29
  3. package/dist/CustomDialog.js +1 -1
  4. package/dist/formStyle.js +26 -20
  5. package/dist/jsonCode.js +1 -1
  6. package/dist/jsonEditor.js +1 -1
  7. package/dist/main.js +275 -247
  8. package/dist/types/editor/src/common/ConditionSelect/ConditionGroup.vue.d.ts +0 -18
  9. package/dist/types/editor/src/common/ConditionSelect/ConditionModule.vue.d.ts +0 -17
  10. package/dist/types/editor/src/common/ConditionSelect/ConditionTanc.vue.d.ts +0 -30
  11. package/dist/types/editor/src/common/ConditionSelect.vue.d.ts +36 -14
  12. package/dist/types/editor/src/common/CustomDialog.vue.d.ts +11 -12
  13. package/dist/types/editor/src/common/Loading.vue.d.ts +2 -2
  14. package/dist/types/editor/src/common/jsonCode.vue.d.ts +104 -9
  15. package/dist/types/editor/src/components/ComponentList.vue.d.ts +31 -2
  16. package/dist/types/editor/src/components/FormPreview.vue.d.ts +56 -8
  17. package/dist/types/editor/src/components/Nav.vue.d.ts +2 -2
  18. package/dist/types/editor/src/components/PropsPanel.vue.d.ts +24 -16
  19. package/dist/types/editor/src/components/Shape.vue.d.ts +9 -10
  20. package/dist/types/editor/src/components/Workspace.vue.d.ts +8 -9
  21. package/dist/types/editor/src/components/globalFormList.vue.d.ts +2 -3
  22. package/dist/types/editor/src/components/jsonEditor.vue.d.ts +3 -4
  23. package/dist/types/editor/src/controller/action.d.ts +1 -1
  24. package/dist/types/editor/src/controller/form.d.ts +1 -1
  25. package/dist/types/editor/src/controller/history.d.ts +1 -1
  26. package/dist/types/editor/src/controller/shortcut.d.ts +1 -1
  27. package/dist/types/editor/src/controller/ui.d.ts +1 -1
  28. package/dist/types/editor/src/layouts/ControlEditSize.vue.d.ts +12 -6
  29. package/dist/types/editor/src/layouts/Framework.vue.d.ts +18 -6
  30. package/dist/types/editor/src/layouts/Resizer.vue.d.ts +6 -7
  31. package/dist/types/editor/src/layouts/ShortcutKey.vue.d.ts +4 -4
  32. package/dist/types/editor/src/starfish-editor.vue.d.ts +16 -10
  33. package/dist/types/editor/src/type.d.ts +7 -7
  34. package/dist/types/editor/src/utils/formKeycon.d.ts +1 -1
  35. package/package.json +55 -65
  36. package/src/controller/shortcut.ts +1 -1
  37. package/src/styles/component-list.scss +74 -74
  38. package/src/styles/custom-dialog.scss +110 -110
  39. package/src/styles/form-preview.scss +50 -50
  40. package/src/styles/framework.scss +150 -150
  41. package/src/styles/nav-list.scss +60 -60
  42. package/src/styles/props-panel.scss +124 -124
  43. package/src/styles/work-space.scss +129 -129
  44. package/stats.html +3690 -4918
package/src/styles/custom-dialog.scss CHANGED
@@ -1,110 +1,110 @@
1
- .MyDialogFrame {
2
- position: fixed;
3
- width: 100%;
4
- height: 100%;
5
- left: 0;
6
- top: 0;
7
- z-index: 2000;
8
- .fade-enter-active,
9
- .fade-leave-active {
10
- transition: opacity 2s ease;
11
- }
12
-
13
- .fade-enter-from,
14
- .fade-leave-to {
15
- opacity: 0;
16
- }
17
- .MyDialogBody {
18
- width: 80%;
19
- height: 90%;
20
- position: fixed;
21
- left: 50%;
22
- top: 50%;
23
- transform: translate(-50%, -50%);
24
- -webkit-transform: translate(-50%, -50%);
25
- z-index: 5;
26
- }
27
- .fullscreen {
28
- width: 100% !important;
29
- height: 100% !important;
30
- }
31
-
32
- .myDialogMask {
33
- position: fixed;
34
- width: 100%;
35
- height: 100%;
36
- background-color: rgba(0, 0, 0, 0.6);
37
- z-index: 4;
38
- }
39
- .my-pageContainer {
40
- background-color: #fff;
41
- border: 1px solid #e4e7ed;
42
- height: 100%;
43
- border-radius: 3px;
44
- overflow: hidden;
45
-
46
- .my-pageMain {
47
- padding: 0;
48
- }
49
-
50
- .my-icon {
51
- float: left;
52
- width: 30px;
53
- overflow: hidden;
54
- border-radius: 50%;
55
- text-align: center;
56
- position: relative;
57
- font-size: 18px;
58
- }
59
-
60
- .my-title {
61
- float: left;
62
- margin-left: 5px;
63
- }
64
-
65
- .my-toolbar {
66
- float: right;
67
- }
68
-
69
- .my-toolbtn {
70
- background-color: transparent;
71
- border: 0;
72
- padding: 0;
73
- line-height: 48px;
74
- overflow: hidden;
75
-
76
- .icon {
77
- font-size: 20px;
78
- }
79
- }
80
-
81
- .my-toolbtn:hover,
82
- .my-toolbtn:focus {
83
- color: #333;
84
- }
85
-
86
- .my-toolbtn:hover {
87
- transform: scale(1.3);
88
- }
89
-
90
- .my-Footer {
91
- text-align: right;
92
- padding-top: 3px;
93
- border-top: 1px solid #ebeef5;
94
- position: absolute;
95
- bottom: 0;
96
- width: 100%;
97
- display: flex;
98
- align-items: center;
99
- justify-content: flex-end;
100
- }
101
- }
102
- }
103
- .my-pageHeader {
104
- display: flex;
105
- gap: 8px;
106
- height: 32px;
107
- line-height: 32px;
108
- padding-left: 10px;
109
- padding-right: 10px;
110
- }
1
+ .MyDialogFrame {
2
+ position: fixed;
3
+ width: 100%;
4
+ height: 100%;
5
+ left: 0;
6
+ top: 0;
7
+ z-index: 2000;
8
+ .fade-enter-active,
9
+ .fade-leave-active {
10
+ transition: opacity 2s ease;
11
+ }
12
+
13
+ .fade-enter-from,
14
+ .fade-leave-to {
15
+ opacity: 0;
16
+ }
17
+ .MyDialogBody {
18
+ width: 80%;
19
+ height: 90%;
20
+ position: fixed;
21
+ left: 50%;
22
+ top: 50%;
23
+ transform: translate(-50%, -50%);
24
+ -webkit-transform: translate(-50%, -50%);
25
+ z-index: 5;
26
+ }
27
+ .fullscreen {
28
+ width: 100% !important;
29
+ height: 100% !important;
30
+ }
31
+
32
+ .myDialogMask {
33
+ position: fixed;
34
+ width: 100%;
35
+ height: 100%;
36
+ background-color: rgba(0, 0, 0, 0.6);
37
+ z-index: 4;
38
+ }
39
+ .my-pageContainer {
40
+ background-color: #fff;
41
+ border: 1px solid #e4e7ed;
42
+ height: 100%;
43
+ border-radius: 3px;
44
+ overflow: hidden;
45
+
46
+ .my-pageMain {
47
+ padding: 0;
48
+ }
49
+
50
+ .my-icon {
51
+ float: left;
52
+ width: 30px;
53
+ overflow: hidden;
54
+ border-radius: 50%;
55
+ text-align: center;
56
+ position: relative;
57
+ font-size: 18px;
58
+ }
59
+
60
+ .my-title {
61
+ float: left;
62
+ margin-left: 5px;
63
+ }
64
+
65
+ .my-toolbar {
66
+ float: right;
67
+ }
68
+
69
+ .my-toolbtn {
70
+ background-color: transparent;
71
+ border: 0;
72
+ padding: 0;
73
+ line-height: 48px;
74
+ overflow: hidden;
75
+
76
+ .icon {
77
+ font-size: 20px;
78
+ }
79
+ }
80
+
81
+ .my-toolbtn:hover,
82
+ .my-toolbtn:focus {
83
+ color: #333;
84
+ }
85
+
86
+ .my-toolbtn:hover {
87
+ transform: scale(1.3);
88
+ }
89
+
90
+ .my-Footer {
91
+ text-align: right;
92
+ padding-top: 3px;
93
+ border-top: 1px solid #ebeef5;
94
+ position: absolute;
95
+ bottom: 0;
96
+ width: 100%;
97
+ display: flex;
98
+ align-items: center;
99
+ justify-content: flex-end;
100
+ }
101
+ }
102
+ }
103
+ .my-pageHeader {
104
+ display: flex;
105
+ gap: 8px;
106
+ height: 32px;
107
+ line-height: 32px;
108
+ padding-left: 10px;
109
+ padding-right: 10px;
110
+ }
package/src/styles/form-preview.scss CHANGED
@@ -1,50 +1,50 @@
1
- .previewDialog {
2
- .previewList {
3
- background: #f0f2f5;
4
- }
5
- .editor-content {
6
- color: #333;
7
- }
8
- .page_box {
9
- height: 85%;
10
- margin: 0 auto;
11
- width: 100%;
12
- overflow-y: auto;
13
- &.PC_layout {
14
- width: 100%;
15
- border: 10px solid transparent;
16
- }
17
- &.Pad_layout {
18
- width: 800px;
19
- border-radius: 15px;
20
- border: 10px solid #495060;
21
- }
22
- &.H5_layout {
23
- width: 443px;
24
- border-radius: 15px;
25
- border: 10px solid #495060;
26
- }
27
- }
28
-
29
- .formconfig {
30
- height: 100%;
31
- overflow: scroll;
32
- @include scrollbar();
33
- .el-form {
34
- padding-bottom: 0;
35
- }
36
- }
37
- .custom_code {
38
- padding: 15px;
39
- min-height: 400px;
40
- }
41
- .my-Footer {
42
- text-align: center;
43
- display: flex;
44
- align-items: center;
45
- justify-content: center;
46
- }
47
- .codeDialog {
48
- height: auto !important;
49
- }
50
- }
1
+ .previewDialog {
2
+ .previewList {
3
+ background: #f0f2f5;
4
+ }
5
+ .editor-content {
6
+ color: #333;
7
+ }
8
+ .page_box {
9
+ height: 85%;
10
+ margin: 0 auto;
11
+ width: 100%;
12
+ overflow-y: auto;
13
+ &.PC_layout {
14
+ width: 100%;
15
+ border: 10px solid transparent;
16
+ }
17
+ &.Pad_layout {
18
+ width: 800px;
19
+ border-radius: 15px;
20
+ border: 10px solid #495060;
21
+ }
22
+ &.H5_layout {
23
+ width: 443px;
24
+ border-radius: 15px;
25
+ border: 10px solid #495060;
26
+ }
27
+ }
28
+
29
+ .formconfig {
30
+ height: 100%;
31
+ overflow: scroll;
32
+ @include scrollbar();
33
+ .el-form {
34
+ padding-bottom: 0;
35
+ }
36
+ }
37
+ .custom_code {
38
+ padding: 15px;
39
+ min-height: 400px;
40
+ }
41
+ .my-Footer {
42
+ text-align: center;
43
+ display: flex;
44
+ align-items: center;
45
+ justify-content: center;
46
+ }
47
+ .codeDialog {
48
+ height: auto !important;
49
+ }
50
+ }
package/src/styles/framework.scss CHANGED
@@ -1,150 +1,150 @@
1
- .starfish-editor {
2
- height: 100%;
3
- display: flex;
4
- flex-direction: column;
5
- &-content {
6
- display: flex;
7
- height: calc(100% - #{$editor_nav});
8
- &-page {
9
- height: 100%;
10
- }
11
- }
12
- &-framework {
13
- &-left {
14
- width: 232px;
15
- position: relative;
16
- &.hide-status {
17
- .container-left-arrow::after {
18
- -webkit-transform: translate(-50%, -50%) rotate(180deg);
19
- transform: translate(-50%, -50%) rotate(180deg);
20
- left: 60%;
21
- }
22
- }
23
- .container-left-arrow {
24
- position: absolute;
25
- width: 16px;
26
- height: 50px;
27
- top: 50%;
28
- right: -19px;
29
- transform: translateY(-50%);
30
- background-color: transparent;
31
- box-sizing: border-box;
32
- z-index: 10;
33
- cursor: pointer;
34
- display: flex;
35
- flex-direction: column;
36
- align-items: center;
37
- justify-content: center;
38
- &:before {
39
- content: "";
40
- position: absolute;
41
- border-radius: 0 10px 10px 0;
42
- -webkit-box-sizing: border-box;
43
- box-sizing: border-box;
44
- border-left: 0;
45
- border-color: #e0e0e0;
46
- border-style: solid;
47
- top: 0;
48
- right: 0;
49
- bottom: 0;
50
- left: 0;
51
- background: #fff;
52
- z-index: -1;
53
- transform: perspective(50px) rotateY(30deg);
54
- /* transform:perspective(50px) rotateY(30deg); */
55
- /* -webkit-transition:all .15s; */
56
- transition: all 0.15s;
57
- }
58
- &:after {
59
- content: "";
60
- display: block;
61
- position: absolute;
62
- width: 0;
63
- height: 0;
64
- border-width: 5px;
65
- border-color: transparent;
66
- border-right-color: #a1a6b3;
67
- border-style: solid;
68
- left: 20%;
69
- top: 50%;
70
- -webkit-mask-size: 100% 100%;
71
- mask-size: 100% 100%;
72
- -webkit-mask-repeat: no-repeat;
73
- mask-repeat: no-repeat;
74
- -webkit-transform: translate(-50%, -50%) rotate(0deg);
75
- transform: translate(-50%, -50%) rotate(0deg);
76
- }
77
- }
78
- }
79
- &-center {
80
- flex: 1;
81
- }
82
- &-right {
83
- width: 378px;
84
- position: relative;
85
- &.hide-status {
86
- .container-right-arrow::after {
87
- -webkit-transform: translate(-50%, -50%) rotate(0deg);
88
- transform: translate(-50%, -50%) rotate(0deg);
89
- left: 45%;
90
- }
91
- }
92
-
93
- .container-right-arrow {
94
- position: absolute;
95
- width: 16px;
96
- height: 50px;
97
- top: 50%;
98
- left: -19px;
99
- transform: translateY(-50%);
100
- background-color: transparent;
101
- box-sizing: border-box;
102
- z-index: 10;
103
- cursor: pointer;
104
- display: flex;
105
- flex-direction: column;
106
- align-items: center;
107
- justify-content: center;
108
- &:before {
109
- content: "";
110
- position: absolute;
111
- border-radius: 10px 0 0 10px;
112
- -webkit-box-sizing: border-box;
113
- box-sizing: border-box;
114
- border-right: 0;
115
- border-color: #e0e0e0;
116
- border-style: solid;
117
- top: 0;
118
- right: 0;
119
- bottom: 0;
120
- left: 0;
121
- background: #fff;
122
- z-index: -1;
123
- -webkit-transform: perspective(50px) rotateY(-30deg);
124
- transform: perspective(50px) rotateY(-30deg);
125
- -webkit-transition: all 0.15s;
126
- transition: all 0.15s;
127
- }
128
- &:after {
129
- content: "";
130
- display: block;
131
- position: absolute;
132
- width: 0;
133
- height: 0;
134
- border-width: 5px;
135
- border-color: transparent;
136
- border-right-color: #a1a6b3;
137
- border-style: solid;
138
- left: 75%;
139
- top: 50%;
140
- -webkit-mask-size: 100% 100%;
141
- mask-size: 100% 100%;
142
- -webkit-mask-repeat: no-repeat;
143
- mask-repeat: no-repeat;
144
- -webkit-transform: translate(-50%, -50%) rotate(180deg);
145
- transform: translate(-50%, -50%) rotate(180deg);
146
- }
147
- }
148
- }
149
- }
150
- }
1
+ .starfish-editor {
2
+ height: 100%;
3
+ display: flex;
4
+ flex-direction: column;
5
+ &-content {
6
+ display: flex;
7
+ height: calc(100% - #{$editor_nav});
8
+ &-page {
9
+ height: 100%;
10
+ }
11
+ }
12
+ &-framework {
13
+ &-left {
14
+ width: 232px;
15
+ position: relative;
16
+ &.hide-status {
17
+ .container-left-arrow::after {
18
+ -webkit-transform: translate(-50%, -50%) rotate(180deg);
19
+ transform: translate(-50%, -50%) rotate(180deg);
20
+ left: 60%;
21
+ }
22
+ }
23
+ .container-left-arrow {
24
+ position: absolute;
25
+ width: 16px;
26
+ height: 50px;
27
+ top: 50%;
28
+ right: -19px;
29
+ transform: translateY(-50%);
30
+ background-color: transparent;
31
+ box-sizing: border-box;
32
+ z-index: 10;
33
+ cursor: pointer;
34
+ display: flex;
35
+ flex-direction: column;
36
+ align-items: center;
37
+ justify-content: center;
38
+ &:before {
39
+ content: "";
40
+ position: absolute;
41
+ border-radius: 0 10px 10px 0;
42
+ -webkit-box-sizing: border-box;
43
+ box-sizing: border-box;
44
+ border-left: 0;
45
+ border-color: #e0e0e0;
46
+ border-style: solid;
47
+ top: 0;
48
+ right: 0;
49
+ bottom: 0;
50
+ left: 0;
51
+ background: #fff;
52
+ z-index: -1;
53
+ transform: perspective(50px) rotateY(30deg);
54
+ /* transform:perspective(50px) rotateY(30deg); */
55
+ /* -webkit-transition:all .15s; */
56
+ transition: all 0.15s;
57
+ }
58
+ &:after {
59
+ content: "";
60
+ display: block;
61
+ position: absolute;
62
+ width: 0;
63
+ height: 0;
64
+ border-width: 5px;
65
+ border-color: transparent;
66
+ border-right-color: #a1a6b3;
67
+ border-style: solid;
68
+ left: 20%;
69
+ top: 50%;
70
+ -webkit-mask-size: 100% 100%;
71
+ mask-size: 100% 100%;
72
+ -webkit-mask-repeat: no-repeat;
73
+ mask-repeat: no-repeat;
74
+ -webkit-transform: translate(-50%, -50%) rotate(0deg);
75
+ transform: translate(-50%, -50%) rotate(0deg);
76
+ }
77
+ }
78
+ }
79
+ &-center {
80
+ flex: 1;
81
+ }
82
+ &-right {
83
+ width: 378px;
84
+ position: relative;
85
+ &.hide-status {
86
+ .container-right-arrow::after {
87
+ -webkit-transform: translate(-50%, -50%) rotate(0deg);
88
+ transform: translate(-50%, -50%) rotate(0deg);
89
+ left: 45%;
90
+ }
91
+ }
92
+
93
+ .container-right-arrow {
94
+ position: absolute;
95
+ width: 16px;
96
+ height: 50px;
97
+ top: 50%;
98
+ left: -19px;
99
+ transform: translateY(-50%);
100
+ background-color: transparent;
101
+ box-sizing: border-box;
102
+ z-index: 10;
103
+ cursor: pointer;
104
+ display: flex;
105
+ flex-direction: column;
106
+ align-items: center;
107
+ justify-content: center;
108
+ &:before {
109
+ content: "";
110
+ position: absolute;
111
+ border-radius: 10px 0 0 10px;
112
+ -webkit-box-sizing: border-box;
113
+ box-sizing: border-box;
114
+ border-right: 0;
115
+ border-color: #e0e0e0;
116
+ border-style: solid;
117
+ top: 0;
118
+ right: 0;
119
+ bottom: 0;
120
+ left: 0;
121
+ background: #fff;
122
+ z-index: -1;
123
+ -webkit-transform: perspective(50px) rotateY(-30deg);
124
+ transform: perspective(50px) rotateY(-30deg);
125
+ -webkit-transition: all 0.15s;
126
+ transition: all 0.15s;
127
+ }
128
+ &:after {
129
+ content: "";
130
+ display: block;
131
+ position: absolute;
132
+ width: 0;
133
+ height: 0;
134
+ border-width: 5px;
135
+ border-color: transparent;
136
+ border-right-color: #a1a6b3;
137
+ border-style: solid;
138
+ left: 75%;
139
+ top: 50%;
140
+ -webkit-mask-size: 100% 100%;
141
+ mask-size: 100% 100%;
142
+ -webkit-mask-repeat: no-repeat;
143
+ mask-repeat: no-repeat;
144
+ -webkit-transform: translate(-50%, -50%) rotate(180deg);
145
+ transform: translate(-50%, -50%) rotate(180deg);
146
+ }
147
+ }
148
+ }
149
+ }
150
+ }