@nova-design-system/nova-vue 3.0.0-beta.17

package/LICENSE.MD

@@ -0,0 +1,157 @@
+# End-User License Agreement: Nova Design System
+
+This End-User License Agreement ("Agreement") is entered into between:
+
+1. **Elia Group NV**
+
+Located at Keizerslaan 20, 1000 Brussel, registered at the Crossroads Bank for Enterprises in Belgium under number 0476.388.378 (hereafter: “Licensor”, “Elia”, “We”, “Our” or “Us”), and
+
+2. **Subsidiaries, Partners, or Affiliates**
+
+Collectively referred to as the "Licensee".
+
+**Licensor** and **Licensee** may both be referred to as a “Party” and jointly as the “Parties”.
+
+This Agreement can only be entered into by a party which qualifies as the “Licensee”. Any attempt by Third Parties to claim rights or licenses under this Agreement shall be considered null and void, as the Agreement is strictly limited to the Licensee, as defined herein.
+
+## Article 1: Definitions
+
+### 1.1 Affiliate
+
+A business entity related to Elia through ownership, control, or shared interests, as per Article 1:15 of the Belgian Code of Companies and Associations.
+
+### 1.2 Effective Date
+
+The date from which the Licensee accesses and downloads the Works.
+
+### 1.3 Elia Projects
+
+Initiatives, projects, or tasks directly relating to Elia’s business operations or those of Subsidiaries, Affiliates, or Partners, including development, execution, or management of services or products.
+
+### 1.4 Intellectual Property Rights
+
+Any intellectual property rights, including copyrights, trademarks, patents, and related rights worldwide.
+
+### 1.5 License
+
+As described in Article 2.1.
+
+### 1.6 Partner
+
+A business partner, subcontractor, or service provider of Elia engaged in Elia Projects.
+
+### 1.7 Subsidiary
+
+An entity directly or indirectly controlled by the Licensee, per Article 1:14 of the Belgian Code of Companies and Associations.
+
+### 1.8 Territory
+
+The entire world.
+
+### 1.9 Third Party
+
+A person or entity not defined as a Party, Subsidiary, Affiliate, or Partner of the Licensor.
+
+### 1.10 Works
+
+All elements and visuals in the UI library of the "Nova Design System", including source code and associated materials.
+
+## Article 2: Grant of License
+
+### 2.1 License Grant
+
+The **Licensor** grants the **Licensee** a non-exclusive, revocable, sublicensable, and non-transferable right to use the Works worldwide solely for Elia Projects.
+
+### 2.2 Usage Rights
+
+The usage rights include reproduction, translation, and public communication, provided the Licensee complies with the Agreement.
+
+### 2.3 Reporting Infringements
+
+Licensee must inform Licensor of any Intellectual Property infringement.
+
+## Article 3: Ownership of Intellectual Property Rights
+
+### 3.1 Ownership Retained
+
+The **Licensor** retains all ownership rights to the Intellectual Property related to the Works.
+
+### 3.2 Updates
+
+Updates may be implemented by the Licensor without prior notice. Licensee may choose whether to implement updates.
+
+## Article 4: Permitted Use and Restrictions
+
+### 4.1 Permitted Use
+
+- The Works may only be used by employees or contractors of the Licensee in Elia Projects.
+
+- Installation is restricted to devices owned or controlled by the Licensee.
+
+### 4.2 Restrictions
+
+The Works must not be:
+
+- Shared, sublicensed, or otherwise transferred to Third Parties.
+
+- Reverse-engineered, decompiled, or disassembled.
+
+## Article 5: Liability and Disclaimer of Warranties
+
+### 5.1 Disclaimer
+
+The Works are provided "as is", without warranty of any kind. The **Licensor** disclaims all implied warranties.
+
+### 5.2 Limitation of Liability
+
+The **Licensor** limits its liability to €1,000. The Licensee assumes all risks related to the use of the Works.
+
+## Article 6: Term and Termination
+
+### 6.1 Initial Term
+
+The Agreement is effective indefinitely from the Effective Date unless terminated.
+
+### 6.2 Termination by Notice
+
+Either Party may terminate with one month's written notice.
+
+### 6.3 Automatic Termination
+
+Termination occurs automatically upon:
+
+- Changes in control, ownership, or project participation.
+
+- Breach of material terms by the Licensee, following written notice.
+
+### 6.4 Post-Termination Obligations
+
+Upon termination, the **Licensee** must cease using and destroy all copies of the Works.
+
+## Article 7: Miscellaneous
+
+### 7.1 Waiver
+
+Waivers must be in writing and do not constitute ongoing waivers of similar rights.
+
+### 7.2 Costs
+
+Each Party bears its own implementation costs.
+
+### 7.3 Assignment
+
+The Agreement may not be assigned without prior consent from the **Licensor**.
+
+### 7.4 Severability
+
+Invalid provisions will not affect the remainder of the Agreement.
+
+## Article 8: Governing Law and Jurisdiction
+
+### 8.1 Governing Law
+
+This Agreement is governed by Belgian law.
+
+### 8.2 Jurisdiction
+
+The Dutch-speaking courts of Brussels have exclusive jurisdiction for disputes.

