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

Codex Design System for Wikimedia

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