@nova-design-system/nova-vue 3.28.0 → 3.30.0

package/README.md

@@ -11,6 +11,10 @@
 
 ---
 
+## Requirements
+
+- **ES2022+ build target** — The Nova Vue plugin uses top-level `await` to ensure Stencil custom elements are registered before Vue renders. Your bundler must target `es2022` or higher. For Vite, set `build.target: 'es2022'` in your `vite.config.ts`.
+
 ## Installation
 
 To begin, install the necessary Nova packages using your package manager:

package/dist/components/NvDatatable.d.ts

@@ -336,6 +336,11 @@ export interface NvDatatableSortingConfig {
     maxMultiSortColCount?: number;
     /** Start with descending sort as first toggle state */
     sortDescFirst?: boolean;
+    /**
+     * Initial sort state (uncontrolled). Applied on first render only; the user can then
+     * freely change sorting via header clicks. Ignored when `sortState` is also provided.
+     */
+    initialSortState?: SortingState;
     /** Controlled sort state (for server-side sorting) */
     sortState?: SortingState;
     /** Callback when sorting changes (for server-side sorting) */

package/dist/components/NvDatatable.js

@@ -63,8 +63,9 @@ export function createNvDatatable() {
                 pageIndex: 0,
                 pageSize: props.pagination?.initialPageSize || 10,
             });
-            // Sorting state (controlled or uncontrolled)
-            const sortingState = ref(props.sorting?.sortState || []);
+            // Sorting state (controlled or uncontrolled). When sortState is provided the
+            // component is controlled; initialSortState only seeds the uncontrolled state.
+            const sortingState = ref(props.sorting?.sortState ?? props.sorting?.initialSortState ?? []);
             // Ref for observing last row (infinite scroll)
             const lastRowRef = ref(null);
             const tableColumns = computed(() => props.columns

package/dist/generated/components.d.ts

@@ -59,8 +59,10 @@ export declare const NvSidebarnavitem: StencilVueComponent<JSX.NvSidebarnavitem>
 export declare const NvSidebarnavsubitem: StencilVueComponent<JSX.NvSidebarnavsubitem>;
 export declare const NvSplit: StencilVueComponent<JSX.NvSplit, JSX.NvSplit["sizes"]>;
 export declare const NvStack: StencilVueComponent<JSX.NvStack>;
+export declare const NvStatusindicator: StencilVueComponent<JSX.NvStatusindicator>;
 export declare const NvTable: StencilVueComponent<JSX.NvTable>;
 export declare const NvTableheader: StencilVueComponent<JSX.NvTableheader>;
+export declare const NvTag: StencilVueComponent<JSX.NvTag>;
 export declare const NvTimetest: StencilVueComponent<JSX.NvTimetest, JSX.NvTimetest["value"]>;
 export declare const NvToggle: StencilVueComponent<JSX.NvToggle, JSX.NvToggle["checked"]>;
 export declare const NvTogglebutton: StencilVueComponent<JSX.NvTogglebutton>;

package/dist/generated/components.js

@@ -769,9 +769,15 @@ export const NvSidebar = /*@__PURE__*/ defineContainer('nv-sidebar', undefined,
     'activePath',
     'notificationIntention',
     'notificationEmphasis',
-    'openChanged'
+    'resizable',
+    'minWidth',
+    'maxWidth',
+    'width',
+    'openChanged',
+    'widthChanged'
 ], [
-    'openChanged'
+    'openChanged',
+    'widthChanged'
 ], 'open', 'openChanged', undefined);
 export const NvSidebarcontent = /*@__PURE__*/ defineContainer('nv-sidebarcontent', undefined);
 export const NvSidebardivider = /*@__PURE__*/ defineContainer('nv-sidebardivider', undefined);
@@ -811,6 +817,11 @@ export const NvStack = /*@__PURE__*/ defineContainer('nv-stack', undefined, [
     'full',
     'vertical'
 ]);
+export const NvStatusindicator = /*@__PURE__*/ defineContainer('nv-statusindicator', undefined, [
+    'status',
+    'emphasis',
+    'label'
+]);
 export const NvTable = /*@__PURE__*/ defineContainer('nv-table', undefined);
 export const NvTableheader = /*@__PURE__*/ defineContainer('nv-tableheader', undefined, [
     'sortable',
@@ -819,6 +830,18 @@ export const NvTableheader = /*@__PURE__*/ defineContainer('nv-tableheader', und
 ], [
     'sortDirectionChanged'
 ]);
+export const NvTag = /*@__PURE__*/ defineContainer('nv-tag', undefined, [
+    'color',
+    'label',
+    'dismissible',
+    'href',
+    'target',
+    'rel',
+    'disabled',
+    'dismissed'
+], [
+    'dismissed'
+]);
 export const NvTimetest = /*@__PURE__*/ defineContainer('nv-timetest', undefined, [
     'value',
     'history',

package/dist/index.d.ts

@@ -2,4 +2,5 @@ export * from './generated/components';
 export * from './plugin';
 export * from './providers';
 export * from '@nova-design-system/nova-webcomponents/constants';
+export type { IconName } from '@nova-design-system/nova-webcomponents';
 export * from './components/NvDatatable';

package/dist/plugin.js

@@ -7,14 +7,20 @@
 import { defineCustomElements } from '@nova-design-system/nova-webcomponents/loader';
 import { NvNotificationService, } from './providers/NotificationService';
 import * as components from './generated/components';
+/**
+ * Register all Stencil custom elements before the plugin is imported.
+ * Top-level await ensures customElements.define() completes before Vue renders,
+ * preventing a race condition where camelCase props (e.g. errorDescription) are
+ * set as lowercased HTML attributes (errordescription) instead of kebab-case
+ * (error-description) that Stencil observes.
+ */
+await defineCustomElements();
 /**
  * This is the Vue plugin that is used to define the custom elements, event
  * handlers, and includes the notification service.
  */
 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]) => {

package/dist/providers/NotificationService.d.ts

@@ -1,5 +1,5 @@
 import { App, type Ref, type Component } from 'vue';
-import { NotificationEmphasis, FeedbackColors, NotificationPosition } from '../index';
+import { NotificationEmphasis, FeedbackColors, NotificationPosition, type IconName } from '../index';
 /**
  * Action callbacks for notifications. Will render buttons automatically.
  */
@@ -28,7 +28,7 @@ export interface NotificationOptions {
     /** Type of the notification, used to determine the color and default icon. */
     feedback?: `${FeedbackColors}`;
     /** Custom icon name to override the default icon. */
-    icon?: string;
+    icon?: `${IconName}`;
     /** Notification actions */
     actions?: NotificationAction[];
     /** Custom components for the notification actions. */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nova-design-system/nova-vue",
-  "version": "3.28.0",
+  "version": "3.30.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",