VCS ui-components
Part of the VC Map Project
A set of UI components based on Vuetify.
Project setup
- Create project with vue cli
- (select sass dart as css-preprocessor (also added by vuetify))
vue add vuetify
npm i -S @vcsuite/ui-components
- Within your vite config add
src/styles/variables.scss
to css
{
css: {
preprocessorOptions: {
sass: {
additionalData: "\n@import './node_modules/@vcsuite/ui-components/src/styles/variables.scss'\n"
}
}
}
}
- For hot reload off changes to variables.scss add to your vite config
{
optimizeDeps: {
exclude: ['@vcsuite/ui-components']
}
server: {
watch: {
ignored: ['!**/node_modules/@vcsuite/ui-components/**']
}
}
}
Styles
This ui components library comes with an individual style on top of vuetify, customized by overwriting styles and extended by own style definitions. The style is defined on three levels following this order:
-
vuetify API, e.g. make use of properties like
dense, outlined
- sass variables
- overwriting vuetify in variables.scss
- defining own variables (e.g. vcsFont.scss
- scoped css within single components
Running & Writing Tests
To run tests use npm run test
, or coverage
for coverage. Tests are run
with vitest
. Use BDD style test definitions.
Working with snapshots
Snapshots are great for testing UI components. But:
- to create a snapshot, simply use
expect(foo).toMatchSnapshot()
and check in the created snapshot file. - do not run your watched tests with
--update
. - be sure to only update snapshots you are actually working on.
- to update a snapshot, run
npm run test -- $FILE_NAME --run --update