master #173

Merged
Maxime merged 71 commits from Maxime/Clyde:master into master 2024-04-22 00:07:00 +02:00
2 changed files with 67 additions and 18 deletions
Showing only changes of commit 0cbe0dd82b - Show all commits

View File

@ -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,19 +28,35 @@ 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">
<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>
<button @click.stop="emit('modal-close')">Submit</button>
</div>
</slot>
<div id="filterGrid">
<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>
</div>
</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;
border-radius: 2px;
background: rgba(157, 99, 205);
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>

View File

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