Voicenter UI library for Vue

This is Vue 3.x + Typescript component library made for Voicenter systems

Installation

1. run yarn add @voicenter-team/voicenter-ui-plus or npm i @voicenter-team/voicenter-ui-plus
2. In main js/ts file add

import '@voicenter-team/voicenter-ui-plus/library/style.css'
import VoicenterUI from '@voicenter-team/voicenter-ui-plus'

app.use(VoicenterUI, {
    components: [], // Here you can pass list of components which you wan't to be globally registered. If empty - will register globally all
    themeConfig, // Pass the configuration of the theme
    lang: 'en', // Pass the language for app localization
    injectIconFont: true, // Will load the icons fonts by adding link elements to head block, library does include the icon fonts in style.css by default, this option should be used in cases like creating custom elements where shadow dom does not support font-family declaration
})

2.1. If you are using tailwind update your tailwind.config.js with:

const voiceTailwindScheme = require('@voicenter-team/voicenter-ui-plus/src/theme/tailwindScheme')

module.exports = {
  ...yourConfiguration,
  theme: {
    colors: {
      ...voiceTailwindScheme
    },
    borderColor: {
      ...voiceTailwindScheme
    }
  }
}

Theming specification

The themeConfig which is passed as options to the VoicenterUI vue.use data could have the following specifications:

Local

Config:

{
    type: 'local'
    themeName: 'red' | 'blue' | '...'
    onSetupCallback: () => {
        console.log('Loaded!')
    }
}

Description:

Such configuration will append to the document element the CSS variables from one of the configuration passed in themeName parameter which it will get from theme specification delivered alongside with library

Params:

• themeName
  • The name of the theme to be injected
• onSetupCallback
  • The function which will be called right after the variables will be injected into the document element. First parameter of which is the theme object which was set up

Remote

Config:

{
    type: 'remote'
    brandingSectionName: 'someName'
    apiUrl: 'someUrl'
    brandingSectionName: {
        property: 'data'
    }
    onSetupCallback: () => {
        console.log('Loaded!')
    }
}

Description:

Such configuration will initiate the call to the specified apiUrl in order to retrieve the JSON object with key-value properties of the CSS variables to inject to document element

Params:

• brandingSectionName
  • [Optional] The name of the section (tagSection) in the database configuration which will be passed to the API in payload and on response retrieved replaced from resulted values
• apiUrl
  • The API url to which the POST request will be initiated
• onSetupCallback
  • The function which will be called right after the variables will be injected into the document element. First parameter of which is the theme object which was set up
• brandingSectionName
  • [Optional] The payload data that will be sent to the request

Custom JSON

Config:

{
    type: 'customJson'
    config: {
        black: '#000000'
    }
    onSetupCallback: () => {
      console.log('Loaded!')
    }
}

Description:

Such configuration will initiate the styling with custom provided theme

Params:

• config
  • The object where the key is the variable to be set and the value is the variable value. Check the themes object to check existing variables
• onSetupCallback
  • The function which will be called right after the variables will be injected into the document element. First parameter of which is the theme object which was set up

Documentation

Visit documentation for detailed info