From 01e0cbbb82d718e279f3149dde364753b9fcaff4 Mon Sep 17 00:00:00 2001
From: Anthony Fu <anthonyfu117@hotmail.com>
Date: Wed, 30 Nov 2022 08:05:45 +0800
Subject: [PATCH] fix: use two words component name

---
 src/components.d.ts                            | 6 +++---
 src/components/{Counter.vue => TheCounter.vue} | 0
 src/components/{Footer.vue => TheFooter.vue}   | 0
 src/components/{Input.vue => TheInput.vue}     | 0
 src/layouts/default.vue                        | 2 +-
 src/layouts/home.vue                           | 2 +-
 src/pages/hi/[name].vue                        | 4 ++--
 src/pages/index.vue                            | 2 +-
 test/__snapshots__/component.test.ts.snap      | 2 +-
 test/component.test.ts                         | 8 ++++----
 10 files changed, 13 insertions(+), 13 deletions(-)
 rename src/components/{Counter.vue => TheCounter.vue} (100%)
 rename src/components/{Footer.vue => TheFooter.vue} (100%)
 rename src/components/{Input.vue => TheInput.vue} (100%)

diff --git a/src/components.d.ts b/src/components.d.ts
index e9285bd..8b2ff34 100644
--- a/src/components.d.ts
+++ b/src/components.d.ts
@@ -7,11 +7,11 @@ export {}
 
 declare module '@vue/runtime-core' {
   export interface GlobalComponents {
-    Counter: typeof import('./components/Counter.vue')['default']
-    Footer: typeof import('./components/Footer.vue')['default']
-    Input: typeof import('./components/Input.vue')['default']
     README: typeof import('./components/README.md')['default']
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']
+    TheCounter: typeof import('./components/TheCounter.vue')['default']
+    TheFooter: typeof import('./components/TheFooter.vue')['default']
+    TheInput: typeof import('./components/TheInput.vue')['default']
   }
 }
diff --git a/src/components/Counter.vue b/src/components/TheCounter.vue
similarity index 100%
rename from src/components/Counter.vue
rename to src/components/TheCounter.vue
diff --git a/src/components/Footer.vue b/src/components/TheFooter.vue
similarity index 100%
rename from src/components/Footer.vue
rename to src/components/TheFooter.vue
diff --git a/src/components/Input.vue b/src/components/TheInput.vue
similarity index 100%
rename from src/components/Input.vue
rename to src/components/TheInput.vue
diff --git a/src/layouts/default.vue b/src/layouts/default.vue
index 8ad6202..8fca368 100644
--- a/src/layouts/default.vue
+++ b/src/layouts/default.vue
@@ -1,7 +1,7 @@
 <template>
   <main class="px-4 py-10 text-center text-gray-700 dark:text-gray-200">
     <RouterView />
-    <Footer />
+    <TheFooter />
     <div class="mt-5 mx-auto text-center opacity-75 dark:opacity-50 text-sm">
       [Default Layout]
     </div>
diff --git a/src/layouts/home.vue b/src/layouts/home.vue
index 7ff5a06..65a4646 100644
--- a/src/layouts/home.vue
+++ b/src/layouts/home.vue
@@ -1,7 +1,7 @@
 <template>
   <main class="px-4 py-10 text-center text-gray-700 dark:text-gray-200">
     <RouterView />
-    <Footer />
+    <TheFooter />
     <div class="mt-5 mx-auto text-center opacity-75 dark:opacity-50 text-sm">
       [Home Layout]
     </div>
diff --git a/src/pages/hi/[name].vue b/src/pages/hi/[name].vue
index d741d69..dbb5579 100644
--- a/src/pages/hi/[name].vue
+++ b/src/pages/hi/[name].vue
@@ -27,9 +27,9 @@ watchEffect(() => {
         <span opacity-75>{{ t('intro.aka') }}:</span>
         <ul>
           <li v-for="otherName in user.otherNames" :key="otherName">
-            <router-link :to="`/hi/${otherName}`" replace>
+            <RouterLink :to="`/hi/${otherName}`" replace>
               {{ otherName }}
-            </router-link>
+            </RouterLink>
           </li>
         </ul>
       </p>
diff --git a/src/pages/index.vue b/src/pages/index.vue
index dc39b71..8adadbf 100644
--- a/src/pages/index.vue
+++ b/src/pages/index.vue
@@ -30,7 +30,7 @@ const { t } = useI18n()
 
     <div py-4 />
 
-    <Input
+    <TheInput
       v-model="name"
       placeholder="What's your name?"
       autocomplete="false"
diff --git a/test/__snapshots__/component.test.ts.snap b/test/__snapshots__/component.test.ts.snap
index f5a07c8..ea4d47c 100644
--- a/test/__snapshots__/component.test.ts.snap
+++ b/test/__snapshots__/component.test.ts.snap
@@ -1,3 +1,3 @@
 // Vitest Snapshot v1
 
-exports[`Counter.vue > should render 1`] = `"<div>10 <button class=\\"inc\\"> + </button><button class=\\"dec\\"> - </button></div>"`;
+exports[`TheCounter.vue > should render 1`] = `"<div>10 <button class=\\"inc\\"> + </button><button class=\\"dec\\"> - </button></div>"`;
diff --git a/test/component.test.ts b/test/component.test.ts
index 6ac9b41..a5bc63e 100644
--- a/test/component.test.ts
+++ b/test/component.test.ts
@@ -1,16 +1,16 @@
 import { mount } from '@vue/test-utils'
 import { describe, expect, it } from 'vitest'
-import Counter from '../src/components/Counter.vue'
+import TheCounter from '../src/components/TheCounter.vue'
 
-describe('Counter.vue', () => {
+describe('TheCounter.vue', () => {
   it('should render', () => {
-    const wrapper = mount(Counter, { props: { initial: 10 } })
+    const wrapper = mount(TheCounter, { props: { initial: 10 } })
     expect(wrapper.text()).toContain('10')
     expect(wrapper.html()).toMatchSnapshot()
   })
 
   it('should be interactive', async () => {
-    const wrapper = mount(Counter, { props: { initial: 0 } })
+    const wrapper = mount(TheCounter, { props: { initial: 0 } })
     expect(wrapper.text()).toContain('0')
 
     expect(wrapper.find('.inc').exists()).toBe(true)