maz-ui
Version:
A standalone components library for Vue.Js 3 & Nuxt.Js 3
1 lines • 5.29 kB
JavaScript
import{t as _plugin_vue_export_helper_default}from"./_plugin-vue_export-helper.ChmETRGw.js";import{t as MazInput_default}from"./MazInput.C8eCMnat.js";import{t as MazBtn_default}from"./MazBtn.DJj8H23m.js";import{Fragment,TransitionGroup,computed,createElementBlock,createTextVNode,createVNode,defineComponent,mergeProps,normalizeClass,normalizeStyle,openBlock,ref,renderList,toDisplayString,unref,withCtx,withKeys,withModifiers}from"vue";import{truthyFilter}from"@maz-ui/utils/helpers/truthyFilter";import{MazTrash}from"@maz-ui/icons/lazy/MazTrash";import '../assets/MazInputTags.BmtP1QsH.css';var MazInputTags_default=_plugin_vue_export_helper_default(defineComponent({inheritAttrs:!1,__name:`MazInputTags`,props:{style:{type:[Boolean,null,String,Object,Array],default:void 0},class:{type:[Boolean,null,String,Object,Array],default:void 0},modelValue:{default:void 0},placeholder:{default:void 0},label:{default:void 0},disabled:{type:Boolean,default:!1},error:{type:Boolean,default:!1},success:{type:Boolean,default:!1},warning:{type:Boolean,default:!1},size:{default:`md`},color:{default:`primary`},block:{type:Boolean},addTagsOnBlur:{type:Boolean,default:!0},hint:{}},emits:[`update:model-value`],setup(__props,{emit:__emit}){let props=__props;let emits=__emit;let isFocused=ref(!1);let inputValue=ref();let tagsHoveredId=ref();let lastIdToDelete=ref();let currentDeleteTimeout=ref();let tags=computed(()=>props.modelValue?.map(tag=>({tag,id:`${Date.now()}-${Math.random().toString(36).slice(2)}`})));function addTags(event){if(inputValue.value){lastIdToDelete.value=void 0,event.preventDefault();let newValues=inputValue.value.trim().split(`,`).map(value=>value.trim()===`,`?void 0:value.trim()).filter(truthyFilter).filter(value=>!props.modelValue?.filter(truthyFilter)?.includes(value));emits(`update:model-value`,props.modelValue?[...props.modelValue,...newValues]:[...newValues]),inputValue.value=void 0}}let borderStyle=computed(()=>{if(props.error)return`maz-border-destructive`;if(props.success)return`maz-border-success`;if(props.warning)return`maz-border-warning`;if(isFocused.value){if(props.color===`primary`)return`maz-border-primary`;if(props.color===`secondary`)return`maz-border-secondary`;if(props.color===`info`)return`maz-border-info`;if(props.color===`destructive`)return`maz-border-destructive`;if(props.color===`success`)return`maz-border-success`;if(props.color===`warning`)return`maz-border-warning`}return``});function removeLastTag(){inputValue.value||tags.value&&tags.value?.length===0||(currentDeleteTimeout.value&&clearTimeout(currentDeleteTimeout.value),lastIdToDelete.value?(removeTag(lastIdToDelete.value),lastIdToDelete.value=void 0):(lastIdToDelete.value=tags.value?.at(-1)?.id,currentDeleteTimeout.value=setTimeout(()=>{lastIdToDelete.value=void 0},2e3)))}function removeTag(id){let tagsArray=tags.value?.filter(tag=>tag.id!==id).map(tag=>tag.tag);emits(`update:model-value`,tagsArray)}let buttonSize=computed(()=>props.size===`mini`||props.size===`xs`?`mini`:props.size===`sm`?`xs`:props.size===`md`?`sm`:props.size===`lg`?`md`:props.size===`xl`?`lg`:props.size);return(_ctx,_cache)=>(openBlock(),createElementBlock(`div`,{class:normalizeClass([`m-input-tags m-reset-css`,[borderStyle.value,`--${__props.color}`,`--${__props.size}`,props.class,{"--block":__props.block}]]),style:normalizeStyle(__props.style),onFocusCapture:_cache[4]||=$event=>isFocused.value=!0,onBlurCapture:_cache[5]||=$event=>isFocused.value=!1},[createVNode(TransitionGroup,{name:`maz-tags`},{default:withCtx(()=>[(openBlock(!0),createElementBlock(Fragment,null,renderList(tags.value,({tag,id},i)=>(openBlock(),createElementBlock(`div`,{key:`tag-${i}`,class:`m-input-tags__wrapper`},[createVNode(MazBtn_default,{class:`m-input-tags__tag`,disabled:__props.disabled,size:buttonSize.value,color:tagsHoveredId.value===id||lastIdToDelete.value===id?`destructive`:__props.color,"right-icon":tagsHoveredId.value===id||lastIdToDelete.value===id?unref(MazTrash):void 0,onClick:withModifiers($event=>removeTag(id),[`stop`]),onMouseenter:$event=>tagsHoveredId.value=id,onFocus:$event=>tagsHoveredId.value=id,onMouseleave:_cache[0]||=$event=>tagsHoveredId.value=void 0,onBlur:_cache[1]||=$event=>tagsHoveredId.value=void 0},{default:withCtx(()=>[createTextVNode(toDisplayString(tag),1)]),_:2},1032,[`disabled`,`size`,`color`,`right-icon`,`onClick`,`onMouseenter`,`onFocus`])]))),128))]),_:1}),createVNode(MazInput_default,mergeProps({key:`input-tags`,modelValue:inputValue.value,"onUpdate:modelValue":_cache[2]||=$event=>inputValue.value=$event},_ctx.$attrs,{placeholder:__props.placeholder,label:__props.label,"aria-label":__props.label||__props.placeholder,error:__props.error,hint:__props.hint,success:__props.success,warning:__props.warning,disabled:__props.disabled,"top-label":void 0,"assistive-text":void 0,color:__props.color,block:__props.block,size:__props.size,"input-classes":`maz-w-full`,border:!1,class:`m-input-tags__input`,onKeydown:[withKeys(addTags,[`enter`]),withKeys(removeLastTag,[`delete`])],onBlur:_cache[3]||=$event=>__props.addTagsOnBlur?addTags($event):void 0}),null,16,[`modelValue`,`placeholder`,`label`,`aria-label`,`error`,`hint`,`success`,`warning`,`disabled`,`color`,`block`,`size`])],38))}}),[[`__scopeId`,`data-v-4c169294`]]);export{MazInputTags_default as t};