@praxisui/metadata-editor 0.0.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/LICENSE +7 -0
- package/README.md +114 -0
- package/fesm2022/praxisui-metadata-editor.mjs +4182 -0
- package/fesm2022/praxisui-metadata-editor.mjs.map +1 -0
- package/index.d.ts +237 -0
- package/package.json +35 -0
package/LICENSE
ADDED
package/README.md
ADDED
|
@@ -0,0 +1,114 @@
|
|
|
1
|
+
# @praxisui/metadata-editor
|
|
2
|
+
|
|
3
|
+
Editores de metadados (configurações de campos) do Praxis UI. Esta biblioteca não renderiza campos de formulário em runtime; ela oferece UI e serviços para editar as propriedades (metadata) dos campos, incluindo um renderizador dinâmico de editores e uma aba para gerir regras de cascata entre campos.
|
|
4
|
+
|
|
5
|
+
Documentação de arquitetura: `docs/metadata-editors-architecture.praxis.md`.
|
|
6
|
+
|
|
7
|
+
## Instalação
|
|
8
|
+
|
|
9
|
+
```bash
|
|
10
|
+
npm i @praxisui/metadata-editor
|
|
11
|
+
```
|
|
12
|
+
|
|
13
|
+
Peer dependencies (Angular v20): `@angular/core`, `@angular/common`.
|
|
14
|
+
|
|
15
|
+
## Componentes Principais
|
|
16
|
+
|
|
17
|
+
- `FieldMetadataEditorComponent` — host do editor de metadados por tipo de campo.
|
|
18
|
+
- `DynamicEditorRendererComponent` — renderiza dinamicamente os editores de propriedades a partir de um schema de `EditorProperty[]`.
|
|
19
|
+
- `CascadeManagerTabComponent` — aba para gerenciar regras de cascata entre campos (dependências, mapeamentos e execução).
|
|
20
|
+
|
|
21
|
+
### Dynamic Editor Renderer (renderizador dinâmico)
|
|
22
|
+
|
|
23
|
+
Renderiza seções/linhas automaticamente com base em uma lista de propriedades e um `FormGroup` já criado pela fábrica.
|
|
24
|
+
|
|
25
|
+
```ts
|
|
26
|
+
import { FormGroup } from '@angular/forms';
|
|
27
|
+
import { DynamicEditorRendererComponent } from '@praxisui/metadata-editor';
|
|
28
|
+
|
|
29
|
+
// Em um componente de edição
|
|
30
|
+
properties: EditorProperty[] = [
|
|
31
|
+
{ name: 'label', label: 'Rótulo', editorType: 'text', group: 'Apresentação' },
|
|
32
|
+
{ name: 'placeholder', label: 'Placeholder', editorType: 'text', group: 'Apresentação' },
|
|
33
|
+
{ name: 'required', label: 'Obrigatório', editorType: 'checkbox', group: 'Validação' },
|
|
34
|
+
];
|
|
35
|
+
form = new FormGroup({ /* controles criados pela fábrica */ });
|
|
36
|
+
```
|
|
37
|
+
|
|
38
|
+
```html
|
|
39
|
+
<praxis-dynamic-editor-renderer
|
|
40
|
+
[properties]="properties"
|
|
41
|
+
[form]="form">
|
|
42
|
+
</praxis-dynamic-editor-renderer>
|
|
43
|
+
```
|
|
44
|
+
|
|
45
|
+
Recursos:
|
|
46
|
+
- Agrupamento por seção e linhas automáticas (colunas responsivas).
|
|
47
|
+
- Decoradores úteis (ex.: ajuda de regex, seletor de ícones).
|
|
48
|
+
- Priorização visual de campos principais e toggles compactos.
|
|
49
|
+
|
|
50
|
+
### Field Metadata Editor (host completo)
|
|
51
|
+
|
|
52
|
+
Host pronto para uso que seleciona o conjunto de propriedades conforme o `FieldControlType` e normaliza valores iniciais (seed).
|
|
53
|
+
|
|
54
|
+
```ts
|
|
55
|
+
import { FieldMetadataEditorComponent } from '@praxisui/metadata-editor';
|
|
56
|
+
import { FieldControlType } from '@praxisui/core';
|
|
57
|
+
|
|
58
|
+
this.settings.open({
|
|
59
|
+
title: 'Editar metadados do campo',
|
|
60
|
+
content: {
|
|
61
|
+
component: FieldMetadataEditorComponent,
|
|
62
|
+
inputs: { controlType: FieldControlType.INPUT, seed: fieldDef }
|
|
63
|
+
}
|
|
64
|
+
});
|
|
65
|
+
```
|
|
66
|
+
|
|
67
|
+
Emite patches apenas com mudanças relevantes (delta), adequados para persistência.
|
|
68
|
+
|
|
69
|
+
### Cascade Manager Tab (gerenciador de cascata)
|
|
70
|
+
|
|
71
|
+
Aba para declarar dependências entre campos e como popular filtros/valores quando um campo dependente muda.
|
|
72
|
+
|
|
73
|
+
Selector: `praxis-cascade-manager-tab`
|
|
74
|
+
|
|
75
|
+
Inputs
|
|
76
|
+
- `fields: Array<FieldDefinition | FieldMetadata>` — campos disponíveis no formulário (com `name` e labels).
|
|
77
|
+
- `connections?: Array<{ toFieldName: string; toInputPath: string }>` — opcional, para indicar conexões existentes (detecção de conflitos).
|
|
78
|
+
|
|
79
|
+
Outputs
|
|
80
|
+
- `apply: Record<string, Partial<FieldDefinition>>` — patch por campo com as regras configuradas.
|
|
81
|
+
- `cancel: void`
|
|
82
|
+
|
|
83
|
+
Exemplo de uso:
|
|
84
|
+
|
|
85
|
+
```html
|
|
86
|
+
<praxis-cascade-manager-tab
|
|
87
|
+
[fields]="fields"
|
|
88
|
+
(apply)="patchFields($event)"
|
|
89
|
+
></praxis-cascade-manager-tab>
|
|
90
|
+
```
|
|
91
|
+
|
|
92
|
+
Funcionalidades:
|
|
93
|
+
- Busca e seleção de campo, badges de status, import/export de regras (JSON).
|
|
94
|
+
- Edição de dependentes, estratégia de merge, debounce, modo de carregamento (imediato/manual/respeitar loadOn).
|
|
95
|
+
- Mapeamento de filtros com dot‑path e valuePath por dependente, preview com exemplo gerado.
|
|
96
|
+
|
|
97
|
+
## Serviços e Registries
|
|
98
|
+
- `ConfigRegistryService` — resolve a lista de propriedades por tipo de campo.
|
|
99
|
+
- `DynamicFormFactoryService` — cria `FormGroup` com tipos/validadores coerentes.
|
|
100
|
+
- `SchemaNormalizerService` — normaliza defaults, converte valores e aplica opções de provider.
|
|
101
|
+
- `ContextValidatorRegistryService` — registrador de validadores contextuais.
|
|
102
|
+
|
|
103
|
+
## Build e Publicação
|
|
104
|
+
|
|
105
|
+
```bash
|
|
106
|
+
ng build praxis-metadata-editor
|
|
107
|
+
cd dist/praxis-metadata-editor && npm pack
|
|
108
|
+
```
|
|
109
|
+
|
|
110
|
+
O pacote inclui este `README.md` via `assets` no `ng-package.json`.
|
|
111
|
+
|
|
112
|
+
## Links
|
|
113
|
+
- Repositório: https://github.com/codexrodrigues/praxis
|
|
114
|
+
- Issues: https://github.com/codexrodrigues/praxis/issues
|