1.5.3 • Published 8 months ago

@jaalorsa/j5-components v1.5.3

Weekly downloads
-
License
MIT
Repository
github
Last release
8 months ago

Static Badge deploy

J5-Components: Librería web components

Descripción

Librería de componentes web, para ayudar al desarrollador javascript en su día a día. Como la librería está hecha en javascript vanilla, se puede utilizar en cualquier proyecto javascript, sin importar el framework usado.

Instalación

npm install @jaalorsa/j5-components

Uso

<!-- En el HTML -->
<j5-toggle></j5-toggle>
// main.js
// Importar la librería y seleccionar el componente que se desea utilizar
import { j5Toggle } from "@jaalorsa/j5-components";
// Iniciar el componente al ejecutar la función
j5Toggle();

Características

Las característica que tiene la librería J5-Components son:

  • J5-Components está hecha con Typescript, por lo que si se usa cualquier IDE con autocompletado, tiene a disposición la ayuda del IDE.
  • Toda etiqueta tiene que tener etiqueta de apertura y cierre.
  • Posibilidad de insertar componentes web en cualquier lugar de la página web.
  • Flexibilidad de los componentes, al permitir personalizares los estilos y funcionalidades.

  • Todos los componentes heredan de una clase Abstracta, la cual tiene una función, llamada getElement o getElements, que permite acceder a cualquier elemento interno del Shadow Dom.

    const toggle = document.querySelector("j5-toggle");
const containerShadow = toggle.getElement(".j5-toggle__container");

  • Personalizar los estilos de los componentes de acuerdo a la necesidad del proyecto. Cada componente tiene definidas unas variables de CSS, que al reescribirlas se pueden personalizar los estilos. También los tamaños vienen definidos en unidades em, por lo que modificando el font-size de un componente, se puede modificar el tamaño de todos los componentes. Además, componentes que no tengan ShadowDom, se puede personalizar todo lo que se requiera. TENER EN CUENTA los fundamentos de CSS en el tema de especificidad. Más información en: CSS Especificidad

    j5-toggle {
  font-size: 10px;
  --backWidth: 6em;
  --backHeight: 3em;
  --backColorActive: green;
  --backColorInactive: gray;
  ...;
}

Componentes

Instrucciones

En el html se usa la etiqueta j5-carousel. Este componente usa Shadow Dom, por lo tanto, cuando se requiera modificar estilos, se hacen a través de las variables de CSS.

<j5-carousel></j5-carousel>

En el archivo de entrada Js se importa la librería y se ejecuta la función j5Carousel.

// main.js
// Importar la librería y seleccionar j5Carousel
import { j5Carousel } from "@jaalorsa/j5-components";
// Iniciar el componente al ejecutar la función
j5Carousel();

Se puede insertar el componente desde javascript:

const carousel = document.createElement("j5-carousel");
carousel.setAttribute("count-slides", "3");
carousel.setAttribute("transition-auto", "8000");
carousel.innerHTML = `
  <div class="item"><span>1</span></div>
  <div class="item"><span>2</span></div>
  <div class="item"><span>3</span></div>
  <div class="item"><span>4</span></div>
  <div class="item"><span>5</span></div>
  <div class="item"><span>6</span></div>
`;
body.appendChild(carousel);

Valores por defecto

Se encuentra en el selector CSS de etiqueta j5-carousel

j5-carousel {
  display: block;
  width: fit-content;
  font-size: 16px;
  --color_back_arrows: #252525;
  --color_icon: #fff;
  --size_arrows: 1.5em;
  --size_icon: 1.5em;
}

Nombre de las clases de los elementos internos

  "root": "j5-carousel",
  "container": "j5-carousel__container",
  "arrow": "j5-carousel__arrow",
  "arrowLeft": "j5-carousel__arrow--left",
  "arrowRight": "j5-carousel__arrow--right",
  "slides": "j5-carousel__slides",
  "slot": "j5-carousel__slot"

Atributos

  • count-slides number: La cantidad máxima de elementos visualizados. Por defecto, es 3. Nota: Es importante aclarar que el ancho asignado al web component, afecta este comportamiento.
    <j5-carousel count-slides="2">
  <div class="item"><span>1</span></div>
  <div class="item"><span>2</span></div>
  <div class="item"><span>3</span></div>
  <div class="item"><span>4</span></div>
  <div class="item"><span>5</span></div>
  <div class="item"><span>6</span></div>
