fix(select): rendering card slots (#181)

Co-authored-by: JD Solanki <jdsolanki0001@gmail.com>

packages/anu-vue/src/components/select/ASelect.vue

@@ -8,6 +8,7 @@ import { AFloating, sameWidthFloatingUIMiddleware } from '@/components/floating'
 import type { AListPropItems } from '@/components/list'
 import { useDefaults } from '@/composables/useDefaults'
 import { extractItemValueFromItemOption } from '@/composables/useSelection'
+import { filterUsedSlots } from '@/utils/reactivity'
 
 // SECTION Meta
 export interface ObjectOption { label: string; value: string | number }
@@ -135,7 +136,7 @@ function middleware() {
     >
       <!-- ℹ️ Recursively pass down slots to child -->
       <template
-        v-for="(_, name) in aSelectCardSlots"
+        v-for="name in filterUsedSlots(aSelectCardSlots)"
         #[name]="slotProps"
       >
         <slot
@@ -144,7 +145,7 @@ function middleware() {
         />
       </template>
       <AList
-        :items="options"
+        :items="props.options"
         :model-value="props.modelValue"
         :emit-object="props.emitObject"
         class="a-select-options-list"

packages/anu-vue/src/utils/reactivity.ts

@@ -0,0 +1,8 @@
+import { objectKeys } from '@antfu/utils'
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export const filterUsedSlots = computed(() => <const T extends Record<string, any>>(slotsToUse: T): (keyof T)[] => {
+  const slots = useSlots()
+
+  return objectKeys(slotsToUse).filter(key => slots[key as keyof typeof slots]) as (keyof T)[]
+})

packages/anu-vue/test/ASelect.test.tsx

@@ -1,28 +1,56 @@
 import { mount } from '@vue/test-utils'
-import { describe, expect, it } from 'vitest'
+import { afterEach, describe, expect, it } from 'vitest'
 import { nextTick, ref } from 'vue'
 import { ASelect } from '../src'
 
 describe('Testing ASelect', async () => {
+  let wrapper: ReturnType<typeof mount<ASelect>>
+
+  afterEach(() => {
+    document.body.innerHTML = ''
+  })
+
   it('should render', () => {
     const options = ref(['banana', 'apple', 'watermelon'])
-    const wrapper = mount(() =>
+    wrapper = mount(() =>
       <ASelect options={options.value}></ASelect>,
+    { attachTo: 'body' },
     )
     expect(wrapper).toBeDefined()
   })
 
   it('should select default value', async () => {
     const options = ref(['banana', 'apple', 'watermelon'])
     const modelValue = ref('apple')
-    const wrapper = mount(() =>
+    wrapper = mount(() =>
       <ASelect
         v-model={modelValue.value}
         options={options.value}
       ></ASelect>,
+    { attachTo: 'body' },
     )
     await nextTick()
     const inputElement = wrapper.find('.a-select-input').element as HTMLInputElement
     expect(inputElement.value).toContain('apple')
   })
+
+  it('should render card slots', async () => {
+    const options = ref(['banana', 'apple', 'watermelon'])
+    wrapper = mount(ASelect, {
+      props: {
+        options: options.value,
+      },
+      slots: {
+        title: '<div class="title-slot">title</div>',
+        subtitle: '<div class="subtitle-slot">subtitle</div>',
+      },
+      attachTo: 'body',
+    })
+    await wrapper.find('.a-select-input').trigger('click')
+    await nextTick()
+    const titleText = document.querySelector('.title-slot')?.textContent
+    const subTitleText = document.querySelector('.subtitle-slot')?.textContent
+    expect(titleText).toBe('title')
+    expect(subTitleText).toBe('subtitle')
+  })
 })