ダイアログに検索追加

frontend/src/components/ShowDialog.vue

@@ -1,7 +1,7 @@
 <template>
   <!-- <div class="q-pa-md q-gutter-sm" > -->
     <q-dialog :model-value="visible" persistent bordered>
-      <q-card :style="{minWidth : width}" >
+      <q-card :style="cardStyle" >
         <q-toolbar class="bg-grey-4">
           <q-toolbar-title>{{ name }}</q-toolbar-title>
           <q-space></q-space>
@@ -11,7 +11,7 @@
         <q-card-section>
           <!-- <div class="text-h6">{{ name }}</div> -->
         </q-card-section>
-        <q-card-section class="q-pt-none" :style="{...(height? {minHeight:height}:{}) }">
+        <q-card-section class="q-pt-none" :style="sectionStyle">
          <slot></slot>
         </q-card-section>
         <q-card-actions align="right" class="text-primary">
@@ -23,14 +23,16 @@
   <!-- </div> -->
 </template>
 <script>
-
+import {computed} from 'vue'
 export default {
   name: 'ShowDialog',
   props: {
     name:String,
     visible: Boolean,
     width:String,
-    height:String
+    height:String,
+    minWidth:String,
+    minHeight:String
   },
   emits: [
     'close'
@@ -41,8 +43,20 @@ export default {
       context.emit('close', val);
     }
 
+    const cardStyle = computed(() => ({
+      minWidth: props.minWidth,
+      width: props.width
+    }));
+
+    const sectionStyle = computed(() => ({
+      height: props.height,
+      minHeight: props.minHeight
+    }));
+
     return {
-      CloseDialogue
+      CloseDialogue,
+      cardStyle,
+      sectionStyle
     }
   },
 }