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

package/dist/components/NvDatatable.d.ts

@@ -28,6 +28,10 @@ export declare function createNvDatatable<T>(): import("vue").DefineComponent<im
         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;
@@ -36,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;
@@ -67,6 +75,10 @@ export declare function createNvDatatable<T>(): import("vue").DefineComponent<im
         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;
@@ -75,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;
@@ -245,6 +261,15 @@ export interface NvDatatablePaginationConfig {
     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) */

package/dist/components/NvDatatable.js

@@ -1,7 +1,6 @@
-/* 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.
@@ -33,6 +32,10 @@ export function createNvDatatable() {
                 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,
@@ -41,6 +44,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,
@@ -330,6 +337,27 @@ export function createNvDatatable() {
                     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?.infinite === true;
@@ -400,7 +428,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)
@@ -416,6 +444,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

@@ -42,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',
@@ -588,6 +587,7 @@ export const NvFieldtextarea = /*@__PURE__*/ defineContainer('nv-fieldtextarea',
     'rows',
     'resize',
     'autosize',
+    'maxAutoHeight',
     'autofocus',
     'fluid',
     'valueChanged'
@@ -687,6 +687,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/dist/plugin.js

@@ -6,6 +6,7 @@
  */
 import { defineCustomElements } from '@nova-design-system/nova-webcomponents/loader';
 import { NvNotificationService, } from './providers/NotificationService';
+import * as components from './generated/components';
 /**
  * This is the Vue plugin that is used to define the custom elements, event
  * handlers, and includes the notification service.
@@ -14,6 +15,11 @@ export const NovaComponents = {
     async install(app, options = {}) {
         // Define custom elements with event handling
         defineCustomElements();
+        // Register all Vue component wrappers globally so that
+        // props are passed as JS properties (not HTML attributes)
+        Object.entries(components).forEach(([name, component]) => {
+            app.component(name, component);
+        });
         // Install notification service
         NvNotificationService.install(app, options.notifications);
     },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nova-design-system/nova-vue",
-  "version": "3.24.0",
+  "version": "3.26.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 && shx rm -rf lib/stories/components/*-migration.mdx lib/stories/components/*-guide.mdx",
     "typecheck": "tsc --emitDeclarationOnly false --noEmit"
   },
   "dependencies": {