syng-web/src/components/GetUserName.vue

37 lines
942 B
Vue

<script setup>
const props = defineProps(["current_name","current_entry"])
const emits = defineEmits(["update:currentName", "append", "close_name"])
</script>
<template>
<div class="reveal" id="getusername" @keyup.enter="$emit('append')" data-reveal >
<h1>Please enter your name</h1>
<label>Name
<input
type="text"
@input="(evt) => $emit('update:currentName', evt.target.value)"
placeholder="Arno Nym"
:value="current_name"
>
</label>
<div class="grid-x">
<div class="cell medium-6 small-12 btn">
<button
class="button expanded"
@click="$emit('append')"
>
Ok
</button>
</div>
<div class="cell medium-6 small-12 btn">
<button class="button expanded alert" @click="$emit('close_name')">Cancel</button>
</div>
</div>
</div>
</template>
<style scoped>
.btn {
padding: 3px;
}
</style>