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/v3/components/Form/RadioTags.vue

@@ -1,57 +0,0 @@
-<script>
-import WithLabel from './WithLabel.vue';
-export default {
-  components: {
-    WithLabel,
-  },
-  props: {
-    options: {
-      type: Array,
-      default: () => [],
-    },
-    name: {
-      type: String,
-      required: true,
-    },
-    label: {
-      type: String,
-      required: true,
-    },
-    value: {
-      type: String,
-      default: '',
-    },
-    hasError: {
-      type: Boolean,
-      default: false,
-    },
-    errorMessage: {
-      type: String,
-      default: '',
-    },
-  },
-  emits: ['input'],
-};
-</script>
-
-<template>
-  <WithLabel
-    :label="label"
-    :name="name"
-    :has-error="hasError"
-    :error-message="errorMessage"
-  >
-    <div class="flex flex-wrap gap-2">
-      <woot-button
-        v-for="option in options"
-        :key="option.value"
-        :variant="value === option.value ? '' : 'hollow'"
-        :color-scheme="value === option.value ? 'primary' : 'secondary'"
-        size="small"
-        @click="$emit('input', option.value)"
-      >
-        {{ option.label }}
-      </woot-button>
-    </div>
-  </WithLabel>
-</template>

app/javascript/v3/components/Form/Switch.vue

@@ -1,12 +1,12 @@
 <script>
 export default {
   props: {
-    value: { type: Boolean, default: false },
+    modelValue: { type: Boolean, default: false },
   },
-  emits: ['input'],
+  emits: ['update:modelValue'],
   methods: {
     onClick() {
-      this.$emit('input', !this.value);
+      this.$emit('update:modelValue', !this.modelValue);
     },
   },
 };
@@ -17,17 +17,19 @@ export default {
     type="button"
     class="relative flex-shrink-0 h-4 p-0 border-none shadow-inner w-7 rounded-3xl"
     :class="
-      value ? 'bg-primary-600 shadow-primary-800' : 'shadow-ash-400 bg-ash-200'
+      modelValue
+        ? 'bg-primary-600 shadow-primary-800'
+        : 'shadow-ash-400 bg-ash-200'
     "
     role="switch"
-    :aria-checked="value.toString()"
+    :aria-checked="modelValue.toString()"
     @click="onClick"
   >
     <span
       aria-hidden="true"
       class="rounded-full bg-white top-0.5 absolute dark:bg-white w-3 h-3 translate-y-0 duration-200 transition-transform ease-in-out"
       :class="
-        value
+        modelValue
           ? 'ltr:translate-x-0 rtl:translate-x-[12px]'
           : 'ltr:-translate-x-[12px] rtl:translate-x-0'
       "

app/javascript/v3/components/Form/Textarea.vue

@@ -21,7 +21,7 @@ export default {
       type: String,
       default: '',
     },
-    value: {
+    modelValue: {
       type: [String, Number],
       default: '',
     },
@@ -46,10 +46,10 @@ export default {
       default: '',
     },
   },
-  emits: ['input', 'blur'],
+  emits: ['update:modelValue', 'blur'],
   methods: {
     onInput(e) {
-      this.$emit('input', e.target.value);
+      this.$emit('update:modelValue', e.target.value);
     },
   },
 };
@@ -69,7 +69,7 @@ export default {
       :required="required"
       :placeholder="placeholder"
       :data-testid="dataTestid"
-      :value="value"
+      :value="modelValue"
       :rows="rows"
       :class="{
         'focus:outline-red-600 outline-red-600': hasError,
@@ -78,7 +78,7 @@ export default {
         'resize-none': !allowResize,
       }"
       class="block w-full p-3 bg-white border-none rounded-md shadow-sm appearance-none outline outline-1 focus:outline focus:outline-2 text-slate-900 dark:text-slate-100 placeholder:text-slate-400 dark:bg-slate-800"
-      @input="onInput"
+      @update:model-value="onInput"
       @blur="$emit('blur')"
     />
   </WithLabel>