rewrite previous instances tables

src/components/dialogs/PreviousInstancesDialog/PreviousInstancesGroupDialog.vue

@@ -5,104 +5,63 @@
         :title="t('dialog.previous_instances.header')"
         width="1000px"
         append-to-body>
+        <DataTableLayout
+            class="min-w-0 w-full"
+            :table="table"
+            :loading="loading"
+            :table-style="tableStyle"
+            :page-sizes="pageSizes"
+            :total-items="totalItems"
+            :on-page-size-change="handlePageSizeChange">
+            <template #toolbar>
                 <div style="display: flex; align-items: center; justify-content: space-between">
                     <span style="font-size: 14px" v-text="previousInstancesGroupDialog.groupRef.name"></span>
                     <InputGroupField
-                v-model="previousInstancesGroupDialogTable.filters[0].value"
+                        class="w-1/3"
+                        v-model="search"
                         :placeholder="t('dialog.previous_instances.search_placeholder')"
-                style="width: 150px" />
+                        clearable />
                 </div>
-
-        <DataTable :loading="loading" v-bind="previousInstancesGroupDialogTable" style="margin-top: 10px">
-            <el-table-column :label="t('table.previous_instances.date')" prop="created_at" sortable width="170">
-                <template #default="scope">
-                    <span>{{ formatDateFilter(scope.row.created_at, 'long') }}</span>
             </template>
-            </el-table-column>
+        </DataTableLayout>
-
-            <el-table-column :label="t('table.previous_instances.instance_name')" prop="name">
-                <template #default="scope">
-                    <Location
-                        :location="scope.row.$location.tag"
-                        :grouphint="scope.row.groupName"
-                        :hint="scope.row.worldName" />
-                </template>
-            </el-table-column>
-
-            <el-table-column :label="t('table.previous_instances.time')" prop="time" width="100" sortable>
-                <template #default="scope">
-                    <span v-text="scope.row.timer"></span>
-                </template>
-            </el-table-column>
-
-            <el-table-column :label="t('table.previous_instances.action')" width="120" align="right">
-                <template #default="scope">
-                    <Button
-                        size="icon-sm"
-                        class="w-6 h-6 text-xs"
-                        variant="ghost"
-                        @click="showPreviousInstancesInfoDialog(scope.row.location)"
-                        ><i class="ri-information-line"></i
-                    ></Button>
-                    <Button
-                        size="icon-sm"
-                        variant="ghost"
-                        class="w-6 h-6 text-xs"
-                        v-if="shiftHeld"
-                        style="color: #f56c6c"
-                        @click="deleteGameLogGroupInstance(scope.row)"
-                        ><i class="ri-delete-bin-line"></i
-                    ></Button>
-                    <Button
-                        size="icon-sm"
-                        variant="ghost"
-                        class="w-6 h-6 text-xs"
-                        v-else
-                        @click="deleteGameLogGroupInstancePrompt(scope.row)"
-                        ><i class="ri-delete-bin-line"></i
-                    ></Button>
-                </template>
-            </el-table-column>
-        </DataTable>
     </el-dialog>
 </template>
 
 <script setup>
-    import { computed, nextTick, reactive, ref, watch } from 'vue';
+    import { computed, nextTick, ref, watch } from 'vue';
-    import { Button } from '@/components/ui/button';
     import { ElMessageBox } from 'element-plus';
     import { InputGroupField } from '@/components/ui/input-group';
+    import { storeToRefs } from 'pinia';
     import { useI18n } from 'vue-i18n';
 
     import {
         compareByCreatedAt,
-        formatDateFilter,
+        localeIncludes,
         parseLocation,
         removeFromArray,
         timeToText
     } from '../../../shared/utils';
-    import { useInstanceStore, useUiStore } from '../../../stores';
+    import { useInstanceStore, useSearchStore, useUiStore, useVrcxStore } from '../../../stores';
+    import { DataTableLayout } from '../../ui/data-table';
+    import { createColumns } from './previousInstancesGroupColumns.jsx';
     import { database } from '../../../service/database';
     import { getNextDialogIndex } from '../../../shared/utils/base/ui';
+    import { useVrcxVueTable } from '../../../lib/table/useVrcxVueTable';
 
     const { showPreviousInstancesInfoDialog } = useInstanceStore();
     const { shiftHeld } = useUiStore();
+    const { stringComparer } = storeToRefs(useSearchStore());
     const { t } = useI18n();
 
     const previousInstancesGroupDialogIndex = ref(2000);
     const loading = ref(false);
 
-    const previousInstancesGroupDialogTable = reactive({
+    const vrcxStore = useVrcxStore();
-        data: [],
+    const rawRows = ref([]);
-        filters: [{ prop: 'groupName', value: '' }],
+    const search = ref('');
-        tableProps: {
+    const pageSizes = [10, 25, 50, 100];
-            stripe: true,
+    const pageSize = ref(10);
-            size: 'small',
+    const tableStyle = { maxHeight: '400px' };
-            defaultSort: { prop: 'created_at', order: 'descending' }
-        },
-        pageSize: 10,
-        paginationProps: { layout: 'sizes,prev,pager,next,total' }
-    });
 
     const props = defineProps({
         previousInstancesGroupDialog: { type: Object, required: true }
@@ -119,6 +78,63 @@
         }
     });
 
