@fifteen/design-system-vue
Version:
Vue 3 (Composition API + Typescript) implementation of the Fifteen Design System
2 lines (1 loc) • 948 B
JavaScript
"use strict";const e=require("vue"),t=require("../utils/genSize.js"),l=require("../utils/getCssColor.js"),a=e.defineComponent({__name:"FSkeleton",props:{backgroundColor:{default:"neutral--light-3"},backgroundColorTo:{default:"neutral--light-4"},animate:{type:Boolean,default:!0},height:{default:"48px"},width:{default:"auto"},rounded:{type:Boolean,default:!1},roundedFull:{type:Boolean,default:!1}},setup(n){const o=n,r=e.computed(()=>({"FSkeleton--rounded":o.rounded,"FSkeleton--roundedFull":o.roundedFull,"FSkeleton--fade":o.animate})),u=e.computed(()=>({"--fskeleton--background-color":l.getCssColor(o.backgroundColor),"--fskeleton--background-color-to":l.getCssColor(o.backgroundColorTo),"--fskeleton--width":t.genSize(o.width),"--fskeleton--height":t.genSize(o.height)}));return(s,d)=>(e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(["FSkeleton",e.unref(r)]),style:e.normalizeStyle(e.unref(u))},null,6))}});module.exports=a;