@farris/ui-vue
Version:
Farris Vue, a Farris Design based Vue3 component library.
2 lines (1 loc) • 10.2 kB
JavaScript
(function(m,B){typeof exports=="object"&&typeof module<"u"?B(exports,require("../common/index.umd.js"),require("vue"),require("bignumber.js"),require("../locale/index.umd.js"),require("../common/index.umd.js/text-box/use-input-expand")):typeof define=="function"&&define.amd?define(["exports","../common/index.umd.js","vue","bignumber.js","../locale/index.umd.js","../common/index.umd.js/text-box/use-input-expand"],B):(m=typeof globalThis<"u"?globalThis:m||self,B(m["number-spinner"]={},m.common,m.Vue,m.BigNumber,m.locale,m.useInputExpand))})(this,function(m,B,u,h,G,H){"use strict";const P={id:String,disabled:{type:Boolean,default:!1},readonly:{type:Boolean,default:!1},editable:{type:Boolean,default:!0},formatter:{type:Function},parser:{type:Function},placeholder:{type:String,default:"请输入数字"},step:{type:Number,default:1},max:{type:[Number,String]},min:{type:[Number,String]},showButton:{type:Boolean,default:!0},useThousands:{type:Boolean,default:!0},textAlign:{type:String,default:"left"},autoDecimal:{type:Boolean,default:!0},nullable:{type:Boolean,default:!1},precision:{type:Number,default:0},prefix:{type:String,default:""},suffix:{type:String,default:""},decimalSeparator:{type:String,default:"."},forcePlaceholder:{Type:Boolean,default:!1},groupSeparator:{type:String,default:","},groupSize:{type:Number,default:3},value:{type:[Number,String],default:""},showZero:{type:Boolean,default:!0},modelValue:{type:[Number,String],default:""},focusOnCreated:{type:Boolean,default:!1},selectOnCreated:{type:Boolean,default:!1},keyboard:{type:Boolean,default:!0},bigNumber:{type:Boolean,default:!1},needValid:{type:Boolean,default:!1},updateOn:{type:String,default:"change"},expandable:{type:Boolean,default:!1},expandMode:{type:String,default:"text"},expandContent:{type:String,default:""},expandDisabled:{type:Boolean,default:!1}};function E(e,d,y,x){const{format:b}=y,{displayValue:g,getRealValue:S,modelValue:o,onNumberValueChanged:f}=x;function n(){const l=new h(o.value||0);return!((e.max||e.max===0)&&!new h(e.max).isNaN()&&l.gte(new h(e.max))&&(o.value||o.value===0))}function w(){const l=new h(o.value||0);return!((e.min||e.min===0)&&!new h(e.min).isNaN()&&l.lte(new h(e.min))&&(o.value||o.value===0))}function t(l){if(e.readonly||e.disabled)return;const C=l==="up"?n:w,F=l==="up"?"plus":"minus";if(C()){const O=new h(o.value||0)[F](Number(e.step)),T=O.toFixed();g.value=b(T),f(S(O))}}function c(){t("up")}function r(){t("down")}function V(l){c()}function p(l){r()}return{canDownward:w,canUpward:n,downward:r,onClickDownButton:p,onClickUpButton:V,upward:c}}function R(e,d,y){const x=u.computed(()=>({prefix:e.prefix,suffix:e.suffix,decimalSeparator:e.decimalSeparator,groupSeparator:e.useThousands?e.groupSeparator:"",groupSize:e.groupSize})),{getValidNumberObject:b,precision:g}=y;function S(n){return n=n==null||n===""?"":String(n),n=n.replace(new RegExp(e.prefix,"g"),"").replace(new RegExp(e.suffix,"g"),"").replace(/,/g,""),e.groupSeparator&&e.groupSeparator!==","&&(n=n.replace(new RegExp(`\\${e.groupSeparator}`,"g"),"")),e.decimalSeparator&&e.decimalSeparator!=="."&&(n=n.replace(new RegExp(`\\${e.decimalSeparator}`,"g"),".")),n}function o(n,w){return e.precision!==null&&e.precision!==void 0?n.toFormat(g.value,w):n.toFormat(w)}function f(n,w=!0){const t=S(n),c=new h(t,10);let r=c;return w&&(r=b(c)),r.valueOf()==="0"&&!e.showZero||r.isNaN()?"":e.formatter?e.formatter(r.toNumber()):o(r,x.value)}return{cleanFormat:S,format:f}}function K(e,d){const y=u.ref(""),x=u.ref(e.modelValue),b=u.computed(()=>Number(e.precision)||0),g=u.ref(e.bigNumber);function S(t){return t.toFixed(b.value)}function o(t){return isNaN(t)||t===null||t===void 0||t===""}function f(t){const c=o(e.max)?null:new h(String(e.max),10),r=o(e.min)?null:new h(String(e.min),10);return c&&t.gt(c)?c:r&&t.lt(r)?r:t}function n(t,c=!0){if(e.parser)return isNaN(Number(t))?e.parser(t):t;let r=new h(t,10);if(c&&(r=f(r)),r.isNaN()){if(e.nullable)return null;if(e.showZero)return 0;if(!c)return null;const p=new h(""+e.min,10),l=new h(""+e.max,10);if(!p.isNaN())r=p;else if(!l.isNaN())r=l;else return 0}return S(r)}function w(t){let c=g.value?t:Number(t);e.nullable&&t===null&&(c=null),c!==e.modelValue&&(d.emit("update:modelValue",c),d.emit("valueChange",c),d.emit("change",c))}return{displayValue:y,getRealValue:n,modelValue:x,isEmpty:o,onNumberValueChanged:w,precision:b,getValidNumberObject:f,toFixed:S}}function I(e,d,y,x,b){const{cleanFormat:g,format:S}=y,{displayValue:o,getRealValue:f,modelValue:n,isEmpty:w,onNumberValueChanged:t,getValidNumberObject:c,toFixed:r}=x,{downward:V,upward:p}=b,l=u.ref(!1),C=u.computed(()=>o.value);function F(a){var v;if(a.stopPropagation(),l.value=!1,e.readonly||e.disabled)return;const i=(v=a.target)==null?void 0:v.value,s=g(i);let N=f(s,e.needValid);e.needValid&&N!=null&&(N=r(c(new h(N,10)))),o.value=S(N,e.needValid),e.updateOn==="blur"&&t(N),d.emit("blur",{event:a,formatted:o.value,value:n.value})}function U(){const a=n.value;if(w(a)||!e.showZero&&a===0)return"";const i=f(a,e.needValid);if(!i&&i!==0)return"";try{const s=new h(i,10);return s.isNaN()||!s.isFinite()?"":s.toFixed()}catch{return""}}function O(a){if(a.stopPropagation(),l.value=!0,e.readonly||e.disabled)return;const i=f(n.value,e.needValid);o.value=U(),d.emit("focus",{event:a,formatted:i,value:n.value})}function T(a){var v;a.stopPropagation();let i=(v=a.target)==null?void 0:v.value;e.nullable||(i=i||0);const s=g(i);let N=f(s,e.needValid);e.updateOn==="change"&&(e.needValid&&(N=r(c(new h(N,10)))),o.value=i,t(N)),d.emit("input",N)}function Q(a){const i=a;return i.value.substring((i==null?void 0:i.selectionStart)||0,(i==null?void 0:i.selectionEnd)||0)}function W(a){const{key:i,keyCode:s,target:N,ctrlKey:v,metaKey:Y,shiftKey:z}=a;if(!N)return;const _=N,j=_.value,$=Number(e.precision),ee=new Set([".","-","%"]),te=Q(N);if(ee.has(i)&&j.includes(i)&&!te.includes(i)||e.precision===0&&[110,190].includes(s)){a.preventDefault();return}const ne=new Set([46,8,9,27,13,110,190,173]),ae=new Set([65,67,86,88]),ue=new Set([...Array.from({length:5},(D,k)=>35+k),189,109]);if(ne.has(s)||ae.has(s)&&(v||Y)||ue.has(s))return;if(!(!z&&(s>=48&&s<=57||s>=96&&s<=105))){a.preventDefault();return}if((z||s<48||s>57)&&(s<96||s>105)&&a.preventDefault(),j.includes(".")&&e.precision){const D=j.indexOf("."),k=j.length-D-1;if((_.selectionStart||0)>D&&k>=$)return a.preventDefault(),!1}}const Z=a=>{var N;let i=(N=a.target)==null?void 0:N.value;e.nullable||(i=i||0);const s=g(i);n.value=f(s)};function X(a){return e.keyboard&&a.key==="ArrowDown"&&(a.preventDefault(),Z(a),V(),a.stopPropagation()),e.keyboard&&a.key==="ArrowUp"&&(a.preventDefault(),Z(a),p(),a.stopPropagation()),W(a)}return{textBoxValue:C,onBlurTextBox:F,onFocusTextBox:O,onInput:T,onKeyDown:X,isFocus:l}}function M(e,d,y){const{canDownward:x,canUpward:b,onClickDownButton:g,onClickUpButton:S}=y,o=u.computed(()=>({"f-cmp-inputgroup":!0,"input-group-append":!0,"btn-group":!0,"btn-group-number":!0})),f=u.computed(()=>({btn:!0,"btn-secondary":!0,"btn-number-flag":!0})),n=u.computed(()=>({cursor:b()?"pointer":"not-allowed","margin-left":0})),w=u.computed(()=>({cursor:x()?"pointer":"not-allowed","margin-left":0}));return()=>u.createVNode("div",{class:o.value},[u.createVNode("button",{class:f.value,style:n.value,onClick:S,disabled:!b()},[u.createVNode("span",{class:"f-icon f-icon-arrow-chevron-up number-arrow-chevron",style:"cursor: inherit"},null)]),u.createVNode("button",{class:f.value,style:w.value,onClick:g,disabled:!x()},[u.createVNode("span",{class:"f-icon f-icon-arrow-chevron-down number-arrow-chevron",style:"cursor: inherit"},null)])])}function q(e){function d(b,g,S){return g===S?G.LocaleService.getLocaleValue(b):g||""}const y=d("numberSpinner.placeholder",e.placeholder,"请输入数字"),x={begin:d("numberSpinner.range.begin",e.beginPlaceholder,"开始数字"),end:d("numberSpinner.range.end",e.endPlaceholder,"结束数字")};return{placeholder:y,range:x}}function A(e,d,y){const x=q(e),b=u.ref(),{onBlurTextBox:g,onFocusTextBox:S,onInput:o,onKeyDown:f,textBoxValue:n}=y,w=u.computed(()=>(e.disabled||e.readonly||!e.editable)&&!e.forcePlaceholder?"":x.placeholder),t=u.computed(()=>({"form-control":!0,"f-utils-fill":!0})),c=u.computed(()=>({"text-align":e.textAlign}));function r(l){l.stopPropagation()}function V(){var l,C;e.selectOnCreated&&((l=b.value)==null||l.select()),e.focusOnCreated&&((C=b.value)==null||C.focus({preventScroll:!0}))}async function p(l){S(l),await u.nextTick,V()}return u.onMounted(async()=>{await u.nextTick,V()}),()=>u.createVNode("input",{ref:b,class:t.value,style:c.value,type:"text",value:n.value,disabled:e.disabled,readonly:e.readonly||!e.editable,placeholder:w.value,onBlur:g,onChange:r,onFocus:p,onInput:o,onKeydown:f,title:n.value},null)}const L=u.defineComponent({name:"FNumberSpinner",props:P,emits:["update:modelValue","valueChange","change","blur","focus","click","input","expandClick"],setup(e,d){const y=K(e,d),x=R(e,d,y),b=E(e,d,x,y),g=I(e,d,x,y,b),S=M(e,d,b),{displayValue:o,modelValue:f,getRealValue:n}=y,w=A(e,d,g),{format:t}=x,{isFocus:c}=g,r=u.computed(()=>!e.disabled&&!e.readonly&&e.showButton&&!B.isMobilePhone()),V=u.computed(()=>({"f-cmp-inputgroup":!0,"input-group":!0,"flex-row":!0,"f-cmp-number-spinner":!0,"f-state-disabled":e.disable,"f-state-readonly":e.readonly&&!e.disable,"f-state-focus":c.value&&!e.readonly&&!e.disable,"spinner-hidden":!r.value}));u.onMounted(()=>{const l=n(e.modelValue,!1);o.value=t(l,!1)}),u.watch(()=>[e.value],([l])=>{const C=n(l,!1);f.value=C,o.value=t(C,!1)}),u.watch(()=>[e.modelValue],([l])=>{l!==f.value&&(f.value=l,!c.value&&(o.value=t(n(l,!1),!1)))}),u.watch(()=>[e.precision,e.useThousands,e.prefix,e.suffix,e.showZero],()=>{o.value=t(f.value,!1)});const{renderExpandContent:p}=H.useInputExpand(e,d);return()=>u.createVNode("div",{class:V.value,id:e.id},[w(),r.value&&S(),p(e.expandMode==="button"?{"padding-left":"8px"}:void 0)])}}),J=B.withInstall(L);m.FNumberSpinner=L,m.default=J,m.getNumberTextBoxRender=A,m.getSpinnerRender=M,m.numberSpinnerProps=P,m.useFormat=R,m.useNumber=K,m.useNumberLocales=q,m.useSpinner=E,m.useTextBox=I,Object.defineProperties(m,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});