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

Farris Vue, a Farris Design based Vue3 component library.

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