maz-ui/dist/chunks/MazIcon.DRXVVEtt.js

A standalone components library for Vue.Js 3 & Nuxt.Js 3

import{t as _plugin_vue_export_helper_default}from"./_plugin-vue_export-helper.ChmETRGw.js";import{useInjectStrict}from"../composables/useInjectStrict.js";import{computed,createBlock,createElementBlock,defineComponent,mergeProps,nextTick,normalizeClass,normalizeStyle,onMounted,openBlock,ref,resolveDynamicComponent,watchEffect}from"vue";import '../assets/MazIcon.B6T_aVr6.css';var _hoisted_1=[`innerHTML`];var MazIcon_default=_plugin_vue_export_helper_default(defineComponent({__name:`MazIcon`,props:{icon:{type:[Function,Object]},src:{},path:{},name:{},size:{},title:{},transformSource:{type:Function,default:svg=>svg}},emits:[`loaded`,`unloaded`,`error`],setup(__props,{emit:__emit}){let emits=__emit;let predefinedSizes=[`xs`,`sm`,`md`,`lg`,`xl`];let cache={};let svgElSource=ref();let svgElem=ref();function getMazIconPath(){try{return useInjectStrict(`mazIconPath`)}catch{return}}let iconPath=computed(()=>__props.path??getMazIconPath());let fullSrc=computed(()=>{if(!__props.icon)return __props.src?__props.src:iconPath.value?`${iconPath.value}/${__props.name}.svg`:`/${__props.name}.svg`});onMounted(()=>{(__props.icon&&__props.src||__props.icon&&__props.name)&&console.error(`[maz-ui](MazIcon) you should provide "name" or "src" as prop`),!__props.icon&&!__props.name&&!__props.src&&console.error(`[maz-ui](MazIcon) you should provide "icon", "name" or "src" as prop`)});function setTitle(svg,title){let titleTags=svg.querySelectorAll(`title`);if(titleTags.length>0)titleTags[0].textContent=title;else{let 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){let svgAttrs={};let 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);let 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)=>{let 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(Error(`Loaded file is not valid SVG"`))}catch(error){reject(error)}else reject(Error(`Error loading SVG`))}),request.addEventListener(`error`,error=>reject(error)),request.send()})}let svgStyle=computed(()=>{if(!(__props.size&&predefinedSizes.includes(__props.size)))return{fontSize:__props.size}});let svgClasses=computed(()=>{if(__props.size&&predefinedSizes.includes(__props.size))return`m-icon--${__props.size}`});return watchEffect(()=>{fullSrc.value&&getSource(fullSrc.value)}),(_ctx,_cache)=>svgElSource.value?(openBlock(),createElementBlock(`svg`,mergeProps({key:0,ref_key:`svgElem`,ref:svgElem,class:[`m-icon m-reset-css`,svgClasses.value],width:`1em`,height:`1em`},{...getSvgAttrs(svgElSource.value),...filterAttrs(_ctx.$attrs)},{style:svgStyle.value,innerHTML:getSvgContent(svgElSource.value)}),null,16,_hoisted_1)):(openBlock(),createBlock(resolveDynamicComponent(__props.icon),{key:1,class:normalizeClass([`m-icon m-reset-css`,svgClasses.value]),style:normalizeStyle(svgStyle.value)},null,8,[`class`,`style`]))}}),[[`__scopeId`,`data-v-71bafbcf`]]);export{MazIcon_default as t};