Merge pull request #10 from vue-a11y/support-new-props

Add Support for Position, Avatar, and Opacity Props in VLibras Widget
vue-a11y · Oct 24, 2024 · 3d03b3c · 3d03b3c
2 parents b7c4824 + 16bb365
commit 3d03b3c
Show file tree

Hide file tree

Showing 3 changed files with 143 additions and 30 deletions.
diff --git a/README.md b/README.md
@@ -1,11 +1,12 @@
 # vlibras
+
 Componente Vue.js que ajuda você a implementar o VLibras no seu site.
 
-Demo: https://vue-vlibras.web.app
+Demo: [https://vue-vlibras.web.app](https://vue-vlibras.web.app)
 
-Esse componente segue os padrões fornecidos na [documentação do vlibras](https://www.vlibras.gov.br/doc/widget/index.html).
+Esse componente segue os padrões fornecidos na [documentação do VLibras](https://www.vlibras.gov.br/doc/widget/index.html).
 
-> 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)
+> 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)
 
 ## Instalação
 
@@ -26,23 +27,33 @@ createApp(App)
 ```
 
 ## Como usar
-No seu App.vue
+No seu `App.vue`
 
 ```vue
 <template>
-  <div>
-    <a href="https://vitejs.dev" target="_blank">
-      <img src="/vite.svg" class="logo" alt="Vite logo" />
-    </a>
-    <a href="https://vuejs.org/" target="_blank">
-      <img src="./assets/vue.svg" class="logo vue" alt="Vue logo" />
-    </a>
-  </div>
-  <HelloWorld msg="Vite + Vue" />
-  <VLibras />
+  <VLibras 
+    :position="'left'" 
+    :avatar="'random'" 
+    :opacity="1.0" 
+  />
 </template>
 ```
 
+### Props
+
+O componente `VLibras` suporta as seguintes props para personalização:
+
+- **src**: URL do script do VLibras. Padrão: `https://vlibras.gov.br/app/vlibras-plugin.js`
+- **urlWidget**: URL base do widget VLibras. Padrão: `https://vlibras.gov.br/app`
+- **position**: Define a posição do widget na tela. Valores suportados:
+  - `'left'`, `'right'`, `'bottom'`, `'top'`, `'bottom-left'`, `'top-left'`, `'bottom-right'`, `'top-right'`
+  - Padrão: `'bottom-right'`
+- **avatar**: Escolha do avatar a ser exibido no widget. Valores suportados:
+  - `'icaro'`, `'hosana'`, `'guga'`, `'random'`
+  - Padrão: `'random'`
+- **opacity**: Define a opacidade do widget. Valores entre 0 (totalmente transparente) e 1 (totalmente opaco).
+  - Padrão: `1.0`
+
 ### Suporte para Vue 2
 
 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
 ## Contribuindo
 
 - De erros de digitação na documentação à codificação de novos recursos;
-- 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;
-- Dê um fork no repositório, fazendo as alterações e enviando um PR;
+- 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;
+- Dê um fork no repositório, faça as alterações e envie um PR;
 
 Nos siga no Twitter [@vue_a11y](https://twitter.com/vue_a11y)
 
-**Obrigado por usar e fazer a web mais acessível**
+**Obrigado por usar e fazer a web mais acessível!**
diff --git a/demo/src/App.vue b/demo/src/App.vue
@@ -1,10 +1,79 @@
 <script setup>
-import Nucleus from 'nucleus-vue';
+import Nucleus, { NucleusCode } from 'nucleus-vue';
 import { configApp } from './App.config';
 </script>
 
 <template>
   <Nucleus :config="configApp">
     <VLibras />
+    <div class="content example">
+      <h2>Usage Example</h2>
+
+      <h3>Widget Position</h3>
+      <p>You can set the widget's position using the <code>position</code> prop. For example:</p>
+      <NucleusCode language="tsx">{{ `<VLibras position="left" />` }}</NucleusCode>
+
+      <h3>Available Position Types</h3>
+      <p>The position options that can be used are:</p>
+      <ul>
+        <li>left</li>
+        <li>right</li>
+        <li>top</li>
+        <li>bottom</li>
+        <li>bottom-left</li>
+        <li>top-left</li>
+        <li>bottom-right</li>
+        <li>top-right</li>
+      </ul>
+
+      <h3>Avatar</h3>
+      <p>You can select the widget's avatar using the <code>avatar</code> prop. Example:</p>
+      <NucleusCode language="tsx">{{ `<VLibras avatar="hosana" />` }}</NucleusCode>
+
+      <h3>Available Avatar Options</h3>
+      <ul>
+        <li>icaro</li>
+        <li>hosana</li>
+        <li>guga</li>
+        <li>random</li>
+      </ul>
+
+      <h3>Opacity</h3>
+      <p>To adjust the widget's opacity, use the <code>opacity</code> prop:</p>
+      <NucleusCode language="tsx">{{ `<VLibras opacity="0.8" />` }}</NucleusCode>
+    </div>
+
   </Nucleus>
 </template>
+
+<style>
+.example {
+  h2,
+  h3 {
+    color: var(--color-text);
+    margin-bottom: 10px;
+  }
+
+  p {
+    color: var(--color-text);
+    line-height: 1.6;
+    margin-bottom: 20px;
+  }
+
+  ul {
+    padding-left: 20px;
+    margin-bottom: 20px;
+  }
+
+  ul li {
+    list-style-type: disc;
+    margin-bottom: 5px;
+    color: var(--primary);
+    font-weight: bold;
+  }
+  
+  code {
+    margin-bottom: 1rem;
+  }
+}
+</style>
diff --git a/src/VLibras.vue b/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>