This commit is contained in:
@@ -1,20 +1,23 @@
|
||||
<script setup lang="ts">
|
||||
const props = defineProps<{ title?: string, buttonLabel?: string }>()
|
||||
const emit = defineEmits<{ submit: [name: string] }>()
|
||||
const props = defineProps<{ title?: string; buttonLabel?: string }>();
|
||||
const emit = defineEmits<{ submit: [name: string] }>();
|
||||
|
||||
const name = ref('')
|
||||
const name = ref('');
|
||||
|
||||
function onSubmit() {
|
||||
if (!name.value.trim()) return
|
||||
emit('submit', name.value.trim())
|
||||
if (!name.value.trim()) return;
|
||||
emit('submit', name.value.trim());
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<form class="space-y-3" @submit.prevent="onSubmit">
|
||||
<div>
|
||||
<label for="name" class="block text-sm font-medium text-stone-700 dark:text-stone-300">
|
||||
{{ props.title ?? 'What\'s your name?' }}
|
||||
<label
|
||||
for="name"
|
||||
class="block text-sm font-medium text-stone-700 dark:text-stone-300"
|
||||
>
|
||||
{{ props.title ?? "What's your name?" }}
|
||||
</label>
|
||||
<input
|
||||
id="name"
|
||||
@@ -24,7 +27,7 @@ function onSubmit() {
|
||||
required
|
||||
class="mt-1 block w-full rounded-xl border border-stone-300 bg-white px-3 py-2 text-base text-stone-900 shadow-sm placeholder:text-stone-400 focus:border-orange-400 focus:outline-none focus:ring-2 focus:ring-orange-200 dark:border-stone-700 dark:bg-stone-900 dark:text-stone-100 dark:placeholder:text-stone-500 dark:focus:ring-orange-900"
|
||||
placeholder="Your name"
|
||||
>
|
||||
/>
|
||||
</div>
|
||||
<button
|
||||
type="submit"
|
||||
|
||||
Reference in New Issue
Block a user