mb-eua-components
v1.0.0
Published
``` npm install ```
Readme
MB-EUA-Components
Project setup
npm installCompiles and hot-reloads for development
npm run serveCompiles and minifies for production
npm run buildRun your unit tests
npm run test:unitLints and fixes files
npm run lintCustomize configuration
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|