@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 M=(e,n)=>{var i={};for(var l in e)L.call(e,l)&&n.indexOf(l)<0&&(i[l]=e[l]);if(e!=null&&V)for(var l of V(e))n.indexOf(l)<0&&T.call(e,l)&&(i[l]=e[l]);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"),Q=k.makeStringTypeValidator(k.ValidationStatusTypes),X=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:Q},menuConfig:{type:Object,default:()=>({})},keepInputOnSelection:{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:l})=>{const f=t.ref(),a=t.ref(),m=t.useId(),v=t.computed(()=>{var u,s;return(s=(u=a.value)==null?void 0:u.getHighlightedMenuItem())==null?void 0:s.id}),o=t.ref(!1),d=t.ref(!1),h=t.ref(!1);t.provide(k.AllowArbitraryKey,t.ref(!1));const{computedDisabled:I,computedStatus:B}=H(t.toRef(e,"disabled"),t.toRef(e,"status")),W=t.computed(()=>({"cdx-multiselect-lookup--disabled":I.value,"cdx-multiselect-lookup--pending":o.value})),{rootClasses:A,rootStyle:R,otherAttrs:$}=G(i,W);P(f,a);const y=w(t.toRef(e,"selected"),n,"update:selected"),r=w(t.toRef(e,"inputChips"),n,"update:input-chips"),U=t.ref(""),g=j.useOptionalModelWrapper(U,t.toRef(e,"inputValue"),n,"update:input-value"),C=t.computed(()=>g.value.toString().length>0&&l["no-results"]);async function F(u){await t.nextTick(),o.value=u!==null&&u!=="",n("input",u)}function K(u){h.value=!0,(e.menuItems.length>0||C.value)&&(d.value=!0),n("focus",u)}function N(u){h.value=!1,d.value=!1,n("blur",u)}function O(u){!a.value||I.value||e.menuItems.length===0&&!C.value||u.key===" "||a.value.delegateKeyNavigation(u)}return t.watch(t.toRef(e,"selected"),u=>{const s=u.filter(c=>r.value.find(p=>c===p.value)===void 0);s.length>0&&(s.forEach(c=>{var S;const p=(S=a.value)==null?void 0:S.getComputedMenuItems().find(q=>q.value===c);if(p){const b=p,{id:q}=b,D=M(b,["id"]);r.value.push(D)}}),e.keepInputOnSelection||(g.value="",n("input",""))),r.value=r.value.filter(c=>u.find(p=>c.value===p)!==void 0)}),t.watch(t.toRef(e,"inputChips"),u=>{u.length<y.value.length&&(y.value=u.map(s=>s.value))}),t.watch(t.toRef(e,"menuItems"),u=>{u.length===0&&!C.value?d.value=!1:h.value&&o.value&&(d.value=!0),o.value=!1}),{chipInput:f,menu:a,menuId:m,highlightedId:v,expanded:d,computedDisabled:I,computedStatus:B,rootClasses:A,rootStyle:R,otherAttrs:$,selectedWrapper:y,inputChipsWrapper:r,computedInputValue:g,onUpdateInputValue:F,onInputBlur:N,onInputFocus:K,onKeydown:O}}});function Y(e,n,i,l,f,a){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},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"])],6)}const Z=J._export_sfc(X,[["render",Y]]);module.exports=Z;