vue-devui 1.0.0-beta.11 → 1.0.0-beta.15

package/tooltip/index.umd.js

@@ -1 +1 @@
-(function(s,e){typeof exports=="object"&&typeof module!="undefined"?e(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],e):(s=typeof globalThis!="undefined"?globalThis:s||self,e(s.index={},s.Vue))})(this,function(s,e){"use strict";const g={position:{type:String,default:"top"},showAnimation:{type:Boolean,default:!0},content:{type:String},mouseLeaveDelay:{type:String,default:"150"},mouseEnterDelay:{type:String,default:"100"}},h={listen:function(l,c,t){return l.addEventListener?(l.addEventListener(c,t,!1),{remove(){l.removeEventListener(l,t,!1)}}):(l.attchEvent(c,t),{remove(){l.detachEvent(c,t)}})}};var T="",r=e.defineComponent({name:"DTooltip",props:g,setup(l,c){const t=e.reactive({left:0,top:0}),u=e.ref(!1),o=e.ref(null),f=e.ref(null),i=e.ref(null),n=e.ref(null);let y,m;const p=(a,d)=>{i.value.style[a]=d},b=function(a,d=l.mouseEnterDelay){let v;if(parseInt(d)>=0)return function(){v&&clearTimeout(v),v=setTimeout(a,parseInt(d))};console.error("the value of delay is bigger than 0 and the type of delay must be string!")};return e.onMounted(()=>{u.value||(f.value.style.opacity="0"),y=h.listen(o.value.children[0],"mouseenter",b(function(){u.value=!0},l.mouseEnterDelay)),m=h.listen(o.value.children[0],"mouseleave",function(){u.value&&setTimeout(function(){u.value=!1},l.mouseLeaveDelay)})}),e.watch(u,function(a,d){if(a){switch(f.value.style.opacity="1",f.value.style.zIndex="999",i.value.style.border="5px solid transparent",l.position){case"top":t.left=o.value.children[0].offsetLeft-f.value.offsetWidth/2+o.value.children[0].offsetWidth/2-5,t.top=o.value.children[0].offsetTop-10-n.value.offsetHeight,p("borderTop","5px solid rgb(70, 77, 110)"),i.value.style.top=`${n.value.offsetHeight}px`,i.value.style.left=`${n.value.offsetWidth/2+5}px`;break;case"right":t.left=o.value.children[0].offsetLeft+o.value.children[0].offsetWidth,t.top=o.value.children[0].offsetTop+o.value.children[0].offsetHeight/2-n.value.offsetHeight/2,p("borderRight","5px solid rgb(70, 77, 110)"),i.value.style.top=`${n.value.offsetHeight/2-5}px`,i.value.style.left="-0px";break;case"bottom":t.top=o.value.children[0].offsetHeight+o.value.children[0].offsetTop+10,t.left=o.value.children[0].offsetLeft+o.value.children[0].offsetWidth/2-n.value.offsetWidth/2-5,p("borderBottom","5px solid rgb(70, 77, 110)"),i.value.style.top="-10px",i.value.style.left=`${n.value.offsetWidth/2+5}px`;break;case"left":t.top=o.value.children[0].offsetTop+o.value.children[0].offsetHeight/2-n.value.offsetHeight/2,t.left=o.value.children[0].offsetLeft-20-n.value.offsetWidth,p("borderLeft","5px solid rgb(70, 77, 110)"),i.value.style.left=`${n.value.offsetWidth+10}px`,i.value.style.top=`${n.value.offsetHeight/2-5}px`;break;default:console.error("The attribute position value is wrong, the value is one of top\u3001right\u3001left\u3001bottom");break}f.value.style.top=t.top+"px",f.value.style.left=t.left+"px"}else t.top=0,t.left=0,f.value.style.opacity="0"}),e.onBeforeUnmount(()=>{y.remove(),m.remove()}),()=>{const a=e.renderSlot(e.useSlots(),"default");return e.createVNode("div",{class:"devui-tooltip"},[e.createVNode("div",{class:"slotElement",ref:o},[a]),e.createVNode("div",{class:"tooltip",ref:f},[e.createVNode("div",{class:"arrow",ref:i},null),e.createVNode("div",{class:"tooltipcontent",ref:n},[l.content])])])}}});r.install=function(l){l.component(r.name,r)};var x={title:"Tooltip\u63D0\u793A",category:"\u53CD\u9988",status:"50%",install(l){l.use(r)}};s.Tooltip=r,s.default=x,Object.defineProperty(s,"__esModule",{value:!0}),s[Symbol.toStringTag]="Module"});
+(function(d,i){typeof exports=="object"&&typeof module!="undefined"?i(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],i):(d=typeof globalThis!="undefined"?globalThis:d||self,i(d.index={},d.Vue))})(this,function(d,i){"use strict";const u={position:{type:String,default:"top"},showAnimation:{type:Boolean,default:!0},content:{type:String},mouseLeaveDelay:{type:String,default:"150"},mouseEnterDelay:{type:String,default:"100"}};var p="",f=i.defineComponent({name:"DTooltip",props:u,setup(s){const n=i.reactive({left:0,top:0}),r=(o,t)=>{document.getElementById("devui-arrow").style[o]=t},e=i.ref(null);return i.onMounted(()=>{e.value.children[0].onmouseenter=function(){const o=document.createElement("div"),t=document.createElement("div"),l=document.createElement("div");o.classList.add("tooltip"),t.classList.add("arrow"),l.classList.add("tooltipcontent"),t.id="devui-arrow",o.id="devui-tooltip1",setTimeout(()=>{switch(document.getElementById("devui-tooltip").appendChild(o),o.appendChild(t),o.appendChild(l),l.innerHTML=s.content,o.style.opacity="1",o.style.zIndex="999",t.style.border="5px solid transparent",s.position){case"top":n.left=e.value.children[0].offsetLeft-o.offsetWidth/2+e.value.children[0].offsetWidth/2-5,n.top=e.value.children[0].offsetTop-10-l.offsetHeight,t.style.top=`${l.offsetHeight}px`,t.style.left=`${l.offsetWidth/2+5}px`,t.style.borderTop="5px solid rgb(70, 77, 110)";break;case"bottom":n.top=e.value.children[0].offsetHeight+e.value.children[0].offsetTop+10,n.left=e.value.children[0].offsetLeft+e.value.children[0].offsetWidth/2-l.offsetWidth/2-5,r("borderBottom","5px solid rgb(70, 77, 110)"),t.style.top="-10px",t.style.left=`${l.offsetWidth/2+5}px`,t.style.borderBottom="5px solid rgb(70, 77, 110)";break;case"left":n.top=e.value.children[0].offsetTop+e.value.children[0].offsetHeight/2-l.offsetHeight/2,n.left=e.value.children[0].offsetLeft-20-l.offsetWidth,r("borderLeft","5px solid rgb(70, 77, 110)"),t.style.left=`${l.offsetWidth+10}px`,t.style.top=`${l.offsetHeight/2-5}px`,t.style.borderLeft="5px solid rgb(70, 77, 110)";break;case"right":n.left=e.value.children[0].offsetLeft+e.value.children[0].offsetWidth,n.top=e.value.children[0].offsetTop+e.value.children[0].offsetHeight/2-l.offsetHeight/2,r("borderRight","5px solid rgb(70, 77, 110)"),t.style.top=`${l.offsetHeight/2-5}px`,t.style.left="-0px",t.style.borderRight="5px solid rgb(70, 77, 110)";break}o.style.top=n.top+5+"px",o.style.left=n.left+"px"},s.mouseEnterDelay)},e.value.children[0].onmouseleave=function(){setTimeout(()=>{document.getElementById("devui-tooltip1").removeChild(document.getElementById("devui-arrow")),document.getElementById("devui-tooltip").removeChild(document.getElementById("devui-tooltip1"))},s.mouseLeaveDelay)}}),i.onBeforeUnmount(()=>{e.value.children[0].onmouseenter=null,e.value.children[0].onmouseleave=null}),()=>{const o=i.renderSlot(i.useSlots(),"default");return i.createVNode("div",{class:"devui-tooltip",id:"devui-tooltip"},[i.createVNode("div",{class:"slotElement",ref:e},[o])])}}});f.install=function(s){s.component(f.name,f)};var a={title:"Tooltip\u63D0\u793A",category:"\u53CD\u9988",status:"50%",install(s){s.use(f)}};d.Tooltip=f,d.default=a,Object.defineProperty(d,"__esModule",{value:!0}),d[Symbol.toStringTag]="Module"});