113 lines
6.5 KiB
Vue
113 lines
6.5 KiB
Vue
<script lang="ts" setup>
|
|
import { ref, watch, defineProps } from 'vue';
|
|
|
|
const props = defineProps({
|
|
stateValue: { type: Boolean, required: true }
|
|
});
|
|
|
|
const isActive = ref(props.stateValue);
|
|
// const emits = defineEmits({
|
|
// stateValue: false
|
|
// });
|
|
|
|
|
|
// Watch for changes in props.stateValue to update isActive
|
|
watch(() => props.stateValue, (newValue) => {
|
|
isActive.value = newValue;
|
|
});
|
|
</script>
|
|
|
|
|
|
<template>
|
|
<div class="pa-4 text-center">
|
|
<v-dialog max-width="800" v-model="isActive" persistent>
|
|
<!-- <template v-slot:activator="{ props: activatorProps }">
|
|
<v-btn v-bind="activatorProps" text="Open Dialog"></v-btn>
|
|
</template> -->
|
|
|
|
<template v-slot:default="{ isActive }">
|
|
<v-card>
|
|
<template v-slot:title>
|
|
<div class="d-flex justify-lg-space-between">
|
|
<div>
|
|
<h3>List Menu</h3>
|
|
</div>
|
|
<div>
|
|
<v-btn icon="mdi-close" variant="flat" @click="$emit('stateValue', false)"></v-btn>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<template v-slot:text>
|
|
Lorem ipsum dolor sit amet, semper quis, sapien id natoque elit. Nostra urna at, magna at neque sed sed ante
|
|
imperdiet, dolor mauris cursus velit, velit non, sem nec. Volutpat sem ridiculus placerat leo, augue in,
|
|
duis erat proin condimentum in a eget, sed fermentum sed vestibulum varius ac, vestibulum volutpat orci ut
|
|
elit eget tortor. Ultrices nascetur nulla gravida ante arcu. Pharetra rhoncus morbi ipsum, nunc tempor
|
|
debitis, ipsum pellentesque, vitae id quam ut mauris dui tempor, aptent non. Quisque turpis. Phasellus quis
|
|
lectus luctus orci eget rhoncus. Amet donec vestibulum mattis commodo, nulla aliquet, nibh praesent,
|
|
elementum nulla. Sit lacus pharetra tempus magna neque pellentesque, nulla vel erat.
|
|
|
|
<br>
|
|
|
|
Fringilla tempor felis augue magna. Cum arcu a, id vitae. Pellentesque pharetra in cras sociis adipiscing
|
|
est. Nibh nec mattis at maecenas, nisl orci aliquam nulla justo egestas venenatis, elementum duis vel porta
|
|
eros, massa vitae, eligendi imperdiet amet. Nec neque luctus suscipit, justo sem praesent, ut nisl quisque,
|
|
volutpat torquent wisi tellus aliquam reprehenderit, curabitur cras at quis massa porttitor mauris. Eros sed
|
|
ultrices. Amet dignissim justo urna feugiat mauris litora, etiam accumsan, lobortis a orci suspendisse.
|
|
Semper ac mauris, varius bibendum pretium, orci urna nunc ullamcorper auctor, saepe sem integer quam, at
|
|
feugiat egestas duis. Urna ligula ante. Leo elementum nonummy. Sagittis mauris est in ipsum, nulla amet non
|
|
justo, proin id potenti platea posuere sit ut, nunc sit erat bibendum. Nibh id auctor, ab nulla vivamus
|
|
ultrices, posuere morbi nunc tellus gravida vivamus.
|
|
|
|
<br>
|
|
|
|
Mauris nec, facilisi quam fermentum, ut mauris integer, orci tellus tempus diam ut in pellentesque. Wisi
|
|
faucibus tempor et odio leo diam, eleifend quis integer curabitur sit scelerisque ac, mauris consequat
|
|
luctus quam penatibus fringilla dis, vitae lacus in, est eu ac tempus. Consectetuer amet ipsum amet dui, sed
|
|
blandit id sed. Tellus integer, dignissim id pede sodales quis, felis dolorem id mauris orci, orci tempus
|
|
ut. Nullam hymenaeos. Curabitur in a, tortor ut praesent placerat tincidunt interdum, ac dignissim metus
|
|
nonummy hendrerit wisi, etiam ut.
|
|
|
|
<br>
|
|
|
|
Semper praesent integer fusce, tortor suspendisse, augue ligula orci ante asperiores ullamcorper. In sit per
|
|
mi sed sed, mi vestibulum mus nam, morbi mauris neque vitae aliquam proin senectus. Ac amet arcu mollis ante
|
|
congue elementum, inceptos eget optio quam pellentesque quis lobortis, sollicitudin sed vestibulum
|
|
sollicitudin, lectus parturient nullam, leo orci ligula ultrices. At tincidunt enim, suspendisse est sit sem
|
|
ac. Amet tellus molestie est purus magna augue, non etiam et in wisi id. Non commodo, metus lorem facilisi
|
|
lobortis ac velit, montes neque sed risus consectetuer fringilla dolor. Quam justo et integer aliquam,
|
|
cursus nulla enim orci, nam cursus adipiscing, integer torquent non, fringilla per maecenas. Libero ipsum
|
|
sed tellus purus et. Duis molestie placerat erat donec ut. Dolor enim erat massa faucibus ultrices in, ante
|
|
ultricies orci lacus, libero consectetuer mauris magna feugiat neque dapibus, donec pretium et. Aptent dui,
|
|
aliquam et et amet nostra ligula.
|
|
|
|
<br>
|
|
|
|
Augue curabitur duis dui volutpat, tempus sed ut pede donec. Interdum luctus, lectus nulla aenean elit, id
|
|
sit magna, vulputate ultrices pellentesque vel id fermentum morbi. Tortor et. Adipiscing augue lorem cum non
|
|
lacus, rutrum sodales laoreet duis tortor, modi placerat facilisis et malesuada eros ipsum, vehicula tempus.
|
|
Ac vivamus amet non aliquam venenatis lectus, sociosqu adipiscing consequat nec arcu odio. Blandit orci nec
|
|
nec, posuere in pretium, enim ut, consectetuer nullam urna, risus vel. Nullam odio vehicula massa sed, etiam
|
|
sociis mauris, lacus ullamcorper, libero imperdiet non sodales placerat justo vehicula. Nec morbi imperdiet.
|
|
Fermentum sem libero iaculis bibendum et eros, eget maecenas non nunc, ad pellentesque. Ut nec diam
|
|
elementum interdum. Elementum vitae tellus lacus vitae, ipsum phasellus, corporis vehicula in ac sed massa
|
|
vivamus, rutrum elit, ultricies metus volutpat.
|
|
|
|
<br>
|
|
|
|
Semper wisi et, sollicitudin nunc vestibulum, cursus accumsan nunc pede tempus mi ipsum, ligula sed. Non
|
|
condimentum ac dolor sit. Mollis eu aliquam, vel mattis mollis massa ut dolor ante, tempus lacinia arcu.
|
|
Urna vestibulum lorem, nulla fermentum, iaculis ut congue ac vivamus. Nam libero orci, pulvinar nulla, enim
|
|
pellentesque consectetuer leo, feugiat rhoncus rhoncus vel. Magna sociosqu donec, dictum cursus ullamcorper
|
|
viverra. Ultricies quis orci lorem, suspendisse ut vestibulum integer, purus sed lorem pulvinar habitasse
|
|
turpis.
|
|
</template>
|
|
|
|
<v-card-actions>
|
|
<v-btn text @click="$emit('stateValue', false)">Disagree</v-btn>
|
|
</v-card-actions>
|
|
</v-card>
|
|
</template>
|
|
</v-dialog>
|
|
</div>
|
|
</template>
|