kmh-common-components

A pack of frontend vue components based on VueMaterial and css grid.

• kmh-navigation-drawer
• kmh-infobox
• kmh-infopanel
• kmh-sidebar
• kmh-cart-popup-content

Tech

kmh-common-components uses only VueMaterial material design library as dependency:

• VueMaterial - material design for vue.js

Demo

To start demo app simply run

npm install
npm run serve

or

yarn
yarn serve

Usage

Installation

Install the dependencies.

$ npm i vue-material

$ yarn add vue-material

Install components

$ npm i kmh-common-components

$ yarn add kmh-common-components

Use components

import kmhCommonComponents from 'kmh-common-components';
import 'kmh-common-components/dist/kmh-common-components.css';

Vue.use(kmhCommonComponents);

Components settings

Our components pack uses predefined css grid style.

1. NavigationDrawer - first bar on the left
2. Infobox - 2nd from left
3. Infopanel - 3rd from left (optional)
4. Sidebar - slides in/out from right, as top layer in app
5. CartPopupContent - Content component from inside the cart popup for use outside a popup

Optional you can use your own toolbar component as horizontal header i.e.:

.main-header {
    grid-row: 1
    grid-column: 1 / 5
    height: 50px
    background: #dedede
}

An full example of the use of this components is given in die Demo.

NavigationDrawer

Used as main navigation vertical bar.

• in template

<kmh-navigation-drawer
  :items="navItems"
  :settingsItems="settingsItems"
  @list-item-changed="listItemChanged"
  @delete-cart-item="deleteCartItem"
  @edit-cart-item="editCartItem"
/>

• to configure navigationItems in NavigationDrawer pass as property an Array of Objects i.e.

 {
    icon: 'people', //material icon name
    action: this.dummy,
    actionArgs: ['first argument', 9999],
    disabled: false
 }

• you can pass also settingsItems, to show buttons at the bottom of NavigationDrawer

NavigationItems & SettingsItems Props

|property name|description|type|example| |-------|-----|------|----| |icon|icon to show|String| 'people' |active|set css style to active|Boolean|true/false |disabled|disables item|Boolean|true/false |action|callback to fire on menu item click|Function| |actionArgs|arguments which will be passed to action callback|Array|[1,'test'] |submenuItems|if not null, on click submenu will be shown|Object|see below |listItems|if not null, on click popup Checklist will be shown|Object|see below |cartItems|if not null, on click popup Cart will be shown|Object|see below

SettingsItems (only) Props

|property name|description|type|example| |-------|-----|------|----| |content|only used to pass i.e. initials for settingsItem, with combination icon: null, will be show as rounded button|String| 'PT'

submenuItem Object

 { icon: 'people', title: 'submenu name', action: this.dummy, actionArgs: ['first argument', 9999] }

listItem Object

{
    title: 'another list',
    items: [
      { title: 'test first title', done: false },
      { title: 'totedo 2nd title long description', done: true }
    ]
 }

cartItem Object

{
    icon: 'shopping_cart',
    title: 'Warenkorb',
    actions: {
      showButtons: true,
      activeOnTab: 1,
      buttons: [
        { name: 'Gesprächsaufzeichnung', action: this.cartActionButton }
      ]
    },
    categories: [
      'Energie',
      'Zusatzangebote'
    ],
    finalProducts: [],
    notFinalProducts: [],
    notFinalProducts: [],
    unvalidatedProducts: [],
    additionalOffers: []
}

In cartItem you have to pass four properties as arrays of objects

1. finalProducts: [],
2. notFinalProducts: [],
3. additionalOffers: [],
4. unvalidatedProducts: []

finalProducts, notFinalProducts & unvalidatedProducts objects structure

