@dile/utils 3.1.14 → 3.2.0

package/components/qr-code/index.js

@@ -0,0 +1 @@
+export { DileQrCode } from './src/DileQrCode.js';

package/components/qr-code/qr-code.js

@@ -0,0 +1,5 @@
+import { DileQrCode } from './src/DileQrCode.js';
+
+if (!customElements.get('dile-qr-code')) {
+  window.customElements.define('dile-qr-code', DileQrCode);
+}

package/components/qr-code/qr-code.spec.js

@@ -0,0 +1,164 @@
+import { describe, it, expect, afterEach } from 'vitest';
+import './qr-code.js';
+
+describe('dile-qr-code', () => {
+  afterEach(() => {
+    document.body.innerHTML = '';
+  });
+
+  async function renderQrCode(html) {
+    document.body.innerHTML = html;
+    const el = document.body.querySelector('dile-qr-code');
+    await el.updateComplete;
+    return el;
+  }
+
+  it('renders canvas with default properties', async () => {
+    const el = await renderQrCode('<dile-qr-code></dile-qr-code>');
+    const canvas = el.shadowRoot.querySelector('canvas');
+    expect(canvas).not.toBeNull();
+    expect(canvas.getAttribute('role')).toBe('img');
+    expect(canvas.getAttribute('aria-label')).toBe('QR Code');
+    expect(canvas.width).toBe(128);
+    expect(canvas.height).toBe(128);
+    expect(el.value).toBe('');
+    expect(el.size).toBe(128);
+    expect(el.fill).toBe('#000000');
+    expect(el.background).toBe('#ffffff');
+    expect(el.radius).toBe(0);
+    expect(el.errorCorrection).toBe('M');
+    expect(el.logo).toBe('');
+    expect(el.logoSize).toBe(0);
+    expect(el.logoRadius).toBe(4);
+    expect(el.logoBackground).toBe('');
+    expect(el.logoPadding).toBe(4);
+  });
+
+  it('sets accessible label from value or custom label attribute', async () => {
+    const elWithValue = await renderQrCode(
+      '<dile-qr-code value="https://example.com"></dile-qr-code>'
+    );
+    const canvas1 = elWithValue.shadowRoot.querySelector('canvas');
+    expect(canvas1.getAttribute('aria-label')).toBe('https://example.com');
+
+    const elWithLabel = await renderQrCode(
+      '<dile-qr-code value="https://example.com" label="QR para pago"></dile-qr-code>'
+    );
+    const canvas2 = elWithLabel.shadowRoot.querySelector('canvas');
+    expect(canvas2.getAttribute('aria-label')).toBe('QR para pago');
+  });
+
+  it('renders pixels on canvas when value is provided', async () => {
+    const el = await renderQrCode(
+      '<dile-qr-code value="https://dile-components.com"></dile-qr-code>'
+    );
+    const canvas = el.shadowRoot.querySelector('canvas');
+    const ctx = canvas.getContext('2d');
+    const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
+    const hasDrawnPixels = imageData.data.some((channel) => channel !== 0);
+    expect(hasDrawnPixels).toBe(true);
+  });
+
+  it('clears canvas when value is empty or cleared', async () => {
+    const el = await renderQrCode(
+      '<dile-qr-code value="https://example.com"></dile-qr-code>'
+    );
+    const canvas = el.shadowRoot.querySelector('canvas');
+    const ctx = canvas.getContext('2d');
+
+    // First check it has pixels
+    let imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
+    expect(imageData.data.some((channel) => channel !== 0)).toBe(true);
+
+    // Empty the value
+    el.value = '';
+    await el.updateComplete;
+
+    imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
+    const hasDrawnPixels = imageData.data.some((channel) => channel !== 0);
+    expect(hasDrawnPixels).toBe(false);
+  });
+
+  it('updates canvas dimensions when size property changes', async () => {
+    const el = await renderQrCode(
+      '<dile-qr-code value="test" size="200"></dile-qr-code>'
+    );
+    const canvas = el.shadowRoot.querySelector('canvas');
+    expect(canvas.width).toBe(200);
+    expect(canvas.height).toBe(200);
+
+    el.size = 256;
+    await el.updateComplete;
+    expect(canvas.width).toBe(256);
+    expect(canvas.height).toBe(256);
+  });
+
+  it('updates canvas when fill, background, radius, or errorCorrection change', async () => {
+    const el = await renderQrCode(
+      '<dile-qr-code value="test" fill="#0000ff" background="#ffff00" radius="0.5" error-correction="H"></dile-qr-code>'
+    );
+    const canvas = el.shadowRoot.querySelector('canvas');
+    const ctx = canvas.getContext('2d');
+    let imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
+    expect(imageData.data.some((channel) => channel !== 0)).toBe(true);
+
+    // Update fill and radius
+    el.fill = '#ff0000';
+    el.radius = 0.2;
+    el.errorCorrection = 'Q';
+    await el.updateComplete;
+
+    imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
+    expect(imageData.data.some((channel) => channel !== 0)).toBe(true);
+  });
+
+  it('handles transparent background', async () => {
+    const el = await renderQrCode(
+      '<dile-qr-code value="test" background="transparent"></dile-qr-code>'
+    );
+    const canvas = el.shadowRoot.querySelector('canvas');
+    expect(canvas).not.toBeNull();
+    const ctx = canvas.getContext('2d');
+    const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
+    expect(imageData.data.some((channel) => channel !== 0)).toBe(true);
+  });
+
+  it('renders logo on top of QR code and dispatches dile-qr-code-logo-loaded', async () => {
+    const sampleLogo =
+      'data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20"><rect width="20" height="20" fill="rgb(255,0,0)"/></svg>';
+
+    const el = await renderQrCode(
+      `<dile-qr-code value="https://dile-components.com" logo="${sampleLogo}" logo-size="24" logo-padding="2"></dile-qr-code>`
+    );
+
+    // Wait for the logo load event if not already fired
+    const canvas = el.shadowRoot.querySelector('canvas');
+    expect(canvas).not.toBeNull();
+
+    // Check center pixel in canvas to verify logo/badge was drawn
+    const ctx = canvas.getContext('2d');
+    const centerX = Math.floor(canvas.width / 2);
+    const centerY = Math.floor(canvas.height / 2);
+    const centerPixel = ctx.getImageData(centerX, centerY, 1, 1).data;
+    // Red channel from red svg rect
+    expect(centerPixel[0]).toBe(255);
+  });
+
+  it('handles logo load error gracefully and dispatches dile-qr-code-logo-error', async () => {
+    document.body.innerHTML = '';
+    const el = document.createElement('dile-qr-code');
+    el.value = 'https://dile-components.com';
+
+    const errorPromise = new Promise((resolve) => {
+      el.addEventListener('dile-qr-code-logo-error', resolve, { once: true });
+    });
+
+    el.logo = 'data:image/invalid;base64,broken';
+    document.body.appendChild(el);
+    await el.updateComplete;
+
+    const event = await errorPromise;
+    expect(event).toBeDefined();
+    expect(el.shadowRoot.querySelector('canvas')).not.toBeNull();
+  });
+});

