quarkd
Version:
Mobile UI Components built on Web Components.
2 lines (1 loc) • 11.3 kB
JavaScript
import{_ as t,a as n}from"../typeof.js";import{_ as o,a as e,b as r,c as i,P as a,H as l,d as s,N as p,B as c}from"../index2.js";import{_ as m}from"../defineProperty.js";import"../index4.js";import"../index22.js";function f(t){var n=function(){if("undefined"==typeof Reflect||!Reflect.construct)return!1;if(Reflect.construct.sham)return!1;if("function"==typeof Proxy)return!0;try{return Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],(function(){}))),!0}catch(t){return!1}}();return function(){var r,i=o(t);if(n){var a=o(this).constructor;r=Reflect.construct(i,arguments,a)}else r=i.apply(this,arguments);return e(this,r)}}var u=function(o){r(s,l);var e=f(s);function s(){var n;t(this,s);for(var o=arguments.length,r=new Array(o),p=0;p<o;p++)r[p]=arguments[p];return n=e.call.apply(e,[this].concat(r)),m(i(n),"placement","bottom"),m(i(n),"tips",""),m(i(n),"open",!1),m(i(n),"closeable",!1),m(i(n),"autoclose",!1),m(i(n),"opentime",3e3),m(i(n),"scrollhidden",!1),m(i(n),"zindex","999"),m(i(n),"size",""),m(i(n),"timer",void 0),m(i(n),"tipsRef",a()),m(i(n),"windowScrollListener",(function(){n.open&&n.closeEmit()})),m(i(n),"addTimer",(function(){n.open&&n.autoclose&&(n.timer&&clearTimeout(n.timer),n.timer=setTimeout((function(){n.closeEmit()}),n.opentime))})),m(i(n),"clearTimer",(function(){n.timer&&clearTimeout(n.timer)})),m(i(n),"addRemoveAnimation",(function(){n.tipsRef&&n.tipsRef.current&&n.tipsRef.current.classList.add("quark-tooltip-leave")})),m(i(n),"closeEmit",(function(){n.addRemoveAnimation(),n.open=!1,n.$emit("close")})),m(i(n),"handleTipsClick",(function(t){t.stopPropagation(),n.closeable&&n.closeEmit()})),m(i(n),"renderCloseIcon",(function(){return n.closeable?l.h("quark-icon-close",{part:"close-icon",style:{opacity:.7,marginLeft:9}}):null})),m(i(n),"renderTips",(function(){return"top"===n.placement||"topleft"===n.placement||"topright"===n.placement||"left"===n.placement||"lefttop"===n.placement||"leftbottom"===n.placement?l.h("div",{class:"quark-tooltip-tips",part:"placement-tips",ref:n.tipsRef,onClick:n.handleTipsClick},l.h("div",{class:"quark-tooltip-content",part:"placement-content"},l.h("div",{part:"placement-tips"},n.tips),n.renderCloseIcon()),l.h("div",{class:"quark-tooltip-triangle",part:"placement-triangle"})):l.h("div",{class:"quark-tooltip-tips",ref:n.tipsRef,onClick:n.handleTipsClick,part:"root"},l.h("div",{class:"quark-tooltip-triangle",part:"triangle"}),l.h("div",{class:"quark-tooltip-content",part:"content"},l.h("div",{part:"tips"},n.tips),n.renderCloseIcon()))})),n}return n(s,[{key:"componentDidMount",value:function(){var t=this;this.zindex&&(this.style.zIndex=this.zindex),this.scrollhidden&&window.addEventListener("scroll",this.windowScrollListener),document.addEventListener("click",(function(n){!n.composedPath().includes(t)&&t.open&&t.closeEmit()})),this.addTimer()}},{key:"shouldComponentUpdate",value:function(t,n,o){if("open"===t&&this.tipsRef&&this.tipsRef.current){var e=this.tipsRef.current;o?(e.classList.remove("quark-tooltip-leave"),this.addTimer()):n&&!o&&(e.classList.add("quark-tooltip-leave"),this.clearTimer())}return!0}},{key:"componentWillUnmount",value:function(){window.removeEventListener("scroll",this.windowScrollListener),this.clearTimer()}},{key:"render",value:function(){return l.h("div",{class:"quark-tooltip"},l.h("slot",null),this.renderTips())}}]),s}();s([p()],u.prototype,"placement",void 0),s([p()],u.prototype,"tips",void 0),s([p({type:Boolean})],u.prototype,"open",void 0),s([p({type:Boolean})],u.prototype,"closeable",void 0),s([p({type:Boolean})],u.prototype,"autoclose",void 0),s([p()],u.prototype,"opentime",void 0),s([p({type:Boolean})],u.prototype,"scrollhidden",void 0),s([p()],u.prototype,"zindex",void 0),s([p()],u.prototype,"size",void 0);var d=u=s([c({tag:"quark-tooltip",style:':host .quark-tooltip {\n display: inline-flex;\n position: relative;\n overflow: visible;\n}\n\n:host .quark-tooltip-tips {\n display: flex;\n position: absolute;\n z-index: 99;\n visibility: hidden;\n opacity: 0;\n transition: .3s;\n transition-timing-function: ease-out;\n transform: translate(-50%, -6.4vw);\n}\n\n:host .quark-tooltip-leave {\n transition: transform .25s;\n transition-timing-function: ease-in;\n}\n\n:host .quark-tooltip-content {\n border-radius: 1.06667vw;\n padding-left: var(--tips-hspacing, 1.6vw);\n padding-right: var(--tips-hspacing, 1.6vw);\n padding-top: var(--tips-vspacing, 0.8vw);\n padding-bottom: var(--tips-vspacing, 0.8vw);\n line-height: var(--tips-line-height, 1.4);\n font-weight: var(--tips-font-weight, 400);\n text-align: center;\n background-color: var(--tips-background-color, #242729);\n color: var(--tips-color, #fff);\n font-size: var(--tips-font-size, 3.2vw);\n font-style: normal;\n max-width: 53.33333vw;\n width: max-content;\n display: flex;\n flex-direction: row;\n justify-content: space-between;\n align-items: center;\n}\n\n:host([size="large"]) .quark-tooltip-content {\n padding-left: var(--tips-hspacing, 2.13333vw);\n padding-right: var(--tips-hspacing, 2.13333vw);\n padding-top: var(--tips-vspacing, 1.6vw);\n padding-bottom: var(--tips-vspacing, 1.6vw);\n font-size: var(--tips-font-size, 3.73333vw);\n}\n\n:host .quark-tooltip-triangle {\n width: 0;\n height: 0;\n overflow: hidden;\n border: 1.6vw solid transparent;\n}\n\n:host([tips]:not([tips=""])[open]) .quark-tooltip-tips {\n visibility: visible;\n opacity: 0.9;\n}\n\n:host([placement="top"]) .quark-tooltip-tips {\n left: 50%;\n bottom: 100%;\n transform: translate(-50%, -6.4vw);\n flex-direction: column;\n justify-content: center;\n align-items: center;\n}\n\n:host([placement="top"]) .quark-tooltip-triangle {\n border-top-color: var(--tips-background-color, #242729);\n}\n\n:host([placement="top"][open]) .quark-tooltip-tips {\n transform: translate(-50%, var(--tips-margin-bottom, 0px));\n}\n\n/* right */\n:host([placement="right"]) .quark-tooltip-tips {\n left: 100%;\n top: 50%;\n transform: translate(6.4vw, -50%);\n flex-direction: row;\n justify-content: center;\n align-items: center;\n}\n\n:host([placement="right"]) .quark-tooltip-triangle {\n border-right-color: var(--tips-background-color, #242729);\n}\n\n:host([placement="right"][open]) .quark-tooltip-tips {\n transform: translate(var(--tips-margin-left, 2.66667vw), -50%);\n}\n\n/* bottom */\n:host([placement="bottom"]) .quark-tooltip-tips {\n left: 50%;\n top: 100%;\n transform: translate(-50%, 6.4vw);\n flex-direction: column;\n justify-content: center;\n align-items: center;\n}\n\n:host([placement="bottom"]) .quark-tooltip-triangle {\n border-bottom-color: var(--tips-background-color, #242729);\n}\n\n:host([placement="bottom"][open]) .quark-tooltip-tips {\n transform: translate(-50%, var(--tips-margin-top, 0px));\n}\n\n/* left */\n:host([placement="left"]) .quark-tooltip-tips {\n right: 100%;\n top: 50%;\n transform: translate(-6.4vw, -50%);\n flex-direction: row;\n justify-content: center;\n align-items: center;\n}\n\n:host([placement="left"]) .quark-tooltip-triangle {\n border-left-color: var(--tips-background-color, #242729);\n}\n\n:host([placement="left"][open]) .quark-tooltip-tips {\n transform: translate(var(--tips-margin-right, -2.66667vw), -50%);\n}\n\n/* topleft */\n:host([placement="topleft"]) .quark-tooltip-tips {\n left: 0;\n bottom: 100%;\n transform: translate(0, -6.4vw);\n flex-direction: column;\n justify-content: center;\n align-items: flex-start;\n}\n\n:host([placement="topleft"]) .quark-tooltip-triangle {\n margin-left: 4.26667vw;\n border-top-color: var(--tips-background-color, #242729);\n}\n\n:host([placement="topleft"][open]) .quark-tooltip-tips {\n transform: translate(0, var(--tips-margin-right, 0));\n}\n\n/* topright */\n:host([placement="topright"]) .quark-tooltip-tips {\n right: 0;\n bottom: 100%;\n transform: translate(0, -6.4vw);\n flex-direction: column;\n justify-content: center;\n align-items: flex-end;\n}\n\n:host([placement="topright"]) .quark-tooltip-triangle {\n margin-right: 4.26667vw;\n border-top-color: var(--tips-background-color, #242729);\n}\n\n:host([placement="topright"][open]) .quark-tooltip-tips {\n transform: translate(0, var(--tips-margin-right, 0));\n}\n\n/* righttop */\n:host([placement="righttop"]) .quark-tooltip-tips {\n left: 100%;\n top: 0;\n transform: translate(6.4vw, 0);\n flex-direction: row;\n justify-content: center;\n align-items: center;\n}\n\n:host([placement="righttop"]) .quark-tooltip-triangle {\n border-right-color: var(--tips-background-color, #242729);\n}\n\n:host([placement="righttop"][open]) .quark-tooltip-tips {\n transform: translate(var(--tips-margin-left, 2.66667vw), 0);\n}\n\n/* rightbottom */\n:host([placement="rightbottom"]) .quark-tooltip-tips {\n left: 100%;\n bottom: 0;\n transform: translate(6.4vw, 0);\n flex-direction: row;\n justify-content: center;\n align-items: center;\n}\n\n:host([placement="rightbottom"]) .quark-tooltip-triangle {\n border-right-color: var(--tips-background-color, #242729);\n}\n\n:host([placement="rightbottom"][open]) .quark-tooltip-tips {\n transform: translate(var(--tips-margin-left, 2.66667vw), 0);\n}\n\n/* bottomleft */\n:host([placement="bottomleft"]) .quark-tooltip-tips {\n left: 0;\n top: 100%;\n transform: translate(0, 6.4vw);\n flex-direction: column;\n justify-content: center;\n align-items: flex-start;\n}\n\n:host([placement="bottomleft"]) .quark-tooltip-triangle {\n margin-left: 4.26667vw;\n border-bottom-color: var(--tips-background-color, #242729);\n}\n\n:host([placement="bottomleft"][open]) .quark-tooltip-tips {\n transform: translate(0, var(--tips-margin-left, 0px));\n}\n\n/* bottomright */\n:host([placement="bottomright"]) .quark-tooltip-tips {\n right: 0;\n top: 100%;\n transform: translate(0, 6.4vw);\n flex-direction: column;\n justify-content: center;\n align-items: flex-end;\n}\n\n:host([placement="bottomright"]) .quark-tooltip-triangle {\n margin-right: 4.26667vw;\n border-bottom-color: var(--tips-background-color, #242729);\n}\n\n:host([placement="bottomright"][open]) .quark-tooltip-tips {\n transform: translate(0, var(--tips-margin-left, 0));\n}\n\n/* lefttop */\n:host([placement="lefttop"]) .quark-tooltip-tips {\n right: 100%;\n top: 0;\n transform: translate(-6.4vw, 0);\n flex-direction: row;\n justify-content: center;\n align-items: center;\n}\n\n:host([placement="lefttop"]) .quark-tooltip-triangle {\n border-left-color: var(--tips-background-color, #242729);\n}\n\n:host([placement="lefttop"][open]) .quark-tooltip-tips {\n transform: translate(var(--tips-margin-right, -2.66667vw), 0);\n}\n\n/* leftbottom */\n:host([placement="leftbottom"]) .quark-tooltip-tips {\n right: 100%;\n bottom: 0;\n transform: translate(-6.4vw, 0);\n flex-direction: row;\n justify-content: center;\n align-items: center;\n}\n\n:host([placement="leftbottom"]) .quark-tooltip-triangle {\n border-left-color: var(--tips-background-color, #242729);\n}\n\n:host([placement="leftbottom"][open]) .quark-tooltip-tips {\n transform: translate(var(--tips-margin-right, -2.66667vw), 0);\n}\n\n:host slot {\n border-radius: inherit;\n}\n\n:host quark-icon-close {\n color: var(--tips-color, #fff);\n font-size: var(--tips-font-size, 3.73333vw);\n}\n'})],u);export{d as default};