Menu in RPGJS

prompt.vue

<template>
     <div id="prompt">
        <rpg-window position="middle">
            <p>{{ text }}</p>
            <input type="text" v-model="promptText">
            <p class="small">(Enter to validate)</p>
        </rpg-window>
    </div>
</template>

<script lang="ts">
import { Control } from '@rpgjs/client'

export default {
    props: ['text'],
    name: 'prompt',
    inject: ['rpgKeypress', 'rpgGuiClose'],
    data() {
        return {
            promptText: ''
        }
    },
    mounted() {
        this.obsKeyPress = this.rpgKeypress.subscribe(({ control }) => {
            if (control?.actionName == Control.Action) {
                this.rpgGuiClose('prompt', {
                    promptText: this.promptText
                })
            }
        })
    },
    unmounted() {
        this.obsKeyPress.unsubscribe()
    }
}
</script>

<style>
#prompt {
    position: absolute;
    z-index: 51;
    width: 100%;
    height: 100%;
}

#prompt input {
    margin-top: 15px;
    margin-left: 0;
    height: 40px;
    font-size: 20px;
}

#prompt > div {
    height: 100%;
}

.window-content p.small {
    font-size: 12px;
}
</style>