</j5-carousel>
  • transition-autonumber: Activar la transición automática del slider; si no se añade el atributo, la transición automática no se activará. Recibe un número que representa los milisegundos para hacer la transición. Nota: Este es una atributo no reactivo, por lo que no se puede reasignar luego de que el componente se monta en el DOM.
    <j5-carousel transition-auto="5000">
  <div class="item"><span>1</span></div>
  <div class="item"><span>2</span></div>
  <div class="item"><span>3</span></div>
  <div class="item"><span>4</span></div>
  <div class="item"><span>5</span></div>
  <div class="item"><span>6</span></div>
</j5-carousel>

Instrucciones

En el html se usa la etiqueta j5-collapse. Este es un componente que no usa el Shadow DOM, por lo tanto, se puede asignar estilos desde el proyecto padre. Para eso, hay que tener claro el concepto de específicidad, ya que los estilos del web component se montan luego de cargar el DOM.

Para usar este componente, se requiere asignar dos secciones: una para el resumen y otra para el contenido. Para esto, se usa el atributo slot con los valores summary y content.

<j5-collapse>
  <section slot="summary">
    <div class="container">
      <h2>El lorem</h2>
    </div>
  </section>
  <section slot="content">
    <p>
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Atque at commodi error aut architecto voluptas
      aperiam fugiat accusamus iste rerum porro velit vel cum, eveniet exercitationem quos iusto omnis
      repellat.
    </p>
    <p>
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Atque at commodi error aut architecto voluptas
      aperiam fugiat accusamus iste rerum porro velit vel cum, eveniet exercitationem quos iusto omnis
      repellat.
    </p>
  </section>
</j5-collapse>

En el archivo de entrada Js se importa la librería y se ejecuta la función j5Collapse.

// main.js
// Importar la librería y seleccionar j5Collapse
import { j5Collapse } from "@jaalorsa/j5-components";
// Iniciar el componente al ejecutar la función
j5Collapse();

Valores por defecto

Se encuentra en el selector CSS de etiqueta j5-collapse

j5-collapse {
  display: block;
  width: 500px;
  color: #112e09;
  font-size: 1em;
  font-family: "Roboto", sans-serif;
}

Nombre de las clases de los elementos internos

Componente: `j5-collapse`,
Contenedor: `j5-collapse__container`,

Atributos

  • eventmanual string = true | false: Atributo para indicar si el acordeón se activa con darle click al slot summary o sí se prefiere que se active con algun evento del slot summary. Por defecto es false. Nota: Cualquier valor que no sea válido, el atributo tomará el valor por defecto. |
    <j5-collapse class="collapse dos" eventmanual="true">
  <section slot="summary" class="summary title">
    <div class="container">
      <h2>El lorem</h2>
      <button class="btn summary">Leer texto</button>
    </div>
  </section>
  <section slot="content" id="content2" class="content dos">
    <p>
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Atque at commodi error aut architecto
      voluptas aperiam fugiat accusamus iste rerum porro velit vel cum, eveniet exercitationem quos iusto
      omnis repellat.
    </p>
  </section>
</j5-collapse>
<script>
  const btn = document.querySelector(".btn");
  const collapse2 = document.querySelector(".collapse.dos");
  btn.addEventListener("click", () => {
    collapse2.setAttribute("isopen", "true");
  });
</script>
  • isopen string= true | false: Atributo para indicar si el slot content se muestra o no. Por defecto es false. Nota: Cualquier valor que no sea válido, el atributo tomará el valor por defecto.
    <j5-collapse isopen="true">
  <section slot="summary" class="summary title">
    <h2>El lorem</h2>
  </section>
  <section slot="content">
    <p>
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Atque at commodi error aut architecto
      voluptas aperiam fugiat accusamus iste rerum porro velit vel cum, eveniet exercitationem quos iusto
      omnis repellat.
    </p>
  </section>
</j5-collapse>

Eventos

  • isOpen: Evento que envía el estado del acordeón, abierto o cerrado. La información del estado se envía dentro un objeto llamado detail, dentro se envía el valor isOpen con su respectivo estado.
    const acordeon = document.querySelector("j5-collapse");
acordeon.addEventListener("isOpen", (e) => {
  console.log(e.detail); //{isOpen: true} || {isOpen: false}
});

Instrucciones

