44 lines
1 KiB
Vue
44 lines
1 KiB
Vue
<script setup lang="ts">
|
|
// Define props with proper TypeScript typing
|
|
import { computed } from "vue";
|
|
import type { CountryListItemType } from "@/utils/countries.ts";
|
|
|
|
type ListItem<T> = {
|
|
raw: T;
|
|
}
|
|
|
|
// Define props with proper TypeScript typing
|
|
const props = defineProps<{
|
|
item: ListItem<CountryListItemType>;
|
|
itemProps?: Record<string, unknown>;
|
|
}>();
|
|
|
|
// Helper functions to check the type of the item
|
|
const isDivider = computed(() => {
|
|
return "divider" in props.item.raw && props.item.raw.divider;
|
|
});
|
|
|
|
const headerText = computed(() => {
|
|
return "header" in props.item.raw ? props.item.raw.header : "";
|
|
});
|
|
|
|
const countryItem = computed(() => {
|
|
return !isDivider.value && !headerText.value && "country" in props.item.raw ? props.item.raw : undefined;
|
|
});
|
|
|
|
</script>
|
|
|
|
<template>
|
|
<v-divider
|
|
v-if="isDivider"
|
|
class="my-2"
|
|
/>
|
|
<v-list-subheader v-if="headerText">
|
|
{{ headerText }}
|
|
</v-list-subheader>
|
|
<v-list-item
|
|
v-if="countryItem"
|
|
v-bind="itemProps"
|
|
:title="countryItem.country"
|
|
/>
|
|
</template>
|