Skip to content

Commit

Permalink
support vite #90, #96
Browse files Browse the repository at this point in the history
  • Loading branch information
Binaryify committed Oct 5, 2021
1 parent 588a5ca commit 2834b99
Show file tree
Hide file tree
Showing 25 changed files with 3,694 additions and 36 deletions.
3 changes: 3 additions & 0 deletions CHANGELOG.MD
Original file line number Diff line number Diff line change
@@ -1,4 +1,7 @@
# Changelog
## 3.1.0 | 2021.10.05
- Support Vite [#90](https://github.com/Binaryify/vue-qr/issues/90) [#96](https://github.com/Binaryify/vue-qr/issues/96)

## 3.0.0 | 2021.10.02
- Using Awesome-qr.js v2.0

Expand Down
5 changes: 3 additions & 2 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@
<a href="https://www.npmjs.com/package/vue-qr"><img src="https://img.shields.io/david/dev/binaryify/vue-qr.svg" alt="devDependencies" ></a>
<a href="https://www.npmjs.com/package/vue-qr"><img src="https://img.shields.io/david/binaryify/vue-qr.svg" alt="devDependencies" ></a>

The Vue 2.x Component for [SumiMakito's Awesome-qr.js](https://github.com/SumiMakito/Awesome-qr.js)
The Vue Component for [SumiMakito's Awesome-qr.js](https://github.com/SumiMakito/Awesome-qr.js). Support Vue2/Vue3/Vite

The only one qr code component for Vue.js you need !

Expand Down Expand Up @@ -33,7 +33,8 @@ npm install vue-qr --save
```js
// vue2.0
import VueQr from 'vue-qr'
// vue3.0(not support vite yet)

// vue3.0 (support vite)
import vueQr from 'vue-qr/src/packages/vue-qr.vue'
new Vue({
components: {VueQr}
Expand Down
10 changes: 5 additions & 5 deletions package.json
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "vue-qr",
"version": "3.0.0",
"version": "3.1.0",
"scripts": {
"dev": "cross-env NODE_ENV=development webpack-dev-server --open --hot --host 127.0.0.1",
"build": "cross-env NODE_ENV=production webpack --progress --hide-modules"
Expand All @@ -17,8 +17,8 @@
"@babel/cli": "^7.11.6",
"@babel/core": "^7.11.6",
"@babel/plugin-transform-runtime": "^7.11.5",
"@babel/preset-stage-0": "^7.8.3",
"@babel/preset-env": "^7.11.5",
"@babel/preset-stage-0": "^7.8.3",
"babel-loader": "^8.1.0",
"babel-plugin-lodash": "^3.3.4",
"cross-env": "^7.0.2",
Expand All @@ -30,8 +30,7 @@
"vue-template-compiler": "^2.6.12",
"webpack": "^4.44.2",
"webpack-cli": "^3.3.12",
"webpack-dev-server": "^3.11.0",
"worker-loader": "^3.0.3"
"webpack-dev-server": "^3.11.0"
},
"description": "The Vue 2.x component of Awesome-qr.js",
"keywords": [
Expand All @@ -47,6 +46,7 @@
"not ie <= 8"
],
"dependencies": {
"binaryify-awesome-qr": "^2.2.2"
"canvas": "^2.8.0",
"js-binary-schema-parser": "^2.0.2"
}
}
233 changes: 233 additions & 0 deletions src/lib/awesome-qr.d.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,233 @@
/// <reference types="node" />
export declare type ComponentOptions = {
/**
* Component options for data/ECC.
*/
data?: {
/**
* Scale factor for data/ECC dots.
* @default 0.4
*/
scale?: number;
};
/**
* Component options for timing patterns.
*/
timing?: {
/**
* Scale factor for timing patterns.
* @default 0.5
*/
scale?: number;
/**
* Protector for timing patterns.
* @default false
*/
protectors?: boolean;
};
/**
* Component options for alignment patterns.
*/
alignment?: {
/**
* Scale factor for alignment patterns.
* @default 0.5
*/
scale?: number;
/**
* Protector for alignment patterns.
* @default false
*/
protectors?: boolean;
};
/**
* Component options for alignment pattern on the bottom-right corner.
*/
cornerAlignment?: {
/**
* Scale factor for alignment pattern on the bottom-right corner.
* @default 0.5
*/
scale?: number;
/**
* Protector for alignment pattern on the bottom-right corner.
* @default true
*/
protectors?: boolean;
};
};
export declare type Options = {
/**
* Text to be encoded in the QR code.
*/
text: string;
/**
* Size of the QR code in pixel.
*
* @defaultValue 400
*/
size?: number;
/**
* Size of margins around the QR code body in pixel.
*
* @defaultValue 20
*/
margin?: number;
/**
* Error correction level of the QR code.
*
* Accepts a value provided by _QRErrorCorrectLevel_.
*
* For more information, please refer to [https://www.qrcode.com/en/about/error_correction.html](https://www.qrcode.com/en/about/error_correction.html).
*
* @defaultValue 0
*/
correctLevel?: number;
/**
* **This is an advanced option.**
*
* Specify the mask pattern to be used in QR code encoding.
*
* Accepts a value provided by _QRMaskPattern_.
*
* To find out all eight mask patterns, please refer to [https://en.wikipedia.org/wiki/File:QR_Code_Mask_Patterns.svg](https://en.wikipedia.org/wiki/File:QR_Code_Mask_Patterns.svg)
*
* For more information, please refer to [https://en.wikiversity.org/wiki/Reed%E2%80%93Solomon_codes_for_coders#Masking](https://en.wikiversity.org/wiki/Reed%E2%80%93Solomon_codes_for_coders#Masking).
*/
maskPattern?: number;
/**
* **This is an advanced option.**
*
* Specify the version to be used in QR code encoding.
*
* Accepts an integer in range [1, 40].
*
* For more information, please refer to [https://www.qrcode.com/en/about/version.html](https://www.qrcode.com/en/about/version.html).
*/
version?: number;
/**
* Options to control components in the QR code.
*
* @deafultValue undefined
*/
components?: ComponentOptions;
/**
* Color of the blocks on the QR code.
*
* Accepts a CSS &lt;color&gt;.
*
* For more information about CSS &lt;color&gt;, please refer to [https://developer.mozilla.org/en-US/docs/Web/CSS/color_value](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value).
*
* @defaultValue "#000000"
*/
colorDark?: string;
/**
* Color of the empty areas on the QR code.
*
* Accepts a CSS &lt;color&gt;.
*
* For more information about CSS &lt;color&gt;, please refer to [https://developer.mozilla.org/en-US/docs/Web/CSS/color_value](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value).
*
* @defaultValue "#ffffff"
*/
colorLight?: string;
/**
* Automatically calculate the _colorLight_ value from the QR code's background.
*
* @defaultValue true
*/
autoColor?: boolean;
/**
* Background image to be used in the QR code.
*
* Accepts a `data:` string in web browsers or a Buffer in Node.js.
*
* @defaultValue undefined
*/
backgroundImage?: string | Buffer;
/**
* Color of the dimming mask above the background image.
*
* Accepts a CSS &lt;color&gt;.
*
* For more information about CSS &lt;color&gt;, please refer to [https://developer.mozilla.org/en-US/docs/Web/CSS/color_value](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value).
*
* @defaultValue "rgba(0, 0, 0, 0)"
*/
backgroundDimming?: string;
/**
* GIF background image to be used in the QR code.
*
* @defaultValue undefined
*/
gifBackground?: ArrayBuffer;
/**
* Use a white margin instead of a transparent one which reveals the background of the QR code on margins.
*
* @defaultValue true
*/
whiteMargin?: boolean;
/**
* Logo image to be displayed at the center of the QR code.
*
* Accepts a `data:` string in web browsers or a Buffer in Node.js.
*
* When set to `undefined` or `null`, the logo is disabled.
*
* @defaultValue undefined
*/
logoImage?: string | Buffer;
/**
* Ratio of the logo size to the QR code size.
*
* @defaultValue 0.2
*/
logoScale?: number;
/**
* Size of margins around the logo image in pixels.
*
* @defaultValue 6
*/
logoMargin?: number;
/**
* Corner radius of the logo image in pixels.
*
* @defaultValue 8
*/
logoCornerRadius?: number;
/**
* @deprecated
*
* Ratio of the real size to the full size of the blocks.
*
* This can be helpful when you want to make more parts of the background visible.
*
* @deafultValue 0.4
*/
dotScale?: number;
logoBackgroundColor: string;
backgroundColor: string;
};
export declare class AwesomeQR {
private canvas;
private canvasContext;
private qrCode?;
private options;
static CorrectLevel: {
L: number;
M: number;
Q: number;
H: number;
};
private static defaultComponentOptions;
static defaultOptions: Options;
constructor(options: Partial<Options>);
draw(): Promise<Buffer | ArrayBuffer | string | undefined>;
private _clear;
private static _prepareRoundedCornerClip;
private static _getAverageRGB;
private static _drawDot;
private static _drawAlignProtector;
private static _drawAlign;
private _draw;
}
Loading

0 comments on commit 2834b99

Please sign in to comment.