mb-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-components-vue/dist/mbComponents.css';
import '@/plugins/father.icon';
CustomBadge
<template>
<CustomBadge
:itemsBadge="itemsBadge"
/>
</template>
<script>
import { CustomBadge } from 'mb-components-vue';
import badgeImage from '../assets/imgs/icons/note.svg';
export default {
name: 'App',
components: {
CustomBadge,
},
data() {
return {
itemsBadge: {
imageBadge: badgeImage,
badgeIcon: 'R',
iconWidth: 18,
color: 'primary',
},
},
},
};
</script>CustomChat
<template>
<CustomChat
:itemsChat="itemsChat"
:sendMensage="true"
@close-chat="closeChat()"
@submit-chat="submitChat($event)"
/>
</template>
<script>
import { CustomChat } from 'mb-components-vue';
import chatIcon from '../assets/imgs/chat-icon.svg';
export default {
name: 'App',
components: {
CustomChat,
},
data() {
return {
itemsChat: {
dialogChat: true,
chatName: 'Martin',
chatStatus: 'Online',
chatMessage: `
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit
</p>
<p>
Nulla enim leo, elementum vitae ultricies in,
tincidunt id velit. Sed auctor purus vel faucibus dignissim.
Curabitur sed molestie est, ut venenatis ex
</p>
`,
iconChat: chatIcon,
loadingChat: false,
primaryButton: 'Ir para o pedido',
primaryTrigger: 'submit-chat',
secundaryButton: 'Continuar editando',
secundaryTrigger: 'close-chat',
},
};
},
methods: {
closeChat() {
this.itemsChat.dialogChat = false;
},
submitChat($event) {
console.log($event);
},
},
};
</script>CustomDataTables
<template>
<CustomDataTables
:headers="headers"
:items="items"
:pagination="pagination"
:order="{
sortBy: 'user',
sortDesc: false,
}"
@user-active="userActive($event)"
@simulate-access="simulateAcess($event)"
@edit-user="userEdit($event)"
@edit-store="editStore($event)"
/>
</template>
<script>
import { CustomDataTables } from 'mb-components-vue';
export default {
name: 'App',
components: {
CustomDataTables,
},
data() {
return {
headers: [
{
text: 'Usuário',
align: 'start',
value: 'login',
sortable: true,
},
{
text: 'Rede',
value: 'brands',
sortable: false,
},
{
text: 'Cargo',
value: 'position',
sortable: true,
},
{
text: 'E-mail',
value: 'email',
sortable: true,
},
{
text: 'Status',
value: 'enabled',
sortable: true,
},
{
text: 'Ações',
value: 'actions',
sortable: false,
},
],
items: [
{
login: 'App Code',
id: 1,
brands: [
{
description: 'Administrador',
fields: [],
homePage: '/mbbr/wop',
icon: 'image',
id: 2,
readOnly: false,
},
],
position: 'Gerente',
email: 'teste@tes.com',
enabled: false,
actions: [
{
type: 'iconType',
itemsActions: [
{
icon: 'edit-icon',
trigger: 'edit-store',
color: '#C14444',
disabled: false,
},
],
},
],
},
{
login: 'App Code',
id: 2,
brands: [
{
description: 'Administrador',
fields: [],
homePage: '/mbbr/wop',
icon: 'image',
id: 2,
readOnly: false,
},
],
position: 'Gerente',
email: 'teste@tes.com',
enabled: false,
actions: [
{
type: 'menuType',
itemsMenu: [
{
label: 'Ativar usuário',
id: 1,
icon: 'unlock-icon',
trigger: 'user-active',
color: 'primary',
},
{
label: 'Simular acesso',
id: 2,
icon: 'users-icon',
trigger: 'simulate-access',
color: 'primary',
},
{
label: 'Editar usuário',
id: 3,
icon: 'edit-icon',
trigger: 'edit-user',
color: 'primary',
},
],
},
],
},
],
pagination: {
itemsPerPage: 25,
page: 1,
totalPages: 100,
},
};
},
methods: {
userActive($event) {
console.log($event, 'ativar usuario');
/* eslint-disable */
this.items = this.items.map((item) => {
if (item.id === $event.id) {
item.enabled = !item.enabled;
item.actions[0].itemsMenu[0].label = !item.enabled ? 'Ativar Usuário' : 'Desativar Usuário'
item.actions[0].itemsMenu[0].icon = !item.enabled ? 'unlock-icon' : 'lock-icon'
}
return item;
});
/* eslint-enable */
},
simulateAcess($event) {
console.log($event, 'simular acesso');
},
userEdit($event) {
console.log($event, 'editar usuario');
},
editStore($event) {
console.log($event, 'editar loja');
},
},
};
</script>CustomDataTableLoop
<template>
<CustomDataTableLoop
:headers="headersTable"
:pagination="pagination"
:all="all"
@change-table="controlGet($event)"
@on-change-input-value="onChangeInputValue($event)"
@select-item="selectItem($event)"
/>
</template>
<script>
import moment from 'moment';
import { CustomDataTableLoop } from 'mb-components-vue';
export default {
name: 'App',
components: {
CustomDataTableLoop,
},
data() {
return {
moment,
all: [],
headersTable: [
{
sortable: false,
value: 'titleItem',
text: 'Congelados',
},
{
sortable: false,
value: 'updateItem',
text: 'Atualizado em',
date: moment(this.formatDate(new Date())).format('DD/MM'),
symbol: '+',
},
{
sortable: false,
value: 'deliveryItem',
text: 'Entrega até',
date: moment(this.formatDate(new Date())).format('DD/MM'),
symbol: '-',
},
{
sortable: false,
value: 'consumptionItem',
text: 'Consumo até',
date: moment(this.formatDate(new Date())).format('DD/MM'),
symbol: '=',
},
{
sortable: false,
value: 'orderItem',
text: 'Seu Pedido',
},
{
sortable: false,
value: 'limit',
},
{
value: 'order',
sortable: false,
},
],
tableItems: [
{
titleItem: {
title: 'Bacon em tiras MB',
character: '●',
description: 'Master 02',
unity: '100 UN',
item: {
id: 1,
code: 10,
descr: 'descr',
useUnitDescr: 100,
useUnitQty: 200,
enabled: true,
},
},
updateItem: {
title: 'Estoque Atual',
description: 1100,
},
deliveryItem: {
title: 'Recebimento',
description: 2200,
},
consumptionItem: {
title: 'Necessidade',
description: 8800,
},
orderItem: {
counter: 0,
locale: {
decimal: ',',
thousands: '.',
prefix: '',
suffix: '',
precision: 2,
},
percentage: 200,
disabled: false,
haveLimit: {
have: true,
sortable: false,
value: 999,
},
id: 1,
total: 3,
},
limit: {
title: 'Limite',
value: 0,
},
order: {
title: 'Alerta',
value: 0,
},
originalItem: {},
},
];,
tableItems2: [
{
titleItem: {
title: 'Bacon em tiras MB',
character: '●',
description: 'Master 02',
unity: '100 UN',
item: {
id: 2,
code: 10,
descr: 'descr',
useUnitDescr: 100,
useUnitQty: 200,
enabled: true,
},
},
updateItem: {
title: 'Estoque Atual',
description: 1100,
},
deliveryItem: {
title: 'Recebimento',
description: 2200,
},
consumptionItem: {
title: 'Necessidade',
description: 8800,
},
orderItem: {
counter: 0,
locale: {
decimal: ',',
thousands: '.',
prefix: '',
suffix: '',
precision: 2,
},
percentage: 0,
disabled: false,
haveLimit: {
have: true,
sortable: false,
value: 999,
},
id: 2,
total: 3,
},
limit: {
title: 'Limite',
value: 0,
},
order: {
title: 'Alerta',
value: 0,
},
originalItem: {},
},
{
titleItem: {
title: 'Bacon em tiras MB',
character: '●',
description: 'Master 02',
unity: '100 UN',
item: {
id: 3,
code: 10,
descr: 'descr',
useUnitDescr: 100,
useUnitQty: 200,
enabled: true,
},
},
updateItem: {
title: 'Estoque Atual',
description: 1100,
},
deliveryItem: {
title: 'Recebimento',
description: 2200,
},
consumptionItem: {
title: 'Necessidade',
description: 8800,
},
orderItem: {
counter: 0,
locale: {
decimal: ',',
thousands: '.',
prefix: '',
suffix: '',
precision: 2,
},
percentage: 0,
disabled: false,
haveLimit: {
have: true,
sortable: false,
value: 999,
},
id: 3,
total: 3,
},
limit: {
title: 'Limite',
value: 0,
},
order: {
title: 'Alerta',
value: 0,
},
originalItem: {},
},
];,
pagination: {
itemsPerPage: 25,
page: 1,
totalPages: 100,
},
};
},
mounted() {
this.all = [
{
headers: this.headersTable,
items: this.tableItems,
},
{
headers: this.headersTable,
items: this.tableItems2,
},
];
console.log(this.all);
},
methods: {
formatDate(date) {
return date.toString().replace(/(\d{4})(\d{2})(\d{2})/, '$1-$2-$3');
},
onChangeInputValue($event) {
console.log($event, 'InputValue');
},
controlGet() {
// console.log($event);
},
selectItem($event) {
console.log($event, 'selectItem');
},
},
};
</script>CustomDatePicker
<template>
<v-row>
<v-col>
<p>Default</p>
<CustomDatePicker
:datePicker="calendarPicker"
@frmat="frmat($event)"
@onChangeDate="onChangeDate($event)"
@onChangeDateInput="onChangeDate($event)"
/>
</v-col>
<v-col>
<p>Block Dates and Weekend</p>
<CustomDatePicker
:datePicker="calendarPicker1"
@frmat="frmat($event)"
@onChangeDate="onChangeDate($event)"
@onChangeDateInput="onChangeDate($event)"
/>
</v-col>
<v-col>
<p>Disabled</p>
<CustomDatePicker
:datePicker="calendarPicker2"
@frmat="frmat($event)"
@onChangeDate="onChangeDate($event)"
@onChangeDateInput="onChangeDate($event)"
/>
</v-col>
</v-row>
</template>
<script>
import moment from 'moment';
import { CustomDatePicker } from 'mb-components-vue';
export default {
name: 'App',
components: {
CustomDatePicker,
},
data() {
return {
moment,
calendarPicker: {
show: false,
value: moment(new Date()).format('YYYY-MM-DD'),
formatSettings: {
customClass: 'datepickerWop',
firstDay: 1,
weekOnly: false,
nowDate: false,
disabled: false,
readonly: false,
locale: 'en',
formatDate: 'YYYY-MM-DD',
mask: '####-##-##',
},
},
calendarPicker1: {
show: false,
value: moment(new Date()).format('YYYY-MM-DD'),
formatSettings: {
customClass: '',
firstDay: 0,
weekOnly: true,
nowDate: true,
disabled: false,
readonly: false,
locale: 'pt-BR',
formatDate: 'DD/MM/YYYY',
mask: '##/##/####',
},
},
calendarPicker2: {
show: false,
value: moment(new Date()).format('YYYY-MM-DD'),
formatSettings: {
customClass: '',
firstDay: 0,
weekOnly: false,
nowDate: false,
disabled: true,
readonly: true,
locale: 'pt-BR',
formatDate: 'DD/MM/YYYY',
mask: '##/##/####',
},
},
};
},
methods: {
frmat($event) {
console.log({
value: $event,
calendarPicker: this.calendarPicker,
});
},
onChangeDate($event) {
console.log($event);
},
},
};
</script>CustomFilter
<template>
<CustomFilter
:filters="customFilters"
:countFilters="countFilters"
:customWidth="'100%'"
:customHeight="''"
:searchLoader="{
type: 'clear',
model: false,
}"
@select-filter="onSelectFilter($event)"
@clear-filters="onClearFilters()"
@submit="onSubmitFilters($event)"
@search-enter="onSearch($event)"
@search-blur="onSearch($event)"
/>
</template>
<script>
import { CustomFilter } from 'mb-components-vue';
export default {
name: 'App',
components: {
CustomFilter,
},
data() {
return {
customFilters: [
{
type: 'und',
value: false,
label: 'Visualizar por unidade',
}, {
type: 'alert',
value: false,
label: 'Alertas',
}, {
type: 'limit',
value: false,
label: 'Limite',
}, {
type: 'stock',
value: false,
label: 'Ruptura de estoque',
}, {
type: 'planning',
value: false,
label: 'Variação do Planejamento',
},
],
countFilters: 0,
};
},
methods: {
onSearch($event) {
console.log($event);
},
onSubmitFilters($event) {
console.log($event);
},
onSelectFilter($event) {
console.log($event);
},
onClearFilters($event) {
console.log($event);
},
},
};
</script>CustomSelect
<template>
<CustomSelect
@select-item="onSelectItem($event)"
:items="itemSelect"
/>
</template>
<script>
import { CustomSelect } from 'mb-components-vue';
export default {
name: 'App',
components: {
CustomSelect,
},
data() {
return {
itemSelect: [
{
label: 'Teste',
active: false,
id: 0,
},
{
label: 'Teste1',
active: false,
id: 1,
},
],
};
},
methods: {
onSelectItem($event) {
/* eslint-disable */
this.itemSelect.map(item => {
if (item.id === $event.id) {
item.active = true;
} else {
item.active = false;
}
})
/* eslint-enable */
console.log($event);
},
},
};
</script>Dialog
<template>
<div class="pa-16">
<v-btn @click="dialog = !dialog">
Open Dialog
</v-btn>
<Dialog
:dialog="dialog"
:maxWidth="'643px'"
:dialogHeader="dialogHeader"
@close-dialog="dialog = !dialog"
>
<template
v-slot:content
>
<div>
<h1>modal</h1>
</div>
</template>
</Dialog>
</div>
</template>
<script>
import { Dialog } from 'mb-components-vue';
export default {
name: 'App',
components: {
Dialog,
},
data() {
return {
dialog: true,
dialogHeader: {
headerBg: '#ffffff',
dialogTitle: 'Dialog Title',
closeIcon: 'mdi-close',
iconColor: 'primary',
titleColor: '#2E4055',
},
};
},
};
</script>HeaderApp
<template>
<v-app-bar
flat
elevation="1"
height="72"
style="background-color: white; max-height: 72px;"
class="pl-15 mb-15"
>
<HeaderApp
:header="$router.options.routes[0].children"
:router="$router.options.routes[0].children"
:current="$router.currentRoute.name"
:headerIcon="'mdi-account-circle'"
@navegate-router="navigateRouter($event)"
/>
</v-app-bar>
</template>
<script>
import { HeaderApp } from 'mb-components-vue';
import badgeImage from '../assets/imgs/icons/note.svg';
export default {
name: 'App',
components: {
HeaderApp,
},
methods: {
navigateRouter($event) {
if ($event.icon === 'log-out') {
localStorage.removeItem('tokenAuth');
window.location.replace('/');
} else {
/* eslint-disable */
if ($event.router !== this.$router.currentRoute.path) {
this.$router.push($event.router);
}
/* eslint-enable */
}
},
},
};
</script>LoaderComponent
<template>
<LoaderComponent
:imagemLoader="imagemLoader"
:LoaderText="'Estamos organizando <br> seus produtos, não vai demorar muito'"
/>
</template>
<script>
import { LoaderComponent } from 'mb-components-vue';
import image from '../assets/imgs/imageLoader.png';
export default {
name: 'App',
components: {
LoaderComponent,
},
data() {
return {
imagemLoader: image,
};
},
};
</script>Navbar
<template>
<Navbar
:items="navbarItems"
:drawer="drawer"
:mini="mini"
:navbarBrand="logoNavbar"
:primaryColor="'primary'"
:btnColor="'white'"
:routerBrand="'/'"
@navegate-router="navigateRouter($event)"
/>
</template>
<script>
import { Navbar } from 'mb-components-vue';
import navbarBrand from '../assets/imgs/logo-white.svg';
export default {
name: 'App',
components: {
Navbar,
},
data() {
return {
navbarItems: [
{
activeDrawer: true, title: 'CustomDataTables', icon: 'HomeIcon', router: '/custom-data-table', colorIcon: 'white',
},
{
activeDrawer: false, title: 'CustomFilter', icon: 'shopping-bag-icon', router: '/custom-filter', colorIcon: 'white',
},
{
activeDrawer: false, title: 'SkeletonLoader', icon: 'alert-triangle-icon', router: '/skeletonLoader', colorIcon: 'white',
},
{
activeDrawer: false, title: 'CustomChat', icon: 'key-icon', router: '/customChat', colorIcon: 'white',
},
{
activeDrawer: false, title: 'Sair', icon: 'log-out', router: '/', colorIcon: 'white',
},
],
drawer: true,
mini: false,
logoNavbar: navbarBrand,
};
},
methods: {
navigateRouter($event) {
if ($event.icon === 'log-out') {
localStorage.removeItem('tokenAuth');
window.location.replace('/');
} else {
/* eslint-disable */
if ($event.router !== this.$router.currentRoute.path) {
this.$router.push($event.router);
}
/* eslint-enable */
}
},
},
};
</script>SimpleDataTable
<template>
<div class="pa-16">
<SimpleDataTable
:headers="headers"
:items="items"
@switch-change="switchChange($event)"
/>
<div class="mt-6">
<SimpleDataTable
:headers="headersImportTable"
:items="itemsImportTable"
:customClass="'importTable'"
/>
</div>
</div>
</template>
<script>
import { SimpleDataTable } from 'mb-components-vue';
export default {
name: 'App',
components: {
SimpleDataTable,
},
data() {
return {
headers: [
{
text: 'Código',
align: 'start',
value: 'code',
type: null,
key: 0,
sortable: true,
},
{
text: 'Produto',
align: 'start',
value: 'product',
type: null,
key: 1,
sortable: true,
},
{
text: 'Menor Unidade',
align: 'center',
value: 'und',
type: null,
key: 2,
sortable: true,
},
{
text: 'Status',
align: 'start',
value: 'actions',
type: 'switch',
key: 3,
sortable: true,
},
],
items: [
{
code: {
title: '0002',
},
product: {
title: 'Bacon em tiras MB',
},
und: {
title: 'UN',
},
actions: [
{
type: 'switch',
value: false,
trigger: 'switch-change',
},
],
},
{
code: {
title: '9049',
},
product: {
title: 'Bolo de cenoura',
},
und: {
title: 'PD',
},
actions: [
{
type: 'switch',
value: false,
trigger: 'switch-change',
},
],
},
],
headersImportTable: [
{
text: 'Código',
align: 'start',
value: 'code',
type: null,
key: 0,
sortable: true,
},
{
text: 'Produto',
align: 'start',
value: 'product',
type: null,
key: 1,
sortable: true,
},
{
text: 'Menor Unidade',
align: 'center',
value: 'und',
type: null,
key: 2,
sortable: true,
},
{
text: 'Quantidade',
align: 'center',
value: 'qtd',
type: null,
key: 3,
sortable: true,
},
],
itemsImportTable: [
{
code: {
title: '0002',
},
product: {
title: 'Bacon em tiras MB',
},
und: {
title: 'UN',
},
qtd: {
title: 20,
},
},
{
code: {
title: '9049',
},
product: {
title: 'Bolo de cenoura',
},
und: {
title: 'PD',
},
qtd: {
title: 20,
},
},
],
};
},
methods: {
switchChange($event) {
console.log($event);
},
},
};
</script>SkeletonLoader
<template>
<SkeletonLoader
:skeletonLoader="skeletonLoader"
:loader="true"
/>
</template>
<script>
import { SkeletonLoader } from 'mb-components-vue';
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>Tabs
<template>
<Tabs
:itemsHeaderTable="items"
:tooltipText="tooltipTabs"
:iconTooltip="iconTooltip"
@select-item="onSelectFilterTabs($event)"
/>
</template>
<script>
import { Tabs } from 'mb-components-vue';
import tooltipIcon from '../assets/imgs/icons/infoIcon.svg';
export default {
name: 'App',
components: {
Tabs,
},
data() {
return {
iconTooltip: tooltipIcon,
items: [
{
label: 'Geral',
active: true,
id: 0,
component: 'Adjustments',
},
{
label: 'Meus itens',
active: false,
id: 1,
component: 'MyItems',
},
],
tooltipTabs: `
<h1>Meus Itens</h1>
<div class='title-tooltip'>
<p>Para que serve</p></div>
<div class='wrapper-subtitles-card'>
<div class='subtitles'>
<p>Desativação/Ativação de itens do pedido.
Usado geralmente para itens que não pertencem
ao menu da sua loja</p>
</div>
</div>
`,
};
},
methods: {
onSelectFilterTabs($event) {
/* eslint-disable */
this.items.map((item) => {
if(item.id === $event.id) {
item.active = true
}else {
item.active = false
};
});
/* eslint-enable */
},
},
};
</script>Tooltip
<template>
<Tooltip
:iconTooltip="iconTooltip"
:tooltipText="tooltipText"
/>
</template>
<script>
import { Tooltip } from 'mb-components-vue';
import tooltipIcon from '../assets/imgs/icons/infoIcon.svg';
export default {
name: 'App',
components: {
Tooltip,
},
data() {
return {
iconTooltip: tooltipIcon,
tooltipText: `
<h1>Como é feito o cálculo do seu pedido ?</h1>
<div class='title-tooltip'>
<div class='wrapper-img-tooltip'>
${this.returnImg()}
</div>
<p>Cálculo</p></div>
<div class='explanation'><p>Estoque Atual + Recebimento - Necessidade = <span>Pedido</span></p></div>
<div class='divider'></div>
<h1>Legendas da Coluna Recebimento</h1>
<div class='wrapper-subtitles'>
<div class='subtitles'><div class='blue'></div><p>Quantidade Prevista para Entrega</p></div>
<div class='subtitles'><div class='green'></div><p>Quantidade Prevista para Entregue</p></div>
</div>
`,
};
},
methods: {
returnImg() {
/* eslint-disable */
return '<img src="' + require("../assets/imgs/icons/infoIcon.svg") + '">'
/* eslint-enable */
},
},
};
</script>ValueControl
<template>
<v-row>
<v-col>
<p>Default</p>
<ValueControl
:counter="counter"
:colorIcon="'#2E4055'"
@change-input-value="changeInput($event)"
/>
</v-col>
<v-col>
<p>Editable</p>
<ValueControl
:counter="counter"
:colorIcon="'#2E4055'"
:editable="true"
@change-input-value="changeInput($event)"
/>
</v-col>
<v-col>
<p>Percentage</p>
<ValueControl
:counter="counter"
:colorIcon="'#2E4055'"
:percentage="true"
@change-input-value="changeInput($event)"
/>
</v-col>
<v-col>
<p>Limited</p>
<ValueControl
:counter="counter"
:colorIcon="'#2E4055'"
:editable="true"
:limitValue="2"
:haveLimit="{have: true, value: 2}"
@change-input-value="changeInput($event)"
/>
</v-col>
<v-col>
<p>Currency</p>
<ValueControl
:counter="counter"
:colorIcon="'#2E4055'"
:currency="true"
:editable="true"
@change-input-value="changeInput($event)"
/>
</v-col>
<v-col style="background: #ffffff">
<p>Change Color</p>
<ValueControl
:counter="counter"
:colorIcon="'#2E4055'"
:backgroundWrapper="'#F7F9FA'"
:borderdWrapper="'#DDE3ED'"
@change-input-value="changeInput($event)"
/>
</v-col>
</v-row>
<v-row>
<v-col>
<p>Percentage and Editable</p>
<ValueControl
:counter="counter"
:editable="true"
:colorIcon="'#2E4055'"
:percentage="true"
@change-input-value="changeInput($event)"
/>
</v-col>
<v-col>
<p>Percentage and Have limit</p>
<ValueControl
:counter="counter"
:colorIcon="'#2E4055'"
:percentage="true"
:limitValue="2"
:haveLimit="{have: true, value: 2}"
@change-input-value="changeInput($event)"
/>
</v-col>
<v-col>
<p>Percentage and Editable and Have limit</p>
<ValueControl
:counter="counter"
:editable="true"
:colorIcon="'#2E4055'"
:percentage="true"
:limitValue="2"
:haveLimit="{have: true, value: 2}"
@change-input-value="changeInput($event)"
/>
</v-col>
</v-row>
<v-row>
<v-col>
<p>Currency no Editable</p>
<ValueControl
:counter="counter"
:colorIcon="'#2E4055'"
:currency="true"
:editable="false"
@change-input-value="changeInput($event)"
/>
</v-col>
</v-row>
<v-row>
<v-col>
<p>Disabled</p>
<ValueControl
:counter="counter"
:colorIcon="'#2E4055'"
:currency="true"
:disabled="true"
@change-input-value="changeInput($event)"
/>
</v-col>
<v-col>
<p>Percentage Decimal</p>
<ValueControl
:counter="counter"
:colorIcon="'#2E4055'"
:percentage="true"
:editable="true"
:decimal="true"
:item="{
id: 996,
}"
@change-input-value="changeInput($event)"
@item="onEmitItem($event)"
/>
</v-col>
<v-col>
<p>Currency Decimal</p>
<ValueControl
:counter="counter"
:colorIcon="'#2E4055'"
:currency="true"
:editable="true"
:decimal="true"
:item="{
id: 9969,
}"
@change-input-value="changeInput($event)"
@item="onEmitItem($event)"
/>
</v-col>
</v-row>
</template>
<script>
import { ValueControl } from 'mb-components-vue';
export default {
name: 'App',
components: {
ValueControl,
},
data() {
return {
counter: 0,
};
},
methods: {
changeInput($event) {
console.log($event);
},
onEmitItem($event) {
console.log($event);
},
},
};
</script>WopCustomDataTables
<template>
<div style="max-width: 672px;">
<WopCustomDataTables
:headers="headerSettingsMgc"
:items="itemsSettingsMgc"
@on-change-input-value="onChangeInputValue($event)"
@on-change-date-value="onChangeDateValue($event)"
@on-date-create="onDateCreate($event)"
@on-date-change-input="onChangeDate($event)"
@on-date-change="onChangeDate($event)"
/>
</div>
<div class="mt-10" style="max-width: 900px;">
<WopCustomDataTables
:headers="headerSettingsMgc2"
:items="itemsSettingsMgc2"
:customClass="'finish-order'"
@on-change-input-value="onChangeInputValue($event)"
/>
</div>
</template>
<script>
import { WopCustomDataTables } from 'mb-components-vue';
export default {
name: 'App',
components: {
WopCustomDataTables,
},
data() {
return {
itemsSettingsMgc: [
{
doubleText: {
title: 'Mostarda Sachet',
subTitle: data.getTime(),
},
id: 1,
valueControl: {
counter: 0,
calendarPicker: {
show: false,
value: moment(new Date()).format('YYYY-MM-DD'),
formatSettings: {
customClass: 'datepickerWop',
firstDay: 0,
weekOnly: true,
nowDate: true,
disabled: false,
readonly: false,
locale: 'pt-BR',
formatDate: 'DD/MM/YYYY',
mask: '##/##/####',
},
},
style: 'background: #E9EDF0;',
},
},
{
doubleText: {
title: 'Mostarda Sachet',
subTitle: data.getTime(),
},
id: 2,
valueControl: {
counter: 0,
calendarPicker: {
show: false,
value: moment(new Date()).format('YYYY-MM-DD'),
formatSettings: {
customClass: 'datepickerWop',
firstDay: 0,
weekOnly: true,
nowDate: true,
disabled: false,
readonly: false,
locale: 'pt-BR',
formatDate: 'DD/MM/YYYY',
},
},
style: 'background: #E9EDF0;',
},
},
{
doubleText: {
title: 'Mostarda Sachet',
subTitle: data.getTime(),
},
id: 3,
valueControl: {
counter: 0,
calendarPicker: {
show: false,
value: moment(new Date()).format('YYYY-MM-DD'),
formatSettings: {
customClass: 'datepickerWop',
firstDay: 0,
weekOnly: true,
nowDate: true,
disabled: false,
readonly: false,
locale: 'pt-BR',
formatDate: 'DD/MM/YYYY',
},
},
style: 'background: #E9EDF0;',
},
},
];,
headerSettingsMgc: [
{
text: 'Itens com mgc zerado',
align: 'start',
value: 'doubleText',
type: 'date',
sortable: false,
key: 0,
},
{
text: 'MGC',
value: 'value-control',
tooltipText: `
<h1>Como configurar o MGC ?</h1>
<div class='title-tooltip card-cycle'>
<div class='wrapper-img-tooltip'>
${returnImg('settings.svg')}
</div>
<p>Configuração</p>
</div> <br>
<div class='wrapper-subtitles-card'>
<div class='subtitles'>
<p>Ao editar a quantiade do MGC do item, será
necessário informar uma data de expiração
para este MGC manual.
</p></div>
</div>
`,
style: 'display: flex;align-items: center; justify-content: center; background: #C2CEDC;height: 100%;',
tooltipIcon: 'infoIcon.svg',
sortable: false,
},
{
text: '',
value: '',
sortable: false,
key: 1,
},
];,
headerSettingsMgc2: [
{
text: 'Itens acima da média',
align: 'start',
value: 'doubleText',
type: null,
sortable: false,
key: 0,
},
{
text: '',
align: 'start',
value: 'order',
type: null,
sortable: false,
key: 11,
},
{
text: '',
align: 'start',
value: 'qty',
type: null,
sortable: false,
key: 2,
},
{
text: 'Seu pedido',
align: 'start',
value: 'value-control',
tooltipText: `
<h1>Como funciona a tabela Itens acima da Média ?</h1>
<div class='title-tooltip card-cycle'>
<div class='wrapper-img-tooltip'>
${returnImg('alert-circle-tooltip.svg')}
</div>
<p>Visão geral</p>
</div>
<br>
<div class='wrapper-subtitles-card'>
<div class='subtitles'>
<p>Listagem dos itens com quantidades acima do costume
habitual da sua loja.
</p>
</div>
</div>
<div class='wrapper-subtitles-card pb-2' style="border-bottom: 1px solid #dde3ed">
<div class='subtitles'>
<p>Trouxemos a coluna <strong>QT. PADRÃO</strong> que apresenta a média
relativa dos seus últimos pedidos a fim de facilitar essa
visualização do que estamos informando.
</p>
</div>
</div>
<br>
<div class='title-tooltip card-cycle'>
<div class='wrapper-img-tooltip'>
${returnImg('clipboard-tooltip.svg')}
</div>
<p>O que fazer</p>
</div>
<br>
<div class='wrapper-subtitles-card'>
<div class='subtitles'>
<p>Caso reconheça que esse aumento é necessário basta
<strong>finalizar o seu pedido</strong>, senão revise as quantidades e sua
necessidade. <strong>Você pode ajustar a quantidade</strong> nesta tela
ou clicar no item que deseja e será direcionado para ele
no pedido.
</p>
</div>
</div>
`,
tooltipIcon: 'infoIcon.svg',
type: 'value-control',
sortable: false,
key: 3,
style: 'display: flex;align-items: center; justify-content: center; background: #C2CEDC;height: 100%;',
},
{
text: '',
align: 'start',
value: 'media',
type: null,
sortable: false,
key: 4,
},
];
itemsSettingsMgc2: [
{
doubleText: {
title: 'Cebola Picada',
character: '●',
subTitle: 'Master 5697',
qtd: '02 KL',
},
id: 1,
valueControl: {
counter: 0,
percentage: 75,
locale: {
decimal: ',',
thousands: '.',
prefix: '',
suffix: '',
precision: 2,
},
calendarPicker: {
show: false,
value: null,
},
style: 'background: #E9EDF0; width: 100%; justify-content: center;',
},
order: {
title: 'Pedido WOP',
value: '10',
},
qty: {
title: 'QT Padrão',
value: '10',
},
media: {
title: 'Média',
value: '100',
},
},
{
doubleText: {
title: 'Cebola Picada',
character: '●',
subTitle: 'Master 5697',
qtd: '02 KL',
},
id: 2,
valueControl: {
counter: 0,
percentage: 75,
locale: {
decimal: ',',
thousands: '.',
prefix: '',
suffix: '',
precision: 2,
},
calendarPicker: {
show: false,
value: null,
},
style: 'background: #E9EDF0; width: 100%; justify-content: center;',
},
order: {
title: 'Pedido WOP',
value: '10',
},
qty: {
title: 'QT Padrão',
value: '10',
},
media: {
title: 'Média',
value: '100',
},
},
{
doubleText: {
title: 'Cebola Picada',
character: '●',
subTitle: 'Master 5697',
qtd: '02 KL',
},
id: 3,
valueControl: {
counter: 0,
percentage: 75,
locale: {
decimal: ',',
thousands: '.',
prefix: '',
suffix: '',
precision: 2,
},
calendarPicker: {
show: false,
value: null,
},
style: 'background: #E9EDF0; width: 100%; justify-content: center;',
},
order: {
title: 'Pedido WOP',
value: '10',
},
qty: {
title: 'QT Padrão',
value: '10',
},
media: {
title: 'Média',
value: '100',
},
},
];
};
},
methods: {
onChangeInputValue($event) {
/* eslint-disable */
this.itemsSettingsMgc.map(item => {
if(item.id === $event.item.id) {
item.valueControl.counter = $event.value;
item.valueControl.calendarPicker.show = true;
}
});
console.log(this.itemsSettingsMgc,' table');
/* eslint-enable */
},
onChangeDateValue($event) {
console.log($event);
/* eslint-disable */
this.itemsSettingsMgc.map(item => {
if(item.id === $event.item.id) {
item.valueControl.calendarPicker.value = $event.value;
}
});
console.log(this.itemsSettingsMgc,' table');
},
onDateCreate($event) {
console.log($event);
},
onChangeDate($event) {
console.log($event);
},
}
};
</script>