@nexdom/uimed-vue 2.0.0-beta.13 → 2.0.0-beta.15

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.
Files changed (3) hide show
  1. package/dist/components.d.ts +10 -0
  2. package/dist/components.js +168 -124
  3. package/package.json +1 -1
package/dist/components.d.ts CHANGED
@@ -145,6 +145,9 @@ type MainProps = {
145
145
  dataTestid?: string;
146
146
  /**
147
147
  * URL to logo image.
148
+ *
149
+ * The logo is decorative (`alt=""`): screen readers identify the app by
150
+ * the app bar title (`appBar.title`).
148
151
  */
149
152
  logo?: string;
150
153
  /**
@@ -155,6 +158,13 @@ type MainProps = {
155
158
  * Navigation menu properties.
156
159
  */
157
160
  navigationMenu?: NavigationMenuProps;
161
+ /**
162
+ * Shows skeleton loaders in place of the user-related parts of the app bar
163
+ * and of the navigation menu items while their data is being loaded.
164
+ * The main content (default slot) isn't affected.
165
+ * @default false
166
+ */
167
+ loading?: boolean;
158
168
  };
159
169
  //#endregion
160
170
  //#region src/components/main/main.vue.d.ts
package/dist/components.js CHANGED
@@ -50,6 +50,10 @@ var app_bar_default = /* @__PURE__ */ defineComponent({
50
50
  logo: {
51
51
  type: String,
52
52
  required: false
53
+ },
54
+ loading: {
55
+ type: Boolean,
56
+ required: false
53
57
  }
54
58
  }, {
55
59
  "notificationsOpen": {
@@ -76,119 +80,131 @@ var app_bar_default = /* @__PURE__ */ defineComponent({
76
80
  const showNotifications = computed(() => !!props.notifications);
77
81
  const unreadCount = computed(() => props.notifications.filter((notification) => !notification.read).length);
78
82
  const hasUnreadNotifications = computed(() => unreadCount.value > 0);
83
+ watch(() => props.loading, (loading) => {
84
+ if (loading) notificationsOpen.value = false;
85
+ });
79
86
  const showUser = computed(() => !!props.user);
80
87
  const userAvatarProps = computed(() => props.user.img ? { image: props.user.img } : { icon: "mdi-account-outline" });
81
88
  function isParentOption(option) {
82
89
  return "items" in option;
83
90
  }
84
91
  return (_ctx, _cache) => {
85
- return openBlock(), createBlock(unref(VAppBar), { "data-testid": props.dataTestid }, {
86
- append: withCtx(() => [
87
- showHelp.value ? (openBlock(), createBlock(unref(VBtn), mergeProps({ key: 0 }, unref(routeProps), {
88
- "data-testid": helpBtnDataTestid.value,
89
- icon: "mdi-help-circle-outline"
90
- }), null, 16, ["data-testid"])) : createCommentVNode("v-if", true),
91
- showNotifications.value ? (openBlock(), createBlock(unref(VMenu), {
92
- key: 1,
93
- modelValue: notificationsOpen.value,
94
- "onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => notificationsOpen.value = $event),
95
- "close-on-content-click": false
96
- }, {
97
- activator: withCtx(({ props }) => [createVNode(unref(VBtn), mergeProps(props, {
98
- "data-testid": notificationsBtnDataTestid.value,
99
- icon: ""
100
- }), {
101
- default: withCtx(() => [createVNode(unref(VBadge), {
102
- "model-value": hasUnreadNotifications.value,
103
- content: unreadCount.value,
104
- color: "error"
105
- }, {
106
- default: withCtx(() => [createVNode(unref(VIcon), { icon: "mdi-bell-outline" })]),
107
- _: 1
108
- }, 8, ["model-value", "content"])]),
109
- _: 1
110
- }, 16, ["data-testid"])]),
111
- default: withCtx(() => [createVNode(unref(VCard), { "data-testid": notificationsMenuDataTestid.value }, {
112
- default: withCtx(() => [props.notifications?.length ? (openBlock(), createBlock(unref(VList), { key: 0 }, {
113
- default: withCtx(() => [createVNode(unref(VListSubheader), null, {
114
- default: withCtx(() => [..._cache[2] || (_cache[2] = [createTextVNode("Notificações", -1)])]),
92
+ return openBlock(), createBlock(unref(VAppBar), {
93
+ "data-testid": props.dataTestid,
94
+ "aria-busy": props.loading || void 0
95
+ }, {
96
+ append: withCtx(() => [createVNode(unref(VSkeletonLoader), {
97
+ loading: props.loading,
98
+ type: "avatar"
99
+ }, {
100
+ default: withCtx(() => [
101
+ showHelp.value ? (openBlock(), createBlock(unref(VBtn), mergeProps({ key: 0 }, unref(routeProps), {
102
+ "data-testid": helpBtnDataTestid.value,
103
+ icon: "mdi-help-circle-outline"
104
+ }), null, 16, ["data-testid"])) : createCommentVNode("v-if", true),
105
+ showNotifications.value ? (openBlock(), createBlock(unref(VMenu), {
106
+ key: 1,
107
+ modelValue: notificationsOpen.value,
108
+ "onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => notificationsOpen.value = $event),
109
+ "close-on-content-click": false
110
+ }, {
111
+ activator: withCtx(({ props }) => [createVNode(unref(VBtn), mergeProps(props, {
112
+ "data-testid": notificationsBtnDataTestid.value,
113
+ icon: ""
114
+ }), {
115
+ default: withCtx(() => [createVNode(unref(VBadge), {
116
+ "model-value": hasUnreadNotifications.value,
117
+ content: unreadCount.value,
118
+ color: "error"
119
+ }, {
120
+ default: withCtx(() => [createVNode(unref(VIcon), { icon: "mdi-bell-outline" })]),
115
121
  _: 1
116
- }), (openBlock(true), createElementBlock(Fragment, null, renderList(props.notifications, (notification, index) => {
117
- return openBlock(), createBlock(unref(VListItem), {
118
- key: index,
119
- active: !notification.read,
120
- title: notification.title,
121
- subtitle: notification.subtitle,
122
- "active-class": "text-primary"
123
- }, createSlots({ _: 2 }, [notification.when ? {
124
- name: "append",
125
- fn: withCtx(() => [createVNode(unref(VListItemAction), { end: "" }, {
126
- default: withCtx(() => [createElementVNode("small", _hoisted_1$2, toDisplayString(notification.when), 1)]),
127
- _: 2
128
- }, 1024)]),
129
- key: "0"
130
- } : void 0]), 1032, [
131
- "active",
132
- "title",
133
- "subtitle"
134
- ]);
135
- }), 128))]),
122
+ }, 8, ["model-value", "content"])]),
136
123
  _: 1
137
- })) : (openBlock(), createBlock(unref(VCardText), { key: 1 }, {
138
- default: withCtx(() => [..._cache[3] || (_cache[3] = [createTextVNode("Nenhuma notificação", -1)])]),
124
+ }, 16, ["data-testid"])]),
125
+ default: withCtx(() => [createVNode(unref(VCard), { "data-testid": notificationsMenuDataTestid.value }, {
126
+ default: withCtx(() => [props.notifications?.length ? (openBlock(), createBlock(unref(VList), { key: 0 }, {
127
+ default: withCtx(() => [createVNode(unref(VListSubheader), null, {
128
+ default: withCtx(() => [..._cache[2] || (_cache[2] = [createTextVNode("Notificações", -1)])]),
129
+ _: 1
130
+ }), (openBlock(true), createElementBlock(Fragment, null, renderList(props.notifications, (notification, index) => {
131
+ return openBlock(), createBlock(unref(VListItem), {
132
+ key: index,
133
+ active: !notification.read,
134
+ title: notification.title,
135
+ subtitle: notification.subtitle,
136
+ "active-class": "text-primary"
137
+ }, createSlots({ _: 2 }, [notification.when ? {
138
+ name: "append",
139
+ fn: withCtx(() => [createVNode(unref(VListItemAction), { end: "" }, {
140
+ default: withCtx(() => [createElementVNode("small", _hoisted_1$2, toDisplayString(notification.when), 1)]),
141
+ _: 2
142
+ }, 1024)]),
143
+ key: "0"
144
+ } : void 0]), 1032, [
145
+ "active",
146
+ "title",
147
+ "subtitle"
148
+ ]);
149
+ }), 128))]),
150
+ _: 1
151
+ })) : (openBlock(), createBlock(unref(VCardText), { key: 1 }, {
152
+ default: withCtx(() => [..._cache[3] || (_cache[3] = [createTextVNode("Nenhuma notificação", -1)])]),
153
+ _: 1
154
+ }))]),
139
155
  _: 1
140
- }))]),
141
- _: 1
142
- }, 8, ["data-testid"])]),
143
- _: 1
144
- }, 8, ["modelValue"])) : createCommentVNode("v-if", true),
145
- showUser.value ? (openBlock(), createBlock(unref(VMenu), {
146
- key: 2,
147
- "close-on-content-click": false
148
- }, {
149
- activator: withCtx(({ props }) => [createVNode(unref(VBtn), mergeProps(props, {
150
- "data-testid": userBtnDataTestid.value,
151
- icon: ""
152
- }), {
153
- default: withCtx(() => [createVNode(unref(VAvatar), mergeProps(userAvatarProps.value, { color: "primary" }), null, 16)]),
156
+ }, 8, ["data-testid"])]),
154
157
  _: 1
155
- }, 16, ["data-testid"])]),
156
- default: withCtx(() => [createVNode(unref(VCard), {
157
- title: __props.user?.title,
158
- subtitle: __props.user?.subtitle,
159
- "data-testid": userMenuDataTestid.value
158
+ }, 8, ["modelValue"])) : createCommentVNode("v-if", true),
159
+ showUser.value ? (openBlock(), createBlock(unref(VMenu), {
160
+ key: 2,
161
+ "close-on-content-click": false
160
162
  }, {
161
- prepend: withCtx(() => [createVNode(unref(VAvatar), mergeProps(userAvatarProps.value, { color: "primary" }), null, 16)]),
162
- default: withCtx(() => [createVNode(unref(VDivider)), createVNode(unref(VList), { nav: "" }, {
163
- default: withCtx(() => [(openBlock(true), createElementBlock(Fragment, null, renderList(props.user?.options, (option, index) => {
164
- return openBlock(), createElementBlock(Fragment, { key: index }, [index > 0 ? (openBlock(), createBlock(unref(VDivider), {
165
- key: 0,
166
- class: "mt-1"
167
- })) : createCommentVNode("v-if", true), isParentOption(option) ? (openBlock(), createBlock(unref(VListGroup), { key: 1 }, {
168
- activator: withCtx(({ props }) => [createVNode(unref(VListItem), mergeProps({ ref_for: true }, props, { title: option.description }), null, 16, ["title"])]),
169
- default: withCtx(() => [(openBlock(true), createElementBlock(Fragment, null, renderList(option.items, (childOption, index) => {
170
- return openBlock(), createBlock(unref(VListItem), mergeProps({ key: index }, { ref_for: true }, unref(routeToProps)(childOption.route), {
171
- title: childOption.description,
172
- onClick: childOption.action
173
- }), null, 16, ["title", "onClick"]);
174
- }), 128))]),
175
- _: 2
176
- }, 1024)) : (openBlock(), createBlock(unref(VListItem), mergeProps({
177
- key: 2,
178
- title: option.description
179
- }, { ref_for: true }, unref(routeToProps)(option.route), { onClick: option.action }), null, 16, ["title", "onClick"]))], 64);
180
- }), 128))]),
163
+ activator: withCtx(({ props }) => [createVNode(unref(VBtn), mergeProps(props, {
164
+ "data-testid": userBtnDataTestid.value,
165
+ icon: ""
166
+ }), {
167
+ default: withCtx(() => [createVNode(unref(VAvatar), mergeProps(userAvatarProps.value, { color: "primary" }), null, 16)]),
181
168
  _: 1
182
- })]),
169
+ }, 16, ["data-testid"])]),
170
+ default: withCtx(() => [createVNode(unref(VCard), {
171
+ title: __props.user?.title,
172
+ subtitle: __props.user?.subtitle,
173
+ "data-testid": userMenuDataTestid.value
174
+ }, {
175
+ prepend: withCtx(() => [createVNode(unref(VAvatar), mergeProps(userAvatarProps.value, { color: "primary" }), null, 16)]),
176
+ default: withCtx(() => [createVNode(unref(VDivider)), createVNode(unref(VList), { nav: "" }, {
177
+ default: withCtx(() => [(openBlock(true), createElementBlock(Fragment, null, renderList(props.user?.options, (option, index) => {
178
+ return openBlock(), createElementBlock(Fragment, { key: index }, [index > 0 ? (openBlock(), createBlock(unref(VDivider), {
179
+ key: 0,
180
+ class: "mt-1"
181
+ })) : createCommentVNode("v-if", true), isParentOption(option) ? (openBlock(), createBlock(unref(VListGroup), { key: 1 }, {
182
+ activator: withCtx(({ props }) => [createVNode(unref(VListItem), mergeProps({ ref_for: true }, props, { title: option.description }), null, 16, ["title"])]),
183
+ default: withCtx(() => [(openBlock(true), createElementBlock(Fragment, null, renderList(option.items, (childOption, index) => {
184
+ return openBlock(), createBlock(unref(VListItem), mergeProps({ key: index }, { ref_for: true }, unref(routeToProps)(childOption.route), {
185
+ title: childOption.description,
186
+ onClick: childOption.action
187
+ }), null, 16, ["title", "onClick"]);
188
+ }), 128))]),
189
+ _: 2
190
+ }, 1024)) : (openBlock(), createBlock(unref(VListItem), mergeProps({
191
+ key: 2,
192
+ title: option.description
193
+ }, { ref_for: true }, unref(routeToProps)(option.route), { onClick: option.action }), null, 16, ["title", "onClick"]))], 64);
194
+ }), 128))]),
195
+ _: 1
196
+ })]),
197
+ _: 1
198
+ }, 8, [
199
+ "title",
200
+ "subtitle",
201
+ "data-testid"
202
+ ])]),
183
203
  _: 1
184
- }, 8, [
185
- "title",
186
- "subtitle",
187
- "data-testid"
188
- ])]),
189
- _: 1
190
- })) : createCommentVNode("v-if", true)
191
- ]),
204
+ })) : createCommentVNode("v-if", true)
205
+ ]),
206
+ _: 1
207
+ }, 8, ["loading"])]),
192
208
  default: withCtx(() => [
193
209
  __props.navigation ? (openBlock(), createBlock(unref(VAppBarNavIcon), {
194
210
  key: 0,
@@ -198,6 +214,7 @@ var app_bar_default = /* @__PURE__ */ defineComponent({
198
214
  __props.logo ? (openBlock(), createBlock(unref(VImg), {
199
215
  key: 1,
200
216
  src: props.logo,
217
+ alt: "",
201
218
  height: "100%",
202
219
  width: "fit-content",
203
220
  class: "py-2 ml-5 mr-n3",
@@ -209,7 +226,7 @@ var app_bar_default = /* @__PURE__ */ defineComponent({
209
226
  })) : createCommentVNode("v-if", true)
210
227
  ]),
211
228
  _: 1
212
- }, 8, ["data-testid"]);
229
+ }, 8, ["data-testid", "aria-busy"]);
213
230
  };
214
231
  }
215
232
  });
@@ -409,6 +426,10 @@ var navigation_menu_default = /* @__PURE__ */ defineComponent({
409
426
  items: {
410
427
  type: Array,
411
428
  required: false
429
+ },
430
+ loading: {
431
+ type: Boolean,
432
+ required: false
412
433
  }
413
434
  }, {
414
435
  "modelValue": {
@@ -450,6 +471,7 @@ var navigation_menu_default = /* @__PURE__ */ defineComponent({
450
471
  "onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => open.value = $event),
451
472
  color: "primary",
452
473
  "data-testid": props.dataTestid,
474
+ "aria-busy": props.loading || void 0,
453
475
  absolute: "",
454
476
  temporary: ""
455
477
  }, {
@@ -458,28 +480,44 @@ var navigation_menu_default = /* @__PURE__ */ defineComponent({
458
480
  "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => search.value = $event),
459
481
  type: "search",
460
482
  label: "Buscar",
461
- "data-testid": searchDataTestid.value
462
- }, null, 8, ["modelValue", "data-testid"])])]),
463
- default: withCtx(() => [createVNode(unref(VDivider)), createVNode(unref(VList), { nav: "" }, {
464
- default: withCtx(() => [(openBlock(true), createElementBlock(Fragment, null, renderList(filteredItems.value, (item, index) => {
465
- return openBlock(), createElementBlock(Fragment, { key: index }, [isParentItem(item) ? (openBlock(), createBlock(unref(VListGroup), { key: 0 }, {
466
- activator: withCtx(({ props: activatorProps }) => [createVNode(unref(VListItem), mergeProps({ ref_for: true }, activatorProps, { title: item.description }), null, 16, ["title"])]),
467
- default: withCtx(() => [(openBlock(true), createElementBlock(Fragment, null, renderList(item.items, (childItem, childIndex) => {
468
- return openBlock(), createBlock(unref(VListItem), mergeProps({ key: childIndex }, { ref_for: true }, unref(routeToProps)(childItem.route), {
469
- title: childItem.description,
470
- onClick: childItem.action
471
- }), null, 16, ["title", "onClick"]);
472
- }), 128))]),
473
- _: 2
474
- }, 1024)) : (openBlock(), createBlock(unref(VListItem), mergeProps({
475
- key: 1,
476
- title: item.description
477
- }, { ref_for: true }, unref(routeToProps)(item.route), { onClick: item.action }), null, 16, ["title", "onClick"]))], 64);
478
- }), 128))]),
483
+ "data-testid": searchDataTestid.value,
484
+ disabled: props.loading
485
+ }, null, 8, [
486
+ "modelValue",
487
+ "data-testid",
488
+ "disabled"
489
+ ])])]),
490
+ default: withCtx(() => [createVNode(unref(VDivider)), createVNode(unref(VSkeletonLoader), {
491
+ loading: props.loading,
492
+ type: "list-item@6",
493
+ color: "primary"
494
+ }, {
495
+ default: withCtx(() => [createVNode(unref(VList), { nav: "" }, {
496
+ default: withCtx(() => [(openBlock(true), createElementBlock(Fragment, null, renderList(filteredItems.value, (item, index) => {
497
+ return openBlock(), createElementBlock(Fragment, { key: index }, [isParentItem(item) ? (openBlock(), createBlock(unref(VListGroup), { key: 0 }, {
498
+ activator: withCtx(({ props: activatorProps }) => [createVNode(unref(VListItem), mergeProps({ ref_for: true }, activatorProps, { title: item.description }), null, 16, ["title"])]),
499
+ default: withCtx(() => [(openBlock(true), createElementBlock(Fragment, null, renderList(item.items, (childItem, childIndex) => {
500
+ return openBlock(), createBlock(unref(VListItem), mergeProps({ key: childIndex }, { ref_for: true }, unref(routeToProps)(childItem.route), {
501
+ title: childItem.description,
502
+ onClick: childItem.action
503
+ }), null, 16, ["title", "onClick"]);
504
+ }), 128))]),
505
+ _: 2
506
+ }, 1024)) : (openBlock(), createBlock(unref(VListItem), mergeProps({
507
+ key: 1,
508
+ title: item.description
509
+ }, { ref_for: true }, unref(routeToProps)(item.route), { onClick: item.action }), null, 16, ["title", "onClick"]))], 64);
510
+ }), 128))]),
511
+ _: 1
512
+ })]),
479
513
  _: 1
480
- })]),
514
+ }, 8, ["loading"])]),
481
515
  _: 1
482
- }, 8, ["modelValue", "data-testid"]);
516
+ }, 8, [
517
+ "modelValue",
518
+ "data-testid",
519
+ "aria-busy"
520
+ ]);
483
521
  };
