@qr-platform/qr-code.js 0.11.2 → 0.11.4

package/.github/workflows/claude.yml

@@ -0,0 +1,37 @@
+name: Claude Code
+
+on:
+  issue_comment:
+    types: [created]
+  pull_request_review_comment:
+    types: [created]
+  issues:
+    types: [opened, assigned]
+  pull_request_review:
+    types: [submitted]
+
+jobs:
+  claude:
+    if: |
+      (github.event_name == 'issue_comment' && contains(github.event.comment.body, '@claude')) ||
+      (github.event_name == 'pull_request_review_comment' && contains(github.event.comment.body, '@claude')) ||
+      (github.event_name == 'pull_request_review' && contains(github.event.review.body, '@claude')) ||
+      (github.event_name == 'issues' && (contains(github.event.issue.body, '@claude') || contains(github.event.issue.title, '@claude')))
+    runs-on: ubuntu-latest
+    permissions:
+      contents: read
+      pull-requests: read
+      issues: read
+      id-token: write
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v4
+        with:
+          fetch-depth: 1
+
+      - name: Run Claude Code
+        id: claude
+        uses: anthropics/claude-code-action@beta
+        with:
+          anthropic_api_key: ${{ secrets.ANTHROPIC_API_KEY }}
+

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @qr-platform/qr-code-js
 
+## 0.11.3
+
+### Patch Changes
+
+- bc47c1d: Improvement to appear and update methods
+
 ## 0.11.2
 
 ### Patch Changes

package/docs/advanced-examples.md

@@ -13,7 +13,8 @@ These examples focus on the fundamental QR code generation settings.
 
 **Example 1: High Error Correction & Specific Type Number**
 
