| blob | 62eadc498866de7a40eeac0f342e0b09d0e4e1c2 |
1 "use strict";var V=(e,o,d)=>new Promise((c,v)=>{var h=a=>{try{n(d.next(a))}catch(r){v(r)}},l=a=>{try{n(d.throw(a))}catch(r){v(r)}},n=a=>a.done?c(a.value):Promise.resolve(a.value).then(h,l);n((d=d.apply(e,o)).next())});const t=require("vue"),G=require("./CdxButton.cjs"),$=require("./Icon.js"),k=require("./useI18n.cjs"),E=require("./_plugin-vue_export-helper.js"),B=require("./constants.js"),J=require("./useSplitAttributes.cjs"),Q=require("./useFieldData.cjs"),X=require("./useComputedDirection.cjs"),Y=require("./useOptionalModelWrapper.js"),Z=t.defineComponent({name:"CdxInputChip",components:{CdxButton:G,CdxIcon:$.CdxIcon},props:{icon:{type:[String,Object],default:null},disabled:{type:Boolean,default:!1},readonly:{type:Boolean,default:!1}},expose:["focus"],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})),h=k("cdx-input-chip-aria-description","Press Enter to edit or Delete to remove");function l(n){var a;switch(n.key){case"Enter":o("click-chip"),n.preventDefault(),n.stopPropagation();break;case"Escape":(a=c.value)==null||a.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:$._3,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]=(...a)=>e.onKeydown&&e.onKeydown(...a)),onClick:o[2]||(o[2]=a=>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,onClick:o[0]||(o[0]=t.withModifiers(a=>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(Z,[["render",te]]),oe=B.makeStringTypeValidator(B.ValidationStatusTypes),ie=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"],setup(e,{emit:o,attrs:d}){const c=t.ref(),v=t.ref(),h=t.ref(),l=t.ref(""),n=X(c),a=t.ref(),r=t.inject(B.AllowArbitraryKey,t.ref(!0)),A=t.ref(""),p=Y.useOptionalModelWrapper(A,t.toRef(e,"inputValue"),o,"update:input-value"),C=t.ref("default"),F=t.computed(()=>C.value==="error"||e.status==="error"?"error":"default"),{computedDisabled:b,computedStatus:S}=Q(t.toRef(e,"disabled"),F),g=t.ref(!1),R=t.computed(()=>({"cdx-chip-input--has-separate-input":e.separateInput,["cdx-chip-input--status-".concat(S.value)]:!0,"cdx-chip-input--focused":g.value,"cdx-chip-input--disabled":b.value,"cdx-chip-input--readonly":e.readonly})),{rootClasses:q,rootStyle:K,otherAttrs:N}=J(d,R),y=[],I=t.ref(null),P=t.computed(()=>I.value?I.value.value:""),M=k("cdx-chip-input-chip-added",i=>"Chip ".concat(i," was added."),[p]),T=k("cdx-chip-input-chip-removed",i=>"Chip ".concat(i," was removed."),[P]);function z(i,u){i!==null&&(y[u]=i)}const m=()=>{a.value.focus()};function w(){e.inputChips.find(i=>i.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(i){e.readonly||b.value||o("update:input-chips",e.inputChips.filter(u=>u.value!==i.value))}function O(i,u){const f=n.value==="ltr"&&i==="left"||n.value==="rtl"&&i==="right"?-1:1,s=u+f;if(!(s<0)){if(s>=e.inputChips.length){m();return}y[s].focus()}}function L(i){return V(this,null,function*(){var u;e.readonly||b.value||(w(),yield t.nextTick(),D(i),p.value=(u=i.label)!=null?u:i.value,m())})}function W(i,u,f){if(I.value=i,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(i)}function j(i){var f,s;const u=n.value==="rtl"?"ArrowRight":"ArrowLeft";switch(i.key){case"Enter":if(p.value.toString().length>0&&r.value){w(),i.preventDefault(),i.stopPropagation();return}break;case"Escape":(f=a.value)==null||f.blur(),i.preventDefault(),i.stopPropagation();return;case"Backspace":case u:if(((s=a.value)==null?void 0:s.selectionStart)===0&&a.value.selectionEnd===0&&e.inputChips.length>0){y[e.inputChips.length-1].focus(),i.preventDefault(),i.stopPropagation();return}break}}function U(){g.value=!0}function x(){g.value=!1}function H(i){var u;!((u=c.value)!=null&&u.contains(i.relatedTarget))&&r.value&&w()}return t.watch(t.toRef(e,"inputChips"),i=>{const u=i.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:a,computedInputValue:p,rootClasses:q,rootStyle:K,otherAttrs:N,assignChipTemplateRef:z,handleChipClick:L,handleChipRemove:W,moveChipFocus:O,onInputKeydown:j,focusInput:m,onInputFocus:U,onInputBlur:x,onFocusOut:H,computedDisabled:b,statusMessageContent:l}}}),ae={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",ae,[(t.openBlock(!0),t.createElementBlock(t.Fragment,null,t.renderList(e.inputChips,(n,a)=>(t.openBlock(),t.createBlock(l,{key:n.value,ref_for:!0,ref:r=>e.assignChipTemplateRef(r,a),class:"cdx-chip-input__item",icon:n.icon,readonly:e.readonly,disabled:e.computedDisabled,onClickChip:r=>e.handleChipClick(n),onRemoveChip:r=>e.handleChipRemove(n,a,r),onArrowLeft:r=>e.moveChipFocus("left",a),onArrowRight:r=>e.moveChipFocus("right",a)},{default:t.withCtx(()=>{var r;return[t.createTextVNode(t.toDisplayString((r=n.label)!=null?r:n.value),1)]}),_:2},1032,["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(ie,[["render",pe]]);module.exports=de;