-
Notifications
You must be signed in to change notification settings - Fork 462
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
[Modal] Prevent close #303
Comments
I've been looking for this too but it seems the |
@benjamincanac One trick I like to use in reusable Dialogs from headlessui is to pass in a prop called The component looks something like this( The <template>
<HTransitionRoot as="div" appear :show="isOpen">
<HDialog as="div" class="relative z-50" @close="!forceClose && (isOpen = false)">
<HTransitionChild
as="template"
enter="duration-300 ease-out"
enter-from="opacity-0"
leave-to="opacity-0"
leave="duration-200 ease-in"
>
<div :class="overlayStyle" aria-hidden="true"></div>
</HTransitionChild>
<!-- Make container scrollable -->
<div class="fixed inset-0 overflow-y-auto">
<div class="flex min-h-full items-center justify-center">
<HTransitionChild as="template" v-bind="transitionClass">
<HDialogPanel>
<slot></slot>
</HDialogPanel>
</HTransitionChild>
</div>
</div>
</HDialog>
</HTransitionRoot>
</template>
<script setup lang="ts">
const props = withDefaults(
defineProps<{
/**
* Control the state of the modal
*/
modelValue?: boolean;
/**
* Styles to be applied ot overlay
*/
overlayStyle?: string;
/**
* Disable closing with ESC key & outsideclick
*/
forceClose?: boolean;
/**
* Transition styles
*/
transition?: {
appear?: boolean;
enter?: string;
enterFrom?: string;
enterTo?: string;
entered?: string;
leave?: string;
leaveFrom?: string;
leaveTo?: string;
};
}>(),
{
overlayStyle: "fixed inset-0 bg-background/50 backdrop-blur",
transition: () => ({}),
}
);
const transitionClass = computed(() => {
return {
appear: true,
enter: "duration-300 ease-out",
enterFrom: "opacity-0 scale-75",
leaveTo: "opacity-0 scale-95",
leave: "duration-200 ease-in",
...props.transition,
};
});
const emits = defineEmits(["update:modelValue"]);
const isOpen = computed({
get() {
return props.modelValue;
},
set(value) {
emits("update:modelValue", value);
},
});
</script> |
Any update please? |
Is there a way (at least not in the docs) to prevent modal close on "esc" or clicking on overlay, if not could be quite nice to have such an options.
The text was updated successfully, but these errors were encountered: