@qr-platform/qr-code.js 0.8.24 → 0.9.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +6 -0
- package/docs/advanced-examples.md +84 -0
- package/docs/api-reference-guide.md +38 -0
- package/docs/documentation.md +182 -0
- package/docs/examples.md +145 -27
- package/docs/template-update-plan.md +53 -0
- package/docs/usage-guide.md +47 -0
- package/lib/chunks/scan-validator-node-BGUxkBJt.js +1 -0
- package/lib/chunks/scan-validator-zxing-node-CV9K2v4n.js +1 -0
- package/lib/core/qr-code-js.d.ts +10 -1
- package/lib/core/qr-styles.d.ts +4 -0
- package/lib/index.d.ts +34 -7
- package/lib/index.js +1 -1
- package/lib/node/core/qr-code-js.d.ts +61 -0
- package/lib/node/core/qr-constant.d.ts +9 -0
- package/lib/node/core/qr-options-validation.d.ts +13 -0
- package/lib/node/core/qr-styles.d.ts +4 -0
- package/lib/node/core/qr-svg.d.ts +76 -0
- package/lib/node/core/qr-templates.d.ts +10 -0
- package/lib/node/figures/corner-dot.d.ts +24 -0
- package/lib/node/figures/corner-square.d.ts +24 -0
- package/lib/node/figures/dot.d.ts +31 -0
- package/lib/node/index.d.ts +101 -0
- package/lib/node/lib/image/GIFImage.d.ts +19 -0
- package/lib/node/lib/io/Base64.d.ts +10 -0
- package/lib/node/lib/io/Base64DecodeInputStream.d.ts +15 -0
- package/lib/node/lib/io/Base64EncodeOutputStream.d.ts +17 -0
- package/lib/node/lib/io/ByteArrayInputStream.d.ts +12 -0
- package/lib/node/lib/io/ByteArrayOutputStream.d.ts +12 -0
- package/lib/node/lib/io/InputStream.d.ts +10 -0
- package/lib/node/lib/io/OutputStream.d.ts +12 -0
- package/lib/node/lib/qr-code.d.ts +5 -0
- package/lib/node/lib/qrcode/BitBuffer.d.ts +11 -0
- package/lib/node/lib/qrcode/ErrorCorrectLevel.d.ts +23 -0
- package/lib/node/lib/qrcode/MaskPattern.d.ts +39 -0
- package/lib/node/lib/qrcode/Mode.d.ts +23 -0
- package/lib/node/lib/qrcode/Polynomial.d.ts +15 -0
- package/lib/node/lib/qrcode/QR8BitByte.d.ts +13 -0
- package/lib/node/lib/qrcode/QRAlphaNum.d.ts +13 -0
- package/lib/node/lib/qrcode/QRCode.d.ts +22 -0
- package/lib/node/lib/qrcode/QRCodeMinimal.d.ts +58 -0
- package/lib/node/lib/qrcode/QRData.d.ts +17 -0
- package/lib/node/lib/qrcode/QRKanji.d.ts +13 -0
- package/lib/node/lib/qrcode/QRMath.d.ts +13 -0
- package/lib/node/lib/qrcode/QRNumber.d.ts +14 -0
- package/lib/node/lib/qrcode/QRUtil.d.ts +25 -0
- package/lib/node/lib/qrcode/RSBlock.d.ts +16 -0
- package/lib/node/lib/text/createStringToBytes.d.ts +9 -0
- package/lib/node/lib/text/stringToBytes_SJIS.d.ts +8 -0
- package/lib/node/lib/text/stringToBytes_UTF8.d.ts +7 -0
- package/lib/node/lib/zbar-wasm/index.d.ts +1 -0
- package/lib/node/lib/zxing-js/src/browser/BrowserCodeReader.d.ts +150 -0
- package/lib/node/lib/zxing-js/src/browser/BrowserQRCodeReader.d.ts +29 -0
- package/lib/node/lib/zxing-js/src/browser/HTMLCanvasElementLuminanceSource.d.ts +27 -0
- package/lib/node/lib/zxing-js/src/browser/HTMLVisualMediaElement.d.ts +4 -0
- package/lib/node/lib/zxing-js/src/browser.d.ts +3 -0
- package/lib/node/lib/zxing-js/src/core/ArgumentException.d.ts +7 -0
- package/lib/node/lib/zxing-js/src/core/ArithmeticException.d.ts +7 -0
- package/lib/node/lib/zxing-js/src/core/ArrayIndexOutOfBoundsException.d.ts +10 -0
- package/lib/node/lib/zxing-js/src/core/BarcodeFormat.d.ts +42 -0
- package/lib/node/lib/zxing-js/src/core/Binarizer.d.ts +53 -0
- package/lib/node/lib/zxing-js/src/core/BinaryBitmap.d.ts +78 -0
- package/lib/node/lib/zxing-js/src/core/ChecksumException.d.ts +8 -0
- package/lib/node/lib/zxing-js/src/core/DecodeHintType.d.ts +91 -0
- package/lib/node/lib/zxing-js/src/core/Exception.d.ts +17 -0
- package/lib/node/lib/zxing-js/src/core/FormatException.d.ts +8 -0
- package/lib/node/lib/zxing-js/src/core/HighContrastLuminanceSource.d.ts +27 -0
- package/lib/node/lib/zxing-js/src/core/IllegalArgumentException.d.ts +7 -0
- package/lib/node/lib/zxing-js/src/core/IllegalStateException.d.ts +7 -0
- package/lib/node/lib/zxing-js/src/core/IndexOutOfBoundsException.d.ts +7 -0
- package/lib/node/lib/zxing-js/src/core/InvertedLuminanceSource.d.ts +22 -0
- package/lib/node/lib/zxing-js/src/core/LuminanceSource.d.ts +84 -0
- package/lib/node/lib/zxing-js/src/core/NodeLuminanceSource.d.ts +33 -0
- package/lib/node/lib/zxing-js/src/core/NotFoundException.d.ts +8 -0
- package/lib/node/lib/zxing-js/src/core/NullPointerException.d.ts +7 -0
- package/lib/node/lib/zxing-js/src/core/OutOfMemoryError.d.ts +6 -0
- package/lib/node/lib/zxing-js/src/core/Reader.d.ts +49 -0
- package/lib/node/lib/zxing-js/src/core/ReaderException.d.ts +7 -0
- package/lib/node/lib/zxing-js/src/core/ReedSolomonException.d.ts +7 -0
- package/lib/node/lib/zxing-js/src/core/Result.d.ts +52 -0
- package/lib/node/lib/zxing-js/src/core/ResultMetadataType.d.ts +68 -0
- package/lib/node/lib/zxing-js/src/core/ResultPoint.d.ts +34 -0
- package/lib/node/lib/zxing-js/src/core/ResultPointCallback.d.ts +11 -0
- package/lib/node/lib/zxing-js/src/core/UniversalLuminanceSource.d.ts +46 -0
- package/lib/node/lib/zxing-js/src/core/UnsupportedOperationException.d.ts +7 -0
- package/lib/node/lib/zxing-js/src/core/common/BitArray.d.ts +111 -0
- package/lib/node/lib/zxing-js/src/core/common/BitMatrix.d.ts +98 -0
- package/lib/node/lib/zxing-js/src/core/common/BitSource.d.ts +38 -0
- package/lib/node/lib/zxing-js/src/core/common/CharacterSetECI.d.ts +89 -0
- package/lib/node/lib/zxing-js/src/core/common/DecoderResult.d.ts +64 -0
- package/lib/node/lib/zxing-js/src/core/common/DefaultGridSampler.d.ts +10 -0
- package/lib/node/lib/zxing-js/src/core/common/DetectorResult.d.ts +16 -0
- package/lib/node/lib/zxing-js/src/core/common/GlobalHistogramBinarizer.d.ts +29 -0
- package/lib/node/lib/zxing-js/src/core/common/GridSampler.d.ts +36 -0
- package/lib/node/lib/zxing-js/src/core/common/GridSamplerInstance.d.ts +18 -0
- package/lib/node/lib/zxing-js/src/core/common/HybridBinarizer.d.ts +54 -0
- package/lib/node/lib/zxing-js/src/core/common/PerspectiveTransform.d.ts +26 -0
- package/lib/node/lib/zxing-js/src/core/common/StringUtils.d.ts +48 -0
- package/lib/node/lib/zxing-js/src/core/common/detector/MathUtils.d.ts +36 -0
- package/lib/node/lib/zxing-js/src/core/common/reedsolomon/AbstractGenericGF.d.ts +34 -0
- package/lib/node/lib/zxing-js/src/core/common/reedsolomon/GenericGF.d.ts +58 -0
- package/lib/node/lib/zxing-js/src/core/common/reedsolomon/GenericGFPoly.d.ts +47 -0
- package/lib/node/lib/zxing-js/src/core/common/reedsolomon/ReedSolomonDecoder.d.ts +40 -0
- package/lib/node/lib/zxing-js/src/core/qrcode/QRCodeReader.d.ts +35 -0
- package/lib/node/lib/zxing-js/src/core/qrcode/decoder/BitMatrixParser.d.ts +58 -0
- package/lib/node/lib/zxing-js/src/core/qrcode/decoder/DataBlock.d.ts +28 -0
- package/lib/node/lib/zxing-js/src/core/qrcode/decoder/DataMask.d.ts +36 -0
- package/lib/node/lib/zxing-js/src/core/qrcode/decoder/DecodedBitStreamParser.d.ts +30 -0
- package/lib/node/lib/zxing-js/src/core/qrcode/decoder/Decoder.d.ts +44 -0
- package/lib/node/lib/zxing-js/src/core/qrcode/decoder/ECB.d.ts +12 -0
- package/lib/node/lib/zxing-js/src/core/qrcode/decoder/ECBlocks.d.ts +16 -0
- package/lib/node/lib/zxing-js/src/core/qrcode/decoder/ErrorCorrectionLevel.d.ts +38 -0
- package/lib/node/lib/zxing-js/src/core/qrcode/decoder/FormatInformation.d.ts +33 -0
- package/lib/node/lib/zxing-js/src/core/qrcode/decoder/Mode.d.ts +56 -0
- package/lib/node/lib/zxing-js/src/core/qrcode/decoder/QRCodeDecoderMetaData.d.ts +21 -0
- package/lib/node/lib/zxing-js/src/core/qrcode/decoder/Version.d.ts +44 -0
- package/lib/node/lib/zxing-js/src/core/qrcode/detector/AlignmentPattern.d.ts +21 -0
- package/lib/node/lib/zxing-js/src/core/qrcode/detector/AlignmentPatternFinder.d.ts +82 -0
- package/lib/node/lib/zxing-js/src/core/qrcode/detector/Detector.d.ts +87 -0
- package/lib/node/lib/zxing-js/src/core/qrcode/detector/FinderPattern.d.ts +26 -0
- package/lib/node/lib/zxing-js/src/core/qrcode/detector/FinderPatternFinder.d.ts +114 -0
- package/lib/node/lib/zxing-js/src/core/qrcode/detector/FinderPatternInfo.d.ts +16 -0
- package/lib/node/lib/zxing-js/src/core/util/Arrays.d.ts +45 -0
- package/lib/node/lib/zxing-js/src/core/util/Charset.d.ts +7 -0
- package/lib/node/lib/zxing-js/src/core/util/Float.d.ts +14 -0
- package/lib/node/lib/zxing-js/src/core/util/Integer.d.ts +19 -0
- package/lib/node/lib/zxing-js/src/core/util/StringBuilder.d.ts +21 -0
- package/lib/node/lib/zxing-js/src/core/util/StringEncoding.d.ts +51 -0
- package/lib/node/lib/zxing-js/src/core/util/System.d.ts +10 -0
- package/lib/node/lib/zxing-js/src/customTypings.d.ts +16 -0
- package/lib/node/lib/zxing-js/src/index.d.ts +5 -0
- package/lib/node/lib/zxing-js/src/node.d.ts +1 -0
- package/lib/node/license/LicenseManager.d.ts +69 -0
- package/lib/node/license/LicenseManagerNode.d.ts +64 -0
- package/lib/node/node.d.ts +88 -0
- package/lib/node/options-demo.d.ts +239 -0
- package/lib/node/plugins/QRBorderHelpers.d.ts +32 -0
- package/lib/node/plugins/QRBorderPlugin.d.ts +35 -0
- package/lib/node/plugins/QRValidatorZbar.d.ts +38 -0
- package/lib/node/plugins/QRValidatorZbarNode.d.ts +60 -0
- package/lib/node/plugins/QRValidatorZbarNodeSharp.d.ts +83 -0
- package/lib/node/templates/borders-inner-outter.d.ts +129 -0
- package/lib/node/templates/borders-inner-scale-offset.d.ts +497 -0
- package/lib/node/templates/borders-inner.d.ts +129 -0
- package/lib/node/templates/borders-no-license.d.ts +129 -0
- package/lib/node/templates/borders-outter.d.ts +129 -0
- package/lib/node/templates/borders-text-auto-curved.d.ts +129 -0
- package/lib/node/templates/borders-text-full-curved.d.ts +133 -0
- package/lib/node/templates/borders.d.ts +129 -0
- package/lib/node/templates/scales.d.ts +130 -0
- package/lib/node/templates/scan-validators/index.d.ts +1 -0
- package/lib/node/templates/scan-validators/tests/cases/basic-inverted.d.ts +9 -0
- package/lib/node/templates/scan-validators/tests/cases/basic-no-license.d.ts +3 -0
- package/lib/node/templates/scan-validators/tests/cases/basic.d.ts +3 -0
- package/lib/node/templates/scan-validators/tests/cases/colors-inverted.d.ts +2 -0
- package/lib/node/templates/scan-validators/tests/cases/colors.d.ts +58 -0
- package/lib/node/templates/scan-validators/tests/cases/out-of-borders-inverted.d.ts +9 -0
- package/lib/node/templates/scan-validators/tests/cases/out-of-borders.d.ts +9 -0
- package/lib/node/templates/scan-validators/tests/cases/position-inverted.d.ts +9 -0
- package/lib/node/templates/scan-validators/tests/cases/position.d.ts +3 -0
- package/lib/node/templates/scan-validators/tests/index.d.ts +27 -0
- package/lib/node/tools/browser-image-tools.d.ts +7 -0
- package/lib/node/tools/browser-utils.d.ts +18 -0
- package/lib/node/types/helper.d.ts +23 -0
- package/lib/node/types/style-options.d.ts +37 -0
- package/lib/node/utils/canvas-options.d.ts +7 -0
- package/lib/node/utils/color.d.ts +4 -0
- package/lib/node/utils/gradient.d.ts +26 -0
- package/lib/node/utils/image.d.ts +16 -0
- package/lib/node/utils/merge.d.ts +5 -0
- package/lib/node/utils/options.d.ts +220 -0
- package/lib/node/utils/qrcode.d.ts +8 -0
- package/lib/node/utils/scan-validator-node.d.ts +15 -0
- package/lib/node/utils/scan-validator-zxing-node.d.ts +18 -0
- package/lib/node/utils/scan-validators/abstract-scan-validator.d.ts +43 -0
- package/lib/node/utils/scan-validators/zbar-scan-validator.d.ts +8 -0
- package/lib/node/utils/scan-validators/zxing-canvas-scan-validator.d.ts +10 -0
- package/lib/node/utils/scan-validators/zxing-scan-validator.d.ts +8 -0
- package/lib/node/utils/style-mapper.d.ts +13 -0
- package/lib/node/utils/svg.d.ts +2 -0
- package/lib/node/utils/token-validator.d.ts +19 -0
- package/lib/node.d.ts +38 -10
- package/lib/node.js +1 -1
- package/lib/types/style-options.d.ts +37 -0
- package/lib/utils/style-mapper.d.ts +13 -0
- package/package.json +1 -1
package/CHANGELOG.md
CHANGED
@@ -446,6 +446,90 @@ const qrBorderElaborate = new QRCodeJs({
|
|
446
446
|
qrBorderElaborate.append(document.getElementById('border-elaborate-container'));
|
447
447
|
```
|
448
448
|
|
449
|
+
|
450
|
+
|
451
|
+
---
|
452
|
+
|
453
|
+
### Builder Pattern Example: Combining Template and Style
|
454
|
+
|
455
|
+
Demonstrates using the fluent builder pattern (`useTemplate`, `useStyle`) to combine base settings with specific styles for a complex result.
|
456
|
+
|
457
|
+
```typescript
|
458
|
+
// Define a base template (could be predefined like 'dots' or 'rounded')
|
459
|
+
const baseTemplate = {
|
460
|
+
qrOptions: { errorCorrectionLevel: 'Q' },
|
461
|
+
backgroundOptions: { color: '#f0f0f0' }, // Light grey background
|
462
|
+
margin: 5
|
463
|
+
};
|
464
|
+
|
465
|
+
// Define a style for specific visual elements - a purple/blue gradient
|
466
|
+
const gradientStyle = {
|
467
|
+
dotsOptions: {
|
468
|
+
type: 'classy',
|
469
|
+
gradient: {
|
470
|
+
type: 'linear',
|
471
|
+
rotation: Math.PI / 6, // 30 degrees
|
472
|
+
colorStops: [
|
473
|
+
{ offset: 0, color: '#6a11cb' }, // Purple
|
474
|
+
{ offset: 1, color: '#2575fc' } // Blue
|
475
|
+
]
|
476
|
+
}
|
477
|
+
},
|
478
|
+
cornersSquareOptions: { type: 'dot', color: '#6a11cb' } // Match start color of gradient
|
479
|
+
};
|
480
|
+
|
481
|
+
// Use the builder pattern to combine template and style
|
482
|
+
const qrBuilderExample = QRCodeJs.useTemplate(baseTemplate) // Start with base settings
|
483
|
+
.useStyle(gradientStyle) // Apply the gradient style
|
484
|
+
.options({ data: 'https://example.com/builder-pattern-advanced' }) // Add the data
|
485
|
+
|
486
|
+
qrBuilderExample.append(document.getElementById('builder-pattern-container'));
|
487
|
+
|
488
|
+
// or using the build method
|
489
|
+
|
490
|
+
const qrBuilderExampleWithBuild = QRCodeJs.useTemplate(baseTemplate)
|
491
|
+
.useStyle(gradientStyle)
|
492
|
+
.build();
|
493
|
+
|
494
|
+
qrBuilderExampleWithBuild.append(document.getElementById('builder-pattern-container-build'));
|
495
|
+
qrBuilderExampleWithBuild.update({ data: 'https://example.com/builder-pattern-advanced' });
|
496
|
+
```
|
497
|
+
---
|
498
|
+
|
499
|
+
### setTemplate and setStyle (Class Instance Pattern)
|
500
|
+
|
501
|
+
Demonstrates using the class instance pattern (`setTemplate`, `setStyle`) to combine base settings with specific styles for a complex result.
|
502
|
+
|
503
|
+
```typescript
|
504
|
+
// Define a base template (could be predefined like 'dots' or 'rounded')
|
505
|
+
const baseTemplate = {
|
506
|
+
qrOptions: { errorCorrectionLevel: 'Q' },
|
507
|
+
backgroundOptions: { color: '#f0f0f0' }, // Light grey background
|
508
|
+
margin: 5
|
509
|
+
};
|
510
|
+
|
511
|
+
// Define a style for specific visual elements - a purple/blue gradient
|
512
|
+
const gradientStyle = {
|
513
|
+
dotsOptions: {
|
514
|
+
type: 'classy',
|
515
|
+
gradient: {
|
516
|
+
type: 'linear',
|
517
|
+
rotation: Math.PI / 6, // 30 degrees
|
518
|
+
colorStops: [
|
519
|
+
{ offset: 0, color: '#6a11cb' }, // Purple
|
520
|
+
{ offset: 1, color: '#2575fc' } // Blue
|
521
|
+
]
|
522
|
+
}
|
523
|
+
},
|
524
|
+
cornersSquareOptions: { type: 'dot', color: '#6a11cb' } // Match start color of gradient
|
525
|
+
};
|
526
|
+
|
527
|
+
// Use the builder pattern to combine template and style
|
528
|
+
const qrBuilderExample = new QRCodeJs({ data: 'https://example.com/class-instance-pattern-advanced' })
|
529
|
+
.setTemplate(baseTemplate) // Start with 'classy' template
|
530
|
+
.setStyle(gradientStyle) // Apply the gradient style
|
531
|
+
.append(document.getElementById('builder-pattern-container'));
|
532
|
+
```
|
449
533
|
---
|
450
534
|
|
451
535
|
### Scan Validation (Premium Feature)
|
@@ -86,9 +86,13 @@ qrCode.append(document.getElementById('qr-container'));
|
|
86
86
|
| `serialize` | `inverted?: boolean` | Converts the QR code to an SVG string. Returns `Promise<string \| undefined>`. |
|
87
87
|
| `download` | `downloadOptions?: { name?: string; extension: 'svg' \| 'png' \| 'jpeg' \| 'webp' }, canvasOptions?: CanvasOptions` | Downloads the QR code as a file. Returns `Promise<void>`. |
|
88
88
|
| `update` | `options?: RecursivePartial<Options>` | Updates the QR code with new options. Returns `void`. |
|
89
|
+
| `setTemplate` | `templateNameOrOptions: string \| RecursivePartial<Options>` | Sets a global default template for subsequent instances. Returns `void`. |\n| `useTemplate` | `templateNameOrOptions: string \| RecursivePartial<Options>` | Initiates a builder pattern pre-configured with a template. Returns `QRCodeBuilder`. |
|
89
90
|
| `validateScanning` | `validatorId?: string, debug?: boolean` | **(Premium method)** Validates that the QR code is scannable. Returns `Promise<ScanValidatorResponse>`. |
|
90
91
|
|
91
92
|
---
|
93
|
+
|
94
|
+
| `useStyle` | `styleNameOrOptions: string \| StyleOptions` | Creates a `QRCodeBuilder` instance initialized with a specific style. Returns `QRCodeBuilder`. |
|
95
|
+
| `useTemplate` | `templateNameOrOptions: string \| RecursivePartial<Options>` | Creates a `QRCodeBuilder` instance initialized with a specific template. Returns `QRCodeBuilder`. |
|
92
96
|
<a id="borderoptions"></a>
|
93
97
|
### borderOptions Options
|
94
98
|
|
@@ -244,6 +248,40 @@ enum ImageMode {
|
|
244
248
|
|
245
249
|
---
|
246
250
|
|
251
|
+
|
252
|
+
|
253
|
+
---
|
254
|
+
|
255
|
+
### QRCodeBuilder Class
|
256
|
+
|
257
|
+
The `QRCodeBuilder` provides a fluent interface for configuring and creating `QRCodeJs` instances, often starting with a template or style.
|
258
|
+
|
259
|
+
**Usage:**
|
260
|
+
|
261
|
+
```typescript
|
262
|
+
// Start with a template
|
263
|
+
const qr1 = QRCodeJs.useTemplate('rounded')
|
264
|
+
.options({ data: 'Data for rounded template' })
|
265
|
+
.build();
|
266
|
+
|
267
|
+
// Start with a style
|
268
|
+
const qr2 = QRCodeJs.useStyle({ dotsOptions: { type: 'dots', color: 'blue' } })
|
269
|
+
.options({ data: 'Data for blue dots style' })
|
270
|
+
.build();
|
271
|
+
|
272
|
+
// Chain template and style
|
273
|
+
const qr3 = QRCodeJs.useTemplate('basic')
|
274
|
+
.useStyle({ backgroundOptions: { color: '#eee' } })
|
275
|
+
.options({ data: 'Data with template and style' })
|
276
|
+
.build();
|
277
|
+
```
|
278
|
+
|
279
|
+
| Method | Parameters | Description |
|
280
|
+
| :------------ | :------------------------------------------------------------------------- | :--------------------------------------------------------------------------------------------------------- |
|
281
|
+
| `useTemplate` | `templateNameOrOptions: string \| RecursivePartial<Options>` | Applies a template's options to the current configuration. Options from subsequent calls take precedence. Returns `this`. |
|
282
|
+
| `useStyle` | `styleNameOrOptions: string \| StyleOptions` | Applies style options (mapping them to `Options`) to the current configuration. Returns `this`. |
|
283
|
+
| `options` | `options: RecursivePartial<Options>` | Merges the provided `Options` into the current configuration and returns the final `QRCodeJs` instance. |
|
284
|
+
| `build` | - | Creates and returns the final `QRCodeJs` instance based on the accumulated configuration. |
|
247
285
|
### See Also
|
248
286
|
- [QRCode.js Documentation](./documentation.md#start)
|
249
287
|
- [Quick References Guide](./quick-references-guide.md#start)
|
package/docs/documentation.md
CHANGED
@@ -997,6 +997,63 @@ When using the basic border features in the free version, the library will autom
|
|
997
997
|
});
|
998
998
|
```
|
999
999
|
|
1000
|
+
|
1001
|
+
## Using Templates
|
1002
|
+
|
1003
|
+
Templates offer a convenient way to apply a consistent set of styling and configuration options across multiple QR codes. QRCode.js provides two primary methods for working with templates:
|
1004
|
+
|
1005
|
+
### Setting Global Defaults (`setTemplate`)
|
1006
|
+
|
1007
|
+
The static method `QRCodeJs.setTemplate(templateNameOrOptions)` allows you to define a default template that will be automatically applied to all `QRCodeJs` instances created *after* the template is set. This is useful for establishing a baseline style for your application.
|
1008
|
+
|
1009
|
+
- You can provide the name of a predefined template (e.g., `'rounded'`, `'dots'`, `'classy'`).
|
1010
|
+
- You can provide a custom partial options object (`RecursivePartial<Options>`).
|
1011
|
+
- Any options provided during the instantiation of `new QRCodeJs({...})` will override the global template defaults for that specific instance.
|
1012
|
+
- Call `QRCodeJs.setTemplate(null)` or `QRCodeJs.setTemplate('basic')` to reset to the default behavior.
|
1013
|
+
|
1014
|
+
```typescript
|
1015
|
+
// Set a global template
|
1016
|
+
QRCodeJs.setTemplate('dots');
|
1017
|
+
|
1018
|
+
// This QR code will use the 'dots' template
|
1019
|
+
const qr1 = new QRCodeJs({ data: 'Uses global dots template' });
|
1020
|
+
|
1021
|
+
// Override the global template's color for this instance
|
1022
|
+
const qr2 = new QRCodeJs({
|
1023
|
+
data: 'Overrides global dots color',
|
1024
|
+
dotsOptions: { color: '#FF4500' } // OrangeRed
|
1025
|
+
});
|
1026
|
+
|
1027
|
+
// Reset to basic template
|
1028
|
+
QRCodeJs.setTemplate('basic');
|
1029
|
+
```
|
1030
|
+
|
1031
|
+
### Using the Builder Pattern (`useTemplate`)
|
1032
|
+
|
1033
|
+
The static method `QRCodeJs.useTemplate(templateNameOrOptions)` initiates a builder pattern. It returns a builder object pre-configured with the specified template (either by name or by providing a partial options object directly).
|
1034
|
+
|
1035
|
+
- This method **does not** set a global default.
|
1036
|
+
- You **must** chain this call with the `.options({...})` method on the returned builder.
|
1037
|
+
- The `.options()` method takes the final configuration, including the required `data` property and any overrides specific to this instance.
|
1038
|
+
|
1039
|
+
```typescript
|
1040
|
+
// Start with the 'rounded' template, provide data and override color
|
1041
|
+
const qrBuilder1 = QRCodeJs.useTemplate('rounded').options({
|
1042
|
+
data: 'Built with rounded template',
|
1043
|
+
dotsOptions: { color: '#007BFF' } // Blue override
|
1044
|
+
});
|
1045
|
+
|
1046
|
+
// Start with inline custom options, then provide data
|
1047
|
+
const qrBuilder2 = QRCodeJs.useTemplate({
|
1048
|
+
shape: 'circle',
|
1049
|
+
dotsOptions: { type: 'star', color: '#DC3545' } // Red stars
|
1050
|
+
}).options({
|
1051
|
+
data: 'Built with inline circle/star template'
|
1052
|
+
});
|
1053
|
+
```
|
1054
|
+
|
1055
|
+
Choosing between `setTemplate` and `useTemplate` depends on whether you need a persistent global default or a one-off configuration based on a template.
|
1056
|
+
|
1000
1057
|
## Complete Examples
|
1001
1058
|
|
1002
1059
|
### Basic QR Code with Custom Dots
|
@@ -1306,6 +1363,23 @@ qrCode.validateScanning(
|
|
1306
1363
|
|
1307
1364
|
### Static Methods (License Management)
|
1308
1365
|
|
1366
|
+
|
1367
|
+
|
1368
|
+
#### `useTemplate()`
|
1369
|
+
|
1370
|
+
Creates a `QRCodeBuilder` instance initialized with a specific template.
|
1371
|
+
|
1372
|
+
```typescript
|
1373
|
+
QRCodeJs.useTemplate(templateNameOrOptions: string | RecursivePartial<Options>): QRCodeBuilder
|
1374
|
+
```
|
1375
|
+
|
1376
|
+
#### `useStyle()`
|
1377
|
+
|
1378
|
+
Creates a `QRCodeBuilder` instance initialized with a specific style.
|
1379
|
+
|
1380
|
+
```typescript
|
1381
|
+
QRCodeJs.useStyle(styleNameOrOptions: string | StyleOptions): QRCodeBuilder
|
1382
|
+
```
|
1309
1383
|
These methods are called directly on the `QRCodeJs` class (or `QRCodeJs` imported from `qrcode-js/node`).
|
1310
1384
|
|
1311
1385
|
#### `initializeIfNeeded()`
|
@@ -1356,6 +1430,114 @@ Sets the URL endpoint for license key validation.
|
|
1356
1430
|
QRCodeJs.setLicenseUrl(url: string): void
|
1357
1431
|
```
|
1358
1432
|
|
1433
|
+
#### `setTemplate()`
|
1434
|
+
|
1435
|
+
Sets a global default template for subsequent `QRCodeJs` instances.
|
1436
|
+
|
1437
|
+
```typescript
|
1438
|
+
QRCodeJs.setTemplate(templateNameOrOptions: string | RecursivePartial<Options>): void
|
1439
|
+
```
|
1440
|
+
|
1441
|
+
#### `useTemplate()`
|
1442
|
+
|
1443
|
+
Initiates a builder pattern pre-configured with a template.
|
1444
|
+
|
1445
|
+
```typescript
|
1446
|
+
QRCodeJs.useTemplate(templateNameOrOptions: string | RecursivePartial<Options>): QRCodeBuilder
|
1447
|
+
```
|
1448
|
+
|
1449
|
+
#### `setStyle()`
|
1450
|
+
|
1451
|
+
Sets a global default style for subsequent `QRCodeJs` instances.
|
1452
|
+
|
1453
|
+
```typescript
|
1454
|
+
QRCodeJs.setStyle(styleNameOrOptions: string | RecursivePartial<StyleOptions>): void
|
1455
|
+
```
|
1456
|
+
|
1457
|
+
#### `useStyle()`
|
1458
|
+
|
1459
|
+
Initiates a builder pattern pre-configured with a style.
|
1460
|
+
|
1461
|
+
```typescript
|
1462
|
+
QRCodeJs.useTemplate(styleNameOrOptions: string | RecursivePartial<StyleOptions>): QRCodeBuilder
|
1463
|
+
```
|
1464
|
+
|
1465
|
+
## Fluent Builder Pattern (`useTemplate`, `useStyle`, `build`)
|
1466
|
+
|
1467
|
+
QRCode.js offers a fluent builder pattern for a more readable and chainable way to configure and create QR codes, especially when combining templates, styles, and custom options.
|
1468
|
+
|
1469
|
+
### Overview
|
1470
|
+
|
1471
|
+
Instead of passing all options to the constructor, you can start with a base template or style using `QRCodeJs.useTemplate()` or `QRCodeJs.useStyle()`. These methods return a `QRCodeBuilder` instance. You can then chain further `.useTemplate()`, `.useStyle()`, and finally `.options()` or `.build()` to finalize the configuration.
|
1472
|
+
|
1473
|
+
- `QRCodeJs.useTemplate(template)`: Starts a builder with a predefined or custom template.
|
1474
|
+
- `QRCodeJs.useStyle(style)`: Starts a builder and applies a predefined or custom style.
|
1475
|
+
- `.useTemplate(template)` (on builder): Applies another template. Options merge, with later calls overriding earlier ones.
|
1476
|
+
- `.useStyle(style)` (on builder): Applies another style. Options merge, with later calls overriding earlier ones.
|
1477
|
+
- `.options(options)` (on builder): Merges final specific options and returns the `QRCodeJs` instance.
|
1478
|
+
- `.build()` (on builder, optional method if options(options) is NOT called): Creates the `QRCodeJs` instance with the accumulated configuration.
|
1479
|
+
|
1480
|
+
### How `useStyle` and `useTemplate` Work Together (Builder Pattern)
|
1481
|
+
|
1482
|
+
You can chain `useTemplate` and `useStyle` calls. The options are merged progressively. If both a template and a style define the same option (e.g., `dotsOptions.color`), the option from the *last* applied template or style in the chain will take precedence.
|
1483
|
+
|
1484
|
+
### Examples
|
1485
|
+
|
1486
|
+
**1. Start with a Template, Add Options:**
|
1487
|
+
|
1488
|
+
```typescript
|
1489
|
+
const qrFromTemplate = QRCodeJs.useTemplate('rounded') // Start with 'rounded' template
|
1490
|
+
.options({ // Merge specific options
|
1491
|
+
data: 'Data for rounded QR',
|
1492
|
+
margin: 10
|
1493
|
+
})
|
1494
|
+
.build(); // Build the final instance
|
1495
|
+
|
1496
|
+
qrFromTemplate.append(document.getElementById('qr-container-1'));
|
1497
|
+
```
|
1498
|
+
|
1499
|
+
**2. Start with a Style, Add Options:**
|
1500
|
+
|
1501
|
+
```typescript
|
1502
|
+
const myStyle = {
|
1503
|
+
dotsOptions: { type: 'dots', color: '#FF6347' }, // Tomato dots
|
1504
|
+
backgroundOptions: { color: '#F0F8FF' } // AliceBlue background
|
1505
|
+
};
|
1506
|
+
|
1507
|
+
const qrFromStyle = QRCodeJs.useStyle(myStyle) // Start with custom style
|
1508
|
+
.options({ // Merge specific options
|
1509
|
+
data: 'Data for styled QR',
|
1510
|
+
qrOptions: { errorCorrectionLevel: 'H' }
|
1511
|
+
})
|
1512
|
+
.build();
|
1513
|
+
|
1514
|
+
qrFromStyle.append(document.getElementById('qr-container-2'));
|
1515
|
+
```
|
1516
|
+
|
1517
|
+
**3. Chain Template and Style:**
|
1518
|
+
|
1519
|
+
```typescript
|
1520
|
+
const qrCombined = QRCodeJs.useTemplate('dots') // Start with 'dots' template (black dots)
|
1521
|
+
.useStyle({ dotsOptions: { color: '#4682B4' } }) // Apply style, overriding dot color to SteelBlue
|
1522
|
+
.options({ data: 'Template + Style' })
|
1523
|
+
.build();
|
1524
|
+
|
1525
|
+
qrCombined.append(document.getElementById('qr-container-3'));
|
1526
|
+
```
|
1527
|
+
|
1528
|
+
**4. Build without final options:**
|
1529
|
+
|
1530
|
+
```typescript
|
1531
|
+
// Assume 'data' is part of the template or style
|
1532
|
+
const qrBuildDirectly = QRCodeJs.useTemplate({
|
1533
|
+
data: 'Data in template',
|
1534
|
+
dotsOptions: { type: 'square' }
|
1535
|
+
})
|
1536
|
+
.build(); // Build directly if all options are set
|
1537
|
+
|
1538
|
+
qrBuildDirectly.append(document.getElementById('qr-container-4'));
|
1539
|
+
```
|
1540
|
+
|
1359
1541
|
## FAQ
|
1360
1542
|
|
1361
1543
|
### General Questions
|
package/docs/examples.md
CHANGED
@@ -35,69 +35,187 @@ if (container && qrCode.svgElement) {
|
|
35
35
|
}
|
36
36
|
```
|
37
37
|
|
38
|
-
---
|
39
|
-
|
40
38
|
## Using Templates
|
41
39
|
|
42
|
-
Templates provide
|
40
|
+
Templates provide convenient ways to apply predefined sets of options. QRCode.js offers two main approaches: setting a global template default with `setTemplate` and using a builder pattern with `useTemplate`.
|
41
|
+
|
42
|
+
### Setting Global Defaults with `setTemplate`
|
43
43
|
|
44
|
-
|
44
|
+
The `QRCodeJs.setTemplate()` static method allows you to define default options that will apply to all subsequently created `QRCodeJs` instances until the template is changed or cleared.
|
45
|
+
|
46
|
+
**Example 1: Setting a Predefined Global Template ('rounded')**
|
45
47
|
|
46
48
|
```javascript
|
47
|
-
//
|
49
|
+
// Import the library (adjust path as needed)
|
50
|
+
import { QRCodeJs, Options } from '@qr-platform/qr-code.js';
|
48
51
|
|
49
|
-
// Set the 'rounded' template globally
|
52
|
+
// Set the 'rounded' template globally
|
50
53
|
QRCodeJs.setTemplate('rounded');
|
51
54
|
|
52
|
-
|
53
|
-
|
55
|
+
// This instance will use the 'rounded' template defaults
|
56
|
+
const qrGlobalRounded = new QRCodeJs({
|
57
|
+
data: 'Uses the global rounded template'
|
58
|
+
});
|
59
|
+
qrGlobalRounded.append(document.getElementById('global-template-rounded-container'));
|
60
|
+
|
61
|
+
// This instance will also use 'rounded'
|
62
|
+
const qrAnotherRounded = new QRCodeJs({
|
63
|
+
data: 'Also uses rounded template'
|
54
64
|
});
|
55
|
-
|
65
|
+
qrAnotherRounded.append(document.getElementById('another-rounded-container'));
|
56
66
|
|
57
|
-
// Note: The template remains
|
67
|
+
// Note: The global template remains active until changed or cleared.
|
68
|
+
// To clear: QRCodeJs.setTemplate(null); or QRCodeJs.setTemplate('basic');
|
58
69
|
```
|
59
70
|
|
60
|
-
**Example 2:
|
71
|
+
**Example 2: Setting a Custom Global Template Object**
|
61
72
|
|
62
73
|
```javascript
|
63
|
-
|
64
|
-
|
65
|
-
const myCustomTemplate = {
|
74
|
+
const myGlobalTemplate = {
|
66
75
|
dotsOptions: { type: 'classy', color: '#8A2BE2' }, // BlueViolet classy dots
|
67
76
|
backgroundOptions: { color: '#FAFAFA' }, // Off-white background
|
68
77
|
cornersSquareOptions: { type: 'dot', color: '#8A2BE2' }
|
69
78
|
};
|
70
79
|
|
71
80
|
// Set the custom template globally
|
72
|
-
QRCodeJs.setTemplate(
|
81
|
+
QRCodeJs.setTemplate(myGlobalTemplate);
|
73
82
|
|
74
|
-
const
|
75
|
-
data: 'Uses a custom template
|
83
|
+
const qrCustomGlobal = new QRCodeJs({
|
84
|
+
data: 'Uses a custom global template'
|
76
85
|
});
|
77
|
-
|
86
|
+
qrCustomGlobal.append(document.getElementById('custom-global-container'));
|
78
87
|
```
|
79
88
|
|
80
|
-
**Example 3: Overriding Template Options**
|
89
|
+
**Example 3: Overriding Global Template Options**
|
81
90
|
|
82
91
|
```javascript
|
83
|
-
// filepath: /Users/kurdin/projects/qr-platform/qr-code-js/docs/examples.md
|
84
|
-
|
85
92
|
// Assume 'dots' template is set globally
|
86
93
|
QRCodeJs.setTemplate('dots');
|
87
94
|
|
88
|
-
const
|
89
|
-
data: 'Overrides template color',
|
90
|
-
// This color
|
95
|
+
const qrOverrideGlobal = new QRCodeJs({
|
96
|
+
data: 'Overrides global template color',
|
97
|
+
// This color overrides the black color from the 'dots' template
|
91
98
|
dotsOptions: { color: '#FF4500' } // OrangeRed dots
|
92
99
|
});
|
93
|
-
|
100
|
+
qrOverrideGlobal.append(document.getElementById('override-global-container'));
|
101
|
+
```
|
94
102
|
|
95
|
-
|
96
|
-
|
103
|
+
### Using the Builder Pattern with `useTemplate`
|
104
|
+
|
105
|
+
The `QRCodeJs.useTemplate()` static method provides a flexible builder pattern. It returns a builder instance pre-configured with a template (by name or by providing options directly). You *must* then call the `.options()` method on the builder to provide the required `data` and any final overrides. This approach does *not* affect the global template setting.
|
106
|
+
|
107
|
+
**Example 4: Using `useTemplate` with a Predefined Name ('dots')**
|
108
|
+
|
109
|
+
```javascript
|
110
|
+
// Import the library (adjust path as needed)
|
111
|
+
import { QRCodeJs, Options } from '@qr-platform/qr-code.js';
|
112
|
+
|
113
|
+
// Start with the 'dots' template, then provide data and overrides
|
114
|
+
const qrBuilderDots = QRCodeJs.useTemplate('dots').options({
|
115
|
+
data: 'Built with dots template',
|
116
|
+
dotsOptions: { color: '#20C997' } // Override color to Teal
|
117
|
+
});
|
118
|
+
qrBuilderDots.append(document.getElementById('builder-dots-container'));
|
119
|
+
|
120
|
+
// This instance is unaffected by the useTemplate call above
|
121
|
+
const qrBasicAfterBuilder = new QRCodeJs({ data: 'Basic QR' });
|
122
|
+
qrBasicAfterBuilder.append(document.getElementById('basic-after-builder-container'));
|
123
|
+
```
|
124
|
+
|
125
|
+
**Example 5: Using `useTemplate` with Custom Options**
|
126
|
+
|
127
|
+
```javascript
|
128
|
+
const myInlineTemplate = {
|
129
|
+
dotsOptions: { type: 'star', color: '#DC3545' }, // Red stars
|
130
|
+
shape: 'circle'
|
131
|
+
};
|
132
|
+
|
133
|
+
// Start with custom options, then provide data
|
134
|
+
const qrBuilderCustom = QRCodeJs.useTemplate(myInlineTemplate).options({
|
135
|
+
data: 'Built with inline custom template (stars)'
|
136
|
+
});
|
137
|
+
qrBuilderCustom.append(document.getElementById('builder-custom-container'));
|
97
138
|
```
|
98
139
|
|
140
|
+
**Example 6: Overriding `useTemplate` Options in `.options()`**
|
141
|
+
|
142
|
+
```javascript
|
143
|
+
// Start with the 'classy' template
|
144
|
+
const qrBuilderOverride = QRCodeJs.useTemplate('classy').options({
|
145
|
+
data: 'Overrides classy template color',
|
146
|
+
// This color overrides the black from the 'classy' template
|
147
|
+
dotsOptions: { color: '#6f42c1' } // Indigo
|
148
|
+
});
|
149
|
+
qrBuilderOverride.append(document.getElementById('builder-override-container'));
|
150
|
+
```
|
99
151
|
---
|
100
152
|
|
153
|
+
## Using the Builder Pattern (`useTemplate`, `useStyle`, `build`)
|
154
|
+
|
155
|
+
The builder pattern provides a fluent way to configure QR codes, often starting with a template or style.
|
156
|
+
|
157
|
+
**Example 1: Using `useTemplate` with a Predefined Template ('rounded')**
|
158
|
+
|
159
|
+
```javascript
|
160
|
+
// filepath: /Users/kurdin/projects/qr-platform/qr-code-js/docs/examples.md
|
161
|
+
|
162
|
+
const qrFromTemplate = QRCodeJs.useTemplate('rounded') // Start builder with 'rounded' template
|
163
|
+
.options({ data: 'Uses the rounded template via builder' }) // Add data
|
164
|
+
|
165
|
+
qrFromTemplate.append(document.getElementById('template-rounded-container'));
|
166
|
+
```
|
167
|
+
|
168
|
+
**Example 2: Using `useTemplate` with a Custom Template Object**
|
169
|
+
|
170
|
+
```javascript
|
171
|
+
// filepath: /Users/kurdin/projects/qr-platform/qr-code-js/docs/examples.md
|
172
|
+
|
173
|
+
const myCustomTemplate = {
|
174
|
+
dotsOptions: { type: 'classy', color: '#8A2BE2' }, // BlueViolet classy dots
|
175
|
+
backgroundOptions: { color: '#FAFAFA' }, // Off-white background
|
176
|
+
cornersSquareOptions: { type: 'dot', color: '#8A2BE2' }
|
177
|
+
};
|
178
|
+
|
179
|
+
const qrCustomTemplate = QRCodeJs.useTemplate(myCustomTemplate) // Start builder with custom template
|
180
|
+
.build();
|
181
|
+
|
182
|
+
// update the data
|
183
|
+
qrCustomTemplate.update({ data: 'Uses a custom template object' });
|
184
|
+
qrCustomTemplate.append(document.getElementById('template-custom-container'));
|
185
|
+
```
|
186
|
+
|
187
|
+
**Example 3: Using `useStyle`**
|
188
|
+
|
189
|
+
```javascript
|
190
|
+
// filepath: /Users/kurdin/projects/qr-platform/qr-code-js/docs/examples.md
|
191
|
+
|
192
|
+
const myStyle = {
|
193
|
+
dotsOptions: { type: 'dots', color: '#FF4500' }, // OrangeRed dots
|
194
|
+
backgroundOptions: { color: '#FFF0E1' } // SeaShell background
|
195
|
+
};
|
196
|
+
|
197
|
+
const qrFromStyle = QRCodeJs.useStyle(myStyle) // Start builder with style
|
198
|
+
.options({ data: 'Uses a style via builder' })
|
199
|
+
.build();
|
200
|
+
|
201
|
+
qrFromStyle.append(document.getElementById('style-container'));
|
202
|
+
```
|
203
|
+
|
204
|
+
**Example 4: Chaining `useTemplate` and `useStyle`**
|
205
|
+
|
206
|
+
```javascript
|
207
|
+
// filepath: /Users/kurdin/projects/qr-platform/qr-code-js/docs/examples.md
|
208
|
+
|
209
|
+
// Start with 'dots' template (black dots), then apply a style to change color
|
210
|
+
const qrChained = QRCodeJs.useTemplate('dots')
|
211
|
+
.useStyle({ dotsOptions: { color: '#20B2AA' } }) // LightSeaGreen dots
|
212
|
+
.options({ data: 'Template overridden by Style' })
|
213
|
+
.build();
|
214
|
+
|
215
|
+
qrChained.append(document.getElementById('template-style-chain-container'));
|
216
|
+
```
|
217
|
+
|
218
|
+
---
|
101
219
|
|
102
220
|
## Examples by Option Group
|
103
221
|
|
@@ -0,0 +1,53 @@
|
|
1
|
+
# Plan: Update Documentation for `useTemplates` Feature
|
2
|
+
|
3
|
+
**Objective:** Update the documentation in the `docs` directory to accurately reflect the template features, including modifying `useTemplate` to accept options directly and ensuring both `setTemplate` and the updated `useTemplate` builder pattern are correctly documented.
|
4
|
+
|
5
|
+
## Phase 1: Code Modification (To be done in Code Mode)
|
6
|
+
|
7
|
+
1. **Modify `useTemplate` Signature:**
|
8
|
+
* In `src/index.ts`, change `QRCodeJs.useTemplate(templateName: string)` to `QRCodeJs.useTemplate(templateNameOrOptions: string | RecursivePartial<Options>)`.
|
9
|
+
* In `src/node.ts`, make the same change: `QRCodeJs.useTemplate(templateNameOrOptions: string | RecursivePartial<Options>)`.
|
10
|
+
2. **Modify `QRCodeBuilder` Constructor:**
|
11
|
+
* In `src/index.ts`, update the `QRCodeBuilder` constructor to handle the `templateNameOrOptions` parameter. If it's a string, look up the template; if it's an object, use it directly as the base configuration.
|
12
|
+
* In `src/node.ts`, make the corresponding change to the `QRCodeBuilder` constructor.
|
13
|
+
|
14
|
+
## Phase 2: Documentation Update (Reflecting Both Methods)
|
15
|
+
|
16
|
+
1. **`docs/examples.md`:**
|
17
|
+
* **`setTemplate` Section:** Ensure this section accurately explains setting global template defaults.
|
18
|
+
* **`useTemplate` Section:** Update this section to:
|
19
|
+
* Explain the builder pattern: `QRCodeJs.useTemplate(...).options({...})`.
|
20
|
+
* Show examples using a template name: `useTemplate('rounded').options(...)`.
|
21
|
+
* Show examples providing options directly: `useTemplate({ dotsOptions: {...} }).options(...)`.
|
22
|
+
* Clarify that `.options()` is always needed to provide `data` and final overrides.
|
23
|
+
|
24
|
+
2. **`docs/usage-guide.md`:**
|
25
|
+
* **`setTemplate`:** Verify its documentation is correct.
|
26
|
+
* **`useTemplate`:** Update its description to reflect the new signature (`string | RecursivePartial<Options>`) and explain its use in the builder pattern.
|
27
|
+
* **Static Methods List:** Ensure both `setTemplate` and the updated `useTemplate` are listed correctly.
|
28
|
+
|
29
|
+
3. **`docs/documentation.md`:**
|
30
|
+
* **Verify `setTemplate`:** Ensure it's correctly described throughout (main body, API reference, FAQ).
|
31
|
+
* **Update `useTemplate`:** Update its description in the API reference section to show the new signature and explain the builder pattern usage.
|
32
|
+
|
33
|
+
4. **`docs/api-reference-guide.md`:**
|
34
|
+
* **Verify `setTemplate`:** Ensure it's listed correctly in the methods table.
|
35
|
+
* **Update `useTemplate`:** Update the parameter type to `string | RecursivePartial<Options>` and clarify its role in initiating the builder pattern.
|
36
|
+
|
37
|
+
5. **Review Other Files:** Briefly check `advanced-examples.md`, `typescript-types-definitions.md`, and `license-management.md` for consistency regarding both `setTemplate` and the updated `useTemplate`.
|
38
|
+
|
39
|
+
## Conceptual Flow Diagram (`useTemplate`)
|
40
|
+
|
41
|
+
```mermaid
|
42
|
+
graph LR
|
43
|
+
subgraph useTemplate Flow
|
44
|
+
A[User Code] --> B{QRCodeJs.useTemplate(nameOrOptions)};
|
45
|
+
B -- name --> C[Lookup Template];
|
46
|
+
B -- options --> D[Use Provided Options];
|
47
|
+
C --> E{QRCodeBuilder Instance};
|
48
|
+
D --> E;
|
49
|
+
A --> F(Specific Options e.g., data);
|
50
|
+
E --> G(builder.options(Specific Options));
|
51
|
+
F --> G;
|
52
|
+
G --> H(Final QRCodeJs Instance);
|
53
|
+
end
|