replace some el-select with Select component

src/components/dialogs/AvatarDialog/SetAvatarStylesDialog.vue

@@ -3,58 +3,73 @@
         ref="setAvatarStylesDialog"
         class="x-dialog"
         :model-value="setAvatarStylesDialog.visible"
-        @close="closeSetAvatarStylesDialog"
         :title="t('dialog.set_avatar_styles.header')"
         width="400px"
-        append-to-body>
+        append-to-body
+        @close="closeSetAvatarStylesDialog">
         <template v-if="setAvatarStylesDialog.visible">
             <div>
                 <span>{{ t('dialog.set_avatar_styles.primary_style') }}</span>
-                <el-select
-                    v-model="setAvatarStylesDialog.primaryStyle"
-                    :placeholder="t('dialog.set_avatar_styles.select_style')"
-                    size="small"
-                    clearable
-                    style="display: inline-block">
-                    <el-option
-                        v-for="(style, index) in setAvatarStylesDialog.availableAvatarStyles"
-                        :key="index"
-                        :label="style"
-                        :value="style"></el-option>
-                </el-select>
+                <Select
+                    :model-value="setAvatarStylesDialog.primaryStyle"
+                    @update:modelValue="(v) => updateDialog({ primaryStyle: v === SELECT_CLEAR_VALUE ? '' : v })">
+                    <SelectTrigger size="sm" style="display: inline-flex">
+                        <SelectValue :placeholder="t('dialog.set_avatar_styles.select_style')" />
+                    </SelectTrigger>
+                    <SelectContent>
+                        <SelectItem :value="SELECT_CLEAR_VALUE">{{ t('dialog.gallery_select.none') }}</SelectItem>
+                        <SelectItem
+                            v-for="(style, index) in setAvatarStylesDialog.availableAvatarStyles"
+                            :key="index"
+                            :value="style">
+                            {{ style }}
+                        </SelectItem>
+                    </SelectContent>
+                </Select>
             </div>
+
             <br />
+
             <div>
                 <span>{{ t('dialog.set_avatar_styles.secondary_style') }}</span>
-                <el-select
-                    v-model="setAvatarStylesDialog.secondaryStyle"
-                    :placeholder="t('dialog.set_avatar_styles.select_style')"
-                    size="small"
-                    clearable
-                    style="display: inline-block">
-                    <el-option
-                        v-for="(style, index) in setAvatarStylesDialog.availableAvatarStyles"
-                        :key="index"
-                        :label="style"
-                        :value="style"></el-option>
-                </el-select>
+                <Select
+                    :model-value="setAvatarStylesDialog.secondaryStyle"
+                    @update:modelValue="(v) => updateDialog({ secondaryStyle: v === SELECT_CLEAR_VALUE ? '' : v })">
+                    <SelectTrigger size="sm" style="display: inline-flex">
+                        <SelectValue :placeholder="t('dialog.set_avatar_styles.select_style')" />
+                    </SelectTrigger>
+                    <SelectContent>
+                        <SelectItem :value="SELECT_CLEAR_VALUE">{{ t('dialog.gallery_select.none') }}</SelectItem>
+                        <SelectItem
+                            v-for="(style, index) in setAvatarStylesDialog.availableAvatarStyles"
+                            :key="index"
+                            :value="style">
+                            {{ style }}
+                        </SelectItem>
+                    </SelectContent>
+                </Select>
             </div>
+
             <br />
+
             <div style="font-size: 12px; margin-top: 10px">{{ t('dialog.set_world_tags.author_tags') }}<br /></div>
+
             <el-input
-                v-model="setAvatarStylesDialog.authorTags"
+                :model-value="setAvatarStylesDialog.authorTags"
                 type="textarea"
                 size="small"
                 show-word-limit
                 :autosize="{ minRows: 2, maxRows: 5 }"
                 placeholder=""
