@opentiny/tiny-engine-canvas 1.0.0 → 1.0.2-beta.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/LICENSE +22 -0
  2. package/dist/index.js +24773 -26823
  3. package/package.json +39 -30
  4. package/.eslintrc.js +0 -42
  5. package/canvas.html +0 -212
  6. package/index.html +0 -13
  7. package/public/favicon.ico +0 -0
  8. package/src/Design.vue +0 -53
  9. package/src/assets/logo.png +0 -0
  10. package/src/canvas.js +0 -34
  11. package/src/components/builtin/CanvasBox.vue +0 -22
  12. package/src/components/builtin/CanvasCol.vue +0 -89
  13. package/src/components/builtin/CanvasCollection.js +0 -278
  14. package/src/components/builtin/CanvasCollection.vue +0 -106
  15. package/src/components/builtin/CanvasIcon.vue +0 -30
  16. package/src/components/builtin/CanvasImg.vue +0 -18
  17. package/src/components/builtin/CanvasPlaceholder.vue +0 -26
  18. package/src/components/builtin/CanvasRow.vue +0 -67
  19. package/src/components/builtin/CanvasRowColContainer.vue +0 -42
  20. package/src/components/builtin/CanvasSlot.vue +0 -22
  21. package/src/components/builtin/CanvasText.vue +0 -18
  22. package/src/components/builtin/builtin.json +0 -955
  23. package/src/components/builtin/helper.js +0 -46
  24. package/src/components/builtin/index.js +0 -33
  25. package/src/components/common/index.js +0 -158
  26. package/src/components/container/CanvasAction.vue +0 -554
  27. package/src/components/container/CanvasContainer.vue +0 -244
  28. package/src/components/container/CanvasDivider.vue +0 -246
  29. package/src/components/container/CanvasDragItem.vue +0 -38
  30. package/src/components/container/CanvasFooter.vue +0 -86
  31. package/src/components/container/CanvasMenu.vue +0 -214
  32. package/src/components/container/CanvasResize.vue +0 -195
  33. package/src/components/container/CanvasResizeBorder.vue +0 -219
  34. package/src/components/container/container.js +0 -791
  35. package/src/components/container/keyboard.js +0 -147
  36. package/src/components/container/shortCutPopover.vue +0 -181
  37. package/src/components/render/CanvasEmpty.vue +0 -14
  38. package/src/components/render/RenderMain.js +0 -408
  39. package/src/components/render/context.js +0 -53
  40. package/src/components/render/render.js +0 -689
  41. package/src/components/render/runner.js +0 -140
  42. package/src/i18n/en.json +0 -5
  43. package/src/i18n/zh.json +0 -5
  44. package/src/i18n.js +0 -21
  45. package/src/index.js +0 -96
  46. package/src/locale.js +0 -19
  47. package/src/lowcode.js +0 -104
  48. package/src/main.js +0 -17
  49. package/test/form.json +0 -690
  50. package/test/group.json +0 -99
  51. package/test/jsslot.json +0 -427
  52. package/vite.config.js +0 -73
