maz-ui
Version:
A standalone components library for Vue.Js 3 & Nuxt.Js 3
96 lines (95 loc) • 4.04 kB
JavaScript
import { defineComponent, ref, computed, onMounted, watchEffect, createElementBlock, createCommentVNode, openBlock, mergeProps, nextTick } from "vue";
import { useInjectStrict } from "../composables/useInjectStrict.js";
import { _ as _export_sfc } from "../chunks/_plugin-vue_export-helper.B--vMWp3.js";
import '../assets/MazIcon.3Pn7omz5.css';const _hoisted_1 = ["innerHTML"], _sfc_main = /* @__PURE__ */ defineComponent({
__name: "MazIcon",
props: {
src: {},
path: {},
name: {},
size: {},
title: {},
transformSource: { type: Function, default: (svg) => svg }
},
emits: ["loaded", "unloaded", "error"],
setup(__props, { emit: __emit }) {
const emits = __emit, cache = {}, svgElSource = ref(), svgElem = ref();
function getMazIconPath() {
try {
return useInjectStrict("mazIconPath");
} catch {
return;
}
}
const iconPath = computed(() => __props.path ?? getMazIconPath()), fullSrc = computed(() => __props.src ? __props.src : iconPath.value ? `${iconPath.value}/${__props.name}.svg` : `/${__props.name}.svg`);
onMounted(() => {
!__props.name && !__props.src && console.error('[maz-ui](MazIcon) you should provide "name" or "src" as prop');
});
function setTitle(svg, title) {
const titleTags = svg.querySelectorAll("title");
if (titleTags.length > 0)
titleTags[0].textContent = title;
else {
const titleEl = document.createElementNS("http://www.w3.org/2000/svg", "title");
titleEl.textContent = title, svg.append(titleEl);
}
}
function filterAttrs(attrs) {
return Object.keys(attrs).reduce((result, key) => (attrs[key] !== !1 && attrs[key] !== null && attrs[key] !== void 0 && (result[key] = attrs[key]), result), {});
}
function getSvgAttrs(svgEl) {
const svgAttrs = {}, attrs = svgEl.attributes;
if (!attrs)
return svgAttrs;
for (let i = attrs.length - 1; i >= 0; i--)
svgAttrs[attrs[i].name] = attrs[i].value;
return svgAttrs;
}
function getSvgContent(svgEl) {
svgEl.cloneNode(!0);
const svgElNode = __props.transformSource(svgEl);
return __props.title && setTitle(svgElNode, __props.title), svgEl.innerHTML;
}
async function getSource(src) {
cache[src] || (cache[src] = download(src));
try {
svgElSource.value = await cache[src], await nextTick(), emits("loaded", svgElem.value);
} catch (error) {
svgElSource.value && (svgElSource.value = void 0, emits("unloaded")), delete cache[src], emits("error", error);
}
}
function download(url) {
return new Promise((resolve, reject) => {
const request = new XMLHttpRequest();
request.open("GET", url, !0), request.addEventListener("load", () => {
if (request.status >= 200 && request.status < 400)
try {
let svgEl = new DOMParser().parseFromString(request.responseText, "text/xml").querySelectorAll("svg")[0];
svgEl ? (svgEl = __props.transformSource(svgEl), resolve(svgEl)) : reject(new Error('Loaded file is not valid SVG"'));
} catch (error) {
reject(error);
}
else
reject(new Error("Error loading SVG"));
}), request.addEventListener("error", (error) => reject(error)), request.send();
});
}
return watchEffect(() => getSource(fullSrc.value)), (_ctx, _cache) => svgElSource.value ? (openBlock(), createElementBlock("svg", mergeProps({
key: 0,
ref_key: "svgElem",
ref: svgElem,
class: "m-icon m-reset-css",
width: "1em",
height: "1em"
}, {
...getSvgAttrs(svgElSource.value),
...filterAttrs(_ctx.$attrs)
}, {
style: `font-size: ${_ctx.size}`,
innerHTML: getSvgContent(svgElSource.value)
}), null, 16, _hoisted_1)) : createCommentVNode("", !0);
}
}), MazIcon = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-616a0f35"]]);
export {
MazIcon as default
};