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": "someone@somewhere.co.za", "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.