-```typescriptconst qrCoreHighEC = new QRCodeJs({
+```typescript
+const qrCoreHighEC = new QRCodeJs({
   data: 'https://example.com/high-ec',
   qrOptions: {
     typeNumber: 10, // Larger QR code version
@@ -28,7 +29,8 @@ qrCoreHighEC.append(document.getElementById('core-high-ec-container'));
 
 **Example 2: Auto Type Number & Medium Error Correction**
 
-```typescriptconst qrCoreAutoEC = new QRCodeJs({
+```typescript
+const qrCoreAutoEC = new QRCodeJs({
   data: 'https://example.com/auto-ec-medium',
   qrOptions: {
     typeNumber: 0, // Auto-detect size
@@ -49,7 +51,8 @@ Demonstrates how to control the positioning and scaling within the container or
 
 **Example 1: Scaled Down with Offsets**
 
-```typescriptconst qrLayoutScaledOffset = new QRCodeJs({
+```typescript
+const qrLayoutScaledOffset = new QRCodeJs({
   data: 'https://example.com/layout-scaled-offset',
   scale: 0.75, // QR code occupies 75% of the space
   offset: -15, // Moves QR code 15px up relative to center
@@ -67,7 +70,8 @@ qrLayoutScaledOffset.append(document.getElementById('layout-scaled-offset-contai
 
 **Example 2: Responsive QR Code**
 
-```typescriptconst qrLayoutResponsive = new QRCodeJs({
+```typescript
+const qrLayoutResponsive = new QRCodeJs({
   data: 'https://example.com/layout-responsive',
   isResponsive: true, // SVG will resize with container
   margin: 10, // Add a 10px quiet zone
@@ -92,7 +96,8 @@ Showcases different shapes and colors for the main data dots.
 
 **Example 1: Classy Rounded Dots**
 
-```typescriptconst qrDotsClassy = new QRCodeJs({
+```typescript
+const qrDotsClassy = new QRCodeJs({
   data: 'https://example.com/dots-classy',
   dotsOptions: {
     type: 'classyRounded',
@@ -105,7 +110,8 @@ qrDotsClassy.append(document.getElementById('dots-classy-container'));
 
 **Example 2: Star Dots**
 
-```typescriptconst qrDotsStar = new QRCodeJs({
+```typescript
+const qrDotsStar = new QRCodeJs({
   data: 'https://example.com/dots-star',
   dotsOptions: {
     type: 'star',
@@ -118,7 +124,8 @@ qrDotsStar.append(document.getElementById('dots-star-container'));
 
 **Example 3: Diamond Dots**
 
-```typescriptconst qrDotsDiamond = new QRCodeJs({
+```typescript
+const qrDotsDiamond = new QRCodeJs({
   data: 'https://example.com/dots-diamond',
   dotsOptions: {
     type: 'diamond',
@@ -137,7 +144,8 @@ Customizes the three large corner squares.
 
 **Example 1: Outpoint Corner Squares**
 
-```typescriptconst qrCornerSquareOutpoint = new QRCodeJs({
+```typescript
+const qrCornerSquareOutpoint = new QRCodeJs({
   data: 'https://example.com/corner-square-outpoint',
   dotsOptions: { color: '#444' },
   cornersSquareOptions: {
@@ -150,7 +158,8 @@ qrCornerSquareOutpoint.append(document.getElementById('corner-square-outpoint-co
 
 **Example 2: Rounded Corner Squares**
 
-```typescriptconst qrCornerSquareRounded = new QRCodeJs({
+```typescript
+const qrCornerSquareRounded = new QRCodeJs({
   data: 'https://example.com/corner-square-rounded',
   dotsOptions: { type: 'dot', color: '#7B1FA2' }, // Purple dots
   cornersSquareOptions: {
@@ -169,7 +178,8 @@ Customizes the smaller dots within the corner squares.
 
 **Example 1: Heart Corner Dots**
 
-```typescriptconst qrCornerDotHeart = new QRCodeJs({
+```typescript
+const qrCornerDotHeart = new QRCodeJs({
   data: 'https://example.com/corner-dot-heart',
   dotsOptions: { color: '#555' },
   cornersSquareOptions: { type: 'square', color: '#E64A19' }, // Orange square corners
@@ -183,7 +193,8 @@ qrCornerDotHeart.append(document.getElementById('corner-dot-heart-container'));
 
 **Example 2: Square Corner Dots with Different Color**
 
-```typescriptconst qrCornerDotSquare = new QRCodeJs({
+```typescript
+const qrCornerDotSquare = new QRCodeJs({
   data: 'https://example.com/corner-dot-square',
   dotsOptions: { type: 'rounded', color: '#004D40' }, // Dark Teal dots
   cornersSquareOptions: { type: 'rounded', color: '#FBC02D' }, // Yellow rounded corners
@@ -203,7 +214,8 @@ Applies color, rounding, and gradients to the background.
 
 **Example 1: Colored and Rounded Background**
 
-```typescriptconst qrBackgroundStyled = new QRCodeJs({
+```typescript
+const qrBackgroundStyled = new QRCodeJs({
   data: 'https://example.com/background-styled',
   dotsOptions: { color: '#FFFFFF' }, // White dots for contrast
   backgroundOptions: {
@@ -216,7 +228,8 @@ qrBackgroundStyled.append(document.getElementById('background-styled-container')
 
 **Example 2: Background with Subtle Radial Gradient**
 
-```typescriptconst qrBackgroundGradient = new QRCodeJs({
+```typescript
+const qrBackgroundGradient = new QRCodeJs({
   data: 'https://example.com/background-gradient',
   dotsOptions: { color: '#333' },
   backgroundOptions: {
@@ -241,7 +254,8 @@ Applies linear and radial gradients to various elements.
 
 **Example 1: Linear Gradient on Dots**
 
-```typescriptconst qrGradientDotsLinear = new QRCodeJs({
+```typescript
+const qrGradientDotsLinear = new QRCodeJs({
   data: 'https://example.com/gradient-dots-linear',
   dotsOptions: {
     type: 'rounded',
@@ -261,7 +275,8 @@ qrGradientDotsLinear.append(document.getElementById('gradient-dots-linear-contai
 
 **Example 2: Radial Gradient on Corner Squares & Linear on Dots**
 
-```typescriptconst qrGradientMultiple = new QRCodeJs({
+```typescript
+const qrGradientMultiple = new QRCodeJs({
   data: 'https://example.com/gradient-multiple',
   dotsOptions: {
     type: 'square',
@@ -307,7 +322,8 @@ Embeds logos or images within the QR code.
 
 **Example 1: Centered Logo with Fill**
 
-```typescriptconst qrImageCenter = new QRCodeJs({
+```typescript
+const qrImageCenter = new QRCodeJs({
   data: 'https://example.com/image-center',
   qrOptions: { errorCorrectionLevel: 'Q' }, // Higher EC recommended
   image: 'https://upload.wikimedia.org/wikipedia/commons/a/a5/Instagram_icon.png', // Example: Instagram logo
@@ -325,7 +341,8 @@ qrImageCenter.append(document.getElementById('image-center-container'));
 
 **Example 2: Image as Background**
 
-```typescriptconst qrImageBackground = new QRCodeJs({
+```typescript
+const qrImageBackground = new QRCodeJs({
   data: 'https://example.com/image-background',
   qrOptions: { errorCorrectionLevel: 'M' },
   image: 'https://source.unsplash.com/random/300x300?nature,water', // Example: Random nature image
@@ -348,6 +365,7 @@ qrImageBackground.append(document.getElementById('image-background-container'));
 **Example 3: Using the Override Option with Images**
 
 ```typescript
+
 // Setting a global image with override that will take precedence
 // even over images specified in instance options
 QRCodeJs.setImage('https://example.com/global-priority-logo.png', { override: true });
@@ -384,6 +402,7 @@ Demonstrates using `QRCodeJs.setSettings()` for establishing global presets and
 `QRCodeJs.setSettings()` acts as a macro, calling other static setters like `setData()`, `setImage()`, `setTemplate()`, `setStyle()`, `setOptions()`, etc., based on the provided `SettingsOptions`. It overrides/resets previous static configurations for the aspects it covers.
 
 ```typescript
+
 // Define a comprehensive global preset using SettingsOptions
 const companyGlobalPreset: SettingsOptions = {
   name: 'CompanyStandardGlobalQR',
@@ -430,6 +449,7 @@ qrOverrideGlobalData.append(document.getElementById('global-settings-override-da
 `QRCodeBuilder.useSettings()` resets any configurations previously applied to *that builder instance* and establishes the provided `SettingsOptions` as the new baseline.
 
 ```typescript
+
 const eventSpecificBuilderConfig: SettingsOptions = {
   name: 'TechConferenceBuilderQR',
   data: 'https://techconf.example/main-schedule', // Baseline data for this builder
@@ -472,6 +492,7 @@ qrEventSpecialBuilder.append(document.getElementById('builder-usesettings-contai
 The `overrideOpts: { override: true }` parameter makes static settings "sticky", meaning they are harder to override by instance options or non-overriding builder methods.
 
 ```typescript
+
 // Set data with override:true; it will take precedence over instance data
 QRCodeJs.setData('https://permanent-global-link.com', { override: true });
 
@@ -503,6 +524,7 @@ Uses premium border features for advanced styling and text. Requires a license.
 **Example 1: Using Text Override Option**
 
 ```typescript
+
 // Ensure license is activated first
 // await QRCodeJs.license('YOUR-LICENSE-KEY');
 
@@ -571,7 +593,8 @@ QRCodeJs.setText(null);
 
 **Example 2: Elaborate Border with Multiple Decorations**
 
-```typescript// Ensure license is activated first
+```typescript
+// Ensure license is activated first
 // await QRCodeJs.license('YOUR-LICENSE-KEY');
 
 const qrBorderElaborate = new QRCodeJs({
@@ -637,6 +660,7 @@ qrBorderElaborate.append(document.getElementById('border-elaborate-container'));
 Demonstrates using the fluent builder pattern (`useTemplate`, `useStyle`) to combine base settings with specific styles for a complex result.
 
 ```typescript
+
 // Define a base template (could be predefined like 'dots' or 'rounded')
 const baseTemplate = {
   qrOptions: { errorCorrectionLevel: 'Q' },
@@ -683,6 +707,7 @@ qrBuilderExampleWithBuild.update({ data: 'https://example.com/builder-pattern-ad
 Demonstrates using the class instance pattern (`setTemplate`, `setStyle`) to combine base settings with specific styles for a complex result.
 
 ```typescript
+
 // Define a base template (could be predefined like 'dots' or 'rounded')
 const baseTemplate = {
   qrOptions: { errorCorrectionLevel: 'Q' },
@@ -719,6 +744,7 @@ const qrBuilderExample = new QRCodeJs({ data: 'https://example.com/class-instanc
 This example shows how to set global defaults for a template, style, and border configuration. Subsequent `QRCodeJs` instances will inherit these settings unless overridden during instantiation.
 
 ```typescript
+
 // 1. Define and set global defaults
 const globalTemplate = { backgroundOptions: { color: '#E8F5E9' } }; // Light Green background
 const globalStyle = { dotsOptions: { type: 'classy', color: '#1B5E20' } }; // Dark Green classy dots
@@ -758,6 +784,7 @@ qrGlobalCombinedOverride.append(document.getElementById('global-combined-overrid
 This example demonstrates chaining builder methods to combine a template, style, and border configuration for a single instance without affecting global defaults.
 
 ```typescript
+
 // 1. Define components (optional, could be predefined names or IDs)
 const baseTpl = { qrOptions: { errorCorrectionLevel: 'M' }, margin: 5 };
 const dotsStyle = { dotsOptions: { type: 'dots', color: '#01579B' } }; // Light Blue dots
@@ -786,7 +813,8 @@ qrBuilderCombined.append(document.getElementById('builder-combined-container'));
 
 Validate if the generated QR code is scannable using the built-in validator. This requires a premium license.
 
-```typescript// Ensure license is activated first
+```typescript
+// Ensure license is activated first
 // await QRCodeJs.license('YOUR-LICENSE-KEY');
 
 const qrCodeToValidate = new QRCodeJs({

package/docs/examples.md

@@ -216,6 +216,7 @@ qrChained.append(document.getElementById('template-style-chain-container'));
 Demonstrating fundamental settings like data, shape, and error correction.
 
 **Example 1: Minimal QR Code**
+```javascript
 
 const qrMinimal = new QRCodeJs({
   data: 'Just the data!'
@@ -224,6 +225,7 @@ qrMinimal.append(document.getElementById('minimal-qr-container'));
 ```
 
 **Example 2: Circle Shape**
+```javascript
 
 const qrCircle = new QRCodeJs({
   data: 'https://example.com/circle',
@@ -233,6 +235,7 @@ qrCircle.append(document.getElementById('circle-qr-container'));
 ```
 
 **Example 3: High Error Correction**
+```javascript
 
 const qrHighEC = new QRCodeJs({
   data: 'Important Data',
@@ -250,6 +253,7 @@ qrHighEC.append(document.getElementById('high-ec-qr-container'));
 Controlling margin, scale, and offsets.
 
 **Example 1: Adding Margin**
+```javascript
 
 const qrMargin = new QRCodeJs({
   data: 'With Margin',
@@ -259,6 +263,7 @@ qrMargin.append(document.getElementById('margin-qr-container'));
 ```
 
 **Example 2: Scaling Down**
+```javascript
 
 const qrScaled = new QRCodeJs({
   data: 'Scaled Down',
@@ -274,6 +279,7 @@ qrScaled.append(document.getElementById('scaled-qr-container'));
 Changing the appearance of the data dots.
 
 **Example 1: Rounded Dots**
+```javascript
 
 const qrRoundedDots = new QRCodeJs({
   data: 'Rounded Dots',
@@ -286,6 +292,7 @@ qrRoundedDots.append(document.getElementById('rounded-dots-container'));
 ```
 
 **Example 2: Dot Style Dots**
+```javascript
 
 const qrDotDots = new QRCodeJs({
   data: 'Dot Style Dots',
@@ -302,6 +309,7 @@ qrDotDots.append(document.getElementById('dot-dots-container'));
 ### Styling Options - Corner Squares
 
 Customizing the large corner squares.
+```javascript
 
 const qrStyledCorners = new QRCodeJs({
   data: 'Styled Corners',
@@ -319,6 +327,7 @@ qrStyledCorners.append(document.getElementById('styled-corners-container'));
 ### Styling Options - Corner Dots
 
 Customizing the small dots inside the corner squares.
+```javascript
 
 const qrStyledCornerDots = new QRCodeJs({
   data: 'Styled Corner Dots',
@@ -339,6 +348,7 @@ qrStyledCornerDots.append(document.getElementById('styled-corner-dots-container'
 Modifying the background color and shape.
 
 **Example 1: Colored Background**
+```javascript
 
 const qrColoredBg = new QRCodeJs({
   data: 'Colored Background',
@@ -351,6 +361,7 @@ qrColoredBg.append(document.getElementById('colored-bg-container'));
 ```
 
 **Example 2: Rounded Background**
+```javascript
 
 const qrRoundedBg = new QRCodeJs({
   data: 'Rounded Background',
@@ -421,6 +432,7 @@ qrGradientBg.append(document.getElementById('gradient-bg-container'));
 ### Image Embedding
 
 Adding a simple logo.
+```javascript
 
 const qrWithLogo = new QRCodeJs({
   data: 'QR with Logo',
@@ -679,6 +691,7 @@ qrUseSettings1.append(document.getElementById('builder-usesettings-container-1')
 ### Border Options (Free Version)
 
 Adding a basic border (includes "QR-Platform" branding).
+```javascript
 
 const qrFreeBorder = new QRCodeJs({
   data: 'Free Border Example',
@@ -693,6 +706,7 @@ const qrFreeBorder = new QRCodeJs({
 qrFreeBorder.append(document.getElementById('free-border-container'));
 ```
 **Example: Setting a Global Default Border**
+```javascript
 
 
 // Set a default border configuration by name
@@ -710,6 +724,7 @@ qrWithDefaultBorder.append(document.getElementById('default-border-container'));
 ```
 
 **Example: Using the Builder Pattern for Borders**
+```javascript
 
 
 // Start the builder with a border configuration by name