Mb-eua-components NPM

MB-EUA-Components

Project setup

npm install

Compiles and hot-reloads for development

npm run serve

Compiles and minifies for production

npm run build

Run your unit tests

npm run test:unit

Lints and fixes files

npm run lint

Customize configuration

See Configuration Reference.

Usage

Globally

import Vue from 'vue';
import vuetify from '@/plugins/vuetify';
import 'mb-eua-components/dist/mbComponents.css';
import '@/plugins/father.icon';

Navbar

<template>
  <Navbar
    :navbarItems="navbarItems"
    :locale="locale"
    @navegate-router="navigateRouter($event)"
  />
</template>

<script>
import { Navbar } from 'mb-eua-components';

import navbarBrand from './assets/imgs/navbarLogo.png';
import navbarFlag from './assets/imgs/logo-eua.png';
import routeList from './assets/imgs/navbarIcons/route-list.svg';
import routeOverview from './assets/imgs/navbarIcons/route-overview.svg';
import claim from './assets/imgs/navbarIcons/claim.svg';
import vehicles from './assets/imgs/navbarIcons/vehicles.svg';
import storeInformation from './assets/imgs/navbarIcons/store.svg';
import addressBook from './assets/imgs/navbarIcons/adress-book.svg';
import rushOrders from './assets/imgs/navbarIcons/rush-orders.svg';
import qrCode from './assets/imgs/navbarIcons/qr-code.svg';
import dashboard from './assets/imgs/navbarIcons/dashboard.svg';
import logout from './assets/imgs/navbarIcons/log-out.svg';

export default {
    name: 'App',

  components: {
    Navbar,
  },

  data() {
    return {
      navbarItems: {
        itemsNavbar: [
          {
            label: 'Route List',
            translate: 'message.home.texts.title',
            icon: routeList,
            activeDrawer: true,
            router: '/teste',
          },
          {
            label: 'Route Overview',
            translate: 'message.home.texts.route_overview',
            icon: routeOverview,
            activeDrawer: false,
            router: '/teste',
          },
          {
            label: 'Claim',
            translate: 'message.home.texts.claim',
            icon: claim,
            activeDrawer: false,
            router: '/teste',
          },
          {
            label: 'Vehicles',
            translate: 'message.home.texts.vehicles',
            icon: vehicles,
            activeDrawer: false,
            router: '/teste',
          },
          {
            label: 'Store Information',
            translate: 'message.home.texts.store_information',
            icon: storeInformation,
            activeDrawer: false,
            router: '/teste',
          },
          {
            label: 'Adress Book',
            translate: 'message.home.texts.adress_book',
            icon: addressBook,
            activeDrawer: false,
            router: '/teste',
          },
          {
            label: 'Rush Orders',
            translate: 'message.home.texts.rush_orders',
            icon: rushOrders,
            activeDrawer: false,
            router: '/teste',
          },
          {
            label: 'QR Code',
            translate: 'message.home.texts.qr_code',
            icon: qrCode,
            activeDrawer: false,
            router: '/teste',
          },
          {
            label: 'Dashboard',
            translate: 'message.home.texts.dashboard',
            icon: dashboard,
            activeDrawer: false,
            router: '/teste',
          },
          {
            label: 'Logout',
            translate: 'message.home.texts.logout',
            icon: logout,
            activeDrawer: false,
          },
        ],
        itemsNotification: [
          {
            date: '2022-10-10',
            visualized: true,
            text: 'It’ uncloked! One of the routes is temporarily acessible.',
          },
          {
            date: '2022-10-10',
            visualized: false,
            text: 'Easily generate perfect documentation for your routes with this new system.',
          },
        ],
        itemsProfile: [
          {
            icon: 'mdi-account-circle-outline',
            text: 'My Profile',
            translate: 'message.home.texts.my_profile',
            color: '#002F65',
          },
          {
            icon: 'mdi-logout',
            translate: 'message.home.texts.logout',
            text: 'Log out',
            color: '#C64252',
          },
        ],
        itemsSelect: [
          { key: 0, value: 'DC ARIZONA' },
          { key: 1, value: 'DC TUCSON' },
          { key: 2, value: 'DC Prescott Valley' },
          { key: 3, value: 'DC Wickenburg' },
          { key: 4, value: 'DC ARIZONA' },
          { key: 5, value: 'DC ARIZONA' },
          { key: 6, value: 'DC ARIZONA' },
          { key: 7, value: 'DC ARIZONA' },
        ],
        profile: 'DC PHOENIX',
        logoNavbar: navbarBrand,
        flagNavbar: navbarFlag,
      },
      locale: 'pt-BR',
    };
  },

  methods: {
    navigateRouter($event) {
      if ($event.icon === 'log-out.svg') {
        this.$cookie.delete('tokenAuth');
        window.location.replace(`${process.env.VUE_APP_BASE_PATH}login`);
      } else {
        /* eslint-disable */
        if ($event.router !== this.$router.currentRoute.path) {
          this.$router.push($event.router);
        }
        /* eslint-enable */
      }
    },
  },
};
</script>

