replace el-dropdown

2026-04-18 22:33:50 +02:00 · 2026-01-08 22:41:05 +09:00
parent 3d37cebefc
commit 4eabeb11e0
21 changed files with 799 additions and 683 deletions
--- a/src/components/dialogs/LaunchDialog.vue
+++ b/src/components/dialogs/LaunchDialog.vue
@@ -54,64 +54,60 @@
            </el-form-item>
        </el-form>
        <template #footer>
-            <el-button
-                :disabled="!checkCanInvite(launchDialog.location)"
-                @click="showInviteDialog(launchDialog.location)">
-                {{ t('dialog.launch.invite') }}
-            </el-button>
-            <template v-if="canOpenInstanceInGame">
-                <el-button
+            <div class="flex justify-end">
+                <Button
+                    class="mr-1.5"
+                    variant="outline"
+                    :disabled="!checkCanInvite(launchDialog.location)"
+                    @click="showInviteDialog(launchDialog.location)">
+                    {{ t('dialog.launch.invite') }}
+                </Button>
+                <Button
+                    v-if="canOpenInstanceInGame"
+                    variant="outline"
                    :disabled="!launchDialog.secureOrShortName"
                    @click="handleAttachGame(launchDialog.location, launchDialog.shortName)">
                    {{ t('dialog.launch.open_ingame') }}
-                </el-button>
-                <el-dropdown
-                    split-button
-                    type="primary"
-                    :disabled="!launchDialog.secureOrShortName"
-                    @click="handleLaunchDefault(launchDialog.location, launchDialog.shortName)"
-                    @command="(cmd) => handleLaunchCommand(cmd, launchDialog.location, launchDialog.shortName)">
-                    {{ launchModeLabel }}
-                    <template #dropdown>
-                        <el-dropdown-menu>
-                            <el-dropdown-item :command="launchDialog.desktop ? 'vr' : 'desktop'">
-                                {{
-                                    launchDialog.desktop
-                                        ? t('dialog.launch.launch')
-                                        : t('dialog.launch.start_as_desktop')
-                                }}
-                            </el-dropdown-item>
-                        </el-dropdown-menu>
-                    </template>
-                </el-dropdown>
-            </template>
-            <template v-else>
-                <el-button
+                </Button>
+                <Button
+                    v-else
+                    variant="outline"
                    class="mr-1.25"
                    :disabled="!launchDialog.secureOrShortName"
                    @click="selfInvite(launchDialog.location, launchDialog.shortName)">
                    {{ t('dialog.launch.self_invite') }}
-                </el-button>
-                <el-dropdown
-                    split-button
-                    type="primary"
-                    :disabled="!launchDialog.secureOrShortName"
-                    @click="handleLaunchDefault(launchDialog.location, launchDialog.shortName)"
-                    @command="(cmd) => handleLaunchCommand(cmd, launchDialog.location, launchDialog.shortName)">
-                    {{ launchModeLabel }}
-                    <template #dropdown>
-                        <el-dropdown-menu>
-                            <el-dropdown-item :command="launchDialog.desktop ? 'vr' : 'desktop'">
+                </Button>
+                <ButtonGroup>
+                    <Button
+                        :disabled="!launchDialog.secureOrShortName"
+                        @click="handleLaunchDefault(launchDialog.location, launchDialog.shortName)">
+                        {{ launchModeLabel }}
+                    </Button>
+                    <DropdownMenu>
+                        <DropdownMenuTrigger as-child>
+                            <Button size="icon" :disabled="!launchDialog.secureOrShortName" aria-label="More options">
+                                <MoreHorizontal class="size-4" />
+                            </Button>
+                        </DropdownMenuTrigger>
+                        <DropdownMenuContent align="end" class="w-52">
+                            <DropdownMenuItem
+                                @click="
+                                    handleLaunchCommand(
+                                        launchDialog.desktop ? 'vr' : 'desktop',
+                                        launchDialog.location,
+                                        launchDialog.shortName
+                                    )
+                                ">
                                {{
                                    launchDialog.desktop
                                        ? t('dialog.launch.launch')
                                        : t('dialog.launch.start_as_desktop')
                                }}
