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