+    const displayRows = computed(() => {
+        const q = String(search.value ?? '')
+            .trim()
+            .toLowerCase();
+        const rows = Array.isArray(rawRows.value) ? rawRows.value : [];
+        if (!q) return rows;
+        return rows.filter((row) => {
+            return (
+                localeIncludes(row?.worldName ?? '', q, stringComparer.value) ||
+                localeIncludes(row?.groupName ?? '', q, stringComparer.value) ||
+                localeIncludes(row?.location ?? '', q, stringComparer.value)
+            );
+        });
+    });
+
+    const columns = computed(() =>
+        createColumns({
+            shiftHeld,
+            onShowInfo: showPreviousInstancesInfoDialog,
+            onDelete: deleteGameLogGroupInstance,
+            onDeletePrompt: deleteGameLogGroupInstancePrompt
+        })
+    );
+
+    const { table } = useVrcxVueTable({
+        persistKey: 'previousInstancesGroupDialog',
+        data: displayRows,
+        columns: columns.value,
+        getRowId: (row) => `${row?.location ?? ''}:${row?.created_at ?? ''}`,
+        initialSorting: [{ id: 'created_at', desc: true }],
+        initialPagination: {
+            pageIndex: 0,
+            pageSize: pageSize.value
+        }
+    });
+
+    watch(
+        columns,
+        (next) => {
+            table.setOptions((prev) => ({
+                ...prev,
+                columns: /** @type {any} */ (next)
+            }));
+        },
+        { immediate: true }
+    );
+
+    const totalItems = computed(() => {
+        const length = table.getFilteredRowModel().rows.length;
+        const max = vrcxStore.maxTableSize;
+        return length > max && length < max + 51 ? max : length;
+    });
+
+    const handlePageSizeChange = (size) => {
+        pageSize.value = size;
+    };
+
     watch(
         () => props.previousInstancesGroupDialog.openFlg,
         () => {
@@ -142,14 +158,14 @@
                 array.push(ref);
             }
             array.sort(compareByCreatedAt);
-            previousInstancesGroupDialogTable.data = array;
+            rawRows.value = array;
             loading.value = false;
         });
     }
 
     function deleteGameLogGroupInstance(row) {
         database.deleteGameLogInstanceByInstanceId({ location: row.location });
-        removeFromArray(previousInstancesGroupDialogTable.data, row);
+        removeFromArray(rawRows.value, row);
     }
 
     function deleteGameLogGroupInstancePrompt(row) {

src/components/dialogs/PreviousInstancesDialog/PreviousInstancesInfoDialog.vue

@@ -7,67 +7,41 @@
         :fullscreen="fullscreen"
         destroy-on-close
         @close="closeDialog">
+        <DataTableLayout
+            class="min-w-0 w-full"
+            :table="table"
+            :loading="loading"
+            :table-style="tableStyle"
+            :page-sizes="pageSizes"
+            :total-items="totalItems"
+            :on-page-size-change="handlePageSizeChange">
+            <template #toolbar>
                 <div style="display: flex; align-items: center; justify-content: space-between">
                     <Location :location="location.tag" style="font-size: 14px" />
                     <InputGroupField
-                v-model="dataTable.filters[0].value"
+                        v-model="search"
                         :placeholder="t('dialog.previous_instances.search_placeholder')"
                         style="width: 150px"
                         clearable />
                 </div>
-        <DataTable :loading="loading" v-bind="dataTable" style="margin-top: 10px">
-            <el-table-column :label="t('table.previous_instances.date')" prop="created_at" sortable width="130">
-                <template #default="scope">
-                    <TooltipWrapper side="left">
-                        <template #content>
-                            <span>{{ formatDateFilter(scope.row.created_at, 'long') }}</span>
             </template>
-                        <span>{{ formatDateFilter(scope.row.created_at, 'short') }}</span>
+        </DataTableLayout>
-                    </TooltipWrapper>
-                </template>
-            </el-table-column>
-            <el-table-column :label="t('table.gameLog.icon')" prop="isFriend" width="70" align="center">
-                <template #default="scope">
-                    <template v-if="scope.row?.isFriend">
-                        <TooltipWrapper v-if="scope.row?.isFavorite" side="top" content="Favorite">
-                            <span>⭐</span>
-                        </TooltipWrapper>
-                        <TooltipWrapper v-else side="top" content="Friend">
-                            <span>💚</span>
-                        </TooltipWrapper>
-                    </template>
-                    <span v-else></span>
-                </template>
-            </el-table-column>
-            <el-table-column :label="t('table.previous_instances.display_name')" prop="displayName" sortable>
-                <template #default="scope">
-                    <span class="x-link" @click="lookupUser(scope.row)">{{ scope.row.displayName }}</span>
-                </template>
-            </el-table-column>
-            <el-table-column :label="t('table.previous_instances.time')" prop="time" width="100" sortable>
-                <template #default="scope">
-                    <span>{{ scope.row.timer }}</span>
-                </template>
-            </el-table-column>
-            <el-table-column :label="t('table.previous_instances.count')" prop="count" width="100" sortable>
-                <template #default="scope">
-                    <span>{{ scope.row.count }}</span>
-                </template>
-            </el-table-column>
-        </DataTable>
     </el-dialog>
 </template>
 
 <script setup>
-    import { nextTick, ref, watch } from 'vue';
+    import { computed, nextTick, ref, watch } from 'vue';
     import { storeToRefs } from 'pinia';
     import { useI18n } from 'vue-i18n';
 
-    import { compareByCreatedAt, formatDateFilter, parseLocation, timeToText } from '../../../shared/utils';
+    import { useGameLogStore, useInstanceStore, useSearchStore, useUserStore, useVrcxStore } from '../../../stores';
+    import { compareByCreatedAt, localeIncludes, parseLocation, timeToText } from '../../../shared/utils';
+    import { DataTableLayout } from '../../ui/data-table';
     import { InputGroupField } from '../../../components/ui/input-group';
-    import { useGameLogStore, useInstanceStore, useUserStore } from '../../../stores';
+    import { createColumns } from './previousInstancesInfoColumns.jsx';
     import { database } from '../../../service/database';
     import { getNextDialogIndex } from '../../../shared/utils/base/ui';
+    import { useVrcxVueTable } from '../../../lib/table/useVrcxVueTable';
 
     const { lookupUser } = useUserStore();
     const { previousInstancesInfoDialogVisible, previousInstancesInfoDialogInstanceId } =
@@ -78,6 +52,12 @@
     const previousInstancesInfoDialogIndex = ref(2000);
 
     const loading = ref(false);
+    const rawRows = ref([]);
+    const search = ref('');
+    const pageSizes = [10, 25, 50, 100];
+    const pageSize = ref(10);
+    const tableStyle = { maxHeight: '400px' };
+
     const location = ref({
         tag: '',
         isOffline: false,
@@ -101,28 +81,58 @@
         strict: false,
         ageGate: false
     });
-    const dataTable = ref({
+    const fullscreen = ref(false);
-        data: [],
+
-        filters: [
+    const { stringComparer } = storeToRefs(useSearchStore());
-            {
+    const vrcxStore = useVrcxStore();
-                prop: 'displayName',
+
-                value: ''
+    const displayRows = computed(() => {
-            }
+        const q = String(search.value ?? '')
-        ],
+            .trim()
-        tableProps: {
+            .toLowerCase();
-            stripe: true,
+        const rows = Array.isArray(rawRows.value) ? rawRows.value : [];
-            size: 'small',
+        if (!q) return rows;
-            defaultSort: {
+        return rows.filter((row) => localeIncludes(row?.displayName ?? '', q, stringComparer.value));
-                prop: 'created_at',
+    });
-                order: 'descending'
+
-            }
+    const columns = computed(() =>
-        },
+        createColumns({
-        pageSize: 10,
+            onLookupUser: lookupUser
-        paginationProps: {
+        })
-            layout: 'sizes,prev,pager,next,total'
+    );
+
+    const { table } = useVrcxVueTable({
+        persistKey: 'previousInstancesInfoDialog',
+        data: displayRows,
+        columns: columns.value,
+        getRowId: (row) => row?.id ?? row?.userId ?? row?.displayName ?? JSON.stringify(row ?? {}),
+        initialSorting: [{ id: 'created_at', desc: true }],
+        initialPagination: {
+            pageIndex: 0,
+            pageSize: pageSize.value
         }
     });
-    const fullscreen = ref(false);
+
+    watch(
+        columns,
+        (next) => {
+            table.setOptions((prev) => ({
+                ...prev,
+                columns: next
+            }));
+        },
+        { immediate: true }
+    );
+
+    const totalItems = computed(() => {
+        const length = table.getFilteredRowModel().rows.length;
+        const max = vrcxStore.maxTableSize;
+        return length > max && length < max + 51 ? max : length;
+    });
+
+    const handlePageSizeChange = (size) => {
+        pageSize.value = size;
+    };
 
     watch(
         () => previousInstancesInfoDialogVisible.value,
@@ -152,7 +162,7 @@
                 array.push(entry);
             }
             array.sort(compareByCreatedAt);
-            dataTable.value.data = array;
+            rawRows.value = array;
             loading.value = false;
         });
     }

src/components/dialogs/PreviousInstancesDialog/PreviousInstancesWorldDialog.vue

@@ -5,75 +5,31 @@
         :title="t('dialog.previous_instances.header')"
         width="1000px"
         append-to-body>
+        <DataTableLayout
+            class="min-w-0 w-full"
+            :table="table"
+            :loading="loading"
+            :table-style="tableStyle"
+            :page-sizes="pageSizes"
+            :total-items="totalItems"
+            :on-page-size-change="handlePageSizeChange">
+            <template #toolbar>
                 <div style="display: flex; align-items: center; justify-content: space-between">
                     <span style="font-size: 14px" v-text="previousInstancesWorldDialog.worldRef.name"></span>
                     <InputGroupField
-                v-model="previousInstancesWorldDialogTable.filters[0].value"
+                        v-model="search"
                         :placeholder="t('dialog.previous_instances.search_placeholder')"
-                style="display: block; width: 150px" />
+                        clearable
+                        class="w-1/3"
+                        style="display: block" />
                 </div>
-        <DataTable :loading="loading" v-bind="previousInstancesWorldDialogTable" style="margin-top: 10px">
-            <el-table-column :label="t('table.previous_instances.date')" prop="created_at" sortable width="170">
-                <template #default="scope">
-                    <span>{{ formatDateFilter(scope.row.created_at, 'long') }}</span>
             </template>
-            </el-table-column>
+        </DataTableLayout>
-            <el-table-column :label="t('table.previous_instances.instance_name')" prop="name">
-                <template #default="scope">
-                    <LocationWorld
-                        :locationobject="scope.row.$location"
-                        :grouphint="scope.row.groupName"
-                        :currentuserid="currentUser.id" />
-                </template>
-            </el-table-column>
-            <el-table-column :label="t('table.previous_instances.instance_creator')" prop="location">
-                <template #default="scope">
-                    <DisplayName
-                        :userid="scope.row.$location.userId"
-                        :location="scope.row.$location.tag"
-                        :force-update-key="previousInstancesWorldDialog.forceUpdate" />
-                </template>
-            </el-table-column>
-            <el-table-column :label="t('table.previous_instances.time')" prop="time" width="100" sortable>
-                <template #default="scope">
-                    <span v-text="scope.row.timer"></span>
-                </template>
-            </el-table-column>
-            <el-table-column :label="t('table.previous_instances.action')" width="120" align="right">
-                <template #default="scope">
-                    <Button
-                        size="icon-sm"
-                        variant="ghost"
-                        class="button-pd-0 w-6 h-6 text-xs"
-                        @click="showPreviousInstancesInfoDialog(scope.row.location)"
-                        ><i class="ri-information-line"></i
-                    ></Button>
-                    <Button
-                        size="icon-sm"
-                        variant="ghost"
-                        v-if="shiftHeld"
-                        style="color: #f56c6c"
-                        class="button-pd-0 w-6 h-6 text-xs"
-                        @click="deleteGameLogWorldInstance(scope.row)"
-                        ><i class="ri-delete-bin-line"></i
-                    ></Button>
-                    <Button
-                        size="icon-sm"
-                        variant="ghost"
-                        v-else
-                        class="button-pd-0 w-6 h-6 text-xs"
-                        @click="deleteGameLogWorldInstancePrompt(scope.row)"
-                        ><i class="ri-delete-bin-line"></i
-                    ></Button>
-                </template>
-            </el-table-column>
-        </DataTable>
     </el-dialog>
 </template>
 
 <script setup>
-    import { computed, nextTick, reactive, ref, watch } from 'vue';
+    import { computed, nextTick, ref, watch } from 'vue';
-    import { Button } from '@/components/ui/button';
     import { ElMessageBox } from 'element-plus';
     import { InputGroupField } from '@/components/ui/input-group';
     import { storeToRefs } from 'pinia';
@@ -81,14 +37,17 @@
 
     import {
         compareByCreatedAt,
-        formatDateFilter,
+        localeIncludes,
         parseLocation,
         removeFromArray,
         timeToText
     } from '../../../shared/utils';
-    import { useInstanceStore, useUiStore, useUserStore } from '../../../stores';
+    import { useInstanceStore, useSearchStore, useUiStore, useUserStore, useVrcxStore } from '../../../stores';
+    import { DataTableLayout } from '../../ui/data-table';
+    import { createColumns } from './previousInstancesWorldColumns.jsx';
     import { database } from '../../../service/database';
     import { getNextDialogIndex } from '../../../shared/utils/base/ui';
+    import { useVrcxVueTable } from '../../../lib/table/useVrcxVueTable';
 
     const { t } = useI18n();
 
@@ -103,20 +62,14 @@
     const { showPreviousInstancesInfoDialog } = useInstanceStore();
     const { shiftHeld } = storeToRefs(useUiStore());
     const { currentUser } = storeToRefs(useUserStore());
+    const { stringComparer } = storeToRefs(useSearchStore());
 
-    const previousInstancesWorldDialogTable = reactive({
+    const vrcxStore = useVrcxStore();
-        data: [],
+    const rawRows = ref([]);
-        filters: [{ prop: 'groupName', value: '' }],
+    const search = ref('');
-        tableProps: {
+    const pageSizes = [10, 25, 50, 100];
-            stripe: true,
+    const pageSize = ref(10);
-            size: 'small',
+    const tableStyle = { maxHeight: '400px' };
-            defaultSort: { prop: 'created_at', order: 'descending' }
-        },
-        pageSize: 10,
-        paginationProps: {
-            layout: 'sizes,prev,pager,next,total'
-        }
-    });
     const loading = ref(false);
     const previousInstancesWorldDialogIndex = ref(2000);
 
@@ -130,6 +83,65 @@
         }
     });
 
