aboutsummaryrefslogtreecommitdiff
path: root/src/ui/c-input-text/c-input-text.demo.vue
diff options
context:
space:
mode:
Diffstat (limited to 'src/ui/c-input-text/c-input-text.demo.vue')
-rw-r--r--src/ui/c-input-text/c-input-text.demo.vue45
1 files changed, 41 insertions, 4 deletions
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>