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