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
2024-10-03 15:02:12 +05:30
parent b8d0252511
commit c51a458c25
257 changed files with 1013 additions and 310 deletions
@@ -17,6 +17,7 @@ export default {
    AICTAModal,
    AIAssistanceCTAButton,
  },
+  emits: ['replaceText'],
  setup(props, { emit }) {
    const { uiSettings, updateUISettings } = useUISettings();

@@ -142,7 +143,7 @@ export default {
      >
        <AIAssistanceModal
          :ai-option="aiOption"
-          @applyText="insertText"
+          @apply-text="insertText"
          @close="hideAIAssistanceModal"
        />
      </woot-modal>
@@ -1,5 +1,7 @@
 <script>
 export default {
+  emits: ['open'],
+
  methods: {
    onClick() {
      this.$emit('open');
@@ -13,6 +13,7 @@ export default {
      required: true,
    },
  },
+  emits: ['close', 'applyText'],
  setup() {
    const { formatMessage } = useMessageFormatter();
    const { draftMessage, processEvent, recordAnalytics } = useAI();
@@ -7,6 +7,8 @@ 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();
@@ -11,6 +11,7 @@ export default {
      default: '',
    },
  },
+  emits: ['update:modelValue'],
  data() {
    return {
      uploadState: 'idle',
@@ -12,6 +12,7 @@ export default {
      required: true,
    },
  },
+  emits: ['channelItemClick'],
  computed: {
    hasFbConfigured() {
      return window.chatwootConfig?.fbAppId;
@@ -11,6 +11,7 @@ export default {
      default: '',
    },
  },
+  emits: ['update:modelValue'],
  data() {
    return {
      isPickerOpen: false,
@@ -45,7 +46,7 @@ export default {
      disable-alpha
      :model-value="modelValue"
      class="colorpicker--chrome"
-      @update:modelValue="updateColor"
+      @update:model-value="updateColor"
    />
  </div>
 </template>
@@ -80,6 +80,7 @@ export default {
 };
 </script>

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

+<!-- eslint-disable-next-line vue/no-root-v-if -->
 <template>
  <div v-if="isFeatureEnabled">
    <slot />
@@ -47,6 +47,7 @@ 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,6 +16,8 @@ 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(() =>
@@ -26,6 +28,7 @@ const isFooterVisible = computed(
 );
 </script>

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

+<!-- eslint-disable-next-line vue/no-root-v-if -->
 <template>
  <woot-button
    v-if="isVideoIntegrationEnabled"
@@ -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,6 +112,12 @@ export default {
      required: true,
    },
  },
+  emits: [
+    'replaceText',
+    'toggleInsertArticle',
+    'toggleEditor',
+    'selectWhatsappTemplate',
+  ],
  setup() {
    const { setSignatureFlagForInbox, fetchSignatureFlagFromUISettings } =
      useUISettings();
@@ -166,9 +172,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(
@@ -340,7 +346,7 @@ export default {
        :conversation-id="conversationId"
        :is-private-note="isOnPrivateNote"
        :message="message"
-        @replaceText="replaceText"
+        @replace-text="replaceText"
      />
      <transition name="modal-fade">
        <div
@@ -22,6 +22,7 @@ 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"
-    @mentionSelect="handleMentionClick"
+    @mention-select="handleMentionClick"
  >
    <template #default="{ item, selected }">
      <span
@@ -10,6 +10,7 @@ export default {
      default: '',
    },
  },
+  emits: ['replace'],
  computed: {
    ...mapGetters({
      cannedMessages: 'getCannedResponses',
@@ -46,6 +47,6 @@ export default {
  <MentionBox
    v-if="items.length"
    :items="items"
-    @mentionSelect="handleMentionClick"
+    @mention-select="handleMentionClick"
  />
 </template>
@@ -37,6 +37,7 @@ export default {
      default: false,
    },
  },
+  emits: ['applyFilter', 'updateFolder'],
  setup() {
    const { setFilterAttributes } = useFilter({
      filteri18nKey: 'FILTER',
@@ -363,8 +364,8 @@ export default {
              ? $t(`CONTACTS_FILTER.ERRORS.VALUE_REQUIRED`)
              : ''
          "
-          @resetFilter="resetFilter(i, appliedFilters[i])"
-          @removeFilter="removeFilter(i)"
+          @reset-filter="resetFilter(i, appliedFilters[i])"
+          @remove-filter="removeFilter(i)"
        />
        <div class="mt-4">
          <woot-button
@@ -27,6 +27,7 @@ export default {
  components: {
    FilterItem,
  },
+  emits: ['changeFilter'],
  setup() {
    const { updateUISettings } = useUISettings();

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

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

+<!-- eslint-disable-next-line vue/no-root-v-if -->
 <template>
  <span
    v-if="priority"
@@ -465,12 +465,10 @@ export default {
      this.onNewConversationModalActive
    );
  },
-  destroyed() {
+  unmounted() {
    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
@@ -1128,9 +1126,9 @@ export default {
        v-if="showAudioRecorderEditor"
        ref="audioRecorderInput"
        :audio-record-format="audioRecordFormat"
-        @recorderProgressChanged="onRecordProgressChanged"
-        @stateRecorderChanged="onStateRecorderChanged"
-        @finishRecord="onFinishRecorder"
+        @recorder-progress-changed="onRecordProgressChanged"
+        @state-recorder-changed="onStateRecorderChanged"
+        @finish-record="onFinishRecorder"
      />
      <ResizableTextArea
        v-else-if="!showRichContentEditor"
@@ -1142,8 +1140,8 @@ export default {
        :signature="signatureToApply"
        allow-signature
        :send-with-signature="sendWithSignature"
-        @typingOff="onTypingOff"
-        @typingOn="onTypingOn"
+        @typing-off="onTypingOff"
+        @typing-on="onTypingOn"
        @focus="onFocus"
        @blur="onBlur"
      />
@@ -1161,21 +1159,21 @@ export default {
        :signature="signatureToApply"
        allow-signature
        :channel-type="channelType"
-        @typingOff="onTypingOff"
-        @typingOn="onTypingOn"
+        @typing-off="onTypingOff"
+        @typing-on="onTypingOn"
        @focus="onFocus"
        @blur="onBlur"
-        @toggleUserMention="toggleUserMention"
-        @toggleCannedMenu="toggleCannedMenu"
-        @toggleVariablesMenu="toggleVariablesMenu"
-        @clearSelection="clearEditorSelection"
+        @toggle-user-mention="toggleUserMention"
+        @toggle-canned-menu="toggleCannedMenu"
+        @toggle-variables-menu="toggleVariablesMenu"
+        @clear-selection="clearEditorSelection"
      />
    </div>
    <div v-if="hasAttachments" class="attachment-preview-box" @paste="onPaste">
      <AttachmentPreview
        class="flex-col mt-4"
        :attachments="attachedFiles"
-        @removeAttachment="removeAttachment"
+        @remove-attachment="removeAttachment"
      />
    </div>
    <MessageSignatureMissingAlert
@@ -1205,16 +1203,16 @@ export default {
      :message="message"
      :portal-slug="connectedPortalSlug"
      :new-conversation-modal-active="newConversationModalActive"
-      @selectWhatsappTemplate="openWhatsappTemplateModal"
-      @toggleEditor="toggleRichContentEditor"
-      @replaceText="replaceText"
-      @toggleInsertArticle="toggleInsertArticle"
+      @select-whatsapp-template="openWhatsappTemplateModal"
+      @toggle-editor="toggleRichContentEditor"
+      @replace-text="replaceText"
+      @toggle-insert-article="toggleInsertArticle"
    />
    <WhatsappTemplates
      :inbox-id="inbox.id"
      :show="showWhatsAppTemplatesModal"
      @close="hideWhatsappTemplatesModal"
-      @onSend="onSendWhatsAppReply"
+      @on-send="onSendWhatsAppReply"
      @cancel="hideWhatsappTemplatesModal"
    />

@@ -9,6 +9,7 @@ export default {
      required: true,
    },
  },
+  emits: ['dismiss'],
 };
 </script>

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

@@ -19,6 +19,7 @@ export default {
      default: () => ({}),
    },
  },
+  emits: ['sendMessage', 'resetTemplate'],
  setup(props, { emit }) {
    const processVariable = str => {
      return str.replace(/{{|}}/g, '');
@@ -9,6 +9,7 @@ export default {
      default: undefined,
    },
  },
+  emits: ['onSelect'],
  data() {
    return {
      query: '',
@@ -7,6 +7,7 @@ export default {
      required: true,
    },
  },
+  emits: ['error'],
  data() {
    return {
      show: false,
@@ -21,6 +21,7 @@ export default {
      required: true,
    },
  },
+  emits: ['error'],
  data() {
    return {
      show: false,
@@ -15,6 +15,7 @@ export default {
      default: '',
    },
  },
+  emits: ['error'],
  data() {
    return {
      hasImgStoryError: false,
@@ -31,6 +31,7 @@ export default {
 };
 </script>

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

+<!-- eslint-disable-next-line vue/no-root-v-if -->
 <template>
  <div
    v-if="showHead"
@@ -10,6 +10,7 @@ export default {
      default: '',
    },
  },
+  emits: ['close'],
  computed: {
    translationsAvailable() {
      return !!Object.keys(this.translations).length;
@@ -6,6 +6,7 @@ export default {
      required: true,
    },
  },
+  emits: ['error'],
  data() {
    return {
      show: false,
@@ -103,6 +103,7 @@ export default {
 };
 </script>

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

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

 export default {
+  emits: ['update', 'close', 'assign'],
  data() {
    return {
      query: '',
@@ -1,6 +1,8 @@
 <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"
-        @unlinkIssue="unlinkIssue"
+        @unlink-issue="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"
-          @onSearch="onSearch"
+          @on-search="onSearch"
          @select="onSelectIssue"
        />
      </template>
@@ -119,7 +119,7 @@ onMounted(() => {
      :issue="linkedIssue.issue"
      :link-id="linkedIssue.id"
      class="absolute right-0 top-[40px] invisible group-hover:visible"
-      @unlinkIssue="unlinkIssue"
+      @unlink-issue="unlinkIssue"
    />
    <woot-modal
      v-model:show="shouldShowPopup"
@@ -18,6 +18,7 @@ export default {
      default: false,
    },
  },
+  emits: ['onAvatarSelect', 'onAvatarDelete'],
  watch: {},
  methods: {
    handleImageUpload(event) {
@@ -16,6 +16,8 @@ defineProps({
  },
 });

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

 const shortcutKeys = SHORTCUT_KEYS;