mirror of
https://gitlab.com/Chill-Projet/chill-bundles.git
synced 2025-08-24 16:43:48 +00:00
[WIP] Create Address button that will open AddressPicker in a modal
This commit is contained in:
@@ -0,0 +1,33 @@
|
|||||||
|
<script setup lang="ts">
|
||||||
|
|
||||||
|
import Modal from "ChillMainAssets/vuejs/_components/Modal.vue";
|
||||||
|
import AddressPicker from "ChillMainAssets/vuejs/AddressPicker/AddressPicker.vue";
|
||||||
|
import {Ref, ref} from "vue";
|
||||||
|
|
||||||
|
const showModal: Ref<boolean> = ref(false);
|
||||||
|
|
||||||
|
const modalDialogClasses = {"modal-dialog": true, "modal-dialog-scrollable": true, "modal-xl": true};
|
||||||
|
|
||||||
|
const clickButton = () => {
|
||||||
|
showModal.value = true;
|
||||||
|
}
|
||||||
|
|
||||||
|
const closeModal = () => {
|
||||||
|
showModal.value = false;
|
||||||
|
}
|
||||||
|
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<modal v-if="showModal" :modal-dialog-class="modalDialogClasses" @close="closeModal">
|
||||||
|
<template v-slot:header>TODO</template>
|
||||||
|
<template v-slot:body>
|
||||||
|
<AddressPicker></AddressPicker>
|
||||||
|
</template>
|
||||||
|
</modal>
|
||||||
|
<button class="btn btn-submit" type="button" @click="clickButton">SEARCH ADDRESS</button>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style scoped lang="scss">
|
||||||
|
|
||||||
|
</style>
|
@@ -1,11 +1,11 @@
|
|||||||
import { createApp } from "vue";
|
import { createApp } from "vue";
|
||||||
import AddressPicker from "ChillMainAssets/vuejs/AddressPicker/AddressPicker.vue";
|
import AddressButton from "ChillMainAssets/vuejs/AddressPicker/AddressButton.vue";
|
||||||
|
|
||||||
document.addEventListener("DOMContentLoaded", async () => {
|
document.addEventListener("DOMContentLoaded", async () => {
|
||||||
document
|
document
|
||||||
.querySelectorAll<HTMLDivElement>("div[data-address-picker]")
|
.querySelectorAll<HTMLDivElement>("div[data-address-picker]")
|
||||||
.forEach((elem): void => {
|
.forEach((elem): void => {
|
||||||
const app = createApp(AddressPicker);
|
const app = createApp(AddressButton);
|
||||||
|
|
||||||
app.mount(elem);
|
app.mount(elem);
|
||||||
});
|
});
|
||||||
|
Reference in New Issue
Block a user