Fixed Dropdown component test fail.

- Fixed all eslint errors.
auroral-ui · May 3, 2021 · 07b1685 · 07b1685
1 parent b9c0ca9
commit 07b1685
Show file tree

Hide file tree

Showing 29 changed files with 115 additions and 99 deletions.
diff --git a/src/App.vue b/src/App.vue
@@ -44,6 +44,7 @@ import {
   watch
 } from 'vue'
 import { useAppStore } from '@/stores/app'
+import { useCommonStore } from '@/stores/common'
 import { useMetaStore } from '@/stores/meta'
 import { useSearchStore } from './stores/search'
 import HeaderMain from '@/components/Header/src/Header.vue'
@@ -63,6 +64,7 @@ export default defineComponent({
   },
   setup() {
     const appStore = useAppStore()
+    const commonStore = useCommonStore()
     const metaStore = useMetaStore()
     const searchStore = useSearchStore()
     const MOBILE_WITH = 996 // Using the mobile width by Bootstrap design.
@@ -128,14 +130,14 @@ export default defineComponent({
     }
 
     const isMobile = computed(() => {
-      return appStore.isMobile
+      return commonStore.isMobile
     })
 
     const resizeHanler = () => {
       const rect = document.body.getBoundingClientRect()
       const mobileState = rect.width - 1 < MOBILE_WITH
       if (isMobile.value !== mobileState)
-        appStore.changeMobileState(mobileState)
+        commonStore.changeMobileState(mobileState)
     }
 
     const initResizeEvent = () => {
@@ -187,20 +189,20 @@ export default defineComponent({
       headerImage: computed(() => {
         return {
           backgroundImage: `url(${
-            appStore.headerImage
+            commonStore.headerImage
           }), url(${require('@/assets/default-cover.jpg')})`,
-          opacity: appStore.headerImage !== '' ? 1 : 0
+          opacity: commonStore.headerImage !== '' ? 1 : 0
         }
       }),
       headerBaseBackground: computed(() => {
         return {
           background: appStore.themeConfig.theme.header_gradient_css,
-          opacity: appStore.headerImage !== '' ? 0.91 : 0.99
+          opacity: commonStore.headerImage !== '' ? 0.91 : 0.99
         }
       }),
       wrapperStyle: computed(() => wrapperStyle.value),
       handleEscKey: appStore.handleEscKey,
-      isMobile: computed(() => appStore.isMobile),
+      isMobile: computed(() => commonStore.isMobile),
       configReady: computed(() => appStore.configReady),
       cssVariables: computed(() => {
         if (appStore.theme === 'theme-dark') {

diff --git a/src/components/Dia.vue b/src/components/Dia.vue
@@ -42,7 +42,7 @@ export default defineComponent({
 
     watch(
       () => appStore.configReady,
-      (value) => {
+      value => {
         if (value) {
           initializeBot()
         }

diff --git a/src/components/Dropdown/src/Dropdown.vue b/src/components/Dropdown/src/Dropdown.vue
@@ -13,7 +13,7 @@
 <script lang="ts">
 import { defineComponent, provide, reactive, ref, toRefs, watch } from 'vue'
 import { useDropdownStore } from '@/stores/dropdown'
-import { useAppStore } from '@/stores/app'
+import { useCommonStore } from '@/stores/common'
 
 export default defineComponent({
   emits: ['command'],
@@ -25,7 +25,7 @@ export default defineComponent({
     }
   },
   setup(props, { emit }) {
-    const appStore = useAppStore()
+    const commonStore = useCommonStore()
     const mouseHover = toRefs(props).hover
     const dropdownStore = useDropdownStore()
     const eventId = ref(0)
@@ -50,7 +50,7 @@ export default defineComponent({
     }
 
     const onClickAway = () => {
-      if (!mouseHover.value && !appStore.isMobile) {
+      if (!mouseHover.value && !commonStore.isMobile) {
         sharedState.active = false
         eventId.value = 0
       }

diff --git a/src/components/MobileMenu.vue b/src/components/MobileMenu.vue
@@ -132,7 +132,7 @@ export default defineComponent({
     const authorData = ref(new AuthorPosts())
 
     const fetchAuthor = async () => {
-      await authorStore.fetchAuthorData('blog-author').then((data) => {
+      await authorStore.fetchAuthorData('blog-author').then(data => {
         authorData.value = data
       })
     }

diff --git a/src/components/Navigator.vue b/src/components/Navigator.vue
@@ -108,11 +108,13 @@ import { useI18n } from 'vue-i18n'
 import { useNavigatorStore } from '@/stores/navigator'
 import { useRouter } from 'vue-router'
 import { useSearchStore } from '@/stores/search'
+import { useCommonStore } from '@/stores/common'
 
 export default defineComponent({
   name: 'ObNavigator',
   setup() {
     const appStore = useAppStore()
+    const commonStore = useCommonStore()
     const { t } = useI18n()
     const navigatorStore = useNavigatorStore()
     const searchStore = useSearchStore()
@@ -206,7 +208,7 @@ export default defineComponent({
       showProgress: computed(() => {
         return progress.value > 5
       }),
-      isMobile: computed(() => appStore.isMobile),
+      isMobile: computed(() => commonStore.isMobile),
       openNavigator: computed(() => navigatorStore.openNavigator),
       progress,
       handleNavigatorToggle,

diff --git a/src/components/PageContainer.vue b/src/components/PageContainer.vue
@@ -71,7 +71,7 @@ import {
 } from 'vue'
 import { useI18n } from 'vue-i18n'
 import { Sidebar, Toc, Profile } from '@/components/Sidebar'
-import { useAppStore } from '@/stores/app'
+import { useCommonStore } from '@/stores/common'
 
 export default defineComponent({
   name: 'ObPageContainer',
@@ -89,7 +89,7 @@ export default defineComponent({
     }
   },
   setup(props) {
-    const appStore = useAppStore()
+    const commonStore = useCommonStore()
     const { t } = useI18n()
     const post = toRefs(props).post
     const title = toRefs(props).title
@@ -98,16 +98,16 @@ export default defineComponent({
       () => post.value.covers,
       value => {
         console.log(value)
-        if (value) appStore.setHeaderImage(value)
+        if (value) commonStore.setHeaderImage(value)
       }
     )
 
     onMounted(() => {
-      appStore.setHeaderImage(post.value.covers)
+      commonStore.setHeaderImage(post.value.covers)
     })
 
     onUnmounted(() => {
-      appStore.resetHeaderImage()
+      commonStore.resetHeaderImage()
     })
 
     return {

diff --git a/src/components/SearchModal.vue b/src/components/SearchModal.vue
@@ -492,7 +492,7 @@ export default defineComponent({
 
     watch(
       () => searchStore.openModal,
-      (status) => {
+      status => {
         /**
          * This watch is used to delay the animation
          * of the search box container.

diff --git a/src/components/Sidebar/src/Profile.vue b/src/components/Sidebar/src/Profile.vue
@@ -105,7 +105,7 @@ export default defineComponent({
 
     const fetchAuthor = async () => {
       if (author.value === '') return
-      await authorStore.fetchAuthorData(author.value).then((data) => {
+      await authorStore.fetchAuthorData(author.value).then(data => {
         authorData.value = data
       })
     }

diff --git a/src/components/Sidebar/src/RecentComment.vue b/src/components/Sidebar/src/RecentComment.vue
@@ -108,7 +108,7 @@ export default defineComponent({
           admin: appStore.themeConfig.plugins.gitalk.admin[0]
         })
 
-        githubComments.getComments().then((response) => {
+        githubComments.getComments().then(response => {
           recentComments.value = response
         })
       } else if (
@@ -123,7 +123,7 @@ export default defineComponent({
           lang: appStore.themeConfig.plugins.valine.lang
         })
 
-        leadCloudComments.getRecentComments(7).then((response) => {
+        leadCloudComments.getRecentComments(7).then(response => {
           recentComments.value = response
         })
       }

diff --git a/src/components/Sidebar/src/Sidebar.vue b/src/components/Sidebar/src/Sidebar.vue
@@ -5,14 +5,14 @@
 </template>
 
 <script lang="ts">
-import { useAppStore } from '@/stores/app'
+import { useCommonStore } from '@/stores/common'
 import { computed, defineComponent } from 'vue'
 
 export default defineComponent({
   name: 'ObSidebar',
   setup() {
-    const appStore = useAppStore()
-    return { isMobile: computed(() => appStore.isMobile) }
+    const commonStore = useCommonStore()
+    return { isMobile: computed(() => commonStore.isMobile) }
   }
 })
 </script>

diff --git a/src/locales/index.ts b/src/locales/index.ts
@@ -11,7 +11,7 @@ function loadLocaleMessages(): {
   const messages: {
     [key: string]: { [key: string]: { [key: string]: string } }
   } = {}
-  locales.keys().forEach((key) => {
+  locales.keys().forEach(key => {
     const matched = key.match(/([A-Za-z0-9-_]+)\./i)
     if (matched && matched.length > 1) {
       const locale = matched[1]

diff --git a/src/models/Search.class.ts b/src/models/Search.class.ts
@@ -53,7 +53,7 @@ export class RecentSearchResults {
   }
 
   initData(data: { [key: string]: string }[]): void {
-    data.forEach((value) => {
+    data.forEach(value => {
       this.add(value)
     })
   }
@@ -162,7 +162,7 @@ export class SearchIndexes {
 
     const matchedResult: SearchResultType[] = []
 
-    this.indexes.forEach((data) => {
+    this.indexes.forEach(data => {
       if (!data.title || data.title.trim() === '') data.title = 'Untitled'
 
       const originalTitle = data.title.trim()

diff --git a/src/stores/app.ts b/src/stores/app.ts
@@ -63,12 +63,8 @@ export const useAppStore = defineStore({
     loadingTimeout: -1,
     /** Tracking if the blog config is ready */
     configReady: false,
-    /** Header image url */
-    headerImage: '',
     /** Is search modal opened */
-    openSearchModal: false,
-    /** If current window with is for mobile */
-    isMobile: false
+    openSearchModal: false
   }),
   getters: {
     getTheme(): string {
@@ -150,14 +146,6 @@ export const useAppStore = defineStore({
         this.appLoading = false
       }, 300)
     },
-    /** Setting the image url for the header */
-    setHeaderImage(imageUrl: string) {
-      this.headerImage = imageUrl
-    },
-    /** Resetting the header image to null */
-    resetHeaderImage() {
-      this.headerImage = ''
-    },
     changeOpenModal(status: boolean) {
       this.openSearchModal = status
     },
@@ -166,9 +154,6 @@ export const useAppStore = defineStore({
     },
     handleSearchOpen() {
       if (!this.openSearchModal) this.openSearchModal = true
-    },
-    changeMobileState(isMobile: boolean) {
-      this.isMobile = isMobile
     }
   }
 })
diff --git a/src/stores/article.ts b/src/stores/article.ts
@@ -11,7 +11,7 @@ export const useArticleStore = defineStore({
   actions: {
     async fetchArticle(source: string): Promise<Page> {
       const { data } = await fetchImplicitPageBySource(source)
-      return new Promise((resolve) =>
+      return new Promise(resolve =>
         setTimeout(() => {
           resolve(new Page(data))
         }, 200)

diff --git a/src/stores/author.ts b/src/stores/author.ts
@@ -12,7 +12,7 @@ export const useAuthorStore = defineStore({
     /** Fetching author's info */
     async fetchAuthorData(slug: string): Promise<AuthorPosts> {
       const { data } = await fetchAuthorPost(slug)
-      return new Promise((resolve) => {
+      return new Promise(resolve => {
         resolve(new AuthorPosts(data))
       })
     }

diff --git a/src/stores/category.ts b/src/stores/category.ts
@@ -15,7 +15,7 @@ export const useCategoryStore = defineStore({
     async fetchCategories() {
       this.isLoaded = false
       const { data } = await fetchAllCategories()
-      return new Promise((resolve) => {
+      return new Promise(resolve => {
         this.isLoaded = true
         this.categories = new Categories(data).data
         resolve(this.categories)

diff --git a/src/stores/common.ts b/src/stores/common.ts
@@ -0,0 +1,27 @@
+import { defineStore } from 'pinia'
+
+export const useCommonStore = defineStore({
+  // id is the name of the store
+  // it is used in devtools and allows restoring state
+  id: 'commonStore',
+  state: () => ({
+    /** If current window width is for mobile */
+    isMobile: false,
+    /** Header image url */
+    headerImage: ''
+  }),
+  getters: {},
+  actions: {
+    /** Setting the image url for the header */
+    setHeaderImage(imageUrl: string) {
+      this.headerImage = imageUrl
+    },
+    /** Resetting the header image to null */
+    resetHeaderImage() {
+      this.headerImage = ''
+    },
+    changeMobileState(isMobile: boolean) {
+      this.isMobile = isMobile
+    }
+  }
+})
diff --git a/src/stores/post.ts b/src/stores/post.ts
@@ -32,7 +32,7 @@ export const usePostStore = defineStore({
   actions: {
     async fetchFeaturePosts() {
       const { data } = await fetchFeature()
-      return new Promise((resolve) =>
+      return new Promise(resolve =>
         setTimeout(() => {
           this.featurePosts = new FeaturePosts(data)
           resolve(this.featurePosts)
@@ -42,7 +42,7 @@ export const usePostStore = defineStore({
     async fetchPostsList(page?: number): Promise<PostList> {
       if (!page) page = 1
       const { data } = await fetchPostsList(page)
-      return new Promise((resolve) =>
+      return new Promise(resolve =>
         setTimeout(() => {
           this.posts = new PostList(data)
           this.postTotal = this.posts.total
@@ -53,31 +53,31 @@ export const usePostStore = defineStore({
     async fetchArchives(page?: number): Promise<Archives> {
       if (!page) page = 1
       const { data } = await fetchPostsList(page)
-      return new Promise((resolve) =>
+      return new Promise(resolve =>
         setTimeout(() => {
           resolve(new Archives(data))
         }, 200)
       )
     },
     async fetchPost(slug: string): Promise<Post> {
       const { data } = await fetchPostBySlug(slug)
-      return new Promise((resolve) =>
+      return new Promise(resolve =>
         setTimeout(() => {
           resolve(new Post(data))
         }, 200)
       )
     },
     async fetchPostsByCategory(category: string): Promise<SpecificPostsList> {
       const { data } = await fetchPostsListByCategory(category)
-      return new Promise((resolve) =>
+      return new Promise(resolve =>
         setTimeout(() => {
           resolve(new SpecificPostsList(data))
         }, 200)
       )
     },
     async fetchPostsByTag(slug: string): Promise<SpecificPostsList> {
       const { data } = await fetchPostsListByTag(slug)
-      return new Promise((resolve) => {
+      return new Promise(resolve => {
         setTimeout(() => {
           resolve(new SpecificPostsList(data))
         }, 200)