Hafifie PKB
230 lines
13 KiB
Vue
230 lines
13 KiB
Vue
<template>
|
||
<div>
|
||
<transition name="modal-fade">
|
||
<div v-if="showModal" class="modal-overlay show"></div>
|
||
</transition>
|
||
<transition name="modal-fade">
|
||
<div
|
||
v-if="showModal"
|
||
class="overflow-x-hidden overflow-y-auto fixed inset-0 z-50 outline-none focus:outline-none justify-center items-center flex"
|
||
>
|
||
<div class="relative w-screen my-6 mx-auto max-w-6xl">
|
||
<!--content-->
|
||
<div
|
||
class="border-0 rounded-lg shadow-lg relative flex flex-col w-full bg-white outline-none focus:outline-none"
|
||
>
|
||
<!--header-->
|
||
<div
|
||
class="flex items-start bg-gray-200 justify-between p-5 border-b border-solid border-blueGray-200 rounded-t"
|
||
>
|
||
<h3 class="text-3xl font-semibold">
|
||
Pemilihan Kemaskini
|
||
</h3>
|
||
<button
|
||
class="p-1 ml-auto border-0 text-black opacity-5 float-right text-3xl leading-none font-semibold outline-none focus:outline-none"
|
||
v-on:click="toggleModal()"
|
||
>
|
||
<span
|
||
class="text-black opacity-5 h-6 w-6 text-2xl block outline-none focus:outline-none"
|
||
>
|
||
×
|
||
</span>
|
||
</button>
|
||
</div>
|
||
<!--body-->
|
||
<div>
|
||
<div class="grid sm:grid-cols-3 gap-2 p-4">
|
||
<label
|
||
for="checkbox-tunai"
|
||
class="flex p-3 w-full bg-white border border-gray-200 rounded-lg text-sm focus:border-blue-500 focus:ring-blue-500 dark:bg-neutral-900 dark:border-neutral-700 dark:text-neutral-400"
|
||
>
|
||
<input
|
||
type="checkbox"
|
||
v-model="selectedCheckbox"
|
||
class="shrink-0 mt-0.5 border-gray-200 rounded text-blue-600 focus:ring-blue-500 disabled:opacity-50 disabled:pointer-events-none dark:bg-neutral-800 dark:border-neutral-700 dark:checked:bg-blue-500 dark:checked:border-blue-500 dark:focus:ring-offset-gray-800"
|
||
id="checkbox-tunai"
|
||
/>
|
||
<span
|
||
class="ml-2 text-sm text-gray-500 ms-3 dark:text-neutral-400"
|
||
>Tunai Di Tangan</span
|
||
>
|
||
</label>
|
||
|
||
<label
|
||
for="checkbox-pembiayaan"
|
||
class="flex p-3 w-full bg-white border border-gray-200 rounded-lg text-sm focus:border-blue-500 focus:ring-blue-500 dark:bg-neutral-900 dark:border-neutral-700 dark:text-neutral-400"
|
||
>
|
||
<input
|
||
type="checkbox"
|
||
v-model="selectedCheckbox"
|
||
class="shrink-0 mt-0.5 border-gray-200 rounded text-blue-600 focus:ring-blue-500 disabled:opacity-50 disabled:pointer-events-none dark:bg-neutral-800 dark:border-neutral-700 dark:checked:bg-blue-500 dark:checked:border-blue-500 dark:focus:ring-offset-gray-800"
|
||
id="checkbox-pembiayaan"
|
||
checked=""
|
||
/>
|
||
<span
|
||
class="ml-2 text-sm text-gray-500 ms-3 dark:text-neutral-400"
|
||
>Pembiayaan Di Bawah Tawarruq</span
|
||
>
|
||
</label>
|
||
|
||
<label
|
||
for="checkbox-serahan"
|
||
class="flex p-3 w-full bg-white border border-gray-200 rounded-lg text-sm focus:border-blue-500 focus:ring-blue-500 dark:bg-neutral-900 dark:border-neutral-700 dark:text-neutral-400"
|
||
>
|
||
<input
|
||
type="checkbox"
|
||
v-model="selectedCheckbox"
|
||
class="shrink-0 mt-0.5 border-gray-200 rounded text-blue-600 focus:ring-blue-500 disabled:opacity-50 disabled:pointer-events-none dark:bg-neutral-800 dark:border-neutral-700 dark:checked:bg-blue-500 dark:checked:border-blue-500 dark:focus:ring-offset-gray-800"
|
||
id="checkbox-serahan"
|
||
checked=""
|
||
/>
|
||
<span
|
||
class="ml-2 text-sm text-gray-500 ms-3 dark:text-neutral-400"
|
||
>Serahan Kepada HQ</span
|
||
>
|
||
</label>
|
||
|
||
<label
|
||
for="checkbox-pendahuluan"
|
||
class="flex p-3 w-full bg-white border border-gray-200 rounded-lg text-sm focus:border-blue-500 focus:ring-blue-500 dark:bg-neutral-900 dark:border-neutral-700 dark:text-neutral-400"
|
||
>
|
||
<input
|
||
type="checkbox"
|
||
v-model="selectedCheckbox"
|
||
class="shrink-0 mt-0.5 border-gray-200 rounded text-blue-600 focus:ring-blue-500 disabled:opacity-50 disabled:pointer-events-none dark:bg-neutral-800 dark:border-neutral-700 dark:checked:bg-blue-500 dark:checked:border-blue-500 dark:focus:ring-offset-gray-800"
|
||
id="checkbox-pendahuluan"
|
||
/>
|
||
<span
|
||
class="ml-2 text-sm text-gray-500 ms-3 dark:text-neutral-400"
|
||
>Bayaran Pendahuluan</span
|
||
>
|
||
</label>
|
||
|
||
<label
|
||
for="checkbox-panjar"
|
||
class="flex p-3 w-full bg-white border border-gray-200 rounded-lg text-sm focus:border-blue-500 focus:ring-blue-500 dark:bg-neutral-900 dark:border-neutral-700 dark:text-neutral-400"
|
||
>
|
||
<input
|
||
type="checkbox"
|
||
v-model="selectedCheckbox"
|
||
class="shrink-0 mt-0.5 border-gray-200 rounded text-blue-600 focus:ring-blue-500 disabled:opacity-50 disabled:pointer-events-none dark:bg-neutral-800 dark:border-neutral-700 dark:checked:bg-blue-500 dark:checked:border-blue-500 dark:focus:ring-offset-gray-800"
|
||
id="checkbox-panjar"
|
||
checked=""
|
||
/>
|
||
<span
|
||
class="ml-2 text-sm text-gray-500 ms-3 dark:text-neutral-400"
|
||
>Panjar</span
|
||
>
|
||
</label>
|
||
|
||
<label
|
||
for="checkbox-lelong"
|
||
class="flex p-3 w-full bg-white border border-gray-200 rounded-lg text-sm focus:border-blue-500 focus:ring-blue-500 dark:bg-neutral-900 dark:border-neutral-700 dark:text-neutral-400"
|
||
>
|
||
<input
|
||
type="checkbox"
|
||
v-model="selectedCheckbox"
|
||
class="shrink-0 mt-0.5 border-gray-200 rounded text-blue-600 focus:ring-blue-500 disabled:opacity-50 disabled:pointer-events-none dark:bg-neutral-800 dark:border-neutral-700 dark:checked:bg-blue-500 dark:checked:border-blue-500 dark:focus:ring-offset-gray-800"
|
||
id="checkbox-lelong"
|
||
checked=""
|
||
/>
|
||
<span
|
||
class="ml-2 text-sm text-gray-500 ms-3 dark:text-neutral-400"
|
||
>Lelong</span
|
||
>
|
||
</label>
|
||
|
||
<label
|
||
for="checkbox-pendahuluanhq"
|
||
class="flex p-3 w-full bg-white border border-gray-200 rounded-lg text-sm focus:border-blue-500 focus:ring-blue-500 dark:bg-neutral-900 dark:border-neutral-700 dark:text-neutral-400"
|
||
>
|
||
<input
|
||
type="checkbox"
|
||
v-model="selectedCheckbox"
|
||
class="shrink-0 mt-0.5 border-gray-200 rounded text-blue-600 focus:ring-blue-500 disabled:opacity-50 disabled:pointer-events-none dark:bg-neutral-800 dark:border-neutral-700 dark:checked:bg-blue-500 dark:checked:border-blue-500 dark:focus:ring-offset-gray-800"
|
||
id="checkbox-pendahuluanhq"
|
||
checked=""
|
||
/>
|
||
<span
|
||
class="ml-2 text-sm text-gray-500 ms-3 dark:text-neutral-400"
|
||
>Pendahuluan kepada HQ</span
|
||
>
|
||
</label>
|
||
</div>
|
||
</div>
|
||
<!--footer-->
|
||
<div
|
||
class="flex items-center justify-end p-6 border-t border-solid border-blueGray-200 rounded-b"
|
||
>
|
||
<button
|
||
class="bg-gray-500 hover:bg-gray-700 text-white font-bold py-2 px-4 border border-gray-700 rounded mr-1"
|
||
type="button"
|
||
v-on:click="toggleModal()"
|
||
>
|
||
Batal
|
||
</button>
|
||
<button
|
||
class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 border border-blue-700 rounded"
|
||
type="button"
|
||
v-on:click="resultfunc()"
|
||
>
|
||
Seterusnya
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</transition>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
// import modal from "../components/util/ImbangdugaModal.vue";
|
||
import resultmodal from "../../ImbangDuga/result.vue"
|
||
|
||
export default {
|
||
name: "modal",
|
||
components: {
|
||
resultmodal,
|
||
},
|
||
data() {
|
||
return {
|
||
showModal: false,
|
||
selectedCheckbox: [],
|
||
};
|
||
},
|
||
methods: {
|
||
toggleModal: function () {
|
||
this.showModal = !this.showModal;
|
||
},
|
||
resultfunc: function(){
|
||
console.log('test');
|
||
console.log(this.selectedCheckbox);
|
||
}
|
||
},
|
||
};
|
||
</script>
|
||
<style scoped>
|
||
.modal-fade-enter-active,
|
||
.modal-fade-leave-active {
|
||
transition: opacity 0.3s ease;
|
||
}
|
||
.modal-fade-enter, .modal-fade-leave-to /* .modal-fade-leave-active in <2.1.8 */ {
|
||
opacity: 0;
|
||
}
|
||
.modal-overlay {
|
||
background: rgba(0, 0, 0, 0.5); /* Adjust the opacity as needed */
|
||
position: fixed;
|
||
top: 0;
|
||
left: 0;
|
||
right: 0;
|
||
bottom: 0;
|
||
z-index: 40; /* Ensure it is behind the modal but in front of other content */
|
||
opacity: 0;
|
||
transition: opacity 0.3s ease;
|
||
}
|
||
.modal-overlay.show {
|
||
opacity: 1;
|
||
}
|
||
</style>
|