@farris/ui-vue/components/input-group/index.umd.cjs

Farris Vue, a Farris Design based Vue3 component library.

(function(y,t){typeof exports=="object"&&typeof module<"u"?t(exports,require("vue"),require("../common/index.umd.js"),require("../number-spinner/index.umd.js"),require("../locale/index.umd.js")):typeof define=="function"&&define.amd?define(["exports","vue","../common/index.umd.js","../number-spinner/index.umd.js","../locale/index.umd.js"],t):(y=typeof globalThis<"u"?globalThis:y||self,t(y["input-group"]={},y.Vue,y.common,y.numberSpinner,y.locale))})(this,function(y,t,M,N,L){"use strict";const P={id:{Type:String,default:""},autocomplete:{Type:String,default:"off"},customClass:{Type:String,default:""},disabled:{Type:Boolean,default:!1},editable:{Type:Boolean,default:!0},enableClear:{Type:Boolean,default:!0},enableTitle:{Type:Boolean,default:!0},enableViewPassword:{Type:Boolean,default:!0},forcePlaceholder:{Type:Boolean,default:!1},groupText:{Type:String,default:""},showType:{Type:String,default:"text"},type:{Type:String,default:"text"},max:{type:[Number,String]},min:{type:[Number,String]},maxLength:{Type:Number||void 0,default:void 0},minLength:{Type:Number||void 0,default:void 0},modelValue:{Type:String||Boolean,default:""},showBorder:{Type:Boolean,default:!0},step:{Type:Number,default:1},placeholder:{Type:String,default:""},precision:{Type:Number,default:0},readonly:{Type:Boolean,default:!1},showButtonWhenDisabled:{Type:Boolean,default:!1},tabIndex:{Type:Number,default:0},textAlign:{Type:String,default:"left"},useExtendInfo:{Type:Boolean,default:!1},extendInfo:{Type:String,default:""},value:{Type:String,default:""},autoHeight:{type:Boolean,default:!1},autofocus:{type:Boolean,default:!1},rows:{type:Number,default:2},showCount:{type:Boolean,default:!1},showZero:{type:Boolean,default:!1},focusOnCreated:{type:Boolean,default:!1},selectOnCreated:{type:Boolean,default:!1},updateOn:{type:String,default:"blur"},formatValidation:{type:Object,default:{}},keyboard:{type:Boolean,default:!0}};function R(e,n){const a=t.ref(e.groupText),u=t.computed(()=>e.showButtonWhenDisabled&&(e.readonly||e.disabled)),l=t.computed(()=>e.type==="password"||e.showType==="password"||e.enableClear||!!e.groupText||u.value);return{appendedButtonClass:t.computed(()=>({"input-group-append":!0,"append-force-show":u.value})),appendedContent:a,shouldShowAppendedButton:l}}function F(e,n,a,u){const{appendedContent:l}=u,r=t.ref(e.enableViewPassword),d=t.computed(()=>e.type==="password"||e.showType==="password"),m='<span class="f-icon f-icon-eye" style="color: rgb(56, 143, 255);"></span>',h='<span class="f-icon f-icon-eye"></span>',i=t.ref(!1);t.watch(()=>[e.readonly,e.disabled],([p,x])=>{d.value&&(a.value=p||x?"password":a.value,l.value=e.readonly||e.disabled?"":r.value?h:"")});function g(){return i.value=!i.value,a.value=i.value?"text":"password",l.value=i.value?m:h,!1}function c(){a.value=d.value?"password":a.value,d.value&&(l.value=e.readonly||e.disabled?"":r.value?h:"")}return c(),{isPassword:d,onClickAppendedButton:g}}function O(e,n){const a=N.useNumber(e,n),u=N.useFormat(e,n,a),l=N.useSpinner(e,n,u,a),r=N.useTextBox(e,n,u,a,l),d=N.getSpinnerRender(e,n,l),{displayValue:m,modelValue:h,getRealValue:i}=a,g=N.getNumberTextBoxRender(e,n,r),{format:c}=u,{isFocus:p}=r,x=t.computed(()=>!e.disabled&&!e.readonly);return t.onMounted(()=>{const f=i(e.modelValue);m.value=c(f)}),t.watch(()=>[e.value],([f])=>{const w=i(f);h.value=w,m.value=c(w)}),t.watch(()=>[e.modelValue],([f])=>{f!==h.value&&(h.value=f,!p.value&&(m.value=c(i(f))))}),t.watch(()=>[e.precision,e.useThousands,e.prefix,e.suffix,e.showZero],()=>{m.value=c(h.value)}),()=>t.createVNode("div",{class:"input-group  flex-row f-cmp-number-spinner",style:"border:none;"},[g(),x.value&&d()])}function j(e){return e?L.LocaleService.getRealPropertyValue(e,"请输入","input-group.placeholder"):""}function G(e,n,a,u){const l=t.ref(),{inputGroupClass:r,onBlur:d,onFocus:m}=u,{clearButtonClass:h,clearButtonStyle:i}=a,g=t.computed(()=>e.maxLength?e.maxLength:e.modelValue?e.modelValue.length:0),c=s=>{var o,I;s.stopPropagation(),n.emit("update:modelValue",(o=s.target)==null?void 0:o.value),n.emit("valueChange",(I=s.target)==null?void 0:I.value)},p=t.computed(()=>({"form-control":!0,"h-100":e.autoHeight})),x=t.computed(()=>e.enableClear&&!e.readonly&&!e.disabled),f=j(e.placeholder),w=t.computed(()=>e.disabled||e.readonly?"":f),v=t.computed(()=>({...i.value,position:"absolute",right:"5px",top:"50%",transform:"translateY(-50%)","background-color":"rgb(199, 207, 221)","border-radius":"100%",width:"16px",height:"16px"})),T=t.computed(()=>{const s={resize:"none","padding-right":"15px"};return e.rows>2?{height:"auto",...s}:s}),b=s=>{s.stopPropagation(),l.value.value="",n.emit("update:modelValue",""),n.emit("valueChange","")};function B(){return t.withDirectives(t.createVNode("textarea",{class:p.value,id:e.id,"onUpdate:modelValue":s=>e.modelValue=s,ref:l,minlength:e.minLength,maxlength:e.maxLength?e.maxLength:null,tabindex:e.tabIndex,disabled:e.disabled,readonly:e.readonly,autocomplete:e.autocomplete,placeholder:w.value,autofocus:e.autofocus,rows:e.rows,onInput:c,onFocus:m,onBlur:d,style:T.value},null),[[t.vModelText,e.modelValue]])}function C(){return e.showCount&&t.createVNode("span",{style:"position: absolute;bottom: 0;right: 5px;z-index:999;font-size:12px"},[`${e.modelValue?e.modelValue.length:0}/${g.value}`])}function V(){return x.value&&t.createVNode("span",{id:"clearIcon",class:h.value,style:v.value,onClick:s=>b(s)},[t.createVNode("i",{class:"f-icon modal_close",style:"font-size:8px;color:#fff"},null)])}return{renderTextarea:B,renderCount:C,renderClear:V}}function D(e,n,a,u){const l=t.ref(),r=t.ref(e.autocomplete),d=t.ref(e.enableTitle),{isPassword:m}=a,h=t.ref(e.minLength),i=t.ref(e.maxLength),g=t.ref(e.tabIndex),{disabled:c,displayText:p,inputType:x,onBlur:f,onFocus:w,onInput:v,onClick:T,onKeydown:b,onKeyup:B,onMousedown:C,onMouseup:V,onTextBoxValueChange:s,readonly:o,placeholder:I,textBoxClass:S,textBoxTitle:z}=u;return t.onMounted(()=>{var k,A;e.selectOnCreated&&((k=l.value)==null||k.select()),e.focusOnCreated&&((A=l.value)==null||A.focus({preventScroll:!0}))}),()=>t.createVNode("input",{id:e.id+"_textbox",ref:l,name:"input-group-value",autocomplete:r.value,class:S.value,disabled:c==null?void 0:c.value,maxlength:i.value,minlength:h.value,placeholder:I.value,readonly:o==null?void 0:o.value,tabindex:g.value,title:d.value&&!m.value?z.value:"",type:x.value,value:p==null?void 0:p.value,onBlur:f,onClick:T,onChange:s,onFocus:w,onInput:v,onKeydown:b,onKeyup:B,onMousedown:C,onMouseup:V},null)}function H(e,n){const a=t.ref(e.extendInfo),u=t.computed(()=>e.useExtendInfo&&!!e.extendInfo),l=t.computed(()=>({content:a.value}));t.watch(()=>e.extendInfo,d=>{a.value=d});function r(){n.emit("updateExtendInfo")}return()=>u.value&&t.withDirectives(t.createVNode("span",{class:"input-group-before-tips",onMouseenter:r},[t.createVNode("i",{class:"f-icon f-icon-info-circle"},null),t.createVNode("b",{class:"tips-arrow"},null)]),[[t.resolveDirective("tooltip"),l.value]])}function _(e,n,a,u,l){const{appendedButtonClass:r,appendedContent:d}=a,m=t.computed(()=>!e.readonly&&!e.disabled),h=t.computed(()=>d.value&&!n.slots.groupTextTemplate),i=t.computed(()=>!!n.slots.groupTextTemplate),{clearButtonClass:g,clearButtonStyle:c,onClearValue:p,shouldShowClearButton:x}=u,f=t.ref(0);t.watch(d,o=>{f.value++});function w(){return t.createVNode("span",{id:"clearIcon",class:g.value,style:c.value,onClick:o=>p(o)},[t.createVNode("i",{class:"f-icon modal_close"},null)])}function v(o){n.emit("iconMouseEnter",o)}function T(o){n.emit("iconMouseLeave",o)}function b(o){m.value&&n.emit("clickHandle",{originalEvent:o}),o.stopPropagation()}const B=e.type==="password"||e.showType==="password"?l.onClickAppendedButton:b;function C(){return t.createVNode(t.Fragment,null,[(e.showButtonWhenDisabled||!e.disabled&&!e.readonly)&&t.createVNode("span",{class:"input-group-text",onMouseenter:o=>v(o),onMouseleave:o=>T(o),innerHTML:d.value,onClick:o=>B(o)},null)])}function V(){return n.slots.groupTextTemplate&&n.slots.groupTextTemplate()}function s(){return h.value?C():i.value?V():""}return()=>t.createVNode("div",{class:r.value,key:"append-button-"+f.value},[x.value&&w(),s()])}const E=t.defineComponent({name:"FInputGroup",props:P,emits:["clear","change","blur","click","clickHandle","focus","input","keydown","keyup","iconMouseEnter","iconMouseLeave","update:modelValue","update:value","updateExtendInfo","valueChange","mousedownEvent","mouseupEvent"],setup(e,n){const a=t.ref(),u=t.ref(e.modelValue),l=t.ref(e.modelValue),r=M.useTextBox(e,n,u,l,a),{inputGroupClass:d,inputType:m,inputGroupStyle:h}=r,i=R(e),{shouldShowAppendedButton:g}=i,c=M.useClear(e,n,r),{onMouseEnter:p,onMouseLeave:x}=c,f=F(e,n,m,i),w=O(e,n),{renderTextarea:v,renderCount:T,renderClear:b}=G(e,n,c,r),B=D(e,n,f,r),C=_(e,n,i,c,f),V=H(e,n),s=t.computed(()=>m.value==="number"),o=t.computed(()=>m.value==="textarea");t.watch(()=>[e.value],([S])=>{u.value=S,l.value=S}),t.watch(()=>[e.modelValue],([S])=>{u.value=S,l.value=S}),t.onMounted(()=>{e.value&&(u.value=e.value,l.value=e.value)});const I=()=>t.createVNode("div",{ref:a,id:e.id,class:d.value,style:h.value,onMouseenter:p,onMouseleave:x},[s.value?w():o.value?v():t.createVNode(t.Fragment,null,[V(),B()]),!o.value&&!s.value&&g.value&&C(),o.value&&b(),o.value&&T()]);return()=>I()}}),q=M.withInstall(E);y.FInputGroup=E,y.default=q,y.inputGroupProps=P,Object.defineProperties(y,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});