qrcode.vue 3.8.1 → 3.9.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +6 -0
- package/README-zh_cn.md +19 -0
- package/README.md +18 -0
- package/dist/qrcode.vue.browser.js +84 -32
- package/dist/qrcode.vue.browser.min.js +2 -2
- package/dist/qrcode.vue.cjs.js +84 -32
- package/dist/qrcode.vue.esm.js +85 -33
- package/dist/src/index.d.ts +48 -9
- package/package.json +5 -5
package/CHANGELOG.md
CHANGED
|
@@ -1,3 +1,9 @@
|
|
|
1
|
+
## [3.9.0]
|
|
2
|
+
|
|
3
|
+
### Feature
|
|
4
|
+
|
|
5
|
+
- Support `radius` prop for QRCode module corner rounding. The rounding is context-aware, keeping inner corners sharp while rounding outer corners. Supports both SVG and Canvas rendering modes.
|
|
6
|
+
|
|
1
7
|
## [3.8.0] - 2026-02-02
|
|
2
8
|
|
|
3
9
|
### Performance
|
package/README-zh_cn.md
CHANGED
|
@@ -81,6 +81,7 @@ createApp({
|
|
|
81
81
|
:gradient-start-color="gradientStartColor"
|
|
82
82
|
:gradient-end-color="gradientEndColor"
|
|
83
83
|
:image-settings='imageSettings'
|
|
84
|
+
:radius="radius"
|
|
84
85
|
/>
|
|
85
86
|
</template>
|
|
86
87
|
<script setup lang="ts">
|
|
@@ -110,6 +111,8 @@ createApp({
|
|
|
110
111
|
const gradientType = ref<GradientType>('linear')
|
|
111
112
|
const gradientStartColor = ref('#000000')
|
|
112
113
|
const gradientEndColor = ref('#38bdf8')
|
|
114
|
+
// 可传入圆角半径:
|
|
115
|
+
const radius = ref(0)
|
|
113
116
|
</script>
|
|
114
117
|
```
|
|
115
118
|
|
|
@@ -214,6 +217,22 @@ createApp({
|
|
|
214
217
|
|
|
215
218
|
渐变的结束颜色。
|
|
216
219
|
|
|
220
|
+
### `radius`
|
|
221
|
+
|
|
222
|
+
- 类型:`number`
|
|
223
|
+
- 默认值:`0`
|
|
224
|
+
|
|
225
|
+
每个二维码模块的圆角半径,相对于模块宽度的比例。接受 `0` 到 `0.5` 的值。
|
|
226
|
+
|
|
227
|
+
- `0`(默认)- 方形模块,直角
|
|
228
|
+
- `0.5` - 最大圆角,模块变为圆形
|
|
229
|
+
|
|
230
|
+
圆角是上下文感知的:相邻深色模块之间的内角保持直角,外角则圆角化。
|
|
231
|
+
|
|
232
|
+
```html
|
|
233
|
+
<qrcode-vue value="test" :radius="0.35" />
|
|
234
|
+
```
|
|
235
|
+
|
|
217
236
|
### `class`
|
|
218
237
|
|
|
219
238
|
- 类型:`string`
|
package/README.md
CHANGED
|
@@ -85,6 +85,7 @@ When you use the component with Vue 3 with `TypeScript`:
|
|
|
85
85
|
:gradient-start-color="gradientStartColor"
|
|
86
86
|
:gradient-end-color="gradientEndColor"
|
|
87
87
|
:image-settings='imageSettings'
|
|
88
|
+
:radius="radius"
|
|
88
89
|
/>
|
|
89
90
|
</template>
|
|
90
91
|
<script setup lang="ts">
|
|
@@ -112,6 +113,7 @@ When you use the component with Vue 3 with `TypeScript`:
|
|
|
112
113
|
const gradientType = ref<GradientType>('linear')
|
|
113
114
|
const gradientStartColor = ref('#000000')
|
|
114
115
|
const gradientEndColor = ref('#38bdf8')
|
|
116
|
+
const radius = ref(0)
|
|
115
117
|
</script>
|
|
116
118
|
```
|
|
117
119
|
|
|
@@ -213,6 +215,22 @@ The start color of the gradient.
|
|
|
213
215
|
|
|
214
216
|
The end color of the gradient.
|
|
215
217
|
|
|
218
|
+
### `radius`
|
|
219
|
+
|
|
220
|
+
- Type: `number`
|
|
221
|
+
- Default: `0`
|
|
222
|
+
|
|
223
|
+
The corner radius of each QR module, as a ratio of the module width. Accepts values from `0` to `0.5`.
|
|
224
|
+
|
|
225
|
+
- `0` (default) - square modules with sharp corners
|
|
226
|
+
- `0.5` - maximum rounding, modules become circles
|
|
227
|
+
|
|
228
|
+
The rounding is context-aware: inner corners between adjacent dark modules remain sharp, while outer corners are rounded.
|
|
229
|
+
|
|
230
|
+
```html
|
|
231
|
+
<qrcode-vue value="test" :radius="0.35" />
|
|
232
|
+
```
|
|
233
|
+
|
|
216
234
|
### `class`
|
|
217
235
|
|
|
218
236
|
- Type: `string`
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
/*!
|
|
2
|
-
* qrcode.vue v3.
|
|
2
|
+
* qrcode.vue v3.9.0
|
|
3
3
|
* A Vue.js component to generate QRCode. Both support Vue 2 and Vue 3
|
|
4
4
|
* © 2017-PRESENT @scopewu(https://github.com/scopewu)
|
|
5
5
|
* MIT License.
|
|
@@ -910,6 +910,12 @@ var qrcodegen;
|
|
|
910
910
|
var QR = qrcodegen;
|
|
911
911
|
|
|
912
912
|
var _uid = 0;
|
|
913
|
+
function getUid() {
|
|
914
|
+
if (typeof vue.useId === 'function') {
|
|
915
|
+
return "".concat(vue.useId(), "-").concat(_uid++);
|
|
916
|
+
}
|
|
917
|
+
return "vue-".concat(Math.random().toString(36).slice(2), "-").concat(_uid++);
|
|
918
|
+
}
|
|
913
919
|
var defaultErrorCorrectLevel = 'L';
|
|
914
920
|
var DEFAULT_QR_SIZE = 100;
|
|
915
921
|
var DEFAULT_MARGIN = 0;
|
|
@@ -934,6 +940,51 @@ var SUPPORTS_PATH2D = (function () {
|
|
|
934
940
|
function validErrorCorrectLevel(level) {
|
|
935
941
|
return level in ErrorCorrectLevelMap;
|
|
936
942
|
}
|
|
943
|
+
function getNeighborFlags(modules, row, col) {
|
|
944
|
+
var north = row > 0 ? modules[row - 1][col] : false;
|
|
945
|
+
var south = row < modules.length - 1 ? modules[row + 1][col] : false;
|
|
946
|
+
var west = col > 0 ? modules[row][col - 1] : false;
|
|
947
|
+
var east = col < modules[row].length - 1 ? modules[row][col + 1] : false;
|
|
948
|
+
return {
|
|
949
|
+
nw: !north && !west,
|
|
950
|
+
ne: !north && !east,
|
|
951
|
+
se: !south && !east,
|
|
952
|
+
sw: !south && !west,
|
|
953
|
+
};
|
|
954
|
+
}
|
|
955
|
+
function generateRoundedPath(modules, margin, radius) {
|
|
956
|
+
if (margin === void 0) { margin = 0; }
|
|
957
|
+
if (radius === void 0) { radius = 0; }
|
|
958
|
+
var pathSegments = [];
|
|
959
|
+
var r = Math.min(radius, 0.5);
|
|
960
|
+
for (var row = 0; row < modules.length; row++) {
|
|
961
|
+
for (var col = 0; col < modules[row].length; col++) {
|
|
962
|
+
if (!modules[row][col])
|
|
963
|
+
continue;
|
|
964
|
+
var _a = getNeighborFlags(modules, row, col), nw = _a.nw, ne = _a.ne, se = _a.se, sw = _a.sw;
|
|
965
|
+
var x = col + margin;
|
|
966
|
+
var y = row + margin;
|
|
967
|
+
pathSegments.push("M".concat(x + (nw ? r : 0), " ").concat(y), "L".concat(x + 1 - (ne ? r : 0), " ").concat(y));
|
|
968
|
+
if (ne) {
|
|
969
|
+
pathSegments.push("A".concat(r, " ").concat(r, " 0 0 1 ").concat(x + 1, " ").concat(y + r));
|
|
970
|
+
}
|
|
971
|
+
pathSegments.push("L".concat(x + 1, " ").concat(y + 1 - (se ? r : 0)));
|
|
972
|
+
if (se) {
|
|
973
|
+
pathSegments.push("A".concat(r, " ").concat(r, " 0 0 1 ").concat(x + 1 - r, " ").concat(y + 1));
|
|
974
|
+
}
|
|
975
|
+
pathSegments.push("L".concat(x + (sw ? r : 0), " ").concat(y + 1));
|
|
976
|
+
if (sw) {
|
|
977
|
+
pathSegments.push("A".concat(r, " ").concat(r, " 0 0 1 ").concat(x, " ").concat(y + 1 - r));
|
|
978
|
+
}
|
|
979
|
+
pathSegments.push("L".concat(x, " ").concat(y + (nw ? r : 0)));
|
|
980
|
+
if (nw) {
|
|
981
|
+
pathSegments.push("A".concat(r, " ").concat(r, " 0 0 1 ").concat(x + r, " ").concat(y));
|
|
982
|
+
}
|
|
983
|
+
pathSegments.push('z');
|
|
984
|
+
}
|
|
985
|
+
}
|
|
986
|
+
return pathSegments.join('');
|
|
987
|
+
}
|
|
937
988
|
function generatePath(modules, margin) {
|
|
938
989
|
if (margin === void 0) { margin = 0; }
|
|
939
990
|
var pathSegments = [];
|
|
@@ -982,15 +1033,7 @@ function getImageSettings(cells, size, margin, imageSettings) {
|
|
|
982
1033
|
var x = imageX == null ? cells.length / 2 - w / 2 : imageX * scale;
|
|
983
1034
|
var y = imageY == null ? cells.length / 2 - h / 2 : imageY * scale;
|
|
984
1035
|
var borderRadius = (imageSettings.borderRadius || 0) * scale;
|
|
985
|
-
|
|
986
|
-
if (imageSettings.excavate) {
|
|
987
|
-
var floorX = Math.floor(x);
|
|
988
|
-
var floorY = Math.floor(y);
|
|
989
|
-
var ceilW = Math.ceil(w + x - floorX);
|
|
990
|
-
var ceilH = Math.ceil(h + y - floorY);
|
|
991
|
-
excavation = { x: floorX, y: floorY, w: ceilW, h: ceilH };
|
|
992
|
-
}
|
|
993
|
-
return { x: x, y: y, h: h, w: w, borderRadius: borderRadius, excavation: excavation };
|
|
1036
|
+
return { x: x, y: y, h: h, w: w, borderRadius: borderRadius };
|
|
994
1037
|
}
|
|
995
1038
|
function useQRCode(props) {
|
|
996
1039
|
var margin = vue.computed(function () { var _a; return ((_a = props.margin) !== null && _a !== void 0 ? _a : DEFAULT_MARGIN) >>> 0; });
|
|
@@ -999,11 +1042,15 @@ function useQRCode(props) {
|
|
|
999
1042
|
return QR.QrCode.encodeText(props.value, ErrorCorrectLevelMap[level]).getModules();
|
|
1000
1043
|
});
|
|
1001
1044
|
var numCells = vue.computed(function () { return cells.value.length + margin.value * 2; });
|
|
1002
|
-
var fgPath = vue.computed(function () {
|
|
1003
|
-
|
|
1004
|
-
|
|
1005
|
-
return { x: 0, y: 0, width: 0, height: 0, borderRadius: 0 };
|
|
1045
|
+
var fgPath = vue.computed(function () {
|
|
1046
|
+
if (props.radius > 0) {
|
|
1047
|
+
return generateRoundedPath(cells.value, margin.value, props.radius);
|
|
1006
1048
|
}
|
|
1049
|
+
return generatePath(cells.value, margin.value);
|
|
1050
|
+
});
|
|
1051
|
+
var imageProps = vue.computed(function () {
|
|
1052
|
+
if (!props.imageSettings.src)
|
|
1053
|
+
return null;
|
|
1007
1054
|
var settings = getImageSettings(cells.value, props.size, margin.value, props.imageSettings);
|
|
1008
1055
|
return {
|
|
1009
1056
|
x: settings.x + margin.value,
|
|
@@ -1014,7 +1061,7 @@ function useQRCode(props) {
|
|
|
1014
1061
|
};
|
|
1015
1062
|
});
|
|
1016
1063
|
var imageBorderProps = vue.computed(function () {
|
|
1017
|
-
if (!props.imageSettings.excavate || !
|
|
1064
|
+
if (!props.imageSettings.excavate || !imageProps.value)
|
|
1018
1065
|
return null;
|
|
1019
1066
|
var borderThickness = IMAGE_EXCAVATE_THICKNESS / (props.size / numCells.value);
|
|
1020
1067
|
return {
|
|
@@ -1081,6 +1128,12 @@ var QRCodeProps = {
|
|
|
1081
1128
|
required: false,
|
|
1082
1129
|
default: '#fff',
|
|
1083
1130
|
},
|
|
1131
|
+
radius: {
|
|
1132
|
+
type: Number,
|
|
1133
|
+
required: false,
|
|
1134
|
+
default: 0,
|
|
1135
|
+
validator: function (r) { return !isNaN(r) && r >= 0 && r <= 0.5; },
|
|
1136
|
+
},
|
|
1084
1137
|
};
|
|
1085
1138
|
var QRCodeVueProps = __assign(__assign({}, QRCodeProps), { renderAs: {
|
|
1086
1139
|
type: String,
|
|
@@ -1093,10 +1146,10 @@ var QrcodeSvg = vue.defineComponent({
|
|
|
1093
1146
|
props: QRCodeProps,
|
|
1094
1147
|
setup: function (props) {
|
|
1095
1148
|
var _a = useQRCode(props), numCells = _a.numCells, fgPath = _a.fgPath, imageProps = _a.imageProps, imageBorderProps = _a.imageBorderProps;
|
|
1096
|
-
var uid =
|
|
1149
|
+
var uid = getUid();
|
|
1097
1150
|
var qrGradientId = "qrcode.vue-gradient-".concat(uid);
|
|
1098
1151
|
var qrLogoClipPathId = "qrcode.vue-logo-clip-path-".concat(uid);
|
|
1099
|
-
var
|
|
1152
|
+
var gradientVNode = vue.computed(function () {
|
|
1100
1153
|
if (!props.gradient)
|
|
1101
1154
|
return null;
|
|
1102
1155
|
var gradientProps = props.gradientType === 'linear'
|
|
@@ -1123,11 +1176,11 @@ var QrcodeSvg = vue.defineComponent({
|
|
|
1123
1176
|
style: { stopColor: props.gradientEndColor },
|
|
1124
1177
|
}),
|
|
1125
1178
|
]);
|
|
1126
|
-
};
|
|
1127
|
-
var
|
|
1128
|
-
|
|
1129
|
-
if (!props.imageSettings.src)
|
|
1179
|
+
});
|
|
1180
|
+
var clipPathVNode = vue.computed(function () {
|
|
1181
|
+
if (!imageProps.value)
|
|
1130
1182
|
return null;
|
|
1183
|
+
var borderRadius = imageProps.value.borderRadius;
|
|
1131
1184
|
if (borderRadius <= 0)
|
|
1132
1185
|
return null;
|
|
1133
1186
|
return vue.h('clipPath', { id: qrLogoClipPathId }, [
|
|
@@ -1140,17 +1193,16 @@ var QrcodeSvg = vue.defineComponent({
|
|
|
1140
1193
|
ry: borderRadius,
|
|
1141
1194
|
}),
|
|
1142
1195
|
]);
|
|
1143
|
-
};
|
|
1196
|
+
});
|
|
1144
1197
|
return function () { return vue.h('svg', {
|
|
1145
1198
|
width: props.size,
|
|
1146
1199
|
height: props.size,
|
|
1147
|
-
'shape-rendering': "crispEdges",
|
|
1148
1200
|
xmlns: 'http://www.w3.org/2000/svg',
|
|
1149
1201
|
viewBox: "0 0 ".concat(numCells.value, " ").concat(numCells.value),
|
|
1150
1202
|
role: 'img',
|
|
1151
1203
|
'aria-label': props.value,
|
|
1152
1204
|
}, [
|
|
1153
|
-
vue.h('defs', {}, [
|
|
1205
|
+
vue.h('defs', {}, [gradientVNode.value, clipPathVNode.value]),
|
|
1154
1206
|
vue.h('rect', {
|
|
1155
1207
|
width: '100%',
|
|
1156
1208
|
height: '100%',
|
|
@@ -1169,7 +1221,7 @@ var QrcodeSvg = vue.defineComponent({
|
|
|
1169
1221
|
rx: imageBorderProps.value.borderRadius,
|
|
1170
1222
|
ry: imageBorderProps.value.borderRadius,
|
|
1171
1223
|
}),
|
|
1172
|
-
props.imageSettings.src && vue.h('image', __assign(__assign({ href: props.imageSettings.src }, imageProps.value), (imageProps.value.borderRadius > 0 ? { 'clip-path': "url(#".concat(qrLogoClipPathId, ")") } : {}))),
|
|
1224
|
+
props.imageSettings.src && imageProps.value && vue.h('image', __assign(__assign({ href: props.imageSettings.src }, imageProps.value), (imageProps.value.borderRadius > 0 ? { 'clip-path': "url(#".concat(qrLogoClipPathId, ")") } : {}))),
|
|
1173
1225
|
]); };
|
|
1174
1226
|
},
|
|
1175
1227
|
});
|
|
@@ -1179,7 +1231,7 @@ var QrcodeCanvas = vue.defineComponent({
|
|
|
1179
1231
|
setup: function (props, ctx) {
|
|
1180
1232
|
var _a = useQRCode(props), margin = _a.margin, cells = _a.cells, numCells = _a.numCells, fgPath = _a.fgPath, imageProps = _a.imageProps, imageBorderProps = _a.imageBorderProps;
|
|
1181
1233
|
var canvasEl = vue.ref(null);
|
|
1182
|
-
var
|
|
1234
|
+
var imageEl = vue.ref(null);
|
|
1183
1235
|
var drawRoundedRect = function (ctx, x, y, width, height, radius) {
|
|
1184
1236
|
ctx.beginPath();
|
|
1185
1237
|
if (ctx.roundRect) {
|
|
@@ -1199,11 +1251,11 @@ var QrcodeCanvas = vue.defineComponent({
|
|
|
1199
1251
|
if (!canvasCtx) {
|
|
1200
1252
|
return;
|
|
1201
1253
|
}
|
|
1202
|
-
var image =
|
|
1254
|
+
var image = imageEl.value;
|
|
1203
1255
|
var devicePixelRatio = typeof window !== 'undefined' ? window.devicePixelRatio || 1 : 1;
|
|
1204
1256
|
var scale = (size / numCells.value) * devicePixelRatio;
|
|
1205
1257
|
canvas.height = canvas.width = size * devicePixelRatio;
|
|
1206
|
-
canvasCtx.
|
|
1258
|
+
canvasCtx.setTransform(scale, 0, 0, scale, 0, 0);
|
|
1207
1259
|
canvasCtx.fillStyle = background;
|
|
1208
1260
|
canvasCtx.fillRect(0, 0, numCells.value, numCells.value);
|
|
1209
1261
|
if (gradient) {
|
|
@@ -1234,7 +1286,7 @@ var QrcodeCanvas = vue.defineComponent({
|
|
|
1234
1286
|
});
|
|
1235
1287
|
}
|
|
1236
1288
|
var showImage = props.imageSettings.src && image && image.naturalWidth !== 0 && image.naturalHeight !== 0;
|
|
1237
|
-
if (showImage) {
|
|
1289
|
+
if (showImage && imageProps.value) {
|
|
1238
1290
|
if (imageBorderProps.value) {
|
|
1239
1291
|
var imageBorder = imageBorderProps.value;
|
|
1240
1292
|
canvasCtx.fillStyle = props.background;
|
|
@@ -1256,11 +1308,10 @@ var QrcodeCanvas = vue.defineComponent({
|
|
|
1256
1308
|
};
|
|
1257
1309
|
vue.onMounted(generate);
|
|
1258
1310
|
vue.watchEffect(generate);
|
|
1259
|
-
var style = ctx.attrs.style;
|
|
1260
1311
|
return function () { return vue.h(vue.Fragment, [
|
|
1261
|
-
vue.h('canvas', __assign(__assign({}, ctx.attrs), { ref: canvasEl, role: 'img', 'aria-label': props.value, style: __assign(__assign({}, style), { width: "".concat(props.size, "px"), height: "".concat(props.size, "px") }) })),
|
|
1312
|
+
vue.h('canvas', __assign(__assign({}, ctx.attrs), { ref: canvasEl, role: 'img', 'aria-label': props.value, style: __assign(__assign({}, ctx.attrs.style), { width: "".concat(props.size, "px"), height: "".concat(props.size, "px") }) })),
|
|
1262
1313
|
props.imageSettings.src && vue.h('img', {
|
|
1263
|
-
ref:
|
|
1314
|
+
ref: imageEl,
|
|
1264
1315
|
src: props.imageSettings.src,
|
|
1265
1316
|
style: { display: 'none' },
|
|
1266
1317
|
onLoad: generate,
|
|
@@ -1284,6 +1335,7 @@ var QrcodeVue = vue.defineComponent({
|
|
|
1284
1335
|
gradientType: props.gradientType,
|
|
1285
1336
|
gradientStartColor: props.gradientStartColor,
|
|
1286
1337
|
gradientEndColor: props.gradientEndColor,
|
|
1338
|
+
radius: props.radius,
|
|
1287
1339
|
}); };
|
|
1288
1340
|
},
|
|
1289
1341
|
});
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
/*!
|
|
2
|
-
* qrcode.vue v3.
|
|
2
|
+
* qrcode.vue v3.9.0
|
|
3
3
|
* A Vue.js component to generate QRCode. Both support Vue 2 and Vue 3
|
|
4
4
|
* © 2017-PRESENT @scopewu(https://github.com/scopewu)
|
|
5
5
|
* MIT License.
|
|
6
6
|
*/
|
|
7
|
-
!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("vue")):"function"==typeof define&&define.amd?define(["exports","vue"],t):t((e="undefined"!=typeof globalThis?globalThis:e||self).QrcodeVue={},e.Vue)}(this,function(e,t){"use strict";var r,n=function(){return n=Object.assign||function(e){for(var t,r=1,n=arguments.length;n>r;r++)for(var i in t=arguments[r])Object.prototype.hasOwnProperty.call(t,i)&&(e[i]=t[i]);return e},n.apply(this,arguments)};"function"==typeof SuppressedError&&SuppressedError,function(e){var t=function(){function t(e,r,n,o){if(this.version=e,this.errorCorrectionLevel=r,this.modules=[],this.isFunction=[],t.MIN_VERSION>e||e>t.MAX_VERSION)throw new RangeError("Version value out of range");if(-1>o||o>7)throw new RangeError("Mask value out of range");this.size=4*e+17;for(var a=[],u=0;this.size>u;u++)a.push(!1);for(u=0;this.size>u;u++)this.modules.push(a.slice()),this.isFunction.push(a.slice());this.drawFunctionPatterns();var s=this.addEccAndInterleave(n);if(this.drawCodewords(s),-1==o){var l=1e9;for(u=0;8>u;u++){this.applyMask(u),this.drawFormatBits(u);var h=this.getPenaltyScore();l>h&&(o=u,l=h),this.applyMask(u)}}i(o>=0&&7>=o),this.mask=o,this.applyMask(o),this.drawFormatBits(o),this.isFunction=[]}return t.encodeText=function(r,n){var i=e.QrSegment.makeSegments(r);return t.encodeSegments(i,n)},t.encodeBinary=function(r,n){var i=e.QrSegment.makeBytes(r);return t.encodeSegments([i],n)},t.encodeSegments=function(e,n,a,u,s,l){if(void 0===a&&(a=1),void 0===u&&(u=40),void 0===s&&(s=-1),void 0===l&&(l=!0),t.MIN_VERSION>a||a>u||u>t.MAX_VERSION||-1>s||s>7)throw new RangeError("Invalid value");var h,d;for(h=a;;h++){var c=8*t.getNumDataCodewords(h,n),f=o.getTotalBits(e,h);if(c>=f){d=f;break}if(h>=u)throw new RangeError("Data too long")}for(var g=0,v=[t.Ecc.MEDIUM,t.Ecc.QUARTILE,t.Ecc.HIGH];v.length>g;g++){var m=v[g];l&&d<=8*t.getNumDataCodewords(h,m)&&(n=m)}for(var p=[],y=0,E=e;E.length>y;y++){var w=E[y];r(w.mode.modeBits,4,p),r(w.numChars,w.mode.numCharCountBits(h),p);for(var C=0,M=w.getData();M.length>C;C++){p.push(M[C])}}i(p.length==d);var R=8*t.getNumDataCodewords(h,n);i(R>=p.length),r(0,Math.min(4,R-p.length),p),r(0,(8-p.length%8)%8,p),i(p.length%8==0);for(var S=236;R>p.length;S^=253)r(S,8,p);for(var N=[];p.length>8*N.length;)N.push(0);return p.forEach(function(e,t){return N[t>>>3]|=e<<7-(7&t)}),new t(h,n,N,s)},t.prototype.getModule=function(e,t){return e>=0&&this.size>e&&t>=0&&this.size>t&&this.modules[t][e]},t.prototype.getModules=function(){return this.modules},t.prototype.drawFunctionPatterns=function(){for(var e=0;this.size>e;e++)this.setFunctionModule(6,e,e%2==0),this.setFunctionModule(e,6,e%2==0);this.drawFinderPattern(3,3),this.drawFinderPattern(this.size-4,3),this.drawFinderPattern(3,this.size-4);var t=this.getAlignmentPatternPositions(),r=t.length;for(e=0;r>e;e++)for(var n=0;r>n;n++)0==e&&0==n||0==e&&n==r-1||e==r-1&&0==n||this.drawAlignmentPattern(t[e],t[n]);this.drawFormatBits(0),this.drawVersion()},t.prototype.drawFormatBits=function(e){for(var t=this.errorCorrectionLevel.formatBits<<3|e,r=t,o=0;10>o;o++)r=r<<1^1335*(r>>>9);var a=21522^(t<<10|r);i(a>>>15==0);for(o=0;5>=o;o++)this.setFunctionModule(8,o,n(a,o));this.setFunctionModule(8,7,n(a,6)),this.setFunctionModule(8,8,n(a,7)),this.setFunctionModule(7,8,n(a,8));for(o=9;15>o;o++)this.setFunctionModule(14-o,8,n(a,o));for(o=0;8>o;o++)this.setFunctionModule(this.size-1-o,8,n(a,o));for(o=8;15>o;o++)this.setFunctionModule(8,this.size-15+o,n(a,o));this.setFunctionModule(8,this.size-8,!0)},t.prototype.drawVersion=function(){if(this.version>=7){for(var e=this.version,t=0;12>t;t++)e=e<<1^7973*(e>>>11);var r=this.version<<12|e;i(r>>>18==0);for(t=0;18>t;t++){var o=n(r,t),a=this.size-11+t%3,u=Math.floor(t/3);this.setFunctionModule(a,u,o),this.setFunctionModule(u,a,o)}}},t.prototype.drawFinderPattern=function(e,t){for(var r=-4;4>=r;r++)for(var n=-4;4>=n;n++){var i=Math.max(Math.abs(n),Math.abs(r)),o=e+n,a=t+r;o>=0&&this.size>o&&a>=0&&this.size>a&&this.setFunctionModule(o,a,2!=i&&4!=i)}},t.prototype.drawAlignmentPattern=function(e,t){for(var r=-2;2>=r;r++)for(var n=-2;2>=n;n++)this.setFunctionModule(e+n,t+r,1!=Math.max(Math.abs(n),Math.abs(r)))},t.prototype.setFunctionModule=function(e,t,r){this.modules[t][e]=r,this.isFunction[t][e]=!0},t.prototype.addEccAndInterleave=function(e){var r=this.version,n=this.errorCorrectionLevel;if(e.length!=t.getNumDataCodewords(r,n))throw new RangeError("Invalid argument");for(var o=t.NUM_ERROR_CORRECTION_BLOCKS[n.ordinal][r],a=t.ECC_CODEWORDS_PER_BLOCK[n.ordinal][r],u=Math.floor(t.getNumRawDataModules(r)/8),s=o-u%o,l=Math.floor(u/o),h=[],d=t.reedSolomonComputeDivisor(a),c=0,f=0;o>c;c++){var g=e.slice(f,f+l-a+(s>c?0:1));f+=g.length;var v=t.reedSolomonComputeRemainder(g,d);s>c&&g.push(0),h.push(g.concat(v))}var m=[],p=function(e){h.forEach(function(t,r){e==l-a&&s>r||m.push(t[e])})};for(c=0;h[0].length>c;c++)p(c);return i(m.length==u),m},t.prototype.drawCodewords=function(e){if(e.length!=Math.floor(t.getNumRawDataModules(this.version)/8))throw new RangeError("Invalid argument");for(var r=0,o=this.size-1;o>=1;o-=2){6==o&&(o=5);for(var a=0;this.size>a;a++)for(var u=0;2>u;u++){var s=o-u,l=!(o+1&2)?this.size-1-a:a;!this.isFunction[l][s]&&8*e.length>r&&(this.modules[l][s]=n(e[r>>>3],7-(7&r)),r++)}}i(r==8*e.length)},t.prototype.applyMask=function(e){if(0>e||e>7)throw new RangeError("Mask value out of range");for(var t=0;this.size>t;t++)for(var r=0;this.size>r;r++){var n=void 0;switch(e){case 0:n=(r+t)%2==0;break;case 1:n=t%2==0;break;case 2:n=r%3==0;break;case 3:n=(r+t)%3==0;break;case 4:n=(Math.floor(r/3)+Math.floor(t/2))%2==0;break;case 5:n=r*t%2+r*t%3==0;break;case 6:n=(r*t%2+r*t%3)%2==0;break;case 7:n=((r+t)%2+r*t%3)%2==0;break;default:throw Error("Unreachable")}!this.isFunction[t][r]&&n&&(this.modules[t][r]=!this.modules[t][r])}},t.prototype.getPenaltyScore=function(){for(var e=0,r=0;this.size>r;r++){for(var n=!1,o=0,a=[0,0,0,0,0,0,0],u=0;this.size>u;u++)this.modules[r][u]==n?5==++o?e+=t.PENALTY_N1:o>5&&e++:(this.finderPenaltyAddHistory(o,a),n||(e+=this.finderPenaltyCountPatterns(a)*t.PENALTY_N3),n=this.modules[r][u],o=1);e+=this.finderPenaltyTerminateAndCount(n,o,a)*t.PENALTY_N3}for(u=0;this.size>u;u++){n=!1;var s=0;for(a=[0,0,0,0,0,0,0],r=0;this.size>r;r++)this.modules[r][u]==n?5==++s?e+=t.PENALTY_N1:s>5&&e++:(this.finderPenaltyAddHistory(s,a),n||(e+=this.finderPenaltyCountPatterns(a)*t.PENALTY_N3),n=this.modules[r][u],s=1);e+=this.finderPenaltyTerminateAndCount(n,s,a)*t.PENALTY_N3}for(r=0;this.size-1>r;r++)for(u=0;this.size-1>u;u++){var l=this.modules[r][u];l==this.modules[r][u+1]&&l==this.modules[r+1][u]&&l==this.modules[r+1][u+1]&&(e+=t.PENALTY_N2)}for(var h=0,d=0,c=this.modules;c.length>d;d++){h=c[d].reduce(function(e,t){return e+(t?1:0)},h)}var f=this.size*this.size,g=Math.ceil(Math.abs(20*h-10*f)/f)-1;return i(g>=0&&9>=g),i((e+=g*t.PENALTY_N4)>=0&&2568888>=e),e},t.prototype.getAlignmentPatternPositions=function(){if(1==this.version)return[];for(var e=Math.floor(this.version/7)+2,t=2*Math.floor((8*this.version+3*e+5)/(4*e-4)),r=[6],n=this.size-7;e>r.length;n-=t)r.splice(1,0,n);return r},t.getNumRawDataModules=function(e){if(t.MIN_VERSION>e||e>t.MAX_VERSION)throw new RangeError("Version number out of range");var r=(16*e+128)*e+64;if(e>=2){var n=Math.floor(e/7)+2;r-=(25*n-10)*n-55,7>e||(r-=36)}return i(r>=208&&29648>=r),r},t.getNumDataCodewords=function(e,r){return Math.floor(t.getNumRawDataModules(e)/8)-t.ECC_CODEWORDS_PER_BLOCK[r.ordinal][e]*t.NUM_ERROR_CORRECTION_BLOCKS[r.ordinal][e]},t.reedSolomonComputeDivisor=function(e){if(1>e||e>255)throw new RangeError("Degree out of range");for(var r=[],n=0;e-1>n;n++)r.push(0);r.push(1);var i=1;for(n=0;e>n;n++){for(var o=0;r.length>o;o++)r[o]=t.reedSolomonMultiply(r[o],i),r.length>o+1&&(r[o]^=r[o+1]);i=t.reedSolomonMultiply(i,2)}return r},t.reedSolomonComputeRemainder=function(e,r){for(var n=r.map(function(e){return 0}),i=function(e){var i=e^n.shift();n.push(0),r.forEach(function(e,r){return n[r]^=t.reedSolomonMultiply(e,i)})},o=0,a=e;a.length>o;o++){i(a[o])}return n},t.reedSolomonMultiply=function(e,t){if(e>>>8!=0||t>>>8!=0)throw new RangeError("Byte out of range");for(var r=0,n=7;n>=0;n--)r=r<<1^285*(r>>>7),r^=(t>>>n&1)*e;return i(r>>>8==0),r},t.prototype.finderPenaltyCountPatterns=function(e){var t=e[1];i(3*this.size>=t);var r=t>0&&e[2]==t&&e[3]==3*t&&e[4]==t&&e[5]==t;return(!r||4*t>e[0]||t>e[6]?0:1)+(!r||4*t>e[6]||t>e[0]?0:1)},t.prototype.finderPenaltyTerminateAndCount=function(e,t,r){return e&&(this.finderPenaltyAddHistory(t,r),t=0),this.finderPenaltyAddHistory(t+=this.size,r),this.finderPenaltyCountPatterns(r)},t.prototype.finderPenaltyAddHistory=function(e,t){0==t[0]&&(e+=this.size),t.pop(),t.unshift(e)},t.MIN_VERSION=1,t.MAX_VERSION=40,t.PENALTY_N1=3,t.PENALTY_N2=3,t.PENALTY_N3=40,t.PENALTY_N4=10,t.ECC_CODEWORDS_PER_BLOCK=[[-1,7,10,15,20,26,18,20,24,30,18,20,24,26,30,22,24,28,30,28,28,28,28,30,30,26,28,30,30,30,30,30,30,30,30,30,30,30,30,30,30],[-1,10,16,26,18,24,16,18,22,22,26,30,22,22,24,24,28,28,26,26,26,26,28,28,28,28,28,28,28,28,28,28,28,28,28,28,28,28,28,28,28],[-1,13,22,18,26,18,24,18,22,20,24,28,26,24,20,30,24,28,28,26,30,28,30,30,30,30,28,30,30,30,30,30,30,30,30,30,30,30,30,30,30],[-1,17,28,22,16,22,28,26,26,24,28,24,28,22,24,24,30,28,28,26,28,30,24,30,30,30,30,30,30,30,30,30,30,30,30,30,30,30,30,30,30]],t.NUM_ERROR_CORRECTION_BLOCKS=[[-1,1,1,1,1,1,2,2,2,2,4,4,4,4,4,6,6,6,6,7,8,8,9,9,10,12,12,12,13,14,15,16,17,18,19,19,20,21,22,24,25],[-1,1,1,1,2,2,4,4,4,5,5,5,8,9,9,10,10,11,13,14,16,17,17,18,20,21,23,25,26,28,29,31,33,35,37,38,40,43,45,47,49],[-1,1,1,2,2,4,4,6,6,8,8,8,10,12,16,12,17,16,18,21,20,23,23,25,27,29,34,34,35,38,40,43,45,48,51,53,56,59,62,65,68],[-1,1,1,2,4,4,4,5,6,8,8,11,11,16,16,18,16,19,21,25,25,25,34,30,32,35,37,40,42,45,48,51,54,57,60,63,66,70,74,77,81]],t}();function r(e,t,r){if(0>t||t>31||e>>>t!=0)throw new RangeError("Value out of range");for(var n=t-1;n>=0;n--)r.push(e>>>n&1)}function n(e,t){return!!(e>>>t&1)}function i(e){if(!e)throw Error("Assertion error")}e.QrCode=t;var o=function(){function e(e,t,r){if(this.mode=e,this.numChars=t,this.bitData=r,0>t)throw new RangeError("Invalid argument");this.bitData=r.slice()}return e.makeBytes=function(t){for(var n=[],i=0,o=t;o.length>i;i++){r(o[i],8,n)}return new e(e.Mode.BYTE,t.length,n)},e.makeNumeric=function(t){if(!e.isNumeric(t))throw new RangeError("String contains non-numeric characters");for(var n=[],i=0;t.length>i;){var o=Math.min(t.length-i,3);r(parseInt(t.substring(i,i+o),10),3*o+1,n),i+=o}return new e(e.Mode.NUMERIC,t.length,n)},e.makeAlphanumeric=function(t){if(!e.isAlphanumeric(t))throw new RangeError("String contains unencodable characters in alphanumeric mode");var n,i=[];for(n=0;t.length>=n+2;n+=2){var o=45*e.ALPHANUMERIC_CHARSET.indexOf(t.charAt(n));r(o+=e.ALPHANUMERIC_CHARSET.indexOf(t.charAt(n+1)),11,i)}return t.length>n&&r(e.ALPHANUMERIC_CHARSET.indexOf(t.charAt(n)),6,i),new e(e.Mode.ALPHANUMERIC,t.length,i)},e.makeSegments=function(t){return""==t?[]:e.isNumeric(t)?[e.makeNumeric(t)]:e.isAlphanumeric(t)?[e.makeAlphanumeric(t)]:[e.makeBytes(e.toUtf8ByteArray(t))]},e.makeEci=function(t){var n=[];if(0>t)throw new RangeError("ECI assignment value out of range");if(128>t)r(t,8,n);else if(16384>t)r(2,2,n),r(t,14,n);else{if(t>=1e6)throw new RangeError("ECI assignment value out of range");r(6,3,n),r(t,21,n)}return new e(e.Mode.ECI,0,n)},e.isNumeric=function(t){return e.NUMERIC_REGEX.test(t)},e.isAlphanumeric=function(t){return e.ALPHANUMERIC_REGEX.test(t)},e.prototype.getData=function(){return this.bitData.slice()},e.getTotalBits=function(e,t){for(var r=0,n=0,i=e;i.length>n;n++){var o=i[n],a=o.mode.numCharCountBits(t);if(o.numChars>=1<<a)return 1/0;r+=4+a+o.bitData.length}return r},e.toUtf8ByteArray=function(e){e=encodeURI(e);for(var t=[],r=0;e.length>r;r++)"%"!=e.charAt(r)?t.push(e.charCodeAt(r)):(t.push(parseInt(e.substring(r+1,r+3),16)),r+=2);return t},e.NUMERIC_REGEX=/^[0-9]*$/,e.ALPHANUMERIC_REGEX=/^[A-Z0-9 $%*+.\/:-]*$/,e.ALPHANUMERIC_CHARSET="0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZ $%*+-./:",e}();e.QrSegment=o}(r||(r={})),function(e){var t,r;t=e.QrCode||(e.QrCode={}),r=function(){function e(e,t){this.ordinal=e,this.formatBits=t}return e.LOW=new e(0,1),e.MEDIUM=new e(1,0),e.QUARTILE=new e(2,3),e.HIGH=new e(3,2),e}(),t.Ecc=r}(r||(r={})),function(e){var t,r;t=e.QrSegment||(e.QrSegment={}),r=function(){function e(e,t){this.modeBits=e,this.numBitsCharCount=t}return e.prototype.numCharCountBits=function(e){return this.numBitsCharCount[Math.floor((e+7)/17)]},e.NUMERIC=new e(1,[10,12,14]),e.ALPHANUMERIC=new e(2,[9,11,13]),e.BYTE=new e(4,[8,16,16]),e.KANJI=new e(8,[8,10,12]),e.ECI=new e(7,[0,0,0]),e}(),t.Mode=r}(r||(r={}));var i=r,o=0,a={L:i.QrCode.Ecc.LOW,M:i.QrCode.Ecc.MEDIUM,Q:i.QrCode.Ecc.QUARTILE,H:i.QrCode.Ecc.HIGH},u=function(){try{(new Path2D).addPath(new Path2D)}catch(e){return!1}return!0}();function s(e){return e in a}function l(e){var r=t.computed(function(){var t;return(null!==(t=e.margin)&&void 0!==t?t:0)>>>0}),n=t.computed(function(){var t=s(e.level)?e.level:"L";return i.QrCode.encodeText(e.value,a[t]).getModules()}),o=t.computed(function(){return n.value.length+2*r.value}),u=t.computed(function(){return function(e,t){void 0===t&&(t=0);for(var r=[],n=0;e.length>n;n++)for(var i=e[n],o=null,a=0;i.length>a;a++){var u=i[a];if(u||null===o)if(a!==i.length-1)u&&null===o&&(o=a);else{if(!u)continue;r.push(null===o?"M".concat(a+t,",").concat(n+t," h1v1H").concat(a+t,"z"):"M".concat(o+t,",").concat(n+t," h").concat(a+1-o,"v1H").concat(o+t,"z"))}else r.push("M".concat(o+t," ").concat(n+t,"h").concat(a-o,"v1H").concat(o+t,"z")),o=null}return r.join("")}(n.value,r.value)}),l=t.computed(function(){if(!e.imageSettings.src)return{x:0,y:0,width:0,height:0,borderRadius:0};var t=function(e,t,r,n){var i=n.width,o=n.height,a=n.x,u=n.y,s=e.length+2*r,l=Math.floor(.1*t),h=s/t,d=(i||l)*h,c=(o||l)*h,f=null==a?e.length/2-d/2:a*h,g=null==u?e.length/2-c/2:u*h,v=(n.borderRadius||0)*h,m=null;if(n.excavate){var p=Math.floor(f),y=Math.floor(g);m={x:p,y:y,w:Math.ceil(d+f-p),h:Math.ceil(c+g-y)}}return{x:f,y:g,h:c,w:d,borderRadius:v,excavation:m}}(n.value,e.size,r.value,e.imageSettings);return{x:t.x+r.value,y:t.y+r.value,width:t.w,height:t.h,borderRadius:t.borderRadius}}),h=t.computed(function(){if(!e.imageSettings.excavate||!e.imageSettings.src)return null;var t=2/(e.size/o.value);return{x:l.value.x-t,y:l.value.y-t,width:l.value.width+2*t,height:l.value.height+2*t,borderRadius:l.value.borderRadius}});return{margin:r,numCells:o,cells:n,fgPath:u,imageProps:l,imageBorderProps:h}}var h={value:{type:String,required:!0,default:""},size:{type:Number,default:100},level:{type:String,default:"L",validator:function(e){return s(e)}},background:{type:String,default:"#fff"},foreground:{type:String,default:"#000"},margin:{type:Number,required:!1,default:0},imageSettings:{type:Object,required:!1,default:function(){return{}}},gradient:{type:Boolean,required:!1,default:!1},gradientType:{type:String,required:!1,default:"linear",validator:function(e){return["linear","radial"].indexOf(e)>-1}},gradientStartColor:{type:String,required:!1,default:"#000"},gradientEndColor:{type:String,required:!1,default:"#fff"}},d=n(n({},h),{renderAs:{type:String,required:!1,default:"canvas",validator:function(e){return["canvas","svg"].indexOf(e)>-1}}}),c=t.defineComponent({name:"QRCodeSvg",props:h,setup:function(e){var r=l(e),i=r.numCells,a=r.fgPath,u=r.imageProps,s=r.imageBorderProps,h=o++,d="qrcode.vue-gradient-".concat(h),c="qrcode.vue-logo-clip-path-".concat(h);return function(){return t.h("svg",{width:e.size,height:e.size,"shape-rendering":"crispEdges",xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 ".concat(i.value," ").concat(i.value),role:"img","aria-label":e.value},[t.h("defs",{},[e.gradient?t.h("linear"===e.gradientType?"linearGradient":"radialGradient",n({id:d},"linear"===e.gradientType?{x1:"0%",y1:"0%",x2:"100%",y2:"100%"}:{cx:"50%",cy:"50%",r:"50%",fx:"50%",fy:"50%"}),[t.h("stop",{offset:"0%",style:{stopColor:e.gradientStartColor}}),t.h("stop",{offset:"100%",style:{stopColor:e.gradientEndColor}})]):null,(r=u.value.borderRadius,e.imageSettings.src&&r>0?t.h("clipPath",{id:c},[t.h("rect",{x:u.value.x,y:u.value.y,width:u.value.width,height:u.value.height,rx:r,ry:r})]):null)]),t.h("rect",{width:"100%",height:"100%",fill:e.background}),t.h("path",{fill:e.gradient?"url(#".concat(d,")"):e.foreground,d:a.value}),s.value&&t.h("rect",{x:s.value.x,y:s.value.y,width:s.value.width,height:s.value.height,fill:e.background,rx:s.value.borderRadius,ry:s.value.borderRadius}),e.imageSettings.src&&t.h("image",n(n({href:e.imageSettings.src},u.value),u.value.borderRadius>0?{"clip-path":"url(#".concat(c,")")}:{}))]);var r}}}),f=t.defineComponent({name:"QRCodeCanvas",props:h,setup:function(e,r){var i=l(e),o=i.margin,a=i.cells,s=i.numCells,h=i.fgPath,d=i.imageProps,c=i.imageBorderProps,f=t.ref(null),g=t.ref(null),v=function(e,t,r,n,i,o){e.beginPath(),e.roundRect?e.roundRect(t,r,n,i,o):e.rect(t,r,n,i)},m=function(){var t=e.size,r=e.background,n=e.foreground,i=e.gradient,l=e.gradientType,m=e.gradientStartColor,p=e.gradientEndColor,y=f.value;if(y){var E=y.getContext("2d");if(E){var w=g.value,C="undefined"!=typeof window&&window.devicePixelRatio||1,M=t/s.value*C;if(y.height=y.width=t*C,E.scale(M,M),E.fillStyle=r,E.fillRect(0,0,s.value,s.value),i){var R=void 0;(R="linear"===l?E.createLinearGradient(0,0,s.value,s.value):E.createRadialGradient(s.value/2,s.value/2,0,s.value/2,s.value/2,s.value/2)).addColorStop(0,m),R.addColorStop(1,p),E.fillStyle=R}else E.fillStyle=n;if(u?E.fill(new Path2D(h.value)):a.value.forEach(function(e,t){e.forEach(function(e,r){e&&E.fillRect(r+o.value,t+o.value,1,1)})}),e.imageSettings.src&&w&&0!==w.naturalWidth&&0!==w.naturalHeight){if(c.value){var S=c.value;E.fillStyle=e.background,v(E,S.x,S.y,S.width,S.height,S.borderRadius),E.fill()}var N=d.value.borderRadius;N>0?(E.save(),v(E,d.value.x,d.value.y,d.value.width,d.value.height,N),E.clip(),E.drawImage(w,d.value.x,d.value.y,d.value.width,d.value.height),E.restore()):E.drawImage(w,d.value.x,d.value.y,d.value.width,d.value.height)}}}};t.onMounted(m),t.watchEffect(m);var p=r.attrs.style;return function(){return t.h(t.Fragment,[t.h("canvas",n(n({},r.attrs),{ref:f,role:"img","aria-label":e.value,style:n(n({},p),{width:"".concat(e.size,"px"),height:"".concat(e.size,"px")})})),e.imageSettings.src&&t.h("img",{ref:g,src:e.imageSettings.src,style:{display:"none"},onLoad:m})])}}}),g=t.defineComponent({name:"Qrcode",props:d,setup:function(e){return function(){return t.h("svg"===e.renderAs?c:f,{value:e.value,size:e.size,margin:e.margin,level:e.level,background:e.background,foreground:e.foreground,imageSettings:e.imageSettings,gradient:e.gradient,gradientType:e.gradientType,gradientStartColor:e.gradientStartColor,gradientEndColor:e.gradientEndColor})}}});e.QrcodeCanvas=f,e.QrcodeSvg=c,e.default=g,Object.defineProperty(e,"__esModule",{value:!0})});
|
|
7
|
+
!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("vue")):"function"==typeof define&&define.amd?define(["exports","vue"],t):t((e="undefined"!=typeof globalThis?globalThis:e||self).QrcodeVue={},e.Vue)}(this,function(e,t){"use strict";var r,n=function(){return n=Object.assign||function(e){for(var t,r=1,n=arguments.length;n>r;r++)for(var o in t=arguments[r])Object.prototype.hasOwnProperty.call(t,o)&&(e[o]=t[o]);return e},n.apply(this,arguments)};"function"==typeof SuppressedError&&SuppressedError,function(e){var t=function(){function t(e,r,n,a){if(this.version=e,this.errorCorrectionLevel=r,this.modules=[],this.isFunction=[],t.MIN_VERSION>e||e>t.MAX_VERSION)throw new RangeError("Version value out of range");if(-1>a||a>7)throw new RangeError("Mask value out of range");this.size=4*e+17;for(var i=[],u=0;this.size>u;u++)i.push(!1);for(u=0;this.size>u;u++)this.modules.push(i.slice()),this.isFunction.push(i.slice());this.drawFunctionPatterns();var s=this.addEccAndInterleave(n);if(this.drawCodewords(s),-1==a){var l=1e9;for(u=0;8>u;u++){this.applyMask(u),this.drawFormatBits(u);var c=this.getPenaltyScore();l>c&&(a=u,l=c),this.applyMask(u)}}o(a>=0&&7>=a),this.mask=a,this.applyMask(a),this.drawFormatBits(a),this.isFunction=[]}return t.encodeText=function(r,n){var o=e.QrSegment.makeSegments(r);return t.encodeSegments(o,n)},t.encodeBinary=function(r,n){var o=e.QrSegment.makeBytes(r);return t.encodeSegments([o],n)},t.encodeSegments=function(e,n,i,u,s,l){if(void 0===i&&(i=1),void 0===u&&(u=40),void 0===s&&(s=-1),void 0===l&&(l=!0),t.MIN_VERSION>i||i>u||u>t.MAX_VERSION||-1>s||s>7)throw new RangeError("Invalid value");var c,d;for(c=i;;c++){var h=8*t.getNumDataCodewords(c,n),f=a.getTotalBits(e,c);if(h>=f){d=f;break}if(c>=u)throw new RangeError("Data too long")}for(var v=0,g=[t.Ecc.MEDIUM,t.Ecc.QUARTILE,t.Ecc.HIGH];g.length>v;v++){var p=g[v];l&&d<=8*t.getNumDataCodewords(c,p)&&(n=p)}for(var m=[],y=0,w=e;w.length>y;y++){var E=w[y];r(E.mode.modeBits,4,m),r(E.numChars,E.mode.numCharCountBits(c),m);for(var C=0,M=E.getData();M.length>C;C++){m.push(M[C])}}o(m.length==d);var R=8*t.getNumDataCodewords(c,n);o(R>=m.length),r(0,Math.min(4,R-m.length),m),r(0,(8-m.length%8)%8,m),o(m.length%8==0);for(var S=236;R>m.length;S^=253)r(S,8,m);for(var A=[];m.length>8*A.length;)A.push(0);return m.forEach(function(e,t){return A[t>>>3]|=e<<7-(7&t)}),new t(c,n,A,s)},t.prototype.getModule=function(e,t){return e>=0&&this.size>e&&t>=0&&this.size>t&&this.modules[t][e]},t.prototype.getModules=function(){return this.modules},t.prototype.drawFunctionPatterns=function(){for(var e=0;this.size>e;e++)this.setFunctionModule(6,e,e%2==0),this.setFunctionModule(e,6,e%2==0);this.drawFinderPattern(3,3),this.drawFinderPattern(this.size-4,3),this.drawFinderPattern(3,this.size-4);var t=this.getAlignmentPatternPositions(),r=t.length;for(e=0;r>e;e++)for(var n=0;r>n;n++)0==e&&0==n||0==e&&n==r-1||e==r-1&&0==n||this.drawAlignmentPattern(t[e],t[n]);this.drawFormatBits(0),this.drawVersion()},t.prototype.drawFormatBits=function(e){for(var t=this.errorCorrectionLevel.formatBits<<3|e,r=t,a=0;10>a;a++)r=r<<1^1335*(r>>>9);var i=21522^(t<<10|r);o(i>>>15==0);for(a=0;5>=a;a++)this.setFunctionModule(8,a,n(i,a));this.setFunctionModule(8,7,n(i,6)),this.setFunctionModule(8,8,n(i,7)),this.setFunctionModule(7,8,n(i,8));for(a=9;15>a;a++)this.setFunctionModule(14-a,8,n(i,a));for(a=0;8>a;a++)this.setFunctionModule(this.size-1-a,8,n(i,a));for(a=8;15>a;a++)this.setFunctionModule(8,this.size-15+a,n(i,a));this.setFunctionModule(8,this.size-8,!0)},t.prototype.drawVersion=function(){if(this.version>=7){for(var e=this.version,t=0;12>t;t++)e=e<<1^7973*(e>>>11);var r=this.version<<12|e;o(r>>>18==0);for(t=0;18>t;t++){var a=n(r,t),i=this.size-11+t%3,u=Math.floor(t/3);this.setFunctionModule(i,u,a),this.setFunctionModule(u,i,a)}}},t.prototype.drawFinderPattern=function(e,t){for(var r=-4;4>=r;r++)for(var n=-4;4>=n;n++){var o=Math.max(Math.abs(n),Math.abs(r)),a=e+n,i=t+r;a>=0&&this.size>a&&i>=0&&this.size>i&&this.setFunctionModule(a,i,2!=o&&4!=o)}},t.prototype.drawAlignmentPattern=function(e,t){for(var r=-2;2>=r;r++)for(var n=-2;2>=n;n++)this.setFunctionModule(e+n,t+r,1!=Math.max(Math.abs(n),Math.abs(r)))},t.prototype.setFunctionModule=function(e,t,r){this.modules[t][e]=r,this.isFunction[t][e]=!0},t.prototype.addEccAndInterleave=function(e){var r=this.version,n=this.errorCorrectionLevel;if(e.length!=t.getNumDataCodewords(r,n))throw new RangeError("Invalid argument");for(var a=t.NUM_ERROR_CORRECTION_BLOCKS[n.ordinal][r],i=t.ECC_CODEWORDS_PER_BLOCK[n.ordinal][r],u=Math.floor(t.getNumRawDataModules(r)/8),s=a-u%a,l=Math.floor(u/a),c=[],d=t.reedSolomonComputeDivisor(i),h=0,f=0;a>h;h++){var v=e.slice(f,f+l-i+(s>h?0:1));f+=v.length;var g=t.reedSolomonComputeRemainder(v,d);s>h&&v.push(0),c.push(v.concat(g))}var p=[],m=function(e){c.forEach(function(t,r){e==l-i&&s>r||p.push(t[e])})};for(h=0;c[0].length>h;h++)m(h);return o(p.length==u),p},t.prototype.drawCodewords=function(e){if(e.length!=Math.floor(t.getNumRawDataModules(this.version)/8))throw new RangeError("Invalid argument");for(var r=0,a=this.size-1;a>=1;a-=2){6==a&&(a=5);for(var i=0;this.size>i;i++)for(var u=0;2>u;u++){var s=a-u,l=!(a+1&2)?this.size-1-i:i;!this.isFunction[l][s]&&8*e.length>r&&(this.modules[l][s]=n(e[r>>>3],7-(7&r)),r++)}}o(r==8*e.length)},t.prototype.applyMask=function(e){if(0>e||e>7)throw new RangeError("Mask value out of range");for(var t=0;this.size>t;t++)for(var r=0;this.size>r;r++){var n=void 0;switch(e){case 0:n=(r+t)%2==0;break;case 1:n=t%2==0;break;case 2:n=r%3==0;break;case 3:n=(r+t)%3==0;break;case 4:n=(Math.floor(r/3)+Math.floor(t/2))%2==0;break;case 5:n=r*t%2+r*t%3==0;break;case 6:n=(r*t%2+r*t%3)%2==0;break;case 7:n=((r+t)%2+r*t%3)%2==0;break;default:throw Error("Unreachable")}!this.isFunction[t][r]&&n&&(this.modules[t][r]=!this.modules[t][r])}},t.prototype.getPenaltyScore=function(){for(var e=0,r=0;this.size>r;r++){for(var n=!1,a=0,i=[0,0,0,0,0,0,0],u=0;this.size>u;u++)this.modules[r][u]==n?5==++a?e+=t.PENALTY_N1:a>5&&e++:(this.finderPenaltyAddHistory(a,i),n||(e+=this.finderPenaltyCountPatterns(i)*t.PENALTY_N3),n=this.modules[r][u],a=1);e+=this.finderPenaltyTerminateAndCount(n,a,i)*t.PENALTY_N3}for(u=0;this.size>u;u++){n=!1;var s=0;for(i=[0,0,0,0,0,0,0],r=0;this.size>r;r++)this.modules[r][u]==n?5==++s?e+=t.PENALTY_N1:s>5&&e++:(this.finderPenaltyAddHistory(s,i),n||(e+=this.finderPenaltyCountPatterns(i)*t.PENALTY_N3),n=this.modules[r][u],s=1);e+=this.finderPenaltyTerminateAndCount(n,s,i)*t.PENALTY_N3}for(r=0;this.size-1>r;r++)for(u=0;this.size-1>u;u++){var l=this.modules[r][u];l==this.modules[r][u+1]&&l==this.modules[r+1][u]&&l==this.modules[r+1][u+1]&&(e+=t.PENALTY_N2)}for(var c=0,d=0,h=this.modules;h.length>d;d++){c=h[d].reduce(function(e,t){return e+(t?1:0)},c)}var f=this.size*this.size,v=Math.ceil(Math.abs(20*c-10*f)/f)-1;return o(v>=0&&9>=v),o((e+=v*t.PENALTY_N4)>=0&&2568888>=e),e},t.prototype.getAlignmentPatternPositions=function(){if(1==this.version)return[];for(var e=Math.floor(this.version/7)+2,t=2*Math.floor((8*this.version+3*e+5)/(4*e-4)),r=[6],n=this.size-7;e>r.length;n-=t)r.splice(1,0,n);return r},t.getNumRawDataModules=function(e){if(t.MIN_VERSION>e||e>t.MAX_VERSION)throw new RangeError("Version number out of range");var r=(16*e+128)*e+64;if(e>=2){var n=Math.floor(e/7)+2;r-=(25*n-10)*n-55,7>e||(r-=36)}return o(r>=208&&29648>=r),r},t.getNumDataCodewords=function(e,r){return Math.floor(t.getNumRawDataModules(e)/8)-t.ECC_CODEWORDS_PER_BLOCK[r.ordinal][e]*t.NUM_ERROR_CORRECTION_BLOCKS[r.ordinal][e]},t.reedSolomonComputeDivisor=function(e){if(1>e||e>255)throw new RangeError("Degree out of range");for(var r=[],n=0;e-1>n;n++)r.push(0);r.push(1);var o=1;for(n=0;e>n;n++){for(var a=0;r.length>a;a++)r[a]=t.reedSolomonMultiply(r[a],o),r.length>a+1&&(r[a]^=r[a+1]);o=t.reedSolomonMultiply(o,2)}return r},t.reedSolomonComputeRemainder=function(e,r){for(var n=r.map(function(e){return 0}),o=function(e){var o=e^n.shift();n.push(0),r.forEach(function(e,r){return n[r]^=t.reedSolomonMultiply(e,o)})},a=0,i=e;i.length>a;a++){o(i[a])}return n},t.reedSolomonMultiply=function(e,t){if(e>>>8!=0||t>>>8!=0)throw new RangeError("Byte out of range");for(var r=0,n=7;n>=0;n--)r=r<<1^285*(r>>>7),r^=(t>>>n&1)*e;return o(r>>>8==0),r},t.prototype.finderPenaltyCountPatterns=function(e){var t=e[1];o(3*this.size>=t);var r=t>0&&e[2]==t&&e[3]==3*t&&e[4]==t&&e[5]==t;return(!r||4*t>e[0]||t>e[6]?0:1)+(!r||4*t>e[6]||t>e[0]?0:1)},t.prototype.finderPenaltyTerminateAndCount=function(e,t,r){return e&&(this.finderPenaltyAddHistory(t,r),t=0),this.finderPenaltyAddHistory(t+=this.size,r),this.finderPenaltyCountPatterns(r)},t.prototype.finderPenaltyAddHistory=function(e,t){0==t[0]&&(e+=this.size),t.pop(),t.unshift(e)},t.MIN_VERSION=1,t.MAX_VERSION=40,t.PENALTY_N1=3,t.PENALTY_N2=3,t.PENALTY_N3=40,t.PENALTY_N4=10,t.ECC_CODEWORDS_PER_BLOCK=[[-1,7,10,15,20,26,18,20,24,30,18,20,24,26,30,22,24,28,30,28,28,28,28,30,30,26,28,30,30,30,30,30,30,30,30,30,30,30,30,30,30],[-1,10,16,26,18,24,16,18,22,22,26,30,22,22,24,24,28,28,26,26,26,26,28,28,28,28,28,28,28,28,28,28,28,28,28,28,28,28,28,28,28],[-1,13,22,18,26,18,24,18,22,20,24,28,26,24,20,30,24,28,28,26,30,28,30,30,30,30,28,30,30,30,30,30,30,30,30,30,30,30,30,30,30],[-1,17,28,22,16,22,28,26,26,24,28,24,28,22,24,24,30,28,28,26,28,30,24,30,30,30,30,30,30,30,30,30,30,30,30,30,30,30,30,30,30]],t.NUM_ERROR_CORRECTION_BLOCKS=[[-1,1,1,1,1,1,2,2,2,2,4,4,4,4,4,6,6,6,6,7,8,8,9,9,10,12,12,12,13,14,15,16,17,18,19,19,20,21,22,24,25],[-1,1,1,1,2,2,4,4,4,5,5,5,8,9,9,10,10,11,13,14,16,17,17,18,20,21,23,25,26,28,29,31,33,35,37,38,40,43,45,47,49],[-1,1,1,2,2,4,4,6,6,8,8,8,10,12,16,12,17,16,18,21,20,23,23,25,27,29,34,34,35,38,40,43,45,48,51,53,56,59,62,65,68],[-1,1,1,2,4,4,4,5,6,8,8,11,11,16,16,18,16,19,21,25,25,25,34,30,32,35,37,40,42,45,48,51,54,57,60,63,66,70,74,77,81]],t}();function r(e,t,r){if(0>t||t>31||e>>>t!=0)throw new RangeError("Value out of range");for(var n=t-1;n>=0;n--)r.push(e>>>n&1)}function n(e,t){return!!(e>>>t&1)}function o(e){if(!e)throw Error("Assertion error")}e.QrCode=t;var a=function(){function e(e,t,r){if(this.mode=e,this.numChars=t,this.bitData=r,0>t)throw new RangeError("Invalid argument");this.bitData=r.slice()}return e.makeBytes=function(t){for(var n=[],o=0,a=t;a.length>o;o++){r(a[o],8,n)}return new e(e.Mode.BYTE,t.length,n)},e.makeNumeric=function(t){if(!e.isNumeric(t))throw new RangeError("String contains non-numeric characters");for(var n=[],o=0;t.length>o;){var a=Math.min(t.length-o,3);r(parseInt(t.substring(o,o+a),10),3*a+1,n),o+=a}return new e(e.Mode.NUMERIC,t.length,n)},e.makeAlphanumeric=function(t){if(!e.isAlphanumeric(t))throw new RangeError("String contains unencodable characters in alphanumeric mode");var n,o=[];for(n=0;t.length>=n+2;n+=2){var a=45*e.ALPHANUMERIC_CHARSET.indexOf(t.charAt(n));r(a+=e.ALPHANUMERIC_CHARSET.indexOf(t.charAt(n+1)),11,o)}return t.length>n&&r(e.ALPHANUMERIC_CHARSET.indexOf(t.charAt(n)),6,o),new e(e.Mode.ALPHANUMERIC,t.length,o)},e.makeSegments=function(t){return""==t?[]:e.isNumeric(t)?[e.makeNumeric(t)]:e.isAlphanumeric(t)?[e.makeAlphanumeric(t)]:[e.makeBytes(e.toUtf8ByteArray(t))]},e.makeEci=function(t){var n=[];if(0>t)throw new RangeError("ECI assignment value out of range");if(128>t)r(t,8,n);else if(16384>t)r(2,2,n),r(t,14,n);else{if(t>=1e6)throw new RangeError("ECI assignment value out of range");r(6,3,n),r(t,21,n)}return new e(e.Mode.ECI,0,n)},e.isNumeric=function(t){return e.NUMERIC_REGEX.test(t)},e.isAlphanumeric=function(t){return e.ALPHANUMERIC_REGEX.test(t)},e.prototype.getData=function(){return this.bitData.slice()},e.getTotalBits=function(e,t){for(var r=0,n=0,o=e;o.length>n;n++){var a=o[n],i=a.mode.numCharCountBits(t);if(a.numChars>=1<<i)return 1/0;r+=4+i+a.bitData.length}return r},e.toUtf8ByteArray=function(e){e=encodeURI(e);for(var t=[],r=0;e.length>r;r++)"%"!=e.charAt(r)?t.push(e.charCodeAt(r)):(t.push(parseInt(e.substring(r+1,r+3),16)),r+=2);return t},e.NUMERIC_REGEX=/^[0-9]*$/,e.ALPHANUMERIC_REGEX=/^[A-Z0-9 $%*+.\/:-]*$/,e.ALPHANUMERIC_CHARSET="0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZ $%*+-./:",e}();e.QrSegment=a}(r||(r={})),function(e){var t,r;t=e.QrCode||(e.QrCode={}),r=function(){function e(e,t){this.ordinal=e,this.formatBits=t}return e.LOW=new e(0,1),e.MEDIUM=new e(1,0),e.QUARTILE=new e(2,3),e.HIGH=new e(3,2),e}(),t.Ecc=r}(r||(r={})),function(e){var t,r;t=e.QrSegment||(e.QrSegment={}),r=function(){function e(e,t){this.modeBits=e,this.numBitsCharCount=t}return e.prototype.numCharCountBits=function(e){return this.numBitsCharCount[Math.floor((e+7)/17)]},e.NUMERIC=new e(1,[10,12,14]),e.ALPHANUMERIC=new e(2,[9,11,13]),e.BYTE=new e(4,[8,16,16]),e.KANJI=new e(8,[8,10,12]),e.ECI=new e(7,[0,0,0]),e}(),t.Mode=r}(r||(r={}));var o=r,a=0;var i={L:o.QrCode.Ecc.LOW,M:o.QrCode.Ecc.MEDIUM,Q:o.QrCode.Ecc.QUARTILE,H:o.QrCode.Ecc.HIGH},u=function(){try{(new Path2D).addPath(new Path2D)}catch(e){return!1}return!0}();function s(e){return e in i}function l(e,t,r){var n=t>0&&e[t-1][r],o=e.length-1>t&&e[t+1][r],a=r>0&&e[t][r-1],i=e[t].length-1>r&&e[t][r+1];return{nw:!n&&!a,ne:!n&&!i,se:!o&&!i,sw:!o&&!a}}function c(e){var r=t.computed(function(){var t;return(null!==(t=e.margin)&&void 0!==t?t:0)>>>0}),n=t.computed(function(){var t=s(e.level)?e.level:"L";return o.QrCode.encodeText(e.value,i[t]).getModules()}),a=t.computed(function(){return n.value.length+2*r.value}),u=t.computed(function(){return e.radius>0?function(e,t,r){void 0===t&&(t=0),void 0===r&&(r=0);for(var n=[],o=Math.min(r,.5),a=0;e.length>a;a++)for(var i=0;e[a].length>i;i++)if(e[a][i]){var u=l(e,a,i),s=u.nw,c=u.ne,d=u.se,h=u.sw,f=i+t,v=a+t;n.push("M".concat(f+(s?o:0)," ").concat(v),"L".concat(f+1-(c?o:0)," ").concat(v)),c&&n.push("A".concat(o," ").concat(o," 0 0 1 ").concat(f+1," ").concat(v+o)),n.push("L".concat(f+1," ").concat(v+1-(d?o:0))),d&&n.push("A".concat(o," ").concat(o," 0 0 1 ").concat(f+1-o," ").concat(v+1)),n.push("L".concat(f+(h?o:0)," ").concat(v+1)),h&&n.push("A".concat(o," ").concat(o," 0 0 1 ").concat(f," ").concat(v+1-o)),n.push("L".concat(f," ").concat(v+(s?o:0))),s&&n.push("A".concat(o," ").concat(o," 0 0 1 ").concat(f+o," ").concat(v)),n.push("z")}return n.join("")}(n.value,r.value,e.radius):function(e,t){void 0===t&&(t=0);for(var r=[],n=0;e.length>n;n++)for(var o=e[n],a=null,i=0;o.length>i;i++){var u=o[i];if(u||null===a)if(i!==o.length-1)u&&null===a&&(a=i);else{if(!u)continue;r.push(null===a?"M".concat(i+t,",").concat(n+t," h1v1H").concat(i+t,"z"):"M".concat(a+t,",").concat(n+t," h").concat(i+1-a,"v1H").concat(a+t,"z"))}else r.push("M".concat(a+t," ").concat(n+t,"h").concat(i-a,"v1H").concat(a+t,"z")),a=null}return r.join("")}(n.value,r.value)}),c=t.computed(function(){if(!e.imageSettings.src)return null;var t=function(e,t,r,n){var o=n.width,a=n.height,i=n.x,u=n.y,s=e.length+2*r,l=Math.floor(.1*t),c=s/t,d=(o||l)*c,h=(a||l)*c;return{x:null==i?e.length/2-d/2:i*c,y:null==u?e.length/2-h/2:u*c,h:h,w:d,borderRadius:(n.borderRadius||0)*c}}(n.value,e.size,r.value,e.imageSettings);return{x:t.x+r.value,y:t.y+r.value,width:t.w,height:t.h,borderRadius:t.borderRadius}}),d=t.computed(function(){if(!e.imageSettings.excavate||!c.value)return null;var t=2/(e.size/a.value);return{x:c.value.x-t,y:c.value.y-t,width:c.value.width+2*t,height:c.value.height+2*t,borderRadius:c.value.borderRadius}});return{margin:r,numCells:a,cells:n,fgPath:u,imageProps:c,imageBorderProps:d}}var d={value:{type:String,required:!0,default:""},size:{type:Number,default:100},level:{type:String,default:"L",validator:function(e){return s(e)}},background:{type:String,default:"#fff"},foreground:{type:String,default:"#000"},margin:{type:Number,required:!1,default:0},imageSettings:{type:Object,required:!1,default:function(){return{}}},gradient:{type:Boolean,required:!1,default:!1},gradientType:{type:String,required:!1,default:"linear",validator:function(e){return["linear","radial"].indexOf(e)>-1}},gradientStartColor:{type:String,required:!1,default:"#000"},gradientEndColor:{type:String,required:!1,default:"#fff"},radius:{type:Number,required:!1,default:0,validator:function(e){return!isNaN(e)&&e>=0&&.5>=e}}},h=n(n({},d),{renderAs:{type:String,required:!1,default:"canvas",validator:function(e){return["canvas","svg"].indexOf(e)>-1}}}),f=t.defineComponent({name:"QRCodeSvg",props:d,setup:function(e){var r=c(e),o=r.numCells,i=r.fgPath,u=r.imageProps,s=r.imageBorderProps,l="function"==typeof t.useId?"".concat(t.useId(),"-").concat(a++):"vue-".concat(Math.random().toString(36).slice(2),"-").concat(a++),d="qrcode.vue-gradient-".concat(l),h="qrcode.vue-logo-clip-path-".concat(l),f=t.computed(function(){return e.gradient?t.h("linear"===e.gradientType?"linearGradient":"radialGradient",n({id:d},"linear"===e.gradientType?{x1:"0%",y1:"0%",x2:"100%",y2:"100%"}:{cx:"50%",cy:"50%",r:"50%",fx:"50%",fy:"50%"}),[t.h("stop",{offset:"0%",style:{stopColor:e.gradientStartColor}}),t.h("stop",{offset:"100%",style:{stopColor:e.gradientEndColor}})]):null}),v=t.computed(function(){if(!u.value)return null;var e=u.value.borderRadius;return e>0?t.h("clipPath",{id:h},[t.h("rect",{x:u.value.x,y:u.value.y,width:u.value.width,height:u.value.height,rx:e,ry:e})]):null});return function(){return t.h("svg",{width:e.size,height:e.size,xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 ".concat(o.value," ").concat(o.value),role:"img","aria-label":e.value},[t.h("defs",{},[f.value,v.value]),t.h("rect",{width:"100%",height:"100%",fill:e.background}),t.h("path",{fill:e.gradient?"url(#".concat(d,")"):e.foreground,d:i.value}),s.value&&t.h("rect",{x:s.value.x,y:s.value.y,width:s.value.width,height:s.value.height,fill:e.background,rx:s.value.borderRadius,ry:s.value.borderRadius}),e.imageSettings.src&&u.value&&t.h("image",n(n({href:e.imageSettings.src},u.value),u.value.borderRadius>0?{"clip-path":"url(#".concat(h,")")}:{}))])}}}),v=t.defineComponent({name:"QRCodeCanvas",props:d,setup:function(e,r){var o=c(e),a=o.margin,i=o.cells,s=o.numCells,l=o.fgPath,d=o.imageProps,h=o.imageBorderProps,f=t.ref(null),v=t.ref(null),g=function(e,t,r,n,o,a){e.beginPath(),e.roundRect?e.roundRect(t,r,n,o,a):e.rect(t,r,n,o)},p=function(){var t=e.size,r=e.background,n=e.foreground,o=e.gradient,c=e.gradientType,p=e.gradientStartColor,m=e.gradientEndColor,y=f.value;if(y){var w=y.getContext("2d");if(w){var E=v.value,C="undefined"!=typeof window&&window.devicePixelRatio||1,M=t/s.value*C;if(y.height=y.width=t*C,w.setTransform(M,0,0,M,0,0),w.fillStyle=r,w.fillRect(0,0,s.value,s.value),o){var R=void 0;(R="linear"===c?w.createLinearGradient(0,0,s.value,s.value):w.createRadialGradient(s.value/2,s.value/2,0,s.value/2,s.value/2,s.value/2)).addColorStop(0,p),R.addColorStop(1,m),w.fillStyle=R}else w.fillStyle=n;if(u?w.fill(new Path2D(l.value)):i.value.forEach(function(e,t){e.forEach(function(e,r){e&&w.fillRect(r+a.value,t+a.value,1,1)})}),e.imageSettings.src&&E&&0!==E.naturalWidth&&0!==E.naturalHeight&&d.value){if(h.value){var S=h.value;w.fillStyle=e.background,g(w,S.x,S.y,S.width,S.height,S.borderRadius),w.fill()}var A=d.value.borderRadius;A>0?(w.save(),g(w,d.value.x,d.value.y,d.value.width,d.value.height,A),w.clip(),w.drawImage(E,d.value.x,d.value.y,d.value.width,d.value.height),w.restore()):w.drawImage(E,d.value.x,d.value.y,d.value.width,d.value.height)}}}};return t.onMounted(p),t.watchEffect(p),function(){return t.h(t.Fragment,[t.h("canvas",n(n({},r.attrs),{ref:f,role:"img","aria-label":e.value,style:n(n({},r.attrs.style),{width:"".concat(e.size,"px"),height:"".concat(e.size,"px")})})),e.imageSettings.src&&t.h("img",{ref:v,src:e.imageSettings.src,style:{display:"none"},onLoad:p})])}}}),g=t.defineComponent({name:"Qrcode",props:h,setup:function(e){return function(){return t.h("svg"===e.renderAs?f:v,{value:e.value,size:e.size,margin:e.margin,level:e.level,background:e.background,foreground:e.foreground,imageSettings:e.imageSettings,gradient:e.gradient,gradientType:e.gradientType,gradientStartColor:e.gradientStartColor,gradientEndColor:e.gradientEndColor,radius:e.radius})}}});e.QrcodeCanvas=v,e.QrcodeSvg=f,e.default=g,Object.defineProperty(e,"__esModule",{value:!0})});
|
package/dist/qrcode.vue.cjs.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
/*!
|
|
2
|
-
* qrcode.vue v3.
|
|
2
|
+
* qrcode.vue v3.9.0
|
|
3
3
|
* A Vue.js component to generate QRCode. Both support Vue 2 and Vue 3
|
|
4
4
|
* © 2017-PRESENT @scopewu(https://github.com/scopewu)
|
|
5
5
|
* MIT License.
|
|
@@ -910,6 +910,12 @@ var qrcodegen;
|
|
|
910
910
|
var QR = qrcodegen;
|
|
911
911
|
|
|
912
912
|
var _uid = 0;
|
|
913
|
+
function getUid() {
|
|
914
|
+
if (typeof vue.useId === 'function') {
|
|
915
|
+
return "".concat(vue.useId(), "-").concat(_uid++);
|
|
916
|
+
}
|
|
917
|
+
return "vue-".concat(Math.random().toString(36).slice(2), "-").concat(_uid++);
|
|
918
|
+
}
|
|
913
919
|
var defaultErrorCorrectLevel = 'L';
|
|
914
920
|
var DEFAULT_QR_SIZE = 100;
|
|
915
921
|
var DEFAULT_MARGIN = 0;
|
|
@@ -934,6 +940,51 @@ var SUPPORTS_PATH2D = (function () {
|
|
|
934
940
|
function validErrorCorrectLevel(level) {
|
|
935
941
|
return level in ErrorCorrectLevelMap;
|
|
936
942
|
}
|
|
943
|
+
function getNeighborFlags(modules, row, col) {
|
|
944
|
+
var north = row > 0 ? modules[row - 1][col] : false;
|
|
945
|
+
var south = row < modules.length - 1 ? modules[row + 1][col] : false;
|
|
946
|
+
var west = col > 0 ? modules[row][col - 1] : false;
|
|
947
|
+
var east = col < modules[row].length - 1 ? modules[row][col + 1] : false;
|
|
948
|
+
return {
|
|
949
|
+
nw: !north && !west,
|
|
950
|
+
ne: !north && !east,
|
|
951
|
+
se: !south && !east,
|
|
952
|
+
sw: !south && !west,
|
|
953
|
+
};
|
|
954
|
+
}
|
|
955
|
+
function generateRoundedPath(modules, margin, radius) {
|
|
956
|
+
if (margin === void 0) { margin = 0; }
|
|
957
|
+
if (radius === void 0) { radius = 0; }
|
|
958
|
+
var pathSegments = [];
|
|
959
|
+
var r = Math.min(radius, 0.5);
|
|
960
|
+
for (var row = 0; row < modules.length; row++) {
|
|
961
|
+
for (var col = 0; col < modules[row].length; col++) {
|
|
962
|
+
if (!modules[row][col])
|
|
963
|
+
continue;
|
|
964
|
+
var _a = getNeighborFlags(modules, row, col), nw = _a.nw, ne = _a.ne, se = _a.se, sw = _a.sw;
|
|
965
|
+
var x = col + margin;
|
|
966
|
+
var y = row + margin;
|
|
967
|
+
pathSegments.push("M".concat(x + (nw ? r : 0), " ").concat(y), "L".concat(x + 1 - (ne ? r : 0), " ").concat(y));
|
|
968
|
+
if (ne) {
|
|
969
|
+
pathSegments.push("A".concat(r, " ").concat(r, " 0 0 1 ").concat(x + 1, " ").concat(y + r));
|
|
970
|
+
}
|
|
971
|
+
pathSegments.push("L".concat(x + 1, " ").concat(y + 1 - (se ? r : 0)));
|
|
972
|
+
if (se) {
|
|
973
|
+
pathSegments.push("A".concat(r, " ").concat(r, " 0 0 1 ").concat(x + 1 - r, " ").concat(y + 1));
|
|
974
|
+
}
|
|
975
|
+
pathSegments.push("L".concat(x + (sw ? r : 0), " ").concat(y + 1));
|
|
976
|
+
if (sw) {
|
|
977
|
+
pathSegments.push("A".concat(r, " ").concat(r, " 0 0 1 ").concat(x, " ").concat(y + 1 - r));
|
|
978
|
+
}
|
|
979
|
+
pathSegments.push("L".concat(x, " ").concat(y + (nw ? r : 0)));
|
|
980
|
+
if (nw) {
|
|
981
|
+
pathSegments.push("A".concat(r, " ").concat(r, " 0 0 1 ").concat(x + r, " ").concat(y));
|
|
982
|
+
}
|
|
983
|
+
pathSegments.push('z');
|
|
984
|
+
}
|
|
985
|
+
}
|
|
986
|
+
return pathSegments.join('');
|
|
987
|
+
}
|
|
937
988
|
function generatePath(modules, margin) {
|
|
938
989
|
if (margin === void 0) { margin = 0; }
|
|
939
990
|
var pathSegments = [];
|
|
@@ -982,15 +1033,7 @@ function getImageSettings(cells, size, margin, imageSettings) {
|
|
|
982
1033
|
var x = imageX == null ? cells.length / 2 - w / 2 : imageX * scale;
|
|
983
1034
|
var y = imageY == null ? cells.length / 2 - h / 2 : imageY * scale;
|
|
984
1035
|
var borderRadius = (imageSettings.borderRadius || 0) * scale;
|
|
985
|
-
|
|
986
|
-
if (imageSettings.excavate) {
|
|
987
|
-
var floorX = Math.floor(x);
|
|
988
|
-
var floorY = Math.floor(y);
|
|
989
|
-
var ceilW = Math.ceil(w + x - floorX);
|
|
990
|
-
var ceilH = Math.ceil(h + y - floorY);
|
|
991
|
-
excavation = { x: floorX, y: floorY, w: ceilW, h: ceilH };
|
|
992
|
-
}
|
|
993
|
-
return { x: x, y: y, h: h, w: w, borderRadius: borderRadius, excavation: excavation };
|
|
1036
|
+
return { x: x, y: y, h: h, w: w, borderRadius: borderRadius };
|
|
994
1037
|
}
|
|
995
1038
|
function useQRCode(props) {
|
|
996
1039
|
var margin = vue.computed(function () { var _a; return ((_a = props.margin) !== null && _a !== void 0 ? _a : DEFAULT_MARGIN) >>> 0; });
|
|
@@ -999,11 +1042,15 @@ function useQRCode(props) {
|
|
|
999
1042
|
return QR.QrCode.encodeText(props.value, ErrorCorrectLevelMap[level]).getModules();
|
|
1000
1043
|
});
|
|
1001
1044
|
var numCells = vue.computed(function () { return cells.value.length + margin.value * 2; });
|
|
1002
|
-
var fgPath = vue.computed(function () {
|
|
1003
|
-
|
|
1004
|
-
|
|
1005
|
-
return { x: 0, y: 0, width: 0, height: 0, borderRadius: 0 };
|
|
1045
|
+
var fgPath = vue.computed(function () {
|
|
1046
|
+
if (props.radius > 0) {
|
|
1047
|
+
return generateRoundedPath(cells.value, margin.value, props.radius);
|
|
1006
1048
|
}
|
|
1049
|
+
return generatePath(cells.value, margin.value);
|
|
1050
|
+
});
|
|
1051
|
+
var imageProps = vue.computed(function () {
|
|
1052
|
+
if (!props.imageSettings.src)
|
|
1053
|
+
return null;
|
|
1007
1054
|
var settings = getImageSettings(cells.value, props.size, margin.value, props.imageSettings);
|
|
1008
1055
|
return {
|
|
1009
1056
|
x: settings.x + margin.value,
|
|
@@ -1014,7 +1061,7 @@ function useQRCode(props) {
|
|
|
1014
1061
|
};
|
|
1015
1062
|
});
|
|
1016
1063
|
var imageBorderProps = vue.computed(function () {
|
|
1017
|
-
if (!props.imageSettings.excavate || !
|
|
1064
|
+
if (!props.imageSettings.excavate || !imageProps.value)
|
|
1018
1065
|
return null;
|
|
1019
1066
|
var borderThickness = IMAGE_EXCAVATE_THICKNESS / (props.size / numCells.value);
|
|
1020
1067
|
return {
|
|
@@ -1081,6 +1128,12 @@ var QRCodeProps = {
|
|
|
1081
1128
|
required: false,
|
|
1082
1129
|
default: '#fff',
|
|
1083
1130
|
},
|
|
1131
|
+
radius: {
|
|
1132
|
+
type: Number,
|
|
1133
|
+
required: false,
|
|
1134
|
+
default: 0,
|
|
1135
|
+
validator: function (r) { return !isNaN(r) && r >= 0 && r <= 0.5; },
|
|
1136
|
+
},
|
|
1084
1137
|
};
|
|
1085
1138
|
var QRCodeVueProps = __assign(__assign({}, QRCodeProps), { renderAs: {
|
|
1086
1139
|
type: String,
|
|
@@ -1093,10 +1146,10 @@ var QrcodeSvg = vue.defineComponent({
|
|
|
1093
1146
|
props: QRCodeProps,
|
|
1094
1147
|
setup: function (props) {
|
|
1095
1148
|
var _a = useQRCode(props), numCells = _a.numCells, fgPath = _a.fgPath, imageProps = _a.imageProps, imageBorderProps = _a.imageBorderProps;
|
|
1096
|
-
var uid =
|
|
1149
|
+
var uid = getUid();
|
|
1097
1150
|
var qrGradientId = "qrcode.vue-gradient-".concat(uid);
|
|
1098
1151
|
var qrLogoClipPathId = "qrcode.vue-logo-clip-path-".concat(uid);
|
|
1099
|
-
var
|
|
1152
|
+
var gradientVNode = vue.computed(function () {
|
|
1100
1153
|
if (!props.gradient)
|
|
1101
1154
|
return null;
|
|
1102
1155
|
var gradientProps = props.gradientType === 'linear'
|
|
@@ -1123,11 +1176,11 @@ var QrcodeSvg = vue.defineComponent({
|
|
|
1123
1176
|
style: { stopColor: props.gradientEndColor },
|
|
1124
1177
|
}),
|
|
1125
1178
|
]);
|
|
1126
|
-
};
|
|
1127
|
-
var
|
|
1128
|
-
|
|
1129
|
-
if (!props.imageSettings.src)
|
|
1179
|
+
});
|
|
1180
|
+
var clipPathVNode = vue.computed(function () {
|
|
1181
|
+
if (!imageProps.value)
|
|
1130
1182
|
return null;
|
|
1183
|
+
var borderRadius = imageProps.value.borderRadius;
|
|
1131
1184
|
if (borderRadius <= 0)
|
|
1132
1185
|
return null;
|
|
1133
1186
|
return vue.h('clipPath', { id: qrLogoClipPathId }, [
|
|
@@ -1140,17 +1193,16 @@ var QrcodeSvg = vue.defineComponent({
|
|
|
1140
1193
|
ry: borderRadius,
|
|
1141
1194
|
}),
|
|
1142
1195
|
]);
|
|
1143
|
-
};
|
|
1196
|
+
});
|
|
1144
1197
|
return function () { return vue.h('svg', {
|
|
1145
1198
|
width: props.size,
|
|
1146
1199
|
height: props.size,
|
|
1147
|
-
'shape-rendering': "crispEdges",
|
|
1148
1200
|
xmlns: 'http://www.w3.org/2000/svg',
|
|
1149
1201
|
viewBox: "0 0 ".concat(numCells.value, " ").concat(numCells.value),
|
|
1150
1202
|
role: 'img',
|
|
1151
1203
|
'aria-label': props.value,
|
|
1152
1204
|
}, [
|
|
1153
|
-
vue.h('defs', {}, [
|
|
1205
|
+
vue.h('defs', {}, [gradientVNode.value, clipPathVNode.value]),
|
|
1154
1206
|
vue.h('rect', {
|
|
1155
1207
|
width: '100%',
|
|
1156
1208
|
height: '100%',
|
|
@@ -1169,7 +1221,7 @@ var QrcodeSvg = vue.defineComponent({
|
|
|
1169
1221
|
rx: imageBorderProps.value.borderRadius,
|
|
1170
1222
|
ry: imageBorderProps.value.borderRadius,
|
|
1171
1223
|
}),
|
|
1172
|
-
props.imageSettings.src && vue.h('image', __assign(__assign({ href: props.imageSettings.src }, imageProps.value), (imageProps.value.borderRadius > 0 ? { 'clip-path': "url(#".concat(qrLogoClipPathId, ")") } : {}))),
|
|
1224
|
+
props.imageSettings.src && imageProps.value && vue.h('image', __assign(__assign({ href: props.imageSettings.src }, imageProps.value), (imageProps.value.borderRadius > 0 ? { 'clip-path': "url(#".concat(qrLogoClipPathId, ")") } : {}))),
|
|
1173
1225
|
]); };
|
|
1174
1226
|
},
|
|
1175
1227
|
});
|
|
@@ -1179,7 +1231,7 @@ var QrcodeCanvas = vue.defineComponent({
|
|
|
1179
1231
|
setup: function (props, ctx) {
|
|
1180
1232
|
var _a = useQRCode(props), margin = _a.margin, cells = _a.cells, numCells = _a.numCells, fgPath = _a.fgPath, imageProps = _a.imageProps, imageBorderProps = _a.imageBorderProps;
|
|
1181
1233
|
var canvasEl = vue.ref(null);
|
|
1182
|
-
var
|
|
1234
|
+
var imageEl = vue.ref(null);
|
|
1183
1235
|
var drawRoundedRect = function (ctx, x, y, width, height, radius) {
|
|
1184
1236
|
ctx.beginPath();
|
|
1185
1237
|
if (ctx.roundRect) {
|
|
@@ -1199,11 +1251,11 @@ var QrcodeCanvas = vue.defineComponent({
|
|
|
1199
1251
|
if (!canvasCtx) {
|
|
1200
1252
|
return;
|
|
1201
1253
|
}
|
|
1202
|
-
var image =
|
|
1254
|
+
var image = imageEl.value;
|
|
1203
1255
|
var devicePixelRatio = typeof window !== 'undefined' ? window.devicePixelRatio || 1 : 1;
|
|
1204
1256
|
var scale = (size / numCells.value) * devicePixelRatio;
|
|
1205
1257
|
canvas.height = canvas.width = size * devicePixelRatio;
|
|
1206
|
-
canvasCtx.
|
|
1258
|
+
canvasCtx.setTransform(scale, 0, 0, scale, 0, 0);
|
|
1207
1259
|
canvasCtx.fillStyle = background;
|
|
1208
1260
|
canvasCtx.fillRect(0, 0, numCells.value, numCells.value);
|
|
1209
1261
|
if (gradient) {
|
|
@@ -1234,7 +1286,7 @@ var QrcodeCanvas = vue.defineComponent({
|
|
|
1234
1286
|
});
|
|
1235
1287
|
}
|
|
1236
1288
|
var showImage = props.imageSettings.src && image && image.naturalWidth !== 0 && image.naturalHeight !== 0;
|
|
1237
|
-
if (showImage) {
|
|
1289
|
+
if (showImage && imageProps.value) {
|
|
1238
1290
|
if (imageBorderProps.value) {
|
|
1239
1291
|
var imageBorder = imageBorderProps.value;
|
|
1240
1292
|
canvasCtx.fillStyle = props.background;
|
|
@@ -1256,11 +1308,10 @@ var QrcodeCanvas = vue.defineComponent({
|
|
|
1256
1308
|
};
|
|
1257
1309
|
vue.onMounted(generate);
|
|
1258
1310
|
vue.watchEffect(generate);
|
|
1259
|
-
var style = ctx.attrs.style;
|
|
1260
1311
|
return function () { return vue.h(vue.Fragment, [
|
|
1261
|
-
vue.h('canvas', __assign(__assign({}, ctx.attrs), { ref: canvasEl, role: 'img', 'aria-label': props.value, style: __assign(__assign({}, style), { width: "".concat(props.size, "px"), height: "".concat(props.size, "px") }) })),
|
|
1312
|
+
vue.h('canvas', __assign(__assign({}, ctx.attrs), { ref: canvasEl, role: 'img', 'aria-label': props.value, style: __assign(__assign({}, ctx.attrs.style), { width: "".concat(props.size, "px"), height: "".concat(props.size, "px") }) })),
|
|
1262
1313
|
props.imageSettings.src && vue.h('img', {
|
|
1263
|
-
ref:
|
|
1314
|
+
ref: imageEl,
|
|
1264
1315
|
src: props.imageSettings.src,
|
|
1265
1316
|
style: { display: 'none' },
|
|
1266
1317
|
onLoad: generate,
|
|
@@ -1284,6 +1335,7 @@ var QrcodeVue = vue.defineComponent({
|
|
|
1284
1335
|
gradientType: props.gradientType,
|
|
1285
1336
|
gradientStartColor: props.gradientStartColor,
|
|
1286
1337
|
gradientEndColor: props.gradientEndColor,
|
|
1338
|
+
radius: props.radius,
|
|
1287
1339
|
}); };
|
|
1288
1340
|
},
|
|
1289
1341
|
});
|
package/dist/qrcode.vue.esm.js
CHANGED
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
/*!
|
|
2
|
-
* qrcode.vue v3.
|
|
2
|
+
* qrcode.vue v3.9.0
|
|
3
3
|
* A Vue.js component to generate QRCode. Both support Vue 2 and Vue 3
|
|
4
4
|
* © 2017-PRESENT @scopewu(https://github.com/scopewu)
|
|
5
5
|
* MIT License.
|
|
6
6
|
*/
|
|
7
|
-
import { defineComponent, h, ref, onMounted, watchEffect, Fragment,
|
|
7
|
+
import { defineComponent, computed, h, ref, onMounted, watchEffect, Fragment, useId } from 'vue';
|
|
8
8
|
|
|
9
9
|
/******************************************************************************
|
|
10
10
|
Copyright (c) Microsoft Corporation.
|
|
@@ -906,6 +906,12 @@ var qrcodegen;
|
|
|
906
906
|
var QR = qrcodegen;
|
|
907
907
|
|
|
908
908
|
var _uid = 0;
|
|
909
|
+
function getUid() {
|
|
910
|
+
if (typeof useId === 'function') {
|
|
911
|
+
return "".concat(useId(), "-").concat(_uid++);
|
|
912
|
+
}
|
|
913
|
+
return "vue-".concat(Math.random().toString(36).slice(2), "-").concat(_uid++);
|
|
914
|
+
}
|
|
909
915
|
var defaultErrorCorrectLevel = 'L';
|
|
910
916
|
var DEFAULT_QR_SIZE = 100;
|
|
911
917
|
var DEFAULT_MARGIN = 0;
|
|
@@ -930,6 +936,51 @@ var SUPPORTS_PATH2D = (function () {
|
|
|
930
936
|
function validErrorCorrectLevel(level) {
|
|
931
937
|
return level in ErrorCorrectLevelMap;
|
|
932
938
|
}
|
|
939
|
+
function getNeighborFlags(modules, row, col) {
|
|
940
|
+
var north = row > 0 ? modules[row - 1][col] : false;
|
|
941
|
+
var south = row < modules.length - 1 ? modules[row + 1][col] : false;
|
|
942
|
+
var west = col > 0 ? modules[row][col - 1] : false;
|
|
943
|
+
var east = col < modules[row].length - 1 ? modules[row][col + 1] : false;
|
|
944
|
+
return {
|
|
945
|
+
nw: !north && !west,
|
|
946
|
+
ne: !north && !east,
|
|
947
|
+
se: !south && !east,
|
|
948
|
+
sw: !south && !west,
|
|
949
|
+
};
|
|
950
|
+
}
|
|
951
|
+
function generateRoundedPath(modules, margin, radius) {
|
|
952
|
+
if (margin === void 0) { margin = 0; }
|
|
953
|
+
if (radius === void 0) { radius = 0; }
|
|
954
|
+
var pathSegments = [];
|
|
955
|
+
var r = Math.min(radius, 0.5);
|
|
956
|
+
for (var row = 0; row < modules.length; row++) {
|
|
957
|
+
for (var col = 0; col < modules[row].length; col++) {
|
|
958
|
+
if (!modules[row][col])
|
|
959
|
+
continue;
|
|
960
|
+
var _a = getNeighborFlags(modules, row, col), nw = _a.nw, ne = _a.ne, se = _a.se, sw = _a.sw;
|
|
961
|
+
var x = col + margin;
|
|
962
|
+
var y = row + margin;
|
|
963
|
+
pathSegments.push("M".concat(x + (nw ? r : 0), " ").concat(y), "L".concat(x + 1 - (ne ? r : 0), " ").concat(y));
|
|
964
|
+
if (ne) {
|
|
965
|
+
pathSegments.push("A".concat(r, " ").concat(r, " 0 0 1 ").concat(x + 1, " ").concat(y + r));
|
|
966
|
+
}
|
|
967
|
+
pathSegments.push("L".concat(x + 1, " ").concat(y + 1 - (se ? r : 0)));
|
|
968
|
+
if (se) {
|
|
969
|
+
pathSegments.push("A".concat(r, " ").concat(r, " 0 0 1 ").concat(x + 1 - r, " ").concat(y + 1));
|
|
970
|
+
}
|
|
971
|
+
pathSegments.push("L".concat(x + (sw ? r : 0), " ").concat(y + 1));
|
|
972
|
+
if (sw) {
|
|
973
|
+
pathSegments.push("A".concat(r, " ").concat(r, " 0 0 1 ").concat(x, " ").concat(y + 1 - r));
|
|
974
|
+
}
|
|
975
|
+
pathSegments.push("L".concat(x, " ").concat(y + (nw ? r : 0)));
|
|
976
|
+
if (nw) {
|
|
977
|
+
pathSegments.push("A".concat(r, " ").concat(r, " 0 0 1 ").concat(x + r, " ").concat(y));
|
|
978
|
+
}
|
|
979
|
+
pathSegments.push('z');
|
|
980
|
+
}
|
|
981
|
+
}
|
|
982
|
+
return pathSegments.join('');
|
|
983
|
+
}
|
|
933
984
|
function generatePath(modules, margin) {
|
|
934
985
|
if (margin === void 0) { margin = 0; }
|
|
935
986
|
var pathSegments = [];
|
|
@@ -978,15 +1029,7 @@ function getImageSettings(cells, size, margin, imageSettings) {
|
|
|
978
1029
|
var x = imageX == null ? cells.length / 2 - w / 2 : imageX * scale;
|
|
979
1030
|
var y = imageY == null ? cells.length / 2 - h / 2 : imageY * scale;
|
|
980
1031
|
var borderRadius = (imageSettings.borderRadius || 0) * scale;
|
|
981
|
-
|
|
982
|
-
if (imageSettings.excavate) {
|
|
983
|
-
var floorX = Math.floor(x);
|
|
984
|
-
var floorY = Math.floor(y);
|
|
985
|
-
var ceilW = Math.ceil(w + x - floorX);
|
|
986
|
-
var ceilH = Math.ceil(h + y - floorY);
|
|
987
|
-
excavation = { x: floorX, y: floorY, w: ceilW, h: ceilH };
|
|
988
|
-
}
|
|
989
|
-
return { x: x, y: y, h: h, w: w, borderRadius: borderRadius, excavation: excavation };
|
|
1032
|
+
return { x: x, y: y, h: h, w: w, borderRadius: borderRadius };
|
|
990
1033
|
}
|
|
991
1034
|
function useQRCode(props) {
|
|
992
1035
|
var margin = computed(function () { var _a; return ((_a = props.margin) !== null && _a !== void 0 ? _a : DEFAULT_MARGIN) >>> 0; });
|
|
@@ -995,11 +1038,15 @@ function useQRCode(props) {
|
|
|
995
1038
|
return QR.QrCode.encodeText(props.value, ErrorCorrectLevelMap[level]).getModules();
|
|
996
1039
|
});
|
|
997
1040
|
var numCells = computed(function () { return cells.value.length + margin.value * 2; });
|
|
998
|
-
var fgPath = computed(function () {
|
|
999
|
-
|
|
1000
|
-
|
|
1001
|
-
return { x: 0, y: 0, width: 0, height: 0, borderRadius: 0 };
|
|
1041
|
+
var fgPath = computed(function () {
|
|
1042
|
+
if (props.radius > 0) {
|
|
1043
|
+
return generateRoundedPath(cells.value, margin.value, props.radius);
|
|
1002
1044
|
}
|
|
1045
|
+
return generatePath(cells.value, margin.value);
|
|
1046
|
+
});
|
|
1047
|
+
var imageProps = computed(function () {
|
|
1048
|
+
if (!props.imageSettings.src)
|
|
1049
|
+
return null;
|
|
1003
1050
|
var settings = getImageSettings(cells.value, props.size, margin.value, props.imageSettings);
|
|
1004
1051
|
return {
|
|
1005
1052
|
x: settings.x + margin.value,
|
|
@@ -1010,7 +1057,7 @@ function useQRCode(props) {
|
|
|
1010
1057
|
};
|
|
1011
1058
|
});
|
|
1012
1059
|
var imageBorderProps = computed(function () {
|
|
1013
|
-
if (!props.imageSettings.excavate || !
|
|
1060
|
+
if (!props.imageSettings.excavate || !imageProps.value)
|
|
1014
1061
|
return null;
|
|
1015
1062
|
var borderThickness = IMAGE_EXCAVATE_THICKNESS / (props.size / numCells.value);
|
|
1016
1063
|
return {
|
|
@@ -1077,6 +1124,12 @@ var QRCodeProps = {
|
|
|
1077
1124
|
required: false,
|
|
1078
1125
|
default: '#fff',
|
|
1079
1126
|
},
|
|
1127
|
+
radius: {
|
|
1128
|
+
type: Number,
|
|
1129
|
+
required: false,
|
|
1130
|
+
default: 0,
|
|
1131
|
+
validator: function (r) { return !isNaN(r) && r >= 0 && r <= 0.5; },
|
|
1132
|
+
},
|
|
1080
1133
|
};
|
|
1081
1134
|
var QRCodeVueProps = __assign(__assign({}, QRCodeProps), { renderAs: {
|
|
1082
1135
|
type: String,
|
|
@@ -1089,10 +1142,10 @@ var QrcodeSvg = defineComponent({
|
|
|
1089
1142
|
props: QRCodeProps,
|
|
1090
1143
|
setup: function (props) {
|
|
1091
1144
|
var _a = useQRCode(props), numCells = _a.numCells, fgPath = _a.fgPath, imageProps = _a.imageProps, imageBorderProps = _a.imageBorderProps;
|
|
1092
|
-
var uid =
|
|
1145
|
+
var uid = getUid();
|
|
1093
1146
|
var qrGradientId = "qrcode.vue-gradient-".concat(uid);
|
|
1094
1147
|
var qrLogoClipPathId = "qrcode.vue-logo-clip-path-".concat(uid);
|
|
1095
|
-
var
|
|
1148
|
+
var gradientVNode = computed(function () {
|
|
1096
1149
|
if (!props.gradient)
|
|
1097
1150
|
return null;
|
|
1098
1151
|
var gradientProps = props.gradientType === 'linear'
|
|
@@ -1119,11 +1172,11 @@ var QrcodeSvg = defineComponent({
|
|
|
1119
1172
|
style: { stopColor: props.gradientEndColor },
|
|
1120
1173
|
}),
|
|
1121
1174
|
]);
|
|
1122
|
-
};
|
|
1123
|
-
var
|
|
1124
|
-
|
|
1125
|
-
if (!props.imageSettings.src)
|
|
1175
|
+
});
|
|
1176
|
+
var clipPathVNode = computed(function () {
|
|
1177
|
+
if (!imageProps.value)
|
|
1126
1178
|
return null;
|
|
1179
|
+
var borderRadius = imageProps.value.borderRadius;
|
|
1127
1180
|
if (borderRadius <= 0)
|
|
1128
1181
|
return null;
|
|
1129
1182
|
return h('clipPath', { id: qrLogoClipPathId }, [
|
|
@@ -1136,17 +1189,16 @@ var QrcodeSvg = defineComponent({
|
|
|
1136
1189
|
ry: borderRadius,
|
|
1137
1190
|
}),
|
|
1138
1191
|
]);
|
|
1139
|
-
};
|
|
1192
|
+
});
|
|
1140
1193
|
return function () { return h('svg', {
|
|
1141
1194
|
width: props.size,
|
|
1142
1195
|
height: props.size,
|
|
1143
|
-
'shape-rendering': "crispEdges",
|
|
1144
1196
|
xmlns: 'http://www.w3.org/2000/svg',
|
|
1145
1197
|
viewBox: "0 0 ".concat(numCells.value, " ").concat(numCells.value),
|
|
1146
1198
|
role: 'img',
|
|
1147
1199
|
'aria-label': props.value,
|
|
1148
1200
|
}, [
|
|
1149
|
-
h('defs', {}, [
|
|
1201
|
+
h('defs', {}, [gradientVNode.value, clipPathVNode.value]),
|
|
1150
1202
|
h('rect', {
|
|
1151
1203
|
width: '100%',
|
|
1152
1204
|
height: '100%',
|
|
@@ -1165,7 +1217,7 @@ var QrcodeSvg = defineComponent({
|
|
|
1165
1217
|
rx: imageBorderProps.value.borderRadius,
|
|
1166
1218
|
ry: imageBorderProps.value.borderRadius,
|
|
1167
1219
|
}),
|
|
1168
|
-
props.imageSettings.src && h('image', __assign(__assign({ href: props.imageSettings.src }, imageProps.value), (imageProps.value.borderRadius > 0 ? { 'clip-path': "url(#".concat(qrLogoClipPathId, ")") } : {}))),
|
|
1220
|
+
props.imageSettings.src && imageProps.value && h('image', __assign(__assign({ href: props.imageSettings.src }, imageProps.value), (imageProps.value.borderRadius > 0 ? { 'clip-path': "url(#".concat(qrLogoClipPathId, ")") } : {}))),
|
|
1169
1221
|
]); };
|
|
1170
1222
|
},
|
|
1171
1223
|
});
|
|
@@ -1175,7 +1227,7 @@ var QrcodeCanvas = defineComponent({
|
|
|
1175
1227
|
setup: function (props, ctx) {
|
|
1176
1228
|
var _a = useQRCode(props), margin = _a.margin, cells = _a.cells, numCells = _a.numCells, fgPath = _a.fgPath, imageProps = _a.imageProps, imageBorderProps = _a.imageBorderProps;
|
|
1177
1229
|
var canvasEl = ref(null);
|
|
1178
|
-
var
|
|
1230
|
+
var imageEl = ref(null);
|
|
1179
1231
|
var drawRoundedRect = function (ctx, x, y, width, height, radius) {
|
|
1180
1232
|
ctx.beginPath();
|
|
1181
1233
|
if (ctx.roundRect) {
|
|
@@ -1195,11 +1247,11 @@ var QrcodeCanvas = defineComponent({
|
|
|
1195
1247
|
if (!canvasCtx) {
|
|
1196
1248
|
return;
|
|
1197
1249
|
}
|
|
1198
|
-
var image =
|
|
1250
|
+
var image = imageEl.value;
|
|
1199
1251
|
var devicePixelRatio = typeof window !== 'undefined' ? window.devicePixelRatio || 1 : 1;
|
|
1200
1252
|
var scale = (size / numCells.value) * devicePixelRatio;
|
|
1201
1253
|
canvas.height = canvas.width = size * devicePixelRatio;
|
|
1202
|
-
canvasCtx.
|
|
1254
|
+
canvasCtx.setTransform(scale, 0, 0, scale, 0, 0);
|
|
1203
1255
|
canvasCtx.fillStyle = background;
|
|
1204
1256
|
canvasCtx.fillRect(0, 0, numCells.value, numCells.value);
|
|
1205
1257
|
if (gradient) {
|
|
@@ -1230,7 +1282,7 @@ var QrcodeCanvas = defineComponent({
|
|
|
1230
1282
|
});
|
|
1231
1283
|
}
|
|
1232
1284
|
var showImage = props.imageSettings.src && image && image.naturalWidth !== 0 && image.naturalHeight !== 0;
|
|
1233
|
-
if (showImage) {
|
|
1285
|
+
if (showImage && imageProps.value) {
|
|
1234
1286
|
if (imageBorderProps.value) {
|
|
1235
1287
|
var imageBorder = imageBorderProps.value;
|
|
1236
1288
|
canvasCtx.fillStyle = props.background;
|
|
@@ -1252,11 +1304,10 @@ var QrcodeCanvas = defineComponent({
|
|
|
1252
1304
|
};
|
|
1253
1305
|
onMounted(generate);
|
|
1254
1306
|
watchEffect(generate);
|
|
1255
|
-
var style = ctx.attrs.style;
|
|
1256
1307
|
return function () { return h(Fragment, [
|
|
1257
|
-
h('canvas', __assign(__assign({}, ctx.attrs), { ref: canvasEl, role: 'img', 'aria-label': props.value, style: __assign(__assign({}, style), { width: "".concat(props.size, "px"), height: "".concat(props.size, "px") }) })),
|
|
1308
|
+
h('canvas', __assign(__assign({}, ctx.attrs), { ref: canvasEl, role: 'img', 'aria-label': props.value, style: __assign(__assign({}, ctx.attrs.style), { width: "".concat(props.size, "px"), height: "".concat(props.size, "px") }) })),
|
|
1258
1309
|
props.imageSettings.src && h('img', {
|
|
1259
|
-
ref:
|
|
1310
|
+
ref: imageEl,
|
|
1260
1311
|
src: props.imageSettings.src,
|
|
1261
1312
|
style: { display: 'none' },
|
|
1262
1313
|
onLoad: generate,
|
|
@@ -1280,6 +1331,7 @@ var QrcodeVue = defineComponent({
|
|
|
1280
1331
|
gradientType: props.gradientType,
|
|
1281
1332
|
gradientStartColor: props.gradientStartColor,
|
|
1282
1333
|
gradientEndColor: props.gradientEndColor,
|
|
1334
|
+
radius: props.radius,
|
|
1283
1335
|
}); };
|
|
1284
1336
|
},
|
|
1285
1337
|
});
|
package/dist/src/index.d.ts
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { PropType } from 'vue';
|
|
1
|
+
import { ExtractPropTypes, PropType } from 'vue';
|
|
2
2
|
export type Level = 'L' | 'M' | 'Q' | 'H';
|
|
3
3
|
export type RenderAs = 'canvas' | 'svg';
|
|
4
4
|
export type GradientType = 'linear' | 'radial';
|
|
@@ -6,12 +6,12 @@ export type ImageSettings = {
|
|
|
6
6
|
src: string;
|
|
7
7
|
x?: number;
|
|
8
8
|
y?: number;
|
|
9
|
-
height
|
|
10
|
-
width
|
|
9
|
+
height?: number;
|
|
10
|
+
width?: number;
|
|
11
11
|
excavate?: boolean;
|
|
12
12
|
borderRadius?: number;
|
|
13
13
|
};
|
|
14
|
-
export declare const QrcodeSvg: import("vue").DefineComponent<
|
|
14
|
+
export declare const QrcodeSvg: import("vue").DefineComponent<ExtractPropTypes<{
|
|
15
15
|
value: {
|
|
16
16
|
type: StringConstructor;
|
|
17
17
|
required: boolean;
|
|
@@ -65,9 +65,15 @@ export declare const QrcodeSvg: import("vue").DefineComponent<import("vue").Extr
|
|
|
65
65
|
required: boolean;
|
|
66
66
|
default: string;
|
|
67
67
|
};
|
|
68
|
+
radius: {
|
|
69
|
+
type: NumberConstructor;
|
|
70
|
+
required: boolean;
|
|
71
|
+
default: number;
|
|
72
|
+
validator: (r: any) => boolean;
|
|
73
|
+
};
|
|
68
74
|
}>, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
|
69
75
|
[key: string]: any;
|
|
70
|
-
}>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<
|
|
76
|
+
}>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ExtractPropTypes<{
|
|
71
77
|
value: {
|
|
72
78
|
type: StringConstructor;
|
|
73
79
|
required: boolean;
|
|
@@ -121,6 +127,12 @@ export declare const QrcodeSvg: import("vue").DefineComponent<import("vue").Extr
|
|
|
121
127
|
required: boolean;
|
|
122
128
|
default: string;
|
|
123
129
|
};
|
|
130
|
+
radius: {
|
|
131
|
+
type: NumberConstructor;
|
|
132
|
+
required: boolean;
|
|
133
|
+
default: number;
|
|
134
|
+
validator: (r: any) => boolean;
|
|
135
|
+
};
|
|
124
136
|
}>> & Readonly<{}>, {
|
|
125
137
|
value: string;
|
|
126
138
|
size: number;
|
|
@@ -133,8 +145,9 @@ export declare const QrcodeSvg: import("vue").DefineComponent<import("vue").Extr
|
|
|
133
145
|
gradientType: GradientType;
|
|
134
146
|
gradientStartColor: string;
|
|
135
147
|
gradientEndColor: string;
|
|
148
|
+
radius: number;
|
|
136
149
|
}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
|
|
137
|
-
export declare const QrcodeCanvas: import("vue").DefineComponent<
|
|
150
|
+
export declare const QrcodeCanvas: import("vue").DefineComponent<ExtractPropTypes<{
|
|
138
151
|
value: {
|
|
139
152
|
type: StringConstructor;
|
|
140
153
|
required: boolean;
|
|
@@ -188,9 +201,15 @@ export declare const QrcodeCanvas: import("vue").DefineComponent<import("vue").E
|
|
|
188
201
|
required: boolean;
|
|
189
202
|
default: string;
|
|
190
203
|
};
|
|
204
|
+
radius: {
|
|
205
|
+
type: NumberConstructor;
|
|
206
|
+
required: boolean;
|
|
207
|
+
default: number;
|
|
208
|
+
validator: (r: any) => boolean;
|
|
209
|
+
};
|
|
191
210
|
}>, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
|
192
211
|
[key: string]: any;
|
|
193
|
-
}>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<
|
|
212
|
+
}>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ExtractPropTypes<{
|
|
194
213
|
value: {
|
|
195
214
|
type: StringConstructor;
|
|
196
215
|
required: boolean;
|
|
@@ -244,6 +263,12 @@ export declare const QrcodeCanvas: import("vue").DefineComponent<import("vue").E
|
|
|
244
263
|
required: boolean;
|
|
245
264
|
default: string;
|
|
246
265
|
};
|
|
266
|
+
radius: {
|
|
267
|
+
type: NumberConstructor;
|
|
268
|
+
required: boolean;
|
|
269
|
+
default: number;
|
|
270
|
+
validator: (r: any) => boolean;
|
|
271
|
+
};
|
|
247
272
|
}>> & Readonly<{}>, {
|
|
248
273
|
value: string;
|
|
249
274
|
size: number;
|
|
@@ -256,8 +281,9 @@ export declare const QrcodeCanvas: import("vue").DefineComponent<import("vue").E
|
|
|
256
281
|
gradientType: GradientType;
|
|
257
282
|
gradientStartColor: string;
|
|
258
283
|
gradientEndColor: string;
|
|
284
|
+
radius: number;
|
|
259
285
|
}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
|
|
260
|
-
declare const QrcodeVue: import("vue").DefineComponent<
|
|
286
|
+
declare const QrcodeVue: import("vue").DefineComponent<ExtractPropTypes<{
|
|
261
287
|
renderAs: {
|
|
262
288
|
type: PropType<RenderAs>;
|
|
263
289
|
required: boolean;
|
|
@@ -317,9 +343,15 @@ declare const QrcodeVue: import("vue").DefineComponent<import("vue").ExtractProp
|
|
|
317
343
|
required: boolean;
|
|
318
344
|
default: string;
|
|
319
345
|
};
|
|
346
|
+
radius: {
|
|
347
|
+
type: NumberConstructor;
|
|
348
|
+
required: boolean;
|
|
349
|
+
default: number;
|
|
350
|
+
validator: (r: any) => boolean;
|
|
351
|
+
};
|
|
320
352
|
}>, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
|
321
353
|
[key: string]: any;
|
|
322
|
-
}>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<
|
|
354
|
+
}>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ExtractPropTypes<{
|
|
323
355
|
renderAs: {
|
|
324
356
|
type: PropType<RenderAs>;
|
|
325
357
|
required: boolean;
|
|
@@ -379,6 +411,12 @@ declare const QrcodeVue: import("vue").DefineComponent<import("vue").ExtractProp
|
|
|
379
411
|
required: boolean;
|
|
380
412
|
default: string;
|
|
381
413
|
};
|
|
414
|
+
radius: {
|
|
415
|
+
type: NumberConstructor;
|
|
416
|
+
required: boolean;
|
|
417
|
+
default: number;
|
|
418
|
+
validator: (r: any) => boolean;
|
|
419
|
+
};
|
|
382
420
|
}>> & Readonly<{}>, {
|
|
383
421
|
value: string;
|
|
384
422
|
size: number;
|
|
@@ -391,6 +429,7 @@ declare const QrcodeVue: import("vue").DefineComponent<import("vue").ExtractProp
|
|
|
391
429
|
gradientType: GradientType;
|
|
392
430
|
gradientStartColor: string;
|
|
393
431
|
gradientEndColor: string;
|
|
432
|
+
radius: number;
|
|
394
433
|
renderAs: RenderAs;
|
|
395
434
|
}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
|
|
396
435
|
export default QrcodeVue;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "qrcode.vue",
|
|
3
|
-
"version": "3.
|
|
3
|
+
"version": "3.9.0",
|
|
4
4
|
"description": "A Vue.js component to generate QRCode. Both support Vue 2 and Vue 3",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"main": "./dist/qrcode.vue.cjs.js",
|
|
@@ -50,11 +50,11 @@
|
|
|
50
50
|
"dependencies": {},
|
|
51
51
|
"devDependencies": {
|
|
52
52
|
"@rollup/plugin-terser": "^1.0.0",
|
|
53
|
-
"@rsbuild/core": "^2.0.
|
|
54
|
-
"@rstest/core": "^0.9.
|
|
53
|
+
"@rsbuild/core": "^2.0.1",
|
|
54
|
+
"@rstest/core": "^0.9.9",
|
|
55
55
|
"@vue/test-utils": "^2.4.6",
|
|
56
|
-
"happy-dom": "^20.
|
|
57
|
-
"rollup": "^4.60.
|
|
56
|
+
"happy-dom": "^20.9.0",
|
|
57
|
+
"rollup": "^4.60.2",
|
|
58
58
|
"rollup-plugin-typescript2": "^0.37.0",
|
|
59
59
|
"typescript": "^5.9.3",
|
|
60
60
|
"vue": "^3.5.29"
|