add new props position, avatar, and opacity

Author: lucasferreiralimax

src/VLibras.vue

@@ -9,8 +9,7 @@
 </template>
 
 <script setup>
-const name = "VLibras"
-let script = ref(null)
+import { ref, onMounted } from 'vue';
 
 const props = defineProps({
   src: {
@@ -20,21 +19,55 @@ const props = defineProps({
   urlWidget: {
     type: String,
     default: 'https://vlibras.gov.br/app'
+  },
+  position: {
+    type: String,
+    default: 'right',
+    validator: value => ['left', 'right', 'bottom', 'top', 'bottom-left', 'top-left', 'bottom-right', 'top-right'].includes(value)
+  },
+  avatar: {
+    type: String,
+    default: 'random',
+    validator: value => ['icaro', 'hosana', 'guga', 'random'].includes(value)
+  },
+  opacity: {
+    type: Number,
+    default: 1.0,
+    validator: value => value >= 0 && value <= 1
   }
 });
 
-function init () {
-  script = document.createElement('script')
-  script.addEventListener('load', createWidget)
-  script.src = props.src
-  document.querySelector('body').appendChild(script)
+const mapPosition = {
+  'left': 'L',
+  'right': 'R',
+  'bottom': 'B',
+  'top': 'T',
+  'bottom-left': 'BL',
+  'top-left': 'TL',
+  'bottom-right': 'BR',
+  'top-right': 'TR',
+};
+
+let script = ref(null);
+
+function init() {
+  script = document.createElement('script');
+  script.addEventListener('load', createWidget);
+  script.src = props.src;
+  document.querySelector('body').appendChild(script);
 }
 
-function createWidget () {
-  script.removeEventListener('load', createWidget)
-  // eslint-disable-next-line
-  new window.VLibras.Widget(props.urlWidget)
+function createWidget() {
+  script.removeEventListener('load', createWidget);
+  new window.VLibras.Widget({
+    url: props.urlWidget,
+    position: mapPosition[props.position],
+    avatar: props.avatar,
+    opacity: props.opacity,
+  });
 }
 
-init()
+onMounted(() => {
+  init();
+});
 </script>