closable card title component

vue3/src/components/dialogs/ModelEditDialog.vue

@@ -1,6 +1,6 @@
 <template>
     <v-dialog max-width="1400" :activator="dialogActivator" v-model="model">
-        <component :is="editorComponent" :item="item" @create="createEvent" @save="saveEvent" @delete="deleteEvent" dialog @close="dialog = false" :itemDefaults="itemDefaults"></component>
+        <component :is="editorComponent" :item="item" @create="createEvent" @save="saveEvent" @delete="deleteEvent" dialog @close="model = false" :itemDefaults="itemDefaults"></component>
     </v-dialog>
 </template>
 

vue3/src/components/dialogs/VClosableCardTitle.vue

@@ -0,0 +1,38 @@
+<template>
+    <v-card-title >
+        <v-row align="center">
+            <v-col cols="11" class="text-truncate">
+                <i :class="props.icon" v-if="props.icon != ''"></i>
+                {{ props.title }}
+                <v-card-subtitle class="pa-0" v-if="props.subTitle != ''">{{ props.subTitle}}</v-card-subtitle>
+            </v-col>
+            <v-col cols="1" v-if="!props.hideClose">
+                <v-btn class="float-right" icon="$close" variant="plain" @click="model = false; emit('close')"></v-btn>
+            </v-col>
+        </v-row>
+    </v-card-title>
+</template>
+
+<script setup lang="ts">
+/**
+ * Component used to render a VCardTitle with a "close" button that can either close the model bound dialog given via v-model or
+ * emit a close event a parent dialog can listen to
+ *
+ * Should be used for all dialogs that have a "close" function (which likely all dialogs should have)
+ */
+const emit = defineEmits(['close'])
+
+const props = defineProps({
+    title: {type: String, default: ''},
+    icon: {type: String, default: ''},
+    subTitle: {type: String, default: ''},
+    hideClose: {type:Boolean, default: false},
+})
+
+const model = defineModel<Boolean>()
+
+</script>
+
+<style scoped>
+
+</style>

vue3/src/components/inputs/NumberScalerDialog.vue

@@ -7,7 +7,8 @@
         </template>
 
         <template v-slot:default="{ isActive }">
-            <v-card :title="title">
+            <v-card >
+                <v-closable-card-title :title="title" v-model="dialog"></v-closable-card-title>
 
                 <v-card-text>
 
@@ -24,10 +25,6 @@
                     </v-btn-group>
 
                 </v-card-text>
-                <v-card-actions>
-                    <v-spacer></v-spacer>
-                    <v-btn class="float-right" rounded @click="dialog = false">Close</v-btn>
-                </v-card-actions>
             </v-card>
 
         </template>
@@ -37,7 +34,8 @@
 <script setup lang="ts">
 
 import {defineComponent, onMounted, ref, watch} from 'vue'
-import {VNumberInput} from 'vuetify/labs/VNumberInput' //TODO remove once component is out of labs
+import {VNumberInput} from 'vuetify/labs/VNumberInput'
+import VClosableCardTitle from "@/components/dialogs/VClosableCardTitle.vue"; //TODO remove once component is out of labs
 
 const emit = defineEmits({
     change(payload: { number: number }) {

vue3/src/components/model_editors/ModelEditorBase.vue

@@ -1,10 +1,7 @@
 <template>
     <v-card :loading="loading">
-        <v-card-title>
-            <i :class="modelClass.model.icon"></i> {{ $t(modelClass.model.localizationKey) }}
-            <v-btn class="float-right" icon="$close" variant="plain" @click="emit('close')" v-if="dialog"></v-btn>
-            <v-card-subtitle class="pa-0">{{ objectName }}</v-card-subtitle>
-        </v-card-title>
+        <v-closable-card-title :title="$t(modelClass.model.localizationKey)" :sub-title="objectName" :icon="modelClass.model.icon" @close="emit('close');" :hide-close="!dialog"></v-closable-card-title>
+
         <v-divider></v-divider>
         <slot name="default">
 
@@ -24,6 +21,7 @@
 
 import DeleteConfirmDialog from "@/components/dialogs/DeleteConfirmDialog.vue";
 import {GenericModel} from "@/types/Models";
+import VClosableCardTitle from "@/components/dialogs/VClosableCardTitle.vue";
 
 const emit = defineEmits(['save', 'delete', 'close'])