phundrak.com/content/.vuepress/components/GitHub/ListRepositories.vue
Lucien Cartier-Tilet d54aabd621
All checks were successful
deploy / deploy (push) Successful in 2m24s
refactor: rework API loader and caching
This commit removes dependency on rxjs.

It also implements better composables to handle data fetching from
remote APIs and caching these values more transparently.

This commit also switches from yarn to npm

It also switches to the official Umami plugin
2024-06-20 09:27:59 +02:00

55 lines
1.1 KiB
Vue

<template>
<div class="list-repos flex-col gap-1rem">
<FetchRepositories
v-if="props.user !== ''"
:sort-by="props.sortBy"
:user="props.user"
:limit="props.limit"
@loaded="(response: GithubRepo[]) => (repos = response)"
>
<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>