@fifteen/design-system-vue/dist/cjs/components/form/FTextarea.js

Vue 3 (Composition API + Typescript) implementation of the Fifteen Design System

"use strict";const k=require("./FField.js");;/* empty css         */const q=require("../FLoader.js");;/* empty css           */const I=require("../FIcon.js");;/* empty css         */const e=require("vue"),V=require("../../utils/genSize.js"),l=require("../../utils/getCssColor.js"),w=require("../../.generated/icons.js"),z=require("../../composables/useIcon.js"),E=require("../../composables/useFieldWithValidation.js"),M=require("../../composables/useInputEventBindings.js"),H=require("@vueuse/core"),N={class:"FTextarea__content"},O=["placeholder","disabled","rows","aria-label"],R=e.defineComponent({__name:"FTextarea",props:{placeholder:{default:""},rows:{default:3},resize:{default:"vertical"},attrs:{default:()=>({})},outlineColor:{default:"neutral--light-3"},placeholderTextColor:{default:"neutral--dark-2"},focusColor:{default:"neutral--light-5"},focusBorderColor:{default:"secondary"},fieldset:{type:Boolean},name:{default:""},label:{default:""},labelTextColor:{default:"neutral--dark-4"},hint:{default:""},hintTextColor:{default:"neutral--dark-4"},hideHint:{type:Boolean,default:!1},hintIcon:{default:null},modelValue:{default:void 0},disabled:{type:Boolean,default:!1},loading:{type:Boolean},color:{default:"neutral--light-3"},textColor:{default:"neutral--dark-4"},errorColor:{default:"danger"},validationTrigger:{default:"blur"},rules:{type:[Function,Array],default:()=>[]},errorMessage:{default:""},validateOnMount:{type:Boolean},borderColor:{default:"secondary"}},emits:["update:modelValue","input","change","focus","blur"],setup(f,{expose:C,emit:p}){const o=f,g=p;C({focus:F}),z.registerIcons("icons",{exclamationCircle:w.exclamationCircle});const n=e.ref(),{isValid:s,hint:h,value:u,validate:x}=E.useFieldWithValidation(o,{validateOnMount:o.validateOnMount}),{handleChange:i,handleFocus:d,handleBlur:c}=M.useInputEventBindings(x,o.validationTrigger,g),{width:m}=H.useElementBounding(n),v=e.computed(()=>({"--ftextarea--color":l.getCssColor(o.color),"--ftextarea--text-color":l.getCssColor(o.textColor),"--ftextarea--placeholder-text-color":l.getCssColor(o.placeholderTextColor),"--ftextarea--border-color":l.getCssColor(o.borderColor),"--ftextarea--outline-color":l.getCssColor(`${o.outlineColor}--rgb`),"--ftextarea--focus-color":l.getCssColor(o.focusColor),"--ftextarea--focus-border-color":l.getCssColor(o.focusBorderColor),"--ftextarea--error-color":l.getCssColor(o.errorColor),"--ftextarea--resize":o.disabled?"none":o.resize,"--ftextarea--width":V.genSize(m.value)})),_=e.computed(()=>o.disabled?"neutral--dark-1":s.value?o.hintTextColor:o.errorColor),b=e.computed(()=>({"FTextarea--error":!s.value,"FTextarea--disabled":o.disabled,"FTextarea--loading":o.loading}));function F(){n.value?.focus()}return(r,t)=>{const T=I,y=q,B=k;return e.openBlock(),e.createBlock(B,e.mergeProps({class:["FTextarea",e.unref(b)],style:e.unref(v)},{name:r.name,label:r.label,labelTextColor:r.labelTextColor,hint:e.unref(h),hideHint:r.hideHint,hintTextColor:e.unref(_),hintIcon:r.hintIcon}),{default:e.withCtx(()=>[e.createElementVNode("div",N,[e.withDirectives(e.createElementVNode("textarea",e.mergeProps({class:"FTextarea__textarea",ref_key:"textareaRef",ref:n},r.attrs,{"onUpdate:modelValue":t[0]||(t[0]=a=>e.isRef(u)?u.value=a:null),placeholder:r.placeholder,disabled:r.disabled,rows:r.rows,"aria-label":r.label,onBlur:t[1]||(t[1]=(...a)=>e.unref(c)&&e.unref(c)(...a)),onChange:t[2]||(t[2]=(...a)=>e.unref(i)&&e.unref(i)(...a)),onFocus:t[3]||(t[3]=(...a)=>e.unref(d)&&e.unref(d)(...a))}),null,16,O),[[e.vModelText,e.unref(u)]]),!e.unref(s)&&!r.loading?(e.openBlock(),e.createBlock(T,{key:0,class:"FTextarea__errorIcon",name:"exclamationCircle",color:r.errorColor,size:"16"},null,8,["color"])):r.loading?(e.openBlock(),e.createBlock(y,{key:1,class:"FTextarea__loader",color:r.placeholderTextColor,height:"24"},null,8,["color"])):e.createCommentVNode("",!0)])]),_:1},16,["style","class"])}}});module.exports=R;