@indielayer/ui
Version:
Indielayer UI Components with Tailwind CSS build for Vue 3
94 lines (93 loc) • 2.37 kB
JavaScript
import { defineComponent as k, ref as S, computed as b, onMounted as _, watchEffect as x, openBlock as I, createElementBlock as N, normalizeStyle as h, unref as i, normalizeClass as H, createElementVNode as O } from "vue";
import { useTheme as T } from "../../composables/useTheme.js";
import r from "./qrcodegen.js";
const $ = {
value: String,
color: {
type: String,
default: "#000"
},
backgroundColor: {
type: String,
default: "#fff"
},
size: {
type: [String, Number],
default: 100
},
errorCorrectionLevel: {
type: String,
default: "M"
}
}, U = {
name: "XQrCode",
validators: {
errorCorrectionLevel: ["L", "M", "Q", "H"]
}
}, V = /* @__PURE__ */ k({
...U,
props: $,
setup(m) {
const o = m, C = {
L: r.QrCode.Ecc.LOW,
M: r.QrCode.Ecc.MEDIUM,
Q: r.QrCode.Ecc.QUARTILE,
H: r.QrCode.Ecc.HIGH
}, d = S(), g = b(() => r.QrCode.encodeText(
o.value ?? "-",
C[o.errorCorrectionLevel] || r.QrCode.Ecc.MEDIUM
));
_(() => {
x(() => {
E(
g.value,
Number(o.size),
o.color,
o.backgroundColor
);
});
});
function E(e, f, y, z) {
const t = d.value;
if (!t)
return;
const l = f * 2, R = e.size, s = l / R;
t.width = l, t.height = l;
const a = t.getContext("2d");
if (a) {
a.clearRect(0, 0, t.width, t.height);
for (let c = 0; c < e.size; c++)
for (let n = 0; n < e.size; n++) {
a.fillStyle = e.getModule(n, c) ? y : z;
const u = Math.floor(n * s), L = Math.ceil((n + 1) * s), p = Math.floor(c * s), w = Math.ceil((c + 1) * s);
a.fillRect(u, p, L - u, w - p);
}
}
}
const { styles: v, classes: M, className: Q } = T("QrCode", {}, o);
return (e, f) => (I(), N("div", {
style: h([i(v), {
width: `calc(1rem + ${e.size}px)`,
height: `calc(1rem + ${e.size}px)`,
backgroundColor: e.backgroundColor,
padding: "0.5rem"
}]),
class: H([
i(Q),
i(M).wrapper
])
}, [
O("canvas", {
ref_key: "canvasRef",
ref: d,
style: h({
width: `${e.size}px`,
height: `${e.size}px`
})
}, null, 4)
], 6));
}
});
export {
V as default
};