feat: add ProfileEditForm component for managing user personal information and avatar.

Frontend-Learner/components/profile/ProfileEditForm.vue

@@ -40,6 +40,30 @@ const handleFileUpload = (event: Event) => {
     emit('upload', target.files[0]);
   }
 };
+
+const onPhoneInput = (val: string | number | null) => {
+  let value = String(val || '');
+  // กรองเฉพาะตัวเลขเผื่อการป้อนข้อมูลวิธีอื่น
+  value = value.replace(/\D/g, '');
+  if (value.length > 10) {
+    value = value.substring(0, 10);
+  }
+  props.modelValue.phone = value;
+};
+
+const onPhoneKeydown = (e: KeyboardEvent) => {
+  // อนุญาตให้กดปุ่มควบคุมต่างๆ ได้
+  const controlKeys = ['Backspace', 'Tab', 'Enter', 'Escape', 'ArrowLeft', 'ArrowRight', 'Delete', 'v', 'c', 'a'];
+  
+  if (e.ctrlKey || e.metaKey) {
+    if (controlKeys.includes(e.key.toLowerCase())) return;
+  }
+
+  // ป้องกันการกรอกตัวอักษร
+  if (!controlKeys.includes(e.key) && !/^\d$/.test(e.key)) {
+    e.preventDefault();
+  }
+};
 </script>
 
 <template>
@@ -188,11 +212,14 @@ const handleFileUpload = (event: Event) => {
             <div>
                 <label class="text-xs font-bold text-slate-500 dark:text-slate-400 ml-1 uppercase">{{ $t('profile.phone') }}</label>
                 <q-input
-                v-model="modelValue.phone"
+                :model-value="modelValue.phone"
+                @update:model-value="onPhoneInput"
+                @keydown="onPhoneKeydown"
                 outlined dense rounded
                 class="premium-q-input"
                 :rules="phoneRules"
                 hide-bottom-space
+                maxlength="10"
                 />
             </div>
         </div>