docs: textarea (#333)

altai-ui · Sep 20, 2022 · 8b23a47 · 8b23a47
1 parent c640616
commit 8b23a47
Show file tree

Hide file tree

Showing 4 changed files with 238 additions and 2 deletions.
diff --git a/vuepress-docs/docs/.vuepress/config.ts b/vuepress-docs/docs/.vuepress/config.ts
@@ -40,6 +40,7 @@ export default defineUserConfig<DefaultThemeOptions, ViteBundlerOptions>({
           '/components/QSwitch.md',
           '/components/QTabs.md',
           '/components/QTag.md',
+          '/components/QTextarea.md',
           '/components/QUpload.md'
         ]
       },
@@ -80,6 +81,7 @@ export default defineUserConfig<DefaultThemeOptions, ViteBundlerOptions>({
             '/components/QSwitch.md',
             '/components/QTabs.md',
             '/components/QTag.md',
+            '/components/QTextarea.md',
             '/components/QUpload.md'
           ]
         }

diff --git a/vuepress-docs/docs/.vuepress/public/QTextarea/main.html b/vuepress-docs/docs/.vuepress/public/QTextarea/main.html
@@ -0,0 +1,75 @@
+<html>
+  <head>
+    <meta charset="UTF-8" />
+    <!-- import CSS -->
+    <link
+      rel="stylesheet"
+      href="https://unpkg.com/@qvant/qui-max/dist/style.css"
+    />
+  </head>
+
+  <body>
+    <div id="app">
+      <div class="block">
+        <q-row>
+          <q-col cols="6">
+            <p>Default</p>
+            <q-textarea
+              v-model="value"
+              placeholder="Input Text"
+            ></q-textarea>
+            <p>Autosize: "{ minRows: 6, maxRows: 8 }"</p>
+            <q-textarea
+              v-model="value2"
+              :autosize="{ minRows: 6, maxRows: 8 }"
+              placeholder="Input Text"
+            >
+            </q-textarea>
+          </q-col>
+          <q-col cols="6">
+            <p>Disabled</p>
+            <q-textarea
+              v-model="value3"
+              disabled
+            ></q-textarea>
+            <p>Show symbol limit</p>
+            <q-textarea
+              v-model="value4"
+              :show-symbol-limit="true"
+              maxlength="100"
+              placeholder="Input 100 symbols max"
+            ></q-textarea>
+          </q-col>
+        </q-row>
+      </div>
+    </div>
+  </body>
+  <!-- import Vue before Qui -->
+  <script src="https://unpkg.com/vue@latest"></script>
+  <!-- import JavaScript -->
+  <script src="https://unpkg.com/@qvant/qui-max@latest"></script>
+  <script>
+    const app = Vue.createApp({
+      setup() {
+        const value = Vue.ref('');
+        const value2 = Vue.ref('');
+        const value3 = Vue.ref('');
+        const value4 = Vue.ref('');
+        return {
+          value,
+          value2,
+          value3,
+          value4
+        };
+      }
+    });
+
+    app.use(QuiMax.default);
+    app.mount('#app');
+  </script>
+  <style>
+    .block {
+      margin: 20px;
+    }
+  </style>
+</html>
diff --git a/vuepress-docs/docs/components/QInput.md b/vuepress-docs/docs/components/QInput.md
@@ -43,8 +43,8 @@ Binding value.
 
 ### disabled
 
-- Type: `String`
-- Default: `null`
+- Type: `Boolean`
+- Default: `false`
 
 Whether input is disabled.
 

diff --git a/vuepress-docs/docs/components/QTextarea.md b/vuepress-docs/docs/components/QTextarea.md
@@ -0,0 +1,159 @@
+# QTextarea 📝
+
+The `QTextarea` is a component that is used to get user input in a multi-line text field.
+
+## Examples
+
+<iframe height="360" style="width: 100%;" scrolling="no" frameborder="no" src="/QTextarea/main.html"></iframe>
+
+Template:
+
+```vue
+<template>
+  <q-textarea v-model="value" />
+</template>
+```
+
+Component instance:
+
+```js
+export default {
+  setup() {
+    const value = ref('');
+    return {
+      value
+    };
+  }
+};
+```
+
+## Props
+
+### modelValue
+
+- Type: `String`
+- Default: `null`
+
+Binding value.
+
+### disabled
+
+- Type: `Boolean`
+- Default: `false`
+
+Whether textarea is disabled.
+
+```vue {3}
+<template>
+  <q-textarea
+    v-model="value"
+    disabled
+  />
+</template>
+```
+
+### autosize
+
+- Type: `Boolean` | `Object`
+- Default: `true`
+
+Whether textarea has an adaptive height. Helps to control min and max rows count.
+
+```ts
+type QTextareaPropAutosize = Nullable<
+  boolean | { minRows: number; maxRows: number }
+>;
+```
+
+```vue {4}
+<template>
+  <q-textarea
+    v-model="value"
+    :autosize="{ minRows: 6, maxRows: 8 }"
+  />
+</template>
+```
+
+### resize
+
+- Type: `'vertical' | 'horizontal' | 'both' | 'none'`
+- Default: `'vertical'`
+
+Control the resizability. As native `resize` attribute.
+
+::: tip NOTE
+The `resize` works only if `autosize` is `false`:
+:::
+
+```vue {4,5}
+<template>
+  <q-textarea
+    v-model="value"
+    resize="horizontal"
+    :autosize="false"
+  >
+</template>
+```
+
+### showSymbolLimit
+
+- Type: `Boolean`
+- Default: `false`
+
+Shows the symbol's counter.
+
+::: tip NOTE
+The `maxlength` attribute is required:
+:::
+
+```vue {4,5}
+<template>
+  <q-textarea
+    v-model="value"
+    maxlength="100"
+    show-symbol-limit
+  >
+</template>
+```
+
+### validateEvent
+
+- type `boolean`
+- Default `false`
+
+If textarea wrapped in `QFormItem`, prop `validateEvent` defines if textarea `change` event will be validated immediately
+
+## Attributes
+
+`QTextarea` support native `textarea` attrubutes:
+
+- placeholder
+- maxlength
+- autocomplete
+- readonly
+
+.. and [others](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea#attributes)
+
+p.s `textarea` has a lot of attributes, we can't claim `QTextarea` well supported all of them, but mostly true. Feel free to fix and contribute bugs [here](https://github.com/Qvant-lab/qui-max)
+
+## Events
+
+### update:modelValue
+
+Triggers when the model is being updated.
+
+### change
+
+Alias for [update:modelValue](#update-modelvalue)
+
+### input
+
+Triggers when native input event fires.
+
+### focus
+
+Triggers when input gets focus.
+
+### blur
+
+Triggers when input gets blur.