@praxisui/dynamic-fields 9.0.15 → 9.0.17
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/ai/component-registry.json +2352 -90
- package/docs/dynamic-fields-inline-components-guide.md +11 -8
- package/docs/dynamic-fields-inline-filter-catalog.md +12 -1
- package/fesm2022/praxisui-dynamic-fields.mjs +108 -78
- package/package.json +3 -3
- package/src/lib/components/inline-entity-lookup/pdx-inline-entity-lookup.json-api.md +3 -1
- package/types/praxisui-dynamic-fields.d.ts +3 -1
|
@@ -273,8 +273,8 @@ Esta seção formaliza o contrato único de metadata para todos os inline do `pr
|
|
|
273
273
|
| `inlinePeriodRange` | `range-slider.config.ts` | `extensão temporal genérica co-localizada` | granularidades `month`, `quarter`, `year`, `fiscal-year` | `registrado por default no runtime inline` |
|
|
274
274
|
| `inlineYearRange` | `range-slider.config.ts` | `alias compatível de inlinePeriodRange` | converte para `granularity: 'year'` | `compatível; prefira inlinePeriodRange em contratos novos` |
|
|
275
275
|
| `inlineMonthRange` | `range-slider.config.ts` | `alias compatível de inlinePeriodRange` | converte para `granularity: 'month'` | `compatível; prefira inlinePeriodRange em contratos novos` |
|
|
276
|
-
| `inlineDate` | `date.config.ts` | — | datepicker inline com auto width + `inlineOverlay` opcional
|
|
277
|
-
| `inlineDateRange` | `date-range.config.ts` | — | presets + `inlineOverlay.applyMode`
|
|
276
|
+
| `inlineDate` | `date.config.ts` | — | datepicker inline com auto width + `inlineOverlay` opcional | `registrado por default no runtime inline` |
|
|
277
|
+
| `inlineDateRange` | `date-range.config.ts` | — | presets + `inlineOverlay.applyMode` | `registrado por default no runtime inline` |
|
|
278
278
|
| `inlineTime` | `time-picker.config.ts` | — | modo `auto/list/columns`; toggle e selected icon metadata-driven | `registrado por default no runtime inline` |
|
|
279
279
|
| `inlineTimeRange` | `time-range.config.ts` | — | faixa de horário com validações | `registrado por default no runtime inline` |
|
|
280
280
|
| `inlineTreeSelect` | `tree-select.config.ts` | — | busca em árvore + seleção de nó | `registrado por default no runtime inline` |
|
|
@@ -405,12 +405,12 @@ Override opcional por metadata:
|
|
|
405
405
|
|
|
406
406
|
`inlineOverlay` é o contrato canônico para painéis inline editáveis. Ele não deve ser substituído por contratos locais como `confirm`, `commitPolicy` ou labels isolados por componente.
|
|
407
407
|
|
|
408
|
-
| Classe de interação
|
|
409
|
-
|
|
|
410
|
-
| Campo direto sem painel composto
|
|
411
|
-
| Seleção simples conclusiva
|
|
408
|
+
| Classe de interação | Componentes típicos | Modo recomendado | Regra UX |
|
|
409
|
+
| ------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
410
|
+
| Campo direto sem painel composto | `inlineInput`, `inlineNumber`, `inlineCurrency`, `inlineToggle` | Sem `inlineOverlay` | Alteração aplica imediatamente; `Cancelar`/`Aplicar` adicionaria fricção sem reduzir erro. |
|
|
411
|
+
| Seleção simples conclusiva | `inlineSelect`, `inlineSearchableSelect`, `inlineAsyncSelect`, `inlineAutocomplete`, `inlineTreeSelect`, `inlineTime` | `auto` ou sem `inlineOverlay` | Escolher uma opção aplica o filtro; `Esc` e clique externo apenas fecham o painel. |
|
|
412
412
|
| Seleção múltipla, range, presets ou painel exploratório | `inlineMultiSelect`, `inlineRange`, `inlineCurrencyRange`, `inlineRating`, `inlineDistanceRadius`, `inlineScorePriority`, `inlinePipelineStatus`, `inlineRelativePeriod`, `inlineSentiment`, `inlineColorLabel`, `inlineDate`, `inlineDateRange`, `inlineTimeRange` | `explicit` quando houver rascunho real; `auto` quando a interação for filtro rápido | Em `explicit`, alterações ficam em rascunho; `Aplicar` comita; `Cancelar`, `Esc` e fechamento externo restauram o valor confirmado anterior. |
|
|
413
|
-
| Lookup com dialog real
|
|
413
|
+
| Lookup com dialog real | `inlineEntityLookup` | Semântica de dialog | `Cancelar` fecha sem alterar a seleção confirmada; a ação primária do dialog comita e o foco retorna ao trigger. |
|
|
414
414
|
|
|
415
415
|
O vocabulário público de `inlineOverlay.applyMode` é `auto | explicit`. Componentes podem tolerar aliases legados em runtime para compatibilidade, mas documentação, exemplos e authoring visual devem emitir `explicit` para fluxos com `Aplicar`/`Cancelar`.
|
|
416
416
|
|
|
@@ -424,8 +424,11 @@ O vocabulário público de `inlineOverlay.applyMode` é `auto | explicit`. Compo
|
|
|
424
424
|
No modo percentual (`numericFormat` ou `format` com valor `percent`), mantém o mesmo layout inline e exibe sufixo `%`, preservando overrides explícitos de `min/max/step`.
|
|
425
425
|
`inlineCurrency` segue envelope adaptativo (`inlineAutoSize`) com máscara de moeda e símbolo antes/depois conforme metadata (`currencyPosition`).
|
|
426
426
|
`inlineCurrencyRange` segue envelope adaptativo (`inlineAutoSize`) no chip e popover, com escala e resumo monetário formatados. No painel, o resumo completo é a leitura principal da faixa selecionada; os valores junto ao slider são usados apenas como orientação quando não duplicam a seleção ativa. `marks` materializa até três labels compactos e ativa ticks; `semanticBands` projeta faixas de significado no trilho; `distribution/rangeDistribution/histogram` continua sendo a camada para comparação com população real. Por padrão, alterações feitas no painel ficam em rascunho até `Aplicar`; `Cancelar`, `Esc` ou fechamento externo descartam o rascunho, e `Limpar` remove o filtro explicitamente. Labels, aria, `appearance`, `colorRole` e ícones dessas ações devem vir de `inlineOverlay.actions.*` e materializar tokens do tema. Quando `inlineOverlay.applyMode: "auto"` for explicitado, o slider comita durante a interação e a ação de cancelar deixa de ser exibida.
|
|
427
|
-
`inlineEntityLookup` usa envelope adaptativo (`inlineAutoSize`) com faixa padrão maior para comportar `id + descrição`.
|
|
427
|
+
`inlineEntityLookup` usa envelope adaptativo (`inlineAutoSize`) com faixa padrão maior para comportar `id + descrição`. Quando preenchido, o trigger e as ações materializadas formam um único compound control, preservando cada botão como irmão declarativo do `mat-select` e fora do `mat-select-trigger`. O próprio combobox é o affordance padrão para trocar a seleção; `actions.showChange: true` mantém um botão separado apenas quando essa decisão tiver sido explicitamente authorada. Detalhe, busca avançada e limpar continuam governados pela metadata/capabilities existentes, sem contrato visual paralelo.
|
|
428
|
+
O segmento de ações só é materializado quando pelo menos uma ação estiver disponível. Isso evita divisória, padding e `role="group"` vazios em campos obrigatórios, readonly ou limitados por permissão. Em seleção múltipla, cada remoção opera pela identidade canônica e o label acessível vem do catálogo i18n; labels, ids e limites nunca devem ser interpolados manualmente pelo host.
|
|
429
|
+
No dialog de busca avançada, `ArrowDown` ou `Tab` move o foco da busca para o resultado ativo; sem resultados, `Tab` alcança a primeira ação habilitada. `Shift+Tab` mantém o percurso reverso, `Escape` cancela e fecha, e o foco retorna ao acionador de origem após confirmação ou cancelamento.
|
|
428
430
|
Em shells corporativos autenticados, como seletores globais de empresa, tenant ou órgão, `pdx-inline-entity-lookup` pode ser usado fora de `PraxisDynamicForm` com um `FormControl` externo e `initialMetadata` estático. Para fontes locais, informe `options`, `optionValueKey`, `optionLabelKey` e `loadOn: "open"`; o valor inicial do `FormControl` deve ser preservado sem disparar recarga remota nem reprocessamento contínuo de metadata. Hosts devem preferir uma referência estável de metadata, mas o runtime tolera recriação semântica equivalente para evitar loops de change detection em topbars.
|
|
431
|
+
Para seletores globais obrigatórios, derive `showDetail`, `showChange`, `showCopyCode` e `showClear` das capabilities e permissões governadas; não replique essa decisão em CSS ou esconda botões depois da materialização. Um campo sem ação permitida continua sendo um compound trigger íntegro, sem segmento visual vazio.
|
|
429
432
|
`inlineRange` usa envelope adaptativo de largura (`inlineAutoSize`) no chip e no popover para evitar bloco fixo largo quando usado na barra compacta. Por padrao, altera em modo `auto` para preservar filtros rápidos; com `inlineOverlay.applyMode: "explicit"`, slider, inputs e presets ficam em rascunho até `Aplicar`, enquanto `Cancelar`, `Esc` ou fechamento externo descartam o rascunho. Labels, aria, `appearance` e `colorRole` dos botoes devem vir de `inlineOverlay.actions.*` e materializar tokens do tema, nao CSS ad hoc.
|
|
430
433
|
`inlineRating` usa o mesmo contrato `inlineOverlay` para fluxos em que explorar estrelas, inputs ou presets nao deve alterar o filtro aplicado imediatamente. Em `applyMode: "explicit"`, o painel exibe `Aplicar`, `Cancelar` e `Limpar`; a escala visual acompanha o rascunho e o valor final so muda no commit.
|
|
431
434
|
`inlineDistanceRadius` usa o mesmo contrato `inlineOverlay` quando a decisao de UX exigir confirmacao: em `applyMode: "explicit"`, slider radial e presets ficam em rascunho ate `Aplicar`; `Cancelar`, `Esc` e fechamento externo descartam a alteracao. O modo default continua imediato para preservar filtros de raio rapidos.
|
|
@@ -194,7 +194,18 @@ Para hosts oficiais:
|
|
|
194
194
|
{ "name": "customerId", "controlType": "inlineEntityLookup", "resourcePath": "/customers/options" }
|
|
195
195
|
```
|
|
196
196
|
|
|
197
|
-
- UX note: sempre explicite `optionLabelKey` e `optionValueKey
|
|
197
|
+
- UX note: sempre explicite `optionLabelKey` e `optionValueKey`. Quando houver
|
|
198
|
+
seleção, valor e ações pertencem ao mesmo compound control; o próprio
|
|
199
|
+
combobox é o affordance padrão para trocar. Use `actions.showChange: true`
|
|
200
|
+
apenas quando a ação separada for intencional. O segmento de ações não é
|
|
201
|
+
renderizado se nenhuma ação estiver disponível, inclusive em filtros
|
|
202
|
+
obrigatórios, readonly ou limitados por permissão.
|
|
203
|
+
- Teclado: na busca avançada, `ArrowDown`/`Tab` entrega foco ao resultado ativo;
|
|
204
|
+
sem resultados, `Tab` segue para as ações. `Escape` fecha sem alterar a
|
|
205
|
+
seleção confirmada e o foco retorna ao acionador.
|
|
206
|
+
- Governança corporativa: seletores de empresa, tenant ou órgão devem consumir
|
|
207
|
+
capabilities/permissões para detalhe, troca, cópia e limpeza. Não esconda
|
|
208
|
+
ações governadas com CSS no host e não use label como identidade.
|
|
198
209
|
- Docs relacionadas: `dynamic-fields-inline-filter-runtime-contract`, `dynamic-filter-payload-contract`
|
|
199
210
|
|
|
200
211
|
### <span id="inline-autocomplete"></span>`inlineAutocomplete`
|