@glasnost-ui/vue/dist/index.umd.js

Vue 3 components for Glasnost UI with liquid glass aesthetics

(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.GlasnostVue={},i.Vue))})(this,function(i,e){"use strict";const te="",m=`
<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 c(){if(typeof window<"u"&&!document.querySelector("#glasnost-filters")){const o=document.createElement("div");o.id="glasnost-filters",o.innerHTML=m,document.body.appendChild(o)}}const u={class:"navbar-content"},p={class:"navbar-left"},g=["innerHTML"],b={class:"navbar-center"},h=["innerHTML"],y={class:"navbar-right"},B=["innerHTML"],M=e.defineComponent({__name:"Navbar",props:{leftSlot:{},centerLogo:{},rightSlot:{},className:{default:""}},setup(o){return e.onMounted(()=>{c()}),(s,t)=>(e.openBlock(),e.createElementBlock("nav",{class:e.normalizeClass(`glasnost-navbar ${s.className}`)},[t[0]||(t[0]=e.createElementVNode("div",{class:"navbar-glass-overlay"},null,-1)),t[1]||(t[1]=e.createElementVNode("div",{class:"navbar-liquid-distortion"},null,-1)),e.createElementVNode("div",u,[e.createElementVNode("div",p,[e.renderSlot(s.$slots,"left",{},()=>[s.leftSlot?(e.openBlock(),e.createElementBlock("div",{key:0,innerHTML:s.leftSlot},null,8,g)):e.createCommentVNode("",!0)],!0)]),e.createElementVNode("div",b,[e.renderSlot(s.$slots,"center",{},()=>[s.centerLogo?(e.openBlock(),e.createElementBlock("div",{key:0,innerHTML:s.centerLogo},null,8,h)):e.createCommentVNode("",!0)],!0)]),e.createElementVNode("div",y,[e.renderSlot(s.$slots,"right",{},()=>[s.rightSlot?(e.openBlock(),e.createElementBlock("div",{key:0,innerHTML:s.rightSlot},null,8,B)):e.createCommentVNode("",!0)],!0)])])],2))}}),se="",f=(o,s)=>{const t=o.__vccOpts||o;for(const[d,l]of s)t[d]=l;return t},N=f(M,[["__scopeId","data-v-8a986f1c"]]),_={class:"profile-card-content"},C={class:"avatar-container"},v=["src","alt"],G={class:"profile-info"},E={class:"profile-name"},k={key:0,class:"profile-title"},S={key:0,class:"profile-actions"},V=["innerHTML"],w=e.defineComponent({__name:"ProfileCard",props:{avatar:{},name:{},title:{default:""},actions:{},className:{default:""}},setup(o){return e.onMounted(()=>{c()}),(s,t)=>(e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(`glasnost-profile-card ${s.className}`)},[t[2]||(t[2]=e.createElementVNode("div",{class:"profile-glass-overlay"},null,-1)),t[3]||(t[3]=e.createElementVNode("div",{class:"profile-liquid-distortion"},null,-1)),e.createElementVNode("div",_,[e.createElementVNode("div",C,[t[0]||(t[0]=e.createElementVNode("div",{class:"avatar-glow-ring"},null,-1)),e.createElementVNode("img",{src:s.avatar,alt:`${s.name} avatar`,class:"profile-avatar"},null,8,v),t[1]||(t[1]=e.createElementVNode("div",{class:"avatar-shimmer"},null,-1))]),e.createElementVNode("div",G,[e.createElementVNode("h3",E,e.toDisplayString(s.name),1),s.title?(e.openBlock(),e.createElementBlock("p",k,e.toDisplayString(s.title),1)):e.createCommentVNode("",!0)]),s.actions||s.$slots.actions?(e.openBlock(),e.createElementBlock("div",S,[e.renderSlot(s.$slots,"actions",{},()=>[s.actions?(e.openBlock(),e.createElementBlock("div",{key:0,innerHTML:s.actions},null,8,V)):e.createCommentVNode("",!0)],!0)])):e.createCommentVNode("",!0)]),t[4]||(t[4]=e.createElementVNode("div",{class:"card-shine"},null,-1))],2))}}),ae="",$=f(w,[["__scopeId","data-v-2670545b"]]),T={class:"comment-card-header"},x={class:"comment-title"},O={class:"comment-count"},D={class:"comment-card-content"},L=["innerHTML"],q={key:1,class:"no-comments"},H={key:0,class:"comment-card-footer"},z={class:"more-button-text"},F=e.defineComponent({__name:"CommentListCard",props:{comments:{},title:{default:"Comments"},className:{default:""},showMoreButton:{type:Boolean,default:!0},moreButtonText:{default:"More"}},emits:["more"],setup(o,{emit:s}){const t=s;e.onMounted(()=>{c()});const d=()=>{t("more")};return(l,a)=>(e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(`glasnost-comment-card ${l.className}`)},[a[2]||(a[2]=e.createElementVNode("div",{class:"comment-glass-overlay"},null,-1)),a[3]||(a[3]=e.createElementVNode("div",{class:"comment-liquid-distortion"},null,-1)),e.createElementVNode("div",T,[e.createElementVNode("h3",x,e.toDisplayString(l.title),1),e.createElementVNode("div",O,[e.renderSlot(l.$slots,"count",{},void 0,!0)])]),e.createElementVNode("div",D,[e.renderSlot(l.$slots,"comments",{},()=>[l.comments?(e.openBlock(),e.createElementBlock("div",{key:0,innerHTML:l.comments},null,8,L)):(e.openBlock(),e.createElementBlock("div",q,a[0]||(a[0]=[e.createElementVNode("div",{class:"no-comments-icon"},"💬",-1),e.createElementVNode("p",null,"No comments yet. Be the first to share your thoughts!",-1)])))],!0)]),l.showMoreButton?(e.openBlock(),e.createElementBlock("div",H,[e.createElementVNode("button",{class:"more-button",onClick:d,type:"button"},[e.createElementVNode("span",z,e.toDisplayString(l.moreButtonText),1),a[1]||(a[1]=e.createElementVNode("div",{class:"more-button-shine"},null,-1))])])):e.createCommentVNode("",!0),a[4]||(a[4]=e.createElementVNode("div",{class:"floating-particle particle-1"},null,-1)),a[5]||(a[5]=e.createElementVNode("div",{class:"floating-particle particle-2"},null,-1)),a[6]||(a[6]=e.createElementVNode("div",{class:"floating-particle particle-3"},null,-1)),a[7]||(a[7]=e.createElementVNode("div",{class:"comment-shine"},null,-1))],2))}}),le="",j=f(F,[["__scopeId","data-v-f1eb91f0"]]),I=["disabled"],P={class:"button-content"},A=e.defineComponent({__name:"GlassButton",props:{variant:{default:"primary"},size:{default:"medium"},disabled:{type:Boolean,default:!1},className:{default:""}},emits:["click"],setup(o,{emit:s}){const t=o,d=s,l=e.computed(()=>{const n="glasnost-glass-button",r={primary:"glass-button--primary",secondary:"glass-button--secondary",accent:"glass-button--accent"},ee={small:"glass-button--small",medium:"glass-button--medium",large:"glass-button--large"};return[n,r[t.variant],ee[t.size],t.disabled?"glass-button--disabled":"",t.className].filter(Boolean).join(" ")});e.onMounted(()=>{c()});const a=()=>{t.disabled||d("click")};return(n,r)=>(e.openBlock(),e.createElementBlock("button",{class:e.normalizeClass(l.value),disabled:n.disabled,onClick:a,type:"button"},[r[0]||(r[0]=e.createElementVNode("div",{class:"button-glass-overlay"},null,-1)),r[1]||(r[1]=e.createElementVNode("div",{class:"button-liquid-distortion"},null,-1)),e.createElementVNode("span",P,[e.renderSlot(n.$slots,"default",{},void 0,!0)]),r[2]||(r[2]=e.createElementVNode("div",{class:"button-shine"},null,-1))],10,I))}}),oe="",J=f(A,[["__scopeId","data-v-138eabb2"]]),K=["aria-label","aria-expanded"],Q=e.defineComponent({__name:"HamburgerMenu",props:{isOpen:{type:Boolean},className:{default:""}},emits:["toggle"],setup(o,{emit:s}){e.onMounted(()=>{c()});const t=o,d=s,l=e.computed(()=>["glasnost-hamburger-menu",t.isOpen?"hamburger-menu--open":"",t.className].filter(Boolean).join(" ")),a=()=>{d("toggle")};return(n,r)=>(e.openBlock(),e.createElementBlock("button",{class:e.normalizeClass(l.value),onClick:a,type:"button","aria-label":n.isOpen?"Close menu":"Open menu","aria-expanded":n.isOpen},r[0]||(r[0]=[e.createStaticVNode('<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,K))}}),ne="",R=f(Q,[["__scopeId","data-v-bcf38f7c"]]),U=["aria-disabled"],W=["checked","disabled","aria-labelledby"],X={key:0,id:"toggle-label",class:"toggle-label"},Y=e.defineComponent({__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 t=o,d=s,l=e.computed(()=>["glasnost-toggle-button",t.checked?"toggle-button--checked":"",t.disabled?"toggle-button--disabled":"",`toggle-button--${t.size}`,`toggle-button--${t.variant}`,t.className].filter(Boolean).join(" ")),a=()=>{t.disabled||d("change",!t.checked)};return(n,r)=>(e.openBlock(),e.createElementBlock("label",{class:e.normalizeClass(l.value),"aria-disabled":n.disabled},[e.createElementVNode("input",{type:"checkbox",checked:n.checked,disabled:n.disabled,onChange:a,class:"toggle-input","aria-labelledby":n.label?"toggle-label":void 0},null,40,W),r[0]||(r[0]=e.createStaticVNode('<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?(e.openBlock(),e.createElementBlock("span",X,e.toDisplayString(n.label),1)):e.createCommentVNode("",!0)],10,U))}}),re="",Z=f(Y,[["__scopeId","data-v-caa176fa"]]);i.CommentListCard=j,i.GlassButton=J,i.GlassToggleButton=Z,i.HamburgerMenu=R,i.Navbar=N,i.ProfileCard=$,i.injectLiquidGlassFilters=c,Object.defineProperty(i,Symbol.toStringTag,{value:"Module"})});