init

components/UiTable.vue

@@ -16,9 +16,7 @@
               :colspan="header?.colSpan"
               :style="[
                 header?.column?.columnDef?.meta?.style,
-                isMobile
-                  ? { width: '100%' }
-                  : { width: `${header?.getSize()}px` },
+                { width: `${header?.getSize()}px` },
               ]"
               @click="header?.column?.getToggleSortingHandler()?.($event)"
             >
@@ -46,9 +44,7 @@
               :key="cell?.id"
               :style="[
                 cell?.column?.columnDef.meta?.style,
-                isMobile
-                  ? { width: '100%' }
-                  : { width: `${cell?.column?.getSize()}px` },
+                { 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>