@nova-design-system/nova-vue 3.0.0-beta.36 → 3.0.0-beta.37

package/README.md

@@ -1,6 +1,37 @@
 # Nova Components Vue
 
-**Nova Components Vue** is a Vue.js wrapper that allows you to seamlessly integrate Nova's native UI elements into your Vue applications. This package provides Vue-compatible components, making it easy to build modern and consistent user interfaces with Nova UI components in a Vue environment.
+**Nova Components Vue** provides an easy way to use [Nova’s native Web Components](https://www.npmjs.com/package/@nova-design-system/nova-webcomponents) within your Vue applications.
+
+- [Nova Components Vue](#nova-components-vue)
+  - [Key Features](#key-features)
+  - [Installation](#installation)
+  - [Setup Using Tailwind (Recommended)](#setup-using-tailwind-recommended)
+    - [1. Install Tailwind CSS and the Vite Plugin](#1-install-tailwind-css-and-the-vite-plugin)
+    - [2. Configure the Vite Plugin](#2-configure-the-vite-plugin)
+    - [3. Create `tailwind.config.ts`](#3-create-tailwindconfigts)
+    - [4. Configure Tailwind and Nova Plugin in `main.css`](#4-configure-tailwind-and-nova-plugin-in-maincss)
+    - [5. Register NovaComponents and include the Nova Tokens](#5-register-novacomponents-and-include-the-nova-tokens)
+    - [6. Use Nova Components and Tailwind Utilities](#6-use-nova-components-and-tailwind-utilities)
+    - [7. Setup the Nova Font](#7-setup-the-nova-font)
+    - [Creating Your Own Style Components with Tailwind](#creating-your-own-style-components-with-tailwind)
+  - [Setup Without Tailwind (Not Recommended)](#setup-without-tailwind-not-recommended)
+    - [1. Register NovaComponents and include the Nova CSS.](#1-register-novacomponents-and-include-the-nova-css)
+    - [2. Use Nova Components](#2-use-nova-components)
+  - [Nova Font Pro Integration](#nova-font-pro-integration)
+    - [Option 1: Import in Main Entry (Recommended)](#option-1-import-in-main-entry-recommended)
+    - [Option 2: HTML Integration](#option-2-html-integration)
+
+
+---
+
+## Key Features
+
+- **Lightweight Integration**: Leverage Nova Web Components with minimal configuration in Vue.
+- **Customizable Styling**: Use Tailwind (recommended) or Nova’s utility classes to quickly style components.
+- **Dark Mode Ready**: Toggle dark mode by adding the `dark` class to your `body` element.
+- **Nova Font Pro Support**: Easily integrate Nova’s custom font for a consistent design experience.
+
+---
 
 ## Installation
 
@@ -16,22 +47,211 @@ or
 yarn add @nova-design-system/nova-webcomponents @nova-design-system/nova-base @nova-design-system/nova-vue
 ```
 
-## Setup
+## Setup Using Tailwind (Recommended)
+
+We highly recommend using Tailwind CSS for styling, as it ensures an optimized bundle size and a powerful utility-first workflow. Nova offers a dedicated Tailwind plugin and theme, allowing you to seamlessly integrate Nova’s design tokens with Tailwind’s utility classes for a consistent and efficient styling workflow.
+
+> **Tailwind Version**
+> This guide is written for Tailwind v4. While compatible with v3, some features may not work as expected.
+
+Below is an example setup using the **vue cli with vite**. If you're using another framework, such as nuxt, please refer to the [Tailwind Installation Guide](https://tailwindcss.com/docs/installation).
+
+### 1. Install Tailwind CSS and the Vite Plugin
+
+```bash
+npm install tailwindcss @tailwindcss/vite
+```
+
+> Use the **[Tailwind CSS IntelliSense Extension](https://marketplace.visualstudio.com/items?itemName=bradlc.vscode-tailwindcss)** to get full autocomplete support for Tailwind and Nova tokens.
+
+### 2. Configure the Vite Plugin
+
+Add the tailwindcss plugin to your `vite.config.ts`:
+
+```ts
+import { fileURLToPath, URL } from 'node:url'
+
+import { defineConfig } from 'vite'
+import vue from '@vitejs/plugin-vue'
+import vueJsx from '@vitejs/plugin-vue-jsx'
+import vueDevTools from 'vite-plugin-vue-devtools'
+import tailwindcss from '@tailwindcss/vite'
+
+// https://vite.dev/config/
+export default defineConfig({
+  plugins: [vue(), vueJsx(), vueDevTools(), tailwindcss()],
+  resolve: {
+    alias: {
+      '@': fileURLToPath(new URL('./src', import.meta.url)),
+    },
+  },
+})
+
+```
+
+### 3. Create `tailwind.config.ts`
+
+In the root of your project, create a `tailwind.config.ts` file and include the Nova theme:
+
+```ts
+import type { Config } from 'tailwindcss'
+import { novaTailwindTheme } from "@nova-design-system/nova-base/theme"
+
+export default {
+  theme: novaTailwindTheme,
+} satisfies Config
+```
+
+### 4. Configure Tailwind and Nova Plugin in `main.css`
+
+in `src/assets/main.css`:
+
+```css
+@import 'tailwindcss';
+
+@config "../../tailwind.config.ts";
+@plugin "@nova-design-system/nova-base/theme/plugin";
+@custom-variant dark (&:where(.dark, .dark *));
+```
+
+**Make sure to remove any other CSS that was generated by the Vue CLI.**
 
-After installing the packages, you'll need to include the Nova UI CSS and register the Nova Components Vue plugin in your `main.ts` file:
+> **Dark Mode**
+> To enable dark mode, add the `dark` class to the `<body>` element.
+
+
+### 5. Register NovaComponents and include the Nova Tokens
+Register the Nova Components Vue plugin in your `main.ts` file, and include the nova tokens (Spark or Ocean theme) css file:
 
 ```typescript
-import { createApp } from 'vue';
-import App from './App.vue';
+import './assets/main.css'
+import '@nova-design-system/nova-base/dist/css/spark.css'; // or ocean.css
+
+import { createApp } from 'vue'
+import App from './App.vue'
+import router from './router'
+import { NovaComponents } from '@nova-design-system/nova-vue/plugin';
+
+const app = createApp(App)
+
+app.use(router)
+app.use(NovaComponents)
+
+app.mount('#app')
+```
+
+### 6. Use Nova Components and Tailwind Utilities
+
+```html
+<script setup lang="ts">
+import { ref } from 'vue';
+import { NvButton } from '@nova-design-system/nova-vue'
+
+const count = ref(0);
+</script>
+
+<template>
+  <div class="flex items-center justify-center">
+    <NvButton danger @click="count++">
+      Count is {{ count }}
+    </NvButton>
+  </div>
+</template>
+```
+
+> Note: **We have full typescript and intellisense support for Nova components.** If you do not see the autocomplete options, make sure you uninstall Volar or Vetur, and use the [Vue - Official](https://marketplace.visualstudio.com/items?itemName=Vue.volar) Extension only.
+
+### 7. Setup the Nova Font
+
+Follow the steps in the [Nova Font Pro Integration](#nova-font-pro-integration) section below.
 
+---
+
+### Creating Your Own Style Components with Tailwind
+
+If you find you’re repeating the same set of utility classes for certain UI elements (e.g., a card component), you can group them using Tailwind’s `@apply` keyword:
+
+```css
+/* any css file */
+.card {
+  @apply bg-gray-50 dark:bg-gray-500 p-4 rounded-md shadow-sm;
+}
+```
+
+Then in your markup, instead of:
+
+```jsx
+<div class="bg-gray-50 dark:bg-gray-500 p-4 rounded-md shadow-sm">
+  {/* Content */}
+</div>
+<div class="bg-gray-50 dark:bg-gray-500 p-4 rounded-md shadow-sm">
+  {/* Content */}
+</div>
+```
+
+You can use your new `card` class:
+
+```jsx
+<div class="card">
+  {/* Content */}
+</div>
+<div class="card">
+  {/* Content */}
+</div>
+```
+
+This ensures consistent styling and keeps your markup clean. Any colors or spacing used will reference the correct Nova Tokens.
+
+---
+
+## Setup Without Tailwind (Not Recommended)
+
+If you don’t plan to use Tailwind, Nova provides a large utility CSS file for quick prototyping. Be aware that this approach will increase your CSS bundle size, offer less options, and lacks the flexibility and optimizations of Tailwind.
+
+### 1. Register NovaComponents and include the Nova CSS.
+
+After installing the nova packages, you'll need to include the CSS for the theme and the utils. Then you register the Nova Components Vue plugin.
+
+In your `main.ts` file:
+
+```typescript
+import './assets/main.css'
 import '@nova-design-system/nova-base/dist/css/nova-utils.css';
 import '@nova-design-system/nova-base/dist/css/spark.css'; // or ocean.css
+
+import { createApp } from 'vue'
+import App from './App.vue'
+import router from './router'
 import { NovaComponents } from '@nova-design-system/nova-vue/plugin';
 
-createApp(App).use(NovaComponents).mount('#app');
+const app = createApp(App)
+
+app.use(router)
+app.use(NovaComponents)
+
+app.mount('#app')
 ```
 
-This setup makes Nova's web components available throughout your Vue application.
+### 2. Use Nova Components
+
+```html
+<script setup lang="ts">
+import { ref } from 'vue';
+import { NvButton } from '@nova-design-system/nova-vue'
+
+const count = ref(0);
+</script>
+
+<template>
+  <div class="flex items-center justify-center">
+    <NvButton danger @click="count++">
+      Count is {{ count }}
+    </NvButton>
+  </div>
+</template>
+```
+
+---
 
 ## Nova Font Pro Integration
 
@@ -42,16 +262,24 @@ This setup makes Nova's web components available throughout your Vue application
  Once you have the URL, you can integrate it using any of these methods:
 
 ### Option 1: Import in Main Entry (Recommended)
-In your `main.ts` or `main.js`:
+In your `main.ts`:
 
 ```typescript
-import { createApp } from 'vue';
-import App from './App.vue';
-import '@nova-design-system/nova-base/dist/css/nova-utils.css';
-import '@nova-design-system/nova-base/dist/css/spark.css';
+import './assets/main.css'
+import '@nova-design-system/nova-base/dist/css/spark.css'; // or ocean.css
 import 'https://novaassets.azureedge.net/fonts/nova-fonts-pro.css';
 
-createApp(App).mount('#app');
+import { createApp } from 'vue'
+import App from './App.vue'
+import router from './router'
+import { NovaComponents } from '@nova-design-system/nova-vue/plugin';
+
+const app = createApp(App)
+
+app.use(router)
+app.use(NovaComponents)
+
+app.mount('#app')
 ```
 
 ### Option 2: HTML Integration
@@ -70,26 +298,3 @@ In your `index.html`:
 ```
 
 The `nova-fonts-pro.css` file includes both font definitions and the `font-family` rule for the `body`, automatically applying the fonts across your Vue application.
-
-## Usage
-
-With the setup complete, you can now use Nova components in your Vue components. Here's a quick example:
-
-```vue
-<script setup lang="ts">
-import { ref } from 'vue';
-import { NvButton } from '@nova-design-system/nova-vue';
-
-const count = ref(0);
-</script>
-
-<template>
-  <NvButton danger @click="count++">count is {{ count }}</NvButton>
-</template>
-```
-
-In this example, the `NvButton` component is imported and used within a Vue component. The `danger` prop is passed to style the button, and the `@click` event handler is used to increment the `count` variable.
-
-## Conclusion
-
-Nova Components Vue provides a convenient way to integrate Nova's native web components into your Vue.js projects. By following the simple setup steps, you can start using these powerful UI components in your Vue applications right away. For more detailed documentation and examples, refer to the official Nova documentation.

package/dist/generated/components.d.ts

@@ -13,6 +13,9 @@ export declare const NvDatagridcolumn: import("vue").DefineSetupFnComponent<JSX.
 export declare const NvDatagriddatacell: import("vue").DefineSetupFnComponent<JSX.NvDatagriddatacell & import("./vue-component-lib/utils").InputProps<string | number | boolean>, {}, {}, JSX.NvDatagriddatacell & import("./vue-component-lib/utils").InputProps<string | number | boolean> & {}, import("vue").PublicProps>;
 export declare const NvDatagridhead: import("vue").DefineSetupFnComponent<JSX.NvDatagridhead & import("./vue-component-lib/utils").InputProps<string | number | boolean>, {}, {}, JSX.NvDatagridhead & import("./vue-component-lib/utils").InputProps<string | number | boolean> & {}, import("vue").PublicProps>;
 export declare const NvDatagridrow: import("vue").DefineSetupFnComponent<JSX.NvDatagridrow & import("./vue-component-lib/utils").InputProps<string | number | boolean>, {}, {}, JSX.NvDatagridrow & import("./vue-component-lib/utils").InputProps<string | number | boolean> & {}, import("vue").PublicProps>;
+export declare const NvDialog: import("vue").DefineSetupFnComponent<JSX.NvDialog & import("./vue-component-lib/utils").InputProps<string | number | boolean>, {}, {}, JSX.NvDialog & import("./vue-component-lib/utils").InputProps<string | number | boolean> & {}, import("vue").PublicProps>;
+export declare const NvDialogfooter: import("vue").DefineSetupFnComponent<JSX.NvDialogfooter & import("./vue-component-lib/utils").InputProps<string | number | boolean>, {}, {}, JSX.NvDialogfooter & import("./vue-component-lib/utils").InputProps<string | number | boolean> & {}, import("vue").PublicProps>;
+export declare const NvDialogheader: import("vue").DefineSetupFnComponent<JSX.NvDialogheader & import("./vue-component-lib/utils").InputProps<string | number | boolean>, {}, {}, JSX.NvDialogheader & import("./vue-component-lib/utils").InputProps<string | number | boolean> & {}, import("vue").PublicProps>;
 export declare const NvFieldcheckbox: import("vue").DefineSetupFnComponent<JSX.NvFieldcheckbox & import("./vue-component-lib/utils").InputProps<boolean>, {}, {}, JSX.NvFieldcheckbox & import("./vue-component-lib/utils").InputProps<boolean> & {}, import("vue").PublicProps>;
 export declare const NvFielddropdown: import("vue").DefineSetupFnComponent<JSX.NvFielddropdown & import("./vue-component-lib/utils").InputProps<string>, {}, {}, JSX.NvFielddropdown & import("./vue-component-lib/utils").InputProps<string> & {}, import("vue").PublicProps>;
 export declare const NvFielddropdownitem: import("vue").DefineSetupFnComponent<JSX.NvFielddropdownitem & import("./vue-component-lib/utils").InputProps<string | number | boolean>, {}, {}, JSX.NvFielddropdownitem & import("./vue-component-lib/utils").InputProps<string | number | boolean> & {}, import("vue").PublicProps>;
@@ -24,7 +27,7 @@ export declare const NvFieldradio: import("vue").DefineSetupFnComponent<JSX.NvFi
 export declare const NvFieldselect: import("vue").DefineSetupFnComponent<JSX.NvFieldselect & import("./vue-component-lib/utils").InputProps<string>, {}, {}, JSX.NvFieldselect & import("./vue-component-lib/utils").InputProps<string> & {}, import("vue").PublicProps>;
 export declare const NvFieldtext: import("vue").DefineSetupFnComponent<JSX.NvFieldtext & import("./vue-component-lib/utils").InputProps<string>, {}, {}, JSX.NvFieldtext & import("./vue-component-lib/utils").InputProps<string> & {}, import("vue").PublicProps>;
 export declare const NvFieldtextarea: import("vue").DefineSetupFnComponent<JSX.NvFieldtextarea & import("./vue-component-lib/utils").InputProps<string>, {}, {}, JSX.NvFieldtextarea & import("./vue-component-lib/utils").InputProps<string> & {}, import("vue").PublicProps>;
-export declare const NvFieldtoggle: import("vue").DefineSetupFnComponent<JSX.NvFieldtoggle & import("./vue-component-lib/utils").InputProps<boolean>, {}, {}, JSX.NvFieldtoggle & import("./vue-component-lib/utils").InputProps<boolean> & {}, import("vue").PublicProps>;
+export declare const NvFieldtime: import("vue").DefineSetupFnComponent<JSX.NvFieldtime & import("./vue-component-lib/utils").InputProps<string | number | boolean>, {}, {}, JSX.NvFieldtime & import("./vue-component-lib/utils").InputProps<string | number | boolean> & {}, import("vue").PublicProps>;
 export declare const NvIcon: import("vue").DefineSetupFnComponent<JSX.NvIcon & import("./vue-component-lib/utils").InputProps<string | number | boolean>, {}, {}, JSX.NvIcon & import("./vue-component-lib/utils").InputProps<string | number | boolean> & {}, import("vue").PublicProps>;
 export declare const NvIconbutton: import("vue").DefineSetupFnComponent<JSX.NvIconbutton & import("./vue-component-lib/utils").InputProps<string | number | boolean>, {}, {}, JSX.NvIconbutton & import("./vue-component-lib/utils").InputProps<string | number | boolean> & {}, import("vue").PublicProps>;
 export declare const NvLoader: import("vue").DefineSetupFnComponent<JSX.NvLoader & import("./vue-component-lib/utils").InputProps<string | number | boolean>, {}, {}, JSX.NvLoader & import("./vue-component-lib/utils").InputProps<string | number | boolean> & {}, import("vue").PublicProps>;
@@ -39,4 +42,5 @@ export declare const NvTablecolumn: import("vue").DefineSetupFnComponent<JSX.NvT
 export declare const NvTabledatacell: import("vue").DefineSetupFnComponent<JSX.NvTabledatacell & import("./vue-component-lib/utils").InputProps<string | number | boolean>, {}, {}, JSX.NvTabledatacell & import("./vue-component-lib/utils").InputProps<string | number | boolean> & {}, import("vue").PublicProps>;
 export declare const NvTablehead: import("vue").DefineSetupFnComponent<JSX.NvTablehead & import("./vue-component-lib/utils").InputProps<string | number | boolean>, {}, {}, JSX.NvTablehead & import("./vue-component-lib/utils").InputProps<string | number | boolean> & {}, import("vue").PublicProps>;
 export declare const NvTablerow: import("vue").DefineSetupFnComponent<JSX.NvTablerow & import("./vue-component-lib/utils").InputProps<string | number | boolean>, {}, {}, JSX.NvTablerow & import("./vue-component-lib/utils").InputProps<string | number | boolean> & {}, import("vue").PublicProps>;
+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>;
 export declare const NvTooltip: import("vue").DefineSetupFnComponent<JSX.NvTooltip & import("./vue-component-lib/utils").InputProps<string | number | boolean>, {}, {}, JSX.NvTooltip & import("./vue-component-lib/utils").InputProps<string | number | boolean> & {}, import("vue").PublicProps>;

package/dist/generated/components.js

@@ -53,6 +53,7 @@ export const NvBreadcrumbs = /*@__PURE__*/ defineContainer('nv-breadcrumbs', und
 export const NvButton = /*@__PURE__*/ defineContainer('nv-button', undefined, [
     'size',
     'emphasis',
+    'active',
     'danger',
     'loading',
     'disabled',
@@ -80,6 +81,33 @@ export const NvDatagriddatacell = /*@__PURE__*/ defineContainer('nv-datagriddata
 ]);
 export const NvDatagridhead = /*@__PURE__*/ defineContainer('nv-datagridhead', undefined);
 export const NvDatagridrow = /*@__PURE__*/ defineContainer('nv-datagridrow', undefined);
+export const NvDialog = /*@__PURE__*/ defineContainer('nv-dialog', undefined, [
+    'triggerElement',
+    'headerElement',
+    'footerElement',
+    'open',
+    'undismissable',
+    'clickOutside',
+    'manualFocus',
+    'controlled',
+    'full',
+    'close'
+]);
+export const NvDialogfooter = /*@__PURE__*/ defineContainer('nv-dialogfooter', undefined, [
+    'disabled',
+    'undismissable',
+    'leadingIcon',
+    'trailingIcon',
+    'danger',
+    'cancelLabel',
+    'submitLabel',
+    'nvDialogCanceled',
+    'nvDialogConfirmed'
+]);
+export const NvDialogheader = /*@__PURE__*/ defineContainer('nv-dialogheader', undefined, [
+    'heading',
+    'subheading'
+]);
 export const NvFieldcheckbox = /*@__PURE__*/ defineContainer('nv-fieldcheckbox', undefined, [
     'message',
     'validation',
@@ -116,6 +144,7 @@ export const NvFielddropdown = /*@__PURE__*/ defineContainer('nv-fielddropdown',
     'disabled',
     'emptyresult',
     'filterable',
+    'options',
     'dropdownItemSelected',
     'valueChanged'
 ], 'value', 'value-changed');
@@ -220,6 +249,7 @@ export const NvFieldradio = /*@__PURE__*/ defineContainer('nv-fieldradio', undef
 export const NvFieldselect = /*@__PURE__*/ defineContainer('nv-fieldselect', undefined, [
     'message',
     'validation',
+    'options',
     'inputId',
     'label',
     'description',
@@ -281,19 +311,25 @@ export const NvFieldtextarea = /*@__PURE__*/ defineContainer('nv-fieldtextarea',
     'autosize',
     'valueChanged'
 ], 'value', 'value-changed');
-export const NvFieldtoggle = /*@__PURE__*/ defineContainer('nv-fieldtoggle', undefined, [
-    'inputId',
-    'name',
+export const NvFieldtime = /*@__PURE__*/ defineContainer('nv-fieldtime', undefined, [
     'value',
     'label',
-    'labelPlacement',
-    'hideLabel',
-    'description',
-    'checked',
-    'disabled',
+    'inputId',
     'readonly',
-    'checkedChanged'
-], 'checked', 'checked-changed');
+    'disabled',
+    'required',
+    'name',
+    'success',
+    'error',
+    'errorDescription',
+    'format',
+    'description',
+    'open',
+    'step',
+    'max',
+    'min',
+    'valueChanged'
+]);
 export const NvIcon = /*@__PURE__*/ defineContainer('nv-icon', undefined, [
     'xsmall',
     'small',
@@ -323,6 +359,7 @@ export const NvMenu = /*@__PURE__*/ defineContainer('nv-menu', undefined, [
     'nested',
     'disableCloseOnSelect',
     'placement',
+    'items',
     'menuitemSelected'
 ]);
 export const NvMenuitem = /*@__PURE__*/ defineContainer('nv-menuitem', undefined, [
@@ -378,6 +415,19 @@ export const NvTabledatacell = /*@__PURE__*/ defineContainer('nv-tabledatacell',
 ]);
 export const NvTablehead = /*@__PURE__*/ defineContainer('nv-tablehead', undefined);
 export const NvTablerow = /*@__PURE__*/ defineContainer('nv-tablerow', undefined);
+export const NvToggle = /*@__PURE__*/ defineContainer('nv-toggle', undefined, [
+    'inputId',
+    'name',
+    'value',
+    'label',
+    'labelPlacement',
+    'hideLabel',
+    'description',
+    'checked',
+    'disabled',
+    'readonly',
+    'checkedChanged'
+], 'checked', 'checked-changed');
 export const NvTooltip = /*@__PURE__*/ defineContainer('nv-tooltip', undefined, [
     'triggerElement',
     'message',

package/package.json

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