Invalid demos updates
tugcekucukoglu
parent
89e89a4974
commit
d5d735f643
|
|
@ -3,7 +3,7 @@
|
|||
<p>Invalid state style is added using the <i>p-invalid</i> class to indicate a failed validation.</p>
|
||||
</DocSectionText>
|
||||
<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>
|
||||
<DocSectionCode :code="code" />
|
||||
</template>
|
||||
|
|
@ -16,12 +16,12 @@ export default {
|
|||
items: [],
|
||||
code: {
|
||||
basic: `
|
||||
<AutoComplete v-model="value" :suggestions="items" @complete="search" class="p-invalid" />
|
||||
<AutoComplete v-model="value" :suggestions="items" @complete="search" invalid />
|
||||
`,
|
||||
options: `
|
||||
<template>
|
||||
<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>
|
||||
</template>
|
||||
|
||||
|
|
@ -44,7 +44,7 @@ export default {
|
|||
composition: `
|
||||
<template>
|
||||
<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>
|
||||
</template>
|
||||
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@
|
|||
<p>Calendar is used a controlled input component with <i>v-model</i> property.</p>
|
||||
</DocSectionText>
|
||||
<div class="card flex justify-content-center">
|
||||
<Calendar v-model="date" class="p-invalid" />
|
||||
<Calendar v-model="date" invalid />
|
||||
</div>
|
||||
<DocSectionCode :code="code" />
|
||||
</template>
|
||||
|
|
@ -15,12 +15,12 @@ export default {
|
|||
date: null,
|
||||
code: {
|
||||
basic: `
|
||||
<Calendar v-model="date" class="p-invalid" />
|
||||
<Calendar v-model="date" invalid />
|
||||
`,
|
||||
options: `
|
||||
<template>
|
||||
<div class="card flex justify-content-center">
|
||||
<Calendar v-model="date" class="p-invalid" />
|
||||
<Calendar v-model="date" invalid />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
@ -37,7 +37,7 @@ export default {
|
|||
composition: `
|
||||
<template>
|
||||
<div class="card flex justify-content-center">
|
||||
<Calendar v-model="date" class="p-invalid" />
|
||||
<Calendar v-model="date" invalid />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@
|
|||
<p>Invalid state style is added using the <i>p-invalid</i> class to indicate a failed validation.</p>
|
||||
</DocSectionText>
|
||||
<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>
|
||||
<DocSectionCode :code="code" />
|
||||
</template>
|
||||
|
|
@ -89,13 +89,13 @@ export default {
|
|||
],
|
||||
code: {
|
||||
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" />
|
||||
`,
|
||||
options: `
|
||||
<template>
|
||||
<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" />
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -187,7 +187,7 @@ export default {
|
|||
composition: `
|
||||
<template>
|
||||
<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" />
|
||||
</div>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@
|
|||
<p>Invalid state style is added using the <i>p-invalid</i> class to indicate a failed validation.</p>
|
||||
</DocSectionText>
|
||||
<div class="card flex justify-content-center">
|
||||
<Checkbox v-model="checked" class="p-invalid" binary />
|
||||
<Checkbox v-model="checked" invalid binary />
|
||||
</div>
|
||||
<DocSectionCode :code="code" />
|
||||
</template>
|
||||
|
|
@ -15,12 +15,12 @@ export default {
|
|||
checked: false,
|
||||
code: {
|
||||
basic: `
|
||||
<Checkbox v-model="checked" class="p-invalid" binary />
|
||||
<Checkbox v-model="checked" invalid binary />
|
||||
`,
|
||||
options: `
|
||||
<template>
|
||||
<div class="card flex justify-content-center">
|
||||
<Checkbox v-model="checked" class="p-invalid" binary />
|
||||
<Checkbox v-model="checked" invalid binary />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
@ -37,7 +37,7 @@ export default {
|
|||
composition: `
|
||||
<template>
|
||||
<div class="card flex justify-content-center">
|
||||
<Checkbox v-model="checked" class="p-invalid" binary />
|
||||
<Checkbox v-model="checked" invalid binary />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@
|
|||
<p>Invalid state style is added using the <i>p-invalid</i> class to indicate a failed validation.</p>
|
||||
</DocSectionText>
|
||||
<div class="card p-fluid">
|
||||
<Chips v-model="value" class="p-invalid" />
|
||||
<Chips v-model="value" invalid />
|
||||
</div>
|
||||
<DocSectionCode :code="code" />
|
||||
</template>
|
||||
|
|
@ -15,12 +15,12 @@ export default {
|
|||
value: null,
|
||||
code: {
|
||||
basic: `
|
||||
<Chips v-model="value" class="p-invalid" />
|
||||
<Chips v-model="value" invalid />
|
||||
`,
|
||||
options: `
|
||||
<template>
|
||||
<div class="card p-fluid">
|
||||
<Chips v-model="value" class="p-invalid" />
|
||||
<Chips v-model="value" invalid />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
@ -37,7 +37,7 @@ export default {
|
|||
composition: `
|
||||
<template>
|
||||
<div class="card p-fluid">
|
||||
<Chips v-model="value" class="p-invalid" />
|
||||
<Chips v-model="value" invalid />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@
|
|||
<p>Invalid state style is added using the <i>p-invalid</i> class to indicate a failed validation.</p>
|
||||
</DocSectionText>
|
||||
<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>
|
||||
<DocSectionCode :code="code" />
|
||||
</template>
|
||||
|
|
@ -22,12 +22,12 @@ export default {
|
|||
],
|
||||
code: {
|
||||
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: `
|
||||
<template>
|
||||
<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>
|
||||
</template>
|
||||
|
||||
|
|
@ -51,7 +51,7 @@ export default {
|
|||
composition: `
|
||||
<template>
|
||||
<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>
|
||||
</template>
|
||||
|
||||
|
|
|
|||
|
|
@ -5,12 +5,12 @@
|
|||
<div class="card">
|
||||
<div class="flex flex-wrap align-items-center mb-3 gap-2">
|
||||
<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>
|
||||
</div>
|
||||
<div class="flex flex-wrap align-items-center gap-2">
|
||||
<label for="email" class="p-sr-only">email</label>
|
||||
<InputText id="email" placeholder="Email" class="p-invalid" />
|
||||
<InputText id="email" placeholder="Email" invalid />
|
||||
<InlineMessage />
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -25,12 +25,12 @@ export default {
|
|||
basic: `
|
||||
<div class="flex flex-wrap align-items-center mb-3 gap-2">
|
||||
<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>
|
||||
</div>
|
||||
<div class="flex flex-wrap align-items-center gap-2">
|
||||
<label for="email" class="p-sr-only">email</label>
|
||||
<InputText id="email" placeholder="Email" class="p-invalid" />
|
||||
<InputText id="email" placeholder="Email" invalid />
|
||||
<InlineMessage />
|
||||
</div>
|
||||
`,
|
||||
|
|
@ -39,12 +39,12 @@ export default {
|
|||
<div class="card">
|
||||
<div class="flex flex-wrap align-items-center mb-3 gap-2">
|
||||
<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>
|
||||
</div>
|
||||
<div class="flex flex-wrap align-items-center gap-2">
|
||||
<label for="email" class="p-sr-only">email</label>
|
||||
<InputText id="email" placeholder="Email" class="p-invalid" />
|
||||
<InputText id="email" placeholder="Email" invalid />
|
||||
<InlineMessage />
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -58,12 +58,12 @@ export default {
|
|||
<div class="card">
|
||||
<div class="flex flex-wrap align-items-center mb-3 gap-2">
|
||||
<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>
|
||||
</div>
|
||||
<div class="flex flex-wrap align-items-center gap-2">
|
||||
<label for="email" class="p-sr-only">email</label>
|
||||
<InputText id="email" placeholder="Email" class="p-invalid" />
|
||||
<InputText id="email" placeholder="Email" invalid />
|
||||
<InlineMessage />
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@
|
|||
<p>Invalid state style is added using the <i>p-invalid</i> class to indicate a failed validation.</p>
|
||||
</DocSectionText>
|
||||
<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>
|
||||
<DocSectionCode :code="code" />
|
||||
</template>
|
||||
|
|
@ -15,12 +15,12 @@ export default {
|
|||
value: null,
|
||||
code: {
|
||||
basic: `
|
||||
<InputNumber v-model="value" class="p-invalid" mode="decimal" :minFractionDigits="2" />
|
||||
<InputNumber v-model="value" invalid mode="decimal" :minFractionDigits="2" />
|
||||
`,
|
||||
options: `
|
||||
<template>
|
||||
<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>
|
||||
</template>
|
||||
|
||||
|
|
@ -37,7 +37,7 @@ export default {
|
|||
composition: `
|
||||
<template>
|
||||
<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>
|
||||
</template>
|
||||
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@
|
|||
<p>Invalid state style is added using the <i>p-invalid</i> class to indicate a failed validation.</p>
|
||||
</DocSectionText>
|
||||
<div class="card flex justify-content-center">
|
||||
<InputSwitch v-model="checked" class="p-invalid" />
|
||||
<InputSwitch v-model="checked" invalid />
|
||||
</div>
|
||||
<DocSectionCode :code="code" />
|
||||
</template>
|
||||
|
|
@ -15,12 +15,12 @@ export default {
|
|||
checked: false,
|
||||
code: {
|
||||
basic: `
|
||||
<InputSwitch v-model="checked" class="p-invalid" />
|
||||
<InputSwitch v-model="checked" invalid />
|
||||
`,
|
||||
options: `
|
||||
<template>
|
||||
<div class="card flex justify-content-center">
|
||||
<InputSwitch v-model="checked" class="p-invalid" />
|
||||
<InputSwitch v-model="checked" invalid />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
@ -37,7 +37,7 @@ export default {
|
|||
composition: `
|
||||
<template>
|
||||
<div class="card flex justify-content-center">
|
||||
<InputSwitch v-model="checked" class="p-invalid" />
|
||||
<InputSwitch v-model="checked" invalid />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@
|
|||
<p>Invalid state style is added using the <i>.p-invalid</i> class to indicate a failed validation.</p>
|
||||
</DocSectionText>
|
||||
<div class="card flex justify-content-center">
|
||||
<InputText v-model="value" class="p-invalid" />
|
||||
<InputText v-model="value" invalid />
|
||||
</div>
|
||||
<DocSectionCode :code="code" />
|
||||
</template>
|
||||
|
|
@ -15,13 +15,13 @@ export default {
|
|||
value: null,
|
||||
code: {
|
||||
basic: `
|
||||
<InputText v-model="value" class="p-invalid" />
|
||||
<InputText v-model="value" invalid />
|
||||
`,
|
||||
options: `
|
||||
<template>
|
||||
<div class="card flex justify-content-center">
|
||||
<InputText v-model="value" class="p-invalid" />
|
||||
</div>
|
||||
<InputText v-model="value" invalid />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
|
@ -37,8 +37,8 @@ export default {
|
|||
composition: `
|
||||
<template>
|
||||
<div class="card flex justify-content-center">
|
||||
<InputText v-model="value" class="p-invalid" />
|
||||
</div>
|
||||
<InputText v-model="value" invalid />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@
|
|||
<p>Invalid state style is added using the <i>p-invalid</i> class to indicate a failed validation.</p>
|
||||
</DocSectionText>
|
||||
<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>
|
||||
<DocSectionCode :code="code" />
|
||||
</template>
|
||||
|
|
@ -22,12 +22,12 @@ export default {
|
|||
],
|
||||
code: {
|
||||
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: `
|
||||
<template>
|
||||
<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>
|
||||
</template>
|
||||
|
||||
|
|
@ -51,7 +51,7 @@ export default {
|
|||
composition: `
|
||||
<template>
|
||||
<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>
|
||||
</template>
|
||||
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@
|
|||
<p>Invalid state style is added using the <i>p-invalid</i> class to indicate a failed validation.</p>
|
||||
</DocSectionText>
|
||||
<div class="card flex justify-content-center">
|
||||
<Password class="p-invalid" />
|
||||
<Password invalid />
|
||||
</div>
|
||||
<DocSectionCode :code="code" />
|
||||
</template>
|
||||
|
|
@ -15,12 +15,12 @@ export default {
|
|||
value: null,
|
||||
code: {
|
||||
basic: `
|
||||
<Password class="p-invalid" />
|
||||
<Password invalid />
|
||||
`,
|
||||
options: `
|
||||
<template>
|
||||
<div class="card flex justify-content-center">
|
||||
<Password class="p-invalid" />
|
||||
<Password invalid />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
@ -37,7 +37,7 @@ export default {
|
|||
composition: `
|
||||
<template>
|
||||
<div class="card flex justify-content-center">
|
||||
<Password class="p-invalid" />
|
||||
<Password invalid />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@
|
|||
<p>Invalid state style is added using the <i>p-invalid</i> class to indicate a failed validation.</p>
|
||||
</DocSectionText>
|
||||
<div class="card flex justify-content-center">
|
||||
<RadioButton class="p-invalid" />
|
||||
<RadioButton invalid />
|
||||
</div>
|
||||
<DocSectionCode :code="code" />
|
||||
</template>
|
||||
|
|
@ -15,12 +15,12 @@ export default {
|
|||
checked: false,
|
||||
code: {
|
||||
basic: `
|
||||
<RadioButton class="p-invalid" />
|
||||
<RadioButton invalid />
|
||||
`,
|
||||
options: `
|
||||
<template>
|
||||
<div class="card flex justify-content-center">
|
||||
<RadioButton class="p-invalid" />
|
||||
<RadioButton invalid />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
@ -30,7 +30,7 @@ export default {
|
|||
composition: `
|
||||
<template>
|
||||
<div class="card flex justify-content-center">
|
||||
<RadioButton class="p-invalid" />
|
||||
<RadioButton invalid />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@
|
|||
<p>Invalid state style is added using the <i>p-invalid</i> class to indicate a failed validation.</p>
|
||||
</DocSectionText>
|
||||
<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>
|
||||
<DocSectionCode :code="code" />
|
||||
</template>
|
||||
|
|
@ -15,12 +15,12 @@ export default {
|
|||
value: '',
|
||||
code: {
|
||||
basic: `
|
||||
<Textarea v-model="value" rows="5" cols="30" />
|
||||
<Textarea v-model="value" rows="5" cols="30" invalid />
|
||||
`,
|
||||
options: `
|
||||
<template>
|
||||
<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>
|
||||
</template>
|
||||
|
||||
|
|
@ -37,7 +37,7 @@ export default {
|
|||
composition: `
|
||||
<template>
|
||||
<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>
|
||||
</template>
|
||||
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@
|
|||
<p>Invalid state style is added using the <i>p-invalid</i> class to indicate a failed validation.</p>
|
||||
</DocSectionText>
|
||||
<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>
|
||||
<DocSectionCode :code="code" />
|
||||
</template>
|
||||
|
|
@ -15,12 +15,12 @@ export default {
|
|||
checked: true,
|
||||
code: {
|
||||
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: `
|
||||
<template>
|
||||
<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>
|
||||
</template>
|
||||
|
||||
|
|
@ -37,7 +37,7 @@ export default {
|
|||
composition: `
|
||||
<template>
|
||||
<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>
|
||||
</template>
|
||||
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@
|
|||
<p>Invalid state style is added using the <i>p-invalid</i> class to indicate a failed validation.</p>
|
||||
</DocSectionText>
|
||||
<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>
|
||||
<DocSectionCode :code="code" :service="['NodeService']" v-bind="$attrs" />
|
||||
</template>
|
||||
|
|
@ -18,12 +18,12 @@ export default {
|
|||
selectedValue: null,
|
||||
code: {
|
||||
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: `
|
||||
<template>
|
||||
<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>
|
||||
</template>
|
||||
|
||||
|
|
@ -46,7 +46,7 @@ export default {
|
|||
composition: `
|
||||
<template>
|
||||
<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>
|
||||
</template>
|
||||
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@
|
|||
<p>Invalid state style is added using the <i>p-invalid</i> class to indicate a failed validation.</p>
|
||||
</DocSectionText>
|
||||
<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>
|
||||
</div>
|
||||
<DocSectionCode :code="code" />
|
||||
|
|
@ -16,32 +16,32 @@ export default {
|
|||
value: null,
|
||||
code: {
|
||||
basic: `
|
||||
<TriStateCheckbox v-model="value" class="p-invalid" />
|
||||
<TriStateCheckbox v-model="value" invalid />
|
||||
`,
|
||||
options: `
|
||||
<template>
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
value: null
|
||||
}
|
||||
}
|
||||
data() {
|
||||
return {
|
||||
value: null
|
||||
}
|
||||
}
|
||||
}
|
||||
<\/script>
|
||||
`,
|
||||
composition: `
|
||||
<template>
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
|
|
|
|||
Loading…
Reference in New Issue