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

Invalid demos updates

pull/5182/head
tugcekucukoglu 2024-01-30 14:29:42 +03:00
parent 89e89a4974
commit d5d735f643
17 changed files with 81 additions and 81 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
doc/autocomplete/InvalidDoc.vue
View File

@ -3,7 +3,7 @@
<p>Invalid state style is added using the <i>p-invalid</i> class to indicate a failed validation.</p> <p>Invalid state style is added using the <i>p-invalid</i> class to indicate a failed validation.</p>
</DocSectionText> </DocSectionText>
<div class="card flex justify-content-center"> <div class="card flex justify-content-center">
<AutoComplete v-model="value" :suggestions="items" @complete="search" class="p-invalid" /> <AutoComplete v-model="value" :suggestions="items" @complete="search" invalid />
</div> </div>
<DocSectionCode :code="code" /> <DocSectionCode :code="code" />
</template> </template>
@ -16,12 +16,12 @@ export default {
items: [], items: [],
code: { code: {
basic: ` basic: `
<AutoComplete v-model="value" :suggestions="items" @complete="search" class="p-invalid" /> <AutoComplete v-model="value" :suggestions="items" @complete="search" invalid />
`, `,
options: ` options: `
<template> <template>
<div class="card flex justify-content-center"> <div class="card flex justify-content-center">
<AutoComplete v-model="value" :suggestions="items" @complete="search" class="p-invalid" /> <AutoComplete v-model="value" :suggestions="items" @complete="search" invalid />
</div> </div>
</template> </template>
@ -44,7 +44,7 @@ export default {
composition: ` composition: `
<template> <template>
<div class="card flex justify-content-center"> <div class="card flex justify-content-center">
<AutoComplete v-model="value" :suggestions="items" @complete="search" class="p-invalid" /> <AutoComplete v-model="value" :suggestions="items" @complete="search" invalid />
</div> </div>
</template> </template>

8
doc/calendar/InvalidDoc.vue
View File

@ -3,7 +3,7 @@
<p>Calendar is used a controlled input component with <i>v-model</i> property.</p> <p>Calendar is used a controlled input component with <i>v-model</i> property.</p>
</DocSectionText> </DocSectionText>
<div class="card flex justify-content-center"> <div class="card flex justify-content-center">
<Calendar v-model="date" class="p-invalid" /> <Calendar v-model="date" invalid />
</div> </div>
<DocSectionCode :code="code" /> <DocSectionCode :code="code" />
</template> </template>
@ -15,12 +15,12 @@ export default {
date: null, date: null,
code: { code: {
basic: ` basic: `
<Calendar v-model="date" class="p-invalid" /> <Calendar v-model="date" invalid />
`, `,
options: ` options: `
<template> <template>
<div class="card flex justify-content-center"> <div class="card flex justify-content-center">
<Calendar v-model="date" class="p-invalid" /> <Calendar v-model="date" invalid />
</div> </div>
</template> </template>
@ -37,7 +37,7 @@ export default {
composition: ` composition: `
<template> <template>
<div class="card flex justify-content-center"> <div class="card flex justify-content-center">
<Calendar v-model="date" class="p-invalid" /> <Calendar v-model="date" invalid />
</div> </div>
</template> </template>

8
doc/cascadeselect/InvalidDoc.vue
View File

@ -3,7 +3,7 @@
<p>Invalid state style is added using the <i>p-invalid</i> class to indicate a failed validation.</p> <p>Invalid state style is added using the <i>p-invalid</i> class to indicate a failed validation.</p>
</DocSectionText> </DocSectionText>
<div class="card flex justify-content-center"> <div class="card flex justify-content-center">
<CascadeSelect v-model="selectedCity" class="p-invalid" :options="countries" optionLabel="cname" optionGroupLabel="name" :optionGroupChildren="['states', 'cities']" style="min-width: 14rem" placeholder="Select a City" /> <CascadeSelect v-model="selectedCity" invalid :options="countries" optionLabel="cname" optionGroupLabel="name" :optionGroupChildren="['states', 'cities']" style="min-width: 14rem" placeholder="Select a City" />
</div> </div>
<DocSectionCode :code="code" /> <DocSectionCode :code="code" />
</template> </template>
@ -89,13 +89,13 @@ export default {
], ],
code: { code: {
basic: ` basic: `
<CascadeSelect v-model="selectedCity" class="p-invalid" :options="countries" optionLabel="cname" optionGroupLabel="name" <CascadeSelect v-model="selectedCity" invalid :options="countries" optionLabel="cname" optionGroupLabel="name"
:optionGroupChildren="['states', 'cities']" style="min-width: 14rem" placeholder="Select a City" /> :optionGroupChildren="['states', 'cities']" style="min-width: 14rem" placeholder="Select a City" />
`, `,
options: ` options: `
<template> <template>
<div class="card flex justify-content-center"> <div class="card flex justify-content-center">
<CascadeSelect v-model="selectedCity" class="p-invalid" :options="countries" optionLabel="cname" optionGroupLabel="name" <CascadeSelect v-model="selectedCity" invalid :options="countries" optionLabel="cname" optionGroupLabel="name"
:optionGroupChildren="['states', 'cities']" style="min-width: 14rem" placeholder="Select a City" /> :optionGroupChildren="['states', 'cities']" style="min-width: 14rem" placeholder="Select a City" />
</div> </div>
</template> </template>
@ -187,7 +187,7 @@ export default {
composition: ` composition: `
<template> <template>
<div class="card flex justify-content-center"> <div class="card flex justify-content-center">
<CascadeSelect v-model="selectedCity" class="p-invalid" :options="countries" optionLabel="cname" optionGroupLabel="name" <CascadeSelect v-model="selectedCity" invalid :options="countries" optionLabel="cname" optionGroupLabel="name"
:optionGroupChildren="['states', 'cities']" style="min-width: 14rem" placeholder="Select a City" /> :optionGroupChildren="['states', 'cities']" style="min-width: 14rem" placeholder="Select a City" />
</div> </div>
</template> </template>

8
doc/checkbox/InvalidDoc.vue
View File

@ -3,7 +3,7 @@
<p>Invalid state style is added using the <i>p-invalid</i> class to indicate a failed validation.</p> <p>Invalid state style is added using the <i>p-invalid</i> class to indicate a failed validation.</p>
</DocSectionText> </DocSectionText>
<div class="card flex justify-content-center"> <div class="card flex justify-content-center">
<Checkbox v-model="checked" class="p-invalid" binary /> <Checkbox v-model="checked" invalid binary />
</div> </div>
<DocSectionCode :code="code" /> <DocSectionCode :code="code" />
</template> </template>
@ -15,12 +15,12 @@ export default {
checked: false, checked: false,
code: { code: {
basic: ` basic: `
<Checkbox v-model="checked" class="p-invalid" binary /> <Checkbox v-model="checked" invalid binary />
`, `,
options: ` options: `
<template> <template>
<div class="card flex justify-content-center"> <div class="card flex justify-content-center">
<Checkbox v-model="checked" class="p-invalid" binary /> <Checkbox v-model="checked" invalid binary />
</div> </div>
</template> </template>
@ -37,7 +37,7 @@ export default {
composition: ` composition: `
<template> <template>
<div class="card flex justify-content-center"> <div class="card flex justify-content-center">
<Checkbox v-model="checked" class="p-invalid" binary /> <Checkbox v-model="checked" invalid binary />
</div> </div>
</template> </template>

8
doc/chips/InvalidDoc.vue
View File

@ -3,7 +3,7 @@
<p>Invalid state style is added using the <i>p-invalid</i> class to indicate a failed validation.</p> <p>Invalid state style is added using the <i>p-invalid</i> class to indicate a failed validation.</p>
</DocSectionText> </DocSectionText>
<div class="card p-fluid"> <div class="card p-fluid">
<Chips v-model="value" class="p-invalid" /> <Chips v-model="value" invalid />
</div> </div>
<DocSectionCode :code="code" /> <DocSectionCode :code="code" />
</template> </template>
@ -15,12 +15,12 @@ export default {
value: null, value: null,
code: { code: {
basic: ` basic: `
<Chips v-model="value" class="p-invalid" /> <Chips v-model="value" invalid />
`, `,
options: ` options: `
<template> <template>
<div class="card p-fluid"> <div class="card p-fluid">
<Chips v-model="value" class="p-invalid" /> <Chips v-model="value" invalid />
</div> </div>
</template> </template>
@ -37,7 +37,7 @@ export default {
composition: ` composition: `
<template> <template>
<div class="card p-fluid"> <div class="card p-fluid">
<Chips v-model="value" class="p-invalid" /> <Chips v-model="value" invalid />
</div> </div>
</template> </template>

8
doc/dropdown/InvalidDoc.vue
View File

@ -3,7 +3,7 @@
<p>Invalid state style is added using the <i>p-invalid</i> class to indicate a failed validation.</p> <p>Invalid state style is added using the <i>p-invalid</i> class to indicate a failed validation.</p>
</DocSectionText> </DocSectionText>
<div class="card flex justify-content-center"> <div class="card flex justify-content-center">
<Dropdown v-model="selectedCity" :options="cities" optionLabel="name" placeholder="Select a City" class="p-invalid w-full md:w-14rem" /> <Dropdown v-model="selectedCity" :options="cities" optionLabel="name" placeholder="Select a City" invalid class="w-full md:w-14rem" />
</div> </div>
<DocSectionCode :code="code" /> <DocSectionCode :code="code" />
</template> </template>
@ -22,12 +22,12 @@ export default {
], ],
code: { code: {
basic: ` basic: `
<Dropdown v-model="selectedCity" :options="cities" optionLabel="name" placeholder="Select a City" class="p-invalid w-full md:w-14rem" /> <Dropdown v-model="selectedCity" :options="cities" optionLabel="name" placeholder="Select a City" invalid class="w-full md:w-14rem" />
`, `,
options: ` options: `
<template> <template>
<div class="card flex justify-content-center"> <div class="card flex justify-content-center">
<Dropdown v-model="selectedCity" :options="cities" optionLabel="name" placeholder="Select a City" class="p-invalid w-full md:w-14rem" /> <Dropdown v-model="selectedCity" :options="cities" optionLabel="name" placeholder="Select a City" invalid class="w-full md:w-14rem" />
</div> </div>
</template> </template>
@ -51,7 +51,7 @@ export default {
composition: ` composition: `
<template> <template>
<div class="card flex justify-content-center"> <div class="card flex justify-content-center">
<Dropdown v-model="selectedCity" :options="cities" optionLabel="name" placeholder="Select a City" class="p-invalid w-full md:w-14rem" /> <Dropdown v-model="selectedCity" :options="cities" optionLabel="name" placeholder="Select a City" invalid class="w-full md:w-14rem" />
</div> </div>
</template> </template>

16
doc/inlinemessage/FormDoc.vue
View File

@ -5,12 +5,12 @@
<div class="card"> <div class="card">
<div class="flex flex-wrap align-items-center mb-3 gap-2"> <div class="flex flex-wrap align-items-center mb-3 gap-2">
<label for="username" class="p-sr-only">Username</label> <label for="username" class="p-sr-only">Username</label>
<InputText id="username" placeholder="Username" class="p-invalid" /> <InputText id="username" placeholder="Username" invalid />
<InlineMessage>Username is required</InlineMessage> <InlineMessage>Username is required</InlineMessage>
</div> </div>
<div class="flex flex-wrap align-items-center gap-2"> <div class="flex flex-wrap align-items-center gap-2">
<label for="email" class="p-sr-only">email</label> <label for="email" class="p-sr-only">email</label>
<InputText id="email" placeholder="Email" class="p-invalid" /> <InputText id="email" placeholder="Email" invalid />
<InlineMessage /> <InlineMessage />
</div> </div>
</div> </div>
@ -25,12 +25,12 @@ export default {
basic: ` basic: `
<div class="flex flex-wrap align-items-center mb-3 gap-2"> <div class="flex flex-wrap align-items-center mb-3 gap-2">
<label for="username" class="p-sr-only">Username</label> <label for="username" class="p-sr-only">Username</label>
<InputText id="username" placeholder="Username" class="p-invalid" /> <InputText id="username" placeholder="Username" invalid />
<InlineMessage>Username is required</InlineMessage> <InlineMessage>Username is required</InlineMessage>
</div> </div>
<div class="flex flex-wrap align-items-center gap-2"> <div class="flex flex-wrap align-items-center gap-2">
<label for="email" class="p-sr-only">email</label> <label for="email" class="p-sr-only">email</label>
<InputText id="email" placeholder="Email" class="p-invalid" /> <InputText id="email" placeholder="Email" invalid />
<InlineMessage /> <InlineMessage />
</div> </div>
`, `,
@ -39,12 +39,12 @@ export default {
<div class="card"> <div class="card">
<div class="flex flex-wrap align-items-center mb-3 gap-2"> <div class="flex flex-wrap align-items-center mb-3 gap-2">
<label for="username" class="p-sr-only">Username</label> <label for="username" class="p-sr-only">Username</label>
<InputText id="username" placeholder="Username" class="p-invalid" /> <InputText id="username" placeholder="Username" invalid />
<InlineMessage>Username is required</InlineMessage> <InlineMessage>Username is required</InlineMessage>
</div> </div>
<div class="flex flex-wrap align-items-center gap-2"> <div class="flex flex-wrap align-items-center gap-2">
<label for="email" class="p-sr-only">email</label> <label for="email" class="p-sr-only">email</label>
<InputText id="email" placeholder="Email" class="p-invalid" /> <InputText id="email" placeholder="Email" invalid />
<InlineMessage /> <InlineMessage />
</div> </div>
</div> </div>
@ -58,12 +58,12 @@ export default {
<div class="card"> <div class="card">
<div class="flex flex-wrap align-items-center mb-3 gap-2"> <div class="flex flex-wrap align-items-center mb-3 gap-2">
<label for="username" class="p-sr-only">Username</label> <label for="username" class="p-sr-only">Username</label>
<InputText id="username" placeholder="Username" class="p-invalid" /> <InputText id="username" placeholder="Username" invalid />
<InlineMessage>Username is required</InlineMessage> <InlineMessage>Username is required</InlineMessage>
</div> </div>
<div class="flex flex-wrap align-items-center gap-2"> <div class="flex flex-wrap align-items-center gap-2">
<label for="email" class="p-sr-only">email</label> <label for="email" class="p-sr-only">email</label>
<InputText id="email" placeholder="Email" class="p-invalid" /> <InputText id="email" placeholder="Email" invalid />
<InlineMessage /> <InlineMessage />
</div> </div>
</div> </div>

8
doc/inputnumber/InvalidDoc.vue
View File

@ -3,7 +3,7 @@
<p>Invalid state style is added using the <i>p-invalid</i> class to indicate a failed validation.</p> <p>Invalid state style is added using the <i>p-invalid</i> class to indicate a failed validation.</p>
</DocSectionText> </DocSectionText>
<div class="card flex justify-content-center"> <div class="card flex justify-content-center">
<InputNumber v-model="value" class="p-invalid" mode="decimal" :minFractionDigits="2" /> <InputNumber v-model="value" invalid mode="decimal" :minFractionDigits="2" />
</div> </div>
<DocSectionCode :code="code" /> <DocSectionCode :code="code" />
</template> </template>
@ -15,12 +15,12 @@ export default {
value: null, value: null,
code: { code: {
basic: ` basic: `
<InputNumber v-model="value" class="p-invalid" mode="decimal" :minFractionDigits="2" /> <InputNumber v-model="value" invalid mode="decimal" :minFractionDigits="2" />
`, `,
options: ` options: `
<template> <template>
<div class="card flex justify-content-center"> <div class="card flex justify-content-center">
<InputNumber v-model="value" class="p-invalid" mode="decimal" :minFractionDigits="2" /> <InputNumber v-model="value" invalid mode="decimal" :minFractionDigits="2" />
</div> </div>
</template> </template>
@ -37,7 +37,7 @@ export default {
composition: ` composition: `
<template> <template>
<div class="card flex justify-content-center"> <div class="card flex justify-content-center">
<InputNumber v-model="value" class="p-invalid" mode="decimal" :minFractionDigits="2" /> <InputNumber v-model="value" invalid mode="decimal" :minFractionDigits="2" />
</div> </div>
</template> </template>

8
doc/inputswitch/InvalidDoc.vue
View File

@ -3,7 +3,7 @@
<p>Invalid state style is added using the <i>p-invalid</i> class to indicate a failed validation.</p> <p>Invalid state style is added using the <i>p-invalid</i> class to indicate a failed validation.</p>
</DocSectionText> </DocSectionText>
<div class="card flex justify-content-center"> <div class="card flex justify-content-center">
<InputSwitch v-model="checked" class="p-invalid" /> <InputSwitch v-model="checked" invalid />
</div> </div>
<DocSectionCode :code="code" /> <DocSectionCode :code="code" />
</template> </template>
@ -15,12 +15,12 @@ export default {
checked: false, checked: false,
code: { code: {
basic: ` basic: `
<InputSwitch v-model="checked" class="p-invalid" /> <InputSwitch v-model="checked" invalid />
`, `,
options: ` options: `
<template> <template>
<div class="card flex justify-content-center"> <div class="card flex justify-content-center">
<InputSwitch v-model="checked" class="p-invalid" /> <InputSwitch v-model="checked" invalid />
</div> </div>
</template> </template>
@ -37,7 +37,7 @@ export default {
composition: ` composition: `
<template> <template>
<div class="card flex justify-content-center"> <div class="card flex justify-content-center">
<InputSwitch v-model="checked" class="p-invalid" /> <InputSwitch v-model="checked" invalid />
</div> </div>
</template> </template>

8
doc/inputtext/InvalidDoc.vue
View File

@ -3,7 +3,7 @@
<p>Invalid state style is added using the <i>.p-invalid</i> class to indicate a failed validation.</p> <p>Invalid state style is added using the <i>.p-invalid</i> class to indicate a failed validation.</p>
</DocSectionText> </DocSectionText>
<div class="card flex justify-content-center"> <div class="card flex justify-content-center">
<InputText v-model="value" class="p-invalid" /> <InputText v-model="value" invalid />
</div> </div>
<DocSectionCode :code="code" /> <DocSectionCode :code="code" />
</template> </template>
@ -15,12 +15,12 @@ export default {
value: null, value: null,
code: { code: {
basic: ` basic: `
<InputText v-model="value" class="p-invalid" /> <InputText v-model="value" invalid />
`, `,
options: ` options: `
<template> <template>
<div class="card flex justify-content-center"> <div class="card flex justify-content-center">
<InputText v-model="value" class="p-invalid" /> <InputText v-model="value" invalid />
</div> </div>
</template> </template>
@ -37,7 +37,7 @@ export default {
composition: ` composition: `
<template> <template>
<div class="card flex justify-content-center"> <div class="card flex justify-content-center">
<InputText v-model="value" class="p-invalid" /> <InputText v-model="value" invalid />
</div> </div>
</template> </template>

8
doc/listbox/InvalidDoc.vue
View File

@ -3,7 +3,7 @@
<p>Invalid state style is added using the <i>p-invalid</i> class to indicate a failed validation.</p> <p>Invalid state style is added using the <i>p-invalid</i> class to indicate a failed validation.</p>
</DocSectionText> </DocSectionText>
<div class="card flex justify-content-center"> <div class="card flex justify-content-center">
<Listbox v-model="selectedCity" :options="cities" optionLabel="name" class="p-invalid w-full md:w-14rem" /> <Listbox v-model="selectedCity" :options="cities" optionLabel="name" invalid class="w-full md:w-14rem" />
</div> </div>
<DocSectionCode :code="code" /> <DocSectionCode :code="code" />
</template> </template>
@ -22,12 +22,12 @@ export default {
], ],
code: { code: {
basic: ` basic: `
<Listbox v-model="selectedCity" :options="cities" optionLabel="name" class="p-invalid w-full md:w-14rem" /> <Listbox v-model="selectedCity" :options="cities" optionLabel="name" invalid class="w-full md:w-14rem" />
`, `,
options: ` options: `
<template> <template>
<div class="card flex justify-content-center"> <div class="card flex justify-content-center">
<Listbox v-model="selectedCity" :options="cities" optionLabel="name" class="p-invalid w-full md:w-14rem" /> <Listbox v-model="selectedCity" :options="cities" optionLabel="name" invalid class="w-full md:w-14rem" />
</div> </div>
</template> </template>
@ -51,7 +51,7 @@ export default {
composition: ` composition: `
<template> <template>
<div class="card flex justify-content-center"> <div class="card flex justify-content-center">
<Listbox v-model="selectedCity" :options="cities" optionLabel="name" class="p-invalid w-full md:w-14rem" /> <Listbox v-model="selectedCity" :options="cities" optionLabel="name" invalid class="w-full md:w-14rem" />
</div> </div>
</template> </template>

8
doc/password/InvalidDoc.vue
View File

@ -3,7 +3,7 @@
<p>Invalid state style is added using the <i>p-invalid</i> class to indicate a failed validation.</p> <p>Invalid state style is added using the <i>p-invalid</i> class to indicate a failed validation.</p>
</DocSectionText> </DocSectionText>
<div class="card flex justify-content-center"> <div class="card flex justify-content-center">
<Password class="p-invalid" /> <Password invalid />
</div> </div>
<DocSectionCode :code="code" /> <DocSectionCode :code="code" />
</template> </template>
@ -15,12 +15,12 @@ export default {
value: null, value: null,
code: { code: {
basic: ` basic: `
<Password class="p-invalid" /> <Password invalid />
`, `,
options: ` options: `
<template> <template>
<div class="card flex justify-content-center"> <div class="card flex justify-content-center">
<Password class="p-invalid" /> <Password invalid />
</div> </div>
</template> </template>
@ -37,7 +37,7 @@ export default {
composition: ` composition: `
<template> <template>
<div class="card flex justify-content-center"> <div class="card flex justify-content-center">
<Password class="p-invalid" /> <Password invalid />
</div> </div>
</template> </template>

8
doc/radiobutton/InvalidDoc.vue
View File

@ -3,7 +3,7 @@
<p>Invalid state style is added using the <i>p-invalid</i> class to indicate a failed validation.</p> <p>Invalid state style is added using the <i>p-invalid</i> class to indicate a failed validation.</p>
</DocSectionText> </DocSectionText>
<div class="card flex justify-content-center"> <div class="card flex justify-content-center">
<RadioButton class="p-invalid" /> <RadioButton invalid />
</div> </div>
<DocSectionCode :code="code" /> <DocSectionCode :code="code" />
</template> </template>
@ -15,12 +15,12 @@ export default {
checked: false, checked: false,
code: { code: {
basic: ` basic: `
<RadioButton class="p-invalid" /> <RadioButton invalid />
`, `,
options: ` options: `
<template> <template>
<div class="card flex justify-content-center"> <div class="card flex justify-content-center">
<RadioButton class="p-invalid" /> <RadioButton invalid />
</div> </div>
</template> </template>
@ -30,7 +30,7 @@ export default {
composition: ` composition: `
<template> <template>
<div class="card flex justify-content-center"> <div class="card flex justify-content-center">
<RadioButton class="p-invalid" /> <RadioButton invalid />
</div> </div>
</template> </template>

8
doc/textarea/InvalidDoc.vue
View File

@ -3,7 +3,7 @@
<p>Invalid state style is added using the <i>p-invalid</i> class to indicate a failed validation.</p> <p>Invalid state style is added using the <i>p-invalid</i> class to indicate a failed validation.</p>
</DocSectionText> </DocSectionText>
<div class="card flex justify-content-center"> <div class="card flex justify-content-center">
<Textarea v-model="value" rows="5" cols="30" class="p-invalid" style="resize: none" /> <Textarea v-model="value" rows="5" cols="30" invalid style="resize: none" />
</div> </div>
<DocSectionCode :code="code" /> <DocSectionCode :code="code" />
</template> </template>
@ -15,12 +15,12 @@ export default {
value: '', value: '',
code: { code: {
basic: ` basic: `
<Textarea v-model="value" rows="5" cols="30" /> <Textarea v-model="value" rows="5" cols="30" invalid />
`, `,
options: ` options: `
<template> <template>
<div class="card flex justify-content-center"> <div class="card flex justify-content-center">
<Textarea v-model="value" rows="5" cols="30" class="p-invalid" /> <Textarea v-model="value" rows="5" cols="30" invalid />
</div> </div>
</template> </template>
@ -37,7 +37,7 @@ export default {
composition: ` composition: `
<template> <template>
<div class="card flex justify-content-center"> <div class="card flex justify-content-center">
<Textarea v-model="value" rows="5" cols="30" class="p-invalid" /> <Textarea v-model="value" rows="5" cols="30" invalid />
</div> </div>
</template> </template>

8
doc/togglebutton/InvalidDoc.vue
View File

@ -3,7 +3,7 @@
<p>Invalid state style is added using the <i>p-invalid</i> class to indicate a failed validation.</p> <p>Invalid state style is added using the <i>p-invalid</i> class to indicate a failed validation.</p>
</DocSectionText> </DocSectionText>
<div class="card flex justify-content-center"> <div class="card flex justify-content-center">
<ToggleButton v-model="checked" onIcon="pi pi-check" offIcon="pi pi-times" class="p-invalid w-full sm:w-10rem" aria-label="Confirmation" /> <ToggleButton v-model="checked" onIcon="pi pi-check" offIcon="pi pi-times" invalid class="w-full sm:w-10rem" aria-label="Confirmation" />
</div> </div>
<DocSectionCode :code="code" /> <DocSectionCode :code="code" />
</template> </template>
@ -15,12 +15,12 @@ export default {
checked: true, checked: true,
code: { code: {
basic: ` basic: `
<ToggleButton v-model="checked1" onIcon="pi pi-check" offIcon="pi pi-times" class="p-invalid w-full sm:w-10rem" aria-label="Confirmation" /> <ToggleButton v-model="checked1" onIcon="pi pi-check" offIcon="pi pi-times" invalid class="w-full sm:w-10rem" aria-label="Confirmation" />
`, `,
options: ` options: `
<template> <template>
<div class="card flex justify-content-center"> <div class="card flex justify-content-center">
<ToggleButton v-model="checked1" onIcon="pi pi-check" offIcon="pi pi-times" class="p-invalid w-full sm:w-10rem" aria-label="Confirmation" /> <ToggleButton v-model="checked1" onIcon="pi pi-check" offIcon="pi pi-times" invalid class="w-full sm:w-10rem" aria-label="Confirmation" />
</div> </div>
</template> </template>
@ -37,7 +37,7 @@ export default {
composition: ` composition: `
<template> <template>
<div class="card flex justify-content-center"> <div class="card flex justify-content-center">
<ToggleButton v-model="checked1" onIcon="pi pi-check" offIcon="pi pi-times" class="p-invalid w-full sm:w-10rem" aria-label="Confirmation" /> <ToggleButton v-model="checked1" onIcon="pi pi-check" offIcon="pi pi-times" invalid class="w-full sm:w-10rem" aria-label="Confirmation" />
</div> </div>
</template> </template>

8
doc/treeselect/InvalidDoc.vue
View File

@ -3,7 +3,7 @@
<p>Invalid state style is added using the <i>p-invalid</i> class to indicate a failed validation.</p> <p>Invalid state style is added using the <i>p-invalid</i> class to indicate a failed validation.</p>
</DocSectionText> </DocSectionText>
<div class="card flex justify-content-center"> <div class="card flex justify-content-center">
<TreeSelect v-model="selectedValue" class="md:w-20rem w-full p-invalid" :options="nodes" placeholder="TreeSelect" /> <TreeSelect v-model="selectedValue" invalid class="md:w-20rem w-full" :options="nodes" placeholder="TreeSelect" />
</div> </div>
<DocSectionCode :code="code" :service="['NodeService']" v-bind="$attrs" /> <DocSectionCode :code="code" :service="['NodeService']" v-bind="$attrs" />
</template> </template>
@ -18,12 +18,12 @@ export default {
selectedValue: null, selectedValue: null,
code: { code: {
basic: ` basic: `
<TreeSelect v-model="selectedValue" class="md:w-20rem w-full p-invalid" :options="nodes" placeholder="TreeSelect" /> <TreeSelect v-model="selectedValue" invalid class="md:w-20rem w-full" :options="nodes" placeholder="TreeSelect" />
`, `,
options: ` options: `
<template> <template>
<div class="card flex justify-content-center"> <div class="card flex justify-content-center">
<TreeSelect v-model="selectedValue" class="md:w-20rem w-full p-invalid" :options="nodes" placeholder="TreeSelect" /> <TreeSelect v-model="selectedValue" invalid class="md:w-20rem w-full" :options="nodes" placeholder="TreeSelect" />
</div> </div>
</template> </template>
@ -46,7 +46,7 @@ export default {
composition: ` composition: `
<template> <template>
<div class="card flex justify-content-center"> <div class="card flex justify-content-center">
<TreeSelect v-model="selectedValue" class="md:w-20rem w-full p-invalid" :options="nodes" placeholder="TreeSelect" /> <TreeSelect v-model="selectedValue" invalid class="md:w-20rem w-full" :options="nodes" placeholder="TreeSelect" />
</div> </div>
</template> </template>

8
doc/tristatecheckbox/InvalidDoc.vue
View File

@ -3,7 +3,7 @@
<p>Invalid state style is added using the <i>p-invalid</i> class to indicate a failed validation.</p> <p>Invalid state style is added using the <i>p-invalid</i> class to indicate a failed validation.</p>
</DocSectionText> </DocSectionText>
<div class="card flex flex-column align-items-center gap-3"> <div class="card flex flex-column align-items-center gap-3">
<TriStateCheckbox v-model="value" class="p-invalid" /> <TriStateCheckbox v-model="value" invalid />
<label for="checkbox">{{ value == null ? 'null' : value }}</label> <label for="checkbox">{{ value == null ? 'null' : value }}</label>
</div> </div>
<DocSectionCode :code="code" /> <DocSectionCode :code="code" />
@ -16,12 +16,12 @@ export default {
value: null, value: null,
code: { code: {
basic: ` basic: `
<TriStateCheckbox v-model="value" class="p-invalid" /> <TriStateCheckbox v-model="value" invalid />
`, `,
options: ` options: `
<template> <template>
<div class="card flex flex-column align-items-center gap-3"> <div class="card flex flex-column align-items-center gap-3">
<TriStateCheckbox v-model="value" class="p-invalid" /> <TriStateCheckbox v-model="value" invalid />
<label for="checkbox">{{ value == null ? 'null' : value }}</label> <label for="checkbox">{{ value == null ? 'null' : value }}</label>
</div> </div>
</template> </template>
@ -39,7 +39,7 @@ export default {
composition: ` composition: `
<template> <template>
<div class="card flex flex-column align-items-center gap-3"> <div class="card flex flex-column align-items-center gap-3">
<TriStateCheckbox v-model="value" class="p-invalid" /> <TriStateCheckbox v-model="value" invalid />
<label for="checkbox">{{ value == null ? 'null' : value }}</label> <label for="checkbox">{{ value == null ? 'null' : value }}</label>
</div> </div>
</template> </template>