fundconnect-ui

FundConnect UI Library

Installation

1) Use the package manager npm to install foobar.

npm 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>