init

components/ShortText.vue

@@ -0,0 +1,83 @@
+<template>
+  <div ref="wrapper" class="short-text">
+    <!--    Mobile -->
+    <UTooltip
+      v-if="isMobile"
+      :text="text"
+      :open="open"
+      :disabled="!tooltipEnabled"
+      :ui="{ text: 'whitespace-normal break-words', content: 'max-w-50 h-auto' }"
+    >
+      <span :ref="checkSize" :class="textPrimary ? 'short-text--primary' : ''">{{ text }}</span>
+      <Icon
+        v-if="tooltipEnabled"
+        name="heroicons:information-circle"
+        class="short-text__icon"
+        @click.stop="open = !open"
+      />
+    </UTooltip>
+
+    <!-- Desktop -->
+    <UTooltip
+      v-else
+      :text="text"
+      :disabled="!tooltipEnabled"
+      :ui="{ text: 'whitespace-normal break-words', content: 'max-w-80 h-auto' }"
+    >
+      <span :ref="checkSize" :class="textPrimary ? 'short-text--primary' : ''">{{ text }}</span>
+    </UTooltip>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { onClickOutside, unrefElement } from '@vueuse/core'
+
+defineProps<{ text: string, textPrimary?: boolean }>()
+
+const wrapper = ref<HTMLElement | null>(null)
+const open = ref(false)
+const tooltipEnabled = ref(true)
+
+const { isMobile } = useScreen()
+
+onClickOutside(wrapper, () => {
+  open.value = false
+})
+
+function checkSize(_el: HTMLElement) {
+  const el = unrefElement(_el)
+
+  tooltipEnabled.value = el ? el.scrollWidth > el.clientWidth : false
+}
+</script>
+
+<style lang="scss">
+.short-text {
+  position: relative;
+  width: 100%;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+
+  &--primary {
+    cursor: pointer;
+    text-decoration: underline;
+    color: var(--ui-primary);
+
+    &:hover {
+      color: var(--ui-primary-hover);
+    }
+  }
+
+  > span {
+    display: block;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+  }
+
+  &__icon {
+    flex-shrink: 0;
+  }
+}
+</style>

components/UiTable.vue

@@ -10,15 +10,12 @@
           <tr
             v-for="headerGroup in table?.getHeaderGroups()"
             :key="headerGroup?.id"
+            :style="{ gridTemplateColumns }"
           >
             <th
               v-for="header in headerGroup?.headers"
               :key="header.id"
               :colspan="header?.colSpan"
-              :style="[
-                header?.column?.columnDef?.meta?.style,
-                { width: `${header?.getSize()}px` },
-              ]"
               @click="header?.column?.getToggleSortingHandler()?.($event)"
             >
               <FlexRender
@@ -38,15 +35,11 @@
             :ref="measureElement"
             :key="rows[vRow?.index]?.id"
             :data-index=" vRow?.index"
-            :style="{ transform: `translateY(${vRow?.start}px)` }"
+            :style="{ gridTemplateColumns, transform: `translateY(${vRow?.start}px)` }"
           >
             <td
               v-for="cell in rows[vRow?.index]?.getVisibleCells()"
               :key="cell?.id"
-              :style="[
-                cell?.column?.columnDef.meta?.style,
-                { width: `${cell?.column?.getSize()}px` },
-              ]"
             >
               <FlexRender
                 :render="cell?.column?.columnDef?.cell"
@@ -61,10 +54,17 @@
 </template>
 
 <script setup lang="ts">
+import type { RowData } from '@tanstack/table-core'
 import type { ColumnDef } from '@tanstack/vue-table'
 import { FlexRender, getCoreRowModel, getSortedRowModel, useVueTable } from '@tanstack/vue-table'
 import { useVirtualizer } from '@tanstack/vue-virtual'
 
