replace el-input with InputGroup

2026-04-23 08:43:50 +02:00 · 2026-01-12 20:09:58 +09:00
parent 4749e8cb56
commit 065870a7f8
67 changed files with 707 additions and 366 deletions
--- a/src/views/Settings/components/Tabs/NotificationsTab.vue
+++ b/src/views/Settings/components/Tabs/NotificationsTab.vue
@@ -256,12 +256,12 @@
                :value="isTestTTSVisible"
                @change="isTestTTSVisible = !isTestTTSVisible" />
            <div v-if="isTestTTSVisible" style="margin-top: 5px">
-                <el-input
+                <InputGroupTextareaField
                    v-model="notificationTTSTest"
-                    type="textarea"
                    :placeholder="t('view.settings.notifications.notifications.text_to_speech.tts_test_placeholder')"
                    :rows="1"
-                    style="width: 175px; display: inline-block"></el-input>
+                    style="width: 175px; display: inline-block"
+                    input-class="resize-none min-h-0" />
                <Button size="sm" variant="outline" style="margin-left: 10px" @click="testNotificationTTS">{{
                    t('view.settings.notifications.notifications.text_to_speech.play')
                }}</Button>
@@ -276,6 +276,7 @@
    import { Select, SelectContent, SelectGroup, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
    import { computed, ref } from 'vue';
    import { Button } from '@/components/ui/button';
+    import { InputGroupTextareaField } from '@/components/ui/input-group';
    import { storeToRefs } from 'pinia';
    import { useI18n } from 'vue-i18n';

--- a/src/views/Settings/dialogs/AvatarProviderDialog.vue
+++ b/src/views/Settings/dialogs/AvatarProviderDialog.vue
@@ -6,15 +6,19 @@
        width="600px"
        @close="closeDialog">
        <div>
-            <el-input
+            <InputGroupAction
                v-for="(provider, index) in avatarRemoteDatabaseProviderList"
                :key="index"
                v-model="avatarRemoteDatabaseProviderList[index]"
-                size="small"
+                size="sm"
                style="margin-top: 5px"
                @change="saveAvatarProviderList">
-                <Button variant="outline" size="icon" @click="removeAvatarProvider(provider)"><Trash2 /></Button>
-            </el-input>
+                <template #actions>
+                    <Button variant="outline" size="icon" @click="removeAvatarProvider(provider)">
+                        <Trash2 />
+                    </Button>
+                </template>
+            </InputGroupAction>

            <Button size="sm" style="margin-top: 5px" @click="avatarRemoteDatabaseProviderList.push('')">
                {{ t('dialog.avatar_database_provider.add_provider') }}
@@ -25,6 +29,7 @@

 <script setup>
    import { Button } from '@/components/ui/button';
+    import { InputGroupAction } from '@/components/ui/input-group';
    import { Trash2 } from 'lucide-vue-next';
    import { storeToRefs } from 'pinia';
    import { useI18n } from 'vue-i18n';
--- a/src/views/Settings/dialogs/LaunchOptionsDialog.vue
+++ b/src/views/Settings/dialogs/LaunchOptionsDialog.vue
@@ -13,28 +13,25 @@
            </Badge>
        </div>

-        <el-input
+        <InputGroupTextareaField
            v-model="launchOptionsDialog.launchArguments"
-            type="textarea"
-            size="small"
-            show-word-limit
            :autosize="{ minRows: 2, maxRows: 5 }"
+            :rows="2"
            placeholder=""
-            style="margin-top: 10px">
-        </el-input>
+            style="margin-top: 10px"
+            input-class="resize-none" />

        <template v-if="!isLinux">
            <div style="font-size: 12px; margin-top: 10px">
                {{ t('dialog.launch_options.path_override') }}
            </div>

-            <el-input
+            <InputGroupTextareaField
                v-model="launchOptionsDialog.vrcLaunchPathOverride"
-                type="textarea"
                placeholder="C:\Program Files (x86)\Steam\steamapps\common\VRChat"
                :rows="1"
-                style="display: block; margin-top: 10px">
-            </el-input>
+                style="display: block; margin-top: 10px"
+                input-class="resize-none min-h-0" />
        </template>

        <template #footer>
@@ -63,6 +60,7 @@
 <script setup>
    import { computed, ref } from 'vue';
    import { Button } from '@/components/ui/button';
+    import { InputGroupTextareaField } from '@/components/ui/input-group';
    import { storeToRefs } from 'pinia';
    import { toast } from 'vue-sonner';
    import { useI18n } from 'vue-i18n';
--- a/src/views/Settings/dialogs/PrimaryPasswordDialog.vue
+++ b/src/views/Settings/dialogs/PrimaryPasswordDialog.vue
@@ -6,24 +6,22 @@
        :close-on-click-modal="false"
        :title="t('dialog.primary_password.header')"
        width="400px">
-        <el-input
+        <InputGroupField
            v-model="enablePrimaryPasswordDialog.password"
            :placeholder="t('dialog.primary_password.password_placeholder')"
            type="password"
-            size="small"
+            size="sm"
            maxlength="32"
            show-password
-            autofocus>
-        </el-input>
-        <el-input
+            autofocus />
+        <InputGroupField
            v-model="enablePrimaryPasswordDialog.rePassword"
            :placeholder="t('dialog.primary_password.re_input_placeholder')"
            type="password"
            style="margin-top: 5px"
-            size="small"
+            size="sm"
            maxlength="32"
-            show-password>
-        </el-input>
+            show-password />
        <template #footer>
            <Button
                :disabled="
@@ -39,6 +37,7 @@

 <script setup>
    import { Button } from '@/components/ui/button';
+    import { InputGroupField } from '@/components/ui/input-group';
    import { storeToRefs } from 'pinia';
    import { useI18n } from 'vue-i18n';

--- a/src/views/Settings/dialogs/TranslationApiDialog.vue
+++ b/src/views/Settings/dialogs/TranslationApiDialog.vue
@@ -44,10 +44,9 @@
        <template v-if="form.translationApiType === 'google'">
            <el-form label-position="top" label-width="120px" size="small">
                <el-form-item :label="t('dialog.translation_api.description')">
-                    <el-input
+                    <InputGroupField
                        v-model="form.translationApiKey"
-                        type="textarea"
-                        :rows="4"
+                        type="password"
                        show-password
                        placeholder="AIzaSy..."
                        clearable />
@@ -58,29 +57,27 @@
        <template v-if="form.translationApiType === 'openai'">
            <el-form label-position="top" label-width="120px" size="small">
                <el-form-item :label="t('dialog.translation_api.openai.endpoint')">
-                    <el-input
+                    <InputGroupField
                        v-model="form.translationApiEndpoint"
                        placeholder="https://api.openai.com/v1/chat/completions"
-                        clearable
-                        textarea />
+                        clearable />
                </el-form-item>

                <el-form-item :label="t('dialog.translation_api.openai.api_key')">
-                    <el-input
+                    <InputGroupField
                        v-model="form.translationApiKey"
-                        type="textarea"
-                        :rows="4"
+                        type="password"
                        show-password
                        placeholder="sk-..."
                        clearable />
                </el-form-item>

                <el-form-item :label="t('dialog.translation_api.openai.model')">
-                    <el-input v-model="form.translationApiModel" clearable />
+                    <InputGroupField v-model="form.translationApiModel" clearable />
                </el-form-item>

                <el-form-item :label="t('dialog.translation_api.openai.prompt_optional')">
-                    <el-input v-model="form.translationApiPrompt" type="textarea" :rows="3" clearable />
+                    <InputGroupTextareaField v-model="form.translationApiPrompt" :rows="3" clearable />
                </el-form-item>
            </el-form>
        </template>
@@ -118,6 +115,7 @@
    import { Select, SelectContent, SelectGroup, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
    import { reactive, watch } from 'vue';
    import { Button } from '@/components/ui/button';
+    import { InputGroupField, InputGroupTextareaField } from '@/components/ui/input-group';
    import { storeToRefs } from 'pinia';
    import { toast } from 'vue-sonner';
    import { useI18n } from 'vue-i18n';
--- a/src/views/Settings/dialogs/VRChatConfigDialog.vue
+++ b/src/views/Settings/dialogs/VRChatConfigDialog.vue
@@ -46,23 +46,24 @@
            <div v-for="(item, value) in VRChatConfigList" :key="value" style="display: block; margin-top: 10px">
                <span style="word-break: keep-all">{{ item.name }}:</span>
                <div style="display: flex">
-                    <el-input
+                    <InputGroupAction
                        v-model="VRChatConfigFile[value]"
                        :placeholder="item.default"
-                        size="small"
+                        size="sm"
                        :type="item.type ? item.type : 'text'"
                        :min="item.min"
                        :max="item.max"
                        @input="refreshDialogValues"
                        style="flex: 1; margin-top: 5px">
-                        <template #append>
+                        <template #actions>
                            <Button
                                size="sm"
                                variant="outline"
                                v-if="item.folderBrowser"
-                                @click="openConfigFolderBrowser(value)"></Button>
+                                @click="openConfigFolderBrowser(value)">
+                            </Button>
                        </template>
-                    </el-input>
+                    </InputGroupAction>
                </div>
            </div>

@@ -172,6 +173,7 @@
    import { Select, SelectContent, SelectGroup, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
    import { computed, ref, watch } from 'vue';
    import { Button } from '@/components/ui/button';
+    import { InputGroupAction } from '@/components/ui/input-group';
    import { Checkbox } from '@/components/ui/checkbox';
    import { ElMessageBox } from 'element-plus';
    import { Refresh } from '@element-plus/icons-vue';
--- a/src/views/Settings/dialogs/YouTubeApiDialog.vue
+++ b/src/views/Settings/dialogs/YouTubeApiDialog.vue
@@ -7,13 +7,13 @@
        @close="closeDialog">
        <div style="font-size: 12px">{{ t('dialog.youtube_api.description') }} <br /></div>

-        <InputGroupCharCount
+        <InputGroupTextareaField
            v-model="youTubeApiKey"
            :placeholder="t('dialog.youtube_api.placeholder')"
            :maxlength="39"
-            multiline
-            rows="2"
-            class="mt-2.5" />
+            :rows="2"
+            class="mt-2.5"
+            show-count />

        <template #footer>
            <div class="flex items-center justify-between">
@@ -30,7 +30,7 @@

 <script setup>
    import { Button } from '@/components/ui/button';
-    import { InputGroupCharCount } from '@/components/ui/input-group';
+    import { InputGroupTextareaField } from '@/components/ui/input-group';
    import { storeToRefs } from 'pinia';
    import { toast } from 'vue-sonner';
    import { useI18n } from 'vue-i18n';