glass-ui-vue/dist/glass-ui.umd.js

A Vue 3 component library that implements glassmorphism design principles, providing a modern and visually appealing UI toolkit. It includes a variety of reusable components styled with glassmorphism effects, making it easy to create elegant and interacti

(function(s,t){typeof exports=="object"&&typeof module<"u"?t(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],t):(s=typeof globalThis<"u"?globalThis:s||self,t(s.GlassUI={},s.Vue))})(this,function(s,t){"use strict";const r=(e,a)=>{const n=e.__vccOpts||e;for(const[l,i]of a)n[l]=i;return n},j=["aria-disabled","tabindex"],g=r({__name:"Panel",props:{variant:{type:String,default:"default",validator:e=>["default","primary","secondary","success","danger","warning","info","light","dark"].includes(e)},padding:{type:String,default:"md",validator:e=>["xxs","xs","sm","md","lg","xl","2x","3x",""].includes(e)},disabled:{type:Boolean,default:!1}},setup(e){const a=e,n=t.computed(()=>`bg--${a.variant}`),l=t.computed(()=>a.padding?`p--${a.padding}`:"");return(i,d)=>(t.openBlock(),t.createElementBlock("div",{class:t.normalizeClass(["panel",[n.value,l.value,{"is-disabled":e.disabled}]]),"aria-disabled":e.disabled?"true":void 0,tabindex:e.disabled?-1:void 0},[t.renderSlot(i.$slots,"default",{},void 0,!0)],10,j))}},[["__scopeId","data-v-59d4fb3d"]]),y=r({__name:"Stack",props:{align:{type:String,default:"",validator:e=>["start","center","end","stretch","baseline",""].includes(e)},justify:{type:String,default:"",validator:e=>["start","center","end","between","around","evenly",""].includes(e)},direction:{type:String,default:"column",validator:e=>["column","row"].includes(e)},gap:{type:[String,Number],default:""},padding:{type:String,default:""}},setup(e){const a=e,n=t.computed(()=>`direction--${a.direction}`),l=t.computed(()=>a.gap?{gap:typeof a.gap=="number"?`${a.gap}px`:a.gap}:{});return(i,d)=>(t.openBlock(),t.createElementBlock("div",{class:t.normalizeClass(["stack",[n.value,e.align?`align-${e.align}`:"",e.justify?`justify--${e.justify}`:"",e.padding?`p--${e.padding}`:""]]),style:t.normalizeStyle(l.value)},[t.renderSlot(i.$slots,"default",{},void 0,!0)],6))}},[["__scopeId","data-v-f02c0da9"]]),T=["disabled","type","aria-disabled"],b=r({__name:"Button",props:{variant:{type:String,default:"primary",validator:e=>["primary","secondary","success","danger","warning","info","light","dark"].includes(e)},disabled:{type:Boolean,default:!1},type:{type:String,default:"button",validator:e=>["button","submit","reset"].includes(e)}},emits:["click"],setup(e,{emit:a}){const n=e,l=a;function i(d){n.disabled||l("click",d)}return(d,m)=>(t.openBlock(),t.createElementBlock("button",{class:t.normalizeClass(["glass-btn",`glass-btn--${e.variant}`,{"is-disabled":e.disabled}]),disabled:e.disabled,type:e.type,"aria-disabled":e.disabled?"true":void 0,onClick:i},[t.renderSlot(d.$slots,"default",{},void 0,!0)],10,T))}},[["__scopeId","data-v-c480d73d"]]),x={key:0,class:"glass-alert__icon"},N={class:"glass-alert__content"},E={key:0,class:"glass-alert__title"},I={key:1,class:"glass-alert__description"},p=r({__name:"Alert",props:{variant:{type:String,default:"info",validator:e=>["primary","secondary","success","danger","warning","info","light","dark"].includes(e)},dismissible:{type:Boolean,default:!1},timeout:{type:[Number,String],default:null},icon:{type:[String,Object,Function],default:null},title:{type:String,default:""},description:{type:String,default:""}},setup(e){const a=e,n=t.ref(!0);let l=null;function i(){n.value=!1}return t.watch(()=>a.timeout,d=>{l&&clearTimeout(l),d&&Number(d)>0&&(l=setTimeout(()=>{n.value=!1},Number(d)))},{immediate:!0}),t.onBeforeUnmount(()=>{l&&clearTimeout(l)}),(d,m)=>n.value?(t.openBlock(),t.createElementBlock("div",{key:0,class:t.normalizeClass(["glass-alert",[`glass-alert--${e.variant}`,e.dismissible?"glass-alert--dismissible":""]]),role:"alert"},[e.icon||d.$slots.icon?(t.openBlock(),t.createElementBlock("span",x,[t.renderSlot(d.$slots,"icon",{},()=>[typeof e.icon=="string"?(t.openBlock(),t.createElementBlock(t.Fragment,{key:0},[t.createTextVNode(t.toDisplayString(e.icon),1)],64)):e.icon?(t.openBlock(),t.createBlock(t.resolveDynamicComponent(e.icon),{key:1})):t.createCommentVNode("",!0)],!0)])):t.createCommentVNode("",!0),t.createElementVNode("div",N,[e.title?(t.openBlock(),t.createElementBlock("div",E,t.toDisplayString(e.title),1)):t.createCommentVNode("",!0),e.description?(t.openBlock(),t.createElementBlock("div",I,t.toDisplayString(e.description),1)):t.createCommentVNode("",!0),!e.title&&!e.description?t.renderSlot(d.$slots,"default",{key:2},void 0,!0):t.createCommentVNode("",!0)]),e.dismissible?(t.openBlock(),t.createElementBlock("button",{key:1,class:"glass-alert__close",onClick:i,"aria-label":"Dismiss",type:"button"},"×")):t.createCommentVNode("",!0)],2)):t.createCommentVNode("",!0)}},[["__scopeId","data-v-7512bc71"]]),V=["src","alt","width","height"],k=r({__name:"Avatar",props:{src:{type:String,required:!0},alt:{type:String,default:"Avatar"},size:{type:[String,Number],default:48},shape:{type:String,default:"circle",validator:e=>["circle","rounded"].includes(e)}},setup(e){return(a,n)=>(t.openBlock(),t.createElementBlock("img",{class:"glass-avatar",src:e.src,alt:e.alt,width:e.size,height:e.size,style:t.normalizeStyle({borderRadius:e.shape==="circle"?"50%":"8px",width:e.size+"px",height:e.size+"px"})},null,12,V))}},[["__scopeId","data-v-0c6def60"]]),h=r({__name:"Badge",props:{variant:{type:String,default:"primary",validator:e=>["primary","secondary","success","danger","warning","info","light","dark"].includes(e)}},setup(e){return(a,n)=>(t.openBlock(),t.createElementBlock("span",{class:t.normalizeClass(["glass-badge",`glass-badge--${e.variant}`])},[t.renderSlot(a.$slots,"default",{},void 0,!0)],2))}},[["__scopeId","data-v-03886f9a"]]),z=["type","placeholder","disabled","value"],S=r({__name:"Input",props:{modelValue:String,type:{type:String,default:"text",validator:e=>["text","password","email","number"].includes(e)},placeholder:{type:String,default:""},disabled:{type:Boolean,default:!1},borderColor:{type:String,default:"blue"},borderWidth:{type:String,default:"1px"},borderType:{type:String,default:"solid",validator:e=>["solid","dotted","dashed","double","groove","ridge","inset","outset","none","hidden"].includes(e)},borderRadius:{type:String,default:""}},setup(e){const a=e,n=t.computed(()=>({border:a.borderColor?`${a.borderWidth} ${a.borderType} ${a.borderColor}`:void 0,borderRadius:a.borderRadius||void 0}));return(l,i)=>(t.openBlock(),t.createElementBlock("input",{class:"glass-input",type:e.type,placeholder:e.placeholder,disabled:e.disabled,value:e.modelValue,onInput:i[0]||(i[0]=d=>l.$emit("update:modelValue",d.target.value)),style:t.normalizeStyle(n.value)},null,44,z))}},[["__scopeId","data-v-a700eda9"]]),_=["placeholder","disabled","rows","value"],$=r({__name:"Textarea",props:{modelValue:String,placeholder:{type:String,default:""},disabled:{type:Boolean,default:!1},rows:{type:[String,Number],default:3},borderColor:{type:String,default:"grey"},borderWidth:{type:String,default:"1px"},borderType:{type:String,default:"solid",validator:e=>["solid","dotted","dashed","double","groove","ridge","inset","outset","none","hidden"].includes(e)},borderRadius:{type:String,default:""}},setup(e){const a=e,n=t.computed(()=>({border:`${a.borderWidth} ${a.borderType} ${a.borderColor}`,borderRadius:a.borderRadius||void 0}));return(l,i)=>(t.openBlock(),t.createElementBlock("textarea",{class:"glass-textarea",placeholder:e.placeholder,disabled:e.disabled,rows:e.rows,value:e.modelValue,onInput:i[0]||(i[0]=d=>l.$emit("update:modelValue",d.target.value)),style:t.normalizeStyle(n.value)},null,44,_))}},[["__scopeId","data-v-7f493733"]]),B=r({__name:"Grid",props:{cols:{type:[Number,String],default:2,validator:e=>Number(e)>=1&&Number(e)<=12},gap:{type:[String,Number],default:"md"},align:{type:String,default:"",validator:e=>["","start","center","end","stretch"].includes(e)},justify:{type:String,default:"",validator:e=>["","start","center","end","between","around","evenly"].includes(e)},wrap:{type:Boolean,default:!1}},setup(e){return(a,n)=>(t.openBlock(),t.createElementBlock("div",{class:t.normalizeClass(["glass-grid",`grid-cols-${e.cols}`,e.gap?`grid-gap-${e.gap}`:"",e.wrap?"grid-wrap":""]),style:t.normalizeStyle({alignItems:e.align||void 0,justifyItems:e.justify&&["start","center","end","stretch"].includes(e.justify)?e.justify:void 0,justifyContent:e.justify&&["between","around","evenly"].includes(e.justify)?e.justify==="between"?"space-between":e.justify==="around"?"space-around":e.justify==="evenly"?"space-evenly":void 0:void 0,maxWidth:e.justify&&["between","around","evenly"].includes(e.justify)?"600px":void 0,margin:e.justify&&["between","around","evenly"].includes(e.justify)?"2em auto":void 0})},[t.renderSlot(a.$slots,"default",{},void 0,!0)],6))}},[["__scopeId","data-v-738438a8"]]);function v(e){return{all:e=e||new Map,on:function(a,n){var l=e.get(a);l?l.push(n):e.set(a,[n])},off:function(a,n){var l=e.get(a);l&&(n?l.splice(l.indexOf(n)>>>0,1):e.set(a,[]))},emit:function(a,n){var l=e.get(a);l&&l.slice().map(function(i){i(n)}),(l=e.get("*"))&&l.slice().map(function(i){i(a,n)})}}}const C=v(),A=["onMouseenter","onMouseleave"],M=["onClick"],w=r({__name:"Toaster",setup(e,{expose:a}){const n=t.ref([]);let l=0;const i={};function d(o,{variant:f="info",duration:c=3e3}={}){const u=++l;n.value.push({id:u,message:o,variant:f}),i[u]=setTimeout(()=>m(u),c)}function m(o){n.value=n.value.filter(f=>f.id!==o),clearTimeout(i[o]),delete i[o]}function D(o){clearTimeout(i[o])}function G(o){n.value.find(c=>c.id===o)&&(i[o]=setTimeout(()=>m(o),2e3))}return C.on("show",(o={})=>{d(o.message,o)}),a({show:d}),(o,f)=>(t.openBlock(),t.createBlock(t.TransitionGroup,{name:"toaster-fade",tag:"div",class:"glass-toaster"},{default:t.withCtx(()=>[(t.openBlock(!0),t.createElementBlock(t.Fragment,null,t.renderList(n.value,c=>(t.openBlock(),t.createElementBlock("div",{key:c.id,class:t.normalizeClass(["glass-toast",`glass-toast--${c.variant}`]),onMouseenter:u=>D(c.id),onMouseleave:u=>G(c.id)},[t.createElementVNode("span",null,t.toDisplayString(c.message),1),t.createElementVNode("button",{class:"glass-toast__close",onClick:u=>m(c.id)},"×",8,M)],42,A))),128))]),_:1}))}},[["__scopeId","data-v-9398eac4"]]),R={install(e){e.component("g-panel",g),e.component("g-stack",y),e.component("g-button",b),e.component("g-alert",p),e.component("g-avatar",k),e.component("g-badge",h),e.component("g-input",S),e.component("g-textarea",$),e.component("g-grid",B),e.component("g-toaster",w)}};s.Alert=p,s.Avatar=k,s.Badge=h,s.Button=b,s.Grid=B,s.Input=S,s.Panel=g,s.Stack=y,s.Textarea=$,s.Toaster=w,s.default=R,s.toast=C,Object.defineProperties(s,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});