51 lines
1.3 KiB
Vue
51 lines
1.3 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);
|
|
|
|
// 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>
|
|
<slot name="text">
|
|
<!-- text -->
|
|
</slot>
|
|
|
|
<v-card-actions>
|
|
<!-- <v-btn text @click="$emit('stateValue', false)">Disagree</v-btn>-->
|
|
</v-card-actions>
|
|
</v-card>
|
|
</template>
|
|
|
|
</v-dialog>
|
|
</div>
|
|
</template>
|