@wikimedia/codex/dist/modules/CdxMultiselectLookup.cjs

Codex Design System for Wikimedia

"use strict";var V=Object.getOwnPropertySymbols;var L=Object.prototype.hasOwnProperty,T=Object.prototype.propertyIsEnumerable;var B=(e,n)=>{var i={};for(var a in e)L.call(e,a)&&n.indexOf(a)<0&&(i[a]=e[a]);if(e!=null&&V)for(var a of V(e))n.indexOf(a)<0&&T.call(e,a)&&(i[a]=e[a]);return i};const t=require("vue"),z=require("./CdxChipInput.cjs"),E=require("./CdxMenu.cjs"),H=require("./useFieldData.cjs"),P=require("./useFloatingMenu.cjs"),w=require("./useModelWrapper.cjs"),j=require("./useOptionalModelWrapper.js"),G=require("./useSplitAttributes.cjs"),k=require("./constants.js"),J=require("./_plugin-vue_export-helper.js"),X=k.makeStringTypeValidator(k.ValidationStatusTypes),Y=t.defineComponent({name:"CdxMultiselectLookup",components:{CdxChipInput:z,CdxMenu:E},props:{inputChips:{type:Array,required:!0},selected:{type:[Array],required:!0},menuItems:{type:Array,required:!0},inputValue:{type:[String,Number],default:null},separateInput:{type:Boolean,default:!1},disabled:{type:Boolean,default:!1},readonly:{type:Boolean,default:!1},status:{type:String,default:"default",validator:X},menuConfig:{type:Object,default:()=>({})},keepInputOnSelection:{type:Boolean,default:!1},highlightQuery:{type:Boolean,default:!1}},emits:["update:input-chips","update:selected","update:input-value","chip-click","load-more","input","change","focus","blur"],setup:(e,{emit:n,attrs:i,slots:a})=>{const f=t.ref(),l=t.ref(),m=t.useId(),v=t.computed(()=>{var u,s;return(s=(u=l.value)==null?void 0:u.getHighlightedMenuItem())==null?void 0:s.id}),o=t.ref(!1),p=t.ref(!1),h=t.ref(!1),y=t.ref("");t.provide(k.AllowArbitraryKey,t.ref(!1));const{computedDisabled:g,computedStatus:W}=H(t.toRef(e,"disabled"),t.toRef(e,"status")),A=t.computed(()=>({"cdx-multiselect-lookup--disabled":g.value,"cdx-multiselect-lookup--pending":o.value})),{rootClasses:R,rootStyle:$,otherAttrs:U}=G(i,A);P(f,l);const I=w(t.toRef(e,"selected"),n,"update:selected"),d=w(t.toRef(e,"inputChips"),n,"update:input-chips"),F=t.ref(""),C=j.useOptionalModelWrapper(F,t.toRef(e,"inputValue"),n,"update:input-value"),S=t.computed(()=>C.value.toString().length>0&&a["no-results"]);async function K(u){await t.nextTick(),o.value=u!==null&&u!=="",n("input",u),y.value=u.toString()}function N(u){h.value=!0,(e.menuItems.length>0||S.value)&&(p.value=!0),n("focus",u)}function O(u){h.value=!1,p.value=!1,n("blur",u)}function Q(u){!l.value||g.value||e.menuItems.length===0&&!S.value||u.key===" "||l.value.delegateKeyNavigation(u)}return t.watch(t.toRef(e,"selected"),u=>{const s=u.filter(c=>d.value.find(r=>c===r.value)===void 0);s.length>0&&(s.forEach(c=>{var b;const r=(b=l.value)==null?void 0:b.getComputedMenuItems().find(M=>M.value===c);if(r){const q=r,{id:M}=q,D=B(q,["id"]);d.value.push(D)}}),e.keepInputOnSelection||(C.value="",y.value="",n("input",""))),d.value=d.value.filter(c=>u.find(r=>c.value===r)!==void 0)}),t.watch(t.toRef(e,"inputChips"),u=>{u.length<I.value.length&&(I.value=u.map(s=>s.value))}),t.watch(t.toRef(e,"menuItems"),u=>{u.length===0&&!S.value?p.value=!1:h.value&&o.value&&(p.value=!0),o.value=!1}),{chipInput:f,menu:l,menuId:m,highlightedId:v,searchQuery:y,expanded:p,computedDisabled:g,computedStatus:W,rootClasses:R,rootStyle:$,otherAttrs:U,selectedWrapper:I,inputChipsWrapper:d,computedInputValue:C,onUpdateInputValue:K,onInputBlur:O,onInputFocus:N,onKeydown:Q}}});function Z(e,n,i,a,f,l){const m=t.resolveComponent("cdx-chip-input"),v=t.resolveComponent("cdx-menu");return t.openBlock(),t.createElementBlock("div",{class:t.normalizeClass(["cdx-multiselect-lookup",e.rootClasses]),style:t.normalizeStyle(e.rootStyle)},[t.createVNode(m,t.mergeProps({ref:"chipInput","input-chips":e.inputChipsWrapper,"onUpdate:inputChips":n[0]||(n[0]=o=>e.inputChipsWrapper=o),"input-value":e.computedInputValue,"onUpdate:inputValue":n[1]||(n[1]=o=>e.computedInputValue=o)},e.otherAttrs,{class:"cdx-multiselect-lookup__chip-input",role:"combobox",autocomplete:"off","aria-autocomplete":"list","aria-controls":e.menuId,"aria-expanded":e.expanded,"aria-activedescendant":e.highlightedId,"separate-input":e.separateInput,readonly:e.readonly,disabled:e.computedDisabled,status:e.computedStatus,"onUpdate:inputValue":e.onUpdateInputValue,onFocus:e.onInputFocus,onBlur:e.onInputBlur,onKeydown:e.onKeydown,onChipClick:n[2]||(n[2]=o=>e.$emit("chip-click",o))}),null,16,["input-chips","input-value","aria-controls","aria-expanded","aria-activedescendant","separate-input","readonly","disabled","status","onUpdate:inputValue","onFocus","onBlur","onKeydown"]),t.createVNode(v,t.mergeProps({id:e.menuId,ref:"menu",selected:e.selectedWrapper,"onUpdate:selected":n[3]||(n[3]=o=>e.selectedWrapper=o),expanded:e.expanded,"onUpdate:expanded":n[4]||(n[4]=o=>e.expanded=o),"menu-items":e.menuItems,"search-query":e.highlightQuery?e.searchQuery:""},e.menuConfig,{onLoadMore:n[5]||(n[5]=o=>e.$emit("load-more"))}),{default:t.withCtx(({menuItem:o})=>[t.renderSlot(e.$slots,"menu-item",{menuItem:o})]),"no-results":t.withCtx(()=>[t.renderSlot(e.$slots,"no-results")]),_:3},16,["id","selected","expanded","menu-items","search-query"])],6)}const x=J._export_sfc(Y,[["render",Z]]);module.exports=x;