+    const displayRows = computed(() => {
+        const q = String(search.value ?? '')
+            .trim()
+            .toLowerCase();
+        const rows = Array.isArray(rawRows.value) ? rawRows.value : [];
+        if (!q) return rows;
+        return rows.filter((row) => {
+            return (
+                localeIncludes(row?.worldName ?? '', q, stringComparer.value) ||
+                localeIncludes(row?.groupName ?? '', q, stringComparer.value) ||
+                localeIncludes(row?.location ?? '', q, stringComparer.value)
+            );
+        });
+    });
+
+    const columns = computed(() =>
+        createColumns({
+            shiftHeld,
+            currentUserId: currentUser.value?.id,
+            forceUpdateKey: props.previousInstancesWorldDialog?.forceUpdate,
+            onShowInfo: showPreviousInstancesInfoDialog,
+            onDelete: deleteGameLogWorldInstance,
+            onDeletePrompt: deleteGameLogWorldInstancePrompt
+        })
+    );
+
+    const { table } = useVrcxVueTable({
+        persistKey: 'previousInstancesWorldDialog',
+        data: displayRows,
+        columns: columns.value,
+        getRowId: (row) => `${row?.location ?? ''}:${row?.created_at ?? ''}`,
+        initialSorting: [{ id: 'created_at', desc: true }],
+        initialPagination: {
+            pageIndex: 0,
+            pageSize: pageSize.value
+        }
+    });
+
+    watch(
+        columns,
+        (next) => {
+            table.setOptions((prev) => ({
+                ...prev,
+                columns: /** @type {any} */ (next)
+            }));
+        },
+        { immediate: true }
+    );
+
+    const totalItems = computed(() => {
+        const length = table.getFilteredRowModel().rows.length;
+        const max = vrcxStore.maxTableSize;
+        return length > max && length < max + 51 ? max : length;
+    });
+
+    const handlePageSizeChange = (size) => {
+        pageSize.value = size;
+    };
+
     function refreshPreviousInstancesWorldTable() {
         loading.value = true;
         const D = props.previousInstancesWorldDialog;
@@ -141,14 +153,14 @@
                 array.push(ref);
             }
             array.sort(compareByCreatedAt);
