<template>
  <view v-if="(allowChildNode || $slots.default) && !forceNoSlotWhenNestForMp" :id="id" :class="innerClass" :style="style" @click="onClick"><slot>{{ text }}</slot></view>
  <text v-else :id="id" :class="innerClass" :style="style" @click="onClick">{{ text }}</text>
</template>

<script lang="ts" setup>
import { useText, type TextProps } from './Text';

/**
 * 组件说明：文字封装，支持点击事件，颜色，阴影。
 */
const props = withDefaults(defineProps<TextProps>(), {
  shadowColor: '#000',
  wrap: true,
});
const emit = defineEmits([ 'click' ]);

const {
  id,
  style,
  measureTextWidth,
  onClick,
} = useText(props, emit);

defineExpose({
  measureTextWidth,
})
defineOptions({
  options: {
    virtualHost: true,
    styleIsolation: "shared",
  },
});
</script>