From 9e3f2cfb573d614e2cec324fa9c3dd6f02ce79ac Mon Sep 17 00:00:00 2001
From: upsiflu <upsiflu@gmail.com>
Date: Sun, 29 Dec 2024 18:04:32 +0100
Subject: [PATCH] feat(ui): add `label` convenience prop to input

---
 front/src/components/ui/Input.vue    | 13 +++++++++----
 front/ui-docs/components/ui/input.md | 24 ++++++++++++++++++++++++
 2 files changed, 33 insertions(+), 4 deletions(-)

diff --git a/front/src/components/ui/Input.vue b/front/src/components/ui/Input.vue
index ba3e7fb11..f8b07af2c 100644
--- a/front/src/components/ui/Input.vue
+++ b/front/src/components/ui/Input.vue
@@ -8,10 +8,11 @@ import Layout from "~/components/ui/Layout.vue"
 
 const { icon, placeholder, ...restProps } = defineProps<{
   icon?: string,
-  placeholder?:string,
-  password?:true,
-  search?:true,
-  numeric?:true,
+  placeholder?: string,
+  password?: true,
+  search?: true,
+  numeric?: true,
+  label?: string,
 }>()
 
 // TODO(A11y): Add `inputmode="numeric" pattern="[0-9]*"` to input if model type is number:
@@ -45,6 +46,10 @@ const model = defineModel<string|number>()
       <slot name="label" />
     </span>
 
+    <span v-if="restProps.label" class="label">
+      {{ restProps.label }}
+    </span>
+
     <input
     v-bind="{...$attrs, ...attributes}"
     v-model="model"
diff --git a/front/ui-docs/components/ui/input.md b/front/ui-docs/components/ui/input.md
index 62a6e2838..dcaf35eb4 100644
--- a/front/ui-docs/components/ui/input.md
+++ b/front/ui-docs/components/ui/input.md
@@ -35,6 +35,30 @@ Add a [Bootstrap icon](https://icons.getbootstrap.com/) to an input to make its
 
 <Input icon="bi-search" placeholder="Search" />
 
+## Label slot
+
+```vue-html{2-4}
+<Input>
+  <template #label>
+    User name
+  </template>
+</Input>
+```
+
+<Input>
+  <template #label>
+    User name
+  </template>
+</Input>
+
+If you just have a string, we have a convenience prop, so instead you can write:
+
+```vue-html
+<Input label="User name" />
+```
+
+<Input label="User name" />
+
 ## Input-right slot
 
 You can add a template on the right-hand side of the input to guide the user's input.