fix: Don't use child comp slot if isn't used

related: #180 #181

packages/anu-vue/src/components/card/ACard.vue

@@ -7,6 +7,7 @@ import { isTypographyUsed } from '@/components/typography/utils'
 import { type ConfigurableValue, useConfigurable } from '@/composables/useConfigurable'
 import { useDefaults } from '@/composables/useDefaults'
 import { useLayer } from '@/composables/useLayer'
+import { filterUsedSlots } from '@/utils/vue'
 
 // SECTION Meta
 const _props = defineProps(aCardProps)
@@ -77,7 +78,7 @@ else
       >
         <!-- ℹ️ Recursively pass down slots to child -->
         <template
-          v-for="(_, name) in aCardTypographySlots"
+          v-for="name in filterUsedSlots(aCardTypographySlots)"
           #[name]="slotProps"
         >
           <slot

packages/anu-vue/src/components/data-table/ADataTable.vue

@@ -11,6 +11,7 @@ import { useSearch } from '@/composables/useSearch'
 import type { typeSortBy } from '@/composables/useSort'
 import { useSort } from '@/composables/useSort'
 import { objectKeys } from '@/utils/typescripts'
+import { filterUsedSlots } from '@/utils/vue'
 
 // TODO: Check usage with useDebounceFn. Can we limit the # of req to server?
 
