Qualicorp Plugin LGPD

Componente Vue.js responsável por obter os assets do Plugin Wordpress GDPR Compliance e anexa-los ao front-end (Mantendo as funcionalidades nativas preservadas)

Instalação

Usando npm:
``shell
$ npm i qualicorp-plugin-lgpd
`

Uso

Importe o componente para usa-lo:
`javascript
import pluginlgpd from "qualicorp-plugin-lgpd"
`

Configurando o componente

Defina uma variável contendo um objeto que será usado para setar as preferências do componente:
`javascript
// Como exemplo sugiro definir no data() da aplicação Vue e usar como this.variavel
let lgpdconf = {
// Identificação da aplicação Vue.js
appname: "area-logada",
// Identificação da instalação Wordpress
wpname: "wp-whitelabel",
// URL contendo os endereços dos assets estáticos/textos predefinidos
apiurl: "qualicorp.com.br/lgpd-plugin.json",
// Definição das cores do layout do modal, infobar e botões - Definir null para manter default da api
colors: {
// Cor tema do modal
lgpdcortemamodal: '#004070',
// Cor de fundo do modal
lgpdcorfundomodal: '#ffffff',
// Cor do texto da infobar
lgpdinfobartextcolor: "#18181A",
// Cor de fundo da infobar
lgpdinfobarbackground: "#ffffff",
// Cor da borda da infobar
lgpdinfobarborder: "#004070",
// Cor do texto dos botões
lgpdbtncolor: "#ffffff",
// Cor de fundo dos botões
lgpdbtnbackground: "#004070",
// Cor de fundo hover dos botões
lgpdbtnhover: "#035685",
// Cor da borda dos botões
lgpdbtnborder: "#004070"
},
content: {
// URL do custom logo a ser mostrado na modal - Definir null para manter default da api
logourl: null,
// Conteúdo alternativo da infobar - Definir null para manter default da api
infobartext: null,
// Textos das seções do modal de preferências - Definir null para manter default da api
secoes: {
sobreprivacidade: {
titulo: "Menu privacidade",
conteudo: 'Conteudo da seção - texto sem formatação html'
},
cookiesessenciais: {
titulo: "Menu essenciais",
conteudo: 'Conteudo da seção - texto sem formatação html'
},
cookiesterceiros: {
titulo: "Menu terceiros",
conteudo: 'Conteudo da seção - texto sem formatação html'
},
cookiesfuncionalidade: {
titulo: "Menu funcionalidade",
conteudo: 'Conteudo da seção - texto sem formatação html'
},
politicaprivacidade: {
titulo: "Menu politica",
conteudo: 'Conteudo da seção - texto sem formatação html',
// Definição do texto/url para a politica de privacidade
urltexto: 'Acesse aqui para saber mais'
}
},
// Texto do botão aceitar todos os cookies - Definir null para manter default da api
btnok: null,
// Texto do botão salvar no modal - Definir null para manter default da api
btnsalvar: null,
},
cookies: {
// Lista de cookies essenciais - Definir null para manter default da api
essenciais: [
// Nome do cookie, Empresa origem do cookie, Tipo do cookie e duração
{ nome: 'cookie1', origem: 'Qualicorp', tipo: 'Essencial', duracao: '365 dias' },
{ nome: 'cookie2', origem: 'Qualicorp', tipo: 'Essencial', duracao: '365 dias' },
{ nome: 'cookie3', origem: 'Qualicorp', tipo: 'Essencial', duracao: '365 dias' }
],
// Lista de cookies de terceiros - Definir null para manter default da api
terceiros: [
{ nome: '_ga', origem: 'Google', tipo: 'Essencial', duracao: '365 dias' },
{ nome: '_ga2', origem: 'Google', tipo: 'Essencial', duracao: '365 dias' },
{ nome: '_ga3', origem: 'Google', tipo: 'Essencial', duracao: '365 dias' },
{ nome: '_ga4', origem: 'Google', tipo: 'Essencial', duracao: '365 dias' },
{ nome: '_ga5', origem: 'Google', tipo: 'Essencial', duracao: '365 dias' }
],
// Lista de cookies de funcionalidade - Definir null para manter default da api
funcionalidade: [
{ nome: 'advanced1', origem: 'Empresa X', tipo: 'Publicidade', duracao: '365 dias' },
{ nome: 'advanced2', origem: 'Empresa X', tipo: 'Publicidade', duracao: '365 dias' },
{ nome: 'advanced3', origem: 'Empresa X', tipo: 'Publicidade', duracao: '365 dias' },
{ nome: 'advanced4', origem: 'Empresa X', tipo: 'Publicidade', duracao: '365 dias' },
]
},
// ID do elemento HTML que receberá o evento de abrir o modal - Obs: O elemento deve existir na tela no momento em que o componente for montado
idrenovacaoconsentimento: 'cookies-componente-modal'
}
`

Defina o componente na view/componente desejado no Vue.js:
`html

`

Crie as três funções mencionadas na chamada do componente no template que responderão quando os eventos forem emitidos pelo componente LGPD ao usuário interagir:
`javascript
export default {
// ...
methods: {
scriptsThirdAllowed(appinfo){
// Ação a ser executada quando os cookies forem permitidos
console.log('Scripts de terceiros permitidos')
// appinfo retorna identificação da aplicação e da instalação Wordpress
console.log(appinfo)
},
scriptsFuncAllowed(appinfo){
// Ação a ser executada quando os cookies forem permitidos
console.log('Scripts de funcionalidade permitidos')
console.log(appinfo)
},
scriptsBlocked(appinfo){
// Ação a ser executada quando os cookies forem permitidos
console.log('Scripts bloqueados')
// appinfo retorna identificação da aplicação e da instalação Wordpress
console.log(appinfo)
},
},
// ...
}
``