@square/maker
Version:
Maker Design System by Square
2 lines • 7.39 kB
JavaScript
!function(e,t){if("object"==typeof exports&&"object"==typeof module)module.exports=t(require("../../components/Button"),require("../../components/Icon"),require("../../components/Theme"),require("../../utils/constants"),require("colord"));else if("function"==typeof define&&define.amd)define(["../../components/Button","../../components/Icon","../../components/Theme","../../utils/constants","colord"],t);else{var a="object"==typeof exports?t(require("../../components/Button"),require("../../components/Icon"),require("../../components/Theme"),require("../../utils/constants"),require("colord")):t(e["../../components/Button"],e["../../components/Icon"],e["../../components/Theme"],e["../../utils/constants"],e.colord);for(var n in a)("object"==typeof exports?exports:e)[n]=a[n]}}(this,(function(e,t,a,n,i){return(()=>{"use strict";var r={914:t=>{t.exports=e},20:e=>{e.exports=t},219:e=>{e.exports=a},30:e=>{e.exports=n},235:e=>{e.exports=i}},l={};function o(e){var t=l[e];if(void 0!==t)return t.exports;var a=l[e]={exports:{}};return r[e](a,a.exports,o),a.exports}o.d=(e,t)=>{for(var a in t)o.o(t,a)&&!o.o(e,a)&&Object.defineProperty(e,a,{enumerable:!0,get:t[a]})},o.o=(e,t)=>Object.prototype.hasOwnProperty.call(e,t),o.r=e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})};var u={};return(()=>{o.r(u),o.d(u,{MStepper:()=>s});var e=o(235),t=o(219),a=o(914),n=o(20),i=o(30);const r={components:{MButton:a.MButton,MIcon:n.MIcon},inject:{theme:{default:(0,t.defaultTheme)(),from:t.MThemeKey}},inheritAttrs:!1,model:{prop:"value",event:"stepper:update"},props:{value:{type:Number,required:!0},min:{type:[Number,String],default:void 0},max:{type:[Number,String],default:void 0},color:{type:String,default:void 0,validator:t=>(0,e.colord)(t).isValid()},textColor:{type:String,default:void 0,validator:t=>(0,e.colord)(t).isValid()},shape:{type:String,default:void 0,validator:e=>["squared","rounded","pill"].includes(e)},ariaLabel:{type:String,default:""},ariaLabelledby:{type:String,default:""},ariaDescribedby:{type:String,default:""},decrementAriaLabel:{type:String,default:"Decrement"},incrementAriaLabel:{type:String,default:"Increment"},inputAriaLabel:{type:String,default:""},inputAriaDescribedby:{type:String,default:""},quantityAriaLabel:{type:String,default:""},ariaLive:{type:String,default:"polite",validator:e=>["off","polite","assertive"].includes(e)}},data:()=>({manualValue:0,isSettingManualValue:!1,lastAnnouncedValue:void 0}),computed:{...(0,t.resolveThemeableProps)("stepper",["color","textColor","shape"]),maxVal(){return Number.parseInt(this.max,i.BASE_TEN)},minVal(){return Number.parseInt(this.min,i.BASE_TEN)},computedInputAriaLabel(){return this.inputAriaLabel||"Enter value between ".concat(this.minVal||"any"," and ").concat(this.maxVal||"any")},computedQuantityAriaLabel(){return this.quantityAriaLabel||"Current value ".concat(this.value,". Click to edit manually.")},screenReaderAnnouncement(){return void 0!==this.lastAnnouncedValue?"Value is ".concat(this.value):""}},watch:{value(e){this.lastAnnouncedValue=e}},methods:{increment(){if(!Number.isNaN(this.maxVal)&&this.value>=this.maxVal)return;this.emitUpdate(this.value+1)},decrement(){if(!Number.isNaN(this.minVal)&&this.value<=this.minVal)return;this.emitUpdate(this.value-1)},triggerManualInput(){this.manualValue=this.value,this.isSettingManualValue=!0,this.$nextTick((()=>{this.$refs.manualInput.focus(),this.$refs.manualInput.select()}))},commitManualValue(e){e.preventDefault(),e.stopPropagation();const t=Math.round(Number.parseFloat(this.manualValue,i.BASE_TEN));this.isSettingManualValue=!1,Number.isNaN(t)||null==t||this.emitUpdate(this.validateManualValueInRange(t))},validateManualValueInRange(e){return!Number.isNaN(this.minVal)&&e<this.minVal?this.minVal:!Number.isNaN(this.maxVal)&&e>this.maxVal?this.maxVal:e},emitUpdate(e){this.$emit("stepper:update",e)},onQuantityKeydown(e){"Enter"===e.key||" "===e.key?(e.preventDefault(),this.triggerManualInput()):"ArrowUp"===e.key?(e.preventDefault(),this.increment()):"ArrowDown"===e.key&&(e.preventDefault(),this.decrement())},cancelManualInput(){this.isSettingManualValue=!1,this.manualValue=this.value}}},l={Stepper:"📚19-10-2FxjUI",Quantity:"📚19-10-2tx_s2",QuantityReadonly:"📚19-10-2doeNm",isManualInput:"📚19-10-2k8LCf",QuantityManualInput:"📚19-10-2UVrFv",Icon:"📚19-10-2bChkb",ScreenReaderOnly:"📚19-10-2__9Id"};const s=function(e,t,a,n,i,r,l,o){var u,s="function"==typeof e?e.options:e;if(t&&(s.render=t,s.staticRenderFns=a,s._compiled=!0),n&&(s.functional=!0),r&&(s._scopeId="data-v-"+r),l?(u=function(e){(e=e||this.$vnode&&this.$vnode.ssrContext||this.parent&&this.parent.$vnode&&this.parent.$vnode.ssrContext)||"undefined"==typeof __VUE_SSR_CONTEXT__||(e=__VUE_SSR_CONTEXT__),i&&i.call(this,e),e&&e._registeredComponents&&e._registeredComponents.add(l)},s._ssrRegister=u):i&&(u=o?function(){i.call(this,(s.functional?this.parent:this).$root.$options.shadowRoot)}:i),u)if(s.functional){s._injectStyles=u;var c=s.render;s.render=function(e,t){return u.call(t),c(e,t)}}else{var d=s.beforeCreate;s.beforeCreate=d?[].concat(d,u):[u]}return{exports:e,options:s}}(r,(function(){var e,t=this,a=t.$createElement,n=t._self._c||a;return n("div",{class:t.$s.Stepper,attrs:{"aria-label":t.ariaLabel,"aria-labelledby":t.ariaLabelledby,"aria-describedby":t.ariaDescribedby,role:"group"}},[n("div",{class:t.$s.ScreenReaderOnly,attrs:{"aria-live":t.ariaLive,"aria-atomic":!0}},[t._v("\n\t\t"+t._s(t.screenReaderAnnouncement)+"\n\t")]),t._v(" "),n("m-button",{attrs:{variant:"fill",size:"small",color:t.resolvedColor,"text-color":t.resolvedTextColor,shape:t.resolvedShape,disabled:t.value===t.minVal,"aria-label":t.decrementAriaLabel},on:{click:t.decrement}},[n("m-icon",{class:t.$s.Icon,attrs:{name:"minus"}})],1),t._v(" "),n("div",{class:t.$s.Quantity},[t.isSettingManualValue?n("input",{directives:[{name:"model",rawName:"v-model",value:t.manualValue,expression:"manualValue"}],ref:"manualInput",class:t.$s.QuantityManualInput,attrs:{min:t.min,max:t.max,"aria-label":t.computedInputAriaLabel,"aria-describedby":t.inputAriaDescribedby,type:"number",inputmode:"numeric"},domProps:{value:t.manualValue},on:{change:t.commitManualValue,blur:t.commitManualValue,keydown:function(e){return!e.type.indexOf("key")&&t._k(e.keyCode,"escape",void 0,e.key,void 0)?null:t.cancelManualInput.apply(null,arguments)},input:function(e){e.target.composing||(t.manualValue=e.target.value)}}}):t._e(),t._v(" "),n("span",{class:[t.$s.QuantityReadonly,(e={},e[t.$s.isManualInput]=t.isSettingManualValue,e)],attrs:{tabindex:"0",role:"spinbutton","aria-valuemin":void 0!==t.min?Number(t.min):void 0,"aria-valuemax":void 0!==t.max?Number(t.max):void 0,"aria-valuenow":t.value,"aria-label":t.computedQuantityAriaLabel},on:{click:t.triggerManualInput,keydown:t.onQuantityKeydown}},[t._v("\n\t\t\t"+t._s(t.isSettingManualValue?t.manualValue:t.value)+"\n\t\t")])]),t._v(" "),n("m-button",{attrs:{variant:"fill",size:"small",color:t.resolvedColor,"text-color":t.resolvedTextColor,shape:t.resolvedShape,disabled:t.value===t.maxVal,"aria-label":t.incrementAriaLabel},on:{click:t.increment}},[n("m-icon",{class:t.$s.Icon,attrs:{name:"plus"}})],1)],1)}),[],!1,(function(e){this.$s=l.locals||l}),null,null).exports})(),u})()}));
//# sourceMappingURL=script.js.map