fix: emit events across the app (#10227)

This PR makes the following changes

1. Update v-model bindings for components using the old `value` prop and `input` event method
2. Remove components that were not used anywhere

---------

Co-authored-by: Muhsin Keloth <muhsinkeramam@gmail.com>

app/javascript/dashboard/components/ui/Dropdown/DropdownList.vue

@@ -84,10 +84,10 @@ const shouldShowEmptyState = computed(() => {
     <slot name="search">
       <DropdownSearch
         v-if="enableSearch"
-        :input-value="searchTerm"
+        v-model="searchTerm"
         :input-placeholder="inputPlaceholder"
         :show-clear-filter="showClearFilter"
-        @input="onSearch"
+        @update:model-value="onSearch"
         @remove="$emit('removeFilter')"
       />
     </slot>

app/javascript/dashboard/components/ui/Dropdown/DropdownSearch.vue

@@ -1,10 +1,6 @@
 <script setup>
-import { defineEmits } from 'vue';
+import { defineEmits, defineModel } from 'vue';
 defineProps({
-  inputValue: {
-    type: String,
-    default: '',
-  },
   inputPlaceholder: {
     type: String,
     default: '',
@@ -15,7 +11,12 @@ defineProps({
   },
 });
 
-const emit = defineEmits(['input', 'remove']);
+const emit = defineEmits(['remove']);
+
+const value = defineModel({
+  type: String,
+  default: '',
+});
 </script>
 
 <template>
@@ -29,16 +30,15 @@ const emit = defineEmits(['input', 'remove']);
         class="text-slate-400 dark:text-slate-400 flex-shrink-0"
       />
       <input
+        v-model="value"
+        :placeholder="inputPlaceholder"
         type="text"
         class="w-full mb-0 text-sm bg-white dark:bg-slate-800 text-slate-800 dark:text-slate-75 reset-base"
-        :placeholder="inputPlaceholder"
-        :value="inputValue"
-        @input="emit('input', $event.target.value)"
       />
     </div>
     <!-- Clear filter button -->
     <woot-button
-      v-if="!inputValue && showClearFilter"
+      v-if="!modelValue && showClearFilter"
       size="small"
       variant="clear"
       color-scheme="primary"

app/javascript/dashboard/components/widgets/AutomationActionTeamMessageInput.vue

@@ -1,9 +1,10 @@
 <script>
 export default {
-  // The value types are dynamic, hence prop validation removed to work with our action schema
-  // eslint-disable-next-line vue/require-prop-types
-  props: ['teams', 'value'],
-  emits: ['input'],
+  props: {
+    teams: { type: Array, required: true },
+    modelValue: { type: Object, required: true },
+  },
+  emits: ['update:modelValue'],
   data() {
     return {
       selectedTeams: [],
@@ -11,13 +12,13 @@ export default {
     };
   },
   mounted() {
-    const { team_ids: teamIds } = this.value;
+    const { team_ids: teamIds } = this.modelValue;
     this.selectedTeams = teamIds;
-    this.message = this.value.message;
+    this.message = this.modelValue.message;
   },
   methods: {
     updateValue() {
-      this.$emit('input', {
+      this.$emit('update:modelValue', {
         team_ids: this.selectedTeams.map(team => team.id),
         message: this.message,
       });

app/javascript/dashboard/routes/dashboard/helpcenter/components/Sidebar/Sidebar.vue

@@ -37,7 +37,7 @@ export default {
       default: () => [],
     },
   },
-  emits: ['input', 'openPopover', 'openModal'],
+  emits: ['openPopover', 'openModal'],
   computed: {
     hasCategory() {
       return (
@@ -50,9 +50,6 @@ export default {
     },
   },
   methods: {
-    onSearch(value) {
-      this.$emit('input', value);
-    },
     openPortalPopover() {
       this.$emit('openPopover');
     },

app/javascript/dashboard/routes/dashboard/helpcenter/components/Sidebar/SidebarSearch.vue

@@ -1,63 +0,0 @@
-<script>
-export default {
-  emits: ['input'],
-  data() {
-    return {
-      searchValue: '',
-    };
-  },
-  methods: {
-    onSearch(e) {
-      this.$emit('input', e.target.value);
-    },
-  },
-};
-</script>
-
-<template>
-  <div class="search-input--wrap">
-    <div class="search-icon--wrap">
-      <fluent-icon icon="search" size="18" class="search-icon" />
-    </div>
-    <input
-      v-model="searchValue"
-      class="search-input"
-      :placeholder="$t('HELP_CENTER.SIDEBAR.SEARCH.PLACEHOLDER')"
-      @input="onSearch"
-    />
-  </div>
-</template>
-
-<style lang="scss" scoped>
-.search-input--wrap {
-  display: flex;
-  padding: var(--space-small) var(--space-zero);
-  width: 100%;
-}
-
-.search-input {
-  width: 100%;
-  height: var(--space-large);
-  border-radius: var(--border-radius-normal);
-  background: var(--s-25);
-  font-size: var(--font-size-small);
-  padding: var(--space-small) var(--space-small) var(--space-small)
-    var(--space-large);
-  border: 1px solid var(--s-50);
-
-  &:focus {
-    border-color: var(--w-500);
-  }
-}
-
-.search-icon--wrap {
-  position: relative;
-}
-
-.search-icon {
-  position: absolute;
-  color: var(--s-500);
-  top: var(--space-small);
-  left: var(--space-small);
-}
-</style>

app/javascript/dashboard/routes/dashboard/settings/agentBots/components/CSMLMonacoEditor.vue

@@ -5,12 +5,12 @@ import { mapGetters } from 'vuex';
 export default {
   components: { LoadingState },
   props: {
-    value: {
+    modelValue: {
       type: String,
       default: '',
     },
   },
-  emits: ['input'],
+  emits: ['update:modelValue'],
   data() {
     return {
       iframeLoading: true,
@@ -30,7 +30,7 @@ export default {
         return;
       }
       const csmlContent = e.data.replace('chatwoot-csml-editor:update', '');
-      this.$emit('input', csmlContent);
+      this.$emit('update:modelValue', csmlContent);
     };
   },
   methods: {
@@ -38,7 +38,7 @@ export default {
       const frameElement = document.getElementById(`csml-editor--frame`);
       const eventData = {
         event: 'editorContext',
-        data: this.value || '',
+        data: this.modelValue || '',
       };
       frameElement.contentWindow.postMessage(JSON.stringify(eventData), '*');
       this.iframeLoading = false;

app/javascript/dashboard/routes/dashboard/settings/profile/NotificationCheckBox.vue

@@ -2,7 +2,7 @@
 import { ref, watch } from 'vue';
 
 const props = defineProps({
-  value: {
+  modelValue: {
     type: String,
     required: true,
   },
@@ -20,9 +20,9 @@ const props = defineProps({
   },
 });
 
-const emit = defineEmits(['input']);
+const emit = defineEmits(['update:modelValue', 'input']);
 
-const localValue = ref(props.value);
+const localValue = ref(props.modelValue);
 const localFlags = ref(props.selectedFlags);
 
 watch(
@@ -33,6 +33,7 @@ watch(
 );
 
 const handleInput = e => {
+  emit('update:modelValue', props.type, e);
   emit('input', props.type, e);
 };
 </script>

app/javascript/dashboard/routes/dashboard/settings/profile/NotificationPreferences.vue

@@ -257,8 +257,8 @@ export default {
         </span>
       </div>
       <FormSwitch
-        :value="hasEnabledPushPermissions"
-        @input="onRequestPermissions"
+        :model-value="hasEnabledPushPermissions"
+        @update:model-value="onRequestPermissions"
       />
     </div>
   </div>