replace el-input with InputGroup

src/components/dialogs/UserDialog/BioDialog.vue

@@ -6,25 +6,29 @@
         width="600px"
         append-to-body>
         <div v-loading="bioDialog.loading">
-            <InputGroupCharCount
+            <InputGroupTextareaField
                 v-model="bioDialog.bio"
                 :maxlength="512"
-                multiline
-                rows="5"
+                :rows="5"
                 :placeholder="t('dialog.bio.bio_placeholder')"
-                class="mb-2.5" />
+                class="mb-2.5"
+                show-count />
 
-            <el-input
+            <InputGroupAction
                 v-for="(link, index) in bioDialog.bioLinks"
                 :key="index"
                 v-model="bioDialog.bioLinks[index]"
-                size="small"
                 maxlength="64"
-                show-word-limit
+                show-count
+                size="sm"
                 style="margin-top: 5px">
-                <img :src="getFaviconUrl(link)" style="width: 16px; height: 16px; vertical-align: middle" />
-                <Button variant="outline" @click="bioDialog.bioLinks.splice(index, 1)" />
-            </el-input>
+                <template #leading>
+                    <img :src="getFaviconUrl(link)" style="width: 16px; height: 16px; vertical-align: middle" />
+                </template>
+                <template #actions>
+                    <Button variant="outline" @click="bioDialog.bioLinks.splice(index, 1)" />
+                </template>
+            </InputGroupAction>
 
             <Button
                 variant="outline"
@@ -46,8 +50,7 @@
 
 <script setup>
     import { Button } from '@/components/ui/button';
-    import { Delete } from '@element-plus/icons-vue';
-    import { InputGroupCharCount } from '@/components/ui/input-group';
+    import { InputGroupAction, InputGroupTextareaField } from '@/components/ui/input-group';
     import { toast } from 'vue-sonner';
     import { useI18n } from 'vue-i18n';
 

src/components/dialogs/UserDialog/EditNoteAndMemoDialog.vue

@@ -11,26 +11,24 @@
         <template v-if="!hideUserNotes || (hideUserNotes && hideUserMemos)">
             <span class="name">{{ t('dialog.user.info.note') }}</span>
             <br />
-            <InputGroupCharCount
+            <InputGroupTextareaField
                 v-model="note"
+                :autosize="{ minRows: 6, maxRows: 20 }"
                 :maxlength="256"
-                multiline
-                rows="6"
+                :rows="6"
                 :placeholder="t('dialog.user.info.note_placeholder')"
-                input-class="extra resize-none" />
+                input-class="extra resize-none"
+                show-count />
         </template>
         <template v-if="!hideUserMemos || (hideUserNotes && hideUserMemos)">
             <span class="name">{{ t('dialog.user.info.memo') }}</span>
             <br />
-            <el-input
+            <InputGroupTextareaField
                 v-model="memo"
                 class="extra"
-                type="textarea"
                 :rows="6"
-                :autosize="{ minRows: 2, maxRows: 20 }"
                 :placeholder="t('dialog.user.info.memo_placeholder')"
-                size="small"
-                resize="none"></el-input>
+                input-class="resize-none min-h-0" />
         </template>
         <template #footer>
             <div class="dialog-footer">
@@ -44,7 +42,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 { storeToRefs } from 'pinia';
     import { useI18n } from 'vue-i18n';
 

src/components/dialogs/UserDialog/PreviousInstancesUserDialog.vue

@@ -7,10 +7,10 @@
         append-to-body>
         <div style="display: flex; align-items: center; justify-content: space-between">
             <span style="font-size: 14px" v-text="previousInstancesUserDialog.userRef.displayName"></span>
-            <el-input
+            <InputGroupField
                 v-model="previousInstancesUserDialogTable.filters[0].value"
                 :placeholder="t('dialog.previous_instances.search_placeholder')"
-                style="display: block; width: 150px"></el-input>
+                style="display: block; width: 150px" />
         </div>
         <DataTable :loading="loading" v-bind="previousInstancesUserDialogTable" style="margin-top: 10px">
             <el-table-column :label="t('table.previous_instances.date')" prop="created_at" sortable width="170">
@@ -78,6 +78,7 @@
 <script setup>
     import { computed, nextTick, reactive, ref, watch } from 'vue';
     import { Button } from '@/components/ui/button';
+    import { InputGroupField } from '@/components/ui/input-group';
     import { ElMessageBox } from 'element-plus';
     import { storeToRefs } from 'pinia';
     import { useI18n } from 'vue-i18n';

src/components/dialogs/UserDialog/PronounsDialog.vue

@@ -6,12 +6,12 @@
         width="600px"
         append-to-body>
         <div v-loading="pronounsDialog.loading">
-            <InputGroupCharCount
+            <InputGroupTextareaField
                 v-model="pronounsDialog.pronouns"
                 :maxlength="32"
-                multiline
-                rows="2"
-                :placeholder="t('dialog.pronouns.pronouns_placeholder')" />
+                :rows="2"
+                :placeholder="t('dialog.pronouns.pronouns_placeholder')"
+                show-count />
         </div>
         <template #footer>
             <Button :disabled="pronounsDialog.loading" @click="savePronouns">
@@ -23,7 +23,7 @@
 
 <script setup>
     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';
 

src/components/dialogs/UserDialog/SocialStatusDialog.vue

@@ -41,11 +41,12 @@
                 </SelectContent>
             </Select>
 
-            <InputGroupCharCount
+            <InputGroupField
                 v-model="socialStatusDialog.statusDescription"
                 :placeholder="t('dialog.social_status.status_placeholder')"
                 :maxlength="32"
                 clearable
+                show-count
                 class="mt-2.5" />
             <Collapsible v-model:open="isOpen" class="mt-3 flex w-full flex-col gap-2">
                 <div class="flex items-center justify-between gap-4 px-4">
@@ -88,8 +89,8 @@
     import { Collapsible, CollapsibleContent, CollapsibleTrigger } from '@/components/ui/collapsible';
     import { computed, ref } from 'vue';
     import { Button } from '@/components/ui/button';
+    import { InputGroupField } from '@/components/ui/input-group';
     import { ChevronsUpDown } from 'lucide-vue-next';
-    import { InputGroupCharCount } from '@/components/ui/input-group';
     import { storeToRefs } from 'pinia';
     import { toast } from 'vue-sonner';
     import { useI18n } from 'vue-i18n';