<script setup>
import ContentBlock from "../ContentBlock.vue";
import TextEmoji from "./TextEmoji.vue";
import TextDirection from "./TextDirection.vue"

const props = defineProps({
  contentClass: String,
  itemSides: Object,
});

const contentBlockProps = {
  colIndex: 0,
  itemSides: props.itemSides,
};
</script>
<template>
  <div id="item-root">
    <ContentBlock
      :class="contentClass"
      :style="{ top: itemSides.height * 0 }"
      :="contentBlockProps"
      :index="0"
      title="文字对齐"
    >
      <TextEmoji />
    </ContentBlock>
    <ContentBlock
      :class="contentClass"
      :style="{ top: itemSides.height * 1 }"
      :="{ ...contentBlockProps, itemSides: { ...itemSides, height: 250 } }"
      :index="0"
      title="不同方向文字省略"
    >
      <text-direction />
    </ContentBlock>
  </div>
</template>

