vue-skeleton-content-loader/dist/vue-skeleton-content-loader.umd.js

Make beautiful, animated loading skeletons that automatically adapt to your Vue apps

(function(n,e){typeof exports=="object"&&typeof module<"u"?e(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],e):(n=typeof globalThis<"u"?globalThis:n||self,e(n.VueSkeletonContentLoader={},n.Vue))})(this,function(n,e){"use strict";const u=["aria-label","aria-valuetext"],c=((o,t)=>{const l=o.__vccOpts||o;for(const[a,s]of t)l[a]=s;return l})(e.defineComponent({__name:"VueSkeletonContentLoader",props:{appearance:{default:"line"},size:{default:null},animation:{type:[String,Boolean],default:"progress"},theme:{default:null},loadingText:{default:"Loading..."},count:{default:1},ariaLabel:{default:"loading"}},setup(o){const t=o,l=e.computed(()=>Array.from({length:Number(t.count)},(r,i)=>i+1)),a=e.computed(()=>{if(t.appearance!=="square"||typeof t.size!="number"&&typeof t.size!="string")return null;const r=Number(t.size.toString().trim().replace(/\D/g,""));return Number.isInteger(r)?`${r}px`:null}),s=e.computed(()=>({...a.value&&{width:a.value,height:a.value},...t.theme}));return(r,i)=>(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(l.value,p=>(e.openBlock(),e.createElementBlock("div",{key:p,"aria-label":t.ariaLabel,"aria-busy":"true","aria-valuemin":"0","aria-valuemax":"100","aria-valuetext":t.loadingText,role:"progressbar",tabindex:"-1",class:e.normalizeClass(["skeleton-loader",{"custom-content":t.appearance==="custom-content",circle:t.appearance==="circle",square:t.appearance==="square",progress:t.animation==="progress","progress-dark":t.animation==="progress-dark",pulse:t.animation==="pulse","pulse-dark":t.animation==="pulse-dark"}]),style:e.normalizeStyle(s.value)},[t.appearance==="custom-content"?e.renderSlot(r.$slots,"default",{key:0},void 0,!0):e.createCommentVNode("",!0)],14,u))),128))}}),[["__scopeId","data-v-868ce80e"]]);n.VueSkeletonContentLoader=c,Object.defineProperty(n,Symbol.toStringTag,{value:"Module"})});