@mizuui/liquid-glass-vue 0.1.0

package/README.md

@@ -0,0 +1,44 @@
+# mizuui-liquid-glass-vue
+
+`<LiquidGlass>` for Vue 3. Wrap anything and it sits on a pane of real glass —
+the backdrop is refracted through a bevel, not blurred into frost.
+
+```bash
+npm install mizuui-liquid-glass-vue
+```
+
+## Usage
+
+Per-component:
+
+```vue
+<script setup>
+import { LiquidGlass } from "mizuui-liquid-glass-vue";
+</script>
+
+<template>
+  <LiquidGlass :radius="28" :strength="80">
+    <h1>Anything in here sits on glass</h1>
+  </LiquidGlass>
+</template>
+```
+
+Or register it globally so the tag is available everywhere:
+
+```js
+import { createApp } from "vue";
+import LiquidGlassPlugin from "mizuui-liquid-glass-vue";
+
+createApp(App).use(LiquidGlassPlugin).mount("#app");
+```
+
+## Props
+
+All [`mizuui-liquid-glass-core`](../mizuui-liquid-glass-core/README.md) options are exposed as
+props: `radius`, `depth`, `strength`, `falloff`, `chromaticAberration`, `blur`,
+`saturation`, `brightness`, `specular`, `resolution`, `fallbackBlur`.
+
+`as` changes the rendered tag (default `div`).
+
+The effect needs something behind it to bend, and the element sizes itself from
+its content — give it padding and a width like any other element.

package/index.d.ts

@@ -0,0 +1,11 @@
+import type { DefineComponent, Plugin } from 'vue'
+import type { LiquidGlassOptions } from 'mizuui-liquid-glass-core'
+
+export interface LiquidGlassProps extends LiquidGlassOptions {
+  as?: string | object
+}
+
+export declare const LiquidGlass: DefineComponent<LiquidGlassProps>
+
+declare const plugin: Plugin
+export default plugin

package/lib/liquid-glass-vue.es.js

@@ -0,0 +1,61 @@
+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 = {
+  __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 }
+  },
+  setup(l, { expose: s }) {
+    const e = l, u = n(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
+    });
+    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(() => {
+      a?.destroy(), a = null;
+    }), s({
+      refresh: () => a?.refresh()
+    }), (r, g) => (p(), d(m(l.as), {
+      ref_key: "root",
+      ref: u
+    }, {
+      default: b(() => [
+        h(r.$slots, "default")
+      ]),
+      _: 3
+    }, 512));
+  }
+}, L = {
+  install(l, s = {}) {
+    l.component(s.name ?? "LiquidGlass", N);
+  }
+};
+export {
+  N as LiquidGlass,
+  L as default
+};

package/lib/liquid-glass-vue.umd.js

@@ -0,0 +1 @@
+(function(u,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):(u=typeof globalThis<"u"?globalThis:u||self,e(u.LiquidGlassVue={},u.Vue,u.LiquidGlassCore))})(this,function(u,e,t){"use strict";const f={__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(l,{expose:s}){const n=l,o=e.ref(null);let r=null;const i=()=>({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=o.value instanceof HTMLElement?o.value:o.value?.$el;a instanceof HTMLElement&&(r=t.createLiquidGlass(a,i()))}),e.watch(i,a=>r?.update(a)),e.onBeforeUnmount(()=>{r?.destroy(),r=null}),s({refresh:()=>r?.refresh()}),(a,p)=>(e.openBlock(),e.createBlock(e.resolveDynamicComponent(l.as),{ref_key:"root",ref:o},{default:e.withCtx(()=>[e.renderSlot(a.$slots,"default")]),_:3},512))}},d={install(l,s={}){l.component(s.name??"LiquidGlass",f)}};u.LiquidGlass=f,u.default=d,Object.defineProperties(u,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});

package/package.json

@@ -0,0 +1,42 @@
+{
+  "name": "@mizuui/liquid-glass-vue",
+  "version": "0.1.0",
+  "description": "A <LiquidGlass> component for Vue 3. Anything inside the tag sits on real refracting glass.",
+  "type": "module",
+  "license": "MIT",
+  "main": "./lib/mizuui-liquid-glass-vue.umd.js",
+  "module": "./lib/mizuui-liquid-glass-vue.es.js",
+  "types": "./index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./index.d.ts",
+      "import": "./lib/mizuui-liquid-glass-vue.es.js",
+      "require": "./lib/mizuui-liquid-glass-vue.umd.js"
+    }
+  },
+  "files": [
+    "lib",
+    "index.d.ts",
+    "README.md"
+  ],
+  "scripts": {
+    "build": "vite build"
+  },
+  "dependencies": {
+    "@mizuui/liquid-glass-core": "0.1.0"
+  },
+  "peerDependencies": {
+    "vue": "^3.4.0"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-vue": "^6.0.0",
+    "vite": "^7.0.0"
+  },
+  "keywords": [
+    "vue",
+    "vue3",
+    "liquid-glass",
+    "glassmorphism",
+    "refraction"
+  ]
+}