package/README.md

@@ -0,0 +1,92 @@
+# 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.
+
+## Installation
+
+To begin, install the necessary Nova packages using your package manager:
+
+```bash
+npm install @nova-design-system/nova-webcomponents @nova-design-system/nova-base @nova-design-system/nova-vue
+```
+
+or
+
+```bash
+yarn add @nova-design-system/nova-webcomponents @nova-design-system/nova-base @nova-design-system/nova-vue
+```
+
+## Setup
+
+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:
+
+```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/assets/nova-fonts.css';
+import '@nova-design-system/nova-base/dist/css/spark.css'; // or ocean.css
+import { NovaComponents } from '@nova-design-system/nova-vue/plugin';
+
+createApp(App).use(NovaComponents).mount('#app');
+```
+
+This setup makes Nova's web components available throughout your Vue application.
+
+## Nova Font Pro Integration
+
+To use Nova fonts in your Vue application, you'll need to contact the Nova team via Teams, email, or check the [Nova Wiki](https://dev.azure.com/elia-digitization/Nova/_wiki/wikis/Nova.wiki/30245/Nova-Font-Pro) to obtain the full CDN URL. 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`:
+
+```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 'https://novaassets.azureedge.net/fonts/nova-fonts-pro.css';
+
+createApp(App).mount('#app');
+```
+
+### Option 2: HTML Integration
+In your `index.html`:
+
+```html
+<!DOCTYPE html>
+<html>
+<head>
+  <link rel="stylesheet" href="https://novaassets.azureedge.net/fonts/nova-fonts-pro.css">
+</head>
+<body>
+  <div id="app"></div>
+</body>
+</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

@@ -0,0 +1,24 @@
+import type { JSX } from '@nova-design-system/nova-webcomponents';
+export declare const NvAlert: import("vue").DefineSetupFnComponent<JSX.NvAlert & import("./vue-component-lib/utils").InputProps<boolean>, {}, {}, JSX.NvAlert & import("./vue-component-lib/utils").InputProps<boolean> & {}, import("vue").PublicProps>;
+export declare const NvAvatar: import("vue").DefineSetupFnComponent<JSX.NvAvatar & import("./vue-component-lib/utils").InputProps<string | number | boolean>, {}, {}, JSX.NvAvatar & import("./vue-component-lib/utils").InputProps<string | number | boolean> & {}, import("vue").PublicProps>;
+export declare const NvBadge: import("vue").DefineSetupFnComponent<JSX.NvBadge & import("./vue-component-lib/utils").InputProps<string | number | boolean>, {}, {}, JSX.NvBadge & import("./vue-component-lib/utils").InputProps<string | number | boolean> & {}, import("vue").PublicProps>;
+export declare const NvBase: import("vue").DefineSetupFnComponent<JSX.NvBase & import("./vue-component-lib/utils").InputProps<string | number | boolean>, {}, {}, JSX.NvBase & import("./vue-component-lib/utils").InputProps<string | number | boolean> & {}, import("vue").PublicProps>;
+export declare const NvButton: import("vue").DefineSetupFnComponent<JSX.NvButton & import("./vue-component-lib/utils").InputProps<string | number | boolean>, {}, {}, JSX.NvButton & import("./vue-component-lib/utils").InputProps<string | number | boolean> & {}, import("vue").PublicProps>;
+export declare const NvCol: import("vue").DefineSetupFnComponent<JSX.NvCol & import("./vue-component-lib/utils").InputProps<string | number | boolean>, {}, {}, JSX.NvCol & 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 NvFieldnumber: import("vue").DefineSetupFnComponent<JSX.NvFieldnumber & import("./vue-component-lib/utils").InputProps<number>, {}, {}, JSX.NvFieldnumber & import("./vue-component-lib/utils").InputProps<number> & {}, import("vue").PublicProps>;
+export declare const NvFieldpassword: import("vue").DefineSetupFnComponent<JSX.NvFieldpassword & import("./vue-component-lib/utils").InputProps<string>, {}, {}, JSX.NvFieldpassword & import("./vue-component-lib/utils").InputProps<string> & {}, import("vue").PublicProps>;
+export declare const NvFieldradio: import("vue").DefineSetupFnComponent<JSX.NvFieldradio & import("./vue-component-lib/utils").InputProps<boolean>, {}, {}, JSX.NvFieldradio & import("./vue-component-lib/utils").InputProps<boolean> & {}, import("vue").PublicProps>;
+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 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>;
+export declare const NvMenu: import("vue").DefineSetupFnComponent<JSX.NvMenu & import("./vue-component-lib/utils").InputProps<string | number | boolean>, {}, {}, JSX.NvMenu & import("./vue-component-lib/utils").InputProps<string | number | boolean> & {}, import("vue").PublicProps>;
+export declare const NvMenuitem: import("vue").DefineSetupFnComponent<JSX.NvMenuitem & import("./vue-component-lib/utils").InputProps<string | number | boolean>, {}, {}, JSX.NvMenuitem & import("./vue-component-lib/utils").InputProps<string | number | boolean> & {}, import("vue").PublicProps>;
+export declare const NvPopover: import("vue").DefineSetupFnComponent<JSX.NvPopover & import("./vue-component-lib/utils").InputProps<boolean>, {}, {}, JSX.NvPopover & import("./vue-component-lib/utils").InputProps<boolean> & {}, import("vue").PublicProps>;
+export declare const NvRow: import("vue").DefineSetupFnComponent<JSX.NvRow & import("./vue-component-lib/utils").InputProps<string | number | boolean>, {}, {}, JSX.NvRow & import("./vue-component-lib/utils").InputProps<string | number | boolean> & {}, import("vue").PublicProps>;
+export declare const NvStack: import("vue").DefineSetupFnComponent<JSX.NvStack & import("./vue-component-lib/utils").InputProps<string | number | boolean>, {}, {}, JSX.NvStack & import("./vue-component-lib/utils").InputProps<string | number | 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

@@ -0,0 +1,276 @@
+/* eslint-disable */
+/* tslint:disable */
+/* auto-generated vue proxies */
+import { defineContainer } from './vue-component-lib/utils';
+export const NvAlert = /*@__PURE__*/ defineContainer('nv-alert', undefined, [
+    'color',
+    'feedback',
+    'message',
+    'heading',
+    'icon',
+    'dismissible',
+    'preventAutoClose',
+    'hidden',
+    'hiddenChanged',
+    'hiddenChangedComplete',
+    'closeClicked'
+], 'hidden', 'hidden-changed');
+export const NvAvatar = /*@__PURE__*/ defineContainer('nv-avatar', undefined, [
+    'xsmall',
+    'small',
+    'medium',
+    'large',
+    'xlarge',
+    'text',
+    'url',
+    'alt',
+    'src',
+    'initials',
+    'size',
+    'color'
+]);
+export const NvBadge = /*@__PURE__*/ defineContainer('nv-badge', undefined, [
+    'dismissal',
+    'icon',
+    'iconLocation',
+    'color',
+    'label',
+    'leadIcon',
+    'dismissible',
+    'hidden',
+    'preventAutoClose',
+    'closeClicked',
+    'hiddenChanged',
+    'hiddenChangedComplete'
+]);
+export const NvBase = /*@__PURE__*/ defineContainer('nv-base', undefined);
+export const NvButton = /*@__PURE__*/ defineContainer('nv-button', undefined, [
+    'size',
+    'emphasis',
+    'danger',
+    'loading',
+    'disabled',
+    'fluid',
+    'type'
+]);
+export const NvCol = /*@__PURE__*/ defineContainer('nv-col', undefined, [
+    'size'
+]);
+export const NvFieldcheckbox = /*@__PURE__*/ defineContainer('nv-fieldcheckbox', undefined, [
+    'message',
+    'validation',
+    'labelBefore',
+    'inputId',
+    'name',
+    'value',
+    'label',
+    'labelPlacement',
+    'hideLabel',
+    'description',
+    'error',
+    'errorDescription',
+    'checked',
+    'indeterminate',
+    'disabled',
+    'readonly',
+    'required',
+    'checkedChanged'
+], 'checked', 'checked-changed');
+export const NvFieldnumber = /*@__PURE__*/ defineContainer('nv-fieldnumber', undefined, [
+    'message',
+    'validation',
+    'inputId',
+    'label',
+    'description',
+    'placeholder',
+    'name',
+    'disabled',
+    'readonly',
+    'required',
+    'error',
+    'errorDescription',
+    'success',
+    'max',
+    'min',
+    'step',
+    'value',
+    'valueChanged'
+], 'value', 'value-changed');
+export const NvFieldpassword = /*@__PURE__*/ defineContainer('nv-fieldpassword', undefined, [
+    'inputId',
+    'label',
+    'description',
+    'placeholder',
+    'name',
+    'value',
+    'disabled',
+    'readonly',
+    'required',
+    'error',
+    'errorDescription',
+    'success',
+    'maxlength',
+    'minlength',
+    'pattern',
+    'mode',
+    'autocomplete',
+    'hidePasswordIcon',
+    'showPassword',
+    'valueChanged'
+], 'value', 'value-changed');
+export const NvFieldradio = /*@__PURE__*/ defineContainer('nv-fieldradio', undefined, [
+    'message',
+    'labelBefore',
+    'inputId',
+    'name',
+    'value',
+    'label',
+    'labelPlacement',
+    'description',
+    'error',
+    'errorDescription',
+    'checked',
+    'disabled',
+    'checkedChanged'
+], 'checked', 'checked-changed');
+export const NvFieldselect = /*@__PURE__*/ defineContainer('nv-fieldselect', undefined, [
+    'message',
+    'validation',
+    'selectId',
+    'label',
+    'description',
+    'name',
+    'disabled',
+    'readonly',
+    'required',
+    'error',
+    'errorDescription',
+    'success',
+    'multiple',
+    'value',
+    'displayValue',
+    'valueChanged'
+], 'value', 'value-changed');
+export const NvFieldtext = /*@__PURE__*/ defineContainer('nv-fieldtext', undefined, [
+    'message',
+    'validation',
+    'textInputType',
+    'inputId',
+    'label',
+    'description',
+    'placeholder',
+    'name',
+    'value',
+    'type',
+    'disabled',
+    'readonly',
+    'required',
+    'error',
+    'errorDescription',
+    'success',
+    'maxlength',
+    'minlength',
+    'pattern',
+    'autocomplete',
+    'multiple',
+    'valueChanged'
+], 'value', 'value-changed');
+export const NvFieldtextarea = /*@__PURE__*/ defineContainer('nv-fieldtextarea', undefined, [
+    'message',
+    'validation',
+    'textareaId',
+    'label',
+    'description',
+    'placeholder',
+    'name',
+    'value',
+    'disabled',
+    'readonly',
+    'required',
+    'error',
+    'errorDescription',
+    'success',
+    'maxlength',
+    'minlength',
+    'rows',
+    'resize',
+    'autosize',
+    'valueChanged'
+], 'value', 'value-changed');
+export const NvFieldtoggle = /*@__PURE__*/ defineContainer('nv-fieldtoggle', undefined, [
+    'inputId',
+    'name',
+    'value',
+    'label',
+    'labelPlacement',
+    'hideLabel',
+    'description',
+    'checked',
+    'disabled',
+    'readonly',
+    'checkedChanged'
+], 'checked', 'checked-changed');
+export const NvIcon = /*@__PURE__*/ defineContainer('nv-icon', undefined, [
+    'xsmall',
+    'small',
+    'medium',
+    'large',
+    'xlarge',
+    'color',
+    'name',
+    'size'
+]);
+export const NvIconbutton = /*@__PURE__*/ defineContainer('nv-iconbutton', undefined, [
+    'size',
+    'emphasis',
+    'loading',
+    'disabled',
+    'active',
+    'name',
+    'type',
+    'shape'
+]);
+export const NvLoader = /*@__PURE__*/ defineContainer('nv-loader', undefined, [
+    'size',
+    'color'
+]);
+export const NvMenu = /*@__PURE__*/ defineContainer('nv-menu', undefined, [
+    'open',
+    'nested',
+    'disableCloseOnSelect',
+    'placement',
+    'menuitemSelected'
+]);
+export const NvMenuitem = /*@__PURE__*/ defineContainer('nv-menuitem', undefined, [
+    'icon',
+    'disabled',
+    'shortcut',
+    'hasSubmenu'
+]);
+export const NvPopover = /*@__PURE__*/ defineContainer('nv-popover', undefined, [
+    'triggerElement',
+    'open',
+    'triggerMode',
+    'placement',
+    'groupName',
+    'offset',
+    'hasArrow',
+    'disableFlip',
+    'shiftPadding',
+    'enterDelay',
+    'nested',
+    'openChanged'
+], 'open', 'open-changed');
+export const NvRow = /*@__PURE__*/ defineContainer('nv-row', undefined);
+export const NvStack = /*@__PURE__*/ defineContainer('nv-stack', undefined, [
+    'gutter',
+    'fill',
+    'flex',
+    'full',
+    'vertical'
+]);
+export const NvTooltip = /*@__PURE__*/ defineContainer('nv-tooltip', undefined, [
+    'message',
+    'placement',
+    'enterDelay'
+]);

package/dist/generated/vue-component-lib/utils.d.ts

@@ -0,0 +1,16 @@
+export interface InputProps<T> {
+    modelValue?: T;
+}
+/**
+ * Create a callback to define a Vue component wrapper around a Web Component.
+ *
+ * @prop name - The component tag name (i.e. `ion-button`)
+ * @prop componentProps - An array of properties on the
+ * component. These usually match up with the @Prop definitions
+ * in each component's TSX file.
+ * @prop customElement - An option custom element instance to pass
+ * to customElements.define. Only set if `includeImportCustomElements: true` in your config.
+ * @prop modelProp - The prop that v-model binds to (i.e. value)
+ * @prop modelUpdateEvent - The event that is fired from your Web Component when the value changes (i.e. ionChange)
+ */
+export declare const defineContainer: <Props, VModelType = string | number | boolean>(name: string, defineCustomElement: any, componentProps?: string[], modelProp?: string, modelUpdateEvent?: string) => import("vue").DefineSetupFnComponent<Props & InputProps<VModelType>, {}, {}, Props & InputProps<VModelType> & {}, import("vue").PublicProps>;

package/dist/generated/vue-component-lib/utils.js

@@ -0,0 +1,188 @@
+// @ts-nocheck
+// It's easier and safer for Volar to disable typechecking and let the return type inference do its job.
+import { defineComponent, getCurrentInstance, h, inject, ref, withDirectives } from 'vue';
+const UPDATE_VALUE_EVENT = 'update:modelValue';
+const MODEL_VALUE = 'modelValue';
+const ROUTER_LINK_VALUE = 'routerLink';
+const NAV_MANAGER = 'navManager';
+const ROUTER_PROP_PREFIX = 'router';
+const ARIA_PROP_PREFIX = 'aria';
+/**
+ * Starting in Vue 3.1.0, all properties are
+ * added as keys to the props object, even if
+ * they are not being used. In order to correctly
+ * account for both value props and v-model props,
+ * we need to check if the key exists for Vue <3.1.0
+ * and then check if it is not undefined for Vue >= 3.1.0.
+ * See https://github.com/vuejs/vue-next/issues/3889
+ */
+const EMPTY_PROP = Symbol();
+const DEFAULT_EMPTY_PROP = { default: EMPTY_PROP };
+const getComponentClasses = (classes) => {
+    return (classes === null || classes === void 0 ? void 0 : classes.split(' ')) || [];
+};
+const getElementClasses = (ref, componentClasses, defaultClasses = []) => {
+    var _a;
+    return [...Array.from(((_a = ref.value) === null || _a === void 0 ? void 0 : _a.classList) || []), ...defaultClasses].filter((c, i, self) => !componentClasses.has(c) && self.indexOf(c) === i);
+};
+/**
+ * Create a callback to define a Vue component wrapper around a Web Component.
+ *
+ * @prop name - The component tag name (i.e. `ion-button`)
+ * @prop componentProps - An array of properties on the
+ * component. These usually match up with the @Prop definitions
+ * in each component's TSX file.
+ * @prop customElement - An option custom element instance to pass
+ * to customElements.define. Only set if `includeImportCustomElements: true` in your config.
+ * @prop modelProp - The prop that v-model binds to (i.e. value)
+ * @prop modelUpdateEvent - The event that is fired from your Web Component when the value changes (i.e. ionChange)
+ */
+export const defineContainer = (name, defineCustomElement, componentProps = [], modelProp, modelUpdateEvent) => {
+    /**
+     * Create a Vue component wrapper around a Web Component.
+     * Note: The `props` here are not all properties on a component.
+     * They refer to whatever properties are set on an instance of a component.
+     */
+    if (defineCustomElement !== undefined) {
+        defineCustomElement();
+    }
+    const Container = defineComponent((props, { attrs, slots, emit }) => {
+        var _a;
+        let modelPropValue = props[modelProp];
+        const containerRef = ref();
+        const classes = new Set(getComponentClasses(attrs.class));
+        /**
+         * This directive is responsible for updating any reactive
+         * reference associated with v-model on the component.
+         * This code must be run inside of the "created" callback.
+         * Since the following listener callbacks as well as any potential
+         * event callback defined in the developer's app are set on
+         * the same element, we need to make sure the following callbacks
+         * are set first so they fire first. If the developer's callback fires first
+         * then the reactive reference will not have been updated yet.
+         */
+        const vModelDirective = {
+            created: (el) => {
+                const eventsNames = Array.isArray(modelUpdateEvent) ? modelUpdateEvent : [modelUpdateEvent];
+                eventsNames.forEach((eventName) => {
+                    el.addEventListener(eventName.toLowerCase(), (e) => {
+                        /**
+                         * Only update the v-model binding if the event's target is the element we are
+                         * listening on. For example, Component A could emit ionChange, but it could also
+                         * have a descendant Component B that also emits ionChange. We only want to update
+                         * the v-model for Component A when ionChange originates from that element and not
+                         * when ionChange bubbles up from Component B.
+                         */
+                        if (e.target.tagName === el.tagName) {
+                            modelPropValue = (e === null || e === void 0 ? void 0 : e.target)[modelProp];
+                            emit(UPDATE_VALUE_EVENT, modelPropValue);
+                        }
+                    });
+                });
+            },
+        };
+        const currentInstance = getCurrentInstance();
+        const hasRouter = (_a = currentInstance === null || currentInstance === void 0 ? void 0 : currentInstance.appContext) === null || _a === void 0 ? void 0 : _a.provides[NAV_MANAGER];
+        const navManager = hasRouter ? inject(NAV_MANAGER) : undefined;
+        const handleRouterLink = (ev) => {
+            const { routerLink } = props;
+            if (routerLink === EMPTY_PROP)
+                return;
+            if (navManager !== undefined) {
+                /**
+                 * This prevents the browser from
+                 * performing a page reload when pressing
+                 * an Ionic component with routerLink.
+                 * The page reload interferes with routing
+                 * and causes ion-back-button to disappear
+                 * since the local history is wiped on reload.
+                 */
+                ev.preventDefault();
+                let navigationPayload = { event: ev };
+                for (const key in props) {
+                    const value = props[key];
+                    if (props.hasOwnProperty(key) && key.startsWith(ROUTER_PROP_PREFIX) && value !== EMPTY_PROP) {
+                        navigationPayload[key] = value;
+                    }
+                }
+                navManager.navigate(navigationPayload);
+            }
+            else {
+                console.warn('Tried to navigate, but no router was found. Make sure you have mounted Vue Router.');
+            }
+        };
+        return () => {
+            modelPropValue = props[modelProp];
+            getComponentClasses(attrs.class).forEach((value) => {
+                classes.add(value);
+            });
+            const oldClick = props.onClick;
+            const handleClick = (ev) => {
+                if (oldClick !== undefined) {
+                    oldClick(ev);
+                }
+                if (!ev.defaultPrevented) {
+                    handleRouterLink(ev);
+                }
+            };
+            let propsToAdd = {
+                ref: containerRef,
+                class: getElementClasses(containerRef, classes),
+                onClick: handleClick,
+            };
+            /**
+             * We can use Object.entries here
+             * to avoid the hasOwnProperty check,
+             * but that would require 2 iterations
+             * where as this only requires 1.
+             */
+            for (const key in props) {
+                const value = props[key];
+                if ((props.hasOwnProperty(key) && value !== EMPTY_PROP) || key.startsWith(ARIA_PROP_PREFIX)) {
+                    propsToAdd[key] = value;
+                }
+            }
+            if (modelProp) {
+                /**
+                 * If form value property was set using v-model
+                 * then we should use that value.
+                 * Otherwise, check to see if form value property
+                 * was set as a static value (i.e. no v-model).
+                 */
+                if (props[MODEL_VALUE] !== EMPTY_PROP) {
+                    propsToAdd = Object.assign(Object.assign({}, propsToAdd), { [modelProp]: props[MODEL_VALUE] });
+                }
+                else if (modelPropValue !== EMPTY_PROP) {
+                    propsToAdd = Object.assign(Object.assign({}, propsToAdd), { [modelProp]: modelPropValue });
+                }
+            }
+            // If router link is defined, add href to props
+            // in order to properly render an anchor tag inside
+            // of components that should become activatable and
+            // focusable with router link.
+            if (props[ROUTER_LINK_VALUE] !== EMPTY_PROP) {
+                propsToAdd = Object.assign(Object.assign({}, propsToAdd), { href: props[ROUTER_LINK_VALUE] });
+            }
+            /**
+             * vModelDirective is only needed on components that support v-model.
+             * As a result, we conditionally call withDirectives with v-model components.
+             */
+            const node = h(name, propsToAdd, slots.default && slots.default());
+            return modelProp === undefined ? node : withDirectives(node, [[vModelDirective]]);
+        };
+    });
+    if (typeof Container !== 'function') {
+        Container.name = name;
+        Container.props = {
+            [ROUTER_LINK_VALUE]: DEFAULT_EMPTY_PROP,
+        };
+        componentProps.forEach((componentProp) => {
+            Container.props[componentProp] = DEFAULT_EMPTY_PROP;
+        });
+        if (modelProp) {
+            Container.props[MODEL_VALUE] = DEFAULT_EMPTY_PROP;
+            Container.emits = [UPDATE_VALUE_EVENT];
+        }
+    }
+    return Container;
+};

package/dist/index.d.ts

@@ -0,0 +1,2 @@
+export * from './generated/components';
+export * from './plugin';

package/dist/index.js

@@ -0,0 +1,2 @@
+export * from './generated/components';
+export * from './plugin';

package/dist/plugin.d.ts

@@ -0,0 +1,16 @@
+/**
+ * @fileoverview This plugin does two main things:
+ * 1. Loads the Stencil components using defineCustomElements
+ * 2. Sets up custom event handling to bridge the naming convention difference
+ *    between Stencil (camelCase) and Vue (kebab-case)
+ *
+ * The ael, rel, and ce functions are used by Stencil to handle events.
+ * By providing custom implementations, we ensure that event names are
+ * properly transformed, allowing Stencil components to work seamlessly in Vue.
+ */
+import { Plugin } from 'vue';
+/**
+ * This is the Vue plugin that is used to define the custom elements and event
+ * handlers.
+ */
+export declare const NovaComponents: Plugin;

package/dist/plugin.js

@@ -0,0 +1,51 @@
+/**
+ * @fileoverview This plugin does two main things:
+ * 1. Loads the Stencil components using defineCustomElements
+ * 2. Sets up custom event handling to bridge the naming convention difference
+ *    between Stencil (camelCase) and Vue (kebab-case)
+ *
+ * The ael, rel, and ce functions are used by Stencil to handle events.
+ * By providing custom implementations, we ensure that event names are
+ * properly transformed, allowing Stencil components to work seamlessly in Vue.
+ */
+import { defineCustomElements } from '@nova-design-system/nova-webcomponents/loader';
+import * as stringUtils from 'nova-utils/lib/string.utils';
+/**
+ * Transforms the event name to kebab-case.
+ * @param {string} eventName - The name of the event.
+ * @returns {string} The transformed event name.
+ */
+const transformEventName = (eventName) => {
+    return stringUtils.toKebabCase(eventName);
+};
+/**
+ * Custom add event listener function that transforms the event name
+ * @param {HTMLElement} el - The element to attach the event listener to.
+ * @param {string} eventName - The name of the event.
+ * @param {Function} cb - The callback function to be executed when the event is triggered.
+ * @param {object} opts - The options for the event listener.
+ * @returns {void} Nothing.
+ */
+const ael = (el, eventName, cb, opts) => el.addEventListener(transformEventName(eventName), cb, opts);
+/**
+ * Custom remove event listener function that transforms the event name.
+ * @param {HTMLElement} el - The element to remove the event listener from.
+ * @param {string} eventName - The name of the event.
+ * @param {Function} cb - The callback function to be removed.
+ * @param {object} opts - The options for the event listener.
+ * @returns {void} Nothing.
+ */
+const rel = (el, eventName, cb, opts) => el.removeEventListener(transformEventName(eventName), cb, opts);
+/**
+ * This is the Vue plugin that is used to define the custom elements and event
+ * handlers.
+ */
+export const NovaComponents = {
+    async install() {
+        defineCustomElements(window, {
+            ce: (eventName, opts) => new CustomEvent(transformEventName(eventName), opts),
+            ael,
+            rel,
+        });
+    },
+};

package/package.json

@@ -0,0 +1,50 @@
+{
+  "name": "@nova-design-system/nova-vue",
+  "version": "3.0.0-beta.17",
+  "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",
+  "license": "SEE LICENSE IN LICENSE.MD",
+  "main": "dist/index.js",
+  "module": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "directories": {
+    "lib": "lib",
+    "stories": "stories"
+  },
+  "files": [
+    "dist"
+  ],
+  "publishConfig": {
+    "registry": "http://registry.npmjs.org/",
+    "access": "public"
+  },
+  "exports": {
+    ".": {
+      "import": "./dist/index.js",
+      "types": "./dist/index.d.ts"
+    },
+    "./plugin": {
+      "import": "./dist/plugin.js",
+      "types": "./dist/plugin.d.ts"
+    }
+  },
+  "scripts": {
+    "build": "npm run tsc",
+    "tsc": "tsc -p . --outDir ./dist",
+    "storybook": "storybook dev -p 6008",
+    "storybook.build": "storybook build -o ../../storybook-static/vue",
+    "clean": "rimraf dist lib/generated lib/stories",
+    "typecheck": "tsc --emitDeclarationOnly false --noEmit"
+  },
+  "devDependencies": {
+    "vue": "3.4.36",
+    "@storybook/vue3": "8.2.8",
+    "@storybook/vue3-vite": "8.2.8",
+    "nova-storybook-utils": "*",
+    "@nova-design-system/nova-webcomponents": "*"
+  },
+  "peerDependencies": {
+    "@nova-design-system/nova-webcomponents": ">=3.0.0-beta.0"
+  }
+}