CustomFilter

<template>
  <CustomFilter
    :customFilterItems="customFilterItems"
    :locale="locale"
    :drawer="drawerFilter"
    @filters="filters($event)"
    @clear="clearFilter($event)"
    @closeFilter="closeFilter()"
  />
</template>

<script>
import { CustomFilter } from 'mb-eua-components';

export default {
  name: 'App',

  components: {
    CustomFilter,
  },

  data() {
    return {
      locale: 'pt-BR',
      customFilterItems: {
        itemClaims: [
          {
            value: 'Delay deliveries',
            translate: 'Delay deliveries',
            code: 0,
          },
          {
            value: 'Critical item discrepancy',
            translate: 'Critical item discrepancy',
            code: 1,
          },
          {
            value: 'Non-critical item discrepancy',
            translate: 'Non-critical item discrepancy',
            code: 2,
          },
          {
            value: 'Temperature issue',
            translate: 'Temperature issue',
            code: 3,
          },
          {
            value: 'No warning',
            translate: 'No warning',
            code: 4,
          },
        ],
        itemDelivery: [
          {
            value: 'Loading in Progress',
            translate: 'Loading in Progress',
            code: 5,
          },
          {
            value: 'Route Loaded',
            translate: 'Route Loaded',
            code: 6,
          },
          {
            value: 'In Progress',
            translate: 'In Progress',
            code: 7,
          },
          {
            value: 'Route Finished',
            translate: 'Route Finished',
            code: 8,
          },
          {
            value: 'Route Canceled',
            translate: 'Route Canceled',
            code: 9,
          },
        ],
        datePickerEnd: {
          label: 'End rout list',
          weekOnly: false,
          nowDate: false,
          disabled: false,
          readonly: false,
          locale: 'pt-BR',
          customClass: 'datepickerFilterEua',
        },
        datePickerBeginning: {
          label: 'Beginning route list',
          weekOnly: false,
          nowDate: false,
          disabled: false,
          readonly: false,
          locale: 'pt-BR',
          customClass: 'datepickerFilterEua',
        },
        customFilter: {
          header: 'Hide filters',
          formPrimary: 'Claims',
          formSecundary: 'Delivery Status',
          primaryText: 'Search the route list data range',
        },
      },
      drawerFilter: true,
    };
  },

  methods: {
    filters($event) {
      console.log($event);
    },

    clearFilter($event) {
      console.log($event);
    },

    closeFilter() {
      console.log('close filter');
    },
  },
};
</script>

CustomSearch

<template>
  <CustomSearch
    @search-enter="onSearch($event)"
    @search-blur="onSearch($event)"
    :label="'Search'"
  />
</template>

<script>
import { CustomSearch } from 'mb-eua-components';

