useModal() composable
Composable to get access to modal functions without using callingInstance:
openModal()confirmModal()formModal()
This is for Vue Composition API. Use openModal(), confirmModal() and formModal() with Options API.
Syntax
function useModal();
Parameters
None
Return value
openModal(component, options)- A wrapped openModal() function without
callingInstanceparameter. confirmModal(text)- A wrapped confirmModal() function without
callingInstanceparameter. formModal(component, options)- A wrapped formModal() function without
callingInstanceparameter.
Example
Open a simple modal:
import { defineComponent } from "vue";
import { useModal } from "@fkui/vue";
const MyAwesomeModal = defineComponent({});
/* --- cut above ---*/
const { openModal } = useModal();
async function onOpen(): Promise<void> {
const result = await openModal(MyAwesomeModal);
}
Open a confirmation modal:
const { confirmModal } = useModal();
async function onOpen(): Promise<void> {
const confirmed = await confirmModal({
heading: "Ta bort arbetsgivare",
content: `Är du säker att du vill ta bort "${arbetsgivare.namn}"?`,
confirm: "Ja, ta bort",
dismiss: "Nej, behåll",
});
if (confirmed) {
/* ... */
}
}
Open a form modal:
import { defineComponent } from "vue";
import { useModal } from "@fkui/vue";
interface MyAwesomeData {}
const MyAwesomeModal = defineComponent({});
/* --- cut above ---*/
const { formModal } = useModal();
async function onOpen(): Promise<void> {
const result = await formModal<MyAwesomeData>(MyAwesomeModal);
}