refactor(nc-gui): use lazy load and cleanup imports

packages/nc-gui/components/tabs/auth/user-management/UsersModal.vue

@@ -1,10 +1,10 @@
 <script setup lang="ts">
-import { Form, message } from 'ant-design-vue'
-import ShareBase from './ShareBase.vue'
 import {
+  Form,
   computed,
   extractSdkResponseErrorMsg,
   isEmail,
+  message,
   onMounted,
   projectRoleTagColors,
   projectRoles,
@@ -36,11 +36,15 @@ const emit = defineEmits(['closed', 'reload'])
 const { t } = useI18n()
 
 const { project } = useProject()
+
 const { $api, $e } = useNuxtApp()
+
 const { copy } = useCopy()
+
 const { dashboardUrl } = $(useDashboard())
 
 const usersData = $ref<Users>({ emails: undefined, role: ProjectRole.Viewer, invitationToken: undefined })
+
 const formRef = ref()
 
 const useForm = Form.useForm
@@ -144,6 +148,7 @@ const clickInviteMore = () => {
     <div class="flex flex-col">
       <div class="flex flex-row justify-between items-center pb-1.5 mb-2 border-b-1 w-full">
         <a-typography-title class="select-none" :level="4"> {{ $t('activity.share') }}: {{ project.title }} </a-typography-title>
+
         <a-button type="text" class="!rounded-md mr-1 -mt-1.5" @click="emit('closed')">
           <template #icon>
             <MaterialSymbolsCloseRounded class="flex mx-auto" />
@@ -165,6 +170,7 @@ const clickInviteMore = () => {
                   <div class="flex pl-2 text-green-700 text-xs">
                     {{ inviteUrl }}
                   </div>
+
                   <a-button type="text" class="!rounded-md -mt-0.5" @click="copyUrl">
                     <template #icon>
                       <MdiContentCopy class="flex mx-auto text-green-700 h-[1rem]" />
@@ -178,21 +184,25 @@ const clickInviteMore = () => {
               {{ $t('msg.info.userInviteNoSMTP') }}
               {{ usersData.invitationToken && usersData.emails }}
             </div>
+
             <div class="flex flex-row justify-start mt-4 ml-2">
               <a-button size="small" outlined @click="clickInviteMore">
                 <div class="flex flex-row justify-center items-center space-x-0.5">
                   <MaterialSymbolsSendOutline class="flex mx-auto text-gray-600 h-[0.8rem]" />
+
                   <div class="text-xs text-gray-600">{{ $t('activity.inviteMore') }}</div>
                 </div>
               </a-button>
             </div>
           </div>
         </template>
+
         <div v-else class="flex flex-col pb-4">
           <div class="flex flex-row items-center pl-2 pb-1 h-[1rem]">
             <MdiAccountOutline />
             <div class="text-xs ml-0.5 mt-0.5">{{ selectedUser ? $t('activity.editUser') : $t('activity.inviteTeam') }}</div>
           </div>
+
           <div class="border-1 py-3 px-4 rounded-md mt-1">
             <a-form
               ref="formRef"
@@ -210,6 +220,7 @@ const clickInviteMore = () => {
                     :rules="[{ required: true, message: 'Please input email' }]"
                   >
                     <div class="ml-1 mb-1 text-xs text-gray-500">{{ $t('datatype.Email') }}:</div>
+
                     <a-input
                       v-model:value="usersData.emails"
                       validate-trigger="onBlur"
@@ -218,9 +229,11 @@ const clickInviteMore = () => {
                     />
                   </a-form-item>
                 </div>
+
                 <div class="flex flex-col w-1/4">
                   <a-form-item name="role" :rules="[{ required: true, message: 'Role required' }]">
                     <div class="ml-1 mb-1 text-xs text-gray-500">{{ $t('labels.selectUserRole') }}</div>
+
                     <a-select v-model:value="usersData.role" class="nc-user-roles" dropdown-class-name="nc-dropdown-user-role">
                       <a-select-option v-for="(role, index) in projectRoles" :key="index" :value="role" class="nc-role-option">
                         <div class="flex flex-row h-full justify-start items-center">
@@ -236,9 +249,11 @@ const clickInviteMore = () => {
                   </a-form-item>
                 </div>
               </div>
+
               <div class="flex flex-row justify-center">
                 <a-button type="primary" html-type="submit">
                   <div v-if="selectedUser">{{ $t('general.save') }}</div>
+
                   <div v-else class="flex flex-row justify-center items-center space-x-1.5">
                     <MaterialSymbolsSendOutline class="flex h-[0.8rem]" />
                     <div>{{ $t('activity.invite') }}</div>
@@ -248,12 +263,11 @@ const clickInviteMore = () => {
             </a-form>
           </div>
         </div>
+
         <div class="flex mt-4">
-          <ShareBase />
+          <LazyTabsAuthUserManagementShareBase />
         </div>
       </div>
     </div>
   </a-modal>
 </template>
-
-<style scoped></style>