-            previousInstancesWorldDialogTable.data = array;
+            rawRows.value = array;
             loading.value = false;
         });
     }
 
     function deleteGameLogWorldInstance(row) {
         database.deleteGameLogInstanceByInstanceId({ location: row.location });
-        removeFromArray(previousInstancesWorldDialogTable.data, row);
+        removeFromArray(rawRows.value, row);
     }
 
     function deleteGameLogWorldInstancePrompt(row) {
@@ -177,9 +189,3 @@
         }
     );
 </script>
-
-<style scoped>
-    .button-pd-0 {
-        padding: 0;
-    }
-</style>

src/components/dialogs/PreviousInstancesDialog/previousInstancesGroupColumns.jsx

@@ -0,0 +1,121 @@
+import { ArrowUpDown } from 'lucide-vue-next';
+
+import Location from '../../Location.vue';
+import { Button } from '../../ui/button';
+import { i18n } from '../../../plugin';
+import { formatDateFilter } from '../../../shared/utils';
+
+const { t } = i18n.global;
+
+const sortButton = ({ column, label, descFirst = false }) => (
+    <Button
+        variant="ghost"
+        size="sm"
+        class="-ml-2 h-8 px-2"
+        onClick={() => {
+            const sorted = column.getIsSorted();
+            if (!sorted && descFirst) {
+                column.toggleSorting(true);
+                return;
+            }
+            column.toggleSorting(sorted === 'asc');
+        }}
+    >
+        {label}
+        <ArrowUpDown class="ml-1 h-4 w-4" />
+    </Button>
+);
+
+const resolveBool = (maybeRef) => {
+    if (maybeRef && typeof maybeRef === 'object' && 'value' in maybeRef) {
+        return !!maybeRef.value;
+    }
+    return !!maybeRef;
+};
+
+export const createColumns = ({ shiftHeld, onShowInfo, onDelete, onDeletePrompt }) => [
+    {
+        id: 'created_at',
+        accessorFn: (row) => (row?.created_at ? Date.parse(row.created_at) : 0),
+        size: 170,
+        header: ({ column }) =>
+            sortButton({
+                column,
+                label: t('table.previous_instances.date'),
+                descFirst: true
+            }),
+        cell: ({ row }) => (
+            <span>{formatDateFilter(row.original?.created_at, 'long')}</span>
+        )
+    },
+    {
+        id: 'instance',
+        accessorFn: (row) => row?.worldName ?? row?.name ?? '',
+        header: () => t('table.previous_instances.instance_name'),
+        meta: {
+            stretch: true
+        },
+        cell: ({ row }) => (
+            <Location
+                location={row.original?.$location?.tag ?? row.original?.location}
+                grouphint={row.original?.groupName}
+                hint={row.original?.worldName}
+            />
+        )
+    },
+    {
+        id: 'time',
+        accessorFn: (row) => row?.time ?? 0,
+        size: 100,
+        header: ({ column }) =>
+            sortButton({ column, label: t('table.previous_instances.time') }),
+        cell: ({ row }) => <span>{row.original?.timer ?? ''}</span>
+    },
+    {
+        id: 'actions',
+        enableSorting: false,
+        size: 120,
+        header: () => t('table.previous_instances.action'),
+        meta: {
+            thClass: 'text-right',
+            tdClass: 'text-right'
+        },
+        cell: ({ row }) => {
+            const original = row.original;
+            const isShiftHeld = resolveBool(shiftHeld);
+
+            return (
+                <div class="inline-flex items-center justify-end gap-1">
+                    <Button
+                        size="icon-sm"
+                        variant="ghost"
+                        class="w-6 h-6 text-xs"
+                        onClick={(event) => {
+                            event.stopPropagation();
+                            onShowInfo?.(original?.location);
+                        }}
+                    >
+                        <i class="ri-information-line"></i>
+                    </Button>
+
+                    <Button
+                        size="icon-sm"
+                        variant="ghost"
+                        class="w-6 h-6 text-xs"
+                        style={isShiftHeld ? { color: '#f56c6c' } : undefined}
+                        onClick={(event) => {
+                            event.stopPropagation();
+                            if (isShiftHeld) {
+                                onDelete?.(original);
+                            } else {
+                                onDeletePrompt?.(original);
+                            }
+                        }}
+                    >
+                        <i class="ri-delete-bin-line"></i>
+                    </Button>
+                </div>
+            );
+        }
+    }
+];

src/components/dialogs/PreviousInstancesDialog/previousInstancesInfoColumns.jsx

