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

package/README.md

@@ -26,9 +26,15 @@ yarn add @nova-design-system/nova-webcomponents @nova-design-system/nova-base @n
 ```
 
 > In some case, you might experience SSL certificate issues when working on Developers' VM. As documented in the [Developers' setup guide](https://wiki.eliagroup.eu/spaces/EAing/pages/89296007/2.3.3.10+Developer+Setup#id-2.3.3.10DeveloperSetup-NPMconfig), you need to turn off the SSL certificate verification:
->
+
+```bash
+npm config set strict-ssl false
+```
+
+> **Note for Yarn Users**
+> Yarn **does not automatically** install peer dependencies. You must install the following peer dependency manually:
 > ```bash
-> npm config set strict-ssl false
+> yarn add @stencil/vue-output-target
 > ```
 
 ---

package/dist/components/NvDatatable.d.ts

@@ -18,6 +18,16 @@ export declare function createNvDatatable<T>(): import("vue").DefineComponent<im
         required: true;
         default: () => any[];
     };
+    /**
+     * Data mode - determines how sorting and pagination behave.
+     * - 'client': All data is loaded, sorting/pagination handled in browser
+     * - 'server': Data is fetched from server, sorting/pagination handled externally
+     * @default 'client'
+     */
+    mode: {
+        type: PropType<"server" | "client">;
+        default: string;
+    };
     pagination: {
         type: PropType<NvDatatablePaginationConfig>;
         default: any;
@@ -47,6 +57,16 @@ export declare function createNvDatatable<T>(): import("vue").DefineComponent<im
         required: true;
         default: () => any[];
     };
+    /**
+     * Data mode - determines how sorting and pagination behave.
+     * - 'client': All data is loaded, sorting/pagination handled in browser
+     * - 'server': Data is fetched from server, sorting/pagination handled externally
+     * @default 'client'
+     */
+    mode: {
+        type: PropType<"server" | "client">;
+        default: string;
+    };
     pagination: {
         type: PropType<NvDatatablePaginationConfig>;
         default: any;
@@ -64,6 +84,7 @@ export declare function createNvDatatable<T>(): import("vue").DefineComponent<im
         default: boolean;
     };
 }>> & Readonly<{}>, {
+    mode: "server" | "client";
     columns: NvDatatableColumn<T, keyof T, T[keyof T]>[];
     rows: T[];
     pagination: NvDatatablePaginationConfig;
@@ -162,6 +183,8 @@ export interface NvDatatableColumn<Row, K extends keyof Row = keyof Row, F = Row
     valueFormatter?: (params: NvTableValueFormatterParams<Row, Row[K], K>) => F;
     /** Custom cell renderer */
     renderCell?: (params: NvTableRenderCellParams<Row, F, K>) => VNode | string | number;
+    /** Custom header renderer */
+    renderHeader?: (params: NvTableRenderHeaderParams<K>) => VNode | string | number;
     /** Enable/disable sorting for this column */
     sortable?: boolean;
     /** Custom sorting function or built-in function name */
@@ -173,6 +196,15 @@ export interface NvDatatableColumn<Row, K extends keyof Row = keyof Row, F = Row
     /** Where to place undefined values in sort */
     sortUndefined?: 'first' | 'last' | false | -1 | 1;
 }
+/**
+ * Parameters for custom header rendering function.
+ */
+export interface NvTableRenderHeaderParams<Field> {
+    /** Display name for the column header */
+    headerName: string;
+    /** Field name */
+    field: Field;
+}
 /**
  * Parameters for custom cell rendering function.
  */
@@ -199,11 +231,16 @@ export interface NvTableValueFormatterParams<Row, Value, Field> {
 }
 /**
  * Pagination configuration for NvDatatable.
- * Supports three modes: client-side, server-side with buttons, and infinite scroll.
+ * The pagination behavior (client vs server) is determined by the top-level `mode` prop.
+ * Use `infinite: true` for infinite scroll (requires top-level `mode="server"`).
  */
 export interface NvDatatablePaginationConfig {
-    /** Pagination mode */
-    mode: 'client' | 'server' | 'infinite';
+    /**
+     * Enable infinite scroll pagination.
+     * When true, data loads continuously as user scrolls.
+     * Requires top-level `mode="server"` on the datatable.
+     */
+    infinite?: boolean;
     /** Initial page size (default: 10) */
     initialPageSize?: number;
     /** Available page size options (default: [10, 20, 50, 100]) */
@@ -263,11 +300,9 @@ export interface NvDatatableRenderPaginationAPI {
 }
 /**
  * Sorting configuration for NvDatatable.
- * Supports both client-side and server-side sorting.
+ * The sorting behavior (client vs server) is determined by the top-level `mode` prop.
  */
 export interface NvDatatableSortingConfig {
-    /** Sorting mode */
-    mode: 'client' | 'server';
     /** Enable multi-column sorting with Shift+Click */
     enableMultiSort?: boolean;
     /** Allow cycling through to "no sort" state */

package/dist/components/NvDatatable.js

@@ -23,6 +23,16 @@ export function createNvDatatable() {
                 required: true,
                 default: () => [],
             },
+            /**
+             * Data mode - determines how sorting and pagination behave.
+             * - 'client': All data is loaded, sorting/pagination handled in browser
+             * - 'server': Data is fetched from server, sorting/pagination handled externally
+             * @default 'client'
+             */
+            mode: {
+                type: String,
+                default: 'client',
+            },
             pagination: {
                 type: Object,
                 default: undefined,
@@ -53,6 +63,7 @@ export function createNvDatatable() {
             const tableColumns = computed(() => props.columns
                 .filter((col) => !col.hidden)
                 .map((col) => {
+                const headerName = col.headerName || String(col.field);
                 const columnDef = {
                     accessorKey: col.field,
                     accessorFn: col.valueFormatter
@@ -65,7 +76,12 @@ export function createNvDatatable() {
                             });
                         }
                         : undefined,
-                    header: col.headerName || String(col.field),
+                    header: col.renderHeader
+                        ? () => col.renderHeader({
+                            headerName,
+                            field: col.field,
+                        })
+                        : headerName,
                     size: col.width,
                     enableResizing: col.resizable ?? true,
                     // Sorting configuration
@@ -114,6 +130,8 @@ export function createNvDatatable() {
             }));
             // Determine base table configuration with sorting
             const getBaseTableConfig = () => {
+                // Sorting mode is derived from top-level mode prop
+                const isServerMode = props.mode === 'server';
                 const baseConfig = {
                     get data() {
                         return props.rows;
@@ -126,13 +144,13 @@ export function createNvDatatable() {
                     ...(props.sorting && {
                         get state() {
                             return {
-                                sorting: props.sorting.mode === 'server' && props.sorting.sortState
+                                sorting: isServerMode && props.sorting.sortState
                                     ? props.sorting.sortState
                                     : sortingState.value,
                             };
                         },
                         onSortingChange: (updaterOrValue) => {
-                            const currentSort = props.sorting.mode === 'server' && props.sorting.sortState
+                            const currentSort = isServerMode && props.sorting.sortState
                                 ? props.sorting.sortState
                                 : sortingState.value;
                             const newSort = typeof updaterOrValue === 'function'
@@ -141,12 +159,11 @@ export function createNvDatatable() {
                             // Always update internal state for reactivity
                             sortingState.value = newSort;
                             // For server-side sorting, also call the callback
-                            if (props.sorting?.mode === 'server' &&
-                                props.sorting.onSortingChange) {
+                            if (isServerMode && props.sorting?.onSortingChange) {
                                 props.sorting.onSortingChange(newSort);
                             }
                         },
-                        manualSorting: props.sorting.mode === 'server',
+                        manualSorting: isServerMode,
                         enableSorting: true,
                         enableMultiSort: props.sorting.enableMultiSort ?? false,
                         enableSortingRemoval: props.sorting.enableSortingRemoval ?? true,
@@ -156,19 +173,28 @@ export function createNvDatatable() {
                         isMultiSortEvent: props.sorting.enableMultiSort
                             ? () => true
                             : undefined,
-                        getSortedRowModel: props.sorting.mode === 'client' ? getSortedRowModel() : undefined,
+                        getSortedRowModel: !isServerMode ? getSortedRowModel() : undefined,
                     }),
                 };
                 return baseConfig;
             };
+            // Validation: warn if infinite scroll is used without server mode
+            watchEffect(() => {
+                if (props.pagination?.infinite && props.mode !== 'server') {
+                    console.warn('[NvDatatable] pagination.infinite requires mode="server". ' +
+                        'Set mode="server" on the datatable component.');
+                }
+            });
             // Create reactive table instance based on pagination mode
             const table = computed(() => {
                 const baseConfig = getBaseTableConfig();
-                if (!props.pagination || props.pagination.mode === 'infinite') {
+                const isServerMode = props.mode === 'server';
+                const isInfiniteScroll = props.pagination?.infinite === true;
+                if (!props.pagination || isInfiniteScroll) {
                     // No pagination or infinite scroll - simple config
                     return useVueTable(baseConfig);
                 }
-                else if (props.pagination.mode === 'client') {
+                else if (!isServerMode) {
                     // Client-side pagination - table manages its own state
                     return useVueTable({
                         ...baseConfig,
@@ -187,7 +213,7 @@ export function createNvDatatable() {
                         ...baseConfig,
                         manualPagination: true,
                         get pageCount() {
-                            if (!props.pagination || props.pagination.mode !== 'server') {
+                            if (!props.pagination) {
                                 return -1;
                             }
                             const pageSize = paginationState.value.pageSize;
@@ -221,8 +247,11 @@ export function createNvDatatable() {
             });
             // Handle pagination changes for server mode
             watch(paginationState, (newState) => {
-                if (props.pagination?.mode === 'server' &&
-                    props.pagination.onPaginationChange) {
+                const isServerMode = props.mode === 'server';
+                const isInfiniteScroll = props.pagination?.infinite === true;
+                if (isServerMode &&
+                    !isInfiniteScroll &&
+                    props.pagination?.onPaginationChange) {
                     props.pagination.onPaginationChange({
                         pageIndex: newState.pageIndex,
                         pageSize: newState.pageSize,
@@ -238,14 +267,15 @@ export function createNvDatatable() {
                     observer = null;
                 }
                 // Only set up observer for infinite scroll mode
-                if (props.pagination?.mode !== 'infinite' || !lastRowRef.value) {
+                const isInfiniteScroll = props.pagination?.infinite === true;
+                if (!isInfiniteScroll || !lastRowRef.value) {
                     return;
                 }
                 const threshold = props.pagination.loadMoreThreshold || 500;
                 observer = new IntersectionObserver((entries) => {
                     const entry = entries[0];
                     if (entry.isIntersecting &&
-                        props.pagination?.mode === 'infinite' &&
+                        props.pagination?.infinite &&
                         props.pagination.hasMore &&
                         !props.pagination.isLoading &&
                         props.pagination.onLoadMore) {
@@ -274,9 +304,11 @@ export function createNvDatatable() {
                 if (!props.pagination) {
                     return null;
                 }
+                const isServerMode = props.mode === 'server';
+                const isInfiniteScroll = props.pagination.infinite === true;
                 const tablePaginationState = table.value.getState().pagination;
                 const pageCount = table.value.getPageCount();
-                const rowCount = props.pagination.mode === 'server'
+                const rowCount = isServerMode && !isInfiniteScroll
                     ? props.pagination.totalRowCount || props.rows.length
                     : props.rows.length;
                 return {
@@ -292,17 +324,15 @@ export function createNvDatatable() {
                     setPageSize: (size) => table.value.setPageSize(size),
                     canPreviousPage: table.value.getCanPreviousPage(),
                     canNextPage: table.value.getCanNextPage(),
-                    isLoading: props.pagination.mode === 'infinite'
+                    isLoading: isInfiniteScroll
                         ? props.pagination.isLoading
                         : undefined,
-                    hasMore: props.pagination.mode === 'infinite'
-                        ? props.pagination.hasMore
-                        : undefined,
+                    hasMore: isInfiniteScroll ? props.pagination.hasMore : undefined,
                 };
             });
             return () => {
                 const tableRows = table.value.getRowModel().rows;
-                const isInfiniteScroll = props.pagination?.mode === 'infinite';
+                const isInfiniteScroll = props.pagination?.infinite === true;
                 const tableElement = h(NvTable, attrs, {
                     default: () => [
                         h('table', {}, [

package/dist/generated/components.d.ts

@@ -16,6 +16,9 @@ export declare const NvDatagridcolumn: StencilVueComponent<JSX.NvDatagridcolumn>
 export declare const NvDialog: StencilVueComponent<JSX.NvDialog, JSX.NvDialog["open"]>;
 export declare const NvDialogfooter: StencilVueComponent<JSX.NvDialogfooter>;
 export declare const NvDialogheader: StencilVueComponent<JSX.NvDialogheader>;
+export declare const NvDrawer: StencilVueComponent<JSX.NvDrawer, JSX.NvDrawer["open"]>;
+export declare const NvDrawerfooter: StencilVueComponent<JSX.NvDrawerfooter>;
+export declare const NvDrawerheader: StencilVueComponent<JSX.NvDrawerheader>;
 export declare const NvFieldcheckbox: StencilVueComponent<JSX.NvFieldcheckbox, JSX.NvFieldcheckbox["checked"]>;
 export declare const NvFielddate: StencilVueComponent<JSX.NvFielddate, JSX.NvFielddate["value"]>;
 export declare const NvFielddaterange: StencilVueComponent<JSX.NvFielddaterange, JSX.NvFielddaterange["value"]>;

package/dist/generated/components.js

@@ -188,6 +188,40 @@ export const NvDialogheader = /*@__PURE__*/ defineContainer('nv-dialogheader', u
     'heading',
     'subheading'
 ]);
+export const NvDrawer = /*@__PURE__*/ defineContainer('nv-drawer', undefined, [
+    'open',
+    'undismissable',
+    'clickOutside',
+    'controlled',
+    'side',
+    'size',
+    'width',
+    'autofocus',
+    'swipeToOpen',
+    'openChanged'
+], [
+    'openChanged'
+], 'open', 'openChanged', undefined);
+export const NvDrawerfooter = /*@__PURE__*/ defineContainer('nv-drawerfooter', undefined, [
+    'disabled',
+    'undismissable',
+    'leadingIcon',
+    'trailingIcon',
+    'danger',
+    'cancelLabel',
+    'primaryLabel',
+    'primaryButtonType',
+    'form',
+    'drawerCanceled',
+    'drawerPrimaryClicked'
+], [
+    'drawerCanceled',
+    'drawerPrimaryClicked'
+]);
+export const NvDrawerheader = /*@__PURE__*/ defineContainer('nv-drawerheader', undefined, [
+    'heading',
+    'subheading'
+]);
 export const NvFieldcheckbox = /*@__PURE__*/ defineContainer('nv-fieldcheckbox', undefined, [
     'message',
     'validation',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nova-design-system/nova-vue",
-  "version": "3.23.0",
+  "version": "3.24.0",
   "description": "Nova is a design system created by Elia Group to empower creators to efficiently build solutions that people love to use.",
   "author": "Elia Group",
   "homepage": "https://nova.eliagroup.io",
@@ -47,5 +47,8 @@
     "vue": "3.5.25",
     "nova-utils": "*",
     "nova-storybook-utils": "*"
+  },
+  "peerDependencies": {
+    "@stencil/vue-output-target": "0.11.8"
   }
 }