maz-ui
Version:
A standalone components library for Vue.Js 3 & Nuxt.Js 3
1 lines • 8.66 kB
JavaScript
import{t as _plugin_vue_export_helper_default}from"./_plugin-vue_export-helper.ChmETRGw.js";import{t as hasSlotContent}from"./hasSlotContent.akaXJLAp.js";import{useInstanceUniqId}from"../composables/useInstanceUniqId.js";import{t as onAutofillSync}from"./autofillSync.ClCtzXjh.js";import{computed,createBlock,createCommentVNode,createElementBlock,createElementVNode,createVNode,defineAsyncComponent,defineComponent,mergeProps,normalizeClass,normalizeStyle,onBeforeUnmount,onMounted,openBlock,ref,renderSlot,resolveDynamicComponent,toDisplayString,toHandlers,unref,useSlots,vModelDynamic,withCtx,withDirectives,withModifiers}from"vue";import{debounce}from"@maz-ui/utils/helpers/debounce";import{MazEye}from"@maz-ui/icons/lazy/MazEye";import{MazEyeSlash}from"@maz-ui/icons/lazy/MazEyeSlash";import '../assets/MazInput.CKB0yQH-.css';var _hoisted_1=[`for`];var _hoisted_2={key:0,class:`m-input-wrapper-left`};var _hoisted_3=[`id`,`placeholder`,`aria-label`,`type`,`inputmode`,`name`,`autocomplete`,`disabled`,`readonly`,`required`];var _hoisted_4={key:1,class:`m-input-wrapper-right`};var MazInput_default=_plugin_vue_export_helper_default(defineComponent({inheritAttrs:!1,__name:`MazInput`,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},topLabel:{},assistiveText:{},color:{default:`primary`},type:{default:`text`},required:{type:Boolean,default:!1},disabled:{type:Boolean,default:!1},readonly:{type:Boolean},id:{default:void 0},error:{type:Boolean,default:!1},success:{type:Boolean,default:!1},warning:{type:Boolean,default:!1},hint:{default:void 0},inputClasses:{default:void 0},border:{type:Boolean,default:!0},inputmode:{default:`text`},size:{default:`md`},debounce:{type:[Boolean,Number],default:!1},autoFocus:{type:Boolean,default:!1},borderActive:{type:Boolean,default:!1},leftIcon:{type:[String,Function,Object],default:void 0},rightIcon:{type:[String,Function,Object],default:void 0},roundedSize:{default:`base`},block:{type:Boolean},name:{},autocomplete:{},loading:{type:Boolean,default:!1}},emits:[`update:model-value`,`focus`,`blur`,`click`,`change`,`input`],setup(__props,{emit:__emit}){let props=__props;let emits=__emit;let MazIcon=defineAsyncComponent(()=>import(`../components/MazIcon.js`));let MazBtn=defineAsyncComponent(()=>import(`../components/MazBtn.js`));let MazSpinner=defineAsyncComponent(()=>import(`../components/MazSpinner.js`));let hasPasswordVisible=ref(!1);let input=ref();let instanceId=useInstanceUniqId({componentName:`MazInput`,providedId:props.id});let autofillCleanup;onMounted(()=>{props.autoFocus&&input.value?.focus(),input.value&&(autofillCleanup=onAutofillSync(input.value,value=>{value!==props.modelValue&&emits(`update:model-value`,value)}))}),onBeforeUnmount(()=>{autofillCleanup?.()});let isPasswordType=computed(()=>props.type===`password`);let inputType=computed(()=>hasPasswordVisible.value?`text`:props.type);let borderStyle=computed(()=>{if(props.border)return props.error?`maz-border-destructive`:props.success?`maz-border-success`:props.warning?`maz-border-warning`:`--default-border`});let slots=useSlots();let debounceEmitValue=debounce(value=>{emits(`update:model-value`,value)},typeof props.debounce==`number`?props.debounce:500);function emitValue(value){if(props.debounce)return debounceEmitValue(value);emits(`update:model-value`,value)}let model=computed({get:()=>props.modelValue,set:value=>emitValue(value)});let hasLabel=computed(()=>!!props.label||!!props.hint);let alwaysUp=computed(()=>[`date`,`month`,`week`].includes(props.type));function hasRightPart(){return hasSlotContent(slots[`right-icon`])||isPasswordType.value||!!props.rightIcon||props.loading}function hasLeftPart(){return hasSlotContent(slots[`left-icon`])||!!props.leftIcon}function focus(event){emits(`focus`,event)}function blur(event){emits(`blur`,event)}function change(event){return emits(`change`,event)}function emitInputEvent(event){return emits(`input`,event)}let stateColor=computed(()=>{if(props.error)return`!maz-text-destructive-600`;if(props.success)return`!maz-text-success-600`;if(props.warning)return`!maz-text-warning-600`});return(_ctx,_cache)=>(openBlock(),createElementBlock(`div`,{class:normalizeClass([`m-input m-reset-css`,[{"--border-active":__props.borderActive,"--always-up":alwaysUp.value,"--has-placeholder":!!__props.placeholder,"--has-label":hasLabel.value,"--is-readonly":__props.readonly,"--has-z-2":__props.error||__props.warning||__props.success,"--has-state":__props.error||__props.warning||__props.success,"--block":__props.block},props.class,`--${__props.color}`]]),style:normalizeStyle([__props.style,{"--maz-input-color":`hsl(var(--maz-${__props.color}-100))`}])},[__props.topLabel?(openBlock(),createElementBlock(`label`,{key:0,for:unref(instanceId),class:normalizeClass([`m-input-top-label`,stateColor.value])},toDisplayString(__props.topLabel),11,_hoisted_1)):createCommentVNode(``,!0),createElementVNode(`div`,{class:normalizeClass([`m-input-wrapper`,[__props.inputClasses,borderStyle.value,`--rounded-${__props.roundedSize}`,{"--block":__props.block,"--border":__props.border}]])},[hasLeftPart()?(openBlock(),createElementBlock(`div`,_hoisted_2,[unref(hasSlotContent)(unref(slots)[`left-icon`])||__props.leftIcon?renderSlot(_ctx.$slots,`left-icon`,{key:0},()=>[typeof __props.leftIcon==`string`?(openBlock(),createBlock(unref(MazIcon),{key:0,name:__props.leftIcon,class:normalizeClass([`maz-text-xl`,stateColor.value||`maz-text-muted`])},null,8,[`name`,`class`])):__props.leftIcon?(openBlock(),createBlock(resolveDynamicComponent(__props.leftIcon),{key:1,class:normalizeClass([`maz-text-xl`,stateColor.value||`maz-text-muted`])},null,8,[`class`])):createCommentVNode(``,!0)],!0):createCommentVNode(``,!0)])):createCommentVNode(``,!0),createElementVNode(`div`,{class:normalizeClass([`m-input-wrapper-input`,[`--${__props.size}`,{"--top-label":!!__props.topLabel,"--has-left-icon":hasLeftPart(),"--has-right-icon":hasRightPart()}]])},[withDirectives(createElementVNode(`input`,mergeProps({id:unref(instanceId)},_ctx.$attrs,{ref_key:`input`,ref:input,"onUpdate:modelValue":_cache[0]||=$event=>model.value=$event,placeholder:__props.placeholder||` `,"aria-label":__props.label||__props.placeholder,type:inputType.value,inputmode:__props.inputmode,name:__props.name,autocomplete:__props.autocomplete,disabled:__props.disabled,readonly:__props.readonly,required:__props.required,class:`m-input-input`},toHandlers({blur,focus,change,input:emitInputEvent},!0),{onClick:_cache[1]||=$event=>_ctx.$emit(`click`,$event)}),null,16,_hoisted_3),[[vModelDynamic,model.value]]),__props.label||__props.hint?(openBlock(),createElementBlock(`span`,{key:0,class:normalizeClass([`m-input-label`,stateColor.value])},toDisplayString(__props.hint||__props.label),3)):createCommentVNode(``,!0)],2),hasRightPart()?(openBlock(),createElementBlock(`div`,_hoisted_4,[unref(hasSlotContent)(unref(slots)[`right-icon`])||__props.rightIcon?renderSlot(_ctx.$slots,`right-icon`,{key:0},()=>[typeof __props.rightIcon==`string`?(openBlock(),createBlock(unref(MazIcon),{key:0,name:__props.rightIcon,class:normalizeClass([`maz-text-xl`,stateColor.value||`maz-text-muted`])},null,8,[`name`,`class`])):__props.rightIcon?(openBlock(),createBlock(resolveDynamicComponent(__props.rightIcon),{key:1,class:normalizeClass([`maz-text-xl`,stateColor.value||`maz-text-muted`])},null,8,[`class`])):createCommentVNode(``,!0)],!0):createCommentVNode(``,!0),isPasswordType.value?(openBlock(),createBlock(unref(MazBtn),{key:1,color:`transparent`,tabindex:`-1`,size:`mini`,onClick:_cache[2]||=withModifiers($event=>hasPasswordVisible.value=!hasPasswordVisible.value,[`stop`])},{default:withCtx(()=>[hasPasswordVisible.value?(openBlock(),createBlock(unref(MazEyeSlash),{key:0,class:`maz-text-xl maz-text-muted`})):(openBlock(),createBlock(unref(MazEye),{key:1,class:`maz-text-xl maz-text-muted`}))]),_:1})):createCommentVNode(``,!0),__props.loading?renderSlot(_ctx.$slots,`loader`,{key:2},()=>[createVNode(unref(MazSpinner),{color:__props.color},null,8,[`color`])],!0):createCommentVNode(``,!0)])):createCommentVNode(``,!0)],2),__props.assistiveText?(openBlock(),createElementBlock(`div`,{key:1,class:normalizeClass([`m-input-bottom-text`,[{"maz-text-destructive-600":__props.error,"maz-text-success-600":__props.success,"maz-text-warning-600":__props.warning,"maz-text-muted":!__props.error&&!__props.success&&!__props.warning}]])},toDisplayString(__props.assistiveText),3)):createCommentVNode(``,!0)],6))}}),[[`__scopeId`,`data-v-e765b66f`]]);export{MazInput_default as t};