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