starfish-editor-custom 1.0.4 → 1.0.6

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 (24) hide show
  1. package/components.d.ts +0 -1
  2. package/dist/ConditionModule.js +0 -1
  3. package/dist/ConditionSelect.js +0 -1
  4. package/dist/CustomDialog.js +0 -1
  5. package/dist/formStyle.js +0 -1
  6. package/dist/globalFormList.js +0 -1
  7. package/dist/jsonCode.js +0 -1
  8. package/dist/jsonEditor.js +0 -1
  9. package/dist/main.js +165 -235
  10. package/dist/starfish-editor.es.js +0 -1
  11. package/dist/style.css +1 -1
  12. package/dist/types/editor/src/common/formJson.d.ts +0 -22
  13. package/package.json +2 -2
  14. package/src/common/formJson.ts +32 -32
  15. package/src/components/ComponentList.vue +2 -2
  16. package/src/components/NavList.vue +2 -2
  17. package/src/components/PropsPanel.vue +8 -7
  18. package/src/controller/ui.ts +3 -2
  19. package/src/styles/component-list.scss +7 -4
  20. package/src/styles/framework.scss +150 -150
  21. package/src/styles/nav-list.scss +60 -59
  22. package/src/styles/props-panel.scss +117 -116
  23. package/src/styles/work-space.scss +126 -126
  24. package/stats.html +1 -1
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: 300px;
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
+ }
package/src/styles/nav-list.scss CHANGED
@@ -1,59 +1,60 @@
1
- .starfish-editor {
2
- .nav_list {
3
- height: 40px;
4
- display: flex;
5
- align-items: center;
6
- justify-content: space-between;
7
- background-color: $editor-nav-background-color;
8
- box-sizing: border-box;
9
- border-bottom: 2px solid #d8dee8;
10
- padding: 0 15px;
11
- .detailBtn {
12
- span {
13
- padding: 0 5px;
14
- font-size: 18px;
15
- }
16
- .noactive {
17
- color: #a1a7b0;
18
- cursor: no-drop;
19
- }
20
- }
21
- .pageBtn {
22
- white-space: nowrap;
23
- > div {
24
- margin: 0 5px;
25
- }
26
- .el-button-group {
27
- span {
28
- margin-right: 5px;
29
- }
30
- i {
31
- font-size: 18px;
32
- }
33
- .info {
34
- color: var(--el-color-primary);
35
- }
36
- }
37
- }
38
- :deep(.demo-drawer) {
39
- width: 20% !important;
40
- }
41
- }
42
- }
43
- .codeDialog {
44
- height: auto;
45
- .custom_code {
46
- height: 100%;
47
- flex: 1;
48
- .upload-demo {
49
- margin-top: 20px;
50
- }
51
- }
52
- }
53
- .custom-tree-node {
54
- display: flex;
55
- align-items: center;
56
- span:last-child {
57
- justify-content: flex-end;
58
- }
59
- }
1
+ .starfish-editor {
2
+ .nav_list {
3
+ height: 40px;
4
+ display: flex;
5
+ align-items: center;
6
+ justify-content: space-between;
7
+ background-color: $editor-nav-background-color;
8
+ box-sizing: border-box;
9
+ border-bottom: 2px solid #d8dee8;
10
+ padding: 0 15px;
11
+ .detailBtn {
12
+ span {
13
+ padding: 0 5px;
14
+ font-size: 16px;
15
+ color: #03c0ff;
16
+ }
17
+ .noactive {
18
+ color: #a1a7b0;
19
+ cursor: no-drop;
20
+ }
21
+ }
22
+ .pageBtn {
23
+ white-space: nowrap;
24
+ > div {
25
+ margin: 0 5px;
26
+ }
27
+ .el-button-group {
28
+ span {
29
+ margin-right: 12px;
30
+ }
31
+ i {
32
+ font-size: 16px;
33
+ }
34
+ .info {
35
+ color: var(--el-color-primary);
36
+ }
37
+ }
38
+ }
39
+ :deep(.demo-drawer) {
40
+ width: 20% !important;
41
+ }
42
+ }
43
+ }
44
+ .codeDialog {
45
+ height: auto;
46
+ .custom_code {
47
+ height: 100%;
48
+ flex: 1;
49
+ .upload-demo {
50
+ margin-top: 20px;
51
+ }
52
+ }
53
+ }
54
+ .custom-tree-node {
55
+ display: flex;
56
+ align-items: center;
57
+ span:last-child {
58
+ justify-content: flex-end;
59
+ }
60
+ }
package/src/styles/props-panel.scss CHANGED
@@ -1,116 +1,117 @@
1
- .starfish-editor {
2
- .editor_pages_right {
3
- width: 100%;
4
- height: 100%;
5
- // position: fixed;
6
- // right: 0;
7
- background: white;
8
- // padding: 30px 0;
9
- z-index: 1;
10
- position: relative;
11
- display: flex;
12
- overflow: hidden;
13
- .demo-tabs {
14
- flex: 1;
15
- flex-direction: column;
16
- .el-tabs__nav {
17
- display: flex;
18
- justify-content: space-around;
19
- width: 100%;
20
- }
21
- }
22
- .form_tab3 {
23
- padding: 5px;
24
- .form_tab3_list {
25
- margin-bottom: 15px;
26
- }
27
- }
28
- .json {
29
- padding: 10px;
30
- height: 100%;
31
- > div {
32
- height: 90%;
33
- }
34
- }
35
- .el-tabs__content {
36
- padding: 0;
37
- height: 100%;
38
- > div {
39
- height: 100%;
40
- }
41
- }
42
- &.editor_transition {
43
- transition: all 0.5s ease-in-out 0s;
44
- }
45
- .editor_container {
46
- // position: absolute;
47
- // left: 0;
48
- // top: 0;
49
- padding-top: 30px;
50
- box-sizing: border-box;
51
- height: 100%;
52
- border-right: 1px solid $resizer_background_color;
53
- margin-right: 5px;
54
- }
55
- .controlLine {
56
- position: absolute;
57
- left: 0;
58
- height: 100%;
59
- width: 5px;
60
- background: red;
61
- z-index: 2;
62
- &:hover {
63
- background: $blue;
64
- cursor: ew-resize;
65
- }
66
- }
67
- .viewAndJson {
68
- display: flex;
69
- justify-content: center;
70
- justify-items: center;
71
- margin: 5px auto;
72
- width: 80%;
73
- > div {
74
- width: 30%;
75
- border: 3px solid rgb(121, 118, 118);
76
- height: 30px;
77
- line-height: 30px;
78
- text-align: center;
79
- border-radius: 5px;
80
- &.active {
81
- border-color: $blue;
82
- color: $blue;
83
- }
84
- }
85
- }
86
- .dynamic {
87
- overflow: auto;
88
- height: 100%;
89
- @include scrollbar();
90
- }
91
-
92
- &.editor_pages_right_visible {
93
- right: 0;
94
- }
95
- &.editor_pages_right_hidden {
96
- transform: translateX(100%);
97
- // right: -100%;
98
- }
99
- .editor_right_accept {
100
- width: 20px;
101
- height: 80px;
102
- background: #fff;
103
- box-shadow: -2px 0 4px 0 rgba(0, 0, 0, 0.1);
104
- display: flex;
105
- justify-content: center;
106
- align-items: center;
107
- right: 304px;
108
- top: 50%;
109
- margin-top: -32px;
110
- transform: translateY(-50%);
111
- cursor: pointer;
112
- position: absolute;
113
- left: -28px;
114
- }
115
- }
116
- }
1
+ .starfish-editor {
2
+ .editor_pages_right {
3
+ width: 100%;
4
+ height: 100%;
5
+ // position: fixed;
6
+ // right: 0;
7
+ background: white;
8
+ // padding: 30px 0;
9
+ z-index: 1;
10
+ position: relative;
11
+ display: flex;
12
+ overflow: hidden;
13
+ .demo-tabs {
14
+ width: 320px;
15
+ flex: 1;
16
+ flex-direction: column;
17
+ .el-tabs__nav {
18
+ display: flex;
19
+ justify-content: space-around;
20
+ width: 100%;
21
+ }
22
+ }
23
+ .form_tab3 {
24
+ padding: 5px;
25
+ .form_tab3_list {
26
+ margin-bottom: 15px;
27
+ }
28
+ }
29
+ .json {
30
+ padding: 10px;
31
+ height: 100%;
32
+ > div {
33
+ height: 90%;
34
+ }
35
+ }
36
+ .el-tabs__content {
37
+ padding: 0;
38
+ height: 100%;
39
+ > div {
40
+ height: 100%;
41
+ }
42
+ }
43
+ &.editor_transition {
44
+ transition: all 0.5s ease-in-out 0s;
45
+ }
46
+ .editor_container {
47
+ // position: absolute;
48
+ // left: 0;
49
+ // top: 0;
50
+ padding-top: 30px;
51
+ box-sizing: border-box;
52
+ height: 100%;
53
+ border-right: 1px solid $resizer_background_color;
54
+ margin-right: 5px;
55
+ }
56
+ .controlLine {
57
+ position: absolute;
58
+ left: 0;
59
+ height: 100%;
60
+ width: 5px;
61
+ background: red;
62
+ z-index: 2;
63
+ &:hover {
64
+ background: $blue;
65
+ cursor: ew-resize;
66
+ }
67
+ }
68
+ .viewAndJson {
69
+ display: flex;
70
+ justify-content: center;
71
+ justify-items: center;
72
+ margin: 5px auto;
73
+ width: 80%;
74
+ > div {
75
+ width: 30%;
76
+ border: 3px solid rgb(121, 118, 118);
77
+ height: 30px;
78
+ line-height: 30px;
79
+ text-align: center;
80
+ border-radius: 5px;
81
+ &.active {
82
+ border-color: $blue;
83
+ color: $blue;
84
+ }
85
+ }
86
+ }
87
+ .dynamic {
88
+ overflow: auto;
89
+ height: 100%;
90
+ @include scrollbar();
91
+ }
92
+
93
+ &.editor_pages_right_visible {
94
+ right: 0;
95
+ }
96
+ &.editor_pages_right_hidden {
97
+ transform: translateX(100%);
98
+ // right: -100%;
99
+ }
100
+ .editor_right_accept {
101
+ width: 20px;
102
+ height: 80px;
103
+ background: #fff;
104
+ box-shadow: -2px 0 4px 0 rgba(0, 0, 0, 0.1);
105
+ display: flex;
106
+ justify-content: center;
107
+ align-items: center;
108
+ right: 304px;
109
+ top: 50%;
110
+ margin-top: -32px;
111
+ transform: translateY(-50%);
112
+ cursor: pointer;
113
+ position: absolute;
114
+ left: -28px;
115
+ }
116
+ }
117
+ }