package/package.json CHANGED
@@ -1,30 +1,39 @@
1
- {
2
- "name": "@opentiny/tiny-engine-canvas",
3
- "version": "1.0.0",
4
- "publishConfig": {
5
- "access": "public"
6
- },
7
- "scripts": {
8
- "dev": "vite",
9
- "build": "vite build",
10
- "preview": "vite preview"
11
- },
12
- "main": "dist/index.js",
13
- "module": "dist/index.js",
14
- "dependencies": {
15
- "@opentiny/tiny-engine-common": "^1.0.0",
16
- "@opentiny/tiny-engine-controller": "^1.0.0",
17
- "@opentiny/tiny-engine-utils": "^1.0.0",
18
- "@opentiny/tiny-engine-i18n-host": "^1.0.0",
19
- "@opentiny/vue": "^3.8.0",
20
- "@vueuse/core": "^9.6.0",
21
- "vue": "3.2.45",
22
- "vue-i18n": "9.2.2"
23
- },
24
- "devDependencies": {
25
- "@vitejs/plugin-vue": "^4.2.3",
26
- "@vitejs/plugin-vue-jsx": "^1.3.10",
27
- "rollup-plugin-terser": "^7.0.2",
28
- "vite": "^4.3.7"
29
- }
30
- }
1
+ {
2
+ "name": "@opentiny/tiny-engine-canvas",
3
+ "version": "1.0.2-beta.0",
4
+ "publishConfig": {
5
+ "access": "public"
6
+ },
7
+ "main": "dist/index.js",
8
+ "module": "dist/index.js",
9
+ "files": [
10
+ "dist"
11
+ ],
12
+ "dependencies": {
13
+ "@babel/core": "7.18.13",
14
+ "@opentiny/tiny-engine-common": "^1.0.0",
15
+ "@opentiny/tiny-engine-controller": "^1.0.0",
16
+ "@opentiny/tiny-engine-i18n-host": "^1.0.0",
17
+ "@opentiny/tiny-engine-utils": "^1.0.0",
18
+ "@opentiny/tiny-engine-webcomponent-core": "^1.0.0",
19
+ "@opentiny/vue": "~3.10.0",
20
+ "@opentiny/vue-icon": "~3.10.0",
21
+ "@opentiny/vue-renderless": "~3.10.0",
22
+ "@vue/babel-plugin-jsx": "1.1.1",
23
+ "@vue/shared": "^3.3.4",
24
+ "@vueuse/core": "^9.6.0",
25
+ "vue": "3.2.45",
26
+ "vue-i18n": "9.2.2"
27
+ },
28
+ "devDependencies": {
29
+ "@vitejs/plugin-vue": "^4.2.3",
30
+ "@vitejs/plugin-vue-jsx": "^1.3.10",
31
+ "rollup-plugin-terser": "^7.0.2",
32
+ "vite": "^4.3.7"
33
+ },
34
+ "scripts": {
35
+ "dev": "vite",
36
+ "build": "vite build",
37
+ "preview": "vite preview"
38
+ }
39
+ }
package/.eslintrc.js DELETED
@@ -1,42 +0,0 @@
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/canvas.html DELETED
@@ -1,212 +0,0 @@
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>
package/index.html DELETED
@@ -1,13 +0,0 @@
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
- <title>Vite App</title>
8
- </head>
9
- <body>
10
- <div id="app"></div>
11
- <script type="module" src="/src/main.js"></script>
12
- </body>
13
- </html>
package/public/favicon.ico DELETED
Binary file
package/src/Design.vue DELETED
@@ -1,53 +0,0 @@
1
- <template>
2
- <div style="height: calc(100vh - 100px)">
3
- <canvas-container :controller="controller" @selected="nodeSelected"></canvas-container>
4
- </div>
5
- </template>
6
-
7
- <script setup>
8
- import CanvasContainer from './index'
9
-
10
- import formJSON from '../test/form.json'
11
-
12
- const controller = {
13
- getPageSchema() {
14
- return formJSON
15
- },
16
- getConfigureMap() {
17
- return {
18
- TinyTabs: {
19
- nestingRule: {
20
- childWhitelist: ['TinyTabItem'],
21
- parentWhitelist: '',
22
- descendantBlacklist: '',
23
- ancestorWhitelist: ''
24
- }
25
- },
26
- TinyForm: {
27
- nestingRule: {
28
- childWhitelist: ['TinyFormItem'],
29
- parentWhitelist: '',
30
- descendantBlacklist: '',
31
- ancestorWhitelist: ''
32
- }
33
- }
34
- }
35
- },
36
- getJSResource() {
37
- return {
38
- utils: { Select: 'select' }
39
- }
40
- },
41
- addHistory() {},
42
- closePlugin() {},
43
- getMaterial() {}
44
- }
45
-
46
- const nodeSelected = () => {}
47
- </script>
48
-
49
- <style>
50
- #app {
51
- height: 100%;
52
- }
53
- </style>
package/src/assets/logo.png DELETED
Binary file
package/src/canvas.js DELETED
@@ -1,34 +0,0 @@
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
- import { createApp } from 'vue'
14
- import * as TinyVue from '@opentiny/vue'
15
-
16
- import { RenderMain } from './index'
17
-
18
- import { I18nInjectionKey, createI18n } from 'vue-i18n'
19
-
20
- window.TinyLowcodeComponent = {}
21
-
22
- Object.entries(TinyVue).forEach(([_key, component]) => {
23
- const { name } = component
24
- if (name) {
25
- window.TinyLowcodeComponent[name] = component
26
- }
27
- })
28
-
29
- const i18nHost = createI18n({
30
- locale: 'zh_CN',
31
- messages: {}
32
- })
33
-
34
- createApp(RenderMain).use(i18nHost).provide(I18nInjectionKey, i18nHost).mount('#app')
package/src/components/builtin/CanvasBox.vue DELETED
@@ -1,22 +0,0 @@
1
- <template>
2
- <component :is="tag" v-bind="$attrs">
3
- <slot>
4
- <canvas-placeholder :placeholder="$attrs.placeholder"></canvas-placeholder>
5
- </slot>
6
- </component>
7
- </template>
8
-
9
- <script>
10
- import CanvasPlaceholder from './CanvasPlaceholder.vue'
11
- export default {
12
- components: {
13
- CanvasPlaceholder
14
- },
15
- props: {
16
- tag: {
17
- type: String,
18
- default: 'div'
19
- }
20
- }
21
- }
22
- </script>
package/src/components/builtin/CanvasCol.vue DELETED
@@ -1,89 +0,0 @@
1
- <template>
2
- <div ref="colRef" class="canvas-col">
3
- <slot>
4
- <canvas-placeholder :placeholder="$attrs.placeholder"></canvas-placeholder>
5
- </slot>
6
- </div>
7
- </template>
8
-
9
- <script>
10
- import { computed } from 'vue'
11
- import CanvasPlaceholder from './CanvasPlaceholder.vue'
12
- import { getStyleValue, alignMap, justAlignMap } from './helper'
13
-
14
- export default {
15
- components: {
16
- CanvasPlaceholder
17
- },
18
- props: {
19
- flexBasis: {
20
- type: String,
21
- default: '0px'
22
- },
23
- rowGap: {
24
- type: [String, Number],
25
- default: ''
26
- },
27
- colGap: {
28
- type: [String, Number],
29
- default: ''
30
- },
31
- align: {
32
- type: [String, Number],
33
- default: ''
34
- },
35
- justAlign: {
36
- type: [String, Number],
37
- default: ''
38
- },
39
- grow: {
40
- type: Boolean,
41
- default: true
42
- },
43
- shrink: {
44
- type: Boolean,
45
- default: true
46
- },
47
- widthType: {
48
- type: String,
49
- default: 'auto'
50
- }
51
- },
52
- setup(props) {
53
- const getFlex = () => {
54
- const { flexBasis, grow, shrink, widthType } = props
55
-
56
- if (widthType === 'fixed') {
57
- return `0 0 ${getStyleValue(flexBasis)}`
58
- }
59
-
60
- return `${Number(grow)} ${Number(shrink)} ${getStyleValue(flexBasis)}`
61
- }
62
-
63
- const styles = computed(() => ({
64
- flex: getFlex(props.flexBasis),
65
- rowGap: getStyleValue(props.rowGap),
66
- colGap: getStyleValue(props.colGap),
67
- align: alignMap[props.align] || 'stretch',
68
- justAlign: justAlignMap[props.justAlign] || 'flex-start'
69
- }))
70
-
71
- return {
72
- styles
73
- }
74
- }
75
- }
76
- </script>
77
-
78
- <style lang="less" scoped>
79
- .canvas-col {
80
- display: flex;
81
- flex: v-bind('styles.flex');
82
- flex-direction: column;
83
- flex-wrap: nowrap;
84
- row-gap: v-bind('styles.rowGap');
85
- column-gap: v-bind('styles.colGap');
86
- align-items: v-bind('styles.align');
87
- justify-content: v-bind('styles.justAlign');
88
- }
89
- </style>