chore(docs): opt example.

Author: scopewu

README-ja.md

@@ -72,16 +72,34 @@ Vue 3で`TypeScript`を使用する場合：
 
 ```html
 <template>
-  <qrcode-vue :value="value" :level="level" :render-as="renderAs" />
+  <qrcode-vue
+    :value="value"
+    :level="level"
+    :render-as="renderAs"
+    :background="background"
+    :foreground='foreground'
+    :image-settings='imageSettings'
+  />
 </template>
 <script setup lang="ts">
   import { ref } from 'vue'
   import QrcodeVue from 'qrcode.vue'
-  import type { Level, RenderAs } from 'qrcode.vue'
+  import type { Level, RenderAs, ImageSettings } from 'qrcode.vue'
 
   const value = ref('qrcode')
   const level = ref<Level>('M')
   const renderAs = ref<RenderAs>('svg')
+  const background = ref('#ffffff')
+  const foreground = ref('#000000')
+  const margin = ref(0)
+  const imageSettings = ref<ImageSettings>({
+    src: 'https://github.com/scopewu.png',
+    width: 30,
+    height: 30,
+    // x: 10,
+    // y: 10,
+    excavate: true,
+  })
 </script>
 ```
 

README-zh_cn.md

@@ -70,17 +70,34 @@ createApp({
 
 ```html
 <template>
-  <qrcode-vue :value="value" :level="level" :render-as="renderAs" />
+  <qrcode-vue
+    :value="value"
+    :level="level"
+    :render-as="renderAs"
+    :background="background"
+    :foreground='foreground'
+    :image-settings='imageSettings'
+  />
 </template>
-
 <script setup lang="ts">
   import { ref } from 'vue'
   import QrcodeVue from 'qrcode.vue'
-  import type { Level, RenderAs } from 'qrcode.vue'
-  
-  const value = ref<String>('qrcode')
+  import type { Level, RenderAs, ImageSettings } from 'qrcode.vue'
+
+  const value = ref('qrcode')
   const level = ref<Level>('M')
   const renderAs = ref<RenderAs>('svg')
+  const background = ref('#ffffff')
+  const foreground = ref('#000000')
+  const margin = ref(0)
+  const imageSettings = ref<ImageSettings>({
+    src: 'https://github.com/scopewu.png',
+    width: 30,
+    height: 30,
+    // x: 10,
+    // y: 10,
+    excavate: true,
+  })
 </script>
 ```
 

README.md

@@ -49,10 +49,12 @@ Or single-file components with a `*.vue` extension:
 
 ```html
 <template>
-  <qrcode-vue :value="value" :size="size" level="H" />
+  <qrcode-vue :value="value" :size="size" level="H" render-as="svg" />
+  <qrcode-canvas :value="QRCODE.VUE 😄" :size="size" level="H" />
+  <qrcode-svg value="QRCODE.VUE 😄" level="H" />
 </template>
 <script>
-  import QrcodeVue from 'qrcode.vue'
+  import QrcodeVue, { QrcodeCanvas, QrcodeSvg } from 'qrcode.vue'
 
   export default {
     data() {
@@ -63,6 +65,8 @@ Or single-file components with a `*.vue` extension:
     },
     components: {
       QrcodeVue,
+      QrcodeCanvas,
+      QrcodeSvg,
     },
   }
 </script>
@@ -72,16 +76,34 @@ When you use the component with Vue 3 with `TypeScript`:
 
 ```html
 <template>
-  <qrcode-vue :value="value" :level="level" :render-as="renderAs" />
+  <qrcode-vue
+    :value="value"
+    :level="level"
+    :render-as="renderAs"
+    :background="background"
+    :foreground='foreground'
+    :image-settings='imageSettings'
+  />
 </template>
 <script setup lang="ts">
   import { ref } from 'vue'
   import QrcodeVue from 'qrcode.vue'
-  import type { Level, RenderAs } from 'qrcode.vue'
+  import type { Level, RenderAs, ImageSettings } from 'qrcode.vue'
 
   const value = ref('qrcode')
   const level = ref<Level>('M')
   const renderAs = ref<RenderAs>('svg')
+  const background = ref('#ffffff')
+  const foreground = ref('#000000')
+  const margin = ref(0)
+  const imageSettings = ref<ImageSettings>({
+    src: 'https://github.com/scopewu.png',
+    width: 30,
+    height: 30,
+    // x: 10,
+    // y: 10,
+    excavate: true,
+  })
 </script>
 ```
 

example/webpack.html

@@ -30,9 +30,9 @@
   <meta name="twitter:data1" content="scopewu" />
   <meta name="twitter:creator" content="@ngwwj" />
   <link
+    href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css"
     rel="stylesheet"
-    href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css"
-    integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN"
+    integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH"
     crossorigin="anonymous"
     referrerpolicy="no-referrer"
   />
@@ -198,17 +198,33 @@
     .octicon-heart {
       color: #bf3989
     }
+    .space-x-2 :not(:first-of-type){
+      margin-left: 0.5rem;
+    }
     [v-cloak] {
       display: none;
     }
   </style>
-
 </head>
 <body>
 <div id="root">
-  <div class="container-fluid">
-    <div class="border-bottom mt-4 mb-3 pb-2">
-      <h1>qrcode.vue:</h1>
+  <div class="container-fluid mb-5">
+    <header class="border-bottom mt-4 mb-3 pb-2">
+      <div class='row align-items-center my-3'>
+        <h1 class='col-sm-8 m-0'>qrcode.vue:</h1>
+        <div class='col-4 space-x-2 text-end'>
+          <a
+            href='https://github.com/scopewu/qrcode.vue'
+            class='link-dark link-underline-opacity-25 link-underline-opacity-100-hover'
+          >GitHub</a>
+          <a
+            href='https://tie.pub'
+            class='link-dark link-underline-opacity-25 link-underline-opacity-100-hover'
+            target='_blank'
+            rel='noopener'
+          >Author</a>
+        </div>
+      </div>
       <div class='row'>
         <div class='col-4'>
           <div class="widget" v-cloak>
@@ -222,14 +238,8 @@ <h1>qrcode.vue:</h1>
             <a class="social-count" href="https://github.com/scopewu/qrcode.vue/stargazers" rel="noopener" target="_blank" :aria-label="`${stargazersCount} stargazers on GitHub`">{{ stargazersCount }}</a>
           </div>
         </div>
-        <div class='col-8 text-end'>
-          <a
-            href='https://github.com/scopewu/qrcode.vue'
-            class='link-dark'
-          >Fork me on GitHub</a>
-        </div>
       </div>
-    </div>
+    </header>
     <form v-cloak>
       <div class="row mb-3">
         <label class="col-sm-2 col-form-label">Value:</label>

package.json

@@ -1,6 +1,6 @@
 {
   "name": "qrcode.vue",
-  "version": "3.4.1",
+  "version": "3.5.0",
   "description": "A Vue.js component to generate QRCode. Both support Vue 2 and Vue 3",
   "type": "module",
   "main": "./dist/qrcode.vue.cjs.js",
@@ -51,10 +51,10 @@
   "dependencies": {},
   "devDependencies": {
     "@rollup/plugin-terser": "^0.4.4",
-    "@rsbuild/core": "^1.0.1",
+    "@rsbuild/core": "^1.0.7",
     "rollup": "^4.22.4",
     "rollup-plugin-typescript2": "^0.36.0",
     "typescript": "^5.6.2",
-    "vue": "^3.5.3"
+    "vue": "^3.5.8"
   }
 }

rsbuild.config.js

@@ -14,12 +14,14 @@ export default defineConfig({
     },
   },
   output: {
+    assetPrefix: 'https://cdn.jsdelivr.net/gh/scopewu/qrcode.vue@gh-pages/',
     distPath: {
       root: './example/dist',
     },
   },
   html: {
     template: './example/webpack.html',
+    scriptLoading: 'module',
   },
   server: {
     htmlFallback: 'index',

src/index.ts

@@ -178,7 +178,7 @@ const QRCodeVueProps = {
   },
 }
 
-export const QRCodeSvg = defineComponent({
+export const QrcodeSvg = defineComponent({
   name: 'QRCodeSvg',
   props: QRCodeProps,
   setup(props) {
@@ -245,7 +245,7 @@ export const QRCodeSvg = defineComponent({
   },
 })
 
-export const QRCodeCanvas = defineComponent({
+export const QrcodeCanvas = defineComponent({
   name: 'QRCodeCanvas',
   props: QRCodeProps,
   setup(props, ctx) {
@@ -367,7 +367,7 @@ const QrcodeVue = defineComponent({
     const level = validErrorCorrectLevel(_level) ? _level : defaultErrorCorrectLevel
 
     return h(
-      renderAs === 'svg' ? QRCodeSvg : QRCodeCanvas,
+      renderAs === 'svg' ? QrcodeSvg : QrcodeCanvas,
       { value, size, margin, level, background, foreground, imageSettings },
     )
   },