persagy-vant 0.0.51 → 0.0.52
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/THIRD_PARTY_NOTICES.txt +439 -0
- package/es/icon/assets/flashlight-off.svg +4 -0
- package/es/icon/assets/flashlight.svg +4 -0
- package/es/icon/config.mjs +1 -1
- package/es/icon/index.css +1 -1
- package/es/icon/latest-iconfont.css +1 -1
- package/es/icon/latest-iconfont.less +16 -1
- package/es/index.d.ts +2 -1
- package/es/index.mjs +4 -1
- package/es/location-select/LocationSelect.d.ts +15 -1
- package/es/location-select/LocationSelect.mjs +17 -5
- package/es/location-select/index.d.ts +11 -1
- package/es/object-select/ObjectSelect.d.ts +15 -1
- package/es/object-select/ObjectSelect.mjs +19 -7
- package/es/object-select/index.d.ts +11 -1
- package/es/qr-scanner/QrScanner.d.ts +226 -0
- package/es/qr-scanner/QrScanner.mjs +615 -0
- package/es/qr-scanner/decoder.d.ts +10 -0
- package/es/qr-scanner/decoder.mjs +101 -0
- package/es/qr-scanner/function-call.d.ts +164 -0
- package/es/qr-scanner/function-call.mjs +69 -0
- package/es/qr-scanner/index.css +1 -0
- package/es/qr-scanner/index.d.ts +10 -0
- package/es/qr-scanner/index.less +239 -0
- package/es/qr-scanner/index.mjs +6 -0
- package/es/qr-scanner/style/index.mjs +8 -0
- package/es/qr-scanner/style/less.mjs +8 -0
- package/es/qr-scanner/types.d.ts +54 -0
- package/es/qr-scanner/types.mjs +0 -0
- package/es/qr-scanner/var.css +0 -0
- package/es/qr-scanner/var.less +4 -0
- package/es/qr-scanner/wasm.d.ts +4 -0
- package/lib/decoder-8f5b00db.js +2215 -0
- package/lib/decoder-a36ba9ae.mjs +2215 -0
- package/lib/icon/assets/flashlight-off.svg +4 -0
- package/lib/icon/assets/flashlight.svg +4 -0
- package/lib/icon/config.js +1 -1
- package/lib/icon/index.css +1 -1
- package/lib/icon/latest-iconfont.css +1 -1
- package/lib/icon/latest-iconfont.less +16 -1
- package/lib/index.css +1 -1
- package/lib/index.d.ts +2 -1
- package/lib/index.js +4 -1
- package/lib/index.less +1 -0
- package/lib/location-select/LocationSelect.d.ts +15 -1
- package/lib/location-select/LocationSelect.js +16 -4
- package/lib/location-select/index.d.ts +11 -1
- package/lib/object-select/ObjectSelect.d.ts +15 -1
- package/lib/object-select/ObjectSelect.js +18 -6
- package/lib/object-select/index.d.ts +11 -1
- package/lib/qr-scanner/QrScanner.d.ts +226 -0
- package/lib/qr-scanner/QrScanner.js +644 -0
- package/lib/qr-scanner/decoder.d.ts +10 -0
- package/lib/qr-scanner/decoder.js +130 -0
- package/lib/qr-scanner/function-call.d.ts +164 -0
- package/lib/qr-scanner/function-call.js +98 -0
- package/lib/qr-scanner/index.css +1 -0
- package/lib/qr-scanner/index.d.ts +10 -0
- package/lib/qr-scanner/index.js +25 -0
- package/lib/qr-scanner/index.less +239 -0
- package/lib/qr-scanner/style/index.js +8 -0
- package/lib/qr-scanner/style/less.js +8 -0
- package/lib/qr-scanner/types.d.ts +54 -0
- package/lib/qr-scanner/types.js +15 -0
- package/lib/qr-scanner/var.css +0 -0
- package/lib/qr-scanner/var.less +4 -0
- package/lib/qr-scanner/wasm.d.ts +4 -0
- package/lib/vant.cjs.js +1805 -1114
- package/lib/vant.es.js +1805 -1114
- package/lib/vant.js +5251 -2339
- package/lib/vant.min.js +1 -1
- package/lib/web-types.json +1 -1
- package/lib/zxing_reader-075835e4.mjs +4 -0
- package/lib/zxing_reader-d6a2742e.js +4 -0
- package/package.json +6 -4
- package/skills/use-persagy-vant/references/component-catalog.md +1 -0
- package/skills/use-persagy-vant/references/component-documentation.md +4 -4
- package/skills/use-persagy-vant/references/component-variant-selection.md +2 -2
- package/skills/use-persagy-vant/references/reuse-policy.md +2 -2
|
@@ -0,0 +1,101 @@
|
|
|
1
|
+
var __async = (__this, __arguments, generator) => {
|
|
2
|
+
return new Promise((resolve, reject) => {
|
|
3
|
+
var fulfilled = (value) => {
|
|
4
|
+
try {
|
|
5
|
+
step(generator.next(value));
|
|
6
|
+
} catch (e) {
|
|
7
|
+
reject(e);
|
|
8
|
+
}
|
|
9
|
+
};
|
|
10
|
+
var rejected = (value) => {
|
|
11
|
+
try {
|
|
12
|
+
step(generator.throw(value));
|
|
13
|
+
} catch (e) {
|
|
14
|
+
reject(e);
|
|
15
|
+
}
|
|
16
|
+
};
|
|
17
|
+
var step = (x) => x.done ? resolve(x.value) : Promise.resolve(x.value).then(fulfilled, rejected);
|
|
18
|
+
step((generator = generator.apply(__this, __arguments)).next());
|
|
19
|
+
});
|
|
20
|
+
};
|
|
21
|
+
import { prepareZXingModule, readBarcodes } from "zxing-wasm/reader";
|
|
22
|
+
let ready;
|
|
23
|
+
let activeWasmUrl;
|
|
24
|
+
function prepareDecoder(wasmUrl) {
|
|
25
|
+
return __async(this, null, function* () {
|
|
26
|
+
const url = wasmUrl || (yield import("zxing-wasm/reader/zxing_reader.wasm?url")).default;
|
|
27
|
+
if (!ready || url !== activeWasmUrl) {
|
|
28
|
+
activeWasmUrl = url;
|
|
29
|
+
ready = Promise.resolve(
|
|
30
|
+
prepareZXingModule({
|
|
31
|
+
overrides: { locateFile: () => url },
|
|
32
|
+
fireImmediately: true
|
|
33
|
+
})
|
|
34
|
+
).catch((error) => {
|
|
35
|
+
ready = void 0;
|
|
36
|
+
throw error;
|
|
37
|
+
});
|
|
38
|
+
}
|
|
39
|
+
yield ready;
|
|
40
|
+
});
|
|
41
|
+
}
|
|
42
|
+
function decode(image, formats, wasmUrl) {
|
|
43
|
+
return __async(this, null, function* () {
|
|
44
|
+
yield prepareDecoder(wasmUrl);
|
|
45
|
+
const results = yield readBarcodes(image, {
|
|
46
|
+
formats: formats.length ? formats : ["QRCode"],
|
|
47
|
+
tryHarder: true,
|
|
48
|
+
maxNumberOfSymbols: 1
|
|
49
|
+
});
|
|
50
|
+
return results.find((result) => result.isValid && result.text.length > 0);
|
|
51
|
+
});
|
|
52
|
+
}
|
|
53
|
+
function loadImage(file) {
|
|
54
|
+
return new Promise((resolve, reject) => {
|
|
55
|
+
const url = URL.createObjectURL(file);
|
|
56
|
+
const image = new Image();
|
|
57
|
+
image.onload = () => {
|
|
58
|
+
URL.revokeObjectURL(url);
|
|
59
|
+
resolve(image);
|
|
60
|
+
};
|
|
61
|
+
image.onerror = () => {
|
|
62
|
+
URL.revokeObjectURL(url);
|
|
63
|
+
reject(new Error("\u65E0\u6CD5\u8BFB\u53D6\u56FE\u7247\uFF0C\u8BF7\u9009\u62E9 JPG\u3001PNG \u7B49\u6D4F\u89C8\u5668\u652F\u6301\u7684\u56FE\u7247"));
|
|
64
|
+
};
|
|
65
|
+
image.src = url;
|
|
66
|
+
});
|
|
67
|
+
}
|
|
68
|
+
function captureImage(source, canvas, maxSize, region) {
|
|
69
|
+
const width = source instanceof HTMLVideoElement ? source.videoWidth : source.naturalWidth;
|
|
70
|
+
const height = source instanceof HTMLVideoElement ? source.videoHeight : source.naturalHeight;
|
|
71
|
+
if (!width || !height)
|
|
72
|
+
return;
|
|
73
|
+
const crop = region || { x: 0, y: 0, width, height };
|
|
74
|
+
const scale = Math.min(
|
|
75
|
+
1,
|
|
76
|
+
(maxSize || 1280) / Math.max(crop.width, crop.height)
|
|
77
|
+
);
|
|
78
|
+
canvas.width = Math.max(1, Math.round(crop.width * scale));
|
|
79
|
+
canvas.height = Math.max(1, Math.round(crop.height * scale));
|
|
80
|
+
const context = canvas.getContext("2d", { willReadFrequently: true });
|
|
81
|
+
if (!context)
|
|
82
|
+
throw new Error("\u5F53\u524D\u6D4F\u89C8\u5668\u65E0\u6CD5\u8BFB\u53D6\u626B\u7801\u753B\u9762");
|
|
83
|
+
context.drawImage(
|
|
84
|
+
source,
|
|
85
|
+
crop.x,
|
|
86
|
+
crop.y,
|
|
87
|
+
crop.width,
|
|
88
|
+
crop.height,
|
|
89
|
+
0,
|
|
90
|
+
0,
|
|
91
|
+
canvas.width,
|
|
92
|
+
canvas.height
|
|
93
|
+
);
|
|
94
|
+
return context.getImageData(0, 0, canvas.width, canvas.height);
|
|
95
|
+
}
|
|
96
|
+
export {
|
|
97
|
+
captureImage,
|
|
98
|
+
decode,
|
|
99
|
+
loadImage,
|
|
100
|
+
prepareDecoder
|
|
101
|
+
};
|
|
@@ -0,0 +1,164 @@
|
|
|
1
|
+
import { type App } from 'vue';
|
|
2
|
+
import { type ComponentInstance } from '../utils';
|
|
3
|
+
import type { QrScannerOptions } from './types';
|
|
4
|
+
declare const QrScanner: {
|
|
5
|
+
(options?: QrScannerOptions): ComponentInstance | undefined;
|
|
6
|
+
Component: import("../utils").WithInstall<import("vue").DefineComponent<{
|
|
7
|
+
show: BooleanConstructor;
|
|
8
|
+
title: {
|
|
9
|
+
type: import("vue").PropType<string>;
|
|
10
|
+
default: string;
|
|
11
|
+
};
|
|
12
|
+
tip: {
|
|
13
|
+
type: import("vue").PropType<string>;
|
|
14
|
+
default: string;
|
|
15
|
+
};
|
|
16
|
+
processingText: {
|
|
17
|
+
type: import("vue").PropType<string>;
|
|
18
|
+
default: string;
|
|
19
|
+
};
|
|
20
|
+
formats: {
|
|
21
|
+
type: import("vue").PropType<import("./types").QrScannerFormat[]>;
|
|
22
|
+
default: () => never[];
|
|
23
|
+
} & {
|
|
24
|
+
default: () => import("./types").QrScannerFormat[];
|
|
25
|
+
};
|
|
26
|
+
facingMode: {
|
|
27
|
+
type: import("vue").PropType<"environment" | "user">;
|
|
28
|
+
default: "environment" | "user";
|
|
29
|
+
};
|
|
30
|
+
showAlbum: {
|
|
31
|
+
type: BooleanConstructor;
|
|
32
|
+
default: true;
|
|
33
|
+
};
|
|
34
|
+
showTorch: {
|
|
35
|
+
type: BooleanConstructor;
|
|
36
|
+
default: true;
|
|
37
|
+
};
|
|
38
|
+
showSwitchCamera: {
|
|
39
|
+
type: BooleanConstructor;
|
|
40
|
+
default: true;
|
|
41
|
+
};
|
|
42
|
+
closeAfterScan: {
|
|
43
|
+
type: BooleanConstructor;
|
|
44
|
+
default: true;
|
|
45
|
+
};
|
|
46
|
+
scanInterval: {
|
|
47
|
+
type: (NumberConstructor | StringConstructor)[];
|
|
48
|
+
default: number;
|
|
49
|
+
};
|
|
50
|
+
duplicateInterval: {
|
|
51
|
+
type: (NumberConstructor | StringConstructor)[];
|
|
52
|
+
default: number;
|
|
53
|
+
};
|
|
54
|
+
maxImageSize: {
|
|
55
|
+
type: (NumberConstructor | StringConstructor)[];
|
|
56
|
+
default: number;
|
|
57
|
+
};
|
|
58
|
+
paused: BooleanConstructor;
|
|
59
|
+
wasmUrl: StringConstructor;
|
|
60
|
+
beforeConfirm: import("vue").PropType<import("./types").QrScannerBeforeConfirm>;
|
|
61
|
+
nativeScan: import("vue").PropType<import("./types").QrScannerNativeScan>;
|
|
62
|
+
teleport: {
|
|
63
|
+
type: import("vue").PropType<string | import("vue").RendererElement | null | undefined>;
|
|
64
|
+
default: string;
|
|
65
|
+
};
|
|
66
|
+
zIndex: (NumberConstructor | StringConstructor)[];
|
|
67
|
+
closeOnPopstate: {
|
|
68
|
+
type: BooleanConstructor;
|
|
69
|
+
default: true;
|
|
70
|
+
};
|
|
71
|
+
}, () => JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("close" | "error" | "closed" | "update:show" | "cancel" | "scan" | "ready")[], "close" | "error" | "closed" | "update:show" | "cancel" | "scan" | "ready", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
|
|
72
|
+
show: BooleanConstructor;
|
|
73
|
+
title: {
|
|
74
|
+
type: import("vue").PropType<string>;
|
|
75
|
+
default: string;
|
|
76
|
+
};
|
|
77
|
+
tip: {
|
|
78
|
+
type: import("vue").PropType<string>;
|
|
79
|
+
default: string;
|
|
80
|
+
};
|
|
81
|
+
processingText: {
|
|
82
|
+
type: import("vue").PropType<string>;
|
|
83
|
+
default: string;
|
|
84
|
+
};
|
|
85
|
+
formats: {
|
|
86
|
+
type: import("vue").PropType<import("./types").QrScannerFormat[]>;
|
|
87
|
+
default: () => never[];
|
|
88
|
+
} & {
|
|
89
|
+
default: () => import("./types").QrScannerFormat[];
|
|
90
|
+
};
|
|
91
|
+
facingMode: {
|
|
92
|
+
type: import("vue").PropType<"environment" | "user">;
|
|
93
|
+
default: "environment" | "user";
|
|
94
|
+
};
|
|
95
|
+
showAlbum: {
|
|
96
|
+
type: BooleanConstructor;
|
|
97
|
+
default: true;
|
|
98
|
+
};
|
|
99
|
+
showTorch: {
|
|
100
|
+
type: BooleanConstructor;
|
|
101
|
+
default: true;
|
|
102
|
+
};
|
|
103
|
+
showSwitchCamera: {
|
|
104
|
+
type: BooleanConstructor;
|
|
105
|
+
default: true;
|
|
106
|
+
};
|
|
107
|
+
closeAfterScan: {
|
|
108
|
+
type: BooleanConstructor;
|
|
109
|
+
default: true;
|
|
110
|
+
};
|
|
111
|
+
scanInterval: {
|
|
112
|
+
type: (NumberConstructor | StringConstructor)[];
|
|
113
|
+
default: number;
|
|
114
|
+
};
|
|
115
|
+
duplicateInterval: {
|
|
116
|
+
type: (NumberConstructor | StringConstructor)[];
|
|
117
|
+
default: number;
|
|
118
|
+
};
|
|
119
|
+
maxImageSize: {
|
|
120
|
+
type: (NumberConstructor | StringConstructor)[];
|
|
121
|
+
default: number;
|
|
122
|
+
};
|
|
123
|
+
paused: BooleanConstructor;
|
|
124
|
+
wasmUrl: StringConstructor;
|
|
125
|
+
beforeConfirm: import("vue").PropType<import("./types").QrScannerBeforeConfirm>;
|
|
126
|
+
nativeScan: import("vue").PropType<import("./types").QrScannerNativeScan>;
|
|
127
|
+
teleport: {
|
|
128
|
+
type: import("vue").PropType<string | import("vue").RendererElement | null | undefined>;
|
|
129
|
+
default: string;
|
|
130
|
+
};
|
|
131
|
+
zIndex: (NumberConstructor | StringConstructor)[];
|
|
132
|
+
closeOnPopstate: {
|
|
133
|
+
type: BooleanConstructor;
|
|
134
|
+
default: true;
|
|
135
|
+
};
|
|
136
|
+
}>> & {
|
|
137
|
+
onError?: ((...args: any[]) => any) | undefined;
|
|
138
|
+
onClose?: ((...args: any[]) => any) | undefined;
|
|
139
|
+
onClosed?: ((...args: any[]) => any) | undefined;
|
|
140
|
+
"onUpdate:show"?: ((...args: any[]) => any) | undefined;
|
|
141
|
+
onCancel?: ((...args: any[]) => any) | undefined;
|
|
142
|
+
onScan?: ((...args: any[]) => any) | undefined;
|
|
143
|
+
onReady?: ((...args: any[]) => any) | undefined;
|
|
144
|
+
}, {
|
|
145
|
+
title: string;
|
|
146
|
+
show: boolean;
|
|
147
|
+
paused: boolean;
|
|
148
|
+
teleport: string | import("vue").RendererElement | null | undefined;
|
|
149
|
+
closeOnPopstate: boolean;
|
|
150
|
+
tip: string;
|
|
151
|
+
processingText: string;
|
|
152
|
+
formats: import("./types").QrScannerFormat[];
|
|
153
|
+
facingMode: "environment" | "user";
|
|
154
|
+
showAlbum: boolean;
|
|
155
|
+
showTorch: boolean;
|
|
156
|
+
showSwitchCamera: boolean;
|
|
157
|
+
closeAfterScan: boolean;
|
|
158
|
+
scanInterval: string | number;
|
|
159
|
+
duplicateInterval: string | number;
|
|
160
|
+
maxImageSize: string | number;
|
|
161
|
+
}>>;
|
|
162
|
+
install(app: App): App<any>;
|
|
163
|
+
};
|
|
164
|
+
export { QrScanner };
|
|
@@ -0,0 +1,69 @@
|
|
|
1
|
+
import { ref, mergeProps as _mergeProps, createVNode as _createVNode } from "vue";
|
|
2
|
+
import { extend, inBrowser, withInstall } from "../utils/index.mjs";
|
|
3
|
+
import { mountComponent, usePopupState } from "../utils/mount-component.mjs";
|
|
4
|
+
import { useExpose } from "../composables/use-expose.mjs";
|
|
5
|
+
import VanQrScanner from "./QrScanner.mjs";
|
|
6
|
+
let instance;
|
|
7
|
+
const defaultOptions = {
|
|
8
|
+
title: "\u626B\u63CF\u8BBE\u5907\u4E8C\u7EF4\u7801",
|
|
9
|
+
tip: "\u5C06\u8BBE\u5907\u4E8C\u7EF4\u7801\u7F6E\u4E8E\u53D6\u666F\u6846\u5185\uFF0C\u5373\u53EF\u81EA\u52A8\u8BC6\u522B",
|
|
10
|
+
processingText: "\u6B63\u5728\u5904\u7406\u626B\u7801\u7ED3\u679C...",
|
|
11
|
+
formats: ["QRCode"],
|
|
12
|
+
facingMode: "environment",
|
|
13
|
+
showAlbum: true,
|
|
14
|
+
showTorch: true,
|
|
15
|
+
showSwitchCamera: true,
|
|
16
|
+
closeAfterScan: true,
|
|
17
|
+
scanInterval: 150,
|
|
18
|
+
duplicateInterval: 2e3,
|
|
19
|
+
maxImageSize: 20 * 1024 * 1024,
|
|
20
|
+
paused: false,
|
|
21
|
+
wasmUrl: void 0,
|
|
22
|
+
beforeConfirm: void 0,
|
|
23
|
+
nativeScan: void 0,
|
|
24
|
+
teleport: "body",
|
|
25
|
+
zIndex: void 0,
|
|
26
|
+
closeOnPopstate: true,
|
|
27
|
+
onScan: void 0,
|
|
28
|
+
onError: void 0,
|
|
29
|
+
onCancel: void 0,
|
|
30
|
+
onClose: void 0
|
|
31
|
+
};
|
|
32
|
+
function initInstance() {
|
|
33
|
+
({
|
|
34
|
+
instance
|
|
35
|
+
} = mountComponent({
|
|
36
|
+
setup() {
|
|
37
|
+
const {
|
|
38
|
+
state,
|
|
39
|
+
toggle,
|
|
40
|
+
open
|
|
41
|
+
} = usePopupState();
|
|
42
|
+
const revision = ref(0);
|
|
43
|
+
useExpose({
|
|
44
|
+
open: (options) => {
|
|
45
|
+
revision.value += 1;
|
|
46
|
+
open(options);
|
|
47
|
+
}
|
|
48
|
+
});
|
|
49
|
+
return () => _createVNode(VanQrScanner, _mergeProps({
|
|
50
|
+
"key": revision.value
|
|
51
|
+
}, state, {
|
|
52
|
+
"onUpdate:show": toggle
|
|
53
|
+
}), null);
|
|
54
|
+
}
|
|
55
|
+
}));
|
|
56
|
+
}
|
|
57
|
+
const QrScanner = (options = {}) => {
|
|
58
|
+
if (!inBrowser)
|
|
59
|
+
return;
|
|
60
|
+
if (!instance)
|
|
61
|
+
initInstance();
|
|
62
|
+
instance.open(extend({}, defaultOptions, options));
|
|
63
|
+
return instance;
|
|
64
|
+
};
|
|
65
|
+
QrScanner.Component = withInstall(VanQrScanner);
|
|
66
|
+
QrScanner.install = (app) => app.use(QrScanner.Component);
|
|
67
|
+
export {
|
|
68
|
+
QrScanner
|
|
69
|
+
};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
:root{--van-qr-scanner-background: #111;--van-qr-scanner-text-color: #fff;--van-qr-scanner-frame-color: var(--van-primary-color);--van-qr-scanner-frame-size: 240px}.van-qr-scanner{position:fixed;inset:0;display:flex;flex-direction:column;width:100%;height:100%;max-height:none;overflow:hidden;color:var(--van-qr-scanner-text-color);background:var(--van-qr-scanner-background)}.van-qr-scanner__video,.van-qr-scanner__shade{position:absolute;inset:0;width:100%;height:100%}.van-qr-scanner__video{-o-object-fit:cover;object-fit:cover}.van-qr-scanner__shade{background:linear-gradient(rgba(0,0,0,.6),transparent 30%,rgba(0,0,0,.7))}.van-qr-scanner__header{position:relative;display:flex;flex:none;align-items:center;justify-content:center;min-height:48px;padding-top:env(safe-area-inset-top,0px)}.van-qr-scanner__title{padding:0 52px;font-size:var(--van-font-size-lg);font-weight:var(--van-font-weight-bold);text-align:center}.van-qr-scanner__close{position:absolute;bottom:0;left:4px;display:flex;align-items:center;justify-content:center;width:44px;height:48px;padding:0;color:inherit;background:transparent;border:0;cursor:pointer}.van-qr-scanner__viewfinder{position:relative;display:flex;flex:1;flex-direction:column;align-items:center;justify-content:center;min-height:0;padding:16px}.van-qr-scanner__frame{position:relative;flex:none;width:min(var(--van-qr-scanner-frame-size),72vw,40vh);height:min(var(--van-qr-scanner-frame-size),72vw,40vh);border:1px solid rgba(255,255,255,.3);border-radius:12px}.van-qr-scanner__frame>i{position:absolute;width:24px;height:24px;border:3px solid var(--van-qr-scanner-frame-color)}.van-qr-scanner__frame>i:nth-child(1){top:-1px;left:-1px;border-right:0;border-bottom:0;border-top-left-radius:12px}.van-qr-scanner__frame>i:nth-child(2){top:-1px;right:-1px;border-bottom:0;border-left:0;border-top-right-radius:12px}.van-qr-scanner__frame>i:nth-child(3){bottom:-1px;right:-1px;border-top:0;border-left:0;border-bottom-right-radius:12px}.van-qr-scanner__frame>i:nth-child(4){bottom:-1px;left:-1px;border-top:0;border-right:0;border-bottom-left-radius:12px}.van-qr-scanner__frame--scanning:after{position:absolute;top:12px;right:12px;left:12px;height:2px;background:var(--van-qr-scanner-frame-color);box-shadow:0 0 12px var(--van-qr-scanner-frame-color);content:"";animation:van-qr-scanner-line 2.2s ease-in-out infinite alternate}.van-qr-scanner__tip,.van-qr-scanner__message{margin:20px 0 0;font-size:var(--van-font-size-md);line-height:22px;text-align:center;overflow-wrap:anywhere}.van-qr-scanner__status{position:relative;flex:none;min-height:96px;padding:0 24px 16px;text-align:center}.van-qr-scanner__status .van-loading,.van-qr-scanner__status .van-loading__text{color:inherit}.van-qr-scanner__status .van-button{margin-top:12px}.van-qr-scanner__message{margin:0}.van-qr-scanner__actions{position:relative;display:flex;flex:none;flex-wrap:wrap;align-items:center;justify-content:center;gap:8px 24px;min-height:88px;padding:12px 16px calc(24px + env(safe-area-inset-bottom,0px))}.van-qr-scanner__torch-hint{flex-basis:100%;margin:0;color:inherit;font-size:var(--van-font-size-sm);line-height:20px;text-align:center;opacity:.7}.van-qr-scanner__action{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;min-width:72px;min-height:64px;padding:8px;color:inherit;font-size:var(--van-font-size-sm);background:transparent;border:0;border-radius:8px;cursor:pointer}.van-qr-scanner__action--active{color:var(--van-qr-scanner-frame-color)}.van-qr-scanner__action:disabled{opacity:.5;cursor:default}.van-qr-scanner__close:active,.van-qr-scanner__action:not(:disabled):active{background:rgba(255,255,255,.1)}.van-qr-scanner__file-input{display:none}@keyframes van-qr-scanner-line{to{top:calc(100% - 12px)}}@media (prefers-reduced-motion: reduce){.van-qr-scanner__frame--scanning:after{animation:none}}
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import { QrScanner } from './function-call';
|
|
2
|
+
export default QrScanner;
|
|
3
|
+
export { QrScanner };
|
|
4
|
+
export type { QrScannerProps } from './QrScanner';
|
|
5
|
+
export type { QrScannerBeforeConfirm, QrScannerError, QrScannerErrorCode, QrScannerExpose, QrScannerFormat, QrScannerInstance, QrScannerNativeScan, QrScannerOptions, QrScannerResult, } from './types';
|
|
6
|
+
declare module 'vue' {
|
|
7
|
+
interface GlobalComponents {
|
|
8
|
+
VanQrScanner: typeof QrScanner.Component;
|
|
9
|
+
}
|
|
10
|
+
}
|
|
@@ -0,0 +1,239 @@
|
|
|
1
|
+
@import './var.less';
|
|
2
|
+
|
|
3
|
+
:root {
|
|
4
|
+
--van-qr-scanner-background: @qr-scanner-background;
|
|
5
|
+
--van-qr-scanner-text-color: @qr-scanner-text-color;
|
|
6
|
+
--van-qr-scanner-frame-color: @qr-scanner-frame-color;
|
|
7
|
+
--van-qr-scanner-frame-size: @qr-scanner-frame-size;
|
|
8
|
+
}
|
|
9
|
+
|
|
10
|
+
.van-qr-scanner {
|
|
11
|
+
position: fixed;
|
|
12
|
+
inset: 0;
|
|
13
|
+
display: flex;
|
|
14
|
+
flex-direction: column;
|
|
15
|
+
width: 100%;
|
|
16
|
+
height: 100%;
|
|
17
|
+
max-height: none;
|
|
18
|
+
overflow: hidden;
|
|
19
|
+
color: var(--van-qr-scanner-text-color);
|
|
20
|
+
background: var(--van-qr-scanner-background);
|
|
21
|
+
|
|
22
|
+
&__video,
|
|
23
|
+
&__shade {
|
|
24
|
+
position: absolute;
|
|
25
|
+
inset: 0;
|
|
26
|
+
width: 100%;
|
|
27
|
+
height: 100%;
|
|
28
|
+
}
|
|
29
|
+
|
|
30
|
+
&__video {
|
|
31
|
+
object-fit: cover;
|
|
32
|
+
}
|
|
33
|
+
&__shade {
|
|
34
|
+
background: linear-gradient(
|
|
35
|
+
rgba(0, 0, 0, 0.6),
|
|
36
|
+
transparent 30%,
|
|
37
|
+
rgba(0, 0, 0, 0.7)
|
|
38
|
+
);
|
|
39
|
+
}
|
|
40
|
+
|
|
41
|
+
&__header {
|
|
42
|
+
position: relative;
|
|
43
|
+
display: flex;
|
|
44
|
+
flex: none;
|
|
45
|
+
align-items: center;
|
|
46
|
+
justify-content: center;
|
|
47
|
+
min-height: 48px;
|
|
48
|
+
padding-top: env(safe-area-inset-top, 0px);
|
|
49
|
+
}
|
|
50
|
+
|
|
51
|
+
&__title {
|
|
52
|
+
padding: 0 52px;
|
|
53
|
+
font-size: var(--van-font-size-lg);
|
|
54
|
+
font-weight: var(--van-font-weight-bold);
|
|
55
|
+
text-align: center;
|
|
56
|
+
}
|
|
57
|
+
|
|
58
|
+
&__close {
|
|
59
|
+
position: absolute;
|
|
60
|
+
bottom: 0;
|
|
61
|
+
left: 4px;
|
|
62
|
+
display: flex;
|
|
63
|
+
align-items: center;
|
|
64
|
+
justify-content: center;
|
|
65
|
+
width: 44px;
|
|
66
|
+
height: 48px;
|
|
67
|
+
padding: 0;
|
|
68
|
+
color: inherit;
|
|
69
|
+
background: transparent;
|
|
70
|
+
border: 0;
|
|
71
|
+
cursor: pointer;
|
|
72
|
+
}
|
|
73
|
+
|
|
74
|
+
&__viewfinder {
|
|
75
|
+
position: relative;
|
|
76
|
+
display: flex;
|
|
77
|
+
flex: 1;
|
|
78
|
+
flex-direction: column;
|
|
79
|
+
align-items: center;
|
|
80
|
+
justify-content: center;
|
|
81
|
+
min-height: 0;
|
|
82
|
+
padding: 16px;
|
|
83
|
+
}
|
|
84
|
+
|
|
85
|
+
&__frame {
|
|
86
|
+
position: relative;
|
|
87
|
+
flex: none;
|
|
88
|
+
width: min(var(--van-qr-scanner-frame-size), 72vw, 40vh);
|
|
89
|
+
height: min(var(--van-qr-scanner-frame-size), 72vw, 40vh);
|
|
90
|
+
border: 1px solid rgba(255, 255, 255, 0.3);
|
|
91
|
+
border-radius: 12px;
|
|
92
|
+
|
|
93
|
+
> i {
|
|
94
|
+
position: absolute;
|
|
95
|
+
width: 24px;
|
|
96
|
+
height: 24px;
|
|
97
|
+
border: 3px solid var(--van-qr-scanner-frame-color);
|
|
98
|
+
|
|
99
|
+
&:nth-child(1) {
|
|
100
|
+
top: -1px;
|
|
101
|
+
left: -1px;
|
|
102
|
+
border-right: 0;
|
|
103
|
+
border-bottom: 0;
|
|
104
|
+
border-top-left-radius: 12px;
|
|
105
|
+
}
|
|
106
|
+
&:nth-child(2) {
|
|
107
|
+
top: -1px;
|
|
108
|
+
right: -1px;
|
|
109
|
+
border-bottom: 0;
|
|
110
|
+
border-left: 0;
|
|
111
|
+
border-top-right-radius: 12px;
|
|
112
|
+
}
|
|
113
|
+
&:nth-child(3) {
|
|
114
|
+
bottom: -1px;
|
|
115
|
+
right: -1px;
|
|
116
|
+
border-top: 0;
|
|
117
|
+
border-left: 0;
|
|
118
|
+
border-bottom-right-radius: 12px;
|
|
119
|
+
}
|
|
120
|
+
&:nth-child(4) {
|
|
121
|
+
bottom: -1px;
|
|
122
|
+
left: -1px;
|
|
123
|
+
border-top: 0;
|
|
124
|
+
border-right: 0;
|
|
125
|
+
border-bottom-left-radius: 12px;
|
|
126
|
+
}
|
|
127
|
+
}
|
|
128
|
+
|
|
129
|
+
&--scanning::after {
|
|
130
|
+
position: absolute;
|
|
131
|
+
top: 12px;
|
|
132
|
+
right: 12px;
|
|
133
|
+
left: 12px;
|
|
134
|
+
height: 2px;
|
|
135
|
+
background: var(--van-qr-scanner-frame-color);
|
|
136
|
+
box-shadow: 0 0 12px var(--van-qr-scanner-frame-color);
|
|
137
|
+
content: '';
|
|
138
|
+
animation: van-qr-scanner-line 2.2s ease-in-out infinite alternate;
|
|
139
|
+
}
|
|
140
|
+
}
|
|
141
|
+
|
|
142
|
+
&__tip,
|
|
143
|
+
&__message {
|
|
144
|
+
margin: 20px 0 0;
|
|
145
|
+
font-size: var(--van-font-size-md);
|
|
146
|
+
line-height: 22px;
|
|
147
|
+
text-align: center;
|
|
148
|
+
overflow-wrap: anywhere;
|
|
149
|
+
}
|
|
150
|
+
|
|
151
|
+
&__status {
|
|
152
|
+
position: relative;
|
|
153
|
+
flex: none;
|
|
154
|
+
min-height: 96px;
|
|
155
|
+
padding: 0 24px 16px;
|
|
156
|
+
text-align: center;
|
|
157
|
+
|
|
158
|
+
.van-loading {
|
|
159
|
+
color: inherit;
|
|
160
|
+
}
|
|
161
|
+
.van-loading__text {
|
|
162
|
+
color: inherit;
|
|
163
|
+
}
|
|
164
|
+
.van-button {
|
|
165
|
+
margin-top: 12px;
|
|
166
|
+
}
|
|
167
|
+
}
|
|
168
|
+
|
|
169
|
+
&__message {
|
|
170
|
+
margin: 0;
|
|
171
|
+
}
|
|
172
|
+
|
|
173
|
+
&__actions {
|
|
174
|
+
position: relative;
|
|
175
|
+
display: flex;
|
|
176
|
+
flex: none;
|
|
177
|
+
flex-wrap: wrap;
|
|
178
|
+
align-items: center;
|
|
179
|
+
justify-content: center;
|
|
180
|
+
gap: 8px 24px;
|
|
181
|
+
min-height: 88px;
|
|
182
|
+
padding: 12px 16px calc(24px + env(safe-area-inset-bottom, 0px));
|
|
183
|
+
}
|
|
184
|
+
|
|
185
|
+
&__torch-hint {
|
|
186
|
+
flex-basis: 100%;
|
|
187
|
+
margin: 0;
|
|
188
|
+
color: inherit;
|
|
189
|
+
font-size: var(--van-font-size-sm);
|
|
190
|
+
line-height: 20px;
|
|
191
|
+
text-align: center;
|
|
192
|
+
opacity: 0.7;
|
|
193
|
+
}
|
|
194
|
+
|
|
195
|
+
&__action {
|
|
196
|
+
display: flex;
|
|
197
|
+
flex-direction: column;
|
|
198
|
+
align-items: center;
|
|
199
|
+
justify-content: center;
|
|
200
|
+
gap: 10px;
|
|
201
|
+
min-width: 72px;
|
|
202
|
+
min-height: 64px;
|
|
203
|
+
padding: 8px;
|
|
204
|
+
color: inherit;
|
|
205
|
+
font-size: var(--van-font-size-sm);
|
|
206
|
+
background: transparent;
|
|
207
|
+
border: 0;
|
|
208
|
+
border-radius: 8px;
|
|
209
|
+
cursor: pointer;
|
|
210
|
+
|
|
211
|
+
&--active {
|
|
212
|
+
color: var(--van-qr-scanner-frame-color);
|
|
213
|
+
}
|
|
214
|
+
&:disabled {
|
|
215
|
+
opacity: 0.5;
|
|
216
|
+
cursor: default;
|
|
217
|
+
}
|
|
218
|
+
}
|
|
219
|
+
|
|
220
|
+
&__close:active,
|
|
221
|
+
&__action:not(:disabled):active {
|
|
222
|
+
background: rgba(255, 255, 255, 0.1);
|
|
223
|
+
}
|
|
224
|
+
&__file-input {
|
|
225
|
+
display: none;
|
|
226
|
+
}
|
|
227
|
+
}
|
|
228
|
+
|
|
229
|
+
@keyframes van-qr-scanner-line {
|
|
230
|
+
to {
|
|
231
|
+
top: calc(100% - 12px);
|
|
232
|
+
}
|
|
233
|
+
}
|
|
234
|
+
|
|
235
|
+
@media (prefers-reduced-motion: reduce) {
|
|
236
|
+
.van-qr-scanner__frame--scanning::after {
|
|
237
|
+
animation: none;
|
|
238
|
+
}
|
|
239
|
+
}
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
import "../../style/base.less";
|
|
2
|
+
import "../../badge/index.less";
|
|
3
|
+
import "../../icon/index.less";
|
|
4
|
+
import "../../loading/index.less";
|
|
5
|
+
import "../../button/index.less";
|
|
6
|
+
import "../../overlay/index.less";
|
|
7
|
+
import "../../popup/index.less";
|
|
8
|
+
import "../index.less";
|
|
@@ -0,0 +1,54 @@
|
|
|
1
|
+
import type { ComponentPublicInstance, TeleportProps } from 'vue';
|
|
2
|
+
import type { QrScannerProps } from './QrScanner';
|
|
3
|
+
export declare type QrScannerFormat = 'QRCode' | 'Code128' | 'Code39' | 'EAN13' | 'EAN8' | 'DataMatrix' | 'PDF417' | 'Aztec';
|
|
4
|
+
export declare type QrScannerResult = {
|
|
5
|
+
text: string;
|
|
6
|
+
format: string;
|
|
7
|
+
source: 'camera' | 'image' | 'native';
|
|
8
|
+
};
|
|
9
|
+
export declare type QrScannerErrorCode = 'INSECURE_CONTEXT' | 'CAMERA_UNSUPPORTED' | 'CAMERA_PERMISSION_DENIED' | 'CAMERA_NOT_FOUND' | 'CAMERA_UNAVAILABLE' | 'DECODER_LOAD_FAILED' | 'DECODE_FAILED' | 'IMAGE_TOO_LARGE' | 'IMAGE_NOT_FOUND' | 'CONFIRM_FAILED' | 'NATIVE_SCAN_FAILED' | 'TORCH_UNAVAILABLE';
|
|
10
|
+
export declare type QrScannerError = {
|
|
11
|
+
code: QrScannerErrorCode;
|
|
12
|
+
message: string;
|
|
13
|
+
cause?: unknown;
|
|
14
|
+
};
|
|
15
|
+
export declare type QrScannerBeforeConfirm = (result: QrScannerResult) => boolean | void | Promise<boolean | void>;
|
|
16
|
+
export declare type QrScannerNativeScan = (options: {
|
|
17
|
+
formats: QrScannerFormat[];
|
|
18
|
+
signal: AbortSignal;
|
|
19
|
+
}) => Promise<{
|
|
20
|
+
text: string;
|
|
21
|
+
format?: string;
|
|
22
|
+
} | null>;
|
|
23
|
+
export declare type QrScannerOptions = {
|
|
24
|
+
title?: string;
|
|
25
|
+
tip?: string;
|
|
26
|
+
processingText?: string;
|
|
27
|
+
formats?: QrScannerFormat[];
|
|
28
|
+
facingMode?: 'environment' | 'user';
|
|
29
|
+
showAlbum?: boolean;
|
|
30
|
+
showTorch?: boolean;
|
|
31
|
+
showSwitchCamera?: boolean;
|
|
32
|
+
closeAfterScan?: boolean;
|
|
33
|
+
scanInterval?: number | string;
|
|
34
|
+
duplicateInterval?: number | string;
|
|
35
|
+
maxImageSize?: number | string;
|
|
36
|
+
paused?: boolean;
|
|
37
|
+
wasmUrl?: string;
|
|
38
|
+
beforeConfirm?: QrScannerBeforeConfirm;
|
|
39
|
+
nativeScan?: QrScannerNativeScan;
|
|
40
|
+
teleport?: TeleportProps['to'];
|
|
41
|
+
zIndex?: number | string;
|
|
42
|
+
closeOnPopstate?: boolean;
|
|
43
|
+
onScan?: (result: QrScannerResult) => void;
|
|
44
|
+
onError?: (error: QrScannerError) => void;
|
|
45
|
+
onCancel?: () => void;
|
|
46
|
+
onClose?: () => void;
|
|
47
|
+
};
|
|
48
|
+
export declare type QrScannerExpose = {
|
|
49
|
+
start: () => Promise<void>;
|
|
50
|
+
stop: () => void;
|
|
51
|
+
close: () => void;
|
|
52
|
+
scanImage: (file: File) => Promise<void>;
|
|
53
|
+
};
|
|
54
|
+
export declare type QrScannerInstance = ComponentPublicInstance<QrScannerProps, QrScannerExpose>;
|
|
File without changes
|
|
File without changes
|