lizhijie429
/
tiny-engine
forked from opentiny/tiny-engine
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat(builtin): builtinComponent 组件独立包抽离 (#52) 

* feat(builtin): builtinComponent 组件独立包抽离
This commit is contained in:
chilingling 2023-11-22 23:14:22 -08:00 committed by GitHub
parent 59074024d8
commit 6de244f098
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
29 changed files with 1060 additions and 500 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
packages/builtinComponent/README.md Normal file
View File

@ -0,0 +1,9 @@
# 内置组件
## 目前内置的组件
### CanvasRow
### CanvasCol
### CanvasRowColContainer

4
packages/builtinComponent/index.js Normal file
View File

@ -0,0 +1,4 @@
export { default as CanvasCol } from './src/components/CanvasCol.vue'
export { default as CanvasRow } from './src/components/CanvasRow.vue'
export { default as CanvasRowColContainer } from './src/components/CanvasRowColContainer.vue'
export { default as meta } from './src/meta'

26
packages/builtinComponent/package.json Normal file
View File

@ -0,0 +1,26 @@
{
"name": "@opentiny/tiny-engine-builtin-component",
"version": "0.1.0",
"description": "",
"main": "dist/index.js",
"module": "dist/index.js",
"files": [
"dist"
],
"repository": {
"type": "git",
"url": "https://github.com/opentiny/tiny-engine",
"directory": "packages/builtinComponent"
},
"scripts": {
"build": "vite build"
},
"dependencies": {
"@opentiny/vue": "~3.10.0"
},
"devDependencies": {
"@vitejs/plugin-vue": "^4.2.3",
"@vitejs/plugin-vue-jsx": "^3.0.2",
"vite": "^4.5.0"
}
}

76
packages/builtinComponent/src/components/CanvasCol.vue Normal file
View File

@ -0,0 +1,76 @@
<template>
<div ref="colRef" class="canvas-col">
<slot></slot>
</div>
</template>
<script setup>
import { computed, defineProps } from 'vue'
import { getStyleValue, alignMap, justAlignMap } from './helper'
const props = defineProps({
flexBasis: {
type: String,
default: '0px'
},
rowGap: {
type: [String, Number],
default: ''
},
colGap: {
type: [String, Number],
default: ''
},
align: {
type: [String, Number],
default: ''
},
justAlign: {
type: [String, Number],
default: ''
},
grow: {
type: Boolean,
default: true
},
shrink: {
type: Boolean,
default: true
},
widthType: {
type: String,
default: 'auto'
}
})
const getFlex = () => {
const { flexBasis, grow, shrink, widthType } = props
if (widthType === 'fixed') {
return `0 0 ${getStyleValue(flexBasis)}`
}
return `${Number(grow)} ${Number(shrink)} ${getStyleValue(flexBasis)}`
}
const styles = computed(() => ({
flex: getFlex(props.flexBasis),
rowGap: getStyleValue(props.rowGap),
colGap: getStyleValue(props.colGap),
align: alignMap[props.align] || 'stretch',
justAlign: justAlignMap[props.justAlign] || 'flex-start'
}))
</script>
<style lang="less" scoped>
.canvas-col {
display: flex;
flex: v-bind('styles.flex');
flex-direction: column;
flex-wrap: nowrap;
row-gap: v-bind('styles.rowGap');
column-gap: v-bind('styles.colGap');
align-items: v-bind('styles.align');
justify-content: v-bind('styles.justAlign');
}
</style>

54
packages/builtinComponent/src/components/CanvasRow.vue Normal file
View File

@ -0,0 +1,54 @@
<template>
<div class="canvas-row">
<slot></slot>
</div>
</template>
<script setup>
import { computed, defineProps } from 'vue'
import { getStyleValue, alignMap, justAlignMap } from './helper'
const props = defineProps({
minHeight: {
type: [String, Number],
default: ''
},
rowGap: {
type: [String, Number],
default: ''
},
colGap: {
type: [String, Number],
default: ''
},
align: {
type: [String, Number],
default: ''
},
justAlign: {
type: [String, Number],
default: ''
}
})
const styles = computed(() => ({
minHeight: getStyleValue(props.minHeight),
rowGap: getStyleValue(props.rowGap),
colGap: getStyleValue(props.colGap),
align: alignMap[props.align] || 'stretch',
justAlign: justAlignMap[props.justAlign] || 'flex-start'
}))
</script>
<style lang="less" scoped>
.canvas-row {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: v-bind('styles.justAlign');
align-items: v-bind('styles.align');
column-gap: v-bind('styles.rowGap');
row-gap: v-bind('styles.colGap');
min-height: v-bind('styles.minHeight');
}
</style>

29
packages/builtinComponent/src/components/CanvasRowColContainer.vue Normal file
View File

@ -0,0 +1,29 @@
<template>
<div class="row-col-container">
<slot> </slot>
</div>
</template>
<script setup>
import { computed, defineProps } from 'vue'
import { getStyleValue } from './helper'
const props = defineProps({
rowGap: {
type: [String, Number],
default: ''
}
})
const styles = computed(() => ({
rowGap: getStyleValue(props.rowGap)
}))
</script>
<style lang="less" scoped>
.row-col-container {
display: flex;
flex-direction: column;
row-gap: v-bind('styles.rowGap');
}
</style>

46
packages/builtinComponent/src/components/helper.js Normal file
View File

@ -0,0 +1,46 @@
/**
* Copyright (c) 2023 - present TinyEngine Authors.
* Copyright (c) 2023 - present Huawei Cloud Computing Technologies Co., Ltd.
*
* Use of this source code is governed by an MIT-style license.
*
* THE OPEN SOURCE SOFTWARE IN THIS PRODUCT IS DISTRIBUTED IN THE HOPE THAT IT WILL BE USEFUL,
* BUT WITHOUT ANY WARRANTY, WITHOUT EVEN THE IMPLIED WARRANTY OF MERCHANTABILITY OR FITNESS FOR
* A PARTICULAR PURPOSE. SEE THE APPLICABLE LICENSES FOR MORE DETAILS.
*
*/
export const getStyleValue = (value) => {
if (typeof value === 'number' || /^\d+\.?\d*$/.test(value)) {
return `${value}px`
}
if (/^\d+\.?\d*(px|%|pt|em|rem|vw|vh)$/.test(value)) {
return value
}
return ''
}
export const alignMap = {
'flex-start': 'flex-start',
'flex-end': 'flex-end',
center: 'center',
stretch: 'stretch',
start: 'start',
end: 'end'
}
export const justAlignMap = {
'space-between': 'space-between',
'space-around': 'space-around',
'space-evenly': 'space-evenly',
'flex-start': 'flex-start',
'flex-end': 'flex-end',
stretch: 'stretch',
center: 'center',
start: 'start',
end: 'end',
left: 'left',
right: 'right'
}

196
packages/builtinComponent/src/meta/CanvasCol.json Normal file
View File

@ -0,0 +1,196 @@
{
"components": {
"icon": "Box",
"name": {
"zh_CN": "CanvasCol"
},
"component": "CanvasCol",
"schema": {
"slots": {},
"properties": [
{
"label": {
"zh_CN": "基础信息"
},
"description": {
"zh_CN": "基础信息"
},
"collapse": {
"number": 6,
"text": {
"zh_CN": "显示更多"
}
},
"content": [
{
"property": "widthType",
"type": "String",
"defaultValue": "auto",
"label": {
"text": {
"zh_CN": "宽度类型"
}
},
"cols": 12,
"rules": [],
"widget": {
"component": "MetaRadioGroup",
"props": {
"options": [
{ "label": "auto", "text": "自适应" },
{ "label": "fixed", "text": "固定" }
],
"type": "button"
}
}
},
{
"property": "flexBasis",
"type": "String",
"defaultValue": "",
"label": {
"text": {
"zh_CN": "固定宽度"
}
},
"cols": 12,
"rules": [],
"widget": {
"component": "MetaInput",
"props": {}
}
},
{
"property": "rowGap",
"type": "String",
"defaultValue": "",
"label": {
"text": {
"zh_CN": "行间距"
}
},
"cols": 12,
"rules": [],
"widget": {
"component": "MetaInput",
"props": {}
}
},
{
"property": "colGap",
"type": "String",
"defaultValue": "",
"label": {
"text": {
"zh_CN": "列间距"
}
},
"cols": 12,
"rules": [],
"widget": {
"component": "MetaInput",
"props": {}
}
},
{
"property": "align",
"type": "String",
"defaultValue": "",
"label": {
"text": {
"zh_CN": "副轴对齐"
}
},
"cols": 12,
"rules": [],
"widget": {
"component": "MetaSelect",
"props": {
"options": [
{ "value": "flex-start", "label": "头部对齐" },
{ "value": "center", "label": "中间对齐" },
{ "value": "flex-end", "label": "尾端对齐" },
{ "value": "stretch", "label": "拉伸对齐" }
],
"type": "button"
}
}
},
{
"property": "justAlign",
"type": "String",
"defaultValue": "",
"label": {
"text": {
"zh_CN": "主轴对齐"
}
},
"cols": 12,
"rules": [],
"widget": {
"component": "MetaSelect",
"props": {
"options": [
{ "value": "flex-start", "label": "头部对齐" },
{ "value": "center", "label": "中间对齐" },
{ "value": "flex-end", "label": "尾端对齐" },
{ "value": "space-between", "label": "两端对齐" },
{ "value": "space-evenly", "label": "均分对齐" }
],
"type": "button"
}
}
},
{
"property": "grow",
"type": "String",
"defaultValue": "",
"label": {
"text": {
"zh_CN": "增长"
}
},
"cols": 12,
"rules": [],
"widget": {
"component": "MetaSwitch",
"props": {}
}
},
{
"property": "shrink",
"type": "String",
"defaultValue": "",
"label": {
"text": {
"zh_CN": "收缩"
}
},
"cols": 12,
"rules": [],
"widget": {
"component": "MetaSwitch",
"props": {}
}
}
]
}
],
"events": {},
"shortcuts": {
"properties": []
},
"contentMenu": {
"actions": []
}
},
"configure": {
"loop": true,
"isContainer": true,
"nestingRule": {
"childWhitelist": [],
"descendantBlacklist": []
}
}
}
}

142
packages/builtinComponent/src/meta/CanvasRow.json Normal file
View File

@ -0,0 +1,142 @@
{
"components": {
"icon": "Box",
"name": {
"zh_CN": "CanvasRow"
},
"component": "CanvasRow",
"schema": {
"slots": {},
"properties": [
{
"label": {
"zh_CN": "基础信息"
},
"description": {
"zh_CN": "基础信息"
},
"collapse": {
"number": 6,
"text": {
"zh_CN": "显示更多"
}
},
"content": [
{
"property": "minHeight",
"type": "String",
"defaultValue": "",
"label": {
"text": {
"zh_CN": "最小高度"
}
},
"cols": 12,
"rules": [],
"widget": {
"component": "MetaInput",
"props": {}
}
},
{
"property": "rowGap",
"type": "String",
"defaultValue": "",
"label": {
"text": {
"zh_CN": "行间距"
}
},
"cols": 12,
"rules": [],
"widget": {
"component": "MetaInput",
"props": {}
}
},
{
"property": "colGap",
"type": "String",
"defaultValue": "",
"label": {
"text": {
"zh_CN": "列间距"
}
},
"cols": 12,
"rules": [],
"widget": {
"component": "MetaInput",
"props": {}
}
},
{
"property": "align",
"type": "String",
"defaultValue": "",
"label": {
"text": {
"zh_CN": "副轴对齐"
}
},
"cols": 12,
"rules": [],
"widget": {
"component": "MetaSelect",
"props": {
"options": [
{ "value": "flex-start", "label": "头部对齐" },
{ "value": "center", "label": "中间对齐" },
{ "value": "flex-end", "label": "尾端对齐" },
{ "value": "stretch", "label": "拉伸对齐" }
],
"type": "button"
}
}
},
{
"property": "justAlign",
"type": "String",
"defaultValue": "",
"label": {
"text": {
"zh_CN": "主轴对齐"
}
},
"cols": 12,
"rules": [],
"widget": {
"component": "MetaSelect",
"props": {
"options": [
{ "value": "flex-start", "label": "头部对齐" },
{ "value": "center", "label": "中间对齐" },
{ "value": "flex-end", "label": "尾端对齐" },
{ "value": "space-between", "label": "两端对齐" },
{ "value": "space-evenly", "label": "均分对齐" }
],
"type": "button"
}
}
}
]
}
],
"events": {},
"shortcuts": {
"properties": []
},
"contentMenu": {
"actions": []
}
},
"configure": {
"loop": true,
"isContainer": true,
"nestingRule": {
"childWhitelist": [],
"descendantBlacklist": []
}
}
}
}

96
packages/builtinComponent/src/meta/CanvasRowColContainer.json Normal file
View File

@ -0,0 +1,96 @@
{
"components": {
"icon": "Box",
"name": {
"zh_CN": "行列容器"
},
"component": "CanvasRowColContainer",
"schema": {
"slots": {},
"properties": [
{
"label": {
"zh_CN": "基础信息"
},
"description": {
"zh_CN": "基础信息"
},
"collapse": {
"number": 6,
"text": {
"zh_CN": "显示更多"
}
},
"content": [
{
"property": "rowGap",
"type": "String",
"defaultValue": "",
"label": {
"text": {
"zh_CN": "行间距"
}
},
"cols": 12,
"rules": [],
"widget": {
"component": "MetaInput",
"props": {}
}
}
]
}
],
"events": {},
"shortcuts": {
"properties": []
},
"contentMenu": {
"actions": []
}
},
"configure": {
"loop": true,
"isContainer": true,
"nestingRule": {
"childWhitelist": [],
"descendantBlacklist": []
}
}
},
"snippets": {
"name": {
"zh_CN": "行列容器"
},
"screenshot": "",
"snippetName": "CanvasRowColContainer",
"icon": "Box",
"schema": {
"componentName": "CanvasRowColContainer",
"props": {
"rowGap": "20px"
},
"children": [
{
"componentName": "CanvasRow",
"props": {
"rowGap": "20px",
"colGap": "20px"
},
"children": [
{
"componentName": "CanvasCol",
"props": {
"rowGap": "20px",
"colGap": "20px",
"grow": true,
"shrink": true,
"widthType": "auto"
}
}
]
}
]
}
}
}

18
packages/builtinComponent/src/meta/index.js Normal file
View File

@ -0,0 +1,18 @@
import CanvasCol from './CanvasCol.json'
import CanvasRow from './CanvasRow.json'
import CanvasRowColContainer from './CanvasRowColContainer.json'
export default {
components: [
{
group: '内置组件',
children: [{ ...CanvasCol.components }, { ...CanvasRow.components }, { ...CanvasRowColContainer.components }]
}
],
snippets: [
{
group: '内置组件',
children: [{ ...CanvasRowColContainer.snippets }]
}
]
}

35
packages/builtinComponent/vite.config.js Normal file
View File

@ -0,0 +1,35 @@
/**
* Copyright (c) 2023 - present TinyEngine Authors.
* Copyright (c) 2023 - present Huawei Cloud Computing Technologies Co., Ltd.
*
* Use of this source code is governed by an MIT-style license.
*
* THE OPEN SOURCE SOFTWARE IN THIS PRODUCT IS DISTRIBUTED IN THE HOPE THAT IT WILL BE USEFUL,
* BUT WITHOUT ANY WARRANTY, WITHOUT EVEN THE IMPLIED WARRANTY OF MERCHANTABILITY OR FITNESS FOR
* A PARTICULAR PURPOSE. SEE THE APPLICABLE LICENSES FOR MORE DETAILS.
*
*/
import { defineConfig } from 'vite'
import path from 'path'
import vue from '@vitejs/plugin-vue'
import vueJsx from '@vitejs/plugin-vue-jsx'
export default defineConfig({
plugins: [vue(), vueJsx()],
publicDir: false,
build: {
cssCodeSplit: false,
lib: {
entry: path.resolve(__dirname, './index.js'),
name: 'builtinComponent',
fileName: () => 'index.js',
formats: ['es']
},
rollupOptions: {
output: {
banner: 'import "./style.css"'
},
external: ['vue']
}
}
})

1
packages/canvas/package.json
View File

@ -32,6 +32,7 @@
"@opentiny/tiny-engine-i18n-host": "workspace:^1.0.0",
"@opentiny/tiny-engine-utils": "workspace:^1.0.0",
"@opentiny/tiny-engine-webcomponent-core": "workspace:^1.0.0",
"@opentiny/tiny-engine-builtin-component": "workspace:*",
"@opentiny/vue": "~3.10.0",
"@opentiny/vue-icon": "~3.10.0",
"@opentiny/vue-renderless": "~3.10.0",

428
packages/canvas/src/components/builtin/builtin.json
View File

@ -432,399 +432,6 @@
"configure": {
"loop": true
}
},
{
"icon": "Box",
"name": {
"zh_CN": "CanvasRow"
},
"component": "CanvasRow",
"schema": {
"slots": {},
"properties": [
{
"label": {
"zh_CN": "基础信息"
},
"description": {
"zh_CN": "基础信息"
},
"collapse": {
"number": 6,
"text": {
"zh_CN": "显示更多"
}
},
"content": [
{
"property": "minHeight",
"type": "String",
"defaultValue": "",
"label": {
"text": {
"zh_CN": "最小高度"
}
},
"cols": 12,
"rules": [],
"widget": {
"component": "MetaInput",
"props": {}
}
},
{
"property": "rowGap",
"type": "String",
"defaultValue": "",
"label": {
"text": {
"zh_CN": "行间距"
}
},
"cols": 12,
"rules": [],
"widget": {
"component": "MetaInput",
"props": {}
}
},
{
"property": "colGap",
"type": "String",
"defaultValue": "",
"label": {
"text": {
"zh_CN": "列间距"
}
},
"cols": 12,
"rules": [],
"widget": {
"component": "MetaInput",
"props": {}
}
},
{
"property": "align",
"type": "String",
"defaultValue": "",
"label": {
"text": {
"zh_CN": "副轴对齐"
}
},
"cols": 12,
"rules": [],
"widget": {
"component": "MetaSelect",
"props": {
"options": [
{ "value": "flex-start", "label": "头部对齐" },
{ "value": "center", "label": "中间对齐" },
{ "value": "flex-end", "label": "尾端对齐" },
{ "value": "stretch", "label": "拉伸对齐" }
],
"type": "button"
}
}
},
{
"property": "justAlign",
"type": "String",
"defaultValue": "",
"label": {
"text": {
"zh_CN": "主轴对齐"
}
},
"cols": 12,
"rules": [],
"widget": {
"component": "MetaSelect",
"props": {
"options": [
{ "value": "flex-start", "label": "头部对齐" },
{ "value": "center", "label": "中间对齐" },
{ "value": "flex-end", "label": "尾端对齐" },
{ "value": "space-between", "label": "两端对齐" },
{ "value": "space-evenly", "label": "均分对齐" }
],
"type": "button"
}
}
}
]
}
],
"events": {},
"shortcuts": {
"properties": []
},
"contentMenu": {
"actions": []
}
},
"configure": {
"loop": true,
"isContainer": true,
"nestingRule": {
"childWhitelist": [],
"descendantBlacklist": []
}
}
},
{
"icon": "Box",
"name": {
"zh_CN": "CanvasCol"
},
"component": "CanvasCol",
"schema": {
"slots": {},
"properties": [
{
"label": {
"zh_CN": "基础信息"
},
"description": {
"zh_CN": "基础信息"
},
"collapse": {
"number": 6,
"text": {
"zh_CN": "显示更多"
}
},
"content": [
{
"property": "widthType",
"type": "String",
"defaultValue": "auto",
"label": {
"text": {
"zh_CN": "宽度类型"
}
},
"cols": 12,
"rules": [],
"widget": {
"component": "MetaRadioGroup",
"props": {
"options": [
{ "label": "auto", "text": "自适应" },
{ "label": "fixed", "text": "固定" }
],
"type": "button"
}
}
},
{
"property": "flexBasis",
"type": "String",
"defaultValue": "",
"label": {
"text": {
"zh_CN": "固定宽度"
}
},
"cols": 12,
"rules": [],
"widget": {
"component": "MetaInput",
"props": {}
}
},
{
"property": "rowGap",
"type": "String",
"defaultValue": "",
"label": {
"text": {
"zh_CN": "行间距"
}
},
"cols": 12,
"rules": [],
"widget": {
"component": "MetaInput",
"props": {}
}
},
{
"property": "colGap",
"type": "String",
"defaultValue": "",
"label": {
"text": {
"zh_CN": "列间距"
}
},
"cols": 12,
"rules": [],
"widget": {
"component": "MetaInput",
"props": {}
}
},
{
"property": "align",
"type": "String",
"defaultValue": "",
"label": {
"text": {
"zh_CN": "副轴对齐"
}
},
"cols": 12,
"rules": [],
"widget": {
"component": "MetaSelect",
"props": {
"options": [
{ "value": "flex-start", "label": "头部对齐" },
{ "value": "center", "label": "中间对齐" },
{ "value": "flex-end", "label": "尾端对齐" },
{ "value": "stretch", "label": "拉伸对齐" }
],
"type": "button"
}
}
},
{
"property": "justAlign",
"type": "String",
"defaultValue": "",
"label": {
"text": {
"zh_CN": "主轴对齐"
}
},
"cols": 12,
"rules": [],
"widget": {
"component": "MetaSelect",
"props": {
"options": [
{ "value": "flex-start", "label": "头部对齐" },
{ "value": "center", "label": "中间对齐" },
{ "value": "flex-end", "label": "尾端对齐" },
{ "value": "space-between", "label": "两端对齐" },
{ "value": "space-evenly", "label": "均分对齐" }
],
"type": "button"
}
}
},
{
"property": "grow",
"type": "String",
"defaultValue": "",
"label": {
"text": {
"zh_CN": "增长"
}
},
"cols": 12,
"rules": [],
"widget": {
"component": "MetaSwitch",
"props": {}
}
},
{
"property": "shrink",
"type": "String",
"defaultValue": "",
"label": {
"text": {
"zh_CN": "收缩"
}
},
"cols": 12,
"rules": [],
"widget": {
"component": "MetaSwitch",
"props": {}
}
}
]
}
],
"events": {},
"shortcuts": {
"properties": []
},
"contentMenu": {
"actions": []
}
},
"configure": {
"loop": true,
"isContainer": true,
"nestingRule": {
"childWhitelist": [],
"descendantBlacklist": []
}
}
},
{
"icon": "Box",
"name": {
"zh_CN": "行列容器"
},
"component": "CanvasRowColContainer",
"schema": {
"slots": {},
"properties": [
{
"label": {
"zh_CN": "基础信息"
},
"description": {
"zh_CN": "基础信息"
},
"collapse": {
"number": 6,
"text": {
"zh_CN": "显示更多"
}
},
"content": [
{
"property": "rowGap",
"type": "String",
"defaultValue": "",
"label": {
"text": {
"zh_CN": "行间距"
}
},
"cols": 12,
"rules": [],
"widget": {
"component": "MetaInput",
"props": {}
}
}
]
}
],
"events": {},
"shortcuts": {
"properties": []
},
"contentMenu": {
"actions": []
}
},
"configure": {
"loop": true,
"isContainer": true,
"nestingRule": {
"childWhitelist": [],
"descendantBlacklist": []
}
}
}
]
}
@ -911,41 +518,6 @@
"style": "width: 200px; height: 200px"
}
}
},
{
"name": {
"zh_CN": "行列容器"
},
"screenshot": "",
"snippetName": "CanvasRowColContainer",
"icon": "Box",
"schema": {
"componentName": "CanvasRowColContainer",
"props": {
"rowGap": "20px"
},
"children": [
{
"componentName": "CanvasRow",
"props": {
"rowGap": "20px",
"colGap": "20px"
},
"children": [
{
"componentName": "CanvasCol",
"props": {
"rowGap": "20px",
"colGap": "20px",
"grow": true,
"shrink": true,
"widthType": "auto"
}
}
]
}
]
}
}
]
}

