perf: use bootstrap with sass.

Author: scopewu

README-ja.md

@@ -1,18 +1,18 @@
 # qrcode.vue
 
-⚠️ 現在、Vue 3.xを使用している場合は、`qrcode.vue`を`3.x`にアップグレードしてください。
+⚠️ 現在、Vue 3.xを使用している場合は、`qrcode.vue` を`3.x`にアップグレードしてください。
 
-🔒 Vue 2.xを使用している場合は、バージョン`1.x`を使用し続けてください。
+🔒 Vue 2.xを使用している場合は、バージョン `1.x` を使用し続けてください。
 
-[QRコード](https://en.wikipedia.org/wiki/QR_code)を生成するためのVue.jsコンポーネントです。Vue 2とVue 3の両方をサポートしています。
+[QRコード](https://en.wikipedia.org/wiki/QR_code)を生成するための Vue.js コンポーネントです。Vue 2 と Vue 3 の両方をサポートしています。
 
-[![GitHub license](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/scopewu/qrcode.vue/blob/master/LICENSE)
+[![GitHub license](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/scopewu/qrcode.vue/blob/main/LICENSE)
 
 [English](./README.md)
 
 ## インストール
 
-`qrcode.vue`コンポーネントをVue.jsアプリに使用できます。
+`qrcode.vue`コンポーネントを Vue.js アプリに使用できます。
 
 ```bash
 npm install --save qrcode.vue # yarn add qrcode.vue
@@ -45,7 +45,7 @@ createApp({
 }).mount('#root')
 ```
 
-- または、`*.vue`拡張子の単一ファイルコンポーネントで使用します：
+または、`*.vue` 拡張子の単一ファイルコンポーネントで使用します：
 
 ```html
 <template>
@@ -68,46 +68,7 @@ createApp({
 </script>
 ```
 
-- グラデーションの使用例
-
-> グラデーションをサポートする `QrcodeVue` コンポーネントを使用するには、グラデーション関連のプロパティを渡すことができます：
-
-```html
-<template>
-  <qrcode-vue
-    :size="size"
-    :value="fullUrl"
-    :level="level"
-    :margin="margin"
-    :render-as="renderAs"
-    :background="background"
-    :gradient="true"
-    :gradient-type="gradientType"
-    :gradient-start-color="gradientStartColor"
-    :gradient-end-color="gradientEndColor"
-  />
-</template>
-
-<script>
-export default {
-  data() {
-    return {
-      size: 200,
-      fullUrl: 'https://example.com',
-      level: 'H',
-      margin: 4,
-      renderAs: 'svg', // or 'canvas'
-      background: '#ffffff',
-      gradient: true,
-      gradientType: 'linear', // or 'radial'
-      gradientStartColor: '#ff0000', // グラデーションの開始色
-      gradientEndColor: '#0000ff', // グラデーションの終了色
-    }
-  },
-}
-</script>
-
-- Vue 3で`TypeScript`を使用する場合：
+Vue 3で `TypeScript` を使用する場合：
 
 ```html
 <template>
@@ -135,10 +96,8 @@ export default {
   const background = ref('#ffffff')
   const foreground = ref('#000000')
   const margin = ref(0)
-  const gradient = ref(false)
-  const gradientType = ref<GradientType>('linear')
-  const gradientStartColor = ref('#000000')
-  const gradientEndColor = ref('#38bdf8')
+  
+  // 画像の設定
   const imageSettings = ref<ImageSettings>({
     src: 'https://github.com/scopewu.png',
     width: 30,
@@ -147,6 +106,12 @@ export default {
     // y: 10,
     excavate: true,
   })
+
+  // グラデーション
+  const gradient = ref(false)
+  const gradientType = ref<GradientType>('linear')
+  const gradientStartColor = ref('#000000')
+  const gradientEndColor = ref('#38bdf8')
 </script>
 ```
 
@@ -201,6 +166,24 @@ QRコードの背景色。
 
 QRコードの前景色。
 
+### `image-settings`
+
+- タイプ: `ImageSettings`
+- デフォルト: `{}`
+
+  ```ts
+  export type ImageSettings = {
+    src: string, // The URL of image.
+    x?: number,  // The horizontal offset. When not specified, will center the image.
+    y?: number,  // The vertical offset. When not specified, will center the image.
+    height: number, // The height of image
+    width: number,  // The height of image
+    excavate?: boolean, // Whether or not to "excavate" the modules around the image.
+  }
+  ```
+
+The settings to support qrcode image logo.
+
 ### `gradient`
 
 - タイプ：`boolean`
@@ -229,24 +212,6 @@ QRコードのグラデーション塗りつぶしを有効にします。
 
 グラデーションの終了色。
 
-### `image-settings`
-
-- タイプ: `ImageSettings`
-- デフォルト: `{}`
-
-  ```ts
-  export type ImageSettings = {
-    src: string, // The URL of image.
-    x?: number,  // The horizontal offset. When not specified, will center the image.
-    y?: number,  // The vertical offset. When not specified, will center the image.
-    height: number, // The height of image
-    width: number,  // The height of image
-    excavate?: boolean, // Whether or not to "excavate" the modules around the image.
-  }
-  ```
-
-The settings to support qrcode image logo.
-
 ### `class`
 
 - タイプ：`string`

README-zh_cn.md

@@ -6,7 +6,7 @@
 
 一款 Vue.js 二维码组件，同时支持 Vue 2 和 Vue 3.
 
-[![GitHub license](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/scopewu/qrcode.vue/blob/master/LICENSE)
+[![GitHub license](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/scopewu/qrcode.vue/blob/main/LICENSE)
 
 ## 快速开始
 
@@ -43,7 +43,7 @@ createApp({
 }).mount('#root')
 ```
 
-- 或者，在独有单文件扩展 `*.vue` 中使用：
+或者，在独有单文件扩展 `*.vue` 中使用：
 
 ```html
 <template>
@@ -66,46 +66,7 @@ createApp({
 </script>
 ```
 
-- 渐变示例用法
-
-> 要使用带渐变支持的 `QrcodeVue` 组件，你可以传入渐变相关的属性：
-
-```html
-<template>
-  <qrcode-vue
-    :size="size"
-    :value="fullUrl"
-    :level="level"
-    :margin="margin"
-    :render-as="renderAs"
-    :background="background"
-    :gradient="true"
-    :gradient-type="gradientType"
-    :gradient-start-color="gradientStartColor"
-    :gradient-end-color="gradientEndColor"
-  />
-</template>
-
-<script>
-export default {
-  data() {
-    return {
-      size: 200,
-      fullUrl: 'https://example.com',
-      level: 'H',
-      margin: 4,
-      renderAs: 'svg', // or 'canvas'
-      background: '#ffffff',
-      gradient: true,
-      gradientType: 'linear', // or 'radial'
-      gradientStartColor: '#ff0000', // 渐变的起始颜色
-      gradientEndColor: '#0000ff', // 渐变的结束颜色
-    }
-  },
-}
-</script>
-
-- 在 Vue 3 中配合 `TypeScript` 使用：
+在 Vue 3 中配合 `TypeScript` 使用：
 
 ```html
 <template>
@@ -133,10 +94,8 @@ export default {
   const background = ref('#ffffff')
   const foreground = ref('#000000')
   const margin = ref(0)
-  const gradient = ref(false)
-  const gradientType = ref<GradientType>('linear')
-  const gradientStartColor = ref('#000000')
-  const gradientEndColor = ref('#38bdf8')
+  
+  // 可传入二维码图片相关的属性，支持二维码 LOGO；
   const imageSettings = ref<ImageSettings>({
     src: 'https://github.com/scopewu.png',
     width: 30,
@@ -145,6 +104,12 @@ export default {
     // y: 10,
     excavate: true,
   })
+
+  // 可传入渐变相关的属性，支持渐变：
+  const gradient = ref(false)
+  const gradientType = ref<GradientType>('linear')
+  const gradientStartColor = ref('#000000')
+  const gradientEndColor = ref('#38bdf8')
 </script>
 ```
 
@@ -199,6 +164,27 @@ export default {
 
 二维码前景颜色。
 
+### `image-settings`
+
+- 类型: `ImageSettings`
+- 默认值: `{}`
+
+  ```ts
+  export type ImageSettings = {
+    src: string, // 图片的地址。
+    x?: number,  // 水平横向偏移。没有设定值时，图片剧中
+    y?: number,  // 垂直竖向偏移。没有设定值时，图片剧中
+    height: number, // 图片的高度
+    width: number,  // 图片的宽度
+    // 是否“挖掘”图像周围的模块。
+    // 这意味着嵌入图像重叠的任何模块都将使用背景颜色。
+    // 使用此选项可确保图像周围的边缘清晰。嵌入透明图像时也很有用。
+    excavate?: boolean,
+  }
+  ```
+
+二维码图片 logo 配置。
+
 ### `gradient`
 
 - 类型: `boolean`
@@ -227,27 +213,6 @@ export default {
 
 渐变的结束颜色。
 
-### `image-settings`
-
-- 类型: `ImageSettings`
-- 默认值: `{}`
-
-  ```ts
-  export type ImageSettings = {
-    src: string, // 图片的地址。
-    x?: number,  // 水平横向偏移。没有设定值时，图片剧中
-    y?: number,  // 垂直竖向偏移。没有设定值时，图片剧中
-    height: number, // 图片的高度
-    width: number,  // 图片的宽度
-    // 是否“挖掘”图像周围的模块。
-    // 这意味着嵌入图像重叠的任何模块都将使用背景颜色。
-    // 使用此选项可确保图像周围的边缘清晰。嵌入透明图像时也很有用。
-    excavate?: boolean,
-  }
-  ```
-
-二维码图片 logo 配置。
-
 ### `class`
 
 - 类型：`string`