<script setup lang="ts">
import { inject } from 'vue'
import { SelectContextKey } from './context'

const props = defineProps<{ placeholder?: string }>()
const context = inject(SelectContextKey)!
</script>

<template>
  <span
    data-slot="select-value"
    :data-placeholder="context.modelValue.value ? undefined : placeholder"
  >
    <slot>{{ context.modelValue.value !== undefined ? context.itemLabels.get(context.modelValue.value) : placeholder }}</slot>
  </span>
</template>
