Vue components supporting bedrock web optical scanner library

.eslintrc.cjs

@@ -5,9 +5,12 @@ module.exports = {
     node: true
   },
   extends: [
+    'plugin:quasar/standard',
     'digitalbazaar',
     'digitalbazaar/jsdoc',
-    'digitalbazaar/module'
+    'digitalbazaar/module',
+    'digitalbazaar/vue3'
   ],
+  rules: {},
   ignorePatterns: ['node_modules/']
 };

.gitignore

@@ -10,3 +10,4 @@ coverage
 node_modules
 reports
 .cache
+.DS_STORE

CHANGELOG.md

@@ -1,114 +1,32 @@
-# bedrock-web-pouch-edv ChangeLog
+# bedrock-vue-optical-scanner ChangeLog
 
-## 8.2.0 - 2025-07-18
-
-### Changed
-- Update dependencies:
-  - `@digitalbazaar/[email protected]`
-  - `pouchdb@9`
-  - `pouchdb-adapter-indexeddb@9`
-  - `pouchdb-find@9`
-  - dev deps and removal of `uuid`.
-- Note: While pouchdb* packages have been bumped by two major versions, no
-  significant breaking changes are expected. The changes included internal
-  ES5 => ES6+ API changes that were not relevant here and a new default
-  limit on `find()` queries of `25`, but every `find()` query is already
-  expected to have provided a default or a default is provided by this
-  library.
-
-## 8.1.0 - 2023-11-07
+## 1.1.0 - 2025-09-27
 
 ### Added
-- Add new `cipherVersion` parameter to control whether the cipher version
-  is "recommended" or "fips". The default (and previous only option)
-  remains "recommended".
 
-## 8.0.0 - 2023-10-16
+- **BREAKING**: Refactored Vue components to use CameraScanner delegation pattern
+  - OpticalScanner.vue now uses CameraScanner from `bedrock-web-optical-scanner`
+  - Thin wrapper architecture enables easy duplication in other frameworks
 
 ### Changed
-- **BREAKING**: Drop support for Node.js < 18.
-- Use `@digitalbazaar/[email protected]` that drops support for Node.js < 18 and
-  uses `@digitalbazaar/http-client@4` and `canonicalize@2`.
 
-## 7.0.0 - 2022-08-19
-
-### Changed
-- **BREAKING**: Use `exports` instead of `module`.
-- Update dependencies.
-- Lint module.
+- **NOTE**: Vue components are now thin wrappers focused purely on UI concerns
+- ScannerUI.vue streamlined for pure framework integration
+  - Clean separation between CameraScanner area and Vue overlay area
+  - Removed scanning business logic to achieve framework-agnostic design
+- Configuration simplified to scanType/scanMode props instead of complex plugin setup
 
-## 6.0.1 - 2022-05-30
-
-### Fixed
-- Add purge operation to clean up deleted docs to prevent premature storage
-  quota overflow.
-
-## 6.0.0 - 2022-05-30
-
-### Changed
-- **BREAKING**: Use `indexeddb` adapter instead of `idb` adapter. This version
-  will also impose a `br_edv_` (bedrock EDV) prefix on database names,
-  causing all new databases to be created, leaving old ones alone. There is
-  no migration code available to convert an old database to a new one in this
-  version.
+### Improved
 
-## 5.0.0 - 2022-05-05
-
-### Changed
-- **BREAKING**: Use `@digitalbazaar/edv-client@14` with new blind
-  attributes version.
-
-## 4.1.0 - 2022-05-03
-
-### Changed
-- Improve pouchdb index performance by marking deleted EDV doc
-  records with `_deleted` flag.
-
-## 4.0.0 - 2022-04-05
-
-### Changed
-- **BREAKING**: Rename package to `@bedrock/web-pouch-edv`.
-- **BREAKING**: Convert to module (ESM).
-- **BREAKING**: Remove default export.
-- **BREAKING**: Require node 14.x.
+- All scanning complexity now delegated to `bedrock-web-optical-scanner` module
+- Vue components leverage framework-specific features (Quasar UI, reactivity) without scanning logic
+- Architecture enables rapid React/other framework development with minimal duplication
+- Better separation of concerns between presentation layer and scanning engine
 
