replace el-dialog

src/components/dialogs/PreviousInstancesDialog/PreviousInstancesGroupDialog.vue

@@ -1,34 +1,36 @@
 <template>
-    <el-dialog
-        :z-index="previousInstancesGroupDialogIndex"
-        v-model="isVisible"
-        :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
-                        class="w-1/3"
-                        v-model="search"
-                        :placeholder="t('dialog.previous_instances.search_placeholder')"
-                        clearable />
-                </div>
-            </template>
-        </DataTableLayout>
-    </el-dialog>
+    <Dialog v-model:open="isVisible">
+        <DialogContent class="sm:max-w-250">
+            <DialogHeader>
+                <DialogTitle>{{ t('dialog.previous_instances.header') }}</DialogTitle>
+            </DialogHeader>
+
+            <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
+                            class="w-1/3"
+                            v-model="search"
+                            :placeholder="t('dialog.previous_instances.search_placeholder')"
+                            clearable />
+                    </div>
+                </template>
+            </DataTableLayout>
+        </DialogContent>
+    </Dialog>
 </template>
 
 <script setup>
-    import { computed, nextTick, ref, watch } from 'vue';
+    import { Dialog, DialogContent, DialogHeader, DialogTitle } from '@/components/ui/dialog';
+    import { computed, ref, watch } from 'vue';
     import { InputGroupField } from '@/components/ui/input-group';
     import { storeToRefs } from 'pinia';
     import { useI18n } from 'vue-i18n';
@@ -44,7 +46,6 @@
     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();
@@ -52,7 +53,6 @@
     const { stringComparer } = storeToRefs(useSearchStore());
     const { t } = useI18n();
 
-    const previousInstancesGroupDialogIndex = ref(2000);
     const loading = ref(false);
 
     const modalStore = useModalStore();
@@ -140,9 +140,6 @@
         () => props.previousInstancesGroupDialog.openFlg,
         () => {
             if (props.previousInstancesGroupDialog.visible) {
-                nextTick(() => {
-                    previousInstancesGroupDialogIndex.value = getNextDialogIndex();
-                });
                 refreshPreviousInstancesGroupTable();
             }
         }

src/components/dialogs/PreviousInstancesDialog/PreviousInstancesInfoDialog.vue

@@ -1,35 +1,41 @@
 <template>
-    <el-dialog
-        :z-index="previousInstancesInfoDialogIndex"
-        :model-value="previousInstancesInfoDialogVisible"
-        :title="t('dialog.previous_instances.info')"
-        width="800px"
-        :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="search"
-                        :placeholder="t('dialog.previous_instances.search_placeholder')"
-                        style="width: 150px"
-                        clearable />
-                </div>
-            </template>
-        </DataTableLayout>
-    </el-dialog>
+    <Dialog
+        :open="previousInstancesInfoDialogVisible"
+        @update:open="
+            (open) => {
+                if (!open) closeDialog();
+            }
+        ">
+        <DialogContent class="sm:max-w-200">
+            <DialogHeader>
+                <DialogTitle>{{ t('dialog.previous_instances.info') }}</DialogTitle>
+            </DialogHeader>
+
+            <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="search"
+                            :placeholder="t('dialog.previous_instances.search_placeholder')"
+                            style="width: 150px"
+                            clearable />
+                    </div>
+                </template>
+            </DataTableLayout>
+        </DialogContent>
+    </Dialog>
 </template>
 
 <script setup>
+    import { Dialog, DialogContent, DialogHeader, DialogTitle } from '@/components/ui/dialog';
     import { computed, nextTick, ref, watch } from 'vue';
     import { storeToRefs } from 'pinia';
     import { useI18n } from 'vue-i18n';
@@ -40,7 +46,6 @@
     import { InputGroupField } from '../../../components/ui/input-group';
     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();
@@ -49,8 +54,6 @@
     const { gameLogIsFriend, gameLogIsFavorite } = useGameLogStore();
     const { t } = useI18n();
 
-    const previousInstancesInfoDialogIndex = ref(2000);
-
     const loading = ref(false);
     const rawRows = ref([]);
     const search = ref('');
@@ -147,7 +150,6 @@
     );
 
     function init() {
-        previousInstancesInfoDialogIndex.value = getNextDialogIndex();
         loading.value = true;
         location.value = parseLocation(previousInstancesInfoDialogInstanceId.value);
     }

src/components/dialogs/PreviousInstancesDialog/PreviousInstancesWorldDialog.vue

@@ -1,35 +1,37 @@
 <template>
-    <el-dialog
-        :z-index="previousInstancesWorldDialogIndex"
-        v-model="isVisible"
-        :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="search"
-                        :placeholder="t('dialog.previous_instances.search_placeholder')"
-                        clearable
-                        class="w-1/3"
-                        style="display: block" />
-                </div>
-            </template>
-        </DataTableLayout>
-    </el-dialog>
+    <Dialog v-model:open="isVisible">
+        <DialogContent class="sm:max-w-250">
+            <DialogHeader>
+                <DialogTitle>{{ t('dialog.previous_instances.header') }}</DialogTitle>
+            </DialogHeader>
+
+            <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="search"
+                            :placeholder="t('dialog.previous_instances.search_placeholder')"
+                            clearable
+                            class="w-1/3"
+                            style="display: block" />
+                    </div>
+                </template>
+            </DataTableLayout>
+        </DialogContent>
+    </Dialog>
 </template>
 
 <script setup>
-    import { computed, nextTick, ref, watch } from 'vue';
+    import { Dialog, DialogContent, DialogHeader, DialogTitle } from '@/components/ui/dialog';
+    import { computed, ref, watch } from 'vue';
     import { InputGroupField } from '@/components/ui/input-group';
     import { storeToRefs } from 'pinia';
     import { useI18n } from 'vue-i18n';
@@ -52,7 +54,6 @@
     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();
@@ -79,7 +80,6 @@
     const pageSize = ref(10);
     const tableStyle = { maxHeight: '400px' };
     const loading = ref(false);
-    const previousInstancesWorldDialogIndex = ref(2000);
 
     const isVisible = computed({
         get: () => props.previousInstancesWorldDialog.visible,
@@ -188,9 +188,6 @@
         () => props.previousInstancesWorldDialog.openFlg,
         () => {
             if (props.previousInstancesWorldDialog.visible) {
-                nextTick(() => {
-                    previousInstancesWorldDialogIndex.value = getNextDialogIndex();
-                });
                 refreshPreviousInstancesWorldTable();
             }
         }