+declare module '@tanstack/vue-table' {
+  interface ColumnMeta<TData extends RowData, TValue> {
+    width?: string
+  }
+}
+
 const props = defineProps<{
   tableData: any[]
   columns: ColumnDef<any>[]
@@ -98,6 +98,12 @@ const rowVirtualizer = useVirtualizer(rowVirtualizerOptions)
 const virtualRows = computed(() => rowVirtualizer?.value?.getVirtualItems())
 const totalSize = computed(() => rowVirtualizer?.value?.getTotalSize())
 
+const gridTemplateColumns = computed(() => {
+  return props.columns.map((column) => {
+    return column.meta?.width || '1fr'
+  }).join(' ')
+})
+
 function measureElement(el?: Element) {
   if (!el) {
     return
@@ -116,14 +122,16 @@ function measureElement(el?: Element) {
   margin-top: calc(40px + 10px);
   border-radius: 14px;
   overflow: auto;
+  width: 100%;
 
   @include mobile {
-    height: 500px;
+    height: 500px !important;
+    width: 100% !important;
   }
 }
 
 table {
-  min-width: 100%;
+  width: 100%;
   border-collapse: separate;
   border-spacing: 0;
 
@@ -135,7 +143,6 @@ table {
 /* -------------------- HEADER -------------------- */
 
 thead {
-  display: grid;
   position: sticky;
   top: 0;
   z-index: 1;
@@ -143,11 +150,11 @@ thead {
 }
 
 thead tr {
-  display: flex;
   width: 100%;
 }
 
 thead th {
+  flex-shrink: 0;
   background: var(--ui-bg-accented);
   color: var(--ui-text);
   padding: 12px 14px;
@@ -165,12 +172,10 @@ thead th:hover {
 /* -------------------- BODY -------------------- */
 
 tbody {
-  display: grid;
   position: relative;
 }
 
 tbody tr {
-  display: flex;
   position: absolute;
   width: 100%;
   height: 50px;
@@ -186,6 +191,10 @@ tbody tr:hover {
 }
 
 tbody td {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
   padding: 10px 12px;
   border-bottom: 1px solid var(--ui-border-subtle);
 }
@@ -193,4 +202,13 @@ tbody td {
 tbody tr:last-child td {
   border-bottom: none;
 }
+
+tr {
+  display: grid;
+}
+
+th,
+td {
+  overflow: hidden;
+}
 </style>

components/UiTableShortText.vue

@@ -1,36 +0,0 @@
-<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

@@ -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>

composables/useScreen.ts

@@ -0,0 +1,12 @@
+import { useMediaQuery } from '@vueuse/core'
+
+export default function useScreen() {
+  const isMobile = useMediaQuery('(max-width: 1279px)')
+
+  const isDesktop = computed(() => !isMobile.value)
+
+  return {
+    isMobile,
+    isDesktop,
+  }
+}

pages/index.vue

@@ -13,19 +13,19 @@
 
     <UiTable :table-data="tableData" :columns="columns" height="600px" width="600px" />
 
-    <UserModal v-if="selectedUser" v-model:model-value="open" :selected-user="selectedUser" />
+    <UserModal v-if="selectedUser" :user="selectedUser" @close="selectedUser = null" />
   </div>
 </template>
 
 <script setup lang="ts">
-import { UiTableShortText } from '#components'
+import type { ColumnDef } from '@tanstack/table-core'
 import { createColumnHelper } from '@tanstack/vue-table'
 import { useDebounceFn } from '@vueuse/core'
 import { useGetPosts, useGetUsers } from '~/api/queries'
 import UserModal from '~/components/modals/UserModal.vue'
+import ShortText from '~/components/ShortText.vue'
 import UiTable from '~/components/UiTable.vue'
 
-const open = ref(false)
 const selectedUser = ref<User | null>(null)
 const search = ref('')
 const updateSearch = useDebounceFn((value: string) => {
@@ -34,67 +34,66 @@ const updateSearch = useDebounceFn((value: string) => {
 const { data: posts, isLoading: postsIsLoading } = useGetPosts(search)
 const { data: users, isLoading: usersIsLoading } = useGetUsers()
 
-const tableData = computed(() => (posts?.value ?? []).map(post => ({
+interface TablePost extends Post {
+  userEmail: User['email']
+}
+
+const tableData = computed(() => {
+  return (posts?.value ?? []).map(post => ({
     userId: post?.userId,
     userEmail: users?.value?.find(user => user?.id === post?.userId)?.email,
     id: post?.id,
     title: post?.title,
     body: post?.body,
-})))
+  } as TablePost))
+})
 
-const columnHelper = createColumnHelper<Posts>()
+const columnHelper = createColumnHelper<TablePost>()
 const columns = [
   columnHelper.accessor('id', {
     header: 'ID',
-    footer: props => props?.column?.id,
     meta: {
-      style: {
-        display: 'flex',
-        justifyContent: 'center',
-        alignItems: 'center',
+      width: '50px',
     },
-    },
-    size: 50,
   }),
   columnHelper.accessor('title', {
     header: 'Заголовок',
-    cell: info => h(UiTableShortText, {
+    cell: info => h(ShortText, {
       text: info.getValue(),
-      maxLength: 10,
     }),
-    size: 150,
+    meta: {
+      width: '150px',
+    },
   }),
   columnHelper.accessor('userEmail', {
     header: 'Автор',
     cell: info =>
-      h(UiTableShortText, {
+      h(ShortText, {
         text: info.getValue(),
-        hideIcon: true,
-        class: 'title-cell',
+        textPrimary: true,
         onClick: () => openPost(info.row.original),
       }),
     meta: {
-      style: {
-        display: 'flex',
-        justifyContent: 'center',
-        alignItems: 'center',
+      width: '170px',
     },
-    },
-    size: 170,
   }),
   columnHelper.accessor('body', {
     header: 'Контент',
-    cell: info => h(UiTableShortText, {
+    cell: info => h(ShortText, {
       text: info.getValue(),
-      maxLength: 18,
     }),
-    size: 230,
+    meta: {
+      width: 'minmax(220px, 1fr)',
+    },
   }),
-]
+] as ColumnDef<TablePost>[]
 
 function openPost(post: Post) {
-  selectedUser.value = users?.value?.find(user => user?.id === post?.userId)
-  open.value = true
+  const foundUser = users?.value?.find(user => user?.id === post?.userId)
+
+  if (foundUser) {
+    selectedUser.value = foundUser
+  }
 }
 </script>
 
@@ -124,15 +123,4 @@ function openPost(post: Post) {
     }
   }
 }
-
-//userEmail
-.title-cell {
-  cursor: pointer;
-  text-decoration: underline;
-  color: var(--ui-primary);
-}
-
-.title-cell:hover {
-  color: var(--ui-primary-hover);
-}
 </style>

server/api/posts.ts

@@ -3,7 +3,7 @@ import { defineEventHandler, getQuery } from 'h3'
 export default defineEventHandler(async (event) => {
   try {
     const { search } = getQuery(event)
-    const apiUrl = process.env.VITE_MY_API_BASE_URL!
+    const apiUrl = import.meta.env.VITE_MY_API_BASE_URL!
 
     return await $fetch<Posts>(`${apiUrl}/posts?title_like=${search}`, {
       headers: {

server/api/users.ts

@@ -2,7 +2,7 @@ import { createError, defineEventHandler, sendError } from 'h3'
 
 export default defineEventHandler(async (event) => {
   try {
-    const apiUrl = process.env.VITE_MY_API_BASE_URL!
+    const apiUrl = import.meta.env.VITE_MY_API_BASE_URL!
 
     return await $fetch<Users>(`${apiUrl}/users`, {
       headers: {