From 77f2efc0b92847c3b1198446f4b520ecb2263164 Mon Sep 17 00:00:00 2001
From: Corentin Thomasset <corentin.thomasset74@gmail.com>
Date: Sun, 14 May 2023 21:26:18 +0200
Subject: refactor(ui): replaced some n-input with c-input-text

---
 src/ui/c-input-text/c-input-text.demo.vue | 45 ++++++++++++++++++++++++++++---
 1 file changed, 41 insertions(+), 4 deletions(-)

(limited to 'src/ui/c-input-text/c-input-text.demo.vue')

diff --git a/src/ui/c-input-text/c-input-text.demo.vue b/src/ui/c-input-text/c-input-text.demo.vue
index 2363219..5a5fa99 100644
--- a/src/ui/c-input-text/c-input-text.demo.vue
+++ b/src/ui/c-input-text/c-input-text.demo.vue
@@ -2,6 +2,9 @@
   <h2>Default</h2>
 
   <c-input-text value="qsd" />
+  <c-input-text
+    value="Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorum, est modi iusto repellendus fuga accusantium atque at magnam aliquam eum explicabo vero quia, nobis quasi quis! Earum amet quam a?"
+  />
 
   <h2>With placeholder</h2>
 
@@ -24,16 +27,50 @@
 
   <h2>Validation</h2>
 
-  <c-input-text
-    v-model:value="value"
-    :validation-rules="[{ message: 'Length must be > 10', validator: (value) => value.length > 10 }]"
-  />
+  <c-input-text v-model:value="value" :validation-rules="validationRules" mb-2 />
+  <c-input-text v-model:value="value" :validation-rules="validationRules" mb-2 label-position="left" label="Yo " />
+  <c-input-text v-model:value="value" :validation="validation" />
+  <c-input-text v-model:value="value" :validation="validation" multiline rows="3" />
 
   <h2>Clearable</h2>
 
   <c-input-text v-model:value="value" clearable />
+
+  <h2>Type password</h2>
+
+  <c-input-text value="value" type="password" />
+
+  <h2>Multiline</h2>
+
+  <c-input-text value="value" multiline label="Label" mb-2 rows="1" />
+  <c-input-text value="value" multiline label="Label" mb-2 />
+  <c-input-text
+    value="Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorum, est modi iusto repellendus fuga accusantium atque at magnam aliquam eum explicabo vero quia, nobis quasi quis! Earum amet quam a?"
+    multiline
+    mb-2
+  />
+
+  <c-input-text v-model:value="valueLong" multiline autosize mb-2 rows="5" />
+
+  <c-input-text
+    value="Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorum, est modi iusto repellendus fuga accusantium atque at magnam aliquam eum explicabo vero quia, nobis quasi quis! Earum amet quam a?"
+    multiline
+    clearable
+  />
 </template>
 
 <script lang="ts" setup>
+import { useValidation } from '@/composable/validation';
+
 const value = ref('value');
+const valueLong = ref(
+  'Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorum, est modi iusto repellendus fuga accusantium atque at magnam aliquam eum explicabo vero quia, nobis quasi quis! Earum amet quam a?',
+);
+
+const validationRules = [{ message: 'Length must be > 10', validator: (value: string) => value.length > 10 }];
+
+const validation = useValidation({
+  source: value,
+  rules: validationRules,
+});
 </script>
-- 
cgit v1.2.3