@nova-design-system/nova-vue 3.23.0 → 3.25.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,20 @@ 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 config. When provided, pagination is enabled.
+     * In client mode, if you omit renderPagination and the #pagination slot, the default nv-paginationtable is used.
+     */
     pagination: {
         type: PropType<NvDatatablePaginationConfig>;
         default: any;
@@ -26,6 +40,10 @@ export declare function createNvDatatable<T>(): import("vue").DefineComponent<im
         type: PropType<NvDatatableSortingConfig>;
         default: any;
     };
+    /**
+     * Optional custom pagination UI. When omitted in client mode (with pagination set), the default nv-paginationtable is rendered.
+     * Pass a function that returns null to hide the UI while keeping pagination logic (e.g. infinite scroll).
+     */
     renderPagination: {
         type: PropType<(api: NvDatatableRenderPaginationAPI) => VNode>;
         default: any;
@@ -47,6 +65,20 @@ 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 config. When provided, pagination is enabled.
+     * In client mode, if you omit renderPagination and the #pagination slot, the default nv-paginationtable is used.
+     */
     pagination: {
         type: PropType<NvDatatablePaginationConfig>;
         default: any;
@@ -55,6 +87,10 @@ export declare function createNvDatatable<T>(): import("vue").DefineComponent<im
         type: PropType<NvDatatableSortingConfig>;
         default: any;
     };
+    /**
+     * Optional custom pagination UI. When omitted in client mode (with pagination set), the default nv-paginationtable is rendered.
+     * Pass a function that returns null to hide the UI while keeping pagination logic (e.g. infinite scroll).
+     */
     renderPagination: {
         type: PropType<(api: NvDatatableRenderPaginationAPI) => VNode>;
         default: any;
@@ -64,6 +100,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 +199,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 +212,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,15 +247,29 @@ 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]) */
     pageSizeOptions?: number[];
+    /** Custom labels for pagination component (i18n support) */
+    labels?: {
+        /** Label template for the page indicator. Supports placeholders: {pageIndex}, {pageCount} */
+        page?: string;
+        /** Label template for the total row count display. Supports placeholder: {rowCount} */
+        total?: string;
+        /** Label template for the page size dropdown options. Supports placeholder: {pageSize} */
+        pageSizeOption?: string;
+    };
     /** Total number of rows (for server-side pagination) */
     totalRowCount?: number;
     /** Total number of pages (for server-side pagination) */
@@ -263,11 +325,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

@@ -1,7 +1,7 @@
 /* eslint-disable jsdoc/require-jsdoc */
 import { defineComponent, computed, h, ref, watch, watchEffect, onUnmounted, } from 'vue';
 import { useVueTable, getCoreRowModel, getPaginationRowModel, getSortedRowModel, } from '@tanstack/vue-table';
-import { NvTable, NvTableheader } from '../generated/components';
+import { NvTable, NvTableheader, NvPaginationtable, } from '../generated/components';
 /**
  * Creates a typed NvDatatable component for a specific row type. This is the
  * standard approach for generic components in Vue.
@@ -23,6 +23,20 @@ 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 config. When provided, pagination is enabled.
+             * In client mode, if you omit renderPagination and the #pagination slot, the default nv-paginationtable is used.
+             */
             pagination: {
                 type: Object,
                 default: undefined,
@@ -31,6 +45,10 @@ export function createNvDatatable() {
                 type: Object,
                 default: undefined,
             },
+            /**
+             * Optional custom pagination UI. When omitted in client mode (with pagination set), the default nv-paginationtable is rendered.
+             * Pass a function that returns null to hide the UI while keeping pagination logic (e.g. infinite scroll).
+             */
             renderPagination: {
                 type: Function,
                 default: undefined,
@@ -53,6 +71,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 +84,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 +138,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 +152,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 +167,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 +181,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 +221,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 +255,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 +275,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 +312,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 +332,36 @@ 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,
                 };
             });
+            // Helper function for default pagination rendering with nv-paginationtable
+            const renderDefaultPagination = (api) => {
+                // Only pass label props if defined (let web component use its defaults otherwise)
+                const labelProps = {};
+                if (props.pagination?.labels?.page)
+                    labelProps.labelPage = props.pagination.labels.page;
+                if (props.pagination?.labels?.total)
+                    labelProps.labelTotal = props.pagination.labels.total;
+                if (props.pagination?.labels?.pageSizeOption)
+                    labelProps.labelPageSizeOption =
+                        props.pagination.labels.pageSizeOption;
+                return h(NvPaginationtable, {
+                    pageIndex: api.pageIndex,
+                    pageSize: api.pageSize,
+                    pageCount: api.pageCount,
+                    rowCount: api.rowCount,
+                    ...labelProps,
+                    onPageIndexChanged: (e) => api.setPageIndex(e.detail),
+                    onPageSizeChanged: (e) => api.setPageSize(e.detail),
+                });
+            };
             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', {}, [
