{"id":26562826,"url":"https://github.com/centrogeo/sisdai-componentes","last_synced_at":"2025-03-22T15:28:56.080Z","repository":{"id":270929350,"uuid":"883483661","full_name":"CentroGeo/sisdai-componentes","owner":"CentroGeo","description":null,"archived":false,"fork":false,"pushed_at":"2025-01-04T05:32:46.000Z","size":24509,"stargazers_count":1,"open_issues_count":3,"forks_count":1,"subscribers_count":6,"default_branch":"main","last_synced_at":"2025-03-04T12:28:12.298Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"Vue","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"lgpl-3.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/CentroGeo.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-11-05T03:27:13.000Z","updated_at":"2025-01-04T05:32:05.000Z","dependencies_parsed_at":"2025-01-04T05:43:30.650Z","dependency_job_id":"85660d27-bf04-4940-865c-a830caad3ae2","html_url":"https://github.com/CentroGeo/sisdai-componentes","commit_stats":null,"previous_names":["centrogeo/sisdai-componentes"],"tags_count":131,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CentroGeo%2Fsisdai-componentes","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CentroGeo%2Fsisdai-componentes/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CentroGeo%2Fsisdai-componentes/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CentroGeo%2Fsisdai-componentes/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/CentroGeo","download_url":"https://codeload.github.com/CentroGeo/sisdai-componentes/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":244977600,"owners_count":20541696,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2025-03-22T15:28:55.459Z","updated_at":"2025-03-22T15:28:56.073Z","avatar_url":"https://github.com/CentroGeo.png","language":"Vue","funding_links":[],"categories":[],"sub_categories":[],"readme":"# sisdai-componentes\n\nEl proyecto sisdai-componentes es una biblioteca de componentes reutilizables de\nVue alineada al Sistema de Diseño y Accesibilidad para la\nInvestigación ([Sisdai](https://sisdai.conahcyt.mx/)). El Sisdai es un proyecto\nde investigación desarrollado por el\nCentro de Investigación en Ciencias de Información Geoespacial, A.C.\n([CentroGeo](https://www.centrogeo.org.mx/)) y coordinado por el Consejo\nNacional de Humanidades, Ciencias y Tecnologías\n([Conahcyt](https://conahcyt.mx)) del Gobierno de México.\n\nPara leer la documentación de la biblioteca, puedes visitar el sitio\n[sisdai-componentes.conahcyt.mx](https://sisdai-componentes.conahcyt.mx)\no levantar la documentación localmente siguiendo las instrucciones escritas en\nla sección [Uso local del proyecto](#uso-local-del-proyecto) de este\ndocumento.\n\nCualquier persona puede hacer uso de esta biblioteca al clonarla e instalarla en su equipo a través del\n**protocolo HTTPS** o bien instalándola mediante [npm](https://www.npmjs.com/~centrogeomx).\n\n## Utilidades\n\n- Homologa los estilos utilizando el sistema de diseño [Sisdai](https://sisdai.conahcyt.mx).\n- Mejora la accesibilidad mediante el uso de html semántico y aplicando las reglas establecidas en [Sisdai](https://sisdai.conahcyt.mx).\n- Facilita la actualización de elementos institucionales requeridos como cabeceras y pies de páginas que se editan cada año.\n- Facilita y reduce el código de elementos de uso común como barras de navegación, menús, tarjetas, etc.\n\n## Instalación y uso\n\nSi tu proyecto está creado con el [proyecto-base](https://github.com/CentroGeo/sisdai-proyecto-base), tiene incluida una versión estable de sisdai-componentes y no requiere ningún paso de instalación ni importación.\n\n### Instala la biblioteca\n\nEn la carpeta principal de tu proyecto Vue puedes instalar la última versión de sisdai-componentes mediante dos opciones:\n\n**Opción A.** Desde el repositorio del [sisdai-componentes en npm](https://www.npmjs.com/package/@centrogeomx/sisdai-componentes).\n\nEn la línea de comando escribe\n```bash\nnpm i @centrogeomx/sisdai-componentes\n```\n\n**Opción B.** Desde el repositorio de [sisdai-componentes en github.com](https://github.com/CentroGeo/sisdai-componentes).\n\nEn la línea de comando escribe\n```bash\nnpm install git+https://github.com/CentroGeo/sisdai-componentes\n```\n\n### Importa la biblioteca\n\nEn el archivo `main.js` de tu proyecto Vue, importa todos los componentes de la biblioteca con:\n\n```js\n// src/main.js\n\nimport SisdaiComponentes from 'sisdai-componentes/src/index'\n\nVue.use(SisdaiComponentes)\n```\n\n### Uso\n\nEn cualquier vista en la sección `\u003ctemplate\u003e` de tu proyecto puedes utilizar cualquier componente de la biblioteca, sin necesidad de importarlo en el script. Por ejemplo:\n\n```js\n\u003ctemplate\u003e\n\n  \u003cSisdaiBotonFlotante :enlaces=\"[{...}]\" /\u003e\n\n\u003c/template\u003e\n```\n\n_Para un uso avanzado revisa la documentación._\n\n## Actualización de la biblioteca\n\nSi necesitas utilizar otra versión, ubícate en la carpeta del proyecto en donde necesitas la actualización e instala la versión que requieres nuevamente usando una de estas dos opciones\n\n**Opción A.** Para versiones publicadas en el repositorio de [sisdai-componentes en npm](https://www.npmjs.com/package/@centrogeomx/sisdai-componentes).\n\n```bash\nnpm i @centrogeomx/sisdai-componentes@vN.N.N\n```\n\n**Opción B.** Para cualquier versión desde el repositorio de [sisdai-componentes en github.com](https://github.com/CentroGeo/sisdai-componentes).\n```bash\nnpm install git+https://github.com/CentroGeo/sisdai-componentes#vN.N.N\n```\n\ndonde N.N.N indica el número de versión, por ejemplo v1.0.0\n\nConsulta el archivo `CHANGELOG.md` del repositorio de [sisdai-componentes en github.com](https://github.com/CentroGeo/sisdai-componentes) para conocer las nuevas características y cambios que sufre la biblioteca en cada una de sus versiones.\n\n\n## Listado de componentes\n\n| Componente                 | Descripción                                                                                                                                                     | Propiedades                                                                                                                                                          | Secciones (v-slot)                                               |\n| -------------------------- |-----------------------------------------------------------------------------------------------------------------------------------------------------------------| -------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------- |\n| SisdaiAreaTexto            | Campo de entrada de texto multilinea con funciones de accesibilidad básica ajustadas.                                                                           | etiqueta=\"`texto`\" ejemplo=\"`texto`\" texto_ayuda=\"`texto`\" :es_etiqueta_visible=\"`boleano`\" :es_obligatorio=\"`boleano`\"                                              | NA                                                               |\n| SisdaiAudio                | Permite reproducir audios en el navegador.                                                                                                                      | archivo=\"`texto`\"                                                                                                                                                    | `\u003ctemplate v-slot:encabezado\u003e`                                   |\n| SisdaiBotonFlotante        | Botón circular fijo en la pantalla que se expande para mostrar múltiples enlaces.                                                                               | :enlaces=\"`[{arreglo de objetos}]`\"                                                                                                                                  | NA                                                               |\n| SisdaiBotonRadio           | Botón de radio con funciones de accesibilidad básica ajustadas.                                                                                                 | etiqueta=\"`texto`\" :es_obligatorio=\"`boleano`\" v-model=\"`texto` o `numero`\" value=\"`texto` o `numero`\" name=\"`texto`\"                                                | NA                                                               |\n| SisdaiBotonesRadioGrupo    | Grupo de formulario para botones de radio con funciones de accesibilidad básica ajustadas.                                                                      | leyenda=\"`texto`\" texto_ayuda=\"`texto`\" :es_obligatorio=\"`boleano`\" :es_vertical=\"`boleano`\"                                                                         | NA                                                               |\n| SisdaiCampoBase            | Campo de entrada con funciones de accesibilidad básica ajustadas.                                                                                               | etiqueta=\"`texto`\" tipo=\"`texto`\" ejemplo=\"`texto`\" texto_ayuda=\"`texto`\" :es_etiqueta_visible=\"`boleano`\" :es_obligatorio=\"`boleano`\"                               | NA                                                               |\n| SisdaiCampoBusqueda        | Permite a las personas usuarias encontrar rápidamente contenido específico.                                                                                     | :catalogo=\"`[arreglo]`\" :catalogoAnidado=\"`boleano`\" catalogoAnidadoPropiedadElementos=\"`texto`\" propiedadBusqueda=\"`texto`\" etiqueta=\"`texto`\"                      | NA                                                               |\n| SisdaiCasillaVerificacion  | Casilla de verificación con funciones de accesibilidad básica ajustadas.                                                                                        | titulo=\"`texto`\" etiqueta=\"`texto`\" texto_ayuda=\"`texto`\" :es_obligatorio=\"`boleano`\" :es_ayuda_visible=\"`boleano`\" model_value=\"`boleano` ó `arreglo`\"              | NA                                                               |\n| SisdaiColapsableNavegacion | Lista de enlaces, y/o sublistas de enlaces con título.                                                                                                          | titulo=\"`texto`\" :colapsado=\"`boleano`\" :avisarMenuLateral=\"`boleano`\"                                                                                               | `\u003ctemplate v-slot:encabezado\u003e` `\u003ctemplate v-slot:contenido\u003e`     |\n| SisdaiControlAcercarAlejar | Se utiliza para manipular la escala visual de un elemento o área dentro de una aplicación o sitio web.                                                          | value=\"`número entero`\" min=\"`número entero`\" max=\"`número entero`\" step=\"`número entero`\"                                                                           | NA                                                               |\n| SisdaiControlDeslizante    | Consiste en un elemento `\u003cinput type=\"range\"\u003e` con el que la usuaria puede estableer un valor dentro de un rango moviendo un indicador a lo largo de una barra. | val_min=\"`número entero`\" val_max=\"`número entero`\" val_entrada=\"`número entero`\"                                                                                    | NA                                                               |\n| SisdaiEnlaceExterno        | Funciona para crear enlaces externos dentro de párrafos u otros elementos.                                                                                      | enlace=\"`texto`\" texto=\"`texto`\"                                                                                                                                     | NA                                                               |\n| SisdaiImagenPngWebp        | Permite indicar el nombre de dos archivos existentes como insumos del proyecto en formato png y webp.                                                           | dominio=\"`texto`\" ruta=\"`texto`\" textoAlternativo=\"`texto`\" leyenda=\"`texto`\" ancho_maximo=\"`porcentaje%`\"                                                           | NA                                                               |\n| SisdaiIndiceDeContenido    | Menú de navegación para el contenido de una vista.                                                                                                              | titulo=\"`texo`\" :altura=\"`número entero`\" id_indice=\"`texto`\"                                                                                                        | `\u003ctemplate slot=\"contenido-indice-contenido\"\u003e`                   |\n| SisdaiInfoDeDespliegue     | Información acerca del versionamiento, el ambiente y la fecha de despliegue.                                                                                    | versionProyecto=\"`texto`\" entornoProyecto=\"`texto`\" actualizacionProyecto=\"`texto`\"                                                                                  | NA                                                               |\n| SisdaiMenuAccesibilidad    | El Menú de accesibilidad para activar/desactivar funciones de accesibilidad en el sitio web.                                                                    | :agregarOpciones=\"`[arreglo]`\" nombreModuloStore=\"`texto`\" :objetoStore=\"`{objeto} `\" perfilColor=\"`texto`\"                                                          | NA                                                               |\n| SisdaiMenuLateral          | Menú lateral fijo que se colapsa en dispositivos pequeños.                                                                                                      | NA                                                                                                                                                                   | `\u003ctemplate slot=\"contenido-menu-lateral\"\u003e`                       |\n| SisdaiModal                | Ventana emergente con información variada que bloquea el resto del contenido de la vista hasta que se cierre.                                                   | tituloModal=\"`texto`\" (puede ser con elementos html) tamanioModal=\"`nombre de clase`\" (el nombre de la clase puede modal-grande)                                     | `\u003ctemplate v-slot:cuerpo\u003e` `\u003ctemplate v-slot:pie\u003e`               |\n| SisdaiNarrativa            | Sección que muestra contenido y cambia la imagen de fondo y/o textos, dependiendo de la posición del scroll.                                                    | id=\"`texto`\" :depurador=\"`boleano`\" :altura_sensor=\"`número decimal`\" :separacion=\"`número entero`\" :posicion_inicial=\"`número entero`\"                              | NA                                                               |\n| SisdaiNavegacionGobMx      | Barra de navegación del Gobierno de México.                                                                                                                     | NA                                                                                                                                                                   | NA                                                               |\n| SisdaiNavegacionPrincipal  | Barra de navegación principal del sitio. Dentro de sus etiquetas se agrega el menú principal del sitio.                                                         | navInformacion=\"`html`\" :fija=\"`boleano`\"                                                                                                                            | `\u003ctemplate v-slot:identidad\u003e` `\u003ctemplate v-slot:complementario\u003e` |\n| SisdaiPestanias  | Permite controlar de forma interactiva la visibilidad de un conjunto de elementos por sección en diferentes paneles.                                                         | idAriaLabelledby=\"`texto`\"                                                                                                                            | `\u003ctemplate v-slot:contenido-pestanias\u003e` `\u003ctemplate v-slot:contenido-paneles\u003e` |\n| SisdaiPiePaginaConahcyt    | El pie de página del Conahcyt                                                                                                                                   | NA                                                                                                                                                                   | NA                                                               |\n| SisdaiPiePaginaGobMx       | El pie de página del Gobierno de México.                                                                                                                        | NA                                                                                                                                                                   | NA                                                               |\n| SisdaiSelector             | Selector de opciones con funciones de accesibilidad básica ajustadas.                                                                                           | etiqueta=\"`texto`\" instruccional=\"`texto`\" texto_ayuda=\"`texto`\" :es_etiqueta_visible=\"`boleano`\" :es_instruccional_visible= \"`boleano`\" :es_obligatorio=\"`boleano`\" | slot sin nombre                                                  |\n\n## Uso local del proyecto\n\n### Pasos previos recomendados\n\nPara desarrollar este proyecto se usa [node.js](https://nodejs.org/en) como\nentorno de ejecución de JavaScript. La opción recomendada para instalarlo es\n[vía nvm](https://github.com/nvm-sh/nvm) que es el manejador de versiones de\nnode. Siguiendo este camino, también se instalará el manejador de paquetes\n[npm](https://www.npmjs.com/). Las instrucciones de instalación\ny dependencias del proyecto se muestran aquí usando tanto npm, como nvm.\n\n### Dependencias\n\n- [node.js (^18)](https://nodejs.org/en/download/)\n- [npm (^9)](https://www.npmjs.com/get-npm)\n\n### Instalación\n\nSe puede clonar e instalar este proyecto en tu equipo\nutilizando **sólo el protocolo HTTPS**, es decir:\n\n```bash\ngit clone https://github.com/CentroGeo/sisdai-componentes.git\n```\n\nEstablece la versión adecuada de npm y nvm (previamente instaladas).\n\n```bash\nnvm use 22\n```\n\nInstala las dependencias de la biblioteca.\n\n```bash\nnpm install\n```\n\nOpcionalmente levanta en local la documentación.\n\n```bash\nnpm run docs\n```\n## Testing\n\nSi deseas correr el testing puedes ejecutar el siguiente comando, el cual implementará las pruebas unitarias:\n\n```bash\nnpm run test\n```\n\nAdicionalmente puedes ejecutar el siguiente comando para evaluar el porcentaje de código que se ha testeado y visualizar el avance en un servidor local.\n```bash\nnpm run coverage\n```\n\nHasta la versión v4.2.2, las pruebas unitarias que se han implementado son las siguientes:\n\nLas pruebas realizadas en los **componentes** son:\n\n- Renderizado del componente\n- Manejo de props\n- Renderizado de slots\n- Interacciones de la usuaria (click)\n- Emisión de eventos\n- Afirmación de atributos, valores y texto\n- Manejo de propiedades y métodos\n- Intercepción de funciones\n- Creación de selectores html por atributo `testid=\"\"`\n\nLas pruebas realizadas en los **composables** son:\n\n- Renderizado de mock en app\n- Manejo de instancias en propiedades y métodos\n\nLas pruebas realizadas en el **store** son:\n\n- Instanciado del módulo de accesibilidad\n- Manejo de estados y acciones\n\nSi deseas conocer más acerca de [TEST.md](./TEST.md)\n\n## Licencia\n\n**SOFTWARE LIBRE Y ESTÁNDARES ABIERTOS**\n\nSisdai y sisdai-componentes están alineadas a las disposiciones establecidas por\nla Coordinación de Estrategia Digital Nacional (\nDOF:06/09/2021) en donde se estipula que las \"políticas y disposiciones tienen\ncomo objetivo fortalecer el uso del software\nlibre y los estándares abiertos, fomentar el desarrollo de aplicaciones\ninstitucionales con utilidad pública, lograr la\nautonomía, soberanía e independencia tecnológicas dentro de la APF\". En el\nartículo 63 se explicita que \"cuando se trate\nde desarrollos basados en software libre, se respetarán las condiciones de su\nlicenciamiento original [...]\".\n\nConsiderando lo anterior, sisdai-componentes se publica bajo la licencia\n[LGPLv3](https://www.gnu.org/licenses/lgpl-3.0.html). Dicha licencia se puede\nconsultar en el archivo _LICENSE_ de este repositorio.\nEsta licencia se encuentra disponible en inglés porque aunque el Sisdai privilegia\nel idioma español se respeta la versión original de acuerdo al proyecto\n[GNU](https://www.gnu.org/licenses/licenses.html).\n\n## Contribuir\n\nPor el momento sólo quienes sean\nparte de un equipo de investigación del capítulo de un [ENI](https://eni.conahcyt.mx)\npodrán levantar issues en este repositorio. El equipo del [Sisdai](https://sisdai.conahcyt.mx/acerca-de) se encargará de mantenerlo.\n\n---\n\n### ¿Cómo agregar nuevos componentes?\n\n#### Estructura\n\n- Los nuevos componentes se agregan en la carpeta `src/componentes`.\n- Cada componente se agrega en su propio\n  directorio `src/componentes/nuevo-componente`.\n- Dentro la carpeta de cada componente deberán existir todos los archivos\n  necesarios para dar funcionalidad a ese componente.\n- El archivo con extensión `.vue` y un `index.js` son necesarios\n\nEjemplo de estructura\n\n```bash\nsisdai-componentes/\n└── src\n    └── componentes\n        └── componente-nuevo    #carpeta del componente\n            ├── ComponenteNuevo.vue\n            └── index.js\n```\n\n#### Componente .vue\n\n- Usa [Composition API](https://vuejs.org/guide/introduction.html#composition-api) para el desarrollo\n- Evita el uso de preprocesadores de estilos, usa css en vez de scss o\n  sass\n- En la medida de lo posible se evita la llamada de métodos al router de vue, si\n  un componente por su funcionalidad requiere de esta dependencia o de otra\n  similar deberás especificarlo en la documentación de uso del componente\n- Apégate a los estilos de código definidos en las configuraciones del\n  proyecto: _eslint, prettier,editorconfig y vscode-settings_\n\n#### Script de instalación en index.js\n\nDentro del archivo `index.js` que acompaña al componente, agrega un código\nde instalación como el siguiente:\n\n```javascript\n// /src/componentes/componente-nuevo/index.js\n\nimport ComponenteNuevo from './ComponenteNuevo.vue'\n\nconst plugin = {\n  install: function (Vue) {\n    Vue.component(ComponenteNuevo.__name, ComponenteNuevo)\n  },\n}\n\nexport default plugin\n```\n\nPara que funcione el archivo anterior, deberá integrarse con los\narchivos `src/index.js` y `src/componentes/index.js`. Cuando se agregue un nuevo\ncomponente también deberán de modificarse estos mismos.\n\n```bash\nsisdai-componentes/\n└── src\n    ├── componentes\n    │   ├── componente-nuevo\n    │   │   ├── ComponenteNuevo.vue\n    │   │   └── index.js   #index de componente-nuevo/\n    │   └── index.js    #index de componentes/\n    └── index.js     #index de src/\n\n\n```\n\nEn el siguiente archivo se indexan todos los componentes para que sean\naccesibles a nivel `src/componentes`\n\n```javascript\n// /src/componentes.js\nimport ComponenteNuevo from './componente-nuevo'\n\nexport {\n...\nComponenteNuevo, // agregar al final de las exportaciones\n}\n\n```\n\nFinalmente, en el siguiente archivo se agrega el nuevo componente al script\nglobal de instalación\n\n```js\n// /src/index.js\n\nimport {\n\n...\nComponenteNuevo, //se importa el componente\n}\nfrom\n'./components'\n\nconst plugin = {\n  install: function (Vue) {\n  ...\n    Vue.use(ComponenteNuevo) // y se agrega el vue.use al final de este bloque\n  },\n}\n\nexport default plugin\n```\n\n#### Uso del store en componentes\n\nLos componentes que hagan uso de variables de estado globales podrán hacerlo,\npero sin comprometer o condicionar el funcionamiento de la biblioteca en general\nal tener un _store_ como requisito. Es decir, si la aplicación no ocupa estos\ncomponentes que usan el store, la persona usuaria de la biblioteca no debería necesitar\ninstalar un store.\n\nLas variables y métodos del store que usen los componentes de esta biblioteca se\nimplementarán de tal manera que solo se ofrezca la estructura del mismo, sin\ntener dependencia directa con la biblioteca de _store_.\n\n**Ejemplo, teniendo estos componentes**\n\n- ComponenteA usa store\n- ComponenteB no usa store\n- ComponenteC no usa store\n\n  Pensando en una aplicación muy sencilla que **no requiere** usar _ComponenteA_\n  , la persona usuaria de la biblioteca no se ve obligada a instalar un store, y dado\n  que solo usa _ComponenteB_ y _ComponenteC_ estos deberían funcionar\n  perfectamente sin ninguna instalación adicional.\n\n  En caso contrario, que el _ComponenteA_ sea utilizado, entonces es requisito\n  instalar un store ([VUEX](https://vuex.vuejs.org/)) y en la\n  definición del mismo dar de alta la estructura que esta misma biblioteca\n  ofrece.\n\nLa ubicación de la estructura de los stores que ofrezca esta biblioteca\nes `/src/stores/nombre-del-nuevo-store.js`\n\n**NOTA**\n\nEn la primera versión el único módulo que ocupa esta biblioteca es el de **\nAccesibilidad**\n\n#### Agregando el componente a la documentación vuepress\n\nCada componente ofrecido por la presente biblioteca deberá contar con 3\nsecciones de documentación indispensables:\n\n- Breve descripción del componente\n- API\n- Ejemplos de uso\n\n#### Ubicación de archivos\n\nEn la carpeta `docs` existe un proyecto\nde [VuePress](https://vuepress.vuejs.org/) para desplegar la documentación.\n\nCada componente agregado en la biblioteca también debe ser agregado en la\ncarpeta `docs`.\n\n- **1.-** Crea una carpeta `docs/documentacion/nombre-nuevo-componente` y\n  dentro de la misma agrega un archivo index.md en donde se integre toda la\n  documentación necesaria del componente y sus ejemplos.\n\n- **2.-** Dentro del archivo `docs/.vuepress/theme/LayoutDocumentacion.vue` debe\n  agregarse el enlace a la página de documentación del componente que se esté\n  trabajando. Lo anterior dentro del componente `SisdaiMenuLateral`\n\n  ```html\n  \u003cSisdaiMenuLateral\u003e\n    \u003ctemplate slot=\"contenido-menu-lateral\"\u003e\n      \u003cul\u003e\n        ... enlaces ya existentes de documentacion de componentes\n        \u003cli\u003e\n          \u003crouter-link to=\"/documentacion/nombre-nuevo-componente\"\u003e\n            NuevoComponente\n          \u003c/router-link\u003e\n        \u003c/li\u003e\n      \u003c/ul\u003e\n    \u003c/template\u003e\n  \u003c/SisdaiMenuLateral\u003e\n  ```\n\n- **3.-** Crea los ejemplos del componente en archivos `.vue` y\n  deposítalos en una carpeta\n  nueva: `docs/.vuepress/components/nombre-nuevo-componente/`. Agrega todos\n  los que se considere necesarios.\n\n  Para la integración de los ejemplos en los archivos _markdown_, se hace vía el\n  componente `utils-ejemplo-doc`, dentro de la sección para este mismo propósito\n\n  ```md\n  ... contenido del archivo markdown\n\n  \u003cutils-ejemplo-doc ruta=\"nombre-nuevo-componente/nombre-ejemplo.vue\"/\u003e\n  ```\n\n#### Compilación y actualización\n\nPara las personas colaboradoras de este proyecto, la documentación se puede\ncompilar para su despliegue en desarrollo usando:\n\n```bash\nnpm run docs:build\n```\n\nY para su despliegue en producción:\n\n```bash\nnpm run build\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcentrogeo%2Fsisdai-componentes","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcentrogeo%2Fsisdai-componentes","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcentrogeo%2Fsisdai-componentes/lists"}