maz-ui
Version:
A standalone components library for Vue.Js 3 & Nuxt.Js 3
104 lines (103 loc) • 3.55 kB
JavaScript
import { defineComponent as T, ref as m, computed as v, onMounted as x, watchEffect as L, openBlock as P, createElementBlock as _, mergeProps as A, createCommentVNode as C, nextTick as $ } from "vue";
import { i as q } from "./MazPhoneNumberInput.BcyaW-S8.mjs";
const H = ["innerHTML"], V = /* @__PURE__ */ T({
__name: "MazIcon",
props: {
/** The source path of the SVG file - e.g: `/icons/home.svg` */
src: { type: String, default: void 0 },
/** The path of the folder where the SVG files are stored - e.g: `/icons` */
path: { type: String, default: void 0 },
/** The name of the SVG file - e.g: `home` */
name: { type: String, default: void 0 },
/** The size of the SVG file - e.g: `1em` */
size: { type: String, default: void 0 },
/** The title of the SVG file - e.g: `Home` */
title: { type: String, default: void 0 },
/** The function to transform the source of the SVG file - e.g: `(svg) => svg` */
transformSource: {
type: Function,
default: (i) => i
}
},
emits: ["loaded", "unloaded", "error"],
setup(i, { emit: p }) {
const o = i, c = p, a = {}, s = m(), d = m();
function g() {
try {
return q("mazIconPath");
} catch {
return;
}
}
const f = v(() => o.path ?? g()), S = v(() => o.src ? o.src : f.value ? `${f.value}/${o.name}.svg` : `/${o.name}.svg`);
x(() => {
!o.name && !o.src && console.error('[maz-ui](MazIcon) you should provide "name" or "src" as prop');
});
function h(e, r) {
const t = e.querySelectorAll("title");
if (t.length > 0)
t[0].textContent = r;
else {
const n = document.createElementNS("http://www.w3.org/2000/svg", "title");
n.textContent = r, e.append(n);
}
}
function w(e) {
return Object.keys(e).reduce((r, t) => (e[t] !== !1 && e[t] !== null && e[t] !== void 0 && (r[t] = e[t]), r), {});
}
function y(e) {
const r = {}, t = e.attributes;
if (!t)
return r;
for (let n = t.length - 1; n >= 0; n--)
r[t[n].name] = t[n].value;
return r;
}
function E(e) {
e.cloneNode(!0);
const r = o.transformSource(e);
return o.title && h(r, o.title), e.innerHTML;
}
async function M(e) {
a[e] || (a[e] = z(e));
try {
s.value = await a[e], await $(), c("loaded", d.value);
} catch (r) {
s.value && (s.value = void 0, c("unloaded")), delete a[e], c("error", r);
}
}
function z(e) {
return new Promise((r, t) => {
const n = new XMLHttpRequest();
n.open("GET", e, !0), n.addEventListener("load", () => {
if (n.status >= 200 && n.status < 400)
try {
let u = new DOMParser().parseFromString(n.responseText, "text/xml").querySelectorAll("svg")[0];
u ? (u = o.transformSource(u), r(u)) : t(new Error('Loaded file is not valid SVG"'));
} catch (l) {
t(l);
}
else
t(new Error("Error loading SVG"));
}), n.addEventListener("error", (l) => t(l)), n.send();
});
}
return L(() => M(S.value)), (e, r) => s.value ? (P(), _("svg", A({
key: 0,
ref_key: "svgElem",
ref: d,
class: "m-icon m-reset-css",
width: "1em",
height: "1em"
}, {
...y(s.value),
...w(e.$attrs)
}, {
style: `font-size: ${i.size}`,
innerHTML: E(s.value)
}), null, 16, H)) : C("v-if", !0);
}
});
export {
V as default
};