minnan/src/components/display/skeleton/SkeletonBaseBox.vue

<template>
  <view 
    :class="[ 
      'nana-skeleton', 
      type,
      { 'anim': context.active.value }
    ]"
    :style="{
      'background-color': context.color.value,
      'width': themeContext.resolveSize(props.width),
      'height': themeContext.resolveSize(props.height),
      ...props.innerStyle,
    }"
  >
    <view class="anim-box" />
  </view>
</template>

<script setup lang="ts">
import { inject } from 'vue';
import type { SkeletonContext } from '../Skeleton.vue';
import { useTheme, type ViewStyle } from '@/components/theme/ThemeDefine';

const context = inject('SkeletonContext') as SkeletonContext;
const themeContext = useTheme();

export type SkeletonItemSize = 'small'|'medium'|'large';

export interface SleletonBaseBoxProps {
  width?: number;
  height?: number;
  innerStyle?: ViewStyle,
  type?: string,

}

const props = withDefaults(defineProps<SleletonBaseBoxProps>(), {
  type: 'base-box',
});

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