init

components/UiTable.vue

@@ -16,9 +16,7 @@
               :colspan="header?.colSpan"
               :style="[
                 header?.column?.columnDef?.meta?.style,
-                isMobile
+                { width: `${header?.getSize()}px` },
-                  ? { width: '100%' }
-                  : { width: `${header?.getSize()}px` },
               ]"
               @click="header?.column?.getToggleSortingHandler()?.($event)"
             >
@@ -46,9 +44,7 @@
               :key="cell?.id"
               :style="[
                 cell?.column?.columnDef.meta?.style,
-                isMobile
+                { width: `${cell?.column?.getSize()}px` },
-                  ? { width: '100%' }
-                  : { width: `${cell?.column?.getSize()}px` },
               ]"
             >
               <FlexRender
@@ -67,15 +63,12 @@
 import type { ColumnDef } from '@tanstack/vue-table'
 import { FlexRender, getCoreRowModel, getSortedRowModel, useVueTable } from '@tanstack/vue-table'
 import { useVirtualizer } from '@tanstack/vue-virtual'
-import { useMediaQuery } from '@vueuse/core'
 
 const props = defineProps<{
   tableData: any[]
   columns: ColumnDef<any>[]
 }>()
 
-const isMobile = useMediaQuery('(max-width: 1280px)')
-
 const table = useVueTable({
   get data() {
     return props?.tableData
@@ -145,6 +138,7 @@ thead {
   position: sticky;
   top: 0;
   z-index: 1;
+  background: var(--ui-bg-accented);
 }
 
 thead tr {

components/UiTableShortText.vue

@@ -0,0 +1,36 @@
+<template>
+  <div ref="wrapper" class="table-short-text" v-bind="attrs">
+    <UTooltip v-if="isMobile" :text="text" :open="open">
+      {{ truncate(text, maxLength) }}
+      <Icon
+        v-if="!hideIcon"
+        name="heroicons:information-circle"
+        @click="open = !open"
+      />
+    </UTooltip>
+
+    <UTooltip v-else :text="text">
+      <span>{{ truncate(text, maxLength) }}</span>
+    </UTooltip>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { onClickOutside, useMediaQuery } from '@vueuse/core'
+
+defineProps<{ text: string, maxLength: number, hideIcon: boolean }>()
+const attrs = useAttrs()
+
+const wrapper = ref<HTMLElement | null>(null)
+const open = ref(false)
+
+const isMobile = useMediaQuery('(max-width: 1280px)')
+
+onClickOutside(wrapper, () => {
+  open.value = false
+})
+
+function truncate(text: string, max = 15) {
+  return text?.length > max ? `${text?.slice(0, max)}…` : text
+}
+</script>

components/modals/UserModal.vue

@@ -0,0 +1,20 @@
+<template>
+  <UModal v-model:open="open" :title="selectedUser?.email">
+    <template #body>
+      <div>
+        <div>Имя: {{ selectedUser?.name }}</div>
+        <div>Логин: {{ selectedUser?.username }}</div>
+        <div>Электронная почта: {{ selectedUser?.email }}</div>
+        <div>Телефон: {{ selectedUser?.phone }}</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>
+      </div>
+    </template>
+  </UModal>
+</template>
+
+<script setup lang="ts">
+defineProps<{ selectedUser: User | null }>()
+const open = defineModel('modelValue', { type: Boolean, default: false })
+</script>

pages/index.vue

@@ -13,32 +13,20 @@
 
     <UiTable :table-data="tableData" :columns="columns" />
 
-    <UModal v-model:open="open" :title="selectedUser?.email">
+    <UserModal v-model:model-value="open" :selected-user="selectedUser" />
-      <template #body>
-        <div>
-          <div>Имя: {{ selectedUser?.name }}</div>
-          <div>Логин: {{ selectedUser?.username }}</div>
-          <div>Электронная почта: {{ selectedUser?.email }}</div>
-          <div>Телефон: {{ selectedUser?.phone }}</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>
-        </div>
-      </template>
-    </UModal>
   </div>
 </template>
 
 <script setup lang="ts">
-import { UTooltip } from '#components'
+import { UiTableShortText } from '#components'
 import {
   createColumnHelper,
 } from '@tanstack/vue-table'
-import { useDebounceFn, useMediaQuery } from '@vueuse/core'
+import { useDebounceFn } from '@vueuse/core'
 import { useGetPosts, useGetUsers } from '~/api/queries'
+import UserModal from '~/components/modals/UserModal.vue'
 import UiTable from '~/components/UiTable.vue'
 
-const isMobile = useMediaQuery('(max-width: 1280px)')
 const open = ref(false)
 const selectedUser = ref<User | null>(null)
 const search = ref('')
@@ -72,23 +60,20 @@ const columns = [
   }),
   columnHelper.accessor('title', {
     header: 'Заголовок',
-    cell: info => isMobile.value
+    cell: info => h(UiTableShortText, {
-      ? info.getValue()
+      text: info.getValue(),
-      : h(UTooltip, { text: info.getValue(),
+      maxLength: 10,
-        }, {
-          default: () => h('span', { class: 'ellipsis' }, truncate(info.getValue()),
-          ),
     }),
     size: 150,
   }),
   columnHelper.accessor('userEmail', {
     header: 'Автор',
-    cell: info => isMobile.value
+    cell: info =>
-      ? info.getValue()
+      h(UiTableShortText, {
-      : h(UTooltip, { text: info.getValue(),
+        text: info.getValue(),
-        }, {
+        hideIcon: true,
-          default: () => h('div', { class: 'title-cell', onClick: () => openPost(info?.row?.original) }, truncate(info.getValue()),
+        class: 'title-cell',
-          ),
+        onClick: () => openPost(info.row.original),
       }),
     meta: {
       style: {
@@ -101,14 +86,11 @@ const columns = [
   }),
   columnHelper.accessor('body', {
     header: 'Контент',
-    cell: info => isMobile.value
+    cell: info => h(UiTableShortText, {
-      ? info.getValue()
-      : h(UTooltip, {
       text: info.getValue(),
-        }, {
+      maxLength: 18,
-          default: () => h('span', { class: 'ellipsis' }, truncate(info.getValue(), 22)),
     }),
-    size: 220,
+    size: 230,
   }),
 ]
 
@@ -116,10 +98,6 @@ function openPost(post: Post) {
   selectedUser.value = users?.value?.find(user => user?.id === post?.userId)
   open.value = true
 }
-
-function truncate(text: string, max = 15) {
-  return text?.length > max ? `${text?.slice(0, max)}…` : text
-}
 </script>
 
 <style lang="scss">
@@ -149,8 +127,7 @@ function truncate(text: string, max = 15) {
   }
 }
 
-/* -------------------- CLICKABLE USER EMAIL CELL -------------------- */
+//userEmail
-
 .title-cell {
   cursor: pointer;
   text-decoration: underline;

server/api/posts.ts

@@ -5,33 +5,12 @@ export default defineEventHandler(async (event) => {
     const { search } = getQuery(event)
     const apiUrl = process.env.VITE_MY_API_BASE_URL!
 
-    return [
+    return await $fetch<Posts>(`${apiUrl}/posts?title_like=${search}`, {
-      {
+      headers: {
-        userId: 1,
+        'Content-Type': 'application/json',
-        id: 1,
+        'Accept-Language': 'ru-RU',
-        title: 'pizda',
-        body: 'jopa',
       },
-      {
+    })
-        userId: 1,
-        id: 1,
-        title: 'pizda',
-        body: 'jopa',
-      },
-      {
-        userId: 1,
-        id: 1,
-        title: 'pizda',
-        body: 'jopa',
-      },
-    ]
-
-    // return await $fetch<Posts>(`${apiUrl}/posts?title_like=${search}`, {
-    //   headers: {
-    //     'Content-Type': 'application/json',
-    //     'Accept-Language': 'ru-RU',
-    //   },
-    // })
   }
   catch (error) {
     return sendError(event, createError({

server/api/users.ts

@@ -4,84 +4,12 @@ export default defineEventHandler(async (event) => {
   try {
     const apiUrl = process.env.VITE_MY_API_BASE_URL!
 
-    return [
+    return await $fetch<Users>(`${apiUrl}/users`, {
-      {
+      headers: {
-        id: 1,
+        'Content-Type': 'application/json',
-        name: 'pizda',
+        'Accept-Language': 'ru-RU',
-        username: 'jopa',
-        email: 'pizdajopa@nail.com',
-        address: {
-          street: 'pushkina',
-          suite: 'xuyushkina',
-          city: 'Omsk',
-          zipcode: 'xuicode',
-          geo: {
-            lat: '-9123',
-            lng: '32112',
       },
-        },
+    })
-        phone: '89219123321',
-        website: 'koptilnya.xyz',
-        company: {
-          name: 'alfabot',
-          catchPhrase: 'xuibot',
-          bs: 'bs xueta kakayota',
-        },
-      },
-      {
-        id: 1,
-        name: 'pizda',
-        username: 'jopa',
-        email: 'pizdajopa@nail.com',
-        address: {
-          street: 'pushkina',
-          suite: 'xuyushkina',
-          city: 'Omsk',
-          zipcode: 'xuicode',
-          geo: {
-            lat: '-9123',
-            lng: '32112',
-          },
-        },
-        phone: '89219123321',
-        website: 'koptilnya.xyz',
-        company: {
-          name: 'alfabot',
-          catchPhrase: 'xuibot',
-          bs: 'bs xueta kakayota',
-        },
-      },
-      {
-        id: 1,
-        name: 'pizda',
-        username: 'jopa',
-        email: 'pizdajopa@nail.com',
-        address: {
-          street: 'pushkina',
-          suite: 'xuyushkina',
-          city: 'Omsk',
-          zipcode: 'xuicode',
-          geo: {
-            lat: '-9123',
-            lng: '32112',
-          },
-        },
-        phone: '89219123321',
-        website: 'koptilnya.xyz',
-        company: {
-          name: 'alfabot',
-          catchPhrase: 'xuibot',
-          bs: 'bs xueta kakayota',
-        },
-      },
-    ]
-
-    // return await $fetch<Users>(`${apiUrl}/users`, {
-    //   headers: {
-    //     'Content-Type': 'application/json',
-    //     'Accept-Language': 'ru-RU',
-    //   },
-    // })
   }
   catch (error) {
     return sendError(event, createError({