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

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

"use strict";const e=require("vue");require("../bubble/index.cjs");require("../button/index.cjs");require("../icon/index.cjs");require("../masker/index.cjs");require("../renderer/index.cjs");const c=require("@vexip-ui/config"),P=require("@vexip-ui/hooks"),x=require("@vexip-ui/utils"),Q=require("./props.cjs"),X=require("./symbol.cjs"),Y=require("../masker/masker.vue2.cjs"),Z=require("../bubble/bubble.vue2.cjs"),p=require("../renderer/renderer.cjs"),ee=require("../icon/icon.cjs"),I=require("../button/button.cjs"),te={role:"none","aria-hidden":"true"},re={style:{width:"100%",height:"100%"}},ne=["id"],ae=["x","y","width","height"],le=["mask"],oe={key:0,fill:"transparent",style:{"pointer-events":"auto"}},ue=["x","y","width","height"],se=e.defineComponent({name:"Tour",inheritAttrs:!1,__name:"tour",props:Q.tourProps,emits:["update:active","update:index"],setup(L,{expose:U,emit:H}){const K=L,r=c.useProps("tour",K,{locale:null,active:!1,index:{static:!0,default:0,validator:t=>t>=0},steps:{static:!0,default:()=>[]},type:"default",hideMask:!1,signType:"dot",padding:10,closable:!0,permeable:!1,transfer:!1,slots:()=>({})}),h=H,n=c.useNameHelper("tour"),k=c.useLocale("tour",e.toRef(r,"locale")),$=c.useIcons(),s=e.ref(r.active),l=e.ref(r.index),N=e.reactive(new Set),o=e.ref(),b=e.ref(),q=e.ref(),V=e.ref(),B=e.computed(()=>{var t;return(t=q.value)==null?void 0:t.wrapper});P.useModifier({target:B,passive:!1,onKeyDown:(t,a)=>{s.value&&x.decide([[()=>a.left||a.up,y],[()=>a.right||a.down,C],[()=>a.escape,D]],{beforeMatchAny:()=>{t.preventDefault(),t.stopPropagation()},afterMatchAny:a.resetAll})}});const v=e.computed(()=>Array.from(N).concat(r.steps).sort((t,a)=>(t.order||0)-(a.order||0))),u=e.computed(()=>v.value[l.value]),g=e.computed(()=>{var a;const t=((a=u.value)==null?void 0:a.type)||r.type;return t==="default"?void 0:t}),O=e.computed(()=>[n.b(),n.bs("vars"),{[n.bm("hide-mask")]:r.hideMask,[n.bm("permeable")]:r.permeable}]),m=e.computed(()=>Array.isArray(r.padding)?r.padding.length===2?[r.padding[0],r.padding[1],r.padding[0],r.padding[1]]:r.padding:new Array(4).fill(r.padding)),T=c.useId(),{reference:W,placement:j,updatePopper:R}=P.usePopper({wrapper:B,placement:e.computed(()=>{var t;return((t=u.value)==null?void 0:t.placement)||"bottom"}),popper:e.computed(()=>{var t;return(t=V.value)==null?void 0:t.$el}),arrow:e.computed(()=>{var t;return(t=V.value)==null?void 0:t.arrow}),shift:{crossAxis:!0},autoUpdate:!1});e.watch(()=>r.active,t=>{t?E():s.value=t}),e.watch(()=>r.index,t=>{l.value=Math.max(0,t)}),e.watch([s,u],()=>{if(b.value=void 0,!x.isClient||!s.value||!u.value)return;const t=P.unrefElement(x.callIfFunc(u.value.target));if(!t){o.value=void 0;return}const{top:a,left:d,width:f,height:_}=t.getBoundingClientRect();if(o.value=[d-m.value[3],a-m.value[0],f+m.value[1]+m.value[3],_+m.value[0]+m.value[2]],r.permeable){const[S,z,M,F]=o.value;b.value=[[0,0,"100%",z],[S+M,0,`calc(100% - ${S+M}px)`,"100%"],[0,z+F,"100%",`calc(100% - ${z+F}px)`],[0,0,S,"100%"]]}R()},{immediate:!0,flush:"post"}),e.provide(X.TOUR_STATE,{increaseStep:G,decreaseStep:J}),U({wrapper:B,currentActive:s,currentIndex:l,currentStep:u,allSteps:v,start:E,prev:y,next:C,close:w});const A={start:E,prev:y,next:C,close:w},i=e.shallowReadonly(e.reactive({...A,step:u,index:l}));function G(t){N.add(t)}function J(t){N.delete(t)}function E(){s.value||(s.value=!0,h("update:active",!0),c.emitEvent(r.onToggle,!0),l.value&&(l.value=0,h("update:index",0)))}function y(){!s.value||l.value<=0||(--l.value,h("update:index",l.value),c.emitEvent(r.onChange,l.value,u.value))}function C(t=!0){if(s.value){if(l.value>=v.value.length-1){t&&w();return}++l.value,h("update:index",l.value),c.emitEvent(r.onChange,l.value,u.value)}}function w(){s.value&&(s.value=!1,h("update:active",!1),c.emitEvent(r.onToggle,!1))}function D(){s.value&&(w(),c.emitEvent(r.onClose))}return(t,a)=>(e.openBlock(),e.createElementBlock(e.Fragment,null,[e.withDirectives(e.createElementVNode("div",te,[e.renderSlot(t.$slots,"default")],512),[[e.vShow,!1]]),e.createVNode(e.unref(Y),e.mergeProps(t.$attrs,{ref_key:"masker",ref:q,active:s.value,"onUpdate:active":a[1]||(a[1]=d=>s.value=d),inherit:e.unref(r).inherit,class:O.value,transfer:t.transfer,"auto-remove":"","transition-name":"",disabled:e.unref(r).hideMask,onShow:e.unref(R),onHide:a[2]||(a[2]=d=>o.value=void 0),onMaskClick:a[3]||(a[3]=d=>e.unref(c.emitEvent)(e.unref(r).onMaskClick,d))}),{default:e.withCtx(({show:d})=>[o.value?(e.openBlock(),e.createElementBlock("div",{key:0,ref_key:"reference",ref:W,class:e.normalizeClass(e.unref(n).be("reference")),role:"none","aria-hidden":"true",style:e.normalizeStyle({top:`${o.value[1]}px`,left:`${o.value[0]}px`,width:`${o.value[2]}px`,height:`${o.value[3]}px`})},null,6)):e.createCommentVNode("",!0),e.createVNode(e.Transition,{appear:"",name:e.unref(n).ns("fade")},{default:e.withCtx(()=>[d&&u.value?(e.openBlock(),e.createBlock(e.unref(Z),{key:0,ref_key:"bubble",ref:V,inherit:"",class:e.normalizeClass([e.unref(n).be("bubble"),!o.value&&e.unref(n).bem("bubble","center"),g.value&&e.unref(n).bem("bubble","typed"),g.value&&e.unref(n).bem("bubble",g.value)]),"content-class":e.unref(n).be("step"),placement:e.unref(j),type:u.value.type||e.unref(r).type},{default:e.withCtx(()=>[e.unref(x.isFunction)(u.value.renderer)?(e.openBlock(),e.createBlock(e.unref(p),{key:0,renderer:u.value.renderer,data:A},null,8,["renderer"])):(e.openBlock(),e.createElementBlock(e.Fragment,{key:1},[e.createElementVNode("div",{class:e.normalizeClass(e.unref(n).be("header"))},[e.renderSlot(t.$slots,"header",e.normalizeProps(e.guardReactiveProps(e.unref(i))),()=>[e.createVNode(e.unref(p),{renderer:e.unref(r).slots.header,data:e.unref(i)},{default:e.withCtx(()=>[e.createElementVNode("div",{class:e.normalizeClass(e.unref(n).be("title"))},[e.renderSlot(t.$slots,"title",e.normalizeProps(e.guardReactiveProps(e.unref(i))),()=>[e.createVNode(e.unref(p),{renderer:e.unref(r).slots.title,data:e.unref(i)},{default:e.withCtx(()=>[e.createTextVNode(e.toDisplayString(u.value.title??e.unref(c.getStepByWord)(e.unref(k).stepCount,l.value)),1)]),_:1},8,["renderer","data"])])],2),e.unref(r).closable?(e.openBlock(),e.createElementBlock("button",{key:0,type:"button",class:e.normalizeClass(e.unref(n).be("close")),onClick:D},[e.renderSlot(t.$slots,"close",e.normalizeProps(e.guardReactiveProps(e.unref(i))),()=>[e.createVNode(e.unref(p),{renderer:e.unref(r).slots.close,data:e.unref(i)},{default:e.withCtx(()=>[e.createVNode(e.unref(ee),e.mergeProps(e.unref($).close,{scale:+(e.unref($).close.scale||1)*1.2,label:"close"}),null,16,["scale"])]),_:1},8,["renderer","data"])])],2)):e.createCommentVNode("",!0)]),_:3},8,["renderer","data"])])],2),e.createElementVNode("div",{class:e.normalizeClass(e.unref(n).be("content"))},[e.renderSlot(t.$slots,"body",e.normalizeProps(e.guardReactiveProps(e.unref(i))),()=>[e.createVNode(e.unref(p),{renderer:e.unref(r).slots.body,data:e.unref(i)},{default:e.withCtx(()=>[e.createTextVNode(e.toDisplayString(u.value.content),1)]),_:1},8,["renderer","data"])])],2),e.createElementVNode("div",{class:e.normalizeClass(e.unref(n).be("footer"))},[e.renderSlot(t.$slots,"footer",e.normalizeProps(e.guardReactiveProps(e.unref(i))),()=>[e.createVNode(e.unref(p),{renderer:e.unref(r).slots.footer,data:e.unref(i)},{default:e.withCtx(()=>[e.createElementVNode("div",{class:e.normalizeClass([e.unref(n).be("sign"),e.unref(n).bem("sign",e.unref(r).signType)])},[e.renderSlot(t.$slots,"sign",e.normalizeProps(e.guardReactiveProps(e.unref(i))),()=>[e.createVNode(e.unref(p),{renderer:e.unref(r).slots.sign,data:e.unref(i)},{default:e.withCtx(()=>[e.unref(r).signType==="count"?(e.openBlock(),e.createElementBlock(e.Fragment,{key:0},[e.createElementVNode("span",null,e.toDisplayString(l.value+1),1),e.createElementVNode("span",{class:e.normalizeClass(e.unref(n).be("count-sep"))},"/",2),e.createElementVNode("span",null,e.toDisplayString(v.value.length),1)],64)):(e.openBlock(!0),e.createElementBlock(e.Fragment,{key:1},e.renderList(v.value.length,f=>(e.openBlock(),e.createElementBlock("span",{key:f,class:e.normalizeClass([e.unref(n).be(`sign-${e.unref(r).signType==="dot"?"dot":"bar"}`),f-1===l.value&&e.unref(n).bem(`sign-${e.unref(r).signType==="dot"?"dot":"bar"}`,"active")])},null,2))),128))]),_:1},8,["renderer","data"])])],2),a[4]||(a[4]=e.createElementVNode("span",{style:{flex:"auto"},role:"none"},null,-1)),e.renderSlot(t.$slots,"actions",e.normalizeProps(e.guardReactiveProps(e.unref(i))),()=>[e.createVNode(e.unref(p),{renderer:e.unref(r).slots.actions,data:e.unref(i)},{default:e.withCtx(()=>[l.value>0?(e.openBlock(),e.createBlock(e.unref(I),{key:0,inherit:"",class:e.normalizeClass([e.unref(n).be("action"),e.unref(n).bem("action","prev")]),size:"small",text:!!g.value,onClick:y},{default:e.withCtx(()=>[e.createTextVNode(e.toDisplayString(e.unref(k).prev),1)]),_:1},8,["class","text"])):e.createCommentVNode("",!0),l.value<=v.value.length-1?(e.openBlock(),e.createBlock(e.unref(I),{key:1,inherit:"",class:e.normalizeClass([e.unref(n).be("action"),e.unref(n).bem("action","next")]),type:g.value?"default":"primary",size:"small",onClick:a[0]||(a[0]=f=>C())},{default:e.withCtx(()=>[e.createTextVNode(e.toDisplayString(l.value===v.value.length-1?e.unref(k).done:e.unref(k).next),1)]),_:1},8,["class","type"])):e.createCommentVNode("",!0)]),_:1},8,["renderer","data"])])]),_:3,__:[4]},8,["renderer","data"])])],2)],64))]),_:3},8,["class","content-class","placement","type"])):e.createCommentVNode("",!0)]),_:2},1032,["name"])]),mask:e.withCtx(()=>{var d;return[(e.openBlock(),e.createElementBlock("svg",re,[e.createElementVNode("defs",null,[e.createElementVNode("mask",{id:e.unref(T)},[a[5]||(a[5]=e.createElementVNode("rect",{x:"0",y:"0",width:"100%",height:"100%",fill:"white"},null,-1)),o.value?(e.openBlock(),e.createElementBlock("rect",{key:0,class:e.normalizeClass([e.unref(n).be("hollow"),e.unref(n).bem("hollow","active")]),x:o.value[0],y:o.value[1],width:o.value[2],height:o.value[3],fill:"black"},null,10,ae)):e.createCommentVNode("",!0)],8,ne)]),e.createElementVNode("rect",{x:"0",y:"0",width:"100%",height:"100%",fill:"rgba(0, 0, 0, 45%)",mask:`url(#${e.unref(T)})`},null,8,le),(d=b.value)!=null&&d.length?(e.openBlock(),e.createElementBlock("g",oe,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(b.value,(f,_)=>(e.openBlock(),e.createElementBlock("rect",{key:_,x:f[0],y:f[1],width:f[2],height:f[3]},null,8,ue))),128))])):e.createCommentVNode("",!0)]))]}),_:3},16,["active","inherit","class","transfer","disabled","onShow"])],64))}});module.exports=se;
//# sourceMappingURL=tour.vue2.cjs.map