arthur/ui
1
0
Fork 0
mirror of https://github.com/ArthurDanjou/ui.git synced 2026-01-14 12:14:41 +01:00
Code Issues Packages Projects Releases Wiki Activity

fix(Modal/Popover/Slideover)!: rename prevent-close to dismissible + uniformize docs

Browse Source
This commit is contained in:
Benjamin Canac
2024-12-16 13:11:10 +01:00
parent fdaff6630f
commit 6fb426fc17
10 changed files with 148 additions and 73 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
docs/app/components/content/examples/drawer/DrawerDismissibleExample.vue Normal file
View File

@@ -0,0 +1,21 @@
<script setup lang="ts">
const open = ref(false)
</script>
<template>
<UDrawer v-model:open="open" :dismissible="false" :ui="{ header: 'flex items-center justify-between' }">
<UButton label="Open" color="neutral" variant="subtle" trailing-icon="i-lucide-chevron-up" />
<template #header>
<h2 class="text-[var(--ui-text-highlighted)] font-semibold">
Drawer non-dismissible
</h2>
<UButton color="neutral" variant="ghost" icon="i-lucide-x" @click="open = false" />
</template>
<template #body>
<Placeholder class="h-48" />
</template>
</UDrawer>
</template>

21
docs/app/components/content/examples/popover/PopoverDismissibleExample.vue Normal file
View File

@@ -0,0 +1,21 @@
<script setup lang="ts">
const open = ref(false)
</script>
<template>
<UPopover v-model:open="open" :dismissible="false" :ui="{ content: 'p-4' }">
<UButton label="Open" color="neutral" variant="subtle" />
<template #content>
<div class="flex items-center gap-4 mb-4">
<h2 class="text-[var(--ui-text-highlighted)] font-semibold">
Popover non-dismissible
</h2>
<UButton color="neutral" variant="ghost" icon="i-lucide-x" @click="open = false" />
</div>
<Placeholder class="size-full min-h-48" />
</template>
</UPopover>
</template>

15
docs/content/3.components/drawer.md
View File

@@ -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.

58
docs/content/3.components/modal.md
View File

@@ -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: |
<UButton label="Open" color="neutral" variant="subtle" />
body: |
<Placeholder class="h-48" />
---
: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: |
<UButton label="Open" color="neutral" variant="subtle" />
body: |
<Placeholder class="h-48" />
---
: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.

10
docs/content/3.components/popover.md
View File

@@ -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.

58
docs/content/3.components/slideover.md
View File

@@ -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: |
<UButton label="Open" color="neutral" variant="subtle" />
body: |
<Placeholder class="h-full" />
---
: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: |
<UButton label="Open" color="neutral" variant="subtle" />
body: |
<Placeholder class="h-full" />
---
: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.

7
src/runtime/components/Drawer.vue
View File

@@ -11,7 +11,7 @@ const appConfig = _appConfig as AppConfig & { ui: { drawer: Partial<typeof theme
const drawer = tv({ extend: tv(theme), ...(appConfig.ui?.drawer || {}) })
export interface DrawerProps extends Pick<DrawerRootProps, 'activeSnapPoint' | 'closeThreshold' | 'defaultOpen' | 'direction' | 'dismissible' | 'fadeFromIndex' | 'fixed' | 'modal' | 'nested' | 'direction' | 'open' | 'scrollLockTimeout' | 'shouldScaleBackground' | 'snapPoints'> {
export interface DrawerProps extends Pick<DrawerRootProps, 'activeSnapPoint' | 'closeThreshold' | 'defaultOpen' | 'direction' | 'fadeFromIndex' | 'fixed' | 'modal' | 'nested' | 'direction' | 'open' | 'scrollLockTimeout' | 'shouldScaleBackground' | 'snapPoints'> {
/**
* The element or component this component should render as.
* @defaultValue 'div'
@@ -36,6 +36,11 @@ export interface DrawerProps extends Pick<DrawerRootProps, 'activeSnapPoint' | '
* @defaultValue true
*/
portal?: boolean
/**
* When `false`, the drawer will not close when clicking outside or pressing escape.
* @defaultValue true
*/
dismissible?: boolean
class?: any
ui?: Partial<typeof drawer.slots>
}

11
src/runtime/components/Modal.vue
View File

@@ -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<typeof modal.slots>
}
@@ -85,7 +85,8 @@ const props = withDefaults(defineProps<ModalProps>(), {
portal: true,
overlay: true,
transition: true,
modal: true
modal: true,
dismissible: true
})
const emits = defineEmits<ModalEmits>()
const slots = defineSlots<ModalSlots>()
@@ -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(),

11
src/runtime/components/Popover.vue
View File

@@ -32,10 +32,10 @@ export interface PopoverProps extends PopoverRootProps, Pick<HoverCardRootProps,
*/
portal?: boolean
/**
* When `true`, the popover will not close when clicking outside.
* @defaultValue false
* When `false`, the popover will not close when clicking outside or pressing escape.
* @defaultValue true
*/
preventClose?: boolean
dismissible?: boolean
class?: any
ui?: Partial<typeof popover.slots>
}
@@ -61,7 +61,8 @@ const props = withDefaults(defineProps<PopoverProps>(), {
portal: true,
mode: 'click',
openDelay: 0,
closeDelay: 0
closeDelay: 0,
dismissible: true
})
const emits = defineEmits<PopoverEmits>()
const slots = defineSlots<PopoverSlots>()
@@ -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(),

9
src/runtime/components/Slideover.vue
View File

@@ -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<typeof slideover.slots>
}
@@ -84,6 +84,7 @@ const props = withDefaults(defineProps<SlideoverProps>(), {
overlay: true,
transition: true,
modal: true,
dismissible: true,
side: 'right'
})
const emits = defineEmits<SlideoverEmits>()
@@ -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(),