@wikimedia/codex
Version:
Codex Design System for Wikimedia
2 lines (1 loc) • 13.9 kB
JavaScript
var ae=Object.getOwnPropertySymbols;var Ce=Object.prototype.hasOwnProperty,Ie=Object.prototype.propertyIsEnumerable;var oe=(e,t)=>{var r={};for(var s in e)Ce.call(e,s)&&t.indexOf(s)<0&&(r[s]=e[s]);if(e!=null&&ae)for(var s of ae(e))t.indexOf(s)<0&&Ie.call(e,s)&&(r[s]=e[s]);return r};var Y=(e,t,r)=>new Promise((s,d)=>{var f=a=>{try{n(r.next(a))}catch(u){d(u)}},v=a=>{try{n(r.throw(a))}catch(u){d(u)}},n=a=>a.done?s(a.value):Promise.resolve(a.value).then(f,v);n((r=r.apply(e,t)).next())});import{c as C,d as te,C as we,r as p,ai as Z,G as ke,K as $e,ac as Be,_ as ne,a as R,ar as Se,a5 as x,o as $,b as V,f as ie,k as _,e as P,g as ee,i as U,w as L,j as De,n as T,ab as Ve,J as Ae,aY as re,t as b,x as pe,y as de,z as E,B as ce,V as ve,L as fe,F as Fe,m as Me,p as Ke,q as ue,aX as le,D as O,E as me,s as Ee,R as Re,v as se}from"./DemoBaseLayout.vue_vue_type_style_index_0_lang-ChPp1b9F.js";import{C as We}from"./Button-DrTkl5TI.js";import{C as Ne}from"./Tooltip-BnM8wg-B.js";/* empty css */import{C as Qe,u as Pe}from"./useFloatingMenu-lGCYR9Tn.js";function he(e,t,r,s){return C({get:()=>{var d;return(d=t.value)!=null?d:e.value},set:d=>{t.value!==null?r(s||"update:modelValue",d):e.value=d}})}const Ue=te({name:"CdxInputChip",components:{CdxButton:We,CdxIcon:we},directives:{tooltip:Ne},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:r}){const s=C(()=>e.disabled?-1:0),d=p(),f=C(()=>({"cdx-input-chip--disabled":e.disabled,"cdx-input-chip--readonly":e.readonly,[e.className]:e.className.length>0})),v=Z("cdx-input-chip-aria-description","Press Enter to edit or Delete to remove"),n=p(),a=p(!1),u=C(()=>a.value&&n.value&&n.value.scrollWidth>n.value.clientWidth?Be(r==null?void 0:r.default)[0]:null);ke(()=>{a.value=!0});function B(l){var y;switch(l.key){case"Enter":t("click-chip"),l.preventDefault(),l.stopPropagation();break;case"Escape":(y=d.value)==null||y.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:d,rootClasses:f,ariaDescription:v,onKeydown:B,cdxIconClose:$e,tabIndex:s,tooltipContent:u,textElement:n}},methods:{focus(){this.$refs.rootElement.focus()}}}),Le=["tabindex","aria-description"],Te={ref:"textElement",class:"cdx-input-chip__text"};function Oe(e,t,r,s,d,f){const v=R("cdx-icon"),n=R("cdx-button"),a=Se("tooltip");return x(($(),V("div",{ref:"rootElement",class:T(["cdx-input-chip",e.rootClasses]),tabindex:e.tabIndex,role:"option","aria-description":e.ariaDescription,onKeydown:t[1]||(t[1]=(...u)=>e.onKeydown&&e.onKeydown(...u)),onClick:t[2]||(t[2]=u=>e.$emit("click-chip"))},[e.icon?($(),ie(v,{key:0,icon:e.icon,size:"small"},null,8,["icon"])):_("v-if",!0),P("span",Te,[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]=De(u=>e.$emit("remove-chip","button"),["stop"]))},{default:L(()=>[U(v,{icon:e.cdxIconClose,size:"x-small"},null,8,["icon"])]),_:1},8,["disabled"])],42,Le)),[[a,e.tooltipContent]])}const qe=ne(Ue,[["render",Oe]]),ze=ce(ve),je=te({name:"CdxChipInput",components:{CdxInputChip:qe},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:ze},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:r}){const s=p(),d=p(),f=p(),v=p(""),n=Ve(s),a=p(),u=Ae(re,p(!0)),B=p(""),l=he(B,b(e,"inputValue"),t,"update:input-value"),y=p("default"),q=C(()=>y.value==="error"||e.status==="error"?"error":"default"),{computedDisabled:D,computedStatus:z}=pe(b(e,"disabled"),q),A=p(!1),F=C(()=>({"cdx-chip-input--has-separate-input":e.separateInput,["cdx-chip-input--status-".concat(z.value)]:!0,"cdx-chip-input--focused":A.value,"cdx-chip-input--disabled":D.value,"cdx-chip-input--readonly":e.readonly})),{rootClasses:S,rootStyle:j,otherAttrs:M}=de(r,F),I=[],K=p(null),G=C(()=>K.value?K.value.value:""),H=Z("cdx-chip-input-chip-added",o=>"Chip ".concat(o," was added."),[l]),J=Z("cdx-chip-input-chip-removed",o=>"Chip ".concat(o," was removed."),[G]);function i(o,c){o!==null&&(I[c]=o)}const m=()=>{a.value.focus()};function w(){e.inputChips.find(o=>o.value===l.value)||!e.chipValidator(l.value)?y.value="error":l.value.toString().length>0&&(v.value=H.value,t("update:input-chips",e.inputChips.concat({value:l.value})),l.value="")}function k(o){e.readonly||D.value||t("update:input-chips",e.inputChips.filter(c=>c.value!==o.value))}function W(o,c){const g=n.value==="ltr"&&o==="left"||n.value==="rtl"&&o==="right"?-1:1,h=c+g;if(!(h<0)){if(h>=e.inputChips.length){m();return}I[h].focus()}}function N(o){return Y(this,null,function*(){var c;t("chip-click",o),!(e.readonly||D.value||!u.value)&&(w(),yield fe(),k(o),l.value=(c=o.label)!=null?c:o.value,m())})}function Q(o,c,g){if(K.value=o,v.value=J.value,g==="button")m();else if(g==="Backspace"){const h=c===0?1:c-1;h<e.inputChips.length?I[h].focus():m()}else if(g==="Delete"){const h=c+1;h<e.inputChips.length?I[h].focus():m()}k(o)}function X(o){var g,h;const c=n.value==="rtl"?"ArrowRight":"ArrowLeft";switch(o.key){case"Enter":if(l.value.toString().length>0&&u.value){w(),o.preventDefault(),o.stopPropagation();return}break;case"Escape":(g=a.value)==null||g.blur(),o.preventDefault(),o.stopPropagation();return;case"Backspace":case c:if(((h=a.value)==null?void 0:h.selectionStart)===0&&a.value.selectionEnd===0&&e.inputChips.length>0){I[e.inputChips.length-1].focus(),o.preventDefault(),o.stopPropagation();return}break}}function be(){A.value=!0}function ye(){A.value=!1}function ge(o){var c;!((c=s.value)!=null&&c.contains(o.relatedTarget))&&u.value&&w()}return E(b(e,"inputChips"),o=>{const c=o.find(g=>g.value===l.value);y.value=c?"error":"default"}),E(l,()=>{y.value==="error"&&(y.value="default")}),{rootElement:s,chipsContainer:d,separateInputWrapper:f,input:a,computedInputValue:l,rootClasses:S,rootStyle:j,otherAttrs:M,assignChipTemplateRef:i,handleChipClick:N,handleChipRemove:Q,moveChipFocus:W,onInputKeydown:X,focusInput:m,onInputFocus:be,onInputBlur:ye,onFocusOut:ge,computedDisabled:D,statusMessageContent:v}}}),Ge={ref:"chipsContainer",class:"cdx-chip-input__chips",role:"listbox","aria-orientation":"horizontal"},He=["readonly","disabled"],Je={key:0,ref:"separateInputWrapper",class:"cdx-chip-input__separate-input"},Xe=["readonly","disabled"],Ye={class:"cdx-chip-input__aria-status",role:"status","aria-live":"polite"};function Ze(e,t,r,s,d,f){const v=R("cdx-input-chip");return $(),V("div",{ref:"rootElement",class:T(["cdx-chip-input",e.rootClasses]),style:me(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))},[P("div",Ge,[($(!0),V(Fe,null,Me(e.inputChips,(n,a)=>($(),ie(v,{key:n.value,ref_for:!0,ref:u=>e.assignChipTemplateRef(u,a),class:T(["cdx-chip-input__item",n.className]),icon:n.icon,readonly:e.readonly,disabled:e.computedDisabled,onClickChip:u=>e.handleChipClick(n),onRemoveChip:u=>e.handleChipRemove(n,a,u),onArrowLeft:u=>e.moveChipFocus("left",a),onArrowRight:u=>e.moveChipFocus("right",a)},{default:L(()=>{var u;return[Ke(ue((u=n.label)!=null?u:n.value),1)]}),_:2},1032,["class","icon","readonly","disabled","onClickChip","onRemoveChip","onArrowLeft","onArrowRight"]))),128)),e.separateInput?_("v-if",!0):x(($(),V("input",O({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?($(),V("div",Je,[x(P("input",O({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,Xe),[[le,e.computedInputValue]])],512)):_("v-if",!0),P("div",Ye,ue(e.statusMessageContent),1)],38)}const xe=ne(je,[["render",Ze]]),_e=ce(ve),et=te({name:"CdxMultiselectLookup",components:{CdxChipInput:xe,CdxMenu:Qe},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:_e},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:t,attrs:r,slots:s})=>{const d=p(),f=p(),v=Ee(),n=C(()=>{var i,m;return(m=(i=f.value)==null?void 0:i.getHighlightedMenuItem())==null?void 0:m.id}),a=p(!1),u=p(!1),B=p(!1);Re(re,p(!1));const{computedDisabled:l,computedStatus:y}=pe(b(e,"disabled"),b(e,"status")),q=C(()=>({"cdx-multiselect-lookup--disabled":l.value,"cdx-multiselect-lookup--pending":a.value})),{rootClasses:D,rootStyle:z,otherAttrs:A}=de(r,q);Pe(d,f);const F=se(b(e,"selected"),t,"update:selected"),S=se(b(e,"inputChips"),t,"update:input-chips"),j=p(""),M=he(j,b(e,"inputValue"),t,"update:input-value"),I=C(()=>M.value.toString().length>0&&s["no-results"]);function K(i){return Y(this,null,function*(){yield fe(),a.value=i!==null&&i!=="",t("input",i)})}function G(i){B.value=!0,(e.menuItems.length>0||I.value)&&(u.value=!0),t("focus",i)}function H(i){B.value=!1,u.value=!1,t("blur",i)}function J(i){!f.value||l.value||e.menuItems.length===0&&!I.value||i.key===" "||f.value.delegateKeyNavigation(i)}return E(b(e,"selected"),i=>{const m=i.filter(w=>S.value.find(k=>w===k.value)===void 0);m.length>0&&(m.forEach(w=>{var W;const k=(W=f.value)==null?void 0:W.getComputedMenuItems().find(Q=>Q.value===w);if(k){const N=k,{id:Q}=N,X=oe(N,["id"]);S.value.push(X)}}),e.keepInputOnSelection||(M.value="",t("input",""))),S.value=S.value.filter(w=>i.find(k=>w.value===k)!==void 0)}),E(b(e,"inputChips"),i=>{i.length<F.value.length&&(F.value=i.map(m=>m.value))}),E(b(e,"menuItems"),i=>{i.length===0&&!I.value?u.value=!1:B.value&&a.value&&(u.value=!0),a.value=!1}),{chipInput:d,menu:f,menuId:v,highlightedId:n,expanded:u,computedDisabled:l,computedStatus:y,rootClasses:D,rootStyle:z,otherAttrs:A,selectedWrapper:F,inputChipsWrapper:S,computedInputValue:M,onUpdateInputValue:K,onInputBlur:H,onInputFocus:G,onKeydown:J}}});function tt(e,t,r,s,d,f){const v=R("cdx-chip-input"),n=R("cdx-menu");return $(),V("div",{class:T(["cdx-multiselect-lookup",e.rootClasses]),style:me(e.rootStyle)},[U(v,O({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,O({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},e.menuConfig,{onLoadMore:t[5]||(t[5]=a=>e.$emit("load-more"))}),{default:L(({menuItem:a})=>[ee(e.$slots,"menu-item",{menuItem:a})]),"no-results":L(()=>[ee(e.$slots,"no-results")]),_:3},16,["id","selected","expanded","menu-items"])],6)}const it=ne(et,[["render",tt]]),rt=[{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{xe as C,it as a,he as u,rt as v};