Simplify table usage in modals

[Barbapapazes]

Description

Hello 👋,

I'm building a dashboard and I often need to put a table in a modal. Currently, I have to manually change the style of the modal and the table to match perfectly.

See this example: https://stackblitz.com/edit/github-2aatsynx?file=app%2Fpages%2Findex.vue

To solve this, I have to solution in mind:

1. props to change the table and modal class;
2. injection key to tell the table that it is in a modal.

To be honest, I don't like the second one as it removes a lot of flexibility.

The first one will introduce some new variants to all customization globally which is better than the current manual customization. For a Modal component, a new table (or body-padding or something even more generic but used to remove the padding from the body) props and a modal props for the table to align the internal padding.

Maybe there is more solutions to this!

Additional context

No response

[Barbapapazes]

The current workaround is by wrapping Nuxt UI components:

<script lang="ts">
import type { ModalEmits, ModalProps, ModalSlots } from '@nuxt/ui'
import { useForwardPropsEmits } from 'reka-ui'

export interface TableModalProps extends /* @vue-ignore */ ModalProps {}
export interface TableModalEmits extends /* @vue-ignore */ ModalEmits {}
export interface TableModalSlots extends /* @vue-ignore */ ModalSlots {}
</script>

<script lang="ts" setup>
const props = defineProps<TableModalProps>()
const emits = defineEmits<TableModalEmits>()
const slots = defineSlots<TableModalSlots>()

const forwarded = useForwardPropsEmits(props, emits)
</script>

<template>
  <UModal
    v-bind="forwarded"
    :ui="{ body: 'p-0 sm:p-0', content: 'w-2xl' }"
  >
    <template v-for="(_, name) in slots" #[name]="slotData">
      <slot :name="name" v-bind="slotData as any" />
    </template>
  </UModal>
</template>

<script lang="ts">
import type { TableData, TableProps, TableSlots } from '@nuxt/ui'
import { useForwardProps } from 'reka-ui'

export interface ModalTableProps<T extends TableData = TableData> extends /* @vue-ignore */ TableProps<T> {}
export type ModalTableSlots<T extends TableData = TableData> = /* @vue-ignore */ TableSlots<T>
</script>

<script lang="ts" setup generic="T extends TableData">
const props = defineProps<ModalTableProps<T>>()
const slots = defineSlots<ModalTableSlots<T>>()

const forwarded = useForwardProps(props)
</script>

<template>
  <UTable
    v-bind="forwarded"
    :ui="{ th: 'px-6', td: 'px-6' }"
  >
    <template v-for="(_, name) in slots" #[name]="slotData">
      <slot :name="name" v-bind="slotData as any" />
    </template>
  </UTable>
</template>

[benjamincanac]

@Barbapapazes I'm not sure to get the point, why don't you use the #content slot instead of #body if you want to conditionally remove the padding? 🤔

[Barbapapazes]

Because if I use #content, the header (title, description, and close button) disappears which is not something I want.