solid-glass/dist/vue.js

A lightweight glass effect library for web apps, supporting React and Vue.

"use strict";const e=require("vue"),d=require("./utils-DYbhshKv.js"),i=(t,o)=>{const r=t.__vccOpts||t;for(const[a,n]of o)r[a]=n;return r},f={name:"LiquidGlass",props:{shadowColor:{type:String,default:"rgba(255, 255, 255, 0.7)"},shadowBlur:{type:Number,default:7},shadowSpread:{type:Number,default:0},shadowOffset:{type:Number,default:0},tintColor:{type:String,default:"#ffffff"},tintOpacity:{type:Number,default:.04},frostBlur:{type:Number,default:2},noiseFrequency:{type:Number,default:.008},distortionStrength:{type:Number,default:77},borderRadius:{type:Number,default:28},width:{type:String,default:"300px"},height:{type:String,default:"200px"}},setup(t){const o=e.ref(null);let r=null;const a=e.computed(()=>({width:t.width,height:t.height})),n=e.computed(()=>({shadowColor:t.shadowColor,shadowBlur:t.shadowBlur,shadowSpread:t.shadowSpread,shadowOffset:t.shadowOffset,tintColor:t.tintColor.startsWith("#")?d.hexToRgb(t.tintColor):t.tintColor,tintOpacity:t.tintOpacity,frostBlur:t.frostBlur,noiseFrequency:t.noiseFrequency,distortionStrength:t.distortionStrength,borderRadius:t.borderRadius}));return e.onMounted(()=>{o.value&&(r=new d.LiquidGlass(o.value,n.value))}),e.onUnmounted(()=>{r&&r.destroy()}),e.watch(n,s=>{r&&Object.entries(s).forEach(([u,l])=>{r.updateOption(u,l)})},{deep:!0}),{glassElement:o,wrapperStyles:a}}};function c(t,o,r,a,n,s){return e.openBlock(),e.createElementBlock("div",{ref:"glassElement",class:"solid-glass-wrapper",style:e.normalizeStyle(a.wrapperStyles)},[e.renderSlot(t.$slots,"default",{},void 0,!0)],4)}const h=i(f,[["render",c],["__scopeId","data-v-6eef1c7e"]]);module.exports=h;