@opentiny/tiny-engine-canvas 1.0.0

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 (52) hide show
  1. package/.eslintrc.js +42 -0
  2. package/README.md +7 -0
  3. package/canvas.html +212 -0
  4. package/dist/index.js +48919 -0
  5. package/index.html +13 -0
  6. package/package.json +30 -0
  7. package/public/favicon.ico +0 -0
  8. package/src/Design.vue +53 -0
  9. package/src/assets/logo.png +0 -0
  10. package/src/canvas.js +34 -0
  11. package/src/components/builtin/CanvasBox.vue +22 -0
  12. package/src/components/builtin/CanvasCol.vue +89 -0
  13. package/src/components/builtin/CanvasCollection.js +278 -0
  14. package/src/components/builtin/CanvasCollection.vue +106 -0
  15. package/src/components/builtin/CanvasIcon.vue +30 -0
  16. package/src/components/builtin/CanvasImg.vue +18 -0
  17. package/src/components/builtin/CanvasPlaceholder.vue +26 -0
  18. package/src/components/builtin/CanvasRow.vue +67 -0
  19. package/src/components/builtin/CanvasRowColContainer.vue +42 -0
  20. package/src/components/builtin/CanvasSlot.vue +22 -0
  21. package/src/components/builtin/CanvasText.vue +18 -0
  22. package/src/components/builtin/builtin.json +955 -0
  23. package/src/components/builtin/helper.js +46 -0
  24. package/src/components/builtin/index.js +33 -0
  25. package/src/components/common/index.js +158 -0
  26. package/src/components/container/CanvasAction.vue +554 -0
  27. package/src/components/container/CanvasContainer.vue +244 -0
  28. package/src/components/container/CanvasDivider.vue +246 -0
  29. package/src/components/container/CanvasDragItem.vue +38 -0
  30. package/src/components/container/CanvasFooter.vue +86 -0
  31. package/src/components/container/CanvasMenu.vue +214 -0
  32. package/src/components/container/CanvasResize.vue +195 -0
  33. package/src/components/container/CanvasResizeBorder.vue +219 -0
  34. package/src/components/container/container.js +791 -0
  35. package/src/components/container/keyboard.js +147 -0
  36. package/src/components/container/shortCutPopover.vue +181 -0
  37. package/src/components/render/CanvasEmpty.vue +14 -0
  38. package/src/components/render/RenderMain.js +408 -0
  39. package/src/components/render/context.js +53 -0
  40. package/src/components/render/render.js +689 -0
  41. package/src/components/render/runner.js +140 -0
  42. package/src/i18n/en.json +5 -0
  43. package/src/i18n/zh.json +5 -0
  44. package/src/i18n.js +21 -0
  45. package/src/index.js +96 -0
  46. package/src/locale.js +19 -0
  47. package/src/lowcode.js +104 -0
  48. package/src/main.js +17 -0
  49. package/test/form.json +690 -0
  50. package/test/group.json +99 -0
  51. package/test/jsslot.json +427 -0
  52. package/vite.config.js +73 -0
