fix(vue): resolve conditional slots

frameworks/vue/src/components/color-picker/color-picker-value-text.vue

@@ -1,19 +1,24 @@
 <script lang="ts">
 import type { PolymorphicProps } from '../factory'
+import { useColorPickerContext } from './use-color-picker-context'
 
 export interface ColorPickerValueTextProps extends PolymorphicProps {}
 </script>
 
 <script setup lang="ts">
 import { colorPickerAnatomy } from '@ark-ui/anatomy'
+import { useSlots } from 'vue'
 import { ark } from '../factory'
 
 defineProps<ColorPickerValueTextProps>()
+const colorPicker = useColorPickerContext()
+const slots = useSlots()
 </script>
 
 <template>
   <ark.span v-bind="colorPickerAnatomy.build().valueText.attrs" :as-child="asChild">
-    <!-- TODO {slots.default?.() || api.value.valueAsString} -->
-    <slot />
+    <slot>
+      {{ slots.default?.() || colorPicker.valueAsString }}
+    </slot>
   </ark.span>
 </template>

frameworks/vue/src/components/file-upload/file-upload-item-name.vue

@@ -8,16 +8,18 @@ export interface FileUploadItemNameProps extends PolymorphicProps {}
 import { ark } from '../factory'
 import { useFileUploadContext } from './use-file-upload-context'
 import { useFileUploadItemPropsContext } from './use-file-upload-item-props-context'
+import { useSlots } from 'vue'
 
 defineProps<FileUploadItemNameProps>()
 const fileUpload = useFileUploadContext()
 const itemProps = useFileUploadItemPropsContext()
+const slots = useSlots()
 </script>
 
 <template>
   <ark.div v-bind="fileUpload.getItemNameProps(itemProps)" :as-child="asChild">
-    <!-- TODO -->
-    <!-- {slots.default?.() || itemProps.file.name} -->
-    <slot />
+    <slot>
+      {{ slots.default?.() || itemProps.file.name }}
+    </slot>
   </ark.div>
 </template>

frameworks/vue/src/components/file-upload/file-upload-item-size-text.vue

@@ -1,23 +1,25 @@
 <script lang="ts">
 import type { PolymorphicProps } from '../factory'
-import { useFileUploadItemPropsContext } from './use-file-upload-item-props-context'
 
 export interface FileUploadItemSizeTextProps extends PolymorphicProps {}
 </script>
 
 <script setup lang="ts">
+import { useSlots } from 'vue'
 import { ark } from '../factory'
 import { useFileUploadContext } from './use-file-upload-context'
+import { useFileUploadItemPropsContext } from './use-file-upload-item-props-context'
 
 defineProps<FileUploadItemSizeTextProps>()
 const fileUpload = useFileUploadContext()
 const itemProps = useFileUploadItemPropsContext()
+const slots = useSlots()
 </script>
 
 <template>
   <ark.div v-bind="fileUpload.getItemSizeTextProps(itemProps)" :as-child="asChild">
-    <!-- TODO -->
-    <!-- {slots.default?.() || api.value.getFileSize(itemProps.file)} -->
-    <slot />
+    <slot>
+      {{ slots.default?.() || fileUpload.getFileSize(itemProps.file) }}
+    </slot>
   </ark.div>
 </template>

frameworks/vue/src/components/progress/progress-value-text.vue

@@ -7,13 +7,15 @@ export interface ProgressValueTextProps extends PolymorphicProps {}
 <script setup lang="ts">
 import { ark } from '../factory'
 import { useProgressContext } from './use-progress-context'
+import { useSlots } from 'vue'
 
 defineProps<ProgressValueTextProps>()
 const progress = useProgressContext()
+const slots = useSlots()
 </script>
 
 <template>
   <ark.span v-bind="progress.valueTextProps" :as-child="asChild">
-    {{ progress.valueAsString }}
+    <slot>{{ slots.default?.() || progress.valueAsString }}</slot>
   </ark.span>
 </template>

frameworks/vue/src/components/select/select-value-text.vue

@@ -1,22 +1,24 @@
 <script lang="ts">
 import type { PolymorphicProps } from '../factory'
 
-export interface SelectValueTextProps extends PolymorphicProps {}
+export interface SelectValueTextProps extends PolymorphicProps {
+  placeholder?: string
+}
 </script>
 
 <script setup lang="ts">
+import { selectAnatomy } from '@ark-ui/anatomy'
+import { useSlots } from 'vue'
 import { ark } from '../factory'
 import { useSelectContext } from './use-select-context'
-import { selectAnatomy } from '@ark-ui/anatomy'
 
-defineProps<SelectValueTextProps>()
+const props = defineProps<SelectValueTextProps>()
 const select = useSelectContext()
+const slots = useSlots()
 </script>
 
 <template>
   <ark.span v-bind="selectAnatomy.build().valueText.attrs" :as-child="asChild">
-    <!-- TODO -->
-    <!-- {slots.default?.() || api.value.valueAsString || props.placeholder} -->
-    {{ select.valueAsString }}
+    <slot>{{ slots.default?.() || select.valueAsString || props.placeholder }}</slot>
   </ark.span>
 </template>

frameworks/vue/src/components/slider/slider-value-text.vue

@@ -6,15 +6,16 @@ export interface SliderValueTextProps extends PolymorphicProps {}
 
 <script setup lang="ts">
 import { ark } from '../factory'
+import { useSlots } from 'vue'
 import { useSliderContext } from './use-slider-context'
 
 defineProps<SliderValueTextProps>()
 const slider = useSliderContext()
+const slots = useSlots()
 </script>
 
 <template>
   <ark.span v-bind="slider.valueTextProps" :as-child="asChild">
-    <!-- TODO   {slots.default?.() || api.value.value.join(', ')} -->
-    <slot />
+    <slot>{{ slots.default?.() || slider.value.join(', ') }}</slot>
   </ark.span>
 </template>