glass-studio-ui-pro 0.1.5 → 0.1.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/dist/liquid-glass-ui.es.js +174 -110
- package/dist/liquid-glass-ui.umd.js +26 -1
- package/package.json +7 -11
|
@@ -1,17 +1,16 @@
|
|
|
1
|
-
import { defineComponent as
|
|
2
|
-
|
|
3
|
-
let M = {
|
|
1
|
+
import { defineComponent as S, computed as f, openBlock as d, createBlock as B, resolveDynamicComponent as V, normalizeStyle as C, normalizeClass as $, withCtx as F, createElementBlock as h, renderSlot as m, createCommentVNode as k, createElementVNode as b, h as x, unref as M, createStaticVNode as T } from "vue";
|
|
2
|
+
let j = {
|
|
4
3
|
isValid: !0,
|
|
5
4
|
// Default to true while checking
|
|
6
5
|
tier: "pro"
|
|
7
6
|
};
|
|
8
|
-
const
|
|
7
|
+
const _ = () => j, U = {
|
|
9
8
|
key: 0,
|
|
10
9
|
class: "cm-card-header"
|
|
11
|
-
},
|
|
10
|
+
}, N = { class: "cm-card-body" }, R = {
|
|
12
11
|
key: 1,
|
|
13
12
|
class: "cm-card-footer"
|
|
14
|
-
},
|
|
13
|
+
}, L = /* @__PURE__ */ S({
|
|
15
14
|
__name: "CmCard",
|
|
16
15
|
props: {
|
|
17
16
|
type: { default: "none" },
|
|
@@ -25,8 +24,8 @@ const $ = () => M, U = {
|
|
|
25
24
|
tag: { default: "div" },
|
|
26
25
|
shadow: { type: [Boolean, String], default: void 0 }
|
|
27
26
|
},
|
|
28
|
-
setup(
|
|
29
|
-
const
|
|
27
|
+
setup(t) {
|
|
28
|
+
const o = t, a = {
|
|
30
29
|
"glass-frost": { blur: 0, opacity: 0, distortion: "mist", shadow: "reflex" },
|
|
31
30
|
"light-frost": { blur: 5, opacity: 0.08, distortion: "frosted" },
|
|
32
31
|
"heavy-frost": { blur: 24, opacity: 0, distortion: "frosted" },
|
|
@@ -44,60 +43,60 @@ const $ = () => M, U = {
|
|
|
44
43
|
frosted: { blur: 20, opacity: 0.12, distortion: "frosted" },
|
|
45
44
|
glass: { blur: 0, opacity: 1, distortion: "none" },
|
|
46
45
|
none: { blur: 15, opacity: 0.1, distortion: "none" }
|
|
47
|
-
},
|
|
48
|
-
const e =
|
|
46
|
+
}, s = f(() => {
|
|
47
|
+
const e = a[o.type] || a.none, l = _().isValid ? o.distortion ?? e.distortion : "none";
|
|
49
48
|
return {
|
|
50
|
-
blur:
|
|
51
|
-
opacity:
|
|
52
|
-
brightness:
|
|
53
|
-
distortion:
|
|
54
|
-
shadow:
|
|
49
|
+
blur: o.blur ?? e.blur,
|
|
50
|
+
opacity: o.opacity ?? e.opacity,
|
|
51
|
+
brightness: o.brightness ?? e.brightness,
|
|
52
|
+
distortion: l,
|
|
53
|
+
shadow: o.shadow ?? e.shadow
|
|
55
54
|
};
|
|
56
|
-
}), n = (e) => !e || e === "none" ? "" : `url(#cm-glass-distortion-${e})`,
|
|
57
|
-
const e =
|
|
55
|
+
}), n = (e) => !e || e === "none" ? "" : `url(#cm-glass-distortion-${e})`, i = f(() => {
|
|
56
|
+
const e = s.value.shadow;
|
|
58
57
|
return e === "mist" || e === "deep" ? "cm-shadow-mist" : e === "reflex" || e === !0 ? "cm-shadow-reflex" : "";
|
|
59
|
-
}),
|
|
60
|
-
const e = [], r = typeof
|
|
61
|
-
r && r > 0 && e.push(`blur(${r}px)`),
|
|
62
|
-
const
|
|
63
|
-
|
|
64
|
-
const
|
|
58
|
+
}), p = f(() => {
|
|
59
|
+
const e = [], r = typeof s.value.blur == "string" ? parseFloat(s.value.blur) : s.value.blur;
|
|
60
|
+
r && r > 0 && e.push(`blur(${r}px)`), s.value.brightness && e.push(`brightness(${s.value.brightness})`);
|
|
61
|
+
const l = n(s.value.distortion);
|
|
62
|
+
l && e.push(l);
|
|
63
|
+
const g = e.join(" ");
|
|
65
64
|
let u;
|
|
66
|
-
const
|
|
67
|
-
return typeof
|
|
68
|
-
backdropFilter:
|
|
69
|
-
"-webkit-backdrop-filter":
|
|
70
|
-
background: `rgba(var(--glass-bg-rgb), ${
|
|
71
|
-
borderRadius:
|
|
65
|
+
const c = s.value.shadow;
|
|
66
|
+
return typeof c == "string" && c !== "mist" && c !== "reflex" && c !== "deep" && (u = c), {
|
|
67
|
+
backdropFilter: g,
|
|
68
|
+
"-webkit-backdrop-filter": g,
|
|
69
|
+
background: `rgba(var(--glass-bg-rgb), ${s.value.opacity})`,
|
|
70
|
+
borderRadius: o.radius,
|
|
72
71
|
boxShadow: u,
|
|
73
72
|
"-webkit-box-shadow": u
|
|
74
73
|
};
|
|
75
74
|
});
|
|
76
|
-
return (e, r) => (
|
|
77
|
-
class:
|
|
78
|
-
{ "cm-card-grain":
|
|
79
|
-
`cm-distortion-${
|
|
80
|
-
`cm-type-${
|
|
81
|
-
|
|
82
|
-
|
|
75
|
+
return (e, r) => (d(), B(V(t.tag), {
|
|
76
|
+
class: $(["cm-card", [
|
|
77
|
+
{ "cm-card-grain": t.grain },
|
|
78
|
+
`cm-distortion-${s.value.distortion}`,
|
|
79
|
+
`cm-type-${t.type}`,
|
|
80
|
+
i.value,
|
|
81
|
+
t.customClass
|
|
83
82
|
]]),
|
|
84
|
-
style:
|
|
83
|
+
style: C(p.value)
|
|
85
84
|
}, {
|
|
86
|
-
default:
|
|
87
|
-
e.$slots.header ? (
|
|
88
|
-
|
|
89
|
-
])) :
|
|
90
|
-
b("div",
|
|
91
|
-
|
|
85
|
+
default: F(() => [
|
|
86
|
+
e.$slots.header ? (d(), h("div", U, [
|
|
87
|
+
m(e.$slots, "header")
|
|
88
|
+
])) : k("", !0),
|
|
89
|
+
b("div", N, [
|
|
90
|
+
m(e.$slots, "default")
|
|
92
91
|
]),
|
|
93
|
-
e.$slots.footer ? (
|
|
94
|
-
|
|
95
|
-
])) :
|
|
92
|
+
e.$slots.footer ? (d(), h("div", R, [
|
|
93
|
+
m(e.$slots, "footer")
|
|
94
|
+
])) : k("", !0)
|
|
96
95
|
]),
|
|
97
96
|
_: 3
|
|
98
97
|
}, 8, ["class", "style"]));
|
|
99
98
|
}
|
|
100
|
-
}),
|
|
99
|
+
}), I = { class: "cm-btn-content" }, O = /* @__PURE__ */ S({
|
|
101
100
|
__name: "CmButton",
|
|
102
101
|
props: {
|
|
103
102
|
variant: { default: "default" },
|
|
@@ -109,8 +108,8 @@ const $ = () => M, U = {
|
|
|
109
108
|
shadow: { type: [Boolean, String], default: "none" }
|
|
110
109
|
},
|
|
111
110
|
emits: ["click"],
|
|
112
|
-
setup(
|
|
113
|
-
const
|
|
111
|
+
setup(t, { emit: o }) {
|
|
112
|
+
const a = t, s = f(() => ({
|
|
114
113
|
// Main button element is a transparent container
|
|
115
114
|
background: "none",
|
|
116
115
|
border: "none",
|
|
@@ -118,115 +117,180 @@ const $ = () => M, U = {
|
|
|
118
117
|
outline: "none",
|
|
119
118
|
boxShadow: "none"
|
|
120
119
|
// Handled by variants or shadowClass on main button
|
|
121
|
-
})), n = (e) => !e || e === "none" ? "" : `url(#cm-glass-distortion-${e})`,
|
|
120
|
+
})), n = (e) => !e || e === "none" ? "" : `url(#cm-glass-distortion-${e})`, i = f(() => {
|
|
122
121
|
const e = [], r = [];
|
|
123
|
-
|
|
124
|
-
const
|
|
122
|
+
a.blur > 0 && e.push(`blur(${a.blur}px)`);
|
|
123
|
+
const g = _().isValid ? a.distortion : "none", u = n(g);
|
|
125
124
|
u && r.push(u);
|
|
126
|
-
const
|
|
127
|
-
let
|
|
128
|
-
return
|
|
125
|
+
const c = e.join(" "), G = r.join(" ");
|
|
126
|
+
let v = `rgba(var(--glass-bg-rgb), ${a.opacity})`, y = "rgba(var(--glass-border-rgb), 0.15)";
|
|
127
|
+
return a.variant === "primary" ? (v = `rgba(var(--primary-color-rgb), ${Math.min(a.opacity + 0.15, 0.4)})`, y = "rgba(var(--primary-color-rgb), 0.3)") : a.variant === "ghost" && (v = "transparent", y = "transparent", a.active && (v = `rgba(var(--glass-bg-rgb), ${a.opacity})`, y = "rgba(var(--glass-border-rgb), 0.15)")), {
|
|
129
128
|
position: "absolute",
|
|
130
129
|
top: 0,
|
|
131
130
|
left: 0,
|
|
132
131
|
right: 0,
|
|
133
132
|
bottom: 0,
|
|
134
|
-
background:
|
|
135
|
-
border:
|
|
136
|
-
backdropFilter:
|
|
137
|
-
"-webkit-backdrop-filter":
|
|
138
|
-
filter:
|
|
133
|
+
background: v,
|
|
134
|
+
border: a.variant === "ghost" && !a.active ? "none" : `1px solid ${y}`,
|
|
135
|
+
backdropFilter: c,
|
|
136
|
+
"-webkit-backdrop-filter": c,
|
|
137
|
+
filter: G,
|
|
139
138
|
// SVG filters on the colored surface
|
|
140
139
|
pointerEvents: "none",
|
|
141
140
|
zIndex: 1,
|
|
142
141
|
borderRadius: "inherit",
|
|
143
142
|
transition: "all 0.3s cubic-bezier(0.4, 0, 0.2, 1)"
|
|
144
143
|
};
|
|
145
|
-
}),
|
|
146
|
-
const e =
|
|
144
|
+
}), p = f(() => {
|
|
145
|
+
const e = a.shadow;
|
|
147
146
|
return e === "mist" || e === "deep" ? "cm-shadow-mist" : e === "reflex" || e === !0 ? "cm-shadow-reflex" : "";
|
|
148
147
|
});
|
|
149
|
-
return (e, r) => (
|
|
150
|
-
class:
|
|
151
|
-
`cm-btn-${
|
|
152
|
-
{ "cm-btn-active":
|
|
153
|
-
{ "cm-btn-glow":
|
|
154
|
-
|
|
148
|
+
return (e, r) => (d(), h("button", {
|
|
149
|
+
class: $(["cm-btn", [
|
|
150
|
+
`cm-btn-${a.variant}`,
|
|
151
|
+
{ "cm-btn-active": a.active },
|
|
152
|
+
{ "cm-btn-glow": a.glow },
|
|
153
|
+
p.value
|
|
155
154
|
]]),
|
|
156
|
-
style:
|
|
157
|
-
onClick: r[0] || (r[0] = (
|
|
155
|
+
style: C(s.value),
|
|
156
|
+
onClick: r[0] || (r[0] = (l) => e.$emit("click", l))
|
|
158
157
|
}, [
|
|
159
158
|
b("div", {
|
|
160
159
|
class: "cm-btn-surface",
|
|
161
|
-
style:
|
|
160
|
+
style: C(i.value)
|
|
162
161
|
}, null, 4),
|
|
163
|
-
b("div",
|
|
164
|
-
|
|
162
|
+
b("div", I, [
|
|
163
|
+
m(e.$slots, "default")
|
|
165
164
|
])
|
|
166
165
|
], 6));
|
|
167
166
|
}
|
|
168
|
-
})
|
|
167
|
+
});
|
|
168
|
+
/**
|
|
169
|
+
* @license lucide-vue-next v0.477.0 - ISC
|
|
170
|
+
*
|
|
171
|
+
* This source code is licensed under the ISC license.
|
|
172
|
+
* See the LICENSE file in the root directory of this source tree.
|
|
173
|
+
*/
|
|
174
|
+
const q = (t) => t.replace(/([a-z0-9])([A-Z])/g, "$1-$2").toLowerCase();
|
|
175
|
+
/**
|
|
176
|
+
* @license lucide-vue-next v0.477.0 - ISC
|
|
177
|
+
*
|
|
178
|
+
* This source code is licensed under the ISC license.
|
|
179
|
+
* See the LICENSE file in the root directory of this source tree.
|
|
180
|
+
*/
|
|
181
|
+
var w = {
|
|
182
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
183
|
+
width: 24,
|
|
184
|
+
height: 24,
|
|
185
|
+
viewBox: "0 0 24 24",
|
|
186
|
+
fill: "none",
|
|
187
|
+
stroke: "currentColor",
|
|
188
|
+
"stroke-width": 2,
|
|
189
|
+
"stroke-linecap": "round",
|
|
190
|
+
"stroke-linejoin": "round"
|
|
191
|
+
};
|
|
192
|
+
/**
|
|
193
|
+
* @license lucide-vue-next v0.477.0 - ISC
|
|
194
|
+
*
|
|
195
|
+
* This source code is licensed under the ISC license.
|
|
196
|
+
* See the LICENSE file in the root directory of this source tree.
|
|
197
|
+
*/
|
|
198
|
+
const E = ({ size: t, strokeWidth: o = 2, absoluteStrokeWidth: a, color: s, iconNode: n, name: i, class: p, ...e }, { slots: r }) => x(
|
|
199
|
+
"svg",
|
|
200
|
+
{
|
|
201
|
+
...w,
|
|
202
|
+
width: t || w.width,
|
|
203
|
+
height: t || w.height,
|
|
204
|
+
stroke: s || w.stroke,
|
|
205
|
+
"stroke-width": a ? Number(o) * 24 / Number(t) : o,
|
|
206
|
+
class: ["lucide", `lucide-${q(i ?? "icon")}`],
|
|
207
|
+
...e
|
|
208
|
+
},
|
|
209
|
+
[...n.map((l) => x(...l)), ...r.default ? [r.default()] : []]
|
|
210
|
+
);
|
|
211
|
+
/**
|
|
212
|
+
* @license lucide-vue-next v0.477.0 - ISC
|
|
213
|
+
*
|
|
214
|
+
* This source code is licensed under the ISC license.
|
|
215
|
+
* See the LICENSE file in the root directory of this source tree.
|
|
216
|
+
*/
|
|
217
|
+
const z = (t, o) => (a, { slots: s }) => x(
|
|
218
|
+
E,
|
|
219
|
+
{
|
|
220
|
+
...a,
|
|
221
|
+
iconNode: o,
|
|
222
|
+
name: t
|
|
223
|
+
},
|
|
224
|
+
s
|
|
225
|
+
);
|
|
226
|
+
/**
|
|
227
|
+
* @license lucide-vue-next v0.477.0 - ISC
|
|
228
|
+
*
|
|
229
|
+
* This source code is licensed under the ISC license.
|
|
230
|
+
* See the LICENSE file in the root directory of this source tree.
|
|
231
|
+
*/
|
|
232
|
+
const A = z("CheckIcon", [["path", { d: "M20 6 9 17l-5-5", key: "1gmf2c" }]]), P = { class: "cm-checkbox-wrapper" }, K = ["checked", "disabled"], Z = { class: "cm-checkbox-box" }, H = {
|
|
169
233
|
key: 0,
|
|
170
234
|
class: "cm-checkbox-label"
|
|
171
|
-
},
|
|
235
|
+
}, J = /* @__PURE__ */ S({
|
|
172
236
|
__name: "CmCheckbox",
|
|
173
237
|
props: {
|
|
174
238
|
modelValue: { type: Boolean, default: !1 },
|
|
175
239
|
disabled: { type: Boolean, default: !1 }
|
|
176
240
|
},
|
|
177
241
|
emits: ["update:modelValue", "change"],
|
|
178
|
-
setup(
|
|
179
|
-
const
|
|
180
|
-
const
|
|
181
|
-
|
|
242
|
+
setup(t, { emit: o }) {
|
|
243
|
+
const a = o, s = (n) => {
|
|
244
|
+
const i = n.target;
|
|
245
|
+
a("update:modelValue", i.checked), a("change", i.checked);
|
|
182
246
|
};
|
|
183
|
-
return (n,
|
|
184
|
-
class:
|
|
247
|
+
return (n, i) => (d(), h("label", {
|
|
248
|
+
class: $(["cm-checkbox-container", { disabled: t.disabled }])
|
|
185
249
|
}, [
|
|
186
|
-
b("div",
|
|
250
|
+
b("div", P, [
|
|
187
251
|
b("input", {
|
|
188
252
|
type: "checkbox",
|
|
189
|
-
checked:
|
|
190
|
-
onChange:
|
|
191
|
-
disabled:
|
|
192
|
-
}, null, 40,
|
|
193
|
-
b("div",
|
|
194
|
-
|
|
253
|
+
checked: t.modelValue,
|
|
254
|
+
onChange: s,
|
|
255
|
+
disabled: t.disabled
|
|
256
|
+
}, null, 40, K),
|
|
257
|
+
b("div", Z, [
|
|
258
|
+
t.modelValue ? (d(), B(M(A), {
|
|
195
259
|
key: 0,
|
|
196
260
|
class: "cm-checkbox-icon"
|
|
197
|
-
})) :
|
|
261
|
+
})) : k("", !0)
|
|
198
262
|
])
|
|
199
263
|
]),
|
|
200
|
-
n.$slots.default ? (
|
|
201
|
-
|
|
202
|
-
])) :
|
|
264
|
+
n.$slots.default ? (d(), h("span", H, [
|
|
265
|
+
m(n.$slots, "default", {}, void 0, !0)
|
|
266
|
+
])) : k("", !0)
|
|
203
267
|
], 2));
|
|
204
268
|
}
|
|
205
|
-
}),
|
|
206
|
-
const
|
|
207
|
-
for (const [
|
|
208
|
-
|
|
209
|
-
return
|
|
210
|
-
},
|
|
269
|
+
}), D = (t, o) => {
|
|
270
|
+
const a = t.__vccOpts || t;
|
|
271
|
+
for (const [s, n] of o)
|
|
272
|
+
a[s] = n;
|
|
273
|
+
return a;
|
|
274
|
+
}, Q = /* @__PURE__ */ D(J, [["__scopeId", "data-v-d47cd0ab"]]), X = {}, Y = {
|
|
211
275
|
class: "cm-glass-filters",
|
|
212
276
|
"aria-hidden": "true",
|
|
213
277
|
focusable: "false"
|
|
214
278
|
};
|
|
215
|
-
function
|
|
216
|
-
return
|
|
217
|
-
|
|
279
|
+
function W(t, o) {
|
|
280
|
+
return d(), h("svg", Y, [...o[0] || (o[0] = [
|
|
281
|
+
T('<filter id="cm-glass-distortion-wavy" x="-10%" y="-10%" width="120%" height="120%" filterUnits="objectBoundingBox" data-v-52af4cfb><feTurbulence type="fractalNoise" baseFrequency="0.003 0.007" numOctaves="1" result="turbulence" data-v-52af4cfb></feTurbulence><feDisplacementMap in="SourceGraphic" in2="turbulence" scale="200" xChannelSelector="R" yChannelSelector="G" data-v-52af4cfb></feDisplacementMap></filter><filter id="cm-glass-distortion-frosted" x="-5%" y="-5%" width="110%" height="110%" filterUnits="objectBoundingBox" data-v-52af4cfb><feTurbulence type="fractalNoise" baseFrequency="0.009 0.009" numOctaves="2" seed="92" result="noise" data-v-52af4cfb></feTurbulence><feGaussianBlur in="noise" stdDeviation="0.02" result="blur" data-v-52af4cfb></feGaussianBlur><feDisplacementMap in="SourceGraphic" in2="blur" scale="80" xChannelSelector="R" yChannelSelector="G" data-v-52af4cfb></feDisplacementMap></filter><filter id="cm-glass-distortion-grain" x="0%" y="0%" width="100%" height="100%" filterUnits="objectBoundingBox" data-v-52af4cfb><feTurbulence type="fractalNoise" baseFrequency="1.2 1.2" numOctaves="1" seed="9000" result="noise" data-v-52af4cfb></feTurbulence><feGaussianBlur in="noise" stdDeviation="0.1" result="blurred" data-v-52af4cfb></feGaussianBlur><feDisplacementMap in="SourceGraphic" in2="blurred" scale="100" xChannelSelector="R" yChannelSelector="G" data-v-52af4cfb></feDisplacementMap></filter><filter id="cm-glass-distortion-ripple" x="-20%" y="-20%" width="140%" height="140%" filterUnits="objectBoundingBox" data-v-52af4cfb><feTurbulence type="turbulence" baseFrequency="0.008" numOctaves="3" result="turbulence" data-v-52af4cfb></feTurbulence><feDisplacementMap in2="turbulence" in="SourceGraphic" scale="155" xChannelSelector="R" yChannelSelector="G" data-v-52af4cfb></feDisplacementMap></filter><filter id="cm-glass-distortion-mist" x="-5%" y="-5%" width="110%" height="110%" filterUnits="objectBoundingBox" data-v-52af4cfb><feTurbulence type="turbulence" baseFrequency="0.02" numOctaves="3" result="turbulence" data-v-52af4cfb></feTurbulence><feDisplacementMap in2="turbulence" in="SourceGraphic" scale="30" xChannelSelector="R" yChannelSelector="G" data-v-52af4cfb></feDisplacementMap></filter>', 5)
|
|
218
282
|
])]);
|
|
219
283
|
}
|
|
220
|
-
const
|
|
221
|
-
install(
|
|
222
|
-
|
|
284
|
+
const ee = /* @__PURE__ */ D(X, [["render", W], ["__scopeId", "data-v-52af4cfb"]]), ae = {
|
|
285
|
+
install(t) {
|
|
286
|
+
t.component("CmCard", L), t.component("CmButton", O), t.component("CmCheckbox", Q), t.component("CmFilters", ee);
|
|
223
287
|
}
|
|
224
288
|
};
|
|
225
289
|
export {
|
|
226
|
-
|
|
227
|
-
|
|
228
|
-
|
|
229
|
-
|
|
230
|
-
|
|
231
|
-
|
|
290
|
+
O as CmButton,
|
|
291
|
+
L as CmCard,
|
|
292
|
+
Q as CmCheckbox,
|
|
293
|
+
ee as CmFilters,
|
|
294
|
+
ae as default,
|
|
295
|
+
_ as getLicenseStatus
|
|
232
296
|
};
|
|
@@ -1 +1,26 @@
|
|
|
1
|
-
(function(
|
|
1
|
+
(function(i,e){typeof exports=="object"&&typeof module<"u"?e(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],e):(i=typeof globalThis<"u"?globalThis:i||self,e(i.LiquidGlassUI={},i.Vue))})(this,(function(i,e){"use strict";let v={isValid:!0,tier:"pro"};const y=()=>v,x={key:0,class:"cm-card-header"},$={class:"cm-card-body"},_={key:1,class:"cm-card-footer"},k=e.defineComponent({__name:"CmCard",props:{type:{default:"none"},blur:{default:void 0},opacity:{default:void 0},brightness:{default:void 0},grain:{type:Boolean,default:!1},distortion:{default:void 0},customClass:{default:""},radius:{default:"16px"},tag:{default:"div"},shadow:{type:[Boolean,String],default:void 0}},setup(o){const a=o,n={"glass-frost":{blur:0,opacity:0,distortion:"mist",shadow:"reflex"},"light-frost":{blur:5,opacity:.08,distortion:"frosted"},"heavy-frost":{blur:24,opacity:0,distortion:"frosted"},"grain-frost":{blur:4,opacity:0,distortion:"grain"},"fine-frost":{blur:7,opacity:0,distortion:"mist",shadow:"reflex"},"soft-mist":{blur:20,opacity:0,distortion:"none",brightness:2,shadow:"mist"},crystal:{blur:10,opacity:.08,distortion:"none"},"deep-velvet":{blur:60,opacity:.2,distortion:"none"},frosted:{blur:20,opacity:.12,distortion:"frosted"},glass:{blur:0,opacity:1,distortion:"none"},none:{blur:15,opacity:.1,distortion:"none"}},r=e.computed(()=>{const t=n[a.type]||n.none,d=y().isValid?a.distortion??t.distortion:"none";return{blur:a.blur??t.blur,opacity:a.opacity??t.opacity,brightness:a.brightness??t.brightness,distortion:d,shadow:a.shadow??t.shadow}}),l=t=>!t||t==="none"?"":`url(#cm-glass-distortion-${t})`,c=e.computed(()=>{const t=r.value.shadow;return t==="mist"||t==="deep"?"cm-shadow-mist":t==="reflex"||t===!0?"cm-shadow-reflex":""}),m=e.computed(()=>{const t=[],s=typeof r.value.blur=="string"?parseFloat(r.value.blur):r.value.blur;s&&s>0&&t.push(`blur(${s}px)`),r.value.brightness&&t.push(`brightness(${r.value.brightness})`);const d=l(r.value.distortion);d&&t.push(d);const p=t.join(" ");let f;const u=r.value.shadow;return typeof u=="string"&&u!=="mist"&&u!=="reflex"&&u!=="deep"&&(f=u),{backdropFilter:p,"-webkit-backdrop-filter":p,background:`rgba(var(--glass-bg-rgb), ${r.value.opacity})`,borderRadius:a.radius,boxShadow:f,"-webkit-box-shadow":f}});return(t,s)=>(e.openBlock(),e.createBlock(e.resolveDynamicComponent(o.tag),{class:e.normalizeClass(["cm-card",[{"cm-card-grain":o.grain},`cm-distortion-${r.value.distortion}`,`cm-type-${o.type}`,c.value,o.customClass]]),style:e.normalizeStyle(m.value)},{default:e.withCtx(()=>[t.$slots.header?(e.openBlock(),e.createElementBlock("div",x,[e.renderSlot(t.$slots,"header")])):e.createCommentVNode("",!0),e.createElementVNode("div",$,[e.renderSlot(t.$slots,"default")]),t.$slots.footer?(e.openBlock(),e.createElementBlock("div",_,[e.renderSlot(t.$slots,"footer")])):e.createCommentVNode("",!0)]),_:3},8,["class","style"]))}}),V={class:"cm-btn-content"},C=e.defineComponent({__name:"CmButton",props:{variant:{default:"default"},active:{type:Boolean,default:!1},glow:{type:Boolean,default:!1},blur:{default:12},opacity:{default:.12},distortion:{default:"none"},shadow:{type:[Boolean,String],default:"none"}},emits:["click"],setup(o,{emit:a}){const n=o,r=e.computed(()=>({background:"none",border:"none",outline:"none",boxShadow:"none"})),l=t=>!t||t==="none"?"":`url(#cm-glass-distortion-${t})`,c=e.computed(()=>{const t=[],s=[];n.blur>0&&t.push(`blur(${n.blur}px)`);const p=y().isValid?n.distortion:"none",f=l(p);f&&s.push(f);const u=t.join(" "),I=s.join(" ");let h=`rgba(var(--glass-bg-rgb), ${n.opacity})`,g="rgba(var(--glass-border-rgb), 0.15)";return n.variant==="primary"?(h=`rgba(var(--primary-color-rgb), ${Math.min(n.opacity+.15,.4)})`,g="rgba(var(--primary-color-rgb), 0.3)"):n.variant==="ghost"&&(h="transparent",g="transparent",n.active&&(h=`rgba(var(--glass-bg-rgb), ${n.opacity})`,g="rgba(var(--glass-border-rgb), 0.15)")),{position:"absolute",top:0,left:0,right:0,bottom:0,background:h,border:n.variant==="ghost"&&!n.active?"none":`1px solid ${g}`,backdropFilter:u,"-webkit-backdrop-filter":u,filter:I,pointerEvents:"none",zIndex:1,borderRadius:"inherit",transition:"all 0.3s cubic-bezier(0.4, 0, 0.2, 1)"}}),m=e.computed(()=>{const t=n.shadow;return t==="mist"||t==="deep"?"cm-shadow-mist":t==="reflex"||t===!0?"cm-shadow-reflex":""});return(t,s)=>(e.openBlock(),e.createElementBlock("button",{class:e.normalizeClass(["cm-btn",[`cm-btn-${n.variant}`,{"cm-btn-active":n.active},{"cm-btn-glow":n.glow},m.value]]),style:e.normalizeStyle(r.value),onClick:s[0]||(s[0]=d=>t.$emit("click",d))},[e.createElementVNode("div",{class:"cm-btn-surface",style:e.normalizeStyle(c.value)},null,4),e.createElementVNode("div",V,[e.renderSlot(t.$slots,"default")])],6))}});/**
|
|
2
|
+
* @license lucide-vue-next v0.477.0 - ISC
|
|
3
|
+
*
|
|
4
|
+
* This source code is licensed under the ISC license.
|
|
5
|
+
* See the LICENSE file in the root directory of this source tree.
|
|
6
|
+
*/const N=o=>o.replace(/([a-z0-9])([A-Z])/g,"$1-$2").toLowerCase();/**
|
|
7
|
+
* @license lucide-vue-next v0.477.0 - ISC
|
|
8
|
+
*
|
|
9
|
+
* This source code is licensed under the ISC license.
|
|
10
|
+
* See the LICENSE file in the root directory of this source tree.
|
|
11
|
+
*/var b={xmlns:"http://www.w3.org/2000/svg",width:24,height:24,viewBox:"0 0 24 24",fill:"none",stroke:"currentColor","stroke-width":2,"stroke-linecap":"round","stroke-linejoin":"round"};/**
|
|
12
|
+
* @license lucide-vue-next v0.477.0 - ISC
|
|
13
|
+
*
|
|
14
|
+
* This source code is licensed under the ISC license.
|
|
15
|
+
* See the LICENSE file in the root directory of this source tree.
|
|
16
|
+
*/const D=({size:o,strokeWidth:a=2,absoluteStrokeWidth:n,color:r,iconNode:l,name:c,class:m,...t},{slots:s})=>e.h("svg",{...b,width:o||b.width,height:o||b.height,stroke:r||b.stroke,"stroke-width":n?Number(a)*24/Number(o):a,class:["lucide",`lucide-${N(c??"icon")}`],...t},[...l.map(d=>e.h(...d)),...s.default?[s.default()]:[]]);/**
|
|
17
|
+
* @license lucide-vue-next v0.477.0 - ISC
|
|
18
|
+
*
|
|
19
|
+
* This source code is licensed under the ISC license.
|
|
20
|
+
* See the LICENSE file in the root directory of this source tree.
|
|
21
|
+
*/const E=(o,a)=>(n,{slots:r})=>e.h(D,{...n,iconNode:a,name:o},r);/**
|
|
22
|
+
* @license lucide-vue-next v0.477.0 - ISC
|
|
23
|
+
*
|
|
24
|
+
* This source code is licensed under the ISC license.
|
|
25
|
+
* See the LICENSE file in the root directory of this source tree.
|
|
26
|
+
*/const G=E("CheckIcon",[["path",{d:"M20 6 9 17l-5-5",key:"1gmf2c"}]]),T={class:"cm-checkbox-wrapper"},F=["checked","disabled"],M={class:"cm-checkbox-box"},j={key:0,class:"cm-checkbox-label"},U=e.defineComponent({__name:"CmCheckbox",props:{modelValue:{type:Boolean,default:!1},disabled:{type:Boolean,default:!1}},emits:["update:modelValue","change"],setup(o,{emit:a}){const n=a,r=l=>{const c=l.target;n("update:modelValue",c.checked),n("change",c.checked)};return(l,c)=>(e.openBlock(),e.createElementBlock("label",{class:e.normalizeClass(["cm-checkbox-container",{disabled:o.disabled}])},[e.createElementVNode("div",T,[e.createElementVNode("input",{type:"checkbox",checked:o.modelValue,onChange:r,disabled:o.disabled},null,40,F),e.createElementVNode("div",M,[o.modelValue?(e.openBlock(),e.createBlock(e.unref(G),{key:0,class:"cm-checkbox-icon"})):e.createCommentVNode("",!0)])]),l.$slots.default?(e.openBlock(),e.createElementBlock("span",j,[e.renderSlot(l.$slots,"default",{},void 0,!0)])):e.createCommentVNode("",!0)],2))}}),w=(o,a)=>{const n=o.__vccOpts||o;for(const[r,l]of a)n[r]=l;return n},B=w(U,[["__scopeId","data-v-d47cd0ab"]]),L={},R={class:"cm-glass-filters","aria-hidden":"true",focusable:"false"};function q(o,a){return e.openBlock(),e.createElementBlock("svg",R,[...a[0]||(a[0]=[e.createStaticVNode('<filter id="cm-glass-distortion-wavy" x="-10%" y="-10%" width="120%" height="120%" filterUnits="objectBoundingBox" data-v-52af4cfb><feTurbulence type="fractalNoise" baseFrequency="0.003 0.007" numOctaves="1" result="turbulence" data-v-52af4cfb></feTurbulence><feDisplacementMap in="SourceGraphic" in2="turbulence" scale="200" xChannelSelector="R" yChannelSelector="G" data-v-52af4cfb></feDisplacementMap></filter><filter id="cm-glass-distortion-frosted" x="-5%" y="-5%" width="110%" height="110%" filterUnits="objectBoundingBox" data-v-52af4cfb><feTurbulence type="fractalNoise" baseFrequency="0.009 0.009" numOctaves="2" seed="92" result="noise" data-v-52af4cfb></feTurbulence><feGaussianBlur in="noise" stdDeviation="0.02" result="blur" data-v-52af4cfb></feGaussianBlur><feDisplacementMap in="SourceGraphic" in2="blur" scale="80" xChannelSelector="R" yChannelSelector="G" data-v-52af4cfb></feDisplacementMap></filter><filter id="cm-glass-distortion-grain" x="0%" y="0%" width="100%" height="100%" filterUnits="objectBoundingBox" data-v-52af4cfb><feTurbulence type="fractalNoise" baseFrequency="1.2 1.2" numOctaves="1" seed="9000" result="noise" data-v-52af4cfb></feTurbulence><feGaussianBlur in="noise" stdDeviation="0.1" result="blurred" data-v-52af4cfb></feGaussianBlur><feDisplacementMap in="SourceGraphic" in2="blurred" scale="100" xChannelSelector="R" yChannelSelector="G" data-v-52af4cfb></feDisplacementMap></filter><filter id="cm-glass-distortion-ripple" x="-20%" y="-20%" width="140%" height="140%" filterUnits="objectBoundingBox" data-v-52af4cfb><feTurbulence type="turbulence" baseFrequency="0.008" numOctaves="3" result="turbulence" data-v-52af4cfb></feTurbulence><feDisplacementMap in2="turbulence" in="SourceGraphic" scale="155" xChannelSelector="R" yChannelSelector="G" data-v-52af4cfb></feDisplacementMap></filter><filter id="cm-glass-distortion-mist" x="-5%" y="-5%" width="110%" height="110%" filterUnits="objectBoundingBox" data-v-52af4cfb><feTurbulence type="turbulence" baseFrequency="0.02" numOctaves="3" result="turbulence" data-v-52af4cfb></feTurbulence><feDisplacementMap in2="turbulence" in="SourceGraphic" scale="30" xChannelSelector="R" yChannelSelector="G" data-v-52af4cfb></feDisplacementMap></filter>',5)])])}const S=w(L,[["render",q],["__scopeId","data-v-52af4cfb"]]),z={install(o){o.component("CmCard",k),o.component("CmButton",C),o.component("CmCheckbox",B),o.component("CmFilters",S)}};i.CmButton=C,i.CmCard=k,i.CmCheckbox=B,i.CmFilters=S,i.default=z,i.getLicenseStatus=y,Object.defineProperties(i,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})}));
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "glass-studio-ui-pro",
|
|
3
|
-
"version": "0.1.
|
|
3
|
+
"version": "0.1.7",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"files": [
|
|
6
6
|
"dist",
|
|
@@ -17,16 +17,13 @@
|
|
|
17
17
|
"import": "./dist/liquid-glass-ui.es.js",
|
|
18
18
|
"require": "./dist/liquid-glass-ui.umd.js"
|
|
19
19
|
},
|
|
20
|
-
"./styles":
|
|
21
|
-
|
|
22
|
-
"import": "./dist/style.css",
|
|
23
|
-
"require": "./dist/style.css",
|
|
24
|
-
"default": "./dist/style.css"
|
|
25
|
-
}
|
|
20
|
+
"./styles": "./dist/style.css",
|
|
21
|
+
"./style.css": "./dist/style.css"
|
|
26
22
|
},
|
|
27
23
|
"typesVersions": {
|
|
28
24
|
"*": {
|
|
29
|
-
"styles": ["./dist/styles.d.ts"]
|
|
25
|
+
"styles": ["./dist/styles.d.ts"],
|
|
26
|
+
"style.css": ["./dist/styles.d.ts"]
|
|
30
27
|
}
|
|
31
28
|
},
|
|
32
29
|
"scripts": {
|
|
@@ -35,13 +32,12 @@
|
|
|
35
32
|
"preview": "vite preview"
|
|
36
33
|
},
|
|
37
34
|
"peerDependencies": {
|
|
38
|
-
"vue": "^3.3.0"
|
|
39
|
-
"lucide-vue-next": ">=0.400.0"
|
|
35
|
+
"vue": "^3.3.0"
|
|
40
36
|
},
|
|
41
37
|
"dependencies": {
|
|
38
|
+
"lucide-vue-next": "^0.477.0"
|
|
42
39
|
},
|
|
43
40
|
"devDependencies": {
|
|
44
|
-
"lucide-vue-next": "^0.477.0",
|
|
45
41
|
"@types/node": "^22.0.0",
|
|
46
42
|
"@vitejs/plugin-vue": "^5.2.1",
|
|
47
43
|
"@vue/tsconfig": "^0.7.0",
|