--- url: "https://vueda.dev/v3/reference/theming/keys/ModelActionForm.md" title: "ModelActionForm" --- # ModelActionForm Source: `client/lib/theme/vueda-tailwind/views/index.js` > Outer wrapper. Empty so the card or bare slot owns all visible chrome; layout decisions belong to whichever inner shell the form renders. Vue component: [ModelActionForm](/v3/reference/api/vue/ModelActionForm.md) | Slot | Default classes | Description | | --- | --- | --- | | [root](/v3/reference/theming/keys/ModelActionForm.md#theme-key-ModelActionForm-root) | | Outer wrapper. Empty so the card or bare slot owns all visible chrome; layout decisions belong to whichever inner shell the form renders. | | [bare](/v3/reference/theming/keys/ModelActionForm.md#theme-key-ModelActionForm-bare) | `contents` | Bare-mode wrapper used when the form is embedded in a host's own card. Renders `display: contents`, which suppresses this form's own card chrome and tone scope. | | [card](/v3/reference/theming/keys/ModelActionForm.md#theme-key-ModelActionForm-card) | callback | Canonical confirmation card. Opens a `group/model-action-form` named scope so descendants opt into tone via `group-data-[tone=…]/model-action-form:` variants, and routes a `data-[tone=…]:` border + 8% ring (`box-shadow: 0 0 0 3px /8%`) per tone. With `page`, the same element drops the card chrome and only stacks the banner and body, because the view's gutter and the page title frame the page. | | [banner](/v3/reference/theming/keys/ModelActionForm.md#theme-key-ModelActionForm-banner) | callback | Tone-tracked banner row at the top of the card. Background and border tint route from the card's `data-tone` via `group-data-[tone=…]/model-action-form:` variants; bottom hairline separates the banner from the body. With `page`, the banner is an unframed row: the icon tile carries the tone, and the page supplies the spacing. | | [bannerIcon](/v3/reference/theming/keys/ModelActionForm.md#theme-key-ModelActionForm-bannerIcon) | 8 classes | 36 px circular icon tile leading the banner. Tile fill and foreground swap with tone (info / success / warning / danger) via the `group/model-action-form` scope; matches the destructive tile recipe on [ActionForm.validationIcon](/v3/reference/theming/keys/ActionForm.md#theme-key-ActionForm-validationIcon) so danger surfaces read as siblings. | | [bannerBody](/v3/reference/theming/keys/ModelActionForm.md#theme-key-ModelActionForm-bannerBody) | | Inner column beside the icon: title, description, optional meta strip. `min-w-0` lets a long title ellipsize instead of pushing the banner wider. | | [bannerTitle](/v3/reference/theming/keys/ModelActionForm.md#theme-key-ModelActionForm-bannerTitle) | | Banner title. 14 px / 600 / foreground; the action's "what is about to happen" headline. | | [bannerDesc](/v3/reference/theming/keys/ModelActionForm.md#theme-key-ModelActionForm-bannerDesc) | | One-line description beneath the banner title. 12 px / muted-foreground so the headline / supporting-copy hierarchy reads at a glance. | | [bannerMeta](/v3/reference/theming/keys/ModelActionForm.md#theme-key-ModelActionForm-bannerMeta) | 2 classes | Optional mono meta strip below the banner description (e.g. "action archive · scope 4 selected"). Mono with a small letter-spacing bump so machine-readable values stay legible at 11 px. | | [body](/v3/reference/theming/keys/ModelActionForm.md#theme-key-ModelActionForm-body) | callback | Card body region beneath the banner. Holds the selected-objects panel, confirm prompt, and extra-fields stack with a 12 px gap between sections. With `page`, the body drops its padding and uses the view's gutter. | | [inner](/v3/reference/theming/keys/ModelActionForm.md#theme-key-ModelActionForm-inner) | `flex flex-col gap-1 md:gap-2 2xl:gap-4 mt-1` | Inner stack used by the embedded [ActionForm.inner](/v3/reference/theming/keys/ActionForm.md#theme-key-ActionForm-inner) when ModelActionForm composes ActionForm. Mirrors the ActionForm rhythm so the field column reads continuously across the two shells. | | [selectedObjects](/v3/reference/theming/keys/ModelActionForm.md#theme-key-ModelActionForm-selectedObjects) | 4 classes | Selected-objects panel: tinted-muted background, hairline, card radius. Tone routing tints the panel destructive when this form's own `group/model-action-form` scope is at `tone="danger"`; neutral otherwise. | | [selectedHead](/v3/reference/theming/keys/ModelActionForm.md#theme-key-ModelActionForm-selectedHead) | `flex flex-row items-baseline justify-between flex-wrap gap-2` | Eyebrow head row above the chip strip: label on the left, mono count on the right. Wraps when the count grows long so the label never overflows the panel. | | [selectedHeadCount](/v3/reference/theming/keys/ModelActionForm.md#theme-key-ModelActionForm-selectedHeadCount) | 2 classes | Mono count beside the eyebrow label (e.g. `12 selected`). Mono / 11 px / `tabular-nums` so digits stay column-aligned as the count changes. | | [selectedObjectsLabel](/v3/reference/theming/keys/ModelActionForm.md#theme-key-ModelActionForm-selectedObjectsLabel) | 2 classes | Page-level eyebrow label above the chip strip. Uses the 11 px / 600 / `0.06em` uppercase recipe. | | [message](/v3/reference/theming/keys/ModelActionForm.md#theme-key-ModelActionForm-message) | callback | Confirm-prompt panel: tinted-muted background with a 2 px primary left rule that signals "read this before you submit". Inner `flex-col` accommodates multi-paragraph guidance without breaking the rule's visual anchor. With `page`, the prompt is plain text, so the selected-records panel stays the page's one framed block. | | [messageText](/v3/reference/theming/keys/ModelActionForm.md#theme-key-ModelActionForm-messageText) | `text-[13px] leading-[1.5] text-foreground m-0` | Paragraph element inside the confirm-prompt panel. 13 px / foreground; resets the default `

