mirror of
https://github.com/MrUnknownDE/VRCX.git
synced 2026-04-14 04:13:52 +02:00
tidy up
This commit is contained in:
@@ -6,7 +6,7 @@
|
||||
|
||||
<div class="rounded-md border">
|
||||
<div v-loading="loading" class="overflow-auto" :style="tableStyle">
|
||||
<Table class="table-fixed">
|
||||
<Table :class="tableClassValue" :style="tableElementStyle">
|
||||
<TableHeader>
|
||||
<TableRow v-for="headerGroup in table.getHeaderGroups()" :key="headerGroup.id">
|
||||
<TableHead
|
||||
@@ -119,6 +119,14 @@
|
||||
type: Object,
|
||||
required: true
|
||||
},
|
||||
tableClass: {
|
||||
type: [String, Array],
|
||||
default: null
|
||||
},
|
||||
useTableMinWidth: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
tableStyle: {
|
||||
type: Object,
|
||||
default: null
|
||||
@@ -184,6 +192,15 @@
|
||||
.filter(Boolean)
|
||||
.join(' ');
|
||||
|
||||
const tableClassValue = computed(() => joinClasses('table-fixed', props.tableClass));
|
||||
|
||||
const tableElementStyle = computed(() => {
|
||||
if (!props.useTableMinWidth) return undefined;
|
||||
const size = props.table?.getTotalSize?.();
|
||||
if (!Number.isFinite(size) || size <= 0) return undefined;
|
||||
return { minWidth: `${size}px` };
|
||||
});
|
||||
|
||||
const resolveClassValue = (value, ctx) => {
|
||||
if (typeof value === 'function') {
|
||||
return value(ctx);
|
||||
|
||||
@@ -2,7 +2,8 @@
|
||||
import { cn } from '@/lib/utils';
|
||||
|
||||
const props = defineProps({
|
||||
class: { type: null, required: false }
|
||||
class: { type: null, required: false },
|
||||
style: { type: [String, Array, Object], required: false }
|
||||
});
|
||||
</script>
|
||||
|
||||
@@ -10,7 +11,8 @@
|
||||
<div data-slot="table-container" class="relative w-full">
|
||||
<table
|
||||
data-slot="table"
|
||||
:class="cn('w-full caption-bottom text-[13px] in-[.is-compact-table]:text-[12px]', props.class)">
|
||||
:class="cn('w-full caption-bottom text-[13px] in-[.is-compact-table]:text-[12px]', props.class)"
|
||||
:style="props.style">
|
||||
<slot />
|
||||
</table>
|
||||
</div>
|
||||
|
||||
@@ -24,18 +24,8 @@ export const useFeedStore = defineStore('Feed', () => {
|
||||
vip: false,
|
||||
loading: false,
|
||||
filter: [],
|
||||
tableProps: {
|
||||
stripe: true,
|
||||
size: 'small',
|
||||
defaultSort: null,
|
||||
rowKey: (row) =>
|
||||
`${row.type}:${row.rowId ?? row.uid}:${row.created_at ?? ''}`
|
||||
},
|
||||
pageSize: 20,
|
||||
pageSizeLinked: true,
|
||||
paginationProps: {
|
||||
layout: 'sizes,prev,pager,next,total'
|
||||
}
|
||||
pageSizeLinked: true
|
||||
});
|
||||
|
||||
const feedSessionTable = ref([]);
|
||||
|
||||
@@ -87,16 +87,8 @@ export const useFriendStore = defineStore('Friend', () => {
|
||||
!(filter.value && row.type === 'Unfriend')
|
||||
}
|
||||
],
|
||||
tableProps: {
|
||||
stripe: true,
|
||||
size: 'small',
|
||||
defaultSort: null
|
||||
},
|
||||
pageSize: 20,
|
||||
pageSizeLinked: true,
|
||||
paginationProps: {
|
||||
layout: 'sizes,prev,pager,next,total'
|
||||
}
|
||||
pageSizeLinked: true
|
||||
});
|
||||
|
||||
const vipFriends = computed(() => {
|
||||
|
||||
@@ -63,18 +63,8 @@ export const useGameLogStore = defineStore('GameLog', () => {
|
||||
loading: false,
|
||||
search: '',
|
||||
filter: [],
|
||||
tableProps: {
|
||||
stripe: true,
|
||||
size: 'small',
|
||||
defaultSort: null,
|
||||
rowKey: (row) =>
|
||||
`${row.type}:${row.rowId ?? row.uid ?? row.displayName + row.location + row.time}:${row.created_at ?? ''}`
|
||||
},
|
||||
pageSize: 20,
|
||||
pageSizeLinked: true,
|
||||
paginationProps: {
|
||||
layout: 'sizes,prev,pager,next,total'
|
||||
},
|
||||
vip: false
|
||||
});
|
||||
|
||||
|
||||
@@ -26,19 +26,8 @@ export const useModerationStore = defineStore('Moderation', () => {
|
||||
value: ''
|
||||
}
|
||||
],
|
||||
tableProps: {
|
||||
stripe: true,
|
||||
size: 'small',
|
||||
defaultSort: {
|
||||
prop: 'created',
|
||||
order: 'descending'
|
||||
}
|
||||
},
|
||||
pageSize: 20,
|
||||
pageSizeLinked: true,
|
||||
paginationProps: {
|
||||
layout: 'sizes,prev,pager,next,total'
|
||||
}
|
||||
pageSizeLinked: true
|
||||
});
|
||||
|
||||
watch(
|
||||
|
||||
@@ -286,7 +286,7 @@ export const columns = [
|
||||
header: () => t('table.feed.detail'),
|
||||
enableSorting: false,
|
||||
meta: {
|
||||
class: 'min-w-0 overflow-hidden'
|
||||
class: 'min-w-[240px] overflow-hidden'
|
||||
},
|
||||
cell: ({ row }) => {
|
||||
const original = row.original;
|
||||
|
||||
@@ -32,7 +32,7 @@ export const createColumns = ({ onDelete, onDeletePrompt }) => {
|
||||
{
|
||||
accessorKey: 'created_at',
|
||||
meta: {
|
||||
class: 'w-[140px]'
|
||||
class: 'w-[90px]'
|
||||
},
|
||||
header: ({ column }) => (
|
||||
<Button
|
||||
@@ -67,7 +67,7 @@ export const createColumns = ({ onDelete, onDeletePrompt }) => {
|
||||
{
|
||||
accessorKey: 'type',
|
||||
meta: {
|
||||
class: 'w-[180px]'
|
||||
class: 'w-[110px]'
|
||||
},
|
||||
header: () => t('table.friendLog.type'),
|
||||
cell: ({ row }) => {
|
||||
@@ -82,7 +82,7 @@ export const createColumns = ({ onDelete, onDeletePrompt }) => {
|
||||
{
|
||||
accessorKey: 'displayName',
|
||||
meta: {
|
||||
class: 'min-w-0 overflow-hidden'
|
||||
class: 'w-[260px]'
|
||||
},
|
||||
header: () => t('table.friendLog.user'),
|
||||
cell: ({ row }) => {
|
||||
@@ -90,7 +90,7 @@ export const createColumns = ({ onDelete, onDeletePrompt }) => {
|
||||
const displayName =
|
||||
original.displayName || original.userId || '';
|
||||
return (
|
||||
<span class="block w-full min-w-0 truncate">
|
||||
<span class="block w-full whitespace-normal break-words">
|
||||
{original.type === 'DisplayName' ? (
|
||||
<span class="mr-1">
|
||||
{original.previousDisplayName}
|
||||
|
||||
@@ -139,9 +139,9 @@ export const createColumns = ({ getCreatedAt, onDelete, onDeletePrompt }) => {
|
||||
id: 'detail',
|
||||
header: () => t('table.gameLog.detail'),
|
||||
enableSorting: false,
|
||||
meta: {
|
||||
class: 'min-w-0 overflow-hidden'
|
||||
},
|
||||
meta: {
|
||||
class: 'min-w-[240px] overflow-hidden'
|
||||
},
|
||||
cell: ({ row }) => {
|
||||
const original = row.original;
|
||||
if (original.type === 'Location') {
|
||||
|
||||
@@ -33,7 +33,7 @@ export const createColumns = ({ onDelete, onDeletePrompt }) => {
|
||||
{
|
||||
accessorKey: 'created',
|
||||
meta: {
|
||||
class: 'w-[140px]'
|
||||
class: 'w-[90px]'
|
||||
},
|
||||
header: ({ column }) => (
|
||||
<Button
|
||||
@@ -68,7 +68,7 @@ export const createColumns = ({ onDelete, onDeletePrompt }) => {
|
||||
{
|
||||
accessorKey: 'type',
|
||||
meta: {
|
||||
class: 'w-[160px]'
|
||||
class: 'w-[80px]'
|
||||
},
|
||||
header: () => t('table.moderation.type'),
|
||||
cell: ({ row }) => {
|
||||
@@ -83,7 +83,7 @@ export const createColumns = ({ onDelete, onDeletePrompt }) => {
|
||||
{
|
||||
accessorKey: 'sourceDisplayName',
|
||||
meta: {
|
||||
class: 'w-[200px] min-w-0 overflow-hidden'
|
||||
class: 'w-[120px] min-w-0 overflow-hidden'
|
||||
},
|
||||
header: () => t('table.moderation.source'),
|
||||
cell: ({ row }) => {
|
||||
@@ -101,14 +101,14 @@ export const createColumns = ({ onDelete, onDeletePrompt }) => {
|
||||
{
|
||||
accessorKey: 'targetDisplayName',
|
||||
meta: {
|
||||
class: 'min-w-0 overflow-hidden'
|
||||
class: 'w-[200px]'
|
||||
},
|
||||
header: () => t('table.moderation.target'),
|
||||
cell: ({ row }) => {
|
||||
const original = row.original;
|
||||
return (
|
||||
<span
|
||||
class="x-link block w-full min-w-0 truncate pr-2.5"
|
||||
class="x-link block w-full whitespace-normal break-words pr-2.5"
|
||||
onClick={() => showUserDialog(original.targetUserId)}
|
||||
>
|
||||
{original.targetDisplayName}
|
||||
|
||||
@@ -179,10 +179,12 @@
|
||||
<PhotonEventTable @show-chatbox-blacklist="showChatboxBlacklistDialog" />
|
||||
</div>
|
||||
|
||||
<div class="current-instance-table flex min-h-0 flex-1">
|
||||
<div class="current-instance-table flex min-h-0 min-w-0 flex-1">
|
||||
<DataTableLayout
|
||||
class="[&_th]:px-2.5! [&_th]:py-0.75! [&_td]:px-2.5! [&_td]:py-0.75! [&_tr]:h-7!"
|
||||
class="min-w-0 w-full [&_th]:px-2.5! [&_th]:py-0.75! [&_td]:px-2.5! [&_td]:py-0.75! [&_tr]:h-7!"
|
||||
:table="playerListTable"
|
||||
table-class="min-w-max w-max"
|
||||
:use-table-min-width="true"
|
||||
:table-style="playerListTableStyle"
|
||||
:loading="false"
|
||||
:total-items="playerListTotalItems"
|
||||
|
||||
@@ -147,7 +147,7 @@ export const createColumns = ({
|
||||
minSize: 200,
|
||||
enableSorting: false,
|
||||
meta: {
|
||||
class: 'min-w-[200px]'
|
||||
class: 'w-[200px]'
|
||||
},
|
||||
cell: ({ row }) => {
|
||||
const userRef = row.original?.ref;
|
||||
|
||||
Reference in New Issue
Block a user