feat: Vite + vue 3 💚 (#10047)

Fixes https://github.com/chatwoot/chatwoot/issues/8436 Fixes https://github.com/chatwoot/chatwoot/issues/9767 Fixes https://github.com/chatwoot/chatwoot/issues/10156 Fixes https://github.com/chatwoot/chatwoot/issues/6031 Fixes https://github.com/chatwoot/chatwoot/issues/5696 Fixes https://github.com/chatwoot/chatwoot/issues/9250 Fixes https://github.com/chatwoot/chatwoot/issues/9762 --------- Co-authored-by: Pranav <pranavrajs@gmail.com> Co-authored-by: Sivin Varghese <64252451+iamsivin@users.noreply.github.com>
2024-10-02 00:36:30 -07:00
parent e0bf2bd9d4
commit 42f6621afb
661 changed files with 15939 additions and 31194 deletions
@@ -35,7 +35,18 @@ export default {
  },

  watch: {
-    searchTerm() {
+    currentPage() {
+      this.clearSearchTerm();
+    },
+  },
+
+  unmounted() {
+    clearTimeout(this.typingTimer);
+  },
+
+  methods: {
+    onUpdateSearchTerm(value) {
+      this.searchTerm = value;
      if (this.typingTimer) {
        clearTimeout(this.typingTimer);
      }
@@ -46,16 +57,6 @@ export default {
        this.fetchArticlesByQuery();
      }, 1000);
    },
-    currentPage() {
-      this.clearSearchTerm();
-    },
-  },
-
-  beforeDestroy() {
-    clearTimeout(this.typingTimer);
-  },
-
-  methods: {
    onChange(e) {
      this.$emit('input', e.target.value);
    },
@@ -95,8 +96,9 @@ export default {
 <template>
  <div v-on-clickaway="closeSearch" class="relative w-full max-w-5xl my-4">
    <PublicSearchInput
-      v-model="searchTerm"
+      :search-term="searchTerm"
      :search-placeholder="searchTranslations.searchPlaceholder"
+      @update:searchTerm="onUpdateSearchTerm"
      @focus="openSearch"
    />
    <div
@@ -1,38 +1,33 @@
-<script>
+<script setup>
 import FluentIcon from 'shared/components/FluentIcon/Index.vue';
+import { ref } from 'vue';

-export default {
-  components: {
-    FluentIcon,
+defineProps({
+  searchTerm: {
+    type: [String, Number],
+    default: '',
  },
-  props: {
-    value: {
-      type: [String, Number],
-      default: '',
-    },
-    searchPlaceholder: {
-      type: String,
-      default: '',
-    },
-  },
-  data() {
-    return {
-      isFocused: false,
-    };
-  },
-  methods: {
-    onChange(e) {
-      this.$emit('input', e.target.value);
-    },
-    onFocus(e) {
-      this.isFocused = true;
-      this.$emit('focus', e.target.value);
-    },
-    onBlur(e) {
-      this.isFocused = false;
-      this.$emit('blur', e.target.value);
-    },
+  searchPlaceholder: {
+    type: String,
+    default: '',
  },
+});
+
+const emit = defineEmits(['update:searchTerm', 'focus', 'blur']);
+const isFocused = ref(false);
+
+const onChange = e => {
+  emit('update:searchTerm', e.target.value);
+};
+
+const onFocus = e => {
+  isFocused.value = true;
+  emit('focus', e.target.value);
+};
+
+const onBlur = e => {
+  isFocused.value = false;
+  emit('blur', e.target.value);
 };
 </script>

@@ -46,7 +41,7 @@ export default {
  >
    <FluentIcon icon="search" />
    <input
-      :value="value"
+      :value="searchTerm"
      type="text"
      class="w-full focus:outline-none text-base h-full bg-white dark:bg-slate-900 px-2 py-2 text-slate-700 dark:text-slate-100 placeholder-slate-500"
      :placeholder="searchPlaceholder"
@@ -24,7 +24,7 @@ export default {
    this.initializeIntersectionObserver();
    window.addEventListener('hashchange', this.onURLHashChange);
  },
-  beforeDestroy() {
+  unmounted() {
    window.removeEventListener('hashchange', this.onURLHashChange);
    if (this.intersectionObserver) {
      this.intersectionObserver.disconnect();
@@ -1,10 +1,12 @@
-import slugifyWithCounter from '@sindresorhus/slugify';
-import Vue from 'vue';
+import { createApp } from 'vue';
+import VueDOMPurifyHTML from 'vue-dompurify-html';
+import { domPurifyConfig } from '../shared/helpers/HTMLSanitizer';
+import { directive as onClickaway } from 'vue3-click-away';

+import slugifyWithCounter from '@sindresorhus/slugify';
 import PublicArticleSearch from './components/PublicArticleSearch.vue';
 import TableOfContents from './components/TableOfContents.vue';
 import { initializeTheme } from './portalThemeHelper.js';
-import { directive as onClickaway } from 'vue-clickaway';

 export const getHeadingsfromTheArticle = () => {
  const rows = [];
@@ -79,29 +81,37 @@ export const InitializationHelpers = {
  initializeSearch: () => {
    const isSearchContainerAvailable = document.querySelector('#search-wrap');
    if (isSearchContainerAvailable) {
-      new Vue({
+      // eslint-disable-next-line vue/one-component-per-file
+      const app = createApp({
        components: { PublicArticleSearch },
-        directives: {
-          'on-clickaway': onClickaway,
-        },
        template: '<PublicArticleSearch />',
-      }).$mount('#search-wrap');
+      });
+
+      app.use(VueDOMPurifyHTML, domPurifyConfig);
+      app.directive('on-clickaway', onClickaway);
+      app.mount('#search-wrap');
    }
  },

  initializeTableOfContents: () => {
    const isOnArticlePage = document.querySelector('#cw-hc-toc');
    if (isOnArticlePage) {
-      new Vue({
+      // eslint-disable-next-line vue/one-component-per-file
+      const app = createApp({
        components: { TableOfContents },
-        data: { rows: getHeadingsfromTheArticle() },
+        data() {
+          return { rows: getHeadingsfromTheArticle() };
+        },
        template: '<table-of-contents :rows="rows" />',
-      }).$mount('#cw-hc-toc');
+      });
+
+      app.use(VueDOMPurifyHTML, domPurifyConfig);
+      app.mount('#cw-hc-toc');
    }
  },

  appendPlainParamToURLs: () => {
-    document.getElementsByTagName('a').forEach(aTagElement => {
+    [...document.getElementsByTagName('a')].forEach(aTagElement => {
      if (aTagElement.href && aTagElement.href.includes('/hc/')) {
        const url = new URL(aTagElement.href);
        url.searchParams.set('show_plain_layout', 'true');