@@ -370,7 +429,7 @@ export function createNvDatatable() {
                     ],
                 });
                 // Return table with optional pagination
-                // Priority: slots.pagination > props.renderPagination > no pagination
+                // Priority: slots.pagination > props.renderPagination > default pagination > no pagination
                 if (paginationAPI.value) {
                     if (slots.pagination) {
                         // Use scoped slot (preferred)
@@ -386,6 +445,15 @@ export function createNvDatatable() {
                             props.renderPagination(paginationAPI.value),
                         ]);
                     }
+                    else if (props.mode === 'client' &&
+                        props.pagination &&
+                        !props.pagination.infinite) {
+                        // Default pagination with nv-paginationtable (client mode only)
+                        return h('div', {}, [
+                            tableElement,
+                            renderDefaultPagination(paginationAPI.value),
+                        ]);
+                    }
                 }
                 return tableElement;
             };

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"]>;
@@ -39,6 +42,7 @@ export declare const NvMenuitem: StencilVueComponent<JSX.NvMenuitem>;
 export declare const NvNotification: StencilVueComponent<JSX.NvNotification, JSX.NvNotification["hidden"]>;
 export declare const NvNotificationBullet: StencilVueComponent<JSX.NvNotificationBullet>;
 export declare const NvNotificationcontainer: StencilVueComponent<JSX.NvNotificationcontainer>;
+export declare const NvPaginationtable: StencilVueComponent<JSX.NvPaginationtable, JSX.NvPaginationtable["pageIndex"]>;
 export declare const NvPopover: StencilVueComponent<JSX.NvPopover, JSX.NvPopover["open"]>;
 export declare const NvRow: StencilVueComponent<JSX.NvRow>;
 export declare const NvSidebar: StencilVueComponent<JSX.NvSidebar, JSX.NvSidebar["open"]>;

package/dist/generated/components.js

@@ -155,7 +155,6 @@ export const NvDatagridcolumn = /*@__PURE__*/ defineContainer('nv-datagridcolumn
     'group'
 ]);
 export const NvDialog = /*@__PURE__*/ defineContainer('nv-dialog', undefined, [
-    'triggerElement',
     'headerElement',
     'footerElement',
     'open',
@@ -188,6 +187,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',
@@ -653,6 +686,23 @@ export const NvNotificationBullet = /*@__PURE__*/ defineContainer('nv-notificati
 export const NvNotificationcontainer = /*@__PURE__*/ defineContainer('nv-notificationcontainer', undefined, [
     'position'
 ]);
+export const NvPaginationtable = /*@__PURE__*/ defineContainer('nv-paginationtable', undefined, [
+    'pageIndex',
+    'pageSize',
+    'pageCount',
+    'rowCount',
+    'hideControls',
+    'hidePrevNext',
+    'hideFirstLast',
+    'labelPage',
+    'labelTotal',
+    'labelPageSizeOption',
+    'pageIndexChanged',
+    'pageSizeChanged'
+], [
+    'pageIndexChanged',
+    'pageSizeChanged'
+], 'pageIndex', 'pageIndexChanged', undefined);
 export const NvPopover = /*@__PURE__*/ defineContainer('nv-popover', undefined, [
     'triggerElement',
     'open',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nova-design-system/nova-vue",
-  "version": "3.23.0",
+  "version": "3.25.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",
@@ -36,7 +36,7 @@
     "tsc:watch": "tsc -p . --outDir ./dist --watch",
     "storybook": "storybook dev -p 6008",
     "storybook.build": "storybook build -o ../../storybook-static/vue",
-    "clean": "rimraf dist lib/generated lib/stories/generated",
+    "clean": "rimraf dist lib/generated lib/stories/generated lib/stories/components/*-migration.mdx lib/stories/components/*-guide.mdx",
     "typecheck": "tsc --emitDeclarationOnly false --noEmit"
   },
   "dependencies": {
@@ -47,5 +47,8 @@
     "vue": "3.5.25",
     "nova-utils": "*",
     "nova-storybook-utils": "*"
+  },
+  "peerDependencies": {
+    "@stencil/vue-output-target": "0.11.8"
   }
 }