@mizuui/liquid-glass-vue 0.1.0 → 0.1.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -1,61 +1,61 @@
|
|
|
1
|
-
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";
|
|
2
|
-
import { defaultOptions as t, createLiquidGlass as y } from "mizuui-liquid-glass-core";
|
|
3
|
-
const N = {
|
|
4
|
-
__name: "LiquidGlass",
|
|
5
|
-
props: {
|
|
6
|
-
/** Element or component to render as the glass surface. */
|
|
7
|
-
as: { type: [String, Object], default: "div" },
|
|
8
|
-
radius: { type: Number, default: t.radius },
|
|
9
|
-
depth: { type: Number, default: t.depth },
|
|
10
|
-
strength: { type: Number, default: t.strength },
|
|
11
|
-
falloff: { type: Number, default: t.falloff },
|
|
12
|
-
chromaticAberration: { type: Number, default: t.chromaticAberration },
|
|
13
|
-
blur: { type: Number, default: t.blur },
|
|
14
|
-
saturation: { type: Number, default: t.saturation },
|
|
15
|
-
brightness: { type: Number, default: t.brightness },
|
|
16
|
-
specular: { type: Number, default: t.specular },
|
|
17
|
-
resolution: { type: Number, default: t.resolution },
|
|
18
|
-
fallbackBlur: { type: Number, default: t.fallbackBlur }
|
|
19
|
-
},
|
|
20
|
-
setup(l, { expose: s }) {
|
|
21
|
-
const e = l, u = n(null);
|
|
22
|
-
let a = null;
|
|
23
|
-
const o = () => ({
|
|
24
|
-
radius: e.radius,
|
|
25
|
-
depth: e.depth,
|
|
26
|
-
strength: e.strength,
|
|
27
|
-
falloff: e.falloff,
|
|
28
|
-
chromaticAberration: e.chromaticAberration,
|
|
29
|
-
blur: e.blur,
|
|
30
|
-
saturation: e.saturation,
|
|
31
|
-
brightness: e.brightness,
|
|
32
|
-
specular: e.specular,
|
|
33
|
-
resolution: e.resolution,
|
|
34
|
-
fallbackBlur: e.fallbackBlur
|
|
35
|
-
});
|
|
36
|
-
return i(() => {
|
|
37
|
-
const r = u.value instanceof HTMLElement ? u.value : u.value?.$el;
|
|
38
|
-
r instanceof HTMLElement && (a = y(r, o()));
|
|
39
|
-
}), f(o, (r) => a?.update(r)), c(() => {
|
|
40
|
-
a?.destroy(), a = null;
|
|
41
|
-
}), s({
|
|
42
|
-
refresh: () => a?.refresh()
|
|
43
|
-
}), (r, g) => (p(), d(m(l.as), {
|
|
44
|
-
ref_key: "root",
|
|
45
|
-
ref: u
|
|
46
|
-
}, {
|
|
47
|
-
default: b(() => [
|
|
48
|
-
h(r.$slots, "default")
|
|
49
|
-
]),
|
|
50
|
-
_: 3
|
|
51
|
-
}, 512));
|
|
52
|
-
}
|
|
53
|
-
}, L = {
|
|
54
|
-
install(l, s = {}) {
|
|
55
|
-
l.component(s.name ?? "LiquidGlass", N);
|
|
56
|
-
}
|
|
57
|
-
};
|
|
58
|
-
export {
|
|
59
|
-
N as LiquidGlass,
|
|
60
|
-
L as default
|
|
61
|
-
};
|
|
1
|
+
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";
|
|
2
|
+
import { defaultOptions as t, createLiquidGlass as y } from "mizuui-liquid-glass-core";
|
|
3
|
+
const N = {
|
|
4
|
+
__name: "LiquidGlass",
|
|
5
|
+
props: {
|
|
6
|
+
/** Element or component to render as the glass surface. */
|
|
7
|
+
as: { type: [String, Object], default: "div" },
|
|
8
|
+
radius: { type: Number, default: t.radius },
|
|
9
|
+
depth: { type: Number, default: t.depth },
|
|
10
|
+
strength: { type: Number, default: t.strength },
|
|
11
|
+
falloff: { type: Number, default: t.falloff },
|
|
12
|
+
chromaticAberration: { type: Number, default: t.chromaticAberration },
|
|
13
|
+
blur: { type: Number, default: t.blur },
|
|
14
|
+
saturation: { type: Number, default: t.saturation },
|
|
15
|
+
brightness: { type: Number, default: t.brightness },
|
|
16
|
+
specular: { type: Number, default: t.specular },
|
|
17
|
+
resolution: { type: Number, default: t.resolution },
|
|
18
|
+
fallbackBlur: { type: Number, default: t.fallbackBlur }
|
|
19
|
+
},
|
|
20
|
+
setup(l, { expose: s }) {
|
|
21
|
+
const e = l, u = n(null);
|
|
22
|
+
let a = null;
|
|
23
|
+
const o = () => ({
|
|
24
|
+
radius: e.radius,
|
|
25
|
+
depth: e.depth,
|
|
26
|
+
strength: e.strength,
|
|
27
|
+
falloff: e.falloff,
|
|
28
|
+
chromaticAberration: e.chromaticAberration,
|
|
29
|
+
blur: e.blur,
|
|
30
|
+
saturation: e.saturation,
|
|
31
|
+
brightness: e.brightness,
|
|
32
|
+
specular: e.specular,
|
|
33
|
+
resolution: e.resolution,
|
|
34
|
+
fallbackBlur: e.fallbackBlur
|
|
35
|
+
});
|
|
36
|
+
return i(() => {
|
|
37
|
+
const r = u.value instanceof HTMLElement ? u.value : u.value?.$el;
|
|
38
|
+
r instanceof HTMLElement && (a = y(r, o()));
|
|
39
|
+
}), f(o, (r) => a?.update(r)), c(() => {
|
|
40
|
+
a?.destroy(), a = null;
|
|
41
|
+
}), s({
|
|
42
|
+
refresh: () => a?.refresh()
|
|
43
|
+
}), (r, g) => (p(), d(m(l.as), {
|
|
44
|
+
ref_key: "root",
|
|
45
|
+
ref: u
|
|
46
|
+
}, {
|
|
47
|
+
default: b(() => [
|
|
48
|
+
h(r.$slots, "default")
|
|
49
|
+
]),
|
|
50
|
+
_: 3
|
|
51
|
+
}, 512));
|
|
52
|
+
}
|
|
53
|
+
}, L = {
|
|
54
|
+
install(l, s = {}) {
|
|
55
|
+
l.component(s.name ?? "LiquidGlass", N);
|
|
56
|
+
}
|
|
57
|
+
};
|
|
58
|
+
export {
|
|
59
|
+
N as LiquidGlass,
|
|
60
|
+
L as default
|
|
61
|
+
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
(function(
|
|
1
|
+
(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"}})});
|
package/package.json
CHANGED
|
@@ -1,21 +1,21 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@mizuui/liquid-glass-vue",
|
|
3
|
-
"version": "0.1.
|
|
3
|
+
"version": "0.1.1",
|
|
4
4
|
"description": "A <LiquidGlass> component for Vue 3. Anything inside the tag sits on real refracting glass.",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"license": "MIT",
|
|
7
|
-
"main": "./
|
|
8
|
-
"module": "./
|
|
7
|
+
"main": "./dist/mizuui-liquid-glass-vue.umd.js",
|
|
8
|
+
"module": "./dist/mizuui-liquid-glass-vue.es.js",
|
|
9
9
|
"types": "./index.d.ts",
|
|
10
10
|
"exports": {
|
|
11
11
|
".": {
|
|
12
12
|
"types": "./index.d.ts",
|
|
13
|
-
"import": "./
|
|
14
|
-
"require": "./
|
|
13
|
+
"import": "./dist/mizuui-liquid-glass-vue.es.js",
|
|
14
|
+
"require": "./dist/mizuui-liquid-glass-vue.umd.js"
|
|
15
15
|
}
|
|
16
16
|
},
|
|
17
17
|
"files": [
|
|
18
|
-
"
|
|
18
|
+
"dist",
|
|
19
19
|
"index.d.ts",
|
|
20
20
|
"README.md"
|
|
21
21
|
],
|