v-sistec-features 1.31.13 → 1.31.14
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/v-sistec-features.css +1 -1
- package/dist/vDataAgenda.d.ts +45 -9
- package/dist/vDataAgenda.js +1877 -1880
- package/package.json +1 -1
- package/src/DataAgenda/VDataAgenda.vue +233 -77
- package/src/DataAgenda/components/AgendaMatrix.vue +1 -0
- package/src/DataAgenda/components/AgendaMatrixBase.vue +357 -140
- package/src/DataAgenda/components/AgendaMatrixUnico.vue +1 -0
- package/src/DataAgenda/components/AgendaTabelaHorario.vue +489 -316
- package/src/DataAgenda/components/AgendaVueCal.vue +1 -0
package/package.json
CHANGED
|
@@ -8,6 +8,7 @@ recursos atualmente em exibição no modelo ativo.
|
|
|
8
8
|
========
|
|
9
9
|
-->
|
|
10
10
|
<script setup lang="ts">
|
|
11
|
+
defineSlots<{ [key: string]: any }>();
|
|
11
12
|
import { ref, computed, onMounted, provide } from 'vue';
|
|
12
13
|
import { VueCal } from 'vue-cal';
|
|
13
14
|
import 'vue-cal/style.css';
|
|
@@ -55,6 +56,10 @@ const menuAberto = ref(true);
|
|
|
55
56
|
const calendarioMiniRef = ref<any>(null);
|
|
56
57
|
const modeloAtivoRef = ref<any>(null);
|
|
57
58
|
|
|
59
|
+
const ehModoGradeSemanal = computed(() =>
|
|
60
|
+
props.modoLayout === 'tabela' || props.modoLayout === 'tabela-horario'
|
|
61
|
+
);
|
|
62
|
+
|
|
58
63
|
const componenteModeloAtivo = computed(() => {
|
|
59
64
|
if (props.modoLayout === 'calendario') return AgendaVueCal;
|
|
60
65
|
if (props.modoLayout === 'tabela-horario') return AgendaTabelaHorario;
|
|
@@ -98,7 +103,7 @@ const conjuntoDatasDesabilitadas = computed(() => new Set<string>(datasDesabilit
|
|
|
98
103
|
|
|
99
104
|
const datasVisiveisNaSemana = computed(() => {
|
|
100
105
|
const visiveis = new Set<string>();
|
|
101
|
-
if (
|
|
106
|
+
if (!ehModoGradeSemanal.value || !dataSelecionada.value || !agendaSelecionada.value) {
|
|
102
107
|
return visiveis;
|
|
103
108
|
}
|
|
104
109
|
|
|
@@ -124,13 +129,13 @@ const datasVisiveisNaSemana = computed(() => {
|
|
|
124
129
|
|
|
125
130
|
const ehDiaBloqueadoNoMini = (cell: any): boolean => {
|
|
126
131
|
const data = obterDataDaCelula(cell);
|
|
127
|
-
if (!data ||
|
|
132
|
+
if (!data || !ehModoGradeSemanal.value) return false;
|
|
128
133
|
return conjuntoDatasDesabilitadas.value.has(formatarDataIso(data));
|
|
129
134
|
};
|
|
130
135
|
|
|
131
136
|
const ehDiaVisivelNaGrade = (cell: any): boolean => {
|
|
132
137
|
const data = obterDataDaCelula(cell);
|
|
133
|
-
if (!data ||
|
|
138
|
+
if (!data || !ehModoGradeSemanal.value) return false;
|
|
134
139
|
return datasVisiveisNaSemana.value.has(formatarDataIso(data));
|
|
135
140
|
};
|
|
136
141
|
|
|
@@ -153,62 +158,38 @@ const mudarVisao = (novaVisao: string) => {
|
|
|
153
158
|
<div>
|
|
154
159
|
<div class="painel-agenda-unificado">
|
|
155
160
|
<header class="painel-header-topo">
|
|
156
|
-
<HeaderCalendario
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
:
|
|
161
|
-
/>
|
|
162
|
-
|
|
163
|
-
<HeaderTabela
|
|
164
|
-
v-else
|
|
165
|
-
:alternarMenu="alternarMenu"
|
|
166
|
-
:irParaHoje="irParaHoje"
|
|
167
|
-
:ocultarSeletorAgenda="Boolean(props.idRecursoUnico)"
|
|
168
|
-
/>
|
|
161
|
+
<HeaderCalendario v-if="props.modoLayout === 'calendario'" :alternarMenu="alternarMenu" :irParaHoje="irParaHoje"
|
|
162
|
+
:mudarVisao="mudarVisao" />
|
|
163
|
+
|
|
164
|
+
<HeaderTabela v-else :alternarMenu="alternarMenu" :irParaHoje="irParaHoje"
|
|
165
|
+
:ocultarSeletorAgenda="Boolean(props.idRecursoUnico)" />
|
|
169
166
|
</header>
|
|
170
167
|
|
|
171
168
|
<div class="corpo-principal">
|
|
172
169
|
<aside class="barra-lateral" :class="{ 'oculta': !menuAberto }">
|
|
173
170
|
<div class="conteudo-lateral-fixo">
|
|
174
171
|
<div class="secao-mini-cal">
|
|
175
|
-
<vue-cal
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
:
|
|
179
|
-
|
|
180
|
-
active-view="month"
|
|
181
|
-
:views="['month']"
|
|
182
|
-
:time="false"
|
|
183
|
-
hide-view-selector
|
|
184
|
-
:click-to-navigate="false"
|
|
185
|
-
locale="pt-br"
|
|
186
|
-
:disable-days="props.modoLayout === 'tabela-horario' ? datasDesabilitadas : []"
|
|
187
|
-
v-model:selected-date="dataSelecionada"
|
|
188
|
-
:view-date="dataVisao"
|
|
189
|
-
@update:selected-date="dataVisao = $event"
|
|
190
|
-
>
|
|
172
|
+
<vue-cal ref="calendarioMiniRef" class="calendario-mini vuecal--blue-theme"
|
|
173
|
+
:class="{ 'modo-mini-tabela-horario': ehModoGradeSemanal }" small active-view="month" :views="['month']"
|
|
174
|
+
:time="false" hide-view-selector :click-to-navigate="false" locale="pt-br"
|
|
175
|
+
:disable-days="ehModoGradeSemanal ? datasDesabilitadas : []" v-model:selected-date="dataSelecionada"
|
|
176
|
+
:view-date="dataVisao" @update:selected-date="dataVisao = $event">
|
|
191
177
|
<template #views-bar></template>
|
|
192
178
|
<template #today-button></template>
|
|
193
179
|
|
|
194
180
|
<template #cell-content="{ cell }">
|
|
195
|
-
<div
|
|
196
|
-
|
|
197
|
-
:
|
|
198
|
-
|
|
199
|
-
'dia-coluna-inativa': ehDiaBloqueadoNoMini(cell)
|
|
200
|
-
}"
|
|
201
|
-
@mousedown.stop="
|
|
181
|
+
<div class="vuecal__cell-date" :class="{
|
|
182
|
+
'dia-semana-visivel': ehDiaVisivelNaGrade(cell),
|
|
183
|
+
'dia-coluna-inativa': ehDiaBloqueadoNoMini(cell)
|
|
184
|
+
}" @mousedown.stop="
|
|
202
185
|
(ehDiaVisivelNaGrade(cell) || ehDiaBloqueadoNoMini(cell))
|
|
203
186
|
? $event.preventDefault()
|
|
204
187
|
: null
|
|
205
|
-
|
|
206
|
-
@click.stop="
|
|
188
|
+
" @click.stop="
|
|
207
189
|
(!ehDiaVisivelNaGrade(cell) && !ehDiaBloqueadoNoMini(cell))
|
|
208
190
|
? (dataSelecionada = obterDataDaCelula(cell) || dataSelecionada, dataVisao = obterDataDaCelula(cell) || dataVisao)
|
|
209
191
|
: null
|
|
210
|
-
|
|
211
|
-
>
|
|
192
|
+
">
|
|
212
193
|
{{ cell.content }}
|
|
213
194
|
</div>
|
|
214
195
|
</template>
|
|
@@ -218,12 +199,8 @@ const mudarVisao = (novaVisao: string) => {
|
|
|
218
199
|
</aside>
|
|
219
200
|
|
|
220
201
|
<main class="area-calendario">
|
|
221
|
-
<component
|
|
222
|
-
|
|
223
|
-
ref="modeloAtivoRef"
|
|
224
|
-
v-bind="propriedadesModeloAtivo"
|
|
225
|
-
@before-save="$emit('before-save', $event)"
|
|
226
|
-
>
|
|
202
|
+
<component :is="componenteModeloAtivo" ref="modeloAtivoRef" v-bind="propriedadesModeloAtivo"
|
|
203
|
+
@before-save="$emit('before-save', $event)">
|
|
227
204
|
<template v-for="(_, nomeSlot) in $slots" :key="nomeSlot" #[nomeSlot]="slotProps">
|
|
228
205
|
<slot :name="nomeSlot" v-bind="slotProps ?? {}"></slot>
|
|
229
206
|
</template>
|
|
@@ -239,32 +216,211 @@ const mudarVisao = (novaVisao: string) => {
|
|
|
239
216
|
</style>
|
|
240
217
|
|
|
241
218
|
<style scoped>
|
|
242
|
-
.painel-agenda-unificado {
|
|
243
|
-
|
|
244
|
-
|
|
245
|
-
|
|
246
|
-
|
|
247
|
-
|
|
248
|
-
|
|
249
|
-
|
|
250
|
-
|
|
251
|
-
|
|
252
|
-
|
|
253
|
-
|
|
254
|
-
:
|
|
255
|
-
|
|
256
|
-
|
|
257
|
-
:
|
|
258
|
-
|
|
259
|
-
|
|
260
|
-
:
|
|
261
|
-
|
|
262
|
-
|
|
263
|
-
|
|
264
|
-
|
|
265
|
-
:
|
|
266
|
-
|
|
267
|
-
:
|
|
268
|
-
|
|
269
|
-
|
|
219
|
+
.painel-agenda-unificado {
|
|
220
|
+
background: var(--bg-primary);
|
|
221
|
+
border-radius: 16px;
|
|
222
|
+
box-shadow: var(--shadow-float);
|
|
223
|
+
border: 1px solid var(--border-light);
|
|
224
|
+
flex-grow: 1;
|
|
225
|
+
display: flex;
|
|
226
|
+
flex-direction: column;
|
|
227
|
+
overflow: hidden;
|
|
228
|
+
}
|
|
229
|
+
|
|
230
|
+
.painel-header-topo {
|
|
231
|
+
height: 60px;
|
|
232
|
+
background-color: var(--bg-primary);
|
|
233
|
+
border-bottom: 1px solid var(--border-light);
|
|
234
|
+
display: flex;
|
|
235
|
+
align-items: center;
|
|
236
|
+
justify-content: space-between;
|
|
237
|
+
padding: 0 20px;
|
|
238
|
+
flex-shrink: 0;
|
|
239
|
+
}
|
|
240
|
+
|
|
241
|
+
.corpo-principal {
|
|
242
|
+
display: flex;
|
|
243
|
+
flex-grow: 1;
|
|
244
|
+
overflow: hidden;
|
|
245
|
+
}
|
|
246
|
+
|
|
247
|
+
.barra-lateral {
|
|
248
|
+
width: 300px;
|
|
249
|
+
background-color: var(--bg-primary);
|
|
250
|
+
border-right: 1px solid var(--border-light);
|
|
251
|
+
transition: width 0.3s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.2s;
|
|
252
|
+
overflow: hidden;
|
|
253
|
+
flex-shrink: 0;
|
|
254
|
+
}
|
|
255
|
+
|
|
256
|
+
.barra-lateral.oculta {
|
|
257
|
+
width: 0;
|
|
258
|
+
border-right: none;
|
|
259
|
+
opacity: 0;
|
|
260
|
+
}
|
|
261
|
+
|
|
262
|
+
.conteudo-lateral-fixo {
|
|
263
|
+
width: 300px;
|
|
264
|
+
padding: 15px;
|
|
265
|
+
}
|
|
266
|
+
|
|
267
|
+
.secao-mini-cal {
|
|
268
|
+
width: 100%;
|
|
269
|
+
}
|
|
270
|
+
|
|
271
|
+
.area-calendario {
|
|
272
|
+
flex: 1;
|
|
273
|
+
min-width: 0;
|
|
274
|
+
/* Fundamental para evitar o vazamento horizontal no layout principal */
|
|
275
|
+
min-height: 0;
|
|
276
|
+
overflow: hidden;
|
|
277
|
+
background-color: var(--bg-primary);
|
|
278
|
+
display: flex;
|
|
279
|
+
flex-direction: column;
|
|
280
|
+
}
|
|
281
|
+
|
|
282
|
+
.calendario-mini {
|
|
283
|
+
border: none !important;
|
|
284
|
+
box-shadow: none !important;
|
|
285
|
+
background-color: transparent !important;
|
|
286
|
+
}
|
|
287
|
+
|
|
288
|
+
:deep(.calendario-mini .vuecal__header),
|
|
289
|
+
:deep(.calendario-mini .vuecal__title-bar) {
|
|
290
|
+
background-color: var(--bg-primary) !important;
|
|
291
|
+
border: none !important;
|
|
292
|
+
padding-bottom: 5px;
|
|
293
|
+
}
|
|
294
|
+
|
|
295
|
+
:deep(.calendario-mini .vuecal__title),
|
|
296
|
+
:deep(.calendario-mini .vuecal__arrow) {
|
|
297
|
+
font-size: 1rem;
|
|
298
|
+
font-weight: 600;
|
|
299
|
+
color: var(--color-brand) !important;
|
|
300
|
+
background: transparent !important;
|
|
301
|
+
}
|
|
302
|
+
|
|
303
|
+
:deep(.calendario-mini .vuecal__weekdays-headings) {
|
|
304
|
+
background-color: var(--bg-primary) !important;
|
|
305
|
+
border-bottom: 1px solid var(--border-light) !important;
|
|
306
|
+
}
|
|
307
|
+
|
|
308
|
+
:deep(.calendario-mini .vuecal__heading),
|
|
309
|
+
:deep(.calendario-mini .vuecal__weekday),
|
|
310
|
+
:deep(.calendario-mini .vuecal__weekday-name),
|
|
311
|
+
:deep(.calendario-mini .vuecal__heading *) {
|
|
312
|
+
background-color: var(--bg-primary) !important;
|
|
313
|
+
color: var(--text-secondary) !important;
|
|
314
|
+
font-weight: 600 !important;
|
|
315
|
+
border: none !important;
|
|
316
|
+
padding-bottom: 4px;
|
|
317
|
+
}
|
|
318
|
+
|
|
319
|
+
:deep(.calendario-mini .vuecal__cell) {
|
|
320
|
+
border: none !important;
|
|
321
|
+
background-color: transparent !important;
|
|
322
|
+
height: 32px !important;
|
|
323
|
+
min-height: 32px !important;
|
|
324
|
+
aspect-ratio: auto !important;
|
|
325
|
+
}
|
|
326
|
+
|
|
327
|
+
:deep(.calendario-mini .vuecal__cell::before) {
|
|
328
|
+
display: none !important;
|
|
329
|
+
content: none !important;
|
|
330
|
+
}
|
|
331
|
+
|
|
332
|
+
:deep(.calendario-mini .vuecal__cell-content) {
|
|
333
|
+
height: 32px !important;
|
|
334
|
+
min-height: 32px !important;
|
|
335
|
+
padding: 0 !important;
|
|
336
|
+
margin: 0 !important;
|
|
337
|
+
justify-content: center !important;
|
|
338
|
+
align-items: center !important;
|
|
339
|
+
width: 100% !important;
|
|
340
|
+
}
|
|
341
|
+
|
|
342
|
+
:deep(.calendario-mini .vuecal__cell-date) {
|
|
343
|
+
width: 26px !important;
|
|
344
|
+
height: 26px !important;
|
|
345
|
+
font-size: 12px !important;
|
|
346
|
+
line-height: 26px !important;
|
|
347
|
+
padding: 0 !important;
|
|
348
|
+
display: flex !important;
|
|
349
|
+
align-items: center !important;
|
|
350
|
+
justify-content: center !important;
|
|
351
|
+
margin: 0 auto !important;
|
|
352
|
+
border-radius: 50% !important;
|
|
353
|
+
border: 2px solid transparent !important;
|
|
354
|
+
box-sizing: border-box !important;
|
|
355
|
+
transition: all 0.2s ease;
|
|
356
|
+
cursor: pointer;
|
|
357
|
+
background-color: transparent !important;
|
|
358
|
+
color: var(--text-primary);
|
|
359
|
+
}
|
|
360
|
+
|
|
361
|
+
:deep(.calendario-mini .vuecal__cell--selected),
|
|
362
|
+
:deep(.calendario-mini .vuecal__cell--today) {
|
|
363
|
+
background-color: transparent !important;
|
|
364
|
+
}
|
|
365
|
+
|
|
366
|
+
:deep(.calendario-mini:not(.modo-mini-tabela-horario) .vuecal__cell--selected .vuecal__cell-date) {
|
|
367
|
+
background-color: var(--color-brand) !important;
|
|
368
|
+
color: var(--text-inverse) !important;
|
|
369
|
+
border-color: var(--color-brand) !important;
|
|
370
|
+
}
|
|
371
|
+
|
|
372
|
+
:deep(.calendario-mini .vuecal__cell--today:not(.vuecal__cell--selected) .vuecal__cell-date:not(.dia-semana-visivel)) {
|
|
373
|
+
background-color: var(--color-brand-light) !important;
|
|
374
|
+
border-color: transparent !important;
|
|
375
|
+
color: var(--color-brand) !important;
|
|
376
|
+
}
|
|
377
|
+
|
|
378
|
+
:deep(.vuecal__body) {
|
|
379
|
+
padding: 0;
|
|
380
|
+
gap: 0;
|
|
381
|
+
margin: 0;
|
|
382
|
+
}
|
|
383
|
+
|
|
384
|
+
:deep(.calendario-mini .vuecal__views-bar) {
|
|
385
|
+
display: none !important;
|
|
386
|
+
}
|
|
387
|
+
|
|
388
|
+
:deep(.calendario-mini .vuecal__nav--next),
|
|
389
|
+
:deep(.calendario-mini .vuecal__nav--prev) {
|
|
390
|
+
color: var(--text-primary) !important;
|
|
391
|
+
}
|
|
392
|
+
|
|
393
|
+
:deep(.calendario-mini .vuecal__body) {
|
|
394
|
+
height: 0% !important;
|
|
395
|
+
}
|
|
396
|
+
|
|
397
|
+
:deep(.calendario-mini .vuecal__scrollable-wrap) {
|
|
398
|
+
background-color: transparent !important;
|
|
399
|
+
}
|
|
400
|
+
|
|
401
|
+
:deep(.calendario-mini.modo-mini-tabela-horario .vuecal__cell--disabled) {
|
|
402
|
+
pointer-events: none !important;
|
|
403
|
+
cursor: not-allowed !important;
|
|
404
|
+
}
|
|
405
|
+
|
|
406
|
+
:deep(.calendario-mini.modo-mini-tabela-horario .vuecal__cell-date.dia-coluna-inativa) {
|
|
407
|
+
opacity: 0.22 !important;
|
|
408
|
+
color: var(--text-secondary) !important;
|
|
409
|
+
background-color: transparent !important;
|
|
410
|
+
border-color: transparent !important;
|
|
411
|
+
cursor: not-allowed !important;
|
|
412
|
+
pointer-events: none !important;
|
|
413
|
+
text-decoration: line-through;
|
|
414
|
+
}
|
|
415
|
+
|
|
416
|
+
:deep(.calendario-mini.modo-mini-tabela-horario .vuecal__cell-date.dia-semana-visivel) {
|
|
417
|
+
background-color: var(--color-brand) !important;
|
|
418
|
+
color: var(--text-inverse) !important;
|
|
419
|
+
border-color: var(--color-brand) !important;
|
|
420
|
+
font-weight: 700 !important;
|
|
421
|
+
width: 92% !important;
|
|
422
|
+
border-radius: 6px !important;
|
|
423
|
+
cursor: default !important;
|
|
424
|
+
box-shadow: var(--shadow-sm);
|
|
425
|
+
}
|
|
270
426
|
</style>
|
|
@@ -7,6 +7,7 @@ de recursos atualmente em exibição (já filtrada).
|
|
|
7
7
|
========
|
|
8
8
|
-->
|
|
9
9
|
<script setup lang="ts">
|
|
10
|
+
defineSlots<{ [key: string]: any }>();
|
|
10
11
|
import { computed, watch, ref, inject } from 'vue';
|
|
11
12
|
import { useAgenda } from '../composables/useAgenda';
|
|
12
13
|
import AgendaMatrixBase from './AgendaMatrixBase.vue';
|