-## 3.0.0 - 2022-03-01
-
-### Changed
-- **BREAKING**: Use `@digitalbazaar/edv-client@13`.
-
-## 2.0.1 - 2022-02-24
-
-### Fixed
-- Provide alternative to `crypto.randomUUID` via `uuid` package.
-
-## 2.0.0 - 2022-02-23
-
-### Changed
-- **BREAKING**: Use `@digitalbazaar/edv-client@12`. This new version
-  produces encrypted indexes differently (more privacy preserving)
-  and is incompatible with the previous version.
-
-## 1.2.0 - 2022-02-05
+## 1.0.0 - 2025-09-14
 
 ### Added
-- Add support for `limit` in EDV queries.
-
-## 1.1.0 - 2022-02-03
-
-### Added
-- Automatically initialize databases when using
-  `PouchEdvClient` to generate a new EDV or load an one.
-
-### Fixed
-- Fix `db.type()` deprecation warnings.
-- Prevent double initialization of databases.
-
-## 1.0.1 - 2022-02-02
-
-### Changed
-- Update dependencies.
-
-## 1.0.0 - 2022-01-31
 
-- See git history for changes.
+- Vue.js components `OpticalScanner.vue` and `ScannerUI.vue` with reactive state management.
+- Scan type selection interface allowing users to choose between barcode/QR scanning and MRZ document scanning.
+- Timeout configuration system with format-specific timeouts (no timeout for MRZ camera mode, configurable timeouts for other formats).

README.md

