chore: Minor fix

app/javascript/dashboard/components-next/NewConversation/components/EmailOptions.vue

@@ -7,54 +7,25 @@ import Button from 'dashboard/components-next/button/Button.vue';
 import InlineInput from 'dashboard/components-next/inline-input/InlineInput.vue';
 
 const props = defineProps({
-  subject: {
-    type: String,
-    required: true,
-  },
-  ccEmails: {
-    type: String,
-    required: true,
-  },
-  bccEmails: {
-    type: String,
-    required: true,
-  },
-  contacts: {
-    type: Array,
-    required: true,
-  },
-  showCcEmailsDropdown: {
-    type: Boolean,
-    required: true,
-  },
-  showBccEmailsDropdown: {
-    type: Boolean,
-    required: true,
-  },
-  showBccInput: {
-    type: Boolean,
-    default: false,
-  },
-  isLoading: {
-    type: Boolean,
-    default: false,
-  },
-  hasErrors: {
-    type: Boolean,
-    default: false,
-  },
+  contacts: { type: Array, required: true },
+  showCcEmailsDropdown: { type: Boolean, required: false },
+  showBccEmailsDropdown: { type: Boolean, required: false },
+  showBccInput: { type: Boolean, default: false },
+  isLoading: { type: Boolean, default: false },
+  hasErrors: { type: Boolean, default: false },
 });
 
 const emit = defineEmits([
-  'update:ccEmails',
-  'update:bccEmails',
-  'update:subject',
   'searchCcEmails',
   'searchBccEmails',
   'toggleBcc',
   'updateDropdown',
 ]);
 
+const subject = defineModel('subject', { type: String, default: '' });
+const ccEmails = defineModel('ccEmails', { type: String, default: '' });
+const bccEmails = defineModel('bccEmails', { type: String, default: '' });
+
 const { t } = useI18n();
 
 // Convert string to array for TagInput
