quarkd
Version:
Mobile UI Components built on Web Components.
2 lines (1 loc) • 9.82 kB
JavaScript
import{_ as t,a as n}from"../typeof.js";import{_ as e,a as o,b as r,c as i,P as a,H as s,d as c,N as l,O as u,B as p}from"../index2.js";import{_ as d}from"../defineProperty.js";import{d as f,e as h,c as v}from"../bodyScrollLock.esm.js";import"../popup/index.js";import"../cell/index.js";import{d as m,a as y,f as w,r as g,w as k,s as b,M as x,h as S}from"../index22.js";import{s as q}from"../public.js";import"../index4.js";import"../index5.js";var C=function(t){w(r,t);var n,e,o=(n=r,e=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}}(),function(){var t,o=m(n);if(e){var r=m(this).constructor;t=Reflect.construct(o,arguments,r)}else t=o.apply(this,arguments);return y(this,t)});function r(){var t;return g(this,r),(t=o.call(this)).attachShadow({mode:"open"}).innerHTML="\n <style>\n ".concat(k,'\n </style>\n <svg class="icon" id="icon" aria-hidden="true" viewBox="0 0 1024 1024">\n ').concat('<path d="M823.168 268.501333a42.666667 42.666667 0 0 1 63.872 56.32l-3.541333 4.010667-426.666667 426.666667a42.666667 42.666667 0 0 1-56.32 3.541333l-4.010667-3.541333-256-256a42.666667 42.666667 0 0 1 56.32-63.872l4.010667 3.541333L426.666667 664.96l396.501333-396.458667z" p-id="4380"></path>',"\n </svg>\n "),t.icon=t.shadowRoot.getElementById("icon"),t}return b(r,[{key:"connectedCallback",value:function(){this.upgradeProperty()}},{key:"attributeChangedCallback",value:function(t,n,e){if("color"===t)this.icon.style.color=e;else if("size"===t){var o=this.getFontSize();this.icon.style.fontSize="".concat(o)}}},{key:"upgradeProperty",value:function(){this.size=this.size,this.color=this.color}},{key:"getFontSize",value:function(){return x(this.size)}},{key:"size",get:function(){return this.getAttribute("size")},set:function(t){this.setAttribute("size",t)}},{key:"color",get:function(){return this.getAttribute("color")},set:function(t){this.setAttribute("color",t)}}],[{key:"observedAttributes",get:function(){return["size","color"]}}]),r}(S(HTMLElement));function z(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=e(t);if(n){var a=e(this).constructor;r=Reflect.construct(i,arguments,a)}else r=i.apply(this,arguments);return o(this,r)}}customElements.get("quark-icon-success")||customElements.define("quark-icon-success",C);var R=function(e){r(c,s);var o=z(c);function c(){var n;t(this,c);for(var e=arguments.length,r=new Array(e),l=0;l<e;l++)r[l]=arguments[l];return n=o.call.apply(o,[this].concat(r)),d(i(n),"value",""),d(i(n),"title",""),d(i(n),"disabled",!1),d(i(n),"root",a()),d(i(n),"titleRef",a()),d(i(n),"props",{activeColor:"#08f",zIndex:10,hideOverlay:!0,direction:"down",swipeThreshold:0}),d(i(n),"showPopup",!1),d(i(n),"currentValue",""),d(i(n),"options",[]),d(i(n),"selfNodes",[]),d(i(n),"contentSlotRef",a()),d(i(n),"clickAway",(function(t){if(!n.disabled){var e="QUARK-DROPDOWN-ITEM"===t.target.tagName?t.target.root.current:t.target;n.selfNodes.every((function(t){return t&&!t.contains(e)}))&&n.toggle(!1)}})),d(i(n),"setOptions",(function(t){n.options=t})),d(i(n),"setProps",(function(t){n.props=t;var e=n.props.swipeThreshold,o="number"==typeof e&&0!==e?"".concat(100/e,"%"):"0";n.style.minWidth=o})),d(i(n),"onTitleClick",(function(){n.toggle(),n.showPopup?f(n.root.current):h(n.root.current)})),d(i(n),"renderOption",(function(t){var e=function(t){var e=[],o={};return t.value==n.currentValue&&(e.push("quark-dropdown-item-option-active"),o.color=n.props.activeColor||"#08f"),{style:o,class:e.join(" ")}};return s.h("quark-cell",{onClick:function(){n.toggle(),n.currentValue!=t.value&&(n.currentValue=t.value,n.$emit("change",{detail:{value:n.currentValue}}))}},s.h("div",{slot:"title",part:"option-title",class:e(t).class,style:e(t).style},t.text),t.value==n.currentValue&&s.h("quark-icon-success",{part:"success-icon",size:"18",color:n.props.activeColor}))})),d(i(n),"toggle",(function(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:!n.showPopup;n.disabled||t!==n.showPopup&&(n.showPopup=t,t?(n.$emit("open"),f(n.root.current)):(n.$emit("close"),h(n.root.current)))})),d(i(n),"onContentSlotChange",(function(){if(n.contentSlotRef.current){var t,e=q(null===(t=n.contentSlotRef.current)||void 0===t?void 0:t.assignedNodes());n.selfNodes=n.selfNodes.concat(e)}})),d(i(n),"titleCSS",(function(){var t={};n.showPopup&&(t.color=n.props.activeColor);var e={title:!0,"title-down":n.showPopup===("down"===n.props.direction),"title-active":n.showPopup,"title-disabled":n.disabled};return{class:Object.keys(e).map((function(t){if(e[t])return"quark-dropdown-menu-"+t})).join(" "),style:t}})),d(i(n),"contentCSS",(function(){var t=n.props,e=t.zIndex,o=t.direction,r={zIndex:e+1},i={zIndex:e},a={zIndex:e,opacity:n.showPopup?1:0,visibility:n.showPopup?"visible":"hidden"};if(!n.root.current)return{wrapperStyle:i,contentStyle:r};var s=n.root.current.getBoundingClientRect(),c=s.bottom,l=s.top,u=window.innerHeight-c;return"up"===o?(r.bottom=0,i.bottom=window.innerHeight-l+"px",i.height=l+"px"):"down"===o&&(r.top=0,i.top=c+"px",i.height=u+"px"),n.showPopup?(i.visibility="visible",i.opacity=1,r.maxHeight="80%"):(i.visibility="hidden",i.opacity=0,r.maxHeight=0),{wrapperStyle:i,contentStyle:r,maskStyle:a}})),n}return n(c,[{key:"componentDidMount",value:function(){this.currentValue=this.value,this.selfNodes=[this.root.current,this.titleRef.current],document.addEventListener("click",this.clickAway,{capture:!1,passive:!1})}},{key:"componentWillUnmount",value:function(){v(),document.removeEventListener("click",this.clickAway)}},{key:"renderTitle",value:function(){var t=this;if(this.title)return this.title;var n=this.options.find((function(n){return n.value==t.currentValue}));return n?n.text:"请选择"}},{key:"render",value:function(){var t=this;return s.h("div",{class:"quark-dropdown-item",ref:this.root,part:"root"},s.h("div",{ref:this.titleRef,class:this.titleCSS().class,style:this.titleCSS().style,onClick:this.onTitleClick,part:"title"},this.renderTitle()),s.h("div",{class:"quark-dropdown-item-content-wrap",part:"item-content-wrap",style:this.contentCSS().wrapperStyle},s.h("div",{class:"quark-dropdown-item-content",part:"item-content",style:this.contentCSS().contentStyle},s.h("div",{part:"item-content-inner"},s.h("slot",{ref:this.contentSlotRef,onslotchange:this.onContentSlotChange},s.h("quark-cell-group",null,this.options.map(this.renderOption))))),!this.props.hideOverlay&&s.h("div",{class:"quark-dropdown-item-content-mask",part:"mask",style:this.contentCSS().maskStyle,onClick:function(){return t.toggle(!1)}})))}}]),c}();c([l({type:String})],R.prototype,"value",void 0),c([l({type:String})],R.prototype,"title",void 0),c([l({type:Boolean})],R.prototype,"disabled",void 0),c([u()],R.prototype,"props",void 0),c([u()],R.prototype,"showPopup",void 0),c([u()],R.prototype,"currentValue",void 0),c([u()],R.prototype,"options",void 0),c([u()],R.prototype,"selfNodes",void 0);var P=R=c([p({tag:"quark-dropdown-item",style:":root {\n --quark-dropdown-menu-option-active-color: #0088ff;\n}\n\n:host {\n display: flex;\n flex: 1;\n align-items: center;\n justify-content: center;\n min-width: 0;\n}\n\n.quark-dropdown-item {\n cursor: pointer;\n height: 100%;\n}\n\n.quark-dropdown-menu-title {\n position: relative;\n box-sizing: border-box;\n max-width: 100%;\n color: var(--quark-dropdown-menu-title-color, #242729);\n font-size: var(--quark-dropdown-menu-title-font-size, 3.73333vw);\n padding: var(--quark-dropdown-menu-title-padding, 2.13333vw);\n height: 100%;\n display: flex;\n align-items: center;\n}\n\n.quark-dropdown-menu-title-disabled {\n color: #969799;\n}\n\n.quark-dropdown-menu-title::after {\n position: absolute;\n top: 50%;\n right: -1.06667vw;\n margin-top: -1.33333vw;\n border: 0.8vw solid;\n border-color: transparent transparent var(--quark-dropdown-menu-title-color, #242729) var(--quark-dropdown-menu-title-color, #242729);\n transform: rotate(-45deg);\n opacity: 0.8;\n content: '';\n}\n\n.quark-dropdown-menu-title-disabled::after {\n border-color: transparent transparent #969799 #969799;\n}\n\n.quark-dropdown-menu-title-active {\n color: var(--quark-dropdown-menu-title-active-text-color);\n}\n\n.quark-dropdown-menu-title-active::after {\n border-color: transparent transparent currentColor currentColor;\n}\n\n.quark-dropdown-menu-title-down::after {\n margin-top: -1px;\n transform: rotate(135deg);\n}\n\n.quark-dropdown-item-content-wrap {\n position: fixed;\n z-index: 10;\n width: 100%;\n left: 0;\n overflow: hidden;\n box-shadow: 0 0.53333vw 3.2vw rgba(100, 101, 102, 0.12);\n visibility: hidden;\n opacity: 0;\n transition: opacity .3s;\n transition-timing-function: ease-out;\n}\n\n.quark-dropdown-item-content {\n position: absolute;\n left: 0;\n z-index: 10;\n right: 0;\n right: -4.53333vw;\n padding-right: 4.53333vw;\n overflow-x: hidden;\n overflow-y: scroll;\n background-color: #fff;\n transition: all .3s;\n transition-timing-function: ease-out;\n}\n\n.quark-dropdown-item-option-active {\n color: var(--quark-dropdown-menu-option-active-color);\n}\n\n.quark-dropdown-item-content-mask {\n position: absolute;\n visibility: hidden;\n left: 0;\n top: 0;\n width: 100%;\n background-color: rgba(0, 0, 0, 0.7);\n height: 100%;\n opacity: 0;\n transition: all .3s;\n transition-timing-function: ease-out;\n}"})],R);export{P as default};