quarkd
Version:
Mobile UI Components built on Web Components.
2 lines (1 loc) • 14 kB
JavaScript
import{_ as n,a as o}from"../typeof.js";import{_ as t,a as e,b as r,c as a,P as i,H as p,d as l,N as c,O as s,B as v}from"../index2.js";import{_ as f}from"../defineProperty.js";import{c as m}from"../index3.js";function h(n){var o=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(n){return!1}}();return function(){var r,a=t(n);if(o){var i=t(this).constructor;r=Reflect.construct(a,arguments,i)}else r=a.apply(this,arguments);return e(this,r)}}var u=function(t){r(l,p);var e=h(l);function l(){var o;n(this,l);for(var t=arguments.length,r=new Array(t),c=0;c<t;c++)r[c]=arguments[c];return o=e.call.apply(e,[this].concat(r)),f(a(o),"placement","bottom"),f(a(o),"theme","dark"),f(a(o),"actions",[]),f(a(o),"open",!1),f(a(o),"scrollhidden",!1),f(a(o),"zindex","999"),f(a(o),"tipsRef",i()),f(a(o),"windowScrollListener",(function(){o.open&&o.closeEmit()})),f(a(o),"addRemoveAnnimation",(function(){o.tipsRef&&o.tipsRef.current&&o.tipsRef.current.classList.add("quark-popover-leave")})),f(a(o),"setActions",(function(n){!n||n.length<=0||(o.actions=n)})),f(a(o),"closeEmit",(function(){o.addRemoveAnnimation(),o.open=!1,o.$emit("close")})),f(a(o),"handleActionClick",(function(n,t){n.stopPropagation(),o.$emit("select",{detail:{action:o.actions[t],index:t}})})),f(a(o),"renderIcon",(function(n){return n&&n.includes("http")?p.h("img",{src:n,style:{marginRight:10},class:"quark-popover-icon",part:"icon"}):null})),f(a(o),"renderActions",(function(){return"top"===o.placement||"topleft"===o.placement||"topright"===o.placement||"left"===o.placement||"lefttop"===o.placement||"leftbottom"===o.placement?p.h("div",{class:"quark-popover-tips",ref:o.tipsRef},p.h("div",{class:"quark-popover-content",part:"action-content"},p.h("slot",{name:"content"},o.actions.map((function(n,t){var e=m("quark-popover-action-container",{"quark-action-container-disable":n.disabled&&!0===n.disabled});return p.h("div",{class:e,part:"placement-action",onClick:function(n){o.handleActionClick(n,t)}},o.renderIcon(n.icon),p.h("div",{part:"placement-action-text"},n.text))})))),p.h("div",{class:"quark-popover-triangle",part:"action-triangle"})):p.h("div",{class:"quark-popover-tips",ref:o.tipsRef,part:"actions"},p.h("div",{class:"quark-popover-triangle",part:"triangle"}),p.h("div",{class:"quark-popover-content",part:"content"},p.h("slot",{name:"content"},o.actions.map((function(n,t){var e=m("quark-popover-action-container",{"quark-action-container-disable":n.disabled&&!0===n.disabled});return p.h("div",{class:e,part:"action",onClick:function(n){o.handleActionClick(n,t)}},o.renderIcon(n.icon),p.h("div",{part:"action-text"},n.text))})))))})),o}return o(l,[{key:"componentDidMount",value:function(){var n=this;this.zindex&&(this.style.zIndex=this.zindex),this.scrollhidden&&window.addEventListener("scroll",this.windowScrollListener),document.addEventListener("click",(function(o){!o.composedPath().includes(n)&&n.open&&n.closeEmit()}))}},{key:"shouldComponentUpdate",value:function(n,o,t){if("open"===n&&this.tipsRef&&this.tipsRef.current){var e=this.tipsRef.current;t?e.classList.remove("quark-popover-leave"):o&&!t&&e.classList.add("quark-popover-leave")}return!0}},{key:"componentWillUnmount",value:function(){window.removeEventListener("scroll",this.windowScrollListener)}},{key:"render",value:function(){return p.h("div",{class:"quark-popover",part:"root"},p.h("slot",null),this.renderActions())}}]),l}();l([c()],u.prototype,"placement",void 0),l([c()],u.prototype,"theme",void 0),l([s()],u.prototype,"actions",void 0),l([c({type:Boolean})],u.prototype,"open",void 0),l([c({type:Boolean})],u.prototype,"scrollhidden",void 0),l([c()],u.prototype,"zindex",void 0);var d=u=l([v({tag:"quark-popover",style:':host .quark-popover {\n display: inline-flex;\n position: relative;\n overflow: visible;\n cursor: pointer;\n}\n\n:host .quark-popover-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.quark-popover-leave {\n transition: transform .25s;\n transition-timing-function: ease-in;\n}\n\n:host .quark-popover-content {\n border-radius: 1.06667vw;\n background-color: var(--popover-background-color, #4a4a4a);\n max-width: 53.33333vw;\n width: max-content;\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n}\n\n:host([theme="light"]) .quark-popover-content {\n background-color: var(--popover-background-color, #fff);\n}\n\n:host .quark-popover-triangle {\n width: 0;\n height: 0;\n overflow: hidden;\n border: 1.6vw solid transparent;\n}\n\n:host([open]) .quark-popover-tips {\n visibility: visible;\n opacity: 1;\n}\n\n:host([placement="top"]) .quark-popover-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-popover-triangle {\n border-top-color: var(--popover-background-color, #4a4a4a);\n}\n\n:host([placement="top"][theme="light"]) .quark-popover-triangle {\n border-top-color: var(--popover-background-color, #fff);\n}\n\n:host([placement="top"][open]) .quark-popover-tips {\n transform: translate(-50%, var(--popover-margin-bottom, 0px));\n}\n\n/* right */\n:host([placement="right"]) .quark-popover-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-popover-triangle {\n border-right-color: var(--popover-background-color, #4a4a4a);\n}\n\n:host([placement="right"][theme="light"]) .quark-popover-triangle {\n border-right-color: var(--popover-background-color, #fff);\n}\n\n:host([placement="right"][open]) .quark-popover-tips {\n transform: translate(var(--popover-margin-left, 2.66667vw), -50%);\n}\n\n/* bottom */\n:host([placement="bottom"]) .quark-popover-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-popover-triangle {\n border-bottom-color: var(--popover-background-color, #4a4a4a);\n}\n\n:host([placement="bottom"][theme="light"]) .quark-popover-triangle {\n border-bottom-color: var(--popover-background-color, #fff);\n}\n\n:host([placement="bottom"][open]) .quark-popover-tips {\n transform: translate(-50%, var(--popover-margin-top, 0px));\n}\n\n/* left */\n:host([placement="left"]) .quark-popover-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-popover-triangle {\n border-left-color: var(--popover-background-color, #4a4a4a);\n}\n\n:host([placement="left"][theme="light"]) .quark-popover-triangle {\n border-left-color: var(--popover-background-color, #fff);\n}\n\n:host([placement="left"][open]) .quark-popover-tips {\n transform: translate(var(--popover-margin-right, -2.66667vw), -50%);\n}\n\n/* topleft */\n:host([placement="topleft"]) .quark-popover-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-popover-triangle {\n margin-left: 4.26667vw;\n border-top-color: var(--popover-background-color, #4a4a4a);\n}\n\n:host([placement="topleft"][theme="light"]) .quark-popover-triangle {\n border-top-color: var(--popover-background-color, #fff);\n}\n\n:host([placement="topleft"][open]) .quark-popover-tips {\n transform: translate(0, var(--popover-margin-right, 0));\n}\n\n/* topright */\n:host([placement="topright"]) .quark-popover-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-popover-triangle {\n margin-right: 4.26667vw;\n border-top-color: var(--popover-background-color, #4a4a4a);\n}\n\n:host([placement="topright"][theme="light"]) .quark-popover-triangle {\n border-top-color: var(--popover-background-color, #fff);\n}\n\n:host([placement="topright"][open]) .quark-popover-tips {\n transform: translate(0, var(--popover-margin-right, 0));\n}\n\n/* righttop */\n:host([placement="righttop"]) .quark-popover-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-popover-triangle {\n border-right-color: var(--popover-background-color, #4a4a4a);\n}\n\n:host([placement="righttop"][theme="light"]) .quark-popover-triangle {\n border-right-color: var(--popover-background-color, #fff);\n}\n\n:host([placement="righttop"][open]) .quark-popover-tips {\n transform: translate(var(--popover-margin-left, 2.66667vw), 0);\n}\n\n/* rightbottom */\n:host([placement="rightbottom"]) .quark-popover-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-popover-triangle {\n border-right-color: var(--popover-background-color, #4a4a4a);\n}\n\n:host([placement="rightbottom"][theme="light"]) .quark-popover-triangle {\n border-right-color: var(--popover-background-color, #fff);\n}\n\n:host([placement="rightbottom"][open]) .quark-popover-tips {\n transform: translate(var(--popover-margin-left, 2.66667vw), 0);\n}\n\n/* bottomleft */\n:host([placement="bottomleft"]) .quark-popover-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-popover-triangle {\n margin-left: 4.26667vw;\n border-bottom-color: var(--popover-background-color, #4a4a4a);\n}\n\n:host([placement="bottomleft"][theme="light"]) .quark-popover-triangle {\n border-bottom-color: var(--popover-background-color, #fff);\n}\n\n:host([placement="bottomleft"][open]) .quark-popover-tips {\n transform: translate(0, var(--popover-margin-left, 0px));\n}\n\n/* bottomright */\n:host([placement="bottomright"]) .quark-popover-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-popover-triangle {\n margin-right: 4.26667vw;\n border-bottom-color: var(--popover-background-color, #4a4a4a);\n}\n\n:host([placement="bottomright"][theme="light"]) .quark-popover-triangle {\n border-bottom-color: var(--popover-background-color, #fff);\n}\n\n:host([placement="bottomright"][open]) .quark-popover-tips {\n transform: translate(0, var(--popover-margin-left, 0));\n}\n\n/* lefttop */\n:host([placement="lefttop"]) .quark-popover-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-popover-triangle {\n border-left-color: var(--popover-background-color, #4a4a4a);\n}\n\n:host([placement="lefttop"][theme="light"]) .quark-popover-triangle {\n border-left-color: var(--popover-background-color, #fff);\n}\n\n:host([placement="lefttop"][open]) .quark-popover-tips {\n transform: translate(var(--popover-margin-right, -2.66667vw), 0);\n}\n\n/* leftbottom */\n:host([placement="leftbottom"]) .quark-popover-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-popover-triangle {\n border-left-color: var(--popover-background-color, #4a4a4a);\n}\n\n:host([placement="leftbottom"][theme="light"]) .quark-popover-triangle {\n border-left-color: var(--popover-background-color, #fff);\n}\n\n:host([placement="leftbottom"][open]) .quark-popover-tips {\n transform: translate(var(--popover-margin-right, -2.66667vw), 0);\n}\n\n:host slot {\n border-radius: inherit;\n}\n\n:host .quark-popover-icon {\n width: var(--popover-action-font-size, 3.73333vw);\n height: auto;\n}\n\n:host .quark-popover-action-container {\n padding-left: var(--popovers-hspacing, 4.26667vw);\n padding-right: var(--popover-hspacing, 4.26667vw);\n height: var(--popover-action-height, 11.73333vw);\n min-width: 26.66667vw;\n font-weight: var(--popover-action-font-weight, 400);\n line-height: var(--popover-action-line-height, 5.33333vw);\n text-align: center;\n color: var(--popover-color, #fff);\n font-size: var(--popover-action-font-size, 3.73333vw);\n font-style: normal;\n display: flex;\n flex-direction: row;\n justify-content: center;\n align-items: center;\n position: relative;\n cursor: pointer;\n}\n\n:host([theme="light"]) .quark-popover-action-container {\n color: var(--popover-color, #242729);\n}\n\n:host .quark-action-container-disable {\n cursor: not-allowed;\n pointer-events: none;\n user-select: none;\n color: #c8c9cc;\n}\n\n:host([theme="light"]) .quark-action-container-disable {\n color: #c8c9cc;\n}\n\n:host .quark-popover-action-container:after {\n position: absolute;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n content: " ";\n pointer-events: none;\n right: 4.26667vw;\n bottom: 0;\n left: 4.26667vw;\n -webkit-transform: scaleY(0.5);\n transform: scaleY(0.5);\n border-bottom: 1px solid rgba(255, 255, 255, 0.3);\n}\n\n:host([theme="light"]) .quark-popover-action-container:after {\n border-bottom: 1px solid rgba(0, 0, 0, 0.1);\n}\n\n:host .quark-popover-action-container:last-child::after {\n border: none;\n}\n'})],u);export{d as default};