Skip to content

Commit 3d03b3c

Browse files
lucasferreiralimaxlucasferreiralimax
authored
Merge pull request #10 from vue-a11y/support-new-props
Add Support for Position, Avatar, and Opacity Props in VLibras Widget
2 parents b7c4824 + 16bb365 commit 3d03b3c

File tree

3 files changed

+143
-30
lines changed

3 files changed

+143
-30
lines changed

‎README.md

Lines changed: 28 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,12 @@
11
# vlibras
2+
23
Componente Vue.js que ajuda você a implementar o VLibras no seu site.
34

4-
Demo: https://vue-vlibras.web.app
5+
Demo: [https://vue-vlibras.web.app](https://vue-vlibras.web.app)
56

6-
Esse componente segue os padrões fornecidos na [documentação do vlibras](https://www.vlibras.gov.br/doc/widget/index.html).
7+
Esse componente segue os padrões fornecidos na [documentação do VLibras](https://www.vlibras.gov.br/doc/widget/index.html).
78

8-
> Os surdos enfrentam bastante dificuldade para ler, escrever e se comunicar na língua oral do seu país. Dessa forma, para tentar reduzir esses problemas, o objetivo da ferramenta computacional de código aberto, denominada VLibras Widget, consiste em traduzir conteúdos do Português Brasileiro para a Língua Brasileira de Sinais (LIBRAS), tornando websites acessíveis a pessoas surdas. -- [Visão geral vlibras](https://www.vlibras.gov.br/doc/widget/introduction/overview.html)
9+
> Os surdos enfrentam bastante dificuldade para ler, escrever e se comunicar na língua oral do seu país. Dessa forma, para tentar reduzir esses problemas, o objetivo da ferramenta computacional de código aberto, denominada VLibras Widget, consiste em traduzir conteúdos do Português Brasileiro para a Língua Brasileira de Sinais (LIBRAS), tornando websites acessíveis a pessoas surdas. -- [Visão geral VLibras](https://www.vlibras.gov.br/doc/widget/introduction/overview.html)
910
1011
## Instalação
1112

@@ -26,23 +27,33 @@ createApp(App)
2627
```
2728

2829
## Como usar
29-
No seu App.vue
30+
No seu `App.vue`
3031

3132
```vue
3233
<template>
33-
<div>
34-
<a href="https://vitejs.dev" target="_blank">
35-
<img src="/vite.svg" class="logo" alt="Vite logo" />
36-
</a>
37-
<a href="https://vuejs.org/" target="_blank">
38-
<img src="./assets/vue.svg" class="logo vue" alt="Vue logo" />
39-
</a>
40-
</div>
41-
<HelloWorld msg="Vite + Vue" />
42-
<VLibras />
34+
<VLibras
35+
:position="'left'"
36+
:avatar="'random'"
37+
:opacity="1.0"
38+
/>
4339
</template>
4440
```
4541

42+
### Props
43+
44+
O componente `VLibras` suporta as seguintes props para personalização:
45+
46+
- **src**: URL do script do VLibras. Padrão: `https://vlibras.gov.br/app/vlibras-plugin.js`
47+
- **urlWidget**: URL base do widget VLibras. Padrão: `https://vlibras.gov.br/app`
48+
- **position**: Define a posição do widget na tela. Valores suportados:
49+
- `'left'`, `'right'`, `'bottom'`, `'top'`, `'bottom-left'`, `'top-left'`, `'bottom-right'`, `'top-right'`
50+
- Padrão: `'bottom-right'`
51+
- **avatar**: Escolha do avatar a ser exibido no widget. Valores suportados:
52+
- `'icaro'`, `'hosana'`, `'guga'`, `'random'`
53+
- Padrão: `'random'`
54+
- **opacity**: Define a opacidade do widget. Valores entre 0 (totalmente transparente) e 1 (totalmente opaco).
55+
- Padrão: `1.0`
56+
4657
### Suporte para Vue 2
4758

4859
Se você está utilizando Vue 2 em seus projetos, também pode integrar facilmente o VLibras! A versão específica para Vue 2 do componente está disponível [aqui](https://github.com/vue-a11y/vue-vlibras/tree/vue-2), mantendo a mesma funcionalidade e acessibilidade que a versão para Vue 3.
@@ -52,9 +63,9 @@ Confira o repositório no GitHub para mais detalhes e instruções sobre como in
5263
## Contribuindo
5364

5465
- De erros de digitação na documentação à codificação de novos recursos;
55-
- Verifique os issue em aberto ou abra um novo issue para iniciar uma discussão sobre sua ideia de recurso ou o bug que você encontrou;
56-
- Dê um fork no repositório, fazendo as alterações e enviando um PR;
66+
- Verifique os issues em aberto ou abra um novo issue para iniciar uma discussão sobre sua ideia de recurso ou o bug que você encontrou;
67+
- Dê um fork no repositório, faça as alterações e envie um PR;
5768

5869
Nos siga no Twitter [@vue_a11y](https://twitter.com/vue_a11y)
5970

60-
**Obrigado por usar e fazer a web mais acessível**
71+
**Obrigado por usar e fazer a web mais acessível!**

‎demo/src/App.vue

Lines changed: 70 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,79 @@
11
<script setup>
2-
import Nucleus from 'nucleus-vue';
2+
import Nucleus, { NucleusCode } from 'nucleus-vue';
33
import { configApp } from './App.config';
44
</script>
55

66
<template>
77
<Nucleus :config="configApp">
88
<VLibras />
9+
<div class="content example">
10+
<h2>Usage Example</h2>
11+
12+
<h3>Widget Position</h3>
13+
<p>You can set the widget's position using the <code>position</code> prop. For example:</p>
14+
<NucleusCode language="tsx">{{ `<VLibras position="left" />` }}</NucleusCode>
15+
16+
<h3>Available Position Types</h3>
17+
<p>The position options that can be used are:</p>
18+
<ul>
19+
<li>left</li>
20+
<li>right</li>
21+
<li>top</li>
22+
<li>bottom</li>
23+
<li>bottom-left</li>
24+
<li>top-left</li>
25+
<li>bottom-right</li>
26+
<li>top-right</li>
27+
</ul>
28+
29+
<h3>Avatar</h3>
30+
<p>You can select the widget's avatar using the <code>avatar</code> prop. Example:</p>
31+
<NucleusCode language="tsx">{{ `<VLibras avatar="hosana" />` }}</NucleusCode>
32+
33+
<h3>Available Avatar Options</h3>
34+
<ul>
35+
<li>icaro</li>
36+
<li>hosana</li>
37+
<li>guga</li>
38+
<li>random</li>
39+
</ul>
40+
41+
<h3>Opacity</h3>
42+
<p>To adjust the widget's opacity, use the <code>opacity</code> prop:</p>
43+
<NucleusCode language="tsx">{{ `<VLibras opacity="0.8" />` }}</NucleusCode>
44+
</div>
45+
946
</Nucleus>
1047
</template>
48+
49+
<style>
50+
.example {
51+
h2,
52+
h3 {
53+
color: var(--color-text);
54+
margin-bottom: 10px;
55+
}
56+
57+
p {
58+
color: var(--color-text);
59+
line-height: 1.6;
60+
margin-bottom: 20px;
61+
}
62+
63+
ul {
64+
padding-left: 20px;
65+
margin-bottom: 20px;
66+
}
67+
68+
ul li {
69+
list-style-type: disc;
70+
margin-bottom: 5px;
71+
color: var(--primary);
72+
font-weight: bold;
73+
}
74+
75+
code {
76+
margin-bottom: 1rem;
77+
}
78+
}
79+
</style>

‎src/VLibras.vue

Lines changed: 45 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -9,8 +9,7 @@
99
</template>
1010

1111
<script setup>
12-
const name = "VLibras"
13-
let script = ref(null)
12+
import { ref, onMounted } from 'vue';
1413
1514
const props = defineProps({
1615
src: {
@@ -20,21 +19,55 @@ const props = defineProps({
2019
urlWidget: {
2120
type: String,
2221
default: 'https://vlibras.gov.br/app'
22+
},
23+
position: {
24+
type: String,
25+
default: 'right',
26+
validator: value => ['left', 'right', 'bottom', 'top', 'bottom-left', 'top-left', 'bottom-right', 'top-right'].includes(value)
27+
},
28+
avatar: {
29+
type: String,
30+
default: 'random',
31+
validator: value => ['icaro', 'hosana', 'guga', 'random'].includes(value)
32+
},
33+
opacity: {
34+
type: Number,
35+
default: 1.0,
36+
validator: value => value >= 0 && value <= 1
2337
}
2438
});
2539
26-
function init () {
27-
script = document.createElement('script')
28-
script.addEventListener('load', createWidget)
29-
script.src = props.src
30-
document.querySelector('body').appendChild(script)
40+
const mapPosition = {
41+
'left': 'L',
42+
'right': 'R',
43+
'bottom': 'B',
44+
'top': 'T',
45+
'bottom-left': 'BL',
46+
'top-left': 'TL',
47+
'bottom-right': 'BR',
48+
'top-right': 'TR',
49+
};
50+
51+
let script = ref(null);
52+
53+
function init() {
54+
script = document.createElement('script');
55+
script.addEventListener('load', createWidget);
56+
script.src = props.src;
57+
document.querySelector('body').appendChild(script);
3158
}
3259
33-
function createWidget () {
34-
script.removeEventListener('load', createWidget)
35-
// eslint-disable-next-line
36-
new window.VLibras.Widget(props.urlWidget)
60+
function createWidget() {
61+
script.removeEventListener('load', createWidget);
62+
new window.VLibras.Widget({
63+
url: props.urlWidget,
64+
position: mapPosition[props.position],
65+
avatar: props.avatar,
66+
opacity: props.opacity,
67+
});
3768
}
3869
39-
init()
70+
onMounted(() => {
71+
init();
72+
});
4073
</script>

0 commit comments

Comments
 (0)