The RAM Frontend Vue Component Library

See the wiki for more details

This library contains all the "smart" components to be used in the Vue frontend.

Styling is based on Vuetify and the Vuely theme.

The components will accept a "user" prop, in conjuction with other component specific props. This will enable the component to be smart about the permissions allocated to the user.

It will also enable the components to be fully reusable throughout the various frontend applications.

Sample

There is a sample component included called src/SampleComponent.vue that can be used as a reference.

Using The Package

Install the package into a vue project by using: npm install --save ram.vue.components.lib You can view the package page over here

Building The New Package Version

After creating a new component, or editing an existing one, be sure to:

• Register it in ./src/index.js - Only if it is a new component
• Update the version number in package.json as per Semantic versioning
• Commit your changes and do a pull request to 'master' branch
• Once reviewed and no comments that require additional work then continue with the following two points
• When the branch is merged into master then the package will be built and published to NPM

Best Practice

Keep only the required logic as needed and no more Components should not make any API calls or modify the state in anyway Any data the component requires for rendering, validation, or computation should be passed in as 'props' The component should be reactive and '$emit' all events required to the parent component

User object

The components require the user object to be defined in an object with a structure similar to this: { "UserID": 432, "UserEmail": "[email protected]", "FirstName": "Someone", "LastName": "Doe", ... "Permissions": [ { "ID": 123, "CanCreate": false, "CanEdit": true }, { "ID": 25, "CanCreate": false, "CanEdit": false }, { "ID": 567, "CanCreate": true, "CanEdit": true } ] }

This user object should be stored in the Vuex state store and passed in as a prop to each component.