first commit

resources/js/pages/forms/textarea.vue

@@ -0,0 +1,175 @@
+<script setup>
+import * as demoCode from '@/views/demos/forms/form-elements/textarea/demoCodeTextarea'
+</script>
+
+<template>
+  <VRow class="match-height">
+    <VCol
+      cols="12"
+      md="6"
+    >
+      <!-- 👉 Basic -->
+      <AppCardCode
+        title="Basic"
+        :code="demoCode.basic"
+      >
+        <p>
+          v-textarea in its simplest form is a multi-line text-field, useful for larger amounts of text.
+        </p>
+
+        <DemoTextareaBasic />
+      </AppCardCode>
+    </VCol>
+
+    <VCol
+      cols="12"
+      md="6"
+    >
+      <!-- 👉 Auto Grow -->
+      <AppCardCode
+        title="Auto Grow"
+        :code="demoCode.autoGrow"
+      >
+        <p>When using the <code>auto-grow</code> prop, textarea's will automatically increase in size when the contained text exceeds its size.</p>
+
+        <DemoTextareaAutoGrow />
+      </AppCardCode>
+    </VCol>
+
+    <VCol cols="12">
+      <!-- 👉 Variant -->
+      <AppCardCode
+        title="Variant"
+        :code="demoCode.variant"
+      >
+        <p>Use <code>filled</code>, <code>plain</code>, <code>outlined</code>, <code>solo</code> and <code>underlined</code> option of <code>variant</code> prop to change the look of file input.</p>
+
+        <DemoTextareaVariant />
+      </AppCardCode>
+    </VCol>
+
+    <VCol
+      cols="12"
+      md="6"
+    >
+      <!-- 👉 States -->
+      <AppCardCode
+        title="States"
+        :code="demoCode.states"
+      >
+        <p>Use <code>disabled</code> and <code>readonly</code> prop to change the state of textarea.</p>
+
+        <DemoTextareaStates />
+      </AppCardCode>
+    </VCol>
+
+    <VCol
+      cols="12"
+      md="6"
+    >
+      <!-- 👉 Browser autocomplete -->
+      <AppCardCode
+        title="Browser autocomplete"
+        :code="demoCode.browserAutocomplete"
+      >
+        <p>
+          The <code>autocomplete</code> prop gives you the option to enable the browser to predict user input.
+        </p>
+
+        <DemoTextareaBrowserAutocomplete />
+      </AppCardCode>
+    </VCol>
+
+    <VCol
+      cols="12"
+      md="6"
+    >
+      <!-- 👉 Clearable -->
+      <AppCardCode
+        title="Clearable"
+        :code="demoCode.clearable"
+      >
+        <p>You can clear the text from a <code>v-textarea</code> by using the <code>clearable</code> prop, and customize the icon used with the <code>clearable-icon</code> prop.</p>
+
+        <DemoTextareaClearable />
+      </AppCardCode>
+    </VCol>
+
+    <VCol
+      cols="12"
+      md="6"
+    >
+      <!-- 👉 Counter -->
+      <AppCardCode
+        title="Counter"
+        :code="demoCode.counter"
+      >
+        <p>
+          The <code>counter</code> prop informs the user of a character limit for the <code>v-textarea</code>.
+        </p>
+
+        <DemoTextareaCounter />
+      </AppCardCode>
+    </VCol>
+
+    <VCol
+      cols="12"
+      md="6"
+    >
+      <!-- 👉 Icons -->
+      <AppCardCode
+        title="Icons"
+        :code="demoCode.icons"
+      >
+        <p>The <code>append-icon</code>, <code>prepend-icon</code>, <code>append-inner-icon</code> and <code>prepend-inner-icon</code> props help add context to v-textarea.</p>
+
+        <DemoTextareaIcons />
+      </AppCardCode>
+    </VCol>
+
+    <VCol
+      cols="12"
+      md="6"
+    >
+      <!-- 👉 Rows -->
+      <AppCardCode
+        title="Rows"
+        :code="demoCode.rows"
+      >
+        <p>The <code>rows</code> prop allows you to define how many rows the textarea has, when combined with the <code>row-height</code> prop you can further customize your rows by defining their height.</p>
+
+        <DemoTextareaRows />
+      </AppCardCode>
+    </VCol>
+
+    <VCol
+      cols="12"
+      md="6"
+    >
+      <!-- 👉 No resize -->
+      <AppCardCode
+        title="No resize"
+        :code="demoCode.noResize"
+      >
+        <p><code>v-textarea</code>'s have the option to remain the same size regardless of their content's size, using the <code>no-resize</code> prop.</p>
+
+        <DemoTextareaNoResize />
+      </AppCardCode>
+    </VCol>
+
+    <VCol
+      cols="12"
+      md="6"
+    >
+      <!-- 👉 Validation -->
+      <AppCardCode
+        title="Validation"
+        :code="demoCode.validation"
+      >
+        <p>Use <code>rules</code> prop to validate the textarea.</p>
+
+        <DemoTextareaValidation />
+      </AppCardCode>
+    </VCol>
+  </VRow>
+</template>