@gradient-ui/core 0.4.0 → 0.5.0-rc.0

package/dist/useSnackbar-3QuH25xm.cjs

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