export default {
  name: 'App',

  components: {
    CustomSearch,
  },

  data() {
    return {      
    };
  },

  methods: {
    onSearch($event) {
      console.log($event);
    },
  },
};
</script>

CustomDataTables

<template>
  <CustomDataTables
    :headers="headers"
    :items="items"
    :pagination="pagination"
    :loading="loadingTable"
    :locale="locale"
  />
</template>

<script>
import { CustomDataTables } from 'mb-eua-components';

export default {
  name: 'App',

  components: {
    CustomDataTables,
  },

  data() {
    return {  
      headers: [
        {
          text: 'Route nº',
          align: 'start',
          value: 'route',
        },
        {
          text: 'Progress',
          value: 'progress',
          sortable: false,
        },
        {
          text: 'Started',
          value: 'started',
        },
        {
          text: 'Finished',
          value: 'finished',
        },
        {
          text: 'Driver/Vehicle',
          value: 'driver',
        },
        {
          text: 'Status',
          value: 'status',
        },
        {
          text: 'Warning',
          value: 'warning',
        },
        {
          text: '',
          value: 'actions',
          sortable: false,
        },
      ],  
      pagination: {
        itemsPerPage: 5,
        page: 1,
        totalPages: 4,
        totalItems: 16,
        ofTranslate: 'of',
        itensPerPageTranslate: 'Itens per page',
        itemsTramslate: 'items',
      },
      loadingTable: false,
      locale: 'pt-BR',  
      items: [
        {
          route: 243,
          progressDetail: false,
          progressDetailContent: [
            {
              label: 'Start',
              concluded: true,
              active: false,
              icon: 'mdi-truck-outline',
              finished: '2019-06-10 06:20:00',
            },
            {
              label: 'MCDONALDS 3736',
              concluded: true,
              active: false,
              icon: 'mdi-store',
              finished: '2019-06-10 06:20:00',
            },
            {
              label: 'MCDONALDS 1836',
              concluded: false,
              active: true,
              icon: 'mdi-store',
              finished: '',
            },
            {
              label: 'MCDONALDS 1234',
              concluded: false,
              active: false,
              icon: 'mdi-store',
              finished: '',
            },
            {
              label: 'MCDONALDS 8364',
              concluded: false,
              active: false,
              icon: 'mdi-store',
              finished: '',
            },
            {
              label: 'MCDONALDS 3452',
              concluded: false,
              active: false,
              icon: 'mdi-store',
              finished: '',
            },
            {
              label: 'Done',
              concluded: false,
              active: false,
              icon: 'mdi-checkbox-marked-circle-outline',
              finished: '',
            },
          ],
          started: '2019-06-10 06:20:00',
          finished: '',
          driver: [
            { driver: 'Phoenix test 12', vehicle: '999' },
          ],
          status: 'In progress',
          warning: [
            { label: 'No warning', color: '#7281a8' },
          ],
          actions: [
            {
              type: 'menuType',
              itemsMenu: [
                {
                  label: 'Stop Detalis',
                  id: 1,
                  icon: 'mdi-truck-outline',
                  trigger: 'stop-detalis',
                  color: '#002F65',
                },
                {
                  label: 'Route Detail',
                  id: 2,
                  icon: 'mdi-map-outline',
                  trigger: 'route-detail',
                  color: '#002F65',
                },
                {
                  label: 'Vehicle checklist',
                  id: 3,
                  icon: 'mdi-clipboard-outline',
                  trigger: 'vehicle-checklist',
                  color: '#002F65',
                },
              ],
            },
          ],
        },
      ]
    };
  },

  methods: {
    onSearch($event) {
      console.log($event);
    },
  },
};
</script>

DropNotification

<template>
  <DropNotification
    :itemsNotification="itemsNotification"
    :locale="locale"
  />
</template>

<script>
import { DropNotification } from 'mb-eua-components';

