@hopeio/utils
Version:
javascript utils
469 lines (468 loc) • 11.6 kB
JavaScript
import { defineComponent as m, h as a } from "vue";
import { Icon as j } from "@iconify/vue";
const E = Object.freeze(
{
left: 0,
top: 0,
width: 16,
height: 16
}
), N = Object.freeze({
rotate: 0,
vFlip: !1,
hFlip: !1
}), O = Object.freeze({
...E,
...N
});
Object.freeze({
...O,
body: "",
hidden: !1
});
({
...E
});
const P = Object.freeze({
width: null,
height: null
}), z = Object.freeze({
// Dimensions
...P,
// Transformations
...N
});
function L(t, o) {
const n = {
...t
};
for (const i in o) {
const e = o[i], r = typeof e;
i in P ? (e === null || e && (r === "string" || r === "number")) && (n[i] = e) : r === typeof n[i] && (n[i] = i === "rotate" ? e % 4 : e);
}
return n;
}
const V = /[\s,]+/;
function G(t, o) {
o.split(V).forEach((n) => {
switch (n.trim()) {
case "horizontal":
t.hFlip = !0;
break;
case "vertical":
t.vFlip = !0;
break;
}
});
}
function U(t, o = 0) {
const n = t.replace(/^-?[0-9.]*/, "");
function i(e) {
for (; e < 0; )
e += 4;
return e % 4;
}
if (n === "") {
const e = parseInt(t);
return isNaN(e) ? 0 : i(e);
} else if (n !== t) {
let e = 0;
switch (n) {
case "%":
e = 25;
break;
case "deg":
e = 90;
}
if (e) {
let r = parseFloat(t.slice(0, t.length - n.length));
return isNaN(r) ? 0 : (r = r / e, r % 1 === 0 ? i(r) : 0);
}
}
return o;
}
const B = /(-?[0-9.]*[0-9]+[0-9.]*)/g, W = /^-?[0-9.]*[0-9]+[0-9.]*$/g;
function F(t, o, n) {
if (o === 1)
return t;
if (n = n || 100, typeof t == "number")
return Math.ceil(t * o * n) / n;
if (typeof t != "string")
return t;
const i = t.split(B);
if (i === null || !i.length)
return t;
const e = [];
let r = i.shift(), c = W.test(r);
for (; ; ) {
if (c) {
const f = parseFloat(r);
isNaN(f) ? e.push(r) : e.push(Math.ceil(f * o * n) / n);
} else
e.push(r);
if (r = i.shift(), r === void 0)
return e.join("");
c = !c;
}
}
function K(t, o = "defs") {
let n = "";
const i = t.indexOf("<" + o);
for (; i >= 0; ) {
const e = t.indexOf(">", i), r = t.indexOf("</" + o);
if (e === -1 || r === -1)
break;
const c = t.indexOf(">", r);
if (c === -1)
break;
n += t.slice(e + 1, r).trim(), t = t.slice(0, i).trim() + t.slice(c + 1);
}
return {
defs: n,
content: t
};
}
function _(t, o) {
return t ? "<defs>" + t + "</defs>" + o : o;
}
function q(t, o, n) {
const i = K(t);
return _(i.defs, o + i.content + n);
}
const J = (t) => t === "unset" || t === "undefined" || t === "none";
function Q(t, o) {
const n = {
...O,
...t
}, i = {
...z,
...o
}, e = {
left: n.left,
top: n.top,
width: n.width,
height: n.height
};
let r = n.body;
[n, i].forEach((l) => {
const s = [], k = l.hFlip, v = l.vFlip;
let d = l.rotate;
k ? v ? d += 2 : (s.push(
"translate(" + (e.width + e.left).toString() + " " + (0 - e.top).toString() + ")"
), s.push("scale(-1 1)"), e.top = e.left = 0) : v && (s.push(
"translate(" + (0 - e.left).toString() + " " + (e.height + e.top).toString() + ")"
), s.push("scale(1 -1)"), e.top = e.left = 0);
let h;
switch (d < 0 && (d -= Math.floor(d / 4) * 4), d = d % 4, d) {
case 1:
h = e.height / 2 + e.top, s.unshift(
"rotate(90 " + h.toString() + " " + h.toString() + ")"
);
break;
case 2:
s.unshift(
"rotate(180 " + (e.width / 2 + e.left).toString() + " " + (e.height / 2 + e.top).toString() + ")"
);
break;
case 3:
h = e.width / 2 + e.left, s.unshift(
"rotate(-90 " + h.toString() + " " + h.toString() + ")"
);
break;
}
d % 2 === 1 && (e.left !== e.top && (h = e.left, e.left = e.top, e.top = h), e.width !== e.height && (h = e.width, e.width = e.height, e.height = h)), s.length && (r = q(
r,
'<g transform="' + s.join(" ") + '">',
"</g>"
));
});
const c = i.width, f = i.height, g = e.width, u = e.height;
let p, y;
c === null ? (y = f === null ? "1em" : f === "auto" ? u : f, p = F(y, g / u)) : (p = c === "auto" ? g : c, y = f === null ? F(p, u / g) : f === "auto" ? u : f);
const w = {}, b = (l, s) => {
J(s) || (w[l] = s.toString());
};
b("width", p), b("height", y);
const I = [e.left, e.top, g, u];
return w.viewBox = I.join(" "), {
attributes: w,
viewBox: I,
body: r
};
}
const X = /\sid="(\S+)"/g, Y = "IconifyId" + Date.now().toString(16) + (Math.random() * 16777216 | 0).toString(16);
let Z = 0;
function tt(t, o = Y) {
const n = [];
let i;
for (; i = X.exec(t); )
n.push(i[1]);
if (!n.length)
return t;
const e = "suffix" + (Math.random() * 16777216 | Date.now()).toString(16);
return n.forEach((r) => {
const c = typeof o == "function" ? o(r) : o + (Z++).toString(), f = r.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
t = t.replace(
// Allowed characters before id: [#;"]
// Allowed characters after id: [)"], .[a-z]
new RegExp('([#;"])(' + f + ')([")]|\\.[a-z])', "g"),
"$1" + c + e + "$3"
);
}), t = t.replace(new RegExp(e, "g"), ""), t;
}
function et(t, o) {
let n = t.indexOf("xlink:") === -1 ? "" : ' xmlns:xlink="http://www.w3.org/1999/xlink"';
for (const i in o)
n += " " + i + '="' + o[i] + '"';
return '<svg xmlns="http://www.w3.org/2000/svg"' + n + ">" + t + "</svg>";
}
function nt(t) {
return t.replace(/"/g, "'").replace(/%/g, "%25").replace(/#/g, "%23").replace(/</g, "%3C").replace(/>/g, "%3E").replace(/\s+/g, " ");
}
function ot(t) {
return "data:image/svg+xml," + nt(t);
}
function it(t) {
return 'url("' + ot(t) + '")';
}
const T = {
...z,
inline: !1
}, st = {
xmlns: "http://www.w3.org/2000/svg",
"xmlns:xlink": "http://www.w3.org/1999/xlink",
"aria-hidden": !0,
role: "img"
}, rt = {
display: "inline-block"
}, S = {
backgroundColor: "currentColor"
}, R = {
backgroundColor: "transparent"
}, $ = {
Image: "var(--svg)",
Repeat: "no-repeat",
Size: "100% 100%"
}, C = {
webkitMask: S,
mask: S,
background: R
};
for (const t in C) {
const o = C[t];
for (const n in $)
o[t + n] = $[n];
}
const x = {};
["horizontal", "vertical"].forEach((t) => {
const o = t.slice(0, 1) + "Flip";
x[t + "-flip"] = o, x[t.slice(0, 1) + "-flip"] = o, x[t + "Flip"] = o;
});
function D(t) {
return t + (t.match(/^[-0-9.]+$/) ? "px" : "");
}
const ct = (t, o) => {
const n = L(T, o), i = { ...st }, e = o.mode || "svg", r = {}, c = o.style, f = typeof c == "object" && !(c instanceof Array) ? c : {};
for (let l in o) {
const s = o[l];
if (s !== void 0)
switch (l) {
// Properties to ignore
case "icon":
case "style":
case "onLoad":
case "mode":
case "ssr":
break;
// Boolean attributes
case "inline":
case "hFlip":
case "vFlip":
n[l] = s === !0 || s === "true" || s === 1;
break;
// Flip as string: 'horizontal,vertical'
case "flip":
typeof s == "string" && G(n, s);
break;
// Color: override style
case "color":
r.color = s;
break;
// Rotation as string
case "rotate":
typeof s == "string" ? n[l] = U(s) : typeof s == "number" && (n[l] = s);
break;
// Remove aria-hidden
case "ariaHidden":
case "aria-hidden":
s !== !0 && s !== "true" && delete i["aria-hidden"];
break;
default: {
const k = x[l];
k ? (s === !0 || s === "true" || s === 1) && (n[k] = !0) : T[l] === void 0 && (i[l] = s);
}
}
}
const g = Q(t, n), u = g.attributes;
if (n.inline && (r.verticalAlign = "-0.125em"), e === "svg") {
i.style = {
...r,
...f
}, Object.assign(i, u);
let l = 0, s = o.id;
return typeof s == "string" && (s = s.replace(/-/g, "_")), i.innerHTML = tt(g.body, s ? () => s + "ID" + l++ : "iconifyVue"), a("svg", i);
}
const { body: p, width: y, height: w } = t, b = e === "mask" || (e === "bg" ? !1 : p.indexOf("currentColor") !== -1), I = et(p, {
...u,
width: y + "",
height: w + ""
});
return i.style = {
...r,
"--svg": it(I),
width: D(u.width),
height: D(u.height),
...rt,
...b ? S : R,
...f
}, a("span", i);
}, H = /* @__PURE__ */ Object.create(null);
function lt(t, o) {
H[t] = o;
}
const A = m({
// Do not inherit other attributes: it is handled by render()
inheritAttrs: !1,
// Render icon
render() {
const t = this.$attrs, o = t.icon, n = typeof o == "string" ? H[o] : typeof o == "object" ? o : null;
return n === null || typeof n != "object" || typeof n.body != "string" ? this.$slots.default ? this.$slots.default() : null : ct({
...O,
...n
}, t);
}
}), ft = m({
name: "IconifyIconOffline",
components: { IconifyIcon: A },
props: {
icon: {
default: null
}
},
render() {
typeof this.icon == "object" && lt(this.icon, this.icon);
const t = this.$attrs;
return a(
A,
{
icon: this.icon,
style: t != null && t.style ? Object.assign(t.style, { outline: "none" }) : { outline: "none" },
...t
},
{
default: () => []
}
);
}
}), at = m({
name: "IconifyIconOnline",
components: { IconifyIcon: j },
props: {
icon: {
type: String,
default: ""
}
},
render() {
const t = this.$attrs;
return a(
j,
{
icon: `${this.icon}`,
style: t != null && t.style ? Object.assign(t.style, { outline: "none" }) : { outline: "none" },
...t
},
{
default: () => []
}
);
}
}), ut = m({
name: "FontIcon",
props: {
icon: {
type: String,
default: ""
}
},
render() {
const t = this.$attrs;
return Object.keys(t).includes("uni") || (t == null ? void 0 : t.iconType) === "uni" ? a(
"i",
{
class: "iconfont",
...t
},
this.icon
) : Object.keys(t).includes("svg") || (t == null ? void 0 : t.iconType) === "svg" ? a(
"svg",
{
class: "icon-svg",
"aria-hidden": !0
},
{
default: () => [
a("use", {
"xlink:href": `#${this.icon}`
})
]
}
) : a("i", {
class: `iconfont ${this.icon}`,
...t
});
}
});
function mt(t, o) {
const n = /^IF-/;
if (n.test(t)) {
const i = t.split(n)[1], e = i.slice(
0,
i.indexOf(" ") == -1 ? i.length : i.indexOf(" ")
), r = i.slice(i.indexOf(" ") + 1, i.length);
return m({
name: "FontIcon",
render() {
return a(dt, {
icon: e,
iconType: r,
...o
});
}
});
} else return typeof t == "function" || typeof (t == null ? void 0 : t.render) == "function" ? o ? a(t, { ...o }) : t : typeof t == "object" ? m({
name: "OfflineIcon",
render() {
return a(M, {
icon: t,
...o
});
}
}) : m({
name: "Icon",
render() {
const i = t && t.includes(":") ? ht : M;
return a(i, {
icon: t,
...o
});
}
});
}
const M = ft, ht = at, dt = ut;
export {
dt as FontIcon,
M as IconifyIconOffline,
ht as IconifyIconOnline,
mt as useRenderIcon
};