filter popup mock done

frontend/src/Apps/ScientificPublications/FilterComponent.vue

@@ -1,12 +1,22 @@
 <script setup>
 import { defineProps, defineEmits, ref } from "vue";
 import {onClickOutside} from '@vueuse/core'
+let checked = ref([])
 
 const props = defineProps({
   isOpen: Boolean,
 });
-
+const example = ["A","B", "Lorem Ipsum AAAAAAAAAAAAAAAAAAA",
-
+"H",
+  "H",
+  "H",
+  "H",
+  "H",
+  "H",
+  "H",
+  "H",
+  "H",
+]
 const emit = defineEmits(["modal-close"]);
 
 const target = ref(null)
@@ -18,18 +28,34 @@ onClickOutside(target, ()=>emit('modal-close'))
   <div v-if="isOpen" class="modal-mask">
     <div class="modal-wrapper">
       <div class="modal-container" ref="target">
-        <div class="modal-header">
+        <div id="filterGrid">
-          <slot name="header"> default header </slot>
-        </div>
-        <div class="modal-body">
-          <slot name="content"> default content </slot>
-        </div>
-        <div class="modal-footer">
-          <slot name="footer">
           <div>
+            <ul>
+              <li v-for="n in example">{{n}}</li>
+            </ul>
+          </div>
+          <div class="vl"> example :<ul class="checkers"> <li v-for="n in example"> <input type="checkbox" :value=n v-model="checked"> {{n}} </li> </ul> </div>
+          <div class="vl">
+            <ul>
+              <li v-for="n in example">{{n}}</li>
+            </ul>
+          </div>
+          <div>
+            <ul>
+              <li v-for="n in example">{{n}}</li>
+            </ul>
+          </div>
+          <div class="vl">
+            <ul>
+              <li v-for="n in example">{{n}}</li>
+            </ul>
+          </div>
+          <div class="vl"></div>
+        </div>
+        <div>
+          <div id="submit">
             <button @click.stop="emit('modal-close')">Submit</button>
           </div>
-          </slot>
       </div>
       </div>
     </div>
@@ -46,13 +72,36 @@ onClickOutside(target, ()=>emit('modal-close'))
   height: 100%;
   background-color: rgba(0, 0, 0, 0.5);
 }
+
 .modal-container {
-  width: 300px;
+  width: 70%;
   margin: 150px auto;
   padding: 20px 30px;
-  background-color: #fff;
+  background: rgba(157, 99, 205);
-  border-radius: 2px;
+  border-radius: 12px;
   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.33);
 }
 
+#filterGrid {
+  display: grid;
+  grid-template-columns: auto auto auto;
+  column-gap: 5px;
+  grid-template-rows: auto auto;
+}
+#filterGrid ul {
+  list-style-type: none;
+  padding: 15px;
+  height: 100px;
+  overflow: scroll;
+  background-color: rgba(255, 255, 255, 0.09);
+  border-radius: 6px;
+}
+
+.vl {
+  border-left: 6px solid darkmagenta;
+}
+#submit {
+  text-align: end;
+}
+
 </style>

frontend/src/Apps/ScientificPublications/ResearcherProfile.vue

@@ -21,7 +21,7 @@ const closeModal = () => {
   isFilterOpened.value = false;
 };
 const submitHandler = ()=>{
-  //here you do whatever
+  // call only with those filters the get
 }
 
 const articleList = [