@nova-design-system/nova-vue 3.22.0 → 3.23.0

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 (9) hide show
  1. package/dist/components/NvDatatable.js +1 -1
  2. package/dist/generated/components.d.ts +59 -68
  3. package/dist/generated/components.js +168 -24
  4. package/dist/plugin.d.ts +0 -4
  5. package/dist/plugin.js +1 -38
  6. package/dist/providers/NotificationService.js +3 -3
  7. package/package.json +2 -2
  8. package/dist/generated/vue-component-lib/utils.d.ts +0 -16
  9. package/dist/generated/vue-component-lib/utils.js +0 -195
package/dist/components/NvDatatable.js CHANGED
@@ -116,7 +116,7 @@ export function createNvDatatable() {
116
116
  const getBaseTableConfig = () => {
117
117
  const baseConfig = {
118
118
  get data() {
119
- return computed(() => props.rows);
119
+ return props.rows;
120
120
  },
121
121
  get columns() {
122
122
  return tableColumns.value;
package/dist/generated/components.d.ts CHANGED
@@ -1,69 +1,60 @@
1
+ import { type StencilVueComponent } from '@stencil/vue-output-target/runtime';
1
2
  import type { JSX } from '@nova-design-system/nova-webcomponents';
2
- export declare const NvAccordion: import("vue").DefineSetupFnComponent<JSX.NvAccordion & import("./vue-component-lib/utils").InputProps<number[]>, {}, {}, JSX.NvAccordion & import("./vue-component-lib/utils").InputProps<number[]> & {}, import("vue").PublicProps>;
3
- export declare const NvAccordionItem: import("vue").DefineSetupFnComponent<JSX.NvAccordionItem & import("./vue-component-lib/utils").InputProps<string | number | boolean>, {}, {}, JSX.NvAccordionItem & import("./vue-component-lib/utils").InputProps<string | number | boolean> & {}, import("vue").PublicProps>;
4
- export declare const NvAlert: import("vue").DefineSetupFnComponent<JSX.NvAlert & import("./vue-component-lib/utils").InputProps<boolean>, {}, {}, JSX.NvAlert & import("./vue-component-lib/utils").InputProps<boolean> & {}, import("vue").PublicProps>;
5
- export declare const NvAvatar: import("vue").DefineSetupFnComponent<JSX.NvAvatar & import("./vue-component-lib/utils").InputProps<string | number | boolean>, {}, {}, JSX.NvAvatar & import("./vue-component-lib/utils").InputProps<string | number | boolean> & {}, import("vue").PublicProps>;
6
- export declare const NvBadge: import("vue").DefineSetupFnComponent<JSX.NvBadge & import("./vue-component-lib/utils").InputProps<string | number | boolean>, {}, {}, JSX.NvBadge & import("./vue-component-lib/utils").InputProps<string | number | boolean> & {}, import("vue").PublicProps>;
7
- export declare const NvBreadcrumb: import("vue").DefineSetupFnComponent<JSX.NvBreadcrumb & import("./vue-component-lib/utils").InputProps<string | number | boolean>, {}, {}, JSX.NvBreadcrumb & import("./vue-component-lib/utils").InputProps<string | number | boolean> & {}, import("vue").PublicProps>;
8
- export declare const NvBreadcrumbs: import("vue").DefineSetupFnComponent<JSX.NvBreadcrumbs & import("./vue-component-lib/utils").InputProps<string | number | boolean>, {}, {}, JSX.NvBreadcrumbs & import("./vue-component-lib/utils").InputProps<string | number | boolean> & {}, import("vue").PublicProps>;
9
- export declare const NvButton: import("vue").DefineSetupFnComponent<JSX.NvButton & import("./vue-component-lib/utils").InputProps<string | number | boolean>, {}, {}, JSX.NvButton & import("./vue-component-lib/utils").InputProps<string | number | boolean> & {}, import("vue").PublicProps>;
10
- export declare const NvButtongroup: import("vue").DefineSetupFnComponent<JSX.NvButtongroup & import("./vue-component-lib/utils").InputProps<string | number | boolean>, {}, {}, JSX.NvButtongroup & import("./vue-component-lib/utils").InputProps<string | number | boolean> & {}, import("vue").PublicProps>;
11
- export declare const NvCalendar: import("vue").DefineSetupFnComponent<JSX.NvCalendar & import("./vue-component-lib/utils").InputProps<string>, {}, {}, JSX.NvCalendar & import("./vue-component-lib/utils").InputProps<string> & {}, import("vue").PublicProps>;
12
- export declare const NvCol: import("vue").DefineSetupFnComponent<JSX.NvCol & import("./vue-component-lib/utils").InputProps<string | number | boolean>, {}, {}, JSX.NvCol & import("./vue-component-lib/utils").InputProps<string | number | boolean> & {}, import("vue").PublicProps>;
13
- export declare const NvDatagrid: import("vue").DefineSetupFnComponent<JSX.NvDatagrid & import("./vue-component-lib/utils").InputProps<{
14
- globalFilterSearchTerm: string;
15
- paginationState: {
16
- pageIndex: number;
17
- pageSize: number;
18
- };
19
- sortingState: {
20
- desc: boolean;
21
- id: string;
22
- }[];
23
- }>, {}, {}, JSX.NvDatagrid & import("./vue-component-lib/utils").InputProps<{
24
- globalFilterSearchTerm: string;
25
- paginationState: {
26
- pageIndex: number;
27
- pageSize: number;
28
- };
29
- sortingState: {
30
- desc: boolean;
31
- id: string;
32
- }[];
33
- }> & {}, import("vue").PublicProps>;
34
- export declare const NvDatagridcolumn: import("vue").DefineSetupFnComponent<JSX.NvDatagridcolumn & import("./vue-component-lib/utils").InputProps<string | number | boolean>, {}, {}, JSX.NvDatagridcolumn & import("./vue-component-lib/utils").InputProps<string | number | boolean> & {}, import("vue").PublicProps>;
35
- export declare const NvDialog: import("vue").DefineSetupFnComponent<JSX.NvDialog & import("./vue-component-lib/utils").InputProps<boolean>, {}, {}, JSX.NvDialog & import("./vue-component-lib/utils").InputProps<boolean> & {}, import("vue").PublicProps>;
36
- export declare const NvDialogfooter: import("vue").DefineSetupFnComponent<JSX.NvDialogfooter & import("./vue-component-lib/utils").InputProps<string | number | boolean>, {}, {}, JSX.NvDialogfooter & import("./vue-component-lib/utils").InputProps<string | number | boolean> & {}, import("vue").PublicProps>;
37
- export declare const NvDialogheader: import("vue").DefineSetupFnComponent<JSX.NvDialogheader & import("./vue-component-lib/utils").InputProps<string | number | boolean>, {}, {}, JSX.NvDialogheader & import("./vue-component-lib/utils").InputProps<string | number | boolean> & {}, import("vue").PublicProps>;
38
- export declare const NvFieldcheckbox: import("vue").DefineSetupFnComponent<JSX.NvFieldcheckbox & import("./vue-component-lib/utils").InputProps<boolean>, {}, {}, JSX.NvFieldcheckbox & import("./vue-component-lib/utils").InputProps<boolean> & {}, import("vue").PublicProps>;
39
- export declare const NvFielddate: import("vue").DefineSetupFnComponent<JSX.NvFielddate & import("./vue-component-lib/utils").InputProps<string>, {}, {}, JSX.NvFielddate & import("./vue-component-lib/utils").InputProps<string> & {}, import("vue").PublicProps>;
40
- export declare const NvFielddaterange: import("vue").DefineSetupFnComponent<JSX.NvFielddaterange & import("./vue-component-lib/utils").InputProps<string>, {}, {}, JSX.NvFielddaterange & import("./vue-component-lib/utils").InputProps<string> & {}, import("vue").PublicProps>;
41
- export declare const NvFielddropdown: import("vue").DefineSetupFnComponent<JSX.NvFielddropdown & import("./vue-component-lib/utils").InputProps<string>, {}, {}, JSX.NvFielddropdown & import("./vue-component-lib/utils").InputProps<string> & {}, import("vue").PublicProps>;
42
- export declare const NvFielddropdownitem: import("vue").DefineSetupFnComponent<JSX.NvFielddropdownitem & import("./vue-component-lib/utils").InputProps<string | number | boolean>, {}, {}, JSX.NvFielddropdownitem & import("./vue-component-lib/utils").InputProps<string | number | boolean> & {}, import("vue").PublicProps>;
43
- export declare const NvFielddropdownitemcheck: import("vue").DefineSetupFnComponent<JSX.NvFielddropdownitemcheck & import("./vue-component-lib/utils").InputProps<string | number | boolean>, {}, {}, JSX.NvFielddropdownitemcheck & import("./vue-component-lib/utils").InputProps<string | number | boolean> & {}, import("vue").PublicProps>;
44
- export declare const NvFieldmultiselect: import("vue").DefineSetupFnComponent<JSX.NvFieldmultiselect & import("./vue-component-lib/utils").InputProps<string[]>, {}, {}, JSX.NvFieldmultiselect & import("./vue-component-lib/utils").InputProps<string[]> & {}, import("vue").PublicProps>;
45
- export declare const NvFieldnumber: import("vue").DefineSetupFnComponent<JSX.NvFieldnumber & import("./vue-component-lib/utils").InputProps<number>, {}, {}, JSX.NvFieldnumber & import("./vue-component-lib/utils").InputProps<number> & {}, import("vue").PublicProps>;
46
- export declare const NvFieldpassword: import("vue").DefineSetupFnComponent<JSX.NvFieldpassword & import("./vue-component-lib/utils").InputProps<string>, {}, {}, JSX.NvFieldpassword & import("./vue-component-lib/utils").InputProps<string> & {}, import("vue").PublicProps>;
47
- export declare const NvFieldradio: import("vue").DefineSetupFnComponent<JSX.NvFieldradio & import("./vue-component-lib/utils").InputProps<boolean>, {}, {}, JSX.NvFieldradio & import("./vue-component-lib/utils").InputProps<boolean> & {}, import("vue").PublicProps>;
48
- export declare const NvFieldselect: import("vue").DefineSetupFnComponent<JSX.NvFieldselect & import("./vue-component-lib/utils").InputProps<string>, {}, {}, JSX.NvFieldselect & import("./vue-component-lib/utils").InputProps<string> & {}, import("vue").PublicProps>;
49
- export declare const NvFieldslider: import("vue").DefineSetupFnComponent<JSX.NvFieldslider & import("./vue-component-lib/utils").InputProps<number[]>, {}, {}, JSX.NvFieldslider & import("./vue-component-lib/utils").InputProps<number[]> & {}, import("vue").PublicProps>;
50
- export declare const NvFieldtext: import("vue").DefineSetupFnComponent<JSX.NvFieldtext & import("./vue-component-lib/utils").InputProps<string>, {}, {}, JSX.NvFieldtext & import("./vue-component-lib/utils").InputProps<string> & {}, import("vue").PublicProps>;
51
- export declare const NvFieldtextarea: import("vue").DefineSetupFnComponent<JSX.NvFieldtextarea & import("./vue-component-lib/utils").InputProps<string>, {}, {}, JSX.NvFieldtextarea & import("./vue-component-lib/utils").InputProps<string> & {}, import("vue").PublicProps>;
52
- export declare const NvFieldtime: import("vue").DefineSetupFnComponent<JSX.NvFieldtime & import("./vue-component-lib/utils").InputProps<string>, {}, {}, JSX.NvFieldtime & import("./vue-component-lib/utils").InputProps<string> & {}, import("vue").PublicProps>;
53
- export declare const NvIcon: import("vue").DefineSetupFnComponent<JSX.NvIcon & import("./vue-component-lib/utils").InputProps<string | number | boolean>, {}, {}, JSX.NvIcon & import("./vue-component-lib/utils").InputProps<string | number | boolean> & {}, import("vue").PublicProps>;
54
- export declare const NvIconbutton: import("vue").DefineSetupFnComponent<JSX.NvIconbutton & import("./vue-component-lib/utils").InputProps<string | number | boolean>, {}, {}, JSX.NvIconbutton & import("./vue-component-lib/utils").InputProps<string | number | boolean> & {}, import("vue").PublicProps>;
55
- export declare const NvLoader: import("vue").DefineSetupFnComponent<JSX.NvLoader & import("./vue-component-lib/utils").InputProps<string | number | boolean>, {}, {}, JSX.NvLoader & import("./vue-component-lib/utils").InputProps<string | number | boolean> & {}, import("vue").PublicProps>;
56
- export declare const NvMenu: import("vue").DefineSetupFnComponent<JSX.NvMenu & import("./vue-component-lib/utils").InputProps<string | number | boolean>, {}, {}, JSX.NvMenu & import("./vue-component-lib/utils").InputProps<string | number | boolean> & {}, import("vue").PublicProps>;
57
- export declare const NvMenuitem: import("vue").DefineSetupFnComponent<JSX.NvMenuitem & import("./vue-component-lib/utils").InputProps<string | number | boolean>, {}, {}, JSX.NvMenuitem & import("./vue-component-lib/utils").InputProps<string | number | boolean> & {}, import("vue").PublicProps>;
58
- export declare const NvNotification: import("vue").DefineSetupFnComponent<JSX.NvNotification & import("./vue-component-lib/utils").InputProps<boolean>, {}, {}, JSX.NvNotification & import("./vue-component-lib/utils").InputProps<boolean> & {}, import("vue").PublicProps>;
59
- export declare const NvNotificationcontainer: import("vue").DefineSetupFnComponent<JSX.NvNotificationcontainer & import("./vue-component-lib/utils").InputProps<string | number | boolean>, {}, {}, JSX.NvNotificationcontainer & import("./vue-component-lib/utils").InputProps<string | number | boolean> & {}, import("vue").PublicProps>;
60
- export declare const NvPopover: import("vue").DefineSetupFnComponent<JSX.NvPopover & import("./vue-component-lib/utils").InputProps<boolean>, {}, {}, JSX.NvPopover & import("./vue-component-lib/utils").InputProps<boolean> & {}, import("vue").PublicProps>;
61
- export declare const NvRow: import("vue").DefineSetupFnComponent<JSX.NvRow & import("./vue-component-lib/utils").InputProps<string | number | boolean>, {}, {}, JSX.NvRow & import("./vue-component-lib/utils").InputProps<string | number | boolean> & {}, import("vue").PublicProps>;
62
- export declare const NvSplit: import("vue").DefineSetupFnComponent<JSX.NvSplit & import("./vue-component-lib/utils").InputProps<number[]>, {}, {}, JSX.NvSplit & import("./vue-component-lib/utils").InputProps<number[]> & {}, import("vue").PublicProps>;
63
- export declare const NvStack: import("vue").DefineSetupFnComponent<JSX.NvStack & import("./vue-component-lib/utils").InputProps<string | number | boolean>, {}, {}, JSX.NvStack & import("./vue-component-lib/utils").InputProps<string | number | boolean> & {}, import("vue").PublicProps>;
64
- export declare const NvTable: import("vue").DefineSetupFnComponent<JSX.NvTable & import("./vue-component-lib/utils").InputProps<string | number | boolean>, {}, {}, JSX.NvTable & import("./vue-component-lib/utils").InputProps<string | number | boolean> & {}, import("vue").PublicProps>;
65
- export declare const NvTableheader: import("vue").DefineSetupFnComponent<JSX.NvTableheader & import("./vue-component-lib/utils").InputProps<string | number | boolean>, {}, {}, JSX.NvTableheader & import("./vue-component-lib/utils").InputProps<string | number | boolean> & {}, import("vue").PublicProps>;
66
- export declare const NvToggle: import("vue").DefineSetupFnComponent<JSX.NvToggle & import("./vue-component-lib/utils").InputProps<boolean>, {}, {}, JSX.NvToggle & import("./vue-component-lib/utils").InputProps<boolean> & {}, import("vue").PublicProps>;
67
- export declare const NvTogglebutton: import("vue").DefineSetupFnComponent<JSX.NvTogglebutton & import("./vue-component-lib/utils").InputProps<string | number | boolean>, {}, {}, JSX.NvTogglebutton & import("./vue-component-lib/utils").InputProps<string | number | boolean> & {}, import("vue").PublicProps>;
68
- export declare const NvTogglebuttongroup: import("vue").DefineSetupFnComponent<JSX.NvTogglebuttongroup & import("./vue-component-lib/utils").InputProps<string[]>, {}, {}, JSX.NvTogglebuttongroup & import("./vue-component-lib/utils").InputProps<string[]> & {}, import("vue").PublicProps>;
69
- export declare const NvTooltip: import("vue").DefineSetupFnComponent<JSX.NvTooltip & import("./vue-component-lib/utils").InputProps<string | number | boolean>, {}, {}, JSX.NvTooltip & import("./vue-component-lib/utils").InputProps<string | number | boolean> & {}, import("vue").PublicProps>;
3
+ export declare const NvAccordion: StencilVueComponent<JSX.NvAccordion, JSX.NvAccordion["openIndexes"]>;
4
+ export declare const NvAccordionItem: StencilVueComponent<JSX.NvAccordionItem>;
5
+ export declare const NvAlert: StencilVueComponent<JSX.NvAlert, JSX.NvAlert["hidden"]>;
6
+ export declare const NvAvatar: StencilVueComponent<JSX.NvAvatar>;
7
+ export declare const NvBadge: StencilVueComponent<JSX.NvBadge>;
8
+ export declare const NvBreadcrumb: StencilVueComponent<JSX.NvBreadcrumb>;
9
+ export declare const NvBreadcrumbs: StencilVueComponent<JSX.NvBreadcrumbs>;
10
+ export declare const NvButton: StencilVueComponent<JSX.NvButton>;
11
+ export declare const NvButtongroup: StencilVueComponent<JSX.NvButtongroup>;
12
+ export declare const NvCalendar: StencilVueComponent<JSX.NvCalendar, JSX.NvCalendar["value"]>;
13
+ export declare const NvCol: StencilVueComponent<JSX.NvCol>;
14
+ export declare const NvDatagrid: StencilVueComponent<JSX.NvDatagrid, JSX.NvDatagrid["state"]>;
15
+ export declare const NvDatagridcolumn: StencilVueComponent<JSX.NvDatagridcolumn>;
16
+ export declare const NvDialog: StencilVueComponent<JSX.NvDialog, JSX.NvDialog["open"]>;
17
+ export declare const NvDialogfooter: StencilVueComponent<JSX.NvDialogfooter>;
18
+ export declare const NvDialogheader: StencilVueComponent<JSX.NvDialogheader>;
19
+ export declare const NvFieldcheckbox: StencilVueComponent<JSX.NvFieldcheckbox, JSX.NvFieldcheckbox["checked"]>;
20
+ export declare const NvFielddate: StencilVueComponent<JSX.NvFielddate, JSX.NvFielddate["value"]>;
21
+ export declare const NvFielddaterange: StencilVueComponent<JSX.NvFielddaterange, JSX.NvFielddaterange["value"]>;
22
+ export declare const NvFielddropdown: StencilVueComponent<JSX.NvFielddropdown, JSX.NvFielddropdown["value"]>;
23
+ export declare const NvFielddropdownitem: StencilVueComponent<JSX.NvFielddropdownitem>;
24
+ export declare const NvFielddropdownitemcheck: StencilVueComponent<JSX.NvFielddropdownitemcheck>;
25
+ export declare const NvFieldmultiselect: StencilVueComponent<JSX.NvFieldmultiselect, JSX.NvFieldmultiselect["value"]>;
26
+ export declare const NvFieldnumber: StencilVueComponent<JSX.NvFieldnumber, JSX.NvFieldnumber["value"]>;
27
+ export declare const NvFieldpassword: StencilVueComponent<JSX.NvFieldpassword, JSX.NvFieldpassword["value"]>;
28
+ export declare const NvFieldradio: StencilVueComponent<JSX.NvFieldradio, JSX.NvFieldradio["checked"]>;
29
+ export declare const NvFieldselect: StencilVueComponent<JSX.NvFieldselect, JSX.NvFieldselect["value"]>;
30
+ export declare const NvFieldslider: StencilVueComponent<JSX.NvFieldslider, JSX.NvFieldslider["value"]>;
31
+ export declare const NvFieldtext: StencilVueComponent<JSX.NvFieldtext, JSX.NvFieldtext["value"]>;
32
+ export declare const NvFieldtextarea: StencilVueComponent<JSX.NvFieldtextarea, JSX.NvFieldtextarea["value"]>;
33
+ export declare const NvFieldtime: StencilVueComponent<JSX.NvFieldtime, JSX.NvFieldtime["value"]>;
34
+ export declare const NvIcon: StencilVueComponent<JSX.NvIcon>;
35
+ export declare const NvIconbutton: StencilVueComponent<JSX.NvIconbutton>;
36
+ export declare const NvLoader: StencilVueComponent<JSX.NvLoader>;
37
+ export declare const NvMenu: StencilVueComponent<JSX.NvMenu>;
38
+ export declare const NvMenuitem: StencilVueComponent<JSX.NvMenuitem>;
39
+ export declare const NvNotification: StencilVueComponent<JSX.NvNotification, JSX.NvNotification["hidden"]>;
40
+ export declare const NvNotificationBullet: StencilVueComponent<JSX.NvNotificationBullet>;
41
+ export declare const NvNotificationcontainer: StencilVueComponent<JSX.NvNotificationcontainer>;
42
+ export declare const NvPopover: StencilVueComponent<JSX.NvPopover, JSX.NvPopover["open"]>;
43
+ export declare const NvRow: StencilVueComponent<JSX.NvRow>;
44
+ export declare const NvSidebar: StencilVueComponent<JSX.NvSidebar, JSX.NvSidebar["open"]>;
45
+ export declare const NvSidebarcontent: StencilVueComponent<JSX.NvSidebarcontent>;
46
+ export declare const NvSidebardivider: StencilVueComponent<JSX.NvSidebardivider>;
47
+ export declare const NvSidebarfooter: StencilVueComponent<JSX.NvSidebarfooter>;
48
+ export declare const NvSidebargroup: StencilVueComponent<JSX.NvSidebargroup>;
49
+ export declare const NvSidebarheader: StencilVueComponent<JSX.NvSidebarheader>;
50
+ export declare const NvSidebarlogo: StencilVueComponent<JSX.NvSidebarlogo>;
51
+ export declare const NvSidebarnavitem: StencilVueComponent<JSX.NvSidebarnavitem>;
52
+ export declare const NvSidebarnavsubitem: StencilVueComponent<JSX.NvSidebarnavsubitem>;
53
+ export declare const NvSplit: StencilVueComponent<JSX.NvSplit, JSX.NvSplit["sizes"]>;
54
+ export declare const NvStack: StencilVueComponent<JSX.NvStack>;
55
+ export declare const NvTable: StencilVueComponent<JSX.NvTable>;
56
+ export declare const NvTableheader: StencilVueComponent<JSX.NvTableheader>;
57
+ export declare const NvToggle: StencilVueComponent<JSX.NvToggle, JSX.NvToggle["checked"]>;
58
+ export declare const NvTogglebutton: StencilVueComponent<JSX.NvTogglebutton>;
59
+ export declare const NvTogglebuttongroup: StencilVueComponent<JSX.NvTogglebuttongroup, JSX.NvTogglebuttongroup["value"]>;
60
+ export declare const NvTooltip: StencilVueComponent<JSX.NvTooltip>;
package/dist/generated/components.js CHANGED
@@ -1,13 +1,15 @@
1
1
  /* eslint-disable */
2
2
  /* tslint:disable */
3
3
  /* auto-generated vue proxies */
4
- import { defineContainer } from './vue-component-lib/utils';
4
+ import { defineContainer } from '@stencil/vue-output-target/runtime';
5
5
  export const NvAccordion = /*@__PURE__*/ defineContainer('nv-accordion', undefined, [
6
6
  'data',
7
7
  'mode',
8
8
  'openIndexes',
9
9
  'openIndexesChanged'
10
- ], 'openIndexes', 'open-indexes-changed');
10
+ ], [
11
+ 'openIndexesChanged'
12
+ ], 'openIndexes', 'openIndexesChanged', undefined);
11
13
  export const NvAccordionItem = /*@__PURE__*/ defineContainer('nv-accordion-item', undefined, [
12
14
  'itemTitle',
13
15
  'subtitle',
@@ -16,6 +18,8 @@ export const NvAccordionItem = /*@__PURE__*/ defineContainer('nv-accordion-item'
16
18
  'maxContentHeight',
17
19
  'mode',
18
20
  'itemToggle'
21
+ ], [
22
+ 'itemToggle'
19
23
  ]);
20
24
  export const NvAlert = /*@__PURE__*/ defineContainer('nv-alert', undefined, [
21
25
  'color',
@@ -30,7 +34,11 @@ export const NvAlert = /*@__PURE__*/ defineContainer('nv-alert', undefined, [
30
34
  'hiddenChanged',
31
35
  'hiddenChangedComplete',
32
36
  'closeClicked'
33
- ], 'hidden', 'hidden-changed');
37
+ ], [
38
+ 'hiddenChanged',
39
+ 'hiddenChangedComplete',
40
+ 'closeClicked'
41
+ ], 'hidden', 'hiddenChanged', undefined);
34
42
  export const NvAvatar = /*@__PURE__*/ defineContainer('nv-avatar', undefined, [
35
43
  'xsmall',
36
44
  'small',
@@ -59,6 +67,10 @@ export const NvBadge = /*@__PURE__*/ defineContainer('nv-badge', undefined, [
59
67
  'closeClicked',
60
68
  'hiddenChanged',
61
69
  'hiddenChangedComplete'
70
+ ], [
71
+ 'closeClicked',
72
+ 'hiddenChanged',
73
+ 'hiddenChangedComplete'
62
74
  ]);
63
75
  export const NvBreadcrumb = /*@__PURE__*/ defineContainer('nv-breadcrumb', undefined, [
64
76
  'type',
@@ -105,7 +117,11 @@ export const NvCalendar = /*@__PURE__*/ defineContainer('nv-calendar', undefined
105
117
  'singleDateChange',
106
118
  'rangeDateChange',
107
119
  'valueChanged'
108
- ], 'value', 'value-changed');
120
+ ], [
121
+ 'singleDateChange',
122
+ 'rangeDateChange',
123
+ 'valueChanged'
124
+ ], 'value', 'valueChanged', undefined);
109
125
  export const NvCol = /*@__PURE__*/ defineContainer('nv-col', undefined, [
110
126
  'size'
111
127
  ]);
@@ -127,7 +143,11 @@ export const NvDatagrid = /*@__PURE__*/ defineContainer('nv-datagrid', undefined
127
143
  'action',
128
144
  'selectedRows',
129
145
  'stateChanged'
130
- ], 'state', 'state-changed');
146
+ ], [
147
+ 'action',
148
+ 'selectedRows',
149
+ 'stateChanged'
150
+ ], 'state', 'stateChanged', undefined);
131
151
  export const NvDatagridcolumn = /*@__PURE__*/ defineContainer('nv-datagridcolumn', undefined, [
132
152
  'header',
133
153
  'accessor',
@@ -145,7 +165,9 @@ export const NvDialog = /*@__PURE__*/ defineContainer('nv-dialog', undefined, [
145
165
  'full',
146
166
  'autofocus',
147
167
  'openChanged'
148
- ], 'open', 'open-changed');
168
+ ], [
169
+ 'openChanged'
170
+ ], 'open', 'openChanged', undefined);
149
171
  export const NvDialogfooter = /*@__PURE__*/ defineContainer('nv-dialogfooter', undefined, [
150
172
  'disabled',
151
173
  'undismissable',
@@ -158,6 +180,9 @@ export const NvDialogfooter = /*@__PURE__*/ defineContainer('nv-dialogfooter', u
158
180
  'form',
159
181
  'dialogCanceled',
160
182
  'dialogPrimaryClicked'
183
+ ], [
184
+ 'dialogCanceled',
185
+ 'dialogPrimaryClicked'
161
186
  ]);
162
187
  export const NvDialogheader = /*@__PURE__*/ defineContainer('nv-dialogheader', undefined, [
163
188
  'heading',
@@ -181,9 +206,12 @@ export const NvFieldcheckbox = /*@__PURE__*/ defineContainer('nv-fieldcheckbox',
181
206
  'disabled',
182
207
  'readonly',
183
208
  'required',
209
+ 'ariaRequiredAttr',
184
210
  'autofocus',
185
211
  'checkedChanged'
186
- ], 'checked', 'checked-changed');
212
+ ], [
213
+ 'checkedChanged'
214
+ ], 'checked', 'checkedChanged', undefined);
187
215
  export const NvFielddate = /*@__PURE__*/ defineContainer('nv-fielddate', undefined, [
188
216
  'inputId',
189
217
  'label',
@@ -193,6 +221,7 @@ export const NvFielddate = /*@__PURE__*/ defineContainer('nv-fielddate', undefin
193
221
  'disabled',
194
222
  'readonly',
195
223
  'required',
224
+ 'ariaRequiredAttr',
196
225
  'error',
197
226
  'errorDescription',
198
227
  'success',
@@ -211,7 +240,9 @@ export const NvFielddate = /*@__PURE__*/ defineContainer('nv-fielddate', undefin
211
240
  'disabledDates',
212
241
  'fluid',
213
242
  'valueChanged'
214
- ], 'value', 'value-changed');
243
+ ], [
244
+ 'valueChanged'
245
+ ], 'value', 'valueChanged', undefined);
215
246
  export const NvFielddaterange = /*@__PURE__*/ defineContainer('nv-fielddaterange', undefined, [
216
247
  'startInputId',
217
248
  'endInputId',
@@ -224,6 +255,7 @@ export const NvFielddaterange = /*@__PURE__*/ defineContainer('nv-fielddaterange
224
255
  'disabled',
225
256
  'readonly',
226
257
  'required',
258
+ 'ariaRequiredAttr',
227
259
  'error',
228
260
  'errorDescription',
229
261
  'success',
@@ -243,7 +275,10 @@ export const NvFielddaterange = /*@__PURE__*/ defineContainer('nv-fielddaterange
243
275
  'fluid',
244
276
  'dateRangeChange',
245
277
  'valueChanged'
246
- ], 'value', 'value-changed');
278
+ ], [
279
+ 'dateRangeChange',
280
+ 'valueChanged'
281
+ ], 'value', 'valueChanged', undefined);
247
282
  export const NvFielddropdown = /*@__PURE__*/ defineContainer('nv-fielddropdown', undefined, [
248
283
  'inputId',
249
284
  'name',
@@ -253,6 +288,7 @@ export const NvFielddropdown = /*@__PURE__*/ defineContainer('nv-fielddropdown',
253
288
  'autocomplete',
254
289
  'value',
255
290
  'required',
291
+ 'ariaRequiredAttr',
256
292
  'readonly',
257
293
  'disabled',
258
294
  'error',
@@ -266,11 +302,23 @@ export const NvFielddropdown = /*@__PURE__*/ defineContainer('nv-fielddropdown',
266
302
  'debounceDelay',
267
303
  'autofocus',
268
304
  'fluid',
305
+ 'filterMode',
306
+ 'maxResults',
307
+ 'startFilterAt',
308
+ 'locale',
309
+ 'truncatedResultsText',
310
+ 'workerThreshold',
311
+ 'fuzzyThreshold',
312
+ 'valueChanged',
313
+ 'filterTextChanged',
314
+ 'openChanged',
315
+ 'dropdownItemSelected'
316
+ ], [
269
317
  'valueChanged',
270
318
  'filterTextChanged',
271
319
  'openChanged',
272
320
  'dropdownItemSelected'
273
- ], 'value', 'value-changed');
321
+ ], 'value', 'valueChanged', undefined);
274
322
  export const NvFielddropdownitem = /*@__PURE__*/ defineContainer('nv-fielddropdownitem', undefined, [
275
323
  'disabled',
276
324
  'selected',
@@ -278,6 +326,8 @@ export const NvFielddropdownitem = /*@__PURE__*/ defineContainer('nv-fielddropdo
278
326
  'label',
279
327
  'detached',
280
328
  'dropdownItemSelected'
329
+ ], [
330
+ 'dropdownItemSelected'
281
331
  ]);
282
332
  export const NvFielddropdownitemcheck = /*@__PURE__*/ defineContainer('nv-fielddropdownitemcheck', undefined, [
283
333
  'checked',
@@ -287,6 +337,8 @@ export const NvFielddropdownitemcheck = /*@__PURE__*/ defineContainer('nv-fieldd
287
337
  'group',
288
338
  'disabled',
289
339
  'itemChecked'
340
+ ], [
341
+ 'itemChecked'
290
342
  ]);
291
343
  export const NvFieldmultiselect = /*@__PURE__*/ defineContainer('nv-fieldmultiselect', undefined, [
292
344
  'label',
@@ -296,6 +348,7 @@ export const NvFieldmultiselect = /*@__PURE__*/ defineContainer('nv-fieldmultise
296
348
  'placeholder',
297
349
  'autocomplete',
298
350
  'required',
351
+ 'ariaRequiredAttr',
299
352
  'readonly',
300
353
  'disabled',
301
354
  'error',
@@ -314,9 +367,19 @@ export const NvFieldmultiselect = /*@__PURE__*/ defineContainer('nv-fieldmultise
314
367
  'enableSelectAll',
315
368
  'selectAllLabel',
316
369
  'deselectAllLabel',
370
+ 'filterMode',
371
+ 'maxResults',
372
+ 'startFilterAt',
373
+ 'locale',
374
+ 'truncatedResultsText',
375
+ 'workerThreshold',
376
+ 'fuzzyThreshold',
377
+ 'valueChanged',
378
+ 'filterTextChanged'
379
+ ], [
317
380
  'valueChanged',
318
381
  'filterTextChanged'
319
- ], 'value', 'value-changed');
382
+ ], 'value', 'valueChanged', undefined);
320
383
  export const NvFieldnumber = /*@__PURE__*/ defineContainer('nv-fieldnumber', undefined, [
321
384
  'message',
322
385
  'validation',
@@ -328,6 +391,7 @@ export const NvFieldnumber = /*@__PURE__*/ defineContainer('nv-fieldnumber', und
328
391
  'disabled',
329
392
  'readonly',
330
393
  'required',
394
+ 'ariaRequiredAttr',
331
395
  'error',
332
396
  'errorDescription',
333
397
  'success',
@@ -338,7 +402,9 @@ export const NvFieldnumber = /*@__PURE__*/ defineContainer('nv-fieldnumber', und
338
402
  'autofocus',
339
403
  'fluid',
340
404
  'valueChanged'
341
- ], 'value', 'value-changed');
405
+ ], [
406
+ 'valueChanged'
407
+ ], 'value', 'valueChanged', undefined);
342
408
  export const NvFieldpassword = /*@__PURE__*/ defineContainer('nv-fieldpassword', undefined, [
343
409
  'inputId',
344
410
  'label',
@@ -349,6 +415,7 @@ export const NvFieldpassword = /*@__PURE__*/ defineContainer('nv-fieldpassword',
349
415
  'disabled',
350
416
  'readonly',
351
417
  'required',
418
+ 'ariaRequiredAttr',
352
419
  'error',
353
420
  'errorDescription',
354
421
  'success',
@@ -362,7 +429,9 @@ export const NvFieldpassword = /*@__PURE__*/ defineContainer('nv-fieldpassword',
362
429
  'autofocus',
363
430
  'fluid',
364
431
  'valueChanged'
365
- ], 'value', 'value-changed');
432
+ ], [
433
+ 'valueChanged'
434
+ ], 'value', 'valueChanged', undefined);
366
435
  export const NvFieldradio = /*@__PURE__*/ defineContainer('nv-fieldradio', undefined, [
367
436
  'message',
368
437
  'labelBefore',
@@ -378,7 +447,9 @@ export const NvFieldradio = /*@__PURE__*/ defineContainer('nv-fieldradio', undef
378
447
  'disabled',
379
448
  'autofocus',
380
449
  'checkedChanged'
381
- ], 'checked', 'checked-changed');
450
+ ], [
451
+ 'checkedChanged'
452
+ ], 'checked', 'checkedChanged', undefined);
382
453
  export const NvFieldselect = /*@__PURE__*/ defineContainer('nv-fieldselect', undefined, [
383
454
  'message',
384
455
  'validation',
@@ -390,6 +461,7 @@ export const NvFieldselect = /*@__PURE__*/ defineContainer('nv-fieldselect', und
390
461
  'disabled',
391
462
  'readonly',
392
463
  'required',
464
+ 'ariaRequiredAttr',
393
465
  'error',
394
466
  'errorDescription',
395
467
  'success',
@@ -399,7 +471,9 @@ export const NvFieldselect = /*@__PURE__*/ defineContainer('nv-fieldselect', und
399
471
  'autofocus',
400
472
  'fluid',
401
473
  'valueChanged'
402
- ], 'value', 'value-changed');
474
+ ], [
475
+ 'valueChanged'
476
+ ], 'value', 'valueChanged', undefined);
403
477
  export const NvFieldslider = /*@__PURE__*/ defineContainer('nv-fieldslider', undefined, [
404
478
  'startInputId',
405
479
  'endInputId',
@@ -427,7 +501,9 @@ export const NvFieldslider = /*@__PURE__*/ defineContainer('nv-fieldslider', und
427
501
  'labelBeforeValue',
428
502
  'labelAfterValue',
429
503
  'valueChanged'
430
- ], 'value', 'value-changed');
504
+ ], [
505
+ 'valueChanged'
506
+ ], 'value', 'valueChanged', undefined);
431
507
  export const NvFieldtext = /*@__PURE__*/ defineContainer('nv-fieldtext', undefined, [
432
508
  'message',
433
509
  'validation',
@@ -442,6 +518,7 @@ export const NvFieldtext = /*@__PURE__*/ defineContainer('nv-fieldtext', undefin
442
518
  'disabled',
443
519
  'readonly',
444
520
  'required',
521
+ 'ariaRequiredAttr',
445
522
  'error',
446
523
  'errorDescription',
447
524
  'success',
@@ -453,7 +530,9 @@ export const NvFieldtext = /*@__PURE__*/ defineContainer('nv-fieldtext', undefin
453
530
  'autofocus',
454
531
  'fluid',
455
532
  'valueChanged'
456
- ], 'value', 'value-changed');
533
+ ], [
534
+ 'valueChanged'
535
+ ], 'value', 'valueChanged', undefined);
457
536
  export const NvFieldtextarea = /*@__PURE__*/ defineContainer('nv-fieldtextarea', undefined, [
458
537
  'message',
459
538
  'validation',
@@ -466,6 +545,7 @@ export const NvFieldtextarea = /*@__PURE__*/ defineContainer('nv-fieldtextarea',
466
545
  'disabled',
467
546
  'readonly',
468
547
  'required',
548
+ 'ariaRequiredAttr',
469
549
  'error',
470
550
  'errorDescription',
471
551
  'success',
@@ -477,7 +557,9 @@ export const NvFieldtextarea = /*@__PURE__*/ defineContainer('nv-fieldtextarea',
477
557
  'autofocus',
478
558
  'fluid',
479
559
  'valueChanged'
480
- ], 'value', 'value-changed');
560
+ ], [
561
+ 'valueChanged'
562
+ ], 'value', 'valueChanged', undefined);
481
563
  export const NvFieldtime = /*@__PURE__*/ defineContainer('nv-fieldtime', undefined, [
482
564
  'value',
483
565
  'label',
@@ -485,6 +567,7 @@ export const NvFieldtime = /*@__PURE__*/ defineContainer('nv-fieldtime', undefin
485
567
  'readonly',
486
568
  'disabled',
487
569
  'required',
570
+ 'ariaRequiredAttr',
488
571
  'name',
489
572
  'success',
490
573
  'error',
@@ -497,7 +580,9 @@ export const NvFieldtime = /*@__PURE__*/ defineContainer('nv-fieldtime', undefin
497
580
  'min',
498
581
  'autofocus',
499
582
  'valueChanged'
500
- ], 'value', 'value-changed');
583
+ ], [
584
+ 'valueChanged'
585
+ ], 'value', 'valueChanged', undefined);
501
586
  export const NvIcon = /*@__PURE__*/ defineContainer('nv-icon', undefined, [
502
587
  'xsmall',
503
588
  'small',
@@ -530,6 +615,8 @@ export const NvMenu = /*@__PURE__*/ defineContainer('nv-menu', undefined, [
530
615
  'placement',
531
616
  'items',
532
617
  'menuitemSelected'
618
+ ], [
619
+ 'menuitemSelected'
533
620
  ]);
534
621
  export const NvMenuitem = /*@__PURE__*/ defineContainer('nv-menuitem', undefined, [
535
622
  'label',
@@ -539,6 +626,8 @@ export const NvMenuitem = /*@__PURE__*/ defineContainer('nv-menuitem', undefined
539
626
  'hasSubmenu',
540
627
  'name',
541
628
  'menuitemSelected'
629
+ ], [
630
+ 'menuitemSelected'
542
631
  ]);
543
632
  export const NvNotification = /*@__PURE__*/ defineContainer('nv-notification', undefined, [
544
633
  'uid',
@@ -551,7 +640,16 @@ export const NvNotification = /*@__PURE__*/ defineContainer('nv-notification', u
551
640
  'hidden',
552
641
  'initiallyHidden',
553
642
  'hiddenChanged'
554
- ], 'hidden', 'hidden-changed');
643
+ ], [
644
+ 'hiddenChanged'
645
+ ], 'hidden', 'hiddenChanged', undefined);
646
+ export const NvNotificationBullet = /*@__PURE__*/ defineContainer('nv-notification-bullet', undefined, [
647
+ 'count',
648
+ 'intention',
649
+ 'emphasis',
650
+ 'size',
651
+ 'contrastingBorder'
652
+ ]);
555
653
  export const NvNotificationcontainer = /*@__PURE__*/ defineContainer('nv-notificationcontainer', undefined, [
556
654
  'position'
557
655
  ]);
@@ -569,15 +667,51 @@ export const NvPopover = /*@__PURE__*/ defineContainer('nv-popover', undefined,
569
667
  'enterDelay',
570
668
  'nested',
571
669
  'openChanged'
572
- ], 'open', 'open-changed');
670
+ ], [
671
+ 'openChanged'
672
+ ], 'open', 'openChanged', undefined);
573
673
  export const NvRow = /*@__PURE__*/ defineContainer('nv-row', undefined);
