Appearance
Alert
The useFTAlert composable opens alert-style dialogs imperatively from anywhere in your app — no need to render the component in your template or manage v-if state. Today it exposes confirm, which renders an FTConfirm dialog with the same look as FTConfirm/FTModal.
Usage
Composition api (script setup)
vue
<script setup lang="ts">
import { useFTAlert } from '@fasttrack-solutions/vue-components-lib';
const { confirm } = useFTAlert();
</script><script setup lang="ts">
import { useFTAlert } from '@fasttrack-solutions/vue-components-lib';
const { confirm } = useFTAlert();
</script>Minimal usage
INFO
vue
<script lang="ts" setup>
import { useFTAlert } from '@fasttrack-solutions/vue-components-lib';
const { confirm } = useFTAlert();
const openConfirm = () => {
confirm({
title: 'Confirm action',
description: 'Are you sure you want to continue?',
onConfirm: () => {
// run your callback here
},
});
};
</script>
<template>
<FTButton primary @click="openConfirm">Open confirm</FTButton>
</template><script lang="ts" setup>
import { useFTAlert } from '@fasttrack-solutions/vue-components-lib';
const { confirm } = useFTAlert();
const openConfirm = () => {
confirm({
title: 'Confirm action',
description: 'Are you sure you want to continue?',
onConfirm: () => {
// run your callback here
},
});
};
</script>
<template>
<FTButton primary @click="openConfirm">Open confirm</FTButton>
</template>Custom button labels
INFO
vue
<script lang="ts" setup>
const openConfirm = () => {
confirm({
title: 'Delete user',
description: 'This will permanently delete the user. This action cannot be undone.',
confirmText: 'Delete',
cancelText: 'Keep',
onConfirm: () => deleteUser(),
});
};
</script><script lang="ts" setup>
const openConfirm = () => {
confirm({
title: 'Delete user',
description: 'This will permanently delete the user. This action cannot be undone.',
confirmText: 'Delete',
cancelText: 'Keep',
onConfirm: () => deleteUser(),
});
};
</script>Reacting to cancel
Both the close button (×) in the header and the cancel CTA dismiss the dialog and trigger onCancel.
INFO
vue
<script lang="ts" setup>
const openConfirm = () => {
confirm({
title: 'Discard changes?',
description: 'You have unsaved changes that will be lost.',
confirmText: 'Discard',
onConfirm: () => discardChanges(),
onCancel: () => trackCancelled(),
});
};
</script><script lang="ts" setup>
const openConfirm = () => {
confirm({
title: 'Discard changes?',
description: 'You have unsaved changes that will be lost.',
confirmText: 'Discard',
onConfirm: () => discardChanges(),
onCancel: () => trackCancelled(),
});
};
</script>Confirm on Enter
Pass submitOnEnter: true to fire onConfirm when the user presses Enter or NumpadEnter while the dialog is open.
vue
<script lang="ts" setup>
const openConfirm = () => {
confirm({
title: 'Save changes?',
description: 'Press Enter to save.',
submitOnEnter: true,
onConfirm: () => save(),
});
};
</script><script lang="ts" setup>
const openConfirm = () => {
confirm({
title: 'Save changes?',
description: 'Press Enter to save.',
submitOnEnter: true,
onConfirm: () => save(),
});
};
</script>Closing programmatically
confirm() returns { close }, useful for auto-dismissing or closing the dialog in response to an external event.
INFO
vue
<script lang="ts" setup>
const openConfirm = () => {
const dialog = confirm({
title: 'Auto-dismissing dialog',
description: 'This dialog will close itself in 3 seconds.',
onConfirm: () => save(),
});
setTimeout(() => dialog?.close(), 3000);
};
</script><script lang="ts" setup>
const openConfirm = () => {
const dialog = confirm({
title: 'Auto-dismissing dialog',
description: 'This dialog will close itself in 3 seconds.',
onConfirm: () => save(),
});
setTimeout(() => dialog?.close(), 3000);
};
</script>Options
| Name | Default | Description |
|---|---|---|
title | Confirm | The dialog title shown in the header |
description | empty | The dialog body text |
confirmText | Confirm | Label for the primary confirm CTA |
cancelText | Cancel | Label for the cancel CTA |
submitOnEnter | false | When true, pressing Enter / NumpadEnter while the dialog is open fires onConfirm |
onConfirm | undefined | Callback fired when the confirm CTA is clicked. The dialog closes after the callback runs |
onCancel | undefined | Callback fired when the cancel CTA or the close button is clicked. The dialog then closes |
Return value
confirm(options) returns an object with a single method, or undefined when called in an environment without a document (SSR) or with no options.
| Name | Description |
|---|---|
close | Dismiss the dialog programmatically. Does not fire onCancel. Safe to call more than once |