@morpheme/autocomplete/dist/autocomplete.js

Morpheme Autocomplete

"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("vue"),n=require("@headlessui/vue"),m=require("@morpheme/icon"),C=require("@morpheme/forms"),k=require("@morpheme/badge");const B={class:"autocomplete-body"},N={class:"autocomplete-clearable"},g=["disabled"],w={key:0,class:"autocomplete-empty"},E={key:0,class:"autocomplete-item-selected"},T={key:1,class:"autocomplete-hint"},v=e.defineComponent({__name:"VAutocomplete",props:{modelValue:{default:void 0},searchBy:{default:"text"},displayText:{default:"text"},placeholder:{default:"Search..."},label:{default:""},items:{default:()=>[]},name:{default:""},rules:{default:""},notFoundText:{},noDataText:{default:"No data."},clearable:{type:Boolean,default:!1},errorClass:{default:"autocomplete-error"},wrapperClass:{default:""},validationMode:{default:"aggressive"},disabled:{type:Boolean},hideError:{type:Boolean},hint:{},shadow:{type:Boolean},readonly:{type:Boolean},error:{type:Boolean},transition:{default:"fade"}},emits:["update:modelValue","update:query","clear"],setup(y,{emit:p}){const s=y,{errorMessage:l,uncontrolledValue:u,clear:f}=C.useFormValue(s,p),{items:b}=e.toRefs(s),i=e.ref("");e.watch(i,o=>p("update:query",o));const h=e.computed(()=>i.value===""?b.value:b.value.filter(o=>String(o[s.searchBy]).toLowerCase().replace(/\s+/g,"").includes(i.value.toLowerCase().replace(/\s+/g,"")))),t=()=>{i.value="",f()};return(o,a)=>(e.openBlock(),e.createBlock(e.unref(n.Combobox),{modelValue:e.unref(u),"onUpdate:modelValue":a[1]||(a[1]=r=>e.isRef(u)?u.value=r:null),class:e.normalizeClass(["autocomplete",[o.wrapperClass,{"autocomplete--error":!!e.unref(l)||o.error,"autocomplete--selected":!!e.unref(u),"autocomplete--disabled":o.disabled,"autocomplete--readonly":o.readonly,"autocomplete--shadow":o.shadow}]]),as:"div"},{default:e.withCtx(()=>[o.label?(e.openBlock(),e.createBlock(e.unref(n.ComboboxLabel),{key:0,class:"autocomplete-label"},{default:e.withCtx(()=>[e.createTextVNode(e.toDisplayString(o.label),1)]),_:1})):e.createCommentVNode("",!0),e.createElementVNode("div",B,[e.createElementVNode("div",{class:e.normalizeClass(["autocomplete-field",{"autocomplete-field--error":!!e.unref(l)||o.error}])},[e.createVNode(e.unref(n.ComboboxInput),{class:e.normalizeClass(["autocomplete-input",{"autocomplete-input--selected":!!e.unref(u)}]),"display-value":r=>r?.[o.displayText]||"",placeholder:o.placeholder,disabled:o.disabled,onChange:a[0]||(a[0]=r=>i.value=r.target.value)},null,8,["class","display-value","placeholder","disabled"]),e.createElementVNode("div",N,[o.clearable&&e.unref(u)?(e.openBlock(),e.createElementBlock("button",{key:0,type:"button","aria-label":"Clear",class:"autocomplete-clearable-button",disabled:o.disabled,onClick:t},[e.createVNode(e.unref(m.Icon),{name:"heroicons:x-mark",class:"autocomplete-icon","aria-hidden":"true"})],8,g)):e.createCommentVNode("",!0),e.createVNode(e.unref(n.ComboboxButton),{disabled:o.disabled},{default:e.withCtx(()=>[e.createVNode(e.unref(m.Icon),{name:"heroicons:chevron-down",class:"autocomplete-icon","aria-hidden":"true"})]),_:1},8,["disabled"])])],2),e.createVNode(e.Transition,{name:o.transition},{default:e.withCtx(()=>[e.createVNode(e.unref(n.ComboboxOptions),{class:"autocomplete-options"},{default:e.withCtx(()=>[h.value.length===0?(e.openBlock(),e.createElementBlock("div",w,e.toDisplayString(o.noDataText),1)):e.createCommentVNode("",!0),(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(h.value,(r,d)=>(e.openBlock(),e.createBlock(e.unref(n.ComboboxOption),{key:d,as:"template",value:r},{default:e.withCtx(({selected:c,active:V})=>[e.createElementVNode("li",{class:e.normalizeClass(["autocomplete-item",{"autocomplete-item--active":V,"autocomplete-item--inactive":!V}])},[e.createElementVNode("span",{class:e.normalizeClass(["autocomplete-item-text",{"autocomplete-item-text--selected":c}])},e.toDisplayString(r[o.displayText]),3),c?(e.openBlock(),e.createElementBlock("span",E,[e.createVNode(e.unref(m.Icon),{name:"heroicons:check",class:"autocomplete-item-selected-icon","aria-hidden":"true"})])):e.createCommentVNode("",!0)],2)]),_:2},1032,["value"]))),128))]),_:1})]),_:1},8,["name"])]),o.hint?(e.openBlock(),e.createElementBlock("p",T,[e.renderSlot(o.$slots,"hint",{},()=>[e.createTextVNode(e.toDisplayString(o.hint),1)])])):e.createCommentVNode("",!0),e.unref(l)&&!o.hideError?(e.openBlock(),e.createElementBlock("div",{key:2,class:e.normalizeClass(o.errorClass)},e.toDisplayString(e.unref(l)),3)):e.createCommentVNode("",!0)]),_:3},8,["modelValue","class"]))}}),S={class:"autocomplete-body"},D={key:0,class:"autocomplete-selection"},z={class:"autocomplete-clearable"},$=["disabled"],I={key:0,class:"autocomplete-empty"},P={key:0,class:"autocomplete-item-selected"},q={key:1,class:"autocomplete-hint"},L={key:2,class:"autocomplete-error"},F=e.defineComponent({__name:"Autocomplete",props:{modelValue:{},items:{},multiple:{type:Boolean},itemText:{default:"text"},itemValue:{default:"value"},placeholder:{default:"Search..."},label:{},transition:{default:"dropdown"},error:{type:Boolean},disabled:{type:Boolean},clearable:{type:Boolean},emptyText:{default:"No results."},searchBy:{},displayValue:{},selectionItemProps:{},readonly:{type:Boolean},shadow:{type:Boolean},hint:{},errorMessage:{},hideError:{type:Boolean}},emits:["update:modelValue","clear"],setup(y,{emit:p}){const s=y,l=e.ref(s.modelValue);e.watch(()=>s.modelValue,t=>{l.value=t},{immediate:!0,deep:!0}),e.watch(l,t=>{p("update:modelValue",t)},{deep:!0});const u=e.ref(""),f=e.computed(()=>u.value===""?s.items:s.items.filter(t=>String(t[s.searchBy||s.itemText||s.itemValue]).toLowerCase().replace(/\s+/g,"").includes(u.value.toLowerCase().replace(/\s+/g,"")))),b=()=>{u.value="",l.value=void 0,p("clear")},i=t=>t?.[s.itemText]||"",h=e.computed(()=>s.displayValue??i);return(t,o)=>(e.openBlock(),e.createBlock(e.unref(n.Combobox),{modelValue:l.value,"onUpdate:modelValue":o[1]||(o[1]=a=>l.value=a),as:"div",class:e.normalizeClass(["autocomplete autocomplete-primary",{"autocomplete--error":t.error,"autocomplete--selected":!!l.value,"autocomplete--disabled":t.disabled,"autocomplete--readonly":t.readonly,"autocomplete--shadow":t.shadow}]),multiple:t.multiple},{default:e.withCtx(()=>[t.label?(e.openBlock(),e.createBlock(e.unref(n.ComboboxLabel),{key:0,class:"autocomplete-label"},{default:e.withCtx(()=>[e.createTextVNode(e.toDisplayString(t.label),1)]),_:1})):e.createCommentVNode("",!0),e.createElementVNode("div",S,[e.createElementVNode("div",{class:e.normalizeClass(["autocomplete-field",{"autocomplete-field--error":t.error}])},[e.renderSlot(t.$slots,"selection",e.normalizeProps(e.guardReactiveProps({selected:l.value,multiple:t.multiple,itemValue:t.itemValue,itemText:t.itemText,selectionItemProps:t.selectionItemProps})),()=>[t.multiple&&l.value&&l.value.length>0?(e.openBlock(),e.createElementBlock("div",D,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(l.value,(a,r)=>e.renderSlot(t.$slots,"selection-item",e.normalizeProps(e.mergeProps({key:r},{item:a,idx:r,itemText:t.itemText,itemValue:t.itemValue,remove:()=>l.value?.splice(r,1)})),()=>[e.createVNode(e.unref(k),e.mergeProps({color:"primary",dismissable:"",onDismiss:d=>l.value.splice(r,1)},t.selectionItemProps),{default:e.withCtx(()=>[e.createTextVNode(e.toDisplayString(a[t.itemText]),1)]),_:2},1040,["onDismiss"])])),128))])):e.createCommentVNode("",!0)]),e.createVNode(e.unref(n.ComboboxInput),{class:e.normalizeClass(["autocomplete-input",{"autocomplete-input--selected":!!l.value}]),"display-value":h.value??i,placeholder:t.placeholder,disabled:t.disabled,onChange:o[0]||(o[0]=a=>u.value=a.target.value)},null,8,["class","display-value","placeholder","disabled"]),e.createElementVNode("div",z,[t.clearable&&l.value?(e.openBlock(),e.createElementBlock("button",{key:0,type:"button","aria-label":"Clear",class:"autocomplete-clearable-button",disabled:t.disabled,onClick:b},[e.createVNode(e.unref(m),{name:"heroicons:x-mark",class:"autocomplete-icon","aria-hidden":"true"})],8,$)):e.createCommentVNode("",!0),e.createVNode(e.unref(n.ComboboxButton),{disabled:t.disabled},{default:e.withCtx(()=>[e.createVNode(e.unref(m),{name:"heroicons:chevron-down",class:"autocomplete-icon","aria-hidden":"true"})]),_:1},8,["disabled"])])],2),e.createVNode(e.Transition,{name:t.transition},{default:e.withCtx(()=>[e.createVNode(e.unref(n.ComboboxOptions),{class:"autocomplete-options"},{default:e.withCtx(()=>[f.value.length===0?(e.openBlock(),e.createElementBlock("div",I,e.toDisplayString(t.emptyText),1)):e.createCommentVNode("",!0),(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(f.value,(a,r)=>(e.openBlock(),e.createBlock(e.unref(n.ComboboxOption),{key:r,as:"template",value:a},{default:e.withCtx(({selected:d,active:c})=>[e.renderSlot(t.$slots,"item",e.normalizeProps(e.guardReactiveProps({item:a,active:c,selected:d,itemText:t.itemText,itemValue:t.itemValue})),()=>[e.createElementVNode("li",{class:e.normalizeClass(["autocomplete-item",{"autocomplete-item--active":c,"autocomplete-item--inactive":!c}])},[e.createElementVNode("span",{class:e.normalizeClass(["autocomplete-item-text",{"autocomplete-item-text--selected":d}])},e.toDisplayString(a[t.itemText]),3),d?(e.openBlock(),e.createElementBlock("span",P,[e.createVNode(e.unref(m),{name:"heroicons:check",class:"autocomplete-item-selected-icon","aria-hidden":"true"})])):e.createCommentVNode("",!0)],2)])]),_:2},1032,["value"]))),128))]),_:3})]),_:3},8,["name"])]),t.hint?(e.openBlock(),e.createElementBlock("div",q,[e.renderSlot(t.$slots,"hint",{},()=>[e.createTextVNode(e.toDisplayString(t.hint),1)])])):e.createCommentVNode("",!0),t.error&&!t.hideError?(e.openBlock(),e.createElementBlock("div",L,e.toDisplayString(t.errorMessage),1)):e.createCommentVNode("",!0)]),_:3},8,["modelValue","multiple","class"]))}});exports.Autocomplete=F;exports.VAutocomplete=v;exports.default=v;