-                            </el-dropdown-item>
-                        </el-dropdown-menu>
-                    </template>
-                </el-dropdown>
-            </template>
+                            </DropdownMenuItem>
+                        </DropdownMenuContent>
+                    </DropdownMenu>
+                </ButtonGroup>
+            </div>
        </template>
        <InviteDialog :invite-dialog="inviteDialog" @closeInviteDialog="closeInviteDialog" />
    </el-dialog>
@@ -119,8 +115,17 @@

 <script setup>
    import { computed, nextTick, onBeforeUnmount, ref, watch } from 'vue';
+    import {
+        DropdownMenu,
+        DropdownMenuContent,
+        DropdownMenuItem,
+        DropdownMenuTrigger
+    } from '@/components/ui/dropdown-menu';
    import { CopyDocument, Warning } from '@element-plus/icons-vue';
+    import { Button } from '@/components/ui/button';
+    import { ButtonGroup } from '@/components/ui/button-group';
    import { ElMessageBox } from 'element-plus';
+    import { MoreHorizontal } from 'lucide-vue-next';
    import { storeToRefs } from 'pinia';
    import { toast } from 'vue-sonner';
    import { useI18n } from 'vue-i18n';
--- a/src/components/ui/button-group/ButtonGroup.vue
+++ b/src/components/ui/button-group/ButtonGroup.vue
@@ -1,12 +1,12 @@
 <script setup>
-    import { cn } from '@/lib/utils';
+import { cn } from '@/lib/utils';

-    import { buttonGroupVariants } from '.';
+import { buttonGroupVariants } from '.';

-    const props = defineProps({
-        class: { type: null, required: false },
-        orientation: { type: null, required: false }
-    });
+const props = defineProps({
+    class: { type: null, required: false },
+    orientation: { type: null, required: false }
+});
 </script>

 <template>
--- a/src/components/ui/button-group/ButtonGroupSeparator.vue
+++ b/src/components/ui/button-group/ButtonGroupSeparator.vue
@@ -1,16 +1,16 @@
 <script setup>
-    import { Separator } from '@/components/ui/separator';
-    import { cn } from '@/lib/utils';
-    import { reactiveOmit } from '@vueuse/core';
+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');
+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>
--- a/src/components/ui/button-group/ButtonGroupText.vue
+++ b/src/components/ui/button-group/ButtonGroupText.vue
@@ -1,13 +1,13 @@
 <script setup>
-    import { Primitive } from 'reka-ui';
-    import { cn } from '@/lib/utils';
+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' }
-    });
+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>
--- a/src/components/ui/select/Select.vue
+++ b/src/components/ui/select/Select.vue
@@ -1,26 +1,26 @@
 <script setup>
-import { SelectRoot, useForwardPropsEmits } from "reka-ui";
+    import { SelectRoot, useForwardPropsEmits } from 'reka-ui';

-const props = defineProps({
-  open: { type: Boolean, required: false },
-  defaultOpen: { type: Boolean, required: false },
-  defaultValue: { type: null, required: false },
-  modelValue: { type: null, required: false },
-  by: { type: [String, Function], required: false },
-  dir: { type: String, required: false },
-  multiple: { type: Boolean, required: false },
-  autocomplete: { type: String, required: false },
-  disabled: { type: Boolean, required: false },
-  name: { type: String, required: false },
-  required: { type: Boolean, required: false },
-});
-const emits = defineEmits(["update:modelValue", "update:open"]);
+    const props = defineProps({
+        open: { type: Boolean, required: false },
+        defaultOpen: { type: Boolean, required: false },
+        defaultValue: { type: null, required: false },
+        modelValue: { type: null, required: false },
+        by: { type: [String, Function], required: false },
+        dir: { type: String, required: false },
+        multiple: { type: Boolean, required: false },
+        autocomplete: { type: String, required: false },
+        disabled: { type: Boolean, required: false },
+        name: { type: String, required: false },
+        required: { type: Boolean, required: false }
+    });
+    const emits = defineEmits(['update:modelValue', 'update:open']);

