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

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

packages/builtinComponent/README.md

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

packages/builtinComponent/index.js

@@ -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'

packages/builtinComponent/package.json

@@ -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"
+  }
+}

packages/builtinComponent/src/components/CanvasCol.vue

@@ -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>

packages/builtinComponent/src/components/CanvasRow.vue

@@ -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>

packages/builtinComponent/src/components/CanvasRowColContainer.vue

@@ -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>

packages/builtinComponent/src/components/helper.js

@@ -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'
+}