GetUserName.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>