import{r as d,j as r,k as l,l as h,x as k,I as t,q as i,B as c,E as u}from"./chunks/framework.DBq_LYX4.js";const E={__name:"basico",setup(o){const e=d("");return(a,s)=>{const n=r("SisdaiAreaTexto");return l(),h(n,{etiqueta:"Nombre de la etiqueta",ejemplo:"Ejemplo",es_obligatorio:!1,es_etiqueta_visible:!0,modelValue:e.value,"onUpdate:modelValue":s[0]||(s[0]=p=>e.value=p),texto_ayuda:"Texto de ayuda."},null,8,["modelValue"])}}},m={id:"ejemplos"},F=JSON.parse('{"title":"Area de texto","description":"","frontmatter":{},"headers":[],"relativePath":"componentes/area-texto/index.md","filePath":"componentes/area-texto/index.md","lastUpdated":1734462742000}'),g={name:"componentes/area-texto/index.md"},q=Object.assign(g,{setup(o){return(e,a)=>(l(),k("div",null,[a[3]||(a[3]=t(`

Area de texto ​

El componente SisdaiAreaTexto permite tener campos de entrada multilínea vinculados siempre a una etiqueta corrigiendo así el error más común de accesibilidad. Opcionalmente podemos definir si es obligatorio, agregar un texto de ejemplo y un mensaje de ayuda para que la persona usuaria comprenda como debe llenarse el campo.

Uso ​

Para utilizar el componente SisdaiAreaTexto, se necesita proporcionar el texto que aparecerá en la etiqueta,

A continuación, se muestra un ejemplo de uso de etiqueta simple:

html
<SisdaiAreaTexto
  etiqueta="Nombre de la etiqueta"
  ejemplo="Ejemplo"
  texto_ayuda="Texto de ayuda."
  :es_obligatorio="false"
  :es_etiqueta_visible="true"
  v-model="areaEjemplo"
/>

Accesibilidad ​

Al utilizar el componente SisdaiAreaTexto nos aseguramos que la etiqueta y el área de texto siempre estén vinculados, ya sea visible su etiqueta o no.

Validaciones ​

Actualmente el componente SisdaiAreaTexto valida automáticamente cuando es requerido, mostrando el mensaje de error 'Este campo no puede quedar vacío. '. Las implementaciones de otros tipos de error deberán crearse en el momento de su uso.

Vista simplificada ​

En la vista simplificada el componente SisdaiAreaTexto no se modifica en diseño ni en comportamiento.

API ​

Este componente admite las siguientes propiedades y eventos:

Propiedades ​

Métodos ​

Este componente no cuenta con métodos públicos.

Eventos ​

Este componente no dispara eventos externos.

Slots ​

Este componente no permite contenido con slots.

`,4)),i("section",m,[a[0]||(a[0]=i("h2",{id:"ejemplos-de-uso",tabindex:"-1"},[c("Ejemplos de uso "),i("a",{class:"header-anchor",href:"#ejemplos-de-uso","aria-label":'Permalink to "Ejemplos de uso"'},"​")],-1)),a[1]||(a[1]=i("p",null,"El siguiente ejemplo muestra cómo utilizar el area de texto:",-1)),u(E),a[2]||(a[2]=t(`
vue
<script setup>
import { ref } from 'vue'
const areaEjemplo = ref('')
</script>
<template>
  <SisdaiAreaTexto 
    etiqueta="Nombre de la etiqueta"
    ejemplo="Ejemplo"
    :es_obligatorio="false"
    :es_etiqueta_visible="true"
    v-model="areaEjemplo"
    texto_ayuda="Texto de ayuda."
  />
</template>
`,1))])]))}});export{F as __pageData,q as default};