484
522
  }
485
523
  });
@@ -769,6 +807,10 @@ var main_default = /* @__PURE__ */ defineComponent({
769
807
  navigationMenu: {
770
808
  type: Object,
771
809
  required: false
810
+ },
811
+ loading: {
812
+ type: Boolean,
813
+ required: false
772
814
  }
773
815
  }, {
774
816
  "notificationsOpen": {
@@ -783,7 +825,8 @@ var main_default = /* @__PURE__ */ defineComponent({
783
825
  const appBarProps = computed(() => props.appBar ? {
784
826
  ...props.appBar,
785
827
  logo: props.logo,
786
- navigation: props.navigationMenu !== void 0
828
+ navigation: props.navigationMenu !== void 0,
829
+ loading: props.loading
787
830
  } : void 0);
788
831
  const notificationsOpen = useModel(__props, "notificationsOpen");
789
832
  const navigationMenuOpen = ref(false);
@@ -798,8 +841,9 @@ var main_default = /* @__PURE__ */ defineComponent({
798
841
  }), null, 16, ["notifications-open", "navigation-open"])) : createCommentVNode("v-if", true),
799
842
  props.navigationMenu ? (openBlock(), createBlock(navigation_menu_default, mergeProps({ key: 1 }, props.navigationMenu, {
800
843
  modelValue: navigationMenuOpen.value,
801
- "onUpdate:modelValue": _cache[2] || (_cache[2] = ($event) => navigationMenuOpen.value = $event)
802
- }), null, 16, ["modelValue"])) : createCommentVNode("v-if", true),
844
+ "onUpdate:modelValue": _cache[2] || (_cache[2] = ($event) => navigationMenuOpen.value = $event),
845
+ loading: props.loading
846
+ }), null, 16, ["modelValue", "loading"])) : createCommentVNode("v-if", true),
803
847
  createVNode(unref(VMain), null, {
804
848
  default: withCtx(() => [createVNode(container_default, null, {
805
849
  default: withCtx(() => [
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@nexdom/uimed-vue",
3
- "version": "2.0.0-beta.13",
3
+ "version": "2.0.0-beta.15",
4
4
  "description": "A ui framework for NEXDOM applications.",
5
5
  "keywords": [
6
6
  "lib",