replace el-button-group with ToggleGroup

src/components/ui/toggle/Toggle.vue

@@ -0,0 +1,35 @@
+<script setup>
+    import { Toggle, useForwardPropsEmits } from 'reka-ui';
+    import { cn } from '@/lib/utils';
+    import { reactiveOmit } from '@vueuse/core';
+
+    import { toggleVariants } from '.';
+
+    const props = defineProps({
+        defaultValue: { type: Boolean, required: false },
+        modelValue: { type: [Boolean, null], required: false },
+        disabled: { type: Boolean, required: false, default: false },
+        asChild: { type: Boolean, required: false },
+        as: { type: null, required: false },
+        name: { type: String, required: false },
+        required: { type: Boolean, required: false },
+        class: { type: null, required: false },
+        variant: { type: null, required: false, default: 'default' },
+        size: { type: null, required: false, default: 'default' }
+    });
+
+    const emits = defineEmits(['update:modelValue']);
+
+    const delegatedProps = reactiveOmit(props, 'class', 'size', 'variant');
+    const forwarded = useForwardPropsEmits(delegatedProps, emits);
+</script>
+
+<template>
+    <Toggle
+        v-slot="slotProps"
+        data-slot="toggle"
+        v-bind="forwarded"
+        :class="cn(toggleVariants({ variant, size }), props.class)">
+        <slot v-bind="slotProps" />
+    </Toggle>
+</template>

src/components/ui/toggle/index.js

@@ -0,0 +1,25 @@
+import { cva } from 'class-variance-authority';
+
+export { default as Toggle } from './Toggle.vue';
+
+export const toggleVariants = cva(
+    "inline-flex items-center justify-center gap-2 rounded-md text-sm font-medium hover:bg-muted hover:text-muted-foreground disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 [&_svg]:shrink-0 focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] outline-none transition-[color,box-shadow] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive whitespace-nowrap",
+    {
+        variants: {
+            variant: {
+                default: 'bg-transparent',
+                outline:
+                    'border border-input bg-transparent shadow-xs hover:bg-accent hover:text-accent-foreground'
+            },
+            size: {
+                default: 'h-9 px-2 min-w-9',
+                sm: 'h-8 px-1.5 min-w-8',
+                lg: 'h-10 px-2.5 min-w-10'
+            }
+        },
+        defaultVariants: {
+            variant: 'default',
+            size: 'default'
+        }
+    }
+);