feat: support dataURL change event (#146)

JounQin · web-flow · commit 71ccf876d1e8 · 2022-09-18T11:06:09.000+08:00
diff --git a/.changeset/polite-lions-swim.md b/.changeset/polite-lions-swim.md
@@ -0,0 +1,6 @@
+---
+"vue-qrcode": minor
+"vue-qrious": minor
+---
+
+feat: support dataURL `change` event
diff --git a/.vitepress/components/VueQrcodeDemo.vue b/.vitepress/components/VueQrcodeDemo.vue
@@ -152,13 +152,20 @@
     </ul>
     <a
       download="qrcode-demo.png"
-      href
+      :href="dataUrl"
     >
       <vue-qrcode
         v-bind="qrcodeProps"
+        @change="onChange"
         @error="onError"
       />
     </a>
+    <div
+      v-if="dataUrl"
+      class="data-url"
+    >
+      {{ dataUrl }}
+    </div>
   </div>
 </template>
 <script lang="ts">
@@ -212,6 +219,7 @@ export default defineComponent({
       quality: 0.92,
       value: DEFAULT_TEXT as QRCodeValue,
       manualMode: false,
+      dataUrl: null,
     }
   },
   computed: {
@@ -239,6 +247,9 @@ export default defineComponent({
     removeValue(index: number) {
       ;(this.value as QRCodeSegment[]).splice(index, 1)
     },
+    onChange(dataUrl: string) {
+      this.dataUrl = dataUrl
+    },
     onError(err: Error) {
       window.alert(err.message)
     },
@@ -281,4 +292,9 @@ export default defineComponent({
     width: 100%;
   }
 }
+
+.data-url {
+  max-width: 100%;
+  overflow-x: auto;
+}
 </style>
diff --git a/.vitepress/components/VueQriousDemo.vue b/.vitepress/components/VueQriousDemo.vue
@@ -74,10 +74,20 @@
     <client-only>
       <a
         download="qrious-demo.png"
-        href
+        :href="dataUrl"
       >
-        <vue-qrious v-bind="qriousProps" />
+        <vue-qrious
+          v-bind="qriousProps"
+          @change="onChange"
+          @error="onError"
+        />
       </a>
+      <div
+        v-if="dataUrl"
+        class="data-url"
+      >
+        {{ dataUrl }}
+      </div>
     </client-only>
   </div>
 </template>
@@ -115,13 +125,22 @@ export default defineComponent({
       padding: 0,
       size: 100,
       value: 'http://www.1stg.me',
+      dataUrl: null,
     }
   },
   computed: {
     qriousProps() {
       return pick(this, QRIOUS_PROPS)
     },
   },
+  methods: {
+    onChange(dataUrl: string) {
+      this.dataUrl = dataUrl
+    },
+    onError(err: Error) {
+      window.alert(err.message)
+    },
+  },
 })
 </script>
 <style lang="scss">
@@ -160,4 +179,9 @@ export default defineComponent({
     width: 100%;
   }
 }
+
+.data-url {
+  max-width: 100%;
+  overflow-x: auto;
+}
 </style>
diff --git a/README.md b/README.md
@@ -64,6 +64,8 @@ npm i vue-{qrcode,qrious}
 
 ## Backers
 
+[![Backers](https://raw.githubusercontent.com/1stG/static/master/sponsors.svg)](https://github.com/sponsors/JounQin)
+
 | 1stG                                                                                                                             | RxTS                                                                                                                             | UnTS                                                                                                                             |
 | -------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------- |
 | [![1stG Open Collective backers and sponsors](https://opencollective.com/1stG/individuals.svg)](https://opencollective.com/1stG) | [![RxTS Open Collective backers and sponsors](https://opencollective.com/rxts/individuals.svg)](https://opencollective.com/rxts) | [![UnTS Open Collective backers and sponsors](https://opencollective.com/unts/individuals.svg)](https://opencollective.com/unts) |
diff --git a/index.md b/index.md
@@ -41,10 +41,10 @@
 
 This repository is a monorepo managed by [Changesets][] what means we actually publish several packages to npm from same codebase, including:
 
-| Package                               | Description                                               | Version                                                                                         | Peer Dependencies                                                                                                                                            | Dependencies                                                                                                                             |
-| ------------------------------------- | --------------------------------------------------------- | ----------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------ | ---------------------------------------------------------------------------------------------------------------------------------------- |
-| [`vue-qrcode`](/packages/vue-qrcode/) | 🤳 A Vue component for QR code generation with [qrcode][] | [![npm](https://img.shields.io/npm/v/vue-qrcode.svg)](https://www.npmjs.com/package/vue-qrcode) | [![David Peer](https://img.shields.io/david/peer/rx-ts/vue.svg?path=packages/vue-qrcode)](https://david-dm.org/rx-ts/vue?path=packages/vue-qrcode&type=peer) | [![David](https://img.shields.io/david/rx-ts/vue.svg?path=packages/vue-qrcode)](https://david-dm.org/rx-ts/vue?path=packages/vue-qrcode) |
-| [`vue-qrious`](/packages/vue-qrious/) | 🤳 A Vue component for QR code generation with [qrious][] | [![npm](https://img.shields.io/npm/v/vue-qrious.svg)](https://www.npmjs.com/package/vue-qrious) | [![David Peer](https://img.shields.io/david/peer/rx-ts/vue.svg?path=packages/vue-qrious)](https://david-dm.org/rx-ts/vue?path=packages/vue-qrious&type=peer) | [![David](https://img.shields.io/david/rx-ts/vue.svg?path=packages/vue-qrious)](https://david-dm.org/rx-ts/vue?path=packages/vue-qrious) |
+| Package                               | Description                                               | Version                                                                                                                                                                                                            |
+| ------------------------------------- | --------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| [`vue-qrcode`](/packages/vue-qrcode/) | 🤳 A Vue component for QR code generation with [qrcode][] | [![npm](https://img.shields.io/npm/v/vue-qrcode.svg)](https://www.npmjs.com/package/vue-qrcode) [![View changelog](https://img.shields.io/badge/changelog-explore-brightgreen)](https://changelogs.xyz/vue-qrcode) |
+| [`vue-qrious`](/packages/vue-qrious/) | 🤳 A Vue component for QR code generation with [qrious][] | [![npm](https://img.shields.io/npm/v/vue-qrious.svg)](https://www.npmjs.com/package/vue-qrious) [![View changelog](https://img.shields.io/badge/changelog-explore-brightgreen)](https://changelogs.xyz/vue-qrious) |
 
 ## Install
 
@@ -64,6 +64,8 @@ npm i vue-{qrcode,qrious}
 
 ## Backers
 
+[![Backers](https://raw.githubusercontent.com/1stG/static/master/sponsors.svg)](https://github.com/sponsors/JounQin)
+
 | 1stG                                                                                                                             | RxTS                                                                                                                             | UnTS                                                                                                                             |
 | -------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------- |
 | [![1stG Open Collective backers and sponsors](https://opencollective.com/1stG/individuals.svg)](https://opencollective.com/1stG) | [![RxTS Open Collective backers and sponsors](https://opencollective.com/rxts/individuals.svg)](https://opencollective.com/rxts) | [![UnTS Open Collective backers and sponsors](https://opencollective.com/unts/individuals.svg)](https://opencollective.com/unts) |
diff --git a/packages/vue-qrcode/README.md b/packages/vue-qrcode/README.md
@@ -7,6 +7,7 @@
 - [Demo](#demo)
 - [Usage](#usage)
 - [Available Props](#available-props)
+- [Available Events](#available-events)
 - [Sponsors](#sponsors)
 - [Backers](#backers)
 - [Changelog](#changelog)
@@ -20,15 +21,28 @@
 
 ```vue
 <template>
-  <vue-qrcode value="https://www.1stg.me" />
+  <vue-qrcode
+    value="https://www.1stg.me"
+    @change="onDataUrlChange"
+  />
 </template>
 <script>
 import VueQrcode from 'vue-qrcode'
 
 export default {
+  data() {
+    return {
+      dataUrl: null,
+    }
+  },
   components: {
     VueQrcode,
   },
+  methods: {
+    onDataUrlChange(dataUrl) {
+      this.dataUrl = dataUrl
+    },
+  },
 }
 </script>
 ```
@@ -49,6 +63,12 @@ export default {
 | `quality`              | `number`(0-1)                                                      | `0.92`                                      |
 | `value`                | `string \|Array<{ data: string; mode?: string }>`                  | N/A                                         |
 
+## Available Events
+
+| event  | type              |
+| ------ | ----------------- |
+| change | `dataUrl: string` |
+
 ## Sponsors
 
 | 1stG                                                                                                                               | RxTS                                                                                                                               | UnTS                                                                                                                               |
@@ -57,6 +77,8 @@ export default {
 
 ## Backers
 
+[![Backers](https://raw.githubusercontent.com/1stG/static/master/sponsors.svg)](https://github.com/sponsors/JounQin)
+
 | 1stG                                                                                                                             | RxTS                                                                                                                             | UnTS                                                                                                                             |
 | -------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------- |
 | [![1stG Open Collective backers and sponsors](https://opencollective.com/1stG/individuals.svg)](https://opencollective.com/1stG) | [![RxTS Open Collective backers and sponsors](https://opencollective.com/rxts/individuals.svg)](https://opencollective.com/rxts) | [![UnTS Open Collective backers and sponsors](https://opencollective.com/unts/individuals.svg)](https://opencollective.com/unts) |
diff --git a/packages/vue-qrcode/index.md b/packages/vue-qrcode/index.md
@@ -7,6 +7,7 @@
 - [Demo](#demo)
 - [Usage](#usage)
 - [Available Props](#available-props)
+- [Available Events](#available-events)
 - [Sponsors](#sponsors)
 - [Backers](#backers)
 - [Changelog](#changelog)
@@ -49,6 +50,12 @@ export default {
 | `quality`              | `number`(0-1)                                                      | `0.92`                                      |
 | `value`                | `string \|Array<{ data: string; mode?: string }>`                  | N/A                                         |
 
+## Available Events
+
+| event  | type              |
+| ------ | ----------------- |
+| change | `dataUrl: string` |
+
 ## Sponsors
 
 | 1stG                                                                                                                               | RxTS                                                                                                                               | UnTS                                                                                                                               |
@@ -57,6 +64,8 @@ export default {
 
 ## Backers
 
+[![Backers](https://raw.githubusercontent.com/1stG/static/master/sponsors.svg)](https://github.com/sponsors/JounQin)
+
 | 1stG                                                                                                                             | RxTS                                                                                                                             | UnTS                                                                                                                             |
 | -------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------- |
 | [![1stG Open Collective backers and sponsors](https://opencollective.com/1stG/individuals.svg)](https://opencollective.com/1stG) | [![RxTS Open Collective backers and sponsors](https://opencollective.com/rxts/individuals.svg)](https://opencollective.com/rxts) | [![UnTS Open Collective backers and sponsors](https://opencollective.com/unts/individuals.svg)](https://opencollective.com/unts) |
diff --git a/packages/vue-qrcode/index.ts b/packages/vue-qrcode/index.ts
@@ -108,6 +108,7 @@ export default defineComponent({
       )
         .then(dataUrl => {
           dataUrlRef.value = dataUrl
+          emit('change', dataUrl)
         })
         .catch((err: unknown) => emit('error', err))
     }
diff --git a/packages/vue-qrious/README.md b/packages/vue-qrious/README.md
@@ -2,6 +2,17 @@
 
 > 🤳 A Vue component for QR code generation with [qrious](https://github.com/neocotic/qrious)
 
+## TOC <!-- omit in toc -->
+
+- [Demo](#demo)
+- [Usage](#usage)
+- [Available Props](#available-props)
+- [Available Events](#available-events)
+- [Sponsors](#sponsors)
+- [Backers](#backers)
+- [Changelog](#changelog)
+- [License](#license)
+
 ## Demo
 
 <VueQriousDemo />
@@ -10,15 +21,28 @@
 
 ```vue
 <template>
-  <vue-qrious value="https://www.1stg.me" />
+  <vue-qrious
+    value="https://www.1stg.me"
+    @change="onDataUrlChange"
+  />
 </template>
 <script>
 import VueQrious from 'vue-qrious'
 
 export default {
+  data() {
+    return {
+      dataUrl: null,
+    }
+  },
   components: {
     VueQrious,
   },
+  methods: {
+    onDataUrlChange(dataUrl) {
+      this.dataUrl = dataUrl
+    },
+  },
 }
 </script>
 ```
@@ -35,7 +59,13 @@ export default {
 | `mime`            | `string` ("image/png", "image/jpeg") | `"image/png"` |
 | `padding`         | `number`                             | `null`        |
 | `size`            | `number`                             | `100`         |
-| `value`           | `string`                             |
+| `value`           | `string`                             | N/A           |
+
+## Available Events
+
+| event  | type              |
+| ------ | ----------------- |
+| change | `dataUrl: string` |
 
 ## Sponsors
 
@@ -45,6 +75,8 @@ export default {
 
 ## Backers
 
+[![Backers](https://raw.githubusercontent.com/1stG/static/master/sponsors.svg)](https://github.com/sponsors/JounQin)
+
 | 1stG                                                                                                                             | RxTS                                                                                                                             | UnTS                                                                                                                             |
 | -------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------- |
 | [![1stG Open Collective backers and sponsors](https://opencollective.com/1stG/individuals.svg)](https://opencollective.com/1stG) | [![RxTS Open Collective backers and sponsors](https://opencollective.com/rxts/individuals.svg)](https://opencollective.com/rxts) | [![UnTS Open Collective backers and sponsors](https://opencollective.com/unts/individuals.svg)](https://opencollective.com/unts) |
diff --git a/packages/vue-qrious/index.md b/packages/vue-qrious/index.md
@@ -2,6 +2,17 @@
 
 > 🤳 A Vue component for QR code generation with [qrious](https://github.com/neocotic/qrious)
 
+## TOC <!-- omit in toc -->
+
+- [Demo](#demo)
+- [Usage](#usage)
+- [Available Props](#available-props)
+- [Available Events](#available-events)
+- [Sponsors](#sponsors)
+- [Backers](#backers)
+- [Changelog](#changelog)
+- [License](#license)
+
 ## Demo
 
 <VueQriousDemo />
@@ -10,15 +21,28 @@
 
 ```vue
 <template>
-  <vue-qrious value="https://www.1stg.me" />
+  <vue-qrious
+    value="https://www.1stg.me"
+    @change="onDataUrlChange"
+  />
 </template>
 <script>
 import VueQrious from 'vue-qrious'
 
 export default {
+  data() {
+    return {
+      dataUrl: null,
+    }
+  },
   components: {
     VueQrious,
   },
+  methods: {
+    onDataUrlChange(dataUrl) {
+      this.dataUrl = dataUrl
+    },
+  },
 }
 </script>
 ```
@@ -35,7 +59,13 @@ export default {
 | `mime`            | `string` ("image/png", "image/jpeg") | `"image/png"` |
 | `padding`         | `number`                             | `null`        |
 | `size`            | `number`                             | `100`         |
-| `value`           | `string`                             |
+| `value`           | `string`                             | N/A           |
+
+## Available Events
+
+| event  | type              |
+| ------ | ----------------- |
+| change | `dataUrl: string` |
 
 ## Sponsors
 
@@ -45,6 +75,8 @@ export default {
 
 ## Backers
 
+[![Backers](https://raw.githubusercontent.com/1stG/static/master/sponsors.svg)](https://github.com/sponsors/JounQin)
+
 | 1stG                                                                                                                             | RxTS                                                                                                                             | UnTS                                                                                                                             |
 | -------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------- |
 | [![1stG Open Collective backers and sponsors](https://opencollective.com/1stG/individuals.svg)](https://opencollective.com/1stG) | [![RxTS Open Collective backers and sponsors](https://opencollective.com/rxts/individuals.svg)](https://opencollective.com/rxts) | [![UnTS Open Collective backers and sponsors](https://opencollective.com/unts/individuals.svg)](https://opencollective.com/unts) |
diff --git a/packages/vue-qrious/index.ts b/packages/vue-qrious/index.ts

Original file line number	Diff line number	Diff line change
`@@ -108,6 +108,7 @@ export default defineComponent({`
`108`	`108`	`)`
`109`	`109`	`.then(dataUrl => {`
`110`	`110`	`dataUrlRef.value = dataUrl`
	`111`	`+ emit('change', dataUrl)`
`111`	`112`	`})`
`112`	`113`	`.catch((err: unknown) => emit('error', err))`
`113`	`114`	`}`