@nexdom/uimed-vue 2.0.0-beta.4 → 2.0.0-beta.40
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/AGENTS.md +124 -16
- package/README.md +1 -1
- package/dist/components.d.ts +967 -82
- package/dist/components.js +2173 -269
- package/dist/composables.d.ts +216 -4
- package/dist/composables.js +141 -4
- package/dist/index.d.ts +3 -15
- package/dist/index.js +22 -13
- package/dist/locale-CM4o8cD_.js +12 -0
- package/dist/plugins.d.ts +18 -7
- package/dist/plugins.js +72 -4
- package/dist/styles/fonts/UnimedSlab-Regular.woff2 +0 -0
- package/dist/styles/fonts/fonts.css +5 -0
- package/dist/styles/settings.scss +6 -0
- package/dist/types-CjaJ2WAC.d.ts +60 -0
- package/dist/unit-test.d.ts +2 -3
- package/dist/unit-test.js +3 -1
- package/dist/use-dialog-Ck2_ZW7T.js +124 -0
- package/package.json +8 -10
- package/dist/types-BPXXtbmW.d.ts +0 -5
- package/dist/use-toast-CACuYhK_.js +0 -53
package/dist/components.js
CHANGED
|
@@ -1,7 +1,11 @@
|
|
|
1
|
-
import { r as
|
|
2
|
-
import {
|
|
3
|
-
import {
|
|
4
|
-
import {
|
|
1
|
+
import { a as messages, n as owners$1, r as requests, s as useVuetifyColor } from "./use-dialog-Ck2_ZW7T.js";
|
|
2
|
+
import { useLocale, useMask } from "vuetify";
|
|
3
|
+
import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createSlots, createTextVNode, createVNode, defineComponent, guardReactiveProps, inject, isRef, mergeModels, mergeProps, nextTick, normalizeClass, normalizeProps, onMounted, onScopeDispose, onUnmounted, openBlock, provide, readonly, ref, renderList, renderSlot, resolveDynamicComponent, shallowRef, toDisplayString, toValue, unref, useId, useModel, useSlots, useTemplateRef, watch, withCtx, withKeys, withModifiers } from "vue";
|
|
4
|
+
import { pt } from "vuetify/locale";
|
|
5
|
+
import { VApp, VAppBar, VAppBarNavIcon, VAppBarTitle, VAutocomplete, VAvatar, VBadge, VBtn, VCard, VCardActions, VCardText, VCheckboxBtn, VCol, VCombobox, VContainer, VDataIterator, VDatePicker, VDialog, VDivider, VEmptyState, VExpansionPanel, VExpansionPanelText, VExpansionPanelTitle, VExpansionPanels, VFooter, VForm, VIcon, VIconBtn, VImg, VList, VListGroup, VListItem, VListItemAction, VListSubheader, VLocaleProvider, VMain, VMenu, VNavigationDrawer, VPagination, VProgressCircular, VProgressLinear, VRow, VSkeletonLoader, VSnackbarQueue, VTable, VTextField, VTimePicker } from "vuetify/components";
|
|
6
|
+
import { formatDateTime, isEmail, isEmpty, isPhone, isUrl } from "@nexdom/shared/utils";
|
|
7
|
+
import { VHighlight } from "vuetify/labs/VHighlight";
|
|
8
|
+
import { RouterLink } from "vue-router";
|
|
5
9
|
//#region src/composables/navigation/use-route-props.ts
|
|
6
10
|
function useRouteProps(route) {
|
|
7
11
|
return computed(() => routeToProps(route));
|
|
@@ -14,8 +18,175 @@ function isExternalRoute(route) {
|
|
|
14
18
|
return typeof route === "string" && route.startsWith("http");
|
|
15
19
|
}
|
|
16
20
|
//#endregion
|
|
21
|
+
//#region src/composables/navigation/use-navigation-search-shortcut.ts
|
|
22
|
+
/**
|
|
23
|
+
* Mounted navigation menus, in mounting order. Only the first one answers the shortcut, so pages
|
|
24
|
+
* with more than one `UMain` (like the docs) don't open every menu at once.
|
|
25
|
+
*/
|
|
26
|
+
const owners = ref([]);
|
|
27
|
+
/**
|
|
28
|
+
* Focus targets where the shortcut is left to the page: overlays (dialogs, confirmations and
|
|
29
|
+
* menus) and other modals, the activators of open menus (which keep the focus when opened by a
|
|
30
|
+
* click, and would pull it back from the navigation menu) and rich text editors, which usually
|
|
31
|
+
* take Ctrl+K to insert links.
|
|
32
|
+
*/
|
|
33
|
+
const IGNORED_TARGETS = [
|
|
34
|
+
".v-overlay",
|
|
35
|
+
"dialog",
|
|
36
|
+
"[aria-modal='true']",
|
|
37
|
+
"[aria-haspopup][aria-expanded='true']",
|
|
38
|
+
"[contenteditable]:not([contenteditable='false'])"
|
|
39
|
+
].join(", ");
|
|
40
|
+
/** Accessible name of the search field, whose placeholder also shows the shortcut. */
|
|
41
|
+
const SEARCH_NAME = "Buscar";
|
|
42
|
+
/**
|
|
43
|
+
* Shortcut keys for the current platform. Starts with the non-macOS keys and switches on mount,
|
|
44
|
+
* so server-rendered pages (the docs) hydrate without mismatches.
|
|
45
|
+
*/
|
|
46
|
+
function useNavigationShortcutKeys() {
|
|
47
|
+
const isMac = ref(false);
|
|
48
|
+
onMounted(() => isMac.value = isMacOS());
|
|
49
|
+
return {
|
|
50
|
+
label: computed(() => isMac.value ? "⌘K" : "Ctrl+K"),
|
|
51
|
+
ariaKeyshortcuts: computed(() => isMac.value ? "Meta+K" : "Control+K")
|
|
52
|
+
};
|
|
53
|
+
}
|
|
54
|
+
/**
|
|
55
|
+
* Listens to Ctrl+K (⌘K on macOS) on `window` while mounted: opens the menu, waits for it to
|
|
56
|
+
* render (the drawer is `inert` while closed) and focuses the search field (a disabled field, as
|
|
57
|
+
* while loading, can't take the focus). When the menu opened by the shortcut closes with the focus
|
|
58
|
+
* inside it, the focus goes back to where it was.
|
|
59
|
+
*/
|
|
60
|
+
function useNavigationSearchShortcut(options) {
|
|
61
|
+
const { open, field } = options;
|
|
62
|
+
const owner = Symbol("navigation-search-shortcut");
|
|
63
|
+
/** Element focused before the shortcut opened the menu, which gets the focus back on close. */
|
|
64
|
+
let origin = null;
|
|
65
|
+
onMounted(() => {
|
|
66
|
+
owners.value.push(owner);
|
|
67
|
+
globalThis.addEventListener("keydown", onKeydown, { capture: true });
|
|
68
|
+
findInput().setAttribute("aria-label", SEARCH_NAME);
|
|
69
|
+
});
|
|
70
|
+
onUnmounted(() => {
|
|
71
|
+
owners.value = owners.value.filter((item) => item !== owner);
|
|
72
|
+
globalThis.removeEventListener("keydown", onKeydown, { capture: true });
|
|
73
|
+
});
|
|
74
|
+
watch(open, (isOpen) => {
|
|
75
|
+
if (isOpen) return;
|
|
76
|
+
const target = origin;
|
|
77
|
+
origin = null;
|
|
78
|
+
if (!findInput().closest(".v-navigation-drawer").contains(document.activeElement)) return;
|
|
79
|
+
if (target instanceof HTMLElement || target instanceof SVGElement) target.focus();
|
|
80
|
+
});
|
|
81
|
+
function onKeydown(event) {
|
|
82
|
+
if (owners.value[0] !== owner || isIgnoredTarget(event)) return;
|
|
83
|
+
if (isShortcut(event)) openAndFocus(event);
|
|
84
|
+
else if (event.key === "Escape" && origin) close();
|
|
85
|
+
}
|
|
86
|
+
async function openAndFocus(event) {
|
|
87
|
+
event.preventDefault();
|
|
88
|
+
if (!open.value) origin = document.activeElement;
|
|
89
|
+
open.value = true;
|
|
90
|
+
await nextTick();
|
|
91
|
+
const input = findInput();
|
|
92
|
+
input.focus({ preventScroll: true });
|
|
93
|
+
input.select();
|
|
94
|
+
}
|
|
95
|
+
function findInput() {
|
|
96
|
+
return field.value.$el.querySelector("input");
|
|
97
|
+
}
|
|
98
|
+
function close() {
|
|
99
|
+
open.value = false;
|
|
100
|
+
}
|
|
101
|
+
return {
|
|
102
|
+
...useNavigationShortcutKeys(),
|
|
103
|
+
close
|
|
104
|
+
};
|
|
105
|
+
}
|
|
106
|
+
function isMacOS() {
|
|
107
|
+
return navigator.userAgent.includes("Macintosh");
|
|
108
|
+
}
|
|
109
|
+
function isShortcut(event) {
|
|
110
|
+
return (isMacOS() ? event.metaKey : event.ctrlKey) && !event.shiftKey && !event.altKey && !event.isComposing && event.key.toLowerCase() === "k";
|
|
111
|
+
}
|
|
112
|
+
function isIgnoredTarget(event) {
|
|
113
|
+
return event.target instanceof Element && event.target.closest(IGNORED_TARGETS) !== null;
|
|
114
|
+
}
|
|
115
|
+
//#endregion
|
|
116
|
+
//#region src/composables/dimensions/dimensions.ts
|
|
117
|
+
/**
|
|
118
|
+
* Vuetify's utility class that stretches a component to the whole width of its parent, for
|
|
119
|
+
* components with a `fullWidth` prop.
|
|
120
|
+
*/
|
|
121
|
+
function useFullWidth(fullWidth) {
|
|
122
|
+
return computed(() => toValue(fullWidth) ? "w-100" : void 0);
|
|
123
|
+
}
|
|
124
|
+
/**
|
|
125
|
+
* Vuetify's utility class that stretches a component to the whole height of its parent, for
|
|
126
|
+
* components with a `fullHeight` prop. The parent must have a height of its own.
|
|
127
|
+
*/
|
|
128
|
+
function useFullHeight(fullHeight) {
|
|
129
|
+
return computed(() => toValue(fullHeight) ? "h-100" : void 0);
|
|
130
|
+
}
|
|
131
|
+
//#endregion
|
|
132
|
+
//#region src/components/skeleton-loader/skeleton-loader.vue
|
|
133
|
+
var skeleton_loader_default = /* @__PURE__ */ defineComponent({
|
|
134
|
+
inheritAttrs: false,
|
|
135
|
+
__name: "skeleton-loader",
|
|
136
|
+
props: {
|
|
137
|
+
loading: {
|
|
138
|
+
type: Boolean,
|
|
139
|
+
required: false
|
|
140
|
+
},
|
|
141
|
+
type: {
|
|
142
|
+
type: null,
|
|
143
|
+
required: true
|
|
144
|
+
},
|
|
145
|
+
fullWidth: {
|
|
146
|
+
type: Boolean,
|
|
147
|
+
required: false
|
|
148
|
+
},
|
|
149
|
+
fullHeight: {
|
|
150
|
+
type: Boolean,
|
|
151
|
+
required: false
|
|
152
|
+
},
|
|
153
|
+
color: {
|
|
154
|
+
type: String,
|
|
155
|
+
required: false
|
|
156
|
+
}
|
|
157
|
+
},
|
|
158
|
+
setup(__props) {
|
|
159
|
+
const props = __props;
|
|
160
|
+
const { t } = useLocale();
|
|
161
|
+
const widthClass = useFullWidth(() => props.fullWidth);
|
|
162
|
+
const heightClass = useFullHeight(() => props.fullHeight);
|
|
163
|
+
const loadingAttrs = computed(() => ({
|
|
164
|
+
ariaLabel: void 0,
|
|
165
|
+
ariaLive: void 0,
|
|
166
|
+
"aria-label": t("$vuetify.loading"),
|
|
167
|
+
"aria-live": "polite"
|
|
168
|
+
}));
|
|
169
|
+
return (_ctx, _cache) => {
|
|
170
|
+
return openBlock(), createBlock(unref(VSkeletonLoader), mergeProps({
|
|
171
|
+
loading: props.loading,
|
|
172
|
+
type: props.type,
|
|
173
|
+
color: props.color,
|
|
174
|
+
class: [unref(widthClass), unref(heightClass)]
|
|
175
|
+
}, loadingAttrs.value), {
|
|
176
|
+
default: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
|
|
177
|
+
_: 3
|
|
178
|
+
}, 16, [
|
|
179
|
+
"loading",
|
|
180
|
+
"type",
|
|
181
|
+
"color",
|
|
182
|
+
"class"
|
|
183
|
+
]);
|
|
184
|
+
};
|
|
185
|
+
}
|
|
186
|
+
});
|
|
187
|
+
//#endregion
|
|
17
188
|
//#region src/components/app-bar/app-bar.vue?vue&type=script&setup=true&lang.ts
|
|
18
|
-
const _hoisted_1$
|
|
189
|
+
const _hoisted_1$3 = { class: "opacity-60" };
|
|
19
190
|
//#endregion
|
|
20
191
|
//#region src/components/app-bar/app-bar.vue
|
|
21
192
|
var app_bar_default = /* @__PURE__ */ defineComponent({
|
|
@@ -49,6 +220,10 @@ var app_bar_default = /* @__PURE__ */ defineComponent({
|
|
|
49
220
|
logo: {
|
|
50
221
|
type: String,
|
|
51
222
|
required: false
|
|
223
|
+
},
|
|
224
|
+
loading: {
|
|
225
|
+
type: Boolean,
|
|
226
|
+
required: false
|
|
52
227
|
}
|
|
53
228
|
}, {
|
|
54
229
|
"notificationsOpen": {
|
|
@@ -64,6 +239,7 @@ var app_bar_default = /* @__PURE__ */ defineComponent({
|
|
|
64
239
|
const props = __props;
|
|
65
240
|
const notificationsOpen = useModel(__props, "notificationsOpen");
|
|
66
241
|
const navigationOpen = useModel(__props, "navigationOpen");
|
|
242
|
+
const { ariaKeyshortcuts: navigationKeyshortcuts } = useNavigationShortcutKeys();
|
|
67
243
|
const helpBtnDataTestid = computed(() => `${props.dataTestid}-help`);
|
|
68
244
|
const notificationsBtnDataTestid = computed(() => `${props.dataTestid}-notifications`);
|
|
69
245
|
const navigationBtnDataTestid = computed(() => `${props.dataTestid}-navigation`);
|
|
@@ -75,157 +251,174 @@ var app_bar_default = /* @__PURE__ */ defineComponent({
|
|
|
75
251
|
const showNotifications = computed(() => !!props.notifications);
|
|
76
252
|
const unreadCount = computed(() => props.notifications.filter((notification) => !notification.read).length);
|
|
77
253
|
const hasUnreadNotifications = computed(() => unreadCount.value > 0);
|
|
254
|
+
const unreadLabel = computed(() => unreadCount.value === 1 ? "1 não lida" : `${unreadCount.value} não lidas`);
|
|
255
|
+
const notificationsLabel = computed(() => hasUnreadNotifications.value ? `Notificações (${unreadLabel.value})` : "Notificações");
|
|
256
|
+
watch(() => props.loading, (loading) => {
|
|
257
|
+
if (loading) notificationsOpen.value = false;
|
|
258
|
+
});
|
|
78
259
|
const showUser = computed(() => !!props.user);
|
|
79
260
|
const userAvatarProps = computed(() => props.user.img ? { image: props.user.img } : { icon: "mdi-account-outline" });
|
|
80
261
|
function isParentOption(option) {
|
|
81
262
|
return "items" in option;
|
|
82
263
|
}
|
|
83
|
-
function formatNotificationDate(date) {
|
|
84
|
-
const interval = toPeriodInterval(date);
|
|
85
|
-
if (wasThisMonth(interval)) {
|
|
86
|
-
if (wasToday(interval)) return formatDateTime(date, "HH:mm");
|
|
87
|
-
else if (wasYesterday(interval)) return "Ontem";
|
|
88
|
-
}
|
|
89
|
-
return formatDateTime(date, "DD/MM/YYYY");
|
|
90
|
-
}
|
|
91
|
-
function wasThisMonth(interval) {
|
|
92
|
-
return interval.months === 0 && interval.years === 0;
|
|
93
|
-
}
|
|
94
|
-
function wasToday(interval) {
|
|
95
|
-
return interval.days === 0;
|
|
96
|
-
}
|
|
97
|
-
function wasYesterday(interval) {
|
|
98
|
-
return interval.days === 1;
|
|
99
|
-
}
|
|
100
264
|
return (_ctx, _cache) => {
|
|
101
|
-
return openBlock(), createBlock(unref(VAppBar), {
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
}, {
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
265
|
+
return openBlock(), createBlock(unref(VAppBar), {
|
|
266
|
+
"data-testid": props.dataTestid,
|
|
267
|
+
"aria-busy": props.loading || void 0
|
|
268
|
+
}, {
|
|
269
|
+
append: withCtx(() => [createVNode(skeleton_loader_default, {
|
|
270
|
+
loading: props.loading,
|
|
271
|
+
type: "avatar"
|
|
272
|
+
}, {
|
|
273
|
+
default: withCtx(() => [
|
|
274
|
+
showHelp.value ? (openBlock(), createBlock(unref(VBtn), mergeProps({ key: 0 }, unref(routeProps), {
|
|
275
|
+
"data-testid": helpBtnDataTestid.value,
|
|
276
|
+
"aria-label": "Ajuda",
|
|
277
|
+
icon: "mdi-help-circle-outline"
|
|
278
|
+
}), null, 16, ["data-testid"])) : createCommentVNode("v-if", true),
|
|
279
|
+
showNotifications.value ? (openBlock(), createBlock(unref(VMenu), {
|
|
280
|
+
key: 1,
|
|
281
|
+
modelValue: notificationsOpen.value,
|
|
282
|
+
"onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => notificationsOpen.value = $event),
|
|
283
|
+
"close-on-content-click": false
|
|
284
|
+
}, {
|
|
285
|
+
activator: withCtx(({ props }) => [createVNode(unref(VBtn), mergeProps(props, {
|
|
286
|
+
"data-testid": notificationsBtnDataTestid.value,
|
|
287
|
+
"aria-label": notificationsLabel.value,
|
|
288
|
+
icon: ""
|
|
289
|
+
}), {
|
|
290
|
+
default: withCtx(() => [createVNode(unref(VBadge), {
|
|
291
|
+
"model-value": hasUnreadNotifications.value,
|
|
292
|
+
content: unreadCount.value,
|
|
293
|
+
label: unreadLabel.value,
|
|
294
|
+
color: "error"
|
|
295
|
+
}, {
|
|
296
|
+
default: withCtx(() => [createVNode(unref(VIcon), { icon: "mdi-bell-outline" })]),
|
|
131
297
|
_: 1
|
|
132
|
-
}
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
subtitle: notification.subtitle,
|
|
138
|
-
"active-class": "text-primary"
|
|
139
|
-
}, createSlots({ _: 2 }, [notification.date ? {
|
|
140
|
-
name: "append",
|
|
141
|
-
fn: withCtx(() => [createVNode(unref(VListItemAction), { end: "" }, {
|
|
142
|
-
default: withCtx(() => [createElementVNode("small", _hoisted_1$2, toDisplayString(formatNotificationDate(notification.date)), 1)]),
|
|
143
|
-
_: 2
|
|
144
|
-
}, 1024)]),
|
|
145
|
-
key: "0"
|
|
146
|
-
} : void 0]), 1032, [
|
|
147
|
-
"active",
|
|
148
|
-
"title",
|
|
149
|
-
"subtitle"
|
|
150
|
-
]);
|
|
151
|
-
}), 128))]),
|
|
298
|
+
}, 8, [
|
|
299
|
+
"model-value",
|
|
300
|
+
"content",
|
|
301
|
+
"label"
|
|
302
|
+
])]),
|
|
152
303
|
_: 1
|
|
153
|
-
}
|
|
154
|
-
|
|
304
|
+
}, 16, ["data-testid", "aria-label"])]),
|
|
305
|
+
default: withCtx(() => [createVNode(unref(VCard), { "data-testid": notificationsMenuDataTestid.value }, {
|
|
306
|
+
default: withCtx(() => [props.notifications?.length ? (openBlock(), createBlock(unref(VList), { key: 0 }, {
|
|
307
|
+
default: withCtx(() => [createVNode(unref(VListSubheader), null, {
|
|
308
|
+
default: withCtx(() => [..._cache[2] || (_cache[2] = [createTextVNode("Notificações", -1)])]),
|
|
309
|
+
_: 1
|
|
310
|
+
}), (openBlock(true), createElementBlock(Fragment, null, renderList(props.notifications, (notification, index) => {
|
|
311
|
+
return openBlock(), createBlock(unref(VListItem), {
|
|
312
|
+
key: index,
|
|
313
|
+
active: !notification.read,
|
|
314
|
+
title: notification.title,
|
|
315
|
+
subtitle: notification.subtitle,
|
|
316
|
+
"active-class": "text-primary"
|
|
317
|
+
}, createSlots({ _: 2 }, [notification.when ? {
|
|
318
|
+
name: "append",
|
|
319
|
+
fn: withCtx(() => [createVNode(unref(VListItemAction), { end: "" }, {
|
|
320
|
+
default: withCtx(() => [createElementVNode("small", _hoisted_1$3, toDisplayString(notification.when), 1)]),
|
|
321
|
+
_: 2
|
|
322
|
+
}, 1024)]),
|
|
323
|
+
key: "0"
|
|
324
|
+
} : void 0]), 1032, [
|
|
325
|
+
"active",
|
|
326
|
+
"title",
|
|
327
|
+
"subtitle"
|
|
328
|
+
]);
|
|
329
|
+
}), 128))]),
|
|
330
|
+
_: 1
|
|
331
|
+
})) : (openBlock(), createBlock(unref(VCardText), { key: 1 }, {
|
|
332
|
+
default: withCtx(() => [..._cache[3] || (_cache[3] = [createTextVNode("Nenhuma notificação", -1)])]),
|
|
333
|
+
_: 1
|
|
334
|
+
}))]),
|
|
155
335
|
_: 1
|
|
156
|
-
})
|
|
157
|
-
_: 1
|
|
158
|
-
}, 8, ["data-testid"])]),
|
|
159
|
-
_: 1
|
|
160
|
-
}, 8, ["modelValue"])) : createCommentVNode("v-if", true),
|
|
161
|
-
showUser.value ? (openBlock(), createBlock(unref(VMenu), {
|
|
162
|
-
key: 2,
|
|
163
|
-
"close-on-content-click": false
|
|
164
|
-
}, {
|
|
165
|
-
activator: withCtx(({ props }) => [createVNode(unref(VBtn), mergeProps(props, {
|
|
166
|
-
"data-testid": userBtnDataTestid.value,
|
|
167
|
-
icon: ""
|
|
168
|
-
}), {
|
|
169
|
-
default: withCtx(() => [createVNode(unref(VAvatar), mergeProps(userAvatarProps.value, { color: "primary" }), null, 16)]),
|
|
336
|
+
}, 8, ["data-testid"])]),
|
|
170
337
|
_: 1
|
|
171
|
-
},
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
"data-testid": userMenuDataTestid.value
|
|
338
|
+
}, 8, ["modelValue"])) : createCommentVNode("v-if", true),
|
|
339
|
+
showUser.value ? (openBlock(), createBlock(unref(VMenu), {
|
|
340
|
+
key: 2,
|
|
341
|
+
"close-on-content-click": false
|
|
176
342
|
}, {
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
})) : createCommentVNode("v-if", true), isParentOption(option) ? (openBlock(), createBlock(unref(VListGroup), { key: 1 }, {
|
|
184
|
-
activator: withCtx(({ props }) => [createVNode(unref(VListItem), mergeProps({ ref_for: true }, props, { title: option.description }), null, 16, ["title"])]),
|
|
185
|
-
default: withCtx(() => [(openBlock(true), createElementBlock(Fragment, null, renderList(option.items, (childOption, index) => {
|
|
186
|
-
return openBlock(), createBlock(unref(VListItem), mergeProps({ key: index }, { ref_for: true }, unref(routeToProps)(childOption.route), {
|
|
187
|
-
title: childOption.description,
|
|
188
|
-
onClick: childOption.action
|
|
189
|
-
}), null, 16, ["title", "onClick"]);
|
|
190
|
-
}), 128))]),
|
|
191
|
-
_: 2
|
|
192
|
-
}, 1024)) : (openBlock(), createBlock(unref(VListItem), mergeProps({
|
|
193
|
-
key: 2,
|
|
194
|
-
title: option.description
|
|
195
|
-
}, { ref_for: true }, unref(routeToProps)(option.route), { onClick: option.action }), null, 16, ["title", "onClick"]))], 64);
|
|
196
|
-
}), 128))]),
|
|
343
|
+
activator: withCtx(({ props }) => [createVNode(unref(VBtn), mergeProps(props, {
|
|
344
|
+
"data-testid": userBtnDataTestid.value,
|
|
345
|
+
"aria-label": "Menu do usuário",
|
|
346
|
+
icon: ""
|
|
347
|
+
}), {
|
|
348
|
+
default: withCtx(() => [createVNode(unref(VAvatar), mergeProps(userAvatarProps.value, { color: "primary" }), null, 16)]),
|
|
197
349
|
_: 1
|
|
198
|
-
})]),
|
|
350
|
+
}, 16, ["data-testid"])]),
|
|
351
|
+
default: withCtx(() => [createVNode(unref(VCard), {
|
|
352
|
+
title: __props.user?.title,
|
|
353
|
+
subtitle: __props.user?.subtitle,
|
|
354
|
+
"data-testid": userMenuDataTestid.value
|
|
355
|
+
}, {
|
|
356
|
+
prepend: withCtx(() => [createVNode(unref(VAvatar), mergeProps(userAvatarProps.value, { color: "primary" }), null, 16)]),
|
|
357
|
+
default: withCtx(() => [createVNode(unref(VDivider)), createVNode(unref(VList), { nav: "" }, {
|
|
358
|
+
default: withCtx(() => [(openBlock(true), createElementBlock(Fragment, null, renderList(props.user?.options, (option, index) => {
|
|
359
|
+
return openBlock(), createElementBlock(Fragment, { key: index }, [index > 0 ? (openBlock(), createBlock(unref(VDivider), {
|
|
360
|
+
key: 0,
|
|
361
|
+
class: "mt-1"
|
|
362
|
+
})) : createCommentVNode("v-if", true), isParentOption(option) ? (openBlock(), createBlock(unref(VListGroup), { key: 1 }, {
|
|
363
|
+
activator: withCtx(({ props }) => [createVNode(unref(VListItem), mergeProps({ ref_for: true }, props, { title: option.description }), null, 16, ["title"])]),
|
|
364
|
+
default: withCtx(() => [(openBlock(true), createElementBlock(Fragment, null, renderList(option.items, (childOption, index) => {
|
|
365
|
+
return openBlock(), createBlock(unref(VListItem), mergeProps({ key: index }, { ref_for: true }, unref(routeToProps)(childOption.route), {
|
|
366
|
+
title: childOption.description,
|
|
367
|
+
onClick: childOption.action
|
|
368
|
+
}), null, 16, ["title", "onClick"]);
|
|
369
|
+
}), 128))]),
|
|
370
|
+
_: 2
|
|
371
|
+
}, 1024)) : (openBlock(), createBlock(unref(VListItem), mergeProps({
|
|
372
|
+
key: 2,
|
|
373
|
+
title: option.description
|
|
374
|
+
}, { ref_for: true }, unref(routeToProps)(option.route), { onClick: option.action }), null, 16, ["title", "onClick"]))], 64);
|
|
375
|
+
}), 128))]),
|
|
376
|
+
_: 1
|
|
377
|
+
})]),
|
|
378
|
+
_: 1
|
|
379
|
+
}, 8, [
|
|
380
|
+
"title",
|
|
381
|
+
"subtitle",
|
|
382
|
+
"data-testid"
|
|
383
|
+
])]),
|
|
199
384
|
_: 1
|
|
200
|
-
}
|
|
201
|
-
|
|
202
|
-
|
|
203
|
-
|
|
204
|
-
])]),
|
|
205
|
-
_: 1
|
|
206
|
-
})) : createCommentVNode("v-if", true)
|
|
207
|
-
]),
|
|
385
|
+
})) : createCommentVNode("v-if", true)
|
|
386
|
+
]),
|
|
387
|
+
_: 1
|
|
388
|
+
}, 8, ["loading"])]),
|
|
208
389
|
default: withCtx(() => [
|
|
209
390
|
__props.navigation ? (openBlock(), createBlock(unref(VAppBarNavIcon), {
|
|
210
391
|
key: 0,
|
|
211
392
|
"data-testid": navigationBtnDataTestid.value,
|
|
393
|
+
"aria-expanded": navigationOpen.value,
|
|
394
|
+
"aria-label": "Menu de navegação",
|
|
395
|
+
"aria-keyshortcuts": unref(navigationKeyshortcuts),
|
|
212
396
|
onClick: _cache[0] || (_cache[0] = ($event) => navigationOpen.value = !navigationOpen.value)
|
|
213
|
-
}, null, 8, [
|
|
397
|
+
}, null, 8, [
|
|
398
|
+
"data-testid",
|
|
399
|
+
"aria-expanded",
|
|
400
|
+
"aria-keyshortcuts"
|
|
401
|
+
])) : createCommentVNode("v-if", true),
|
|
214
402
|
__props.logo ? (openBlock(), createBlock(unref(VImg), {
|
|
215
403
|
key: 1,
|
|
216
404
|
src: props.logo,
|
|
405
|
+
alt: "",
|
|
217
406
|
height: "100%",
|
|
218
407
|
width: "fit-content",
|
|
219
408
|
class: "py-2 ml-5 mr-n3",
|
|
220
409
|
cover: ""
|
|
221
410
|
}, null, 8, ["src"])) : createCommentVNode("v-if", true),
|
|
222
|
-
props.title ? (openBlock(), createBlock(unref(VAppBarTitle), {
|
|
411
|
+
props.title ? (openBlock(), createBlock(unref(VAppBarTitle), {
|
|
412
|
+
key: 2,
|
|
413
|
+
role: "heading",
|
|
414
|
+
"aria-level": "1"
|
|
415
|
+
}, {
|
|
223
416
|
default: withCtx(() => [createTextVNode(toDisplayString(props.title), 1)]),
|
|
224
417
|
_: 1
|
|
225
418
|
})) : createCommentVNode("v-if", true)
|
|
226
419
|
]),
|
|
227
420
|
_: 1
|
|
228
|
-
}, 8, ["data-testid"]);
|
|
421
|
+
}, 8, ["data-testid", "aria-busy"]);
|
|
229
422
|
};
|
|
230
423
|
}
|
|
231
424
|
});
|
|
@@ -244,7 +437,23 @@ function url(value) {
|
|
|
244
437
|
return isEmpty(value) || isUrl(value) || "URL inválida";
|
|
245
438
|
}
|
|
246
439
|
//#endregion
|
|
247
|
-
//#region src/composables/inputs/
|
|
440
|
+
//#region src/composables/inputs/fields.ts
|
|
441
|
+
const textFieldVariantToVuetifyVariant = {
|
|
442
|
+
primary: "underlined",
|
|
443
|
+
secondary: "outlined"
|
|
444
|
+
};
|
|
445
|
+
function useTextFieldVariant(variant) {
|
|
446
|
+
return computed(() => {
|
|
447
|
+
const variantValue = toValue(variant);
|
|
448
|
+
return textFieldVariantToVuetifyVariant[variantValue];
|
|
449
|
+
});
|
|
450
|
+
}
|
|
451
|
+
function createRequiredRule(required, isPresent) {
|
|
452
|
+
return (value) => {
|
|
453
|
+
if (!required) return true;
|
|
454
|
+
return isPresent(value) || "Campo obrigatório";
|
|
455
|
+
};
|
|
456
|
+
}
|
|
248
457
|
function useRules(options) {
|
|
249
458
|
return computed(() => {
|
|
250
459
|
const rules = [];
|
|
@@ -254,10 +463,6 @@ function useRules(options) {
|
|
|
254
463
|
}
|
|
255
464
|
//#endregion
|
|
256
465
|
//#region src/composables/inputs/text-field.ts
|
|
257
|
-
const textFieldVariantToVuetifyVariant = {
|
|
258
|
-
primary: "underlined",
|
|
259
|
-
secondary: "outlined"
|
|
260
|
-
};
|
|
261
466
|
const textFieldTypeToVuetifyType = {
|
|
262
467
|
text: "text",
|
|
263
468
|
phone: "tel",
|
|
@@ -271,18 +476,39 @@ const textFieldTypeToVuetifyRule = {
|
|
|
271
476
|
email,
|
|
272
477
|
url
|
|
273
478
|
};
|
|
274
|
-
|
|
275
|
-
|
|
276
|
-
|
|
277
|
-
|
|
278
|
-
|
|
279
|
-
}
|
|
280
|
-
function useTextFieldType(type) {
|
|
479
|
+
/**
|
|
480
|
+
* Maps the field type to the input type, showing as plain text a password
|
|
481
|
+
* the user chose to make visible.
|
|
482
|
+
*/
|
|
483
|
+
function useTextFieldType(type, isPasswordVisible) {
|
|
281
484
|
return computed(() => {
|
|
282
485
|
const typeValue = toValue(type);
|
|
486
|
+
if (typeValue === "password" && toValue(isPasswordVisible)) return "text";
|
|
283
487
|
return textFieldTypeToVuetifyType[typeValue];
|
|
284
488
|
});
|
|
285
489
|
}
|
|
490
|
+
/**
|
|
491
|
+
* Controls the button that shows or hides a password field's value. The
|
|
492
|
+
* password starts hidden and hides again whenever the type stops being
|
|
493
|
+
* `password`.
|
|
494
|
+
*/
|
|
495
|
+
function useTextFieldPasswordToggle(type) {
|
|
496
|
+
const isPasswordField = computed(() => toValue(type) === "password");
|
|
497
|
+
const isPasswordVisible = ref(false);
|
|
498
|
+
const icon = computed(() => isPasswordVisible.value ? "mdi-eye-off" : "mdi-eye");
|
|
499
|
+
watch(isPasswordField, () => {
|
|
500
|
+
isPasswordVisible.value = false;
|
|
501
|
+
});
|
|
502
|
+
function toggle() {
|
|
503
|
+
isPasswordVisible.value = !isPasswordVisible.value;
|
|
504
|
+
}
|
|
505
|
+
return {
|
|
506
|
+
isPasswordField,
|
|
507
|
+
isPasswordVisible: readonly(isPasswordVisible),
|
|
508
|
+
icon,
|
|
509
|
+
toggle
|
|
510
|
+
};
|
|
511
|
+
}
|
|
286
512
|
function useTextFieldRules(props) {
|
|
287
513
|
const defaultRules = useRules(props);
|
|
288
514
|
return computed(() => {
|
|
@@ -296,6 +522,34 @@ function associatedRuleType(type) {
|
|
|
296
522
|
return type in textFieldTypeToVuetifyRule;
|
|
297
523
|
}
|
|
298
524
|
//#endregion
|
|
525
|
+
//#region src/components/inputs/field-loader.vue
|
|
526
|
+
var field_loader_default = /* @__PURE__ */ defineComponent({
|
|
527
|
+
inheritAttrs: false,
|
|
528
|
+
__name: "field-loader",
|
|
529
|
+
props: {
|
|
530
|
+
color: {
|
|
531
|
+
type: String,
|
|
532
|
+
required: false
|
|
533
|
+
},
|
|
534
|
+
isActive: {
|
|
535
|
+
type: Boolean,
|
|
536
|
+
required: true
|
|
537
|
+
}
|
|
538
|
+
},
|
|
539
|
+
setup(__props) {
|
|
540
|
+
const props = __props;
|
|
541
|
+
return (_ctx, _cache) => {
|
|
542
|
+
return openBlock(), createBlock(unref(VProgressLinear), {
|
|
543
|
+
active: props.isActive,
|
|
544
|
+
color: props.color,
|
|
545
|
+
height: "2",
|
|
546
|
+
indeterminate: "",
|
|
547
|
+
"aria-hidden": "true"
|
|
548
|
+
}, null, 8, ["active", "color"]);
|
|
549
|
+
};
|
|
550
|
+
}
|
|
551
|
+
});
|
|
552
|
+
//#endregion
|
|
299
553
|
//#region src/components/inputs/text-field/text-field.vue
|
|
300
554
|
var text_field_default = /* @__PURE__ */ defineComponent({
|
|
301
555
|
inheritAttrs: false,
|
|
@@ -360,7 +614,8 @@ var text_field_default = /* @__PURE__ */ defineComponent({
|
|
|
360
614
|
const modelValue = useModel(__props, "modelValue");
|
|
361
615
|
const props = __props;
|
|
362
616
|
const vuetifyVariant = useTextFieldVariant(() => props.variant);
|
|
363
|
-
const
|
|
617
|
+
const { isPasswordField, isPasswordVisible, icon: passwordToggleIcon, toggle: togglePassword } = useTextFieldPasswordToggle(() => props.type);
|
|
618
|
+
const vuetifyType = useTextFieldType(() => props.type, isPasswordVisible);
|
|
364
619
|
const rules = useTextFieldRules(props);
|
|
365
620
|
const isSearchField = computed(() => props.type === "search");
|
|
366
621
|
const computedClearable = computed(() => props.clearable ?? isSearchField.value);
|
|
@@ -379,13 +634,34 @@ var text_field_default = /* @__PURE__ */ defineComponent({
|
|
|
379
634
|
"data-testid": props.dataTestid,
|
|
380
635
|
disabled: props.disabled,
|
|
381
636
|
loading: props.loading,
|
|
637
|
+
"aria-busy": props.loading || void 0,
|
|
382
638
|
readonly: props.readonly,
|
|
383
639
|
label: props.label,
|
|
384
640
|
placeholder: props.placeholder,
|
|
385
641
|
hint: props.hint,
|
|
386
642
|
clearable: computedClearable.value,
|
|
387
643
|
"onClick:clear": clear
|
|
388
|
-
},
|
|
644
|
+
}, createSlots({
|
|
645
|
+
loader: withCtx((loader) => [createVNode(field_loader_default, normalizeProps(guardReactiveProps(loader)), null, 16)]),
|
|
646
|
+
_: 2
|
|
647
|
+
}, [unref(isPasswordField) ? {
|
|
648
|
+
name: "append-inner",
|
|
649
|
+
fn: withCtx(() => [createVNode(unref(VBtn), {
|
|
650
|
+
icon: unref(passwordToggleIcon),
|
|
651
|
+
"aria-label": "Mostrar senha",
|
|
652
|
+
"aria-pressed": unref(isPasswordVisible),
|
|
653
|
+
disabled: props.disabled,
|
|
654
|
+
size: "small",
|
|
655
|
+
variant: "text",
|
|
656
|
+
onClick: unref(togglePassword)
|
|
657
|
+
}, null, 8, [
|
|
658
|
+
"icon",
|
|
659
|
+
"aria-pressed",
|
|
660
|
+
"disabled",
|
|
661
|
+
"onClick"
|
|
662
|
+
])]),
|
|
663
|
+
key: "0"
|
|
664
|
+
} : void 0]), 1032, [
|
|
389
665
|
"modelValue",
|
|
390
666
|
"variant",
|
|
391
667
|
"type",
|
|
@@ -394,6 +670,7 @@ var text_field_default = /* @__PURE__ */ defineComponent({
|
|
|
394
670
|
"data-testid",
|
|
395
671
|
"disabled",
|
|
396
672
|
"loading",
|
|
673
|
+
"aria-busy",
|
|
397
674
|
"readonly",
|
|
398
675
|
"label",
|
|
399
676
|
"placeholder",
|
|
@@ -405,7 +682,7 @@ var text_field_default = /* @__PURE__ */ defineComponent({
|
|
|
405
682
|
});
|
|
406
683
|
//#endregion
|
|
407
684
|
//#region src/components/navigation-menu/navigation-menu.vue?vue&type=script&setup=true&lang.ts
|
|
408
|
-
const _hoisted_1$
|
|
685
|
+
const _hoisted_1$2 = { class: "px-4 pt-2" };
|
|
409
686
|
//#endregion
|
|
410
687
|
//#region src/components/navigation-menu/navigation-menu.vue
|
|
411
688
|
var navigation_menu_default = /* @__PURE__ */ defineComponent({
|
|
@@ -419,6 +696,10 @@ var navigation_menu_default = /* @__PURE__ */ defineComponent({
|
|
|
419
696
|
items: {
|
|
420
697
|
type: Array,
|
|
421
698
|
required: false
|
|
699
|
+
},
|
|
700
|
+
loading: {
|
|
701
|
+
type: Boolean,
|
|
702
|
+
required: false
|
|
422
703
|
}
|
|
423
704
|
}, {
|
|
424
705
|
"modelValue": {
|
|
@@ -432,6 +713,10 @@ var navigation_menu_default = /* @__PURE__ */ defineComponent({
|
|
|
432
713
|
const props = __props;
|
|
433
714
|
const open = useModel(__props, "modelValue");
|
|
434
715
|
const search = ref("");
|
|
716
|
+
const { label: shortcutLabel, close } = useNavigationSearchShortcut({
|
|
717
|
+
open,
|
|
718
|
+
field: useTemplateRef("searchField")
|
|
719
|
+
});
|
|
435
720
|
const filteredItems = computed(() => filterItems());
|
|
436
721
|
const searchDataTestid = computed(() => `${props.dataTestid}-search`);
|
|
437
722
|
const query = computed(() => search.value.toLowerCase());
|
|
@@ -458,37 +743,88 @@ var navigation_menu_default = /* @__PURE__ */ defineComponent({
|
|
|
458
743
|
return openBlock(), createBlock(unref(VNavigationDrawer), {
|
|
459
744
|
modelValue: open.value,
|
|
460
745
|
"onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => open.value = $event),
|
|
746
|
+
color: "primary",
|
|
461
747
|
"data-testid": props.dataTestid,
|
|
748
|
+
"aria-busy": props.loading || void 0,
|
|
462
749
|
absolute: "",
|
|
463
|
-
temporary: ""
|
|
750
|
+
temporary: "",
|
|
751
|
+
onKeydown: withKeys(unref(close), ["esc"])
|
|
464
752
|
}, {
|
|
465
|
-
prepend: withCtx(() => [createElementVNode("div", _hoisted_1$
|
|
753
|
+
prepend: withCtx(() => [createElementVNode("div", _hoisted_1$2, [createVNode(text_field_default, {
|
|
754
|
+
ref: "searchField",
|
|
466
755
|
modelValue: search.value,
|
|
467
756
|
"onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => search.value = $event),
|
|
468
757
|
type: "search",
|
|
469
|
-
|
|
470
|
-
"data-testid": searchDataTestid.value
|
|
471
|
-
|
|
472
|
-
|
|
473
|
-
|
|
474
|
-
|
|
475
|
-
|
|
476
|
-
|
|
477
|
-
|
|
478
|
-
|
|
479
|
-
|
|
480
|
-
|
|
481
|
-
|
|
482
|
-
|
|
483
|
-
|
|
484
|
-
|
|
485
|
-
|
|
486
|
-
|
|
487
|
-
|
|
758
|
+
placeholder: `Buscar (${unref(shortcutLabel)})`,
|
|
759
|
+
"data-testid": searchDataTestid.value,
|
|
760
|
+
disabled: props.loading
|
|
761
|
+
}, null, 8, [
|
|
762
|
+
"modelValue",
|
|
763
|
+
"placeholder",
|
|
764
|
+
"data-testid",
|
|
765
|
+
"disabled"
|
|
766
|
+
])])]),
|
|
767
|
+
default: withCtx(() => [createVNode(unref(VDivider)), createVNode(skeleton_loader_default, {
|
|
768
|
+
loading: props.loading,
|
|
769
|
+
type: "list-item@6",
|
|
770
|
+
color: "primary"
|
|
771
|
+
}, {
|
|
772
|
+
default: withCtx(() => [createVNode(unref(VList), { nav: "" }, {
|
|
773
|
+
default: withCtx(() => [(openBlock(true), createElementBlock(Fragment, null, renderList(filteredItems.value, (item, index) => {
|
|
774
|
+
return openBlock(), createElementBlock(Fragment, { key: index }, [isParentItem(item) ? (openBlock(), createBlock(unref(VListGroup), { key: 0 }, {
|
|
775
|
+
activator: withCtx(({ props: activatorProps }) => [createVNode(unref(VListItem), mergeProps({ ref_for: true }, activatorProps, { title: item.description }), null, 16, ["title"])]),
|
|
776
|
+
default: withCtx(() => [(openBlock(true), createElementBlock(Fragment, null, renderList(item.items, (childItem, childIndex) => {
|
|
777
|
+
return openBlock(), createBlock(unref(VListItem), mergeProps({ key: childIndex }, { ref_for: true }, unref(routeToProps)(childItem.route), {
|
|
778
|
+
title: childItem.description,
|
|
779
|
+
onClick: childItem.action
|
|
780
|
+
}), null, 16, ["title", "onClick"]);
|
|
781
|
+
}), 128))]),
|
|
782
|
+
_: 2
|
|
783
|
+
}, 1024)) : (openBlock(), createBlock(unref(VListItem), mergeProps({
|
|
784
|
+
key: 1,
|
|
785
|
+
title: item.description
|
|
786
|
+
}, { ref_for: true }, unref(routeToProps)(item.route), { onClick: item.action }), null, 16, ["title", "onClick"]))], 64);
|
|
787
|
+
}), 128))]),
|
|
788
|
+
_: 1
|
|
789
|
+
})]),
|
|
488
790
|
_: 1
|
|
489
|
-
})]),
|
|
791
|
+
}, 8, ["loading"])]),
|
|
792
|
+
_: 1
|
|
793
|
+
}, 8, [
|
|
794
|
+
"modelValue",
|
|
795
|
+
"data-testid",
|
|
796
|
+
"aria-busy",
|
|
797
|
+
"onKeydown"
|
|
798
|
+
]);
|
|
799
|
+
};
|
|
800
|
+
}
|
|
801
|
+
});
|
|
802
|
+
//#endregion
|
|
803
|
+
//#region src/components/footer/footer.vue
|
|
804
|
+
var footer_default = /* @__PURE__ */ defineComponent({
|
|
805
|
+
inheritAttrs: false,
|
|
806
|
+
__name: "footer",
|
|
807
|
+
props: {
|
|
808
|
+
description: {
|
|
809
|
+
type: String,
|
|
810
|
+
required: false
|
|
811
|
+
},
|
|
812
|
+
dataTestid: {
|
|
813
|
+
type: String,
|
|
814
|
+
required: false
|
|
815
|
+
}
|
|
816
|
+
},
|
|
817
|
+
setup(__props) {
|
|
818
|
+
const props = __props;
|
|
819
|
+
return (_ctx, _cache) => {
|
|
820
|
+
return openBlock(), createBlock(unref(VFooter), {
|
|
821
|
+
"data-testid": props.dataTestid,
|
|
822
|
+
class: "justify-center text-center",
|
|
823
|
+
app: ""
|
|
824
|
+
}, {
|
|
825
|
+
default: withCtx(() => [createTextVNode(toDisplayString(props.description), 1)]),
|
|
490
826
|
_: 1
|
|
491
|
-
}, 8, ["
|
|
827
|
+
}, 8, ["data-testid"]);
|
|
492
828
|
};
|
|
493
829
|
}
|
|
494
830
|
});
|
|
@@ -497,20 +833,28 @@ var navigation_menu_default = /* @__PURE__ */ defineComponent({
|
|
|
497
833
|
var container_default = /* @__PURE__ */ defineComponent({
|
|
498
834
|
inheritAttrs: false,
|
|
499
835
|
__name: "container",
|
|
500
|
-
props: {
|
|
501
|
-
|
|
502
|
-
|
|
503
|
-
|
|
836
|
+
props: {
|
|
837
|
+
fullHeight: {
|
|
838
|
+
type: Boolean,
|
|
839
|
+
required: false
|
|
840
|
+
},
|
|
841
|
+
dataTestid: {
|
|
842
|
+
type: String,
|
|
843
|
+
required: false
|
|
844
|
+
}
|
|
845
|
+
},
|
|
504
846
|
setup(__props) {
|
|
505
847
|
const props = __props;
|
|
848
|
+
const heightClass = useFullHeight(() => props.fullHeight);
|
|
506
849
|
return (_ctx, _cache) => {
|
|
507
850
|
return openBlock(), createBlock(unref(VContainer), {
|
|
851
|
+
class: normalizeClass(unref(heightClass)),
|
|
508
852
|
"data-testid": props.dataTestid,
|
|
509
853
|
fluid: ""
|
|
510
854
|
}, {
|
|
511
855
|
default: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
|
|
512
856
|
_: 3
|
|
513
|
-
}, 8, ["data-testid"]);
|
|
857
|
+
}, 8, ["class", "data-testid"]);
|
|
514
858
|
};
|
|
515
859
|
}
|
|
516
860
|
});
|
|
@@ -543,76 +887,11 @@ var toast_default = /* @__PURE__ */ defineComponent({
|
|
|
543
887
|
}
|
|
544
888
|
});
|
|
545
889
|
//#endregion
|
|
546
|
-
//#region src/components/main/main.vue
|
|
547
|
-
var main_default = /* @__PURE__ */ defineComponent({
|
|
548
|
-
inheritAttrs: false,
|
|
549
|
-
__name: "main",
|
|
550
|
-
props: /*@__PURE__*/ mergeModels({
|
|
551
|
-
dataTestid: {
|
|
552
|
-
type: String,
|
|
553
|
-
required: false
|
|
554
|
-
},
|
|
555
|
-
logo: {
|
|
556
|
-
type: String,
|
|
557
|
-
required: false
|
|
558
|
-
},
|
|
559
|
-
appBar: {
|
|
560
|
-
type: Object,
|
|
561
|
-
required: false
|
|
562
|
-
},
|
|
563
|
-
navigationMenu: {
|
|
564
|
-
type: Object,
|
|
565
|
-
required: false
|
|
566
|
-
}
|
|
567
|
-
}, {
|
|
568
|
-
"notificationsOpen": {
|
|
569
|
-
type: Boolean,
|
|
570
|
-
default: false
|
|
571
|
-
},
|
|
572
|
-
"notificationsOpenModifiers": {}
|
|
573
|
-
}),
|
|
574
|
-
emits: ["update:notificationsOpen"],
|
|
575
|
-
setup(__props) {
|
|
576
|
-
const props = __props;
|
|
577
|
-
const appBarProps = computed(() => props.appBar ? {
|
|
578
|
-
...props.appBar,
|
|
579
|
-
logo: props.logo,
|
|
580
|
-
navigation: props.navigationMenu !== void 0
|
|
581
|
-
} : void 0);
|
|
582
|
-
const notificationsOpen = useModel(__props, "notificationsOpen");
|
|
583
|
-
const navigationMenuOpen = ref(false);
|
|
584
|
-
return (_ctx, _cache) => {
|
|
585
|
-
return openBlock(), createBlock(unref(VApp), { "data-testid": props.dataTestid }, {
|
|
586
|
-
default: withCtx(() => [
|
|
587
|
-
appBarProps.value ? (openBlock(), createBlock(app_bar_default, mergeProps({ key: 0 }, appBarProps.value, {
|
|
588
|
-
"notifications-open": notificationsOpen.value,
|
|
589
|
-
"onUpdate:notificationsOpen": _cache[0] || (_cache[0] = ($event) => notificationsOpen.value = $event),
|
|
590
|
-
"navigation-open": navigationMenuOpen.value,
|
|
591
|
-
"onUpdate:navigationOpen": _cache[1] || (_cache[1] = ($event) => navigationMenuOpen.value = $event)
|
|
592
|
-
}), null, 16, ["notifications-open", "navigation-open"])) : createCommentVNode("v-if", true),
|
|
593
|
-
props.navigationMenu ? (openBlock(), createBlock(navigation_menu_default, mergeProps({ key: 1 }, props.navigationMenu, {
|
|
594
|
-
modelValue: navigationMenuOpen.value,
|
|
595
|
-
"onUpdate:modelValue": _cache[2] || (_cache[2] = ($event) => navigationMenuOpen.value = $event)
|
|
596
|
-
}), null, 16, ["modelValue"])) : createCommentVNode("v-if", true),
|
|
597
|
-
createVNode(unref(VMain), null, {
|
|
598
|
-
default: withCtx(() => [createVNode(container_default, null, {
|
|
599
|
-
default: withCtx(() => [renderSlot(_ctx.$slots, "default"), createVNode(toast_default)]),
|
|
600
|
-
_: 3
|
|
601
|
-
})]),
|
|
602
|
-
_: 3
|
|
603
|
-
})
|
|
604
|
-
]),
|
|
605
|
-
_: 3
|
|
606
|
-
}, 8, ["data-testid"]);
|
|
607
|
-
};
|
|
608
|
-
}
|
|
609
|
-
});
|
|
610
|
-
//#endregion
|
|
611
890
|
//#region src/composables/button/button.ts
|
|
612
891
|
const buttonVariantToVuetifyVariant = {
|
|
613
892
|
primary: "elevated",
|
|
614
893
|
secondary: "flat",
|
|
615
|
-
ghost: "
|
|
894
|
+
ghost: "text"
|
|
616
895
|
};
|
|
617
896
|
function useButtonVariant(variant) {
|
|
618
897
|
return computed(() => {
|
|
@@ -654,6 +933,10 @@ var button_default = /* @__PURE__ */ defineComponent({
|
|
|
654
933
|
type: Boolean,
|
|
655
934
|
required: false
|
|
656
935
|
},
|
|
936
|
+
fullWidth: {
|
|
937
|
+
type: Boolean,
|
|
938
|
+
required: false
|
|
939
|
+
},
|
|
657
940
|
form: {
|
|
658
941
|
type: String,
|
|
659
942
|
required: false
|
|
@@ -671,20 +954,28 @@ var button_default = /* @__PURE__ */ defineComponent({
|
|
|
671
954
|
const color = useVuetifyColor(() => props.color);
|
|
672
955
|
const type = useButtonType(() => props.type);
|
|
673
956
|
const form = useButtonForm(() => props.form);
|
|
957
|
+
const widthClass = useFullWidth(() => props.fullWidth);
|
|
958
|
+
const isDisabled = computed(() => props.disabled || props.loading);
|
|
674
959
|
function onClick(event) {
|
|
675
960
|
emit("click", event);
|
|
676
961
|
}
|
|
677
962
|
return (_ctx, _cache) => {
|
|
678
963
|
return openBlock(), createBlock(unref(VBtn), {
|
|
679
|
-
disabled:
|
|
964
|
+
disabled: isDisabled.value,
|
|
680
965
|
loading: props.loading,
|
|
681
966
|
"data-testid": props.dataTestid,
|
|
682
967
|
variant: unref(variant),
|
|
683
968
|
color: unref(color),
|
|
684
969
|
type: unref(type),
|
|
685
970
|
form: unref(form),
|
|
971
|
+
class: normalizeClass(unref(widthClass)),
|
|
686
972
|
onClick
|
|
687
973
|
}, {
|
|
974
|
+
loader: withCtx(() => [createVNode(unref(VProgressCircular), {
|
|
975
|
+
indeterminate: "",
|
|
976
|
+
width: "2",
|
|
977
|
+
"aria-hidden": "true"
|
|
978
|
+
})]),
|
|
688
979
|
default: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
|
|
689
980
|
_: 3
|
|
690
981
|
}, 8, [
|
|
@@ -694,19 +985,545 @@ var button_default = /* @__PURE__ */ defineComponent({
|
|
|
694
985
|
"variant",
|
|
695
986
|
"color",
|
|
696
987
|
"type",
|
|
697
|
-
"form"
|
|
988
|
+
"form",
|
|
989
|
+
"class"
|
|
698
990
|
]);
|
|
699
991
|
};
|
|
700
992
|
}
|
|
701
993
|
});
|
|
702
994
|
//#endregion
|
|
703
|
-
//#region src/components/
|
|
704
|
-
|
|
705
|
-
|
|
706
|
-
|
|
707
|
-
|
|
708
|
-
|
|
709
|
-
|
|
995
|
+
//#region src/components/dialogs/dialog/dialog-host-key.ts
|
|
996
|
+
/**
|
|
997
|
+
* Injection key of {@link DialogHostContext}, provided by the internal `DialogHost`. Besides the
|
|
998
|
+
* role, the blocking while an action runs and the end of the leave transitions, it makes the
|
|
999
|
+
* dialog's content describe the dialog (`aria-describedby`), since `DialogHost` only displays text
|
|
1000
|
+
* messages. Not part of the public API.
|
|
1001
|
+
*/
|
|
1002
|
+
const dialogHostKey = Symbol("dialog-host");
|
|
1003
|
+
//#endregion
|
|
1004
|
+
//#region src/composables/dialogs/use-dialog-focus.ts
|
|
1005
|
+
/** Focus state of the closed dialogs, by their card, for the dialogs opened from them. */
|
|
1006
|
+
const closedDialogs = /* @__PURE__ */ new WeakMap();
|
|
1007
|
+
/** Elements that can get the focus when the dialog opens. The first one in the dialog gets it. */
|
|
1008
|
+
const focusable = [
|
|
1009
|
+
"button:not([disabled])",
|
|
1010
|
+
"[href]",
|
|
1011
|
+
"input:not([disabled]):not([type=\"hidden\"])",
|
|
1012
|
+
"select:not([disabled])",
|
|
1013
|
+
"textarea:not([disabled])",
|
|
1014
|
+
"[tabindex]:not([tabindex=\"-1\"])"
|
|
1015
|
+
].join(", ");
|
|
1016
|
+
/**
|
|
1017
|
+
* Moves the focus into a dialog once it opens and back to where it was when it closes, including
|
|
1018
|
+
* when dialogs are opened from others. Internal to the dialog components.
|
|
1019
|
+
* @param isActive - Whether the dialog is displayed. It turns `false` as soon as the dialog starts
|
|
1020
|
+
* leaving, so the focus returns right away.
|
|
1021
|
+
* @param card - The dialog's card, marked with `data-u-dialog`, or nothing while it isn't rendered.
|
|
1022
|
+
* @returns `focusFirstElement`, to call once the dialog finishes entering.
|
|
1023
|
+
*/
|
|
1024
|
+
function useDialogFocus(isActive, card) {
|
|
1025
|
+
/** Focus state of this dialog, shared with the dialogs opened from it. */
|
|
1026
|
+
const focusState = {
|
|
1027
|
+
isOpen: isActive,
|
|
1028
|
+
origin: null
|
|
1029
|
+
};
|
|
1030
|
+
onMounted(() => onActiveChange(isActive()));
|
|
1031
|
+
watch(isActive, onActiveChange);
|
|
1032
|
+
function onActiveChange(active) {
|
|
1033
|
+
if (active) {
|
|
1034
|
+
focusState.origin = document.activeElement;
|
|
1035
|
+
return;
|
|
1036
|
+
}
|
|
1037
|
+
const element = card();
|
|
1038
|
+
if (element) closedDialogs.set(element, focusState);
|
|
1039
|
+
const target = findFocusTarget(focusState.origin);
|
|
1040
|
+
if (hasFocus(element) && (target instanceof HTMLElement || target instanceof SVGElement)) target.focus();
|
|
1041
|
+
}
|
|
1042
|
+
function focusFirstElement() {
|
|
1043
|
+
card()?.querySelector(focusable)?.focus();
|
|
1044
|
+
}
|
|
1045
|
+
return { focusFirstElement };
|
|
1046
|
+
}
|
|
1047
|
+
/**
|
|
1048
|
+
* Element that gets the focus back when a dialog closes: its origin or, when the origin is inside
|
|
1049
|
+
* another dialog that closed meanwhile (and can't get the focus anymore), that dialog's.
|
|
1050
|
+
*/
|
|
1051
|
+
function findFocusTarget(origin) {
|
|
1052
|
+
const card = origin?.closest("[data-u-dialog]");
|
|
1053
|
+
const owner = card && closedDialogs.get(card);
|
|
1054
|
+
return owner && !owner.isOpen() ? findFocusTarget(owner.origin) : origin;
|
|
1055
|
+
}
|
|
1056
|
+
/**
|
|
1057
|
+
* Whether the focus is on the dialog or lost (on nothing or on the page's body), so it can move.
|
|
1058
|
+
* Otherwise it moved elsewhere, e.g. to another dialog opened over this one.
|
|
1059
|
+
*/
|
|
1060
|
+
function hasFocus(card) {
|
|
1061
|
+
const active = document.activeElement;
|
|
1062
|
+
if (!active) return true;
|
|
1063
|
+
return !!card && (card.contains(active) || active.contains(card));
|
|
1064
|
+
}
|
|
1065
|
+
//#endregion
|
|
1066
|
+
//#region src/components/dialogs/dialog/dialog.vue?vue&type=script&setup=true&lang.ts
|
|
1067
|
+
const _hoisted_1$1 = ["id"];
|
|
1068
|
+
//#endregion
|
|
1069
|
+
//#region src/components/dialogs/dialog/dialog.vue
|
|
1070
|
+
var dialog_default = /* @__PURE__ */ defineComponent({
|
|
1071
|
+
inheritAttrs: false,
|
|
1072
|
+
__name: "dialog",
|
|
1073
|
+
props: /*@__PURE__*/ mergeModels({
|
|
1074
|
+
title: {
|
|
1075
|
+
type: String,
|
|
1076
|
+
required: false
|
|
1077
|
+
},
|
|
1078
|
+
actions: {
|
|
1079
|
+
type: Array,
|
|
1080
|
+
required: false
|
|
1081
|
+
},
|
|
1082
|
+
size: {
|
|
1083
|
+
type: String,
|
|
1084
|
+
required: false
|
|
1085
|
+
},
|
|
1086
|
+
dataTestid: {
|
|
1087
|
+
type: String,
|
|
1088
|
+
required: false
|
|
1089
|
+
}
|
|
1090
|
+
}, {
|
|
1091
|
+
"modelValue": {
|
|
1092
|
+
type: Boolean,
|
|
1093
|
+
default: false
|
|
1094
|
+
},
|
|
1095
|
+
"modelModifiers": {}
|
|
1096
|
+
}),
|
|
1097
|
+
emits: ["update:modelValue"],
|
|
1098
|
+
setup(__props) {
|
|
1099
|
+
const props = __props;
|
|
1100
|
+
const model = useModel(__props, "modelValue");
|
|
1101
|
+
const maxWidths = {
|
|
1102
|
+
small: 400,
|
|
1103
|
+
medium: 560,
|
|
1104
|
+
large: 800
|
|
1105
|
+
};
|
|
1106
|
+
const host = inject(dialogHostKey, null);
|
|
1107
|
+
const contentId = useId();
|
|
1108
|
+
const card = useTemplateRef("card");
|
|
1109
|
+
const title = computed(() => props.title || void 0);
|
|
1110
|
+
const maxWidth = computed(() => maxWidths[props.size ?? "medium"]);
|
|
1111
|
+
const role = computed(() => host?.role() ?? "dialog");
|
|
1112
|
+
/**
|
|
1113
|
+
* Whether the dialog is displayed. It follows `v-model`, but turns `false` as soon as the user
|
|
1114
|
+
* closes the dialog, while `v-model` only does once the leave transition ends.
|
|
1115
|
+
*/
|
|
1116
|
+
const isActive = ref(model.value);
|
|
1117
|
+
watch(model, (value) => isActive.value = value);
|
|
1118
|
+
const { focusFirstElement } = useDialogFocus(() => isActive.value, () => card.value?.$el);
|
|
1119
|
+
function onAfterLeave() {
|
|
1120
|
+
model.value = false;
|
|
1121
|
+
host?.afterLeave();
|
|
1122
|
+
}
|
|
1123
|
+
return (_ctx, _cache) => {
|
|
1124
|
+
return openBlock(), createBlock(unref(VDialog), {
|
|
1125
|
+
modelValue: isActive.value,
|
|
1126
|
+
"onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => isActive.value = $event),
|
|
1127
|
+
persistent: unref(host)?.persistent(),
|
|
1128
|
+
"max-width": maxWidth.value,
|
|
1129
|
+
role: role.value,
|
|
1130
|
+
"aria-label": title.value,
|
|
1131
|
+
"aria-labelledby": title.value ? void 0 : unref(contentId),
|
|
1132
|
+
"aria-describedby": unref(host) ? unref(contentId) : void 0,
|
|
1133
|
+
"data-testid": props.dataTestid,
|
|
1134
|
+
scrollable: "",
|
|
1135
|
+
onAfterEnter: unref(focusFirstElement),
|
|
1136
|
+
onAfterLeave
|
|
1137
|
+
}, {
|
|
1138
|
+
default: withCtx(() => [createCommentVNode(" `data-u-dialog` identifies the card to the dialogs opened from this one "), createVNode(unref(VCard), {
|
|
1139
|
+
ref_key: "card",
|
|
1140
|
+
ref: card,
|
|
1141
|
+
title: title.value,
|
|
1142
|
+
"data-u-dialog": ""
|
|
1143
|
+
}, createSlots({
|
|
1144
|
+
text: withCtx(() => [createElementVNode("div", { id: unref(contentId) }, [renderSlot(_ctx.$slots, "default")], 8, _hoisted_1$1)]),
|
|
1145
|
+
_: 2
|
|
1146
|
+
}, [props.actions?.length ? {
|
|
1147
|
+
name: "actions",
|
|
1148
|
+
fn: withCtx(() => [(openBlock(true), createElementBlock(Fragment, null, renderList(props.actions, ({ label, onClick, ...action }, index) => {
|
|
1149
|
+
return openBlock(), createBlock(button_default, mergeProps({ key: index }, { ref_for: true }, action, { onClick }), {
|
|
1150
|
+
default: withCtx(() => [createTextVNode(toDisplayString(label), 1)]),
|
|
1151
|
+
_: 2
|
|
1152
|
+
}, 1040, ["onClick"]);
|
|
1153
|
+
}), 128))]),
|
|
1154
|
+
key: "0"
|
|
1155
|
+
} : void 0]), 1032, ["title"])]),
|
|
1156
|
+
_: 3
|
|
1157
|
+
}, 8, [
|
|
1158
|
+
"modelValue",
|
|
1159
|
+
"persistent",
|
|
1160
|
+
"max-width",
|
|
1161
|
+
"role",
|
|
1162
|
+
"aria-label",
|
|
1163
|
+
"aria-labelledby",
|
|
1164
|
+
"aria-describedby",
|
|
1165
|
+
"data-testid",
|
|
1166
|
+
"onAfterEnter"
|
|
1167
|
+
]);
|
|
1168
|
+
};
|
|
1169
|
+
}
|
|
1170
|
+
});
|
|
1171
|
+
//#endregion
|
|
1172
|
+
//#region src/components/dialogs/dialog-host.vue
|
|
1173
|
+
var dialog_host_default = /* @__PURE__ */ defineComponent({
|
|
1174
|
+
inheritAttrs: false,
|
|
1175
|
+
__name: "dialog-host",
|
|
1176
|
+
setup(__props) {
|
|
1177
|
+
const owner = Symbol("dialog");
|
|
1178
|
+
const isOwner = computed(() => owners$1.value[0] === owner);
|
|
1179
|
+
const next = computed(() => isOwner.value ? requests.value[0] : void 0);
|
|
1180
|
+
/** Dialog on display, kept until its leave transition ends. */
|
|
1181
|
+
const request = shallowRef();
|
|
1182
|
+
/**
|
|
1183
|
+
* Changes for every dialog on display, so each one gets its own `Dialog`, open from the start.
|
|
1184
|
+
* The next dialog can then open right after a dismissed one, whose `v-model` stays `true`.
|
|
1185
|
+
*/
|
|
1186
|
+
const key = shallowRef();
|
|
1187
|
+
const isOpen = ref(false);
|
|
1188
|
+
const selected = shallowRef();
|
|
1189
|
+
const isRunning = computed(() => selected.value !== void 0);
|
|
1190
|
+
const actions = computed(() => {
|
|
1191
|
+
const current = request.value;
|
|
1192
|
+
if (!current) return void 0;
|
|
1193
|
+
return current.actions.map((action) => ({
|
|
1194
|
+
label: action.text,
|
|
1195
|
+
variant: action.variant,
|
|
1196
|
+
color: action.color,
|
|
1197
|
+
loading: selected.value === action,
|
|
1198
|
+
disabled: isRunning.value && selected.value !== action,
|
|
1199
|
+
onClick: () => void select(current, action)
|
|
1200
|
+
}));
|
|
1201
|
+
});
|
|
1202
|
+
provide(dialogHostKey, {
|
|
1203
|
+
role: () => request.value?.role,
|
|
1204
|
+
persistent: () => isRunning.value,
|
|
1205
|
+
afterLeave: showNext
|
|
1206
|
+
});
|
|
1207
|
+
onMounted(() => owners$1.value.push(owner));
|
|
1208
|
+
onUnmounted(() => owners$1.value = owners$1.value.filter((item) => item !== owner));
|
|
1209
|
+
watch(next, show);
|
|
1210
|
+
function show() {
|
|
1211
|
+
if (request.value) return;
|
|
1212
|
+
request.value = next.value;
|
|
1213
|
+
key.value = Symbol();
|
|
1214
|
+
isOpen.value = next.value !== void 0;
|
|
1215
|
+
}
|
|
1216
|
+
function showNext() {
|
|
1217
|
+
request.value = void 0;
|
|
1218
|
+
show();
|
|
1219
|
+
}
|
|
1220
|
+
async function select(current, action) {
|
|
1221
|
+
requests.value.shift();
|
|
1222
|
+
selected.value = action;
|
|
1223
|
+
await current.select(action?.value);
|
|
1224
|
+
selected.value = void 0;
|
|
1225
|
+
if (action) isOpen.value = false;
|
|
1226
|
+
}
|
|
1227
|
+
/** Called once a dialog closed by the user leaves, right before the next one is displayed. */
|
|
1228
|
+
function dismiss() {
|
|
1229
|
+
if (request.value) select(request.value);
|
|
1230
|
+
}
|
|
1231
|
+
return (_ctx, _cache) => {
|
|
1232
|
+
return openBlock(), createElementBlock(Fragment, null, [createCommentVNode(" PascalCase, since `<dialog>` in the template would render the native HTML element instead "), (openBlock(), createBlock(dialog_default, {
|
|
1233
|
+
key: key.value,
|
|
1234
|
+
"model-value": isOpen.value,
|
|
1235
|
+
title: request.value?.title,
|
|
1236
|
+
actions: actions.value,
|
|
1237
|
+
"onUpdate:modelValue": dismiss
|
|
1238
|
+
}, {
|
|
1239
|
+
default: withCtx(() => [createTextVNode(toDisplayString(request.value?.message), 1)]),
|
|
1240
|
+
_: 1
|
|
1241
|
+
}, 8, [
|
|
1242
|
+
"model-value",
|
|
1243
|
+
"title",
|
|
1244
|
+
"actions"
|
|
1245
|
+
]))], 2112);
|
|
1246
|
+
};
|
|
1247
|
+
}
|
|
1248
|
+
});
|
|
1249
|
+
//#endregion
|
|
1250
|
+
//#region src/components/main/main.vue
|
|
1251
|
+
var main_default = /* @__PURE__ */ defineComponent({
|
|
1252
|
+
inheritAttrs: false,
|
|
1253
|
+
__name: "main",
|
|
1254
|
+
props: /*@__PURE__*/ mergeModels({
|
|
1255
|
+
dataTestid: {
|
|
1256
|
+
type: String,
|
|
1257
|
+
required: false
|
|
1258
|
+
},
|
|
1259
|
+
logo: {
|
|
1260
|
+
type: String,
|
|
1261
|
+
required: false
|
|
1262
|
+
},
|
|
1263
|
+
appBar: {
|
|
1264
|
+
type: Object,
|
|
1265
|
+
required: false
|
|
1266
|
+
},
|
|
1267
|
+
navigationMenu: {
|
|
1268
|
+
type: Object,
|
|
1269
|
+
required: false
|
|
1270
|
+
},
|
|
1271
|
+
footer: {
|
|
1272
|
+
type: Object,
|
|
1273
|
+
required: false
|
|
1274
|
+
},
|
|
1275
|
+
loading: {
|
|
1276
|
+
type: Boolean,
|
|
1277
|
+
required: false
|
|
1278
|
+
}
|
|
1279
|
+
}, {
|
|
1280
|
+
"notificationsOpen": {
|
|
1281
|
+
type: Boolean,
|
|
1282
|
+
default: false
|
|
1283
|
+
},
|
|
1284
|
+
"notificationsOpenModifiers": {}
|
|
1285
|
+
}),
|
|
1286
|
+
emits: ["update:notificationsOpen"],
|
|
1287
|
+
setup(__props) {
|
|
1288
|
+
const props = __props;
|
|
1289
|
+
const appBarProps = computed(() => props.appBar ? {
|
|
1290
|
+
...props.appBar,
|
|
1291
|
+
logo: props.logo,
|
|
1292
|
+
navigation: props.navigationMenu !== void 0,
|
|
1293
|
+
loading: props.loading
|
|
1294
|
+
} : void 0);
|
|
1295
|
+
const notificationsOpen = useModel(__props, "notificationsOpen");
|
|
1296
|
+
const navigationMenuOpen = ref(false);
|
|
1297
|
+
return (_ctx, _cache) => {
|
|
1298
|
+
return openBlock(), createBlock(unref(VApp), { "data-testid": props.dataTestid }, {
|
|
1299
|
+
default: withCtx(() => [
|
|
1300
|
+
appBarProps.value ? (openBlock(), createBlock(app_bar_default, mergeProps({ key: 0 }, appBarProps.value, {
|
|
1301
|
+
"notifications-open": notificationsOpen.value,
|
|
1302
|
+
"onUpdate:notificationsOpen": _cache[0] || (_cache[0] = ($event) => notificationsOpen.value = $event),
|
|
1303
|
+
"navigation-open": navigationMenuOpen.value,
|
|
1304
|
+
"onUpdate:navigationOpen": _cache[1] || (_cache[1] = ($event) => navigationMenuOpen.value = $event)
|
|
1305
|
+
}), null, 16, ["notifications-open", "navigation-open"])) : createCommentVNode("v-if", true),
|
|
1306
|
+
props.navigationMenu ? (openBlock(), createBlock(navigation_menu_default, mergeProps({ key: 1 }, props.navigationMenu, {
|
|
1307
|
+
modelValue: navigationMenuOpen.value,
|
|
1308
|
+
"onUpdate:modelValue": _cache[2] || (_cache[2] = ($event) => navigationMenuOpen.value = $event),
|
|
1309
|
+
loading: props.loading
|
|
1310
|
+
}), null, 16, ["modelValue", "loading"])) : createCommentVNode("v-if", true),
|
|
1311
|
+
createVNode(unref(VMain), null, {
|
|
1312
|
+
default: withCtx(() => [createCommentVNode(" Full height, so the page's rows and containers with `fullHeight` have a height to fill "), createVNode(container_default, { "full-height": "" }, {
|
|
1313
|
+
default: withCtx(() => [
|
|
1314
|
+
renderSlot(_ctx.$slots, "default"),
|
|
1315
|
+
createVNode(toast_default),
|
|
1316
|
+
createVNode(dialog_host_default)
|
|
1317
|
+
]),
|
|
1318
|
+
_: 3
|
|
1319
|
+
})]),
|
|
1320
|
+
_: 3
|
|
1321
|
+
}),
|
|
1322
|
+
props.footer?.description ? (openBlock(), createBlock(footer_default, normalizeProps(mergeProps({ key: 2 }, props.footer)), null, 16)) : createCommentVNode("v-if", true)
|
|
1323
|
+
]),
|
|
1324
|
+
_: 3
|
|
1325
|
+
}, 8, ["data-testid"]);
|
|
1326
|
+
};
|
|
1327
|
+
}
|
|
1328
|
+
});
|
|
1329
|
+
//#endregion
|
|
1330
|
+
//#region src/composables/inputs/autocomplete-field.ts
|
|
1331
|
+
function createAutocompleteRequiredRule(options) {
|
|
1332
|
+
return createRequiredRule(options.required, (value) => {
|
|
1333
|
+
if (options.multiple) return (Array.isArray(value) ? value : []).length > 0;
|
|
1334
|
+
return !isEmpty(String(value ?? ""));
|
|
1335
|
+
});
|
|
1336
|
+
}
|
|
1337
|
+
function useAutocompleteRules(options) {
|
|
1338
|
+
return computed(() => {
|
|
1339
|
+
const opts = toValue(options);
|
|
1340
|
+
const rules = [];
|
|
1341
|
+
if (opts.required) rules.push(createAutocompleteRequiredRule(opts));
|
|
1342
|
+
return rules;
|
|
1343
|
+
});
|
|
1344
|
+
}
|
|
1345
|
+
/**
|
|
1346
|
+
* Menu props that keep the combobox semantics only on the field's `<input>`.
|
|
1347
|
+
*
|
|
1348
|
+
* The field's container gets `role="combobox"` from the field, which passes its
|
|
1349
|
+
* role to both the container and the input, and the menu's ARIA attributes,
|
|
1350
|
+
* since it's the menu's activator. Without these props, the container is
|
|
1351
|
+
* exposed as an unnamed combobox wrapping the input. The menu removes from its
|
|
1352
|
+
* activator the attributes set to `undefined`, role included, and the field
|
|
1353
|
+
* never sets that role again, since its value doesn't change. The input keeps
|
|
1354
|
+
* its role, label, `aria-expanded` and `aria-controls`. This only happens in
|
|
1355
|
+
* the browser: server-rendered HTML still has the role on the container.
|
|
1356
|
+
*/
|
|
1357
|
+
const autocompleteFieldMenuProps = { activatorProps: {
|
|
1358
|
+
role: void 0,
|
|
1359
|
+
"aria-haspopup": void 0,
|
|
1360
|
+
"aria-expanded": void 0,
|
|
1361
|
+
"aria-controls": void 0,
|
|
1362
|
+
"aria-owns": void 0
|
|
1363
|
+
} };
|
|
1364
|
+
//#endregion
|
|
1365
|
+
//#region src/components/inputs/autocomplete-field/autocomplete-field.vue
|
|
1366
|
+
var autocomplete_field_default = /* @__PURE__ */ defineComponent({
|
|
1367
|
+
inheritAttrs: false,
|
|
1368
|
+
__name: "autocomplete-field",
|
|
1369
|
+
props: /*@__PURE__*/ mergeModels({
|
|
1370
|
+
variant: {
|
|
1371
|
+
type: String,
|
|
1372
|
+
required: false,
|
|
1373
|
+
default: "primary"
|
|
1374
|
+
},
|
|
1375
|
+
disabled: {
|
|
1376
|
+
type: Boolean,
|
|
1377
|
+
required: false
|
|
1378
|
+
},
|
|
1379
|
+
loading: {
|
|
1380
|
+
type: Boolean,
|
|
1381
|
+
required: false
|
|
1382
|
+
},
|
|
1383
|
+
clearable: {
|
|
1384
|
+
type: Boolean,
|
|
1385
|
+
required: false
|
|
1386
|
+
},
|
|
1387
|
+
readonly: {
|
|
1388
|
+
type: Boolean,
|
|
1389
|
+
required: false
|
|
1390
|
+
},
|
|
1391
|
+
required: {
|
|
1392
|
+
type: Boolean,
|
|
1393
|
+
required: false
|
|
1394
|
+
},
|
|
1395
|
+
label: {
|
|
1396
|
+
type: String,
|
|
1397
|
+
required: false
|
|
1398
|
+
},
|
|
1399
|
+
placeholder: {
|
|
1400
|
+
type: String,
|
|
1401
|
+
required: false
|
|
1402
|
+
},
|
|
1403
|
+
hint: {
|
|
1404
|
+
type: String,
|
|
1405
|
+
required: false
|
|
1406
|
+
},
|
|
1407
|
+
dataTestid: {
|
|
1408
|
+
type: String,
|
|
1409
|
+
required: false
|
|
1410
|
+
},
|
|
1411
|
+
strict: {
|
|
1412
|
+
type: Boolean,
|
|
1413
|
+
required: false
|
|
1414
|
+
},
|
|
1415
|
+
multiple: {
|
|
1416
|
+
type: null,
|
|
1417
|
+
required: false
|
|
1418
|
+
},
|
|
1419
|
+
items: {
|
|
1420
|
+
type: Array,
|
|
1421
|
+
required: false,
|
|
1422
|
+
default: () => []
|
|
1423
|
+
}
|
|
1424
|
+
}, {
|
|
1425
|
+
"modelValue": { type: null },
|
|
1426
|
+
"modelModifiers": {}
|
|
1427
|
+
}),
|
|
1428
|
+
emits: ["update:modelValue"],
|
|
1429
|
+
setup(__props) {
|
|
1430
|
+
const modelValue = useModel(__props, "modelValue");
|
|
1431
|
+
const props = __props;
|
|
1432
|
+
const vuetifyVariant = useTextFieldVariant(() => props.variant);
|
|
1433
|
+
const isMultiple = computed(() => props.multiple ?? false);
|
|
1434
|
+
const rules = useAutocompleteRules(() => ({
|
|
1435
|
+
required: props.required,
|
|
1436
|
+
multiple: isMultiple.value
|
|
1437
|
+
}));
|
|
1438
|
+
const vuetifyComponent = computed(() => props.strict ? VAutocomplete : VCombobox);
|
|
1439
|
+
const search = ref("");
|
|
1440
|
+
const maskClass = computed(() => props.strict ? "v-autocomplete__mask" : "v-combobox__mask");
|
|
1441
|
+
const normalizedItems = computed(() => {
|
|
1442
|
+
return props.items.map((item) => {
|
|
1443
|
+
if (typeof item === "string") return {
|
|
1444
|
+
label: item,
|
|
1445
|
+
value: item
|
|
1446
|
+
};
|
|
1447
|
+
return item;
|
|
1448
|
+
});
|
|
1449
|
+
});
|
|
1450
|
+
return (_ctx, _cache) => {
|
|
1451
|
+
return openBlock(), createBlock(resolveDynamicComponent(vuetifyComponent.value), {
|
|
1452
|
+
modelValue: modelValue.value,
|
|
1453
|
+
"onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => modelValue.value = $event),
|
|
1454
|
+
search: search.value,
|
|
1455
|
+
"onUpdate:search": _cache[1] || (_cache[1] = ($event) => search.value = $event),
|
|
1456
|
+
variant: unref(vuetifyVariant),
|
|
1457
|
+
items: normalizedItems.value,
|
|
1458
|
+
"data-testid": props.dataTestid,
|
|
1459
|
+
disabled: props.disabled,
|
|
1460
|
+
loading: props.loading,
|
|
1461
|
+
"aria-busy": props.loading || void 0,
|
|
1462
|
+
readonly: props.readonly,
|
|
1463
|
+
label: props.label,
|
|
1464
|
+
placeholder: props.placeholder,
|
|
1465
|
+
hint: props.hint,
|
|
1466
|
+
clearable: props.clearable,
|
|
1467
|
+
multiple: isMultiple.value,
|
|
1468
|
+
"item-title": "label",
|
|
1469
|
+
rules: unref(rules),
|
|
1470
|
+
"menu-props": unref(autocompleteFieldMenuProps),
|
|
1471
|
+
chips: ""
|
|
1472
|
+
}, createSlots({
|
|
1473
|
+
loader: withCtx((loader) => [createVNode(field_loader_default, normalizeProps(guardReactiveProps(loader)), null, 16)]),
|
|
1474
|
+
_: 2
|
|
1475
|
+
}, [isMultiple.value ? {
|
|
1476
|
+
name: "item",
|
|
1477
|
+
fn: withCtx(({ props: itemProps }) => [createVNode(unref(VListItem), normalizeProps(guardReactiveProps(itemProps)), {
|
|
1478
|
+
prepend: withCtx(({ isSelected }) => [createVNode(unref(VCheckboxBtn), {
|
|
1479
|
+
"model-value": isSelected,
|
|
1480
|
+
ripple: false,
|
|
1481
|
+
inert: "",
|
|
1482
|
+
"aria-hidden": "true"
|
|
1483
|
+
}, null, 8, ["model-value"])]),
|
|
1484
|
+
title: withCtx(() => [createVNode(unref(VHighlight), {
|
|
1485
|
+
text: itemProps.title,
|
|
1486
|
+
query: search.value,
|
|
1487
|
+
"match-all": "",
|
|
1488
|
+
"ignore-case": "",
|
|
1489
|
+
"mark-class": maskClass.value
|
|
1490
|
+
}, null, 8, [
|
|
1491
|
+
"text",
|
|
1492
|
+
"query",
|
|
1493
|
+
"mark-class"
|
|
1494
|
+
])]),
|
|
1495
|
+
_: 2
|
|
1496
|
+
}, 1040)]),
|
|
1497
|
+
key: "0"
|
|
1498
|
+
} : void 0]), 1064, [
|
|
1499
|
+
"modelValue",
|
|
1500
|
+
"search",
|
|
1501
|
+
"variant",
|
|
1502
|
+
"items",
|
|
1503
|
+
"data-testid",
|
|
1504
|
+
"disabled",
|
|
1505
|
+
"loading",
|
|
1506
|
+
"aria-busy",
|
|
1507
|
+
"readonly",
|
|
1508
|
+
"label",
|
|
1509
|
+
"placeholder",
|
|
1510
|
+
"hint",
|
|
1511
|
+
"clearable",
|
|
1512
|
+
"multiple",
|
|
1513
|
+
"rules",
|
|
1514
|
+
"menu-props"
|
|
1515
|
+
]);
|
|
1516
|
+
};
|
|
1517
|
+
}
|
|
1518
|
+
});
|
|
1519
|
+
//#endregion
|
|
1520
|
+
//#region src/components/inputs/checkbox/checkbox.vue
|
|
1521
|
+
var checkbox_default = /* @__PURE__ */ defineComponent({
|
|
1522
|
+
inheritAttrs: false,
|
|
1523
|
+
__name: "checkbox",
|
|
1524
|
+
props: /*@__PURE__*/ mergeModels({
|
|
1525
|
+
label: {
|
|
1526
|
+
type: String,
|
|
710
1527
|
required: false
|
|
711
1528
|
},
|
|
712
1529
|
disabled: {
|
|
@@ -763,27 +1580,630 @@ var checkbox_default = /* @__PURE__ */ defineComponent({
|
|
|
763
1580
|
"data-testid",
|
|
764
1581
|
"disabled",
|
|
765
1582
|
"readonly",
|
|
766
|
-
"label"
|
|
1583
|
+
"label"
|
|
1584
|
+
]);
|
|
1585
|
+
};
|
|
1586
|
+
}
|
|
1587
|
+
});
|
|
1588
|
+
//#endregion
|
|
1589
|
+
//#region src/composables/inputs/date-time-field.ts
|
|
1590
|
+
/**
|
|
1591
|
+
* The menu's content is a dialog with the pickers. `aria-owns` is removed since the input can't
|
|
1592
|
+
* own the content, and the menu still adds `aria-expanded` and `aria-controls`.
|
|
1593
|
+
*/
|
|
1594
|
+
const activatorProps = {
|
|
1595
|
+
role: "combobox",
|
|
1596
|
+
"aria-haspopup": "dialog",
|
|
1597
|
+
"aria-owns": void 0
|
|
1598
|
+
};
|
|
1599
|
+
/**
|
|
1600
|
+
* Extracts the date part (`YYYY-MM-DD`) of a value, or an empty string when
|
|
1601
|
+
* the type has no date.
|
|
1602
|
+
*/
|
|
1603
|
+
function getDatePart(value, type) {
|
|
1604
|
+
return type === "time" ? "" : value.split("T")[0];
|
|
1605
|
+
}
|
|
1606
|
+
/**
|
|
1607
|
+
* Extracts the time part (`HH:mm`) of a value, or an empty string when the
|
|
1608
|
+
* value has no time.
|
|
1609
|
+
*/
|
|
1610
|
+
function getTimePart(value, type) {
|
|
1611
|
+
if (type === "time") return value;
|
|
1612
|
+
const [, time = ""] = value.split("T");
|
|
1613
|
+
return time;
|
|
1614
|
+
}
|
|
1615
|
+
/**
|
|
1616
|
+
* Builds a value for the given type, or an empty string while any required
|
|
1617
|
+
* part is missing.
|
|
1618
|
+
*/
|
|
1619
|
+
function joinDateTime(type, date, time) {
|
|
1620
|
+
if (type === "date") return date;
|
|
1621
|
+
if (type === "time") return time;
|
|
1622
|
+
return date && time ? `${date}T${time}` : "";
|
|
1623
|
+
}
|
|
1624
|
+
/**
|
|
1625
|
+
* Formats a value to be displayed in pt-BR, like `24/09/2026`, `14:30` or
|
|
1626
|
+
* `24/09/2026 14:30`.
|
|
1627
|
+
*/
|
|
1628
|
+
function formatDateTime$1(value, type) {
|
|
1629
|
+
return [getDatePart(value, type).split("-").reverse().join("/"), getTimePart(value, type)].filter(Boolean).join(" ");
|
|
1630
|
+
}
|
|
1631
|
+
function useDateTimeFieldRules(props) {
|
|
1632
|
+
const defaultRules = useRules(props);
|
|
1633
|
+
return computed(() => {
|
|
1634
|
+
const rules = [...defaultRules.value];
|
|
1635
|
+
if (props.min) rules.push(minRule(props.min, props.type));
|
|
1636
|
+
if (props.max) rules.push(maxRule(props.max, props.type));
|
|
1637
|
+
return rules;
|
|
1638
|
+
});
|
|
1639
|
+
}
|
|
1640
|
+
/**
|
|
1641
|
+
* Computes the limits of each picker. For `datetime`, time limits only apply
|
|
1642
|
+
* when the selected date is the limit's own date.
|
|
1643
|
+
*/
|
|
1644
|
+
function useDateTimeFieldPickerBounds(props, selectedDate) {
|
|
1645
|
+
return computed(() => {
|
|
1646
|
+
const min = props.min ?? "";
|
|
1647
|
+
const max = props.max ?? "";
|
|
1648
|
+
const date = toValue(selectedDate);
|
|
1649
|
+
return {
|
|
1650
|
+
dateMin: getDatePart(min, props.type),
|
|
1651
|
+
dateMax: getDatePart(max, props.type),
|
|
1652
|
+
timeMin: getTimeBound(min, props.type, date),
|
|
1653
|
+
timeMax: getTimeBound(max, props.type, date)
|
|
1654
|
+
};
|
|
1655
|
+
});
|
|
1656
|
+
}
|
|
1657
|
+
/**
|
|
1658
|
+
* Makes the field's input the activator of the pickers' menu, so the menu's attributes are on an
|
|
1659
|
+
* element whose role accepts them.
|
|
1660
|
+
* @param isOpen - Whether the menu is open.
|
|
1661
|
+
* @param isDisabled - Whether the menu can't open, as when the field is disabled or readonly.
|
|
1662
|
+
* @param hasLabel - Whether the field has a label, which names the menu's dialog.
|
|
1663
|
+
*/
|
|
1664
|
+
function useDateTimeFieldMenu(isOpen, isDisabled, hasLabel) {
|
|
1665
|
+
const inputId = useId();
|
|
1666
|
+
const activator = computed(() => toValue(isDisabled) ? void 0 : `#${inputId}`);
|
|
1667
|
+
const contentProps = computed(() => ({
|
|
1668
|
+
role: "dialog",
|
|
1669
|
+
"aria-labelledby": toValue(hasLabel) ? `${inputId}-label` : void 0
|
|
1670
|
+
}));
|
|
1671
|
+
function open() {
|
|
1672
|
+
if (!toValue(isDisabled)) isOpen.value = true;
|
|
1673
|
+
}
|
|
1674
|
+
return {
|
|
1675
|
+
inputId,
|
|
1676
|
+
activator,
|
|
1677
|
+
activatorProps,
|
|
1678
|
+
contentProps,
|
|
1679
|
+
open
|
|
1680
|
+
};
|
|
1681
|
+
}
|
|
1682
|
+
function getTimeBound(bound, type, selectedDate) {
|
|
1683
|
+
if (type === "datetime" && getDatePart(bound, type) !== selectedDate) return "";
|
|
1684
|
+
return getTimePart(bound, type);
|
|
1685
|
+
}
|
|
1686
|
+
function minRule(min, type) {
|
|
1687
|
+
const message = `Valor anterior ao mínimo permitido (${formatDateTime$1(min, type)})`;
|
|
1688
|
+
return (value) => !value || value >= min || message;
|
|
1689
|
+
}
|
|
1690
|
+
function maxRule(max, type) {
|
|
1691
|
+
const message = `Valor posterior ao máximo permitido (${formatDateTime$1(max, type)})`;
|
|
1692
|
+
return (value) => !value || value <= max || message;
|
|
1693
|
+
}
|
|
1694
|
+
//#endregion
|
|
1695
|
+
//#region src/components/inputs/date-time-field/date-time-field.vue
|
|
1696
|
+
var date_time_field_default = /* @__PURE__ */ defineComponent({
|
|
1697
|
+
inheritAttrs: false,
|
|
1698
|
+
__name: "date-time-field",
|
|
1699
|
+
props: /*@__PURE__*/ mergeModels({
|
|
1700
|
+
variant: {
|
|
1701
|
+
type: String,
|
|
1702
|
+
required: false,
|
|
1703
|
+
default: "primary"
|
|
1704
|
+
},
|
|
1705
|
+
type: {
|
|
1706
|
+
type: String,
|
|
1707
|
+
required: false,
|
|
1708
|
+
default: "datetime"
|
|
1709
|
+
},
|
|
1710
|
+
min: {
|
|
1711
|
+
type: String,
|
|
1712
|
+
required: false
|
|
1713
|
+
},
|
|
1714
|
+
max: {
|
|
1715
|
+
type: String,
|
|
1716
|
+
required: false
|
|
1717
|
+
},
|
|
1718
|
+
disabled: {
|
|
1719
|
+
type: Boolean,
|
|
1720
|
+
required: false
|
|
1721
|
+
},
|
|
1722
|
+
loading: {
|
|
1723
|
+
type: Boolean,
|
|
1724
|
+
required: false
|
|
1725
|
+
},
|
|
1726
|
+
clearable: {
|
|
1727
|
+
type: Boolean,
|
|
1728
|
+
required: false
|
|
1729
|
+
},
|
|
1730
|
+
readonly: {
|
|
1731
|
+
type: Boolean,
|
|
1732
|
+
required: false
|
|
1733
|
+
},
|
|
1734
|
+
required: {
|
|
1735
|
+
type: Boolean,
|
|
1736
|
+
required: false
|
|
1737
|
+
},
|
|
1738
|
+
label: {
|
|
1739
|
+
type: String,
|
|
1740
|
+
required: false
|
|
1741
|
+
},
|
|
1742
|
+
placeholder: {
|
|
1743
|
+
type: String,
|
|
1744
|
+
required: false
|
|
1745
|
+
},
|
|
1746
|
+
hint: {
|
|
1747
|
+
type: String,
|
|
1748
|
+
required: false
|
|
1749
|
+
},
|
|
1750
|
+
dataTestid: {
|
|
1751
|
+
type: String,
|
|
1752
|
+
required: false
|
|
1753
|
+
}
|
|
1754
|
+
}, {
|
|
1755
|
+
"modelValue": {
|
|
1756
|
+
type: String,
|
|
1757
|
+
default: ""
|
|
1758
|
+
},
|
|
1759
|
+
"modelModifiers": {}
|
|
1760
|
+
}),
|
|
1761
|
+
emits: ["update:modelValue"],
|
|
1762
|
+
setup(__props) {
|
|
1763
|
+
const modelValue = useModel(__props, "modelValue");
|
|
1764
|
+
const props = __props;
|
|
1765
|
+
const messages = { "pt-BR": pt };
|
|
1766
|
+
const vuetifyVariant = useTextFieldVariant(() => props.variant);
|
|
1767
|
+
const rules = useDateTimeFieldRules(props);
|
|
1768
|
+
const displayValue = computed(() => formatDateTime$1(modelValue.value, props.type));
|
|
1769
|
+
const isClearable = computed(() => props.clearable && !props.readonly);
|
|
1770
|
+
const isMenuDisabled = computed(() => props.disabled || props.readonly);
|
|
1771
|
+
const isMenuOpen = ref(false);
|
|
1772
|
+
const draft = ref({});
|
|
1773
|
+
const draftDate = computed(() => draft.value.date ?? getDatePart(modelValue.value, props.type));
|
|
1774
|
+
const draftTime = computed(() => draft.value.time ?? getTimePart(modelValue.value, props.type));
|
|
1775
|
+
const draftValue = computed(() => joinDateTime(props.type, draftDate.value, draftTime.value));
|
|
1776
|
+
const bounds = useDateTimeFieldPickerBounds(props, draftDate);
|
|
1777
|
+
const { inputId, activator, activatorProps, contentProps, open: openMenu } = useDateTimeFieldMenu(isMenuOpen, isMenuDisabled, () => !!props.label);
|
|
1778
|
+
watch(isMenuOpen, () => {
|
|
1779
|
+
draft.value = {};
|
|
1780
|
+
});
|
|
1781
|
+
function onDateUpdate(date) {
|
|
1782
|
+
draft.value.date = formatDateTime(date, "YYYY-MM-DD");
|
|
1783
|
+
commitDraft();
|
|
1784
|
+
closeIfComplete();
|
|
1785
|
+
}
|
|
1786
|
+
function onTimeUpdate(time) {
|
|
1787
|
+
draft.value.time = time ?? "";
|
|
1788
|
+
commitDraft();
|
|
1789
|
+
}
|
|
1790
|
+
function commitDraft() {
|
|
1791
|
+
if (draftValue.value) modelValue.value = draftValue.value;
|
|
1792
|
+
}
|
|
1793
|
+
function closeIfComplete() {
|
|
1794
|
+
if (draftValue.value) isMenuOpen.value = false;
|
|
1795
|
+
}
|
|
1796
|
+
function clear() {
|
|
1797
|
+
modelValue.value = "";
|
|
1798
|
+
}
|
|
1799
|
+
return (_ctx, _cache) => {
|
|
1800
|
+
return openBlock(), createBlock(unref(VTextField), {
|
|
1801
|
+
id: unref(inputId),
|
|
1802
|
+
"model-value": displayValue.value,
|
|
1803
|
+
"validation-value": modelValue.value,
|
|
1804
|
+
variant: unref(vuetifyVariant),
|
|
1805
|
+
rules: unref(rules),
|
|
1806
|
+
"data-testid": props.dataTestid,
|
|
1807
|
+
disabled: props.disabled,
|
|
1808
|
+
loading: props.loading,
|
|
1809
|
+
"aria-busy": props.loading || void 0,
|
|
1810
|
+
label: props.label,
|
|
1811
|
+
placeholder: props.placeholder,
|
|
1812
|
+
hint: props.hint,
|
|
1813
|
+
clearable: isClearable.value,
|
|
1814
|
+
readonly: "",
|
|
1815
|
+
"onClick:clear": clear,
|
|
1816
|
+
"onClick:control": unref(openMenu)
|
|
1817
|
+
}, {
|
|
1818
|
+
loader: withCtx((loader) => [createVNode(field_loader_default, normalizeProps(guardReactiveProps(loader)), null, 16)]),
|
|
1819
|
+
default: withCtx(() => [createVNode(unref(VMenu), {
|
|
1820
|
+
modelValue: isMenuOpen.value,
|
|
1821
|
+
"onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => isMenuOpen.value = $event),
|
|
1822
|
+
activator: unref(activator),
|
|
1823
|
+
target: "parent",
|
|
1824
|
+
"activator-props": unref(activatorProps),
|
|
1825
|
+
"content-props": unref(contentProps),
|
|
1826
|
+
location: "bottom start",
|
|
1827
|
+
"min-width": "0",
|
|
1828
|
+
disabled: isMenuDisabled.value,
|
|
1829
|
+
"close-on-content-click": false
|
|
1830
|
+
}, {
|
|
1831
|
+
default: withCtx(() => [createVNode(unref(VCard), null, {
|
|
1832
|
+
default: withCtx(() => [createVNode(unref(VLocaleProvider), {
|
|
1833
|
+
locale: "pt-BR",
|
|
1834
|
+
messages,
|
|
1835
|
+
class: "d-flex flex-wrap"
|
|
1836
|
+
}, {
|
|
1837
|
+
default: withCtx(() => [props.type !== "time" ? (openBlock(), createBlock(unref(VDatePicker), {
|
|
1838
|
+
key: 0,
|
|
1839
|
+
"model-value": draftDate.value || null,
|
|
1840
|
+
min: unref(bounds).dateMin,
|
|
1841
|
+
max: unref(bounds).dateMax,
|
|
1842
|
+
"onUpdate:modelValue": onDateUpdate
|
|
1843
|
+
}, null, 8, [
|
|
1844
|
+
"model-value",
|
|
1845
|
+
"min",
|
|
1846
|
+
"max"
|
|
1847
|
+
])) : createCommentVNode("v-if", true), props.type !== "date" ? (openBlock(), createBlock(unref(VTimePicker), {
|
|
1848
|
+
key: 1,
|
|
1849
|
+
"model-value": draftTime.value,
|
|
1850
|
+
min: unref(bounds).timeMin,
|
|
1851
|
+
max: unref(bounds).timeMax,
|
|
1852
|
+
format: "24hr",
|
|
1853
|
+
"onUpdate:modelValue": onTimeUpdate,
|
|
1854
|
+
"onUpdate:minute": closeIfComplete
|
|
1855
|
+
}, null, 8, [
|
|
1856
|
+
"model-value",
|
|
1857
|
+
"min",
|
|
1858
|
+
"max"
|
|
1859
|
+
])) : createCommentVNode("v-if", true)]),
|
|
1860
|
+
_: 1
|
|
1861
|
+
})]),
|
|
1862
|
+
_: 1
|
|
1863
|
+
})]),
|
|
1864
|
+
_: 1
|
|
1865
|
+
}, 8, [
|
|
1866
|
+
"modelValue",
|
|
1867
|
+
"activator",
|
|
1868
|
+
"activator-props",
|
|
1869
|
+
"content-props",
|
|
1870
|
+
"disabled"
|
|
1871
|
+
])]),
|
|
1872
|
+
_: 1
|
|
1873
|
+
}, 8, [
|
|
1874
|
+
"id",
|
|
1875
|
+
"model-value",
|
|
1876
|
+
"validation-value",
|
|
1877
|
+
"variant",
|
|
1878
|
+
"rules",
|
|
1879
|
+
"data-testid",
|
|
1880
|
+
"disabled",
|
|
1881
|
+
"loading",
|
|
1882
|
+
"aria-busy",
|
|
1883
|
+
"label",
|
|
1884
|
+
"placeholder",
|
|
1885
|
+
"hint",
|
|
1886
|
+
"clearable",
|
|
1887
|
+
"onClick:control"
|
|
1888
|
+
]);
|
|
1889
|
+
};
|
|
1890
|
+
}
|
|
1891
|
+
});
|
|
1892
|
+
//#endregion
|
|
1893
|
+
//#region src/composables/inputs/mask-field.ts
|
|
1894
|
+
/**
|
|
1895
|
+
* Masks of the presets. Our preset names always map to these masks, never to
|
|
1896
|
+
* Vuetify's own presets (e.g. its American `phone`).
|
|
1897
|
+
*/
|
|
1898
|
+
const maskFieldPresets = {
|
|
1899
|
+
cpf: "###.###.###-##",
|
|
1900
|
+
cnpj: "##.###.###/####-##",
|
|
1901
|
+
cep: "#####-###",
|
|
1902
|
+
phone: "(##) #####-####",
|
|
1903
|
+
date: "##/##/####"
|
|
1904
|
+
};
|
|
1905
|
+
/**
|
|
1906
|
+
* Returns the mask of a preset, or the given mask itself when it's a custom
|
|
1907
|
+
* one.
|
|
1908
|
+
*
|
|
1909
|
+
* It takes any string, as the `mask` prop may get one through a cast or from
|
|
1910
|
+
* JavaScript: a string that isn't a preset is taken as the mask.
|
|
1911
|
+
*/
|
|
1912
|
+
function resolveMask(mask) {
|
|
1913
|
+
return isMaskFieldPreset(mask) ? maskFieldPresets[mask] : mask;
|
|
1914
|
+
}
|
|
1915
|
+
/**
|
|
1916
|
+
* Returns a mask as Vuetify reads it. `#` is our only token, but Vuetify always
|
|
1917
|
+
* adds its own tokens (`A`, `a`, `N`, `n` and `X`) and its escape (`\`), so
|
|
1918
|
+
* these characters are escaped to stay literals.
|
|
1919
|
+
*/
|
|
1920
|
+
function toVuetifyMask(mask) {
|
|
1921
|
+
return mask.replaceAll(/[AaNnX\\]/g, String.raw`\$&`);
|
|
1922
|
+
}
|
|
1923
|
+
/**
|
|
1924
|
+
* Returns the default placeholder of a mask: the mask with `0` in place of each
|
|
1925
|
+
* `#`, keeping its literals (e.g. `000.000.000-00` for `cpf`).
|
|
1926
|
+
*/
|
|
1927
|
+
function getMaskPlaceholder(mask) {
|
|
1928
|
+
return mask.replaceAll("#", "0");
|
|
1929
|
+
}
|
|
1930
|
+
function isMaskFieldPreset(mask) {
|
|
1931
|
+
return Object.hasOwn(maskFieldPresets, mask);
|
|
1932
|
+
}
|
|
1933
|
+
/**
|
|
1934
|
+
* Keeps the input masked while the user edits it, emitting only the digits
|
|
1935
|
+
* (Vuetify's `unmask`).
|
|
1936
|
+
*
|
|
1937
|
+
* A `v-model` out of the mask's format (masked, or with characters or length
|
|
1938
|
+
* the mask doesn't accept) is displayed normalized, without being emitted, and
|
|
1939
|
+
* validated as it is, so a value that doesn't fit the mask fails validation.
|
|
1940
|
+
*/
|
|
1941
|
+
function useMaskField(props, model) {
|
|
1942
|
+
const mask = computed(() => resolveMask(props.mask));
|
|
1943
|
+
const digitCount = computed(() => mask.value.split("#").length - 1);
|
|
1944
|
+
const vuetifyMask = useMask({ get mask() {
|
|
1945
|
+
return {
|
|
1946
|
+
mask: toVuetifyMask(mask.value),
|
|
1947
|
+
tokens: {}
|
|
1948
|
+
};
|
|
1949
|
+
} });
|
|
1950
|
+
const displayValue = computed(() => vuetifyMask.mask(unmask(model.value)));
|
|
1951
|
+
const placeholder = computed(() => props.placeholder ?? getMaskPlaceholder(mask.value));
|
|
1952
|
+
const defaultRules = useRules(props);
|
|
1953
|
+
const rules = computed(() => [
|
|
1954
|
+
...defaultRules.value,
|
|
1955
|
+
(value) => !value || !vuetifyMask.isValid(value) || isComplete(value) || "Valor incompleto",
|
|
1956
|
+
(value) => !value || vuetifyMask.isValid(value) || "Valor inválido"
|
|
1957
|
+
]);
|
|
1958
|
+
function unmask(text) {
|
|
1959
|
+
return vuetifyMask.unmask(text) ?? "";
|
|
1960
|
+
}
|
|
1961
|
+
function isComplete(value) {
|
|
1962
|
+
return unmask(vuetifyMask.mask(value)).length === digitCount.value;
|
|
1963
|
+
}
|
|
1964
|
+
/**
|
|
1965
|
+
* Returns the position in a masked text right after the given number of
|
|
1966
|
+
* digits, skipping the literals after it unless the user deleted backwards
|
|
1967
|
+
* (as Vuetify's mask input does).
|
|
1968
|
+
*/
|
|
1969
|
+
function findCaret(masked, valueLength, deletedBackwards) {
|
|
1970
|
+
let caret = 0;
|
|
1971
|
+
let found = 0;
|
|
1972
|
+
while (found < valueLength) {
|
|
1973
|
+
if (!vuetifyMask.isDelimiter(masked, caret)) found++;
|
|
1974
|
+
caret++;
|
|
1975
|
+
}
|
|
1976
|
+
if (!deletedBackwards) while (vuetifyMask.isDelimiter(masked, caret)) caret++;
|
|
1977
|
+
return caret;
|
|
1978
|
+
}
|
|
1979
|
+
function update(input, deletedBackwards) {
|
|
1980
|
+
const caret = input.selectionStart ?? input.value.length;
|
|
1981
|
+
const masked = vuetifyMask.mask(unmask(input.value));
|
|
1982
|
+
const newCaret = findCaret(masked, unmask(vuetifyMask.mask(unmask(input.value.slice(0, caret)))).length, deletedBackwards);
|
|
1983
|
+
const value = unmask(masked);
|
|
1984
|
+
input.value = masked;
|
|
1985
|
+
input.setSelectionRange(newCaret, newCaret);
|
|
1986
|
+
if (value !== unmask(displayValue.value)) model.value = value;
|
|
1987
|
+
}
|
|
1988
|
+
function onInput(event) {
|
|
1989
|
+
if (!event.isComposing) update(event.target, event.inputType.endsWith("Backward"));
|
|
1990
|
+
}
|
|
1991
|
+
function onCompositionEnd(event) {
|
|
1992
|
+
update(event.target, false);
|
|
1993
|
+
}
|
|
1994
|
+
return {
|
|
1995
|
+
displayValue,
|
|
1996
|
+
placeholder,
|
|
1997
|
+
rules,
|
|
1998
|
+
onInput,
|
|
1999
|
+
onCompositionEnd
|
|
2000
|
+
};
|
|
2001
|
+
}
|
|
2002
|
+
//#endregion
|
|
2003
|
+
//#region src/components/inputs/mask-field/mask-field.vue
|
|
2004
|
+
var mask_field_default = /* @__PURE__ */ defineComponent({
|
|
2005
|
+
inheritAttrs: false,
|
|
2006
|
+
__name: "mask-field",
|
|
2007
|
+
props: /*@__PURE__*/ mergeModels({
|
|
2008
|
+
variant: {
|
|
2009
|
+
type: String,
|
|
2010
|
+
required: false,
|
|
2011
|
+
default: "primary"
|
|
2012
|
+
},
|
|
2013
|
+
mask: {
|
|
2014
|
+
type: null,
|
|
2015
|
+
required: true
|
|
2016
|
+
},
|
|
2017
|
+
disabled: {
|
|
2018
|
+
type: Boolean,
|
|
2019
|
+
required: false
|
|
2020
|
+
},
|
|
2021
|
+
loading: {
|
|
2022
|
+
type: Boolean,
|
|
2023
|
+
required: false
|
|
2024
|
+
},
|
|
2025
|
+
clearable: {
|
|
2026
|
+
type: Boolean,
|
|
2027
|
+
required: false
|
|
2028
|
+
},
|
|
2029
|
+
readonly: {
|
|
2030
|
+
type: Boolean,
|
|
2031
|
+
required: false
|
|
2032
|
+
},
|
|
2033
|
+
required: {
|
|
2034
|
+
type: Boolean,
|
|
2035
|
+
required: false
|
|
2036
|
+
},
|
|
2037
|
+
label: {
|
|
2038
|
+
type: String,
|
|
2039
|
+
required: false
|
|
2040
|
+
},
|
|
2041
|
+
placeholder: {
|
|
2042
|
+
type: String,
|
|
2043
|
+
required: false
|
|
2044
|
+
},
|
|
2045
|
+
hint: {
|
|
2046
|
+
type: String,
|
|
2047
|
+
required: false
|
|
2048
|
+
},
|
|
2049
|
+
dataTestid: {
|
|
2050
|
+
type: String,
|
|
2051
|
+
required: false
|
|
2052
|
+
}
|
|
2053
|
+
}, {
|
|
2054
|
+
"modelValue": {
|
|
2055
|
+
type: String,
|
|
2056
|
+
default: ""
|
|
2057
|
+
},
|
|
2058
|
+
"modelModifiers": {}
|
|
2059
|
+
}),
|
|
2060
|
+
emits: ["update:modelValue"],
|
|
2061
|
+
setup(__props) {
|
|
2062
|
+
const modelValue = useModel(__props, "modelValue");
|
|
2063
|
+
const props = __props;
|
|
2064
|
+
const vuetifyVariant = useTextFieldVariant(() => props.variant);
|
|
2065
|
+
const { displayValue, placeholder, rules, onInput, onCompositionEnd } = useMaskField(props, modelValue);
|
|
2066
|
+
function keepFieldControlled() {}
|
|
2067
|
+
function clear() {
|
|
2068
|
+
modelValue.value = "";
|
|
2069
|
+
}
|
|
2070
|
+
return (_ctx, _cache) => {
|
|
2071
|
+
return openBlock(), createBlock(unref(VTextField), {
|
|
2072
|
+
"model-value": unref(displayValue),
|
|
2073
|
+
"validation-value": modelValue.value,
|
|
2074
|
+
variant: unref(vuetifyVariant),
|
|
2075
|
+
rules: unref(rules),
|
|
2076
|
+
"data-testid": props.dataTestid,
|
|
2077
|
+
disabled: props.disabled,
|
|
2078
|
+
loading: props.loading,
|
|
2079
|
+
"aria-busy": props.loading || void 0,
|
|
2080
|
+
readonly: props.readonly,
|
|
2081
|
+
label: props.label,
|
|
2082
|
+
placeholder: unref(placeholder),
|
|
2083
|
+
hint: props.hint,
|
|
2084
|
+
clearable: props.clearable,
|
|
2085
|
+
type: "text",
|
|
2086
|
+
inputmode: "numeric",
|
|
2087
|
+
"onUpdate:modelValue": keepFieldControlled,
|
|
2088
|
+
onInput: unref(onInput),
|
|
2089
|
+
onCompositionend: unref(onCompositionEnd),
|
|
2090
|
+
"onClick:clear": clear
|
|
2091
|
+
}, {
|
|
2092
|
+
loader: withCtx((loader) => [createVNode(field_loader_default, normalizeProps(guardReactiveProps(loader)), null, 16)]),
|
|
2093
|
+
_: 1
|
|
2094
|
+
}, 8, [
|
|
2095
|
+
"model-value",
|
|
2096
|
+
"validation-value",
|
|
2097
|
+
"variant",
|
|
2098
|
+
"rules",
|
|
2099
|
+
"data-testid",
|
|
2100
|
+
"disabled",
|
|
2101
|
+
"loading",
|
|
2102
|
+
"aria-busy",
|
|
2103
|
+
"readonly",
|
|
2104
|
+
"label",
|
|
2105
|
+
"placeholder",
|
|
2106
|
+
"hint",
|
|
2107
|
+
"clearable",
|
|
2108
|
+
"onInput",
|
|
2109
|
+
"onCompositionend"
|
|
767
2110
|
]);
|
|
768
2111
|
};
|
|
769
2112
|
}
|
|
770
2113
|
});
|
|
771
2114
|
//#endregion
|
|
2115
|
+
//#region src/composables/alignment/alignment.ts
|
|
2116
|
+
const alignXToClass = {
|
|
2117
|
+
start: "justify-start",
|
|
2118
|
+
center: "justify-center",
|
|
2119
|
+
end: "justify-end"
|
|
2120
|
+
};
|
|
2121
|
+
const alignYToClasses = {
|
|
2122
|
+
start: {
|
|
2123
|
+
items: "align-start",
|
|
2124
|
+
content: "align-content-start"
|
|
2125
|
+
},
|
|
2126
|
+
center: {
|
|
2127
|
+
items: "align-center",
|
|
2128
|
+
content: "align-content-center"
|
|
2129
|
+
},
|
|
2130
|
+
end: {
|
|
2131
|
+
items: "align-end",
|
|
2132
|
+
content: "align-content-end"
|
|
2133
|
+
},
|
|
2134
|
+
stretch: {
|
|
2135
|
+
items: "align-stretch",
|
|
2136
|
+
content: "align-content-stretch"
|
|
2137
|
+
}
|
|
2138
|
+
};
|
|
2139
|
+
/**
|
|
2140
|
+
* Vuetify's `justify-*` utility class for components with an `alignX` prop, laid out with flexbox.
|
|
2141
|
+
* Falls back to `"start"`.
|
|
2142
|
+
*/
|
|
2143
|
+
function useAlignX(alignX) {
|
|
2144
|
+
return computed(() => alignXToClass[toValue(alignX) ?? "start"]);
|
|
2145
|
+
}
|
|
2146
|
+
/**
|
|
2147
|
+
* Vuetify's `align-*` and `align-content-*` utility classes for components with an `alignY` prop,
|
|
2148
|
+
* laid out with flexbox. Falls back to `"start"`.
|
|
2149
|
+
*/
|
|
2150
|
+
function useAlignY(alignY) {
|
|
2151
|
+
return computed(() => alignYToClasses[toValue(alignY) ?? "start"]);
|
|
2152
|
+
}
|
|
2153
|
+
//#endregion
|
|
772
2154
|
//#region src/components/grid/row/row.vue
|
|
773
2155
|
var row_default = /* @__PURE__ */ defineComponent({
|
|
774
2156
|
inheritAttrs: false,
|
|
775
2157
|
__name: "row",
|
|
776
|
-
props: {
|
|
777
|
-
|
|
778
|
-
|
|
779
|
-
|
|
2158
|
+
props: {
|
|
2159
|
+
alignX: {
|
|
2160
|
+
type: String,
|
|
2161
|
+
required: false
|
|
2162
|
+
},
|
|
2163
|
+
alignY: {
|
|
2164
|
+
type: String,
|
|
2165
|
+
required: false
|
|
2166
|
+
},
|
|
2167
|
+
fullHeight: {
|
|
2168
|
+
type: Boolean,
|
|
2169
|
+
required: false
|
|
2170
|
+
},
|
|
2171
|
+
list: {
|
|
2172
|
+
type: Boolean,
|
|
2173
|
+
required: false
|
|
2174
|
+
},
|
|
2175
|
+
dataTestid: {
|
|
2176
|
+
type: String,
|
|
2177
|
+
required: false
|
|
2178
|
+
}
|
|
2179
|
+
},
|
|
780
2180
|
setup(__props) {
|
|
781
2181
|
const props = __props;
|
|
2182
|
+
const alignXClass = useAlignX(() => props.alignX);
|
|
2183
|
+
const alignYClasses = useAlignY(() => props.alignY);
|
|
2184
|
+
const heightClass = useFullHeight(() => props.fullHeight);
|
|
2185
|
+
const alignContentClass = computed(() => props.fullHeight ? alignYClasses.value.content : void 0);
|
|
2186
|
+
const tag = computed(() => props.list ? "ul" : void 0);
|
|
2187
|
+
const listClasses = computed(() => props.list ? "pa-0 ma-0" : void 0);
|
|
782
2188
|
return (_ctx, _cache) => {
|
|
783
|
-
return openBlock(), createBlock(unref(VRow), {
|
|
2189
|
+
return openBlock(), createBlock(unref(VRow), {
|
|
2190
|
+
tag: tag.value,
|
|
2191
|
+
class: normalizeClass([
|
|
2192
|
+
unref(alignXClass),
|
|
2193
|
+
unref(alignYClasses).items,
|
|
2194
|
+
unref(heightClass),
|
|
2195
|
+
alignContentClass.value,
|
|
2196
|
+
listClasses.value
|
|
2197
|
+
]),
|
|
2198
|
+
"data-testid": props.dataTestid
|
|
2199
|
+
}, {
|
|
784
2200
|
default: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
|
|
785
2201
|
_: 3
|
|
786
|
-
}, 8, [
|
|
2202
|
+
}, 8, [
|
|
2203
|
+
"tag",
|
|
2204
|
+
"class",
|
|
2205
|
+
"data-testid"
|
|
2206
|
+
]);
|
|
787
2207
|
};
|
|
788
2208
|
}
|
|
789
2209
|
});
|
|
@@ -798,6 +2218,10 @@ var column_default = /* @__PURE__ */ defineComponent({
|
|
|
798
2218
|
required: false,
|
|
799
2219
|
default: "12"
|
|
800
2220
|
},
|
|
2221
|
+
listItem: {
|
|
2222
|
+
type: Boolean,
|
|
2223
|
+
required: false
|
|
2224
|
+
},
|
|
801
2225
|
dataTestid: {
|
|
802
2226
|
type: String,
|
|
803
2227
|
required: false
|
|
@@ -805,15 +2229,24 @@ var column_default = /* @__PURE__ */ defineComponent({
|
|
|
805
2229
|
},
|
|
806
2230
|
setup(__props) {
|
|
807
2231
|
const props = __props;
|
|
2232
|
+
const tag = computed(() => props.listItem ? "li" : void 0);
|
|
2233
|
+
const listItemClasses = computed(() => props.listItem ? "d-block" : void 0);
|
|
808
2234
|
return (_ctx, _cache) => {
|
|
809
2235
|
return openBlock(), createBlock(unref(VCol), {
|
|
810
2236
|
cols: "12",
|
|
811
2237
|
sm: props.cols,
|
|
2238
|
+
tag: tag.value,
|
|
2239
|
+
class: normalizeClass(listItemClasses.value),
|
|
812
2240
|
"data-testid": props.dataTestid
|
|
813
2241
|
}, {
|
|
814
2242
|
default: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
|
|
815
2243
|
_: 3
|
|
816
|
-
}, 8, [
|
|
2244
|
+
}, 8, [
|
|
2245
|
+
"sm",
|
|
2246
|
+
"tag",
|
|
2247
|
+
"class",
|
|
2248
|
+
"data-testid"
|
|
2249
|
+
]);
|
|
817
2250
|
};
|
|
818
2251
|
}
|
|
819
2252
|
});
|
|
@@ -878,6 +2311,26 @@ function useSectionVariant(variant) {
|
|
|
878
2311
|
return variantValue ? sectionVariantToVuetifyVariant[variantValue] : sectionVariantToVuetifyVariant.primary;
|
|
879
2312
|
});
|
|
880
2313
|
}
|
|
2314
|
+
const sectionTextAlignToClasses = {
|
|
2315
|
+
start: {
|
|
2316
|
+
content: "text-start",
|
|
2317
|
+
actions: "justify-end"
|
|
2318
|
+
},
|
|
2319
|
+
center: {
|
|
2320
|
+
content: "text-center",
|
|
2321
|
+
actions: "justify-center"
|
|
2322
|
+
},
|
|
2323
|
+
end: {
|
|
2324
|
+
content: "text-end",
|
|
2325
|
+
actions: "justify-end"
|
|
2326
|
+
}
|
|
2327
|
+
};
|
|
2328
|
+
function useSectionTextAlign(textAlign) {
|
|
2329
|
+
return computed(() => {
|
|
2330
|
+
const textAlignValue = toValue(textAlign);
|
|
2331
|
+
return textAlignValue ? sectionTextAlignToClasses[textAlignValue] : sectionTextAlignToClasses.start;
|
|
2332
|
+
});
|
|
2333
|
+
}
|
|
881
2334
|
//#endregion
|
|
882
2335
|
//#region src/components/sections/section/section.vue
|
|
883
2336
|
var section_default = /* @__PURE__ */ defineComponent({
|
|
@@ -896,6 +2349,10 @@ var section_default = /* @__PURE__ */ defineComponent({
|
|
|
896
2349
|
type: String,
|
|
897
2350
|
required: false
|
|
898
2351
|
},
|
|
2352
|
+
textAlign: {
|
|
2353
|
+
type: String,
|
|
2354
|
+
required: false
|
|
2355
|
+
},
|
|
899
2356
|
actions: {
|
|
900
2357
|
type: Array,
|
|
901
2358
|
required: false
|
|
@@ -920,31 +2377,35 @@ var section_default = /* @__PURE__ */ defineComponent({
|
|
|
920
2377
|
setup(__props) {
|
|
921
2378
|
const props = __props;
|
|
922
2379
|
const variant = useSectionVariant(() => props.variant);
|
|
2380
|
+
const textAlignClasses = useSectionTextAlign(() => props.textAlign);
|
|
923
2381
|
const title = computed(() => props.title || void 0);
|
|
924
2382
|
const subtitle = computed(() => props.subtitle || void 0);
|
|
925
|
-
const
|
|
926
|
-
const
|
|
2383
|
+
const widthClass = useFullWidth(() => props.fullWidth);
|
|
2384
|
+
const heightClass = useFullHeight(() => props.fullHeight);
|
|
927
2385
|
const showActions = computed(() => !!props.actions?.length);
|
|
928
2386
|
const skeletonType = computed(() => showActions.value ? "image, actions" : "image");
|
|
929
2387
|
return (_ctx, _cache) => {
|
|
930
|
-
return openBlock(), createBlock(
|
|
2388
|
+
return openBlock(), createBlock(skeleton_loader_default, {
|
|
931
2389
|
loading: props.loading,
|
|
932
2390
|
type: skeletonType.value,
|
|
933
|
-
width:
|
|
934
|
-
height:
|
|
2391
|
+
"full-width": props.fullWidth,
|
|
2392
|
+
"full-height": props.fullHeight
|
|
935
2393
|
}, {
|
|
936
|
-
default: withCtx(() => [createVNode(unref(VCard), {
|
|
2394
|
+
default: withCtx(() => [createCommentVNode(" The card and its actions have no alignment props, so `textAlign` uses utility classes "), createVNode(unref(VCard), {
|
|
937
2395
|
title: title.value,
|
|
938
2396
|
subtitle: subtitle.value,
|
|
939
2397
|
variant: unref(variant),
|
|
940
|
-
width: width.value,
|
|
941
|
-
height: height.value,
|
|
942
2398
|
"data-testid": props.dataTestid,
|
|
943
|
-
class:
|
|
2399
|
+
class: normalizeClass([
|
|
2400
|
+
"d-flex flex-column",
|
|
2401
|
+
unref(widthClass),
|
|
2402
|
+
unref(heightClass),
|
|
2403
|
+
unref(textAlignClasses).content
|
|
2404
|
+
])
|
|
944
2405
|
}, {
|
|
945
2406
|
default: withCtx(() => [renderSlot(_ctx.$slots, "default"), showActions.value ? (openBlock(), createBlock(unref(VCardActions), {
|
|
946
2407
|
key: 0,
|
|
947
|
-
class: "mt-auto"
|
|
2408
|
+
class: normalizeClass(["mt-auto", unref(textAlignClasses).actions])
|
|
948
2409
|
}, {
|
|
949
2410
|
default: withCtx(() => [(openBlock(true), createElementBlock(Fragment, null, renderList(props.actions, ({ label, onClick, ...action }, index) => {
|
|
950
2411
|
return openBlock(), createBlock(button_default, mergeProps({ key: index }, { ref_for: true }, action, { onClick }), {
|
|
@@ -953,22 +2414,21 @@ var section_default = /* @__PURE__ */ defineComponent({
|
|
|
953
2414
|
}, 1040, ["onClick"]);
|
|
954
2415
|
}), 128))]),
|
|
955
2416
|
_: 1
|
|
956
|
-
})) : createCommentVNode("v-if", true)]),
|
|
2417
|
+
}, 8, ["class"])) : createCommentVNode("v-if", true)]),
|
|
957
2418
|
_: 3
|
|
958
2419
|
}, 8, [
|
|
959
2420
|
"title",
|
|
960
2421
|
"subtitle",
|
|
961
2422
|
"variant",
|
|
962
|
-
"
|
|
963
|
-
"
|
|
964
|
-
"data-testid"
|
|
2423
|
+
"data-testid",
|
|
2424
|
+
"class"
|
|
965
2425
|
])]),
|
|
966
2426
|
_: 3
|
|
967
2427
|
}, 8, [
|
|
968
2428
|
"loading",
|
|
969
2429
|
"type",
|
|
970
|
-
"width",
|
|
971
|
-
"height"
|
|
2430
|
+
"full-width",
|
|
2431
|
+
"full-height"
|
|
972
2432
|
]);
|
|
973
2433
|
};
|
|
974
2434
|
}
|
|
@@ -1018,7 +2478,7 @@ var table_default = /* @__PURE__ */ defineComponent({
|
|
|
1018
2478
|
return `${props.dataTestid}-${index}`;
|
|
1019
2479
|
}
|
|
1020
2480
|
return (_ctx, _cache) => {
|
|
1021
|
-
return openBlock(), createBlock(
|
|
2481
|
+
return openBlock(), createBlock(skeleton_loader_default, {
|
|
1022
2482
|
loading: props.loading,
|
|
1023
2483
|
type: type.value
|
|
1024
2484
|
}, {
|
|
@@ -1056,4 +2516,448 @@ var table_default = /* @__PURE__ */ defineComponent({
|
|
|
1056
2516
|
}
|
|
1057
2517
|
});
|
|
1058
2518
|
//#endregion
|
|
1059
|
-
|
|
2519
|
+
//#region src/components/details/details.vue
|
|
2520
|
+
var details_default = /* @__PURE__ */ defineComponent({
|
|
2521
|
+
inheritAttrs: false,
|
|
2522
|
+
__name: "details",
|
|
2523
|
+
props: {
|
|
2524
|
+
variant: {
|
|
2525
|
+
type: String,
|
|
2526
|
+
required: false
|
|
2527
|
+
},
|
|
2528
|
+
title: {
|
|
2529
|
+
type: String,
|
|
2530
|
+
required: false
|
|
2531
|
+
},
|
|
2532
|
+
loading: {
|
|
2533
|
+
type: Boolean,
|
|
2534
|
+
required: false
|
|
2535
|
+
},
|
|
2536
|
+
dataTestid: {
|
|
2537
|
+
type: String,
|
|
2538
|
+
required: false
|
|
2539
|
+
}
|
|
2540
|
+
},
|
|
2541
|
+
setup(__props) {
|
|
2542
|
+
const props = __props;
|
|
2543
|
+
const outlined = computed(() => props.variant === "secondary");
|
|
2544
|
+
return (_ctx, _cache) => {
|
|
2545
|
+
return openBlock(), createBlock(skeleton_loader_default, {
|
|
2546
|
+
loading: props.loading,
|
|
2547
|
+
type: "heading",
|
|
2548
|
+
"full-width": ""
|
|
2549
|
+
}, {
|
|
2550
|
+
default: withCtx(() => [createVNode(unref(VExpansionPanels), {
|
|
2551
|
+
flat: outlined.value,
|
|
2552
|
+
"data-testid": props.dataTestid
|
|
2553
|
+
}, {
|
|
2554
|
+
default: withCtx(() => [createVNode(unref(VExpansionPanel), { class: normalizeClass({ border: outlined.value }) }, {
|
|
2555
|
+
default: withCtx(() => [createVNode(unref(VExpansionPanelTitle), null, {
|
|
2556
|
+
default: withCtx(() => [createTextVNode(toDisplayString(props.title), 1)]),
|
|
2557
|
+
_: 1
|
|
2558
|
+
}), createVNode(unref(VExpansionPanelText), null, {
|
|
2559
|
+
default: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
|
|
2560
|
+
_: 3
|
|
2561
|
+
})]),
|
|
2562
|
+
_: 3
|
|
2563
|
+
}, 8, ["class"])]),
|
|
2564
|
+
_: 3
|
|
2565
|
+
}, 8, ["flat", "data-testid"])]),
|
|
2566
|
+
_: 3
|
|
2567
|
+
}, 8, ["loading"]);
|
|
2568
|
+
};
|
|
2569
|
+
}
|
|
2570
|
+
});
|
|
2571
|
+
//#endregion
|
|
2572
|
+
//#region src/components/img/img.vue
|
|
2573
|
+
var img_default = /* @__PURE__ */ defineComponent({
|
|
2574
|
+
inheritAttrs: false,
|
|
2575
|
+
__name: "img",
|
|
2576
|
+
props: {
|
|
2577
|
+
src: {
|
|
2578
|
+
type: String,
|
|
2579
|
+
required: true
|
|
2580
|
+
},
|
|
2581
|
+
width: {
|
|
2582
|
+
type: [Number, String],
|
|
2583
|
+
required: false
|
|
2584
|
+
},
|
|
2585
|
+
height: {
|
|
2586
|
+
type: [Number, String],
|
|
2587
|
+
required: false
|
|
2588
|
+
},
|
|
2589
|
+
aspectRatio: {
|
|
2590
|
+
type: Number,
|
|
2591
|
+
required: false
|
|
2592
|
+
},
|
|
2593
|
+
cover: {
|
|
2594
|
+
type: Boolean,
|
|
2595
|
+
required: false
|
|
2596
|
+
},
|
|
2597
|
+
eager: {
|
|
2598
|
+
type: Boolean,
|
|
2599
|
+
required: false
|
|
2600
|
+
},
|
|
2601
|
+
dataTestid: {
|
|
2602
|
+
type: String,
|
|
2603
|
+
required: false
|
|
2604
|
+
}
|
|
2605
|
+
},
|
|
2606
|
+
setup(__props) {
|
|
2607
|
+
const props = __props;
|
|
2608
|
+
return (_ctx, _cache) => {
|
|
2609
|
+
return openBlock(), createBlock(unref(VImg), {
|
|
2610
|
+
src: props.src,
|
|
2611
|
+
alt: "",
|
|
2612
|
+
width: props.width,
|
|
2613
|
+
height: props.height,
|
|
2614
|
+
"aspect-ratio": props.aspectRatio,
|
|
2615
|
+
cover: props.cover,
|
|
2616
|
+
eager: props.eager,
|
|
2617
|
+
"data-testid": props.dataTestid
|
|
2618
|
+
}, null, 8, [
|
|
2619
|
+
"src",
|
|
2620
|
+
"width",
|
|
2621
|
+
"height",
|
|
2622
|
+
"aspect-ratio",
|
|
2623
|
+
"cover",
|
|
2624
|
+
"eager",
|
|
2625
|
+
"data-testid"
|
|
2626
|
+
]);
|
|
2627
|
+
};
|
|
2628
|
+
}
|
|
2629
|
+
});
|
|
2630
|
+
//#endregion
|
|
2631
|
+
//#region src/components/link/link.vue
|
|
2632
|
+
var link_default = /* @__PURE__ */ defineComponent({
|
|
2633
|
+
inheritAttrs: false,
|
|
2634
|
+
__name: "link",
|
|
2635
|
+
props: {
|
|
2636
|
+
route: {
|
|
2637
|
+
type: null,
|
|
2638
|
+
required: true
|
|
2639
|
+
},
|
|
2640
|
+
dataTestid: {
|
|
2641
|
+
type: String,
|
|
2642
|
+
required: false
|
|
2643
|
+
}
|
|
2644
|
+
},
|
|
2645
|
+
setup(__props) {
|
|
2646
|
+
const props = __props;
|
|
2647
|
+
const routeProps = useRouteProps(() => props.route);
|
|
2648
|
+
return (_ctx, _cache) => {
|
|
2649
|
+
return openBlock(), createElementBlock(Fragment, null, [createCommentVNode(" No Vuetify component renders an inline text link, so the class removes the browser's underline "), (openBlock(), createBlock(resolveDynamicComponent(unref(isExternalRoute)(props.route) ? "a" : unref(RouterLink)), mergeProps(unref(routeProps), {
|
|
2650
|
+
class: "text-decoration-none",
|
|
2651
|
+
"data-testid": props.dataTestid
|
|
2652
|
+
}), {
|
|
2653
|
+
default: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
|
|
2654
|
+
_: 3
|
|
2655
|
+
}, 16, ["data-testid"]))], 2112);
|
|
2656
|
+
};
|
|
2657
|
+
}
|
|
2658
|
+
});
|
|
2659
|
+
//#endregion
|
|
2660
|
+
//#region src/composables/data-set/data-set.ts
|
|
2661
|
+
/**
|
|
2662
|
+
* Width, out of the grid's 12 columns, taken by each record so that
|
|
2663
|
+
* `columns` records fit side by side on a row.
|
|
2664
|
+
*/
|
|
2665
|
+
const dataSetColumnsToColumnCols = {
|
|
2666
|
+
1: "12",
|
|
2667
|
+
2: "6",
|
|
2668
|
+
3: "4",
|
|
2669
|
+
4: "3",
|
|
2670
|
+
6: "2"
|
|
2671
|
+
};
|
|
2672
|
+
/**
|
|
2673
|
+
* Space, in pixels, between two cards of the same row: the default gutter of
|
|
2674
|
+
* `URow`/`UColumn` (Vuetify's `v-row` with its default density puts a 24px
|
|
2675
|
+
* gap between its columns). `n` cards side by side take `n` card widths plus
|
|
2676
|
+
* `n - 1` gaps, so they fit in `width` pixels when
|
|
2677
|
+
* `n * (minDataSetItemWidth + gap) <= width + gap`.
|
|
2678
|
+
*/
|
|
2679
|
+
const dataSetItemGap = 24;
|
|
2680
|
+
/**
|
|
2681
|
+
* Supported numbers of records per row, from the largest to the smallest.
|
|
2682
|
+
*/
|
|
2683
|
+
const dataSetColumnsOptions = [
|
|
2684
|
+
6,
|
|
2685
|
+
4,
|
|
2686
|
+
3,
|
|
2687
|
+
2,
|
|
2688
|
+
1
|
|
2689
|
+
];
|
|
2690
|
+
/**
|
|
2691
|
+
* Number of records to place side by side: the largest supported amount, up
|
|
2692
|
+
* to `columns`, that keeps each card at least {@link minDataSetItemWidth}
|
|
2693
|
+
* pixels wide, besides the {@link dataSetItemGap} between cards, in a data set
|
|
2694
|
+
* `width` pixels wide, but never less than one.
|
|
2695
|
+
* While the width is unknown (`0`, e.g. before the first measure or during
|
|
2696
|
+
* server-side rendering), `columns` is used as is.
|
|
2697
|
+
*/
|
|
2698
|
+
function getDataSetFittingColumns(columns, width) {
|
|
2699
|
+
if (!width) return columns;
|
|
2700
|
+
const fittingColumns = Math.min(columns, Math.floor((width + dataSetItemGap) / 264));
|
|
2701
|
+
return dataSetColumnsOptions.find((option) => option <= fittingColumns) ?? 1;
|
|
2702
|
+
}
|
|
2703
|
+
/**
|
|
2704
|
+
* Reactive version of {@link getDataSetFittingColumns}.
|
|
2705
|
+
*/
|
|
2706
|
+
function useDataSetFittingColumns(columns, width) {
|
|
2707
|
+
return computed(() => getDataSetFittingColumns(toValue(columns), toValue(width)));
|
|
2708
|
+
}
|
|
2709
|
+
/**
|
|
2710
|
+
* Width, in pixels, of the given element, kept up to date with a
|
|
2711
|
+
* `ResizeObserver`. It's `0` while there's no element, e.g. before it's
|
|
2712
|
+
* mounted, and the observer is disconnected when the element changes or the
|
|
2713
|
+
* calling scope is disposed.
|
|
2714
|
+
*/
|
|
2715
|
+
function useDataSetWidth(element) {
|
|
2716
|
+
const width = ref(0);
|
|
2717
|
+
let observer;
|
|
2718
|
+
function disconnect() {
|
|
2719
|
+
observer?.disconnect();
|
|
2720
|
+
observer = void 0;
|
|
2721
|
+
}
|
|
2722
|
+
watch(() => toValue(element), (currentElement) => {
|
|
2723
|
+
disconnect();
|
|
2724
|
+
width.value = 0;
|
|
2725
|
+
if (!currentElement) return;
|
|
2726
|
+
observer = new ResizeObserver(([entry]) => {
|
|
2727
|
+
width.value = entry.contentRect.width;
|
|
2728
|
+
});
|
|
2729
|
+
observer.observe(currentElement);
|
|
2730
|
+
}, { immediate: true });
|
|
2731
|
+
onScopeDispose(disconnect);
|
|
2732
|
+
return width;
|
|
2733
|
+
}
|
|
2734
|
+
/**
|
|
2735
|
+
* Maps the number of records per row to the width of each record's grid
|
|
2736
|
+
* column.
|
|
2737
|
+
*/
|
|
2738
|
+
function useDataSetColumnCols(columns) {
|
|
2739
|
+
return computed(() => dataSetColumnsToColumnCols[toValue(columns)]);
|
|
2740
|
+
}
|
|
2741
|
+
/**
|
|
2742
|
+
* Maps the record properties considered by the search to Vuetify's filter
|
|
2743
|
+
* keys. An empty list means every property, just like an undefined one.
|
|
2744
|
+
*/
|
|
2745
|
+
function useDataSetFilterKeys(searchKeys) {
|
|
2746
|
+
return computed(() => {
|
|
2747
|
+
const keys = toValue(searchKeys);
|
|
2748
|
+
return keys?.length ? keys : void 0;
|
|
2749
|
+
});
|
|
2750
|
+
}
|
|
2751
|
+
/**
|
|
2752
|
+
* Up to this many pages, every page button is shown. Vuetify's automatic
|
|
2753
|
+
* sizing collapses 3 pages into `1 … 2 … 3` in containers narrower than
|
|
2754
|
+
* ~336px, although showing every page never takes more room than its
|
|
2755
|
+
* collapsed form (`1 … x … 5`, 5 buttons) up to this amount.
|
|
2756
|
+
*/
|
|
2757
|
+
const maxAlwaysVisiblePages = 5;
|
|
2758
|
+
/**
|
|
2759
|
+
* Number of page buttons to show for `pageCount` pages: every page up to
|
|
2760
|
+
* {@link maxAlwaysVisiblePages}, otherwise `undefined` to let Vuetify fit them
|
|
2761
|
+
* to the available width.
|
|
2762
|
+
*/
|
|
2763
|
+
function getDataSetTotalVisible(pageCount) {
|
|
2764
|
+
return pageCount <= maxAlwaysVisiblePages ? pageCount : void 0;
|
|
2765
|
+
}
|
|
2766
|
+
/**
|
|
2767
|
+
* Goes back to the first page whenever the search changes. It must run before
|
|
2768
|
+
* the new search reaches Vuetify's iterator, which would otherwise clamp the
|
|
2769
|
+
* outdated page to the last one of the filtered records.
|
|
2770
|
+
*/
|
|
2771
|
+
function useDataSetSearchPageReset(search, page) {
|
|
2772
|
+
watch(() => toValue(search), () => {
|
|
2773
|
+
page.value = 1;
|
|
2774
|
+
});
|
|
2775
|
+
}
|
|
2776
|
+
//#endregion
|
|
2777
|
+
//#region src/components/data-sets/data-set/data-set.vue
|
|
2778
|
+
var data_set_default = /* @__PURE__ */ defineComponent({
|
|
2779
|
+
inheritAttrs: false,
|
|
2780
|
+
__name: "data-set",
|
|
2781
|
+
props: /*@__PURE__*/ mergeModels({
|
|
2782
|
+
items: {
|
|
2783
|
+
type: Array,
|
|
2784
|
+
required: false
|
|
2785
|
+
},
|
|
2786
|
+
columns: {
|
|
2787
|
+
type: Number,
|
|
2788
|
+
required: false,
|
|
2789
|
+
default: 3
|
|
2790
|
+
},
|
|
2791
|
+
itemsPerPage: {
|
|
2792
|
+
type: Number,
|
|
2793
|
+
required: false,
|
|
2794
|
+
default: 10
|
|
2795
|
+
},
|
|
2796
|
+
searchable: {
|
|
2797
|
+
type: Boolean,
|
|
2798
|
+
required: false
|
|
2799
|
+
},
|
|
2800
|
+
searchKeys: {
|
|
2801
|
+
type: Array,
|
|
2802
|
+
required: false
|
|
2803
|
+
},
|
|
2804
|
+
noDataText: {
|
|
2805
|
+
type: String,
|
|
2806
|
+
required: false,
|
|
2807
|
+
default: "Nenhum registro encontrado."
|
|
2808
|
+
},
|
|
2809
|
+
loading: {
|
|
2810
|
+
type: Boolean,
|
|
2811
|
+
required: false
|
|
2812
|
+
},
|
|
2813
|
+
dataTestid: {
|
|
2814
|
+
type: String,
|
|
2815
|
+
required: false
|
|
2816
|
+
}
|
|
2817
|
+
}, {
|
|
2818
|
+
"page": {
|
|
2819
|
+
type: Number,
|
|
2820
|
+
default: 1
|
|
2821
|
+
},
|
|
2822
|
+
"pageModifiers": {},
|
|
2823
|
+
"search": {
|
|
2824
|
+
type: String,
|
|
2825
|
+
default: ""
|
|
2826
|
+
},
|
|
2827
|
+
"searchModifiers": {}
|
|
2828
|
+
}),
|
|
2829
|
+
emits: ["update:page", "update:search"],
|
|
2830
|
+
setup(__props) {
|
|
2831
|
+
const props = __props;
|
|
2832
|
+
useSlots();
|
|
2833
|
+
const page = useModel(__props, "page");
|
|
2834
|
+
const search = useModel(__props, "search");
|
|
2835
|
+
const iterator = useTemplateRef("iterator");
|
|
2836
|
+
const columnCols = useDataSetColumnCols(useDataSetFittingColumns(() => props.columns, useDataSetWidth(() => iterator.value?.$el)));
|
|
2837
|
+
const filterKeys = useDataSetFilterKeys(() => props.searchKeys);
|
|
2838
|
+
useDataSetSearchPageReset(search, page);
|
|
2839
|
+
return (_ctx, _cache) => {
|
|
2840
|
+
return openBlock(), createBlock(skeleton_loader_default, {
|
|
2841
|
+
loading: props.loading,
|
|
2842
|
+
type: "card",
|
|
2843
|
+
"full-width": ""
|
|
2844
|
+
}, {
|
|
2845
|
+
default: withCtx(() => [createVNode(unref(VDataIterator), {
|
|
2846
|
+
ref_key: "iterator",
|
|
2847
|
+
ref: iterator,
|
|
2848
|
+
page: page.value,
|
|
2849
|
+
"onUpdate:page": _cache[2] || (_cache[2] = ($event) => page.value = $event),
|
|
2850
|
+
items: props.items,
|
|
2851
|
+
"items-per-page": props.itemsPerPage,
|
|
2852
|
+
search: search.value,
|
|
2853
|
+
"filter-keys": unref(filterKeys),
|
|
2854
|
+
"data-testid": props.dataTestid
|
|
2855
|
+
}, {
|
|
2856
|
+
header: withCtx(() => [props.searchable ? (openBlock(), createBlock(text_field_default, {
|
|
2857
|
+
key: 0,
|
|
2858
|
+
modelValue: search.value,
|
|
2859
|
+
"onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => search.value = $event),
|
|
2860
|
+
type: "search",
|
|
2861
|
+
label: "Pesquisar"
|
|
2862
|
+
}, null, 8, ["modelValue"])) : createCommentVNode("v-if", true)]),
|
|
2863
|
+
default: withCtx(({ items: pageItems }) => [createCommentVNode(" Stretched, so the items of the same line (e.g. full-height cards) share its height "), createVNode(row_default, {
|
|
2864
|
+
list: "",
|
|
2865
|
+
"align-y": "stretch"
|
|
2866
|
+
}, {
|
|
2867
|
+
default: withCtx(() => [(openBlock(true), createElementBlock(Fragment, null, renderList(pageItems, (pageItem, index) => {
|
|
2868
|
+
return openBlock(), createBlock(column_default, {
|
|
2869
|
+
key: index,
|
|
2870
|
+
cols: unref(columnCols),
|
|
2871
|
+
"list-item": ""
|
|
2872
|
+
}, {
|
|
2873
|
+
default: withCtx(() => [renderSlot(_ctx.$slots, "default", {
|
|
2874
|
+
item: pageItem.raw,
|
|
2875
|
+
index
|
|
2876
|
+
})]),
|
|
2877
|
+
_: 2
|
|
2878
|
+
}, 1032, ["cols"]);
|
|
2879
|
+
}), 128))]),
|
|
2880
|
+
_: 2
|
|
2881
|
+
}, 1024)]),
|
|
2882
|
+
"no-data": withCtx(() => [createVNode(unref(VEmptyState), { text: props.noDataText }, null, 8, ["text"])]),
|
|
2883
|
+
footer: withCtx(({ pageCount }) => [pageCount > 1 ? (openBlock(), createBlock(unref(VPagination), {
|
|
2884
|
+
key: 0,
|
|
2885
|
+
modelValue: page.value,
|
|
2886
|
+
"onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => page.value = $event),
|
|
2887
|
+
length: pageCount,
|
|
2888
|
+
"total-visible": unref(getDataSetTotalVisible)(pageCount)
|
|
2889
|
+
}, null, 8, [
|
|
2890
|
+
"modelValue",
|
|
2891
|
+
"length",
|
|
2892
|
+
"total-visible"
|
|
2893
|
+
])) : createCommentVNode("v-if", true)]),
|
|
2894
|
+
_: 3
|
|
2895
|
+
}, 8, [
|
|
2896
|
+
"page",
|
|
2897
|
+
"items",
|
|
2898
|
+
"items-per-page",
|
|
2899
|
+
"search",
|
|
2900
|
+
"filter-keys",
|
|
2901
|
+
"data-testid"
|
|
2902
|
+
])]),
|
|
2903
|
+
_: 3
|
|
2904
|
+
}, 8, ["loading"]);
|
|
2905
|
+
};
|
|
2906
|
+
}
|
|
2907
|
+
});
|
|
2908
|
+
//#endregion
|
|
2909
|
+
//#region src/components/data-sets/data-set-item/data-set-item.vue
|
|
2910
|
+
var data_set_item_default = /* @__PURE__ */ defineComponent({
|
|
2911
|
+
inheritAttrs: false,
|
|
2912
|
+
__name: "data-set-item",
|
|
2913
|
+
props: {
|
|
2914
|
+
title: {
|
|
2915
|
+
type: String,
|
|
2916
|
+
required: false
|
|
2917
|
+
},
|
|
2918
|
+
subtitle: {
|
|
2919
|
+
type: String,
|
|
2920
|
+
required: false
|
|
2921
|
+
},
|
|
2922
|
+
variant: {
|
|
2923
|
+
type: String,
|
|
2924
|
+
required: false
|
|
2925
|
+
},
|
|
2926
|
+
actions: {
|
|
2927
|
+
type: Array,
|
|
2928
|
+
required: false
|
|
2929
|
+
},
|
|
2930
|
+
dataTestid: {
|
|
2931
|
+
type: String,
|
|
2932
|
+
required: false
|
|
2933
|
+
}
|
|
2934
|
+
},
|
|
2935
|
+
setup(__props) {
|
|
2936
|
+
const props = __props;
|
|
2937
|
+
const slots = useSlots();
|
|
2938
|
+
return (_ctx, _cache) => {
|
|
2939
|
+
return openBlock(), createBlock(section_default, {
|
|
2940
|
+
title: props.title,
|
|
2941
|
+
subtitle: props.subtitle,
|
|
2942
|
+
variant: props.variant,
|
|
2943
|
+
actions: props.actions,
|
|
2944
|
+
"data-testid": props.dataTestid,
|
|
2945
|
+
"full-height": ""
|
|
2946
|
+
}, {
|
|
2947
|
+
default: withCtx(() => [slots.default ? (openBlock(), createBlock(section_content_default, { key: 0 }, {
|
|
2948
|
+
default: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
|
|
2949
|
+
_: 3
|
|
2950
|
+
})) : createCommentVNode("v-if", true)]),
|
|
2951
|
+
_: 3
|
|
2952
|
+
}, 8, [
|
|
2953
|
+
"title",
|
|
2954
|
+
"subtitle",
|
|
2955
|
+
"variant",
|
|
2956
|
+
"actions",
|
|
2957
|
+
"data-testid"
|
|
2958
|
+
]);
|
|
2959
|
+
};
|
|
2960
|
+
}
|
|
2961
|
+
});
|
|
2962
|
+
//#endregion
|
|
2963
|
+
export { autocomplete_field_default as UAutocompleteField, button_default as UButton, checkbox_default as UCheckbox, column_default as UColumn, container_default as UContainer, data_set_default as UDataSet, data_set_item_default as UDataSetItem, date_time_field_default as UDateTimeField, details_default as UDetails, dialog_default as UDialog, form_default as UForm, img_default as UImg, link_default as ULink, main_default as UMain, mask_field_default as UMaskField, row_default as URow, section_default as USection, section_content_default as USectionContent, table_default as UTable, text_field_default as UTextField };
|