Inside the CardModal.vue component, we will display the card title in a textarea element, which will be in edit mode once you click on the title. Figure 13.3 shows how the edit mode looks:
The textarea of the card title needs to auto-resize so that when a user types more characters it will grow, and when the user deletes characters it will decrease its height to make it always fit the card title, and once a user presses the Enter key, we will save the card title to the server.
To do the auto-resize, we will use autosize (https://github.com/jackmoore/autosize), which is small, standalone, and easy to use.
The following shows how to auto-resize, as implemented in frontend/src/modals/CardModal.vue:
<template>
<div class="modal" id="cardModal">
<textarea id="cardTitle" class="auto-size" v-model="title"
@keydown.enter.prevent="changeCardTitle"></textarea>
</div>
</template>
<script>
import autosize from 'autosize'
...
export default {
name: 'CardModal',
...
mounted () {
setTimeout(() => {
autosize($('.auto-size'))
}, 0)
$('#cardModal').on('show.bs.modal', () => {
setTimeout(() => {
autosize.update($('.auto-size'))
}, 0)
...
})
},
...
}
</script>
As you can see, we add class auto-size to the textarea. In the mounted() method, we initialize the auto-resize ability of all the .auto-size elements by calling the autosize() method inside a setTimeout() callback. When the card modal window is opened, we call the autosize.update() method to resize the textarea to the required height.