@fifteen/design-system-vue/dist/cjs/components/form/FAutocomplete.js

Vue 3 (Composition API + Typescript) implementation of the Fifteen Design System

"use strict";const A=require("./FField.js");;/* empty css         */const H=require("./FInput.js");;/* empty css         */const o=require("vue"),v=require("../../vendor/fast-deep-equal/es6/index.js");require("../../vendor/countup.js/dist/countUp.min.js");require("@vueuse/core");require("../../vendor/@fifteen/shared-lib/dist/es/composables/useLocaleFormat.js");require("../../vendor/@fifteen/shared-lib/dist/es/helpers/consoleWatch.js");const S=require("../../vendor/@fifteen/shared-lib/dist/es/utils/text.js"),N=require("../FMenu.js");;/* empty css         */const U=require("../../composables/useFieldWithValidation.js"),W=["innerHTML"],L=o.defineComponent({__name:"FAutocomplete",props:{options:{default:()=>[]},placeholder:{default:""},outlineColor:{default:"neutral--light-3"},placeholderTextColor:{default:"neutral--dark-2"},focusColor:{default:"neutral--light-5"},focusBorderColor:{default:"secondary"},optionsMenuColor:{default:"neutral--light-3"},optionTextColor:{default:"neutral--dark-3"},selectedOptionColor:{default:"primary--light-2"},selectedOptionTextColor:{default:"primary--dark-2"},menuWidth:{default:300},preventSelection:{type:Boolean,default:!1},preventFiltering:{type:Boolean,default:!1},emptyText:{default:"Type something to begin the search"},noMatchText:{default:"No match found for the current input."},loadingText:{default:"Loading..."},clearable:{type:Boolean,default:!1},formatInputFn:{type:[Function,null],default:null},fieldset:{type:Boolean},name:{default:""},label:{default:""},labelTextColor:{default:"neutral--dark-4"},hint:{default:""},hintTextColor:{default:"neutral--dark-4"},hideHint:{type:Boolean},hintIcon:{default:null},modelValue:{default:void 0},disabled:{type:Boolean},loading:{type:Boolean},color:{default:"neutral--light-3"},textColor:{default:"neutral--dark-4"},errorColor:{default:"danger"},validationTrigger:{default:"change"},rules:{type:[Function,Array],default:()=>[]},errorMessage:{default:""},validateOnMount:{type:Boolean,default:!1},borderColor:{default:"secondary"}},emits:["update:modelValue","input","change","focus","blur"],setup(g,{expose:C,emit:b}){const t=g,d=b;C({focus:R});const l=o.ref(),f=o.computed(()=>new RegExp(S.createSearchRegexString(l.value),"ig")),y=o.computed(()=>!l.value||i.value?.label===l.value||t.preventFiltering||t.formatInputFn?t.options:t.options.filter(e=>e.label.match(f.value)));function T(e){return!l.value||!t.options.length?e.label:e.label.replace(f.value,'<span class="FAutocomplete__option__match">$1</span>')}const a=o.ref(!1);o.watch(a,e=>{e||setTimeout(h,25)});function h(){l.value=t.formatInputFn?t.formatInputFn(i.value?.label??"",i.value?.description??""):i.value?.label??""}const{isValid:s,hint:F,value:u}=U.useFieldWithValidation(t,{validateOnMount:t?.validateOnMount,validateOnModelValueUpdate:!0,rules:[B]});function V(e){d("blur",e)}function M(e){d("focus",e),a.value=!0}function O(e){d("change",e)}function q(e){d("input",e,l.value??""),a.value=!0}function B(){return!l.value||!!i.value}const i=o.computed(()=>t.options.find(e=>v(u.value,e.value)));o.watch(u,h,{immediate:!0});const I=o.computed(()=>t.disabled?"neutral--dark-1":s.value?t.hintTextColor:t.errorColor),p=o.ref();function k(){p.value.forceValidation()}o.watch(s,k);const m=o.ref();o.watch(()=>t.modelValue,w,{immediate:!0});function w(e){const n=t.options.find(c=>v(e,c.value));m.value?.selectOption(n??null)}o.watch(l,e=>{e||(u.value=null)});function R(){p.value?.ref?.focus()}return(e,n)=>{const c=H,x=A;return o.openBlock(),o.createBlock(x,o.mergeProps({class:"FAutocomplete"},{name:e.name,label:e.label,labelTextColor:e.labelTextColor,hint:o.unref(F),hideHint:e.hideHint,hintTextColor:o.unref(I),hintIcon:e.hintIcon}),{default:o.withCtx(()=>[o.createVNode(N,{ref_key:"menuRef",ref:m,modelValue:o.unref(a),"onUpdate:modelValue":n[1]||(n[1]=r=>o.isRef(a)?a.value=r:null),"selected-option":o.unref(u),"onUpdate:selectedOption":n[2]||(n[2]=r=>o.isRef(u)?u.value=r:null),options:o.unref(y),width:e.menuWidth,"empty-text":e.loading?e.loadingText:o.unref(l)?e.noMatchText:e.emptyText,color:e.optionsMenuColor||e.color,"text-color":e.optionTextColor,"selected-option-color":e.selectedOptionColor,"selected-option-text-color":e.selectedOptionTextColor,"prevent-selection":e.preventSelection,disabled:e.disabled,loading:e.loading,"prevent-activation":"","prevent-search":"",inanimated:""},{option:o.withCtx(r=>[o.renderSlot(e.$slots,"option",o.mergeProps({class:"FAutocomplete__option"},r),()=>[o.createElementVNode("div",{innerHTML:T(r.option)},null,8,W)])]),activator:o.withCtx(()=>[o.createVNode(c,{ref_key:"inputRef",ref:p,modelValue:o.unref(l),"onUpdate:modelValue":n[0]||(n[0]=r=>o.isRef(l)?l.value=r:null),color:e.color,"border-color":e.borderColor,"text-color":e.textColor,"error-message":e.errorMessage,placeholder:e.placeholder,"placeholder-text-color":e.placeholderTextColor,"outline-color":e.outlineColor,"focus-color":e.focusColor,"focus-border-color":e.focusBorderColor,"error-color":e.errorColor,"validate-on-mount":e.validateOnMount,"validation-trigger":e.validationTrigger,disabled:e.disabled,clearable:e.clearable,rules:[()=>o.unref(s)],loading:e.loading,"hide-hint":"",onFocus:M,onBlur:V,onChange:O,onInput:q},null,8,["modelValue","color","border-color","text-color","error-message","placeholder","placeholder-text-color","outline-color","focus-color","focus-border-color","error-color","validate-on-mount","validation-trigger","disabled","clearable","rules","loading"])]),_:3},8,["modelValue","selected-option","options","width","empty-text","color","text-color","selected-option-color","selected-option-text-color","prevent-selection","disabled","loading"])]),_:3},16)}}});module.exports=L;