fix: eslint issue on ref

2024-10-03 08:57:37 +05:30
373 changed files with 648 additions and 1460 deletions
@@ -49,17 +49,13 @@ jobs:
      with:
        bundler-cache: true # runs 'bundle install' and caches installed gems automatically

-    - uses: pnpm/action-setup@v2
-      with:
-        version: 9.3.0
-
    - uses: actions/setup-node@v4
      with:
        node-version: 20
-        cache: pnpm
+        cache: yarn

-    - name: pnpm
-      run: pnpm install
+    - name: yarn
+      run: yarn install

    - name: Create database
      run: bundle exec rake db:create
@@ -19,33 +19,23 @@ jobs:
        with:
          bundler-cache: true # runs 'bundle install' and caches installed gems automatically

-      - uses: pnpm/action-setup@v2
-        with:
-          version: 9.3.0
-
      - uses: actions/setup-node@v4
        with:
          node-version: 20
-          cache: 'pnpm'
+          cache: 'yarn'

-      - name: pnpm
-        run: pnpm install
+      - name: yarn
+        run: yarn install

      - name: Strip enterprise code
        run: |
          rm -rf enterprise
          rm -rf spec/enterprise

-      - name: setup env
-        run: |
-          cp .env.example .env
- 
      - name: Run asset compile
        run: bundle exec rake assets:precompile
        env:
-          RAILS_ENV: production
+          NODE_OPTIONS: --openssl-legacy-provider

      - name: Size Check
-        run: pnpm run size
-
-
+        run: yarn run size
@@ -537,6 +537,12 @@ function loadMoreConversations() {
    return;
  }

