@praxisui/dynamic-form 1.0.0-beta.12 → 1.0.0-beta.14
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/README.md +84 -0
- package/fesm2022/praxisui-dynamic-form.mjs +26 -14
- package/fesm2022/praxisui-dynamic-form.mjs.map +1 -1
- package/index.d.ts +6 -1
- package/package.json +7 -7
package/README.md
CHANGED
|
@@ -113,6 +113,90 @@ Alternatively, when `editModeEnabled` is true, `praxis-dynamic-form` renders a g
|
|
|
113
113
|
|
|
114
114
|
See public exports: `projects/praxis-dynamic-form/src/public-api.ts`.
|
|
115
115
|
|
|
116
|
+
## Form Actions — Layout & Styling
|
|
117
|
+
|
|
118
|
+
A barra de ações (onde ficam "ENVIAR", "Cancelar", etc.) é configurável via `config.actions` e pelo Editor (aba "Ações").
|
|
119
|
+
|
|
120
|
+
Defaults
|
|
121
|
+
- Rótulo do botão principal: `ENVIAR`.
|
|
122
|
+
- Posição estrutural: `afterSections` (renderiza abaixo da última seção).
|
|
123
|
+
- Alinhamento: `right`.
|
|
124
|
+
- Orientação: `horizontal`.
|
|
125
|
+
- Espaçamento: `normal`.
|
|
126
|
+
- Background: sem cor por padrão (herda da superfície). Configure via `containerStyles` ou `containerClassName` se desejar uma superfície própria.
|
|
127
|
+
|
|
128
|
+
Estrutura (parcial)
|
|
129
|
+
```ts
|
|
130
|
+
interface FormActionsLayout {
|
|
131
|
+
submit: FormActionButton; // id, label, color, type, variant, shortcut, etc.
|
|
132
|
+
cancel: FormActionButton;
|
|
133
|
+
reset: FormActionButton;
|
|
134
|
+
custom?: FormActionButton[]; // botões extras
|
|
135
|
+
|
|
136
|
+
// Layout/posicionamento
|
|
137
|
+
placement?: 'afterSections' | 'insideLastSection' | 'top';
|
|
138
|
+
position?: 'left' | 'center' | 'right' | 'justified' | 'split';
|
|
139
|
+
orientation?: 'horizontal' | 'vertical';
|
|
140
|
+
spacing?: 'compact' | 'normal' | 'spacious';
|
|
141
|
+
sticky?: boolean; // fixa a barra (bottom)
|
|
142
|
+
|
|
143
|
+
// Estilização do container
|
|
144
|
+
containerClassName?: string; // adiciona classe ao container
|
|
145
|
+
containerStyles?: { [k: string]: any }; // estilos inline (camelCase)
|
|
146
|
+
|
|
147
|
+
// Mobile
|
|
148
|
+
mobile?: { position?: 'left'|'center'|'right'|'justified'; orientation?: 'horizontal'|'vertical'; collapseToMenu?: boolean };
|
|
149
|
+
}
|
|
150
|
+
```
|
|
151
|
+
|
|
152
|
+
Exemplo (config)
|
|
153
|
+
```ts
|
|
154
|
+
config.actions = {
|
|
155
|
+
submit: { visible: true, label: 'ENVIAR', type: 'submit', color: 'primary', variant: 'raised', shortcut: 'ctrl+s' },
|
|
156
|
+
cancel: { visible: true, label: 'Cancelar', type: 'button', color: 'basic' },
|
|
157
|
+
reset: { visible: false, label: 'Reset' },
|
|
158
|
+
placement: 'afterSections',
|
|
159
|
+
position: 'right',
|
|
160
|
+
orientation: 'horizontal',
|
|
161
|
+
spacing: 'normal',
|
|
162
|
+
sticky: false,
|
|
163
|
+
containerClassName: 'my-form-actions',
|
|
164
|
+
containerStyles: {
|
|
165
|
+
background: 'var(--md-sys-color-surface-container)',
|
|
166
|
+
border: '1px solid var(--md-sys-color-outline-variant)',
|
|
167
|
+
borderRadius: '12px',
|
|
168
|
+
padding: '12px 16px'
|
|
169
|
+
},
|
|
170
|
+
mobile: { collapseToMenu: true }
|
|
171
|
+
};
|
|
172
|
+
```
|
|
173
|
+
|
|
174
|
+
CSS por classe (opcional)
|
|
175
|
+
```scss
|
|
176
|
+
.my-form-actions {
|
|
177
|
+
background: var(--md-sys-color-surface-container);
|
|
178
|
+
border: 1px solid var(--md-sys-color-outline-variant);
|
|
179
|
+
border-radius: 12px;
|
|
180
|
+
padding: 12px 16px;
|
|
181
|
+
}
|
|
182
|
+
```
|
|
183
|
+
|
|
184
|
+
Dicas
|
|
185
|
+
- Cores do botão: use `color` = `primary|accent|warn|basic` (respeitam o tema Material).
|
|
186
|
+
- Tokens M3: prefira `--mat-sys-*` / `--md-sys-*` para cores/superfícies.
|
|
187
|
+
- Mobile: ative `collapseToMenu` para colapsar botões extras em menu nas telas pequenas.
|
|
188
|
+
|
|
189
|
+
## Section titles — espaçamento global
|
|
190
|
+
|
|
191
|
+
O título de seção usa por padrão `margin: 0 0 6px 0`. Você pode ajustar globalmente via CSS var:
|
|
192
|
+
|
|
193
|
+
```scss
|
|
194
|
+
/* Global (app host) */
|
|
195
|
+
:root { --pfx-section-title-mb: 10px; } // ex.: 10px abaixo do título
|
|
196
|
+
```
|
|
197
|
+
|
|
198
|
+
Ou por seção, via metadado `titleGapBottom` (em pixels), que aplica inline somente naquela seção.
|
|
199
|
+
|
|
116
200
|
## Compatibility
|
|
117
201
|
|
|
118
202
|
- `@praxisui/dynamic-form` `0.0.x` → Angular `20.x`
|