@glasnost-ui/vue
Version:
Vue 3 components for Glasnost UI with liquid glass aesthetics
471 lines (458 loc) • 17.8 kB
JavaScript
import { defineComponent as m, onMounted as b, openBlock as i, createElementBlock as r, normalizeClass as g, createElementVNode as t, renderSlot as f, createCommentVNode as c, toDisplayString as p, computed as y, createStaticVNode as _ } from "vue";
const G = `
<svg style="display: none;" xmlns="http://www.w3.org/2000/svg">
<defs>
<!-- Advanced Glass Morphism Filter -->
<filter id="glassDistortion" x="-50%" y="-50%" width="200%" height="200%">
<feTurbulence baseFrequency="0.02" numOctaves="3" result="turbulence"/>
<feDisplacementMap in="SourceGraphic" in2="turbulence" scale="8" result="displacement"/>
<feGaussianBlur in="displacement" stdDeviation="4" result="blur"/>
<feColorMatrix in="blur" type="matrix"
values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 0.9 0"/>
<feOffset in="blur" dx="0" dy="8" result="shadow"/>
<feMerge>
<feMergeNode in="shadow"/>
<feMergeNode in="SourceGraphic"/>
</feMerge>
</filter>
<!-- Liquid Glass Navbar Filter -->
<filter id="liquidNavbar" x="-50%" y="-50%" width="200%" height="200%">
<feTurbulence baseFrequency="0.01" numOctaves="2" result="noise"/>
<feDisplacementMap in="SourceGraphic" in2="noise" scale="3" result="distort"/>
<feGaussianBlur in="distort" stdDeviation="2" result="blur"/>
<feColorMatrix in="blur" type="matrix"
values="1.1 0 0 0 0 0 1.1 0 0 0 0 0 1.2 0 0 0 0 0 0.95 0"/>
<feOffset in="blur" dx="0" dy="4" result="shadow"/>
<feMerge>
<feMergeNode in="shadow"/>
<feMergeNode in="SourceGraphic"/>
</feMerge>
</filter>
<!-- Frosted Glass Effect -->
<filter id="frostedGlass" x="-20%" y="-20%" width="140%" height="140%">
<feTurbulence baseFrequency="0.9" numOctaves="4" stitchTiles="stitch" result="noise"/>
<feColorMatrix in="noise" type="saturate" values="0"/>
<feComponentTransfer in="noise" result="morenoise">
<feFuncA type="discrete" tableValues="0.1 0.15 0.2 0.25 0.3"/>
</feComponentTransfer>
<feComposite in="SourceGraphic" in2="morenoise" operator="over" result="composite"/>
<feGaussianBlur in="composite" stdDeviation="1.5" result="blur"/>
<feOffset in="blur" dx="0" dy="2" result="offset"/>
<feMerge>
<feMergeNode in="offset"/>
<feMergeNode in="SourceGraphic"/>
</feMerge>
</filter>
<!-- Clean Glass Base Filter -->
<filter id="glassBase" x="-50%" y="-50%" width="200%" height="200%">
<feGaussianBlur in="SourceGraphic" stdDeviation="2" result="blur"/>
<feColorMatrix in="blur" type="matrix"
values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 0.85 0"/>
<feOffset in="blur" dx="0" dy="4" result="shadow"/>
<feMerge>
<feMergeNode in="shadow"/>
<feMergeNode in="SourceGraphic"/>
</feMerge>
</filter>
<!-- Clean Button Glass Effect -->
<filter id="buttonGlass" x="-25%" y="-25%" width="150%" height="150%">
<feGaussianBlur in="SourceGraphic" stdDeviation="1.5" result="buttonBlur"/>
<feColorMatrix in="buttonBlur" type="matrix"
values="1.02 0 0 0 0 0 1.02 0 0 0 0 0 1.05 0 0 0 0 0 0.88 0"/>
<feOffset in="buttonBlur" dx="0" dy="3" result="buttonShadow"/>
<feMerge>
<feMergeNode in="buttonShadow"/>
<feMergeNode in="SourceGraphic"/>
</feMerge>
</filter>
<!-- Clean Card Glass Effect -->
<filter id="cardGlass" x="-50%" y="-50%" width="200%" height="200%">
<feGaussianBlur in="SourceGraphic" stdDeviation="2.5" result="cardBlur"/>
<feColorMatrix in="cardBlur" type="matrix"
values="1.05 0 0 0 0 0 1.05 0 0 0 0 0 1.1 0 0 0 0 0 0.8 0"/>
<feOffset in="cardBlur" dx="0" dy="6" result="cardShadow"/>
<feMerge>
<feMergeNode in="cardShadow"/>
<feMergeNode in="SourceGraphic"/>
</feMerge>
</filter>
<!-- Clean Glow Effect -->
<filter id="cleanGlow" x="-100%" y="-100%" width="300%" height="300%">
<feGaussianBlur in="SourceGraphic" stdDeviation="4" result="coloredBlur"/>
<feColorMatrix in="coloredBlur" type="matrix"
values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 0.6 0"/>
<feOffset in="coloredBlur" dx="0" dy="2" result="glowShadow"/>
<feMerge>
<feMergeNode in="glowShadow"/>
<feMergeNode in="coloredBlur"/>
<feMergeNode in="SourceGraphic"/>
</feMerge>
</filter>
<!-- Clean Subtle Enhancement -->
<filter id="subtleEnhancement" x="-20%" y="-20%" width="140%" height="140%">
<feGaussianBlur in="SourceGraphic" stdDeviation="0.8" result="subtleBlur"/>
<feColorMatrix in="subtleBlur" type="matrix"
values="1.01 0 0 0 0 0 1.01 0 0 0 0 0 1.02 0 0 0 0 0 0.92 0"/>
<feOffset in="subtleBlur" dx="0" dy="1" result="subtleOffset"/>
<feMerge>
<feMergeNode in="subtleOffset"/>
<feMergeNode in="SourceGraphic"/>
</feMerge>
</filter>
<!-- Clean Shimmer Effect -->
<filter id="shimmerEffect" x="-50%" y="-50%" width="200%" height="200%">
<feGaussianBlur in="SourceGraphic" stdDeviation="1" result="shimmerBlur"/>
<feColorMatrix in="shimmerBlur" type="matrix"
values="1.2 0 0 0 0 0 1.2 0 0 0 0 0 1.3 0 0 0 0 0 0.7 0"/>
<feOffset in="shimmerBlur" dx="0" dy="1" result="shimmerOffset"/>
<feMerge>
<feMergeNode in="shimmerOffset"/>
<feMergeNode in="SourceGraphic"/>
</feMerge>
</filter>
<!-- Clean Navbar Glass Effect -->
<filter id="navbarGlass" x="-20%" y="-20%" width="140%" height="140%">
<feGaussianBlur in="SourceGraphic" stdDeviation="1.5" result="navBlur"/>
<feColorMatrix in="navBlur" type="matrix"
values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 0.9 0"/>
<feOffset in="navBlur" dx="0" dy="2" result="navShadow"/>
<feMerge>
<feMergeNode in="navShadow"/>
<feMergeNode in="SourceGraphic"/>
</feMerge>
</filter>
<!-- Clean Profile Glass Effect -->
<filter id="profileGlass" x="-50%" y="-50%" width="200%" height="200%">
<feGaussianBlur in="SourceGraphic" stdDeviation="3" result="profileBlur"/>
<feColorMatrix in="profileBlur" type="matrix"
values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 0.7 0"/>
<feOffset in="profileBlur" dx="0" dy="8" result="profileShadow"/>
<feMerge>
<feMergeNode in="profileShadow"/>
<feMergeNode in="SourceGraphic"/>
</feMerge>
</filter>
<!-- Clean Avatar Glow Effect -->
<filter id="avatarGlow" x="-100%" y="-100%" width="300%" height="300%">
<feGaussianBlur in="SourceGraphic" stdDeviation="6" result="avatarBlur"/>
<feColorMatrix in="avatarBlur" type="matrix"
values="1.1 0 0 0 0 0 1.1 0 0 0 0 0 1.2 0 0 0 0 0 0.6 0"/>
<feMerge>
<feMergeNode in="avatarBlur"/>
<feMergeNode in="SourceGraphic"/>
</feMerge>
</filter>
<!-- Clean Comment Glass Effect -->
<filter id="commentGlass" x="-50%" y="-50%" width="200%" height="200%">
<feGaussianBlur in="SourceGraphic" stdDeviation="2.5" result="commentBlur"/>
<feColorMatrix in="commentBlur" type="matrix"
values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 0.8 0"/>
<feOffset in="commentBlur" dx="0" dy="6" result="commentShadow"/>
<feMerge>
<feMergeNode in="commentShadow"/>
<feMergeNode in="SourceGraphic"/>
</feMerge>
</filter>
</defs>
</svg>
`;
function h() {
if (typeof window < "u" && !document.querySelector("#glasnost-filters")) {
const o = document.createElement("div");
o.id = "glasnost-filters", o.innerHTML = G, document.body.appendChild(o);
}
}
const B = { class: "navbar-content" }, C = { class: "navbar-left" }, S = ["innerHTML"], N = { class: "navbar-center" }, w = ["innerHTML"], $ = { class: "navbar-right" }, k = ["innerHTML"], x = /* @__PURE__ */ m({
__name: "Navbar",
props: {
leftSlot: {},
centerLogo: {},
rightSlot: {},
className: { default: "" }
},
setup(o) {
return b(() => {
h();
}), (s, e) => (i(), r("nav", {
class: g(`glasnost-navbar ${s.className}`)
}, [
e[0] || (e[0] = t("div", { class: "navbar-glass-overlay" }, null, -1)),
e[1] || (e[1] = t("div", { class: "navbar-liquid-distortion" }, null, -1)),
t("div", B, [
t("div", C, [
f(s.$slots, "left", {}, () => [
s.leftSlot ? (i(), r("div", {
key: 0,
innerHTML: s.leftSlot
}, null, 8, S)) : c("", !0)
], !0)
]),
t("div", N, [
f(s.$slots, "center", {}, () => [
s.centerLogo ? (i(), r("div", {
key: 0,
innerHTML: s.centerLogo
}, null, 8, w)) : c("", !0)
], !0)
]),
t("div", $, [
f(s.$slots, "right", {}, () => [
s.rightSlot ? (i(), r("div", {
key: 0,
innerHTML: s.rightSlot
}, null, 8, k)) : c("", !0)
], !0)
])
])
], 2));
}
});
const v = (o, s) => {
const e = o.__vccOpts || o;
for (const [u, l] of s)
e[u] = l;
return e;
}, ie = /* @__PURE__ */ v(x, [["__scopeId", "data-v-8a986f1c"]]), O = { class: "profile-card-content" }, T = { class: "avatar-container" }, L = ["src", "alt"], D = { class: "profile-info" }, E = { class: "profile-name" }, q = {
key: 0,
class: "profile-title"
}, H = {
key: 0,
class: "profile-actions"
}, F = ["innerHTML"], z = /* @__PURE__ */ m({
__name: "ProfileCard",
props: {
avatar: {},
name: {},
title: { default: "" },
actions: {},
className: { default: "" }
},
setup(o) {
return b(() => {
h();
}), (s, e) => (i(), r("div", {
class: g(`glasnost-profile-card ${s.className}`)
}, [
e[2] || (e[2] = t("div", { class: "profile-glass-overlay" }, null, -1)),
e[3] || (e[3] = t("div", { class: "profile-liquid-distortion" }, null, -1)),
t("div", O, [
t("div", T, [
e[0] || (e[0] = t("div", { class: "avatar-glow-ring" }, null, -1)),
t("img", {
src: s.avatar,
alt: `${s.name} avatar`,
class: "profile-avatar"
}, null, 8, L),
e[1] || (e[1] = t("div", { class: "avatar-shimmer" }, null, -1))
]),
t("div", D, [
t("h3", E, p(s.name), 1),
s.title ? (i(), r("p", q, p(s.title), 1)) : c("", !0)
]),
s.actions || s.$slots.actions ? (i(), r("div", H, [
f(s.$slots, "actions", {}, () => [
s.actions ? (i(), r("div", {
key: 0,
innerHTML: s.actions
}, null, 8, F)) : c("", !0)
], !0)
])) : c("", !0)
]),
e[4] || (e[4] = t("div", { class: "card-shine" }, null, -1))
], 2));
}
});
const re = /* @__PURE__ */ v(z, [["__scopeId", "data-v-2670545b"]]), I = { class: "comment-card-header" }, j = { class: "comment-title" }, P = { class: "comment-count" }, V = { class: "comment-card-content" }, A = ["innerHTML"], J = {
key: 1,
class: "no-comments"
}, K = {
key: 0,
class: "comment-card-footer"
}, Q = { class: "more-button-text" }, R = /* @__PURE__ */ m({
__name: "CommentListCard",
props: {
comments: {},
title: { default: "Comments" },
className: { default: "" },
showMoreButton: { type: Boolean, default: !0 },
moreButtonText: { default: "More" }
},
emits: ["more"],
setup(o, { emit: s }) {
const e = s;
b(() => {
h();
});
const u = () => {
e("more");
};
return (l, a) => (i(), r("div", {
class: g(`glasnost-comment-card ${l.className}`)
}, [
a[2] || (a[2] = t("div", { class: "comment-glass-overlay" }, null, -1)),
a[3] || (a[3] = t("div", { class: "comment-liquid-distortion" }, null, -1)),
t("div", I, [
t("h3", j, p(l.title), 1),
t("div", P, [
f(l.$slots, "count", {}, void 0, !0)
])
]),
t("div", V, [
f(l.$slots, "comments", {}, () => [
l.comments ? (i(), r("div", {
key: 0,
innerHTML: l.comments
}, null, 8, A)) : (i(), r("div", J, a[0] || (a[0] = [
t("div", { class: "no-comments-icon" }, "💬", -1),
t("p", null, "No comments yet. Be the first to share your thoughts!", -1)
])))
], !0)
]),
l.showMoreButton ? (i(), r("div", K, [
t("button", {
class: "more-button",
onClick: u,
type: "button"
}, [
t("span", Q, p(l.moreButtonText), 1),
a[1] || (a[1] = t("div", { class: "more-button-shine" }, null, -1))
])
])) : c("", !0),
a[4] || (a[4] = t("div", { class: "floating-particle particle-1" }, null, -1)),
a[5] || (a[5] = t("div", { class: "floating-particle particle-2" }, null, -1)),
a[6] || (a[6] = t("div", { class: "floating-particle particle-3" }, null, -1)),
a[7] || (a[7] = t("div", { class: "comment-shine" }, null, -1))
], 2));
}
});
const oe = /* @__PURE__ */ v(R, [["__scopeId", "data-v-f1eb91f0"]]), U = ["disabled"], W = { class: "button-content" }, X = /* @__PURE__ */ m({
__name: "GlassButton",
props: {
variant: { default: "primary" },
size: { default: "medium" },
disabled: { type: Boolean, default: !1 },
className: { default: "" }
},
emits: ["click"],
setup(o, { emit: s }) {
const e = o, u = s, l = y(() => {
const n = "glasnost-glass-button", d = {
primary: "glass-button--primary",
secondary: "glass-button--secondary",
accent: "glass-button--accent"
}, M = {
small: "glass-button--small",
medium: "glass-button--medium",
large: "glass-button--large"
};
return [
n,
d[e.variant],
M[e.size],
e.disabled ? "glass-button--disabled" : "",
e.className
].filter(Boolean).join(" ");
});
b(() => {
h();
});
const a = () => {
e.disabled || u("click");
};
return (n, d) => (i(), r("button", {
class: g(l.value),
disabled: n.disabled,
onClick: a,
type: "button"
}, [
d[0] || (d[0] = t("div", { class: "button-glass-overlay" }, null, -1)),
d[1] || (d[1] = t("div", { class: "button-liquid-distortion" }, null, -1)),
t("span", W, [
f(n.$slots, "default", {}, void 0, !0)
]),
d[2] || (d[2] = t("div", { class: "button-shine" }, null, -1))
], 10, U));
}
});
const ne = /* @__PURE__ */ v(X, [["__scopeId", "data-v-138eabb2"]]), Y = ["aria-label", "aria-expanded"], Z = /* @__PURE__ */ m({
__name: "HamburgerMenu",
props: {
isOpen: { type: Boolean },
className: { default: "" }
},
emits: ["toggle"],
setup(o, { emit: s }) {
b(() => {
h();
});
const e = o, u = s, l = y(() => [
"glasnost-hamburger-menu",
e.isOpen ? "hamburger-menu--open" : "",
e.className
].filter(Boolean).join(" ")), a = () => {
u("toggle");
};
return (n, d) => (i(), r("button", {
class: g(l.value),
onClick: a,
type: "button",
"aria-label": n.isOpen ? "Close menu" : "Open menu",
"aria-expanded": n.isOpen
}, d[0] || (d[0] = [
_('<div class="hamburger-glass-overlay" data-v-bcf38f7c></div><div class="hamburger-liquid-distortion" data-v-bcf38f7c></div><div class="hamburger-icon" data-v-bcf38f7c><span class="hamburger-line hamburger-line--top" data-v-bcf38f7c></span><span class="hamburger-line hamburger-line--middle" data-v-bcf38f7c></span><span class="hamburger-line hamburger-line--bottom" data-v-bcf38f7c></span></div><div class="hamburger-shine" data-v-bcf38f7c></div>', 4)
]), 10, Y));
}
});
const de = /* @__PURE__ */ v(Z, [["__scopeId", "data-v-bcf38f7c"]]), ee = ["aria-disabled"], te = ["checked", "disabled", "aria-labelledby"], se = {
key: 0,
id: "toggle-label",
class: "toggle-label"
}, ae = /* @__PURE__ */ m({
__name: "GlassToggleButton",
props: {
checked: { type: Boolean },
label: { default: "" },
disabled: { type: Boolean, default: !1 },
className: { default: "" },
size: { default: "medium" },
variant: { default: "primary" }
},
emits: ["change"],
setup(o, { emit: s }) {
const e = o, u = s, l = y(() => [
"glasnost-toggle-button",
e.checked ? "toggle-button--checked" : "",
e.disabled ? "toggle-button--disabled" : "",
`toggle-button--${e.size}`,
`toggle-button--${e.variant}`,
e.className
].filter(Boolean).join(" ")), a = () => {
e.disabled || u("change", !e.checked);
};
return (n, d) => (i(), r("label", {
class: g(l.value),
"aria-disabled": n.disabled
}, [
t("input", {
type: "checkbox",
checked: n.checked,
disabled: n.disabled,
onChange: a,
class: "toggle-input",
"aria-labelledby": n.label ? "toggle-label" : void 0
}, null, 40, te),
d[0] || (d[0] = _('<div class="toggle-track" data-v-caa176fa><div class="toggle-track-overlay" data-v-caa176fa></div><div class="toggle-liquid-distortion" data-v-caa176fa></div><div class="toggle-knob" data-v-caa176fa><div class="knob-inner" data-v-caa176fa></div><div class="knob-shine" data-v-caa176fa></div></div><div class="toggle-shine" data-v-caa176fa></div></div>', 1)),
n.label ? (i(), r("span", se, p(n.label), 1)) : c("", !0)
], 10, ee));
}
});
const ue = /* @__PURE__ */ v(ae, [["__scopeId", "data-v-caa176fa"]]);
export {
oe as CommentListCard,
ne as GlassButton,
ue as GlassToggleButton,
de as HamburgerMenu,
ie as Navbar,
re as ProfileCard,
h as injectLiquidGlassFilters
};