@corvina/web-components-library

Corvina Components Library

This library is a collection of web components aimed to be used in the Corvina App.

Documentation

The components documentation and live examples are available in the Storybook for web components. The Vue components version is available here.

Installation

To install the package run the following command:

npm install @corvina/web-components-library

Usage

Add the following code to your main.js file:

 import CorvinaComponents from "@corvina/web-components-library";
 import "@corvina/web-components-library/web-components-library.css"
 // 3 parameters: locale: string = 'en', shouldLoadTheme: boolean = false, shouldLoadFonts: boolean = false) {
 CorvinaComponents.initCorvinaComponents('en')

If you use Vuetify in the hosting app set shouldLoadTheme to false otherwise to true.
If you already load the fonts in the hosting app (Roboto, MaterialSymbols, ExorFontIcon) set shouldLoadFonts to false otherwise to true.

The components draw the Corvina icons with ligatures, so they do not need icons-corvina-classes-font-face.css: that file is only for Corvina icons used as CSS classes (<i class="ecc-T-Add"></i>) in the hosting app markup.

To use the Corvina icons as CSS classes, import the stylesheet of the package instead of keeping a copy of it and of the font in the app (the bundler copies the font, fonts/ExorFontIcon.woff, into the app build):

import "@corvina/web-components-library/icons-corvina-classes-font-face.css"

VS Code IntelliSense

The package ships a VS Code custom data file that adds tag and attribute completion, enum values and hover documentation for the <corvina-*> elements in HTML files. Add it to the .vscode/settings.json of your project:

{
  "html.customData": ["./node_modules/@corvina/web-components-library/vscode.html-custom-data.json"]
}

Reload the VS Code window after changing the setting. Attributes marked as complex value (arrays and objects, e.g. the table headers and items) must be set as JavaScript properties, not as HTML attributes.