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>