Invalid demo updates

This commit is contained in:
tugcekucukoglu 2024-06-03 11:28:56 +03:00
parent c6e70a973c
commit 27ab8ee07b
16 changed files with 77 additions and 77 deletions

View file

@ -3,7 +3,7 @@
<p>Invalid state is displayed using the <i>invalid</i> prop to indicate a failed validation. You can use this style when integrating with form validation libraries.</p>
</DocSectionText>
<div class="card flex justify-center">
<InputText v-model="value" invalid />
<InputText v-model="value" :invalid="value === ''" />
</div>
<DocSectionCode :code="code" />
</template>
@ -12,15 +12,15 @@
export default {
data() {
return {
value: null,
value: '',
code: {
basic: `
<InputText v-model="value" invalid />
<InputText v-model="value" :invalid="value === null" />
`,
options: `
<template>
<div class="card flex justify-center">
<InputText v-model="value" invalid />
<InputText v-model="value" :invalid="value === null" />
</div>
</template>
@ -28,7 +28,7 @@ export default {
export default {
data() {
return {
value: null
value: ''
}
}
}
@ -37,14 +37,14 @@ export default {
composition: `
<template>
<div class="card flex justify-center">
<InputText v-model="value" invalid />
<InputText v-model="value" :invalid="value === null" />
</div>
</template>
<script setup>
import { ref } from 'vue';
const value = ref(null);
const value = ref('');
<\/script>
`
}