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

Codex Design System for Wikimedia

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