vertumnus
/
primevue-mirror
mirror of https://github.com/primefaces/primevue.git
1
0
Fork 0
Code Packages Releases Activity

Invalid state updates

pull/5456/head
tugcekucukoglu 2024-03-19 09:58:22 +03:00
parent dae3d8fcb6
commit 052b54a7d7
4 changed files with 20 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
doc/datatable/samples/ProductsDoc.vue
View File

@ -78,7 +78,7 @@
<img v-if="product.image" :src="`https://primefaces.org/cdn/primevue/images/product/${product.image}`" :alt="product.image" class="block m-auto pb-3" /> <img v-if="product.image" :src="`https://primefaces.org/cdn/primevue/images/product/${product.image}`" :alt="product.image" class="block m-auto pb-3" />
<div class="field"> <div class="field">
<label for="name">Name</label> <label for="name">Name</label>
<InputText id="name" v-model.trim="product.name" required="true" autofocus :class="{ 'p-invalid': submitted && !product.name }" /> <InputText id="name" v-model.trim="product.name" required="true" autofocus :invalid="submitted && !product.name" />
<small v-if="submitted && !product.name" class="p-error">Name is required.</small> <small v-if="submitted && !product.name" class="p-error">Name is required.</small>
</div> </div>
<div class="field"> <div class="field">
@ -317,7 +317,7 @@ export default {
<img v-if="product.image" :src="\`https://primefaces.org/cdn/primevue/images/product/\${product.image}\`" :alt="product.image" class="block m-auto pb-3" /> <img v-if="product.image" :src="\`https://primefaces.org/cdn/primevue/images/product/\${product.image}\`" :alt="product.image" class="block m-auto pb-3" />
<div class="field"> <div class="field">
<label for="name">Name</label> <label for="name">Name</label>
<InputText id="name" v-model.trim="product.name" required="true" autofocus :class="{'p-invalid': submitted && !product.name}" /> <InputText id="name" v-model.trim="product.name" required="true" autofocus :invalid="submitted && !product.name" />
<small class="p-error" v-if="submitted && !product.name">Name is required.</small> <small class="p-error" v-if="submitted && !product.name">Name is required.</small>
</div> </div>
<div class="field"> <div class="field">
@ -450,7 +450,7 @@ export default {
saveProduct() { saveProduct() {
this.submitted = true; this.submitted = true;
if (this.product.name.trim()) { if (this.product?.name?.trim()) {
if (this.product.id) { if (this.product.id) {
this.product.inventoryStatus = this.product.inventoryStatus.value ? this.product.inventoryStatus.value: this.product.inventoryStatus; this.product.inventoryStatus = this.product.inventoryStatus.value ? this.product.inventoryStatus.value: this.product.inventoryStatus;
this.products[this.findIndexById(this.product.id)] = this.product; this.products[this.findIndexById(this.product.id)] = this.product;
@ -608,7 +608,7 @@ export default {
<img v-if="product.image" :src="\`https://primefaces.org/cdn/primevue/images/product/\${product.image}\`" :alt="product.image" class="block m-auto pb-3" /> <img v-if="product.image" :src="\`https://primefaces.org/cdn/primevue/images/product/\${product.image}\`" :alt="product.image" class="block m-auto pb-3" />
<div class="field"> <div class="field">
<label for="name">Name</label> <label for="name">Name</label>
<InputText id="name" v-model.trim="product.name" required="true" autofocus :class="{'p-invalid': submitted && !product.name}" /> <InputText id="name" v-model.trim="product.name" required="true" autofocus :invalid="submitted && !product.name" />
<small class="p-error" v-if="submitted && !product.name">Name is required.</small> <small class="p-error" v-if="submitted && !product.name">Name is required.</small>
</div> </div>
<div class="field"> <div class="field">
@ -740,7 +740,7 @@ const hideDialog = () => {
const saveProduct = () => { const saveProduct = () => {
submitted.value = true; submitted.value = true;
if (product.value.name.trim()) { if (product?.value.name?.trim()) {
if (product.value.id) { if (product.value.id) {
product.value.inventoryStatus = product.value.inventoryStatus.value ? product.value.inventoryStatus.value : product.value.inventoryStatus; product.value.inventoryStatus = product.value.inventoryStatus.value ? product.value.inventoryStatus.value : product.value.inventoryStatus;
products.value[findIndexById(product.value.id)] = product.value; products.value[findIndexById(product.value.id)] = product.value;
@ -864,7 +864,7 @@ const getStatusLabel = (status) => {
saveProduct() { saveProduct() {
this.submitted = true; this.submitted = true;
if (this.product.name.trim()) { if (this.product?.name?.trim()) {
if (this.product.id) { if (this.product.id) {
this.product.inventoryStatus = this.product.inventoryStatus.value ? this.product.inventoryStatus.value : this.product.inventoryStatus; this.product.inventoryStatus = this.product.inventoryStatus.value ? this.product.inventoryStatus.value : this.product.inventoryStatus;
this.products[this.findIndexById(this.product.id)] = this.product; this.products[this.findIndexById(this.product.id)] = this.product;

10
doc/inputmask/InvalidDoc.vue
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> <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> </DocSectionText>
<div class="card flex justify-content-center"> <div class="card flex justify-content-center">
<InputMask v-model="value" mask="99-999999" placeholder="99-999999" class="p-invalid" /> <InputMask v-model="value" mask="99-999999" placeholder="99-999999" invalid />
</div> </div>
<DocSectionCode :code="code" /> <DocSectionCode :code="code" />
</template> </template>
@ -15,12 +15,12 @@ export default {
value: '', value: '',
code: { code: {
basic: ` basic: `
<InputMask v-model="value" mask="99-999999" placeholder="99-999999" class="p-invalid"/> <InputMask v-model="value" mask="99-999999" placeholder="99-999999" invalid />
`, `,
options: ` options: `
<template> <template>
<div class="card flex justify-content-center"> <div class="card flex justify-content-center">
<InputMask v-model="value" mask="99-999999" placeholder="99-999999" class="p-invalid"/> <InputMask v-model="value" mask="99-999999" placeholder="99-999999" invalid />
</div> </div>
</template> </template>
@ -33,12 +33,12 @@ export default {
} }
} }
<\/script> <\/script>
`, `,
composition: ` composition: `
<template> <template>
<div class="card flex justify-content-center"> <div class="card flex justify-content-center">
<InputMask v-model="value" mask="99-999999" placeholder="99-999999" class="p-invalid"/> <InputMask v-model="value" mask="99-999999" placeholder="99-999999" invalid />
</div> </div>
</template> </template>

10
doc/multiselect/InvalidDoc.vue
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> <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> </DocSectionText>
<div class="card flex justify-content-center"> <div class="card flex justify-content-center">
<MultiSelect v-model="selectedCities" :options="cities" optionLabel="name" placeholder="Select Cities" :maxSelectedLabels="3" class="p-invalid w-full md:w-20rem" /> <MultiSelect v-model="selectedCities" :options="cities" optionLabel="name" placeholder="Select Cities" :maxSelectedLabels="3" invalid class="w-full md:w-20rem" />
</div> </div>
<DocSectionCode :code="code" /> <DocSectionCode :code="code" />
</template> </template>
@ -23,13 +23,13 @@ export default {
code: { code: {
basic: ` basic: `
<MultiSelect v-model="selectedCities" :options="cities" optionLabel="name" placeholder="Select Cities" <MultiSelect v-model="selectedCities" :options="cities" optionLabel="name" placeholder="Select Cities"
:maxSelectedLabels="3" class="p-invalid w-full md:w-20rem" /> :maxSelectedLabels="3" invalid class="w-full md:w-20rem" />
`, `,
options: ` options: `
<template> <template>
<div class="card flex justify-content-center"> <div class="card flex justify-content-center">
<MultiSelect v-model="selectedCities" :options="cities" optionLabel="name" placeholder="Select Cities" <MultiSelect v-model="selectedCities" :options="cities" optionLabel="name" placeholder="Select Cities"
:maxSelectedLabels="3" class="p-invalid w-full md:w-20rem" /> :maxSelectedLabels="3" invalid class="w-full md:w-20rem" />
</div> </div>
</template> </template>
@ -54,7 +54,7 @@ export default {
<template> <template>
<div class="card flex justify-content-center"> <div class="card flex justify-content-center">
<MultiSelect v-model="selectedCities" :options="cities" optionLabel="name" placeholder="Select Cities" <MultiSelect v-model="selectedCities" :options="cities" optionLabel="name" placeholder="Select Cities"
:maxSelectedLabels="3" class="p-invalid w-full md:w-20rem" /> :maxSelectedLabels="3" invalid class="w-full md:w-20rem" />
</div> </div>
</template> </template>

8
doc/selectbutton/InvalidDoc.vue
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> <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> </DocSectionText>
<div class="card flex justify-content-center"> <div class="card flex justify-content-center">
<SelectButton v-model="value" :options="options" aria-labelledby="basic" class="p-invalid" /> <SelectButton v-model="value" :options="options" aria-labelledby="basic" invalid />
</div> </div>
<DocSectionCode :code="code" /> <DocSectionCode :code="code" />
</template> </template>
@ -16,12 +16,12 @@ export default {
options: ['One-Way', 'Return'], options: ['One-Way', 'Return'],
code: { code: {
basic: ` basic: `
<SelectButton v-model="value" :options="options" aria-labelledby="basic" class="p-invalid" /> <SelectButton v-model="value" :options="options" aria-labelledby="basic" invalid />
`, `,
options: ` options: `
<template> <template>
<div class="card flex justify-content-center"> <div class="card flex justify-content-center">
<SelectButton v-model="value" :options="options" aria-labelledby="basic" class="p-invalid" /> <SelectButton v-model="value" :options="options" aria-labelledby="basic" invalid />
</div> </div>
</template> </template>
@ -39,7 +39,7 @@ export default {
composition: ` composition: `
<template> <template>
<div class="card flex justify-content-center"> <div class="card flex justify-content-center">
<SelectButton v-model="value" :options="options" aria-labelledby="basic" class="p-invalid" /> <SelectButton v-model="value" :options="options" aria-labelledby="basic" invalid />
</div> </div>
</template> </template>