replace el-input with InputGroup

This commit is contained in:
pa
2026-01-12 20:09:58 +09:00
committed by Natsumi
parent 4749e8cb56
commit 065870a7f8
67 changed files with 707 additions and 366 deletions

View File

@@ -7,7 +7,13 @@
@close="closeDialog">
<div style="font-size: 12px">
<span>{{ t('dialog.edit_invite_message.description') }}</span>
<InputGroupCharCount v-model="message" :maxlength="64" multiline rows="2" class="mt-2.5" placeholder="" />
<InputGroupTextareaField
v-model="message"
:maxlength="64"
:rows="2"
class="mt-2.5"
placeholder=""
show-count />
</div>
<template #footer>
<Button variant="secondary" class="mr-2" @click="closeDialog">{{
@@ -21,7 +27,7 @@
<script setup>
import { ref, watch } from 'vue';
import { Button } from '@/components/ui/button';
import { InputGroupCharCount } from '@/components/ui/input-group';
import { InputGroupTextareaField } from '@/components/ui/input-group';
import { toast } from 'vue-sonner';
import { useI18n } from 'vue-i18n';

View File

@@ -1,14 +1,12 @@
<template>
<el-dialog v-model="isVisible" :title="t('dialog.export_own_avatars.header')" width="650px">
<el-input
<InputGroupTextareaField
v-model="exportAvatarsListCsv"
v-loading="loading"
type="textarea"
size="small"
:rows="15"
resize="none"
readonly
style="margin-top: 15px"
input-class="resize-none"
@click="$event.target.tagName === 'TEXTAREA' && $event.target.select()" />
</el-dialog>
</template>
@@ -16,6 +14,7 @@
<script setup>
import { computed, ref, watch } from 'vue';
import { storeToRefs } from 'pinia';
import { InputGroupTextareaField } from '@/components/ui/input-group';
import { useI18n } from 'vue-i18n';
import { useAvatarStore, useUserStore } from '../../../stores';

View File

@@ -8,20 +8,19 @@
<div style="font-size: 12px">
{{ t('dialog.discord_names.description') }}
</div>
<el-input
<InputGroupTextareaField
v-model="discordNamesContent"
type="textarea"
size="small"
:rows="15"
resize="none"
readonly
style="margin-top: 15px" />
style="margin-top: 15px"
input-class="resize-none" />
</el-dialog>
</template>
<script setup>
import { ref, watch } from 'vue';
import { storeToRefs } from 'pinia';
import { InputGroupTextareaField } from '@/components/ui/input-group';
import { useI18n } from 'vue-i18n';
import { useUserStore } from '../../../stores';

View File

@@ -2,25 +2,21 @@
<el-dialog :title="t('dialog.export_friends_list.header')" v-model="isVisible" width="650px">
<el-tabs>
<el-tab-pane :label="t('dialog.export_friends_list.csv')">
<el-input
<InputGroupTextareaField
v-model="exportFriendsListCsv"
type="textarea"
size="small"
:rows="15"
resize="none"
readonly
style="margin-top: 15px"
input-class="resize-none"
@click="$event.target.tagName === 'TEXTAREA' && $event.target.select()" />
</el-tab-pane>
<el-tab-pane :label="t('dialog.export_friends_list.json')">
<el-input
<InputGroupTextareaField
v-model="exportFriendsListJson"
type="textarea"
size="small"
:rows="15"
resize="none"
readonly
style="margin-top: 15px"
input-class="resize-none"
@click="$event.target.tagName === 'TEXTAREA' && $event.target.select()" />
</el-tab-pane>
</el-tabs>
@@ -30,6 +26,7 @@
<script setup>
import { computed, ref, watch } from 'vue';
import { storeToRefs } from 'pinia';
import { InputGroupTextareaField } from '@/components/ui/input-group';
import { useI18n } from 'vue-i18n';
import { useUserStore } from '../../../stores';

View File

@@ -76,12 +76,10 @@
</div>
<div v-else key="grid" class="grid-view">
<div class="search-container">
<el-input
<InputGroupSearch
v-model="searchQuery"
size="sm"
:placeholder="t('dialog.group_calendar.search_placeholder')"
clearable
size="small"
prefix-:icon="Search"
class="search-input" />
</div>
@@ -127,6 +125,7 @@
import { computed, onMounted, ref, watch } from 'vue';
import { ArrowRight } from '@element-plus/icons-vue';
import { Button } from '@/components/ui/button';
import { InputGroupSearch } from '@/components/ui/input-group';
import { useI18n } from 'vue-i18n';
import dayjs from 'dayjs';

View File

@@ -70,12 +70,12 @@
<el-table-column :label="t('table.import.note')" prop="memo">
<template #default="{ row }">
<InputGroupCharCount
<InputGroupTextareaField
v-model="row.memo"
:maxlength="256"
multiline
rows="2"
input-class="min-h-0 py-1 resize-none" />
:rows="2"
input-class="min-h-0 py-1 resize-none"
show-count />
</template>
</el-table-column>
@@ -91,7 +91,7 @@
<script setup>
import { ref, watch } from 'vue';
import { Button } from '@/components/ui/button';
import { InputGroupCharCount } from '@/components/ui/input-group';
import { InputGroupTextareaField } from '@/components/ui/input-group';
import { Loading } from '@element-plus/icons-vue';
import { storeToRefs } from 'pinia';
import { useI18n } from 'vue-i18n';

View File

@@ -56,10 +56,9 @@
<div class="flex items-center">
<!-- Search bar input -->
<el-input
<InputGroupSearch
v-model="screenshotMetadataDialog.search"
placeholder="Search"
clearable
style="width: 200px"
@input="screenshotMetadataSearch" />
<!-- Search type dropdown -->
@@ -167,6 +166,7 @@
import { Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious } from '@/components/ui/carousel';
import { reactive, ref, watch } from 'vue';
import { Button } from '@/components/ui/button';
import { InputGroupSearch } from '@/components/ui/input-group';
import { storeToRefs } from 'pinia';
import { toast } from 'vue-sonner';
import { useI18n } from 'vue-i18n';