@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")):typeof define=="function"&&define.amd?define(["exports","vue","../common/index.umd.js","../number-spinner/index.umd.js"],t):(x=typeof globalThis<"u"?globalThis:x||self,t(x["input-group"]={},x.Vue,x.common,x.numberSpinner))})(this,function(x,t,I,N){"use strict";const O={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||void 0,default:void 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},focusOnCreated:{type:Boolean,default:!1},selectOnCreated:{type:Boolean,default:!1},updateOn:{type:String,default:"blur"},formatValidation:{type:Object,default:{}}};function A(e,n){const l=t.ref(e.groupText),a=t.computed(()=>e.showButtonWhenDisabled&&(e.readonly||e.disabled)),o=t.computed(()=>e.enableClear||!!e.groupText);return{appendedButtonClass:t.computed(()=>({"input-group-append":!0,"append-force-show":a.value})),appendedContent:l,shouldShowAppendedButton:o}}function j(e,n,l,a){const{appendedContent:o}=a,i=t.ref(e.enableViewPassword),c=t.computed(()=>e.type==="password"),f='<span class="f-icon f-icon-eye" style="color: rgb(56, 143, 255);"></span>',s='<span class="f-icon f-icon-eye"></span>',r=t.ref(!1);t.watch(()=>[e.readonly,e.disabled],([y,g])=>{c.value&&(l.value=y||g?"password":l.value,o.value=y||g?s:o.value)});function b(){return r.value=!r.value,l.value=r.value?"text":"password",o.value=r.value?f:s,!1}function d(){l.value=c.value?"password":"text",o.value=c.value?i.value?s:"":o.value}return d(),{isPassword:c,onClickAppendedButton:b}}function L(e,n,l){const a=t.ref(),{onBlurTextBox:o,onFocusTextBox:i,onInput:c,onKeyDown:f,textBoxValue:s}=l,r=t.computed(()=>e.disabled||e.readonly||!e.editable?"":e.placeholder),b=t.computed(()=>({"form-control":!0,"f-utils-fill":!0})),d=t.computed(()=>({"text-align":e.textAlign}));function y(p){p.stopPropagation()}function g(){var p,w;e.selectOnCreated&&((p=a.value)==null||p.select()),e.focusOnCreated&&((w=a.value)==null||w.focus({preventScroll:!0}))}async function m(p){i(p),await t.nextTick,g()}return t.onMounted(async()=>{await t.nextTick,g()}),()=>t.createVNode("input",{ref:a,class:b.value,style:d.value,type:"text",value:s.value,disabled:e.disabled,readonly:e.readonly||!e.editable,placeholder:r.value,onBlur:o,onChange:y,onFocus:m,onInput:c,onKeydown:f},null)}function F(e,n,l){const{canDownward:a,canUpward:o,onClickDownButton:i,onClickUpButton:c}=l,f=t.computed(()=>({"input-group-append":!0,"btn-group":!0,"btn-group-number":!0})),s=t.computed(()=>({btn:!0,"btn-secondary":!0,"btn-number-flag":!0})),r=t.computed(()=>({cursor:o()?"pointer":"not-allowed","margin-left":0})),b=t.computed(()=>({cursor:a()?"pointer":"not-allowed","margin-left":0}));return()=>t.createVNode("div",{class:f.value},[t.createVNode("button",{class:s.value,style:r.value,onClick:c,disabled:!o()},[t.createVNode("span",{class:"f-icon f-icon-arrow-chevron-up number-arrow-chevron",style:"cursor: inherit"},null)]),t.createVNode("button",{class:s.value,style:b.value,onClick:i,disabled:!a()},[t.createVNode("span",{class:"f-icon f-icon-arrow-chevron-down number-arrow-chevron",style:"cursor: inherit"},null)])])}function R(e,n){const l=N.useNumber(e,n),a=N.useFormat(e,n,l),o=N.useSpinner(e,n,a,l),i=N.useTextBox(e,n,a,l,o),c=F(e,n,o),{displayValue:f,modelValue:s,getRealValue:r}=l,b=L(e,n,i),{format:d}=a,{isFocus:y}=i,g=t.computed(()=>!e.disabled&&!e.readonly);return t.onMounted(()=>{const m=r(e.modelValue);f.value=d(m)}),t.watch(()=>[e.value],([m])=>{const p=r(m);s.value=p,f.value=d(p)}),t.watch(()=>[e.modelValue],([m])=>{m!==s.value&&(s.value=m,!y.value&&(f.value=d(r(m))))}),t.watch(()=>[e.precision,e.useThousands,e.prefix,e.suffix,e.showZero],()=>{f.value=d(s.value)}),()=>t.createVNode("div",{class:"input-group  flex-row f-cmp-number-spinner"},[b(),g.value&&c()])}function D(e,n,l,a){const o=t.ref(),{inputGroupClass:i,onBlur:c,onFocus:f}=a,{clearButtonClass:s,clearButtonStyle:r}=l,b=t.computed(()=>e.maxLength?e.maxLength:e.modelValue?e.modelValue.length:0),d=h=>{var B,u;h.stopPropagation(),n.emit("update:modelValue",(B=h.target)==null?void 0:B.value),n.emit("valueChange",(u=h.target)==null?void 0:u.value)},y=t.computed(()=>({"form-control":!0,"h-100":e.autoHeight})),g=t.computed(()=>e.enableClear&&!e.readonly&&!e.disabled),m=t.computed(()=>e.disabled||e.readonly?"":e.placeholder),p=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 h={resize:"none","padding-right":"15px"};return e.rows>2?{height:"auto",...h}:h}),C=h=>{h.stopPropagation(),o.value.value="",n.emit("update:modelValue",""),n.emit("valueChange","")};function T(){return t.withDirectives(t.createVNode("textarea",{class:y.value,id:e.id,"onUpdate:modelValue":h=>e.modelValue=h,ref:o,minlength:e.minLength,maxlength:e.maxLength?e.maxLength:null,tabindex:e.tabIndex,disabled:e.disabled,readonly:e.readonly,autocomplete:e.autocomplete,placeholder:m.value,autofocus:e.autofocus,rows:e.rows,onInput:d,onFocus:f,onBlur:c,style:w.value},null),[[t.vModelText,e.modelValue]])}function v(){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}/${b.value}`])}function V(){return g.value&&t.createVNode("span",{id:"clearIcon",class:s.value,style:p.value,onClick:h=>C(h)},[t.createVNode("i",{class:"f-icon modal_close",style:"font-size:8px;color:#fff"},null)])}return{renderTextarea:T,renderCount:v,renderClear:V}}function G(e,n,l,a){const o=t.ref(),i=t.ref(e.autocomplete),c=t.ref(e.enableTitle),{isPassword:f}=l,s=t.ref(e.minLength),r=t.ref(e.maxLength),b=t.ref(e.tabIndex),{disabled:d,displayText:y,inputType:g,onBlur:m,onFocus:p,onInput:w,onClick:C,onKeydown:T,onKeyup:v,onMousedown:V,onMouseup:h,onTextBoxValueChange:B,readonly:u,placeholder:M,textBoxClass:S,textBoxTitle:_}=a;return t.onMounted(()=>{var E,P;e.selectOnCreated&&((E=o.value)==null||E.select()),e.focusOnCreated&&((P=o.value)==null||P.focus({preventScroll:!0}))}),()=>t.createVNode("input",{ref:o,name:"input-group-value",autocomplete:i.value,class:S.value,disabled:d==null?void 0:d.value,maxlength:r.value,minlength:s.value,placeholder:M.value,readonly:u==null?void 0:u.value,tabindex:b.value,title:c.value&&!f.value?_.value:"",type:g.value,value:y==null?void 0:y.value,onBlur:m,onClick:C,onChange:B,onFocus:p,onInput:w,onKeydown:T,onKeyup:v,onMousedown:V,onMouseup:h},null)}function H(e,n){const l=t.computed(()=>e.useExtendInfo&&!!e.extendInfo),a=t.reactive({content:e.extendInfo});function o(){n.emit("updateExtendInfo")}return()=>l.value&&t.withDirectives(t.createVNode("span",{class:"input-group-before-tips",onMouseenter:o},[t.createVNode("i",{class:"f-icon f-icon-info-circle"},null),t.createVNode("b",{class:"tips-arrow"},null)]),[[t.resolveDirective("tooltip"),a]])}function K(e,n,l,a,o){const{appendedButtonClass:i,appendedContent:c}=l,f=t.computed(()=>e.showButtonWhenDisabled&&(!e.editable||!e.readonly)&&!e.disabled),s=t.computed(()=>c.value&&!n.slots.groupTextTemplate),r=t.computed(()=>!!n.slots.groupTextTemplate),{clearButtonClass:b,clearButtonStyle:d,onClearValue:y,shouldShowClearButton:g}=a;function m(){return t.createVNode("span",{id:"clearIcon",class:b.value,style:d.value,onClick:u=>y(u)},[t.createVNode("i",{class:"f-icon modal_close"},null)])}function p(u){n.emit("iconMouseEnter",u)}function w(u){n.emit("iconMouseLeave",u)}function C(u){f.value&&n.emit("clickHandle",{originalEvent:u}),u.stopPropagation()}const T=e.type==="password"?o.onClickAppendedButton:C;function v(){return t.createVNode("span",{class:"input-group-text",onMouseenter:u=>p(u),onMouseleave:u=>w(u),innerHTML:c.value,onClick:u=>T(u)},null)}function V(){return n.slots.groupTextTemplate&&n.slots.groupTextTemplate()}function h(){return s.value?v:r.value?V:""}const B=h();return()=>t.createVNode("div",{class:i.value},[g.value&&m(),B&&B()])}const k=t.defineComponent({name:"FInputGroup",props:O,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(),a=t.ref(e.modelValue),o=t.ref(e.modelValue),i=I.useTextBox(e,n,a,o,l),{inputGroupClass:c,inputType:f,inputGroupStyle:s}=i,r=A(e),{shouldShowAppendedButton:b}=r,d=I.useClear(e,n,i),{onMouseEnter:y,onMouseLeave:g}=d,m=j(e,n,f,r),p=R(e,n),{renderTextarea:w,renderCount:C,renderClear:T}=D(e,n,d,i),v=G(e,n,m,i),V=K(e,n,r,d,m),h=H(e,n),B=t.computed(()=>e.type==="number"),u=t.computed(()=>e.type==="textarea");t.watch(()=>[e.value],([S])=>{a.value=S,o.value=S}),t.watch(()=>[e.modelValue],([S])=>{a.value=S,o.value=S}),t.onMounted(()=>{e.value&&(a.value=e.value,o.value=e.value)});const M=()=>t.createVNode("div",{ref:l,id:e.id,class:c.value,style:s.value,onMouseenter:y,onMouseleave:g},[B.value?p():u.value?w():t.createVNode(t.Fragment,null,[h(),v()]),!u.value&&b.value&&V(),u.value&&T(),u.value&&C()]);return()=>M()}}),z=I.withInstall(k);x.FInputGroup=k,x.default=z,x.inputGroupProps=O,Object.defineProperties(x,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});