2023-05-08 10:44:12 +00:00
|
|
|
<template>
|
2024-06-20 07:27:59 +00:00
|
|
|
<ApiLoader :url="fetchUrl" @loaded="filterRepos" cache-name="repos" />
|
2023-05-08 13:57:45 +00:00
|
|
|
<slot />
|
2023-05-08 10:44:12 +00:00
|
|
|
</template>
|
|
|
|
|
|
|
|
<script setup lang="ts">
|
2024-06-20 07:27:59 +00:00
|
|
|
import { PropType, ref } from 'vue';
|
|
|
|
import { GithubRepo } from '../../types/github';
|
2023-05-08 10:44:12 +00:00
|
|
|
const props = defineProps({
|
|
|
|
sortBy: {
|
|
|
|
default: 'none',
|
|
|
|
required: false,
|
|
|
|
type: String as PropType<'stars' | 'forks' | 'pushed_at'>,
|
|
|
|
},
|
|
|
|
user: {
|
|
|
|
default: '',
|
|
|
|
required: true,
|
|
|
|
type: String,
|
|
|
|
},
|
|
|
|
limit: {
|
|
|
|
default: 5,
|
|
|
|
required: false,
|
|
|
|
type: Number,
|
|
|
|
},
|
|
|
|
});
|
2024-06-20 07:27:59 +00:00
|
|
|
const emits = defineEmits(['loaded']);
|
2023-05-08 10:44:12 +00:00
|
|
|
const fetchUrl = `https://api.github.com/users/${props.user}/repos?per_page=100`;
|
2024-06-20 07:27:59 +00:00
|
|
|
const repos = ref<GithubRepo[]>([]);
|
2023-05-08 10:44:12 +00:00
|
|
|
|
|
|
|
const filterRepos = (response: GithubRepo[]) => {
|
2024-06-20 07:27:59 +00:00
|
|
|
repos.value = response
|
|
|
|
.sort((a, b) => {
|
|
|
|
if (props.sortBy === 'stars') {
|
|
|
|
return b.stargazers_count - a.stargazers_count;
|
|
|
|
}
|
|
|
|
if (props.sortBy === 'pushed_at') {
|
|
|
|
const dateA = new Date(a.pushed_at);
|
|
|
|
const dateB = new Date(b.pushed_at);
|
|
|
|
return dateB.getTime() - dateA.getTime();
|
|
|
|
}
|
|
|
|
return b.forks_count - a.forks_count;
|
|
|
|
})
|
|
|
|
.slice(0, +props.limit);
|
|
|
|
emits('loaded', repos.value);
|
2023-05-08 10:44:12 +00:00
|
|
|
};
|
|
|
|
</script>
|