Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Showing content from https://github.com/harmyderoman/vuejs-confirm-dialog/issues/21 below:

Modal component properties is not clearing when reusing the component · Issue #21 · harmyderoman/vuejs-confirm-dialog · GitHub

Version: 0.4.3

When defining the component, using it for different states, and passing the props to the component with different values, it is not using a new component.

Define the modal one time and reuse it for different states:

useAlert.ts

import Alert from '~/components/Modals/Alert.vue';
import { createConfirmDialog } from 'vuejs-confirm-dialog';

const alertModal = createConfirmDialog(Alert);

export const showModal = async (options: Modal.Options) => {
    await alertModal.close()

    return alertModal.reveal(...[options]);
};

export const showDangerMessage = (options: Modal.Options) => {
    options.type = 'danger';

    return showModal(options);
};

export const showInfoMessage = (options: Modal.Options) => {
    options.type = 'info';

    return showModal(options);
};

export const showWarningMessage = (options: Modal.Options) => {
    options.type = 'warning';

    return showModal(options);
};

export const showSuccessMessage = (options: Modal.Options) => {
    options.type = 'success';

    return showModal(options);
};

alerts.vue

<script setup lang="ts">
import DefaultButton from "~/components/Buttons/DefaultButton.vue";
import {showDangerMessage, showInfoMessage, showWarningMessage} from "~/composables/useAlert";
import {definePageMeta} from "#imports";

definePageMeta({
    layout: 'dashboard'
})

const confirmDelete = async () => {
    const {data, isCanceled} = await showWarningMessage({
        title: 'Confirm Delete',
        message: 'Are you sure want to delete this object?',
        confirmButton: 'Confirm & Delete',
        cancelButton: 'Cancel this actions',
        dismissible: false
    })

    if (!isCanceled) {
        await showInfoMessage({title: 'You confirmed the action', message: 'There is nothing to do with anymore.'})
    } else {
        await showInfoMessage({title: 'You canceled this action', message: 'There is nothing to do with anymore.'})
    }
}
</script>

<template>
    <div>
        <DefaultButton
            class="mr-2"
            @click.prevent="showDangerMessage({title: 'Something went wrong', message: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.'})">
            Show Error Message
        </DefaultButton>
        <DefaultButton
            class="mr-2"
            @click.prevent="showInfoMessage({title: 'Info Message', message: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.'})">
            Show Info Message
        </DefaultButton>
        <DefaultButton
            class="mr-2"
            @click.prevent="showWarningMessage({title: 'Warning Message', message: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.'})">
            Show Warning Message
        </DefaultButton>
        <DefaultButton
            class="mr-2"
            @click.prevent="showWarningMessage({title: 'Warning Message', message: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.'})">
            Show Warning Message
        </DefaultButton>
        <DefaultButton @click.prevent="confirmDelete">
            Confirm Delete
        </DefaultButton>
    </div>
</template>

Alert.vue

<script setup lang="ts">
import DefaultButton from "~/components/Buttons/DefaultButton.vue";
import {onMounted} from "vue";
import DangerButton from "~/components/Buttons/DangerButton.vue";

interface Props {
    title: string;
    message: string;
    dismissible?: boolean,
    autoHide?: boolean;
    timeout?: number;
    confirmButton?: string;
    cancelButton?: string | boolean;
    type: Modal.Type
}

const props = withDefaults(defineProps<Props>(), {
    dismissible: true,
    autoHide: false,
    timeout: 10000,
    confirmButton: 'Close',
    cancelButton: false
})

const emit = defineEmits<{
    (event: 'confirm'): void
    (event: 'cancel'): void
}>()

onMounted(() => {
    if (props.autoHide) {
        setTimeout(() => {
            emit('cancel')
        }, props.timeout)
    }
})
</script>

<template>
    <Modal
        :model-value="true"
        :dismissible="dismissible"
        :class="`modal-type-${type}`"
        @close="emit('cancel')"
    >
        <div class="text-center text-[24px]">
            {{ title }}
        </div>
        <p class="text-center">{{ message }}</p>
        <div class="text-center pt-4 flex">
            <DangerButton v-if="cancelButton" class="flex-grow mr-2" @click="emit('cancel')">
                {{ cancelButton }}
            </DangerButton>

            <DefaultButton class="flex-grow" @click="emit('confirm')">
                {{ confirmButton }}
            </DefaultButton>
        </div>
    </Modal>
</template>

When executing the reveal method, it should re-init the children component with new properties - in this case, it will clear the properties passed before.

Init the component every time with const alertModal = createConfirmDialog(Alert);

RetroSearch is an open source project built by @garambo | Open a GitHub Issue

Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo

HTML: 3.2 | Encoding: UTF-8 | Version: 0.7.4