@nova-design-system/nova-vue 3.15.0 → 3.16.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.
|
@@ -0,0 +1,116 @@
|
|
|
1
|
+
import { type VNode, type PropType } from 'vue';
|
|
2
|
+
/**
|
|
3
|
+
* Creates a typed NvDatatable component for a specific row type. This is the
|
|
4
|
+
* standard approach for generic components in Vue.
|
|
5
|
+
*
|
|
6
|
+
* @returns {component} A Vue component definition typed for the specified row
|
|
7
|
+
* type.
|
|
8
|
+
*/
|
|
9
|
+
export declare function createNvDatatable<T extends NvDatatableRow>(): import("vue").DefineComponent<import("vue").ExtractPropTypes<{
|
|
10
|
+
columns: {
|
|
11
|
+
type: PropType<NvDatatableColumn<T>[]>;
|
|
12
|
+
required: true;
|
|
13
|
+
default: () => any[];
|
|
14
|
+
};
|
|
15
|
+
rows: {
|
|
16
|
+
type: PropType<T[]>;
|
|
17
|
+
required: true;
|
|
18
|
+
default: () => any[];
|
|
19
|
+
};
|
|
20
|
+
}>, () => VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
|
21
|
+
[key: string]: any;
|
|
22
|
+
}>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
|
|
23
|
+
columns: {
|
|
24
|
+
type: PropType<NvDatatableColumn<T>[]>;
|
|
25
|
+
required: true;
|
|
26
|
+
default: () => any[];
|
|
27
|
+
};
|
|
28
|
+
rows: {
|
|
29
|
+
type: PropType<T[]>;
|
|
30
|
+
required: true;
|
|
31
|
+
default: () => any[];
|
|
32
|
+
};
|
|
33
|
+
}>> & Readonly<{}>, {
|
|
34
|
+
columns: NvDatatableColumn<T>[];
|
|
35
|
+
rows: T[];
|
|
36
|
+
}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
|
|
37
|
+
/**
|
|
38
|
+
* Default NvDatatable component with basic row type.
|
|
39
|
+
* For typed usage, use createNvDatatable<YourRowType>().
|
|
40
|
+
*/
|
|
41
|
+
export declare const NvDatatable: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
|
|
42
|
+
columns: {
|
|
43
|
+
type: PropType<NvDatatableColumn<NvDatatableRow>[]>;
|
|
44
|
+
required: true;
|
|
45
|
+
default: () => any[];
|
|
46
|
+
};
|
|
47
|
+
rows: {
|
|
48
|
+
type: PropType<NvDatatableRow[]>;
|
|
49
|
+
required: true;
|
|
50
|
+
default: () => any[];
|
|
51
|
+
};
|
|
52
|
+
}>, () => VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
|
53
|
+
[key: string]: any;
|
|
54
|
+
}>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
|
|
55
|
+
columns: {
|
|
56
|
+
type: PropType<NvDatatableColumn<NvDatatableRow>[]>;
|
|
57
|
+
required: true;
|
|
58
|
+
default: () => any[];
|
|
59
|
+
};
|
|
60
|
+
rows: {
|
|
61
|
+
type: PropType<NvDatatableRow[]>;
|
|
62
|
+
required: true;
|
|
63
|
+
default: () => any[];
|
|
64
|
+
};
|
|
65
|
+
}>> & Readonly<{}>, {
|
|
66
|
+
columns: NvDatatableColumn<NvDatatableRow>[];
|
|
67
|
+
rows: NvDatatableRow[];
|
|
68
|
+
}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
|
|
69
|
+
/********************************* TYPES **************************************/
|
|
70
|
+
/**
|
|
71
|
+
* Type definition for a datatable row.
|
|
72
|
+
*/
|
|
73
|
+
export type NvDatatableRow = Record<string, string | number | boolean | null | undefined | typeof Date>;
|
|
74
|
+
/**
|
|
75
|
+
* Parameters for custom cell rendering function.
|
|
76
|
+
*/
|
|
77
|
+
export interface NvTableRenderCellParams<T extends NvDatatableRow, V> {
|
|
78
|
+
/** Cell value */
|
|
79
|
+
value: V;
|
|
80
|
+
/** Row data */
|
|
81
|
+
row: T;
|
|
82
|
+
/** Field name */
|
|
83
|
+
field: keyof T;
|
|
84
|
+
/** Row index */
|
|
85
|
+
rowIndex: number;
|
|
86
|
+
}
|
|
87
|
+
/**
|
|
88
|
+
* Column definition for NvDatatable.
|
|
89
|
+
*/
|
|
90
|
+
export interface NvDatatableColumn<T extends NvDatatableRow> {
|
|
91
|
+
/** Field name from row data */
|
|
92
|
+
field: keyof T;
|
|
93
|
+
/** Display name for column header */
|
|
94
|
+
headerName?: string;
|
|
95
|
+
/** Column width in pixels */
|
|
96
|
+
width?: number;
|
|
97
|
+
/** Whether column is resizable */
|
|
98
|
+
resizable?: boolean;
|
|
99
|
+
/** Whether column is hidden */
|
|
100
|
+
hidden?: boolean;
|
|
101
|
+
/** Custom cell renderer */
|
|
102
|
+
renderCell?: (params: NvTableRenderCellParams<T, T[keyof T]>) => VNode | string | number;
|
|
103
|
+
}
|
|
104
|
+
/**
|
|
105
|
+
* Props for NvDatatable component.
|
|
106
|
+
*/
|
|
107
|
+
export interface NvDatatableProps<T extends NvDatatableRow> {
|
|
108
|
+
/** Column definitions */
|
|
109
|
+
columns: Array<NvDatatableColumn<T>>;
|
|
110
|
+
/** Row data */
|
|
111
|
+
rows: Array<T>;
|
|
112
|
+
/** CSS class */
|
|
113
|
+
class?: string;
|
|
114
|
+
/** Inline styles */
|
|
115
|
+
style?: string | Record<string, string>;
|
|
116
|
+
}
|
|
@@ -0,0 +1,110 @@
|
|
|
1
|
+
/* eslint-disable jsdoc/require-jsdoc */
|
|
2
|
+
import { defineComponent, computed, h } from 'vue';
|
|
3
|
+
import { useVueTable, getCoreRowModel, } from '@tanstack/vue-table';
|
|
4
|
+
import { NvTable } from '../generated/components';
|
|
5
|
+
/**
|
|
6
|
+
* Creates a typed NvDatatable component for a specific row type. This is the
|
|
7
|
+
* standard approach for generic components in Vue.
|
|
8
|
+
*
|
|
9
|
+
* @returns {component} A Vue component definition typed for the specified row
|
|
10
|
+
* type.
|
|
11
|
+
*/
|
|
12
|
+
export function createNvDatatable() {
|
|
13
|
+
return defineComponent({
|
|
14
|
+
name: 'NvDatatable',
|
|
15
|
+
props: {
|
|
16
|
+
columns: {
|
|
17
|
+
type: Array,
|
|
18
|
+
required: true,
|
|
19
|
+
default: () => [],
|
|
20
|
+
},
|
|
21
|
+
rows: {
|
|
22
|
+
type: Array,
|
|
23
|
+
required: true,
|
|
24
|
+
default: () => [],
|
|
25
|
+
},
|
|
26
|
+
},
|
|
27
|
+
setup(props, { attrs }) {
|
|
28
|
+
const tableColumns = computed(() => props.columns
|
|
29
|
+
.filter((col) => !col.hidden)
|
|
30
|
+
.map((col) => ({
|
|
31
|
+
accessorKey: col.field,
|
|
32
|
+
header: col.headerName || String(col.field),
|
|
33
|
+
size: col.width,
|
|
34
|
+
enableResizing: col.resizable ?? true,
|
|
35
|
+
cell: (context) => {
|
|
36
|
+
const value = context.getValue();
|
|
37
|
+
const row = context.row.original;
|
|
38
|
+
const rowIndex = context.row.index;
|
|
39
|
+
// Use custom renderCell if provided
|
|
40
|
+
if (col.renderCell) {
|
|
41
|
+
return col.renderCell({
|
|
42
|
+
value,
|
|
43
|
+
row,
|
|
44
|
+
field: col.field,
|
|
45
|
+
rowIndex,
|
|
46
|
+
});
|
|
47
|
+
}
|
|
48
|
+
// Default rendering
|
|
49
|
+
return value;
|
|
50
|
+
},
|
|
51
|
+
})));
|
|
52
|
+
const table = useVueTable({
|
|
53
|
+
data: computed(() => props.rows),
|
|
54
|
+
columns: tableColumns.value,
|
|
55
|
+
getCoreRowModel: getCoreRowModel(),
|
|
56
|
+
});
|
|
57
|
+
return () => {
|
|
58
|
+
return h(NvTable, attrs, {
|
|
59
|
+
default: () => [
|
|
60
|
+
h('table', {}, [
|
|
61
|
+
h('thead', {}, [
|
|
62
|
+
...table.getHeaderGroups().map((headerGroup) => h('tr', { key: headerGroup.id }, [
|
|
63
|
+
...headerGroup.headers.map((header) => h('th', {
|
|
64
|
+
key: header.id,
|
|
65
|
+
'data-testid': `datatable-header-${header.id}`,
|
|
66
|
+
style: {
|
|
67
|
+
width: header.column.columnDef.size
|
|
68
|
+
? `${header.column.columnDef.size}px`
|
|
69
|
+
: undefined,
|
|
70
|
+
},
|
|
71
|
+
'data-no-resize': header.column.columnDef
|
|
72
|
+
.enableResizing
|
|
73
|
+
? null
|
|
74
|
+
: true,
|
|
75
|
+
}, header.isPlaceholder
|
|
76
|
+
? null
|
|
77
|
+
: typeof header.column.columnDef.header === 'function'
|
|
78
|
+
? header.column.columnDef.header(header.getContext())
|
|
79
|
+
: header.column.columnDef.header)),
|
|
80
|
+
])),
|
|
81
|
+
]),
|
|
82
|
+
h('tbody', {}, [
|
|
83
|
+
...table.getRowModel().rows.map((row) => h('tr', {
|
|
84
|
+
key: row.id,
|
|
85
|
+
'data-testid': `datatable-row-${row.id}`,
|
|
86
|
+
}, [
|
|
87
|
+
...row.getVisibleCells().map((cell) => h('td', {
|
|
88
|
+
key: cell.id,
|
|
89
|
+
'data-testid': `datatable-cell-${cell.id}`,
|
|
90
|
+
style: {
|
|
91
|
+
padding: '8px',
|
|
92
|
+
borderBottom: '1px solid #eee',
|
|
93
|
+
},
|
|
94
|
+
}, typeof cell.column.columnDef.cell === 'function'
|
|
95
|
+
? cell.column.columnDef.cell(cell.getContext())
|
|
96
|
+
: cell.getValue())),
|
|
97
|
+
])),
|
|
98
|
+
]),
|
|
99
|
+
]),
|
|
100
|
+
],
|
|
101
|
+
});
|
|
102
|
+
};
|
|
103
|
+
},
|
|
104
|
+
});
|
|
105
|
+
}
|
|
106
|
+
/**
|
|
107
|
+
* Default NvDatatable component with basic row type.
|
|
108
|
+
* For typed usage, use createNvDatatable<YourRowType>().
|
|
109
|
+
*/
|
|
110
|
+
export const NvDatatable = createNvDatatable();
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
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<
|
|
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
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
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
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>;
|
|
@@ -61,7 +61,6 @@ export declare const NvPopover: import("vue").DefineSetupFnComponent<JSX.NvPopov
|
|
|
61
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
62
|
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>;
|
|
63
63
|
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>;
|
|
64
|
-
export declare const NvTablecolumn: import("vue").DefineSetupFnComponent<JSX.NvTablecolumn & import("./vue-component-lib/utils").InputProps<string | number | boolean>, {}, {}, JSX.NvTablecolumn & import("./vue-component-lib/utils").InputProps<string | number | boolean> & {}, import("vue").PublicProps>;
|
|
65
64
|
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>;
|
|
66
65
|
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>;
|
|
67
66
|
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>;
|
|
@@ -6,8 +6,8 @@ export const NvAccordion = /*@__PURE__*/ defineContainer('nv-accordion', undefin
|
|
|
6
6
|
'data',
|
|
7
7
|
'mode',
|
|
8
8
|
'openIndexes',
|
|
9
|
-
'
|
|
10
|
-
]);
|
|
9
|
+
'openIndexesChanged'
|
|
10
|
+
], 'openIndexes', 'open-indexes-changed');
|
|
11
11
|
export const NvAccordionItem = /*@__PURE__*/ defineContainer('nv-accordion-item', undefined, [
|
|
12
12
|
'itemTitle',
|
|
13
13
|
'subtitle',
|
|
@@ -572,20 +572,7 @@ export const NvStack = /*@__PURE__*/ defineContainer('nv-stack', undefined, [
|
|
|
572
572
|
'full',
|
|
573
573
|
'vertical'
|
|
574
574
|
]);
|
|
575
|
-
export const NvTable = /*@__PURE__*/ defineContainer('nv-table', undefined
|
|
576
|
-
'data',
|
|
577
|
-
'columnsConfig',
|
|
578
|
-
'dataJson',
|
|
579
|
-
'columnsConfigJson',
|
|
580
|
-
'fallbackValue',
|
|
581
|
-
'noDataMessage',
|
|
582
|
-
'noColumnsNoDataMessage',
|
|
583
|
-
'action'
|
|
584
|
-
]);
|
|
585
|
-
export const NvTablecolumn = /*@__PURE__*/ defineContainer('nv-tablecolumn', undefined, [
|
|
586
|
-
'name',
|
|
587
|
-
'header'
|
|
588
|
-
]);
|
|
575
|
+
export const NvTable = /*@__PURE__*/ defineContainer('nv-table', undefined);
|
|
589
576
|
export const NvToggle = /*@__PURE__*/ defineContainer('nv-toggle', undefined, [
|
|
590
577
|
'inputId',
|
|
591
578
|
'name',
|
package/dist/index.d.ts
CHANGED
package/dist/index.js
CHANGED
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@nova-design-system/nova-vue",
|
|
3
|
-
"version": "3.
|
|
3
|
+
"version": "3.16.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",
|
|
@@ -36,11 +36,12 @@
|
|
|
36
36
|
"tsc:watch": "tsc -p . --outDir ./dist --watch",
|
|
37
37
|
"storybook": "storybook dev -p 6008",
|
|
38
38
|
"storybook.build": "storybook build -o ../../storybook-static/vue",
|
|
39
|
-
"clean": "rimraf dist lib/generated",
|
|
39
|
+
"clean": "rimraf dist lib/generated lib/stories/generated",
|
|
40
40
|
"typecheck": "tsc --emitDeclarationOnly false --noEmit"
|
|
41
41
|
},
|
|
42
42
|
"dependencies": {
|
|
43
|
-
"@nova-design-system/nova-webcomponents": "*"
|
|
43
|
+
"@nova-design-system/nova-webcomponents": "*",
|
|
44
|
+
"@tanstack/vue-table": "8.21.3"
|
|
44
45
|
},
|
|
45
46
|
"devDependencies": {
|
|
46
47
|
"vue": "3.5.17",
|