{
    'contractNumber': '999999',
    'contractType': 'strom',
    'isFinal': true,
    'isSaved': true,
    'isValidated': true,
    'voiceFileRequired': true,
    'shippingAddress': {
      'address': {
        'streetName': 'Bonnstraße',
        'houseNumber': 999,
        'zip': 54125,
        'city': 'köln',
        'district': 'Köln süd'
      },
      'predefinedAddress': null,
      'status': null
    },
    'tariff': {
      'selectedProduct': {
        'tariff': 'Strom Zuhause+ (24 Monate)',
        'bonus': '50,00€'
      },
      'bonus': {},
      'usage': '5000',
      'info': {
        'bonus': '50,0€',
        'tariff': {
          'tariff': 'Strom+ (24 Monate)'
        }
      },
      'status': null
    },
    'specialPromotions': {
      'list': [],
      'selected': [],
      'info': null,
      'status': null
    },
    'additionalOffers': {
      'list': [],
      'selected': [],
      'status': null
    },
    'customerData': {
      'customer': {
        'salutation': '',
        'firstName': '',
        'lastName': '',
        'dateOfBirth': null,
        'company': null,
        'identicalAddress': false,
        'iban': 'DE12 3456 7890 0987 6543 21',
        'bic': '',
        'bank': '',
        'contactInformation': {
          'emailAddress': ''
        },
        'phone': '01574654132',
        'counterNumber': '123456',
        'startOfDelivery': '02.02.2018',
        'preSupplier': 'XXX AG',
        'phoneNumber': '01574654132'
      },
      'invoiceAddress': {
        'address': {
          'streetName': 'Südstraße',
          'houseNumber': 21,
          'zip': 15120,
          'city': 'Berlin',
          'district': 'Süd'
        },
        'predefinedAddress': null
      },
      'status': null
    }
}

additionalOffers object structure

    { title: 'offer 1: very good' }

Events

|event name|description| |-------|-----| |listItemChanged|called if Checklist item clicked |deleteCartItem|called if Cart item deleted |editCartItem|called if Cart item edited

Infobox

Used as infobox with customer info. You can also pass your own content adding it to and setting showMainContent to false. If not, there will be shown predefined component with customer personal info & comments & optional infos.

To use predefined component you have to pass mainContent object.

• in template

    <kmh-infobox
      v-if="showInfoBox"
      :titles="infoBoxTitles"
      :opened.sync="infoBoxOpened"
      :main-content="infoBoxContent"
      :show-main-content="true"
      @visibility-changed="infoboxVisibilitySet"
      @comment-added="addNewComment"
      @comment-changed="getNewValueOfComment"
    >
      <div slot="info">
        <div class="padding">
          test without main content
        </div>
      </div>
    </kmh-infobox>

Props

|property name|description|type|example| |-------|-----|------|----| |titles|pass title of pane in opened state and in closed (vertical title(in predefined content) or close title(in own content))|Object| { titleOpen: 'subpanel title', titleClosed: 'subpanel closed', titleVertical: 'title vertical' } |opened|shows/hides pane|Boolean|true/false |mainContent|predefined content data|Object|see below |showMainContent|show predefined content or your own content if false|Boolean|true/false

mainContent object

