From c47f5e6a68108ac3bffcb4ea15a29c32ab420fce Mon Sep 17 00:00:00 2001
From: Benjamin Canac <canacb1@gmail.com>
Date: Sun, 14 May 2023 15:04:56 +0200
Subject: [PATCH] docs: improve forms cards

---
 .../components/content/examples/SlideoverExample.vue |  6 +++---
 docs/content/3.forms/1.input.md                      |  5 +++--
 docs/content/3.forms/2.textarea.md                   | 12 ++++++------
 docs/content/3.forms/3.select.md                     |  9 ++++-----
 4 files changed, 16 insertions(+), 16 deletions(-)

diff --git a/docs/components/content/examples/SlideoverExample.vue b/docs/components/content/examples/SlideoverExample.vue
index 08583e5b..73c34998 100644
--- a/docs/components/content/examples/SlideoverExample.vue
+++ b/docs/components/content/examples/SlideoverExample.vue
@@ -1,12 +1,12 @@
 <script setup>
-const open = ref(false)
+const isOpen = ref(false)
 </script>
 
 <template>
   <div>
-    <UButton label="Open" @click="open = true" />
+    <UButton label="Open" @click="isOpen = true" />
 
-    <USlideover v-model="open">
+    <USlideover v-model="isOpen">
       <div class="p-4 h-full">
         <Placeholder class="w-full h-full" />
       </div>
diff --git a/docs/content/3.forms/1.input.md b/docs/content/3.forms/1.input.md
index aa363c80..ac9babcc 100644
--- a/docs/content/3.forms/1.input.md
+++ b/docs/content/3.forms/1.input.md
@@ -26,6 +26,8 @@ props:
 
 ### Placeholder
 
+Use the `placeholder` prop to set a placeholder text.
+
 ::component-card
 ---
 baseProps:
@@ -59,15 +61,14 @@ Use the `leading` and `trailing` props to set the icon position or the `leadingI
 ---
 baseProps:
   name: 'input'
+  placeholder: 'Search...'
 props:
   icon: 'i-heroicons-magnifying-glass-20-solid'
   appearance: 'white'
   size: 'sm'
   trailing: false
-  placeholder: 'Search...'
 excludedProps:
   - icon
-  - placeholder
 ---
 ::
 
diff --git a/docs/content/3.forms/2.textarea.md b/docs/content/3.forms/2.textarea.md
index d65156e2..96d380a5 100644
--- a/docs/content/3.forms/2.textarea.md
+++ b/docs/content/3.forms/2.textarea.md
@@ -13,7 +13,7 @@ baseProps:
 
 ### Size
 
-Use the `size` prop to change the size of the Input.
+Use the `size` prop to change the size of the Textarea.
 
 ::component-card
 ---
@@ -26,6 +26,8 @@ props:
 
 ### Placeholder
 
+Use the `placeholder` prop to set a placeholder text.
+
 ::component-card
 ---
 baseProps:
@@ -37,7 +39,7 @@ props:
 
 ### Appearance
 
-Use the `appearance` prop to change the style of the Input.
+Use the `appearance` prop to change the style of the Textarea.
 
 ::component-card
 ---
@@ -51,18 +53,16 @@ props:
 
 ### Disabled
 
-Use the `disabled` prop to disable the Input.
+Use the `disabled` prop to disable the Textarea.
 
 ::component-card
 ---
 baseProps:
   name: 'input'
-props:
   placeholder: 'Search...'
+props:
   appearance: 'white'
   disabled: true
-excludedProps:
-  - placeholder
 ---
 ::
 
diff --git a/docs/content/3.forms/3.select.md b/docs/content/3.forms/3.select.md
index ff6e1d7d..017e73d4 100644
--- a/docs/content/3.forms/3.select.md
+++ b/docs/content/3.forms/3.select.md
@@ -38,6 +38,8 @@ props:
 
 ### Placeholder
 
+Use the `placeholder` prop to set a placeholder text.
+
 ::component-card
 ---
 baseProps:
@@ -83,14 +85,13 @@ baseProps:
     - 'United States'
     - 'Canada'
     - 'Mexico'
+  placeholder: 'Search...'
 props:
   icon: 'i-heroicons-magnifying-glass-20-solid'
   appearance: 'white'
   size: 'sm'
-  placeholder: 'Search...'
 excludedProps:
   - icon
-  - placeholder
 ---
 ::
 
@@ -106,12 +107,10 @@ baseProps:
     - 'United States'
     - 'Canada'
     - 'Mexico'
-props:
   placeholder: 'Search...'
+props:
   appearance: 'white'
   disabled: true
-excludedProps:
-  - placeholder
 ---
 ::