@scriptedpixels/liquid-glass-vue 0.0.6 → 0.0.7

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.
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@scriptedpixels/liquid-glass-vue",
3
- "version": "0.0.6",
3
+ "version": "0.0.7",
4
4
  "description": "Apple's Liquid Glass effect for Vue",
5
5
  "keywords": [
6
6
  "vue",
@@ -12,7 +12,7 @@
12
12
  ],
13
13
  "main": "dist/index.cjs",
14
14
  "module": "dist/index.js",
15
- "types": "dist/types/index.d.ts",
15
+ "types": "dist/types/main.d.ts",
16
16
  "files": ["dist"],
17
17
  "author": "Scripted Pixels: Kam Banwait",
18
18
  "license": "MIT",
package/dist/index.css DELETED
File without changes
package/dist/index.js DELETED
@@ -1,491 +0,0 @@
1
- import { defineComponent as K, computed as c, createElementBlock as I, openBlock as C, normalizeStyle as p, createElementVNode as i, createStaticVNode as H, unref as j, ref as v, normalizeClass as M, createVNode as V, renderSlot as w, onMounted as G, watch as _, onUnmounted as $, Fragment as D, createCommentVNode as X, withCtx as ee, createBlock as te, createApp as ae } from "vue";
2
- const ie = "data:image/jpeg;base64,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cUAUAkEkziomgGgkoxZGgxZFQFQlYnQHRdPfj/10KCSCKESCNiVkViPSLpD0h6I0Q0I0A2IoBWBIJIBKBIJoJIJ2R2J0JWBUJ0JUB0XTv479dFZDYiglYigkhEgjZFQjRFQjRFQjQigFYigHYigmgEgmglYlYnQlQlYlQHQlQnQ9P/kf1yVkNiNCNkNiVENiNiViNEViNkVCVgKCViViViSCViSCVgdCViVCViVCdgVCVCdD1D+U/XBWQ2I0I2Q2JUQ2I0JWQ0I2JUQ2JUI2JUI2J0JWJWJWA2R0BWJ0I2JUJ2BUJUJ0P//EABkQAQEBAQEBAAAAAAAAAAAAAAECABEDEP/aAAgBAQABAgB1atWrVq1atWrVq1atWrVq1atWrVq1atWrVq+OrVq1atWrVq1atWrVq1atWrVq1atWrVq1atXxVppppppdWrVq1atWrVq1NNNNNNNNNNNPVWmmmmms6tWrVq1atWpppppppppppppp6q0000uc51atWrVq1ammmmmmmmmmmmmt1Vpppc5znVq1atWrVqaaaaaaaaaaaaaeqtNLnOc51atWrVq1ammmmmmmmmmmmmnqrS5znOc6tWrVq16222mmmmmmlVppp6tKuc5znOrVq1a9TbbbbTTTTTSq000qtLnOc5zq1atWrW0222200000qqqtKqrnOc5zq1atTbbbbbbbbTTTSqqqqqq5znOc6tTTTbbbbbbbbTTTSqqqqrlVznOctNNNtttttttttNNNNKqqqrqznKqrTTTTbbbbbbbbbTTTSqqqqrqznOc5aaaabbbbbbbbbaaaaVVVVVdWc5znVq1NNttttttttttNNKqqqqudWc5znVq16tbbbbbbbbbbTTSqqqq5XVnOc6tWrVrb1tttttttttNNKqqqqrWrK5VWmmm2230bbbbbbaaaXOc5zlVa1KuVVppptttt9G22222mmlzlVznK6tWVVWmmmm2222222222mlznOc5znLWppVVWmmm22222229bTWrOc5znOcq1qaaVpWmm222222229erVqznOc5znKtatStK0rTbTTbbbberXr1as5znOc5aVpppppWlabaabbbb1ta9WrVnOc5znU0rTTTTTTTTTbTTbbbTWvVq1as5znOdTTStNNNNNNNNNtNNtttN6tWvVq1ZznOrU00rTTTTTTTTTTTTTbTWvVq1atWrOc6tTTTStNNNNNNNNNNtNNtNa9WrVq1Z1Z1NNNNNK1q1NNNNNNNNNNNtNatWrVq1atWrU00000rWrVq1atWrVq1alaaa1atWrVq1NNNammmmla1atWrVq1aterVq16tWrVnVqa1NK1qaaaVX/xAAWEAADAAAAAAAAAAAAAAAAAAAhgJD/2gAIAQEAAz8AaExf/8QAGhEBAQEBAQEBAAAAAAAAAAAAAQISEQADEP/aAAgBAgEBAgDx48ePHjx48ePHjx48ePHjx48ePHjx48ePHj86IiIiIiInjx48ePHjx48IiIiIj0oooooooooRERER73ve60UUUUUUVrWiiiiiihERERER73ve97ooooorRWiiiiihKERERER73ve973RRRRWtFFFFFFCIiIiIiPe973ve60UUVrRRRRRRQiIlCIiI973ve973pRRWiiiiiiiiiiiiiiihEe973ve973RRWtFFFFFFFFFFFFFFFFFFa13ve973WitaKKKKKKKKKKKKKKKKKK1rWtd1rutFa1oooooooooooosssooorWta1rWta1rRRRRRRRRRRZZZZZZZZZWta1rWta1rRRRRRRRRZZZZZZZZZZZZe9a1rWta1rWitaKLLLLLLLLLLLLLLLLL3rWta1rWtFbLLLLLLLLLLLLLLLLLLLL3vWta1rWita1ssssssss+hZZZZZZZZe961rWta0Vre97LLLLLLLLLLLPoWWWWWXrWta1oorWta3ssss+hZZZZ9Cyyyyyyyyiita1orWta1ve9llllllllllllllllFFa0VorWta1ve9llllllllllllllllllFFFaK1rWta1rWiyyyyyyyyyyyyiiiiiiitFFa1rWta1oosoosssssoooosoooorRRRWta1rWta0UUUUUWUUUUUUUUUUUVoooorWta1rWtaKKKKKKmiiiiiiiiiiiiiiitd73ve61oSiiipoqaKKKKKKKKKK0UUUVrve973vREREZoSihEooooorRRRRWtd73ve9EREREREoSiiiiitFllllla73ve9ERERERESiiiiiitH0PoWWWWVrXe96IiIiMoiJRRRRRRWjwlFFllllFFd6IiIiIlCUUUUUUUUUePHjx48ePCIiIiIiIiUUUUUUUUUUUePHjx48ePHjx48ePHjx48IiUUUUUUJRRRX//xAAWEQADAAAAAAAAAAAAAAAAAAABYJD/2gAIAQIBAz8AtEV7/8QAFxEBAQEBAAAAAAAAAAAAAAAAAAECEP/aAAgBAwEBAgCtNNNNNNNNNNNNNNNNNNNNNNNNNNNNNcrTTTTTTTTTTTTTTTTTTTTTTTTTTTTTXKrTTTTTTTU000000000000000000001FVpppppqampqaaaaaaaaaaaaaaaaaaaa5Vaaaaampqampqammmmmmmmmmmlaaaaaaiq0001NTU1NTU1NTTTTTTTTTTSqqtNNNcqtNNSyzU1LNTU1NTTTTTTTTTSqqq001ytNLLLLNTU1NTU1NTbbbTTTTTSqqq001ytNLLLLLNTU1NTU3NttttNNNNNKqq001KrSyyyyyzU1NTU3Nzc02220000qqqqrSqqyyyyyzU1NTU3Nzc3NttttNNNKqqqqqqssssss1NTU3Nzc3NzbbbbTTTSqqqqqqrLLLLLNTU1Nzc3Nzc22220000qqqqqqqqssss1NTU3Nzc3NzbbbbbTTSqqqqqqqqqqzU1NTc3Nzc3Nzbc22000qqqqqqqqqqqtTU3Nzc3Nzc3NtzbTTSqqqqrKqqqqqtNNzc23Nzc3Nzc3NTU1KqqqrKqqqqqtNNNNttzc3Nzc3NzU1NLLLLLKqqqqqqqq0022223Nzc3NzU1NSyyyyyyqqqqqqqrTTbbbbc3Nzc3NTU1LLLLLLKsqqqqqqrTTTTbbbc3Nzc1NTUsssssssqqqqqqrTTTTTbbbTc3NTU1NTUsssssqqqqqqqq0000222023NTU1NTUsssssqqqqqqqq000000003NTU1NTU1LLLLLNKrTSqqqqtNNNNNNtNNTU1NSzUssss00qq0qqqqrTTTTTTTTTU1NTUs1LLLNNNKrTTTSqqq00000000001NTU1LNTU0000qtNNNKqqqtNNNNNNNNTU1NTUs1NNNNNKss1NNNK00qtK0000001NNTU0s000000qq000001NKrStNNNNK1NNNNStNNNNNKqtNNNNNNNK0000000rU0000rTTTTTSq00000rTTTTTTTTTTTTTTTTStNNNNKr/xAAUEQEAAAAAAAAAAAAAAAAAAACg/9oACAEDAQM/AAAf/9k=", ne = ["id"], le = ["offset"], se = ["id"], oe = ["href"], re = {
3
- in: "EDGE_INTENSITY",
4
- result: "EDGE_MASK"
5
- }, ue = ["tableValues"], ce = ["scale"], Ae = ["scale"], de = ["scale"], Ne = ["stdDeviation"], P = /* @__PURE__ */ K({
6
- __name: "GlassFilter",
7
- props: {
8
- id: {},
9
- displacementScale: {},
10
- aberrationIntensity: {},
11
- width: {},
12
- height: {}
13
- },
14
- setup(T) {
15
- const e = T, r = c(() => Math.max(30, 80 - e.aberrationIntensity * 2)), s = c(() => e.displacementScale * -1), u = c(() => e.displacementScale * (-1 - e.aberrationIntensity * 0.05)), l = c(() => e.displacementScale * (-1 - e.aberrationIntensity * 0.1)), h = c(() => Math.max(0.1, 0.5 - e.aberrationIntensity * 0.1)), g = c(() => `0 ${e.aberrationIntensity * 0.05} 1`);
16
- return (A, t) => (C(), I("svg", {
17
- style: p({ position: "absolute", width: e.width + "px", height: e.height + "px" }),
18
- "aria-hidden": "true"
19
- }, [
20
- i("defs", null, [
21
- i("radialGradient", {
22
- id: `${e.id}-edge-mask`,
23
- cx: "50%",
24
- cy: "50%",
25
- r: "50%"
26
- }, [
27
- t[0] || (t[0] = i("stop", {
28
- offset: "0%",
29
- "stop-color": "black",
30
- "stop-opacity": "0"
31
- }, null, -1)),
32
- i("stop", {
33
- offset: `${r.value}%`,
34
- "stop-color": "black",
35
- "stop-opacity": "0"
36
- }, null, 8, le),
37
- t[1] || (t[1] = i("stop", {
38
- offset: "100%",
39
- "stop-color": "white",
40
- "stop-opacity": "1"
41
- }, null, -1))
42
- ], 8, ne),
43
- i("filter", {
44
- id: e.id,
45
- x: "-35%",
46
- y: "-35%",
47
- width: "170%",
48
- height: "170%",
49
- "color-interpolation-filters": "sRGB"
50
- }, [
51
- i("feImage", {
52
- id: "feimage",
53
- x: "0",
54
- y: "0",
55
- width: "100%",
56
- height: "100%",
57
- result: "DISPLACEMENT_MAP",
58
- href: j(ie),
59
- preserveAspectRatio: "xMidYMid slice"
60
- }, null, 8, oe),
61
- t[2] || (t[2] = i("feColorMatrix", {
62
- in: "DISPLACEMENT_MAP",
63
- type: "matrix",
64
- values: `0.3 0.3 0.3 0 0
65
- 0.3 0.3 0.3 0 0
66
- 0.3 0.3 0.3 0 0
67
- 0 0 0 1 0`,
68
- result: "EDGE_INTENSITY"
69
- }, null, -1)),
70
- i("feComponentTransfer", re, [
71
- i("feFuncA", {
72
- type: "discrete",
73
- tableValues: g.value
74
- }, null, 8, ue)
75
- ]),
76
- t[3] || (t[3] = i("feOffset", {
77
- in: "SourceGraphic",
78
- dx: "0",
79
- dy: "0",
80
- result: "CENTER_ORIGINAL"
81
- }, null, -1)),
82
- i("feDisplacementMap", {
83
- in: "SourceGraphic",
84
- in2: "DISPLACEMENT_MAP",
85
- scale: s.value,
86
- xChannelSelector: "R",
87
- yChannelSelector: "B",
88
- result: "RED_DISPLACED"
89
- }, null, 8, ce),
90
- t[4] || (t[4] = i("feColorMatrix", {
91
- in: "RED_DISPLACED",
92
- type: "matrix",
93
- values: `1 0 0 0 0
94
- 0 0 0 0 0
95
- 0 0 0 0 0
96
- 0 0 0 1 0`,
97
- result: "RED_CHANNEL"
98
- }, null, -1)),
99
- i("feDisplacementMap", {
100
- in: "SourceGraphic",
101
- in2: "DISPLACEMENT_MAP",
102
- scale: u.value,
103
- xChannelSelector: "R",
104
- yChannelSelector: "B",
105
- result: "GREEN_DISPLACED"
106
- }, null, 8, Ae),
107
- t[5] || (t[5] = i("feColorMatrix", {
108
- in: "GREEN_DISPLACED",
109
- type: "matrix",
110
- values: `0 0 0 0 0
111
- 0 1 0 0 0
112
- 0 0 0 0 0
113
- 0 0 0 1 0`,
114
- result: "GREEN_CHANNEL"
115
- }, null, -1)),
116
- i("feDisplacementMap", {
117
- in: "SourceGraphic",
118
- in2: "DISPLACEMENT_MAP",
119
- scale: l.value,
120
- xChannelSelector: "R",
121
- yChannelSelector: "B",
122
- result: "BLUE_DISPLACED"
123
- }, null, 8, de),
124
- t[6] || (t[6] = i("feColorMatrix", {
125
- in: "BLUE_DISPLACED",
126
- type: "matrix",
127
- values: `0 0 0 0 0
128
- 0 0 0 0 0
129
- 0 0 1 0 0
130
- 0 0 0 1 0`,
131
- result: "BLUE_CHANNEL"
132
- }, null, -1)),
133
- t[7] || (t[7] = i("feBlend", {
134
- in: "GREEN_CHANNEL",
135
- in2: "BLUE_CHANNEL",
136
- mode: "screen",
137
- result: "GB_COMBINED"
138
- }, null, -1)),
139
- t[8] || (t[8] = i("feBlend", {
140
- in: "RED_CHANNEL",
141
- in2: "GB_COMBINED",
142
- mode: "screen",
143
- result: "RGB_COMBINED"
144
- }, null, -1)),
145
- i("feGaussianBlur", {
146
- in: "RGB_COMBINED",
147
- stdDeviation: h.value,
148
- result: "ABERRATED_BLURRED"
149
- }, null, 8, Ne),
150
- t[9] || (t[9] = H('<feComposite in="ABERRATED_BLURRED" in2="EDGE_MASK" operator="in" result="EDGE_ABERRATION"></feComposite><feComponentTransfer in="EDGE_MASK" result="INVERTED_MASK"><feFuncA type="table" tableValues="1 0"></feFuncA></feComponentTransfer><feComposite in="CENTER_ORIGINAL" in2="INVERTED_MASK" operator="in" result="CENTER_CLEAN"></feComposite><feComposite in="EDGE_ABERRATION" in2="CENTER_CLEAN" operator="over"></feComposite>', 4))
151
- ], 8, se)
152
- ])
153
- ], 4));
154
- }
155
- }), pe = /* @__PURE__ */ K({
156
- __name: "GlassContainer",
157
- props: {
158
- className: { default: "" },
159
- style: { default: () => ({}) },
160
- displacementScale: { default: 25 },
161
- blurAmount: { default: 12 },
162
- saturation: { default: 180 },
163
- aberrationIntensity: { default: 2 },
164
- mouseOffset: { default: () => ({ x: 0, y: 0 }) },
165
- active: { type: Boolean, default: !1 },
166
- overLight: { type: Boolean, default: !1 },
167
- cornerRadius: { default: 999 },
168
- padding: { default: "24px 32px" },
169
- glassSize: { default: () => ({ width: 270, height: 69 }) },
170
- onClick: {}
171
- },
172
- emits: ["mouse-enter", "mouse-leave", "mouse-down", "mouse-up", "click"],
173
- setup(T, { expose: e, emit: r }) {
174
- const s = T, u = r, l = `glass-filter-${Math.random().toString(36).substr(2, 9)}`, h = c(() => ({
175
- filter: `url(#${l})`,
176
- backdropFilter: `blur(${(s.overLight ? 20 : 4) + s.blurAmount * 32}px) saturate(${s.saturation}%)`
177
- })), g = v(null);
178
- return e({ glassContainerRef: g }), (A, t) => (C(), I("div", {
179
- ref_key: "glassContainerRef",
180
- ref: g,
181
- class: M(`relative ${s.className} ${s.active ? "active" : ""} ${s.onClick ? "cursor-pointer" : ""}`),
182
- style: p(s.style),
183
- onClick: t[4] || (t[4] = (y) => s.onClick && s.onClick())
184
- }, [
185
- V(P, {
186
- id: l,
187
- displacementScale: s.displacementScale,
188
- aberrationIntensity: s.aberrationIntensity,
189
- width: s.glassSize.width,
190
- height: s.glassSize.height
191
- }, null, 8, ["displacementScale", "aberrationIntensity", "width", "height"]),
192
- i("div", {
193
- class: "glass",
194
- style: p({
195
- borderRadius: `${s.cornerRadius}px`,
196
- position: "relative",
197
- display: "inline-flex",
198
- alignItems: "center",
199
- gap: "24px",
200
- padding: s.padding,
201
- overflow: "hidden",
202
- transition: "all 0.2s ease-in-out",
203
- boxShadow: s.overLight ? "0px 16px 70px rgba(0, 0, 0, 0.75)" : "0px 12px 40px rgba(0, 0, 0, 0.25)"
204
- }),
205
- onMouseenter: t[0] || (t[0] = (y) => u("mouse-enter")),
206
- onMouseleave: t[1] || (t[1] = (y) => u("mouse-leave")),
207
- onMousedown: t[2] || (t[2] = (y) => u("mouse-down")),
208
- onMouseup: t[3] || (t[3] = (y) => u("mouse-up"))
209
- }, [
210
- i("span", {
211
- class: "glass__warp",
212
- style: p({
213
- ...h.value,
214
- position: "absolute",
215
- inset: "0"
216
- })
217
- }, null, 4),
218
- i("div", {
219
- class: "transition-all duration-150 ease-in-out text-white",
220
- style: p({
221
- position: "relative",
222
- zIndex: 1,
223
- font: "500 20px/1 system-ui",
224
- textShadow: s.overLight ? "0px 2px 12px rgba(0, 0, 0, 0)" : "0px 2px 12px rgba(0, 0, 0, 0.4)"
225
- })
226
- }, [
227
- w(A.$slots, "default", {}, void 0, !0)
228
- ], 4)
229
- ], 36)
230
- ], 6));
231
- }
232
- }), me = (T, e) => {
233
- const r = T.__vccOpts || T;
234
- for (const [s, u] of e)
235
- r[s] = u;
236
- return r;
237
- }, Te = /* @__PURE__ */ me(pe, [["__scopeId", "data-v-689fee6a"]]), qe = /* @__PURE__ */ K({
238
- __name: "LiquidGlass",
239
- props: {
240
- displacementScale: { default: 70 },
241
- blurAmount: { default: 0.0625 },
242
- saturation: { default: 140 },
243
- aberrationIntensity: { default: 2 },
244
- elasticity: { default: 0.15 },
245
- cornerRadius: { default: 999 },
246
- globalMousePos: { default: void 0 },
247
- mouseOffset: { default: void 0 },
248
- mouseContainer: { default: null },
249
- className: { default: "" },
250
- padding: { default: "24px 32px" },
251
- style: {},
252
- overLight: { type: Boolean, default: !1 },
253
- onClick: { type: Function, default: () => ({}) }
254
- },
255
- setup(T) {
256
- const e = T, r = v(null), s = v(!1), u = v(!1), l = v({ width: 400, height: 400 }), h = v({ x: 0, y: 0 }), g = v({ x: 0, y: 0 }), A = c(() => e.globalMousePos || h.value), t = c(() => e.mouseOffset || g.value), y = (n) => {
257
- var m;
258
- const a = e.mouseContainer || ((m = r.value) == null ? void 0 : m.glassContainerRef);
259
- if (!a) return;
260
- const o = a.getBoundingClientRect(), d = o.left + o.width / 2, N = o.top + o.height / 2;
261
- g.value = {
262
- x: (n.clientX - d) / o.width * 100,
263
- y: (n.clientY - N) / o.height * 100
264
- }, h.value = {
265
- x: n.clientX,
266
- y: n.clientY
267
- };
268
- };
269
- G(() => {
270
- const n = () => {
271
- var a;
272
- if ((a = r.value) != null && a.glassContainerRef) {
273
- const o = r.value.glassContainerRef.getBoundingClientRect();
274
- l.value = { width: o.width, height: o.height };
275
- }
276
- };
277
- return n(), window.addEventListener("resize", n), () => window.removeEventListener("resize", n);
278
- }), _([() => e.globalMousePos, () => e.mouseOffset, r], ([n, a]) => {
279
- var d;
280
- if (n && a)
281
- return;
282
- const o = e.mouseContainer || ((d = r.value) == null ? void 0 : d.glassContainerRef);
283
- o && o.addEventListener("mousemove", y);
284
- }, { immediate: !0 }), $(() => {
285
- });
286
- const Z = c(() => {
287
- var x;
288
- if (!A.value.x || !A.value.y || !((x = r.value) != null && x.glassContainerRef))
289
- return 0;
290
- const n = r.value.glassContainerRef.getBoundingClientRect(), a = n.left + n.width / 2, o = n.top + n.height / 2, d = l.value.width, N = l.value.height, m = Math.max(0, Math.abs(A.value.x - a) - d / 2), b = Math.max(0, Math.abs(A.value.y - o) - N / 2), R = Math.sqrt(m * m + b * b), f = 200;
291
- return R > f ? 0 : 1 - R / f;
292
- }), S = c(() => {
293
- var N;
294
- if (!((N = r.value) != null && N.glassContainerRef))
295
- return { x: 0, y: 0 };
296
- const n = Z.value, a = r.value.glassContainerRef.getBoundingClientRect(), o = a.left + a.width / 2, d = a.top + a.height / 2;
297
- return {
298
- x: (A.value.x - o) * e.elasticity * 0.1 * n,
299
- y: (A.value.y - d) * e.elasticity * 0.1 * n
300
- };
301
- }), O = c(() => {
302
- var F;
303
- if (!A.value.x || !A.value.y || !((F = r.value) != null && F.glassContainerRef))
304
- return "scale(1)";
305
- const n = r.value.glassContainerRef.getBoundingClientRect(), a = n.left + n.width / 2, o = n.top + n.height / 2, d = l.value.width, N = l.value.height, m = A.value.x - a, b = A.value.y - o, R = Math.max(0, Math.abs(m) - d / 2), f = Math.max(0, Math.abs(b) - N / 2), x = Math.sqrt(R * R + f * f), Q = 200;
306
- if (x > Q)
307
- return "scale(1)";
308
- const k = 1 - x / Q, L = Math.sqrt(m * m + b * b);
309
- if (L === 0)
310
- return "scale(1)";
311
- const W = m / L, z = b / L, B = Math.min(L / 300, 1) * e.elasticity * k, J = 1 + Math.abs(W) * B * 0.3 - Math.abs(z) * B * 0.15, Y = 1 + Math.abs(z) * B * 0.3 - Math.abs(W) * B * 0.15;
312
- return `scaleX(${Math.max(0.8, J)}) scaleY(${Math.max(0.8, Y)})`;
313
- }), E = c(() => `translate(calc(-50% + ${S.value.x}px), calc(-50% + ${S.value.y}px)) ${u.value && e.onClick ? "scale(0.96)" : O.value}`), U = c(() => ({
314
- ...e.style,
315
- transform: E.value,
316
- transition: "all ease-out 0.2s"
317
- })), q = c(() => {
318
- var n, a, o;
319
- return {
320
- position: ((n = e.style) == null ? void 0 : n.position) || "relative",
321
- top: ((a = e.style) == null ? void 0 : a.top) || "50%",
322
- left: ((o = e.style) == null ? void 0 : o.left) || "50%"
323
- };
324
- });
325
- return (n, a) => {
326
- var o, d;
327
- return C(), I(D, null, [
328
- V(P, {
329
- id: `liquid-glass-filter-${((d = (o = r.value) == null ? void 0 : o.glassContainerRef) == null ? void 0 : d.id) || "default"}`,
330
- displacementScale: e.overLight ? e.displacementScale * 0.5 : e.displacementScale,
331
- aberrationIntensity: e.aberrationIntensity,
332
- width: l.value.width,
333
- height: l.value.height
334
- }, null, 8, ["id", "displacementScale", "aberrationIntensity", "width", "height"]),
335
- i("div", {
336
- class: M(`bg-black transition-all duration-150 ease-in-out pointer-events-none ${e.overLight ? "opacity-20" : "opacity-0"}`),
337
- style: p({
338
- ...q.value,
339
- height: l.value.height + "px",
340
- width: l.value.width + "px",
341
- borderRadius: `${e.cornerRadius}px`,
342
- transform: E.value,
343
- transition: U.value.transition
344
- })
345
- }, null, 6),
346
- i("div", {
347
- class: M(`bg-black transition-all duration-150 ease-in-out pointer-events-none mix-blend-overlay ${e.overLight ? "opacity-100" : "opacity-0"}`),
348
- style: p({
349
- ...q.value,
350
- height: l.value.height + "px",
351
- width: l.value.width + "px",
352
- borderRadius: `${e.cornerRadius}px`,
353
- transform: E.value,
354
- transition: U.value.transition
355
- })
356
- }, null, 6),
357
- V(Te, {
358
- ref_key: "glassRef",
359
- ref: r,
360
- class: M(e.className),
361
- style: p(U.value),
362
- cornerRadius: e.cornerRadius,
363
- displacementScale: e.overLight ? e.displacementScale * 0.5 : e.displacementScale,
364
- blurAmount: e.blurAmount,
365
- saturation: e.saturation,
366
- aberrationIntensity: e.aberrationIntensity,
367
- glassSize: l.value,
368
- padding: e.padding,
369
- mouseOffset: t.value,
370
- onMouseEnter: a[0] || (a[0] = (N) => s.value = !0),
371
- onMouseLeave: a[1] || (a[1] = (N) => s.value = !1),
372
- onMouseDown: a[2] || (a[2] = (N) => u.value = !0),
373
- onMouseUp: a[3] || (a[3] = (N) => u.value = !1),
374
- active: u.value,
375
- overLight: e.overLight,
376
- onClick: a[4] || (a[4] = (N) => e.onClick && e.onClick())
377
- }, {
378
- default: ee(() => [
379
- w(n.$slots, "default")
380
- ]),
381
- _: 3
382
- }, 8, ["class", "style", "cornerRadius", "displacementScale", "blurAmount", "saturation", "aberrationIntensity", "glassSize", "padding", "mouseOffset", "active", "overLight"]),
383
- i("span", {
384
- style: p({
385
- ...q.value,
386
- height: l.value.height + "px",
387
- width: l.value.width + "px",
388
- borderRadius: `${e.cornerRadius}px`,
389
- transform: E.value,
390
- transition: U.value.transition,
391
- pointerEvents: "none",
392
- mixBlendMode: "screen",
393
- opacity: 0.2,
394
- padding: "1.5px",
395
- WebkitMask: "linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0)",
396
- WebkitMaskComposite: "xor",
397
- maskComposite: "exclude",
398
- boxShadow: "0 0 0 0.5px rgba(255, 255, 255, 0.5) inset, 0 1px 3px rgba(255, 255, 255, 0.25) inset, 0 1px 4px rgba(0, 0, 0, 0.35)",
399
- background: `linear-gradient(
400
- ${135 + t.value.x * 1.2}deg,
401
- rgba(255, 255, 255, 0.0) 0%,
402
- rgba(255, 255, 255, ${0.12 + Math.abs(t.value.x) * 8e-3}) ${Math.max(10, 33 + t.value.y * 0.3)}%,
403
- rgba(255, 255, 255, ${0.4 + Math.abs(t.value.x) * 0.012}) ${Math.min(90, 66 + t.value.y * 0.4)}%,
404
- rgba(255, 255, 255, 0.0) 100%
405
- )`
406
- })
407
- }, null, 4),
408
- i("span", {
409
- style: p({
410
- ...q.value,
411
- height: l.value.height + "px",
412
- width: l.value.width + "px",
413
- borderRadius: `${e.cornerRadius}px`,
414
- transform: E.value,
415
- transition: U.value.transition,
416
- pointerEvents: "none",
417
- mixBlendMode: "overlay",
418
- padding: "1.5px",
419
- WebkitMask: "linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0)",
420
- WebkitMaskComposite: "xor",
421
- maskComposite: "exclude",
422
- boxShadow: "0 0 0 0.5px rgba(255, 255, 255, 0.5) inset, 0 1px 3px rgba(255, 255, 255, 0.25) inset, 0 1px 4px rgba(0, 0, 0, 0.35)",
423
- background: `linear-gradient(
424
- ${135 + t.value.x * 1.2}deg,
425
- rgba(255, 255, 255, 0.0) 0%,
426
- rgba(255, 255, 255, ${0.32 + Math.abs(t.value.x) * 8e-3}) ${Math.max(10, 33 + t.value.y * 0.3)}%,
427
- rgba(255, 255, 255, ${0.6 + Math.abs(t.value.x) * 0.012}) ${Math.min(90, 66 + t.value.y * 0.4)}%,
428
- rgba(255, 255, 255, 0.0) 100%
429
- )`
430
- })
431
- }, null, 4),
432
- e.onClick ? (C(), I(D, { key: 0 }, [
433
- i("div", {
434
- style: p({
435
- ...q.value,
436
- height: l.value.height + "px",
437
- width: l.value.width + 1 + "px",
438
- borderRadius: `${e.cornerRadius}px`,
439
- transform: E.value,
440
- pointerEvents: "none",
441
- transition: "all 0.2s ease-out",
442
- opacity: s.value || u.value ? 0.5 : 0,
443
- backgroundImage: "radial-gradient(circle at 50% 0%, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0) 50%)",
444
- mixBlendMode: "overlay"
445
- })
446
- }, null, 4),
447
- i("div", {
448
- style: p({
449
- ...q.value,
450
- height: l.value.height + "px",
451
- width: l.value.width + 1 + "px",
452
- borderRadius: `${e.cornerRadius}px`,
453
- transform: E.value,
454
- pointerEvents: "none",
455
- transition: "all 0.2s ease-out",
456
- opacity: u.value ? 0.5 : 0,
457
- backgroundImage: "radial-gradient(circle at 50% 0%, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 80%)",
458
- mixBlendMode: "overlay"
459
- })
460
- }, null, 4),
461
- i("div", {
462
- style: p({
463
- ...U.value,
464
- height: l.value.height + "px",
465
- width: l.value.width + 1 + "px",
466
- borderRadius: `${e.cornerRadius}px`,
467
- position: q.value.position,
468
- top: q.value.top,
469
- left: q.value.left,
470
- pointerEvents: "none",
471
- transition: "all 0.2s ease-out",
472
- opacity: s.value ? 0.4 : u.value ? 0.8 : 0,
473
- backgroundImage: "radial-gradient(circle at 50% 0%, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 100%)",
474
- mixBlendMode: "overlay"
475
- })
476
- }, null, 4)
477
- ], 64)) : X("", !0)
478
- ], 64);
479
- };
480
- }
481
- }), ge = /* @__PURE__ */ K({
482
- __name: "App",
483
- setup(T) {
484
- return (e, r) => (C(), te(qe));
485
- }
486
- });
487
- ae(ge).mount("#app");
488
- export {
489
- ge as App
490
- };
491
- //# sourceMappingURL=index.js.map
package/dist/index.js.map DELETED
@@ -1 +0,0 @@
1
- {"version":3,"file":"index.js","sources":["../src/assets/ts/utils.ts","../src/components/GlassFilter.vue","../src/components/GlassContainer.vue","../src/components/LiquidGlass.vue","../src/App.vue","../src/main.ts"],"sourcesContent":["export const displacementMap =\n \"data:image/jpeg;base64,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cUAUAkEkziomgGgkoxZGgxZFQFQlYnQHRdPfj/10KCSCKESCNiVkViPSLpD0h6I0Q0I0A2IoBWBIJIBKBIJoJIJ2R2J0JWBUJ0JUB0XTv479dFZDYiglYigkhEgjZFQjRFQjRFQjQigFYigHYigmgEgmglYlYnQlQlYlQHQlQnQ9P/kf1yVkNiNCNkNiVENiNiViNEViNkVCVgKCViViViSCViSCVgdCViVCViVCdgVCVCdD1D+U/XBWQ2I0I2Q2JUQ2I0JWQ0I2JUQ2JUI2JUI2J0JWJWJWA2R0BWJ0I2JUJ2BUJUJ0P//EABkQAQEBAQEBAAAAAAAAAAAAAAECABEDEP/aAAgBAQABAgB1atWrVq1atWrVq1atWrVq1atWrVq1atWrVq+OrVq1atWrVq1atWrVq1atWrVq1atWrVq1atXxVppppppdWrVq1atWrVq1NNNNNNNNNNNPVWmmmmms6tWrVq1atWpppppppppppppp6q0000uc51atWrVq1ammmmmmmmmmmmmt1Vpppc5znVq1atWrVqaaaaaaaaaaaaaeqtNLnOc51atWrVq1ammmmmmmmmmmmmnqrS5znOc6tWrVq16222mmmmmmlVppp6tKuc5znOrVq1a9TbbbbTTTTTSq000qtLnOc5zq1atWrW0222200000qqqtKqrnOc5zq1atTbbbbbbbbTTTSqqqqqq5znOc6tTTTbbbbbbbbTTTSqqqqrlVznOctNNNtttttttttNNNNKqqqrqznKqrTTTTbbbbbbbbbTTTSqqqqrqznOc5aaaabbbbbbbbbaaaaVVVVVdWc5znVq1NNttttttttttNNKqqqqudWc5znVq16tbbbbbbbbbbTTSqqqq5XVnOc6tWrVrb1tttttttttNNKqqqqrWrK5VWmmm2230bbbbbbaaaXOc5zlVa1KuVVppptttt9G22222mmlzlVznK6tWVVWmmmm2222222222mlznOc5znLWppVVWmmm22222229bTWrOc5znOcq1qaaVpWmm222222229erVqznOc5znKtatStK0rTbTTbbbberXr1as5znOc5aVpppppWlabaabbbb1ta9WrVnOc5znU0rTTTTTTTTTbTTbbbTWvVq1as5znOdTTStNNNNNNNNNtNNtttN6tWvVq1ZznOrU00rTTTTTTTTTTTTTbTWvVq1atWrOc6tTTTStNNNNNNNNNNtNNtNa9WrVq1Z1Z1NNNNNK1q1NNNNNNNNNNNtNatWrVq1atWrU00000rWrVq1atWrVq1alaaa1atWrVq1NNNammmmla1atWrVq1aterVq16tWrVnVqa1NK1qaaaVX/xAAWEAADAAAAAAAAAAAAAAAAAAAhgJD/2gAIAQEAAz8AaExf/8QAGhEBAQEBAQEBAAAAAAAAAAAAAQISEQADEP/aAAgBAgEBAgDx48ePHjx48ePHjx48ePHjx48ePHjx48ePHj86IiIiIiInjx48ePHjx48IiIiIj0oooooooooRERER73ve60UUUUUUVrWiiiiiihERERER73ve97ooooorRWiiiiihKERERER73ve973RRRRWtFFFFFFCIiIiIiPe973ve60UUVrRRRRRRQiIlCIiI973ve973pRRWiiiiiiiiiiiiiiihEe973ve973RRWtFFFFFFFFFFFFFFFFFFa13ve973WitaKKKKKKKKKKKKKKKKKK1rWtd1rutFa1oooooooooooosssooorWta1rWta1rRRRRRRRRRRZZZZZZZZZWta1rWta1rRRRRRRRRZZZZZZZZZZZZe9a1rWta1rWitaKLLLLLLLLLLLLLLLLL3rWta1rWtFbLLLLLLLLLLLLLLLLLLLL3vWta1rWita1ssssssss+hZZZZZZZZe961rWta0Vre97LLLLLLLLLLLPoWWWWWXrWta1oorWta3ssss+hZZZZ9Cyyyyyyyyiita1orWta1ve9llllllllllllllllFFa0VorWta1ve9llllllllllllllllllFFFaK1rWta1rWiyyyyyyyyyyyyiiiiiiitFFa1rWta1oosoosssssoooosoooorRRRWta1rWta0UUUUUWUUUUUUUUUUUVoooorWta1rWtaKKKKKKmiiiiiiiiiiiiiiitd73ve61oSiiipoqaKKKKKKKKKK0UUUVrve973vREREZoSihEooooorRRRRWtd73ve9EREREREoSiiiiitFllllla73ve9ERERERESiiiiiitH0PoWWWWVrXe96IiIiMoiJRRRRRRWjwlFFllllFFd6IiIiIlCUUUUUUUUUePHjx48ePCIiIiIiIiUUUUUUUUUUUePHjx48ePHjx48ePHjx48IiUUUUUUJRRRX//xAAWEQADAAAAAAAAAAAAAAAAAAABYJD/2gAIAQIBAz8AtEV7/8QAFxEBAQEBAAAAAAAAAAAAAAAAAAECEP/aAAgBAwEBAgCtNNNNNNNNNNNNNNNNNNNNNNNNNNNNNcrTTTTTTTTTTTTTTTTTTTTTTTTTTTTTXKrTTTTTTTU000000000000000000001FVpppppqampqaaaaaaaaaaaaaaaaaaaa5Vaaaaampqampqammmmmmmmmmmlaaaaaaiq0001NTU1NTU1NTTTTTTTTTTSqqtNNNcqtNNSyzU1LNTU1NTTTTTTTTTSqqq001ytNLLLLNTU1NTU1NTbbbTTTTTSqqq001ytNLLLLLNTU1NTU3NttttNNNNNKqq001KrSyyyyyzU1NTU3Nzc02220000qqqqrSqqyyyyyzU1NTU3Nzc3NttttNNNKqqqqqqssssss1NTU3Nzc3NzbbbbTTTSqqqqqqrLLLLLNTU1Nzc3Nzc22220000qqqqqqqqssss1NTU3Nzc3NzbbbbbTTSqqqqqqqqqqzU1NTc3Nzc3Nzbc22000qqqqqqqqqqqtTU3Nzc3Nzc3NtzbTTSqqqqrKqqqqqtNNzc23Nzc3Nzc3NTU1KqqqrKqqqqqtNNNNttzc3Nzc3NzU1NLLLLLKqqqqqqqq0022223Nzc3NzU1NSyyyyyyqqqqqqqrTTbbbbc3Nzc3NTU1LLLLLLKsqqqqqqrTTTTbbbc3Nzc1NTUsssssssqqqqqqrTTTTTbbbTc3NTU1NTUsssssqqqqqqqq0000222023NTU1NTUsssssqqqqqqqq000000003NTU1NTU1LLLLLNKrTSqqqqtNNNNNNtNNTU1NSzUssss00qq0qqqqrTTTTTTTTTU1NTUs1LLLNNNKrTTTSqqq00000000001NTU1LNTU0000qtNNNKqqqtNNNNNNNNTU1NTUs1NNNNNKss1NNNK00qtK0000001NNTU0s000000qq000001NKrStNNNNK1NNNNStNNNNNKqtNNNNNNNK0000000rU0000rTTTTTSq00000rTTTTTTTTTTTTTTTTStNNNNKr/xAAUEQEAAAAAAAAAAAAAAAAAAACg/9oACAEDAQM/AAAf/9k=\"\n","<script setup lang=\"ts\">\nimport { computed } from 'vue';\nimport { displacementMap } from '../assets/ts/utils';\n\nconst props = defineProps<{\n id: string;\n displacementScale: number;\n aberrationIntensity: number;\n width: number;\n height: number;\n}>();\n\nconst edgeMaskOffset = computed(() => {\n return Math.max(30, 80 - props.aberrationIntensity * 2);\n});\n\nconst redDisplacementScale = computed(() => {\n return props.displacementScale * -1;\n});\n\nconst greenDisplacementScale = computed(() => {\n return props.displacementScale * (-1 - props.aberrationIntensity * 0.05);\n});\n\nconst blueDisplacementScale = computed(() => {\n return props.displacementScale * (-1 - props.aberrationIntensity * 0.1);\n});\n\nconst gaussianBlurStdDeviation = computed(() => {\n return Math.max(0.1, 0.5 - props.aberrationIntensity * 0.1);\n});\n\nconst feFuncATableValues = computed(() => {\n return `0 ${props.aberrationIntensity * 0.05} 1`;\n});\n\n</script>\n\n<template>\n <svg :style=\"{ position: 'absolute', width: props.width + 'px', height: props.height + 'px' }\" aria-hidden=\"true\">\n <defs>\n <radialGradient :id=\"`${props.id}-edge-mask`\" cx=\"50%\" cy=\"50%\" r=\"50%\">\n <stop offset=\"0%\" stop-color=\"black\" stop-opacity=\"0\" />\n <stop :offset=\"`${edgeMaskOffset}%`\" stop-color=\"black\" stop-opacity=\"0\" />\n <stop offset=\"100%\" stop-color=\"white\" stop-opacity=\"1\" />\n </radialGradient>\n <filter :id=\"props.id\" x=\"-35%\" y=\"-35%\" width=\"170%\" height=\"170%\" color-interpolation-filters=\"sRGB\">\n <feImage id=\"feimage\" x=\"0\" y=\"0\" width=\"100%\" height=\"100%\" result=\"DISPLACEMENT_MAP\" :href=\"displacementMap\" preserveAspectRatio=\"xMidYMid slice\" />\n\n <!-- Create edge mask using the displacement map itself -->\n <feColorMatrix\n in=\"DISPLACEMENT_MAP\"\n type=\"matrix\"\n values=\"0.3 0.3 0.3 0 0\n 0.3 0.3 0.3 0 0\n 0.3 0.3 0.3 0 0\n 0 0 0 1 0\"\n result=\"EDGE_INTENSITY\"\n />\n <feComponentTransfer in=\"EDGE_INTENSITY\" result=\"EDGE_MASK\">\n <feFuncA type=\"discrete\" :tableValues=\"feFuncATableValues\" />\n </feComponentTransfer>\n\n <!-- Original undisplaced image for center -->\n <feOffset in=\"SourceGraphic\" dx=\"0\" dy=\"0\" result=\"CENTER_ORIGINAL\" />\n\n <!-- Red channel displacement with slight offset -->\n <feDisplacementMap in=\"SourceGraphic\" in2=\"DISPLACEMENT_MAP\" :scale=\"redDisplacementScale\" xChannelSelector=\"R\" yChannelSelector=\"B\" result=\"RED_DISPLACED\" />\n <feColorMatrix\n in=\"RED_DISPLACED\"\n type=\"matrix\"\n values=\"1 0 0 0 0\n 0 0 0 0 0\n 0 0 0 0 0\n 0 0 0 1 0\"\n result=\"RED_CHANNEL\"\n />\n\n <!-- Green channel displacement -->\n <feDisplacementMap in=\"SourceGraphic\" in2=\"DISPLACEMENT_MAP\" :scale=\"greenDisplacementScale\" xChannelSelector=\"R\" yChannelSelector=\"B\" result=\"GREEN_DISPLACED\" />\n <feColorMatrix\n in=\"GREEN_DISPLACED\"\n type=\"matrix\"\n values=\"0 0 0 0 0\n 0 1 0 0 0\n 0 0 0 0 0\n 0 0 0 1 0\"\n result=\"GREEN_CHANNEL\"\n />\n\n <!-- Blue channel displacement with slight offset -->\n <feDisplacementMap in=\"SourceGraphic\" in2=\"DISPLACEMENT_MAP\" :scale=\"blueDisplacementScale\" xChannelSelector=\"R\" yChannelSelector=\"B\" result=\"BLUE_DISPLACED\" />\n <feColorMatrix\n in=\"BLUE_DISPLACED\"\n type=\"matrix\"\n values=\"0 0 0 0 0\n 0 0 0 0 0\n 0 0 1 0 0\n 0 0 0 1 0\"\n result=\"BLUE_CHANNEL\"\n />\n\n <!-- Combine all channels with screen blend mode for chromatic aberration -->\n <feBlend in=\"GREEN_CHANNEL\" in2=\"BLUE_CHANNEL\" mode=\"screen\" result=\"GB_COMBINED\" />\n <feBlend in=\"RED_CHANNEL\" in2=\"GB_COMBINED\" mode=\"screen\" result=\"RGB_COMBINED\" />\n\n <!-- Add slight blur to soften the aberration effect -->\n <feGaussianBlur in=\"RGB_COMBINED\" :stdDeviation=\"gaussianBlurStdDeviation\" result=\"ABERRATED_BLURRED\" />\n\n <!-- Apply edge mask to aberration effect -->\n <feComposite in=\"ABERRATED_BLURRED\" in2=\"EDGE_MASK\" operator=\"in\" result=\"EDGE_ABERRATION\" />\n\n <!-- Create inverted mask for center -->\n <feComponentTransfer in=\"EDGE_MASK\" result=\"INVERTED_MASK\">\n <feFuncA type=\"table\" tableValues=\"1 0\" />\n </feComponentTransfer>\n <feComposite in=\"CENTER_ORIGINAL\" in2=\"INVERTED_MASK\" operator=\"in\" result=\"CENTER_CLEAN\" />\n\n <!-- Combine edge aberration with clean center -->\n <feComposite in=\"EDGE_ABERRATION\" in2=\"CENTER_CLEAN\" operator=\"over\" />\n </filter>\n </defs>\n </svg>\n</template>\n","<script setup lang=\"ts\">\nimport { ref, computed } from 'vue';\nimport GlassFilter from './GlassFilter.vue';\n\ninterface GlassContainerProps {\n className?: string;\n style?: Record<string, any>;\n displacementScale?: number;\n blurAmount?: number;\n saturation?: number;\n aberrationIntensity?: number;\n mouseOffset?: { x: number; y: number };\n active?: boolean;\n overLight?: boolean;\n cornerRadius?: number;\n padding?: string;\n glassSize?: { width: number; height: number };\n onClick?: () => void;\n}\n\nconst props = withDefaults(defineProps<GlassContainerProps>(), {\n className: '',\n style: () => ({}),\n displacementScale: 25,\n blurAmount: 12,\n saturation: 180,\n aberrationIntensity: 2,\n mouseOffset: () => ({ x: 0, y: 0 }),\n active: false,\n overLight: false,\n cornerRadius: 999,\n padding: '24px 32px',\n glassSize: () => ({ width: 270, height: 69 }),\n});\n\nconst emit = defineEmits<{\n (e: 'mouse-enter'): void;\n (e: 'mouse-leave'): void;\n (e: 'mouse-down'): void;\n (e: 'mouse-up'): void;\n (e: 'click'): void;\n}>();\n\nconst filterId = `glass-filter-${Math.random().toString(36).substr(2, 9)}`;\n\nconst backdropStyle = computed(() => ({\n filter: `url(#${filterId})`,\n backdropFilter: `blur(${(props.overLight ? 20 : 4) + props.blurAmount * 32}px) saturate(${props.saturation}%)`,\n}));\n\n// Expose the ref for parent components to access\nconst glassContainerRef = ref<HTMLDivElement | null>(null);\ndefineExpose({ glassContainerRef });\n</script>\n\n<template>\n <div\n ref=\"glassContainerRef\"\n :class=\"`relative ${props.className} ${props.active ? 'active' : ''} ${Boolean(props.onClick) ? 'cursor-pointer' : ''}`\"\n :style=\"props.style\"\n @click=\"props.onClick && props.onClick()\"\n >\n <GlassFilter\n :id=\"filterId\"\n :displacementScale=\"props.displacementScale\"\n :aberrationIntensity=\"props.aberrationIntensity\"\n :width=\"props.glassSize.width\"\n :height=\"props.glassSize.height\"\n />\n\n <div\n class=\"glass\"\n :style=\"{\n borderRadius: `${props.cornerRadius}px`,\n position: 'relative',\n display: 'inline-flex',\n alignItems: 'center',\n gap: '24px',\n padding: props.padding,\n overflow: 'hidden',\n transition: 'all 0.2s ease-in-out',\n boxShadow: props.overLight ? '0px 16px 70px rgba(0, 0, 0, 0.75)' : '0px 12px 40px rgba(0, 0, 0, 0.25)',\n }\"\n @mouseenter=\"emit('mouse-enter')\"\n @mouseleave=\"emit('mouse-leave')\"\n @mousedown=\"emit('mouse-down')\"\n @mouseup=\"emit('mouse-up')\"\n >\n <!-- backdrop layer that gets wiggly -->\n <span\n class=\"glass__warp\"\n :style=\"{\n ...backdropStyle,\n position: 'absolute',\n inset: '0',\n }\"\n />\n\n <!-- user content stays sharp -->\n <div\n class=\"transition-all duration-150 ease-in-out text-white\"\n :style=\"{\n position: 'relative',\n zIndex: 1,\n font: '500 20px/1 system-ui',\n textShadow: props.overLight ? '0px 2px 12px rgba(0, 0, 0, 0)' : '0px 2px 12px rgba(0, 0, 0, 0.4)',\n }\"\n >\n <slot />\n </div>\n </div>\n </div>\n</template>\n\n<style scoped>\n/* Add any specific styles for this component here if needed */\n</style> ","<script setup lang=\"ts\">\nimport { ref, computed, watch, onMounted, onUnmounted } from 'vue';\nimport GlassContainer from './GlassContainer.vue';\nimport GlassFilter from './GlassFilter.vue';\n\ninterface LiquidGlassProps {\n displacementScale?: number;\n blurAmount?: number;\n saturation?: number;\n aberrationIntensity?: number;\n elasticity?: number;\n cornerRadius?: number;\n globalMousePos?: { x: number; y: number };\n mouseOffset?: { x: number; y: number };\n mouseContainer?: HTMLElement | null;\n className?: string;\n padding?: string;\n style?: Record<string, any>;\n overLight?: boolean;\n onClick?: () => void;\n}\n\nconst props = withDefaults(defineProps<LiquidGlassProps>(), {\n displacementScale: 70,\n blurAmount: 0.0625,\n saturation: 140,\n aberrationIntensity: 2,\n elasticity: 0.15,\n cornerRadius: 999,\n globalMousePos: undefined,\n mouseOffset: undefined,\n mouseContainer: null,\n className: '',\n padding: '24px 32px',\n overLight: false,\n onClick: () => ({}),\n});\n\nconst glassRef = ref<InstanceType<typeof GlassContainer> | null>(null);\nconst isHovered = ref(false);\nconst isActive = ref(false);\nconst glassSize = ref({ width: 400, height: 400 });\nconst internalGlobalMousePos = ref({ x: 0, y: 0 });\nconst internalMouseOffset = ref({ x: 0, y: 0 });\n\nconst globalMousePos = computed(() => props.globalMousePos || internalGlobalMousePos.value);\nconst mouseOffset = computed(() => props.mouseOffset || internalMouseOffset.value);\n\nconst handleMouseMove = (e: MouseEvent) => {\n const container = props.mouseContainer || glassRef.value?.glassContainerRef;\n if (!container) return;\n\n const rect = container.getBoundingClientRect();\n const centerX = rect.left + rect.width / 2;\n const centerY = rect.top + rect.height / 2;\n\n internalMouseOffset.value = {\n x: ((e.clientX - centerX) / rect.width) * 100,\n y: ((e.clientY - centerY) / rect.height) * 100,\n };\n\n internalGlobalMousePos.value = {\n x: e.clientX,\n y: e.clientY,\n };\n};\n\nonMounted(() => {\n const updateGlassSize = () => {\n if (glassRef.value?.glassContainerRef) {\n const rect = glassRef.value.glassContainerRef.getBoundingClientRect();\n glassSize.value = { width: rect.width, height: rect.height };\n }\n };\n\n updateGlassSize();\n window.addEventListener('resize', updateGlassSize);\n\n return () => window.removeEventListener('resize', updateGlassSize);\n});\n\nwatch([() => props.globalMousePos, () => props.mouseOffset, glassRef], ([newGlobalMousePos, newMouseOffset]) => {\n if (newGlobalMousePos && newMouseOffset) {\n return;\n }\n\n const container = props.mouseContainer || glassRef.value?.glassContainerRef;\n if (!container) return;\n\n container.addEventListener('mousemove', handleMouseMove);\n\n}, { immediate: true });\n\nonUnmounted(() => {\n // container.removeEventListener('mousemove', handleMouseMove);\n});\n\nconst calculateFadeInFactor = computed(() => {\n if (!globalMousePos.value.x || !globalMousePos.value.y || !glassRef.value?.glassContainerRef) {\n return 0;\n }\n\n const rect = glassRef.value.glassContainerRef.getBoundingClientRect();\n const pillCenterX = rect.left + rect.width / 2;\n const pillCenterY = rect.top + rect.height / 2;\n const pillWidth = glassSize.value.width;\n const pillHeight = glassSize.value.height;\n\n const edgeDistanceX = Math.max(0, Math.abs(globalMousePos.value.x - pillCenterX) - pillWidth / 2);\n const edgeDistanceY = Math.max(0, Math.abs(globalMousePos.value.y - pillCenterY) - pillHeight / 2);\n const edgeDistance = Math.sqrt(edgeDistanceX * edgeDistanceX + edgeDistanceY * edgeDistanceY);\n\n const activationZone = 200;\n return edgeDistance > activationZone ? 0 : 1 - edgeDistance / activationZone;\n});\n\nconst calculateElasticTranslation = computed(() => {\n if (!glassRef.value?.glassContainerRef) {\n return { x: 0, y: 0 };\n }\n\n const fadeInFactor = calculateFadeInFactor.value;\n const rect = glassRef.value.glassContainerRef.getBoundingClientRect();\n const pillCenterX = rect.left + rect.width / 2;\n const pillCenterY = rect.top + rect.height / 2;\n\n return {\n x: (globalMousePos.value.x - pillCenterX) * props.elasticity * 0.1 * fadeInFactor,\n y: (globalMousePos.value.y - pillCenterY) * props.elasticity * 0.1 * fadeInFactor,\n };\n});\n\nconst calculateDirectionalScale = computed(() => {\n if (!globalMousePos.value.x || !globalMousePos.value.y || !glassRef.value?.glassContainerRef) {\n return \"scale(1)\";\n }\n\n const rect = glassRef.value.glassContainerRef.getBoundingClientRect();\n const pillCenterX = rect.left + rect.width / 2;\n const pillCenterY = rect.top + rect.height / 2;\n const pillWidth = glassSize.value.width;\n const pillHeight = glassSize.value.height;\n\n const deltaX = globalMousePos.value.x - pillCenterX;\n const deltaY = globalMousePos.value.y - pillCenterY;\n\n const edgeDistanceX = Math.max(0, Math.abs(deltaX) - pillWidth / 2);\n const edgeDistanceY = Math.max(0, Math.abs(deltaY) - pillHeight / 2);\n const edgeDistance = Math.sqrt(edgeDistanceX * edgeDistanceX + edgeDistanceY * edgeDistanceY);\n\n const activationZone = 200;\n\n if (edgeDistance > activationZone) {\n return \"scale(1)\";\n }\n\n const fadeInFactor = 1 - edgeDistance / activationZone;\n\n const centerDistance = Math.sqrt(deltaX * deltaX + deltaY * deltaY);\n if (centerDistance === 0) {\n return \"scale(1)\";\n }\n\n const normalizedX = deltaX / centerDistance;\n const normalizedY = deltaY / centerDistance;\n\n const stretchIntensity = Math.min(centerDistance / 300, 1) * props.elasticity * fadeInFactor;\n\n const scaleX = 1 + Math.abs(normalizedX) * stretchIntensity * 0.3 - Math.abs(normalizedY) * stretchIntensity * 0.15;\n\n const scaleY = 1 + Math.abs(normalizedY) * stretchIntensity * 0.3 - Math.abs(normalizedX) * stretchIntensity * 0.15;\n\n return `scaleX(${Math.max(0.8, scaleX)}) scaleY(${Math.max(0.8, scaleY)})`;\n});\n\nconst transformStyle = computed(() => {\n return `translate(calc(-50% + ${calculateElasticTranslation.value.x}px), calc(-50% + ${calculateElasticTranslation.value.y}px)) ${(isActive.value && Boolean(props.onClick)) ? \"scale(0.96)\" : calculateDirectionalScale.value}`;\n});\n\nconst baseStyle = computed(() => ({\n ...props.style,\n transform: transformStyle.value,\n transition: \"all ease-out 0.2s\",\n}));\n\nconst positionStyles = computed(() => ({\n position: props.style?.position || \"relative\",\n top: props.style?.top || \"50%\",\n left: props.style?.left || \"50%\",\n}));\n</script>\n\n<template>\n <GlassFilter\n :id=\"`liquid-glass-filter-${glassRef?.glassContainerRef?.id || 'default'}`\"\n :displacementScale=\"props.overLight ? props.displacementScale * 0.5 : props.displacementScale\"\n :aberrationIntensity=\"props.aberrationIntensity\"\n :width=\"glassSize.width\"\n :height=\"glassSize.height\"\n /> \n <!-- Over light effect -->\n <div\n :class=\"`bg-black transition-all duration-150 ease-in-out pointer-events-none ${props.overLight ? 'opacity-20' : 'opacity-0'}`\"\n :style=\"{\n ...positionStyles,\n height: glassSize.height + 'px',\n width: glassSize.width + 'px',\n borderRadius: `${props.cornerRadius}px`,\n transform: transformStyle,\n transition: baseStyle.transition,\n }\"\n />\n <div\n :class=\"`bg-black transition-all duration-150 ease-in-out pointer-events-none mix-blend-overlay ${props.overLight ? 'opacity-100' : 'opacity-0'}`\"\n :style=\"{\n ...positionStyles,\n height: glassSize.height + 'px',\n width: glassSize.width + 'px',\n borderRadius: `${props.cornerRadius}px`,\n transform: transformStyle,\n transition: baseStyle.transition,\n }\"\n />\n\n <GlassContainer\n ref=\"glassRef\"\n :class=\"props.className\"\n :style=\"baseStyle\"\n :cornerRadius=\"props.cornerRadius\"\n :displacementScale=\"props.overLight ? props.displacementScale * 0.5 : props.displacementScale\"\n :blurAmount=\"props.blurAmount\"\n :saturation=\"props.saturation\"\n :aberrationIntensity=\"props.aberrationIntensity\"\n :glassSize=\"glassSize\"\n :padding=\"props.padding\"\n :mouseOffset=\"mouseOffset\"\n @mouse-enter=\"isHovered = true\"\n @mouse-leave=\"isHovered = false\"\n @mouse-down=\"isActive = true\"\n @mouse-up=\"isActive = false\"\n :active=\"isActive\"\n :overLight=\"props.overLight\"\n @click=\"props.onClick && props.onClick()\"\n >\n <slot />\n </GlassContainer>\n\n <!-- Border layer 1 - extracted from glass container -->\n <span\n :style=\"{\n ...positionStyles,\n height: glassSize.height + 'px',\n width: glassSize.width + 'px',\n borderRadius: `${props.cornerRadius}px`,\n transform: transformStyle,\n transition: baseStyle.transition,\n pointerEvents: 'none',\n mixBlendMode: 'screen',\n opacity: 0.2,\n padding: '1.5px',\n WebkitMask: 'linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0)',\n WebkitMaskComposite: 'xor',\n maskComposite: 'exclude',\n boxShadow: '0 0 0 0.5px rgba(255, 255, 255, 0.5) inset, 0 1px 3px rgba(255, 255, 255, 0.25) inset, 0 1px 4px rgba(0, 0, 0, 0.35)',\n background: `linear-gradient(\n ${135 + mouseOffset.x * 1.2}deg,\n rgba(255, 255, 255, 0.0) 0%,\n rgba(255, 255, 255, ${0.12 + Math.abs(mouseOffset.x) * 0.008}) ${Math.max(10, 33 + mouseOffset.y * 0.3)}%,\n rgba(255, 255, 255, ${0.4 + Math.abs(mouseOffset.x) * 0.012}) ${Math.min(90, 66 + mouseOffset.y * 0.4)}%,\n rgba(255, 255, 255, 0.0) 100%\n )`,\n }\"\n />\n\n <!-- Border layer 2 - duplicate with mix-blend-overlay -->\n <span\n :style=\"{\n ...positionStyles,\n height: glassSize.height + 'px',\n width: glassSize.width + 'px',\n borderRadius: `${props.cornerRadius}px`,\n transform: transformStyle,\n transition: baseStyle.transition,\n pointerEvents: 'none',\n mixBlendMode: 'overlay',\n padding: '1.5px',\n WebkitMask: 'linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0)',\n WebkitMaskComposite: 'xor',\n maskComposite: 'exclude',\n boxShadow: '0 0 0 0.5px rgba(255, 255, 255, 0.5) inset, 0 1px 3px rgba(255, 255, 255, 0.25) inset, 0 1px 4px rgba(0, 0, 0, 0.35)',\n background: `linear-gradient(\n ${135 + mouseOffset.x * 1.2}deg,\n rgba(255, 255, 255, 0.0) 0%,\n rgba(255, 255, 255, ${0.32 + Math.abs(mouseOffset.x) * 0.008}) ${Math.max(10, 33 + mouseOffset.y * 0.3)}%,\n rgba(255, 255, 255, ${0.6 + Math.abs(mouseOffset.x) * 0.012}) ${Math.min(90, 66 + mouseOffset.y * 0.4)}%,\n rgba(255, 255, 255, 0.0) 100%\n )`,\n }\"\n />\n\n <!-- Hover effects -->\n <template v-if=\"Boolean(props.onClick)\">\n <div\n :style=\"{\n ...positionStyles,\n height: glassSize.height + 'px',\n width: glassSize.width + 1 + 'px',\n borderRadius: `${props.cornerRadius}px`,\n transform: transformStyle,\n pointerEvents: 'none',\n transition: 'all 0.2s ease-out',\n opacity: isHovered || isActive ? 0.5 : 0,\n backgroundImage: 'radial-gradient(circle at 50% 0%, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0) 50%)',\n mixBlendMode: 'overlay',\n }\"\n />\n <div\n :style=\"{\n ...positionStyles,\n height: glassSize.height + 'px',\n width: glassSize.width + 1 + 'px',\n borderRadius: `${props.cornerRadius}px`,\n transform: transformStyle,\n pointerEvents: 'none',\n transition: 'all 0.2s ease-out',\n opacity: isActive ? 0.5 : 0,\n backgroundImage: 'radial-gradient(circle at 50% 0%, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 80%)',\n mixBlendMode: 'overlay',\n }\"\n />\n <div\n :style=\"{\n ...baseStyle,\n height: glassSize.height + 'px',\n width: glassSize.width + 1 + 'px',\n borderRadius: `${props.cornerRadius}px`,\n position: positionStyles.position,\n top: positionStyles.top,\n left: positionStyles.left,\n pointerEvents: 'none',\n transition: 'all 0.2s ease-out',\n opacity: isHovered ? 0.4 : isActive ? 0.8 : 0,\n backgroundImage: 'radial-gradient(circle at 50% 0%, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 100%)',\n mixBlendMode: 'overlay',\n }\"\n />\n </template>\n</template>","<script setup lang=\"ts\">\nimport LiquidGlass from '@/components/LiquidGlass.vue';\n</script>\n\n<template>\n <LiquidGlass />\n</template>\n","export { default as App } from '@/App.vue'\n\nimport { createApp } from 'vue';\nimport App from '@/App.vue';\n\ncreateApp(App).mount('#app'); "],"names":["displacementMap","props","__props","edgeMaskOffset","computed","redDisplacementScale","greenDisplacementScale","blueDisplacementScale","gaussianBlurStdDeviation","feFuncATableValues","_createElementBlock","_createElementVNode","_unref","_hoisted_5","emit","__emit","filterId","backdropStyle","glassContainerRef","ref","__expose","_normalizeClass","_normalizeStyle","_createVNode","GlassFilter","_renderSlot","_ctx","glassRef","isHovered","isActive","glassSize","internalGlobalMousePos","internalMouseOffset","globalMousePos","mouseOffset","handleMouseMove","e","container","_a","rect","centerX","centerY","onMounted","updateGlassSize","watch","newGlobalMousePos","newMouseOffset","onUnmounted","calculateFadeInFactor","pillCenterX","pillCenterY","pillWidth","pillHeight","edgeDistanceX","edgeDistanceY","edgeDistance","activationZone","calculateElasticTranslation","fadeInFactor","calculateDirectionalScale","deltaX","deltaY","centerDistance","normalizedX","normalizedY","stretchIntensity","scaleX","scaleY","transformStyle","baseStyle","positionStyles","_b","_c","GlassContainer","_Fragment","_createBlock","LiquidGlass","createApp","App"],"mappings":"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"}
@@ -1,2 +0,0 @@
1
- declare const _default: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
2
- export default _default;
@@ -1 +0,0 @@
1
- export declare const displacementMap = "data:image/jpeg;base64,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cUAUAkEkziomgGgkoxZGgxZFQFQlYnQHRdPfj/10KCSCKESCNiVkViPSLpD0h6I0Q0I0A2IoBWBIJIBKBIJoJIJ2R2J0JWBUJ0JUB0XTv479dFZDYiglYigkhEgjZFQjRFQjRFQjQigFYigHYigmgEgmglYlYnQlQlYlQHQlQnQ9P/kf1yVkNiNCNkNiVENiNiViNEViNkVCVgKCViViViSCViSCVgdCViVCViVCdgVCVCdD1D+U/XBWQ2I0I2Q2JUQ2I0JWQ0I2JUQ2JUI2JUI2J0JWJWJWA2R0BWJ0I2JUJ2BUJUJ0P//EABkQAQEBAQEBAAAAAAAAAAAAAAECABEDEP/aAAgBAQABAgB1atWrVq1atWrVq1atWrVq1atWrVq1atWrVq+OrVq1atWrVq1atWrVq1atWrVq1atWrVq1atXxVppppppdWrVq1atWrVq1NNNNNNNNNNNPVWmmmmms6tWrVq1atWpppppppppppppp6q0000uc51atWrVq1ammmmmmmmmmmmmt1Vpppc5znVq1atWrVqaaaaaaaaaaaaaeqtNLnOc51atWrVq1ammmmmmmmmmmmmnqrS5znOc6tWrVq16222mmmmmmlVppp6tKuc5znOrVq1a9TbbbbTTTTTSq000qtLnOc5zq1atWrW0222200000qqqtKqrnOc5zq1atTbbbbbbbbTTTSqqqqqq5znOc6tTTTbbbbbbbbTTTSqqqqrlVznOctNNNtttttttttNNNNKqqqrqznKqrTTTTbbbbbbbbbTTTSqqqqrqznOc5aaaabbbbbbbbbaaaaVVVVVdWc5znVq1NNttttttttttNNKqqqqudWc5znVq16tbbbbbbbbbbTTSqqqq5XVnOc6tWrVrb1tttttttttNNKqqqqrWrK5VWmmm2230bbbbbbaaaXOc5zlVa1KuVVppptttt9G22222mmlzlVznK6tWVVWmmmm2222222222mlznOc5znLWppVVWmmm22222229bTWrOc5znOcq1qaaVpWmm222222229erVqznOc5znKtatStK0rTbTTbbbberXr1as5znOc5aVpppppWlabaabbbb1ta9WrVnOc5znU0rTTTTTTTTTbTTbbbTWvVq1as5znOdTTStNNNNNNNNNtNNtttN6tWvVq1ZznOrU00rTTTTTTTTTTTTTbTWvVq1atWrOc6tTTTStNNNNNNNNNNtNNtNa9WrVq1Z1Z1NNNNNK1q1NNNNNNNNNNNtNatWrVq1atWrU00000rWrVq1atWrVq1alaaa1atWrVq1NNNammmmla1atWrVq1aterVq16tWrVnVqa1NK1qaaaVX/xAAWEAADAAAAAAAAAAAAAAAAAAAhgJD/2gAIAQEAAz8AaExf/8QAGhEBAQEBAQEBAAAAAAAAAAAAAQISEQADEP/aAAgBAgEBAgDx48ePHjx48ePHjx48ePHjx48ePHjx48ePHj86IiIiIiInjx48ePHjx48IiIiIj0oooooooooRERER73ve60UUUUUUVrWiiiiiihERERER73ve97ooooorRWiiiiihKERERER73ve973RRRRWtFFFFFFCIiIiIiPe973ve60UUVrRRRRRRQiIlCIiI973ve973pRRWiiiiiiiiiiiiiiihEe973ve973RRWtFFFFFFFFFFFFFFFFFFa13ve973WitaKKKKKKKKKKKKKKKKKK1rWtd1rutFa1oooooooooooosssooorWta1rWta1rRRRRRRRRRRZZZZZZZZZWta1rWta1rRRRRRRRRZZZZZZZZZZZZe9a1rWta1rWitaKLLLLLLLLLLLLLLLLL3rWta1rWtFbLLLLLLLLLLLLLLLLLLLL3vWta1rWita1ssssssss+hZZZZZZZZe961rWta0Vre97LLLLLLLLLLLPoWWWWWXrWta1oorWta3ssss+hZZZZ9Cyyyyyyyyiita1orWta1ve9llllllllllllllllFFa0VorWta1ve9llllllllllllllllllFFFaK1rWta1rWiyyyyyyyyyyyyiiiiiiitFFa1rWta1oosoosssssoooosoooorRRRWta1rWta0UUUUUWUUUUUUUUUUUVoooorWta1rWtaKKKKKKmiiiiiiiiiiiiiiitd73ve61oSiiipoqaKKKKKKKKKK0UUUVrve973vREREZoSihEooooorRRRRWtd73ve9EREREREoSiiiiitFllllla73ve9ERERERESiiiiiitH0PoWWWWVrXe96IiIiMoiJRRRRRRWjwlFFllllFFd6IiIiIlCUUUUUUUUUePHjx48ePCIiIiIiIiUUUUUUUUUUUePHjx48ePHjx48ePHjx48IiUUUUUUJRRRX//xAAWEQADAAAAAAAAAAAAAAAAAAABYJD/2gAIAQIBAz8AtEV7/8QAFxEBAQEBAAAAAAAAAAAAAAAAAAECEP/aAAgBAwEBAgCtNNNNNNNNNNNNNNNNNNNNNNNNNNNNNcrTTTTTTTTTTTTTTTTTTTTTTTTTTTTTXKrTTTTTTTU000000000000000000001FVpppppqampqaaaaaaaaaaaaaaaaaaaa5Vaaaaampqampqammmmmmmmmmmlaaaaaaiq0001NTU1NTU1NTTTTTTTTTTSqqtNNNcqtNNSyzU1LNTU1NTTTTTTTTTSqqq001ytNLLLLNTU1NTU1NTbbbTTTTTSqqq001ytNLLLLLNTU1NTU3NttttNNNNNKqq001KrSyyyyyzU1NTU3Nzc02220000qqqqrSqqyyyyyzU1NTU3Nzc3NttttNNNKqqqqqqssssss1NTU3Nzc3NzbbbbTTTSqqqqqqrLLLLLNTU1Nzc3Nzc22220000qqqqqqqqssss1NTU3Nzc3NzbbbbbTTSqqqqqqqqqqzU1NTc3Nzc3Nzbc22000qqqqqqqqqqqtTU3Nzc3Nzc3NtzbTTSqqqqrKqqqqqtNNzc23Nzc3Nzc3NTU1KqqqrKqqqqqtNNNNttzc3Nzc3NzU1NLLLLLKqqqqqqqq0022223Nzc3NzU1NSyyyyyyqqqqqqqrTTbbbbc3Nzc3NTU1LLLLLLKsqqqqqqrTTTTbbbc3Nzc1NTUsssssssqqqqqqrTTTTTbbbTc3NTU1NTUsssssqqqqqqqq0000222023NTU1NTUsssssqqqqqqqq000000003NTU1NTU1LLLLLNKrTSqqqqtNNNNNNtNNTU1NSzUssss00qq0qqqqrTTTTTTTTTU1NTUs1LLLNNNKrTTTSqqq00000000001NTU1LNTU0000qtNNNKqqqtNNNNNNNNTU1NTUs1NNNNNKss1NNNK00qtK0000001NNTU0s000000qq000001NKrStNNNNK1NNNNStNNNNNKqtNNNNNNNK0000000rU0000rTTTTTSq00000rTTTTTTTTTTTTTTTTStNNNNKr/xAAUEQEAAAAAAAAAAAAAAAAAAACg/9oACAEDAQM/AAAf/9k=";
@@ -1,66 +0,0 @@
1
- interface GlassContainerProps {
2
- className?: string;
3
- style?: Record<string, any>;
4
- displacementScale?: number;
5
- blurAmount?: number;
6
- saturation?: number;
7
- aberrationIntensity?: number;
8
- mouseOffset?: {
9
- x: number;
10
- y: number;
11
- };
12
- active?: boolean;
13
- overLight?: boolean;
14
- cornerRadius?: number;
15
- padding?: string;
16
- glassSize?: {
17
- width: number;
18
- height: number;
19
- };
20
- onClick?: () => void;
21
- }
22
- declare var __VLS_4: {};
23
- type __VLS_Slots = {} & {
24
- default?: (props: typeof __VLS_4) => any;
25
- };
26
- declare const __VLS_component: import("vue").DefineComponent<GlassContainerProps, {
27
- glassContainerRef: import("vue").Ref<HTMLDivElement | null, HTMLDivElement | null>;
28
- }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
29
- click: () => any;
30
- "mouse-enter": () => any;
31
- "mouse-leave": () => any;
32
- "mouse-down": () => any;
33
- "mouse-up": () => any;
34
- }, string, import("vue").PublicProps, Readonly<GlassContainerProps> & Readonly<{
35
- onClick?: (() => any) | undefined;
36
- "onMouse-enter"?: (() => any) | undefined;
37
- "onMouse-leave"?: (() => any) | undefined;
38
- "onMouse-down"?: (() => any) | undefined;
39
- "onMouse-up"?: (() => any) | undefined;
40
- }>, {
41
- displacementScale: number;
42
- aberrationIntensity: number;
43
- style: Record<string, any>;
44
- className: string;
45
- blurAmount: number;
46
- saturation: number;
47
- mouseOffset: {
48
- x: number;
49
- y: number;
50
- };
51
- active: boolean;
52
- overLight: boolean;
53
- cornerRadius: number;
54
- padding: string;
55
- glassSize: {
56
- width: number;
57
- height: number;
58
- };
59
- }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
60
- declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
61
- export default _default;
62
- type __VLS_WithSlots<T, S> = T & {
63
- new (): {
64
- $slots: S;
65
- };
66
- };
@@ -1,9 +0,0 @@
1
- type __VLS_Props = {
2
- id: string;
3
- displacementScale: number;
4
- aberrationIntensity: number;
5
- width: number;
6
- height: number;
7
- };
8
- declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
9
- export default _default;
@@ -1,54 +0,0 @@
1
- interface LiquidGlassProps {
2
- displacementScale?: number;
3
- blurAmount?: number;
4
- saturation?: number;
5
- aberrationIntensity?: number;
6
- elasticity?: number;
7
- cornerRadius?: number;
8
- globalMousePos?: {
9
- x: number;
10
- y: number;
11
- };
12
- mouseOffset?: {
13
- x: number;
14
- y: number;
15
- };
16
- mouseContainer?: HTMLElement | null;
17
- className?: string;
18
- padding?: string;
19
- style?: Record<string, any>;
20
- overLight?: boolean;
21
- onClick?: () => void;
22
- }
23
- declare var __VLS_17: {};
24
- type __VLS_Slots = {} & {
25
- default?: (props: typeof __VLS_17) => any;
26
- };
27
- declare const __VLS_component: import("vue").DefineComponent<LiquidGlassProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<LiquidGlassProps> & Readonly<{}>, {
28
- displacementScale: number;
29
- aberrationIntensity: number;
30
- onClick: () => void;
31
- className: string;
32
- blurAmount: number;
33
- saturation: number;
34
- mouseOffset: {
35
- x: number;
36
- y: number;
37
- };
38
- overLight: boolean;
39
- cornerRadius: number;
40
- padding: string;
41
- elasticity: number;
42
- globalMousePos: {
43
- x: number;
44
- y: number;
45
- };
46
- mouseContainer: HTMLElement | null;
47
- }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
48
- declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
49
- export default _default;
50
- type __VLS_WithSlots<T, S> = T & {
51
- new (): {
52
- $slots: S;
53
- };
54
- };
@@ -1 +0,0 @@
1
- export { default as App } from '@/App.vue';