Currently, I am in the process of developing a form component enclosed within a v-dialog. This particular form component will consist of various child components that are displayed based on user input selection. In order to ensure that the dialog width adjusts according to its content, I have set the width of the v-dialog to "unset".
The challenge arises when attempting to incorporate transitions with dynamic widths. Since the width of the form within the dialog is unknown beforehand and subject to change, traditional transition methods do not seem to work effectively.
I have explored different approaches such as utilizing refs to retrieve the width of the form component, but setting the width to unset seems to impede the transition effect. While fixed widths showcase smooth transitions, dynamic widths pose a unique obstacle in achieving the same level of transition fluidity.
<div id="app">
<v-app id="inspire">
<div class="text-center">
<v-dialog v-model="dialog" width="unset">
<template v-slot:activator="{ on }">
<v-btn color="red lighten-2" dark v-on="on">
Click Me
</v-btn>
</template>
<v-card>
<v-select v-model="selectedForm" :items="items">
</v-select>
<div v-if="selectedForm==='form-a'" class='form-a'>FormA</div>
<div v-if="selectedForm==='form-b'" class='form-b'>FormB</div>
<v-card-actions>
<v-spacer></v-spacer>
<v-btn color="primary" text @click="dialog = false">
I accept
</v-btn>
</v-card-actions>
</v-card>
</v-dialog>
</div>
</v-app>
</div>
new Vue({
el: "#app",
vuetify: new Vuetify(),
data() {
return {
selectedForm: "form-a",
items: ["form-a", "form-b"],
dialog: false
};
}
});
Codepen demo with fixed width usage: https://codepen.io/duongthienlee/pen/MWaBLXm
Codepen demo showing dynamic width implementation: https://codepen.io/duongthienlee/pen/GRpBzmL
In my Codepen examples, I have predefined the width, but in actual scenarios, the width of form-a and form-b components remains undetermined. These widths are essentially inherited by their parent div, which is the v-dialog, thus necessitating the use of an 'unset' width value for the dialog.
To illustrate the concept of "dynamic width": consider form-a containing a select input. Upon selecting an item, an API call is made to fetch input labels. Subsequently, form-a dynamically renders multiple input fields based on the server response. As a result, the width of form-a fluctuates based on the retrieved information.