modtool/src/components/TheTreeDialog.vue

<script setup lang="ts">
import { useStore } from '@/store'
import { ref } from 'vue';
import VDialog from './VDialog.vue'
import TreeItem from './TreeItem.vue'

const store = useStore()
const newDialogOpen = ref(false);

defineProps({
  filterFunc: Function
})
</script>

<template>
  <v-dialog :open="newDialogOpen" 
    @cancel="newDialogOpen = false" 
    @select-node="(node) => $emit('selectNode', node)">
      <div class="treedialog" v-if="store.addressSpace">
        <h5 class="card-title">Browse Parent</h5>
        <p></p>
        <ul>
          <TreeItem class="item" 
            v-if="store.rootNode != null"
            :model="store.rootNode"
            :filter-func = "$props.filterFunc"
            :markSelected="false"
            @select-node="(node) => $emit('selectNode', node)"
             >
          </TreeItem>
        </ul>
        <div class="btn-group d-flex justify-content-end">
          <button class="btn btn-light" @click="$emit('cancel')">close</button>
        </div>
      </div>
  </v-dialog>
</template>


<style scoped>
.treedialog {
  width: 30em;
  height: 40em;
}
</style>