@dile/utils 3.2.0 → 3.2.1

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

@@ -221,6 +221,90 @@ export class DileQrCode extends LitElement {
     img.src = this.logo;
   }
 
+  /**
+   * Downloads the QR code as a PNG image.
+   * @param {string} filename - Optional filename for the download. Defaults to 'qr-code.png'.
+   */
+  download(filename = 'qr-code.png') {
+    const canvas = this.#getCanvas();
+    if (!canvas) {
+      console.warn('dile-qr-code: Canvas not found');
+      return;
+    }
+
+    canvas.toBlob((blob) => {
+      if (!blob) {
+        console.warn('dile-qr-code: Failed to create blob from canvas');
+        return;
+      }
+
+      const url = URL.createObjectURL(blob);
+      const link = document.createElement('a');
+      link.href = url;
+      link.download = filename;
+      document.body.appendChild(link);
+      link.click();
+      document.body.removeChild(link);
+      URL.revokeObjectURL(url);
+
+      this.dispatchEvent(
+        new CustomEvent('dile-qr-code-downloaded', {
+          bubbles: true,
+          composed: true,
+          detail: { filename },
+        })
+      );
+    });
+  }
+
+  /**
+   * Copies the QR code as an image to the clipboard.
+   * Allows pasting the QR code directly into any application that accepts images.
+   */
+  async copy() {
+    const canvas = this.#getCanvas();
+    if (!canvas) {
+      console.warn('dile-qr-code: Canvas not found');
+      this.dispatchEvent(
+        new CustomEvent('dile-qr-code-copy-error', {
+          bubbles: true,
+          composed: true,
+          detail: { error: 'Canvas not found' },
+        })
+      );
+      return;
+    }
+
+    try {
+      const blob = await new Promise((resolve) => {
+        canvas.toBlob(resolve);
+      });
+
+      if (!blob) {
+        throw new Error('Failed to create blob from canvas');
+      }
+
+      const item = new ClipboardItem({ 'image/png': blob });
+      await navigator.clipboard.write([item]);
+
+      this.dispatchEvent(
+        new CustomEvent('dile-qr-code-copied', {
+          bubbles: true,
+          composed: true,
+        })
+      );
+    } catch (error) {
+      console.warn('dile-qr-code: Error copying to clipboard', error);
+      this.dispatchEvent(
+        new CustomEvent('dile-qr-code-copy-error', {
+          bubbles: true,
+          composed: true,
+          detail: { error: error.message },
+        })
+      );
+    }
+  }
+
   render() {
     return html`
       <canvas

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dile/utils",
-  "version": "3.2.0",
+  "version": "3.2.1",
   "description": "Utility Components of Diverse Uses Based on the Lit Library and Web Components Standard.",
   "main": "index.js",
   "scripts": {
@@ -21,7 +21,7 @@
   "homepage": "https://dile-components.com/",
   "dependencies": {
     "@dile/iconlib": "^2.0.1",
-    "@dile/ui": "^3.12.5",
+    "@dile/ui": "^3.13.0",
     "@lion/ui": "^0.21.0",
     "linkify-string": "^4.1.3",
     "linkifyjs": "^4.1.3",
@@ -31,5 +31,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "638a0f521905e44ddc4cdad442947f1d1e7484a4"
+  "gitHead": "e4b428c6b9cee3e0f20520c5baa979e232f90dda"
 }