init

components/modals/UserModal.vue

@@ -1,36 +1,74 @@
 <template>
-  <UModal v-model:open="open" :title="selectedUser.email">
+  <UModal
+    v-model:open="open"
+    :title="user.email"
+    class="user-modal"
+    @after:leave="emit('close')"
+  >
     <template #body>
       <div>
-        <div>Имя: {{ selectedUser.name }}</div>
-        <div>Логин: {{ selectedUser.username }}</div>
+        <div>Имя: {{ user.name }}</div>
+        <div>Логин: {{ user.username }}</div>
         <div>
           <a
-            :href="`mailto:${selectedUser.email}`"
+            :href="`mailto:${user.email}`"
             target="_blank"
             rel="noopener noreferrer"
           >
-            Электронная почта: {{ selectedUser.email }}
+            Электронная почта: <span>{{ user.email }}</span>
           </a>
         </div>
         <div>
           <a
-            :href="`tel:${selectedUser.phone}`"
+            :href="`tel:${user.phone}`"
             target="_blank"
             rel="noopener noreferrer"
           >
-            Телефон: {{ selectedUser.phone }}
+            Телефон: <span>{{ user.phone }}</span>
           </a>
         </div>
-        <a :href="`https://${selectedUser.website}`" target="_blank">Веб-сайт: <span class="title-cell">{{ selectedUser.website }}</span></a>
-        <div>Название компании: {{ selectedUser.company.name }}</div>
-        <div>Адрес: {{ `${selectedUser.address.street} ${selectedUser.address.suite} ${selectedUser.address.city}` }}</div>
+        <a
+          :href="`https://${user.website}`"
+          target="_blank"
+        >
+          Веб-сайт: <span>{{ user.website }}</span>
+        </a>
+        <div>Название компании: {{ user.company.name }}</div>
+        <div>Адрес: {{ `${user.address.street} ${user.address.suite} ${user.address.city}` }}</div>
       </div>
     </template>
   </UModal>
 </template>
 
 <script setup lang="ts">
-defineProps<{ selectedUser: User }>()
-const open = defineModel<boolean>('modelValue')
+const props = defineProps<{ user: User }>()
+
+const emit = defineEmits<{
+  close: []
+}>()
+
+const open = ref(!!props.user)
+
+watch(() => props.user, (user) => {
+  if (!user)
+    return
+
+  open.value = true
+})
 </script>
+
+<style lang="scss">
+.user-modal {
+  a {
+    span {
+      cursor: pointer;
+      text-decoration: underline;
+      color: var(--ui-primary);
+
+      &:hover {
+        color: var(--ui-primary-hover);
+      }
+    }
+  }
+}
+</style>