replace el-button-group with ButtonGroup

This commit is contained in:
pa
2026-01-08 19:30:39 +09:00
committed by Natsumi
parent 5cd7e6da5a
commit 9735073c7a
13 changed files with 347 additions and 191 deletions
@@ -72,19 +72,26 @@
</div>
</PopoverContent>
</Popover>
<el-button-group style="margin-right: 5px">
<ButtonGroup style="margin-right: 5px">
<TooltipWrapper :content="t('view.charts.instance_activity.previous_day')" side="top">
<el-button
:icon="ArrowLeft"
<Button
variant="outline"
size="icon-sm"
:disabled="isPrevDayBtnDisabled"
@click="changeSelectedDateFromBtn(false)"></el-button>
@click="changeSelectedDateFromBtn(false)">
<ArrowLeft />
</Button>
</TooltipWrapper>
<TooltipWrapper :content="t('view.charts.instance_activity.next_day')" side="top">
<el-button :disabled="isNextDayBtnDisabled" @click="changeSelectedDateFromBtn(true)"
><el-icon class="el-icon--right"><ArrowRight /></el-icon
></el-button>
<Button
variant="outline"
size="icon-sm"
:disabled="isNextDayBtnDisabled"
@click="changeSelectedDateFromBtn(true)">
<ArrowRight />
</Button>
</TooltipWrapper>
</el-button-group>
</ButtonGroup>
<el-date-picker
v-model="selectedDate"
type="date"
@@ -126,6 +133,8 @@
<script setup>
import { computed, nextTick, onBeforeMount, onBeforeUnmount, onMounted, ref, watch } from 'vue';
import { ArrowLeft, ArrowRight, InfoFilled, Refresh, Setting, WarningFilled } from '@element-plus/icons-vue';
import { Button } from '@/components/ui/button';
import { ButtonGroup } from '@/components/ui/button-group';
import { storeToRefs } from 'pinia';
import { useI18n } from 'vue-i18n';
+63 -57
View File
@@ -48,22 +48,24 @@
</div>
</div>
</div>
<el-button-group v-if="searchUserResults.length" style="margin-top: 15px">
<el-button
<ButtonGroup v-if="searchUserResults.length" style="margin-top: 15px">
<Button
variant="outline"
size="sm"
:disabled="!searchUserParams.offset"
:icon="Back"
size="small"
@click="handleMoreSearchUser(-1)"
>{{ t('view.search.prev_page') }}</el-button
>
<el-button
@click="handleMoreSearchUser(-1)">
<Back />
{{ t('view.search.prev_page') }}
</Button>
<Button
variant="outline"
size="sm"
:disabled="searchUserResults.length < 10"
:icon="Right"
size="small"
@click="handleMoreSearchUser(1)"
>{{ t('view.search.next_page') }}</el-button
>
</el-button-group>
@click="handleMoreSearchUser(1)">
<Right />
{{ t('view.search.next_page') }}
</Button>
</ButtonGroup>
</el-tab-pane>
<el-tab-pane
v-loading="isSearchWorldLoading"
@@ -108,22 +110,24 @@
</div>
</div>
</div>
<el-button-group v-if="searchWorldResults.length" style="margin-top: 15px">
<el-button
<ButtonGroup v-if="searchWorldResults.length" style="margin-top: 15px">
<Button
variant="outline"
size="sm"
:disabled="!searchWorldParams.offset"
:icon="Back"
size="small"
@click="moreSearchWorld(-1)"
>{{ t('view.search.prev_page') }}</el-button
>
<el-button
@click="moreSearchWorld(-1)">
<Back />
{{ t('view.search.prev_page') }}
</Button>
<Button
variant="outline"
size="sm"
:disabled="searchWorldResults.length < 10"
:icon="Right"
size="small"
@click="moreSearchWorld(1)"
>{{ t('view.search.next_page') }}</el-button
>
</el-button-group>
@click="moreSearchWorld(1)">
<Right />
{{ t('view.search.next_page') }}
</Button>
</ButtonGroup>
</el-tab-pane>
<el-tab-pane
v-loading="isSearchAvatarLoading"
@@ -233,25 +237,23 @@
</div>
</div>
</div>
<el-button-group v-if="searchAvatarPage.length" style="margin-top: 15px">
<el-button
:disabled="!searchAvatarPageNum"
:icon="Back"
size="small"
@click="moreSearchAvatar(-1)"
>{{ t('view.search.prev_page') }}</el-button
>
<el-button
<ButtonGroup v-if="searchAvatarPage.length" style="margin-top: 15px">
<Button variant="outline" size="sm" :disabled="!searchAvatarPageNum" @click="moreSearchAvatar(-1)">
<Back />
{{ t('view.search.prev_page') }}
</Button>
<Button
variant="outline"
size="sm"
:disabled="
searchAvatarResults.length < 10 ||
(searchAvatarPageNum + 1) * 10 >= searchAvatarResults.length
"
:icon="Right"
size="small"
@click="moreSearchAvatar(1)"
>{{ t('view.search.next_page') }}</el-button
>
</el-button-group>
@click="moreSearchAvatar(1)">
<Right />
{{ t('view.search.next_page') }}
</Button>
</ButtonGroup>
</el-tab-pane>
<el-tab-pane
v-loading="isSearchGroupLoading"
@@ -285,22 +287,24 @@
</div>
</div>
</div>
<el-button-group v-if="searchGroupResults.length" style="margin-top: 15px">
<el-button
<ButtonGroup v-if="searchGroupResults.length" style="margin-top: 15px">
<Button
variant="outline"
size="sm"
:disabled="!searchGroupParams.offset"
:icon="Back"
size="small"
@click="moreSearchGroup(-1)"
>{{ t('view.search.prev_page') }}</el-button
>
<el-button
@click="moreSearchGroup(-1)">
<Back />
{{ t('view.search.prev_page') }}
</Button>
<Button
variant="outline"
size="sm"
:disabled="searchGroupResults.length < 10"
:icon="Right"
size="small"
@click="moreSearchGroup(1)"
>{{ t('view.search.next_page') }}</el-button
>
</el-button-group>
@click="moreSearchGroup(1)">
<Right />
{{ t('view.search.next_page') }}
</Button>
</ButtonGroup>
</el-tab-pane>
</el-tabs>
</div>
@@ -308,6 +312,8 @@
<script setup>
import { ArrowDown, Back, Check, Delete, Refresh, Right } from '@element-plus/icons-vue';
import { Button } from '@/components/ui/button';
import { ButtonGroup } from '@/components/ui/button-group';
import { ref } from 'vue';
import { storeToRefs } from 'pinia';
import { useI18n } from 'vue-i18n';
@@ -3,25 +3,39 @@
<div class="options-container" style="margin-top: 0">
<span class="header">{{ t('view.settings.advanced.advanced.header') }}</span>
<div class="options-container-item" style="margin-top: 15px">
<el-button-group>
<el-button size="small" :icon="Operation" @click="showVRChatConfig()">VRChat config.json</el-button>
<el-button size="small" :icon="Operation" @click="showLaunchOptions()">{{
t('view.settings.advanced.advanced.launch_options')
}}</el-button>
<el-button size="small" :icon="Goods" @click="showRegistryBackupDialog()">{{
t('view.settings.advanced.advanced.vrc_registry_backup')
}}</el-button>
</el-button-group>
<ButtonGroup>
<Button variant="outline" size="sm" @click="showVRChatConfig()">
<Operation />
VRChat config.json
</Button>
<Button variant="outline" size="sm" @click="showLaunchOptions()">
<Operation />
{{ t('view.settings.advanced.advanced.launch_options') }}
</Button>
<Button variant="outline" size="sm" @click="showRegistryBackupDialog()">
<Goods />
{{ t('view.settings.advanced.advanced.vrc_registry_backup') }}
</Button>
</ButtonGroup>
</div>
</div>
<div class="options-container">
<span class="header">{{ t('view.settings.advanced.advanced.common_folders') }}</span>
<div class="options-container-item" style="margin-top: 15px">
<el-button-group>
<el-button size="small" :icon="Folder" @click="openVrcxAppDataFolder()">VRCX Data</el-button>
<el-button size="small" :icon="Folder" @click="openVrcAppDataFolder()">VRChat Data</el-button>
<el-button size="small" :icon="Folder" @click="openCrashVrcCrashDumps()">Crash Dumps</el-button>
</el-button-group>
<ButtonGroup>
<Button variant="outline" size="sm" @click="openVrcxAppDataFolder()">
<Folder />
VRCX Data
</Button>
<Button variant="outline" size="sm" @click="openVrcAppDataFolder()">
<Folder />
VRChat Data
</Button>
<Button variant="outline" size="sm" @click="openCrashVrcCrashDumps()">
<Folder />
Crash Dumps
</Button>
</ButtonGroup>
</div>
</div>
<div class="options-container">
@@ -390,6 +404,8 @@
User
} from '@element-plus/icons-vue';
import { computed, reactive, ref } from 'vue';
import { Button } from '@/components/ui/button';
import { ButtonGroup } from '@/components/ui/button-group';
import { storeToRefs } from 'pinia';
import { toast } from 'vue-sonner';
import { useI18n } from 'vue-i18n';
+80 -75
View File
@@ -30,27 +30,28 @@
<span>{{ t('dialog.gallery_icons.recommended_image_size') }}: 1200x900px (4:3)</span>
<br />
<br />
<el-button-group>
<el-button type="default" size="small" @click="refreshGalleryTable" :icon="Refresh">
<ButtonGroup>
<Button variant="outline" size="sm" @click="refreshGalleryTable">
<Refresh />
{{ t('dialog.gallery_icons.refresh') }}
</el-button>
<el-button
type="default"
size="small"
@click="displayGalleryUpload"
:icon="Upload"
:disabled="!isLocalUserVrcPlusSupporter || isUploading">
</Button>
<Button
variant="outline"
size="sm"
:disabled="!isLocalUserVrcPlusSupporter || isUploading"
@click="displayGalleryUpload">
<Upload />
{{ t('dialog.gallery_icons.upload') }}
</el-button>
<el-button
type="default"
size="small"
@click="setProfilePicOverride('')"
:icon="Close"
:disabled="!currentUser.profilePicOverride">
</Button>
<Button
variant="outline"
size="sm"
:disabled="!currentUser.profilePicOverride"
@click="setProfilePicOverride('')">
<Close />
{{ t('dialog.gallery_icons.clear') }}
</el-button>
</el-button-group>
</Button>
</ButtonGroup>
<br />
<div
class="x-friend-item"
@@ -102,27 +103,24 @@
<span>{{ t('dialog.gallery_icons.recommended_image_size') }}: 2048x2048px (1:1)</span>
<br />
<br />
<el-button-group>
<el-button type="default" size="small" @click="refreshVRCPlusIconsTable" :icon="Refresh">
<ButtonGroup>
<Button variant="outline" size="sm" @click="refreshVRCPlusIconsTable">
<Refresh />
{{ t('dialog.gallery_icons.refresh') }}
</el-button>
<el-button
type="default"
size="small"
@click="displayVRCPlusIconUpload"
:icon="Upload"
:disabled="!isLocalUserVrcPlusSupporter || isUploading">
</Button>
<Button
variant="outline"
size="sm"
:disabled="!isLocalUserVrcPlusSupporter || isUploading"
@click="displayVRCPlusIconUpload">
<Upload />
{{ t('dialog.gallery_icons.upload') }}
</el-button>
<el-button
type="default"
size="small"
@click="setVRCPlusIcon('')"
:icon="Close"
:disabled="!currentUser.userIcon">
</Button>
<Button variant="outline" size="sm" :disabled="!currentUser.userIcon" @click="setVRCPlusIcon('')">
<Close />
{{ t('dialog.gallery_icons.clear') }}
</el-button>
</el-button-group>
</Button>
</ButtonGroup>
<br />
<div
class="x-friend-item"
@@ -177,19 +175,20 @@
<br />
<br />
<div>
<el-button-group style="margin-right: 10px">
<el-button type="default" size="small" @click="refreshEmojiTable" :icon="Refresh">
<ButtonGroup style="margin-right: 10px">
<Button variant="outline" size="sm" @click="refreshEmojiTable">
<Refresh />
{{ t('dialog.gallery_icons.refresh') }}
</el-button>
<el-button
type="default"
size="small"
@click="displayEmojiUpload"
:icon="Upload"
:disabled="!isLocalUserVrcPlusSupporter || isUploading">
</Button>
<Button
variant="outline"
size="sm"
:disabled="!isLocalUserVrcPlusSupporter || isUploading"
@click="displayEmojiUpload">
<Upload />
{{ t('dialog.gallery_icons.upload') }}
</el-button>
</el-button-group>
</Button>
</ButtonGroup>
<br />
<br />
<el-select v-model="emojiAnimationStyle">
@@ -318,19 +317,20 @@
<span>{{ t('dialog.gallery_icons.recommended_image_size') }}: 1024x1024px (1:1)</span>
<br />
<br />
<el-button-group>
<el-button type="default" size="small" @click="refreshStickerTable" :icon="Refresh">
<ButtonGroup>
<Button variant="outline" size="sm" @click="refreshStickerTable">
<Refresh />
{{ t('dialog.gallery_icons.refresh') }}
</el-button>
<el-button
type="default"
size="small"
@click="displayStickerUpload"
:icon="Upload"
:disabled="!isLocalUserVrcPlusSupporter || isUploading">
</Button>
<Button
variant="outline"
size="sm"
:disabled="!isLocalUserVrcPlusSupporter || isUploading"
@click="displayStickerUpload">
<Upload />
{{ t('dialog.gallery_icons.upload') }}
</el-button>
</el-button-group>
</Button>
</ButtonGroup>
<br />
<div
class="x-friend-item"
@@ -383,19 +383,20 @@
<br />
<br />
<div style="display: flex; align-items: center">
<el-button-group>
<el-button type="default" size="small" @click="refreshPrintTable" :icon="Refresh">
<ButtonGroup>
<Button variant="outline" size="sm" @click="refreshPrintTable">
<Refresh />
{{ t('dialog.gallery_icons.refresh') }}
</el-button>
<el-button
type="default"
size="small"
@click="displayPrintUpload"
:icon="Upload"
:disabled="!isLocalUserVrcPlusSupporter || isUploading">
</Button>
<Button
variant="outline"
size="sm"
:disabled="!isLocalUserVrcPlusSupporter || isUploading"
@click="displayPrintUpload">
<Upload />
{{ t('dialog.gallery_icons.upload') }}
</el-button>
</el-button-group>
</Button>
</ButtonGroup>
<el-input
type="textarea"
v-model="printUploadNote"
@@ -472,14 +473,16 @@
<br />
<br />
<div style="display: flex; align-items: center">
<el-button-group>
<el-button type="default" size="small" @click="getInventory" :icon="Refresh">
<ButtonGroup>
<Button variant="outline" size="sm" @click="getInventory">
<Refresh />
{{ t('dialog.gallery_icons.refresh') }}
</el-button>
<el-button type="default" size="small" @click="redeemReward" :icon="Present">
</Button>
<Button variant="outline" size="sm" @click="redeemReward">
<Present />
{{ t('dialog.gallery_icons.redeem') }}
</el-button>
</el-button-group>
</Button>
</ButtonGroup>
</div>
<br />
<div
@@ -527,6 +530,8 @@
<script setup>
import { ArrowLeft, Close, Delete, Link, Picture, Plus, Present, Refresh, Upload } from '@element-plus/icons-vue';
import { computed, onBeforeUnmount, onMounted, ref } from 'vue';
import { Button } from '@/components/ui/button';
import { ButtonGroup } from '@/components/ui/button-group';
import { ElMessageBox } from 'element-plus';
import { storeToRefs } from 'pinia';
import { toast } from 'vue-sonner';