@wellingtonhlc/shared-ui 0.0.7 → 0.0.8
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
CHANGED
|
@@ -96,9 +96,9 @@ Componentes disponiveis na API publica:
|
|
|
96
96
|
|
|
97
97
|
## SearchWorkspace
|
|
98
98
|
|
|
99
|
-
`SearchWorkspace.Root` organiza telas de consulta com filtros laterais e
|
|
99
|
+
`SearchWorkspace.Root` organiza telas de consulta com filtros laterais e área de resultados.
|
|
100
100
|
|
|
101
|
-
Use `SearchFilter.Root` para manter filtros compactos, ocupando apenas o
|
|
101
|
+
Use `SearchFilter.Root` para manter filtros compactos, ocupando apenas o espaço necessário. Quando houver muitos filtros, somente o corpo do painel rola e as ações continuam visíveis.
|
|
102
102
|
|
|
103
103
|
```tsx
|
|
104
104
|
import { Button, SearchFilter, SearchWorkspace, TextField } from '@wellingtonhlc/shared-ui';
|
|
@@ -107,7 +107,7 @@ export function CustomersSearch() {
|
|
|
107
107
|
return (
|
|
108
108
|
<SearchWorkspace.Root
|
|
109
109
|
filters={
|
|
110
|
-
<SearchFilter.Root description="Refine os
|
|
110
|
+
<SearchFilter.Root description="Refine os critérios antes de consultar os resultados.">
|
|
111
111
|
<TextField label="Buscar" size="sm" />
|
|
112
112
|
<SearchFilter.Footer>
|
|
113
113
|
<Button type="submit" size="sm">
|
|
@@ -123,13 +123,13 @@ export function CustomersSearch() {
|
|
|
123
123
|
}
|
|
124
124
|
```
|
|
125
125
|
|
|
126
|
-
|
|
126
|
+
Padrões do painel:
|
|
127
127
|
|
|
128
|
-
- Usa `h-fit` e `w-fit` por
|
|
129
|
-
- Limita a altura com `maxHeightClassName`; o default
|
|
130
|
-
- Aplica rolagem apenas na
|
|
131
|
-
- Use `SearchFilter.Footer` para manter
|
|
132
|
-
- Em telas administrativas, campos internos devem preferir `size="sm"` e
|
|
128
|
+
- Usa `h-fit` e `w-fit` por padrão, sem ocupar a altura inteira da tela.
|
|
129
|
+
- Limita a altura com `maxHeightClassName`; o default é `max-h-[calc(100vh-12rem)]`.
|
|
130
|
+
- Aplica rolagem apenas na área de filtros.
|
|
131
|
+
- Use `SearchFilter.Footer` para manter botões sempre visíveis no rodapé do painel.
|
|
132
|
+
- Em telas administrativas, campos internos devem preferir `size="sm"` e não devem usar formato `rounded-full`.
|
|
133
133
|
|
|
134
134
|
## Padroes de implementacao
|
|
135
135
|
|
package/dist/components/Page.js
CHANGED
|
@@ -38,12 +38,12 @@ function Root({ actions, children, className, ...props }) {
|
|
|
38
38
|
};
|
|
39
39
|
}, [actions, setPageActions]);
|
|
40
40
|
if (setPageActions) {
|
|
41
|
-
return (_jsx("section", { className: cn('min-w-0', className), ...props, children: children }));
|
|
41
|
+
return (_jsx("section", { className: cn('flex h-full min-h-0 w-full min-w-0 flex-col overflow-hidden', className), ...props, children: children }));
|
|
42
42
|
}
|
|
43
43
|
if (hasHorizontalActions) {
|
|
44
|
-
return (_jsx("section", { className: cn('min-w-0', className), ...props, children: _jsxs("div", { className: "flex min-w-0 gap-3", children: [leftActions, _jsx("div", { className: "min-w-0 flex-1", children: children }), rightActions] }) }));
|
|
44
|
+
return (_jsx("section", { className: cn('flex h-full min-h-0 w-full min-w-0 flex-col overflow-hidden', className), ...props, children: _jsxs("div", { className: "flex h-full min-h-0 w-full min-w-0 gap-3", children: [leftActions, _jsx("div", { className: "flex min-h-0 min-w-0 flex-1 flex-col overflow-hidden", children: children }), rightActions] }) }));
|
|
45
45
|
}
|
|
46
|
-
return (_jsxs("section", { className: cn('min-w-0', className), ...props, children: [topActions, children, bottomActions] }));
|
|
46
|
+
return (_jsxs("section", { className: cn('flex h-full min-h-0 w-full min-w-0 flex-col overflow-hidden', className), ...props, children: [topActions, children, bottomActions] }));
|
|
47
47
|
}
|
|
48
48
|
function ActionsProvider({ children }) {
|
|
49
49
|
const [actions, setActions] = useState(null);
|
|
@@ -11,7 +11,7 @@ function SearchWorkspaceRoot({ filters, children, className }) {
|
|
|
11
11
|
function SearchFilterFooter({ children, className }) {
|
|
12
12
|
return _jsx("div", { className: cn('border-app-border shrink-0 border-t pt-3', className), children: children });
|
|
13
13
|
}
|
|
14
|
-
function SearchFilterRoot({ title = 'Filtros', description = 'Refine os
|
|
14
|
+
function SearchFilterRoot({ title = 'Filtros', description = 'Refine os critérios antes de consultar os resultados.', children, className, bodyClassName, contentClassName, maxHeightClassName = 'max-h-[calc(100vh-12rem)]', }) {
|
|
15
15
|
const childrenArray = Children.toArray(children);
|
|
16
16
|
const footerChildren = childrenArray.filter(child => isValidElement(child) && child.type === SearchFilterFooter);
|
|
17
17
|
const contentChildren = childrenArray.filter(child => !(isValidElement(child) && child.type === SearchFilterFooter));
|
package/package.json
CHANGED