vue-jdenticon
Version:
A simple wrapper around jdenticon library for Vue3
679 lines (678 loc) • 20 kB
JavaScript
import { defineComponent as k, mergeModels as V, useTemplateRef as D, useModel as z, watch as F, createElementBlock as G, openBlock as J } from "vue";
function _(o, n, t) {
return parseInt(o.substr(n, t), 16);
}
function Z(o) {
return o |= 0, o < 0 ? "00" : o < 16 ? "0" + o.toString(16) : o < 256 ? o.toString(16) : "ff";
}
function O(o, n, t) {
return t = t < 0 ? t + 6 : t > 6 ? t - 6 : t, Z(255 * (t < 1 ? o + (n - o) * t : t < 3 ? n : t < 4 ? o + (n - o) * (4 - t) : o));
}
function X(o) {
if (/^#[0-9a-f]{3,8}$/i.test(o)) {
let n;
const t = o.length;
if (t < 6) {
const s = o[1], i = o[2], e = o[3], r = o[4] || "";
n = "#" + s + s + i + i + e + e + r + r;
}
return (t == 7 || t > 8) && (n = o), n;
}
}
function B(o) {
const n = _(o, 7, 2);
let t;
if (isNaN(n))
t = o;
else {
const s = _(o, 1, 2), i = _(o, 3, 2), e = _(o, 5, 2);
t = "rgba(" + s + "," + i + "," + e + "," + (n / 255).toFixed(2) + ")";
}
return t;
}
function Q(o, n, t) {
let s;
if (n == 0) {
const i = Z(t * 255);
s = i + i + i;
} else {
const i = t <= 0.5 ? t * (n + 1) : t + n - t * n, e = t * 2 - i;
s = O(e, i, o * 6 + 2) + O(e, i, o * 6) + O(e, i, o * 6 - 2);
}
return "#" + s;
}
function C(o, n, t) {
const s = [0.55, 0.5, 0.5, 0.46, 0.6, 0.55, 0.55], i = s[o * 6 + 0.5 | 0];
return t = t < 0.5 ? t * i * 2 : i + (t - 0.5) * (1 - i) * 2, Q(o, n, t);
}
const x = typeof window < "u" ? window : typeof self < "u" ? self : typeof global < "u" ? global : {}, j = {
V: "jdenticon_config",
n: "config"
};
var l = {};
function tt(o, n) {
const t = l[
j.n
/*MODULE*/
] || x[
j.V
/*GLOBAL*/
] || {}, s = t.lightness || {}, i = t.saturation || {}, e = "color" in i ? i.color : i, r = i.grayscale, f = t.backColor, u = t.padding;
function a(p, c) {
let d = s[p];
return d && d.length > 1 || (d = c), function(h) {
return h = d[0] + h * (d[1] - d[0]), h < 0 ? 0 : h > 1 ? 1 : h;
};
}
function g(p) {
const c = t.hues;
let d;
return c && c.length > 0 && (d = c[0 | 0.999 * p * c.length]), typeof d == "number" ? (
// A hue was specified. We need to convert the hue from
// degrees on any turn - e.g. 746° is a perfectly valid hue -
// to turns in the range [0, 1).
(d / 360 % 1 + 1) % 1
) : (
// No hue configured => use original hue
p
);
}
return {
W: g,
o: typeof e == "number" ? e : 0.5,
D: typeof r == "number" ? r : 0,
p: a("color", [0.4, 0.8]),
F: a("grayscale", [0.3, 0.9]),
G: X(f),
X: typeof u == "number" ? u : n
};
}
class T {
/**
* @param {number} x
* @param {number} y
*/
constructor(n, t) {
this.x = n, this.y = t;
}
}
class Y {
/**
* @param {number} x The x-coordinate of the upper left corner of the transformed rectangle.
* @param {number} y The y-coordinate of the upper left corner of the transformed rectangle.
* @param {number} size The size of the transformed rectangle.
* @param {number} rotation Rotation specified as 0 = 0 rad, 1 = 0.5π rad, 2 = π rad, 3 = 1.5π rad
*/
constructor(n, t, s, i) {
this.q = n, this.t = t, this.H = s, this.Y = i;
}
/**
* Transforms the specified point based on the translation and rotation specification for this Transform.
* @param {number} x x-coordinate
* @param {number} y y-coordinate
* @param {number=} w The width of the transformed rectangle. If greater than 0, this will ensure the returned point is of the upper left corner of the transformed rectangle.
* @param {number=} h The height of the transformed rectangle. If greater than 0, this will ensure the returned point is of the upper left corner of the transformed rectangle.
*/
I(n, t, s, i) {
const e = this.q + this.H, r = this.t + this.H, f = this.Y;
return f === 1 ? new T(e - t - (i || 0), this.t + n) : f === 2 ? new T(e - n - (s || 0), r - t - (i || 0)) : f === 3 ? new T(this.q + t, r - n - (s || 0)) : new T(this.q + n, this.t + t);
}
}
const nt = new Y(0, 0, 0, 0);
class ot {
/**
* @param {Renderer} renderer
*/
constructor(n) {
this.J = n, this.u = nt;
}
/**
* Adds a polygon to the underlying renderer.
* @param {Array<number>} points The points of the polygon clockwise on the format [ x0, y0, x1, y1, ..., xn, yn ]
* @param {boolean=} invert Specifies if the polygon will be inverted.
*/
g(n, t) {
const s = t ? -2 : 2, i = [];
for (let e = t ? n.length - 2 : 0; e < n.length && e >= 0; e += s)
i.push(this.u.I(n[e], n[e + 1]));
this.J.g(i);
}
/**
* Adds a polygon to the underlying renderer.
* Source: http://stackoverflow.com/a/2173084
* @param {number} x The x-coordinate of the upper left corner of the rectangle holding the entire ellipse.
* @param {number} y The y-coordinate of the upper left corner of the rectangle holding the entire ellipse.
* @param {number} size The size of the ellipse.
* @param {boolean=} invert Specifies if the ellipse will be inverted.
*/
h(n, t, s, i) {
const e = this.u.I(n, t, s, s);
this.J.h(e, s, i);
}
/**
* Adds a rectangle to the underlying renderer.
* @param {number} x The x-coordinate of the upper left corner of the rectangle.
* @param {number} y The y-coordinate of the upper left corner of the rectangle.
* @param {number} w The width of the rectangle.
* @param {number} h The height of the rectangle.
* @param {boolean=} invert Specifies if the rectangle will be inverted.
*/
i(n, t, s, i, e) {
this.g([
n,
t,
n + s,
t,
n + s,
t + i,
n,
t + i
], e);
}
/**
* Adds a right triangle to the underlying renderer.
* @param {number} x The x-coordinate of the upper left corner of the rectangle holding the triangle.
* @param {number} y The y-coordinate of the upper left corner of the rectangle holding the triangle.
* @param {number} w The width of the triangle.
* @param {number} h The height of the triangle.
* @param {number} r The rotation of the triangle (clockwise). 0 = right corner of the triangle in the lower left corner of the bounding rectangle.
* @param {boolean=} invert Specifies if the triangle will be inverted.
*/
j(n, t, s, i, e, r) {
const f = [
n + s,
t,
n + s,
t + i,
n,
t + i,
n,
t
];
f.splice((e || 0) % 4 * 2, 2), this.g(f, r);
}
/**
* Adds a rhombus to the underlying renderer.
* @param {number} x The x-coordinate of the upper left corner of the rectangle holding the rhombus.
* @param {number} y The y-coordinate of the upper left corner of the rectangle holding the rhombus.
* @param {number} w The width of the rhombus.
* @param {number} h The height of the rhombus.
* @param {boolean=} invert Specifies if the rhombus will be inverted.
*/
K(n, t, s, i, e) {
this.g([
n + s / 2,
t,
n + s,
t + i / 2,
n + s / 2,
t + i,
n,
t + i / 2
], e);
}
}
function st(o, n, t, s) {
o = o % 14;
let i, e, r, f, u, a;
o ? o == 1 ? (r = 0 | t * 0.5, f = 0 | t * 0.8, n.j(t - r, 0, r, f, 2)) : o == 2 ? (r = 0 | t / 3, n.i(r, r, t - r, t - r)) : o == 3 ? (u = t * 0.1, // Use fixed outer border widths in small icons to ensure the border is drawn
a = t < 6 ? 1 : t < 8 ? 2 : 0 | t * 0.25, u = u > 1 ? 0 | u : (
// large icon => truncate decimals
u > 0.5 ? 1 : (
// medium size icon => fixed width
u
)
), // small icon => anti-aliased border
n.i(a, a, t - u - a, t - u - a)) : o == 4 ? (e = 0 | t * 0.15, r = 0 | t * 0.5, n.h(t - r - e, t - r - e, r)) : o == 5 ? (u = t * 0.1, a = u * 4, // Align edge to nearest pixel in large icons
a > 3 && (a = 0 | a), n.i(0, 0, t, t), n.g([
a,
a,
t - u,
a,
a + (t - a - u) / 2,
t - u
], !0)) : o == 6 ? n.g([
0,
0,
t,
0,
t,
t * 0.7,
t * 0.4,
t * 0.4,
t * 0.7,
t,
0,
t
]) : o == 7 ? n.j(t / 2, t / 2, t / 2, t / 2, 3) : o == 8 ? (n.i(0, 0, t, t / 2), n.i(0, t / 2, t / 2, t / 2), n.j(t / 2, t / 2, t / 2, t / 2, 1)) : o == 9 ? (u = t * 0.14, // Use fixed outer border widths in small icons to ensure the border is drawn
a = t < 4 ? 1 : t < 6 ? 2 : 0 | t * 0.35, u = t < 8 ? u : (
// small icon => anti-aliased border
0 | u
), // large icon => truncate decimals
n.i(0, 0, t, t), n.i(a, a, t - a - u, t - a - u, !0)) : o == 10 ? (u = t * 0.12, a = u * 3, n.i(0, 0, t, t), n.h(a, a, t - u - a, !0)) : o == 11 ? n.j(t / 2, t / 2, t / 2, t / 2, 3) : o == 12 ? (e = t * 0.25, n.i(0, 0, t, t), n.K(e, e, t - e, t - e, !0)) : (
// 13
!s && (e = t * 0.4, r = t * 1.2, n.h(e, e, r))
) : (i = t * 0.42, n.g([
0,
0,
t,
0,
t,
t - i * 2,
t - i,
t,
0,
t
]));
}
function H(o, n, t) {
o = o % 4;
let s;
o ? o == 1 ? n.j(0, t / 2, t, t / 2, 0) : o == 2 ? n.K(0, 0, t, t) : (
// 3
(s = t / 6, n.h(s, s, t - 2 * s))
) : n.j(0, 0, t, t, 0);
}
function it(o, n) {
return o = n.W(o), [
// Dark gray
C(o, n.D, n.F(0)),
// Mid color
C(o, n.o, n.p(0.5)),
// Light gray
C(o, n.D, n.F(1)),
// Light color
C(o, n.o, n.p(1)),
// Dark color
C(o, n.o, n.p(0))
];
}
function et(o, n, t) {
const s = tt(t, 0.08);
s.G && o.m(
s.G
/*backColor*/
);
let i = o.k;
const e = 0.5 + i * s.X | 0;
i -= e * 2;
const r = new ot(o), f = 0 | i / 4, u = 0 | e + i / 2 - f * 2, a = 0 | e + i / 2 - f * 2;
function g(S, m, E, w, I) {
const q = _(n, E, 1);
let U = w ? _(n, w, 1) : 0;
o.L(c[d[S]]);
for (let A = 0; A < I.length; A++)
r.u = new Y(u + I[A][0] * f, a + I[A][1] * f, f, U++ % 4), m(q, r, f, A);
o.M();
}
const p = _(n, -7) / 268435455, c = it(p, s), d = [];
let h;
function b(S) {
if (S.indexOf(h) >= 0) {
for (let m = 0; m < S.length; m++)
if (d.indexOf(S[m]) >= 0)
return !0;
}
}
for (let S = 0; S < 3; S++)
h = _(n, 8 + S, 1) % c.length, (b([0, 4]) || // Disallow dark gray and dark color combo
b([2, 3])) && (h = 1), d.push(h);
g(0, H, 2, 3, [[1, 0], [2, 0], [2, 3], [1, 3], [0, 1], [3, 1], [3, 2], [0, 2]]), g(1, H, 4, 5, [[0, 0], [3, 0], [3, 3], [0, 3]]), g(2, st, 1, null, [[1, 1], [2, 1], [2, 2], [1, 2]]), o.finish();
}
function rt(o) {
var s = 0, i = 0, e = encodeURI(o) + "%80", r = [], f, u = [], a = 1732584193, g = 4023233417, p = ~a, c = ~g, d = 3285377520, h = [a, g, p, c, d], b = 0, S = "";
function m(E, w) {
return E << w | E >>> 32 - w;
}
for (; s < e.length; i++)
r[i >> 2] = r[i >> 2] | (e[s] == "%" ? parseInt(e.substring(s + 1, s += 3), 16) : e.charCodeAt(s++)) << (3 - (i & 3)) * 8;
for (f = ((i + 7 >> 6) + 1) * 16, r[f - 1] = i * 8 - 8; b < f; b += 16) {
for (s = 0; s < 80; s++)
i = m(a, 5) + d + // Ch
(s < 20 ? (g & p ^ ~g & c) + 1518500249 : (
// Parity
s < 40 ? (g ^ p ^ c) + 1859775393 : (
// Maj
s < 60 ? (g & p ^ g & c ^ p & c) + 2400959708 : (
// Parity
(g ^ p ^ c) + 3395469782
)
)
)) + (u[s] = s < 16 ? r[b + s] | 0 : m(u[s - 3] ^ u[s - 8] ^ u[s - 14] ^ u[s - 16], 1)), d = c, c = p, p = m(g, 30), g = a, a = i;
h[0] = a = h[0] + a | 0, h[1] = g = h[1] + g | 0, h[2] = p = h[2] + p | 0, h[3] = c = h[3] + c | 0, h[4] = d = h[4] + d | 0;
}
for (s = 0; s < 40; s++)
S += // Get word (2^3 half-bytes per word)
(h[s >> 3] >>> // Append half-bytes in reverse order
(7 - (s & 7)) * 4 & 15).toString(16);
return S;
}
function M(o) {
return /^[0-9a-f]{11,}$/i.test(o) && o;
}
function y(o) {
return rt(o == null ? "" : "" + o);
}
class at {
/**
* @param {number=} iconSize
*/
constructor(n, t) {
const s = n.canvas, i = s.width, e = s.height;
n.save(), t || (t = Math.min(i, e), n.translate(
(i - t) / 2 | 0,
(e - t) / 2 | 0
)), this.l = n, this.k = t, n.clearRect(0, 0, t, t);
}
/**
* Fills the background with the specified color.
* @param {string} fillColor Fill color on the format #rrggbb[aa].
*/
m(n) {
const t = this.l, s = this.k;
t.fillStyle = B(n), t.fillRect(0, 0, s, s);
}
/**
* Marks the beginning of a new shape of the specified color. Should be ended with a call to endShape.
* @param {string} fillColor Fill color on format #rrggbb[aa].
*/
L(n) {
const t = this.l;
t.fillStyle = B(n), t.beginPath();
}
/**
* Marks the end of the currently drawn shape. This causes the queued paths to be rendered on the canvas.
*/
M() {
this.l.fill();
}
/**
* Adds a polygon to the rendering queue.
* @param points An array of Point objects.
*/
g(n) {
const t = this.l;
t.moveTo(n[0].x, n[0].y);
for (let s = 1; s < n.length; s++)
t.lineTo(n[s].x, n[s].y);
t.closePath();
}
/**
* Adds a circle to the rendering queue.
* @param {Point} point The upper left corner of the circle bounding box.
* @param {number} diameter The diameter of the circle.
* @param {boolean} counterClockwise True if the circle is drawn counter-clockwise (will result in a hole if rendered on a clockwise path).
*/
h(n, t, s) {
const i = this.l, e = t / 2;
i.moveTo(n.x + e, n.y + e), i.arc(n.x + e, n.y + e, e, 0, Math.PI * 2, s), i.closePath();
}
/**
* Called when the icon has been completely drawn.
*/
finish() {
this.l.restore();
}
}
const K = 1, ut = 2, N = {
Z: "data-jdenticon-hash",
N: "data-jdenticon-value"
}, ft = "jdenticonRendered", L = (
/** @type {!Function} */
typeof document < "u" && document.querySelectorAll.bind(document)
);
function ht(o) {
if (o) {
const n = o.tagName;
if (/^svg$/i.test(n))
return K;
if (/^canvas$/i.test(n) && "getContext" in o)
return ut;
}
}
function v(o) {
return (o * 10 + 0.5 | 0) / 10;
}
class ct {
constructor() {
this.v = "";
}
/**
* Adds a polygon with the current fill color to the SVG path.
* @param points An array of Point objects.
*/
g(n) {
let t = "";
for (let s = 0; s < n.length; s++)
t += (s ? "L" : "M") + v(n[s].x) + " " + v(n[s].y);
this.v += t + "Z";
}
/**
* Adds a circle with the current fill color to the SVG path.
* @param {Point} point The upper left corner of the circle bounding box.
* @param {number} diameter The diameter of the circle.
* @param {boolean} counterClockwise True if the circle is drawn counter-clockwise (will result in a hole if rendered on a clockwise path).
*/
h(n, t, s) {
const i = s ? 0 : 1, e = v(t / 2), r = v(t), f = "a" + e + "," + e + " 0 1," + i + " ";
this.v += "M" + v(n.x) + " " + v(n.y + t / 2) + f + r + ",0" + f + -r + ",0";
}
}
class dt {
/**
* @param {SvgElement|SvgWriter} target
*/
constructor(n) {
this.A, this.B = {}, this.O = n, this.k = n.k;
}
/**
* Fills the background with the specified color.
* @param {string} fillColor Fill color on the format #rrggbb[aa].
*/
m(n) {
const t = /^(#......)(..)?/.exec(n), s = t[2] ? _(t[2], 0) / 255 : 1;
this.O.m(t[1], s);
}
/**
* Marks the beginning of a new shape of the specified color. Should be ended with a call to endShape.
* @param {string} color Fill color on format #xxxxxx.
*/
L(n) {
this.A = this.B[n] || (this.B[n] = new ct());
}
/**
* Marks the end of the currently drawn shape.
*/
M() {
}
/**
* Adds a polygon with the current fill color to the SVG.
* @param points An array of Point objects.
*/
g(n) {
this.A.g(n);
}
/**
* Adds a circle with the current fill color to the SVG.
* @param {Point} point The upper left corner of the circle bounding box.
* @param {number} diameter The diameter of the circle.
* @param {boolean} counterClockwise True if the circle is drawn counter-clockwise (will result in a hole if rendered on a clockwise path).
*/
h(n, t, s) {
this.A.h(n, t, s);
}
/**
* Called when the icon has been completely drawn.
*/
finish() {
const n = this.B;
for (let t in n)
n.hasOwnProperty(t) && this.O.P(
t,
n[t].v
/*dataString*/
);
}
}
const R = {
R: "http://www.w3.org/2000/svg",
S: "width",
T: "height"
};
function P(o, n, ...t) {
const s = document.createElementNS(R.R, n);
for (let i = 0; i + 1 < t.length; i += 2)
s.setAttribute(
/** @type {string} */
t[i],
/** @type {string} */
t[i + 1]
);
o.appendChild(s);
}
class gt {
/**
* @param {Element} element - Target element
*/
constructor(n) {
const t = this.k = Math.min(
Number(n.getAttribute(
R.S
/*WIDTH*/
)) || 100,
Number(n.getAttribute(
R.T
/*HEIGHT*/
)) || 100
);
for (this.U = n; n.firstChild; )
n.removeChild(n.firstChild);
n.setAttribute("viewBox", "0 0 " + t + " " + t), n.setAttribute("preserveAspectRatio", "xMidYMid meet");
}
/**
* Fills the background with the specified color.
* @param {string} fillColor Fill color on the format #rrggbb.
* @param {number} opacity Opacity in the range [0.0, 1.0].
*/
m(n, t) {
t && P(
this.U,
"rect",
R.S,
"100%",
R.T,
"100%",
"fill",
n,
"opacity",
t
);
}
/**
* Appends a path to the SVG element.
* @param {string} color Fill color on format #xxxxxx.
* @param {string} dataString The SVG path data string.
*/
P(n, t) {
P(
this.U,
"path",
"fill",
n,
"d",
t
);
}
}
function W(o, n, t) {
$(o, n, t, function(s, i) {
if (i)
return i == K ? new dt(new gt(s)) : new at(
/** @type {HTMLCanvasElement} */
s.getContext("2d")
);
});
}
function $(o, n, t, s) {
if (typeof o == "string") {
if (L) {
const r = L(o);
for (let f = 0; f < r.length; f++)
$(r[f], n, t, s);
}
return;
}
const i = (
// 1. Explicit valid hash
M(n) || // 2. Explicit value (`!= null` catches both null and undefined)
n != null && y(n) || // 3. `data-jdenticon-hash` attribute
M(o.getAttribute(
N.Z
/*HASH*/
)) || // 4. `data-jdenticon-value` attribute.
// We want to treat an empty attribute as an empty value.
// Some browsers return empty string even if the attribute
// is not specified, so use hasAttribute to determine if
// the attribute is specified.
o.hasAttribute(
N.N
/*VALUE*/
) && y(o.getAttribute(
N.N
/*VALUE*/
))
);
if (!i)
return;
const e = s(o, ht(o));
e && (et(e, i, t), o[ft] = !0);
}
const pt = ["data-jdenticon-value", "width", "height"], St = /* @__PURE__ */ k({
__name: "Jdenticon",
props: /* @__PURE__ */ V({
size: { default: 100 }
}, {
modelValue: {},
modelModifiers: {}
}),
emits: ["update:modelValue"],
setup(o) {
const n = D("icon"), t = z(o, "modelValue");
return F([n, t], () => {
n.value && W(n.value, t.value ?? "");
}), (s, i) => (J(), G("svg", {
ref_key: "icon",
ref: n,
"data-jdenticon-value": t.value,
width: s.size,
height: s.size
}, null, 8, pt));
}
}), mt = ["data-jdenticon-value", "width", "height"], _t = /* @__PURE__ */ k({
__name: "StaticJdenticon",
props: {
size: { default: 100 },
value: {}
},
setup(o) {
const n = D("icon");
return F([n], () => {
n.value && W(n.value, o.value ?? "");
}), (t, s) => (J(), G("svg", {
ref_key: "icon",
ref: n,
"data-jdenticon-value": t.value,
width: t.size,
height: t.size
}, null, 8, mt));
}
}), vt = {
install: (o) => {
o.component("Jdenticon", St), o.component("StaticJdenticon", _t);
}
};
export {
St as Jdenticon,
_t as StaticJdenticon,
vt as default
};