@qr-platform/qr-code.js 0.10.2 → 0.10.4
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 +12 -0
- package/README.md +15 -10
- package/docs/advanced-examples.md +135 -8
- package/docs/api-reference-guide.md +19 -13
- package/docs/documentation.md +197 -121
- package/docs/examples.md +179 -6
- package/docs/typescript-types-definitions.md +53 -14
- package/docs/usage-guide.md +143 -111
- package/lib/core/qr-code-js.d.ts +17 -0
- package/lib/index.d.ts +8 -0
- package/lib/index.js +1 -1
- package/lib/node/core/qr-code-js.d.ts +17 -0
- package/lib/node/index.d.ts +8 -0
- package/lib/node/node.d.ts +8 -0
- package/lib/node/types/settings-options.d.ts +1 -0
- package/lib/node.d.ts +8 -0
- package/lib/node.js +1 -1
- package/lib/types/settings-options.d.ts +1 -0
- package/package.json +1 -1
package/docs/documentation.md
CHANGED
|
@@ -1204,85 +1204,195 @@ When using the basic border features in the free version, the library will autom
|
|
|
1204
1204
|
});
|
|
1205
1205
|
```
|
|
1206
1206
|
|
|
1207
|
+
## Centralized Configuration with Settings (`SettingsOptions`, `setSettings`, `useSettings`)
|
|
1207
1208
|
|
|
1208
|
-
|
|
1209
|
+
For a comprehensive way to define or apply a complete QR code configuration in one go, QRCode.js provides:
|
|
1210
|
+
- A `SettingsOptions` interface to structure a full configuration.
|
|
1211
|
+
- A static `QRCodeJs.setSettings()` method for establishing global defaults using a `SettingsOptions` object.
|
|
1212
|
+
- A `useSettings()` method for the `QRCodeBuilder` to apply a `SettingsOptions` object as a baseline for a specific builder chain.
|
|
1209
1213
|
|
|
1210
|
-
|
|
1214
|
+
### `SettingsOptions` Object
|
|
1211
1215
|
|
|
1212
|
-
|
|
1216
|
+
The `SettingsOptions` object allows you to define multiple aspects of a QR code configuration simultaneously:
|
|
1213
1217
|
|
|
1214
|
-
|
|
1218
|
+
- `id?: string`: Optional unique identifier for the settings preset.
|
|
1219
|
+
- `name?: string`: Optional descriptive name for the settings preset.
|
|
1220
|
+
- `description?: string`: Optional detailed description of the settings preset.
|
|
1221
|
+
- `data?: string`: The primary data to encode. This will be applied as the main `data` option.
|
|
1222
|
+
- `image?: string | Buffer | Blob`: Image to embed. This will be applied as the main `image` option.
|
|
1223
|
+
- `template?: string | RecursivePartial<Options>`: Template by name or options object. Maps to `QRCodeJs.setTemplate()` when used with `QRCodeJs.setSettings()`.
|
|
1224
|
+
- `templateId?: string`: Template by ID. Maps to `QRCodeJs.setTemplateId()`.
|
|
1225
|
+
- `style?: string | StyleOptions`: Style by name or `StyleOptions` object. Maps to `QRCodeJs.setStyle()`.
|
|
1226
|
+
- `styleId?: string`: Style by ID. Maps to `QRCodeJs.setStyleId()`.
|
|
1227
|
+
- `text?: string | TextOptions`: Text configuration by name or `TextOptions` object. Maps to `QRCodeJs.setText()`.
|
|
1228
|
+
- `textId?: string`: Text configuration by ID. Maps to `QRCodeJs.setTextId()`.
|
|
1229
|
+
- `border?: string | RecursivePartial<BorderOptions>`: Border configuration by name or options object. Maps to `QRCodeJs.setBorder()`.
|
|
1230
|
+
- `borderId?: string`: Border configuration by ID. Maps to `QRCodeJs.setBorderId()`.
|
|
1231
|
+
- `options?: RecursivePartial<Options>`: Direct overrides for any main `Options` properties. These are deeply merged. Maps to `QRCodeJs.setOptions()`.
|
|
1215
1232
|
|
|
1216
|
-
|
|
1217
|
-
- You can provide a custom partial options object (`RecursivePartial<Options>`).
|
|
1218
|
-
- Any options provided during the instantiation of `new QRCodeJs({...})` will override the global template defaults for that specific instance.
|
|
1219
|
-
- Call `QRCodeJs.setTemplate(null)` or `QRCodeJs.setTemplate('basic')` to reset to the default behavior.
|
|
1233
|
+
Refer to the [TypeScript Types and Definitions](./typescript-types-definitions.md#settingsoptions) for the full structure.
|
|
1220
1234
|
|
|
1235
|
+
### Static `QRCodeJs.setSettings()`
|
|
1236
|
+
|
|
1237
|
+
The `QRCodeJs.setSettings(settings: SettingsOptions | null)` static method sets multiple global defaults at once.
|
|
1238
|
+
|
|
1239
|
+
- **Behavior**: It acts as a macro, internally calling other static setters (like `QRCodeJs.setTemplate()`, `QRCodeJs.setStyle()`, `QRCodeJs.setData()`, `QRCodeJs.setImage()`, `QRCodeJs.setOptions()`, etc.) based on the properties provided in the `settings` object.
|
|
1240
|
+
- It will **override/reset** any previously set static configurations for the aspects it covers. For example, if `settings` includes a `templateId`, any previous global template set by `QRCodeJs.setTemplate()` will be replaced. Similarly, if `settings.data` is provided, it calls `QRCodeJs.setData(settings.data)`, and if `settings.options` is provided, it calls `QRCodeJs.setOptions(settings.options)`.
|
|
1241
|
+
- Passing `null` will clear all static configurations (template, style, text, border, image, data, and options).
|
|
1242
|
+
|
|
1243
|
+
**Example:**
|
|
1221
1244
|
```typescript
|
|
1222
|
-
|
|
1223
|
-
|
|
1245
|
+
const myGlobalPreset: SettingsOptions = {
|
|
1246
|
+
name: 'CompanyStandard',
|
|
1247
|
+
data: 'https://company.com/default-link', // Will call QRCodeJs.setData()
|
|
1248
|
+
image: 'https://company.com/assets/logo.png', // Will call QRCodeJs.setImage()
|
|
1249
|
+
templateId: 'company-wide-template', // Assumes this template ID exists, will call QRCodeJs.setTemplateId()
|
|
1250
|
+
options: { // Will call QRCodeJs.setOptions()
|
|
1251
|
+
qrOptions: { errorCorrectionLevel: 'H' },
|
|
1252
|
+
margin: 5
|
|
1253
|
+
}
|
|
1254
|
+
};
|
|
1224
1255
|
|
|
1225
|
-
|
|
1226
|
-
const qr1 = new QRCodeJs({ data: 'Uses global dots template' });
|
|
1256
|
+
QRCodeJs.setSettings(myGlobalPreset);
|
|
1227
1257
|
|
|
1228
|
-
//
|
|
1229
|
-
const
|
|
1230
|
-
|
|
1231
|
-
dotsOptions: { color: '#FF4500' } // OrangeRed
|
|
1232
|
-
});
|
|
1258
|
+
// Subsequent QRCodeJs instances will use these global defaults
|
|
1259
|
+
const qr1 = new QRCodeJs({ /* data will be 'https://company.com/default-link' */ });
|
|
1260
|
+
const qr2 = new QRCodeJs({ data: 'https://company.com/specific-page' }); // Overrides data from preset
|
|
1233
1261
|
|
|
1234
|
-
//
|
|
1235
|
-
QRCodeJs.
|
|
1262
|
+
// To clear all global settings:
|
|
1263
|
+
// QRCodeJs.setSettings(null);
|
|
1236
1264
|
```
|
|
1237
1265
|
|
|
1238
|
-
###
|
|
1266
|
+
### Builder `useSettings()`
|
|
1239
1267
|
|
|
1240
|
-
The
|
|
1268
|
+
The `QRCodeBuilder.useSettings(settings: SettingsOptions)` method applies a `SettingsOptions` object as a new baseline for a specific builder chain.
|
|
1241
1269
|
|
|
1242
|
-
-
|
|
1243
|
-
-
|
|
1244
|
-
- The `.options()` method takes the final configuration, including the required `data` property and any overrides specific to this instance.
|
|
1270
|
+
- **Behavior**: Calling `useSettings()` on a builder instance will **reset** any configurations previously applied to *that builder instance* via methods like `useTemplate()`, `useStyle()`, `useBorder()`, `useText()`, `useImage()`, `useData()`, or `useOptions()`. The provided `settings` object then establishes the new comprehensive baseline for that builder.
|
|
1271
|
+
- Subsequent builder methods chained *after* `useSettings()` (e.g., `.useStyle()`, `.options()`) will then modify this new baseline.
|
|
1245
1272
|
|
|
1273
|
+
**Example:**
|
|
1246
1274
|
```typescript
|
|
1247
|
-
|
|
1248
|
-
|
|
1249
|
-
data: '
|
|
1250
|
-
|
|
1251
|
-
}
|
|
1275
|
+
const eventSpecificSettings: SettingsOptions = {
|
|
1276
|
+
name: 'ConferenceQR',
|
|
1277
|
+
data: 'https://conference-event.com/details', // Baseline data for this builder
|
|
1278
|
+
image: 'event-logo.png', // Baseline image
|
|
1279
|
+
style: { dotsOptions: { type: 'classy', color: '#005FAB' } }, // Baseline style
|
|
1280
|
+
borderId: 'event-frame' // Baseline border
|
|
1281
|
+
};
|
|
1252
1282
|
|
|
1253
|
-
//
|
|
1254
|
-
|
|
1255
|
-
|
|
1256
|
-
|
|
1257
|
-
|
|
1258
|
-
|
|
1259
|
-
|
|
1283
|
+
const qrEvent = QRCodeJs.useTemplate('basic') // Initial template (will be reset by useSettings)
|
|
1284
|
+
.useStyle({ dotsOptions: { color: 'red'} }) // This style will also be reset
|
|
1285
|
+
.useSettings(eventSpecificSettings) // Resets builder and applies eventSpecificSettings as baseline
|
|
1286
|
+
.useOptions({ margin: 20 }) // Further customizes the baseline from eventSpecificSettings
|
|
1287
|
+
.options({ data: 'https://conference-event.com/live-updates' }) // Final data override
|
|
1288
|
+
.build();
|
|
1289
|
+
|
|
1290
|
+
qrEvent.append(document.getElementById('event-qr-container'));
|
|
1260
1291
|
```
|
|
1261
1292
|
|
|
1262
|
-
|
|
1293
|
+
## Using Templates, Styles, Borders, Data, Options, and Settings
|
|
1263
1294
|
|
|
1264
|
-
|
|
1295
|
+
QRCode.js offers flexible ways to manage configurations, from setting global defaults that apply to all new instances to using a fluent builder pattern for specific instances.
|
|
1265
1296
|
|
|
1266
|
-
|
|
1297
|
+
### Setting Global Defaults
|
|
1267
1298
|
|
|
1268
|
-
|
|
1299
|
+
Static methods on the `QRCodeJs` class allow you to define default configurations that will be automatically applied to all `QRCodeJs` instances created *after* these defaults are set. This is useful for establishing a baseline style or configuration for your application.
|
|
1269
1300
|
|
|
1270
|
-
- **`QRCodeJs.
|
|
1271
|
-
- **`QRCodeJs.
|
|
1272
|
-
- **`QRCodeJs.
|
|
1301
|
+
- **`QRCodeJs.setTemplate(templateNameOrOptions | null)` / `QRCodeJs.setTemplateId(id | null)`**: Sets a global default template.
|
|
1302
|
+
- **`QRCodeJs.setStyle(styleNameOrOptions | null)` / `QRCodeJs.setStyleId(id | null)`**: Sets a global default style.
|
|
1303
|
+
- **`QRCodeJs.setBorder(borderNameOrOptions | null)` / `QRCodeJs.setBorderId(id | null)`**: Sets a global default border configuration.
|
|
1304
|
+
- **`QRCodeJs.setText(textNameOrOptions | null, overrideOpts?: MethodOverrideOptions)` / `QRCodeJs.setTextId(id | null, overrideOpts?: MethodOverrideOptions)`**: Sets global default border text. The `overrideOpts` (e.g., `{ override: true }`) ensures this text takes precedence over text set by other means (e.g., in instance options).
|
|
1305
|
+
- **`QRCodeJs.setImage(imageUrl | null, overrideOpts?: MethodOverrideOptions)`**: Sets a global default image. `overrideOpts` ensures this image takes precedence over images set by other means.
|
|
1306
|
+
- **`QRCodeJs.setData(data | null, overrideOpts?: MethodOverrideOptions)`**: Sets a global default data string. `overrideOpts` ensures this data takes precedence.
|
|
1307
|
+
- **`QRCodeJs.setOptions(options | null, overrideOpts?: MethodOverrideOptions)`**: Sets global default options that are merged deeply. `overrideOpts` ensures higher precedence for these options over those set by other means for the properties they cover.
|
|
1308
|
+
- **`QRCodeJs.setSettings(settings | null)`**: A powerful static method to set multiple global defaults at once using a comprehensive `SettingsOptions` object (see [Centralized Configuration with Settings](#centralized-configuration-with-settings)). This method acts as a macro, calling the other static setters (like `setTemplate`, `setStyle`, `setData`, `setImage`, `setOptions`, etc.) based on the provided `settings` object. It will override/reset any previously set static configurations for the aspects it covers.
|
|
1273
1309
|
|
|
1274
|
-
|
|
1310
|
+
Any options provided during the instantiation of `new QRCodeJs({...})` or through builder methods will override these global defaults for that specific instance, **unless** an `override: true` was used with a static setter for that specific property. Call any of these setters with `null` to clear the respective global default.
|
|
1275
1311
|
|
|
1276
|
-
|
|
1312
|
+
**Example: Setting various global defaults**
|
|
1313
|
+
```typescript
|
|
1314
|
+
// Set a global template and data with override
|
|
1315
|
+
QRCodeJs.setTemplate('dots');
|
|
1316
|
+
QRCodeJs.setData('https://example-global.com', { override: true }); // This data will be hard to override
|
|
1317
|
+
|
|
1318
|
+
const qr1 = new QRCodeJs({ /* data will be https://example-global.com */ });
|
|
1319
|
+
const qrWithDifferentData = new QRCodeJs({ data: 'https://another-link.com' }); // data will still be https://example-global.com due to override
|
|
1320
|
+
|
|
1321
|
+
// Using setSettings to define multiple global defaults
|
|
1322
|
+
const globalBrandSettings: SettingsOptions = {
|
|
1323
|
+
templateId: 'brand-template', // Assumes this ID exists
|
|
1324
|
+
style: { dotsOptions: { color: '#AA0000' } }, // Dark red dots
|
|
1325
|
+
image: 'https://brand.com/logo.svg', // Global brand logo
|
|
1326
|
+
data: 'https://brand-default.com', // Default data for this setting
|
|
1327
|
+
options: { margin: 10, qrOptions: { errorCorrectionLevel: 'M' } }
|
|
1328
|
+
};
|
|
1329
|
+
QRCodeJs.setSettings(globalBrandSettings);
|
|
1330
|
+
// This will override the previous QRCodeJs.setTemplate('dots').
|
|
1331
|
+
// However, the data 'https://example-global.com' (set with override:true) will persist.
|
|
1332
|
+
// All other aspects from globalBrandSettings (style, image, options) will apply.
|
|
1277
1333
|
|
|
1278
|
-
|
|
1279
|
-
- **`QRCodeJs.useBorder(borderNameOrOptions)`**: Initiates a builder pre-configured with the specified border configuration.
|
|
1280
|
-
- **`QRCodeJs.useStyleId(styleId)` / `QRCodeJs.useBorderId(borderId)`**: Similar, but uses the predefined ID.
|
|
1334
|
+
const qrBrand = new QRCodeJs({ /* data is 'https://example-global.com', other options from globalBrandSettings apply */ });
|
|
1281
1335
|
|
|
1282
|
-
|
|
1336
|
+
// Reset all global settings
|
|
1337
|
+
QRCodeJs.setSettings(null); // This clears all static defaults, including the overridden data.
|
|
1338
|
+
const qrAfterClear = new QRCodeJs({ data: 'https://new-data.com' }); // Now uses 'https://new-data.com'
|
|
1339
|
+
```
|
|
1340
|
+
|
|
1341
|
+
### Using the Builder Pattern
|
|
1342
|
+
|
|
1343
|
+
The static `use` methods (e.g., `QRCodeJs.useTemplate()`, `QRCodeJs.useStyle()`, `QRCodeJs.useSettings()`) initiate a builder pattern. They return a `QRCodeBuilder` instance pre-configured with the specified settings. This approach does **not** set global defaults.
|
|
1344
|
+
|
|
1345
|
+
- **`QRCodeJs.useTemplate(templateNameOrOptions)` / `QRCodeJs.useTemplateId(id)`**: Initiates a builder with a template.
|
|
1346
|
+
- **`QRCodeJs.useStyle(styleNameOrOptions)` / `QRCodeJs.useStyleId(id)`**: Initiates a builder with a style.
|
|
1347
|
+
- **`QRCodeJs.useBorder(borderNameOrOptions)` / `QRCodeJs.useBorderId(id)`**: Initiates a builder with border settings.
|
|
1348
|
+
- **`QRCodeJs.useText(textNameOrOptions, overrideOpts?: MethodOverrideOptions)` / `QRCodeJs.useTextId(id, overrideOpts?: MethodOverrideOptions)`**: Initiates a builder with border text settings. `overrideOpts` ensures precedence over text in final `.options()`.
|
|
1349
|
+
- **`QRCodeJs.useImage(imageUrl, overrideOpts?: MethodOverrideOptions)`**: Initiates a builder with an image. `overrideOpts` ensures precedence over image in final `.options()`.
|
|
1350
|
+
- **`QRCodeJs.useData(data, overrideOpts?: MethodOverrideOptions)`**: Applies a data string to the current builder configuration. `overrideOpts` ensures precedence over data in final `.options()`.
|
|
1351
|
+
- **`QRCodeJs.useOptions(options, overrideOpts?: MethodOverrideOptions)`**: Applies a partial options object to the current builder configuration. `overrideOpts` ensures higher precedence for these options over those in final `.options()` for the properties they cover.
|
|
1352
|
+
- **`QRCodeJs.useSettings(settings)`**: Applies a comprehensive `SettingsOptions` object as a new baseline for the builder chain, **resetting** any configurations previously applied to *that builder instance* via other `use` methods (see [Centralized Configuration with Settings](#centralized-configuration-with-settings)).
|
|
1283
1353
|
|
|
1354
|
+
You **must** chain these calls with `.options(finalOptions)` (which also builds the instance) or `.build()` to get the final `QRCodeJs` instance. The `.options()` method takes the final configuration, including the required `data` property (unless provided by `useData`, `useSettings`, or a global default with override) and any ultimate overrides.
|
|
1355
|
+
|
|
1356
|
+
**Example: Builder Pattern Usage**
|
|
1357
|
+
```typescript
|
|
1358
|
+
// Start with a template, then layer styles and data
|
|
1359
|
+
const qrBuilder1 = QRCodeJs.useTemplate('rounded')
|
|
1360
|
+
.useStyle({ dotsOptions: { color: '#007BFF' } }) // Blue override for dots
|
|
1361
|
+
.useData('Built with template and style')
|
|
1362
|
+
.options({ margin: 10 }); // Final options and build
|
|
1363
|
+
|
|
1364
|
+
// Using useSettings to establish a baseline for the builder
|
|
1365
|
+
const eventSettings: SettingsOptions = {
|
|
1366
|
+
data: 'https://myevent.com',
|
|
1367
|
+
image: 'event-logo.png',
|
|
1368
|
+
styleId: 'event-style' // Assumes 'event-style' is a defined style
|
|
1369
|
+
};
|
|
1370
|
+
const qrEvent = QRCodeJs.useSettings(eventSettings) // Establishes baseline from eventSettings
|
|
1371
|
+
.useText({ topValue: 'SCAN FOR EVENT DETAILS' }) // Adds text to the baseline
|
|
1372
|
+
.useOptions({ qrOptions: { errorCorrectionLevel: 'H' } }, { override: true }) // These options take high precedence over final .options()
|
|
1373
|
+
.options({ data: 'Final Event Data Override', qrOptions: { errorCorrectionLevel: 'M' } });
|
|
1374
|
+
// Final data overrides eventSettings.data.
|
|
1375
|
+
// errorCorrectionLevel 'M' from .options() is overridden by 'H' from .useOptions() with override:true.
|
|
1376
|
+
```
|
|
1284
1377
|
|
|
1285
|
-
|
|
1378
|
+
### Configuration Precedence
|
|
1379
|
+
|
|
1380
|
+
Understanding the order in which options are applied is key:
|
|
1381
|
+
1. **Base Defaults**: The library's inherent defaults (`baseQRTemplateOptions`).
|
|
1382
|
+
2. **Static Global Defaults**: Set by `QRCodeJs.setTemplate()`, `QRCodeJs.setStyle()`, `QRCodeJs.setData()`, `QRCodeJs.setOptions()`, `QRCodeJs.setSettings()`, etc.
|
|
1383
|
+
* `QRCodeJs.setSettings()` calls individual static setters, so its components follow this rule.
|
|
1384
|
+
* Static setters with `{ override: true }` (e.g., `setData('data', { override: true })`) will have their specific property take precedence over less specific global defaults or later non-overriding instance options.
|
|
1385
|
+
3. **Builder Methods**:
|
|
1386
|
+
* If `QRCodeBuilder.useSettings(settings)` is called, it **resets** previous builder steps for that instance and establishes `settings` as the new baseline.
|
|
1387
|
+
* Other builder methods (`useTemplate`, `useStyle`, `useData`, `useOptions`, etc.) are applied sequentially. If multiple methods affect the same property, later calls generally override earlier ones *within the builder chain* (either before `useSettings` or after it on the new baseline).
|
|
1388
|
+
* Builder methods with `{ override: true }` (e.g., `useData('data', { override: true })`) will have their specific property take precedence within the builder's accumulated state before the final `.options()` call, overriding values from the final `.options()` for those specific properties.
|
|
1389
|
+
4. **Final `.options()` call on Builder / Constructor Options**: Options passed directly here (e.g., `new QRCodeJs(options)` or `builder.options(options)`) override global defaults and accumulated builder configurations, **unless** a global or builder setting for a specific property was set with `{ override: true }`.
|
|
1390
|
+
|
|
1391
|
+
**In summary for a single property (e.g., `data` or `image`):**
|
|
1392
|
+
- A value set with `{ override: true }` (either static or builder) is very sticky and will generally win.
|
|
1393
|
+
- Otherwise, instance-specific options (from constructor or `.options()`) override builder-accumulated options (that were not set with override).
|
|
1394
|
+
- Builder-accumulated options (not set with override) override global static defaults (not set with override).
|
|
1395
|
+
- Global static defaults (not set with override) override base library defaults.
|
|
1286
1396
|
|
|
1287
1397
|
## Complete Examples
|
|
1288
1398
|
### Basic QR Code with Custom Dots
|
|
@@ -1590,26 +1700,11 @@ qrCode.validateScanning(
|
|
|
1590
1700
|
): Promise<ScanValidatorResponse>
|
|
1591
1701
|
```
|
|
1592
1702
|
|
|
1593
|
-
### Static Methods
|
|
1594
|
-
|
|
1595
|
-
|
|
1596
|
-
|
|
1597
|
-
#### `useTemplate()`
|
|
1598
|
-
|
|
1599
|
-
Creates a `QRCodeBuilder` instance initialized with a specific template.
|
|
1600
|
-
|
|
1601
|
-
```typescript
|
|
1602
|
-
QRCodeJs.useTemplate(templateNameOrOptions: string | RecursivePartial<Options>): QRCodeBuilder
|
|
1603
|
-
```
|
|
1604
|
-
|
|
1605
|
-
#### `useStyle()`
|
|
1703
|
+
### Static Methods
|
|
1606
1704
|
|
|
1607
|
-
|
|
1705
|
+
These methods are called directly on the `QRCodeJs` class (e.g., `QRCodeJs.setTemplate()`).
|
|
1608
1706
|
|
|
1609
|
-
|
|
1610
|
-
QRCodeJs.useStyle(styleNameOrOptions: string | StyleOptions): QRCodeBuilder
|
|
1611
|
-
```
|
|
1612
|
-
These methods are called directly on the `QRCodeJs` class (or `QRCodeJs` imported from `qrcode-js/node`).
|
|
1707
|
+
#### License Management
|
|
1613
1708
|
|
|
1614
1709
|
#### `initializeIfNeeded()`
|
|
1615
1710
|
|
|
@@ -1659,71 +1754,52 @@ Sets the URL endpoint for license key validation.
|
|
|
1659
1754
|
QRCodeJs.setLicenseUrl(url: string): void
|
|
1660
1755
|
```
|
|
1661
1756
|
|
|
1662
|
-
####
|
|
1663
|
-
|
|
1664
|
-
Sets a global default template for subsequent `QRCodeJs` instances.
|
|
1665
|
-
|
|
1666
|
-
```typescript
|
|
1667
|
-
QRCodeJs.setTemplate(templateNameOrOptions: string | RecursivePartial<Options>): void
|
|
1668
|
-
```
|
|
1669
|
-
|
|
1670
|
-
#### `useTemplate()`
|
|
1757
|
+
#### Configuration Defaults & Builder Initiators
|
|
1671
1758
|
|
|
1672
|
-
|
|
1759
|
+
The following static methods are available on the `QRCodeJs` class.
|
|
1673
1760
|
|
|
1674
|
-
|
|
1675
|
-
|
|
1676
|
-
|
|
1761
|
+
##### Global Defaults:
|
|
1762
|
+
- **`setTemplate(templateNameOrOptions | null)` / `setTemplateId(id | null)`**: Sets a global default template.
|
|
1763
|
+
- **`setStyle(styleNameOrOptions | null)` / `setStyleId(id | null)`**: Sets a global default style.
|
|
1764
|
+
- **`setBorder(borderNameOrOptions | null)` / `setBorderId(id | null)`**: Sets a global default border configuration.
|
|
1765
|
+
- **`setText(textNameOrOptions | null, overrideOpts?)` / `setTextId(id | null, overrideOpts?)`**: Sets global default border text. `overrideOpts` (e.g., `{ override: true }`) ensures precedence.
|
|
1766
|
+
- **`setImage(imageUrl | null, overrideOpts?)`**: Sets a global default image. `overrideOpts` ensures precedence.
|
|
1767
|
+
- **`setData(data | null, overrideOpts?)`**: Sets a global default data string. `overrideOpts` ensures precedence.
|
|
1768
|
+
- **`setOptions(options | null, overrideOpts?)`**: Sets global default options (merged deeply). `overrideOpts` ensures higher precedence.
|
|
1769
|
+
- **`setSettings(settings | null)`**: Sets multiple global defaults from a `SettingsOptions` object. Acts as a macro, calling other static setters. Clears all static defaults if `null` is passed.
|
|
1677
1770
|
|
|
1678
|
-
|
|
1771
|
+
*All `set...` methods return `typeof QRCodeJs` for chaining.*
|
|
1679
1772
|
|
|
1680
|
-
|
|
1681
|
-
|
|
1682
|
-
```typescript
|
|
1683
|
-
QRCodeJs.setStyle(styleNameOrOptions: string | RecursivePartial<StyleOptions>): void
|
|
1684
|
-
```
|
|
1773
|
+
##### Builder Initiators:
|
|
1774
|
+
These methods initiate a `QRCodeBuilder` instance.
|
|
1685
1775
|
|
|
1686
|
-
|
|
1776
|
+
- **`useTemplate(templateNameOrOptions)` / `useTemplateId(id)`**: Starts builder with a template.
|
|
1777
|
+
- **`useStyle(styleNameOrOptions)` / `useStyleId(id)`**: Starts builder with a style.
|
|
1778
|
+
- **`useBorder(borderNameOrOptions)` / `useBorderId(id)`**: Starts builder with border settings.
|
|
1779
|
+
- **`useText(textNameOrOptions, overrideOpts?)` / `useTextId(id, overrideOpts?)`**: Starts builder with border text. `overrideOpts` ensures precedence over text in final `.options()`.
|
|
1780
|
+
- **`useImage(imageUrl, overrideOpts?)`**: Starts builder with an image. `overrideOpts` ensures precedence over image in final `.options()`.
|
|
1781
|
+
- **`useData(data, overrideOpts?)`**: Applies data to the builder. `overrideOpts` ensures precedence over data in final `.options()`.
|
|
1782
|
+
- **`useOptions(options, overrideOpts?)`**: Applies options to the builder. `overrideOpts` ensures precedence over options in final `.options()`.
|
|
1783
|
+
- **`useSettings(settings)`**: Applies a `SettingsOptions` object as a new baseline for the builder, resetting prior builder configurations.
|
|
1687
1784
|
|
|
1688
|
-
|
|
1785
|
+
*All `use...` methods return a `QRCodeBuilder` instance for chaining.*
|
|
1689
1786
|
|
|
1787
|
+
**Example Signatures (Illustrative):**
|
|
1690
1788
|
```typescript
|
|
1691
|
-
|
|
1692
|
-
|
|
1789
|
+
// Global Defaults
|
|
1790
|
+
static setData(data: string | null, overrideOpts?: { override?: boolean }): typeof QRCodeJs;
|
|
1791
|
+
static setOptions(options: RecursivePartial<Options> | null, overrideOpts?: { override?: boolean }): typeof QRCodeJs;
|
|
1792
|
+
static setSettings(settings: SettingsOptions | null): typeof QRCodeJs;
|
|
1693
1793
|
|
|
1694
|
-
|
|
1794
|
+
// Builder Initiators & Methods
|
|
1795
|
+
static useData(data: string, overrideOpts?: { override?: boolean }): QRCodeBuilder;
|
|
1796
|
+
static useOptions(options: RecursivePartial<Options>, overrideOpts?: { override?: boolean }): QRCodeBuilder;
|
|
1797
|
+
static useSettings(settings: SettingsOptions): QRCodeBuilder;
|
|
1695
1798
|
|
|
1696
|
-
|
|
1697
|
-
|
|
1698
|
-
```typescript
|
|
1699
|
-
QRCodeJs.setBorder(borderNameOrOptions: string | RecursivePartial<BorderOptions>): void
|
|
1700
|
-
```
|
|
1701
|
-
|
|
1702
|
-
#### `setBorderId()`
|
|
1703
|
-
|
|
1704
|
-
Sets a global default border configuration by its ID for subsequent `QRCodeJs` instances.
|
|
1705
|
-
|
|
1706
|
-
```typescript
|
|
1707
|
-
QRCodeJs.setBorderId(borderId: string): void
|
|
1708
|
-
```
|
|
1709
|
-
|
|
1710
|
-
#### `useBorder()`
|
|
1711
|
-
|
|
1712
|
-
Initiates a builder pattern pre-configured with a border configuration.
|
|
1713
|
-
|
|
1714
|
-
```typescript
|
|
1715
|
-
QRCodeJs.useBorder(borderNameOrOptions: string | BorderOptions): QRCodeBuilder
|
|
1716
|
-
```
|
|
1717
|
-
|
|
1718
|
-
#### `useBorderId()`
|
|
1719
|
-
|
|
1720
|
-
Initiates a builder pattern pre-configured with a border configuration by its ID.
|
|
1721
|
-
|
|
1722
|
-
```typescript
|
|
1723
|
-
QRCodeJs.useBorderId(borderId: string): QRCodeBuilder
|
|
1799
|
+
// (Other set... and use... methods follow similar patterns)
|
|
1724
1800
|
```
|
|
1725
1801
|
|
|
1726
|
-
## Fluent Builder Pattern (`useTemplate`, `useStyle`, `build
|
|
1802
|
+
## Fluent Builder Pattern (`useTemplate`, `useStyle`, `useSettings`, `build`, etc.)
|
|
1727
1803
|
|
|
1728
1804
|
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.
|
|
1729
1805
|
|
package/docs/examples.md
CHANGED
|
@@ -501,7 +501,177 @@ const qrWithGlobalOverride = new QRCodeJs({
|
|
|
501
501
|
qrWithGlobalOverride.append(document.getElementById('global-override-container'));
|
|
502
502
|
|
|
503
503
|
// Clear the global image when done
|
|
504
|
-
QRCodeJs.setImage(null);
|
|
504
|
+
// QRCodeJs.setImage(null);
|
|
505
|
+
```
|
|
506
|
+
|
|
507
|
+
---
|
|
508
|
+
|
|
509
|
+
### Static Methods for Data, Options, and Settings (`setData`, `setOptions`, `setSettings`)
|
|
510
|
+
|
|
511
|
+
These static methods allow setting global defaults for data, general options, or a comprehensive settings object. These defaults apply to all `QRCodeJs` instances created *after* the static method is called, until cleared or overridden.
|
|
512
|
+
|
|
513
|
+
**Example 1: Using `QRCodeJs.setData()`**
|
|
514
|
+
```javascript
|
|
515
|
+
// Set global default data
|
|
516
|
+
QRCodeJs.setData('https://global-default-link.com');
|
|
517
|
+
|
|
518
|
+
const qrGlobalData1 = new QRCodeJs({
|
|
519
|
+
// Data will be 'https://global-default-link.com'
|
|
520
|
+
dotsOptions: { color: 'purple' }
|
|
521
|
+
});
|
|
522
|
+
qrGlobalData1.append(document.getElementById('global-data-container-1'));
|
|
523
|
+
|
|
524
|
+
// Override global data for a specific instance
|
|
525
|
+
const qrOverrideGlobalData1 = new QRCodeJs({
|
|
526
|
+
data: 'https://specific-instance-link.com' // This overrides the global data
|
|
527
|
+
});
|
|
528
|
+
qrOverrideGlobalData1.append(document.getElementById('override-global-data-container-1'));
|
|
529
|
+
|
|
530
|
+
// Set global data with override:true (makes it harder to override by instance options)
|
|
531
|
+
QRCodeJs.setData('https://forced-global-link.com', { override: true });
|
|
532
|
+
const qrForcedData1 = new QRCodeJs({
|
|
533
|
+
data: 'https://this-link-is-ignored.com' // Ignored due to global override:true
|
|
534
|
+
});
|
|
535
|
+
qrForcedData1.append(document.getElementById('forced-data-container-1'));
|
|
536
|
+
|
|
537
|
+
QRCodeJs.setData(null); // Clear global data default
|
|
538
|
+
```
|
|
539
|
+
|
|
540
|
+
**Example 2: Using `QRCodeJs.setOptions()`**
|
|
541
|
+
```javascript
|
|
542
|
+
// Set global default options
|
|
543
|
+
QRCodeJs.setOptions({
|
|
544
|
+
margin: 20,
|
|
545
|
+
qrOptions: { errorCorrectionLevel: 'H' },
|
|
546
|
+
dotsOptions: { type: 'rounded', color: 'navy' }
|
|
547
|
+
});
|
|
548
|
+
|
|
549
|
+
const qrGlobalOptions1 = new QRCodeJs({
|
|
550
|
+
data: 'Uses global margin, EC level, and dots'
|
|
551
|
+
// margin will be 20, errorCorrectionLevel 'H', dots 'rounded' and 'navy'
|
|
552
|
+
});
|
|
553
|
+
qrGlobalOptions1.append(document.getElementById('global-options-container-1'));
|
|
554
|
+
|
|
555
|
+
// Override specific global options for an instance
|
|
556
|
+
const qrOverrideGlobalOptions1 = new QRCodeJs({
|
|
557
|
+
data: 'Overrides global margin and dot color',
|
|
558
|
+
margin: 5, // Overrides the global margin of 20
|
|
559
|
+
dotsOptions: { color: 'green' } // Overrides dot color, type 'rounded' still applies
|
|
560
|
+
// errorCorrectionLevel will still be 'H' from global options
|
|
561
|
+
});
|
|
562
|
+
qrOverrideGlobalOptions1.append(document.getElementById('override-global-options-container-1'));
|
|
563
|
+
|
|
564
|
+
// Set global options with override:true
|
|
565
|
+
QRCodeJs.setOptions(
|
|
566
|
+
{ dotsOptions: { type: 'star', color: 'gold' }, backgroundOptions: { color: '#eee'} },
|
|
567
|
+
{ override: true }
|
|
568
|
+
);
|
|
569
|
+
const qrForcedOptions1 = new QRCodeJs({
|
|
570
|
+
data: 'Uses forced star dots and background',
|
|
571
|
+
dotsOptions: { type: 'square', color: 'black'}, // These dotOptions will be overridden
|
|
572
|
+
backgroundOptions: { color: '#fff' } // This background will be overridden
|
|
573
|
+
});
|
|
574
|
+
qrForcedOptions1.append(document.getElementById('forced-options-container-1'));
|
|
575
|
+
|
|
576
|
+
QRCodeJs.setOptions(null); // Clear global options defaults
|
|
577
|
+
```
|
|
578
|
+
|
|
579
|
+
**Example 3: Using `QRCodeJs.setSettings()`**
|
|
580
|
+
```javascript
|
|
581
|
+
const myGlobalCompanySettings = {
|
|
582
|
+
name: 'CompanyWideStandard',
|
|
583
|
+
data: 'https://company-standard.com',
|
|
584
|
+
image: 'https://company.com/assets/standard-logo.png',
|
|
585
|
+
templateId: 'classy', // Assumes 'classy' template exists
|
|
586
|
+
style: { backgroundOptions: { color: '#f0f0f0' } },
|
|
587
|
+
options: { margin: 12, qrOptions: { errorCorrectionLevel: 'Q' } }
|
|
588
|
+
};
|
|
589
|
+
|
|
590
|
+
// Set comprehensive global defaults using setSettings
|
|
591
|
+
QRCodeJs.setSettings(myGlobalCompanySettings);
|
|
592
|
+
|
|
593
|
+
const qrFromGlobalSettings1 = new QRCodeJs({
|
|
594
|
+
// data, image, template, style, and options (margin, EC) will come from myGlobalCompanySettings
|
|
595
|
+
});
|
|
596
|
+
qrFromGlobalSettings1.append(document.getElementById('global-settings-container-1'));
|
|
597
|
+
|
|
598
|
+
// Instance options can still override parts of the global settings (if not set with override by setSettings)
|
|
599
|
+
const qrOverrideGlobalSettings1 = new QRCodeJs({
|
|
600
|
+
data: 'https://specific-campaign.company-standard.com', // Overrides data from myGlobalCompanySettings
|
|
601
|
+
dotsOptions: { color: 'darkred' } // Adds/overrides dot color (style from setSettings might have other dot props)
|
|
602
|
+
});
|
|
603
|
+
qrOverrideGlobalSettings1.append(document.getElementById('override-global-settings-container-1'));
|
|
604
|
+
|
|
605
|
+
QRCodeJs.setSettings(null); // Clear all global settings established by setSettings
|
|
606
|
+
```
|
|
607
|
+
|
|
608
|
+
---
|
|
609
|
+
|
|
610
|
+
### Builder Methods for Data, Options, and Settings (`useData`, `useOptions`, `useSettings`)
|
|
611
|
+
|
|
612
|
+
These builder methods allow applying data, general options, or comprehensive settings to a specific builder chain. They do *not* affect global defaults.
|
|
613
|
+
|
|
614
|
+
**Example 1: Using `useData()` in Builder**
|
|
615
|
+
```javascript
|
|
616
|
+
const qrUseData1 = QRCodeJs.useData('https://data-via-builder.com')
|
|
617
|
+
.options({ // Final options, including data from useData
|
|
618
|
+
dotsOptions: { type: 'classyRounded', color: 'darkblue' }
|
|
619
|
+
});
|
|
620
|
+
qrUseData1.append(document.getElementById('builder-usedata-container-1'));
|
|
621
|
+
|
|
622
|
+
// useData with override:true
|
|
623
|
+
const qrUseDataOverride1 = QRCodeJs.useData('https://forced-data-for-builder.com', { override: true })
|
|
624
|
+
.options({
|
|
625
|
+
data: 'https://this-data-is-ignored-by-builder.com', // Ignored due to useData override:true
|
|
626
|
+
dotsOptions: { color: 'darkgreen' }
|
|
627
|
+
});
|
|
628
|
+
qrUseDataOverride1.append(document.getElementById('builder-usedata-override-container-1'));
|
|
629
|
+
```
|
|
630
|
+
|
|
631
|
+
**Example 2: Using `useOptions()` in Builder**
|
|
632
|
+
```javascript
|
|
633
|
+
const qrUseOptions1 = QRCodeJs.useOptions({ // Apply some options via useOptions
|
|
634
|
+
margin: 22,
|
|
635
|
+
backgroundOptions: { color: '#fafafa' },
|
|
636
|
+
shape: 'circle'
|
|
637
|
+
}).options({ // Final options, including data
|
|
638
|
+
data: 'Built with useOptions for margin, background, and shape'
|
|
639
|
+
});
|
|
640
|
+
qrUseOptions1.append(document.getElementById('builder-useoptions-container-1'));
|
|
641
|
+
|
|
642
|
+
// useOptions with override:true
|
|
643
|
+
const qrUseOptionsOverride1 = QRCodeJs.useOptions(
|
|
644
|
+
{ qrOptions: { errorCorrectionLevel: 'L' }, dotsOptions: { type: 'diamond'} }, // These will override final .options()
|
|
645
|
+
{ override: true }
|
|
646
|
+
)
|
|
647
|
+
.options({
|
|
648
|
+
data: 'Built with forced low EC and diamond dots',
|
|
649
|
+
qrOptions: { errorCorrectionLevel: 'H' }, // This 'H' will be overridden by 'L'
|
|
650
|
+
dotsOptions: { type: 'square' } // This 'square' will be overridden by 'diamond'
|
|
651
|
+
});
|
|
652
|
+
qrUseOptionsOverride1.append(document.getElementById('builder-useoptions-override-container-1'));
|
|
653
|
+
```
|
|
654
|
+
|
|
655
|
+
**Example 3: Using `useSettings()` in Builder**
|
|
656
|
+
```javascript
|
|
657
|
+
const eventBuilderSettings = {
|
|
658
|
+
name: 'EventBuilderSpecial',
|
|
659
|
+
data: 'https://eventsite.com/special-event',
|
|
660
|
+
image: 'https://eventsite.com/assets/event-logo.svg',
|
|
661
|
+
style: { dotsOptions: { type: 'extraRounded', color: '#FF6347' } }, // Tomato color
|
|
662
|
+
options: { margin: 10, isResponsive: true }
|
|
663
|
+
};
|
|
664
|
+
|
|
665
|
+
// useSettings resets prior builder steps (like useTemplate below) and establishes a new baseline
|
|
666
|
+
const qrUseSettings1 = QRCodeJs.useTemplate('dots') // This 'dots' template will be reset by useSettings
|
|
667
|
+
.useSettings(eventBuilderSettings) // Applies the comprehensive settings as the new baseline
|
|
668
|
+
.useStyle({ backgroundOptions: { color: '#FFF5EE' }}) // Modifies the baseline from useSettings (adds background)
|
|
669
|
+
.options({ // Final options, data comes from eventBuilderSettings unless overridden here
|
|
670
|
+
// data, image, most dotsOptions, margin, and isResponsive come from eventBuilderSettings
|
|
671
|
+
// background color comes from the subsequent useStyle
|
|
672
|
+
qrOptions: { typeNumber: 0, errorCorrectionLevel: 'M' } // Add/override specific QR options
|
|
673
|
+
});
|
|
674
|
+
qrUseSettings1.append(document.getElementById('builder-usesettings-container-1'));
|
|
505
675
|
```
|
|
506
676
|
|
|
507
677
|
---
|
|
@@ -567,7 +737,7 @@ qrBuiltWithBorderId.append(document.getElementById('builder-border-id-container'
|
|
|
567
737
|
QRCodeJs.setText({
|
|
568
738
|
topValue: 'TOP PRIORITY TEXT',
|
|
569
739
|
bottomValue: 'BOTTOM PRIORITY TEXT'
|
|
570
|
-
}, { override: true });
|
|
740
|
+
}, { override: true } as MethodOverrideOptions); // Using MethodOverrideOptions type for clarity
|
|
571
741
|
|
|
572
742
|
// Even though this instance specifies different text values in the border decorations,
|
|
573
743
|
// the global text with override option will take precedence
|
|
@@ -592,10 +762,13 @@ const qrWithTextOverride = new QRCodeJs({
|
|
|
592
762
|
qrWithTextOverride.append(document.getElementById('text-override-container'));
|
|
593
763
|
|
|
594
764
|
// Using the builder pattern with text override
|
|
595
|
-
const qrBuilderWithTextOverride = QRCodeJs.useText(
|
|
596
|
-
|
|
597
|
-
|
|
598
|
-
|
|
765
|
+
const qrBuilderWithTextOverride = QRCodeJs.useText(
|
|
766
|
+
{
|
|
767
|
+
leftValue: 'LEFT OVERRIDE',
|
|
768
|
+
rightValue: 'RIGHT OVERRIDE'
|
|
769
|
+
},
|
|
770
|
+
{ override: true } as MethodOverrideOptions // Using MethodOverrideOptions type for clarity
|
|
771
|
+
)
|
|
599
772
|
.useBorder('fancy-border') // Assumes this is a predefined border
|
|
600
773
|
.options({
|
|
601
774
|
data: 'Builder Text Override Example',
|