karsten-design-system 1.2.46 → 1.2.48
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 +207 -207
- package/dist/index.js +61 -72
- package/dist/index.js.map +1 -1
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1,207 +1,207 @@
|
|
|
1
|
-
# Karsten Design System
|
|
2
|
-
|
|
3
|
-
Uma biblioteca de componentes React estilizados para projetos da Karsten, construída sobre o PrimeReact.
|
|
4
|
-
|
|
5
|
-
## Instalação
|
|
6
|
-
|
|
7
|
-
Com npm:
|
|
8
|
-
|
|
9
|
-
```bash
|
|
10
|
-
npm install karsten-design-system
|
|
11
|
-
```
|
|
12
|
-
|
|
13
|
-
Com yarn:
|
|
14
|
-
|
|
15
|
-
```bash
|
|
16
|
-
yarn add karsten-design-system
|
|
17
|
-
```
|
|
18
|
-
|
|
19
|
-
## Configuração do PrimeReact
|
|
20
|
-
|
|
21
|
-
No main.tsx adicione:
|
|
22
|
-
|
|
23
|
-
```js
|
|
24
|
-
import { StrictMode } from "react";
|
|
25
|
-
import { createRoot } from "react-dom/client";
|
|
26
|
-
import "./index.css";
|
|
27
|
-
import App from "./App.tsx";
|
|
28
|
-
|
|
29
|
-
import { PrimeReactProvider } from 'primereact/api'; // Adicione o PrimeReactProvider
|
|
30
|
-
import Tailwind from 'primereact/passthrough/tailwind'; // Importe o Tailwind
|
|
31
|
-
import './index.css';
|
|
32
|
-
|
|
33
|
-
createRoot(document.getElementById("root")!).render(
|
|
34
|
-
<StrictMode>
|
|
35
|
-
<PrimeReactProvider value={{ pt: Tailwind }}> {/* Envolva o app no Provider do PrimeReact */}
|
|
36
|
-
<App />
|
|
37
|
-
</PrimeReactProvider>
|
|
38
|
-
</StrictMode>
|
|
39
|
-
);
|
|
40
|
-
```
|
|
41
|
-
|
|
42
|
-
## Pré-requisitos
|
|
43
|
-
|
|
44
|
-
Esta biblioteca requer as seguintes dependências:
|
|
45
|
-
|
|
46
|
-
- React 18 ou superior
|
|
47
|
-
- React DOM 18 ou superior
|
|
48
|
-
- React Router DOM 7 ou superior
|
|
49
|
-
- Tailwind 3.4.0 ou superior
|
|
50
|
-
- @types/date-fns 2 ou superior
|
|
51
|
-
- Chart.js 4 ou superior
|
|
52
|
-
- clsx 2 ou superior
|
|
53
|
-
- date-fns 1 ou superior
|
|
54
|
-
- Primeicons 7 ou superior
|
|
55
|
-
- Primereact 10 ou superior
|
|
56
|
-
- Postcss 8 ou superior
|
|
57
|
-
- Autoprefixer 10 ou superior
|
|
58
|
-
|
|
59
|
-
## Como usar
|
|
60
|
-
|
|
61
|
-
1. Importe o componente desejado da biblioteca:
|
|
62
|
-
|
|
63
|
-
```jsx
|
|
64
|
-
import { Button } from 'karsten-design-system'
|
|
65
|
-
```
|
|
66
|
-
|
|
67
|
-
2. Use o componente em seu projeto:
|
|
68
|
-
|
|
69
|
-
```jsx
|
|
70
|
-
function App() {
|
|
71
|
-
return <Button label="Clique aqui" />
|
|
72
|
-
}
|
|
73
|
-
```
|
|
74
|
-
|
|
75
|
-
## Componentes Disponíveis
|
|
76
|
-
|
|
77
|
-
- `Accordion` - Componente para exibir conteúdo em seções expansíveis e colapsáveis.
|
|
78
|
-
- `AutoComplete` - Campo de entrada com sugestões automáticas baseadas no texto digitado.
|
|
79
|
-
- `Breadcrumb` - Navegação hierárquica para indicar a localização atual do usuário.
|
|
80
|
-
- `Button` - Botão estilizado com variantes primária e secundária.
|
|
81
|
-
- `Card` - Contêiner estilizado para exibir informações agrupadas.
|
|
82
|
-
- `Chart` - Gráficos para visualização de dados em diferentes formatos.
|
|
83
|
-
- `DateInput` - Campo de entrada para seleção de datas.
|
|
84
|
-
- `Dialog` - Modal para exibição de mensagens ou ações secundárias.
|
|
85
|
-
- `Divider` - Linha divisória para separação visual de conteúdo.
|
|
86
|
-
- `Header` - Cabeçalho estilizado para títulos ou menus.
|
|
87
|
-
- `IconButton` - Botão com ícone, ideal para ações rápidas.
|
|
88
|
-
- `InfoCard` - Cartão informativo para exibir alertas ou dados destacados.
|
|
89
|
-
- `Input` - Campo de entrada para texto.
|
|
90
|
-
- `InternalMenu` - Menu de navegação interna, útil para dashboards.
|
|
91
|
-
- `Link` - Link estilizado para navegação.
|
|
92
|
-
- `MegaMenu` - Menu expandido com múltiplas opções organizadas.
|
|
93
|
-
- `Notification` - Notificação para exibir alertas e mensagens.
|
|
94
|
-
- `Paginator` - Paginação para navegação em listas ou tabelas.
|
|
95
|
-
- `RadioButton` - Botões de seleção única dentro de um grupo.
|
|
96
|
-
- `Select` - Componente para seleção de opções em um menu suspenso.
|
|
97
|
-
- `Sidebar` - Barra lateral para navegação ou exibição de conteúdo adicional.
|
|
98
|
-
- `Skeleton` - Elementos de carregamento em estilo esqueleto.
|
|
99
|
-
- `Spinner` - Indicador de carregamento animado.
|
|
100
|
-
- `Table` - Tabela para exibição de dados estruturados.
|
|
101
|
-
- `Toast` - Mensagens temporárias exibidas no canto da tela.
|
|
102
|
-
|
|
103
|
-
## Desenvolvimento
|
|
104
|
-
|
|
105
|
-
Para contribuir com o projeto:
|
|
106
|
-
|
|
107
|
-
1. Clone o repositório:
|
|
108
|
-
|
|
109
|
-
```bash
|
|
110
|
-
git clone https://github.com/KarstenSA/karsten-design-system.git
|
|
111
|
-
```
|
|
112
|
-
|
|
113
|
-
2. Instale as dependências:
|
|
114
|
-
|
|
115
|
-
Com npm:
|
|
116
|
-
|
|
117
|
-
```bash
|
|
118
|
-
npm install
|
|
119
|
-
```
|
|
120
|
-
|
|
121
|
-
Com yarn:
|
|
122
|
-
|
|
123
|
-
```bash
|
|
124
|
-
yarn
|
|
125
|
-
```
|
|
126
|
-
|
|
127
|
-
3. Execute o Storybook para desenvolvimento:
|
|
128
|
-
|
|
129
|
-
Com npm:
|
|
130
|
-
|
|
131
|
-
```bash
|
|
132
|
-
npm run storybook
|
|
133
|
-
```
|
|
134
|
-
|
|
135
|
-
Com yarn:
|
|
136
|
-
|
|
137
|
-
```bash
|
|
138
|
-
yarn storybook
|
|
139
|
-
```
|
|
140
|
-
|
|
141
|
-
## Scripts Disponíveis
|
|
142
|
-
|
|
143
|
-
Com npm:
|
|
144
|
-
|
|
145
|
-
- `npm run storybook` - Inicia o ambiente de desenvolvimento do Storybook
|
|
146
|
-
- `npm run build-storybook` - Gera o build da biblioteca para hospedagem
|
|
147
|
-
- `npm run build` - Gera o build da biblioteca para publicação no npm
|
|
148
|
-
|
|
149
|
-
Com yarn:
|
|
150
|
-
|
|
151
|
-
- `yarn storybook` - Inicia o ambiente de desenvolvimento do Storybook
|
|
152
|
-
- `yarn build-storybook` - Gera o build do Storybook para hospedagem
|
|
153
|
-
- `yarn build` - Gera o build da biblioteca para publicação no npm
|
|
154
|
-
|
|
155
|
-
## Publicando uma Nova Versão no NPM
|
|
156
|
-
|
|
157
|
-
1. Atualizar a Versão
|
|
158
|
-
|
|
159
|
-
Antes de publicar, aumente a versão no `package.json` e `package-lock.json`.
|
|
160
|
-
|
|
161
|
-
2. Fazer o Build
|
|
162
|
-
|
|
163
|
-
Com npm:
|
|
164
|
-
|
|
165
|
-
```bash
|
|
166
|
-
npm run build
|
|
167
|
-
```
|
|
168
|
-
|
|
169
|
-
Com yarn:
|
|
170
|
-
|
|
171
|
-
```bash
|
|
172
|
-
yarn build
|
|
173
|
-
```
|
|
174
|
-
|
|
175
|
-
3. Login no NPM
|
|
176
|
-
|
|
177
|
-
Se ainda não estiver autenticado, faça login:
|
|
178
|
-
|
|
179
|
-
```bash
|
|
180
|
-
npm login
|
|
181
|
-
```
|
|
182
|
-
|
|
183
|
-
4. Publicar
|
|
184
|
-
|
|
185
|
-
```bash
|
|
186
|
-
npm publish --access public
|
|
187
|
-
```
|
|
188
|
-
|
|
189
|
-
## Resolução de Problemas
|
|
190
|
-
|
|
191
|
-
Se você encontrar o erro "peer dependencies missing", instale as dependências necessárias:
|
|
192
|
-
|
|
193
|
-
Com npm:
|
|
194
|
-
|
|
195
|
-
```bash
|
|
196
|
-
npm install react@^18 react-dom@^18 tailwindcss@^3.4.0 @types/date-fns@^2 chart.js@^4 clsx@^2 date-fns@^1 primeicons@^7 primereact@^10 postcss@^8 autoprefixer@^10
|
|
197
|
-
```
|
|
198
|
-
|
|
199
|
-
Com yarn:
|
|
200
|
-
|
|
201
|
-
```bash
|
|
202
|
-
yarn add react@^18 react-dom@^18 tailwindcss@^3.4.0 @types/date-fns@^2 chart.js@^4 clsx@^2 date-fns@^1 primeicons@^7 primereact@^10 postcss@^8 autoprefixer@^10
|
|
203
|
-
```
|
|
204
|
-
|
|
205
|
-
## Licença
|
|
206
|
-
|
|
207
|
-
Este projeto está licenciado sob a licença MIT.
|
|
1
|
+
# Karsten Design System
|
|
2
|
+
|
|
3
|
+
Uma biblioteca de componentes React estilizados para projetos da Karsten, construída sobre o PrimeReact.
|
|
4
|
+
|
|
5
|
+
## Instalação
|
|
6
|
+
|
|
7
|
+
Com npm:
|
|
8
|
+
|
|
9
|
+
```bash
|
|
10
|
+
npm install karsten-design-system
|
|
11
|
+
```
|
|
12
|
+
|
|
13
|
+
Com yarn:
|
|
14
|
+
|
|
15
|
+
```bash
|
|
16
|
+
yarn add karsten-design-system
|
|
17
|
+
```
|
|
18
|
+
|
|
19
|
+
## Configuração do PrimeReact
|
|
20
|
+
|
|
21
|
+
No main.tsx adicione:
|
|
22
|
+
|
|
23
|
+
```js
|
|
24
|
+
import { StrictMode } from "react";
|
|
25
|
+
import { createRoot } from "react-dom/client";
|
|
26
|
+
import "./index.css";
|
|
27
|
+
import App from "./App.tsx";
|
|
28
|
+
|
|
29
|
+
import { PrimeReactProvider } from 'primereact/api'; // Adicione o PrimeReactProvider
|
|
30
|
+
import Tailwind from 'primereact/passthrough/tailwind'; // Importe o Tailwind
|
|
31
|
+
import './index.css';
|
|
32
|
+
|
|
33
|
+
createRoot(document.getElementById("root")!).render(
|
|
34
|
+
<StrictMode>
|
|
35
|
+
<PrimeReactProvider value={{ pt: Tailwind }}> {/* Envolva o app no Provider do PrimeReact */}
|
|
36
|
+
<App />
|
|
37
|
+
</PrimeReactProvider>
|
|
38
|
+
</StrictMode>
|
|
39
|
+
);
|
|
40
|
+
```
|
|
41
|
+
|
|
42
|
+
## Pré-requisitos
|
|
43
|
+
|
|
44
|
+
Esta biblioteca requer as seguintes dependências:
|
|
45
|
+
|
|
46
|
+
- React 18 ou superior
|
|
47
|
+
- React DOM 18 ou superior
|
|
48
|
+
- React Router DOM 7 ou superior
|
|
49
|
+
- Tailwind 3.4.0 ou superior
|
|
50
|
+
- @types/date-fns 2 ou superior
|
|
51
|
+
- Chart.js 4 ou superior
|
|
52
|
+
- clsx 2 ou superior
|
|
53
|
+
- date-fns 1 ou superior
|
|
54
|
+
- Primeicons 7 ou superior
|
|
55
|
+
- Primereact 10 ou superior
|
|
56
|
+
- Postcss 8 ou superior
|
|
57
|
+
- Autoprefixer 10 ou superior
|
|
58
|
+
|
|
59
|
+
## Como usar
|
|
60
|
+
|
|
61
|
+
1. Importe o componente desejado da biblioteca:
|
|
62
|
+
|
|
63
|
+
```jsx
|
|
64
|
+
import { Button } from 'karsten-design-system'
|
|
65
|
+
```
|
|
66
|
+
|
|
67
|
+
2. Use o componente em seu projeto:
|
|
68
|
+
|
|
69
|
+
```jsx
|
|
70
|
+
function App() {
|
|
71
|
+
return <Button label="Clique aqui" />
|
|
72
|
+
}
|
|
73
|
+
```
|
|
74
|
+
|
|
75
|
+
## Componentes Disponíveis
|
|
76
|
+
|
|
77
|
+
- `Accordion` - Componente para exibir conteúdo em seções expansíveis e colapsáveis.
|
|
78
|
+
- `AutoComplete` - Campo de entrada com sugestões automáticas baseadas no texto digitado.
|
|
79
|
+
- `Breadcrumb` - Navegação hierárquica para indicar a localização atual do usuário.
|
|
80
|
+
- `Button` - Botão estilizado com variantes primária e secundária.
|
|
81
|
+
- `Card` - Contêiner estilizado para exibir informações agrupadas.
|
|
82
|
+
- `Chart` - Gráficos para visualização de dados em diferentes formatos.
|
|
83
|
+
- `DateInput` - Campo de entrada para seleção de datas.
|
|
84
|
+
- `Dialog` - Modal para exibição de mensagens ou ações secundárias.
|
|
85
|
+
- `Divider` - Linha divisória para separação visual de conteúdo.
|
|
86
|
+
- `Header` - Cabeçalho estilizado para títulos ou menus.
|
|
87
|
+
- `IconButton` - Botão com ícone, ideal para ações rápidas.
|
|
88
|
+
- `InfoCard` - Cartão informativo para exibir alertas ou dados destacados.
|
|
89
|
+
- `Input` - Campo de entrada para texto.
|
|
90
|
+
- `InternalMenu` - Menu de navegação interna, útil para dashboards.
|
|
91
|
+
- `Link` - Link estilizado para navegação.
|
|
92
|
+
- `MegaMenu` - Menu expandido com múltiplas opções organizadas.
|
|
93
|
+
- `Notification` - Notificação para exibir alertas e mensagens.
|
|
94
|
+
- `Paginator` - Paginação para navegação em listas ou tabelas.
|
|
95
|
+
- `RadioButton` - Botões de seleção única dentro de um grupo.
|
|
96
|
+
- `Select` - Componente para seleção de opções em um menu suspenso.
|
|
97
|
+
- `Sidebar` - Barra lateral para navegação ou exibição de conteúdo adicional.
|
|
98
|
+
- `Skeleton` - Elementos de carregamento em estilo esqueleto.
|
|
99
|
+
- `Spinner` - Indicador de carregamento animado.
|
|
100
|
+
- `Table` - Tabela para exibição de dados estruturados.
|
|
101
|
+
- `Toast` - Mensagens temporárias exibidas no canto da tela.
|
|
102
|
+
|
|
103
|
+
## Desenvolvimento
|
|
104
|
+
|
|
105
|
+
Para contribuir com o projeto:
|
|
106
|
+
|
|
107
|
+
1. Clone o repositório:
|
|
108
|
+
|
|
109
|
+
```bash
|
|
110
|
+
git clone https://github.com/KarstenSA/karsten-design-system.git
|
|
111
|
+
```
|
|
112
|
+
|
|
113
|
+
2. Instale as dependências:
|
|
114
|
+
|
|
115
|
+
Com npm:
|
|
116
|
+
|
|
117
|
+
```bash
|
|
118
|
+
npm install
|
|
119
|
+
```
|
|
120
|
+
|
|
121
|
+
Com yarn:
|
|
122
|
+
|
|
123
|
+
```bash
|
|
124
|
+
yarn
|
|
125
|
+
```
|
|
126
|
+
|
|
127
|
+
3. Execute o Storybook para desenvolvimento:
|
|
128
|
+
|
|
129
|
+
Com npm:
|
|
130
|
+
|
|
131
|
+
```bash
|
|
132
|
+
npm run storybook
|
|
133
|
+
```
|
|
134
|
+
|
|
135
|
+
Com yarn:
|
|
136
|
+
|
|
137
|
+
```bash
|
|
138
|
+
yarn storybook
|
|
139
|
+
```
|
|
140
|
+
|
|
141
|
+
## Scripts Disponíveis
|
|
142
|
+
|
|
143
|
+
Com npm:
|
|
144
|
+
|
|
145
|
+
- `npm run storybook` - Inicia o ambiente de desenvolvimento do Storybook
|
|
146
|
+
- `npm run build-storybook` - Gera o build da biblioteca para hospedagem
|
|
147
|
+
- `npm run build` - Gera o build da biblioteca para publicação no npm
|
|
148
|
+
|
|
149
|
+
Com yarn:
|
|
150
|
+
|
|
151
|
+
- `yarn storybook` - Inicia o ambiente de desenvolvimento do Storybook
|
|
152
|
+
- `yarn build-storybook` - Gera o build do Storybook para hospedagem
|
|
153
|
+
- `yarn build` - Gera o build da biblioteca para publicação no npm
|
|
154
|
+
|
|
155
|
+
## Publicando uma Nova Versão no NPM
|
|
156
|
+
|
|
157
|
+
1. Atualizar a Versão
|
|
158
|
+
|
|
159
|
+
Antes de publicar, aumente a versão no `package.json` e `package-lock.json`.
|
|
160
|
+
|
|
161
|
+
2. Fazer o Build
|
|
162
|
+
|
|
163
|
+
Com npm:
|
|
164
|
+
|
|
165
|
+
```bash
|
|
166
|
+
npm run build
|
|
167
|
+
```
|
|
168
|
+
|
|
169
|
+
Com yarn:
|
|
170
|
+
|
|
171
|
+
```bash
|
|
172
|
+
yarn build
|
|
173
|
+
```
|
|
174
|
+
|
|
175
|
+
3. Login no NPM
|
|
176
|
+
|
|
177
|
+
Se ainda não estiver autenticado, faça login:
|
|
178
|
+
|
|
179
|
+
```bash
|
|
180
|
+
npm login
|
|
181
|
+
```
|
|
182
|
+
|
|
183
|
+
4. Publicar
|
|
184
|
+
|
|
185
|
+
```bash
|
|
186
|
+
npm publish --access public
|
|
187
|
+
```
|
|
188
|
+
|
|
189
|
+
## Resolução de Problemas
|
|
190
|
+
|
|
191
|
+
Se você encontrar o erro "peer dependencies missing", instale as dependências necessárias:
|
|
192
|
+
|
|
193
|
+
Com npm:
|
|
194
|
+
|
|
195
|
+
```bash
|
|
196
|
+
npm install react@^18 react-dom@^18 tailwindcss@^3.4.0 @types/date-fns@^2 chart.js@^4 clsx@^2 date-fns@^1 primeicons@^7 primereact@^10 postcss@^8 autoprefixer@^10
|
|
197
|
+
```
|
|
198
|
+
|
|
199
|
+
Com yarn:
|
|
200
|
+
|
|
201
|
+
```bash
|
|
202
|
+
yarn add react@^18 react-dom@^18 tailwindcss@^3.4.0 @types/date-fns@^2 chart.js@^4 clsx@^2 date-fns@^1 primeicons@^7 primereact@^10 postcss@^8 autoprefixer@^10
|
|
203
|
+
```
|
|
204
|
+
|
|
205
|
+
## Licença
|
|
206
|
+
|
|
207
|
+
Este projeto está licenciado sob a licença MIT.
|
package/dist/index.js
CHANGED
|
@@ -205,14 +205,14 @@ function Card({ children, className, ariaLabel = 'Card de informação', }) {
|
|
|
205
205
|
}
|
|
206
206
|
|
|
207
207
|
function CardButton({ label, description, onClick }) {
|
|
208
|
-
return (jsxs("div", { className: "cursor-pointer rounded-2xl p-4 h-[160px] w-full bg-gradient-to-br hover:shadow-md transition-shadow duration-200 border from-[#f3f4f6] to-light-500 border-[#f3f4f6]\n dark:from-dark-400 dark:to-dark-100 dark:border-dark-400 dark:bg-dark-100 dark:shadow-dark-400", onClick: () => {
|
|
208
|
+
return (jsxs("div", { className: "cursor-pointer rounded-2xl p-4 h-[160px] w-full bg-gradient-to-br hover:shadow-md transition-shadow duration-200 border from-[#f3f4f6] to-light-500 border-[#f3f4f6]\r\n dark:from-dark-400 dark:to-dark-100 dark:border-dark-400 dark:bg-dark-100 dark:shadow-dark-400", onClick: () => {
|
|
209
209
|
if (onClick)
|
|
210
210
|
onClick();
|
|
211
211
|
}, children: [jsx("h3", { className: "text-lg font-bold text-primary dark:text-light-500", children: label }), description && (jsx("p", { className: "text-sm mt-2 line-clamp-3 text-primary dark:text-light-500", children: description }))] }));
|
|
212
212
|
}
|
|
213
213
|
|
|
214
214
|
function CardIconsButton({ label, leftIcon, onClick, }) {
|
|
215
|
-
return (jsxs("div", { className: "cursor-pointer rounded-xl p-4 w-full min-h-[60px] bg-gradient-to-br hover:shadow-md transition-shadow duration-200 border flex items-center justify-between gap-4 from-[#f3f4f6] to-light-500 border-[#f3f4f6]\n dark:from-dark-400 dark:to-dark-100 dark:border-dark-400 dark:bg-dark-100 dark:shadow-dark-400", onClick: () => {
|
|
215
|
+
return (jsxs("div", { className: "cursor-pointer rounded-xl p-4 w-full min-h-[60px] bg-gradient-to-br hover:shadow-md transition-shadow duration-200 border flex items-center justify-between gap-4 from-[#f3f4f6] to-light-500 border-[#f3f4f6]\r\n dark:from-dark-400 dark:to-dark-100 dark:border-dark-400 dark:bg-dark-100 dark:shadow-dark-400", onClick: () => {
|
|
216
216
|
if (onClick)
|
|
217
217
|
onClick();
|
|
218
218
|
}, "aria-label": `Botão de navegação para ${label}`, children: [jsxs("div", { className: "flex items-center gap-3 flex-grow overflow-hidden", children: [leftIcon && (jsx("div", { className: "text-xl flex-shrink-0 flex items-center dark:text-light-500 text-primary", children: leftIcon })), jsx("h3", { className: "text-base font-semibold break-words dark:text-light-500 text-primary", children: label })] }), jsx("div", { className: "flex items-center justify-center h-full", children: jsx("i", { className: "pi pi-angle-right text-xl flex-shrink-0 dark:text-light-500 text-primary" }) })] }));
|
|
@@ -4535,18 +4535,11 @@ function Table({ columns, data, totalRecords, actions = [], isOrdered = true, ac
|
|
|
4535
4535
|
if (openFilter && filterButtonRefs.current[openFilter]) {
|
|
4536
4536
|
const button = filterButtonRefs.current[openFilter];
|
|
4537
4537
|
if (button) {
|
|
4538
|
-
const rect = button.getBoundingClientRect();
|
|
4539
4538
|
const modalHeight = 150;
|
|
4540
|
-
const spaceBelow = window.innerHeight -
|
|
4541
|
-
const spaceAbove =
|
|
4539
|
+
const spaceBelow = window.innerHeight - button.getBoundingClientRect().bottom;
|
|
4540
|
+
const spaceAbove = button.getBoundingClientRect().top;
|
|
4542
4541
|
const openAbove = spaceBelow < modalHeight && spaceAbove > modalHeight;
|
|
4543
|
-
setFilterModalPosition({
|
|
4544
|
-
top: openAbove
|
|
4545
|
-
? rect.top + window.scrollY - modalHeight
|
|
4546
|
-
: rect.bottom + window.scrollY,
|
|
4547
|
-
left: rect.left + window.scrollX,
|
|
4548
|
-
openAbove,
|
|
4549
|
-
});
|
|
4542
|
+
setFilterModalPosition({ openAbove });
|
|
4550
4543
|
}
|
|
4551
4544
|
}
|
|
4552
4545
|
else {
|
|
@@ -4581,68 +4574,64 @@ function Table({ columns, data, totalRecords, actions = [], isOrdered = true, ac
|
|
|
4581
4574
|
onFilterChange(newFilters);
|
|
4582
4575
|
}
|
|
4583
4576
|
};
|
|
4584
|
-
return (jsxs("div", { children: [jsxs("table", { className: "w-full", children: [jsx("thead", { children: jsxs("tr", { className: "bg-gray-100 dark:bg-dark-100", children: [columns.map((column) => (jsxs("th", { scope: "col", className: "bg-primary first:rounded-ss-lg font-bold text-light-500 text-sm uppercase p-3 text-left", children: [jsx("div", { children: openFilter === column.dataIndex &&
|
|
4585
|
-
|
|
4586
|
-
|
|
4587
|
-
|
|
4588
|
-
|
|
4589
|
-
|
|
4590
|
-
|
|
4591
|
-
|
|
4592
|
-
|
|
4593
|
-
|
|
4594
|
-
|
|
4595
|
-
|
|
4596
|
-
|
|
4597
|
-
|
|
4598
|
-
|
|
4599
|
-
|
|
4600
|
-
|
|
4601
|
-
|
|
4602
|
-
|
|
4603
|
-
|
|
4604
|
-
|
|
4577
|
+
return (jsxs("div", { children: [jsxs("table", { className: "w-full", children: [jsx("thead", { children: jsxs("tr", { className: "bg-gray-100 dark:bg-dark-100", children: [columns.map((column) => (jsxs("th", { scope: "col", className: "bg-primary first:rounded-ss-lg font-bold text-light-500 text-sm uppercase p-3 text-left relative", children: [jsx("div", { children: openFilter === column.dataIndex && filterModalPosition && (jsxs("div", { ref: filterModalRef, style: {
|
|
4578
|
+
position: 'absolute',
|
|
4579
|
+
top: filterModalPosition.openAbove ? 'auto' : '100%',
|
|
4580
|
+
bottom: filterModalPosition.openAbove ? '100%' : 'auto',
|
|
4581
|
+
left: 0,
|
|
4582
|
+
zIndex: 20,
|
|
4583
|
+
width: 276,
|
|
4584
|
+
borderRadius: 8,
|
|
4585
|
+
boxShadow: '0 2px 8px rgba(0,0,0,0.15)',
|
|
4586
|
+
border: '1px solid var(--tw-border-light-500, #e5e7eb)',
|
|
4587
|
+
color: 'var(--tw-text-primary, #222)',
|
|
4588
|
+
padding: 16,
|
|
4589
|
+
}, className: "normal-case bg-light-500 dark:bg-dark-100 dark:text-light-500", children: [jsxs("div", { className: "space-y-4 text-primary dark:text-light-500", children: [jsxs("h1", { className: "text-primary text-sm dark:text-light-500", children: ["Filtrar por ", column?.label?.toLowerCase()] }), jsxs("div", { className: "w-full", children: [column.filterType === 'text' && (jsx(Input, { placeholder: "Digite para filtrar", value: filters[column.dataIndex] || '', onChange: (e) => setFilters((prev) => ({
|
|
4590
|
+
...prev,
|
|
4591
|
+
[column.dataIndex]: e,
|
|
4592
|
+
})), mask: column?.mask, "aria-label": `Filtrar por ${column.label}`, maxLength: column?.maxLength || 40 })), column.filterType === 'select' && (jsx(Select, { options: column.filterOptions || [], value: column.filterOptions?.find((option) => option.value ===
|
|
4593
|
+
filters[column.dataIndex]) || null, onChange: (selected) => setFilters((prev) => ({
|
|
4594
|
+
...prev,
|
|
4595
|
+
[column.dataIndex]: selected?.value ?? null,
|
|
4596
|
+
})), placeholder: "Selecione uma op\u00E7\u00E3o", label: "", "aria-label": `Filtrar por ${column.label}`, isReadOnly: !column.isSearchableInSelectMode })), column.filterType === 'multiSelect' && (jsx(MultiSelect, { options: column.filterOptions || [], value: (filters[column.dataIndex]
|
|
4597
|
+
? JSON.parse(filters[column.dataIndex])
|
|
4598
|
+
: []), onChange: (selected) => setFilters((prev) => ({
|
|
4599
|
+
...prev,
|
|
4600
|
+
[column.dataIndex]: selected
|
|
4601
|
+
? JSON.stringify(selected)
|
|
4602
|
+
: '',
|
|
4603
|
+
})), placeholder: "Selecione uma ou mais op\u00E7\u00F5es", label: "", "aria-label": `Filtrar por ${column.label}` })), column.filterType === 'singleDate' && (jsx(CalendarInput, { label: "", selectionMode: "single", placeholder: "Selecione uma data", value: filters[column.dataIndex]
|
|
4604
|
+
? new Date(filters[column.dataIndex])
|
|
4605
|
+
: null, onChange: (e) => {
|
|
4606
|
+
const value = e?.value;
|
|
4607
|
+
setFilters((prev) => ({
|
|
4605
4608
|
...prev,
|
|
4606
|
-
[column.dataIndex]:
|
|
4607
|
-
|
|
4608
|
-
|
|
4609
|
-
|
|
4609
|
+
[column.dataIndex]: value instanceof Date
|
|
4610
|
+
? value.toISOString()
|
|
4611
|
+
: '',
|
|
4612
|
+
}));
|
|
4613
|
+
}, ariaLabel: `Filtrar por ${column.label}`, showTime: column.isShowTimeInDateMode ? true : false })), column.filterType === 'rangeDate' && (jsx(CalendarInput, { label: "", selectionMode: "range", placeholder: "Selecione as datas", value: filters[column.dataIndex]
|
|
4614
|
+
? parseDateRange(filters[column.dataIndex])
|
|
4615
|
+
: null, onChange: (e) => {
|
|
4616
|
+
const range = e?.value;
|
|
4617
|
+
setFilters((prev) => ({
|
|
4610
4618
|
...prev,
|
|
4611
|
-
[column.dataIndex]:
|
|
4612
|
-
? JSON.stringify(
|
|
4619
|
+
[column.dataIndex]: range
|
|
4620
|
+
? JSON.stringify(range)
|
|
4613
4621
|
: '',
|
|
4614
|
-
}))
|
|
4615
|
-
|
|
4616
|
-
|
|
4617
|
-
|
|
4618
|
-
|
|
4619
|
-
|
|
4620
|
-
|
|
4621
|
-
|
|
4622
|
-
|
|
4623
|
-
|
|
4624
|
-
|
|
4625
|
-
|
|
4626
|
-
|
|
4627
|
-
const range = e?.value;
|
|
4628
|
-
setFilters((prev) => ({
|
|
4629
|
-
...prev,
|
|
4630
|
-
[column.dataIndex]: range
|
|
4631
|
-
? JSON.stringify(range)
|
|
4632
|
-
: '',
|
|
4633
|
-
}));
|
|
4634
|
-
}, ariaLabel: `Filtrar por ${column.label}`, minDate: column?.minDate
|
|
4635
|
-
? new Date(column?.minDate)
|
|
4636
|
-
: undefined, maxDate: column?.maxDate
|
|
4637
|
-
? new Date(column?.maxDate)
|
|
4638
|
-
: undefined, showTime: column.isShowTimeInDateMode ? true : false }))] })] }), jsxs("div", { className: "flex justify-between mt-4", children: [jsx(Button, { variant: "outline", onClick: () => {
|
|
4639
|
-
setFilters((prev) => ({
|
|
4640
|
-
...prev,
|
|
4641
|
-
[column.dataIndex]: '',
|
|
4642
|
-
}));
|
|
4643
|
-
setOpenFilter(null);
|
|
4644
|
-
setFilterModalPosition(null);
|
|
4645
|
-
}, label: "Fechar", width: "10", size: "small", "aria-label": "Fechar filtro" }), jsx(Button, { variant: "secondary", onClick: () => handleClearFilter(column), label: "Limpar", width: "10", size: "small", "aria-label": "Limpar filtro" }), jsx(Button, { variant: "primary", onClick: () => handleFilter(column), label: "Aplicar", width: "10", size: "small", "aria-label": "Aplicar filtro" })] })] }), document.body) }), jsxs("div", { className: "flex flex-col items-start", children: [column.label, isOrdered && (jsxs("div", { className: "flex flex-row", children: [jsx("button", { onClick: () => handleSort(column.dataIndex), "aria-label": `Ordenar por ${column.label}`, children: jsx("i", { className: clsx('text-xs cursor-pointer pi', sortDirection[column.dataIndex] === 'ASC' &&
|
|
4622
|
+
}));
|
|
4623
|
+
}, ariaLabel: `Filtrar por ${column.label}`, minDate: column?.minDate
|
|
4624
|
+
? new Date(column?.minDate)
|
|
4625
|
+
: undefined, maxDate: column?.maxDate
|
|
4626
|
+
? new Date(column?.maxDate)
|
|
4627
|
+
: undefined, showTime: column.isShowTimeInDateMode ? true : false }))] })] }), jsxs("div", { className: "flex justify-between mt-4", children: [jsx(Button, { variant: "outline", onClick: () => {
|
|
4628
|
+
setFilters((prev) => ({
|
|
4629
|
+
...prev,
|
|
4630
|
+
[column.dataIndex]: '',
|
|
4631
|
+
}));
|
|
4632
|
+
setOpenFilter(null);
|
|
4633
|
+
setFilterModalPosition(null);
|
|
4634
|
+
}, label: "Fechar", width: "10", size: "small", "aria-label": "Fechar filtro" }), jsx(Button, { variant: "secondary", onClick: () => handleClearFilter(column), label: "Limpar", width: "10", size: "small", "aria-label": "Limpar filtro" }), jsx(Button, { variant: "primary", onClick: () => handleFilter(column), label: "Aplicar", width: "10", size: "small", "aria-label": "Aplicar filtro" })] })] })) }), jsxs("div", { className: "flex flex-col items-start", children: [column.label, isOrdered && (jsxs("div", { className: "flex flex-row", children: [jsx("button", { onClick: () => handleSort(column.dataIndex), "aria-label": `Ordenar por ${column.label}`, children: jsx("i", { className: clsx('text-xs cursor-pointer pi', sortDirection[column.dataIndex] === 'ASC' &&
|
|
4646
4635
|
'pi-sort-amount-up-alt', sortDirection[column.dataIndex] === 'DESC' &&
|
|
4647
4636
|
'pi-sort-amount-down', !sortDirection[column.dataIndex] && 'pi-sort-alt') }) }), column.filterable && (jsx(Fragment, { children: jsx("button", { ref: (el) => {
|
|
4648
4637
|
filterButtonRefs.current[column.dataIndex] = el;
|
|
@@ -4650,7 +4639,7 @@ function Table({ columns, data, totalRecords, actions = [], isOrdered = true, ac
|
|
|
4650
4639
|
? null
|
|
4651
4640
|
: column.dataIndex), "aria-label": `Filtrar por ${column.label}`, children: jsx("i", { className: clsx('pl-2 text-xs cursor-pointer', filterStatus[column.dataIndex] === 'applied'
|
|
4652
4641
|
? 'pi pi-filter-slash'
|
|
4653
|
-
: 'pi pi-filter') }) }) }))] }))] })] }, String(column.dataIndex)))), actions.length > 0 && (jsx("th", { scope: "col", className: clsx('bg-primary rounded-se-lg font-bold text-light-500 text-sm uppercase p-3 text-right pr-4', actionsHeaderClassName), style: { verticalAlign: 'top' }, children: jsx("div", { className: "flex flex-col
|
|
4642
|
+
: 'pi pi-filter') }) }) }))] }))] })] }, String(column.dataIndex)))), actions.length > 0 && (jsx("th", { scope: "col", className: clsx('bg-primary rounded-se-lg font-bold text-light-500 text-sm uppercase p-3 text-right pr-4', actionsHeaderClassName), style: { verticalAlign: 'top' }, children: jsx("div", { className: "flex flex-col", children: actionLabel }) }))] }) }), jsx("tbody", { children: isLoading ? (jsx("tr", { children: jsx("td", { colSpan: columns.length + (actions.length > 0 ? 1 : 0), className: "p-6 text-center bg-gray-50 dark:bg-dark-200", children: jsx("div", { className: "py-2 px-4 flex justify-center items-center gap-2", children: jsx(Spinner, { size: "lg" }) }) }) })) : sortedData.length > 0 ? (sortedData.map((row, index) => (jsxs("tr", { className: clsx(index % 2 === 0
|
|
4654
4643
|
? 'bg-light-300 dark:bg-dark-500'
|
|
4655
4644
|
: 'bg-light-500 dark:bg-dark-100', 'text-primary text-base dark:text-light-500'), children: [columns.map((column) => {
|
|
4656
4645
|
const value = getNestedValue(row, column.dataIndex);
|