674
+ export const NvSidebar = /*@__PURE__*/ defineContainer('nv-sidebar', undefined, [
675
+ 'type',
676
+ 'open',
677
+ 'activePath',
678
+ 'notificationIntention',
679
+ 'notificationEmphasis',
680
+ 'openChanged'
681
+ ], [
682
+ 'openChanged'
683
+ ], 'open', 'openChanged', undefined);
684
+ export const NvSidebarcontent = /*@__PURE__*/ defineContainer('nv-sidebarcontent', undefined);
685
+ export const NvSidebardivider = /*@__PURE__*/ defineContainer('nv-sidebardivider', undefined);
686
+ export const NvSidebarfooter = /*@__PURE__*/ defineContainer('nv-sidebarfooter', undefined);
687
+ export const NvSidebargroup = /*@__PURE__*/ defineContainer('nv-sidebargroup', undefined, [
688
+ 'label'
689
+ ]);
690
+ export const NvSidebarheader = /*@__PURE__*/ defineContainer('nv-sidebarheader', undefined);
691
+ export const NvSidebarlogo = /*@__PURE__*/ defineContainer('nv-sidebarlogo', undefined, [
692
+ 'label',
693
+ 'logo',
694
+ 'collapsedLogo'
695
+ ]);
696
+ export const NvSidebarnavitem = /*@__PURE__*/ defineContainer('nv-sidebarnavitem', undefined, [
697
+ 'icon',
698
+ 'active',
699
+ 'collapsible',
700
+ 'open',
701
+ 'notificationCount'
702
+ ]);
703
+ export const NvSidebarnavsubitem = /*@__PURE__*/ defineContainer('nv-sidebarnavsubitem', undefined, [
704
+ 'active'
705
+ ]);
574
706
  export const NvSplit = /*@__PURE__*/ defineContainer('nv-split', undefined, [
575
707
  'direction',
576
708
  'sizes',
577
709
  'minSizes',
578
710
  'gutterSize',
579
711
  'sizesChanged'
580
- ], 'sizes', 'sizes-changed');
712
+ ], [
713
+ 'sizesChanged'
714
+ ], 'sizes', 'sizesChanged', undefined);
581
715
  export const NvStack = /*@__PURE__*/ defineContainer('nv-stack', undefined, [
582
716
  'gutter',
583
717
  'fill',
@@ -590,6 +724,8 @@ export const NvTableheader = /*@__PURE__*/ defineContainer('nv-tableheader', und
590
724
  'sortable',
591
725
  'sortDirection',
592
726
  'sortDirectionChanged'
727
+ ], [
728
+ 'sortDirectionChanged'
593
729
  ]);
594
730
  export const NvToggle = /*@__PURE__*/ defineContainer('nv-toggle', undefined, [
595
731
  'inputId',
@@ -603,7 +739,9 @@ export const NvToggle = /*@__PURE__*/ defineContainer('nv-toggle', undefined, [
603
739
  'disabled',
604
740
  'readonly',
605
741
  'checkedChanged'
606
- ], 'checked', 'checked-changed');
742
+ ], [
743
+ 'checkedChanged'
744
+ ], 'checked', 'checkedChanged', undefined);
607
745
  export const NvTogglebutton = /*@__PURE__*/ defineContainer('nv-togglebutton', undefined, [
608
746
  'size',
609
747
  'value',
@@ -611,6 +749,8 @@ export const NvTogglebutton = /*@__PURE__*/ defineContainer('nv-togglebutton', u
611
749
  'active',
612
750
  'emphasis',
613
751
  'toggled'
752
+ ], [
753
+ 'toggled'
614
754
  ]);
615
755
  export const NvTogglebuttongroup = /*@__PURE__*/ defineContainer('nv-togglebuttongroup', undefined, [
616
756
  'value',
@@ -619,7 +759,9 @@ export const NvTogglebuttongroup = /*@__PURE__*/ defineContainer('nv-togglebutto
619
759
  'emphasis',
620
760
  'size',
621
761
  'valueChanged'
622
- ], 'value', 'value-changed');
762
+ ], [
763
+ 'valueChanged'
764
+ ], 'value', 'valueChanged', undefined);
623
765
  export const NvTooltip = /*@__PURE__*/ defineContainer('nv-tooltip', undefined, [
624
766
  'triggerElement',
625
767
  'message',
@@ -627,4 +769,6 @@ export const NvTooltip = /*@__PURE__*/ defineContainer('nv-tooltip', undefined,
627
769
  'enterDelay',
628
770
  'strategy',
629
771
  'openChanged'
772
+ ], [
773
+ 'openChanged'
630
774
  ]);
package/dist/plugin.d.ts CHANGED
@@ -3,10 +3,6 @@
3
3
  * 1. Loads the Stencil components using defineCustomElements
4
4
  * 2. Sets up custom event handling to bridge the naming convention difference
5
5
  * between Stencil (camelCase) and Vue (kebab-case)
6
- *
7
- * The ael, rel, and ce functions are used by Stencil to handle events.
8
- * By providing custom implementations, we ensure that event names are
9
- * properly transformed, allowing Stencil components to work seamlessly in Vue.
10
6
  */
11
7
  import { App } from 'vue';
12
8
  import { type NotificationServiceOptions } from './providers/NotificationService';
package/dist/plugin.js CHANGED
@@ -3,42 +3,9 @@
3
3
  * 1. Loads the Stencil components using defineCustomElements
4
4
  * 2. Sets up custom event handling to bridge the naming convention difference
5
5
  * between Stencil (camelCase) and Vue (kebab-case)
6
- *
7
- * The ael, rel, and ce functions are used by Stencil to handle events.
8
- * By providing custom implementations, we ensure that event names are
9
- * properly transformed, allowing Stencil components to work seamlessly in Vue.
10
6
  */
11
7
  import { defineCustomElements } from '@nova-design-system/nova-webcomponents/loader';
12
8
  import { NvNotificationService, } from './providers/NotificationService';
13
- /**
14
- * Transforms the event name to kebab-case.
15
- * @param {string} eventName - The name of the event.
16
- * @returns {string} The transformed event name.
17
- */
18
- const transformEventName = (eventName) => {
19
- return eventName
20
- .replace(/([a-z])([A-Z])/g, '$1-$2')
21
- .replace(/[\s_]+/g, '-')
22
- .toLowerCase();
23
- };
24
- /**
25
- * Custom add event listener function that transforms the event name
26
- * @param {HTMLElement} el - The element to attach the event listener to.
27
- * @param {string} eventName - The name of the event.
28
- * @param {Function} cb - The callback function to be executed when the event is triggered.
29
- * @param {object} opts - The options for the event listener.
30
- * @returns {void} Nothing.
31
- */
32
- const ael = (el, eventName, cb, opts) => el.addEventListener(transformEventName(eventName), cb, opts);
33
- /**
34
- * Custom remove event listener function that transforms the event name.
35
- * @param {HTMLElement} el - The element to remove the event listener from.
36
- * @param {string} eventName - The name of the event.
37
- * @param {Function} cb - The callback function to be removed.
38
- * @param {object} opts - The options for the event listener.
39
- * @returns {void} Nothing.
40
- */
41
- const rel = (el, eventName, cb, opts) => el.removeEventListener(transformEventName(eventName), cb, opts);
42
9
  /**
43
10
  * This is the Vue plugin that is used to define the custom elements, event
44
11
  * handlers, and includes the notification service.
@@ -46,11 +13,7 @@ const rel = (el, eventName, cb, opts) => el.removeEventListener(transformEventNa
46
13
  export const NovaComponents = {
47
14
  async install(app, options = {}) {
48
15
  // Define custom elements with event handling
49
- defineCustomElements(window, {
50
- ce: (eventName, opts) => new CustomEvent(transformEventName(eventName), opts),
51
- ael,
52
- rel,
53
- });
16
+ defineCustomElements();
54
17
  // Install notification service
55
18
  NvNotificationService.install(app, options.notifications);
56
19
  },
package/dist/providers/NotificationService.js CHANGED
@@ -1,15 +1,14 @@
1
1
  /* eslint-disable jsdoc/require-jsdoc */
2
2
  import { ref, createApp, h, } from 'vue';
3
3
  import { NvButton, NvNotification, NvNotificationcontainer, } from '../generated/components';
4
+ import { v4 as uuidv4 } from 'uuid';
4
5
  /**
5
6
  * Utility function to generate unique IDs.
6
7
  *
7
8
  * @returns {string} A unique identifier string
8
9
  */
9
10
  const generateId = () => {
10
- return `notification-${Date.now()}-${Math.random()
11
- .toString(36)
12
- .substr(2, 9)}`;
11
+ return `notification-${uuidv4()}`;
13
12
  };
14
13
  /**
15
14
  * Utility function to unwrap a notification element from a ref.
@@ -68,6 +67,7 @@ class NotificationManager {
68
67
  return h(NvNotification, {
69
68
  key: notification.id,
70
69
  ref: this.setElRef(notification.id),
70
+ uid: notification.id,
71
71
  heading: notification.heading,
72
72
  message: notification.message,
73
73
  dismissible: notification.dismissible,
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@nova-design-system/nova-vue",
3
- "version": "3.22.0",
3
+ "version": "3.23.0",
4
4
  "description": "Nova is a design system created by Elia Group to empower creators to efficiently build solutions that people love to use.",
5
5
  "author": "Elia Group",
6
6
  "homepage": "https://nova.eliagroup.io",
@@ -44,7 +44,7 @@
44
44
  "@tanstack/vue-table": "8.21.3"
45
45
  },
46
46
  "devDependencies": {
47
- "vue": "3.5.17",
47
+ "vue": "3.5.25",
48
48
  "nova-utils": "*",
49
49
  "nova-storybook-utils": "*"
50
50
  }
package/dist/generated/vue-component-lib/utils.d.ts DELETED
@@ -1,16 +0,0 @@
1
- export interface InputProps<T> {
2
- modelValue?: T;
3
- }
4
- /**
5
- * Create a callback to define a Vue component wrapper around a Web Component.
6
- *
7
- * @prop name - The component tag name (i.e. `ion-button`)
8
- * @prop componentProps - An array of properties on the
9
- * component. These usually match up with the @Prop definitions
10
- * in each component's TSX file.
11
- * @prop customElement - An option custom element instance to pass
12
- * to customElements.define. Only set if `includeImportCustomElements: true` in your config.
13
- * @prop modelProp - The prop that v-model binds to (i.e. value)
14
- * @prop modelUpdateEvent - The event that is fired from your Web Component when the value changes (i.e. ionChange)
15
- */
16
- export declare const defineContainer: <Props, VModelType = string | number | boolean>(name: string, defineCustomElement: any, componentProps?: string[], modelProp?: string, modelUpdateEvent?: string) => import("vue").DefineSetupFnComponent<Props & InputProps<VModelType>, {}, {}, Props & InputProps<VModelType> & {}, import("vue").PublicProps>;
package/dist/generated/vue-component-lib/utils.js DELETED
@@ -1,195 +0,0 @@
1
- // @ts-nocheck
2
- // It's easier and safer for Volar to disable typechecking and let the return type inference do its job.
3
- import { defineComponent, getCurrentInstance, h, inject, ref, withDirectives } from 'vue';
4
- const UPDATE_VALUE_EVENT = 'update:modelValue';
5
- const MODEL_VALUE = 'modelValue';
6
- const ROUTER_LINK_VALUE = 'routerLink';
7
- const NAV_MANAGER = 'navManager';
8
- const ROUTER_PROP_PREFIX = 'router';
9
- const ARIA_PROP_PREFIX = 'aria';
10
- /**
11
- * Starting in Vue 3.1.0, all properties are
12
- * added as keys to the props object, even if
13
- * they are not being used. In order to correctly
14
- * account for both value props and v-model props,
15
- * we need to check if the key exists for Vue <3.1.0
16
- * and then check if it is not undefined for Vue >= 3.1.0.
17
- * See https://github.com/vuejs/vue-next/issues/3889
18
- */
19
- const EMPTY_PROP = Symbol();
20
- const DEFAULT_EMPTY_PROP = { default: EMPTY_PROP };
21
- const getComponentClasses = (classes) => {
22
- return classes?.split(' ') || [];
23
- };
24
- const getElementClasses = (ref, componentClasses, defaultClasses = []) => {
25
- return [...Array.from(ref.value?.classList || []), ...defaultClasses].filter((c, i, self) => !componentClasses.has(c) && self.indexOf(c) === i);
26
- };
27
- /**
28
- * Create a callback to define a Vue component wrapper around a Web Component.
29
- *
30
- * @prop name - The component tag name (i.e. `ion-button`)
31
- * @prop componentProps - An array of properties on the
32
- * component. These usually match up with the @Prop definitions
33
- * in each component's TSX file.
34
- * @prop customElement - An option custom element instance to pass
35
- * to customElements.define. Only set if `includeImportCustomElements: true` in your config.
36
- * @prop modelProp - The prop that v-model binds to (i.e. value)
37
- * @prop modelUpdateEvent - The event that is fired from your Web Component when the value changes (i.e. ionChange)
38
- */
39
- export const defineContainer = (name, defineCustomElement, componentProps = [], modelProp, modelUpdateEvent) => {
40
- /**
41
- * Create a Vue component wrapper around a Web Component.
42
- * Note: The `props` here are not all properties on a component.
43
- * They refer to whatever properties are set on an instance of a component.
44
- */
45
- if (defineCustomElement !== undefined) {
46
- defineCustomElement();
47
- }
48
- const Container = defineComponent((props, { attrs, slots, emit }) => {
49
- let modelPropValue = props[modelProp];
50
- const containerRef = ref();
51
- const classes = new Set(getComponentClasses(attrs.class));
52
- /**
53
- * This directive is responsible for updating any reactive
54
- * reference associated with v-model on the component.
55
- * This code must be run inside of the "created" callback.
56
- * Since the following listener callbacks as well as any potential
57
- * event callback defined in the developer's app are set on
58
- * the same element, we need to make sure the following callbacks
59
- * are set first so they fire first. If the developer's callback fires first
60
- * then the reactive reference will not have been updated yet.
61
- */
62
- const vModelDirective = {
63
- created: (el) => {
64
- const eventsNames = Array.isArray(modelUpdateEvent) ? modelUpdateEvent : [modelUpdateEvent];
65
- eventsNames.forEach((eventName) => {
66
- el.addEventListener(eventName.toLowerCase(), (e) => {
67
- /**
68
- * Only update the v-model binding if the event's target is the element we are
69
- * listening on. For example, Component A could emit ionChange, but it could also
70
- * have a descendant Component B that also emits ionChange. We only want to update
71
- * the v-model for Component A when ionChange originates from that element and not
72
- * when ionChange bubbles up from Component B.
73
- */
74
- if (e.target.tagName === el.tagName) {
75
- modelPropValue = (e?.target)[modelProp];
76
- emit(UPDATE_VALUE_EVENT, modelPropValue);
77
- }
78
- });
79
- });
80
- },
81
- };
82
- const currentInstance = getCurrentInstance();
83
- const hasRouter = currentInstance?.appContext?.provides[NAV_MANAGER];
84
- const navManager = hasRouter ? inject(NAV_MANAGER) : undefined;
85
- const handleRouterLink = (ev) => {
86
- const { routerLink } = props;
87
- if (routerLink === EMPTY_PROP)
88
- return;
89
- if (navManager !== undefined) {
90
- /**
91
- * This prevents the browser from
92
- * performing a page reload when pressing
93
- * an Ionic component with routerLink.
94
- * The page reload interferes with routing
95
- * and causes ion-back-button to disappear
96
- * since the local history is wiped on reload.
97
- */
98
- ev.preventDefault();
99
- let navigationPayload = { event: ev };
100
- for (const key in props) {
101
- const value = props[key];
102
- if (props.hasOwnProperty(key) && key.startsWith(ROUTER_PROP_PREFIX) && value !== EMPTY_PROP) {
103
- navigationPayload[key] = value;
104
- }
105
- }
106
- navManager.navigate(navigationPayload);
107
- }
108
- else {
109
- console.warn('Tried to navigate, but no router was found. Make sure you have mounted Vue Router.');
110
- }
111
- };
112
- return () => {
113
- modelPropValue = props[modelProp];
114
- getComponentClasses(attrs.class).forEach((value) => {
115
- classes.add(value);
116
- });
117
- const oldClick = props.onClick;
118
- const handleClick = (ev) => {
119
- if (oldClick !== undefined) {
120
- oldClick(ev);
121
- }
122
- if (!ev.defaultPrevented) {
123
- handleRouterLink(ev);
124
- }
125
- };
126
- let propsToAdd = {
127
- ref: containerRef,
128
- class: getElementClasses(containerRef, classes),
129
- onClick: handleClick,
130
- };
131
- /**
132
- * We can use Object.entries here
133
- * to avoid the hasOwnProperty check,
134
- * but that would require 2 iterations
135
- * where as this only requires 1.
136
- */
137
- for (const key in props) {
138
- const value = props[key];
139
- if ((props.hasOwnProperty(key) && value !== EMPTY_PROP) || key.startsWith(ARIA_PROP_PREFIX)) {
140
- propsToAdd[key] = value;
141
- }
142
- }
143
- if (modelProp) {
144
- /**
145
- * If form value property was set using v-model
146
- * then we should use that value.
147
- * Otherwise, check to see if form value property
148
- * was set as a static value (i.e. no v-model).
149
- */
150
- if (props[MODEL_VALUE] !== EMPTY_PROP) {
151
- propsToAdd = {
152
- ...propsToAdd,
153
- [modelProp]: props[MODEL_VALUE],
154
- };
155
- }
156
- else if (modelPropValue !== EMPTY_PROP) {
157
- propsToAdd = {
158
- ...propsToAdd,
159
- [modelProp]: modelPropValue,
160
- };
161
- }
162
- }
163
- // If router link is defined, add href to props
164
- // in order to properly render an anchor tag inside
165
- // of components that should become activatable and
166
- // focusable with router link.
167
- if (props[ROUTER_LINK_VALUE] !== EMPTY_PROP) {
168
- propsToAdd = {
169
- ...propsToAdd,
170
- href: props[ROUTER_LINK_VALUE],
171
- };
172
- }
173
- /**
174
- * vModelDirective is only needed on components that support v-model.
175
- * As a result, we conditionally call withDirectives with v-model components.
176
- */
177
- const node = h(name, propsToAdd, slots.default && slots.default());
178
- return modelProp === undefined ? node : withDirectives(node, [[vModelDirective]]);
179
- };
180
- });
181
- if (typeof Container !== 'function') {
182
- Container.name = name;
183
- Container.props = {
184
- [ROUTER_LINK_VALUE]: DEFAULT_EMPTY_PROP,
185
- };
186
- componentProps.forEach((componentProp) => {
187
- Container.props[componentProp] = DEFAULT_EMPTY_PROP;
188
- });
189
- if (modelProp) {
190
- Container.props[MODEL_VALUE] = DEFAULT_EMPTY_PROP;
191
- Container.emits = [UPDATE_VALUE_EVENT];
192
- }
193
- }
194
- return Container;
195
- };