vexip-ui/lib/components/alert/alert.vue2.cjs

A Vue 3 UI library, Highly customizability, full TypeScript, performance pretty good

"use strict";const e=require("vue");require("../collapse-transition/index.cjs");require("../icon/index.cjs");require("../renderer/index.cjs");const c=require("@vexip-ui/config"),l=require("@vexip-ui/utils"),A=require("./props.cjs"),$=require("./symbol.cjs"),_=require("../collapse/collapse-transition.cjs"),u=require("../renderer/renderer.cjs"),g=require("../icon/icon.cjs"),P=e.defineComponent({name:"Alert",__name:"alert",props:A.alertProps,setup(S){const N=S,r=c.useProps("alert",N,{type:{default:"primary",validator:t=>$.alertTypes.includes(t)},title:"",colorfulText:!1,icon:{isFunc:!0,default:!1},closable:!1,iconColor:"",noBorder:!1,banner:!1,manual:!1,scroll:!1,scrollSpeed:1,color:null,slots:()=>({})}),b=e.useSlots(),o=c.useNameHelper("alert"),s=c.useIcons(),V=e.computed(()=>({default:s.value.alert,primary:s.value.info,info:s.value.info,success:s.value.success,warning:s.value.warning,error:s.value.error})),C=e.ref(!1),y=e.ref(!1),i=e.ref(0),d=e.ref(0),h=e.ref(0),f=e.ref(),m=e.ref(),p=e.computed(()=>!!(r.title||b.title)),k=e.computed(()=>!!(r.icon||b.icon)),B=e.computed(()=>({[o.b()]:!0,[o.bs("vars")]:!0,[o.bm("inherit")]:r.inherit,[o.bm(r.type)]:r.type,[o.bm("colorful-text")]:r.colorfulText,[o.bm("has-title")]:p.value,[o.bm("has-icon")]:k.value,[o.bm("closable")]:r.closable,[o.bm("no-border")]:!r.banner&&r.noBorder,[o.bm("banner")]:r.banner})),E=e.computed(()=>{if(!r.color)return;const t=l.isClient?getComputedStyle(document.documentElement):null,n=l.parseColorToRgba((t==null?void 0:t.getPropertyValue(o.nv("color-black")))||"#000"),a=l.parseColorToRgba(r.color);return o.cvm({"bg-color":l.adjustAlpha(a,.2).toString(),"b-color":l.adjustAlpha(a,.5).toString(),"icon-color":l.mixColor(n,a,.2).toString(),...r.colorfulText?{"text-color":l.mixColor(n,a,.2).toString(),"title-color":l.mixColor(n,a,.2).toString()}:{}})}),q=e.computed(()=>typeof r.icon=="boolean"?V.value[r.type]??{}:{icon:r.icon}),x=e.computed(()=>({width:`${h.value}px`,transitionDuration:`${i.value}ms`,transform:`translateX(${d.value}px)`}));e.watch(()=>r.scroll,t=>{t&&v()}),e.onMounted(()=>{r.scroll&&v()});function w(){r.manual||(C.value=!0),c.emitEvent(r.onClose)}function T(){c.emitEvent(r.onHide),y.value=!0}function v(){if(f.value&&m.value){const t=f.value.getBoundingClientRect(),n=l.getRangeWidth(m.value),a=(t.width+n)*12/(Math.max(r.scrollSpeed,0)||1);i.value=0,d.value=t.width,h.value=n,requestAnimationFrame(()=>{requestAnimationFrame(()=>{i.value=a,d.value=-n})})}}function z(){c.emitEvent(r.onScrollEnd),requestAnimationFrame(v)}return(t,n)=>y.value?e.createCommentVNode("",!0):(e.openBlock(),e.createBlock(e.unref(_),{key:0,"fade-effect":"",onAfterLeave:T},{default:e.withCtx(()=>[C.value?e.createCommentVNode("",!0):(e.openBlock(),e.createElementBlock("div",{key:0,class:e.normalizeClass(B.value),role:"alert",style:e.normalizeStyle(E.value)},[e.createElementVNode("div",{class:e.normalizeClass(e.unref(o).be("wrapper"))},[p.value?(e.openBlock(),e.createElementBlock("div",{key:0,class:e.normalizeClass(e.unref(o).be("title"))},[e.renderSlot(t.$slots,"title",{},()=>[e.createVNode(e.unref(u),{renderer:e.unref(r).slots.title},{default:e.withCtx(()=>[e.createTextVNode(e.toDisplayString(t.title),1)]),_:1},8,["renderer"])])],2)):e.createCommentVNode("",!0),e.createElementVNode("div",{ref_key:"content",ref:f,class:e.normalizeClass([e.unref(o).be("content"),e.unref(r).scroll&&e.unref(o).bem("content","scroll")])},[e.unref(r).scroll?(e.openBlock(),e.createElementBlock("span",{key:0,ref_key:"scrollEl",ref:m,class:e.normalizeClass(e.unref(o).be("scroll")),style:e.normalizeStyle(x.value),onTransitionend:z},[e.renderSlot(t.$slots,"default",{},()=>[e.createVNode(e.unref(u),{renderer:e.unref(r).slots.default},null,8,["renderer"])])],38)):e.renderSlot(t.$slots,"default",{key:1},()=>[e.createVNode(e.unref(u),{renderer:e.unref(r).slots.default},null,8,["renderer"])])],2)],2),e.unref(r).closable?(e.openBlock(),e.createElementBlock("button",{key:0,type:"button",class:e.normalizeClass(e.unref(o).be("close")),onClick:w},[e.renderSlot(t.$slots,"close",{},()=>[e.createVNode(e.unref(u),{renderer:e.unref(r).slots.close},{default:e.withCtx(()=>[e.createVNode(e.unref(g),e.mergeProps(e.unref(s).close,{label:"close"}),null,16)]),_:1},8,["renderer"])])],2)):e.createCommentVNode("",!0),k.value?(e.openBlock(),e.createElementBlock("div",{key:1,class:e.normalizeClass(e.unref(o).be("icon"))},[e.renderSlot(t.$slots,"icon",{},()=>[e.createVNode(e.unref(u),{renderer:e.unref(r).slots.icon},{default:e.withCtx(()=>[e.createVNode(e.unref(g),e.mergeProps(q.value,{scale:p.value?2:1,style:{color:e.unref(r).iconColor}}),null,16,["scale","style"])]),_:1},8,["renderer"])])],2)):e.createCommentVNode("",!0)],6))]),_:3}))}});module.exports=P;
//# sourceMappingURL=alert.vue2.cjs.map