vue3-float-label/dist/vue3-float-label.umd.js

A Vue 3 component for float labels.

(function(e,t){typeof exports==`object`&&typeof module<`u`?t(exports,require("vue")):typeof define==`function`&&define.amd?define([`exports`,`vue`],t):(e=typeof globalThis<`u`?globalThis:e||self,t(e.Vue3FloatLabel={},e.Vue))})(this,function(e,t){Object.defineProperty(e,Symbol.toStringTag,{value:`Module`});var n={key:0,class:`float-label__label float-label--no-click`},r={class:`float-label__label__text`},i=[`for`],a={key:0,class:`float-label__label__bg`},o={class:`float-label__label__text`},s=`[type=date], [type=datetime-local], [type=datetime], [type=email], [type=month], [type=number], [type=password], [type=search], [type=tel], [type=text], [type=time], [type=url], [type=week], textarea, select`;e.FloatLabel={__name:`FloatLabel`,props:{label:{type:String,default:``},float:{type:Boolean,default:null},onFocus:{type:Boolean,default:!1}},setup(e){let c=e,l=(0,t.ref)(null),u=(0,t.ref)(``),d=(0,t.ref)(``),f=(0,t.ref)(null),p=(0,t.ref)({}),m=(0,t.ref)(``),h=(0,t.ref)(``),g=(0,t.ref)(!1),_=(0,t.ref)(!1),v=(0,t.ref)(!1),y=(0,t.computed)(()=>c.label),b=(0,t.computed)(()=>h.value===`select`?!0:d.value&&u.value!==d.value),x=(0,t.computed)(()=>{let e=!1;return e=c.float?!0:g.value&&g.value!==`0`,e}),S=()=>{u.value=y.value?c.label:d.value},C=()=>p.value.getAttribute(`id`),w=()=>`10000000-1000-4000-8000-100000000000`.replace(/[018]/g,e=>(e^crypto.getRandomValues(new Uint8Array(1))[0]&15>>e/4).toString(16)),T=()=>{switch(h.value){case`input`:case`textarea`:return p.value.placeholder;case`select`:let e=p.value.querySelector(`option:disabled`);return e?e.innerHTML:``;default:return``}},E=()=>{m.value||(m.value=w(),p.value.id=m.value)},D=()=>{h.value===`select`?p.value.addEventListener(`change`,k):p.value.addEventListener(`input`,k)},O=()=>{h.value===`select`?p.value.removeEventListener(`change`,k):p.value.removeEventListener(`input`,k)},k=e=>{g.value=e.target.value.length>0};return(0,t.watch)(y,(e,t)=>{S()}),(0,t.onMounted)(()=>{f.value=c.label,p.value=l.value.querySelector(s),_.value=!!p.value,v.value=c.float===null,_.value?(m.value=C(),h.value=p.value?p.value.tagName.toLowerCase():``,g.value=!!p.value.value,d.value=T(),E(),v.value===!0&&setTimeout(()=>{D()},200)):d.value=``,S()}),(0,t.onBeforeUnmount)(()=>{_.value&&O()}),(e,s)=>((0,t.openBlock)(),(0,t.createElementBlock)(`div`,{class:(0,t.normalizeClass)([`float-label`,{"float-label--fade-anim":b.value,"float-label--on-focus":c.onFocus,"float-label--fixed":x.value}]),ref_key:`root`,ref:l},[(0,t.renderSlot)(e.$slots,`default`),(0,t.unref)(h)===``?((0,t.openBlock)(),(0,t.createElementBlock)(`div`,n,[(0,t.createElementVNode)(`span`,r,(0,t.toDisplayString)((0,t.unref)(u)),1)])):((0,t.openBlock)(),(0,t.createElementBlock)(`label`,{key:1,class:(0,t.normalizeClass)([`float-label__label`,{"float-label--no-click":(0,t.unref)(h)===`select`}]),for:(0,t.unref)(m)},[(0,t.unref)(h)===`textarea`?((0,t.openBlock)(),(0,t.createElementBlock)(`span`,a)):(0,t.createCommentVNode)(``,!0),s[0]||=(0,t.createTextVNode)(),(0,t.createElementVNode)(`span`,o,(0,t.toDisplayString)((0,t.unref)(u)),1)],10,i))],2))}}});