@edusites/bancos-brasil 1.0.2 → 1.0.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/package.json +2 -2
- package/src/SvgBanco.js +29 -1
- package/src/core.js +134 -0
- package/src/index.js +2 -136
- package/src/SvgBanco.vue +0 -29
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@edusites/bancos-brasil",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.3",
|
|
4
4
|
"description": "Biblioteca JavaScript para renderizar ícones SVG de bancos brasileiros",
|
|
5
5
|
"author": {
|
|
6
6
|
"name": "Eduardo Sites",
|
|
@@ -32,9 +32,9 @@
|
|
|
32
32
|
},
|
|
33
33
|
"files": [
|
|
34
34
|
"src/index.js",
|
|
35
|
+
"src/core.js",
|
|
35
36
|
"src/icones.js",
|
|
36
37
|
"src/SvgBanco.js",
|
|
37
|
-
"src/SvgBanco.vue",
|
|
38
38
|
"icons",
|
|
39
39
|
"README.md",
|
|
40
40
|
"LICENSE"
|
package/src/SvgBanco.js
CHANGED
|
@@ -1 +1,29 @@
|
|
|
1
|
-
|
|
1
|
+
import { defineComponent, ref, watchEffect, h } from 'vue'
|
|
2
|
+
import { svgBanco } from './core.js'
|
|
3
|
+
|
|
4
|
+
export default defineComponent({
|
|
5
|
+
name: 'SvgBanco',
|
|
6
|
+
props: {
|
|
7
|
+
nome: { type: String, required: true },
|
|
8
|
+
formato: String,
|
|
9
|
+
cor: String,
|
|
10
|
+
fundo: String,
|
|
11
|
+
tamanho: Number
|
|
12
|
+
},
|
|
13
|
+
setup(props) {
|
|
14
|
+
const svg = ref('')
|
|
15
|
+
|
|
16
|
+
watchEffect(() => {
|
|
17
|
+
svg.value =
|
|
18
|
+
svgBanco({
|
|
19
|
+
nome: props.nome,
|
|
20
|
+
formato: props.formato,
|
|
21
|
+
cor: props.cor,
|
|
22
|
+
fundo: props.fundo,
|
|
23
|
+
tamanho: props.tamanho
|
|
24
|
+
}) || ''
|
|
25
|
+
})
|
|
26
|
+
|
|
27
|
+
return () => h('div', { innerHTML: svg.value })
|
|
28
|
+
}
|
|
29
|
+
})
|
package/src/core.js
ADDED
|
@@ -0,0 +1,134 @@
|
|
|
1
|
+
import { ICONES } from './icones.js'
|
|
2
|
+
|
|
3
|
+
const PRESETS = {
|
|
4
|
+
nubank: {
|
|
5
|
+
cor: '#FFFFFF',
|
|
6
|
+
fundo: '#820AD1',
|
|
7
|
+
formato: 'quadrado',
|
|
8
|
+
tamanho: 64
|
|
9
|
+
},
|
|
10
|
+
cora: {
|
|
11
|
+
cor: '#FFFFFF',
|
|
12
|
+
fundo: '#FE3E6D',
|
|
13
|
+
formato: 'quadrado',
|
|
14
|
+
tamanho: 64
|
|
15
|
+
},
|
|
16
|
+
itau: {
|
|
17
|
+
cor: '#FFFFFF',
|
|
18
|
+
fundo: '#EC7000',
|
|
19
|
+
formato: 'quadrado',
|
|
20
|
+
tamanho: 64
|
|
21
|
+
},
|
|
22
|
+
inter: {
|
|
23
|
+
cor: '#FFFFFF',
|
|
24
|
+
fundo: '#FF7A00',
|
|
25
|
+
formato: 'quadrado',
|
|
26
|
+
tamanho: 64
|
|
27
|
+
},
|
|
28
|
+
bancodobrasil: {
|
|
29
|
+
cor: '#FFDD00',
|
|
30
|
+
fundo: '#003D7A',
|
|
31
|
+
formato: 'quadrado',
|
|
32
|
+
tamanho: 64
|
|
33
|
+
},
|
|
34
|
+
bradesco: {
|
|
35
|
+
cor: '#FFFFFF',
|
|
36
|
+
fundo: '#CC092F',
|
|
37
|
+
formato: 'quadrado',
|
|
38
|
+
tamanho: 64
|
|
39
|
+
},
|
|
40
|
+
santander: {
|
|
41
|
+
cor: '#FFFFFF',
|
|
42
|
+
fundo: '#EC0000',
|
|
43
|
+
formato: 'quadrado',
|
|
44
|
+
tamanho: 64
|
|
45
|
+
},
|
|
46
|
+
caixa: {
|
|
47
|
+
cor: '#FFFFFF',
|
|
48
|
+
fundo: '#0066A1',
|
|
49
|
+
formato: 'quadrado',
|
|
50
|
+
tamanho: 64
|
|
51
|
+
},
|
|
52
|
+
btg: {
|
|
53
|
+
cor: '#FFFFFF',
|
|
54
|
+
fundo: '#000000',
|
|
55
|
+
formato: 'quadrado',
|
|
56
|
+
tamanho: 64
|
|
57
|
+
},
|
|
58
|
+
xp: {
|
|
59
|
+
cor: '#1D1D1B',
|
|
60
|
+
fundo: '#FFED00',
|
|
61
|
+
formato: 'quadrado',
|
|
62
|
+
tamanho: 64
|
|
63
|
+
}
|
|
64
|
+
}
|
|
65
|
+
|
|
66
|
+
function normalizarNome(nome) {
|
|
67
|
+
return String(nome).toLowerCase().trim()
|
|
68
|
+
}
|
|
69
|
+
|
|
70
|
+
function obterIcone(nome) {
|
|
71
|
+
return ICONES[nome] || null
|
|
72
|
+
}
|
|
73
|
+
|
|
74
|
+
function criarFundo(formato, tamanho, corFundo) {
|
|
75
|
+
const borderRadius = formato === 'quadrado' ? tamanho * 0.15 : 0
|
|
76
|
+
|
|
77
|
+
if (formato === 'circulo') {
|
|
78
|
+
return `<circle cx="${tamanho / 2}" cy="${tamanho / 2}" r="${tamanho / 2}" fill="${corFundo}"/>`
|
|
79
|
+
} else if (formato === 'quadrado') {
|
|
80
|
+
return `<rect width="${tamanho}" height="${tamanho}" rx="${borderRadius}" fill="${corFundo}"/>`
|
|
81
|
+
}
|
|
82
|
+
return ''
|
|
83
|
+
}
|
|
84
|
+
|
|
85
|
+
function aplicarCor(conteudoSVG, cor) {
|
|
86
|
+
return conteudoSVG.replace(/fill="[^"]*"/g, `fill="${cor}"`)
|
|
87
|
+
}
|
|
88
|
+
|
|
89
|
+
function centralizarIcone(conteudoSVG, tamanhoOriginal, tamanhoFinal, padding = 0.2) {
|
|
90
|
+
const escala = 1 - padding
|
|
91
|
+
const offset = (tamanhoFinal * padding) / 2
|
|
92
|
+
|
|
93
|
+
return `<g transform="translate(${offset}, ${offset}) scale(${(escala * tamanhoFinal) / tamanhoOriginal})">${conteudoSVG}</g>`
|
|
94
|
+
}
|
|
95
|
+
|
|
96
|
+
export function svgBanco(options) {
|
|
97
|
+
const { nome, cor, fundo, formato, tamanho, className } = options
|
|
98
|
+
|
|
99
|
+
const nomeNormalizado = normalizarNome(nome)
|
|
100
|
+
|
|
101
|
+
const preset = PRESETS[nomeNormalizado] || {
|
|
102
|
+
cor: '#FFFFFF',
|
|
103
|
+
fundo: '#000000',
|
|
104
|
+
formato: 'quadrado',
|
|
105
|
+
tamanho: 64
|
|
106
|
+
}
|
|
107
|
+
|
|
108
|
+
const config = {
|
|
109
|
+
cor: cor || preset.cor,
|
|
110
|
+
fundo: fundo || preset.fundo,
|
|
111
|
+
formato: formato || preset.formato,
|
|
112
|
+
tamanho: tamanho || preset.tamanho
|
|
113
|
+
}
|
|
114
|
+
|
|
115
|
+
const iconeOriginal = obterIcone(nomeNormalizado)
|
|
116
|
+
if (!iconeOriginal) return null
|
|
117
|
+
|
|
118
|
+
let conteudoIcone = aplicarCor(iconeOriginal, config.cor)
|
|
119
|
+
conteudoIcone = centralizarIcone(conteudoIcone, 108, config.tamanho)
|
|
120
|
+
|
|
121
|
+
const elementoFundo = config.formato !== 'sem' ? criarFundo(config.formato, config.tamanho, config.fundo) : ''
|
|
122
|
+
|
|
123
|
+
const classAttr = className ? ` class="${className}"` : ''
|
|
124
|
+
return `<svg width="${config.tamanho}" height="${config.tamanho}" viewBox="0 0 ${config.tamanho} ${config.tamanho}" fill="none" xmlns="http://www.w3.org/2000/svg"${classAttr}>${elementoFundo}${conteudoIcone}</svg>`
|
|
125
|
+
}
|
|
126
|
+
|
|
127
|
+
export function listarBancos() {
|
|
128
|
+
return Object.keys(PRESETS)
|
|
129
|
+
}
|
|
130
|
+
|
|
131
|
+
export function obterPreset(nome) {
|
|
132
|
+
const nomeNormalizado = normalizarNome(nome)
|
|
133
|
+
return PRESETS[nomeNormalizado] || null
|
|
134
|
+
}
|
package/src/index.js
CHANGED
|
@@ -1,138 +1,4 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
const PRESETS = {
|
|
4
|
-
nubank: {
|
|
5
|
-
cor: '#FFFFFF',
|
|
6
|
-
fundo: '#820AD1',
|
|
7
|
-
formato: 'quadrado',
|
|
8
|
-
tamanho: 64
|
|
9
|
-
},
|
|
10
|
-
cora: {
|
|
11
|
-
cor: '#FFFFFF',
|
|
12
|
-
fundo: '#FE3E6D',
|
|
13
|
-
formato: 'quadrado',
|
|
14
|
-
tamanho: 64
|
|
15
|
-
},
|
|
16
|
-
itau: {
|
|
17
|
-
cor: '#FFFFFF',
|
|
18
|
-
fundo: '#EC7000',
|
|
19
|
-
formato: 'quadrado',
|
|
20
|
-
tamanho: 64
|
|
21
|
-
},
|
|
22
|
-
inter: {
|
|
23
|
-
cor: '#FFFFFF',
|
|
24
|
-
fundo: '#FF7A00',
|
|
25
|
-
formato: 'quadrado',
|
|
26
|
-
tamanho: 64
|
|
27
|
-
},
|
|
28
|
-
bancodobrasil: {
|
|
29
|
-
cor: '#FFDD00',
|
|
30
|
-
fundo: '#003D7A',
|
|
31
|
-
formato: 'quadrado',
|
|
32
|
-
tamanho: 64
|
|
33
|
-
},
|
|
34
|
-
bradesco: {
|
|
35
|
-
cor: '#FFFFFF',
|
|
36
|
-
fundo: '#CC092F',
|
|
37
|
-
formato: 'quadrado',
|
|
38
|
-
tamanho: 64
|
|
39
|
-
},
|
|
40
|
-
santander: {
|
|
41
|
-
cor: '#FFFFFF',
|
|
42
|
-
fundo: '#EC0000',
|
|
43
|
-
formato: 'quadrado',
|
|
44
|
-
tamanho: 64
|
|
45
|
-
},
|
|
46
|
-
caixa: {
|
|
47
|
-
cor: '#FFFFFF',
|
|
48
|
-
fundo: '#0066A1',
|
|
49
|
-
formato: 'quadrado',
|
|
50
|
-
tamanho: 64
|
|
51
|
-
},
|
|
52
|
-
btg: {
|
|
53
|
-
cor: '#FFFFFF',
|
|
54
|
-
fundo: '#000000',
|
|
55
|
-
formato: 'quadrado',
|
|
56
|
-
tamanho: 64
|
|
57
|
-
},
|
|
58
|
-
xp: {
|
|
59
|
-
cor: '#1D1D1B',
|
|
60
|
-
fundo: '#FFED00',
|
|
61
|
-
formato: 'quadrado',
|
|
62
|
-
tamanho: 64
|
|
63
|
-
}
|
|
64
|
-
}
|
|
65
|
-
|
|
66
|
-
function normalizarNome(nome) {
|
|
67
|
-
return String(nome).toLowerCase().trim()
|
|
68
|
-
}
|
|
69
|
-
|
|
70
|
-
function obterIcone(nome) {
|
|
71
|
-
return ICONES[nome] || null
|
|
72
|
-
}
|
|
73
|
-
|
|
74
|
-
function criarFundo(formato, tamanho, corFundo) {
|
|
75
|
-
const borderRadius = formato === 'quadrado' ? tamanho * 0.15 : 0
|
|
76
|
-
|
|
77
|
-
if (formato === 'circulo') {
|
|
78
|
-
return `<circle cx="${tamanho / 2}" cy="${tamanho / 2}" r="${tamanho / 2}" fill="${corFundo}"/>`
|
|
79
|
-
} else if (formato === 'quadrado') {
|
|
80
|
-
return `<rect width="${tamanho}" height="${tamanho}" rx="${borderRadius}" fill="${corFundo}"/>`
|
|
81
|
-
}
|
|
82
|
-
return ''
|
|
83
|
-
}
|
|
84
|
-
|
|
85
|
-
function aplicarCor(conteudoSVG, cor) {
|
|
86
|
-
return conteudoSVG.replace(/fill="[^"]*"/g, `fill="${cor}"`)
|
|
87
|
-
}
|
|
88
|
-
|
|
89
|
-
function centralizarIcone(conteudoSVG, tamanhoOriginal, tamanhoFinal, padding = 0.2) {
|
|
90
|
-
const escala = 1 - padding
|
|
91
|
-
const offset = (tamanhoFinal * padding) / 2
|
|
92
|
-
|
|
93
|
-
return `<g transform="translate(${offset}, ${offset}) scale(${(escala * tamanhoFinal) / tamanhoOriginal})">${conteudoSVG}</g>`
|
|
94
|
-
}
|
|
95
|
-
|
|
96
|
-
export function svgBanco(options) {
|
|
97
|
-
const { nome, cor, fundo, formato, tamanho, className } = options
|
|
98
|
-
|
|
99
|
-
const nomeNormalizado = normalizarNome(nome)
|
|
100
|
-
|
|
101
|
-
const preset = PRESETS[nomeNormalizado] || {
|
|
102
|
-
cor: '#FFFFFF',
|
|
103
|
-
fundo: '#000000',
|
|
104
|
-
formato: 'quadrado',
|
|
105
|
-
tamanho: 64
|
|
106
|
-
}
|
|
107
|
-
|
|
108
|
-
const config = {
|
|
109
|
-
cor: cor || preset.cor,
|
|
110
|
-
fundo: fundo || preset.fundo,
|
|
111
|
-
formato: formato || preset.formato,
|
|
112
|
-
tamanho: tamanho || preset.tamanho
|
|
113
|
-
}
|
|
114
|
-
|
|
115
|
-
const iconeOriginal = obterIcone(nomeNormalizado)
|
|
116
|
-
if (!iconeOriginal) return null
|
|
117
|
-
|
|
118
|
-
let conteudoIcone = aplicarCor(iconeOriginal, config.cor)
|
|
119
|
-
conteudoIcone = centralizarIcone(conteudoIcone, 108, config.tamanho)
|
|
120
|
-
|
|
121
|
-
const elementoFundo = config.formato !== 'sem' ? criarFundo(config.formato, config.tamanho, config.fundo) : ''
|
|
122
|
-
|
|
123
|
-
const classAttr = className ? ` class="${className}"` : ''
|
|
124
|
-
return `<svg width="${config.tamanho}" height="${config.tamanho}" viewBox="0 0 ${config.tamanho} ${config.tamanho}" fill="none" xmlns="http://www.w3.org/2000/svg"${classAttr}>${elementoFundo}${conteudoIcone}</svg>`
|
|
125
|
-
}
|
|
126
|
-
|
|
127
|
-
export function listarBancos() {
|
|
128
|
-
return Object.keys(PRESETS)
|
|
129
|
-
}
|
|
130
|
-
|
|
131
|
-
export function obterPreset(nome) {
|
|
132
|
-
const nomeNormalizado = normalizarNome(nome)
|
|
133
|
-
return PRESETS[nomeNormalizado] || null
|
|
134
|
-
}
|
|
135
|
-
|
|
1
|
+
export { svgBanco, listarBancos, obterPreset } from './core.js'
|
|
136
2
|
export { default as SvgBanco } from './SvgBanco.js'
|
|
137
|
-
|
|
3
|
+
import { svgBanco } from './core.js'
|
|
138
4
|
export default svgBanco
|
package/src/SvgBanco.vue
DELETED
|
@@ -1,29 +0,0 @@
|
|
|
1
|
-
<script setup>
|
|
2
|
-
import { svgBanco } from './index.js'
|
|
3
|
-
import { ref, watchEffect } from 'vue'
|
|
4
|
-
|
|
5
|
-
const props = defineProps({
|
|
6
|
-
nome: { type: String, required: true },
|
|
7
|
-
formato: String,
|
|
8
|
-
cor: String,
|
|
9
|
-
fundo: String,
|
|
10
|
-
tamanho: Number
|
|
11
|
-
})
|
|
12
|
-
|
|
13
|
-
const svg = ref('')
|
|
14
|
-
|
|
15
|
-
watchEffect(() => {
|
|
16
|
-
svg.value =
|
|
17
|
-
svgBanco({
|
|
18
|
-
nome: props.nome,
|
|
19
|
-
formato: props.formato,
|
|
20
|
-
cor: props.cor,
|
|
21
|
-
fundo: props.fundo,
|
|
22
|
-
tamanho: props.tamanho
|
|
23
|
-
}) || ''
|
|
24
|
-
})
|
|
25
|
-
</script>
|
|
26
|
-
|
|
27
|
-
<template>
|
|
28
|
-
<div v-html="svg"></div>
|
|
29
|
-
</template>
|