vue3-barcode-qrcode-reader - npm Package Compare versions

Comparing version 1.0.14 to 1.0.15

package.json

 {
   "name": "vue3-barcode-qrcode-reader",
-  "version": "1.0.14",
+  "version": "1.0.15",
   "description": "Vue 3 barcodes and QR codes scanner",
@@ -44,4 +44,5 @@ "type": "module",
     "@zxing/library": "^0.20.0",
-    "vue": "^3.3.4",
-    "vue-demi": "^0.14.6"
+    "vue": "^3.3.11",
+    "vue-demi": "^0.14.6",
+    "vue-router": "^4.2.5"
   },
@@ -48,0 +49,0 @@ "devDependencies": {

README.md

@@ -94,7 +94,92 @@ # Vue3 Barcode and QR code scanner
 
+## Implementation use Ref component
+
+### Script
+
+```ts
+import { ref } from 'vue'
+import { type Result, StreamQrcodeBarcodeReader } from 'vue-barcode-reader'
+
+const decode = ref<Result | undefined>(undefined)
+const isLoading = ref<boolean>(false)
+function onResult(data: Result | undefined): void {
+  decode.value = data
+}
+
+function onLoading(loading: boolean) {
+  isLoading.value = loading
+}
+
+// define ref for component
+const refCamera = ref<InstanceType<typeof StreamQrcodeBarcodeReader> | null>(null)
+
+function handleOnCanPlay() {
+  refCamera.value?.onCanPlay()
+}
+
+function handleOnReset() {
+  refCamera.value?.onReset()
+}
+
+function handleFacemode() {
+  refCamera.value?.onChangeFacemode()
+}
+
+function handleOnCanStop() {
+  refCamera.value?.onCanStop()
+}
+```
+
+### HTML
+
+```html
+<div class="flex justify-center items-center mt-10">
+  <template v-if="isLoading">
+    <button class="bg-yellow-300 px-6 py-1 rounded-md me-4" @click="handleFacemode">
+      Facemode
+    </button>
+    <button class="bg-red-300 px-6 py-1 rounded-md" @click="handleOnCanStop">Stop</button>
+  </template>
+
+  <template v-else>
+    <button class="bg-green-300 px-6 py-1 rounded-md" @click="handleOnCanPlay">Stream</button>
+
+    <button v-if="decode" class="bg-blue-300 px-6 py-1 rounded-md" @click="handleOnReset">
+      Reset
+    </button>
+  </template>
+</div>
+
+<div class="flex flex-col items-center justify-center mt-6">
+  <pre>Result:{{ decode }}</pre>
+
+  <div class="phone mt-6">
+    <div class="notch-container">
+      <div class="notch"></div>
+    </div>
+
+    <div class="content">
+      <template v-if="!isLoading">
+        <h1 class="text-xl mb-2">Reader Barcode & QRCode</h1>
+        <h2 class="text-base text-red-500 capitalize mb-4">mode: shoot</h2>
+      </template>
+
+      <StreamQrcodeBarcodeReader
+        ref="refCamera"
+        capture="shoot"
+        show-on-stream
+        @onloading="onLoading"
+        @result="onResult"
+      />
+    </div>
+  </div>
+</div>
+```
+
 ## Props
 
-| Parameter |        value        | Type | Description   |
-| :-------: | :-----------------: | :--: | ------------- |
-|  capture  | "shoot" or "stream" | emun | Props capture |
+|   Parameter    |        value        |  Type   | Description                                                                                             |
+| :------------: | :-----------------: | :-----: | ------------------------------------------------------------------------------------------------------- |
+| show-on-stream |    true or false    | Boolean | Props for show or hide button stream if you want implementation use Ref component or maybe another case |
+|    capture     | "shoot" or "stream" |  emun   | Props capture                                                                                           |
 
@@ -195,3 +280,3 @@ ### shoot
 ```ts
-import { Result } from 'vue-barcode-reader'
+import type { Result } from 'vue-barcode-reader'
 const resultScan = ref<Result | undefined>(undefined)
@@ -198,0 +283,0 @@ function onResult(result: Result | undefined) {

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

1049403

increased by0.23%

Number of lines in readme file

291

increased by41.26%

Worsened metrics

Dependency count

5

increased by25%

Dependency changes

• + Addedvue-router@^4.2.5

• + Added@vue/devtools-api@6.6.4(transitive)

• + Addedvue-router@4.4.5(transitive)

• Updatedvue@^3.3.11