-                style="margin-top: 10px"></el-input>
+                style="margin-top: 10px"
+                @update:modelValue="(v) => updateDialog({ authorTags: v })" />
         </template>
+
         <template #footer>
             <el-button @click="closeSetAvatarStylesDialog">{{ t('dialog.set_avatar_styles.cancel') }}</el-button>
-            <el-button type="primary" @click="saveSetAvatarStylesDialog">{{
-                t('dialog.set_avatar_styles.save')
-            }}</el-button>
+            <el-button type="primary" @click="saveSetAvatarStylesDialog">
+                {{ t('dialog.set_avatar_styles.save') }}
+            </el-button>
         </template>
     </el-dialog>
 </template>
@@ -64,13 +79,11 @@
     import { useI18n } from 'vue-i18n';
     import { watch } from 'vue';
 
+    import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '../../ui/select';
     import { arraysMatch } from '../../../shared/utils';
     import { avatarRequest } from '../../../api';
     import { useAvatarStore } from '../../../stores';
 
-    const { t } = useI18n();
-    const { applyAvatar } = useAvatarStore();
-
     const props = defineProps({
         setAvatarStylesDialog: {
             type: Object,
@@ -80,6 +93,11 @@
 
     const emit = defineEmits(['update:setAvatarStylesDialog']);
 
+    const { t } = useI18n();
+    const { applyAvatar } = useAvatarStore();
+
+    const SELECT_CLEAR_VALUE = '__clear__';
+
     watch(
         () => props.setAvatarStylesDialog.visible,
         (newVal) => {
@@ -89,23 +107,34 @@
         }
     );
 
+    function updateDialog(patch) {
+        emit('update:setAvatarStylesDialog', {
+            ...props.setAvatarStylesDialog,
+            ...patch
+        });
+    }
+
     async function getAvatarStyles() {
-        const ref = await avatarRequest.getAvailableAvatarStyles();
-        const styles = [];
-        const stylesMap = new Map();
-        for (const style of ref.json) {
-            styles.push(style.styleName);
-            stylesMap.set(style.styleName, style.id);
+        try {
+            const ref = await avatarRequest.getAvailableAvatarStyles();
+            const styles = [];
+            const stylesMap = new Map();
+            for (const style of ref.json) {
+                styles.push(style.styleName);
+                stylesMap.set(style.styleName, style.id);
+            }
+
+            updateDialog({
+                availableAvatarStyles: styles,
+                availableAvatarStylesMap: stylesMap
+            });
+        } catch (error) {
+            console.error('Error loading avatar styles:', error);
         }
-        props.setAvatarStylesDialog.availableAvatarStyles = styles;
-        props.setAvatarStylesDialog.availableAvatarStylesMap = stylesMap;
     }
 
     function closeSetAvatarStylesDialog() {
-        emit('update:setAvatarStylesDialog', {
-            ...props.setAvatarStylesDialog,
-            visible: false
-        });
+        updateDialog({ visible: false });
     }
 
     function saveSetAvatarStylesDialog() {
@@ -114,18 +143,19 @@
         const secondaryStyleId =
             props.setAvatarStylesDialog.availableAvatarStylesMap.get(props.setAvatarStylesDialog.secondaryStyle) || '';
 
-        let tags = [];
+        const tags = [];
         for (const tag of props.setAvatarStylesDialog.initialTags) {
             if (!tag.startsWith('author_tag_')) {
                 tags.push(tag);
             }
         }
+
         const authorTagsArray = props.setAvatarStylesDialog.authorTags.split(',');
         for (const tag of authorTagsArray) {
             if (!tag.trim()) {
                 continue;
             }
-            let tagName = `author_tag_${tag}`;
+            const tagName = `author_tag_${tag}`;
             if (!tags.includes(tagName)) {
                 tags.push(tagName);
             }
@@ -146,6 +176,7 @@
             secondaryStyle: secondaryStyleId,
             tags
         };
+
         avatarRequest
             .saveAvatar(params)
             .then((args) => {