Skip to content

Commit 20ea5b6

Browse files
add new props position, avatar, and opacity
1 parent b7c4824 commit 20ea5b6

File tree

1 file changed

+45
-12
lines changed

1 file changed

+45
-12
lines changed

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)