@topjoao/top-design-system 0.1.0-beta.1 → 0.1.0-beta.11
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 +446 -98
- package/dist/TopToast-BjKkubxq.cjs +2 -0
- package/dist/TopToast-BjKkubxq.cjs.map +1 -0
- package/dist/TopToast-Bp0e2ch-.js +1111 -0
- package/dist/TopToast-Bp0e2ch-.js.map +1 -0
- package/dist/components/TopButton.vue.d.ts +6 -1
- package/dist/components/TopConfirmDialog.vue.d.ts +47 -0
- package/dist/components/TopDatePicker.vue.d.ts +81 -0
- package/dist/components/TopFileUpload.vue.d.ts +88 -0
- package/dist/components/TopInputText.vue.d.ts +24 -0
- package/dist/components/TopSelect.vue.d.ts +100 -0
- package/dist/components/TopToast.vue.d.ts +37 -0
- package/dist/index.cjs +1 -1
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.ts +11 -0
- package/dist/index.js +12 -70
- package/dist/index.js.map +1 -1
- package/dist/nuxt.cjs +1 -1
- package/dist/nuxt.cjs.map +1 -1
- package/dist/nuxt.js +20 -0
- package/dist/nuxt.js.map +1 -1
- package/dist/plugin.cjs +1 -1
- package/dist/plugin.cjs.map +1 -1
- package/dist/plugin.d.ts +12 -0
- package/dist/plugin.js +4 -4
- package/dist/plugin.js.map +1 -1
- package/dist/style.css +1 -1
- package/dist/theme/topSolutions.d.ts +7 -0
- package/package.json +89 -84
- package/dist/TopButton-2hSBDfRU.js +0 -77
- package/dist/TopButton-2hSBDfRU.js.map +0 -1
- package/dist/TopButton-Do46BCHz.cjs +0 -2
- package/dist/TopButton-Do46BCHz.cjs.map +0 -1
package/README.md
CHANGED
|
@@ -1,114 +1,462 @@
|
|
|
1
|
-
# TopSolutions Design System
|
|
2
|
-
|
|
3
|
-
Biblioteca
|
|
4
|
-
TopSolutions.
|
|
5
|
-
|
|
6
|
-
##
|
|
7
|
-
|
|
8
|
-
```bash
|
|
9
|
-
npm install
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
```
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
1
|
+
# TopSolutions Design System
|
|
2
|
+
|
|
3
|
+
Biblioteca de componentes Vue 3, estilos e tokens visuais compartilhados pela
|
|
4
|
+
TopSolutions.
|
|
5
|
+
|
|
6
|
+
## Instalação
|
|
7
|
+
|
|
8
|
+
```bash
|
|
9
|
+
npm install @topjoao/top-design-system@beta
|
|
10
|
+
```
|
|
11
|
+
|
|
12
|
+
A aplicação consumidora deve possuir Vue 3, PrimeVue, PrimeIcons e
|
|
13
|
+
`@primeuix/themes` em versões compatíveis com as `peerDependencies` do pacote.
|
|
14
|
+
|
|
15
|
+
## Tema TopSolutions
|
|
16
|
+
|
|
17
|
+
A biblioteca exporta `TopSolutionsPreset`, o preset PrimeVue baseado na paleta
|
|
18
|
+
oficial da TopSolutions. Configure-o uma vez na aplicação consumidora:
|
|
19
|
+
|
|
20
|
+
```ts
|
|
21
|
+
import PrimeVue from 'primevue/config'
|
|
22
|
+
import { TopSolutionsPreset } from '@topjoao/top-design-system'
|
|
23
|
+
|
|
24
|
+
app.use(PrimeVue, {
|
|
25
|
+
theme: {
|
|
26
|
+
preset: TopSolutionsPreset,
|
|
27
|
+
options: { darkModeSelector: '.dark' },
|
|
28
|
+
},
|
|
29
|
+
})
|
|
30
|
+
```
|
|
31
|
+
|
|
32
|
+
Para ativar o modo escuro, adicione ou remova `.dark` uma única vez no elemento
|
|
33
|
+
`<html>` da aplicação. Os componentes usam tokens semânticos de superfície, texto e
|
|
34
|
+
borda fornecidos por `style.css`; não é necessário passar classes `dark:` em cada
|
|
35
|
+
uso. A aplicação pode substituir esses tokens após importar o CSS da biblioteca.
|
|
36
|
+
|
|
37
|
+
Os tokens públicos de campos são `--top-field-background`,
|
|
38
|
+
`--top-field-background-readonly`, `--top-field-background-disabled`,
|
|
39
|
+
`--top-field-text`, `--top-field-label`, `--top-field-placeholder`,
|
|
40
|
+
`--top-field-border`, `--top-field-border-hover` e `--top-field-icon`.
|
|
41
|
+
|
|
42
|
+
O preset é independente dos ajustes de layout próprios do TopLicita; ele
|
|
43
|
+
contém apenas tokens semânticos compartilháveis, como cores primárias, neutras,
|
|
44
|
+
sucesso, alerta e erro.
|
|
45
|
+
|
|
46
|
+
`style.css` contém somente os estilos dos componentes públicos do Design System.
|
|
47
|
+
Regras que
|
|
48
|
+
alcançam o PrimeVue são encapsuladas pelas classes-raiz desses componentes;
|
|
49
|
+
componentes PrimeVue usados diretamente pela aplicação consumidora não são
|
|
50
|
+
sobrescritos pela biblioteca.
|
|
51
|
+
|
|
52
|
+
## Uso com Nuxt
|
|
53
|
+
|
|
54
|
+
Adicione o módulo uma única vez ao `nuxt.config.ts`:
|
|
55
|
+
|
|
56
|
+
```ts
|
|
57
|
+
export default defineNuxtConfig({
|
|
58
|
+
modules: [
|
|
59
|
+
// outros módulos...
|
|
60
|
+
'@topjoao/top-design-system/nuxt',
|
|
61
|
+
],
|
|
62
|
+
})
|
|
63
|
+
```
|
|
64
|
+
|
|
65
|
+
Depois de alterar a configuração, reinicie o servidor de desenvolvimento ou
|
|
66
|
+
regenere os arquivos do Nuxt:
|
|
67
|
+
|
|
68
|
+
```bash
|
|
69
|
+
npm run postinstall
|
|
70
|
+
```
|
|
71
|
+
|
|
72
|
+
O módulo registra os componentes, gera suas tipagens e inclui o CSS da
|
|
73
|
+
biblioteca. Não é necessário importar o componente manualmente:
|
|
74
|
+
|
|
75
|
+
```vue
|
|
76
|
+
<template>
|
|
77
|
+
<TopButton label="Salvar" icon="pi pi-save" />
|
|
78
|
+
</template>
|
|
79
|
+
```
|
|
80
|
+
|
|
81
|
+
## Uso com Vue 3
|
|
82
|
+
|
|
83
|
+
### Importação por componente
|
|
84
|
+
|
|
85
|
+
```vue
|
|
86
|
+
<script setup lang="ts">
|
|
87
|
+
import { TopButton } from '@topjoao/top-design-system'
|
|
88
|
+
import '@topjoao/top-design-system/style.css'
|
|
89
|
+
</script>
|
|
90
|
+
|
|
91
|
+
<template>
|
|
92
|
+
<TopButton label="Salvar" icon="pi pi-save" />
|
|
93
|
+
</template>
|
|
94
|
+
```
|
|
95
|
+
|
|
96
|
+
### Registro global
|
|
97
|
+
|
|
98
|
+
Na inicialização da aplicação:
|
|
99
|
+
|
|
100
|
+
```ts
|
|
101
|
+
import { createApp } from 'vue'
|
|
102
|
+
import { TopSolutionsDesignSystem } from '@topjoao/top-design-system/plugin'
|
|
103
|
+
import '@topjoao/top-design-system/style.css'
|
|
104
|
+
import App from './App.vue'
|
|
105
|
+
|
|
106
|
+
createApp(App).use(TopSolutionsDesignSystem).mount('#app')
|
|
107
|
+
```
|
|
108
|
+
|
|
109
|
+
Após o registro, os componentes podem ser utilizados sem importação manual. A
|
|
110
|
+
entrada `/plugin` também fornece as declarações globais usadas pela IDE.
|
|
111
|
+
|
|
112
|
+
## TopButton
|
|
113
|
+
|
|
114
|
+
Exemplo
|
|
115
|
+
|
|
116
|
+
```vue
|
|
117
|
+
<template>
|
|
118
|
+
<TopButton label="Salvar" icon="pi pi-save" @click="salvar" />
|
|
119
|
+
<TopButton label="Cancelar" secondary />
|
|
120
|
+
<TopButton label="Excluir" severity="danger" />
|
|
121
|
+
|
|
122
|
+
<TopButton label="Consultar" outlined>
|
|
123
|
+
<template #icon>
|
|
124
|
+
<i class="pi pi-search" />
|
|
125
|
+
</template>
|
|
126
|
+
</TopButton>
|
|
127
|
+
</template>
|
|
128
|
+
```
|
|
129
|
+
|
|
130
|
+
| Prop | Tipo | Padrão |
|
|
131
|
+
|---|---|---|
|
|
132
|
+
| `tooltip` | `string` | `''` |
|
|
133
|
+
| `tooltipClass` | `string` | `'text-xs'` |
|
|
134
|
+
| `label` | `string` | `''` |
|
|
135
|
+
| `icon` | `string` | `''` |
|
|
136
|
+
| `loading` | `boolean` | `false` |
|
|
137
|
+
| `class` | `string` | `''` |
|
|
138
|
+
| `outlined` | `boolean` | `false` |
|
|
139
|
+
| `severity` | `'primary' \| 'secondary' \| 'success' \| 'warn' \| 'danger'` | `'primary'` |
|
|
140
|
+
| `secondary` | `boolean` | `false` |
|
|
141
|
+
| `disabled` | `boolean` | `false` |
|
|
142
|
+
| `unstyled` | `boolean` | `false` |
|
|
143
|
+
| `type` | `'button' \| 'submit' \| 'reset'` | `'button'` |
|
|
144
|
+
|
|
145
|
+
O componente emite `click` sem payload e oferece o slot nomeado `icon`.
|
|
146
|
+
`secondary` permanece como atalho compatível para `severity="secondary"`.
|
|
147
|
+
|
|
148
|
+
## TopConfirmDialog
|
|
149
|
+
|
|
150
|
+
Diálogo de confirmação baseado no `Dialog` do PrimeVue e nos botões do Design
|
|
151
|
+
System. A visibilidade é controlada por `v-model`; a aplicação consumidora
|
|
152
|
+
decide o que executar e quando encerrar após a confirmação.
|
|
153
|
+
|
|
154
|
+
```vue
|
|
155
|
+
<script setup lang="ts">
|
|
156
|
+
import { ref } from 'vue'
|
|
157
|
+
import { TopConfirmDialog } from '@topjoao/top-design-system'
|
|
158
|
+
|
|
159
|
+
const showConfirm = ref(false)
|
|
160
|
+
|
|
161
|
+
function excluirRegistro() {
|
|
162
|
+
// Execute a ação e feche o diálogo quando apropriado.
|
|
163
|
+
showConfirm.value = false
|
|
164
|
+
}
|
|
165
|
+
</script>
|
|
166
|
+
|
|
167
|
+
<template>
|
|
168
|
+
<TopConfirmDialog
|
|
169
|
+
v-model="showConfirm"
|
|
170
|
+
title="Confirmar exclusão"
|
|
171
|
+
message="Deseja realmente excluir este registro?"
|
|
172
|
+
confirm-text="Excluir"
|
|
173
|
+
cancel-text="Cancelar"
|
|
174
|
+
@confirm="excluirRegistro"
|
|
175
|
+
/>
|
|
176
|
+
</template>
|
|
177
|
+
```
|
|
178
|
+
|
|
179
|
+
| Prop | Tipo | Padrão |
|
|
180
|
+
|---|---|---|
|
|
181
|
+
| `modelValue` | `boolean` | `false` |
|
|
182
|
+
| `title` | `string` | `'Confirmar'` |
|
|
183
|
+
| `message` | `string` | `''` |
|
|
184
|
+
| `confirmText` / `cancelText` | `string` | `'Confirmar'` / `'Cancelar'` |
|
|
185
|
+
| `loading` | `boolean` | `false` |
|
|
186
|
+
| `loadingText` | `string` | `'Processando...'` |
|
|
187
|
+
| `severity` | `'primary' \| 'danger'` | `'danger'` |
|
|
188
|
+
| `icon` | `string` | `'pi pi-exclamation-triangle'` |
|
|
189
|
+
|
|
190
|
+
Eventos: `update:modelValue`, `confirm`, `cancel` e `close`. O evento `confirm`
|
|
191
|
+
não fecha automaticamente o diálogo, permitindo que a aplicação aguarde uma
|
|
192
|
+
operação assíncrona. Os slots `message` e default permitem substituir a mensagem
|
|
193
|
+
textual.
|
|
194
|
+
|
|
195
|
+
## TopDatePicker
|
|
36
196
|
|
|
37
|
-
|
|
197
|
+
Seletor de datas baseado no `DatePicker` do PrimeVue. O valor permanece como
|
|
198
|
+
`Date` (ou arrays de `Date` nos modos `multiple` e `range`); `dateFormat` altera
|
|
199
|
+
somente a apresentação no campo e não converte o `v-model` para texto.
|
|
200
|
+
No modo padrão (`single` com `dd/mm/yy`), a digitação recebe automaticamente a
|
|
201
|
+
máscara brasileira `dd/mm/aaaa`.
|
|
38
202
|
|
|
39
203
|
```vue
|
|
40
204
|
<script setup lang="ts">
|
|
41
|
-
import {
|
|
42
|
-
import '@topjoao/top-design-system
|
|
43
|
-
</script>
|
|
44
|
-
```
|
|
45
|
-
|
|
46
|
-
### Componentes globais em Vue 3
|
|
47
|
-
|
|
48
|
-
Registre o plugin na inicialização da aplicação:
|
|
49
|
-
|
|
50
|
-
```ts
|
|
51
|
-
import { createApp } from 'vue'
|
|
52
|
-
import { TopSolutionsDesignSystem } from '@topjoao/top-design-system/plugin'
|
|
53
|
-
import '@topjoao/top-design-system/style.css'
|
|
54
|
-
import App from './App.vue'
|
|
55
|
-
|
|
56
|
-
createApp(App).use(TopSolutionsDesignSystem).mount('#app')
|
|
57
|
-
```
|
|
58
|
-
|
|
59
|
-
Depois disso, `<TopButton>` fica disponível globalmente e sua tipagem é
|
|
60
|
-
reconhecida pela IDE. Esta entrada não depende do Nuxt.
|
|
61
|
-
|
|
62
|
-
### Autoimportação no Nuxt
|
|
63
|
-
|
|
64
|
-
Adicione o módulo ao `nuxt.config.ts`:
|
|
65
|
-
|
|
66
|
-
```ts
|
|
67
|
-
export default defineNuxtConfig({
|
|
68
|
-
modules: ['@topjoao/top-design-system/nuxt'],
|
|
69
|
-
})
|
|
70
|
-
```
|
|
71
|
-
|
|
72
|
-
O módulo registra o `TopButton`, sua tipagem e o CSS da biblioteca. Assim, o
|
|
73
|
-
componente pode ser usado como `<TopButton>` sem importação manual. A integração
|
|
74
|
-
com Nuxt é opcional e não afeta aplicações Vue que utilizam as outras entradas.
|
|
205
|
+
import { ref } from 'vue'
|
|
206
|
+
import { TopDatePicker } from '@topjoao/top-design-system'
|
|
75
207
|
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
O `TopButton` preserva a API do `CustomButton` do TopSolutions Licitação:
|
|
79
|
-
|
|
80
|
-
```vue
|
|
81
|
-
<script setup lang="ts">
|
|
82
|
-
import { TopButton } from '@topjoao/top-design-system'
|
|
83
|
-
import '@topjoao/top-design-system/style.css'
|
|
208
|
+
const dataNascimento = ref<Date | null>(null)
|
|
84
209
|
</script>
|
|
85
210
|
|
|
86
211
|
<template>
|
|
87
|
-
<
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
212
|
+
<TopDatePicker
|
|
213
|
+
v-model="dataNascimento"
|
|
214
|
+
label="Data de nascimento"
|
|
215
|
+
placeholder="Selecione a data"
|
|
216
|
+
:max-date="new Date()"
|
|
217
|
+
required
|
|
218
|
+
error="Informe uma data válida."
|
|
219
|
+
@date-select="validarData"
|
|
220
|
+
/>
|
|
96
221
|
</template>
|
|
97
222
|
```
|
|
98
223
|
|
|
99
|
-
Props disponíveis:
|
|
100
|
-
|
|
101
224
|
| Prop | Tipo | Padrão |
|
|
102
225
|
|---|---|---|
|
|
103
|
-
| `
|
|
226
|
+
| `modelValue` | `Date \| Date[] \| (Date \| null)[] \| null` | `null` |
|
|
104
227
|
| `label` | `string` | `''` |
|
|
105
|
-
| `
|
|
106
|
-
| `
|
|
107
|
-
| `
|
|
108
|
-
| `
|
|
109
|
-
| `secondary` | `boolean` | `false` |
|
|
228
|
+
| `placeholder` | `string` | `'dd/mm/aaaa'` |
|
|
229
|
+
| `required` | `boolean` | `false` |
|
|
230
|
+
| `error` | `string` | `''` |
|
|
231
|
+
| `invalid` | `boolean` | `false` |
|
|
110
232
|
| `disabled` | `boolean` | `false` |
|
|
111
|
-
| `
|
|
112
|
-
| `
|
|
233
|
+
| `readonly` | `boolean` | `false` |
|
|
234
|
+
| `selectionMode` | `'single' \| 'multiple' \| 'range'` | `'single'` |
|
|
235
|
+
| `dateFormat` | `string` | `'dd/mm/yy'` |
|
|
236
|
+
| `minDate` / `maxDate` | `Date` | `undefined` |
|
|
237
|
+
| `showIcon` | `boolean` | `true` |
|
|
238
|
+
| `iconDisplay` | `'button' \| 'input'` | `'input'` |
|
|
239
|
+
| `manualInput` | `boolean` | `true` |
|
|
240
|
+
| `showButtonBar` | `boolean` | `false` |
|
|
241
|
+
| `appendTo` | `'body' \| 'self' \| HTMLElement` | `'body'` |
|
|
113
242
|
|
|
114
|
-
|
|
243
|
+
Eventos: `update:modelValue`, `input`, `change`, `date-select`, `show`, `hide`,
|
|
244
|
+
`today-click`, `clear-click`, `month-change`, `year-change`, `focus`, `blur` e
|
|
245
|
+
`keydown`. Os slots do `DatePicker` do PrimeVue são repassados pelo wrapper,
|
|
246
|
+
incluindo `date`, `header`, `footer`, `buttonbar`, `inputicon`, `dropdownicon`,
|
|
247
|
+
`previcon` e `nexticon`.
|
|
248
|
+
|
|
249
|
+
`required` adiciona o atributo nativo e o asterisco visual; a validação continua
|
|
250
|
+
sob responsabilidade da aplicação. `error` ativa o estado inválido, associa a
|
|
251
|
+
mensagem ao input com atributos ARIA e a exibe abaixo do campo. `readonly`
|
|
252
|
+
impede edição e seleção sem desabilitar o controle, enquanto `disabled` remove a
|
|
253
|
+
interação. No modo escuro, o campo usa os tokens públicos `--top-field-*`.
|
|
254
|
+
|
|
255
|
+
## TopFileUpload
|
|
256
|
+
|
|
257
|
+
Seletor de arquivos baseado no `FileUpload` do PrimeVue. O componente valida e
|
|
258
|
+
apresenta os arquivos, mas não os envia: a aplicação consumidora controla o
|
|
259
|
+
upload por `v-model` e pelos eventos.
|
|
260
|
+
|
|
261
|
+
```vue
|
|
262
|
+
<script setup lang="ts">
|
|
263
|
+
import { ref } from 'vue'
|
|
264
|
+
import { TopFileUpload } from '@topjoao/top-design-system'
|
|
265
|
+
|
|
266
|
+
const anexos = ref<File[]>([])
|
|
267
|
+
|
|
268
|
+
function enviarArquivos(files: File[]) {
|
|
269
|
+
// Envie os arquivos usando o serviço da aplicação.
|
|
270
|
+
}
|
|
271
|
+
</script>
|
|
272
|
+
|
|
273
|
+
<template>
|
|
274
|
+
<TopFileUpload
|
|
275
|
+
v-model="anexos"
|
|
276
|
+
label="Anexos"
|
|
277
|
+
accept=".pdf,image/*"
|
|
278
|
+
multiple
|
|
279
|
+
:max-file-size="5 * 1024 * 1024"
|
|
280
|
+
:max-files="5"
|
|
281
|
+
required
|
|
282
|
+
@select="enviarArquivos"
|
|
283
|
+
/>
|
|
284
|
+
</template>
|
|
285
|
+
```
|
|
286
|
+
|
|
287
|
+
| Prop | Tipo | Padrão |
|
|
288
|
+
|---|---|---|
|
|
289
|
+
| `modelValue` | `File \| File[] \| null` | `null` |
|
|
290
|
+
| `label` | `string` | `''` |
|
|
291
|
+
| `placeholder` | `string` | `'Arraste e solte o arquivo aqui'` |
|
|
292
|
+
| `required` | `boolean` | `false` |
|
|
293
|
+
| `disabled` | `boolean` | `false` |
|
|
294
|
+
| `accept` | `string` | `''` |
|
|
295
|
+
| `multiple` | `boolean` | `false` |
|
|
296
|
+
| `maxFileSize` | `number \| null` (bytes) | `null` |
|
|
297
|
+
| `maxFiles` | `number \| null` | `null` |
|
|
298
|
+
| `error` | `string` | `''` |
|
|
299
|
+
| `selectLabel` | `string` | `'Selecionar arquivo'` |
|
|
300
|
+
| `removeLabel` | `string` | `'Remover'` |
|
|
301
|
+
| `loading` | `boolean` | `false` |
|
|
302
|
+
|
|
303
|
+
Eventos: `update:modelValue`, `select`, `change`, `remove`, `clear` e `error`.
|
|
304
|
+
Erros de tipo, tamanho e quantidade possuem `code`, `message` e o `file`
|
|
305
|
+
relacionado. Os slots `empty` e `preview` permitem customizar a área vazia e a
|
|
306
|
+
pré-visualização. Os métodos `choose()` e `clear()` ficam disponíveis pela ref
|
|
307
|
+
do componente.
|
|
308
|
+
|
|
309
|
+
## TopInputText
|
|
310
|
+
|
|
311
|
+
Campo textual baseado no `InputText` do PrimeVue. O `v-model` é sempre
|
|
312
|
+
`string`, inclusive para códigos, documentos e identificadores compostos
|
|
313
|
+
somente por dígitos; por exemplo, `"001234"` preserva os zeros à esquerda.
|
|
314
|
+
|
|
315
|
+
```vue
|
|
316
|
+
<script setup lang="ts">
|
|
317
|
+
import { ref } from 'vue'
|
|
318
|
+
import { TopInputText } from '@topjoao/top-design-system'
|
|
319
|
+
|
|
320
|
+
const codigo = ref('001234')
|
|
321
|
+
</script>
|
|
322
|
+
|
|
323
|
+
<template>
|
|
324
|
+
<TopInputText
|
|
325
|
+
id="codigo"
|
|
326
|
+
v-model="codigo"
|
|
327
|
+
label="Código"
|
|
328
|
+
placeholder="Digite o código"
|
|
329
|
+
required
|
|
330
|
+
maxlength="10"
|
|
331
|
+
autocomplete="off"
|
|
332
|
+
/>
|
|
333
|
+
</template>
|
|
334
|
+
```
|
|
335
|
+
|
|
336
|
+
| Prop | Tipo | Padrão |
|
|
337
|
+
|---|---|---|
|
|
338
|
+
| `modelValue` | `string` | `''` |
|
|
339
|
+
| `label` | `string` | `''` |
|
|
340
|
+
| `placeholder` | `string` | `''` |
|
|
341
|
+
| `required` | `boolean` | `false` |
|
|
342
|
+
| `error` | `string` | `''` |
|
|
343
|
+
| `disabled` | `boolean` | `false` |
|
|
344
|
+
| `readonly` | `boolean` | `false` |
|
|
345
|
+
|
|
346
|
+
Atributos e eventos nativos adicionais, como `name`, `maxlength`,
|
|
347
|
+
`autocomplete`, `inputmode`, `pattern`, `aria-*`, `data-*`, `focus` e `blur`,
|
|
348
|
+
são repassados ao elemento `input` interno.
|
|
349
|
+
|
|
350
|
+
## TopSelect
|
|
351
|
+
|
|
352
|
+
Seletor pesquisável baseado no `AutoComplete` do PrimeVue. Ele é genérico: a
|
|
353
|
+
aplicação fornece os itens, executa a busca e decide qualquer apresentação de
|
|
354
|
+
domínio por slots.
|
|
355
|
+
|
|
356
|
+
```vue
|
|
357
|
+
<script setup lang="ts">
|
|
358
|
+
import { ref } from 'vue'
|
|
359
|
+
import { TopSelect } from '@topjoao/top-design-system'
|
|
360
|
+
|
|
361
|
+
const selectedCustomer = ref(null)
|
|
362
|
+
const customers = ref([])
|
|
363
|
+
|
|
364
|
+
function searchCustomers({ query }: { query: string }) {
|
|
365
|
+
// Atualize customers com o resultado da sua fonte de dados.
|
|
366
|
+
}
|
|
367
|
+
</script>
|
|
368
|
+
|
|
369
|
+
<template>
|
|
370
|
+
<TopSelect
|
|
371
|
+
v-model="selectedCustomer"
|
|
372
|
+
:options="customers"
|
|
373
|
+
option-label="name"
|
|
374
|
+
option-key="id"
|
|
375
|
+
option-prefix="code"
|
|
376
|
+
show-option-prefix
|
|
377
|
+
:loading="false"
|
|
378
|
+
@search="searchCustomers"
|
|
379
|
+
>
|
|
380
|
+
<template #icon="{ loading }">
|
|
381
|
+
<i :class="loading ? 'pi pi-spin pi-spinner' : 'pi pi-users'" />
|
|
382
|
+
</template>
|
|
383
|
+
<template #footer>
|
|
384
|
+
<button type="button">Criar cliente</button>
|
|
385
|
+
</template>
|
|
386
|
+
</TopSelect>
|
|
387
|
+
</template>
|
|
388
|
+
```
|
|
389
|
+
|
|
390
|
+
| Prop | Tipo | Padrão |
|
|
391
|
+
|---|---|---|
|
|
392
|
+
| `options` | `array` | `[]` |
|
|
393
|
+
| `optionLabel` | `string \| function` | `'label'` |
|
|
394
|
+
| `optionKey` | `string` | `'id'` |
|
|
395
|
+
| `optionPrefix` | `string` | `''` |
|
|
396
|
+
| `showOptionPrefix` | `boolean` | `false` |
|
|
397
|
+
| `showSelectedPrefix` | `boolean` | `false` |
|
|
398
|
+
| `loading` / `disabled` / `invalid` | `boolean` | `false` |
|
|
399
|
+
| `placeholder` | `string` | `'Search...'` |
|
|
400
|
+
| `minQueryLength` | `number` | `1` |
|
|
401
|
+
| `multiple` / `forceSelection` | `boolean` | `false` / `true` |
|
|
402
|
+
| `panelWidth` / `scrollHeight` | `string` | `null` / `'250px'` |
|
|
403
|
+
| `emptyMessage` / `loadingMessage` | `string` | mensagens padrão em inglês |
|
|
404
|
+
| `closeOnSelect` | `boolean` | `false` |
|
|
405
|
+
|
|
406
|
+
Eventos: `update:modelValue`, `search`, `loadMore`, `clear`, `select` e
|
|
407
|
+
`change`.
|
|
408
|
+
|
|
409
|
+
Slots: `icon`, `option`, `selected-item`, `chip`, `empty`, `option-group` e
|
|
410
|
+
`footer`. O slot `icon` recebe `loading`; sem ele, o componente mostra uma lupa
|
|
411
|
+
ou um indicador de carregamento. Quando um slot não é informado, o componente usa sua apresentação padrão.
|
|
412
|
+
O texto das opções é limitado visualmente pela largura disponível do painel,
|
|
413
|
+
sem corte por quantidade fixa de caracteres; o tooltip padrão exibe o valor
|
|
414
|
+
completo quando `showTooltip` está ativo.
|
|
415
|
+
|
|
416
|
+
## Desenvolvimento da biblioteca
|
|
417
|
+
|
|
418
|
+
```bash
|
|
419
|
+
npm install
|
|
420
|
+
npm run check
|
|
421
|
+
```
|
|
422
|
+
|
|
423
|
+
O comando `check` executa verificação de tipos, testes e build.
|
|
424
|
+
|
|
425
|
+
Para inspecionar o conteúdo que seria publicado:
|
|
426
|
+
|
|
427
|
+
```bash
|
|
428
|
+
npm pack --dry-run
|
|
429
|
+
```
|
|
430
|
+
|
|
431
|
+
## Playground visual
|
|
432
|
+
|
|
433
|
+
O Storybook permite testar os componentes isoladamente e consultar seus
|
|
434
|
+
exemplos. Ele é uma dependência de desenvolvimento e não é incluído no pacote
|
|
435
|
+
publicado.
|
|
436
|
+
|
|
437
|
+
```bash
|
|
438
|
+
npm run storybook
|
|
439
|
+
```
|
|
440
|
+
|
|
441
|
+
Abra `http://localhost:6006` para acessar as histórias de `TopButton`,
|
|
442
|
+
`TopConfirmDialog`, `TopDatePicker`, `TopInputText` e `TopSelect`. Use o botão de
|
|
443
|
+
contraste na barra superior para alternar o preview entre tema claro e escuro.
|
|
444
|
+
Para gerar a versão estática da documentação, execute:
|
|
445
|
+
|
|
446
|
+
```bash
|
|
447
|
+
npm run build-storybook
|
|
448
|
+
```
|
|
449
|
+
|
|
450
|
+
Para gerar um pacote local instalável:
|
|
451
|
+
|
|
452
|
+
```bash
|
|
453
|
+
npm pack
|
|
454
|
+
```
|
|
455
|
+
|
|
456
|
+
Para publicar uma nova versão beta, primeiro altere a versão; versões já
|
|
457
|
+
publicadas no npm não podem ser sobrescritas.
|
|
458
|
+
|
|
459
|
+
```bash
|
|
460
|
+
npm version prerelease --preid=beta --no-git-tag-version
|
|
461
|
+
npm publish --access public --tag beta
|
|
462
|
+
```
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
var e=Object.create,t=Object.defineProperty,n=Object.getOwnPropertyDescriptor,r=Object.getOwnPropertyNames,i=Object.getPrototypeOf,a=Object.prototype.hasOwnProperty,o=(e,i,o,s)=>{if(i&&typeof i==`object`||typeof i==`function`)for(var c=r(i),l=0,u=c.length,d;l<u;l++)d=c[l],!a.call(e,d)&&d!==o&&t(e,d,{get:(e=>i[e]).bind(null,d),enumerable:!(s=n(i,d))||s.enumerable});return e},s=(n,r,s)=>(s=n==null?{}:e(i(n)),o(r||!n||!n.__esModule||!a.call(n,`default`)?t(s,`default`,{value:n,enumerable:!0}):s,n));let c=require("vue"),l=require("primevue/button");l=s(l,1);let u=require("primevue/tooltip");u=s(u,1);let d=require("tailwind-merge"),f=require("primevue/dialog");f=s(f,1);let p=require("primevue/datepicker");p=s(p,1);let m=require("primevue/fileupload");m=s(m,1);let h=require("primevue/inputtext");h=s(h,1);let g=require("primevue/autocomplete");g=s(g,1);let _=require("primevue/toast");_=s(_,1);var v={class:`top-button top-solutions-component h-fit w-fit rounded-[12px] bg-transparent`},y=(0,c.defineComponent)({__name:`TopButton`,props:{tooltip:{default:``},tooltipClass:{default:`text-xs`},label:{default:``},icon:{default:``},loading:{type:Boolean,default:!1},class:{default:``},outlined:{type:Boolean,default:!1},severity:{default:`primary`},secondary:{type:Boolean,default:!1},disabled:{type:Boolean,default:!1},unstyled:{type:Boolean,default:!1},type:{default:`button`}},emits:[`click`],setup(e,{emit:t}){let n=(0,c.useSlots)(),r=(0,c.computed)(()=>!!n.icon),i=e,a=t,o=(0,c.computed)(()=>i.secondary?`secondary`:i.severity),s=(0,c.computed)(()=>{let e=i.unstyled?``:o.value===`secondary`?`rounded-[10px] border px-3 py-2 font-bold dark:!border-zinc-500 dark:!bg-zinc-700 dark:!text-zinc-100 dark:hover:!bg-zinc-600`:i.outlined?o.value===`primary`?`shrink-0 rounded-[10px] border-primary-800 px-3 py-2 text-primary-800 hover:bg-primary-50 dark:border-primary-200 dark:bg-transparent dark:text-primary-100 dark:hover:bg-primary-900`:`shrink-0 rounded-[10px] border px-3 py-2 font-bold`:o.value===`primary`?`rounded-[10px] !border-primary-900 bg-primary-900 px-3 py-2 font-bold text-white hover:!border-primary-800 hover:bg-primary-800 dark:!text-white`:`rounded-[10px] border px-3 py-2 font-bold`;return(0,d.twMerge)(e,i.class)});return(t,n)=>((0,c.openBlock)(),(0,c.createElementBlock)(`span`,v,[(0,c.withDirectives)(((0,c.openBlock)(),(0,c.createBlock)((0,c.unref)(l.default),{type:e.type,label:e.label,disabled:e.disabled||e.loading,icon:r.value?void 0:e.icon||void 0,loading:e.loading,outlined:e.outlined||o.value===`secondary`,severity:o.value===`primary`?void 0:o.value,class:(0,c.normalizeClass)(s.value),pt:{root:{class:s.value}},onClick:n[0]||=e=>a(`click`)},(0,c.createSlots)({_:2},[r.value?{name:`icon`,fn:(0,c.withCtx)(()=>[(0,c.renderSlot)(t.$slots,`icon`)]),key:`0`}:void 0]),1032,[`type`,`label`,`disabled`,`icon`,`loading`,`outlined`,`severity`,`class`,`pt`])),[[(0,c.unref)(u.default),{value:e.tooltip,class:e.tooltipClass},void 0,{top:!0}]])]))}}),b={primary:{50:`#EEF9FF`,100:`#DFF4FF`,200:`#C5E6F8`,300:`#8EC4DF`,400:`#66ACD1`,500:`#2488BC`,600:`#036DA3`,700:`#1B5783`,800:`#02466B`,900:`#052F4A`,950:`#0C192D`},secondary:{50:`#FAFAFA`,100:`#F4F4F5`,200:`#E9E9E9`,300:`#D8D8D8`,400:`#B8B8B8`,500:`#8E8E8E`,600:`#676767`,700:`#4B4B4B`,800:`#343434`,900:`#1C1917`,950:`#0C0A09`},success:{50:`#FAFFFA`,100:`#F4FBF6`,200:`#DFF6DE`,300:`#CBE3CA`,400:`#A3CCA1`,500:`#6BA968`,600:`#358F30`,700:`#2C7B27`,800:`#1E631A`,900:`#10430D`,950:`#062804`},warn:{50:`#FFF7ED`,100:`#FDF3D8`,200:`#FDE9B2`,300:`#FDD566`,400:`#FFB900`,500:`#FFA515`,600:`#FD9024`,700:`#DD781F`,800:`#BC4E00`,900:`#A42D02`,950:`#792202`},danger:{50:`#F8E6E4`,100:`#FFDDD9`,200:`#EEC1BC`,300:`#E3938C`,400:`#E3675C`,500:`#DC3F32`,600:`#CF150E`,700:`#B10404`,800:`#820907`,900:`#5D0803`,950:`#450501`}},x=[`aria-label`,`disabled`],S={class:`flex flex-col items-center gap-2 pt-2`},C={class:`text-base font-bold text-secondary-900 dark:text-zinc-100`},w={class:`text-sm leading-5 text-secondary-700 dark:text-zinc-300`},T={class:`mt-2 flex w-full items-center justify-center gap-3`},E=(0,c.defineComponent)({__name:`TopConfirmDialog`,props:{modelValue:{type:Boolean,default:!1},title:{default:`Confirmar`},message:{default:``},confirmText:{default:`Confirmar`},cancelText:{default:`Cancelar`},loading:{type:Boolean,default:!1},loadingText:{default:`Processando...`},severity:{default:`danger`},icon:{default:`pi pi-exclamation-triangle`}},emits:[`update:modelValue`,`confirm`,`cancel`,`close`],setup(e,{emit:t}){let n=e,r=t,i=(0,c.computed)({get:()=>n.modelValue,set:e=>{!e&&n.loading||r(`update:modelValue`,e)}}),a=(0,c.computed)(()=>({"--top-confirm-dialog-accent":n.severity===`danger`?b.danger[600]:b.primary[800],"--top-confirm-dialog-accent-hover":n.severity===`danger`?b.danger[700]:b.primary[700]})),o=(0,c.computed)(()=>[`px-3 py-2 text-sm`,n.severity===`danger`?`!border-red-600 !bg-red-600 hover:!border-red-700 hover:!bg-red-700`:``].filter(Boolean).join(` `));function s(){n.loading||r(`confirm`)}function l(){n.loading||(r(`cancel`),i.value=!1)}function u(){n.loading||(i.value=!1)}return(t,n)=>((0,c.openBlock)(),(0,c.createBlock)((0,c.unref)(f.default),{visible:i.value,"onUpdate:visible":n[0]||=e=>i.value=e,modal:``,closable:!1,"close-on-escape":!e.loading,"dismissable-mask":!1,draggable:!1,"show-header":!1,style:{width:`500px`,maxWidth:`calc(100vw - 2rem)`},"aria-label":e.title,pt:{root:{class:`top-confirm-dialog top-solutions-component`},content:{class:`p-6`},footer:{class:`hidden`}},onHide:n[1]||=e=>r(`close`)},{default:(0,c.withCtx)(()=>[(0,c.createElementVNode)(`div`,{class:`relative flex flex-col items-center gap-4 text-center`,style:(0,c.normalizeStyle)(a.value)},[(0,c.createElementVNode)(`button`,{type:`button`,class:`absolute right-[-0.25rem] top-[-0.5rem] flex size-8 items-center justify-center rounded-full border-0 bg-transparent p-0 text-secondary-700 outline-none transition-colors hover:bg-secondary-200 focus-visible:ring-2 focus-visible:ring-primary-500 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 dark:text-zinc-200 dark:hover:bg-zinc-700`,"aria-label":e.cancelText,disabled:e.loading,onClick:u},[...n[2]||=[(0,c.createElementVNode)(`i`,{class:`pi pi-times text-lg`,"aria-hidden":`true`},null,-1)]],8,x),(0,c.createElementVNode)(`div`,S,[(0,c.createElementVNode)(`i`,{class:(0,c.normalizeClass)([e.icon,`top-confirm-dialog__icon text-[40px]`]),"aria-hidden":`true`},null,2),(0,c.createElementVNode)(`p`,C,(0,c.toDisplayString)(e.title),1)]),(0,c.createElementVNode)(`div`,w,[(0,c.renderSlot)(t.$slots,`message`,{},()=>[(0,c.renderSlot)(t.$slots,`default`,{},()=>[(0,c.createTextVNode)((0,c.toDisplayString)(e.message),1)])])]),(0,c.createElementVNode)(`div`,T,[(0,c.createVNode)(y,{label:e.cancelText,secondary:``,disabled:e.loading,class:`px-3 py-2 text-sm`,onClick:l},null,8,[`label`,`disabled`]),(0,c.createVNode)(y,{label:e.loading?e.loadingText:e.confirmText,loading:e.loading,class:(0,c.normalizeClass)(o.value),onClick:s},null,8,[`label`,`loading`,`class`])])],4)]),_:3},8,[`visible`,`close-on-escape`,`aria-label`]))}}),D={class:`top-date-picker top-solutions-component flex w-full flex-col gap-1`},O=[`for`],k={key:0,"aria-hidden":`true`,class:`text-red-600 dark:text-red-400`},A=[`id`],j=(0,c.defineComponent)({inheritAttrs:!1,__name:`TopDatePicker`,props:{modelValue:{default:null},label:{default:``},placeholder:{default:`dd/mm/aaaa`},required:{type:Boolean,default:!1},error:{default:``},invalid:{type:Boolean,default:!1},disabled:{type:Boolean,default:!1},readonly:{type:Boolean,default:!1},selectionMode:{default:`single`},dateFormat:{default:`dd/mm/yy`},minDate:{default:void 0},maxDate:{default:void 0},showIcon:{type:Boolean,default:!0},iconDisplay:{default:`input`},manualInput:{type:Boolean,default:!0},showButtonBar:{type:Boolean,default:!1},appendTo:{default:`body`}},emits:[`update:modelValue`,`input`,`change`,`date-select`,`show`,`hide`,`today-click`,`clear-click`,`month-change`,`year-change`,`focus`,`blur`,`keydown`],setup(e,{emit:t}){let n=e,r=t,i=(0,c.useAttrs)(),a=(0,c.useSlots)(),o=(0,c.useId)(),s=(0,c.computed)(()=>i.id===void 0||i.id===null||i.id===``?o:String(i.id)),l=(0,c.computed)(()=>`${s.value}-error`),u=(0,c.computed)(()=>n.invalid||!!n.error),d=(0,c.computed)(()=>n.manualInput&&!n.readonly&&!n.disabled&&n.selectionMode===`single`&&n.dateFormat===`dd/mm/yy`),f=(0,c.computed)(()=>{if(u.value)return!0;let e=i[`aria-invalid`];return typeof e==`boolean`||e===`true`||e===`false`||e===`grammar`||e===`spelling`?e:void 0}),m=(0,c.computed)(()=>{let e=i[`aria-describedby`],t=[typeof e==`string`?e:``,n.error?l.value:``].filter(Boolean);return t.length?t.join(` `):void 0}),h=(0,c.computed)(()=>{let{id:e,"aria-describedby":t,"aria-invalid":n,...r}=i;return r}),g=(0,c.computed)(()=>({pcInputText:{root:{"aria-describedby":m.value,"aria-invalid":f.value,onChange:e=>r(`change`,e),inputmode:d.value?`numeric`:void 0,maxlength:d.value?10:void 0}}}));function _(e){r(`update:modelValue`,e??null)}function v(e){let t=e.target;if(d.value&&t instanceof HTMLInputElement&&!e.isComposing){let e=t.value.replace(/\D/g,``).slice(0,8);t.value=[e.slice(0,2),e.slice(2,4),e.slice(4,8)].filter(Boolean).join(`/`)}r(`input`,e)}return(t,n)=>((0,c.openBlock)(),(0,c.createElementBlock)(`div`,D,[e.label?((0,c.openBlock)(),(0,c.createElementBlock)(`label`,{key:0,for:s.value,class:`top-field-label text-xs font-bold`},[(0,c.createTextVNode)((0,c.toDisplayString)(e.label)+` `,1),e.required?((0,c.openBlock)(),(0,c.createElementBlock)(`span`,k,`*`)):(0,c.createCommentVNode)(``,!0)],8,O)):(0,c.createCommentVNode)(``,!0),(0,c.createVNode)((0,c.unref)(p.default),(0,c.mergeProps)(h.value,{"model-value":e.modelValue,"input-id":s.value,placeholder:e.placeholder,required:e.required,invalid:u.value,disabled:e.disabled,readonly:e.readonly,"selection-mode":e.selectionMode,"date-format":e.dateFormat,"update-model-type":`date`,"min-date":e.minDate,"max-date":e.maxDate,"show-icon":e.showIcon,"icon-display":e.iconDisplay,"manual-input":e.manualInput,"show-button-bar":e.showButtonBar,"append-to":e.appendTo,pt:g.value,"input-class":`top-date-picker__input top-field-control h-[40px] w-full rounded-[10px] border px-3 py-2 text-xs read-only:cursor-default disabled:cursor-not-allowed`,"panel-class":`top-date-picker-panel top-solutions-component`,fluid:``,"onUpdate:modelValue":_,onInput:v,onDateSelect:n[0]||=e=>r(`date-select`,e),onShow:n[1]||=e=>r(`show`),onHide:n[2]||=e=>r(`hide`),onTodayClick:n[3]||=e=>r(`today-click`,e),onClearClick:n[4]||=e=>r(`clear-click`,e),onMonthChange:n[5]||=e=>r(`month-change`,e),onYearChange:n[6]||=e=>r(`year-change`,e),onFocus:n[7]||=e=>r(`focus`,e),onBlur:n[8]||=e=>r(`blur`,e),onKeydown:n[9]||=e=>r(`keydown`,e)}),(0,c.createSlots)({_:2},[(0,c.renderList)((0,c.unref)(a),(e,n)=>({name:n,fn:(0,c.withCtx)(e=>[(0,c.renderSlot)(t.$slots,n,(0,c.normalizeProps)((0,c.guardReactiveProps)(e??{})))])}))]),1040,[`model-value`,`input-id`,`placeholder`,`required`,`invalid`,`disabled`,`readonly`,`selection-mode`,`date-format`,`min-date`,`max-date`,`show-icon`,`icon-display`,`manual-input`,`show-button-bar`,`append-to`,`pt`]),e.error?((0,c.openBlock)(),(0,c.createElementBlock)(`span`,{key:1,id:l.value,class:`text-[11px] text-red-600 dark:text-red-400`,role:`alert`},(0,c.toDisplayString)(e.error),9,A)):(0,c.createCommentVNode)(``,!0)]))}}),M={class:`top-file-upload top-solutions-component flex w-full flex-col gap-1`},N=[`for`],P={key:0,"aria-hidden":`true`,class:`text-red-600 dark:text-red-400`},F={class:`flex min-h-[130px] w-full flex-col items-center justify-center gap-3`},ee={class:`m-0 text-center text-xs text-secondary-600 dark:text-zinc-300`},I={key:1,class:`flex w-full flex-col gap-2`},L=[`src`,`alt`],R={key:1,class:`flex size-12 shrink-0 items-center justify-center rounded-lg bg-primary-50 text-primary-800 dark:bg-primary-950 dark:text-primary-200`},z={class:`min-w-0 flex-1`},B={class:`m-0 truncate text-xs font-bold text-secondary-900 dark:text-zinc-100`},V={class:`text-[11px] text-secondary-500 dark:text-zinc-400`},H=[`aria-label`,`disabled`,`onClick`],U=[`id`],W=(0,c.defineComponent)({inheritAttrs:!1,__name:`TopFileUpload`,props:{modelValue:{default:null},label:{default:``},placeholder:{default:`Arraste e solte o arquivo aqui`},required:{type:Boolean,default:!1},disabled:{type:Boolean,default:!1},accept:{default:``},multiple:{type:Boolean,default:!1},maxFileSize:{default:null},maxFiles:{default:null},error:{default:``},selectLabel:{default:`Selecionar arquivo`},removeLabel:{default:`Remover`},loading:{type:Boolean,default:!1}},emits:[`update:modelValue`,`select`,`change`,`remove`,`clear`,`error`],setup(e,{expose:t,emit:n}){let r=e,i=n,a=(0,c.useAttrs)(),o=(0,c.useId)(),s=(0,c.ref)(null),l=(0,c.ref)(b(r.modelValue)),u=(0,c.ref)([]),d=new Map,f=(0,c.computed)(()=>a.id===void 0||a.id===null||a.id===``?o:String(a.id)),p=(0,c.computed)(()=>`${f.value}-error`),h=(0,c.computed)(()=>r.error||u.value[0]?.message||``),g=(0,c.computed)(()=>r.disabled||r.loading),_=(0,c.computed)(()=>{let e=a[`aria-describedby`],t=[typeof e==`string`?e:``,h.value?p.value:``].filter(Boolean);return t.length?t.join(` `):void 0}),v=(0,c.computed)(()=>({...a,id:f.value,required:r.required,"aria-invalid":h.value?!0:a[`aria-invalid`],"aria-describedby":_.value,"aria-label":a[`aria-label`]||(r.label?void 0:r.selectLabel)}));function b(e){return e?Array.isArray(e)?r.multiple?[...e]:e.slice(0,1):[e]:[]}function x(e,t){return e.name===t.name&&e.type===t.type&&e.size===t.size}function S(e){return!r.accept.trim()||r.accept.split(`,`).some(t=>{let n=t.trim().toLowerCase(),r=e.type.toLowerCase();return n?n.startsWith(`.`)?e.name.toLowerCase().endsWith(n):n.endsWith(`/*`)?r.startsWith(n.slice(0,-1)):r===n:!1})}function C(e){return e<1024?`${e} B`:e<1048576?`${(e/1024).toFixed(1)} KB`:`${(e/1048576).toFixed(2)} MB`}function w(e){let t=[];return{errors:t,validFiles:e.filter(e=>S(e)?r.maxFileSize&&e.size>r.maxFileSize?(t.push({code:`file-size`,file:e,message:`O arquivo "${e.name}" excede o tamanho máximo de ${C(r.maxFileSize)}.`}),!1):!0:(t.push({code:`file-type`,file:e,message:`O arquivo "${e.name}" não possui um tipo aceito.`}),!1))}}function T(e){let t=e.originalEvent;return Array.from(t.dataTransfer?.files??t.target?.files??[])}function E(e){return r.multiple?[...e]:e[0]??null}function D(){s.value&&(s.value.files=[...l.value])}function O(e,t){l.value=e,u.value=[],q(),(0,c.nextTick)(D);let n=E(e);i(`update:modelValue`,n),i(`change`,n),t===`select`&&i(`select`,[...e]),t===`clear`&&i(`clear`)}function k(e){let{errors:t,validFiles:n}=w(T(e)),a=r.multiple?[...l.value,...n.filter(e=>!l.value.some(t=>x(t,e)))]:n.slice(-1);if(r.maxFiles&&a.length>r.maxFiles){let e=a.slice(r.maxFiles);t.push(...e.map(e=>({code:`file-limit`,file:e,message:`O limite máximo é de ${r.maxFiles} arquivo(s).`}))),a=a.slice(0,r.maxFiles)}if(t.length?(u.value=t,i(`error`,t)):u.value=[],D(),n.length&&!A(a,l.value)){l.value=a,q(),(0,c.nextTick)(D);let e=E(a);i(`update:modelValue`,e),i(`change`,e),i(`select`,[...a])}}function A(e,t){return e.length===t.length&&e.every((e,n)=>x(e,t[n]))}function j(){g.value||s.value?.choose()}function W(e,t){if(g.value)return;let n=l.value[t];if(!n)return;e(t);let r=l.value.filter((e,n)=>n!==t);O(r,`remove`),i(`remove`,n,t),r.length||i(`clear`)}function G(){g.value||!l.value.length||O([],`clear`)}function K(e){if(!e.type.startsWith(`image/`)||typeof URL.createObjectURL!=`function`)return``;let t=d.get(e);if(t)return t;let n=URL.createObjectURL(e);return d.set(e,n),n}function q(){for(let[e,t]of d)l.value.includes(e)||(URL.revokeObjectURL(t),d.delete(e))}return(0,c.watch)(()=>r.modelValue,e=>{let t=b(e);A(t,l.value)||(l.value=t,u.value=[],q(),(0,c.nextTick)(D))}),(0,c.watch)(()=>r.multiple,()=>{let e=b(r.modelValue);l.value=e,q(),(0,c.nextTick)(D)}),(0,c.onMounted)(D),(0,c.onBeforeUnmount)(()=>{for(let e of d.values())URL.revokeObjectURL(e);d.clear()}),t({choose:j,clear:G}),(t,n)=>((0,c.openBlock)(),(0,c.createElementBlock)(`div`,M,[e.label?((0,c.openBlock)(),(0,c.createElementBlock)(`label`,{key:0,for:f.value,class:`text-xs font-bold text-secondary-800 dark:text-zinc-200`},[(0,c.createTextVNode)((0,c.toDisplayString)(e.label)+` `,1),e.required?((0,c.openBlock)(),(0,c.createElementBlock)(`span`,P,`*`)):(0,c.createCommentVNode)(``,!0)],8,N)):(0,c.createCommentVNode)(``,!0),(0,c.createVNode)((0,c.unref)(m.default),{ref_key:`fileUploadRef`,ref:s,mode:`advanced`,accept:e.accept||void 0,multiple:e.multiple,disabled:g.value,"custom-upload":!0,"show-upload-button":!1,"show-cancel-button":!1,pt:{root:{class:`top-file-upload__root w-full`},header:{class:`hidden`},input:v.value,content:{class:[`top-file-upload__dropzone min-h-[164px] rounded-[10px] border border-dashed p-4 transition-colors`,h.value?`border-red-600 bg-red-50 dark:border-red-400 dark:bg-red-950/20`:`border-secondary-400 bg-secondary-50 hover:border-primary-600 hover:bg-primary-50 dark:border-zinc-600 dark:bg-zinc-800 dark:hover:border-primary-400 dark:hover:bg-zinc-700`,g.value?`cursor-not-allowed opacity-60`:``].join(` `)}},onSelect:k},{content:(0,c.withCtx)(({removeFileCallback:r})=>[(0,c.createElementVNode)(`div`,F,[l.value.length?((0,c.openBlock)(),(0,c.createElementBlock)(`div`,I,[((0,c.openBlock)(!0),(0,c.createElementBlock)(c.Fragment,null,(0,c.renderList)(l.value,(i,a)=>((0,c.openBlock)(),(0,c.createElementBlock)(`div`,{key:`${i.name}-${i.size}-${i.lastModified}`,class:`flex min-w-0 items-center gap-3 rounded-[10px] border border-secondary-300 bg-white p-3 dark:border-zinc-600 dark:bg-zinc-900`},[(0,c.renderSlot)(t.$slots,`preview`,{file:i,index:a,url:K(i)},()=>[K(i)?((0,c.openBlock)(),(0,c.createElementBlock)(`img`,{key:0,src:K(i),alt:`Pré-visualização de ${i.name}`,class:`size-12 shrink-0 rounded-lg object-cover`},null,8,L)):((0,c.openBlock)(),(0,c.createElementBlock)(`span`,R,[...n[0]||=[(0,c.createElementVNode)(`i`,{class:`pi pi-file text-2xl`,"aria-hidden":`true`},null,-1)]]))]),(0,c.createElementVNode)(`div`,z,[(0,c.createElementVNode)(`p`,B,(0,c.toDisplayString)(i.name),1),(0,c.createElementVNode)(`span`,V,(0,c.toDisplayString)(C(i.size)),1)]),(0,c.createElementVNode)(`button`,{type:`button`,class:`flex size-8 shrink-0 items-center justify-center rounded-full border-0 bg-transparent p-0 text-red-600 transition-colors hover:bg-red-50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-red-500 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 dark:text-red-400 dark:hover:bg-red-950/40 dark:focus-visible:ring-offset-zinc-900`,"aria-label":`${e.removeLabel}: ${i.name}`,disabled:g.value,onClick:e=>W(r,a)},[...n[1]||=[(0,c.createElementVNode)(`i`,{class:`pi pi-times`,"aria-hidden":`true`},null,-1)]],8,H)]))),128)),e.multiple&&(!e.maxFiles||l.value.length<e.maxFiles)?((0,c.openBlock)(),(0,c.createBlock)(y,{key:0,label:e.selectLabel,icon:`pi pi-plus-circle`,outlined:``,disabled:e.disabled,loading:e.loading,class:`mt-1 px-3 py-2 text-xs`,onClick:j},null,8,[`label`,`disabled`,`loading`])):(0,c.createCommentVNode)(``,!0)])):(0,c.renderSlot)(t.$slots,`empty`,{choose:j,disabled:g.value},()=>[(0,c.createElementVNode)(`i`,{class:(0,c.normalizeClass)([e.loading?`pi pi-spin pi-spinner`:`pi pi-cloud-upload`,`text-4xl text-primary-800 dark:text-primary-300`]),"aria-hidden":`true`},null,2),(0,c.createElementVNode)(`p`,ee,(0,c.toDisplayString)(e.placeholder),1),(0,c.createVNode)(y,{label:e.selectLabel,icon:`pi pi-plus-circle`,disabled:e.disabled,loading:e.loading,class:`px-3 py-2 text-xs`,onClick:j},null,8,[`label`,`disabled`,`loading`])],void 0,0)])]),_:3},8,[`accept`,`multiple`,`disabled`,`pt`]),h.value?((0,c.openBlock)(),(0,c.createElementBlock)(`span`,{key:1,id:p.value,class:`text-[11px] text-red-600 dark:text-red-400`,role:`alert`},(0,c.toDisplayString)(h.value),9,U)):(0,c.createCommentVNode)(``,!0)]))}}),G={class:`top-input-text top-solutions-component flex w-full flex-col gap-1`},K=[`for`],q={key:0,"aria-hidden":`true`,class:`text-red-600 dark:text-red-400`},J=[`id`],Y=(0,c.defineComponent)({inheritAttrs:!1,__name:`TopInputText`,props:{modelValue:{default:``},label:{default:``},placeholder:{default:``},required:{type:Boolean,default:!1},error:{default:``},disabled:{type:Boolean,default:!1},readonly:{type:Boolean,default:!1}},emits:[`update:modelValue`],setup(e,{emit:t}){let n=e,r=t,i=(0,c.useAttrs)(),a=(0,c.useId)(),o=(0,c.computed)(()=>i.id===void 0||i.id===null||i.id===``?a:String(i.id)),s=(0,c.computed)(()=>`${o.value}-error`),l=(0,c.computed)(()=>{if(n.error)return!0;let e=i[`aria-invalid`];return typeof e==`boolean`||e===`true`||e===`false`||e===`grammar`||e===`spelling`?e:void 0}),u=(0,c.computed)(()=>{let e=i[`aria-describedby`],t=[typeof e==`string`?e:``,n.error?s.value:``].filter(Boolean);return t.length?t.join(` `):void 0});function d(e){r(`update:modelValue`,e??``)}return(t,n)=>((0,c.openBlock)(),(0,c.createElementBlock)(`div`,G,[e.label?((0,c.openBlock)(),(0,c.createElementBlock)(`label`,{key:0,for:o.value,class:`top-field-label text-xs font-bold`},[(0,c.createTextVNode)((0,c.toDisplayString)(e.label)+` `,1),e.required?((0,c.openBlock)(),(0,c.createElementBlock)(`span`,q,`*`)):(0,c.createCommentVNode)(``,!0)],8,K)):(0,c.createCommentVNode)(``,!0),(0,c.createVNode)((0,c.unref)(h.default),(0,c.mergeProps)(t.$attrs,{id:o.value,"model-value":e.modelValue,type:`text`,placeholder:e.placeholder,required:e.required,disabled:e.disabled,readonly:e.readonly,invalid:!!e.error,"aria-invalid":l.value,"aria-describedby":u.value,fluid:``,class:`top-input-text__control top-field-control h-[40px] w-full rounded-[10px] border px-3 py-2 text-xs read-only:cursor-default disabled:cursor-not-allowed`,"onUpdate:modelValue":d}),null,16,[`id`,`model-value`,`placeholder`,`required`,`disabled`,`readonly`,`invalid`,`aria-invalid`,`aria-describedby`]),e.error?((0,c.openBlock)(),(0,c.createElementBlock)(`span`,{key:1,id:s.value,class:`text-[11px] text-red-600 dark:text-red-400`,role:`alert`},(0,c.toDisplayString)(e.error),9,J)):(0,c.createCommentVNode)(``,!0)]))}}),X={class:`top-field-icon pointer-events-none absolute left-3 top-1/2 z-10 -translate-y-1/2`},Z={key:0,class:`pi pi-spin pi-spinner`},te={key:1,class:`pi pi-search`},Q={key:1,class:`flex items-center gap-1 !text-sm`},ne={class:`flex items-center gap-2 rounded-[9px] bg-primary-500 px-2 py-1 text-white`},re=[`onClick`],ie={class:`line-clamp-1 max-w-[300px] overflow-hidden text-ellipsis`},ae={key:1,class:`flex min-h-[100px] flex-col items-center justify-center gap-2 py-2`},oe={key:0,class:`text-xs font-medium text-primary-600`},se={key:2,class:`text-xs text-secondary-500`},ce={key:1},le={key:1,class:`flex items-center gap-2 font-semibold`},ue={key:1,class:`flex w-full min-w-0 items-start gap-2 overflow-hidden px-2 py-3 text-sm`,style:{"white-space":`normal`}},de=[`title`],fe={key:0,class:`top-select-option-prefix whitespace-nowrap font-bold text-primary-800 dark:text-primary-100`},pe={key:0,class:`rounded-sm bg-primary-200 p-0 font-bold text-black dark:bg-cyan-700 dark:text-white`},$={key:0,class:`rounded-sm bg-primary-200 p-0 font-bold text-black dark:bg-cyan-700 dark:text-white`},me=(0,c.defineComponent)({__name:`TopSelect`,props:{modelValue:{default:null},options:{default:()=>[]},loading:{type:Boolean,default:!1},disabled:{type:Boolean,default:!1},placeholder:{default:`Pesquisar...`},optionLabel:{type:[String,Function],default:`label`},optionKey:{default:`id`},optionPrefix:{default:``},showOptionPrefix:{type:Boolean,default:!1},showSelectedPrefix:{type:Boolean,default:!1},panelWidth:{default:null},scrollHeight:{default:`250px`},invalid:{type:Boolean,default:!1},showTooltip:{type:Boolean,default:!0},optionGroupLabel:{default:null},optionGroupChildren:{default:null},minQueryLength:{default:1},emptyMessage:{default:`Nenhum resultado encontrado.`},loadingMessage:{default:`Carregando...`},showLoadingMessage:{type:Boolean,default:!0},multiple:{type:Boolean,default:!1},forceSelection:{type:Boolean,default:!0},closeOnSelect:{type:Boolean,default:!1}},emits:[`update:modelValue`,`search`,`loadMore`,`clear`,`select`,`change`],setup(e,{expose:t,emit:n}){let r=e,i=n,a=(0,c.useSlots)(),o=g.default,s=(0,c.ref)(``),l=(0,c.ref)(!1),d=(0,c.ref)(null),f=`top-select-${Math.random().toString(36).slice(2)}`,p=null,m=(0,c.computed)({get:()=>r.modelValue,set:e=>i(`update:modelValue`,e)});function h(e,t){return e==null?``:String(typeof e==`object`?e[t]??``:e)}function _(e){return e==null?``:typeof r.optionLabel==`function`?r.optionLabel(e):h(e,r.optionLabel)}function v(e){return r.optionPrefix?h(e,r.optionPrefix):``}function y(e,t=r.showSelectedPrefix){let n=_(e),i=v(e);return t&&i?`${i} - ${n}`:n}function b(e){let t=s.value;if(!t)return[{text:e,highlighted:!1}];let n=t.replace(/[.*+?^${}()|[\]\\]/g,`\\$&`),r=RegExp(`(${n})`,`gi`);return e.split(r).filter(Boolean).map(e=>({text:e,highlighted:e.toLowerCase()===t.toLowerCase()}))}function x(){d.value?.hide?.()}function S(){typeof window>`u`||window.dispatchEvent(new CustomEvent(`top-select:close-others`,{detail:{instanceId:f}}))}function C(e){e.detail?.instanceId!==f&&x()}function w(){if(r.disabled||p){x();return}l.value=!0,S()}function T(){r.closeOnSelect&&(l.value=!1,x(),(0,c.nextTick)(x),p&&clearTimeout(p),p=setTimeout(()=>{x(),p=null},200))}return t({hideDropdown:x}),(0,c.onMounted)(()=>window.addEventListener(`top-select:close-others`,C)),(0,c.onBeforeUnmount)(()=>{window.removeEventListener(`top-select:close-others`,C),p&&clearTimeout(p)}),(0,c.watch)(()=>r.disabled,e=>{e&&(l.value=!1,x())}),(0,c.watch)(()=>r.options,()=>{l.value||x()}),(t,n)=>((0,c.openBlock)(),(0,c.createElementBlock)(`div`,{class:(0,c.normalizeClass)([`top-select top-solutions-component relative w-full`,{"pointer-events-none":e.disabled}]),onFocusin:w},[(0,c.createElementVNode)(`span`,X,[(0,c.renderSlot)(t.$slots,`icon`,{loading:e.loading},()=>[e.loading?((0,c.openBlock)(),(0,c.createElementBlock)(`i`,Z)):((0,c.openBlock)(),(0,c.createElementBlock)(`i`,te))])]),(0,c.createVNode)((0,c.unref)(o),{ref_key:`autocompleteRef`,ref:d,modelValue:m.value,"onUpdate:modelValue":n[0]||=e=>m.value=e,"option-group-label":e.optionGroupLabel??void 0,"option-group-children":e.optionGroupChildren??void 0,suggestions:e.options,"data-key":e.optionKey,"option-label":e=>y(e),placeholder:e.placeholder,multiple:e.multiple,"min-length":e.minQueryLength,disabled:e.disabled,delay:500,"show-clear":!e.multiple&&!e.disabled,dropdown:``,"dropdown-mode":`current`,"complete-on-focus":!1,invalid:e.invalid,fluid:``,"force-selection":e.forceSelection,"input-class":`text-xs`,"virtual-scroller-options":{lazy:!0,onLazyLoad:e=>i(`loadMore`,e),itemSize:84,showLoader:!0,scrollHeight:e.scrollHeight},pt:{root:{class:[`w-full text-xs`,e.multiple?`h-auto`:`h-[40px]`].join(` `)},pcInputText:{root:{class:`top-field-control w-full h-auto text-xs border rounded-[10px] !pl-9 min-h-[36px]`}},input:{class:[`top-field-control w-full h-auto text-xs`,e.multiple?`border-0 py-1 !shadow-none outline-none ring-0`:`border rounded-[10px] !pl-9 min-h-[36px]`].join(` `)},inputMultiple:{class:`top-field-control rounded-[10px] pl-9 min-h-[40px]`},inputChip:{class:`py-0`},token:{class:`bg-primary-100 text-primary-900 rounded-md gap-2 px-2 my-1 dark:bg-primary-900 dark:text-primary-100`},removeTokenIcon:{class:`text-primary-900 w-3 h-3 cursor-pointer dark:text-primary-100`},panel:{class:`top-select-panel top-solutions-component max-w-[85vw] overflow-hidden h-fit shadow-xl`},listContainer:{class:`max-w-full overflow-x-hidden`,style:{overflowX:`hidden`,maxWidth:e.panelWidth??`85vw`,...e.panelWidth?{width:e.panelWidth}:{}}},list:{class:`max-w-full overflow-x-hidden`},option:{class:`max-w-full overflow-hidden min-h-[84px]`},placeholder:{class:`!text-xs`}},"search-message":` `,onClear:n[1]||=e=>{s.value=``,i(`clear`)},onItemSelect:n[2]||=e=>{s.value=``,i(`select`,e),T()},onComplete:n[3]||=t=>{if(e.disabled){x();return}s.value=t.query??``,S(),i(`search`,{...t,query:s.value})},onChange:n[4]||=e=>i(`change`,e)},(0,c.createSlots)({chip:(0,c.withCtx)(e=>[(0,c.unref)(a).chip?(0,c.renderSlot)(t.$slots,`chip`,(0,c.normalizeProps)((0,c.guardReactiveProps)(e)),void 0,void 0,0):((0,c.openBlock)(),(0,c.createElementBlock)(`div`,Q,[(0,c.createElementVNode)(`div`,ne,[(0,c.createElementVNode)(`i`,{class:`pi pi-times-circle shrink-0 cursor-pointer rounded-full hover:bg-primary-800`,onClick:t=>e.removeCallback(t)},null,8,re),(0,c.withDirectives)(((0,c.openBlock)(),(0,c.createElementBlock)(`span`,ie,[(0,c.createTextVNode)((0,c.toDisplayString)(y(e.value)),1)])),[[(0,c.unref)(u.default),y(e.value),void 0,{top:!0}]])])]))]),empty:(0,c.withCtx)(()=>[(0,c.unref)(a).empty?(0,c.renderSlot)(t.$slots,`empty`,{},void 0,void 0,0):e.loading?((0,c.openBlock)(),(0,c.createElementBlock)(`div`,ae,[n[5]||=(0,c.createElementVNode)(`span`,{class:`pi pi-spin pi-spinner text-2xl text-primary-600`},null,-1),e.showLoadingMessage?((0,c.openBlock)(),(0,c.createElementBlock)(`span`,oe,(0,c.toDisplayString)(e.loadingMessage),1)):(0,c.createCommentVNode)(``,!0)])):((0,c.openBlock)(),(0,c.createElementBlock)(`span`,se,(0,c.toDisplayString)(e.emptyMessage),1))]),"selected-item":(0,c.withCtx)(e=>[(0,c.unref)(a)[`selected-item`]?(0,c.renderSlot)(t.$slots,`selected-item`,(0,c.normalizeProps)((0,c.guardReactiveProps)(e)),void 0,void 0,0):e.item?((0,c.openBlock)(),(0,c.createElementBlock)(`span`,ce,(0,c.toDisplayString)(y(e.item)),1)):(0,c.createCommentVNode)(``,!0)]),optiongroup:(0,c.withCtx)(n=>[(0,c.unref)(a)[`option-group`]?(0,c.renderSlot)(t.$slots,`option-group`,(0,c.normalizeProps)((0,c.guardReactiveProps)(n)),void 0,void 0,0):((0,c.openBlock)(),(0,c.createElementBlock)(`div`,le,[n.option.icon?((0,c.openBlock)(),(0,c.createElementBlock)(`i`,{key:0,class:(0,c.normalizeClass)(n.option.icon)},null,2)):(0,c.createCommentVNode)(``,!0),(0,c.createElementVNode)(`span`,null,(0,c.toDisplayString)(n.option[e.optionGroupLabel??`label`]),1)]))]),option:(0,c.withCtx)(r=>[(0,c.unref)(a).option?(0,c.renderSlot)(t.$slots,`option`,(0,c.mergeProps)(r,{label:_(r.option),prefix:v(r.option),query:s.value}),void 0,void 0,0):(0,c.withDirectives)(((0,c.openBlock)(),(0,c.createElementBlock)(`div`,ue,[(0,c.createElementVNode)(`span`,{class:`top-select-option-label line-clamp-2 min-w-0 flex-1 text-secondary-700 dark:text-zinc-200`,title:_(r.option)},[e.showOptionPrefix&&v(r.option)?((0,c.openBlock)(),(0,c.createElementBlock)(`span`,fe,[((0,c.openBlock)(!0),(0,c.createElementBlock)(c.Fragment,null,(0,c.renderList)(b(v(r.option)),(e,t)=>((0,c.openBlock)(),(0,c.createElementBlock)(c.Fragment,{key:t},[e.highlighted?((0,c.openBlock)(),(0,c.createElementBlock)(`mark`,pe,(0,c.toDisplayString)(e.text),1)):((0,c.openBlock)(),(0,c.createElementBlock)(c.Fragment,{key:1},[(0,c.createTextVNode)((0,c.toDisplayString)(e.text),1)],64))],64))),128)),n[6]||=(0,c.createElementVNode)(`span`,{class:`font-bold text-secondary-500 dark:text-zinc-400`},`\xA0-\xA0`,-1)])):(0,c.createCommentVNode)(``,!0),((0,c.openBlock)(!0),(0,c.createElementBlock)(c.Fragment,null,(0,c.renderList)(b(_(r.option)),(e,t)=>((0,c.openBlock)(),(0,c.createElementBlock)(c.Fragment,{key:t},[e.highlighted?((0,c.openBlock)(),(0,c.createElementBlock)(`mark`,$,(0,c.toDisplayString)(e.text),1)):((0,c.openBlock)(),(0,c.createElementBlock)(c.Fragment,{key:1},[(0,c.createTextVNode)((0,c.toDisplayString)(e.text),1)],64))],64))),128))],8,de)])),[[(0,c.unref)(u.default),e.showTooltip?_(r.option):null,void 0,{top:!0}]])]),_:2},[(0,c.unref)(a).footer?{name:`footer`,fn:(0,c.withCtx)(e=>[(0,c.renderSlot)(t.$slots,`footer`,(0,c.normalizeProps)((0,c.guardReactiveProps)(e)))]),key:`0`}:void 0]),1032,[`modelValue`,`option-group-label`,`option-group-children`,`suggestions`,`data-key`,`option-label`,`placeholder`,`multiple`,`min-length`,`disabled`,`show-clear`,`invalid`,`force-selection`,`virtual-scroller-options`,`pt`])],34))}}),he={class:`top-toast__content`},ge={class:`top-toast__detail`},_e=[`onClick`],ve={key:0,class:`top-toast__footer`},ye=(0,c.defineComponent)({__name:`TopToast`,props:{baseZIndex:{default:3e4}},setup(e){function t(e){return e.data?.footer}function n(e){return e.data?.action}function r(e){n(e)?.onClick?.()}function i(e){return t(e)!==void 0}function a(e){return!!n(e)}function o(e,t){return`top-toast__${t}--${e.severity??`info`}`}return(s,l)=>((0,c.openBlock)(),(0,c.createBlock)((0,c.unref)(_.default),{position:`top-right`,"base-z-index":e.baseZIndex},{message:(0,c.withCtx)(e=>[(0,c.createElementVNode)(`div`,he,[(0,c.createElementVNode)(`div`,{class:(0,c.normalizeClass)([`top-toast__summary`,o(e.message,`summary`)])},(0,c.toDisplayString)(e.message.summary),3),(0,c.createElementVNode)(`div`,ge,(0,c.toDisplayString)(e.message.detail),1),a(e.message)?(0,c.renderSlot)(s.$slots,`action`,{action:n(e.message),message:e.message,run:()=>r(e.message)},()=>[n(e.message)?((0,c.openBlock)(),(0,c.createElementBlock)(`button`,{key:0,class:(0,c.normalizeClass)([`top-toast__action`,o(e.message,`action`)]),type:`button`,onClick:t=>r(e.message)},[n(e.message)?.icon?((0,c.openBlock)(),(0,c.createElementBlock)(`i`,{key:0,class:(0,c.normalizeClass)(n(e.message)?.icon),"aria-hidden":`true`},null,2)):(0,c.createCommentVNode)(``,!0),(0,c.createTextVNode)(` `+(0,c.toDisplayString)(n(e.message)?.label),1)],10,_e)):(0,c.createCommentVNode)(``,!0)],void 0,0):(0,c.createCommentVNode)(``,!0),i(e.message)?(0,c.renderSlot)(s.$slots,`footer`,{message:e.message,footer:t(e.message)},()=>[t(e.message)===void 0?(0,c.createCommentVNode)(``,!0):((0,c.openBlock)(),(0,c.createElementBlock)(`div`,ve,(0,c.toDisplayString)(t(e.message)),1))],void 0,1):(0,c.createCommentVNode)(``,!0)])]),_:3},8,[`base-z-index`]))}});Object.defineProperty(exports,"a",{enumerable:!0,get:function(){return j}}),Object.defineProperty(exports,"c",{enumerable:!0,get:function(){return y}}),Object.defineProperty(exports,"i",{enumerable:!0,get:function(){return W}}),Object.defineProperty(exports,"l",{enumerable:!0,get:function(){return s}}),Object.defineProperty(exports,"n",{enumerable:!0,get:function(){return me}}),Object.defineProperty(exports,"o",{enumerable:!0,get:function(){return E}}),Object.defineProperty(exports,"r",{enumerable:!0,get:function(){return Y}}),Object.defineProperty(exports,"s",{enumerable:!0,get:function(){return b}}),Object.defineProperty(exports,"t",{enumerable:!0,get:function(){return ye}});
|
|
2
|
+
//# sourceMappingURL=TopToast-BjKkubxq.cjs.map
|