9
9
</template >
10
10
11
11
<script setup>
12
- const name = " VLibras"
13
- let script = ref (null )
12
+ import { ref , onMounted } from ' vue' ;
14
13
15
14
const props = defineProps ({
16
15
src: {
@@ -20,21 +19,55 @@ const props = defineProps({
20
19
urlWidget: {
21
20
type: String ,
22
21
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
23
37
}
24
38
});
25
39
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);
31
58
}
32
59
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
+ });
37
68
}
38
69
39
- init ()
70
+ onMounted (() => {
71
+ init ();
72
+ });
40
73
</script >
0 commit comments