package/components/qr-code/src/DileQrCode.js

@@ -0,0 +1,234 @@
+import { html, css, LitElement } from 'lit';
+import QrCreator from 'qr-creator';
+
+export class DileQrCode extends LitElement {
+  static properties = {
+    value: { type: String },
+    size: { type: Number },
+    fill: { type: String },
+    background: { type: String },
+    radius: { type: Number },
+    errorCorrection: { type: String, attribute: 'error-correction' },
+    label: { type: String },
+    logo: { type: String },
+    logoSize: { type: Number, attribute: 'logo-size' },
+    logoRadius: { type: Number, attribute: 'logo-radius' },
+    logoBackground: { type: String, attribute: 'logo-background' },
+    logoPadding: { type: Number, attribute: 'logo-padding' },
+  };
+
+  #currentRenderId = 0;
+
+  constructor() {
+    super();
+    this.value = '';
+    this.size = 128;
+    this.fill = '#000000';
+    this.background = '#ffffff';
+    this.radius = 0;
+    this.errorCorrection = 'M';
+    this.label = '';
+    this.logo = '';
+    this.logoSize = 0;
+    this.logoRadius = 4;
+    this.logoBackground = '';
+    this.logoPadding = 4;
+  }
+
+  static styles = css`
+    :host {
+      display: inline-block;
+    }
+    canvas {
+      display: block;
+      max-width: 100%;
+      height: auto;
+    }
+  `;
+
+  firstUpdated() {
+    this.#renderQrCode();
+  }
+
+  updated(changedProperties) {
+    if (
+      changedProperties.has('value') ||
+      changedProperties.has('size') ||
+      changedProperties.has('fill') ||
+      changedProperties.has('background') ||
+      changedProperties.has('radius') ||
+      changedProperties.has('errorCorrection') ||
+      changedProperties.has('logo') ||
+      changedProperties.has('logoSize') ||
+      changedProperties.has('logoRadius') ||
+      changedProperties.has('logoBackground') ||
+      changedProperties.has('logoPadding')
+    ) {
+      this.#renderQrCode();
+    }
+  }
+
+  #getCanvas() {
+    return this.shadowRoot ? this.shadowRoot.querySelector('canvas') : null;
+  }
+
+  #clearCanvas() {
+    const canvas = this.#getCanvas();
+    if (canvas) {
+      const ctx = canvas.getContext('2d');
+      if (ctx) {
+        ctx.clearRect(0, 0, canvas.width, canvas.height);
+      }
+    }
+  }
+
+  #renderQrCode() {
+    const canvas = this.#getCanvas();
+    if (!canvas) {
+      return;
+    }
+
+    const renderId = ++this.#currentRenderId;
+    this.#clearCanvas();
+
+    if (!this.value || typeof this.value !== 'string' || this.value.trim() === '') {
+      return;
+    }
+
+    const hasLogo = Boolean(this.logo && typeof this.logo === 'string' && this.logo.trim() !== '');
+
+    let ecLevel;
+    if (hasLogo) {
+      ecLevel = this.errorCorrection === 'Q' ? 'Q' : 'H';
+    } else {
+      const validEcLevels = ['L', 'M', 'Q', 'H'];
+      ecLevel = validEcLevels.includes(this.errorCorrection)
+        ? this.errorCorrection
+        : 'M';
+    }
+
+    const numRadius = Number(this.radius);
+    const radius = Number.isNaN(numRadius)
+      ? 0
+      : Math.min(0.5, Math.max(0, numRadius));
+
+    const numSize = Number(this.size);
+    const size = Number.isNaN(numSize) || numSize <= 0 ? 128 : numSize;
+
+    const background =
+      this.background === 'transparent' || this.background === null
+        ? null
+        : this.background || '#ffffff';
+
+    try {
+      QrCreator.render(
+        {
+          text: this.value,
+          radius,
+          ecLevel,
+          fill: this.fill || '#000000',
+          background,
+          size,
+        },
+        canvas
+      );
+    } catch (error) {
+      console.warn('dile-qr-code: Error rendering QR code', error);
+      return;
+    }
+
+    if (hasLogo) {
+      this.#drawLogo(canvas, renderId);
+    }
+  }
+
+  #drawLogo(canvas, renderId) {
+    const img = new Image();
+    img.crossOrigin = 'anonymous';
+
+    img.onload = () => {
+      if (renderId !== this.#currentRenderId) {
+        return;
+      }
+      const currentCanvas = this.#getCanvas();
+      if (!currentCanvas || currentCanvas !== canvas) {
+        return;
+      }
+      const ctx = currentCanvas.getContext('2d');
+      if (!ctx) {
+        return;
+      }
+
+      const qrSize = currentCanvas.width;
+      const maxAllowedSize = Math.round(qrSize * 0.28);
+      const userLogoSize = Number(this.logoSize);
+      const targetSize =
+        userLogoSize > 0
+          ? Math.min(userLogoSize, maxAllowedSize)
+          : Math.round(qrSize * 0.22);
+
+      const numPadding = Number(this.logoPadding);
+      const padding = Number.isNaN(numPadding) || numPadding < 0 ? 4 : numPadding;
+
+      const badgeSize = targetSize + padding * 2;
+      const x = (qrSize - targetSize) / 2;
+      const y = (qrSize - targetSize) / 2;
+      const badgeX = x - padding;
+      const badgeY = y - padding;
+
+      const badgeBg =
+        this.logoBackground ||
+        (this.background === 'transparent'
+          ? '#ffffff'
+          : this.background || '#ffffff');
+
+      const numBadgeRadius = Number(this.logoRadius);
+      const badgeRadius =
+        Number.isNaN(numBadgeRadius) || numBadgeRadius < 0 ? 4 : numBadgeRadius;
+
+      ctx.save();
+      ctx.fillStyle = badgeBg;
+      ctx.beginPath();
+      if (typeof ctx.roundRect === 'function') {
+        ctx.roundRect(badgeX, badgeY, badgeSize, badgeSize, badgeRadius);
+      } else {
+        ctx.rect(badgeX, badgeY, badgeSize, badgeSize);
+      }
+      ctx.fill();
+
+      ctx.drawImage(img, x, y, targetSize, targetSize);
+      ctx.restore();
+
+      this.dispatchEvent(
+        new CustomEvent('dile-qr-code-logo-loaded', {
+          bubbles: true,
+          composed: true,
+        })
+      );
+    };
+
+    img.onerror = (err) => {
+      console.warn('dile-qr-code: Error loading logo image', this.logo, err);
+      this.dispatchEvent(
+        new CustomEvent('dile-qr-code-logo-error', {
+          bubbles: true,
+          composed: true,
+          detail: { error: err },
+        })
+      );
+    };
+
+    img.src = this.logo;
+  }
+
+  render() {
+    return html`
+      <canvas
+        role="img"
+        aria-label="${this.label || this.value || 'QR Code'}"
+        width="${this.size}"
+        height="${this.size}"
+      ></canvas>
+    `;
+  }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dile/utils",
-  "version": "3.1.14",
+  "version": "3.2.0",
   "description": "Utility Components of Diverse Uses Based on the Lit Library and Web Components Standard.",
   "main": "index.js",
   "scripts": {
@@ -21,14 +21,15 @@
   "homepage": "https://dile-components.com/",
   "dependencies": {
     "@dile/iconlib": "^2.0.1",
-    "@dile/ui": "^3.12.4",
+    "@dile/ui": "^3.12.5",
     "@lion/ui": "^0.21.0",
     "linkify-string": "^4.1.3",
     "linkifyjs": "^4.1.3",
-    "lit": "^2.7.0 || ^3.0.0"
+    "lit": "^2.7.0 || ^3.0.0",
+    "qr-creator": "^1.0.0"
   },
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "29dbec2b9bc0a8f5613158409950ffd3456af179"
+  "gitHead": "638a0f521905e44ddc4cdad442947f1d1e7484a4"
 }