fix(components): apply class on trigger instead of content when present

Resolves #2132
This commit is contained in:
Benjamin Canac
2024-11-19 22:10:27 +01:00
parent faec8260a4
commit a6ecef0f0d
7 changed files with 14 additions and 14 deletions

View File

@@ -167,12 +167,12 @@ const ui = computed(() => contextMenu({
<template>
<ContextMenuRoot v-bind="rootProps">
<ContextMenuTrigger v-if="!!slots.default" as-child :disabled="disabled">
<ContextMenuTrigger v-if="!!slots.default" as-child :disabled="disabled" :class="props.class">
<slot />
</ContextMenuTrigger>
<UContextMenuContent
:class="ui.content({ class: [props.class, props.ui?.content] })"
:class="ui.content({ class: [!slots.default && props.class, props.ui?.content] })"
:ui="ui"
:ui-override="props.ui"
v-bind="contentProps"

View File

@@ -81,14 +81,14 @@ const ui = computed(() => drawer({
<template>
<DrawerRoot v-bind="rootProps">
<DrawerTrigger v-if="!!slots.default" as-child>
<DrawerTrigger v-if="!!slots.default" as-child :class="props.class">
<slot />
</DrawerTrigger>
<DrawerPortal :disabled="!portal">
<DrawerOverlay v-if="overlay" :class="ui.overlay({ class: props.ui?.overlay })" />
<DrawerContent :class="ui.content({ class: [props.class, props.ui?.content] })" v-bind="contentProps">
<DrawerContent :class="ui.content({ class: [!slots.default && props.class, props.ui?.content] })" v-bind="contentProps">
<slot name="handle">
<div v-if="handle" :class="ui.handle({ class: props.ui?.handle })" />
</slot>

View File

@@ -165,12 +165,12 @@ const ui = computed(() => dropdownMenu({
<template>
<DropdownMenuRoot v-slot="{ open }" v-bind="rootProps">
<DropdownMenuTrigger v-if="!!slots.default" as-child :disabled="disabled">
<DropdownMenuTrigger v-if="!!slots.default" as-child :class="props.class" :disabled="disabled">
<slot :open="open" />
</DropdownMenuTrigger>
<UDropdownMenuContent
:class="ui.content({ class: [props.class, props.ui?.content] })"
:class="ui.content({ class: [!slots.default && props.class, props.ui?.content] })"
:ui="ui"
:ui-override="props.ui"
v-bind="contentProps"

View File

@@ -121,14 +121,14 @@ const ui = computed(() => modal({
<template>
<DialogRoot v-slot="{ open }" v-bind="rootProps">
<DialogTrigger v-if="!!slots.default" as-child>
<DialogTrigger v-if="!!slots.default" as-child :class="props.class">
<slot :open="open" />
</DialogTrigger>
<DialogPortal :disabled="!portal">
<DialogOverlay v-if="overlay" :class="ui.overlay({ class: props.ui?.overlay })" />
<DialogContent :class="ui.content({ class: [props.class, props.ui?.content] })" v-bind="contentProps" v-on="contentEvents">
<DialogContent :class="ui.content({ class: [!slots.default && props.class, props.ui?.content] })" v-bind="contentProps" v-on="contentEvents">
<slot name="content">
<div v-if="!!slots.header || (title || !!slots.title) || (description || !!slots.description) || (close || !!slots.close)" :class="ui.header({ class: props.ui?.header })">
<slot name="header">

View File

@@ -92,12 +92,12 @@ const Component = computed(() => props.mode === 'hover' ? HoverCard : Popover)
<template>
<Component.Root v-slot="{ open }" v-bind="rootProps">
<Component.Trigger v-if="!!slots.default" as-child>
<Component.Trigger v-if="!!slots.default" as-child :class="props.class">
<slot :open="open" />
</Component.Trigger>
<Component.Portal :disabled="!portal">
<Component.Content v-bind="contentProps" :class="ui.content({ class: [props.class, props.ui?.content] })" v-on="contentEvents">
<Component.Content v-bind="contentProps" :class="ui.content({ class: [!slots.default && props.class, props.ui?.content] })" v-on="contentEvents">
<slot name="content" />
<Component.Arrow v-if="!!arrow" v-bind="arrowProps" :class="ui.arrow({ class: props.ui?.arrow })" />

View File

@@ -120,14 +120,14 @@ const ui = computed(() => slideover({
<template>
<DialogRoot v-slot="{ open }" v-bind="rootProps">
<DialogTrigger v-if="!!slots.default" as-child>
<DialogTrigger v-if="!!slots.default" as-child :class="props.class">
<slot :open="open" />
</DialogTrigger>
<DialogPortal :disabled="!portal">
<DialogOverlay v-if="overlay" :class="ui.overlay({ class: props.ui?.overlay })" />
<DialogContent :data-side="side" :class="ui.content({ class: [props.class, props.ui?.content] })" v-bind="contentProps" v-on="contentEvents">
<DialogContent :data-side="side" :class="ui.content({ class: [!slots.default && props.class, props.ui?.content] })" v-bind="contentProps" v-on="contentEvents">
<slot name="content">
<div v-if="!!slots.header || (title || !!slots.title) || (description || !!slots.description) || (close || !!slots.close)" :class="ui.header({ class: props.ui?.header })">
<slot name="header">

View File

@@ -70,12 +70,12 @@ const ui = computed(() => tooltip({
<template>
<TooltipRoot v-slot="{ open }" v-bind="rootProps">
<TooltipTrigger v-if="!!slots.default" as-child>
<TooltipTrigger v-if="!!slots.default" as-child :class="props.class">
<slot :open="open" />
</TooltipTrigger>
<TooltipPortal :disabled="!portal">
<TooltipContent v-bind="contentProps" :class="ui.content({ class: [props.class, props.ui?.content] })">
<TooltipContent v-bind="contentProps" :class="ui.content({ class: [!slots.default && props.class, props.ui?.content] })">
<slot name="content">
<span v-if="text" :class="ui.text({ class: props.ui?.text })">{{ text }}</span>