quarkd
Version:
Mobile UI Components built on Web Components.
2 lines (1 loc) • 8.54 kB
JavaScript
import{_ as n,a as e}from"../typeof.js";import{_ as t,a as o,b as r,c as i,P as a,H as s,d as l,N as c,O as p,B as u}from"../index2.js";import{_ as h}from"../defineProperty.js";import{B as d}from"../core.esm.js";import{W as k}from"../wheel.esm.js";import"../popup/index.js";import"../button/index.js";import"../index4.js";import{Local as f}from"../locale/index.js";import"../bodyScrollLock.esm.js";import"../index22.js";import"../loading/index.js";import"../util.js";function m(n){var 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(n){return!1}}();return function(){var r,i=t(n);if(e){var a=t(this).constructor;r=Reflect.construct(i,arguments,a)}else r=i.apply(this,arguments);return o(this,r)}}d.use(k);var b=function(t){r(l,s);var o=m(l);function l(){var e;n(this,l);for(var t=arguments.length,r=new Array(t),c=0;c<t;c++)r[c]=arguments[c];return e=o.call.apply(o,[this].concat(r)),h(i(e),"open",!1),h(i(e),"forbidmaskclick",!1),h(i(e),"name",""),h(i(e),"title",""),h(i(e),"confirmtext",""),h(i(e),"bottomhidden",!1),h(i(e),"columns",[]),h(i(e),"wheels",[]),h(i(e),"values",[]),h(i(e),"wheelWrapper",a()),h(i(e),"confirm",(function(){var n=e.getValues();e.values=n,e.$emit("confirm",{detail:{value:n}})})),h(i(e),"createWheel",(function(n,t){if(e.wheels[t])e.wheels[t].refresh(),e.wheels[t].wheelTo(e.columns[t].defaultIndex,10);else{var o=e.columns[t];e.wheels[t]=new d(n.children[t],{wheel:{selectedIndex:o.defaultIndex||0,wheelWrapperClass:"quark-picker-wheel-scroll",wheelItemClass:"quark-picker-wheel-item"}}),e.wheels[t].on("scrollEnd",e.debounce((function(){var n=e.getValues(!1);e.$emit("change",{detail:{value:n}})}),30))}return e.wheels[t]})),h(i(e),"renderWheel",(function(){return e.columns?e.columns.map((function(n){return s.h("div",{class:"quark-picker-wheel"},s.h("ul",{class:"quark-picker-wheel-scroll"},n.values.map((function(n){return s.h("li",{class:"quark-picker-wheel-item"},n)}))))})):null})),h(i(e),"popupClose",(function(){e.restorePosition(),e.$emit("close")})),e}return e(l,[{key:"setColumns",value:function(n){this.columns=n;var e=this.wheelWrapper.current;if(e)for(var t=0;t<this.columns.length;t+=1)this.createWheel(e,t);else console.warn("dom not find")}},{key:"getValues",value:function(){var n=!(arguments.length>0&&void 0!==arguments[0])||arguments[0];n&&this.restorePosition();var e=this.wheels.map((function(n){return n.getSelectedIndex()})),t=this.columns.map((function(n,t){var o=e[t];return{value:n.values[o],index:o}}));return t}},{key:"restorePosition",value:function(){this.wheels.forEach((function(n){n.restorePosition()}))}},{key:"debounce",value:function(n,e){var t=null;return function(){null!==t&&clearTimeout(t),t=setTimeout(n,e)}}},{key:"render",value:function(){return s.h("quark-popup",{open:this.open,position:"bottom",safearea:!0,round:!0,forbidmaskclick:this.forbidmaskclick,onclose:this.popupClose,part:"root"},s.h("div",{class:"quark-picker-container",part:"container"},s.h("div",{class:"quark-picker-header",part:"header"},s.h("slot",{name:"header"},s.h("span",{class:"quark-picker-title",part:"title"},this.title),s.h("div",{class:"quark-picker-header-close-btn",part:"close-btn"},s.h("quark-icon-close",{part:"close-btn-icon",size:"24",onclick:this.popupClose})))),s.h("div",{class:"quark-picker-content",part:"content"},s.h("div",{class:"quark-picker-mask-top",part:"mask-top"}),s.h("div",{class:"quark-picker-mask-bottom",part:"mask-bottom"}),s.h("div",{class:"quark-picker-current",part:"current"},s.h("div",{class:"quark-picker-current-mask",part:"current-mask"})),s.h("div",{class:"quark-picker-wheel-wrapper",part:"wheel",ref:this.wheelWrapper},this.renderWheel())),!this.bottomhidden&&s.h("div",{class:"quark-picker-bottom",part:"bottom"},s.h("quark-button",{part:"bottom-button",type:"primary",size:"big",onclick:this.confirm},this.confirmtext||f.current.confirm))))}}]),l}();l([c({type:Boolean})],b.prototype,"open",void 0),l([c({type:Boolean})],b.prototype,"forbidmaskclick",void 0),l([c()],b.prototype,"name",void 0),l([c()],b.prototype,"title",void 0),l([c()],b.prototype,"confirmtext",void 0),l([c({type:Boolean})],b.prototype,"bottomhidden",void 0),l([p()],b.prototype,"columns",void 0);var v=b=l([u({tag:"quark-picker",style:':host {\n width: 100%;\n display: block;\n}\n\n:host ul {\n list-style: none;\n padding: 0;\n}\n\n:host quark-button {\n width: 100%;\n font-family: PingFangSC-Medium, PingFang SC;\n font-weight: 500;\n --button-height: 100%;\n --button-font-size: 4.8vw;\n}\n\n:host .quark-picker-container {\n width: 100%;\n height: 90.13333vw;\n position: relative;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n}\n\n:host .quark-picker-header {\n position: relative;\n height: 14.93333vw;\n width: 100%;\n background-color: white;\n display: flex;\n justify-content: center;\n align-items: center;\n}\n\n:host .quark-picker-title {\n color: var(--picker-title-color, #242729);\n font-weight: var(--picker-title-font-weight, 500);\n font-family: var(--picker-title-font-family, PingFangSC-Medium, PingFang SC);\n text-align: center;\n font-size: var(--picker-title-font-size, 4.8vw);\n}\n\n:host .quark-picker-header-close-btn {\n height: 100%;\n position: absolute;\n right: 5.33333vw;\n top: 0;\n bottom: 0;\n display: flex;\n justify-content: center;\n align-items: center;\n}\n\n:host quark-icon-close {\n font-size: 6.4vw;\n color: #bcc4cc;\n cursor: pointer;\n}\n\n:host .quark-picker-content {\n position: absolute;\n display: flex;\n top: 14.93333vw;\n bottom: 19.2vw;\n left: 0;\n right: 0;\n background-color: white;\n box-sizing: border-box;\n}\n\n:host .quark-picker-bottom {\n position: absolute;\n bottom: 0;\n left: 0;\n display: flex;\n flex-direction: row;\n justify-content: center;\n align-items: center;\n width: 100%;\n height: 19.2vw;\n background-color: white;\n box-sizing: border-box;\n padding: 3.2vw 4.26667vw;\n}\n\n:host .quark-picker-mask-top,\n.quark-picker-mask-bottom {\n z-index: 10;\n width: 100%;\n height: 22.13333vw;\n pointer-events: none;\n transform: translateZ(0);\n}\n\n/* :host .quark-picker-mask-top::after {\n position: absolute;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n content: " ";\n pointer-events: none;\n right: 16px;\n bottom: 0;\n left: 16px;\n -webkit-transform: scaleY(0.5);\n transform: scaleY(0.5);\n border-bottom: 2px solid #f5f6f7;\n}\n\n:host .quark-picker-mask-bottom::before {\n position: absolute;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n content: " ";\n pointer-events: none;\n right: 16px;\n top: 0;\n left: 16px;\n -webkit-transform: scaleY(0.5);\n transform: scaleY(0.5);\n border-bottom: 2px solid #f5f6f7;\n} */\n\n.quark-picker-mask-top {\n position: absolute;\n top: 0;\n background: linear-gradient(\n to top,\n rgba(255, 255, 255, 0.3),\n rgba(255, 255, 255, 0.8)\n );\n}\n\n:host .quark-picker-mask-bottom {\n position: absolute;\n bottom: 0;\n background: linear-gradient(\n to bottom,\n rgba(255, 255, 255, 0.3),\n rgba(255, 255, 255, 0.8)\n );\n}\n\n:host .quark-picker-current {\n position: absolute;\n top: 21.06667vw;\n height: 13.86667vw;\n width: 100%;\n padding: 0 4.26667vw;\n box-sizing: border-box;\n}\n\n:host .quark-picker-current .quark-picker-current-mask {\n height: 100%;\n background-color: #f7f9fa;\n border-radius: 2.13333vw;\n}\n\n:host .quark-picker-wheel-wrapper {\n display: flex;\n padding: 2.66667vw 4.26667vw;\n width: 100%;\n}\n\n:host .quark-picker-wheel {\n flex: 1;\n width: 1%;\n height: 100%;\n overflow: hidden;\n}\n\n:host .quark-picker-wheel-scroll {\n padding: 0;\n margin-top: 19.73333vw;\n list-style: none;\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n}\n\n:host .quark-picker-wheel-item {\n font-family: PingFangSC-Semibold, PingFang SC;\n font-size: 4.26667vw;\n list-style: none;\n height: 11.73333vw;\n line-height: 11.73333vw;\n overflow: hidden;\n white-space: nowrap;\n color: #242729;\n display: flex;\n justify-content: center;\n align-items: center;\n text-align: center;\n}\n\n:host([bottomhidden]) .quark-picker-picker-content {\n bottom: 0px;\n}\n\n:host([bottomhidden]) .quark-picker-picker-container {\n height: 70.93333vw;\n}\n'})],b);export{v as default};