feat: add possibility to list specific repositories

ListRepositories will now fetch repos with FetchRepositories only if no repositories are already
passed to the component in its default slot.
This commit is contained in:
2023-05-08 12:44:12 +02:00
parent 1678100198
commit 1e3e15ab4e
7 changed files with 119 additions and 75 deletions

View File

@@ -0,0 +1,50 @@
<template>
<div v-if="props.user !== ''" class="list-repos flex-col gap-1rem">
<FetchRepositories
:sort-by="props.sortBy"
:user="props.user"
:limit="props.limit"
@data-loaded="(response: GithubRepo[]) => (repos = response)"
/>
<GithubRepository :data="repo" type="repositories" v-for="repo in repos" />
</div>
<div v-else class="list-repos flex-col gap-1rem">
<slot></slot>
</div>
</template>
<script setup lang="ts">
import FetchRepositories from './FetchRepositories.vue';
import GithubRepository from './GithubRepository.vue';
import { PropType, Ref, ref } from 'vue';
import { GithubRepo } from '../../composables/github';
const props = defineProps({
sortBy: {
default: 'none',
required: false,
type: String as PropType<'stars' | 'forks' | 'pushed_at'>,
},
user: {
default: '',
required: false,
type: String,
},
limit: {
default: 5,
required: false,
type: Number,
},
});
const repos: Ref<GithubRepo[]> = ref(null);
</script>
<style lang="less">
@import '../../styles/classes.less';
.list-repos {
margin: 2rem auto;
}
</style>