@@ -0,0 +1,104 @@
+import { ArrowUpDown } from 'lucide-vue-next';
+
+import { Button } from '../../ui/button';
+import { i18n } from '../../../plugin';
+import { formatDateFilter } from '../../../shared/utils';
+
+const { t } = i18n.global;
+
+const sortButton = ({ column, label, descFirst = false }) => (
+    <Button
+        variant="ghost"
+        size="sm"
+        class="-ml-2 h-8 px-2"
+        onClick={() => {
+            const sorted = column.getIsSorted();
+            if (!sorted && descFirst) {
+                column.toggleSorting(true);
+                return;
+            }
+            column.toggleSorting(sorted === 'asc');
+        }}
+    >
+        {label}
+        <ArrowUpDown class="ml-1 h-4 w-4" />
+    </Button>
+);
+
+export const createColumns = ({ onLookupUser }) => [
+    {
+        id: 'created_at',
+        accessorFn: (row) => (row?.created_at ? Date.parse(row.created_at) : 0),
+        size: 170,
+        header: ({ column }) =>
+            sortButton({
+                column,
+                label: t('table.previous_instances.date'),
+                descFirst: true
+            }),
+        cell: ({ row }) => {
+            const createdAt = row.original?.created_at;
+            const shortText = formatDateFilter(createdAt, 'short');
+            const longText = formatDateFilter(createdAt, 'long');
+            return <span title={longText}>{shortText}</span>;
+        }
+    },
+    {
+        id: 'friend',
+        accessorFn: (row) => (row?.isFavorite ? 2 : row?.isFriend ? 1 : 0),
+        size: 70,
+        enableSorting: false,
+        header: () => t('table.gameLog.icon'),
+        meta: {
+            thClass: 'text-center',
+            tdClass: 'text-center'
+        },
+        cell: ({ row }) => {
+            const original = row.original;
+            if (original?.isFavorite) {
+                return <span title="Favorite">⭐</span>;
+            }
+            if (original?.isFriend) {
+                return <span title="Friend">💚</span>;
+            }
+            return null;
+        }
+    },
+    {
+        id: 'displayName',
+        accessorFn: (row) => row?.displayName ?? '',
+        header: ({ column }) =>
+            sortButton({ column, label: t('table.previous_instances.display_name') }),
+        meta: {
+            stretch: true
+        },
+        cell: ({ row }) => {
+            const original = row.original;
+            return (
+                <span
+                    class="x-link"
+                    onClick={(event) => {
+                        event.stopPropagation();
+                        onLookupUser?.(original);
+                    }}
+                >
+                    {original?.displayName ?? ''}
+                </span>
+            );
+        }
+    },
+    {
+        id: 'time',
+        accessorFn: (row) => row?.time ?? 0,
+        size: 100,
+        header: ({ column }) => sortButton({ column, label: t('table.previous_instances.time') }),
+        cell: ({ row }) => <span>{row.original?.timer ?? ''}</span>
+    },
+    {
+        id: 'count',
+        accessorFn: (row) => row?.count ?? 0,
+        size: 100,
+        header: ({ column }) => sortButton({ column, label: t('table.previous_instances.count') }),
+        cell: ({ row }) => <span>{row.original?.count ?? ''}</span>
+    }
+];

src/components/dialogs/PreviousInstancesDialog/previousInstancesWorldColumns.jsx

@@ -0,0 +1,142 @@
+import { ArrowUpDown } from 'lucide-vue-next';
+
+import DisplayName from '../../DisplayName.vue';
+import LocationWorld from '../../LocationWorld.vue';
+import { Button } from '../../ui/button';
+import { i18n } from '../../../plugin';
+import { formatDateFilter } from '../../../shared/utils';
+
+const { t } = i18n.global;
+
+const sortButton = ({ column, label, descFirst = false }) => (
+    <Button
+        variant="ghost"
+        size="sm"
+        class="-ml-2 h-8 px-2"
+        onClick={() => {
+            const sorted = column.getIsSorted();
+            if (!sorted && descFirst) {
+                column.toggleSorting(true);
+                return;
+            }
+            column.toggleSorting(sorted === 'asc');
+        }}
+    >
+        {label}
+        <ArrowUpDown class="ml-1 h-4 w-4" />
+    </Button>
+);
+
+const resolveBool = (maybeRef) => {
+    if (maybeRef && typeof maybeRef === 'object' && 'value' in maybeRef) {
+        return !!maybeRef.value;
+    }
+    return !!maybeRef;
+};
+
+export const createColumns = ({
+    shiftHeld,
+    currentUserId,
+    forceUpdateKey,
+    onShowInfo,
+    onDelete,
+    onDeletePrompt
+}) => [
+    {
+        id: 'created_at',
+        accessorFn: (row) => (row?.created_at ? Date.parse(row.created_at) : 0),
+        size: 170,
+        header: ({ column }) =>
+            sortButton({
+                column,
+                label: t('table.previous_instances.date'),
+                descFirst: true
+            }),
+        cell: ({ row }) => (
+            <span>{formatDateFilter(row.original?.created_at, 'long')}</span>
+        )
+    },
+    {
+        id: 'instance',
+        accessorFn: (row) => row?.$location?.tag ?? row?.location ?? '',
+        header: () => t('table.previous_instances.instance_name'),
+        meta: {
+            stretch: true
+        },
+        cell: ({ row }) => (
+            <LocationWorld
+                locationobject={row.original?.$location}
+                grouphint={row.original?.groupName}
+                currentuserid={currentUserId}
+            />
+        )
+    },
+    {
+        id: 'creator',
+        accessorFn: (row) => row?.$location?.userId ?? '',
+        size: 170,
+        header: () => t('table.previous_instances.instance_creator'),
+        cell: ({ row }) => (
+            <DisplayName
+                userid={row.original?.$location?.userId}
+                location={row.original?.$location?.tag}
+                forceUpdateKey={forceUpdateKey}
+            />
+        )
+    },
+    {
+        id: 'time',
+        accessorFn: (row) => row?.time ?? 0,
+        size: 100,
+        header: ({ column }) =>
+            sortButton({ column, label: t('table.previous_instances.time') }),
+        cell: ({ row }) => <span>{row.original?.timer ?? ''}</span>
+    },
+    {
+        id: 'actions',
+        enableSorting: false,
+        size: 120,
+        header: () => t('table.previous_instances.action'),
+        meta: {
+            thClass: 'text-right',
+            tdClass: 'text-right'
+        },
+        cell: ({ row }) => {
+            const original = row.original;
+            const isShiftHeld = resolveBool(shiftHeld);
+
+            return (
+                <div class="inline-flex items-center justify-end gap-1">
+                    <Button
+                        size="icon-sm"
+                        variant="ghost"
+                        class="w-6 h-6 text-xs"
+                        onClick={(event) => {
+                            event.stopPropagation();
+                            onShowInfo?.(original?.location);
+                        }}
+                    >
+                        <i class="ri-information-line"></i>
+                    </Button>
+
+                    <Button
+                        size="icon-sm"
+                        variant="ghost"
+                        class="w-6 h-6 text-xs"
+                        style={isShiftHeld ? { color: '#f56c6c' } : undefined}
+                        onClick={(event) => {
+                            event.stopPropagation();
+                            if (isShiftHeld) {
+                                onDelete?.(original);
+                            } else {
+                                onDeletePrompt?.(original);
+                            }
+                        }}
+                    >
+                        <i class="ri-delete-bin-line"></i>
+                    </Button>
+                </div>
+            );
+        }
+    }
+];