export default {
  name: 'App',

  components: {
    DropNotification,
  },

  data() {
    return {  
      locale="pt-BR"
      itemsNotification: [
        {
          date: '2022-10-10',
          visualized: true,
          text: 'It’ uncloked! One of the routes is temporarily acessible.',
        },
        {
          date: '2022-10-10',
          visualized: false,
          text: 'Easily generate perfect documentation for your routes with this new system.',
        },
      ],    
    };
  },
};
</script>

DropProfile

<template>
  <DropProfile
    :itemsProfile="itemsProfile"
    :itemsSelect="itemsSelect"
    :profile="profile"
  />
</template>

<script>
import { DropProfile } from 'mb-eua-components';

export default {
  name: 'App',

  components: {
    DropProfile,
  },

  data() {
    return {  
      itemsProfile: [
        {
          icon: 'mdi-account-circle-outline',
          text: 'My Profile',
          translate: 'message.home.texts.my_profile',
          color: '#002F65',
        },
        {
          icon: 'mdi-logout',
          translate: 'message.home.texts.logout',
          text: 'Log out',
          color: '#C64252',
        },
      ],
      itemsSelect: [
        { key: 0, value: 'DC ARIZONA' },
        { key: 1, value: 'DC TUCSON' },
        { key: 2, value: 'DC Prescott Valley' },
        { key: 3, value: 'DC Wickenburg' },
        { key: 4, value: 'DC ARIZONA' },
        { key: 5, value: 'DC ARIZONA' },
        { key: 6, value: 'DC ARIZONA' },
        { key: 7, value: 'DC ARIZONA' },
      ],
      profile: 'DC PHOENIX',
    };
  },
};
</script>

CustomProgress

<template>
  <CustomProgress
    :items="progressDetailContent"
    :miniProgress="false"
  />
</template>

<script>
import { CustomProgress } from 'mb-eua-components';

export default {
  name: 'App',

  components: {
    CustomProgress,
  },

  data() {
    return {  
      progressDetailContent: [
        {
          label: 'Start',
          concluded: true,
          active: false,
          icon: 'mdi-truck-outline',
          finished: '2019-06-10 06:20:00',
        },
        {
          label: 'MCDONALDS 3452',
          concluded: false,
          active: true,
          icon: 'mdi-store',
          finished: '',
        },
        {
          label: 'MCDONALDS 3455',
          concluded: false,
          active: false,
          icon: 'mdi-store',
          finished: '',
        },
        {
          label: 'Done',
          concluded: false,
          active: false,
          icon: 'mdi-checkbox-marked-circle-outline',
          finished: '',
        },
      ],
    },
  },
};
</script>

SkeletonLoader

<template>
  <SkeletonLoader
    :skeletonLoader="skeletonLoader"
    :loader="true"
  />
</template>

<script>
import { SkeletonLoader } from 'mb-eua-components';

export default {
  name: 'App',

  components: {
    SkeletonLoader,
  },

  data() {
    return {  
      skeletonLoader: [
        {
          loaders: 'list-item-avatar',
          columns: '5',
        },
        {
          loaders: 'table-heading, divider, list-item-two-line, image, table-tfoot',
          columns: '12',
        },
      ],
    },
  },
};
</script>

Props

Props	Description	Required	Type	Default
itemsNotification	notification items	true	Array	[]
locale	locale	true	String	'pt-BR'
itemsProfile	items profile	true	Array	[]
itemsSelect	items select profile	true	Array	[]
profile	Name profile	true	String	'DC PHOENIX'
items	Navbar items	true	Array	[]
navbarBrand	brand header	true	String	''
navbarFlag	flag header	true	String	''
headers	headers table	true	Array	[]
pagination	items pagination	true	Object	{}
loading	loading table	true	Boolean	false
datePicker	items datepicker	true	Object	{}
customFilterItems	items datepicker	true	Object	{}
drawer	open filter	true	Boolean	false
miniProgress	min progress	true	Boolean	false
skeletonLoader	type loader	true	Array	[]
loader		true	Boolean	false