Document

Usage

MeDocument composes MeLayout, MeHeader, MeDocumentToolbar and MeDocumentView into a full document screen, driven entirely by mode and the v-model payload. No branch of markup differs between create and edit, only the initial data does. read renders every field as plain text.

The chassis knows nothing about any document type. Sections, labels, cards and per-mode visibility all come from the payload.

<template>
  <MeDocument
    v-model="formData"
    :document="document"
    mode="create"
  />
</template>

<script setup lang="ts">
import { DocumentFieldType, type DocumentFormData, type DocumentMeta } from '@mercadoeletronico/eds-next'

const document: DocumentMeta = { type: 'request', number: '', title: 'Novo documento' }

const formData = ref<DocumentFormData>({
  sections: [
    {
      id: 'campos-de-texto',
      label: 'Campos de texto',
      fields: [
        { label: 'Campo de texto', value: '', type: DocumentFieldType.text }
      ]
    }
  ]
})
</script>

Field schema

Every field is a DocumentField: a value alone renders as plain text; adding type (+ config) renders the matching editable input (MeInput, UTextarea, UInputNumber, MeInputDate, USelect, UCheckbox). Fields group into DocumentFormSection/DocumentFormSubsection. A disabled field in config automatically gets variant: 'soft' (unless it already sets its own variant), and help renders as a tooltip after a longer-than-default hover.

A link renders the value as a hyperlink. It is orthogonal to type on purpose: type picks an input, and a link is how the value is displayed, so a field only renders as a link where it renders as plain text. That includes every field in read, since the read transform strips type.

Sections

A section is identified by id and titled by label. Two things beyond fields:

• modes limits the section to some of the three screens. Omitted, it appears in all of them. A section holding decisions made while writing the document typically declares modes: ['create', 'edit'].
• component + componentProps replace the field grid with a component of your own, for a section the chassis has no renderer for (a table, an attachment grid, a timeline). Forwarded straight to MeDocumentView, which takes it over the slot. Wrap it in markRaw, or Vue proxies it once it lands in reactive data.

Party cards

cards renders above the sections, in edit and read only: a document being created has no parties resolved yet. A banner card renders full width through MeForehead; a tile card, the default, joins a row that fills the width whatever the card count. Each card is a role eyebrow, a title and a list of { label, value } rows.

API

Props

Model

Notes

• Consumed by separate pages (create, edit, read — see Documentos), not routed at a fixed path itself, which is why it's documented and ejected as a block rather than a registry:page template.
• Fields are mutated in place: the chassis writes edits straight into field.value. A payload built by mapping from another shape must pass the same DocumentField instances through rather than cloning them, or the form will silently stop writing back.
• Pré-Pedido is the first real document type built on this chassis. Its own field shape lives with the template, not here.