|property name|description|type| |-------|-----|-----| |id||Number| |personal|customer infos|Object| |actionButton|icon and callback for action|Function| |others|array of objects { title: 'contact', items: [{ name: 'phone', value: '123123']} to show below personal infos|Array| |comments|at bottom you can show comments for selected customer, check example below|Array| |infos|data from infos will be rendered as cards with optional CTA callback passed to component, check example below|Array|

mainContent object example

    {
        id: 234343,
        personal: {
          salutation: 'Herr',
          firstName: 'Peter',
          lastName: 'Pan',
          dateOfBirth: '28.03.1954',
          age: '54'
        },
        actionButton: {
          action: this.openSideBar,
          icon: 'edit'
        },
        others: [
          {
            title: 'Kundennummer',
            items: [{ name: '', value: '479340953' }]
          },
          {
            title: 'Addresse',
            items: [
              { name: '', value: 'Newstreet 34a' },
              { name: '', value: '45357 Essen' }
            ]
          },
          {
            title: 'Phone',
            items: [
              { name: '', value: '0049 34534 32342343' },
              { name: '', value: '0049 112 9976666' }
            ]
          },
          {
            title: 'Mail',
            items: [
              { name: 'privat', value: '[email protected]' },
              { name: 'geschäftlich', value: '[email protected]' }
            ]
          }
        ],
        comments: {
          isSaveButtonVisible: false,
          placeholder: 'Add new comment',
          tabs: [
            {
              label: 'Kampagne',
              entries: [
                {
                  author: 'Agent Tom',
                  campaign: 'Secret service',
                  created: '16.03.2018 19:34 Uhr',
                  text: 'Secret comment for user X.'
                },
                {
                  author: 'Agent Eva',
                  campaign: 'Winter Campaign',
                  created: '16.12.2017 22:22 Uhr',
                  text: 'Winter is comming.'
                }
              ]
            },
            {
              label: 'Alle',
              entries: [
                {
                  author: 'Agent Tom',
                  campaign: 'Secret service',
                  created: '16.03.2018 19:34 Uhr',
                  text: 'Secret comment for user X.'
                },
                {
                  author: 'Agent Bomba',
                  campaign: 'Campaign SSdfsdf',
                  created: '23.03.2018 14:34 Uhr',
                  text: 'Bomba & co.'
                }
              ]
            }
          ]
        },
        infos: [
          {
            icon: 'star',
            header: 'NBA (3534535435345)',
            text: 'Neuvertrag FN/BB',
            action: this.dummyAction
          },
          {
            icon: 'highlight',
            header: 'NBQ (3534535435345)',
            text: 'Opt-in einholen'
          }
        ]
      }

Events

|event name|description| |-------|-----| |visibilityChanged|fired if pane collapsed/showed |commentAdded|fired if new comment saved |commentChanged|fired if comment was changed/edited

Infopanel (optional)

Used as infobox with additional info

    <kmh-infopanel-optional
      :opened.sync="infoPanelOpened"
      :titles="infoPanelTitles"
      @visibility-changed="infopanelVisibilitySet"
    >
      <div>
        test subpanel optional
      </div>
    </kmh-infopanel-optional>

Props

|property name|description|type|example| |-------|-----|------|----| |titles|pass title of pane in opened state and in closed (vertical title)|Object| { titleOpen: 'subpanel title', titleClosed: 'subpanel closed' } |opened|shows/hides pane|Boolean|true/false

Events

|event name|description| |-------|-----| |visibilityChanged|fired if pane collapsed/showed

Sidebar

Used as placeholder for additional components. You have to pass to sidebar component: path, type (name) and data for component you are injecting into.

• in template

    <kmh-sidebar
      :sidebar.sync="sidebarPayload"
    >
      <div>
        My sidebar content
      </div>
    </kmh-sidebar>

• payload example

    {
      show: false, //for toggling the sidebar
      closing: false, //default false; will only be used for the fading out animation
      blocked: false, //if true, then closing the sidebar is disabled
      title: '',
      props: {} // custom propertys
    }

Sidebar Props

|property name|description|type| |-------|-----|------| |sidebar|sidebar payload. See the example above|Object|

Cart Popup Content

The Content from CartPopup inside the kmh-navigation-drawer component can be used as a single component outside an popup

• in template

    <kmh-cart-popup-content
      :mini="true" // Default false
      :items="cartObject"
      @editCartItem="editCartItem"
      @deleteCartItem="deleteCartItem" />

Props

|property name|description|type| |-------|-----|------| |mini|Mini-Verison of the cart content (without tabs & actions). There will be shown only the unvalidated cart items|Boolean| |items|cart settings. It needs the same CartObject as in the NavigationObject, but without icon, title and actions. Example|Object|

Events

|event name|description| |-------|-----| |deleteCartItem|called if Cart item deleted |editCartItem|called if Cart item edited

Todos

• Write MORE Tests
• Expand documentation