@gradient-ui/core 0.2.0

package/dist/useSnackbar-CFrWSpt4.cjs

@@ -0,0 +1 @@
+"use strict";const e=require("vue"),s=require("./GLoading.vue_vue_type_style_index_0_lang-CqbeZChH.cjs");require("@mdi/js");const z=require("./icon-0-mbYGMr.cjs"),j=()=>({icon:{type:String,required:!0},size:{type:[Number,String],default:void 0},tag:{type:String,default:"span"}}),M=e.defineComponent({__name:"GIcon",props:j(),setup(t){const n=t,r=z.useIcon(()=>n.icon),o=e.computed(()=>n.size==null?"var(--g-token-icon-size-m)":Number.isFinite(Number(n.size))?`${n.size}px`:String(n.size));return(u,l)=>e.unref(r).icon?(e.openBlock(),e.createBlock(e.resolveDynamicComponent(e.unref(r).component),e.mergeProps({key:0,icon:e.unref(r).icon,tag:n.tag,class:"g-icon",style:{fontSize:o.value}},u.$attrs),null,16,["icon","tag","style"])):e.createCommentVNode("",!0)}}),N=s._export_sfc(M,[["__scopeId","data-v-f1c09700"]]),J=s.propsFactory({placement:{type:String,default:"bottom"}});function K(t,n){return e.computed(()=>`${n}_${t.placement}`)}const Q=s.propsFactory({active:Boolean,...s.makeDisabledProps(),glow:[Boolean,Number,String],animateGlow:Boolean,shadow:Boolean,...s.makeStateProps()});function X(t,n="g-gradient"){const r=s.useDisabled(t,n),o=s.useState(t,n);return{glowClasses:e.computed(()=>({[r.value]:!0,[o.value]:!0,[`${n}_active`]:t.active,[`${n}_glow`]:t.glow,[`${n}_animate-glow`]:t.animateGlow,[`${n}_shadow`]:t.shadow}))}}const Y=s.propsFactory({borderRadius:{type:[Number,String],default:4},inheritWidth:Boolean});function Z(t){return{surfaceBorderRadius:s.usePx(e.toRef(t,"borderRadius"))}}const ee=s.propsFactory({...s.makeDisabledProps(),...s.makeVariantProps(),...s.makeRoundedProps(),...J({placement:"center"}),borderRadius:{type:[Number,String],default:4},borderWidth:{type:[Number,String],default:1},color:String,state:String}),$=s.propsFactory({...ee(),...Q(),...Y()});function te(t){const n=s.usePx(e.toRef(t,"borderWidth")),r=s.usePx(e.toRef(t,"borderRadius")),o=e.computed(()=>n.value?`calc(${r.value} + ${n.value})`:r.value),u=s.useDisabled(t,"g-gradient"),l=K(t,"g-gradient"),i=s.useRounded(t,"g-gradient"),a=s.useResolveGradientValue(()=>t.color??t.state),c=e.computed(()=>({[u.value]:!0,[l.value]:!0,[i.value]:!0,"g-gradient_inherit-width":t.inheritWidth,[`g-gradient_${t.placement}`]:t.placement,[`g-gradient_${t.state}`]:t.state,[`g-gradient_border_${t.borderWidth}`]:!0})),m=e.computed(()=>({"--g-border-radius":r.value,"--g-border-width":n.value,"--g-gradient-current":a.value}));return{borderWidthPx:n,borderRadiusPx:r,containerBorderRadius:o,resolvedGradient:a,gradientClasses:c,gradientStyles:m}}const ne={class:"g-gradient__slot"},oe=e.defineComponent({__name:"GGradient",props:$(),setup(t){e.useCssVars(m=>({v3beb5b00:e.unref(u),ea600628:e.unref(c),v61d97152:e.unref(o)}));const n=t,{borderWidth:r}=e.toRefs(n),o=s.usePx(r),{containerBorderRadius:u,gradientClasses:l,gradientStyles:i}=te(n),{glowClasses:a}=X(n),{surfaceBorderRadius:c}=Z(n);return(m,p)=>(e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(["g-gradient",[e.unref(l),e.unref(a)]]),style:e.normalizeStyle(e.unref(i))},[e.createElementVNode("div",ne,[e.renderSlot(m.$slots,"default",{},void 0,!0)])],6))}}),x=s._export_sfc(oe,[["__scopeId","data-v-f23c788d"]]),ae=e.defineComponent({__name:"GIcon",props:{icon:{},size:{default:20},tag:{default:"span"}},setup(t){const n=t,r=s.usePx(e.toRef(n,"size")),o=z.useIcon(()=>n.icon);return(u,l)=>(e.openBlock(),e.createBlock(e.resolveDynamicComponent(e.unref(o).component),e.mergeProps({icon:e.unref(o).icon,tag:n.tag,class:"g-icon",style:{fontSize:e.unref(r)}},u.$attrs),null,16,["icon","tag","style"]))}}),h=s._export_sfc(ae,[["__scopeId","data-v-1e1fd36a"]]),G=s.propsFactory({...s.makeSurfaceProps(),...s.makeSizeProps(),active:Boolean,activeColor:String,activeState:String,activeVariant:String});function I(t,n,r={}){const{disabledClass:o,roundedClass:u,stateClass:l}=s.useSurface(t,n),{surfaceOverlayClasses:i,surfaceUnderlayClasses:a,surfaceContentClasses:c}=s.useSurfaceLayers(n),m=s.useSize(t,n),p=e.computed(()=>!!(e.toValue(r.active)??t.active)),v=e.computed(()=>!!e.toValue(r.selected)),{resolvedColor:d,resolvedState:g,colorStyles:k}=s.useSurfaceColor({color:()=>e.toValue(t.color),state:()=>t.state,active:()=>p.value||v.value,activeColor:()=>e.toValue(t.activeColor),activeState:()=>t.activeState}),y=e.computed(()=>(v.value||p.value)&&t.activeVariant?t.activeVariant:t.variant);return{actionSurfaceClasses:e.computed(()=>{const S=!!e.toValue(r.focused);return[`${n}_${y.value}`,o.value,u.value,l.value,m.value,S?`${n}_focused`:"",v.value?`${n}_selected`:"",p.value?`${n}_active`:""].filter(Boolean)}),resolvedColor:d,resolvedState:g,resolvedVariant:y,surfaceStyles:k,surfaceOverlayClasses:i,surfaceUnderlayClasses:a,surfaceContentClasses:c}}const E=s.propsFactory({prepend:String,append:String,label:String}),re=s.propsFactory({...G(),...E(),...$(),isIconButton:Boolean,iconButton:String,ripple:{type:[Boolean,String,Object],default:!0}}),se={key:0,class:"g-button__prepend"},ce={class:"g-button__label"},le={key:1,class:"g-button__append"},R=e.defineComponent({__name:"GButton",props:re({borderWidth:0,borderRadius:4,placement:"center"}),setup(t){e.useCssVars(d=>({ff755c22:e.unref(o)}));const n=e.useSlots(),r=t,o=s.usePx(r.borderRadius),u=e.computed(()=>r.disabled||r.ripple===!1?!1:typeof r.ripple=="object"?{...r.ripple,disabled:r.ripple.disabled||r.disabled}:r.ripple),{actionSurfaceClasses:l,resolvedColor:i,resolvedState:a,surfaceStyles:c,surfaceOverlayClasses:m,surfaceUnderlayClasses:p,surfaceContentClasses:v}=I(r,"g-button");return(d,g)=>{const k=e.resolveDirective("ripple"),y=e.resolveDirective("gradient-icon");return e.withDirectives((e.openBlock(),e.createBlock(x,e.mergeProps({class:"g-gradient"},{...r,color:e.unref(i),state:e.unref(a)}),{default:e.withCtx(()=>[e.withDirectives((e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(["g-button",[e.unref(l),{"g-button_icon":d.iconButton||d.isIconButton}]]),style:e.normalizeStyle(e.unref(c))},[e.createElementVNode("span",{class:e.normalizeClass(e.unref(p))},null,2),e.createElementVNode("span",{class:e.normalizeClass(e.unref(m))},null,2),e.createElementVNode("span",{class:e.normalizeClass(["g-button__content",e.unref(v)])},[(n.prepend||d.prepend)&&!d.iconButton?(e.openBlock(),e.createElementBlock("span",se,[e.renderSlot(d.$slots,"prepend",{},()=>[e.createVNode(h,{icon:d.prepend},null,8,["icon"])])])):e.createCommentVNode("",!0),e.createElementVNode("span",ce,[e.renderSlot(d.$slots,"default",{},()=>[d.iconButton?d.iconButton?(e.openBlock(),e.createBlock(h,{key:1,icon:d.iconButton},null,8,["icon"])):e.createCommentVNode("",!0):(e.openBlock(),e.createElementBlock(e.Fragment,{key:0},[e.createTextVNode(e.toDisplayString(d.label),1)],64))])]),(n.append||d.append)&&!d.iconButton?(e.openBlock(),e.createElementBlock("span",le,[e.renderSlot(d.$slots,"append",{},()=>[e.createVNode(h,{icon:d.append},null,8,["icon"])])])):e.createCommentVNode("",!0)],2)],6)),[[k,u.value]])]),_:3},16)),[[y]])}}});function ie(){const t=e.shallowRef(null),n=e.ref(!1),r=a=>{u();const c=o(a.target),m=c.style.position;l(c)||(c.style.position="relative");const p=document.createElement("div");p.className="g-loading__container",c.appendChild(p);const v={},d=e.createApp(s._sfc_main,{text:a.text,noText:a.noText,color:a.color,dark:a.dark,opacity:a.opacity,blur:a.blur,progressView:a.progressView,onClose:()=>{i(v)}}),g=d.mount(p);Object.assign(v,{app:d,container:p,target:c,originalPosition:m,componentInstance:g}),t.value=v,g.show(),n.value=!0},o=a=>{if(!a)return document.body;if(typeof a=="string"){const c=document.querySelector(a);if(!c)throw new Error(`Target element ${a} not found`);return c}return a},u=async()=>{if(!t.value)return;const{componentInstance:a}=t.value;a&&a.hide()},l=a=>{const c=window.getComputedStyle(a).position;return["relative","absolute","fixed","sticky"].includes(c)},i=(a=t.value)=>{if(!a)return;const c=t.value===a,{app:m,container:p,target:v,originalPosition:d}=a;m.unmount(),p.parentElement===v&&v.removeChild(p),c&&(v.style.position=d,t.value=null,n.value=!1)};return e.onUnmounted(()=>{u()}),{show:r,hide:u,visible:n}}const ue=s.propsFactory({modelValue:{type:Boolean,default:void 0},defaultOpen:{type:Boolean,default:!1},title:String,text:String,icon:String,color:{type:String,default:"primary"},state:String,variant:{type:String,default:"tonal"},location:{type:String,default:"bottom-center"},position:{type:String,default:"fixed"},transition:{type:[Boolean,String,Object],default:void 0},timeout:{type:Number,default:5e3},persistent:{type:Boolean,default:!1},closeable:{type:Boolean,default:!0},action:Object,actionText:String,closeOnAction:{type:Boolean,default:!0},multiline:{type:Boolean,default:!1},offset:{type:[Number,String],default:24},maxWidth:{type:[Number,String],default:520},pauseOnHover:{type:Boolean,default:!0}}),de={key:0,class:"g-snackbar__prepend"},me={class:"g-snackbar__main"},pe={key:0,class:"g-snackbar__title"},fe={key:1,class:"g-snackbar__text"},ve={key:1,class:"g-snackbar__actions"},ge=e.defineComponent({__name:"GSnackbar",props:ue(),emits:["update:modelValue","action","close","after-close"],setup(t,{expose:n,emit:r}){const o=t,u=r,l=e.useSlots(),i=e.ref(),a=e.ref(o.defaultOpen),c=e.ref("manual"),m=e.computed(()=>o.modelValue!==void 0),p=e.computed(()=>m.value?o.modelValue===!0:a.value),v=s.usePx(o.offset),d=s.usePx(o.maxWidth),{colorStyles:g}=s.useSurfaceColor(o),{surfaceOverlayClasses:k,surfaceUnderlayClasses:y,surfaceContentClasses:w}=s.useSurfaceLayers("g-snackbar"),S=e.computed(()=>{var f;return((f=o.action)==null?void 0:f.label)??o.actionText}),O=e.computed(()=>({...g.value,"--g-snackbar-max-width":d.value})),T=e.computed(()=>({"--g-snackbar-offset":v.value})),D=e.computed(()=>[`g-snackbar_${o.variant}`,{"g-snackbar_multiline":o.multiline}]),F=e.computed(()=>[`g-snackbar-layer_position-${o.position}`,`g-snackbar-layer_location-${o.location}`]),W=e.computed(()=>o.transition??{name:o.location.startsWith("top")?"slide-y":"slide-y-reverse",appear:!0,duration:240,leaveDuration:180,distance:"16px"});function P(f){m.value||(a.value=f),u("update:modelValue",f)}function b(){i.value!==void 0&&(window.clearTimeout(i.value),i.value=void 0)}function V(){b(),!(!p.value||o.persistent||o.timeout<=0)&&(i.value=window.setTimeout(()=>{C("timeout")},o.timeout))}function C(f="manual"){c.value=f,b(),P(!1),u("close",f)}function L(){var f,B;u("action",(f=o.action)==null?void 0:f.value),(((B=o.action)==null?void 0:B.closeOnClick)??o.closeOnAction)&&C("action")}function q(){o.pauseOnHover&&b()}function U(){o.pauseOnHover&&V()}e.watch(p,f=>{if(!f){b();return}V()}),V(),e.onBeforeUnmount(()=>{b()});function H(){u("after-close",c.value)}return n({open:()=>P(!0),close:C}),(f,B)=>(e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(["g-snackbar-layer",F.value]),style:e.normalizeStyle(T.value)},[e.createVNode(e.unref(s._sfc_main$1),{transition:W.value,onAfterLeave:H},{default:e.withCtx(()=>[p.value?(e.openBlock(),e.createElementBlock("section",{key:0,class:e.normalizeClass(["g-snackbar",D.value]),style:e.normalizeStyle(O.value),role:"status","aria-live":"polite",onMouseenter:q,onMouseleave:U},[e.createElementVNode("span",{class:e.normalizeClass(e.unref(y))},null,2),e.createElementVNode("span",{class:e.normalizeClass(e.unref(k))},null,2),e.createElementVNode("div",{class:e.normalizeClass(["g-snackbar__content",e.unref(w)])},[l.prepend||o.icon?(e.openBlock(),e.createElementBlock("div",de,[e.renderSlot(f.$slots,"prepend",{},()=>[o.icon?(e.openBlock(),e.createBlock(N,{key:0,icon:o.icon,size:"22"},null,8,["icon"])):e.createCommentVNode("",!0)],!0)])):e.createCommentVNode("",!0),e.createElementVNode("div",me,[l.title||o.title?(e.openBlock(),e.createElementBlock("div",pe,[e.renderSlot(f.$slots,"title",{},()=>[e.createTextVNode(e.toDisplayString(o.title),1)],!0)])):e.createCommentVNode("",!0),l.default||o.text?(e.openBlock(),e.createElementBlock("div",fe,[e.renderSlot(f.$slots,"default",{},()=>[e.createTextVNode(e.toDisplayString(o.text),1)],!0)])):e.createCommentVNode("",!0)]),l.action||S.value||o.closeable?(e.openBlock(),e.createElementBlock("div",ve,[e.renderSlot(f.$slots,"action",{close:()=>C("action")},()=>[S.value?(e.openBlock(),e.createBlock(R,{key:0,variant:"text",size:"s",label:S.value,onClick:L},null,8,["label"])):e.createCommentVNode("",!0)],!0),o.closeable?(e.openBlock(),e.createElementBlock("button",{key:0,type:"button",class:"g-snackbar__close","aria-label":"Close snackbar",onClick:B[0]||(B[0]=Ve=>C("dismiss"))},[e.createVNode(N,{icon:"close",size:"18"})])):e.createCommentVNode("",!0)])):e.createCommentVNode("",!0)],2)],38)):e.createCommentVNode("",!0)]),_:3},8,["transition"])],6))}}),A=s._export_sfc(ge,[["__scopeId","data-v-6d1d4bf9"]]),_e="bottom-center",ye="slide-y",_=new Map;let ke=0;function Se(t){return typeof t=="string"?{label:t}:t}function be(t,n){return t==="fade"?"fade":t==="scale"?"scale":t==="slide-x"?n.endsWith("right")?"slide-x-reverse":"slide-x":n.startsWith("top")?"slide-y":"slide-y-reverse"}function Ce(){return e.defineComponent({name:"GSnackbarHost",props:{items:{type:Array,required:!0},location:{type:String,required:!0},transition:{type:String,required:!0},close:{type:Function,required:!0},remove:{type:Function,required:!0}},setup(t){return()=>e.h("div",{class:["g-snackbar-stack",`g-snackbar-stack_location-${t.location}`]},[e.h("div",{class:"g-snackbar-stack__items"},t.items.map(n=>e.h(A,{key:n.id,...n,modelValue:n.open,position:"static",transition:{name:be(n.transition??t.transition,n.location),appear:!0,duration:240,leaveDuration:180,distance:"18px",scale:.96},"onUpdate:modelValue":r=>{n.open=r},onClose:r=>t.close(n.id,r),onAfterClose:()=>t.remove(n.id)})))])}})}function Be(t,n,r,o){const u=_.get(t);if(u)return u;const l=document.createElement("div");l.className="g-snackbar-stack__container",document.body.appendChild(l);const i=e.reactive([]),a=e.createApp(Ce(),{items:i,location:t,transition:n,close:r,remove:o});a.mount(l);const c={app:a,container:l,items:i};return _.set(t,c),c}function he(){const t=e.shallowRef([]);function n(l){for(const[i,a]of _.entries()){const c=a.items.findIndex(m=>m.id===l);if(c!==-1){a.items.splice(c,1),t.value=t.value.filter(m=>m.id!==l),a.items.length||window.setTimeout(()=>{a.items.length||(a.app.unmount(),a.container.remove(),_.delete(i))},220);return}}}function r(l,i="manual"){for(const a of _.values()){const c=a.items.find(m=>m.id===l);if(c){c.open=!1;return}}}function o(l){const i=typeof l=="string"?{text:l}:l,a=i.location??_e,c=i.transition??ye,m=++ke,p={...i,id:m,open:!0,location:a,transition:c,action:Se(i.action)};return Be(a,c,r,n).items.push(p),t.value=[...t.value,p],{id:m,close:(d="manual")=>{r(m,d)}}}function u(){for(const[l,i]of _.entries())i.app.unmount(),i.container.remove(),_.delete(l);t.value=[]}return e.onUnmounted(()=>{u()}),{show:o,closeAll:u,items:t}}exports.GGradient=x;exports.GIcon=N;exports.GIcon$1=h;exports.GSnackbar=A;exports._sfc_main=R;exports.makeActionSurfaceProps=G;exports.makeGradientProps=$;exports.makePLAProps=E;exports.useActionSurface=I;exports.useLoading=ie;exports.useSnackbar=he;