vexip-ui/lib/components/skeleton/skeleton.cjs

A Vue 3 UI library, Highly customizability, full TypeScript, performance pretty good

"use strict";const r=require("vue");require("../icon/index.cjs");const c=require("@vexip-ui/config"),y=require("./props.cjs"),S=require("./symbol.cjs"),q=require("../icon/icon.cjs"),P=r.defineComponent({name:"Skeleton",inheritAttrs:!1,props:y.skeletonProps,setup(d,{attrs:l,slots:p}){const e=c.useProps("skeleton",d,{size:null,width:null,height:null,repeat:{default:1,validator:t=>t>0},tag:"div",activated:null,image:!1,imageIcon:c.createIconProp(),iconScale:4,round:null,circle:null,block:null,spread:0,loading:null}),o=r.inject(S.GROUP_STATE,{}),n=c.useNameHelper("skeleton"),s=c.useIcons(),m=r.computed(()=>e.activated??o.activated??!1),g=r.computed(()=>e.round??o.round??!1),u=r.computed(()=>e.circle??o.circle??!1),f=r.computed(()=>e.block??o.block??!1),v=r.computed(()=>e.loading??o.loading??!0),h=r.computed(()=>e.tag||o.itemTag||"div"),b=r.computed(()=>({[n.b()]:!0,[n.bs("vars")]:!0,[n.bm("inherit")]:Object.keys(o).length||e.inherit,[n.bm(e.size)]:e.size??(o==null?void 0:o.size),[n.bm("block")]:f.value,[n.bm("image")]:e.image,[n.bm("round")]:g.value&&!u.value,[n.bm("circle")]:u.value,[n.bm("activated")]:m.value})),k=r.computed(()=>{const t={};return e.width!==null&&(t[n.cv("width")]=i(e.width)),e.height!==null&&(t[n.cv("height")]=i(e.height)),e.spread&&(t[n.cv("spread")]=i(e.spread)),t});function i(t){return typeof t=="number"?`${t}px`:(t=t.trim(),/\d$/.test(t)?`${t}px`:t)}function a(){const t=h.value||"div";return r.createVNode(t,r.mergeProps(l,{class:[b.value,l.class],style:[k.value,l.style]}),{default:()=>[e.image?r.createVNode(q,r.mergeProps(s.value.image,{icon:e.imageIcon||s.value.image.icon,scale:e.iconScale}),null):null]})}return()=>v.value?e.repeat>1?Array.from({length:e.repeat},()=>a()):a():r.renderSlot(p,"default")}});module.exports=P;
//# sourceMappingURL=skeleton.cjs.map