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/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>