replace el-button-group with ButtonGroup

src/components/dialogs/AvatarDialog/ChangeAvatarImageDialog.vue

@@ -22,17 +22,15 @@
                 style="margin-bottom: 12px" />
             <span>{{ t('dialog.change_content_image.description') }}</span>
             <br />
-            <el-button-group style="padding-bottom: 10px; padding-top: 10px">
-                <el-button
-                    type="default"
-                    size="small"
-                    :icon="Upload"
-                    :loading="changeAvatarImageDialogLoading"
-                    :disabled="changeAvatarImageDialogLoading"
-                    @click="uploadAvatarImage">
-                    {{ t('dialog.change_content_image.upload') }}
-                </el-button>
-            </el-button-group>
+            <el-button
+                type="default"
+                size="small"
+                :icon="Upload"
+                :loading="changeAvatarImageDialogLoading"
+                :disabled="changeAvatarImageDialogLoading"
+                @click="uploadAvatarImage">
+                {{ t('dialog.change_content_image.upload') }}
+            </el-button>
             <br />
             <div class="x-change-image-item">
                 <img :src="previousImageUrl" class="img-size" loading="lazy" />

src/components/dialogs/GroupDialog/GallerySelectDialog.vue

@@ -15,22 +15,24 @@
                 accept="image/*"
                 style="display: none"
                 @change="onFileChangeGallery" />
-            <el-button-group>
-                <el-button type="default" size="small" :icon="Close" @click="selectImageGallerySelect('', '')">{{
-                    t('dialog.gallery_select.none')
-                }}</el-button>
-                <el-button type="default" size="small" :icon="Refresh" @click="refreshGalleryTable">{{
-                    t('dialog.gallery_select.refresh')
-                }}</el-button>
-                <el-button
-                    type="default"
-                    size="small"
-                    :icon="Upload"
+            <ButtonGroup>
+                <Button variant="outline" size="sm" @click="selectImageGallerySelect('', '')">
+                    <Close />
+                    {{ t('dialog.gallery_select.none') }}
+                </Button>
+                <Button variant="outline" size="sm" @click="refreshGalleryTable">
+                    <Refresh />
+                    {{ t('dialog.gallery_select.refresh') }}
+                </Button>
+                <Button
+                    variant="outline"
+                    size="sm"
                     :disabled="!isLocalUserVrcPlusSupporter"
-                    @click="displayGalleryUpload"
-                    >{{ t('dialog.gallery_select.upload') }}</el-button
-                >
-            </el-button-group>
+                    @click="displayGalleryUpload">
+                    <Upload />
+                    {{ t('dialog.gallery_select.upload') }}
+                </Button>
+            </ButtonGroup>
             <br />
             <div
                 v-for="image in galleryTable"
@@ -54,6 +56,8 @@
 
 <script setup>
     import { Close, Refresh, Upload } from '@element-plus/icons-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';

src/components/dialogs/WorldDialog/ChangeWorldImageDialog.vue

@@ -22,17 +22,15 @@
                 style="margin-bottom: 12px" />
             <span>{{ t('dialog.change_content_image.description') }}</span>
             <br />
-            <el-button-group style="padding-bottom: 10px; padding-top: 10px">
-                <el-button
-                    type="default"
-                    size="small"
-                    :icon="Upload"
-                    :loading="changeWorldImageDialogLoading"
-                    :disabled="changeWorldImageDialogLoading"
-                    @click="uploadWorldImage">
-                    {{ t('dialog.change_content_image.upload') }}
-                </el-button>
-            </el-button-group>
+            <el-button
+                type="default"
+                size="small"
+                :icon="Upload"
+                :loading="changeWorldImageDialogLoading"
+                :disabled="changeWorldImageDialogLoading"
+                @click="uploadWorldImage">
+                {{ t('dialog.change_content_image.upload') }}
+            </el-button>
             <br />
             <div class="x-change-image-item">
                 <img :src="previousImageUrl" class="img-size" loading="lazy" />

src/components/ui/button-group/ButtonGroup.vue

@@ -0,0 +1,20 @@
+<script setup>
+    import { cn } from '@/lib/utils';
+
+    import { buttonGroupVariants } from '.';
+
+    const props = defineProps({
+        class: { type: null, required: false },
+        orientation: { type: null, required: false }
+    });
+</script>
+
+<template>
+    <div
+        role="group"
+        data-slot="button-group"
+        :data-orientation="props.orientation"
+        :class="cn(buttonGroupVariants({ orientation: props.orientation }), props.class)">
+        <slot />
+    </div>
+</template>

