diff --git a/docs/app/components/content/examples/drawer/DrawerDismissibleExample.vue b/docs/app/components/content/examples/drawer/DrawerDismissibleExample.vue new file mode 100644 index 00000000..2a9a862e --- /dev/null +++ b/docs/app/components/content/examples/drawer/DrawerDismissibleExample.vue @@ -0,0 +1,21 @@ + + + diff --git a/docs/app/components/content/examples/popover/PopoverDismissibleExample.vue b/docs/app/components/content/examples/popover/PopoverDismissibleExample.vue new file mode 100644 index 00000000..549f993a --- /dev/null +++ b/docs/app/components/content/examples/popover/PopoverDismissibleExample.vue @@ -0,0 +1,21 @@ + + + diff --git a/docs/content/3.components/drawer.md b/docs/content/3.components/drawer.md index 3cc820b5..edd81448 100644 --- a/docs/content/3.components/drawer.md +++ b/docs/content/3.components/drawer.md @@ -266,6 +266,21 @@ In this example, leveraging [`defineShortcuts`](/composables/define-shortcuts), This allows you to move the trigger outside of the Drawer or remove it entirely. :: +### Prevent closing + +Set the `dismissible` prop to `false` to prevent the Drawer from being closed when clicking outside of it or pressing escape. + +::component-example +--- +prettier: true +name: 'drawer-dismissible-example' +--- +:: + +::note +In this example, the `header` slot is used to add a close button which is not done by default. +:: + ### With footer slot Use the `#footer` slot to add content after the Drawer's body. diff --git a/docs/content/3.components/modal.md b/docs/content/3.components/modal.md index 880a4794..99870f1b 100644 --- a/docs/content/3.components/modal.md +++ b/docs/content/3.components/modal.md @@ -253,35 +253,6 @@ slots: :placeholder{class="h-full"} :: -### Prevent close - -Use the `prevent-close` prop to prevent the Modal from being closed when clicking outside of it. - -::component-code ---- -prettier: true -ignore: - - title - - preventClose -props: - preventClose: true - title: 'Modal prevent close' -slots: - default: | - - - - body: | - - ---- - -:u-button{label="Open" color="neutral" variant="subtle"} - -#body -:placeholder{class="h-48"} -:: - ## Examples ### Control open state @@ -302,6 +273,35 @@ In this example, leveraging [`defineShortcuts`](/composables/define-shortcuts), This allows you to move the trigger outside of the Modal or remove it entirely. :: +### Prevent closing + +Set the `dismissible` prop to `false` to prevent the Modal from being closed when clicking outside of it or pressing escape. + +::component-code +--- +prettier: true +ignore: + - title + - dismissible +props: + dismissible: false + title: 'Modal non-dismissible' +slots: + default: | + + + + body: | + + +--- + +:u-button{label="Open" color="neutral" variant="subtle"} + +#body +:placeholder{class="h-48"} +:: + ### Programmatic usage You can use the [`useModal`](/composables/use-modal) composable to open a Modal programatically. diff --git a/docs/content/3.components/popover.md b/docs/content/3.components/popover.md index 69de937c..7229939e 100644 --- a/docs/content/3.components/popover.md +++ b/docs/content/3.components/popover.md @@ -180,6 +180,16 @@ name: 'popover-open-example' In this example, leveraging [`defineShortcuts`](/composables/define-shortcuts), you can toggle the Popover by pressing :kbd{value="O"}. :: +### Prevent closing + +Set the `dismissible` prop to `false` to prevent the Popover from being closed when clicking outside of it or pressing escape. + +::component-example +--- +name: 'popover-dismissible-example' +--- +:: + ### With command palette You can use a [CommandPalette](/components/command-palette) component inside the Popover's content. diff --git a/docs/content/3.components/slideover.md b/docs/content/3.components/slideover.md index 706fb177..8e254124 100644 --- a/docs/content/3.components/slideover.md +++ b/docs/content/3.components/slideover.md @@ -252,35 +252,6 @@ slots: :placeholder{class="h-full"} :: -### Prevent close - -Use the `prevent-close` prop to prevent the Slideover from being closed when clicking outside of it. - -::component-code ---- -prettier: true -ignore: - - title - - preventClose -props: - preventClose: true - title: 'Slideover prevent close' -slots: - default: | - - - - body: | - - ---- - -:u-button{label="Open" color="neutral" variant="subtle"} - -#body -:placeholder{class="h-full"} -:: - ## Examples ### Control open state @@ -301,6 +272,35 @@ In this example, leveraging [`defineShortcuts`](/composables/define-shortcuts), This allows you to move the trigger outside of the Slideover or remove it entirely. :: +### Prevent closing + +Set the `dismissible` prop to `false` to prevent the Slideover from being closed when clicking outside of it or pressing escape. + +::component-code +--- +prettier: true +ignore: + - title + - dismissible +props: + dismissible: false + title: 'Slideover non-dismissible' +slots: + default: | + + + + body: | + + +--- + +:u-button{label="Open" color="neutral" variant="subtle"} + +#body +:placeholder{class="h-full"} +:: + ### Programmatic usage You can use the [`useSlideover`](/composables/use-slideover) composable to open a Slideover programatically. diff --git a/src/runtime/components/Drawer.vue b/src/runtime/components/Drawer.vue index 9e4cf937..7aac7399 100644 --- a/src/runtime/components/Drawer.vue +++ b/src/runtime/components/Drawer.vue @@ -11,7 +11,7 @@ const appConfig = _appConfig as AppConfig & { ui: { drawer: Partial { +export interface DrawerProps extends Pick { /** * The element or component this component should render as. * @defaultValue 'div' @@ -36,6 +36,11 @@ export interface DrawerProps extends Pick } diff --git a/src/runtime/components/Modal.vue b/src/runtime/components/Modal.vue index e6a4ae1b..a423e5df 100644 --- a/src/runtime/components/Modal.vue +++ b/src/runtime/components/Modal.vue @@ -48,10 +48,10 @@ export interface ModalProps extends DialogRootProps { */ closeIcon?: string /** - * When `true`, the modal will not close when clicking outside. - * @defaultValue false + * When `false`, the modal will not close when clicking outside or pressing escape. + * @defaultValue true */ - preventClose?: boolean + dismissible?: boolean class?: any ui?: Partial } @@ -85,7 +85,8 @@ const props = withDefaults(defineProps(), { portal: true, overlay: true, transition: true, - modal: true + modal: true, + dismissible: true }) const emits = defineEmits() const slots = defineSlots() @@ -96,7 +97,7 @@ const appConfig = useAppConfig() const rootProps = useForwardPropsEmits(reactivePick(props, 'open', 'defaultOpen', 'modal'), emits) const contentProps = toRef(() => props.content) const contentEvents = computed(() => { - if (props.preventClose) { + if (!props.dismissible) { return { pointerDownOutside: (e: Event) => e.preventDefault(), interactOutside: (e: Event) => e.preventDefault(), diff --git a/src/runtime/components/Popover.vue b/src/runtime/components/Popover.vue index e986080d..d8927c9d 100644 --- a/src/runtime/components/Popover.vue +++ b/src/runtime/components/Popover.vue @@ -32,10 +32,10 @@ export interface PopoverProps extends PopoverRootProps, Pick } @@ -61,7 +61,8 @@ const props = withDefaults(defineProps(), { portal: true, mode: 'click', openDelay: 0, - closeDelay: 0 + closeDelay: 0, + dismissible: true }) const emits = defineEmits() const slots = defineSlots() @@ -70,7 +71,7 @@ const pick = props.mode === 'hover' ? reactivePick(props, 'defaultOpen', 'open', const rootProps = useForwardPropsEmits(pick, emits) const contentProps = toRef(() => defu(props.content, { side: 'bottom', sideOffset: 8, collisionPadding: 8 }) as PopoverContentProps) const contentEvents = computed(() => { - if (props.preventClose) { + if (!props.dismissible) { return { pointerDownOutside: (e: Event) => e.preventDefault(), interactOutside: (e: Event) => e.preventDefault(), diff --git a/src/runtime/components/Slideover.vue b/src/runtime/components/Slideover.vue index eabd1894..9011e4d6 100644 --- a/src/runtime/components/Slideover.vue +++ b/src/runtime/components/Slideover.vue @@ -46,10 +46,10 @@ export interface SlideoverProps extends DialogRootProps { */ closeIcon?: string /** - * When `true`, the slideover will not close when clicking outside. - * @defaultValue false + * When `false`, the slideover will not close when clicking outside or pressing escape. + * @defaultValue true */ - preventClose?: boolean + dismissible?: boolean class?: any ui?: Partial } @@ -84,6 +84,7 @@ const props = withDefaults(defineProps(), { overlay: true, transition: true, modal: true, + dismissible: true, side: 'right' }) const emits = defineEmits() @@ -95,7 +96,7 @@ const appConfig = useAppConfig() const rootProps = useForwardPropsEmits(reactivePick(props, 'open', 'defaultOpen', 'modal'), emits) const contentProps = toRef(() => props.content) const contentEvents = computed(() => { - if (props.preventClose) { + if (!props.dismissible) { return { pointerDownOutside: (e: Event) => e.preventDefault(), interactOutside: (e: Event) => e.preventDefault(),