fix: fast username input bug fixed

components/TField.vue

@@ -32,6 +32,7 @@
           :auto-focus="autoFocus"
           :hide-label="hideLabel"
           :item="item"
+          :error="error"
           v-on="$attrs.listeners"
           @input="(val) => $emit('input', set(val))"
         />
@@ -131,6 +132,10 @@ export default {
     set: {
       type: Function,
       default: (val) => val
+    },
+    error: {
+      type: String,
+      default: ''
     }
   },
   data: () => ({

components/TForm.vue

@@ -5,6 +5,7 @@
         :value="value ? value[field.name] : ''"
         :item="value"
         v-bind="field"
+        :error="usernameError"
         :label="getLabel(field)"
         @input="(val) => onFieldChange(field, val)"
       />
@@ -32,9 +33,18 @@
 
 <script>
 import { camelcase } from '~/utils'
+import { useDoc } from '~/use/doc'
 
 export default {
   name: 'TForm',
+  setup() {
+    const { find, id } = useDoc('profiles')
+
+    return {
+      find,
+      id
+    }
+  },
   components: {
     TField: () => import('~/components/TField')
   },
@@ -77,7 +87,8 @@ export default {
     }
   },
   data: () => ({
-    error: false
+    error: false,
+    usernameError: ''
   }),
   computed: {
     visibleFields() {
@@ -136,18 +147,26 @@ export default {
 
       this.$emit('copy', this.value)
     },
-    save() {
+    async save() {
       this.error = false
 
       if (!this.validate()) {
         return
       }
 
+      await this.find('username', this.value.username)
+
+      if (this.id && this.id !== this.value.id) {
+        this.usernameError = 'This name is already taken'
+        this.$emit('input', this.value)
+        return
+      }
+
       this.$emit('save', this.value)
     },
     onFieldChange(field, value) {
+      this.usernameError = ''
       const val = { ...this.value }
-
       if (value) {
         this.$set(val, field.name, value)
       } else {
@@ -157,7 +176,6 @@ export default {
       if (field && field.onChange) {
         field.onChange(val)
       }
-
       this.$emit('input', val)
     }
   }

components/TInput/TInputUsername.vue

@@ -11,18 +11,8 @@
 </template>
 
 <script>
-import { useDoc } from '~/use/doc'
-
 export default {
   name: 'TInputUsername',
-  setup() {
-    const { find, id } = useDoc('profiles')
-
-    return {
-      find,
-      id
-    }
-  },
   inheritAttrs: false,
   props: {
     value: {
@@ -36,11 +26,14 @@ export default {
     item: {
       type: Object,
       default: () => ({})
+    },
+    error: {
+      type: String,
+      default: ''
     }
   },
   data: () => ({
-    computedValue: '',
-    error: ''
+    computedValue: ''
   }),
   watch: {
     value(val) {
@@ -53,21 +46,11 @@ export default {
     this.computedValue = this.value
   },
   methods: {
-    async save(newName) {
-      this.error = ''
-
+    save(newName) {
       if (newName === this.value) {
         return
       }
 
-      await this.find('username', newName)
-
-      if (this.id && this.id !== this.item.id) {
-        this.error = 'This name is already taken'
-        this.$emit('input', this.value)
-        return
-      }
-
       this.$emit('input', newName)
     }
   }

components/TPresentation.vue

@@ -28,7 +28,7 @@
     </div>
   </TPopup>
 
-  <TPopup v-else-if="slide == 2" @close="close">
+  <TPopup v-else-if="slide === 2" @close="close">
     <div class="p-4 text-center">
       <TIcon class="w-64" name="undraw_work_chat" />
       <div class="mt-8 w-64">