Skip to content

Commit 5dec0e1

Browse files
benjamincanacbenjamincanac
committed
feat(components): handle events in content prop
1 parent f4c417d commit 5dec0e1

File tree

11 files changed

+48
-39
lines changed

11 files changed

+48
-39
lines changed

‎src/runtime/components/ContextMenu.vue‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,13 @@
11
<!-- eslint-disable vue/block-tag-newline -->
22
<script lang="ts">
33
import type { VariantProps } from 'tailwind-variants'
4-
import type { ContextMenuRootProps, ContextMenuRootEmits, ContextMenuContentProps } from 'reka-ui'
4+
import type { ContextMenuRootProps, ContextMenuRootEmits, ContextMenuContentProps, ContextMenuContentEmits } from 'reka-ui'
55
import type { AppConfig } from '@nuxt/schema'
66
import _appConfig from '#build/app.config'
77
import theme from '#build/ui/context-menu'
88
import { tv } from '../utils/tv'
99
import type { AvatarProps, KbdProps, LinkProps } from '../types'
10-
import type { DynamicSlots, PartialString } from '../types/utils'
10+
import type { DynamicSlots, PartialString, EmitsToProps } from '../types/utils'
1111
1212
const appConfigContextMenu = _appConfig as AppConfig & { ui: { contextMenu: Partial<typeof theme> } }
1313
@@ -23,7 +23,7 @@ export interface ContextMenuItem extends Omit<LinkProps, 'type' | 'raw' | 'custo
2323
icon?: string
2424
color?: ContextMenuVariants['color']
2525
avatar?: AvatarProps
26-
content?: Omit<ContextMenuContentProps, 'as' | 'asChild' | 'forceMount'>
26+
content?: Omit<ContextMenuContentProps, 'as' | 'asChild' | 'forceMount'> & Partial<EmitsToProps<ContextMenuContentEmits>>
2727
kbds?: KbdProps['value'][] | KbdProps[]
2828
/**
2929
* The item type.
@@ -67,7 +67,7 @@ export interface ContextMenuProps<T> extends Omit<ContextMenuRootProps, 'dir'> {
6767
*/
6868
externalIcon?: boolean | string
6969
/** The content of the menu. */
70-
content?: Omit<ContextMenuContentProps, 'as' | 'asChild' | 'forceMount'>
70+
content?: Omit<ContextMenuContentProps, 'as' | 'asChild' | 'forceMount'> & Partial<EmitsToProps<ContextMenuContentEmits>>
7171
/**
7272
* Render the menu in a portal.
7373
* @defaultValue true
@@ -114,7 +114,7 @@ const emits = defineEmits<ContextMenuEmits>()
114114
const slots = defineSlots<ContextMenuSlots<T>>()
115115
116116
const rootProps = useForwardPropsEmits(reactivePick(props, 'modal'), emits)
117-
const contentProps = toRef(() => props.content as ContextMenuContentProps)
117+
const contentProps = toRef(() => props.content)
118118
const proxySlots = omit(slots, ['default']) as Record<string, ContextMenuSlots<T>[string]>
119119
120120
const ui = computed(() => contextMenu({

‎src/runtime/components/Drawer.vue‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,11 @@
11
<script lang="ts">
22
import type { DrawerRootProps, DrawerRootEmits } from 'vaul-vue'
3-
import type { DialogContentProps } from 'reka-ui'
3+
import type { DialogContentProps, DialogContentEmits } from 'reka-ui'
44
import type { AppConfig } from '@nuxt/schema'
55
import _appConfig from '#build/app.config'
66
import theme from '#build/ui/drawer'
77
import { tv } from '../utils/tv'
8+
import type { EmitsToProps } from '../types/utils'
89
910
const appConfigDrawer = _appConfig as AppConfig & { ui: { drawer: Partial<typeof theme> } }
1011
@@ -24,7 +25,7 @@ export interface DrawerProps extends Pick<DrawerRootProps, 'activeSnapPoint' | '
2425
*/
2526
inset?: boolean
2627
/** The content of the drawer. */
27-
content?: Omit<DialogContentProps, 'as' | 'asChild' | 'forceMount'>
28+
content?: Omit<DialogContentProps, 'as' | 'asChild' | 'forceMount'> & Partial<EmitsToProps<DialogContentEmits>>
2829
/**
2930
* Render an overlay behind the drawer.
3031
* @defaultValue true

‎src/runtime/components/DropdownMenu.vue‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,13 @@
11
<!-- eslint-disable vue/block-tag-newline -->
22
<script lang="ts">
33
import type { VariantProps } from 'tailwind-variants'
4-
import type { DropdownMenuRootProps, DropdownMenuRootEmits, DropdownMenuContentProps, DropdownMenuArrowProps } from 'reka-ui'
4+
import type { DropdownMenuRootProps, DropdownMenuRootEmits, DropdownMenuContentProps, DropdownMenuContentEmits, DropdownMenuArrowProps } from 'reka-ui'
55
import type { AppConfig } from '@nuxt/schema'
66
import _appConfig from '#build/app.config'
77
import theme from '#build/ui/dropdown-menu'
88
import { tv } from '../utils/tv'
99
import type { AvatarProps, KbdProps, LinkProps } from '../types'
10-
import type { DynamicSlots, PartialString } from '../types/utils'
10+
import type { DynamicSlots, PartialString, EmitsToProps } from '../types/utils'
1111
1212
const appConfigDropdownMenu = _appConfig as AppConfig & { ui: { dropdownMenu: Partial<typeof theme> } }
1313
@@ -23,7 +23,7 @@ export interface DropdownMenuItem extends Omit<LinkProps, 'type' | 'raw' | 'cust
2323
icon?: string
2424
color?: DropdownMenuVariants['color']
2525
avatar?: AvatarProps
26-
content?: Omit<DropdownMenuContentProps, 'as' | 'asChild' | 'forceMount'>
26+
content?: Omit<DropdownMenuContentProps, 'as' | 'asChild' | 'forceMount'> & Partial<EmitsToProps<DropdownMenuContentEmits>>
2727
kbds?: KbdProps['value'][] | KbdProps[]
2828
/**
2929
* The item type.
@@ -70,7 +70,7 @@ export interface DropdownMenuProps<T> extends Omit<DropdownMenuRootProps, 'dir'>
7070
* The content of the menu.
7171
* @defaultValue { side: 'bottom', sideOffset: 8, collisionPadding: 8 }
7272
*/
73-
content?: Omit<DropdownMenuContentProps, 'as' | 'asChild' | 'forceMount'>
73+
content?: Omit<DropdownMenuContentProps, 'as' | 'asChild' | 'forceMount'> & Partial<EmitsToProps<DropdownMenuContentEmits>>
7474
/**
7575
* Display an arrow alongside the menu.
7676
* @defaultValue false

‎src/runtime/components/InputMenu.vue‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,14 @@
11
<script lang="ts">
22
import type { InputHTMLAttributes } from 'vue'
33
import type { VariantProps } from 'tailwind-variants'
4-
import type { ComboboxRootProps, ComboboxRootEmits, ComboboxContentProps, ComboboxArrowProps, AcceptableValue } from 'reka-ui'
4+
import type { ComboboxRootProps, ComboboxRootEmits, ComboboxContentProps, ComboboxContentEmits, ComboboxArrowProps, AcceptableValue } from 'reka-ui'
55
import type { AppConfig } from '@nuxt/schema'
66
import _appConfig from '#build/app.config'
77
import theme from '#build/ui/input-menu'
88
import type { UseComponentIconsProps } from '../composables/useComponentIcons'
99
import { tv } from '../utils/tv'
1010
import type { AvatarProps, ChipProps, InputProps } from '../types'
11-
import type { PartialString, MaybeArrayOfArray, MaybeArrayOfArrayItem, SelectModelValue, SelectModelValueEmits, SelectItemKey } from '../types/utils'
11+
import type { PartialString, MaybeArrayOfArray, MaybeArrayOfArrayItem, SelectModelValue, SelectModelValueEmits, SelectItemKey, EmitsToProps } from '../types/utils'
1212
1313
const appConfigInputMenu = _appConfig as AppConfig & { ui: { inputMenu: Partial<typeof theme> } }
1414
@@ -81,7 +81,7 @@ export interface InputMenuProps<T extends MaybeArrayOfArrayItem<I>, I extends Ma
8181
* The content of the menu.
8282
* @defaultValue { side: 'bottom', sideOffset: 8, collisionPadding: 8, position: 'popper' }
8383
*/
84-
content?: Omit<ComboboxContentProps, 'as' | 'asChild' | 'forceMount'>
84+
content?: Omit<ComboboxContentProps, 'as' | 'asChild' | 'forceMount'> & Partial<EmitsToProps<ComboboxContentEmits>>
8585
/**
8686
* Display an arrow alongside the menu.
8787
* @defaultValue false

‎src/runtime/components/Modal.vue‎

Lines changed: 9 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,11 @@
11
<script lang="ts">
2-
import type { DialogRootProps, DialogRootEmits, DialogContentProps } from 'reka-ui'
2+
import type { DialogRootProps, DialogRootEmits, DialogContentProps, DialogContentEmits } from 'reka-ui'
33
import type { AppConfig } from '@nuxt/schema'
44
import _appConfig from '#build/app.config'
55
import theme from '#build/ui/modal'
66
import { tv } from '../utils/tv'
77
import type { ButtonProps } from '../types'
8+
import type { EmitsToProps } from '../types/utils'
89
910
const appConfigModal = _appConfig as AppConfig & { ui: { modal: Partial<typeof theme> } }
1011
@@ -14,7 +15,7 @@ export interface ModalProps extends DialogRootProps {
1415
title?: string
1516
description?: string
1617
/** The content of the modal. */
17-
content?: Omit<DialogContentProps, 'as' | 'asChild' | 'forceMount'>
18+
content?: Omit<DialogContentProps, 'as' | 'asChild' | 'forceMount'> & Partial<EmitsToProps<DialogContentEmits>>
1819
/**
1920
* Render an overlay behind the modal.
2021
* @defaultValue true
@@ -97,18 +98,20 @@ const appConfig = useAppConfig()
9798
const rootProps = useForwardPropsEmits(reactivePick(props, 'open', 'defaultOpen', 'modal'), emits)
9899
const contentProps = toRef(() => props.content)
99100
const contentEvents = computed(() => {
101+
const events = {
102+
closeAutoFocus: (e: Event) => e.preventDefault()
103+
}
104+
100105
if (!props.dismissible) {
101106
return {
102107
pointerDownOutside: (e: Event) => e.preventDefault(),
103108
interactOutside: (e: Event) => e.preventDefault(),
104109
escapeKeyDown: (e: Event) => e.preventDefault(),
105-
closeAutoFocus: (e: Event) => e.preventDefault()
110+
...events
106111
}
107112
}
108113
109-
return {
110-
closeAutoFocus: (e: Event) => e.preventDefault()
111-
}
114+
return events
112115
})
113116
114117
const ui = computed(() => modal({

‎src/runtime/components/NavigationMenu.vue‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,13 @@
11
<!-- eslint-disable vue/block-tag-newline -->
22
<script lang="ts">
33
import type { VariantProps } from 'tailwind-variants'
4-
import type { NavigationMenuRootProps, NavigationMenuRootEmits, NavigationMenuContentProps, CollapsibleRootProps } from 'reka-ui'
4+
import type { NavigationMenuRootProps, NavigationMenuRootEmits, NavigationMenuContentProps, NavigationMenuContentEmits, CollapsibleRootProps } from 'reka-ui'
55
import type { AppConfig } from '@nuxt/schema'
66
import _appConfig from '#build/app.config'
77
import theme from '#build/ui/navigation-menu'
88
import { tv } from '../utils/tv'
99
import type { AvatarProps, BadgeProps, LinkProps } from '../types'
10-
import type { DynamicSlots, MaybeArrayOfArray, MaybeArrayOfArrayItem, PartialString } from '../types/utils'
10+
import type { DynamicSlots, MaybeArrayOfArray, MaybeArrayOfArrayItem, PartialString, EmitsToProps } from '../types/utils'
1111
1212
const appConfigNavigationMenu = _appConfig as AppConfig & { ui: { navigationMenu: Partial<typeof theme> } }
1313
@@ -94,7 +94,7 @@ export interface NavigationMenuProps<T> extends Pick<NavigationMenuRootProps, 'm
9494
*/
9595
highlightColor?: NavigationMenuVariants['highlightColor']
9696
/** The content of the menu. */
97-
content?: Omit<NavigationMenuContentProps, 'as' | 'asChild' | 'forceMount'>
97+
content?: Omit<NavigationMenuContentProps, 'as' | 'asChild' | 'forceMount'> & Partial<EmitsToProps<NavigationMenuContentEmits>>
9898
/**
9999
* The orientation of the content.
100100
* Only works when `orientation` is `horizontal`.

‎src/runtime/components/Popover.vue‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,10 @@
11
<script lang="ts">
2-
import type { PopoverRootProps, HoverCardRootProps, PopoverRootEmits, PopoverContentProps, PopoverArrowProps } from 'reka-ui'
2+
import type { PopoverRootProps, HoverCardRootProps, PopoverRootEmits, PopoverContentProps, PopoverContentEmits, PopoverArrowProps } from 'reka-ui'
33
import type { AppConfig } from '@nuxt/schema'
44
import _appConfig from '#build/app.config'
55
import theme from '#build/ui/popover'
66
import { tv } from '../utils/tv'
7+
import type { EmitsToProps } from '../types/utils'
78
89
const appConfigPopover = _appConfig as AppConfig & { ui: { popover: Partial<typeof theme> } }
910
@@ -19,7 +20,7 @@ export interface PopoverProps extends PopoverRootProps, Pick<HoverCardRootProps,
1920
* The content of the popover.
2021
* @defaultValue { side: 'bottom', sideOffset: 8, collisionPadding: 8 }
2122
*/
22-
content?: Omit<PopoverContentProps, 'as' | 'asChild' | 'forceMount'>
23+
content?: Omit<PopoverContentProps, 'as' | 'asChild' | 'forceMount'> & Partial<EmitsToProps<PopoverContentEmits>>
2324
/**
2425
* Display an arrow alongside the popover.
2526
* @defaultValue false

‎src/runtime/components/Select.vue‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,13 @@
11
<script lang="ts">
22
import type { VariantProps } from 'tailwind-variants'
3-
import type { SelectRootProps, SelectRootEmits, SelectContentProps, SelectArrowProps, AcceptableValue } from 'reka-ui'
3+
import type { SelectRootProps, SelectRootEmits, SelectContentProps, SelectContentEmits, SelectArrowProps, AcceptableValue } from 'reka-ui'
44
import type { AppConfig } from '@nuxt/schema'
55
import _appConfig from '#build/app.config'
66
import theme from '#build/ui/select'
77
import type { UseComponentIconsProps } from '../composables/useComponentIcons'
88
import { tv } from '../utils/tv'
99
import type { AvatarProps, ChipProps, InputProps } from '../types'
10-
import type { PartialString, MaybeArrayOfArray, MaybeArrayOfArrayItem, SelectModelValue, SelectModelValueEmits, SelectItemKey } from '../types/utils'
10+
import type { PartialString, MaybeArrayOfArray, MaybeArrayOfArrayItem, SelectModelValue, SelectModelValueEmits, SelectItemKey, EmitsToProps } from '../types/utils'
1111
1212
const appConfigSelect = _appConfig as AppConfig & { ui: { select: Partial<typeof theme> } }
1313
@@ -64,7 +64,7 @@ export interface SelectProps<T extends MaybeArrayOfArrayItem<I>, I extends Maybe
6464
* The content of the menu.
6565
* @defaultValue { side: 'bottom', sideOffset: 8, collisionPadding: 8, position: 'popper' }
6666
*/
67-
content?: Omit<SelectContentProps, 'as' | 'asChild' | 'forceMount'>
67+
content?: Omit<SelectContentProps, 'as' | 'asChild' | 'forceMount'> & Partial<EmitsToProps<SelectContentEmits>>
6868
/**
6969
* Display an arrow alongside the menu.
7070
* @defaultValue false

‎src/runtime/components/SelectMenu.vue‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,13 @@
11
<script lang="ts">
22
import type { VariantProps } from 'tailwind-variants'
3-
import type { ComboboxRootProps, ComboboxRootEmits, ComboboxContentProps, ComboboxArrowProps, AcceptableValue } from 'reka-ui'
3+
import type { ComboboxRootProps, ComboboxRootEmits, ComboboxContentProps, ComboboxContentEmits, ComboboxArrowProps, AcceptableValue } from 'reka-ui'
44
import type { AppConfig } from '@nuxt/schema'
55
import _appConfig from '#build/app.config'
66
import theme from '#build/ui/select-menu'
77
import type { UseComponentIconsProps } from '../composables/useComponentIcons'
88
import { tv } from '../utils/tv'
99
import type { AvatarProps, ChipProps, InputProps } from '../types'
10-
import type { PartialString, MaybeArrayOfArray, MaybeArrayOfArrayItem, SelectModelValue, SelectModelValueEmits, SelectItemKey } from '../types/utils'
10+
import type { PartialString, MaybeArrayOfArray, MaybeArrayOfArrayItem, SelectModelValue, SelectModelValueEmits, SelectItemKey, EmitsToProps } from '../types/utils'
1111
1212
const appConfigSelectMenu = _appConfig as AppConfig & { ui: { selectMenu: Partial<typeof theme> } }
1313
@@ -72,7 +72,7 @@ export interface SelectMenuProps<T extends MaybeArrayOfArrayItem<I>, I extends M
7272
* The content of the menu.
7373
* @defaultValue { side: 'bottom', sideOffset: 8, collisionPadding: 8, position: 'popper' }
7474
*/
75-
content?: Omit<ComboboxContentProps, 'as' | 'asChild' | 'forceMount'>
75+
content?: Omit<ComboboxContentProps, 'as' | 'asChild' | 'forceMount'> & Partial<EmitsToProps<ComboboxContentEmits>>
7676
/**
7777
* Display an arrow alongside the menu.
7878
* @defaultValue false

‎src/runtime/components/Slideover.vue‎

Lines changed: 9 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,12 @@
11
<script lang="ts">
22
import type { VariantProps } from 'tailwind-variants'
3-
import type { DialogRootProps, DialogRootEmits, DialogContentProps } from 'reka-ui'
3+
import type { DialogRootProps, DialogRootEmits, DialogContentProps, DialogContentEmits } from 'reka-ui'
44
import type { AppConfig } from '@nuxt/schema'
55
import _appConfig from '#build/app.config'
66
import theme from '#build/ui/slideover'
77
import { tv } from '../utils/tv'
88
import type { ButtonProps } from '../types'
9+
import type { EmitsToProps } from '../types/utils'
910
1011
const appConfigSlideover = _appConfig as AppConfig & { ui: { slideover: Partial<typeof theme> } }
1112
@@ -17,7 +18,7 @@ export interface SlideoverProps extends DialogRootProps {
1718
title?: string
1819
description?: string
1920
/** The content of the slideover. */
20-
content?: Omit<DialogContentProps, 'as' | 'asChild' | 'forceMount'>
21+
content?: Omit<DialogContentProps, 'as' | 'asChild' | 'forceMount'> & Partial<EmitsToProps<DialogContentEmits>>
2122
/**
2223
* Render an overlay behind the slideover.
2324
* @defaultValue true
@@ -101,18 +102,20 @@ const appConfig = useAppConfig()
101102
const rootProps = useForwardPropsEmits(reactivePick(props, 'open', 'defaultOpen', 'modal'), emits)
102103
const contentProps = toRef(() => props.content)
103104
const contentEvents = computed(() => {
105+
const events = {
106+
closeAutoFocus: (e: Event) => e.preventDefault()
107+
}
108+
104109
if (!props.dismissible) {
105110
return {
106111
pointerDownOutside: (e: Event) => e.preventDefault(),
107112
interactOutside: (e: Event) => e.preventDefault(),
108113
escapeKeyDown: (e: Event) => e.preventDefault(),
109-
closeAutoFocus: (e: Event) => e.preventDefault()
114+
...events
110115
}
111116
}
112117
113-
return {
114-
closeAutoFocus: (e: Event) => e.preventDefault()
115-
}
118+
return events
116119
})
117120
118121
const ui = computed(() => slideover({

0 commit comments

Comments
 (0)