-const forwarded = useForwardPropsEmits(props, emits);
+    const forwarded = useForwardPropsEmits(props, emits);
 </script>

 <template>
-  <SelectRoot v-slot="slotProps" data-slot="select" v-bind="forwarded">
-    <slot v-bind="slotProps" />
-  </SelectRoot>
+    <SelectRoot v-slot="slotProps" data-slot="select" v-bind="forwarded">
+        <slot v-bind="slotProps" />
+    </SelectRoot>
 </template>
--- a/src/components/ui/select/SelectContent.vue
+++ b/src/components/ui/select/SelectContent.vue
@@ -1,82 +1,72 @@
 <script setup>
-import { reactiveOmit } from "@vueuse/core";
-import {
-  SelectContent,
-  SelectPortal,
-  SelectViewport,
-  useForwardPropsEmits,
-} from "reka-ui";
-import { cn } from "@/lib/utils";
-import { SelectScrollDownButton, SelectScrollUpButton } from ".";
+    import { SelectContent, SelectPortal, SelectViewport, useForwardPropsEmits } from 'reka-ui';
+    import { cn } from '@/lib/utils';
+    import { reactiveOmit } from '@vueuse/core';

-defineOptions({
-  inheritAttrs: false,
-});
+    import { SelectScrollDownButton, SelectScrollUpButton } from '.';

-const props = defineProps({
-  forceMount: { type: Boolean, required: false },
-  position: { type: String, required: false, default: "popper" },
-  bodyLock: { type: Boolean, required: false },
-  side: { type: null, required: false },
-  sideOffset: { type: Number, required: false },
-  sideFlip: { type: Boolean, required: false },
-  align: { type: null, required: false },
-  alignOffset: { type: Number, required: false },
-  alignFlip: { type: Boolean, required: false },
-  avoidCollisions: { type: Boolean, required: false },
-  collisionBoundary: { type: null, required: false },
-  collisionPadding: { type: [Number, Object], required: false },
-  arrowPadding: { type: Number, required: false },
-  sticky: { type: String, required: false },
-  hideWhenDetached: { type: Boolean, required: false },
-  positionStrategy: { type: String, required: false },
-  updatePositionStrategy: { type: String, required: false },
-  disableUpdateOnLayoutShift: { type: Boolean, required: false },
-  prioritizePosition: { type: Boolean, required: false },
-  reference: { type: null, required: false },
-  asChild: { type: Boolean, required: false },
-  as: { type: null, required: false },
-  disableOutsidePointerEvents: { type: Boolean, required: false },
-  class: { type: null, required: false },
-});
-const emits = defineEmits([
-  "closeAutoFocus",
-  "escapeKeyDown",
-  "pointerDownOutside",
-]);
+    defineOptions({
+        inheritAttrs: false
+    });

-const delegatedProps = reactiveOmit(props, "class");
+    const props = defineProps({
+        forceMount: { type: Boolean, required: false },
+        position: { type: String, required: false, default: 'popper' },
+        bodyLock: { type: Boolean, required: false },
+        side: { type: null, required: false },
+        sideOffset: { type: Number, required: false },
+        sideFlip: { type: Boolean, required: false },
+        align: { type: null, required: false },
+        alignOffset: { type: Number, required: false },
+        alignFlip: { type: Boolean, required: false },
+        avoidCollisions: { type: Boolean, required: false },
+        collisionBoundary: { type: null, required: false },
+        collisionPadding: { type: [Number, Object], required: false },
+        arrowPadding: { type: Number, required: false },
+        sticky: { type: String, required: false },
+        hideWhenDetached: { type: Boolean, required: false },
+        positionStrategy: { type: String, required: false },
+        updatePositionStrategy: { type: String, required: false },
+        disableUpdateOnLayoutShift: { type: Boolean, required: false },
+        prioritizePosition: { type: Boolean, required: false },
+        reference: { type: null, required: false },
+        asChild: { type: Boolean, required: false },
+        as: { type: null, required: false },
+        disableOutsidePointerEvents: { type: Boolean, required: false },
+        class: { type: null, required: false }
+    });
+    const emits = defineEmits(['closeAutoFocus', 'escapeKeyDown', 'pointerDownOutside']);

