<template> <Dialog title="New stash" @close="emit('close')" @open="stashNameInput?.focus()" > <form class="dialog-body" @submit.prevent="createStash" > <input ref="stashNameInput" v-model="stashName" maxlength="24" placeholder="Stash name" class="input" > <button class="button button-submit" >Create stash</button> </form> </Dialog> </template> <script setup> import { ref } from 'vue'; import { post } from '#/src/api.js'; import Dialog from '#/components/dialog/dialog.vue'; const emit = defineEmits(['created', 'close']); const stashName = ref(null); const stashNameInput = ref(null); async function createStash() { const newStash = await post('/stashes', { name: stashName.value, public: false, }, { successFeedback: `Created stash '${stashName.value}'`, errorFeedback: `Failed to create stash '${stashName.value}'`, appendErrorMessage: true, }); emit('created', newStash); stashName.value = null; } </script> <style scoped> .dialog-body { padding: 1rem; .input { margin-bottom: .5rem; } } </style>