@mizuui/liquid-glass-vue 0.1.1 → 0.1.2

package/dist/mizuui-liquid-glass-vue.es.js

@@ -1,61 +1,279 @@
-import { ref as n, onMounted as i, watch as f, onBeforeUnmount as c, createBlock as d, openBlock as p, resolveDynamicComponent as m, withCtx as b, renderSlot as h } from "vue";
-import { defaultOptions as t, createLiquidGlass as y } from "mizuui-liquid-glass-core";
-const N = {
+import { ref as E, onMounted as R, watch as _, onBeforeUnmount as F, createBlock as H, openBlock as I, resolveDynamicComponent as P, withCtx as z, renderSlot as O } from "vue";
+const y = (e, r, t) => e < r ? r : e > t ? t : e;
+function T(e, r, t, s, a) {
+  const p = Math.abs(e) - (t - a), n = Math.abs(r) - (s - a), l = Math.max(p, 0), c = Math.max(n, 0), i = Math.hypot(l, c), u = Math.min(Math.max(p, n), 0) + i - a, o = e < 0 ? -1 : 1, d = r < 0 ? -1 : 1;
+  let h, g;
+  return i > 0 ? (h = o * l / i, g = d * c / i) : p > n ? (h = o, g = 0) : (h = 0, g = d), { distance: u, nx: h, ny: g };
+}
+function j({
+  width: e,
+  height: r,
+  radius: t = 24,
+  depth: s = 8,
+  falloff: a = 2,
+  resolution: p = 512
+}) {
+  const n = Math.min(1, p / Math.max(e, r, 1)), l = Math.max(1, Math.round(e * n)), c = Math.max(1, Math.round(r * n)), i = document.createElement("canvas");
+  i.width = l, i.height = c;
+  const u = i.getContext("2d"), o = u.createImageData(l, c), d = o.data, h = l / 2, g = c / 2, N = y(t * n, 0, Math.min(h, g)), B = y(s * n, 0.5, Math.min(h, g)), A = Math.max(0.1, a);
+  for (let x = 0; x < c; x++)
+    for (let v = 0; v < l; v++) {
+      const $ = v + 0.5 - h, q = x + 0.5 - g, { distance: C, nx: G, ny: L } = T($, q, h, g, N);
+      let S = 0;
+      if (C < 0) {
+        const D = -C;
+        S = Math.pow(1 - y(D / B, 0, 1), A);
+      }
+      const k = (x * l + v) * 4;
+      d[k] = y(Math.round(128 + G * S * 127), 0, 255), d[k + 1] = y(Math.round(128 + L * S * 127), 0, 255), d[k + 2] = 128, d[k + 3] = 255;
+    }
+  return u.putImageData(o, 0, 0), { href: i.toDataURL(), width: l, height: c };
+}
+const w = "http://www.w3.org/2000/svg", U = "http://www.w3.org/1999/xlink";
+let b = null;
+function W() {
+  return b && b.isConnected || (b = document.createElementNS(w, "svg"), b.setAttribute("aria-hidden", "true"), b.setAttribute("focusable", "false"), b.dataset.liquidGlass = "filters", b.style.cssText = "position:absolute;width:0;height:0;overflow:hidden;pointer-events:none;", document.body.appendChild(b)), b;
+}
+function m(e, r) {
+  const t = document.createElementNS(w, e);
+  for (const s in r) t.setAttribute(s, r[s]);
+  return t;
+}
+function K(e, r) {
+  return `${{
+    r: "1 0 0 0 0  0 0 0 0 0  0 0 0 0 0",
+    g: "0 0 0 0 0  0 1 0 0 0  0 0 0 0 0",
+    b: "0 0 0 0 0  0 0 0 0 0  0 0 1 0 0"
+  }[e]}  0 0 0 ${r ? 1 : 0} 0`;
+}
+function V(e) {
+  const r = m("filter", {
+    id: e,
+    "color-interpolation-filters": "sRGB",
+    x: "0",
+    y: "0",
+    width: "100%",
+    height: "100%"
+  });
+  return W().appendChild(r), {
+    url: `url(#${e})`,
+    update({ map: t, scale: s, aberration: a, blur: p }) {
+      r.replaceChildren();
+      const n = m("feImage", {
+        result: "map",
+        preserveAspectRatio: "none",
+        x: "0",
+        y: "0",
+        width: String(t.displayWidth),
+        height: String(t.displayHeight)
+      });
+      n.setAttribute("href", t.href), n.setAttributeNS(U, "xlink:href", t.href), r.appendChild(n);
+      const l = (i, u) => m("feDisplacementMap", {
+        in: "SourceGraphic",
+        in2: "map",
+        scale: String(i),
+        xChannelSelector: "R",
+        yChannelSelector: "G",
+        result: u
+      });
+      let c = "refracted";
+      a > 0 ? ([
+        ["r", s + a],
+        ["g", s],
+        ["b", s - a]
+      ].forEach(([u, o], d) => {
+        r.appendChild(l(o, `pass-${u}`)), r.appendChild(
+          m("feColorMatrix", {
+            in: `pass-${u}`,
+            type: "matrix",
+            values: K(u, d === 0),
+            result: `channel-${u}`
+          })
+        );
+      }), r.appendChild(
+        m("feComposite", {
+          in: "channel-r",
+          in2: "channel-g",
+          operator: "arithmetic",
+          k2: "1",
+          k3: "1",
+          result: "rg"
+        })
+      ), r.appendChild(
+        m("feComposite", {
+          in: "rg",
+          in2: "channel-b",
+          operator: "arithmetic",
+          k2: "1",
+          k3: "1",
+          result: "refracted"
+        })
+      )) : r.appendChild(l(s, "refracted")), p > 0 && (r.appendChild(
+        m("feGaussianBlur", { in: c, stdDeviation: String(p), result: "blurred" })
+      ), c = "blurred");
+    },
+    destroy() {
+      r.remove();
+    }
+  };
+}
+const M = "mizuui-liquid-glass-core-styles", X = `
+.liquid-glass {
+  position: relative;
+  isolation: isolate;
+  border-radius: var(--lg-radius, 24px);
+  -webkit-backdrop-filter: var(--lg-backdrop, none);
+  backdrop-filter: var(--lg-backdrop, none);
+  transform: translateZ(0);
+}
+
+.liquid-glass::after {
+  content: '';
+  position: absolute;
+  inset: 0;
+  z-index: 1;
+  border-radius: inherit;
+  pointer-events: none;
+  box-shadow:
+    inset 2px 2px 1px -2px rgba(255, 255, 255, calc(0.9 * var(--lg-specular, 1))),
+    inset -1.5px -1.5px 1px -1.5px rgba(255, 255, 255, calc(0.6 * var(--lg-specular, 1))),
+    inset 0 0 6px 1px rgba(255, 255, 255, calc(0.25 * var(--lg-specular, 1)));
+}
+`;
+function Y() {
+  if (typeof document > "u" || document.getElementById(M)) return;
+  const e = document.createElement("style");
+  e.id = M, e.textContent = X, document.head.appendChild(e);
+}
+const f = {
+  /** Corner radius in px. Keep in sync with any border-radius you set yourself. */
+  radius: 30,
+  /** Thickness of the refracting bevel in px. */
+  depth: 35,
+  /** Maximum backdrop displacement in px. This is the strength of the lensing. */
+  strength: 120,
+  /** Falloff curve of the bevel. Higher = the bend is pushed closer to the edge. */
+  falloff: 2,
+  /** Per-channel offset in px. Gives the prism fringe real glass has. */
+  chromaticAberration: 0,
+  /** Backdrop blur in px. Leave at 0 — blur is frosted glass, not liquid glass. */
+  blur: 15,
+  /** Backdrop saturation multiplier. */
+  saturation: 3,
+  /** Backdrop brightness multiplier. */
+  brightness: 1.04,
+  /** Specular rim intensity, 0 disables it. */
+  specular: 1,
+  /** Max pixel size of the generated displacement map. */
+  resolution: 512,
+  /** Blur used when the browser cannot run SVG filters in a backdrop-filter. */
+  fallbackBlur: 8
+};
+let Z = 0;
+function J() {
+  return typeof CSS > "u" || !CSS.supports ? !1 : CSS.supports("backdrop-filter", "url(#x)") && !/\bGecko\/\b/.test(navigator.userAgent ?? "");
+}
+function Q(e, r = {}) {
+  Y();
+  let t = { ...f, ...r }, s = !1, a = 0;
+  const n = J() ? V(`liquid-glass-${++Z}`) : null;
+  e.classList.add("liquid-glass");
+  function l() {
+    const o = [];
+    t.brightness !== 1 && o.push(`brightness(${t.brightness})`), t.saturation !== 1 && o.push(`saturate(${t.saturation})`), n ? (t.blur > 0 && o.push(`blur(${t.blur}px)`), o.push(n.url)) : t.fallbackBlur > 0 && o.push(`blur(${t.fallbackBlur}px)`), e.style.setProperty("--lg-backdrop", o.join(" ") || "none"), e.style.setProperty("--lg-radius", `${t.radius}px`), e.style.setProperty("--lg-specular", String(t.specular));
+  }
+  function c() {
+    if (a = 0, s || !n) return;
+    const { width: o, height: d } = e.getBoundingClientRect();
+    if (o < 1 || d < 1) return;
+    const h = j({
+      width: o,
+      height: d,
+      radius: t.radius,
+      depth: t.depth,
+      falloff: t.falloff,
+      resolution: t.resolution
+    });
+    n.update({
+      map: { ...h, displayWidth: o, displayHeight: d },
+      scale: t.strength,
+      aberration: t.chromaticAberration,
+      blur: 0
+    });
+  }
+  function i() {
+    s || a || (a = requestAnimationFrame(c));
+  }
+  const u = typeof ResizeObserver < "u" ? new ResizeObserver(i) : null;
+  return u?.observe(e), l(), i(), {
+    get options() {
+      return { ...t };
+    },
+    update(o = {}) {
+      t = { ...t, ...o }, l(), i();
+    },
+    refresh: i,
+    destroy() {
+      s || (s = !0, a && cancelAnimationFrame(a), u?.disconnect(), n?.destroy(), e.classList.remove("liquid-glass"), e.style.removeProperty("--lg-backdrop"), e.style.removeProperty("--lg-radius"), e.style.removeProperty("--lg-specular"));
+    }
+  };
+}
+const tt = {
   __name: "LiquidGlass",
   props: {
     /** Element or component to render as the glass surface. */
     as: { type: [String, Object], default: "div" },
-    radius: { type: Number, default: t.radius },
-    depth: { type: Number, default: t.depth },
-    strength: { type: Number, default: t.strength },
-    falloff: { type: Number, default: t.falloff },
-    chromaticAberration: { type: Number, default: t.chromaticAberration },
-    blur: { type: Number, default: t.blur },
-    saturation: { type: Number, default: t.saturation },
-    brightness: { type: Number, default: t.brightness },
-    specular: { type: Number, default: t.specular },
-    resolution: { type: Number, default: t.resolution },
-    fallbackBlur: { type: Number, default: t.fallbackBlur }
+    radius: { type: Number, default: f.radius },
+    depth: { type: Number, default: f.depth },
+    strength: { type: Number, default: f.strength },
+    falloff: { type: Number, default: f.falloff },
+    chromaticAberration: { type: Number, default: f.chromaticAberration },
+    blur: { type: Number, default: f.blur },
+    saturation: { type: Number, default: f.saturation },
+    brightness: { type: Number, default: f.brightness },
+    specular: { type: Number, default: f.specular },
+    resolution: { type: Number, default: f.resolution },
+    fallbackBlur: { type: Number, default: f.fallbackBlur }
   },
-  setup(l, { expose: s }) {
-    const e = l, u = n(null);
+  setup(e, { expose: r }) {
+    const t = e, s = E(null);
     let a = null;
-    const o = () => ({
-      radius: e.radius,
-      depth: e.depth,
-      strength: e.strength,
-      falloff: e.falloff,
-      chromaticAberration: e.chromaticAberration,
-      blur: e.blur,
-      saturation: e.saturation,
-      brightness: e.brightness,
-      specular: e.specular,
-      resolution: e.resolution,
-      fallbackBlur: e.fallbackBlur
+    const p = () => ({
+      radius: t.radius,
+      depth: t.depth,
+      strength: t.strength,
+      falloff: t.falloff,
+      chromaticAberration: t.chromaticAberration,
+      blur: t.blur,
+      saturation: t.saturation,
+      brightness: t.brightness,
+      specular: t.specular,
+      resolution: t.resolution,
+      fallbackBlur: t.fallbackBlur
     });
-    return i(() => {
-      const r = u.value instanceof HTMLElement ? u.value : u.value?.$el;
-      r instanceof HTMLElement && (a = y(r, o()));
-    }), f(o, (r) => a?.update(r)), c(() => {
+    return R(() => {
+      const n = s.value instanceof HTMLElement ? s.value : s.value?.$el;
+      n instanceof HTMLElement && (a = Q(n, p()));
+    }), _(p, (n) => a?.update(n)), F(() => {
       a?.destroy(), a = null;
-    }), s({
+    }), r({
       refresh: () => a?.refresh()
-    }), (r, g) => (p(), d(m(l.as), {
+    }), (n, l) => (I(), H(P(e.as), {
       ref_key: "root",
-      ref: u
+      ref: s
     }, {
-      default: b(() => [
-        h(r.$slots, "default")
+      default: z(() => [
+        O(n.$slots, "default")
       ]),
       _: 3
     }, 512));
   }
-}, L = {
-  install(l, s = {}) {
-    l.component(s.name ?? "LiquidGlass", N);
+}, rt = {
+  install(e, r = {}) {
+    e.component(r.name ?? "LiquidGlass", tt);
   }
 };
 export {
-  N as LiquidGlass,
-  L as default
+  tt as LiquidGlass,
+  rt as default
 };

package/dist/mizuui-liquid-glass-vue.umd.js

@@ -1 +1,23 @@
-(function(l,e){typeof exports=="object"&&typeof module<"u"?e(exports,require("vue"),require("mizuui-liquid-glass-core")):typeof define=="function"&&define.amd?define(["exports","vue","mizuui-liquid-glass-core"],e):(l=typeof globalThis<"u"?globalThis:l||self,e(l.LiquidGlassVue={},l.Vue,l.LiquidGlassCore))})(this,function(l,e,t){"use strict";const u={__name:"LiquidGlass",props:{as:{type:[String,Object],default:"div"},radius:{type:Number,default:t.defaultOptions.radius},depth:{type:Number,default:t.defaultOptions.depth},strength:{type:Number,default:t.defaultOptions.strength},falloff:{type:Number,default:t.defaultOptions.falloff},chromaticAberration:{type:Number,default:t.defaultOptions.chromaticAberration},blur:{type:Number,default:t.defaultOptions.blur},saturation:{type:Number,default:t.defaultOptions.saturation},brightness:{type:Number,default:t.defaultOptions.brightness},specular:{type:Number,default:t.defaultOptions.specular},resolution:{type:Number,default:t.defaultOptions.resolution},fallbackBlur:{type:Number,default:t.defaultOptions.fallbackBlur}},setup(o,{expose:f}){const n=o,s=e.ref(null);let r=null;const d=()=>({radius:n.radius,depth:n.depth,strength:n.strength,falloff:n.falloff,chromaticAberration:n.chromaticAberration,blur:n.blur,saturation:n.saturation,brightness:n.brightness,specular:n.specular,resolution:n.resolution,fallbackBlur:n.fallbackBlur});return e.onMounted(()=>{const a=s.value instanceof HTMLElement?s.value:s.value?.$el;a instanceof HTMLElement&&(r=t.createLiquidGlass(a,d()))}),e.watch(d,a=>r?.update(a)),e.onBeforeUnmount(()=>{r?.destroy(),r=null}),f({refresh:()=>r?.refresh()}),(a,c)=>(e.openBlock(),e.createBlock(e.resolveDynamicComponent(o.as),{ref_key:"root",ref:s},{default:e.withCtx(()=>[e.renderSlot(a.$slots,"default")]),_:3},512))}},p={install(o,f={}){o.component(f.name??"LiquidGlass",u)}};l.LiquidGlass=u,l.default=p,Object.defineProperties(l,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});
+(function(y,c){typeof exports=="object"&&typeof module<"u"?c(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],c):(y=typeof globalThis<"u"?globalThis:y||self,c(y.LiquidGlassVue={},y.Vue))})(this,function(y,c){"use strict";const S=(t,r,e)=>t<r?r:t>e?e:t;function A(t,r,e,s,a){const h=Math.abs(t)-(e-a),n=Math.abs(r)-(s-a),l=Math.max(h,0),d=Math.max(n,0),o=Math.hypot(l,d),u=Math.min(Math.max(h,n),0)+o-a,i=t<0?-1:1,p=r<0?-1:1;let b,m;return o>0?(b=i*l/o,m=p*d/o):h>n?(b=i,m=0):(b=0,m=p),{distance:u,nx:b,ny:m}}function $({width:t,height:r,radius:e=24,depth:s=8,falloff:a=2,resolution:h=512}){const n=Math.min(1,h/Math.max(t,r,1)),l=Math.max(1,Math.round(t*n)),d=Math.max(1,Math.round(r*n)),o=document.createElement("canvas");o.width=l,o.height=d;const u=o.getContext("2d"),i=u.createImageData(l,d),p=i.data,b=l/2,m=d/2,I=S(e*n,0,Math.min(b,m)),j=S(s*n,.5,Math.min(b,m)),O=Math.max(.1,a);for(let k=0;k<d;k++)for(let M=0;M<l;M++){const z=M+.5-b,U=k+.5-m,{distance:B,nx:V,ny:W}=A(z,U,b,m,I);let C=0;if(B<0){const K=-B;C=Math.pow(1-S(K/j,0,1),O)}const v=(k*l+M)*4;p[v]=S(Math.round(128+V*C*127),0,255),p[v+1]=S(Math.round(128+W*C*127),0,255),p[v+2]=128,p[v+3]=255}return u.putImageData(i,0,0),{href:o.toDataURL(),width:l,height:d}}const w="http://www.w3.org/2000/svg",G="http://www.w3.org/1999/xlink";let g=null;function L(){return g&&g.isConnected||(g=document.createElementNS(w,"svg"),g.setAttribute("aria-hidden","true"),g.setAttribute("focusable","false"),g.dataset.liquidGlass="filters",g.style.cssText="position:absolute;width:0;height:0;overflow:hidden;pointer-events:none;",document.body.appendChild(g)),g}function x(t,r){const e=document.createElementNS(w,t);for(const s in r)e.setAttribute(s,r[s]);return e}function _(t,r){return`${{r:"1 0 0 0 0  0 0 0 0 0  0 0 0 0 0",g:"0 0 0 0 0  0 1 0 0 0  0 0 0 0 0",b:"0 0 0 0 0  0 0 0 0 0  0 0 1 0 0"}[t]}  0 0 0 ${r?1:0} 0`}function D(t){const r=x("filter",{id:t,"color-interpolation-filters":"sRGB",x:"0",y:"0",width:"100%",height:"100%"});return L().appendChild(r),{url:`url(#${t})`,update({map:e,scale:s,aberration:a,blur:h}){r.replaceChildren();const n=x("feImage",{result:"map",preserveAspectRatio:"none",x:"0",y:"0",width:String(e.displayWidth),height:String(e.displayHeight)});n.setAttribute("href",e.href),n.setAttributeNS(G,"xlink:href",e.href),r.appendChild(n);const l=(o,u)=>x("feDisplacementMap",{in:"SourceGraphic",in2:"map",scale:String(o),xChannelSelector:"R",yChannelSelector:"G",result:u});let d="refracted";a>0?([["r",s+a],["g",s],["b",s-a]].forEach(([u,i],p)=>{r.appendChild(l(i,`pass-${u}`)),r.appendChild(x("feColorMatrix",{in:`pass-${u}`,type:"matrix",values:_(u,p===0),result:`channel-${u}`}))}),r.appendChild(x("feComposite",{in:"channel-r",in2:"channel-g",operator:"arithmetic",k2:"1",k3:"1",result:"rg"})),r.appendChild(x("feComposite",{in:"rg",in2:"channel-b",operator:"arithmetic",k2:"1",k3:"1",result:"refracted"}))):r.appendChild(l(s,"refracted")),h>0&&(r.appendChild(x("feGaussianBlur",{in:d,stdDeviation:String(h),result:"blurred"})),d="blurred")},destroy(){r.remove()}}}const N="mizuui-liquid-glass-core-styles",E=`
+.liquid-glass {
+  position: relative;
+  isolation: isolate;
+  border-radius: var(--lg-radius, 24px);
+  -webkit-backdrop-filter: var(--lg-backdrop, none);
+  backdrop-filter: var(--lg-backdrop, none);
+  transform: translateZ(0);
+}
+
+.liquid-glass::after {
+  content: '';
+  position: absolute;
+  inset: 0;
+  z-index: 1;
+  border-radius: inherit;
+  pointer-events: none;
+  box-shadow:
+    inset 2px 2px 1px -2px rgba(255, 255, 255, calc(0.9 * var(--lg-specular, 1))),
+    inset -1.5px -1.5px 1px -1.5px rgba(255, 255, 255, calc(0.6 * var(--lg-specular, 1))),
+    inset 0 0 6px 1px rgba(255, 255, 255, calc(0.25 * var(--lg-specular, 1)));
+}
+`;function R(){if(typeof document>"u"||document.getElementById(N))return;const t=document.createElement("style");t.id=N,t.textContent=E,document.head.appendChild(t)}const f={radius:30,depth:35,strength:120,falloff:2,chromaticAberration:0,blur:15,saturation:3,brightness:1.04,specular:1,resolution:512,fallbackBlur:8};let F=0;function H(){return typeof CSS>"u"||!CSS.supports?!1:CSS.supports("backdrop-filter","url(#x)")&&!/\bGecko\/\b/.test(navigator.userAgent??"")}function P(t,r={}){R();let e={...f,...r},s=!1,a=0;const n=H()?D(`liquid-glass-${++F}`):null;t.classList.add("liquid-glass");function l(){const i=[];e.brightness!==1&&i.push(`brightness(${e.brightness})`),e.saturation!==1&&i.push(`saturate(${e.saturation})`),n?(e.blur>0&&i.push(`blur(${e.blur}px)`),i.push(n.url)):e.fallbackBlur>0&&i.push(`blur(${e.fallbackBlur}px)`),t.style.setProperty("--lg-backdrop",i.join(" ")||"none"),t.style.setProperty("--lg-radius",`${e.radius}px`),t.style.setProperty("--lg-specular",String(e.specular))}function d(){if(a=0,s||!n)return;const{width:i,height:p}=t.getBoundingClientRect();if(i<1||p<1)return;const b=$({width:i,height:p,radius:e.radius,depth:e.depth,falloff:e.falloff,resolution:e.resolution});n.update({map:{...b,displayWidth:i,displayHeight:p},scale:e.strength,aberration:e.chromaticAberration,blur:0})}function o(){s||a||(a=requestAnimationFrame(d))}const u=typeof ResizeObserver<"u"?new ResizeObserver(o):null;return u?.observe(t),l(),o(),{get options(){return{...e}},update(i={}){e={...e,...i},l(),o()},refresh:o,destroy(){s||(s=!0,a&&cancelAnimationFrame(a),u?.disconnect(),n?.destroy(),t.classList.remove("liquid-glass"),t.style.removeProperty("--lg-backdrop"),t.style.removeProperty("--lg-radius"),t.style.removeProperty("--lg-specular"))}}}const q={__name:"LiquidGlass",props:{as:{type:[String,Object],default:"div"},radius:{type:Number,default:f.radius},depth:{type:Number,default:f.depth},strength:{type:Number,default:f.strength},falloff:{type:Number,default:f.falloff},chromaticAberration:{type:Number,default:f.chromaticAberration},blur:{type:Number,default:f.blur},saturation:{type:Number,default:f.saturation},brightness:{type:Number,default:f.brightness},specular:{type:Number,default:f.specular},resolution:{type:Number,default:f.resolution},fallbackBlur:{type:Number,default:f.fallbackBlur}},setup(t,{expose:r}){const e=t,s=c.ref(null);let a=null;const h=()=>({radius:e.radius,depth:e.depth,strength:e.strength,falloff:e.falloff,chromaticAberration:e.chromaticAberration,blur:e.blur,saturation:e.saturation,brightness:e.brightness,specular:e.specular,resolution:e.resolution,fallbackBlur:e.fallbackBlur});return c.onMounted(()=>{const n=s.value instanceof HTMLElement?s.value:s.value?.$el;n instanceof HTMLElement&&(a=P(n,h()))}),c.watch(h,n=>a?.update(n)),c.onBeforeUnmount(()=>{a?.destroy(),a=null}),r({refresh:()=>a?.refresh()}),(n,l)=>(c.openBlock(),c.createBlock(c.resolveDynamicComponent(t.as),{ref_key:"root",ref:s},{default:c.withCtx(()=>[c.renderSlot(n.$slots,"default")]),_:3},512))}},T={install(t,r={}){t.component(r.name??"LiquidGlass",q)}};y.LiquidGlass=q,y.default=T,Object.defineProperties(y,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});

package/index.d.ts

@@ -1,5 +1,5 @@
 import type { DefineComponent, Plugin } from 'vue'
-import type { LiquidGlassOptions } from 'mizuui-liquid-glass-core'
+import type { LiquidGlassOptions } from '@mizuui/liquid-glass-core'
 
 export interface LiquidGlassProps extends LiquidGlassOptions {
   as?: string | object

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mizuui/liquid-glass-vue",
-  "version": "0.1.1",
+  "version": "0.1.2",
   "description": "A <LiquidGlass> component for Vue 3. Anything inside the tag sits on real refracting glass.",
   "type": "module",
   "license": "MIT",
@@ -23,7 +23,7 @@
     "build": "vite build"
   },
   "dependencies": {
-    "@mizuui/liquid-glass-core": "0.1.0"
+    "@mizuui/liquid-glass-core": "^0.1.0"
   },
   "peerDependencies": {
     "vue": "^3.4.0"