` margin so consecutive paragraphs stack on the panel's own gap. | | [extraFields](/v3/reference/theming/keys/ModelActionForm.md#theme-key-ModelActionForm-extraFields) | `flex flex-col gap-3` | Extra-fields slot below the confirm prompt for action-specific inputs (reason, scope, etc.). Standard 12 px form-field stack so embedded fields line up with the surrounding field column. | | [buttons](/v3/reference/theming/keys/ModelActionForm.md#theme-key-ModelActionForm-buttons) | `flex flex-col lg:flex-row gap-1 md:gap-2 flex-wrap lg:flex-nowrap` | Internal button cluster passthrough when ModelActionForm composes its own confirm / cancel pair. The pinned actions strip recipe lives on [ActionForm.buttons](/v3/reference/theming/keys/ActionForm.md#theme-key-ActionForm-buttons); this slot lays out the buttons stacked at narrow widths and inline at `lg+`. | | [list](/v3/reference/theming/keys/ModelActionForm.md#theme-key-ModelActionForm-list) | `flex flex-row flex-wrap gap-2` | Chip-row container inside the selected-objects panel. Wraps so a large selection folds across multiple rows instead of overflowing the card. The `list` / `listItem` / `listItemLabel` / `listItemPk` slot family is the kit's preferred selected-object dialect; the standalone [ActionForm.list](/v3/reference/theming/keys/ActionForm.md#theme-key-ActionForm-list) stack is the alternative for non-card consumers. | | [listItem](/v3/reference/theming/keys/ModelActionForm.md#theme-key-ModelActionForm-listItem) | 5 classes | One chip in the selected-objects strip: label + mono PK on a card-toned background with a hairline border. Tints destructive in this form's own danger scope; neutral otherwise. | | [listItemLabel](/v3/reference/theming/keys/ModelActionForm.md#theme-key-ModelActionForm-listItemLabel) | `text-[12px] font-medium text-foreground leading-none` | Human-readable label fragment of a chip. 12 px / 500 / foreground so the label reads as the primary token in the chip. | | [listItemPk](/v3/reference/theming/keys/ModelActionForm.md#theme-key-ModelActionForm-listItemPk) | 2 classes | Mono PK fragment of a chip. 11 px / mono / muted-foreground; tints destructive at 80 % strength under danger so the PK still reads as supporting copy beside the label. | | [nonFieldErrorBlock](/v3/reference/theming/keys/ModelActionForm.md#theme-key-ModelActionForm-nonFieldErrorBlock) | | Non-field error block passthrough. Empty by default; the tone-tracked banner above and the per-field validation alert on [ActionForm.validation](/v3/reference/theming/keys/ActionForm.md#theme-key-ActionForm-validation) carry most failure feedback. | | [confirmWarningGroup](/v3/reference/theming/keys/ModelActionForm.md#theme-key-ModelActionForm-confirmWarningGroup) | 4 classes | One warned object's group inside the confirmation dialog's per-object warnings view (see [ActionForm.validation](/v3/reference/theming/keys/ActionForm.md#theme-key-ActionForm-validation) for the analogous per-field alert). A left rule in the warning tone separates each object's messages from the next, echoing [ModelActionForm.message](/v3/reference/theming/keys/ModelActionForm.md#theme-key-ModelActionForm-message)'s primary-toned rule for the confirm prompt. | | [confirmWarningLabel](/v3/reference/theming/keys/ModelActionForm.md#theme-key-ModelActionForm-confirmWarningLabel) | `text-[12px] font-medium text-foreground` | Label row above a warned object's messages, rendering the object's own display link via [WidgetReadOnly](/v3/reference/api/vue/WidgetReadOnly.md). The messages themselves render via [FieldWarningsList](/v3/reference/api/vue/FieldWarningsList.md). | ## root > Outer wrapper. Empty so the card or bare slot owns all visible chrome; layout decisions belong to whichever inner shell the form renders. Source: `client/lib/theme/vueda-tailwind/views/ModelActionForm.theme.js:18` ## bare > Bare-mode wrapper used when the form is embedded in a host's own card. Renders `display: contents`, which suppresses this form's own card chrome and tone scope. Default classes: `contents` Source: `client/lib/theme/vueda-tailwind/views/ModelActionForm.theme.js:22` ## card > Canonical confirmation card. Opens a `group/model-action-form` named scope so descendants opt into tone via `group-data-[tone=…]/model-action-form:` variants, and routes a `data-[tone=…]:` border + 8% ring (`box-shadow: 0 0 0 3px /8%`) per tone. With `page`, the same element drops the card chrome and only stacks the banner and body, because the view's gutter and the page title frame the page. Callback: ```javascript ({ page }) => page ? ["group/model-action-form", "flex flex-col gap-4"] : [ "group/model-action-form", "rounded-vueda-card border-hairline bg-card overflow-hidden", // info (default) "data-[tone=info]:border-border", "data-[tone=info]:shadow-[0_0_0_3px_color-mix(in_oklab,var(--ring)_8%,transparent)]", // success "data-[tone=success]:border-success/50", "data-[tone=success]:shadow-[0_0_0_3px_color-mix(in_oklab,var(--success)_8%,transparent)]", // warning "data-[tone=warning]:border-warning/50", "data-[tone=warning]:shadow-[0_0_0_3px_color-mix(in_oklab,var(--warning)_8%,transparent)]", // danger "data-[tone=danger]:border-destructive/50", "data-[tone=danger]:shadow-[0_0_0_3px_color-mix(in_oklab,var(--destructive)_8%,transparent)]", ] ``` Source: `client/lib/theme/vueda-tailwind/views/ModelActionForm.theme.js:26` ## banner > Tone-tracked banner row at the top of the card. Background and border tint route from the card's `data-tone` via `group-data-[tone=…]/model-action-form:` variants; bottom hairline separates the banner from the body. With `page`, the banner is an unframed row: the icon tile carries the tone, and the page supplies the spacing. Callback: ```javascript ({ page }) => page ? { class: ["flex items-start gap-3"] } : { composes: ["_ActionBanner.banner"], class: [ // info "group-data-[tone=info]/model-action-form:border-border", "group-data-[tone=info]/model-action-form:bg-[color-mix(in_oklab,var(--info)_6%,transparent)]", // success "group-data-[tone=success]/model-action-form:border-success/20", "group-data-[tone=success]/model-action-form:bg-[color-mix(in_oklab,var(--success)_6%,transparent)]", // warning "group-data-[tone=warning]/model-action-form:border-warning/20", "group-data-[tone=warning]/model-action-form:bg-[color-mix(in_oklab,var(--warning)_6%,transparent)]", // danger "group-data-[tone=danger]/model-action-form:border-destructive/20", "group-data-[tone=danger]/model-action-form:bg-destructive/[0.06]", ], } ``` Source: `client/lib/theme/vueda-tailwind/views/ModelActionForm.theme.js:52` ## bannerIcon > 36 px circular icon tile leading the banner. Tile fill and foreground swap with tone (info / success / warning / danger) via the `group/model-action-form` scope; matches the destructive tile recipe on [ActionForm.validationIcon](/v3/reference/theming/keys/ActionForm.md#theme-key-ActionForm-validationIcon) so danger surfaces read as siblings. Default classes: ```text group-data-[tone=info]/model-action-form:bg-info group-data-[tone=info]/model-action-form:text-info-foreground group-data-[tone=success]/model-action-form:bg-success group-data-[tone=success]/model-action-form:text-success-foreground group-data-[tone=warning]/model-action-form:bg-warning group-data-[tone=warning]/model-action-form:text-warning-foreground group-data-[tone=danger]/model-action-form:bg-destructive group-data-[tone=danger]/model-action-form:text-destructive-foreground ``` Composes: `_ActionBanner.bannerIcon` Source: `client/lib/theme/vueda-tailwind/views/ModelActionForm.theme.js:73` ## bannerBody > Inner column beside the icon: title, description, optional meta strip. `min-w-0` lets a long title ellipsize instead of pushing the banner wider. Composes: `_ActionBanner.bannerBody` Source: `client/lib/theme/vueda-tailwind/views/ModelActionForm.theme.js:94` ## bannerTitle > Banner title. 14 px / 600 / foreground; the action's "what is about to happen" headline. Composes: `_ActionBanner.bannerTitle` Source: `client/lib/theme/vueda-tailwind/views/ModelActionForm.theme.js:99` ## bannerDesc > One-line description beneath the banner title. 12 px / muted-foreground so the headline / supporting-copy hierarchy reads at a glance. Composes: `_ActionBanner.bannerDesc` Source: `client/lib/theme/vueda-tailwind/views/ModelActionForm.theme.js:104` ## bannerMeta > Optional mono meta strip below the banner description (e.g. "action archive · scope 4 selected"). Mono with a small letter-spacing bump so machine-readable values stay legible at 11 px. Default classes: ```text font-mono text-[11px] font-normal leading-[1.5] tracking-[0.04em] text-muted-foreground ``` Source: `client/lib/theme/vueda-tailwind/views/ModelActionForm.theme.js:109` ## body > Card body region beneath the banner. Holds the selected-objects panel, confirm prompt, and extra-fields stack with a 12 px gap between sections. With `page`, the body drops its padding and uses the view's gutter. Callback: ```javascript ({ page }) => (page ? ["flex flex-col gap-3"] : ["p-4 flex flex-col gap-3"]) ``` Source: `client/lib/theme/vueda-tailwind/views/ModelActionForm.theme.js:113` ## inner > Inner stack used by the embedded [ActionForm.inner](/v3/reference/theming/keys/ActionForm.md#theme-key-ActionForm-inner) when ModelActionForm composes ActionForm. Mirrors the ActionForm rhythm so the field column reads continuously across the two shells. Default classes: `flex flex-col gap-1 md:gap-2 2xl:gap-4 mt-1` Source: `client/lib/theme/vueda-tailwind/views/ModelActionForm.theme.js:117` ## selectedObjects > Selected-objects panel: tinted-muted background, hairline, card radius. Tone routing tints the panel destructive when this form's own `group/model-action-form` scope is at `tone="danger"`; neutral otherwise. Default classes: ```text rounded-vueda-card bg-muted/25 hairline hairline-border p-3 flex flex-col gap-2 group-data-[tone=danger]/model-action-form:bg-destructive/[0.06] group-data-[tone=danger]/model-action-form:[--vueda-hairline-color:color-mix(in_oklab,var(--destructive)_40%,transparent)] ``` Source: `client/lib/theme/vueda-tailwind/views/ModelActionForm.theme.js:121` ## selectedHead > Eyebrow head row above the chip strip: label on the left, mono count on the right. Wraps when the count grows long so the label never overflows the panel. Default classes: `flex flex-row items-baseline justify-between flex-wrap gap-2` Source: `client/lib/theme/vueda-tailwind/views/ModelActionForm.theme.js:132` ## selectedHeadCount > Mono count beside the eyebrow label (e.g. `12 selected`). Mono / 11 px / `tabular-nums` so digits stay column-aligned as the count changes. Default classes: ```text font-mono text-[11px] font-normal leading-none tabular-nums text-muted-foreground ``` Source: `client/lib/theme/vueda-tailwind/views/ModelActionForm.theme.js:136` ## selectedObjectsLabel > Page-level eyebrow label above the chip strip. Uses the 11 px / 600 / `0.06em` uppercase recipe. Default classes: ```text text-[length:var(--vueda-text-micro)] font-semibold uppercase tracking-[0.06em] text-muted-foreground leading-none ``` Source: `client/lib/theme/vueda-tailwind/views/ModelActionForm.theme.js:140` ## message > Confirm-prompt panel: tinted-muted background with a 2 px primary left rule that signals "read this before you submit". Inner `flex-col` accommodates multi-paragraph guidance without breaking the rule's visual anchor. With `page`, the prompt is plain text, so the selected-records panel stays the page's one framed block. Callback: ```javascript ({ page }) => page ? ["flex flex-col gap-1.5"] : [ "flex flex-col gap-1.5", "rounded-vueda-control bg-muted/25", "border-l-2 border-primary/60", "px-3 py-2.5", ] ``` Source: `client/lib/theme/vueda-tailwind/views/ModelActionForm.theme.js:147` ## messageText > Paragraph element inside the confirm-prompt panel. 13 px / foreground; resets the default `

` margin so consecutive paragraphs stack on the panel's own gap. Default classes: `text-[13px] leading-[1.5] text-foreground m-0` Source: `client/lib/theme/vueda-tailwind/views/ModelActionForm.theme.js:159` ## extraFields > Extra-fields slot below the confirm prompt for action-specific inputs (reason, scope, etc.). Standard 12 px form-field stack so embedded fields line up with the surrounding field column. Default classes: `flex flex-col gap-3` Source: `client/lib/theme/vueda-tailwind/views/ModelActionForm.theme.js:163` ## buttons > Internal button cluster passthrough when ModelActionForm composes its own confirm / cancel pair. The pinned actions strip recipe lives on [ActionForm.buttons](/v3/reference/theming/keys/ActionForm.md#theme-key-ActionForm-buttons); this slot lays out the buttons stacked at narrow widths and inline at `lg+`. Default classes: `flex flex-col lg:flex-row gap-1 md:gap-2 flex-wrap lg:flex-nowrap` Source: `client/lib/theme/vueda-tailwind/views/ModelActionForm.theme.js:167` ## list > Chip-row container inside the selected-objects panel. Wraps so a large selection folds across multiple rows instead of overflowing the card. The `list` / `listItem` / `listItemLabel` / `listItemPk` slot family is the kit's preferred selected-object dialect; the standalone [ActionForm.list](/v3/reference/theming/keys/ActionForm.md#theme-key-ActionForm-list) stack is the alternative for non-card consumers. Default classes: `flex flex-row flex-wrap gap-2` Source: `client/lib/theme/vueda-tailwind/views/ModelActionForm.theme.js:171` ## listItem > One chip in the selected-objects strip: label + mono PK on a card-toned background with a hairline border. Tints destructive in this form's own danger scope; neutral otherwise. Default classes: ```text inline-flex items-center gap-2 px-2 py-1 rounded-vueda-control hairline hairline-border bg-card text-[12px] font-medium text-foreground leading-none group-data-[tone=danger]/model-action-form:[--vueda-hairline-color:color-mix(in_oklab,var(--destructive)_40%,transparent)] group-data-[tone=danger]/model-action-form:bg-card ``` Source: `client/lib/theme/vueda-tailwind/views/ModelActionForm.theme.js:175` ## listItemLabel > Human-readable label fragment of a chip. 12 px / 500 / foreground so the label reads as the primary token in the chip. Default classes: `text-[12px] font-medium text-foreground leading-none` Source: `client/lib/theme/vueda-tailwind/views/ModelActionForm.theme.js:185` ## listItemPk > Mono PK fragment of a chip. 11 px / mono / muted-foreground; tints destructive at 80 % strength under danger so the PK still reads as supporting copy beside the label. Default classes: ```text text-[11px] font-normal font-mono text-muted-foreground leading-none group-data-[tone=danger]/model-action-form:text-destructive/80 ``` Source: `client/lib/theme/vueda-tailwind/views/ModelActionForm.theme.js:189` ## nonFieldErrorBlock > Non-field error block passthrough. Empty by default; the tone-tracked banner above and the per-field validation alert on [ActionForm.validation](/v3/reference/theming/keys/ActionForm.md#theme-key-ActionForm-validation) carry most failure feedback. Default classes: Source: `client/lib/theme/vueda-tailwind/views/ModelActionForm.theme.js:196` ## confirmWarningGroup > One warned object's group inside the confirmation dialog's per-object warnings view (see [ActionForm.validation](/v3/reference/theming/keys/ActionForm.md#theme-key-ActionForm-validation) for the analogous per-field alert). A left rule in the warning tone separates each object's messages from the next, echoing [ModelActionForm.message](/v3/reference/theming/keys/ModelActionForm.md#theme-key-ModelActionForm-message)'s primary-toned rule for the confirm prompt. Default classes: ```text flex flex-col gap-1 rounded-vueda-control bg-muted/25 border-l-2 border-warning/60 px-3 py-2 ``` Source: `client/lib/theme/vueda-tailwind/views/ModelActionForm.theme.js:200` ## confirmWarningLabel > Label row above a warned object's messages, rendering the object's own display link via [WidgetReadOnly](/v3/reference/api/vue/WidgetReadOnly.md). The messages themselves render via [FieldWarningsList](/v3/reference/api/vue/FieldWarningsList.md). Default classes: `text-[12px] font-medium text-foreground` Source: `client/lib/theme/vueda-tailwind/views/ModelActionForm.theme.js:209`