-const forwarded = useForwardPropsEmits(delegatedProps, emits);
+    const delegatedProps = reactiveOmit(props, 'class');
+
+    const forwarded = useForwardPropsEmits(delegatedProps, emits);
 </script>

 <template>
-  <SelectPortal>
-    <SelectContent
-      data-slot="select-content"
-      v-bind="{ ...$attrs, ...forwarded }"
-      :class="
-        cn(
-          'bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 relative z-50 max-h-(--reka-select-content-available-height) min-w-[8rem] overflow-x-hidden overflow-y-auto rounded-md border shadow-md',
-          position === 'popper' &&
-            'data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1',
-          props.class,
-        )
-      "
-    >
-      <SelectScrollUpButton />
-      <SelectViewport
-        :class="
-          cn(
-            'p-1',
-            position === 'popper' &&
-              'h-[var(--reka-select-trigger-height)] w-full min-w-[var(--reka-select-trigger-width)] scroll-my-1',
-          )
-        "
-      >
-        <slot />
-      </SelectViewport>
-      <SelectScrollDownButton />
-    </SelectContent>
-  </SelectPortal>
+    <SelectPortal>
+        <SelectContent
+            data-slot="select-content"
+            v-bind="{ ...$attrs, ...forwarded }"
+            :class="
+                cn(
+                    'bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 relative z-10000 max-h-(--reka-select-content-available-height) min-w-[8rem] overflow-x-hidden overflow-y-auto rounded-md border shadow-md',
+                    position === 'popper' &&
+                        'data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1',
+                    props.class
+                )
+            ">
+            <SelectScrollUpButton />
+            <SelectViewport
+                :class="
+                    cn(
+                        'p-1',
+                        position === 'popper' &&
+                            'h-[var(--reka-select-trigger-height)] w-full min-w-[var(--reka-select-trigger-width)] scroll-my-1'
+                    )
+                ">
+                <slot />
+            </SelectViewport>
+            <SelectScrollDownButton />
+        </SelectContent>
+    </SelectPortal>
 </template>
--- a/src/components/ui/select/SelectTrigger.vue
+++ b/src/components/ui/select/SelectTrigger.vue
@@ -1,20 +1,20 @@
 <script setup>
-    import { SelectIcon, SelectTrigger, useForwardProps } from 'reka-ui';
-    import { ChevronDown } from 'lucide-vue-next';
-    import { cn } from '@/lib/utils';
-    import { reactiveOmit } from '@vueuse/core';
+import { SelectIcon, SelectTrigger, useForwardProps } from 'reka-ui';
+import { ChevronDown } from 'lucide-vue-next';
+import { cn } from '@/lib/utils';
+import { reactiveOmit } from '@vueuse/core';

-    const props = defineProps({
-        disabled: { type: Boolean, required: false },
-        reference: { type: null, required: false },
-        asChild: { type: Boolean, required: false },
-        as: { type: null, required: false },
-        class: { type: null, required: false },
-        size: { type: String, required: false, default: 'default' }
-    });
+const props = defineProps({
+    disabled: { type: Boolean, required: false },
+    reference: { type: null, required: false },
+    asChild: { type: Boolean, required: false },
+    as: { type: null, required: false },
+    class: { type: null, required: false },
+    size: { type: String, required: false, default: 'default' }
+});

-    const delegatedProps = reactiveOmit(props, 'class', 'size');
-    const forwardedProps = useForwardProps(delegatedProps);
+const delegatedProps = reactiveOmit(props, 'class', 'size');
+const forwardedProps = useForwardProps(delegatedProps);
 </script>

 <template>
--- a/src/components/ui/separator/Separator.vue
+++ b/src/components/ui/separator/Separator.vue
@@ -1,17 +1,17 @@
 <script setup>
-    import { Separator } from 'reka-ui';
-    import { cn } from '@/lib/utils';
-    import { reactiveOmit } from '@vueuse/core';
+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 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');
+const delegatedProps = reactiveOmit(props, 'class');
 </script>

 <template>