En el html se usa la etiqueta j5-json-transform. Este es un componente que no usa el Shadow DOM, por lo tanto, se puede asignar estilos desde el proyecto padre. Para eso, hay que tener claro el concepto de específicidad, ya que los estilos del web component se montan luego de cargar el DOM.

<j5-json-transform></j5-json-transform>

En el archivo de entrada Js se importa la librería y se ejecuta la función j5JsonTransform.

// main.js
// Importar la librería y seleccionar j5JsonTransform
import { j5JsonTransform } from "@jaalorsa/j5-components";
// Iniciar el componente al ejecutar la función
j5JsonTransform();

Para insertar el componente desde javascript:

const jsonTransform = document.createElement("j5-json-transform");
document.body.appendChild(jsonTransform);

Valores por defecto

Se encuentra en el selector CSS de etiqueta j5-json-transform

j5-json-transform {
  display: block;
  width: 500px;
  height: 500px;
  --color_primary: #438c40;
  --color_font: #112e09;
  --color_font_light: #f9f9f9;
  --color_popup: var(--color_font);
  --color_popup_font: var(--color_font_light);
  --font-size: 1em;
  --font-family: "Roboto", sans-serif;
  --line-height: 1.5;
  --color_error: #bb0000;
}

Nombre de las clases de los elementos internos

  "root": "j5-json-transform",
  "container": "j5-json-transform__container",
  "textArea": "j5-json-transform__textArea",
  "textAreaError": "j5-json-transform__textArea--error",
  "btnContainer": "j5-json-transform__btnContainer",
  "btn": "j5-json-transform__btn",
  "btnCopy": "j5-json-transform__btn--copy",
  "btnClear": "j5-json-transform__btn--clear",
  "btnFormat": "j5-json-transform__btn--format",
  "popup": "j5-json-transform__popup",
  "textAreaContainer": "j5-json-transform__textAreaContainer",
  "errorInput": "j5-json-transform__error"

Instrucciones

En el html se usa la etiqueta j5-menu-hamburguer. Este es un componente que no usa el Shadow DOM, por lo tanto, se puede asignar estilos desde el proyecto padre. Para eso, hay que tener claro el concepto de específicidad, ya que los estilos del web component se montan luego de cargar el DOM.

<j5-menu-hamburguer>
  <h1>Esto es una prueba</h1>
</j5-menu-hamburguer>

En el archivo de entrada Js se importa la librería y se ejecuta la función j5MenuHamburguer.

// main.js
// Importar la librería y seleccionar j5MenuHamburguer
import { j5MenuHamburguer } from "@jaalorsa/j5-components";
// Iniciar el componente al ejecutar la función
j5MenuHamburguer();

O se puede inyectar todo desde javascript

const menu2 = document.createElement("j5-menu-hamburguer");
menu2.innerHTML = `
  <li>Hola</li>
  <li>Adios</li>
`;
menu2.setAttribute("animation", "slide_in_out_3");
menu2.setAttribute("isopen", "true");
body.appendChild(menu2);

Es importante tener en cuenta que la asignación de atributos se tiene que hacer luego que se agrega el elemento al DOM.

Valores por defecto

Se encuentra en el selector CSS de etiqueta j5-menu-hamburguer

j5-menu-hamburguer {
  display: block;
  font-size: 10px;
  position: relative;
  --color: #438c40;
  --colorActive: #438c40;
  --menuPositionTop: 0;
  --menuPositionLeft: 0;
  --menuBackground: #fff;
  --menuWidth: 100vw;
  --menuHeight: 100vh;
  --menuZIndex: 1000;
}

Para controlar el tamaño del menu (ícono) se hace a través del atributo font-size de css.

Nombre de las clases de los elementos internos

Componente: `j5-menu-hamburguer`,
Contenedor: `j5-menu-hamburguer__container`,
menu: `j5-menu-hamburguer__menu`,
linea: `j5-menu-hamburguer__line`,
inea Uno: `j5-menu-hamburguer__line--uno`,
linea Dos: `j5-menu-hamburguer__line--dos`,
linea Tres: `j5-menu-hamburguer__line--tres`,
Contenedor del slot: `j5-menu-hamburguer__containerChild`

Atributos

  • animation string = fade_in_out | slide_in_out_1 | slide_in_out_2 | slide_in_out_3 | slide_in_out_4: Atributo para indicar la animación. El valor por default es fade_in_out.

    <j5-menu-hamburguer>
  <h1>Default es fade_in_out</h1>
