MrUnknownDE/VRCX
1
0
Fork 0
mirror of https://github.com/MrUnknownDE/VRCX.git synced 2026-04-17 13:53:52 +02:00
Code Issues Packages Projects Releases Wiki Activity

custom col widths

Browse Source
This commit is contained in:
pa
2026-01-10 15:48:31 +09:00
committed by Natsumi
parent 937294ebf7
commit e7cfc945da
15 changed files with 378 additions and 357 deletions
Download Patch File Download Diff File Expand all files Collapse all files

89
src/components/ui/data-table/DataTableLayout.vue
View File

@@ -7,17 +7,23 @@
<div class="rounded-md border">
<div v-loading="loading" class="overflow-auto" :style="tableStyle">
<Table :class="tableClassValue" :style="tableElementStyle">
<colgroup>
<col v-for="col in table.getVisibleLeafColumns()" :key="col.id" :style="getColStyle(col)" />
</colgroup>
<TableHeader>
<TableRow v-for="headerGroup in table.getHeaderGroups()" :key="headerGroup.id">
<TableHead
v-for="header in headerGroup.headers"
:key="header.id"
:class="getHeaderClass(header)"
:style="getPinnedStyle(header.column, true)">
<FlexRender
v-if="!header.isPlaceholder"
:render="header.column.columnDef.header"
:props="header.getContext()" />
:class="getHeaderClass(header)">
<template v-if="!header.isPlaceholder">
<FlexRender :render="header.column.columnDef.header" :props="header.getContext()" />
<div
v-if="header.column.getCanResize?.()"
class="absolute right-0 top-0 h-full w-1 cursor-col-resize touch-none select-none"
@mousedown.stop="header.getResizeHandler?.()($event)"
@touchstart.stop="header.getResizeHandler?.()($event)" />
</template>
</TableHead>
</TableRow>
</TableHeader>
@@ -28,8 +34,7 @@
<TableCell
v-for="cell in row.getVisibleCells()"
:key="cell.id"
:class="getCellClass(cell)"
:style="getPinnedStyle(cell.column, false)">
:class="getCellClass(cell)">
<FlexRender :render="cell.column.columnDef.cell" :props="cell.getContext()" />
</TableCell>
</TableRow>
@@ -47,7 +52,7 @@
</template>
<TableRow v-else>
<TableCell :colspan="visibleColumnCount" class="h-24 text-center">
<TableCell class="h-24 text-center">
<slot name="empty">
{{ emptyText }}
</slot>
@@ -60,7 +65,7 @@
<div v-if="showPagination" class="mt-4 flex w-full items-center gap-3">
<div v-if="pageSizes.length" class="inline-flex items-center flex-1 justify-end gap-2">
<span class="text-xs text-muted-foreground">{{ t('table.pagination.rows_per_page') }}</span>
<span class="text-xs text-muted-foreground truncate">{{ t('table.pagination.rows_per_page') }}</span>
<Select v-model="pageSizeValue">
<SelectTrigger size="sm">
<SelectValue />
@@ -125,10 +130,6 @@
type: [String, Array],
default: null
},
useTableMinWidth: {
type: Boolean,
default: false
},
tableStyle: {
type: Object,
default: null
@@ -169,14 +170,6 @@
const { t } = useI18n();
const visibleColumnCount = computed(() => {
const count = props.table.getVisibleLeafColumns?.().length ?? 0;
if (count > 0) {
return count;
}
return props.table.getAllColumns?.().length ?? 1;
});
const expandedRenderer = computed(() => {
const columns = props.table.getAllColumns?.() ?? [];
for (const column of columns) {
@@ -194,10 +187,9 @@
.filter(Boolean)
.join(' ');
const tableClassValue = computed(() => joinClasses('table-fixed', props.tableClass));
const tableClassValue = computed(() => joinClasses('table-fixed w-full', 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` };
@@ -210,11 +202,30 @@
return value;
};
const isSpacer = (col) => col?.id === '__spacer';
const isStretch = (col) => {
return !!col?.columnDef?.meta?.stretch;
};
const getColStyle = (col) => {
if (isSpacer(col)) return { width: '0px' };
if (isStretch(col)) {
return null;
}
const size = col?.getSize?.();
if (!Number.isFinite(size)) return null;
return { width: `${size}px` };
};
const getHeaderClass = (header) => {
const columnDef = header?.column?.columnDef;
const meta = columnDef?.meta ?? {};
return joinClasses(
'sticky top-0 z-10 bg-background',
'sticky top-0 z-10 bg-background relative',
isSpacer(header.column) && 'p-0',
resolveClassValue(meta.class, header?.getContext?.()),
resolveClassValue(meta.headerClass, header?.getContext?.()),
resolveClassValue(meta.thClass, header?.getContext?.()),
@@ -226,9 +237,8 @@
const getCellClass = (cell) => {
const columnDef = cell?.column?.columnDef;
const meta = columnDef?.meta ?? {};
const isPinned = Boolean(cell?.column?.getIsPinned?.());
return joinClasses(
isPinned ? 'bg-background' : null,
isSpacer(cell.column) && 'p-0',
resolveClassValue(meta.class, cell?.getContext?.()),
resolveClassValue(meta.cellClass, cell?.getContext?.()),
resolveClassValue(meta.tdClass, cell?.getContext?.()),
@@ -237,31 +247,6 @@
);
};
const getPinnedStyle = (column, isHeader) => {
const pinned = column?.getIsPinned?.();
if (!pinned) return null;
const style = {
position: 'sticky',
zIndex: isHeader ? 30 : 20
};
const size = column?.getSize?.();
if (Number.isFinite(size)) {
style.width = `${size}px`;
}
if (pinned === 'left') {
const left = column?.getStart?.('left');
if (Number.isFinite(left)) style.left = `${left}px`;
} else if (pinned === 'right') {
const right = column?.getAfter?.('right');
if (Number.isFinite(right)) style.right = `${right}px`;
}
return style;
};
const handlePageSizeChange = (size) => {
if (props.onPageSizeChange) {
props.onPageSizeChange(size);

210
src/lib/table/useVrcxVueTable.js Normal file
View File

@@ -0,0 +1,210 @@
import {
getCoreRowModel,
getExpandedRowModel,
getFilteredRowModel,
getPaginationRowModel,
getSortedRowModel,
isFunction,
useVueTable
} from '@tanstack/vue-table';
import { ref, unref } from 'vue';
function getColumnId(col) {
return col?.id ?? col?.accessorKey ?? null;
}
function findStretchColumnId(columns) {
if (!Array.isArray(columns)) {
return null;
}
for (const col of columns) {
if (col?.meta?.['stretch']) {
return getColumnId(col);
}
}
return null;
}
function setRef(updaterOrValue, targetRef) {
targetRef.value = isFunction(updaterOrValue)
? updaterOrValue(targetRef.value)
: updaterOrValue;
}
function resolveMaybeGetter(func) {
return typeof func === 'function' ? func() : unref(func);
}
function withSpacerColumn(columns, enabled, spacerId, stretchAfterId) {
if (!enabled) {
return columns;
}
if (!Array.isArray(columns)) {
return columns;
}
const id = spacerId ?? '__spacer';
if (columns.some((c) => getColumnId(c) === id)) {
return columns;
}
const spacerColumn = {
id,
header: () => null,
cell: () => null,
enableSorting: false,
enableResizing: false,
size: 0,
minSize: 0,
meta: { thClass: 'p-0', tdClass: 'p-0' }
};
if (stretchAfterId) {
const idx = columns.findIndex((c) => getColumnId(c) === stretchAfterId);
if (idx !== -1) {
return [
...columns.slice(0, idx + 1),
spacerColumn,
...columns.slice(idx + 1)
];
}
}
return [...columns, spacerColumn];
}
export function useVrcxVueTable(options) {
const {
getRowId,
getRowCanExpand,
enablePagination = true,
initialPagination,
enableSorting = true,
initialSorting,
enableFiltering = true,
enableExpanded = false,
initialExpanded,
enablePinning = false,
initialColumnPinning,
enableColumnResizing = true,
columnResizeMode = 'onChange',
initialColumnSizing,
fillRemainingSpace = true,
spacerColumnId = '__spacer',
tableOptions = {}
} = options ?? {};
const hasData = options && 'data' in options;
const hasColumns = options && 'columns' in options;
if (!hasData) console.warn('useVrcxVueTable: `data` is required');
if (!hasColumns) console.warn('useVrcxVueTable: `columns` is required');
const sorting = ref(initialSorting ?? []);
const expanded = ref(initialExpanded ?? {});
const pagination = ref(initialPagination ?? { pageIndex: 0, pageSize: 50 });
const columnPinning = ref(initialColumnPinning ?? { left: [], right: [] });
const columnSizing = ref(initialColumnSizing ?? {});
const state = {};
const handlers = {};
const rowModels = {};
const extra = {};
function register(enabled, key, r, onChangeKey, rowModelPart, extraPart) {
if (!enabled) {
return;
}
Object.defineProperty(state, key, {
enumerable: true,
get: () => r.value
});
if (onChangeKey) handlers[onChangeKey] = (val) => setRef(val, r);
if (rowModelPart) Object.assign(rowModels, rowModelPart);
if (extraPart) Object.assign(extra, extraPart);
}
register(enableSorting, 'sorting', sorting, 'onSortingChange', {
getSortedRowModel: getSortedRowModel()
});
register(enablePagination, 'pagination', pagination, 'onPaginationChange', {
getPaginationRowModel: getPaginationRowModel()
});
register(
enableExpanded,
'expanded',
expanded,
'onExpandedChange',
{ getExpandedRowModel: getExpandedRowModel() },
{ getRowCanExpand }
);
register(
enablePinning,
'columnPinning',
columnPinning,
'onColumnPinningChange'
);
register(
enableColumnResizing,
'columnSizing',
columnSizing,
'onColumnSizingChange',
null,
{ enableColumnResizing: true, columnResizeMode }
);
if (enableFiltering) {
Object.assign(rowModels, {
getFilteredRowModel: getFilteredRowModel()
});
}
const table = useVueTable({
get data() {
return resolveMaybeGetter(options.data);
},
get columns() {
const cols = resolveMaybeGetter(options.columns);
const stretchAfterId = findStretchColumnId(cols);
return withSpacerColumn(
cols,
fillRemainingSpace,
spacerColumnId,
stretchAfterId
);
},
getRowId,
getCoreRowModel: getCoreRowModel(),
...rowModels,
...handlers,
...extra,
state,
...tableOptions
});
return {
table,
sorting,
pagination,
expanded,
columnPinning,
columnSizing
};
}

5
src/stores/feed.js
View File

@@ -178,10 +178,7 @@ export const useFeedStore = defineStore('Feed', () => {
if (!feedSearch(feed)) {
return;
}
feedTable.value.data.push({
...feed,
uid: crypto.randomUUID()
});
feedTable.value.data.push(feed);
sweepFeed();
UiStore.notifyMenu('feed');
}

45
src/views/Feed/Feed.vue
View File

@@ -41,14 +41,6 @@
</template>
<script setup>
import {
getCoreRowModel,
getExpandedRowModel,
getFilteredRowModel,
getPaginationRowModel,
getSortedRowModel,
useVueTable
} from '@tanstack/vue-table';
import { computed, ref, watch } from 'vue';
import { storeToRefs } from 'pinia';
import { useI18n } from 'vue-i18n';
@@ -58,7 +50,7 @@
import { Switch } from '../../components/ui/switch';
import { columns as baseColumns } from './columns.jsx';
import { useDataTableScrollHeight } from '../../composables/useDataTableScrollHeight';
import { valueUpdater } from '../../components/ui/table/utils';
import { useVrcxVueTable } from '../../lib/table/useVrcxVueTable';
const { feedTable } = storeToRefs(useFeedStore());
const { feedTableLookup } = useFeedStore();
@@ -83,36 +75,17 @@
feedTable.value.pageSizeLinked ? appearanceSettingsStore.tablePageSize : feedTable.value.pageSize
);
const sorting = ref([]);
const expanded = ref({});
const pagination = ref({
pageIndex: 0,
pageSize: pageSize.value
});
const table = useVueTable({
const { table, pagination } = useVrcxVueTable({
data: feedDisplayData,
columns: baseColumns,
getRowId: (row) => `${row.type}:${row.rowId ?? row.uid}:${row.created_at ?? ''}`,
getRowId: (row) => `${row.type}:${row.rowId}:${row.created_at ?? ''}`,
enableExpanded: true,
getRowCanExpand: () => true,
getCoreRowModel: getCoreRowModel(),
getPaginationRowModel: getPaginationRowModel(),
getSortedRowModel: getSortedRowModel(),
getFilteredRowModel: getFilteredRowModel(),
getExpandedRowModel: getExpandedRowModel(),
onSortingChange: (updaterOrValue) => valueUpdater(updaterOrValue, sorting),
onPaginationChange: (updaterOrValue) => valueUpdater(updaterOrValue, pagination),
onExpandedChange: (updaterOrValue) => valueUpdater(updaterOrValue, expanded),
state: {
get sorting() {
return sorting.value;
},
get pagination() {
return pagination.value;
},
get expanded() {
return expanded.value;
}
initialSorting: [],
initialExpanded: {},
initialPagination: {
pageIndex: 0,
pageSize: pageSize.value
}
});

19
src/views/Feed/columns.jsx
View File

@@ -199,8 +199,10 @@ export const columns = [
id: 'expander',
header: () => null,
enableSorting: false,
size: 20,
minSize: 0,
maxSize: 20,
meta: {
class: 'w-[20px]',
expandedRow
},
cell: ({ row }) => {
@@ -223,9 +225,7 @@ export const columns = [
},
{
accessorKey: 'created_at',
meta: {
class: 'w-[140px]'
},
size: 140,
header: ({ column }) => (
<Button
variant="ghost"
@@ -258,9 +258,7 @@ export const columns = [
},
{
accessorKey: 'type',
meta: {
class: 'w-[130px]'
},
size: 130,
header: () => t('table.feed.type'),
cell: ({ row }) => {
const type = row.getValue('type');
@@ -275,9 +273,7 @@ export const columns = [
},
{
accessorKey: 'displayName',
meta: {
class: 'w-[190px]'
},
size: 190,
header: () => t('table.feed.user'),
cell: ({ row }) => {
const { showUserDialog } = useUserStore();
@@ -296,8 +292,9 @@ export const columns = [
id: 'detail',
header: () => t('table.feed.detail'),
enableSorting: false,
minSize: 100,
meta: {
class: 'min-w-[240px] overflow-hidden'
stretch: true
},
cell: ({ row }) => {
const original = row.original;

34
src/views/FriendLog/FriendLog.vue
View File

@@ -39,13 +39,6 @@
</template>
<script setup>
import {
getCoreRowModel,
getFilteredRowModel,
getPaginationRowModel,
getSortedRowModel,
useVueTable
} from '@tanstack/vue-table';
import { computed, ref, watch } from 'vue';
import { ElMessageBox } from 'element-plus';
import { storeToRefs } from 'pinia';
@@ -59,7 +52,7 @@
import { database } from '../../service/database';
import { removeFromArray } from '../../shared/utils';
import { useDataTableScrollHeight } from '../../composables/useDataTableScrollHeight';
import { valueUpdater } from '../../components/ui/table/utils';
import { useVrcxVueTable } from '../../lib/table/useVrcxVueTable';
import configRepository from '../../service/config';
@@ -163,29 +156,14 @@
friendLogTable.value.pageSizeLinked ? appearanceSettingsStore.tablePageSize : friendLogTable.value.pageSize
);
const sorting = ref([]);
const pagination = ref({
pageIndex: 0,
pageSize: pageSize.value
});
const table = useVueTable({
const { table, pagination } = useVrcxVueTable({
data: friendLogDisplayData,
columns,
getRowId: (row) => `${row.type}:${row.rowId ?? row.userId ?? row.created_at ?? ''}`,
getCoreRowModel: getCoreRowModel(),
getPaginationRowModel: getPaginationRowModel(),
getSortedRowModel: getSortedRowModel(),
getFilteredRowModel: getFilteredRowModel(),
onSortingChange: (updaterOrValue) => valueUpdater(updaterOrValue, sorting),
onPaginationChange: (updaterOrValue) => valueUpdater(updaterOrValue, pagination),
state: {
get sorting() {
return sorting.value;
},
get pagination() {
return pagination.value;
}
initialSorting: [],
initialPagination: {
pageIndex: 0,
pageSize: pageSize.value
}
});

31
src/views/FriendLog/columns.jsx
View File

@@ -24,16 +24,14 @@ export const createColumns = ({ onDelete, onDeletePrompt }) => {
id: 'spacer',
header: () => null,
enableSorting: false,
meta: {
class: 'w-[20px]'
},
size: 20,
minSize: 0,
maxSize: 20,
cell: () => null
},
{
accessorKey: 'created_at',
meta: {
class: 'w-[90px]'
},
size: 90,
header: ({ column }) => (
<Button
variant="ghost"
@@ -66,9 +64,8 @@ export const createColumns = ({ onDelete, onDeletePrompt }) => {
},
{
accessorKey: 'type',
meta: {
class: 'w-[110px]'
},
size: 110,
header: () => t('table.friendLog.type'),
cell: ({ row }) => {
const type = row.getValue('type');
@@ -81,10 +78,12 @@ export const createColumns = ({ onDelete, onDeletePrompt }) => {
},
{
accessorKey: 'displayName',
meta: {
class: 'w-[260px]'
},
size: 260,
minSize: 80,
header: () => t('table.friendLog.user'),
meta: {
stretch: true
},
cell: ({ row }) => {
const original = row.original;
const displayName =
@@ -119,6 +118,9 @@ export const createColumns = ({ onDelete, onDeletePrompt }) => {
meta: {
class: 'w-[80px] max-w-[80px] text-right'
},
enableResizing: false,
size: 80,
maxSize: 80,
header: () => t('table.friendLog.action'),
enableSorting: false,
cell: ({ row }) => {
@@ -150,9 +152,8 @@ export const createColumns = ({ onDelete, onDeletePrompt }) => {
id: 'trailing',
header: () => null,
enableSorting: false,
meta: {
class: 'w-[5px]'
},
enableResizing: false,
size: 5,
cell: () => null
}
];

57
src/views/GameLog/GameLog.vue
View File

@@ -50,13 +50,6 @@
</template>
<script setup>
import {
getCoreRowModel,
getFilteredRowModel,
getPaginationRowModel,
getSortedRowModel,
useVueTable
} from '@tanstack/vue-table';
import { computed, ref, watch } from 'vue';
import { ElMessageBox } from 'element-plus';
import { storeToRefs } from 'pinia';
@@ -64,18 +57,16 @@
import dayjs from 'dayjs';
import { useAppearanceSettingsStore, useGameLogStore, useSharedFeedStore, useVrcxStore } from '../../stores';
import { useAppearanceSettingsStore, useGameLogStore, useVrcxStore } from '../../stores';
import { DataTableLayout } from '../../components/ui/data-table';
import { Switch } from '../../components/ui/switch';
import { createColumns } from './columns.jsx';
import { database } from '../../service/database';
import { removeFromArray } from '../../shared/utils';
import { useDataTableScrollHeight } from '../../composables/useDataTableScrollHeight';
import { valueUpdater } from '../../components/ui/table/utils';
import { useVrcxVueTable } from '../../lib/table/useVrcxVueTable';
const { gameLogTableLookup } = useGameLogStore();
const { gameLogTable } = storeToRefs(useGameLogStore());
const { updateSharedFeed } = useSharedFeedStore();
const appearanceSettingsStore = useAppearanceSettingsStore();
const vrcxStore = useVrcxStore();
@@ -126,7 +117,6 @@
});
const { t } = useI18n();
const emit = defineEmits(['updateGameLogSessionTable']);
const gameLogRef = ref(null);
const { tableStyle: tableHeightStyle } = useDataTableScrollHeight(gameLogRef, {
@@ -135,16 +125,6 @@
paginationHeight: 52
});
function deleteGameLogEntry(row) {
removeFromArray(gameLogTable.value.data, row);
database.deleteGameLogEntry(row);
console.log('deleteGameLogEntry', row);
database.getGamelogDatabase().then((data) => {
emit('updateGameLogSessionTable', data);
updateSharedFeed(true);
});
}
function deleteGameLogEntryPrompt(row) {
ElMessageBox.confirm('Continue? Delete Log', 'Confirm', {
confirmButtonText: 'Confirm',
@@ -159,6 +139,11 @@
.catch(() => {});
}
function deleteGameLogEntry(row) {
removeFromArray(gameLogTable.value.data, row);
database.deleteGameLogEntry(row);
}
const columns = createColumns({
getCreatedAt: getGameLogCreatedAt,
onDelete: deleteGameLogEntry,
@@ -170,30 +155,14 @@
gameLogTable.value.pageSizeLinked ? appearanceSettingsStore.tablePageSize : gameLogTable.value.pageSize
);
const sorting = ref([]);
const pagination = ref({
pageIndex: 0,
pageSize: pageSize.value
});
const table = useVueTable({
const { table, pagination } = useVrcxVueTable({
data: gameLogDisplayData,
columns,
getRowId: (row) =>
`${row.type}:${row.rowId ?? row.uid ?? row.displayName + row.location + row.time}:${getGameLogCreatedAt(row)}`,
getCoreRowModel: getCoreRowModel(),
getPaginationRowModel: getPaginationRowModel(),
getSortedRowModel: getSortedRowModel(),
getFilteredRowModel: getFilteredRowModel(),
onSortingChange: (updaterOrValue) => valueUpdater(updaterOrValue, sorting),
onPaginationChange: (updaterOrValue) => valueUpdater(updaterOrValue, pagination),
state: {
get sorting() {
return sorting.value;
},
get pagination() {
return pagination.value;
}
getRowId: (row) => `${row.type}:${row.rowId ?? row.displayName + row.location + row.time}`,
initialSorting: [],
initialPagination: {
pageIndex: 0,
pageSize: pageSize.value
}
});

29
src/views/GameLog/columns.jsx
View File

@@ -13,7 +13,6 @@ import { storeToRefs } from 'pinia';
import { formatDateFilter, openExternalLink } from '../../shared/utils';
import { i18n } from '../../plugin';
import {
useGameLogStore,
useInstanceStore,
useUiStore,
useUserStore,
@@ -33,7 +32,6 @@ export const createColumns = ({ getCreatedAt, onDelete, onDeletePrompt }) => {
const { showWorldDialog } = useWorldStore();
const { lookupUser } = useUserStore();
const { showPreviousInstancesInfoDialog } = useInstanceStore();
const { gameLogIsFriend, gameLogIsFavorite } = useGameLogStore();
const { shiftHeld } = storeToRefs(useUiStore());
return [
@@ -41,17 +39,15 @@ export const createColumns = ({ getCreatedAt, onDelete, onDeletePrompt }) => {
id: 'spacer',
header: () => null,
enableSorting: false,
meta: {
class: 'w-[20px]'
},
size: 20,
minSize: 0,
maxSize: 20,
cell: () => null
},
{
accessorFn: (row) => getCreatedAt(row),
id: 'created_at',
meta: {
class: 'w-[140px]'
},
size: 140,
header: ({ column }) => (
<Button
variant="ghost"
@@ -84,9 +80,7 @@ export const createColumns = ({ getCreatedAt, onDelete, onDeletePrompt }) => {
},
{
accessorKey: 'type',
meta: {
class: 'w-[150px]'
},
size: 150,
header: () => t('table.gameLog.type'),
cell: ({ row }) => {
const original = row.original;
@@ -110,9 +104,7 @@ export const createColumns = ({ getCreatedAt, onDelete, onDeletePrompt }) => {
},
{
accessorKey: 'displayName',
meta: {
class: 'w-[200px]'
},
size: 200,
header: () => t('table.gameLog.user'),
cell: ({ row }) => {
const original = row.original;
@@ -139,8 +131,9 @@ export const createColumns = ({ getCreatedAt, onDelete, onDeletePrompt }) => {
id: 'detail',
header: () => t('table.gameLog.detail'),
enableSorting: false,
minSize: 150,
meta: {
class: 'min-w-[240px] overflow-hidden'
stretch: true
},
cell: ({ row }) => {
const original = row.original;
@@ -246,8 +239,12 @@ export const createColumns = ({ getCreatedAt, onDelete, onDeletePrompt }) => {
{
id: 'action',
meta: {
class: 'w-[90px] max-w-[90px] text-right'
class: 'text-right'
},
enableResizing: false,
size: 90,
minSize: 90,
maxSize: 90,
header: () => t('table.gameLog.action'),
enableSorting: false,
cell: ({ row }) => {

34
src/views/Moderation/Moderation.vue
View File

@@ -39,13 +39,6 @@
</template>
<script setup>
import {
getCoreRowModel,
getFilteredRowModel,
getPaginationRowModel,
getSortedRowModel,
useVueTable
} from '@tanstack/vue-table';
import { computed, ref, watch } from 'vue';
import { ElMessageBox } from 'element-plus';
import { Refresh } from '@element-plus/icons-vue';
@@ -58,7 +51,7 @@
import { moderationTypes } from '../../shared/constants';
import { playerModerationRequest } from '../../api';
import { useDataTableScrollHeight } from '../../composables/useDataTableScrollHeight';
import { valueUpdater } from '../../components/ui/table/utils';
import { useVrcxVueTable } from '../../lib/table/useVrcxVueTable';
import configRepository from '../../service/config.js';
@@ -151,29 +144,14 @@
: playerModerationTable.value.pageSize
);
const sorting = ref([{ id: 'created', desc: true }]);
const pagination = ref({
pageIndex: 0,
pageSize: pageSize.value
});
const table = useVueTable({
const { table, pagination } = useVrcxVueTable({
data: moderationDisplayData,
columns,
getRowId: (row) => row.id ?? `${row.type}:${row.sourceUserId}:${row.targetUserId}:${row.created ?? ''}`,
getCoreRowModel: getCoreRowModel(),
getPaginationRowModel: getPaginationRowModel(),
getSortedRowModel: getSortedRowModel(),
getFilteredRowModel: getFilteredRowModel(),
onSortingChange: (updaterOrValue) => valueUpdater(updaterOrValue, sorting),
onPaginationChange: (updaterOrValue) => valueUpdater(updaterOrValue, pagination),
state: {
get sorting() {
return sorting.value;
},
get pagination() {
return pagination.value;
}
initialSorting: [{ id: 'created', desc: true }],
initialPagination: {
pageIndex: 0,
pageSize: pageSize.value
}
});

34
src/views/Moderation/columns.jsx
View File

@@ -25,16 +25,14 @@ export const createColumns = ({ onDelete, onDeletePrompt }) => {
id: 'spacer',
header: () => null,
enableSorting: false,
meta: {
class: 'w-[20px]'
},
size: 20,
minSize: 0,
maxSize: 20,
cell: () => null
},
{
accessorKey: 'created',
meta: {
class: 'w-[90px]'
},
size: 90,
header: ({ column }) => (
<Button
variant="ghost"
@@ -67,9 +65,7 @@ export const createColumns = ({ onDelete, onDeletePrompt }) => {
},
{
accessorKey: 'type',
meta: {
class: 'w-[80px]'
},
size: 90,
header: () => t('table.moderation.type'),
cell: ({ row }) => {
const type = row.getValue('type');
@@ -83,8 +79,9 @@ export const createColumns = ({ onDelete, onDeletePrompt }) => {
{
accessorKey: 'sourceDisplayName',
meta: {
class: 'w-[120px] min-w-0 overflow-hidden'
class: 'overflow-hidden'
},
size: 120,
header: () => t('table.moderation.source'),
cell: ({ row }) => {
const original = row.original;
@@ -100,8 +97,10 @@ export const createColumns = ({ onDelete, onDeletePrompt }) => {
},
{
accessorKey: 'targetDisplayName',
size: 200,
minSize: 80,
meta: {
class: 'w-[200px]'
stretch: true
},
header: () => t('table.moderation.target'),
cell: ({ row }) => {
@@ -119,10 +118,14 @@ export const createColumns = ({ onDelete, onDeletePrompt }) => {
{
id: 'action',
meta: {
class: 'w-[80px] max-w-[80px] text-right'
class: 'text-right'
},
header: () => t('table.moderation.action'),
size: 80,
minSize: 80,
maxSize: 80,
enableSorting: false,
enableResizing: false,
header: () => t('table.moderation.action'),
cell: ({ row }) => {
const original = row.original;
if (original.sourceUserId !== currentUser.value?.id) {
@@ -156,9 +159,8 @@ export const createColumns = ({ onDelete, onDeletePrompt }) => {
id: 'trailing',
header: () => null,
enableSorting: false,
meta: {
class: 'w-[5px]'
},
enableResizing: false,
size: 5,
cell: () => null
}
];

34
src/views/Notifications/Notification.vue
View File

@@ -70,13 +70,6 @@
</template>
<script setup>
import {
getCoreRowModel,
getFilteredRowModel,
getPaginationRowModel,
getSortedRowModel,
useVueTable
} from '@tanstack/vue-table';
import { computed, ref, watch } from 'vue';
import { ElMessageBox } from 'element-plus';
import { Refresh } from '@element-plus/icons-vue';
@@ -103,7 +96,7 @@
import { createColumns } from './columns.jsx';
import { database } from '../../service/database';
import { useDataTableScrollHeight } from '../../composables/useDataTableScrollHeight';
import { valueUpdater } from '../../components/ui/table/utils';
import { useVrcxVueTable } from '../../lib/table/useVrcxVueTable';
import SendInviteRequestResponseDialog from './dialogs/SendInviteRequestResponseDialog.vue';
import SendInviteResponseDialog from './dialogs/SendInviteResponseDialog.vue';
@@ -219,29 +212,14 @@
: notificationTable.value.pageSize
);
const sorting = ref([{ id: 'created_at', desc: true }]);
const pagination = ref({
pageIndex: 0,
pageSize: pageSize.value
});
const table = useVueTable({
const { table, pagination } = useVrcxVueTable({
data: notificationDisplayData,
columns,
getRowId: (row) => row.id ?? `${row.type}:${row.senderUserId ?? ''}:${row.created_at ?? ''}`,
getCoreRowModel: getCoreRowModel(),
getPaginationRowModel: getPaginationRowModel(),
getSortedRowModel: getSortedRowModel(),
getFilteredRowModel: getFilteredRowModel(),
onSortingChange: (updaterOrValue) => valueUpdater(updaterOrValue, sorting),
onPaginationChange: (updaterOrValue) => valueUpdater(updaterOrValue, pagination),
state: {
get sorting() {
return sorting.value;
},
get pagination() {
return pagination.value;
}
initialSorting: [{ id: 'created_at', desc: true }],
initialPagination: {
pageIndex: 0,
pageSize: pageSize.value
}
});

34
src/views/Notifications/columns.jsx
View File

@@ -84,9 +84,7 @@ export const createColumns = ({
{
accessorFn: (row) => getNotificationCreatedAtTs(row),
id: 'created_at',
meta: {
class: 'w-[120px]'
},
size: 120,
header: ({ column }) => (
<Button
variant="ghost"
@@ -136,9 +134,7 @@ export const createColumns = ({
},
{
accessorKey: 'type',
meta: {
class: 'w-[180px]'
},
size: 180,
header: () => t('table.notification.type'),
cell: ({ row }) => {
const original = row.original;
@@ -224,8 +220,9 @@ export const createColumns = ({
{
accessorKey: 'senderUsername',
meta: {
class: 'w-[150px] min-w-0 overflow-hidden'
class: 'overflow-hidden'
},
size: 150,
header: () => t('table.notification.user'),
cell: ({ row }) => {
const original = row.original;
@@ -279,8 +276,9 @@ export const createColumns = ({
{
accessorKey: 'groupName',
meta: {
class: 'w-[150px] min-w-0 overflow-hidden'
class: 'overflow-hidden'
},
size: 150,
header: () => t('table.notification.group'),
cell: ({ row }) => {
const original = row.original;
@@ -382,9 +380,8 @@ export const createColumns = ({
},
{
accessorKey: 'photo',
meta: {
class: 'w-[80px]'
},
enableResizing: false,
size: 80,
header: () => t('table.notification.photo'),
cell: ({ row }) => {
const original = row.original;
@@ -441,8 +438,10 @@ export const createColumns = ({
header: () => t('table.notification.message'),
enableSorting: false,
meta: {
class: 'min-w-0 overflow-hidden'
class: 'min-w-0 overflow-hidden',
stretch: true
},
minSize: 100,
cell: ({ row }) => {
const original = row.original;
return (
@@ -489,8 +488,12 @@ export const createColumns = ({
{
id: 'action',
meta: {
class: 'w-[120px] max-w-[120px] text-right'
class: 'text-right'
},
size: 120,
minSize: 120,
maxSize: 120,
enableResizing: false,
header: () => t('table.notification.action'),
enableSorting: false,
cell: ({ row }) => {
@@ -781,9 +784,8 @@ export const createColumns = ({
id: 'trailing',
header: () => null,
enableSorting: false,
meta: {
class: 'w-[5px]'
},
enableResizing: false,
size: 5,
cell: () => null
}
];

42
src/views/PlayerList/PlayerList.vue
View File

@@ -168,8 +168,7 @@
</template>
<script setup>
import { computed, defineAsyncComponent, onActivated, onMounted, ref, watch } from 'vue';
import { getCoreRowModel, getPaginationRowModel, getSortedRowModel, useVueTable } from '@tanstack/vue-table';
import { computed, defineAsyncComponent, ref, watch } from 'vue';
import { HomeFilled } from '@element-plus/icons-vue';
import { storeToRefs } from 'pinia';
import { useI18n } from 'vue-i18n';
@@ -188,7 +187,7 @@
import { DataTableLayout } from '../../components/ui/data-table';
import { createColumns } from './columns.jsx';
import { useDataTableScrollHeight } from '../../composables/useDataTableScrollHeight';
import { valueUpdater } from '../../components/ui/table/utils';
import { useVrcxVueTable } from '../../lib/table/useVrcxVueTable';
import { watchState } from '../../service/watchState';
import ChatboxBlacklistDialog from './dialogs/ChatboxBlacklistDialog.vue';
@@ -261,16 +260,10 @@
return a[field].toLowerCase().localeCompare(b[field].toLowerCase());
}
const sorting = ref([]);
const pagination = ref({
pageIndex: 0,
pageSize: 500
});
const columnPinning = ref({
const initialColumnPinning = {
left: ['avatar', 'timer', 'displayName'],
right: []
});
};
const playerListColumns = computed(() =>
createColumns({
@@ -285,30 +278,15 @@
const playerListDisplayData = computed(() => currentInstanceUsersData.value ?? []);
const playerListTable = useVueTable({
const { table: playerListTable } = useVrcxVueTable({
data: playerListDisplayData,
columns: playerListColumns.value,
getRowId: (row) => `${row?.ref?.id ?? ''}:${row?.displayName ?? ''}:${row?.photonId ?? ''}`,
getCoreRowModel: getCoreRowModel(),
getPaginationRowModel: getPaginationRowModel(),
getSortedRowModel: getSortedRowModel(),
onSortingChange: (updaterOrValue) => valueUpdater(updaterOrValue, sorting),
onPaginationChange: (updaterOrValue) => valueUpdater(updaterOrValue, pagination),
onColumnPinningChange: (updaterOrValue) => valueUpdater(updaterOrValue, columnPinning),
state: {
get sorting() {
return sorting.value;
},
get pagination() {
return pagination.value;
},
get columnPinning() {
return columnPinning.value;
}
},
initialState: {
columnPinning: columnPinning.value,
pagination: pagination.value
enablePinning: true,
initialColumnPinning,
initialPagination: {
pageIndex: 0,
pageSize: 500
}
});

38
src/views/PlayerList/columns.jsx
View File

@@ -66,9 +66,7 @@ export const createColumns = ({
header: () => t('table.playerList.avatar'),
size: 70,
enableSorting: false,
meta: {
class: 'w-[70px]'
},
enableResizing: false,
cell: ({ row }) => {
const userRef = row.original?.ref;
const src = userImage(userRef);
@@ -90,9 +88,7 @@ export const createColumns = ({
header: ({ column }) =>
sortButton({ column, label: t('table.playerList.timer') }),
size: 90,
meta: {
class: 'w-[90px]'
},
enableResizing: false,
sortingFn: (rowA, rowB) =>
(rowA.original?.timer ?? 0) - (rowB.original?.timer ?? 0),
cell: ({ row }) => <Timer epoch={row.original?.timer} />
@@ -106,9 +102,6 @@ export const createColumns = ({
label: t('table.playerList.displayName')
}),
size: 200,
meta: {
class: 'w-[200px]'
},
sortingFn: (rowA, rowB) =>
sortAlphabetically(rowA.original, rowB.original, 'displayName'),
cell: ({ row }) => {
@@ -132,9 +125,6 @@ export const createColumns = ({
header: ({ column }) =>
sortButton({ column, label: t('table.playerList.rank') }),
size: 110,
meta: {
class: 'w-[110px]'
},
sortingFn: (rowA, rowB) =>
(rowA.original?.ref?.$trustSortNum ?? 0) -
(rowB.original?.ref?.$trustSortNum ?? 0),
@@ -157,9 +147,6 @@ export const createColumns = ({
header: () => t('table.playerList.status'),
minSize: 200,
enableSorting: false,
meta: {
class: 'w-[200px]'
},
cell: ({ row }) => {
const userRef = row.original?.ref;
const status = userRef?.status;
@@ -188,9 +175,6 @@ export const createColumns = ({
header: ({ column }) =>
sortButton({ column, label: t('table.playerList.photonId') }),
size: 110,
meta: {
class: 'w-[110px]'
},
sortingFn: (rowA, rowB) =>
(rowA.original?.photonId ?? 0) - (rowB.original?.photonId ?? 0),
cell: ({ row }) => {
@@ -239,7 +223,7 @@ export const createColumns = ({
size: 90,
accessorFn: (row) => getInstanceIconWeight(row),
meta: {
class: 'w-[90px] text-center'
class: 'text-center'
},
sortingFn: (rowA, rowB, columnId) => {
const a = rowA.original;
@@ -312,9 +296,6 @@ export const createColumns = ({
header: () => t('table.playerList.platform'),
size: 90,
enableSorting: false,
meta: {
class: 'w-[90px]'
},
cell: ({ row }) => {
const userRef = row.original?.ref;
const platform = userRef?.$platform;
@@ -354,9 +335,6 @@ export const createColumns = ({
header: () => t('table.playerList.language'),
size: 100,
enableSorting: false,
meta: {
class: 'w-[100px]'
},
cell: ({ row }) => {
const userRef = row.original?.ref;
const langs = userRef?.$languages ?? [];
@@ -393,9 +371,6 @@ export const createColumns = ({
header: () => t('table.playerList.bioLink'),
size: 100,
enableSorting: false,
meta: {
class: 'w-[100px]'
},
cell: ({ row }) => {
const links =
row.original?.ref?.bioLinks?.filter(Boolean) ?? [];
@@ -429,11 +404,12 @@ export const createColumns = ({
id: 'note',
accessorFn: (row) => row?.ref?.note,
header: () => t('table.playerList.note'),
size: 400,
enableSorting: false,
size: 150,
minSize: 40,
meta: {
class: 'w-[150px]'
stretch: true
},
enableSorting: false,
cell: ({ row }) => {
const note = row.original?.ref?.note;
const text =