@opentiny/tiny-engine-canvas 1.0.0 → 1.0.1

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 (51) hide show
  1. package/dist/index.js +24773 -26823
  2. package/package.json +15 -6
  3. package/.eslintrc.js +0 -42
  4. package/canvas.html +0 -212
  5. package/index.html +0 -13
  6. package/public/favicon.ico +0 -0
  7. package/src/Design.vue +0 -53
  8. package/src/assets/logo.png +0 -0
  9. package/src/canvas.js +0 -34
  10. package/src/components/builtin/CanvasBox.vue +0 -22
  11. package/src/components/builtin/CanvasCol.vue +0 -89
  12. package/src/components/builtin/CanvasCollection.js +0 -278
  13. package/src/components/builtin/CanvasCollection.vue +0 -106
  14. package/src/components/builtin/CanvasIcon.vue +0 -30
  15. package/src/components/builtin/CanvasImg.vue +0 -18
  16. package/src/components/builtin/CanvasPlaceholder.vue +0 -26
  17. package/src/components/builtin/CanvasRow.vue +0 -67
  18. package/src/components/builtin/CanvasRowColContainer.vue +0 -42
  19. package/src/components/builtin/CanvasSlot.vue +0 -22
  20. package/src/components/builtin/CanvasText.vue +0 -18
  21. package/src/components/builtin/builtin.json +0 -955
  22. package/src/components/builtin/helper.js +0 -46
  23. package/src/components/builtin/index.js +0 -33
  24. package/src/components/common/index.js +0 -158
  25. package/src/components/container/CanvasAction.vue +0 -554
  26. package/src/components/container/CanvasContainer.vue +0 -244
  27. package/src/components/container/CanvasDivider.vue +0 -246
  28. package/src/components/container/CanvasDragItem.vue +0 -38
  29. package/src/components/container/CanvasFooter.vue +0 -86
  30. package/src/components/container/CanvasMenu.vue +0 -214
  31. package/src/components/container/CanvasResize.vue +0 -195
  32. package/src/components/container/CanvasResizeBorder.vue +0 -219
  33. package/src/components/container/container.js +0 -791
  34. package/src/components/container/keyboard.js +0 -147
  35. package/src/components/container/shortCutPopover.vue +0 -181
  36. package/src/components/render/CanvasEmpty.vue +0 -14
  37. package/src/components/render/RenderMain.js +0 -408
  38. package/src/components/render/context.js +0 -53
  39. package/src/components/render/render.js +0 -689
  40. package/src/components/render/runner.js +0 -140
  41. package/src/i18n/en.json +0 -5
  42. package/src/i18n/zh.json +0 -5
  43. package/src/i18n.js +0 -21
  44. package/src/index.js +0 -96
  45. package/src/locale.js +0 -19
  46. package/src/lowcode.js +0 -104
  47. package/src/main.js +0 -17
  48. package/test/form.json +0 -690
  49. package/test/group.json +0 -99
  50. package/test/jsslot.json +0 -427
  51. package/vite.config.js +0 -73
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@opentiny/tiny-engine-canvas",
3
- "version": "1.0.0",
3
+ "version": "1.0.1",
4
4
  "publishConfig": {
5
5
  "access": "public"
6
6
  },
@@ -11,12 +11,21 @@
11
11
  },
12
12
  "main": "dist/index.js",
13
13
  "module": "dist/index.js",
14
+ "files": [
15
+ "dist"
16
+ ],
14
17
  "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",
18
+ "@babel/core": "7.18.13",
19
+ "@opentiny/tiny-engine-common": "workspace:^1.0.0",
20
+ "@opentiny/tiny-engine-controller": "workspace:^1.0.0",
21
+ "@opentiny/tiny-engine-i18n-host": "workspace:^1.0.0",
22
+ "@opentiny/tiny-engine-utils": "workspace:^1.0.0",
23
+ "@opentiny/tiny-engine-webcomponent-core": "workspace:^1.0.0",
24
+ "@opentiny/vue": "~3.10.0",
25
+ "@opentiny/vue-icon": "~3.10.0",
26
+ "@opentiny/vue-renderless": "~3.10.0",
27
+ "@vue/babel-plugin-jsx": "1.1.1",
28
+ "@vue/shared": "^3.3.4",
20
29
  "@vueuse/core": "^9.6.0",
21
30
  "vue": "3.2.45",
22
31
  "vue-i18n": "9.2.2"
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>