FieldSetTabularInline
Source: client/lib/theme/vueda-tailwind/form/index.js
Class hook for the unsaved-row Delete button. Tone, emphasis, and size come from the component; appearance comes from Button.
Vue component: FieldSetTabularInline
| Slot | Default classes | Description |
|---|---|---|
| destroyButton | Class hook for the unsaved-row Delete button. Tone, emphasis, and size come from the component; appearance comes from Button. | |
| root | 2 classes | Card shell for tabular inline editing, including nested-fieldset inset chrome. |
| inner | flex flex-col | Unpadded vertical stack so the embedded grid can merge with the card edge. |
| hr | hidden | Legacy divider slot kept hidden because the title bar owns the separator. |
| titleBar | 4 classes | Eyebrow title bar for tabular inline fieldsets. See also: FieldSetStackedInline.titleBar. |
| titleTrigger | flex flex-1 min-w-0 items-center gap-2 2xs:gap-3 text-left [font:inherit] [text-transform:inherit] tracking-[inherit] -ml-3 -my-2 px-3 py-2 self-stretch | Disclosure label and chevron, beside the independent Create action. |
| titleBarToggle | 4 classes | Interactive state layer for a hidable tabular title bar. See also: FieldSetStackedInline.titleBarToggle. |
| toggleIndicator | 2 classes | Chevron container that rotates when the tabular fieldset collapses. |
| title | Title text slot inside the tabular title bar. | |
| actionBar | 2 classes | Trailing action group in the title bar. |
| itemActionBar | 2 classes | Row action group used by the embedded grid action column. |
| body | flex flex-col | Grid body wrapper that stamps data-flush so ObjectsGrid.root drops duplicate chrome. |
| objectsGrid | w-full | Embedded objects grid host. |
| objectsGridHidden | hidden | Legacy grid visibility hook. CollapsibleContent now controls body visibility. |
| destroyPill | 5 classes | Compact destructive status pill shown on rows marked for destroy. |
| field | min-w-1 | Wrapper around each field rendered for card-mode tabular rows. |
| fieldInner | Pass-through wrapper immediately inside a rendered tabular field. | |
| createButton | Pass-through hook for the Create action. Button styling comes from Button. | |
| inLineCreateButton | !w-full h-full | Full-width inline create affordance used by row-shaped invitations. |
| toggleButton | Pass-through hook for a separate hide/show button. The title bar is the canonical toggle surface. | |
| createButtonCard | border-dashed | Card-mode create invitation gets dashed chrome to read as an empty row affordance. |
| choresPanel | 3 classes | Fieldset-level help and validation panel below the embedded grid. |
| emptyState | 3 classes | Dashed invitation block used when no tabular rows exist. See also: FieldSetStackedInline.emptyState. |
| emptyStateIcon | 3 classes | Muted icon disc inside the tabular empty-state invitation. |
| emptyStateTitle | text-[length:var(--vueda-text-reading)] font-semibold leading-snug text-foreground | Short empty-state headline for tabular inline rows. |
| emptyStateDesc | 2 classes | Supporting empty-state hint copy for tabular inline rows. |
| themeOverride | Embedded cells keep controls top-aligned when messages add height and allow help and validation text to wrap. |
destroyButton
Class hook for the unsaved-row Delete button. Tone, emphasis, and size come from the component; appearance comes from Button.
Source: client/lib/theme/vueda-tailwind/form/FieldSetTabularInline.theme.js:18
root
Card shell for tabular inline editing, including nested-fieldset inset chrome.
Default classes:
bg-card border-hairline rounded-vueda-card overflow-clip
[[data-vueda-fieldset]_&]:border-0 [[data-vueda-fieldset]_&]:shadow-[inset_0_0_0_var(--vueda-hairline-width)_var(--border)]Source: client/lib/theme/vueda-tailwind/form/FieldSetTabularInline.theme.js:22
inner
Unpadded vertical stack so the embedded grid can merge with the card edge.
Default classes:
flex flex-col
Source: client/lib/theme/vueda-tailwind/form/FieldSetTabularInline.theme.js:30
hr
Legacy divider slot kept hidden because the title bar owns the separator.
Default classes:
hidden
Source: client/lib/theme/vueda-tailwind/form/FieldSetTabularInline.theme.js:34
titleBar
Eyebrow title bar for tabular inline fieldsets. See also: FieldSetStackedInline.titleBar.
Default classes:
flex items-center gap-2 2xs:gap-3 px-3 py-2 border-b-hairline
text-[length:var(--vueda-text-micro)] font-semibold uppercase tracking-[0.06em] leading-none
text-muted-foreground
[[data-vueda-fieldset]_&]:bg-[color-mix(in_oklab,var(--muted)_20%,var(--card))]Source: client/lib/theme/vueda-tailwind/form/FieldSetTabularInline.theme.js:38
titleTrigger
Disclosure label and chevron, beside the independent Create action.
Default classes:
flex flex-1 min-w-0 items-center gap-2 2xs:gap-3 text-left [font:inherit] [text-transform:inherit] tracking-[inherit] -ml-3 -my-2 px-3 py-2 self-stretch
Source: client/lib/theme/vueda-tailwind/form/FieldSetTabularInline.theme.js:47
titleBarToggle
Interactive state layer for a hidable tabular title bar. See also: FieldSetStackedInline.titleBarToggle.
Default classes:
cursor-pointer select-none
hover:bg-accent hover:text-accent-foreground active:bg-accent-active active:text-accent-foreground
focus-visible:focus-ring-shadow
transition-colorsSource: client/lib/theme/vueda-tailwind/form/FieldSetTabularInline.theme.js:53
toggleIndicator
Chevron container that rotates when the tabular fieldset collapses.
Default classes:
inline-flex items-center justify-center shrink-0 size-4
transition-transform duration-150Source: client/lib/theme/vueda-tailwind/form/FieldSetTabularInline.theme.js:62
title
Title text slot inside the tabular title bar.
Source: client/lib/theme/vueda-tailwind/form/FieldSetTabularInline.theme.js:66
actionBar
Trailing action group in the title bar.
Default classes:
grow-0 flex gap-1 2xs:gap-2 2xl:gap-4
ml-autoSource: client/lib/theme/vueda-tailwind/form/FieldSetTabularInline.theme.js:70
itemActionBar
Row action group used by the embedded grid action column.
Default classes:
flex gap-1 2xs:gap-2 2xl:gap-4
items-baselineSource: client/lib/theme/vueda-tailwind/form/FieldSetTabularInline.theme.js:74
body
Grid body wrapper that stamps
data-flushso ObjectsGrid.root drops duplicate chrome.
Default classes:
flex flex-col
Source: client/lib/theme/vueda-tailwind/form/FieldSetTabularInline.theme.js:78
objectsGrid
Embedded objects grid host.
Default classes:
w-full
Source: client/lib/theme/vueda-tailwind/form/FieldSetTabularInline.theme.js:82
objectsGridHidden
Legacy grid visibility hook. CollapsibleContent now controls body visibility.
Default classes:
hidden
Source: client/lib/theme/vueda-tailwind/form/FieldSetTabularInline.theme.js:86
destroyPill
Compact destructive status pill shown on rows marked for destroy.
Default classes:
inline-flex items-center justify-center shrink-0
px-1.5 h-5 rounded-vueda-control
bg-destructive/10 text-destructive
text-[10px] font-semibold uppercase tracking-[0.06em] leading-none
[font-variant-numeric:tabular-nums]Source: client/lib/theme/vueda-tailwind/form/FieldSetTabularInline.theme.js:90
field
Wrapper around each field rendered for card-mode tabular rows.
Default classes:
min-w-1
Source: client/lib/theme/vueda-tailwind/form/FieldSetTabularInline.theme.js:100
fieldInner
Pass-through wrapper immediately inside a rendered tabular field.
Source: client/lib/theme/vueda-tailwind/form/FieldSetTabularInline.theme.js:107
createButton
Pass-through hook for the Create action. Button styling comes from Button.
Source: client/lib/theme/vueda-tailwind/form/FieldSetTabularInline.theme.js:111
inLineCreateButton
Full-width inline create affordance used by row-shaped invitations.
Default classes:
!w-full h-full
Source: client/lib/theme/vueda-tailwind/form/FieldSetTabularInline.theme.js:115
toggleButton
Pass-through hook for a separate hide/show button. The title bar is the canonical toggle surface.
Source: client/lib/theme/vueda-tailwind/form/FieldSetTabularInline.theme.js:119
createButtonCard
Card-mode create invitation gets dashed chrome to read as an empty row affordance.
Default classes:
border-dashed
Source: client/lib/theme/vueda-tailwind/form/FieldSetTabularInline.theme.js:123
choresPanel
Fieldset-level help and validation panel below the embedded grid.
Default classes:
px-3 py-2 border-t-hairline
bg-[color-mix(in_oklab,var(--muted)_15%,var(--card))]
flex flex-col gap-1Source: client/lib/theme/vueda-tailwind/form/FieldSetTabularInline.theme.js:127
emptyState
Dashed invitation block used when no tabular rows exist. See also: FieldSetStackedInline.emptyState.
Default classes:
flex flex-col items-center justify-center gap-2
m-3 py-8 px-6 text-center
rounded-vueda-card border-2 border-dashed bg-muted/30Source: client/lib/theme/vueda-tailwind/form/FieldSetTabularInline.theme.js:135
emptyStateIcon
Muted icon disc inside the tabular empty-state invitation.
Default classes:
flex items-center justify-center
size-9 rounded-full bg-muted text-muted-foreground
text-[length:var(--vueda-text-title)] leading-noneSource: client/lib/theme/vueda-tailwind/form/FieldSetTabularInline.theme.js:143
emptyStateTitle
Short empty-state headline for tabular inline rows.
Default classes:
text-[length:var(--vueda-text-reading)] font-semibold leading-snug text-foreground
Source: client/lib/theme/vueda-tailwind/form/FieldSetTabularInline.theme.js:151
emptyStateDesc
Supporting empty-state hint copy for tabular inline rows.
Default classes:
text-[length:var(--vueda-text-supporting)] font-normal leading-normal
text-muted-foreground max-w-[44ch]Source: client/lib/theme/vueda-tailwind/form/FieldSetTabularInline.theme.js:155
themeOverride
Embedded cells keep controls top-aligned when messages add height and allow help and validation text to wrap.
Source: client/lib/theme/vueda-tailwind/form/FieldSetTabularInline.theme.js:162