@@ -1 +1,216 @@
-# bedrock-web-pouch-edv
+# @bedrock/vue-optical-scanner
+
+A Vue.js component library for optical scanning that provides reusable UI components
+for barcode, QR code, MRZ (Machine Readable Zone), and other optical code scanning.
+This library follows a plugin-based architecture and separates scanning logic from
+UI components.
+
+## Architecture
+
+This library is part of a two-tier architecture for optical scanning:
+
+### Core Libraries
+
+- **@bedrock/web-optical-scanner**: Low-level scanning engine with plugin architecture
+  - **CameraScanner**: High-level abstraction for camera management and continuous scanning
+  - **OpticalScanner**: Core scanning engine with plugin system
+- **@bedrock/vue-optical-scanner**: Vue-specific UI components (this library)
+
+### Architecture Benefits
+
+#### Separation of Concerns
+
+- **Vue Layer**: Handles only UI presentation, Quasar integration, and Vue-specific reactivity
+- **Web Module**: Manages all scanning logic, camera control, and business rules
+- **Clean Delegation**: Vue components pass containers to CameraScanner and handle results via events
+
+#### Framework Agnostic Design
+
+- All scanning improvements happen in one place (web module)
+- Vue components can be rapidly duplicated for React, Angular, etc.
+- Framework wrappers focus only on what frameworks do best (UI, reactivity, styling)
+
+### Architecture Principles
+
+#### Plugin-Based Scanning Engine
+
+The underlying `@bedrock/web-optical-scanner` provides:
+
+- Async API that accepts elements/images and options, returns scan results
+- Multiple scan modes:
+  - `first`: Resolves as soon as any specified format is detected
+  - `all`: Resolves when all specified formats have results
+  - `exhaustive`: Resolves after all plugins have completed their efforts
+- Extensible plugin system for adding new scanning formats
+- Future-ready for web worker threading (API designed to support this)
+
+#### Vue UI Components (Thin Wrappers)
+
+This library provides:
+
+- **Thin wrapper components** that delegate all scanning complexity to CameraScanner
+- Vue-specific UI components focused purely on presentation and framework integration
+- Camera display containers that CameraScanner manages internally
+- Simple prop-based configuration (scanType, scanMode, licenseKey)
+- Event-based result handling with no business logic in Vue layer
+- **Easy duplication**: Components designed for rapid porting to React/other frameworks
+
+### Supported Formats
+
+- **QR Codes**: Standard QR code scanning
+- **PDF417**: Standard PDF417 barcode format
+- **Enhanced PDF417**: Advanced PDF417 with additional processing for driver licenses
+- **MRZ**: Machine Readable Zone for passports and ID documents
+
+## Components
+
+### OpticalScanner
+
+A thin wrapper component that delegates camera and scanning operations to CameraScanner from `@bedrock/web-optical-scanner`.
+
+**Architecture**: This component provides Vue-specific UI and event handling while CameraScanner handles all scanning complexity internally.
+
+**Props:**
+
+- `scanType` (required): `'mrz'` or `'barcode'`
+- `scanMode`: `'first'` (default), `'all'`, or `'exhaustive'`
+- `tipText`: Instruction text for users
+- `showQrBox`: Boolean to show/hide scanning frame overlay
+- `torchOn`: Boolean to control camera flash
+- `licenseKey`: Dynamsoft License key for enhanced scanning features
+
+**Events:**
+
+- `@result`: Emitted when scan is successful
+- `@error`: Emitted when scan fails
+- `@close`: Emitted when scanner is closed
+
+### ScannerUI
+
+Lower-level UI component that handles camera display and controls.
+
+## Usage
+
+### Basic Usage
+
+```vue
+<template>
+  <div>
+    <q-btn @click="openScanner">Start Scan</q-btn>
+    
+    <q-dialog v-model="scannerOpen" maximized>
+      <OpticalScanner
+        scan-type="barcode"
+        scan-mode="first"
+        @result="onResult"
+        @error="onError"
+        @close="scannerOpen = false"
+      />
+    </q-dialog>
+  </div>
+</template>
+
+<script>
+import {OpticalScanner} from '@bedrock/vue-optical-scanner';
+// OpticalScanner now uses CameraScanner delegation internally
+
+export default {
+  components: { OpticalScanner },
+  data() {
+    return {
+      scannerOpen: false
+    };
+  },
+  methods: {
+    onResult(result) {
+      console.log('Scan result:', result);
+      this.scannerOpen = false;
+    },
+    onError(error) {
+      console.error('Scan error:', error);
+    }
+  }
+};
+</script>
+```
+
+ScannerDemo Component
+The ScannerDemo component provides a complete example implementation showing:
+
+- Document type selection (MRZ vs Barcode)
+- Scanner controls and modal integration
+- Result display for different scan types
+- Error handling
+
+Key Features Demonstrated:
+
+- MRZ Scanning: Passport and ID document recognition with field validation
+- Barcode Scanning: QR codes, PDF417, and enhanced PDF417 for driver licenses
+- Result Processing: Type-specific result handling and display
+- Camera Management: Start/stop controls with proper lifecycle management
+
+Usage in Demo:
+
+```vue
+<template>
+  <!-- Document type selection -->
+  <q-option-group v-model="scanType" :options="scanTypeOptions" />
+  
+  <!-- Scanner integration -->
+  <OpticalScanner
+    :scan-type="scanType"
+    :scan-mode="scanMode"
+    @result="onResult"
+    @error="onError"
+  />
+</template>
+```
+
+Installation
+
+```bash
+npm install @bedrock/vue-optical-scanner
+```
+
+Peer Dependencies
+
+```bash
+npm install vue@^3.4.21 @bedrock/quasar@^10.0.0 @bedrock/web-fontawesome@^2.0.0
+```
+
+Development Setup
+Prerequisites
+
+- Node.js >= 20
+- npm or yarn
+
+Getting Started
+
+1. Clone and install dependencies:
+
+```bash
+git clone URL
+cd vue-optical-scanner
+npm install
+```
+
+2. Start development server:
+
+```bash
+npm run dev
+```
+
+3. Access the demo: Navigate to `http://localhost:5173` to see the ScannerDemo component in action.
+
+Development Scripts
+
+```bash
+# Start development server with hot reload
+npm run dev
+
+# Lint code
+npm run lint
+
+# Fix linting issues
+npm run lint:fix
+```