@opentiny/tiny-engine-canvas 1.0.0

package/src/components/builtin/CanvasPlaceholder.vue

@@ -0,0 +1,26 @@
+<template>
+  <div class="canvas-container">
+    <div class="container-box">
+      <div class="container-tip">
+        <slot>{{ placeholder }}</slot>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    placeholder: {
+      type: String,
+      default: '请将元素拖放到这里'
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+.canvas-container {
+  min-height: 48px;
+}
+</style>

package/src/components/builtin/CanvasRow.vue

@@ -0,0 +1,67 @@
+<template>
+  <div class="canvas-row">
+    <slot>
+      <canvas-placeholder :placeholder="$attrs.placeholder"></canvas-placeholder>
+    </slot>
+  </div>
+</template>
+
+<script>
+import { computed } from 'vue'
+import CanvasPlaceholder from './CanvasPlaceholder.vue'
+import { getStyleValue, alignMap, justAlignMap } from './helper'
+
+export default {
+  components: {
+    CanvasPlaceholder
+  },
+  props: {
+    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: ''
+    }
+  },
+  setup(props) {
+    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'
+    }))
+
+    return {
+      styles
+    }
+  }
+}
+</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>

package/src/components/builtin/CanvasRowColContainer.vue

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

package/src/components/builtin/CanvasSlot.vue

@@ -0,0 +1,22 @@
+<template>
+  <slot>
+    <canvas-placeholder v-bind="$attrs"></canvas-placeholder>
+  </slot>
+</template>
+
+<script>
+import CanvasPlaceholder from './CanvasPlaceholder.vue'
+export default {
+  components: {
+    CanvasPlaceholder
+  },
+  props: {
+    name: {
+      type: String
+    },
+    params: {
+      type: String
+    }
+  }
+}
+</script>

package/src/components/builtin/CanvasText.vue

@@ -0,0 +1,18 @@
+<template>
+  <span :class="['canvas-text', className]">{{ text }}</span>
+</template>
+
+<script>
+export default {
+  props: {
+    text: {
+      type: String,
+      default: ''
+    },
+    className: {
+      type: String,
+      default: ''
+    }
+  }
+}
+</script>