// BaseList.vue
<script setup>
const props = defineProps({
  items: {
    type: Array,
    required: true
  },
  renderItem: {
    type: Function,
    required: true
  },
  filterFn: {
    type: Function,
    default: (item) => true
  },
  sortFn: {
    type: Function,
    default: (a, b) => 0
  }
})

const processedItems = computed(() => {
  return props.items
    .filter(props.filterFn)
    .sort(props.sortFn)
})
</script>

<template>
  <div class="base-list">
    <div v-for="item in processedItems" :key="item.id">
      <!-- Zde voláme předanou render funkci místo pevného templatu -->
      {{ renderItem(item) }}
    </div>
  </div>
</template>

// Použití v parentovi:
<template>
  <BaseList 
    :items="users"
    :render-item="(user) => `${user.name} (${user.role})`"
    :filter-fn="(user) => user.active"
    :sort-fn="(a, b) => a.name.localeCompare(b.name)"
  />