@corvina/vue-components-library

Corvina Components Library

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

Documentation

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

Installation

To install the package run the following command:

npm install @corvina/vue-components-library

Usage

Add to your vue application the corvina components:

import { createApp } from 'vue'
import App from './App.vue'
import vuetify from './plugins/vuetify'
import CorvinaComponents from "@corvina/vue-components-library"
import "@corvina/vue-components-library/vue-components-library.css"

createApp(App)
  .use(vuetify)
  .use(CorvinaComponents)
  .mount('#app')

Fonts

The components use Roboto, Material Symbols and the Corvina icons font (ExorFontIcon). If the hosting app does not load them already, call loadFonts() once:

import { loadFonts } from "@corvina/vue-components-library"

loadFonts()

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/vue-components-library/icons-corvina-classes-font-face.css"

IDE support (types, autocomplete, go to definition)

The package ships type declarations that register the components installed by app.use(CorvinaComponents) as global components (GlobalComponents augmentation of vue), so with the Vue - Official extension you get prop autocomplete, type checking and ctrl+click on <CorvinaBreadcrumb>, <CorvinaTable>, ... in templates.

The consumer project just needs a tsconfig.json (or jsconfig.json for JavaScript projects) that includes the file importing the library, e.g.:

{
  "compilerOptions": {
    "module": "ESNext",
    "moduleResolution": "Bundler",
    "jsx": "preserve",
    "skipLibCheck": true
  },
  "include": ["src/**/*.js", "src/**/*.ts", "src/**/*.vue"]
}

If the library is not imported from a file covered by the config, add a src/components.d.ts:

import '@corvina/vue-components-library';
export {};

Using a local build of the library

To develop against a local checkout, build it (npm run build:vue) and link it in the consumer:

"@corvina/vue-components-library": "file:../corvina-components-library/dist/vue-components"

• in vite.config, add resolve: { dedupe: ['vue', 'vuetify'] } so a single copy of vue/vuetify is bundled;

• in tsconfig/jsconfig, map vue to the consumer copy, otherwise the global components augment the library's own node_modules/vue and are not seen by the IDE:

  "baseUrl": ".",
  "paths": { "vue": ["./node_modules/vue"] }
  

Declaration maps are included, so go to definition on props, exported types and CORVINA enums jumps to the library sources when they are available (as with a local link).

Internationalization i18n

If you want to support internationalization, please remember to configure the locale in your Vuetify options.

import { en, it, de } from 'vuetify/locale'
const vuetify = createVuetify({
  ...
  locale: {
    locale: 'en',
    fallback: 'en',
    messages: { en, it, de }
  },
  ...
})

To dynamically change the language, use this.$vuetify.locale.current.

For example, in the Corvina application:

this.$i18n.locale = locale?.replace('_', '-') || "en-US";
this.$vuetify.locale.current = this.$i18n.locale?.split('-')[0] || "en";