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

Farris Vue, a Farris Design based Vue3 component library.

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