package/.eslintrc.js ADDED
@@ -0,0 +1,42 @@
1
+ /**
2
+ * Copyright (c) 2023 - present TinyEngine Authors.
3
+ * Copyright (c) 2023 - present Huawei Cloud Computing Technologies Co., Ltd.
4
+ *
5
+ * Use of this source code is governed by an MIT-style license.
6
+ *
7
+ * THE OPEN SOURCE SOFTWARE IN THIS PRODUCT IS DISTRIBUTED IN THE HOPE THAT IT WILL BE USEFUL,
8
+ * BUT WITHOUT ANY WARRANTY, WITHOUT EVEN THE IMPLIED WARRANTY OF MERCHANTABILITY OR FITNESS FOR
9
+ * A PARTICULAR PURPOSE. SEE THE APPLICABLE LICENSES FOR MORE DETAILS.
10
+ *
11
+ */
12
+
13
+ module.exports = {
14
+ env: {
15
+ browser: true,
16
+ es2015: true,
17
+ node: true,
18
+ jest: true
19
+ },
20
+ extends: ['eslint:recommended', 'plugin:vue/vue3-essential'],
21
+ parser: 'vue-eslint-parser',
22
+ parserOptions: {
23
+ parser: '@babel/eslint-parser',
24
+ ecmaVersion: 'latest',
25
+ sourceType: 'module',
26
+ requireConfigFile: false,
27
+ babelOptions: {
28
+ parserOpts: {
29
+ plugins: ['jsx']
30
+ }
31
+ }
32
+ },
33
+ plugins: ['vue'],
34
+ rules: {
35
+ 'no-console': 'error',
36
+ 'no-debugger': 'error',
37
+ 'space-before-function-paren': 'off',
38
+ 'vue/multi-word-component-names': 'off',
39
+ 'no-use-before-define': 'error',
40
+ 'no-unused-vars': ['error', { ignoreRestSiblings: true, varsIgnorePattern: '^_', argsIgnorePattern: '^_' }]
41
+ }
42
+ }
package/README.md ADDED
@@ -0,0 +1,7 @@
1
+ # Vue 3 + Vite
2
+
3
+ This template should help get you started developing with Vue 3 in Vite. The template uses Vue 3 `<script setup>` SFCs, check out the [script setup docs](https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup) to learn more.
4
+
5
+ ## Recommended IDE Setup
6
+
7
+ - [VS Code](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=johnsoncodehk.volar)
package/canvas.html ADDED
@@ -0,0 +1,212 @@
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8" />
5
+ <link rel="icon" href="/favicon.ico" />
6
+ <meta name="viewport" content="width=device-width, initial-scale=1.0" />
7
+ <style type="text/css">
8
+ .loading-warp {
9
+ display: flex;
10
+ flex-direction: column;
11
+ justify-content: center;
12
+ position: fixed;
13
+ top: -75px;
14
+ bottom: 0;
15
+ left: 0;
16
+ right: 0;
17
+ }
18
+ .loading {
19
+ width: 60px;
20
+ height: 60px;
21
+ margin: 0 auto;
22
+ position: relative;
23
+ animation: load 3s linear infinite;
24
+ }
25
+ .loading div {
26
+ width: 100%;
27
+ height: 100%;
28
+ position: absolute;
29
+ }
30
+ .loading span {
31
+ display: inline-block;
32
+ width: 20px;
33
+ height: 20px;
34
+ border-radius: 50%;
35
+ background: #99cc66;
36
+ position: absolute;
37
+ left: 50%;
38
+ margin-top: -10px;
39
+ margin-left: -10px;
40
+ animation: changeBgColor 3s ease infinite;
41
+ }
42
+ @keyframes load {
43
+ 0% {
44
+ transform: rotate(0deg);
45
+ }
46
+ 33.3% {
47
+ transform: rotate(120deg);
48
+ }
49
+ 66.6% {
50
+ transform: rotate(240deg);
51
+ }
52
+ 100% {
53
+ transform: rotate(360deg);
54
+ }
55
+ }
56
+ @keyframes changeBgColor {
57
+ 0%,
58
+ 100% {
59
+ background: #99cc66;
60
+ }
61
+ 33.3% {
62
+ background: #ffff66;
63
+ }
64
+ 66.6% {
65
+ background: #ff6666;
66
+ }
67
+ }
68
+ .loading div:nth-child(2) {
69
+ transform: rotate(120deg);
70
+ }
71
+ .loading div:nth-child(3) {
72
+ transform: rotate(240deg);
73
+ }
74
+ .loading div:nth-child(2) span {
75
+ animation-delay: 1s;
76
+ }
77
+ .loading div:nth-child(3) span {
78
+ animation-delay: 2s;
79
+ }
80
+ html,
81
+ body,
82
+ object,
83
+ iframe,
84
+ p,
85
+ blockquote,
86
+ pre,
87
+ abbr,
88
+ address,
89
+ cite,
90
+ code,
91
+ del,
92
+ dfn,
93
+ em,
94
+ img,
95
+ ins,
96
+ kbd,
97
+ q,
98
+ samp,
99
+ small,
100
+ strong,
101
+ sub,
102
+ sup,
103
+ var,
104
+ b,
105
+ i,
106
+ dl,
107
+ dt,
108
+ dd,
109
+ ol,
110
+ ul,
111
+ li,
112
+ fieldset,
113
+ form,
114
+ label,
115
+ legend,
116
+ table,
117
+ caption,
118
+ tbody,
119
+ tfoot,
120
+ thead,
121
+ tr,
122
+ th,
123
+ td,
124
+ article,
125
+ aside,
126
+ canvas,
127
+ details,
128
+ figcaption,
129
+ figure,
130
+ footer,
131
+ header,
132
+ hgroup,
133
+ menu,
134
+ nav,
135
+ section,
136
+ summary,
137
+ time,
138
+ mark,
139
+ audio,
140
+ video {
141
+ margin: 0;
142
+ padding: 0;
143
+ border: 0;
144
+ outline: 0;
145
+ font-size: 100%;
146
+ background: transparent;
147
+ user-select: none;
148
+ }
149
+ html,
150
+ body {
151
+ width: 100%;
152
+ height: 100%;
153
+ }
154
+
155
+ body {
156
+ overflow-y: scroll;
157
+ }
158
+ .design-canvas {
159
+ margin: 0;
160
+ padding: 0;
161
+ }
162
+
163
+ body::-webkit-scrollbar {
164
+ width: 8px;
165
+ }
166
+ body::-webkit-scrollbar-track {
167
+ background-color: var(--ti-lowcode-canvas-iframe-scrollbar-track-color);
168
+ }
169
+ body::-webkit-scrollbar-thumb {
170
+ background-color: var(--ti-lowcode-canvas-iframe-scrollbar-thumb-color);
171
+ border-radius: 4px;
172
+ }
173
+ .design-page {
174
+ display: block;
175
+ padding: 18px 10px 0 10px;
176
+ }
177
+ .design-page .tiny-row .tiny-col:empty {
178
+ min-height: 30px;
179
+ border: '1px solid #ccc';
180
+ }
181
+ .canvas-container {
182
+ background: #f1f1f1;
183
+ }
184
+ .canvas-container .container-box {
185
+ background-repeat: no-repeat;
186
+ background-size: 1px 100%, 100% 1px;
187
+ background-position: 100% 0, 100% 100%;
188
+ position: relative;
189
+ height: 30px;
190
+ background-image: linear-gradient(-90deg, #e0e0e0, #e0e0e0), linear-gradient(-180deg, #e0e0e0, #e0e0e0);
191
+ }
192
+ .canvas-container .container-box .container-tip {
193
+ background-repeat: no-repeat;
194
+ background-size: 1px 100%, 100% 1px;
195
+ background-position: initial;
196
+ font-size: 14px;
197
+ font-weight: 400;
198
+ height: 100%;
199
+ display: flex;
200
+ align-items: center;
201
+ justify-content: center;
202
+ color: #a7b1bd;
203
+ background-image: linear-gradient(-90deg, #e0e0e0, #e0e0e0), linear-gradient(-180deg, #e0e0e0, #e0e0e0);
204
+ }
205
+ </style>
206
+ <title>Vite App</title>
207
+ </head>
208
+ <body>
209
+ <div id="app"></div>
210
+ <script type="module" src="/src/canvas.js"></script>
211
+ </body>
212
+ </html>