11<script setup>
2- import VPButton from " ../vite/VPButton.vue" ;
2+ import { ref } from ' vue'
3+ import { VPTeamMembers , VPButton } from ' vitepress/theme'
34
4- defineProps ([" repo" ]);
5+ defineProps ([" repo" , " internalRepo" ]);
6+
7+ const showModal = ref (false )
58 </script >
69
710<template >
@@ -10,11 +13,27 @@ defineProps(["repo"]);
1013 <span :class =" $style.repoTitle" >{{ repo.name }}</span >
1114 <span v-if =" repo.description" :class =" $style.repoDetails" >{{ repo.description }}</span >
1215 <div v-if =" repo.submission || repo.support || repo.donate" :class =" $style.repoActions" >
13- <VPButton v-if =" repo.submission" text =" Submit Module" size =" medium" theme =" brand" :href =" repo.submission" />
14- <VPButton v-if =" repo.support" text =" Support" size =" medium" theme =" alt" :href =" repo.support" />
15- <VPButton v-if =" repo.donate" text =" Donate" size =" medium" theme =" sponsor" :href =" repo.donate" />
16+ <VPButton tag =" a" v-if =" repo.submission" text =" Submit Module" size =" medium" theme =" brand" :href =" repo.submission" />
17+ <VPButton tag =" a" v-if =" repo.support" text =" Support" size =" medium" theme =" alt" :href =" repo.support" />
18+ <VPButton v-if =" internalRepo.members" text =" Team" size =" medium" theme =" alt" @click =" showModal = true" />
19+ <VPButton tag =" a" v-if =" repo.donate" text =" Donate" size =" medium" theme =" sponsor" :href =" repo.donate" />
1620 </div >
1721 </div >
22+ <Teleport v-if =" internalRepo.members" to =" body" >
23+ <Transition name =" modal" >
24+ <div v-show =" showModal" class =" modal-mask" >
25+ <div class =" modal-container" >
26+ <div >
27+ <h2 class =" modal-title" >Repository Members</h2 >
28+ <VPTeamMembers size =" small" :members =" internalRepo.members" />
29+ </div >
30+ <div class =" model-footer" >
31+ <VPButton size =" medium" theme =" alt" text =" Close" @click =" showModal = false" />
32+ </div >
33+ </div >
34+ </div >
35+ </Transition >
36+ </Teleport >
1837</template >
1938
2039<style module>
@@ -51,3 +70,58 @@ defineProps(["repo"]);
5170 color : var (--vp-c-text-2 );
5271}
5372 </style >
73+
74+ <style scoped>
75+ a {
76+ color : inherit !important ;
77+ text-decoration : inherit !important ;
78+ }
79+
80+ .modal-title {
81+ display : flex ;
82+ letter-spacing : -0.02em ;
83+ line-height : 40px ;
84+ font-size : 32px ;
85+ margin-bottom : 16px ;
86+ }
87+
88+ .modal-mask {
89+ position : fixed ;
90+ z-index : 200 ;
91+ top : 0 ;
92+ left : 0 ;
93+ width : 100% ;
94+ height : 100% ;
95+ background-color : rgba (0 , 0 , 0 , 0.5 );
96+ display : flex ;
97+ align-items : center ;
98+ justify-content : center ;
99+ transition : opacity 0.3s ease ;
100+ }
101+
102+ .modal-container {
103+ width : 88% ;
104+ max-width : 1152px ;
105+ margin : auto ;
106+ padding : 20px 30px ;
107+ background-color : var (--vp-c-bg );
108+ border-radius : 12px ;
109+ box-shadow : 0 2px 8px rgba (0 , 0 , 0 , 0.33 );
110+ transition : all 0.3s ease ;
111+ }
112+
113+ .model-footer {
114+ margin-top : 16px ;
115+ text-align : right ;
116+ }
117+
118+ .modal-enter-from ,
119+ .modal-leave-to {
120+ opacity : 0 ;
121+ }
122+
123+ .modal-enter-from .modal-container ,
124+ .modal-leave-to .modal-container {
125+ transform : scale (1.1 );
126+ }
127+ </style >
0 commit comments