Placeholder support for Input

app/pages/components/Input.vue

@@ -3,5 +3,5 @@ import { Input } from "@/components/input"
 </script>
 
 <template>
-  <Input data-cy="input" />
+  <Input placeholder="Enter your name" data-cy="input" />
 </template>

src/components/input/Input.vue

@@ -7,6 +7,7 @@ const props = defineProps<{
   defaultValue?: string | number
   modelValue?: string | number
   class?: HTMLAttributes["class"]
+  placeholder?: string
 }>()
 
 const emits = defineEmits<{
@@ -22,6 +23,7 @@ const modelValue = useVModel(props, "modelValue", emits, {
 <template>
   <input
     v-model="modelValue"
+    :placeholder
     :class="
       cn(
         'flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50',

src/components/input/input.spec.ts

@@ -1,5 +1,9 @@
 describe("template spec", () => {
-  it("passes", () => {
+  beforeEach(() => {
     cy.visit("/components/input")
   })
+
+  it("contains placeholder", () => {
+    cy.get("input").should("exist").and("have.attr", "placeholder", "Enter your name")
+  })
 })