phundrak.com/content/.vuepress/components/GitHub/ListRepositories.vue

55 lines
1.1 KiB
Vue
Raw Normal View History

<template>
2023-05-08 13:57:45 +00:00
<div class="list-repos flex-col gap-1rem">
<FetchRepositories
2023-05-08 13:57:45 +00:00
v-if="props.user !== ''"
:sort-by="props.sortBy"
:user="props.user"
:limit="props.limit"
@loaded="(response: GithubRepo[]) => (repos = response)"
2023-05-08 13:57:45 +00:00
>
<GithubRepository
:data="repo"
type="repositories"
v-for="repo in repos"
/>
</FetchRepositories>
<slot v-else />
</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 '../../types/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>