jaro/flowbite-vue
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity
Files
a27c84b7a98ee9dfe967324aa82fa36c2a0813da
flowbite-vue/docs/.vitepress/dist/assets/components_textarea.md.b787a2ff.js
Jaroslav Drzik a27c84b7a9 dist directory
2024-03-12 05:28:28 +01:00

204 lines
59 KiB
JavaScript
Raw Blame History

This file contains invisible Unicode characters
This file contains invisible Unicode characters that are indistinguishable to humans but may be processed differently by a computer. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
import"./chunks/FwbRange.vue_vue_type_style_index_0_scoped_fadec9c5_lang.66ff4c69.js";import{g as m,d as x,o as E,c as y,k as p,t as _,n as b,l,a0 as A,a5 as k,L as D,r as T,e as V,h as g,H as o,w as c,a as i,X as h,Q as q}from"./chunks/framework.3f630664.js";import{s as S}from"./chunks/simplifyTailwindClasses.275301d3.js";import{_ as u}from"./chunks/FwbButton.vue_vue_type_script_setup_true_lang.47b4329e.js";import{_ as P}from"./chunks/FwbA.vue_vue_type_script_setup_true_lang.693a0ec3.js";import{_ as z}from"./chunks/FwbInput.vue_vue_type_script_setup_true_lang.a210c4c5.js";import"./chunks/useMergeClasses.5cec3a4e.js";import"./chunks/FwbSpinner.vue_vue_type_script_setup_true_lang.40262df1.js";import"./chunks/index.b15c605d.js";import"./chunks/index.6b4d4439.js";const I="block w-full mb-4 border border-gray-200 rounded-lg bg-gray-50 dark:bg-gray-700 dark:border-gray-600",M="block p-2.5 w-full text-sm text-gray-900 bg-gray-50 rounded-lg border border-gray-200 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500",W="block mb-2 text-sm font-medium text-gray-900 dark:text-white",j="block py-2 px-3 border-gray-200 dark:border-gray-600";function $(t){const a=m(()=>S(M,t?"bg-white dark:bg-gray-800 border-none":"border")),e=m(()=>W),n=m(()=>t?I:""),s=m(()=>j);return{textareaClasses:a,labelClasses:e,wrapperClasses:n,footerClasses:s}}const Y=["rows","placeholder"],F=x({inheritAttrs:!1,__name:"FwbTextarea",props:{modelValue:{default:""},label:{default:"Your message"},rows:{default:4},custom:{type:Boolean,default:!1},placeholder:{default:"Write your message here..."}},emits:["update:modelValue"],setup(t,{emit:a}){const e=t,n=a,s=m({get(){return e.modelValue},set(r){n("update:modelValue",r)}}),{textareaClasses:d,labelClasses:f,wrapperClasses:v,footerClasses:w}=$(e.custom);return(r,C)=>(E(),y("label",null,[p("span",{class:b(l(f))},_(r.label),3),p("span",{class:b(l(v))},[A(p("textarea",D({"onUpdate:modelValue":C[0]||(C[0]=B=>s.value=B)},r.$attrs,{class:l(d),rows:r.rows,placeholder:r.placeholder}),null,16,Y),[[k,s.value]]),r.$slots.footer?(E(),y("span",{key:0,class:b(l(w))},[T(r.$slots,"footer")],2)):V("",!0)],2)]))}}),N={class:"vp-raw"},R={__name:"FwbTextareaExample",setup(t){const a=g("");return(e,n)=>(E(),y("div",N,[o(l(F),{modelValue:a.value,"onUpdate:modelValue":n[0]||(n[0]=s=>a.value=s),rows:4,label:"Your message",placeholder:"Write your message..."},null,8,["modelValue"])]))}},U={class:"vp-raw"},L={class:"flex items-center justify-between"},O={class:"flex"},G=p("svg",{class:"w-6 h-6",fill:"none","stroke-width":"1.5",stroke:"currentColor",viewBox:"0 0 24 24",xmlns:"http://www.w3.org/2000/svg"},[p("path",{d:"M18.375 12.739l-7.693 7.693a4.5 4.5 0 01-6.364-6.364l10.94-10.94A3 3 0 1119.5 7.372L8.552 18.32m.009-.01l-.01.01m5.699-9.941l-7.81 7.81a1.5 1.5 0 002.112 2.13","stroke-linecap":"round","stroke-linejoin":"round"})],-1),H=p("svg",{class:"w-6 h-6",fill:"none","stroke-width":"1.5",stroke:"currentColor",viewBox:"0 0 24 24",xmlns:"http://www.w3.org/2000/svg"},[p("path",{d:"M15 10.5a3 3 0 11-6 0 3 3 0 016 0z","stroke-linecap":"round","stroke-linejoin":"round"}),p("path",{d:"M19.5 10.5c0 7.142-7.5 11.25-7.5 11.25S4.5 17.642 4.5 10.5a7.5 7.5 0 1115 0z","stroke-linecap":"round","stroke-linejoin":"round"})],-1),J=p("svg",{class:"w-6 h-6",fill:"none","stroke-width":"1.5",stroke:"currentColor",viewBox:"0 0 24 24",xmlns:"http://www.w3.org/2000/svg"},[p("path",{d:"M2.25 15.75l5.159-5.159a2.25 2.25 0 013.182 0l5.159 5.159m-1.5-1.5l1.409-1.409a2.25 2.25 0 013.182 0l2.909 2.909m-18 3.75h16.5a1.5 1.5 0 001.5-1.5V6a1.5 1.5 0 00-1.5-1.5H3.75A1.5 1.5 0 002.25 6v12a1.5 1.5 0 001.5 1.5zm10.5-11.25h.008v.008h-.008V8.25zm.375 0a.375.375 0 11-.75 0 .375.375 0 01.75 0z","stroke-linecap":"round","stroke-linejoin":"round"})],-1),Q={class:"ml-auto text-xs text-gray-500 dark:text-gray-400"},X={__name:"FwbTextareaExampleComment",setup(t){const a=g("");return(e,n)=>(E(),y("div",U,[o(l(F),{modelValue:a.value,"onUpdate:modelValue":n[0]||(n[0]=s=>a.value=s),rows:3,custom:"",label:"Your message",placeholder:"Write your message..."},{footer:c(()=>[p("div",L,[o(l(u),{type:"submit"},{default:c(()=>[i(" Post comment ")]),_:1}),p("div",O,[o(l(u),{class:"rounded-lg hover:bg-gray-200 hover:dark:bg-gray-600",color:"",square:""},{default:c(()=>[G]),_:1}),o(l(u),{class:"rounded-lg hover:bg-gray-200 hover:dark:bg-gray-600",color:"",square:""},{default:c(()=>[H]),_:1}),o(l(u),{class:"rounded-lg hover:bg-gray-200 hover:dark:bg-gray-600",color:"",square:""},{default:c(()=>[J]),_:1})])])]),_:1},8,["modelValue"]),p("p",Q,[i(" Remember, contributions to this topic should follow our "),o(l(P),{class:"underline",href:"#"},{default:c(()=>[i(" Community Guidelines ")]),_:1}),i(". ")])]))}},K={__name:"FwbTextareaExampleDisabled",setup(t){const a=g("Edit me!");return(e,n)=>(E(),y("form",{class:"vp-raw",onSubmit:n[3]||(n[3]=h(()=>{},["prevent"]))},[o(l(F),{modelValue:a.value,"onUpdate:modelValue":n[0]||(n[0]=s=>a.value=s),label:"Textarea with minlength 10 and maxlength 20",minlength:"10",maxlength:"20",required:""},null,8,["modelValue"]),o(l(F),{modelValue:a.value,"onUpdate:modelValue":n[1]||(n[1]=s=>a.value=s),label:"Disabled textarea",placeholder:"Cannot be edited",disabled:""},null,8,["modelValue"]),o(l(F),{modelValue:a.value,"onUpdate:modelValue":n[2]||(n[2]=s=>a.value=s),label:"Readonly textarea",placeholder:"Cannot be edited",readonly:""},null,8,["modelValue"]),o(l(u),{type:"submit"},{default:c(()=>[i(" Validate ")]),_:1})],32))}},Z={class:"flex flex-col gap-y-4"},ss={__name:"FwbTextareaExampleFormId",setup(t){const a=g(""),e=g("");return(n,s)=>(E(),y("div",Z,[p("form",{id:"fwb-textarea-example-form-id",class:"vp-raw",onSubmit:s[1]||(s[1]=h(()=>{},["prevent"]))},[o(l(z),{modelValue:a.value,"onUpdate:modelValue":s[0]||(s[0]=d=>a.value=d),label:"Input inside the form",placeholder:"Write your message..."},null,8,["modelValue"]),o(l(u),{class:"mt-2",type:"submit"},{default:c(()=>[i(" Validate ")]),_:1})],32),o(l(F),{modelValue:e.value,"onUpdate:modelValue":s[2]||(s[2]=d=>e.value=d),label:"Textarea outside the form",form:"fwb-textarea-example-form-id",minlength:"20",required:""},null,8,["modelValue"])]))}},as=q('<h1 id="vue-textarea-flowbite" tabindex="-1">Vue Textarea - Flowbite <a class="header-anchor" href="#vue-textarea-flowbite" aria-label="Permalink to &quot;Vue Textarea - Flowbite&quot;">​</a></h1><h4 id="use-the-textarea-component-as-a-multi-line-text-field-input-and-use-it-inside-form-elements-available-in-multiple-sizes-styles-and-variants" tabindex="-1">Use the textarea component as a multi-line text field input and use it inside form elements available in multiple sizes, styles, and variants <a class="header-anchor" href="#use-the-textarea-component-as-a-multi-line-text-field-input-and-use-it-inside-form-elements-available-in-multiple-sizes-styles-and-variants" aria-label="Permalink to &quot;Use the textarea component as a multi-line text field input and use it inside form elements available in multiple sizes, styles, and variants&quot;">​</a></h4><hr><div class="tip custom-block"><p class="custom-block-title">TIP</p><p>Original reference: <a href="https://flowbite.com/docs/forms/textarea/" target="_blank" rel="noreferrer">https://flowbite.com/docs/forms/textarea/</a></p></div><h2 id="textarea-example" tabindex="-1">Textarea example <a class="header-anchor" href="#textarea-example" aria-label="Permalink to &quot;Textarea example&quot;">​</a></h2><p>Get started with the default example of a textarea component below.</p>',6),ns=q(`<div class="language-vue vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki github-dark vp-code-dark"><code><span class="line"><span style="color:#E1E4E8;">&lt;</span><span style="color:#85E89D;">template</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;</span><span style="color:#85E89D;">fwb-textarea</span></span>
<span class="line"><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">v-model</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;message&quot;</span></span>
<span class="line"><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">:rows</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;4&quot;</span></span>
<span class="line"><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">label</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;Your message&quot;</span></span>
<span class="line"><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">placeholder</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;Write your message...&quot;</span></span>
<span class="line"><span style="color:#E1E4E8;"> /&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;">&lt;/</span><span style="color:#85E89D;">template</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#E1E4E8;">&lt;</span><span style="color:#85E89D;">script</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">setup</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#F97583;">import</span><span style="color:#E1E4E8;"> { ref } </span><span style="color:#F97583;">from</span><span style="color:#E1E4E8;"> </span><span style="color:#9ECBFF;">&#39;vue&#39;</span></span>
<span class="line"><span style="color:#F97583;">import</span><span style="color:#E1E4E8;"> { FwbTextarea } </span><span style="color:#F97583;">from</span><span style="color:#E1E4E8;"> </span><span style="color:#9ECBFF;">&#39;flowbite-vue&#39;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#F97583;">const</span><span style="color:#E1E4E8;"> </span><span style="color:#79B8FF;">message</span><span style="color:#E1E4E8;"> </span><span style="color:#F97583;">=</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">ref</span><span style="color:#E1E4E8;">(</span><span style="color:#9ECBFF;">&#39;&#39;</span><span style="color:#E1E4E8;">)</span></span>
<span class="line"><span style="color:#E1E4E8;">&lt;/</span><span style="color:#85E89D;">script</span><span style="color:#E1E4E8;">&gt;</span></span></code></pre><pre class="shiki github-light vp-code-light"><code><span class="line"><span style="color:#24292E;">&lt;</span><span style="color:#22863A;">template</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;</span><span style="color:#22863A;">fwb-textarea</span></span>
<span class="line"><span style="color:#24292E;"> </span><span style="color:#6F42C1;">v-model</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;message&quot;</span></span>
<span class="line"><span style="color:#24292E;"> </span><span style="color:#6F42C1;">:rows</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;4&quot;</span></span>
<span class="line"><span style="color:#24292E;"> </span><span style="color:#6F42C1;">label</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;Your message&quot;</span></span>
<span class="line"><span style="color:#24292E;"> </span><span style="color:#6F42C1;">placeholder</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;Write your message...&quot;</span></span>
<span class="line"><span style="color:#24292E;"> /&gt;</span></span>
<span class="line"><span style="color:#24292E;">&lt;/</span><span style="color:#22863A;">template</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#24292E;">&lt;</span><span style="color:#22863A;">script</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">setup</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#D73A49;">import</span><span style="color:#24292E;"> { ref } </span><span style="color:#D73A49;">from</span><span style="color:#24292E;"> </span><span style="color:#032F62;">&#39;vue&#39;</span></span>
<span class="line"><span style="color:#D73A49;">import</span><span style="color:#24292E;"> { FwbTextarea } </span><span style="color:#D73A49;">from</span><span style="color:#24292E;"> </span><span style="color:#032F62;">&#39;flowbite-vue&#39;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#D73A49;">const</span><span style="color:#24292E;"> </span><span style="color:#005CC5;">message</span><span style="color:#24292E;"> </span><span style="color:#D73A49;">=</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">ref</span><span style="color:#24292E;">(</span><span style="color:#032F62;">&#39;&#39;</span><span style="color:#24292E;">)</span></span>
<span class="line"><span style="color:#24292E;">&lt;/</span><span style="color:#22863A;">script</span><span style="color:#24292E;">&gt;</span></span></code></pre></div><h2 id="comment-box" tabindex="-1">Comment box <a class="header-anchor" href="#comment-box" aria-label="Permalink to &quot;Comment box&quot;">​</a></h2><p>Most often the textarea component is used as the main text field input element in comment sections. Use this example to also apply a helper text and buttons below the textarea itself.</p>`,3),ls=q(`<div class="language-vue vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki github-dark vp-code-dark"><code><span class="line"><span style="color:#E1E4E8;">&lt;</span><span style="color:#85E89D;">template</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;</span><span style="color:#85E89D;">div</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;</span><span style="color:#85E89D;">form</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;</span><span style="color:#85E89D;">fwb-textarea</span></span>
<span class="line"><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">v-model</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;message&quot;</span></span>
<span class="line"><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">:rows</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;3&quot;</span></span>
<span class="line"><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">custom</span></span>
<span class="line"><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">label</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;Your message&quot;</span></span>
<span class="line"><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">placeholder</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;Write your message...&quot;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;</span><span style="color:#85E89D;">template</span><span style="color:#E1E4E8;"> #</span><span style="color:#B392F0;">footer</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;</span><span style="color:#85E89D;">div</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">class</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;flex items-center justify-between&quot;</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;</span><span style="color:#85E89D;">fwb-button</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">type</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;submit&quot;</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> Post comment</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;/</span><span style="color:#85E89D;">fwb-button</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;</span><span style="color:#85E89D;">div</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">class</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;flex&quot;</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;</span><span style="color:#85E89D;">fwb-button</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">class</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;rounded-lg hover:bg-gray-200 hover:dark:bg-gray-600&quot;</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">color</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">square</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;</span><span style="color:#85E89D;">svg</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">class</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;w-6 h-6&quot;</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">fill</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;none&quot;</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">stroke-width</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;1.5&quot;</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">stroke</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;currentColor&quot;</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">viewBox</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;0 0 24 24&quot;</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">xmlns</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;http://www.w3.org/2000/svg&quot;</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;</span><span style="color:#85E89D;">path</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">d</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;M18.375 12.739l-7.693 7.693a4.5 4.5 0 01-6.364-6.364l10.94-10.94A3 3 0 1119.5 7.372L8.552 18.32m.009-.01l-.01.01m5.699-9.941l-7.81 7.81a1.5 1.5 0 002.112 2.13&quot;</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">stroke-linecap</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;round&quot;</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">stroke-linejoin</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;round&quot;</span><span style="color:#E1E4E8;"> /&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;/</span><span style="color:#85E89D;">svg</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;/</span><span style="color:#85E89D;">fwb-button</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;</span><span style="color:#85E89D;">fwb-button</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">class</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;rounded-lg hover:bg-gray-200 hover:dark:bg-gray-600&quot;</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">color</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;&quot;</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">square</span><span style="color:#E1E4E8;"> &gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;</span><span style="color:#85E89D;">svg</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">class</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;w-6 h-6&quot;</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">fill</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;none&quot;</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">stroke-width</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;1.5&quot;</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">stroke</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;currentColor&quot;</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">viewBox</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;0 0 24 24&quot;</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">xmlns</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;http://www.w3.org/2000/svg&quot;</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;</span><span style="color:#85E89D;">path</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">d</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;M15 10.5a3 3 0 11-6 0 3 3 0 016 0z&quot;</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">stroke-linecap</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;round&quot;</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">stroke-linejoin</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;round&quot;</span><span style="color:#E1E4E8;"> /&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;</span><span style="color:#85E89D;">path</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">d</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;M19.5 10.5c0 7.142-7.5 11.25-7.5 11.25S4.5 17.642 4.5 10.5a7.5 7.5 0 1115 0z&quot;</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">stroke-linecap</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;round&quot;</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">stroke-linejoin</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;round&quot;</span><span style="color:#E1E4E8;"> /&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;/</span><span style="color:#85E89D;">svg</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;/</span><span style="color:#85E89D;">fwb-button</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;</span><span style="color:#85E89D;">fwb-button</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">class</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;rounded-lg hover:bg-gray-200 hover:dark:bg-gray-600&quot;</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">color</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;&quot;</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">square</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;</span><span style="color:#85E89D;">svg</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">class</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;w-6 h-6&quot;</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">fill</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;none&quot;</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">stroke-width</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;1.5&quot;</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">stroke</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;currentColor&quot;</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">viewBox</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;0 0 24 24&quot;</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">xmlns</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;http://www.w3.org/2000/svg&quot;</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;</span><span style="color:#85E89D;">path</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">d</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;M2.25 15.75l5.159-5.159a2.25 2.25 0 013.182 0l5.159 5.159m-1.5-1.5l1.409-1.409a2.25 2.25 0 013.182 0l2.909 2.909m-18 3.75h16.5a1.5 1.5 0 001.5-1.5V6a1.5 1.5 0 00-1.5-1.5H3.75A1.5 1.5 0 002.25 6v12a1.5 1.5 0 001.5 1.5zm10.5-11.25h.008v.008h-.008V8.25zm.375 0a.375.375 0 11-.75 0 .375.375 0 01.75 0z&quot;</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">stroke-linecap</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;round&quot;</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">stroke-linejoin</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;round&quot;</span><span style="color:#E1E4E8;"> /&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;/</span><span style="color:#85E89D;">svg</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;/</span><span style="color:#85E89D;">fwb-button</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;/</span><span style="color:#85E89D;">div</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;/</span><span style="color:#85E89D;">div</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;/</span><span style="color:#85E89D;">template</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;/</span><span style="color:#85E89D;">Textarea</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;/</span><span style="color:#85E89D;">form</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;</span><span style="color:#85E89D;">p</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">class</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;ml-auto text-xs text-gray-500 dark:text-gray-400&quot;</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> Remember, contributions to this topic should follow our</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;</span><span style="color:#85E89D;">fwb-a</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">href</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;#&quot;</span><span style="color:#E1E4E8;">&gt;Community Guidelines&lt;/</span><span style="color:#85E89D;">fwb-a</span><span style="color:#E1E4E8;">&gt;.</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;/</span><span style="color:#85E89D;">p</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;/</span><span style="color:#85E89D;">div</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;">&lt;/</span><span style="color:#85E89D;">template</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#E1E4E8;">&lt;</span><span style="color:#85E89D;">script</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">setup</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#F97583;">import</span><span style="color:#E1E4E8;"> { ref } </span><span style="color:#F97583;">from</span><span style="color:#E1E4E8;"> </span><span style="color:#9ECBFF;">&#39;vue&#39;</span></span>
<span class="line"><span style="color:#F97583;">import</span><span style="color:#E1E4E8;"> { FwbA, FwbButton, FwbTextarea } </span><span style="color:#F97583;">from</span><span style="color:#E1E4E8;"> </span><span style="color:#9ECBFF;">&#39;flowbite-vue&#39;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#F97583;">const</span><span style="color:#E1E4E8;"> </span><span style="color:#79B8FF;">message</span><span style="color:#E1E4E8;"> </span><span style="color:#F97583;">=</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">ref</span><span style="color:#E1E4E8;">(</span><span style="color:#9ECBFF;">&#39;&#39;</span><span style="color:#E1E4E8;">)</span></span>
<span class="line"><span style="color:#E1E4E8;">&lt;/</span><span style="color:#85E89D;">script</span><span style="color:#E1E4E8;">&gt;</span></span></code></pre><pre class="shiki github-light vp-code-light"><code><span class="line"><span style="color:#24292E;">&lt;</span><span style="color:#22863A;">template</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;</span><span style="color:#22863A;">div</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;</span><span style="color:#22863A;">form</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;</span><span style="color:#22863A;">fwb-textarea</span></span>
<span class="line"><span style="color:#24292E;"> </span><span style="color:#6F42C1;">v-model</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;message&quot;</span></span>
<span class="line"><span style="color:#24292E;"> </span><span style="color:#6F42C1;">:rows</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;3&quot;</span></span>
<span class="line"><span style="color:#24292E;"> </span><span style="color:#6F42C1;">custom</span></span>
<span class="line"><span style="color:#24292E;"> </span><span style="color:#6F42C1;">label</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;Your message&quot;</span></span>
<span class="line"><span style="color:#24292E;"> </span><span style="color:#6F42C1;">placeholder</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;Write your message...&quot;</span></span>
<span class="line"><span style="color:#24292E;"> &gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;</span><span style="color:#22863A;">template</span><span style="color:#24292E;"> #</span><span style="color:#6F42C1;">footer</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;</span><span style="color:#22863A;">div</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">class</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;flex items-center justify-between&quot;</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;</span><span style="color:#22863A;">fwb-button</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">type</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;submit&quot;</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> Post comment</span></span>
<span class="line"><span style="color:#24292E;"> &lt;/</span><span style="color:#22863A;">fwb-button</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;</span><span style="color:#22863A;">div</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">class</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;flex&quot;</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;</span><span style="color:#22863A;">fwb-button</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">class</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;rounded-lg hover:bg-gray-200 hover:dark:bg-gray-600&quot;</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">color</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">square</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;</span><span style="color:#22863A;">svg</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">class</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;w-6 h-6&quot;</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">fill</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;none&quot;</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">stroke-width</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;1.5&quot;</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">stroke</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;currentColor&quot;</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">viewBox</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;0 0 24 24&quot;</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">xmlns</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;http://www.w3.org/2000/svg&quot;</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;</span><span style="color:#22863A;">path</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">d</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;M18.375 12.739l-7.693 7.693a4.5 4.5 0 01-6.364-6.364l10.94-10.94A3 3 0 1119.5 7.372L8.552 18.32m.009-.01l-.01.01m5.699-9.941l-7.81 7.81a1.5 1.5 0 002.112 2.13&quot;</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">stroke-linecap</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;round&quot;</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">stroke-linejoin</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;round&quot;</span><span style="color:#24292E;"> /&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;/</span><span style="color:#22863A;">svg</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;/</span><span style="color:#22863A;">fwb-button</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;</span><span style="color:#22863A;">fwb-button</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">class</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;rounded-lg hover:bg-gray-200 hover:dark:bg-gray-600&quot;</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">color</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;&quot;</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">square</span><span style="color:#24292E;"> &gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;</span><span style="color:#22863A;">svg</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">class</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;w-6 h-6&quot;</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">fill</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;none&quot;</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">stroke-width</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;1.5&quot;</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">stroke</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;currentColor&quot;</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">viewBox</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;0 0 24 24&quot;</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">xmlns</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;http://www.w3.org/2000/svg&quot;</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;</span><span style="color:#22863A;">path</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">d</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;M15 10.5a3 3 0 11-6 0 3 3 0 016 0z&quot;</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">stroke-linecap</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;round&quot;</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">stroke-linejoin</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;round&quot;</span><span style="color:#24292E;"> /&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;</span><span style="color:#22863A;">path</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">d</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;M19.5 10.5c0 7.142-7.5 11.25-7.5 11.25S4.5 17.642 4.5 10.5a7.5 7.5 0 1115 0z&quot;</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">stroke-linecap</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;round&quot;</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">stroke-linejoin</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;round&quot;</span><span style="color:#24292E;"> /&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;/</span><span style="color:#22863A;">svg</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;/</span><span style="color:#22863A;">fwb-button</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;</span><span style="color:#22863A;">fwb-button</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">class</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;rounded-lg hover:bg-gray-200 hover:dark:bg-gray-600&quot;</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">color</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;&quot;</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">square</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;</span><span style="color:#22863A;">svg</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">class</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;w-6 h-6&quot;</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">fill</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;none&quot;</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">stroke-width</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;1.5&quot;</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">stroke</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;currentColor&quot;</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">viewBox</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;0 0 24 24&quot;</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">xmlns</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;http://www.w3.org/2000/svg&quot;</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;</span><span style="color:#22863A;">path</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">d</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;M2.25 15.75l5.159-5.159a2.25 2.25 0 013.182 0l5.159 5.159m-1.5-1.5l1.409-1.409a2.25 2.25 0 013.182 0l2.909 2.909m-18 3.75h16.5a1.5 1.5 0 001.5-1.5V6a1.5 1.5 0 00-1.5-1.5H3.75A1.5 1.5 0 002.25 6v12a1.5 1.5 0 001.5 1.5zm10.5-11.25h.008v.008h-.008V8.25zm.375 0a.375.375 0 11-.75 0 .375.375 0 01.75 0z&quot;</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">stroke-linecap</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;round&quot;</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">stroke-linejoin</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;round&quot;</span><span style="color:#24292E;"> /&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;/</span><span style="color:#22863A;">svg</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;/</span><span style="color:#22863A;">fwb-button</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;/</span><span style="color:#22863A;">div</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;/</span><span style="color:#22863A;">div</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;/</span><span style="color:#22863A;">template</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;/</span><span style="color:#22863A;">Textarea</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;/</span><span style="color:#22863A;">form</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;</span><span style="color:#22863A;">p</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">class</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;ml-auto text-xs text-gray-500 dark:text-gray-400&quot;</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> Remember, contributions to this topic should follow our</span></span>
<span class="line"><span style="color:#24292E;"> &lt;</span><span style="color:#22863A;">fwb-a</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">href</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;#&quot;</span><span style="color:#24292E;">&gt;Community Guidelines&lt;/</span><span style="color:#22863A;">fwb-a</span><span style="color:#24292E;">&gt;.</span></span>
<span class="line"><span style="color:#24292E;"> &lt;/</span><span style="color:#22863A;">p</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;/</span><span style="color:#22863A;">div</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;">&lt;/</span><span style="color:#22863A;">template</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#24292E;">&lt;</span><span style="color:#22863A;">script</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">setup</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#D73A49;">import</span><span style="color:#24292E;"> { ref } </span><span style="color:#D73A49;">from</span><span style="color:#24292E;"> </span><span style="color:#032F62;">&#39;vue&#39;</span></span>
<span class="line"><span style="color:#D73A49;">import</span><span style="color:#24292E;"> { FwbA, FwbButton, FwbTextarea } </span><span style="color:#D73A49;">from</span><span style="color:#24292E;"> </span><span style="color:#032F62;">&#39;flowbite-vue&#39;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#D73A49;">const</span><span style="color:#24292E;"> </span><span style="color:#005CC5;">message</span><span style="color:#24292E;"> </span><span style="color:#D73A49;">=</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">ref</span><span style="color:#24292E;">(</span><span style="color:#032F62;">&#39;&#39;</span><span style="color:#24292E;">)</span></span>
<span class="line"><span style="color:#24292E;">&lt;/</span><span style="color:#22863A;">script</span><span style="color:#24292E;">&gt;</span></span></code></pre></div><h2 id="disabled-readonly-textarea" tabindex="-1">Disabled / Readonly Textarea <a class="header-anchor" href="#disabled-readonly-textarea" aria-label="Permalink to &quot;Disabled / Readonly Textarea&quot;">​</a></h2>`,2),os=q(`<div class="language-vue vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki github-dark vp-code-dark"><code><span class="line"><span style="color:#E1E4E8;">&lt;</span><span style="color:#85E89D;">template</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;</span><span style="color:#85E89D;">div</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;</span><span style="color:#85E89D;">fwb-textarea</span></span>
<span class="line"><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">v-model</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;message&quot;</span></span>
<span class="line"><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">label</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;Your message&quot;</span></span>
<span class="line"><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">placeholder</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;Write your message...&quot;</span></span>
<span class="line"><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">disabled</span></span>
<span class="line"><span style="color:#E1E4E8;"> /&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;</span><span style="color:#85E89D;">fwb-textarea</span></span>
<span class="line"><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">v-model</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;message&quot;</span></span>
<span class="line"><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">label</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;Your message&quot;</span></span>
<span class="line"><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">placeholder</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;Write your message...&quot;</span></span>
<span class="line"><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">readonly</span></span>
<span class="line"><span style="color:#E1E4E8;"> /&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;/</span><span style="color:#85E89D;">div</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;">&lt;/</span><span style="color:#85E89D;">template</span><span style="color:#E1E4E8;">&gt;</span></span></code></pre><pre class="shiki github-light vp-code-light"><code><span class="line"><span style="color:#24292E;">&lt;</span><span style="color:#22863A;">template</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;</span><span style="color:#22863A;">div</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;</span><span style="color:#22863A;">fwb-textarea</span></span>
<span class="line"><span style="color:#24292E;"> </span><span style="color:#6F42C1;">v-model</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;message&quot;</span></span>
<span class="line"><span style="color:#24292E;"> </span><span style="color:#6F42C1;">label</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;Your message&quot;</span></span>
<span class="line"><span style="color:#24292E;"> </span><span style="color:#6F42C1;">placeholder</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;Write your message...&quot;</span></span>
<span class="line"><span style="color:#24292E;"> </span><span style="color:#6F42C1;">disabled</span></span>
<span class="line"><span style="color:#24292E;"> /&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;</span><span style="color:#22863A;">fwb-textarea</span></span>
<span class="line"><span style="color:#24292E;"> </span><span style="color:#6F42C1;">v-model</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;message&quot;</span></span>
<span class="line"><span style="color:#24292E;"> </span><span style="color:#6F42C1;">label</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;Your message&quot;</span></span>
<span class="line"><span style="color:#24292E;"> </span><span style="color:#6F42C1;">placeholder</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;Write your message...&quot;</span></span>
<span class="line"><span style="color:#24292E;"> </span><span style="color:#6F42C1;">readonly</span></span>
<span class="line"><span style="color:#24292E;"> /&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;/</span><span style="color:#22863A;">div</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;">&lt;/</span><span style="color:#22863A;">template</span><span style="color:#24292E;">&gt;</span></span></code></pre></div><h2 id="textarea-with-form-id" tabindex="-1">Textarea with form ID <a class="header-anchor" href="#textarea-with-form-id" aria-label="Permalink to &quot;Textarea with form ID&quot;">​</a></h2>`,2),ps=q(`<div class="language-vue vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki github-dark vp-code-dark"><code><span class="line"><span style="color:#E1E4E8;">&lt;</span><span style="color:#85E89D;">template</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;</span><span style="color:#85E89D;">div</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;</span><span style="color:#85E89D;">form</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">id</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;my-form&quot;</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">@submit.prevent</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;handleSubmit&quot;</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> </span><span style="color:#6A737D;">&lt;!-- Inside the form --&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;</span><span style="color:#85E89D;">fwb-textarea</span></span>
<span class="line"><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">v-model</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;message&quot;</span></span>
<span class="line"><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">label</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;Your message&quot;</span></span>
<span class="line"><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">placeholder</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;Write your message...&quot;</span></span>
<span class="line"><span style="color:#E1E4E8;"> /&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;</span><span style="color:#85E89D;">fwb-button</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">type</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;submit&quot;</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> Submit</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;/</span><span style="color:#85E89D;">fwb-button</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;/</span><span style="color:#85E89D;">form</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#E1E4E8;"> </span><span style="color:#6A737D;">&lt;!-- Outside the form --&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;</span><span style="color:#85E89D;">fwb-textarea</span></span>
<span class="line"><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">v-model</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;message&quot;</span></span>
<span class="line"><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">label</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;Your message&quot;</span></span>
<span class="line"><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">placeholder</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;Write your message...&quot;</span></span>
<span class="line"><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">form</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;my-form&quot;</span></span>
<span class="line"><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">required</span></span>
<span class="line"><span style="color:#E1E4E8;"> /&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;/</span><span style="color:#85E89D;">div</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;">&lt;/</span><span style="color:#85E89D;">template</span><span style="color:#E1E4E8;">&gt;</span></span></code></pre><pre class="shiki github-light vp-code-light"><code><span class="line"><span style="color:#24292E;">&lt;</span><span style="color:#22863A;">template</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;</span><span style="color:#22863A;">div</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;</span><span style="color:#22863A;">form</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">id</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;my-form&quot;</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">@submit.prevent</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;handleSubmit&quot;</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> </span><span style="color:#6A737D;">&lt;!-- Inside the form --&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;</span><span style="color:#22863A;">fwb-textarea</span></span>
<span class="line"><span style="color:#24292E;"> </span><span style="color:#6F42C1;">v-model</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;message&quot;</span></span>
<span class="line"><span style="color:#24292E;"> </span><span style="color:#6F42C1;">label</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;Your message&quot;</span></span>
<span class="line"><span style="color:#24292E;"> </span><span style="color:#6F42C1;">placeholder</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;Write your message...&quot;</span></span>
<span class="line"><span style="color:#24292E;"> /&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;</span><span style="color:#22863A;">fwb-button</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">type</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;submit&quot;</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> Submit</span></span>
<span class="line"><span style="color:#24292E;"> &lt;/</span><span style="color:#22863A;">fwb-button</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;/</span><span style="color:#22863A;">form</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#24292E;"> </span><span style="color:#6A737D;">&lt;!-- Outside the form --&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;</span><span style="color:#22863A;">fwb-textarea</span></span>
<span class="line"><span style="color:#24292E;"> </span><span style="color:#6F42C1;">v-model</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;message&quot;</span></span>
<span class="line"><span style="color:#24292E;"> </span><span style="color:#6F42C1;">label</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;Your message&quot;</span></span>
<span class="line"><span style="color:#24292E;"> </span><span style="color:#6F42C1;">placeholder</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;Write your message...&quot;</span></span>
<span class="line"><span style="color:#24292E;"> </span><span style="color:#6F42C1;">form</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;my-form&quot;</span></span>
<span class="line"><span style="color:#24292E;"> </span><span style="color:#6F42C1;">required</span></span>
<span class="line"><span style="color:#24292E;"> /&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;/</span><span style="color:#22863A;">div</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;">&lt;/</span><span style="color:#22863A;">template</span><span style="color:#24292E;">&gt;</span></span></code></pre></div>`,1),gs=JSON.parse('{"title":"Vue Textarea - Flowbite","description":"","frontmatter":{},"headers":[],"relativePath":"components/textarea.md","filePath":"components/textarea.md"}'),es={name:"components/textarea.md"},qs=Object.assign(es,{setup(t){return(a,e)=>(E(),y("div",null,[as,o(R),ns,o(X),ls,o(K),os,o(ss),ps]))}});export{gs as __pageData,qs as default};
Reference in New Issue View Git Blame Copy Permalink