This commit is contained in:
pa
2026-01-07 17:00:11 +09:00
committed by Natsumi
parent 6cfefb50ab
commit 02e221e307
12 changed files with 43 additions and 61 deletions
@@ -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);
+4 -2
View File
@@ -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
View File
@@ -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([]);
+1 -9
View File
@@ -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(() => {
-10
View File
@@ -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
}); });
+1 -12
View File
@@ -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(
+1 -1
View File
@@ -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;
+4 -4
View File
@@ -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}
+3 -3
View File
@@ -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') {
+5 -5
View File
@@ -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}
+4 -2
View File
@@ -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"
+1 -1
View File
@@ -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;