@volverjs/ui-vue
Version:
@volverjs/ui-vue is a lightweight Vue 3 component library to accompany @volverjs/style.
3 lines (2 loc) • 22.3 kB
JavaScript
import{unref as e,computed as t,isRef as l,defineComponent as a,h as o,useId as i,Fragment as n,provide as r,ref as u,toRefs as s,useAttrs as d,onMounted as v,watch as f,createElementBlock as c,openBlock as p,createVNode as m,withCtx as b,renderSlot as g,normalizeProps as h,guardReactiveProps as y,Transition as S,mergeProps as x,toHandlers as w,withDirectives as L,createElementVNode as $,normalizeClass as O,normalizeStyle as k,createCommentVNode as _,vShow as B,nextTick as E,inject as V,createBlock as I,createTextVNode as j,toDisplayString as A,mergeDefaults as N,useSlots as H,vModelText as F,createSlots as C,renderList as z,withModifiers as D}from"vue";import{autoPlacement as P,flip as T,shift as q,size as R,offset as W,arrow as M,useFloating as J,autoUpdate as K}from"@floating-ui/vue";import{useMutationObserver as U,useVModel as G,onClickOutside as Q,useFocusWithin as X,useElementHover as Y,onKeyStroke as Z,useFocus as ee,useStorage as te,useElementVisibility as le}from"@vueuse/core";import ae from"mitt";import{iconLoaded as oe,Icon as ie,addIcon as ne}from"@iconify/vue";const re={prefix:"normal"};var ue=/* @__PURE__ */(e=>(e.local="local",e.session="session",e))(ue||{}),se=/* @__PURE__ */(e=>(e.absolute="absolute",e.fixed="fixed",e))(se||{}),de=/* @__PURE__ */(e=>(e.left="left",e.right="right",e.top="top",e.bottom="bottom",e))(de||{}),ve=/* @__PURE__ */(e=>(e.topStart="top-start",e.topEnd="top-end",e.bottomStart="bottom-start",e.bottomEnd="bottom-end",e.leftStart="left-start",e.leftEnd="left-end",e.rightStart="right-start",e.rightEnd="right-end",e))(ve||{}),fe=/* @__PURE__ */(e=>(e.before="before",e.after="after",e))(fe||{}),ce=/* @__PURE__ */(e=>(e.button="button",e.submit="submit",e.reset="reset",e))(ce||{}),pe=/* @__PURE__ */(e=>(e.nuxtLink="nuxt-link",e.routerLink="router-link",e.a="a",e.button="button",e))(pe||{}),me=/* @__PURE__ */(e=>(e.button="button",e.link="link",e.menuitem="menuitem",e))(me||{}),be=/* @__PURE__ */(e=>(e.listbox="listbox",e.menu="menu",e))(be||{}),ge=/* @__PURE__ */(e=>(e.option="option",e.presentation="presentation",e))(ge||{});const he=Symbol.for("volver"),ye=Symbol.for("dropdownTrigger"),Se=Symbol.for("dropdownItem"),xe=Symbol.for("dropdownAction"),we={valid:{type:Boolean,default:!1},validLabel:{type:[String,Array],default:void 0}},Le={invalid:{type:Boolean,default:!1},invalidLabel:{type:[String,Array],default:void 0}},$e={loading:{type:Boolean,default:!1},loadingLabel:{type:String,default:"Loading..."}},Oe={disabled:{type:Boolean,default:!1}},ke={required:{type:Boolean,default:!1}},_e={selected:{type:Boolean,default:!1}},Be={label:{type:[String,Number],default:void 0}},Ee={readonly:{type:Boolean,default:!1}},Ve={modifiers:{type:[String,Array],default:void 0}},Ie={hintLabel:{type:String,default:""}},je={count:{type:[Boolean,String],default:!1,validator:e=>[!0,!1,"limit","countdown"].includes(e)}},Ae={debounce:{type:[Number,String],default:void 0}},Ne={icon:{type:[String,Object],default:void 0},iconPosition:{type:String,default:fe.before,validation:e=>Object.values(fe).includes(e)}},He={tabindex:{type:[String,Number],default:0}},Fe={floating:{type:Boolean,default:!1}},Ce={unselectable:{type:Boolean,default:!0}},ze={id:[String,Number]},De={placement:{type:String,default:de.bottom,validator:e=>Object.values(de).includes(e)||Object.values(ve).includes(e)},strategy:{type:String,default:void 0,validator:e=>Object.values(se).includes(e)},transitionName:{type:String,default:void 0},offset:{type:[Number,String,Object],default:0},shift:{type:[Boolean,Object],default:!1},flip:{type:[Boolean,Object],default:!0},size:{type:[Boolean,Object],default:()=>({padding:10})},autoPlacement:{type:[Boolean,Object],default:!1},arrow:{type:Boolean,default:!1},keepOpen:{type:Boolean,default:!1},autofocusFirst:{type:Boolean,default:!0},triggerWidth:{type:Boolean,default:!1}},Pe={...{...ze,name:{type:String,required:!0}},...{autofocus:{type:Boolean,default:!1}},...{autocomplete:{type:String,default:"off"}},...He,...Oe,...Ee,...we,...Le,...Ie,...$e,...Ve,...je,...Ae,...Ne,...Fe,...Be,minlength:{type:[String,Number],default:void 0},maxlength:{type:[String,Number],default:void 0},placeholder:{type:String,default:void 0},...ke};ce.button,pe.button;const Te={...Pe,...{storageType:{type:String,default:ue.local,validator:e=>Object.values(ue).includes(e)},storageKey:String},modelValue:String,cols:{type:[String,Number],default:20},rows:{type:[String,Number],default:2},wrap:{type:String,default:"soft"},spellcheck:{type:[Boolean,String],default:"default"},iconRemoveSuggestion:{type:[String,Object],default:"trash"},labelRemoveSuggestion:{type:String,default:"Remove suggestion"},maxSuggestions:{type:Number,default:5},selectOnFocus:{type:Boolean,default:!1},resizable:Boolean};function qe(t){return null==(l=e(t))||""===l||Array.isArray(l)&&0===l.length||!(l instanceof Date)&&"object"==typeof l&&0===Object.keys(l).length;var l}function Re(e){return Array.isArray(e)?e.filter(e=>"string"==typeof e).join(" "):e}const We={...ze,...De,...Ve,modelValue:{type:Boolean,default:void 0},reference:{type:Object,default:null},role:{type:String,default:be.menu,validator:e=>Object.values(be).includes(e)}},Me={focusOnHover:{type:Boolean,default:!1}},Je={...Oe,..._e,...Ce,...Ve,deselectHintLabel:{type:String},selectHintLabel:{type:String},selectedHintLabel:{type:String},focusOnHover:{type:Boolean,default:!1}};function Ke(e){return t(()=>String(e?.value||i()))}function Ue(l,a,o){return t(()=>{const t={[l]:!0},i="string"==typeof a?.value?a.value.split(" "):a?.value;return i&&Array.isArray(i)&&i.forEach(e=>{e&&(t[`${l}--${e}`]=!0)}),o&&Object.keys(o.value).forEach(a=>{t[`${l}--${a}`]=e(o.value[a])}),t})}const Ge=["id","tabindex","role","aria-labelledby"],Qe=/* @__PURE__ */a({name:"VvDropdown",inheritAttrs:!1,props:We,emits:["update:modelValue","beforeEnter","afterLeave","beforeExpand","beforeCollapse","afterExpand","afterCollapse","before-enter","after-leave","enter","afterEnter","enterCancelled","beforeLeave","leave","leaveCancelled"],setup(l,{expose:i,emit:V}){const I=l,j=V,{id:A}=s(I),N=Ke(A),H=d(),F=u("auto"),C=u("auto"),z=u(),D=u(),ee=u(),te=u(),le=t({get:()=>I.reference??z.value,set:e=>{z.value=e}}),oe=u(!1);v(()=>{U(D.value,()=>{oe.value="true"===window.getComputedStyle(D.value).getPropertyValue("--dropdown-custom-position")?.trim()},{attributeFilter:["style"],window:window})});const ie=t(()=>{const e=[];if(I.autoPlacement?"boolean"==typeof I.autoPlacement?e.push(P()):e.push(P(I.autoPlacement)):I.flip&&("boolean"==typeof I.flip?e.push(T({fallbackStrategy:"initialPlacement"})):e.push(T(I.flip))),I.shift&&("boolean"==typeof I.shift?e.push(q()):e.push(q(I.shift))),I.size){const t=({availableWidth:e,availableHeight:t})=>{F.value=`${e}px`,C.value=`${t}px`};"boolean"==typeof I.size?e.push(R({apply:t})):e.push(R({...I.size,apply:t}))}return I.offset&&(e.push(W(Number(I.offset))),["string","number"].includes(typeof I.offset)?e.push(W(Number(I.offset))):e.push(W(I.offset))),I.arrow&&e.push(M({element:ee})),e}),{x:ne,y:re,middlewareData:ue,placement:ve,strategy:fe}=J(le,D,{whileElementsMounted:(...e)=>K(...e,{animationFrame:I.strategy===se.fixed}),placement:t(()=>I.placement),strategy:t(()=>I.strategy),middleware:ie}),ce=t(()=>{if(oe.value)return;const e=I.triggerWidth&&le.value?`${le.value?.offsetWidth}px`:void 0;return{position:fe.value,top:`${re.value??0}px`,left:`${ne.value??0}px`,maxWidth:e?void 0:F.value,maxHeight:C.value,width:e}}),pe=t(()=>ve.value.split("-")[0]),me=t(()=>{if(oe.value)return;const e={[de.top]:de.bottom,[de.right]:de.left,[de.bottom]:de.top,[de.left]:de.right}[pe.value];return{left:void 0!==ue.value.arrow?.x?`${ue.value.arrow?.x}px`:void 0,top:void 0!==ue.value.arrow?.y?`${ue.value.arrow?.y}px`:void 0,[e]:-(ee.value?.offsetWidth??0)/2+"px"}}),he=G(I,"modelValue",j),xe=u(!1),we=t({get:()=>he.value??xe.value,set:e=>{void 0!==he.value?he.value=e:xe.value=e}});function Le(){we.value=!0}function $e(){we.value=!1}function Oe(){we.value=!we.value}function ke(e){le.value=e}Q(D,()=>{!I.keepOpen&&we.value&&(we.value=!1)},{ignore:[le]});const _e=t(()=>le.value?.getAttribute?.("id")??void 0),Be=t(()=>({"aria-controls":N.value,"aria-haspopup":!0,"aria-expanded":we.value})),{component:Ee,bus:Ve}=function({reference:e,id:t,expanded:l,aria:i}){const u=ae(),s=a({name:"VvDropdownTriggerProvider",setup(){r(ye,{reference:e,id:t,expanded:l,aria:i,bus:u})},render(){return o(n,{},this.$slots.default?.())}});return{bus:u,component:s}}({reference:le,id:N,expanded:we,aria:Be});Ve.on("click",Oe);const{role:Ie,modifiers:je}=s(I),Ae=Ue("vv-dropdown",je,t(()=>({arrow:I.arrow}))),{focused:Ne}=X(D);function He(e){return e?[...e.querySelectorAll('a[href], button, input, textarea, select, details, [tabindex]:not([tabindex="-1"])')].filter(e=>!e.hasAttribute("disabled")&&!e.getAttribute("aria-hidden")):[]}function Fe(){E(()=>{const e=He(D.value);e.length>0&&e[0].focus({preventScroll:!0})})}function Ce(){E(()=>{if(Ne.value){const e=He(D.value);if(0===e.length||!document.activeElement)return;const t=e.indexOf(document.activeElement);t<e.length-1?e[t+1].focus({preventScroll:!0}):e[0].focus({preventScroll:!0})}})}function ze(){E(()=>{if(Ne.value){const e=He(D.value);if(0===e.length||!document.activeElement)return;const t=e.indexOf(document.activeElement);t>0?e[t-1].focus({preventScroll:!0}):e[e.length-1].focus({preventScroll:!0})}})}f(we,e=>{e&&I.autofocusFirst&&Fe()}),i({toggle:Oe,show:Le,hide:$e,init:ke,focusFirst:Fe,focusFirstListElement:function(){E(()=>{const e=He(te.value);e.length>0&&e[0].focus({preventScroll:!0})})},focusNext:Ce,focusPrev:ze,customPosition:oe});const De=Y(D),{itemRole:Pe}=function({role:e,...l}){const a=t(()=>e.value===be.listbox?ge.option:ge.presentation);return r(Se,{role:a,...l}),{itemRole:a}}({role:Ie,expanded:we,focused:Ne,hovered:De});Z("Escape",e=>{we.value&&(e.preventDefault(),$e())}),Z("ArrowDown",e=>{we.value&&Ne.value&&(e.preventDefault(),Ce())}),Z("ArrowUp",e=>{we.value&&Ne.value&&(e.preventDefault(),ze())}),Z([" ","Enter"],e=>{const t=e.target;we.value&&Ne.value&&t&&t?.click()});const Te={"before-enter":()=>{j(we.value?"beforeExpand":"beforeCollapse"),j("beforeEnter")},"after-leave":()=>{j(we.value?"afterExpand":"afterCollapse"),j("afterLeave")},enter:()=>{j("enter")},"after-enter":()=>{j("afterEnter")},"enter-cancelled":()=>{j("enterCancelled")},"before-leave":()=>{j("beforeLeave")},leave:()=>{j("leave")},"leave-cancelled":()=>{j("leaveCancelled")}};return(t,l)=>(p(),c(n,null,[m(e(Ee),null,{default:b(()=>[g(t.$slots,"default",h(y({init:ke,show:Le,hide:$e,toggle:Oe,expanded:e(we),aria:e(Be)})))]),_:3}),m(S,x({name:t.transitionName},w(Te),{persisted:""}),{default:b(()=>[L($("div",{ref_key:"floatingEl",ref:D,style:k(e(ce)),class:O(e(Ae))},[I.arrow?(p(),c("div",{key:0,ref_key:"arrowEl",ref:ee,style:k(e(me)),class:"vv-dropdown__arrow"},null,4)):_("v-if",!0),g(t.$slots,"before",h(y({expanded:e(we)}))),$("div",x(e(H),{id:e(N),ref_key:"listEl",ref:te,tabindex:e(we)?void 0:-1,role:e(Ie),"aria-labelledby":e(_e),class:"vv-dropdown__list"}),[g(t.$slots,"items",h(y({role:e(Pe)})))],16,Ge),g(t.$slots,"after",h(y({expanded:e(we)})))],6),[[B,e(we)]])]),_:3},16,["name"])],64))}});const Xe=/* @__PURE__ */a({name:"VvDropdownItem",props:Me,setup(t){const l=t,{role:a,expanded:o}=V(Se,{}),i=u(null);!function({expanded:e}){r(xe,{role:u(me.menuitem),expanded:e})}({expanded:o});const n=Y(i),{focused:s}=ee(i),{focused:d}=X(i);return f(n,e=>{e&&l.focusOnHover&&(s.value=!0)}),(t,l)=>(p(),c("div",x({role:e(a)},{ref_key:"element",ref:i,class:["vv-dropdown__item",{"focus-visible":e(s)||e(d)}]}),[g(t.$slots,"default")],16))}}),Ye=["title"],Ze=/* @__PURE__ */a({name:"VvDropdownOption",props:Je,setup(l){const a=l,{modifiers:o}=s(a),i=Ue("vv-dropdown-option",o,t(()=>({disabled:a.disabled,selected:a.selected,unselectable:a.unselectable&&a.selected}))),n=t(()=>a.selected?a.unselectable?a.deselectHintLabel:a.selectedHintLabel:a.disabled?"":a.selectHintLabel);return(t,l)=>(p(),I(Xe,{class:O(e(i)),tabindex:t.disabled?-1:0,"aria-selected":t.selected,"aria-disabled":t.disabled,"focus-on-hover":t.focusOnHover},{default:b(()=>[g(t.$slots,"default"),$("span",{class:"vv-dropdown-option__hint",title:e(n)},[g(t.$slots,"hint",h(y({disabled:t.disabled,selected:t.selected,unselectable:t.unselectable})),()=>[j(A(e(n)),1)])],8,Ye)]),_:3},8,["class","tabindex","aria-selected","aria-disabled","focus-on-hover"]))}});function et(){return V(he,void 0)}const tt=/* @__PURE__ */a({name:"VvIcon",props:/* @__PURE__ */N({name:{},color:{},width:{},height:{},provider:{},prefix:{},src:{},horizontalFlip:{type:Boolean},verticalFlip:{type:Boolean},flip:{},mode:{},inline:{type:Boolean},rotate:{},onLoad:{type:Function},svg:{},modifiers:{}},re),setup(l){const a=l,o=t(()=>"string"==typeof a.rotate?Number.parseFloat(a.rotate):a.rotate),i=u(!0),n=et(),{modifiers:r}=s(a),d=Ue("vv-icon",r),v=t(()=>a.provider||n?.iconsProvider),f=t(()=>{const e=a.name??"",t=`@${v.value}:${a.prefix}:${e}`;if(oe(t))return t;const l=n?.iconsCollections.find(t=>{const l=`@${v.value}:${t.prefix}:${e}`;return oe(l)});return l?`@${v.value}:${l.prefix}:${e}`:e});function c(e){const t=function(e){let t;if("undefined"==typeof window){const{JSDOM:e}=require("jsdom");t=(new e).window}return(t?new t.DOMParser:new window.DOMParser).parseFromString(e,"text/html").querySelector("svg")}(e),l=t?.innerHTML.trim()||"";t&&l&&ne(`@${v.value}:${a.prefix}:${a.name}`,{body:l,height:t.viewBox.baseVal.height,width:t.viewBox.baseVal.width})}return n&&a.src&&!oe(`@${v.value}:${a.prefix}:${a.name}`)&&(i.value=!1,n.fetchIcon(a.src).then(e=>{e&&(c(e),i.value=!0)}).catch(e=>{throw new Error(`Error during fetch icon: ${e?.message}`)})),a.svg&&c(a.svg),(t,a)=>e(i)?(p(),I(e(ie),x({key:0,class:e(d)},{inline:l.inline,width:l.width,height:l.height,horizontalFlip:l.horizontalFlip,verticalFlip:l.verticalFlip,flip:l.flip,rotate:e(o),color:l.color,icon:e(f)},{onLoad:l.onLoad}),null,16,["class","onLoad"])):_("v-if",!0)}});function lt(e,l){const a=t(()=>"string"==typeof e?.value?{name:e?.value}:e?.value),o=t(()=>l?.value===fe.before?a.value:void 0),i=t(()=>l?.value===fe.after?a.value:void 0),n=t(()=>l?.value===de.left?a.value:void 0),r=t(()=>l?.value===de.right?a.value:void 0),u=t(()=>l?.value===de.top?a.value:void 0),s=t(()=>l?.value===de.bottom?a.value:void 0);return{hasIcon:a,hasIconLeft:n,hasIconRight:r,hasIconTop:u,hasIconBottom:s,hasIconBefore:o,hasIconAfter:i}}const at=["for"],ot={key:0,class:"vv-textarea__input-before"},it={class:"vv-textarea__inner"},nt=["id"],rt={key:1,class:"vv-textarea__input-after"},ut={key:2,class:"vv-textarea__limit"},st={class:"flex-1"},dt=["title","onClick"],vt=/* @__PURE__ */a({name:"VvTextarea",props:Te,emits:["update:modelValue","focus","blur","keyup","suggestion:selected","suggestion:removed"],setup(i,{emit:r}){const d=i,S=r,w=H(),k=et(),B=function(e,l,a){const o=et(),i=t(()=>{if(o&&o.defaults.value?.[e])return o.defaults.value[e]});return t(()=>{if(void 0===i.value)return a;const e=i.value,t=l,o=a;return Object.keys(t).reduce((l,a)=>{const i=o[a];if(l[a]=i,a in e){if(Array.isArray(t[a])){const o=t[a];o.length&&o[0]===i&&(l[a]=e[a])}if("function"==typeof t[a]&&(0,t[a])()===i&&(l[a]=e[a]),"object"==typeof t[a]){let o=t[a].default;"function"==typeof o&&(o=o()),"object"==typeof o?JSON.stringify(o)===JSON.stringify(i)&&(l[a]=e[a]):o===i&&(l[a]=e[a])}}return l},{})})}("VvTextarea",Te,d),E=u(),V=u(),N=u(),{id:P,icon:T,iconPosition:q,iconRemoveSuggestion:R,labelRemoveSuggestion:W,label:M,modelValue:J,count:K,valid:U,invalid:G,loading:Q,modifiers:X,debounce:Y,minlength:Z,maxlength:ae,storageType:oe}=s(d),ie=Ke(P),ne=t(()=>`${ie.value}-hint`),re=t(()=>d.floating&&qe(d.placeholder)?" ":d.placeholder),se=function(e,l,a=0,{getter:o=e=>e,setter:i=e=>e}={}){let n;return"string"==typeof a&&(a=Number.parseInt(a)),t({get:()=>o(e?.value),set:e=>{n&&clearTimeout(n),n=setTimeout(()=>{l("update:modelValue",i(e))},a)}})}(J,S,Y?.value),{hasIconBefore:de,hasIconAfter:ve}=lt(T,q),{hasIcon:fe}=lt(R),{focused:ce}=function(t,l){const{focused:a}=ee(t);return f(a,a=>{l(a?"focus":"blur",e(t))}),{focused:a}}(E,S),pe=t(()=>ce.value&&!d.disabled&&!d.readonly);f(pe,e=>{if(e&&B.value.selectOnFocus&&E.value&&E.value.select(),e&&we.value?.size)N.value?.show();else if(ye.value&&we.value){const e=d.maxSuggestions;we.value.size>=e&&!we.value.has(se.value)&&(we.value=new Set([...we.value].slice(we.value.size-e+1))),we.value.add(se.value)}});const me=le(E);f(me,e=>{e&&d.autofocus&&(ce.value=!0)});const{formatted:be}=function(l,a){const o=t(()=>(e(l)??"").length),i=t(()=>void 0!==a?.lowerLimit&&o.value<a?.lowerLimit?o.value-a.lowerLimit:void 0!==a?.upperLimit&&o.value<a?.upperLimit?a.upperLimit-o.value:0),n=t(()=>{if(!1===a?.mode)return"";if("limit"===a?.mode&&a?.upperLimit)return`${o.value} / ${a.lowerLimit?`${a.lowerLimit}-`:""}${a.upperLimit}`;if("countdown"===a?.mode){if(0===i.value)return;return i}return o.value});return{length:o,gap:i,formatted:n}}(se,{mode:K?.value,upperLimit:Number(ae?.value),lowerLimit:Number(Z?.value)}),ge=t(()=>!d.disabled&&!d.readonly),he=t(()=>ge.value?d.tabindex:-1),ye=t(()=>!qe(J)),Se=t(()=>!0===d.invalid||!0!==d.valid&&void 0),xe=t(()=>d.storageKey??(k?.experimentalFeatures.forceInputSuggestions?d.name:void 0)),we=function(t,a=ue.local,o){const i=u();let n;return o&&(i.value=o),v(()=>{t&&f(t,(t,l)=>{const o=e(a)===ue.session?sessionStorage:localStorage;if(l&&l!==t&&o.removeItem(l),t)return n=te(t,n?.value??i.value,o),void(n.value&&(i.value=n.value));n=void 0},{immediate:!0}),l(a)&&f(a,(e,l)=>{if(t?.value){if(e){const l=e===ue.session?sessionStorage:localStorage;n=te(t.value,n?.value??i.value,l)}l&&l!==e&&(l===ue.session?sessionStorage:localStorage).removeItem(t.value)}})}),f(i,e=>{n&&(n.value=e)},{deep:!0,immediate:!0}),i}(xe,oe,
/* @__PURE__ */new Set),Le=t(()=>we.value?[...we.value].filter(e=>qe(se.value)||`${e}`.toLowerCase().includes(`${se.value}`.toLowerCase())&&e!==se.value).reverse():[]),$e=t(()=>xe?.value&&we.value&&we.value.size>0);const{HintSlot:Oe,hasHintLabelOrSlot:ke,hasInvalidLabelOrSlot:_e,hintSlotScope:Be}=function(e,i){const n=t(()=>l(e)?e.value:e),r=t(()=>Re(n.value.invalidLabel)),u=t(()=>Re(n.value.validLabel)),s=t(()=>n.value.loadingLabel),d=t(()=>n.value.hintLabel),v=t(()=>Boolean(n.value.loading&&(i.loading||s.value))),f=t(()=>!v.value&&Boolean(n.value.invalid&&(i.invalid||r.value))),c=t(()=>!v.value&&!f.value&&Boolean(n.value.valid&&(i.valid||u.value))),p=t(()=>!v.value&&!f.value&&!c.value&&Boolean(i.hint||d.value)),m=t(()=>f.value||c.value||v.value||p.value),b=t(()=>({modelValue:n.value.modelValue,valid:n.value.valid,invalid:n.value.invalid,loading:n.value.loading})),g=a({name:"HintSlot",props:{tag:{type:String,default:"small"}},setup:()=>({isVisible:m,invalidLabel:r,validLabel:u,loadingLabel:s,hintLabel:d,hasInvalidLabelOrSlot:f,hasValidLabelOrSlot:c,hasLoadingLabelOrSlot:v,hasHintLabelOrSlot:p}),render(){if(this.isVisible){let e;return this.hasInvalidLabelOrSlot&&(e="alert"),this.hasValidLabelOrSlot&&(e="status"),this.hasLoadingLabelOrSlot?o(this.tag,{role:e},this.$slots.loading?.()??this.loadingLabel):this.hasInvalidLabelOrSlot?o(this.tag,{role:e},this.$slots.invalid?.()??this.$slots.invalid??this.invalidLabel):this.hasValidLabelOrSlot?o(this.tag,{role:e},this.$slots.valid?.()??this.validLabel):o(this.tag,{role:e},this.$slots.hint?.()??this.$slots.hint??this.hintLabel)}return null}});return{hasInvalidLabelOrSlot:f,hasHintLabelOrSlot:p,hasValidLabelOrSlot:c,hasLoadingLabelOrSlot:v,hintSlotScope:b,HintSlot:g}}(B,w),Ee=Ue("vv-textarea",X,t(()=>({valid:U.value,invalid:G.value,loading:Q.value,disabled:d.disabled,readonly:d.readonly,required:d.required,"icon-before":void 0!==de.value,"icon-after":void 0!==ve.value,floating:d.floating&&!qe(d.label),dirty:ye.value,focus:ce.value,resizable:d.resizable}))),Ve=t(()=>({name:d.name,placeholder:re.value,tabindex:he.value,disabled:d.disabled,readonly:d.readonly,required:d.required,autocomplete:d.autocomplete,minlength:d.minlength,maxlength:d.maxlength,cols:d.cols,rows:d.rows,wrap:d.wrap,spellcheck:d.spellcheck,"aria-invalid":Se.value,"aria-describedby":ke.value?ne.value:void 0,"aria-errormessage":_e.value?ne.value:void 0})),Ie=t(()=>({valid:d.valid,invalid:d.invalid,modelValue:d.modelValue,hintLabel:d.hintLabel,maxlength:d.maxlength,minlength:d.minlength,clear:je}));function je(){se.value=void 0}return(t,a)=>(p(),c("div",{class:O(e(Ee))},[e(M)?(p(),c("label",{key:0,for:e(ie),class:"vv-textarea__label"},A(e(M)),9,at)):_("v-if",!0),$("div",{ref_key:"wrapperEl",ref:V,class:"vv-textarea__wrapper"},[t.$slots.before?(p(),c("div",ot,[g(t.$slots,"before",h(y(e(Ie))))])):_("v-if",!0),$("div",it,[e(de)?(p(),I(tt,x({key:0},e(de),{class:"vv-textarea__icon"}),null,16)):_("v-if",!0),L($("textarea",x({id:e(ie),ref_key:"textareaEl",ref:E,"onUpdate:modelValue":a[0]||(a[0]=e=>l(se)?se.value=e:null)},e(Ve),{onKeyup:a[1]||(a[1]=e=>S("keyup",e))}),null,16,nt),[[F,e(se)]]),e(ve)?(p(),I(tt,x({key:1},e(ve),{class:"vv-textarea__icon vv-textarea__icon-after"}),null,16)):_("v-if",!0)]),t.$slots.after?(p(),c("div",rt,[g(t.$slots,"after",h(y(e(Ie))))])):_("v-if",!0),e(K)?(p(),c("span",ut,[g(t.$slots,"count",h(y(e(Ie))),()=>[j(A(e(be)),1)])])):_("v-if",!0)],512),m(e(Oe),{id:e(ne),class:"vv-textarea__hint"},C({_:2},[t.$slots.hint?{name:"hint",fn:b(()=>[g(t.$slots,"hint",h(y(e(Be))))]),key:"0"}:void 0,t.$slots.loading?{name:"loading",fn:b(()=>[g(t.$slots,"loading",h(y(e(Be))))]),key:"1"}:void 0,t.$slots.valid?{name:"valid",fn:b(()=>[g(t.$slots,"valid",h(y(e(Be))))]),key:"2"}:void 0,t.$slots.invalid?{name:"invalid",fn:b(()=>[g(t.$slots,"invalid",h(y(e(Be))))]),key:"3"}:void 0]),1032,["id"]),e($e)?(p(),I(Qe,{key:1,ref_key:"suggestionsDropdownEl",ref:N,reference:e(V),"autofocus-first":!1,"trigger-width":!0},{items:b(()=>[(p(!0),c(n,null,z(e(Le),l=>(p(),I(Ze,{key:l,onClick:D(e=>{return t=l,se.value=t,N.value?.hide(),void S("suggestion:selected",t);var t},["stop"])},{default:b(()=>[$("div",st,[g(t.$slots,"suggestion",x({ref_for:!0},{value:l}),()=>[j(A(l),1)])]),e(we)&&e(fe)?(p(),c("button",{key:0,type:"button",tabindex:"-1",class:"cursor-pointer",title:e(W),onClick:D(e=>{return t=l,we.value?.delete(t),void S("suggestion:removed",t);var t},["stop"])},[m(tt,x({ref_for:!0},e(fe)),null,16)],8,dt)):_("v-if",!0)]),_:2},1032,["onClick"]))),128))]),_:3},8,["reference"])):_("v-if",!0)],2))}});export{vt as default};