wiki.techinc.nl/resources/lib/codex/modules/CdxChipInput.cjs

"use strict";var w=(e,o,p)=>new Promise((v,d)=>{var c=u=>{try{n(p.next(u))}catch(r){d(r)}},i=u=>{try{n(p.throw(u))}catch(r){d(r)}},n=u=>u.done?v(u.value):Promise.resolve(u.value).then(c,i);n((p=p.apply(e,o)).next())});const t=require("vue"),T=require("./CdxButton.cjs"),g=require("./Icon.js"),z=require("./useI18n.cjs"),I=require("./_plugin-vue_export-helper.js"),y=require("./constants.js"),L=require("./useSplitAttributes.cjs"),O=require("./useFieldData.cjs"),M=require("./useComputedDirection.cjs"),U=t.defineComponent({name:"CdxInputChip",components:{CdxButton:T,CdxIcon:g.CdxIcon},props:{icon:{type:[String,Object],default:null},disabled:{type:Boolean,default:!1}},expose:["focus"],emits:["remove-chip","click-chip","arrow-left","arrow-right"],setup(e,{emit:o}){const p=t.ref(),v=t.computed(()=>({"cdx-input-chip--disabled":e.disabled})),d=z("cdx-input-chip-aria-description","Press Enter to edit or Delete to remove");function c(i){var n;switch(i.key){case"Enter":o("click-chip"),i.preventDefault(),i.stopPropagation();break;case"Escape":(n=p.value)==null||n.blur(),i.preventDefault(),i.stopPropagation();break;case"Backspace":case"Delete":o("remove-chip",i.key),i.preventDefault(),i.stopPropagation();break;case"ArrowLeft":o("arrow-left"),i.preventDefault(),i.stopPropagation();break;case"ArrowRight":o("arrow-right"),i.preventDefault(),i.stopPropagation();break}}return{rootElement:p,rootClasses:v,ariaDescription:d,onKeydown:c,cdxIconClose:g.X3}},methods:{focus(){this.$refs.rootElement.focus()}}}),j=["aria-description"],H={class:"cdx-input-chip__text"};function X(e,o,p,v,d,c){const i=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:"0",role:"option","aria-description":e.ariaDescription,onKeydown:o[1]||(o[1]=(...u)=>e.onKeydown&&e.onKeydown(...u)),onClick:o[2]||(o[2]=u=>e.$emit("click-chip"))},[e.icon?(t.openBlock(),t.createBlock(i,{key:0,icon:e.icon,size:"small"},null,8,["icon"])):t.createCommentVNode("v-if",!0),t.createElementVNode("span",H,[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(u=>e.$emit("remove-chip","button"),["stop"]))},{default:t.withCtx(()=>[t.createVNode(i,{icon:e.cdxIconClose,size:"x-small"},null,8,["icon"])]),_:1},8,["disabled"])],42,j)}const G=I._export_sfc(U,[["render",X]]),J=y.makeStringTypeValidator(y.ValidationStatusTypes),Q=t.defineComponent({name:"CdxChipInput",components:{CdxInputChip:G},inheritAttrs:!1,props:{inputChips:{type:Array,required:!0},separateInput:{type:Boolean,default:!1},status:{type:String,default:"default",validator:J},disabled:{type:Boolean,default:!1}},emits:["update:input-chips"],setup(e,{emit:o,attrs:p}){const v=t.ref(),d=M(v),c=t.ref(),i=t.ref(""),n=t.ref("default"),u=t.computed(()=>n.value==="error"||e.status==="error"?"error":"default"),{computedDisabled:r,computedStatus:B}=O(t.toRef(e,"disabled"),u),C=t.ref(!1),D=t.computed(()=>({"cdx-chip-input--has-separate-input":e.separateInput,["cdx-chip-input--status-".concat(B.value)]:!0,"cdx-chip-input--focused":C.value,"cdx-chip-input--disabled":r.value})),{rootClasses:$,rootStyle:V,otherAttrs:E}=L(p,D),m=[];function F(s,a){s!==null&&(m[a]=s)}const h=()=>{c.value.focus()};function k(){e.inputChips.find(s=>s.value===i.value)?n.value="error":i.value.length>0&&(o("update:input-chips",e.inputChips.concat({value:i.value})),i.value="")}function b(s){o("update:input-chips",e.inputChips.filter(a=>a.value!==s.value))}function A(s,a){const f=d.value==="ltr"&&s==="left"||d.value==="rtl"&&s==="right"?-1:1,l=a+f;if(!(l<0)){if(l>=e.inputChips.length){h();return}m[l].focus()}}function S(s){return w(this,null,function*(){k(),yield t.nextTick(),b(s),i.value=s.value,h()})}function R(s,a,f){if(f==="button")h();else if(f==="Backspace"){const l=a===0?1:a-1;l<e.inputChips.length?m[l].focus():h()}else if(f==="Delete"){const l=a+1;l<e.inputChips.length?m[l].focus():h()}b(s)}function q(s){var f,l;const a=d.value==="rtl"?"ArrowRight":"ArrowLeft";switch(s.key){case"Enter":if(i.value.length>0){k(),s.preventDefault(),s.stopPropagation();return}break;case"Escape":(f=c.value)==null||f.blur(),s.preventDefault(),s.stopPropagation();return;case"Backspace":case a:if(((l=c.value)==null?void 0:l.selectionStart)===0&&c.value.selectionEnd===0&&e.inputChips.length>0){m[e.inputChips.length-1].focus(),s.preventDefault(),s.stopPropagation();return}break}}function K(){C.value=!0}function P(){C.value=!1}function N(s){v.value.contains(s.relatedTarget)||k()}return t.watch(t.toRef(e,"inputChips"),s=>{const a=s.find(f=>f.value===i.value);n.value=a?"error":"default"}),t.watch(i,()=>{n.value==="error"&&(n.value="default")}),{rootElement:v,input:c,inputValue:i,rootClasses:$,rootStyle:V,otherAttrs:E,assignChipTemplateRef:F,handleChipClick:S,handleChipRemove:R,moveChipFocus:A,onInputKeydown:q,focusInput:h,onInputFocus:K,onInputBlur:P,onFocusOut:N,computedDisabled:r}}}),W={class:"cdx-chip-input__chips",role:"listbox","aria-orientation":"horizontal"},Y=["disabled"],Z={key:0,class:"cdx-chip-input__separate-input"},x=["disabled"];function _(e,o,p,v,d,c){const i=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.focusInput&&e.focusInput(...n)),onFocusout:o[9]||(o[9]=(...n)=>e.onFocusOut&&e.onFocusOut(...n))},[t.createElementVNode("div",W,[(t.openBlock(!0),t.createElementBlock(t.Fragment,null,t.renderList(e.inputChips,(n,u)=>(t.openBlock(),t.createBlock(i,{key:n.value,ref_for:!0,ref:r=>e.assignChipTemplateRef(r,u),class:"cdx-chip-input__item",icon:n.icon,disabled:e.computedDisabled,onClickChip:r=>e.handleChipClick(n),onRemoveChip:r=>e.handleChipRemove(n,u,r),onArrowLeft:r=>e.moveChipFocus("left",u),onArrowRight:r=>e.moveChipFocus("right",u)},{default:t.withCtx(()=>[t.createTextVNode(t.toDisplayString(n.value),1)]),_:2},1032,["icon","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.inputValue=n),class:"cdx-chip-input__input",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,Y)),[[t.vModelDynamic,e.inputValue]])]),e.separateInput?(t.openBlock(),t.createElementBlock("div",Z,[t.withDirectives(t.createElementVNode("input",t.mergeProps({ref:"input","onUpdate:modelValue":o[4]||(o[4]=n=>e.inputValue=n),class:"cdx-chip-input__input",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,x),[[t.vModelDynamic,e.inputValue]])])):t.createCommentVNode("v-if",!0)],38)}const ee=I._export_sfc(Q,[["render",_]]);module.exports=ee;