src/components/dialogs/UserDialog/PreviousInstancesUserDialog.vue

@@ -5,79 +5,31 @@
         :title="t('dialog.previous_instances.header')"
         width="1000px"
         append-to-body>
+        <DataTableLayout
+            class="min-w-0 w-full"
+            :table="table"
+            :loading="loading"
+            :table-style="tableStyle"
+            :page-sizes="pageSizes"
+            :total-items="totalItems"
+            :on-page-size-change="handlePageSizeChange">
+            <template #toolbar>
                 <div style="display: flex; align-items: center; justify-content: space-between">
                     <span style="font-size: 14px" v-text="previousInstancesUserDialog.userRef.displayName"></span>
                     <InputGroupField
-                v-model="previousInstancesUserDialogTable.filters[0].value"
+                        v-model="search"
                         :placeholder="t('dialog.previous_instances.search_placeholder')"
-                style="display: block; width: 150px" />
+                        clearable
+                        class="w-1/3"
+                        style="display: block" />
                 </div>
-        <DataTable :loading="loading" v-bind="previousInstancesUserDialogTable" style="margin-top: 10px">
-            <el-table-column :label="t('table.previous_instances.date')" prop="created_at" sortable width="170">
-                <template #default="scope">
-                    <span>{{ formatDateFilter(scope.row.created_at, 'long') }}</span>
             </template>
-            </el-table-column>
+        </DataTableLayout>
-            <el-table-column :label="t('table.previous_instances.world')" prop="name" sortable>
-                <template #default="scope">
-                    <Location
-                        :location="scope.row.location"
-                        :hint="scope.row.worldName"
-                        :grouphint="scope.row.groupName" />
-                </template>
-            </el-table-column>
-            <el-table-column :label="t('table.previous_instances.instance_creator')" prop="location" width="170">
-                <template #default="scope">
-                    <DisplayName :userid="scope.row.$location.userId" :location="scope.row.$location.tag" />
-                </template>
-            </el-table-column>
-            <el-table-column :label="t('table.previous_instances.time')" prop="time" width="100" sortable>
-                <template #default="scope">
-                    <span v-text="scope.row.timer"></span>
-                </template>
-            </el-table-column>
-            <el-table-column :label="t('table.previous_instances.action')" width="120" align="right">
-                <template #default="scope">
-                    <Button
-                        size="icon-sm"
-                        variant="ghost"
-                        class="button-pd-0 w-6 h-6 text-xs"
-                        @click="showLaunchDialog(scope.row.location)"
-                        ><i class="ri-door-open-line"></i
-                    ></Button>
-                    <Button
-                        size="icon-sm"
-                        variant="ghost"
-                        class="button-pd-0 w-6 h-6 text-xs"
-                        @click="showPreviousInstancesInfoDialog(scope.row.location)"
-                        ><i class="ri-information-line"></i
-                    ></Button>
-                    <Button
-                        size="icon-sm"
-                        variant="ghost"
-                        v-if="shiftHeld"
-                        style="color: #f56c6c"
-                        class="button-pd-0 w-6 h-6 text-xs"
-                        @click="deleteGameLogUserInstance(scope.row)"
-                        ><i class="ri-delete-bin-line"></i
-                    ></Button>
-                    <Button
-                        size="icon-sm"
-                        variant="ghost"
-                        v-else
-                        class="button-pd-0 w-6 h-6 text-xs"
-                        @click="deleteGameLogUserInstancePrompt(scope.row)"
-                        ><i class="ri-delete-bin-line"></i
-                    ></Button>
-                </template>
-            </el-table-column>
-        </DataTable>
     </el-dialog>
 </template>
 
 <script setup>
-    import { computed, nextTick, reactive, ref, watch } from 'vue';
+    import { computed, nextTick, ref, watch } from 'vue';
-    import { Button } from '@/components/ui/button';
     import { ElMessageBox } from 'element-plus';
     import { InputGroupField } from '@/components/ui/input-group';
     import { storeToRefs } from 'pinia';
@@ -85,14 +37,17 @@
 
     import {
         compareByCreatedAt,
-        formatDateFilter,
+        localeIncludes,
         parseLocation,
         removeFromArray,
         timeToText
     } from '../../../shared/utils';
-    import { useInstanceStore, useLaunchStore, useUiStore } from '../../../stores';
+    import { useInstanceStore, useLaunchStore, useSearchStore, useUiStore, useVrcxStore } from '../../../stores';
+    import { DataTableLayout } from '../../ui/data-table';
+    import { createColumns } from './previousInstancesUserColumns.jsx';
     import { database } from '../../../service/database';
     import { getNextDialogIndex } from '../../../shared/utils/base/ui';
+    import { useVrcxVueTable } from '../../../lib/table/useVrcxVueTable';
 
     const props = defineProps({
         previousInstancesUserDialog: {
@@ -114,23 +69,17 @@
 
     const emit = defineEmits(['update:previous-instances-user-dialog']);
     const loading = ref(false);
-    const previousInstancesUserDialogTable = reactive({
+    const rawRows = ref([]);
-        data: [],
+    const search = ref('');
-        filters: [{ prop: 'worldName', value: '' }],
+    const pageSizes = [10, 25, 50, 100];
-        tableProps: {
+    const pageSize = ref(10);
-            stripe: true,
+    const tableStyle = { maxHeight: '400px' };
-            size: 'small',
-            defaultSort: { prop: 'created_at', order: 'descending' }
-        },
-        pageSize: 10,
-        paginationProps: {
-            layout: 'sizes,prev,pager,next,total'
-        }
-    });
 
     const { showLaunchDialog } = useLaunchStore();
     const { showPreviousInstancesInfoDialog } = useInstanceStore();
     const { shiftHeld } = storeToRefs(useUiStore());
+    const { stringComparer } = storeToRefs(useSearchStore());
+    const vrcxStore = useVrcxStore();
     const { t } = useI18n();
 
     const previousInstancesUserDialogIndex = ref(2000);
@@ -145,6 +94,64 @@
         }
     });
 
