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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (3) hide show
  1. package/dist/components.d.ts +7 -0
  2. package/dist/components.js +167 -124
  3. package/package.json +1 -1
package/dist/components.d.ts CHANGED
@@ -155,6 +155,13 @@ type MainProps = {
155
155
  * Navigation menu properties.
156
156
  */
157
157
  navigationMenu?: NavigationMenuProps;
158
+ /**
159
+ * Shows skeleton loaders in place of the user-related parts of the app bar
160
+ * and of the navigation menu items while their data is being loaded.
161
+ * The main content (default slot) isn't affected.
162
+ * @default false
163
+ */
164
+ loading?: boolean;
158
165
  };
159
166
  //#endregion
160
167
  //#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,
@@ -209,7 +225,7 @@ var app_bar_default = /* @__PURE__ */ defineComponent({
209
225
  })) : createCommentVNode("v-if", true)
210
226
  ]),
211
227
  _: 1
212
- }, 8, ["data-testid"]);
228
+ }, 8, ["data-testid", "aria-busy"]);
213
229
  };
214
230
  }
215
231
  });
@@ -409,6 +425,10 @@ var navigation_menu_default = /* @__PURE__ */ defineComponent({
409
425
  items: {
410
426
  type: Array,
411
427
  required: false
428
+ },
429
+ loading: {
430
+ type: Boolean,
431
+ required: false
412
432
  }
413
433
  }, {
414
434
  "modelValue": {
@@ -450,6 +470,7 @@ var navigation_menu_default = /* @__PURE__ */ defineComponent({
450
470
  "onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => open.value = $event),
451
471
  color: "primary",
452
472
  "data-testid": props.dataTestid,
473
+ "aria-busy": props.loading || void 0,
453
474
  absolute: "",
454
475
  temporary: ""
455
476
  }, {
@@ -458,28 +479,44 @@ var navigation_menu_default = /* @__PURE__ */ defineComponent({
458
479
  "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => search.value = $event),
459
480
  type: "search",
460
481
  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))]),
482
+ "data-testid": searchDataTestid.value,
483
+ disabled: props.loading
484
+ }, null, 8, [
485
+ "modelValue",
486
+ "data-testid",
487
+ "disabled"
488
+ ])])]),
489
+ default: withCtx(() => [createVNode(unref(VDivider)), createVNode(unref(VSkeletonLoader), {
490
+ loading: props.loading,
491
+ type: "list-item@6",
492
+ color: "primary"
493
+ }, {
494
+ default: withCtx(() => [createVNode(unref(VList), { nav: "" }, {
495
+ default: withCtx(() => [(openBlock(true), createElementBlock(Fragment, null, renderList(filteredItems.value, (item, index) => {
496
+ return openBlock(), createElementBlock(Fragment, { key: index }, [isParentItem(item) ? (openBlock(), createBlock(unref(VListGroup), { key: 0 }, {
497
+ activator: withCtx(({ props: activatorProps }) => [createVNode(unref(VListItem), mergeProps({ ref_for: true }, activatorProps, { title: item.description }), null, 16, ["title"])]),
498
+ default: withCtx(() => [(openBlock(true), createElementBlock(Fragment, null, renderList(item.items, (childItem, childIndex) => {
499
+ return openBlock(), createBlock(unref(VListItem), mergeProps({ key: childIndex }, { ref_for: true }, unref(routeToProps)(childItem.route), {
500
+ title: childItem.description,
501
+ onClick: childItem.action
502
+ }), null, 16, ["title", "onClick"]);
503
+ }), 128))]),
504
+ _: 2
505
+ }, 1024)) : (openBlock(), createBlock(unref(VListItem), mergeProps({
506
+ key: 1,
507
+ title: item.description
508
+ }, { ref_for: true }, unref(routeToProps)(item.route), { onClick: item.action }), null, 16, ["title", "onClick"]))], 64);
509
+ }), 128))]),
510
+ _: 1
511
+ })]),
479
512
  _: 1
480
- })]),
513
+ }, 8, ["loading"])]),
481
514
  _: 1
482
- }, 8, ["modelValue", "data-testid"]);
515
+ }, 8, [
516
+ "modelValue",
517
+ "data-testid",
518
+ "aria-busy"
519
+ ]);
483
520
  };
484
521
  }
485
522
  });
@@ -769,6 +806,10 @@ var main_default = /* @__PURE__ */ defineComponent({
769
806
  navigationMenu: {
770
807
  type: Object,
771
808
  required: false
809
+ },
810
+ loading: {
811
+ type: Boolean,
812
+ required: false
772
813
  }
773
814
  }, {
774
815
  "notificationsOpen": {
@@ -783,7 +824,8 @@ var main_default = /* @__PURE__ */ defineComponent({
783
824
  const appBarProps = computed(() => props.appBar ? {
784
825
  ...props.appBar,
785
826
  logo: props.logo,
786
- navigation: props.navigationMenu !== void 0
827
+ navigation: props.navigationMenu !== void 0,
828
+ loading: props.loading
787
829
  } : void 0);
788
830
  const notificationsOpen = useModel(__props, "notificationsOpen");
789
831
  const navigationMenuOpen = ref(false);
@@ -798,8 +840,9 @@ var main_default = /* @__PURE__ */ defineComponent({
798
840
  }), null, 16, ["notifications-open", "navigation-open"])) : createCommentVNode("v-if", true),
799
841
  props.navigationMenu ? (openBlock(), createBlock(navigation_menu_default, mergeProps({ key: 1 }, props.navigationMenu, {
800
842
  modelValue: navigationMenuOpen.value,
801
- "onUpdate:modelValue": _cache[2] || (_cache[2] = ($event) => navigationMenuOpen.value = $event)
802
- }), null, 16, ["modelValue"])) : createCommentVNode("v-if", true),
843
+ "onUpdate:modelValue": _cache[2] || (_cache[2] = ($event) => navigationMenuOpen.value = $event),
844
+ loading: props.loading
845
+ }), null, 16, ["modelValue", "loading"])) : createCommentVNode("v-if", true),
803
846
  createVNode(unref(VMain), null, {
804
847
  default: withCtx(() => [createVNode(container_default, null, {
805
848
  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.14",
4
4
  "description": "A ui framework for NEXDOM applications.",
5
5
  "keywords": [
6
6
  "lib",