</j5-menu-hamburguer>
<j5-menu-hamburguer animation="slide_in_out_1">
  <h1>slide_in_out_1</h1>
</j5-menu-hamburguer>
<j5-menu-hamburguer animation="slide_in_out_2">
  <h1>slide_in_out_2</h1>
</j5-menu-hamburguer>
<j5-menu-hamburguer animation="slide_in_out_3">
  <h1>slide_in_out_3</h1>
</j5-menu-hamburguer>
<j5-menu-hamburguer animation="slide_in_out_4">
  <h1>slide_in_out_4</h1>
</j5-menu-hamburguer>

  • isopen string= true | false: Atributo para indicar si el menu se muestra o no. Por defecto es false. Nota: Cualquier valor que no sea válido, el atributo tomará el valor por defecto.

     <j5-menu-hamburguer>
   <h1>Default es false</h1>
 </j5-menu-hamburguer>
 <j5-menu-hamburguer isopen="true">
   <h1>isopen: true</h1>
 </j5-menu-hamburguer>
 <j5-menu-hamburguer isopen="false">
   <h1>isopen: false</h1>
 </j5-menu-hamburguer>

Eventos

  • isOpen: Evento que envía el estado del menú, abierto o cerrado. La información del estado se envía dentro un objeto llamado detail, dentro se envía el valor isOpen con su respectivo estado.
    const menu = document.querySelector("j5-menu-hamburguer");
menu.addEventListener("isOpen", (e) => {
  console.log(e.detail); //{isOpen: true} || {isOpen: false}
});

Instrucciones

En el html se usa la etiqueta j5-toggle. Este elemento usa el Shadow DOM, por lo que personalizar los estilos requiere sobreescribir las variables de CSS.

<j5-toggle></j5-toggle>
<j5-toggle checked="true"></j5-toggle>
<j5-toggle checked="true" label="Incorrecto/Correcto"></j5-toggle>
<j5-toggle label="Inactivo/Activo"></j5-toggle>

En el archivo de entrada Js se importa la librería y se ejecuta la función j5Toggle.

// main.js
// Importar la librería y seleccionar j5Toggle
import { j5Toggle } from "@jaalorsa/j5-components";
// Iniciar el componente al ejecutar la función
j5Toggle();

O se puede inyectar todo desde javascript

import { j5Toggle } from "@/main";
j5Toggle();
const body = document.body;
const _j5Toggle = document.createElement("j5-toggle");
body.appendChild(_j5Toggle);
_j5Toggle.setAttribute("label", "Inactivo/Activo");
_j5Toggle.setAttribute("checked", "true");

Es importante tener en cuenta que la asignación de atributos se tiene que hacer luego que se agrega el elemento al DOM.

Valores por defecto

Se encuentra en el selector CSS de etiqueta j5-toggle

j5-toggle {
  width: fit-content;
  display: block;
  font-size: 10px;
  box-sizing: border-box;
  --backWidth: 6em;
  --backHeight: 3em;
  --backColorActive: green;
  --backColorInactive: gray;
  --backColorSwitch: white;
  --swSize: calc(var(--backHeight) - 2px);
  --labelSize: 1.6em;
  --labelColor: darkgray;
  --labelFont: sans-serif;
  --borderRadius: 10em;
}

Nombre de las clases de los elementos internos

Componente: `j5-toggle`,
Contenedor: `j5-toggle__container`,
Input tipo radio, toggle lógico: `j5-toggle__radio`,
Toggle visual: `j5-toggle__switch`,
Label: `j5-toggle__label`,

Atributos

  • checked true, false: Atributo para indicar el estado del toggle.
    <j5-toggle checked="true"></j5-toggle>
<j5-toggle checked="false"></j5-toggle>

  • label string: Atributo para indicar el texto del label. Este tiene una característica especial: si pasa un texto separado por un slash ("/"), el toggle mostrará el primer texto cuando sea falso y el segundo cuando sea verdadero; llegado el caso donde solo se pasa un string normal, se muestra dicho string.

    <!-- Cuando sea falso, mostrará Inactivo -->
<!-- Cuando sea Verdadero, mostrará Activo -->
<j5-toggle label="Inactivo/Activo"></j5-toggle>
<j5-toggle label="Viajar"></j5-toggle>
****

