make new folder for reuse ngLib add new features for datatree like change add remove rename datapoints improve pingpong

src/vueLib/dialog/DialogFrame.vue

@@ -8,12 +8,17 @@
     :seamless="!minMaxState"
   >
     <q-card class="layout" :style="cardStyle" v-touch-pan.mouse.prevent.stop="handlePan">
-      <div class="row justify-end q-mx-sm q-mt-xs">
-        <q-btn dense flat :icon="minMaxIcon" size="md" @click="minMax()"></q-btn>
-        <q-btn dense flat icon="close" size="md" v-close-popup></q-btn>
+      <div :class="props.headerTitle ? 'row items-center justify-between' : ''">
+        <div v-if="headerTitle" class="q-mx-sm q-mt-xs text-left text-bold text-caption">
+          {{ props.headerTitle }}
+        </div>
+        <div class="row justify-end q-mx-sm q-mt-xs">
+          <q-btn dense flat :icon="minMaxIcon" size="md" @click="minMax()"></q-btn>
+          <q-btn dense flat icon="close" size="md" v-close-popup></q-btn>
+        </div>
       </div>
       <q-separator color="black" class="q-my-none" />
-      <slot />
+      <div class="scrollArea"><slot /></div>
     </q-card>
   </q-dialog>
 </template>
@@ -23,6 +28,7 @@ import { ref, computed } from 'vue';
 
 const dialogRef = ref();
 const open = () => dialogRef.value?.show();
+const close = () => dialogRef.value?.hide();
 
 const minMaxIcon = ref('fullscreen');
 const minMaxState = ref(false);
@@ -36,6 +42,10 @@ function minMax() {
 }
 
 const props = defineProps({
+  headerTitle: {
+    type: String,
+    default: '',
+  },
   width: {
     type: String,
     default: '300px',
@@ -55,11 +65,18 @@ const cardStyle = computed(() => ({
   transform: `translate(${position.value.x}px, ${position.value.y}px)`,
 }));
 
-defineExpose({ open });
+defineExpose({ open, close });
 </script>
 
 <style scoped>
 .layout {
   border-radius: 10px;
+  display: flex;
+  flex-direction: column;
+}
+.scrollArea {
+  overflow-y: auto;
+  flex: 1 1 auto;
+  min-height: 0;
 }
 </style>