@wikimedia/codex/dist/modules/CdxChipInput.cjs

Codex Design System for Wikimedia

"use strict";var V=(e,o,d)=>new Promise((c,v)=>{var h=i=>{try{n(d.next(i))}catch(r){v(r)}},l=i=>{try{n(d.throw(i))}catch(r){v(r)}},n=i=>i.done?c(i.value):Promise.resolve(i.value).then(h,l);n((d=d.apply(e,o)).next())});const t=require("vue"),J=require("./CdxButton.cjs"),$=require("./Icon.js"),w=require("./useI18n.cjs"),E=require("./_plugin-vue_export-helper.js"),B=require("./constants.js"),Q=require("./useSplitAttributes.cjs"),X=require("./useFieldData.cjs"),Y=require("./useComputedDirection.cjs"),Z=require("./useOptionalModelWrapper.js"),x=t.defineComponent({name:"CdxInputChip",components:{CdxButton:J,CdxIcon:$.CdxIcon},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:o}){const d=t.computed(()=>e.disabled?-1:0),c=t.ref(),v=t.computed(()=>({"cdx-input-chip--disabled":e.disabled,"cdx-input-chip--readonly":e.readonly,[e.className]:e.className.length>0})),h=w("cdx-input-chip-aria-description","Press Enter to edit or Delete to remove");function l(n){var i;switch(n.key){case"Enter":o("click-chip"),n.preventDefault(),n.stopPropagation();break;case"Escape":(i=c.value)==null||i.blur(),n.preventDefault(),n.stopPropagation();break;case"Backspace":case"Delete":o("remove-chip",n.key),n.preventDefault(),n.stopPropagation();break;case"ArrowLeft":o("arrow-left"),n.preventDefault(),n.stopPropagation();break;case"ArrowRight":o("arrow-right"),n.preventDefault(),n.stopPropagation();break}}return{rootElement:c,rootClasses:v,ariaDescription:h,onKeydown:l,cdxIconClose:$.h4,tabIndex:d}},methods:{focus(){this.$refs.rootElement.focus()}}}),_=["tabindex","aria-description"],ee={class:"cdx-input-chip__text"};function te(e,o,d,c,v,h){const l=t.resolveComponent("cdx-icon"),n=t.resolveComponent("cdx-button");return t.openBlock(),t.createElementBlock("div",{ref:"rootElement",class:t.normalizeClass(["cdx-input-chip",e.rootClasses]),tabindex:e.tabIndex,role:"option","aria-description":e.ariaDescription,onKeydown:o[1]||(o[1]=(...i)=>e.onKeydown&&e.onKeydown(...i)),onClick:o[2]||(o[2]=i=>e.$emit("click-chip"))},[e.icon?(t.openBlock(),t.createBlock(l,{key:0,icon:e.icon,size:"small"},null,8,["icon"])):t.createCommentVNode("v-if",!0),t.createElementVNode("span",ee,[t.renderSlot(e.$slots,"default")]),t.createVNode(n,{class:"cdx-input-chip__button",weight:"quiet",tabindex:"-1","aria-hidden":"true",disabled:e.disabled||e.readonly,onClick:o[0]||(o[0]=t.withModifiers(i=>e.$emit("remove-chip","button"),["stop"]))},{default:t.withCtx(()=>[t.createVNode(l,{icon:e.cdxIconClose,size:"x-small"},null,8,["icon"])]),_:1},8,["disabled"])],42,_)}const ne=E._export_sfc(x,[["render",te]]),oe=B.makeStringTypeValidator(B.ValidationStatusTypes),ae=t.defineComponent({name:"CdxChipInput",components:{CdxInputChip:ne},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:o,attrs:d}){const c=t.ref(),v=t.ref(),h=t.ref(),l=t.ref(""),n=Y(c),i=t.ref(),r=t.inject(B.AllowArbitraryKey,t.ref(!0)),A=t.ref(""),p=Z.useOptionalModelWrapper(A,t.toRef(e,"inputValue"),o,"update:input-value"),C=t.ref("default"),S=t.computed(()=>C.value==="error"||e.status==="error"?"error":"default"),{computedDisabled:b,computedStatus:F}=X(t.toRef(e,"disabled"),S),g=t.ref(!1),R=t.computed(()=>({"cdx-chip-input--has-separate-input":e.separateInput,["cdx-chip-input--status-".concat(F.value)]:!0,"cdx-chip-input--focused":g.value,"cdx-chip-input--disabled":b.value,"cdx-chip-input--readonly":e.readonly})),{rootClasses:N,rootStyle:q,otherAttrs:K}=Q(d,R),y=[],I=t.ref(null),P=t.computed(()=>I.value?I.value.value:""),M=w("cdx-chip-input-chip-added",a=>"Chip ".concat(a," was added."),[p]),T=w("cdx-chip-input-chip-removed",a=>"Chip ".concat(a," was removed."),[P]);function z(a,u){a!==null&&(y[u]=a)}const m=()=>{i.value.focus()};function k(){e.inputChips.find(a=>a.value===p.value)||!e.chipValidator(p.value)?C.value="error":p.value.toString().length>0&&(l.value=M.value,o("update:input-chips",e.inputChips.concat({value:p.value})),p.value="")}function D(a){e.readonly||b.value||o("update:input-chips",e.inputChips.filter(u=>u.value!==a.value))}function O(a,u){const f=n.value==="ltr"&&a==="left"||n.value==="rtl"&&a==="right"?-1:1,s=u+f;if(!(s<0)){if(s>=e.inputChips.length){m();return}y[s].focus()}}function L(a){return V(this,null,function*(){var u;o("chip-click",a),!(e.readonly||b.value||!r.value)&&(k(),yield t.nextTick(),D(a),p.value=(u=a.label)!=null?u:a.value,m())})}function W(a,u,f){if(I.value=a,l.value=T.value,f==="button")m();else if(f==="Backspace"){const s=u===0?1:u-1;s<e.inputChips.length?y[s].focus():m()}else if(f==="Delete"){const s=u+1;s<e.inputChips.length?y[s].focus():m()}D(a)}function j(a){var f,s;const u=n.value==="rtl"?"ArrowRight":"ArrowLeft";switch(a.key){case"Enter":if(p.value.toString().length>0&&r.value){k(),a.preventDefault(),a.stopPropagation();return}break;case"Escape":(f=i.value)==null||f.blur(),a.preventDefault(),a.stopPropagation();return;case"Backspace":case u:if(((s=i.value)==null?void 0:s.selectionStart)===0&&i.value.selectionEnd===0&&e.inputChips.length>0){y[e.inputChips.length-1].focus(),a.preventDefault(),a.stopPropagation();return}break}}function U(){g.value=!0}function H(){g.value=!1}function G(a){var u;!((u=c.value)!=null&&u.contains(a.relatedTarget))&&r.value&&k()}return t.watch(t.toRef(e,"inputChips"),a=>{const u=a.find(f=>f.value===p.value);C.value=u?"error":"default"}),t.watch(p,()=>{C.value==="error"&&(C.value="default")}),{rootElement:c,chipsContainer:v,separateInputWrapper:h,input:i,computedInputValue:p,rootClasses:N,rootStyle:q,otherAttrs:K,assignChipTemplateRef:z,handleChipClick:L,handleChipRemove:W,moveChipFocus:O,onInputKeydown:j,focusInput:m,onInputFocus:U,onInputBlur:H,onFocusOut:G,computedDisabled:b,statusMessageContent:l}}}),ie={ref:"chipsContainer",class:"cdx-chip-input__chips",role:"listbox","aria-orientation":"horizontal"},ue=["readonly","disabled"],re={key:0,ref:"separateInputWrapper",class:"cdx-chip-input__separate-input"},le=["readonly","disabled"],se={class:"cdx-chip-input__aria-status",role:"status","aria-live":"polite"};function pe(e,o,d,c,v,h){const l=t.resolveComponent("cdx-input-chip");return t.openBlock(),t.createElementBlock("div",{ref:"rootElement",class:t.normalizeClass(["cdx-chip-input",e.rootClasses]),style:t.normalizeStyle(e.rootStyle),onClick:o[8]||(o[8]=n=>e.disabled||e.readonly?null:e.focusInput),onFocusout:o[9]||(o[9]=(...n)=>e.onFocusOut&&e.onFocusOut(...n))},[t.createElementVNode("div",ie,[(t.openBlock(!0),t.createElementBlock(t.Fragment,null,t.renderList(e.inputChips,(n,i)=>(t.openBlock(),t.createBlock(l,{key:n.value,ref_for:!0,ref:r=>e.assignChipTemplateRef(r,i),class:t.normalizeClass(["cdx-chip-input__item",n.className]),icon:n.icon,readonly:e.readonly,disabled:e.computedDisabled,onClickChip:r=>e.handleChipClick(n),onRemoveChip:r=>e.handleChipRemove(n,i,r),onArrowLeft:r=>e.moveChipFocus("left",i),onArrowRight:r=>e.moveChipFocus("right",i)},{default:t.withCtx(()=>{var r;return[t.createTextVNode(t.toDisplayString((r=n.label)!=null?r:n.value),1)]}),_:2},1032,["class","icon","readonly","disabled","onClickChip","onRemoveChip","onArrowLeft","onArrowRight"]))),128)),e.separateInput?t.createCommentVNode("v-if",!0):t.withDirectives((t.openBlock(),t.createElementBlock("input",t.mergeProps({key:0,ref:"input","onUpdate:modelValue":o[0]||(o[0]=n=>e.computedInputValue=n),class:"cdx-chip-input__input",readonly:e.readonly,disabled:e.computedDisabled},e.otherAttrs,{onBlur:o[1]||(o[1]=(...n)=>e.onInputBlur&&e.onInputBlur(...n)),onFocus:o[2]||(o[2]=(...n)=>e.onInputFocus&&e.onInputFocus(...n)),onKeydown:o[3]||(o[3]=(...n)=>e.onInputKeydown&&e.onInputKeydown(...n))}),null,16,ue)),[[t.vModelDynamic,e.computedInputValue]])],512),e.separateInput?(t.openBlock(),t.createElementBlock("div",re,[t.withDirectives(t.createElementVNode("input",t.mergeProps({ref:"input","onUpdate:modelValue":o[4]||(o[4]=n=>e.computedInputValue=n),class:"cdx-chip-input__input",readonly:e.readonly,disabled:e.computedDisabled},e.otherAttrs,{onBlur:o[5]||(o[5]=(...n)=>e.onInputBlur&&e.onInputBlur(...n)),onFocus:o[6]||(o[6]=(...n)=>e.onInputFocus&&e.onInputFocus(...n)),onKeydown:o[7]||(o[7]=(...n)=>e.onInputKeydown&&e.onInputKeydown(...n))}),null,16,le),[[t.vModelDynamic,e.computedInputValue]])],512)):t.createCommentVNode("v-if",!0),t.createElementVNode("div",se,t.toDisplayString(e.statusMessageContent),1)],38)}const de=E._export_sfc(ae,[["render",pe]]);module.exports=de;