+    const displayRows = computed(() => {
+        const q = String(search.value ?? '')
+            .trim()
+            .toLowerCase();
+        const rows = Array.isArray(rawRows.value) ? rawRows.value : [];
+        if (!q) return rows;
+        return rows.filter((row) => {
+            return (
+                localeIncludes(row?.worldName ?? '', q, stringComparer.value) ||
+                localeIncludes(row?.groupName ?? '', q, stringComparer.value) ||
+                localeIncludes(row?.location ?? '', q, stringComparer.value)
+            );
+        });
+    });
+
+    const columns = computed(() =>
+        createColumns({
+            shiftHeld,
+            onLaunch: showLaunchDialog,
+            onShowInfo: showPreviousInstancesInfoDialog,
+            onDelete: deleteGameLogUserInstance,
+            onDeletePrompt: deleteGameLogUserInstancePrompt
+        })
+    );
+
+    const { table } = useVrcxVueTable({
+        persistKey: 'previousInstancesUserDialog',
+        data: displayRows,
+        columns: columns.value,
+        getRowId: (row) => `${row?.location ?? ''}:${row?.created_at ?? ''}`,
+        initialSorting: [{ id: 'created_at', desc: true }],
+        initialPagination: {
+            pageIndex: 0,
+            pageSize: pageSize.value
+        }
+    });
+
+    watch(
+        columns,
+        (next) => {
+            table.setOptions((prev) => ({
+                ...prev,
+                columns: next
+            }));
+        },
+        { immediate: true }
+    );
+
+    const totalItems = computed(() => {
+        const length = table.getFilteredRowModel().rows.length;
+        const max = vrcxStore.maxTableSize;
+        return length > max && length < max + 51 ? max : length;
+    });
+
+    const handlePageSizeChange = (size) => {
+        pageSize.value = size;
+    };
+
     const refreshPreviousInstancesUserTable = async () => {
         loading.value = true;
         const data = await database.getPreviousInstancesByUserId(props.previousInstancesUserDialog.userRef);
@@ -155,7 +162,7 @@
             array.push(item);
         }
         array.sort(compareByCreatedAt);
-        previousInstancesUserDialogTable.data = array;
+        rawRows.value = array;
         loading.value = false;
     };
 
@@ -178,7 +185,7 @@
             location: row.location,
             events: row.events
         });
