@wikimedia/codex/dist/sandbox/assets/data-Cic2Cp98.js

Codex Design System for Wikimedia

var ae=Object.getOwnPropertySymbols;var be=Object.prototype.hasOwnProperty,Ce=Object.prototype.propertyIsEnumerable;var oe=(e,t)=>{var d={};for(var i in e)be.call(e,i)&&t.indexOf(i)<0&&(d[i]=e[i]);if(e!=null&&ae)for(var i of ae(e))t.indexOf(i)<0&&Ce.call(e,i)&&(d[i]=e[i]);return d};import{c as C,d as te,C as Ie,r,ai as Y,a8 as we,af as ke,aW as $e,_ as ne,a as K,aq as Be,Z as x,b as A,o as $,f as ie,g as _,e as N,j as U,h as ee,w as q,k as Se,n as P,m as re,a7 as De,a2 as Ve,aU as pe,t as g,y as de,z as ce,B as E,a6 as ve,V as fe,F as Ae,p as Fe,q as Me,s as ue,aX as le,D as L,E as he,v as Ee,L as Ke,x as se}from"./DemoBaseLayout.vue_vue_type_style_index_0_lang-CWG_HZgx.js";import{C as Qe}from"./TypeaheadSearch.vue_vue_type_style_index_0_lang-guaG63gZ.js";import{C as We}from"./Tooltip-DvwCv0ek.js";import{C as Re,u as Ne}from"./useFloatingMenu-DS6iyMuY.js";function me(e,t,d,i){return C({get:()=>{var c;return(c=t.value)!=null?c:e.value},set:c=>{t.value!==null?d(i||"update:modelValue",c):e.value=c}})}const Ue=te({name:"CdxInputChip",components:{CdxButton:Qe,CdxIcon:Ie},directives:{tooltip:We},props:{icon:{type:[String,Object],default:null},disabled:{type:Boolean,default:!1},readonly:{type:Boolean,default:!1},className:{type:String,default:""}},emits:["remove-chip","click-chip","arrow-left","arrow-right"],setup(e,{emit:t,slots:d}){const i=C(()=>e.disabled?-1:0),c=r(),f=C(()=>({"cdx-input-chip--disabled":e.disabled,"cdx-input-chip--readonly":e.readonly,[e.className]:e.className.length>0})),v=Y("cdx-input-chip-aria-description","Press Enter to edit or Delete to remove"),n=r(),a=r(!1),s=C(()=>a.value&&n.value&&n.value.scrollWidth>n.value.clientWidth?we(d==null?void 0:d.default)[0]:null);ke(()=>{a.value=!0});function B(l){var h;switch(l.key){case"Enter":t("click-chip"),l.preventDefault(),l.stopPropagation();break;case"Escape":(h=c.value)==null||h.blur(),l.preventDefault(),l.stopPropagation();break;case"Backspace":case"Delete":t("remove-chip",l.key),l.preventDefault(),l.stopPropagation();break;case"ArrowLeft":t("arrow-left"),l.preventDefault(),l.stopPropagation();break;case"ArrowRight":t("arrow-right"),l.preventDefault(),l.stopPropagation();break}}return{rootElement:c,rootClasses:f,ariaDescription:v,onKeydown:B,cdxIconClose:$e,tabIndex:i,tooltipContent:s,textElement:n}},methods:{focus(){this.$refs.rootElement.focus()}}}),qe=["tabindex","aria-description"],Pe={ref:"textElement",class:"cdx-input-chip__text"};function Le(e,t,d,i,c,f){const v=K("cdx-icon"),n=K("cdx-button"),a=Be("tooltip");return x(($(),A("div",{ref:"rootElement",class:P(["cdx-input-chip",e.rootClasses]),tabindex:e.tabIndex,role:"option","aria-description":e.ariaDescription,onKeydown:t[1]||(t[1]=(...s)=>e.onKeydown&&e.onKeydown(...s)),onClick:t[2]||(t[2]=s=>e.$emit("click-chip"))},[e.icon?($(),ie(v,{key:0,icon:e.icon,size:"small"},null,8,["icon"])):_("v-if",!0),N("span",Pe,[ee(e.$slots,"default")],512),U(n,{class:"cdx-input-chip__button",weight:"quiet",tabindex:"-1","aria-hidden":"true",disabled:e.disabled||e.readonly,onClick:t[0]||(t[0]=Se(s=>e.$emit("remove-chip","button"),["stop"]))},{default:q(()=>[U(v,{icon:e.cdxIconClose,size:"x-small"},null,8,["icon"])]),_:1},8,["disabled"])],42,qe)),[[a,e.tooltipContent]])}const Te=ne(Ue,[["render",Le]]),Oe=re(fe),ze=te({name:"CdxChipInput",components:{CdxInputChip:Te},inheritAttrs:!1,props:{inputChips:{type:Array,required:!0},inputValue:{type:[String,Number],default:null},separateInput:{type:Boolean,default:!1},status:{type:String,default:"default",validator:Oe},chipValidator:{type:Function,default:e=>!0},disabled:{type:Boolean,default:!1},readonly:{type:Boolean,default:!1}},emits:["update:input-chips","update:input-value","chip-click"],setup(e,{emit:t,attrs:d}){const i=r(),c=r(),f=r(),v=r(""),n=De(i),a=r(),s=Ve(pe,r(!0)),B=r(""),l=me(B,g(e,"inputValue"),t,"update:input-value"),h=r("default"),T=C(()=>h.value==="error"||e.status==="error"?"error":"default"),{computedDisabled:V,computedStatus:O}=de(g(e,"disabled"),T),F=r(!1),z=C(()=>({"cdx-chip-input--has-separate-input":e.separateInput,["cdx-chip-input--status-".concat(O.value)]:!0,"cdx-chip-input--focused":F.value,"cdx-chip-input--disabled":V.value,"cdx-chip-input--readonly":e.readonly})),{rootClasses:M,rootStyle:S,otherAttrs:j}=ce(d,z),I=[],D=r(null),H=C(()=>D.value?D.value.value:""),X=Y("cdx-chip-input-chip-added",o=>"Chip ".concat(o," was added."),[l]),Z=Y("cdx-chip-input-chip-removed",o=>"Chip ".concat(o," was removed."),[H]);function G(o,p){o!==null&&(I[p]=o)}const u=()=>{a.value.focus()};function y(){e.inputChips.find(o=>o.value===l.value)||!e.chipValidator(l.value)?h.value="error":l.value.toString().length>0&&(v.value=X.value,t("update:input-chips",e.inputChips.concat({value:l.value})),l.value="")}function w(o){e.readonly||V.value||t("update:input-chips",e.inputChips.filter(p=>p.value!==o.value))}function k(o,p){const b=n.value==="ltr"&&o==="left"||n.value==="rtl"&&o==="right"?-1:1,m=p+b;if(!(m<0)){if(m>=e.inputChips.length){u();return}I[m].focus()}}async function Q(o){var p;t("chip-click",o),!(e.readonly||V.value||!s.value)&&(y(),await ve(),w(o),l.value=(p=o.label)!=null?p:o.value,u())}function W(o,p,b){if(D.value=o,v.value=Z.value,b==="button")u();else if(b==="Backspace"){const m=p===0?1:p-1;m<e.inputChips.length?I[m].focus():u()}else if(b==="Delete"){const m=p+1;m<e.inputChips.length?I[m].focus():u()}w(o)}function R(o){var b,m;const p=n.value==="rtl"?"ArrowRight":"ArrowLeft";switch(o.key){case"Enter":if(l.value.toString().length>0&&s.value){y(),o.preventDefault(),o.stopPropagation();return}break;case"Escape":(b=a.value)==null||b.blur(),o.preventDefault(),o.stopPropagation();return;case"Backspace":case p:if(((m=a.value)==null?void 0:m.selectionStart)===0&&a.value.selectionEnd===0&&e.inputChips.length>0){I[e.inputChips.length-1].focus(),o.preventDefault(),o.stopPropagation();return}break}}function J(){F.value=!0}function ye(){F.value=!1}function ge(o){var p;!((p=i.value)!=null&&p.contains(o.relatedTarget))&&s.value&&y()}return E(g(e,"inputChips"),o=>{const p=o.find(b=>b.value===l.value);h.value=p?"error":"default"}),E(l,()=>{h.value==="error"&&(h.value="default")}),{rootElement:i,chipsContainer:c,separateInputWrapper:f,input:a,computedInputValue:l,rootClasses:M,rootStyle:S,otherAttrs:j,assignChipTemplateRef:G,handleChipClick:Q,handleChipRemove:W,moveChipFocus:k,onInputKeydown:R,focusInput:u,onInputFocus:J,onInputBlur:ye,onFocusOut:ge,computedDisabled:V,statusMessageContent:v}}}),je={ref:"chipsContainer",class:"cdx-chip-input__chips",role:"listbox","aria-orientation":"horizontal"},He=["readonly","disabled"],Xe={key:0,ref:"separateInputWrapper",class:"cdx-chip-input__separate-input"},Ze=["readonly","disabled"],Ge={class:"cdx-chip-input__aria-status",role:"status","aria-live":"polite"};function Je(e,t,d,i,c,f){const v=K("cdx-input-chip");return $(),A("div",{ref:"rootElement",class:P(["cdx-chip-input",e.rootClasses]),style:he(e.rootStyle),onClick:t[8]||(t[8]=n=>e.disabled||e.readonly?null:e.focusInput),onFocusout:t[9]||(t[9]=(...n)=>e.onFocusOut&&e.onFocusOut(...n))},[N("div",je,[($(!0),A(Ae,null,Fe(e.inputChips,(n,a)=>($(),ie(v,{key:n.value,ref_for:!0,ref:s=>e.assignChipTemplateRef(s,a),class:P(["cdx-chip-input__item",n.className]),icon:n.icon,readonly:e.readonly,disabled:e.computedDisabled,onClickChip:s=>e.handleChipClick(n),onRemoveChip:s=>e.handleChipRemove(n,a,s),onArrowLeft:s=>e.moveChipFocus("left",a),onArrowRight:s=>e.moveChipFocus("right",a)},{default:q(()=>{var s;return[Me(ue((s=n.label)!=null?s:n.value),1)]}),_:2},1032,["class","icon","readonly","disabled","onClickChip","onRemoveChip","onArrowLeft","onArrowRight"]))),128)),e.separateInput?_("v-if",!0):x(($(),A("input",L({key:0,ref:"input","onUpdate:modelValue":t[0]||(t[0]=n=>e.computedInputValue=n),class:"cdx-chip-input__input",readonly:e.readonly,disabled:e.computedDisabled},e.otherAttrs,{onBlur:t[1]||(t[1]=(...n)=>e.onInputBlur&&e.onInputBlur(...n)),onFocus:t[2]||(t[2]=(...n)=>e.onInputFocus&&e.onInputFocus(...n)),onKeydown:t[3]||(t[3]=(...n)=>e.onInputKeydown&&e.onInputKeydown(...n))}),null,16,He)),[[le,e.computedInputValue]])],512),e.separateInput?($(),A("div",Xe,[x(N("input",L({ref:"input","onUpdate:modelValue":t[4]||(t[4]=n=>e.computedInputValue=n),class:"cdx-chip-input__input",readonly:e.readonly,disabled:e.computedDisabled},e.otherAttrs,{onBlur:t[5]||(t[5]=(...n)=>e.onInputBlur&&e.onInputBlur(...n)),onFocus:t[6]||(t[6]=(...n)=>e.onInputFocus&&e.onInputFocus(...n)),onKeydown:t[7]||(t[7]=(...n)=>e.onInputKeydown&&e.onInputKeydown(...n))}),null,16,Ze),[[le,e.computedInputValue]])],512)):_("v-if",!0),N("div",Ge,ue(e.statusMessageContent),1)],38)}const Ye=ne(ze,[["render",Je]]),xe=re(fe),_e=te({name:"CdxMultiselectLookup",components:{CdxChipInput:Ye,CdxMenu:Re},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:xe},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:t,attrs:d,slots:i})=>{const c=r(),f=r(),v=Ee(),n=C(()=>{var u,y;return(y=(u=f.value)==null?void 0:u.getHighlightedMenuItem())==null?void 0:y.id}),a=r(!1),s=r(!1),B=r(!1),l=r("");Ke(pe,r(!1));const{computedDisabled:h,computedStatus:T}=de(g(e,"disabled"),g(e,"status")),V=C(()=>({"cdx-multiselect-lookup--disabled":h.value,"cdx-multiselect-lookup--pending":a.value})),{rootClasses:O,rootStyle:F,otherAttrs:z}=ce(d,V);Ne(c,f);const M=se(g(e,"selected"),t,"update:selected"),S=se(g(e,"inputChips"),t,"update:input-chips"),j=r(""),I=me(j,g(e,"inputValue"),t,"update:input-value"),D=C(()=>I.value.toString().length>0&&i["no-results"]);async function H(u){await ve(),a.value=u!==null&&u!=="",t("input",u),l.value=u.toString()}function X(u){B.value=!0,(e.menuItems.length>0||D.value)&&(s.value=!0),t("focus",u)}function Z(u){B.value=!1,s.value=!1,t("blur",u)}function G(u){!f.value||h.value||e.menuItems.length===0&&!D.value||u.key===" "||f.value.delegateKeyNavigation(u)}return E(g(e,"selected"),u=>{const y=u.filter(w=>S.value.find(k=>w===k.value)===void 0);y.length>0&&(y.forEach(w=>{var Q;const k=(Q=f.value)==null?void 0:Q.getComputedMenuItems().find(R=>R.value===w);if(k){const W=k,{id:R}=W,J=oe(W,["id"]);S.value.push(J)}}),e.keepInputOnSelection||(I.value="",l.value="",t("input",""))),S.value=S.value.filter(w=>u.find(k=>w.value===k)!==void 0)}),E(g(e,"inputChips"),u=>{u.length<M.value.length&&(M.value=u.map(y=>y.value))}),E(g(e,"menuItems"),u=>{u.length===0&&!D.value?s.value=!1:B.value&&a.value&&(s.value=!0),a.value=!1}),{chipInput:c,menu:f,menuId:v,highlightedId:n,searchQuery:l,expanded:s,computedDisabled:h,computedStatus:T,rootClasses:O,rootStyle:F,otherAttrs:z,selectedWrapper:M,inputChipsWrapper:S,computedInputValue:I,onUpdateInputValue:H,onInputBlur:Z,onInputFocus:X,onKeydown:G}}});function et(e,t,d,i,c,f){const v=K("cdx-chip-input"),n=K("cdx-menu");return $(),A("div",{class:P(["cdx-multiselect-lookup",e.rootClasses]),style:he(e.rootStyle)},[U(v,L({ref:"chipInput","input-chips":e.inputChipsWrapper,"onUpdate:inputChips":t[0]||(t[0]=a=>e.inputChipsWrapper=a),"input-value":e.computedInputValue,"onUpdate:inputValue":t[1]||(t[1]=a=>e.computedInputValue=a)},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:t[2]||(t[2]=a=>e.$emit("chip-click",a))}),null,16,["input-chips","input-value","aria-controls","aria-expanded","aria-activedescendant","separate-input","readonly","disabled","status","onUpdate:inputValue","onFocus","onBlur","onKeydown"]),U(n,L({id:e.menuId,ref:"menu",selected:e.selectedWrapper,"onUpdate:selected":t[3]||(t[3]=a=>e.selectedWrapper=a),expanded:e.expanded,"onUpdate:expanded":t[4]||(t[4]=a=>e.expanded=a),"menu-items":e.menuItems,"search-query":e.highlightQuery?e.searchQuery:""},e.menuConfig,{onLoadMore:t[5]||(t[5]=a=>e.$emit("load-more"))}),{default:q(({menuItem:a})=>[ee(e.$slots,"menu-item",{menuItem:a})]),"no-results":q(()=>[ee(e.$slots,"no-results")]),_:3},16,["id","selected","expanded","menu-items","search-query"])],6)}const lt=ne(_e,[["render",et]]),st=[{label:"potato",description:"root vegetable",value:"Q10998"},{label:"carrot",description:"root vegetable, usually orange in color",value:"Q81",tag:"limited support"},{label:"zucchini",description:"Edible summer squash, typically green in colour",value:"Q7533"},{label:"eggplant",description:"plant species Solanum melongena",value:"Q7540"},{label:"broccoli",description:"edible green plant in the cabbage family",value:"Q47722"},{label:"cauliflower",description:"vegetable, for the plant see Q7537 (Brassica oleracea var. botrytis)",value:"Q23900272"},{label:"brussels sprouts",description:"vegetable",value:"Q150463"},{label:"cassava root",description:"root vegetable",value:"Q43304555"},{label:"plantain",description:"banana-like vegetable, less sweet",value:"Q165449"},{label:"cabbage",description:"Vegetable, the generic term for several varieties.",value:"Q14328596"},{label:"napa cabbage",description:"a type of Chinese cabbage",value:"Q13360268"}];export{Ye as C,lt as a,me as u,st as v};