Package Exports

@christianpasinrey/vue-code-parser
@christianpasinrey/vue-code-parser/dist/index.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@christianpasinrey/vue-code-parser) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

🎯 vue-code-parser

🧩 Composable para Vue 3 para detectar, validar y parsear códigos de barras (EAN-13, EAN-14), QR y DataMatrix (GS1).

Este paquete te permite trabajar con inputs escaneados o digitados que contienen información estructurada como GTIN, LOTE, FECHA, SERIAL, etc., incluyendo parsing avanzado de códigos GS1.

🚀 Instalación

npm install vue-code-parser

🧠 ¿Qué hace?

Detecta el tipo de código escaneado (EAN, QR, DataMatrix) y lo convierte en un objeto legible:

✅ Validación EAN-13 y EAN-14 con cálculo de dígito de control
✅ Parsing de DataMatrix (con soporte GS1 y AI como 01, 10, 17, etc.)
✅ Detección de QR y extracción del payload
✅ Buffer con debounce para evitar repeticiones en escáneres
✅ Manejo de caracteres invisibles (como charCode === 29)

🧰 Uso básico

import { useCodeParser } from "vue-code-parser";

const {
  handleInput,
  parsedResult,
  isParsedResultArray,
  detectType,
  isQr,
  checkInvisibleChars
} = useCodeParser();

// En algún método:
handleInput(']d20112345678901234101725010110ABC123+')
  .then(() => {
    console.log(parsedResult.value);
  });

🧾 Resultado esperado (DataMatrix GS1)

[
  { code: "01", value: "12345678901234", name: "Global Trade Item Number", description: "GTIN" },
  { code: "17", value: "250101", name: "Expiration date (YYMMDD)", description: "FECHA DE CACUCIDAD" },
  { code: "10", value: "ABC123", name: "Batch or lot number", description: "LOTE" }
]

📦 API completa

Propiedad	Tipo	Descripción
`handleInput(code)`	`Promise<unknown>`	Procesa el código escaneado con debounce.
`parsedResult`	`Ref<string \\| CodePart[] \\| null>`	Resultado parseado del código (string plano o array de partes).
`isParsedResultArray`	`ComputedRef<boolean>`	Indica si el resultado es una lista de partes (DataMatrix).
`detectType(code)`	`string \\| undefined`	Devuelve el tipo de código detectado: `EAN-13`, `EAN-14`, `DataMatrix` o `QR`.
`isQr`	`Ref<boolean>`	Indica si el último código detectado es QR.
`checkInvisibleChars(event)`	`string`	Devuelve "*" si el `charCode` del evento es 29.

🧩 Tipos

interface CodePart {
  code: string;
  value: string;
  name: string;
  description: string;
}

🏷️ Códigos soportados (GS1 AIs)

Código	Descripción	Longitud fija
`01`	GTIN	✅ 16
`10`	Lote	❌ variable
`11`	Fecha de producción (YYMMDD)	✅ 8
`17`	Fecha de caducidad (YYMMDD)	✅ 8
`21`	Número de serie	❌ variable
`712`	Código nacional (NPC)	❌ variable

🧪 Ejemplo de integración con input de escáner

<template>
  <input
    @keypress="(e) => inputBuffer += checkInvisibleChars(e)"
    @keydown.enter.prevent="handleInput(inputBuffer)"
    v-model="inputBuffer"
  />
</template>

<script setup lang="ts">
import { ref } from "vue";
import { useCodeParser } from "vue-code-parser";

const inputBuffer = ref("");
const { handleInput, checkInvisibleChars, parsedResult } = useCodeParser();
</script>

📃 Licencia

🤝 Contribuir

¡Pull requests y feedback son bienvenidos! Si encuentras un código no compatible, puedes abrir un issue o PR con los nuevos GS1 AI.