-        removeFromArray(previousInstancesUserDialogTable.data, row);
+        removeFromArray(rawRows.value, row);
     }
 
     function deleteGameLogUserInstancePrompt(row) {

src/components/dialogs/UserDialog/previousInstancesUserColumns.jsx

@@ -0,0 +1,153 @@
+import { ArrowUpDown } from 'lucide-vue-next';
+
+import DisplayName from '../../DisplayName.vue';
+import Location from '../../Location.vue';
+import { Button } from '../../ui/button';
+import { i18n } from '../../../plugin';
+import { formatDateFilter } from '../../../shared/utils';
+
+const { t } = i18n.global;
+
+const sortButton = ({ column, label, descFirst = false }) => (
+    <Button
+        variant="ghost"
+        size="sm"
+        class="-ml-2 h-8 px-2"
+        onClick={() => {
+            const sorted = column.getIsSorted();
+            if (!sorted && descFirst) {
+                column.toggleSorting(true);
+                return;
+            }
+            column.toggleSorting(sorted === 'asc');
+        }}
+    >
+        {label}
+        <ArrowUpDown class="ml-1 h-4 w-4" />
+    </Button>
+);
+
+const resolveBool = (maybeRef) => {
+    if (maybeRef && typeof maybeRef === 'object' && 'value' in maybeRef) {
+        return !!maybeRef.value;
+    }
+    return !!maybeRef;
+};
+
+export const createColumns = ({
+    shiftHeld,
+    onLaunch,
+    onShowInfo,
+    onDelete,
+    onDeletePrompt
+}) => [
+    {
+        id: 'created_at',
+        accessorFn: (row) => (row?.created_at ? Date.parse(row.created_at) : 0),
+        size: 170,
+        header: ({ column }) =>
+            sortButton({
+                column,
+                label: t('table.previous_instances.date'),
+                descFirst: true
+            }),
+        cell: ({ row }) => (
+            <span>{formatDateFilter(row.original?.created_at, 'long')}</span>
+        )
+    },
+    {
+        id: 'world',
+        accessorFn: (row) => row?.worldName ?? row?.name ?? '',
+        header: ({ column }) =>
+            sortButton({ column, label: t('table.previous_instances.world') }),
+        meta: {
+            stretch: true
+        },
+        cell: ({ row }) => (
+            <Location
+                location={row.original?.location}
+                hint={row.original?.worldName}
+                grouphint={row.original?.groupName}
+            />
+        )
+    },
+    {
+        id: 'creator',
+        accessorFn: (row) => row?.$location?.userId ?? '',
+        size: 170,
+        header: () => t('table.previous_instances.instance_creator'),
+        cell: ({ row }) => (
+            <DisplayName
+                userid={row.original?.$location?.userId}
+                location={row.original?.$location?.tag}
+            />
+        )
+    },
+    {
+        id: 'time',
+        accessorFn: (row) => row?.time ?? 0,
+        size: 100,
+        header: ({ column }) =>
+            sortButton({ column, label: t('table.previous_instances.time') }),
+        cell: ({ row }) => <span>{row.original?.timer ?? ''}</span>
+    },
+    {
+        id: 'actions',
+        enableSorting: false,
+        size: 140,
+        header: () => t('table.previous_instances.action'),
+        meta: {
+            thClass: 'text-right',
+            tdClass: 'text-right'
+        },
+        cell: ({ row }) => {
+            const original = row.original;
+            const isShiftHeld = resolveBool(shiftHeld);
+
+            return (
+                <div class="inline-flex items-center justify-end gap-1">
+                    <Button
+                        size="icon-sm"
+                        variant="ghost"
+                        class="w-6 h-6 text-xs"
+                        onClick={(event) => {
+                            event.stopPropagation();
+                            onLaunch?.(original?.location);
+                        }}
+                    >
+                        <i class="ri-door-open-line"></i>
+                    </Button>
+
+                    <Button
+                        size="icon-sm"
+                        variant="ghost"
+                        class="w-6 h-6 text-xs"
+                        onClick={(event) => {
+                            event.stopPropagation();
+                            onShowInfo?.(original?.location);
+                        }}
+                    >
+                        <i class="ri-information-line"></i>
+                    </Button>
+
+                    <Button
+                        size="icon-sm"
+                        variant="ghost"
+                        class="w-6 h-6 text-xs"
+                        style={isShiftHeld ? { color: '#f56c6c' } : undefined}
+                        onClick={(event) => {
+                            event.stopPropagation();
+                            if (isShiftHeld) {
+                                onDelete?.(original);
+                            } else {
+                                onDeletePrompt?.(original);
+                            }
+                        }}
+                    >
+                        <i class="ri-delete-bin-line"></i>
+                    </Button>
+                </div>
+            );
+        }
+    }
+];

src/components/ui/input-group/InputGroupField.vue

@@ -1,8 +1,8 @@
 <script setup>
-    import { computed, ref, useAttrs } from 'vue';
-    import { useVModel } from '@vueuse/core';
     import { Eye, EyeOff, X } from 'lucide-vue-next';
+    import { computed, ref, useAttrs } from 'vue';
     import { cn } from '@/lib/utils';
+    import { useVModel } from '@vueuse/core';
 
     import { InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput, InputGroupText } from '.';
 
@@ -31,11 +31,45 @@
     const reveal = ref(false);
     const valueLength = computed(() => String(modelValue.value ?? '').length);
     const maxLength = computed(() => props.maxlength ?? attrs.maxlength);
-    const wrapperClass = computed(() =>
+    const wrapperClass = computed(() => cn(props.class, attrs.class, props.size === 'sm' && 'h-8', 'flex-nowrap'));
-        cn(props.class, attrs.class, props.size === 'sm' && 'h-8')
-    );
     const inputClass = computed(() => cn(props.inputClass));
 
+    const wrapperStyle = computed(() => {
+        const raw = attrs.style;
+        if (!raw) return undefined;
+        if (typeof raw === 'string') {
+            const filtered = raw
+                .split(';')
+                .map((s) => s.trim())
+                .filter((s) => s && !s.toLowerCase().startsWith('display:'))
+                .join('; ');
+            return filtered || undefined;
+        }
+        if (Array.isArray(raw)) {
+            return raw.map((s) => {
+                if (typeof s === 'string') {
+                    return s
+                        .split(';')
+                        .map((p) => p.trim())
+                        .filter((p) => p && !p.toLowerCase().startsWith('display:'))
+                        .join('; ');
+                }
+                if (s && typeof s === 'object') {
+                    const next = { ...s };
+                    delete next.display;
+                    return next;
+                }
+                return s;
+            });
+        }
+        if (raw && typeof raw === 'object') {
+            const next = { ...raw };
+            delete next.display;
+            return next;
+        }
+        return raw;
+    });
+
     const inputType = computed(() => {
         const rawType = props.type ?? attrs.type;
         if (props.showPassword) {
@@ -45,15 +79,13 @@
     });
 
     const inputAttrs = computed(() => {
-        const {
+        const rest = { ...(attrs ?? {}) };
-            class: _class,
+        delete rest.class;
-            style: _style,
+        delete rest.style;
-            type: _type,
+        delete rest.type;
-            maxlength: _maxlength,
+        delete rest.maxlength;
-            onInput: _onInput,
+        delete rest.onInput;
-            onChange: _onChange,
+        delete rest.onChange;
-            ...rest
-        } = attrs;
         return {
             ...rest,
             type: inputType.value,
@@ -61,7 +93,7 @@
         };
     });
 
-    const isDisabled = computed(() => Boolean(inputAttrs.value.disabled));
+    const isDisabled = computed(() => Boolean(/** @type {any} */ (inputAttrs.value)?.disabled));
     const showCount = computed(() => Boolean(maxLength.value) && props.showCount);
 
     function clearValue() {
@@ -88,7 +120,7 @@
 </script>
 
 <template>
-    <InputGroup :class="wrapperClass" :style="attrs.style" :data-disabled="isDisabled ? 'true' : undefined">
+    <InputGroup :class="wrapperClass" :style="wrapperStyle" :data-disabled="isDisabled ? 'true' : undefined">
         <InputGroupAddon v-if="$slots.leading" align="inline-start">
             <slot name="leading" />
         </InputGroupAddon>

src/components/ui/input-group/InputGroupTextareaField.vue

@@ -1,8 +1,8 @@
 <script setup>
     import { computed, nextTick, onMounted, ref, useAttrs, watch } from 'vue';
-    import { useVModel } from '@vueuse/core';
     import { X } from 'lucide-vue-next';
     import { cn } from '@/lib/utils';
+    import { useVModel } from '@vueuse/core';
 
     import { InputGroup, InputGroupAddon, InputGroupButton, InputGroupText, InputGroupTextarea } from '.';
 
@@ -29,8 +29,43 @@
     const textareaRef = ref(null);
     const valueLength = computed(() => String(modelValue.value ?? '').length);
     const maxLength = computed(() => props.maxlength ?? attrs.maxlength);
-    const wrapperClass = computed(() => cn(props.class, attrs.class));
+    const wrapperClass = computed(() => cn(props.class, attrs.class, 'flex-nowrap'));
     const inputClass = computed(() => cn(props.inputClass));
+    const wrapperStyle = computed(() => {
+        const raw = attrs.style;
+        if (!raw) return undefined;
+        if (typeof raw === 'string') {
+            const filtered = raw
+                .split(';')
+                .map((s) => s.trim())
+                .filter((s) => s && !s.toLowerCase().startsWith('display:'))
+                .join('; ');
+            return filtered || undefined;
+        }
+        if (Array.isArray(raw)) {
+            return raw.map((s) => {
+                if (typeof s === 'string') {
+                    return s
+                        .split(';')
+                        .map((p) => p.trim())
+                        .filter((p) => p && !p.toLowerCase().startsWith('display:'))
+                        .join('; ');
+                }
+                if (s && typeof s === 'object') {
+                    const next = { ...s };
+                    delete next.display;
+                    return next;
+                }
+                return s;
+            });
+        }
+        if (raw && typeof raw === 'object') {
+            const next = { ...raw };
+            delete next.display;
+            return next;
+        }
+        return raw;
+    });
     const showCount = computed(() => Boolean(maxLength.value) && props.showCount);
     const autosizeConfig = computed(() => {
         if (!props.autosize) return null;
@@ -38,21 +73,19 @@
     });
 
     const inputAttrs = computed(() => {
-        const {
+        const rest = { ...(attrs ?? {}) };
-            class: _class,
+        delete rest.class;
-            style: _style,
+        delete rest.style;
-            maxlength: _maxlength,
+        delete rest.maxlength;
-            onInput: _onInput,
+        delete rest.onInput;
-            onChange: _onChange,
+        delete rest.onChange;
-            ...rest
-        } = attrs;
         return {
             ...rest,
             maxlength: maxLength.value
         };
     });
 
-    const isDisabled = computed(() => Boolean(inputAttrs.value.disabled));
+    const isDisabled = computed(() => Boolean(/** @type {any} */ (inputAttrs.value)?.disabled));
 
     function resolveTextareaEl() {
         const instance = textareaRef.value;
@@ -114,7 +147,7 @@
 </script>
 
 <template>
-    <InputGroup :class="wrapperClass" :style="attrs.style" :data-disabled="isDisabled ? 'true' : undefined">
+    <InputGroup :class="wrapperClass" :style="wrapperStyle" :data-disabled="isDisabled ? 'true' : undefined">
         <InputGroupAddon v-if="$slots.leading" align="block-start">
             <slot name="leading" />
         </InputGroupAddon>