<template>
  <div 
    class="nana-space" 
    :style="{ height: resolveThemeSize(size ?? height) }"
  >
    <slot />
  </div>
</template>

<script setup lang="ts">
import { useTheme } from '@/components/theme/ThemeDefine';

defineProps({
  /**
   * 高度
   */
  size: {
    type: [ Number, String ],
    default: undefined,
  },
  /**
   * 高度
   */
  height: {
    type: [ Number, String ],
    default: undefined,
  },
})

defineOptions({
  options: {
    inheritAttrs: false,
    virtualHost: true,
  }
})

const { resolveThemeSize } = useTheme();
</script>

<script lang="ts">
/**
 * 组件说明：高度占位组件，可以用于各种布局中，用于提供占位高度。
 */
export default {}
</script>

<style>
.nana-space {
  flex-shrink: 0;
}
</style>