README
FundConnect UI Library
Installation
npm to install foobar.
1) Use the package managernpm i fundconnect-ui
2) Usage
ES6
package.json
{
"name": "Your project",
"scripts": {
...
"serve": "npm explore fundconnect-ui -- npm run postcss && vue-cli-service serve",
...
},
}
main.js
import fc from '@fundconnect/fundconnect-ui';
...
fc.install(Vue);
router/index.js
the package has basic paths prepared
import fc from '@fundconnect/fundconnect-ui';
...
const routes = [
// Your routes
...fc.defaultsRoutes,
];
store/index.js
import Vue from 'vue';
import Vuex from 'vuex';
import fc from 'fundconnect-ui';
Vue.use(Vuex);
export default function makeStore(initialConfig = {}) {
return new Vuex.Store({
...
modules: {
// Your vuex modules
utilities: fc.utilities(initialConfig),
},
});
}
When You want use prepared FcPage
SampleVueComponent.vue
FcPage is a component made up of smaller elements.
FcPage have prepared two slot:
slot="left-side": place for component installed in left side list under logo
slot="main-content"
<template>
<div id="app">
<fc-page
:logo="logo"
:routes="routes"
:loader="false"
:modal="modal"
@closeModal="methodExecuteAfterClosingModal"
>
<universes-tree slot="left-side" />
<router-view slot="main-content" />
</fc-page>
</div>
</template>
<script>
const modals = [
// Modal templates list,
];
export default {
methods: {
methodExecuteAfterClosingModal() {
console.log('exit');
}
},
data() {
return {
modal: { // sample modal props
modals,
modalVisibility: false,
modalProperties: {
type: 'ModalTypeName',
title: 'Title 1',
},
},
logo: {
src: '*path to image*',
header: 'text 1',
subheader: 'text 2',
},
routes: [ // routes to show in left sidebar
{
name: 'Home',
icon: 'chart-line',
text: 'Home - page',
condition: true,
},
]
};
},
};
</script>