UNPKG

@aotearoan/neon

Version:

Neon is a lightweight design library of Vue 3 components with minimal dependencies.

3 lines (2 loc) 2.7 kB
"use strict";const u=require("vue"),g=require("../../../common/enums/NeonFunctionalColor.cjs.js"),q=require("../../../common/enums/NeonSize.cjs.js"),S=require("../../../common/enums/NeonInputMode.cjs.js"),F=require("../button/NeonButton.vue.cjs.js"),B=require("../field-group/NeonFieldGroup.vue.cjs.js"),x=require("../input/NeonInput.vue.cjs.js"),s=require("../../../common/utils/NeonNumberUtils.cjs.js"),M=u.defineComponent({name:"NeonNumber",components:{NeonButton:F,NeonFieldGroup:B,NeonInput:x},props:{modelValue:{type:Number,default:null},min:{type:Number,required:!1},max:{type:Number,required:!1},step:{type:Number,required:!1},color:{type:String,default:g.NeonFunctionalColor.LowContrast},size:{type:String,default:q.NeonSize.Medium},locale:{type:String,default:null},placeholder:{type:String,default:null},disabled:{type:Boolean,default:!1},editable:{type:Boolean,default:!0},spinButtons:{type:Boolean,default:!1},percentage:{type:Boolean,default:!1},decimals:{type:Number,required:!1},valueTemplate:{type:String,required:!1},inputmode:{type:String,default:S.NeonInputMode.Numeric},incrementLabel:{type:String,default:"Increment"},decrementLabel:{type:String,default:"Decrement"}},emits:["update:modelValue"],setup(e,{emit:f}){const N=u.useAttrs(),o=u.ref(!1),r=t=>{e.disabled||f("update:modelValue",t)},v=u.computed(()=>{const{onBlur:t,onFocus:n,...m}=N;return m}),V=t=>{const n=s.NeonNumberUtils.parseNumber(t),m=t!==""&&t!==null?Math.max(Math.min(n,e.max??Number.MAX_SAFE_INTEGER),e.min??Number.MIN_SAFE_INTEGER):null;(m===null||!isNaN(n))&&r(m)},l=u.computed(()=>e.decimals??(e.percentage?0:void 0)),a=u.computed(()=>e.percentage&&l.value!==void 0?l.value+2:l.value),c=u.computed(()=>{const t=e.modelValue!==null?+e.modelValue:e.min||0;return a.value!==void 0?Number(t.toFixed(a.value)):t}),b=u.computed(()=>e.modelValue!==null&&(e.valueTemplate!==void 0||l.value!==void 0||e.percentage!==void 0)?s.NeonNumberUtils.formatNumber(e.modelValue,{decimals:l.value,format:e.valueTemplate,percentage:e.percentage},e.locale):e.modelValue),d=u.computed(()=>{var t;return a.value?(t=e.modelValue)==null?void 0:t.toFixed(a.value):e.modelValue}),y=u.computed(()=>o.value?d.value?`${d.value}`:"":b.value),i=u.computed(()=>e.step??(e.percentage?.01:1));return{focus:o,sanitizedAttributes:v,computedDecimals:l,computedRawDecimals:a,computedValue:c,computedStep:i,displayValue:y,valueChanged:V,increment:()=>{const t=c.value+i.value,n=e.max!==void 0?Math.min(e.max,t):t;n!==e.modelValue&&r(n)},decrement:()=>{const t=c.value-i.value,n=e.min!==void 0?Math.max(e.min,t):t;n!==e.modelValue&&r(n)},onFocus:()=>o.value=!0,onBlur:()=>o.value=!1}}});module.exports=M; //# sourceMappingURL=NeonNumber.cjs.js.map