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,
       });