feat: add input component

Signed-off-by: Ryan Wang <i@ryanc.cc>

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>

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();
+  });
+});

src/components/base/input/index.ts

@@ -0,0 +1 @@
+export { default as VInput } from "./Input.vue";

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",

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>