Skip to content

FieldPickerMenuList ​

Source: client/lib/theme/vueda-tailwind/display/index.js

Eyebrow at the top of the field-picker list. The in-popover micro-eyebrow recipe (11 px / 600 / 0.04em).

Vue component: FieldPickerMenuList

SlotDefault classesDescription
eyebrowpx-2 py-1.5 text-[length:var(--vueda-text-micro)] font-semibold uppercase tracking-[0.04em] text-muted-foregroundEyebrow at the top of the field-picker list. The in-popover micro-eyebrow recipe (11 px / 600 / 0.04em).
listmax-h-60 pr-3Scrollable viewport capped at 15rem, with space for the scrollbar that stays visible while the list overflows.
itemflex w-full items-center gap-2 rounded-sm px-2 py-1.5 text-sm hover:bg-accent hover:text-accent-foregroundA selectable field row.
emptypx-2 py-1.5 text-sm text-muted-foregroundEmpty-state message shown when every field is already in use.

eyebrow ​

Eyebrow at the top of the field-picker list. The in-popover micro-eyebrow recipe (11 px / 600 / 0.04em).

Default classes:

px-2 py-1.5 text-[length:var(--vueda-text-micro)] font-semibold uppercase tracking-[0.04em] text-muted-foreground

Source: client/lib/theme/vueda-tailwind/display/FieldPickerMenuList.theme.js:18

list ​

Scrollable viewport capped at 15rem, with space for the scrollbar that stays visible while the list overflows.

Default classes:

max-h-60 pr-3

Source: client/lib/theme/vueda-tailwind/display/FieldPickerMenuList.theme.js:24

item ​

A selectable field row.

Default classes:

flex w-full items-center gap-2 rounded-sm px-2 py-1.5 text-sm hover:bg-accent hover:text-accent-foreground

Source: client/lib/theme/vueda-tailwind/display/FieldPickerMenuList.theme.js:28

empty ​

Empty-state message shown when every field is already in use.

Default classes:

px-2 py-1.5 text-sm text-muted-foreground

Source: client/lib/theme/vueda-tailwind/display/FieldPickerMenuList.theme.js:34