16
packages/canvas/src/components/builtin/index.js
View File

@ -16,18 +16,6 @@ import CanvasCollection from './CanvasCollection.vue'
import CanvasIcon from './CanvasIcon.vue'
import CanvasSlot from './CanvasSlot.vue'
import CanvasImg from './CanvasImg.vue'
import CanvasRow from './CanvasRow.vue'
import CanvasCol from './CanvasCol.vue'
import CanvasRowColContainer from './CanvasRowColContainer.vue'
import CanvasPlaceholder from './CanvasPlaceholder.vue'
export {
CanvasText,
CanvasBox,
CanvasCollection,
CanvasIcon,
CanvasSlot,
CanvasImg,
CanvasRow,
CanvasCol,
CanvasRowColContainer
}
export { CanvasText, CanvasBox, CanvasCollection, CanvasIcon, CanvasSlot, CanvasImg, CanvasPlaceholder }

34
packages/canvas/src/components/render/render.js
View File

@ -17,6 +17,7 @@ import { constants, utils } from '@opentiny/tiny-engine-utils'
import babelPluginJSX from '@vue/babel-plugin-jsx'
import { transformSync } from '@babel/core'
import i18nHost from '@opentiny/tiny-engine-i18n-host'
import { CanvasRow, CanvasCol, CanvasRowColContainer } from '@opentiny/tiny-engine-builtin-component'
import { context, conditions, setNode } from './context'
import {
CanvasBox,
@ -25,9 +26,7 @@ import {
CanvasText,
CanvasSlot,
CanvasImg,
CanvasRow,
CanvasCol,
CanvasRowColContainer
CanvasPlaceholder
} from '../builtin'
import { NODE_UID as DESIGN_UIDKEY, NODE_TAG as DESIGN_TAGKEY, NODE_LOOP as DESIGN_LOOPID } from '../common'
@ -61,7 +60,8 @@ const Mapper = {
Img: CanvasImg,
CanvasRow,
CanvasCol,
CanvasRowColContainer
CanvasRowColContainer,
CanvasPlaceholder
}
const { post } = useBroadcastChannel({ name: BROADCAST_CHANNEL.Notify })
@ -495,7 +495,6 @@ const stopEvent = (event) => {
return false
}
const generateSlotGroup = (children, isCustomElm) => {
const slotGroup = {}
@ -538,6 +537,10 @@ const getBindProps = (schema, scope) => {
const { id, componentName } = schema
const invalidity = configure[componentName]?.invalidity || []
if (componentName === 'CanvasPlaceholder') {
return {}
}
const bindProps = {
...parseData(schema.props, scope),
[DESIGN_UIDKEY]: id,
@ -612,21 +615,34 @@ const renderGroup = (children, scope, parent) => {
})
}
const ContainerComponent = ['CanvasCol', 'CanvasRow', 'CanvasRowColContainer']
const getChildren = (schema, mergeScope) => {
const { componentName, children } = schema
let renderChildren = children
if (ContainerComponent.includes(componentName) && !renderChildren?.length) {
renderChildren = [
{
componentName: 'CanvasPlaceholder'
}
]
}
const isNative = typeof component === 'string'
const isCustomElm = customElements[componentName]
const isGroup = checkGroup(componentName)
if (Array.isArray(children)) {
if (Array.isArray(renderChildren)) {
if (isNative || isCustomElm) {
return renderDefault(children, mergeScope, schema)
return renderDefault(renderChildren, mergeScope, schema)
} else {
return isGroup ? renderGroup(children, mergeScope, schema) : renderSlot(children, mergeScope, schema, isCustomElm)
return isGroup
? renderGroup(renderChildren, mergeScope, schema)
: renderSlot(renderChildren, mergeScope, schema, isCustomElm)
}
} else {
return parseData(children, mergeScope)
return parseData(renderChildren, mergeScope)
}
}

1
packages/controller/package.json
View File

@ -33,6 +33,7 @@
"@opentiny/tiny-engine-common": "workspace:^1.0.0",
"@opentiny/tiny-engine-http": "workspace:^1.0.0",
"@opentiny/tiny-engine-utils": "workspace:^1.0.0",
"@opentiny/tiny-engine-builtin-component": "workspace:*",
"@opentiny/vue": "~3.10.0",
"@opentiny/vue-renderless": "~3.10.0",
"@vue/shared": "^3.3.4",

14
packages/controller/src/useResource.js
View File

@ -15,13 +15,14 @@ import { getGlobalConfig } from './globalConfig'
import { useHttp } from '@opentiny/tiny-engine-http'
import { utils, constants } from '@opentiny/tiny-engine-utils'
import { Builtin, addScript, addStyle, canvasDispatch } from '@opentiny/tiny-engine-canvas'
import { getCanvasStatus } from '@opentiny/tiny-engine-common/js/index'
import { meta as BuiltinComponentMaterials } from '@opentiny/tiny-engine-builtin-component'
import useApp from './useApp'
import useCanvas from './useCanvas'
import useTranslate from './useTranslate'
import useEditorInfo from './useEditorInfo'
import useBreadcrumb from './useBreadcrumb'
import useLayout from './useLayout'
import { getCanvasStatus } from '@opentiny/tiny-engine-common/js/index'
import useBlock from './useBlock'
import useNotify from './useNotify'
@ -371,8 +372,15 @@ const fetchResource = async ({ isInit = true } = {}) => {
const { id, type } = useEditorInfo().useInfo()
useApp().appInfoState.selectedId = id
Builtin.data.materials.components[0]?.children.map(registerComponent)
resState.components.push(...Builtin.data.materials.snippets)
Builtin.data.materials.components[0].children.map(registerComponent)
BuiltinComponentMaterials.components[0].children.map(registerComponent)
const builtinSnippets = {
group: '内置组件',
children: [...Builtin.data.materials.snippets[0].children, ...BuiltinComponentMaterials.snippets[0].children]
}
resState.components.push(builtinSnippets)
const appData = await useHttp().get(`/app-center/v1/api/apps/schema/${id}`)
resState.pageTree = appData.componentsTree

3
packages/design-core/vite.config.js
View File

@ -171,7 +171,8 @@ const devAlias = {
'@opentiny/tiny-engine-theme': path.resolve(__dirname, `../theme/${lowcodeConfig.theme}/index.less`),
'@opentiny/tiny-engine-utils': path.resolve(__dirname, '../utils/src/index.js'),
'@opentiny/tiny-engine-webcomponent-core': path.resolve(__dirname, '../webcomponent/src/lib.js'),
'@opentiny/tiny-engine-i18n-host': path.resolve(__dirname, '../i18n/src/lib.js')
'@opentiny/tiny-engine-i18n-host': path.resolve(__dirname, '../i18n/src/lib.js'),
'@opentiny/tiny-engine-builtin-component': path.resolve(__dirname, '../builtinComponent/index.js')
}
const devVueAlias = {

1
packages/vue-generator/.gitignore vendored Normal file
View File

@ -0,0 +1 @@
test/testcases/full/**/result/*

1
packages/vue-generator/package.json
View File

@ -26,6 +26,7 @@
"license": "MIT",
"homepage": "https://opentiny.design/tiny-engine",
"dependencies": {
"@opentiny/tiny-engine-builtin-component": "workspace:*",
"@vue/compiler-sfc": "3.2.45",
"@vue/shared": "^3.3.4",
"vue": "3.2.45",

27
packages/vue-generator/src/constant/index.js
View File

@ -2173,6 +2173,31 @@ const DEFAULT_COMPONENTS_MAP = [
}
]
// 内置组件映射关系
const BUILTIN_COMPONENTS_MAP = [
{
componentName: 'CanvasRow',
exportName: 'CanvasRow',
package: '@opentiny/tiny-engine-builtin-component',
version: '^0.1.0',
destructuring: true
},
{
componentName: 'CanvasCol',
exportName: 'CanvasCol',
package: '@opentiny/tiny-engine-builtin-component',
version: '^0.1.0',
destructuring: true
},
{
componentName: 'CanvasRowColContainer',
exportName: 'CanvasRowColContainer',
package: '@opentiny/tiny-engine-builtin-component',
version: '^0.1.0',
destructuring: true
}
]
/**
* 内部保留组件名称，出码时可能需要特殊处理
*/
@ -2210,4 +2235,4 @@ export const [JS_EXPRESSION, JS_FUNCTION, JS_I18N, JS_RESOURCE, JS_SLOT] = [
'JSSlot'
]
export { DEFAULT_COMPONENTS_MAP, BUILTIN_COMPONENT_NAME, TINY_ICON, UNWRAP_QUOTES }
export { DEFAULT_COMPONENTS_MAP, BUILTIN_COMPONENT_NAME, TINY_ICON, UNWRAP_QUOTES, BUILTIN_COMPONENTS_MAP }

7
packages/vue-generator/src/generator/page.js
View File

@ -31,7 +31,8 @@ import {
JS_FUNCTION,
JS_RESOURCE,
JS_SLOT,
TINY_ICON
TINY_ICON,
BUILTIN_COMPONENTS_MAP
} from '../constant'
function recurseChildren(children, state, description, result) {
@ -269,7 +270,7 @@ const generateImports = (description, moduleName, type, componentsMap) => {
return exportName
}
return exportName ? `${exportName} as ${componentName}` : `${componentName}`
return exportName && exportName !== componentName ? `${exportName} as ${componentName}` : `${componentName}`
})
imports.push(`import { ${items.join(',')} } from '${pkgName}'`)
@ -496,7 +497,7 @@ const generateCode = ({ pageInfo, componentsMap = [], blocksData = [] }) => {
const validComponents = componentsMap.filter(
({ componentName, package: pkg, main }) => componentName && (pkg || typeof main === 'string')
)
const allComponents = [...validComponents, ...DEFAULT_COMPONENTS_MAP]
const allComponents = [...validComponents, ...DEFAULT_COMPONENTS_MAP, ...BUILTIN_COMPONENTS_MAP]
// 对象数组，去重
const allComponentsMap = new Map()

1
packages/vue-generator/test/testcases/full/case4_canvasrow-component/input/blocks.schema.json Normal file
View File

@ -0,0 +1 @@
[]

1
packages/vue-generator/test/testcases/full/case4_canvasrow-component/input/components-map.json Normal file
View File

@ -0,0 +1 @@
[]

161
packages/vue-generator/test/testcases/full/case4_canvasrow-component/input/page.schema.json Normal file
View File

@ -0,0 +1,161 @@
{
"state": {},
"methods": {},
"componentName": "Page",
"fileName": "createVm",
"css": "",
"props": {},
"lifeCycles": {},
"children": [
{
"componentName": "CanvasRowColContainer",
"props": {
"rowGap": "20px"
},
"children": [
{
"componentName": "CanvasRow",
"props": {
"rowGap": "20px",
"colGap": "20px"
},
"children": [
{
"componentName": "CanvasCol",
"props": {
"rowGap": "20px",
"colGap": "20px",
"grow": true,
"shrink": true,
"widthType": "auto"
},
"id": "4514b344"
},
{
"componentName": "CanvasCol",
"props": {
"rowGap": "20px",
"colGap": "20px",
"grow": true,
"shrink": true,
"widthType": "auto"
},
"children": [],
"id": "3664a254"
}
],
"id": "63553246"
},
{
"componentName": "CanvasRow",
"props": {
"rowGap": "20px",
"colGap": "20px"
},
"children": [
{
"componentName": "CanvasCol",
"props": {
"rowGap": "20px",
"colGap": "20px",
"grow": true,
"shrink": true,
"widthType": "auto"
},
"id": "2c13444f",
"children": [
{
"componentName": "CanvasRow",
"props": {
"rowGap": "20px",
"colGap": "20px"
},
"children": [
{
"componentName": "CanvasCol",
"props": {
"rowGap": "20px",
"colGap": "20px",
"grow": true,
"shrink": true,
"widthType": "auto"
},
"children": [],
"id": "24256327"
}
],
"id": "56453426"
},
{
"componentName": "CanvasRow",
"props": {
"rowGap": "20px",
"colGap": "20px"
},
"children": [
{
"componentName": "CanvasCol",
"props": {
"rowGap": "20px",
"colGap": "20px",
"grow": true,
"shrink": true,
"widthType": "auto"
},
"id": "5451f224"
}
],
"id": "26364626"
},
{
"componentName": "CanvasRow",
"props": {
"rowGap": "20px",
"colGap": "20px"
},
"children": [
{
"componentName": "CanvasCol",
"props": {
"rowGap": "20px",
"colGap": "20px",
"grow": true,
"shrink": true,
"widthType": "auto"
},
"children": [],
"id": "26232436"
}
],
"id": "52555445"
}
]
},
{
"componentName": "CanvasCol",
"props": {
"rowGap": "20px",
"colGap": "20px",
"grow": true,
"shrink": true,
"widthType": "auto"
},
"children": [],
"id": "53553563"
}
],
"id": "53b5fe13"
}
],
"id": "25452c43"
}
],
"dataSource": {
"list": []
},
"bridge": {
"imports": []
},
"inputs": [],
"outputs": []
}

46
packages/vue-generator/test/testcases/full/case4_canvasrow-component/output/BuiltInComponent.vue Normal file
View File

@ -0,0 +1,46 @@
<template>
<div>
<canvas-row-col-container rowGap="20px">
<canvas-row rowGap="20px" colGap="20px">
<canvas-col rowGap="20px" colGap="20px" :grow="true" :shrink="true" widthType="auto"></canvas-col>
<canvas-col rowGap="20px" colGap="20px" :grow="true" :shrink="true" widthType="auto"></canvas-col>
</canvas-row>
<canvas-row rowGap="20px" colGap="20px">
<canvas-col rowGap="20px" colGap="20px" :grow="true" :shrink="true" widthType="auto">
<canvas-row rowGap="20px" colGap="20px">
<canvas-col rowGap="20px" colGap="20px" :grow="true" :shrink="true" widthType="auto"></canvas-col>
</canvas-row>
<canvas-row rowGap="20px" colGap="20px">
<canvas-col rowGap="20px" colGap="20px" :grow="true" :shrink="true" widthType="auto"></canvas-col>
</canvas-row>
<canvas-row rowGap="20px" colGap="20px">
<canvas-col rowGap="20px" colGap="20px" :grow="true" :shrink="true" widthType="auto"></canvas-col>
</canvas-row>
</canvas-col>
<canvas-col rowGap="20px" colGap="20px" :grow="true" :shrink="true" widthType="auto"></canvas-col>
</canvas-row>
</canvas-row-col-container>
</div>
</template>
<script setup>
import * as vue from 'vue'
import { defineProps, defineEmits } from 'vue'
import { I18nInjectionKey } from 'vue-i18n'
import { CanvasRow, CanvasCol, CanvasRowColContainer } from '@opentiny/tiny-engine-builtin-component'
const props = defineProps({})
const emit = defineEmits([])
const { t, lowcodeWrap, stores } = vue.inject(I18nInjectionKey).lowcode()
const wrap = lowcodeWrap(props, { emit }, t)
const state = vue.reactive({})
wrap({
stores,
state
})
</script>
<style scoped></style>

5
packages/vue-generator/test/testcases/full/index.config.js
View File

@ -28,6 +28,11 @@ module.exports = {
name: 'case3_state-accessor',
pageName: 'UseStateAccessor',
description: '测试区块的 state 支持 accessor 协议'
},
{
name: 'case4_canvasrow-component',
pageName: 'BuiltInComponent',
description: '测试内置组件 CanvasRow、CanvasCol、CanvasRowColContainer'
}
],
input: {

2
packages/vue-generator/test/testcases/full/index.js
View File

@ -14,7 +14,7 @@ const path = require('path')
const fs = require('fs-extra')
const prettier = require('prettier')
const { execSync } = require('child_process')
const { generateCode } = require('../../../dist/lowcode-dsl-vue.cjs.js')
const { generateCode } = require('../../../dist/tiny-engine-dsl-vue.cjs')
const { logger } = require('../../utils/logger')
const getPageData = (testCaseFile) => {