@@ -372,8 +373,9 @@ const paginationMeta = computed(() => {
 
     <!-- TODO: If you are using child component props in component => Filter them out -->
     <!-- ℹ️ Recursively pass down slots to child -->
+    <!-- TODO: (types) Don't use type assertion -->
     <template
-      v-for="(_, name) in _aDataTableTableSlots"
+      v-for="name in filterUsedSlots(_aDataTableTableSlots as any)"
       #[name]="slotProps"
     >
       <slot

packages/anu-vue/src/components/dialog/ADialog.vue

@@ -6,6 +6,7 @@ import { ACard } from '@/components/card'
 import { useDOMScrollLock } from '@/composables/useDOMScrollLock'
 import { useDefaults } from '@/composables/useDefaults'
 import { useTeleport } from '@/composables/useTeleport'
+import { filterUsedSlots } from '@/utils/vue'
 
 // SECTION Meta
 const _props = defineProps(aDialogProps)
@@ -56,7 +57,7 @@ useDOMScrollLock(toRef(props, 'modelValue') as Ref<boolean>)
           >
             <!-- ℹ️ Recursively pass down slots to child -->
             <template
-              v-for="(_, name) in aDialogSlots"
+              v-for="name in filterUsedSlots(aDialogSlots)"
               #[name]="slotProps"
             >
               <slot

packages/anu-vue/src/components/drawer/ADrawer.vue

@@ -6,6 +6,7 @@ import { ACard } from '@/components/card'
 import { useDOMScrollLock } from '@/composables/useDOMScrollLock'
 import { useDefaults } from '@/composables/useDefaults'
 import { useTeleport } from '@/composables/useTeleport'
+import { filterUsedSlots } from '@/utils/vue'
 
 // SECTION Meta
 const _props = defineProps(aDrawerProps)
@@ -92,7 +93,7 @@ useDOMScrollLock(toRef(props, 'modelValue') as Ref<boolean>)
           >
             <!-- ℹ️ Recursively pass down slots to child -->
             <template
-              v-for="(_, name) in aDrawerSlots"
+              v-for="name in filterUsedSlots(aDrawerSlots)"
               #[name]="slotProps"
             >
               <slot

packages/anu-vue/src/components/input/AInput.vue

@@ -3,6 +3,7 @@ import type { AInputEvents } from './meta'
 import { aInputProps, aTextareaBaseInputSlots } from './meta'
 import { ABaseInput, aBaseInputProps } from '@/components/base-input'
 import { useDefaults } from '@/composables/useDefaults'
+import { filterUsedSlots } from '@/utils/vue'
 
 // SECTION Meta
 const _props = defineProps(aInputProps)
@@ -39,7 +40,7 @@ function handleInputWrapperClick() {
   >
     <!-- ℹ️ Recursively pass down slots to child -->
     <template
-      v-for="(_, name) in aTextareaBaseInputSlots"
+      v-for="name in filterUsedSlots(aTextareaBaseInputSlots)"
       #[name]="slotProps"
     >
       <slot

packages/anu-vue/src/components/list/AList.vue

@@ -4,6 +4,7 @@ import { aListListItemSlotsWithPrefixMeta, aListProps } from './meta'
 import { AListItem } from '@/components/list-item'
 import { useDefaults } from '@/composables/useDefaults'
 import { calculateSelectionItems, extractItemValueFromItemOption, useSelection } from '@/composables/useSelection'
+import { filterUsedRenamedSlots } from '@/utils/vue'
 
 // SECTION Meta
 const _props = defineProps(aListProps)
@@ -73,7 +74,7 @@ function handleListItemClick(item: AListPropItems[number]) {
       >
         <!-- ℹ️ Recursively pass down slots to child -->
         <template
-          v-for="{ originalKey: originalSlotName, prefixedKey: updatedSlotName } in aListListItemSlotsWithPrefixMeta"
+          v-for="{ originalKey: originalSlotName, prefixedKey: updatedSlotName } in filterUsedRenamedSlots(aListListItemSlotsWithPrefixMeta)"
           #[originalSlotName]="slotProps"
         >
           <slot

packages/anu-vue/src/components/loader/ALoader.vue

@@ -7,6 +7,7 @@ import { isTypographyUsed } from '@/components/typography/utils'
 import { type ConfigurableValue, useConfigurable } from '@/composables/useConfigurable'
 import { useDOMScrollLock } from '@/composables/useDOMScrollLock'
 import { useDefaults } from '@/composables/useDefaults'
+import { filterUsedSlots } from '@/utils/vue'
 
 // SECTION Meta
 const _props = defineProps(aLoaderProps)
@@ -74,7 +75,7 @@ if (props.fullPage) {
       >
         <!-- ℹ️ Recursively pass down slots to child -->
         <template
-          v-for="(_, name) in aLoaderTypographySlots"
+          v-for="name in filterUsedSlots(aLoaderTypographySlots)"
           #[name]="slotProps"
         >
           <slot

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

@@ -8,7 +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'
+import { filterUsedRenamedSlots, filterUsedSlots } from '@/utils/vue'
 
 // SECTION Meta
 export interface ObjectOption { label: string; value: string | number }
@@ -102,7 +102,7 @@ function middleware() {
   >
     <!-- ℹ️ Recursively pass down slots to child -->
     <template
-      v-for="(_, name) in aSelectBaseInputSlots"
+      v-for="name in filterUsedSlots(aSelectBaseInputSlots)"
       #[name]="slotProps"
     >
       <slot
@@ -154,7 +154,7 @@ function middleware() {
       >
         <!-- ℹ️ Recursively pass down slots to child -->
         <template
-          v-for="{ originalKey: originalSlotName, prefixedKey: updatedSlotName } in aSelectListSlotsWithPrefixMeta"
+          v-for="{ originalKey: originalSlotName, prefixedKey: updatedSlotName } in filterUsedRenamedSlots(aSelectListSlotsWithPrefixMeta)"
           #[originalSlotName]="slotProps"
         >
           <slot

packages/anu-vue/src/components/table/ATable.vue

@@ -5,6 +5,7 @@ import type { ACardProps } from '@/components/card'
 import { aCardProps } from '@/components/card'
 import { useDefaults } from '@/composables/useDefaults'
 import { objectKeys } from '@/utils/typescripts'
+import { filterUsedSlots } from '@/utils/vue'
 
 // SECTION Meta
 const _props = defineProps(aTableProps<Row>())
@@ -121,7 +122,7 @@ const _cols = computed<ATablePropColumn<Row>[]>(() => {
 
     <!-- ℹ️ Recursively pass down slots to child -->
     <template
-      v-for="(_, name) in aTableCardSlots"
+      v-for="name in filterUsedSlots(aTableCardSlots)"
       #[name]="slotProps"
     >
       <slot

packages/anu-vue/src/components/textarea/ATextarea.vue

@@ -3,6 +3,7 @@ import type { ATextareaEvents, aTextareaSlots } from './meta'
 import { aTextareaBaseInputSlots, aTextareaProps } from './meta'
 import { ABaseInput, aBaseInputProps } from '@/components/base-input'
 import { useDefaults } from '@/composables/useDefaults'
+import { filterUsedSlots } from '@/utils/vue'
 
 // SECTION Meta
 const _props = defineProps(aTextareaProps)
@@ -55,7 +56,7 @@ if (props.autoSize) {
   >
     <!-- ℹ️ Recursively pass down slots to child -->
     <template
-      v-for="(_, name) in aTextareaBaseInputSlots"
+      v-for="name in filterUsedSlots(aTextareaBaseInputSlots)"
       #[name]="slotProps"
     >
       <slot

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

@@ -0,0 +1,15 @@
+import { objectKeys, objectMap } from '@antfu/utils'
+import type { prefixObjectKeysWithMeta } from '@/utils/helpers'
+
+// 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)[]
+})
+
+export const filterUsedRenamedSlots = computed(() => <const T extends ReturnType<typeof prefixObjectKeysWithMeta>>(slotsToUse: T): T => {
+  const slots = useSlots()
+
+  return objectMap(slotsToUse, (originalSlotName, obj) => slots[obj.prefixedKey] ? [originalSlotName, obj] : undefined) as T
+})