quarkd
Version:
Mobile UI Components built on Web Components.
2 lines (1 loc) • 6.72 kB
JavaScript
import{_ as e,a as t}from"../typeof.js";import{_ as n,a as r,b as i,c as a,P as o,H as u,d as p,N as s,O as l,B as c}from"../index2.js";import{_ as d}from"../defineProperty.js";import{c as h}from"../index3.js";function v(e){var t=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(e){return!1}}();return function(){var i,a=n(e);if(t){var o=n(this).constructor;i=Reflect.construct(a,arguments,o)}else i=a.apply(this,arguments);return r(this,i)}}var f=function(n){i(p,u);var r=v(p);function p(){var t;e(this,p);for(var n=arguments.length,i=new Array(n),u=0;u<n;u++)i[u]=arguments[u];return t=r.call.apply(r,[this].concat(i)),d(a(t),"value",0),d(a(t),"min",void 0),d(a(t),"max",void 0),d(a(t),"interger",!1),d(a(t),"disabled",!1),d(a(t),"decimallength",void 0),d(a(t),"steps",1),d(a(t),"name",""),d(a(t),"cacheValue",0),d(a(t),"inputRef",o()),d(a(t),"miniRef",o()),d(a(t),"plusRef",o()),d(a(t),"handlePlusClick",(function(e){e.stopPropagation(),t.$emit("plus");var n=t.inputRef.current.value;t.max&&n<t.max||null===t.max?(t.inputRef.current.value=Number(t.inputRef.current.value)+t.steps,t.dispatchChange(t.inputRef.current.value)):t.max&&n>=t.max&&t.$emit("overlimit",{detail:{action:"plus"}})})),d(a(t),"handleMinusClick",(function(e){e.stopPropagation(),t.$emit("minus");var n=t.inputRef.current.value;t.min&&n>t.min||null===t.min?(t.inputRef.current.value=Number(t.inputRef.current.value)-t.steps,t.dispatchChange(t.inputRef.current.value)):t.min&&n<=t.min&&t.$emit("overlimit",{detail:{action:"minus"}})})),d(a(t),"handleInputInput",(function(e){e.stopPropagation();var n=t.inputRef.current,r=e.target.value;console.warn(r,n.value),(t.interger?/^-?\d*$/:/^-?\d*\.{0,1}\d*$/).test(r)?(n.value=r,t.dispatchChange(r)):n.value=t.value,t.cacheValue=r})),d(a(t),"handleBlur",(function(e){t.formatData(e.target.value),t.dispatchChange(e.target.value)})),d(a(t),"miniNeedDisable",(function(){var e=Number(t.cacheValue);return!!t.disabled||!!(t.min&&e<=t.min)})),d(a(t),"plusNeedDisable",(function(){var e=Number(t.cacheValue);return!!t.disabled||!!(t.max&&e>=t.max)})),t}return t(p,[{key:"componentDidMount",value:function(){this.inputRef.current.value=this.value,this.formatData(this.value)}},{key:"dispatchChange",value:function(e){this.cacheValue=e,this.$emit("change",{detail:{value:e,name:this.name||""}})}},{key:"formatData",value:function(e){return this.min&&this.min>e?(this.inputRef.current.value=this.min,void(this.cacheValue=this.inputRef.current.value)):this.max&&this.max<=e?(this.inputRef.current.value=this.max,void(this.cacheValue=this.inputRef.current.value)):void(this.decimallength&&(this.inputRef.current.value=Number(e.toFixed(this.decimallength)),this.cacheValue=this.inputRef.current.value))}},{key:"render",value:function(){var e=h("quark-stepper-minus",{"quark-stepper-disabled":this.miniNeedDisable()}),t=h("quark-stepper-plus",{"quark-stepper-disabled":this.plusNeedDisable()}),n=h("quark-stepper-input",{"quark-stepper-disabled":this.disabled});return u.h("div",{class:"quark-stepper-container",id:"stepper",part:"root"},u.h("button",{type:"button",part:"mini",class:e,onClick:this.handleMinusClick,ref:this.miniRef}),u.h("input",{part:"input",type:"text",class:n,onInput:this.handleInputInput,onBlur:this.handleBlur,min:this.min,max:this.max,ref:this.inputRef,disabled:this.disabled}),u.h("button",{type:"button",part:"plus",class:t,onClick:this.handlePlusClick,ref:this.plusRef}))}}]),p}();p([s({type:Number})],f.prototype,"value",void 0),p([s({type:Number})],f.prototype,"min",void 0),p([s({type:Number})],f.prototype,"max",void 0),p([s({type:Boolean})],f.prototype,"interger",void 0),p([s({type:Boolean})],f.prototype,"disabled",void 0),p([s({type:Number})],f.prototype,"decimallength",void 0),p([s({type:Number})],f.prototype,"steps",void 0),p([s()],f.prototype,"name",void 0),p([l()],f.prototype,"cacheValue",void 0);var m=f=p([c({tag:"quark-stepper",style:':host .quark-stepper-container {\n display: flex;\n}\n\n:host .quark-stepper-minus {\n position: relative;\n width: var(--stepper-button-width, 7.46667vw);\n height: var(--stepper-button-height, 7.46667vw);\n margin: 0;\n padding: 0;\n color: var(--stepper-minus-color, #242729);\n vertical-align: middle;\n background-color: var(--stepper-minus-background-color, #f2f3f5);\n border: var(--stepper-button-border-width, 0) solid\n var(--stepper-minus-border-color, inherit);\n border-radius: var(--stepper-button-border-radius, 0);\n cursor: pointer;\n}\n\n:host .quark-stepper-minus::before {\n position: absolute;\n top: 50%;\n left: 50%;\n background-color: currentColor;\n transform: translate(-50%);\n content: "";\n width: 45%;\n height: 1px;\n}\n\n:host .quark-stepper-input {\n width: var(--stepper-input-width, 8.53333vw);\n height: var(--stepper-input-height, 7.46667vw);\n margin: 0 0.53333vw;\n padding: 0;\n color: var(--stepper-input-text-color, #242729);\n font-size: var(--stepper-input-font-size, 3.73333vw);\n line-height: var(--stepper-input-line-height, normal);\n text-align: center;\n vertical-align: middle;\n background-color: var(--stepper-input-background-color, #f2f3f5);\n border: var(--stepper-input-border-width, 1) solid\n var(--stepper-input-border-color, inherit);\n border-radius: var(--stepper-button-border-radius, 0);\n border-radius: var(--stepper-input-border-radius, 0);\n -webkit-appearance: none;\n outline: none;\n}\n\n:host .quark-stepper-plus {\n position: relative;\n width: var(--stepper-button-width, 7.46667vw);\n height: var(--stepper-button-height, 7.46667vw);\n margin: 0;\n padding: 0;\n color: var(--stepper-plus-color, #242729);\n vertical-align: middle;\n background-color: var(--stepper-plus-background-color, #f2f3f5);\n border: var(--stepper-button-border-width, 0) solid\n var(--stepper-plus-border-color, inherit);\n border-radius: var(--stepper-button-border-radius, 0);\n cursor: pointer;\n}\n\n:host .quark-stepper-plus::before {\n position: absolute;\n top: 50%;\n left: 50%;\n background-color: currentColor;\n transform: translate(-50%);\n content: "";\n width: 45%;\n height: 1px;\n}\n\n:host .quark-stepper-plus::after {\n position: absolute;\n top: 50%;\n left: 50%;\n background-color: currentColor;\n transform: translate(0, -50%);\n content: "";\n width: 1px;\n height: 45%;\n}\n\n:host .quark-stepper-disabled {\n color: var(--stepper-button-disabled-color, #c8c9cc);\n background-color: #f7f8fa;\n cursor: not-allowed;\n pointer-events: none;\n user-select: none;\n}\n'})],f);export{m as default};