feat(ui): add `label` convenience prop to input

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"

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.