replace el-tabs

This commit is contained in:
pa
2026-01-14 22:25:52 +09:00
committed by Natsumi
parent 442b1060f7
commit b7f3d91a03
17 changed files with 1382 additions and 1061 deletions

File diff suppressed because it is too large Load Diff

View File

@@ -5,40 +5,40 @@
:title="t('dialog.edit_invite_messages.header')"
width="1000px"
@close="closeDialog">
<el-tabs v-model="activeTab" style="margin-top: 10px">
<el-tab-pane :label="t('dialog.edit_invite_messages.invite_message_tab')" name="message">
<TabsUnderline v-model="activeTab" :items="editInviteTabs" :unmount-on-hide="false" class="mt-2.5">
<template #message>
<DataTableLayout
style="margin-top: 10px; cursor: pointer"
:table="inviteMessageTanstackTable"
:loading="false"
:show-pagination="false"
:on-row-click="handleEditInviteMessageRowClick" />
</el-tab-pane>
<el-tab-pane :label="t('dialog.edit_invite_messages.invite_request_tab')" name="request">
</template>
<template #request>
<DataTableLayout
style="margin-top: 10px; cursor: pointer"
:table="inviteRequestTanstackTable"
:loading="false"
:show-pagination="false"
:on-row-click="handleEditInviteMessageRowClick" />
</el-tab-pane>
<el-tab-pane :label="t('dialog.edit_invite_messages.invite_request_response_tab')" name="requestResponse">
</template>
<template #requestResponse>
<DataTableLayout
style="margin-top: 10px; cursor: pointer"
:table="inviteRequestResponseTanstackTable"
:loading="false"
:show-pagination="false"
:on-row-click="handleEditInviteMessageRowClick" />
</el-tab-pane>
<el-tab-pane :label="t('dialog.edit_invite_messages.invite_response_tab')" name="response">
</template>
<template #response>
<DataTableLayout
style="margin-top: 10px; cursor: pointer"
:table="inviteResponseTanstackTable"
:loading="false"
:show-pagination="false"
:on-row-click="handleEditInviteMessageRowClick" />
</el-tab-pane>
</el-tabs>
</template>
</TabsUnderline>
</el-dialog>
<template v-if="isEditInviteMessagesDialogVisible">
<EditInviteMessageDialog
@@ -52,6 +52,7 @@
<script setup>
import { computed, ref, watch } from 'vue';
import { DataTableLayout } from '@/components/ui/data-table';
import { TabsUnderline } from '@/components/ui/tabs';
import { storeToRefs } from 'pinia';
import { toast } from 'vue-sonner';
import { useI18n } from 'vue-i18n';
@@ -82,6 +83,12 @@
});
const activeTab = ref('message');
const editInviteTabs = computed(() => [
{ value: 'message', label: t('dialog.edit_invite_messages.invite_message_tab') },
{ value: 'request', label: t('dialog.edit_invite_messages.invite_request_tab') },
{ value: 'requestResponse', label: t('dialog.edit_invite_messages.invite_request_response_tab') },
{ value: 'response', label: t('dialog.edit_invite_messages.invite_response_tab') }
]);
const isEditInviteMessageDialogVisible = ref(false);
const inviteMessage = ref({});

View File

@@ -1,7 +1,7 @@
<template>
<el-dialog :title="t('dialog.export_friends_list.header')" v-model="isVisible" width="650px">
<el-tabs>
<el-tab-pane :label="t('dialog.export_friends_list.csv')">
<TabsUnderline default-value="csv" :items="exportFriendsTabs" :unmount-on-hide="false" class="mt-2.5">
<template #csv>
<InputGroupTextareaField
v-model="exportFriendsListCsv"
:rows="15"
@@ -9,8 +9,8 @@
style="margin-top: 15px"
input-class="resize-none"
@click="$event.target.tagName === 'TEXTAREA' && $event.target.select()" />
</el-tab-pane>
<el-tab-pane :label="t('dialog.export_friends_list.json')">
</template>
<template #json>
<InputGroupTextareaField
v-model="exportFriendsListJson"
:rows="15"
@@ -18,15 +18,16 @@
style="margin-top: 15px"
input-class="resize-none"
@click="$event.target.tagName === 'TEXTAREA' && $event.target.select()" />
</el-tab-pane>
</el-tabs>
</template>
</TabsUnderline>
</el-dialog>
</template>
<script setup>
import { computed, ref, watch } from 'vue';
import { storeToRefs } from 'pinia';
import { InputGroupTextareaField } from '@/components/ui/input-group';
import { TabsUnderline } from '@/components/ui/tabs';
import { storeToRefs } from 'pinia';
import { useI18n } from 'vue-i18n';
import { useUserStore } from '../../../stores';
@@ -49,6 +50,10 @@
const exportFriendsListCsv = ref('');
const exportFriendsListJson = ref('');
const exportFriendsTabs = computed(() => [
{ value: 'csv', label: t('dialog.export_friends_list.csv') },
{ value: 'json', label: t('dialog.export_friends_list.json') }
]);
const isVisible = computed({
get() {