@wikimedia/codex
Version:
Codex Design System for Wikimedia
2 lines (1 loc) • 5.19 kB
JavaScript
;var V=Object.getOwnPropertySymbols;var T=Object.prototype.hasOwnProperty,z=Object.prototype.propertyIsEnumerable;var M=(e,n)=>{var a={};for(var l in e)T.call(e,l)&&n.indexOf(l)<0&&(a[l]=e[l]);if(e!=null&&V)for(var l of V(e))n.indexOf(l)<0&&z.call(e,l)&&(a[l]=e[l]);return a};var w=(e,n,a)=>new Promise((l,r)=>{var s=u=>{try{p(a.next(u))}catch(i){r(i)}},f=u=>{try{p(a.throw(u))}catch(i){r(i)}},p=u=>u.done?l(u.value):Promise.resolve(u.value).then(s,f);p((a=a.apply(e,n)).next())});const t=require("vue"),E=require("./CdxChipInput.cjs"),H=require("./CdxMenu.cjs"),P=require("./useFieldData.cjs"),j=require("./useFloatingMenu.cjs"),B=require("./useModelWrapper.cjs"),G=require("./useOptionalModelWrapper.js"),J=require("./useSplitAttributes.cjs"),k=require("./constants.js"),Q=require("./_plugin-vue_export-helper.js"),X=k.makeStringTypeValidator(k.ValidationStatusTypes),Y=t.defineComponent({name:"CdxMultiselectLookup",components:{CdxChipInput:E,CdxMenu:H},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}},emits:["update:input-chips","update:selected","update:input-value","chip-click","load-more","input","change","focus","blur"],setup:(e,{emit:n,attrs:a,slots:l})=>{const r=t.ref(),s=t.ref(),f=t.useId(),p=t.computed(()=>{var o,d;return(d=(o=s.value)==null?void 0:o.getHighlightedMenuItem())==null?void 0:d.id}),u=t.ref(!1),i=t.ref(!1),h=t.ref(!1);t.provide(k.AllowArbitraryKey,t.ref(!1));const{computedDisabled:I,computedStatus:W}=P(t.toRef(e,"disabled"),t.toRef(e,"status")),A=t.computed(()=>({"cdx-multiselect-lookup--disabled":I.value,"cdx-multiselect-lookup--pending":u.value})),{rootClasses:R,rootStyle:$,otherAttrs:U}=J(a,A);j(r,s);const y=B(t.toRef(e,"selected"),n,"update:selected"),m=B(t.toRef(e,"inputChips"),n,"update:input-chips"),F=t.ref(""),g=G.useOptionalModelWrapper(F,t.toRef(e,"inputValue"),n,"update:input-value"),C=t.computed(()=>g.value.toString().length>0&&l["no-results"]);function K(o){return w(this,null,function*(){yield t.nextTick(),u.value=o!==null&&o!=="",n("input",o)})}function N(o){h.value=!0,(e.menuItems.length>0||C.value)&&(i.value=!0),n("focus",o)}function O(o){h.value=!1,i.value=!1,n("blur",o)}function D(o){!s.value||I.value||e.menuItems.length===0&&!C.value||o.key===" "||s.value.delegateKeyNavigation(o)}return t.watch(t.toRef(e,"selected"),o=>{const d=o.filter(v=>m.value.find(c=>v===c.value)===void 0);d.length>0&&(d.forEach(v=>{var S;const c=(S=s.value)==null?void 0:S.getComputedMenuItems().find(q=>q.value===v);if(c){const b=c,{id:q}=b,L=M(b,["id"]);m.value.push(L)}}),e.keepInputOnSelection||(g.value="",n("input",""))),m.value=m.value.filter(v=>o.find(c=>v.value===c)!==void 0)}),t.watch(t.toRef(e,"inputChips"),o=>{o.length<y.value.length&&(y.value=o.map(d=>d.value))}),t.watch(t.toRef(e,"menuItems"),o=>{o.length===0&&!C.value?i.value=!1:h.value&&u.value&&(i.value=!0),u.value=!1}),{chipInput:r,menu:s,menuId:f,highlightedId:p,expanded:i,computedDisabled:I,computedStatus:W,rootClasses:R,rootStyle:$,otherAttrs:U,selectedWrapper:y,inputChipsWrapper:m,computedInputValue:g,onUpdateInputValue:K,onInputBlur:O,onInputFocus:N,onKeydown:D}}});function Z(e,n,a,l,r,s){const f=t.resolveComponent("cdx-chip-input"),p=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(f,t.mergeProps({ref:"chipInput","input-chips":e.inputChipsWrapper,"onUpdate:inputChips":n[0]||(n[0]=u=>e.inputChipsWrapper=u),"input-value":e.computedInputValue,"onUpdate:inputValue":n[1]||(n[1]=u=>e.computedInputValue=u)},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]=u=>e.$emit("chip-click",u))}),null,16,["input-chips","input-value","aria-controls","aria-expanded","aria-activedescendant","separate-input","readonly","disabled","status","onUpdate:inputValue","onFocus","onBlur","onKeydown"]),t.createVNode(p,t.mergeProps({id:e.menuId,ref:"menu",selected:e.selectedWrapper,"onUpdate:selected":n[3]||(n[3]=u=>e.selectedWrapper=u),expanded:e.expanded,"onUpdate:expanded":n[4]||(n[4]=u=>e.expanded=u),"menu-items":e.menuItems},e.menuConfig,{onLoadMore:n[5]||(n[5]=u=>e.$emit("load-more"))}),{default:t.withCtx(({menuItem:u})=>[t.renderSlot(e.$slots,"menu-item",{menuItem:u})]),"no-results":t.withCtx(()=>[t.renderSlot(e.$slots,"no-results")]),_:3},16,["id","selected","expanded","menu-items"])],6)}const x=Q._export_sfc(Y,[["render",Z]]);module.exports=x;