var d=Object.defineProperty;var o=Object.getOwnPropertySymbols;var m=Object.prototype.hasOwnProperty,p=Object.prototype.propertyIsEnumerable;var l=(e,a,t)=>a in e?d(e,a,{enumerable:!0,configurable:!0,writable:!0,value:t}):e[a]=t,n=(e,a)=>{for(var t in a||(a={}))m.call(a,t)&&l(e,t,a[t]);if(o)for(var t of o(a))p.call(a,t)&&l(e,t,a[t]);return e};import{n as i,L as r,F as h}from"./index.400db791.js";import"./vendor.4f8da9ec.js";var b=function(){var e=this,a=e.$createElement,t=e._self._c||a;return t("div",[t("title-link",{attrs:{h2:""}},[e._v("Default")]),e._m(0),t("example",{scopedSlots:e._u([{key:"html",fn:function(){return[e._v(`<w-textarea>Label</w-textarea>
`)]},proxy:!0}])},[t("w-textarea",[e._v("Label")])],1),t("title-link",{attrs:{h2:""}},[e._v("Label and / or placeholder")]),t("example",{scopedSlots:e._u([{key:"html",fn:function(){return[e._v(`<w-textarea>Label</w-textarea>

<w-textarea
  class="mt4"
  placeholder="Placeholder">
</w-textarea>

<w-textarea
  class="mt4"
  label="Label"
  placeholder="Placeholder">
</w-textarea>
`)]},proxy:!0}])},[t("w-textarea",[e._v("Label")]),t("w-textarea",{staticClass:"mt4",attrs:{placeholder:"Placeholder"}}),t("w-textarea",{staticClass:"mt4",attrs:{label:"Label",placeholder:"Placeholder"}})],1),t("title-link",{attrs:{h2:""}},[e._v("v-model")]),e._m(1),t("example",{scopedSlots:e._u([{key:"html",fn:function(){return[e._v(`<w-textarea value="Lorem, ipsum dolor sit amet consectetur adipisicing elit.\\n\\nDoloribus eligendi nobis quos sit, reiciendis molestias voluptates quas tenetur temporibus nihil eius ipsa.\\nSaepe dolor voluptatem, quam eaque sed maxime numquam? Veniam, quibusdam.\\n\\nExpedita nostrum sapiente enim dolorem tempore, vero dicta odit nemo facere sed hic exercitationem impedit consequuntur tempora modi.\\nExercitationem, ipsa autem deleniti consequatur doloribus dicta incidunt placeat laborum?Soluta similique exercitationem, officiis in dolorum aspernatur voluptatum laudantium neque officia maiores eum voluptate quasi nulla libero repellendus earum quis ullam ratione est at nisi modi maxime commodi.\\n\\n\\nDucimus, quam? Dignissimos minima architecto doloremque voluptate maxime dicta laborum facere sapiente quas, tempore iste quos?\\nObcaecati ea id nobis, ab neque porro iure.\\nVoluptates temporibus aliquid, neque id sit commodi consequatur.Totam assumenda, illo fugiat itaque enim dignissimos pariatur aut placeat neque accusantium nemo dicta incidunt unde at esse harum vitae eligendi in maiores dolorum delectus quis dolorem qui beatae! Tenetur?"></w-textarea>
`)]},proxy:!0}])},[t("w-textarea",{attrs:{value:`Lorem, ipsum dolor sit amet consectetur adipisicing elit.

Doloribus eligendi nobis quos sit, reiciendis molestias voluptates quas tenetur temporibus nihil eius ipsa.
Saepe dolor voluptatem, quam eaque sed maxime numquam? Veniam, quibusdam.

Expedita nostrum sapiente enim dolorem tempore, vero dicta odit nemo facere sed hic exercitationem impedit consequuntur tempora modi.
Exercitationem, ipsa autem deleniti consequatur doloribus dicta incidunt placeat laborum?Soluta similique exercitationem, officiis in dolorum aspernatur voluptatum laudantium neque officia maiores eum voluptate quasi nulla libero repellendus earum quis ullam ratione est at nisi modi maxime commodi.


Ducimus, quam? Dignissimos minima architecto doloremque voluptate maxime dicta laborum facere sapiente quas, tempore iste quos?
Obcaecati ea id nobis, ab neque porro iure.
Voluptates temporibus aliquid, neque id sit commodi consequatur.Totam assumenda, illo fugiat itaque enim dignissimos pariatur aut placeat neque accusantium nemo dicta incidunt unde at esse harum vitae eligendi in maiores dolorum delectus quis dolorem qui beatae! Tenetur?`}})],1),t("title-link",{attrs:{h2:""}},[e._v("No autogrow & resizable")]),t("example",{scopedSlots:e._u([{key:"html",fn:function(){return[e._v(`<w-textarea
  no-autogrow
  rows="6">
  Textarea label
</w-textarea>

<w-textarea
  class="mt4"
  no-autogrow
  resizable
  rows="6">
  Textarea label
</w-textarea>
`)]},proxy:!0}])},[t("w-textarea",{attrs:{"no-autogrow":"",rows:"6"}},[e._v("Textarea label")]),t("w-textarea",{staticClass:"mt4",attrs:{"no-autogrow":"",resizable:"",rows:"6"}},[e._v("Textarea label")])],1),t("title-link",{attrs:{h2:""}},[e._v("Outline")]),t("example",{scopedSlots:e._u([{key:"html",fn:function(){return[e._v(`<w-textarea outline>Textarea label</w-textarea>
`)]},proxy:!0}])},[t("w-textarea",{attrs:{outline:""}},[e._v("Textarea label")])],1),t("title-link",{attrs:{h2:""}},[e._v("Shadow")]),t("example",{scopedSlots:e._u([{key:"html",fn:function(){return[e._v(`<w-textarea shadow>
  Textarea label
</w-textarea>

<w-textarea class="mt4" outline shadow>
  Textarea label
</w-textarea>
`)]},proxy:!0}])},[t("w-textarea",{attrs:{shadow:""}},[e._v("Textarea label")]),t("w-textarea",{staticClass:"mt4",attrs:{outline:"",shadow:""}},[e._v("Textarea label")])],1),t("title-link",{attrs:{h2:""}},[e._v("Tile")]),t("example",{scopedSlots:e._u([{key:"html",fn:function(){return[e._v(`<w-textarea tile>
  Textarea label
</w-textarea>

<w-textarea class="mt4" outline tile>
  Textarea label
</w-textarea>
`)]},proxy:!0}])},[t("w-textarea",{attrs:{tile:""}},[e._v("Textarea label")]),t("w-textarea",{staticClass:"mt4",attrs:{outline:"",tile:""}},[e._v("Textarea label")])],1),t("title-link",{attrs:{h2:""}},[e._v("Colors")]),e._m(2),t("example",{scopedSlots:e._u([{key:"html",fn:function(){return[e._v(`<w-textarea color="blue">
  Textarea label
</w-textarea>

<w-textarea class="mt4" outline color="blue">
  Textarea label
</w-textarea>

<w-textarea
  class="mt4"
  bg-color="blue-light5"
  color="blue-dark3">
  Textarea label
</w-textarea>

<w-textarea
  class="mt4"
  outline
  bg-color="blue-light5"
  color="blue-dark3">
  Textarea label
</w-textarea>
`)]},proxy:!0}])},[t("w-textarea",{attrs:{color:"blue"}},[e._v("Textarea label")]),t("w-textarea",{staticClass:"mt4",attrs:{outline:"",color:"blue"}},[e._v("Textarea label")]),t("w-textarea",{staticClass:"mt4",attrs:{"bg-color":"blue-light5",color:"blue-dark3"}},[e._v("Textarea label")]),t("w-textarea",{staticClass:"mt4",attrs:{outline:"","bg-color":"blue-light5",color:"blue-dark3"}},[e._v("Textarea label")])],1),t("title-link",{attrs:{h2:""}},[e._v("Label position")]),t("p",[e._v(`By default the label is positioned inside, you can also place it on the left or right outside of
the textarea.`)]),t("example",{scopedSlots:e._u([{key:"html",fn:function(){return[e._v(`<w-textarea outline>Label inside</w-textarea>

<w-textarea
  class="mt4"
  outline
  label-position="left">
  Label left
</w-textarea>

<w-textarea
  class="mt4"
  outline
  label-position="right">
  Label right
</w-textarea>
`)]},proxy:!0}])},[t("w-textarea",{attrs:{outline:""}},[e._v("Label inside")]),t("w-textarea",{staticClass:"mt4",attrs:{outline:"","label-position":"left"}},[e._v("Label left")]),t("w-textarea",{staticClass:"mt4",attrs:{outline:"","label-position":"right"}},[e._v("Label right")])],1),t("title-link",{attrs:{h2:""}},[e._v("Custom label via default slot")]),e._m(3),t("example",{scopedSlots:e._u([{key:"html",fn:function(){return[e._v(`<w-textarea label-position="inside" outline>
  <w-icon class="orange">mdi mdi-arrow-right</w-icon>
  <span class="purple mx1">Inside</span>
  <w-icon class="orange">mdi mdi-arrow-left</w-icon>
</w-textarea>

<w-textarea class="mt4" label-position="left" outline>
  <span class="green mr1">Left</span>
  <w-icon class="orange">mdi mdi-arrow-right</w-icon>
</w-textarea>

<w-textarea class="mt4" label-position="right" outline>
  <w-icon class="orange">mdi mdi-arrow-left</w-icon>
  <span class="red ml1">Right</span>
</w-textarea>
`)]},proxy:!0}])},[t("w-textarea",{attrs:{"label-position":"inside",outline:""}},[t("w-icon",{staticClass:"orange"},[e._v("mdi mdi-arrow-right")]),t("span",{staticClass:"purple mx1"},[e._v("Inside")]),t("w-icon",{staticClass:"orange"},[e._v("mdi mdi-arrow-left")])],1),t("w-textarea",{staticClass:"mt4",attrs:{"label-position":"left",outline:""}},[t("span",{staticClass:"green mr1"},[e._v("Left")]),t("w-icon",{staticClass:"orange"},[e._v("mdi mdi-arrow-right")])],1),t("w-textarea",{staticClass:"mt4",attrs:{"label-position":"right",outline:""}},[t("w-icon",{staticClass:"orange"},[e._v("mdi mdi-arrow-left")]),t("span",{staticClass:"red ml1"},[e._v("Right")])],1)],1),t("title-link",{attrs:{h2:""}},[e._v("Inner icons")]),t("example",{scopedSlots:e._u([{key:"html",fn:function(){return[e._v(`<div class="title4 mb2">Label outside</div>
<w-textarea
  label="Left"
  label-position="left"
  outline
  inner-icon-left="mdi mdi-email">
</w-textarea>
<w-textarea
  class="mt4"
  label="Right"
  label-position="right"
  outline
  inner-icon-right="mdi mdi-email">
</w-textarea>

<div class="title4 mt6 mb2">Label inside</div>
<w-textarea
  label="Message"
  label-position="inside"
  outline
  inner-icon-left="mdi mdi-email">
</w-textarea>
<w-textarea
  class="mt4"
  label="Message"
  label-position="inside"
  outline
  inner-icon-right="mdi mdi-email">
</w-textarea>
`)]},proxy:!0}])},[t("div",{staticClass:"title4 mb2"},[e._v("Label outside")]),t("w-textarea",{attrs:{label:"Message","label-position":"left",outline:"","inner-icon-left":"mdi mdi-email"}}),t("w-textarea",{staticClass:"mt4",attrs:{label:"Message","label-position":"right",outline:"","inner-icon-right":"mdi mdi-email"}}),t("div",{staticClass:"title4 mt6 mb2"},[e._v("Label inside")]),t("w-textarea",{attrs:{label:"Message","label-position":"inside",outline:"","inner-icon-left":"mdi mdi-email"}}),t("w-textarea",{staticClass:"mt4",attrs:{label:"Message","label-position":"inside",outline:"","inner-icon-right":"mdi mdi-email"}})],1),t("title-link",{attrs:{h2:""}},[e._v("Disabled & readonly")]),t("example",{scopedSlots:e._u([{key:"html",fn:function(){return[e._v(`<w-textarea
  class="mb4"
  label="Disabled & empty"
  outline
  disabled>
</w-textarea>

<w-textarea
  class="mb4"
  value="Some content"
  label="Disabled & filled"
  outline
  disabled>
</w-textarea>

<w-textarea
  class="mb4"
  label="Readonly & empty"
  outline
  readonly>
</w-textarea>

<w-textarea
  value="Some content"
  label="Readonly & filled"
  outline
  readonly>
</w-textarea>`)]},proxy:!0}])},[t("w-textarea",{staticClass:"mb4",attrs:{label:"Disabled & empty",outline:"",disabled:""}}),t("w-textarea",{staticClass:"mb4",attrs:{value:"Some content",label:"Disabled & filled",outline:"",disabled:""}}),t("w-textarea",{staticClass:"mb4",attrs:{label:"Readonly & empty",outline:"",readonly:""}}),t("w-textarea",{attrs:{value:"Some content",label:"Readonly & filled",outline:"",readonly:""}})],1)],1)},v=[function(){var e=this,a=e.$createElement,t=e._self._c||a;return t("p",[e._v("By default the "),t("span",{staticClass:"code"},[e._v("w-textarea")]),e._v(` component has a label inside the textarea that moves up above
the textarea on focus or when the textarea is filled by some content or a placeholder.`),t("br"),e._v(`
The default number of rows is 3, and when adding lines the textarea will adjust its size.`)])},function(){var e=this,a=e.$createElement,t=e._self._c||a;return t("p",[e._v("The value of the textarea can be provided via the "),t("code",[e._v("value")]),e._v(" attribute (or "),t("code",[e._v("model-value")]),e._v(`
for Vue 3) or via `),t("code",[e._v("v-model")]),e._v(" for two-way binding."),t("br"),e._v(`
By default the textarea's height adapts to the content like in this example.
`)])},function(){var e=this,a=e.$createElement,t=e._self._c||a;return t("p",{staticClass:"mb4"},[e._v("Like in most components, you can set a "),t("code",[e._v("color")]),e._v(" for the text and a "),t("code",[e._v("bg-color")]),e._v(` for the
background.`),t("br"),e._v(`
By default, the text has the "`),t("span",{staticClass:"code"},[e._v("primary")]),e._v('" color.')])},function(){var e=this,a=e.$createElement,t=e._self._c||a;return t("p",[e._v("It is convenient to have the label inside the "),t("span",{staticClass:"code"},[e._v("w-textarea")]),e._v(` component to let it handle
the field focus event on label click.`),t("br"),e._v(`
The `),t("span",{staticClass:"code"},[e._v("label")]),e._v(` prop accepts any HTML, but because passing complex html via a prop is not fun,
there is also a prop for setting the label wish will grant more freedom.
`)])}];const x={},s={};var w=i(x,b,v,!1,_,null,null,null);function _(e){for(let a in s)this[a]=s[a]}var f=function(){return w.exports}(),g=function(){var e=this,a=e.$createElement,t=e._self._c||a;return t("div",[t("div",{staticClass:"w-divider my12"}),t("title-link",{staticClass:"title1",attrs:{h2:""}},[e._v("API")]),t("component-api",{staticClass:"mt0",attrs:{items:e.props,descriptions:e.propsDescs,title:"Props"}}),t("component-api",{attrs:{items:e.slots,title:"Slots"}}),t("component-api",{attrs:{items:e.events,title:"Events"}})],1)},y=[];const q={value:'<strong class="error"><code>model-value</code> in Vue 3.</strong><br>The text content of the textarea.<br>Gets updated on textarea input.',label:"Sets a visible label for the textarea.",labelPosition:"Sets the position of the label to one of the following positions: 'left', 'right', 'inside'.",innerIconLeft:"Adds an icon on the left inside the textarea.<br>Accepts a string: e.g. <code>mdi mdi-eye</code>.",innerIconRight:"Adds an icon on the right inside the textarea.<br>Accepts a string: e.g. <code>mdi mdi-eye</code>.",staticLabel:"Prevents moving the label above the textarea when the <code>labelPosition</code> is equal to <code>inside</code>. If a placeholder is present, it will be hidden and the label will be displayed instead.<br>When a value is set the static label is replaced by the textual value.",placeholder:"Provide a placeholder for the textarea. If a label is positioned inside, it will be moved above the textarea so it doesn't overlap.",color:`Applies a color to the textarea's text. Accepts all the color names of the color palette, status colors, or custom colors (learn more about the colors in the <a href="colors">colors</a> knowledge base page).<br>Providing a color hex, rgb(a) or hsl(a) will not work.`,bgColor:`Applies a color to the textarea's background. Accepts all the color names of the color palette, status colors, or custom colors (learn more about the colors in the <a href="colors">colors</a> knowledge base page).<br>Providing a color hex, rgb(a) or hsl(a) will not work.`,dark:!1,outline:"The outline style applies the provided <code>color</code> (by default the <code>primary</code> color is used) to the text and border and no background color is set.",shadow:"Applies a drop shadow to the textarea.",noAutogrow:"Disables the ability to fit the textarea height to the content.<br>The height will not be smaller than the number of rows set via the <code>rows</code> prop.",resizable:"Allows native resizing of the textarea's height.",tile:"Removes the default border-radius and sets sharp edges on the textarea.",rows:"The default and minimum number of rows to display in the textarea (native HTML attribute).",cols:"Applies the native HTML <code>cols</code> attribute to the textarea (native HTML attribute).",name:"Provide a native HTML <code>name</code> attribute to the textarea. If not provided, a unique name will be computed.",disabled:"Disables the textarea making it unreactive to user interactions.",readonly:"The textarea will still look like an interactive textarea except that it is read-only: its current content cannot be changed by user interaction.",required:"Applies the native HTML <code>required</code> attribute to the textarea.",validators:'<span class="deep-orange">Only for validation, when the textarea is wrapped into a <strong class="code">w-form</strong></span>.<br>An array of functions determining the validity of the textarea. Each function will be executed on textarea   validation and should return <code>true</code> when valid, or a string containing an error message when invalid. When one of the validators fails, the returned error message will appear underneath the textarea.'},k={default:{description:"The label content, if the <code>label</code> prop is not flexible enough."}},T={input:{description:"Emitted each time the textarea text changes.<br>Updates the v-model value in Vue 2.x only.",params:{"[String]":"The new textarea value."}},"update:modelValue":{description:"Emitted each time the textarea text changes.<br>Updates the v-model value in Vue 3 only.",params:{"[String]":"The new textarea value."}},focus:{description:"Emitted on textarea focus.",params:{"[DOM event object]":"The associated focus DOM event."}},blur:{description:"Emitted on textarea blur.",params:{"[DOM event object]":"The associated blur DOM event."}},"click:inner-icon-left":{description:"Emitted on click of the left inner icon, if any.",params:{"[DOM event object]":"The associated click DOM event."}},"click:inner-icon-right":{description:"Emitted on click of the right inner icon, if any.",params:{"[DOM event object]":"The associated click DOM event."}}},C={data:()=>({propsDescs:q,slots:k}),computed:{props(){return n(n({},r.props),h.props)},events(){return r.emits.reduce((e,a)=>(e[a]=T[a]||{})&&e,{})}}},c={};var L=i(C,g,y,!1,S,null,null,null);function S(e){for(let a in c)this[a]=c[a]}var D=function(){return L.exports}(),M=function(){var e=this,a=e.$createElement,t=e._self._c||a;return t("main",[t("ui-component-title",[e._v("w-textarea")]),t("examples"),t("api")],1)},E=[];const $={components:{Examples:f,Api:D}},u={};var A=i($,M,E,!1,P,null,null,null);function P(e){for(let a in u)this[a]=u[a]}var j=function(){return A.exports}();export{j as default};