@@ -79,11 +50,11 @@ const contactEmailsList = computed(() => {
 
 // Handle updates from TagInput and convert array back to string
 const handleCcUpdate = value => {
-  emit('update:ccEmails', value.join(','));
+  ccEmails.value = value.join(',');
 };
 
 const handleBccUpdate = value => {
-  emit('update:bccEmails', value.join(','));
+  bccEmails.value = value.join(',');
 };
 </script>
 
@@ -91,7 +62,7 @@ const handleBccUpdate = value => {
   <div class="flex flex-col divide-y divide-n-strong">
     <div class="flex items-baseline flex-1 w-full h-8 gap-3 px-4 py-3">
       <InlineInput
-        :model-value="subject"
+        v-model="subject"
         :placeholder="
           t('COMPOSE_NEW_CONVERSATION.FORM.EMAIL_OPTIONS.SUBJECT_PLACEHOLDER')
         "
@@ -102,7 +73,6 @@ const handleBccUpdate = value => {
             ? 'placeholder:!text-n-ruby-9 dark:placeholder:!text-n-ruby-9'
             : ''
         "
-        @update:model-value="emit('update:subject', $event)"
       />
     </div>
     <div class="flex items-baseline flex-1 w-full gap-3 px-4 py-3 min-h-8">

app/javascript/dashboard/components-next/NewConversation/components/MessageEditor.vue

@@ -5,10 +5,6 @@ import Editor from 'dashboard/components-next/Editor/Editor.vue';
 import TextArea from 'dashboard/components-next/textarea/TextArea.vue';
 
 defineProps({
-  modelValue: {
-    type: String,
-    required: true,
-  },
   isEmailOrWebWidgetInbox: {
     type: Boolean,
     required: true,
@@ -23,9 +19,12 @@ defineProps({
   },
 });
 
-const emit = defineEmits(['update:modelValue']);
-
 const { t } = useI18n();
+
+const modelValue = defineModel({
+  type: String,
+  default: '',
+});
 </script>
 
 <template>
@@ -35,7 +34,7 @@ const { t } = useI18n();
     :class="!hasAttachments && 'min-h-[200px]'"
   >
     <Editor
-      :model-value="modelValue"
+      v-model="modelValue"
       :placeholder="
         t('COMPOSE_NEW_CONVERSATION.FORM.MESSAGE_EDITOR.PLACEHOLDER')
       "
@@ -46,12 +45,11 @@ const { t } = useI18n();
           : ''
       "
       :show-character-count="false"
-      @update:model-value="emit('update:modelValue', $event)"
     />
   </div>
   <div v-else class="flex-1 h-full" :class="!hasAttachments && 'min-h-[200px]'">
     <TextArea
-      :model-value="modelValue"
+      v-model="modelValue"
       :placeholder="
         t('COMPOSE_NEW_CONVERSATION.FORM.MESSAGE_EDITOR.PLACEHOLDER')
       "
@@ -62,7 +60,6 @@ const { t } = useI18n();
           ? 'placeholder:!text-n-ruby-9 dark:placeholder:!text-n-ruby-9'
           : ''
       "
-      @update:model-value="emit('update:modelValue', $event)"
     />
   </div>
 </template>

app/javascript/dashboard/components-next/inline-input/InlineInput.vue

@@ -2,10 +2,6 @@
 import { ref, onMounted, nextTick } from 'vue';
 
 const props = defineProps({
-  modelValue: {
-    type: [String, Number],
-    default: '',
-  },
   type: {
     type: String,
     default: 'text',
@@ -40,7 +36,12 @@ const props = defineProps({
   },
 });
 
-const emit = defineEmits(['update:modelValue', 'enterPress', 'input', 'blur']);
+const emit = defineEmits(['enterPress', 'input', 'blur']);
+
+const modelValue = defineModel({
+  type: [String, Number],
+  default: '',
+});
 
 const inlineInputRef = ref(null);
 
@@ -50,7 +51,7 @@ const onEnterPress = () => {
 
 const handleInput = event => {
   emit('input', event.target.value);
-  emit('update:modelValue', event.target.value);
+  modelValue.value = event.target.value;
 };
 
 const handleBlur = event => {
@@ -87,7 +88,7 @@ defineExpose({
     <input
       :id="id"
       ref="inlineInputRef"
-      :value="modelValue"
+      v-model="modelValue"
       :type="type"
       :placeholder="placeholder"
       :disabled="disabled"

app/javascript/dashboard/components-next/taginput/TagInput.vue

@@ -6,7 +6,6 @@ import { email } from '@vuelidate/validators';
 import { useVuelidate } from '@vuelidate/core';
 
 const props = defineProps({
-  modelValue: { type: Array, default: () => [] },
   placeholder: { type: String, default: '' },
   disabled: { type: Boolean, default: false },
   type: { type: String, default: 'text' },
@@ -39,6 +38,11 @@ const emit = defineEmits([
   'remove',
 ]);
 
+const modelValue = defineModel({
+  type: Array,
+  default: () => [],
+});
+
 const MODE = {
   SINGLE: 'single',
   MULTIPLE: 'multiple',
@@ -126,13 +130,13 @@ const addTag = async () => {
 
   tags.value.push(trimmedTag);
   newTag.value = '';
-  emit('update:modelValue', tags.value);
+  modelValue.value = tags.value;
   tagInputRef.value?.focus();
 };
 
 const removeTag = index => {
   tags.value.splice(index, 1);
-  emit('update:modelValue', tags.value);
+  modelValue.value = tags.value;
   emit('remove');
 };
 
@@ -147,7 +151,7 @@ const handleDropdownAction = async ({ email: emailAddress, ...rest }) => {
 
   tags.value.push(emailAddress);
   newTag.value = '';
-  emit('update:modelValue', tags.value);
+  modelValue.value = tags.value;
   tagInputRef.value?.focus();
 };