From a2abc9362dcc9359111b128cb7fa64d1d00ef6e5 Mon Sep 17 00:00:00 2001
From: Ryan Wang <i@ryanc.cc>
Date: Wed, 13 Apr 2022 16:04:05 +0800
Subject: [PATCH] feat: add input component

Signed-off-by: Ryan Wang <i@ryanc.cc>
---
 src/components/base/input/Input.vue             | 17 +++++++++++++++++
 .../base/input/__tests__/Input.spec.ts          |  8 ++++++++
 src/components/base/input/index.ts              |  1 +
 src/router/routes.config.ts                     |  2 +-
 src/views/HomeView.vue                          |  7 +++++++
 5 files changed, 34 insertions(+), 1 deletion(-)
 create mode 100644 src/components/base/input/Input.vue
 create mode 100644 src/components/base/input/__tests__/Input.spec.ts
 create mode 100644 src/components/base/input/index.ts

diff --git a/src/components/base/input/Input.vue b/src/components/base/input/Input.vue
new file mode 100644
index 00000000..8a6ac098
--- /dev/null
+++ b/src/components/base/input/Input.vue
@@ -0,0 +1,17 @@
+<script lang="ts" setup>
+defineProps({
+  modelValue: {
+    type: String,
+  },
+});
+
+const emit = defineEmits(["update:modelValue"]);
+
+function handleInput(e: Event) {
+  const { value } = e.target as HTMLInputElement;
+  emit("update:modelValue", value);
+}
+</script>
+<template>
+  <input type="text" :value="modelValue" @input="handleInput" />
+</template>
diff --git a/src/components/base/input/__tests__/Input.spec.ts b/src/components/base/input/__tests__/Input.spec.ts
new file mode 100644
index 00000000..85d3e9fa
--- /dev/null
+++ b/src/components/base/input/__tests__/Input.spec.ts
@@ -0,0 +1,8 @@
+import { describe, expect, it } from "vitest";
+import { VInput } from "../index";
+
+describe("Input", () => {
+  it("should render", () => {
+    expect(VInput).toBeDefined();
+  });
+});
diff --git a/src/components/base/input/index.ts b/src/components/base/input/index.ts
new file mode 100644
index 00000000..927f1dd3
--- /dev/null
+++ b/src/components/base/input/index.ts
@@ -0,0 +1 @@
+export { default as VInput } from "./Input.vue";
diff --git a/src/router/routes.config.ts b/src/router/routes.config.ts
index ad219f9a..36b05b44 100644
--- a/src/router/routes.config.ts
+++ b/src/router/routes.config.ts
@@ -4,7 +4,7 @@ export const routes: Array<RouteRecordRaw> = [
   {
     path: "/",
     name: "Dashboard",
-    component: () => import("../views/AboutView.vue"),
+    component: () => import("../views/HomeView.vue"),
   },
   {
     path: "/about",
diff --git a/src/views/HomeView.vue b/src/views/HomeView.vue
index 3a4ed8da..8ffe89fb 100644
--- a/src/views/HomeView.vue
+++ b/src/views/HomeView.vue
@@ -1,3 +1,10 @@
 <template>
   <main class="text-red-600">Hello Halo!</main>
+  <VInput v-model="value" />
+  {{ value }}
 </template>
+<script lang="ts" setup>
+import { VInput } from "@/components/base/input";
+import { ref } from "vue";
+const value = ref();
+</script>