Merge branch 'spanish-translation' of https://github.com/mrcego/vuejs-spanish-docs into nov-29_nov-30

Author: mrcego

.vitepress/theme/components/SponsorsGroup.vue

@@ -41,9 +41,26 @@ const eventMap: Record<Placement, string> = {
   landing: '58FLAR2Z',
   page: 'ZXLO3IUT'
 }
+
 function track(interest?: boolean) {
   fathom.trackGoal(interest ? `Y2BVYNT2` : eventMap[props.placement], 0)
 }
+
+function resolveList(data: SponsorData) {
+  let currentTier = data[props.tier]
+  // in aside, treat platinum+priority as special
+  if (props.placement === 'aside') {
+    if (props.tier === 'platinum') {
+      currentTier = currentTier.filter((s) => !s.priority)
+    } else if (props.tier === 'special') {
+      currentTier = [
+        ...currentTier,
+        ...data.platinum.filter((s) => s.priority)
+      ]
+    }
+  }
+  return currentTier
+}
 </script>
 
 <template>
@@ -54,7 +71,7 @@ function track(interest?: boolean) {
   >
     <template v-if="data && visible">
       <a
-        v-for="{ url, img, name } of data[tier]"
+        v-for="{ url, img, name } of resolveList(data)"
         class="sponsor-item"
         :href="url"
         target="_blank"
@@ -160,7 +177,8 @@ function track(interest?: boolean) {
   height: 60px;
 }
 .aside .special .sponsor-item img {
-  width: 120px;
+  max-width: 120px;
+  max-height: 48px;
 }
 .aside .platinum .sponsor-item {
   width: 111px;

.vitepress/theme/components/sponsors.ts

@@ -13,6 +13,7 @@ export interface Sponsor {
   img: string
   name: string
   description?: string
+  priority?: boolean
 }
 
 export interface SponsorData {

package.json

@@ -2,6 +2,7 @@
   "engines": {
     "node": ">=14.0.0"
   },
+   "type": "module",
   "scripts": {
     "dev": "vitepress",
     "build": "vitepress build",

src/about/team/TeamMember.vue

@@ -9,7 +9,7 @@ import {
   VTIconLink,
   VTIconLinkedIn,
   VTIconMapPin,
-  VTIconTwitter,
+  VTIconX,
   VTLink
 } from '@vue/theme'
 import type { Member } from './Member'
@@ -146,7 +146,7 @@ const avatarUrl = computed(() => {
               :href="`https://twitter.com/${member.socials.twitter}`"
               :no-icon="true"
             >
-              <VTIconTwitter class="social-icon" />
+              <VTIconX class="social-icon" />
             </VTLink>
           </li>
           <li v-if="member.socials.linkedin" class="social-item">

src/api/reactivity-core.md

@@ -35,7 +35,7 @@ Toma un valor interno y devuelve un objeto ref reactivo y mutable, que tiene una
   const count = ref(0)
   console.log(count.value) // 0
 
-  count.value++
+  count.value = 1
   console.log(count.value) // 1
   ```
 

src/guide/essentials/watchers.md

@@ -13,8 +13,8 @@ export default {
   data() {
     return {
       question: '',
-      answer:
-        'Las preguntas suelen contener un signo de interrogación. ;-)'
+      answer: 'Las preguntas suelen contener un signo de interrogación. ;-)',
+      loading: false
     }
   },
   watch: {
@@ -27,12 +27,15 @@ export default {
   },
   methods: {
     async getAnswer() {
+      this.loading = true
       this.answer = 'Pensando...'
       try {
         const res = await fetch('https://yesno.wtf/api')
         this.answer = (await res.json()).answer
       } catch (error) {
         this.answer = '¡Error! No se ha podido acceder a la API. ' + error
+      } finally {
+        this.loading = false
       }
     }
   }
@@ -42,12 +45,12 @@ export default {
 ```vue-html
 <p>
   Hacer una pregunta de sí/no:
-  <input v-model="question" />
+  <input v-model="question" :disabled="loading" />
 </p>
 <p>{{ answer }}</p>
 ```
 
-[Pruébalo en la Zona de Práctica](https://play.vuejs.org/#eNptUk2PmzAQ/SuvXAA1sdVrmt0qqnroqa3UIxcLhuCGjKk/wkYR/70OBJLuroRkPDPvzbznuSS7rhOnQMkm2brS6s4/F0wvnbEeFdUqtB6XgoFKeZXl0z9gyQfL8w34G8h5bXiDNF3NQcWuJxtDv25Zh+CCatszSsNeaYZakDgqexD4vM7TCT9cj2Ek65Uvm83cTUr0DTGdyN7RZaN4T24F32iHOnA5hnvdtrCBJ+RcnTH180wrmLaaL4s+QNd4LBOaK3r5UWfplzTHM9afHmoxdhV78rtRcpbPmVHEf1qO5BtTuUWNcmcu8QC9046kk4l4Qvq70XzQvBdC3CyKJfb8OEa01fn4OC7Wq15pj5qidVnaeN+5jZRncmxE72upOp0uY77ulU3gSCT+uOhXnt9yiy6U1zdBRtYa+9aK+9TfrgUf8NWEtgKbK6mKQN8Qdj+/C6T4iJHkXcsKjt9WLpsZL56OXas8xRuw7cYD2LlDXKYoT7K5b+OU22rugsdpfTQVtU9FMueLBHKikRNPpLtcbnuLYZjCW7m0TIZ/92UFiQ==)
+[Pruébalo en la Zona de Práctica](https://play.vuejs.org/#eNp9VE1v2zAM/SucLnaw1D70lqUbsiKH7rB1W4++aDYdq5ElTx9xgiD/fbT8lXZFAQO2+Mgn8pH0mW2aJjl4ZCu2trkRjfucKTw22jgosOReOjhnCqDgjseL/hvAoPNGjSeAvx6tE1qtIIqWo5Er26Ih088BteCt51KeINfKcaGAT5FQc7NP4NPNYiaQmhdC7VZQcmlxMF+61yUcWu7yajVmkabQVqjwgGZmzSuudmiX4CphofQqD+ZWSAnGqz5y9I4VtmOuS9CyGA9T3QCihGu3RKhc+gJtHH2JFld+EG5Mdug2QYZ4MSKhgBd11OgqXdipEm5PKoer0Jk2kA66wB044/EF1GtOSPRUCbUnryRJosnFnK4zpC5YR7205M9bLhyUSIrGUeVcY1dpekKrdNK6MuWNiKYKXt8V98FElDxbknGxGLCpZMi7VkGMxmjzv0pz1tvO4QPcay8LULoj5RToKoTN40MCEXyEQDJTl0KFmXpNOqsUxudN+TNFzzqdJp8ODutGcod0Alg34QWwsXsaVtIjVXqe9h5bC9V4B4ebWhco7zI24hmDVSEs/yOxIPOQEFnTnjzt2emS83nYFrhcevM6nRJhS+Ys9aoUu6Av7WqoNWO5rhsh0fxownplbBqhjJEmuv0WbN2UDNtDMRXm+zfsz/bY2TL2SH1Ec8CMTZjjhqaxh7e/v+ORvieQqvaSvN8Bf6HV0veSdG5fvSoo7Su/kO1D3f13SKInuz06VHYsahzzfl0yRj+s+3dKn9O9TW7HPrPLP624lFU=)
 
 La opción `watch` también admite una ruta definida por puntos como clave:
 
@@ -73,19 +76,21 @@ Con la Composition API, podemos usar la [función `watch`](/api/reactivity-core#
 import { ref, watch } from 'vue'
 
 const question = ref('')
-const answer = ref(
-  'Las preguntas suelen contener un signo de interrogación. ;-)'
-)
+const answer = ref('Las preguntas suelen contener un signo de interrogación. ;-)')
+const loading = ref(false)
 
 // watch funciona directamente sobre una ref
 watch(question, async (newQuestion, oldQuestion) => {
   if (newQuestion.indexOf('?') > -1) {
+    loading.value = true
     answer.value = 'Pensando...'
     try {
       const res = await fetch('https://yesno.wtf/api')
       answer.value = (await res.json()).answer
     } catch (error) {
       answer.value = 'Error! No se ha podido acceder a la API. ' + error
+    } finally {
+      loading.value = false
     }
   }
 })
@@ -94,13 +99,13 @@ watch(question, async (newQuestion, oldQuestion) => {
 <template>
   <p>
     Hacer una pregunta de sí/no:
-    <input v-model="question" />
+    <input v-model="question" :disabled="loading" />
   </p>
   <p>{{ answer }}</p>
 </template>
 ```
 
-[Pruébalo en la Zona de Práctica](https://play.vuejs.org/#eNplkkGPmzAQhf/KKxdA3Rj1mpJUUdVDT22lHrlYxDRuYOzaJjRC/PcdxyGr3b2A7PfmmzcMc3awVlxGlW2z2rdO2wCvwmj3DenBGhcww6nuCZMM7QkLOmcG5FyRN9RQa8gH/BuVD9oQdtFb5Hm5KpL8pNx6/+vu8xj9KPv+CnYFqQnyhTFIdxb4vCkjpaFb32JVnyD9lVoUpKaVVmK3x9wQoLtXgtB0VP9/cOMveYk9Np/K5MM9l7jIflScLv990nTW9EcIwXNFR3DX1YwYk4dxyrNXTlIHdCrGyk8hWL+tqqvyZMQUukpaHYOnujdtilTLHPHXGyrKUiRH8i9obx+5UM4Z98j6Pu23qH/AVzP2R5CJRMl14aRw+PldIMdH3Bh3bnzxY+FcdZW2zPvlQ1CD7WVQfALquPToP/gzL4RHqsg89rJNWq3JjgGXzWCOqt812ao3GaqEqRKHcfO8/gDLkq7r6tEyW54Bf5TTlg==)
+[Pruébalo en la Zona de Práctica](https://play.vuejs.org/#eNp9U8Fy0zAQ/ZVFF9tDah96C2mZ0umhHKBAj7oIe52oUSQjyXEyGf87KytyoDC9JPa+p+e3b1cndtd15b5HtmQrV1vZeXDo++6Wa7nrjPVwAovtAgbh6w2M0Fqzg4xOZFxzXRvtPPzq0XlpNNwEbp5lRUKEdgPaVP925jnoXS+UOgKxvJAaxEVjJ+y2hA9XxUVFGdFIvT7LtEI5JIzrqjrbGozdOmikxdqTKqmIQOV6gvOkvQDhjrqGXOOQvCzAqCa9FHBzCyeuAWT7F6uUulZ9gy7PPmZFETmQjJV7oXoke972GJHY+Axkzxupt4FalhRcYHh7TDIQcqA+LTriikFIDy0G59nG+84tq+qITpty8G0lOhmSiedefSaPZ0mnfHFG50VRRkbkj1BPceVorbFzF/+6fQj4O7g3vWpAm6Ao6JzfINw9PZaQwXuYNJJuK/U0z1nxdTLT0M7s8Ec/I3WxquLS0brRi8ddp4RHegNYhR0M/Du3pXFSAJU285osI7aSuus97K92pkF1w1nCOYNlI534qbCh8tkOVasoXkV1+sjplLZ0HGN5Vc1G2IJ5R8Np5XpKlK7J1CJntdl1UqH92k0bzdkyNc8ZRWGGz1MtbMQi1esN1tv/1F/cIdQ4e6LJod0jZzPmhV2jj/DDjy94oOcZpK57Rew3wO/ojOpjJIH2qdcN2f6DN7l9nC47RfTsHg4etUtNpZUeJz5ndPPv32j9Yve6vE6DZuNvu1R2Tg==)
 
 ### Observar Tipos de Fuentes {#watch-source-types}
 
@@ -259,7 +264,7 @@ Podemos forzar que la llamada de retorno de un watcher se ejecute inmediatamente
 watch(
   source,
   (newValue, oldValue) => {
-    // ...
+    // se ejecuta inmediatamente, y luego otra vez cuando `source` cambia
   },
   { immediate: true }
 )
@@ -277,12 +282,16 @@ Es habitual que la llamada de retorno del watcher utilice exactamente el mismo e
 const todoId = ref(1)
 const data = ref(null)
 
-watch(todoId, async, () => {
-  const response = await fetch(
-    `https://jsonplaceholder.typicode.com/todos/${todoId.value}`
-  )
-  data.value = await response.json()
-}, { immediate: true })
+watch(
+  todoId,
+  async () => {
+    const response = await fetch(
+      `https://jsonplaceholder.typicode.com/todos/${todoId.value}`
+    )
+    data.value = await response.json()
+  },
+  { immediate: true }
+)
 ```
 
 En particular, observa cómo el watcher utiliza `todoId` dos veces, una como fuente y otra dentro del callback.

src/guide/reusability/composables.md

@@ -241,7 +241,7 @@ Nota como `toValue(url)` es llamado **dentro** de la llamada de retorno de `watc
 
 Esta versión de `useFetch()` acepta ahora tanto cadenas de URL estáticas, refs y getters, haciéndola mucho más flexible. El efecto observador se ejecutará inmediatamente, y rastreará cualquier dependencia accedida durante `toValue()`. Si ninguna dependencia es rastreada (por ejemplo, url ya es una cadena de texto), el efecto se ejecuta solo una vez; de lo contrario, volverá a ser ejecutado cuando una dependencia rastreada cambie.
 
-Aquí está [la versión actualizada de `useFetch()`](https://play.vuejs.org/#eNptVMFu2zAM/RXOFztYZncodgmSYAPWnTZsKLadfFFsulHrSIZEJwuC/PtIyXaTtkALxxT5yPf45FPypevyfY/JIln6yumOwCP13bo0etdZR3ACh80cKrvresIaztA4u4OUi9KLpN7jN6RqO53nxRjKHz1nlqayxhNslMc/roUVpFuizi+K4tFb07Wqwq1ta3Q5HTtd2RpzblqQra0vGCCW65oreaIs/ZjOxmAf8MYRs2wGq/XU6D3X5HvV9sj5Y8UJakVqDuicdXMGJHfk0VcTj4wxOX9ZRFVYD34h3PGchPwG8N2qGjobZlpIYLnpiayB/YfGulWZaNAGPpUJfK5aXT1JRIbXZbI+nUDD+bwsYklAL2lZ6z1X64ZTw2CcKcAM3a1/2s6/gzsJAzKL3hA6rBfAWCE536H36gEDriwwFA4zTSMEpox7L8+L/pxacPv4K86Brcc4jGjFNV/5AS3TlrbLzqHwkLPYkt/fxFiLUto85Hk+ni+LScpknlwYhX147buD4oO7psGK5kD2r+zxhQdLg/9CSdObijSzvVoinGSeuPYwbPSP6VtZ8HgSJHx5JP8XA2TKH00F0V4BFaAouISvDHhiNrBB3j1CI90D5ZglfaMHuYXAx3Dc2+v4JbRt9wi0xWDymCpTbJ01tvftEbwFTakHcqp64guqPKgJoMYOTc1+OcLmeMUlEBzZM3ZUdjVqPPj/eRq5IAPngKwc6UZXWrXcpFVH4GmVqXkt0boiHwGog9IEpHdo+6GphBmgN6L1DA66beUC9s4EnhwdeOomMlMSkwsytLac5g7aR11ibkDZSLUABRk+aD8QoMiS1WSCcaKwISEZ2MqXIaBfLSpmchUb05pRsTNUIiNkOFjr9SZxyJTHOXx1YGR49eGRDP4rzRt6lmay86Re7DcgGTzAL74GrEOWDUaRL9kjb/fSoWzO3wPAlXNB9M1+KNrmcXF8uoab/PaCljQLwCN5oS93+jpFWmYyT/g8Zel9NEJ4S2fPpYMsc7i9uQlREeecnP8DWEwr0Q==), con un retardo artificial y un error aleatorio para fines de demostración.
+Aquí está [la versión actualizada de `useFetch()`](https://play.vuejs.org/#eNp9Vdtu40YM/RVWL1ZQr5RF0JfAMXpLgRZtd5Fu90kvY4mKJ5FnhLnYMQz/+5IcSZF3g30IbPNyyHPIYU7ZL31f7CNmt9nK1073ATyG2K8ro3e9dQFO4LBdQm13fQzYwBlaZ3ewoKTFLCh6/ANDvZ38RTmaiidPkZWprfEBNsrj/66DO1hsQ+j9bVk+eWv6TtW4tV2DrgjHXte2wYKKlsE21pcEkNJ1Q5nUUb54v7gajVHwxhbz/Aru1lOhHymn2KsuIsWPGSdoVFBLQOeso57vJgI5gc0CHQZ3JHfCPFUGJjimQH1dGt6T5VyZVZnUJB3pR8Ad8QtIvwD+tqqB3gqXWzasNjEEa2D/rrXurso0aAM/VRn8XHe6fmYLk9ZVtj6dQMP5vCpTiqBXYdXoPWXrlkKFEEUyMEH36w+29z/AvfBEIhVNQIfNLRCWBBc79F49ouDy4CVx6GlqQXQg3Af+nNWn0JLKp2+pD+w8pmZYY8r5nT6gI9pcdtU7ZB7sSyXp95sYa1ZKm8eiKEb/qpykzJbZbMFofy/39aDIcd+2WIclBPtZ5nO5u5XBF0lpo6mDJrYXO5CGnbZAmk17Z2LH+zF60gJ95eK/WQO58kdTz1cIoCwphZ4a+EBsYIM0e4SWqwvlFMV1p91i+GROc/vWPoe23R4hbFEeRwrlLrbOGht9dwRvQYeFh+BU/UwPW3lQE0CDPZqG9uUIm+MFFyE4sifspOzdqPHwfF674eczcBZk5YJuda1VR0U6dQTqVpmGxpJWl+ULAOqgdICgd2jjUJTNBBANa30FB911/DyjM8KTrANP3SZmim38QIbSlsLcQfukS4oVlA1nM5DI8E77gUAYb4AngqkjmRCTFLZ8KAT9YlApkrJoMa0ZFTtDzTJCjsNqfTtJHCL54yxHCEaGXx0sOTKVeUPPykzrPKmX6g1IBg/wkZ4B6ZDnw6IsyflE051vKC3npwHgYnPp3rWQ/6PCtkiDI+8aroubGS0uJsAjeabPb/oyhEvm3I+cp3zxkBZBfi2uXlMHWZZwc30tVhbnTBcgeJpQqx9FaLoBgl5l/J9Ad+g+9KyDrzK6dsNIM9V19vCX2IKLuBzt9Rbr5zfsT/6FbVX2kd+r22OVTb6g3COG5L7/7198oe+Tc2eb2FH0d5wPLFLkHlPYr9E01PYsTrr9Uy4bnYVP/v4loPEjKW5U5JD4KqO79tt3qL+2e1PcSB6reP4CbzCltA==), con un retardo artificial y un error aleatorio para fines de demostración.
 
 ## Convenciones y Mejores Prácticas {#conventions-and-best-practices}
 

src/guide/scaling-up/testing.md

@@ -24,7 +24,7 @@ Cuando diseñes la estrategia de pruebas de tu aplicación Vue, debes aprovechar
 - **De componente**: Comprueba que tu componente se monta, se renderiza, se puede interactuar con él y se comporta como se espera. Estas pruebas importan más código que las pruebas unitarias, son más complejas y requieren más tiempo de ejecución.
 - **De extremo a extremo**: Comprueba las características que abarcan varias páginas y hace peticiones reales de red contra tu aplicación Vue hecha para producción. Estas pruebas a menudo implican la puesta en marcha de una base de datos u otro backend.
 
-Cada tipo de prueba desempeña un papel en la estrategia de pruebas de tu aplicación y cada una te protegerá contra diferentes tipos de problemas.
+Cada tipo de prueba desempeña un papel en la estrategia de pruebas de tu aplicación, y cada una te protegerá contra diferentes tipos de problemas.
 
 ## Generalidades {#overview}
 
@@ -140,7 +140,7 @@ const { getByText } = render(Stepper, {
 
 getByText('0') // Aserción implícita de que "0" está dentro del componente.
 
-const button = getByText('increment')
+const button = getByRole('button', { name: /increment/i })
 
 // Ejecuta un evento de clic al botón de incremento.
 await fireEvent.click(button)
@@ -244,7 +244,7 @@ Las pruebas de extremo a extremo no importan ningún código de tu aplicación d
 
 Las pruebas de extremo a extremo validan muchas de las capas de tu aplicación. Pueden apuntar a tu aplicación creada localmente o incluso a un entorno de prueba en vivo. Las pruebas contra el Entorno de prueba no sólo incluyen el código del frontend y el servidor estático, sino también todos los servicios y la infraestructura asociados del backend.
 
-> Cuanto más se parezcan sus pruebas a la forma en que se usa su software, más confianza le pueden brindar. - [Kent C. Dodds](https://twitter.com/kentcdodds/status/977018512689455106) - Autor de la Biblioteca de pruebas
+> Cuanto más se parezcan sus pruebas a la forma en como se usa su software, más confianza le pueden brindar. - [Kent C. Dodds](https://twitter.com/kentcdodds/status/977018512689455106) - Autor de la Biblioteca de pruebas
 
 Al probar cómo las acciones del usuario afectan su aplicación, las pruebas E2E suelen ser la clave para aumentar la confianza en el buen funcionamiento de una aplicación.
 
@@ -311,7 +311,7 @@ export default defineConfig({
 ```
 
 :::tip
-Si estás usando TypeScript, agrega `vitest/globals` al campo `types` en tu `tsconfig.json`.
+Si usas TypeScript, agrega `vitest/globals` al campo `types` en tu `tsconfig.json`.
 
 ```json
 // tsconfig.json
@@ -325,7 +325,7 @@ Si estás usando TypeScript, agrega `vitest/globals` al campo `types` en tu `tsc
 
 :::
 
-Luego, cree un archivo que termine en `*.test.js` en tu proyecto. Puedes colocar todos los archivos de prueba en un directorio de prueba en la raíz del proyecto, o en directorios de prueba junto a tus archivos fuente. Vitest los buscará automáticamente usando la convención de nomenclatura.
+Luego, crea un archivo que termine en `*.test.js` en tu proyecto. Puedes colocar todos los archivos de prueba en un directorio de prueba en la raíz del proyecto o en directorios de prueba junto a tus archivos fuente. Vitest los buscará automáticamente usando la convención de nomenclatura.
 
 ```js
 // MyComponent.test.js
@@ -417,7 +417,7 @@ export function withSetup(composable) {
   })
   app.mount(document.createElement('div'))
   // devolver el resultado y la instancia de la aplicación
-  // para probar provide / unmount
+  // para probar provide/unmount
   return [result, app]
 }
 ```

src/guide/scaling-up/tooling.md

@@ -89,7 +89,7 @@ Artículo principal: [Usando Vue con TypeScript](/guide/typescript/overview).
 
 - [Volar](https://github.com/johnsoncodehk/volar) proporciona comprobación de tipos para SFC usando bloques `<script lang="ts">`, incluyendo expresiones de plantilla y validación de props entre componentes.
 
-- Utiliza [`vue-tsc`](https://github.com/vuejs/language-tools/tree/master/packages/vue-tsc) para realizar la misma comprobación de tipos desde la línea de comandos, o para generar archivos `d.ts` para SFC.
+- Utiliza [`vue-tsc`](https://github.com/vuejs/language-tools/tree/master/packages/tsc) para realizar la misma comprobación de tipos desde la línea de comandos, o para generar archivos `d.ts` para SFC.
 
 ## Testing {#testing}
 

src/translations/index.md

@@ -18,6 +18,7 @@ aside: false
 
 ## Idiomas en Curso {#work-in-progress-languages}
 
+- [فارسی / Persian](https://fa.vuejs.org/) [[fuente](https://github.com/vuejs-translations/docs-fa)]
 - [Español / Español](https://vue3-spanish.netlify.app/) [[fuente](https://github.com/drfcozapata/docs/tree/spanish-translation)]
 
 ## Iniciar una nueva Traducción {#starting-a-new-translation}

src/tutorial/src/step-10/App/template.html

@@ -1,4 +1,4 @@
 <p>Id de la tarea: {{ todoId }}</p>
-<button @click="todoId++">Recuperar la próxima tarea</button>
+<button @click="todoId++ :disabled="!todoData">Recuperar la próxima tarea</button>
 <p v-if="!todoData">Cargando...</p>
 <pre v-else>{{ todoData }}</pre>