Eventos

  • change: Evento que envía el estado del toggle. La información del estado se envía dentro un objeto llamado detail, dentro se envía el valor isChecked con su respectivo estado.
    const toggle = document.querySelector(".my-toggle");
toggle.addEventListener("change", (e) => {
  console.log(e.detail); //{isChecked: true} || {ischecked: false}
});

Instrucciones

En el html se usa la etiqueta j5-tooltip. Este es un componente que utiliza el Shadow DOM, por lo que los estilos se tiene que modificar sobrescribiendo las variables de CSS.

<j5-tooltip class="tres" text="Probando un texto mediano para el tooltip." startposition="horizontal">
  <a href="#">Hello a element with display inline</a>
</j5-tooltip>
<j5-tooltip
  class="cuatro"
  text="Hello World this is a tooltip for example. I am a tooltip and I want to be a tooltip."
>
  <p>Hello everybody!</p>
</j5-tooltip>

En el archivo de entrada Js se importa la librería y se ejecuta la función j5Tooltip.

// main.js
// Importar la librería y seleccionar j5Tooltip
import { j5Tooltip } from "@jaalorsa/j5-components";
// Iniciar el componente al ejecutar la función
j5Tooltip();

O se puede inyectar todo desde javascript

import { j5Tooltip } from "@jaalorsa/j5-components";
j5Tooltip();
const tooltip = document.createElement("j5-tooltip");
tooltip.innerHTML = `<p>Tooltip ${i}</p>`;
tooltip.setAttribute("text", `Este es el tooltip desde Javascript.`);
tooltip.setAttribute("startposition", "horizontal");
document.querySelector(".container").appendChild(tooltip);

Valores por defecto

Se encuentra en el selector CSS de etiqueta j5-tooltip

j5-tooltip {
  width: fit-content;
  height: fit-content;
  display: block;
  box-sizing: border-box;
  cursor: pointer;
  --border-width: 10px;
  --background-color: #2d302d;
  --border-transparent: transparent;
  --top: 0;
  --left: 0;
  --bottom: initial;
  --right: initial;
  --right-before: initial;
  --left-before: 20px;
  --bottom-before: 100%;
  --top-before: initial;
  --max-width: auto;
  --min-width: auto;
  --width: auto;
  --height: auto;
  --padding: 8px;
  --fontFamily: initial;
  --fontSize: 0.875em;
  --fontColor: #fff;
  --text-align: start;
}

Nombre de las clases de los elementos internos

Component: `j5-tooltip`,
Contenedor: `j5-tooltip__container`,
Tooltip: `j5-tooltip__tooltip`,
Tooltip posición norte: `j5-tooltip__tooltip--norte`,
Tooltip posición sur: `j5-tooltip__tooltip--sur`,
Tooltip posición este: `j5-tooltip__tooltip--este`,
Tooltip posición oeste: `j5-tooltip__tooltip--oeste`,
Transición tooltip: `j5-tooltip__tooltip--in-out`,

Atributos

  • text string: Atributo para indicar el texto del que muestra el tooltip.

    <j5-tooltip
  class="cuatro"
  text="Hello World this is a tooltip for example. I am a tooltip and I want to be a tooltip."
>
  <p>Hello everybody!</p>
</j5-tooltip>

  • startposition horizontal, vertical(default): Attributo opcional para indicar sí el tooltip aparece abajo/arriba o derecha/izquierda.

    <j5-tooltip class="tres" text="Probando un texto mediano para el tooltip." startposition="vertical">
  <a href="#">Hello a element with display inline</a>
</j5-tooltip>
<j5-tooltip class="tres" text="Probando un texto mediano para el tooltip." startposition="horizontal">
  <a href="#">Hello a element with display inline</a>
</j5-tooltip>
webcomponentswebcomponenttypescriptjavascript
@infinitebrahmanuniverse/nolb-_jaa@everything-registry/sub-chunk-477
1.5.3

8 months ago

1.5.2

9 months ago

1.5.1

11 months ago

1.5.0

1 year ago

1.4.4

2 years ago

1.4.3

2 years ago

1.4.2

2 years ago

1.4.1

2 years ago

1.4.0

2 years ago

1.2.0

2 years ago

1.1.1

2 years ago

1.3.1

2 years ago

1.1.3

2 years ago

1.3.0

2 years ago

1.1.2

2 years ago

1.1.0

2 years ago

1.0.1

2 years ago

1.0.0

2 years ago