diff --git a/src/components/ModalComponent.vue b/src/components/ModalComponent.vue index dfbb8c05e5eaa4c934434537ea08b332178a0ab4..7a3fab12be5e1e6c836c19a0de9ef630329c3b6d 100644 --- a/src/components/ModalComponent.vue +++ b/src/components/ModalComponent.vue @@ -6,23 +6,14 @@ <div class="bg-white p-6 rounded-lg shadow-lg max-w-sm w-full"> <h2 class="font-bold mb-4">{{ title }}</h2> <p class="mb-4">{{ message }}</p> - <input - v-if="showInput" - :type="typeValue" - v-model="inputValue" - @input="$emit('update:inputValue', inputValue)" - class="border border-gray-300 p-2 w-full" - :placeholder="inputPlaceholder" - /> + + <slot name="input"></slot> + <div class="flex flex-col justify-center items-center gap-3 mt-3 w-full"> - <button - v-if="showButton" - :disabled="!isInputValid" - @click="buttonAction && buttonAction!()" - class="active-button font-bold py-2 px-4 w-1/2 hover:bg-[#f7da7c] border-2 border-[#f7da7c] disabled:border-transparent" - > - {{ button1 }} - </button> + <slot name="buttons"></slot> + </div> + + <div class="flex justify-center mt-4"> <button @click="closeModal" class="font-bold py-2 px-4 w-1/2 bg-white border-2 border-[#f7da7c] hover:bg-[#f7da7c]" @@ -36,29 +27,16 @@ </template> <script setup lang="ts"> -import { ref } from 'vue' defineProps({ title: String, message: String, - button1: String, isModalOpen: Boolean, - buttonAction: { - type: Function, - default: () => {} - }, - showButton: Boolean, - showInput: Boolean, - typeValue: String, - inputPlaceholder: String, - isInputValid: Boolean }) -const emits = defineEmits(['update:isModalOpen', 'update:inputValue']) -const inputValue = ref('') +const emits = defineEmits(['update:isModalOpen']) function closeModal() { - inputValue.value = '' emits('update:isModalOpen', false) } </script> diff --git a/src/components/__tests__/ModalTest.spec.ts b/src/components/__tests__/ModalTest.spec.ts index 62c57abd3b03324899b914778acd01b0b7f08d2d..5a9d1260071dcbb368316edaf550beaf4fea5e1d 100644 --- a/src/components/__tests__/ModalTest.spec.ts +++ b/src/components/__tests__/ModalTest.spec.ts @@ -39,30 +39,4 @@ describe('ModalComponent', () => { throw new Error('Close button not found') } }) - - it('button is shown when showButton is true', async () => { - expect(wrapper.props().showButton).toBe(true) - expect(wrapper.find('.active-button').exists()).toBe(true) - }) - - it('button is not shown when showButton is false', async () => { - await wrapper.setProps({ showButton: false }) - await wrapper.vm.$nextTick() - - expect(wrapper.props().showButton).toBe(false) - expect(wrapper.find('.active-button').exists()).toBe(false) - }) - - it('input is shown when showInput is true', async () => { - await wrapper.setProps({ showInput: true }) - await wrapper.vm.$nextTick() - - expect(wrapper.props().showInput).toBe(true) - expect(wrapper.find('input').exists()).toBe(true) - }) - - it('input is not shown when showInput is false', async () => { - expect(wrapper.props().showInput).toBe(false) - expect(wrapper.find('input').exists()).toBe(false) - }) })