style: apply fixes for eslint issues [cw-3590] (#10210)

These fixes are all auto generated and can be merged directly

Fixes the following issues

1. Event used on components should be hypenated
2. Attribute orders in components
3. Use `unmounted` instead of `destroyed`
4. Add explicit `emits` declarations for components, autofixed [using
this
script](https://gist.github.com/scmmishra/6f549109b96400006bb69bbde392eddf)


We ignore the top level v-if for now, we will fix it later

app/javascript/dashboard/components/ui/DatePicker/DatePicker.vue

@@ -222,7 +222,7 @@ const emitDateRange = () => {
     >
       <CalendarDateRange
         :selected-range="selectedRange"
-        @setRange="setDateRange"
+        @set-range="setDateRange"
       />
       <div
         class="flex flex-col w-[680px] ltr:border-l rtl:border-r border-slate-50 dark:border-slate-700/50"
@@ -264,15 +264,15 @@ const emitDateRange = () => {
                   :calendar-type="calendar"
                   :start-current-date="startCurrentDate"
                   :end-current-date="endCurrentDate"
-                  @selectYear="openCalendar($event, calendar, YEAR)"
+                  @select-year="openCalendar($event, calendar, YEAR)"
                 />
                 <CalendarMonth
                   v-else-if="calendarViews[calendar] === MONTH"
                   :calendar-type="calendar"
                   :start-current-date="startCurrentDate"
                   :end-current-date="endCurrentDate"
-                  @selectMonth="openCalendar($event, calendar)"
-                  @setView="setViewMode"
+                  @select-month="openCalendar($event, calendar)"
+                  @set-view="setViewMode"
                   @prev="moveCalendar(calendar, 'prev', YEAR)"
                   @next="moveCalendar(calendar, 'next', YEAR)"
                 />
@@ -286,9 +286,9 @@ const emitDateRange = () => {
                   :selected-end-date="selectedEndDate"
                   :selecting-end-date="selectingEndDate"
                   :hovered-end-date="hoveredEndDate"
-                  @updateHoveredEndDate="hoveredEndDate = $event"
-                  @selectDate="selectDate"
-                  @setView="setViewMode"
+                  @update-hovered-end-date="hoveredEndDate = $event"
+                  @select-date="selectDate"
+                  @set-view="setViewMode"
                   @prev="moveCalendar(calendar, 'prev')"
                   @next="moveCalendar(calendar, 'next')"
                 />

app/javascript/dashboard/components/ui/DatePicker/components/CalendarFooter.vue

@@ -1,5 +1,5 @@
 <script setup>
-const emit = defineEmits(['clear', 'clear']);
+const emit = defineEmits(['clear', 'change']);
 
 const onClickClear = () => {
   emit('clear');

app/javascript/dashboard/components/ui/DatePicker/components/CalendarMonth.vue

@@ -62,7 +62,7 @@ const selectMonth = index => {
           MONTH
         )
       "
-      @setView="setViewMode"
+      @set-view="setViewMode"
       @prev="onClickPrev"
       @next="onClickNext"
     />

app/javascript/dashboard/components/ui/DatePicker/components/CalendarWeek.vue

@@ -139,7 +139,7 @@ const dayClasses = day => ({
       "
       @prev="onClickPrev"
       @next="onClickNext"
-      @setView="setViewMode"
+      @set-view="setViewMode"
     />
     <CalendarWeekLabel />
     <div