+  // Increment the current page
+  store.dispatch('conversationPage/setCurrentPage', {
+    filter: currentPageFilterKey.value,
+    page: currentFiltersPage.value + 1,
+  });
+
  if (!hasAppliedFiltersOrActiveFolders.value) {
    fetchConversations();
  } else if (hasActiveFolders.value) {
@@ -763,11 +769,11 @@ watch(conversationFilters, (newVal, oldVal) => {
      :has-applied-filters="hasAppliedFilters"
      :has-active-folders="hasActiveFolders"
      :active-status="activeStatus"
-      @add-folders="onClickOpenAddFoldersModal"
-      @delete-folders="onClickOpenDeleteFoldersModal"
-      @filters-modal="onToggleAdvanceFiltersModal"
-      @reset-filters="resetAndFetchData"
-      @basic-filter-change="onBasicFilterChange"
+      @addFolders="onClickOpenAddFoldersModal"
+      @deleteFolders="onClickOpenDeleteFoldersModal"
+      @filtersModal="onToggleAdvanceFiltersModal"
+      @resetFilters="resetAndFetchData"
+      @basicFilterChange="onBasicFilterChange"
    />

    <AddCustomViews
@@ -779,7 +785,7 @@ watch(conversationFilters, (newVal, oldVal) => {

    <DeleteCustomViews
      v-if="showDeleteFoldersModal"
-      v-model:show="showDeleteFoldersModal"
+      :show-delete-popup.sync="showDeleteFoldersModal"
      :active-custom-view="activeFolder"
      :custom-views-id="foldersId"
      :open-last-item-after-delete="openLastItemAfterDeleteInFolder"
@@ -790,7 +796,7 @@ watch(conversationFilters, (newVal, oldVal) => {
      v-if="!hasAppliedFiltersOrActiveFolders"
      :items="assigneeTabItems"
      :active-tab="activeAssigneeTab"
-      @chat-tab-change="updateAssigneeTab"
+      @chatTabChange="updateAssigneeTab"
    />

    <p
@@ -807,11 +813,11 @@ watch(conversationFilters, (newVal, oldVal) => {
      :show-open-action="allSelectedConversationsStatus('open')"
      :show-resolved-action="allSelectedConversationsStatus('resolved')"
      :show-snoozed-action="allSelectedConversationsStatus('snoozed')"
-      @select-all-conversations="toggleSelectAll"
-      @assign-agent="onAssignAgent"
-      @update-conversations="onUpdateConversations"
-      @assign-labels="onAssignLabels"
-      @assign-team="onAssignTeamsForBulk"
+      @selectAllConversations="toggleSelectAll"
+      @assignAgent="onAssignAgent"
+      @updateConversations="onUpdateConversations"
+      @assignLabels="onAssignLabels"
+      @assignTeam="onAssignTeamsForBulk"
    />
    <div
      ref="conversationListRef"
@@ -848,8 +854,8 @@ watch(conversationFilters, (newVal, oldVal) => {
              :folders-id="foldersId"
              :conversation-type="conversationType"
              :show-assignee="showAssigneeInConversationCard"
-              @select-conversation="selectConversation"
-              @de-select-conversation="deSelectConversation"
+              @selectConversation="selectConversation"
+              @deSelectConversation="deSelectConversation"
            />
          </DynamicScrollerItem>
        </template>
@@ -872,7 +878,7 @@ watch(conversationFilters, (newVal, oldVal) => {
      </DynamicScroller>
    </div>
    <woot-modal
-      v-model:show="showAdvancedFilters"
+      :show.sync="showAdvancedFilters"
      :on-close="closeAdvanceFiltersModal"
      size="medium"
    >
@@ -883,8 +889,8 @@ watch(conversationFilters, (newVal, oldVal) => {
        :active-folder-name="activeFolderName"
        :on-close="closeAdvanceFiltersModal"
        :is-folder-view="hasActiveFolders"
-        @apply-filter="onApplyFilter"
-        @update-folder="onUpdateSavedFilter"
+        @applyFilter="onApplyFilter"
+        @updateFolder="onUpdateSavedFilter"
      />
    </woot-modal>
  </div>
@@ -108,7 +108,7 @@ const hasAppliedFiltersOrActiveFolders = computed(() => {
      />
      <ConversationBasicFilter
        v-if="!hasAppliedFiltersOrActiveFolders"
-        @change-filter="onBasicFilterChange"
+        @changeFilter="onBasicFilterChange"
      />
    </div>
  </div>
@@ -56,14 +56,14 @@ export default {
    :selected="isConversationSelected(source.id)"
    :show-assignee="showAssignee"
    enable-context-menu
-    @select-conversation="selectConversation"
-    @de-select-conversation="deSelectConversation"
-    @assign-agent="assignAgent"
-    @assign-team="assignTeam"
-    @assign-label="assignLabels"
-    @update-conversation-status="updateConversationStatus"
-    @context-menu-toggle="toggleContextMenu"
-    @mark-as-unread="markAsUnread"
-    @assign-priority="assignPriority"
+    @selectConversation="selectConversation"
+    @deSelectConversation="deSelectConversation"
+    @assignAgent="assignAgent"
+    @assignTeam="assignTeam"
+    @assignLabel="assignLabels"
+    @updateConversationStatus="updateConversationStatus"
+    @contextMenuToggle="toggleContextMenu"
+    @markAsUnread="markAsUnread"
+    @assignPriority="assignPriority"
  />
 </template>
@@ -31,7 +31,6 @@ export default {
    attributeKey: { type: String, required: true },
    contactId: { type: Number, default: null },
  },
-  emits: ['update', 'delete', 'copy'],
  setup() {
    return { v$: useVuelidate() };
  },
@@ -139,7 +138,7 @@ export default {
    this.editedValue = this.formattedValue;
    emitter.on(BUS_EVENTS.FOCUS_CUSTOM_ATTRIBUTE, this.onFocusAttribute);
  },
-  unmounted() {
+  destroyed() {
    emitter.off(BUS_EVENTS.FOCUS_CUSTOM_ATTRIBUTE, this.onFocusAttribute);
  },
  methods: {
@@ -18,7 +18,6 @@ const shouldShowContent = computed(
 );
 </script>

-<!-- eslint-disable-next-line vue/no-root-v-if -->
 <template>
  <div v-if="shouldShowContent">
    <slot />
@@ -5,7 +5,6 @@ export default {
  components: {
    DatePicker,
  },
-  emits: ['close', 'chooseTime'],

  data() {
    return {
@@ -3,8 +3,9 @@
 import { ref, computed, defineEmits, onMounted } from 'vue';
 import { useEventListener } from '@vueuse/core';

-const { modalType, closeOnBackdropClick, onClose } = defineProps({
+const { show, modalType, closeOnBackdropClick, onClose } = defineProps({
  closeOnBackdropClick: { type: Boolean, default: true },
+  show: Boolean,
  showCloseButton: { type: Boolean, default: true },
  onClose: { type: Function, required: true },
  fullWidth: { type: Boolean, default: false },
@@ -13,7 +14,6 @@ const { modalType, closeOnBackdropClick, onClose } = defineProps({
 });

 const emit = defineEmits(['close']);
-const show = defineModel('show', { type: Boolean, default: false });

 const modalClassName = computed(() => {
  const modalClassNameMap = {
@@ -32,7 +32,6 @@ const handleMouseDown = () => {
 };

 const close = () => {
-  show.value = false;
  emit('close');
  onClose();
 };
@@ -41,14 +40,14 @@ const onMouseUp = () => {
  if (mousedDownOnBackdrop.value) {
    mousedDownOnBackdrop.value = false;
    if (closeOnBackdropClick) {
-      close();
+      onClose();
    }
  }
 };

 const onKeydown = e => {
-  if (show.value && e.code === 'Escape') {
-    close();
+  if (show && e.code === 'Escape') {
+    onClose();
    e.stopPropagation();
  }
 };
@@ -79,7 +79,6 @@ export default {
 };
 </script>

-<!-- eslint-disable-next-line vue/no-root-v-if -->
 <template>
  <Banner
    v-if="shouldShowBanner"
@@ -87,6 +86,6 @@ export default {
    :banner-message="bannerMessage"
    :action-button-label="actionButtonMessage"
    has-action-button
-    @primary-action="routeToBilling"
+    @primaryAction="routeToBilling"
  />
 </template>
@@ -28,7 +28,6 @@ export default {
 };
 </script>

-<!-- eslint-disable-next-line vue/no-root-v-if -->
 <template>
  <Banner
    v-if="shouldShowBanner"
@@ -37,6 +36,6 @@ export default {
    :action-button-label="actionButtonMessage"
    action-button-icon="mail"
    has-action-button
-    @primary-action="resendVerificationEmail"
+    @primaryAction="resendVerificationEmail"
  />
 </template>
@@ -67,7 +67,6 @@ export default {
 };
 </script>

-<!-- eslint-disable-next-line vue/no-root-v-if -->
 <template>
  <Banner
    v-if="shouldShowBanner"
@@ -81,7 +81,6 @@ export default {
 };
 </script>

-<!-- eslint-disable-next-line vue/no-root-v-if -->
 <template>
  <Banner
    v-if="shouldShowBanner"
@@ -89,6 +88,6 @@ export default {
    :banner-message="bannerMessage"
    :action-button-label="actionButtonMessage"
    has-action-button
-    @primary-action="routeToBilling"
+    @primaryAction="routeToBilling"
  />
 </template>
@@ -22,14 +22,11 @@ export default {
      type: Boolean,
      default: true,
    },
+    hasBanner: {
+      type: Boolean,
+      default: false,
+    },
  },
-  emits: [
-    'toggleAccountModal',
-    'showAddLabelPopup',
-    'openNotificationPanel',
-    'closeKeyShortcutModal',
-    'openKeyShortcutModal',
-  ],
  setup(props, { emit }) {
    const route = useRoute();
    const router = useRouter();
@@ -220,9 +217,9 @@ export default {
      :account-id="accountId"
      :menu-items="primaryMenuItems"
      :active-menu-item="activePrimaryMenu.key"
-      @toggle-accounts="toggleAccountModal"
-      @open-key-shortcut-modal="toggleKeyShortcutModal"
-      @open-notification-panel="openNotificationPanel"
+      @toggleAccounts="toggleAccountModal"
+      @openKeyShortcutModal="toggleKeyShortcutModal"
+      @openNotificationPanel="openNotificationPanel"
    />
    <SecondarySidebar
      v-if="hasSecondarySidebar"
@@ -234,8 +231,8 @@ export default {
      :menu-config="activeSecondaryMenu"
      :current-user="currentUser"
      :is-on-chatwoot-cloud="isOnChatwootCloud"
-      @add-label="showAddLabelPopup"
-      @toggle-accounts="toggleAccountModal"
+      @addLabel="showAddLabelPopup"
+      @toggleAccounts="toggleAccountModal"
    />
  </aside>
 </template>
@@ -2,7 +2,6 @@
 import { mapGetters } from 'vuex';

 export default {
-  emits: ['toggleAccounts'],
  data() {
    return { showSwitchButton: false };
  },
@@ -26,7 +25,6 @@ export default {
 };
 </script>

-<!-- eslint-disable-next-line vue/no-root-v-if -->
 <template>
  <div
    v-if="showShowCurrentAccountContext"
@@ -7,7 +7,7 @@ export default {
      default: true,
    },
  },
-  emits: ['closeAccountModal', 'showCreateAccountModal'],
+
  computed: {
    ...mapGetters({
      accountId: 'getCurrentAccountId',
@@ -15,7 +15,6 @@ export default {
      default: true,
    },
  },
-  emits: ['closeAccountCreateModal'],
  setup() {
    return { v$: useVuelidate() };
  },
@@ -6,7 +6,6 @@ export default {
  components: {
    Thumbnail,
  },
-  emits: ['toggleMenu'],
  computed: {
    ...mapGetters({
      currentUser: 'getCurrentUser',
@@ -2,8 +2,6 @@
 import { mapGetters } from 'vuex';

 export default {
-  emits: ['openNotificationPanel'],
-
  computed: {
    ...mapGetters({
      notificationMetadata: 'notifications/getMeta',
@@ -17,12 +17,6 @@ export default {
      default: false,
    },
  },
-  emits: [
-    'close',
-    'openKeyShortcutModal',
-    'toggleAccounts',
-    'showSupportChatWindow',
-  ],
  computed: {
    ...mapGetters({
      currentUser: 'getCurrentUser',
@@ -43,7 +43,6 @@ export default {
      default: '',
    },
  },
-  emits: ['toggleAccounts', 'openNotificationPanel', 'openKeyShortcutModal'],
  data() {
    return {
      helpDocsURL: wootConstants.DOCS_URL,
@@ -97,13 +96,13 @@ export default {
        open-in-new-page
        :to="helpDocsURL"
      />
-      <NotificationBell @open-notification-panel="openNotificationPanel" />
-      <AgentDetails @toggle-menu="toggleOptions" />
+      <NotificationBell @openNotificationPanel="openNotificationPanel" />
+      <AgentDetails @toggleMenu="toggleOptions" />
      <OptionsMenu
        :show="showOptionsMenu"
-        @toggle-accounts="toggleAccountModal"
-        @show-support-chat-window="toggleSupportChatWindow"
-        @open-key-shortcut-modal="$emit('openKeyShortcutModal')"
+        @toggleAccounts="toggleAccountModal"
+        @showSupportChatWindow="toggleSupportChatWindow"
+        @openKeyShortcutModal="$emit('openKeyShortcutModal')"
        @close="toggleOptions"
      />
    </div>
@@ -49,7 +49,6 @@ export default {
      default: false,
    },
  },
-  emits: ['addLabel', 'toggleAccounts'],
  computed: {
    ...mapGetters({
      isFeatureEnabledonAccount: 'accounts/isFeatureEnabledonAccount',
@@ -243,7 +242,7 @@ export default {
  <div
    class="flex flex-col w-48 h-full px-2 pb-8 overflow-auto text-sm bg-white border-r dark:bg-slate-900 dark:border-slate-800/50 rtl:border-r-0 rtl:border-l border-slate-50"
  >
-    <AccountContext @toggle-accounts="toggleAccountModal" />
+    <AccountContext @toggleAccounts="toggleAccountModal" />
    <transition-group
      name="menu-list"
      tag="ul"
@@ -258,7 +257,7 @@ export default {
        v-for="menuItem in additionalSecondaryMenuItems[menuConfig.parentNav]"
        :key="menuItem.key"
        :menu-item="menuItem"
-        @add-label="showAddLabelPopup"
+        @addLabel="showAddLabelPopup"
      />
    </transition-group>
  </div>
@@ -106,11 +106,10 @@ export default {
          <span
            v-if="showChildCount"
            class="bg-slate-50 dark:bg-slate-700 rounded-full min-w-[18px] justify-center items-center flex text-xxs mx-1 py-0 px-1"
-            :class="
-              isCountZero
+            :class="isCountZero
                ? `text-slate-300 dark:text-slate-500`
                : `text-slate-700 dark:text-slate-50`
-            "
+              "
          >
            {{ childItemCount }}
          </span>
@@ -22,7 +22,6 @@ export default {
      default: () => ({}),
    },
  },
-  emits: ['addLabel', 'open'],
  setup() {
    const { isAdmin } = useAdmin();
    const { isEnterprise } = useConfig();
@@ -18,7 +18,6 @@ export default {
      default: '',
    },
  },
-  emits: ['open', 'close'],
  methods: {
    onClickOpenPath() {
      this.$emit('open');
@@ -38,7 +38,6 @@ export default {
      default: false,
    },
  },
-  emits: ['primaryAction', 'close'],
  computed: {
    bannerClasses() {
      const classList = [this.colorScheme];
@@ -222,7 +222,7 @@ const emitDateRange = () => {
    >
      <CalendarDateRange
        :selected-range="selectedRange"
-        @set-range="setDateRange"
+        @setRange="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"
-                  @select-year="openCalendar($event, calendar, YEAR)"
+                  @selectYear="openCalendar($event, calendar, YEAR)"
                />
                <CalendarMonth
                  v-else-if="calendarViews[calendar] === MONTH"
                  :calendar-type="calendar"
                  :start-current-date="startCurrentDate"
                  :end-current-date="endCurrentDate"
-                  @select-month="openCalendar($event, calendar)"
-                  @set-view="setViewMode"
+                  @selectMonth="openCalendar($event, calendar)"
+                  @setView="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"
-                  @update-hovered-end-date="hoveredEndDate = $event"
-                  @select-date="selectDate"
-                  @set-view="setViewMode"
+                  @updateHoveredEndDate="hoveredEndDate = $event"
+                  @selectDate="selectDate"
+                  @setView="setViewMode"
                  @prev="moveCalendar(calendar, 'prev')"
                  @next="moveCalendar(calendar, 'next')"
                />
@@ -1,5 +1,5 @@
 <script setup>
-const emit = defineEmits(['clear', 'change']);
+const emit = defineEmits(['clear', 'clear']);

 const onClickClear = () => {
  emit('clear');
@@ -62,7 +62,7 @@ const selectMonth = index => {
          MONTH
        )
      "
-      @set-view="setViewMode"
+      @setView="setViewMode"
      @prev="onClickPrev"
      @next="onClickNext"
    />
@@ -139,7 +139,7 @@ const dayClasses = day => ({
      "
      @prev="onClickPrev"
      @next="onClickNext"
-      @set-view="setViewMode"
+      @setView="setViewMode"
    />
    <CalendarWeekLabel />
    <div
@@ -16,7 +16,6 @@ export default {
      default: () => [],
    },
  },
-  emits: ['change'],
  methods: {
    handleChange(value) {
      this.$emit('change', value);
@@ -17,7 +17,6 @@ export default {
      default: [],
    },
  },
-  emits: ['change'],

  methods: {
    handleChange(value) {
@@ -38,7 +38,7 @@ const props = defineProps({
  },
 });

-const emit = defineEmits(['onSearch', 'select', 'removeFilter']);
+const emit = defineEmits(['onSearch', 'select']);

 const searchTerm = ref('');

@@ -44,7 +44,6 @@ export default {
      default: '',
    },
  },
-  emits: ['remove'],
  computed: {
    textColor() {
      if (this.variant === 'smooth') return '';
@@ -4,7 +4,6 @@ export default {
    modelValue: { type: Boolean, default: false },
    size: { type: String, default: '' },
  },
-  emits: ['update:modelValue', 'input'],
  methods: {
    onClick() {
      this.$emit('update:modelValue', !this.modelValue);
@@ -17,7 +17,6 @@ export default {
    AICTAModal,
    AIAssistanceCTAButton,
  },
-  emits: ['replaceText'],
  setup(props, { emit }) {
    const { uiSettings, updateUISettings } = useUISettings();

@@ -138,19 +137,19 @@ export default {
        @click="openAIAssist"
      />
      <woot-modal
-        v-model:show="showAIAssistanceModal"
+        :show.sync="showAIAssistanceModal"
        :on-close="hideAIAssistanceModal"
      >
        <AIAssistanceModal
          :ai-option="aiOption"
-          @apply-text="insertText"
+          @applyText="insertText"
          @close="hideAIAssistanceModal"
        />
      </woot-modal>
    </div>
    <div v-else-if="shouldShowAIAssistCTAButtonForAdmin" class="relative">
      <AIAssistanceCTAButton @click="openAICta" />
-      <woot-modal v-model:show="showAICtaModal" :on-close="hideAICtaModal">
+      <woot-modal :show.sync="showAICtaModal" :on-close="hideAICtaModal">
        <AICTAModal @close="hideAICtaModal" />
      </woot-modal>
    </div>
@@ -1,7 +1,5 @@
 <script>
 export default {
-  emits: ['open'],
-
  methods: {
    onClick() {
      this.$emit('open');
@@ -13,7 +13,6 @@ export default {
      required: true,
    },
  },
-  emits: ['close', 'applyText'],
  setup() {
    const { formatMessage } = useMessageFormatter();
    const { draftMessage, processEvent, recordAnalytics } = useAI();
@@ -7,8 +7,6 @@ import { useAI } from 'dashboard/composables/useAI';
 import { OPEN_AI_EVENTS } from 'dashboard/helper/AnalyticsHelper/events';

 export default {
-  emits: ['close'],
-
  setup() {
    const { updateUISettings } = useUISettings();
    const { recordAnalytics } = useAI();
@@ -38,7 +38,6 @@ export default {
      default: false,
    },
  },
-  emits: ['update:modelValue', 'input', 'removeAction', 'resetAction'],
  computed: {
    action_name: {
      get() {
@@ -3,7 +3,6 @@ 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'],
  data() {
    return {
      selectedTeams: [],
@@ -11,7 +11,6 @@ export default {
      default: '',
    },
  },
-  emits: ['update:modelValue'],
  data() {
    return {
      uploadState: 'idle',
@@ -12,7 +12,6 @@ export default {
      required: true,
    },
  },
-  emits: ['channelItemClick'],
  computed: {
    hasFbConfigured() {
      return window.chatwootConfig?.fbAppId;
@@ -11,7 +11,6 @@ export default {
      default: '',
    },
  },
-  emits: ['update:modelValue'],
  data() {
    return {
      isPickerOpen: false,
@@ -46,7 +45,7 @@ export default {
      disable-alpha
      :model-value="modelValue"
      class="colorpicker--chrome"
-      @update:model-value="updateColor"
+      @update:modelValue="updateColor"
    />
  </div>
 </template>
@@ -80,7 +80,6 @@ export default {
 };
 </script>

-<!-- eslint-disable-next-line vue/no-root-v-if -->
 <template>
  <div v-if="hasOpenedAtleastOnce" class="dashboard-app--container">
    <div
@@ -19,7 +19,6 @@ export default {
 };
 </script>

-<!-- eslint-disable-next-line vue/no-root-v-if -->
 <template>
  <div v-if="isFeatureEnabled">
    <slot />
@@ -47,7 +47,6 @@ export default {
      default: '',
    },
  },
-  emits: ['update:modelValue', 'removeFilter', 'resetFilter'],
  computed: {
    attributeKey: {
      get() {
@@ -5,7 +5,7 @@ export default {
  props: {
    inbox: {
      type: Object,
-      default: () => {},
+      default: () => { },
    },
  },
  computed: {
@@ -16,8 +16,6 @@ const props = defineProps({
    default: 0,
  },
 });
-
-const emit = defineEmits(['pageChange']);
 const totalPages = computed(() => Math.ceil(props.totalCount / props.pageSize));
 const firstIndex = computed(() => props.pageSize * (props.currentPage - 1) + 1);
 const lastIndex = computed(() =>
@@ -28,7 +26,6 @@ const isFooterVisible = computed(
 );
 </script>

-<!-- eslint-disable-next-line vue/no-root-v-if -->
 <template>
  <footer
    v-if="isFooterVisible"
@@ -45,7 +42,7 @@ const isFooterVisible = computed(
      :total-pages="totalPages"
      :total-count="totalCount"
      :page-size="pageSize"
-      @page-change="emit('pageChange', $event)"
+      @pageChange="$emit('pageChange', $event)"
    />
  </footer>
 </template>
@@ -41,7 +41,6 @@ export default {
 };
 </script>

-<!-- eslint-disable-next-line vue/no-root-v-if -->
 <template>
  <woot-button
    v-if="isVideoIntegrationEnabled"
@@ -176,7 +176,7 @@ const editorMenuOptions = computed(() => {

 function createSuggestionPlugin({
  trigger,
-  minChars = 0,
+  minChars = 1,
  showMenu,
  searchTerm,
  isAllowed = () => true,
@@ -47,7 +47,6 @@ export default {
    placeholder: { type: String, default: '' },
    enabledMenuOptions: { type: Array, default: () => [] },
  },
-  emits: ['blur', 'input', 'update:modelValue', 'keyup', 'focus', 'keydown'],
  setup() {
    const { uiSettings, updateUISettings } = useUISettings();

@@ -61,9 +60,17 @@ export default {
      plugins: [imagePastePlugin(this.handleImageUpload)],
    };
  },
+  computed: {
+    contentFromEditor() {
+      if (editorView) {
+        return ArticleMarkdownSerializer.serialize(editorView.state.doc);
+      }
+      return '';
+    },
+  },
  watch: {
    modelValue(newValue = '') {
-      if (newValue !== this.contentFromEditor()) {
+      if (newValue !== this.contentFromEditor) {
        this.reloadState();
      }
    },
@@ -88,12 +95,6 @@ export default {
    this.focusEditorInputField();
  },
  methods: {
-    contentFromEditor() {
-      if (editorView) {
-        return ArticleMarkdownSerializer.serialize(editorView.state.doc);
-      }
-      return '';
-    },
    openFileBrowser() {
      this.$refs.imageUploadInput.click();
    },
@@ -211,8 +212,8 @@ export default {
      editorView.focus();
    },
    emitOnChange() {
-      this.$emit('update:modelValue', this.contentFromEditor());
-      this.$emit('input', this.contentFromEditor());
+      this.$emit('update:modelValue', this.contentFromEditor);
+      this.$emit('input', this.contentFromEditor);
    },
    onKeyup() {
      this.$emit('keyup');
@@ -26,7 +26,7 @@ export default {
    },
    onSend: {
      type: Function,
-      default: () => {},
+      default: () => { },
    },
    sendButtonText: {
      type: String,
@@ -53,19 +53,19 @@ export default {
    },
    onFileUpload: {
      type: Function,
-      default: () => {},
+      default: () => { },
    },
    toggleEmojiPicker: {
      type: Function,
-      default: () => {},
+      default: () => { },
    },
    toggleAudioRecorder: {
      type: Function,
-      default: () => {},
+      default: () => { },
    },
    toggleAudioRecorderPlayPause: {
      type: Function,
-      default: () => {},
+      default: () => { },
    },
    isRecordingAudio: {
      type: Boolean,
@@ -112,12 +112,6 @@ export default {
      required: true,
    },
  },
-  emits: [
-    'replaceText',
-    'toggleInsertArticle',
-    'toggleEditor',
-    'selectWhatsappTemplate',
-  ],
  setup() {
    const { setSignatureFlagForInbox, fetchSignatureFlagFromUISettings } =
      useUISettings();
@@ -172,9 +166,9 @@ export default {
        return false;
      }
      // Disable audio recorder for safari browser as recording is not supported
-      // const isSafari = /^((?!chrome|android|crios|fxios).)*safari/i.test(
-      //   navigator.userAgent
-      // );
+      const isSafari = /^((?!chrome|android|crios|fxios).)*safari/i.test(
+        navigator.userAgent
+      );

      return (
        this.isFeatureEnabledonAccount(
@@ -346,7 +340,7 @@ export default {
        :conversation-id="conversationId"
        :is-private-note="isOnPrivateNote"
        :message="message"
-        @replace-text="replaceText"
+        @replaceText="replaceText"
      />
      <transition name="modal-fade">
        <div
@@ -22,7 +22,6 @@ export default {
      default: false,
    },
  },
-  emits: ['setReplyMode', 'togglePopout'],
  setup(props, { emit }) {
    const setReplyMode = mode => {
      emit('setReplyMode', mode);
@@ -48,7 +48,7 @@ onMounted(() => {
    v-if="items.length"
    type="emoji"
    :items="items"
-    @mention-select="handleMentionClick"
+    @mentionSelect="handleMentionClick"
  >
    <template #default="{ item, selected }">
      <span
@@ -10,7 +10,6 @@ export default {
      default: '',
    },
  },
-  emits: ['replace'],
  computed: {
    ...mapGetters({
      cannedMessages: 'getCannedResponses',
@@ -47,6 +46,6 @@ export default {
  <MentionBox
    v-if="items.length"
    :items="items"
-    @mention-select="handleMentionClick"
+    @mentionSelect="handleMentionClick"
  />
 </template>
@@ -37,7 +37,6 @@ export default {
      default: false,
    },
  },
-  emits: ['applyFilter', 'updateFolder'],
  setup() {
    const { setFilterAttributes } = useFilter({
      filteri18nKey: 'FILTER',
@@ -364,8 +363,8 @@ export default {
              ? $t(`CONTACTS_FILTER.ERRORS.VALUE_REQUIRED`)
              : ''
          "
-          @reset-filter="resetFilter(i, appliedFilters[i])"
-          @remove-filter="removeFilter(i)"
+          @resetFilter="resetFilter(i, appliedFilters[i])"
+          @removeFilter="removeFilter(i)"
        />
        <div class="mt-4">
          <woot-button
@@ -27,7 +27,6 @@ export default {
  components: {
    FilterItem,
  },
-  emits: ['changeFilter'],
  setup() {
    const { updateUISettings } = useUISettings();

@@ -108,7 +107,7 @@ export default {
          :selected-value="chatStatus"
          :items="chatStatusItems"
          path-prefix="CHAT_LIST.CHAT_STATUS_FILTER_ITEMS"
-          @on-change-filter="onChangeFilter"
+          @onChangeFilter="onChangeFilter"
        />
      </div>
      <div class="flex items-center justify-between last:mt-4">
@@ -120,7 +119,7 @@ export default {
          :selected-value="sortFilter"
          :items="chatSortItems"
          path-prefix="CHAT_LIST.SORT_ORDER_ITEMS"
-          @on-change-filter="onChangeFilter"
+          @onChangeFilter="onChangeFilter"
        />
      </div>
    </div>
@@ -34,7 +34,6 @@ export default {
      default: true,
    },
  },
-  emits: ['contactPanelToggle'],
  data() {
    return { activeIndex: 0 };
  },
@@ -104,7 +103,7 @@ export default {
      :is-inbox-view="isInboxView"
      :is-contact-panel-open="isContactPanelOpen"
      :show-back-button="isOnExpandedLayout && !isInboxView"
-      @contact-panel-toggle="onToggleContactPanel"
+      @contactPanelToggle="onToggleContactPanel"
    />
    <woot-tabs
      v-if="dashboardApps.length && currentChat.id"
@@ -129,7 +128,7 @@ export default {
        :inbox-id="inboxId"
        :is-inbox-view="isInboxView"
        :is-contact-panel-open="isContactPanelOpen"
-        @contact-panel-toggle="onToggleContactPanel"
+        @contactPanelToggle="onToggleContactPanel"
      />
      <EmptyState
        v-if="!currentChat.id && !isInboxView"
@@ -69,15 +69,6 @@ export default {
      default: false,
    },
  },
-  emits: [
-    'contextMenuToggle',
-    'assignAgent',
-    'assignLabel',
-    'assignTeam',
-    'markAsUnread',
-    'assignPriority',
-    'updateConversationStatus',
-  ],
  data() {
    return {
      hovered: false,
@@ -345,12 +336,12 @@ export default {
        :priority="chat.priority"
        :chat-id="chat.id"
        :has-unread-messages="hasUnread"
-        @update-conversation="onUpdateConversation"
-        @assign-agent="onAssignAgent"
-        @assign-label="onAssignLabel"
-        @assign-team="onAssignTeam"
-        @mark-as-unread="markAsUnread"
-        @assign-priority="assignPriority"
+        @updateConversation="onUpdateConversation"
+        @assignAgent="onAssignAgent"
+        @assignLabel="onAssignLabel"
+        @assignTeam="onAssignTeam"
+        @markAsUnread="markAsUnread"
+        @assignPriority="assignPriority"
      />
    </ContextMenu>
  </div>
@@ -41,7 +41,6 @@ export default {
      default: false,
    },
  },
-  emits: ['contactPanelToggle'],
  setup(props, { emit }) {
    const keyboardEvents = {
      'Alt+KeyO': {
@@ -2,7 +2,6 @@
 import { useVuelidate } from '@vuelidate/core';
 import { required, minLength, email } from '@vuelidate/validators';
 import { useAlert } from 'dashboard/composables';
-
 export default {
  props: {
    show: {
@@ -14,7 +13,6 @@ export default {
      default: () => ({}),
    },
  },
-  emits: ['cancel', 'update:show'],
  setup() {
    return { v$: useVuelidate() };
  },
@@ -33,14 +31,6 @@ export default {
    },
  },
  computed: {
-    localShow: {
-      get() {
-        return this.show;
-      },
-      set(value) {
-        this.$emit('update:show', value);
-      },
-    },
    sentToOtherEmailAddress() {
      return this.selectedType === 'other_email_address';
    },
@@ -90,8 +80,9 @@ export default {
 };
 </script>

+<!-- eslint-disable vue/no-mutating-props -->
 <template>
-  <woot-modal v-model:show="localShow" :on-close="onCancel">
+  <woot-modal :show.sync="show" :on-close="onCancel">
    <div class="flex flex-col h-auto overflow-auto">
      <woot-modal-header
        :header-title="$t('EMAIL_TRANSCRIPT.TITLE')"
@@ -18,7 +18,6 @@ export default {
      required: true,
    },
  },
-  emits: ['onChangeFilter'],
  data() {
    return {
      activeValue: this.selectedValue,
@@ -439,7 +439,6 @@ export default {
 };
 </script>

-<!-- eslint-disable-next-line vue/no-root-v-if -->
 <template>
  <li
    v-if="shouldRenderMessage"
@@ -580,7 +579,7 @@ export default {
        :message="data"
        @open="openContextMenu"
        @close="closeContextMenu"
-        @reply-to="handleReplyTo"
+        @replyTo="handleReplyTo"
      />
    </div>
  </li>
@@ -52,7 +52,6 @@ export default {
      default: false,
    },
  },
-  emits: ['contactPanelToggle'],
  setup() {
    const isPopOutReplyBox = ref(false);
    const { isEnterprise } = useConfig();
@@ -548,9 +547,9 @@ export default {
        </div>
      </div>
      <ReplyBox
-        v-model:popout-reply-box="isPopOutReplyBox"
        :conversation-id="currentChat.id"
-        @toggle-popout="showPopOutReplyBox"
+        :popout-reply-box.sync="isPopOutReplyBox"
+        @togglePopout="showPopOutReplyBox"
      />
    </div>
  </div>
@@ -28,7 +28,7 @@ export default {
    emitter.on(CMD_UNMUTE_CONVERSATION, this.unmute);
    emitter.on(CMD_SEND_TRANSCRIPT, this.toggleEmailActionsModal);
  },
-  unmounted() {
+  destroyed() {
    emitter.off(CMD_MUTE_CONVERSATION, this.mute);
    emitter.off(CMD_UNMUTE_CONVERSATION, this.unmute);
    emitter.off(CMD_SEND_TRANSCRIPT, this.toggleEmailActionsModal);
@@ -29,7 +29,6 @@ export default {
 };
 </script>

-<!-- eslint-disable-next-line vue/no-root-v-if -->
 <template>
  <span
    v-if="priority"
@@ -1,6 +1,5 @@
 <script>
-// [TODO] The popout events are needlessly complex and should be simplified
-import { defineAsyncComponent, defineModel } from 'vue';
+import { defineAsyncComponent } from 'vue';
 import { mapGetters } from 'vuex';
 import { useAlert } from 'dashboard/composables';
 import { useUISettings } from 'dashboard/composables/useUISettings';
@@ -66,7 +65,12 @@ export default {
    ArticleSearchPopover,
  },
  mixins: [inboxMixin, fileUploadMixin, keyboardEventListenerMixins],
-  emits: ['update:popoutReplyBox', 'togglePopout'],
+  props: {
+    popoutReplyBox: {
+      type: Boolean,
+      default: false,
+    },
+  },
  setup() {
    const {
      uiSettings,
@@ -75,14 +79,8 @@ export default {
      fetchSignatureFlagFromUISettings,
    } = useUISettings();

-    const popoutReplyBox = defineModel('popoutReplyBox', {
-      type: Boolean,
-      default: false,
-    });
-
    return {
      uiSettings,
-      popoutReplyBox,
      updateUISettings,
      isEditorHotKeyEnabled,
      fetchSignatureFlagFromUISettings,
@@ -465,10 +463,12 @@ export default {
      this.onNewConversationModalActive
    );
  },
-  unmounted() {
+  destroyed() {
    document.removeEventListener('paste', this.onPaste);
    document.removeEventListener('keydown', this.handleKeyEvents);
    emitter.off(BUS_EVENTS.TOGGLE_REPLY_TO_MESSAGE, this.fetchAndSetReplyTo);
+  },
+  unmounted() {
    emitter.off(
      BUS_EVENTS.NEW_CONVERSATION_MODAL,
      this.onNewConversationModalActive
@@ -1081,15 +1081,15 @@ export default {
      :banner-message="$t('CONVERSATION.NOT_ASSIGNED_TO_YOU')"
      has-action-button
      :action-button-label="$t('CONVERSATION.ASSIGN_TO_ME')"
-      @primary-action="onClickSelfAssign"
+      @primaryAction="onClickSelfAssign"
    />
    <ReplyTopPanel
      :mode="replyType"
      :is-message-length-reaching-threshold="isMessageLengthReachingThreshold"
      :characters-remaining="charactersRemaining"
      :popout-reply-box="popoutReplyBox"
-      @set-reply-mode="setReplyMode"
-      @toggle-popout="$emit('togglePopout')"
+      @setReplyMode="setReplyMode"
+      @togglePopout="$emit('togglePopout')"
    />
    <ArticleSearchPopover
      v-if="showArticleSearchPopover && connectedPortalSlug"
@@ -1126,9 +1126,9 @@ export default {
        v-if="showAudioRecorderEditor"
        ref="audioRecorderInput"
        :audio-record-format="audioRecordFormat"
-        @recorder-progress-changed="onRecordProgressChanged"
-        @state-recorder-changed="onStateRecorderChanged"
-        @finish-record="onFinishRecorder"
+        @recorderProgressChanged="onRecordProgressChanged"
+        @stateRecorderChanged="onStateRecorderChanged"
+        @finishRecord="onFinishRecorder"
      />
      <ResizableTextArea
        v-else-if="!showRichContentEditor"
@@ -1140,8 +1140,8 @@ export default {
        :signature="signatureToApply"
        allow-signature
        :send-with-signature="sendWithSignature"
-        @typing-off="onTypingOff"
-        @typing-on="onTypingOn"
+        @typingOff="onTypingOff"
+        @typingOn="onTypingOn"
        @focus="onFocus"
        @blur="onBlur"
      />
@@ -1159,21 +1159,21 @@ export default {
        :signature="signatureToApply"
        allow-signature
        :channel-type="channelType"
-        @typing-off="onTypingOff"
-        @typing-on="onTypingOn"
+        @typingOff="onTypingOff"
+        @typingOn="onTypingOn"
        @focus="onFocus"
        @blur="onBlur"
-        @toggle-user-mention="toggleUserMention"
-        @toggle-canned-menu="toggleCannedMenu"
-        @toggle-variables-menu="toggleVariablesMenu"
-        @clear-selection="clearEditorSelection"
+        @toggleUserMention="toggleUserMention"
+        @toggleCannedMenu="toggleCannedMenu"
+        @toggleVariablesMenu="toggleVariablesMenu"
+        @clearSelection="clearEditorSelection"
      />
    </div>
    <div v-if="hasAttachments" class="attachment-preview-box" @paste="onPaste">
      <AttachmentPreview
        class="flex-col mt-4"
        :attachments="attachedFiles"
-        @remove-attachment="removeAttachment"
+        @removeAttachment="removeAttachment"
      />
    </div>
    <MessageSignatureMissingAlert
@@ -1203,16 +1203,16 @@ export default {
      :message="message"
      :portal-slug="connectedPortalSlug"
      :new-conversation-modal-active="newConversationModalActive"
-      @select-whatsapp-template="openWhatsappTemplateModal"
-      @toggle-editor="toggleRichContentEditor"
-      @replace-text="replaceText"
-      @toggle-insert-article="toggleInsertArticle"
+      @selectWhatsappTemplate="openWhatsappTemplateModal"
+      @toggleEditor="toggleRichContentEditor"
+      @replaceText="replaceText"
+      @toggleInsertArticle="toggleInsertArticle"
    />
    <WhatsappTemplates
      :inbox-id="inbox.id"
      :show="showWhatsAppTemplatesModal"
      @close="hideWhatsappTemplatesModal"
-      @on-send="onSendWhatsAppReply"
+      @onSend="onSendWhatsAppReply"
      @cancel="hideWhatsappTemplatesModal"
    />

@@ -17,7 +17,6 @@ export default {
      default: '',
    },
  },
-  emits: ['update:bccEmails', 'update:ccEmails', 'update:toEmails'],
  setup() {
    return { v$: useVuelidate() };
  },
@@ -9,7 +9,6 @@ export default {
      required: true,
    },
  },
-  emits: ['dismiss'],
 };
 </script>

@@ -11,7 +11,6 @@ export default {
      default: '',
    },
  },
-  emits: ['selectVariable'],
  computed: {
    ...mapGetters({
      customAttributes: 'attributes/getAttributes',
@@ -63,7 +62,7 @@ export default {
    v-if="items.length"
    type="variable"
    :items="items"
-    @mention-select="handleVariableClick"
+    @mentionSelect="handleVariableClick"
  />
 </template>

@@ -7,30 +7,21 @@ export default {
    TemplateParser,
  },
  props: {
-    show: {
-      type: Boolean,
-      default: false,
-    },
    inboxId: {
      type: Number,
      default: undefined,
    },
+    show: {
+      type: Boolean,
+      default: true,
+    },
  },
-  emits: ['onSend', 'cancel', 'update:show'],
  data() {
    return {
      selectedWaTemplate: null,
    };
  },
  computed: {
-    localShow: {
-      get() {
-        return this.show;
-      },
-      set(value) {
-        this.$emit('update:show', value);
-      },
-    },
    modalHeaderContent() {
      return this.selectedWaTemplate
        ? this.$t('WHATSAPP_TEMPLATES.MODAL.TEMPLATE_SELECTED_SUBTITLE', {
@@ -56,8 +47,9 @@ export default {
 };
 </script>

+<!-- eslint-disable vue/no-mutating-props -->
 <template>
-  <woot-modal v-model:show="localShow" :on-close="onClose" size="modal-big">
+  <woot-modal :show.sync="show" :on-close="onClose" size="modal-big">
    <woot-modal-header
      :header-title="$t('WHATSAPP_TEMPLATES.MODAL.TITLE')"
      :header-content="modalHeaderContent"
@@ -66,13 +58,13 @@ export default {
      <TemplatesPicker
        v-if="!selectedWaTemplate"
        :inbox-id="inboxId"
-        @on-select="pickTemplate"
+        @onSelect="pickTemplate"
      />
      <TemplateParser
        v-else
        :template="selectedWaTemplate"
-        @reset-template="onResetTemplate"
-        @send-message="onSendMessage"
+        @resetTemplate="onResetTemplate"
+        @sendMessage="onSendMessage"
      />
    </div>
  </woot-modal>
@@ -19,7 +19,6 @@ export default {
      default: () => ({}),
    },
  },
-  emits: ['sendMessage', 'resetTemplate'],
  setup(props, { emit }) {
    const processVariable = str => {
      return str.replace(/{{|}}/g, '');
@@ -9,7 +9,6 @@ export default {
      default: undefined,
    },
  },
-  emits: ['onSelect'],
  data() {
    return {
      query: '',
@@ -7,7 +7,6 @@ export default {
      required: true,
    },
  },
-  emits: ['error'],
  data() {
    return {
      show: false,
@@ -27,7 +26,7 @@ export default {
 <template>
  <div class="image message-text__wrap">
    <img :src="url" @click="onClick" @error="$emit('error')" />
-    <woot-modal v-model:show="show" full-width :on-close="onClose">
+    <woot-modal full-width :show.sync="show" :on-close="onClose">
      <img :src="url" class="modal-image skip-context-menu" />
    </woot-modal>
  </div>
@@ -21,7 +21,6 @@ export default {
      required: true,
    },
  },
-  emits: ['error'],
  data() {
    return {
      show: false,
@@ -117,7 +116,7 @@ export default {
    </audio>
    <GalleryView
      v-if="show"
-      v-model:show="show"
+      :show.sync="show"
      :attachment="attachment"
      :all-attachments="filteredCurrentChatAttachments"
      @error="onImgError"
@@ -15,7 +15,6 @@ export default {
      default: '',
    },
  },
-  emits: ['error'],
  data() {
    return {
      hasImgStoryError: false,
@@ -31,7 +31,6 @@ export default {
 };
 </script>

-<!-- eslint-disable-next-line vue/no-root-v-if -->
 <template>
  <DyteVideoCall
    v-if="showDyteIntegration"
@@ -45,7 +45,6 @@ export default {
 };
 </script>

-<!-- eslint-disable-next-line vue/no-root-v-if -->
 <template>
  <div
    v-if="showHead"
@@ -106,7 +106,7 @@ export default {
    </button>
    <GalleryView
      v-if="showGalleryViewer"
-      v-model:show="showGalleryViewer"
+      :show.sync="showGalleryViewer"
      :attachment="attachment"
      :all-attachments="availableAttachments"
      @error="onClose"
@@ -10,7 +10,6 @@ export default {
      default: '',
    },
  },
-  emits: ['close'],
  computed: {
    translationsAvailable() {
      return !!Object.keys(this.translations).length;
@@ -6,7 +6,6 @@ export default {
      required: true,
    },
  },
-  emits: ['error'],
  data() {
    return {
      show: false,
@@ -31,7 +30,7 @@ export default {
 <template>
  <div class="video message-text__wrap">
    <video ref="videoElement" :src="url" muted playsInline @click="onClick" />
-    <woot-modal v-model:show="show" :on-close="onClose">
+    <woot-modal :show.sync="show" :on-close="onClose">
      <video
        :src="url"
        controls
@@ -7,6 +7,10 @@ import { messageTimestamp } from 'shared/helpers/timeHelper';
 import Thumbnail from 'dashboard/components/widgets/Thumbnail.vue';

 const props = defineProps({
+  show: {
+    type: Boolean,
+    required: true,
+  },
  attachment: {
    type: Object,
    required: true,
@@ -18,7 +22,6 @@ const props = defineProps({
 });

 const emit = defineEmits(['close']);
-const show = defineModel('show', { type: Boolean, default: false });

 const getters = useStoreGetters();

@@ -205,10 +208,11 @@ onMounted(() => {
 });
 </script>

+<!-- eslint-disable vue/no-mutating-props -->
 <template>
  <woot-modal
-    v-model:show="show"
    full-width
+    :show.sync="show"
    :show-close-button="false"
    :on-close="onClose"
  >
@@ -103,7 +103,6 @@ export default {
 };
 </script>

-<!-- eslint-disable-next-line vue/no-root-v-if -->
 <template>
  <div
    v-if="hasSlaThreshold"
@@ -37,14 +37,6 @@ export default {
      default: null,
    },
  },
-  emits: [
-    'updateConversation',
-    'assignPriority',
-    'markAsUnread',
-    'assignAgent',
-    'assignTeam',
-    'assignLabel',
-  ],
  data() {
    return {
      STATUS_TYPE: wootConstants.STATUS_TYPE,
@@ -150,7 +150,6 @@ export default {
 };
 </script>

-<!-- eslint-disable-next-line vue/no-root-v-if -->
 <template>
  <li
    v-if="shouldShowSuggestions"
@@ -18,7 +18,6 @@ export default {
      default: 0,
    },
  },
-  emits: ['select', 'close'],
  data() {
    return {
      query: '',
@@ -48,14 +48,6 @@ export default {
      default: false,
    },
  },
-  emits: [
-    'selectAllConversations',
-    'assignAgent',
-    'updateConversations',
-    'assignLabels',
-    'assignTeam',
-    'resolveConversations',
-  ],
  data() {
    return {
      showAgentsList: false,
@@ -80,7 +72,7 @@ export default {
      this.onCmdResolveConversation
    );
  },
-  unmounted() {
+  destroyed() {
    emitter.off(
      CMD_BULK_ACTION_SNOOZE_CONVERSATION,
      this.onCmdSnoozeConversation
@@ -239,7 +231,7 @@ export default {
        <TeamActions
          v-if="showTeamsList"
          class="team-actions-box"
-          @assign-team="assignTeam"
+          @assignTeam="assignTeam"
          @close="showTeamsList = false"
        />
      </transition>
@@ -248,12 +240,12 @@ export default {
      {{ $t('BULK_ACTION.ALL_CONVERSATIONS_SELECTED_ALERT') }}
    </div>
    <woot-modal
-      v-model:show="showCustomTimeSnoozeModal"
+      :show.sync="showCustomTimeSnoozeModal"
      :on-close="hideCustomSnoozeModal"
    >
      <CustomSnoozeModal
        @close="hideCustomSnoozeModal"
-        @choose-time="customSnoozeTime"
+        @chooseTime="customSnoozeTime"
      />
    </woot-modal>
  </div>
@@ -2,7 +2,6 @@
 import { mapGetters } from 'vuex';

 export default {
-  emits: ['update', 'close', 'assign'],
  data() {
    return {
      query: '',
@@ -1,8 +1,6 @@
 <script>
 import { mapGetters } from 'vuex';
 export default {
-  emits: ['assignTeam', 'close'],
-
  data() {
    return {
      query: '',
@@ -63,7 +63,7 @@ const unlinkIssue = () => {
        :identifier="issue.identifier"
        :link-id="linkId"
        :issue-url="issue.url"
-        @unlink-issue="unlinkIssue"
+        @unlinkIssue="unlinkIssue"
      />

      <span class="mt-2 text-sm font-medium text-ash-900">
@@ -120,7 +120,7 @@ const linkIssue = async () => {
          :loading-placeholder="$t('INTEGRATION_SETTINGS.LINEAR.LINK.LOADING')"
          enable-search
          class="left-0 flex flex-col w-full overflow-y-auto h-fit !max-h-[160px] md:left-auto md:right-0 top-10"
-          @on-search="onSearch"
+          @onSearch="onSearch"
          @select="onSelectIssue"
        />
      </template>
@@ -119,10 +119,10 @@ onMounted(() => {
      :issue="linkedIssue.issue"
      :link-id="linkedIssue.id"
      class="absolute right-0 top-[40px] invisible group-hover:visible"
-      @unlink-issue="unlinkIssue"
+      @unlinkIssue="unlinkIssue"
    />
    <woot-modal
-      v-model:show="shouldShowPopup"
+      :show.sync="shouldShowPopup"
      :on-close="closePopup"
      :close-on-backdrop-click="false"
      class="!items-start [&>div]:!top-12 [&>div]:sticky"
@@ -18,7 +18,6 @@ export default {
      default: false,
    },
  },
-  emits: ['onAvatarSelect', 'onAvatarDelete'],
  watch: {},
  methods: {
    handleImageUpload(event) {
@@ -38,8 +38,7 @@ export default {
      default: () => {},
    },
  },
-  emits: ['update:modelValue', 'input', 'blur'],
-  mounted() {
+  created() {
    // eslint-disable-next-line
    console.warn(
      '[DEPRECATED] <WootInput> has be deprecated and will be removed soon. Please use v3/components/Form/Input.vue instead'
@@ -29,7 +29,6 @@ export default {
      default: false,
    },
  },
-  emits: ['blur', 'input', 'setCode'],
  data() {
    return {
      selectedIndex: -1,
@@ -8,15 +8,35 @@ export default {
    Modal,
  },
  props: {
-    show: { type: Boolean, default: false },
-    title: { type: String, default: '' },
-    message: { type: String, default: '' },
-    confirmText: { type: String, default: '' },
-    rejectText: { type: String, default: '' },
-    confirmValue: { type: String, default: '' },
-    confirmPlaceHolderText: { type: String, default: '' },
+    show: {
+      type: Boolean,
+      default: false,
+    },
+    title: {
+      type: String,
+      default: '',
+    },
+    message: {
+      type: String,
+      default: '',
+    },
+    confirmText: {
+      type: String,
+      default: '',
+    },
+    rejectText: {
+      type: String,
+      default: '',
+    },
+    confirmValue: {
+      type: String,
+      default: '',
+    },
+    confirmPlaceHolderText: {
+      type: String,
+      default: '',
+    },
  },
-  emits: ['onClose', 'onConfirm', 'update:show'],
  setup() {
    return { v$: useVuelidate() };
  },
@@ -33,16 +53,6 @@ export default {
      },
    },
  },
-  computed: {
-    localShow: {
-      get() {
-        return this.show;
-      },
-      set(value) {
-        this.$emit('update:show', value);
-      },
-    },
-  },
  methods: {
    closeModal() {
      this.value = '';
@@ -55,8 +65,9 @@ export default {
 };
 </script>

+<!-- eslint-disable vue/no-mutating-props -->
 <template>
-  <Modal v-model:show="localShow" :on-close="closeModal">
+  <Modal :show.sync="show" :on-close="closeModal">
    <woot-modal-header :header-title="title" :header-content="message" />
    <form @submit.prevent="onConfirm">
      <woot-input
@@ -51,7 +51,7 @@ export default {
 </script>

 <template>
-  <Modal v-model:show="show" :on-close="cancel">
+  <Modal :show.sync="show" :on-close="cancel">
    <div class="h-auto overflow-auto flex flex-col">
      <woot-modal-header :header-title="title" :header-content="description" />
      <div class="flex flex-row justify-end gap-2 py-4 px-6 w-full">
@@ -1,21 +1,26 @@
-<script setup>
+<script>
 import Modal from '../../Modal.vue';

-defineProps({
-  onClose: { type: Function, default: () => {} },
-  onConfirm: { type: Function, default: () => {} },
-  title: { type: String, default: '' },
-  message: { type: String, default: '' },
-  messageValue: { type: String, default: '' },
-  confirmText: { type: String, default: '' },
-  rejectText: { type: String, default: '' },
-});
-
-const show = defineModel('show', { type: Boolean, default: false });
+export default {
+  components: {
+    Modal,
+  },
+  props: {
+    show: Boolean,
+    onClose: { type: Function, default: () => {} },
+    onConfirm: { type: Function, default: () => {} },
+    title: { type: String, default: '' },
+    message: { type: String, default: '' },
+    messageValue: { type: String, default: '' },
+    confirmText: { type: String, default: '' },
+    rejectText: { type: String, default: '' },
+  },
+};
 </script>

+<!-- eslint-disable vue/no-mutating-props -->
 <template>
-  <Modal v-model:show="show" :on-close="onClose">
+  <Modal :show.sync="show" :on-close="onClose">
    <woot-modal-header
      :header-title="title"
      :header-content="message"
@@ -16,8 +16,6 @@ defineProps({
  },
 });

-defineEmits(['close']);
-
 const { t } = useI18n();

 const shortcutKeys = SHORTCUT_KEYS;
--- a/Show More
+++ b/Show More