diff options
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.vue | 45 |
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> |