easy-skeleton-loader-vue/dist/index.cjs

A simple, customizable skeleton loader for your vue app

"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("vue");var f={class:"sk-loader skeleton"};const r=e.defineComponent({__name:"SkeletonItem",props:{count:{default:1},width:{default:"100%"},height:{default:"16px"},radius:{default:12},delay:{},animation:{}},setup:function(a){var t,i,n=a,o=function(){return n.width?typeof n.width=="number"?"".concat(n.width,"px"):n.width:"100%"},u=function(){return n.height?typeof n.height=="number"?"".concat(n.height,"px"):n.height:"100%"},c={borderRadius:"".concat(n.radius,"px"),width:o(),height:u(),animationDelay:"".concat(n.delay,"s")},m=(t={},t[(i=n.animation)!==null&&i!==void 0?i:"fade-in"]=!0,t);return function(h,w){return e.openBlock(),e.createElementBlock("div",f,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(h.count,function(p){return e.openBlock(),e.createElementBlock("div",{key:p,class:e.normalizeClass(["element",m]),style:c})}),128))])}}});var d=function(a){var t=e.computed(function(){return a()?"sk-loader--dark":""});return{themeName:t}};const _=e.defineComponent({__name:"SkeletonCard",props:{animation:{},dark:{type:Boolean}},setup:function(a){var t=a,i=d(function(){return t.dark}).themeName;return function(n,o){return e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(["sk-loader card",e.unref(i)])},[e.createVNode(r,{animation:n.animation,width:100,height:100,radius:50,count:1},null,8,["animation"]),e.createVNode(r,{animation:n.animation,width:"70%",height:10,radius:6},null,8,["animation"]),e.createVNode(r,{animation:n.animation,width:"100%",height:10,radius:6},null,8,["animation"]),e.createVNode(r,{animation:n.animation,width:80,height:40,radius:6,count:2},null,8,["animation"])],2)}}});const s=(a,t)=>{const i=a.__vccOpts||a;for(const[n,o]of t)i[n]=o;return i},v=s(_,[["__scopeId","data-v-16ff31bf"]]),l=e.defineComponent({__name:"SkeletonShape",props:{type:{},count:{},width:{},height:{},radius:{},delay:{},animation:{}},setup:function(a){var t=a,i=e.computed(function(){return t.width?t.width:t.type==="avatar"?100:t.type==="button"?80:"100%"}),n=e.computed(function(){return t.height?t.height:t.type==="avatar"?100:t.type==="button"||t.type==="input"?40:10}),o=e.computed(function(){return t.radius?t.radius:t.type==="avatar"?50:6});return function(u,c){return e.openBlock(),e.createBlock(r,{animation:u.animation,width:i.value,height:n.value,radius:o.value,count:u.count,delay:u.delay},null,8,["animation","width","height","radius","count","delay"])}}});var k={class:"text"};const y=e.defineComponent({__name:"SkeletonUser",props:{animation:{},dark:{type:Boolean}},setup:function(a){var t=a,i=d(function(){return t.dark}).themeName;return function(n,o){return e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(["sk-loader user",e.unref(i)])},[e.createVNode(l,{class:"avatar",type:"avatar",animation:n.animation},null,8,["animation"]),e.createElementVNode("div",k,[e.createVNode(l,{type:"text",animation:n.animation,width:"20%"},null,8,["animation"]),e.createVNode(l,{type:"text",animation:n.animation,width:"60%"},null,8,["animation"])])],2)}}});const g=s(y,[["__scopeId","data-v-1ae1a6b7"]]);exports.SkeletonCard=v;exports.SkeletonItem=r;exports.SkeletonShape=l;exports.SkeletonUser=g;