keep alive prev instance dialog

src/components/dialogs/MainDialogContainer.vue

@@ -21,12 +21,12 @@
 
     import AvatarDialog from './AvatarDialog/AvatarDialog.vue';
     import GroupDialog from './GroupDialog/GroupDialog.vue';
-    import UserDialog from './UserDialog/UserDialog.vue';
-    import WorldDialog from './WorldDialog/WorldDialog.vue';
     import PreviousInstancesGroupDialog from './PreviousInstancesDialog/PreviousInstancesGroupDialog.vue';
     import PreviousInstancesInfoDialog from './PreviousInstancesDialog/PreviousInstancesInfoDialog.vue';
     import PreviousInstancesUserDialog from './UserDialog/PreviousInstancesUserDialog.vue';
     import PreviousInstancesWorldDialog from './PreviousInstancesDialog/PreviousInstancesWorldDialog.vue';
+    import UserDialog from './UserDialog/UserDialog.vue';
+    import WorldDialog from './WorldDialog/WorldDialog.vue';
 
     const avatarStore = useAvatarStore();
     const groupStore = useGroupStore();
@@ -137,6 +137,13 @@
         }
     });
 
+    const keepAliveInclude = [
+        'PreviousInstancesInfoDialog',
+        'PreviousInstancesUserDialog',
+        'PreviousInstancesWorldDialog',
+        'PreviousInstancesGroupDialog'
+    ];
+
     const shouldShowBreadcrumbs = computed(() => dialogCrumbs.value.length > 1);
     const shouldCollapseBreadcrumbs = computed(() => dialogCrumbs.value.length > 5);
     const middleBreadcrumbs = computed(() => {
@@ -267,7 +274,9 @@
                 </BreadcrumbList>
             </Breadcrumb>
 
-            <component :is="activeComponent" v-if="activeComponent" />
+            <KeepAlive :include="keepAliveInclude">
+                <component :is="activeComponent" v-if="activeComponent" />
+            </KeepAlive>
         </DialogContent>
     </Dialog>
 </template>

src/components/dialogs/PreviousInstancesDialog/PreviousInstancesGroupDialog.vue

@@ -27,8 +27,10 @@
 </template>
 
 <script setup>
-    import { DialogHeader, DialogTitle } from '@/components/ui/dialog';
+    defineOptions({ name: 'PreviousInstancesGroupDialog' });
+
     import { computed, ref, watch } from 'vue';
+    import { DialogHeader, DialogTitle } from '@/components/ui/dialog';
     import { InputGroupField } from '@/components/ui/input-group';
     import { storeToRefs } from 'pinia';
     import { useI18n } from 'vue-i18n';
@@ -59,10 +61,10 @@
 
     const vrcxStore = useVrcxStore();
     const rawRows = ref([]);
-    const search = ref('');
     const pageSizes = [10, 25, 50, 100];
     const pageSize = ref(10);
     const tableStyle = { maxHeight: '400px' };
+    const search = ref('');
 
     const displayRows = computed(() => {
         const q = String(search.value ?? '')
@@ -97,6 +99,9 @@
         initialPagination: {
             pageIndex: 0,
             pageSize: pageSize.value
+        },
+        tableOptions: {
+            autoResetPageIndex: false
         }
     });
 

src/components/dialogs/PreviousInstancesDialog/PreviousInstancesInfoDialog.vue

@@ -27,8 +27,10 @@
 </template>
 
 <script setup>
-    import { DialogHeader, DialogTitle } from '@/components/ui/dialog';
+    defineOptions({ name: 'PreviousInstancesInfoDialog' });
+
     import { computed, nextTick, ref, watch } from 'vue';
+    import { DialogHeader, DialogTitle } from '@/components/ui/dialog';
     import { storeToRefs } from 'pinia';
     import { useI18n } from 'vue-i18n';
 
@@ -48,7 +50,6 @@
 
     const loading = ref(false);
     const rawRows = ref([]);
-    const search = ref('');
     const pageSizes = [10, 25, 50, 100];
     const pageSize = ref(10);
     const tableStyle = { maxHeight: '400px' };
@@ -80,6 +81,7 @@
 
     const { stringComparer } = storeToRefs(useSearchStore());
     const vrcxStore = useVrcxStore();
+    const search = ref('');
 
     const displayRows = computed(() => {
         const q = String(search.value ?? '')
@@ -105,6 +107,9 @@
         initialPagination: {
             pageIndex: 0,
             pageSize: pageSize.value
+        },
+        tableOptions: {
+            autoResetPageIndex: false
         }
     });
 
@@ -161,5 +166,4 @@
             loading.value = false;
         });
     }
-
 </script>

src/components/dialogs/PreviousInstancesDialog/PreviousInstancesWorldDialog.vue

@@ -28,8 +28,10 @@
 </template>
 
 <script setup>
-    import { DialogHeader, DialogTitle } from '@/components/ui/dialog';
+    defineOptions({ name: 'PreviousInstancesWorldDialog' });
+
     import { computed, ref, watch } from 'vue';
+    import { DialogHeader, DialogTitle } from '@/components/ui/dialog';
     import { InputGroupField } from '@/components/ui/input-group';
     import { storeToRefs } from 'pinia';
     import { useI18n } from 'vue-i18n';
@@ -67,11 +69,11 @@
 
     const vrcxStore = useVrcxStore();
     const rawRows = ref([]);
-    const search = ref('');
     const pageSizes = [10, 25, 50, 100];
     const pageSize = ref(10);
     const tableStyle = { maxHeight: '400px' };
     const loading = ref(false);
+    const search = ref('');
 
     const displayRows = computed(() => {
         const q = String(search.value ?? '')
@@ -108,6 +110,9 @@
         initialPagination: {
             pageIndex: 0,
             pageSize: pageSize.value
+        },
+        tableOptions: {
+            autoResetPageIndex: false
         }
     });
 

src/components/dialogs/UserDialog/PreviousInstancesUserDialog.vue

@@ -28,8 +28,10 @@
 </template>
 
 <script setup>
-    import { DialogHeader, DialogTitle } from '@/components/ui/dialog';
+    defineOptions({ name: 'PreviousInstancesUserDialog' });
+
     import { computed, ref, watch } from 'vue';
+    import { DialogHeader, DialogTitle } from '@/components/ui/dialog';
     import { InputGroupField } from '@/components/ui/input-group';
     import { storeToRefs } from 'pinia';
     import { useI18n } from 'vue-i18n';
@@ -57,7 +59,6 @@
     const modalStore = useModalStore();
     const loading = ref(false);
     const rawRows = ref([]);
-    const search = ref('');
     const pageSizes = [10, 25, 50, 100];
     const pageSize = ref(10);
     const tableStyle = { maxHeight: '400px' };
@@ -70,6 +71,7 @@
     const { stringComparer } = storeToRefs(useSearchStore());
     const vrcxStore = useVrcxStore();
     const { t } = useI18n();
+    const search = ref('');
 
     const displayRows = computed(() => {
         const q = String(search.value ?? '')
@@ -105,6 +107,9 @@
         initialPagination: {
             pageIndex: 0,
             pageSize: pageSize.value
+        },
+        tableOptions: {
+            autoResetPageIndex: false
         }
     });