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

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

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

const { resolveThemeSize } = useTheme();

defineOptions({
  options: {
    inheritAttrs: false,
    virtualHost: true,
  }
})
</script>

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

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