@wikimedia/codex/dist/sandbox/assets/experiments-BKs-L1g8.js

Codex Design System for Wikimedia

var ye=Object.defineProperty;var R=Object.getOwnPropertySymbols;var X=Object.prototype.hasOwnProperty,ee=Object.prototype.propertyIsEnumerable;var Z=(e,t,i)=>t in e?ye(e,t,{enumerable:!0,configurable:!0,writable:!0,value:i}):e[t]=i,te=(e,t)=>{for(var i in t||(t={}))X.call(t,i)&&Z(e,i,t[i]);if(R)for(var i of R(t))ee.call(t,i)&&Z(e,i,t[i]);return e};var z=(e,t)=>{var i={};for(var d in e)X.call(e,d)&&t.indexOf(d)<0&&(i[d]=e[d]);if(e!=null&&R)for(var d of R(e))t.indexOf(d)<0&&ee.call(e,d)&&(i[d]=e[d]);return i};var le=(e,t,i)=>new Promise((d,k)=>{var h=s=>{try{C(i.next(s))}catch(r){k(r)}},M=s=>{try{C(i.throw(s))}catch(r){k(r)}},C=s=>s.done?d(s.value):Promise.resolve(s.value).then(h,M);C((i=i.apply(e,t)).next())});import{d as ae,C as j,an as q,aK as se,r as u,s as ke,c as W,R as Ce,aY as Ve,x as Ie,t as S,y as we,v as ne,z as ie,aZ as G,B as Me,V as Be,L as He,aJ as xe,_ as Ue,a as $,o as w,b as L,i as m,e as a,D as oe,w as y,j as A,q as N,f as Y,p as F,k as J,g as Se,n as Le,E as Fe,aO as Te,am as I,aP as _e}from"./DemoBaseLayout.vue_vue_type_style_index_0_lang-ChPp1b9F.js";/* empty css                                                        */import{C as We,u as $e,v as O,a as Ne}from"./data-DUL_EKtM.js";import{C as Re,u as qe}from"./useFloatingMenu-lGCYR9Tn.js";import"./Button-DrTkl5TI.js";import"./Tooltip-BnM8wg-B.js";import"./floating-ui.dom-G9leGyGp.js";const P=[{label:"Very likely good",description:"Highly accurate at finding almost problem-free edits.",value:"vlg",isHighlighted:!1},{label:"May have problems",description:"Finds most flawed or damaging edits but with lower accuracy.",value:"mhp",isHighlighted:!1},{label:"Likely have problems",description:"With medium accuracy",value:"lhp",isHighlighted:!1},{label:"Very likely good faith",description:"Highly accurate at finding almost all good-faith edits.",value:"vlgf",isHighlighted:!1},{label:"May be bad faith",description:"Finds most bad-faith edits but with a lower accuracy.",value:"mbbf",isHighlighted:!1},{label:"Likely bad faith",description:"With medium accuracy, finds an intermediate fraction of bad-faith edits.",value:"lbf",isHighlighted:!1},{label:"Very likely bad faith",description:"Very highly accurate at finding the most obvious bad-faith edits.",value:"Q150463",isHighlighted:!1},{label:"Unregistered",description:"Editors who aren't logged in.",value:"unreg",isHighlighted:!1},{label:"Registered",description:"Logged-in editors.",value:"reg",isHighlighted:!1},{label:"Newcomers",description:"Registered editors who have fewer than 10 edits or 4 days of activity.",value:"nc",isHighlighted:!1},{label:"Learners",description:'Registered editors whose experience falls between "Newcomers" and "Experienced users."',value:"lrn",isHighlighted:!1},{label:"Experienced users",description:"Registered editors with more than 500 edits and 30 days of activity.",value:"eu",isHighlighted:!1}],Ae=Me(Be),Ee=ae({name:"RcfMultiselectLookup",components:{CdxChipInput:We,CdxIcon:j,CdxMenu:Re,CdxToggleButton:q,CdxToggleButtonGroup:se},props:{inputChips:{type:Array,required:!0},selected:{type:[Array],required:!0},menuItems:{type:Array,required:!0},inputValue:{type:[String,Number],default:null},disabled:{type:Boolean,default:!1},readonly:{type:Boolean,default:!1},status:{type:String,default:"default",validator:Ae},menuConfig:{type:Object,default:()=>({})}},emits:["update:input-chips","update:selected","update:input-value","chip-click","load-more","input","change","focus","blur"],setup:(e,{emit:t,attrs:i,slots:d})=>{const k=u(),h=u(),M=ke(),C=W(()=>{var n,p;return(p=(n=h.value)==null?void 0:n.getHighlightedMenuItem())==null?void 0:p.id}),s=u(!1),r=u(!1),B=u(!1);Ce(Ve,u(!1));const o=W(()=>[{value:"rcf-menu-header"},...e.menuItems]),f=u("filters"),T=[{value:"filters",label:"Filters"},{value:"namespaces",label:"Namespaces"},{value:"tagged",label:"Tagged edits"}],_=W(()=>{var n;return(n=T.find(p=>p.value===f.value))==null?void 0:n.label}),E=u(!1),v=u(!1),{computedDisabled:l,computedStatus:c}=Ie(S(e,"disabled"),S(e,"status")),H=W(()=>({"rcf-multiselect-lookup--disabled":l.value,"rcf-multiselect-lookup--pending":s.value})),{rootClasses:ue,rootStyle:de,otherAttrs:re}=we(i,H);qe(k,h);const x=ne(S(e,"selected"),t,"update:selected"),V=ne(S(e,"inputChips"),t,"update:input-chips"),pe=u(""),Q=$e(pe,S(e,"inputValue"),t,"update:input-value"),K=W(()=>Q.value.toString().length>0&&d["no-results"]);function ce(n){return le(this,null,function*(){yield He(),s.value=n!==null&&n!=="",t("input",n)})}function me(n){B.value=!0,(e.menuItems.length>0||K.value)&&(r.value=!0),t("focus",n)}function he(n){var p;n.relatedTarget instanceof HTMLElement&&((p=n.relatedTarget)!=null&&p.closest("#rcf-filter-group"))||(B.value=!1,r.value=!1,t("blur",n))}function fe(n){var g,U,b;const p=(g=h.value)==null?void 0:g.computedMenuItems.find(D=>D.value===n.value);p&&(r.value=!0,(U=k.value)==null||U.focusInput(),(b=h.value)==null||b.handleMenuItemChange("highlighted",p))}function ge(n){if(!V.value.find(g=>g.value===n.value)){const p=n,{id:g}=p,U=z(p,["id"]),b=te({className:"rcf-multiselect-lookup__chip--unselected"},U);V.value.push(b)}V.value=V.value.map(g=>(g.value===n.value&&(g.icon=xe),g))}function ve(n){!h.value||l.value||e.menuItems.length===0&&!K.value||n.key===" "||h.value.delegateKeyNavigation(n)}function be(n){if(x.value.includes(n.value)){x.value=x.value.filter(b=>b!==n.value),V.value=V.value.filter(b=>b.value!==n.value);return}if(x.value.push(n.value),!V.value.find(b=>b.value===n.value)){const U=n,{id:b}=U,D=z(U,["id"]);V.value.push(D)}}return ie(S(e,"inputChips"),()=>{x.value=x.value.filter(n=>!!V.value.find(g=>g.value===n))}),ie(S(e,"menuItems"),n=>{n.length===0&&!K.value?r.value=!1:B.value&&s.value&&(r.value=!0),s.value=!1}),{chipInput:k,menu:h,menuId:M,highlightedId:C,expanded:r,computedDisabled:l,computedStatus:c,rootClasses:ue,rootStyle:de,otherAttrs:re,computedMenuItems:o,currentFilterSet:f,toggleButtons:T,currentFilterSetLabel:_,excludeButton:E,highlightButton:v,onHighlight:ge,selectedWrapper:x,inputChipsWrapper:V,computedInputValue:Q,onUpdateInputValue:ce,onInputBlur:he,onInputFocus:me,onChipClick:fe,onKeydown:ve,onMenuItemClick:be,cdxIconHighlight:G}}}),Ke={class:"rcf-filter-selector"},De={class:"rcf-multiselect-lookup__menu-header__title"},ze={class:"rcf-multiselect-lookup__menu-header__actions"},Oe={key:1,class:"rcf-multiselect-lookup__menu-item"},Pe={class:"cdx-menu-item__text"},je={class:"cdx-menu-item__text__label"},Ge={key:0,class:"cdx-menu-item__text__description"},Ye={class:"rcf-multiselect-lookup__menu-item__actions"};function Je(e,t,i,d,k,h){const M=$("cdx-toggle-button-group"),C=$("cdx-chip-input"),s=$("cdx-toggle-button"),r=$("cdx-icon"),B=$("cdx-menu");return w(),L("div",Ke,[m(M,{id:"rcf-filter-group",modelValue:e.currentFilterSet,"onUpdate:modelValue":t[0]||(t[0]=o=>e.currentFilterSet=o),buttons:e.toggleButtons},null,8,["modelValue","buttons"]),a("div",{class:Le(["rcf-multiselect-lookup",e.rootClasses]),style:Fe(e.rootStyle)},[m(C,oe({ref:"chipInput","input-chips":e.inputChipsWrapper,"onUpdate:inputChips":t[1]||(t[1]=o=>e.inputChipsWrapper=o),"input-value":e.computedInputValue,"onUpdate:inputValue":t[2]||(t[2]=o=>e.computedInputValue=o)},e.otherAttrs,{class:"rcf-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":!0,readonly:e.readonly,disabled:e.computedDisabled,status:e.computedStatus,"onUpdate:inputValue":e.onUpdateInputValue,onFocus:e.onInputFocus,onBlur:e.onInputBlur,onKeydown:e.onKeydown,onChipClick:t[3]||(t[3]=o=>e.onChipClick(o))}),null,16,["input-chips","input-value","aria-controls","aria-expanded","aria-activedescendant","readonly","disabled","status","onUpdate:inputValue","onFocus","onBlur","onKeydown"]),m(B,oe({id:e.menuId,ref:"menu",selected:e.selectedWrapper,"onUpdate:selected":t[7]||(t[7]=o=>e.selectedWrapper=o),expanded:e.expanded,"onUpdate:expanded":t[8]||(t[8]=o=>e.expanded=o),"menu-items":e.computedMenuItems},e.menuConfig,{onMenuItemClick:e.onMenuItemClick,onLoadMore:t[9]||(t[9]=o=>e.$emit("load-more"))}),{default:y(({menuItem:o})=>[o.value==="rcf-menu-header"?(w(),L("span",{key:0,class:"rcf-multiselect-lookup__menu-header",onClick:t[6]||(t[6]=A(()=>{},["stop"]))},[a("span",De,N(e.currentFilterSetLabel),1),a("span",ze,[e.currentFilterSet!=="filters"?(w(),Y(s,{key:0,modelValue:e.excludeButton,"onUpdate:modelValue":t[4]||(t[4]=f=>e.excludeButton=f),quiet:!0},{default:y(()=>t[10]||(t[10]=[F(" Exclude selected ")])),_:1},8,["modelValue"])):J("v-if",!0),m(s,{modelValue:e.highlightButton,"onUpdate:modelValue":t[5]||(t[5]=f=>e.highlightButton=f),quiet:!0},{default:y(()=>[m(r,{icon:e.cdxIconHighlight},null,8,["icon"]),t[11]||(t[11]=F(" Highlight results "))]),_:1},8,["modelValue"])])])):(w(),L("span",Oe,[a("span",Pe,[a("span",je,N(o.label),1),o.description?(w(),L("span",Ge,N(o.description),1)):J("v-if",!0)]),a("span",Ye,[m(s,{modelValue:o.isHighlighted,"onUpdate:modelValue":f=>o.isHighlighted=f,quiet:!0,"aria-label":"Highlight",onClick:A(f=>e.onHighlight(o),["stop"])},{default:y(()=>[m(r,{icon:e.cdxIconHighlight},null,8,["icon"])]),_:2},1032,["modelValue","onUpdate:modelValue","onClick"])])]))]),"no-results":y(()=>[Se(e.$slots,"no-results")]),_:3},16,["id","selected","expanded","menu-items","onMenuItemClick"])],6)])}const Qe=Ue(Ee,[["render",Je]]),Ze={id:"rcf",class:"cdx-demo-experiments__rcf"},Xe={class:"rcf-multiselect-lookup__menu-header__title"},et={class:"rcf-multiselect-lookup__menu-header__actions"},tt={key:1,class:"rcf-multiselect-lookup__menu-item"},lt={class:"rcf-multiselect-lookup__menu-item__actions"},nt=ae({__name:"ExperimentsPage",setup(e){const t=u([]),i=u([]),d=u([{value:"rcf-menu-header"}].concat(O)),k={boldLabel:!0,visibleItemLimit:4},h=u(!1),M=u(!1),C=u(!1),s=u("filters"),r=[{value:"filters",label:"Filters"},{value:"namespaces",label:"Namespaces"},{value:"tagged",label:"Tagged edits"}];function B(){var v;return(v=r.find(l=>l.value===s.value))==null?void 0:v.label}function o(v){v?d.value=[{value:"rcf-menu-header"}].concat(O.filter(l=>l.label.includes(v))):d.value=[{value:"rcf-menu-header"}].concat(O)}const f=u([]),T=u([]),_=u(P);function E(v){v?_.value=P.filter(l=>l.label.includes(v)):_.value=P}return(v,l)=>(w(),Y(Te,{class:"cdx-demo-experiments"},{header:y(()=>l[10]||(l[10]=[F(" Codex experiments ")])),content:y(()=>[a("section",Ze,[l[13]||(l[13]=a("h2",null,"RCFilters experiments",-1)),l[14]||(l[14]=a("h3",{id:"rcf-ml"},"MultiselectLookup with custom menu display",-1)),l[15]||(l[15]=a("p",null," This demo uses the MultiselectLookup component to create an approximation of the filter selector in RCFilters. Some shortcomings include: ",-1)),l[16]||(l[16]=a("ul",null,[a("li",null,"Clicking a toggle button in the group above the input will close the menu."),a("li",null,"Buttons within the menu are not reachable via keyboard navigation."),a("li",null,"The hover color of quiet toggle buttons is the same as the background color of the hovered menu item.")],-1)),m(I(se),{modelValue:s.value,"onUpdate:modelValue":l[0]||(l[0]=c=>s.value=c),buttons:r},null,8,["modelValue"]),m(I(Ne),{"input-chips":t.value,"onUpdate:inputChips":l[6]||(l[6]=c=>t.value=c),selected:i.value,"onUpdate:selected":l[7]||(l[7]=c=>i.value=c),class:"rcf-multiselect-lookup","menu-items":d.value,"menu-config":k,"aria-label":"MultiselectLookup demo",onInput:o},{"menu-item":y(({menuItem:c})=>[c.value==="rcf-menu-header"?(w(),L("span",{key:0,class:"rcf-multiselect-lookup__menu-header",onClick:l[3]||(l[3]=A(()=>{},["stop"]))},[a("span",Xe,N(B()),1),a("span",et,[s.value!=="filters"?(w(),Y(I(q),{key:0,modelValue:h.value,"onUpdate:modelValue":l[1]||(l[1]=H=>h.value=H),quiet:!0},{default:y(()=>l[11]||(l[11]=[F(" Exclude selected ")])),_:1},8,["modelValue"])):J("v-if",!0),m(I(q),{modelValue:M.value,"onUpdate:modelValue":l[2]||(l[2]=H=>M.value=H),quiet:!0},{default:y(()=>[m(I(j),{icon:I(G)},null,8,["icon"]),l[12]||(l[12]=F(" Highlight results "))]),_:1},8,["modelValue"])])])):(w(),L("span",tt,[F(N(c.label)+" ",1),a("span",lt,[m(I(q),{modelValue:C.value,"onUpdate:modelValue":l[4]||(l[4]=H=>C.value=H),quiet:!0,"aria-label":"Highlight",onClick:l[5]||(l[5]=A(()=>{},["stop"]))},{default:y(()=>[m(I(j),{icon:I(G)},null,8,["icon"])]),_:1},8,["modelValue"])])]))]),_:1},8,["input-chips","selected","menu-items"]),l[17]||(l[17]=a("h3",{id:"rcf-custom"},"Custom MultiselectLookup",-1)),l[18]||(l[18]=a("p",null,' This demo does not use the MultiselectLookup component - instead, it uses a custom recreation of that component with some changes and new behaviors. In this demo, selecting an item in the ToggleButtonGroup won\'t cause the menu to close, clicking a chip will open the menu and scroll to that item, and clicking the "highlight" button within a menu item will add an icon to the chip. You can also click the "highlight" button for an unselected item and a chip will be added, even though that item isn\'t selected in the menu. Some shortcomings include: ',-1)),l[19]||(l[19]=a("ul",null,[a("li",null," When you click a chip, it should get highlighted (changed to blue) while the associated menu item is displayed in the menu. This has not been implemented. "),a("li",null,"Buttons within the menu are not reachable via keyboard navigation."),a("li",null,"The hover color of quiet toggle buttons is the same as the background color of the hovered menu item.")],-1)),m(Qe,{"input-chips":f.value,"onUpdate:inputChips":l[8]||(l[8]=c=>f.value=c),selected:T.value,"onUpdate:selected":l[9]||(l[9]=c=>T.value=c),class:"rcf-multiselect-lookup","menu-items":_.value,"menu-config":k,"aria-label":"MultiselectLookup demo",onInput:E},null,8,["input-chips","selected","menu-items"])])]),_:1}))}});_e(nt).mount("#app");