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

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.

NavigationDrawer - first bar on the left
Infobox - 2nd from left
Infopanel - 3rd from left (optional)
Sidebar - slides in/out from right, as top layer in app
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

finalProducts: [],
notFinalProducts: [],
additionalOffers: [],
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: 'peter@pan.de' },
              { name: 'geschäftlich', value: 'pp@wonderland.com' }
            ]
          }
        ],
        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

kmh-common-components

kmh-common-components

Tech

Demo

Usage

Installation

Use components

Components settings

NavigationDrawer

NavigationItems & SettingsItems Props

SettingsItems (only) Props

submenuItem Object

listItem Object

cartItem Object

Events

Infobox

Props

mainContent object

Events

Infopanel (optional)

Props

Events

Sidebar

Sidebar Props

Cart Popup Content

Props

Events

Todos

Readme

Keywords

Package Sidebar

Install

Weekly Downloads

Version

License

Unpacked Size

Total Files

Last publish

Collaborators

kmh-common-components

kmh-common-components

Tech

Demo

Usage

Installation

Use components

Components settings

NavigationDrawer

NavigationItems & SettingsItems Props

SettingsItems (only) Props

submenuItem Object

listItem Object

cartItem Object

Events

Infobox

Props

mainContent object

Events

Infopanel (optional)

Props

Events

Sidebar

Sidebar Props

Cart Popup Content

Props

Events

Todos

Readme

Keywords

Package Sidebar

Install

DownloadsWeekly Downloads

Version

License

Unpacked Size

Total Files

Last publish

Collaborators

Weekly Downloads