Form pattern

Confirm edit

One transaction contract for popover and dialog editors.

Playground

Configure the component and copy synchronized Vue code.

Properties

Presentation

Dirty close

Editor slots

Vue

<m-confirm-edit v-model="profile" presentation="dialog" dirty-close-behavior="confirm">
  <template #activator="{ props }">
    <m-button v-bind="props">Edit profile</m-button>
  </template>
  <template #editor="{ draft, patchDraft }">
    <m-text-field :model-value="draft.name" @update:model-value="name => patchDraft({ name })" />
  </template>
</m-confirm-edit>

Token map

The manual manifest combines inherited token owners with local deltas.

Search tokens

MConfirmEdit · All6 tokens

md-confirm-edit

MConfirmEdit API

Props, slots, and events are generated from the current public kit contract.

MConfirmEdit

Workflow family

src/runtime/components/ui/confirm-edit

Props

NameTypeDefault

disabledPrevents interaction and applies the disabled visual state.

booleanfalse

loadingReplaces content with progress feedback and prevents interaction.

booleanfalse

presentation

'auto' | 'popover' | 'dialog''auto'

dirtyCloseBehavior

'confirm' | 'prevent' | 'discard''confirm'

clone

(value: unknown) => unknownundefined

compare

(draft: unknown, committed: unknown) => booleanundefined

save

(draft: unknown, committed: unknown) => unknown | Promise<unknown>undefined

title

string'Edit'

saveText

string'Save'

cancelText

string'Cancel'

discardTitle

string'Discard changes?'

discardText

string'Unsaved changes will be lost.'

Slots

Events

@saveT

@cancelT

@openvoid

@closevoid

@errorunknown

@conflictT