src/components/ui/button-group/ButtonGroupSeparator.vue

@@ -0,0 +1,22 @@
+<script setup>
+    import { Separator } from '@/components/ui/separator';
+    import { cn } from '@/lib/utils';
+    import { reactiveOmit } from '@vueuse/core';
+
+    const props = defineProps({
+        orientation: { type: String, required: false, default: 'vertical' },
+        decorative: { type: Boolean, required: false },
+        asChild: { type: Boolean, required: false },
+        as: { type: null, required: false },
+        class: { type: null, required: false }
+    });
+    const delegatedProps = reactiveOmit(props, 'class');
+</script>
+
+<template>
+    <Separator
+        data-slot="button-group-separator"
+        v-bind="delegatedProps"
+        :orientation="props.orientation"
+        :class="cn('bg-input relative !m-0 self-stretch data-[orientation=vertical]:h-auto', props.class)" />
+</template>

src/components/ui/button-group/ButtonGroupText.vue

@@ -0,0 +1,28 @@
+<script setup>
+    import { Primitive } from 'reka-ui';
+    import { cn } from '@/lib/utils';
+
+    const props = defineProps({
+        class: { type: null, required: false },
+        orientation: { type: null, required: false },
+        asChild: { type: Boolean, required: false },
+        as: { type: null, required: false, default: 'div' }
+    });
+</script>
+
+<template>
+    <Primitive
+        role="group"
+        data-slot="button-group"
+        :data-orientation="props.orientation"
+        :as="as"
+        :as-child="asChild"
+        :class="
+            cn(
+                'bg-muted flex items-center gap-2 rounded-md border px-4 text-sm font-medium shadow-xs [&_svg]:pointer-events-none [&_svg:not([class*=\'size-\'])]:size-4',
+                props.class
+            )
+        ">
+        <slot />
+    </Primitive>
+</template>

src/components/ui/button-group/index.js

@@ -0,0 +1,22 @@
+import { cva } from 'class-variance-authority';
+
+export { default as ButtonGroup } from './ButtonGroup.vue';
+export { default as ButtonGroupSeparator } from './ButtonGroupSeparator.vue';
+export { default as ButtonGroupText } from './ButtonGroupText.vue';
+
+export const buttonGroupVariants = cva(
+    "flex w-fit items-stretch [&>*]:focus-visible:z-10 [&>*]:focus-visible:relative [&>[data-slot=select-trigger]:not([class*='w-'])]:w-fit [&>input]:flex-1 has-[select[aria-hidden=true]:last-child]:[&>[data-slot=select-trigger]:last-of-type]:rounded-r-md has-[>[data-slot=button-group]]:gap-2",
+    {
+        variants: {
+            orientation: {
+                horizontal:
+                    '[&>*:not(:first-child)]:rounded-l-none [&>*:not(:first-child)]:border-l-0 [&>*:not(:last-child)]:rounded-r-none',
+                vertical:
+                    'flex-col [&>*:not(:first-child)]:rounded-t-none [&>*:not(:first-child)]:border-t-0 [&>*:not(:last-child)]:rounded-b-none'
+            }
+        },
+        defaultVariants: {
+            orientation: 'horizontal'
+        }
+    }
+);

src/components/ui/separator/Separator.vue

@@ -0,0 +1,27 @@
+<script setup>
+    import { Separator } from 'reka-ui';
+    import { cn } from '@/lib/utils';
+    import { reactiveOmit } from '@vueuse/core';
+
+    const props = defineProps({
+        orientation: { type: String, required: false, default: 'horizontal' },
+        decorative: { type: Boolean, required: false, default: true },
+        asChild: { type: Boolean, required: false },
+        as: { type: null, required: false },
+        class: { type: null, required: false }
+    });
+
+    const delegatedProps = reactiveOmit(props, 'class');
+</script>
+
+<template>
+    <Separator
+        data-slot="separator"
+        v-bind="delegatedProps"
+        :class="
+            cn(
+                'bg-border shrink-0 data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px',
+                props.class
+            )
+        " />
+</template>

src/components/ui/separator/index.js

@@ -0,0 +1 @@
+export { default as Separator } from './Separator.vue';